diff --git a/static/css/quiz.css b/static/css/quiz.css
new file mode 100644
index 0000000..e179c0b
--- /dev/null
+++ b/static/css/quiz.css
@@ -0,0 +1,95 @@
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap");
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+html,
+body {
+  overflow: hidden;
+  position: relative;
+  height: 100%;
+  font-family: "Montserrat", sans-serif;
+}
+
+body {
+  font-family: "Comfortaa", cursive;
+  color: #fff;
+  user-select: none;
+  margin: 0;
+  padding: 0;
+  counter-reset: points;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+section {
+  padding-top: 80px;
+  overflow-y: hidden;
+}
+
+main {
+  background: #d8d8dc;
+  border-radius: 10px;
+  padding: 5px 20px 50px;
+  width: 95%;
+  max-width: 500px;
+  margin: 0 auto 214px;
+}
+
+.text-container {
+  text-align: center;
+}
+
+.quiz-options {
+  margin: 60px 0;
+}
+
+[type="radio"] {
+  border: 0;
+  height: 0.0625rem;
+  width: 0.0625rem;
+  position: absolute;
+}
+
+label {
+  display: flex;
+  align-items: center;
+  border-radius: 5px;
+  margin-bottom: 15px;
+  padding: 6px 0;
+  position: relative;
+  width: 100%;
+  color: #000;
+}
+
+label:hover .alphabet {
+  background: #000;
+  color: #fff;
+}
+
+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;
+}
diff --git a/static/css/style.css b/static/css/style.css
index 70bb15a..2e9ee4e 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,3 +1,4 @@
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap");
 html,
 body {
   display: flex;
@@ -5,6 +6,7 @@ body {
   width: 100%;
   align-items: center;
   justify-content: center;
+  font-family: "Montserrat", sans-serif;
 }
 .card {
   border-radius: 10px;
diff --git a/templates/index.html b/templates/index.html
index 7a77e46..8f20f5b 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -23,7 +23,7 @@
     >
       <div class="navbar-brand">
         <a class="navbar-item has-text-centered" href="#"
-          ><strong>MLH Quizzet</strong></a
+          ><strong class="is-size-3 has-text-centered">MLH Quizzet</strong></a
         >
         <div class="navbar-burger" data-target="navMenu">
           <span></span>
diff --git a/templates/quiz.html b/templates/quiz.html
index d1bf183..c3dd774 100644
--- a/templates/quiz.html
+++ b/templates/quiz.html
@@ -1,20 +1,85 @@
 <!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">
-    <title>Your quiz will appear here</title>
-</head>
-
-<body>
+  <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">Question 1</strong></a
+        >
+        <div class="navbar-burger" data-target="navMenu">
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+      </div>
+    </nav>
     <a href="{{ url_for('index') }}"> Home </a>
     {% if uploaded == true %}
-    <h1>Your file was uploaded successfully</h1>
-    <h1>Your quiz will appear here</h1>
+    <section class="section-1" id="section-1">
+      <main>
+        <div class="text-container">
+          <h3 class="has-text-weight-bold has-text-black is-size-3">
+            MLH Quizzet
+          </h3>
+          <p class="has-text-weight-bold has-text-black is-size-4">
+            What does CSS stand for?
+          </p>
+        </div>
+        <form>
+          <div class="quiz-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">A</span> Cascading Style Sheets
+            </label>
+            <input
+              type="radio"
+              class="input-radio one-b"
+              id="one-b"
+              name="yes-1"
+            />
+            <label class="radio-label" for="one-b">
+              <span class="alphabet">B</span> Creative Screen Styling
+            </label>
+            <input
+              type="radio"
+              class="input-radio one-c"
+              id="one-c"
+              name="yes-1"
+            />
+            <label class="radio-label" for="one-c">
+              <span class="alphabet">C</span> Cascading Style Screen
+            </label>
+          </div>
+        </form>
+      </main>
+    </section>
     {% else %}
     <h1>Could not upload file</h1>
     {% endif %}
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
