diff --git a/.github/workflows/code-quality-checks.yml b/.github/workflows/code-quality-checks.yml
index af8680a..120dad7 100644
--- a/.github/workflows/code-quality-checks.yml
+++ b/.github/workflows/code-quality-checks.yml
@@ -25,7 +25,7 @@ jobs:
         npm install -g yarn
         yarn install
     - name: Install MySQL Client
-      run: sudo apt install default-libmysqlclient-dev
+      run: sudo apt update && sudo apt install default-libmysqlclient-dev
     - name: Install Python dependencies
       run: |
         python -m pip install --upgrade pip
diff --git a/package.json b/package.json
index e24211d..3924856 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "serialize-javascript": "^2.1.2",
     "vue": "^2.6.10",
     "vue-codemirror": "^4.0.6",
+    "vue-marquee-text-component": "^1.1.1",
     "vue-moment": "^4.1.0",
     "vue-router": "^3.1.3",
     "vue-the-mask": "^0.11.1",
diff --git a/public/images/blue-answer-box-bg.png b/public/images/blue-answer-box-bg.png
new file mode 100644
index 0000000..16007e9
Binary files /dev/null and b/public/images/blue-answer-box-bg.png differ
diff --git a/public/images/book.png b/public/images/book.png
new file mode 100644
index 0000000..09e1a08
Binary files /dev/null and b/public/images/book.png differ
diff --git a/public/images/shield-background.png b/public/images/shield-background.png
index 534f3e1..fbad9b5 100644
Binary files a/public/images/shield-background.png and b/public/images/shield-background.png differ
diff --git a/public/index.html b/public/index.html
index bb32131..b5e4b1d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,6 +5,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link href="https://fonts.googleapis.com/css?family=Barlow:400,700&display=swap" rel="stylesheet"> 
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
     <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
     <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
diff --git a/src/App.vue b/src/App.vue
index 28cd905..e56e576 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,14 @@
 <template>
   <v-app>
+    <CWHQ-bar />
     <app-bar />
     <quiz-bar />
     <v-content>
+      <!-- <v-container> -->
       <router-view />
+      <!-- </v-container> -->
     </v-content>
+    <leaderboard-bar />
     <snackbar />
   </v-app>
 </template>
@@ -13,13 +17,17 @@
 import AppBar from "@/components/AppBar";
 import QuizBar from "@/components/QuizBar";
 import Snackbar from "@/components/Snackbar";
+import CWHQBar from "@/components/CWHQBar";
+import LeaderboardBar from "@/components/LeaderboardBar";
 
 export default {
   name: "App",
   components: {
     AppBar,
     QuizBar,
-    Snackbar
+    Snackbar,
+    CWHQBar,
+    LeaderboardBar
   }
 };
 </script>
