diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..d32b8df
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,2 @@
+# you can find this in https://cloud.dify.ai/ 
+API_SECRET=YOUR_API_SECRET
diff --git a/.gitignore b/.gitignore
index 8f322f0..93c57fb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -33,3 +33,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+.env
diff --git a/app/chat/@content/page.tsx b/app/chat/@content/page.tsx
new file mode 100644
index 0000000..3028e8e
--- /dev/null
+++ b/app/chat/@content/page.tsx
@@ -0,0 +1,6 @@
+const Content = async () => {
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+  return <div className=''>Content</div>
+}
+
+export default Content
diff --git a/app/chat/style.module.css b/app/chat/@content/style.module.scss
similarity index 100%
rename from app/chat/style.module.css
rename to app/chat/@content/style.module.scss
diff --git a/app/chat/@sidebar/page.tsx b/app/chat/@sidebar/page.tsx
new file mode 100644
index 0000000..23b0702
--- /dev/null
+++ b/app/chat/@sidebar/page.tsx
@@ -0,0 +1,6 @@
+const Sidebar = async () => {
+  await new Promise((resolve) => setTimeout(resolve, 2000))
+  return <div>Sidebar</div>
+}
+
+export default Sidebar
diff --git a/app/chat/@sidebar/style.module.scss b/app/chat/@sidebar/style.module.scss
new file mode 100644
index 0000000..e69de29
diff --git a/app/chat/layout.tsx b/app/chat/layout.tsx
new file mode 100644
index 0000000..eff0b59
--- /dev/null
+++ b/app/chat/layout.tsx
@@ -0,0 +1,18 @@
+import styles from './style.module.scss'
+import { Suspense } from 'react'
+import Loading from '../loading'
+export default function Layout(props: {
+  sidebar: React.ReactNode
+  content: React.ReactNode
+}) {
+  return (
+    <main className={styles.main}>
+      <div className={styles.sidebar_wrapper}>
+        <Suspense fallback={<Loading />}>{props.sidebar}</Suspense>
+      </div>
+      <div className={styles.content_wrapper}>
+        <Suspense fallback={<Loading />}>{props.content}</Suspense>
+      </div>
+    </main>
+  )
+}
diff --git a/app/chat/page.tsx b/app/chat/page.tsx
deleted file mode 100644
index 0e0f617..0000000
--- a/app/chat/page.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-const Home = async () => {
-  await new Promise((resolve) => setTimeout(resolve, 1000))
-  return <main className='flex min-h-screen flex-col items-center justify-between p-24'>Chat</main>
-}
-
-export default Home
diff --git a/app/chat/style.module.scss b/app/chat/style.module.scss
new file mode 100644
index 0000000..be1e17f
--- /dev/null
+++ b/app/chat/style.module.scss
@@ -0,0 +1,9 @@
+.main {
+  @apply flex;
+  .sidebar_wrapper {
+    @apply flex w-40 md:w-32 lg:w-40 shrink-0;
+  }
+  .content_wrapper {
+    @apply flex w-full;
+  }
+}