diff --git a/frontend/src/components/dashboard/StatCard.tsx b/frontend/src/components/dashboard/StatCard.tsx
new file mode 100644
index 000000000..286c18e3c
--- /dev/null
+++ b/frontend/src/components/dashboard/StatCard.tsx
@@ -0,0 +1,216 @@
+import React from 'react';
+import { motion, Variants } from 'framer-motion';
+import { Link } from 'react-router-dom';
+import { ChevronUp, ChevronDown, FileText, Activity } from 'lucide-react';
+
+interface StatCardProps {
+  title: string;
+  value: number | string;
+  icon: React.ElementType;
+  change?: number;
+  iconColor: 'blue' | 'green' | 'purple' | 'amber' | 'gray';
+  isContext?: boolean;
+  link?: string;
+  variants?: Variants;
+}
+
+const defaultVariants: Variants = {
+  initial: { opacity: 0, y: 20 },
+  animate: { opacity: 1, y: 0, transition: { duration: 0.5, ease: 'easeOut' } },
+  exit: { opacity: 0, y: -10, transition: { duration: 0.3 } },
+};
+
+// Get colors for gradient based on the icon color type
+const getGradient = (iconColor: string) => {
+  switch (iconColor) {
+    case 'blue':
+      return 'bg-gradient-to-br from-blue-500/10 to-indigo-600/5 dark:from-blue-900/20 dark:to-indigo-900/10';
+    case 'green':
+      return 'bg-gradient-to-br from-emerald-500/10 to-green-600/5 dark:from-emerald-900/20 dark:to-green-900/10';
+    case 'purple':
+      return 'bg-gradient-to-br from-violet-500/10 to-purple-600/5 dark:from-violet-900/20 dark:to-purple-900/10';
+    case 'amber':
+      return 'bg-gradient-to-br from-amber-500/10 to-orange-600/5 dark:from-amber-900/20 dark:to-orange-900/10';
+    case 'gray':
+    default:
+      return 'bg-gradient-to-br from-gray-600/15 to-gray-700/10 dark:from-gray-800/30 dark:to-gray-900/20';
+  }
+};
+
+// Get colors for the icon container
+const getIconGradient = (iconColor: string) => {
+  switch (iconColor) {
+    case 'blue':
+      return 'bg-gradient-to-br from-blue-500 to-indigo-600 dark:from-blue-400 dark:to-indigo-500';
+    case 'green':
+      return 'bg-gradient-to-br from-emerald-500 to-green-600 dark:from-emerald-400 dark:to-green-500';
+    case 'purple':
+      return 'bg-gradient-to-br from-violet-500 to-purple-600 dark:from-violet-400 dark:to-purple-500';
+    case 'amber':
+      return 'bg-gradient-to-br from-amber-500 to-orange-600 dark:from-amber-400 dark:to-orange-500';
+    case 'gray':
+    default:
+      return 'bg-gradient-to-br from-gray-500 to-gray-600 dark:from-gray-400 dark:to-gray-500';
+  }
+};
+
+interface CardLinkWrapperProps {
+  children?: React.ReactNode;
+  link?: string;
+}
+
+const CardLinkWrapper: React.FC<CardLinkWrapperProps> = ({ children, link }) => {
+  return link ? (
+    <Link to={link} className="block h-full w-full">
+      {children}
+    </Link>
+  ) : (
+    <div className="block h-full w-full cursor-default">{children}</div>
+  );
+};
+
+// Get indicator component based on card type
+const getIndicator = (title: string) => {
+  if (title === 'Total Clusters') {
+    return (
+      <div className="flex h-10 items-end space-x-1">
+        {[0.4, 0.7, 1, 0.6, 0.8].map((height, i) => (
+          <motion.div
+            key={i}
+            className="w-1.5 rounded-t bg-blue-500/70 dark:bg-blue-400/70"
+            initial={{ height: 0 }}
+            animate={{ height: `${height * 40}px` }}
+            transition={{ delay: i * 0.1, duration: 0.5 }}
+          ></motion.div>
+        ))}
+      </div>
+    );
+  }
+
+  if (title === 'Active Clusters') {
+    return (
+      <div className="flex h-10 w-10 items-center justify-center">
+        <div className="flex -space-x-1.5">
+          {[...Array(3)].map((_, i) => (
+            <motion.div
+              key={i}
+              className="h-5 w-5 rounded-full border-2 border-white bg-emerald-500/80 dark:border-gray-800 dark:bg-emerald-400/80"
+              initial={{ scale: 0, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              transition={{ delay: i * 0.1, duration: 0.3 }}
+            ></motion.div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (title === 'Binding Policies') {
+    return (
+      <div className="relative flex h-10 w-10 items-center justify-center">
+        <div className="absolute inset-0 rounded-full bg-purple-100 dark:bg-purple-900/30"></div>
+        <FileText
+          size={60}
+          className="scale-[0.65] transform text-purple-600/80 dark:text-purple-400/80"
+        />
+      </div>
+    );
+  }
+
+  if (title === 'Current Context') {
+    return (
+      <div className="relative flex h-10 w-10 items-center justify-center">
+        <div className="absolute inset-0 rounded-full border-2 border-amber-500/30 bg-amber-500/10 dark:border-amber-400/30 dark:bg-amber-400/10"></div>
+        <div className="absolute inset-0 rounded-full border-2 border-dashed border-amber-500/40 dark:border-amber-400/40"></div>
+        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-amber-500/20 to-amber-600/30 dark:from-amber-400/20 dark:to-amber-500/30">
+          <Activity size={16} className="text-amber-600 dark:text-amber-400" />
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+};
+const StatCard: React.FC<StatCardProps> = ({
+  title,
+  value,
+  icon: Icon,
+  change,
+  iconColor,
+  isContext = false,
+  link,
+  variants = defaultVariants,
+}) => {
+  // Determine if change is positive, negative or neutral
+  const isPositive = typeof change === 'number' && change > 0;
+  const isNegative = typeof change === 'number' && change < 0;
+
+  return (
+    <CardLinkWrapper link={link}>
+      <motion.div
+        className={`flex flex-col rounded-xl border border-gray-100 p-6 shadow-sm transition-all duration-300 dark:border-gray-700 ${getGradient(iconColor)} relative overflow-hidden`}
+        whileHover={{
+          y: -4,
+          boxShadow: '0 12px 24px rgba(0, 0, 0, 0.12)',
+          transition: { duration: 0.3, ease: [0.23, 1, 0.32, 1] },
+        }}
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.4 }}
+        variants={variants}
+      >
+        {/* Decorative background elements for visual interest without animation loops */}
+        <div className="absolute -right-4 -top-4 h-16 w-16 rounded-full bg-gradient-to-br from-white/5 to-white/10 dark:from-gray-700/10 dark:to-gray-700/20"></div>
+        <div className="absolute -bottom-6 -left-6 h-24 w-24 rounded-full bg-gradient-to-tl from-white/5 to-white/0 dark:from-gray-700/5 dark:to-transparent"></div>
+
+        <div className="mb-4 flex items-center justify-between">
+          <div className="flex items-center">
+            <div
+              className={`rounded-xl p-2.5 ${getIconGradient(iconColor)} mr-3 text-white shadow-lg`}
+            >
+              {React.createElement(Icon, { size: 18 })}
+            </div>
+            <span className="text-sm font-medium text-gray-700 transition-colors dark:text-gray-300">
+              {title}
+            </span>
+          </div>
+        </div>
+
+        <div className="mt-1 flex items-end justify-between">
+          <div className="min-w-0 flex-grow">
+            <div className="flex items-center">
+              <h3 className="truncate text-3xl font-bold text-gray-900 transition-colors dark:text-gray-50">
+                {value}
+              </h3>
+              {isContext && (
+                <div className="ml-2 h-2.5 w-2.5 rounded-full bg-green-500 shadow-[0_0_10px_rgba(34,197,94,0.6)]"></div>
+              )}
+            </div>
+            {change !== undefined && (
+              <div className="mt-2.5 flex w-fit items-center rounded-full bg-gray-50 px-3 py-1 dark:bg-gray-800/50">
+                {isPositive && <ChevronUp size={16} className="mr-1.5 text-emerald-500" />}
+                {isNegative && <ChevronDown size={16} className="mr-1.5 text-red-500" />}
+                <span
+                  className={
+                    isPositive
+                      ? 'text-sm font-medium text-emerald-500'
+                      : isNegative
+                        ? 'text-sm font-medium text-red-500'
+                        : 'text-sm font-medium text-gray-500 dark:text-gray-400'
+                  }
+                >
+                  {Math.abs(change)}% {isPositive ? 'increase' : isNegative ? 'decrease' : 'change'}
+                </span>
+              </div>
+            )}
+          </div>
+
+          {/* Static visual indicators that don't use infinite animation loops */}
+          {getIndicator(title)}
+        </div>
+      </motion.div>
+    </CardLinkWrapper>
+  );
+};
+
+export default StatCard;
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index 71401aa38..9ab8f3799 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -18,8 +18,6 @@ import {
   Clock,
   Cpu,
   HardDrive,
-  ChevronUp,
-  ChevronDown,
   BarChart3,
   ClipboardList,
   Shield,
@@ -35,6 +33,7 @@ import {
   useUserActivityQuery,
   useDeletedUsersActivityQuery,
 } from '../hooks/queries/useUserActivityQuery.ts';
+import StatCard from '../components/dashboard/StatCard.tsx';
 
 // Lazy load the ClusterDetailDialog component
 const ClusterDetailDialog = lazy(
@@ -240,202 +239,6 @@ const itemAnimationVariant: Variants = {
   exit: { opacity: 0, y: -10, transition: { duration: 0.3 } },
 };
 
-// Enhanced modern stat component with advanced UI
-const StatCard = ({
-  title,
-  value,
-  icon: Icon,
-  change,
-  iconColor,
-  isContext = false,
-  link,
-}: {
-  title: string;
-  value: number | string;
-  icon: React.ElementType;
-  change?: number;
-  iconColor: string;
-  isContext?: boolean;
-  link?: string;
-}) => {
-  // Determine if change is positive, negative or neutral
-  const isPositive = typeof change === 'number' && change > 0;
-  const isNegative = typeof change === 'number' && change < 0;
-
-  // Get colors for gradient based on the icon color type
-  const getGradient = () => {
-    if (iconColor.includes('blue')) {
-      return 'bg-gradient-to-br from-blue-500/10 to-indigo-600/5 dark:from-blue-900/20 dark:to-indigo-900/10';
-    } else if (iconColor.includes('green')) {
-      return 'bg-gradient-to-br from-emerald-500/10 to-green-600/5 dark:from-emerald-900/20 dark:to-green-900/10';
-    } else if (iconColor.includes('purple')) {
-      return 'bg-gradient-to-br from-violet-500/10 to-purple-600/5 dark:from-violet-900/20 dark:to-purple-900/10';
-    } else if (iconColor.includes('amber')) {
-      return 'bg-gradient-to-br from-amber-500/10 to-orange-600/5 dark:from-amber-900/20 dark:to-orange-900/10';
-    } else {
-      return 'bg-gradient-to-br from-gray-500/5 to-gray-600/5 dark:from-gray-800/20 dark:to-gray-900/10';
-    }
-  };
-
-  // Get colors for the icon container
-  const getIconGradient = () => {
-    if (iconColor.includes('blue')) {
-      return 'bg-gradient-to-br from-blue-500 to-indigo-600 dark:from-blue-400 dark:to-indigo-500';
-    } else if (iconColor.includes('green')) {
-      return 'bg-gradient-to-br from-emerald-500 to-green-600 dark:from-emerald-400 dark:to-green-500';
-    } else if (iconColor.includes('purple')) {
-      return 'bg-gradient-to-br from-violet-500 to-purple-600 dark:from-violet-400 dark:to-purple-500';
-    } else if (iconColor.includes('amber')) {
-      return 'bg-gradient-to-br from-amber-500 to-orange-600 dark:from-amber-400 dark:to-orange-500';
-    } else {
-      return 'bg-gradient-to-br from-gray-500 to-gray-600 dark:from-gray-400 dark:to-gray-500';
-    }
-  };
-
-  interface CardLinkWrapperProps {
-    children?: React.ReactNode;
-    link?: string;
-  }
-
-  const CardLinkWrapper: React.FC<CardLinkWrapperProps> = ({ children, link }) => {
-    return link ? (
-      <Link to={link} className="block h-full w-full">
-        {children}
-      </Link>
-    ) : (
-      <div className="block h-full w-full cursor-default">{children}</div>
-    );
-  };
-
-  // Get indicator component based on card type
-  const getIndicator = () => {
-    if (title === 'Total Clusters') {
-      return (
-        <div className="flex h-10 items-end space-x-1">
-          {[0.4, 0.7, 1, 0.6, 0.8].map((height, i) => (
-            <motion.div
-              key={i}
-              className="w-1.5 rounded-t bg-blue-500/70 dark:bg-blue-400/70"
-              initial={{ height: 0 }}
-              animate={{ height: `${height * 40}px` }}
-              transition={{ delay: i * 0.1, duration: 0.5 }}
-            ></motion.div>
-          ))}
-        </div>
-      );
-    }
-
-    if (title === 'Active Clusters') {
-      return (
-        <div className="flex h-10 w-10 items-center justify-center">
-          <div className="flex -space-x-1.5">
-            {[...Array(3)].map((_, i) => (
-              <motion.div
-                key={i}
-                className="h-5 w-5 rounded-full border-2 border-white bg-emerald-500/80 dark:border-gray-800 dark:bg-emerald-400/80"
-                initial={{ scale: 0, opacity: 0 }}
-                animate={{ scale: 1, opacity: 1 }}
-                transition={{ delay: i * 0.1, duration: 0.3 }}
-              ></motion.div>
-            ))}
-          </div>
-        </div>
-      );
-    }
-
-    if (title === 'Binding Policies') {
-      return (
-        <div className="relative flex h-10 w-10 items-center justify-center">
-          <div className="absolute inset-0 rounded-full bg-purple-100 dark:bg-purple-900/30"></div>
-          <FileText
-            size={60}
-            className="scale-[0.65] transform text-purple-600/80 dark:text-purple-400/80"
-          />
-        </div>
-      );
-    }
-
-    if (title === 'Current Context') {
-      return (
-        <div className="relative flex h-10 w-10 items-center justify-center">
-          <div className="absolute inset-0 rounded-full border-2 border-amber-500/30 bg-amber-500/10 dark:border-amber-400/30 dark:bg-amber-400/10"></div>
-          <div className="absolute inset-0 rounded-full border-2 border-dashed border-amber-500/40 dark:border-amber-400/40"></div>
-          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-amber-500/20 to-amber-600/30 dark:from-amber-400/20 dark:to-amber-500/30">
-            <Activity size={16} className="text-amber-600 dark:text-amber-400" />
-          </div>
-        </div>
-      );
-    }
-
-    return null;
-  };
-
-  return (
-    <CardLinkWrapper link={link}>
-      <motion.div
-        className={`flex flex-col rounded-xl border border-gray-100 p-6 shadow-sm transition-all duration-300 dark:border-gray-700 ${getGradient()} relative overflow-hidden`}
-        whileHover={{
-          y: -4,
-          boxShadow: '0 12px 24px rgba(0, 0, 0, 0.12)',
-          transition: { duration: 0.3, ease: [0.23, 1, 0.32, 1] },
-        }}
-        initial={{ opacity: 0, y: 10 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.4 }}
-        variants={itemAnimationVariant}
-      >
-        {/* Decorative background elements for visual interest without animation loops */}
-        <div className="absolute -right-4 -top-4 h-16 w-16 rounded-full bg-gradient-to-br from-white/5 to-white/10 dark:from-gray-700/10 dark:to-gray-700/20"></div>
-        <div className="absolute -bottom-6 -left-6 h-24 w-24 rounded-full bg-gradient-to-tl from-white/5 to-white/0 dark:from-gray-700/5 dark:to-transparent"></div>
-
-        <div className="mb-4 flex items-center justify-between">
-          <div className="flex items-center">
-            <div className={`rounded-xl p-2.5 ${getIconGradient()} mr-3 text-white shadow-lg`}>
-              {React.createElement(Icon, { size: 18 })}
-            </div>
-            <span className="text-sm font-medium text-gray-700 transition-colors dark:text-gray-300">
-              {title}
-            </span>
-          </div>
-        </div>
-
-        <div className="mt-1 flex items-end justify-between">
-          <div className="min-w-0 flex-grow">
-            <div className="flex items-center">
-              <h3 className="truncate text-3xl font-bold text-gray-900 transition-colors dark:text-gray-50">
-                {value}
-              </h3>
-              {isContext && (
-                <div className="ml-2 h-2.5 w-2.5 rounded-full bg-green-500 shadow-[0_0_10px_rgba(34,197,94,0.6)]"></div>
-              )}
-            </div>
-            {change !== undefined && (
-              <div className="mt-2.5 flex w-fit items-center rounded-full bg-gray-50 px-3 py-1 dark:bg-gray-800/50">
-                {isPositive && <ChevronUp size={16} className="mr-1.5 text-emerald-500" />}
-                {isNegative && <ChevronDown size={16} className="mr-1.5 text-red-500" />}
-                <span
-                  className={
-                    isPositive
-                      ? 'text-sm font-medium text-emerald-500'
-                      : isNegative
-                        ? 'text-sm font-medium text-red-500'
-                        : 'text-sm font-medium text-gray-500 dark:text-gray-400'
-                  }
-                >
-                  {Math.abs(change)}% {isPositive ? 'increase' : isNegative ? 'decrease' : 'change'}
-                </span>
-              </div>
-            )}
-          </div>
-
-          {/* Static visual indicators that don't use infinite animation loops */}
-          {getIndicator()}
-        </div>
-      </motion.div>
-    </CardLinkWrapper>
-  );
-};
-
 // Enhanced overview card component
 const OverviewCard = ({
   title,
@@ -1208,28 +1011,28 @@ const K8sInfo = () => {
           title={t('clusters.dashboard.stats.totalClusters')}
           value={stats.totalClusters}
           icon={Server}
-          iconColor="bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400"
+          iconColor="blue"
           link={'/its'}
         />
         <StatCard
           title={t('clusters.dashboard.stats.activeClusters')}
           value={stats.activeClusters}
           icon={CircleCheck}
-          iconColor="bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400"
+          iconColor="green"
           link={'/its'}
         />
         <StatCard
           title={t('clusters.dashboard.stats.bindingPolicies')}
           value={stats.totalBindingPolicies}
           icon={FileText}
-          iconColor="bg-purple-100 text-purple-600 dark:bg-purple-900/30 dark:text-purple-400"
+          iconColor="purple"
           link={'/bp/manage'}
         />
         <StatCard
           title={t('clusters.dashboard.stats.currentContext')}
           value={currentContext || t('clusters.dashboard.stats.none')}
           icon={Activity}
-          iconColor="bg-amber-100 text-amber-600 dark:bg-amber-900/30 dark:text-amber-400"
+          iconColor="amber"
           isContext={true}
         />
       </motion.div>
diff --git a/frontend/src/pages/PluginManager.tsx b/frontend/src/pages/PluginManager.tsx
index a08f1fed6..1b09dcde8 100644
--- a/frontend/src/pages/PluginManager.tsx
+++ b/frontend/src/pages/PluginManager.tsx
@@ -20,12 +20,14 @@ import {
   HiOutlineRocketLaunch,
 } from 'react-icons/hi2';
 import { Link } from 'react-router-dom';
+import { Puzzle, CheckCircle, XCircle } from 'lucide-react';
 import { usePlugins } from '../plugins/PluginLoader';
 import { PluginAPI } from '../plugins/PluginAPI';
 import useTheme from '../stores/themeStore';
 import getThemeStyles from '../lib/theme-utils';
 import FeedbackModel from '../components/plugin/FeedbackModel';
 import toast from 'react-hot-toast';
+import StatCard from '../components/dashboard/StatCard';
 
 interface Plugin {
   name: string;
@@ -225,6 +227,11 @@ export const PluginManager: React.FC = () => {
     );
   }
 
+  // Calculate plugin stats once to avoid repeated filter operations
+  const totalPlugins = availablePlugins.length;
+  const activePlugins = availablePlugins.filter(p => p.enabled).length;
+  const inactivePlugins = availablePlugins.filter(p => !p.enabled).length;
+
   return (
     <div className="flex h-full w-full flex-col gap-6 p-6">
       {/* Header */}
@@ -271,43 +278,25 @@ export const PluginManager: React.FC = () => {
         </div>
 
         {/* Stats */}
-        <div className="flex gap-4">
-          {[
-            {
-              label: t('plugins.list.total'),
-              value: availablePlugins.length,
-              color: themeStyles.colors.text.primary,
-            },
-            {
-              label: t('plugins.list.active'),
-              value: availablePlugins.filter(p => p.enabled).length,
-              color: themeStyles.colors.status.success,
-            },
-            {
-              label: t('plugins.list.inactive'),
-              value: availablePlugins.filter(p => !p.enabled).length,
-              color: themeStyles.colors.text.secondary,
-            },
-          ].map((stat, index) => (
-            <motion.div
-              key={stat.label}
-              className="flex flex-col gap-1 rounded-xl p-4"
-              style={{
-                background: themeStyles.effects.glassMorphism.background,
-                border: `1px solid ${themeStyles.card.borderColor}`,
-              }}
-              initial={{ opacity: 0, scale: 0.9 }}
-              animate={{ opacity: 1, scale: 1 }}
-              transition={{ duration: 0.3, delay: index * 0.1 }}
-            >
-              <span className="text-2xl font-bold" style={{ color: stat.color }}>
-                {stat.value}
-              </span>
-              <span className="text-sm" style={{ color: themeStyles.colors.text.secondary }}>
-                {stat.label}
-              </span>
-            </motion.div>
-          ))}
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+          <StatCard
+            title={t('plugins.list.total')}
+            value={totalPlugins}
+            icon={Puzzle}
+            iconColor="blue"
+          />
+          <StatCard
+            title={t('plugins.list.active')}
+            value={activePlugins}
+            icon={CheckCircle}
+            iconColor="green"
+          />
+          <StatCard
+            title={t('plugins.list.inactive')}
+            value={inactivePlugins}
+            icon={XCircle}
+            iconColor="gray"
+          />
         </div>
       </motion.div>