diff --git a/components/product/vairant-details.tsx b/components/product/vairant-details.tsx
index 6afc8bfed..2824228e2 100644
--- a/components/product/vairant-details.tsx
+++ b/components/product/vairant-details.tsx
@@ -30,12 +30,19 @@ const VariantDetails = ({ variants, defaultPrice }: VariantDetailsProps) => {
       <div className="mt-2 flex items-center justify-start gap-x-2">
         {variant?.availableForSale ? (
           <div className="flex items-center gap-1 text-sm text-green-500">
-            <CheckCircleIcon className="size-5" /> In Stock
+            <CheckCircleIcon className="size-5" /> <strong>In Stock</strong>
           </div>
         ) : (
           <span className="text-sm text-red-600">Out of Stock</span>
         )}
-        <p className="text-sm">Condition: {variant?.condition || 'N/A'}</p>
+        <span className="text-sm">|</span>
+        <p className="text-sm">
+          <strong>SKU:</strong> {variant?.sku || 'N/A'}
+        </p>
+        <span className="text-sm">|</span>
+        <p className="text-sm">
+          <strong>Condition:</strong> {variant?.condition || 'N/A'}
+        </p>
       </div>
     </div>
   );
diff --git a/components/product/variant-selector.tsx b/components/product/variant-selector.tsx
index 1cbc0ffbe..6e05a898d 100644
--- a/components/product/variant-selector.tsx
+++ b/components/product/variant-selector.tsx
@@ -96,7 +96,7 @@ export function VariantSelector({
             leaveFrom="opacity-100 backdrop-blur-[.5px]"
             leaveTo="opacity-0 backdrop-blur-none"
           >
-            <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
+            <div className="bg-black/30 fixed inset-0" aria-hidden="true" />
           </TransitionChild>
           <TransitionChild
             as={Fragment}
@@ -107,7 +107,7 @@ export function VariantSelector({
             leaveFrom="translate-x-0"
             leaveTo="translate-x-full"
           >
-            <DialogPanel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-neutral-200 bg-white/80 p-6 text-black backdrop-blur-xl md:w-[500px]">
+            <DialogPanel className="text-black fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-neutral-200 bg-white/80 p-6 backdrop-blur-xl md:w-[500px]">
               <div className="flex items-center justify-between">
                 <p className="text-lg font-semibold">Manufactured & Used Options</p>
 
@@ -209,10 +209,10 @@ export function VariantSelector({
                                     />
                                   ) : null}
                                   <div className="flex items-center gap-1">
-                                    <span className="text-xs font-medium text-gray-600">
-                                      {option.name}:
+                                    <span className="text-xs font-medium text-gray-600">SKU:</span>
+                                    <span className="text-xs text-gray-600">
+                                      {variant?.sku || 'N/A'}
                                     </span>
-                                    <span className="text-xs text-gray-600">{value}</span>
                                   </div>
                                 </div>
                                 {!isAvailableForSale ? <span>Out of Stock</span> : null}