diff --git a/package-lock.json b/package-lock.json
index bdf903c7..7bef4da7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,8 @@
         "@cometchat/chat-uikit-react": "^6.4.4",
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
+        "@iconify/tailwind": "^1.2.0",
+        "@iconify/tailwind4": "^1.2.3",
         "@mui/icons-material": "^9.0.1",
         "@mui/material": "^9.0.1",
         "@mui/x-charts": "^9.2.0",
@@ -66,6 +68,7 @@
       },
       "devDependencies": {
         "@eslint/js": "^10.0.1",
+        "@iconify-json/svg-spinners": "^1.2.4",
         "@tailwindcss/vite": "^4.3.0",
         "@types/react": "^19.2.15",
         "@types/react-dom": "^19.2.3",
@@ -192,6 +195,19 @@
         "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/@antfu/install-pkg": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-1.1.0.tgz",
+      "integrity": "sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==",
+      "license": "MIT",
+      "dependencies": {
+        "package-manager-detector": "^1.3.0",
+        "tinyexec": "^1.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.29.0",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
@@ -472,6 +488,15 @@
         "rxjs": "^7.8.1"
       }
     },
+    "node_modules/@cyberalien/svg-utils": {
+      "version": "1.2.19",
+      "resolved": "https://registry.npmjs.org/@cyberalien/svg-utils/-/svg-utils-1.2.19.tgz",
+      "integrity": "sha512-paDJoDu+LhuH5Ma1q0BDqBpg6d16Xk22cZZrlg/s/J9oB8KgnnpU/snaEETJu2G1pwYcWQINUz6WUqu0Wm9k6A==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      }
+    },
     "node_modules/@date-fns/tz": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.4.1.tgz",
@@ -891,6 +916,77 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@iconify-json/svg-spinners": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@iconify-json/svg-spinners/-/svg-spinners-1.2.4.tgz",
+      "integrity": "sha512-ayn0pogFPwJA1WFZpDnoq9/hjDxN+keeCMyThaX4d3gSJ3y0mdKUxIA/b1YXWGtY9wVtZmxwcvOIeEieG4+JNg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
+    "node_modules/@iconify/tailwind": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@iconify/tailwind/-/tailwind-1.2.0.tgz",
+      "integrity": "sha512-KgpIHWOTcRYw1XcoUqyNSrmYyfLLqZYu3AmP8zdfLk0F5TqRO8YerhlvlQmGfn7rJXgPeZN569xPAJnJ53zZxA==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      }
+    },
+    "node_modules/@iconify/tailwind4": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@iconify/tailwind4/-/tailwind4-1.2.3.tgz",
+      "integrity": "sha512-z8SKiMHRASJKF/IY//87MF88lcB7ulxh8vlhQXXLWsBkNtOh6ese9R41MyGpQeqXdRvQVt+/fX2glQtHFjQ+MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/tools": "^5.0.5",
+        "@iconify/types": "^2.0.0",
+        "@iconify/utils": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">= 4.0.0"
+      }
+    },
+    "node_modules/@iconify/tools": {
+      "version": "5.0.12",
+      "resolved": "https://registry.npmjs.org/@iconify/tools/-/tools-5.0.12.tgz",
+      "integrity": "sha512-aFPwSFmFphUPVjNLUkgxgUPSPVgTEEjv0mE7NgvfoQBuE5TtsMrKa4HTY65cM5oXZ2a1xKQcW/RKhiOKEiAarw==",
+      "license": "MIT",
+      "dependencies": {
+        "@cyberalien/svg-utils": "^1.2.15",
+        "@iconify/types": "^2.0.0",
+        "@iconify/utils": "^3.1.3",
+        "fflate": "^0.8.3",
+        "modern-tar": "^0.7.6",
+        "pathe": "^2.0.3",
+        "svgo": "^4.0.1"
+      }
+    },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "license": "MIT"
+    },
+    "node_modules/@iconify/utils": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-3.1.4.tgz",
+      "integrity": "sha512-b1S7B1k9ohZ+iNTi2ATxbRYG9fTrJmUT0rc46bvVnNxqNRGW7dyo/vRREwyniI5IRN2RSJHDcm+s3BjWrSAjHw==",
+      "license": "MIT",
+      "dependencies": {
+        "@antfu/install-pkg": "^1.1.0",
+        "@iconify/types": "^2.0.0",
+        "import-meta-resolve": "^4.2.0"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -3974,6 +4070,12 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "license": "ISC"
+    },
     "node_modules/bootstrap": {
       "version": "5.3.8",
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.8.tgz",
@@ -4277,6 +4379,15 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/commander": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz",
+      "integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/component-emitter": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.1.tgz",
@@ -4428,6 +4539,80 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-select": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz",
+      "integrity": "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
+      "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.27.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.2.2.tgz",
+      "integrity": "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/csso": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "css-tree": "~2.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/css-tree": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.28",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/mdn-data": {
+      "version": "2.0.28",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
+      "license": "CC0-1.0"
+    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
@@ -4708,6 +4893,47 @@
         "@babel/runtime": "^7.20.0"
       }
     },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
     "node_modules/dompurify": {
       "version": "3.4.8",
       "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.8.tgz",
@@ -4717,6 +4943,20 @@
         "@types/trusted-types": "^2.0.7"
       }
     },
+    "node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -4789,6 +5029,18 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/error-ex": {
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
@@ -5204,6 +5456,12 @@
         }
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.3.tgz",
+      "integrity": "sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA==",
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -5820,6 +6078,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/import-meta-resolve": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.2.0.tgz",
+      "integrity": "sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
@@ -6762,6 +7030,12 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/mdn-data": {
+      "version": "2.27.1",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
+      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
+      "license": "CC0-1.0"
+    },
     "node_modules/media-typer": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.0.tgz",
@@ -7414,6 +7688,15 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/modern-tar": {
+      "version": "0.7.7",
+      "resolved": "https://registry.npmjs.org/modern-tar/-/modern-tar-0.7.7.tgz",
+      "integrity": "sha512-t9VmxaqrmANnEOBhpSDI6HD192Ge48k8vmWqQQL7hSFEqHEYwZbbsu49+aKLWZeRvFs3j1pMhXOqqF4kPlvjkQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/motion": {
       "version": "12.39.0",
       "resolved": "https://registry.npmjs.org/motion/-/motion-12.39.0.tgz",
@@ -7606,6 +7889,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -7741,6 +8036,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/package-manager-detector": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-1.8.0.tgz",
+      "integrity": "sha512-yQA4H19AmPEoMUeavPMDIe1higySl/gH/yaQrkT/s07Qp+7pp2hYz30N3z2l5BkjVkF9Ow6o0wjJamm2y7Sn0A==",
+      "license": "MIT"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -7850,6 +8151,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -8699,6 +9006,15 @@
         "@parcel/watcher": "^2.4.1"
       }
     },
