diff --git a/packages/frontendmu-nuxt/auth-utils/useAuth.ts b/packages/frontendmu-nuxt/auth-utils/useAuth.ts
index 2f23313f..ff1070d6 100644
--- a/packages/frontendmu-nuxt/auth-utils/useAuth.ts
+++ b/packages/frontendmu-nuxt/auth-utils/useAuth.ts
@@ -114,6 +114,7 @@ export default function useAuth(client: DirectusClient<any> & AuthenticationClie
           credentials: 'include', // this is required in order to send the refresh token cookie
           body: JSON.stringify({
             refresh_token: getCookieValue('directus_session_token'),
+            mode: 'cookie',
           }),
         },
       )
@@ -171,10 +172,12 @@ export default function useAuth(client: DirectusClient<any> & AuthenticationClie
       'meal',
       'occupation',
       'github_username',
+      'external_identifier',
       'Events.Events_id.id',
       'Events.Events_id.title',
       'profile_picture',
       'role.name',
+      'provider',
     ]
 
     try {
@@ -220,9 +223,21 @@ export default function useAuth(client: DirectusClient<any> & AuthenticationClie
     return false
   })
 
-  function oAuthLogin() {
-    const currentPage = new URL(window.location.origin)
-    return `${DIRECTUS_URL()}/auth/login/google?redirect=${currentPage}redirect`
+  function oAuthLogin(provider: string) {
+    if (provider === 'google') {
+      const currentPage = new URL(window.location.origin)
+      return `${DIRECTUS_URL()}/auth/login/google?redirect=${currentPage}redirect`
+    }
+    else if (provider === 'github') {
+      const currentPage = new URL(window.location.origin)
+      return `${DIRECTUS_URL()}/auth/login/github?redirect=${currentPage}redirect`
+    }
+    else if (provider === 'discord') {
+      const currentPage = new URL(window.location.origin)
+      return `${DIRECTUS_URL()}/auth/login/discord?redirect=${currentPage}redirect`
+    }
+
+    console.log('Provider not found')
   }
 
   async function updateUserProfile({ profile_updates }: { profile_updates: DirectusAstroUser }) {
diff --git a/packages/frontendmu-nuxt/components/auth/LoggedUser.vue b/packages/frontendmu-nuxt/components/auth/LoggedUser.vue
index aa8dbbb0..b8ec8fd5 100644
--- a/packages/frontendmu-nuxt/components/auth/LoggedUser.vue
+++ b/packages/frontendmu-nuxt/components/auth/LoggedUser.vue
@@ -1,103 +1,81 @@
 <script setup lang="ts">
-import { onMounted } from "vue";
-import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
-import useAuth, { getClient } from "../../auth-utils/useAuth";
-import useAuthRedirect from "@/auth-utils/useAuthRedirect";
+import { onMounted } from 'vue'
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
+import useAuth, { getClient } from '../../auth-utils/useAuth'
+import useAuthRedirect from '@/auth-utils/useAuthRedirect'
 
 const { user, logout, isLoggedIn, checkIfLoggedIn, avatarUrl } = useAuth(
-  getClient()
-);
+  getClient(),
+)
 
-const { setUrl } = useAuthRedirect();
+const { setUrl } = useAuthRedirect()
 
 onMounted(() => {
-  checkIfLoggedIn();
-});
+  checkIfLoggedIn()
+})
 </script>
 
 <template>
   <div class="dark:text-zinc-200 dark:ring-white/10 pl-4">
-    <BaseButton
-      v-if="!isLoggedIn"
-      href="/login"
-      color="primary"
-      class="font-medium hidden md:block"
-      @click="setUrl()"
-    >
-      Log In
-    </BaseButton>
-    <BaseButton
-      v-if="!isLoggedIn"
-      href="/login"
-      color="primary"
-      class="font-medium block md:hidden"
-      size="sm"
-      @click="setUrl()"
-    >
+    <BaseButton v-if="!isLoggedIn" href="/login" color="primary" class="font-medium hidden md:block" size="sm"
+      @click="setUrl()">
       Log In
     </BaseButton>
     <div v-else class="flex gap-2 items-center">
       <Menu as="div" class="relative inline-block text-left">
         <div>
           <MenuButton
