diff --git a/website/src/components/Donations.vue b/website/src/components/Donations.vue
index c1b6926e..71e718b8 100644
--- a/website/src/components/Donations.vue
+++ b/website/src/components/Donations.vue
@@ -4,22 +4,60 @@
       <div class="text-white text-h3 text-center">Donations</div>
       <div class="q-pb-md text-white text-center full-width">
         <div class="description-lead text-body1">
-          I developed Glance to help people with diabetes! 50% of all donations will go directly to the
+          I developed Glance to help people with diabetes! 50% of all donations
+          will go directly to the
           <a
             class="text-primary"
             target="_blank"
             href="https://www.faustmanlab.org/"
-          >Faustman lab</a>.
-          The remaining 50% will be dedicated to future research and development of Glance.
+            >Faustman lab</a
+          >. The remaining 50% will be dedicated to future research and
+          development of Glance.
         </div>
         <div class="q-pt-md">
           <q-card flat bordered class="donation-card text-grey-10">
             <q-card-section>
-              <img src="../statics/paypal-logo.png">
+              <img src="../statics/paypal-logo.png" />
             </q-card-section>
 
-            <q-card-section>Donations can be made through PayPal</q-card-section>
+            <q-card-section
+              >Donations can be made through PayPal</q-card-section
+            >
             <q-card-section class="q-px-none">
+              <form
+                action="https://www.paypal.com/cgi-bin/webscr"
+                method="post"
+                target="_top"
+              >
+                <input type="hidden" name="cmd" value="_donations" />
+                <input
+                  type="hidden"
+                  name="business"
+                  value="ryanmasonjar@gmail.com"
+                />
+                <input
+                  type="hidden"
+                  name="item_name"
+                  value="Glance - Research and Development - Thank You!"
+                />
+                <input type="hidden" name="currency_code" value="USD" />
+                <input
+                  type="image"
+                  src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif"
+                  border="0"
+                  name="submit"
+                  title="PayPal - The safer, easier way to pay online!"
+                  alt="Donate with PayPal button"
+                />
+                <img
+                  alt=""
+                  border="0"
+                  src="https://www.paypal.com/en_US/i/scr/pixel.gif"
+                  width="1"
+                  height="1"
+                />
+              </form>
+
               <q-btn-group push>
                 <q-btn
                   type="a"
@@ -30,7 +68,7 @@
                 >
                   $1
                 </q-btn>
-                  <q-btn
+                <q-btn
                   type="a"
                   target="_blank"
                   href="https://paypal.me/ryanmasonjar/5"
diff --git a/website/src/components/Features.vue b/website/src/components/Features.vue
index bd6063d8..50761822 100644
--- a/website/src/components/Features.vue
+++ b/website/src/components/Features.vue
@@ -3,9 +3,11 @@
     <div class="q-pa-xl">
       <div class="text-white text-h3 text-center">Features</div>
       <div class="q-pb-md text-white text-center full-width">
-        <div
-          class="description-lead text-body1"
-        >Glance is a watchface for use with Fitbit devices to view your blood glucose levels along with a variety of other health stats on the watch face. You can see your stats at a glance!</div>
+        <div class="description-lead text-body1">
+          Glance is a watchface for use with Fitbit devices to view your blood
+          glucose levels along with a variety of other health stats on the watch
+          face. You can see your stats at a glance!
+        </div>
       </div>
       <div class="row">
         <div class="col-xs-12 col-sm-6 col-md-4">
@@ -15,9 +17,9 @@
                 <i class="fas fa-tint"></i>
               </div>
               <div class="text-h5 text-weight-medium">Current BG</div>
-              <div
-                class="text-subtitle1 text-weight-normal"
-              >Receive blood glucose readings every 5 minutes.</div>
+              <div class="text-subtitle1 text-weight-normal">
+                Receive blood glucose readings every 5 minutes.
+              </div>
             </q-card-section>
           </q-card>
         </div>
@@ -27,10 +29,12 @@
               <div class="text-h3">
                 <i class="fas fa-exclamation"></i>
               </div>
-              <div class="text-h5 text-weight-medium text-center">Vibration Alerts</div>
+              <div class="text-h5 text-weight-medium text-center">
+                Vibration Alerts
+              </div>
               <div class="text-subtitle1 text-weight-normal">
-                Vibrates to alert you when your blood glucose falls below or rises above your high or low
-                thresholds.
+                Vibrates to alert you when your blood glucose falls below or
+                rises above your high or low thresholds.
               </div>
             </q-card-section>
           </q-card>
@@ -42,9 +46,10 @@
                 <i class="fas fa-chart-line"></i>
               </div>
               <div class="text-h5 text-weight-medium">Trend Direction</div>
-              <div
-                class="text-subtitle1 text-weight-normal"
-              >See a graph of trend data for the last 4 hours to better predict where your blood glucose is heading.</div>
+              <div class="text-subtitle1 text-weight-normal">
+                See a graph of trend data for the last 4 hours to better predict
+                where your blood glucose is heading.
+              </div>
             </q-card-section>
           </q-card>
         </div>
@@ -55,10 +60,10 @@
                 <i class="fas fa-palette"></i>
               </div>
               <div class="text-h5 text-weight-medium">Customizations</div>
