diff --git a/TODO.md b/TODO.md
index 7166bfe..e46e8eb 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,7 +1,7 @@
 # TO DO
 
 - [x] use bun package manager
-- [ ] use nuxt framework
+- [x] use nuxt framework
 - [ ] rewrite the random page, the current landing page
 - [ ] rewrite the recipe page
 - [ ] deploy
diff --git a/app.vue b/app.vue
index 26d4d7b..5369f2a 100644
--- a/app.vue
+++ b/app.vue
@@ -1,5 +1,9 @@
 <template>
-  <div data-theme="cupcake">
-    <button class="btn">test</button>
+  <div data-theme="cupcake" class="flex flex-col h-screen">
+    <Navbar />
+    <main class="flex-grow">
+      <NuxtPage />
+    </main>
+    <Footer />
   </div>
 </template>
diff --git a/components/footer.vue b/components/footer.vue
new file mode 100644
index 0000000..f1ae40f
--- /dev/null
+++ b/components/footer.vue
@@ -0,0 +1,7 @@
+<template>
+  <footer class="footer footer-center p-4 bg-base-300 text-base-content">
+    <aside>
+      <p>Copyright &copy; 2024 - Made with ❤️</p>
+    </aside>
+  </footer>
+</template>
diff --git a/components/navbar.vue b/components/navbar.vue
new file mode 100644
index 0000000..c431985
--- /dev/null
+++ b/components/navbar.vue
@@ -0,0 +1,42 @@
+<template>
+  <nav class="navbar bg-base-300">
+    <div class="navbar-start">
+      <div class="dropdown">
+        <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-5 w-5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M4 6h16M4 12h8m-8 6h16"
+            />
+          </svg>
+        </div>
+        <ul
+          tabindex="0"
+          class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-200 rounded-box w-52"
+        >
+          <li><a>Categories</a></li>
+        </ul>
+      </div>
+      <nuxt-link to="/" class="btn btn-ghost text-xl">
+        <img src="/public/logo192.png" width="50" />
+        <span style="font-family: cursive"> Chefs </span>
+      </nuxt-link>
+    </div>
+    <div class="navbar-center hidden lg:flex">
+      <ul class="menu menu-horizontal px-1">
+        <li><a>Categories</a></li>
+      </ul>
+    </div>
+    <div class="navbar-end">
+      <nuxt-link to="/random" class="btn btn-primary">Random</nuxt-link>
+    </div>
+  </nav>
+</template>
diff --git a/pages/index.vue b/pages/index.vue
new file mode 100644
index 0000000..83cefa1
--- /dev/null
+++ b/pages/index.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>index</div>
+</template>
diff --git a/pages/random.vue b/pages/random.vue
new file mode 100644
index 0000000..ebf0889
--- /dev/null
+++ b/pages/random.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>random</div>
+</template>