diff --git a/packages/twenty-front/src/modules/auth/components/AuthModal.tsx b/packages/twenty-front/src/modules/auth/components/AuthModal.tsx
index 0bef31d15..52354a520 100644
--- a/packages/twenty-front/src/modules/auth/components/AuthModal.tsx
+++ b/packages/twenty-front/src/modules/auth/components/AuthModal.tsx
@@ -1,4 +1,5 @@
 import { Modal } from '@/ui/layout/modal/components/Modal';
+import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import styled from '@emotion/styled';
 import React from 'react';
 
@@ -11,6 +12,11 @@ type AuthModalProps = { children: React.ReactNode };
 
 export const AuthModal = ({ children }: AuthModalProps) => (
   <Modal padding={'none'} modalVariant="primary">
-    <StyledContent>{children}</StyledContent>
+    <ScrollWrapper
+      contextProviderName="modalContent"
+      componentInstanceId="scroll-wrapper-modal-content"
+    >
+      <StyledContent>{children}</StyledContent>
+    </ScrollWrapper>
   </Modal>
 );
diff --git a/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx b/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx
index 1941c1d75..c08f7f06e 100644
--- a/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx
@@ -29,7 +29,8 @@ const StyledModalDiv = styled(motion.div)<{
     if (isMobile) return `0`;
     return theme.border.radius.md;
   }};
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: auto;
   z-index: 10000; // should be higher than Backdrop's z-index
 
   width: ${({ isMobile, size, theme }) => {
@@ -79,7 +80,6 @@ const StyledContent = styled.div`
   flex: 1;
   flex: 1 1 0%;
   flex-direction: column;
-  overflow-y: auto;
   padding: ${({ theme }) => theme.spacing(10)};
 `;
 
diff --git a/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx b/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx
index f739decb3..18bd1928c 100644
--- a/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx
@@ -126,24 +126,24 @@ export const DefaultLayout = () => {
           ) : (
             <StyledAppNavigationDrawer />
           )}
-          <StyledMainContainer>
-            {showAuthModal ? (
-              <>
-                <SignInBackgroundMockPage />
-                <AnimatePresence mode="wait">
-                  <LayoutGroup>
-                    <AuthModal>
-                      <Outlet />
-                    </AuthModal>
-                  </LayoutGroup>
-                </AnimatePresence>
-              </>
-            ) : (
+          {showAuthModal ? (
+            <>
+              <SignInBackgroundMockPage />
+              <AnimatePresence mode="wait">
+                <LayoutGroup>
+                  <AuthModal>
+                    <Outlet />
+                  </AuthModal>
+                </LayoutGroup>
+              </AnimatePresence>
+            </>
+          ) : (
+            <StyledMainContainer>
               <AppErrorBoundary>
                 <Outlet />
               </AppErrorBoundary>
-            )}
-          </StyledMainContainer>
+            </StyledMainContainer>
+          )}
         </StyledPageContainer>
         {isMobile && <MobileNavigationBar />}
       </StyledLayout>
diff --git a/packages/twenty-front/src/modules/ui/utilities/scroll/contexts/ScrollWrapperContexts.tsx b/packages/twenty-front/src/modules/ui/utilities/scroll/contexts/ScrollWrapperContexts.tsx
index 1d83d1ddd..cf8da6258 100644
--- a/packages/twenty-front/src/modules/ui/utilities/scroll/contexts/ScrollWrapperContexts.tsx
+++ b/packages/twenty-front/src/modules/ui/utilities/scroll/contexts/ScrollWrapperContexts.tsx
@@ -18,7 +18,8 @@ export type ContextProviderName =
   | 'releases'
   | 'test'
   | 'showPageActivityContainer'
-  | 'navigationDrawer';
+  | 'navigationDrawer'
+  | 'modalContent';
 
 const createScrollWrapperContext = (id: string) =>
   createContext<ScrollWrapperContextValue>({
@@ -51,6 +52,8 @@ export const ShowPageActivityContainerScrollWrapperContext =
 export const NavigationDrawerScrollWrapperContext =
   createScrollWrapperContext('navigationDrawer');
 export const TestScrollWrapperContext = createScrollWrapperContext('test');
+export const ModalContentScrollWrapperContext =
+  createScrollWrapperContext('modalContent');
 
 export const getContextByProviderName = (
   contextProviderName: ContextProviderName,
@@ -82,6 +85,8 @@ export const getContextByProviderName = (
       return ShowPageActivityContainerScrollWrapperContext;
     case 'navigationDrawer':
       return NavigationDrawerScrollWrapperContext;
+    case 'modalContent':
+      return ModalContentScrollWrapperContext;
     default:
       throw new Error('Context Provider not available');
   }