diff --git a/components/Recent_Design.tsx b/components/Recent_Design.tsx
index 9d2adc9..13974e6 100644
--- a/components/Recent_Design.tsx
+++ b/components/Recent_Design.tsx
@@ -31,7 +31,7 @@ const recentDesigns = [
  */
 export default function RecentDesign() {
   return (
-    <div className="border-t md:border-t-0 md:border-r border-[#D9D7D7] w-full md:w-[300px] flex flex-col h-auto md:h-screen justify-between p-4 md:px-4 md:pt-6 md:pb-4">
+    <div className="bg-white border-t md:border-t-0 md:border-r border-[#D9D7D7] w-full md:w-[300px] flex flex-col h-auto md:h-screen justify-between p-4 md:px-4 md:pt-6 md:pb-4">
       {/* Logo and Title Section */}
       <div>
         <div className="flex flex-col items-center mb-6 md:mb-12">
diff --git a/components/Side_bar.tsx b/components/Side_bar.tsx
index 7097d18..cae68a7 100644
--- a/components/Side_bar.tsx
+++ b/components/Side_bar.tsx
@@ -2,6 +2,7 @@
 
 import Image from "next/image";
 import { usePathname } from "next/navigation";
+import { useState } from "react";
 
 // Navigation links configuration
 const links = [
@@ -23,36 +24,46 @@ const links = [
  */
 export default function Sidebar() {
   const pathname = usePathname();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
 
   return (
-    <div className="bg-[#050616] w-full md:w-[80px] h-auto md:h-screen">
-      <div className="flex md:flex-col items-center justify-between md:justify-start gap-4 p-4 md:pt-10">
+    <div className={`bg-[#050616] w-full md:w-[80px] h-auto md:h-screen transition-all duration-300 ease-in-out ${isMenuOpen ? 'md:w-[200px]' : ''}`}>
+      <div className="flex md:flex-col items-center justify-center gap-4 p-4 md:pt-10">
         {/* Menu Icon */}
-        <Image 
-          src="/menu-icon.png" 
-          alt="logo" 
-          width={24} 
-          height={24} 
-          className="cursor-pointer" 
-        />
-        
-        {/* Navigation Links */}
-        <div className="flex md:flex-col items-center md:items-start gap-4 md:gap-6 md:mt-10 w-full md:w-auto px-4">
+        <div className="flex md:flex-col items-center gap-4 md:gap-6">
+          <div 
+            className="cursor-pointer hover:opacity-80 transition-opacity duration-200"
+            onClick={() => setIsMenuOpen(!isMenuOpen)}
+          >
+            <Image 
+              src="/menu-icon.png" 
+              alt="logo" 
+              width={24} 
+              height={24} 
+            />
+          </div>
+          
+          {/* Navigation Links */}
           {links.map((link) => (
-            <div key={link.path} className="flex flex-col items-center md:items-start w-auto">
+            <div 
+              key={link.path} 
+              className={`flex flex-col items-center cursor-pointer group`}
+            >
               {/* Link Icon Container */}
-              <div className={`p-2 rounded-lg ${pathname === link.path ? 'bg-[#1a1c2b]' : ''}`}>
+              <div className={`p-2 rounded-lg transition-colors duration-200 ${pathname === link.path ? 'bg-[#1a1c2b]' : 'group-hover:bg-[#1a1c2b]/50'}`}>
                 <Image 
                   src={link.icon} 
                   alt={link.label} 
                   width={24} 
                   height={24} 
-                  className="cursor-pointer" 
+                  className="group-hover:opacity-80 transition-opacity duration-200" 
                 />
               </div>
               
               {/* Link Label */}
-              <p className="text-white text-xs mt-1 hidden md:block">{link.label}</p>
+              <p className={`text-white text-xs mt-1 transition-all duration-300 ease-in-out ${isMenuOpen ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-4'} group-hover:opacity-80`}>
+                {link.label}
+              </p>
             </div>
           ))}
         </div>