diff --git a/public/assets/icons/cloud-pending-icon.svg b/public/assets/icons/cloud-pending-icon.svg
new file mode 100644
index 0000000..3bbb7c7
--- /dev/null
+++ b/public/assets/icons/cloud-pending-icon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4s1.79-4 4-4h.71C7.37 7.69 9.48 6 12 6c3.04 0 5.5 2.46 5.5 5.5v.5H19c1.66 0 3 1.34 3 3s-1.34 3-3 3z" fill="#9CA3AF"/>
+</svg>
diff --git a/public/assets/icons/cloud-saved-icon.svg b/public/assets/icons/cloud-saved-icon.svg
new file mode 100644
index 0000000..6f0016d
--- /dev/null
+++ b/public/assets/icons/cloud-saved-icon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM10 17l-3.5-3.5 1.41-1.41L10 14.17 15.18 9l1.41 1.41L10 17z" fill="#22C55E"/>
+</svg>
diff --git a/public/assets/icons/cloud-saving-icon.svg b/public/assets/icons/cloud-saving-icon.svg
new file mode 100644
index 0000000..5752a4a
--- /dev/null
+++ b/public/assets/icons/cloud-saving-icon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z" fill="#E58625"/>
+</svg>
diff --git a/src/app/(agent)/agent/edit/page.tsx b/src/app/(agent)/agent/edit/page.tsx
index 0872a55..1a8a142 100644
--- a/src/app/(agent)/agent/edit/page.tsx
+++ b/src/app/(agent)/agent/edit/page.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useRef, useEffect, useCallback } from 'react';
+import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { QuickLinks } from './components';
 import DynamicSection from './components/DynamicSection';
@@ -635,17 +636,21 @@ export default function EditProfilePage() {
         {/* Auto-save status */}
         {(autoSaveStatus !== 'idle' || lastSavedAt) && (
           <div className="flex items-center justify-end gap-2 px-1">
-            <span
-              className={`inline-block w-2 h-2 rounded-full ${
+            <Image
+              src={
                 autoSaveStatus === 'saving'
-                  ? 'bg-[#E58625] animate-pulse'
-                  : autoSaveStatus === 'saved' || (autoSaveStatus === 'idle' && lastSavedAt)
-                  ? 'bg-green-500'
+                  ? '/assets/icons/cloud-saving-icon.svg'
                   : autoSaveStatus === 'error'
-                  ? 'bg-red-500'
-                  : 'bg-gray-400'
-              }`}
-            ></span>
+                  ? '/assets/icons/caution-icon.svg'
+                  : autoSaveStatus === 'dirty'
+                  ? '/assets/icons/cloud-pending-icon.svg'
+                  : '/assets/icons/cloud-saved-icon.svg'
+              }
+              alt={autoSaveStatus === 'saving' ? 'Saving' : autoSaveStatus === 'dirty' ? 'Unsaved changes' : autoSaveStatus === 'error' ? 'Save failed' : 'Saved'}
+              width={16}
+              height={16}
+              className={autoSaveStatus === 'saving' ? 'animate-pulse' : ''}
+            />
             <span className="text-[12px] font-serif text-[#00293D]/60">
               {autoSaveStatus === 'saving' && 'Saving…'}
               {autoSaveStatus === 'saved' && lastSavedAt && `All changes saved at ${formatTime(lastSavedAt)}`}