-            class="inline-flex items-center w-full justify-center gap-x-1.5 rounded-full text-sm font-semibold text-verse-900 dark:text-verse-100 shadow-sm ring-gray-300 hover:bg-gray-50"
-          >
-            <div v-if="avatarUrl">
-              <img
-                class="w-10 aspect-square rounded-full"
-                :src="avatarUrl"
-                alt="User Avatar"
-              />
+            class="inline-flex relative items-center w-full justify-center gap-x-1.5 rounded-full  text-sm font-semibold text-verse-900 dark:text-verse-100 shadow-sm  ring-gray-300 hover:bg-gray-50">
+            <template v-if="user?.provider === 'github'">
+              <img class="w-10 aspect-square rounded-full" :src="`https://github.com/${user?.external_identifier}.png`">
+            </template>
+            <template v-else>
+              <div v-if="avatarUrl">
+                <img class="w-10 aspect-square rounded-full" :src="avatarUrl" alt="User Avatar">
+              </div>
+            </template>
+            <!-- Provider Hint -->
+            <div class="absolute bottom-0 right-0 bg-white rounded-full">
+              <div v-if="user?.provider === 'default'">
+                <Icon class="block w-3 h-3 p-0.5 text-black" name="fluent:animal-rabbit-24-regular" />
+              </div>
+              <div v-else>
+                <Icon :name="`carbon:logo-${user?.provider}`" class="block w-3 h-3 p-0.5 text-black" />
+              </div>
             </div>
           </MenuButton>
         </div>
 
-        <transition
-          enter-active-class="transition ease-out duration-100"
-          enter-from-class="transform opacity-0 scale-95"
-          enter-to-class="transform opacity-100 scale-100"
-          leave-active-class="transition ease-in duration-75"
-          leave-from-class="transform opacity-100 scale-100"
-          leave-to-class="transform opacity-0 scale-95"
-        >
+        <transition enter-active-class="transition ease-out duration-100"
+          enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100"
+          leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100"
+          leave-to-class="transform opacity-0 scale-95">
           <MenuItems
-            class="absolute right-0 z-10 mt-2 w-56 origin-top-right divide-y divide-gray-100/10 rounded-md bg-zinc-500/20 dark:bg-verse-500/20 backdrop-blur-2xl shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
-          >
+            class="absolute right-0 z-10 mt-2 w-56 origin-top-right divide-y divide-gray-100/10 rounded-md bg-zinc-500/20 dark:bg-verse-500/20 backdrop-blur-2xl shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
             <div class="py-1">
               <MenuItem v-slot="{ active }">
-                <NuxtLink
-                  href="/user/me"
-                  class="block px-4 py-2 text-sm"
-                  :class="[
-                    active
-                      ? 'bg-gray-400/10 text-verse-900 dark:text-verse-100'
-                      : 'text-verse-900 dark:text-verse-100',
-                  ]"
-                >
-                  My Profile
-                </NuxtLink>
+              <NuxtLink href="/user/me" class="block px-4 py-2 text-sm" :class="[
+                active
+                  ? 'bg-gray-400/10 text-verse-900 dark:text-verse-100'
+                  : 'text-verse-900 dark:text-verse-100',
+              ]">
+                My Profile
+              </NuxtLink>
               </MenuItem>
               <MenuItem v-slot="{ active }">
-                <NuxtLink
-                  class="block px-4 py-2 text-sm cursor-pointer"
-                  :class="[
-                    active
-                      ? 'bg-gray-400/10 text-verse-900 dark:text-verse-100'
-                      : 'text-verse-900 dark:text-verse-100',
-                  ]"
-                  @click="logout()"
-                >
-                  Logout
-                </NuxtLink>
+              <NuxtLink class="block px-4 py-2 text-sm cursor-pointer" :class="[
+                active
+                  ? 'bg-gray-400/10 text-verse-900 dark:text-verse-100'
+                  : 'text-verse-900 dark:text-verse-100',
+              ]" @click="logout()">
+                Logout
+              </NuxtLink>
               </MenuItem>
             </div>
             <div class="text-verse-900 dark:text-verse-100 p-4 text-sm">
               <div class="flex flex-col items-center justify-center gap-2">
                 <div v-if="avatarUrl">
