diff --git a/components/form/product/create-product-form.tsx b/components/form/product/create-product-form.tsx
index 1cf0ee9..d44de33 100644
--- a/components/form/product/create-product-form.tsx
+++ b/components/form/product/create-product-form.tsx
@@ -74,9 +74,9 @@ export default function AddProductForm() {
       formData.append("colors", JSON.stringify(colorsPayload));
 
       // 🔥 color images
-      colors.forEach((c, index) => {
+      colors.forEach((c) => {
         if (c.file) {
-          formData.append(`color_images[${index}]`, c.file);
+          formData.append("color_images", c.file);
         }
       });
 
@@ -217,7 +217,14 @@ export default function AddProductForm() {
                 <Label className="text-sm font-semibold">
                   Pilih Warna {index + 1}
                 </Label>
-                <Input placeholder="Contoh: Silver or #E2E2E2" />
+                <Input
+                  value={color.name}
+                  onChange={(e) => {
+                    const updated = [...colors];
+                    updated[index].name = e.target.value;
+                    setColors(updated);
+                  }}
+                />
 
                 {/* Pilihan Warna */}
                 <div className="flex flex-wrap gap-2">
@@ -239,7 +246,12 @@ export default function AddProductForm() {
                     <button
                       key={colorCode}
                       type="button"
-                      onClick={() => setSelectedColor(colorCode)}
+                      onClick={() => {
+                        const updated = [...colors];
+                        updated[index].name = colorCode; // 🔥 INI KUNCINYA
+                        setColors(updated);
+                        setSelectedColor(colorCode);
+                      }}
                       className={`w-8 h-8 rounded-full border-2 transition ${
                         selectedColor === colorCode
                           ? "border-teal-700 scale-110"