diff --git a/ui/app/styles/components/two-step-button.scss b/ui/app/styles/components/two-step-button.scss
index 18ed9fb01..b46b1a439 100644
--- a/ui/app/styles/components/two-step-button.scss
+++ b/ui/app/styles/components/two-step-button.scss
@@ -1,12 +1,16 @@
 .two-step-button {
-  display: inline;
+  display: inline-block;
+  vertical-align: middle;
   position: relative;
+  font-size: $body-size;
+  line-height: 1;
 
   .confirmation-text {
     position: absolute;
     left: 0;
-    top: -1.2em;
+    top: -1.5em;
     font-size: $body-size;
+    line-height: 1;
     font-weight: $weight-normal;
     color: darken($grey-blue, 20%);
     white-space: nowrap;
diff --git a/ui/app/templates/components/freestyle/sg-two-step-button.hbs b/ui/app/templates/components/freestyle/sg-two-step-button.hbs
new file mode 100644
index 000000000..f39096b0e
--- /dev/null
+++ b/ui/app/templates/components/freestyle/sg-two-step-button.hbs
@@ -0,0 +1,22 @@
+{{#freestyle-usage "two-step-button" title="Two Step Button"}}
+<div class="mock-spacing">
+  {{two-step-button
+    idleText="Scary Action"
+    cancelText="Nvm"
+    confirmText="Yep"
+    confirmationMessage="Wait, really? Like...seriously?"}}
+</div>
+{{/freestyle-usage}}
+
+{{#freestyle-usage "two-step-button-title" title="Two Step Button in Title"}}
+<div class="mock-spacing">
+  <h1 class="title">
+  This is a page title
+  {{two-step-button
+    idleText="Scary Action"
+    cancelText="Nvm"
+    confirmText="Yep"
+    confirmationMessage="Wait, really? Like...seriously?"}}
+  </h1>
+</div>
+{{/freestyle-usage}}
diff --git a/ui/app/templates/components/two-step-button.hbs b/ui/app/templates/components/two-step-button.hbs
index a7762124b..e9fe906b5 100644
--- a/ui/app/templates/components/two-step-button.hbs
+++ b/ui/app/templates/components/two-step-button.hbs
@@ -1,16 +1,16 @@
 {{#if isIdle}}
-  <button data-test-idle-button type="button" class="button is-danger is-outlined is-important is-small is-inline" onclick={{action "promptForConfirmation"}}>
+  <button data-test-idle-button type="button" class="button is-danger is-outlined is-important is-small" onclick={{action "promptForConfirmation"}}>
     {{idleText}}
   </button>
 {{else if isPendingConfirmation}}
   <span data-test-confirmation-message class="confirmation-text">{{confirmationMessage}}</span>
-  <button data-test-cancel-button type="button" class="button is-dark is-outlined is-small is-inline" onclick={{action (queue
+  <button data-test-cancel-button type="button" class="button is-dark is-outlined is-small" onclick={{action (queue
     (action "setToIdle")
     (action onCancel)
   )}}>
     {{cancelText}}
   </button>
-  <button data-test-confirm-button class="button is-danger is-small is-inline" onclick={{action (queue
+  <button data-test-confirm-button class="button is-danger is-small" onclick={{action (queue
     (action "setToIdle")
     (action onConfirm)
   )}}>
diff --git a/ui/app/templates/freestyle.hbs b/ui/app/templates/freestyle.hbs
index e1527aea7..e33756a90 100644
--- a/ui/app/templates/freestyle.hbs
+++ b/ui/app/templates/freestyle.hbs
@@ -95,6 +95,7 @@
       {{/section.subsection}}
 
       {{#section.subsection name="Two-step Button"}}
+        {{freestyle/sg-two-step-button}}
       {{/section.subsection}}
     {{/freestyle-section}}