diff --git a/scm-ui/ui-components/src/__resources__/avatar.png b/scm-ui/ui-components/src/__resources__/avatar.png
new file mode 100644
index 0000000000..71632a3a51
Binary files /dev/null and b/scm-ui/ui-components/src/__resources__/avatar.png differ
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 0ec9bb0c76..17a73282c2 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -32389,6 +32389,272 @@ exports[`Storyshots Forms|Textarea OnSubmit 1`] = `
 </div>
 `;
 
+exports[`Storyshots Layout|Footer Default 1`] = `
+<footer
+  className="footer"
+>
+  <div
+    className="container is-centered has-text-centered "
+  >
+    <p
+      className="is-size-6 columns is-centered"
+    >
+      <a
+        href="/me"
+        onClick={[Function]}
+      >
+        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>
+</footer>
+`;
+
+exports[`Storyshots Layout|Footer Full 1`] = `
+<footer
+  className="footer"
+>
+  <div
+    className="container is-centered has-text-centered "
+  >
+    <p
+      className="is-size-6 columns is-centered"
+    >
+      <figure
+        className="media-left"
+      >
+        <p
+          className="image is-24x24 is-rounded"
+        >
+          <img
+            alt="trillian"
+            className="is-rounded"
+            src="test-file-stub"
+          />
+        </p>
+      </figure>
+      <a
+        href="/me"
+        onClick={[Function]}
+      >
+        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>
+</footer>
+`;
+
+exports[`Storyshots Layout|Footer With Avatar 1`] = `
+<footer
+  className="footer"
+>
+  <div
+    className="container is-centered has-text-centered "
+  >
+    <p
+      className="is-size-6 columns is-centered"
+    >
+      <figure
+        className="media-left"
+      >
+        <p
+          className="image is-24x24 is-rounded"
+        >
+          <img
+            alt="trillian"
+            className="is-rounded"
+            src="test-file-stub"
+          />
+        </p>
+      </figure>
+      <a
+        href="/me"
+        onClick={[Function]}
+      >
+        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>
+</footer>
+`;
+
+exports[`Storyshots Layout|Footer With Plugin Links 1`] = `
+<footer
+  className="footer"
+>
+  <div
+    className="container is-centered has-text-centered "
+  >
+    <p
+      className="is-size-6 columns is-centered"
+    >
+      <a
+        href="/me"
+        onClick={[Function]}
+      >
+        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>
+</footer>
+`;
+
 exports[`Storyshots Loading Default 1`] = `
 <div>
   <div
diff --git a/scm-ui/ui-components/src/layout/Footer.stories.tsx b/scm-ui/ui-components/src/layout/Footer.stories.tsx
new file mode 100644
index 0000000000..a4f85bc4ef
--- /dev/null
+++ b/scm-ui/ui-components/src/layout/Footer.stories.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import Footer from "./Footer";
+import { Binder, BinderContext } from "@scm-manager/ui-extensions";
+import { Me } from "@scm-manager/ui-types";
+import { EXTENSION_POINT } from "../avatar/Avatar";
+// @ts-ignore ignore unknown png
+import avatar from "../__resources__/avatar.png";
+
+const trillian: Me = {
+  name: "trillian",
+  displayName: "Trillian McMillian",
+  mail: "tricia@hitchhiker.com",
+  groups: ["crew"],
+  _links: {}
+};
+
+const bindAvatar = (binder: Binder) => {
+  binder.bind(EXTENSION_POINT, () => {
+    return avatar;
+  });
+};
+
+const bindLinks = (binder: Binder) => {
+  binder.bind("footer.links", () => <a href="#">REST API</a>);
+  binder.bind("footer.links", () => <a href="#">CLI</a>);
+};
+
+const withBinder = (binder: Binder) => {
+  return (
+    <BinderContext.Provider value={binder}>
+      <Footer me={trillian} version="2.0.0" links={{}} />
+    </BinderContext.Provider>
+  );
+};
+
+storiesOf("Layout|Footer", module)
+  .add("Default", () => {
+    return <Footer me={trillian} version="2.0.0" links={{}} />;
+  })
+  .add("With Avatar", () => {
+    const binder = new Binder("avatar-story");
+    bindAvatar(binder);
+    return withBinder(binder);
+  })
+  .add("With Plugin Links", () => {
+    const binder = new Binder("link-story");
+    bindLinks(binder);
+    return withBinder(binder);
+  })
+  .add("Full", () => {
+    const binder = new Binder("link-story");
+    bindAvatar(binder);
+    bindLinks(binder);
+    return withBinder(binder);
+  });