diff --git a/src/app/[locale]/product/[slug]/page.jsx b/src/app/[locale]/product/[slug]/page.jsx
index 30e9979..d2b1819 100644
--- a/src/app/[locale]/product/[slug]/page.jsx
+++ b/src/app/[locale]/product/[slug]/page.jsx
@@ -246,12 +246,9 @@ export default async function ProductPage({ params }) {
                             showPrice={product.showPrice}
                             category={product.category}
                             summery={product.summery}
+                            brand={product.brand}
                         />
-                        {
-                            product.brand && (
-                                <BrandInfo brand={product.brand} />
-                            )
-                        }
+                       
 
                     </div>
                 </div>
diff --git a/src/app/[locale]/products/[category]/page.jsx b/src/app/[locale]/products/[category]/page.jsx
index 1ecea0d..602b9e8 100644
--- a/src/app/[locale]/products/[category]/page.jsx
+++ b/src/app/[locale]/products/[category]/page.jsx
@@ -1,3 +1,4 @@
+import graphql from "src/utils/graphql";
 import CategoriesData from "src/view/Categories";
 
 
@@ -61,12 +62,12 @@ query CategoriesAndBrands($locale:I18NLocaleCode,$slug:String!) {
 
 `
 export async function generateMetadata({ params }) {
-    const { locale, slug } = await params;
+    const { locale, category } = await params;
 
     // Fetch product SEO data from Strapi GraphQL API
     const data = await graphql(gql_metadata, {
         locale,
-        slug,
+        slug:category,
     });
 
     const productSEO = data?.categories?.[0]?.seo || data?.brands?.[0]?.seo;
diff --git a/src/components/NavBar/index.jsx b/src/components/NavBar/index.jsx
index 2cac028..ee137b7 100644
--- a/src/components/NavBar/index.jsx
+++ b/src/components/NavBar/index.jsx
@@ -287,6 +287,9 @@ const Navbar = ({ items }) => {
                                 setResponsiveNavBarItemStep(index);
 
                                 setActiveStepNavbar(e.documentId);
+                              }else{
+                                setClosNavbar(false)
+                                router.push(e.link)
                               }
                             }}
                           >
@@ -334,7 +337,7 @@ const Navbar = ({ items }) => {
                                     className="bg-primary-50 rounded-lg my-1 p-2 "
                                     key={index}
                                   >
-                                    <p className="mb-0 text-sm">{s.name}</p>
+                                    <p className="mb-0 text-sm">{s.title}</p>
                                   </div>
                                 </Link>
                               ))}
diff --git a/src/components/Product/ProductGallery.jsx b/src/components/Product/ProductGallery.jsx
index ce47dda..6c8dbba 100644
--- a/src/components/Product/ProductGallery.jsx
+++ b/src/components/Product/ProductGallery.jsx
@@ -30,11 +30,12 @@ export default function ProductGallery({ images }) {
     <div className="max-w-[500px] lg:min-w-[500px]">
       <div className="aspect-w-1 aspect-h-1 w-full rounded-lg overflow-hidden">
         <Image
+         
           src={selectedImage.url || "/placeholder.svg"}
           alt={selectedImage.alternativeText ?? ""}
           width={500}
           height={500}
-          className="object-contain cursor-pointer aspect-square "
+          className="object-contain cursor-pointer aspect-square border"
           onClick={() => openLightbox(images.findIndex((img) => img.documentId === selectedImage.documentId))}
         />
       </div>
@@ -47,7 +48,7 @@ export default function ProductGallery({ images }) {
             width={100}
             height={100}
             className={`object-cover cursor-pointer rounded-lg overflow-hidden ${
-              selectedImage.documentId === image.documentId ? "ring-2 ring-primary" : ""
+              selectedImage.documentId === image.documentId ? "ring-2 ring-primary/50" : ""
             }`}
             onClick={() => setSelectedImage(image)}
           />
diff --git a/src/components/Product/ProductInfo.jsx b/src/components/Product/ProductInfo.jsx
index 1b2962a..6609dcc 100644
--- a/src/components/Product/ProductInfo.jsx
+++ b/src/components/Product/ProductInfo.jsx
@@ -8,9 +8,10 @@ import Link from "next/link";
 import ContactModal from "../ContactUs";
 import { useState } from "react";
 import { useTranslations } from "next-intl";
+import BrandInfo from "./BrandInfo";
 
 
-export default function ProductInfo({ title, price, discount, showPrice, category,summery }) {
+export default function ProductInfo({ title, price, discount, showPrice, category, summery, brand }) {
 
   const locale = useLocale()
 
@@ -28,72 +29,83 @@ export default function ProductInfo({ title, price, discount, showPrice, categor
     setOpen(false);
   }
 
-    const t = useTranslations("ContactModal")
+  const t = useTranslations("ContactModal")
 
   return (
-    <div className="">
+    <div className="w-full">
       <ContactModal close={closeModal} open={open} />
-      <h1 className="text-3xl font-bold">{title}</h1>
-      <Link href={`/products/${category.slug}`} className="mt-4 flex items-center">
-        <span className={`inline-flex items-center rounded-md bg-gray-100 px-2.5 py-0.5 text-sm font-medium text-gray-800 ltr`}>
-        <CategoryIcon className="h-4 w-4 mx-1" />
-          {category.title}
-        </span>
-      </Link>
-      <p>
-        {
-          summery
-        }
-      </p>
-      {showPrice && (
-        <div className="mt-4">
-          {discount ? (
-            <div className="flex items-center">
-              <span className="text-2xl font-bold text-primary">
-                {locale === "ar-OM" ? (
-                  <>
-                    {discountedPrice.toFixed(2)} {currencySymbol}
-                  </>
-                ) : (
-                  <>
-                    {currencySymbol}
-                    {discountedPrice.toFixed(2)}
-                  </>
-                )}
-              </span>
-              <span className="ml-2 text-lg text-gray-500 line-through">
-                {locale === "ar-OM" ? (
-                  <>
-                    {price.toFixed(2)} {currencySymbol}
-                  </>
-                ) : (
-                  <>
-                    {currencySymbol}
-                    {price.toFixed(2)}
-                  </>
-                )}
-              </span>
-              <span className="ml-2 inline-flex items-center rounded-md bg-red-100 px-2.5 py-0.5 text-sm font-medium text-red-800">
-                {discount}% OFF
-              </span>
-            </div>
-          ) : (
-            <span className="text-2xl font-bold text-primary">
-              {locale === "ar-OM" ? (
-                <>
-                  {price.toFixed(2)} {currencySymbol}
-                </>
-              ) : (
-                <>
-                  {currencySymbol}
-                  {price.toFixed(2)}
-                </>
-              )}
+      <div className="flex items-start w-full justify-between">
+        <div>
+          <h1 className="text-3xl font-bold">{title}</h1>
+          <Link href={`/products/${category.slug}`} className="mt-4 flex items-center">
+            <span className={`inline-flex items-center rounded-md bg-gray-100 px-2.5 py-0.5 text-sm font-medium text-gray-800 ltr`}>
+              <CategoryIcon className="h-4 w-4 mx-1" />
+              {category.title}
             </span>
+          </Link>
+          <p className="text-sm opacity-75">
+            {
+              summery
+            }
+          </p>
+          {showPrice && (
+            <div className="mt-4">
+              {discount ? (
+                <div className="flex items-center">
+                  <span className="text-2xl font-bold text-primary">
+                    {locale === "ar-OM" ? (
+                      <>
+                        {discountedPrice.toFixed(2)} {currencySymbol}
+                      </>
+                    ) : (
+                      <>
+                        {currencySymbol}
+                        {discountedPrice.toFixed(2)}
+                      </>
+                    )}
+                  </span>
+                  <span className="ml-2 text-lg text-gray-500 line-through">
+                    {locale === "ar-OM" ? (
+                      <>
+                        {price.toFixed(2)} {currencySymbol}
+                      </>
+                    ) : (
+                      <>
+                        {currencySymbol}
+                        {price.toFixed(2)}
+                      </>
+                    )}
+                  </span>
+                  <span className="ml-2 inline-flex items-center rounded-md bg-red-100 px-2.5 py-0.5 text-sm font-medium text-red-800">
+                    {discount}% OFF
+                  </span>
+                </div>
+              ) : (
+                <span className="text-2xl font-bold text-primary">
+                  {locale === "ar-OM" ? (
+                    <>
+                      {price.toFixed(2)} {currencySymbol}
+                    </>
+                  ) : (
+                    <>
+                      {currencySymbol}
+                      {price.toFixed(2)}
+                    </>
+                  )}
+                </span>
+              )}
+            </div>
           )}
         </div>
-      )}
-      <div className="mt-10">
+        <div>
+          {
+            brand && (
+              <BrandInfo brand={brand} />
+            )
+          }
+        </div>
+      </div>
+      <div className="mt-10 w-full border-t pt-10">
         {/* Replaced Button with Tailwind CSS */}
         <button onClick={openModal} className="w-full lg:w-fit px-8 ltr flex items-center justify-center py-2 bg-primary text-white rounded-md hover:bg-primary-dark transition-colors">
           <ShoppingCart className="mr-2 h-4 w-4" /> {t("cta")}
diff --git a/src/components/Product/ProductRelated.jsx b/src/components/Product/ProductRelated.jsx
index 1d18036..6a6874d 100644
--- a/src/components/Product/ProductRelated.jsx
+++ b/src/components/Product/ProductRelated.jsx
@@ -55,13 +55,16 @@ query Products_connection(
 
 const ProductRelated = ({ category, brand }) => {
   const [products, setProducts] = React.useState(null)
+
   const fetchProducts = async () => {
     const { products_connection: { nodes } } = await graphql(gql, {
-      categoryId: "",
-      brandId: brand.documentId,
+      categoryId: brand.documentId ? "" : category.documentId,
+      brandId: brand.documentId ? brand.documentId : "",
       locale: "en"
     })
+
     setProducts(nodes)
+
   }
 
   useEffect(() => {
@@ -71,12 +74,12 @@ const ProductRelated = ({ category, brand }) => {
 
   const t = useTranslations("PDP")
   return (
- 
-      <div>
-     
+
+    <div>
+
       {
         products && products.length > 0 && (
-          <ProductCarousel products={products} title={t("productRelated")} showMoreLink={`/products/${brand.slug}`}  />
+          <ProductCarousel products={products} title={t("productRelated")} showMoreLink={`/products/${brand.slug}`} />
         )
       }
     </div>