diff --git a/apps/webapp/src/components/Nav/main-nav.tsx b/apps/webapp/src/components/Nav/main-nav.tsx
index 7732ae037..4fca3a47c 100644
--- a/apps/webapp/src/components/Nav/main-nav.tsx
+++ b/apps/webapp/src/components/Nav/main-nav.tsx
@@ -2,127 +2,74 @@
 
 import { BookOpen, ExternalLink, KeyRound, Scroll, Settings2, Share2, SquareGantt } from "lucide-react";
 import { usePathname } from "next/navigation";
-import { MouseEvent, ReactNode, useEffect, useState } from "react";
+import { cn } from "@/lib/utils";
+import { LucideIcon } from "lucide-react";
 
-interface MainNavProps {
-  onLinkClick: (name: string) => void;
-  className: string;
-}
-
-interface NavLinkProps {
-  name: string;
-  content: ReactNode;
-  onClick: (name: string) => void;
-  isSelected: boolean;
+interface NavItem {
+  title: string;
+  href: string;
+  icon: LucideIcon;
   isExternal?: boolean;
-  href?: string;
 }
 
-export function NavLink({
-  name,
-  content,
-  onClick,
-  isSelected,
-  isExternal = false,
-  href = '#'
-}: NavLinkProps): JSX.Element {
-  const navItemClassName = `group flex gap-1 items-center rounded-md px-2 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground cursor-pointer ${isSelected ? 'bg-accent' : 'transparent'
-    } transition-colors`;
-
-  function handleClick(e: MouseEvent<HTMLAnchorElement>): void {
-    if (!isExternal) {
-      e.preventDefault();
-      onClick(name);
-    }
+const items: NavItem[] = [
+  {
+    title: "Connections",
+    href: "connections",
+    icon: Share2
+  },
+  {
+    title: "Events",
+    href: "events",
+    icon: Scroll
+  },
+  {
+    title: "Configuration",
+    href: "configuration",
+    icon: Settings2
+  },
+  {
+    title: "API Keys",
+    href: "api-keys",
+    icon: KeyRound
+  },
+  {
+    title: "Docs",
+    href: "https://docs.panora.dev/",
+    icon: BookOpen,
+    isExternal: true
   }
-
-  return (
-    <a
-      href={isExternal ? href : '#'}
-      target={isExternal ? '_blank' : undefined}
-      rel={isExternal ? 'noopener noreferrer' : undefined}
-      className={navItemClassName}
-      onClick={handleClick}
-    >
-      {content}
-      {isExternal && <ExternalLink className="w-4" />}
-    </a>
-  );
-}
+];
 
 export function MainNav({
-  onLinkClick,
   className,
+  onLinkClick,
   ...props
-}: MainNavProps) {
-  const [selectedItem, setSelectedItem] = useState<string>("");
+}: React.HTMLAttributes<HTMLElement> & {
+  onLinkClick: (page: string) => void;
+}) {
   const pathname = usePathname();
 
-  useEffect(() => {
-    setSelectedItem(pathname.substring(1))
-  }, [pathname])
-
   return (
-    <nav
-      className={`grid items-start ${className}`}
-      {...props}
-    >
-      {navItems.map(({ name, content, isExternal, href }) => (
-        <NavLink
-          key={name}
-          name={name}
-          content={content}
-          onClick={onLinkClick}
-          isSelected={selectedItem === name}
-          isExternal={isExternal}
-          href={href}
-        />
+    <nav className={cn("flex flex-col space-y-1", className)} {...props}>
+      {items.map((item) => (
+        <div
+          key={item.href}
+          onClick={() => onLinkClick(item.href)}
+          className={cn(
+            "flex items-center rounded-md px-3 py-2 text-sm font-medium cursor-pointer",
+            "transition-colors",
+            "hover:bg-accent hover:text-accent-foreground",
+            pathname === `/${item.href}`
+              ? "bg-accent text-accent-foreground"
+              : "text-muted-foreground hover:text-primary"
+          )}
+        >
+          <item.icon className="mr-2 h-4 w-4" />
+          <span>{item.title}</span>
+          {item.isExternal && <ExternalLink className="ml-2 h-4 w-4" />}
+        </div>
       ))}
     </nav>
   );
 }
-
-const navItems: Omit<NavLinkProps, 'onClick' | 'isSelected'>[] = [
-  {
-    name: 'connections',
-    content: (
-      <>
-        Connections
-      </>
-    ),
-  },
-  {
-    name: 'events',
-    content: (
-      <>
-        Events
-      </>
-    ),
-  },
-  {
-    name: 'configuration',
-    content: (
-      <>
-        Configuration
-      </>
-    ),
-  },
-  {
-    name: 'api-keys',
-    content: (
-      <>
-        API Keys
-      </>
-    ),
-  },
-  {
-    name: 'docs',
-    content: (
-      <>
-        <p className="pr-2">Docs</p>
-      </>
-    ),
-    isExternal: true,
-    href: "https://docs.panora.dev/",
-  },
-];
diff --git a/apps/webapp/src/components/RootLayout/index.tsx b/apps/webapp/src/components/RootLayout/index.tsx
index 4ea5f5493..366ac8c07 100644
--- a/apps/webapp/src/components/RootLayout/index.tsx
+++ b/apps/webapp/src/components/RootLayout/index.tsx
@@ -63,87 +63,71 @@ export const RootLayout = ({children}:{children:React.ReactNode}) => {
 
   return (
     <>        
-      {/* <div className="fixed top-0 left-0 right-0 supports-backdrop-blur:bg-background/60 border-b bg-background/95 backdrop-blur z-20">
-          <nav className="h-14 flex items-center justify-between px-4">
-            <div className="hidden lg:block">
+      <div className="flex h-screen overflow-hidden">
+        <nav
+          className={cn(
+            "relative hidden h-screen border-r lg:block w-72",
+            "bg-muted/50"
+          )}
+        >
+          <div className='flex items-center justify-center min-w-full'>
+            <div className="hidden lg:block pt-5">
               <Link href='/'>
-                {theme == "light" ? <img src="/logo-panora-black.png" className='w-14' /> : <img src="/logo-panora-white-hq.png" className='w-14' />}
+                {theme == "light" ? 
+                  <img src="/logo-panora-black.png" className='w-14' /> : 
+                  <img src="/logo-panora-white-hq.png" className='w-14' />
+                }
               </Link>
             </div>
-            <div className={cn("block lg:!hidden")}>
-              <SmallNav onLinkClick={handlePageChange} />
-            </div>
-
-            <div className="flex items-center gap-2">
-              <UserNav />
-              <ThemeToggle />
-            </div>
-          </nav>
-        </div> */}
-          <div className="flex h-screen overflow-hidden">
-              
-            <nav
-              className={cn(`relative hidden h-screen border-r lg:block w-72`)}
-            >
-              <div className='flex items-center justify-center min-w-full'>
-                <div className="hidden lg:block pt-5">
-                      <Link href='/'>
-                        {theme == "light" ? <img src="/logo-panora-black.png" className='w-14' /> : <img src="/logo-panora-white-hq.png" className='w-14' />}
-                      </Link>
-                </div>
-
-              </div>
-              
-              <div className="space-y-4 py-4 pt-10">
-                <div className="px-3 py-2">
-                  <div className="space-y-3">
-                    <div className='flex gap-2 items-center'>
-                      <TeamSwitcher className='w-40 ml-3' projects={projectsData? projectsData : []}/>
-                      <div 
-                        className="cursor-pointer" 
-                        onClick={handleCopyRight}
-                    >
-                        <TooltipProvider delayDuration={0}>
-                            <Tooltip>
-                            <TooltipTrigger asChild>
-                                <Button size="sm" variant="outline">{copiesProjectID ? (
-                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="15" height="15" fill="#ffffff">
-                                        <path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/>
-                                    </svg>
-                                    ) : (
-                                    <>
-                                        <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                        <path d="M5 2V1H10V2H5ZM4.75 0C4.33579 0 4 0.335786 4 0.75V1H3.5C2.67157 1 2 1.67157 2 2.5V12.5C2 13.3284 2.67157 14 3.5 14H11.5C12.3284 14 13 13.3284 13 12.5V2.5C13 1.67157 12.3284 1 11.5 1H11V0.75C11 0.335786 10.6642 0 10.25 0H4.75ZM11 2V2.25C11 2.66421 10.6642 3 10.25 3H4.75C4.33579 3 4 2.66421 4 2.25V2H3.5C3.22386 2 3 2.22386 3 2.5V12.5C3 12.7761 3.22386 13 3.5 13H11.5C11.7761 13 12 12.7761 12 12.5V2.5C12 2.22386 11.7761 2 11.5 2H11Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path>
-                                        </svg>
-                                    </>
-                                    )}
-                                </Button>
-                            </TooltipTrigger>
-                            <TooltipContent>
-                                <p className="text-sm">Copy Project ID</p>
-                            </TooltipContent>
-                            </Tooltip>
-                        </TooltipProvider>
-                    </div>
-                    </div>
-                    <p className='text-xs cursor-default dark:text-gray-400 text-gray-950 font-semibold pt-5'>General</p>
-                    <MainNav onLinkClick={handlePageChange} className=''/>
+          </div>
+          
+          <div className="space-y-4 py-4 pt-10">
+            <div className="px-3 py-2">
+              <div className="space-y-3">
+                <div className='flex gap-2 items-center'>
+                  <TeamSwitcher className='w-40 ml-3' projects={projectsData? projectsData : []}/>
+                  <div 
+                    className="cursor-pointer" 
+                    onClick={handleCopyRight}
+                  >
+                    <TooltipProvider delayDuration={0}>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <Button size="sm" variant="outline">
+                            {copiesProjectID ? (
+                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="15" height="15" fill="#ffffff">
+                                <path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/>
+                              </svg>
+                            ) : (
+                              <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M5 2V1H10V2H5ZM4.75 0C4.33579 0 4 0.335786 4 0.75V1H3.5C2.67157 1 2 1.67157 2 2.5V12.5C2 13.3284 2.67157 14 3.5 14H11.5C12.3284 14 13 13.3284 13 12.5V2.5C13 1.67157 12.3284 1 11.5 1H11V0.75C11 0.335786 10.6642 0 10.25 0H4.75ZM11 2V2.25C11 2.66421 10.6642 3 10.25 3H4.75C4.33579 3 4 2.66421 4 2.25V2H3.5C3.22386 2 3 2.22386 3 2.5V12.5C3 12.7761 3.22386 13 3.5 13H11.5C11.7761 13 12 12.7761 12 12.5V2.5C12 2.22386 11.7761 2 11.5 2H11Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"/>
+                              </svg>
+                            )}
+                          </Button>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          <p className="text-sm">Copy Project ID</p>
+                        </TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
                   </div>
                 </div>
+                <p className='text-xs cursor-default dark:text-gray-400 text-gray-950 font-semibold pt-5'>General</p>
+                <MainNav onLinkClick={handlePageChange} className=''/>
               </div>
-
-              <div className='absolute bottom-0 left-0 w-full cursor-pointer'>
-                <UserNav/>
-              </div>
-            </nav>
-            <div className={cn("block lg:!hidden")}>
-              <SmallNav onLinkClick={handlePageChange} />
             </div>
-            <main className="w-full overflow-y-scroll">{children}</main>
+          </div>
 
-        </div>
-     </>
+          <div className='absolute bottom-0 left-0 w-full cursor-pointer'>
+            <UserNav/>
+          </div>
+        </nav>
 
-  )
-  
+        <div className={cn("block lg:!hidden")}>
+          <SmallNav onLinkClick={handlePageChange} />
+        </div>
+        <main className="w-full overflow-y-scroll">{children}</main>
+      </div>
+    </>
+  );
 };
\ No newline at end of file