+    "node_modules/sax": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.6.1.tgz",
+      "integrity": "sha512-42tBVwLWnaQvW5zc4HbZrTuWccECCZfBi92FDuwtqxasH+JbPB3/FOKb1m222K42R4WxuxzzMsTswfzgtSu64Q==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=11.0.0"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
@@ -9070,6 +9386,31 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svgo": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-4.0.2.tgz",
+      "integrity": "sha512-ekx94z1rRc5LDi6oSUaeRnYhd0UOJxdtQCL2rF8xpWxD3TPAsISWOrxezqGovqS38GRZOdpDfvQe3ts6F7nsng==",
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^11.1.0",
+        "css-select": "^5.1.0",
+        "css-tree": "^3.0.1",
+        "css-what": "^6.1.0",
+        "csso": "^5.0.5",
+        "picocolors": "^1.1.1",
+        "sax": "^1.5.0"
+      },
+      "bin": {
+        "svgo": "bin/svgo.js"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/svgo"
+      }
+    },
     "node_modules/tabbable": {
       "version": "6.4.0",
       "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.4.0.tgz",
@@ -9090,7 +9431,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.0.tgz",
       "integrity": "sha512-y6nxMGB1nMW9R6k96e5gdIFzcfL/gTJRNaqGes1YvkLnPVXzWgbqFF2yLC0T8G774n24cx3Pe8XrKoniCOAH+Q==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/tapable": {
@@ -9122,6 +9462,15 @@
       "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
       "license": "MIT"
     },
+    "node_modules/tinyexec": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.3.0.tgz",
+      "integrity": "sha512-QKAl9m8gWWGHV8jZcPeym6j+XULi6tOf1mT83WYJ4Lk2ytW/uwAWkrP0uFsdoYMdueVJ0qs26wZ+23xeB4ibNQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.16",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
diff --git a/package.json b/package.json
index 35c8a648..30026950 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,8 @@
     "@cometchat/chat-uikit-react": "^6.4.4",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
+    "@iconify/tailwind": "^1.2.0",
+    "@iconify/tailwind4": "^1.2.3",
     "@mui/icons-material": "^9.0.1",
     "@mui/material": "^9.0.1",
     "@mui/x-charts": "^9.2.0",
@@ -68,6 +70,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
+    "@iconify-json/svg-spinners": "^1.2.4",
     "@tailwindcss/vite": "^4.3.0",
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
diff --git a/src/App.css b/src/App.css
index 3505a050..0f34e99a 100644
--- a/src/App.css
+++ b/src/App.css
@@ -597,29 +597,9 @@ body.chat-page-active .routes-container {
   box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
 }
 
-/* Spinner for loading states */
-.spinner-border {
-  display: inline-block;
-  width: 1rem;
-  height: 1rem;
-  vertical-align: text-bottom;
-  border: 0.15em solid currentColor;
-  border-right-color: transparent;
-  border-radius: 50%;
-  animation: spinner-border 0.75s linear infinite;
-}
-
-.spinner-border-sm {
-  width: 0.875rem;
-  height: 0.875rem;
-  border-width: 0.125em;
-}
-
-@keyframes spinner-border {
-  to {
-    transform: rotate(360deg);
-  }
-}
+/*
+ * (removed legacy .spinner-border loader — replaced by Iconify eclipse spinner)
+ */
 
 /* ==========================================================================
    Utility Classes
diff --git a/src/App.jsx b/src/App.jsx
index db939cfe..8972a846 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -203,6 +203,7 @@ function App() {
                       <ToastProvider>
                         <ConfigProvider
                           theme={retailOpsTheme}
+                          spin={{ indicator: <span className="icon-[svg-spinners--eclipse]" aria-hidden="true" /> }}
                         >
                         <AntdApp>
                           <AppRoutes />
diff --git a/src/components/AsinDetailModal.jsx b/src/components/AsinDetailModal.jsx
index 3fced295..88ed4c29 100644
--- a/src/components/AsinDetailModal.jsx
+++ b/src/components/AsinDetailModal.jsx
@@ -3,7 +3,7 @@ import {
   Package, IndianRupee, Star, Award, Store, Activity, BarChart3,
   TrendingUp, TrendingDown, Eye, ExternalLink, Calendar, ListChecks,
   Image, AlertCircle, Trophy, Sparkles, CheckCircle2, AlertTriangle,
-  Loader2, RefreshCcw, ChevronDown, X
+  RefreshCcw, ChevronDown, X
 } from 'lucide-react';
 import { asinApi } from '../services/api';
 import Chart from 'react-apexcharts';
@@ -801,7 +801,7 @@ const AsinDetailModal = ({ asin, isOpen, onClose }) => {
             <div style={{ minHeight: 350, position: 'relative' }}>
               {isLoadingSubTrend ? (
                 <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: 350 }}>
-                  <Loader2 size={32} className="animate-spin" style={{ color: C.primary, marginBottom: 12 }} />
+                  <span className="icon-[svg-spinners--eclipse]" style={{ color: C.primary, fontSize: 32, marginBottom: 12 }} aria-hidden="true" />
                   <Text type="secondary" style={{ fontWeight: 500 }}>Running niche data indexing...</Text>
                 </div>
               ) : subBsrSeries.length > 0 ? (
diff --git a/src/components/BSRViewModal.jsx b/src/components/BSRViewModal.jsx
index 5ba6c894..4d04c1c0 100644
--- a/src/components/BSRViewModal.jsx
+++ b/src/components/BSRViewModal.jsx
@@ -3,7 +3,7 @@ import * as XLSX from 'xlsx';
 import {
   X, BarChart3, Search, Download, Maximize2, Minimize2,
   ArrowUpDown, ArrowUp, ArrowDown, FileText, Minus,
-  TrendingUp, TrendingDown, SlidersHorizontal, Loader2, Store, Calendar
+  TrendingUp, TrendingDown, SlidersHorizontal, Store, Calendar
 } from 'lucide-react';
 import { asinApi, sellerApi } from '../services/api';
 import InfiniteScrollSelect from './common/InfiniteScrollSelect';
@@ -301,10 +301,6 @@ const BSRViewModal = ({ isOpen, onClose, filters = {}, searchQuery = '', sellerI
     .dd { font-size:10px; padding:2px 6px; border-radius:4px; text-align:center; min-width:48px; }
     .dd-has { background:${C.successBg}; color:#2E7D32; font-weight:600; }
     .dd-no { color:#d1d5db; }
-    .loader-pulse { height:30px; display:flex; align-items:center; justify-content:center; gap:6px; margin:16px 0; }
-    .pulse-dot { width:6px; height:6px; background:${C.primary}; border-radius:50%; animation:pulse 1.5s infinite; }
-    .pulse-dot:nth-child(2) { animation-delay:0.2s; }
-    .pulse-dot:nth-child(3) { animation-delay:0.4s; }
     @keyframes pulse { 0%,100% { transform:scale(1); opacity:0.3; } 50% { transform:scale(1.5); opacity:1; } }
     .bt input[type="checkbox"] { width:13px; height:13px; cursor:pointer; accent-color:${C.primary}; }
   `;
@@ -332,7 +328,7 @@ const BSRViewModal = ({ isOpen, onClose, filters = {}, searchQuery = '', sellerI
           </Space>
           <Space size={8}>
             <button className="chp" onClick={() => setShowExportMenu(!showExportMenu)} style={{ borderColor: C.success, color: C.success }} disabled={exporting}>
-              {exporting ? <Loader2 size={13} className="animate-spin" /> : <Download size={13} />} Export
+              {exporting ? <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 13 }} aria-hidden="true" /> : <Download size={13} />} Export
             </button>
             {showExportMenu && !exporting && (
               <div className="position-absolute bg-white border rounded-lg shadow-xl p-1" style={{ top: '100%', right: 0, zIndex: 100, marginTop: 4, minWidth: 160 }}>
@@ -399,7 +395,7 @@ const BSRViewModal = ({ isOpen, onClose, filters = {}, searchQuery = '', sellerI
         )}
         {loading && (
           <span className="d-flex align-items-center gap-1 ms-auto" style={{ fontSize: 'var(--font-size-xs)', color: C.textSecondary }}>
-            <Loader2 size={13} className="animate-spin" /> Fetching...
+            <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 13 }} aria-hidden="true" /> Fetching...
           </span>
         )}
       </div>
@@ -520,7 +516,7 @@ const BSRViewModal = ({ isOpen, onClose, filters = {}, searchQuery = '', sellerI
           </tbody>
         </table>
         {(loading || hasMore) && (
-          <div ref={loaderRef} className="loader-pulse"><div className="pulse-dot" /><div className="pulse-dot" /><div className="pulse-dot" /></div>
+          <span ref={loaderRef} className="icon-[svg-spinners--eclipse]" style={{ fontSize: 18, color: C.primary, display: 'block', margin: '16px 0' }} aria-hidden="true" />
         )}
       </div>
 
diff --git a/src/components/DataTable.jsx b/src/components/DataTable.jsx
index ce94f1ee..75cdaaf8 100644
--- a/src/components/DataTable.jsx
+++ b/src/components/DataTable.jsx
@@ -252,7 +252,7 @@ const DataTable = ({
   if (isLoading) {
     return (
       <div className="d-flex justify-content-center align-items-center p-5" style={{ minHeight: '200px' }}>
-        <div className="pulse-loader"></div>
+        <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 32 }} aria-hidden="true" />
       </div>
     );
   }
diff --git a/src/components/ExportButton.jsx b/src/components/ExportButton.jsx
index 7ed9624a..1ebb5830 100644
--- a/src/components/ExportButton.jsx
+++ b/src/components/ExportButton.jsx
@@ -53,7 +53,7 @@ const ExportButton = ({ data, fileName = 'export', format = 'excel', className =
     >
       {isLoading ? (
         <>
-          <span className="spinner-border spinner-border-sm me-2"></span>
+          <span className="icon-[svg-spinners--eclipse] me-2" aria-hidden="true"></span>
           Exporting...
         </>
       ) : (
diff --git a/src/components/PriceViewModal.jsx b/src/components/PriceViewModal.jsx
index b25548dc..adc0225a 100644
--- a/src/components/PriceViewModal.jsx
+++ b/src/components/PriceViewModal.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react'
 import * as XLSX from 'xlsx';
 import {
   X, TrendingUp, TrendingDown, IndianRupee, Search, Download,
-  ArrowUp, ArrowDown, Minus, ArrowUpDown, FileText, SlidersHorizontal, Loader2, Store, Calendar, ChevronDown
+  ArrowUp, ArrowDown, Minus, ArrowUpDown, FileText, SlidersHorizontal, Store, Calendar, ChevronDown
 } from 'lucide-react';
 import { asinApi, sellerApi } from '../services/api';
 import InfiniteScrollSelect from './common/InfiniteScrollSelect';
@@ -406,10 +406,6 @@ const PriceViewModal = ({ isOpen, onClose, filters = {}, searchQuery = '', selle
     .dd-no { color:#d1d5db; }
     .inp-sm { font-size:11px; height:28px; border:1.5px solid #e5e7eb; border-radius:8px; padding:2px 10px; width:80px; outline:none; }
     .inp-sm:focus { border-color:${C.primary}; }
-    .loader-pulse { height:30px; display:flex; align-items:center; justify-content:center; gap:6px; margin:16px 0; }
-    .pulse-dot { width:6px; height:6px; background:${C.primary}; border-radius:50%; animation:pulse 1.5s infinite; }
-    .pulse-dot:nth-child(2) { animation-delay:0.2s; }
-    .pulse-dot:nth-child(3) { animation-delay:0.4s; }
     @keyframes pulse { 0%,100% { transform:scale(1); opacity:0.3; } 50% { transform:scale(1.5); opacity:1; } }
     .table input[type="checkbox"] { width:13px; height:13px; cursor:pointer; accent-color:${C.primary}; }
     .price-cell { font-variant-numeric:tabular-nums; }
@@ -444,7 +440,7 @@ const PriceViewModal = ({ isOpen, onClose, filters = {}, searchQuery = '', selle
           <Space size={8}>
             <div className="position-relative">
               <button className="chp" onClick={() => setShowExportMenu(!showExportMenu)} style={{ borderColor: C.primary, color: C.primary }} disabled={exporting}>
-                {exporting ? <Loader2 size={13} className="animate-spin" /> : <Download size={13} />} Export
+                {exporting ? <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 13 }} aria-hidden="true" /> : <Download size={13} />} Export
               </button>
               {showExportMenu && !exporting && (
                 <div className="position-absolute bg-white border rounded-lg shadow-xl p-1" style={{ top: '100%', right: 0, zIndex: 100, marginTop: 4, minWidth: 160 }}>
@@ -525,7 +521,7 @@ const PriceViewModal = ({ isOpen, onClose, filters = {}, searchQuery = '', selle
 
         {loading && (
           <span className="d-flex align-items-center gap-1 ms-auto" style={{ fontSize: 'var(--font-size-xs)', color: C.textSecondary }}>
-            <Loader2 size={13} className="animate-spin" /> Updating...
+            <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 13 }} aria-hidden="true" /> Updating...
           </span>
         )}
       </div>
@@ -662,9 +658,7 @@ const PriceViewModal = ({ isOpen, onClose, filters = {}, searchQuery = '', selle
           </tbody>
         </table>
         {(loading || hasMore) && (
-          <div ref={loaderRef} className="loader-pulse">
-            <div className="pulse-dot" /><div className="pulse-dot" /><div className="pulse-dot" />
-          </div>
+          <span ref={loaderRef} className="icon-[svg-spinners--eclipse]" style={{ fontSize: 18, color: C.primary, display: 'block', margin: '16px 0' }} aria-hidden="true" />
         )}
       </div>
 
diff --git a/src/components/RatingViewModal.jsx b/src/components/RatingViewModal.jsx
index cbb4e6ec..9ae2842e 100644
--- a/src/components/RatingViewModal.jsx
+++ b/src/components/RatingViewModal.jsx
@@ -3,7 +3,7 @@ import * as XLSX from 'xlsx';
 import {
   X, Star, Search, Download,
   ArrowUpDown, ArrowUp, ArrowDown, FileText, MessageSquare,
-  Minus, TrendingUp, TrendingDown, SlidersHorizontal, Loader2, Store, Calendar
+  Minus, TrendingUp, TrendingDown, SlidersHorizontal, Store, Calendar
 } from 'lucide-react';
 import { asinApi, sellerApi } from '../services/api';
 import InfiniteScrollSelect from './common/InfiniteScrollSelect';
@@ -288,10 +288,6 @@ const RatingViewModal = ({ isOpen, onClose, filters = {}, searchQuery = '', sell
     .dd { font-size:10px; padding:2px 6px; border-radius:4px; text-align:center; min-width:48px; }
     .dd-has { background:${C.warningBg}; color:#E65100; font-weight:600; }
     .dd-no { color:#d1d5db; }
-    .loader-pulse { height:30px; display:flex; align-items:center; justify-content:center; gap:6px; margin:16px 0; }
-    .pulse-dot { width:6px; height:6px; background:${C.primary}; border-radius:50%; animation:pulse 1.5s infinite; }
-    .pulse-dot:nth-child(2) { animation-delay:0.2s; }
-    .pulse-dot:nth-child(3) { animation-delay:0.4s; }
     @keyframes pulse { 0%,100% { transform:scale(1); opacity:0.3; } 50% { transform:scale(1.5); opacity:1; } }
     .rt input[type="checkbox"] { width:13px; height:13px; cursor:pointer; accent-color:${C.primary}; }
     .trend-badge { display:inline-flex; align-items:center; gap:3px; padding:2px 6px; border-radius:4px; font-weight:700; font-size:10px; }
@@ -323,7 +319,7 @@ const RatingViewModal = ({ isOpen, onClose, filters = {}, searchQuery = '', sell
           </Space>
           <Space size={8}>
             <button className="chp" onClick={() => setShowExportMenu(!showExportMenu)} style={{ borderColor: C.warning, color: C.warning }} disabled={exporting}>
-              {exporting ? <Loader2 size={13} className="animate-spin" /> : <Download size={13} />} Export
+              {exporting ? <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 13 }} aria-hidden="true" /> : <Download size={13} />} Export
             </button>
             {showExportMenu && !exporting && (
               <div className="position-absolute bg-white border rounded-lg shadow-xl p-1" style={{ top: '100%', right: 0, zIndex: 100, marginTop: 4, minWidth: 160 }}>
@@ -390,7 +386,7 @@ const RatingViewModal = ({ isOpen, onClose, filters = {}, searchQuery = '', sell
         )}
         {loading && (
           <span className="d-flex align-items-center gap-1 ms-auto" style={{ fontSize: 'var(--font-size-xs)', color: C.textSecondary }}>
-            <Loader2 size={13} className="animate-spin" /> Synchronizing...
+            <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 13 }} aria-hidden="true" /> Synchronizing...
           </span>
         )}
       </div>
@@ -525,7 +521,7 @@ const RatingViewModal = ({ isOpen, onClose, filters = {}, searchQuery = '', sell
           </tbody>
         </table>
         {(loading || hasMore) && (
-          <div ref={loaderRef} className="loader-pulse"><div className="pulse-dot" /><div className="pulse-dot" /><div className="pulse-dot" /></div>
+          <span ref={loaderRef} className="icon-[svg-spinners--eclipse]" style={{ fontSize: 18, color: C.primary }} aria-hidden="true" />
         )}
       </div>
 
diff --git a/src/components/ResultsPage.jsx b/src/components/ResultsPage.jsx
index caf6e6d5..cee7f1ad 100644
--- a/src/components/ResultsPage.jsx
+++ b/src/components/ResultsPage.jsx
@@ -197,7 +197,7 @@ const ResultsPage = ({ asins, onNavigate }) => {
               >
                 {isCalculating ? (
                   <>
-                    <span className="spinner-border spinner-border-sm me-1"></span>
+                    <span className="icon-[svg-spinners--eclipse] me-1" aria-hidden="true"></span>
                     Calculating...
                   </>
                 ) : (
diff --git a/src/components/Spinner.jsx b/src/components/Spinner.jsx
index 951cbeac..61376aef 100644
--- a/src/components/Spinner.jsx
+++ b/src/components/Spinner.jsx
@@ -1,25 +1,26 @@
 import React from 'react';
 import { Spin } from 'antd';
-import { LoadingOutlined } from '@ant-design/icons';
 
 // Primary brand color of RetailOps is #1976D2
 const antIcon = (
-  <LoadingOutlined
+  <span
+    className="icon-[svg-spinners--eclipse]"
     style={{
       fontSize: 28,
       color: '#1976D2',
     }}
-    spin
+    aria-hidden="true"
   />
 );
 
 const antIconSmall = (
-  <LoadingOutlined
+  <span
+    className="icon-[svg-spinners--eclipse]"
     style={{
       fontSize: 18,
       color: '#1976D2',
     }}
-    spin
+    aria-hidden="true"
   />
 );
 
diff --git a/src/components/Topbar.jsx b/src/components/Topbar.jsx
index cbab8f1c..cf6d35a5 100644
--- a/src/components/Topbar.jsx
+++ b/src/components/Topbar.jsx
@@ -185,7 +185,7 @@ const Topbar = ({ toggleSidebar }) => {
           title="Refresh data"
           disabled={isRefreshing}
         >
-          <RefreshCw size={20} className={isRefreshing ? 'spin' : ''} />
+          {isRefreshing ? <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 20 }} aria-hidden="true" /> : <RefreshCw size={20} />}
         </button>
 
         {/* Notifications */}
