From b06ce83488d0e798a1f760dae81a11680274d992 Mon Sep 17 00:00:00 2001
From: SrashtiChauhan <srashtichauhan24@gmail.com>
Date: Fri, 29 May 2026 21:26:34 +0530
Subject: [PATCH] fix: unify navbar and insights layout consistency

---
 frontend/app/components/AppShell.tsx          |  43 ++---
 frontend/app/components/CommandPalette.tsx    |   2 +-
 frontend/app/components/InsightsSidebar.tsx   | 150 ++++++++++++------
 .../components/Overview-comp/OverviewMain.tsx |   2 +-
 .../app/components/Tasks-comp/TasksHeader.tsx |  71 ++++++---
 .../app/components/Tasks-comp/TopHeader.tsx   |  29 ++--
 frontend/app/components/TopNavbar.tsx         |  91 +++++++++++
 .../analytics-comp/AnalyticsHeader.tsx        |  70 +++-----
 frontend/app/insights pages/page.tsx          |  77 ---------
 frontend/app/insights/analytics/page.tsx      |  42 +++--
 frontend/app/insights/feed/page.tsx           |   1 -
 frontend/app/insights/layout.tsx              |  11 +-
 frontend/app/insights/overview/page.tsx       |   7 +-
 frontend/app/insights/tasks/page.tsx          |   3 -
 frontend/app/projects/page.tsx                |   1 +
 15 files changed, 341 insertions(+), 259 deletions(-)
 create mode 100644 frontend/app/components/TopNavbar.tsx
 delete mode 100644 frontend/app/insights pages/page.tsx

diff --git a/frontend/app/components/AppShell.tsx b/frontend/app/components/AppShell.tsx
index 69bb3b2..25ffafa 100644
--- a/frontend/app/components/AppShell.tsx
+++ b/frontend/app/components/AppShell.tsx
@@ -1,43 +1,44 @@
 "use client";
-import CommandPalette from "./CommandPalette";
-import NotificationsPanel from "./NotificationsPanel";
 
 import { usePathname } from "next/navigation";
+
+import CommandPalette from "./CommandPalette";
 import Sidebar from "./Sidebar";
+import TopNavbar from "./TopNavbar";
 
