diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 5d83befe1..746d294aa 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -151,6 +151,21 @@ const checkLogin = async () => {
   }
 };
 
+// provide methods for logging the user in and out for corresponding buttons in child components
+const login = () => {
+  auth.loginWithRedirect();
+};
+const logout = async () => {
+  currentUser.reset();
+  await auth.logout({
+    logoutParams: {
+      returnTo: window.location.origin,
+    },
+  });
+};
+provide("login", login);
+provide("logout", logout);
+
 // query db for all calendar data
 const getDbCalendars = async (onlyConnected = true) => {
   const { data, error } = await call(`me/calendars?only_connected=${onlyConnected}`).get().json();
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index f0d12fc61..a04ecca4d 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -96,3 +96,14 @@
     @apply placeholder:text-gray-300 dark:placeholder:text-gray-500;
   }
 }
+
+/* vue specific classes */
+.v-enter-active,
+.v-leave-active {
+  @apply transition-opacity;
+}
+
+.v-enter-from,
+.v-leave-to {
+  @apply opacity-0;
+}
diff --git a/frontend/src/components/NavBar.vue b/frontend/src/components/NavBar.vue
index 032ea2964..5eed8b372 100644
--- a/frontend/src/components/NavBar.vue
+++ b/frontend/src/components/NavBar.vue
@@ -25,50 +25,85 @@
         :placeholder="t('label.search')"
       />
     </label> -->
-    <nav class="flex gap-4 items-stretch">
-      <ul class="flex justify-end gap-8">
-        <li
+    <nav v-if="user.exists()" class="flex gap-4 items-stretch">
+      <div class="flex justify-end gap-8">
+        <nav-bar-item
           v-for="item in navItems"
           :key="item"
-          class="flex text-base border-b-4 border-b-transparent transition-all ease-in-out"
-          :class="{
-            'font-semibold border-b-teal-500 text-teal-500': route.name == item,
-            'text-gray-600 dark:text-gray-300 hover:border-b-gray-200 dark:hover:border-b-gray-400':
-              route.name != item,
-          }"
-        >
-          <router-link class="flex justify-center min-w-[120px] items-center" :to="{ name: item }">
-            {{ t("label." + item) }}
-          </router-link>
-        </li>
-      </ul>
-      <router-link
-        v-if="user.exists()"
-        :to="{ name: 'profile' }"
-        class="w-12 h-12 mr-4 self-center flex-center rounded-full bg-teal-500 text-lg font-normal text-white"
-      >
-        {{ initials(user.data.name) }}
-      </router-link>
+          :active="route.name == item"
+          :label="t(`label.${item}`)"
+          :link-name="item"
+        />
+      </div>
+      <drop-down class="self-center">
+        <template #trigger>
+          <div
+            class="w-12 h-12 mr-4 flex-center rounded-full bg-teal-500 text-lg font-normal text-white"
+          >
+            {{ initials(user.data.name) }}
+          </div>
+        </template>
+        <template #default>
+          <div class="flex flex-col gap-2 rounded-md w-48 p-4 bg-white dark:bg-gray-700 shadow-md">
+            <router-link :to="{ name: 'profile' }" class="p-2">
+              {{ t('label.userProfile') }}
+            </router-link>
+            <text-button
+              v-show="signedUserUrl"
+              :label="t('label.shareMyLink')"
+              :copy="signedUserUrl"
+              class="border-none flex-row-reverse justify-between !text-inherit !text-base !font-normal hover:bg-inherit hover:shadow-none"
+            />
+            <hr class="border-teal-500" />
+            <div @click="logout" class="cursor-pointer p-2">
+              {{ t('label.logOut') }}
+            </div>
+          </div>
+        </template>
+      </drop-down>
     </nav>
   </header>
 </template>
 
 <script setup>