diff --git a/src/components/UploadForm.jsx b/src/components/UploadForm.jsx
index 283514b6..7dd9a647 100644
--- a/src/components/UploadForm.jsx
+++ b/src/components/UploadForm.jsx
@@ -359,7 +359,7 @@ const UploadForm = () => {
         >
           {isLoading ? (
             <>
-              <span className="spinner-border spinner-border-sm me-2"></span>
+              <span className="icon-[svg-spinners--eclipse] me-2" aria-hidden="true"></span>
               {uploadType === 'monthly' ? 'Uploading...' : uploadType === 'ads' ? 'Importing Ads...' : 'Syncing...'}
             </>
           ) : (
diff --git a/src/components/actions/ActionChat.jsx b/src/components/actions/ActionChat.jsx
index a65e5fcb..386a5af4 100644
--- a/src/components/actions/ActionChat.jsx
+++ b/src/components/actions/ActionChat.jsx
@@ -357,7 +357,7 @@ const ActionChat = ({ actionId, messages: initialMessages = [], onSendMessage, u
                         onClick={handleSubmit}
                     >
                         {isSending ? (
-                            <div className="spinner-border spinner-border-sm" role="status"></div>
+                            <span className="icon-[svg-spinners--eclipse]" role="status" aria-label="Sending"></span>
                         ) : (
                             <Send size={18} fill="currentColor" />
                         )}
diff --git a/src/components/actions/ActionDetailModal.jsx b/src/components/actions/ActionDetailModal.jsx
index 7f54b971..d083129a 100644
--- a/src/components/actions/ActionDetailModal.jsx
+++ b/src/components/actions/ActionDetailModal.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Modal, ModalBody, Spinner, Badge, Tooltip } from 'reactstrap';
+import { Modal, ModalBody, Badge, Tooltip } from 'reactstrap';
 import { 
     FileText, Target, TrendingUp, AlertTriangle, 
     Activity, ExternalLink, History, Sparkles, 
@@ -299,7 +299,7 @@ const ActionDetailModal = ({ isOpen, onClose, action: item }) => {
                         <div className="ai-guide-box mt-2">
                             {loading ? (
                                 <div className="text-center py-4">
-                                    <Spinner size="sm" color="primary" />
+                                    <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 16, color: '#0d6efd' }} aria-hidden="true" />
                                     <div className="mt-2 smallest text-muted">Analyzing task data...</div>
                                 </div>
                             ) : error ? (
diff --git a/src/components/actions/ActionListEnhanced.jsx b/src/components/actions/ActionListEnhanced.jsx
index 2346bcff..8bad3a12 100644
--- a/src/components/actions/ActionListEnhanced.jsx
+++ b/src/components/actions/ActionListEnhanced.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useMemo } from 'react';
-import { Edit2, Trash2, CheckCircle, Clock, AlertTriangle, Filter, Search, Play, Square, Plus, Sparkles, Loader2, Calendar, AlertCircle, ArrowDown, Minus, ThumbsUp, ThumbsDown, RotateCcw, FileText, RefreshCw, Eye } from 'lucide-react';
+import { Edit2, Trash2, CheckCircle, Clock, AlertTriangle, Filter, Search, Play, Square, Plus, Sparkles, Calendar, AlertCircle, ArrowDown, Minus, ThumbsUp, ThumbsDown, RotateCcw, FileText, RefreshCw, Eye } from 'lucide-react';
 import CompletionModal from './CompletionModal';
 import ActionDetailModal from './ActionDetailModal';
 import Popover from '../common/Popover';
@@ -496,11 +496,11 @@ const ActionList = ({
                                                         {type === 'KR' && data.metric === 'GMS' && (
                                                             <button
                                                                 onClick={(e) => handleSync(e, data)}
-                                                                className={`btn btn-sm btn-link p-0 ms-1 ${syncingKRs[data._id || data.id] ? 'fa-spin' : ''}`}
+                                                                className="btn btn-sm btn-link p-0 ms-1"
                                                                 title="Sync GMS Progress"
                                                                 disabled={syncingKRs[data._id || data.id]}
                                                             >
-                                                                <RefreshCw size={10} className={syncingKRs[data._id || data.id] ? 'animate-spin' : ''} />
+                                                                {syncingKRs[data._id || data.id] ? <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 10 }} aria-hidden="true" /> : <RefreshCw size={10} />}
                                                             </button>
                                                         )}
                                                     </div>
diff --git a/src/components/actions/ActionPane.jsx b/src/components/actions/ActionPane.jsx
index 6be2ba2e..7be2badc 100644
--- a/src/components/actions/ActionPane.jsx
+++ b/src/components/actions/ActionPane.jsx
@@ -236,7 +236,7 @@ const ActionPane = ({
                                             <div className="relative z-10 text-sm text-slate-300 leading-relaxed markdown-content prose prose-invert prose-sm max-w-none">
                                                 {analyzing ? (
                                                     <div className="flex items-center gap-2 py-4 text-indigo-400">
-                                                        <Activity className="animate-spin" size={16} />
+                                                        <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 16, color: '#a5b4fc' }} aria-hidden="true" />
                                                         <span className="font-bold tracking-tight">Synthesizing listing optimization flow...</span>
                                                     </div>
                                                 ) : (
@@ -253,7 +253,7 @@ const ActionPane = ({
                                                 disabled={analyzing}
                                                 className="mt-6 w-full py-3 bg-white/10 hover:bg-white/20 border border-white/10 backdrop-blur-md rounded-2xl text-[10px] font-black uppercase tracking-widest transition-all disabled:opacity-50 flex items-center justify-center gap-2"
                                             >
-                                                {analyzing ? <Activity className="animate-spin" size={14} /> : <Sparkles size={14} />}
+                                                {analyzing ? <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 14 }} aria-hidden="true" /> : <Sparkles size={14} />}
                                                 {analyzing ? 'Analyzing...' : 'Analyze Action Viability'}
                                             </button>
                                         </div>
diff --git a/src/components/actions/MissionControlView.jsx b/src/components/actions/MissionControlView.jsx
index 8a2dbf46..79355951 100644
--- a/src/components/actions/MissionControlView.jsx
+++ b/src/components/actions/MissionControlView.jsx
@@ -187,7 +187,7 @@ const MissionControlView = ({ isEmbed = false }) => {
                         className={`mt-4 w-full py-2 ${isRecovering[goal.objectiveId] ? 'bg-slate-50 text-slate-400' : 'bg-rose-50 text-rose-600 hover:bg-rose-100'} rounded-xl text-[10px] font-black uppercase tracking-tighter transition-all flex items-center justify-center gap-2`}
                     >
                         {isRecovering[goal.objectiveId] ? (
-                            <><RefreshCw size={12} className="animate-spin" /> Analyzing Gaps...</>
+                            <><span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 12 }} aria-hidden="true" /> Analyzing Gaps...</>
                         ) : (
                             <><Sparkles size={12} /> Trigger AI Recovery</>
                         )}
diff --git a/src/components/actions/PerformanceChart.jsx b/src/components/actions/PerformanceChart.jsx
index 9275a04c..21cf95bd 100644
--- a/src/components/actions/PerformanceChart.jsx
+++ b/src/components/actions/PerformanceChart.jsx
@@ -64,7 +64,7 @@ const PerformanceChart = ({ chartData, loading }) => {
       <div style={{ minHeight: '300px' }}>
         {loading ? (
           <div className="d-flex align-items-center justify-content-center h-100 py-5">
-            <div className="spinner-border spinner-border-sm text-primary"></div>
+            <span className="icon-[svg-spinners--eclipse] text-primary" aria-hidden="true"></span>
           </div>
         ) : (
           <Chart options={options} series={series} type="area" height={300} />
diff --git a/src/components/actions/TaskStatusTimeline.jsx b/src/components/actions/TaskStatusTimeline.jsx
index 0cd7edd7..cc02a5a7 100644
--- a/src/components/actions/TaskStatusTimeline.jsx
+++ b/src/components/actions/TaskStatusTimeline.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Timeline, Tag } from 'antd';
 import {
   CalendarOutlined, PlayCircleOutlined, SendOutlined,
-  CloseCircleOutlined, CheckCircleOutlined, LoadingOutlined
+  CloseCircleOutlined, CheckCircleOutlined
 } from '@ant-design/icons';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
@@ -126,7 +126,7 @@ const TaskStatusTimeline = ({ task, compact = false }) => {
   // 5. Awaiting Review (Active status is REVIEW and pending)
   if (task.status === 'REVIEW') {
     timelineItems.push({
-      dot: <LoadingOutlined style={{ color: '#9C27B0', fontSize: compact ? 12 : 14 }} spin />,
+      dot: <span className="icon-[svg-spinners--eclipse]" style={{ color: '#9C27B0', fontSize: compact ? 12 : 14 }} aria-hidden="true"></span>,
       label: 'Reviewing',
       color: 'purple',
       children: (
diff --git a/src/components/actions/WorkflowActionButton.jsx b/src/components/actions/WorkflowActionButton.jsx
index 21487520..1bf4ede9 100644
--- a/src/components/actions/WorkflowActionButton.jsx
+++ b/src/components/actions/WorkflowActionButton.jsx
@@ -15,7 +15,7 @@ import {
   PlayCircleOutlined, SendOutlined, CheckOutlined,
   CloseOutlined, CheckCircleOutlined, CloseCircleOutlined,
   SyncOutlined, EyeOutlined, ExclamationCircleOutlined,
-  ReloadOutlined, LoadingOutlined,
+  ReloadOutlined,
 } from '@ant-design/icons';
 import { canDoTransition, getDisplayStatus, getRejectionCount, getLastRejection, hasEverBeenStarted } from '../../services/workflowEngine';
 
@@ -123,7 +123,7 @@ const WorkflowActionButton = ({
           borderRadius: "var(--radius-md)",
           fontSize: size === 'small' ? 11 : 13,
         }}
-        icon={<LoadingOutlined />}
+        icon={<span className="icon-[svg-spinners--eclipse]" aria-hidden="true"></span>}
       >
         Updating...
       </Button>
diff --git a/src/components/ads/AdsImportModal.jsx b/src/components/ads/AdsImportModal.jsx
index afcf6926..27187f11 100644
--- a/src/components/ads/AdsImportModal.jsx
+++ b/src/components/ads/AdsImportModal.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Modal, Segmented, DatePicker, Upload, Alert, Button, Typography, Space } from 'antd';
-import { FileType, Loader2, X } from 'lucide-react';
+import { FileType, X } from 'lucide-react';
 import axios from 'axios';
 import dayjs from 'dayjs';
 import { InboxOutlined } from '@ant-design/icons';
@@ -268,7 +268,7 @@ const AdsImportModal = ({ isOpen, onClose, onComplete, selectedSeller }) => {
                                             {fileStatus.status === 'uploading' && (
                                                 <div className="d-flex align-items-center gap-2">
                                                     <span className="text-primary fw-bold" style={{ fontSize: 'var(--font-size-xs)' }}>{fileStatus.progress}%</span>
-                                                    <Loader2 size={12} className="animate-spin text-primary" />
+                                                    <span className="icon-[svg-spinners--eclipse] text-primary" style={{ fontSize: 12 }} aria-hidden="true" />
                                                 </div>
                                             )}
                                             {fileStatus.status === 'success' && (
diff --git a/src/components/ads/reports/ReportExport.jsx b/src/components/ads/reports/ReportExport.jsx
index 672066ca..52965fa1 100644
--- a/src/components/ads/reports/ReportExport.jsx
+++ b/src/components/ads/reports/ReportExport.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Card, Button, Select, Space, Typography, message, Dropdown } from 'antd';
-import { Download, FileSpreadsheet, FileText, File, Loader2 } from 'lucide-react';
+import { Download, FileSpreadsheet, FileText, File } from 'lucide-react';
 import { adsApi } from '../../services/api';
 import toast from '../../utils/toast';
 
@@ -83,7 +83,7 @@ const ReportExport = ({ data = [], filters = {} }) => {
         <Dropdown menu={{ items: exportOptions }} trigger={['click']}>
           <Button 
             type="primary" 
-            icon={exporting ? <Loader2 size={13} className="animate-spin" /> : <Download size={13} />}
+            icon={exporting ? <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 13 }} aria-hidden="true" /> : <Download size={13} />}
             loading={exporting}
             style={{ borderRadius: "var(--radius-md)", fontWeight: 600 }}
           >
diff --git a/src/components/asins/BulkImportModal.jsx b/src/components/asins/BulkImportModal.jsx
index cae641e1..0984aad9 100644
--- a/src/components/asins/BulkImportModal.jsx
+++ b/src/components/asins/BulkImportModal.jsx
@@ -397,7 +397,7 @@ const BulkImportModal = ({ isOpen, onClose, onComplete, initialSellerId = '', in
                             style={{ borderRadius: 'var(--radius-md)', fontSize: 'var(--font-size-sm)', fontWeight: 600, background: '#18181b' }}
                         >
                             {uploading ? (
-                                <><RefreshCw size={15} className="spin" /> Processing...</>
+                                <><span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 15 }} aria-hidden="true" /> Processing...</>
                             ) : (
                                 <><Upload size={15} /> Start Import</>
                             )}
diff --git a/src/components/asins/BulkTagsModal.jsx b/src/components/asins/BulkTagsModal.jsx
index 19c9d0ff..e6f0d40c 100644
--- a/src/components/asins/BulkTagsModal.jsx
+++ b/src/components/asins/BulkTagsModal.jsx
@@ -440,7 +440,7 @@ const BulkTagsModal = ({ isOpen, onClose, selectedAsins = [], onComplete }) => {
                   onClick={handleApply}
                   disabled={processing}
                   style={{ fontSize: 'var(--font-size-sm)', height: '42px', background: '#18181b' }}>
-                  {processing ? <RefreshCw size={14} className="spin" /> : <Save size={14} />}
+                  {processing ? <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 14 }} aria-hidden="true" /> : <Save size={14} />}
                   {processing ? 'Applying...' : 'Apply Tags'}
                 </button>
               </>
diff --git a/src/components/chat/ChatContainer.jsx b/src/components/chat/ChatContainer.jsx
index 573e1b74..36044c5f 100644
--- a/src/components/chat/ChatContainer.jsx
+++ b/src/components/chat/ChatContainer.jsx
@@ -84,9 +84,7 @@ const ChatContainer = () => {
                     <CometChatHome />
                 ) : isLoggingIn ? (
                     <div className="h-100 d-flex flex-column align-items-center justify-content-center bg-light">
-                        <div className="spinner-border text-primary mb-3" role="status" style={{ width: '3rem', height: '3rem' }}>
-                            <span className="visually-hidden">Loading...</span>
-                        </div>
+                        <span className="icon-[svg-spinners--eclipse] text-primary mb-3" role="status" style={{ fontSize: '3rem' }} aria-label="Loading"></span>
                         <h4 className="text-dark mb-1">Initializing Chat</h4>
                         <p className="text-muted">Please wait while we connect you...</p>
                     </div>
diff --git a/src/components/common/DownloadsDrawer.jsx b/src/components/common/DownloadsDrawer.jsx
index 7234bde5..8026529a 100644
--- a/src/components/common/DownloadsDrawer.jsx
+++ b/src/components/common/DownloadsDrawer.jsx
@@ -286,7 +286,7 @@ const DownloadsDrawer = ({ isOpen, onClose }) => {
                             shape="circle"
                             onClick={handleRefresh}
                             disabled={loading}
-                            icon={<RefreshCw size={14} className={loading ? 'spin-animation' : ''} />}
+                            icon={loading ? <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 14 }} aria-hidden="true" /> : <RefreshCw size={14} />}
                         />
                         <Button
                             type="text"
diff --git a/src/components/common/InfiniteScrollSelect.jsx b/src/components/common/InfiniteScrollSelect.jsx
index 9f96a7c6..6bc8c2db 100644
--- a/src/components/common/InfiniteScrollSelect.jsx
+++ b/src/components/common/InfiniteScrollSelect.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { createPortal } from 'react-dom';
-import { Search, ChevronDown, Check, Loader2, X } from 'lucide-react';
+import { Search, ChevronDown, Check, X } from 'lucide-react';
 
 /**
  * InfiniteScrollSelect - A premium custom dropdown with lazy loading and search.
@@ -243,7 +243,7 @@ const InfiniteScrollSelect = ({
                     <div className="options-list">
                         {loading && options.length === 0 ? (
                             <div className="initial-loader" style={{ padding: '30px', textAlign: 'center' }}>
-                                <Loader2 size={20} className="spin text-zinc-400 mx-auto" />
+                                <span className="icon-[svg-spinners--eclipse] text-zinc-400 mx-auto" style={{ fontSize: 20 }} aria-hidden="true" />
                                 <div style={{ fontSize: 'var(--font-size-xs)', color: '#a1a1aa', marginTop: '8px' }}>Fetching sellers...</div>
                             </div>
                         ) : (
@@ -263,7 +263,7 @@ const InfiniteScrollSelect = ({
                                 {hasMore && (
                                     <div ref={observerTarget} className="sentinel" style={{ height: '30px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                         {loading ? (
-                                            <Loader2 size={12} className="spin text-zinc-400" />
+                                            <span className="icon-[svg-spinners--eclipse] text-zinc-400" style={{ fontSize: 12 }} aria-hidden="true" />
                                         ) : (
                                             <div style={{ height: '1px' }} />
                                         )}
diff --git a/src/components/dashboard/AlertsPipelineCard.jsx b/src/components/dashboard/AlertsPipelineCard.jsx
index 6b665488..892cd1a4 100644
--- a/src/components/dashboard/AlertsPipelineCard.jsx
+++ b/src/components/dashboard/AlertsPipelineCard.jsx
@@ -654,7 +654,7 @@ const AlertsPipelineCard = ({
                                     alignItems: 'center',
                                     gap: 4
                                 }}>
-                                    <Loader2 size={11} className="spinning-icon" />
+                                    <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 11 }} aria-hidden="true" />
                                     {pipelineStats.running} active
                                 </span>
                             )}
@@ -772,7 +772,7 @@ const AlertsPipelineCard = ({
                     >
                         {syncLoading ? (
                             <>
-                                <Loader2 size={14} className="spinning-icon" strokeWidth={2.5} />
+                                <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 14 }} aria-hidden="true" />
                                 Syncing Pipeline...
                             </>
                         ) : (
diff --git a/src/components/dashboard/TopAsinsCard.jsx b/src/components/dashboard/TopAsinsCard.jsx
index 02f2b10b..c9e2bbf4 100644
--- a/src/components/dashboard/TopAsinsCard.jsx
+++ b/src/components/dashboard/TopAsinsCard.jsx
@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 import {
     Trophy,
     Package, ArrowUpRight, BarChart3, Star,
-    ChevronRight, Search, Filter, Eye, ShoppingBag, Loader2
+    ChevronRight, Search, Filter, Eye, ShoppingBag
 } from 'lucide-react';
 import { formatNumber, formatCurrency } from './utils';
 import AsinRow from './AsinRow';
@@ -62,7 +62,7 @@ const ProductList = memo(({ products, maxValue, sortBy }) => {
                     justifyContent: 'center',
                     gap: 8
                 }}>
-                    <Loader2 size={14} style={{ animation: 'spin 1s linear infinite' }} />
+                    <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 14 }} aria-hidden="true" />
                     Loading more products...
                 </div>
             )}
diff --git a/src/components/sellers/ImportSellerModal.jsx b/src/components/sellers/ImportSellerModal.jsx
index 6fd689c6..0cd91fa6 100644
--- a/src/components/sellers/ImportSellerModal.jsx
+++ b/src/components/sellers/ImportSellerModal.jsx
@@ -137,7 +137,7 @@ const ImportSellerModal = ({ onClose, onImport }) => {
           <Button 
             style={{ marginTop: 24, borderRadius: 'var(--radius-full)', fontWeight: 600, padding: '0 24px', background: 'var(--text-primary, #0f172a)', color: '#fff' }}
           >
-            {isUploading ? <RefreshCw size={14} className="spin" /> : <ChevronRight size={14} />}
+            {isUploading ? <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 14 }} aria-hidden="true" /> : <ChevronRight size={14} />}
             <span style={{ marginLeft: 8 }}>Browse manifests</span>
           </Button>
         </Dragger>
diff --git a/src/components/sellers/PoolManagementModal.jsx b/src/components/sellers/PoolManagementModal.jsx
index 844a6a61..e278c6f6 100644
--- a/src/components/sellers/PoolManagementModal.jsx
+++ b/src/components/sellers/PoolManagementModal.jsx
@@ -136,7 +136,7 @@ const PoolManagementModal = ({ stats, onClose, onRefresh }) => {
         confirmIcon={<Upload size={14} />}
         extra={
           <Button
-            icon={<RefreshCw size={14} className={isSyncing ? 'spin' : ''} />}
+            icon={isSyncing ? <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 14 }} aria-hidden="true" /> : <RefreshCw size={14} />}
             onClick={handleFullSync}
             loading={isSyncing}
             className={styles.modalFooterCancel}
diff --git a/src/components/ui/PageLayout.jsx b/src/components/ui/PageLayout.jsx
index 139bedb8..320e7cbc 100644
--- a/src/components/ui/PageLayout.jsx
+++ b/src/components/ui/PageLayout.jsx
@@ -1,8 +1,14 @@
 import React from 'react';
 import { Spin, Empty, Result, Skeleton, Button } from 'antd';
-import { LoadingOutlined, ReloadOutlined, InboxOutlined } from '@ant-design/icons';
+import { ReloadOutlined, InboxOutlined } from '@ant-design/icons';
 
-const antIcon = <LoadingOutlined style={{ fontSize: 'var(--font-size-2xl)', color: '#4F46E5' }} spin />;
+const antIcon = (
+  <span
+    className="icon-[svg-spinners--eclipse]"
+    style={{ fontSize: 'var(--font-size-2xl)', color: '#4F46E5' }}
+    aria-hidden="true"
+  />
+);
 
 export function PageHeader({ title, subtitle, icon, actions, breadcrumbs }) {
   return (
diff --git a/src/index.css b/src/index.css
index 942090e8..0d465a32 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,9 +1,20 @@
 @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Inter:wght@300;400;500;600;700&display=swap');
 @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
 @import "tailwindcss";
+@plugin "@iconify/tailwind4";
 @import './styles/tokens.css';
 @import './styles/antd-overrides.css';
 
+/* ==========================================================================
+   Iconify eclipse spinner (svg-spinners) — used everywhere as THE loader.
+   The eclipse icon is a rotating crescent; CSS masks can't play its SMIL
+   animation, so we rotate the element itself to recreate the spin.
+   ========================================================================== */
+.icon-\[svg-spinners--eclipse\] {
+  display: inline-block;
+  animation: spin 0.6s linear infinite;
+}
+
 /* ==========================================================================
    GMS Dashboard - Global Styles & Typography
    ========================================================================== */
@@ -2668,27 +2679,6 @@ a:hover {
   }
 }
 
-.pulse-loader {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background: var(--color-primary);
-  opacity: 0.6;
-  animation: pulse 1.2s infinite ease-in-out;
-}
-
-@keyframes pulse {
-  0% {
-    transform: scale(0);
-    opacity: 1;
-  }
-
-  100% {
-    transform: scale(1.5);
-    opacity: 0;
-  }
-}
-
 .standard-ui-element {
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
diff --git a/src/pages/AdsReport.jsx b/src/pages/AdsReport.jsx
index 8e9f22ec..3698c4fa 100644
--- a/src/pages/AdsReport.jsx
+++ b/src/pages/AdsReport.jsx
@@ -633,7 +633,7 @@ const efficiencyMetrics = useMemo(() => {
                 onClick={() => fileRef.current.click()}
                 disabled={loading}
               >
-                {loading ? <RefreshCw size={14} className="me-1 spin" /> : <Upload size={14} className="me-1" />}
+                {loading ? <span className="icon-[svg-spinners--eclipse] me-1" style={{ fontSize: 14 }} aria-hidden="true" /> : <Upload size={14} className="me-1" />}
                 Import
               </button>
               <input
@@ -645,7 +645,7 @@ const efficiencyMetrics = useMemo(() => {
               />
 
               <button className="btn btn-white btn-sm rounded-circle p-2 shadow-sm border border-zinc-200" onClick={loadData}>
-                <RefreshCw size={14} className={loading ? 'spin text-primary' : 'text-zinc-500'} />
+                {loading ? <span className="icon-[svg-spinners--eclipse] text-primary" style={{ fontSize: 14 }} aria-hidden="true" /> : <RefreshCw size={14} className="text-zinc-500" />}
               </button>
             </div>
           </div>
diff --git a/src/pages/AlertsPage.jsx b/src/pages/AlertsPage.jsx
index 37642608..ca339f2e 100644
--- a/src/pages/AlertsPage.jsx
+++ b/src/pages/AlertsPage.jsx
@@ -411,7 +411,7 @@ const AlertsPage = () => {
                     <Space size="middle">
                         <Button 
                             onClick={() => fetchNotifications(true)} 
-                            icon={<RefreshCw size={14} className={loading ? 'animate-spin' : ''} />}
+                            icon={loading ? <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 14 }} aria-hidden="true" /> : <RefreshCw size={14} />}
                             disabled={loading}
                             style={{ borderRadius: 'var(--radius-md)', height: 38, fontWeight: 600, color: 'var(--text-primary)', display: 'flex', alignItems: 'center', gap: '6px' }}
                         >
diff --git a/src/pages/ApiKeysPage.jsx b/src/pages/ApiKeysPage.jsx
index 0d286dbf..6ea82958 100644
--- a/src/pages/ApiKeysPage.jsx
+++ b/src/pages/ApiKeysPage.jsx
@@ -1,7 +1,7 @@
 import { Spinner } from "@/components/Spinner";
 import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
-import { Copy, Check, ChevronRight, Eye, EyeOff, RefreshCw, Plus, Trash2, Edit, AlertCircle, Loader2, X } from 'lucide-react';
+import { Copy, Check, ChevronRight, Eye, EyeOff, RefreshCw, Plus, Trash2, Edit, AlertCircle, X } from 'lucide-react';
 import api from '../services/api';
 import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Form, FormGroup, Label, Input, Alert } from 'reactstrap';
 import 'bootstrap/dist/css/bootstrap.min.css';
@@ -222,7 +222,7 @@ return (
                         className="btn btn-link text-decoration-none text-muted p-0 d-flex align-items-center gap-1 smallest fw-semibold"
                         disabled={loading}
                     >
-                        <RefreshCw size={14} className={loading ? 'spin' : ''} /> Refresh List
+                        {loading ? <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 14 }} aria-hidden="true" /> : <RefreshCw size={14} />} Refresh List
                     </button>
                 </div>
 
@@ -404,7 +404,7 @@ return (
                             Cancel
                         </Button>
                         <Button color="primary" type="submit" disabled={saving} className="px-4 fw-bold shadow-sm" style={{ borderRadius: '10px' }}>
-                            {saving ? <Loader2 className="spin" size={16} /> : (editingKey ? 'Update Configuration' : 'Save Integration')}
+                            {saving ? <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 16 }} aria-hidden="true" /> : (editingKey ? 'Update Configuration' : 'Save Integration')}
                         </Button>
                     </ModalFooter>
                 </Form>
diff --git a/src/pages/AsinManagerPage.jsx b/src/pages/AsinManagerPage.jsx
index c810cbad..06b1f0ca 100644
--- a/src/pages/AsinManagerPage.jsx
+++ b/src/pages/AsinManagerPage.jsx
@@ -2098,7 +2098,7 @@ const AsinManagerPage = (props) => {
       {/* Repair Progress simplified */}
       {repairStatus && (
         <div className="mt-2 py-1 px-3 bg-amber-50 border border-amber-100 rounded-2 d-flex align-items-center gap-3">
-          <div className="spin text-amber-500"><Zap size={12} /></div>
+          <span className="icon-[svg-spinners--eclipse] text-amber-500" style={{ fontSize: 12 }} aria-hidden="true" />
           <span className="smallest text-amber-900 fw-bold text-uppercase tracking-wider" style={{ fontSize: '9px' }}>Data Repair</span>
           <div className="flex-grow-1" style={{ height: '4px', background: '#fef3c7', borderRadius: '2px', overflow: 'hidden' }}>
             <div style={{ height: '100%', background: 'var(--text-warning)', width: `${repairStatus.percentage}%`, transition: 'width 0.4s ease' }} />
@@ -2323,7 +2323,7 @@ const AsinManagerPage = (props) => {
               {/* Scrape Progress */}
               {scrapeProgress && (
                 <div className="bg-light border rounded-2 px-2 d-flex align-items-center gap-2" style={{ height: '32px', borderColor: 'var(--border-light)' }}>
-                  <RefreshCw size={12} className="spin" style={{ color: 'var(--text-danger)' }} />
+                  <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 12, color: 'var(--text-danger)' }} aria-hidden="true" />
                   <span className="fw-bold font-monospace small" style={{ color: 'var(--text-primary)' }}>{scrapeProgress.processed}/{scrapeProgress.total}</span>
                 </div>
               )}
@@ -2343,7 +2343,7 @@ const AsinManagerPage = (props) => {
                   style={{ borderRadius: 'var(--radius-md)' }}
                 />
                 <Button
-                  icon={<RefreshCw size={14} className={syncing ? 'spin' : ''} />}
+                  icon={syncing ? <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 14 }} aria-hidden="true" /> : <RefreshCw size={14} />}
                   onClick={handleBulkScrape}
                   disabled={syncing}
                   style={{
@@ -2509,7 +2509,7 @@ const AsinManagerPage = (props) => {
                   disabled={syncing}
                   style={{ fontSize: 'var(--font-size-xs)' }}
                 >
-                  <RefreshCw size={12} className={syncing ? 'spin' : ''} /> Sync
+                  {syncing ? <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 12 }} aria-hidden="true" /> : <RefreshCw size={12} />} Sync
                 </button>
                 <button
                   className="btn btn-sm btn-white border border-indigo-100 shadow-sm text-indigo-700 fw-bold rounded-2 d-flex align-items-center gap-1.5"
diff --git a/src/pages/MonthWiseReport.jsx b/src/pages/MonthWiseReport.jsx
index fba914d4..bdd27791 100644
--- a/src/pages/MonthWiseReport.jsx
+++ b/src/pages/MonthWiseReport.jsx
@@ -191,7 +191,7 @@ const MonthWiseReport = () => {
 
           <div className="d-flex align-items-center gap-2">
             <button className="btn btn-dark btn-sm rounded-pill px-3 py-2 shadow-sm fw-700 d-flex align-items-center gap-2" onClick={loadMonthlyData}>
-              <RefreshCw size={14} className={loading ? 'spin' : ''} />
+              {loading ? <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 14 }} aria-hidden="true" /> : <RefreshCw size={14} />}
               REFRESH
             </button>
           </div>
diff --git a/src/pages/ParentAsinReport.jsx b/src/pages/ParentAsinReport.jsx
index 013f1ec2..e093fb8c 100644
--- a/src/pages/ParentAsinReport.jsx
+++ b/src/pages/ParentAsinReport.jsx
@@ -301,7 +301,7 @@ const ParentAsinReport = () => {
         <Segmented size="small" value={view} onChange={setView}
           options={[{ label: <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}><LayoutList size={13} />Table</span>, value: 'table' },
           { label: <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}><BarChart2 size={13} />Charts</span>, value: 'charts' }]} />
-        <Button size="small" icon={<RefreshCw size={13} className={loading ? 'spin-animation' : ''} />} loading={loading} onClick={loadData} style={{ borderRadius: "var(--radius-md)", fontWeight: 600, fontSize: 'var(--font-size-xs)' }}>Refresh</Button>
+        <Button size="small" icon={<RefreshCw size={13} />} loading={loading} onClick={loadData} style={{ borderRadius: "var(--radius-md)", fontWeight: 600, fontSize: 'var(--font-size-xs)' }}>Refresh</Button>
       </div>
 
       {/* KPI STRIP */}
diff --git a/src/pages/ResetPasswordPage.jsx b/src/pages/ResetPasswordPage.jsx
index 7bef0f36..5e4c038e 100644
--- a/src/pages/ResetPasswordPage.jsx
+++ b/src/pages/ResetPasswordPage.jsx
@@ -91,7 +91,7 @@ const ResetPasswordPage = () => {
     return (
       <AuthLayout>
         <div className={styles.textCenter} style={{ padding: '40px 0' }}>
-          <div className={styles.spinner} />
+          <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 28 }} aria-hidden="true" />
           <Text style={{ fontSize: 'var(--font-size-sm)', color: 'var(--text-secondary)' }}>Validating reset link...</Text>
         </div>
       </AuthLayout>
diff --git a/src/pages/ScheduledRunsPage.jsx b/src/pages/ScheduledRunsPage.jsx
index 7798e242..0b8368ba 100644
--- a/src/pages/ScheduledRunsPage.jsx
+++ b/src/pages/ScheduledRunsPage.jsx
@@ -3,7 +3,6 @@ import React, { useState, useEffect, useMemo, Suspense, lazy, useCallback } from
 import {
     PlayCircle,
     RefreshCw,
-    Loader2,
     Search,
     ChevronDown,
     List,
@@ -904,7 +903,7 @@ const ScheduledRunsPage = () => {
                     <Tooltip title="Refresh telemetry data">
                         <Button
                             onClick={() => fetchData()}
-                            icon={<RefreshCw size={14} className={loading ? 'spin' : ''} />}
+                            icon={loading ? <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 14 }} aria-hidden="true" /> : <RefreshCw size={14} />}
                             style={{ height: '36px', fontWeight: 600, borderRadius: tokens.radius.sm, borderColor: tokens.border }}
                         >
                             Sync
@@ -1001,7 +1000,7 @@ const ScheduledRunsPage = () => {
             >
                 {logsLoading ? (
                     <div style={{ display: 'flex', height: '100%', alignItems: 'center', justifyContent: 'center' }}>
-                        <Loader2 size={32} className="spin" style={{ color: tokens.brand.primary }} />
+                        <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 32, color: tokens.brand.primary }} aria-hidden="true" />
                     </div>
                 ) : sellerLogs.length === 0 ? (
                     <Empty description="No logs found for this seller" style={{ marginTop: '80px' }} />
diff --git a/src/pages/ScrapeTasksPage.jsx b/src/pages/ScrapeTasksPage.jsx
index 12100fd1..0df3cf97 100644
--- a/src/pages/ScrapeTasksPage.jsx
+++ b/src/pages/ScrapeTasksPage.jsx
@@ -130,7 +130,7 @@ const ScrapeTasksPage = () => {
     const { className, icon: Icon, label, spin } = map[status] || { className: 'badge-idle', icon: Clock, label: status };
     return (
       <span className={`sync-status-badge ${className}`}>
-        <Icon size={14} className={`me-1 ${spin ? 'spin' : ''}`} />
+        {spin ? <span className="icon-[svg-spinners--eclipse] me-1" style={{ fontSize: 14 }} aria-hidden="true" /> : <Icon size={14} className="me-1" />}
         {label}
       </span>
     );
@@ -258,7 +258,7 @@ const ScrapeTasksPage = () => {
           </div>
           <div className="d-flex gap-2">
             <button className="btn btn-white shadow-sm border px-3 d-flex align-items-center gap-2" onClick={() => loadSyncTasks(true)} disabled={refreshing}>
-              {refreshing ? <span className="spinner-border spinner-border-sm"></span> : <RefreshCcw size={16} />}
+              {refreshing ? <span className="icon-[svg-spinners--eclipse]" aria-hidden="true"></span> : <RefreshCcw size={16} />}
               Refresh Status
             </button>
             <button 
@@ -266,7 +266,7 @@ const ScrapeTasksPage = () => {
                 onClick={handleBulkDuplicate} 
                 disabled={bulkSyncing || loading}
             >
-                {bulkSyncing ? <span className="spinner-border spinner-border-sm"></span> : <Plus size={16} />}
+                {bulkSyncing ? <span className="icon-[svg-spinners--eclipse]" aria-hidden="true"></span> : <Plus size={16} />}
                 {bulkSyncing ? 'Creating Tasks...' : 'Assign & Duplicate Tasks'}
             </button>
             <button 
@@ -274,7 +274,7 @@ const ScrapeTasksPage = () => {
                 onClick={handleBulkInject} 
                 disabled={bulkSyncing || loading}
             >
-                {bulkSyncing ? <span className="spinner-border spinner-border-sm"></span> : <CloudDownload size={16} />}
+                {bulkSyncing ? <span className="icon-[svg-spinners--eclipse]" aria-hidden="true"></span> : <CloudDownload size={16} />}
                 {bulkSyncing ? 'Syncing ASINs...' : 'Sync ASINs to Cloud'}
             </button>
             <button className="btn btn-primary shadow-sm px-4 d-flex align-items-center gap-2" onClick={() => marketSyncApi.ingestAllResults().then(() => alert('Global ingestion started'))}>
@@ -371,7 +371,7 @@ const ScrapeTasksPage = () => {
                           disabled={task.status === 'RUNNING' || syncing[task.sellerId]}
                           title="Trigger extraction"
                         >
-                          {syncing[task.sellerId] ? <span className="spinner-border spinner-border-sm"></span> : <Play size={18} />}
+                          {syncing[task.sellerId] ? <span className="icon-[svg-spinners--eclipse]" aria-hidden="true"></span> : <Play size={18} />}
                         </button>
                         <button 
                           className="btn btn-outline-success" 
diff --git a/src/pages/SellerAsinTrackerPage.jsx b/src/pages/SellerAsinTrackerPage.jsx
index 098b8d49..9d2031fb 100644
--- a/src/pages/SellerAsinTrackerPage.jsx
+++ b/src/pages/SellerAsinTrackerPage.jsx
@@ -191,7 +191,7 @@ const TimelineItem = memo(({ activity }) => {
         flexShrink: 0,
         border: `1px solid ${config.color}25`
       }}>
-        <Icon size={15} strokeWidth={2} className={isAnimated ? styles.spinAnimation : ''} />
+        {isAnimated ? <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 15 }} aria-hidden="true" /> : <Icon size={15} strokeWidth={2} />}
       </div>
 
       <div style={{ flex: 1, minWidth: 0 }}>
@@ -925,7 +925,7 @@ const SellerDetailView = ({ seller, onSync, syncing, refreshKey }) => {
               size="small"
               onClick={() => onSync(seller._id)}
               loading={syncing}
-              icon={<RefreshCw size={13} strokeWidth={2} className={syncing ? styles.spinAnimation : ''} />}
+              icon={syncing ? <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 13 }} aria-hidden="true" /> : <RefreshCw size={13} strokeWidth={2} />}
             >
               {syncing ? 'Syncing' : 'Sync Now'}
             </Button>
@@ -1563,7 +1563,7 @@ const SellerAsinTrackerPage = () => {
                 type="primary"
                 size="small"
                 block
-                icon={<RefreshCw size={12} strokeWidth={2} className={syncingAll ? styles.spinAnimation : ''} />}
+                icon={syncingAll ? <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 12 }} aria-hidden="true" /> : <RefreshCw size={12} strokeWidth={2} />}
                 onClick={handleSyncAll}
                 loading={syncingAll}
               >
diff --git a/src/pages/SellersPage.jsx b/src/pages/SellersPage.jsx
index de5e431e..0a655a95 100644
--- a/src/pages/SellersPage.jsx
+++ b/src/pages/SellersPage.jsx
@@ -809,7 +809,7 @@ const SellersPage = () => {
         </Tooltip>
         <Tooltip title="Sync Store">
           <Button type="text" size="small"
-            icon={<RefreshCw size={14} className={isSyncing ? styles.spin : ''} />}
+            icon={isSyncing ? <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 14 }} aria-hidden="true" /> : <RefreshCw size={14} />}
             loading={isSyncing}
             onClick={() => handleSyncSeller(seller._id)}
             style={{ color: 'var(--text-muted, #94a3b8)' }} />
@@ -1078,7 +1078,7 @@ const SellersPage = () => {
           borderBottom: '1px solid #EF9A9A',
           display: 'flex', alignItems: 'center', gap: 12
         }}>
-          <Zap size={14} className={styles.spin} style={{ color: 'var(--text-danger, #D32F2F)' }} />
+          <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 14, color: 'var(--text-danger, #D32F2F)' }} aria-hidden="true" />
           <Text style={{ color: 'var(--text-danger, #D32F2F)', fontSize: 'var(--font-size-sm)', fontWeight: 600 }}>
             Global Live Sync Running
           </Text>
diff --git a/src/pages/SettingsPage.jsx b/src/pages/SettingsPage.jsx
index 262eebb4..f8a34adb 100644
--- a/src/pages/SettingsPage.jsx
+++ b/src/pages/SettingsPage.jsx
@@ -407,7 +407,7 @@ const SettingsPage = () => {
                                 <Divider style={{ margin: '8px 0' }} />
                                 <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
                                     <Button
-                                        icon={<RefreshCw size={13} strokeWidth={2} className={testingOctoparse ? 'spin-animation' : ''} />}
+                                        icon={<RefreshCw size={13} strokeWidth={2} />}
                                         loading={testingOctoparse}
                                         onClick={handleTestOctoparse}
                                         style={{ borderRadius: 6, fontWeight: 600, fontSize: 'var(--font-size-sm)', height: 34 }}
diff --git a/src/pages/SetupWizardPage.jsx b/src/pages/SetupWizardPage.jsx
index 3274ab4f..eeae7769 100644
--- a/src/pages/SetupWizardPage.jsx
+++ b/src/pages/SetupWizardPage.jsx
@@ -22,7 +22,6 @@ import {
   AlertTriangle,
   UserCheck,
   Sparkles,
-  Loader2,
   ChevronRight,
   Info,
   ExternalLink,
@@ -670,7 +669,7 @@ const SetupWizardPage = () => {
                   >
                     {loading ? (
                       <>
-                        <Loader2 size={16} className="spin" />
+                        <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 16 }} aria-hidden="true" />
                         Processing...
                       </>
                     ) : (
@@ -688,7 +687,7 @@ const SetupWizardPage = () => {
                   >
                     {loading ? (
                       <>
-                        <Loader2 size={16} className="spin" />
+                        <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 16 }} aria-hidden="true" />
                         Loading...
                       </>
                     ) : (
diff --git a/src/pages/SkuReport.jsx b/src/pages/SkuReport.jsx
index 6afb176e..01695a9f 100644
--- a/src/pages/SkuReport.jsx
+++ b/src/pages/SkuReport.jsx
@@ -218,7 +218,7 @@ const SkuReport = () => {
           ]} />
         <Segmented size="small" value={view} onChange={setView}
           options={[{ label: 'Table', value: 'table' }, { label: 'Charts', value: 'charts' }]} />
-        <Button size="small" icon={<RefreshCw size={13} className={loading ? 'spin-animation' : ''} />} loading={loading} onClick={loadSkuData} style={{ borderRadius: "var(--radius-md)", fontWeight: 600, fontSize: 'var(--font-size-xs)' }}>Refresh</Button>
+        <Button size="small" icon={<RefreshCw size={13} />} loading={loading} onClick={loadSkuData} style={{ borderRadius: "var(--radius-md)", fontWeight: 600, fontSize: 'var(--font-size-xs)' }}>Refresh</Button>
         <Button size="small" icon={<Download size={13} />} onClick={handleExport} style={{ borderRadius: "var(--radius-md)", fontWeight: 600, fontSize: 'var(--font-size-xs)' }}>Export</Button>
       </div>
 
diff --git a/src/pages/TemplateManagerPage.jsx b/src/pages/TemplateManagerPage.jsx
index 1217c133..7d64c588 100644
--- a/src/pages/TemplateManagerPage.jsx
+++ b/src/pages/TemplateManagerPage.jsx
@@ -2,7 +2,7 @@ import { Spinner } from "@/components/Spinner";
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { db } from '../services/db';
 import {
-    Plus, Edit2, Trash2, Search, Clock, Check, Loader2, Zap, Sparkles, Target, Settings, LayoutTemplate, BarChart2
+    Plus, Edit2, Trash2, Search, Clock, Check, Zap, Sparkles, Target, Settings, LayoutTemplate, BarChart2
 } from 'lucide-react';
 import { PageLoader } from '@/components/application/loading-indicator/PageLoader';
 import { LoadingIndicator } from '@/components/application/loading-indicator/loading-indicator';
@@ -967,7 +967,7 @@ const TemplateManagerPage = () => {
                         <div style={{ display: 'flex', justifyContent: 'flex-end', padding: 4 }}>
                             <Button 
                                 type="primary" 
-                                icon={aiGenerating ? <Loader2 size={14} className="animate-spin" /> : <Sparkles size={14} />} 
+                                icon={aiGenerating ? <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 14 }} aria-hidden="true" /> : <Sparkles size={14} />} 
                                 disabled={aiGenerating || !aiPrompt.trim()} 
                                 onClick={handleAiGenerate}
                                 shape="round"
diff --git a/src/pages/WebhookSettingsPage.jsx b/src/pages/WebhookSettingsPage.jsx
index 0ff6097d..5e7d0c3c 100644
--- a/src/pages/WebhookSettingsPage.jsx
+++ b/src/pages/WebhookSettingsPage.jsx
@@ -170,7 +170,7 @@ export default function WebhookSettingsPage() {
   // ── render ──
   if (loading) return (
     <div className="ws-loading">
-      <div className="ws-spinner" /><span>Loading webhook settings…</span>
+      <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 18 }} aria-hidden="true" /><span>Loading webhook settings…</span>
     </div>
   );
 
@@ -285,7 +285,7 @@ export default function WebhookSettingsPage() {
                           disabled={isTesting}
                           title="Send test event"
                         >
-                          {isTesting ? <RefreshCw size={13} className="spin" /> : <Send size={13} />}
+                          {isTesting ? <span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 13 }} aria-hidden="true" /> : <Send size={13} />}
                           {isTesting ? 'Sending…' : 'Test'}
                         </button>
                         <button className="ws-btn ws-btn--sm" onClick={() => openEdit(wh)} title="Edit"><Edit3 size={13} /></button>
@@ -416,7 +416,7 @@ export default function WebhookSettingsPage() {
             <div className="ws-modal-footer">
               <button type="button" className="ws-btn ws-btn--ghost" onClick={() => setShowForm(false)}>Cancel</button>
               <button type="submit" className="ws-btn ws-btn--primary" disabled={saving}>
-                {saving ? <><RefreshCw size={13} className="spin" /> Saving…</> : editingId ? 'Update Webhook' : 'Create Webhook'}
+                {saving ? <><span className="icon-[svg-spinners--eclipse]" style={{ fontSize: 13 }} aria-hidden="true" /> Saving…</> : editingId ? 'Update Webhook' : 'Create Webhook'}
               </button>
             </div>
           </form>