-export default function AppShell({ children }: { children: React.ReactNode }) {
+export default function AppShell({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   const pathname = usePathname();
 
   const isPublicRoute =
-    pathname === "/" || pathname === "/login" || pathname === "/signup";
-  const isInsightsRoute = pathname?.startsWith("/insights");
+    pathname === "/" ||
+    pathname === "/login" ||
+    pathname === "/signup";
+
+  const isInsightsRoute =
+    pathname?.startsWith("/insights");
 
-  const hideSidebar = isPublicRoute || isInsightsRoute;
+  const hideSidebar =
+    isPublicRoute || isInsightsRoute;
 
-  // Let Insights pages control their own padding
+  // Insights pages manage their own spacing
   const mainClass = hideSidebar
     ? "min-w-0 flex-1 overflow-x-hidden"
     : "min-w-0 flex-1 overflow-x-hidden p-6";
 
   return (
-    <div className="flex min-h-screen relative w-full">
+    <div className="flex min-h-screen w-full bg-[#f5f7f2]">
       <CommandPalette />
 
       {!hideSidebar && <Sidebar />}
 
-      <div className="flex-1 flex flex-col">
+      <div className="flex min-w-0 flex-1 flex-col">
         {!isPublicRoute && (
-          <div
-            className="
-              sticky top-0 z-40
-              flex items-center justify-end
-              border-b border-outline-variant
-              bg-white/80
-              px-6 py-4
-              backdrop-blur-xl
-            "
-          >
-            <NotificationsPanel />
+          <div className="sticky top-0 z-40">
+            <TopNavbar />
           </div>
         )}
 
@@ -47,4 +48,4 @@ export default function AppShell({ children }: { children: React.ReactNode }) {
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/app/components/CommandPalette.tsx b/frontend/app/components/CommandPalette.tsx
index 3e05876..edbdc6f 100644
--- a/frontend/app/components/CommandPalette.tsx
+++ b/frontend/app/components/CommandPalette.tsx
@@ -6,7 +6,7 @@ import { useRouter } from "next/navigation";
 const commands = [
   { id: 1, label: "Dashboard", href: "/dashboard" },
   { id: 2, label: "Projects", href: "/projects" },
-  { id: 3, label: "Insights Analytics", href: "/insights/analytics" },
+  { id: 3, label: "Insights Overview", href: "/insights/overview" },
   { id: 4, label: "Insights Tasks", href: "/insights/tasks" },
   { id: 5, label: "Insights Feed", href: "/insights/feed" },
 ];
diff --git a/frontend/app/components/InsightsSidebar.tsx b/frontend/app/components/InsightsSidebar.tsx
index e03290a..56b16dd 100644
--- a/frontend/app/components/InsightsSidebar.tsx
+++ b/frontend/app/components/InsightsSidebar.tsx
@@ -1,68 +1,124 @@
 "use client";
 
-import React from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { LayoutDashboard, FileBarChart, Blocks, MessageSquare, Plus, Settings, HelpCircle, Route, MessageCircle, BarChart3, LineChart } from "lucide-react";
+import {
+  LayoutDashboard,
+  LineChart,
+  Route,
+  MessageCircle,
+  Plus,
+  Settings,
+  HelpCircle,
+} from "lucide-react";
 
 export default function InsightsSidebar() {
   const pathname = usePathname();
 
   const navItems = [
-    { href: "/insights/overview", label: "Overview", icon: LayoutDashboard },
-    { href: "/insights/analytics", label: "Analytics", icon: LineChart },
-    { href: "/insights/tasks", label: "Tasks", icon: Route },
-    { href: "/insights/feed", label: "Feed", icon: MessageCircle },
+    {
+      href: "/insights/overview",
+      label: "Overview",
+      icon: LayoutDashboard,
+    },
+    {
+      href: "/insights/analytics",
+      label: "Analytics",
+      icon: LineChart,
+    },
+    {
+      href: "/insights/tasks",
+      label: "Tasks",
+      icon: Route,
+    },
+    {
+      href: "/insights/feed",
+      label: "Feed",
+      icon: MessageCircle,
+    },
   ];
 
   return (
-    <aside className="hidden lg:flex flex-col h-screen w-64 p-6 border-r border-[#dbe4d5] sticky top-0 shrink-0" style={{ backgroundColor: 'transparent' }}>
-      <div className="mb-8 px-2 flex flex-col pt-2">
-        <h2 className="text-xl tracking-tight font-extrabold" style={{ color: '#0f766e' }}>
-          Project Alpha
-        </h2>
-        <p className="text-[11px] uppercase tracking-widest text-[#5d6d62] opacity-80 mt-1">
+    <aside className="panel m-2 mb-0 w-64 p-4 md:m-6 md:mb-6 md:h-[calc(100vh-3rem)] flex flex-col">
+      <div className="flex flex-1 flex-col">
+
+        {/* Project Header */}
+        <div className="mb-6">
+          <h2 className="text-xl font-bold tracking-tight text-slate-900 md:text-2xl">
+            Project Alpha
+          </h2>
+
+        <span className="chip mt-2 inline-block px-3 py-1 text-xs font-semibold">
           Enterprise Flow
-        </p>
+        </span>
       </div>
 
-      <nav className="flex-1 flex flex-col gap-1">
-        {navItems.map((item) => {
-          const Icon = item.icon;
-          const isActive = pathname === item.href || pathname?.startsWith(item.href);
-          
-          return (
-            <Link 
-              key={item.href} 
-              href={item.href} 
-              className={`flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-300 font-medium text-[14px] ${
-                isActive 
-                  ? "bg-[#eef2e7] text-[#0f766e] font-bold" 
-                  : "text-[#5d6d62] hover:text-[#115e59] hover:bg-[#eef2e7]/50"
-              }`}
+        {/* Navigation */}
+        <nav className="flex flex-1 flex-col gap-2">
+          {navItems.map((item) => {
+            const Icon = item.icon;
+
+            const isActive =
+              pathname === item.href ||
+              pathname?.startsWith(item.href);
+
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={`flex items-center gap-2 rounded-xl px-3 py-2 transition ${
+                  isActive
+                    ? "bg-teal-700 text-white shadow-sm"
+                    : "text-slate-700 hover:bg-slate-200"
+               }`}
+              >
+                <Icon size={16} />
+                <span className="text-sm font-medium">
+                  {item.label}
+                </span>
+              </Link>
+            );
+          })}
+        </nav>
+
+        {/* Bottom Actions */}
+        <div className="mt-auto border-t border-slate-200 pt-6">
+
+          <button
+            className="
+              mb-4 flex w-full items-center justify-center gap-2
+              rounded-xl bg-teal-700 px-3 py-2
+              text-white shadow-sm
+              transition hover:bg-teal-800
+            "
+          >
+            <Plus size={16} />
+            <span className="text-sm font-medium">
+              New Insight
+            </span>
+          </button>
+
+          <div className="flex flex-col gap-1">
+            <Link
+              href="#"
+              className="flex items-center gap-2 rounded-xl px-3 py-2 text-slate-700 transition hover:bg-slate-200"
             >
-              <Icon size={18} strokeWidth={isActive ? 2.5 : 2} />
-              <span>{item.label}</span>
+              <Settings size={16} />
+              <span className="text-sm font-medium">
+                Settings
+              </span>
             </Link>
-          );
-        })}
-      </nav>
-
-      <div className="flex flex-col gap-4 pt-8 mt-auto">
-        <button className="text-[13px] py-3.5 px-4 rounded-xl flex items-center justify-center gap-2 hover:shadow-lg active:scale-95 transition-all text-white font-semibold" style={{ backgroundColor: '#0f766e' }}>
-          <Plus size={18} strokeWidth={3} />
-          New Insight
-        </button>
 
-        <div className="flex flex-col border-t border-[#dbe4d5] pt-4 mt-2">
-          <Link className="flex items-center gap-3 px-4 py-2.5 text-[#5d6d62] hover:text-[#0f766e] transition-colors rounded-xl hover:bg-[#eef2e7]/30" href="#">
-            <Settings size={18} />
-            <span className="text-[13px] font-medium">Settings</span>
-          </Link>
-          <Link className="flex items-center gap-3 px-4 py-2.5 text-[#5d6d62] hover:text-[#0f766e] transition-colors rounded-xl hover:bg-[#eef2e7]/30" href="#">
-            <HelpCircle size={18} />
-            <span className="text-[13px] font-medium">Support</span>
-          </Link>
+            <Link
+              href="#"
+              className="flex items-center gap-2 rounded-xl px-3 py-2 text-slate-700 transition hover:bg-slate-200"
+            >
+              <HelpCircle size={16} />
+              <span className="text-sm font-medium">
+                Support
+              </span>
+            </Link>
+          </div>
         </div>
       </div>
     </aside>
diff --git a/frontend/app/components/Overview-comp/OverviewMain.tsx b/frontend/app/components/Overview-comp/OverviewMain.tsx
index 3a1d4d4..68c4244 100644
--- a/frontend/app/components/Overview-comp/OverviewMain.tsx
+++ b/frontend/app/components/Overview-comp/OverviewMain.tsx
@@ -57,7 +57,7 @@ export default function OverviewMain() {
 
   return (
     <div className="flex-1">
-      <div className="max-w-4xl mx-auto mb-16">
+      <div className="w-full mb-16">
         <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-8 mb-12">
           <div>
             <div className="inline-flex items-center gap-3 bg-secondary-container30 px-3 py-1 rounded-full mb-6">
diff --git a/frontend/app/components/Tasks-comp/TasksHeader.tsx b/frontend/app/components/Tasks-comp/TasksHeader.tsx
index 3b4cca2..a0c3386 100644
--- a/frontend/app/components/Tasks-comp/TasksHeader.tsx
+++ b/frontend/app/components/Tasks-comp/TasksHeader.tsx
@@ -4,46 +4,73 @@ import React from "react";
 
 export default function TasksHeader() {
   return (
-    <header className="flex justify-between items-center w-full px-4 md:px-margin-desktop h-20 bg-transparent z-40 shrink-0">
-      <div className="flex items-center gap-12">
+    <header
+      className="
+        flex items-center justify-between
+        w-full h-20 shrink-0
+        px-4 md:px-margin-desktop
+        border-b border-outline-variant
+        bg-white
+      "
+    >
+      {/* Page Title */}
+      <div className="flex items-center">
         <h1 className="font-headline-md text-[26px] font-bold text-on-surface">
           Flow Insights
         </h1>
-
-        <div className="hidden lg:flex items-center gap-8">
-          <a className="text-on-surface-variant hover:text-primary transition-colors font-label-md text-label-md" href="#">
-            Projects
-          </a>
-          <a className="text-on-surface-variant hover:text-primary transition-colors font-label-md text-label-md" href="#">
-            Dashboard
-          </a>
-          <a className="text-primary font-bold border-b-2 border-primary pb-1 font-label-md text-label-md" href="#">
-            Insights
-          </a>
-        </div>
       </div>
 
+      {/* Search + Actions */}
       <div className="flex items-center gap-6">
-        <div className="hidden md:flex items-center bg-surface-container-low/50 backdrop-blur px-4 py-2 rounded-xl border border-outline-variant/50">
-          <span className="material-symbols-outlined text-outline text-[20px]">search</span>
+        <div
+          className="
+            hidden md:flex items-center
+            rounded-xl border border-outline-variant/50
+            bg-surface-container-low/50
+            px-4 py-2
+            backdrop-blur
+          "
+        >
+          <span className="material-symbols-outlined text-[20px] text-outline">
+            search
+          </span>
+
           <input
-            className="bg-transparent border-none focus:ring-0 text-body-md font-body-md w-48 placeholder:text-outline"
-            placeholder="Search tasks..."
             type="text"
+            placeholder="Search tasks..."
+            className="
+              w-48 border-none bg-transparent
+              text-body-md font-body-md
+              placeholder:text-outline
+              focus:ring-0 focus:outline-none
+            "
           />
         </div>
 
         <div className="flex items-center gap-3">
-          <button className="p-2.5 text-on-surface-variant hover:bg-surface-container-low rounded-full transition-all">
-            <span className="material-symbols-outlined text-[22px]">notifications</span>
+          <button
+            className="
+              rounded-full p-2.5
+              text-on-surface-variant
+              transition-all
+              hover:bg-surface-container-low
+            "
+          >
+            <span className="material-symbols-outlined text-[22px]">
+              notifications
+            </span>
           </button>
+
           <img
             alt="User profile"
-            className="w-9 h-9 rounded-full border-2 border-surface shadow-sm ml-2"
             src="https://lh3.googleusercontent.com/aida-public/AB6AXuCkg4vnO8f5CYXs98lXGmEBvpJyvEeFPY6KpI0D_WhJwkurBhewAXswpL7cAddlTuhyR3U9Yk7rCC4QV5tyDr0o5el9lVbLOgvEy_qlV0DyU9TlHmMDHO4uZFtQcTplFQsXMmQOR-dZXVcZUPmKq_m27_2QK0GkIeecDTElHOJNFY7pLXTxpxz2cAsyUuYpFz_aAdJmFIESRW7TrFVHQ8zx3z2-_8VPIKY6tZawlDn4j6nMx6noasR9sKFo1YvfhZp-qJ3HPbjktw5E"
+            className="
+              ml-2 h-9 w-9 rounded-full
+              border-2 border-surface shadow-sm
+            "
           />
         </div>
       </div>
     </header>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/app/components/Tasks-comp/TopHeader.tsx b/frontend/app/components/Tasks-comp/TopHeader.tsx
index 649107b..c3a6dff 100644
--- a/frontend/app/components/Tasks-comp/TopHeader.tsx
+++ b/frontend/app/components/Tasks-comp/TopHeader.tsx
@@ -4,42 +4,33 @@ import React from "react";
 
 export default function TopHeader() {
   return (
-    <header className="bg-surface80 backdrop-blur-md sticky top-0 z-50 border-b border-surface-variant50">
-      <div className="flex justify-between items-center w-full px-margin-desktop max-w-container-max mx-auto h-20">
-        <div className="flex items-center gap-12">
-          <span className="font-headline-md text-headline-md font-bold text-primary tracking-tight">
+    <header className="border-b border-surface-variant50 bg-white">
+      <div className="mx-auto flex h-20 w-full max-w-container-max items-center justify-between px-margin-desktop">
+
+        {/* Title */}
+        <div className="flex items-center">
+          <span className="font-headline-md text-headline-md font-bold tracking-tight text-primary">
             Flow Insights
           </span>
-
-          <nav className="hidden md:flex items-center gap-8">
-            <a className="text-on-surface-variant70 hover:text-primary transition-colors font-label-md text-label-md" href="#">
-              Projects
-            </a>
-            <a className="text-on-surface-variant70 hover:text-primary transition-colors font-label-md text-label-md" href="#">
-              Dashboard
-            </a>
-            <a className="text-primary font-semibold border-b-2 border-primary40 pb-1 font-label-md text-label-md" href="#">
-              Insights
-            </a>
-          </nav>
         </div>
 
+        {/* Right Actions */}
         <div className="flex items-center gap-6">
           <div className="relative group">
-            <span className="material-symbols-outlined text-on-surface-variant70 p-2 rounded-full hover:bg-surface-container transition-all cursor-pointer">
+            <span className="material-symbols-outlined cursor-pointer rounded-full p-2 text-on-surface-variant70 transition-all hover:bg-surface-container">
               notifications
             </span>
           </div>
 
           <div className="relative group">
-            <span className="material-symbols-outlined text-on-surface-variant70 p-2 rounded-full hover:bg-surface-container transition-all cursor-pointer">
+            <span className="material-symbols-outlined cursor-pointer rounded-full p-2 text-on-surface-variant70 transition-all hover:bg-surface-container">
               settings
             </span>
           </div>
 
           <img
             alt="User profile"
-            className="w-9 h-9 rounded-full object-cover ring-1 ring-outline-variant"
+            className="h-9 w-9 rounded-full object-cover ring-1 ring-outline-variant"
             src="https://lh3.googleusercontent.com/a-/AOh14Ghexample"
           />
         </div>
diff --git a/frontend/app/components/TopNavbar.tsx b/frontend/app/components/TopNavbar.tsx
new file mode 100644
index 0000000..149648a
--- /dev/null
+++ b/frontend/app/components/TopNavbar.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+import NotificationsPanel from "./NotificationsPanel";
+
+export default function TopNavbar() {
+  const pathname = usePathname();
+
+  return (
+    <header className="h-20 border-b border-outline-variant bg-white">
+      <div className="flex h-full items-center justify-between px-8">
+
+        {/* Left Side */}
+        <div className="flex items-center gap-10">
+          <Link
+            href="/dashboard"
+            className="text-[20px] font-bold text-primary"
+          >
+            FlowForge
+          </Link>
+
+          <nav className="hidden items-center gap-8 md:flex">
+            <Link
+              href="/projects"
+              className={`pb-1 text-sm transition-colors ${
+                pathname.startsWith("/projects")
+                  ? "border-b-2 border-primary font-semibold text-primary"
+                  : "text-on-surface-variant hover:text-primary"
+              }`}
+            >
+              Projects
+            </Link>
+
+            <Link
+              href="/dashboard"
+              className={`pb-1 text-sm transition-colors ${
+                pathname.startsWith("/dashboard")
+                  ? "border-b-2 border-primary font-semibold text-primary"
+                  : "text-on-surface-variant hover:text-primary"
+              }`}
+            >
+              Dashboard
+            </Link>
+
+            <Link
+              href="/insights/overview"
+              className={`pb-1 text-sm transition-colors ${
+                pathname.startsWith("/insights")
+                  ? "border-b-2 border-primary font-semibold text-primary"
+                  : "text-on-surface-variant hover:text-primary"
+              }`}
+            >
+              Insights
+            </Link>
+          </nav>
+        </div>
+
+        {/* Right Side */}
+        <div className="flex items-center gap-5">
+          <NotificationsPanel />
+
+          <button
+            className="
+              rounded-full p-2
+              text-on-surface-variant
+              transition-all duration-200
+              hover:bg-surface-container-low
+            "
+            type="button"
+          >
+            <span className="material-symbols-outlined">
+              settings
+            </span>
+          </button>
+
+          <img
+            alt="User profile"
+            src="https://i.pravatar.cc/80?img=32"
+            className="
+              h-10 w-10 rounded-full
+              border border-outline-variant
+              object-cover
+            "
+          />
+        </div>
+      </div>
+    </header>
+  );
+}
\ No newline at end of file
diff --git a/frontend/app/components/analytics-comp/AnalyticsHeader.tsx b/frontend/app/components/analytics-comp/AnalyticsHeader.tsx
index d897491..a00f804 100644
--- a/frontend/app/components/analytics-comp/AnalyticsHeader.tsx
+++ b/frontend/app/components/analytics-comp/AnalyticsHeader.tsx
@@ -1,8 +1,5 @@
 "use client";
 
-import Link from "next/link";
-import NotificationsPanel from "@/app/components/NotificationsPanel";
-
 type AnalyticsHeaderProps = {
   sprint: string;
   sprints: string[];
@@ -19,31 +16,22 @@ export default function AnalyticsHeader({
   onSprintChange,
 }: AnalyticsHeaderProps) {
   return (
-    <header className="sticky top-0 z-10 w-full bg-surface/95 shadow-sm backdrop-blur">
-      <div className="mx-auto flex min-h-16 max-w-container-max flex-col gap-3 px-6 py-3 md:px-margin-desktop lg:flex-row lg:items-center">
-        <div className="flex items-center gap-8 flex-1">
-          <div className="md:hidden font-headline-md font-bold text-primary">
-            Flow Insights
-          </div>
-
-          <nav className="hidden md:flex items-center gap-6">
-            <Link className="text-on-surface-variant hover:text-primary transition-colors font-label-md" href="/projects">
-              Projects
-            </Link>
-            <Link className="text-on-surface-variant hover:text-primary transition-colors font-label-md" href="/dashboard">
-              Dashboard
-            </Link>
-            <Link className="text-primary font-bold border-b-2 border-primary pb-1 font-label-md" href="/insights/analytics">
-              Insights
-            </Link>
-          </nav>
-        </div>
+    <div className="border-b border-outline-variant bg-white px-6 py-4">
+      <div className="mx-auto flex max-w-7xl flex-col gap-3 lg:flex-row lg:items-center">
 
-        <div className="flex flex-1 flex-col gap-3 sm:flex-row lg:max-w-2xl">
+        <div className="flex flex-1 flex-col gap-3 sm:flex-row">
           <select
             value={sprint}
-            onChange={(event) => onSprintChange(event.target.value)}
-            className="rounded-lg border border-outline-variant bg-surface-container-low px-3 py-2 font-label-md outline-none transition focus:border-primary"
+            onChange={(event) =>
+              onSprintChange(event.target.value)
+            }
+            className="
+              rounded-lg border border-outline-variant
+              bg-surface-container-low
+              px-3 py-2
+              outline-none transition
+              focus:border-primary
+            "
           >
             {sprints.map((item) => (
               <option key={item} value={item}>
@@ -54,27 +42,21 @@ export default function AnalyticsHeader({
 
           <input
             value={query}
-            onChange={(event) => onQueryChange(event.target.value)}
+            onChange={(event) =>
+              onQueryChange(event.target.value)
+            }
             placeholder="Search member, role, or focus..."
-            className="min-w-0 flex-1 rounded-lg border border-outline-variant bg-surface-container-low px-4 py-2 font-label-md outline-none transition focus:border-primary"
+            className="
+              min-w-0 flex-1 rounded-lg
+              border border-outline-variant
+              bg-surface-container-low
+              px-4 py-2
+              outline-none transition
+              focus:border-primary
+            "
           />
         </div>
-
-        <div className="flex items-center gap-4">
-          <NotificationsPanel />
-          
-          <button className="p-2 text-on-surface-variant hover:bg-surface-container-low rounded-full transition-all duration-200 active:scale-90" type="button">
-            <span className="material-symbols-outlined">settings</span>
-          </button>
-          <div className="w-8 h-8 rounded-full bg-outline-variant overflow-hidden">
-            <img
-              alt="User profile"
-              className="w-full h-full object-cover"
-              src="https://i.pravatar.cc/80?img=32"
-            />
-          </div>
-        </div>
       </div>
-    </header>
+    </div>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/app/insights pages/page.tsx b/frontend/app/insights pages/page.tsx
deleted file mode 100644
index 8e093c9..0000000
--- a/frontend/app/insights pages/page.tsx	
+++ /dev/null
@@ -1,77 +0,0 @@
-"use client"
-
-const InsightsPage = () => {
-  const navItems = [
-    {
-        label: 'Overview',
-        active: true,
-    },
-    {
-        label: "Analytics",
-        active: false,
-    },
-    {
-        label: "Tasks",
-        active: false,
-    },
-    {
-        label: "Feed",
-        active: false,
-    },
-  ];
-  return (
-    <div className="min-h-screen bg [#f6f7f5]">
-        <div className="grid min-h-screen gird-cols-[240px_1fr_320px]">
-            <aside className="border-r border-slate-200 p-6">
-               <div>
-                  <h1>
-                    Flow Insights
-                  </h1>
-                  <p className="mt-1 text-xs uppercase tracking-[0.2em] text-slate-400">
-                    Enterprise Flow
-                  </p>
-               </div>
-               <nav className="mtt-16 space-y-2">
-                <button className="flex w-full items-center gap-3 rounded-xl bg-emerald-50 px-4 py-3 text-sm font-medium text-emerald-900">
-                    Overiew
-                </button>
-                <button className="flex w-full items-center gap-3 px-4 py-3 text-sm text-slate-500">
-                    Analytics
-                </button>
-                <button className="flex w-full items-center gap-3 px-4 py-3 text-sm text-slate-500">
-                    Tasks
-                </button>
-                <button className="flex w-full items-center gap-3 px-4 py-3 text-sm text-slate-500">
-                    Feed
-                </button>
-               </nav>
-            </aside>
-
-            <main className="p-10">
-                <div className="max-w-5xl">
-                   <div>
-                      <p className="text-xs uppercase tracking-[0.2em] text-emerald-700">
-                        Project Alpha Evolution
-                      </p>
-                      <h1 className="mt-6 text-7xl font-semibold leading-none tracking-tight text-slate-950">
-                        Project
-                        <br />
-                        Evolution
-                      </h1>
-                      <p className="mt-8 max-w-md text-lg leading-8 text-slate-500">
-                        Acomprehensive deep-dive into project development,
-                        velocity trends, and realtime contributor synchronization.
-                      </p>
-                   </div>
-                </div>
-            </main>
-
-            <aside className="border border-slate-200 p-6">
-                Realtime feed
-            </aside>
-        </div>
-    </div>
-  )
-}
-
-export default InsightsPage
\ No newline at end of file
diff --git a/frontend/app/insights/analytics/page.tsx b/frontend/app/insights/analytics/page.tsx
index 15bda40..dff1c79 100644
--- a/frontend/app/insights/analytics/page.tsx
+++ b/frontend/app/insights/analytics/page.tsx
@@ -1,8 +1,6 @@
 "use client";
 
 import { useEffect, useMemo, useState } from "react";
-import AnalyticsSidebar from "@/app/components/analytics-comp/AnalyticsSideBar";
-import AnalyticsHeader from "@/app/components/analytics-comp/AnalyticsHeader";
 import PerformanceSummary, {
   type AnalyticsMetric,
   type MemberPerformance,
@@ -111,19 +109,35 @@ export default function InsightsAnalyticsPage() {
   }, [members, query]);
 
   return (
-    <>
-      <AnalyticsHeader
-        sprint={sprint}
-        sprints={Object.keys(data)}
-        query={query}
-        onQueryChange={setQuery}
-        onSprintChange={(nextSprint) => {
-          setSprint(nextSprint);
-          setSelectedMemberId(data[nextSprint][0]?.id || "");
-        }}
-      />
+  <>
+    <div className="border-b border-outline-variant bg-white px-6 py-4">
+      <div className="flex flex-col gap-3 sm:flex-row">
+        <select
+          value={sprint}
+          onChange={(event) => {
+            const nextSprint = event.target.value;
+            setSprint(nextSprint);
+            setSelectedMemberId(data[nextSprint][0]?.id || "");
+          }}
+          className="rounded-lg border border-outline-variant px-3 py-2"
+        >
+          {Object.keys(data).map((item) => (
+            <option key={item} value={item}>
+              {item}
+            </option>
+          ))}
+        </select>
 
-      <div className="flex-1 overflow-y-auto w-full custom-scrollbar">
+        <input
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+          placeholder="Search member, role, or focus..."
+          className="flex-1 rounded-lg border border-outline-variant px-4 py-2"
+        />
+      </div>
+    </div>
+
+    <div className="flex-1 overflow-y-auto w-full custom-scrollbar">
         <div className="p-6 md:p-margin-desktop max-w-container-max mx-auto w-full flex flex-col gap-gutter pb-20 md:pb-8">
           {(isLoading || loadError) && (
             <div className="rounded-lg bg-surface-container-low px-4 py-3 text-sm text-on-surface-variant">
diff --git a/frontend/app/insights/feed/page.tsx b/frontend/app/insights/feed/page.tsx
index 1a16508..cb807db 100644
--- a/frontend/app/insights/feed/page.tsx
+++ b/frontend/app/insights/feed/page.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { useEffect, useMemo, useState } from "react";
-import FeedSidebar from "@/app/components/Feed-comp/FeedSidebar";
 import FeedHeader, { type FeedFilter } from "@/app/components/Feed-comp/FeedHeader";
 import FeedList, { type FeedActivityItem } from "@/app/components/Feed-comp/FeedList";
 import FeedMobileNav from "@/app/components/Feed-comp/FeedMobileNav";
diff --git a/frontend/app/insights/layout.tsx b/frontend/app/insights/layout.tsx
index 9ee39b6..4ff5f54 100644
--- a/frontend/app/insights/layout.tsx
+++ b/frontend/app/insights/layout.tsx
@@ -4,13 +4,16 @@ import InsightsSidebar from "@/app/components/InsightsSidebar";
 
 export default function InsightsLayout({
   children,
-}: { children: React.ReactNode }) {
+}: {
+  children: React.ReactNode;
+}) {
   return (
-    <div className="flex bg-[#f5f7f2] text-[#1d2a20] min-h-screen">
+    <div className="flex min-h-screen">
       <InsightsSidebar />
-      <div className="flex-1 flex flex-col h-screen overflow-hidden relative">
+
+      <main className="flex-1 min-w-0">
         {children}
-      </div>
+      </main>
     </div>
   );
 }
\ No newline at end of file
diff --git a/frontend/app/insights/overview/page.tsx b/frontend/app/insights/overview/page.tsx
index 77d6ac5..3cb1dcc 100644
--- a/frontend/app/insights/overview/page.tsx
+++ b/frontend/app/insights/overview/page.tsx
@@ -1,16 +1,13 @@
 import React from "react";
-import TopHeader from "@/app/components/Tasks-comp/TopHeader";
+
 import OverviewMain from "@/app/components/Overview-comp/OverviewMain";
 
 export default function InsightsOverviewPage() {
   return (
-    <>
-      <TopHeader />
       <div className="flex-1 overflow-y-auto w-full custom-scrollbar">
-        <div className="max-w-container-max mx-auto px-4 md:px-margin-desktop py-12">
+        <div className="w-full p-4 md:p-10">
           <OverviewMain />
         </div>
       </div>
-    </>
   );
 }
\ No newline at end of file
diff --git a/frontend/app/insights/tasks/page.tsx b/frontend/app/insights/tasks/page.tsx
index e4107db..53320dd 100644
--- a/frontend/app/insights/tasks/page.tsx
+++ b/frontend/app/insights/tasks/page.tsx
@@ -1,8 +1,6 @@
 "use client";
 
 import { useEffect, useMemo, useState } from "react";
-import TasksHeader from "@/app/components/Tasks-comp/TasksHeader";
-import TasksSidebar from "@/app/components/Tasks-comp/TasksSideBar";
 import TaskPulseBar, { type TaskPulseStage } from "@/app/components/Tasks-comp/TasksPulsebar";
 import TaskFlow, { type TaskFlowNode } from "@/app/components/Tasks-comp/TasksFlow";
 import TaskHistoryTable, { type TaskHistoryRow } from "@/app/components/Tasks-comp/TaskHistoryTable";
@@ -84,7 +82,6 @@ export default function InsightsTasksPage() {
 
   return (
     <>
-      <TasksHeader />
 
       <div className="flex-1 overflow-y-auto w-full custom-scrollbar">
         <div className="px-4 md:px-margin-desktop pb-12 pt-6 pb-20 md:pb-8">
diff --git a/frontend/app/projects/page.tsx b/frontend/app/projects/page.tsx
index eb10c81..cfe68f9 100644
--- a/frontend/app/projects/page.tsx
+++ b/frontend/app/projects/page.tsx
@@ -6,6 +6,7 @@ import { isSupabaseConfigured, supabase } from "@/app/lib/supabase";
 import { useState, useEffect } from "react";
 import ProjectDialog from "@/app/components/ProjectDialog";
 
+
 type Project = {
   id: string;
   name: string;