diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index d998dc8d4..451aef5d9 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,13 +8,13 @@
             "name": "fam-frontend",
             "version": "0.0.0",
             "dependencies": {
-                "@bcgov-nr/nr-theme": "^1.4.2",
+                "@bcgov-nr/nr-theme": "^1.5.0",
                 "@carbon/icons-vue": "^10.72.1",
                 "aws-amplify": "^5.3.6",
                 "axios": "0.26.1",
                 "bootstrap": "^5.2.3",
                 "fam-api": "file:../client-code-gen/gen",
-                "primevue": "^3.27.0",
+                "primevue": "3.34.0",
                 "vee-validate": "^4.7.3",
                 "vue": "^3.2.38",
                 "vue-router": "^4.1.5"
@@ -7616,9 +7616,9 @@
             }
         },
         "node_modules/@bcgov-nr/nr-theme": {
-            "version": "1.4.2",
-            "resolved": "https://registry.npmjs.org/@bcgov-nr/nr-theme/-/nr-theme-1.4.2.tgz",
-            "integrity": "sha512-e1PCx2JvC56dehfjar5Hg7d+VF82i8K8Q8QrNvyLUiPVBx7qwk+kQF0Ur/b12xKgZXfsVeO5wxc2lcVZHyl9yA=="
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/@bcgov-nr/nr-theme/-/nr-theme-1.5.0.tgz",
+            "integrity": "sha512-6/CD1mnR9Kp5L+3JDykD/uui6ozbSrk8Eb+8pa1REFUC7cbW/D/CAvxIMiNJpyVYMSRAg+skSpux15kPJMWFpw=="
         },
         "node_modules/@bcoe/v8-coverage": {
             "version": "0.2.3",
@@ -15686,9 +15686,9 @@
             "peer": true
         },
         "node_modules/primevue": {
-            "version": "3.29.1",
-            "resolved": "https://registry.npmjs.org/primevue/-/primevue-3.29.1.tgz",
-            "integrity": "sha512-dn00eWy5ZVL5srjVD/sLppjg4leDPKx3EUxOMuTi/o5e0XHGB1ZASfXPSSNTr314k3NWpoQqzuDfPNOg4PJ7fg==",
+            "version": "3.34.0",
+            "resolved": "https://registry.npmjs.org/primevue/-/primevue-3.34.0.tgz",
+            "integrity": "sha512-vh77EGp9ansFWixFPnJpjjQ9p/TLbZKJDx2lbTKTVrc370LyLx9Mh2JeDjOMlzhW1GAK4j209HwHGft/NTAtaA==",
             "peerDependencies": {
                 "vue": "^3.0.0"
             }
@@ -24643,9 +24643,9 @@
             }
         },
         "@bcgov-nr/nr-theme": {
-            "version": "1.4.2",
-            "resolved": "https://registry.npmjs.org/@bcgov-nr/nr-theme/-/nr-theme-1.4.2.tgz",
-            "integrity": "sha512-e1PCx2JvC56dehfjar5Hg7d+VF82i8K8Q8QrNvyLUiPVBx7qwk+kQF0Ur/b12xKgZXfsVeO5wxc2lcVZHyl9yA=="
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/@bcgov-nr/nr-theme/-/nr-theme-1.5.0.tgz",
+            "integrity": "sha512-6/CD1mnR9Kp5L+3JDykD/uui6ozbSrk8Eb+8pa1REFUC7cbW/D/CAvxIMiNJpyVYMSRAg+skSpux15kPJMWFpw=="
         },
         "@bcoe/v8-coverage": {
             "version": "0.2.3",
@@ -30776,9 +30776,9 @@
             }
         },
         "primevue": {
-            "version": "3.29.1",
-            "resolved": "https://registry.npmjs.org/primevue/-/primevue-3.29.1.tgz",
-            "integrity": "sha512-dn00eWy5ZVL5srjVD/sLppjg4leDPKx3EUxOMuTi/o5e0XHGB1ZASfXPSSNTr314k3NWpoQqzuDfPNOg4PJ7fg==",
+            "version": "3.34.0",
+            "resolved": "https://registry.npmjs.org/primevue/-/primevue-3.34.0.tgz",
+            "integrity": "sha512-vh77EGp9ansFWixFPnJpjjQ9p/TLbZKJDx2lbTKTVrc370LyLx9Mh2JeDjOMlzhW1GAK4j209HwHGft/NTAtaA==",
             "requires": {}
         },
         "process-nextick-args": {
diff --git a/frontend/package.json b/frontend/package.json
index 2b4de201f..a3db71123 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,13 +13,13 @@
         "test-coverage": "vitest run --coverage"
     },
     "dependencies": {
-        "@bcgov-nr/nr-theme": "^1.4.2",
+        "@bcgov-nr/nr-theme": "^1.5.0",
         "@carbon/icons-vue": "^10.72.1",
         "aws-amplify": "^5.3.6",
         "axios": "0.26.1",
         "bootstrap": "^5.2.3",
         "fam-api": "file:../client-code-gen/gen",
-        "primevue": "^3.27.0",
+        "primevue": "3.34.0",
         "vee-validate": "^4.7.3",
         "vue": "^3.2.38",
         "vue-router": "^4.1.5"
diff --git a/frontend/src/alltypes.d.ts b/frontend/src/alltypes.d.ts
index 71fa2f220..5d43bf476 100644
--- a/frontend/src/alltypes.d.ts
+++ b/frontend/src/alltypes.d.ts
@@ -23,3 +23,6 @@ declare module '@carbon/icons-vue/es/user--avatar/20';
 
 // large
 declare module '@carbon/icons-vue/es/error--filled/24';
+declare module '@carbon/icons-vue/es/trash-can/16';
+declare module '@carbon/icons-vue/es/edit/16';
+declare module '@carbon/icons-vue/es/menu/20';
diff --git a/frontend/src/assets/styles/default-theme.scss b/frontend/src/assets/styles/default-theme.scss
index cf9be451a..17ecb2e95 100644
--- a/frontend/src/assets/styles/default-theme.scss
+++ b/frontend/src/assets/styles/default-theme.scss
@@ -44,4 +44,4 @@ $light-support-success: map.get(lightTheme.$light-theme, 'support-success');
 
 //icon
 $light-icon-primary: map.get(lightTheme.$light-theme, 'icon-primary');
-
+$light-icon-on-color: map.get(lightTheme.$light-theme, 'icon-on-color');
diff --git a/frontend/src/assets/styles/icon.scss b/frontend/src/assets/styles/icon.scss
index 56c0862d1..6ce02b3bb 100644
--- a/frontend/src/assets/styles/icon.scss
+++ b/frontend/src/assets/styles/icon.scss
@@ -15,7 +15,7 @@
 }
 .custom-carbon-icon--help,
 .custom-carbon-icon--sidenav  {
-    margin-right: 1.5625rem;
+    margin-right: 1.5rem;
 }
 
 .custom-carbon-icon--sidenav {
@@ -24,4 +24,8 @@
 
 .custom-carbon-icon--trash-can {
     color: $light-icon-primary;
+}
+
+.custom-carbon-icon--menu {
+    color: $light-icon-on-color;
 }
\ No newline at end of file
diff --git a/frontend/src/assets/styles/layout.scss b/frontend/src/assets/styles/layout.scss
index 2bafa35ff..68e57aebd 100644
--- a/frontend/src/assets/styles/layout.scss
+++ b/frontend/src/assets/styles/layout.scss
@@ -9,15 +9,15 @@ body {
     position: absolute;
     display: block;
     height: calc(100vh - $header-height);
-    left: 16rem;
-    right: 0;
+    width: 100vw;
     bottom: 0;
     overflow: auto;
-    padding: 2.62rem 2rem 0;
+    padding: 1.06rem 1rem 0 1rem;
 }
 
 .page-body {
-    margin-top: 2rem;
+    margin-top: 1.5rem;
+    width: 100%;
 }
 
 .form-container {
@@ -59,3 +59,20 @@ input[type='number'] {
 .p-inputtext {
     font-family: inherit;
 }
+
+@media (min-width: 768px) {
+    .main {
+        padding: 1.5rem 1.5rem 0 1.5rem;
+    }
+}
+
+@media (min-width: 1024px) {
+    .page-body {
+        width:  100%;
+    }
+
+    .main {
+        left: 16rem;
+        width: calc(100vw - 16rem);
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/components/common/Button.vue b/frontend/src/components/common/Button.vue
index 04d560265..bb947c883 100644
--- a/frontend/src/components/common/Button.vue
+++ b/frontend/src/components/common/Button.vue
@@ -66,9 +66,7 @@ function onClicked(event: any) {
     </Button>
 </template>
 <style lang="scss">
-.nr-button {
-    display: flex;
-}
+
 .nr-button .icon {
     margin-right: auto;
 }
diff --git a/frontend/src/components/common/Icon.vue b/frontend/src/components/common/Icon.vue
index cc25193b5..a47c1c5fe 100644
--- a/frontend/src/components/common/Icon.vue
+++ b/frontend/src/components/common/Icon.vue
@@ -73,6 +73,9 @@ const icons = {
     'error--filled24': defineAsyncComponent(
         () => import('@carbon/icons-vue/es/error--filled/24')
     ),
+    menu20: defineAsyncComponent(
+        () => import('@carbon/icons-vue/es/menu/20')
+    ),
 } as any;
 </script>
 
diff --git a/frontend/src/components/common/ProfileSidebar.vue b/frontend/src/components/common/ProfileSidebar.vue
index c99a6adc2..abf2519d3 100644
--- a/frontend/src/components/common/ProfileSidebar.vue
+++ b/frontend/src/components/common/ProfileSidebar.vue
@@ -4,7 +4,7 @@ import Avatar from 'primevue/avatar';
 import Button from '@/components/common/Button.vue';
 import { IconPosition, IconSize } from '@/enum/IconEnum';
 import authService from '@/services/AuthService';
-import { useProfileSidebarVisible } from '@/store/ProfileVisibleState';
+import { profileSidebarState } from '@/store/ProfileSidebarState';
 
 const userName = authService.state.value.famLoginUser!.username;
 const initals = userName ? userName.slice(0, 2) : '';
@@ -28,20 +28,20 @@ const buttonLabel = computed(() => {
 <template>
     <div
         :class="
-            useProfileSidebarVisible.isProfileVisible ? 'fade-in' : 'fade-out'
+            profileSidebarState.isVisible ? 'fade-in' : 'fade-out'
         "
-        @click="useProfileSidebarVisible.toggleVisible()"
+        @click="profileSidebarState.toggleVisible()"
     ></div>
     <Transition name="slide">
         <div
             class="profile-container"
-            v-if="useProfileSidebarVisible.isProfileVisible"
+            v-if="profileSidebarState.isVisible"
         >
             <div class="profile-header">
                 <h2>Profile</h2>
                 <button
                     class="btn-icon"
-                    @click="useProfileSidebarVisible.toggleVisible()"
+                    @click="profileSidebarState.toggleVisible()"
                     aria-label="Close"
                 >
                     <Icon icon="close" :size="IconSize.small"></Icon>
@@ -90,7 +90,7 @@ const buttonLabel = computed(() => {
     border-left: 0.0625rem solid #dfdfe1;
     color: #000;
     height: calc(100vh - 3rem);
-    inset: 0 0 0 10%;
+    inset: 0 0 0 0;
     margin: 3rem 0 0;
     padding: 0 1rem 0;
     position: fixed;
@@ -200,7 +200,7 @@ const buttonLabel = computed(() => {
     position: fixed;
     width: 100%;
     inset: 3rem 0 0 0;
-    z-index: 999;
+    z-index: 1110;
 }
 
 .fade-out {
@@ -214,6 +214,12 @@ const buttonLabel = computed(() => {
     }
 }
 
+@media (min-width: 600px) {
+    .profile-container {
+        inset: 0 0 0 50%;
+    }
+}
+
 @media (min-width: 790px) {
     .profile-container {
         inset: 0 0 0 60%;
@@ -221,6 +227,12 @@ const buttonLabel = computed(() => {
 }
 
 @media (min-width: 900px) {
+    .profile-container {
+        inset: 0 0 0 60%;
+    }
+}
+
+@media (min-width: 1366px) {
     .profile-container {
         inset: 0 0 0 70%;
     }
diff --git a/frontend/src/components/common/SideNav.vue b/frontend/src/components/common/SideNav.vue
index 3816481dc..547f07ab8 100644
--- a/frontend/src/components/common/SideNav.vue
+++ b/frontend/src/components/common/SideNav.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import router from '@/router';
+import Sidebar from 'primevue/sidebar';
+import { IconSize } from '@/enum/IconEnum';
+import { sideNavState } from '@/store/SideNavState';
 import type { PropType } from 'vue';
 import type { RouteLocationRaw } from 'vue-router';
-import { IconSize } from '@/enum/IconEnum';
 
 export interface ISideNavData {
     name: string;
@@ -23,67 +25,75 @@ const props = defineProps({
         default: '',
     },
 });
+
 </script>
 <template>
-    <nav class="sidenav">
-        <a
-            class="sidenav-logo"
-            title="Forests Access Management"
-            href="https://www2.gov.bc.ca"
-        >
-            <img
-                src="@/assets/images/17_gov3_bc_logo_transparent.svg"
-                alt="B.C. Government Logo"
-            />
-        </a>
-        <div class="content">
-            <ul>
-                <div v-for="item in props.data">
-                    <li class="header">{{ item.name }}</li>
+    <Sidebar
+        v-model:visible="sideNavState.isVisible"
+    >
+        <template #header>
+            <a
+                class="sidenav-logo"
+                title="Forests Access Management"
+                href="https://www2.gov.bc.ca"
+            >
+                <img
+                    src="@/assets/images/17_gov3_bc_logo_transparent.svg"
+                    alt="B.C. Government Logo"
+                />
+            </a>
+        </template>
+        <nav class="sidenav">
+            <div class="content">
+                <ul>
+                    <div v-for="item in props.data">
+                        <li class="header">{{ item.name }}</li>
+                        <ul>
+                            <li
+                                v-for="child in item.items"
+                                class="child"
+                                :class="{
+                                    'sidenav-selected':
+                                        $router.currentRoute.value.path ==
+                                        child.link,
+                                    'sidenav-disabled': child.disabled,
+                                }"
+                                @click="router.push(child.link)"
+                            >
+                                <Icon
+                                    class="custom-carbon-icon--sidenav"
+                                    :icon="child.icon.toString()"
+                                    :size="IconSize.small"
+                                />
+                                {{ child.name }}
+                            </li>
+                        </ul>
+                    </div>
+                </ul>
+            </div>
+
+            <!-- Leaving this piece of code below commented out because we will need to reuse it again in the future when we have the functionality -->
+            <!-- <div class="support-section sidenav-disabled">
+                <ul>
+                    <li class="header">Support</li>
                     <ul>
                         <li
-                            v-for="child in item.items"
                             class="child"
-                            :class="{
-                                'sidenav-selected':
-                                    $router.currentRoute.value.path ==
-                                    child.link,
-                                'sidenav-disabled': child.disabled,
-                            }"
-                            @click="router.push(child.link)"
+                            click="mailto:SIBIFSAF@Victoria1.gov.bc.ca"
                         >
                             <Icon
-                                class="custom-carbon-icon--sidenav"
-                                :icon="child.icon.toString()"
+                                icon="help"
                                 :size="IconSize.small"
+                                class="custom-carbon-icon--help"
                             />
-                            {{ child.name }}
+                            Need help?
                         </li>
                     </ul>
-                </div>
-            </ul>
-        </div>
-
-        <!-- Leaving this piece of code below commented out because we will need to reuse it again in the future when we have the functionality -->
-        <!-- <div class="support-section sidenav-disabled">
-            <ul>
-                <li class="header">Support</li>
-                <ul>
-                    <li
-                        class="child"
-                        click="mailto:SIBIFSAF@Victoria1.gov.bc.ca"
-                    >
-                        <Icon
-                            icon="help"
-                            :size="IconSize.small"
-                            class="custom-carbon-icon--help"
-                        />
-                        Need help?
-                    </li>
                 </ul>
-            </ul>
-        </div> -->
-    </nav>
+            </div> -->
+        </nav>
+    </Sidebar>
+
 </template>
 <style lang="scss" scoped>
 @import '@/assets/styles/styles.scss';
@@ -98,14 +108,13 @@ const props = defineProps({
 
 .sidenav {
     position: fixed;
-    padding: 1rem 0rem;
-    width: 16rem;
+    padding: 0.75rem 0rem;
+    width: 100%;
     height: calc(100vh - 3.125rem);
     left: 0rem;
     top: 3rem;
     overflow-x: hidden;
     overflow-y: auto;
-    box-shadow: inset -0.063rem 0rem 0rem $light-border-subtle-00;
     .content {
         position: relative;
         min-height: auto;
@@ -167,4 +176,11 @@ ul#nav li.active a {
     background: $light-layer-selected-01;
     box-shadow: inset 0.188rem 0rem 0rem $light-border-interactive;
 }
+
+
+@media (min-width: 768px) {
+    .sidenav {
+        width: 100%;
+    }
+}
 </style>
diff --git a/frontend/src/components/grantaccess/Summary.vue b/frontend/src/components/grantaccess/Summary.vue
index da4f98947..8c275e6c1 100644
--- a/frontend/src/components/grantaccess/Summary.vue
+++ b/frontend/src/components/grantaccess/Summary.vue
@@ -4,7 +4,7 @@ import router from '@/router';
 import { selectedApplicationDisplayText } from '@/store/ApplicationState';
 import { onMounted } from 'vue';
 
-import { useNotificationMessage } from '@/store/NotificationState';
+import { notificationMessageState } from '@/store/NotificationState';
 
 import { ApiServiceFactory } from '@/services/ApiServiceFactory';
 import {
@@ -27,7 +27,7 @@ async function handleSubmit() {
     await userRoleAssignmentApi.createUserRoleAssignment(
         grantAccessFormData.value as FamUserRoleAssignmentCreate
     );
-    useNotificationMessage.isNotificationVisible = true;
+    notificationMessageState.isVisible = true;
     router.push('/dashboard');
     resetGrantAccessFormData();
 }
diff --git a/frontend/src/components/grantaccess/SummaryCard.vue b/frontend/src/components/grantaccess/SummaryCard.vue
index 74fde9902..f2d9d1c06 100644
--- a/frontend/src/components/grantaccess/SummaryCard.vue
+++ b/frontend/src/components/grantaccess/SummaryCard.vue
@@ -4,7 +4,7 @@ import { selectedApplicationDisplayText } from '@/store/ApplicationState';
 import Card from 'primevue/card';
 import { onMounted, type PropType } from 'vue';
 
-import { useNotificationMessage } from '@/store/NotificationState';
+import { notificationMessageState } from '@/store/NotificationState';
 
 import LoadingState from '@/store/LoadingState';
 import type { FamUserRoleAssignmentCreate } from 'fam-api';
@@ -21,7 +21,7 @@ const props = defineProps({
 });
 
 onMounted(() => {
-    useNotificationMessage.notificationMsg =
+    notificationMessageState.notificationMsg =
         props.data != undefined
             ? `New access granted to ${props.data.user_name}`
             : '';
diff --git a/frontend/src/components/header/Header.vue b/frontend/src/components/header/Header.vue
index b049b72b9..df212ee12 100644
--- a/frontend/src/components/header/Header.vue
+++ b/frontend/src/components/header/Header.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import ProfileSidebar from '@/components/common/ProfileSidebar.vue';
+import Button from 'primevue/button';
+import Icon from '@/components/common/Icon.vue';
 import { IconSize } from '@/enum/IconEnum';
 import authService from '@/services/AuthService';
 import { EnvironmentSettings } from '@/services/EnvironmentSettings';
-import { useProfileSidebarVisible } from '@/store/ProfileVisibleState';
+import { profileSidebarState } from '@/store/ProfileSidebarState';
+import { sideNavState } from '@/store/SideNavState'
 
 const environmentSettings = new EnvironmentSettings();
 const environmentLabel = environmentSettings
@@ -20,25 +23,36 @@ const props = defineProps({
         required: true,
     },
 });
+
 </script>
 
 <template>
     <header class="header" id="header">
         <nav
-            class="navbar justify-content-between flex-nowrap px-2"
+            class="navbar justify-content-start"
         >
+            <Button
+                class="btn-toggleSideNav"
+                @click="sideNavState.toggleSideNavVisible()"
+            >
+                <Icon
+                    class="custom-carbon-icon--menu"
+                    icon="menu"
+                    :size="IconSize.medium"
+                />
+            </Button>
             <span class="header-title">
                 {{ props.title }}
-                <strong>{{ props.subtitle }} {{ environmentLabel }}</strong>
+                <strong class="subtitle">{{ props.subtitle }} {{ environmentLabel }}</strong>
             </span>
-            <a
-                title="Profile"
-                v-if="authService.getters.isLoggedIn()"
-                @click="useProfileSidebarVisible.toggleVisible()"
-            >
-                <Icon icon="user--avatar" :size="IconSize.medium" />
-            </a>
 
+              <a
+                  title="Profile"
+                  v-if="authService.getters.isLoggedIn()"
+                  @click="profileSidebarState.toggleVisible()"
+              >
+                  <Icon icon="user--avatar" :size="IconSize.medium" />
+              </a>
         </nav>
         <teleport to=".modals">
             <ProfileSidebar />
@@ -48,6 +62,20 @@ const props = defineProps({
 
 <style lang="scss" scoped>
 @import '@/assets/styles/base.scss';
+
+li {
+    list-style: none;
+}
+
+.btn-toggleSideNav {
+    margin-right: 0.5rem;
+    padding: 0.88rem;
+    border: none;
+    border-radius: 0;
+}
+.subtitle {
+    display: none;
+}
 .header {
     @extend %heading-compact-01;
     position: fixed;
@@ -60,10 +88,10 @@ const props = defineProps({
     z-index: 1;
     color: $dark-text-primary;
     .header-title {
+        margin: 0 auto 0 0 ;
         a i {
             cursor: pointer;
         }
-        margin: 0;
     }
 
     i {
@@ -72,8 +100,8 @@ const props = defineProps({
 
     .navbar {
         margin: 0;
-        padding: 0;
-        height: 48px;
+        padding: 0 1rem 0 0;
+        height: 3rem;
         vertical-align: middle;
     }
 
@@ -81,4 +109,18 @@ const props = defineProps({
         flex-grow: 0;
     }
 }
+
+@media (min-width: 1024px) {
+    .navbar {
+        padding: 0 1rem 0 1rem  !important;
+    }
+
+    .subtitle {
+        display: inline;
+    }
+
+    .btn-toggleSideNav {
+        display: none;
+    }
+}
 </style>
diff --git a/frontend/src/components/managePermissions/ManagePermissions.vue b/frontend/src/components/managePermissions/ManagePermissions.vue
index a7d8913eb..dfc0cff8b 100644
--- a/frontend/src/components/managePermissions/ManagePermissions.vue
+++ b/frontend/src/components/managePermissions/ManagePermissions.vue
@@ -15,7 +15,7 @@ import {
 } from '@/store/ApplicationState';
 import LoadingState from '@/store/LoadingState';
 
-import { useNotificationMessage } from '@/store/NotificationState';
+import { notificationMessageState } from '@/store/NotificationState';
 
 import type { FamApplicationUserRoleAssignmentGet } from 'fam-api/dist/model/fam-application-user-role-assignment-get';
 
@@ -35,8 +35,8 @@ onMounted(async () => {
 });
 
 onUnmounted(() => {
-    useNotificationMessage.isNotificationVisible = false;
-    useNotificationMessage.notificationMsg = '';
+    notificationMessageState.isVisible = false;
+    notificationMessageState.notificationMsg = '';
 });
 
 async function getAppUserRoleAssignment() {
@@ -79,8 +79,8 @@ async function deleteUserRoleAssignment(
     userRoleAssignments.value = userRoleAssignments.value!.filter((a) => {
         return a.user_role_xref_id != assignment.user_role_xref_id;
     });
-    useNotificationMessage.notificationMsg = `You removed ${assignment.role.role_name} access to ${assignment.user.user_name}`;
-    useNotificationMessage.isNotificationVisible = true;
+    notificationMessageState.notificationMsg = `You removed ${assignment.role.role_name} access to ${assignment.user.user_name}`;
+    notificationMessageState.isVisible = true;
 }
 </script>
 
@@ -102,9 +102,9 @@ async function deleteUserRoleAssignment(
 
         <div class="dashboard-background-layout">
             <NotificationMessage
-                v-if="useNotificationMessage.isNotificationVisible"
+                v-if="notificationMessageState.isVisible"
                 severity="success"
-                :msgText="useNotificationMessage.notificationMsg"
+                :msgText="notificationMessageState.notificationMsg"
                 class="dashboard-notification"
             />
 
@@ -123,13 +123,14 @@ async function deleteUserRoleAssignment(
 @import '@/assets/styles/base.scss';
 
 .application-group {
-    display: grid;
+display: grid;
 
     label {
         margin-bottom: 0.5rem;
     }
 }
 .application-dropdown {
+    max-width: calc(100vw - 3rem);
     height: 3rem;
     padding: 0;
 
@@ -139,20 +140,45 @@ async function deleteUserRoleAssignment(
 }
 
 .dashboard-notification {
-    margin: 0rem 2rem;
+    margin: -0.79rem 1.5rem 0rem 1.5rem;
+
     &:deep(.p-message) {
         position: relative;
-        margin-bottom: -1rem;
     }
 }
 
 .dashboard-background-layout {
     margin-top: 2rem;
-    margin-left: -2rem;
-    margin-right: -2rem;
+    margin-left: -1rem;
+    margin-right: -1rem;
     padding: 1rem 0rem;
     background: $light-layer-one;
     z-index: -1;
-    min-height: calc(100vh - 18.745rem);
+    min-height: calc(100vh - 16.9rem);
+}
+
+@media (min-width: 495px) {
+    .application-dropdown {
+        max-width: 29rem;
+    }
+}
+
+@media (min-width: 768px) {
+    .dashboard-background-layout {
+        width: 100vw;
+        margin-left: -1.5rem;
+        min-height: calc(100vh - 17.1rem);
+    }
 }
+
+@media (min-width: 1024px) {
+    .dashboard-background-layout {
+        width: calc(100vw - 16rem);
+    }
+
+    .application-dropdown {
+        max-width: 38rem;
+    }
+}
+
 </style>
diff --git a/frontend/src/components/managePermissions/ManagePermissionsTitle.vue b/frontend/src/components/managePermissions/ManagePermissionsTitle.vue
index 97865c44b..34a13a704 100644
--- a/frontend/src/components/managePermissions/ManagePermissionsTitle.vue
+++ b/frontend/src/components/managePermissions/ManagePermissionsTitle.vue
@@ -22,4 +22,7 @@ const props = defineProps({
 
 <style lang="scss" scoped>
 @import '@/assets/styles/base.scss';
+div {
+    width: auto;
+}
 </style>
diff --git a/frontend/src/components/managePermissions/UserDataTable.vue b/frontend/src/components/managePermissions/UserDataTable.vue
index eded72153..5b633583e 100644
--- a/frontend/src/components/managePermissions/UserDataTable.vue
+++ b/frontend/src/components/managePermissions/UserDataTable.vue
@@ -232,8 +232,13 @@ function deleteAssignment(assignment: FamApplicationUserRoleAssignmentGet) {
     border: none;
 }
 
+.data-table-container {
+    margin: 0.05rem;
+    z-index: -1;
+}
+
 .custom-data-table {
-    margin: 2.5rem 2rem;
+    margin: 1.2rem 1rem;
     background: transparent;
     border-radius: 0.25rem 0.25rem 0 0;
     border: 0.125rem solid $light-border-subtle-00;
@@ -310,7 +315,7 @@ function deleteAssignment(assignment: FamApplicationUserRoleAssignmentGet) {
     align-items: center;
     height: calc(100vh - 21.745rem);
     min-height: 12.5rem;
-    margin: 0 26rem;
+    margin: 0 5rem;
 
     svg {
         width: 3rem;
@@ -330,13 +335,43 @@ function deleteAssignment(assignment: FamApplicationUserRoleAssignmentGet) {
     margin-bottom: 0 !important;
 }
 
-@media (min-device-width: 1920px) {
+//------ media queries
+
+@media (max-width: 390px){
+    .data-table-container {
+        margin: 0;
+        padding: 0;
+    }
+
+}
+
+@media (min-width: 768px) {
+    .data-table-container {
+        margin: 0.4rem;
+    }
+
     .no-app-selected {
-        margin: 0 43.3rem;
+        margin: 0 14rem;
     }
+}
+
+@media (min-width: 1280px) {
+    .no-app-selected {
+        margin: 0 25rem;
+    }
+}
+
+@media (min-width: 1536px) {
+    .no-app-selected {
+        margin: 0 33rem;
+    }
+}
 
-    .custom-data-table-bg-layer {
-        min-height: calc(100vh - 19.9rem);
+@media (min-width: 1920px) {
+    .no-app-selected {
+        margin: 0 43.3rem;
+        width: auto;
     }
 }
+
 </style>
diff --git a/frontend/src/layouts/ProtectedLayout.vue b/frontend/src/layouts/ProtectedLayout.vue
index 72452ab78..547469c5e 100644
--- a/frontend/src/layouts/ProtectedLayout.vue
+++ b/frontend/src/layouts/ProtectedLayout.vue
@@ -7,15 +7,16 @@ import SideNav, {
 } from '@/components/common/SideNav.vue';
 import sideNavData from '@/static/sideNav.json';
 import { isApplicationSelected } from '@/store/ApplicationState';
+import { sideNavState } from '@/store/SideNavState'
 
 const navigationData = ref<[ISideNavData]>(sideNavData as any);
 
 onMounted(() => {
-    disableSideNavOption('Grant Access', !isApplicationSelected.value);
+    disableSideNavOption('Add User Permission', !isApplicationSelected.value);
 });
 
 watch(isApplicationSelected, (value) => {
-    disableSideNavOption('Grant Access', !value);
+    disableSideNavOption('Add User Permission', !value);
 });
 
 const disableSideNavOption = (optionName: string, disabled: boolean) => {
@@ -27,6 +28,7 @@ const disableSideNavOption = (optionName: string, disabled: boolean) => {
         });
     });
 };
+
 </script>
 <template>
     <Header title="FAM" subtitle="Forests Access Management" />
diff --git a/frontend/src/static/sideNav.json b/frontend/src/static/sideNav.json
index b5c2e3887..d177687dd 100644
--- a/frontend/src/static/sideNav.json
+++ b/frontend/src/static/sideNav.json
@@ -9,7 +9,7 @@
                 "disabled": false
             },
             {
-                "name": "Grant Access",
+                "name": "Add User Permission",
                 "icon": "virtual-column--key",
                 "link": "/grant",
                 "disabled": true
diff --git a/frontend/src/store/NotificationState.ts b/frontend/src/store/NotificationState.ts
index ac23159bc..5af95ad31 100644
--- a/frontend/src/store/NotificationState.ts
+++ b/frontend/src/store/NotificationState.ts
@@ -1,6 +1,6 @@
 import { reactive } from "vue"
 
-export const useNotificationMessage = reactive({
+export const notificationMessageState = reactive({
     notificationMsg: '',
-    isNotificationVisible: false,
+    isVisible: false,
 })
\ No newline at end of file
diff --git a/frontend/src/store/ProfileSidebarState.ts b/frontend/src/store/ProfileSidebarState.ts
new file mode 100644
index 000000000..2ae5768ea
--- /dev/null
+++ b/frontend/src/store/ProfileSidebarState.ts
@@ -0,0 +1,10 @@
+import { reactive } from 'vue'
+import { sideNavState } from '@/store/SideNavState'
+
+export const profileSidebarState = reactive({
+    isVisible: false,
+    toggleVisible() {
+        this.isVisible = !this.isVisible
+        sideNavState.isVisible = sideNavState.isDesktop()
+    }
+})
\ No newline at end of file
diff --git a/frontend/src/store/ProfileVisibleState.ts b/frontend/src/store/ProfileVisibleState.ts
deleted file mode 100644
index a7d793ec6..000000000
--- a/frontend/src/store/ProfileVisibleState.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { reactive } from 'vue'
-
-export const useProfileSidebarVisible = reactive({
-    isProfileVisible: false,
-    toggleVisible() {
-        this.isProfileVisible = !this.isProfileVisible
-    }
-})
\ No newline at end of file
diff --git a/frontend/src/store/SideNavState.ts b/frontend/src/store/SideNavState.ts
new file mode 100644
index 000000000..8ed9270fa
--- /dev/null
+++ b/frontend/src/store/SideNavState.ts
@@ -0,0 +1,20 @@
+import { shallowReactive } from 'vue'
+import { profileSidebarState } from '@/store/ProfileSidebarState';
+
+let screenSize = window.innerWidth
+
+window.addEventListener("resize", (event) => {
+    screenSize = window.innerWidth
+    sideNavState.isVisible = sideNavState.isDesktop()
+});
+
+export const sideNavState = shallowReactive({
+    isVisible: screenSize >= 1024,
+    toggleSideNavVisible() {
+        this.isVisible = !this.isVisible
+        profileSidebarState.isVisible = false
+    },
+    isDesktop() {
+        return screenSize >= 1024
+    }
+})
\ No newline at end of file
diff --git a/frontend/src/tests/ProtectedLayout.spec.ts b/frontend/src/tests/ProtectedLayout.spec.ts
index 2cc26bc41..f525431a2 100644
--- a/frontend/src/tests/ProtectedLayout.spec.ts
+++ b/frontend/src/tests/ProtectedLayout.spec.ts
@@ -11,9 +11,9 @@ describe('disableSideNavOption', () => {
         wrapper = shallowMount(ProtectedLayout);
         await flushPromises();
     });
-    it('should change value for navigation option Grant Access', async () => {
-        (wrapper.vm as any).disableSideNavOption('Grant Access', false);
-        let value = sideNavData.map(item => item.items.find(child => child.name === 'Grant Access')?.disabled)[0];
+    it('should change value for navigation option Add User Permission', async () => {
+        (wrapper.vm as any).disableSideNavOption('Add User Permission', false);
+        let value = sideNavData.map(item => item.items.find(child => child.name === 'Add User Permission')?.disabled)[0];
         expect(value).toBe(false)
     });
 });
\ No newline at end of file