diff --git a/apps/server/AliasVault.Client/tailwind.config.js b/apps/server/AliasVault.Client/tailwind.config.js
index 4b67e5747..0aff240f4 100644
--- a/apps/server/AliasVault.Client/tailwind.config.js
+++ b/apps/server/AliasVault.Client/tailwind.config.js
@@ -52,6 +52,15 @@ module.exports = {
             minWidth: {
                 'kanban': '28rem'
             },
+            animation: {
+                'spin-ccw': 'spin-ccw 1s linear infinite',
+            },
+            keyframes: {
+                'spin-ccw': {
+                    'from': { transform: 'rotate(0deg)' },
+                    'to': { transform: 'rotate(-360deg)' }
+                }
+            },
         },
     },
     plugins: [
diff --git a/apps/server/AliasVault.Client/wwwroot/css/tailwind.css b/apps/server/AliasVault.Client/wwwroot/css/tailwind.css
index 7ff27dfbd..4a7990af6 100644
--- a/apps/server/AliasVault.Client/wwwroot/css/tailwind.css
+++ b/apps/server/AliasVault.Client/wwwroot/css/tailwind.css
@@ -1171,6 +1171,20 @@ video {
   animation: spin 1s linear infinite;
 }
 
+@keyframes spin-ccw {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(-360deg);
+  }
+}
+
+.animate-spin-ccw {
+  animation: spin-ccw 1s linear infinite;
+}
+
 .cursor-not-allowed {
   cursor: not-allowed;
 }
diff --git a/apps/server/Shared/AliasVault.RazorComponents/Buttons/RefreshButton.razor b/apps/server/Shared/AliasVault.RazorComponents/Buttons/RefreshButton.razor
index a1839960f..af7bb738b 100644
--- a/apps/server/Shared/AliasVault.RazorComponents/Buttons/RefreshButton.razor
+++ b/apps/server/Shared/AliasVault.RazorComponents/Buttons/RefreshButton.razor
@@ -72,6 +72,6 @@
     /// <returns>A string containing the CSS classes for the icon.</returns>
     private string GetIconClasses()
     {
-        return $"w-4 h-4 {(IsRefreshing ? "animate-spin" : "")}";
+        return $"w-4 h-4 {(IsRefreshing ? "animate-spin-ccw" : "")}";
     }
 }