diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index 399e9aa9..8ab187fd 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -151,7 +151,7 @@ export default function Layout({ children }: LayoutProps) {
            {isCollapsed ? (
              <img src="/logo.png" alt="Charon" className="h-12 w-auto" />
            ) : (
-             <img src="/banner.png" alt="Charon" className="h-14 w-auto max-w-[200px] object-contain" />
+             <img src="/banner.png" alt="Charon" className="h-14 w-auto max-max-w-50 object-contain" />
            )}
         </div>
 
diff --git a/frontend/src/components/Toast.tsx b/frontend/src/components/Toast.tsx
index 0e165c00..70e42fa6 100644
--- a/frontend/src/components/Toast.tsx
+++ b/frontend/src/components/Toast.tsx
@@ -29,7 +29,7 @@ export function ToastContainer() {
           role={toast.type === 'error' || toast.type === 'warning' ? 'alert' : 'status'}
           aria-live={toast.type === 'error' || toast.type === 'warning' ? 'assertive' : 'polite'}
           data-testid={`toast-${toast.type}`}
-          className={`pointer-events-auto px-4 py-3 rounded-lg shadow-lg flex items-center gap-3 min-w-[300px] max-w-[500px] animate-slide-in ${
+          className={`pointer-events-auto px-4 py-3 rounded-lg shadow-lg flex items-center gap-3 min-w-75 max-w-125 animate-slide-in ${
             toast.type === 'success'
               ? 'bg-green-600 text-white'
               : toast.type === 'error'
diff --git a/frontend/src/components/dialogs/ImportSuccessModal.tsx b/frontend/src/components/dialogs/ImportSuccessModal.tsx
index d24c3956..911b5e71 100644
--- a/frontend/src/components/dialogs/ImportSuccessModal.tsx
+++ b/frontend/src/components/dialogs/ImportSuccessModal.tsx
@@ -29,7 +29,7 @@ export default function ImportSuccessModal({
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center" data-testid="import-success-modal">
       <div className="absolute inset-0 bg-black/60" onClick={onClose} />
-      <div className="relative bg-dark-card rounded-lg p-6 w-[500px] max-w-full mx-4 border border-gray-800">
+      <div className="relative bg-dark-card rounded-lg p-6 w-125 max-w-full mx-4 border border-gray-800">
         {/* Header */}
         <div className="flex items-center gap-3 mb-6">
           <div className="shrink-0 w-12 h-12 rounded-full bg-green-900/30 flex items-center justify-center">
diff --git a/frontend/src/components/ui/Select.tsx b/frontend/src/components/ui/Select.tsx
index cc264a2c..f3471eea 100644
--- a/frontend/src/components/ui/Select.tsx
+++ b/frontend/src/components/ui/Select.tsx
@@ -83,7 +83,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'relative z-[70] max-h-96 min-w-[8rem] overflow-hidden pointer-events-auto',
+        'relative z-70 max-h-96 min-w-32 overflow-hidden pointer-events-auto',
         'rounded-lg border border-border',
         'bg-surface-elevated text-content-primary shadow-lg',
         'data-[state=open]:animate-in data-[state=closed]:animate-out',
@@ -105,7 +105,7 @@ const SelectContent = React.forwardRef<
         className={cn(
           'p-1',
           position === 'popper' &&
-            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
+            'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)'
         )}
       >
         {children}
@@ -139,7 +139,7 @@ const SelectItem = React.forwardRef<
       'rounded-md py-2 pl-8 pr-2 text-sm',
       'outline-none',
       'focus:bg-surface-muted focus:text-content-primary',
-      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'data-disabled:pointer-events-none data-disabled:opacity-50',
       className
     )}
     {...props}
diff --git a/frontend/src/components/ui/Switch.tsx b/frontend/src/components/ui/Switch.tsx
index 2466a95d..c9d626dd 100644
--- a/frontend/src/components/ui/Switch.tsx
+++ b/frontend/src/components/ui/Switch.tsx
@@ -34,7 +34,7 @@ const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
             'bg-surface-muted',
             'peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-brand-500 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-surface-base',
             'peer-checked:bg-brand-500',
-            "after:content-[''] after:absolute after:top-[2px] after:start-[2px]",
+            "after:content-[''] after:absolute after:top-0.5 after:start-[2px]",
             'after:bg-white after:border after:border-border after:rounded-full',
             'after:h-5 after:w-5 after:transition-all after:duration-fast',
             'peer-checked:after:translate-x-full peer-checked:after:border-white',
diff --git a/frontend/src/pages/CrowdSecConfig.tsx b/frontend/src/pages/CrowdSecConfig.tsx
index 78e9f760..a0524c18 100644
--- a/frontend/src/pages/CrowdSecConfig.tsx
+++ b/frontend/src/pages/CrowdSecConfig.tsx
@@ -1225,7 +1225,7 @@ export default function CrowdSecConfig() {
 
           {/* Layer 3: Form content (pointer-events-auto) */}
           <div
-            className="relative bg-dark-card rounded-lg p-6 w-[480px] max-w-full shadow-xl"
+            className="relative bg-dark-card rounded-lg p-6 w-120 max-w-full shadow-xl"
             onKeyDown={(e) => {
               if (e.key === 'Escape') setShowBanModal(false)
               if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) banMutation.mutate()
@@ -1319,7 +1319,7 @@ export default function CrowdSecConfig() {
             aria-label={t('common.close')}
           />
           <div
-            className="relative bg-dark-card rounded-lg p-6 w-[400px] max-w-full shadow-xl"
+            className="relative bg-dark-card rounded-lg p-6 w-100 max-w-full shadow-xl"
             onKeyDown={(e) => {
               if (e.key === 'Escape') setConfirmUnban(null)
               if (e.key === 'Enter') unbanMutation.mutate(confirmUnban.ip)
diff --git a/frontend/src/pages/RateLimiting.tsx b/frontend/src/pages/RateLimiting.tsx
index b88aa0f8..aa65d6c2 100644
--- a/frontend/src/pages/RateLimiting.tsx
+++ b/frontend/src/pages/RateLimiting.tsx
@@ -141,7 +141,7 @@ export default function RateLimiting() {
                 className="sr-only peer"
                 data-testid="rate-limit-toggle"
               />
-              <div className="w-11 h-6 bg-gray-700 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-500 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+              <div className="w-11 h-6 bg-gray-700 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-500 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
             </label>
           </div>
         </Card>