diff --git a/adapters/auth/auth.transformer.ts b/adapters/auth/auth.transformer.ts
index 9ee43bab..d1ac975b 100644
--- a/adapters/auth/auth.transformer.ts
+++ b/adapters/auth/auth.transformer.ts
@@ -1,29 +1,30 @@
-import { type User } from '~/interfaces/User'
 import { type SelfInfo } from './auth.type'
+import { transformUser } from '~/adapters/user.transformer'
 
-export const transformSelfInfoFromApi = (userInfo: any): { info: SelfInfo, user: User } => {
-  const info = {
-    userId: userInfo?.id,
+export const transformSelfInfoFromApi = (userInfo: any): SelfInfo => {
+  return {
+    ...transformUser(userInfo),
+    status: userInfo?.status,
+    incompleteUserDetails: userInfo?.incompleteUserDetails,
     roles: {
       archived: userInfo?.roles?.archived,
-      member: userInfo?.roles?.member
+      member: userInfo?.roles?.member,
     },
-    status: userInfo?.status,
-    incompleteUserDetails: userInfo?.incompleteUserDetails
-  }
-
-  const user = {
-    id: userInfo?.id,
-    username: userInfo?.username,
-    firstName: userInfo?.first_name,
-    lastName: userInfo?.last_name,
-    githubId: userInfo?.github_id,
-    githubDisplayName: userInfo?.github_display_name,
-    avatarUrl: userInfo?.picture?.url
   }
+}
 
+export const transformGoalTokenFromApi = (response: any): {
+  token: {
+    exp: number,
+    access: string,
+  },
+  id: string,
+} => {
   return {
-    info,
-    user
+    token: {
+      exp: response?.user?.token?.exp,
+      access: response?.user?.token?.access,
+    },
+    id: response?.user?.id,
   }
-}
+}
\ No newline at end of file
diff --git a/adapters/auth/auth.type.ts b/adapters/auth/auth.type.ts
index 79b7d2b5..eb4e4987 100644
--- a/adapters/auth/auth.type.ts
+++ b/adapters/auth/auth.type.ts
@@ -1,9 +1,15 @@
 export interface SelfInfo {
-  userId: string
+  id: string
+  displayName: string
+  username: string
+  firstName: string
+  lastName: string
+  avatar: string
+  initials: string
   roles: {
-    member: boolean
-    archived: boolean
-  }
-  status: string
-  incompleteUserDetails: boolean
+    archived: boolean | undefined;
+    member: boolean | undefined;
+  };
+  status: string | undefined;
+  incompleteUserDetails: boolean | undefined;
 }
diff --git a/adapters/auth/index.ts b/adapters/auth/index.ts
index 825bd208..6fd9d821 100644
--- a/adapters/auth/index.ts
+++ b/adapters/auth/index.ts
@@ -1,44 +1,28 @@
-import axios, { isAxiosError } from 'axios'
-import { transformSelfInfoFromApi } from './auth.transformer'
-import { type ApiResponse } from '~/interfaces/ApiResponse'
-import { type User } from '~/interfaces/User'
+import axios from 'axios'
+import { transformSelfInfoFromApi, transformGoalTokenFromApi } from './auth.transformer'
 import { type SelfInfo } from './auth.type'
-import {
-  type ErrorApiForbidden,
-  type ErrorApiUnauthorized,
-  type ErrorApiUnavailable,
-  type ErrorApiNotFound,
-  type ErrorApiBase
-} from '~/interfaces/ErrorApi'
 import { getConfig } from '~/config'
 