-                  <img
-                    class="w-16 aspect-square rounded-full"
-                    :src="avatarUrl"
-                  />
+                  <img class="w-16 aspect-square rounded-full" :src="avatarUrl">
                 </div>
 
                 {{ user?.full_name }}
diff --git a/packages/frontendmu-nuxt/components/auth/LoginForm.vue b/packages/frontendmu-nuxt/components/auth/LoginForm.vue
index 8ea3c0d9..a333201f 100644
--- a/packages/frontendmu-nuxt/components/auth/LoginForm.vue
+++ b/packages/frontendmu-nuxt/components/auth/LoginForm.vue
@@ -28,7 +28,8 @@ const developmentEnvironment = process.env.NODE_ENV === 'development'
     </h2>
   </div>
   <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-[480px] flex justify-center">
-    <div class="bg-verse-200/10 overflow-hidden dark:bg-verse-500/20 backdrop-blur-sm px-6 py-12 shadow-2xl rounded-lg sm:px-12 w-11/12">
+    <div
+      class="bg-verse-200/10 overflow-hidden dark:bg-verse-500/20 backdrop-blur-sm px-6 py-12 shadow-2xl rounded-lg sm:px-12 w-11/12">
       <div v-if="isLoggedIn">
         <div class="text-center flex flex-col gap-8 text-verse-900 dark:text-verse-100 w-full">
           <span>
@@ -52,41 +53,24 @@ const developmentEnvironment = process.env.NODE_ENV === 'development'
       <div v-else>
         <form v-if="developmentEnvironment" class="space-y-6" @submit.prevent="login()">
           <div>
-            <label
-              for="email"
-              class="block text-sm font-medium leading-6 text-verse-900 dark:text-verse-100"
-            >
+            <label for="email" class="block text-sm font-medium leading-6 text-verse-900 dark:text-verse-100">
               Email address
             </label>
             <div class="mt-2">
-              <input
-                id="email"
-                v-model="email"
-                name="email"
-                type="email"
-                autocomplete="email"
+              <input id="email" v-model="email" name="email" type="email" autocomplete="email"
                 class="block w-full rounded-md border-0 p-1.5 text-verse-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-verse-600 sm:text-sm sm:leading-6"
-                required
-              >
+                required>
             </div>
           </div>
 
           <div>
-            <label
-              for="password"
-              class="block text-sm font-medium leading-6 text-verse-900 dark:text-verse-100"
-            >
+            <label for="password" class="block text-sm font-medium leading-6 text-verse-900 dark:text-verse-100">
               Password
             </label>
             <div class="mt-2">
-              <input
-                id="password"
-                v-model="password"
-                name="password"
-                type="password"
-                autocomplete="current-password" required
-                class="block w-full rounded-md border-0 p-1.5 text-verse-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-verse-600 sm:text-sm sm:leading-6"
-              >
+              <input id="password" v-model="password" name="password" type="password" autocomplete="current-password"
+                required
+                class="block w-full rounded-md border-0 p-1.5 text-verse-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-verse-600 sm:text-sm sm:leading-6">
             </div>
           </div>
 
@@ -103,10 +87,8 @@ const developmentEnvironment = process.env.NODE_ENV === 'development'
                     </div> -->
 
           <div>
-            <button
-              type="submit"
-              class="flex w-full justify-center rounded-md bg-verse-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-verse-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-verse-600"
-            >
+            <button type="submit"
+              class="flex w-full justify-center rounded-md bg-verse-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-verse-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-verse-600">
               Sign in
             </button>
           </div>
@@ -124,36 +106,31 @@ const developmentEnvironment = process.env.NODE_ENV === 'development'
           </div>
 
           <div class="mt-10 grid sm:grid-cols-2 gap-4">
-            <a
-              :href="oAuthLogin()"
-              class="flex w-full items-center justify-center gap-3 rounded-md bg-[#000000] hover:bg-black/50 transition-all duration-300 px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1D9BF0]"
-            >
+            <a :href="oAuthLogin('google')"
+              class="flex w-full items-center justify-center gap-3 rounded-md bg-[#000000] hover:bg-black/50 transition-all duration-300 px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1D9BF0]">
               <Icon name="logos:google-icon" class="h-5 w-5" />
               <span class="text-sm font-semibold leading-6">Google</span>
             </a>
 
