diff --git a/package.json b/package.json
index 712288570f..bfe30f73ae 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,9 @@
     "export": "pnpm --filter @pathfinder/app export",
     "start": "pnpm --filter @pathfinder/app start",
     "lint": "pnpm --filter @pathfinder/app lint",
+    "test": "playwright test",
     "test:e2e": "playwright test",
+    "test:e2e:codegen":"npx playwright codegen http://localhost:8080",
     "test:unit": "jest"
   },
   "devDependencies": {
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/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/CreateWorkspaceItem/workspace-create/workspace-create.tsx b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/CreateWorkspaceItem/workspace-create/workspace-create.tsx
index 33d07e38c2..cdd86df00b 100644
--- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/CreateWorkspaceItem/workspace-create/workspace-create.tsx
+++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/CreateWorkspaceItem/workspace-create/workspace-create.tsx
@@ -25,6 +25,39 @@ export const WorkspaceCreate = ({ open, onClose }: WorkspaceCreateProps) => {
   const handlerInputChange = (workspaceName: string) => {
     setWorkspaceId(workspaceName);
   };
+  const createDefaultHeadImg = (workspaceName: string) => {
+    const canvas = document.createElement('canvas');
+    canvas.height = 100;
+    canvas.width = 100;
+    const ctx = canvas.getContext('2d');
+    if (ctx) {
+      // TODO: add a image list
+      ctx.fillStyle = '#FFDE03';
+      ctx.fillRect(0, 0, 100, 100);
+      ctx.font = "600 50px 'PingFang SC', 'Microsoft Yahei'";
+      ctx.fillStyle = '#FFF';
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(workspaceName[0], 50, 50);
+      const blob = canvas.toBlob(blob => {}, 'image/png');
+    }
+  };
+  const handleCreateWorkspace = () => {
+    setCanCreate(true);
+    createDefaultHeadImg(workspaceName);
+    createWorkspace({ name: workspaceName, avatar: '' })
+      .then(data => {
+        // @ts-ignore
+        router.push(`/workspace/${data.created_at}`);
+        onClose();
+      })
+      .catch(err => {
+        console.log(err, 'err');
+      })
+      .finally(() => {
+        setCanCreate(false);
+      });
+  };
   return (
     <Modal open={open} onClose={onClose}>
       <StyledModalWrapper>
@@ -44,21 +77,7 @@ export const WorkspaceCreate = ({ open, onClose }: WorkspaceCreateProps) => {
         <StyledButtonContent>
           <StyledButton
             disabled={!workspaceName.length || canCreate}
-            onClick={() => {
-              setCanCreate(true);
-              createWorkspace({ name: workspaceName, avatar: '' })
-                .then(data => {
-                  // @ts-ignore
-                  router.push(`/workspace/${data.created_at}`);
-                  onClose();
-                })
-                .catch(err => {
-                  console.log(err, 'err');
-                })
-                .finally(() => {
-                  setCanCreate(false);
-                });
-            }}
+            onClick={handleCreateWorkspace}
           >
             Create
           </StyledButton>
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>
     </>
diff --git a/packages/app/src/providers/app-state-provider/provider.tsx b/packages/app/src/providers/app-state-provider/provider.tsx
index 2065fc3ea5..7fbc03a1af 100644
--- a/packages/app/src/providers/app-state-provider/provider.tsx
+++ b/packages/app/src/providers/app-state-provider/provider.tsx
@@ -119,7 +119,7 @@ export const AppStateProvider = ({ children }: { children?: ReactNode }) => {
     const callback = async (user: AccessTokenMessage | null) => {
       const workspacesMeta = user ? await getWorkspaces() : [];
       const workspaces = await Promise.all(
-        workspacesMeta.map(async ({ id }) => {
+        workspacesMeta?.map(async ({ id }) => {
           const workspace = (await loadWorkspaceHandler?.(id)) || null;
           return workspace;
         })
diff --git a/playwright.config.ts b/playwright.config.ts
index db2bfa5155..853afe8b80 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -50,21 +50,9 @@ const config: PlaywrightTestConfig = {
     {
       name: 'chromium',
       use: {
-        ...devices['Desktop Chrome'],
-      },
-    },
-
-    {
-      name: 'firefox',
-      use: {
-        ...devices['Desktop Firefox'],
-      },
-    },
-
-    {
-      name: 'webkit',
-      use: {
-        ...devices['Desktop Safari'],
+        browserName: 'chromium',
+        viewport: { width: 1920, height: 1080 },
+        actionTimeout: 5 * 1000,
       },
     },
 
diff --git a/tests/exception-page.spec.ts b/tests/exception-page.spec.ts
new file mode 100644
index 0000000000..3512934e9c
--- /dev/null
+++ b/tests/exception-page.spec.ts
@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test';
+import { loadPage } from './libs/load-page';
+
+loadPage();
+
+// ps aux | grep 8080
+test.describe('exception page', () => {
+  test('bisit 404 page', async ({ page }) => {
+    await page.goto('http://localhost:8080/404');
+    await page.waitForTimeout(300);
+    const notFoundTipDom = await page.getByText('404 - Page Not Found');
+
+    await expect(await notFoundTipDom.isVisible()).toBe(true);
+  });
+});