diff --git a/packages/app/src/components/workspace-layout/index.tsx b/packages/app/src/components/workspace-layout/index.tsx
index 2eb06a3400..cd111dd958 100644
--- a/packages/app/src/components/workspace-layout/index.tsx
+++ b/packages/app/src/components/workspace-layout/index.tsx
@@ -2,32 +2,18 @@ import HelpIsland from '@/components/help-island';
 import { WorkSpaceSliderBar } from '@/components/workspace-slider-bar';
 import { useRouter } from 'next/router';
 import { StyledPage, StyledWrapper } from './styles';
-import { AppStateProvider } from '@/providers/app-state-provider/provider';
-import ConfirmProvider from '@/providers/confirm-provider';
-import { ModalProvider } from '@/providers/global-modal-provider';
-import ProviderComposer from '@/components/provider-composer';
 import { PropsWithChildren } from 'react';
 
 export const WorkspaceLayout = ({ children }: PropsWithChildren) => {
   const router = useRouter();
   return (
-    <ProviderComposer
-      contexts={[
-        <AppStateProvider key="appStateProvider" />,
-        <ModalProvider key="ModalProvider" />,
-        <ConfirmProvider key="ConfirmProvider" />,
-      ]}
-    >
-      <StyledPage>
-        <WorkSpaceSliderBar />
-        <StyledWrapper>
-          {children}
-          <HelpIsland
-            showList={router.query.pageId ? undefined : ['contact']}
-          />
-        </StyledWrapper>
-      </StyledPage>
-    </ProviderComposer>
+    <StyledPage>
+      <WorkSpaceSliderBar />
+      <StyledWrapper>
+        {children}
+        <HelpIsland showList={router.query.pageId ? undefined : ['contact']} />
+      </StyledWrapper>
+    </StyledPage>
   );
 };
 
diff --git a/packages/app/src/pages/_app.tsx b/packages/app/src/pages/_app.tsx
index e9031d3c79..858c5eae73 100644
--- a/packages/app/src/pages/_app.tsx
+++ b/packages/app/src/pages/_app.tsx
@@ -10,6 +10,9 @@ import '../utils/print-build-info';
 import ProviderComposer from '@/components/provider-composer';
 import type { ReactElement, ReactNode } from 'react';
 import type { NextPage } from 'next';
+import { AppStateProvider } from '@/providers/app-state-provider/provider';
+import ConfirmProvider from '@/providers/confirm-provider';
+import { ModalProvider } from '@/providers/global-modal-provider';
 
 const ThemeProvider = dynamic(() => import('@/providers/themeProvider'), {
   ssr: false,
@@ -29,7 +32,14 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   return (
     <>
       <Logger />
-      <ProviderComposer contexts={[<ThemeProvider key="ThemeProvider" />]}>
+      <ProviderComposer
+        contexts={[
+          <ThemeProvider key="ThemeProvider" />,
+          <AppStateProvider key="appStateProvider" />,
+          <ModalProvider key="ModalProvider" />,
+          <ConfirmProvider key="ConfirmProvider" />,
+        ]}
+      >
         {getLayout(<Component {...pageProps} />)}
       </ProviderComposer>
     </>