diff --git a/src/components/CosmeticItemsView.tsx b/src/components/CosmeticItemsView.tsx
index 0f41331..a40af9b 100644
--- a/src/components/CosmeticItemsView.tsx
+++ b/src/components/CosmeticItemsView.tsx
@@ -1,10 +1,11 @@
 import React, { useState, useMemo } from 'react';
 import { ExcelRow } from '../types';
 import { useColumns } from '../contexts/ColumnsContext';
-import { Search, ChevronDown, ChevronUp, X, Save, Check } from 'lucide-react';
+import { Search, ChevronDown, ChevronUp, X, Save, Check, Loader2 } from 'lucide-react';
 import { cn } from '../lib/utils';
 import { ColumnFilterPopover } from './ColumnFilterPopover';
 import { usePersistentState } from '../contexts/FilterContext';
+import { saveRowToSupabase } from '../lib/supabase';
 
 const COSMETIC_LINES = ['INKEE', 'BATH FUN', 'TOP FASHION', 'SENSES', 'BODYNESS'];
 
@@ -25,6 +26,7 @@ export function CosmeticItemsView({ data, headers, onSaveRow, onCaptureState, ro
   const [columnFilters, setColumnFilters] = usePersistentState<Record<number, string[]>>('cosmeticItems-columnFilters', {});
   const [openFilter, setOpenFilter] = useState<number | null>(null);
   const [editingCpnp, setEditingCpnp] = useState<{ rowIndex: number; value: string } | null>(null);
+  const [savingCpnp, setSavingCpnp] = useState<number | null>(null);
 
   const pageSize = 100;
 
@@ -123,14 +125,21 @@ export function CosmeticItemsView({ data, headers, onSaveRow, onCaptureState, ro
     setEditingCpnp({ rowIndex, value: String(currentValue ?? '') });
   };
 
-  const saveCpnp = (rowIndex: number) => {
+  const saveCpnp = async (rowIndex: number) => {
     if (!editingCpnp || editingCpnp.rowIndex !== rowIndex) return;
     const row = data[rowIndex];
-    onCaptureState(`Updated CPNP No. for ${row[COLUMNS.ARTICLE_NO]}`);
+    const articleNo = String(row[COLUMNS.ARTICLE_NO]);
     const newRow = [...row];
     newRow[COLUMNS.CPNP_NO] = editingCpnp.value.trim();
-    onSaveRow(rowIndex, newRow);
+    setSavingCpnp(rowIndex);
     setEditingCpnp(null);
+    onCaptureState(`Updated CPNP No. for ${articleNo}`);
+    onSaveRow(rowIndex, newRow);
+    const result = await saveRowToSupabase(articleNo, newRow);
+    setSavingCpnp(null);
+    if (!result.success) {
+      alert(`Error saving CPNP No. for ${articleNo}: ${result.error}`);
+    }
   };
 
   const cancelEditCpnp = () => setEditingCpnp(null);
@@ -266,7 +275,12 @@ export function CosmeticItemsView({ data, headers, onSaveRow, onCaptureState, ro
                       {row[COLUMNS.ITEM_AVAILABLE]}
                     </td>
                     <td className="px-3 py-2" style={{ width: 160 }}>
-                      {isEditing ? (
+                      {savingCpnp === index ? (
+                        <span className="flex items-center gap-1.5 text-[10px] text-slate-400">
+                          <Loader2 className="w-3 h-3 animate-spin" />
+                          Saving...
+                        </span>
+                      ) : isEditing ? (
                         <div className="flex items-center gap-1">
                           <input
                             type="text"