diff --git a/options.html b/options.html
index a0140090f..0576083f2 100644
--- a/options.html
+++ b/options.html
@@ -10,66 +10,86 @@
   <div id='install' class='main'>
     <script type='text/x-tmpl-mustache' id='install_flow_template'>
       <div id='step1' class='step'>
-        <img id='signal-icon' src='/images/icon_250.png'/>
-        <div class='nav'>
-          <h1>{{ installWelcome }}</h1>
-          <p>{{ installTagline }}</p>
-          <div> <a class='button step2'>{{ installGetStartedButton }}</a> </div>
-          <span class='dot step1 selected'></span>
-          <span class='dot step2'></span>
-          <span class='dot step3'></span>
+        <div class='inner'>
+          <div class='step-body'>
+            <img id='signal-icon' src='/images/icon_250.png'/>
+          </div>
+          <div class='nav'>
+            <h1>{{ installWelcome }}</h1>
+            <p>{{ installTagline }}</p>
+            <div> <a class='button step2'>{{ installGetStartedButton }}</a> </div>
+            <span class='dot step1 selected'></span>
+            <span class='dot step2'></span>
+            <span class='dot step3'></span>
+          </div>
         </div>
       </div>
 
       <div id='step2' class='step'>
-        <img id='signal-phone' src='/images/signal-phone.png'>
-        <div class='nav'>
-          <p>{{{ installSignalLink }}}</p>
-          <div> <a class='button step3'>{{ installIHaveSignalButton }}</a> </div>
-          <span class='dot step1'></span>
-          <span class='dot step2 selected'></span>
-          <span class='dot step3'></span>
+        <div class='inner'>
+          <div class='step-body'>
+            <img id='signal-phone' src='/images/signal-phone.png'>
+            <p>{{{ installSignalLink }}}</p>
+          </div>
+          <div class='nav'>
+            <div> <a class='button step3'>{{ installIHaveSignalButton }}</a> </div>
+            <span class='dot step1'></span>
+            <span class='dot step2 selected'></span>
+            <span class='dot step3'></span>
+          </div>
         </div>
       </div>
 
       <div id='step3' class='step'>
-        <div id="qr"></div>
-        <p>{{ installAndroidInstructions }}</p>
-        <div class='nav'>
-          <span class='dot step1'></span>
-          <span class='dot step2'></span>
-          <span class='dot step3 selected'></span>
+        <div class='inner'>
+          <div class='step-body'>
+            <div id="qr"></div>
+            <p>{{ installAndroidInstructions }}</p>
+          </div>
+          <div class='nav'>
+            <span class='dot step1'></span>
+            <span class='dot step2'></span>
+            <span class='dot step3 selected'></span>
+          </div>
         </div>
       </div>
 
       <form id='step4' class='step'>
-          <p>{{ installLinkingWithNumber }}</p>
-          <h2 class='number'></h2>
-          <img id='signal-computer' src='/images/signal-laptop.png'>
-          <p>{{ installComputerName }}</p>
-          <div>
-            <input type='text' id='device-name' spellcheck='false' maxlength='50' />
+        <div class='inner'>
+          <div class='step-body'>
+            <p>{{ installLinkingWithNumber }}</p>
+            <h2 class='number'></h2>
+            <img id='signal-computer' src='/images/signal-laptop.png'>
+            <p>{{ installComputerName }}</p>
+            <div>
+              <input type='text' id='device-name' spellcheck='false' maxlength='50' />
+            </div>
           </div>
           <div class='nav'>
             <div>
               <input type='submit' class='button' id='sync' value='{{ installFinalButton }}' />
             </div>
           </div>
+        </div>
       </form>
 
       <div id='step5' class='step'>
