diff --git a/firebase.json b/firebase.json
index 356b592..b745c1e 100644
--- a/firebase.json
+++ b/firebase.json
@@ -3,7 +3,12 @@
     {
       "source": "functions",
       "codebase": "default",
-      "ignore": ["node_modules", ".git", "firebase-debug.log", "firebase-debug.*.log"],
+      "ignore": [
+        "node_modules",
+        ".git",
+        "firebase-debug.log",
+        "firebase-debug.*.log"
+      ],
       "predeploy": [
         "npm --prefix \"$RESOURCE_DIR\" run lint",
         "npm --prefix \"$RESOURCE_DIR\" run build"
@@ -11,12 +16,16 @@
     }
   ],
   "firestore": {
-    "rules": "src/firebase/firestore.rules",
-    "indexes": "src/firebase/firestore.indexes.json"
+    "rules": "firestore.rules",
+    "indexes": "firestore.indexes.json"
   },
   "hosting": {
     "public": "dist",
-    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
     "rewrites": [
       {
         "source": "**",
diff --git a/src/assets/base.css b/src/assets/base.css
index 8816868..d3de42e 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -62,23 +62,10 @@ body {
   min-height: 100vh;
   color: var(--color-text);
   background: var(--color-background);
-  transition:
-    color 0.5s,
-    background-color 0.5s;
+  transition: color 0.5s, background-color 0.5s;
   line-height: 1.6;
-  font-family:
-    Inter,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    'Fira Sans',
-    'Droid Sans',
-    'Helvetica Neue',
-    sans-serif;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   font-size: 15px;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
diff --git a/src/components/Apikey.vue b/src/components/Apikey.vue
index 9c61cec..8a8c2a4 100644
--- a/src/components/Apikey.vue
+++ b/src/components/Apikey.vue
@@ -2,8 +2,8 @@
   <AWLHeader />
   <div>
     <h1>API Key</h1>
-    <p>Your API key is: {{ apiKey }} <ContentCopyIcon @click ="copyApikey"/></p>
-    <SnackBarVue :message="snackbarMessage" ref="snackbar"/>
+    <p>Your API key is: {{ apiKey }} <ContentCopyIcon @click="copyApikey" /></p>
+    <SnackBarVue :message="snackbarMessage" ref="snackbar" />
     <button @click="rotateKey">Rotate Key</button>
   </div>
 </template>
@@ -31,7 +31,6 @@ const rotateKey = () => {
   store.rotateKey()
   snackbarMessage.value = 'ApiKey rotated'
 }
-
 </script>
 
 <style scoped></style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index fc813f0..8bb63f0 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -29,7 +29,7 @@
 <script lang="ts" setup>
 import { useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
-import LogOutIcon from "vue-material-design-icons/Logout.vue"
+import LogOutIcon from 'vue-material-design-icons/Logout.vue'
 
 const router = useRouter()
 const { user, logout } = useAuthStore()
@@ -42,7 +42,6 @@ const handleLogout = async () => {
     console.error('Logout failed:', error)
   }
 }
-
 </script>
 
 <style scoped>
diff --git a/src/components/Leaderboard.vue b/src/components/Leaderboard.vue
index f29bd20..3f3d988 100644
--- a/src/components/Leaderboard.vue
+++ b/src/components/Leaderboard.vue
@@ -46,10 +46,9 @@ onMounted(async () => {
 // Helper method to format time in minutes and hours
 const formatTime = (seconds: number) => {
   const hours = Math.floor(seconds / 3600)
-  const minutes = Math.ceil(seconds % 3600 / 60)
+  const minutes = Math.ceil((seconds % 3600) / 60)
   return `${hours}h ${minutes}m`
 }
-
 </script>
 
 <style scoped>
diff --git a/src/components/PieChart.vue b/src/components/PieChart.vue
index 46ebb31..7cec66d 100644
--- a/src/components/PieChart.vue
+++ b/src/components/PieChart.vue
@@ -3,34 +3,34 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onMounted } from 'vue';
-import type { ScreenTimeSummary } from '@/types';
-import autocolors from 'chartjs-plugin-autocolors';
-import { Chart as ChartJS, ArcElement,PieController} from 'chart.js';
+import { ref, watch, onMounted } from 'vue'
+import type { ScreenTimeSummary } from '@/types'
+import autocolors from 'chartjs-plugin-autocolors'
+import { Chart as ChartJS, ArcElement, PieController } from 'chart.js'
 
-ChartJS.register(autocolors, ArcElement, PieController);
+ChartJS.register(autocolors, ArcElement, PieController)
 
 interface Props {
-  summaries: ScreenTimeSummary[] | null;
+  summaries: ScreenTimeSummary[] | null
 }
 
-const props = defineProps<Props>();
-const canvasRef = ref<HTMLCanvasElement>();
+const props = defineProps<Props>()
+const canvasRef = ref<HTMLCanvasElement>()
 
 const getChartData = () => {
-  const uniqueCategoriesSet: Set<string> = new Set();
+  const uniqueCategoriesSet: Set<string> = new Set()
   props.summaries?.forEach((summary) => {
     for (const category in summary.categoryTotals) {
-      uniqueCategoriesSet.add(category);
+      uniqueCategoriesSet.add(category)
     }
-  });
-  const uniqueCategories = Array.from(uniqueCategoriesSet);
-  const categoryTotals: number[] = [];
+  })
+  const uniqueCategories = Array.from(uniqueCategoriesSet)
+  const categoryTotals: number[] = []
   for (const category of uniqueCategories) {
     const categoryTotal = props.summaries?.reduce((acc, summary) => {
-      return acc + (summary.categoryTotals[category] || 0);
-    }, 0);
-    categoryTotals.push(categoryTotal || 0);
+      return acc + (summary.categoryTotals[category] || 0)
+    }, 0)
+    categoryTotals.push(categoryTotal || 0)
   }
   return {
     labels: uniqueCategories,
@@ -40,16 +40,16 @@ const getChartData = () => {
         data: categoryTotals
       }
     ]
-  };
-};
+  }
+}
 
 const renderChart = () => {
-  const canvas = canvasRef.value;
-  if (!canvas) return;
-  const ctx = canvas.getContext('2d');
-  if (!ctx) return;
+  const canvas = canvasRef.value
+  if (!canvas) return
+  const ctx = canvas.getContext('2d')
+  if (!ctx) return
 
-  ChartJS.getChart(canvas)?.destroy();
+  ChartJS.getChart(canvas)?.destroy()
 
   new ChartJS(ctx, {
     type: 'pie',
@@ -63,17 +63,20 @@ const renderChart = () => {
         }
       }
     }
-  });
-};
+  })
+}
 
