diff --git a/assets/css/site.css b/assets/css/site.css
index f52ac05..561ffed 100644
--- a/assets/css/site.css
+++ b/assets/css/site.css
@@ -7,20 +7,23 @@ $drop-shadow: rgba(0, 0, 0, 0.4);
 $code-background: #FDF6E3;
 
 body {
-    font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
+    font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
     font-size: 16px;
     padding-top: 1em;
     padding-bottom: 1em;
 }
+button {
+    font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
+}
 code {
     background-color: #F0F0F0;
-    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     font-size: 14px;
     padding: 0.10em 0.25em;
 }
 pre, pre code {
     background-color: transparent;
-    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     font-size: 14px;
     margin: 0 !important;
     border-radius: 0 !important;
@@ -49,13 +52,13 @@ ol {
     padding-left: 1em;
 }
 h1, h2, h3, h4 {
-  margin: 1.414em 0 0.5em;
-  font-weight: inherit;
-  line-height: 1.2;
+    margin: 1.414em 0 0.5em;
+    font-weight: inherit;
+    line-height: 1.2;
 }
 h1 {
-  margin-top: 0;
-  font-size: 2.441em;
+    margin-top: 0;
+    font-size: 2.441em;
 }
 h2 {font-size: 1.953em;}
 h3 {font-size: 1.563em;}
@@ -88,7 +91,8 @@ button:hover .icon svg {
     background-color: $primary-color;
     color: $white;
     padding: 0.5em 1em;
-    border-radius: 1em;
+    border-radius: 2em;
+    display: inline-block;
 }
 .button:hover {
     color: $white;
@@ -203,6 +207,10 @@ button:hover .icon svg {
     width: 150px;
     height: 100px;
 }
+.home-buttons .menu {
+    display: inline-block;
+    padding: 0.5em 1em;
+}
 .menu {
     margin-bottom: 1.5em;
 }
@@ -225,7 +233,7 @@ button:hover .icon svg {
     height: 100%;
     animation-name: animateleft;
     animation-duration: .4s;
-    overflow: scroll;
+    overflow: auto;
     box-shadow: 0 0 10px 0 $drop-shadow;
     box-sizing: border-box;
 }
diff --git a/assets/templates/_menu_button.phtml b/assets/templates/_menu_button.phtml
index 8dff1e5..148d3aa 100644
--- a/assets/templates/_menu_button.phtml
+++ b/assets/templates/_menu_button.phtml
@@ -1,6 +1,6 @@
 <div class="menu">
     <button class="menu-button" title="Open Menu">
         <div class="icon"><?= icon('show-sidebar') ?></div>
-        Menu
+        Table of Contents
     </button>
 </div>
diff --git a/assets/templates/index.phtml b/assets/templates/index.phtml
index abb7cca..000013e 100644
--- a/assets/templates/index.phtml
+++ b/assets/templates/index.phtml
@@ -1,8 +1,6 @@
 <?php partial('header', ['title' => 'PHP Apprentice']) ?>
 
 <div class="container small center">
-    <?php partial('menu_button') ?>
-
     <div>
         <div class="home-title-wrapper">
             <div class="home-logo"><?= icon('elephant') ?></div>
@@ -23,10 +21,13 @@
             Each example in PHP Apprentice can by typed into a PHP file and executed in the terminal.
             Let's get started! 😃
         </p>
-        <a href="<?= page_path('basics') ?>" class="button">
-            <div class="icon"><?= icon('book-reference') ?></div>
-            Open First Chapter
-        </a>
+        <div class="home-buttons">
+            <a href="<?= page_path('basics') ?>" class="button">
+                <div class="icon"><?= icon('book-reference') ?></div>
+                Open First Chapter
+            </a>
+            <?php partial('menu_button') ?>
+        </div>
     </div>
 </div>