diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index c27ad7d..0000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "svn.ignoreMissingSvnWarning": true,
-  "typescript.tsdk": "node_modules/.pnpm/typescript@5.0.2/node_modules/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true
-}
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
index 45c8c1a..1f8a602 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,9 +1,9 @@
 import 'styles/globals.css';
+import '@docsearch/css/dist/style.css';
 import RUAThemeProvider from './theme-provider';
-
-export const metadata = {
-  title: 'RUA',
-};
+import HeadBar from 'components/nav-bar';
+import Footer from 'components/footer';
+import BackToTop from 'components/common/back-to-top';
 
 export default function RootLayout({
   children,
@@ -22,7 +22,10 @@ export default function RootLayout({
         />
       </head>
       <body>
+        <HeadBar />
         <RUAThemeProvider>{children}</RUAThemeProvider>
+        <Footer />
+        <BackToTop />
       </body>
     </html>
   );
diff --git a/app/page.tsx b/app/page.tsx
index 8773ca7..273d49b 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -9,6 +9,10 @@ import { InitFn, THREE, useThree } from 'rua-three';
 import styles from 'styles/index/index.module.css';
 import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
 
+export const metadata = {
+  title: 'RUA - Home',
+};
+
 export default function Page() {
   return (
     <main className="h-[calc(100vh-142px)] flex justify-center items-center text-xl">
diff --git a/components/common/back-to-top.tsx b/components/common/back-to-top.tsx
index 8d52c50..1239325 100644
--- a/components/common/back-to-top.tsx
+++ b/components/common/back-to-top.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import clsx from 'clsx';
 import Button from 'components/rua/button';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
diff --git a/components/nav-bar.tsx b/components/nav-bar.tsx
index fad8bbe..2e64eb5 100644
--- a/components/nav-bar.tsx
+++ b/components/nav-bar.tsx
@@ -1,4 +1,5 @@
-import '@docsearch/css';
+'use client';
+
 import { DocSearch } from '@docsearch/react';
 import clsx from 'clsx';
 import dynamic from 'next/dynamic';
diff --git a/package.json b/package.json
index 1478355..a13a41f 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@codesandbox/sandpack-react": "^2.1.9",
+    "@docsearch/css": "^3.3.3",
     "@docsearch/react": "3",
     "@giscus/react": "^2.2.8",
     "@mapbox/rehype-prism": "^0.8.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3749ce1..8547ae3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2,6 +2,7 @@ lockfileVersion: 5.4
 
 specifiers:
   '@codesandbox/sandpack-react': ^2.1.9
+  '@docsearch/css': ^3.3.3
   '@docsearch/react': '3'
   '@giscus/react': ^2.2.8
   '@mapbox/rehype-prism': ^0.8.0
@@ -49,6 +50,7 @@ specifiers:
 
 dependencies:
   '@codesandbox/sandpack-react': 2.1.9_biqbaboplfbrettd7655fr4n2y
+  '@docsearch/css': 3.3.3
   '@docsearch/react': 3.3.2_zula6vjvt3wdocc4mwcxqa6nzi
   '@giscus/react': 2.2.8_biqbaboplfbrettd7655fr4n2y
   '@mapbox/rehype-prism': 0.8.0
@@ -701,6 +703,10 @@ packages:
     resolution: {integrity: sha512-dctFYiwbvDZkksMlsmc7pj6W6By/EjnVXJq5TEPd05MwQe+dcdHJgaIn1c8wfsucxHpIsdrUcgSkACHCq6aIhw==}
     dev: false
 
+  /@docsearch/css/3.3.3:
+    resolution: {integrity: sha512-6SCwI7P8ao+se1TUsdZ7B4XzL+gqeQZnBc+2EONZlcVa0dVrk0NjETxozFKgMv0eEGH8QzP1fkN+A1rH61l4eg==}
+    dev: false
+
   /@docsearch/react/3.3.2_zula6vjvt3wdocc4mwcxqa6nzi:
     resolution: {integrity: sha512-ugILab2TYKSh6IEHf6Z9xZbOovsYbsdfo60PBj+Bw+oMJ1MHJ7pBt1TTcmPki1hSgg8mysgKy2hDiVdPm7XWSQ==}
     peerDependencies:
