diff --git a/package.json b/package.json
index bd785db..a086b0e 100644
--- a/package.json
+++ b/package.json
@@ -11,19 +11,20 @@
     "vue"
   ],
   "scripts": {
-    "bootstrap": "pnpm install && pnpm run common:prepare",
     "dev": "vite",
     "build": "run-p type-check build-only",
     "preview": "vite preview",
     "build-only": "vite build",
     "type-check": "vue-tsc --noEmit",
     "lint:fix": "eslint . --fix",
+    "bootstrap": "pnpm install && pnpm run common:prepare",
     "common:cleanup": "rimraf node_modules && rimraf pnpm-lock.yaml",
     "common:prepare": "husky install"
   },
   "dependencies": {
     "naive-ui": "^2.34.3",
-    "vue": "^3.2.47"
+    "vue": "^3.2.47",
+    "vue-router": "^4.1.6"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.35.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9c7dbf6..b6631b4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,11 +20,13 @@ specifiers:
   typescript: ~4.9.5
   vite: ^4.1.1
   vue: ^3.2.47
+  vue-router: ^4.1.6
   vue-tsc: ^1.0.24
 
 dependencies:
   naive-ui: 2.34.3_vue@3.2.47
   vue: 3.2.47
+  vue-router: 4.1.6_vue@3.2.47
 
 devDependencies:
   '@antfu/eslint-config': 0.35.2_7kw3g6rralp5ps6mg3uyzz6azm
@@ -955,6 +957,10 @@ packages:
       '@vue/compiler-dom': 3.2.47
       '@vue/shared': 3.2.47
 
+  /@vue/devtools-api/6.5.0:
+    resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
+    dev: false
+
   /@vue/reactivity-transform/3.2.47:
     resolution: {integrity: sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==}
     dependencies:
@@ -4402,6 +4408,15 @@ packages:
       - supports-color
     dev: true
 
+  /vue-router/4.1.6_vue@3.2.47:
+    resolution: {integrity: sha512-DYWYwsG6xNPmLq/FmZn8Ip+qrhFEzA14EI12MsMgVxvHFDYvlr4NXpVF5hrRH1wVcDP8fGi5F4rxuJSl8/r+EQ==}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      '@vue/devtools-api': 6.5.0
+      vue: 3.2.47
+    dev: false
+
   /vue-template-compiler/2.7.14:
     resolution: {integrity: sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==}
     dependencies:
diff --git a/src/App.vue b/src/App.vue
index 440873e..729fdb9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,12 +1,12 @@
 
 
 
-  
-    
-      
-    
-  
+  
+    
+      
+    
+  
 
diff --git a/src/components/business/Chat/components/Message/Avatar.vue b/src/components/business/Chat/components/Message/Avatar.vue
new file mode 100644
index 0000000..1857c84
--- /dev/null
+++ b/src/components/business/Chat/components/Message/Avatar.vue
@@ -0,0 +1,16 @@
+
+
+
+  
+  
+    
+  
+
diff --git a/src/components/business/Chat/components/Message/Text.vue b/src/components/business/Chat/components/Message/Text.vue
new file mode 100644
index 0000000..d96c5f6
--- /dev/null
+++ b/src/components/business/Chat/components/Message/Text.vue
@@ -0,0 +1,5 @@
+
+  
+    
+  
+
diff --git a/src/components/business/Chat/components/Message/index.vue b/src/components/business/Chat/components/Message/index.vue
new file mode 100644
index 0000000..a897d1c
--- /dev/null
+++ b/src/components/business/Chat/components/Message/index.vue
@@ -0,0 +1,31 @@
+
+
+
+  
+    
+    
+      
+        {{ dateTime }}
+      
+      
+        {{ message }}
+      
+    
+  
 
+
diff --git a/src/components/business/Chat/components/index.ts b/src/components/business/Chat/components/index.ts
new file mode 100644
index 0000000..e5b21df
--- /dev/null
+++ b/src/components/business/Chat/components/index.ts
@@ -0,0 +1,3 @@
+import Message from './Message/index.vue'
+
+export { Message }
diff --git a/src/components/business/Chat/index.vue b/src/components/business/Chat/index.vue
new file mode 100644
index 0000000..14f5e5a
--- /dev/null
+++ b/src/components/business/Chat/index.vue
@@ -0,0 +1,113 @@
+
+
+
+  
+    
+      
+        
+          ChatGPT Web
+        
+        
+          
+            
+          
+        
+      
+      
+        
+      
+      
+    
 
+  
+
diff --git a/src/components/business/Chat/layout/Layout.vue b/src/components/business/Chat/layout/Layout.vue
new file mode 100644
index 0000000..16e9923
--- /dev/null
+++ b/src/components/business/Chat/layout/Layout.vue
@@ -0,0 +1,27 @@
+
+
+
+  
+    
+      
+        Sider
+      
+      
+        
+      
+    
+  
+
+
+
diff --git a/src/components/business/Chat/layout/index.ts b/src/components/business/Chat/layout/index.ts
new file mode 100644
index 0000000..4763bbc
--- /dev/null
+++ b/src/components/business/Chat/layout/index.ts
@@ -0,0 +1,3 @@
+import Layout from './Layout.vue'
+
+export { Layout }
diff --git a/src/components/business/Chat/request.ts b/src/components/business/Chat/request.ts
new file mode 100644
index 0000000..cc32f56
--- /dev/null
+++ b/src/components/business/Chat/request.ts
@@ -0,0 +1,41 @@
+import axios from 'axios'
+
+const BASE_URL = import.meta.env.VITE_GLOB_API_URL
+
+async function fetchChatAPI(message: string) {
+  if (!message || message.trim() === '')
+    return
+
+  try {
+    const { status, data } = await axios.post(`${BASE_URL}/chat`, { message })
+
+    if (status === 200) {
+      if (data.text)
+        return Promise.resolve(data)
+
+      if (data.statusText)
+        return Promise.reject(new Error(data.statusText))
+    }
+
+    return Promise.reject(new Error('Request failed'))
+  }
+  catch (error) {
+    return Promise.reject(error)
+  }
+}
+
+async function clearChatContext() {
+  try {
+    const { status, data } = await axios.post(`${BASE_URL}/clear`)
+
+    if (status === 200)
+      return Promise.resolve(data)
+
+    return Promise.reject(new Error('Request failed'))
+  }
+  catch (error) {
+    return Promise.reject(error)
+  }
+}
+
+export { fetchChatAPI, clearChatContext }
diff --git a/src/components/business/index.ts b/src/components/business/index.ts
new file mode 100644
index 0000000..4af6f59
--- /dev/null
+++ b/src/components/business/index.ts
@@ -0,0 +1,3 @@
+import Chat from './Chat/index.vue'
+
+export { Chat }
diff --git a/src/components/common/NaiveProvider.vue b/src/components/common/NaiveProvider.vue
index 53f365d..b30fc72 100644
--- a/src/components/common/NaiveProvider.vue
+++ b/src/components/common/NaiveProvider.vue
@@ -1,7 +1,6 @@
 
 
 
-  
-    
-      
-        
-          
-            
-            
-          
-        
-      
-    
-  
+  
+    
+      
+        
+          
+          
+        
+      
+    
+  
 
diff --git a/src/main.ts b/src/main.ts
index bf065d9..19f69e9 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,6 +1,8 @@
+import './styles/global.css'
+
 import { createApp } from 'vue'
 import App from './App.vue'
-import './styles/global.css'
+import { setupRouter } from '@/router'
 
 /** Tailwind's Preflight Style Override */
 function naiveStyleOverride() {
@@ -10,9 +12,10 @@ function naiveStyleOverride() {
 }
 
 /** Setup */
-function bootstrap() {
+async function bootstrap() {
   const app = createApp(App)
   naiveStyleOverride()
+  await setupRouter(app)
   app.mount('#app')
 }
 
diff --git a/src/router/index.ts b/src/router/index.ts
new file mode 100644
index 0000000..fad7e6d
--- /dev/null
+++ b/src/router/index.ts
@@ -0,0 +1,22 @@
+import type { App } from 'vue'
+import type { RouteRecordRaw } from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router'
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    name: 'Home',
+    component: () => import('@/views/Home/index.vue'),
+  },
+]
+
+export const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+  scrollBehavior: () => ({ left: 0, top: 0 }),
+})
+
+export async function setupRouter(app: App) {
+  app.use(router)
+  await router.isReady()
+}
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
new file mode 100644
index 0000000..53a37f3
--- /dev/null
+++ b/src/views/home/index.vue
@@ -0,0 +1,13 @@
+
+
+
+  
+    
+  
+
+
+