diff --git a/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx b/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx
index daba511c688d..d4e5c2e79f78 100644
--- a/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx
+++ b/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx
@@ -4,7 +4,10 @@ import { useOverlayScrollbars } from 'overlayscrollbars-react';
 import { useEffect, useRef } from 'react';
 import { useSetRecoilState } from 'recoil';
 
-import { getContextByProviderName } from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts';
+import {
+  ContextProviderName,
+  getContextByProviderName,
+} from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts';
 import { useScrollStates } from '@/ui/utilities/scroll/hooks/internal/useScrollStates';
 import { overlayScrollbarsState } from '@/ui/utilities/scroll/states/overlayScrollbarsState';
 
@@ -25,7 +28,7 @@ export type ScrollWrapperProps = {
   className?: string;
   hideY?: boolean;
   hideX?: boolean;
-  contextProviderName: string;
+  contextProviderName: ContextProviderName;
 };
 
 export const ScrollWrapper = ({
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 e12bdc8aed3c..1141b336346e 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
@@ -1,19 +1,29 @@
 import { createContext, RefObject } from 'react';
 
-// Define the new interface for the context value
-interface ScrollWrapperContextValue {
+type ScrollWrapperContextValue = {
   ref: RefObject<HTMLDivElement>;
   id: string;
-}
+};
+
+export type ContextProviderName =
+  | 'eventList'
+  | 'commandMenu'
+  | 'recordBoard'
+  | 'recordTableWithWrappers'
+  | 'settingsPageContainer'
+  | 'dropdownMenuItemsContainer'
+  | 'showPageContainer'
+  | 'showPageLeftContainer'
+  | 'tabList'
+  | 'releases'
+  | 'test';
 
-// Helper function to create a context with a unique ID
 const createScrollWrapperContext = (id: string) =>
   createContext<ScrollWrapperContextValue>({
     ref: { current: null },
     id,
   });
 
-// Define all context providers
 export const EventListScrollWrapperContext =
   createScrollWrapperContext('eventList');
 export const CommandMenuScrollWrapperContext =
@@ -34,9 +44,11 @@ export const TabListScrollWrapperContext =
   createScrollWrapperContext('tabList');
 export const ReleasesScrollWrapperContext =
   createScrollWrapperContext('releases');
+export const TestScrollWrapperContext = createScrollWrapperContext('test');
 
-// Function to get the context based on provider name
-export const getContextByProviderName = (contextProviderName: string) => {
+export const getContextByProviderName = (
+  contextProviderName: ContextProviderName,
+) => {
   switch (contextProviderName) {
     case 'eventList':
       return EventListScrollWrapperContext;
@@ -58,7 +70,9 @@ export const getContextByProviderName = (contextProviderName: string) => {
       return TabListScrollWrapperContext;
     case 'releases':
       return ReleasesScrollWrapperContext;
+    case 'test':
+      return TestScrollWrapperContext;
     default:
-      return createScrollWrapperContext('awdawdawd');
+      throw new Error('Context Provider not available');
   }
 };
diff --git a/packages/twenty-front/src/modules/ui/utilities/scroll/hooks/__tests__/useScrollWrapperScopedRef.test.tsx b/packages/twenty-front/src/modules/ui/utilities/scroll/hooks/__tests__/useScrollWrapperScopedRef.test.tsx
index f525b47e8308..7048479e036f 100644
--- a/packages/twenty-front/src/modules/ui/utilities/scroll/hooks/__tests__/useScrollWrapperScopedRef.test.tsx
+++ b/packages/twenty-front/src/modules/ui/utilities/scroll/hooks/__tests__/useScrollWrapperScopedRef.test.tsx
@@ -12,7 +12,7 @@ jest.mock('react', () => {
 
 describe('useScrollWrapperScopedRef', () => {
   it('should return the scrollWrapperRef if available', () => {
-    const { result } = renderHook(() => useScrollWrapperScopedRef());
+    const { result } = renderHook(() => useScrollWrapperScopedRef('test'));
 
     expect(result.current).toBeDefined();
   });
diff --git a/packages/twenty-front/src/modules/ui/utilities/scroll/hooks/internal/useScrollStates.ts b/packages/twenty-front/src/modules/ui/utilities/scroll/hooks/internal/useScrollStates.ts
index 6efa7d90f7fa..769a17d493d5 100644
--- a/packages/twenty-front/src/modules/ui/utilities/scroll/hooks/internal/useScrollStates.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/scroll/hooks/internal/useScrollStates.ts
@@ -1,4 +1,7 @@
-import { getContextByProviderName } from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts';
+import {
+  ContextProviderName,
+  getContextByProviderName,
+} from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts';
 import { scrollLeftComponentState } from '@/ui/utilities/scroll/states/scrollLeftComponentState';
 import { scrollTopComponentState } from '@/ui/utilities/scroll/states/scrollTopComponentState';
 
@@ -6,7 +9,7 @@ import { extractComponentState } from '@/ui/utilities/state/component-state/util
 
 import { useContext } from 'react';
 
-export const useScrollStates = (contextProviderName: string) => {
+export const useScrollStates = (contextProviderName: ContextProviderName) => {
   const Context = getContextByProviderName(contextProviderName);
   const context = useContext(Context);
 
diff --git a/packages/twenty-front/src/modules/ui/utilities/scroll/hooks/useScrollLeftValue.ts b/packages/twenty-front/src/modules/ui/utilities/scroll/hooks/useScrollLeftValue.ts
index 876e74791f3a..e8ea24cfb323 100644
--- a/packages/twenty-front/src/modules/ui/utilities/scroll/hooks/useScrollLeftValue.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/scroll/hooks/useScrollLeftValue.ts
@@ -1,7 +1,10 @@
+import { ContextProviderName } from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts';
 import { useScrollStates } from '@/ui/utilities/scroll/hooks/internal/useScrollStates';
 import { useRecoilValue } from 'recoil';
 
-export const useScrollLeftValue = (contextProviderName: string) => {
+export const useScrollLeftValue = (
+  contextProviderName: ContextProviderName,
+) => {
   const { scrollLeftComponentState } = useScrollStates(contextProviderName);
   return useRecoilValue(scrollLeftComponentState);
 };
diff --git a/packages/twenty-front/src/modules/ui/utilities/scroll/hooks/useScrollTopValue.ts b/packages/twenty-front/src/modules/ui/utilities/scroll/hooks/useScrollTopValue.ts
index ded6e279d6b4..926d72b00ae7 100644
--- a/packages/twenty-front/src/modules/ui/utilities/scroll/hooks/useScrollTopValue.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/scroll/hooks/useScrollTopValue.ts
@@ -1,7 +1,8 @@
+import { ContextProviderName } from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts';
 import { useScrollStates } from '@/ui/utilities/scroll/hooks/internal/useScrollStates';
 import { useRecoilValue } from 'recoil';
 
-export const useScrollTopValue = (contextProviderName: string) => {
+export const useScrollTopValue = (contextProviderName: ContextProviderName) => {
   const { scrollTopComponentState } = useScrollStates(contextProviderName);
   return useRecoilValue(scrollTopComponentState);
 };
diff --git a/packages/twenty-front/src/modules/ui/utilities/scroll/hooks/useScrollWrapperScopedRef.ts b/packages/twenty-front/src/modules/ui/utilities/scroll/hooks/useScrollWrapperScopedRef.ts
index 7b862d31d743..bc1012c82403 100644
--- a/packages/twenty-front/src/modules/ui/utilities/scroll/hooks/useScrollWrapperScopedRef.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/scroll/hooks/useScrollWrapperScopedRef.ts
@@ -2,9 +2,14 @@ import { useContext } from 'react';
 
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 
-import { getContextByProviderName } from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts';
+import {
+  ContextProviderName,
+  getContextByProviderName,
+} from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts';
 
-export const useScrollWrapperScopedRef = (contextProviderName: string) => {
+export const useScrollWrapperScopedRef = (
+  contextProviderName: ContextProviderName,
+) => {
   const Context = getContextByProviderName(contextProviderName);
   const scrollWrapperRef = useContext(Context);