diff --git a/docker-compose.yml b/docker-compose.yml
index 615d7b14..39bf6e69 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -85,4 +85,4 @@ services:
     profiles: ["native"]
     build: ./backend
     ports: ["8080:8080"]
-    <<: *backend
+    <<: *backend
\ No newline at end of file
diff --git a/frontend/src/components/BCHeaderwSide/BCHeaderwSide.scss b/frontend/src/components/BCHeaderwSide/BCHeaderwSide.scss
index df51d526..e549bee0 100644
--- a/frontend/src/components/BCHeaderwSide/BCHeaderwSide.scss
+++ b/frontend/src/components/BCHeaderwSide/BCHeaderwSide.scss
@@ -63,6 +63,10 @@ button.#{vars.$bcgov-prefix}--header__action.#{vars.$bcgov-prefix}--header__menu
   will-change: width;
 }
 
+.#{vars.$bcgov-prefix}--header-panel{
+  overflow-y: scroll;
+}
+
 .overlay-element {
   position: fixed;
   top: 3rem;
diff --git a/frontend/src/components/MyProfile/index.tsx b/frontend/src/components/MyProfile/index.tsx
index dd9526b4..e58ab25d 100644
--- a/frontend/src/components/MyProfile/index.tsx
+++ b/frontend/src/components/MyProfile/index.tsx
@@ -72,7 +72,9 @@ const MyProfile = () => {
           >
             Log out
           </SideNavLink>
+          
         </ul>
+        <hr className="divisory mt-5" />
       </nav>
     </>
   );
diff --git a/frontend/src/services/AuthService.ts b/frontend/src/services/AuthService.ts
index f0134f90..2394f5db 100644
--- a/frontend/src/services/AuthService.ts
+++ b/frontend/src/services/AuthService.ts
@@ -6,7 +6,8 @@ import {
   signOut
 } from 'aws-amplify/auth';
 import { env } from '../env';
-import { UserClientRolesType } from '../types/UserRoleType';
+import { CognitoUserSession } from 'amazon-cognito-identity-js';
+import { formatRolesArray } from '../utils/famUtils';
 
 // Define a global variable to store the ID token
 let authIdToken: string | null = null;
@@ -17,7 +18,7 @@ export interface FamLoginUser {
   username?: string;
   idpProvider?: string;
   roles?: string[];
-  clientIds?: string[]; // Add clientIds to FamLoginUser interface
+  authToken?: CognitoUserSession;
   exp?: number;
 }
 
@@ -158,33 +159,9 @@ function parseToken(idToken: JWT | undefined, accessToken: JWT | undefined): Fam
     roles = decodedAccessToken['cognito:groups'] as Array<string>;
   }
 
-  // Extract client IDs from roles
-  const clientIds = parseClientIdsFromRoles(roles);
-
-  //hard coded data
-  // Define the roles array based on UserClientRolesType structure
-const rolesArray: UserClientRolesType[] = [
-  {
-    clientId: '00132184',
-    roles: ['role1', 'role2'], // Example roles for clientId '00132184'
-    clientName: 'Client Name 1'
-  },
-  {
-    clientId: '00012797',
-    roles: ['role3'], // Example roles for clientId '00012797'
-    clientName: 'Client Name 2'
-  },
-  {
-    clientId: '00001012',
-    roles: ['role4', 'role5'], // Example roles for clientId '00001012'
-    clientName: 'Client Name 3'
-  },
-  {
-    clientId: '00149081',
-    roles: ['role6'], // Example roles for clientId '00149081'
-    clientName: 'Client Name 4'
-  }
-];
+
+  //get the user roles from the FAM token
+  const rolesArray = formatRolesArray(decodedIdToken);
 
   const famLoginUser = {
     userName,
@@ -192,7 +169,6 @@ const rolesArray: UserClientRolesType[] = [
     email,
     idpProvider,
     clientRoles: rolesArray,
-    clientIds,
     exp: idToken?.payload.exp,
     firstName: sanitizedFirstName,
     lastName
@@ -202,18 +178,6 @@ const rolesArray: UserClientRolesType[] = [
   return famLoginUser;
 }
 
-/**
- * Function to parse client IDs from roles
- */
-function parseClientIdsFromRoles(roles: string[]): string[] {
-  // Implement logic to extract client IDs from roles here
-  // Placeholder implementation
-  return roles.map(role => {
-    const parts = role.split(':');
-    return parts[parts.length - 1];
-  });
-}
-
 /**
  *
  */
diff --git a/frontend/src/store.ts b/frontend/src/store.ts
index 96667c9f..f49058ad 100644
--- a/frontend/src/store.ts
+++ b/frontend/src/store.ts
@@ -5,18 +5,13 @@ import type { CognitoUserSession } from 'amazon-cognito-identity-js'
 import { userDetailsReducer } from './reducers/userReducer'
 import { UserClientRolesType } from './types/UserRoleType'
 import { selectedClientRolesReducer } from './reducers/selectedClientRolesReducer'
+import { FamLoginUser } from './services/AuthService'
 
 const reducer = combineReducers({
   userDetails: userDetailsReducer,
   selectedClientRoles: selectedClientRolesReducer
 });
 
-export interface FamLoginUser {
-  username?: string;
-  idpProvider?: string;
-  roles?: string[];
-  authToken?: CognitoUserSession;
-}
 const FAM_LOGIN_USER = 'famLoginUser';
 
 const userInfoFromStorage = JSON.parse(localStorage.getItem(FAM_LOGIN_USER) as string) as
diff --git a/frontend/src/utils/famUtils.ts b/frontend/src/utils/famUtils.ts
new file mode 100644
index 00000000..47a90e36
--- /dev/null
+++ b/frontend/src/utils/famUtils.ts
@@ -0,0 +1,28 @@
+import { UserClientRolesType } from "../types/UserRoleType";
+
+export function formatRolesArray(decodedIdToken: any): UserClientRolesType[] {
+    if (!decodedIdToken || !decodedIdToken['cognito:groups']) {
+      return [];
+    }
+  
+    const cognitoGroups: string[] = decodedIdToken['cognito:groups'];
+    const rolesMap: { [key: string]: string[] } = {};
+  
+    cognitoGroups.forEach(group => {
+      const [role, clientId] = group.split('_');
+      if (!rolesMap[clientId]) {
+        rolesMap[clientId] = [];
+      }
+      rolesMap[clientId].push(role);
+    });
+  
+    const rolesArray: UserClientRolesType[] = Object.keys(rolesMap).map(clientId => ({
+      clientId,
+      roles: rolesMap[clientId],
+      clientName: `Client Number ${clientId}` // Placeholder for client name, modify as needed
+    }));
+    console.log(rolesArray)
+  
+    return rolesArray;
+  }
+  
\ No newline at end of file