diff --git a/apps/canvas/src/App.tsx b/apps/canvas/src/App.tsx
new file mode 100644
index 0000000..62652f6
--- /dev/null
+++ b/apps/canvas/src/App.tsx
@@ -0,0 +1,40 @@
+import { ReactFlowProvider } from '@xyflow/react';
+import './App.css';
+import { CanvasBuilder } from './Canvas';
+import { Tabs, TabsTrigger, TabsContent, TabsList } from './components/ui/tabs';
+import { Config } from './Config';
+import { useStateStore } from './lib/state';
+import { useEffect } from 'react';
+import { Toaster } from './components/ui/toaster';
+import { Header } from './Header';
+
+export default function App() {
+  return (
+    <ReactFlowProvider>
+      <Header />
+      <AppImpl />
+      <Toaster />
+    </ReactFlowProvider>
+  )
+}
+
+function AppImpl() {
+  const store = useStateStore();
+  useEffect(() => {
+    setTimeout(async () => await store.refreshEnv(), 1);
+  }, [store])
+  return (
+      <Tabs defaultValue="canvas">
+        <TabsList>
+          <TabsTrigger value="canvas">Canvas</TabsTrigger>
+          <TabsTrigger value="config">Config</TabsTrigger>
+        </TabsList>
+        <TabsContent value="canvas">
+          <CanvasBuilder />
+        </TabsContent>
+        <TabsContent value="config">
+          <Config />
+        </TabsContent>
+      </Tabs>
+  );
+}