-watch( () => props.summaries, (newValue, oldValue) => {
-  if (newValue !== oldValue) {
-    renderChart();
-  }
-}, { deep: true });
+watch(
+  () => props.summaries,
+  (newValue, oldValue) => {
+    if (newValue !== oldValue) {
+      renderChart()
+    }
+  },
+  { deep: true }
+)
 
-onMounted(()=>{
+onMounted(() => {
   renderChart()
 })
 </script>
-
diff --git a/src/components/SnackBar.vue b/src/components/SnackBar.vue
index 7246cf2..65163ca 100644
--- a/src/components/SnackBar.vue
+++ b/src/components/SnackBar.vue
@@ -1,80 +1,80 @@
 <template>
-    <div v-if="show" class="snackbar" :class="{ show: show }">
-        {{ message }}
-    </div>
+  <div v-if="show" class="snackbar" :class="{ show: show }">
+    {{ message }}
+  </div>
 </template>
 
 <script lang="ts">
 export default {
-props: {
+  props: {
     message: {
-    type: String,
-    required: true,
+      type: String,
+      required: true
     },
     duration: {
-    type: Number,
-    default: 3000,
-    },
-},
-data() {
+      type: Number,
+      default: 3000
+    }
+  },
+  data() {
     return {
-    show: false,
-    };
-},
-methods: {
+      show: false
+    }
+  },
+  methods: {
     display() {
-    this.show = true;
-    setTimeout(() => {
-        this.show = false;
-    }, this.duration);
-    },
-},
-watch: {
+      this.show = true
+      setTimeout(() => {
+        this.show = false
+      }, this.duration)
+    }
+  },
+  watch: {
     message() {
-    this.display();
-    },
-},
-};
+      this.display()
+    }
+  }
+}
 </script>
 
 <style scoped>
