diff --git a/app/layout.tsx b/app/layout.tsx
index e28ade7..18bcc19 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,4 @@
 import type { Metadata } from "next";
-import { headers } from "next/headers";
 
 import "@/app/globals.css";
 import { AppShell } from "@/components/app-shell";
@@ -14,9 +13,6 @@ export default async function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const headerList = await headers();
-  const pathname = headerList.get("x-pathname") || "/tasks";
-
   return (
     <html lang="en">
       <head>
@@ -28,7 +24,7 @@ export default async function RootLayout({
         />
       </head>
       <body>
-        <AppShell pathname={pathname}>{children}</AppShell>
+        <AppShell>{children}</AppShell>
       </body>
     </html>
   );
diff --git a/components/app-shell.tsx b/components/app-shell.tsx
index e35fa88..2464a35 100644
--- a/components/app-shell.tsx
+++ b/components/app-shell.tsx
@@ -1,4 +1,7 @@
+"use client";
+
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { Network, NotebookTabs, PanelsTopLeft, ScrollText, Send, Settings2, ShieldEllipsis, UsersRound } from "lucide-react";
 
 import { cn } from "@/lib/utils";
@@ -16,12 +19,12 @@ const navItems = [
 ];
 
 export function AppShell({
-  pathname,
   children,
 }: {
-  pathname: string;
   children: React.ReactNode;
 }) {
+  const pathname = usePathname();
+
   return (
     <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(34,211,238,0.18),_transparent_30%),radial-gradient(circle_at_top_right,_rgba(245,158,11,0.14),_transparent_28%),linear-gradient(180deg,#07111f_0%,#091321_44%,#0f172a_100%)] text-foreground">
       <header className="border-b border-white/10 bg-slate-950/60 backdrop-blur-xl">
@@ -44,7 +47,8 @@ export function AppShell({
         <nav className="space-y-2 lg:sticky lg:top-8 lg:self-start">
           {navItems.map((item) => {
             const Icon = item.icon;
-            const isActive = pathname === item.href;
+            const isActive =
+              pathname === item.href || (item.href !== "/tasks" && pathname.startsWith(`${item.href}/`));
             return (
               <Link
                 className={cn(
diff --git a/middleware.ts b/middleware.ts
deleted file mode 100644
index 1933e74..0000000
--- a/middleware.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { NextRequest } from "next/server";
-import { NextResponse } from "next/server";
-
-export function middleware(request: NextRequest) {
-  const requestHeaders = new Headers(request.headers);
-  requestHeaders.set("x-pathname", request.nextUrl.pathname);
-
-  return NextResponse.next({
-    request: {
-      headers: requestHeaders,
-    },
-  });
-}
-
-export const config = {
-  matcher: ["/((?!_next/static|_next/image|favicon.ico).*)"],
-};
