diff --git a/components/Lightbox.tsx b/components/Lightbox.tsx
index 914c8788..6f9f7b63 100644
--- a/components/Lightbox.tsx
+++ b/components/Lightbox.tsx
@@ -1,5 +1,4 @@
-/* eslint-disable-next-line @typescript-eslint/no-unused-expressions */
-`use client`;
+'use client';
 
 import React, { useEffect } from 'react';
 import Image from 'next/image';
@@ -37,10 +36,10 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
   };
 
   return (
-    <div className="fixed inset-0 z-[9999] bg-black/90 flex items-center justify-center p-4">
+    <div className="fixed inset-0 z-[9999] bg-black/90 flex items-center justify-center p-4 animate-in fade-in duration-300">
       <button
         onClick={onClose}
-        className="absolute top-6 right-6 text-white text-3xl hover:text-accent transition-colors z-[10000] rounded-full w-12 h-12 flex items-center justify-center hover:bg-white/20"
+        className="absolute top-6 right-6 text-white text-3xl hover:text-[#011dff] transition-colors z-[10000] rounded-full w-12 h-12 flex items-center justify-center hover:bg-white/10"
         aria-label="Close lightbox"
       >
         ×
@@ -48,7 +47,7 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
       
       <button
         onClick={prevImage}
-        className="absolute left-6 top-1/2 -translate-y-1/2 text-white text-4xl hover:text-accent transition-colors w-12 h-12 flex items-center justify-center hover:bg-white/20 rounded-full z-[10000]"
+        className="absolute left-6 top-1/2 -translate-y-1/2 text-white text-4xl hover:text-[#011dff] transition-colors w-12 h-12 flex items-center justify-center hover:bg-white/10 rounded-full z-[10000]"
         aria-label="Previous image"
       >
         ‹
@@ -56,21 +55,21 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
       
       <button
         onClick={nextImage}
-        className="absolute right-6 top-1/2 -translate-y-1/2 text-white text-4xl hover:text-accent transition-colors w-12 h-12 flex items-center justify-center hover:bg-white/20 rounded-full z-[10000]"
+        className="absolute right-6 top-1/2 -translate-y-1/2 text-white text-4xl hover:text-[#011dff] transition-colors w-12 h-12 flex items-center justify-center hover:bg-white/10 rounded-full z-[10000]"
         aria-label="Next image"
       >
         ›
       </button>
 
-      <div className="relative max-w-6xl max-h-[90vh] w-full h-full flex items-center justify-center">
+      <div className="relative max-w-6xl max-h-[90vh] w-full h-full flex items-center justify-center animate-in slide-in-from-bottom-4 duration-500">
         <Image
           src={images[currentIndex]}
           alt={`Gallery image ${currentIndex + 1}`}
           fill
-          className="object-contain max-h-[90vh] max-w-full"
+          className="object-contain max-h-[90vh] max-w-full shadow-2xl"
           unoptimized
         />
-        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 bg-black/50 text-white px-6 py-3 rounded-full text-sm font-medium">
+        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 bg-black/60 backdrop-blur-md text-white px-6 py-3 rounded-full text-sm font-medium border border-white/10">
           {currentIndex + 1} / {images.length}
         </div>
       </div>