diff --git a/deepfence_frontend/apps/dashboard/src/features/registries/pages/RegistryAccounts.tsx b/deepfence_frontend/apps/dashboard/src/features/registries/pages/RegistryAccounts.tsx
index dadd7031b0..c1ccfda053 100644
--- a/deepfence_frontend/apps/dashboard/src/features/registries/pages/RegistryAccounts.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/registries/pages/RegistryAccounts.tsx
@@ -308,7 +308,9 @@ const Header = () => {
         </BreadcrumbLink>
       </Breadcrumb>
       <div className="ml-2 flex items-center">
-        {isFetching ? <CircleSpinner size="sm" /> : null}
+        {isFetching ? (
+          <CircleSpinner size="sm" data-testid="registryAccountSpinnerId" />
+        ) : null}
       </div>
     </div>
   );
diff --git a/deepfence_frontend/apps/dashboard/src/features/topology/data-components/node-details/Host.tsx b/deepfence_frontend/apps/dashboard/src/features/topology/data-components/node-details/Host.tsx
index e5f7c4ef36..a348e6c3de 100644
--- a/deepfence_frontend/apps/dashboard/src/features/topology/data-components/node-details/Host.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/topology/data-components/node-details/Host.tsx
@@ -97,7 +97,7 @@ export const Host = (props: HostModalProps) => {
             <Suspense
               fallback={
                 <div className="min-h-[300px] flex items-center justify-center dark:bg-bg-side-panel">
-                  <CircleSpinner size="lg" />
+                  <CircleSpinner size="lg" data-testid="nodeDetailsSpinnerId" />
                 </div>
               }
             >
diff --git a/deepfence_frontend/apps/dashboard/src/features/vulnerabilities/pages/VulnerabilityScans.tsx b/deepfence_frontend/apps/dashboard/src/features/vulnerabilities/pages/VulnerabilityScans.tsx
index 5c22ff4320..2e8213df08 100644
--- a/deepfence_frontend/apps/dashboard/src/features/vulnerabilities/pages/VulnerabilityScans.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/vulnerabilities/pages/VulnerabilityScans.tsx
@@ -1212,7 +1212,9 @@ const VulnerabilityScans = () => {
           </BreadcrumbLink>
         </Breadcrumb>
         <div className="ml-2 flex items-center">
-          {isFetching ? <CircleSpinner size="sm" /> : null}
+          {isFetching ? (
+            <CircleSpinner size="sm" data-testid="scanListSpinnerId" />
+          ) : null}
         </div>
       </div>
 
diff --git a/deepfence_frontend/packages/ui-components/src/components/spinner/CircleSpinner.tsx b/deepfence_frontend/packages/ui-components/src/components/spinner/CircleSpinner.tsx
index 7c28a05a18..2019eac3e8 100644
--- a/deepfence_frontend/packages/ui-components/src/components/spinner/CircleSpinner.tsx
+++ b/deepfence_frontend/packages/ui-components/src/components/spinner/CircleSpinner.tsx
@@ -18,9 +18,18 @@ const spinnerCVA = cva(['animate-spin dark:text-bg-side-panel fill-accent-accent
   },
 });
 
-export const CircleSpinner = ({ size = 'md', className }: CircleSpinnerProps) => {
+export const CircleSpinner = ({
+  size = 'md',
+  className,
+  ...props
+}: CircleSpinnerProps) => {
   return (
-    <div className="inline-block bg-transparent" role="status">
+    <div
+      className="inline-block bg-transparent"
+      role="status"
+      data-testid="circularSpinnerId"
+      {...props}
+    >
       <svg
         aria-hidden="true"
         className={cn(