diff --git a/src/components/Layout/DashboardLayout/NavigationBar.tsx b/src/components/Layout/DashboardLayout/NavigationBar.tsx
index feacf219..e6253545 100644
--- a/src/components/Layout/DashboardLayout/NavigationBar.tsx
+++ b/src/components/Layout/DashboardLayout/NavigationBar.tsx
@@ -20,11 +20,11 @@ import { UserRole } from "need4deed-sdk";
 const BarContainer = styled.div`
   display: flex;
   flex-direction: column;
-  position: fixed;
+  position: sticky;
   width: var(--dashboard-navigation-bar-container-width);
   top: 112px;
   left: 0;
-  z-index: 1;
+  z-index: 0;
   gap: var(--dashboard-navigation-bar-gap);
   background-color: var(--color-orchid-subtle);
   border-top-right-radius: var(--dashboard-navigation-bar-border-radius);
@@ -35,7 +35,8 @@ const BarContainer = styled.div`
     flex-direction: row;
     justify-content: space-around;
     align-items: flex-start;
-    top: auto;
+    position: fixed;
+    top: unset;
     bottom: 0;
     width: 100%;
     height: var(--dashboard-navigation-bar-mobile-height);
diff --git a/src/components/styled/container.tsx b/src/components/styled/container.tsx
index 90fe4426..13bf27b3 100644
--- a/src/components/styled/container.tsx
+++ b/src/components/styled/container.tsx
@@ -63,7 +63,6 @@ export const DashboardBaseContainer = styled.div`
   max-width: var(--dashboard-base-container-width);
   padding-top: var(--dashboard-base-container-padding-top);
   padding-bottom: var(--dashboard-base-container-padding-bottom);
-
   @media (max-width: 767px) {
     margin-left: 16px;
     margin-right: 16px;