diff --git a/css/frs.css b/css/frs.css
index f565bd3..5a84ba6 100644
--- a/css/frs.css
+++ b/css/frs.css
@@ -55,3 +55,7 @@
   margin-bottom: 40px;
   z-index: 900;
 }
+
+.mdl-mini-footer--link-list li:hover {
+  color: white;
+}
diff --git a/img/btn_google_signin_dark_disabled_web.png b/img/btn_google_signin_dark_disabled_web.png
new file mode 100644
index 0000000..735d17e
Binary files /dev/null and b/img/btn_google_signin_dark_disabled_web.png differ
diff --git a/img/btn_google_signin_dark_focus_web.png b/img/btn_google_signin_dark_focus_web.png
new file mode 100644
index 0000000..c4cb615
Binary files /dev/null and b/img/btn_google_signin_dark_focus_web.png differ
diff --git a/img/btn_google_signin_dark_normal_web.png b/img/btn_google_signin_dark_normal_web.png
new file mode 100644
index 0000000..b1327b4
Binary files /dev/null and b/img/btn_google_signin_dark_normal_web.png differ
diff --git a/img/btn_google_signin_dark_pressed_web.png b/img/btn_google_signin_dark_pressed_web.png
new file mode 100644
index 0000000..04ed9c9
Binary files /dev/null and b/img/btn_google_signin_dark_pressed_web.png differ
diff --git a/templates/index_html.mustache b/templates/index_html.mustache
index b3818ee..9ae20ee 100644
--- a/templates/index_html.mustache
+++ b/templates/index_html.mustache
@@ -1,20 +1,12 @@
 {{> html_head}}
+{{> mdl_head}}
+{{> mdl_content_head}}
 
-    <div class="frs-layout mdl-layout mdl-layout--fixed-header mdl-js-layout mdl-color--grey-100">
-      <header class="frs-header mdl-layout__header mdl-layout__header--scroll mdl-color--grey-100 mdl-color-text--grey-800">
-        <div class="mdl-layout__header-row">
-          <span class="mdl-layout-title">Fake Reservation System</span>
-        </div>
-      </header>
-      <div class="frs-ribbon"></div>
-      <main class="frs-main mdl-layout__content">
-        <div class="frs-container mdl-grid">
-          <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
-          <div class="frs-content mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
-            <div class="frs-crumbs mdl-color-text--grey-500">
-              Not Google &gt; Not Google Now &gt; Fake Reservation System
-            </div>
-            <h3>What is this?</h3>
+<div class="frs-crumbs mdl-color-text--grey-500">
+  Not Google &gt; Not Google Now &gt; Fake Reservation System
+</div>
+
+<h3>What is this?</h3>
 
 <p>
             Hello, world!
@@ -209,19 +201,6 @@
             Hello, world!
 </p>
 
-          </div>
-        </div>
-        <footer class="frs-footer mdl-mini-footer">
-          <div class="mdl-mini-footer--left-section">
-            <ul class="mdl-mini-footer--link-list">
-              <li><a href="#">Help</a></li>
-              <li><a href="#">Privacy and Terms</a></li>
-              <li><a href="#">User Agreement</a></li>
-            </ul>
-          </div>
-        </footer>
-      </main>
-    </div>
-    <a href="https://github.com/google/material-design-lite/blob/master/templates/article/" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast">View Source</a>
-
+{{> mdl_foot}}
+<a href="https://github.com/google/material-design-lite/blob/master/templates/article/" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast">View Source</a>
 {{> html_foot}}
diff --git a/templates/mdl_content_head.mustache b/templates/mdl_content_head.mustache
new file mode 100644
index 0000000..dcceaab
--- /dev/null
+++ b/templates/mdl_content_head.mustache
@@ -0,0 +1,4 @@
+  <main class="frs-main mdl-layout__content">
+    <div class="frs-container mdl-grid">
+      <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
+      <div class="frs-content mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
diff --git a/templates/mdl_foot.mustache b/templates/mdl_foot.mustache
new file mode 100644
index 0000000..908d801
--- /dev/null
+++ b/templates/mdl_foot.mustache
@@ -0,0 +1,13 @@
+      </div>
+    </div>
+    <footer class="frs-footer mdl-mini-footer">
+      <div class="mdl-mini-footer--left-section">
+        <ul class="mdl-mini-footer--link-list">
+          <li><a href="#">Help</a></li>
+          <li><a href="#">Privacy and Terms</a></li>
+          <li><a href="#">User Agreement</a></li>
+        </ul>
+      </div>
+    </footer>
+  </main>
+</div>
diff --git a/templates/mdl_head.mustache b/templates/mdl_head.mustache
new file mode 100644
index 0000000..ee0befa
--- /dev/null
+++ b/templates/mdl_head.mustache
@@ -0,0 +1,7 @@
+<div class="frs-layout mdl-layout mdl-layout--fixed-header mdl-js-layout mdl-color--grey-100">
+  <header class="frs-header mdl-layout__header mdl-layout__header--scroll mdl-color--grey-100 mdl-color-text--grey-800">
+    <div class="mdl-layout__header-row">
+      <span class="mdl-layout-title">Fake Reservation System</span>
+    </div>
+  </header>
+  <div class="frs-ribbon"></div>