diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index 17a73282c2..790c2cdc94 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -484,7 +484,7 @@ exports[`Storyshots DateFromNow Default 1`] = `
 
 exports[`Storyshots Diff Binaries 1`] = `
 <div
-  className="sc-TOsTZ flmUBf"
+  className="sc-hmzhuo TypKC"
 >
   <div
     className="sc-gZMcBi iABzaT panel is-size-6"
@@ -753,7 +753,7 @@ exports[`Storyshots Diff Binaries 1`] = `
 
 exports[`Storyshots Diff Collapsed 1`] = `
 <div
-  className="sc-TOsTZ flmUBf"
+  className="sc-hmzhuo TypKC"
 >
   <div
     className="sc-gZMcBi ckdmuY panel is-size-6"
@@ -1102,7 +1102,7 @@ exports[`Storyshots Diff Collapsed 1`] = `
 
 exports[`Storyshots Diff CollapsingWithFunction 1`] = `
 <div
-  className="sc-TOsTZ flmUBf"
+  className="sc-hmzhuo TypKC"
 >
   <div
     className="sc-gZMcBi ckdmuY panel is-size-6"
@@ -3028,7 +3028,7 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
 
 exports[`Storyshots Diff Default 1`] = `
 <div
-  className="sc-TOsTZ flmUBf"
+  className="sc-hmzhuo TypKC"
 >
   <div
     className="sc-gZMcBi iABzaT panel is-size-6"
@@ -6936,7 +6936,7 @@ exports[`Storyshots Diff Default 1`] = `
 
 exports[`Storyshots Diff File Annotation 1`] = `
 <div
-  className="sc-TOsTZ flmUBf"
+  className="sc-hmzhuo TypKC"
 >
   <div
     className="sc-gZMcBi iABzaT panel is-size-6"
@@ -10868,7 +10868,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
 
 exports[`Storyshots Diff File Controls 1`] = `
 <div
-  className="sc-TOsTZ flmUBf"
+  className="sc-hmzhuo TypKC"
 >
   <div
     className="sc-gZMcBi iABzaT panel is-size-6"
@@ -14884,7 +14884,7 @@ exports[`Storyshots Diff File Controls 1`] = `
 
 exports[`Storyshots Diff Hunks 1`] = `
 <div
-  className="sc-TOsTZ flmUBf"
+  className="sc-hmzhuo TypKC"
 >
   <div
     className="sc-gZMcBi iABzaT panel is-size-6"
@@ -15721,7 +15721,7 @@ exports[`Storyshots Diff Hunks 1`] = `
 
 exports[`Storyshots Diff Line Annotation 1`] = `
 <div
-  className="sc-TOsTZ flmUBf"
+  className="sc-hmzhuo TypKC"
 >
   <div
     className="sc-gZMcBi iABzaT panel is-size-6"
@@ -19665,7 +19665,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
 
 exports[`Storyshots Diff OnClick 1`] = `
 <div
-  className="sc-TOsTZ flmUBf"
+  className="sc-hmzhuo TypKC"
 >
   <div
     className="sc-gZMcBi iABzaT panel is-size-6"
@@ -23847,7 +23847,7 @@ exports[`Storyshots Diff OnClick 1`] = `
 
 exports[`Storyshots Diff Side-By-Side 1`] = `
 <div
-  className="sc-TOsTZ flmUBf"
+  className="sc-hmzhuo TypKC"
 >
   <div
     className="sc-gZMcBi iABzaT panel is-size-6"
@@ -28284,7 +28284,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
 
 exports[`Storyshots Diff SyntaxHighlighting 1`] = `
 <div
-  className="sc-TOsTZ flmUBf"
+  className="sc-hmzhuo TypKC"
 >
   <div
     className="sc-gZMcBi iABzaT panel is-size-6"
