diff --git a/src/components/MobileWarning.vue b/src/components/MobileWarning.vue
new file mode 100644
index 0000000..dda3820
--- /dev/null
+++ b/src/components/MobileWarning.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="mobile-warning" v-if="show">
+    <img src="/images/logo-small.png" class="mt-6 mb-6" />
+    <h2 class="mb-3">Come back on your desktop!</h2>
+    <p class="pa-10">
+      Our Coding Challenge platform was not created for mobile phones. Please visit challenge.codewizardshq.com from your desktop for the best experience.
+    </p>
+    <v-btn color="button" @click="show = false">Show me anyways</v-btn>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      show: true
+    };
+  }
+};
+</script>
diff --git a/src/components/SocialPopOver.vue b/src/components/SocialPopOver.vue
index 26307bc..360beb9 100644
--- a/src/components/SocialPopOver.vue
+++ b/src/components/SocialPopOver.vue
@@ -48,7 +48,8 @@ export default {
       },
       {
         icon: "email",
-        to: "mailto:?subject=Join%20me%20in%20the%20CodeWizardsHQ%20Code%20Challenge!"
+        to:
+          "mailto:?subject=Join%20me%20in%20the%20CodeWizardsHQ%20Code%20Challenge!"
       }
     ]
   })
diff --git a/src/components/Toolbars/QuizBar.vue b/src/components/Toolbars/QuizBar.vue
index 224e955..1623d48 100644
--- a/src/components/Toolbars/QuizBar.vue
+++ b/src/components/Toolbars/QuizBar.vue
@@ -37,13 +37,19 @@
               <a href="#" v-on="menu">Get Help</a>
             </template>
             <v-list class="list">
-              <v-list-item href="https://codewizardshq.com/challenge" target="_blank">
+              <v-list-item
+                href="https://codewizardshq.com/challenge"
+                target="_blank"
+              >
                 <v-list-item-title>Check The FAQ</v-list-item-title>
               </v-list-item>
               <v-list-item href="https://discord.gg/HKnpzjQ" 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/events/501020200554546/" target="_blank">
+              <v-list-item
+                href="https://www.facebook.com/events/501020200554546/"
+                target="_blank"
+              >
                 <v-list-item-title>Get Help On Facebook</v-list-item-title>
               </v-list-item>
             </v-list>
@@ -63,9 +69,9 @@
 </template>
 
 <script>
-  import {Quiz, User} from "@/store";
+import { Quiz, User } from "@/store";
 