-    .snackbar {
-    visibility: hidden;
-    min-width: 250px;
-    margin-left: -125px;
-    background-color: #333;
-    color: #fff;
-    text-align: center;
-    border-radius: 2px;
-    padding: 16px;
-    position: fixed;
-    z-index: 1;
-    left: 50%;
+.snackbar {
+  visibility: hidden;
+  min-width: 250px;
+  margin-left: -125px;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+  padding: 16px;
+  position: fixed;
+  z-index: 1;
+  left: 50%;
+  bottom: 30px;
+  font-size: 17px;
+}
+.snackbar.show {
+  visibility: visible;
+  animation: fadein 0.5s, fadeout 0.5s 2.5s;
+}
+@keyframes fadein {
+  from {
+    bottom: 0;
+    opacity: 0;
+  }
+  to {
     bottom: 30px;
-    font-size: 17px;
-    }
-    .snackbar.show {
-    visibility: visible;
-    animation: fadein 0.5s, fadeout 0.5s 2.5s;
-    }
-    @keyframes fadein {
-    from {
-        bottom: 0;
-        opacity: 0;
-    }
-    to {
-        bottom: 30px;
-        opacity: 1;
-    }
-    }
-    @keyframes fadeout {
-    from {
-        bottom: 30px;
-        opacity: 1;
-    }
-    to {
-        bottom: 0;
-        opacity: 0;
-    }
-    }
+    opacity: 1;
+  }
+}
+@keyframes fadeout {
+  from {
+    bottom: 30px;
+    opacity: 1;
+  }
+  to {
+    bottom: 0;
+    opacity: 0;
+  }
+}
 </style>
diff --git a/src/components/StackedBarChart.vue b/src/components/StackedBarChart.vue
index 2f3408a..882b09e 100644
--- a/src/components/StackedBarChart.vue
+++ b/src/components/StackedBarChart.vue
@@ -3,45 +3,63 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch, onMounted} from 'vue';
-import type { ScreenTimeSummary } from '@/types';
-import autocolors from 'chartjs-plugin-autocolors';
-import { Chart as ChartJS, Legend, BarElement, BarController,CategoryScale, LinearScale, Tooltip, Title } from 'chart.js';
+import { ref, watch, onMounted } from 'vue'
+import type { ScreenTimeSummary } from '@/types'
+import autocolors from 'chartjs-plugin-autocolors'
+import {
+  Chart as ChartJS,
+  Legend,
+  BarElement,
+  BarController,
+  CategoryScale,
+  LinearScale,
+  Tooltip,
+  Title
+} from 'chart.js'
 
-ChartJS.register(Title, Tooltip, Legend, BarElement,BarController, CategoryScale, LinearScale, autocolors)
+ChartJS.register(
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  BarController,
+  CategoryScale,
+  LinearScale,
+  autocolors
+)
 
 interface Props {
-  summaries: ScreenTimeSummary[] | null;
+  summaries: ScreenTimeSummary[] | null
 }
 
-const props = defineProps<Props>();
-const canvasRef = ref<HTMLCanvasElement>();
+const props = defineProps<Props>()
+const canvasRef = ref<HTMLCanvasElement>()
 
 const getChartData = () => {
-  const uniqueDates = Array.from(new Set(props.summaries?.map((summary) => summary.date)));
+  const uniqueDates = Array.from(new Set(props.summaries?.map((summary) => summary.date)))
   const uniqueDatesSorted = uniqueDates.sort((a, b) => {
-    const dateA = new Date(a);
-    const dateB = new Date(b);
-    return dateA.getTime() - dateB.getTime();
-  });
+    const dateA = new Date(a)
+    const dateB = new Date(b)
+    return dateA.getTime() - dateB.getTime()
+  })
   const uniqueWeekDays = uniqueDatesSorted.map((date) => {
-    const dateObj = new Date(date);
-    return dateObj.toLocaleDateString('en-US', { weekday: 'short' });
-  });
+    const dateObj = new Date(date)
+    return dateObj.toLocaleDateString('en-US', { weekday: 'short' })
+  })
 