-              <div
-                class="text-subtitle1 text-weight-normal"
-              >
-              Customize Glance how you like it, change the background color, unit type (mgdl or mmol), various alerts you want to recieve, and so much more!
+              <div class="text-subtitle1 text-weight-normal">
+                Customize Glance how you like it, change the background color,
+                unit type (mgdl or mmol), various alerts you want to recieve,
+                and so much more!
               </div>
             </q-card-section>
           </q-card>
@@ -70,10 +75,9 @@
                 <i class="fas fa-cloud"></i>
               </div>
               <div class="text-h5 text-weight-medium">Data Source Options</div>
-              <div
-                class="text-subtitle1 text-weight-normal"
-              >
-                Select from a variety of data sources, including <b>Dexcom</b>, <b>Nightscout</b>, <b>Spike</b>, <b>xDrip</b> and <b>Tomato</b>
+              <div class="text-subtitle1 text-weight-normal">
+                Select from a variety of data sources, including <b>Dexcom</b>,
+                <b>Nightscout</b>, <b>Spike</b>, <b>xDrip</b> and <b>Tomato</b>
               </div>
             </q-card-section>
           </q-card>
@@ -85,10 +89,9 @@
                 <i class="fas fa-puzzle-piece"></i>
               </div>
               <div class="text-h5 text-weight-medium">Compatibility</div>
-              <div
-                class="text-subtitle1 text-weight-normal"
-              >
-              Glance is compatible with Fitbit smartwatchs that includes the Fitbit <b>Versa</b>, <b>Versa lite</b>, and <b>Ionic</b>. 
+              <div class="text-subtitle1 text-weight-normal">
+                Glance is compatible with Fitbit smartwatchs that includes the
+                Fitbit <b>Versa</b>, <b>Versa lite</b>, and <b>Ionic</b>.
               </div>
             </q-card-section>
           </q-card>
diff --git a/website/src/components/Gallery.vue b/website/src/components/Gallery.vue
index 48c57b4c..e22a63f0 100644
--- a/website/src/components/Gallery.vue
+++ b/website/src/components/Gallery.vue
@@ -3,15 +3,24 @@
     <div class="q-pa-xl">
       <div class="text-white text-h3 text-center">Gallery</div>
       <div class="q-pb-md text-white text-center full-width">
-        <div
-          class="description-lead text-body1"
-        >
-        Glance is highly customizable allowing for you to change almost any aspect of the watch.
+        <div class="description-lead text-body1">
+          Glance is highly customizable allowing for you to change almost any
+          aspect of the watch.
         </div>
       </div>
       <div class="row gallery-images">
-        <div class="col-xs-12 col-sm-4 col-md-4 q-pa-sm" v-for="(img, i) in galleryImgs" :key="i">
-          <q-img spinner-color="white" class="rounded-borders" rounded :src="img.url" :ratio="174/125" />
+        <div
+          class="col-xs-12 col-sm-4 col-md-4 q-pa-sm"
+          v-for="(img, i) in galleryImgs"
+          :key="i"
+        >
+          <q-img
+            spinner-color="white"
+            class="rounded-borders"
+            rounded
+            :src="img.url"
+            :ratio="174 / 125"
+          />
         </div>
       </div>
     </div>
diff --git a/website/src/components/GlanceFooter.vue b/website/src/components/GlanceFooter.vue
index 802e2a1e..7b46c889 100644
--- a/website/src/components/GlanceFooter.vue
+++ b/website/src/components/GlanceFooter.vue
@@ -2,9 +2,10 @@
   <div class="glance-footer q-py-xl q-px-md">
     <div class="text-white text-center full-width">
       <div class="description-lead text-body1 text-white">
-        This program is free software distributed under the terms of the GNU General Public License
-        as published by the Free Software Foundation, either version 3 of the License, or any later
-        version. See http://www.gnu.org/licenses/gpl.txt for more details
+        This program is free software distributed under the terms of the GNU
+        General Public License as published by the Free Software Foundation,
+        either version 3 of the License, or any later version. See
+        http://www.gnu.org/licenses/gpl.txt for more details
         <div class="q-py-sm">
           <a
             class="text-h4 q-px-sm text-white"
@@ -28,16 +29,18 @@
             <i class="fab fa-discord"></i>
           </a>
         </div>
-        Made by <a href="http://ryanmasonjar.com" target="_blank" class="text-grey-10">Ryan Mason</a> | 2019
+        Made by
+        <a href="http://ryanmasonjar.com" target="_blank" class="text-grey-10"
+          >Ryan Mason</a
+        >
+        | 2019
       </div>
     </div>
   </div>
 </template>
 
 <script>
-export default {
-
-}
+export default {};
 </script>
 
 <style>
diff --git a/website/src/components/GlanceHeader.vue b/website/src/components/GlanceHeader.vue
index 9c89776a..bd28c7f2 100644
--- a/website/src/components/GlanceHeader.vue
+++ b/website/src/components/GlanceHeader.vue
@@ -23,35 +23,35 @@
       </q-chip>
     </div>
   </div> -->
-    <div>
-      <div class="glance-header q-py-xl">
+  <div>
+    <div class="glance-header q-py-xl">
       <div class="q-pa-xl">
         <div class="q-pb-md text-white text-center full-width">