diff --git a/src/api/auth.js b/src/api/auth.js
index 897d4ce..23a5c90 100644
--- a/src/api/auth.js
+++ b/src/api/auth.js
@@ -12,7 +12,7 @@ let state = {
   displayName: null,
   firstName: null,
   lastName: null,
-  rank: 0
+  rank: -1
 };
 
 async function setState(newState) {
@@ -71,7 +71,7 @@ async function autoLogin() {
 
 async function logout() {
   await request(routes.userapi_logout, {}, false);
-  await setState({ auth: false });
+  await setState({ auth: false, rank: -1 });
 }
 
 function currentUser() {
diff --git a/src/api/index.js b/src/api/index.js
index f7b3ca4..972e297 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -1,2 +1,3 @@
 export { default as auth } from "./auth";
 export { default as quiz } from "./quiz";
+export { default as voting } from "./voting";
diff --git a/src/api/quiz.js b/src/api/quiz.js
index a36d99c..4ac30d4 100644
--- a/src/api/quiz.js
+++ b/src/api/quiz.js
@@ -22,6 +22,10 @@ async function submit(answer) {
   return result.correct;
 }
 
+async function getLeaderboard() {
+  return request(routes.questionsapi_leaderboard, { per: 1000000 });
+}
+
 async function submitFinal(answer, language, checkOnly) {
   const result = await request(routes.questionsapi_answer_final_question, {
     data: {
@@ -38,5 +42,6 @@ export default {
   submit,
   submitFinal,
   getRank,
-  resetRank
+  resetRank,
+  getLeaderboard
 };
diff --git a/src/api/routes.js b/src/api/routes.js
index 10f2a1f..cfc35dc 100644
--- a/src/api/routes.js
+++ b/src/api/routes.js
@@ -19,7 +19,14 @@ export default {
   questionsapi_answer_next_question: route("/api/v1/questions/answer", "POST"),
   questionsapi_answer_final_question: route("/api/v1/questions/final", "POST"),
   questionsapi_get_rank: route("/api/v1/questions/rank", "GET"),
-  questions_api_next_question: route("/api/v1/questions/next", "GET")
+  questionsapi_leaderboard: route("/api/v1/questions/leaderboard", "GET"),
+  questions_api_next_question: route("/api/v1/questions/next", "GET"),
+  voting_check: route("/api/v1/vote/check", "GET"),
+  voting_ballot: route("/api/v1/vote/ballot", "GET"),
+  voting_cast: id => {
+    return route(`/api/v1/vote/${id}/cast`, "POST");
+  },
+  voting_confirm: route("/api/v1/vote/confirm", "POST")
 };
 
 // export default {
diff --git a/src/api/voting.js b/src/api/voting.js
new file mode 100644
index 0000000..340f1da
--- /dev/null
+++ b/src/api/voting.js
@@ -0,0 +1,10 @@
+import routes from "./routes";
+import request from "./request";
+
+async function getBallot() {
+  return request(routes.voting_ballot);
+}
+
+export default {
+  getBallot
+};
diff --git a/src/components/AppBar.vue b/src/components/AppBar.vue
index c4c22b1..74cbe50 100644
--- a/src/components/AppBar.vue
+++ b/src/components/AppBar.vue
@@ -3,81 +3,31 @@
     color="dark"
     flat
     dark
-    :height="100"
-    :max-height="100"
+    :height="height"
+    :max-height="height"
     class="pl-4"
   >
-    <div class="d-flex align-center">
+    <div class="text-center" style="width: 100%;">
       <router-link :to="{ name: 'home' }">
-        <v-img
-          alt="CodewizardsHQ Logo"
-          contain
-          src="/images/logo-small.png"
-          transition="scale-transition"
-        />
+        <img src="/images/logo-small.png" class="mt-2" :height="imageHeight" />
       </router-link>
     </div>
-
-    <v-spacer></v-spacer>
-
-    <!-- <v-btn :to="{ name: 'home' }" v-bind="buttonProps">
-      Home
-		</v-btn>-->
-
-    <!-- <v-btn :to="{ name: 'about' }" v-bind="buttonProps">
-      About
-		</v-btn>-->
-    <v-btn :to="{ name: 'quiz' }" v-bind="buttonProps" v-if="User.isAuthorized"
-      >Quiz</v-btn
-    >
-    <help-pop-over>
-      <template v-slot:default="{ on }">
-        <v-btn v-on="on" v-bind="buttonProps">Get Help</v-btn>
-      </template>
-    </help-pop-over>
-    <v-btn
-      :to="{ name: 'login' }"
-      v-bind="buttonProps"
-      v-if="!User.isAuthorized"
-      >Sign In</v-btn
-    >
-    <v-btn
-      :to="{ name: 'register' }"
-      v-bind="buttonProps"
-      v-if="!User.isAuthorized"
-      >Create Account</v-btn
-    >
-    <v-btn
-      :to="{ name: 'logout' }"
-      v-bind="buttonProps"
-      v-if="User.isAuthorized"
-      >Sign Out</v-btn
-    >
   </v-app-bar>
 </template>
 
 <script>
 import { User } from "@/store";
-import HelpPopOver from "./HelpPopOver";
+
 export default {
   name: "appBar",
-  components: {
-    HelpPopOver
-  },
   computed: {
     ...User.mapState()
   },
   data() {
     return {
-      buttonProps: {
-        text: true,
-        xLarge: true,
-        class: "barrow-bold"
-      }
+      height: 60,
+      imageHeight: 50
     };
-  },
-  methods: {
-    getHelp() {}
   }
 };
 </script>
diff --git a/src/components/CWHQBar.vue b/src/components/CWHQBar.vue
new file mode 100644
index 0000000..f2e1a48
--- /dev/null
+++ b/src/components/CWHQBar.vue
@@ -0,0 +1,20 @@
+<template>
+  <v-toolbar class="cwhq-bar" :height="height" :max-height="height">
+    <v-container>
+      <v-spacer />
+      <a href="https://username.codewizardshq.com/edit/">Student Login</a>
+      <a href="https://username.codewizardshq.com/edit/">Parent Login</a>
+      <a href="https://codewizardshq.com/students/">Student Center</a>
+    </v-container>
+  </v-toolbar>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      height: 23
+    };
+  }
+};
+</script>
diff --git a/src/components/FormAlert.vue b/src/components/FormAlert.vue
new file mode 100644
index 0000000..ca07fcf
--- /dev/null
+++ b/src/components/FormAlert.vue
@@ -0,0 +1,16 @@
+<template>
+  <v-alert prominent type="error" color="red darken-1" v-if="!!message">
+    <v-row align="center">
+      <v-col class="grow">{{ message }}</v-col>
+      <v-col class="shrink">
+        <v-btn color="white" light @click="$emit('dismiss')">Dismiss</v-btn>
+      </v-col>
+    </v-row>
+  </v-alert>
+</template>
+
+<script>
+export default {
+  props: ["message"]
+};
+</script>
diff --git a/src/components/LeaderboardBar.vue b/src/components/LeaderboardBar.vue
new file mode 100644
index 0000000..b0a04f9
--- /dev/null
+++ b/src/components/LeaderboardBar.vue
@@ -0,0 +1,58 @@
+<template>
+  <v-toolbar
+    color="white"
+    :height="height"
+    :min-height="height"
+    :max-height="height"
+    class="leaderboard-bar"
+  >
+    <div class="rotated-text">
+      LEADER
+      <br />BOARD
+    </div>
+    <div class="fade"></div>
+    <marquee-text :duration="(items.length / 5) * 10">
+      <div class="lb-item" v-for="(item, i) in items" :key="i">
+        <img src="/images/shield.png" class="rank float-left" />
+        <div class="rank">{{ item.rank }}</div>
+        <div class="display float-left">{{ item.username }}</div>
+      </div>
+    </marquee-text>
+  </v-toolbar>
+</template>
+
+<script>
+import MarqueeText from "vue-marquee-text-component";
+import * as api from "@/api";
+import { shuffle } from "@/util";
+
+export default {
+  components: {
+    MarqueeText
+  },
+  async mounted() {
+    const leaders = (await api.quiz.getLeaderboard()).items;
+
+    if (leaders.length === 0) {
+      return;
+    }
+
+    while (this.items.length < 100) {
+      for (const leader of leaders) {
+        this.items.push({
+          username: leader[0],
+          rank: leader[1]
+        });
+      }
+    }
+
+    this.items = shuffle(this.items);
+  },
+  data() {
+    return {
+      height: 50,
+      items: []
+    };
+  }
+};
+</script>
diff --git a/src/components/PageCard.vue b/src/components/PageCard.vue
new file mode 100644
index 0000000..e084ab9
--- /dev/null
+++ b/src/components/PageCard.vue
@@ -0,0 +1,14 @@
+<template>
+  <v-card tile flat>
+    <v-toolbar color="secondary" dark flat>
+      <v-toolbar-title>
+        <slot name="title"></slot>
+      </v-toolbar-title>
+    </v-toolbar>
+    <slot></slot>
+  </v-card>
+</template>
+
+<script>
+export default {};
+</script>
diff --git a/src/components/QuizBar.vue b/src/components/QuizBar.vue
index 67f047f..7786ed3 100644
--- a/src/components/QuizBar.vue
+++ b/src/components/QuizBar.vue
@@ -1,64 +1,77 @@
 <template>
   <v-toolbar
-    color="dark2 pl-3 pr-3"
+    color="dark2 quiz-bar"
     flat
     class="secondary--text"
     :height="60"
     :max-height="60"
   >
-    <div class="quiz-bar-rank" v-show="User.auth">
+    <div class="quiz-bar-rank" v-show="User.isAuthorized">
       <div class="level-display">Level</div>
       <div class="rank">{{ User.rank }}</div>
     </div>
+    <v-container>
+      <v-row>
+        <v-col>
+          <span v-if="User.isAuthorized" class="barrow-bold"
+            >Welcome pilgrim {{ User.displayName }}</span
+          >
 
-    <span v-if="User.isAuthorized" class="barrow-bold">
-      Welcome pilgrim {{ User.displayName }}
-    </span>
-    <v-btn
-      v-else
-      color="secondary"
-      text
-      x-large
-      active-class="none"
-      class="no-text-transform barrow-bold"
-      :to="{ name: 'register' }"
-    >
-      Start your journey
-    </v-btn>
-    <v-spacer />
-    <social-pop-over>
-      <template v-slot:default="{ on }">
-        <v-btn
-          text
-          x-large
-          active-class=""
-          color="secondary"
-          class="no-text-transform barrow-bold"
-          v-on="on"
-        >
-          Get your friends in on it
-          <v-img
-            class="ml-2 mb-2"
-            alt="Share Icon"
-            src="/images/shareicon.png"
-          />
-        </v-btn>
-      </template>
-    </social-pop-over>
+          <router-link
+            v-else
+            color="secondary"
+            text
+            x-large
+            active-class="none"
+            :to="{ name: 'register' }"
+            >Start your journey</router-link
+          >
+        </v-col>
+
+        <v-col class="text-right">
+          <v-menu offset-y>
+            <template v-slot:activator="{ on: menu }">
+              <a href="#" v-on="menu">Get Help</a>
+            </template>
+            <v-list class="list">
+              <v-list-item :to="{ name: 'faq' }">
+                <v-list-item-title>Check The FAQ</v-list-item-title>
+              </v-list-item>
+              <v-list-item href="https://discord.gg/fDWbCj9" target="_blank">
+                <v-list-item-title>Get Help On Discord</v-list-item-title>
+              </v-list-item>
+              <v-list-item href="https://www.facebook.com" target="_blank">
+                <v-list-item-title>Get Help On Facebook</v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+
+          <router-link v-if="!User.isAuthorized" :to="{ name: 'login' }"
+            >Sign In</router-link
+          >
+
+          <router-link v-if="User.isAuthorized" :to="{ name: 'logout' }"
+            >Sign Out</router-link
+          >
+        </v-col>
+      </v-row>
+    </v-container>
   </v-toolbar>
 </template>
 
 <script>
 import { User } from "@/store";
-import SocialPopOver from "./SocialPopOver";
 
 export default {
   name: "quizBar",
-  components: {
-    SocialPopOver
-  },
   computed: {
     ...User.mapState()
   }
 };
 </script>
+
+<style lang="scss" scoped>
+.list {
+  padding: 20px;
+}
+</style>
diff --git a/src/components/QuizNeedHelp.vue b/src/components/QuizNeedHelp.vue
index 06da896..1d6a236 100644
--- a/src/components/QuizNeedHelp.vue
+++ b/src/components/QuizNeedHelp.vue
@@ -1,13 +1,61 @@
 <template>
-  <a
-    class="quiz-need-help"
-    href="https://discord.gg/fDWbCj9"
-    target="_blank"
-  ></a>
+  <div>
+    <v-dialog v-model="dialog" max-width="290">
+      <template v-slot:activator="{ on }">
+        <a class="quiz-need-help" v-on="on"></a>
+        <!-- <v-btn color="primary" dark v-on="on">Open Dialog</v-btn> -->
+      </template>
+      <v-card class="social-pop-over">
+        <v-card-text>
+          <v-row no-gutters class="pt-3">
+            <v-col
+              v-for="(icon, i) in icons"
+              :key="icon.icon"
+              :cols="i == icons.length - 1 ? 12 : 6"
+              class="text-center"
+            >
+              <v-btn>
+                <v-icon>mdi-{{ icon.icon }}</v-icon>
+              </v-btn>
+            </v-col>
+          </v-row>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+  </div>
 </template>
 
 <script>
 export default {
-  name: "quizNeedHelp"
+  name: "quizNeedHelp",
+  data() {
+    return {
+      dialog: false,
+      icons: [
+        {
+          icon: "twitter"
+        },
+        {
+          icon: "facebook"
+        },
+        {
+          icon: "whatsapp"
+        },
+        {
+          icon: "linkedin"
+        },
+        {
+          icon: "email"
+        }
+      ]
+    };
+  }
 };
 </script>
+
+<style>
+.v-menu__content,
+.v-dialog {
+  box-shadow: none;
+}
+</style>
diff --git a/src/components/QuizScroll.vue b/src/components/QuizScroll.vue
index 820866a..eb5b164 100644
--- a/src/components/QuizScroll.vue
+++ b/src/components/QuizScroll.vue
@@ -1,11 +1,12 @@
 <template>
-  <div class="quiz-scroll">
+  <div class="quiz-scroll" ref="scroll">
+    <div class="scroll-graphic"></div>
     <div class="scroll-head">
       <div class="scroll-title">
         <slot name="title"></slot>
       </div>
     </div>
-    <div class="scroll-body" ref="body" :style="bodyStyles">
+    <div class="scroll-body" ref="body">
       <slot name="default"></slot>
     </div>
   </div>
@@ -13,46 +14,6 @@
 
 <script>
 export default {
-  name: "quizScroll",
-  data() {
-    return {
-      minHeight: 800,
-      offset: 200,
-      interval: null
-    };
-  },
-  computed: {
-    bodyStyles() {
-      return {
-        top: -this.offset + "px",
-        paddingTop: this.offset - 80 + "px"
-      };
-    }
-  },
-  methods: {
-    fixHeightHack() {
-      let height = 450;
-      for (let child of this.$refs.body.children) {
-        height += child.clientHeight;
-      }
-      this.offset = this.$refs.body.clientHeight - height;
-    }
-  },
-  beforeDestroy() {
-    if (this.interval) {
-      clearInterval(this.interval);
-      this.interval = null;
-    }
-  },
-  mounted() {
-    this.fixHeightHack();
-    this.interval = setInterval(() => {
-      this.fixHeightHack();
-    }, 100);
-
-    // console.log(this.offset);
-    // this.offset = Math.min(this.$refs.body.clientHeight - this.minHeight, this.offset);
-    // console.log(this.offset);
-  }
+  name: "quizScroll"
 };
 </script>
diff --git a/src/components/TermsOfServiceContent.vue b/src/components/TermsOfServiceContent.vue
index cd40102..3c95bf5 100644
--- a/src/components/TermsOfServiceContent.vue
+++ b/src/components/TermsOfServiceContent.vue
@@ -4,102 +4,102 @@
       <span class="c3">Terms Of Service & Privacy Policy</span>
     </h1>
     <p class="c8">
-      <span class="c0"
-        >Students accessing the Defeat the Dragon Code Challenge websites or
+      <span class="c0">
+        Students accessing the Defeat the Dragon Code Challenge websites or
         CodeWizardsHQ Platform to view, upload, or edit content should refrain
-        from the following conduct:</span
-      >
+        from the following conduct:
+      </span>
     </p>
     <p class="c8">
-      <span class="c0"
-        >1. Using any provided website for any commercial use or purpose unless
+      <span class="c0">
+        1. Using any provided website for any commercial use or purpose unless
         expressly permitted by CWHQ and the specific provider in writing, it is
         understood that the website and related services are intended for
-        educational, personal, and non-commercial use only;</span
-      >
+        educational, personal, and non-commercial use only;
+      </span>
     </p>
     <p class="c8">
-      <span class="c0"
-        >2. Posting, uploading, or distributing any defamatory, libelous, or
-        inaccurate student material or content or other content;</span
-      >
+      <span class="c0">
+        2. Posting, uploading, or distributing any defamatory, libelous, or
+        inaccurate student material or content or other content;
+      </span>
     </p>
     <p class="c8">
-      <span class="c0"
-        >3. Posting, uploading, or distributing any student material or content
+      <span class="c0">
+        3. Posting, uploading, or distributing any student material or content
         or other content that is unlawful or that a reasonable person could deem
         to be objectionable, offensive, indecent, pornographic, harassing,
         threatening, embarrassing, distressing, vulgar, hateful, racially or
-        ethnically offensive, or otherwise inappropriate;</span
-      >
+        ethnically offensive, or otherwise inappropriate;
+      </span>
     </p>
     <p class="c8">
-      <span class="c0"
-        >4. Impersonating any person or entity, falsely claiming an affiliation
+      <span class="c0">
+        4. Impersonating any person or entity, falsely claiming an affiliation
         with any person or entity, or accessing the website accounts of others
-        without permission, or performing any other fraudulent activity;</span
-      >
+        without permission, or performing any other fraudulent activity;
+      </span>
     </p>
     <p class="c8">
-      <span class="c0"
-        >5. Deleting the copyright or other proprietary rights notices on the
-        website or on any student material or content or other content;</span
-      >
+      <span class="c0">
+        5. Deleting the copyright or other proprietary rights notices on the
+        website or on any student material or content or other content;
+      </span>
     </p>
     <p class="c8">
-      <span class="c0"
-        >6. Asserting, or authorizing, assisting, or encouraging any third party
+      <span class="c0">
+        6. Asserting, or authorizing, assisting, or encouraging any third party
         to assert, against CWHQ, the website provider, or any of their
         affiliates or licensors any patent infringement or other intellectual
         property infringement claim regarding any student material or content or
         other content, submitted, or otherwise made available on or through the
-        website;</span
-      >
+        website;
+      </span>
     </p>
     <p class="c8">
-      <span class="c0"
-        >7. Making unsolicited offers, advertisements, proposals, or sending
-        junk mail or spam to other users of the website or participants in any
+      <span class="c0">
+        7. Making unsolicited offers, advertisements, proposals, or sending junk
+        mail or spam to other users of the website or participants in any
         Competition (including, but not limited to, unsolicited advertising,
         promotional materials, or other solicitation material, bulk mailing of
         commercial advertising, chain mail, informational announcements, charity
-        requests, and petitions for signatures);</span
-      >
+        requests, and petitions for signatures);
+      </span>
     </p>
     <p class="c8">
-      <span class="c0"
-        >8. Using the website for any illegal purpose, or in violation of any
+      <span class="c0">
+        8. Using the website for any illegal purpose, or in violation of any
         local, state, national, or international law, including, without
         limitation, laws governing intellectual property and other proprietary
-        rights, and data protection and privacy;</span
-      >
+        rights, and data protection and privacy;
+      </span>
     </p>
     <p class="c8">
-      <span class="c0"
-        >9. Defaming, harassing, abusing, threatening or defrauding users of the
+      <span class="c0">
+        9. Defaming, harassing, abusing, threatening or defrauding users of the
         website or participants in the Defeat the Dragon Code Challenge, or
         collecting, or attempting to collect, personal information about users,
-        participants, or third parties without their consent;</span
-      >
+        participants, or third parties without their consent;
+      </span>
     </p>
     <p class="c8">
-      <span class="c0"
-        >10. Removing, circumventing, disabling, damaging or otherwise
+      <span class="c0">
+        10. Removing, circumventing, disabling, damaging or otherwise
         interfering with security-related features of the website, student
         material or content or other content, features that prevent or restrict
         use or copying of any content accessible through the website, or
         features that enforce limitations on the use of the website, student
-        material or content or other content;</span
-      >
+        material or content or other content;
+      </span>
     </p>
     <p class="c8">
-      <span class="c0"
-        >11. Intentionally interfering with or damaging the operation of the
+      <span class="c0">
+        11. Intentionally interfering with or damaging the operation of the
         website or any user&rsquo;s enjoyment of it, by any means, including
         without limitation by participation in any denial-of-service type
         attacks or by uploading or otherwise disseminating viruses, adware,
-        spyware, worms, or other malicious code.</span
-      >
+        spyware, worms, or other malicious code.
+      </span>
     </p>
     <p class="c8">
       <span class="c4">Privacy Policy</span>
@@ -108,23 +108,23 @@
       <span class="c4"></span>
     </p>
     <p class="c7">
-      <span class="c0"
-        >By visiting and using the http://challenge.codewizardshq.com website
+      <span class="c0">
+        By visiting and using the http://challenge.codewizardshq.com website
         (&ldquo;CodeWizardsHQ&rdquo;) you acknowledge you have read and agree to
         be bound by this Privacy Policy. If you do not wish to agree to the
         Privacy Policy, please close this browser session and refrain from using
-        CodeWizardsHQ.</span
-      >
+        CodeWizardsHQ.
+      </span>
     </p>
     <p class="c5">
       <span class="c0"></span>
     </p>
     <p class="c7">
-      <span class="c0"
-        >CodeWizardsHQ is committed to protecting your privacy online. Please
+      <span class="c0">
+        CodeWizardsHQ is committed to protecting your privacy online. Please
         read the following to learn what information we collect from you and how
-        we use that information.</span
-      >
+        we use that information.
+      </span>
     </p>
     <p class="c5">
       <span class="c0"></span>
@@ -133,8 +133,8 @@
       <span class="c4">1. Changes to Privacy Policy</span>
     </p>
     <p class="c7">
-      <span class="c0"
-        >CodeWizardsHQ may change this Privacy Policy at any time by posting the
+      <span class="c0">
+        CodeWizardsHQ may change this Privacy Policy at any time by posting the
         revised Policy in the &ldquo;Privacy Policy&rdquo; section of the
         website, located at https://codewizardshq.com/privacy-policy/. The
         revised Privacy Policy is effective immediately when posted on the
@@ -142,8 +142,8 @@
         and the Privacy Policy periodically for changes. Your continued use of
         CodeWizardsHQ after posting any changes will constitute your
         acknowledgment and acceptance of the terms of the revised Privacy
-        Policy.</span
-      >
+        Policy.
+      </span>
     </p>
     <p class="c5">
       <span class="c0"></span>
@@ -158,36 +158,35 @@
     </p>
     <ul class="c10 lst-kix_wylw1qcyrxab-0 start">
       <li class="c1">
-        <span class="c0"
-          >Your name and contact information will not be shared with Third
-          Parties for marketing purposes without your permission.</span
-        >
+        <span class="c0">
+          Your name and contact information will not be shared with Third
+          Parties for marketing purposes without your permission.
+        </span>
       </li>
       <li class="c1">
-        <span class="c0"
-          >CodeWizardsHQ marketing communications are &ldquo;opt-out,&rdquo; and
+        <span class="c0">
+          CodeWizardsHQ marketing communications are &ldquo;opt-out,&rdquo; and
           you may choose not to receive our newsletters or other marketing
-          material at any time.</span
-        >
+          material at any time.
+        </span>
       </li>
       <li class="c1">
-        <span class="c0"
-          >Your account information is password protected. You are responsible
+        <span class="c0">
+          Your account information is password protected. You are responsible
           for keeping your password secure and private. In the event of any
           compromise of our website security, CodeWizardsHQ will notify you
-          immediately to take action to change your password on the
-          website.</span
-        >
+          immediately to take action to change your password on the website.
+        </span>
       </li>
       <li class="c1">
-        <span class="c0"
-          >CodeWizardsHQ does not knowingly collect any information or allow
+        <span class="c0">
+          CodeWizardsHQ does not knowingly collect any information or allow
           accounts to be held by users under the age of 13 without permission of
           a parent or guardian. If an account is discovered by CodeWizardsHQ
           which is believed to be held by a user under 13 years of age, without
           the permission of a parent or guardian, the account and all related
-          postings will be removed by CodeWizardsHQ.</span
-        >
+          postings will be removed by CodeWizardsHQ.
+        </span>
       </li>
     </ul>
     <p class="c5">
@@ -201,27 +200,27 @@
         <span class="c0">We may collect your email address.</span>
       </li>
       <li class="c1">
-        <span class="c0"
-          >We may collect your email address, or other information needed to
+        <span class="c0">
+          We may collect your email address, or other information needed to
           contact you online. We also collect your student&rsquo;s email address
           and information. We use contact information to send you notices on
           CodeWizardsHQ products and services, as well as updates about the
-          Defeat the Dragon Code Challenge.</span
-        >
+          Defeat the Dragon Code Challenge.
+        </span>
       </li>
       <li class="c1">
         <span class="c0">We may collect challenge activity information.</span>
       </li>
       <li class="c1">
-        <span class="c0"
-          >We may collect information generated by your student&rsquo;s activity
+        <span class="c0">
+          We may collect information generated by your student&rsquo;s activity
           on CodeWizardsHQ. We use this information to track challenge progress
           and to allow your student to participate in our game, as well as to
           improve the functionality of the website, and to comply with any
           requirements of law. This information may be disclosed only to our
           staff and to our immediate agents and will never be shared with third
-          parties.</span
-        >
+          parties.
+        </span>
       </li>
       <li class="c1">
         <span class="c0"
@@ -229,26 +228,26 @@
         >
       </li>
       <li class="c1">
-        <span class="c0"
-          >When you use CodeWizardsHQ, we may collect incidental identifying
+        <span class="c0">
+          When you use CodeWizardsHQ, we may collect incidental identifying
           information about you or your student, such as pages you visit and the
           amount of time you spend looking at a page. This information does not
           inherently reveal your identity or your student&rsquo;s identity and
           will not be linked to you or your student personally. We use this
           information to improve the functionality of the website. This
           information may be disclosed only to our staff and to our immediate
-          agents.</span
-        >
+          agents.
+        </span>
       </li>
       <li class="c1">
         <span class="c0">We do not collect financial information.</span>
       </li>
       <li class="c1">
-        <span class="c0"
-          >All of the financial transactions related to your use of
-          CodeWizardsHQ are handled through Stripe, so CodeWizardsHQ does not
-          collect or store your financial information at all.</span
-        >
+        <span class="c0">
+          All of the financial transactions related to your use of CodeWizardsHQ
+          are handled through Stripe, so CodeWizardsHQ does not collect or store
+          your financial information at all.
+        </span>
       </li>
     </ul>
     <p class="c7 c21">
@@ -256,14 +255,14 @@
     </p>
     <ul class="c10 lst-kix_8go8xciji1y9-0">
       <li class="c1">
-        <span class="c0"
-          >All postings to CodeWizardsHQ, including code, comments, discussions,
+        <span class="c0">
+          All postings to CodeWizardsHQ, including code, comments, discussions,
           etc. are stored in our databases and may be archived on-line or
           off-line in the form of backup tapes or other electronic formats. This
           information is used for your student&rsquo;s courses and may be
           retained even after an account is &ldquo;deleted&rdquo; from the
-          website itself for us to use in improving our courses.</span
-        >
+          website itself for us to use in improving our courses.
+        </span>
       </li>
     </ul>
     <p class="c7 c21">
@@ -271,8 +270,8 @@
     </p>
     <ul class="c10 lst-kix_8go8xciji1y9-0">
       <li class="c1">
-        <span class="c0"
-          >We use browser cookies in several ways. First, we use cookies to keep
+        <span class="c0">
+          We use browser cookies in several ways. First, we use cookies to keep
           track of your progress in courses, login status, etc. This use of
           cookies helps make the CodeWizardsHQ experience better for you. We
           also use third-party cookies for advertising and remarketing. We use
@@ -282,8 +281,8 @@
           cookies to potentially show you advertising for CodeWizardsHQ on other
           sites in their network, or based on keyword searches. For more
           information about how you can control Google ads, please visit
-          www.google.com/settings/ads .</span
-        >
+          www.google.com/settings/ads .
+        </span>
       </li>
     </ul>
     <p class="c5">
@@ -293,26 +292,25 @@
       <span class="c4">4. Security of Information</span>
     </p>
     <p class="c7">
-      <span class="c0"
-        >CodeWizardsHQ takes security seriously and takes numerous precautions
-        to protect the security of your account information. You can access your
+      <span class="c0">
+        CodeWizardsHQ takes security seriously and takes numerous precautions to
+        protect the security of your account information. You can access your
         account on our coding platform with your username and password. This
         password is encrypted. We recommend that you do not share your password
         with anyone. In addition, your account information resides on a secure
-        server that only selected personnel and contractors have access
-        to.</span
-      >
+        server that only selected personnel and contractors have access to.
+      </span>
     </p>
     <p class="c7">
-      <span class="c0"
-        >Unfortunately, no data transmission over the Internet or any wireless
+      <span class="c0">
+        Unfortunately, no data transmission over the Internet or any wireless
         network can be guaranteed to be 100% secure. As a result, while we
         employ commercially reasonable security measures to protect data and
         seek to partner with companies that do the same, CodeWizardsHQ cannot
         guarantee the security of any information transmitted to or from the
         website, and is not responsible for the actions of any third parties
-        that may receive any such information.</span
-      >
+        that may receive any such information.
+      </span>
     </p>
     <p class="c5">
       <span class="c0"></span>
@@ -321,15 +319,14 @@
       <span class="c4">5. Third Party Sites</span>
     </p>
     <p class="c7">
-      <span class="c0"
-        >This Privacy Policy only addresses the use and disclosure of
-        information CodeWizardsHQ collects from you. Other Sites that may be
-        accessible through CodeWizardsHQ have their own privacy policies and
-        data collection, use and disclosure practices. We are not responsible
-        for the policies or practices of third parties and you are solely
-        responsible for reviewing the privacy policies of any third party
-        sites.</span
-      >
+      <span class="c0">
+        This Privacy Policy only addresses the use and disclosure of information
+        CodeWizardsHQ collects from you. Other Sites that may be accessible
+        through CodeWizardsHQ have their own privacy policies and data
+        collection, use and disclosure practices. We are not responsible for the
+        policies or practices of third parties and you are solely responsible
+        for reviewing the privacy policies of any third party sites.
+      </span>
     </p>
     <p class="c5">
       <span class="c0"></span>
@@ -338,22 +335,22 @@
       <span class="c4">6. Release of Information</span>
     </p>
     <p class="c7">
-      <span class="c0"
-        >CodeWizardsHQ may release any user information as required by law or in
+      <span class="c0">
+        CodeWizardsHQ may release any user information as required by law or in
         the good faith belief that disclosure of information is reasonably
         necessary to comply with a subpoena, discovery request, court order or
-        other legal process issued by a court of competent jurisdiction.</span
-      >
+        other legal process issued by a court of competent jurisdiction.
+      </span>
     </p>
     <p class="c7">
-      <span class="c0"
-        >CodeWizardsHQ may also release any user information in the good faith
+      <span class="c0">
+        CodeWizardsHQ may also release any user information in the good faith
         belief that such disclosure of information is reasonably necessary to
         enforce the Terms and Conditions of Use for the website, to defend or
         respond to any legal actions initiated by third-parties related to the
         user account or content posted by the user; or to protect the personal
-        safety of CodeWizardsHQ staff, users, or the general public.</span
-      >
+        safety of CodeWizardsHQ staff, users, or the general public.
+      </span>
     </p>
     <p class="c5">
       <span class="c0"></span>
@@ -362,8 +359,8 @@
       <span class="c4">7. International Users</span>
     </p>
     <p class="c7">
-      <span class="c0"
-        >By visiting and using the CodeWizardsHQ website, you acknowledge that
+      <span class="c0">
+        By visiting and using the CodeWizardsHQ website, you acknowledge that
         your information may be used and stored on servers located in the United
         States of America and therefore transferred out of your resident
         jurisdiction. By using the site, you are consenting to any international
@@ -374,8 +371,8 @@
         website is governed by the laws of the United States of America, and you
         hereby consent to the jurisdiction of the Federal District Court of the
         Western District of Texas regarding any disputes which may arise under
-        this Agreement or use of the website.</span
-      >
+        this Agreement or use of the website.
+      </span>
     </p>
     <p class="c5">
       <span class="c0"></span>
@@ -384,10 +381,10 @@
       <span class="c4">8. Comments and Feedback</span>
     </p>
     <p class="c7">
-      <span
-        >CodeWizardsHQ welcomes and encourages your comments and feedback on
-        this Privacy Policy and any of our other website policies. Please</span
-      >
+      <span>
+        CodeWizardsHQ welcomes and encourages your comments and feedback on this
+        Privacy Policy and any of our other website policies. Please
+      </span>
       <span class="c18">
         <a
           class="c2"
@@ -395,10 +392,10 @@
           >visit our website</a
         >
       </span>
-      <span class="c0"
-        >&nbsp;or email us at feedback@codewizardshq.com with any comments or
-        questions.</span
-      >
+      <span class="c0">
+        &nbsp;or email us at feedback@codewizardshq.com with any comments or
+        questions.
+      </span>
     </p>
     <p class="c11">
       <span class="c14"></span>
@@ -418,3 +415,15 @@
 <script>
 export default {};
 </script>
+
+<style lang="scss" scoped>
+h1,
+h2,
+h3 {
+  margin-bottom: 12px !important;
+}
+
+a {
+  color: #4caf50;
+}
+</style>
diff --git a/src/plugins/router.js b/src/plugins/router.js
index b881787..1a4f235 100644
--- a/src/plugins/router.js
+++ b/src/plugins/router.js
@@ -35,8 +35,10 @@ const routes = [
   {
     path: "/logout",
     name: "logout",
-    beforeEnter(to, from, next) {
-      auth.logout().then(() => next({ name: "home" }));
+    async beforeEnter(to, from, next) {
+      await store.dispatch("Quiz/reset");
+      await auth.logout();
+      next({ name: "login" });
     },
     meta: {
       secured: true
@@ -58,6 +60,22 @@ const routes = [
       secured: true
     }
   },
+  {
+    path: "/voting",
+    name: "voting",
+    component: () => import("@/views/Voting/Ballot.vue")
+  },
+  {
+    // dev only
+    path: "/leader-board",
+    name: "leader-board",
+    component: () => import("@/views/Voting/Leaderboard.vue")
+  },
+  {
+    path: "/frequently-asked-questions",
+    name: "faq",
+    component: () => import("@/views/FAQ.vue")
+  },
   {
     path: "/quiz",
     name: "quiz",
@@ -88,7 +106,6 @@ const routes = [
       if (store.state.Quiz.isLastQuestion) {
         return import("@/views/Quiz/QuizFinalQuestion");
       }
-
       // NORMAL QUIZ MODE
       return import("@/views/Quiz/Quiz");
     },
@@ -96,6 +113,7 @@ const routes = [
       // USER MUST SEE INTRO VIDEO
       if (!store.state.Quiz.hasSeenIntro && store.state.User.rank == 1) {
         next({ name: "quiz-intro" });
+        return;
       }
       next();
     },
@@ -106,7 +124,11 @@ const routes = [
   {
     path: "/quiz/intro",
     name: "quiz-intro",
-    component: () => import("@/views/Quiz/QuizIntro")
+    component: () => import("@/views/Quiz/QuizIntro"),
+    async beforeEnter(to, from, next) {
+      await store.dispatch("Quiz/refresh");
+      next();
+    }
   },
   {
     path: "*",
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
index 173786d..c6178ba 100644
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -11,14 +11,16 @@ export default new Vuetify({
     themes: {
       dark: {
         primary: "#fdc743",
-        secondary: "#0fad80",
+        secondary: "#27AE82",
         // accent: '#82B1FF',
         // error: '#FF5252',
         // info: '#2196F3',
         // success: '#4CAF50',
         // warning: '#FFC107',
-        dark: "#353535",
-        dark2: "#333131"
+        dark: "#282828",
+        dark2: "#1E1E1E",
+        button: "#4CAF50",
+        input: "#4CAF50"
       }
     }
   }
diff --git a/src/store/quiz.js b/src/store/quiz.js
index 90a9d4d..ee78905 100644
--- a/src/store/quiz.js
+++ b/src/store/quiz.js
@@ -1,6 +1,7 @@
 import { mapState } from "vuex";
 import { quiz } from "@/api";
 import moment from "moment";
+import Vue from "vue";
 
 const moduleName = "Quiz";
 
@@ -56,6 +57,9 @@ const state = {
 };
 
 const actions = {
+  async reset({ commit }) {
+    commit("reset");
+  },
   async markAsSeen({ commit }) {
     commit("hasSeenIntro", true);
   },
@@ -167,6 +171,11 @@ const mutations = {
   },
   quizHasEnded(state, value) {
     state.quizHasEnded = value;
+  },
+  reset(state) {
+    for (const [key, value] of Object.entries(getDefaultState())) {
+      Vue.set(state, key, value);
+    }
   }
 };
 
diff --git a/src/styles/application.scss b/src/styles/application.scss
index 5c0eddb..9bd1365 100644
--- a/src/styles/application.scss
+++ b/src/styles/application.scss
@@ -1,4 +1,5 @@
 .theme--dark.v-application {
-  background: url("/images/background.jpg");
-  background-size: cover;
+  // background: url("/images/background.jpg");
+  // background-size: cover;
+  background-color: #21252D;
 }
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
index f39f178..8cde5b9 100644
--- a/src/styles/colors.scss
+++ b/src/styles/colors.scss
@@ -1,4 +1,11 @@
 $primary: #fdc743;
-$secondary: #0fad80;
-$dark: #353535;
-$dark2: #333131;
\ No newline at end of file
+$secondary: #27ae82;
+// accent: '#82B1FF',
+// error: '#FF5252',
+// info: '#2196F3',
+// success: '#4CAF50',
+// warning: '#FFC107',
+$dark: #282828;
+$dark2: #1e1e1e;
+$button: #4caf50;
+$input: #4caf50;
diff --git a/src/styles/cwhq-bar.scss b/src/styles/cwhq-bar.scss
new file mode 100644
index 0000000..a4047ac
--- /dev/null
+++ b/src/styles/cwhq-bar.scss
@@ -0,0 +1,28 @@
+.cwhq-bar .v-toolbar__content {
+  background-color: #fdc743;
+  // display: none !important;
+  text-align: right;
+  padding: 3px;
+  line-height: 17.4px;
+
+  a {
+    color: #fff;
+    text-decoration: none;
+    margin-left: 4px;
+    margin-right: 4px;
+    font-family: "Barlow", sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    color: rgb(1, 30, 65);
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &:not(:last-child):after {
+      content: "|";
+      position: relative;
+      left: 4px;
+    }
+  }
+}
diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss
index 92fafd0..72d2468 100644
--- a/src/styles/fonts.scss
+++ b/src/styles/fonts.scss
@@ -38,3 +38,5 @@
 .bu-wicked {
   font-family: "buWicked" !important;
 }
+
+
diff --git a/src/styles/leaderboard-bar.scss b/src/styles/leaderboard-bar.scss
new file mode 100644
index 0000000..ba229e6
--- /dev/null
+++ b/src/styles/leaderboard-bar.scss
@@ -0,0 +1,64 @@
+.leaderboard-bar {
+  background-color: #fff;
+  $height: 40px;
+
+  .lb-item {
+    color: #333;
+    display: inline-block;
+    padding: 5px 4px;
+    margin-left: 15px;
+    margin-right: 15px;
+    height: $height;
+    position: relative;
+
+    img.rank {
+      height: $height;
+      display: inline-block;
+      position: relative;
+      margin-right: 12px;
+    }
+
+    div.rank {
+      position: absolute;
+      height: $height;
+      width: 30px;
+      text-align: center;
+      top: 8px;
+      left: 3px;
+      color: $secondary;
+      font-family: "Barrow2Bold";
+    }
+
+    .display {
+      display: inline-block;
+      height: $height;
+      color: $dark;
+      margin-top: 5px;
+      font-family: "Barrow2Light";
+    }
+  }
+
+  .fade {
+    position: absolute;
+    width: 80px;
+    height: 100%;
+
+    background-image: linear-gradient(to right, rgba(253, 199, 67, 1), rgba(253, 199, 67, 1), rgba(253, 199, 67, 0));
+    z-index: 1;
+    top: 0;
+    left: 0;
+  }
+
+  .rotated-text {
+    position: absolute;
+    color: $dark;
+    z-index: 999999;
+    transform: rotate(-90deg);
+    font-size: 14px;
+    text-align: center;
+    height: 100%;
+    left: 10px;
+    font-family: "Barrow2Bold";
+    line-height: 13px;
+  }
+}
diff --git a/src/styles/quiz-answer.scss b/src/styles/quiz-answer.scss
index 6c6669d..9ab618e 100644
--- a/src/styles/quiz-answer.scss
+++ b/src/styles/quiz-answer.scss
@@ -1,64 +1,91 @@
 .quiz-answer {
   .v-card {
-    background: url("/images/answer-area-bg.png") no-repeat;
+    background: url("/images/blue-answer-box-bg.png") no-repeat;
     background-size: 100% 100%;
     background-repeat: none;
-    width: 420px;
+    width: 500px;
     margin-top: 200px;
     padding: 12px;
     z-index: 2;
+    margin-bottom: 300px;
 
-    .attempts-remaining{
+    .attempts-remaining {
       text-align: center;
       height: 100px;
     }
 
     .v-btn {
       width: 100%;
-      margin-top: 12px;
       color: $dark;
       font-family: "Barrow2Bold";
-      font-size: 30px;
+      font-size: 40px;
       letter-spacing: 12px;
+      height: 80px;
+      margin-top: 12px;
     }
 
     .v-form {
-      margin-top: 140px;
+      margin-top: 20px;
+      .text-field {
+        margin-bottom: 40px;
+        background-color: #dbe6ea;
+        opacity: 0.8;
+        padding-top: 20px;
+        border: solid thick $primary;
 
-      .v-input {
-        height: 90px;
-        z-index: 10;
-        position: relative;
-        margin: 0;
-        padding: 0;
+        .theme--dark.v-label {
+          color: #031e41 !important;
+        }
 
-        .v-input__control {
-          padding-left: 20px;
-          margin: 0;
-          padding-right: 20px;
+        .theme--dark.v-label.primary-text {
+          color: #031e41 !important;
+        }
+        input {
+          color: #031e41 !important;
         }
 
-        &:before {
-          content: "";
-          position: absolute;
-          background: url("/images/answer-box.png") no-repeat;
-          background-size: 100% 100%;
-          background-repeat: none;
-          background-position-x: center;
-          background-position-y: center;
-          width: 100%;
-          height: 100%;
-          top: -25px;
+        .v-input {
+          z-index: 10;
+          position: relative;
+          margin: 0;
+          padding: 0;
+          caret-color: #031e41 !important;
+          color: #031e41 !important;
+
+          .v-input__slot {
+            &:before {
+              border-style: none;
+            }
+          }
+
+          .v-input__control {
+            padding-left: 20px;
+            margin: 0;
+            padding-right: 20px;
+          }
+
+          &:before {
+            content: "";
+            position: absolute;
+            // background: url("/images/answer-box.png") no-repeat;
+            background-size: 100% 100%;
+            background-repeat: none;
+            background-position-x: center;
+            background-position-y: center;
+            width: 100%;
+            height: 100%;
+            top: -25px;
+          }
         }
       }
     }
 
     img {
-      top: -140px;
+      top: -200px;
       position: absolute;
-      width: 100%;
+      width: 400px;
       height: auto;
-      left: 32px;
+      left: 100px;
       -webkit-transform: scaleX(-1);
       transform: scaleX(-1);
     }
diff --git a/src/styles/quiz-bar-rank.scss b/src/styles/quiz-bar-rank.scss
index 89202a2..e815a94 100644
--- a/src/styles/quiz-bar-rank.scss
+++ b/src/styles/quiz-bar-rank.scss
@@ -1,14 +1,14 @@
 @import "./colors.scss";
 
-$width: 200px;
-$shieldHeight: 80px;
+$width: 100px;
+$shieldHeight: 50px;
 
 $border: none; //solid thin red;
 
 .quiz-bar-rank {
   position: absolute;
   width: $width;
-  top: 0;
+  top: 12px;
   left: 50%;
   margin-left: -$width/2;
   border: $border;
@@ -20,8 +20,9 @@ $border: none; //solid thin red;
     text-align: center;
     padding: 0;
     margin: 0;
-    line-height: 2.3em;
-    font-size: 2em;
+    top:15px;
+    line-height: $shieldHeight;
+    font-size: $shieldHeight / 2;
     font-family: "Barrow2Bold" !important;
 
     &:before {
@@ -41,12 +42,13 @@ $border: none; //solid thin red;
 
   .level-display {
     border: $border;
-    position: relative;
+    position: absolute;
+    top: -10px;
     width: 100%;
     text-align: center;
     padding: 0;
     margin: 0;
-    font-size: 1.6em;
+    font-size: 18px;
     font-family: "Barrow2Bold" !important;
   }
 
diff --git a/src/styles/quiz-bar.scss b/src/styles/quiz-bar.scss
new file mode 100644
index 0000000..86a6e2b
--- /dev/null
+++ b/src/styles/quiz-bar.scss
@@ -0,0 +1,22 @@
+.quiz-bar {
+  a {
+    font-weight: normal;
+    color: #fff !important;
+    text-decoration: none;
+    margin-left: 8px;
+    margin-right: 8px;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    position: relative;
+    top: 2px;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  span{
+    top: 2px;
+    position: relative;
+  }
+}
diff --git a/src/styles/quiz-need-help.scss b/src/styles/quiz-need-help.scss
index 26af433..8c86d41 100644
--- a/src/styles/quiz-need-help.scss
+++ b/src/styles/quiz-need-help.scss
@@ -1,10 +1,10 @@
 .quiz-need-help {
-  background-image: url("/images/discord-book-bg.png");
+  background-image: url("/images/book.png");
   background-repeat: no-repeat;
   background-size: contain;
   background-position-y: 10px;
-  width: 300px;
-  height: 300px;
+  width: 329px;
+  height: 276px;
   position: fixed;
   right: 0;
   bottom: 0;
@@ -14,8 +14,8 @@
 
   &:hover {
     cursor: pointer;
-    width: 320px;
-    height: 320px;
+    width: 339px;
+    height: 286px;
     filter: saturate(200%) sepia(100%);
   }
 }
diff --git a/src/styles/quiz-scroll.scss b/src/styles/quiz-scroll.scss
index 1cf3e8c..0268006 100644
--- a/src/styles/quiz-scroll.scss
+++ b/src/styles/quiz-scroll.scss
@@ -1,71 +1,31 @@
-// .quiz-scroll {
-//   .v-card {
-//     background: url("/images/scroll.png");
-//     background-size: 100%;
-//     width: 669px;
-//     height: 1042px;
-//   }
-
-//   .scroll-content {
-//     position: relative;
-//     margin-top: 120px;
-//     width: 460px;
-//     margin-left: auto;
-//     margin-right: auto;
-//     font-size: 30px;
-//     color: #30231a !important;
-//     font-family: "Barrow2Light";
-//     letter-spacing: 2px;
-//   }
-
-//   .scroll-title {
-//     text-align: center;
-//     font-size: 40px;
-//     position: relative;
-//     top: 15px;
-//     color: #30231a !important;
-//     font-family: "buWicked";
-//     // letter-spacing: 2px;
-
-//     &:after {
-//       content: "";
-//       top: 55px;
-//       position: absolute;
-//       background-image: url("/images/underline.png");
-//       background-position-x: center;
-//       width: 100%;
-//       height: 27px;
-//       left: 0;
-//       background-size: contain;
-//       background-repeat: no-repeat;
-//     }
-//   }
-// }
-
-$left: -166px;
 .quiz-scroll {
   width: 669px;
   position: relative;
-  // left: -250px;
-  // border: solid thin #ddd;
+  // background: white;
   // clip-path: inset(42px -250px -1000px 0px);
-  //T  R  B L
-  clip-path: inset(42px -250px -1000px 0px);
+  overflow: hidden;
+  padding-bottom: 400px;
+  top: -30px;
+  color: #031e41;
+  font-size: 24px;
+  letter-spacing: 2px;
 
   .scroll-head {
-    left: $left;
+    top: -43px;
+    left: -166px;
     width: 1000px;
     height: 270px;
     position: relative;
     background-image: url("/images/scroll-top.png");
+    background-size: contain;
     z-index: 2;
 
     .scroll-title {
       text-align: center;
       font-size: 50px;
+      top: 42px;
       position: relative;
-      top: 45px;
-      color: #30231a !important;
+      color: #031e41 !important;
       font-family: "buWicked";
 
       &:after {
@@ -83,18 +43,23 @@ $left: -166px;
     }
   }
 
-  $offset: 200px;
-  .scroll-body {
-    z-index: 1;
-    left: $left;
+  // $offset: 200px;
+
+  .scroll-graphic {
     width: 1000px;
     height: 2238px;
-    position: relative;
-    top: -$offset;
+    position: absolute;
+    bottom: 0;
+    left: -166px;
     background-image: url("/images/scroll-bottom.png");
-    border: solid thin #00000000;
+    z-index: 0;
+  }
+
+  .scroll-body {
+    z-index: 1;
+    position: relative;
+    margin-top: -130px;
     text-align: center;
-    padding-top: $offset - 80px;
 
     .asset {
       width: 400px;
@@ -110,9 +75,16 @@ $left: -166px;
       margin-left: auto;
       margin-right: auto;
       font-size: 24px;
-      color: #30231a !important;
+      color: #031e41 !important;
       font-family: "Barrow2Light";
       letter-spacing: 2px;
+      text-align: left;
+      white-space: pre-wrap;
+
+      pre {
+        font-size: 18px;
+        white-space: pre-wrap;
+      }
     }
   }
 }
diff --git a/src/styles/social-pop-over.scss b/src/styles/social-pop-over.scss
index f247182..fc80f71 100644
--- a/src/styles/social-pop-over.scss
+++ b/src/styles/social-pop-over.scss
@@ -7,21 +7,21 @@ $arrowSize: 20px;
   margin-right: 20px;
   background: url("/images/answer-area-bg.png") no-repeat;
   background-size: 100% 100%;
-  background-repeat: none; 
+  background-repeat: none;
   z-index: 200;
 
-  &:after {
-    width: 0;
-    height: 0;
-    border-left: $arrowSize solid transparent;
-    border-right: $arrowSize solid transparent;
+  // &:after {
+  //   width: 0;
+  //   height: 0;
+  //   border-left: $arrowSize solid transparent;
+  //   border-right: $arrowSize solid transparent;
 
-    border-bottom: $arrowSize solid $dark;
-    position: absolute;
-    right: 12px;
-    top: -$arrowSize;
-    content: "";
-  }
+  //   border-bottom: $arrowSize solid $dark;
+  //   position: absolute;
+  //   right: 12px;
+  //   top: -$arrowSize;
+  //   content: "";
+  // }
 
   .v-btn {
     i {
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index 011aecb..40bed0e 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -1,4 +1,5 @@
 @import "~vuetify/src/styles/styles.sass";
+@import "./colors.scss";
 @import "./application.scss";
 @import "./quiz-scroll.scss";
 @import "./quiz-answer.scss";
@@ -6,4 +7,26 @@
 @import "./quiz-bar-rank.scss";
 @import "./content.scss";
 @import "./social-pop-over.scss";
-@import "./casing.scss"
+@import "./casing.scss";
+@import "./cwhq-bar.scss";
+@import "./quiz-bar.scss";
+@import "./leaderboard-bar.scss";
+
+.v-alert {
+  font-size: 20px;
+}
+
+.v-input {
+  font-size: 20px;
+}
+
+.v-messages {
+  font-size: 16px;
+}
+
+.v-snack {
+  .v-snack__content {
+    font-size: 20px;
+    padding: 20px;
+  }
+}
diff --git a/src/styles/v-card.scss b/src/styles/v-card.scss
index e282769..a609b02 100644
--- a/src/styles/v-card.scss
+++ b/src/styles/v-card.scss
@@ -1,3 +1,3 @@
-.v-card__text {
-  font-size: 1rem;
-}
\ No newline at end of file
+// .v-card__text {
+//   font-size: 1rem;
+// }
\ No newline at end of file
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index f2c7b6d..38dc234 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,9 +1,9 @@
 // https://vuetifyjs.com/en/customization/sass-variables
 @import "./fonts.scss";
-@import "./colors.scss";
+// @import "./colors.scss";
 $body-font-family: "Barrow2Light";
 $heading-font-family: "buWicked";
 
 @import "v-card.scss";
 // $border-radius-root: 6px;
-// $font-size-root: 20px;
+$font-size-root: 20px;
diff --git a/src/util.js b/src/util.js
new file mode 100644
index 0000000..f1faab6
--- /dev/null
+++ b/src/util.js
@@ -0,0 +1,22 @@
+/**
+ * Randomly shuffle an array
+ * https://stackoverflow.com/a/2450976/1293256
+ */
+export function shuffle(array) {
+  var currentIndex = array.length;
+  var temporaryValue, randomIndex;
+
+  // While there remain elements to shuffle...
+  while (0 !== currentIndex) {
+    // Pick a remaining element...
+    randomIndex = Math.floor(Math.random() * currentIndex);
+    currentIndex -= 1;
+
+    // And swap it with the current element.
+    temporaryValue = array[currentIndex];
+    array[currentIndex] = array[randomIndex];
+    array[randomIndex] = temporaryValue;
+  }
+
+  return array;
+}
diff --git a/src/views/FAQ.vue b/src/views/FAQ.vue
new file mode 100644
index 0000000..098338c
--- /dev/null
+++ b/src/views/FAQ.vue
@@ -0,0 +1,46 @@
+<template>
+  <v-container>
+    <v-row align="center" justify="center">
+      <v-col cols="12" sm="12" md="7">
+        <page-card>
+          <template #title>
+            <v-toolbar-title>Frequently Asked Questions</v-toolbar-title>
+          </template>
+
+          <v-card-text v-for="(item, i) in items" :key="i">
+            <v-card color="dark">
+              <v-card-title>{{ item.title }}</v-card-title>
+              <v-card-text>{{ item.body }}</v-card-text>
+            </v-card>
+          </v-card-text>
+        </page-card>
+      </v-col>
+    </v-row>
+    <br />
+    <br />
+  </v-container>
+</template>
+
+<script>
+import PageCard from "@/components/PageCard";
+export default {
+  name: "faq",
+  components: {
+    PageCard
+  },
+  mounted() {
+    for (let i = 0; i < 10; i++) {
+      this.items.push({
+        title: "How do I do a thing?",
+        body:
+          "Some other text Some other text Some other text Some other text Some other text Some other text Some other text"
+      });
+    }
+  },
+  data() {
+    return {
+      items: []
+    };
+  }
+};
+</script>
diff --git a/src/views/ForgotPassword.vue b/src/views/ForgotPassword.vue
index 9c76307..d1ff073 100644
--- a/src/views/ForgotPassword.vue
+++ b/src/views/ForgotPassword.vue
@@ -1,57 +1,72 @@
 <template>
-  <v-row align="center" justify="center">
-    <v-col cols="12" sm="8" md="4">
-      <v-card flat class="mt-12">
-        <v-toolbar color="secondary" dark flat>
-          <v-toolbar-title>Forgot password form</v-toolbar-title>
-        </v-toolbar>
-        <v-form @submit.prevent="validate" ref="form">
+  <v-container>
+    <v-row align="center" justify="center">
+      <v-col cols="12" sm="12" md="7">
+        <page-card flat class="mt-12">
+          <template #title>
+            <v-toolbar-title>Forgot password form</v-toolbar-title>
+          </template>
           <v-card-text>
-            <p>
-              Did you forget your password? Enter your parent's e-mail address
-              below. They entered this when they created your account.
-            </p>
-            <v-text-field
-              v-bind="fields.username"
-              v-model="fields.username.value"
-              :disabled="isSubmitting"
+            <form-alert
+              :message="errorMessage"
+              @dismiss="errorMessage = false"
             />
           </v-card-text>
+          <v-form @submit.prevent="validate" ref="form">
+            <v-card-text>
+              <p>
+                Did you forget your password? Enter your parent's e-mail address
+                below. They entered this when they created your account.
+              </p>
+              <v-text-field
+                color="input"
+                v-bind="fields.username"
+                v-model="fields.username.value"
+                :disabled="isSubmitting"
+              />
+            </v-card-text>
+
+            <v-card-actions>
+              <v-spacer />
+              <v-btn color="button" type="submit" dark :disabled="isSubmitting"
+                >Send Reset Password Request</v-btn
+              >
+            </v-card-actions>
+          </v-form>
+        </page-card>
+      </v-col>
+
+      <v-dialog v-model="multiple" max-width="290">
+        <v-card>
+          <v-card-title class="headline">Multiple Accounts</v-card-title>
+          <v-card-text>
+            That email address is associated with multiple accounts. Password
+            reset emails have been sent for each account. Double check the email
+            body for the username so that you reset the intended account's
+            password!
+          </v-card-text>
 
           <v-card-actions>
             <v-spacer />
-            <v-btn color="secondary" type="submit" dark :disabled="isSubmitting"
-              >Send Reset Password Request
-            </v-btn>
+            <v-btn text color="button" @click="multiple = false">OK</v-btn>
           </v-card-actions>
-        </v-form>
-      </v-card>
-    </v-col>
-
-    <v-dialog v-model="multiple" max-width="290">
-      <v-card>
-        <v-card-title class="headline">Multiple Accounts</v-card-title>
-        <v-card-text>
-          That email address is associated with multiple accounts. Password
-          reset emails have been sent for each account. Double check the email
-          body for the username so that you reset the intended account's
-          password!
-        </v-card-text>
-
-        <v-card-actions>
-          <v-spacer />
-          <v-btn text color="green" @click="multiple = false">OK</v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-  </v-row>
+        </v-card>
+      </v-dialog>
+    </v-row>
+  </v-container>
 </template>
 
 <script>
 import { auth } from "@/api";
+import PageCard from "@/components/PageCard";
+import FormAlert from "@/components/FormAlert";
 
 export default {
   name: "forgot-password",
+  components: {
+    PageCard,
+    FormAlert
+  },
   methods: {
     async submit() {
       try {
@@ -63,10 +78,7 @@ export default {
         );
       } catch (e) {
         if (e.status === 400) {
-          this.$store.dispatch(
-            "Snackbar/showError",
-            "No accounts associated with that email address."
-          );
+          this.errorMessage = "No accounts associated with that email address.";
           return;
         }
         if (e.status === 429) {
@@ -76,16 +88,10 @@ export default {
           let minutes = Math.floor(totalSeconds / 60);
           let seconds = totalSeconds % 60;
 
-          this.$store.dispatch(
-            "Snackbar/showError",
-            `Reset attempts exceeded. Try again in ${hours} hours ${minutes} minutes ${seconds} seconds.`
-          );
+          this.errorMessage = `Reset attempts exceeded. Try again in ${hours} hours ${minutes} minutes ${seconds} seconds.`;
           return;
         }
-        this.$store.dispatch(
-          "Snackbar/showError",
-          "Request failed, try again."
-        );
+        this.errorMessage = "Request failed, please try again";
       }
     },
     validate() {
@@ -98,6 +104,7 @@ export default {
     return {
       isSubmitting: false,
       multiple: false,
+      errorMessage: false,
       fields: {
         username: {
           label: "Parents E-mail",
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 4833d26..ba6cea2 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -1,52 +1,65 @@
 <template>
-  <v-row align="center" justify="center">
-    <v-col cols="12" sm="8" md="4">
-      <v-card flat class="mt-12">
-        <v-toolbar color="secondary" dark flat>
-          <v-toolbar-title>Login form</v-toolbar-title>
-        </v-toolbar>
-        <v-form @submit.prevent="validate" ref="form">
-          <v-card-text>
-            <v-text-field
-              v-bind="fields.username"
-              v-model="fields.username.value"
-              :disabled="isSubmitting"
-            />
+  <v-container>
+    <v-row align="center" justify="center">
+      <v-col cols="12" sm="12" md="7">
+        <page-card>
+          <template #title>
+            <v-toolbar-title>Login form</v-toolbar-title>
+          </template>
 
-            <v-text-field
-              v-bind="fields.password"
-              v-model="fields.password.value"
-              :disabled="isSubmitting"
+          <v-card-text>
+            <form-alert
+              :message="errorMessage"
+              @dismiss="errorMessage = false"
             />
           </v-card-text>
+          <v-form @submit.prevent="validate" ref="form">
+            <v-card-text>
+              <v-text-field
+                color="input"
+                v-bind="fields.username"
+                v-model="fields.username.value"
+                :disabled="isSubmitting"
+              />
 
-          <v-card-text>
-            <router-link :to="{ name: 'forgot-password' }"
-              >Forgot your password?</router-link
-            >
-          </v-card-text>
+              <v-text-field
+                color="input"
+                v-bind="fields.password"
+                v-model="fields.password.value"
+                :disabled="isSubmitting"
+              />
+            </v-card-text>
+
+            <v-card-text>
+              <router-link :to="{ name: 'forgot-password' }"
+                >Forgot your password?</router-link
+              >
+            </v-card-text>
 
-          <v-card-actions>
-            <v-spacer />
-            <v-btn
-              color="secondary darken-2"
-              type="submit"
-              dark
-              :disabled="isSubmitting"
-              >Sign In</v-btn
-            >
-          </v-card-actions>
-        </v-form>
-      </v-card>
-    </v-col>
-  </v-row>
+            <v-card-actions>
+              <v-spacer />
+              <v-btn color="button" type="submit" dark :disabled="isSubmitting"
+                >Sign In</v-btn
+              >
+            </v-card-actions>
+          </v-form>
+        </page-card>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script>
 import { auth } from "@/api";
+import PageCard from "@/components/PageCard";
+import FormAlert from "@/components/FormAlert";
 
 export default {
   name: "login",
+  components: {
+    PageCard,
+    FormAlert
+  },
   methods: {
     async submit() {
       if (this.isSubmitting) {
@@ -59,10 +72,9 @@ export default {
           this.fields.password.value
         );
         localStorage.setItem("lastUsername", this.fields.username.value);
-        this.$store.dispatch("Snackbar/showInfo", "Successfully Logged In");
         this.$router.push({ name: "quiz" });
       } catch (err) {
-        this.$store.dispatch("Snackbar/showError", err);
+        this.errorMessage = err.message;
       }
       this.isSubmitting = false;
     },
@@ -75,11 +87,12 @@ export default {
   data() {
     return {
       isSubmitting: false,
+      errorMessage: "",
       fields: {
         username: {
           label: "Username",
           type: "text",
-          value: localStorage.getItem("lastEmail"),
+          value: localStorage.getItem("lastUsername"),
           rules: [v => !!v || "Please provide a username"]
         },
         password: {
diff --git a/src/views/Quiz/Quiz.vue b/src/views/Quiz/Quiz.vue
index b94a716..605b11c 100644
--- a/src/views/Quiz/Quiz.vue
+++ b/src/views/Quiz/Quiz.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mt-6">
+  <v-container fluid>
     <v-row justify="center">
       <quiz-scroll>
         <template v-slot:title>Level {{ rank }}</template>
@@ -11,7 +11,7 @@
       <quiz-answer :rank="rank" @next="onNext" />
     </v-row>
     <quiz-need-help />
-  </div>
+  </v-container>
 </template>
 
 <script>
diff --git a/src/views/Quiz/QuizAnswer.vue b/src/views/Quiz/QuizAnswer.vue
index 661c2c7..b9b625d 100644
--- a/src/views/Quiz/QuizAnswer.vue
+++ b/src/views/Quiz/QuizAnswer.vue
@@ -4,13 +4,15 @@
       <img src="/images/dragon1.png" />
       <v-card-text>
         <v-form ref="form" @submit.prevent="submit">
-          <v-text-field
-            autocomplete="off"
-            v-model="fields.answer.value"
-            v-bind="fields.answer"
-            :disabled="isDisabled"
-            @blur="onBlur"
-          />
+          <div class="text-field">
+            <v-text-field
+              autocomplete="off"
+              v-model="fields.answer.value"
+              v-bind="fields.answer"
+              :disabled="isDisabled"
+              @blur="onBlur"
+            />
+          </div>
 
           <v-btn
             x-large
@@ -69,10 +71,10 @@
     <v-dialog v-model="showRateLimitModal" persistent max-width="400">
       <v-card>
         <v-card-title class="headline">Woah slow down!</v-card-title>
-        <v-card-text
-          >We noticed you are submitting a lot of requests. Please wait 60
-          seconds before submitting another answer.</v-card-text
-        >
+        <v-card-text>
+          We noticed you are submitting a lot of requests. Please wait 60
+          seconds before submitting another answer.
+        </v-card-text>
         <v-card-actions>
           <v-btn
             block
@@ -138,8 +140,16 @@ export default {
   data() {
     return {
       successMessages: [
-        "Your coding skills are quite admirable. ",
-        "You really are the best. "
+        "Your coding skills are quite admirable.",
+        "You are wiser than you look.",
+        "The dragon senses you getting closer.",
+        "Your perseverance is impressive.",
+        "One step closer to battling the dragon.",
+        "Keep going, the dragon awaits you.",
+        "Go to the next level, young Pilgrim!",
+        "You may continue on your coding journey.",
+        "The grand prize could be yours.",
+        "You must be the hero we're seeking."
       ],
       isSubmitting: false,
       wasCorrect: false,
diff --git a/src/views/Quiz/QuizFinalQuestion.vue b/src/views/Quiz/QuizFinalQuestion.vue
index 6efdfd4..2ed5809 100644
--- a/src/views/Quiz/QuizFinalQuestion.vue
+++ b/src/views/Quiz/QuizFinalQuestion.vue
@@ -3,7 +3,10 @@
     <v-container>
       <v-row justify="center">
         <v-col>
-          <v-card>
+          <page-card>
+            <template #title>
+              <v-toolbar-title>Final Question</v-toolbar-title>
+            </template>
             <br />
             <v-card-text v-html="question"></v-card-text>
             <v-card-title>Code your answer!</v-card-title>
@@ -61,9 +64,11 @@
                 >
               </v-card-actions>
             </v-form>
-          </v-card>
+          </page-card>
         </v-col>
       </v-row>
+      <br />
+      <br />
     </v-container>
     <!-- <quiz-need-help /> -->
   </div>
@@ -71,13 +76,15 @@
 
 <script>
 import CodeEditor from "./CodeEditor";
+import PageCard from "@/components/PageCard";
 import * as api from "@/api";
 import { User, Quiz } from "@/store";
 
 export default {
   name: "quiz",
   components: {
-    CodeEditor
+    CodeEditor,
+    PageCard
   },
   data() {
     const jsCode = `function calculateAnswer(){
diff --git a/src/views/Quiz/QuizIntro.vue b/src/views/Quiz/QuizIntro.vue
index 80f22ac..e63cb17 100644
--- a/src/views/Quiz/QuizIntro.vue
+++ b/src/views/Quiz/QuizIntro.vue
@@ -9,7 +9,7 @@
             <iframe
               width="400px"
               height="300px"
-              src="https://www.youtube.com/embed/Fk8zykXuR5k"
+              src="https://www.youtube.com/embed/G1LcHvSJL8M"
               frameborder="0"
               allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
               allowfullscreen
diff --git a/src/views/Register/DateOfBirthField.vue b/src/views/Register/DateOfBirthField.vue
index ceec36b..ca5eefa 100644
--- a/src/views/Register/DateOfBirthField.vue
+++ b/src/views/Register/DateOfBirthField.vue
@@ -13,6 +13,7 @@
   >
     <template v-slot:activator="{ on }">
       <v-text-field
+        color="input"
         autocomplete="off"
         v-model="formattedDate"
         :label="label"
diff --git a/src/views/Register/Step1.vue b/src/views/Register/Step1.vue
index 5128d91..19ccf63 100644
--- a/src/views/Register/Step1.vue
+++ b/src/views/Register/Step1.vue
@@ -1,22 +1,30 @@
 <template>
   <v-form @submit.prevent="validate" ref="form" v-model="isValid">
     <v-card-text>
+      <p>
+        Welcome to the CodeWizardsHQ Code Challenge. To begin your journey you
+        must first create your account.
+      </p>
       <v-text-field
+        color="input"
         v-bind="fields.username"
         v-model="fields.username.value"
         :disabled="isSubmitting"
       />
       <v-text-field
+        color="input"
         v-bind="fields.parentEmail"
         v-model="fields.parentEmail.value"
         :disabled="isSubmitting"
       />
       <v-text-field
+        color="input"
         v-bind="fields.password"
         v-model="fields.password.value"
         :disabled="isSubmitting"
       />
       <v-text-field
+        color="input"
         v-bind="fields.passwordConfirm"
         v-model="fields.passwordConfirm.value"
         :disabled="isSubmitting"
@@ -25,7 +33,7 @@
 
     <v-card-actions>
       <v-spacer />
-      <v-btn color="secondary darken-2" type="submit" :disabled="isSubmitting">
+      <v-btn color="button" type="submit" :disabled="isSubmitting">
         Next
         <v-progress-circular
           size="14"
diff --git a/src/views/Register/Step2.vue b/src/views/Register/Step2.vue
index 3eb2a14..aee26b9 100644
--- a/src/views/Register/Step2.vue
+++ b/src/views/Register/Step2.vue
@@ -4,6 +4,7 @@
       <v-row no-gutters>
         <v-col>
           <v-text-field
+            color="input"
             v-bind="fields.firstName"
             v-model="fields.firstName.value"
             :disabled="isSubmitting"
@@ -11,6 +12,7 @@
         </v-col>
         <v-col>
           <v-text-field
+            color="input"
             v-bind="fields.lastName"
             v-model="fields.lastName.value"
             :disabled="isSubmitting"
@@ -18,6 +20,7 @@
         </v-col>
       </v-row>
       <v-text-field
+        color="input"
         v-bind="fields.studentEmail"
         v-model="fields.studentEmail.value"
         :disabled="isSubmitting"
@@ -38,6 +41,7 @@
         </p>
         <v-switch
           v-model="hasParentConsent"
+          color="button"
           class="mx-2"
           :rules="[
             v =>
@@ -57,13 +61,13 @@
 
     <v-card-actions>
       <v-btn
-        color="secondary darken-2"
+        color="button"
         @click="() => $emit('back')"
         :disabled="isSubmitting"
         >Back</v-btn
       >
       <v-spacer />
-      <v-btn color="secondary darken-2" type="submit" :disabled="isSubmitting">
+      <v-btn color="button" type="submit" :disabled="isSubmitting">
         Next
         <v-progress-circular
           size="14"
diff --git a/src/views/Register/Step3.vue b/src/views/Register/Step3.vue
index 0ead2f6..cac10da 100644
--- a/src/views/Register/Step3.vue
+++ b/src/views/Register/Step3.vue
@@ -2,7 +2,7 @@
   <v-form @submit.prevent="validate" ref="form" v-model="isValid">
     <v-card-text>
       <v-card max-height="500" style="overflow-y:scroll;">
-        <v-card-text>
+        <v-card-text class="tos-text">
           <terms-of-service-content />
         </v-card-text>
       </v-card>
@@ -11,21 +11,29 @@
     <v-row>
       <v-col cols="7"></v-col>
       <v-col>
-        <v-switch v-model="fields.tos.value" v-bind="fields.tos"></v-switch>
-        <v-switch v-model="fields.tos2.value" v-bind="fields.tos2"></v-switch>
+        <v-switch
+          color="button"
+          v-model="fields.tos.value"
+          v-bind="fields.tos"
+        ></v-switch>
+        <v-switch
+          color="button"
+          v-model="fields.tos2.value"
+          v-bind="fields.tos2"
+        ></v-switch>
       </v-col>
     </v-row>
 
     <v-card-actions>
       <v-btn
-        color="secondary darken-2"
+        color="button"
         @click="() => $emit('back')"
         :disabled="isSubmitting"
         >Back</v-btn
       >
       <v-spacer />
       <v-btn
-        color="secondary darken-2"
+        color="button"
         type="submit"
         :disabled="
           isSubmitting ||
@@ -77,3 +85,11 @@ export default {
   }
 };
 </script>
+
+<style lang="scss" scoped>
+.tos-text {
+  background-color: rgba(255, 255, 255, 0.9);
+  font-family: "Barlow", sans-serif;
+  color: #333 !important;
+}
+</style>
diff --git a/src/views/Register/index.vue b/src/views/Register/index.vue
index 56af70d..753404a 100644
--- a/src/views/Register/index.vue
+++ b/src/views/Register/index.vue
@@ -1,47 +1,59 @@
 <template>
-  <v-row align="center" justify="center">
-    <v-col cols="12" sm="8" md="8">
-      <v-card flat class="mt-12">
-        <v-toolbar color="secondary" dark flat>
-          <v-toolbar-title>Create Your Account</v-toolbar-title>
-        </v-toolbar>
-        <v-stepper v-model="stepperIndex">
-          <v-stepper-header class="elevation-0">
-            <v-stepper-step :complete="stepperIndex > 1" step="1"
-              >Account Details</v-stepper-step
-            >
+  <v-container>
+    <v-row align="center" justify="center">
+      <v-col cols="12" lg="10">
+        <page-card>
+          <template #title>
+            <v-toolbar-title>Create Your Account</v-toolbar-title>
+          </template>
 
-            <v-divider></v-divider>
+          <v-stepper v-model="stepperIndex">
+            <v-stepper-header class="elevation-0">
+              <v-stepper-step
+                color="button"
+                :complete="stepperIndex > 1"
+                step="1"
+                >Account Details</v-stepper-step
+              >
 
-            <v-stepper-step :complete="stepperIndex > 2" step="2"
-              >Student Details</v-stepper-step
-            >
+              <v-divider></v-divider>
 
-            <v-divider></v-divider>
+              <v-stepper-step
+                color="button"
+                :complete="stepperIndex > 2"
+                step="2"
+                >Student Details</v-stepper-step
+              >
 
-            <v-stepper-step step="3">Terms Of Use</v-stepper-step>
-          </v-stepper-header>
+              <v-divider></v-divider>
 
-          <v-stepper-items>
-            <v-stepper-content step="1">
-              <step-1 :fields="fields" @submit="submit1" />
-            </v-stepper-content>
+              <v-stepper-step color="button" step="3"
+                >Terms Of Use</v-stepper-step
+              >
+            </v-stepper-header>
 
-            <v-stepper-content step="2">
-              <step-2 :fields="fields" @back="back" @submit="submit2" />
-            </v-stepper-content>
+            <v-stepper-items>
+              <v-stepper-content step="1">
+                <step-1 :fields="fields" @submit="submit1" />
+              </v-stepper-content>
 
-            <v-stepper-content step="3">
-              <step-3 :fields="fields" @back="back" @submit="submit3" />
-            </v-stepper-content>
-          </v-stepper-items>
-        </v-stepper>
-      </v-card>
-    </v-col>
-  </v-row>
+              <v-stepper-content step="2">
+                <step-2 :fields="fields" @back="back" @submit="submit2" />
+              </v-stepper-content>
+
+              <v-stepper-content step="3">
+                <step-3 :fields="fields" @back="back" @submit="submit3" />
+              </v-stepper-content>
+            </v-stepper-items>
+          </v-stepper>
+        </page-card>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script>
+import PageCard from "@/components/PageCard";
 import Step1 from "./Step1";
 import Step2 from "./Step2";
 import Step3 from "./Step3";
@@ -51,7 +63,8 @@ export default {
   components: {
     Step1,
     Step2,
-    Step3
+    Step3,
+    PageCard
   },
   methods: {
     back() {
diff --git a/src/views/ResetPassword.vue b/src/views/ResetPassword.vue
index b839c05..5e15bbc 100644
--- a/src/views/ResetPassword.vue
+++ b/src/views/ResetPassword.vue
@@ -1,43 +1,59 @@
 <template>
-  <v-row align="center" justify="center">
-    <v-col cols="12" sm="8" md="4">
-      <v-card flat class="mt-12">
-        <v-toolbar color="secondary" dark flat>
-          <v-toolbar-title>Password reset form</v-toolbar-title>
-        </v-toolbar>
-        <v-form @submit.prevent="validate" ref="form">
+  <v-container>
+    <v-row align="center" justify="center">
+      <v-col cols="12" sm="12" md="7">
+        <page-card flat class="mt-12">
+          <template #title>
+            <v-toolbar-title>Password reset form</v-toolbar-title>
+          </template>
           <v-card-text>
-            <p>Create a new password.</p>
-
-            <v-text-field
-              v-bind="fields.password"
-              v-model="fields.password.value"
-              :disabled="isSubmitting"
-            />
-            <v-text-field
-              v-bind="fields.passwordConfirm"
-              v-model="fields.passwordConfirm.value"
-              :disabled="isSubmitting"
+            <form-alert
+              :message="errorMessage"
+              @dismiss="errorMessage = false"
             />
           </v-card-text>
+          <v-form @submit.prevent="validate" ref="form">
+            <v-card-text>
+              <p>Create a new password.</p>
+
+              <v-text-field
+                color="input"
+                v-bind="fields.password"
+                v-model="fields.password.value"
+                :disabled="isSubmitting"
+              />
+              <v-text-field
+                color="input"
+                v-bind="fields.passwordConfirm"
+                v-model="fields.passwordConfirm.value"
+                :disabled="isSubmitting"
+              />
+            </v-card-text>
 
-          <v-card-actions>
-            <v-spacer />
-            <v-btn color="secondary" type="submit" dark :disabled="isSubmitting"
-              >Reset Password</v-btn
-            >
-          </v-card-actions>
-        </v-form>
-      </v-card>
-    </v-col>
-  </v-row>
+            <v-card-actions>
+              <v-spacer />
+              <v-btn color="button" type="submit" dark :disabled="isSubmitting"
+                >Reset Password</v-btn
+              >
+            </v-card-actions>
+          </v-form>
+        </page-card>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script>
 import { auth } from "@/api";
+import PageCard from "@/components/PageCard";
+import FormAlert from "@/components/FormAlert";
 
 export default {
   name: "reset-password",
+  components: {
+    PageCard,
+    FormAlert
+  },
   created() {
     if (!this.$route.params.token) {
       this.$store.dispatch(
@@ -54,13 +70,14 @@ export default {
           this.$route.params.token,
           this.fields.password.value
         );
+
         this.$store.dispatch(
           "Snackbar/showInfo",
           "Password reset successfully. You may now login."
         );
         this.$router.push({ name: "login" });
       } catch (e) {
-        this.$store.dispatch("Snackbar/showError", "Request failed");
+        this.errorMessage = "Request Failed";
       }
     },
     validate() {
@@ -71,6 +88,7 @@ export default {
   },
   data() {
     return {
+      errorMessage: false,
       isSubmitting: false,
       fields: {
         password: {
diff --git a/src/views/Voting/Ballot.vue b/src/views/Voting/Ballot.vue
new file mode 100644
index 0000000..f535ad8
--- /dev/null
+++ b/src/views/Voting/Ballot.vue
@@ -0,0 +1,17 @@
+<template>
+  <div />
+</template>
+
+<script>
+import { voting } from "@/api";
+
+export default {
+  async mounted() {
+    try {
+      await voting.getBallot();
+    } catch (err) {
+      this.$router.push({ name: "home" });
+    }
+  }
+};
+</script>
diff --git a/src/views/Voting/Leaderboard.vue b/src/views/Voting/Leaderboard.vue
new file mode 100644
index 0000000..92b628b
--- /dev/null
+++ b/src/views/Voting/Leaderboard.vue
@@ -0,0 +1,7 @@
+<template>
+  <div />
+</template>
+
+<script>
+export default {};
+</script>
diff --git a/yarn.lock b/yarn.lock
index 7202fef..c46dc4e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8487,6 +8487,13 @@ vue-loader@^15.7.0:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-marquee-text-component@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/vue-marquee-text-component/-/vue-marquee-text-component-1.1.1.tgz#c5ce3eea76d340afdae37424b555ef6840a8c4cd"
+  integrity sha512-ei3OrX6uKPtm+H9GbAlJL3NqTJxXoQsbAMcmuao56Z8rH2mlFkYSGrJGDsX8wyQ/IQtYgMSuf50kaH2mQx8DSQ==
+  dependencies:
+    vue "^2.5.17"
+
 vue-moment@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/vue-moment/-/vue-moment-4.1.0.tgz#092a8ff723a96c6f85a0a8e23ad30f0bf320f3b0"
@@ -8525,6 +8532,11 @@ vue-the-mask@^0.11.1:
   resolved "https://registry.yarnpkg.com/vue-the-mask/-/vue-the-mask-0.11.1.tgz#91ee01008354ae57bccc79bb61b65f32d971d9d5"
   integrity sha512-UquSfnSWejD0zAfcD+3jJ1chUAkOAyoxya9Lxh9acCRtrlmGcAIvd0cQYraWqKenbuZJUdum+S174atv2AuEHQ==
 
+vue@^2.5.17:
+  version "2.6.11"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
+  integrity sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==
+
 vue@^2.6.10:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"