-            <a
-              href="#"
-              class="opacity-60 cursor-not-allowed flex w-full items-center justify-center gap-3 rounded-md bg-[#24292F] px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#24292F]"
+            <AuthLoginWithGithub />
+
+            <!-- <a
+              :href="oAuthLogin('discord')"
+              class="flex w-full items-center justify-center gap-3 rounded-md bg-[#000000]  hover:bg-black/50  px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#24292F]"
               disabled
             >
-              <svg class="h-5 w-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
-                <path
-                  fill-rule="evenodd"
-                  d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z"
-                  clip-rule="evenodd"
-                />
-              </svg>
-              <span class="text-sm font-semibold leading-6">GitHub</span>
-            </a>
+              <Icon
+                name="logos:discord-icon"
+                class="h-5 w-5"
+              />
+              <span class="text-sm font-semibold leading-6">Discord</span>
+            </a> -->
           </div>
         </div>
       </div>
 
-      <div
-        class="absolute bottom-0 left-0 bg-zinc-500/20 dark:bg-verse-500/20 backdrop-blur-2xl  right-0 z-10 h-0"
-        :style="{ height: countDownPercentage }"
-      />
+      <div class="absolute bottom-0 left-0 bg-zinc-500/20 dark:bg-verse-500/20 backdrop-blur-2xl  right-0 z-10 h-0"
+        :style="{ height: countDownPercentage }" />
     </div>
   </div>
 </template>
