diff --git a/assets/fonts/Diavlo_BLACK_II_37.otf b/assets/fonts/Diavlo_BLACK_II_37.otf
new file mode 100644
index 0000000..eb42a9e
Binary files /dev/null and b/assets/fonts/Diavlo_BLACK_II_37.otf differ
diff --git a/assets/fonts/Diavlo_BOLD_II_37.otf b/assets/fonts/Diavlo_BOLD_II_37.otf
new file mode 100644
index 0000000..31aeb80
Binary files /dev/null and b/assets/fonts/Diavlo_BOLD_II_37.otf differ
diff --git a/assets/fonts/Diavlo_BOOK_II_37.otf b/assets/fonts/Diavlo_BOOK_II_37.otf
new file mode 100644
index 0000000..14f5641
Binary files /dev/null and b/assets/fonts/Diavlo_BOOK_II_37.otf differ
diff --git a/assets/fonts/Diavlo_LIGHT_II_37.otf b/assets/fonts/Diavlo_LIGHT_II_37.otf
new file mode 100644
index 0000000..18528ed
Binary files /dev/null and b/assets/fonts/Diavlo_LIGHT_II_37.otf differ
diff --git a/assets/fonts/Diavlo_MEDIUM_II_37.otf b/assets/fonts/Diavlo_MEDIUM_II_37.otf
new file mode 100644
index 0000000..1cfea27
Binary files /dev/null and b/assets/fonts/Diavlo_MEDIUM_II_37.otf differ
diff --git a/assets/fonts/REVOLUTION.ttf b/assets/fonts/REVOLUTION.ttf
new file mode 100644
index 0000000..2d77382
Binary files /dev/null and b/assets/fonts/REVOLUTION.ttf differ
diff --git a/assets/fonts/manrope-light.otf b/assets/fonts/manrope-light.otf
new file mode 100644
index 0000000..2b31915
Binary files /dev/null and b/assets/fonts/manrope-light.otf differ
diff --git a/create_game.html b/create_game.html
index f29c834..33b98d7 100644
--- a/create_game.html
+++ b/create_game.html
@@ -10,7 +10,7 @@
     <body>
         <div class="app-content">
             <div id="create-game-container">
-                <h2 class="app-header">Create A Game</h2>
+                <h2 class="app-header-secondary">Create A Game</h2>
                 <form>
                     <label>
                         Name
diff --git a/join_game.html b/join_game.html
index 03cd52e..bbd6483 100644
--- a/join_game.html
+++ b/join_game.html
@@ -10,7 +10,7 @@
 <body>
     <div class="app-content">
         <div id="join-game-container">
-            <h2 class="app-header">Join a Game</h2>
+            <h2 class="app-header-secondary">Join a Game</h2>
             <form>
                 <label>
                     Name
diff --git a/static/styles.css b/static/styles.css
index 018efa3..33b2139 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -1,6 +1,12 @@
 @media(max-width: 750px) {
     .app-header {
+        font-size: 50px;
+        margin: 0.3em 0;
+    }
+
+    .app-header-secondary {
         font-size: 35px;
+        margin: 0.3em 0;
     }
 
     .card {
@@ -19,7 +25,13 @@
 
 @media(min-width: 750.01px) {
     .app-header {
+        font-size: 70px;
+        margin: 0.5em 0;
+    }
+
+    .app-header-secondary {
         font-size: 50px;
+        margin: 0.3em 0;
     }
 
     .card {
@@ -36,10 +48,20 @@
     }
 }
 
+@font-face {
+    font-family: 'diavlo';
+    src: url("../assets/fonts/Diavlo_LIGHT_II_37.otf") format("opentype");
+}
+
+@font-face {
+    font-family: 'sitewide-sans-serif';
+    src: url("../assets/fonts/manrope-light.otf") format("opentype");
+}
+
 html, body {
     margin: 0 auto;
     width: 100%;
-    font-family: sans-serif;
+    font-family: 'sitewide-sans-serif', sans-serif;
 }
 
 .app-content {
@@ -55,20 +77,26 @@ html, body {
     text-align: center;
 }
 
-.app-header {
+.app-header, .app-header-secondary {
+    font-family: 'diavlo', sans-serif;
     color: #7d0b0b;
-    letter-spacing: 0.1em;
 }
 
 h3 {
     color: gray;
 }
+
+button {
+    font-family: 'sitewide-sans-serif', sans-serif;
+}
+
 .app-btn {
-    background-color: #7d0b0b;
-    color: white;
-    border: none;
+    background-color: white;
+    color: #bd2a2a;
+    border: 1px solid #7d0b0b;
     width: 10em;
     padding: 1em;
+    border-radius: 3px;
     margin-bottom: 1em;
 }
 
@@ -107,17 +135,18 @@ h3 {
 }
 
 .app-btn-secondary {
-    background-color: transparent;
+    background-color: white;
+    border-radius: 3px;
     color: #7d0b0b;
     border: 1px solid #7d0b0b;
     width: 10em;
-    padding: 1em;
+    padding: 0.5em;
     margin-right: 1em;
 }
 
 .app-btn:hover, .app-btn:focus {
     cursor: pointer;
-    background-color: #bd2a2a;
+    background-color: rgba(24, 9, 82, 0.15);
 }
 
 .app-btn-secondary:hover, .app-btn-secondary:focus {
@@ -126,6 +155,7 @@ h3 {
 }
 
 #main-buttons {
+    margin-top: 4em;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -151,11 +181,17 @@ h3 {
     width: 8em;
     padding: 0.5em;
     margin: 0 1em 0 0;
+    cursor: pointer;
+}
+
+#reset-btn:hover {
+    background-color: rgba(24, 9, 82, 0.15);
 }
 
 #create-game-container, #join-game-container {
     display: inline-block;
     text-align: left;
+    margin-bottom: 3em;
 }
 
 a {
@@ -186,7 +222,7 @@ input[type=number] {
 }
 
 input[type=text]:hover {
-    background-color: lightgray;
+    background-color: rgba(24, 9, 82, 0.15);;
 }
 
 label {
@@ -197,7 +233,8 @@ label {
 }
 
 #message-box {
-    margin: 1em 1em;
+    max-width: 25em;
+    margin: 1em auto;
     border-bottom: 1px solid #7d0b0b;
     padding: 0.5em;
 }
@@ -289,6 +326,7 @@ label {
 .game-card h2 {
     font-size: 2em;
     color: #7d0b0b;
+    font-family: 'diavlo', sans-serif;
 }
 
 .game-card p {