-type GetSelfResponse = ApiResponse<
-{
-  user: User
-  info: SelfInfo
-},
-ErrorApiForbidden | ErrorApiUnauthorized | ErrorApiUnavailable | ErrorApiNotFound | ErrorApiBase
->
-
-export const getSelf = async (): Promise<GetSelfResponse> => {
+export const getSelf = async (): Promise<SelfInfo> => {
   const config = getConfig();
-  const response: GetSelfResponse = await axios
+  const response = await axios
     .get(`${config.RDS_API}/users/self/`, { withCredentials: true })
-    .then(res => ({ data: transformSelfInfoFromApi(res.data) }))
-    .catch((error) => {
-      if (isAxiosError(error)) {
-        if (error.response != null) {
-          const responseData = error.response.data
-          return {
-            error: {
-              status: responseData.statusCode,
-              error: responseData.error,
-              message: responseData.message
-            }
-          }
-        }
-      }
-      throw error // or Log here
-    })
+    .then(res => transformSelfInfoFromApi(res.data))
+
   return response
 }
+
+export const getGoalApiCredentials = async (): Promise<{
+  token: {
+    exp: number,
+    access: string,
+  },
+  id: string,
+}> => {
+  const config = getConfig();
+  const response = await axios
+    .get(`${config.RDS_API}/goals/token/`, { withCredentials: true })
+    .then(res => transformGoalTokenFromApi(res.data))
+
+  return response
+}
\ No newline at end of file
diff --git a/components/AppAvatar.vue b/components/AppAvatar.vue
new file mode 100644
index 00000000..d87d9cb6
--- /dev/null
+++ b/components/AppAvatar.vue
@@ -0,0 +1,17 @@
+<template>
+  <v-avatar v-if="props.avatar" v-bind="props.vBind">
+    <v-img :src="props.avatar" />
+  </v-avatar>
+  <v-avatar v-else color="indigo" v-bind="props.vBind">
+    {{ props.initials }}
+  </v-avatar>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  avatar: String,
+  initials: String,
+  vBind: Object,
+});
+
+</script>
\ No newline at end of file
diff --git a/components/AppNavBar.vue b/components/AppNavBar.vue
index a20e05b7..ea8a819c 100644
--- a/components/AppNavBar.vue
+++ b/components/AppNavBar.vue
@@ -11,44 +11,63 @@
       </ul>
 
       <v-spacer></v-spacer>
+      <template v-if="isUserLoading">
+        Loading...
+      </template>
 
-      <nuxt-link :href="LOGIN">
-        <button class="login">
-          <span class="login__text">Sign In With GitHub</span>
-          <img class="login__image" src="~/assets/github.png" alt="GitHub Icon" height="15px" width="15px">
-        </button>
-      </nuxt-link>
+      <template v-else>
+        <v-menu v-if="!!props.user">
+          <template v-slot:activator="{ props: activator }">
+            <div v-bind="activator" class="user-detail">
+              <span class="username">
+                Hello, {{ props.user.firstName || props.user.username }}
+              </span>
+              <AppAvatar
+                :avatar="props.user.avatar"
+                :initials="props.user.initials"
+              />
+            </div>
+          </template>
+        </v-menu>
+
+        <nuxt-link v-else :href="LOGIN">
+          <button class="login">
+            <span class="login__text">Sign In With GitHub</span>
+            <img class="login__image" src="~/assets/github.png" alt="GitHub Icon" height="15px" width="15px">
+          </button>
+        </nuxt-link>
+      </template>
     </v-container>
   </v-app-bar>
 </template>
 
-<script>
+<script setup lang="ts">
 import { getConfig } from '~/config'
+import type { SelfInfo } from '~/adapters/auth/auth.type';
+import type { PropType } from 'nuxt/dist/app/compat/capi';
+
+const props = defineProps({
+  user: Object as PropType<SelfInfo | null>,
+  isUserLoading: Boolean,
+})
+
+const isClicked = ref(false);
+const LINKS = [
+  { name: 'Welcome', link: 'https://welcome.realdevsquad.com' },
+  { name: 'Events', link: 'https://www.realdevsquad.com/events.html' },
+  { name: 'Members', link: 'https://members.realdevsquad.com/' },
+  { name: 'Crypto', link: 'https://crypto.realdevsquad.com/' },
+  { name: 'Status', link: 'https://status.realdevsquad.com/' }
+]
+const LOGIN = `${getConfig().RDS_API}/auth/github/login`;
 
