diff --git a/public/images/tick.svg b/public/images/tick.svg
new file mode 100644
index 0000000..563f4a5
--- /dev/null
+++ b/public/images/tick.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.91602 5.99987L6.63268 10.7165L16.0827 1.2832" stroke="white" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/app/globals.css b/src/app/globals.css
index 336fda5..fe3a65e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -240,3 +240,7 @@ textarea.place-black::placeholder {
 .dltr {
   direction: ltr;
 }
+
+.filterBlack {
+  filter: brightness(0) saturate(100%);
+}
diff --git a/src/app/product/components/BaseInformation.tsx b/src/app/product/components/BaseInformation.tsx
index 3b72df1..9ad2505 100644
--- a/src/app/product/components/BaseInformation.tsx
+++ b/src/app/product/components/BaseInformation.tsx
@@ -1,16 +1,27 @@
 'use client'
 import { Star1 } from 'iconsax-react'
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import { Product } from '@/types/product.types'
+import Image from 'next/image'
+import { clx } from '@/helpers/utils'
 
 interface BaseInformationProps {
     product: Product
 }
 
 const BaseInformation: FC<BaseInformationProps> = ({ product }) => {
-    const defaultVariant = product.default_variant
     const brand = product.brand
-    const size = defaultVariant.size
+
+    // State برای انتخاب variant ها
+    const [selectedSize, setSelectedSize] = useState<string | null>(
+        product.variants.find(v => v.size)?.size?._id?.toString() || null
+    )
+    const [selectedColor, setSelectedColor] = useState<string | null>(
+        product.variants.find(v => v.color)?.color?._id?.toString() || null
+    )
+    const [selectedMeterage, setSelectedMeterage] = useState<string | null>(
+        product.variants.find(v => v.meterage)?.meterage?._id?.toString() || null
+    )
 
     return (
         <div className='flex-1'>
@@ -37,20 +48,77 @@ const BaseInformation: FC<BaseInformationProps> = ({ product }) => {
                 </div>
             </div>
 
-            <div className='mt-4 sm:mt-6 text-[#333333] text-sm sm:text-base'>
-                اندازه : {size.value}
-            </div>
+            {/* نمایش variant ها */}
+            <div className='mt-4 sm:mt-6'>
+                {/* متراژ */}
+                <div className='flex flex-wrap items-center gap-1.5 mb-4'>
+                    {product.variants.map((variant) => {
+                        if (variant.meterage) {
+                            const isSelected = selectedMeterage === variant.meterage._id.toString()
+                            return (
+                                <button
+                                    key={variant._id}
+                                    onClick={() => setSelectedMeterage(variant.meterage!._id.toString())}
+                                    className={`text-[13px] px-4 py-2 border border-border rounded-lg whitespace-nowrap transition-colors ${isSelected
+                                        ? 'bg-primary text-white border-primary'
+                                        : 'hover:border-primary/50'
+                                        }`}
+                                >
+                                    {variant.meterage.value}
+                                </button>
+                            )
+                        }
+                        return null
+                    })}
+                </div>
 
-            <div className='mt-2 flex gap-1.5'>
-                {product.variants.map((variant, index) => (
-                    <div
-                        key={variant._id}
-                        className='size-6 sm:size-8 rounded-full bg-gray-200 flex items-center justify-center text-xs font-medium'
-                        title={variant.size.value}
-                    >
-                        {index + 1}
-                    </div>
-                ))}
+                {/* رنگ ها */}
+                <div className='flex flex-wrap items-center gap-1.5 mb-4'>
+                    {product.variants.map((variant) => {
+                        if (variant.color) {
+                            const isSelected = selectedColor === variant.color._id.toString()
+                            return (
+                                <button
+                                    key={variant._id}
+                                    onClick={() => setSelectedColor(variant.color!._id.toString())}
+                                    className={clx(
+                                        'size-10 rounded-full flex justify-center items-center',
+                                        variant.color.hexColor === '#FFFFFF' ? 'border border-border' : ''
+                                    )}
+                                    style={{ backgroundColor: variant.color.hexColor }}
+                                >
+                                    {isSelected && <Image src='/images/tick.svg' alt='check' width={20} height={20} className={clx(
+                                        'size-5',
+                                        variant.color.hexColor === '#FFFFFF' ? 'filterBlack' : ''
+                                    )} />}
+                                </button>
+                            )
+                        }
+                        return null
+                    })}
+                </div>
+
+                {/* سایزها */}
+                <div className='flex flex-wrap items-center gap-1.5'>
+                    {product.variants.map((variant) => {
+                        if (variant.size) {
+                            const isSelected = selectedSize === variant.size._id.toString()
+                            return (
+                                <button
+                                    key={variant._id}
+                                    onClick={() => setSelectedSize(variant.size!._id.toString())}
+                                    className={`text-[13px] px-4 py-2 border border-border rounded-lg whitespace-nowrap transition-colors ${isSelected
+                                        ? 'bg-primary text-white border-primary'
+                                        : 'hover:border-primary/50'
+                                        }`}
+                                >
+                                    {variant.size.value}
+                                </button>
+                            )
+                        }
+                        return null
+                    })}
+                </div>
             </div>
 
             <div className='mt-6 sm:mt-7 text-base sm:text-lg text-[#333333]'>
diff --git a/src/config/const.ts b/src/config/const.ts
index b8dc482..97d0d5c 100644
--- a/src/config/const.ts
+++ b/src/config/const.ts
@@ -1,6 +1,6 @@
 export const TOKEN_NAME = "sh_token";
 export const REFRESH_TOKEN_NAME = "sh_refresh_token";
-export const BASE_URL = "https://api.shinan.ir";
-// export const BASE_URL = "https://api-sondos.run.danakcorp.com";
+// export const BASE_URL = "https://api.shinan.ir";
+export const BASE_URL = "https://api-sondos.run.danakcorp.com";
 
 export const PRIMARY_COLOR = "#015699";
diff --git a/src/types/product.types.ts b/src/types/product.types.ts
index f3e73de..23d4bab 100644
--- a/src/types/product.types.ts
+++ b/src/types/product.types.ts
@@ -14,6 +14,17 @@ export interface ProductSize {
   value: string;
 }
 
+export interface ProductColor {
+  _id: number;
+  value: string;
+  hexColor?: string;
+}
+
+export interface ProductMeterage {
+  _id: number;
+  value: string;
+}
+
 export interface ProductWarranty {
   _id: number;
   duration: string;
@@ -52,7 +63,9 @@ export interface ProductVariant {
   shop: ProductShop;
   shipmentMethod: ShipmentMethod[];
   warranty: ProductWarranty;
-  size: ProductSize;
+  size?: ProductSize;
+  color?: ProductColor;
+  meterage?: ProductMeterage;
 }
 
 export interface ProductBrand {