diff --git a/packages/frontendmu-nuxt/components/auth/LoginWithGithub.vue b/packages/frontendmu-nuxt/components/auth/LoginWithGithub.vue
new file mode 100644
index 00000000..f0886d3b
--- /dev/null
+++ b/packages/frontendmu-nuxt/components/auth/LoginWithGithub.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import useAuth, { getClient } from '@/auth-utils/useAuth'
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+} from '@/components/ui/alert-dialog'
+import { Button } from '@/components/ui/button'
+
+const { oAuthLogin } = useAuth(getClient())
+
+function triggerRedirectToGithub() {
+    window.location.href = oAuthLogin('github')!
+}
+</script>
+
+<template>
+    <AlertDialog>
+        <AlertDialogTrigger as-child>
+            <div class="flex w-full items-center justify-center gap-3 rounded-md bg-[#000000]  hover:bg-black/50  px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#24292F]"
+                disabled>
+                <svg class="h-5 w-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
+                    <path fill-rule="evenodd"
+                        d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z"
+                        clip-rule="evenodd" />
+                </svg>
+                <span class="text-sm font-semibold leading-6">GitHub</span>
+            </div>
+        </AlertDialogTrigger>
+        <AlertDialogContent class="border-white/20">
+            <AlertDialogHeader>
+                <AlertDialogTitle class="flex gap-2 items-center">
+                    <Icon name="carbon:logo-github" class="block w-5 h-5 p-0.5 " />
+
+                    Login with GitHub is experimental !
+                </AlertDialogTitle>
+                <AlertDialogDescription>
+                    <ol class="list-decimal list-outside pl-4 space-y-2">
+                        <li>
+                            Make sure your email address is <a target="_blank" class="underline"
+                                href="https://github.com/settings/emails#toggle_visibility_note">publicly visible on
+                                GitHub. </a>
+                        </li>
+                        <li>
+                            If you have logged in with a Google account previously, the same email will not work if it's
+                            associated to your github account.
+                        </li>
+                    </ol>
+                </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogAction @click="triggerRedirectToGithub()">
+                    Continue
+                </AlertDialogAction>
+            </AlertDialogFooter>
+        </AlertDialogContent>
+    </AlertDialog>
+</template>
diff --git a/packages/frontendmu-nuxt/components/auth/MyProfile.vue b/packages/frontendmu-nuxt/components/auth/MyProfile.vue
index aa620afc..84b6a9e5 100644
--- a/packages/frontendmu-nuxt/components/auth/MyProfile.vue
+++ b/packages/frontendmu-nuxt/components/auth/MyProfile.vue
@@ -100,18 +100,29 @@ function updateProfile() {
 
           <form class="md:col-span-2 pb-16">
             <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:max-w-xl sm:grid-cols-6">
-              <div v-if="avatarUrl" class="col-span-full flex items-center gap-x-8">
+              <div
+                v-if="avatarUrl"
+                class="col-span-full flex items-center gap-x-8"
+              >
                 <img
-                  :src="avatarUrl || ''" alt=""
+                  :src="avatarUrl || ''"
+                  alt=""
                   class="h-28 w-28 flex-none rounded-lg bg-gray-800 object-cover"
                 >
               </div>
 
               <div class="col-span-full">
-                <label for="email" class="block text-lg font-medium leading-6">Email address</label>
+                <label
+                  for="email"
+                  class="block text-lg font-medium leading-6"
+                >Email address</label>
                 <div class="mt-2">
                   <input
-                    id="email" v-model="userDetails.email" disabled name="email" type="email"
+                    id="email"
+                    v-model="userDetails.email"
+                    disabled
+                    name="email"
+                    type="email"
                     autocomplete="email"
                     class="block w-full pl-2 rounded-md border-0 bg-white/5 py-1.5 shadow-sm ring-1 ring-inset dark:ring-white/10 focus:ring-2 focus:ring-inset focus:ring-indigo-500 sm:text-lg sm:leading-6"
                   >
@@ -119,13 +130,19 @@ function updateProfile() {
               </div>
 
               <div class="col-span-full">
-                <label for="fullname" class="block text-lg font-medium leading-6">Full name</label>
+                <label
+                  for="fullname"
+                  class="block text-lg font-medium leading-6"
+                >Full name</label>
                 <div class="mt-2">
                   <div
                     class="flex rounded-md bg-white/5 ring-1 ring-inset dark:ring-white/10 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500"
                   >
                     <input
-                      id="fullname" v-model="userDetails.full_name" type="text" name="fullname"
+                      id="fullname"
+                      v-model="userDetails.full_name"
+                      type="text"
+                      name="fullname"
                       autocomplete="username"
                       class="flex-1 border-0 bg-transparent py-1.5 pl-2 focus:ring-0 sm:text-lg sm:leading-6"
                     >
@@ -134,15 +151,21 @@ function updateProfile() {
               </div>
 
               <div class="col-span-full">
-                <label for="github_username" class="block text-lg font-medium leading-6">GitHub
+                <label
+                  for="github_username"
+                  class="block text-lg font-medium leading-6"
+                >GitHub
                   Username</label>
                 <div class="mt-2">
                   <div
                     class="flex rounded-md bg-white/5 ring-1 ring-inset dark:ring-white/10 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500"
                   >
                     <input
-                      id="github_username" v-model="userDetails.github_username" type="text"
-                      name="github_username" autocomplete="username"
+                      id="github_username"
+                      v-model="userDetails.github_username"
+                      type="text"
+                      name="github_username"
+                      autocomplete="username"
                       class="flex-1 border-0 bg-transparent py-1.5 pl-2 focus:ring-0 sm:text-lg sm:leading-6"
                     >
                   </div>
@@ -150,13 +173,19 @@ function updateProfile() {
               </div>
 
               <div class="col-span-full">
-                <label for="phone" class="block text-lg font-medium leading-6">Phone</label>
+                <label
+                  for="phone"
+                  class="block text-lg font-medium leading-6"
+                >Phone</label>
                 <div class="mt-2">
                   <div
                     class="flex rounded-md bg-white/5 ring-1 ring-inset dark:ring-white/10 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500"
                   >
                     <input
-                      id="phone" v-model="userDetails.phone" name="phone" autocomplete="phone"
+                      id="phone"
+                      v-model="userDetails.phone"
+                      name="phone"
+                      autocomplete="phone"
                       class="flex-1 border-0 bg-transparent py-1.5 pl-2 focus:ring-0 sm:text-lg sm:leading-6"
                       placeholder="57654321"
                     >
@@ -180,10 +209,16 @@ function updateProfile() {
 
           <div>
             <div class="flex flex-col">
-              <template v-for="event in rawUser?.Events" :key="(event.Events_id as DirectusEvent).id">
+              <template
+                v-for="event in rawUser?.Events"
+                :key="(event.Events_id as DirectusEvent).id"
+              >
                 <template v-if="(typeof event.Events_id !== 'string')">
                   <div>
-                    <NuxtLink :href="`/meetup/${event.Events_id.id}`" class="text-lg font-medium">
+                    <NuxtLink
+                      :href="`/meetup/${event.Events_id.id}`"
+                      class="text-lg font-medium"
+                    >
                       {{
                         event.Events_id.title }}
                     </NuxtLink>
@@ -207,7 +242,10 @@ function updateProfile() {
                   Transport
                 </RadioGroupLabel>
                 <div class="flex gap-4 flex-wrap">
-                  <FormRadio :disabled="isLoading" :options="transportOptions" />
+                  <FormRadio
+                    :disabled="isLoading"
+                    :options="transportOptions"
+                  />
                 </div>
               </RadioGroup>
             </FormLabel>
@@ -218,7 +256,10 @@ function updateProfile() {
                   Meal
                 </RadioGroupLabel>
                 <div class="flex gap-4 flex-wrap">
-                  <FormRadio :disabled="isLoading" :options="foodOptions" />
+                  <FormRadio
+                    :disabled="isLoading"
+                    :options="foodOptions"
+                  />
                 </div>
               </RadioGroup>
             </FormLabel>
@@ -229,7 +270,10 @@ function updateProfile() {
                   Profession
                 </RadioGroupLabel>
                 <div class="flex gap-4 flex-wrap">
-                  <FormRadio :disabled="isLoading" :options="professionOptions" />
+                  <FormRadio
+                    :disabled="isLoading"
+                    :options="professionOptions"
+                  />
                 </div>
               </RadioGroup>
             </FormLabel>
@@ -251,36 +295,26 @@ function updateProfile() {
             <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:max-w-xl sm:grid-cols-6">
               <div class="col-span-full">
                 <div class="mt-2">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="272" height="92">
-                    <path
-                      fill="#EA4335"
-                      d="M115.75 47.18c0 12.77-9.99 22.18-22.25 22.18s-22.25-9.41-22.25-22.18C71.25 34.32 81.24 25 93.5 25s22.25 9.32 22.25 22.18zm-9.74 0c0-7.98-5.79-13.44-12.51-13.44S80.99 39.2 80.99 47.18c0 7.9 5.79 13.44 12.51 13.44s12.51-5.55 12.51-13.44z"
-                    />
-                    <path
-                      fill="#FBBC05"
-                      d="M163.75 47.18c0 12.77-9.99 22.18-22.25 22.18s-22.25-9.41-22.25-22.18c0-12.85 9.99-22.18 22.25-22.18s22.25 9.32 22.25 22.18zm-9.74 0c0-7.98-5.79-13.44-12.51-13.44s-12.51 5.46-12.51 13.44c0 7.9 5.79 13.44 12.51 13.44s12.51-5.55 12.51-13.44z"
+                  <div v-if="user?.provider === 'default'">
+                    <Icon
+                      class="w-[100px] h-[100px]"
+                      name="fluent:animal-rabbit-24-regular"
                     />
-                    <path
-                      fill="#4285F4"
-                      d="M209.75 26.34v39.82c0 16.38-9.66 23.07-21.08 23.07-10.75 0-17.22-7.19-19.66-13.07l8.48-3.53c1.51 3.61 5.21 7.87 11.17 7.87 7.31 0 11.84-4.51 11.84-13v-3.19h-.34c-2.18 2.69-6.38 5.04-11.68 5.04-11.09 0-21.25-9.66-21.25-22.09 0-12.52 10.16-22.26 21.25-22.26 5.29 0 9.49 2.35 11.68 4.96h.34v-3.61h9.25zm-8.56 20.92c0-7.81-5.21-13.52-11.84-13.52-6.72 0-12.35 5.71-12.35 13.52 0 7.73 5.63 13.36 12.35 13.36 6.63 0 11.84-5.63 11.84-13.36z"
-                    />
-                    <path fill="#34A853" d="M225 3v65h-9.5V3h9.5z" />
-                    <path
-                      fill="#EA4335"
-                      d="m262.02 54.48 7.56 5.04c-2.44 3.61-8.32 9.83-18.48 9.83-12.6 0-22.01-9.74-22.01-22.18 0-13.19 9.49-22.18 20.92-22.18 11.51 0 17.14 9.16 18.98 14.11l1.01 2.52-29.65 12.28c2.27 4.45 5.8 6.72 10.75 6.72 4.96 0 8.4-2.44 10.92-6.14zm-23.27-7.98 19.82-8.23c-1.09-2.77-4.37-4.7-8.23-4.7-4.95 0-11.84 4.37-11.59 12.93z"
-                    />
-                    <path
-                      fill="#4285F4"
-                      d="M35.29 41.41V32H67c.31 1.64.47 3.58.47 5.68 0 7.06-1.93 15.79-8.15 22.01-6.05 6.3-13.78 9.66-24.02 9.66C16.32 69.35.36 53.89.36 34.91.36 15.93 16.32.47 35.3.47c10.5 0 17.98 4.12 23.6 9.49l-6.64 6.64c-4.03-3.78-9.49-6.72-16.97-6.72-13.86 0-24.7 11.17-24.7 25.03 0 13.86 10.84 25.03 24.7 25.03 8.99 0 14.11-3.61 17.39-6.89 2.66-2.66 4.41-6.46 5.1-11.65l-22.49.01z"
+                  </div>
+                  <div v-else>
+                    <Icon
+                      :name="`logos:${user?.provider}`"
+                      class="w-[200px] h-[100px]"
                     />
-                  </svg>
+                  </div>
                 </div>
               </div>
             </div>
 
             <div class="mt-8 flex">
               <button
-                type="submit" class="rounded-md bg-red-500 px-3 py-2 text-sm font-semibold shadow-sm hover:bg-red-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
+                type="submit"
+                class="rounded-md bg-red-500 px-3 py-2 text-sm font-semibold shadow-sm hover:bg-red-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
                 @click.prevent="logout()"
               >
                 Log me out
@@ -295,7 +329,10 @@ function updateProfile() {
             You are not logged in.
           </div>
 
-          <BaseButton href="/login" color="primary">
+          <BaseButton
+            href="/login"
+            color="primary"
+          >
             Login to RSVP
           </BaseButton>
         </div>
diff --git a/packages/frontendmu-nuxt/components/auth/RsvpAttendeeList.vue b/packages/frontendmu-nuxt/components/auth/RsvpAttendeeList.vue
index 553fb7e6..9207cc54 100644
--- a/packages/frontendmu-nuxt/components/auth/RsvpAttendeeList.vue
+++ b/packages/frontendmu-nuxt/components/auth/RsvpAttendeeList.vue
@@ -96,11 +96,18 @@ onMounted(async () => {
       >
         <div class="flex flex-col gap-4 justify-center">
           <div class="relative flex flex-col items-center">
-            <template v-if="attendee.profile_picture">
+            <template v-if="attendee.provider === 'github'">
+              <img
+                :src="`https://github.com/${attendee.external_identifier}.png`"
+                alt=""
+                class="rounded-full mx-auto w-28 h-28 aspect-square"
+              >
+            </template>
+            <template v-else-if="attendee.profile_picture">
               <img
                 :src="base64Url(attendee.profile_picture)"
                 alt=""
-                class="rounded-full mx-auto w-full max-w-[130px] aspect-square"
+                class="rounded-full mx-auto w-28 h-28 aspect-square"
               >
             </template>
             <template v-else>
diff --git a/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialog.vue b/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialog.vue
new file mode 100644
index 00000000..8fb30de8
--- /dev/null
+++ b/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialog.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<AlertDialogProps>()
+const emits = defineEmits<AlertDialogEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AlertDialogRoot v-bind="forwarded">
+    <slot />
+  </AlertDialogRoot>
+</template>
diff --git a/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogAction.vue b/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogAction.vue
new file mode 100644
index 00000000..60e5af73
--- /dev/null
+++ b/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogAction.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { buttonVariants } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
+    <slot />
+  </AlertDialogAction>
+</template>
diff --git a/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogCancel.vue b/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogCancel.vue
new file mode 100644
index 00000000..61c5bb8a
--- /dev/null
+++ b/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogCancel.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { buttonVariants } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogCancel
+    v-bind="delegatedProps"
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      props.class,
+    )"
+  >
+    <slot />
+  </AlertDialogCancel>
+</template>
diff --git a/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogContent.vue b/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogContent.vue
new file mode 100644
index 00000000..83fdf990
--- /dev/null
+++ b/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogContent.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+  AlertDialogContent,
+  type AlertDialogContentEmits,
+  type AlertDialogContentProps,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<AlertDialogContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <AlertDialogPortal>
+    <AlertDialogOverlay
+      class="fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <AlertDialogContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </AlertDialogContent>
+  </AlertDialogPortal>
+</template>
diff --git a/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogDescription.vue b/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogDescription.vue
new file mode 100644
index 00000000..9f6db432
--- /dev/null
+++ b/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogDescription.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+  AlertDialogDescription,
+  type AlertDialogDescriptionProps,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogDescription
+    v-bind="delegatedProps"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </AlertDialogDescription>
+</template>
diff --git a/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogFooter.vue b/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogFooter.vue
new file mode 100644
index 00000000..55d0a0eb
--- /dev/null
+++ b/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogFooter.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogHeader.vue b/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogHeader.vue
new file mode 100644
index 00000000..c61c4495
--- /dev/null
+++ b/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogHeader.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogTitle.vue b/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogTitle.vue
new file mode 100644
index 00000000..6cd13f93
--- /dev/null
+++ b/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogTitle.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogTitle
+    v-bind="delegatedProps"
+    :class="cn('text-lg font-semibold', props.class)"
+  >
+    <slot />
+  </AlertDialogTitle>
+</template>
diff --git a/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogTrigger.vue b/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogTrigger.vue
new file mode 100644
index 00000000..4f5e2fd0
--- /dev/null
+++ b/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { AlertDialogTrigger, type AlertDialogTriggerProps } from 'radix-vue'
+
+const props = defineProps<AlertDialogTriggerProps>()
+</script>
+
+<template>
+  <AlertDialogTrigger v-bind="props">
+    <slot />
+  </AlertDialogTrigger>
+</template>
diff --git a/packages/frontendmu-nuxt/components/ui/alert-dialog/index.ts b/packages/frontendmu-nuxt/components/ui/alert-dialog/index.ts
new file mode 100644
index 00000000..448d5198
--- /dev/null
+++ b/packages/frontendmu-nuxt/components/ui/alert-dialog/index.ts
@@ -0,0 +1,9 @@
+export { default as AlertDialog } from './AlertDialog.vue'
+export { default as AlertDialogAction } from './AlertDialogAction.vue'
+export { default as AlertDialogCancel } from './AlertDialogCancel.vue'
+export { default as AlertDialogContent } from './AlertDialogContent.vue'
+export { default as AlertDialogDescription } from './AlertDialogDescription.vue'
+export { default as AlertDialogFooter } from './AlertDialogFooter.vue'
+export { default as AlertDialogHeader } from './AlertDialogHeader.vue'
+export { default as AlertDialogTitle } from './AlertDialogTitle.vue'
+export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'
diff --git a/packages/frontendmu-nuxt/utils/helpers.ts b/packages/frontendmu-nuxt/utils/helpers.ts
index 3a9246db..1451e75a 100644
--- a/packages/frontendmu-nuxt/utils/helpers.ts
+++ b/packages/frontendmu-nuxt/utils/helpers.ts
@@ -36,7 +36,7 @@ export function formatDate(date: string) {
 export function mapToValidUser(user: any): User {
   const full_name = user?.full_name
     ? user.full_name
-    : `${user.first_name} ${user.last_name}`
+    : `${user.first_name} ${user.last_name ?? ''}`.trim()
 
   return {
     id: user.id,
@@ -53,6 +53,8 @@ export function mapToValidUser(user: any): User {
     profile_picture: user.profile_picture || '',
     google: user.google,
     role: user.role.name,
+    provider: user.provider,
+    external_identifier: user.external_identifier,
   }
 }
 
diff --git a/packages/frontendmu-nuxt/utils/types.ts b/packages/frontendmu-nuxt/utils/types.ts
index 21dbed10..1e6f603b 100644
--- a/packages/frontendmu-nuxt/utils/types.ts
+++ b/packages/frontendmu-nuxt/utils/types.ts
@@ -36,6 +36,8 @@ export interface User {
   github_username?: string
   profile_picture?: string | null
   role: 'sso_google' | 'Admin'
+  provider?: string
+  external_identifier?: string
 }
 
 // export type Transport = "car" | "bus" | "need a ride";
@@ -216,6 +218,8 @@ export interface Attendee {
   name: string
   profile_picture: string
   verified: boolean
+  provider: string
+  external_identifier: string
 }
 
 export interface RSVPResponse {