-  export default {
+export default {
   name: "quizBar",
   computed: {
     ...User.mapState(),
diff --git a/src/plugins/router.js b/src/plugins/router.js
index 6ef0b6e..5088312 100644
--- a/src/plugins/router.js
+++ b/src/plugins/router.js
@@ -1,6 +1,6 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
-import {auth} from "@/api";
+import { auth } from "@/api";
 import store from "@/store";
 
 Vue.use(VueRouter);
@@ -47,7 +47,8 @@ const routes = [
       {
         path: "frequently-asked-questions",
         name: "faq",
-        beforeEnter: () => window.location = "https://codewizardshq.com/challenge"
+        beforeEnter: () =>
+          (window.location = "https://codewizardshq.com/challenge")
       }
     ]
   },
diff --git a/src/store/quiz.js b/src/store/quiz.js
index d4a220d..53af4d3 100644
--- a/src/store/quiz.js
+++ b/src/store/quiz.js
@@ -1,33 +1,33 @@
-import { mapState } from 'vuex';
-import { quiz } from '@/api';
-import moment from 'moment';
-import Vue from 'vue';
+import { mapState } from "vuex";
+import { quiz } from "@/api";
+import moment from "moment";
+import Vue from "vue";
 
-moment.updateLocale('en', {
+moment.updateLocale("en", {
   relativeTime: {
-    future: 'in %s',
-    past: '%s ago',
-    s: 'a few seconds',
-    ss: '%d seconds',
-    m: 'a minute',
-    mm: '%d minutes',
-    h: 'an hour',
-    hh: '%d hours',
-    d: 'a day',
-    dd: '%d days',
-    M: 'one month',
-    MM: '%d months',
-    y: 'a year',
-    yy: '%d years'
+    future: "in %s",
+    past: "%s ago",
+    s: "a few seconds",
+    ss: "%d seconds",
+    m: "a minute",
+    mm: "%d minutes",
+    h: "an hour",
+    hh: "%d hours",
+    d: "a day",
+    dd: "%d days",
+    M: "one month",
+    MM: "%d months",
+    y: "a year",
+    yy: "%d years"
   }
 });
 
-const moduleName = 'Quiz';
+const moduleName = "Quiz";
 
 function parseDateResponse(dateResponse) {
-  const timeSplit = dateResponse.split(',');
-  let daysString = '0 days';
-  let timeString = '0:0:0';
+  const timeSplit = dateResponse.split(",");
+  let daysString = "0 days";
+  let timeString = "0:0:0";
 
   if (timeSplit.length == 1) {
     // returning only timeString
@@ -37,18 +37,18 @@ function parseDateResponse(dateResponse) {
     daysString = timeSplit[0];
     timeString = timeSplit[1];
   } else {
-    throw new Error('Unexpected error with time response');
+    throw new Error("Unexpected error with time response");
   }
   const days = parseInt(daysString);
-  const time = timeString.split(':');
+  const time = timeString.split(":");
   const hours = time[0];
   const minutes = time[1];
   const seconds = time[2];
   return moment()
-    .add(days, 'days')
-    .add(hours, 'hours')
-    .add(minutes, 'minutes')
-    .add(seconds, 'seconds');
+    .add(days, "days")
+    .add(hours, "hours")
+    .add(minutes, "minutes")
+    .add(seconds, "seconds");
 }
 
 function getDefaultState() {
@@ -56,13 +56,15 @@ function getDefaultState() {
     hasSeenIntro: false,
     nextUnlockMoment: moment(),
     quizStartedMoment: moment(),
-    question: '',
-    asset: '',
+    question: "",
+    asset: "",
     rank: 0,
     maxRank: 0,
     isLastQuestion: false,
-    hints: ['', ''],
-    wrongCount: localStorage.getItem('wrongCount') ? parseInt(localStorage.getItem('wrongCount')) : 0,
+    hints: ["", ""],
+    wrongCount: localStorage.getItem("wrongCount")
+      ? parseInt(localStorage.getItem("wrongCount"))
+      : 0,
     quizHasStarted: false,
     quizHasEnded: false,
     awaitNextQuestion: false
@@ -75,38 +77,41 @@ const state = {
 
 const actions = {
   async reset({ commit }) {
-    commit('reset');
+    commit("reset");
   },
   async markAsSeen({ commit }) {
-    commit('hasSeenIntro', true);
+    commit("hasSeenIntro", true);
   },
   async addWrongCount({ state, commit }) {
-    commit('wrongCount', state.wrongCount + 1);
+    commit("wrongCount", state.wrongCount + 1);
   },
   async clearWrongCount({ commit }) {
-    commit('wrongCount', 0);
+    commit("wrongCount", 0);
   },
   async refresh({ state, commit }) {
     // get current rank and see if quiz has started
     try {
       const rank = await quiz.getRank();
-      commit('maxRank', rank.maxRank);
-      commit('quizStartedMoment', moment(rank.startsOn + '+0000', 'MM/DD/YYYY HH:mm   Z'));
+      commit("maxRank", rank.maxRank);
+      commit(
+        "quizStartedMoment",
+        moment(rank.startsOn + "+0000", "MM/DD/YYYY HH:mm   Z")
+      );
       if (rank.rank < 0) {
-        commit('quizHasStarted', false);
-        commit('awaitNextQuestion', false);
-        commit('question', '');
-        commit('asset', '');
-        commit('rank', 0);
-        commit('hints', ['', '']);
-        commit('nextUnlockMoment', parseDateResponse(rank.timeUntilNextRank));
+        commit("quizHasStarted", false);
+        commit("awaitNextQuestion", false);
+        commit("question", "");
+        commit("asset", "");
+        commit("rank", 0);
+        commit("hints", ["", ""]);
+        commit("nextUnlockMoment", parseDateResponse(rank.timeUntilNextRank));
         return;
       }
-      commit('quizHasStarted', true);
-      commit('rank', rank.rank);
+      commit("quizHasStarted", true);
+      commit("rank", rank.rank);
     } catch (err) {
       if (err.status === 403) {
-        commit('quizHasEnded', true);
+        commit("quizHasEnded", true);
         return;
       }
       throw new Error(err);
@@ -115,26 +120,29 @@ const actions = {
     // get current question and see if question is even unlocked
     try {
       const response = await quiz.getQuestion();
-      commit('awaitNextQuestion', false);
-      commit('question', response.question);
-      commit('asset', response.asset);
-      commit('rank', response.rank);
-      commit('hints', response.hints);
-      commit('nextUnlockMoment', moment());
-      commit('isLastQuestion', response.rank === state.maxRank);
+      commit("awaitNextQuestion", false);
+      commit("question", response.question);
+      commit("asset", response.asset);
+      commit("rank", response.rank);
+      commit("hints", response.hints);
+      commit("nextUnlockMoment", moment());
+      commit("isLastQuestion", response.rank === state.maxRank);
     } catch (err) {
       if (err.status === 404) {
-        commit('awaitNextQuestion', true);
-        commit('question', '');
-        commit('asset', '');
-        commit('rank', 0);
-        commit('hints', ['', '']);
-        commit('nextUnlockMoment', parseDateResponse(err.data.timeUntilNextRank));
+        commit("awaitNextQuestion", true);
+        commit("question", "");
+        commit("asset", "");
+        commit("rank", 0);
+        commit("hints", ["", ""]);
+        commit(
+          "nextUnlockMoment",
+          parseDateResponse(err.data.timeUntilNextRank)
+        );
       } else if (err.status === 401) {
-        commit('question', '');
-        commit('asset', '');
-        commit('rank', 0);
-        commit('hints', ['', '']);
+        commit("question", "");
+        commit("asset", "");
+        commit("rank", 0);
+        commit("hints", ["", ""]);
       } else {
         return Promise.reject(err);
       }
@@ -169,7 +177,7 @@ const mutations = {
   },
   wrongCount(state, value) {
     state.wrongCount = value;
-    localStorage.setItem('wrongCount', state.wrongCount);
+    localStorage.setItem("wrongCount", state.wrongCount);
   },
   hints(state, value) {
     state.hints = value;
diff --git a/src/styles/mobile-warning.scss b/src/styles/mobile-warning.scss
new file mode 100644
index 0000000..b65506d
--- /dev/null
+++ b/src/styles/mobile-warning.scss
@@ -0,0 +1,18 @@
+.mobile-warning {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #21252d;
+  color: white;
+  z-index: 10000;
+  text-align: center;
+  display: block;
+}
+
+@media (min-width: 600px) {
+  .mobile-warning {
+    display: none !important;
+  }
+}
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index c5d9c4c..8f022af 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -14,6 +14,7 @@
   @import "./ballot-card.scss";
   @import "./ballot-modal.scss";
   @import "./buttons.scss";
+  @import "./mobile-warning.scss";
 
   .v-alert {
     font-size: 20px;
diff --git a/src/views/Accounts/Register/Step2.vue b/src/views/Accounts/Register/Step2.vue
index d895cfe..0efe1a3 100644
--- a/src/views/Accounts/Register/Step2.vue
+++ b/src/views/Accounts/Register/Step2.vue
@@ -3,14 +3,34 @@
     <v-card-text>
       <v-row no-gutters>
         <v-col>
-          <v-text-field class="mr-5" color="input" v-bind="fields.firstName" v-model="fields.firstName.value" :disabled="isSubmitting" />
+          <v-text-field
+            class="mr-5"
+            color="input"
+            v-bind="fields.firstName"
+            v-model="fields.firstName.value"
+            :disabled="isSubmitting"
+          />
         </v-col>
         <v-col>
-          <v-text-field color="input" v-bind="fields.lastName" v-model="fields.lastName.value" :disabled="isSubmitting" />
+          <v-text-field
+            color="input"
+            v-bind="fields.lastName"
+            v-model="fields.lastName.value"
+            :disabled="isSubmitting"
+          />
         </v-col>
       </v-row>
-      <v-text-field color="input" v-bind="fields.studentEmail" v-model="fields.studentEmail.value" :disabled="isSubmitting" />
-      <v-select v-bind="fields.age" v-model="fields.age.value" :disabled="isSubmitting" />
+      <v-text-field
+        color="input"
+        v-bind="fields.studentEmail"
+        v-model="fields.studentEmail.value"
+        :disabled="isSubmitting"
+      />
+      <v-select
+        v-bind="fields.age"
+        v-model="fields.age.value"
+        :disabled="isSubmitting"
+      />
       <!-- <date-of-birth-field
         :label="fields.dateOfBirth.label"
         v-model="fields.dateOfBirth.value"
@@ -21,13 +41,19 @@
       <v-alert colored-border icon="mdi-firework">
         You are not 13 years of age.
         <p>
-          In order to continue with the code challenge you must have your parent's permission. Have your parent or guardian complete the rest of this page.
+          In order to continue with the code challenge you must have your
+          parent's permission. Have your parent or guardian complete the rest of
+          this page.
         </p>
         <v-switch
           v-model="hasParentConsent"
           color="button"
           class="mx-2"
-          :rules="[v => !!v || 'Please have your parent or guardian review this form before continuing']"
+          :rules="[
+            v =>
+              !!v ||
+              'Please have your parent or guardian review this form before continuing'
+          ]"
           :label="
             'I, the parent or guardian of ' +
               this.fields.firstName.value +
@@ -40,11 +66,21 @@
     </v-card-text>
 
     <v-card-actions>
-      <v-btn color="button" @click="() => $emit('back')" :disabled="isSubmitting">Back</v-btn>
+      <v-btn
+        color="button"
+        @click="() => $emit('back')"
+        :disabled="isSubmitting"
+        >Back</v-btn
+      >
       <v-spacer />
       <v-btn color="button" type="submit" :disabled="isSubmitting">
         Next
-        <v-progress-circular size="14" class="ml-3" indeterminate v-if="isSubmitting" />
+        <v-progress-circular
+          size="14"
+          class="ml-3"
+          indeterminate
+          v-if="isSubmitting"
+        />
       </v-btn>
     </v-card-actions>
   </v-form>
@@ -52,11 +88,11 @@
 
 <script>
 export default {
-  name: 'register-step-2',
-  props: ['fields'],
+  name: "register-step-2",
+  props: ["fields"],
   computed: {
     needsParentConsent() {
-      return this.fields.age.value === '12 years old or lower';
+      return this.fields.age.value === "12 years old or lower";
     }
   },
   methods: {
@@ -68,7 +104,7 @@ export default {
       const cb = () => {
         this.isSubmitting = false;
       };
-      this.$emit('submit', cb);
+      this.$emit("submit", cb);
     },
     validate() {
       if (this.$refs.form.validate()) {
diff --git a/src/views/Accounts/Register/Step3.vue b/src/views/Accounts/Register/Step3.vue
index b6ff203..ff704e5 100644
--- a/src/views/Accounts/Register/Step3.vue
+++ b/src/views/Accounts/Register/Step3.vue
@@ -3,21 +3,47 @@
     <v-card-text>
       <v-row no-gutters>
         <v-col>
-          <v-text-field class="mr-5" color="input" v-bind="fields.parentFirstName" v-model="fields.parentFirstName.value" :disabled="isSubmitting" />
+          <v-text-field
+            class="mr-5"
+            color="input"
+            v-bind="fields.parentFirstName"
+            v-model="fields.parentFirstName.value"
+            :disabled="isSubmitting"
+          />
         </v-col>
         <v-col>
-          <v-text-field color="input" v-bind="fields.parentLastName" v-model="fields.parentLastName.value" :disabled="isSubmitting" />
+          <v-text-field
+            color="input"
+            v-bind="fields.parentLastName"
+            v-model="fields.parentLastName.value"
+            :disabled="isSubmitting"
+          />
         </v-col>
       </v-row>
-      <v-text-field color="input" v-bind="fields.parentEmail" v-model="fields.parentEmail.value" :disabled="isSubmitting" />
+      <v-text-field
+        color="input"
+        v-bind="fields.parentEmail"
+        v-model="fields.parentEmail.value"
+        :disabled="isSubmitting"
+      />
     </v-card-text>
 
     <v-card-actions>
-      <v-btn color="button" @click="() => $emit('back')" :disabled="isSubmitting">Back</v-btn>
+      <v-btn
+        color="button"
+        @click="() => $emit('back')"
+        :disabled="isSubmitting"
+        >Back</v-btn
+      >
       <v-spacer />
       <v-btn color="button" type="submit" :disabled="isSubmitting">
         Next
-        <v-progress-circular size="14" class="ml-3" indeterminate v-if="isSubmitting" />
+        <v-progress-circular
+          size="14"
+          class="ml-3"
+          indeterminate
+          v-if="isSubmitting"
+        />
       </v-btn>
     </v-card-actions>
   </v-form>
@@ -25,8 +51,8 @@
 
 <script>
 export default {
-  name: 'register-step-3',
-  props: ['fields'],
+  name: "register-step-3",
+  props: ["fields"],
   components: {},
   methods: {
     async submit() {
@@ -37,7 +63,7 @@ export default {
       const cb = () => {
         this.isSubmitting = false;
       };
-      this.$emit('submit', cb);
+      this.$emit("submit", cb);
     },
     validate() {
       if (this.$refs.form.validate()) {
diff --git a/src/views/Accounts/Register/index.vue b/src/views/Accounts/Register/index.vue
index 4a9d91a..5c6dc30 100644
--- a/src/views/Accounts/Register/index.vue
+++ b/src/views/Accounts/Register/index.vue
@@ -9,19 +9,36 @@
 
           <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
+                color="button"
+                :complete="stepperIndex > 1"
+                step="1"
+                >Account Details</v-stepper-step
+              >
 
               <v-divider></v-divider>
 
-              <v-stepper-step color="button" :complete="stepperIndex > 2" step="2">Student Details</v-stepper-step>
+              <v-stepper-step
+                color="button"
+                :complete="stepperIndex > 2"
+                step="2"
+                >Student Details</v-stepper-step
+              >
 
               <v-divider></v-divider>
 
-              <v-stepper-step color="button" :complete="stepperIndex > 3" step="3">Parent Details</v-stepper-step>
+              <v-stepper-step
+                color="button"
+                :complete="stepperIndex > 3"
+                step="3"
+                >Parent Details</v-stepper-step
+              >
 
               <v-divider></v-divider>
 
-              <v-stepper-step color="button" step="4">Terms Of Use</v-stepper-step>
+              <v-stepper-step color="button" step="4"
+                >Terms Of Use</v-stepper-step
+              >
             </v-stepper-header>
 
             <v-stepper-items>
@@ -49,13 +66,13 @@
 </template>
 
 <script>
-import PageCard from '@/components/PageCard';
-import Step1 from './Step1';
-import Step2 from './Step2';
-import Step3 from './Step3';
-import Step4 from './Step4';
+import PageCard from "@/components/PageCard";
+import Step1 from "./Step1";
+import Step2 from "./Step2";
+import Step3 from "./Step3";
+import Step4 from "./Step4";
 
-import * as api from '@/api';
+import * as api from "@/api";
 
 export default {
   components: {
@@ -83,7 +100,10 @@ export default {
       this.isSubmitting = true;
       try {
         await api.auth.createAccount({
-          foundUs: this.fields.heardAboutUs === 'Other' ? this.fields.heardAboutUsText.value : this.fields.heardAboutUs.value,
+          foundUs:
+            this.fields.heardAboutUs === "Other"
+              ? this.fields.heardAboutUsText.value
+              : this.fields.heardAboutUs.value,
           studentFirstName: this.fields.firstName.value,
           studentLastName: this.fields.lastName.value,
           parentFirstName: this.fields.parentFirstName.value,
@@ -91,20 +111,20 @@ export default {
           username: this.fields.username.value,
           parentEmail: this.fields.parentEmail.value,
           studentEmail: this.fields.studentEmail.value,
-          DOB: parseInt(this.fields.age.value) + '',
+          DOB: parseInt(this.fields.age.value) + "",
           password: this.fields.password.value
         });
-        localStorage.setItem('lastUsername', this.fields.username.value);
-        this.$store.dispatch('Snackbar/showInfo', 'Successfully Logged In');
+        localStorage.setItem("lastUsername", this.fields.username.value);
+        this.$store.dispatch("Snackbar/showInfo", "Successfully Logged In");
         this.isSubmitting = false;
         this.stepperIndex = 0;
-        this.$router.push({ name: 'quiz' });
+        this.$router.push({ name: "quiz" });
       } catch (err) {
         alert(err.message);
         // eslint-disable-next-line no-console
         console.error(err);
         this.isSubmitting = false;
-        this.$store.dispatch('Snackbar/showError', err);
+        this.$store.dispatch("Snackbar/showError", err);
       }
       cb();
     }
@@ -115,11 +135,15 @@ export default {
       stepperIndex: 1,
       fields: {
         username: {
-          label: 'Username',
-          hint: 'You will use this to log in',
-          type: 'text',
-          value: '',
-          rules: [v => !!v || 'Please provide a username', () => !this.fields.username.inUse || 'This username is already in use'],
+          label: "Username",
+          hint: "You will use this to log in",
+          type: "text",
+          value: "",
+          rules: [
+            v => !!v || "Please provide a username",
+            () =>
+              !this.fields.username.inUse || "This username is already in use"
+          ],
           inUse: false,
           requestCount: 0,
           requestIndex: 0,
@@ -127,110 +151,119 @@ export default {
         },
         parentEmail: {
           label: "Parent's E-mail Address",
-          type: 'email',
-          value: '',
-          rules: [v => !!v || 'Please provide a email']
+          type: "email",
+          value: "",
+          rules: [v => !!v || "Please provide a email"]
         },
         studentEmail: {
           label: "Student's E-mail Address (optional)",
-          type: 'email',
-          value: ''
+          type: "email",
+          value: ""
         },
         password: {
-          label: 'Password',
-          type: 'password',
-          autocomplete: 'new-password',
-          value: '',
+          label: "Password",
+          type: "password",
+          autocomplete: "new-password",
+          value: "",
           rules: [
             v => !!v || "Don't forget to give a password",
-            v => v.length >= 8 || 'Password must be at least 8 characters',
-            v => v.length < 100 || 'Password must be at less than 100 characters'
+            v => v.length >= 8 || "Password must be at least 8 characters",
+            v =>
+              v.length < 100 || "Password must be at less than 100 characters"
           ]
         },
         passwordConfirm: {
-          label: 'Confirm Password',
-          type: 'password',
-          value: '',
-          rules: [v => v == this.fields.password.value || 'Passwords do not match']
+          label: "Confirm Password",
+          type: "password",
+          value: "",
+          rules: [
+            v => v == this.fields.password.value || "Passwords do not match"
+          ]
         },
         firstName: {
           label: "Student's First Name",
-          type: 'text',
-          value: '',
-          rules: [v => !!v || 'Please tell us your name']
+          type: "text",
+          value: "",
+          rules: [v => !!v || "Please tell us your name"]
         },
         lastName: {
           label: "Student's Last Name",
-          type: 'text',
-          value: '',
-          rules: [v => !!v || 'Please tell us your name']
+          type: "text",
+          value: "",
+          rules: [v => !!v || "Please tell us your name"]
         },
         parentFirstName: {
           label: "Parent's First Name",
-          type: 'text',
-          value: '',
-          rules: [v => !!v || 'Please tell us your name']
+          type: "text",
+          value: "",
+          rules: [v => !!v || "Please tell us your name"]
         },
         parentLastName: {
           label: "Parent's Last Name",
-          type: 'text',
-          value: '',
-          rules: [v => !!v || 'Please tell us your name']
+          type: "text",
+          value: "",
+          rules: [v => !!v || "Please tell us your name"]
         },
         heardAboutUs: {
-          label: 'How did you hear about the Code Challange?',
-          type: 'select',
+          label: "How did you hear about the Code Challange?",
+          type: "select",
           items: [
-            'Choose an option',
+            "Choose an option",
             "I'm a CodeWizardsHQ Student",
-            'CWHQ newsletter',
-            'CWHQ website',
-            'Facebook, Twitter, Instagram, or LinkedIn',
-            'Friend or family member ',
-            'Google or search engine',
-            'Your school or PTA',
-            'Other'
+            "CWHQ newsletter",
+            "CWHQ website",
+            "Facebook, Twitter, Instagram, or LinkedIn",
+            "Friend or family member ",
+            "Google or search engine",
+            "Your school or PTA",
+            "Other"
           ],
-          value: 'Choose an option',
-          rules: [v => v !== 'Choose an option' || 'Please choose an option']
+          value: "Choose an option",
+          rules: [v => v !== "Choose an option" || "Please choose an option"]
         },
         heardAboutUsText: {
-          label: 'Tell us where you heard about the Code Challenge!',
-          type: 'text',
-          value: '',
-          rules: [v => !!v || 'Please tell us where you heard about the code challenge']
+          label: "Tell us where you heard about the Code Challenge!",
+          type: "text",
+          value: "",
+          rules: [
+            v =>
+              !!v || "Please tell us where you heard about the code challenge"
+          ]
         },
         dateOfBirth: {
           label: "Student's Date Of Birth",
-          type: 'date',
+          type: "date",
           value: new Date().toISOString().substr(0, 10),
-          rules: [v => !!v || 'Please enter a date of birth']
+          rules: [v => !!v || "Please enter a date of birth"]
         },
         age: {
-          label: 'Hold old is the student?',
-          type: 'select',
+          label: "Hold old is the student?",
+          type: "select",
           items: [
-            'Choose an option',
-            '12 years old or lower',
-            '13 years old',
-            '14 years old',
-            '15 years old',
-            '16 years old',
-            '17 years old',
-            '18 years old or older'
+            "Choose an option",
+            "12 years old or lower",
+            "13 years old",
+            "14 years old",
+            "15 years old",
+            "16 years old",
+            "17 years old",
+            "18 years old or older"
           ],
-          value: 'Choose an option',
-          rules: [v => v !== 'Choose an option' || 'Please choose an option']
+          value: "Choose an option",
+          rules: [v => v !== "Choose an option" || "Please choose an option"]
         },
         tos: {
-          label: 'I agree to the Terms of Use and Privacy Policy',
+          label: "I agree to the Terms of Use and Privacy Policy",
           value: false,
-          rules: [v => !!v || 'You must agree to the Terms of Use and Privacy Policy']
+          rules: [
+            v => !!v || "You must agree to the Terms of Use and Privacy Policy"
+          ]
         },
         tos2: {
-          label: 'I agree to receive Code Challenge related updates and offers (you may unsubscribe at any time)',
+          label:
+            "I agree to receive Code Challenge related updates and offers (you may unsubscribe at any time)",
           value: false,
-          rules: [v => !!v || 'You must agree to recieve e-mail']
+          rules: [v => !!v || "You must agree to recieve e-mail"]
         }
       }
     };
diff --git a/src/views/Public/App.vue b/src/views/Public/App.vue
index b7aef77..fed9e93 100644
--- a/src/views/Public/App.vue
+++ b/src/views/Public/App.vue
@@ -7,18 +7,21 @@
       <router-view />
     </v-content>
     <leaderboard-bar />
+    <mobile-warning />
   </v-app>
 </template>
 
 <script>
-import AppBar from "@/components/Toolbars/AppBar";
-import QuizBar from "@/components/Toolbars/QuizBar";
-import CWHQBar from "@/components/Toolbars/CWHQBar";
-import LeaderboardBar from "@/components/Toolbars/LeaderboardBar";
+import AppBar from '@/components/Toolbars/AppBar';
+import QuizBar from '@/components/Toolbars/QuizBar';
+import CWHQBar from '@/components/Toolbars/CWHQBar';
+import LeaderboardBar from '@/components/Toolbars/LeaderboardBar';
+import MobileWarning from '@/components/MobileWarning';
 
 export default {
-  name: "App",
+  name: 'App',
   components: {
+    MobileWarning,
     AppBar,
     QuizBar,
     CWHQBar,
diff --git a/src/views/Quiz/QuizCountdown.vue b/src/views/Quiz/QuizCountdown.vue
index b22395b..5880f9b 100644
--- a/src/views/Quiz/QuizCountdown.vue
+++ b/src/views/Quiz/QuizCountdown.vue
@@ -37,7 +37,13 @@
             icon
             ><v-icon>mdi-facebook</v-icon></v-btn
           >
-          <v-btn class="mt-5" :style="{ backgroundColor: 'white !important' }" x-large color="blue" href="https://www.facebook.com/events/501020200554546/" icon
+          <v-btn
+            class="mt-5"
+            :style="{ backgroundColor: 'white !important' }"
+            x-large
+            color="blue"
+            href="https://www.facebook.com/events/501020200554546/"
+            icon
             ><v-icon>mdi-twitter</v-icon></v-btn
           >
         </template>
@@ -48,11 +54,11 @@
 </template>
 
 <script>
-import QuizNeedHelp from '@/components/QuizNeedHelp';
-import QuizScroll from '@/components/QuizScroll';
-import { Quiz, User } from '@/store';
+import QuizNeedHelp from "@/components/QuizNeedHelp";
+import QuizScroll from "@/components/QuizScroll";
+import { Quiz, User } from "@/store";
 export default {
-  name: 'quiz',
+  name: "quiz",
   components: {
     QuizScroll,
     QuizNeedHelp
@@ -63,8 +69,8 @@ export default {
   },
   methods: {
     async onClick() {
-      await this.$store.dispatch('Quiz/markAsSeen');
-      this.$router.push({ name: 'quiz' });
+      await this.$store.dispatch("Quiz/markAsSeen");
+      this.$router.push({ name: "quiz" });
     }
   }
 };
diff --git a/src/views/Voting/App.vue b/src/views/Voting/App.vue
index 0ed1991..7ff0c88 100644
--- a/src/views/Voting/App.vue
+++ b/src/views/Voting/App.vue
@@ -5,18 +5,21 @@
     <v-content>
       <router-view />
     </v-content>
+    <mobile-warning />
   </v-app>
 </template>
 
 <script>
 import AppBar from "@/components/Toolbars/AppBar";
 import CWHQBar from "@/components/Toolbars/CWHQBar";
+import MobileWarning from "@/components/MobileWarning";
 
 export default {
   name: "App",
   components: {
     AppBar,
-    CWHQBar
+    CWHQBar,
+    MobileWarning
   }
 };
 </script>