@@ -32192,7 +32192,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
 
 exports[`Storyshots Forms|Checkbox Default 1`] = `
 <div
-  className="sc-gisBJw jHakbY"
+  className="sc-kgAjT khfRmZ"
 >
   <div
     className="field"
@@ -32237,7 +32237,7 @@ exports[`Storyshots Forms|Checkbox Default 1`] = `
 
 exports[`Storyshots Forms|Checkbox Disabled 1`] = `
 <div
-  className="sc-gisBJw jHakbY"
+  className="sc-kgAjT khfRmZ"
 >
   <div
     className="field"
@@ -32265,7 +32265,7 @@ exports[`Storyshots Forms|Checkbox Disabled 1`] = `
 
 exports[`Storyshots Forms|Radio Default 1`] = `
 <div
-  className="sc-kjoXOD hVPZau"
+  className="sc-cJSrbW hLoADP"
 >
   <label
     className="sc-cMljjf kOqpHe radio"
@@ -32294,7 +32294,7 @@ exports[`Storyshots Forms|Radio Default 1`] = `
 
 exports[`Storyshots Forms|Radio Disabled 1`] = `
 <div
-  className="sc-kjoXOD hVPZau"
+  className="sc-cJSrbW hLoADP"
 >
   <label
     className="sc-cMljjf kOqpHe radio"
@@ -32314,7 +32314,7 @@ exports[`Storyshots Forms|Radio Disabled 1`] = `
 
 exports[`Storyshots Forms|Textarea OnCancel 1`] = `
 <div
-  className="sc-cHGsZl klfJMr"
+  className="sc-ksYbfQ ePXdiL"
 >
   <div
     className="field"
@@ -32337,7 +32337,7 @@ exports[`Storyshots Forms|Textarea OnCancel 1`] = `
 
 exports[`Storyshots Forms|Textarea OnChange 1`] = `
 <div
-  className="sc-cHGsZl klfJMr"
+  className="sc-ksYbfQ ePXdiL"
 >
   <div
     className="field"
@@ -32364,7 +32364,7 @@ exports[`Storyshots Forms|Textarea OnChange 1`] = `
 
 exports[`Storyshots Forms|Textarea OnSubmit 1`] = `
 <div
-  className="sc-cHGsZl klfJMr"
+  className="sc-ksYbfQ ePXdiL"
 >
   <div
     className="field"
@@ -32393,52 +32393,107 @@ exports[`Storyshots Layout|Footer Default 1`] = `
 <footer
   className="footer"
 >
-  <div
-    className="container is-centered has-text-centered "
+  <section
+    className="section container"
   >
-    <p
-      className="is-size-6 columns is-centered"
+    <div
+      className="columns is-size-7"
     >
-      <a
-        href="/me"
-        onClick={[Function]}
+      <section
+        className="column is-one-third"
       >
-        Trillian McMillian
-      </a>
-    </p>
-    <hr
-      className="has-background-grey-lighter"
-    />
-    <p>
-      <a
-        href="https://www.scm-manager.org/"
-        target="_blank"
+        <div
+          className="sc-hzDkRC jeksqW"
+        >
+          <i
+            className="fas fa-user-circle fa-fw"
+          />
+           
+          Trillian McMillian
+        </div>
+        <ul
+          className="sc-jhAzac eoWThz"
+        >
+          <li>
+            <a
+              className=""
+              href="/me"
+              onClick={[Function]}
+            >
+              footer.user.profile
+            </a>
+          </li>
+          <li>
+            <a
+              className=""
+              href="/me/settings/password"
+              onClick={[Function]}
+            >
+              profile.changePasswordNavLink
+            </a>
+          </li>
+        </ul>
+      </section>
+      <section
+        className="column is-one-third"
       >
-        SCM-Manager 
-        2.0.0
-      </a>
-    </p>
-    <br />
-    <p>
-      Powered by
-       
-      <a
-        href="https://cloudogu.com/"
-        target="_blank"
+        <div
+          className="sc-hzDkRC jeksqW"
+        >
+          <i
+            className="fas fa-info-circle fa-fw"
+          />
+           
+          footer.information.title
+        </div>
+        <ul
+          className="sc-jhAzac eoWThz"
+        >
+          <li>
+            <a
+              href="https://www.scm-manager.org/"
+              target="_blank"
+            >
+              SCM-Manager 2.0.0
+            </a>
+          </li>
+        </ul>
+      </section>
+      <section
+        className="column is-one-third"
       >
-        Cloudogu GmbH
-      </a>
-       
-      | Learn more about
-       
-      <a
-        href="https://www.scm-manager.org/"
-        target="_blank"
-      >
-        SCM-Manager
-      </a>
-    </p>
-  </div>
+        <div
+          className="sc-hzDkRC jeksqW"
+        >
+          <i
+            className="fas fa-life-ring fa-fw"
+          />
+           
+          footer.support.title
+        </div>
+        <ul
+          className="sc-jhAzac eoWThz"
+        >
+          <li>
+            <a
+              href="https://www.scm-manager.org/support/"
+              target="_blank"
+            >
+              footer.support.community
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://cloudogu.com/en/scm-manager-enterprise/"
+              target="_blank"
+            >
+              footer.support.enterprise
+            </a>
+          </li>
+        </ul>
+      </section>
+    </div>
+  </section>
 </footer>
 `;
 
@@ -32446,79 +32501,145 @@ exports[`Storyshots Layout|Footer Full 1`] = `
 <footer
   className="footer"
 >
