diff --git a/frontend/Dockerfile b/frontend/Dockerfile
new file mode 100644
index 0000000..c280794
--- /dev/null
+++ b/frontend/Dockerfile
@@ -0,0 +1,37 @@
+
+FROM node:24.1.0-bookworm AS build
+
+WORKDIR /app
+
+# Copy package files and install dependencies
+COPY package*.json ./
+RUN npm ci
+
+# Copy app source code
+COPY . .
+
+# Build the Next.js app
+RUN npm run build
+
+# Runtime stage
+FROM node:24.1.0-bookworm AS runtime
+
+WORKDIR /app
+
+# Copy package files and install only production dependencies
+COPY package*.json ./
+RUN npm ci --only=production
+
+# Copy built app and public assets from build stage
+COPY --from=build /app/.next ./.next
+COPY --from=build /app/public ./public
+
+# Expose port 3000
+EXPOSE 3000
+
+# Use unprivileged user for security
+USER node
+
+# Start the Next.js app
+CMD ["npm", "start"]
+
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index 02b9f17..fd7a5cf 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
 import { ModeToggle } from "@/components/ModeToggle";
@@ -8,35 +10,48 @@ import {
   MessageCircleMore,
   Handshake,
 } from "lucide-react";
+import { usePathname } from "next/navigation";
 
 export function NavigationMenu() {
+  const pathname = usePathname();
+
   return (
-    <div className="flex justify-center fixed left-1/2 -translate-x-1/2 -translate-y-1/2 bottom-5 md:top-10 md:bottom-auto z-20 backdrop-blur-sm bg-white/20 outline-none rounded-lg border-1">
-      <Link href="/">
-        <Button variant="ghost">
-          <div className="hidden md:inline">Home</div>
-          <div className="md:hidden">
-            <House />
-          </div>
-        </Button>
-      </Link>
-      <Link href="/blog">
-        <Button variant="ghost">
-          <div className="hidden md:inline">Blog</div>
-          <div className="md:hidden">
-            <NotebookPen />
-          </div>
-        </Button>
-      </Link>
-      <Link href="/portfolio">
-        <Button variant="ghost">
-          <div className="hidden md:inline">Portfolio</div>
-          <div className="md:hidden">
-            <BriefcaseBusiness />
-          </div>
-        </Button>
-      </Link>
-      {/*
+    <div className="flex justify-center">
+      <div className="flex justify-center fixed left-1/2 -translate-x-1/2 -translate-y-1/2 bottom-5 md:top-10 md:bottom-auto z-20 backdrop-blur-sm bg-white/20 outline-none rounded-lg border-1">
+        <Link href="/">
+          <Button
+            variant="ghost"
+            className={`${pathname === "/" ? "text-red-500" : ""} text-xl`}
+          >
+            <div className="hidden md:inline">Home</div>
+            <div className="md:hidden">
+              <House style={{ width: "27px", height: "27px" }} />
+            </div>
+          </Button>
+        </Link>
+        <Link href="/blog">
+          <Button
+            variant="ghost"
+            className={`${pathname === "/blog" ? "text-red-500" : ""} text-xl`}
+          >
+            <div className="hidden md:inline">Blog</div>
+            <div className="md:hidden">
+              <NotebookPen style={{ width: "27px", height: "27px" }} />
+            </div>
+          </Button>
+        </Link>
+        <Link href="/portfolio">
+          <Button
+            variant="ghost"
+            className={`${pathname === "/portfolio" ? "text-red-500" : ""} text-xl`}
+          >
+            <div className="hidden md:inline">Portfolio</div>
+            <div className="md:hidden">
+              <BriefcaseBusiness style={{ width: "27px", height: "27px" }} />
+            </div>
+          </Button>
+        </Link>
+        {/*
       <Link href="/talk">
         <Button variant="ghost">
           <div className="hidden md:inline">Talk</div>
@@ -54,7 +69,10 @@ export function NavigationMenu() {
         </Button>
       </Link>
       */}
-      <ModeToggle />
+      </div>
+      <div className="fixed md:right-1/3 right-2 -translate-x-1/2 -translate-y-1/2 bottom-5 md:top-10 md:bottom-auto z-20 backdrop-blur-sm bg-white/20 outline-none rounded-lg border-1">
+        <ModeToggle />
+      </div>
     </div>
   );
 }