-  const uniqueCategoriesSet: Set<string> = new Set();
+  const uniqueCategoriesSet: Set<string> = new Set()
   props.summaries?.forEach((summary) => {
     for (const category in summary.categoryTotals) {
-      uniqueCategoriesSet.add(category);
+      uniqueCategoriesSet.add(category)
     }
-  });
-  const uniqueCategories = Array.from(uniqueCategoriesSet);
-  const categoryTotals: number[] = [];
+  })
+  const uniqueCategories = Array.from(uniqueCategoriesSet)
+  const categoryTotals: number[] = []
   for (const category of uniqueCategories) {
     const categoryTotal = props.summaries?.reduce((acc, summary) => {
-      return acc + (summary.categoryTotals[category] || 0);
-    }, 0);
-    categoryTotals.push(categoryTotal || 0);
+      return acc + (summary.categoryTotals[category] || 0)
+    }, 0)
+    categoryTotals.push(categoryTotal || 0)
   }
   return {
     labels: uniqueWeekDays,
@@ -49,48 +67,51 @@ const getChartData = () => {
       return {
         label: category,
         data: props.summaries?.map((summary) => summary.categoryTotals[category] || 0)
-      };
+      }
     })
-  };
-};
+  }
+}
 
 const renderChart = () => {
-  const canvas = canvasRef.value;
-  if (!canvas) return;
-  const ctx = canvas.getContext('2d');
-  if (!ctx) return;
+  const canvas = canvasRef.value
+  if (!canvas) return
+  const ctx = canvas.getContext('2d')
+  if (!ctx) return
 
-  ChartJS.getChart(canvas)?.destroy();
+  ChartJS.getChart(canvas)?.destroy()
 
   new ChartJS(ctx, {
     type: 'bar',
     data: getChartData(),
     options: {
-  responsive: true,
-  plugins: {
-    legend: {
-      display: true
+      responsive: true,
+      plugins: {
+        legend: {
+          display: true
+        }
+      },
+      scales: {
+        x: {
+          stacked: true
+        },
+        y: {
+          stacked: true
+        }
+      }
     }
-  },
-  scales: {
-    x: {
-      stacked: true
-    },
-    y: {
-      stacked: true
-    }
-  }
+  })
 }
-  });
-};
 
