diff --git a/frontend/components/layout/Sidebar.tsx b/frontend/components/layout/Sidebar.tsx
index 1786640..ca61bec 100644
--- a/frontend/components/layout/Sidebar.tsx
+++ b/frontend/components/layout/Sidebar.tsx
@@ -2,6 +2,7 @@
 
 import React from 'react';
 import Link from 'next/link';
+import { useEffect, useState } from 'react';
 import { usePathname } from 'next/navigation';
 import {
   HomeIcon,
@@ -59,9 +60,23 @@ const navigation: NavSection[] = [
 ];
 
 export const Sidebar: React.FC = () => {
+
+  // Add state to handle client-side rendering
+  const [isMounted, setIsMounted] = useState(false);
+  
+  // Use useEffect to mark component as mounted
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
   const pathname = usePathname();
   const { collapsed, toggleSidebar } = useSidebar();
 
+  // Return null or loading state until mounted
+  if (!isMounted) {
+    return <aside className="fixed left-0 top-0 h-screen w-[280px] bg-white dark:bg-slate border-r border-gray-200 dark:border-slate-light" />;
+  }
+
   return (
     <aside
       className={cn(