diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index 3e34acbb..a6633a34 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -5,6 +5,7 @@ import {
   FaCheckCircle,
   FaClock,
   FaUserShield,
+  FaAward,
 } from "react-icons/fa"; // Icons for various info
 import { useState, useEffect } from "react";
 
@@ -32,24 +33,23 @@ const Sidebar: React.FC<SidebarProps> = ({ event, onClose, registrationLink }) =
   // Trigger sidebar to open with animation when event is passed
   useEffect(() => {
     if (event) {
-      setIsVisible(true);
-    } else {
-      setIsVisible(false);
+      setIsVisible(false); 
+      setTimeout(() => setIsVisible(true), 400); 
     }
-  }, [event]);
+  }, [event?.id]);
 
   if (!event) return null; // Return nothing if no event is selected
 
   return (
     <div
-      className={`fixed top-0 right-0 w-96 h-full bg-gray-900 shadow-xl z-50 overflow-y-auto 
+      className={`fixed top-0 right-0 w-96 h-full bg-gradient-to-b from-gray-900 via-gray-900 to-black shadow-xl z-50 overflow-y-auto 
         transition-transform duration-300 ease-in-out transform 
         ${isVisible ? "translate-x-0" : "translate-x-full"}`}
     >
       <div className="relative p-6 text-white">
         {/* Close Button */}
         <button
-          className="absolute top-4 right-4 text-gray-400 hover:text-white focus:outline-none"
+          className="absolute top-4 right-4 text-red-400 hover:text-red-300 focus:outline-none"
           onClick={() => {
             setIsVisible(false);
             setTimeout(onClose, 300); // Delay the onClose function to allow transition to complete
@@ -59,72 +59,72 @@ const Sidebar: React.FC<SidebarProps> = ({ event, onClose, registrationLink }) =
         </button>
 
         {/* Event Name */}
-        <h3 className="text-2xl font-semibold mb-4 flex items-center">
-          <FaCheckCircle className="text-green-400 mr-2" /> {event.eventName}
+        <h3 className="text-2xl font-semibold mt-2 mb-4 flex items-center">
+          <FaAward className="text-green-400 mr-2" /> {event.eventName}
         </h3>
 
         {/* Image */}
         {event.imageURL ? (
-          <div className="mb-4 rounded-lg overflow-hidden shadow-lg">
+          <div className="mb-4 relative rounded-xl overflow-hidden shadow-[0_0px_12px_rgba(16,185,129,0.25)] border-[2px] border-[#10b98180]">
             <Image
               src={event.imageURL}
               alt={event.eventName}
               width={360}
               height={200}
-              className="object-cover rounded-lg"
+              className="object-cover w-full h-full rounded-xl shadow-lg transition-transform duration-220 hover:scale-[103%] hover:rotate-[0.5deg]"
               priority={true}
-            />
+            />          
           </div>
         ) : (
-          <div className="bg-gray-700 h-48 mb-4 rounded-lg flex items-center justify-center">
+          <div className="bg-gray-700 h-48 mb-4 rounded-t-xl flex items-center justify-center">
             <span className="text-gray-400">No image available</span>
           </div>
         )}
 
         {/* Event Details */}
-        <div className="bg-gray-800 p-4 rounded-lg mb-4 shadow-md">
+        <div className="bg-[#0b0b0b] p-4 rounded-t-xl mb-4 shadow-md">
           <div className="flex items-center mb-3">
             <FaCalendarAlt className="text-blue-500 mr-2" />
-            <p className="text-gray-200">Event Date: {event.eventDate}</p>
+            <p className="text-gray-300">Event Date: {event.eventDate}</p>
           </div>
           <div className="flex items-center mb-3">
             <FaClock className="text-yellow-500 mr-2" />
-            <p className="text-gray-200">
+            <p className="text-gray-300">
               Last Registration Date: {event.lastDateOfRegistration}
             </p>
           </div>
           <div className="flex items-center">
-            <FaMapMarkerAlt className="text-red-500 mr-2" />
-            <p className="text-gray-200">Location: Bengaluru, Karnataka</p>{" "}
+            <FaMapMarkerAlt className="text-green-400 mr-2" />
+            <p className="text-gray-300">Location: Bengaluru, Karnataka</p>{" "}
             {/* Can adjust dynamically if available */}
           </div>
         </div>
 
         {/* Registration Section */}
-        <div className="bg-gray-800 p-4 rounded-lg mb-4 shadow-md">
           
           {event.lastDateOfRegistration >= currentDate && registrationLink && (
-            <a
-              href={registrationLink}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="w-full"
-            >
-              <button
-                className="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg transition duration-200 shadow-md"
+            <div className="bg-[#0b0b0b] p-4 rounded-lg mb-4 shadow-md">
+              <a
+                href={registrationLink}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="w-full"
               >
-                Register Now
-              </button>
-            </a>
+                <button
+                  className="w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded-xl transition duration-200 shadow-md"
+                >
+                  Register Now
+                </button>
+              </a>
+            </div>
           )}
-        </div>
 
         {/* About Event */}
-        <div className="bg-gray-800 p-4 rounded-lg shadow-md">
-          <h4 className="text-lg font-semibold mb-2 text-gray-100">
+        <div className="bg-[#0b0b0b] p-4 rounded-b-xl shadow-md">
+          <h4 className="text-lg font-semibold mb-2 text-green-400">
             About Event
           </h4>
-          <p className="text-gray-300">{event.description}</p>
+          <p className="text-gray-500">{event.description}</p>
         </div>
       </div>
     </div>