+import { ref, inject, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import { initials } from '@/utils';
 import { useUserStore } from '@/stores/user-store';
+import NavBarItem from "@/elements/NavBarItem";
+import DropDown from "@/elements/DropDown";
+import TextButton from "@/elements/TextButton";
 
 // icons
+import { IconExternalLink } from '@tabler/icons-vue';
 // import { IconSearch } from '@tabler/icons-vue';
 
 // component constants
 const user = useUserStore();
 const route = useRoute();
 const { t } = useI18n();
+const logout = inject('logout');
+const call = inject('call');
 
 // component properties
 defineProps({
   navItems: Array, // list of route names that are also lang keys (format: label.<key>), used as nav items
 });
+
+const signedUserUrl = ref('');
+
+const getSignedUserUrl = async () => {
+  // Retrieve the user short url
+  const { data, error } = await call('me/signature').get().json();
+  if (error.value) {
+    return;
+  }
+
+  signedUserUrl.value = data.value.url;
+};
+
+onMounted(async () => {
+  await getSignedUserUrl();
+});
 </script>
diff --git a/frontend/src/components/ScheduleCreation.vue b/frontend/src/components/ScheduleCreation.vue
index bb64baf02..e517831a2 100644
--- a/frontend/src/components/ScheduleCreation.vue
+++ b/frontend/src/components/ScheduleCreation.vue
@@ -265,6 +265,13 @@
       </div>
     </div>
     <!-- action buttons -->
+    <div class="flex justify-center gap-4 mt-auto">
+      <primary-button
+        v-if="publicLink && existing"
+        :label="t('label.shareMyLink')"
+        :copy="publicLink"
+      />
+    </div>
     <div class="flex gap-4 mt-auto">
       <secondary-button
         :label="t('label.cancel')"
@@ -294,7 +301,7 @@
     :open="savedConfirmation.show"
     :is-schedule="true"
     :title="savedConfirmation.title"
-    :public-link="savedConfirmation.publicLink"
+    :public-link="publicLink"
     @close="closeCreatedModal"
   />
 </template>
@@ -310,7 +317,7 @@ import SecondaryButton from "@/elements/SecondaryButton";
 import TabBar from "@/components/TabBar";
 
 // icons
-import { IconChevronDown } from "@tabler/icons-vue";
+import { IconChevronDown, IconExternalLink } from "@tabler/icons-vue";
 import AlertBox from "@/elements/AlertBox";
 import SwitchToggle from "@/elements/SwitchToggle";
 
@@ -457,7 +464,6 @@ const farthest = computed(() => dj.duration(scheduleInput.value.farthest_booking
 const savedConfirmation = reactive({
   show: false,
   title: "",
-  publicLink: "",
 });
 const closeCreatedModal = () => {
   savedConfirmation.show = false;
@@ -469,6 +475,15 @@ const resetSchedule = () => {
   state.value = scheduleCreationState.details;
 };
 
+// hold public availability link of user
+const publicLink = ref('');
+onMounted(async () => {
+  const { data, error } = await call('me/signature').get().json();
+  if (!error.value) {
+    publicLink.value = data.value.url;
+  }
+});
+
 // handle actual schedule creation/update
 const savingInProgress = ref(false);
 const saveSchedule = async (withConfirmation = true) => {
@@ -514,7 +529,7 @@ const saveSchedule = async (withConfirmation = true) => {
   
     // show confirmation
     savedConfirmation.title = data.value.name;
-    savedConfirmation.publicLink = sig_data.value.url;
+    publicLink.value = sig_data.value.url;
     savedConfirmation.show = true;
   }
 
diff --git a/frontend/src/components/SettingsAccount.vue b/frontend/src/components/SettingsAccount.vue
index 08da4b739..f615ba4b3 100644
--- a/frontend/src/components/SettingsAccount.vue
+++ b/frontend/src/components/SettingsAccount.vue
@@ -150,9 +150,7 @@
 </template>
 
 <script setup>
-import {
-  ref, inject, onMounted, computed,
-} from 'vue';
+import { ref, inject, onMounted, computed } from 'vue';
 import { useAuth0 } from '@auth0/auth0-vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
@@ -173,6 +171,7 @@ const call = inject('call');
 const refresh = inject('refresh');
 const router = useRouter();
 const user = useUserStore();
+const logout = inject('logout');
 
 const externalConnections = ref({});
 const hasZoomAccountConnected = computed(() => (externalConnections.value?.zoom?.length ?? []) > 0);
@@ -351,12 +350,7 @@ const actuallyDeleteAccount = async () => {
   }
 
   if (auth0) {
-    user.reset();
-    await auth0.logout({
-      logoutParams: {
-        returnTo: window.location.origin,
-      },
-    });
+    await logout();
   } else {
     await router.push('/');
   }
diff --git a/frontend/src/components/TitleBar.vue b/frontend/src/components/TitleBar.vue
index 2aaad9dd8..5dd4631fb 100644
--- a/frontend/src/components/TitleBar.vue
+++ b/frontend/src/components/TitleBar.vue
@@ -12,14 +12,11 @@
 </template>
 
 <script setup>
-import { useAuth0 } from '@auth0/auth0-vue';
+import { inject } from 'vue';
 import { useI18n } from 'vue-i18n';
 import PrimaryButton from '@/elements/PrimaryButton';
 
 const { t } = useI18n();
-const auth0 = useAuth0();
+const login = inject('login');
 
-const login = () => {
-  auth0.loginWithRedirect();
-};
 </script>
diff --git a/frontend/src/elements/DropDown.vue b/frontend/src/elements/DropDown.vue
new file mode 100644
index 000000000..19370c801
--- /dev/null
+++ b/frontend/src/elements/DropDown.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="relative" v-on-click-outside="close">
+    <div class="cursor-pointer select-none" @click="toggle">
+      <slot name="trigger"></slot>
+    </div>
+    <transition>
+      <div v-show="open" class="absolute right-0" @click="close">
+        <slot></slot>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { vOnClickOutside } from '@vueuse/components';
+
+const open = ref(false);
+const toggle = () => { open.value = !open.value; };
+const close = () => { open.value = false; };
+</script>
diff --git a/frontend/src/elements/NavBarItem.vue b/frontend/src/elements/NavBarItem.vue
new file mode 100644
index 000000000..f5d0c1118
--- /dev/null
+++ b/frontend/src/elements/NavBarItem.vue
@@ -0,0 +1,26 @@
+<template>
+  <div
+    class="relative group flex font-medium text-base"
+    :class="{ 'text-gray-600 dark:text-gray-300': !active }"
+  >
+    <router-link class="flex justify-center min-w-[120px] items-center" :to="{ name: linkName }">
+      {{ label }}
+    </router-link>
+    <div
+      class="absolute rounded bottom-0 h-1 w-full bg-transparent transition-colors ease-in-out"
+      :class="{
+        'bg-gradient-to-r from-teal-500 to-sky-500': active,
+        'group-hover:bg-gray-200 group-hover:dark:bg-gray-400': !active,
+      }"
+    ></div>
+  </div>
+</template>
+
+<script setup>
+// component properties
+defineProps({
+  active: Boolean,  // indicator for currently active item
+  label: String,    // item text label
+  linkName: String, // name of the route link target
+});
+</script>
diff --git a/frontend/src/elements/TextButton.vue b/frontend/src/elements/TextButton.vue
index d5efe0738..ad6a9ed4d 100644
--- a/frontend/src/elements/TextButton.vue
+++ b/frontend/src/elements/TextButton.vue
@@ -5,7 +5,7 @@
       transition-all ease-in-out flex items-center justify-center gap-1
       text-gray-500 dark:text-gray-400 border-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800
     "
-    @click="copy ? copyToClipboard() : null"
+    @click.stop="copy ? copyToClipboard() : null"
   >
     <icon-copy
       v-if="copy && !copied"
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index e6beaaa2b..1f8e41a09 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -135,8 +135,8 @@
     "light": "Hell",
     "location": "Ort",
     "logIn": "Anmelden",
-    "logOut": "Abmelden",
     "loginToContinue": "Anmelden um fortzufahren",
+    "logOut": "Abmelden",
     "month": "Monat",
     "myLink": "Mein Link",
     "name": "Name",
@@ -167,6 +167,7 @@
     "selectCalendar": "Kalender auswählen",
     "sendInvitationToAnotherEmail": "Die Einladung an eine andere E-Mail-Adresse senden",
     "settings": "Einstellungen",
+    "shareMyLink": "Meinen Link teilen",
     "showSecondaryTimeZone": "Zeige sekundäre Zeitzone",
     "signInWithGoogle": "Mit Google anmelden",
     "slotLength": "Termindauer",
@@ -185,6 +186,7 @@
     "today": "Heute",
     "updateUsername": "Update username",
     "username": "Benutzername",
+    "userProfile": "Benutzerprofil",
     "videoLink": "Konferenz-Link",
     "viewAll": "Alle ansehen",
     "viewBooking": "Buchung anschauen",
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index d8737e388..3c5789e04 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -167,6 +167,7 @@
     "selectCalendar": "Select calendar",
     "sendInvitationToAnotherEmail": "Send to another email",
     "settings": "Settings",
+    "shareMyLink": "Share my link",
     "showSecondaryTimeZone": "Show secondary time zone",
     "signInWithGoogle": "Sign in with Google",
     "slotLength": "Duration",
@@ -185,6 +186,7 @@
     "today": "Today",
     "updateUsername": "Update username",
     "username": "Username",
+    "userProfile": "User profile",
     "videoLink": "Video Link",
     "viewAll": "View all",
     "viewBooking": "View booking",
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index e574df726..34e9a0140 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -1,82 +1,84 @@
 <template>
-  <section>
-    <div class="flex-center flex-col gap-12">
-      <img class="w-full max-w-xs md:max-w-sm lg:max-w-md" src="/appointment_logo.svg" alt="Appointment Logo" />
-      <h2 class="pt-6 font-display tracking-[0.19em] uppercase text-center text-lg md:text-3xl lg:text-5xl">
-        {{ $t('app.title') }}
-      </h2>
-      <div class="-mb-12 md:-mb-20 lg:-mb-28 xl:-mb-40 flex flex-col flex-center">
-        <h4 class="text-xl tracking-wide leading-9 pt-12 font-light max-w-2xl text-center">
-          {{ $t('text.homepage.intro') }}
-        </h4>
-        <div class="mt-16">
-          <primary-button v-if="!isAuthenticated" :label="$t('label.logIn')" @click="login" />
-          <primary-button v-else-if="isAuthenticated" :label="$t('label.continue')" @click="enter" />
+  <div>
+    <section>
+      <div class="flex-center flex-col gap-12">
+        <img class="w-full max-w-xs md:max-w-sm lg:max-w-md" src="/appointment_logo.svg" alt="Appointment Logo" />
+        <h2 class="pt-6 font-display tracking-[0.19em] uppercase text-center text-lg md:text-3xl lg:text-5xl">
+          {{ $t('app.title') }}
+        </h2>
+        <div class="-mb-12 md:-mb-20 lg:-mb-28 xl:-mb-40 flex flex-col flex-center">
+          <h4 class="text-xl tracking-wide leading-9 pt-12 font-light max-w-2xl text-center">
+            {{ $t('text.homepage.intro') }}
+          </h4>
+          <div class="mt-16">
+            <primary-button v-if="!isAuthenticated" :label="$t('label.logIn')" @click="login" />
+            <primary-button v-else-if="isAuthenticated" :label="$t('label.continue')" @click="enter" />
+          </div>
+        </div>
+        <div class="w-full">
+          <!-- Padding top is rounded up aspect ratio percentage (height / width) of image -->
+          <div class="bg-[url(@/assets/svg/homepage-split.svg)]
+          dark:bg-[url(@/assets/svg/homepage-split-dark.svg)]
+          bg-no-repeat bg-contain h-0 pt-[14%] w-full"
+          ></div>
         </div>
       </div>
-      <div class="w-full">
-        <!-- Padding top is rounded up aspect ratio percentage (height / width) of image -->
-        <div class="bg-[url(@/assets/svg/homepage-split.svg)]
-        dark:bg-[url(@/assets/svg/homepage-split-dark.svg)]
-        bg-no-repeat bg-contain h-0 pt-[14%] w-full"
-        ></div>
-      </div>
-    </div>
-  </section>
-  <section class="mx-4">
-    <h2 class="text-3xl pb-16 pt-16 text-center text-teal-600 dark:text-teal-400">
-      {{ $t('text.homepage.sectionHeader') }}
-    </h2>
-    <section class="flex flex-col gap-16 justify-center mx-auto max-w-full md:flex-row md:max-w-7xl">
-      <InfoBox :title="$t('text.homepage.planEventTitle')">{{ $t('text.homepage.planEventBody') }}</InfoBox>
-      <InfoBox :title="$t('text.homepage.setAvailabilityTitle')">{{ $t('text.homepage.setAvailabilityBody') }}</InfoBox>
-      <InfoBox :title="$t('text.homepage.shareWithOthersTitle')">{{ $t('text.homepage.shareWithOthersBody') }}</InfoBox>
     </section>
-  </section>
-  <section class="w-full">
-      <div class="bg-[url(@/assets/svg/homepage-wave.svg)]
-      dark:bg-[url(@/assets/svg/homepage-wave-dark.svg)]
-      bg-top bg-no-repeat bg-cover w-full"
-      >
-        <div class="pt-[13%]"></div>
-        <div class="w-full flex flex-col md:flex-row relative mx-auto justify-between">
-          <img class="shadow-2xl my-auto h-full w-full md:w-1/2 dark:hidden"
-               src="@/assets/img/homepage-screenshot.png"
-               :alt="$t('text.homepage.screenshotCalendarAlt')"
-          />
-          <img class="shadow-2xl my-auto h-full w-full md:w-1/2 hidden dark:block"
-               src="@/assets/img/homepage-screenshot-dark.png"
-               :alt="$t('text.homepage.screenshotCalendarAlt')"
-          />
-          <div class="flex-col mb-20 mt-20 md:w-[45%] flex-center">
-            <p class="text-2xl tracking-wide leading-loose font-light w-[70%]">
-              {{ $t('text.homepage.calendarCopy') }}
-            </p>
+    <section class="mx-4">
+      <h2 class="text-3xl pb-16 pt-16 text-center text-teal-600 dark:text-teal-400">
+        {{ $t('text.homepage.sectionHeader') }}
+      </h2>
+      <section class="flex flex-col gap-16 justify-center mx-auto max-w-full md:flex-row md:max-w-7xl">
+        <InfoBox :title="$t('text.homepage.planEventTitle')">{{ $t('text.homepage.planEventBody') }}</InfoBox>
+        <InfoBox :title="$t('text.homepage.setAvailabilityTitle')">{{ $t('text.homepage.setAvailabilityBody') }}</InfoBox>
+        <InfoBox :title="$t('text.homepage.shareWithOthersTitle')">{{ $t('text.homepage.shareWithOthersBody') }}</InfoBox>
+      </section>
+    </section>
+    <section class="w-full">
+        <div class="bg-[url(@/assets/svg/homepage-wave.svg)]
+        dark:bg-[url(@/assets/svg/homepage-wave-dark.svg)]
+        bg-top bg-no-repeat bg-cover w-full"
+        >
+          <div class="pt-[13%]"></div>
+          <div class="w-full flex flex-col md:flex-row relative mx-auto justify-between">
+            <img class="shadow-2xl my-auto h-full w-full md:w-1/2 dark:hidden"
+                 src="@/assets/img/homepage-screenshot.png"
+                 :alt="$t('text.homepage.screenshotCalendarAlt')"
+            />
+            <img class="shadow-2xl my-auto h-full w-full md:w-1/2 hidden dark:block"
+                 src="@/assets/img/homepage-screenshot-dark.png"
+                 :alt="$t('text.homepage.screenshotCalendarAlt')"
+            />
+            <div class="flex-col mb-20 mt-20 md:w-[45%] flex-center">
+              <p class="text-2xl tracking-wide leading-loose font-light w-[70%]">
+                {{ $t('text.homepage.calendarCopy') }}
+              </p>
+            </div>
           </div>
         </div>
-      </div>
-  </section>
-  <section class="w-full pt-32 bg-[#fbfbfc] dark:bg-[#1F232A]">
-      <div class="bg-[url(@/assets/svg/homepage-wave-bottom.svg)] dark:bg-[url(@/assets/svg/homepage-wave-bottom-dark.svg)] bg-top bg-no-repeat bg-cover w-full pb-8">
-        <div class="pt-[5%]"></div>
-        <div class="w-full flex flex-col md:flex-row-reverse relative mx-auto justify-between">
-          <img class="shadow-2xl my-auto h-full w-full md:w-1/2 dark:hidden"
-               src="@/assets/img/homepage-screenshot-2.png"
-               :alt="$t('text.homepage.screenshotScheduleAlt')"
-          />
-          <img class="shadow-2xl my-auto h-full w-full md:w-1/2 hidden dark:block"
-               src="@/assets/img/homepage-screenshot-2-dark.png"
-               :alt="$t('text.homepage.screenshotScheduleAlt')"
-          />
-          <div class="flex-col mb-20 mt-20 md:w-[45%] flex-center">
-            <p class="text-2xl tracking-wide leading-loose font-light w-[70%]">
-              {{ $t('text.homepage.scheduleCopy') }}
-            </p>
+    </section>
+    <section class="w-full pt-32 bg-[#fbfbfc] dark:bg-[#1F232A]">
+        <div class="bg-[url(@/assets/svg/homepage-wave-bottom.svg)] dark:bg-[url(@/assets/svg/homepage-wave-bottom-dark.svg)] bg-top bg-no-repeat bg-cover w-full pb-8">
+          <div class="pt-[5%]"></div>
+          <div class="w-full flex flex-col md:flex-row-reverse relative mx-auto justify-between">
+            <img class="shadow-2xl my-auto h-full w-full md:w-1/2 dark:hidden"
+                 src="@/assets/img/homepage-screenshot-2.png"
+                 :alt="$t('text.homepage.screenshotScheduleAlt')"
+            />
+            <img class="shadow-2xl my-auto h-full w-full md:w-1/2 hidden dark:block"
+                 src="@/assets/img/homepage-screenshot-2-dark.png"
+                 :alt="$t('text.homepage.screenshotScheduleAlt')"
+            />
+            <div class="flex-col mb-20 mt-20 md:w-[45%] flex-center">
+              <p class="text-2xl tracking-wide leading-loose font-light w-[70%]">
+                {{ $t('text.homepage.scheduleCopy') }}
+              </p>
+            </div>
           </div>
-        </div>
-    </div>
-  </section>
-  <HomeFooter></HomeFooter>
+      </div>
+    </section>
+    <HomeFooter></HomeFooter>
+  </div>
 </template>
 
 <script setup>
@@ -87,13 +89,11 @@ import InfoBox from '@/elements/home/InfoBox.vue';
 import HomeFooter from '@/components/HomeFooter.vue';
 
 const refresh = inject('refresh');
+const login = inject('login');
 
 const auth = useAuth0();
 const isAuthenticated = computed(() => auth?.isAuthenticated.value);
 
-const login = () => {
-  auth.loginWithRedirect();
-};
 const enter = () => {
   window.location = '/calendar';
 };
diff --git a/frontend/src/views/ProfileView.vue b/frontend/src/views/ProfileView.vue
index a52055e78..4205757b3 100644
--- a/frontend/src/views/ProfileView.vue
+++ b/frontend/src/views/ProfileView.vue
@@ -41,8 +41,8 @@ import PrimaryButton from '@/elements/PrimaryButton';
 import { IconPencil } from '@tabler/icons-vue';
 
 // component constants
-const auth = inject('auth');
 const user = useUserStore();
+const logout = inject('logout');
 
 // component constants
 const { t } = useI18n();
@@ -57,16 +57,6 @@ const props = defineProps({
 // list of pending appointments
 const pendingAppointments = computed(() => props.appointments.filter((a) => a.status === appointmentState.pending));
 
-// do log out
-const logout = async () => {
-  user.reset();
-  await auth.logout({
-    logoutParams: {
-      returnTo: window.location.origin,
-    },
-  });
-};
-
 // initially load data when component gets remounted
 onMounted(async () => {
   await refresh();