diff --git a/.github/ISSUE_TEMPLATE/bug-report.md b/.github/ISSUE_TEMPLATE/bug-report.md
new file mode 100644
index 000000000..b58ae09cd
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug-report.md
@@ -0,0 +1,34 @@
+---
+name: Bug Report
+about: Create a report to help us improve
+
+---
+
+## Describe the Bug
+A clear and concise description of what the bug is.
+
+## Steps to Reproduce
+Steps to reproduce the behavior:
+
+1. Go to '...'
+2. Click on '...'
+3. Scroll down to '...'
+4. ...
+5. Dogs and cats living together!
+
+## Expected behavior
+A clear and concise description of what you expected to happen.
+
+## Screenshots
+If applicable, add screenshots to help explain your problem.
+
+## Environment
+Please complete the following information:
+
+ - Device: [e.g. Desktop, Laptop, iPhone6, etc.]
+ - OS: [e.g. iOS]
+ - Browser: [e.g. chrome, safari]
+ - Version: [e.g. 22]
+
+## Additional Context
+Add any other context about the problem here.
diff --git a/docs/_templates/partials/global_nav.njk b/docs/_templates/partials/global_nav.njk
index 8be8b4e96..1315b657c 100644
--- a/docs/_templates/partials/global_nav.njk
+++ b/docs/_templates/partials/global_nav.njk
@@ -1,5 +1,16 @@
-<nav class="global-nav">
-  <a class="brand-logo" href="">
-    <img src="images/helix-logo.svg" alt="Logo" />
-  </a>
-</nav>
+<div id="app-header">
+  <nav>
+    <a class="brand-logo" href="">
+      <img src="images/helix-logo.svg" alt="Logo" />
+    </a>
+  </nav>
+  <div>
+    <a
+      class="hxBtn beta-hxDark"
+      target="_blank"
+      href="https://github.com/rackerlabs/helix-ui/issues/new?template=bug-report.md&labels=Bug:+Unconfirmed"
+    >
+      Report Bug
+    </a>
+  </div>
+</div>
diff --git a/docs/docs.less b/docs/docs.less
index a86279ee0..c6f08bbdb 100644
--- a/docs/docs.less
+++ b/docs/docs.less
@@ -13,6 +13,26 @@
   background-image: linear-gradient(0deg, @cyan-100, @gray-0 20%);
 }
 
+#app-header {
+  display: flex;
+  padding-right: 1rem;
+
+  > * {
+    display: flex;
+    align-items: center;
+    align-content: center;
+    flex-grow: 1;
+
+    &:first-child { // brand logo
+      flex: 0 0 @app-nav-width;
+    }
+
+    &:last-child {
+      justify-content: flex-end;
+    }
+  }
+}
+
 .brand-logo {
   align-items: center;
   display: flex;
@@ -20,6 +40,16 @@
   justify-content: center;
   width: @app-nav-width;
 
+  &:focus {
+    box-shadow: none;
+    outline: none;
+
+    img {
+      outline: 1px dotted @cyan-100;
+      outline-offset: 0.25rem;
+    }
+  }
+
   img {
     height: 2rem;
   }
diff --git a/src/helix-ui/styles/components/buttons.less b/src/helix-ui/styles/components/buttons.less
index b7d65e0e9..4d0eba71f 100644
--- a/src/helix-ui/styles/components/buttons.less
+++ b/src/helix-ui/styles/components/buttons.less
@@ -161,6 +161,26 @@ a[href].hxBtn {
   }
 }//.hxBtnGroup
 
+
+// DARK BUTTONS (BETA)
+.hxBtn.beta-hxDark,
+a[href].hxBtn.beta-hxDark {
+  border-color: @cyan-500;
+  color: @cyan-500;
+
+  &:hover {
+    &:extend(.hxBtn:hover);
+    color: @gray-0;
+  }
+  &:active {
+    &:extend(.hxBtn:active);
+  }
+  &:focus {
+    &:extend(.hxBtn:focus);
+    box-shadow: 0 0 4px 2px fade(@cyan-500, 60%);
+  }
+}
+
 // ========== TODO ==========
 // encapsulate these styles in an <hx-button> element
 .hxBtn {