diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..d60dc9e
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,8 @@
+{
+  "files.exclude": {
+    "**/.next": true
+  },
+  "files.associations": {
+
+  }
+}
diff --git a/app/components/page.tsx b/app/components/page.tsx
index cb8febd..c224199 100644
--- a/app/components/page.tsx
+++ b/app/components/page.tsx
@@ -1,8 +1,26 @@
 import styles from './style.module.css'
-
+import PowerBy from '@/components/power-by'
 const Home = () => {
-  return <main className="flex min-h-screen p-24">
-    <h1 className={styles.red}>Home</h1>
+  return <main className={styles.container}>
+    <h1>Components</h1>
+    <div>
+      <h2>Power By</h2>
+      <PowerBy />
+    </div>
+
+    <div>
+      <h2>Button</h2>
+    </div>
+
+    <div>
+      <h2>Input</h2>
+    </div>
+
+    <div>
+      <h2>Chat Bubble</h2>
+    </div>
+
+    <div>Select</div>
   </main>
 }
 
diff --git a/app/components/style.module.css b/app/components/style.module.css
index 7542451..ccd54dc 100644
--- a/app/components/style.module.css
+++ b/app/components/style.module.css
@@ -1,3 +1,3 @@
-.red {
-    color: red;
+.container {
+    @apply flex min-h-screen p-24 flex-col gap-4;
 }
diff --git a/components/power-by/index.tsx b/components/power-by/index.tsx
index e69de29..f70023b 100644
--- a/components/power-by/index.tsx
+++ b/components/power-by/index.tsx
@@ -0,0 +1,16 @@
+import Image from 'next/image'
+
+const PowerBy = () => {
+  return <a className='flex items-center pr-3 space-x-3' href="https://dify.ai/" target="_blank">
+    <span className='uppercase text-xs text-gray-400'>power by</span>
+    <Image
+      src="/logo.png"
+      alt="Dify.AI Logo"
+      width={48}
+      height={20}
+      priority
+    />
+  </a>
+}
+
+export default PowerBy
diff --git a/public/logo.png b/public/logo.png
new file mode 100644
index 0000000..800a070
Binary files /dev/null and b/public/logo.png differ