-        <img id='signal-icon' src='/images/icon_250.png'/>
-        <div class='progress-dialog'>
-          <p class='status'></p>
-          <div class='bar-container'><div class='bar progress-bar'></div></div>
-        </div>
-        <div class='nav'>
+        <div class='inner'>
+          <div class='step-body'>
+            <img id='signal-icon' src='/images/icon_250.png'/>
+            <div class='progress-dialog'>
+              <p class='status'></p>
+              <div class='bar-container'><div class='bar progress-bar'></div></div>
+            </div>
+          </div>
+          <div class='nav'>
+          </div>
         </div>
       </div>
 
       <div id='stepTooManyDevices' class='step'>
-        <div class='error-dialog clearfix'>
-          <div class='panel'>{{ installTooManyDevices }}</div>
+        <div class='inner error-dialog clearfix'>
+          <div class='panel step-body'>{{ installTooManyDevices }}</div>
           <div class='nav'>
             <button class='ok step3'>{{ ok }}</button>
           </div>
diff --git a/stylesheets/options.css b/stylesheets/options.css
index 4975e0547..dbcc45ecc 100644
--- a/stylesheets/options.css
+++ b/stylesheets/options.css
@@ -869,13 +869,29 @@ input, button, select, textarea {
   line-height: inherit; }
 
 #install {
-  display: none; }
+  display: none;
+  height: 100%; }
+  @media screen and (max-height: 665px) {
+    #install {
+      height: 666px; } }
 
 .main {
-  padding: 70px 0 10em; }
+  padding: 70px 0 50px; }
 
 .step {
-  display: none; }
+  display: none;
+  height: 100%; }
+
+.inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  height: 100%; }
+  .inner .step-body {
+    margin-top: auto;
+    width: 100%;
+    max-width: 600px; }
 
 #signal-computer,
 #signal-phone {
@@ -907,9 +923,8 @@ a {
 
 .nav {
   width: 100%;
-  position: fixed;
   bottom: 50px;
-  margin-top: 2em;
+  margin-top: auto;
   padding: 0 20px; }
   .nav .button {
     margin-bottom: 3em; }
@@ -943,9 +958,6 @@ h1 {
   font-weight: normal;
   padding-bottom: 10px; }
 
-#signal-icon {
-  margin-top: 20px; }
-
 h3.step {
   margin-top: 0;
   font-weight: bold; }
@@ -1077,6 +1089,7 @@ ul.country-list {
 .progress-dialog {
   text-align: center;
   padding: 1em;
+  width: 100%;
   max-width: 600px;
   margin: auto; }
   .progress-dialog .status {
diff --git a/stylesheets/options.scss b/stylesheets/options.scss
index 0f78e049f..fcc56ba2b 100644
--- a/stylesheets/options.scss
+++ b/stylesheets/options.scss
@@ -41,12 +41,32 @@ input, button, select, textarea {
 
 #install {
   display: none;
+  height: 100%;
+
+  // 666px is the minimum window height in chromium.js
+  @media screen and (max-height: 665px) {
+    height: 666px;
+  }
 }
 .main {
-  padding: 70px 0 10em;
+  padding: 70px 0 50px;
 }
 .step {
   display: none;
+  height: 100%;
+}
+.inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  height: 100%;
+
+  .step-body {
+    margin-top: auto;
+    width: 100%;
+    max-width: 600px;
+  }
 }
 
 #signal-computer,
@@ -84,9 +104,8 @@ a {
 
 .nav {
   width: 100%;
-  position: fixed;
   bottom: 50px;
-  margin-top: 2em;
+  margin-top: auto;
   padding: 0 20px;
 
   .button {
@@ -133,10 +152,6 @@ h1 {
   padding-bottom: 10px;
 }
 
-#signal-icon {
-  margin-top: 20px;
-}
-
 h3.step {
   margin-top: 0;
   font-weight: bold;
@@ -287,6 +302,7 @@ ul.country-list {
 .progress-dialog {
   text-align: center;
   padding: 1em;
+  width: 100%;
   max-width: 600px;
   margin: auto;