-  <div
-    className="container is-centered has-text-centered "
+  <section
+    className="section container"
   >
-    <p
-      className="is-size-6 columns is-centered"
+    <div
+      className="columns is-size-7"
     >
-      <figure
-        className="media-left"
+      <section
+        className="column is-one-third"
       >
-        <p
-          className="image is-24x24 is-rounded"
+        <div
+          className="sc-hzDkRC jeksqW"
         >
-          <img
-            alt="trillian"
-            className="is-rounded"
-            src="test-file-stub"
+          <span
+            className="sc-fMiknA fyPpQQ image is-rounded"
+          >
+            <img
+              alt="trillian"
+              className="is-rounded sc-fBuWsC djJrAv"
+              src="test-file-stub"
+            />
+          </span>
+          Trillian McMillian
+        </div>
+        <ul
+          className="sc-jhAzac eoWThz"
+        >
+          <li>
+            <a
+              className=""
+              href="/me"
+              onClick={[Function]}
+            >
+              footer.user.profile
+            </a>
+          </li>
+          <li>
+            <a
+              className=""
+              href="/me/settings/password"
+              onClick={[Function]}
+            >
+              profile.changePasswordNavLink
+            </a>
+          </li>
+          <li>
+            <a
+              className=""
+              href="/"
+              onClick={[Function]}
+            >
+              Authorized Keys
+            </a>
+          </li>
+        </ul>
+      </section>
+      <section
+        className="column is-one-third"
+      >
+        <div
+          className="sc-hzDkRC jeksqW"
+        >
+          <i
+            className="fas fa-info-circle fa-fw"
           />
-        </p>
-      </figure>
-      <a
-        href="/me"
-        onClick={[Function]}
+           
+          footer.information.title
+        </div>
+        <ul
+          className="sc-jhAzac eoWThz"
+        >
+          <li>
+            <a
+              href="https://www.scm-manager.org/"
+              target="_blank"
+            >
+              SCM-Manager 2.0.0
+            </a>
+          </li>
+          <li>
+            <a
+              href="#"
+              target="_blank"
+            >
+              REST API
+            </a>
+          </li>
+          <li>
+            <a
+              href="#"
+              target="_blank"
+            >
+              CLI
+            </a>
+          </li>
+        </ul>
+      </section>
+      <section
+        className="column is-one-third"
       >
-        Trillian McMillian
-      </a>
-    </p>
-    <hr
-      className="has-background-grey-lighter"
-    />
-    <p>
-      <a
-        href="https://www.scm-manager.org/"
-        target="_blank"
-      >
-        SCM-Manager 
-        2.0.0
-      </a>
-       
-      | 
-      <a
-        href="#"
-      >
-        REST API
-      </a>
-       
-      | 
-      <a
-        href="#"
-      >
-        CLI
-      </a>
-    </p>
-    <br />
-    <p>
-      Powered by
-       
-      <a
-        href="https://cloudogu.com/"
-        target="_blank"
-      >
-        Cloudogu GmbH
-      </a>
-       
-      | Learn more about
-       
-      <a
-        href="https://www.scm-manager.org/"
-        target="_blank"
-      >
-        SCM-Manager
-      </a>
-    </p>
-  </div>
+        <div
+          className="sc-hzDkRC jeksqW"
+        >
+          <i
+            className="fas fa-life-ring fa-fw"
+          />
+           
+          footer.support.title
+        </div>
+        <ul
+          className="sc-jhAzac eoWThz"
+        >
+          <li>
+            <a
+              href="https://www.scm-manager.org/support/"
+              target="_blank"
+            >
+              footer.support.community
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://cloudogu.com/en/scm-manager-enterprise/"
+              target="_blank"
+            >
+              footer.support.enterprise
+            </a>
+          </li>
+          <li>
+            <a
+              href="#"
+              target="_blank"
+            >
+              FAQ
+            </a>
+          </li>
+        </ul>
+      </section>
+    </div>
+  </section>
 </footer>
 `;
 
@@ -32526,65 +32647,112 @@ exports[`Storyshots Layout|Footer With Avatar 1`] = `
 <footer
   className="footer"
 >
-  <div
-    className="container is-centered has-text-centered "
+  <section
+    className="section container"
   >
