diff --git a/hoco/templates/base.html b/hoco/templates/base.html
index 11a3a93..0e77f45 100644
--- a/hoco/templates/base.html
+++ b/hoco/templates/base.html
@@ -10,14 +10,19 @@
 
         <link rel="shortcut icon" href="{% static 'img/favicon.ico' %}" type="image/x-icon">
         <link rel="stylesheet" href="{% static 'style.css' %}">
+        
+        <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
 
+        
         {% block head %}{% endblock %}
     </head>
-    <body>
+    <body class="w-full" style="font-family: 'Open Sans';">
         {% block root %}
-            <div class="" id="root" style="background: #FFFFFF;margin:10px;margin-left:20px;">
+            <div class="md:w-3/4 w-full mx-auto px-4 py-8" id="root">
                 {% block body %}{% endblock %}
             </div>
         {% endblock %}
     </body>
-</html>
\ No newline at end of file
+</html>
+
diff --git a/hoco/templates/index.html b/hoco/templates/index.html
index e9c19b7..4ee9917 100644
--- a/hoco/templates/index.html
+++ b/hoco/templates/index.html
@@ -2,34 +2,43 @@
 {% block body %}
     <style>
         .category {
+            display: inline-block;
             border: 1px solid #44cc44;
-            padding: 0px 3px;
+            padding: 3px 6px;
+            margin: 0px 5px 10px 0px;
             color: #44cc44;
             font-size: 100%;
             text-decoration: none;
+            transition: 0.3s all ease;
         }
-
         .category:hover {
             color: white;
             background-color: #44cc44;
             text-decoration: none;
         }
+        
         .box {
-            border: 5px solid #2378e8;
+            border: 1px solid #2378e8;
             border-radius: 20px;
-            background-color: #c7dffc;
-            padding: 10px;
-            margin:10px;
+            background-color: #eaf2fc;
+            padding: 0px;
             display: inline-block;
+            margin-bottom: 30px;
         }
         .box:target {
-            background-color: #f0650e;
-            border-color: #f5b790;
+            background-color: #c7dffc;
         }
+        .box-title {
+            margin-bottom: 10px;
+        }
+        .box-title a {
+            color: #44cc44;
+        }
+    
     </style>
-    <h1>Homecoming 2019 Voting</h1>
-    <h4>Thank you for voting! Without your help homecoming wouldn't be possible. Choose a category:</h4>
-    <h3>
+    <h1 class="text-4xl font-bold">Homecoming 2019 Voting</h1>
+    <h4 class="text-xl mb-2">Thank you for voting! Without your help homecoming wouldn't be possible. Choose a category:</h4>
+    <h3 class="mb-4">
         <a href="#banner" class="category">Banner</a>
         <a href="#canned" class="category">Canned Food Sculpture</a>
         <a href="#song" class="category">Class Song</a>
@@ -38,44 +47,47 @@
         <a href="#shirt" class="category">T-Shirt Design</a>
         <a href="#video" class="category">Spirit Video</a>
     </h3>
