diff --git a/frontend/src/components/AuthCallbackHandler.vue b/frontend/src/components/AuthCallbackHandler.vue
index 60152bbb1..9528f82eb 100644
--- a/frontend/src/components/AuthCallbackHandler.vue
+++ b/frontend/src/components/AuthCallbackHandler.vue
@@ -6,7 +6,7 @@ import authService from '@/services/AuthService';
  * This component is to deal with Auth callback.
  */
 
-authService.methods.handlePostLogin().then((data) => {
+authService.handlePostLogin().then((data) => {
     router.push('/dashboard');
 });
 </script>
diff --git a/frontend/src/components/Landing.vue b/frontend/src/components/Landing.vue
index c867fd67e..8d914a78d 100644
--- a/frontend/src/components/Landing.vue
+++ b/frontend/src/components/Landing.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import Button from '@/components/common/Button.vue';
 import { IconSize } from '@/enum/IconEnum';
-import authService from '@/services/AuthService';
+import AuthService from '@/services/AuthService';
 import logo from '@/assets/images/bc-gov-logo.png';
 import TreeLogs from '@/assets/images/tree-logs.jpg';
 </script>
@@ -23,7 +23,7 @@ import TreeLogs from '@/assets/images/tree-logs.jpg';
                     class="landing-button"
                     label="Login with IDIR"
                     id="login-idir-button"
-                    @click="authService.methods.login()"
+                    @click="AuthService.login()"
                 >
                     <Icon icon="login" :size="IconSize.medium" />
                 </Button>
@@ -33,7 +33,7 @@ import TreeLogs from '@/assets/images/tree-logs.jpg';
                     label="Login with BCeID"
                     id="login-bceid-button"
                     disabled
-                    @click="authService.methods.login()"
+                    @click="AuthService.login()"
                 >
                     <Icon icon="login" :size="IconSize.medium" />
                 </Button>
diff --git a/frontend/src/components/common/ProfileSidebar.vue b/frontend/src/components/common/ProfileSidebar.vue
index 7d57186a7..8bfdc1b94 100644
--- a/frontend/src/components/common/ProfileSidebar.vue
+++ b/frontend/src/components/common/ProfileSidebar.vue
@@ -1,28 +1,38 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
-import Avatar from 'primevue/avatar';
 import Button from '@/components/common/Button.vue';
 import { IconSize } from '@/enum/IconEnum';
 import authService from '@/services/AuthService';
+import LoginUserState from '@/store/FamLoginUserState';
 import { profileSidebarState } from '@/store/ProfileSidebarState';
+import Avatar from 'primevue/avatar';
+import { computed, ref } from 'vue';
 
-const userName = authService.state.value.famLoginUser!.username;
-const initals = userName ? userName.slice(0, 2) : '';
-const displayName = authService.state.value.famLoginUser!.displayName;
-const email = authService.state.value.famLoginUser!.email;
+const userName = LoginUserState.state.value.famLoginUser!.username;
+const initials = userName ? userName.slice(0, 2) : '';
+const displayName = LoginUserState.state.value.famLoginUser!.displayName;
+const email = LoginUserState.state.value.famLoginUser!.email;
 
 // use local loading state, can't use LoadingState instance
 // due to logout() is handled by library.
 const loading = ref(false);
 
 const logout = () => {
-    authService.methods.logout();
+    authService.logout();
     loading.value = true;
 };
 
 const buttonLabel = computed(() => {
     return loading.value ? 'Signing out...' : 'Sign out';
 });
+
+const adminRoles = computed(() => {
+    const userAdminRoles = LoginUserState.getUserAdminRoleGroups()
+    if (userAdminRoles) {
+        return userAdminRoles.map((adminRole) => {
+            return adminRole.replace("_", " ")
+        }).join(", ")
+    }
+})
 </script>
 
 <template>
@@ -44,7 +54,7 @@ const buttonLabel = computed(() => {
             </div>
             <div class="sidebar-body">
                 <Avatar
-                    :label="initals"
+                    :label="initials"
                     class="mr-2 profile-avatar"
                     size="xlarge"
                     shape="circle"
@@ -53,6 +63,7 @@ const buttonLabel = computed(() => {
                     <p class="profile-name">{{ displayName }}</p>
                     <p class="profile-idir">IDIR: {{ userName }}</p>
                     <p class="profile-email">{{ email }}</p>
+                    <p class="profile-admin-level">Granted: <strong>{{ adminRoles }}</strong></p>
                 </div>
             </div>
             <hr class="profile-divider" />
@@ -132,7 +143,8 @@ const buttonLabel = computed(() => {
     }
 
     .profile-name,
-    .profile-idir {
+    .profile-idir,
+    .profile-email {
         margin-bottom: 0.375rem;
     }
 }
@@ -167,6 +179,7 @@ const buttonLabel = computed(() => {
 
 .profile-idir,
 .profile-email,
+.profile-admin-level,
 .options {
     font-size: 0.75rem;
     font-weight: 400;
diff --git a/frontend/src/components/grantaccess/GrantApplicationAdmin.vue b/frontend/src/components/grantaccess/GrantApplicationAdmin.vue
index 97f135201..8f8017d3c 100644
--- a/frontend/src/components/grantaccess/GrantApplicationAdmin.vue
+++ b/frontend/src/components/grantaccess/GrantApplicationAdmin.vue
@@ -1,19 +1,18 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
 import { ErrorMessage, Field, Form as VeeForm } from 'vee-validate';
 import { object, string } from 'yup';
 import router from '@/router';
 import Dropdown from 'primevue/dropdown';
 import { AdminMgmtApiService } from '@/services/ApiServiceFactory';
-import { UserType, type FamApplication } from 'fam-app-acsctl-api';
 import type { FamAppAdminCreateRequest } from 'fam-admin-mgmt-api/model/fam-app-admin-create-request';
-import type { FamApplicationGetResponse } from 'fam-admin-mgmt-api/model/fam-application-get-response';
 import Button from '@/components/common/Button.vue';
 import { IconSize } from '@/enum/IconEnum';
 import { Severity, ErrorDescription } from '@/enum/SeverityEnum';
-
 import { isLoading } from '@/store/LoadingState';
 import { setNotificationMsg } from '@/store/NotificationState';
+import LoginUserState from '@/store/FamLoginUserState';
+import { computed, ref } from 'vue';
+import { UserType } from 'fam-app-acsctl-api/model';
 
 const defaultFormData = {
     userId: '',
@@ -28,13 +27,8 @@ const formValidationSchema = object({
     application: object().required('Application is required'),
 });
 
-const applications = ref<FamApplicationGetResponse[]>();
-
-// This is going to be changed when the new backend API is ready
-onMounted(async () => {
-    applications.value = (
-        await AdminMgmtApiService.applicationsApi.getApplications()
-    ).data;
+const applicationOptions = computed(() => {
+    return LoginUserState.getAppsForFamAdminRole();
 });
 
 /* ------------------ User information method ------------------------- */
@@ -55,8 +49,8 @@ const cancelForm = () => {
 const toRequestPayload = (formData: any) => {
     const request = {
         user_name: formData.userId,
-        application_id: formData.application.application_id,
-        user_type_code: UserType.I,
+        application_id: formData.application.id,
+        user_type_code: UserType.I
     } as FamAppAdminCreateRequest;
     return request;
 };
@@ -69,7 +63,7 @@ const handleSubmit = async () => {
             setNotificationMsg(
                 Severity.Success,
                 `Admin privilege has been added to ${formData.value.userId.toUpperCase()} for application ${
-                    formData.value.application.application_name
+                    formData.value.application.name
                 }`
             );
         })
@@ -78,7 +72,7 @@ const handleSubmit = async () => {
                 setNotificationMsg(
                     Severity.Error,
                     `User ${formData.value.userId.toUpperCase()} is already a ${
-                        formData.value.application.application_name
+                        formData.value.application.name
                     } admin`
                 );
             } else if (
@@ -136,8 +130,8 @@ const handleSubmit = async () => {
                             <label>Select application</label>
                             <Dropdown
                                 v-model="formData.application"
-                                :options="(applications as FamApplication[])"
-                                optionLabel="application_description"
+                                :options="applicationOptions"
+                                optionLabel="description"
                                 placeholder="Choose an application"
                             />
                         </div>
diff --git a/frontend/src/components/header/Header.vue b/frontend/src/components/header/Header.vue
index ade64d09c..6bf5abec5 100644
--- a/frontend/src/components/header/Header.vue
+++ b/frontend/src/components/header/Header.vue
@@ -46,7 +46,7 @@ const props = defineProps({
 
             <a
                 title="Profile"
-                v-if="authService.getters.isLoggedIn()"
+                v-if="authService.isLoggedIn()"
                 @click="profileSidebarState.toggleVisible()"
             >
                 <Icon icon="user--avatar" :size="IconSize.medium" />
diff --git a/frontend/src/components/managePermissions/ManagePermissions.vue b/frontend/src/components/managePermissions/ManagePermissions.vue
index 95b1d1d9a..b887687f0 100644
--- a/frontend/src/components/managePermissions/ManagePermissions.vue
+++ b/frontend/src/components/managePermissions/ManagePermissions.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import { onUnmounted, shallowRef, type PropType } from 'vue';
+import { onUnmounted, shallowRef, type PropType, computed } from 'vue';
 import Dropdown, { type DropdownChangeEvent } from 'primevue/dropdown';
 import TabView from 'primevue/tabview';
 import TabPanel from 'primevue/tabpanel';
 import ManagePermissionsTitle from '@/components/managePermissions/ManagePermissionsTitle.vue';
 import UserDataTable from '@/components/managePermissions/table/UserDataTable.vue';
 import ApplicationAdminTable from '@/components/managePermissions/table/ApplicationAdminTable.vue';
-
+import LoginUserState from '@/store/FamLoginUserState';
 import {
-    applicationsUserAdministers,
     isApplicationSelected,
     selectedApplication,
     setSelectedApplication,
@@ -50,13 +49,17 @@ const applicationAdmins = shallowRef<FamAppAdminGetResponse[]>(
     props.applicationAdmins
 );
 
+const applicationsUserAdministers = computed(() => {
+    return LoginUserState.getApplicationsUserAdministers();
+});
+
 onUnmounted(() => {
     resetNotification();
 });
 
 const onApplicationSelected = async (e: DropdownChangeEvent) => {
     setSelectedApplication(e.value ? JSON.stringify(e.value) : null);
-    if (e.value.application_id === FAM_APPLICATION_ID) {
+    if (e.value.id === FAM_APPLICATION_ID) {
         applicationAdmins.value = await fetchApplicationAdmins();
     } else {
         userRoleAssignments.value = await fetchUserRoleAssignments(
@@ -115,7 +118,7 @@ const deleteAppAdmin = async (admin: FamAppAdminGetResponse) => {
                 v-model="selectedApplication"
                 @change="onApplicationSelected"
                 :options="applicationsUserAdministers"
-                optionLabel="application_description"
+                optionLabel="description"
                 placeholder="Choose an application to manage permissions"
                 class="application-dropdown"
             />
@@ -159,19 +162,6 @@ const deleteAppAdmin = async (admin: FamAppAdminGetResponse) => {
                         @deleteUserRoleAssignment="deleteUserRoleAssignment"
                     />
                 </TabPanel>
-
-                <!-- waiting for the Delegated admins table
-                <TabPanel
-                    header="Delegated admins"
-                    :disabled="false"
-                >
-                    <template #header>
-                        <Icon
-                            icon="enterprise"
-                            :size="IconSize.small"
-                        />
-                    </template>
-                </TabPanel>  -->
             </TabView>
         </div>
     </div>
diff --git a/frontend/src/router/routeHandlers.ts b/frontend/src/router/routeHandlers.ts
index 9c1abf7a9..6cd52c595 100644
--- a/frontend/src/router/routeHandlers.ts
+++ b/frontend/src/router/routeHandlers.ts
@@ -2,22 +2,21 @@ import { FamRouteError, RouteErrorName } from '@/errors/FamCustomError';
 import { routeItems } from '@/router/routeItem';
 import AuthService from '@/services/AuthService';
 import {
+    fetchApplicationAdmins,
     fetchApplicationRoles,
-    fetchApplications,
-    fetchUserRoleAssignments,
-    fetchApplicationAdmins
+    fetchUserRoleAssignments
 } from '@/services/fetchData';
 import { asyncWrap } from '@/services/utils';
 import {
     isApplicationSelected,
     selectedApplication,
-    selectedApplicationId
+    selectedApplicationId,
 } from '@/store/ApplicationState';
 import { populateBreadcrumb } from '@/store/BreadcrumbState';
 import { FAM_APPLICATION_ID } from '@/store/Constants';
+import LoginUserState from '@/store/FamLoginUserState';
 import { setRouteToastError as emitRouteToastError } from '@/store/ToastState';
 import type { RouteLocationNormalized } from 'vue-router';
-
 /**
  * This file should contain only the Vue router handler and necessary
  * helpers for router's life-cycle methods (beforeEach, beforeEnter etc...)
@@ -39,8 +38,6 @@ const ACCESS_RESTRICTED_ERROR = new FamRouteError(
 const beforeEnterDashboardRoute = async (to: RouteLocationNormalized) => {
     let applicationAdmins;
     let userRolesFetchResult;
-    // Requires fetching applications the user administers.
-    await asyncWrap(fetchApplications());
     if (selectedApplicationId.value === FAM_APPLICATION_ID) {
         applicationAdmins = await asyncWrap(fetchApplicationAdmins())
     } else {
@@ -66,7 +63,7 @@ const beforeEnterGrantUserPermissionRoute = async (
     }
 
     const appRolesFetchResult = await asyncWrap(
-        fetchApplicationRoles(selectedApplication.value!.application_id)
+        fetchApplicationRoles(selectedApplication.value!.id)
     );
     if (appRolesFetchResult.error) {
         emitRouteToastError(appRolesFetchResult.error);
@@ -108,7 +105,7 @@ export const beforeEachRouteHandler = async (
     from: RouteLocationNormalized
 ) => {
     // Authentication guard. Always check first.
-    if (to.meta.requiresAuth && !AuthService.getters.isLoggedIn()) {
+    if (to.meta.requiresAuth && !AuthService.isLoggedIn()) {
         // Only to compose this custom error, but not to throw.
         // Due to throwing error from router cannot be caught by Primevue toast.
         // The RouteError will be emitted to a state.
@@ -137,7 +134,7 @@ export const beforeEachRouteHandler = async (
     // Access privilege guard. This logic might need to be adjusted soon.
     if (to.meta.requiredPrivileges) {
         for (let role of (to.meta.requiredPrivileges as Array<string>)) {
-            if (!AuthService.methods.hasAccessRole(role)) {
+            if (!LoginUserState.hasAccessRole(role)) {
                 emitRouteToastError(ACCESS_RESTRICTED_ERROR);
                 return { path: routeItems.dashboard.path };
             }
@@ -145,9 +142,8 @@ export const beforeEachRouteHandler = async (
     }
 
     // Refresh token before navigation.
-    if (AuthService.state.value.famLoginUser) {
+    if (LoginUserState.state.value.famLoginUser) {
         // condition needed to prevent infinite redirect
-        await AuthService.methods.refreshToken();
-        await AuthService.methods.getUserAccess();
+        await AuthService.refreshToken();
     }
 };
diff --git a/frontend/src/services/AuthService.ts b/frontend/src/services/AuthService.ts
index ccff188a2..7c3d41d58 100644
--- a/frontend/src/services/AuthService.ts
+++ b/frontend/src/services/AuthService.ts
@@ -1,37 +1,12 @@
-import { readonly, ref } from 'vue';
-import { Auth } from 'aws-amplify';
-import type { CognitoUserSession } from 'amazon-cognito-identity-js';
 import { EnvironmentSettings } from '@/services/EnvironmentSettings';
-import { CURRENT_SELECTED_APPLICATION_KEY } from '@/store/ApplicationState';
-import { setRouteToastError } from '@/store/ToastState';
-import { AdminMgmtApiService } from '@/services/ApiServiceFactory';
-import type { FamAuthGrantDto } from 'fam-admin-mgmt-api/model';
-
-const FAM_LOGIN_USER = 'famLoginUser';
-
-export interface FamLoginUser {
-    username?: string;
-    displayName?: string;
-    email?: string;
-    idpProvider?: string;
-    roles?: string[];
-    authToken?: CognitoUserSession;
-    accesses?: FamAuthGrantDto[];
-}
-
-const state = ref({
-    famLoginUser: localStorage.getItem(FAM_LOGIN_USER)
-        ? (JSON.parse(localStorage.getItem(FAM_LOGIN_USER) as string) as
-              | FamLoginUser
-              | undefined
-              | null)
-        : undefined,
-});
+import LoginUserState, { type FamLoginUser } from '@/store/FamLoginUserState';
+import type { CognitoUserSession } from 'amazon-cognito-identity-js';
+import { Auth } from 'aws-amplify';
 
 // functions
 
 const isLoggedIn = (): boolean => {
-    const loggedIn = !!state.value.famLoginUser?.authToken; // TODO check if token expired later?
+    const loggedIn = !!LoginUserState.getAuthToken();
     return loggedIn;
 };
 
@@ -51,7 +26,7 @@ const login = async () => {
 
 const logout = async () => {
     Auth.signOut();
-    removeFamUser();
+    LoginUserState.removeFamUser();
     console.log('User logged out.');
 };
 
@@ -59,7 +34,11 @@ const handlePostLogin = async () => {
     try {
         await Auth.currentAuthenticatedUser();
         await refreshToken();
-        await getUserAccess();
+
+        // This is to update the FamLoginUser for FamLoginUser.accesses.
+        // For now team decided to grab user's access only when user login and may change later.
+        await LoginUserState.cacheUserAccess();
+
     } catch (error) {
         console.log('Not signed in');
         console.log('Authentication Error:', error);
@@ -67,18 +46,6 @@ const handlePostLogin = async () => {
     }
 };
 
-const getUserAccess = async () => {
-    try {
-        const userAccessData =
-            await AdminMgmtApiService.adminUserAccessesApi.adminUserAccessPrivilege();
-        state.value.famLoginUser!.accesses = userAccessData.data.access;
-        storeFamUser(state.value.famLoginUser);
-    } catch (error: any) {
-        console.log("Unable to get user's access in FAM", error);
-        setRouteToastError(error);
-    }
-};
-
 /**
  * Amplify method currentSession() will automatically refresh the accessToken and idToken
  * if tokens are "expired" and a valid refreshToken presented.
@@ -96,8 +63,13 @@ const refreshToken = async (): Promise<FamLoginUser | undefined> => {
         console.log('currentAuthToken: ', currentAuthToken);
 
         const famLoginUser = parseToken(currentAuthToken);
-        storeFamUser(famLoginUser);
+
+        // if there is and existing "accesses" for user, add it to FamLoginUser object.
+        const accesses = LoginUserState.getUserAccess();
+        if (accesses) famLoginUser.accesses = accesses;
+        LoginUserState.storeFamUser(famLoginUser);
         return famLoginUser;
+
     } catch (error) {
         console.error(
             'Problem refreshing token or token is invalidated:',
@@ -128,49 +100,12 @@ const parseToken = (authToken: CognitoUserSession): FamLoginUser => {
     return famLoginUser;
 };
 
-const removeFamUser = () => {
-    storeFamUser(undefined);
-    // clean up local storage for selected application
-    localStorage.removeItem(CURRENT_SELECTED_APPLICATION_KEY);
-};
-
-const storeFamUser = (famLoginUser: FamLoginUser | null | undefined) => {
-    state.value.famLoginUser = famLoginUser;
-    if (famLoginUser) {
-        localStorage.setItem(
-            FAM_LOGIN_USER,
-            JSON.stringify(state.value.famLoginUser)
-        );
-    } else {
-        localStorage.removeItem(FAM_LOGIN_USER);
-    }
-};
-
-const hasAccessRole = (role: string): boolean => {
-    if (state.value.famLoginUser?.roles?.includes(role)) {
-        return true;
-    }
-    return false;
-};
-
 // -----
 
-const methods = {
+export default {
     login,
+    isLoggedIn,
     handlePostLogin,
     logout,
-    refreshToken,
-    removeFamUser,
-    hasAccessRole,
-    getUserAccess
-};
-
-const getters = {
-    isLoggedIn,
-};
-
-export default {
-    state: readonly(state), // readonly to prevent direct state change; force it through methods if needed to.
-    methods,
-    getters,
+    refreshToken
 };
diff --git a/frontend/src/services/fetchData.ts b/frontend/src/services/fetchData.ts
index e09f0bf90..d6503f373 100644
--- a/frontend/src/services/fetchData.ts
+++ b/frontend/src/services/fetchData.ts
@@ -1,19 +1,9 @@
+import { AdminMgmtApiService, AppActlApiService } from '@/services/ApiServiceFactory';
 import type { FamAppAdminGetResponse } from 'fam-admin-mgmt-api/model';
 import type { FamApplicationUserRoleAssignmentGet } from 'fam-app-acsctl-api';
-import { AppActlApiService, AdminMgmtApiService } from '@/services/ApiServiceFactory';
-import { setApplicationsUserAdministers } from '@/store/ApplicationState';
 
 // --- Fetching data (from backend)
 
-export const fetchApplications = async () => {
-    const applications = (
-        await AppActlApiService.applicationsApi.getApplications()
-    ).data;
-
-    // State change.
-    setApplicationsUserAdministers(applications);
-};
-
 export const fetchUserRoleAssignments = async (
     applicationId: number | undefined
 ): Promise<FamApplicationUserRoleAssignmentGet[]> => {
diff --git a/frontend/src/services/http/HttpRequestInterceptors.ts b/frontend/src/services/http/HttpRequestInterceptors.ts
index dd7fd0bce..9d6aa5a84 100644
--- a/frontend/src/services/http/HttpRequestInterceptors.ts
+++ b/frontend/src/services/http/HttpRequestInterceptors.ts
@@ -1,11 +1,11 @@
-import authService from '@/services/AuthService';
-import type { AxiosRequestConfig, InternalAxiosRequestConfig } from 'axios';
+import LoginUserState from '@/store/FamLoginUserState';
+import type { InternalAxiosRequestConfig } from 'axios';
 
 // Typically when adding "request" interceptors, they are presumed to be asynchronous by default.
 // See "https://www.npmjs.com/package/axios#interceptors" if there is a need for synchronous interceptors behaviour.
 
 function addAuthHeaderItcpt(config: InternalAxiosRequestConfig) {
-    const authToken = authService.state.value.famLoginUser?.authToken;
+    const authToken = LoginUserState.getAuthToken();
     if (authToken) {
         const authHeader = `Bearer ${authToken.getAccessToken().getJwtToken()}`;
         config.headers.setAuthorization(authHeader)
diff --git a/frontend/src/services/http/HttpResponseInterceptors.ts b/frontend/src/services/http/HttpResponseInterceptors.ts
index 083e8155c..71dd663f1 100644
--- a/frontend/src/services/http/HttpResponseInterceptors.ts
+++ b/frontend/src/services/http/HttpResponseInterceptors.ts
@@ -1,8 +1,9 @@
+import router from '@/router';
 import AuthService from '@/services/AuthService';
 import Http from '@/services/http/HttpCommon';
+import LoginUserState from '@/store/FamLoginUserState';
 import type { AxiosRequestConfig, AxiosResponse } from 'axios';
 import { ref } from 'vue';
-import router from '../../router';
 
 /*
 Note! Any status other than 2xx will be rejected (default status handling from Axios unless changed).
@@ -25,7 +26,7 @@ async function authenticationErrorResponsesItcpt(error: any) {
                 return Promise.reject(error);
             }
         } else {
-            AuthService.methods.removeFamUser(); // Done retry refresh token, token expired; remove user.
+            LoginUserState.removeFamUser(); // Done retry refresh token, token expired; remove user.
             router.replace('/'); // 401 unauthenticated/expired, back to home page.
         }
     }
@@ -38,7 +39,7 @@ async function refreshTokenAndReTry(
     response: AxiosResponse
 ) {
     // Refresh token.
-    await AuthService.methods.refreshToken();
+    await AuthService.refreshToken();
 
     // Try original request again.
     retryCount.value++;
diff --git a/frontend/src/store/ApplicationState.ts b/frontend/src/store/ApplicationState.ts
index 6577fbe8a..3aa0e6722 100644
--- a/frontend/src/store/ApplicationState.ts
+++ b/frontend/src/store/ApplicationState.ts
@@ -1,13 +1,9 @@
-import type { FamApplication } from 'fam-app-acsctl-api';
+import type { FamApplicationDto } from 'fam-admin-mgmt-api/model';
 import { computed, ref } from 'vue';
 
 export const CURRENT_SELECTED_APPLICATION_KEY = 'CURRENT_SELECTED_APPLICATION';
 
-// The applications the user has access to administer
-export const applicationsUserAdministers = ref<FamApplication[]>([]);
-
-// The application selected by the user to admin
-export const selectedApplication = ref<FamApplication | null>(
+export const selectedApplication = ref<FamApplicationDto | null>(
     localStorage.getItem(CURRENT_SELECTED_APPLICATION_KEY)
         ? JSON.parse(
             localStorage.getItem(CURRENT_SELECTED_APPLICATION_KEY) as string
@@ -17,10 +13,6 @@ export const selectedApplication = ref<FamApplication | null>(
 
 // --- Setter
 
-export const setApplicationsUserAdministers = (newValue: FamApplication[]) => {
-    applicationsUserAdministers.value = newValue;
-};
-
 export const setSelectedApplication = (newValue: string | null) => {
     selectedApplication.value = JSON.parse(newValue as string);
     if (newValue)
@@ -33,14 +25,14 @@ export const isApplicationSelected = computed(() => {
 });
 
 export const selectedApplicationId = computed(() => {
-    return selectedApplication.value?.application_id
+    return selectedApplication.value?.id
 })
 
 // --- Getter
 
 export const selectedApplicationShortDisplayText = computed(() => {
     if (selectedApplication.value) {
-        return `${selectedApplication.value.application_name.toUpperCase()}`;
+        return `${selectedApplication.value.name.toUpperCase()}`;
     } else {
         return '';
     }
@@ -48,7 +40,7 @@ export const selectedApplicationShortDisplayText = computed(() => {
 
 export const selectedApplicationDisplayText = computed(() => {
     if (selectedApplication.value) {
-        return `${selectedApplication.value.application_description}`;
+        return `${selectedApplication.value.description}`;
     } else {
         return '';
     }
diff --git a/frontend/src/store/FamLoginUserState.ts b/frontend/src/store/FamLoginUserState.ts
new file mode 100644
index 000000000..3061cc53d
--- /dev/null
+++ b/frontend/src/store/FamLoginUserState.ts
@@ -0,0 +1,166 @@
+import { AdminMgmtApiService } from '@/services/ApiServiceFactory';
+import { CURRENT_SELECTED_APPLICATION_KEY } from '@/store/ApplicationState';
+import { FAM_APPLICATION_NAME } from '@/store/Constants';
+import { setRouteToastError } from '@/store/ToastState';
+import type { CognitoUserSession } from 'amazon-cognito-identity-js';
+import { AdminRoleAuthGroup, type FamApplicationDto, type FamAuthGrantDto } from 'fam-admin-mgmt-api/model';
+import { readonly, ref } from "vue";
+
+const FAM_LOGIN_USER = 'famLoginUser';
+
+// For some of the values of the FAMLoginUser properties, see AuthService.parseToken().
+export interface FamLoginUser {
+    username?: string;
+    displayName?: string;
+    email?: string;
+    idpProvider?: string; // from ID Token's ['identities']['providerName'] attribute.
+    roles?: string[]; // roles from Access Token's ['cognito:groups']. This may soon be redundant after delegated admin design.
+    authToken?: CognitoUserSession; // original JWT token from AWS Cognito (ID && Access Tokens).
+    accesses?: FamAuthGrantDto[]; // admin privileges retrieved from backend.
+};
+
+const state = ref({
+    famLoginUser: localStorage.getItem(FAM_LOGIN_USER)
+        ? (JSON.parse(localStorage.getItem(FAM_LOGIN_USER) as string) as
+              | FamLoginUser
+              | undefined
+              | null)
+        : undefined,
+});
+
+// --- getters
+
+const getAuthToken = () => {
+    return state.value.famLoginUser?.authToken;
+};
+
+const getUserAccess = () => {
+    return state.value.famLoginUser?.accesses;
+};
+
+// admin levels: 'FAM_ADMIN', 'APP_ADMIN', 'DELEGATED_ADMIN'
+const getUserAdminRoleGroups = () => {
+    const accesses = getUserAccess();
+    if (accesses && accesses.length > 0) {
+        return accesses.map(
+            (access) => access.auth_key
+        )
+    }
+};
+
+/**
+ * @returns array of applications for 'FAM_ADMIN' to be administered.
+ */
+const getAppsForFamAdminRole = (): FamApplicationDto[] | undefined => {
+    const accesses = getUserAccess();
+    if (accesses && accesses.length > 0) {
+        const access = accesses.filter(
+            (access) => access.auth_key == AdminRoleAuthGroup.FamAdmin
+        )[0]
+        return access
+            .grants
+            .map((grant) => grant.application)
+            .sort((first, second) => first.id - second.id);
+    }
+};
+
+/**
+ * Note!! this is to combine all applications the user has been granted
+ * and can administer on with different admin level privileges, only for
+ * special usage at dashboard page (ManagePermissions) since the user when
+ * it lands on the first page it needs to select "application" first.
+ *
+ * If the way our forntend works is based on admin level to display
+ * management table instead of selecting "applicatoin" first, it won't need
+ * this particular function.
+ */
+const getApplicationsUserAdministers = () => {
+    const accesses = getUserAccess();
+    let famApp;
+    const applicationList: Array<FamApplicationDto> = [];
+    if (accesses && accesses.length > 0) {
+        accesses.forEach((access) => {
+            const accessGrants = access.grants;
+            if (access.auth_key == AdminRoleAuthGroup.FamAdmin) {
+                famApp = accessGrants.filter(
+                    (grant) => grant.application.name == FAM_APPLICATION_NAME
+                )[0].application;
+            } else {
+                accessGrants.forEach((grant) => {
+                    const app = grant.application
+                    let isNewItem = true
+                    for (let item of applicationList) {
+                        if (item.id == app.id) {
+                            isNewItem = false;
+                            break;
+                        }
+                    }
+                    if (isNewItem) applicationList.push(app);
+                });
+            }
+        });
+        applicationList.sort((first, second) => first.id - second.id);
+        if (famApp) applicationList.unshift(famApp); // add FAM to the first if FAM Admin.
+    }
+
+    return applicationList;
+};
+
+const hasAccessRole = (role: string): boolean => {
+    if (state.value.famLoginUser?.roles?.includes(role)) {
+        return true;
+    }
+    return false;
+};
+
+// --- setters
+
+const storeFamUser = (famLoginUser: FamLoginUser | null | undefined) => {
+    state.value.famLoginUser = famLoginUser;
+    if (famLoginUser) {
+        localStorage.setItem(
+            FAM_LOGIN_USER,
+            JSON.stringify(state.value.famLoginUser)
+        );
+    } else {
+        localStorage.removeItem(FAM_LOGIN_USER);
+    }
+};
+
+const removeFamUser = () => {
+    storeFamUser(undefined);
+    // clean up local storage for selected application
+    localStorage.removeItem(CURRENT_SELECTED_APPLICATION_KEY);
+};
+
+/**
+ * To cache User granted privileges when neccssary.
+ * FamLoginUser contains a property "accesses" that sometimes needs to be
+ * refreshed and stored into localStorage at FamLoginUser object.
+ */
+const cacheUserAccess = async () => {
+    try {
+        const userAccessData =
+            await AdminMgmtApiService.adminUserAccessesApi.adminUserAccessPrivilege();
+        state.value.famLoginUser!.accesses = userAccessData.data.access;
+        storeFamUser(state.value.famLoginUser);
+    } catch (error: any) {
+        console.log("Unable to get user's access in FAM", error);
+        setRouteToastError(error);
+    }
+};
+
+// --- export
+
+export default {
+    state: readonly(state), // readonly to prevent direct state change; force it through functions if needed to.
+    getAuthToken,
+    getUserAccess,
+    getUserAdminRoleGroups,
+    getAppsForFamAdminRole,
+    getApplicationsUserAdministers,
+    hasAccessRole,
+    storeFamUser,
+    removeFamUser,
+    cacheUserAccess
+};
\ No newline at end of file
diff --git a/frontend/src/tests/Landing.spec.ts b/frontend/src/tests/Landing.spec.ts
index 36d1e3db1..5a106767a 100644
--- a/frontend/src/tests/Landing.spec.ts
+++ b/frontend/src/tests/Landing.spec.ts
@@ -57,7 +57,7 @@ describe('Landing', () => {
     });
     it('should button Login with IDIR be clicked', async () => {
         const button = wrapper.get('#login-idir-button');
-        const loginSpy = vi.spyOn(AuthService.methods, 'login');
+        const loginSpy = vi.spyOn(AuthService, 'login');
         await button.trigger('click');
         expect(loginSpy).toHaveBeenCalled();
     });