diff --git a/frontend/src/components/Licensed.jsx b/frontend/src/components/Licensed.jsx
new file mode 100644
index 00000000..afc96cea
--- /dev/null
+++ b/frontend/src/components/Licensed.jsx
@@ -0,0 +1,357 @@
+
+
+import { 
+    CheckCircle,
+    Warning as AlertCircle,
+    Shield as ShieldIcon,
+    Warning as WarningIcon,
+    ChevronRight as ChevronRightIcon
+} from '@mui/icons-material';
+import { useContext, useState } from "react";
+import { Context } from "../context/ContextApi.jsx";
+import { useNavigate } from 'react-router-dom';
+
+const Licensed = ({licensed, expanded, showBadge}) => {
+    
+    const { themeMode } = useContext(Context);
+    const navigate = useNavigate()
+
+
+    const [isHovered, setIsHovered] = useState(false);
+    
+      const theme = {
+        light: {
+          cardBg: '#ffffff',
+          cardBgHover: '#f5f7fa',
+          border: '#e1e4e8',
+          textPrimary: '#1f2937',
+          textSecondary: '#6b7280',
+          textMuted: '#9ca3af',
+          success: '#10b981',
+          successBg: licensed ? 'rgba(5, 150, 105, 0.08)' : '#ddf4ff',
+          successBorder: 'rgba(5, 150, 105, 0.2)',
+          warning: '#d97706',
+          warningBg: licensed ? '#fef3c7' : 'rgba(245, 158, 11, 0.08)',
+          warningBorder: 'rgba(245, 158, 11, 0.2)',
+          shadow: 'rgba(0, 0, 0, 0.05)',
+        },
+        dark: {
+          cardBg: '#1a1a1a',
+          cardBgHover: '#242424',
+          border: '#30363d',
+          textPrimary: '#e6edf3',
+          textSecondary: '#8b949e',
+          textMuted: '#6e7681',
+          success: '#10b981',
+          successBg: 'rgba(16, 185, 129, 0.1)',
+          successBorder: 'rgba(16, 185, 129, 0.3)',
+          warning: '#f59e0b',
+          warningBg: 'rgba(245, 158, 11, 0.1)',
+          warningBorder: 'rgba(245, 158, 11, 0.3)',
+          shadow: 'rgba(0, 0, 0, 0.3)',
+        },
+      };
+    
+      const colors = themeMode === "dark" ? theme.dark : theme.light;
+    
+      const statusConfig = licensed
+        ? {
+            icon: showBadge ? ShieldIcon : CheckCircle,
+            text: showBadge ? 'Licensed' : 'Enterprise Licensed',
+            shortText: 'Licensed',
+            subtitle: 'Full access',
+            color: colors.success,
+            bgColor: colors.successBg,
+            borderColor: colors.successBorder,
+            description: 'All features unlocked',
+          }
+        : {
+            icon: showBadge ? WarningIcon : AlertCircle,
+            text: showBadge ? 'Unlicensed' : 'Activate License',
+            shortText: 'Inactive',
+            subtitle: 'Limited access',
+            color: colors.warning,
+            bgColor: colors.warningBg,
+            borderColor: colors.warningBorder,
+            description: 'Limited access',
+          };
+    
+      const Icon = statusConfig.icon;
+    
+    // Display badge when showing license status only
+    // Display full component for CTA to license activation
+    if (showBadge) {
+        return (
+            <div
+                onClick={()=> {navigate('/admin?admin_tab=billingstats');}}
+                onMouseEnter={() => setIsHovered(true)}
+                onMouseLeave={() => setIsHovered(false)}
+                style={{
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: 8,
+                    padding: '8px 14px',
+                    borderRadius: 12,
+                    cursor: 'pointer',
+                    backgroundColor: statusConfig.bgColor,
+                    border: `1.5px solid ${statusConfig.borderColor}`,
+                    transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+                    transform: isHovered ? 'translateY(-2px)' : 'translateY(0)',
+                    boxShadow: isHovered
+                        ? `0 4px 12px ${colors.shadow}, 0 0 0 3px ${statusConfig.bgColor}`
+                        : `0 2px 4px ${colors.shadow}`,
+                    position: 'relative',
+                    overflow: 'hidden',
+                }}
+            >
+                {/* Shine effect on hover */}
+                <div
+                    style={{
+                        position: 'absolute',
+                        top: 0,
+                        width: '100%',
+                        height: '100%',
+                        background: `linear-gradient(90deg, transparent, rgba(255,255,255,${themeMode === "dark" ? '0.1' : '0.2'}), transparent)`,
+                        transition: 'left 0.5s',
+                        left: isHovered ? '100%' : '-100%',
+                        pointerEvents: 'none',
+                    }}
+                />
+
+                {/* Status indicator with pulse */}
+                <div
+                    style={{
+                        position: 'relative',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }}
+                >
+                    <span
+                        style={{
+                            width: 8,
+                            height: 8,
+                            borderRadius: '50%',
+                            backgroundColor: statusConfig.color,
+                            boxShadow: `0 0 8px ${statusConfig.color}`,
+                            position: 'relative',
+                            zIndex: 1,
+                        }}
+                    />
+                    {/* Pulse ring */}
+                    <span
+                        style={{
+                            position: 'absolute',
+                            width: 8,
+                            height: 8,
+                            borderRadius: '50%',
+                            backgroundColor: statusConfig.color,
+                            opacity: 0.75,
+                        }}
+                    />
+                </div>
+
+                <Icon
+                    style={{
+                        color: statusConfig.color,
+                        flexShrink: 0,
+                        fontSize: 16,
+                    }}
+                />
+
+                <div
+                    style={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: 1,
+                        alignItems: 'flex-start',
+                    }}
+                >
+                    <span
+                        style={{
+                            fontSize: 13,
+                            fontWeight: 700,
+                            color: statusConfig.color,
+                            lineHeight: 1.2,
+                            letterSpacing: '0.2px',
+                        }}
+                    >
+                        {statusConfig.text}
+                    </span>
+                    <span
+                        style={{
+                            fontSize: 10,
+                            fontWeight: 600,
+                            color: statusConfig.color,
+                            opacity: 0.7,
+                            lineHeight: 1,
+                            textTransform: 'uppercase',
+                            letterSpacing: '0.5px',
+                        }}
+                    >
+                        {statusConfig.subtitle}
+                    </span>
+                </div>
+
+                <ChevronRightIcon
+                    style={{
+                        color: statusConfig.color,
+                        opacity: 0.6,
+                        flexShrink: 0,
+                        fontSize: 14,
+                        transform: isHovered ? 'translateX(2px)' : 'translateX(0)',
+                        transition: 'all 0.2s',
+                    }}
+                />
+            </div>
+        );
+    }
+
+    return (
+        <div
+            onClick={()=> {navigate('/admin?admin_tab=billingstats');}}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+            style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: expanded ? 12 : 8,
+            padding: expanded ? '10px 14px' : '10px',
+            marginBottom: 20,
+            marginRight: 12,
+            borderRadius: 10,
+            cursor: 'pointer',
+            backgroundColor: isHovered ? colors.cardBgHover : colors.cardBg,
+            border: `1.5px solid ${licensed ? statusConfig.color : colors.border}`,
+            boxShadow: `0 1px 3px ${colors.shadow}`,
+            transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+            transform: isHovered ? 'translateY(-1px)' : 'translateY(0)',
+            position: 'relative',
+            overflow: 'hidden',
+            }}
+        >
+              <div
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  background: `linear-gradient(135deg, ${statusConfig.bgColor} 0%, transparent 100%)`,
+                  opacity: 0.5,
+                  pointerEvents: 'none',
+                }}
+              />
+        
+              {/* Content */}
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 10,
+                  position: 'relative',
+                  flex: 1,
+                  minWidth: 0,
+                }}
+              >
+               {expanded && (
+                 <div
+                  style={{
+                    position: 'relative',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}
+                >
+                  <Icon
+                    style={{
+                      color: statusConfig.color,
+                      flexShrink: 0,
+                      fontSize: 18,
+                    }}
+                  />
+                  {!licensed && (
+                    <div
+                      style={{
+                        position: 'absolute',
+                        width: '100%',
+                        height: '100%',
+                        borderRadius: '50%',
+                        border: `2px solid ${statusConfig.color}`,
+                      }}
+                    />
+                  )}
+                </div>
+                )}
+        
+                {/* Text content */}
+                {expanded && (
+                  <div
+                    style={{
+                      display: 'flex',
+                      flexDirection: 'column',
+                      gap: 2,
+                      minWidth: 0,
+                      flex: 1,
+                    }}
+                  >
+                    <span
+                      style={{
+                        fontSize: 13,
+                        fontWeight: 600,
+                        color: colors.textPrimary,
+                        lineHeight: 1.2,
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                      }}
+                    >
+                      {statusConfig.text}
+                    </span>
+                    <span
+                      style={{
+                        fontSize: 11,
+                        fontWeight: 500,
+                        color: colors.textSecondary,
+                        lineHeight: 1.2,
+                      }}
+                    >
+                      {statusConfig.description}
+                    </span>
+                  </div>
+                )}
+        
+                {!expanded && (
+                  <span
+                    style={{
+                      fontSize: 11,
+                      fontWeight: 700,
+                      color: statusConfig.color,
+                      letterSpacing: '0.5px',
+                      textTransform: 'uppercase',
+                    }}
+                  >
+                    {licensed ? 'ON' : 'OFF'}
+                  </span>
+                )}
+              </div>
+        
+              {/* Arrow indicator (only when expanded) */}
+              {expanded && (
+                <ChevronRightIcon
+                  style={{
+                    color: colors.textMuted,
+                    flexShrink: 0,
+                    fontSize: 16,
+                    opacity: isHovered ? 1 : 0.5,
+                    transform: isHovered ? 'translateX(2px)' : 'translateX(0)',
+                    transition: 'all 0.2s',
+                  }}
+                />
+              )}
+            </div>
+    );
+}
+
+export default Licensed;
\ No newline at end of file