diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 6854609..cd27d4b 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -1,12 +1,11 @@
-import { defineConfigWithTheme } from 'vitepress'
-import fs from 'fs'
+import { defineConfig } from 'vitepress'
 
 /**
  * This is for base url.
  */
 const GITHUB_BASE_REPOSITORY_NAME = '/echo-log/'
 
-const config = defineConfigWithTheme({
+const config = defineConfig({
     title: 'VitePress',
     description: 'Play Aroung',
     base: GITHUB_BASE_REPOSITORY_NAME,
@@ -28,18 +27,49 @@ const config = defineConfigWithTheme({
                 ],
                 collapsible: true,
                 collapsed: true
+            },
+            {
+                text: 'AWS',
+                items: [
+                    { text: 'AWS TO AWS', link : '/aws/' }, // End with slash for bind with index of directory.
+                    { text: 'AWS ASSO', link: '/aws/solution-architect-associate/' }
+                ],
+                collapsible: true,
+                collapsed: true
             }
         ],
-        setTitle: 'My Custom Title',
-        logo: '/image.png',
+        siteTitle: 'Echo Youn',
+        logo: '/favicon.png',
         nav: [
             { text: 'Home', link: '/' }
         ],
+        socialLinks: [
+            { icon: 'github', link: 'https://github.com/vuejs/vitepress' },
+            { icon: 'twitter', link: '...' },
+            // You can also add custom icons by passing SVG as string:
+            {
+              icon: {
+                svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Dribbble</title><path d="M12...6.38z"/></svg>'
+              },
+              link: '...'
+            }
+        ],
+        editLink: {
+            pattern: 'https://github.com/echo-youn/echo-log/edit/main/docs/:path',
+            text: 'Edit this page on GitHub'
+        },
+        lastUpdatedText: 'Updated Date',
         footer: {
             message: 'Hi',
             copyright: 'No Copy right'
+        },
+        algolia: {
+            appId: '',
+            apiKey: '',
+            indexName: 'vitepress'
         }
-    }
+    },
+    lastUpdated: true
 })
 
 export default config
\ No newline at end of file
diff --git a/docs/.vitepress/theme/Layout.vue b/docs/.vitepress/theme/Layout.vue
index 332c279..09a3627 100644
--- a/docs/.vitepress/theme/Layout.vue
+++ b/docs/.vitepress/theme/Layout.vue
@@ -1,6 +1,40 @@
+<script lang="ts" setup>
+    import DefaultTheme from 'vitepress/theme'
+    
+    const { Layout } = DefaultTheme
+</script>
+    
 <template>
-  <h1>Custom Layout!</h1>
+    <h1>custom Layout?</h1>
+    <Layout>
+        <template #aside-outline-before>
+            My custom sidebar top content
+        </template>
+        <template #doc-after>
+            after doc
+        </template>
+        <template #nav-bar-title-before>
+            lol
+        </template>
+        <template #nav-bar-content-before>
+            lllll
+        </template>
+        <template #nav-bar-content-after>
+            lllll222222222222
+        </template>
+        <template #nav-screen-content-before>
+            kk
+        </template>
+        <template #nav-screen-content-after>
+            xx
+        </template>
+        <template #aside-ads-before>
+            ads?
+        </template>
+        <template #nav-search>
+            hi
+        </template>
+    </Layout>
 
-  <!-- this is where markdown content will be rendered -->
-  <Content />
-</template>
+    <Content/>
+</template>
\ No newline at end of file
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index d82f36d..00b33c7 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -1,9 +1,7 @@
-import DefaultTheme from 'vitepress/theme'
+// @ts-ignore
+import Layout from './Layout.vue'
 
 export default {
-  ...DefaultTheme,
-  enhanceApp({ app }) {
-    // register global components
-    app.component('MyGlobalComponent', /* ... */)
-  }
+  Layout: Layout,
+  NotFound: () => 'custom 404'
 }
diff --git a/docs/public/favicon.png b/docs/public/favicon.png
new file mode 100644
index 0000000..fd55374
Binary files /dev/null and b/docs/public/favicon.png differ
diff --git a/package.json b/package.json
index 5b91059..92f2875 100644
--- a/package.json
+++ b/package.json
@@ -5,11 +5,12 @@
   "author": "echo-youn",
   "license": "MIT",
   "scripts": {
-    "docs:dev": "vitepress dev docs",
+    "docs:dev": "vitepress dev docs --host",
     "docs:build": "vitepress build docs",
     "docs:serve": "vitepress serve docs"
   },
   "devDependencies": {
+    "typescript": "^4.8.4",
     "vitepress": "^1.0.0-alpha.16",
     "vue": "^3.2.39"
   },
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..3b33286
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,9 @@
+{ // Json For test
+    "compilerOptions": {
+        "jsx": "preserve"
+    },
+    "include": [
+        "docs/.vitepress/theme/**/*",
+        "docs/.vitepress/**/*"
+    ]
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index c1b829d..b0dfbc8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -573,6 +573,11 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+typescript@^4.8.4:
+  version "4.8.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.8.4.tgz#c464abca159669597be5f96b8943500b238e60e6"
+  integrity sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==
+
 vite@^3.1.0:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/vite/-/vite-3.1.3.tgz#b2a0821c11aae124bb7618f8036913c689afcc59"