diff --git a/client/package-lock.json b/client/package-lock.json
index 8a41d23..2078a86 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -1762,6 +1762,33 @@
         "react": "^18 || ^19"
       }
     },
+    "node_modules/@tanstack/react-virtual": {
+      "version": "3.13.12",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.12.tgz",
+      "integrity": "sha512-Gd13QdxPSukP8ZrkbgS2RwoZseTTbQPLnQEn7HY/rqtM+8Zt95f7xKC7N0EsKs7aoz0WzZ+fditZux+F8EzYxA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.13.12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.13.12",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.12.tgz",
+      "integrity": "sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "dev": true,
@@ -6384,6 +6411,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tabbable": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.3.0.tgz",
+      "integrity": "sha512-EIHvdY5bPLuWForiR/AN2Bxngzpuwn1is4asboytXtpTgsArc+WmSJKVLlhdh71u7jFcryDqB2A8lQvj78MkyQ==",
+      "license": "MIT"
+    },
     "node_modules/tailwind-merge": {
       "version": "3.3.1",
       "license": "MIT",
diff --git a/client/public/logo.png b/client/public/logo.png
new file mode 100644
index 0000000..e9ace30
Binary files /dev/null and b/client/public/logo.png differ
diff --git a/client/src/app/layout.tsx b/client/src/app/layout.tsx
index 0b5b472..befe7c8 100644
--- a/client/src/app/layout.tsx
+++ b/client/src/app/layout.tsx
@@ -3,6 +3,8 @@ import "@/styles/globals.css";
 import { Montserrat } from "next/font/google";
 import { ReactNode } from "react";
 
+import Navbar from "@/components/ui/navbar";
+
 import Providers from "./providers";
 
 const montserrat = Montserrat({
@@ -21,7 +23,10 @@ export default function RootLayout({ children }: { children: ReactNode }) {
         data-gr-ext-installed=""
         data-gr-ext-disabled="forever"
       >
-        <Providers>{children}</Providers>
+        <Providers>
+          <Navbar />
+          {children}
+        </Providers>
       </body>
     </html>
   );
diff --git a/client/src/app/page.tsx b/client/src/app/page.tsx
index 571e4f2..b22a996 100644
--- a/client/src/app/page.tsx
+++ b/client/src/app/page.tsx
@@ -20,7 +20,12 @@ export default function Home() {
         "flex min-h-screen flex-col items-center gap-4 p-24 font-montserrat",
       )}
     >
-      <Button variant="login" onClick={() => setClicked(true)}>
+      <Button
+        variant="login"
+        onClick={() => setClicked(true)}
+        className="flex items-center gap-2"
+      >
+        <HiOutlineUser className="h-5 w-5" />
         Ping
       </Button>
       <p>
diff --git a/client/src/components/input.tsx b/client/src/components/input.tsx
index ad7fbf5..c918634 100644
--- a/client/src/components/input.tsx
+++ b/client/src/components/input.tsx
@@ -10,8 +10,8 @@
 import { format } from "date-fns";
 import React from "react";
 
-import { Calendar } from "@/components/calendar";
 import Badge from "@/components/badge";
+import { Calendar } from "@/components/calendar";
 import {
   Popover,
   PopoverContent,
diff --git a/client/src/components/ui/navbar.tsx b/client/src/components/ui/navbar.tsx
new file mode 100644
index 0000000..5325cd9
--- /dev/null
+++ b/client/src/components/ui/navbar.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { useState } from "react";
+import { HiOutlineUser } from "react-icons/hi";
+
+import { cn } from "@/lib/utils";
+
+import { Button } from "./button";
+
+export default function Navbar() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <nav className="sticky top-0 z-50 w-full border-b-2 border-black bg-white">
+      <div className="max-w-8xl mx-auto flex items-center justify-between px-12 py-3">
+        {/* logo */}
+        <Link href="/" className="text-xl font-semibold">
+          <Image src="/logo.png" width={50} height={50} alt="logo" />
+        </Link>
+
+        {/* mobile */}
+        <button
+          className="flex flex-col items-center justify-center space-y-1 md:hidden"
+          onClick={() => setOpen(!open)}
+        >
+          <span
+            className={cn(
+              "block h-0.5 w-6 bg-black transition-all",
+              open && "translate-y-1.5 rotate-45",
+            )}
+          />
+          <span
+            className={cn(
+              "block h-0.5 w-6 bg-black transition-all",
+              open && "opacity-0",
+            )}
+          />
+          <span
+            className={cn(
+              "block h-0.5 w-6 bg-black transition-all",
+              open && "-translate-y-1.5 -rotate-45",
+            )}
+          />
+        </button>
+
+        {/* desktop */}
+        <div className="hidden items-center gap-6 md:flex">
+          <Link href="/">
+            <Button variant="outline">Book room</Button>
+          </Link>
+          <Link href="/find-my-booking">
+            <Button variant="text">Find my booking</Button>
+          </Link>
+          <Link href="/admin">
+            <Button variant="login">
+              <HiOutlineUser className="h-5 w-5" />
+              Admin login
+            </Button>
+          </Link>
+        </div>
+      </div>
+
+      {/* mobile hamburger */}
+      {open && (
+        <div className="absolute left-0 top-full max-h-screen w-full overflow-y-auto bg-white md:hidden">
+          <div className="flex h-full flex-col items-end gap-6 px-8 py-6">
+            <Link href="/">
+              <Button variant="outline">Book room</Button>
+            </Link>
+            <Link
+              href="/find-my-booking"
+              className="-mx-4 mt-4 hover:text-primary"
+            >
+              <Button variant="text">Find my booking</Button>
+            </Link>
+            <div className="-mx-2 mt-20">
+              <Link href="/admin">
+                <Button variant="login">
+                  <HiOutlineUser className="h-5 w-5" />
+                  Admin login
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </div>
+      )}
+    </nav>
+  );
+}
diff --git a/client/tsconfig.json b/client/tsconfig.json
index 667307b..c688a08 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -32,7 +32,7 @@
     "**/*.ts",
     "**/*.tsx",
     "next-env.d.ts",
-    ".next/types/**/*.ts"
+    ".next/types/**/*.ts",
   ],
   "exclude": [
     "node_modules"