-export default {
-  name: 'AppNavBar',
-  data() {
-    return {
-      isClicked: false,
-      LINKS: [
-        { name: 'Welcome', link: 'https://welcome.realdevsquad.com' },
-        { name: 'Events', link: 'https://www.realdevsquad.com/events.html' },
-        { name: 'Members', link: 'https://members.realdevsquad.com/' },
-        { name: 'Crypto', link: 'https://crypto.realdevsquad.com/' },
-        { name: 'Status', link: 'https://status.realdevsquad.com/' }
-      ],
-      LOGIN: `${getConfig().RDS_API}/auth/github/login`
-    }
-  },
-  methods: {
-    toggleClicked(value) {
-      this.isClicked = !value
-    },
-    redirectLogin() {
-      window.location.href = this.LOGIN
-    }
-  }
+function toggleClicked(value: boolean) {
+  isClicked.value = !value
 }
+function redirectLogin() {
+  window.location.href = LOGIN
+}
+
 </script>
 
 <style scoped>
@@ -95,4 +114,14 @@ export default {
 .login__image {
   margin-left: 6px;
 }
+
+.user-detail {
+  cursor: pointer;
+}
+
+.username {
+  font-weight: 700;
+  font-size: 1rem;
+  margin-right: 5px;
+}
 </style>
diff --git a/components/PopupAssignee.vue b/components/PopupAssignee.vue
index a8cea659..1878a01e 100644
--- a/components/PopupAssignee.vue
+++ b/components/PopupAssignee.vue
@@ -10,12 +10,11 @@
 
         <v-tooltip v-else :text="assignee.displayName">
           <template v-slot:activator="{ props }">
-            <v-avatar v-if="assignee.avatar" v-bind="props">
-              <v-img :src="assignee.avatar" />
-            </v-avatar>
-            <v-avatar v-else color="indigo" v-bind="props">
-              {{ assignee.initials }}
-            </v-avatar>
+            <AppAvatar
+              v-bind="props"
+              :avatar="assignee.avatar"
+              :initials="assignee.initials"
+            />
           </template>
         </v-tooltip>
       </v-btn>
diff --git a/layouts/default.vue b/layouts/default.vue
index 956e215f..9298cacf 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,7 +1,7 @@
 <template>
   <v-app>
     <v-layout>
-      <AppNavBar />
+      <AppNavBar :user="auth.user" :isUserLoading="auth.isLoading"/>
       <AppSideBar />
       <v-main>
         <slot />
@@ -10,10 +10,10 @@
   </v-app>
 </template>
 
-<script>
-export default {
-  name: 'DefaultLayout'
-}
+<script setup lang="ts">
+import { useAuthStore } from '~/store/auth';
+
+const auth = useAuthStore();
 </script>
 
 <style>
diff --git a/middleware/authenticate.global.ts b/middleware/authenticate.global.ts
new file mode 100644
index 00000000..6f31fce4
--- /dev/null
+++ b/middleware/authenticate.global.ts
@@ -0,0 +1,9 @@
+import { useAuthStore } from "~/store/auth"
+
+export default defineNuxtRouteMiddleware((to, from) => {
+  const authStore = useAuthStore();
+
+  if (!authStore.user) {
+    authStore.signin();
+  }
+})
\ No newline at end of file
diff --git a/models/Goal.ts b/models/Goal.ts
deleted file mode 100644
index 828c40af..00000000
--- a/models/Goal.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Model, useRepo } from 'pinia-orm'
-
-export class Goal extends Model {
-  static entity = 'goals'
-
-  static fields (): any {
-    return {
-      id: this.string(''),
-      title: this.string(''),
-      description: this.string(''),
-      createdAt: this.string(''),
-      createdBy: this.string(''),
-      percentageCompleted: this.number(0),
-      endsOn: this.attr(null),
-      startsOn: this.attr(null),
-      status: this.string(''),
-      assignedTo: this.attr(null),
-      assignedBy: this.string('')
-    }
-  }
-
-  declare id: string
-  declare title: string
-  declare description: string
-  declare createdAt: string
-  declare createdBy: string
-  declare startsOn: string | null
-  declare endsOn: string | null
-  declare percentageCompleted: number
-  declare status: string
-  declare assignedTo: string | null
-  declare assignedBy: string | null
-}
-
-export const goalRepo = useRepo(Goal)
diff --git a/models/User.ts b/models/User.ts
index 68746de9..413a4f5c 100644
--- a/models/User.ts
+++ b/models/User.ts
@@ -1,5 +1,4 @@
 import { Model, useRepo } from 'pinia-orm'
-import { Goal } from '~/models/Goal'
 
 export class User extends Model {
   static entity = 'users'
@@ -13,8 +12,6 @@ export class User extends Model {
       lastName: this.string(''),
       avatar: this.string(null),
       initials: this.string(''),
-
-      goals: this.hasMany(Goal, 'assignedTo')
     }
   }
 
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 33dcf638..a8f6094c 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -39,6 +39,7 @@ export default defineNuxtConfig({
     public: {
       GOALS_API: process.env.NUXT_PUBLIC_GOAL_API,
       RDS_API: process.env.NUXT_PUBLIC_RDS_API,
+      ENV: process.env.NUXT_PUBLIC_ENV,
     }
   },
   imports: {
diff --git a/store/auth.ts b/store/auth.ts
index 0f955ccb..4b72870a 100644
--- a/store/auth.ts
+++ b/store/auth.ts
@@ -1,97 +1,50 @@
-import { defineStore } from 'pinia'
 import * as authAdapter from '~/adapters/auth'
-import { type AuthState } from '~/interfaces/AuthState'
-import { type ErrorApiBase } from '~/interfaces/ErrorApi'
-import { userRepo } from '~/models/User'
+import { getConfig } from '~/config'
 
-type AuthStoreState =
-  | {
-    kind: 'UNAUTHENTICATED'
-    isLoading: boolean
-    error: null
-    authInfo: null
-  }
-  | {
-    kind: 'ERRORED'
-    isLoading: false
-    error: ErrorApiBase
-    authInfo: null
-  }
-  | {
-    kind: 'AUTHENTICATED'
-    isLoading: false
-    error: null
-    authInfo: {
-      userId: string
-      status: string
-      roles: {
-        archived?: boolean
-        member?: boolean
-      }
-    }
+export const useAuthStore = defineStore('auth', () => {
+  const config = getConfig()
+  const user = ref()
+  const isLoading = ref(false)
+  const token = useCookie(`goals_token_${config.ENV}`, {
+    maxAge: 60 * 60 * 24 * 30, // 30 days 
+    sameSite: 'lax'
+  })
+
+  const setToken = (newToken: string) => {
+    token.value = newToken
   }
 
-export const useAuthStore = defineStore({
-  id: 'auth-store',
-  state: (): AuthStoreState => ({
-    kind: 'UNAUTHENTICATED',
-    isLoading: false,
-    error: null,
-    authInfo: null
-  }),
-  actions: {
-    async fetchSelf () {
-      if (this.isLoading) return
+  const setUser = (user: any) => {
+    user.value = user
+  }
 
-      this.isLoading = true
+  const signin = async () => {
+    try {
+      isLoading.value = true
+      const [selfData, credentials] = await Promise.all([authAdapter.getSelf(), authAdapter.getGoalApiCredentials()])
 
-      try {
-        const { data, error } = await authAdapter.getSelf()
-        if (error != null) {
-          this.$patch({
-            kind: 'ERRORED',
-            error,
-            isLoading: false,
-            authInfo: null
-          })
-        } else if (data != null) {
-          this.$patch({
-            kind: 'AUTHENTICATED',
-            authInfo: data.info,
-            isLoading: false,
-            error: null
-          })
-          userRepo.save(data.user)
-        }
-      } catch (e) {
-        console.error(e)
-      }
+      user.value = selfData
+      token.value = credentials.token.access
+      isLoading.value = false
+    } catch (error) {
+      user.value = undefined
+      token.value = undefined
+      isLoading.value = false
     }
-  },
-  getters: {
-    getAuthState (state): AuthState {
-      if (state.kind === 'UNAUTHENTICATED') {
-        return {
-          kind: 'UNAUTHENTICATED',
-          isLoading: state.isLoading
-        }
-      } else if (state.kind === 'ERRORED') {
-        return {
-          kind: 'UNAUTHENTICATED',
-          isLoading: false,
-          error: state.error
-        }
-      } else {
-        const user = userRepo.find(state.authInfo.userId)
-        if (user == null) throw new Error('User not found in repository')
+  }
 
-        return {
-          kind: 'AUTHENTICATED',
-          isLoading: false,
-          roles: state.authInfo.roles,
-          user
-        }
-      }
-    }
+  const signout = () => {
+    token.value = undefined
+    user.value = undefined
+  }
+
+  return {
+    user,
+    token,
+    setToken,
+    setUser,
+    signin,
+    signout,
+    isLoading,
   }
-})
+})
\ No newline at end of file
diff --git a/store/goals.ts b/store/goals.ts
index b3dd5196..56369db8 100644
--- a/store/goals.ts
+++ b/store/goals.ts
@@ -12,6 +12,7 @@ export const useGoalListQuery = (query: GetGoalQuery, options = {}) => {
   const response = useQuery({
     queryFn: () => goalAdapter.fetchGoals(query),
     queryKey: ['goals', 'list', query],
+    staleTime: 1000 * 60,
   })
 
   return response