diff --git a/src/static/css/main.css b/src/static/css/main.css
index 0ace9d05eaa0b304529a8e2cfdd474e6aa4514fe..98b9fedaecc9a241e0df8fb5e9798bcb65918ee2 100644
--- a/src/static/css/main.css
+++ b/src/static/css/main.css
@@ -52,3 +52,26 @@ body {
     margin: auto;
     text-align: center;
 }
+
+.spacer {
+    margin-bottom: 5vmin;
+}
+
+.page-item {
+    display: block;
+    background-color: #616161;
+    text-align: center;
+    border-radius: 1vh;
+    margin: 2vmin;
+    padding: 2vmin;
+
+    text-decoration: none;
+    color: white;
+    font-size: 1.5rem;
+}
+
+@media (max-width: 600px) {
+    .content {
+        width: 90%;
+    }
+}
\ No newline at end of file
diff --git a/src/templates/index.html b/src/templates/index.html
index 69a48e6a49c68caeddce8515062759b0b8b6077e..26d46ebacf02ab091c8b9a512f642a294f64fb16 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -10,11 +10,10 @@
         <div class="main">
             <div class="content">
                 <h2>Available Pages</h2>
-                <ul>
-                    {% for name in pageNames %}
-                        <li><a href="{{ url_for("routes.show_page", pageName=name) }}">{{ name }}</a></li>
-                    {% endfor %}
-                </ul>
+                <div class="spacer"></div>
+                {% for name in pageNames %}
+                    <a class="page-item" href="{{ url_for("routes.show_page", pageName=name) }}">{{ name }}</a>
+                {% endfor %}
             </div>
         </div>
     </body>