diff --git a/frontend/app/App.module.scss b/frontend/app/App.module.scss
new file mode 100644
index 000000000..97a5433d2
--- /dev/null
+++ b/frontend/app/App.module.scss
@@ -0,0 +1,31 @@
+@use "styles/ScreenSizes.module.scss";
+@use "styles/ZIndexes.module.scss";
+
+.app_container {
+  display: flex;
+  overflow: auto;
+  position: relative;
+  align-items: stretch;
+  width: 100%;
+  height: 100%;
+
+  @media (max-width: ScreenSizes.$small) {
+    .menu_container {
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: ZIndexes.$overlay;
+    }
+  }
+
+  .content_container {
+    overflow: scroll;
+    flex: 1 1 0%;
+
+    @media (max-width: ScreenSizes.$small) {
+      &.blured {
+        opacity: 0.2;
+      }
+    }
+  }
+}
diff --git a/frontend/app/App.tsx b/frontend/app/App.tsx
index fe931a543..e3f3b461b 100644
--- a/frontend/app/App.tsx
+++ b/frontend/app/App.tsx
@@ -17,6 +17,7 @@ import {
 import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
 import { ChatsProvider } from "@/lib/context/ChatsProvider";
 import { MenuProvider } from "@/lib/context/MenuProvider/Menu-provider";
+import { useMenuContext } from "@/lib/context/MenuProvider/hooks/useMenuContext";
 import { NotificationsProvider } from "@/lib/context/NotificationsProvider/notifications-provider";
 import { OnboardingProvider } from "@/lib/context/OnboardingProvider/Onboarding-provider";
 import { SearchModalProvider } from "@/lib/context/SearchModalProvider/search-modal-provider";
@@ -27,6 +28,7 @@ import { UpdateMetadata } from "@/lib/helpers/updateMetadata";
 import { usePageTracking } from "@/services/analytics/june/usePageTracking";
 
 import "../lib/config/LocaleConfig/i18n";
+import styles from "./App.module.scss";
 import { FromConnectionsProvider } from "./chat/[chatId]/components/ActionsBar/components/KnowledgeToFeed/components/FromConnections/FromConnectionsProvider/FromConnection-provider";
 
 if (
@@ -45,6 +47,7 @@ const App = ({ children }: PropsWithChildren): JSX.Element => {
   const { fetchAllBrains } = useBrainContext();
   const { onClickOutside } = useOutsideClickListener();
   const { session } = useSupabase();
+  const { isOpened } = useMenuContext();
 
   usePageTracking();
 
@@ -64,11 +67,15 @@ const App = ({ children }: PropsWithChildren): JSX.Element => {
           <div className="flex flex-1 flex-col overflow-auto">
             <SearchModalProvider>
               <SearchModal />
-              <div className="relative h-full w-full flex justify-stretch items-stretch overflow-auto">
-                <Menu />
+              <div className={styles.app_container}>
+                <div className={styles.menu_container}>
+                  <Menu />
+                </div>
                 <div
                   onClick={onClickOutside}
-                  className="flex-1 overflow-scroll"
+                  className={`${styles.content_container} ${
+                    isOpened ? styles.blured : ""
+                  }`}
                 >
                   {children}
                 </div>
diff --git a/frontend/lib/components/Menu/Menu.module.scss b/frontend/lib/components/Menu/Menu.module.scss
index d460b5ecf..492a829e2 100644
--- a/frontend/lib/components/Menu/Menu.module.scss
+++ b/frontend/lib/components/Menu/Menu.module.scss
@@ -8,7 +8,7 @@
   background-color: var(--background-1);
   border-right: 1px solid var(--border-1);
   width: Variables.$menuWidth;
-  transition: width 0.2s ease-in-out;
+  transition: width 0.1s ease-in-out;
 
   &.hidden {
     width: 0;