-          <div
-            class="description-lead text-body1"
-          >
+          <div class="description-lead text-body1">
             <div class="full-width text-center">
               <q-avatar size="200px">
-                <img src="../statics/logo.png">
+                <img src="../statics/logo.png" />
               </q-avatar>
             </div>
 
             <div class="text-h3 text-weight-medium text-white">Glance</div>
-            <div
-              class="text-h6 text-weight-normal text-white"
-            >A project to help manage diabetes</div>
+            <div class="text-h6 text-weight-normal text-white">
+              A project to help manage diabetes
+            </div>
             <q-chip clickable square>
               <a
                 href="https://glance.page.link/download"
                 class="text-grey-10"
                 target="_blank"
               >
-                <q-avatar icon="save_alt" color="primary" text-color="white" />Download Glance
+                <q-avatar
+                  icon="save_alt"
+                  color="primary"
+                  text-color="white"
+                />Download Glance
               </a>
             </q-chip>
-            <div
-              class="text-caption text-white"
-            >Version: 2.1.112</div>
+            <div class="text-caption text-white">Version: 2.1.112</div>
           </div>
         </div>
       </div>
@@ -60,10 +60,7 @@
 </template>
 
 <script>
-
-
-export default {
-};
+export default {};
 </script>
 
 <style>
diff --git a/website/src/components/Navbar.vue b/website/src/components/Navbar.vue
index 9a1cdcfa..592ca696 100644
--- a/website/src/components/Navbar.vue
+++ b/website/src/components/Navbar.vue
@@ -1,8 +1,8 @@
 <template>
-    <q-toolbar class="text-grey-9">
+  <q-toolbar class="text-grey-9">
     <q-btn stretch to="/" flat fit>
       <q-avatar>
-        <img src="../statics/favicon.png">
+        <img src="../statics/favicon.png" />
       </q-avatar>
       <span class="gt-xs text-h5 glance-logo">Glance</span>
     </q-btn>
@@ -10,7 +10,7 @@
     <q-btn
       stretch
       flat
-      fit 
+      fit
       type="a"
       class="no-underline text-h6 q-px-sm text-grey-7 q-px-md gt-xs"
       target="_blank"
@@ -19,28 +19,28 @@
       <i class="fab fa-github"></i>
     </q-btn>
     <q-separator vertical class="gt-xs" />
-      <q-btn
-        stretch
-        flat
-        fit 
-        type="a"
-        class="no-underline text-h6 q-px-sm text-grey-7 q-px-md gt-xs"
-        target="_blank"
-        href="https://www.facebook.com/groups/Glance/"
-      >
-        <i class="fab fa-facebook"></i>
-      </q-btn>
-      <q-separator vertical class="gt-xs" />
-      <q-btn
-        stretch
-        flat
-        fit 
-        type="a"
-        class="no-underline text-h6 q-px-sm text-grey-7 q-px-md gt-xs"
-        target="_blank"
-        href="https://discord.gg/RUa7U6F/"
-      >
-        <i class="fab fa-discord"></i>
+    <q-btn
+      stretch
+      flat
+      fit
+      type="a"
+      class="no-underline text-h6 q-px-sm text-grey-7 q-px-md gt-xs"
+      target="_blank"
+      href="https://www.facebook.com/groups/Glance/"
+    >
+      <i class="fab fa-facebook"></i>
+    </q-btn>
+    <q-separator vertical class="gt-xs" />
+    <q-btn
+      stretch
+      flat
+      fit
+      type="a"
+      class="no-underline text-h6 q-px-sm text-grey-7 q-px-md gt-xs"
+      target="_blank"
+      href="https://discord.gg/RUa7U6F/"
+    >
+      <i class="fab fa-discord"></i>
     </q-btn>
     <q-separator class="gt-xs" vertical />
 
@@ -48,7 +48,7 @@
 
     <q-separator class="lt-sm" vertical />
     <q-btn-dropdown
-      icon="more_vert" 
+      icon="more_vert"
       no-caps
       stretch
       flat
@@ -60,7 +60,7 @@
           <q-btn
             stretch
             flat
-            fit 
+            fit
             type="a"
             class="no-underline text-h6 q-px-sm text-grey-7 q-px-md"
             target="_blank"
@@ -73,7 +73,7 @@
           <q-btn
             stretch
             flat
-            fit 
+            fit
             type="a"
             class="no-underline text-h6 q-px-sm text-grey-7 q-px-md"
             target="_blank"
@@ -86,7 +86,7 @@
           <q-btn
             stretch
             flat
-            fit 
+            fit
             type="a"
             class="no-underline text-h6 q-px-sm text-grey-7 q-px-md"
             target="_blank"
@@ -122,11 +122,7 @@
 </template>
 
 <script>
-export default {
-
-}
+export default {};
 </script>
 
-<style>
-
-</style>
+<style></style>
diff --git a/website/src/components/Setup.vue b/website/src/components/Setup.vue
index 238c6206..06a23b9b 100644
--- a/website/src/components/Setup.vue
+++ b/website/src/components/Setup.vue
@@ -10,7 +10,8 @@
             href="https://github.com/Rytiggy/Glance/wiki/User-Agreement/"
             target="_blank"
             class="text-grey-10"