-    <p
-      className="is-size-6 columns is-centered"
+    <div
+      className="columns is-size-7"
     >
-      <figure
-        className="media-left"
+      <section
+        className="column is-one-third"
       >
-        <p
-          className="image is-24x24 is-rounded"
+        <div
+          className="sc-hzDkRC jeksqW"
         >
-          <img
-            alt="trillian"
-            className="is-rounded"
-            src="test-file-stub"
+          <span
+            className="sc-fMiknA fyPpQQ image is-rounded"
+          >
+            <img
+              alt="trillian"
+              className="is-rounded sc-fBuWsC djJrAv"
+              src="test-file-stub"
+            />
+          </span>
+          Trillian McMillian
+        </div>
+        <ul
+          className="sc-jhAzac eoWThz"
+        >
+          <li>
+            <a
+              className=""
+              href="/me"
+              onClick={[Function]}
+            >
+              footer.user.profile
+            </a>
+          </li>
+          <li>
+            <a
+              className=""
+              href="/me/settings/password"
+              onClick={[Function]}
+            >
+              profile.changePasswordNavLink
+            </a>
+          </li>
+        </ul>
+      </section>
+      <section
+        className="column is-one-third"
+      >
+        <div
+          className="sc-hzDkRC jeksqW"
+        >
+          <i
+            className="fas fa-info-circle fa-fw"
           />
-        </p>
-      </figure>
-      <a
-        href="/me"
-        onClick={[Function]}
+           
+          footer.information.title
+        </div>
+        <ul
+          className="sc-jhAzac eoWThz"
+        >
+          <li>
+            <a
+              href="https://www.scm-manager.org/"
+              target="_blank"
+            >
+              SCM-Manager 2.0.0
+            </a>
+          </li>
+        </ul>
+      </section>
+      <section
+        className="column is-one-third"
       >
-        Trillian McMillian
-      </a>
-    </p>
-    <hr
-      className="has-background-grey-lighter"
-    />
-    <p>
-      <a
-        href="https://www.scm-manager.org/"
-        target="_blank"
-      >
-        SCM-Manager 
-        2.0.0
-      </a>
-    </p>
-    <br />
-    <p>
-      Powered by
-       
-      <a
-        href="https://cloudogu.com/"
-        target="_blank"
-      >
-        Cloudogu GmbH
-      </a>
-       
-      | Learn more about
-       
-      <a
-        href="https://www.scm-manager.org/"
-        target="_blank"
-      >
-        SCM-Manager
-      </a>
-    </p>
-  </div>
+        <div
+          className="sc-hzDkRC jeksqW"
+        >
+          <i
+            className="fas fa-life-ring fa-fw"
+          />
+           
+          footer.support.title
+        </div>
+        <ul
+          className="sc-jhAzac eoWThz"
+        >
+          <li>
+            <a
+              href="https://www.scm-manager.org/support/"
+              target="_blank"
+            >
+              footer.support.community
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://cloudogu.com/en/scm-manager-enterprise/"
+              target="_blank"
+            >
+              footer.support.enterprise
+            </a>
+          </li>
+        </ul>
+      </section>
+    </div>
+  </section>
 </footer>
 `;
 
@@ -32592,66 +32760,140 @@ exports[`Storyshots Layout|Footer With Plugin Links 1`] = `
 <footer
   className="footer"
 >
-  <div
-    className="container is-centered has-text-centered "
+  <section
+    className="section container"
   >
-    <p
-      className="is-size-6 columns is-centered"
+    <div
+      className="columns is-size-7"
     >
-      <a
-        href="/me"
-        onClick={[Function]}
+      <section
+        className="column is-one-third"
       >
-        Trillian McMillian
-      </a>
-    </p>
-    <hr
-      className="has-background-grey-lighter"
-    />
-    <p>
-      <a
-        href="https://www.scm-manager.org/"
-        target="_blank"
+        <div
+          className="sc-hzDkRC jeksqW"
+        >
+          <i
+            className="fas fa-user-circle fa-fw"
+          />
+           
+          Trillian McMillian
+        </div>
+        <ul
+          className="sc-jhAzac eoWThz"
+        >
+          <li>
+            <a
+              className=""
+              href="/me"
+              onClick={[Function]}
+            >
+              footer.user.profile
+            </a>
+          </li>
+          <li>
+            <a
+              className=""
+              href="/me/settings/password"
+              onClick={[Function]}
+            >
+              profile.changePasswordNavLink
+            </a>
+          </li>
+          <li>
+            <a
+              className=""
+              href="/"
+              onClick={[Function]}
+            >
+              Authorized Keys
+            </a>
+          </li>
+        </ul>
+      </section>
+      <section
+        className="column is-one-third"
       >