-    <div id="banner" class="box">
-        <h2>Banner <a href="">(back)</a></h2>
-        <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfpkYXfxjfUpz454rrQpRJn3n7Y2U7VB_HhUPStJuvh8oNMrA/viewform?embedded=true" width="640" height="801" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
-    </div>
-    <div id="canned" class="box">
-        <h2>Canned Food Sculpture <a href="">(back)</a></h2>
-        <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfybHzaZFgOfUL5JUmTCi_pY0r3Zcw1JMIg6PJ3lUXvuLVbdw/viewform?embedded=true" width="640" height="801" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
-    </div>
-    <div id="song" class="box">
-        <h2>Class Song <a href="">(back)</a></h2>
-        <ul>
-            <li><a href="https://soundcloud.com/robert-crotts-173234691/2020-class-song" target="_blank">Class of 2020</a></li>
-            <li><a href="https://soundcloud.com/user-659478903/juicy-juniors-prod-by-nape" target="_blank">Class of 2021</a></li>
-            <li><a href="https://soundcloud.com/lildahroo/22thefuture" target="_blank">Class of 2022</a></li>
-            <li><a href="https://soundcloud.com/notjohanna/funky-freshmen-prod-atomic-blonde-feat-atomic-blonde-frat-boy-chad-and-dj-dawg" target="_blank">Class of 2023</a></li>
-        </ul>
-        <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSeMVJodGYwrogK0kizAk42gmVCpCnawygHUOIX24qCY0LRTOg/viewform?embedded=true" width="640" height="801" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
-    </div>
-    <div id="float" class="box">
-        <h2>Float <a href="">(back)</a></h2>
-        <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfO-nTl16o6XDfdS8bN_xTIUcTomcN6tom5_0P9seZ8zVypGA/viewform?embedded=true" width="640" height="801" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
-    </div>
-    <div id="mex" class="box">
-        <h2>MEX <a href="">(back)</a></h2>
-        <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSet8Pthsy1f9XSnRf_VOE1kp8fYFaATVseR54anq6i6AR0nsw/viewform?embedded=true" width="640" height="801" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
-    </div>
-    <div id="shirt" class="box">
-        <h2>T-Shirt Design <a href="">(back)</a></h2>
-        <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSenfNOPjojuTiSxmdHJF5DxtiT3o6HKkLljCSgDZbHDg6egkw/viewform?embedded=true" width="640" height="801" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
-    </div>
-    <div id="video" class="box">
-        <h2>Spirit Video <a href="">(back)</a></h2>
-        <ul>
-            <li><a href="https://www.youtube.com/watch?v=0W239EdfliQ" target="_blank">Class of 2020</a></li>
-            <li><a href="https://www.youtube.com/watch?v=xlJXoDRxkmI" target="_blank">Class of 2021</a></li>
-            <li><a href="https://www.youtube.com/watch?v=DrVMapM1KRw" target="_blank">Class of 2022</a></li>
-            <li><a href="https://www.youtube.com/watch?v=9dcUTN3Yka4" target="_blank">Class of 2023</a></li>
-        </ul>
-        <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdpZ147bp--T0UPhVavOgV884wO5P17_q4yIu7nCEr_OMWsOw/viewform?embedded=true" width="640" height="804" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
-    </div>
-{% endblock %}
\ No newline at end of file
+    <section class="flex flex-wrap">
+        <div id="banner" class="box lg:w-5/12 w-full mx-4">
+            <h2 class="box-title text-xl my-4 ml-6">Banner <a href="">(back)</a></h2>
+            <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfpkYXfxjfUpz454rrQpRJn3n7Y2U7VB_HhUPStJuvh8oNMrA/viewform?embedded=true" width="100%" height="801" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
+        </div>
+        <div id="canned" class="box lg:w-5/12 w-full mx-4">
+            <h2 class="box-title text-xl my-4 ml-6">Canned Food Sculpture <a href="">(back)</a></h2>
+            <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfybHzaZFgOfUL5JUmTCi_pY0r3Zcw1JMIg6PJ3lUXvuLVbdw/viewform?embedded=true" width="100%" height="801" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
+        </div>
+        <div id="song" class="box lg:w-5/12 w-full mx-4">
+            <h2 class="box-title text-xl my-4 ml-6">Class Song <a href="">(back)</a></h2>
+            <ul class="my-4 ml-6 text-lg text-red-800">
+                <li><a href="https://soundcloud.com/robert-crotts-173234691/2020-class-song" target="_blank">Class of 2020</a></li>
+                <li><a href="https://soundcloud.com/user-659478903/juicy-juniors-prod-by-nape" target="_blank">Class of 2021</a></li>
+                <li><a href="https://soundcloud.com/lildahroo/22thefuture" target="_blank">Class of 2022</a></li>
+                <li><a href="https://soundcloud.com/notjohanna/funky-freshmen-prod-atomic-blonde-feat-atomic-blonde-frat-boy-chad-and-dj-dawg" target="_blank">Class of 2023</a></li>
+            </ul>
+            <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSeMVJodGYwrogK0kizAk42gmVCpCnawygHUOIX24qCY0LRTOg/viewform?embedded=true" width="100%" height="801" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
+        </div>
+        <div id="float" class="box lg:w-5/12 w-full mx-4">
+            <h2 class="box-title text-xl my-4 ml-6">Float <a href="">(back)</a></h2>
+            <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfO-nTl16o6XDfdS8bN_xTIUcTomcN6tom5_0P9seZ8zVypGA/viewform?embedded=true" width="100%" height="801" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
+        </div>
+        <div id="mex" class="box lg:w-5/12 w-full mx-4">
+            <h2 class="box-title text-xl my-4 ml-6">MEX <a href="">(back)</a></h2>
+            <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSet8Pthsy1f9XSnRf_VOE1kp8fYFaATVseR54anq6i6AR0nsw/viewform?embedded=true" width="100%" height="801" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
+        </div>
+        <div id="shirt" class="box lg:w-5/12 w-full mx-4">
+            <h2 class="box-title text-xl my-4 ml-6">T-Shirt Design <a href="">(back)</a></h2>
+            <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSenfNOPjojuTiSxmdHJF5DxtiT3o6HKkLljCSgDZbHDg6egkw/viewform?embedded=true" width="100%" height="801" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
+        </div>
+        <div id="video" class="box lg:w-5/12 w-full mx-4">
+            <h2 class="box-title text-xl my-4 ml-6">Spirit Video <a href="">(back)</a></h2>
+            <ul class="my-4 ml-6 text-lg text-red-800">
+                <li><a href="https://www.youtube.com/watch?v=0W239EdfliQ" target="_blank">Class of 2020</a></li>
+                <li><a href="https://www.youtube.com/watch?v=xlJXoDRxkmI" target="_blank">Class of 2021</a></li>
+                <li><a href="https://www.youtube.com/watch?v=DrVMapM1KRw" target="_blank">Class of 2022</a></li>
+                <li><a href="https://www.youtube.com/watch?v=9dcUTN3Yka4" target="_blank">Class of 2023</a></li>
+            </ul>
+            <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdpZ147bp--T0UPhVavOgV884wO5P17_q4yIu7nCEr_OMWsOw/viewform?embedded=true" width="100%" height="804" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
+        </div>
+    </section>
+{% endblock %}
+
