diff --git a/ui/.prettierignore b/ui/.prettierignore
new file mode 100644
index 0000000..f06235c
--- /dev/null
+++ b/ui/.prettierignore
@@ -0,0 +1,2 @@
+node_modules
+dist
diff --git a/ui/.prettierrc b/ui/.prettierrc
new file mode 100644
index 0000000..5a05ecb
--- /dev/null
+++ b/ui/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "es5"
+}
diff --git a/ui/README.md b/ui/README.md
index 253da2a..f2a6300 100644
--- a/ui/README.md
+++ b/ui/README.md
@@ -20,5 +20,10 @@ npm run build
 npm run lint
 ```
 
+### Formats files
+```
+npm run format
+```
+
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/ui/package-lock.json b/ui/package-lock.json
index ce22cc7..3ae6b20 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -8,7 +8,7 @@
       "name": "fitwave",
       "version": "0.1.0",
       "dependencies": {
-        "@vueuse/head": "^2.0.0",
+        "@unhead/vue": "^1.9.11",
         "core-js": "^3.8.3",
         "js-cookie": "^3.0.5",
         "pinia": "^2.1.7",
@@ -25,7 +25,8 @@
         "@vue/cli-plugin-eslint": "~5.0.0",
         "@vue/cli-service": "~5.0.0",
         "eslint": "^7.32.0",
-        "eslint-plugin-vue": "^8.0.3"
+        "eslint-plugin-vue": "^8.0.3",
+        "prettier": "^3.2.5"
       }
     },
     "node_modules/@achrinza/node-ipc": {
@@ -2418,18 +2419,6 @@
         "url": "https://github.com/sponsors/harlan-zw"
       }
     },
-    "node_modules/@unhead/ssr": {
-      "version": "1.9.11",
-      "resolved": "https://registry.npmjs.org/@unhead/ssr/-/ssr-1.9.11.tgz",
-      "integrity": "sha512-qp7a1uRxzYGr1nRYtkbrYmbUOMZaxIErYDg3ZXA4cc4AZ90OFqb6CfRvk79ywWdatfavsfSj29K1NMgKQyH9ZQ==",
-      "dependencies": {
-        "@unhead/schema": "1.9.11",
-        "@unhead/shared": "1.9.11"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/harlan-zw"
-      }
-    },
     "node_modules/@unhead/vue": {
       "version": "1.9.11",
       "resolved": "https://registry.npmjs.org/@unhead/vue/-/vue-1.9.11.tgz",
@@ -3106,6 +3095,22 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@vue/component-compiler-utils/node_modules/prettier": {
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "dev": true,
+      "optional": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/@vue/component-compiler-utils/node_modules/yallist": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/yallist/-/yallist-2.1.2.tgz",
@@ -3202,20 +3207,6 @@
       "integrity": "sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==",
       "dev": true
     },
-    "node_modules/@vueuse/head": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/head/-/head-2.0.0.tgz",
-      "integrity": "sha512-ykdOxTGs95xjD4WXE4na/umxZea2Itl0GWBILas+O4oqS7eXIods38INvk3XkJKjqMdWPcpCyLX/DioLQxU1KA==",
-      "dependencies": {
-        "@unhead/dom": "^1.7.0",
-        "@unhead/schema": "^1.7.0",
-        "@unhead/ssr": "^1.7.0",
-        "@unhead/vue": "^1.7.0"
-      },
-      "peerDependencies": {
-        "vue": ">=2.7 || >=3"
-      }
-    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.12.1",
       "resolved": "https://registry.npmmirror.com/@webassemblyjs/ast/-/ast-1.12.1.tgz",
@@ -8902,16 +8893,18 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.8.8",
-      "resolved": "https://registry.npmmirror.com/prettier/-/prettier-2.8.8.tgz",
-      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
+      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
       "dev": true,
-      "optional": true,
       "bin": {
-        "prettier": "bin-prettier.js"
+        "prettier": "bin/prettier.cjs"
       },
       "engines": {
-        "node": ">=10.13.0"
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
     "node_modules/pretty-error": {
diff --git a/ui/package.json b/ui/package.json
index 655cce6..8031a1d 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -5,10 +5,11 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,vue,html,css,scss}\""
   },
   "dependencies": {
-    "@vueuse/head": "^2.0.0",
+    "@unhead/vue": "^1.9.11",
     "core-js": "^3.8.3",
     "js-cookie": "^3.0.5",
     "pinia": "^2.1.7",
@@ -25,7 +26,8 @@
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^8.0.3"
+    "eslint-plugin-vue": "^8.0.3",
+    "prettier": "^3.2.5"
   },
   "eslintConfig": {
     "root": true,
diff --git a/ui/src/App.vue b/ui/src/App.vue
index 787b806..ea561cf 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -10,7 +10,7 @@ import AppHeader from './components/AppHeader.vue';
 
 export default {
   components: {
-    AppHeader
-  }
-}
+    AppHeader,
+  },
+};
 </script>
diff --git a/ui/src/components/AppHeader.vue b/ui/src/components/AppHeader.vue
index 1258950..57bf2f7 100644
--- a/ui/src/components/AppHeader.vue
+++ b/ui/src/components/AppHeader.vue
@@ -6,19 +6,19 @@
 
 <script>
 import Menubar from 'primevue/menubar';
-import { useRouter } from "vue-router";
-import { useUserStore } from "@/store/user";
+import { useRouter } from 'vue-router';
+import { useUserStore } from '@/store/user';
 
 export default {
   name: 'AppHeader',
   components: {
-    Menubar
+    Menubar,
   },
   setup() {
     const router = useRouter();
     const user = useUserStore();
 
-    return { router, user }
+    return { router, user };
   },
   computed: {
     items() {
@@ -29,42 +29,55 @@ export default {
         {
           label: 'Dashboard',
           icon: 'pi pi-fw pi-home',
-          command: () => this.router.push('/') },
+          command: () => this.router.push('/'),
+        },
         {
           label: 'Settings',
           icon: 'pi pi-fw pi-cog',
-          command: () => this.router.push('/settings')
+          command: () => this.router.push('/settings'),
         },
         {
           label: 'Data',
           icon: 'pi pi-fw pi-server',
           items: [
-            { label: 'Activities', icon: 'pi pi-fw pi-calendar', command: () => this.router.push('/activities') },
-            { label: 'Gears', icon: 'pi pi-fw pi-sitemap', command: () => this.router.push('/gears') },
-            { label: 'Athletes', icon: 'pi pi-fw pi-user', command: () => this.router.push('/athletes') }
-          ]
+            {
+              label: 'Activities',
+              icon: 'pi pi-fw pi-calendar',
+              command: () => this.router.push('/activities'),
+            },
+            {
+              label: 'Gears',
+              icon: 'pi pi-fw pi-sitemap',
+              command: () => this.router.push('/gears'),
+            },
+            {
+              label: 'Athletes',
+              icon: 'pi pi-fw pi-user',
+              command: () => this.router.push('/athletes'),
+            },
+          ],
         },
         {
           label: accessToken ? user.firstname : 'Anonymous',
           icon: 'pi pi-fw pi-user',
           items: [
             ...(accessToken
-                ? [
+              ? [
                   {
                     label: 'Logout',
                     icon: 'pi pi-fw pi-sign-out',
-                    command: () => this.logout()
-                  }
+                    command: () => this.logout(),
+                  },
                 ]
-                : [
+              : [
                   {
                     label: 'Login',
                     icon: 'pi pi-fw pi-sign-in',
-                    command: () => this.router.push('/login')
-                  }
+                    command: () => this.router.push('/login'),
+                  },
                 ]),
-          ]
-        }
+          ],
+        },
       ];
     },
   },
@@ -72,7 +85,7 @@ export default {
     logout() {
       const user = useUserStore();
       user.logout();
-    }
-  }
-}
+    },
+  },
+};
 </script>
diff --git a/ui/src/main.js b/ui/src/main.js
index c69d60b..f227819 100644
--- a/ui/src/main.js
+++ b/ui/src/main.js
@@ -4,6 +4,7 @@ import router from './router';
 import { createPinia } from 'pinia';
 import PrimeVue from 'primevue/config';
 import ToastService from 'primevue/toastservice';
+import { createHead } from '@unhead/vue';
 import 'primevue/resources/themes/saga-blue/theme.css';
 import 'primevue/resources/primevue.min.css';
 import 'primeicons/primeicons.css';
@@ -15,5 +16,6 @@ app.use(createPinia());
 app.use(router);
 app.use(PrimeVue);
 app.use(ToastService);
+app.use(createHead());
 
 app.mount('#app');
diff --git a/ui/src/pages/ActivitiesPage.vue b/ui/src/pages/ActivitiesPage.vue
index 87a6f0d..258400e 100644
--- a/ui/src/pages/ActivitiesPage.vue
+++ b/ui/src/pages/ActivitiesPage.vue
@@ -9,12 +9,14 @@
       <Column field="name" header="Name"></Column>
       <Column :field="athleteName" header="Athlete"></Column>
       <Column field="gear.name" header="Gear"></Column>
-      <template #empty>
-        No records found
-      </template>
+      <template #empty> No records found </template>
     </DataTable>
 
-    <Paginator :rows="20" :totalRecords="count" @page="handlePageChange"></Paginator>
+    <Paginator
+      :rows="20"
+      :totalRecords="count"
+      @page="handlePageChange"
+    ></Paginator>
   </div>
 </template>
 
@@ -26,6 +28,7 @@ import { useToast } from 'primevue/usetoast';
 import DataTable from 'primevue/datatable';
 import Column from 'primevue/column';
 import Paginator from 'primevue/paginator';
+import { useHead } from '@unhead/vue';
 
 export default {
   name: 'ActivitiesPage',
@@ -33,9 +36,11 @@ export default {
     DataTable,
     Column,
     Paginator,
-    Toast
+    Toast,
   },
   setup() {
+    useHead({ title: 'Activities' });
+
     const activities = ref([]);
     const count = ref(0);
     let currentPage = 1;
@@ -73,13 +78,13 @@ export default {
       activities,
       count,
       loading,
-      handlePageChange
+      handlePageChange,
     };
   },
   methods: {
     athleteName(row) {
       return `${row.athlete.firstname} ${row.athlete.lastname}`;
-    }
-  }
-}
+    },
+  },
+};
 </script>
diff --git a/ui/src/pages/AthletesPage.vue b/ui/src/pages/AthletesPage.vue
index 842907a..3261384 100644
--- a/ui/src/pages/AthletesPage.vue
+++ b/ui/src/pages/AthletesPage.vue
@@ -9,12 +9,14 @@
       <Column field="lastname" header="Last Name"></Column>
       <Column field="country" header="Country"></Column>
       <Column field="city" header="City"></Column>
-      <template #empty>
-        No records found
-      </template>
+      <template #empty> No records found </template>
     </DataTable>
 
-    <Paginator :rows="20" :totalRecords="count" @page="handlePageChange"></Paginator>
+    <Paginator
+      :rows="20"
+      :totalRecords="count"
+      @page="handlePageChange"
+    ></Paginator>
   </div>
 </template>
 
@@ -26,6 +28,7 @@ import { useToast } from 'primevue/usetoast';
 import DataTable from 'primevue/datatable';
 import Column from 'primevue/column';
 import Paginator from 'primevue/paginator';
+import { useHead } from '@unhead/vue';
 
 export default {
   name: 'AthletesPage',
@@ -36,6 +39,8 @@ export default {
     Toast,
   },
   setup() {
+    useHead({ title: 'Athletes' });
+
     const athletes = ref([]);
     const count = ref(0);
     let currentPage = 1;
@@ -73,8 +78,8 @@ export default {
       athletes,
       count,
       loading,
-      handlePageChange
+      handlePageChange,
     };
-  }
-}
+  },
+};
 </script>
diff --git a/ui/src/pages/GearsPage.vue b/ui/src/pages/GearsPage.vue
index abff799..cf1324e 100644
--- a/ui/src/pages/GearsPage.vue
+++ b/ui/src/pages/GearsPage.vue
@@ -8,12 +8,14 @@
       <Column field="name" header="Name"></Column>
       <Column field="distance" header="Distance"></Column>
       <Column :field="athleteName" header="Athlete"></Column>
-      <template #empty>
-        No records found
-      </template>
+      <template #empty> No records found </template>
     </DataTable>
 
-    <Paginator :rows="20" :totalRecords="count" @page="handlePageChange"></Paginator>
+    <Paginator
+      :rows="20"
+      :totalRecords="count"
+      @page="handlePageChange"
+    ></Paginator>
   </div>
 </template>
 
@@ -25,6 +27,7 @@ import { useToast } from 'primevue/usetoast';
 import DataTable from 'primevue/datatable';
 import Column from 'primevue/column';
 import Paginator from 'primevue/paginator';
+import { useHead } from '@unhead/vue';
 
 export default {
   name: 'GearsPage',
@@ -32,9 +35,11 @@ export default {
     DataTable,
     Column,
     Paginator,
-    Toast
+    Toast,
   },
   setup() {
+    useHead({ title: 'Gears' });
+
     const gears = ref([]);
     const count = ref(0);
     let currentPage = 1;
@@ -72,13 +77,13 @@ export default {
       gears,
       count,
       loading,
-      handlePageChange
+      handlePageChange,
     };
   },
   methods: {
     athleteName(row) {
       return `${row.athlete.firstname} ${row.athlete.lastname}`;
-    }
-  }
-}
+    },
+  },
+};
 </script>
diff --git a/ui/src/pages/HomePage.vue b/ui/src/pages/HomePage.vue
index 769f1de..bfbb3aa 100644
--- a/ui/src/pages/HomePage.vue
+++ b/ui/src/pages/HomePage.vue
@@ -6,15 +6,14 @@
     <DataTable :value="dashboards" :loading="loading">
       <Column field="id" header="ID"></Column>
       <Column field="name" header="Name"></Column>
-      <template #empty>
-        No records found
-      </template>
+      <template #empty> No records found </template>
     </DataTable>
   </div>
 </template>
 
 <script>
 import { ref, onMounted } from 'vue';
+import { useHead } from '@unhead/vue';
 import { fetchDashboards } from '@/services/dashboars';
 import Toast from 'primevue/toast';
 import { useToast } from 'primevue/usetoast';
@@ -26,9 +25,11 @@ export default {
   components: {
     DataTable,
     Column,
-    Toast
+    Toast,
   },
   setup() {
+    useHead({ title: 'Dashboard' });
+
     const dashboards = ref([]);
     const loading = ref(false);
     const toast = useToast();
@@ -58,6 +59,6 @@ export default {
       dashboards,
       loading,
     };
-  }
-}
+  },
+};
 </script>
diff --git a/ui/src/pages/LoginPage.vue b/ui/src/pages/LoginPage.vue
index 67b8318..dee0d8a 100644
--- a/ui/src/pages/LoginPage.vue
+++ b/ui/src/pages/LoginPage.vue
@@ -11,8 +11,9 @@
       <template #content>
         <div>
           <p class="mb-3">
-            To log in, please click the "Login with Strava"
-            button below. Once the login process is complete, Strava will redirect you back to our application.
+            To log in, please click the "Login with Strava" button below. Once
+            the login process is complete, Strava will redirect you back to our
+            application.
           </p>
         </div>
         <Button
@@ -30,15 +31,15 @@
 <script>
 import Toast from 'primevue/toast';
 import Button from 'primevue/button';
-import {onMounted, ref} from 'vue';
-import {useToast} from 'primevue/usetoast';
-import {getAccessToken, getAuthorizationURL} from '@/services/auth';
-import {useRoute, useRouter} from 'vue-router';
-import {useUserStore} from "@/store/user";
-import Cookies from "js-cookie";
+import { onMounted, ref } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { getAccessToken, getAuthorizationURL } from '@/services/auth';
+import { useRoute, useRouter } from 'vue-router';
+import { useUserStore } from '@/store/user';
 import Message from 'primevue/message';
 import Card from 'primevue/card';
-import { getUserConfig } from "@/services/user";
+import { getUserConfig } from '@/services/user';
+import { useHead } from '@unhead/vue';
 
 export default {
   name: 'LoginPage',
@@ -46,9 +47,11 @@ export default {
     Toast,
     Button,
     Message,
-    Card
+    Card,
   },
   setup() {
+    useHead({ title: 'Login' });
+
     const loading = ref(false);
     const toast = useToast();
     const user = useUserStore();
@@ -61,12 +64,12 @@ export default {
       const resp = await getAccessToken(code);
       user.login(resp.access_token, resp.athlete);
       await router.push('/');
-    }
+    };
 
     const fetchURL = async () => {
       const resp = await getAuthorizationURL();
       url.value = resp.authorization_url;
-    }
+    };
 
     onMounted(async () => {
       try {
@@ -90,7 +93,7 @@ export default {
       } finally {
         loading.value = false;
       }
-    })
+    });
 
     return {
       loading,
@@ -98,17 +101,17 @@ export default {
       url,
       user,
       config,
-    }
+    };
   },
   methods: {
     redirectToStrava() {
       window.location.href = this.url;
-    }
+    },
   },
   computed: {
     isSyncEligible() {
       return !!this.config.client_id && !!this.config.client_secret;
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/ui/src/pages/SettingsPage.vue b/ui/src/pages/SettingsPage.vue
index beeacf7..f67dd82 100644
--- a/ui/src/pages/SettingsPage.vue
+++ b/ui/src/pages/SettingsPage.vue
@@ -13,14 +13,24 @@
             <label for="client_secret">Client Secret:</label>
             <InputText v-model="clientSecret" id="client_secret" />
           </div>
-          <Button :disabled="loading" label="Save" type="submit" icon="pi pi-save" />
+          <Button
+            :disabled="loading"
+            label="Save"
+            type="submit"
+            icon="pi pi-save"
+          />
         </form>
       </TabPanel>
       <TabPanel header="Sync Data">
         <Message v-if="!isSyncEligible" severity="error">
-          You need to fill config from first to be able to sync your Strava data.
+          You need to fill config from first to be able to sync your Strava
+          data.
         </Message>
-        <div v-else>
+        <Message v-else-if="!accessToken" severity="info">
+          You need to Login with Strava to be able to sync your data.
+        </Message>
+
+        <div v-if="isSyncEligible">
           <Button
             v-if="accessToken"
             :disabled="loading"
@@ -50,7 +60,7 @@ import {
   getUserConfig,
   saveUserConfig,
   triggerSync,
-  getTaskDetail
+  getTaskDetail,
 } from '@/services/user';
 import Toast from 'primevue/toast';
 import { useToast } from 'primevue/usetoast';
@@ -59,7 +69,8 @@ import Button from 'primevue/button';
 import TabView from 'primevue/tabview';
 import TabPanel from 'primevue/tabpanel';
 import Message from 'primevue/message';
-import { useUserStore } from "@/store/user";
+import { useUserStore } from '@/store/user';
+import { useHead } from '@unhead/vue';
 
 export default {
   name: 'SettingsPage',
@@ -69,9 +80,11 @@ export default {
     Toast,
     TabView,
     TabPanel,
-    Message
+    Message,
   },
   setup() {
+    useHead({ title: 'Settings' });
+
     const clientId = ref('');
     const clientSecret = ref('');
     const toast = useToast();
@@ -108,7 +121,7 @@ export default {
     ...mapState(useUserStore, ['user', 'accessToken']),
     isSyncEligible() {
       return !!this.clientId && !!this.clientSecret;
-    }
+    },
   },
   methods: {
     async saveSettings() {
@@ -116,7 +129,7 @@ export default {
         this.loading = true;
         await saveUserConfig({
           client_id: parseInt(this.clientId),
-          client_secret: this.clientSecret
+          client_secret: this.clientSecret,
         });
         this.toast.add({
           severity: 'success',
@@ -136,7 +149,7 @@ export default {
       }
     },
     async delay(ms) {
-      return new Promise(resolve => setTimeout(resolve, ms));
+      return new Promise((resolve) => setTimeout(resolve, ms));
     },
     async syncData() {
       try {
@@ -166,9 +179,9 @@ export default {
       } finally {
         this.loading = false;
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style scoped>
diff --git a/ui/src/router/index.js b/ui/src/router/index.js
index 305e8ca..74375a2 100644
--- a/ui/src/router/index.js
+++ b/ui/src/router/index.js
@@ -7,7 +7,7 @@ import AthletesPage from '@/pages/AthletesPage';
 import ActivitiesPage from '@/pages/ActivitiesPage';
 import GearsPage from '@/pages/GearsPage';
 import { useUserStore } from '@/store/user';
-import { getUserMe } from "@/services/user";
+import { getUserMe } from '@/services/user';
 
 const routes = [
   { path: '/', name: 'Home', component: HomePage },
@@ -15,12 +15,12 @@ const routes = [
   { path: '/settings', name: 'Settings', component: SettingsPage },
   { path: '/activities', name: 'Activities', component: ActivitiesPage },
   { path: '/athletes', name: 'Athletes', component: AthletesPage },
-  { path: '/gears', name: 'Gears', component: GearsPage }
+  { path: '/gears', name: 'Gears', component: GearsPage },
 ];
 
 const router = createRouter({
   history: createWebHistory(),
-  routes
+  routes,
 });
 
 router.beforeEach(async (to, from, next) => {
diff --git a/ui/src/services/activities.js b/ui/src/services/activities.js
index d565cb5..f0e1c1e 100644
--- a/ui/src/services/activities.js
+++ b/ui/src/services/activities.js
@@ -4,8 +4,8 @@ export async function fetchActivities(page) {
   const response = await fetch(`${API_BASE_URL}/activities?page=${page}`, {
     method: 'GET',
     headers: {
-      'Content-Type': 'application/json'
-    }
+      'Content-Type': 'application/json',
+    },
   });
 
   if (!response.ok) {
diff --git a/ui/src/services/athletes.js b/ui/src/services/athletes.js
index ea6402a..cc10e6f 100644
--- a/ui/src/services/athletes.js
+++ b/ui/src/services/athletes.js
@@ -4,8 +4,8 @@ export async function fetchAthletes(page) {
   const response = await fetch(`${API_BASE_URL}/athletes?page=${page}`, {
     method: 'GET',
     headers: {
-      'Content-Type': 'application/json'
-    }
+      'Content-Type': 'application/json',
+    },
   });
 
   if (!response.ok) {
diff --git a/ui/src/services/auth.js b/ui/src/services/auth.js
index a21d8cf..b3efef7 100644
--- a/ui/src/services/auth.js
+++ b/ui/src/services/auth.js
@@ -5,8 +5,8 @@ export async function getAuthorizationURL() {
   const response = await fetch(endpoint, {
     method: 'GET',
     headers: {
-      'Content-Type': 'application/json'
-    }
+      'Content-Type': 'application/json',
+    },
   });
 
   if (!response.ok) {
@@ -21,9 +21,9 @@ export async function getAccessToken(code) {
   const response = await fetch(endpoint, {
     method: 'POST',
     headers: {
-      'Content-Type': 'application/json'
+      'Content-Type': 'application/json',
     },
-    body: JSON.stringify({ code })
+    body: JSON.stringify({ code }),
   });
 
   if (!response.ok) {
diff --git a/ui/src/services/dashboars.js b/ui/src/services/dashboars.js
index bce6af2..d1ec508 100644
--- a/ui/src/services/dashboars.js
+++ b/ui/src/services/dashboars.js
@@ -4,8 +4,8 @@ export async function fetchDashboards() {
   const response = await fetch(`${API_BASE_URL}/dashboards`, {
     method: 'GET',
     headers: {
-      'Content-Type': 'application/json'
-    }
+      'Content-Type': 'application/json',
+    },
   });
 
   if (!response.ok) {
diff --git a/ui/src/services/gears.js b/ui/src/services/gears.js
index 09af19f..8e33a67 100644
--- a/ui/src/services/gears.js
+++ b/ui/src/services/gears.js
@@ -4,8 +4,8 @@ export async function fetchGears(page) {
   const response = await fetch(`${API_BASE_URL}/gears?page=${page}`, {
     method: 'GET',
     headers: {
-      'Content-Type': 'application/json'
-    }
+      'Content-Type': 'application/json',
+    },
   });
 
   if (!response.ok) {
diff --git a/ui/src/services/user.js b/ui/src/services/user.js
index 4021b01..8e965a7 100644
--- a/ui/src/services/user.js
+++ b/ui/src/services/user.js
@@ -4,8 +4,8 @@ export async function getUserConfig() {
   const response = await fetch(`${API_BASE_URL}/user/config`, {
     method: 'GET',
     headers: {
-      'Content-Type': 'application/json'
-    }
+      'Content-Type': 'application/json',
+    },
   });
 
   if (!response.ok) {
@@ -20,8 +20,8 @@ export async function getUserMe(accessToken) {
     method: 'GET',
     headers: {
       'Content-Type': 'application/json',
-      Authorization: `Bearer ${accessToken}`
-    }
+      Authorization: `Bearer ${accessToken}`,
+    },
   });
 
   if (!response.ok) {
@@ -36,7 +36,7 @@ export async function getTaskDetail(id) {
     method: 'GET',
     headers: {
       'Content-Type': 'application/json',
-    }
+    },
   });
 
   if (!response.ok) {
@@ -51,8 +51,8 @@ export async function triggerSync(accessToken) {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
-      Authorization: `Bearer ${accessToken}`
-    }
+      Authorization: `Bearer ${accessToken}`,
+    },
   });
 
   if (!response.ok) {
@@ -66,9 +66,9 @@ export async function saveUserConfig(config) {
   const response = await fetch(`${API_BASE_URL}/user/config`, {
     method: 'PUT',
     headers: {
-      'Content-Type': 'application/json'
+      'Content-Type': 'application/json',
     },
-    body: JSON.stringify(config)
+    body: JSON.stringify(config),
   });
 
   if (!response.ok) {
diff --git a/ui/src/store/user.js b/ui/src/store/user.js
index d528019..b6e5c1b 100644
--- a/ui/src/store/user.js
+++ b/ui/src/store/user.js
@@ -1,10 +1,10 @@
 import { defineStore } from 'pinia';
-import Cookies from "js-cookie";
+import Cookies from 'js-cookie';
 
 export const useUserStore = defineStore('user', {
   state: () => ({
     accessToken: '',
-    user: {}
+    user: {},
   }),
   actions: {
     logout() {
@@ -19,6 +19,6 @@ export const useUserStore = defineStore('user', {
     setUser(accessToken, user) {
       this.accessToken = accessToken;
       this.user = user;
-    }
-  }
+    },
+  },
 });