-        SCM-Manager 
-        2.0.0
-      </a>
-       
-      | 
-      <a
-        href="#"
+        <div
+          className="sc-hzDkRC jeksqW"
+        >
+          <i
+            className="fas fa-info-circle fa-fw"
+          />
+           
+          footer.information.title
+        </div>
+        <ul
+          className="sc-jhAzac eoWThz"
+        >
+          <li>
+            <a
+              href="https://www.scm-manager.org/"
+              target="_blank"
+            >
+              SCM-Manager 2.0.0
+            </a>
+          </li>
+          <li>
+            <a
+              href="#"
+              target="_blank"
+            >
+              REST API
+            </a>
+          </li>
+          <li>
+            <a
+              href="#"
+              target="_blank"
+            >
+              CLI
+            </a>
+          </li>
+        </ul>
+      </section>
+      <section
+        className="column is-one-third"
       >
-        REST API
-      </a>
-       
-      | 
-      <a
-        href="#"
-      >
-        CLI
-      </a>
-    </p>
-    <br />
-    <p>
-      Powered by
-       
-      <a
-        href="https://cloudogu.com/"
-        target="_blank"
-      >
-        Cloudogu GmbH
-      </a>
-       
-      | Learn more about
-       
-      <a
-        href="https://www.scm-manager.org/"
-        target="_blank"
-      >
-        SCM-Manager
-      </a>
-    </p>
-  </div>
+        <div
+          className="sc-hzDkRC jeksqW"
+        >
+          <i
+            className="fas fa-life-ring fa-fw"
+          />
+           
+          footer.support.title
+        </div>
+        <ul
+          className="sc-jhAzac eoWThz"
+        >
+          <li>
+            <a
+              href="https://www.scm-manager.org/support/"
+              target="_blank"
+            >
+              footer.support.community
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://cloudogu.com/en/scm-manager-enterprise/"
+              target="_blank"
+            >
+              footer.support.enterprise
+            </a>
+          </li>
+          <li>
+            <a
+              href="#"
+              target="_blank"
+            >
+              FAQ
+            </a>
+          </li>
+        </ul>
+      </section>
+    </div>
+  </section>
 </footer>
 `;
 
@@ -34509,7 +34751,7 @@ PORT_NUMBER =
 
 exports[`Storyshots Table|Table Default 1`] = `
 <table
-  className="sc-fBuWsC eeihxG table content is-hoverable"
+  className="sc-fAjcbJ byigni table content is-hoverable"
 >
   <thead>
     <tr>
@@ -34527,7 +34769,7 @@ exports[`Storyshots Table|Table Default 1`] = `
       >
         Last Name
         <i
-          className="fas fa-sort-amount-down has-text-grey-light sc-jhAzac gDbcZp"
+          className="fas fa-sort-amount-down has-text-grey-light sc-eqIVtm jxAoDg"
         />
       </th>
       <th
@@ -34600,7 +34842,7 @@ exports[`Storyshots Table|Table Empty 1`] = `
 
 exports[`Storyshots Table|Table TextColumn 1`] = `
 <table
-  className="sc-fBuWsC eeihxG table content is-hoverable"
+  className="sc-fAjcbJ byigni table content is-hoverable"
 >
   <thead>
     <tr>
@@ -34612,7 +34854,7 @@ exports[`Storyshots Table|Table TextColumn 1`] = `
       >
         Id
         <i
-          className="fas fa-sort-alpha-down has-text-grey-light sc-jhAzac gDbcZp"
+          className="fas fa-sort-alpha-down has-text-grey-light sc-eqIVtm jxAoDg"
         />
       </th>
       <th
@@ -34623,7 +34865,7 @@ exports[`Storyshots Table|Table TextColumn 1`] = `
       >
         Name
         <i
-          className="fas fa-sort-alpha-down has-text-grey-light sc-jhAzac gDbcZp"
+          className="fas fa-sort-alpha-down has-text-grey-light sc-eqIVtm jxAoDg"
         />
       </th>
       <th
@@ -34634,7 +34876,7 @@ exports[`Storyshots Table|Table TextColumn 1`] = `
       >
         Description
         <i
-          className="fas fa-sort-alpha-down has-text-grey-light sc-jhAzac gDbcZp"
+          className="fas fa-sort-alpha-down has-text-grey-light sc-eqIVtm jxAoDg"
         />
       </th>
     </tr>