diff --git a/static/css/results.css b/static/css/results.css
new file mode 100644
index 0000000..7f46108
--- /dev/null
+++ b/static/css/results.css
@@ -0,0 +1,57 @@
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+html,
+body {
+  position: relative;
+  overflow-x: hidden !important;
+}
+
+body {
+  user-select: none;
+  margin: 0;
+  padding: 0;
+  counter-reset: points;
+  background-color: #77aa77;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 2 1'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%2377aa77'/%3E%3Cstop offset='1' stop-color='%234fd'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23cf8' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23cf8' stop-opacity='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='2' y2='2'%3E%3Cstop offset='0' stop-color='%23cf8' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23cf8' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='2' height='1'/%3E%3Cg fill-opacity='0.5'%3E%3Cpolygon fill='url(%23b)' points='0 1 0 0 2 0'/%3E%3Cpolygon fill='url(%23c)' points='2 1 2 0 0 0'/%3E%3C/g%3E%3C/svg%3E");
+  background-attachment: fixed;
+  background-size: cover;
+  font-family: "helvetica", sans-serif !important;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+section {
+  padding-top: 150px;
+}
+
+main {
+  -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: 30px 40px 30px;
+  width: 95%;
+  max-width: 590px;
+  margin: auto;
+}
+
+.button.is-fullwidth {
+  display: flex;
+  width: 90%;
+  margin: auto;
+  margin-top: 30px;
+}
diff --git a/templates/result.html b/templates/result.html
index 95561fe..e7f6831 100644
--- a/templates/result.html
+++ b/templates/result.html
@@ -2,13 +2,53 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <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/results.css') }}" />
+    <link rel="shortcut icon" href="https://avatars0.githubusercontent.com/u/65834464?s=200&amp;v=4"
+        type="image/x-icon">
+    <link rel="stylesheet"
+        href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" />
+    <script src="https://kit.fontawesome.com/22be60108b.js" crossorigin="anonymous"></script>
+        <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
+    <title>MLH Quizzet</title>
 </head>
 
 <body>
-    <h1> You got {{ correct }}/{{ total }} right !</h1>
+    <style type="text/css">
+        @font-face {
+            font-family: helvetica;
+            src: "{{ url_for('static', filename='fonts/helvetica.ttf')}}"
+        }
+    </style>
+    <nav class="navbar is-dark is-fixed-top has-text-centered" role="navigation" aria-label="main navigation">
+        <div class="navbar-brand">
+            <img src="https://avatars0.githubusercontent.com/u/65834464?s=200&amp;v=4" height="32" width="64"
+                style="margin: 10px">
+            <a class="navbar-item has-text-centered" href="{{ url_for('index') }}"><strong
+                    class="is-size-3 has-text-centered">MLH Quizzet</strong></a>
+            <a class="github-fork-ribbon" href="https://github.com/PragatiVerma18/Fantastic-Falcons-1.0"
+                data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a>
+            <div class="navbar-burger" data-target="navMenu">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+    </nav>
+        <section class="section-1" id="section-1">
+            <main>
+            <lottie-player src="https://assets3.lottiefiles.com/packages/lf20_0ge4xP.json" background="transparent" speed="1"
+                style="width: 240px; height: 240px; margin: auto !important;" loop  autoplay></lottie-player>
+            <h1 class="has-text-centered is-size-3 has-text-weight-bold"> You got {{ correct }}/{{ total }} right!</h1>
+            <a class="button is-dark has-text-centered has-text-weight-bold is-rounded is-fullwidth" href="{{ url_for('index') }}"> Upload another document</a>
+            </main>
+            </section>
+
+
+        <div class="has-text-white has-text-centered" style="margin-top: 40px; background-color: #363636; padding: 10px;">
+            MIT License © Copyright 2020 Fantastic Falcons
+        </div>
 </body>
 
 </html>
\ No newline at end of file