-          >user agreement</a>.
+            >user agreement</a
+          >.
         </div>
       </div>
       <q-stepper
@@ -24,8 +25,17 @@
         animated
         :vertical="$q.screen.lt.md"
       >
-        <q-step class="text-center" :name="1" title="Start" icon="save_alt" :done="step > 1">
-          <div class="text-subtext1 q-pb-sm">This guide will walk you through getting your CGM data to display on Glance.</div>
+        <q-step
+          class="text-center"
+          :name="1"
+          title="Start"
+          icon="save_alt"
+          :done="step > 1"
+        >
+          <div class="text-subtext1 q-pb-sm">
+            This guide will walk you through getting your CGM data to display on
+            Glance.
+          </div>
           <q-btn
             @click="$refs.stepper.next()"
             color="secondary"
@@ -34,7 +44,13 @@
             unelevated
           />
         </q-step>
-        <q-step :name="2" title="Install Glance" caption="Step 1" icon="save_alt" :done="step > 1">
+        <q-step
+          :name="2"
+          title="Install Glance"
+          caption="Step 1"
+          icon="save_alt"
+          :done="step > 1"
+        >
           <div class="text-h5 text-grey-10 text-center">Install Glance</div>
           <div class="text-h6 text-grey-10">Step 1:</div>
           <div class="row q-pb-md">
@@ -49,12 +65,18 @@
                   class="text-grey-10"
                   target="_blank"
                 >
-                  <q-avatar icon="save_alt" color="primary" text-color="white" />Download and install Glance
+                  <q-avatar
+                    icon="save_alt"
+                    color="primary"
+                    text-color="white"
+                  />Download and install Glance
                 </a>
               </q-chip>
             </div>
             <div class="col-xs-12 col-sm-6 col-md-6">
-              <q-img src="https://media.giphy.com/media/ul0NKnzGlOb8LL8bYe/giphy.gif" />
+              <q-img
+                src="https://media.giphy.com/media/ul0NKnzGlOb8LL8bYe/giphy.gif"
+              />
             </div>
           </div>
           <div class="full-width">
@@ -86,7 +108,9 @@
         >
           <div class="text-h5 text-grey-10 text-center">Select Data Source</div>
           <div class="text-h6 text-grey-10">Step 2:</div>
-          <div class="text-subtext1">Select what data source you are going to be using:</div>
+          <div class="text-subtext1">
+            Select what data source you are going to be using:
+          </div>
           <div class="row">
             <div
               v-for="(dataSoure, id) in dataSoures"
@@ -102,9 +126,20 @@
               >
                 <q-card-section>
                   <div class="text-h6 text-grey-10">{{ dataSoure.title }}</div>
-                  <div class="text-subtitle1">{{ dataSoure.shortDescription}}</div>
-                  <spn v-for="(tag, t) in dataSoure.tags" :key="t" class="text-subtitle1 text-bold q-pr-sm">
-                    <q-badge class="text-weight-medium" :class="tag.textColor" :color="tag.color">{{ tag.title }}</q-badge>
+                  <div class="text-subtitle1">
+                    {{ dataSoure.shortDescription }}
+                  </div>
+                  <spn
+                    v-for="(tag, t) in dataSoure.tags"
+                    :key="t"
+                    class="text-subtitle1 text-bold q-pr-sm"
+                  >
+                    <q-badge
+                      class="text-weight-medium"
+                      :class="tag.textColor"
+                      :color="tag.color"
+                      >{{ tag.title }}</q-badge
+                    >
                   </spn>
                 </q-card-section>
               </q-card>
@@ -129,20 +164,28 @@
           icon="settings"
         >
           <div v-if="selectedDataSouce != null">
-            <div
-              class="text-h5 text-grey-10 text-center"
-            >Configure {{ selectedDataSouce.title }} Settings</div>
+            <div class="text-h5 text-grey-10 text-center">
+              Configure {{ selectedDataSouce.title }} Settings
+            </div>
             <div class="text-h6 text-grey-10">Step 3:</div>
-            <div
-              class="text-subtext1"
-            >Follow the steps below to setup your Glance settings for {{ selectedDataSouce.title }}:</div>
+            <div class="text-subtext1">
+              Follow the steps below to setup your Glance settings for
+              {{ selectedDataSouce.title }}:
+            </div>
             <div class="text-subtitle1 text-bold">Requirements</div>
-            <div v-for="(requirement, r) in selectedDataSouce.requirements" :key="r">
+            <div
+              v-for="(requirement, r) in selectedDataSouce.requirements"
+              :key="r"
+            >
               <span class="bullet" v-html="requirement.title" />
             </div>
             <div class="text-subtitle1 text-bold">Steps</div>
 
-            <div class="q-pb-md" v-for="(step, s) in selectedDataSouce.steps" :key="s">
+            <div
+              class="q-pb-md"
+              v-for="(step, s) in selectedDataSouce.steps"
+              :key="s"
+            >
               <div class="row" v-if="step.img != null">
                 <div class="col-xs-12 col-sm-6 col-md-6">
                   <span class="bullet" v-html="step.title" />
