diff --git a/src/site/includes/side-nav.html b/src/site/includes/side-nav.html
index 2d9095e7..1d45c020 100644
--- a/src/site/includes/side-nav.html
+++ b/src/site/includes/side-nav.html
@@ -24,6 +24,7 @@
         <li><a href="./ui-components.html#breadcrumb">Breadcrumbs</a></li>
         <li><a href="./ui-components.html#pagination">Pagination</a></li>
         <li><a href="./ui-components.html#user-avatar">User Avatars</a></li>
+        <li><a href="./ui-components.html#logout-form">Logout Form</a></li>
         <li><a href="./ui-components.html#author-blurb-single">Author Blurb</a></li>
         <li><a href="./ui-components.html#signup-cta">Sign Up CTA</a></li>
         <li><a href="./ui-components.html#feature-card">Feature Card</a></li>
diff --git a/src/site/ui-components.html b/src/site/ui-components.html
index fbacbebf..ba9eb94d 100644
--- a/src/site/ui-components.html
+++ b/src/site/ui-components.html
@@ -14,6 +14,7 @@ <h2>UI Components</h2>
         @@include('./ui-components/breadcrumb/index.html')
         @@include('./ui-components/pagination/index.html')
         @@include('./ui-components/user-avatar/index.html')
+        @@include('./ui-components/logout-form/index.html')
         @@include('./ui-components/author-blurb/single.html')
         @@include('./ui-components/author-blurb/multiple.html')
         @@include('./ui-components/signup-cta/index.html')
diff --git a/src/site/ui-components/logout-form/index.html b/src/site/ui-components/logout-form/index.html
new file mode 100644
index 00000000..1b61b551
--- /dev/null
+++ b/src/site/ui-components/logout-form/index.html
@@ -0,0 +1,15 @@
+<div id="logout-form" class="headroom-large">
+  <div>
+    <h5>Logout Form</h5>
+    <p>If you need to give users the ability to log out of your service, use this handy form.</p>
+    <div data-xrayhtml>
+      <form action="url/to/logout" method="post" class="logout-form">
+        <div class="info">
+          <p>username</p>
+          <p><button>Logout</button></p>
+        </div>
+        <img src="https://www.gravatar.com/avatar/97d18d65a4ead88adfd7f89cb5bca0bd.png">
+      </form>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/stylesheets/common/_logout.scss b/src/stylesheets/common/_logout.scss
new file mode 100644
index 00000000..0987a7be
--- /dev/null
+++ b/src/stylesheets/common/_logout.scss
@@ -0,0 +1,40 @@
+//
+// Logout form styles
+// --------------------------------------------------
+.logout-form {
+  .info {
+    float: left;
+    text-align: right;
+    font-size: 14px;
+    font-weight: 400;
+    margin-right: 20px;
+
+    p {
+      line-height: 1.3em;
+      margin-bottom: 0;
+    }
+    button {
+      appearance: none;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      background: transparent;
+      color: #6ea0a4;
+      border: none;
+      padding: 0;
+      text-transform: inherit;
+      font-weight: 400;
+      &:hover {
+        background: transparent;
+        color: #385d5c;
+      }
+    }
+  }
+  img {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    border: 1.5px solid #385d5c;
+    padding: 2px;
+    margin-top: -10px;
+  }
+}
\ No newline at end of file
diff --git a/src/stylesheets/styleguide.scss b/src/stylesheets/styleguide.scss
index 96ecf421..4d46ece0 100644
--- a/src/stylesheets/styleguide.scss
+++ b/src/stylesheets/styleguide.scss
@@ -30,6 +30,7 @@
 @import 'common/legal';
 @import 'common/lists';
 @import 'common/loading';
+@import 'common/logout';
 @import 'common/media-resources';
 @import 'common/navbar';
 @import 'common/pagination';