diff --git a/src/view/nav/Nav.stories.ts b/src/view/nav/Nav.stories.ts
index 4eea5dc..b8f438b 100644
--- a/src/view/nav/Nav.stories.ts
+++ b/src/view/nav/Nav.stories.ts
@@ -2,8 +2,7 @@ import Nav from './'
 
 export default {
   render: () => {
-    return Nav
+    return Nav('/', 'Serabi Ngampin Bu Yuni')
   },
 }
 export const nav = {}
-
diff --git a/src/view/nav/bottom.ts b/src/view/nav/bottom.ts
new file mode 100644
index 0000000..f4d2162
--- /dev/null
+++ b/src/view/nav/bottom.ts
@@ -0,0 +1,33 @@
+import List from '../../configs/links/nav'
+
+let LIST_LINK = ''
+for (let i = 0; i < List.length; i++) {
+  const { name, url, icon } = List[i]
+  LIST_LINK += html`
+    <li class="m-auto align-middle max-w-full text-white">
+      <a
+        href="${url}"
+        class="m-1 capitalize font-Rokkit font-bold flex
+        justify-center items-center flex-col md:flex-row "
+        data-tip="${name}">
+        ${icon}
+        <span>${name}</span>
+      </a>
+    </li>
+  `
+}
+export default html`
+  <nav
+    class="fixed bottom-0 left-0 z-50 w-full
+        flex justify-center items-center
+        md:static md:justify-end md:items-end
+        "
+    data-aos="zoom-in">
+    <div class="w-fit h-fit m-auto md:mr-0">
+      <ul
+        class="menu menu-xs md:menu-md menu-horizontal bg-primary md:bg-transparent rounded-box align-middle">
+        ${LIST_LINK}
+      </ul>
+    </div>
+  </nav>
+`
diff --git a/src/view/nav/index.ts b/src/view/nav/index.ts
index f472024..4dcd823 100644
--- a/src/view/nav/index.ts
+++ b/src/view/nav/index.ts
@@ -1 +1,14 @@
-export default html` <div>hello world</div> `
+import NavBottom from './bottom'
+
+export default function Nav(url: string, title: string) {
+  return html`
+    <div class="navbar bg-primary">
+      <header class="text-white">
+        <a class="btn btn-ghost text-xl" title="${title}" href="${url}">
+          ${title}
+        </a>
+      </header>
+      ${NavBottom}
+    </div>
+  `
+}