@@ -181,23 +224,36 @@
         <q-step :name="5" title="Review" icon="remove_red_eye">
           <div class="text-h5 text-grey-10 text-center">Finish</div>
           <div class="text-h6 text-grey-10">Review:</div>
-          <div
-            class="text-subtext1"
-          >
-          You should now be receiving BG data on your watchface!
+          <div class="text-subtext1">
+            You should now be receiving BG data on your watchface!
           </div>
           <div class="q-pt-md text-h6 text-grey-10">Customize Glance:</div>
           <div class="bullet">
-            Glance has a very dynamic set of settings allowing it to be used in a variety of
-            different use cases. Customize Glance how you like it, change the background color,
-            unit type (mgdl or mmol), various alerts you want to recieve, and so much more!
+            Glance has a very dynamic set of settings allowing it to be used in
+            a variety of different use cases. Customize Glance how you like it,
+            change the background color, unit type (mgdl or mmol), various
+            alerts you want to recieve, and so much more!
           </div>
           <div class="bullet">
-            <q-btn flat no-caps type="a" to="/customize" class="text-primary text-weight-regular">Check out the Customization section</q-btn>
+            <q-btn
+              flat
+              no-caps
+              type="a"
+              to="/customize"
+              class="text-primary text-weight-regular"
+              >Check out the Customization section</q-btn
+            >
           </div>
           <div class="q-pt-md text-h6 text-grey-10">Need help:</div>
           <div class="bullet">
-            <q-btn flat no-caps type="a" to="/troubleshooting" class="text-primary text-weight-regular">Check out the troubleshooting section</q-btn>
+            <q-btn
+              flat
+              no-caps
+              type="a"
+              to="/troubleshooting"
+              class="text-primary text-weight-regular"
+              >Check out the troubleshooting section</q-btn
+            >
           </div>
           <div class="q-pt-md text-h6 text-grey-10">Comunity Support:</div>
           <div class="bullet">
@@ -370,7 +426,7 @@ export default {
           tags: [
             {
               title: "iPhone Only",
-              color: 'primary',
+              color: "primary",
               textColor: "text-white"
             }
           ],
@@ -414,7 +470,7 @@ export default {
           tags: [
             {
               title: "Android Only",
-              color: 'primary',
+              color: "primary",
               textColor: "text-white"
             }
           ],
@@ -459,7 +515,7 @@ export default {
           tags: [
             {
               title: "Currently only working on Android",
-              color: 'primary',
+              color: "primary",
               textColor: "text-white"
             }
           ],
diff --git a/website/src/layouts/MyLayout.vue b/website/src/layouts/MyLayout.vue
index 543a6186..bf812db4 100644
--- a/website/src/layouts/MyLayout.vue
+++ b/website/src/layouts/MyLayout.vue
@@ -74,7 +74,7 @@
     </q-drawer>-->
 
     <q-header bordered class="bg-white">
-        <navbar/>
+      <navbar />
     </q-header>
     <q-page-container>
       <router-view />
@@ -92,21 +92,18 @@ export default {
   name: "MyLayout",
   components: {
     navbar,
-    glanceFooter,
+    glanceFooter
   },
   data() {
     return {
       leftDrawerOpen: false,
-      slide: 1,
-     
+      slide: 1
     };
   },
   methods: {
-    openURL,
+    openURL
   }
 };
-
 </script>
 
-<style>
-</style>
+<style></style>
diff --git a/website/src/pages/Customize.vue b/website/src/pages/Customize.vue
index bf178905..e2936aae 100644
--- a/website/src/pages/Customize.vue
+++ b/website/src/pages/Customize.vue
@@ -3,161 +3,251 @@
     <div class="description-lead q-py-xl">
       <div class="text-h3 text-center q-pb-xs">Customize Glance</div>
       <div class="text-subtext1 text-center q-pb-md">
-        Glance has a very dynamic set of settings allowing it to be used in a variety of different
-        use cases. below are the settings that you can change to your liking.
+        Glance has a very dynamic set of settings allowing it to be used in a
+        variety of different use cases. below are the settings that you can
+        change to your liking.
       </div>
       <div class="text-h6 text-grey-10">Settings glossary/key</div>
       <ul class="q-mt-none">
         <li>
-           <span class="text-subtitle1 text-bold">Data Source:</span> Where your blood sugars are being hosted in the cloud.
-            <ul>
-              <li>
-                  <a class="text-primary" href="https://github.com/Rytiggy/Glance/wiki/How-to-setup-Dexcom-as-a-data-source">Dexcom</a>
+          <span class="text-subtitle1 text-bold">Data Source:</span> Where your
+          blood sugars are being hosted in the cloud.
+          <ul>
+            <li>
+              <a
+                class="text-primary"
+                href="https://github.com/Rytiggy/Glance/wiki/How-to-setup-Dexcom-as-a-data-source"
+                >Dexcom</a
+              >
+              <ul>
+                <li>Username: Your dexcom username</li>
+                <li>Password: your dexcom password</li>
+                <li>
+                  International: Toggle to switch between international (not in
+                  USA) share server and national share server
+                </li>
+              </ul>
+            </li>
+            <li>
+              <a
+                class="text-primary"
+                href="https://github.com/Rytiggy/Glance/wiki/How-to-setup-Nightscout-as-a-data-source"
+                >Nightscout</a
+              >
+              <ul>
+                <li>
+                  Site name: Nighscout app name or nightscout URL both will work
+                  in 2.2
+                </li>
+                <li>
+                  Acceptable formates
                   <ul>
-                    <li>Username: Your dexcom username</li>
-                    <li>Password: your dexcom password</li>
-                    <li>International: Toggle to switch between international (not in USA) share server and national share server</li>
-                  </ul>
-              </li>
-              <li>
-                  <a class="text-primary" href="https://github.com/Rytiggy/Glance/wiki/How-to-setup-Nightscout-as-a-data-source">Nightscout</a>
-                  <ul>
-                    <li>Site name: Nighscout app name or nightscout URL both will work in 2.2</li>
                     <li>
-                        Acceptable formates 
-                        <ul>
-                          <li><a class="text-primary" href="https://SiteName.herokuapp.com">https://SiteName.herokuapp.com</a></li>
-                          <li>SiteName</li>
-                        </ul>
+                      <a
+                        class="text-primary"
+                        href="https://SiteName.herokuapp.com"
+                        >https://SiteName.herokuapp.com</a
+                      >
                     </li>
-                    <li>Nightscout host site: Where you're nightscout site is hosted at. Heroku or Azure.</li>
-                  </ul>
-              </li>
-              <li><a class="text-primary" href="https://github.com/Rytiggy/Glance/wiki/How-to-setup-xDrip--as-a-data-source">xDrip+</a></li>
-              <li><a class="text-primary" href="https://github.com/Rytiggy/Glance/wiki/How-to-setup-Spike-as-a-data-source">Spike</a></li>
-              <li>
-                  Tomato
-              </li>
-              <li>
-                  Custom
-                  <ul>
-                    <li>a custom api URL with data formatted similar to nightscout </li>
+                    <li>SiteName</li>
                   </ul>
-              </li>
-            </ul>
+                </li>
+                <li>
+                  Nightscout host site: Where you're nightscout site is hosted
+                  at. Heroku or Azure.
+                </li>
+              </ul>
+            </li>
+            <li>
+              <a
+                class="text-primary"
+                href="https://github.com/Rytiggy/Glance/wiki/How-to-setup-xDrip--as-a-data-source"
+                >xDrip+</a
+              >
+            </li>
+            <li>
+              <a
+                class="text-primary"
+                href="https://github.com/Rytiggy/Glance/wiki/How-to-setup-Spike-as-a-data-source"
+                >Spike</a
+              >
+            </li>
+            <li>
+              Tomato
+            </li>
+            <li>
+              Custom
+              <ul>
+                <li>
+                  a custom api URL with data formatted similar to nightscout
+                </li>
+              </ul>
+            </li>
+          </ul>
         </li>
 
         <li>
-          <span class="text-subtitle1 text-bold">Glucose Units:</span> The unit type you are in <code>mgdl</code> or <code>mmol</code>
+          <span class="text-subtitle1 text-bold">Glucose Units:</span> The unit
+          type you are in <code>mgdl</code> or <code>mmol</code>
         </li>
 
         <li>
-            <span class="text-subtitle1 text-bold">High threshold:</span> The limit when the high alert will fire
+          <span class="text-subtitle1 text-bold">High threshold:</span> The
+          limit when the high alert will fire
         </li>
 
         <li>
-           <span class="text-subtitle1 text-bold">Low threshold:</span> The limit when the low alert will fire
+          <span class="text-subtitle1 text-bold">Low threshold:</span> The limit
+          when the low alert will fire
         </li>
 
         <li>
-           <span class="text-subtitle1 text-bold">Disable Alerts:</span> Disable all alerts
+          <span class="text-subtitle1 text-bold">Disable Alerts:</span> Disable
+          all alerts
         </li>
 
         <li>
-           <span class="text-subtitle1 text-bold">Extra glucose settings:</span> Advanced glucose settings handling settings that don't normally need changed 
+          <span class="text-subtitle1 text-bold">Extra glucose settings:</span>
+          Advanced glucose settings handling settings that don't normally need
+          changed
         </li>
 
         <li>
-           <span class="text-subtitle1 text-bold">High alerts:</span> alert to high blood sugars when blood sugar is above high threshold
+          <span class="text-subtitle1 text-bold">High alerts:</span> alert to
+          high blood sugars when blood sugar is above high threshold
         </li>
 
         <li>
-           <span class="text-subtitle1 text-bold">Dismiss high alerts for n minutes:</span> How long to dismiss the high alert for after user dismissal.
+          <span class="text-subtitle1 text-bold"
+            >Dismiss high alerts for n minutes:</span
+          >
+          How long to dismiss the high alert for after user dismissal.
         </li>
 
         <li>
-           <span class="text-subtitle1 text-bold">Low alerts:</span> alert to low blood sugars when blood sugar is below low threshold
+          <span class="text-subtitle1 text-bold">Low alerts:</span> alert to low
+          blood sugars when blood sugar is below low threshold
         </li>
 
         <li>
-           <span class="text-subtitle1 text-bold">Dismiss low alerts for n minutes:</span> How long to dismiss the low alert for after user dismissal.
+          <span class="text-subtitle1 text-bold"
+            >Dismiss low alerts for n minutes:</span
+          >
+          How long to dismiss the low alert for after user dismissal.
         </li>
 
         <li>
-           <span class="text-subtitle1 text-bold">Rapid rise alerts:</span> Alert to rapid rises in blood sugars (double up)
+          <span class="text-subtitle1 text-bold">Rapid rise alerts:</span> Alert
+          to rapid rises in blood sugars (double up)
         </li>
 
         <li>
-           <span class="text-subtitle1 text-bold">High threshold:</span>
-            <p><a>**Rapid fall alerts:**</a> Alert to rapid falls in blood sugars (double down)</p>
+          <span class="text-subtitle1 text-bold">High threshold:</span>
+          <p>
+            <a>**Rapid fall alerts:**</a> Alert to rapid falls in blood sugars
+            (double down)
+          </p>
         </li>
 
         <li>
-           <span class="text-subtitle1 text-bold">Loop status alerts:</span> Alert when loop status is in warning state
+          <span class="text-subtitle1 text-bold">Loop status alerts:</span>
+          Alert when loop status is in warning state
         </li>
 
         <li>
-           <span class="text-subtitle1 text-bold">Stale date alerts:</span> Alert when data is more then 25 minutes old.
+          <span class="text-subtitle1 text-bold">Stale date alerts:</span> Alert
+          when data is more then 25 minutes old.
         </li>
 
         <li>
-           <span class="text-subtitle1 text-bold">Stale data alerts after n minutes:</span> How long to wait before alerting to stale data
+          <span class="text-subtitle1 text-bold"
+            >Stale data alerts after n minutes:</span
+          >
+          How long to wait before alerting to stale data
         </li>
 
         <li>
-           <span class="text-subtitle1 text-bold">Dismiss alarm when back in range:</span>If alert
-          was fired in the last n minutes (based on users alert times) but blood sugar goes within
-          thresholds during that time. allow another alert to be fired if threshold is met.
+          <span class="text-subtitle1 text-bold"
+            >Dismiss alarm when back in range:</span
+          >If alert was fired in the last n minutes (based on users alert times)
+          but blood sugar goes within thresholds during that time. allow another
+          alert to be fired if threshold is met.
         </li>
 
         <li>
-          <span class="text-subtitle1 text-bold">Time format:</span> A time format to display time
-          in 24 or 12 hours
+          <span class="text-subtitle1 text-bold">Time format:</span> A time
+          format to display time in 24 or 12 hours
         </li>
 
         <li>
-          <span class="text-subtitle1 text-bold">Date format:</span> A date formate based on users
-          preference
+          <span class="text-subtitle1 text-bold">Date format:</span> A date
+          formate based on users preference
         </li>
 
         <li>
-          <span class="text-subtitle1 text-bold">Day of week at end of date:</span>Adds day of
-          week to end of date
+          <span class="text-subtitle1 text-bold"
+            >Day of week at end of date:</span
+          >Adds day of week to end of date
         </li>
-        
+
         <li>
-          <span class="text-subtitle1 text-bold">Main Graph Predictions:</span> Enable predictions on main graph (note this is only available if you have it enabled on your end points)
+          <span class="text-subtitle1 text-bold">Main Graph Predictions:</span>
+          Enable predictions on main graph (note this is only available if you
+          have it enabled on your end points)
         </li>
 
         <li>
-          <span class="text-subtitle1 text-bold">Large graph popup screen:</span> Adds a more detailed large graph pop screen. to open and close the large graph tap the graph in the lower right hand corner
-            <ul>
-              <li><img src="https://media.giphy.com/media/1WbRR9FSE6WhYxaPIP/giphy.gif" width="200px"></li>
-            </ul>
+          <span class="text-subtitle1 text-bold"
+            >Large graph popup screen:</span
+          >
+          Adds a more detailed large graph pop screen. to open and close the
+          large graph tap the graph in the lower right hand corner
+          <ul>
+            <li>
+              <img
+                src="https://media.giphy.com/media/1WbRR9FSE6WhYxaPIP/giphy.gif"
+                width="200px"
+              />
+            </li>
+          </ul>
         </li>
 
         <li>
-            <p><a>**Background color:**</a> Select a color for the watch background </p>
-            <ul>
-              <li>
-                  The white circle color is used for randomly generating a color. you can also enter <a class="text-primary" href="https://www.color-hex.com/">hex values</a> for any color.
-                  <ul>
-                    <li><strong>Hex Color One:</strong> A hex color code that is used for the top background color on the watch</li>
-                    <li><strong>Hex Color Two:</strong> A hex color code that is used for the bottom background color on the watch</li>
-                    <li><strong>Text Color:</strong> A hex color code that is used for changing the text color on the watch</li>
-                  </ul>
-              </li>
-            </ul>
+          <p>
+            <a>**Background color:**</a> Select a color for the watch background
+          </p>
+          <ul>
+            <li>
+              The white circle color is used for randomly generating a color.
+              you can also enter
+              <a class="text-primary" href="https://www.color-hex.com/"
+                >hex values</a
+              >
+              for any color.
+              <ul>
+                <li>
+                  <strong>Hex Color One:</strong> A hex color code that is used
+                  for the top background color on the watch
+                </li>
+                <li>
+                  <strong>Hex Color Two:</strong> A hex color code that is used
+                  for the bottom background color on the watch
+                </li>
+                <li>
+                  <strong>Text Color:</strong> A hex color code that is used for
+                  changing the text color on the watch
+                </li>
+              </ul>
+            </li>
+          </ul>
         </li>
 
         <li>
-          <span class="text-subtitle1 text-bold">Customize:</span> The layouts are used to change the default values with other ones present from your data source.(currently only working for nightscout)
+          <span class="text-subtitle1 text-bold">Customize:</span> The layouts
+          are used to change the default values with other ones present from
+          your data source.(currently only working for nightscout)
         </li>
       </ul>
-
-
-
-      
     </div>
   </q-page>
 </template>
@@ -165,12 +255,8 @@
 <script>
 export default {
   data() {
-    return {
-    };
-  },
-}
+    return {};
+  }
+};
 </script>
-
-<style>
-
-</style>
+<style></style>
diff --git a/website/src/pages/Index.vue b/website/src/pages/Index.vue
index 9a3885b1..9c978168 100644
--- a/website/src/pages/Index.vue
+++ b/website/src/pages/Index.vue
@@ -13,7 +13,7 @@
 <style></style>
 
 <script>
-import { scroll } from 'quasar';
+import { scroll } from "quasar";
 const { getScrollTarget, setScrollPosition } = scroll;
 
 import glanceHeader from "../components/GlanceHeader.vue";
@@ -34,16 +34,16 @@ export default {
   data() {
     return {};
   },
-  mounted: function () {
-    console.log(window.location.hash.replace('#',''))
-    if(window.location.hash) {
-      let el = document.getElementById(window.location.hash.replace('#',''));
+  mounted: function() {
+    console.log(window.location.hash.replace("#", ""));
+    if (window.location.hash) {
+      let el = document.getElementById(window.location.hash.replace("#", ""));
       const target = getScrollTarget(el);
       const offset = el.offsetTop;
       const duration = 500;
       setScrollPosition(target, offset, duration);
     }
-  },
+  }
 };
 </script>
 <style>
diff --git a/website/src/pages/Troubleshooting.vue b/website/src/pages/Troubleshooting.vue
index 9c49a983..98248e6a 100644
--- a/website/src/pages/Troubleshooting.vue
+++ b/website/src/pages/Troubleshooting.vue
@@ -23,28 +23,34 @@
               dense
               color="white"
               text-color="primary"
-              :icon="troubleshootingFullscreen ? 'fullscreen_exit' : 'fullscreen'"
+              :icon="
+                troubleshootingFullscreen ? 'fullscreen_exit' : 'fullscreen'
+              "
               @click="troubleshootingFullscreen = !troubleshootingFullscreen"
             />
           </q-carousel-control>
         </template>
       </q-carousel>
       <div class="text-h6 text-grey-10">Common Error Codes:</div>
-      <div
-        class="bullet"
-      >DSE: Data Source error - generic error with <a
+      <div class="bullet">
+        DSE: Data Source error - generic error with
+        <a
           class="text-primary"
           target="_blank"
           href="https://github.com/Rytiggy/Glance/wiki/How-to-configuring-Glance's-settings#datasource"
-        >your data source
-        </a> try opening Glance's settings
+          >your data source
+        </a>
+        try opening Glance's settings
+      </div>
+      <div class="bullet">
+        E500: A very general HTTP status code that means something has gone
+        wrong on your site's server but the server could not be more specific on
+        what the exact problem is.
+      </div>
+      <div class="bullet">
+        E503: A HTTP status code that means the server is simply not available
+        right now. Or you haven't configured your data source right.
       </div>
-      <div
-        class="bullet"
-      >E500: A very general HTTP status code that means something has gone wrong on your site's server but the server could not be more specific on what the exact problem is.</div>
-      <div
-        class="bullet"
-      >E503: A HTTP status code that means the server is simply not available right now. Or you haven't configured your data source right.</div>
       <div class="bullet">E504: Gateway Timeout</div>
       <div class="bullet">E404: Could not locate your data source</div>
       <div class="q-pt-md text-h6 text-grey-10">Comunity Support:</div>
@@ -85,14 +91,13 @@ export default {
   data() {
     return {
       troubleshootingFullscreen: false,
-      troubleshootingSlide: 1,
+      troubleshootingSlide: 1
     };
-  },
-}
+  }
+};
 </script>
 
 <style>
-
 .troubleshooting-decision-tree {
   background-size: contain !important;
   background-repeat: no-repeat;
diff --git a/website/src/router/routes.js b/website/src/router/routes.js
index 242ea8fa..e7fc89ce 100644
--- a/website/src/router/routes.js
+++ b/website/src/router/routes.js
@@ -4,7 +4,10 @@ const routes = [
     component: () => import("layouts/MyLayout.vue"),
     children: [
       { path: "", component: () => import("pages/Index.vue") },
-      { path: "/troubleshooting", component: () => import("pages/Troubleshooting.vue") },
+      {
+        path: "/troubleshooting",
+        component: () => import("pages/Troubleshooting.vue")
+      },
       { path: "/customize", component: () => import("pages/Customize.vue") }
     ]
   }