diff --git a/static/css/quiz.css b/static/css/quiz.css
index e179c0b..b544fc6 100644
--- a/static/css/quiz.css
+++ b/static/css/quiz.css
@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap");
 html {
   box-sizing: border-box;
 }
@@ -14,12 +13,10 @@ body {
   overflow: hidden;
   position: relative;
   height: 100%;
-  font-family: "Montserrat", sans-serif;
 }
 
 body {
-  font-family: "Comfortaa", cursive;
-  color: #fff;
+  background-color: #000000;
   user-select: none;
   margin: 0;
   padding: 0;
@@ -37,9 +34,13 @@ section {
 }
 
 main {
-  background: #d8d8dc;
+  -webkit-box-shadow: 0 10px 6px -6px #777;
+  -moz-box-shadow: 0 10px 6px -6px #777;
+  box-shadow: 0 10px 6px -6px #777;
+  color: #000000;
+  background: #ffffff;
   border-radius: 10px;
-  padding: 5px 20px 50px;
+  padding: 50px 20px 50px;
   width: 95%;
   max-width: 500px;
   margin: 0 auto 214px;
@@ -49,47 +50,39 @@ main {
   text-align: center;
 }
 
-.quiz-options {
-  margin: 60px 0;
+input[type="radio"] {
+  display: none;
 }
-
-[type="radio"] {
-  border: 0;
-  height: 0.0625rem;
-  width: 0.0625rem;
-  position: absolute;
+input[type="radio"] + label {
+  display: inline-block;
+  width: 95%;
+  padding: 10px;
+  border: 1px solid #ddd;
+  margin-bottom: 10px;
+  cursor: pointer;
 }
-
-label {
-  display: flex;
-  align-items: center;
-  border-radius: 5px;
-  margin-bottom: 15px;
-  padding: 6px 0;
-  position: relative;
-  width: 100%;
-  color: #000;
+input[type="radio"] + label:hover {
+  border: 1px solid #000000;
 }
-
-label:hover .alphabet {
-  background: #000;
+input[type="radio"]:checked + label {
+  background-image: none;
+  background-color: #0c0;
   color: #fff;
+  border: 1px solid #0c0 !important;
+  -webkit-transition: all 0.2s ease-in-out;
+  -moz-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  -ms-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
 }
 
-label .alphabet {
-  border-radius: 5px;
-  border: solid 1px #000;
-  padding: 0.4rem 0.5rem 0.4rem;
-  width: 2.3rem;
-  margin: 0 1.3rem 0 0.7rem;
-  display: flex;
-  justify-content: center;
-  color: #000;
-}
-
-label .icon {
-  height: auto;
-  position: absolute;
-  left: 92%;
-  top: 12px;
+.worngans {
+  background-color: #f36;
+  color: #fff;
+  border: 1px solid #f36 !important;
+  -webkit-transition: all 0.2s ease-in-out;
+  -moz-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  -ms-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
 }
diff --git a/static/css/style.css b/static/css/style.css
index 2e9ee4e..70bb15a 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap");
 html,
 body {
   display: flex;
@@ -6,7 +5,6 @@ body {
   width: 100%;
   align-items: center;
   justify-content: center;
-  font-family: "Montserrat", sans-serif;
 }
 .card {
   border-radius: 10px;
diff --git a/templates/quiz.html b/templates/quiz.html
index 97c92cc..d63b092 100644
--- a/templates/quiz.html
+++ b/templates/quiz.html
@@ -1,54 +1,64 @@
 <!DOCTYPE html>
 <html lang="en">
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css" />
-  <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/quiz.css') }}" />
-  <title>MLH Quizzet</title>
-</head>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css" />
+        <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/quiz.css') }}" />
+        <title>MLH Quizzet</title>
+                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type='text/javascript'></script>
+                <script type="text/javascript">
+                    $(document).ready(function () {
+                        $('label').click(function () {
+                            $('label').removeClass('worngans');
+                            $(this).addClass('worngans');
+                        });
+                    });
+                </script>
+    </head>
 
-<body>
-  <nav class="navbar is-dark is-fixed-top has-text-centered" role="navigation" aria-label="main navigation">
-    <div class="navbar-brand">
-      <a class="navbar-item has-text-centered" href="#"><strong class="is-size-3 has-text-centered">MLH
-          Quizzet</strong></a>
-      <div class="navbar-burger" data-target="navMenu">
-        <span></span>
-        <span></span>
-        <span></span>
-      </div>
+    <body>
+        <nav class="navbar is-dark is-fixed-top has-text-centered" role="navigation" aria-label="main navigation">
+            <div class="navbar-brand">
+                <a class="navbar-item has-text-centered" href="#"><strong class="is-size-3 has-text-centered">MLH
+                        Quizzet</strong></a>
+                <div class="navbar-burger" data-target="navMenu">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </div>
+            </div>
+        </nav>
+        {% if uploaded == true %}
+        {% for i in range(size) %}
+        <section class="section-1" id="section-1">
+            <main>
+<div class="scp-quizzes-main">
+    <div class="scp-quizzes-data">
+        <h3>{{ i+1 }}. {{ questions[i+1]['question'] }}</h3>
+        <br />
+        <form>
+        {% for j in questions[i+1]['options'] %}
+        {% if questions[i+1]['options'][j+1]  == questions[i+1]['answer'] %}
+        <input type="radio" id="{{ questions[i+1]['answer'] }}" name="question{{ i+1 }}">
+        <label for="{{ questions[i+1]['answer'] }}">{{ j }}. {{ questions[i+1]['options'][j+1] }}</label><br />
+        {% else %}
+        <input type="radio" name="question{{ i+1 }}">
+        <label>{{ j }}. {{ questions[i+1]['options'][j+1] }}</label><br />
+        {% endif %}
+        {% endfor %}
     </div>
-  </nav>
-  <a href="{{ url_for('index') }}"> Home </a>
-  {% if uploaded == true %}
-
-  {% for i in range(size) %}
-  <section class="section-1" id="section-1">
-    <main>
-      <p class="has-text-weight-bold has-text-black is-size-2">Question {{ i+1 }}</p>
-      <div class="text-container">
-        <p class="has-text-weight-bold has-text-black is-size-4">
-          {{ questions[i+1]['question'] }}
-        </p>
-      </div>
-      <form>
-        <div class="quiz-options">
-          {% for j in questions[i+1]['options'] %}
-          <input type="radio" class="input-radio one-a" id="one-a" name="yes-1" required />
-          <label class="radio-label" for="one-a">
-            <span class="alphabet">{{ j+1 }}</span> {{ questions[i+1]['options'][j+1] }}
-            <br />
-            {% endfor %}
-        </div>
-      </form>
+</div>
+    </form>
     </main>
-  </section>
-  {% endfor %}
-  {% else %}
-  <h1>Could not upload file</h1>
-  {% endif %}
-</body>
+    </section>
+{% endfor %}
+{% else %}
+<h1>Could not upload file</h1>
+{% endif %}
 
-</html>
\ No newline at end of file
+
+    </body>
+
+</html>
