diff --git a/src/app/[locale]/product/[slug]/page.jsx b/src/app/[locale]/product/[slug]/page.jsx
index 0e63395..c75732d 100644
--- a/src/app/[locale]/product/[slug]/page.jsx
+++ b/src/app/[locale]/product/[slug]/page.jsx
@@ -217,8 +217,6 @@ export default async function ProductPage({ params }) {
     return (
         <div className="max-w-screen-xl mx-auto px-4 py-8 ">
             {/* <ColorAvg image={product.brand.image.url}/> */}
-
-
             <div className="flex flex-col lg:flex-row gap-8 items-center lg:items-start">
                 <ProductGallery images={product.images} />
                 <div className="flex flex-col gap-4 w-full ">
@@ -227,8 +225,6 @@ export default async function ProductPage({ params }) {
                             <Link href="/" className=" underline inline-flex gap-2">
                                 <Home />
                             </Link>
-
-
                             {
                                 product?.category?.slug &&
                                 <>
@@ -266,7 +262,6 @@ export default async function ProductPage({ params }) {
                             subcategories={product.subcategories}
                         />
 
-
                     </div>
                 </div>
             </div>
diff --git a/src/components/Product/ProductGallery.jsx b/src/components/Product/ProductGallery.jsx
index 9c05c53..941ea3c 100644
--- a/src/components/Product/ProductGallery.jsx
+++ b/src/components/Product/ProductGallery.jsx
@@ -57,7 +57,7 @@ export default function ProductGallery({ images }) {
         />
       </div>
       <div className="mt-4 grid grid-cols-4 gap-1">
-        {images.slice(0, 4).map((image, index) => (
+        {images.slice(0, 4).map((image) => (
           <Image
             key={image.documentId}
             src={image.url || "/placeholder.svg"}
@@ -76,7 +76,7 @@ export default function ProductGallery({ images }) {
           <div className="relative max-w-4xl w-full">
             {/* Close Button */}
             <button
-              className="absolute top-4 right-4 p-2 rounded-full text-white hover:bg-gray-700 transition-colors"
+              className="absolute top-4 right-4 p-2 rounded-full text-white hover:bg-gray-700 transition-colors bg-gray-400 shadow-lg"
               onClick={closeLightbox}
             >
               <X className="h-6 w-6" />
@@ -93,7 +93,7 @@ export default function ProductGallery({ images }) {
 
             {/* Previous Button */}
             <button
-              className="absolute top-1/2 left-4 transform -translate-y-1/2 p-2 rounded-full text-white hover:bg-gray-700 transition-colors"
+              className="absolute top-1/2 left-4 transform -translate-y-1/2 p-2 rounded-full text-white hover:bg-gray-700 transition-colors bg-gray-400 shadow-lg"
               onClick={prevImage}
             >
               <ChevronLeft className="h-8 w-8" />
@@ -101,7 +101,7 @@ export default function ProductGallery({ images }) {
 
             {/* Next Button */}
             <button
-              className="absolute top-1/2 right-4 transform -translate-y-1/2 p-2 rounded-full text-white hover:bg-gray-700 transition-colors"
+              className="absolute top-1/2 right-4 transform -translate-y-1/2 p-2 rounded-full text-white hover:bg-gray-700 transition-colors bg-gray-400 shadow-lg"
               onClick={nextImage}
             >
               <ChevronRight className="h-8 w-8" />