-watch( () => props.summaries, (newValue, oldValue) => {
-  if (newValue !== oldValue) {
-    renderChart();
-  }
-}, { deep: true })
-onMounted(()=>{
+watch(
+  () => props.summaries,
+  (newValue, oldValue) => {
+    if (newValue !== oldValue) {
+      renderChart()
+    }
+  },
+  { deep: true }
+)
+onMounted(() => {
   renderChart()
 })
-
-</script>
\ No newline at end of file
+</script>
diff --git a/src/firebase/data.ts b/src/firebase/data.ts
index 2eb8f29..915bfc0 100644
--- a/src/firebase/data.ts
+++ b/src/firebase/data.ts
@@ -17,10 +17,10 @@ import {
   query,
   where
 } from 'firebase/firestore/lite'
-import { getFunctions, httpsCallable } from "firebase/functions";
+import { getFunctions, httpsCallable } from 'firebase/functions'
 import type { ScreenTimeData, ScreenTimeSummary } from '@/types'
 
-const functions = getFunctions();
+const functions = getFunctions()
 
 export function dataToSummary(data: ScreenTimeData): ScreenTimeSummary {
   const total = data.events.reduce((acc, event) => acc + event.duration, 0)
@@ -133,18 +133,20 @@ export async function getApiKey(userId: string): Promise<string | null> {
 }
 
 interface ApiResponse {
-  apiKey: string;
+  apiKey: string
 }
 
 export async function rotateKey(userId: string): Promise<string | null> {
   // invoke a callable function to rotate the user's api key
   // this function is defined in functions/src/index.ts
   const rotateApiKey = httpsCallable(functions, 'rotateApiKey')
-  const key = rotateApiKey({ userId: userId }).then((result) => {
-    return (result.data as ApiResponse)?.apiKey;
-  }).catch((error) => {
-    console.error(error)
-    return null
-  })
+  const key = rotateApiKey({ userId: userId })
+    .then((result) => {
+      return (result.data as ApiResponse)?.apiKey
+    })
+    .catch((error) => {
+      console.error(error)
+      return null
+    })
   return key
 }
diff --git a/src/stores/apikey.ts b/src/stores/apikey.ts
index f67c344..4a26465 100644
--- a/src/stores/apikey.ts
+++ b/src/stores/apikey.ts
@@ -3,27 +3,29 @@ import { getApiKey, rotateKey as rotateKeyCallable } from '@/firebase/data'
 import { useAuthStore } from './auth'
 import { ref } from 'vue'
 
-export const useApiKeyStore = defineStore('apikey', () => {
-  const apikey = ref(null as string | null)
-  function fetchKey() {
-    const userId = useAuthStore().user!.uid
-    getApiKey(userId).then((key) => {
-      if (key == apikey.value) return;
-      apikey.value = key
-    })
-  }
-  function rotateKey() {
-    const userId = useAuthStore().user!.uid
-    rotateKeyCallable(userId).then((key) => {
-      console.log('Key is now', key)
-      if (key != null) {
+export const useApiKeyStore = defineStore(
+  'apikey',
+  () => {
+    const apikey = ref(null as string | null)
+    function fetchKey() {
+      const userId = useAuthStore().user!.uid
+      getApiKey(userId).then((key) => {
+        if (key == apikey.value) return
         apikey.value = key
-      }
-  })
+      })
+    }
+    function rotateKey() {
+      const userId = useAuthStore().user!.uid
+      rotateKeyCallable(userId).then((key) => {
+        console.log('Key is now', key)
+        if (key != null) {
+          apikey.value = key
+        }
+      })
+    }
+    return { apikey, fetchKey, rotateKey }
+  },
+  {
+    persist: true
   }
-  return { apikey, fetchKey, rotateKey }
-},
-{
-  persist: true
-}
 )
diff --git a/src/stores/screentime.ts b/src/stores/screentime.ts
index 28119ba..dc49fe0 100644
--- a/src/stores/screentime.ts
+++ b/src/stores/screentime.ts
@@ -3,17 +3,19 @@ import { getScreenTimeData, dataToSummary } from '@/firebase/data'
 import type { ScreenTimeSummary, ScreenTimeData } from '@/types'
 import { useAuthStore } from './auth'
 import { getFirestore, collection, onSnapshot } from 'firebase/firestore'
-import { ref,computed, type ComputedRef, watch } from 'vue'
+import { ref, computed, type ComputedRef, watch } from 'vue'
 
-export const useScreenTimeStore = defineStore('screentime', () => {
-  const screenTimeData = ref<ScreenTimeData[]>([])
-  const summary:ComputedRef<ScreenTimeSummary[]> = computed(
-    () => screenTimeData.value.map((data) => dataToSummary(data))
-  )
-  const userId = useAuthStore().user!.uid
-  const db = getFirestore()
-  const colRef = collection(db, 'screentime/' + userId + '/' + userId)
-  onSnapshot(colRef, (snapshot) => {
+export const useScreenTimeStore = defineStore(
+  'screentime',
+  () => {
+    const screenTimeData = ref<ScreenTimeData[]>([])
+    const summary: ComputedRef<ScreenTimeSummary[]> = computed(() =>
+      screenTimeData.value.map((data) => dataToSummary(data))
+    )
+    const userId = useAuthStore().user!.uid
+    const db = getFirestore()
+    const colRef = collection(db, 'screentime/' + userId + '/' + userId)
+    onSnapshot(colRef, (snapshot) => {
       const changes = snapshot.docChanges()
       if (changes.length === 0) return
       console.log('updated screenTimeData')
@@ -26,13 +28,18 @@ export const useScreenTimeStore = defineStore('screentime', () => {
         }
       })
     })
-  
-  // resets the store on user logout
-  watch(() => userId, () => {
-    screenTimeData.value = []
-  })
 
-  return { screenTimeData, summary}
-}, {
-  persist: true
-})
+    // resets the store on user logout
+    watch(
+      () => userId,
+      () => {
+        screenTimeData.value = []
+      }
+    )
+
+    return { screenTimeData, summary }
+  },
+  {
+    persist: true
+  }
+)
diff --git a/src/vue-material-design-icons.d.ts b/src/vue-material-design-icons.d.ts
index ddcfd69..4e2588a 100644
--- a/src/vue-material-design-icons.d.ts
+++ b/src/vue-material-design-icons.d.ts
@@ -1,10 +1,10 @@
 declare module 'vue-material-design-icons/ContentCopy.vue' {
-	import { DefineComponent } from 'vue';
-	const component: DefineComponent<{}, {}, any>;
-	export default component;
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
 }
 declare module 'vue-material-design-icons/Logout.vue' {
-	import { DefineComponent } from 'vue';
-	const component: DefineComponent<{}, {}, any>;
-	export default component;
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
 }