diff --git a/EXHAUSTIVE_TODO_LIST.md b/EXHAUSTIVE_TODO_LIST.md
index 35bd828be..d505437ee 100644
--- a/EXHAUSTIVE_TODO_LIST.md
+++ b/EXHAUSTIVE_TODO_LIST.md
@@ -3921,7 +3921,7 @@ Critical path dependencies:
     - **Result**: ~87 instances replaced across ~65 files. Secondary actions now use steel/white for hover states, while primary actions correctly use cyan. Task objective achieved.
   - **Rollback**: Restore cyan usage
 
-- [ ] **Action 11.3.1.3**: Apply 80/20 rule (80% neutral, 20% color)
+- [x] **Action 11.3.1.3**: Apply 80/20 rule (80% neutral, 20% color)
   - **Scope**: All pages - Ensure color used sparingly
   - **Dependencies**: Action 11.3.1.2 complete ✅
   - **Risk**: MEDIUM (visual changes)
diff --git a/apps/web/src/components/AdvancedFilters.tsx b/apps/web/src/components/AdvancedFilters.tsx
index 35a21fd29..8688a9366 100644
--- a/apps/web/src/components/AdvancedFilters.tsx
+++ b/apps/web/src/components/AdvancedFilters.tsx
@@ -137,7 +137,7 @@ export function AdvancedFilters({
         triggerClassName="p-2 rounded-lg border border-kodo-steel bg-kodo-void/50 hover:bg-kodo-void transition-colors"
         contentClassName={cn('pt-3', contentClassName)}
       >
-        <div className="space-y-3">{children}</div>
+        <div className="space-y-4">{children}</div>
       </Collapsible>
     </div>
   );
diff --git a/apps/web/src/components/BulkModeBanner.tsx b/apps/web/src/components/BulkModeBanner.tsx
index a3ca19419..0bcccf1a2 100644
--- a/apps/web/src/components/BulkModeBanner.tsx
+++ b/apps/web/src/components/BulkModeBanner.tsx
@@ -71,12 +71,12 @@ export function BulkModeBanner({
       aria-atomic="true"
       className={cn(
         'w-full bg-kodo-steel/10 border-b border-kodo-steel/30 text-kodo-steel',
-        'px-4 py-3 flex items-center justify-between gap-4',
+        'px-4 py-4 flex items-center justify-between gap-4',
         'transition-all duration-300',
         className,
       )}
     >
-      <div className="flex items-center gap-3 flex-1 min-w-0">
+      <div className="flex items-center gap-4 flex-1 min-w-0">
         <CheckSquare className="w-5 h-5 flex-shrink-0" aria-hidden="true" />
         <span className="text-sm font-medium">
           <span className="font-bold">{selectedCount}</span> {itemText}
diff --git a/apps/web/src/components/OfflineQueueManager.tsx b/apps/web/src/components/OfflineQueueManager.tsx
index 48d45c7e0..cb1164bed 100644
--- a/apps/web/src/components/OfflineQueueManager.tsx
+++ b/apps/web/src/components/OfflineQueueManager.tsx
@@ -155,7 +155,7 @@ export function OfflineQueueManager({
                     </div>
 
                     {/* Metadata */}
-                    <div className="flex items-center gap-3 flex-wrap text-xs text-kodo-secondary">
+                    <div className="flex items-center gap-4 flex-wrap text-xs text-kodo-secondary">
                       {/* Priority Badge */}
                       <span
                         className={cn(
@@ -205,7 +205,7 @@ export function OfflineQueueManager({
 
         {/* Info Message */}
         {queue.length > 0 && (
-          <div className="p-3 bg-kodo-steel/10 border border-kodo-steel/20 rounded-lg text-xs text-kodo-secondary">
+          <div className="p-4 bg-kodo-steel/10 border border-kodo-steel/20 rounded-lg text-xs text-kodo-secondary">
             <p>
               Queued requests will be automatically processed when you're back
               online. You can remove individual requests or clear the entire
diff --git a/apps/web/src/components/RateLimitIndicator.tsx b/apps/web/src/components/RateLimitIndicator.tsx
index 84407ebbe..dfca42b2d 100644
--- a/apps/web/src/components/RateLimitIndicator.tsx
+++ b/apps/web/src/components/RateLimitIndicator.tsx
@@ -90,7 +90,7 @@ export function RateLimitIndicator() {
   return (
     <div
       className={cn(
-        'flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-all',
+        'flex items-center gap-2 px-4 py-1.5 rounded-lg text-xs font-medium transition-all',
         isCritical
           ? 'bg-kodo-red/10 text-kodo-red border border-kodo-red/30'
           : 'bg-kodo-gold/10 text-kodo-gold border border-kodo-gold/30',
diff --git a/apps/web/src/components/admin/AdminDashboardView.tsx b/apps/web/src/components/admin/AdminDashboardView.tsx
index 0bd514d97..cb744f339 100644
--- a/apps/web/src/components/admin/AdminDashboardView.tsx
+++ b/apps/web/src/components/admin/AdminDashboardView.tsx
@@ -57,7 +57,7 @@ export const AdminDashboardView: React.FC = () => {
 
   if (loading)
     return (
-      <div className="flex justify-center py-20">
+      <div className="flex justify-center py-24">
         <Loader2 className="w-10 h-10 text-kodo-steel animate-spin" />
       </div>
     );
@@ -140,7 +140,7 @@ export const AdminDashboardView: React.FC = () => {
             <h3 className="font-bold text-white mb-4 text-sm uppercase tracking-wider">
               Quick Actions
             </h3>
-            <div className="grid grid-cols-2 gap-3">
+            <div className="grid grid-cols-2 gap-4">
               <Button
                 variant="secondary"
                 size="sm"
@@ -176,7 +176,7 @@ export const AdminDashboardView: React.FC = () => {
             <h3 className="font-bold text-white mb-4 text-sm uppercase tracking-wider">
               System Health
             </h3>
-            <div className="space-y-3">
+            <div className="space-y-4">
               <div className="flex justify-between text-sm">
                 <span className="text-kodo-content-dim">Database</span>
                 <span className="text-kodo-lime font-bold">Healthy</span>
@@ -209,7 +209,7 @@ export const AdminDashboardView: React.FC = () => {
             {reports.map((report) => (
               <div
                 key={report.id}
-                className="flex items-center justify-between p-3 bg-kodo-ink rounded border border-kodo-steel/30"
+                className="flex items-center justify-between p-4 bg-kodo-ink rounded border border-kodo-steel/30"
               >
                 <div>
                   <div className="text-sm font-bold text-white">
@@ -261,7 +261,7 @@ export const AdminDashboardView: React.FC = () => {
             {uploads.map((upload) => (
               <div
                 key={upload.id}
-                className="flex items-center justify-between p-3 bg-kodo-ink rounded border border-kodo-steel/30"
+                className="flex items-center justify-between p-4 bg-kodo-ink rounded border border-kodo-steel/30"
               >
                 <div>
                   <div className="text-sm font-bold text-white">
diff --git a/apps/web/src/components/admin/AdminModerationView.tsx b/apps/web/src/components/admin/AdminModerationView.tsx
index 347a80098..11103d8f6 100644
--- a/apps/web/src/components/admin/AdminModerationView.tsx
+++ b/apps/web/src/components/admin/AdminModerationView.tsx
@@ -98,13 +98,13 @@ export const AdminModerationView: React.FC = () => {
 
       <div className="space-y-4">
         {loading && (
-          <div className="flex justify-center py-20">
+          <div className="flex justify-center py-24">
             <Loader2 className="w-8 h-8 text-kodo-steel animate-spin" />
           </div>
         )}
 
         {!loading && filteredQueue.length === 0 && (
-          <div className="text-center py-20 text-kodo-content-dim">
+          <div className="text-center py-24 text-kodo-content-dim">
             <ShieldAlert className="w-12 h-12 mx-auto mb-4 opacity-30" />
             <p>All caught up! No reports in this queue.</p>
           </div>
@@ -119,7 +119,7 @@ export const AdminModerationView: React.FC = () => {
             >
               <div className="flex flex-col md:flex-row justify-between gap-4">
                 <div className="flex-1">
-                  <div className="flex items-center gap-3 mb-2">
+                  <div className="flex items-center gap-4 mb-2">
                     <Badge label={report.targetType} variant="terminal" />
                     <span className="font-bold text-white text-lg">
                       {report.targetName}
@@ -128,7 +128,7 @@ export const AdminModerationView: React.FC = () => {
                       <Clock className="w-3 h-3" /> {report.timestamp}
                     </span>
                   </div>
-                  <div className="bg-kodo-ink p-3 rounded border border-kodo-steel/50 mb-3">
+                  <div className="bg-kodo-ink p-4 rounded border border-kodo-steel/50 mb-3">
                     <div className="text-xs font-bold text-kodo-red uppercase mb-1">
                       Reason: {report.reason}
                     </div>
diff --git a/apps/web/src/components/admin/AdminSettingsView.tsx b/apps/web/src/components/admin/AdminSettingsView.tsx
index 830c871e7..b549a8529 100644
--- a/apps/web/src/components/admin/AdminSettingsView.tsx
+++ b/apps/web/src/components/admin/AdminSettingsView.tsx
@@ -77,7 +77,7 @@ export const AdminSettingsView: React.FC = () => {
           ].map((feature) => (
             <div
               key={feature}
-              className="flex items-center justify-between p-3 bg-kodo-ink rounded border border-kodo-steel"
+              className="flex items-center justify-between p-4 bg-kodo-ink rounded border border-kodo-steel"
             >
               <span className="font-bold text-white">{feature}</span>
               <div className="w-10 h-5 bg-kodo-lime rounded-full relative cursor-pointer">
@@ -118,7 +118,7 @@ export const AdminSettingsView: React.FC = () => {
               Global Announcement
             </label>
             <textarea
-              className="w-full bg-kodo-ink border border-kodo-steel rounded p-3 text-white outline-none focus:border-kodo-steel h-24 resize-none"
+              className="w-full bg-kodo-ink border border-kodo-steel rounded p-4 text-white outline-none focus:border-kodo-steel h-24 resize-none"
               placeholder="Message to display on all pages..."
               value={announcement}
               onChange={(e) => setAnnouncement(e.target.value)}
diff --git a/apps/web/src/components/admin/AdminUsersView.tsx b/apps/web/src/components/admin/AdminUsersView.tsx
index 6aa971a4b..3c5aedbde 100644
--- a/apps/web/src/components/admin/AdminUsersView.tsx
+++ b/apps/web/src/components/admin/AdminUsersView.tsx
@@ -74,7 +74,7 @@ export const AdminUsersView: React.FC = () => {
             Manage accounts, roles, and permissions.
           </p>
         </div>
-        <div className="flex gap-3">
+        <div className="flex gap-4">
           <Button
             variant="ghost"
             icon={<Download className="w-4 h-4" />}
@@ -120,7 +120,7 @@ export const AdminUsersView: React.FC = () => {
         </div>
 
         {loading ? (
-          <div className="flex justify-center py-20">
+          <div className="flex justify-center py-24">
             <Loader2 className="w-8 h-8 text-kodo-steel animate-spin" />
           </div>
         ) : (
diff --git a/apps/web/src/components/admin/UserTableRow.tsx b/apps/web/src/components/admin/UserTableRow.tsx
index f0b65fd22..88caa7a0b 100644
--- a/apps/web/src/components/admin/UserTableRow.tsx
+++ b/apps/web/src/components/admin/UserTableRow.tsx
@@ -31,7 +31,7 @@ export const UserTableRow: React.FC<UserTableRowProps> = ({
   return (
     <tr className="hover:bg-white/5 transition-colors group relative">
       <td className="p-4">
-        <div className="flex items-center gap-3">
+        <div className="flex items-center gap-4">
           <div className="relative">
             <img
               src={user.avatar}
diff --git a/apps/web/src/components/admin/modals/BanUserModal.tsx b/apps/web/src/components/admin/modals/BanUserModal.tsx
index 34c0a9616..7ffc9d0cd 100644
--- a/apps/web/src/components/admin/modals/BanUserModal.tsx
+++ b/apps/web/src/components/admin/modals/BanUserModal.tsx
@@ -71,8 +71,8 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
             />
           </div>
 
-          <div className="flex items-center justify-between p-3 bg-kodo-ink rounded border border-kodo-steel">
-            <div className="flex items-center gap-3">
+          <div className="flex items-center justify-between p-4 bg-kodo-ink rounded border border-kodo-steel">
+            <div className="flex items-center gap-4">
               <Calendar className="w-5 h-5 text-kodo-content-dim" />
               <div>
                 <div className="text-sm font-bold text-white">Ban Duration</div>
@@ -119,7 +119,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
           )}
         </div>
 
-        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-3">
+        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
           <Button variant="ghost" onClick={onClose}>
             Cancel
           </Button>
diff --git a/apps/web/src/components/analytics/TrackAnalyticsView.tsx b/apps/web/src/components/analytics/TrackAnalyticsView.tsx
index 0f5e8806b..a3801fe24 100644
--- a/apps/web/src/components/analytics/TrackAnalyticsView.tsx
+++ b/apps/web/src/components/analytics/TrackAnalyticsView.tsx
@@ -124,7 +124,7 @@ export const TrackAnalyticsView: React.FC<TrackAnalyticsViewProps> = ({
             <h3 className="font-bold text-white mb-4 flex items-center gap-2">
               <Map className="w-4 h-4 text-kodo-magenta" /> Top Locations
             </h3>
-            <div className="space-y-3">
+            <div className="space-y-4">
               {trackData.geo.map((g) => (
                 <div key={g.country} className="flex items-center gap-4">
                   <div className="w-16 text-sm text-kodo-content-dim">{g.country}</div>
diff --git a/apps/web/src/components/commerce/OrderSummary.tsx b/apps/web/src/components/commerce/OrderSummary.tsx
index 95b45c1a4..8e72607f7 100644
--- a/apps/web/src/components/commerce/OrderSummary.tsx
+++ b/apps/web/src/components/commerce/OrderSummary.tsx
@@ -43,7 +43,7 @@ export const OrderSummary: React.FC<OrderSummaryProps> = ({
           Order Summary
         </h3>
 
-        <div className="space-y-3 text-sm mb-6">
+        <div className="space-y-4 text-sm mb-6">
           <div className="flex justify-between text-kodo-content-dim">
             <span>Subtotal</span>
             <span className="text-white font-mono">
@@ -88,7 +88,7 @@ export const OrderSummary: React.FC<OrderSummaryProps> = ({
         )}
       </Card>
 
-      <div className="bg-kodo-ink/50 p-4 rounded-xl border border-kodo-steel/50 flex items-start gap-3">
+      <div className="bg-kodo-ink/50 p-4 rounded-xl border border-kodo-steel/50 flex items-start gap-4">
         <ShieldCheck className="w-5 h-5 text-kodo-gold flex-shrink-0" />
         <div>
           <h4 className="font-bold text-white text-sm mb-1">Secure Checkout</h4>
diff --git a/apps/web/src/components/commerce/modals/RefundRequestModal.tsx b/apps/web/src/components/commerce/modals/RefundRequestModal.tsx
index 4e7c98e90..18fe2a961 100644
--- a/apps/web/src/components/commerce/modals/RefundRequestModal.tsx
+++ b/apps/web/src/components/commerce/modals/RefundRequestModal.tsx
@@ -65,7 +65,7 @@ export const RefundRequestModal: React.FC<RefundRequestModalProps> = ({
               Details
             </label>
             <textarea
-              className="w-full bg-kodo-void border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-steel outline-none text-sm resize-none h-24"
+              className="w-full bg-kodo-void border border-kodo-steel rounded-lg p-4 text-white focus:border-kodo-steel outline-none text-sm resize-none h-24"
               placeholder="Please explain why you are requesting a refund..."
               value={details}
               onChange={(e) => setDetails(e.target.value)}
@@ -80,7 +80,7 @@ export const RefundRequestModal: React.FC<RefundRequestModalProps> = ({
           </div>
         </div>
 
-        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-3">
+        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
           <Button variant="ghost" onClick={onClose}>
             Cancel
           </Button>
diff --git a/apps/web/src/components/dashboard/StatCard.tsx b/apps/web/src/components/dashboard/StatCard.tsx
index 000cc33a2..4ef3e221b 100644
--- a/apps/web/src/components/dashboard/StatCard.tsx
+++ b/apps/web/src/components/dashboard/StatCard.tsx
@@ -76,7 +76,7 @@ export const StatCard: React.FC<StatCardProps> = ({
   return (
     <Card
       variant="default"
-      className="flex flex-col justify-between h-full p-5 hover:border-opacity-100 transition-all relative overflow-hidden"
+      className="flex flex-col justify-between h-full p-6 hover:border-opacity-100 transition-all relative overflow-hidden"
     >
       <div className="flex justify-between items-start mb-2 relative z-10">
         <div>
diff --git a/apps/web/src/components/dashboard/TrackList.tsx b/apps/web/src/components/dashboard/TrackList.tsx
index c5a8f395b..bf41cbbf3 100644
--- a/apps/web/src/components/dashboard/TrackList.tsx
+++ b/apps/web/src/components/dashboard/TrackList.tsx
@@ -63,7 +63,7 @@ export const TrackList: React.FC = () => {
 
   if (loading) {
     return (
-      <div className="space-y-3">
+      <div className="space-y-4">
         {[1, 2, 3, 4, 5].map((i) => (
           <div
             key={i}
@@ -93,7 +93,7 @@ export const TrackList: React.FC = () => {
 
   if (tracks.length === 0) {
     return (
-      <div className="text-kodo-content-dim text-center py-10 bg-kodo-ink/30 rounded-xl border border-dashed border-kodo-steel">
+      <div className="text-kodo-content-dim text-center py-12 bg-kodo-ink/30 rounded-xl border border-dashed border-kodo-steel">
         <BarChart3 className="w-8 h-8 mx-auto mb-2 opacity-50" />
         <p>No tracks trending right now.</p>
       </div>
@@ -109,7 +109,7 @@ export const TrackList: React.FC = () => {
           <div
             key={track.id}
             className={`
-                group flex items-center gap-4 p-3 rounded-xl transition-all border cursor-pointer relative overflow-hidden
+                group flex items-center gap-4 p-4 rounded-xl transition-all border cursor-pointer relative overflow-hidden
                 ${isCurrent ? 'bg-kodo-cyan/10 border-kodo-cyan/30' : 'bg-kodo-ink border-transparent hover:border-kodo-steel/50 hover:bg-kodo-ink/80'}
             `}
             onClick={() => handlePlay(track)}
diff --git a/apps/web/src/components/data/Grid.tsx b/apps/web/src/components/data/Grid.tsx
index 6b978baeb..8eb27313b 100644
--- a/apps/web/src/components/data/Grid.tsx
+++ b/apps/web/src/components/data/Grid.tsx
@@ -105,14 +105,14 @@ const GAP_CLASSES: Record<number, string> = {
   0: 'gap-0',
   1: 'gap-1',
   2: 'gap-2',
-  3: 'gap-3',
+  3: 'gap-4',
   4: 'gap-4',
-  5: 'gap-5',
+  5: 'gap-6',
   6: 'gap-6',
   7: 'gap-6', // Standardized: 7 (28px) → 6 (24px) to follow 4px base scale
   8: 'gap-8',
   9: 'gap-8', // Standardized: 9 (36px) → 8 (32px) to follow 4px base scale
-  10: 'gap-10',
+  10: 'gap-12',
   11: 'gap-12', // Standardized: 11 (44px) → 12 (48px) to follow 4px base scale
   12: 'gap-12',
 };
diff --git a/apps/web/src/components/data/List.tsx b/apps/web/src/components/data/List.tsx
index e406330b5..040622f7b 100644
--- a/apps/web/src/components/data/List.tsx
+++ b/apps/web/src/components/data/List.tsx
@@ -54,7 +54,7 @@ export function List({
           onClick={item.onClick && !item.disabled ? item.onClick : undefined}
           className={cn(
             'flex items-center justify-between',
-            variant === 'bordered' && 'px-4 py-3',
+            variant === 'bordered' && 'px-4 py-4',
             variant === 'spaced' && 'px-2 py-2',
             variant === 'default' && 'px-2 py-2',
             item.onClick && !item.disabled && 'cursor-pointer hover:bg-accent',
diff --git a/apps/web/src/components/developer/APIPlaygroundView.tsx b/apps/web/src/components/developer/APIPlaygroundView.tsx
index dca48ad2d..324e37999 100644
--- a/apps/web/src/components/developer/APIPlaygroundView.tsx
+++ b/apps/web/src/components/developer/APIPlaygroundView.tsx
@@ -62,7 +62,7 @@ export const APIPlaygroundView: React.FC = () => {
                   Endpoint
                 </label>
                 <select
-                  className="w-full bg-kodo-ink border border-kodo-steel rounded p-3 text-white focus:border-kodo-steel outline-none font-mono text-sm"
+                  className="w-full bg-kodo-ink border border-kodo-steel rounded p-4 text-white focus:border-kodo-steel outline-none font-mono text-sm"
                   value={selectedEndpoint.path}
                   onChange={(e) => {
                     const ep = ENDPOINTS.find((p) => p.path === e.target.value);
@@ -85,7 +85,7 @@ export const APIPlaygroundView: React.FC = () => {
                   Body (JSON)
                 </label>
                 <textarea
-                  className="w-full bg-kodo-ink border border-kodo-steel rounded p-3 text-white focus:border-kodo-steel outline-none font-mono text-xs h-48 resize-none"
+                  className="w-full bg-kodo-ink border border-kodo-steel rounded p-4 text-white focus:border-kodo-steel outline-none font-mono text-xs h-48 resize-none"
                   value={params}
                   onChange={(e) => setParams(e.target.value)}
                 />
diff --git a/apps/web/src/components/developer/DeveloperDashboardView.tsx b/apps/web/src/components/developer/DeveloperDashboardView.tsx
index ff9384179..d1fc723a8 100644
--- a/apps/web/src/components/developer/DeveloperDashboardView.tsx
+++ b/apps/web/src/components/developer/DeveloperDashboardView.tsx
@@ -75,7 +75,7 @@ export const DeveloperDashboardView: React.FC = () => {
 
   if (loading)
     return (
-      <div className="flex justify-center py-20">
+      <div className="flex justify-center py-24">
         <Loader2 className="w-10 h-10 text-kodo-steel animate-spin" />
       </div>
     );
@@ -92,7 +92,7 @@ export const DeveloperDashboardView: React.FC = () => {
             Build on top of the Veza Platform.
           </p>
         </div>
-        <div className="flex gap-3">
+        <div className="flex gap-4">
           <Button
             variant="secondary"
             icon={<ExternalLink className="w-4 h-4" />}
diff --git a/apps/web/src/components/developer/modals/CreateAPIKeyModal.tsx b/apps/web/src/components/developer/modals/CreateAPIKeyModal.tsx
index d8739271f..f047d4d11 100644
--- a/apps/web/src/components/developer/modals/CreateAPIKeyModal.tsx
+++ b/apps/web/src/components/developer/modals/CreateAPIKeyModal.tsx
@@ -82,11 +82,11 @@ export const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
                 <label className="block text-xs font-bold text-kodo-content-dim uppercase mb-3">
                   Permissions (Scopes)
                 </label>
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   {SCOPES.map((scope) => (
                     <label
                       key={scope.id}
-                      className="flex items-center gap-3 p-3 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-kodo-steel transition-colors"
+                      className="flex items-center gap-4 p-4 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-kodo-steel transition-colors"
                     >
                       <input
                         type="checkbox"
@@ -134,7 +134,7 @@ export const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
           )}
         </div>
 
-        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-3">
+        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
           {step === 1 ? (
             <>
               <Button variant="ghost" onClick={onClose}>
diff --git a/apps/web/src/components/education/CourseDetailView.tsx b/apps/web/src/components/education/CourseDetailView.tsx
index f0d247f6d..d5636c4c6 100644
--- a/apps/web/src/components/education/CourseDetailView.tsx
+++ b/apps/web/src/components/education/CourseDetailView.tsx
@@ -84,7 +84,7 @@ export const CourseDetailView: React.FC<CourseDetailViewProps> = ({
               </span>
             </div>
 
-            <div className="flex items-center gap-3">
+            <div className="flex items-center gap-4">
               <img
                 src={`https://ui-avatars.com/api/?name=${course.instructor}&background=random`}
                 className="w-10 h-10 rounded-full"
@@ -120,9 +120,9 @@ export const CourseDetailView: React.FC<CourseDetailViewProps> = ({
                 <h3 className="font-bold text-white text-lg mb-4">
                   What you'll learn
                 </h3>
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   {course.whatYouWillLearn?.map((item, i) => (
-                    <div key={i} className="flex gap-3 text-sm text-kodo-text-main">
+                    <div key={i} className="flex gap-4 text-sm text-kodo-text-main">
                       <CheckCircle className="w-4 h-4 text-kodo-lime flex-shrink-0 mt-0.5" />
                       <span>{item}</span>
                     </div>
@@ -173,7 +173,7 @@ export const CourseDetailView: React.FC<CourseDetailViewProps> = ({
                     className="p-4 flex justify-between items-center cursor-pointer hover:bg-white/5 transition-colors"
                     onClick={() => toggleModule(module.id)}
                   >
-                    <h4 className="font-bold text-white flex items-center gap-3">
+                    <h4 className="font-bold text-white flex items-center gap-4">
                       {expandedModule === module.id ||
                       expandedModule === 'all' ? (
                         <ChevronUp className="w-4 h-4" />
@@ -193,9 +193,9 @@ export const CourseDetailView: React.FC<CourseDetailViewProps> = ({
                       {module.lessons.map((lesson) => (
                         <div
                           key={lesson.id}
-                          className="p-3 pl-8 flex justify-between items-center hover:bg-white/5 border-b border-kodo-steel/30 last:border-0"
+                          className="p-4 pl-8 flex justify-between items-center hover:bg-white/5 border-b border-kodo-steel/30 last:border-0"
                         >
-                          <div className="flex items-center gap-3 text-sm text-kodo-text-main">
+                          <div className="flex items-center gap-4 text-sm text-kodo-text-main">
                             {lesson.type === 'video' ? (
                               <PlayCircle className="w-4 h-4" />
                             ) : (
@@ -203,7 +203,7 @@ export const CourseDetailView: React.FC<CourseDetailViewProps> = ({
                             )}
                             {lesson.title}
                           </div>
-                          <div className="flex items-center gap-3">
+                          <div className="flex items-center gap-4">
                             {lesson.isLocked && !isEnrolled && (
                               <Lock className="w-3 h-3 text-kodo-content-dim" />
                             )}
@@ -227,7 +227,7 @@ export const CourseDetailView: React.FC<CourseDetailViewProps> = ({
                   key={review.id}
                   className="border-b border-kodo-steel/50 pb-6"
                 >
-                  <div className="flex items-center gap-3 mb-2">
+                  <div className="flex items-center gap-4 mb-2">
                     <img
                       src={review.avatar}
                       className="w-10 h-10 rounded-full"
@@ -302,7 +302,7 @@ export const CourseDetailView: React.FC<CourseDetailViewProps> = ({
                     CONTINUE LEARNING
                   </Button>
                 ) : (
-                  <div className="space-y-3">
+                  <div className="space-y-4">
                     <Button
                       variant="primary"
                       className="w-full h-12 text-lg"
@@ -316,23 +316,23 @@ export const CourseDetailView: React.FC<CourseDetailViewProps> = ({
                   </div>
                 )}
 
-                <div className="mt-6 space-y-3">
+                <div className="mt-6 space-y-4">
                   <h4 className="font-bold text-white text-sm">
                     This course includes:
                   </h4>
                   <ul className="text-sm text-kodo-content-dim space-y-2">
-                    <li className="flex items-center gap-3">
+                    <li className="flex items-center gap-4">
                       <PlayCircle className="w-4 h-4" /> {course.duration}{' '}
                       on-demand video
                     </li>
-                    <li className="flex items-center gap-3">
+                    <li className="flex items-center gap-4">
                       <ShieldCheck className="w-4 h-4" /> Full lifetime access
                     </li>
-                    <li className="flex items-center gap-3">
+                    <li className="flex items-center gap-4">
                       <Globe className="w-4 h-4" /> Access on mobile and TV
                     </li>
                     {course.certificateAvailable && (
-                      <li className="flex items-center gap-3">
+                      <li className="flex items-center gap-4">
                         <Star className="w-4 h-4" /> Certificate of completion
                       </li>
                     )}
diff --git a/apps/web/src/components/education/CourseLearningView.tsx b/apps/web/src/components/education/CourseLearningView.tsx
index a7d33b629..4366bd3fd 100644
--- a/apps/web/src/components/education/CourseLearningView.tsx
+++ b/apps/web/src/components/education/CourseLearningView.tsx
@@ -105,7 +105,7 @@ export const CourseLearningView: React.FC<CourseLearningViewProps> = ({
   );
 
   return (
-    <div className="flex flex-col h-[calc(100vh-6rem)] -m-6 md:-m-10 bg-kodo-void">
+    <div className="flex flex-col h-[calc(100vh-6rem)] -m-6 md:-m-12 bg-kodo-void">
       {/* Header Bar */}
       <div className="h-16 border-b border-kodo-steel bg-kodo-ink px-4 flex items-center justify-between shrink-0 z-20">
         <div className="flex items-center gap-4">
@@ -244,8 +244,8 @@ export const CourseLearningView: React.FC<CourseLearningViewProps> = ({
             )}
             {activeTab === 'resources' && (
               <div className="space-y-2">
-                <div className="flex items-center justify-between p-3 bg-kodo-ink rounded border border-kodo-steel">
-                  <div className="flex items-center gap-3">
+                <div className="flex items-center justify-between p-4 bg-kodo-ink rounded border border-kodo-steel">
+                  <div className="flex items-center gap-4">
                     <FileText className="w-5 h-5 text-kodo-steel" />
                     <span className="text-sm text-white">
                       Lesson Slides.pdf
@@ -255,8 +255,8 @@ export const CourseLearningView: React.FC<CourseLearningViewProps> = ({
                     Download
                   </Button>
                 </div>
-                <div className="flex items-center justify-between p-3 bg-kodo-ink rounded border border-kodo-steel">
-                  <div className="flex items-center gap-3">
+                <div className="flex items-center justify-between p-4 bg-kodo-ink rounded border border-kodo-steel">
+                  <div className="flex items-center gap-4">
                     <FileText className="w-5 h-5 text-kodo-magenta" />
                     <span className="text-sm text-white">
                       Project Files.zip
@@ -291,7 +291,7 @@ export const CourseLearningView: React.FC<CourseLearningViewProps> = ({
                         <div
                           key={lesson.id}
                           onClick={() => setActiveLessonId(lesson.id)}
-                          className={`flex items-start gap-3 p-3 cursor-pointer border-l-2 transition-all hover:bg-white/5 ${isActive ? 'bg-kodo-cyan/10 border-kodo-cyan' : 'border-transparent'}`}
+                          className={`flex items-start gap-4 p-4 cursor-pointer border-l-2 transition-all hover:bg-white/5 ${isActive ? 'bg-kodo-cyan/10 border-kodo-cyan' : 'border-transparent'}`}
                         >
                           <div className="mt-0.5">
                             {isCompleted ? (
diff --git a/apps/web/src/components/education/MyCoursesView.tsx b/apps/web/src/components/education/MyCoursesView.tsx
index fbbcf7500..857ccdf94 100644
--- a/apps/web/src/components/education/MyCoursesView.tsx
+++ b/apps/web/src/components/education/MyCoursesView.tsx
@@ -60,7 +60,7 @@ export const MyCoursesView: React.FC<MyCoursesViewProps> = ({ onContinue }) => {
 
   return (
     <div className="animate-fadeIn space-y-8 pb-20">
-      <div className="flex items-center gap-3 mb-6">
+      <div className="flex items-center gap-4 mb-6">
         <GraduationCap className="w-8 h-8 text-kodo-steel" />
         <h1 className="text-3xl font-display font-bold text-white">
           My Learning
@@ -133,7 +133,7 @@ export const MyCoursesView: React.FC<MyCoursesViewProps> = ({ onContinue }) => {
           />
         ))}
         {filteredCourses.length === 0 && (
-          <div className="col-span-full text-center py-20 text-kodo-content-dim">
+          <div className="col-span-full text-center py-24 text-kodo-content-dim">
             <p>No courses found in this category.</p>
           </div>
         )}
diff --git a/apps/web/src/components/education/modals/CertificateModal.tsx b/apps/web/src/components/education/modals/CertificateModal.tsx
index bcb2b86c0..e3262c17c 100644
--- a/apps/web/src/components/education/modals/CertificateModal.tsx
+++ b/apps/web/src/components/education/modals/CertificateModal.tsx
@@ -92,7 +92,7 @@ export const CertificateModal: React.FC<CertificateModalProps> = ({
           </div>
         </div>
 
-        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-3">
+        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
           <Button variant="ghost" onClick={onClose}>
             Close
           </Button>
diff --git a/apps/web/src/components/education/modals/QuizModal.tsx b/apps/web/src/components/education/modals/QuizModal.tsx
index d556711c3..f6377aa57 100644
--- a/apps/web/src/components/education/modals/QuizModal.tsx
+++ b/apps/web/src/components/education/modals/QuizModal.tsx
@@ -134,7 +134,7 @@ export const QuizModal: React.FC<QuizModalProps> = ({
             {currentQuestion.question}
           </h2>
 
-          <div className="space-y-3">
+          <div className="space-y-4">
             {currentQuestion.options.map((option, idx) => (
               <button
                 key={idx}
@@ -145,7 +145,7 @@ export const QuizModal: React.FC<QuizModalProps> = ({
                     : 'bg-kodo-ink border-kodo-steel text-kodo-text-main hover:bg-white/5 hover:border-kodo-steel'
                 }`}
               >
-                <div className="flex items-center gap-3">
+                <div className="flex items-center gap-4">
                   <div
                     className={`w-6 h-6 rounded-full border flex items-center justify-center text-xs font-bold ${selectedAnswers[currentQuestionIndex] === idx ? 'bg-kodo-cyan border-kodo-cyan text-black' : 'border-kodo-steel text-kodo-content-dim'}`}
                   >
diff --git a/apps/web/src/components/feedback/Alert.tsx b/apps/web/src/components/feedback/Alert.tsx
index a39eb058a..1b1c7116d 100644
--- a/apps/web/src/components/feedback/Alert.tsx
+++ b/apps/web/src/components/feedback/Alert.tsx
@@ -57,7 +57,7 @@ export function Alert({
         className,
       )}
     >
-      <div className="flex items-start gap-3">
+      <div className="flex items-start gap-4">
         <Icon
           className={cn('h-5 w-5 flex-shrink-0 mt-0.5', ICON_STYLES[variant])}
         />
diff --git a/apps/web/src/components/feedback/Toast.tsx b/apps/web/src/components/feedback/Toast.tsx
index 3ca8510f1..84029a65f 100644
--- a/apps/web/src/components/feedback/Toast.tsx
+++ b/apps/web/src/components/feedback/Toast.tsx
@@ -71,7 +71,7 @@ export function ToastComponent({ toast, onDismiss }: ToastProps) {
   return (
     <div
       className={cn(
-        'relative flex min-w-[300px] max-w-md items-start gap-3 rounded-lg border p-4 shadow-lg transition-all duration-300',
+        'relative flex min-w-[300px] max-w-md items-start gap-4 rounded-lg border p-4 shadow-lg transition-all duration-300',
         styles,
         isVisible && !isLeaving
           ? 'opacity-100 translate-x-0'
diff --git a/apps/web/src/components/forms/FormBuilder.tsx b/apps/web/src/components/forms/FormBuilder.tsx
index 797335183..c592371c4 100644
--- a/apps/web/src/components/forms/FormBuilder.tsx
+++ b/apps/web/src/components/forms/FormBuilder.tsx
@@ -233,7 +233,7 @@ export function FormBuilder({
             placeholder={field.placeholder}
             disabled={disabled || field.disabled}
             className={cn(
-              'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+              'flex min-h-[80px] w-full rounded-md border border-input bg-background px-4 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
               hasError && 'border-destructive',
             )}
           />
diff --git a/apps/web/src/components/gamification/AchievementCard.tsx b/apps/web/src/components/gamification/AchievementCard.tsx
index bffb6237c..4a2c12a42 100644
--- a/apps/web/src/components/gamification/AchievementCard.tsx
+++ b/apps/web/src/components/gamification/AchievementCard.tsx
@@ -35,7 +35,7 @@ export const AchievementCard: React.FC<AchievementCardProps> = ({
       )}
 
       <div
-        className={`flex ${compact ? 'flex-row items-center gap-4' : 'flex-col items-center text-center gap-3'}`}
+        className={`flex ${compact ? 'flex-row items-center gap-4' : 'flex-col items-center text-center gap-4'}`}
       >
         <div
           className={`rounded-full bg-gradient-to-br from-kodo-graphite to-black flex items-center justify-center border-2 ${isUnlocked ? 'border-kodo-gold w-16 h-16 text-3xl shadow-[0_0_15px_rgba(234,179,8,0.3)]' : 'border-kodo-steel w-12 h-12 text-xl text-kodo-content-dim'}`}
diff --git a/apps/web/src/components/gamification/AchievementsView.tsx b/apps/web/src/components/gamification/AchievementsView.tsx
index ccf849cdc..81eac6166 100644
--- a/apps/web/src/components/gamification/AchievementsView.tsx
+++ b/apps/web/src/components/gamification/AchievementsView.tsx
@@ -45,7 +45,7 @@ export const AchievementsView: React.FC = () => {
 
   if (loading)
     return (
-      <div className="flex justify-center py-20">
+      <div className="flex justify-center py-24">
         <Loader2 className="w-10 h-10 text-kodo-steel animate-spin" />
       </div>
     );
@@ -62,7 +62,7 @@ export const AchievementsView: React.FC = () => {
             Track your milestones and earn rewards.
           </p>
         </div>
-        <div className="bg-kodo-ink px-4 py-2 rounded-lg border border-kodo-steel flex items-center gap-3">
+        <div className="bg-kodo-ink px-4 py-2 rounded-lg border border-kodo-steel flex items-center gap-4">
           <Trophy className="w-5 h-5 text-kodo-gold" />
           <span className="text-sm font-bold text-white">
             {earnedCount} / {achievements.length} Unlocked
diff --git a/apps/web/src/components/gamification/LeaderboardView.tsx b/apps/web/src/components/gamification/LeaderboardView.tsx
index bc7554b3a..1c7cbf3c1 100644
--- a/apps/web/src/components/gamification/LeaderboardView.tsx
+++ b/apps/web/src/components/gamification/LeaderboardView.tsx
@@ -56,14 +56,14 @@ export const LeaderboardView: React.FC = () => {
       </div>
 
       {loading ? (
-        <div className="flex justify-center py-20">
+        <div className="flex justify-center py-24">
           <Loader2 className="w-10 h-10 text-kodo-steel animate-spin" />
         </div>
       ) : (
         <>
           {/* Top 3 Podium (Visual) */}
           {leaderboard.length >= 3 && (
-            <div className="grid grid-cols-3 gap-4 items-end mb-8 md:px-20">
+            <div className="grid grid-cols-3 gap-4 items-end mb-8 md:px-24">
               {[leaderboard[1], leaderboard[0], leaderboard[2]].map(
                 (entry, i) => (
                   <div
@@ -122,7 +122,7 @@ export const LeaderboardView: React.FC = () => {
                       #{entry.rank}
                     </td>
                     <td className="p-4">
-                      <div className="flex items-center gap-3">
+                      <div className="flex items-center gap-4">
                         <img
                           src={entry.avatar}
                           className="w-8 h-8 rounded-full"
diff --git a/apps/web/src/components/gamification/ProfileXPView.tsx b/apps/web/src/components/gamification/ProfileXPView.tsx
index 6c73b7d77..e6ab7906e 100644
--- a/apps/web/src/components/gamification/ProfileXPView.tsx
+++ b/apps/web/src/components/gamification/ProfileXPView.tsx
@@ -44,7 +44,7 @@ export const ProfileXPView: React.FC<ProfileXPViewProps> = ({ username }) => {
 
   if (loading)
     return (
-      <div className="flex justify-center py-20">
+      <div className="flex justify-center py-24">
         <Loader2 className="w-10 h-10 text-kodo-steel animate-spin" />
       </div>
     );
@@ -101,13 +101,13 @@ export const ProfileXPView: React.FC<ProfileXPViewProps> = ({ username }) => {
             />
 
             <div className="flex gap-4 pt-2">
-              <div className="bg-black/30 px-3 py-1 rounded text-xs text-kodo-content-dim">
+              <div className="bg-black/30 px-4 py-1 rounded text-xs text-kodo-content-dim">
                 <span className="text-white font-bold">
                   {xpData.totalEarned.toLocaleString()}
                 </span>{' '}
                 Total Lifetime XP
               </div>
-              <div className="bg-black/30 px-3 py-1 rounded text-xs text-kodo-content-dim">
+              <div className="bg-black/30 px-4 py-1 rounded text-xs text-kodo-content-dim">
                 <span className="text-kodo-lime font-bold">+12%</span> vs Last
                 Week
               </div>
diff --git a/apps/web/src/components/inventory/AddEquipmentView.tsx b/apps/web/src/components/inventory/AddEquipmentView.tsx
index 002716654..bec69711c 100644
--- a/apps/web/src/components/inventory/AddEquipmentView.tsx
+++ b/apps/web/src/components/inventory/AddEquipmentView.tsx
@@ -93,7 +93,7 @@ export const AddEquipmentView: React.FC = () => {
                   Category
                 </label>
                 <select
-                  className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-steel outline-none"
+                  className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-4 text-white focus:border-kodo-steel outline-none"
                   value={formData.category}
                   onChange={(e) => handleChange('category', e.target.value)}
                 >
@@ -175,7 +175,7 @@ export const AddEquipmentView: React.FC = () => {
               Notes
             </h3>
             <textarea
-              className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-steel outline-none min-h-[100px]"
+              className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-4 text-white focus:border-kodo-steel outline-none min-h-[100px]"
               placeholder="Condition notes, modifications, etc..."
               value={formData.notes}
               onChange={(e) => handleChange('notes', e.target.value)}
diff --git a/apps/web/src/components/inventory/EquipmentDetailView.tsx b/apps/web/src/components/inventory/EquipmentDetailView.tsx
index fddda4b1f..c1e163c19 100644
--- a/apps/web/src/components/inventory/EquipmentDetailView.tsx
+++ b/apps/web/src/components/inventory/EquipmentDetailView.tsx
@@ -62,7 +62,7 @@ export const EquipmentDetailView: React.FC<EquipmentDetailViewProps> = ({
     );
   if (!item)
     return (
-      <div className="text-center py-20 text-kodo-content-dim">Item not found</div>
+      <div className="text-center py-24 text-kodo-content-dim">Item not found</div>
     );
 
   const images =
@@ -156,7 +156,7 @@ export const EquipmentDetailView: React.FC<EquipmentDetailViewProps> = ({
         {/* Right: Details & History */}
         <div className="space-y-6">
           <div>
-            <div className="flex items-center gap-3 mb-2">
+            <div className="flex items-center gap-4 mb-2">
               <Badge label={item.category} variant="terminal" />
               <span
                 className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase ${item.status === 'Active' ? 'bg-kodo-lime/10 text-kodo-lime' : 'bg-kodo-steel text-kodo-text-main'}`}
@@ -200,7 +200,7 @@ export const EquipmentDetailView: React.FC<EquipmentDetailViewProps> = ({
               <ShieldCheck className="w-4 h-4 text-kodo-lime" /> Warranty &
               Support
             </h3>
-            <div className="flex justify-between items-center mb-4 p-3 bg-kodo-ink rounded border border-kodo-steel/30">
+            <div className="flex justify-between items-center mb-4 p-4 bg-kodo-ink rounded border border-kodo-steel/30">
               <div>
                 <span className="block text-xs text-kodo-content-dim uppercase">
                   Expires
@@ -234,7 +234,7 @@ export const EquipmentDetailView: React.FC<EquipmentDetailViewProps> = ({
                   key={i}
                   className="flex items-center justify-between p-2 hover:bg-white/5 rounded cursor-pointer group transition-colors"
                 >
-                  <div className="flex items-center gap-3">
+                  <div className="flex items-center gap-4">
                     <FileText className="w-4 h-4 text-kodo-steel" />
                     <span className="text-sm text-kodo-text-main">{doc.name}</span>
                   </div>
diff --git a/apps/web/src/components/inventory/InventoryView.tsx b/apps/web/src/components/inventory/InventoryView.tsx
index eee0c392b..1ac0d5887 100644
--- a/apps/web/src/components/inventory/InventoryView.tsx
+++ b/apps/web/src/components/inventory/InventoryView.tsx
@@ -60,7 +60,7 @@ export const InventoryView: React.FC<InventoryViewProps> = ({ onNavigate }) => {
             Track hardware, warranties, and maintenance.
           </p>
         </div>
-        <div className="flex gap-3">
+        <div className="flex gap-4">
           <Button
             variant="ghost"
             icon={<Download className="w-4 h-4" />}
@@ -123,7 +123,7 @@ export const InventoryView: React.FC<InventoryViewProps> = ({ onNavigate }) => {
 
       {/* Grid */}
       {loading ? (
-        <div className="flex justify-center py-20">
+        <div className="flex justify-center py-24">
           <Loader2 className="w-8 h-8 text-kodo-steel animate-spin" />
         </div>
       ) : (
@@ -136,7 +136,7 @@ export const InventoryView: React.FC<InventoryViewProps> = ({ onNavigate }) => {
             />
           ))}
           {filteredItems.length === 0 && (
-            <div className="col-span-full text-center py-20 text-kodo-content-dim">
+            <div className="col-span-full text-center py-24 text-kodo-content-dim">
               <Box className="w-12 h-12 mx-auto mb-4 opacity-50" />
               <p>No equipment found.</p>
             </div>
diff --git a/apps/web/src/components/keyboard/KeyboardShortcutsHelp.tsx b/apps/web/src/components/keyboard/KeyboardShortcutsHelp.tsx
index 144429150..288c4ac80 100644
--- a/apps/web/src/components/keyboard/KeyboardShortcutsHelp.tsx
+++ b/apps/web/src/components/keyboard/KeyboardShortcutsHelp.tsx
@@ -73,7 +73,7 @@ export function KeyboardShortcutsHelp({
       title={t('keyboard.shortcuts.title', 'Keyboard Shortcuts')}
       size="lg"
     >
-      <div className="space-y-3">
+      <div className="space-y-4">
         {shortcuts.map((shortcut, index) => (
           <div
             key={index}
diff --git a/apps/web/src/components/layout/AudioPlayer.tsx b/apps/web/src/components/layout/AudioPlayer.tsx
index bdf586607..6856be357 100644
--- a/apps/web/src/components/layout/AudioPlayer.tsx
+++ b/apps/web/src/components/layout/AudioPlayer.tsx
@@ -77,13 +77,13 @@ export const AudioPlayer: React.FC = () => {
           <div className="flex-1 flex flex-col min-h-0">
             <div className="flex border-b border-kodo-steel bg-kodo-slate/30">
               <button
-                className={`flex-1 py-3 text-xs font-bold uppercase tracking-wider transition-colors ${queueTab === 'up-next' ? 'text-kodo-cyan border-b-2 border-kodo-cyan bg-white/5' : 'text-kodo-content-dim hover:text-white'}`}
+                className={`flex-1 py-4 text-xs font-bold uppercase tracking-wider transition-colors ${queueTab === 'up-next' ? 'text-kodo-cyan border-b-2 border-kodo-cyan bg-white/5' : 'text-kodo-content-dim hover:text-white'}`}
                 onClick={() => setQueueTab('up-next')}
               >
                 Up Next ({queue.length})
               </button>
               <button
-                className={`flex-1 py-3 text-xs font-bold uppercase tracking-wider transition-colors ${queueTab === 'history' ? 'text-kodo-magenta border-b-2 border-kodo-magenta bg-white/5' : 'text-kodo-content-dim hover:text-white'}`}
+                className={`flex-1 py-4 text-xs font-bold uppercase tracking-wider transition-colors ${queueTab === 'history' ? 'text-kodo-magenta border-b-2 border-kodo-magenta bg-white/5' : 'text-kodo-content-dim hover:text-white'}`}
                 onClick={() => setQueueTab('history')}
               >
                 History
@@ -97,7 +97,7 @@ export const AudioPlayer: React.FC = () => {
                     <div className="text-[10px] font-bold text-kodo-steel uppercase tracking-wider mb-2">
                       Now Playing
                     </div>
-                    <div className="flex items-center gap-3 group relative">
+                    <div className="flex items-center gap-4 group relative">
                       <img
                         src={currentTrack.coverUrl}
                         alt={`Cover art for ${currentTrack.title} by ${currentTrack.artist}`}
@@ -135,7 +135,7 @@ export const AudioPlayer: React.FC = () => {
                         onDragStart={(e) => onDragStart(e, i)}
                         onDragOver={(e) => onDragOver(e, i)}
                         onDragEnd={onDragEnd}
-                        className={`flex items-center gap-3 p-2 rounded-lg group transition-colors border border-transparent ${draggedItemIndex === i ? 'bg-kodo-cyan/10 border-kodo-cyan/50' : 'hover:bg-white/5 hover:border-white/5'}`}
+                        className={`flex items-center gap-4 p-2 rounded-lg group transition-colors border border-transparent ${draggedItemIndex === i ? 'bg-kodo-cyan/10 border-kodo-cyan/50' : 'hover:bg-white/5 hover:border-white/5'}`}
                       >
                         <div className="cursor-grab active:cursor-grabbing text-kodo-content-dim hover:text-white p-1">
                           <GripVertical className="w-4 h-4" />
@@ -202,7 +202,7 @@ export const AudioPlayer: React.FC = () => {
                   {[...history].reverse().map((track, i) => (
                     <div
                       key={`${track.id}-${i}`}
-                      className="flex items-center gap-3 p-2 rounded-lg hover:bg-white/5 group opacity-70 hover:opacity-100 transition-opacity"
+                      className="flex items-center gap-4 p-2 rounded-lg hover:bg-white/5 group opacity-70 hover:opacity-100 transition-opacity"
                     >
                       <div className="w-8 h-8 rounded overflow-hidden flex-shrink-0 grayscale group-hover:grayscale-0 transition-all">
                         <img
@@ -235,7 +235,7 @@ export const AudioPlayer: React.FC = () => {
             </div>
 
             {queueTab === 'up-next' && queue.length > 0 && (
-              <div className="p-3 border-t border-kodo-steel bg-kodo-ink">
+              <div className="p-4 border-t border-kodo-steel bg-kodo-ink">
                 <Button
                   variant="ghost"
                   size="sm"
diff --git a/apps/web/src/components/layout/Header.tsx b/apps/web/src/components/layout/Header.tsx
index 7b1807fe9..b1191c133 100644
--- a/apps/web/src/components/layout/Header.tsx
+++ b/apps/web/src/components/layout/Header.tsx
@@ -71,7 +71,7 @@ export function Header(_props: HeaderProps) {
         <div className="flex items-center gap-6">
           <Link
             to="/dashboard"
-            className="flex items-center gap-3 active:scale-95 transition-transform focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-steel focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void rounded"
+            className="flex items-center gap-4 active:scale-95 transition-transform focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-steel focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void rounded"
           >
             <div className="w-10 h-10 bg-kodo-steel/20 rounded-xl flex items-center justify-center border border-kodo-steel/30 shadow-2xl animate-scan">
               <Cpu className="w-6 h-6 text-kodo-steel animate-pulse-glow" />
@@ -114,9 +114,9 @@ export function Header(_props: HeaderProps) {
           </div>
         </div>
 
-        <div className="flex items-center gap-3">
+        <div className="flex items-center gap-4">
           {/* Quick Stats Overlay - Styled specifically */}
-          <div className="hidden lg:flex items-center gap-1 mr-4 bg-kodo-cyan/5 border border-kodo-steel/10 rounded-full px-3 py-1.5">
+          <div className="hidden lg:flex items-center gap-1 mr-4 bg-kodo-cyan/5 border border-kodo-steel/10 rounded-full px-4 py-1.5">
             <div className="w-1.5 h-1.5 rounded-full bg-kodo-lime" />
             <span className="text-[10px] font-mono text-kodo-steel uppercase font-bold tracking-tight">
               Active_Stream_OK
@@ -172,7 +172,7 @@ export function Header(_props: HeaderProps) {
                 onEscape={() => setIsUserMenuOpen(false)}
               >
                 <div className="absolute right-0 mt-3 w-56 glass-hud rounded-2xl border-white/10 shadow-2xl z-50 p-2 animate-scaleIn hud-corner">
-                  <div className="px-4 py-3 border-b border-white/5 mb-2">
+                  <div className="px-4 py-4 border-b border-white/5 mb-2">
                     <div className="text-xs font-mono text-kodo-steel opacity-50 uppercase tracking-widest mb-1">
                       User_Registry
                     </div>
@@ -190,7 +190,7 @@ export function Header(_props: HeaderProps) {
                     <Link
                       to="/profile"
                       onClick={() => setIsUserMenuOpen(false)}
-                      className="flex items-center gap-3 px-3 py-2 text-sm text-kodo-secondary hover:text-white hover:bg-white/5 rounded-xl transition-all group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-steel focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void"
+                      className="flex items-center gap-4 px-4 py-2 text-sm text-kodo-secondary hover:text-white hover:bg-white/5 rounded-xl transition-all group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-steel focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void"
                     >
                       <User className="w-4 h-4" />
                       <span>System.Profile</span>
@@ -198,7 +198,7 @@ export function Header(_props: HeaderProps) {
                     <Link
                       to="/settings"
                       onClick={() => setIsUserMenuOpen(false)}
-                      className="flex items-center gap-3 px-3 py-2 text-sm text-kodo-secondary hover:text-white hover:bg-white/5 rounded-xl transition-all group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-steel focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void"
+                      className="flex items-center gap-4 px-4 py-2 text-sm text-kodo-secondary hover:text-white hover:bg-white/5 rounded-xl transition-all group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-steel focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void"
                     >
                       <Settings className="w-4 h-4 group-hover:rotate-45 transition-transform" />
                       <span>Global.Settings</span>
@@ -206,7 +206,7 @@ export function Header(_props: HeaderProps) {
                     <div className="h-px bg-white/5 my-2 mx-2" />
                     <button
                       onClick={handleLogout}
-                      className="flex items-center gap-3 w-full px-3 py-2 text-sm text-kodo-red/80 hover:text-kodo-red hover:bg-kodo-red/10 rounded-xl transition-all group cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-400 focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void"
+                      className="flex items-center gap-4 w-full px-4 py-2 text-sm text-kodo-red/80 hover:text-kodo-red hover:bg-kodo-red/10 rounded-xl transition-all group cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-400 focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void"
                     >
                       <LogOut className="w-4 h-4" />
                       <span>Terminate.Session</span>
diff --git a/apps/web/src/components/layout/Navbar.tsx b/apps/web/src/components/layout/Navbar.tsx
index ed35c9b42..5e234a2ac 100644
--- a/apps/web/src/components/layout/Navbar.tsx
+++ b/apps/web/src/components/layout/Navbar.tsx
@@ -88,7 +88,7 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, onLogout }) => {
             <Menu className="w-5 h-5" />
           </Button>
           <div
-            className="flex items-center gap-3 cursor-pointer"
+            className="flex items-center gap-4 cursor-pointer"
             onClick={() => onNavigate('dashboard')}
           >
             <div className="w-8 h-8 rounded-full bg-gradient-to-br from-kodo-cyan-dim to-kodo-cyan flex items-center justify-center shadow-lg shadow-kodo-steel/20">
@@ -118,9 +118,9 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, onLogout }) => {
         </div>
 
         {/* Right Actions */}
-        <div className="flex items-center gap-3 md:gap-6">
+        <div className="flex items-center gap-4 md:gap-6">
           {/* Pro Badge */}
-          <div className="hidden xl:flex items-center gap-3 border-r border-kodo-steel/50 pr-6">
+          <div className="hidden xl:flex items-center gap-4 border-r border-kodo-steel/50 pr-6">
             <div className="text-right">
               <div className="text-xs text-kodo-primary font-medium">
                 Pro Plan
@@ -187,7 +187,7 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, onLogout }) => {
 
             {showUserMenu && (
               <div className="absolute top-full right-0 mt-4 w-56 bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl overflow-hidden animate-fadeIn origin-top-right ring-1 ring-white/5 flex flex-col">
-                <div className="px-4 py-3 border-b border-kodo-steel/30 mb-1 bg-kodo-ink/50">
+                <div className="px-4 py-4 border-b border-kodo-steel/30 mb-1 bg-kodo-ink/50">
                   <p className="text-sm font-bold text-white">Cyber_Producer</p>
                   <p className="text-xs text-kodo-content-dim">Pro Plan</p>
                 </div>
@@ -196,7 +196,7 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, onLogout }) => {
                     onNavigate('profile');
                     setShowUserMenu(false);
                   }}
-                  className="w-full text-left px-4 py-2.5 text-sm text-kodo-text-main hover:bg-white/5 hover:text-white flex items-center gap-3 transition-colors"
+                  className="w-full text-left px-4 py-2.5 text-sm text-kodo-text-main hover:bg-white/5 hover:text-white flex items-center gap-4 transition-colors"
                 >
                   <User className="w-4 h-4" /> My Profile
                 </button>
@@ -205,7 +205,7 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, onLogout }) => {
                     onNavigate('studio/go-live');
                     setShowUserMenu(false);
                   }}
-                  className="w-full text-left px-4 py-2.5 text-sm text-kodo-text-main hover:bg-white/5 hover:text-white flex items-center gap-3 transition-colors"
+                  className="w-full text-left px-4 py-2.5 text-sm text-kodo-text-main hover:bg-white/5 hover:text-white flex items-center gap-4 transition-colors"
                 >
                   <Zap className="w-4 h-4 text-kodo-red" /> Go Live
                 </button>
@@ -214,7 +214,7 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, onLogout }) => {
                     onNavigate('purchases');
                     setShowUserMenu(false);
                   }}
-                  className="w-full text-left px-4 py-2.5 text-sm text-kodo-text-main hover:bg-white/5 hover:text-white flex items-center gap-3 transition-colors"
+                  className="w-full text-left px-4 py-2.5 text-sm text-kodo-text-main hover:bg-white/5 hover:text-white flex items-center gap-4 transition-colors"
                 >
                   <ShoppingCart className="w-4 h-4" /> Purchases
                 </button>
@@ -223,7 +223,7 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, onLogout }) => {
                     onNavigate('settings');
                     setShowUserMenu(false);
                   }}
-                  className="w-full text-left px-4 py-2.5 text-sm text-kodo-text-main hover:bg-white/5 hover:text-white flex items-center gap-3 transition-colors"
+                  className="w-full text-left px-4 py-2.5 text-sm text-kodo-text-main hover:bg-white/5 hover:text-white flex items-center gap-4 transition-colors"
                 >
                   <Settings className="w-4 h-4" /> Settings
                 </button>
@@ -233,7 +233,7 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, onLogout }) => {
                     onLogout();
                     setShowUserMenu(false);
                   }}
-                  className="w-full text-left px-4 py-2.5 text-sm text-kodo-red hover:bg-kodo-red/10 rounded-lg flex items-center gap-3 transition-colors"
+                  className="w-full text-left px-4 py-2.5 text-sm text-kodo-red hover:bg-kodo-red/10 rounded-lg flex items-center gap-4 transition-colors"
                 >
                   <LogOut className="w-4 h-4" /> Sign Out
                 </button>
diff --git a/apps/web/src/components/layout/Sidebar.tsx b/apps/web/src/components/layout/Sidebar.tsx
index 99952902d..71d537be1 100644
--- a/apps/web/src/components/layout/Sidebar.tsx
+++ b/apps/web/src/components/layout/Sidebar.tsx
@@ -212,7 +212,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
         style={{ zIndex: 'var(--z-fixed)' }}
       >
         {/* Hub Header Integration */}
-        <div className="p-6 border-b border-white/5 flex items-center gap-3">
+        <div className="p-6 border-b border-white/5 flex items-center gap-4">
           <div className="w-8 h-8 rounded bg-kodo-steel/20 flex items-center justify-center border border-kodo-steel/30 animate-pulse-glow">
             <Cpu className="w-5 h-5 text-kodo-steel" />
           </div>
@@ -231,11 +231,11 @@ export const Sidebar: React.FC<SidebarProps> = ({
           )}
         </div>
 
-        <div className="flex-1 overflow-y-auto custom-scrollbar p-3 space-y-6 mt-4">
+        <div className="flex-1 overflow-y-auto custom-scrollbar p-4 space-y-6 mt-4">
           {navItems.map((group, idx) => (
             <div key={idx} className="mb-4">
               {sidebarOpen && (
-                <h3 className="text-[9px] font-mono font-bold text-kodo-steel/60 uppercase tracking-[0.2em] mb-3 px-3 flex items-center gap-2 animate-fadeIn">
+                <h3 className="text-[9px] font-mono font-bold text-kodo-steel/60 uppercase tracking-[0.2em] mb-3 px-4 flex items-center gap-2 animate-fadeIn">
                   {group.section}
                 </h3>
               )}
@@ -268,7 +268,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
                         <div className="absolute left-0 top-1 bottom-1 w-1 bg-kodo-cyan rounded-full shadow-[0_0_10px_rgba(102,252,241,0.5)]" />
                       )}
 
-                      <div className="flex items-center gap-3 relative z-10 w-full">
+                      <div className="flex items-center gap-4 relative z-10 w-full">
                         <span
                           className={cn(
                             'transition-colors duration-200',
@@ -299,7 +299,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
           ))}
         </div>
 
-        <div className="p-3 border-t border-white/5 bg-white/2">
+        <div className="p-4 border-t border-white/5 bg-white/2">
           <Link
             to="/settings"
             onClick={() => {
@@ -309,7 +309,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
               }
             }}
             className={cn(
-              'w-full flex items-center gap-3 px-4 py-2.5 text-sm rounded-xl transition-all',
+              'w-full flex items-center gap-4 px-4 py-2.5 text-sm rounded-xl transition-all',
               'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-cyan focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void',
               activeView === 'settings'
                 ? 'glass-hud-active text-kodo-cyan'
@@ -321,7 +321,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
           </Link>
           <button
             onClick={handleLogout}
-            className="w-full flex items-center gap-3 px-4 py-2.5 text-kodo-red/80 hover:text-kodo-red hover:bg-kodo-red/10 rounded-xl transition-all text-sm mt-1 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-400 focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void"
+            className="w-full flex items-center gap-4 px-4 py-2.5 text-kodo-red/80 hover:text-kodo-red hover:bg-kodo-red/10 rounded-xl transition-all text-sm mt-1 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-400 focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void"
           >
             <LogOut className="w-4 h-4" />
             {sidebarOpen && (
diff --git a/apps/web/src/components/library/AutoMetadataDetectionModal.tsx b/apps/web/src/components/library/AutoMetadataDetectionModal.tsx
index ef2251782..25e093e7e 100644
--- a/apps/web/src/components/library/AutoMetadataDetectionModal.tsx
+++ b/apps/web/src/components/library/AutoMetadataDetectionModal.tsx
@@ -111,7 +111,7 @@ export const AutoMetadataDetectionModal: React.FC<
                 </div>
               </div>
 
-              <div className="flex gap-3 w-full">
+              <div className="flex gap-4 w-full">
                 <Button variant="ghost" onClick={onClose} className="flex-1">
                   Discard
                 </Button>
diff --git a/apps/web/src/components/library/WatermarkSettingsModal.tsx b/apps/web/src/components/library/WatermarkSettingsModal.tsx
index 15137eddd..8d3429e70 100644
--- a/apps/web/src/components/library/WatermarkSettingsModal.tsx
+++ b/apps/web/src/components/library/WatermarkSettingsModal.tsx
@@ -105,7 +105,7 @@ export const WatermarkSettingsModal: React.FC<WatermarkSettingsModalProps> = ({
             </div>
           </div>
 
-          <div className="mt-8 pt-4 border-t border-kodo-steel flex gap-3">
+          <div className="mt-8 pt-4 border-t border-kodo-steel flex gap-4">
             <Button variant="ghost" onClick={onClose} className="flex-1">
               Cancel
             </Button>
diff --git a/apps/web/src/components/library/playlists/CreatePlaylistModal.tsx b/apps/web/src/components/library/playlists/CreatePlaylistModal.tsx
index 9306b1dc8..57c2eff30 100644
--- a/apps/web/src/components/library/playlists/CreatePlaylistModal.tsx
+++ b/apps/web/src/components/library/playlists/CreatePlaylistModal.tsx
@@ -57,7 +57,7 @@ export const CreatePlaylistModal: React.FC<CreatePlaylistModalProps> = ({
             />
 
             <textarea
-              className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-steel outline-none text-sm resize-none h-24"
+              className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-4 text-white focus:border-kodo-steel outline-none text-sm resize-none h-24"
               placeholder="Description (Optional)"
               value={description}
               onChange={(e) => setDescription(e.target.value)}
@@ -68,7 +68,7 @@ export const CreatePlaylistModal: React.FC<CreatePlaylistModalProps> = ({
                 className="flex items-center justify-between p-2 rounded hover:bg-white/5 cursor-pointer"
                 onClick={() => setIsPublic(!isPublic)}
               >
-                <div className="flex items-center gap-3">
+                <div className="flex items-center gap-4">
                   {isPublic ? (
                     <Globe className="w-4 h-4 text-kodo-steel" />
                   ) : (
@@ -98,7 +98,7 @@ export const CreatePlaylistModal: React.FC<CreatePlaylistModalProps> = ({
                 className="flex items-center justify-between p-2 rounded hover:bg-white/5 cursor-pointer"
                 onClick={() => setIsCollaborative(!isCollaborative)}
               >
-                <div className="flex items-center gap-3">
+                <div className="flex items-center gap-4">
                   <Users
                     className={`w-4 h-4 ${isCollaborative ? 'text-kodo-lime' : 'text-kodo-content-dim'}`}
                   />
@@ -121,7 +121,7 @@ export const CreatePlaylistModal: React.FC<CreatePlaylistModalProps> = ({
           </div>
         </div>
 
-        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-3">
+        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
           <Button variant="ghost" onClick={onClose}>
             Cancel
           </Button>
diff --git a/apps/web/src/components/library/playlists/EditPlaylistModal.tsx b/apps/web/src/components/library/playlists/EditPlaylistModal.tsx
index 1530a4557..6a4bf59bf 100644
--- a/apps/web/src/components/library/playlists/EditPlaylistModal.tsx
+++ b/apps/web/src/components/library/playlists/EditPlaylistModal.tsx
@@ -53,7 +53,7 @@ export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({
           <p className="text-sm text-kodo-content-dim mb-6">
             This action cannot be undone.
           </p>
-          <div className="flex gap-3 justify-center">
+          <div className="flex gap-4 justify-center">
             <Button variant="ghost" onClick={() => setShowDeleteConfirm(false)}>
               Cancel
             </Button>
@@ -103,7 +103,7 @@ export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({
             />
 
             <textarea
-              className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-steel outline-none text-sm resize-none h-24"
+              className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-4 text-white focus:border-kodo-steel outline-none text-sm resize-none h-24"
               placeholder="Description"
               value={description}
               onChange={(e) => setDescription(e.target.value)}
@@ -114,7 +114,7 @@ export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({
                 className="flex items-center justify-between p-2 rounded hover:bg-white/5 cursor-pointer"
                 onClick={() => setIsPublic(!isPublic)}
               >
-                <div className="flex items-center gap-3">
+                <div className="flex items-center gap-4">
                   {isPublic ? (
                     <Globe className="w-4 h-4 text-kodo-steel" />
                   ) : (
@@ -148,7 +148,7 @@ export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({
           >
             Delete Playlist
           </Button>
-          <div className="flex gap-3">
+          <div className="flex gap-4">
             <Button variant="ghost" onClick={onClose}>
               Cancel
             </Button>
diff --git a/apps/web/src/components/library/playlists/PlaylistDetailView.tsx b/apps/web/src/components/library/playlists/PlaylistDetailView.tsx
index edbb1884e..9d8c7d9eb 100644
--- a/apps/web/src/components/library/playlists/PlaylistDetailView.tsx
+++ b/apps/web/src/components/library/playlists/PlaylistDetailView.tsx
@@ -137,7 +137,7 @@ export const PlaylistDetailView: React.FC<PlaylistDetailViewProps> = ({
             </span>
           </div>
 
-          <div className="flex flex-wrap gap-3">
+          <div className="flex flex-wrap gap-4">
             <Button
               variant="primary"
               size="lg"
@@ -205,7 +205,7 @@ export const PlaylistDetailView: React.FC<PlaylistDetailViewProps> = ({
                   onClick={() => playTrack(track, tracks)}
                 />
               </div>
-              <div className="flex items-center gap-3 min-w-0">
+              <div className="flex items-center gap-4 min-w-0">
                 <img
                   src={track.coverUrl}
                   className="w-10 h-10 rounded object-cover"
diff --git a/apps/web/src/components/library/playlists/PlaylistsView.tsx b/apps/web/src/components/library/playlists/PlaylistsView.tsx
index b72649fe3..73363bbff 100644
--- a/apps/web/src/components/library/playlists/PlaylistsView.tsx
+++ b/apps/web/src/components/library/playlists/PlaylistsView.tsx
@@ -116,7 +116,7 @@ export const PlaylistsView: React.FC<{
       </div>
 
       {loading ? (
-        <div className="flex justify-center py-20">
+        <div className="flex justify-center py-24">
           <Loader2 className="w-8 h-8 text-kodo-steel animate-spin" />
         </div>
       ) : (
diff --git a/apps/web/src/components/library/playlists/QueueView.tsx b/apps/web/src/components/library/playlists/QueueView.tsx
index 0c6ed06d3..dd49fcc78 100644
--- a/apps/web/src/components/library/playlists/QueueView.tsx
+++ b/apps/web/src/components/library/playlists/QueueView.tsx
@@ -65,7 +65,7 @@ export const QueueView: React.FC = () => {
             {queue.length} tracks upcoming
           </p>
         </div>
-        <div className="flex gap-3">
+        <div className="flex gap-4">
           <Button
             variant="ghost"
             onClick={() => setShowSaveModal(true)}
@@ -176,7 +176,7 @@ export const QueueView: React.FC = () => {
                 onDragStart={(e) => handleDragStart(e, i)}
                 onDragOver={(e) => handleDragOver(e, i)}
                 onDragEnd={() => setDraggedIndex(null)}
-                className={`flex items-center gap-4 p-3 bg-kodo-ink rounded-lg border border-transparent hover:border-kodo-steel transition-all group ${draggedIndex === i ? 'opacity-50 border-kodo-cyan' : ''}`}
+                className={`flex items-center gap-4 p-4 bg-kodo-ink rounded-lg border border-transparent hover:border-kodo-steel transition-all group ${draggedIndex === i ? 'opacity-50 border-kodo-cyan' : ''}`}
               >
                 <div className="text-kodo-content-dim cursor-grab active:cursor-grabbing hover:text-white p-1">
                   <GripVertical className="w-5 h-5" />
diff --git a/apps/web/src/components/library/playlists/SaveQueueAsPlaylistModal.tsx b/apps/web/src/components/library/playlists/SaveQueueAsPlaylistModal.tsx
index 041a57a74..8ec173127 100644
--- a/apps/web/src/components/library/playlists/SaveQueueAsPlaylistModal.tsx
+++ b/apps/web/src/components/library/playlists/SaveQueueAsPlaylistModal.tsx
@@ -49,10 +49,10 @@ export const SaveQueueAsPlaylistModal: React.FC<
           />
 
           <div
-            className="flex items-center justify-between p-3 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-kodo-steel"
+            className="flex items-center justify-between p-4 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-kodo-steel"
             onClick={() => setIsPublic(!isPublic)}
           >
-            <div className="flex items-center gap-3">
+            <div className="flex items-center gap-4">
               {isPublic ? (
                 <Globe className="w-5 h-5 text-kodo-steel" />
               ) : (
@@ -77,7 +77,7 @@ export const SaveQueueAsPlaylistModal: React.FC<
           </div>
         </div>
 
-        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-3">
+        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
           <Button variant="ghost" onClick={onClose}>
             Cancel
           </Button>
diff --git a/apps/web/src/components/live/LiveStreamDetailView.tsx b/apps/web/src/components/live/LiveStreamDetailView.tsx
index 94a0ea577..0a0858f7a 100644
--- a/apps/web/src/components/live/LiveStreamDetailView.tsx
+++ b/apps/web/src/components/live/LiveStreamDetailView.tsx
@@ -82,7 +82,7 @@ export const LiveStreamDetailView: React.FC<LiveStreamDetailViewProps> = ({
   };
 
   return (
-    <div className="flex flex-col h-[calc(100vh-6rem)] -m-6 md:-m-10 bg-black animate-fadeIn overflow-hidden">
+    <div className="flex flex-col h-[calc(100vh-6rem)] -m-6 md:-m-12 bg-black animate-fadeIn overflow-hidden">
       {/* Header Overlay (Fade in/out logic usually here) */}
       <div className="absolute top-0 left-0 right-0 p-4 z-20 flex justify-between items-start pointer-events-none">
         <Button
@@ -121,7 +121,7 @@ export const LiveStreamDetailView: React.FC<LiveStreamDetailViewProps> = ({
                   <h1 className="text-3xl font-bold text-white mb-1">
                     {MOCK_STREAM.title}
                   </h1>
-                  <div className="flex items-center gap-3 text-sm">
+                  <div className="flex items-center gap-4 text-sm">
                     <span className="text-kodo-steel font-bold">
                       {MOCK_STREAM.streamer}
                     </span>
@@ -135,7 +135,7 @@ export const LiveStreamDetailView: React.FC<LiveStreamDetailViewProps> = ({
                   </div>
                 </div>
               </div>
-              <div className="flex gap-3">
+              <div className="flex gap-4">
                 <Button
                   variant="secondary"
                   className="bg-black/50 backdrop-blur border-white/20 text-white"
diff --git a/apps/web/src/components/live/modals/TipStreamerModal.tsx b/apps/web/src/components/live/modals/TipStreamerModal.tsx
index b65b13086..04f2c6106 100644
--- a/apps/web/src/components/live/modals/TipStreamerModal.tsx
+++ b/apps/web/src/components/live/modals/TipStreamerModal.tsx
@@ -84,7 +84,7 @@ export const TipStreamerModal: React.FC<TipStreamerModalProps> = ({
               Message (Optional)
             </label>
             <textarea
-              className="w-full bg-kodo-ink border border-kodo-steel rounded p-3 text-white focus:border-kodo-gold outline-none text-sm resize-none h-24"
+              className="w-full bg-kodo-ink border border-kodo-steel rounded p-4 text-white focus:border-kodo-gold outline-none text-sm resize-none h-24"
               placeholder={`Say something nice to ${streamerName}...`}
               value={message}
               onChange={(e) => setMessage(e.target.value)}
@@ -117,7 +117,7 @@ export const TipStreamerModal: React.FC<TipStreamerModalProps> = ({
           </div>
         </div>
 
-        <div className="p-4 border-t border-kodo-gold/30 bg-kodo-ink flex justify-end gap-3">
+        <div className="p-4 border-t border-kodo-gold/30 bg-kodo-ink flex justify-end gap-4">
           <Button variant="ghost" onClick={onClose}>
             Cancel
           </Button>
diff --git a/apps/web/src/components/marketplace/ProductCard.tsx b/apps/web/src/components/marketplace/ProductCard.tsx
index c4ac50dfc..95851f26b 100644
--- a/apps/web/src/components/marketplace/ProductCard.tsx
+++ b/apps/web/src/components/marketplace/ProductCard.tsx
@@ -79,7 +79,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
       </div>
 
       {/* Details */}
-      <div className="p-5">
+      <div className="p-6">
         <div className="flex justify-between items-start mb-2">
           <h3 className="font-bold text-white text-base truncate pr-2 group-hover:text-white transition-colors">
             {product.title}
diff --git a/apps/web/src/components/marketplace/ProductDetailView.tsx b/apps/web/src/components/marketplace/ProductDetailView.tsx
index 8f00a7d51..95ec0cb9f 100644
--- a/apps/web/src/components/marketplace/ProductDetailView.tsx
+++ b/apps/web/src/components/marketplace/ProductDetailView.tsx
@@ -75,7 +75,7 @@ export const ProductDetailView: React.FC<ProductDetailViewProps> = ({
             <div className="absolute inset-0 bg-black/20 group-hover:bg-transparent transition-colors"></div>
 
             {/* Audio Preview Overlay */}
-            <div className="absolute bottom-6 left-6 right-6 bg-black/60 backdrop-blur-md rounded-xl p-3 flex items-center gap-4 border border-white/10">
+            <div className="absolute bottom-6 left-6 right-6 bg-black/60 backdrop-blur-md rounded-xl p-4 flex items-center gap-4 border border-white/10">
               <button
                 onClick={() => setIsPlaying(!isPlaying)}
                 className="w-10 h-10 rounded-full bg-kodo-cyan text-black flex items-center justify-center hover:scale-110 transition-transform"
@@ -151,25 +151,25 @@ export const ProductDetailView: React.FC<ProductDetailViewProps> = ({
 
           {/* Metadata Grid */}
           <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
-            <div className="bg-kodo-ink p-3 rounded border border-kodo-steel/50">
+            <div className="bg-kodo-ink p-4 rounded border border-kodo-steel/50">
               <div className="text-[10px] text-kodo-content-dim uppercase font-bold">
                 BPM
               </div>
               <div className="text-white font-mono">{product.bpm || '-'}</div>
             </div>
-            <div className="bg-kodo-ink p-3 rounded border border-kodo-steel/50">
+            <div className="bg-kodo-ink p-4 rounded border border-kodo-steel/50">
               <div className="text-[10px] text-kodo-content-dim uppercase font-bold">
                 Key
               </div>
               <div className="text-white font-mono">{product.key || '-'}</div>
             </div>
-            <div className="bg-kodo-ink p-3 rounded border border-kodo-steel/50">
+            <div className="bg-kodo-ink p-4 rounded border border-kodo-steel/50">
               <div className="text-[10px] text-kodo-content-dim uppercase font-bold">
                 Genre
               </div>
               <div className="text-white truncate">{product.genre || '-'}</div>
             </div>
-            <div className="bg-kodo-ink p-3 rounded border border-kodo-steel/50">
+            <div className="bg-kodo-ink p-4 rounded border border-kodo-steel/50">
               <div className="text-[10px] text-kodo-content-dim uppercase font-bold">
                 Size
               </div>
@@ -306,7 +306,7 @@ export const ProductDetailView: React.FC<ProductDetailViewProps> = ({
               {similarProducts.slice(0, 3).map((p) => (
                 <div
                   key={p.id}
-                  className="flex gap-3 cursor-pointer group"
+                  className="flex gap-4 cursor-pointer group"
                   onClick={() => addToast('Navigating to product...')}
                 >
                   <img
diff --git a/apps/web/src/components/marketplace/modals/LicenceDetailsModal.tsx b/apps/web/src/components/marketplace/modals/LicenceDetailsModal.tsx
index 8f78ecd43..1f7037a2e 100644
--- a/apps/web/src/components/marketplace/modals/LicenceDetailsModal.tsx
+++ b/apps/web/src/components/marketplace/modals/LicenceDetailsModal.tsx
@@ -54,7 +54,7 @@ export const LicenceDetailsModal: React.FC<LicenceDetailsModalProps> = ({
                 {license.features.map((feat, i) => (
                   <li
                     key={i}
-                    className="flex items-start gap-3 text-sm text-kodo-text-main"
+                    className="flex items-start gap-4 text-sm text-kodo-text-main"
                   >
                     <div className="mt-0.5 bg-kodo-lime/10 p-0.5 rounded-full">
                       <Check className="w-3 h-3 text-kodo-lime" />
@@ -70,13 +70,13 @@ export const LicenceDetailsModal: React.FC<LicenceDetailsModalProps> = ({
                 Restrictions
               </h4>
               <ul className="space-y-2">
-                <li className="flex items-start gap-3 text-sm text-kodo-content-dim">
+                <li className="flex items-start gap-4 text-sm text-kodo-content-dim">
                   <div className="mt-0.5 bg-kodo-red/10 p-0.5 rounded-full">
                     <XCircle className="w-3 h-3 text-kodo-red" />
                   </div>
                   Do not resell or redistribute as a sample pack.
                 </li>
-                <li className="flex items-start gap-3 text-sm text-kodo-content-dim">
+                <li className="flex items-start gap-4 text-sm text-kodo-content-dim">
                   <div className="mt-0.5 bg-kodo-red/10 p-0.5 rounded-full">
                     <XCircle className="w-3 h-3 text-kodo-red" />
                   </div>
@@ -95,7 +95,7 @@ export const LicenceDetailsModal: React.FC<LicenceDetailsModalProps> = ({
           </div>
         </div>
 
-        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-3">
+        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
           <Button variant="ghost" onClick={onClose}>
             Close
           </Button>
diff --git a/apps/web/src/components/marketplace/modals/ReviewProductModal.tsx b/apps/web/src/components/marketplace/modals/ReviewProductModal.tsx
index 699732022..f50bb8957 100644
--- a/apps/web/src/components/marketplace/modals/ReviewProductModal.tsx
+++ b/apps/web/src/components/marketplace/modals/ReviewProductModal.tsx
@@ -77,7 +77,7 @@ export const ReviewProductModal: React.FC<ReviewProductModalProps> = ({
               Your Review
             </label>
             <textarea
-              className="w-full bg-kodo-void border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-steel outline-none text-sm resize-none h-32"
+              className="w-full bg-kodo-void border border-kodo-steel rounded-lg p-4 text-white focus:border-kodo-steel outline-none text-sm resize-none h-32"
               placeholder="Share your thoughts on the quality, usability, and value..."
               value={comment}
               onChange={(e) => setComment(e.target.value)}
@@ -85,7 +85,7 @@ export const ReviewProductModal: React.FC<ReviewProductModalProps> = ({
           </div>
         </div>
 
-        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-3">
+        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
           <Button variant="ghost" onClick={onClose}>
             Cancel
           </Button>
diff --git a/apps/web/src/components/modals/CreatorModal.tsx b/apps/web/src/components/modals/CreatorModal.tsx
index a9ae641cd..9f0dba3cb 100644
--- a/apps/web/src/components/modals/CreatorModal.tsx
+++ b/apps/web/src/components/modals/CreatorModal.tsx
@@ -110,15 +110,15 @@ export const CreatorModal: React.FC<CreatorModalProps> = ({
                     Visibility
                   </label>
                   <div className="grid grid-cols-3 gap-2">
-                    <Button variant="outline" className="p-3 flex flex-col items-center justify-center gap-2 text-kodo-steel bg-kodo-steel/10 border-kodo-steel">
+                    <Button variant="outline" className="p-4 flex flex-col items-center justify-center gap-2 text-kodo-steel bg-kodo-steel/10 border-kodo-steel">
                       <Tag className="w-5 h-5" />{' '}
                       <span className="text-xs font-bold">Public</span>
                     </Button>
-                    <Button variant="outline" className="p-3 flex flex-col items-center justify-center gap-2">
+                    <Button variant="outline" className="p-4 flex flex-col items-center justify-center gap-2">
                       <Lock className="w-5 h-5" />{' '}
                       <span className="text-xs font-bold">Private</span>
                     </Button>
-                    <Button variant="outline" className="p-3 flex flex-col items-center justify-center gap-2">
+                    <Button variant="outline" className="p-4 flex flex-col items-center justify-center gap-2">
                       <DollarSign className="w-5 h-5" />{' '}
                       <span className="text-xs font-bold">Premium</span>
                     </Button>
@@ -129,7 +129,7 @@ export const CreatorModal: React.FC<CreatorModalProps> = ({
           )}
 
           {activeTab === 'product' && (
-            <div className="text-center py-10">
+            <div className="text-center py-12">
               <h3 className="text-xl font-bold text-white mb-2">
                 Sell Your Sounds
               </h3>
diff --git a/apps/web/src/components/navigation/Tabs.tsx b/apps/web/src/components/navigation/Tabs.tsx
index b718e25fa..fafa5ac0e 100644
--- a/apps/web/src/components/navigation/Tabs.tsx
+++ b/apps/web/src/components/navigation/Tabs.tsx
@@ -140,7 +140,7 @@ export function Tabs({
       list: 'gap-1 bg-muted p-1 rounded-md',
       tab: (isActive: boolean) =>
         cn(
-          'px-3 py-1.5 text-sm font-medium rounded-sm transition-colors',
+          'px-4 py-1.5 text-sm font-medium rounded-sm transition-colors',
           'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
           isActive
             ? 'bg-background text-foreground shadow-sm'
diff --git a/apps/web/src/components/notifications/NotificationBell.tsx b/apps/web/src/components/notifications/NotificationBell.tsx
index cbf0b7735..92560ab7f 100644
--- a/apps/web/src/components/notifications/NotificationBell.tsx
+++ b/apps/web/src/components/notifications/NotificationBell.tsx
@@ -68,7 +68,7 @@ export const NotificationBell: React.FC<NotificationBellProps> = ({
 
           <div className="flex-1 overflow-y-auto custom-scrollbar p-2 space-y-1">
             {notifications.length === 0 ? (
-              <div className="text-center py-10 text-kodo-content-dim">
+              <div className="text-center py-12 text-kodo-content-dim">
                 <Bell className="w-8 h-8 mx-auto mb-2 opacity-50" />
                 <p className="text-sm">No new notifications</p>
               </div>
diff --git a/apps/web/src/components/notifications/NotificationMenu.tsx b/apps/web/src/components/notifications/NotificationMenu.tsx
index b886f0db4..194d3271f 100644
--- a/apps/web/src/components/notifications/NotificationMenu.tsx
+++ b/apps/web/src/components/notifications/NotificationMenu.tsx
@@ -318,7 +318,7 @@ export function NotificationMenu({
 
           {/* Footer with link to all notifications */}
           {notifications.length > 0 && (
-            <div className="p-3 border-t">
+            <div className="p-4 border-t">
               <Button
                 variant="ghost"
                 size="sm"
diff --git a/apps/web/src/components/player/AudioPlayer.tsx b/apps/web/src/components/player/AudioPlayer.tsx
index 20b27e6bd..149673c56 100644
--- a/apps/web/src/components/player/AudioPlayer.tsx
+++ b/apps/web/src/components/player/AudioPlayer.tsx
@@ -202,10 +202,10 @@ export function AudioPlayer({ className: _className }: AudioPlayerProps = {}) {
     <>
       <audio ref={audioRef} preload="metadata" />
       <div className="fixed bottom-0 left-0 right-0 bg-background border-t border-border shadow-lg z-50">
-        <div className="container mx-auto px-4 py-3">
+        <div className="container mx-auto px-4 py-4">
           <div className="flex items-center gap-4">
             {/* Track Info */}
-            <div className="flex items-center gap-3 flex-1 min-w-0">
+            <div className="flex items-center gap-4 flex-1 min-w-0">
               {currentTrack.cover && (
                 <img
                   src={currentTrack.cover}
diff --git a/apps/web/src/components/player/FullPlayer.tsx b/apps/web/src/components/player/FullPlayer.tsx
index 76f884e40..bef2b23e4 100644
--- a/apps/web/src/components/player/FullPlayer.tsx
+++ b/apps/web/src/components/player/FullPlayer.tsx
@@ -58,7 +58,7 @@ export const FullPlayer: React.FC<FullPlayerProps> = ({ onClose }) => {
           <Minimize2 className="w-6 h-6" />
         </Button>
         <div className="flex gap-2">
-          <span className="px-3 py-1 bg-white/10 rounded-full text-xs font-bold text-white tracking-widest border border-white/20 backdrop-blur">
+          <span className="px-4 py-1 bg-white/10 rounded-full text-xs font-bold text-white tracking-widest border border-white/20 backdrop-blur">
             LOSSLESS
           </span>
         </div>
diff --git a/apps/web/src/components/player/LyricsPanel.tsx b/apps/web/src/components/player/LyricsPanel.tsx
index 662915ecd..d39875aaa 100644
--- a/apps/web/src/components/player/LyricsPanel.tsx
+++ b/apps/web/src/components/player/LyricsPanel.tsx
@@ -55,7 +55,7 @@ export const LyricsPanel: React.FC = () => {
       </div>
       <div
         ref={scrollRef}
-        className="flex-1 overflow-y-auto custom-scrollbar px-4 space-y-6 text-center mask-image-linear-to-b py-20"
+        className="flex-1 overflow-y-auto custom-scrollbar px-4 space-y-6 text-center mask-image-linear-to-b py-24"
       >
         {currentTrack.lyrics.map(
           (line: { time: number; text: string }, i: number) => {
diff --git a/apps/web/src/components/player/MiniPlayer.tsx b/apps/web/src/components/player/MiniPlayer.tsx
index e498e7a6e..300e0f751 100644
--- a/apps/web/src/components/player/MiniPlayer.tsx
+++ b/apps/web/src/components/player/MiniPlayer.tsx
@@ -74,7 +74,7 @@ export const MiniPlayer: React.FC<MiniPlayerProps> = ({
       <div className="flex flex-col items-center flex-1 max-w-2xl px-4">
         <PlayerControls layout="compact" />
 
-        <div className="w-full flex items-center gap-3 group mt-1">
+        <div className="w-full flex items-center gap-4 group mt-1">
           <span className="text-[10px] font-mono text-kodo-content-dim w-8 text-right">
             {formatTime(currentTime)}
           </span>
@@ -101,7 +101,7 @@ export const MiniPlayer: React.FC<MiniPlayerProps> = ({
       </div>
 
       {/* 3. Right Actions */}
-      <div className="flex items-center justify-end gap-3 w-[30%] min-w-[200px]">
+      <div className="flex items-center justify-end gap-4 w-[30%] min-w-[200px]">
         <button
           className="text-kodo-content-dim hover:text-kodo-magenta transition-colors hidden xl:block"
           title="Lyrics"
diff --git a/apps/web/src/components/player/PlaybackSpeedModal.tsx b/apps/web/src/components/player/PlaybackSpeedModal.tsx
index f8b216119..0b73a4f4f 100644
--- a/apps/web/src/components/player/PlaybackSpeedModal.tsx
+++ b/apps/web/src/components/player/PlaybackSpeedModal.tsx
@@ -63,7 +63,7 @@ export const PlaybackSpeedModal: React.FC<PlaybackSpeedModalProps> = ({
         </div>
 
         {/* Pitch Correction */}
-        <div className="flex items-center justify-between p-3 bg-kodo-ink rounded-lg border border-kodo-steel/50">
+        <div className="flex items-center justify-between p-4 bg-kodo-ink rounded-lg border border-kodo-steel/50">
           <div className="flex flex-col">
             <span className="text-sm font-bold text-white">
               Pitch Correction
diff --git a/apps/web/src/components/player/PlayerControls.tsx b/apps/web/src/components/player/PlayerControls.tsx
index 4fadc53a4..1d9b51458 100644
--- a/apps/web/src/components/player/PlayerControls.tsx
+++ b/apps/web/src/components/player/PlayerControls.tsx
@@ -119,7 +119,7 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
       </div>
 
       {/* 3. Volume & Speed */}
-      <div className="flex items-center gap-3 relative">
+      <div className="flex items-center gap-4 relative">
         {layout === 'full' && (
           <>
             <button
diff --git a/apps/web/src/components/player/QueuePanel.tsx b/apps/web/src/components/player/QueuePanel.tsx
index e0c09f5cb..e4c7ed844 100644
--- a/apps/web/src/components/player/QueuePanel.tsx
+++ b/apps/web/src/components/player/QueuePanel.tsx
@@ -30,7 +30,7 @@ export function QueuePanel({ onClose }: QueuePanelProps) {
             {queue.map((track, index) => (
               <div
                 key={`${track.id}-${index}`}
-                className={`flex items-center gap-3 p-2 rounded hover:bg-accent ${
+                className={`flex items-center gap-4 p-2 rounded hover:bg-accent ${
                   index === currentIndex ? 'bg-accent' : ''
                 }`}
               >
diff --git a/apps/web/src/components/player/VisualizerSettingsModal.tsx b/apps/web/src/components/player/VisualizerSettingsModal.tsx
index d893f9be3..480d1614e 100644
--- a/apps/web/src/components/player/VisualizerSettingsModal.tsx
+++ b/apps/web/src/components/player/VisualizerSettingsModal.tsx
@@ -28,7 +28,7 @@ export const VisualizerSettingsModal: React.FC<
         </button>
       </div>
 
-      <div className="p-5 space-y-5">
+      <div className="p-6 space-y-6">
         {/* Mode */}
         <div>
           <label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
@@ -70,7 +70,7 @@ export const VisualizerSettingsModal: React.FC<
           <label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
             Accent Color
           </label>
-          <div className="flex gap-3">
+          <div className="flex gap-4">
             {colors.map((c) => (
               <div
                 key={c}
diff --git a/apps/web/src/components/pwa/PWAInstallBanner.tsx b/apps/web/src/components/pwa/PWAInstallBanner.tsx
index b4cc306e3..f7bf1da45 100644
--- a/apps/web/src/components/pwa/PWAInstallBanner.tsx
+++ b/apps/web/src/components/pwa/PWAInstallBanner.tsx
@@ -21,7 +21,7 @@ export function PWAInstallBanner() {
   return (
     <div
       className={cn(
-        'fixed bottom-8 right-8 z-50 w-80 glass-hud rounded-2xl border-white/10 p-5 shadow-2xl animate-slideInRight hud-corner group overflow-hidden',
+        'fixed bottom-8 right-8 z-50 w-80 glass-hud rounded-2xl border-white/10 p-6 shadow-2xl animate-slideInRight hud-corner group overflow-hidden',
         'before:absolute before:inset-0 before:bg-gradient-to-br before:from-kodo-cyan/5 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity',
       )}
     >
diff --git a/apps/web/src/components/search/Search.tsx b/apps/web/src/components/search/Search.tsx
index 1a3b9f126..f3efad1b3 100644
--- a/apps/web/src/components/search/Search.tsx
+++ b/apps/web/src/components/search/Search.tsx
@@ -338,7 +338,7 @@ export function Search({
                       type="button"
                       onClick={() => handleHistoryItemClick(item)}
                       className={cn(
-                        'w-full px-3 py-2 text-left text-sm hover:bg-accent',
+                        'w-full px-4 py-2 text-left text-sm hover:bg-accent',
                         'flex items-center gap-2',
                         activeIndex === index && 'bg-accent',
                       )}
@@ -368,8 +368,8 @@ export function Search({
                         type="button"
                         onClick={() => handleResultSelect(result)}
                         className={cn(
-                          'w-full px-3 py-2 text-left text-sm hover:bg-accent',
-                          'flex items-center gap-3',
+                          'w-full px-4 py-2 text-left text-sm hover:bg-accent',
+                          'flex items-center gap-4',
                           activeIndex === itemIndex && 'bg-accent',
                         )}
                       >
diff --git a/apps/web/src/components/search/SearchBar.tsx b/apps/web/src/components/search/SearchBar.tsx
index c54fa038b..5f94f47e7 100644
--- a/apps/web/src/components/search/SearchBar.tsx
+++ b/apps/web/src/components/search/SearchBar.tsx
@@ -92,7 +92,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
     <div ref={wrapperRef} className={`relative w-full ${className}`}>
       <form onSubmit={handleSubmit} className="relative z-20">
         <div
-          className={`flex items-center bg-kodo-ink border rounded-xl px-4 py-3 transition-all ${isFocused ? 'border-kodo-cyan shadow-neon-cyan/10 ring-1 ring-kodo-cyan/20' : 'border-kodo-steel'}`}
+          className={`flex items-center bg-kodo-ink border rounded-xl px-4 py-4 transition-all ${isFocused ? 'border-kodo-cyan shadow-neon-cyan/10 ring-1 ring-kodo-cyan/20' : 'border-kodo-steel'}`}
         >
           <Search
             className={`w-5 h-5 mr-3 transition-colors ${isFocused ? 'text-kodo-cyan' : 'text-kodo-content-dim'}`}
@@ -129,7 +129,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
                   {filteredSuggestions.map((item, i) => (
                     <div
                       key={i}
-                      className="px-4 py-2 hover:bg-white/5 cursor-pointer flex items-center gap-3 transition-colors"
+                      className="px-4 py-2 hover:bg-white/5 cursor-pointer flex items-center gap-4 transition-colors"
                       onClick={() => handleSuggestionClick(item.label)}
                     >
                       <div className="w-8 h-8 rounded bg-kodo-slate flex items-center justify-center text-kodo-content-dim">
@@ -171,7 +171,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
                   className="px-4 py-2 hover:bg-white/5 cursor-pointer flex items-center justify-between group transition-colors"
                   onClick={() => handleSuggestionClick(term)}
                 >
-                  <div className="flex items-center gap-3 text-kodo-text-main group-hover:text-white">
+                  <div className="flex items-center gap-4 text-kodo-text-main group-hover:text-white">
                     <Clock className="w-4 h-4 text-kodo-content-dim" />
                     <span className="text-sm">{term}</span>
                   </div>
diff --git a/apps/web/src/components/seller/CreateProductView.tsx b/apps/web/src/components/seller/CreateProductView.tsx
index 8660c84d9..354d859ad 100644
--- a/apps/web/src/components/seller/CreateProductView.tsx
+++ b/apps/web/src/components/seller/CreateProductView.tsx
@@ -66,7 +66,7 @@ export const CreateProductView: React.FC = () => {
             Upload and monetize your sound assets.
           </p>
         </div>
-        <div className="flex gap-3">
+        <div className="flex gap-4">
           <Button variant="ghost" onClick={() => addToast('Draft saved')}>
             <Save className="w-4 h-4 mr-2" /> Save Draft
           </Button>
@@ -140,7 +140,7 @@ export const CreateProductView: React.FC = () => {
                   Description
                 </label>
                 <textarea
-                  className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-steel outline-none min-h-[120px]"
+                  className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-4 text-white focus:border-kodo-steel outline-none min-h-[120px]"
                   placeholder="Describe your sound pack..."
                   value={description}
                   onChange={(e) => setDescription(e.target.value)}
@@ -153,7 +153,7 @@ export const CreateProductView: React.FC = () => {
                     Category
                   </label>
                   <select
-                    className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-steel outline-none"
+                    className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-4 text-white focus:border-kodo-steel outline-none"
                     value={category}
                     onChange={(e) => setCategory(e.target.value)}
                   >
@@ -189,7 +189,7 @@ export const CreateProductView: React.FC = () => {
                   <label className="block text-sm font-medium text-kodo-content-dim mb-2">
                     Format
                   </label>
-                  <div className="p-3 bg-kodo-ink border border-kodo-steel rounded-lg text-kodo-content-dim text-sm">
+                  <div className="p-4 bg-kodo-ink border border-kodo-steel rounded-lg text-kodo-content-dim text-sm">
                     WAV 24-bit
                   </div>
                 </div>
@@ -209,7 +209,7 @@ export const CreateProductView: React.FC = () => {
                   className={`p-4 rounded-xl border transition-all ${lic.enabled ? 'bg-kodo-ink border-kodo-cyan/30' : 'bg-kodo-ink/30 border-kodo-steel opacity-60'}`}
                 >
                   <div className="flex items-center justify-between mb-4">
-                    <div className="flex items-center gap-3">
+                    <div className="flex items-center gap-4">
                       <div
                         onClick={() =>
                           updateLicense(lic.type, 'enabled', !lic.enabled)
diff --git a/apps/web/src/components/seller/SellerDashboardView.tsx b/apps/web/src/components/seller/SellerDashboardView.tsx
index 23484f306..1d656ce7e 100644
--- a/apps/web/src/components/seller/SellerDashboardView.tsx
+++ b/apps/web/src/components/seller/SellerDashboardView.tsx
@@ -59,7 +59,7 @@ export const SellerDashboardView: React.FC<SellerDashboardProps> = ({
 
   if (loading)
     return (
-      <div className="flex justify-center py-20">
+      <div className="flex justify-center py-24">
         <Loader2 className="w-10 h-10 text-kodo-steel animate-spin" />
       </div>
     );
@@ -76,7 +76,7 @@ export const SellerDashboardView: React.FC<SellerDashboardProps> = ({
             Manage your products, sales, and analytics.
           </p>
         </div>
-        <div className="flex gap-3">
+        <div className="flex gap-4">
           <Button
             variant="gaming"
             icon={<Zap className="w-4 h-4" />}
@@ -173,7 +173,7 @@ export const SellerDashboardView: React.FC<SellerDashboardProps> = ({
               {products.map((product, i) => (
                 <div
                   key={product.id}
-                  className="flex items-center gap-4 p-3 bg-kodo-ink rounded-lg border border-transparent hover:border-kodo-steel transition-all"
+                  className="flex items-center gap-4 p-4 bg-kodo-ink rounded-lg border border-transparent hover:border-kodo-steel transition-all"
                 >
                   <div className="w-8 text-center font-mono text-kodo-content-dim">
                     {i + 1}
diff --git a/apps/web/src/components/seller/modals/FlashSaleModal.tsx b/apps/web/src/components/seller/modals/FlashSaleModal.tsx
index bfd4a4ba5..d959c69bf 100644
--- a/apps/web/src/components/seller/modals/FlashSaleModal.tsx
+++ b/apps/web/src/components/seller/modals/FlashSaleModal.tsx
@@ -134,7 +134,7 @@ export const FlashSaleModal: React.FC<FlashSaleModalProps> = ({
               {products.map((product) => (
                 <div
                   key={product.id}
-                  className={`flex items-center gap-3 p-2 rounded cursor-pointer transition-colors ${selectedIds.includes(product.id) ? 'bg-kodo-gold/10 border border-kodo-gold/30' : 'hover:bg-kodo-ink border border-transparent'}`}
+                  className={`flex items-center gap-4 p-2 rounded cursor-pointer transition-colors ${selectedIds.includes(product.id) ? 'bg-kodo-gold/10 border border-kodo-gold/30' : 'hover:bg-kodo-ink border border-transparent'}`}
                   onClick={() => toggleProduct(product.id)}
                 >
                   <div
@@ -164,7 +164,7 @@ export const FlashSaleModal: React.FC<FlashSaleModalProps> = ({
           </div>
         </div>
 
-        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-3">
+        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
           <Button variant="ghost" onClick={onClose}>
             Cancel
           </Button>
diff --git a/apps/web/src/components/settings/accessibility/AccessibilitySettingsView.tsx b/apps/web/src/components/settings/accessibility/AccessibilitySettingsView.tsx
index 0bd7832e9..90705500b 100644
--- a/apps/web/src/components/settings/accessibility/AccessibilitySettingsView.tsx
+++ b/apps/web/src/components/settings/accessibility/AccessibilitySettingsView.tsx
@@ -126,7 +126,7 @@ const ToggleRow: React.FC<{
 }> = ({ label, desc, active, onToggle }) => (
   <div
     onClick={onToggle}
-    className="flex items-center justify-between p-3 rounded-lg hover:bg-white/5 cursor-pointer group"
+    className="flex items-center justify-between p-4 rounded-lg hover:bg-white/5 cursor-pointer group"
   >
     <div>
       <div className="text-sm font-bold text-white group-hover:text-white transition-colors">
diff --git a/apps/web/src/components/settings/account/AccountSettings.tsx b/apps/web/src/components/settings/account/AccountSettings.tsx
index 52c5d4eab..17541c961 100644
--- a/apps/web/src/components/settings/account/AccountSettings.tsx
+++ b/apps/web/src/components/settings/account/AccountSettings.tsx
@@ -144,7 +144,7 @@ export const AccountSettings: React.FC = () => {
                 <button
                   key={opt.id}
                   onClick={() => setTheme(opt.id)}
-                  className={`flex flex-col items-center justify-center gap-2 p-3 rounded-lg border transition-all ${theme === opt.id ? 'bg-kodo-cyan/10 border-kodo-cyan text-kodo-cyan' : 'bg-kodo-ink border-kodo-steel text-kodo-content-dim hover:text-white'}`}
+                  className={`flex flex-col items-center justify-center gap-2 p-4 rounded-lg border transition-all ${theme === opt.id ? 'bg-kodo-cyan/10 border-kodo-cyan text-kodo-cyan' : 'bg-kodo-ink border-kodo-steel text-kodo-content-dim hover:text-white'}`}
                 >
                   {opt.icon}
                   <span className="text-xs font-bold">{opt.label}</span>
diff --git a/apps/web/src/components/settings/account/ChangeEmailModal.tsx b/apps/web/src/components/settings/account/ChangeEmailModal.tsx
index 3d6f5dd80..dab2d46c8 100644
--- a/apps/web/src/components/settings/account/ChangeEmailModal.tsx
+++ b/apps/web/src/components/settings/account/ChangeEmailModal.tsx
@@ -70,7 +70,7 @@ export const ChangeEmailModal: React.FC<ChangeEmailModalProps> = ({
                 onChange={(e) => setPassword(e.target.value)}
               />
 
-              <div className="bg-kodo-ink p-3 rounded text-xs text-kodo-content-dim border border-kodo-steel">
+              <div className="bg-kodo-ink p-4 rounded text-xs text-kodo-content-dim border border-kodo-steel">
                 We will send a verification link to your new email address. You
                 must verify it before the change takes effect.
               </div>
@@ -95,7 +95,7 @@ export const ChangeEmailModal: React.FC<ChangeEmailModalProps> = ({
         </div>
 
         {step === 1 && (
-          <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-3">
+          <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
             <Button variant="ghost" onClick={onClose}>
               Cancel
             </Button>
diff --git a/apps/web/src/components/settings/account/ChangeUsernameModal.tsx b/apps/web/src/components/settings/account/ChangeUsernameModal.tsx
index 95b1ec019..3ace293b6 100644
--- a/apps/web/src/components/settings/account/ChangeUsernameModal.tsx
+++ b/apps/web/src/components/settings/account/ChangeUsernameModal.tsx
@@ -90,7 +90,7 @@ export const ChangeUsernameModal: React.FC<ChangeUsernameModalProps> = ({
             </div>
           </div>
 
-          <div className="bg-kodo-gold/10 border border-kodo-gold/30 p-3 rounded flex gap-3">
+          <div className="bg-kodo-gold/10 border border-kodo-gold/30 p-4 rounded flex gap-4">
             <AlertCircle className="w-5 h-5 text-kodo-gold flex-shrink-0" />
             <div className="text-xs text-kodo-text-main">
               <span className="font-bold text-kodo-gold block mb-1">
@@ -104,7 +104,7 @@ export const ChangeUsernameModal: React.FC<ChangeUsernameModalProps> = ({
           </div>
         </div>
 
-        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-3">
+        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
           <Button variant="ghost" onClick={onClose}>
             Cancel
           </Button>
diff --git a/apps/web/src/components/settings/account/DeleteAccountConfirmModal.tsx b/apps/web/src/components/settings/account/DeleteAccountConfirmModal.tsx
index 33d7d95f8..a2532ec3a 100644
--- a/apps/web/src/components/settings/account/DeleteAccountConfirmModal.tsx
+++ b/apps/web/src/components/settings/account/DeleteAccountConfirmModal.tsx
@@ -78,7 +78,7 @@ export const DeleteAccountConfirmModal: React.FC<
           </div>
         </div>
 
-        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-3">
+        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
           <Button variant="ghost" onClick={onClose} disabled={loading}>
             Cancel
           </Button>
diff --git a/apps/web/src/components/settings/account/DeleteAccountView.tsx b/apps/web/src/components/settings/account/DeleteAccountView.tsx
index 320984315..bf9fcd831 100644
--- a/apps/web/src/components/settings/account/DeleteAccountView.tsx
+++ b/apps/web/src/components/settings/account/DeleteAccountView.tsx
@@ -69,7 +69,7 @@ export const DeleteAccountView: React.FC<DeleteAccountViewProps> = ({
         </div>
 
         <div className="space-y-4 mb-8">
-          <label className="flex items-start gap-3 p-4 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-kodo-steel transition-colors">
+          <label className="flex items-start gap-4 p-4 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-kodo-steel transition-colors">
             <input
               type="checkbox"
               className="mt-1 bg-kodo-graphite border-kodo-steel text-kodo-red focus:ring-kodo-red rounded"
@@ -89,7 +89,7 @@ export const DeleteAccountView: React.FC<DeleteAccountViewProps> = ({
             </div>
           </label>
 
-          <label className="flex items-start gap-3 p-4 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-kodo-steel transition-colors">
+          <label className="flex items-start gap-4 p-4 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-kodo-steel transition-colors">
             <input
               type="checkbox"
               className="mt-1 bg-kodo-graphite border-kodo-steel text-kodo-red focus:ring-kodo-red rounded"
@@ -109,7 +109,7 @@ export const DeleteAccountView: React.FC<DeleteAccountViewProps> = ({
             </div>
           </label>
 
-          <label className="flex items-start gap-3 p-4 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-kodo-steel transition-colors">
+          <label className="flex items-start gap-4 p-4 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-kodo-steel transition-colors">
             <input
               type="checkbox"
               className="mt-1 bg-kodo-graphite border-kodo-steel text-kodo-red focus:ring-kodo-red rounded"
diff --git a/apps/web/src/components/settings/appearance/AppearanceSettingsView.tsx b/apps/web/src/components/settings/appearance/AppearanceSettingsView.tsx
index 6c6908460..fc7bd36f8 100644
--- a/apps/web/src/components/settings/appearance/AppearanceSettingsView.tsx
+++ b/apps/web/src/components/settings/appearance/AppearanceSettingsView.tsx
@@ -81,12 +81,12 @@ export const AppearanceSettingsView: React.FC = () => {
               key={opt.id}
               onClick={() => setTheme(opt.id)}
               className={`
-                            cursor-pointer p-6 rounded-xl border-2 transition-all flex flex-col items-center gap-3 relative
+                            cursor-pointer p-6 rounded-xl border-2 transition-all flex flex-col items-center gap-4 relative
                             ${theme === opt.id ? 'border-kodo-cyan bg-kodo-cyan/5' : 'border-kodo-steel bg-kodo-ink hover:border-kodo-steel'}
                         `}
             >
               <div
-                className={`p-3 rounded-full ${theme === opt.id ? 'bg-kodo-cyan text-black' : 'bg-kodo-slate text-kodo-content-dim'}`}
+                className={`p-4 rounded-full ${theme === opt.id ? 'bg-kodo-cyan text-black' : 'bg-kodo-slate text-kodo-content-dim'}`}
               >
                 {opt.icon}
               </div>
@@ -111,7 +111,7 @@ export const AppearanceSettingsView: React.FC = () => {
           <h3 className="text-lg font-bold text-white mb-6 flex items-center gap-2">
             <Grid className="w-5 h-5 text-kodo-magenta" /> Density
           </h3>
-          <div className="space-y-3">
+          <div className="space-y-4">
             {[
               {
                 id: 'comfortable',
@@ -125,7 +125,7 @@ export const AppearanceSettingsView: React.FC = () => {
                 key={opt.id}
                 onClick={() => setDensity(opt.id as any)}
                 className={`
-                                flex items-center gap-4 p-3 rounded-lg border cursor-pointer transition-all
+                                flex items-center gap-4 p-4 rounded-lg border cursor-pointer transition-all
                                 ${density === opt.id ? 'bg-kodo-magenta/10 border-kodo-magenta' : 'bg-kodo-ink border-kodo-steel hover:bg-white/5'}
                             `}
               >
diff --git a/apps/web/src/components/settings/backups/BackupsView.tsx b/apps/web/src/components/settings/backups/BackupsView.tsx
index 1cbfd7905..a05e6c5a0 100644
--- a/apps/web/src/components/settings/backups/BackupsView.tsx
+++ b/apps/web/src/components/settings/backups/BackupsView.tsx
@@ -172,7 +172,7 @@ export const BackupsView: React.FC = () => {
               </div>
 
               {autoBackup && (
-                <div className="animate-fadeIn space-y-3 pt-2 border-t border-kodo-steel">
+                <div className="animate-fadeIn space-y-4 pt-2 border-t border-kodo-steel">
                   <div>
                     <label className="block text-xs font-bold text-kodo-content-dim uppercase mb-1">
                       Frequency
@@ -208,7 +208,7 @@ export const BackupsView: React.FC = () => {
             </div>
           </Card>
 
-          <div className="bg-kodo-orange/10 border border-kodo-orange/30 p-4 rounded-xl flex gap-3">
+          <div className="bg-kodo-orange/10 border border-kodo-orange/30 p-4 rounded-xl flex gap-4">
             <AlertTriangle className="w-6 h-6 text-kodo-orange flex-shrink-0" />
             <div>
               <h4 className="font-bold text-kodo-orange text-sm mb-1">
diff --git a/apps/web/src/components/settings/cloud/CloudIntegrationView.tsx b/apps/web/src/components/settings/cloud/CloudIntegrationView.tsx
index de8526a4b..f209824f0 100644
--- a/apps/web/src/components/settings/cloud/CloudIntegrationView.tsx
+++ b/apps/web/src/components/settings/cloud/CloudIntegrationView.tsx
@@ -146,7 +146,7 @@ export const CloudIntegrationView: React.FC = () => {
                   {['Projects', 'Samples', 'Presets'].map((type) => (
                     <span
                       key={type}
-                      className="px-3 py-1 bg-kodo-slate rounded text-xs text-white border border-kodo-steel cursor-pointer hover:border-kodo-steel/50"
+                      className="px-4 py-1 bg-kodo-slate rounded text-xs text-white border border-kodo-steel cursor-pointer hover:border-kodo-steel/50"
                     >
                       {type}
                     </span>
diff --git a/apps/web/src/components/settings/data/DataExportModal.tsx b/apps/web/src/components/settings/data/DataExportModal.tsx
index 00a2101e5..275dab82a 100644
--- a/apps/web/src/components/settings/data/DataExportModal.tsx
+++ b/apps/web/src/components/settings/data/DataExportModal.tsx
@@ -74,7 +74,7 @@ export const DataExportModal: React.FC<DataExportModalProps> = ({
               Include Data
             </label>
             <div className="space-y-2">
-              <label className="flex items-center gap-3 p-3 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-kodo-steel">
+              <label className="flex items-center gap-4 p-4 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-kodo-steel">
                 <input
                   type="checkbox"
                   checked={options.profile}
@@ -85,7 +85,7 @@ export const DataExportModal: React.FC<DataExportModalProps> = ({
                   Profile & Identity
                 </span>
               </label>
-              <label className="flex items-center gap-3 p-3 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-kodo-steel">
+              <label className="flex items-center gap-4 p-4 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-kodo-steel">
                 <input
                   type="checkbox"
                   checked={options.tracks}
@@ -96,7 +96,7 @@ export const DataExportModal: React.FC<DataExportModalProps> = ({
                   Uploaded Content Metadata
                 </span>
               </label>
-              <label className="flex items-center gap-3 p-3 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-kodo-steel">
+              <label className="flex items-center gap-4 p-4 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-kodo-steel">
                 <input
                   type="checkbox"
                   checked={options.activity}
@@ -107,7 +107,7 @@ export const DataExportModal: React.FC<DataExportModalProps> = ({
                   Activity Logs & History
                 </span>
               </label>
-              <label className="flex items-center gap-3 p-3 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-kodo-steel">
+              <label className="flex items-center gap-4 p-4 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-kodo-steel">
                 <input
                   type="checkbox"
                   checked={options.billing}
@@ -122,7 +122,7 @@ export const DataExportModal: React.FC<DataExportModalProps> = ({
           </div>
         </div>
 
-        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-3">
+        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
           <Button variant="ghost" onClick={onClose}>
             Cancel
           </Button>
diff --git a/apps/web/src/components/settings/data/DataExportView.tsx b/apps/web/src/components/settings/data/DataExportView.tsx
index 7e8bbc75f..1f3c62482 100644
--- a/apps/web/src/components/settings/data/DataExportView.tsx
+++ b/apps/web/src/components/settings/data/DataExportView.tsx
@@ -36,7 +36,7 @@ export const DataExportView: React.FC = () => {
 
       <Card variant="default">
         <div className="flex items-start gap-4 mb-6">
-          <div className="p-3 bg-kodo-steel/10 rounded-full text-kodo-steel">
+          <div className="p-4 bg-kodo-steel/10 rounded-full text-kodo-steel">
             <Shield className="w-6 h-6" />
           </div>
           <div>
@@ -61,7 +61,7 @@ export const DataExportView: React.FC = () => {
 
       <Card variant="default">
         <h3 className="font-bold text-white mb-4">Export History</h3>
-        <div className="space-y-3">
+        <div className="space-y-4">
           {exports.map((item) => (
             <div
               key={item.id}
@@ -90,7 +90,7 @@ export const DataExportView: React.FC = () => {
                   Download
                 </Button>
               ) : (
-                <span className="text-xs text-kodo-content-dim bg-kodo-graphite px-3 py-1 rounded">
+                <span className="text-xs text-kodo-content-dim bg-kodo-graphite px-4 py-1 rounded">
                   Expired
                 </span>
               )}
diff --git a/apps/web/src/components/settings/integrations/IntegrationsView.tsx b/apps/web/src/components/settings/integrations/IntegrationsView.tsx
index d3640ce1c..9a77d6779 100644
--- a/apps/web/src/components/settings/integrations/IntegrationsView.tsx
+++ b/apps/web/src/components/settings/integrations/IntegrationsView.tsx
@@ -159,7 +159,7 @@ export const IntegrationsView: React.FC = () => {
               {integration.description}
             </p>
 
-            <div className="flex gap-3 mt-auto">
+            <div className="flex gap-4 mt-auto">
               {integration.connected ? (
                 <>
                   <Button
diff --git a/apps/web/src/components/settings/profile/EditProfile.tsx b/apps/web/src/components/settings/profile/EditProfile.tsx
index 1cfc82531..9defefc35 100644
--- a/apps/web/src/components/settings/profile/EditProfile.tsx
+++ b/apps/web/src/components/settings/profile/EditProfile.tsx
@@ -231,7 +231,7 @@ export const EditProfile: React.FC = () => {
                 Bio
               </label>
               <textarea
-                className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-steel outline-none min-h-[100px]"
+                className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-4 text-white focus:border-kodo-steel outline-none min-h-[100px]"
                 value={formData.bio}
                 onChange={(e) =>
                   setFormData({ ...formData, bio: e.target.value })
@@ -255,7 +255,7 @@ export const EditProfile: React.FC = () => {
                   Gender
                 </label>
                 <select
-                  className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-steel outline-none"
+                  className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-4 text-white focus:border-kodo-steel outline-none"
                   value={formData.gender}
                   onChange={(e) =>
                     setFormData({ ...formData, gender: e.target.value })
diff --git a/apps/web/src/components/settings/security/LoginHistory.tsx b/apps/web/src/components/settings/security/LoginHistory.tsx
index e1c450721..8ba0a3e4b 100644
--- a/apps/web/src/components/settings/security/LoginHistory.tsx
+++ b/apps/web/src/components/settings/security/LoginHistory.tsx
@@ -119,17 +119,17 @@ export const LoginHistory: React.FC = () => {
         <table className="w-full text-left border-collapse">
           <thead>
             <tr className="border-b border-kodo-steel text-kodo-content-dim font-mono text-xs uppercase bg-kodo-ink/30">
-              <th className="p-3">Status</th>
-              <th className="p-3">Date & Time</th>
-              <th className="p-3">Device Info</th>
-              <th className="p-3">IP Address</th>
-              <th className="p-3">Location</th>
+              <th className="p-4">Status</th>
+              <th className="p-4">Date & Time</th>
+              <th className="p-4">Device Info</th>
+              <th className="p-4">IP Address</th>
+              <th className="p-4">Location</th>
             </tr>
           </thead>
           <tbody className="divide-y divide-kodo-steel/30 text-sm">
             {filteredLogs.map((log) => (
               <tr key={log.id} className="hover:bg-white/5 transition-colors">
-                <td className="p-3">
+                <td className="p-4">
                   <span
                     className={`px-2 py-1 rounded text-[10px] font-bold uppercase border ${
                       log.status === 'Success'
@@ -142,11 +142,11 @@ export const LoginHistory: React.FC = () => {
                     {log.status}
                   </span>
                 </td>
-                <td className="p-3 text-white font-mono text-xs">
+                <td className="p-4 text-white font-mono text-xs">
                   <div>{log.date}</div>
                   <div className="text-kodo-content-dim">{log.time}</div>
                 </td>
-                <td className="p-3">
+                <td className="p-4">
                   <div className="flex items-center gap-2 text-kodo-text-main">
                     {log.device === 'Mobile' ? (
                       <Smartphone className="w-4 h-4" />
@@ -156,10 +156,10 @@ export const LoginHistory: React.FC = () => {
                     <span>{log.browser}</span>
                   </div>
                 </td>
-                <td className="p-3 text-kodo-steel font-mono text-xs">
+                <td className="p-4 text-kodo-steel font-mono text-xs">
                   {log.ip}
                 </td>
-                <td className="p-3 text-kodo-content-dim">
+                <td className="p-4 text-kodo-content-dim">
                   <div className="flex items-center gap-1">
                     <Globe className="w-3 h-3" /> {log.location}
                   </div>
diff --git a/apps/web/src/components/settings/security/SessionManagement.tsx b/apps/web/src/components/settings/security/SessionManagement.tsx
index 50f5e75d0..6fc473ad3 100644
--- a/apps/web/src/components/settings/security/SessionManagement.tsx
+++ b/apps/web/src/components/settings/security/SessionManagement.tsx
@@ -85,7 +85,7 @@ export const SessionManagement: React.FC = () => {
             >
               <div className="flex items-start gap-4">
                 <div
-                  className={`p-3 rounded-full ${session.is_current ? 'bg-kodo-cyan/10 text-kodo-cyan' : 'bg-kodo-slate text-kodo-content-dim'}`}
+                  className={`p-4 rounded-full ${session.is_current ? 'bg-kodo-cyan/10 text-kodo-cyan' : 'bg-kodo-slate text-kodo-content-dim'}`}
                 >
                   {isMobile ? (
                     <Smartphone className="w-6 h-6" />
diff --git a/apps/web/src/components/settings/security/TwoFactorSetup.tsx b/apps/web/src/components/settings/security/TwoFactorSetup.tsx
index 46dd32816..3f8b53517 100644
--- a/apps/web/src/components/settings/security/TwoFactorSetup.tsx
+++ b/apps/web/src/components/settings/security/TwoFactorSetup.tsx
@@ -157,7 +157,7 @@ export const TwoFactorSetup: React.FC<TwoFactorSetupProps> = ({
 
           <div className="border-t border-kodo-steel pt-6">
             <h4 className="font-bold text-white mb-4">Verify Configuration</h4>
-            <div className="flex gap-3">
+            <div className="flex gap-4">
               <Input
                 placeholder="Enter 6-digit code"
                 value={verificationCode}
@@ -201,7 +201,7 @@ export const TwoFactorSetup: React.FC<TwoFactorSetupProps> = ({
             <h4 className="font-bold text-white mb-4">
               Enter Verification Code
             </h4>
-            <div className="flex gap-3">
+            <div className="flex gap-4">
               <Input
                 placeholder="000000"
                 value={verificationCode}
@@ -232,7 +232,7 @@ export const TwoFactorSetup: React.FC<TwoFactorSetupProps> = ({
             <h3 className="text-xl font-bold">2FA Enabled Successfully</h3>
           </div>
 
-          <div className="bg-kodo-orange/10 border border-kodo-orange/30 p-4 rounded-lg flex gap-3">
+          <div className="bg-kodo-orange/10 border border-kodo-orange/30 p-4 rounded-lg flex gap-4">
             <AlertTriangle className="w-6 h-6 text-kodo-orange flex-shrink-0" />
             <div>
               <h4 className="font-bold text-kodo-orange text-sm mb-1">
@@ -245,7 +245,7 @@ export const TwoFactorSetup: React.FC<TwoFactorSetupProps> = ({
             </div>
           </div>
 
-          <div className="grid grid-cols-2 gap-3 bg-black/40 p-4 rounded-lg font-mono text-sm text-kodo-text-main text-center border border-kodo-steel/50">
+          <div className="grid grid-cols-2 gap-4 bg-black/40 p-4 rounded-lg font-mono text-sm text-kodo-text-main text-center border border-kodo-steel/50">
             {backupCodes.map((code) => (
               <div key={code} className="py-1 tracking-wider">
                 {code}
@@ -253,7 +253,7 @@ export const TwoFactorSetup: React.FC<TwoFactorSetupProps> = ({
             ))}
           </div>
 
-          <div className="flex gap-3 pt-2">
+          <div className="flex gap-4 pt-2">
             <Button
               variant="secondary"
               className="flex-1"
diff --git a/apps/web/src/components/share/ShareLinkManager.tsx b/apps/web/src/components/share/ShareLinkManager.tsx
index 7d9f1f763..e30d6640d 100644
--- a/apps/web/src/components/share/ShareLinkManager.tsx
+++ b/apps/web/src/components/share/ShareLinkManager.tsx
@@ -294,7 +294,7 @@ export function ShareLinkManager({
             </p>
           </div>
         ) : (
-          <div className="space-y-3">
+          <div className="space-y-4">
             {shareLinks.map((share) => {
               const shareUrl = getShareUrl(share.share_token);
               const expired = isExpired(share.expires_at);
@@ -304,7 +304,7 @@ export function ShareLinkManager({
                 <div
                   key={share.id}
                   className={cn(
-                    'p-4 border rounded-lg space-y-3',
+                    'p-4 border rounded-lg space-y-4',
                     expired && 'opacity-60 bg-muted/30',
                   )}
                 >
diff --git a/apps/web/src/components/social/CommentItem.tsx b/apps/web/src/components/social/CommentItem.tsx
index 60531ce59..2752eb831 100644
--- a/apps/web/src/components/social/CommentItem.tsx
+++ b/apps/web/src/components/social/CommentItem.tsx
@@ -24,14 +24,14 @@ export const CommentItem: React.FC<CommentItemProps> = ({
   };
 
   return (
-    <div className="flex gap-3 text-sm py-2">
+    <div className="flex gap-4 text-sm py-2">
       <img
         src={comment.author.avatar}
         alt={comment.author.name}
         className="w-8 h-8 rounded-full object-cover flex-shrink-0 cursor-pointer"
       />
       <div className="flex-1 min-w-0">
-        <div className="bg-kodo-ink/50 p-3 rounded-2xl rounded-tl-sm">
+        <div className="bg-kodo-ink/50 p-4 rounded-2xl rounded-tl-sm">
           <div className="flex justify-between items-baseline mb-1">
             <div className="flex gap-2 items-baseline">
               <span className="font-bold text-white cursor-pointer hover:underline">
diff --git a/apps/web/src/components/social/CreatePostModal.tsx b/apps/web/src/components/social/CreatePostModal.tsx
index 872645bda..fa84449cb 100644
--- a/apps/web/src/components/social/CreatePostModal.tsx
+++ b/apps/web/src/components/social/CreatePostModal.tsx
@@ -53,7 +53,7 @@ export const CreatePostModal: React.FC<CreatePostModalProps> = ({
         </div>
 
         <div className="p-4 flex-1">
-          <div className="flex gap-3">
+          <div className="flex gap-4">
             <div className="w-10 h-10 rounded-full bg-kodo-steel overflow-hidden flex-shrink-0">
               <img
                 src="https://picsum.photos/id/237/100/100"
diff --git a/apps/web/src/components/social/ExploreView.tsx b/apps/web/src/components/social/ExploreView.tsx
index ca60d778c..a789c1e27 100644
--- a/apps/web/src/components/social/ExploreView.tsx
+++ b/apps/web/src/components/social/ExploreView.tsx
@@ -141,7 +141,7 @@ export const ExploreView: React.FC = () => {
           <button
             key={f}
             onClick={() => setFilter(f)}
-            className={`px-3 py-1 rounded-full text-xs font-bold border transition-colors ${filter === f ? 'bg-white text-black border-white' : 'border-kodo-steel text-kodo-content-dim hover:border-kodo-steel'}`}
+            className={`px-4 py-1 rounded-full text-xs font-bold border transition-colors ${filter === f ? 'bg-white text-black border-white' : 'border-kodo-steel text-kodo-content-dim hover:border-kodo-steel'}`}
           >
             {f}
           </button>
@@ -150,7 +150,7 @@ export const ExploreView: React.FC = () => {
 
       {/* Grid Content */}
       {loading ? (
-        <div className="flex justify-center py-20">
+        <div className="flex justify-center py-24">
           <Loader2 className="w-10 h-10 text-kodo-steel animate-spin" />
         </div>
       ) : (
diff --git a/apps/web/src/components/social/FeedView.tsx b/apps/web/src/components/social/FeedView.tsx
index 32309ec56..3507011ad 100644
--- a/apps/web/src/components/social/FeedView.tsx
+++ b/apps/web/src/components/social/FeedView.tsx
@@ -70,7 +70,7 @@ export const FeedView: React.FC = () => {
 
   if (loading)
     return (
-      <div className="flex justify-center py-20">
+      <div className="flex justify-center py-24">
         <Loader2 className="w-10 h-10 text-kodo-steel animate-spin" />
       </div>
     );
diff --git a/apps/web/src/components/social/PostCard.tsx b/apps/web/src/components/social/PostCard.tsx
index 95451f374..c5ba954a6 100644
--- a/apps/web/src/components/social/PostCard.tsx
+++ b/apps/web/src/components/social/PostCard.tsx
@@ -78,7 +78,7 @@ export const PostCard: React.FC<PostCardProps> = ({ post }) => {
 
         {/* Post Header */}
         <div className="p-4 flex items-start justify-between">
-          <div className="flex items-center gap-3">
+          <div className="flex items-center gap-4">
             <div className="w-10 h-10 rounded-full bg-kodo-steel overflow-hidden border border-kodo-steel cursor-pointer">
               <img
                 src={post.author.avatar}
@@ -135,7 +135,7 @@ export const PostCard: React.FC<PostCardProps> = ({ post }) => {
 
         {post.type === 'audio' && post.audioTrack && (
           <div className="px-4 py-2">
-            <div className="bg-kodo-ink p-3 rounded-xl flex items-center gap-4 border border-kodo-steel hover:border-kodo-steel/50 transition-colors">
+            <div className="bg-kodo-ink p-4 rounded-xl flex items-center gap-4 border border-kodo-steel hover:border-kodo-steel/50 transition-colors">
               <div className="w-12 h-12 bg-kodo-graphite rounded overflow-hidden relative group cursor-pointer">
                 <img
                   src={post.audioTrack.coverUrl}
@@ -240,7 +240,7 @@ export const PostCard: React.FC<PostCardProps> = ({ post }) => {
                 View all {post.comments} comments
               </Button>
             )}
-            <div className="mt-4 flex gap-3">
+            <div className="mt-4 flex gap-4">
               <div className="w-8 h-8 rounded-full bg-kodo-steel overflow-hidden flex-shrink-0">
                 <img
                   src="https://picsum.photos/id/100/100/100"
diff --git a/apps/web/src/components/social/SharePostModal.tsx b/apps/web/src/components/social/SharePostModal.tsx
index 9406dd6cb..5b9ad2346 100644
--- a/apps/web/src/components/social/SharePostModal.tsx
+++ b/apps/web/src/components/social/SharePostModal.tsx
@@ -47,7 +47,7 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
               onChange={(e) => setQuoteText(e.target.value)}
               autoFocus
             />
-            <div className="border border-kodo-steel rounded-lg p-3 bg-kodo-ink/30 opacity-70">
+            <div className="border border-kodo-steel rounded-lg p-4 bg-kodo-ink/30 opacity-70">
               <div className="flex items-center gap-2 mb-2">
                 <img
                   src={post.author.avatar}
@@ -97,7 +97,7 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
 
         <div className="p-2">
           <button
-            className="w-full flex items-center gap-4 p-3 hover:bg-white/5 rounded-lg transition-colors group"
+            className="w-full flex items-center gap-4 p-4 hover:bg-white/5 rounded-lg transition-colors group"
             onClick={() => {
               onConfirm('repost');
               onClose();
@@ -115,7 +115,7 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
           </button>
 
           <button
-            className="w-full flex items-center gap-4 p-3 hover:bg-white/5 rounded-lg transition-colors group"
+            className="w-full flex items-center gap-4 p-4 hover:bg-white/5 rounded-lg transition-colors group"
             onClick={() => setMode('quote')}
           >
             <div className="w-10 h-10 rounded-full bg-kodo-steel/10 flex items-center justify-center text-kodo-steel group-hover:bg-white/5">
@@ -129,10 +129,10 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
             </div>
           </button>
 
-          <div className="h-px bg-kodo-steel/50 my-2 mx-3"></div>
+          <div className="h-px bg-kodo-steel/50 my-2 mx-4"></div>
 
           <button
-            className="w-full flex items-center gap-4 p-3 hover:bg-white/5 rounded-lg transition-colors group"
+            className="w-full flex items-center gap-4 p-4 hover:bg-white/5 rounded-lg transition-colors group"
             onClick={handleCopyLink}
           >
             <div className="w-10 h-10 rounded-full bg-kodo-graphite flex items-center justify-center text-kodo-content-dim group-hover:text-white">
@@ -143,7 +143,7 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
             </div>
           </button>
           <button
-            className="w-full flex items-center gap-4 p-3 hover:bg-white/5 rounded-lg transition-colors group"
+            className="w-full flex items-center gap-4 p-4 hover:bg-white/5 rounded-lg transition-colors group"
             onClick={() => {
               addToast('Sent via DM');
               onClose();
diff --git a/apps/web/src/components/social/connections/ConnectionsView.tsx b/apps/web/src/components/social/connections/ConnectionsView.tsx
index 1c7970b40..d86c8fc3f 100644
--- a/apps/web/src/components/social/connections/ConnectionsView.tsx
+++ b/apps/web/src/components/social/connections/ConnectionsView.tsx
@@ -101,7 +101,7 @@ export const ConnectionsView: React.FC<ConnectionsViewProps> = ({
       </div>
 
       {loading ? (
-        <div className="flex justify-center py-20">
+        <div className="flex justify-center py-24">
           <Loader2 className="w-10 h-10 text-kodo-steel animate-spin" />
         </div>
       ) : (
diff --git a/apps/web/src/components/social/groups/CreateGroupModal.tsx b/apps/web/src/components/social/groups/CreateGroupModal.tsx
index 7d2fa80be..49ea9d201 100644
--- a/apps/web/src/components/social/groups/CreateGroupModal.tsx
+++ b/apps/web/src/components/social/groups/CreateGroupModal.tsx
@@ -90,7 +90,7 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
                 Description
               </label>
               <textarea
-                className="w-full bg-kodo-void border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-cyan outline-none text-sm resize-none h-24"
+                className="w-full bg-kodo-void border border-kodo-steel rounded-lg p-4 text-white focus:border-kodo-cyan outline-none text-sm resize-none h-24"
                 placeholder="What's this community about?"
                 value={description}
                 onChange={(e) => setDescription(e.target.value)}
@@ -98,10 +98,10 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
             </div>
 
             <div
-              className="bg-kodo-ink p-3 rounded-lg border border-kodo-steel flex items-center justify-between cursor-pointer hover:border-kodo-steel"
+              className="bg-kodo-ink p-4 rounded-lg border border-kodo-steel flex items-center justify-between cursor-pointer hover:border-kodo-steel"
               onClick={() => setIsPrivate(!isPrivate)}
             >
-              <div className="flex items-center gap-3">
+              <div className="flex items-center gap-4">
                 {isPrivate ? (
                   <Lock className="w-5 h-5 text-kodo-gold" />
                 ) : (
@@ -127,7 +127,7 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
           </div>
         </div>
 
-        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-3">
+        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
           <Button variant="ghost" onClick={onClose}>
             Cancel
           </Button>
diff --git a/apps/web/src/components/social/groups/GroupCard.tsx b/apps/web/src/components/social/groups/GroupCard.tsx
index 81a03b1e0..a4db35705 100644
--- a/apps/web/src/components/social/groups/GroupCard.tsx
+++ b/apps/web/src/components/social/groups/GroupCard.tsx
@@ -44,7 +44,7 @@ export const GroupCard: React.FC<GroupCardProps> = ({
         </div>
       </div>
 
-      <div className="p-5 flex flex-col flex-1">
+      <div className="p-6 flex flex-col flex-1">
         <h3 className="font-bold text-white text-lg mb-1 truncate">
           {group.name}
         </h3>
diff --git a/apps/web/src/components/social/groups/GroupDetailView.tsx b/apps/web/src/components/social/groups/GroupDetailView.tsx
index e84025e21..3fcbd26ca 100644
--- a/apps/web/src/components/social/groups/GroupDetailView.tsx
+++ b/apps/web/src/components/social/groups/GroupDetailView.tsx
@@ -78,13 +78,13 @@ export const GroupDetailView: React.FC<GroupDetailViewProps> = ({
 
   if (loading)
     return (
-      <div className="flex justify-center py-20">
+      <div className="flex justify-center py-24">
         <Loader2 className="w-10 h-10 text-kodo-steel animate-spin" />
       </div>
     );
   if (!group)
     return (
-      <div className="text-center py-20 text-kodo-content-dim">Group not found</div>
+      <div className="text-center py-24 text-kodo-content-dim">Group not found</div>
     );
 
   return (
@@ -135,7 +135,7 @@ export const GroupDetailView: React.FC<GroupDetailViewProps> = ({
         <div className="p-6 md:p-8">
           <div className="flex flex-col md:flex-row justify-between items-start gap-4">
             <div>
-              <div className="flex items-center gap-3 mb-2">
+              <div className="flex items-center gap-4 mb-2">
                 <h1 className="text-3xl font-display font-bold text-white">
                   {group.name}
                 </h1>
@@ -235,7 +235,7 @@ export const GroupDetailView: React.FC<GroupDetailViewProps> = ({
                   variant="default"
                   className="flex items-center gap-6"
                 >
-                  <div className="text-center p-3 bg-kodo-slate rounded-lg min-w-[80px]">
+                  <div className="text-center p-4 bg-kodo-slate rounded-lg min-w-[80px]">
                     <div className="text-xs text-kodo-steel uppercase font-bold">
                       {event.date.split(' ')[0]}
                     </div>
diff --git a/apps/web/src/components/social/groups/GroupsView.tsx b/apps/web/src/components/social/groups/GroupsView.tsx
index e8e2bf9e7..9db661ef0 100644
--- a/apps/web/src/components/social/groups/GroupsView.tsx
+++ b/apps/web/src/components/social/groups/GroupsView.tsx
@@ -135,7 +135,7 @@ export const GroupsView: React.FC<GroupsViewProps> = ({ onOpenGroup }) => {
       </div>
 
       {loading ? (
-        <div className="flex justify-center py-20">
+        <div className="flex justify-center py-24">
           <Loader2 className="w-10 h-10 text-kodo-steel animate-spin" />
         </div>
       ) : (
@@ -152,7 +152,7 @@ export const GroupsView: React.FC<GroupsViewProps> = ({ onOpenGroup }) => {
               />
             ))
           ) : (
-            <div className="col-span-full text-center py-20 text-kodo-content-dim">
+            <div className="col-span-full text-center py-24 text-kodo-content-dim">
               <Users className="w-16 h-16 mx-auto mb-4 opacity-30" />
               <p>No groups found. Try searching or create your own.</p>
             </div>
diff --git a/apps/web/src/components/studio/AIToolsView.tsx b/apps/web/src/components/studio/AIToolsView.tsx
index d4280af92..9e274739b 100644
--- a/apps/web/src/components/studio/AIToolsView.tsx
+++ b/apps/web/src/components/studio/AIToolsView.tsx
@@ -155,13 +155,13 @@ export const AIToolsView: React.FC = () => {
             <h4 className="text-sm font-bold text-kodo-content-dim uppercase mb-4 tracking-wider">
               Output Files
             </h4>
-            <div className="grid grid-cols-1 gap-3">
+            <div className="grid grid-cols-1 gap-4">
               {result.outputs.map((file: string, i: number) => (
                 <div
                   key={i}
-                  className="flex items-center justify-between p-3 bg-kodo-ink rounded border border-kodo-steel hover:border-kodo-steel/50 transition-colors"
+                  className="flex items-center justify-between p-4 bg-kodo-ink rounded border border-kodo-steel hover:border-kodo-steel/50 transition-colors"
                 >
-                  <div className="flex items-center gap-3">
+                  <div className="flex items-center gap-4">
                     <Music className="w-5 h-5 text-kodo-steel" />
                     <span className="text-white font-medium">{file}</span>
                   </div>
diff --git a/apps/web/src/components/studio/CloudFileBrowser.tsx b/apps/web/src/components/studio/CloudFileBrowser.tsx
index caa0d4b81..3980fb1f6 100644
--- a/apps/web/src/components/studio/CloudFileBrowser.tsx
+++ b/apps/web/src/components/studio/CloudFileBrowser.tsx
@@ -160,7 +160,7 @@ export const CloudFileBrowser: React.FC = () => {
         isLoading={true}
         variant="spinner"
         text="Chargement des fichiers..."
-        className="py-20"
+        className="py-24"
       />
     );
   }
@@ -351,7 +351,7 @@ export const CloudFileBrowser: React.FC = () => {
                     </td>
                     <td className="p-4">
                       <div
-                        className="flex items-center gap-3 cursor-pointer"
+                        className="flex items-center gap-4 cursor-pointer"
                         onClick={() => handleFileClick(file)}
                       >
                         {file.type === 'folder' && (
@@ -421,7 +421,7 @@ export const CloudFileBrowser: React.FC = () => {
               <Card
                 key={file.id}
                 variant="default"
-                className={`p-4 flex flex-col items-center text-center gap-3 cursor-pointer hover:border-kodo-steel/50 transition-all group relative ${selectedFiles.includes(file.id) ? 'border-kodo-cyan bg-kodo-cyan/5' : ''}`}
+                className={`p-4 flex flex-col items-center text-center gap-4 cursor-pointer hover:border-kodo-steel/50 transition-all group relative ${selectedFiles.includes(file.id) ? 'border-kodo-cyan bg-kodo-cyan/5' : ''}`}
                 onClick={() => handleFileClick(file)}
               >
                 <div
diff --git a/apps/web/src/components/studio/CloudSettingsView.tsx b/apps/web/src/components/studio/CloudSettingsView.tsx
index c946ea897..233ce231b 100644
--- a/apps/web/src/components/studio/CloudSettingsView.tsx
+++ b/apps/web/src/components/studio/CloudSettingsView.tsx
@@ -25,19 +25,19 @@ export const CloudSettingsView: React.FC = () => {
         </div>
         <ProgressBar value={65.4} color="cyan" />
         <div className="grid grid-cols-3 gap-4 mt-8 text-center">
-          <div className="p-3 bg-kodo-ink rounded border border-kodo-steel/50">
+          <div className="p-4 bg-kodo-ink rounded border border-kodo-steel/50">
             <div className="text-xs text-kodo-content-dim uppercase font-bold">
               Audio
             </div>
             <div className="text-lg font-bold text-white">45 GB</div>
           </div>
-          <div className="p-3 bg-kodo-ink rounded border border-kodo-steel/50">
+          <div className="p-4 bg-kodo-ink rounded border border-kodo-steel/50">
             <div className="text-xs text-kodo-content-dim uppercase font-bold">
               Projects
             </div>
             <div className="text-lg font-bold text-white">15 GB</div>
           </div>
-          <div className="p-3 bg-kodo-ink rounded border border-kodo-steel/50">
+          <div className="p-4 bg-kodo-ink rounded border border-kodo-steel/50">
             <div className="text-xs text-kodo-content-dim uppercase font-bold">
               Other
             </div>
@@ -63,7 +63,7 @@ export const CloudSettingsView: React.FC = () => {
               <Clock className="w-4 h-4" /> Trash Retention Policy
             </label>
             <select
-              className="w-full bg-kodo-ink border border-kodo-steel rounded p-3 text-white outline-none focus:border-kodo-steel"
+              className="w-full bg-kodo-ink border border-kodo-steel rounded p-4 text-white outline-none focus:border-kodo-steel"
               value={retention}
               onChange={(e) => setRetention(e.target.value)}
             >
@@ -82,7 +82,7 @@ export const CloudSettingsView: React.FC = () => {
               <MapPin className="w-4 h-4" /> Storage Region
             </label>
             <select
-              className="w-full bg-kodo-ink border border-kodo-steel rounded p-3 text-white outline-none focus:border-kodo-steel"
+              className="w-full bg-kodo-ink border border-kodo-steel rounded p-4 text-white outline-none focus:border-kodo-steel"
               value={region}
               onChange={(e) => setRegion(e.target.value)}
             >
diff --git a/apps/web/src/components/studio/ConnectivityView.tsx b/apps/web/src/components/studio/ConnectivityView.tsx
index fc53c4777..04a5f5e2b 100644
--- a/apps/web/src/components/studio/ConnectivityView.tsx
+++ b/apps/web/src/components/studio/ConnectivityView.tsx
@@ -56,7 +56,7 @@ export const ConnectivityView: React.FC = () => {
               or DAW.
             </p>
           </div>
-          <div className="bg-kodo-gold/10 text-kodo-gold px-3 py-1 rounded text-xs font-bold border border-kodo-gold/20">
+          <div className="bg-kodo-gold/10 text-kodo-gold px-4 py-1 rounded text-xs font-bold border border-kodo-gold/20">
             PROTOCOL ACTIVE
           </div>
         </div>
@@ -67,7 +67,7 @@ export const ConnectivityView: React.FC = () => {
               Server URL
             </label>
             <div className="flex gap-2">
-              <div className="flex-1 bg-kodo-graphite border border-kodo-steel rounded px-3 py-2 text-sm text-kodo-text-main font-mono truncate">
+              <div className="flex-1 bg-kodo-graphite border border-kodo-steel rounded px-4 py-2 text-sm text-kodo-text-main font-mono truncate">
                 https://webdav.veza.io/u/cyber_producer
               </div>
               <Button
@@ -87,7 +87,7 @@ export const ConnectivityView: React.FC = () => {
               Username
             </label>
             <div className="flex gap-2">
-              <div className="flex-1 bg-kodo-graphite border border-kodo-steel rounded px-3 py-2 text-sm text-kodo-text-main font-mono">
+              <div className="flex-1 bg-kodo-graphite border border-kodo-steel rounded px-4 py-2 text-sm text-kodo-text-main font-mono">
                 cyber_producer
               </div>
               <Button
@@ -105,7 +105,7 @@ export const ConnectivityView: React.FC = () => {
               Mount Password
             </label>
             <div className="flex gap-2">
-              <div className="flex-1 bg-kodo-graphite border border-kodo-steel rounded px-3 py-2 text-sm text-white font-mono tracking-widest">
+              <div className="flex-1 bg-kodo-graphite border border-kodo-steel rounded px-4 py-2 text-sm text-white font-mono tracking-widest">
                 {webdavPass}
               </div>
               <Button variant="secondary" onClick={generateWebdavPass}>
@@ -153,7 +153,7 @@ export const ConnectivityView: React.FC = () => {
             {webhooks.map((hook) => (
               <div
                 key={hook.id}
-                className="flex items-center justify-between p-3 bg-kodo-ink rounded border border-kodo-steel"
+                className="flex items-center justify-between p-4 bg-kodo-ink rounded border border-kodo-steel"
               >
                 <div className="flex-1 min-w-0 mr-4">
                   <div className="text-sm font-mono text-white truncate">
diff --git a/apps/web/src/components/studio/GoLiveView.tsx b/apps/web/src/components/studio/GoLiveView.tsx
index 45d42cf1e..4a9685e08 100644
--- a/apps/web/src/components/studio/GoLiveView.tsx
+++ b/apps/web/src/components/studio/GoLiveView.tsx
@@ -48,7 +48,7 @@ export const GoLiveView: React.FC = () => {
       {/* Header */}
       <div className="flex justify-between items-center mb-8 border-b border-kodo-steel/50 pb-6">
         <div>
-          <h1 className="text-3xl font-display font-bold text-white mb-2 flex items-center gap-3">
+          <h1 className="text-3xl font-display font-bold text-white mb-2 flex items-center gap-4">
             <Radio
               className={`w-8 h-8 ${isLive ? 'text-kodo-red animate-pulse' : 'text-kodo-content-dim'}`}
             />
@@ -58,7 +58,7 @@ export const GoLiveView: React.FC = () => {
             Configure your stream and go live.
           </p>
         </div>
-        <div className="flex gap-3">
+        <div className="flex gap-4">
           <div
             className={`px-4 py-2 rounded-lg border flex items-center gap-2 font-bold ${isLive ? 'bg-kodo-red text-white border-kodo-red' : 'bg-kodo-ink text-kodo-content-dim border-kodo-steel'}`}
           >
@@ -129,7 +129,7 @@ export const GoLiveView: React.FC = () => {
                   Category
                 </label>
                 <select
-                  className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg px-4 py-3 text-white focus:border-kodo-steel outline-none"
+                  className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg px-4 py-4 text-white focus:border-kodo-steel outline-none"
                   value={category}
                   onChange={(e) => setCategory(e.target.value)}
                 >
@@ -170,7 +170,7 @@ export const GoLiveView: React.FC = () => {
                 </label>
                 <div className="flex gap-2">
                   <input
-                    className="flex-1 bg-kodo-ink border border-kodo-steel rounded px-3 py-2 text-sm text-kodo-text-main font-mono"
+                    className="flex-1 bg-kodo-ink border border-kodo-steel rounded px-4 py-2 text-sm text-kodo-text-main font-mono"
                     value={serverUrl}
                     readOnly
                   />
@@ -191,7 +191,7 @@ export const GoLiveView: React.FC = () => {
                 </label>
                 <div className="flex gap-2">
                   <input
-                    className="flex-1 bg-kodo-ink border border-kodo-steel rounded px-3 py-2 text-sm text-kodo-text-main font-mono"
+                    className="flex-1 bg-kodo-ink border border-kodo-steel rounded px-4 py-2 text-sm text-kodo-text-main font-mono"
                     value={
                       streamKeyVisible ? streamKey : '•••••••••••••••••••••••••'
                     }
diff --git a/apps/web/src/components/studio/ProjectsManager.tsx b/apps/web/src/components/studio/ProjectsManager.tsx
index 8f515d567..8fe203b2c 100644
--- a/apps/web/src/components/studio/ProjectsManager.tsx
+++ b/apps/web/src/components/studio/ProjectsManager.tsx
@@ -184,7 +184,7 @@ export const ProjectsManager: React.FC = () => {
           {['All', 'Ableton', 'FL Studio', 'Logic Pro'].map((daw) => (
             <button
               key={daw}
-              className={`px-3 py-1.5 rounded-lg text-xs font-bold uppercase tracking-wider transition-colors border ${filter === daw ? 'bg-kodo-cyan text-black border-kodo-cyan' : 'bg-kodo-slate text-kodo-content-dim border-transparent hover:border-kodo-steel'}`}
+              className={`px-4 py-1.5 rounded-lg text-xs font-bold uppercase tracking-wider transition-colors border ${filter === daw ? 'bg-kodo-cyan text-black border-kodo-cyan' : 'bg-kodo-slate text-kodo-content-dim border-transparent hover:border-kodo-steel'}`}
               onClick={() => setFilter(daw)}
             >
               {daw}
@@ -205,7 +205,7 @@ export const ProjectsManager: React.FC = () => {
 
       {/* Projects Grid */}
       {loading ? (
-        <div className="flex justify-center py-20">
+        <div className="flex justify-center py-24">
           <Loader2 className="w-8 h-8 text-kodo-steel animate-spin" />
         </div>
       ) : (
@@ -305,7 +305,7 @@ export const ProjectsManager: React.FC = () => {
       )}
 
       {filteredProjects.length === 0 && !loading && (
-        <div className="text-center py-20 text-kodo-content-dim">
+        <div className="text-center py-24 text-kodo-content-dim">
           <AlertCircle className="w-12 h-12 mx-auto mb-2 opacity-30" />
           <p>No projects found matching your filters.</p>
         </div>
diff --git a/apps/web/src/components/studio/projects/CreateProjectModal.tsx b/apps/web/src/components/studio/projects/CreateProjectModal.tsx
index 363c79115..3e09e48b6 100644
--- a/apps/web/src/components/studio/projects/CreateProjectModal.tsx
+++ b/apps/web/src/components/studio/projects/CreateProjectModal.tsx
@@ -61,12 +61,12 @@ export const CreateProjectModal: React.FC<CreateProjectModalProps> = ({
             <label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
               Primary Workstation (DAW)
             </label>
-            <div className="grid grid-cols-3 gap-3">
+            <div className="grid grid-cols-3 gap-4">
               {['Ableton', 'FL Studio', 'Logic Pro'].map((daw) => (
                 <button
                   key={daw}
                   onClick={() => setFormData({ ...formData, daw })}
-                  className={`p-3 rounded-lg border text-sm font-bold transition-all ${formData.daw === daw ? 'bg-kodo-cyan/10 border-kodo-cyan text-white' : 'bg-kodo-void border-kodo-steel text-kodo-content-dim hover:border-kodo-steel'}`}
+                  className={`p-4 rounded-lg border text-sm font-bold transition-all ${formData.daw === daw ? 'bg-kodo-cyan/10 border-kodo-cyan text-white' : 'bg-kodo-void border-kodo-steel text-kodo-content-dim hover:border-kodo-steel'}`}
                 >
                   {daw}
                 </button>
@@ -99,7 +99,7 @@ export const CreateProjectModal: React.FC<CreateProjectModalProps> = ({
               Description
             </label>
             <textarea
-              className="w-full bg-kodo-void border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-steel outline-none text-sm resize-none h-24"
+              className="w-full bg-kodo-void border border-kodo-steel rounded-lg p-4 text-white focus:border-kodo-steel outline-none text-sm resize-none h-24"
               placeholder="Project goals, vibe, or reference tracks..."
               value={formData.description}
               onChange={(e) =>
@@ -109,7 +109,7 @@ export const CreateProjectModal: React.FC<CreateProjectModalProps> = ({
           </div>
         </div>
 
-        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-3">
+        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
           <Button variant="ghost" onClick={onClose}>
             Cancel
           </Button>
diff --git a/apps/web/src/components/studio/projects/ProjectDetailView.tsx b/apps/web/src/components/studio/projects/ProjectDetailView.tsx
index 1875ce761..0a3784134 100644
--- a/apps/web/src/components/studio/projects/ProjectDetailView.tsx
+++ b/apps/web/src/components/studio/projects/ProjectDetailView.tsx
@@ -85,7 +85,7 @@ export const ProjectDetailView: React.FC<ProjectDetailViewProps> = ({
             <ArrowLeft className="w-5 h-5" />
           </Button>
           <div>
-            <div className="flex items-center gap-3 mb-1">
+            <div className="flex items-center gap-4 mb-1">
               <h2 className="text-3xl font-display font-bold text-white">
                 {project.name}
               </h2>
@@ -158,7 +158,7 @@ export const ProjectDetailView: React.FC<ProjectDetailViewProps> = ({
                   </div>
 
                   <div className="flex gap-4 pt-2">
-                    <div className="flex-1 bg-kodo-ink p-3 rounded border border-kodo-steel">
+                    <div className="flex-1 bg-kodo-ink p-4 rounded border border-kodo-steel">
                       <div className="text-xs text-kodo-content-dim uppercase">
                         Status
                       </div>
@@ -166,7 +166,7 @@ export const ProjectDetailView: React.FC<ProjectDetailViewProps> = ({
                         {project.status}
                       </div>
                     </div>
-                    <div className="flex-1 bg-kodo-ink p-3 rounded border border-kodo-steel">
+                    <div className="flex-1 bg-kodo-ink p-4 rounded border border-kodo-steel">
                       <div className="text-xs text-kodo-content-dim uppercase">
                         Version
                       </div>
@@ -218,9 +218,9 @@ export const ProjectDetailView: React.FC<ProjectDetailViewProps> = ({
                 {projectFiles.map((file) => (
                   <div
                     key={file.id}
-                    className="flex items-center justify-between p-3 bg-kodo-ink rounded-lg border border-transparent hover:border-kodo-steel transition-all group"
+                    className="flex items-center justify-between p-4 bg-kodo-ink rounded-lg border border-transparent hover:border-kodo-steel transition-all group"
                   >
-                    <div className="flex items-center gap-3">
+                    <div className="flex items-center gap-4">
                       <div className="w-10 h-10 bg-kodo-slate rounded flex items-center justify-center text-kodo-content-dim">
                         {file.type === 'audio' ? (
                           <FileAudio className="w-5 h-5" />
@@ -325,7 +325,7 @@ export const ProjectDetailView: React.FC<ProjectDetailViewProps> = ({
             <h3 className="font-bold text-white mb-4 text-sm uppercase tracking-wider flex items-center gap-2">
               <Users className="w-4 h-4 text-kodo-gold" /> Collaborators
             </h3>
-            <div className="flex -space-x-3 mb-4">
+            <div className="flex -space-x-4 mb-4">
               <div className="w-10 h-10 rounded-full border-2 border-kodo-graphite bg-kodo-steel"></div>
               <div className="w-10 h-10 rounded-full border-2 border-kodo-graphite bg-kodo-steel"></div>
               <div className="w-10 h-10 rounded-full border-2 border-kodo-graphite bg-kodo-ink flex items-center justify-center text-xs text-kodo-content-dim font-bold">
diff --git a/apps/web/src/components/theme/ThemeSwitcher.tsx b/apps/web/src/components/theme/ThemeSwitcher.tsx
index a3ac6435b..ffa6e75cf 100644
--- a/apps/web/src/components/theme/ThemeSwitcher.tsx
+++ b/apps/web/src/components/theme/ThemeSwitcher.tsx
@@ -42,7 +42,7 @@ export function ThemeSwitcher({
 }: ThemeSwitcherProps) {
   return (
     <div className="space-y-6">
-      <div className="flex items-center gap-3">
+      <div className="flex items-center gap-4">
         <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-kodo-cyan to-kodo-magenta flex items-center justify-center">
           <Palette className="w-5 h-5 text-white" />
         </div>
diff --git a/apps/web/src/components/ui.backup/FormField.tsx b/apps/web/src/components/ui.backup/FormField.tsx
index feecb3aac..fe025575b 100644
--- a/apps/web/src/components/ui.backup/FormField.tsx
+++ b/apps/web/src/components/ui.backup/FormField.tsx
@@ -47,7 +47,7 @@ export const Input: React.FC<InputProps> = ({
   return (
     <input
       className={cn(
-        'w-full px-3 py-2 border rounded-md shadow-sm transition-colors',
+        'w-full px-4 py-2 border rounded-md shadow-sm transition-colors',
         'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent',
         'dark:bg-gray-800 dark:border-gray-600 dark:text-white',
         error
@@ -73,7 +73,7 @@ export const Textarea: React.FC<TextareaProps> = ({
   return (
     <textarea
       className={cn(
-        'w-full px-3 py-2 border rounded-md shadow-sm transition-colors resize-none',
+        'w-full px-4 py-2 border rounded-md shadow-sm transition-colors resize-none',
         'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent',
         'dark:bg-gray-800 dark:border-gray-600 dark:text-white',
         error
@@ -100,7 +100,7 @@ export const Select: React.FC<SelectProps> = ({
   return (
     <select
       className={cn(
-        'w-full px-3 py-2 border rounded-md shadow-sm transition-colors',
+        'w-full px-4 py-2 border rounded-md shadow-sm transition-colors',
         'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent',
         'dark:bg-gray-800 dark:border-gray-600 dark:text-white',
         error
diff --git a/apps/web/src/components/ui.backup/LazyComponent.tsx b/apps/web/src/components/ui.backup/LazyComponent.tsx
index 21a05a9dc..14f1ff764 100644
--- a/apps/web/src/components/ui.backup/LazyComponent.tsx
+++ b/apps/web/src/components/ui.backup/LazyComponent.tsx
@@ -7,7 +7,7 @@ function ErrorFallback({ pageName }: { pageName: string }) {
     <div className="container mx-auto px-4 py-8">
       <div className="max-w-2xl mx-auto">
         <h1 className="text-2xl font-bold mb-4">{pageName}</h1>
-        <div className="bg-yellow-50 border border-yellow-200 text-yellow-700 px-4 py-3 rounded">
+        <div className="bg-yellow-50 border border-yellow-200 text-yellow-700 px-4 py-4 rounded">
           <p>Failed to load {pageName}. Please refresh the page.</p>
         </div>
       </div>
diff --git a/apps/web/src/components/ui.backup/badge.test.tsx b/apps/web/src/components/ui.backup/badge.test.tsx
index fb9b09923..ea631d6b0 100644
--- a/apps/web/src/components/ui.backup/badge.test.tsx
+++ b/apps/web/src/components/ui.backup/badge.test.tsx
@@ -77,7 +77,7 @@ describe('Badge Component', () => {
       const { container } = render(<Badge size="lg">Large</Badge>);
 
       const badge = container.firstChild;
-      expect(badge).toHaveClass('px-3', 'py-1', 'text-base');
+      expect(badge).toHaveClass('px-4', 'py-1', 'text-base');
     });
   });
 
@@ -166,7 +166,7 @@ describe('Badge Component', () => {
       );
 
       const badge = container.firstChild;
-      expect(badge).toHaveClass('bg-green-100', 'px-3', 'py-1', 'text-base');
+      expect(badge).toHaveClass('bg-green-100', 'px-4', 'py-1', 'text-base');
       expect(screen.getByText('Complete badge')).toBeInTheDocument();
       expect(screen.getByText('(10)')).toBeInTheDocument();
       const dot = container.querySelector('.rounded-full.bg-current');
diff --git a/apps/web/src/components/ui.backup/badge.tsx b/apps/web/src/components/ui.backup/badge.tsx
index 9313fcf27..ed9da9194 100644
--- a/apps/web/src/components/ui.backup/badge.tsx
+++ b/apps/web/src/components/ui.backup/badge.tsx
@@ -33,7 +33,7 @@ export function Badge({
         'inline-flex items-center rounded-full font-medium',
         size === 'sm' && 'px-2 py-0.5 text-xs',
         size === 'md' && 'px-2.5 py-0.5 text-sm',
-        size === 'lg' && 'px-3 py-1 text-base',
+        size === 'lg' && 'px-4 py-1 text-base',
         variant === 'default' &&
           'bg-muted text-muted-foreground border border-border',
         variant === 'secondary' &&
diff --git a/apps/web/src/components/ui.backup/button.tsx b/apps/web/src/components/ui.backup/button.tsx
index 3d70e4d10..04b38a010 100644
--- a/apps/web/src/components/ui.backup/button.tsx
+++ b/apps/web/src/components/ui.backup/button.tsx
@@ -21,7 +21,7 @@ const buttonVariants = cva(
       },
       size: {
         default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3',
+        sm: 'h-9 rounded-md px-4',
         lg: 'h-11 rounded-md px-8',
         icon: 'h-10 w-10',
       },
diff --git a/apps/web/src/components/ui.backup/date-picker.tsx b/apps/web/src/components/ui.backup/date-picker.tsx
index 22acf736c..1954c871c 100644
--- a/apps/web/src/components/ui.backup/date-picker.tsx
+++ b/apps/web/src/components/ui.backup/date-picker.tsx
@@ -266,7 +266,7 @@ export function DatePicker({
       className="w-full"
     >
       <div className="w-auto p-0">
-        <div className="p-3">
+        <div className="p-4">
           {/* Header avec navigation */}
           <div className="flex items-center justify-between mb-4">
             <div className="flex items-center gap-2">
diff --git a/apps/web/src/components/ui.backup/dialog.tsx b/apps/web/src/components/ui.backup/dialog.tsx
index 854f17ac2..d33e157fc 100644
--- a/apps/web/src/components/ui.backup/dialog.tsx
+++ b/apps/web/src/components/ui.backup/dialog.tsx
@@ -88,7 +88,7 @@ export function Dialog({
         {/* Header */}
         {title && (
           <DialogHeader variant={variant}>
-            <div className="flex items-center gap-3">
+            <div className="flex items-center gap-4">
               {IconComponent && (
                 <IconComponent className={cn('h-5 w-5', iconStyle)} />
               )}
diff --git a/apps/web/src/components/ui.backup/file-upload.tsx b/apps/web/src/components/ui.backup/file-upload.tsx
index f29954b9d..b680e996e 100644
--- a/apps/web/src/components/ui.backup/file-upload.tsx
+++ b/apps/web/src/components/ui.backup/file-upload.tsx
@@ -278,7 +278,7 @@ export function FileUpload({
           {errors.map((error, index) => (
             <div
               key={index}
-              className="flex items-center gap-2 p-3 text-sm text-destructive bg-destructive/10 border border-destructive/20 rounded-md"
+              className="flex items-center gap-2 p-4 text-sm text-destructive bg-destructive/10 border border-destructive/20 rounded-md"
             >
               <AlertCircle className="h-4 w-4 shrink-0" />
               <span>{error}</span>
@@ -289,7 +289,7 @@ export function FileUpload({
 
       {/* Liste des fichiers avec preview */}
       {showPreview && files.length > 0 && (
-        <div className="mt-4 space-y-3">
+        <div className="mt-4 space-y-4">
           {files.map((file, index) => {
             const IconComponent = getFileIcon(file);
             const isImage = file.type && file.type.startsWith('image/');
diff --git a/apps/web/src/components/ui.backup/input.tsx b/apps/web/src/components/ui.backup/input.tsx
index 36d265955..60c8b4ab4 100644
--- a/apps/web/src/components/ui.backup/input.tsx
+++ b/apps/web/src/components/ui.backup/input.tsx
@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-10 w-full rounded-md border border-input bg-background px-4 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           className,
         )}
         ref={ref}
diff --git a/apps/web/src/components/ui.backup/select.tsx b/apps/web/src/components/ui.backup/select.tsx
index 4a49aaf67..f4e8adcc2 100644
--- a/apps/web/src/components/ui.backup/select.tsx
+++ b/apps/web/src/components/ui.backup/select.tsx
@@ -220,7 +220,7 @@ export function Select({
       {Object.entries(filteredOptions.groups).map(
         ([groupLabel, groupOptions]) => (
           <div key={groupLabel} className="py-1">
-            <div className="px-3 py-1.5 text-xs font-semibold text-muted-foreground uppercase">
+            <div className="px-4 py-1.5 text-xs font-semibold text-muted-foreground uppercase">
               {groupLabel}
             </div>
             {groupOptions.map((option) => (
@@ -239,7 +239,7 @@ export function Select({
       {/* Message si aucune option */}
       {filteredOptions.ungrouped.length === 0 &&
         Object.keys(filteredOptions.groups).length === 0 && (
-          <div className="px-3 py-2 text-sm text-muted-foreground text-center">
+          <div className="px-4 py-2 text-sm text-muted-foreground text-center">
             No options found
           </div>
         )}
@@ -285,7 +285,7 @@ function SelectOptionItem({
     <div
       role="menuitem"
       className={cn(
-        'relative flex items-center px-3 py-2 text-sm cursor-pointer',
+        'relative flex items-center px-4 py-2 text-sm cursor-pointer',
         'hover:bg-accent hover:text-accent-foreground',
         'focus:bg-accent focus:text-accent-foreground',
         'transition-colors',
diff --git a/apps/web/src/components/ui.backup/tabs.tsx b/apps/web/src/components/ui.backup/tabs.tsx
index 737a81c4a..15000ea5f 100644
--- a/apps/web/src/components/ui.backup/tabs.tsx
+++ b/apps/web/src/components/ui.backup/tabs.tsx
@@ -27,7 +27,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-4 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
       className,
     )}
     {...props}
diff --git a/apps/web/src/components/ui.backup/textarea.tsx b/apps/web/src/components/ui.backup/textarea.tsx
index 1e63240df..520138a88 100644
--- a/apps/web/src/components/ui.backup/textarea.tsx
+++ b/apps/web/src/components/ui.backup/textarea.tsx
@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'flex min-h-[80px] w-full rounded-md border border-input bg-background px-4 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           className,
         )}
         ref={ref}
diff --git a/apps/web/src/components/ui.backup/tooltip.tsx b/apps/web/src/components/ui.backup/tooltip.tsx
index 575935256..eb28ee8e0 100644
--- a/apps/web/src/components/ui.backup/tooltip.tsx
+++ b/apps/web/src/components/ui.backup/tooltip.tsx
@@ -242,7 +242,7 @@ export function Tooltip({
         <div
           ref={tooltipRef}
           className={cn(
-            'absolute z-50 px-3 py-1.5 text-sm text-popover-foreground bg-popover rounded-md shadow-md',
+            'absolute z-50 px-4 py-1.5 text-sm text-popover-foreground bg-popover rounded-md shadow-md',
             'border border-border pointer-events-none',
             'transition-all duration-200',
             positionClasses[calculatedPosition],
diff --git a/apps/web/src/components/ui/ErrorDisplay.tsx b/apps/web/src/components/ui/ErrorDisplay.tsx
index 59d14e1ff..ceac6dfbc 100644
--- a/apps/web/src/components/ui/ErrorDisplay.tsx
+++ b/apps/web/src/components/ui/ErrorDisplay.tsx
@@ -351,7 +351,7 @@ export const ErrorDisplay = React.forwardRef<HTMLDivElement, ErrorDisplayProps>(
       switch (size) {
         case 'sm':
           return {
-            padding: 'p-3',
+            padding: 'p-4',
             text: 'text-xs',
             title: 'text-sm',
             gap: 'gap-2',
@@ -368,7 +368,7 @@ export const ErrorDisplay = React.forwardRef<HTMLDivElement, ErrorDisplayProps>(
             padding: 'p-4',
             text: 'text-sm',
             title: 'text-base',
-            gap: 'gap-3',
+            gap: 'gap-4',
           };
       }
     }, [size]);
diff --git a/apps/web/src/components/ui/FAB.tsx b/apps/web/src/components/ui/FAB.tsx
index fe73ef6b1..f72c9c3c2 100644
--- a/apps/web/src/components/ui/FAB.tsx
+++ b/apps/web/src/components/ui/FAB.tsx
@@ -84,7 +84,7 @@ export function FAB({
   return (
     <div
       className={cn(
-        'fixed z-50 flex items-center gap-3',
+        'fixed z-50 flex items-center gap-4',
         positionClasses[position],
         containerClassName,
       )}
diff --git a/apps/web/src/components/ui/ImageCropper.tsx b/apps/web/src/components/ui/ImageCropper.tsx
index 1d8e58c50..ec2350bd3 100644
--- a/apps/web/src/components/ui/ImageCropper.tsx
+++ b/apps/web/src/components/ui/ImageCropper.tsx
@@ -196,7 +196,7 @@ export const ImageCropper: React.FC<ImageCropperProps> = ({
             />
           </div>
 
-          <div className="flex justify-end gap-3 pt-2">
+          <div className="flex justify-end gap-4 pt-2">
             <Button variant="ghost" onClick={onCancel}>
               Cancel
             </Button>
diff --git a/apps/web/src/components/ui/ImageViewerModal.tsx b/apps/web/src/components/ui/ImageViewerModal.tsx
index e8ab66577..b9b50cdbb 100644
--- a/apps/web/src/components/ui/ImageViewerModal.tsx
+++ b/apps/web/src/components/ui/ImageViewerModal.tsx
@@ -120,7 +120,7 @@ export const ImageViewerModal: React.FC<ImageViewerModalProps> = ({
       {hasPrev && (
         <button
           onClick={onPrev}
-          className="absolute left-4 p-3 bg-white/10 rounded-full hover:bg-white/20 text-white transition-colors z-10"
+          className="absolute left-4 p-4 bg-white/10 rounded-full hover:bg-white/20 text-white transition-colors z-10"
         >
           <ChevronLeft className="w-8 h-8" />
         </button>
@@ -128,7 +128,7 @@ export const ImageViewerModal: React.FC<ImageViewerModalProps> = ({
       {hasNext && (
         <button
           onClick={onNext}
-          className="absolute right-4 p-3 bg-white/10 rounded-full hover:bg-white/20 text-white transition-colors z-10"
+          className="absolute right-4 p-4 bg-white/10 rounded-full hover:bg-white/20 text-white transition-colors z-10"
         >
           <ChevronRight className="w-8 h-8" />
         </button>
diff --git a/apps/web/src/components/ui/LazyComponent.tsx b/apps/web/src/components/ui/LazyComponent.tsx
index 75662c222..70978a697 100644
--- a/apps/web/src/components/ui/LazyComponent.tsx
+++ b/apps/web/src/components/ui/LazyComponent.tsx
@@ -24,11 +24,11 @@ function LazyErrorFallback({
   return (
     <div className="container mx-auto px-4 py-8">
       <div className="max-w-2xl mx-auto">
-        <div className="flex items-center gap-3 mb-4">
+        <div className="flex items-center gap-4 mb-4">
           <AlertTriangle className="h-6 w-6 text-kodo-gold" />
           <h1 className="text-3xl font-bold">{pageName}</h1>
         </div>
-        <div className="bg-kodo-gold/10 dark:bg-kodo-gold/20 border border-kodo-gold/30 dark:border-kodo-gold/40 text-kodo-gold dark:text-kodo-gold px-4 py-3 rounded-lg mb-4">
+        <div className="bg-kodo-gold/10 dark:bg-kodo-gold/20 border border-kodo-gold/30 dark:border-kodo-gold/40 text-kodo-gold dark:text-kodo-gold px-4 py-4 rounded-lg mb-4">
           <p className="font-medium mb-2">Failed to load {pageName}</p>
           {error && (
             <p className="text-sm opacity-75">
@@ -36,7 +36,7 @@ function LazyErrorFallback({
             </p>
           )}
         </div>
-        <div className="flex gap-3">
+        <div className="flex gap-4">
           {onRetry && (
             <Button
               onClick={onRetry}
diff --git a/apps/web/src/components/ui/Toast.tsx b/apps/web/src/components/ui/Toast.tsx
index 586726f1c..a329e6844 100644
--- a/apps/web/src/components/ui/Toast.tsx
+++ b/apps/web/src/components/ui/Toast.tsx
@@ -94,7 +94,7 @@ export const Toast: React.FC<ToastProps> = ({ id, type, message, onClose }) => {
 
   return (
     <div
-      className={`flex items-center gap-3 p-4 rounded-lg border shadow-2xl min-w-[300px] animate-slideInRight backdrop-blur-md mb-3 ${styles[type]}`}
+      className={`flex items-center gap-4 p-4 rounded-lg border shadow-2xl min-w-[300px] animate-slideInRight backdrop-blur-md mb-3 ${styles[type]}`}
     >
       {icons[type]}
       <p className="flex-1 text-sm font-medium">{message}</p>
diff --git a/apps/web/src/components/ui/alert.tsx b/apps/web/src/components/ui/alert.tsx
index 394e21842..d57764110 100644
--- a/apps/web/src/components/ui/alert.tsx
+++ b/apps/web/src/components/ui/alert.tsx
@@ -129,7 +129,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
         ref={ref}
         role="alert"
         className={cn(
-          'p-4 rounded-lg border flex gap-3',
+          'p-4 rounded-lg border flex gap-4',
           styles[alertVariant] || styles.info,
           className,
         )}
diff --git a/apps/web/src/components/ui/badge.test.tsx b/apps/web/src/components/ui/badge.test.tsx
index fb9b09923..ea631d6b0 100644
--- a/apps/web/src/components/ui/badge.test.tsx
+++ b/apps/web/src/components/ui/badge.test.tsx
@@ -77,7 +77,7 @@ describe('Badge Component', () => {
       const { container } = render(<Badge size="lg">Large</Badge>);
 
       const badge = container.firstChild;
-      expect(badge).toHaveClass('px-3', 'py-1', 'text-base');
+      expect(badge).toHaveClass('px-4', 'py-1', 'text-base');
     });
   });
 
@@ -166,7 +166,7 @@ describe('Badge Component', () => {
       );
 
       const badge = container.firstChild;
-      expect(badge).toHaveClass('bg-green-100', 'px-3', 'py-1', 'text-base');
+      expect(badge).toHaveClass('bg-green-100', 'px-4', 'py-1', 'text-base');
       expect(screen.getByText('Complete badge')).toBeInTheDocument();
       expect(screen.getByText('(10)')).toBeInTheDocument();
       const dot = container.querySelector('.rounded-full.bg-current');
diff --git a/apps/web/src/components/ui/badge.tsx b/apps/web/src/components/ui/badge.tsx
index 3758f4382..c04572597 100644
--- a/apps/web/src/components/ui/badge.tsx
+++ b/apps/web/src/components/ui/badge.tsx
@@ -52,7 +52,7 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
    *
    * - `sm`: Petit (px-2 py-0.5 text-[10px])
    * - `md`: Moyen (px-2.5 py-0.5 text-[10px]) - par défaut
-   * - `lg`: Grand (px-3 py-1 text-xs)
+   * - `lg`: Grand (px-4 py-1 text-xs)
    *
    * @default 'md'
    */
@@ -141,7 +141,7 @@ export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
     const sizeStyles = {
       sm: 'px-2 py-0.5 text-[10px]',
       md: 'px-2.5 py-0.5 text-[10px]',
-      lg: 'px-3 py-1 text-xs',
+      lg: 'px-4 py-1 text-xs',
     };
 
     const displayText = label || children;
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
index 1366628c9..ecbad83f1 100644
--- a/apps/web/src/components/ui/button.tsx
+++ b/apps/web/src/components/ui/button.tsx
@@ -37,7 +37,7 @@ const buttonVariants = cva(
         /** Default size - standard buttons */
         default: 'h-10 px-4 py-2',
         /** Small size - compact buttons, inline actions */
-        sm: 'h-8 rounded-lg px-3 text-xs',
+        sm: 'h-8 rounded-lg px-4 text-xs',
         /** Large size - prominent CTAs */
         lg: 'h-12 rounded-xl px-8 text-base',
         /** Icon size - icon-only buttons (square) */
diff --git a/apps/web/src/components/ui/checkbox.tsx b/apps/web/src/components/ui/checkbox.tsx
index 186cd0d73..27f5d1d4e 100644
--- a/apps/web/src/components/ui/checkbox.tsx
+++ b/apps/web/src/components/ui/checkbox.tsx
@@ -83,7 +83,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
         htmlFor={checkboxId}
         id={labelId}
         className={cn(
-          `inline-flex items-center gap-3 cursor-pointer group`,
+          `inline-flex items-center gap-4 cursor-pointer group`,
           props.disabled ? 'opacity-50 cursor-not-allowed' : '',
           className,
         )}
diff --git a/apps/web/src/components/ui/date-picker.tsx b/apps/web/src/components/ui/date-picker.tsx
index e5642e13b..b9b771726 100644
--- a/apps/web/src/components/ui/date-picker.tsx
+++ b/apps/web/src/components/ui/date-picker.tsx
@@ -351,7 +351,7 @@ export function DatePicker({
       className="w-full"
     >
       <div className="w-auto p-0">
-        <div className="p-3">
+        <div className="p-4">
           {/* Header avec navigation */}
           <div className="flex items-center justify-between mb-4">
             <div className="flex items-center gap-2">
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx
index 24294e11c..371679939 100644
--- a/apps/web/src/components/ui/dialog.tsx
+++ b/apps/web/src/components/ui/dialog.tsx
@@ -230,7 +230,7 @@ export function Dialog({
       }
     >
       {title && IconComponent && (
-        <div className="flex items-center gap-3 mb-4">
+        <div className="flex items-center gap-4 mb-4">
           <IconComponent className={cn('h-5 w-5', iconStyle)} />
         </div>
       )}
diff --git a/apps/web/src/components/ui/file-upload.tsx b/apps/web/src/components/ui/file-upload.tsx
index f619568ae..ef3d37ed3 100644
--- a/apps/web/src/components/ui/file-upload.tsx
+++ b/apps/web/src/components/ui/file-upload.tsx
@@ -385,7 +385,7 @@ export function FileUpload({
           {errors.map((error, index) => (
             <div
               key={index}
-              className="flex items-center gap-2 p-3 text-sm text-destructive bg-destructive/10 border border-destructive/20 rounded-md"
+              className="flex items-center gap-2 p-4 text-sm text-destructive bg-destructive/10 border border-destructive/20 rounded-md"
             >
               <AlertCircle className="h-4 w-4 shrink-0" />
               <span>{error}</span>
@@ -396,7 +396,7 @@ export function FileUpload({
 
       {/* Liste des fichiers avec preview */}
       {showPreview && files.length > 0 && (
-        <div className="mt-4 space-y-3">
+        <div className="mt-4 space-y-4">
           {files.map((file, index) => {
             const IconComponent = getFileIcon(file);
             const isImage = file.type && file.type.startsWith('image/');
diff --git a/apps/web/src/components/ui/modal.tsx b/apps/web/src/components/ui/modal.tsx
index f17bd0943..cc90a13cf 100644
--- a/apps/web/src/components/ui/modal.tsx
+++ b/apps/web/src/components/ui/modal.tsx
@@ -117,7 +117,7 @@ export function Modal({
 
           {/* Footer */}
           {footer && (
-            <div className="p-4 border-t border-kodo-steel bg-kodo-ink shrink-0 flex justify-end gap-3">
+            <div className="p-4 border-t border-kodo-steel bg-kodo-ink shrink-0 flex justify-end gap-4">
               {footer}
             </div>
           )}
diff --git a/apps/web/src/components/ui/select.tsx b/apps/web/src/components/ui/select.tsx
index adcd93862..7038476e6 100644
--- a/apps/web/src/components/ui/select.tsx
+++ b/apps/web/src/components/ui/select.tsx
@@ -360,7 +360,7 @@ export function Select({
       {Object.entries(filteredOptions.groups).map(
         ([groupLabel, groupOptions]) => (
           <div key={groupLabel} className="py-1">
-            <div className="px-3 py-1.5 text-xs font-semibold text-kodo-content-dim uppercase">
+            <div className="px-4 py-1.5 text-xs font-semibold text-kodo-content-dim uppercase">
               {groupLabel}
             </div>
             {groupOptions.map((option) => (
@@ -379,7 +379,7 @@ export function Select({
       {/* Message si aucune option */}
       {filteredOptions.ungrouped.length === 0 &&
         Object.keys(filteredOptions.groups).length === 0 && (
-          <div className="px-3 py-2 text-sm text-kodo-content-dim text-center">
+          <div className="px-4 py-2 text-sm text-kodo-content-dim text-center">
             No options found
           </div>
         )}
@@ -438,7 +438,7 @@ function SelectOptionItem({
       role="option"
       aria-selected={isSelected}
       className={cn(
-        'relative flex items-center px-3 py-2 text-sm cursor-pointer',
+        'relative flex items-center px-4 py-2 text-sm cursor-pointer',
         'hover:bg-white/5 hover:text-white',
         'focus:bg-white/5 focus:text-white',
         'transition-colors text-kodo-text-main',
diff --git a/apps/web/src/components/ui/tabs.tsx b/apps/web/src/components/ui/tabs.tsx
index ac06e1f16..dea121b9c 100644
--- a/apps/web/src/components/ui/tabs.tsx
+++ b/apps/web/src/components/ui/tabs.tsx
@@ -247,7 +247,7 @@ const TabsTrigger = React.forwardRef<HTMLButtonElement, TabsTriggerProps>(
         ref={ref}
         onClick={() => onValueChange?.(triggerValue)}
         className={cn(
-          'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-bold uppercase tracking-wider',
+          'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-4 py-1.5 text-sm font-bold uppercase tracking-wider',
           'ring-offset-kodo-void transition-all duration-200',
           'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-steel focus-visible:ring-offset-2',
           'disabled:pointer-events-none disabled:opacity-50',
diff --git a/apps/web/src/components/ui/textarea.tsx b/apps/web/src/components/ui/textarea.tsx
index 65752871c..d6c269cff 100644
--- a/apps/web/src/components/ui/textarea.tsx
+++ b/apps/web/src/components/ui/textarea.tsx
@@ -81,7 +81,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
         <textarea
           ref={ref}
           className={cn(
-            'w-full px-4 py-3',
+            'w-full px-4 py-4',
             'bg-kodo-graphite border',
             error ? 'border-kodo-red' : 'border-kodo-steel',
             'text-white placeholder-gray-500',
diff --git a/apps/web/src/components/ui/tooltip.tsx b/apps/web/src/components/ui/tooltip.tsx
index 183f8eba5..ca1864e22 100644
--- a/apps/web/src/components/ui/tooltip.tsx
+++ b/apps/web/src/components/ui/tooltip.tsx
@@ -294,7 +294,7 @@ export function Tooltip({
         <div
           ref={tooltipRef}
           className={cn(
-            'absolute z-50 px-3 py-1.5 text-sm text-white bg-kodo-ink rounded-md shadow-lg',
+            'absolute z-50 px-4 py-1.5 text-sm text-white bg-kodo-ink rounded-md shadow-lg',
             'border border-kodo-steel pointer-events-none',
             'transition-all duration-200',
             positionClasses[calculatedPosition],
diff --git a/apps/web/src/components/upload/BulkUploadModal.tsx b/apps/web/src/components/upload/BulkUploadModal.tsx
index a0e5e1755..deaa23ba4 100644
--- a/apps/web/src/components/upload/BulkUploadModal.tsx
+++ b/apps/web/src/components/upload/BulkUploadModal.tsx
@@ -63,7 +63,7 @@ export const BulkUploadModal: React.FC<BulkUploadModalProps> = ({
         </div>
 
         {/* File List */}
-        <div className="flex-1 overflow-y-auto p-6 space-y-3 bg-kodo-graphite/50">
+        <div className="flex-1 overflow-y-auto p-6 space-y-4 bg-kodo-graphite/50">
           {files.map((file) => (
             <FilePreviewCard
               key={file.id}
@@ -87,7 +87,7 @@ export const BulkUploadModal: React.FC<BulkUploadModalProps> = ({
               Cancel All
             </Button>
           </div>
-          <div className="flex gap-3">
+          <div className="flex gap-4">
             <Button
               variant="secondary"
               size="sm"
diff --git a/apps/web/src/components/upload/FilePreviewCard.tsx b/apps/web/src/components/upload/FilePreviewCard.tsx
index f0df92801..37e3e405a 100644
--- a/apps/web/src/components/upload/FilePreviewCard.tsx
+++ b/apps/web/src/components/upload/FilePreviewCard.tsx
@@ -54,7 +54,7 @@ export const FilePreviewCard: React.FC<FilePreviewCardProps> = ({
   return (
     <Card
       variant="gaming"
-      className="p-3 flex items-center gap-4 border-l-4 border-l-kodo-slate hover:border-l-kodo-cyan transition-all"
+      className="p-4 flex items-center gap-4 border-l-4 border-l-kodo-slate hover:border-l-kodo-cyan transition-all"
     >
       {/* Thumbnail / Icon */}
       <div className="w-12 h-12 rounded-lg bg-black/40 flex items-center justify-center overflow-hidden flex-shrink-0 border border-white/5">
diff --git a/apps/web/src/components/upload/FileUploadZone.tsx b/apps/web/src/components/upload/FileUploadZone.tsx
index 6a391130a..cb9bca548 100644
--- a/apps/web/src/components/upload/FileUploadZone.tsx
+++ b/apps/web/src/components/upload/FileUploadZone.tsx
@@ -65,7 +65,7 @@ export const FileUploadZone: React.FC<FileUploadZoneProps> = ({
       onDragLeave={() => setIsDragging(false)}
       onDrop={handleDrop}
       className={`
-        border-2 border-dashed rounded-xl p-10 flex flex-col items-center justify-center text-center transition-all duration-300 group cursor-pointer
+        border-2 border-dashed rounded-xl p-12 flex flex-col items-center justify-center text-center transition-all duration-300 group cursor-pointer
         ${
           isDragging
             ? 'border-kodo-cyan bg-kodo-cyan/10 scale-[1.02]'
diff --git a/apps/web/src/components/upload/UploadProgressBar.tsx b/apps/web/src/components/upload/UploadProgressBar.tsx
index c20e41318..d8cc010c9 100644
--- a/apps/web/src/components/upload/UploadProgressBar.tsx
+++ b/apps/web/src/components/upload/UploadProgressBar.tsx
@@ -28,7 +28,7 @@ export const UploadProgressBar: React.FC<UploadProgressBarProps> = ({
   };
 
   return (
-    <div className="w-full flex items-center gap-3">
+    <div className="w-full flex items-center gap-4">
       <div className="flex-1">
         <div className="flex justify-between text-[10px] uppercase font-bold text-kodo-content-dim mb-1">
           <span>{status}</span>
diff --git a/apps/web/src/components/upload/metadata/LyricsEditorModal.tsx b/apps/web/src/components/upload/metadata/LyricsEditorModal.tsx
index ed45b545c..3d2a362e8 100644
--- a/apps/web/src/components/upload/metadata/LyricsEditorModal.tsx
+++ b/apps/web/src/components/upload/metadata/LyricsEditorModal.tsx
@@ -94,7 +94,7 @@ export const LyricsEditorModal: React.FC<LyricsEditorModalProps> = ({
           </p>
         </div>
 
-        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-3">
+        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
           <Button variant="ghost" onClick={onClose}>
             Cancel
           </Button>
diff --git a/apps/web/src/components/upload/metadata/MetadataEditor.tsx b/apps/web/src/components/upload/metadata/MetadataEditor.tsx
index d5668eac5..6c9f86b88 100644
--- a/apps/web/src/components/upload/metadata/MetadataEditor.tsx
+++ b/apps/web/src/components/upload/metadata/MetadataEditor.tsx
@@ -195,7 +195,7 @@ export const MetadataEditor: React.FC<MetadataEditorProps> = ({
         <Button variant="ghost" onClick={onBack}>
           Back to Upload
         </Button>
-        <div className="flex gap-3">
+        <div className="flex gap-4">
           <Button
             variant="secondary"
             icon={<Save className="w-4 h-4" />}
diff --git a/apps/web/src/components/upload/metadata/MetadataForm.tsx b/apps/web/src/components/upload/metadata/MetadataForm.tsx
index b8b73cb20..4a0477fb2 100644
--- a/apps/web/src/components/upload/metadata/MetadataForm.tsx
+++ b/apps/web/src/components/upload/metadata/MetadataForm.tsx
@@ -237,7 +237,7 @@ export const MetadataForm: React.FC<MetadataFormProps> = ({
               Description
             </label>
             <textarea
-              className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-steel outline-none min-h-[100px] text-sm"
+              className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-4 text-white focus:border-kodo-steel outline-none min-h-[100px] text-sm"
               placeholder="Tell the story behind this track..."
               value={data.description || ''}
               onChange={(e) => updateField('description', e.target.value)}
diff --git a/apps/web/src/components/upload/metadata/TagSuggestionsModal.tsx b/apps/web/src/components/upload/metadata/TagSuggestionsModal.tsx
index 21be6f920..80e4a32a8 100644
--- a/apps/web/src/components/upload/metadata/TagSuggestionsModal.tsx
+++ b/apps/web/src/components/upload/metadata/TagSuggestionsModal.tsx
@@ -91,7 +91,7 @@ export const TagSuggestionsModal: React.FC<TagSuggestionsModalProps> = ({
               {localTags.map((tag) => (
                 <span
                   key={tag}
-                  className="px-3 py-1 bg-kodo-magenta/20 text-kodo-magenta border border-kodo-magenta/50 rounded-full text-sm font-bold flex items-center gap-2"
+                  className="px-4 py-1 bg-kodo-magenta/20 text-kodo-magenta border border-kodo-magenta/50 rounded-full text-sm font-bold flex items-center gap-2"
                 >
                   #{tag}
                   <X
@@ -120,7 +120,7 @@ export const TagSuggestionsModal: React.FC<TagSuggestionsModalProps> = ({
                 <button
                   key={tag}
                   onClick={() => addTag(tag)}
-                  className="px-3 py-1 bg-kodo-slate border border-kodo-steel rounded-full text-sm text-kodo-text-main hover:text-white hover:border-white transition-colors flex items-center gap-1"
+                  className="px-4 py-1 bg-kodo-slate border border-kodo-steel rounded-full text-sm text-kodo-text-main hover:text-white hover:border-white transition-colors flex items-center gap-1"
                 >
                   <Plus className="w-3 h-3" /> {tag}
                 </button>
@@ -129,7 +129,7 @@ export const TagSuggestionsModal: React.FC<TagSuggestionsModalProps> = ({
           </div>
         </div>
 
-        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-3">
+        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
           <Button variant="ghost" onClick={onClose}>
             Cancel
           </Button>
diff --git a/apps/web/src/components/views/AdminView.tsx b/apps/web/src/components/views/AdminView.tsx
index 5b23cb9c3..2026b7959 100644
--- a/apps/web/src/components/views/AdminView.tsx
+++ b/apps/web/src/components/views/AdminView.tsx
@@ -33,7 +33,7 @@ export const AdminView: React.FC<AdminViewProps> = ({
     <div className="flex flex-col lg:flex-row gap-8 animate-fadeIn h-[calc(100vh-140px)]">
       {/* Admin Sidebar */}
       <div className="w-full lg:w-64 flex-shrink-0">
-        <div className="bg-kodo-red/10 border border-kodo-red/30 p-4 rounded-xl mb-6 flex items-center gap-3">
+        <div className="bg-kodo-red/10 border border-kodo-red/30 p-4 rounded-xl mb-6 flex items-center gap-4">
           <ShieldAlert className="w-6 h-6 text-kodo-red" />
           <div>
             <h3 className="font-bold text-white text-sm">Admin Area</h3>
@@ -67,7 +67,7 @@ export const AdminView: React.FC<AdminViewProps> = ({
             <button
               key={item.id}
               onClick={() => setActiveTab(item.id)}
-              className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-all ${
+              className={`w-full flex items-center gap-4 px-4 py-4 rounded-lg text-sm font-medium transition-all ${
                 activeTab === item.id
                   ? 'bg-white/10 text-white border-l-2 border-kodo-red'
                   : 'text-kodo-content-dim hover:text-white hover:bg-white/5 border-l-2 border-transparent'
diff --git a/apps/web/src/components/views/AnalyticsView.tsx b/apps/web/src/components/views/AnalyticsView.tsx
index bf2d445a2..6dda54004 100644
--- a/apps/web/src/components/views/AnalyticsView.tsx
+++ b/apps/web/src/components/views/AnalyticsView.tsx
@@ -67,7 +67,7 @@ export const AnalyticsView: React.FC<AnalyticsViewProps> = ({
 
   if (loading)
     return (
-      <div className="flex justify-center py-20">
+      <div className="flex justify-center py-24">
         <Loader2 className="w-10 h-10 text-kodo-steel animate-spin" />
       </div>
     );
@@ -85,13 +85,13 @@ export const AnalyticsView: React.FC<AnalyticsViewProps> = ({
           </p>
         </div>
 
-        <div className="flex gap-3">
+        <div className="flex gap-4">
           <div className="bg-kodo-ink p-1 rounded-lg border border-kodo-steel flex">
             {['7d', '30d', '90d', 'YTD'].map((range) => (
               <button
                 key={range}
                 onClick={() => setDateRange(range)}
-                className={`px-3 py-1.5 rounded text-xs font-bold uppercase transition-colors ${dateRange === range ? 'bg-kodo-slate text-white' : 'text-kodo-content-dim hover:text-white'}`}
+                className={`px-4 py-1.5 rounded text-xs font-bold uppercase transition-colors ${dateRange === range ? 'bg-kodo-slate text-white' : 'text-kodo-content-dim hover:text-white'}`}
               >
                 {range}
               </button>
diff --git a/apps/web/src/components/views/CartView.tsx b/apps/web/src/components/views/CartView.tsx
index 15fbb33c6..1266bf538 100644
--- a/apps/web/src/components/views/CartView.tsx
+++ b/apps/web/src/components/views/CartView.tsx
@@ -91,7 +91,7 @@ export const CartView: React.FC<CartViewProps> = ({
               Order Summary
             </h3>
 
-            <div className="space-y-3 text-sm mb-6">
+            <div className="space-y-4 text-sm mb-6">
               <div className="flex justify-between text-kodo-content-dim">
                 <span>Subtotal</span>
                 <span className="text-white font-mono">
@@ -143,7 +143,7 @@ export const CartView: React.FC<CartViewProps> = ({
             )}
           </Card>
 
-          <div className="bg-kodo-ink/50 p-4 rounded-xl border border-kodo-steel/50 flex items-start gap-3">
+          <div className="bg-kodo-ink/50 p-4 rounded-xl border border-kodo-steel/50 flex items-start gap-4">
             <ShieldCheck className="w-5 h-5 text-kodo-gold flex-shrink-0" />
             <div>
               <h4 className="font-bold text-white text-sm mb-1">
diff --git a/apps/web/src/components/views/CheckoutView.tsx b/apps/web/src/components/views/CheckoutView.tsx
index 2b6edd3f0..c7ba4fb3c 100644
--- a/apps/web/src/components/views/CheckoutView.tsx
+++ b/apps/web/src/components/views/CheckoutView.tsx
@@ -123,7 +123,7 @@ export const CheckoutView: React.FC<CheckoutViewProps> = ({
                   Country
                 </label>
                 <select
-                  className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg py-3 px-4 text-white focus:border-kodo-steel outline-none appearance-none"
+                  className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg py-4 px-4 text-white focus:border-kodo-steel outline-none appearance-none"
                   value={form.country}
                   onChange={(e) =>
                     setForm({ ...form, country: e.target.value })
@@ -146,7 +146,7 @@ export const CheckoutView: React.FC<CheckoutViewProps> = ({
             </h3>
 
             <div className="bg-kodo-ink p-4 rounded-xl border border-kodo-steel mb-4">
-              <div className="flex items-center gap-3 mb-4">
+              <div className="flex items-center gap-4 mb-4">
                 <CreditCard className="w-5 h-5 text-kodo-steel" />
                 <span className="font-bold text-white">Credit Card</span>
                 <div className="flex gap-1 ml-auto">
@@ -157,16 +157,16 @@ export const CheckoutView: React.FC<CheckoutViewProps> = ({
               </div>
 
               {/* Stripe Element Simulation */}
-              <div className="space-y-3">
-                <div className="bg-kodo-graphite border border-kodo-steel rounded px-3 py-3 text-sm text-kodo-content-dim flex items-center justify-between">
+              <div className="space-y-4">
+                <div className="bg-kodo-graphite border border-kodo-steel rounded px-4 py-4 text-sm text-kodo-content-dim flex items-center justify-between">
                   <span>4242 4242 4242 4242</span>
                   <CreditCard className="w-4 h-4" />
                 </div>
-                <div className="grid grid-cols-2 gap-3">
-                  <div className="bg-kodo-graphite border border-kodo-steel rounded px-3 py-3 text-sm text-kodo-content-dim">
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="bg-kodo-graphite border border-kodo-steel rounded px-4 py-4 text-sm text-kodo-content-dim">
                     MM / YY
                   </div>
-                  <div className="bg-kodo-graphite border border-kodo-steel rounded px-3 py-3 text-sm text-kodo-content-dim">
+                  <div className="bg-kodo-graphite border border-kodo-steel rounded px-4 py-4 text-sm text-kodo-content-dim">
                     CVC
                   </div>
                 </div>
@@ -218,7 +218,7 @@ export const CheckoutView: React.FC<CheckoutViewProps> = ({
               Order Summary
             </h3>
 
-            <div className="space-y-3 max-h-60 overflow-y-auto custom-scrollbar mb-6 pr-2">
+            <div className="space-y-4 max-h-60 overflow-y-auto custom-scrollbar mb-6 pr-2">
               {cart.map((item) => (
                 <div
                   key={item.cartId}
diff --git a/apps/web/src/components/views/DiscoverView.tsx b/apps/web/src/components/views/DiscoverView.tsx
index a44781841..d06d303a2 100644
--- a/apps/web/src/components/views/DiscoverView.tsx
+++ b/apps/web/src/components/views/DiscoverView.tsx
@@ -184,7 +184,7 @@ export const DiscoverView: React.FC = () => {
           {trending.map((track, i) => (
             <div
               key={track.id}
-              className="flex items-center gap-4 p-3 rounded-xl hover:bg-white/5 group transition-colors cursor-pointer"
+              className="flex items-center gap-4 p-4 rounded-xl hover:bg-white/5 group transition-colors cursor-pointer"
               onMouseEnter={() => setHoveredTrack(track.id)}
               onMouseLeave={() => setHoveredTrack(null)}
               onClick={() => handlePlay(track)}
diff --git a/apps/web/src/components/views/EducationView.tsx b/apps/web/src/components/views/EducationView.tsx
index a1e459775..6b8d1583f 100644
--- a/apps/web/src/components/views/EducationView.tsx
+++ b/apps/web/src/components/views/EducationView.tsx
@@ -114,7 +114,7 @@ export const EducationView: React.FC<EducationViewProps> = ({
 
       {/* Course Grid */}
       {loading ? (
-        <div className="flex justify-center py-20">
+        <div className="flex justify-center py-24">
           <Loader2 className="w-10 h-10 text-kodo-steel animate-spin" />
         </div>
       ) : (
@@ -127,7 +127,7 @@ export const EducationView: React.FC<EducationViewProps> = ({
             />
           ))}
           {filtered.length === 0 && (
-            <div className="col-span-full text-center py-20 text-kodo-content-dim">
+            <div className="col-span-full text-center py-24 text-kodo-content-dim">
               <BookOpen className="w-12 h-12 mx-auto mb-4 opacity-50" />
               <p>No courses found matching your criteria.</p>
             </div>
diff --git a/apps/web/src/components/views/FileDetailsView.tsx b/apps/web/src/components/views/FileDetailsView.tsx
index 66736e951..49a78ab95 100644
--- a/apps/web/src/components/views/FileDetailsView.tsx
+++ b/apps/web/src/components/views/FileDetailsView.tsx
@@ -95,7 +95,7 @@ export const FileDetailsView: React.FC<FileDetailsViewProps> = ({
             <ArrowLeft className="w-5 h-5" />
           </Button>
           <div>
-            <h2 className="text-2xl font-bold text-white flex items-center gap-3">
+            <h2 className="text-2xl font-bold text-white flex items-center gap-4">
               {file.name}
               <Badge label={file.type} variant="terminal" />
             </h2>
@@ -194,7 +194,7 @@ export const FileDetailsView: React.FC<FileDetailsViewProps> = ({
               {Object.entries(file.metadata || {}).map(([key, val]) => (
                 <div
                   key={key}
-                  className="bg-kodo-ink p-3 rounded border border-kodo-steel/50"
+                  className="bg-kodo-ink p-4 rounded border border-kodo-steel/50"
                 >
                   <div className="text-xs text-kodo-content-dim uppercase font-bold mb-1">
                     {key}
@@ -216,7 +216,7 @@ export const FileDetailsView: React.FC<FileDetailsViewProps> = ({
             <div className="space-y-4 relative">
               <div className="absolute left-3 top-2 bottom-2 w-px bg-kodo-steel"></div>
               {MOCK_ACTIVITY.map((act) => (
-                <div key={act.id} className="flex gap-3 relative">
+                <div key={act.id} className="flex gap-4 relative">
                   <div className="w-6 h-6 rounded-full bg-kodo-graphite border border-kodo-steel flex items-center justify-center shrink-0 z-10">
                     <div className="w-2 h-2 rounded-full bg-kodo-gold"></div>
                   </div>
@@ -241,7 +241,7 @@ export const FileDetailsView: React.FC<FileDetailsViewProps> = ({
               {MOCK_VERSIONS.map((ver) => (
                 <div
                   key={ver.id}
-                  className={`flex items-center justify-between p-3 rounded border ${ver.current ? 'bg-kodo-magenta/10 border-kodo-magenta/30' : 'bg-kodo-ink border-kodo-steel hover:bg-white/5'}`}
+                  className={`flex items-center justify-between p-4 rounded border ${ver.current ? 'bg-kodo-magenta/10 border-kodo-magenta/30' : 'bg-kodo-ink border-kodo-steel hover:bg-white/5'}`}
                 >
                   <div>
                     <div className="flex items-center gap-2">
diff --git a/apps/web/src/components/views/FileManagerView.tsx b/apps/web/src/components/views/FileManagerView.tsx
index 7fe280f57..38b3512d0 100644
--- a/apps/web/src/components/views/FileManagerView.tsx
+++ b/apps/web/src/components/views/FileManagerView.tsx
@@ -216,7 +216,7 @@ export const FileManagerView: React.FC = () => {
         </div>
 
         {selectedFiles.length > 0 ? (
-          <div className="flex items-center gap-3 bg-kodo-steel/10 px-4 py-2 rounded-lg border border-kodo-steel/30 animate-fadeIn w-full md:w-auto">
+          <div className="flex items-center gap-4 bg-kodo-steel/10 px-4 py-2 rounded-lg border border-kodo-steel/30 animate-fadeIn w-full md:w-auto">
             <span className="text-sm font-bold text-kodo-steel">
               {selectedFiles.length} Selected
             </span>
@@ -311,7 +311,7 @@ export const FileManagerView: React.FC = () => {
                       </td>
                       <td className="p-4">
                         <div
-                          className="flex items-center gap-3 cursor-pointer"
+                          className="flex items-center gap-4 cursor-pointer"
                           onClick={() => handleFileClick(file)}
                         >
                           {file.type === 'folder' && (
@@ -379,7 +379,7 @@ export const FileManagerView: React.FC = () => {
               <Card
                 key={file.id}
                 variant="default"
-                className={`p-4 flex flex-col items-center text-center gap-3 cursor-pointer hover:border-kodo-steel/50 transition-all group relative ${selectedFiles.includes(file.id) ? 'border-kodo-cyan bg-kodo-cyan/5' : ''}`}
+                className={`p-4 flex flex-col items-center text-center gap-4 cursor-pointer hover:border-kodo-steel/50 transition-all group relative ${selectedFiles.includes(file.id) ? 'border-kodo-cyan bg-kodo-cyan/5' : ''}`}
                 onClick={() => handleFileClick(file)}
               >
                 <div
diff --git a/apps/web/src/components/views/GearView.tsx b/apps/web/src/components/views/GearView.tsx
index 600ccb72b..34588828f 100644
--- a/apps/web/src/components/views/GearView.tsx
+++ b/apps/web/src/components/views/GearView.tsx
@@ -171,7 +171,7 @@ export const GearView: React.FC = () => {
             Manage hardware assets, documentation, and warranties.
           </p>
         </div>
-        <div className="flex gap-3">
+        <div className="flex gap-4">
           <Button
             variant="ghost"
             icon={<Download className="w-4 h-4" />}
@@ -207,7 +207,7 @@ export const GearView: React.FC = () => {
             <button
               key={f}
               onClick={() => setFilter(f)}
-              className={`px-3 py-1.5 rounded-lg text-xs font-bold uppercase tracking-wider transition-colors border ${filter === f ? 'bg-kodo-cyan text-black border-kodo-cyan' : 'bg-kodo-slate text-kodo-content-dim border-transparent hover:border-kodo-steel'}`}
+              className={`px-4 py-1.5 rounded-lg text-xs font-bold uppercase tracking-wider transition-colors border ${filter === f ? 'bg-kodo-cyan text-black border-kodo-cyan' : 'bg-kodo-slate text-kodo-content-dim border-transparent hover:border-kodo-steel'}`}
             >
               {f}
             </button>
@@ -314,7 +314,7 @@ export const GearView: React.FC = () => {
                   />
                 </div>
                 <div>
-                  <div className="flex items-center gap-3 mb-1">
+                  <div className="flex items-center gap-4 mb-1">
                     <Badge label={selectedItem.category} variant="cyan" />
                     <span className="text-kodo-content-dim text-xs font-mono uppercase">
                       {selectedItem.serialNumber}
@@ -327,7 +327,7 @@ export const GearView: React.FC = () => {
                     {selectedItem.brand} {selectedItem.model}
                   </h3>
 
-                  <div className="flex gap-3">
+                  <div className="flex gap-4">
                     <Button
                       variant="gaming"
                       size="sm"
@@ -393,7 +393,7 @@ export const GearView: React.FC = () => {
                       Maintenance & Support (SAV)
                     </h4>
                     {selectedItem.status === 'Maintenance' && (
-                      <div className="bg-kodo-orange/10 border border-kodo-orange/30 p-3 rounded mb-4 flex items-center gap-3">
+                      <div className="bg-kodo-orange/10 border border-kodo-orange/30 p-4 rounded mb-4 flex items-center gap-4">
                         <AlertTriangle className="w-5 h-5 text-kodo-orange" />
                         <div>
                           <div className="text-sm font-bold text-kodo-orange">
@@ -406,11 +406,11 @@ export const GearView: React.FC = () => {
                       </div>
                     )}
 
-                    <div className="space-y-3">
+                    <div className="space-y-4">
                       {selectedItem.maintenanceHistory?.map((log) => (
                         <div
                           key={log.id}
-                          className="flex items-start gap-4 p-3 bg-white/5 rounded hover:bg-white/10 transition-colors"
+                          className="flex items-start gap-4 p-4 bg-white/5 rounded hover:bg-white/10 transition-colors"
                         >
                           <div className="bg-kodo-graphite p-2 rounded text-kodo-content-dim">
                             <ClipboardList className="w-4 h-4" />
@@ -453,7 +453,7 @@ export const GearView: React.FC = () => {
                       <DollarSign className="w-4 h-4 text-kodo-gold" /> Purchase
                       Info
                     </h4>
-                    <div className="space-y-3 text-sm">
+                    <div className="space-y-4 text-sm">
                       <div className="flex justify-between">
                         <span className="text-kodo-content-dim">Price Paid</span>
                         <span className="text-white font-mono">
@@ -489,7 +489,7 @@ export const GearView: React.FC = () => {
                       <Shield className="w-4 h-4 text-kodo-lime" /> Warranty
                     </h4>
                     <div
-                      className={`p-3 rounded text-center mb-4 ${getWarrantyStatus(selectedItem.warrantyExpire).bg}`}
+                      className={`p-4 rounded text-center mb-4 ${getWarrantyStatus(selectedItem.warrantyExpire).bg}`}
                     >
                       <div
                         className={`text-lg font-bold ${getWarrantyStatus(selectedItem.warrantyExpire).color}`}
@@ -526,7 +526,7 @@ export const GearView: React.FC = () => {
                           key={i}
                           className="flex items-center justify-between p-2 hover:bg-white/5 rounded cursor-pointer group"
                         >
-                          <div className="flex items-center gap-3 overflow-hidden">
+                          <div className="flex items-center gap-4 overflow-hidden">
                             {doc.type === 'manual' ? (
                               <FileText className="w-4 h-4 text-kodo-steel" />
                             ) : (
diff --git a/apps/web/src/components/views/LiveView.tsx b/apps/web/src/components/views/LiveView.tsx
index 9c24df13a..5a0bb0a4b 100644
--- a/apps/web/src/components/views/LiveView.tsx
+++ b/apps/web/src/components/views/LiveView.tsx
@@ -137,7 +137,7 @@ export const LiveView: React.FC = () => {
               </div>
             </div>
           </div>
-          <div className="flex gap-3">
+          <div className="flex gap-4">
             <Button
               variant="secondary"
               icon={<Heart className="w-4 h-4" />}
@@ -184,7 +184,7 @@ export const LiveView: React.FC = () => {
                     DJ Set
                   </div>
                 </div>
-                <div className="p-3 flex gap-2">
+                <div className="p-4 flex gap-2">
                   <div className="w-8 h-8 rounded-full bg-kodo-steel"></div>
                   <div>
                     <div className="font-bold text-sm text-white truncate">
@@ -206,14 +206,14 @@ export const LiveView: React.FC = () => {
         variant="gaming"
         className="lg:col-span-3 flex flex-col p-0 overflow-hidden h-full max-h-[calc(100vh-120px)]"
       >
-        <div className="p-3 border-b border-kodo-steel/50 flex justify-between items-center bg-kodo-ink">
+        <div className="p-4 border-b border-kodo-steel/50 flex justify-between items-center bg-kodo-ink">
           <span className="font-mono text-sm font-bold text-white">
             STREAM CHAT
           </span>
           <div className="w-2 h-2 bg-kodo-lime rounded-full animate-pulse"></div>
         </div>
 
-        <div className="flex-1 overflow-y-auto p-4 space-y-3 font-mono text-sm">
+        <div className="flex-1 overflow-y-auto p-4 space-y-4 font-mono text-sm">
           {chatMessages.map((msg, i) => (
             <div key={i} className="break-words">
               <span
@@ -231,14 +231,14 @@ export const LiveView: React.FC = () => {
           </div>
         </div>
 
-        <div className="p-3 bg-kodo-slate border-t border-kodo-steel">
+        <div className="p-4 bg-kodo-slate border-t border-kodo-steel">
           <div className="flex gap-2">
             <div className="relative flex-1">
               <input
                 value={msgInput}
                 onChange={(e) => setMsgInput(e.target.value)}
                 onKeyDown={(e) => e.key === 'Enter' && handleSend()}
-                className="w-full bg-kodo-ink border border-kodo-steel rounded px-3 py-2 text-sm text-white focus:border-kodo-steel outline-none"
+                className="w-full bg-kodo-ink border border-kodo-steel rounded px-4 py-2 text-sm text-white focus:border-kodo-steel outline-none"
                 placeholder="Say something..."
               />
               <DollarSign className="absolute right-2 top-1/2 -translate-y-1/2 w-4 h-4 text-kodo-gold cursor-pointer hover:scale-110 transition-transform" />
@@ -246,7 +246,7 @@ export const LiveView: React.FC = () => {
             <Button
               variant="primary"
               size="sm"
-              className="px-3"
+              className="px-4"
               onClick={handleSend}
             >
               <Send className="w-4 h-4" />
diff --git a/apps/web/src/components/views/MarketplaceView.tsx b/apps/web/src/components/views/MarketplaceView.tsx
index 6e90ea186..67b7d020b 100644
--- a/apps/web/src/components/views/MarketplaceView.tsx
+++ b/apps/web/src/components/views/MarketplaceView.tsx
@@ -95,7 +95,7 @@ export const MarketplaceView: React.FC = () => {
           </p>
         </div>
 
-        <div className="flex items-center gap-3 w-full md:w-auto">
+        <div className="flex items-center gap-4 w-full md:w-auto">
           <div className="relative flex-1 md:w-64">
             <SearchInput
               placeholder="Search sounds..."
@@ -153,7 +153,7 @@ export const MarketplaceView: React.FC = () => {
         {/* Product Grid */}
         <div className="flex-1">
           {loading ? (
-            <div className="flex justify-center py-20">
+            <div className="flex justify-center py-24">
               <Loader2 className="w-8 h-8 text-kodo-steel animate-spin" />
             </div>
           ) : (
@@ -171,7 +171,7 @@ export const MarketplaceView: React.FC = () => {
             </div>
           )}
           {!loading && filteredProducts.length === 0 && (
-            <div className="text-center py-20 text-kodo-content-dim">
+            <div className="text-center py-24 text-kodo-content-dim">
               <p>No products found matching your filters.</p>
               <Button
                 variant="ghost"
diff --git a/apps/web/src/components/views/NotificationsView.tsx b/apps/web/src/components/views/NotificationsView.tsx
index 388a21803..ae5dd3264 100644
--- a/apps/web/src/components/views/NotificationsView.tsx
+++ b/apps/web/src/components/views/NotificationsView.tsx
@@ -118,7 +118,7 @@ export const NotificationsView: React.FC = () => {
 
       <div className="space-y-2">
         {filtered.length === 0 ? (
-          <div className="text-center py-20 border-2 border-dashed border-kodo-steel rounded-xl text-kodo-content-dim">
+          <div className="text-center py-24 border-2 border-dashed border-kodo-steel rounded-xl text-kodo-content-dim">
             <Bell className="w-12 h-12 mx-auto mb-4 opacity-50" />
             <p>No notifications to display.</p>
           </div>
diff --git a/apps/web/src/components/views/ProfileView.tsx b/apps/web/src/components/views/ProfileView.tsx
index 0e2617936..76357522f 100644
--- a/apps/web/src/components/views/ProfileView.tsx
+++ b/apps/web/src/components/views/ProfileView.tsx
@@ -243,7 +243,7 @@ export const ProfileView: React.FC<ProfileViewProps> = ({ userId }) => {
         </div>
 
         {/* Identity Section */}
-        <div className="px-6 md:px-10 relative z-20 -mt-20 flex flex-col md:flex-row items-end gap-6">
+        <div className="px-6 md:px-12 relative z-20 -mt-20 flex flex-col md:flex-row items-end gap-6">
           <div className="relative shrink-0 group">
             <Avatar
               src={profile.avatar}
@@ -308,7 +308,7 @@ export const ProfileView: React.FC<ProfileViewProps> = ({ userId }) => {
             </div>
           </div>
 
-          <div className="flex gap-3 mb-4 w-full md:w-auto">
+          <div className="flex gap-4 mb-4 w-full md:w-auto">
             {isOwnProfile ? (
               <Button
                 variant="secondary"
@@ -364,9 +364,9 @@ export const ProfileView: React.FC<ProfileViewProps> = ({ userId }) => {
             <h3 className="text-sm font-bold text-kodo-content-dim uppercase tracking-wider mb-4">
               Connections
             </h3>
-            <div className="space-y-3">
+            <div className="space-y-4">
               {profile.website && (
-                <div className="flex items-center gap-3 text-sm text-kodo-content-dim hover:text-white cursor-pointer transition-colors">
+                <div className="flex items-center gap-4 text-sm text-kodo-content-dim hover:text-white cursor-pointer transition-colors">
                   <Globe className="w-4 h-4 text-kodo-steel" />
                   <a
                     href={
@@ -383,13 +383,13 @@ export const ProfileView: React.FC<ProfileViewProps> = ({ userId }) => {
                 </div>
               )}
               {profile.socials?.twitter && (
-                <div className="flex items-center gap-3 text-sm text-kodo-content-dim hover:text-white cursor-pointer transition-colors">
+                <div className="flex items-center gap-4 text-sm text-kodo-content-dim hover:text-white cursor-pointer transition-colors">
                   <Twitter className="w-4 h-4 text-kodo-steel" />
                   <span>{profile.socials.twitter}</span>
                 </div>
               )}
               {profile.socials?.instagram && (
-                <div className="flex items-center gap-3 text-sm text-kodo-content-dim hover:text-white cursor-pointer transition-colors">
+                <div className="flex items-center gap-4 text-sm text-kodo-content-dim hover:text-white cursor-pointer transition-colors">
                   <Instagram className="w-4 h-4 text-kodo-steel" />
                   <span>{profile.socials.instagram}</span>
                 </div>
@@ -474,7 +474,7 @@ export const ProfileView: React.FC<ProfileViewProps> = ({ userId }) => {
                       <p className="text-kodo-content-dim mb-6">
                         Latest upload from {profile.username}.
                       </p>
-                      <div className="flex justify-center md:justify-start gap-3">
+                      <div className="flex justify-center md:justify-start gap-4">
                         <Button
                           variant="primary"
                           icon={<Play className="w-4 h-4" />}
diff --git a/apps/web/src/components/views/PurchasesView.tsx b/apps/web/src/components/views/PurchasesView.tsx
index 9eef0faee..f25a7b6ae 100644
--- a/apps/web/src/components/views/PurchasesView.tsx
+++ b/apps/web/src/components/views/PurchasesView.tsx
@@ -66,13 +66,13 @@ export const PurchasesView: React.FC = () => {
 
       <div className="space-y-4">
         {loading && (
-          <div className="flex justify-center py-20">
+          <div className="flex justify-center py-24">
             <Loader2 className="w-8 h-8 text-kodo-steel animate-spin" />
           </div>
         )}
 
         {!loading && filteredPurchases.length === 0 ? (
-          <div className="text-center py-20 text-kodo-content-dim">
+          <div className="text-center py-24 text-kodo-content-dim">
             <p>No purchases found.</p>
           </div>
         ) : (
@@ -95,7 +95,7 @@ export const PurchasesView: React.FC = () => {
                 <h3 className="font-bold text-white text-lg mb-1">
                   {purchase.product.title}
                 </h3>
-                <div className="flex flex-wrap items-center justify-center md:justify-start gap-3 text-xs text-kodo-content-dim">
+                <div className="flex flex-wrap items-center justify-center md:justify-start gap-4 text-xs text-kodo-content-dim">
                   <span className="bg-kodo-ink px-2 py-1 rounded border border-kodo-steel text-kodo-steel">
                     {purchase.product.type}
                   </span>
@@ -108,7 +108,7 @@ export const PurchasesView: React.FC = () => {
               </div>
 
               {/* Actions */}
-              <div className="flex flex-col sm:flex-row gap-3 w-full md:w-auto">
+              <div className="flex flex-col sm:flex-row gap-4 w-full md:w-auto">
                 <div className="relative">
                   <Button
                     variant="primary"
diff --git a/apps/web/src/components/views/SearchPageView.tsx b/apps/web/src/components/views/SearchPageView.tsx
index b35b59546..4f19843b8 100644
--- a/apps/web/src/components/views/SearchPageView.tsx
+++ b/apps/web/src/components/views/SearchPageView.tsx
@@ -179,7 +179,7 @@ export const SearchPageView: React.FC<SearchPageViewProps> = ({
               <h3 className="font-bold text-white mb-4 text-sm uppercase">
                 Key
               </h3>
-              <select className="w-full bg-kodo-ink border border-kodo-steel rounded px-3 py-2 text-sm text-white">
+              <select className="w-full bg-kodo-ink border border-kodo-steel rounded px-4 py-2 text-sm text-white">
                 <option>Any Key</option>
                 <option>C Minor</option>
                 <option>F# Major</option>
@@ -191,13 +191,13 @@ export const SearchPageView: React.FC<SearchPageViewProps> = ({
         {/* Results Area */}
         <div className="flex-1 space-y-8">
           {loading && (
-            <div className="flex justify-center py-20">
+            <div className="flex justify-center py-24">
               <Loader2 className="w-10 h-10 text-kodo-steel animate-spin" />
             </div>
           )}
 
           {!query && !loading && (
-            <div className="text-center py-20 text-kodo-content-dim">
+            <div className="text-center py-24 text-kodo-content-dim">
               <p>Enter a search term to begin.</p>
             </div>
           )}
@@ -216,7 +216,7 @@ export const SearchPageView: React.FC<SearchPageViewProps> = ({
                     {results.tracks.map((track) => (
                       <div
                         key={track.id}
-                        className="bg-kodo-ink p-3 rounded-lg border border-kodo-steel flex items-center gap-4"
+                        className="bg-kodo-ink p-4 rounded-lg border border-kodo-steel flex items-center gap-4"
                       >
                         <img
                           src={track.coverUrl}
@@ -276,7 +276,7 @@ export const SearchPageView: React.FC<SearchPageViewProps> = ({
                 results.tracks.length === 0 &&
                 results.users.length === 0 &&
                 results.courses.length === 0 && (
-                  <div className="text-center py-20 text-kodo-content-dim">
+                  <div className="text-center py-24 text-kodo-content-dim">
                     <p>No results found for "{query}".</p>
                   </div>
                 )}
diff --git a/apps/web/src/components/views/SettingsView.tsx b/apps/web/src/components/views/SettingsView.tsx
index 45bc6ccc5..edc605892 100644
--- a/apps/web/src/components/views/SettingsView.tsx
+++ b/apps/web/src/components/views/SettingsView.tsx
@@ -144,7 +144,7 @@ export const SettingsView: React.FC<SettingsViewProps> = ({
         {/* Placeholder for Audio & Notifications */}
         {['audio', 'notifications'].includes(activeTab) && (
           <Card variant="default" className="min-h-[400px]">
-            <div className="flex flex-col items-center justify-center h-full text-center animate-fadeIn py-20">
+            <div className="flex flex-col items-center justify-center h-full text-center animate-fadeIn py-24">
               <div className="w-20 h-20 rounded-full bg-kodo-slate flex items-center justify-center mb-6">
                 {activeTab === 'audio' ? (
                   <Volume2 className="w-10 h-10 text-kodo-content-dim" />
diff --git a/apps/web/src/components/views/SocialView.tsx b/apps/web/src/components/views/SocialView.tsx
index 60badd1ff..5b27282dc 100644
--- a/apps/web/src/components/views/SocialView.tsx
+++ b/apps/web/src/components/views/SocialView.tsx
@@ -89,7 +89,7 @@ export const SocialView: React.FC<SocialViewProps> = ({ onViewProfile }) => {
         </div>
 
         {loading ? (
-          <div className="text-center py-10">Loading feed...</div>
+          <div className="text-center py-12">Loading feed...</div>
         ) : (
           feedTracks.map((track) => (
             <Card
@@ -97,7 +97,7 @@ export const SocialView: React.FC<SocialViewProps> = ({ onViewProfile }) => {
               variant="default"
               className="p-0 overflow-hidden mb-4 border-transparent hover:border-kodo-steel/50"
             >
-              <div className="p-4 flex items-center gap-3">
+              <div className="p-4 flex items-center gap-4">
                 <div className="w-10 h-10 rounded-full bg-kodo-steel overflow-hidden">
                   <img
                     src={track.coverUrl}
@@ -120,7 +120,7 @@ export const SocialView: React.FC<SocialViewProps> = ({ onViewProfile }) => {
               {/* Track Embed Look */}
               <div className="px-4 pb-4">
                 <div
-                  className="bg-kodo-ink p-3 rounded-xl flex items-center gap-4 border border-kodo-steel group cursor-pointer"
+                  className="bg-kodo-ink p-4 rounded-xl flex items-center gap-4 border border-kodo-steel group cursor-pointer"
                   onClick={() => playTrack(track)}
                 >
                   <div className="w-16 h-16 rounded overflow-hidden relative">
@@ -144,7 +144,7 @@ export const SocialView: React.FC<SocialViewProps> = ({ onViewProfile }) => {
                 </div>
               </div>
 
-              <div className="px-4 py-3 border-t border-kodo-steel/30 flex gap-4 text-xs text-kodo-content-dim">
+              <div className="px-4 py-4 border-t border-kodo-steel/30 flex gap-4 text-xs text-kodo-content-dim">
                 <Button variant="ghost" size="sm" className="text-xs h-auto py-0">
                   Like ({track.like_count})
                 </Button>
@@ -160,7 +160,7 @@ export const SocialView: React.FC<SocialViewProps> = ({ onViewProfile }) => {
         )}
 
         {feedTracks.length === 0 && !loading && (
-          <div className="text-center py-20 text-kodo-content-dim">
+          <div className="text-center py-24 text-kodo-content-dim">
             No recent activity.
           </div>
         )}
diff --git a/apps/web/src/components/views/StudioView.tsx b/apps/web/src/components/views/StudioView.tsx
index 6317e176f..85f3e6ce6 100644
--- a/apps/web/src/components/views/StudioView.tsx
+++ b/apps/web/src/components/views/StudioView.tsx
@@ -68,7 +68,7 @@ export const StudioView: React.FC<StudioViewProps> = ({
           >
             Switch to Projects
           </Button>
-          <div className="px-4 py-2 bg-kodo-ink border border-kodo-steel rounded-lg flex items-center gap-3">
+          <div className="px-4 py-2 bg-kodo-ink border border-kodo-steel rounded-lg flex items-center gap-4">
             <Cloud className="w-4 h-4 text-kodo-steel" />
             <div className="w-32 h-2 bg-kodo-steel rounded-full overflow-hidden">
               <div className="w-[65%] h-full bg-kodo-cyan"></div>
@@ -161,7 +161,7 @@ const NavButton: React.FC<{
 }> = ({ active, onClick, icon, label }) => (
   <button
     onClick={onClick}
-    className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-all ${active ? 'bg-kodo-cyan/10 text-kodo-cyan border border-kodo-cyan/30' : 'text-kodo-content-dim hover:text-white hover:bg-white/5 border border-transparent'}`}
+    className={`w-full flex items-center gap-4 px-4 py-4 rounded-lg text-sm font-medium transition-all ${active ? 'bg-kodo-cyan/10 text-kodo-cyan border border-kodo-cyan/30' : 'text-kodo-content-dim hover:text-white hover:bg-white/5 border border-transparent'}`}
   >
     {icon}
     {label}
diff --git a/apps/web/src/components/views/UploadView.tsx b/apps/web/src/components/views/UploadView.tsx
index 333cf8ca0..dc3e78242 100644
--- a/apps/web/src/components/views/UploadView.tsx
+++ b/apps/web/src/components/views/UploadView.tsx
@@ -142,7 +142,7 @@ export const UploadView: React.FC = () => {
           { num: 3, label: 'Review' },
           { num: 4, label: 'Publish' },
         ].map((s, i) => (
-          <div key={s.num} className="flex items-center gap-3">
+          <div key={s.num} className="flex items-center gap-4">
             <div
               className={`w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm transition-all duration-300 ${step >= s.num ? 'bg-kodo-cyan text-black' : 'bg-kodo-slate text-kodo-content-dim'}`}
             >
diff --git a/apps/web/src/features/auth/components/LoginForm.tsx b/apps/web/src/features/auth/components/LoginForm.tsx
index bfae993d2..5a7bae1fa 100644
--- a/apps/web/src/features/auth/components/LoginForm.tsx
+++ b/apps/web/src/features/auth/components/LoginForm.tsx
@@ -88,7 +88,7 @@ export const LoginForm = () => {
 
       {error && (
         <div
-          className="bg-kodo-red/10 border border-kodo-red/50 text-kodo-red px-4 py-3 rounded-lg"
+          className="bg-kodo-red/10 border border-kodo-red/50 text-kodo-red px-4 py-4 rounded-lg"
           role="alert"
         >
           <span className="block sm:inline text-sm">
diff --git a/apps/web/src/features/auth/components/OAuthButtons.tsx b/apps/web/src/features/auth/components/OAuthButtons.tsx
index 296ff46f7..ea43b9103 100644
--- a/apps/web/src/features/auth/components/OAuthButtons.tsx
+++ b/apps/web/src/features/auth/components/OAuthButtons.tsx
@@ -39,12 +39,12 @@ export function OAuthButtons({
   };
 
   return (
-    <div className="space-y-3">
+    <div className="space-y-4">
       <div className="text-sm text-center text-kodo-content-dim mb-4">
         Or continue with
       </div>
 
-      <div className="grid gap-3">
+      <div className="grid gap-4">
         <Button
           type="button"
           variant="outline"
diff --git a/apps/web/src/features/auth/components/RegisterForm.tsx b/apps/web/src/features/auth/components/RegisterForm.tsx
index bc6f01c19..692c0d154 100644
--- a/apps/web/src/features/auth/components/RegisterForm.tsx
+++ b/apps/web/src/features/auth/components/RegisterForm.tsx
@@ -111,7 +111,7 @@ export const RegisterForm = () => {
 
       {error && (
         <div
-          className="bg-kodo-red/10 border border-kodo-red/50 text-kodo-red px-4 py-3 rounded-lg"
+          className="bg-kodo-red/10 border border-kodo-red/50 text-kodo-red px-4 py-4 rounded-lg"
           role="alert"
         >
           <span className="block sm:inline text-sm">
diff --git a/apps/web/src/features/auth/pages/ForgotPasswordPage.tsx b/apps/web/src/features/auth/pages/ForgotPasswordPage.tsx
index d0e99860a..4f0c93e0e 100644
--- a/apps/web/src/features/auth/pages/ForgotPasswordPage.tsx
+++ b/apps/web/src/features/auth/pages/ForgotPasswordPage.tsx
@@ -71,7 +71,7 @@ export function ForgotPasswordPage() {
       {success ? (
         <div className="text-center space-y-4" role="status" aria-live="polite">
           <div
-            className="bg-kodo-lime/10 border border-kodo-lime text-kodo-lime px-4 py-3 rounded"
+            className="bg-kodo-lime/10 border border-kodo-lime text-kodo-lime px-4 py-4 rounded"
             role="alert"
             aria-live="assertive"
           >
@@ -99,7 +99,7 @@ export function ForgotPasswordPage() {
         >
           {error && (
             <div
-              className="bg-kodo-red/10 border border-kodo-red text-kodo-red px-4 py-3 rounded"
+              className="bg-kodo-red/10 border border-kodo-red text-kodo-red px-4 py-4 rounded"
               role="alert"
               aria-live="assertive"
             >
diff --git a/apps/web/src/features/auth/pages/LoginPage.tsx b/apps/web/src/features/auth/pages/LoginPage.tsx
index 22fbc54f9..6311559c2 100644
--- a/apps/web/src/features/auth/pages/LoginPage.tsx
+++ b/apps/web/src/features/auth/pages/LoginPage.tsx
@@ -221,7 +221,7 @@ export function LoginPage() {
       >
         {error && (
           <div
-            className="bg-kodo-red/10 border border-kodo-red text-kodo-red px-4 py-3 rounded"
+            className="bg-kodo-red/10 border border-kodo-red text-kodo-red px-4 py-4 rounded"
             role="alert"
             aria-live="assertive"
             aria-atomic="true"
diff --git a/apps/web/src/features/auth/pages/RegisterPage.tsx b/apps/web/src/features/auth/pages/RegisterPage.tsx
index dcf57f703..2266c5184 100644
--- a/apps/web/src/features/auth/pages/RegisterPage.tsx
+++ b/apps/web/src/features/auth/pages/RegisterPage.tsx
@@ -164,7 +164,7 @@ export function RegisterPage() {
       {showVerificationNotice ? (
         <div className="text-center space-y-4" role="status" aria-live="polite">
           <div
-            className="bg-kodo-lime/10 border border-kodo-lime text-kodo-lime px-4 py-3 rounded"
+            className="bg-kodo-lime/10 border border-kodo-lime text-kodo-lime px-4 py-4 rounded"
             role="alert"
             aria-live="assertive"
           >
@@ -212,7 +212,7 @@ export function RegisterPage() {
         >
           {error && (
             <div
-              className="bg-kodo-red/10 border border-kodo-red text-kodo-red px-4 py-3 rounded"
+              className="bg-kodo-red/10 border border-kodo-red text-kodo-red px-4 py-4 rounded"
               role="alert"
               aria-live="assertive"
             >
diff --git a/apps/web/src/features/auth/pages/ResetPasswordPage.tsx b/apps/web/src/features/auth/pages/ResetPasswordPage.tsx
index b246fb97e..f3e4eb7b4 100644
--- a/apps/web/src/features/auth/pages/ResetPasswordPage.tsx
+++ b/apps/web/src/features/auth/pages/ResetPasswordPage.tsx
@@ -121,7 +121,7 @@ export function ResetPasswordPage() {
           role="alert"
           aria-live="assertive"
         >
-          <div className="bg-kodo-red/10 border border-kodo-red text-kodo-red px-4 py-3 rounded">
+          <div className="bg-kodo-red/10 border border-kodo-red text-kodo-red px-4 py-4 rounded">
             <p className="font-medium">Lien invalide</p>
             <p className="text-sm mt-1">
               Le lien de réinitialisation est invalide ou a expiré. Veuillez
@@ -143,7 +143,7 @@ export function ResetPasswordPage() {
       >
         <div className="text-center space-y-4" role="status" aria-live="polite">
           <div
-            className="bg-kodo-lime/10 border border-kodo-lime text-kodo-lime px-4 py-3 rounded"
+            className="bg-kodo-lime/10 border border-kodo-lime text-kodo-lime px-4 py-4 rounded"
             role="alert"
           >
             <p className="font-medium">Succès !</p>
diff --git a/apps/web/src/features/auth/pages/SessionsPage.tsx b/apps/web/src/features/auth/pages/SessionsPage.tsx
index b9b89902d..c565ebd05 100644
--- a/apps/web/src/features/auth/pages/SessionsPage.tsx
+++ b/apps/web/src/features/auth/pages/SessionsPage.tsx
@@ -182,7 +182,7 @@ export function SessionsPage() {
 
       {/* Message d'erreur */}
       {error && (
-        <div className="bg-destructive/10 text-destructive px-4 py-3 rounded-md">
+        <div className="bg-destructive/10 text-destructive px-4 py-4 rounded-md">
           {error}
         </div>
       )}
diff --git a/apps/web/src/features/auth/pages/VerifyEmailPage.tsx b/apps/web/src/features/auth/pages/VerifyEmailPage.tsx
index b95471160..21d089cf2 100644
--- a/apps/web/src/features/auth/pages/VerifyEmailPage.tsx
+++ b/apps/web/src/features/auth/pages/VerifyEmailPage.tsx
@@ -170,7 +170,7 @@ export function VerifyEmailPage() {
       >
         <div className="text-center space-y-4" role="status" aria-live="polite">
           <div
-            className="bg-kodo-lime/10 border border-kodo-lime text-kodo-lime px-4 py-3 rounded"
+            className="bg-kodo-lime/10 border border-kodo-lime text-kodo-lime px-4 py-4 rounded"
             role="alert"
           >
             <p className="font-medium">Succès !</p>
@@ -193,7 +193,7 @@ export function VerifyEmailPage() {
     >
       <div className="text-center space-y-4">
         <div
-          className="bg-kodo-red/10 border border-kodo-red text-kodo-red px-4 py-3 rounded"
+          className="bg-kodo-red/10 border border-kodo-red text-kodo-red px-4 py-4 rounded"
           role="alert"
           aria-live="assertive"
         >
diff --git a/apps/web/src/features/chat/components/ChatInput.tsx b/apps/web/src/features/chat/components/ChatInput.tsx
index 21a86533a..50afcb6d8 100644
--- a/apps/web/src/features/chat/components/ChatInput.tsx
+++ b/apps/web/src/features/chat/components/ChatInput.tsx
@@ -131,7 +131,7 @@ export const ChatInput: React.FC = () => {
 
       {/* Attachments Preview */}
       {attachments.length > 0 && (
-        <div className="absolute bottom-full left-0 right-0 p-3 bg-kodo-void/90 backdrop-blur-xl border-t border-white/10 flex gap-2 overflow-x-auto">
+        <div className="absolute bottom-full left-0 right-0 p-4 bg-kodo-void/90 backdrop-blur-xl border-t border-white/10 flex gap-2 overflow-x-auto">
           {attachments.map((att, i) => (
             <div
               key={i}
diff --git a/apps/web/src/features/chat/components/ChatInterface.tsx b/apps/web/src/features/chat/components/ChatInterface.tsx
index 175e82a64..52fde0c92 100644
--- a/apps/web/src/features/chat/components/ChatInterface.tsx
+++ b/apps/web/src/features/chat/components/ChatInterface.tsx
@@ -166,9 +166,9 @@ export function ChatInterface({
     <div className="flex flex-col h-full">
       {/* En-tête du chat - Card Header removed custom wrapper if CardHeader handles padding */}
       <Card className="rounded-b-none border-b">
-        <CardHeader className="py-3">
+        <CardHeader className="py-4">
           <div className="flex items-center justify-between">
-            <div className="flex items-center space-x-3">
+            <div className="flex items-center space-x-4">
               <div className="flex items-center space-x-2">
                 <MessageCircle className="h-5 w-5" />
                 <CardTitle className="text-lg">
@@ -230,7 +230,7 @@ export function ChatInterface({
             ) : (
               <div className="space-y-4">
                 {messages.map((message, index) => (
-                  <div key={message.id || index} className="flex space-x-3">
+                  <div key={message.id || index} className="flex space-x-4">
                     <Avatar
                       src={`/avatars/${message.sender_id}.jpg`}
                       fallback={(message.sender_id || '?')
diff --git a/apps/web/src/features/chat/components/ChatMessage.tsx b/apps/web/src/features/chat/components/ChatMessage.tsx
index 4b1405f98..5886671f7 100644
--- a/apps/web/src/features/chat/components/ChatMessage.tsx
+++ b/apps/web/src/features/chat/components/ChatMessage.tsx
@@ -92,7 +92,7 @@ export const ChatMessageComponent: React.FC<ChatMessageProps> = ({
                       href={att.file_url}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="flex items-center gap-3 p-3 hover:bg-white/5 transition-colors"
+                      className="flex items-center gap-4 p-4 hover:bg-white/5 transition-colors"
                     >
                       <div className="w-8 h-8 rounded bg-white/10 flex items-center justify-center">
                         <MoreHorizontal size={16} className="text-kodo-steel" />
diff --git a/apps/web/src/features/chat/components/ChatMessages.tsx b/apps/web/src/features/chat/components/ChatMessages.tsx
index d98fd5d4b..8c0f24eee 100644
--- a/apps/web/src/features/chat/components/ChatMessages.tsx
+++ b/apps/web/src/features/chat/components/ChatMessages.tsx
@@ -102,7 +102,7 @@ export function ChatMessages() {
                   <Card
                     className={`${isOwn ? 'bg-primary text-primary-foreground' : ''}`}
                   >
-                    <CardContent className="p-3">
+                    <CardContent className="p-4">
                       <p
                         className="text-sm"
                         dangerouslySetInnerHTML={{
diff --git a/apps/web/src/features/chat/components/ChatRoom.tsx b/apps/web/src/features/chat/components/ChatRoom.tsx
index 315e5269f..6db3d2438 100644
--- a/apps/web/src/features/chat/components/ChatRoom.tsx
+++ b/apps/web/src/features/chat/components/ChatRoom.tsx
@@ -111,7 +111,7 @@ export const ChatRoom: React.FC<ChatRoomProps> = ({ conversationId }) => {
       <div className="flex-1 overflow-y-auto custom-scrollbar p-6 space-y-4 scroll-smooth">
         {/* Welcome Message for Empty Room */}
         {currentMessages.length === 0 && (
-          <div className="flex flex-col items-center justify-center h-[50vh] text-center space-y-3 opacity-60">
+          <div className="flex flex-col items-center justify-center h-[50vh] text-center space-y-4 opacity-60">
             <div className="w-12 h-12 rounded-xl bg-kodo-steel/10 flex items-center justify-center border border-kodo-steel/20">
               <MessageSquare className="w-6 h-6 text-kodo-steel" />
             </div>
diff --git a/apps/web/src/features/chat/components/ChatSidebar.tsx b/apps/web/src/features/chat/components/ChatSidebar.tsx
index 344a0725b..7088520f1 100644
--- a/apps/web/src/features/chat/components/ChatSidebar.tsx
+++ b/apps/web/src/features/chat/components/ChatSidebar.tsx
@@ -220,13 +220,13 @@ const ConversationItem: React.FC<ConversationItemProps> = ({
       <div
         onClick={() => onSelect(conversation.id)}
         className={cn(
-          'group relative flex items-center justify-between p-3 rounded-xl cursor-pointer transition-all duration-300 border border-transparent',
+          'group relative flex items-center justify-between p-4 rounded-xl cursor-pointer transition-all duration-300 border border-transparent',
           isSelected
             ? 'bg-kodo-cyan/10 border-kodo-cyan/30 shadow-[0_0_15px_rgba(102,252,241,0.1)]'
             : 'hover:bg-white/5 hover:border-white/5',
         )}
       >
-        <div className="flex items-center gap-3 min-w-0">
+        <div className="flex items-center gap-4 min-w-0">
           <div
             className={cn(
               'w-8 h-8 rounded-lg flex items-center justify-center transition-colors',
@@ -419,7 +419,7 @@ export const ChatSidebar: React.FC = () => {
         </div>
       </div>
 
-      <div className="flex-1 overflow-y-auto custom-scrollbar p-3 space-y-1">
+      <div className="flex-1 overflow-y-auto custom-scrollbar p-4 space-y-1">
         {conversations.length === 0 ? (
           <div className="text-kodo-secondary/50 text-sm p-4 text-center italic border border-dashed border-white/5 rounded-xl m-2">
             No active frequencies detected.
diff --git a/apps/web/src/features/chat/components/VirtualizedChatMessages.tsx b/apps/web/src/features/chat/components/VirtualizedChatMessages.tsx
index b72e0e0d4..48763e028 100644
--- a/apps/web/src/features/chat/components/VirtualizedChatMessages.tsx
+++ b/apps/web/src/features/chat/components/VirtualizedChatMessages.tsx
@@ -46,13 +46,13 @@ export function VirtualizedChatMessages({
     (message: Message, index: number) => (
       <div
         key={message.id || index}
-        className={`p-3 border-b border-kodo-steel hover:bg-kodo-void cursor-pointer transition-colors ${
+        className={`p-4 border-b border-kodo-steel hover:bg-kodo-void cursor-pointer transition-colors ${
           onMessageClick ? 'hover:shadow-sm' : ''
         }`}
         onClick={() => onMessageClick?.(message)}
         style={{ minHeight: MESSAGE_HEIGHT }}
       >
-        <div className="flex items-start space-x-3">
+        <div className="flex items-start space-x-4">
           {/* Avatar */}
           <div className="flex-shrink-0">
             <div className="w-8 h-8 bg-kodo-cyan rounded-full flex items-center justify-center text-white text-sm font-medium">
diff --git a/apps/web/src/features/dashboard/pages/DashboardPage.tsx b/apps/web/src/features/dashboard/pages/DashboardPage.tsx
index 463386e11..327c24715 100644
--- a/apps/web/src/features/dashboard/pages/DashboardPage.tsx
+++ b/apps/web/src/features/dashboard/pages/DashboardPage.tsx
@@ -144,7 +144,7 @@ function DashboardPage() {
             {isLoading ? (
               <div className="space-y-2">
                 {[...Array(3)].map((_, i) => (
-                  <div key={i} className="flex items-center space-x-3">
+                  <div key={i} className="flex items-center space-x-4">
                     <div className="w-10 h-10 bg-muted rounded"></div>
                     <div className="flex-1 space-y-1">
                       <div className="h-4 bg-muted rounded w-3/4"></div>
@@ -154,9 +154,9 @@ function DashboardPage() {
                 ))}
               </div>
             ) : (
-              <div className="space-y-3">
+              <div className="space-y-4">
                 {items.slice(0, 3).map((item) => (
-                  <div key={item.id} className="flex items-center space-x-3">
+                  <div key={item.id} className="flex items-center space-x-4">
                     <div className="w-10 h-10 bg-muted rounded flex items-center justify-center">
                       <Music className="h-4 w-4 text-muted-foreground" />
                     </div>
diff --git a/apps/web/src/features/error/pages/ServerErrorPage.tsx b/apps/web/src/features/error/pages/ServerErrorPage.tsx
index e756e532b..b08ee98a2 100644
--- a/apps/web/src/features/error/pages/ServerErrorPage.tsx
+++ b/apps/web/src/features/error/pages/ServerErrorPage.tsx
@@ -61,7 +61,7 @@ function ServerErrorPage() {
 
             {/* Status Info */}
             <div className="bg-kodo-steel/10 dark:bg-kodo-steel/20 border border-kodo-steel dark:border-kodo-steel rounded-lg p-4">
-              <div className="flex items-start gap-3 text-left">
+              <div className="flex items-start gap-4 text-left">
                 <Clock className="h-5 w-5 text-kodo-steel dark:text-kodo-steel mt-0.5" />
                 <div>
                   <p className="text-sm font-medium text-kodo-steel dark:text-kodo-steel">
@@ -125,7 +125,7 @@ function ServerErrorPage() {
               <summary className="text-sm font-medium text-kodo-text-main dark:text-kodo-text-main cursor-pointer hover:text-kodo-text-main dark:hover:text-kodo-text-main">
                 Détails techniques
               </summary>
-              <div className="mt-2 p-3 bg-kodo-void dark:bg-kodo-graphite rounded text-xs font-mono text-kodo-content-dim dark:text-kodo-content-dim">
+              <div className="mt-2 p-4 bg-kodo-void dark:bg-kodo-graphite rounded text-xs font-mono text-kodo-content-dim dark:text-kodo-content-dim">
                 <p>Code d'erreur: 500 Internal Server Error</p>
                 <p>Timestamp: {new Date().toISOString()}</p>
                 <p>User Agent: {navigator.userAgent}</p>
diff --git a/apps/web/src/features/library/components/LibraryManager.tsx b/apps/web/src/features/library/components/LibraryManager.tsx
index f68f5a004..912aee019 100644
--- a/apps/web/src/features/library/components/LibraryManager.tsx
+++ b/apps/web/src/features/library/components/LibraryManager.tsx
@@ -192,7 +192,7 @@ export function LibraryManager({ onTrackSelect }: LibraryManagerProps) {
               <select
                 value={filterType}
                 onChange={(e) => setFilterType(e.target.value)}
-                className="px-3 py-2 border rounded-md"
+                className="px-4 py-2 border rounded-md"
               >
                 <option value="all">All</option>
                 <option value="artist">By Artist</option>
diff --git a/apps/web/src/features/marketplace/components/Cart.tsx b/apps/web/src/features/marketplace/components/Cart.tsx
index 023c40815..c589587b7 100644
--- a/apps/web/src/features/marketplace/components/Cart.tsx
+++ b/apps/web/src/features/marketplace/components/Cart.tsx
@@ -130,7 +130,7 @@ export function Cart({ isOpen, onClose }: CartProps) {
               {items.map((item) => (
                 <div
                   key={item.product.id}
-                  className="flex items-center justify-between p-3 border rounded-lg"
+                  className="flex items-center justify-between p-4 border rounded-lg"
                 >
                   <div className="flex-1">
                     <h4 className="font-medium">{item.product.title}</h4>
diff --git a/apps/web/src/features/player/components/MiniPlayer.tsx b/apps/web/src/features/player/components/MiniPlayer.tsx
index fb8914a58..c2cd8cfc8 100644
--- a/apps/web/src/features/player/components/MiniPlayer.tsx
+++ b/apps/web/src/features/player/components/MiniPlayer.tsx
@@ -57,7 +57,7 @@ export function MiniPlayer({
       aria-label="Mini lecteur audio"
     >
       <div className="container mx-auto px-4 py-2">
-        <div className="flex items-center gap-3">
+        <div className="flex items-center gap-4">
           {/* Track Info - Compact */}
           <div className="flex-1 min-w-0">
             <TrackInfo
diff --git a/apps/web/src/features/player/components/PlaybackSpeedControl.tsx b/apps/web/src/features/player/components/PlaybackSpeedControl.tsx
index 46cb215c0..0e658ae6a 100644
--- a/apps/web/src/features/player/components/PlaybackSpeedControl.tsx
+++ b/apps/web/src/features/player/components/PlaybackSpeedControl.tsx
@@ -86,7 +86,7 @@ export function PlaybackSpeedControl({
         onClick={() => !disabled && setIsOpen(!isOpen)}
         disabled={disabled}
         className={cn(
-          'flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg',
+          'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg',
           'bg-white dark:bg-kodo-graphite border border-kodo-steel dark:border-kodo-steel',
           'text-kodo-text-main dark:text-kodo-text-main',
           'hover:bg-kodo-void dark:hover:bg-kodo-steel',
diff --git a/apps/web/src/features/player/components/QualitySelector.tsx b/apps/web/src/features/player/components/QualitySelector.tsx
index 61328bcbe..7ee7391e4 100644
--- a/apps/web/src/features/player/components/QualitySelector.tsx
+++ b/apps/web/src/features/player/components/QualitySelector.tsx
@@ -82,7 +82,7 @@ export function QualitySelector({
         onClick={() => !disabled && setIsOpen(!isOpen)}
         disabled={disabled}
         className={cn(
-          'flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg',
+          'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg',
           'bg-white dark:bg-kodo-graphite border border-kodo-steel dark:border-kodo-steel',
           'text-kodo-text-main dark:text-kodo-text-main',
           'hover:bg-kodo-void dark:hover:bg-kodo-steel',
diff --git a/apps/web/src/features/player/components/TrackInfo.tsx b/apps/web/src/features/player/components/TrackInfo.tsx
index d87dad21d..8f730bc7f 100644
--- a/apps/web/src/features/player/components/TrackInfo.tsx
+++ b/apps/web/src/features/player/components/TrackInfo.tsx
@@ -26,7 +26,7 @@ export function TrackInfo({
     return (
       <div
         className={cn(
-          'flex items-center gap-3 text-kodo-content-dim dark:text-kodo-content-dim',
+          'flex items-center gap-4 text-kodo-content-dim dark:text-kodo-content-dim',
           className,
         )}
       >
@@ -43,7 +43,7 @@ export function TrackInfo({
   };
 
   return (
-    <div className={cn('flex items-center gap-3', className)}>
+    <div className={cn('flex items-center gap-4', className)}>
       {/* Cover */}
       {showCover && (
         <div className="flex-shrink-0">
diff --git a/apps/web/src/features/playlists/components/CollaboratorList.tsx b/apps/web/src/features/playlists/components/CollaboratorList.tsx
index c0bf03243..6f888f8f3 100644
--- a/apps/web/src/features/playlists/components/CollaboratorList.tsx
+++ b/apps/web/src/features/playlists/components/CollaboratorList.tsx
@@ -93,9 +93,9 @@ export function CollaboratorList({
         return (
           <div
             key={collaborator.id}
-            className="flex items-center justify-between p-3 border rounded-lg hover:bg-accent/50 transition-colors"
+            className="flex items-center justify-between p-4 border rounded-lg hover:bg-accent/50 transition-colors"
           >
-            <div className="flex items-center space-x-3 flex-1 min-w-0">
+            <div className="flex items-center space-x-4 flex-1 min-w-0">
               <Avatar
                 src={collaborator.user?.avatar_url}
                 alt={collaborator.user?.username || 'User'}
diff --git a/apps/web/src/features/playlists/components/ImportPlaylistButton.tsx b/apps/web/src/features/playlists/components/ImportPlaylistButton.tsx
index c1c552ed9..cbf20420d 100644
--- a/apps/web/src/features/playlists/components/ImportPlaylistButton.tsx
+++ b/apps/web/src/features/playlists/components/ImportPlaylistButton.tsx
@@ -252,7 +252,7 @@ export const ImportPlaylistButton: React.FC<ImportPlaylistButtonProps> = ({
               placeholder="Description de la playlist (optionnel)"
               disabled={isImporting}
               rows={3}
-              className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+              className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-4 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
             />
           </div>
 
diff --git a/apps/web/src/features/playlists/components/PlaylistActions.tsx b/apps/web/src/features/playlists/components/PlaylistActions.tsx
index 5fa864be5..839e33db1 100644
--- a/apps/web/src/features/playlists/components/PlaylistActions.tsx
+++ b/apps/web/src/features/playlists/components/PlaylistActions.tsx
@@ -192,7 +192,7 @@ export function PlaylistActions({
               onChange={(e) =>
                 setEditForm({ ...editForm, title: e.target.value })
               }
-              className="w-full px-3 py-2 border rounded-md"
+              className="w-full px-4 py-2 border rounded-md"
               placeholder="Titre de la playlist"
               aria-required="true"
             />
@@ -210,7 +210,7 @@ export function PlaylistActions({
               onChange={(e) =>
                 setEditForm({ ...editForm, description: e.target.value })
               }
-              className="w-full px-3 py-2 border rounded-md"
+              className="w-full px-4 py-2 border rounded-md"
               rows={3}
               placeholder="Description de la playlist"
             />
@@ -229,7 +229,7 @@ export function PlaylistActions({
               onChange={(e) =>
                 setEditForm({ ...editForm, cover_url: e.target.value })
               }
-              className="w-full px-3 py-2 border rounded-md"
+              className="w-full px-4 py-2 border rounded-md"
               placeholder="https://example.com/cover.jpg"
             />
           </div>
diff --git a/apps/web/src/features/playlists/components/PlaylistBatchActions.tsx b/apps/web/src/features/playlists/components/PlaylistBatchActions.tsx
index da16dab7c..00c2c88ff 100644
--- a/apps/web/src/features/playlists/components/PlaylistBatchActions.tsx
+++ b/apps/web/src/features/playlists/components/PlaylistBatchActions.tsx
@@ -196,7 +196,7 @@ export function PlaylistBatchActions({
   return (
     <div
       className={cn(
-        'flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4',
+        'flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 sm:gap-4',
         'p-4 bg-kodo-steel/10 dark:bg-kodo-steel/20 border border-kodo-steel dark:border-kodo-steel rounded-lg',
         'sticky top-0 z-10 backdrop-blur-sm',
         className,
@@ -204,7 +204,7 @@ export function PlaylistBatchActions({
       role="region"
       aria-label={`Actions batch pour ${selectedCount} playlist${selectedCount > 1 ? 's' : ''} sélectionnée${selectedCount > 1 ? 's' : ''}`}
     >
-      <div className="flex items-center gap-3">
+      <div className="flex items-center gap-4">
         <span className="text-sm font-medium text-kodo-cyan dark:text-kodo-cyan">
           {selectedCount} playlist{selectedCount > 1 ? 's' : ''} sélectionnée
           {selectedCount > 1 ? 's' : ''}
@@ -308,7 +308,7 @@ export function PlaylistBatchActions({
             playlist{selectedCount > 1 ? 's' : ''}. Cette action est
             irréversible.
           </p>
-          <div className="p-3 bg-muted rounded-md max-h-48 overflow-y-auto">
+          <div className="p-4 bg-muted rounded-md max-h-48 overflow-y-auto">
             <p className="text-sm font-medium mb-2">Playlists à supprimer :</p>
             <ul className="text-sm text-muted-foreground space-y-1">
               {selectedPlaylists.map((playlist) => (
diff --git a/apps/web/src/features/playlists/components/PlaylistCard.tsx b/apps/web/src/features/playlists/components/PlaylistCard.tsx
index 5c2c63966..c17e7d8bc 100644
--- a/apps/web/src/features/playlists/components/PlaylistCard.tsx
+++ b/apps/web/src/features/playlists/components/PlaylistCard.tsx
@@ -135,7 +135,7 @@ export function PlaylistCard({
         </div>
 
         {/* Playlist Info - Mobile optimized */}
-        <div className="p-3 sm:p-4">
+        <div className="p-4 sm:p-4">
           <h3
             className="font-semibold text-base sm:text-lg truncate mb-1"
             id={`playlist-title-${playlist.id}`}
diff --git a/apps/web/src/features/playlists/components/PlaylistCardSkeleton.tsx b/apps/web/src/features/playlists/components/PlaylistCardSkeleton.tsx
index 267abaf56..1b719677a 100644
--- a/apps/web/src/features/playlists/components/PlaylistCardSkeleton.tsx
+++ b/apps/web/src/features/playlists/components/PlaylistCardSkeleton.tsx
@@ -20,7 +20,7 @@ export function PlaylistCardSkeleton({
     return (
       <Card className={cn('cursor-pointer', className)}>
         <CardContent className="p-0">
-          <div className="flex flex-row gap-4 p-3 sm:p-4">
+          <div className="flex flex-row gap-4 p-4 sm:p-4">
             {/* Cover Image - Square */}
             <div className="flex-shrink-0">
               <Skeleton
@@ -58,7 +58,7 @@ export function PlaylistCardSkeleton({
         </div>
 
         {/* Playlist Info */}
-        <div className="p-3 sm:p-4 space-y-2">
+        <div className="p-4 sm:p-4 space-y-2">
           <Skeleton variant="text" height={20} width="80%" />
           <Skeleton variant="text" height={16} width="100%" />
           <Skeleton variant="text" height={16} width="60%" />
diff --git a/apps/web/src/features/playlists/components/PlaylistHeader.tsx b/apps/web/src/features/playlists/components/PlaylistHeader.tsx
index 53f82ce3a..224e45349 100644
--- a/apps/web/src/features/playlists/components/PlaylistHeader.tsx
+++ b/apps/web/src/features/playlists/components/PlaylistHeader.tsx
@@ -53,7 +53,7 @@ export function PlaylistHeader({ playlist, className }: PlaylistHeaderProps) {
             <div className="absolute top-3 right-3">
               {playlist.is_public ? (
                 <div
-                  className="bg-kodo-lime/100/90 text-white px-3 py-1.5 rounded-full text-sm flex items-center gap-2"
+                  className="bg-kodo-lime/100/90 text-white px-4 py-1.5 rounded-full text-sm flex items-center gap-2"
                   aria-label="Playlist publique"
                 >
                   <Users className="w-4 h-4" aria-hidden="true" />
@@ -61,7 +61,7 @@ export function PlaylistHeader({ playlist, className }: PlaylistHeaderProps) {
                 </div>
               ) : (
                 <div
-                  className="bg-kodo-steel/90 text-white px-3 py-1.5 rounded-full text-sm flex items-center gap-2"
+                  className="bg-kodo-steel/90 text-white px-4 py-1.5 rounded-full text-sm flex items-center gap-2"
                   aria-label="Playlist privée"
                 >
                   <Lock className="w-4 h-4" aria-hidden="true" />
@@ -72,7 +72,7 @@ export function PlaylistHeader({ playlist, className }: PlaylistHeaderProps) {
           </div>
 
           {/* Playlist Info - Mobile optimized */}
-          <div className="flex-1 space-y-3 sm:space-y-4">
+          <div className="flex-1 space-y-4 sm:space-y-4">
             <div className="flex items-start justify-between gap-4">
               <div className="flex-1">
                 <h1
@@ -98,7 +98,7 @@ export function PlaylistHeader({ playlist, className }: PlaylistHeaderProps) {
             </div>
 
             <div
-              className="flex flex-wrap gap-3 sm:gap-4 text-xs sm:text-sm text-muted-foreground"
+              className="flex flex-wrap gap-4 sm:gap-4 text-xs sm:text-sm text-muted-foreground"
               aria-labelledby="playlist-main-title"
             >
               <div className="flex items-center gap-2">
diff --git a/apps/web/src/features/playlists/components/PlaylistHeaderSkeleton.tsx b/apps/web/src/features/playlists/components/PlaylistHeaderSkeleton.tsx
index 0ff691e4e..27e66f7b2 100644
--- a/apps/web/src/features/playlists/components/PlaylistHeaderSkeleton.tsx
+++ b/apps/web/src/features/playlists/components/PlaylistHeaderSkeleton.tsx
@@ -31,7 +31,7 @@ export function PlaylistHeaderSkeleton({
           </div>
 
           {/* Playlist Info */}
-          <div className="flex-1 space-y-3 sm:space-y-4">
+          <div className="flex-1 space-y-4 sm:space-y-4">
             <div className="space-y-2">
               <Skeleton
                 variant="text"
@@ -42,7 +42,7 @@ export function PlaylistHeaderSkeleton({
               <Skeleton variant="text" height={20} width="80%" />
             </div>
 
-            <div className="flex flex-wrap gap-3 sm:gap-4">
+            <div className="flex flex-wrap gap-4 sm:gap-4">
               <Skeleton variant="text" height={16} width={100} />
               <Skeleton variant="text" height={16} width={120} />
               <Skeleton variant="text" height={16} width={150} />
diff --git a/apps/web/src/features/playlists/components/PlaylistList.tsx b/apps/web/src/features/playlists/components/PlaylistList.tsx
index 7ba0cbbf5..099917771 100644
--- a/apps/web/src/features/playlists/components/PlaylistList.tsx
+++ b/apps/web/src/features/playlists/components/PlaylistList.tsx
@@ -303,7 +303,7 @@ export function PlaylistList({
               type="button"
               onClick={() => setCurrentView('list')}
               className={cn(
-                'flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-all duration-200',
+                'flex items-center gap-2 px-4 py-1.5 rounded-md text-sm font-medium transition-all duration-200',
                 'hover:bg-kodo-slate dark:hover:bg-kodo-steel',
                 'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
                 'touch-manipulation', // Optimize touch response
@@ -321,7 +321,7 @@ export function PlaylistList({
               type="button"
               onClick={() => setCurrentView('grid')}
               className={cn(
-                'flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-all duration-200',
+                'flex items-center gap-2 px-4 py-1.5 rounded-md text-sm font-medium transition-all duration-200',
                 'hover:bg-kodo-slate dark:hover:bg-kodo-steel',
                 'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
                 'touch-manipulation', // Optimize touch response
@@ -343,7 +343,7 @@ export function PlaylistList({
       <div
         className={cn(
           currentView === 'grid'
-            ? 'grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4'
+            ? 'grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-4'
             : 'flex flex-col gap-2 sm:gap-3',
         )}
         role="list"
diff --git a/apps/web/src/features/playlists/components/PlaylistListSkeleton.tsx b/apps/web/src/features/playlists/components/PlaylistListSkeleton.tsx
index 608cb5780..98fddc5ee 100644
--- a/apps/web/src/features/playlists/components/PlaylistListSkeleton.tsx
+++ b/apps/web/src/features/playlists/components/PlaylistListSkeleton.tsx
@@ -21,7 +21,7 @@ export function PlaylistListSkeleton({
     <div
       className={cn(
         view === 'grid'
-          ? 'grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4'
+          ? 'grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-4'
           : 'flex flex-col gap-2 sm:gap-3',
         className,
       )}
diff --git a/apps/web/src/features/playlists/components/PlaylistSearch.tsx b/apps/web/src/features/playlists/components/PlaylistSearch.tsx
index 6a41de3e2..3da07c00c 100644
--- a/apps/web/src/features/playlists/components/PlaylistSearch.tsx
+++ b/apps/web/src/features/playlists/components/PlaylistSearch.tsx
@@ -211,7 +211,7 @@ export const PlaylistSearch: React.FC<PlaylistSearchProps> = ({
                 </label>
                 <select
                   id="filter-is-public"
-                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                  className="w-full rounded-md border border-input bg-background px-4 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                   value={
                     filters.is_public === undefined
                       ? ''
diff --git a/apps/web/src/features/playlists/pages/PlaylistListPage.tsx b/apps/web/src/features/playlists/pages/PlaylistListPage.tsx
index 77c4479d3..333d5faf8 100644
--- a/apps/web/src/features/playlists/pages/PlaylistListPage.tsx
+++ b/apps/web/src/features/playlists/pages/PlaylistListPage.tsx
@@ -59,7 +59,7 @@ export function PlaylistListPage() {
 
   return (
     <div className="space-y-4 sm:space-y-6 playlist-container">
-      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-0">
+      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 sm:gap-0">
         <div>
           <h1 className="text-3xl font-bold tracking-tight">
             Playlists
diff --git a/apps/web/src/features/profile/pages/UserProfilePage.tsx b/apps/web/src/features/profile/pages/UserProfilePage.tsx
index d3a5df4d9..7ec3df311 100644
--- a/apps/web/src/features/profile/pages/UserProfilePage.tsx
+++ b/apps/web/src/features/profile/pages/UserProfilePage.tsx
@@ -242,7 +242,7 @@ export function UserProfilePage() {
                   <div className="space-y-4">
                     {postsData.posts.map((post) => (
                       <Card key={post.id} className="p-4">
-                        <div className="flex items-start gap-3">
+                        <div className="flex items-start gap-4">
                           <Avatar
                             src={post.author.avatar}
                             alt={post.author.name}
diff --git a/apps/web/src/features/tracks/components/CommentThread.tsx b/apps/web/src/features/tracks/components/CommentThread.tsx
index bf4268fd4..82387010e 100644
--- a/apps/web/src/features/tracks/components/CommentThread.tsx
+++ b/apps/web/src/features/tracks/components/CommentThread.tsx
@@ -334,9 +334,9 @@ export function CommentThread({
 
   return (
     <>
-      <div className={cn('space-y-3', className)}>
+      <div className={cn('space-y-4', className)}>
         {/* Main Comment */}
-        <div className="flex gap-3">
+        <div className="flex gap-4">
           <Avatar
             src={comment.user?.avatar}
             fallback={comment.user?.username?.charAt(0).toUpperCase() || 'U'}
@@ -508,7 +508,7 @@ export function CommentThread({
 
             {/* Replies */}
             {showReplies && (
-              <div className="space-y-3 pt-2 pl-4 border-l-2 border-muted">
+              <div className="space-y-4 pt-2 pl-4 border-l-2 border-muted">
                 {isLoadingReplies ? (
                   <div className="flex items-center justify-center py-4">
                     <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
diff --git a/apps/web/src/features/tracks/components/TrackCard.tsx b/apps/web/src/features/tracks/components/TrackCard.tsx
index 265a418ff..41652940b 100644
--- a/apps/web/src/features/tracks/components/TrackCard.tsx
+++ b/apps/web/src/features/tracks/components/TrackCard.tsx
@@ -114,7 +114,7 @@ export function TrackCard({
                 }
               }}
               className={cn(
-                'rounded-full bg-primary text-primary-foreground p-3 shadow-lg focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2',
+                'rounded-full bg-primary text-primary-foreground p-4 shadow-lg focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2',
                 isPlaying && 'animate-pulse',
               )}
             >
@@ -172,7 +172,7 @@ export function TrackCard({
         )}
       </div>
 
-      <div className="p-3 space-y-1">
+      <div className="p-4 space-y-1">
         <h3 className="font-medium leading-none truncate">{track.title}</h3>
         {track.artist && (
           <p className="text-xs text-muted-foreground truncate">
diff --git a/apps/web/src/features/tracks/components/TrackFilters.tsx b/apps/web/src/features/tracks/components/TrackFilters.tsx
index 4afce8d21..651435d45 100644
--- a/apps/web/src/features/tracks/components/TrackFilters.tsx
+++ b/apps/web/src/features/tracks/components/TrackFilters.tsx
@@ -188,7 +188,7 @@ export function TrackFilters({
                 value={localFilters.genre || ''}
                 onChange={(e) => handleFilterChange('genre', e.target.value)}
                 className={cn(
-                  'w-full px-3 py-2 border border-kodo-steel dark:border-kodo-steel',
+                  'w-full px-4 py-2 border border-kodo-steel dark:border-kodo-steel',
                   'rounded-md bg-kodo-graphite dark:bg-kodo-ink',
                   'text-kodo-text-main dark:text-kodo-text-main',
                   'focus:outline-none focus:ring-2 focus:ring-kodo-steel focus:border-transparent',
@@ -221,7 +221,7 @@ export function TrackFilters({
                   value={localFilters.artist || ''}
                   onChange={(e) => handleFilterChange('artist', e.target.value)}
                   className={cn(
-                    'w-full px-3 py-2 border border-kodo-steel dark:border-kodo-steel',
+                    'w-full px-4 py-2 border border-kodo-steel dark:border-kodo-steel',
                     'rounded-md bg-kodo-graphite dark:bg-kodo-ink',
                     'text-kodo-text-main dark:text-kodo-text-main',
                     'focus:outline-none focus:ring-2 focus:ring-kodo-steel focus:border-transparent',
@@ -243,7 +243,7 @@ export function TrackFilters({
                   value={localFilters.artist || ''}
                   onChange={(e) => handleFilterChange('artist', e.target.value)}
                   className={cn(
-                    'w-full px-3 py-2 border border-kodo-steel dark:border-kodo-steel',
+                    'w-full px-4 py-2 border border-kodo-steel dark:border-kodo-steel',
                     'rounded-md bg-kodo-graphite dark:bg-kodo-ink',
                     'text-kodo-text-main dark:text-kodo-text-main placeholder-kodo-content-dim dark:placeholder-kodo-content-dim',
                     'focus:outline-none focus:ring-2 focus:ring-kodo-steel focus:border-transparent',
@@ -275,7 +275,7 @@ export function TrackFilters({
                     )
                   }
                   className={cn(
-                    'w-full px-3 py-2 border border-kodo-steel dark:border-kodo-steel',
+                    'w-full px-4 py-2 border border-kodo-steel dark:border-kodo-steel',
                     'rounded-md bg-kodo-graphite dark:bg-kodo-ink',
                     'text-kodo-text-main dark:text-kodo-text-main',
                     'focus:outline-none focus:ring-2 focus:ring-kodo-steel focus:border-transparent',
@@ -304,7 +304,7 @@ export function TrackFilters({
                   min="1900"
                   max={new Date().getFullYear()}
                   className={cn(
-                    'w-full px-3 py-2 border border-kodo-steel dark:border-kodo-steel',
+                    'w-full px-4 py-2 border border-kodo-steel dark:border-kodo-steel',
                     'rounded-md bg-kodo-graphite dark:bg-kodo-ink',
                     'text-kodo-text-main dark:text-kodo-text-main placeholder-kodo-content-dim dark:placeholder-kodo-content-dim',
                     'focus:outline-none focus:ring-2 focus:ring-kodo-steel focus:border-transparent',
@@ -340,7 +340,7 @@ export function TrackFilters({
                   min="0"
                   step="0.1"
                   className={cn(
-                    'w-full px-3 py-2 border border-kodo-steel dark:border-kodo-steel',
+                    'w-full px-4 py-2 border border-kodo-steel dark:border-kodo-steel',
                     'rounded-md bg-kodo-graphite dark:bg-kodo-ink',
                     'text-kodo-text-main dark:text-kodo-text-main placeholder-kodo-content-dim dark:placeholder-kodo-content-dim',
                     'focus:outline-none focus:ring-2 focus:ring-kodo-steel focus:border-transparent',
@@ -361,7 +361,7 @@ export function TrackFilters({
                   min="0"
                   step="0.1"
                   className={cn(
-                    'w-full px-3 py-2 border border-kodo-steel dark:border-kodo-steel',
+                    'w-full px-4 py-2 border border-kodo-steel dark:border-kodo-steel',
                     'rounded-md bg-kodo-graphite dark:bg-kodo-ink',
                     'text-kodo-text-main dark:text-kodo-text-main placeholder-kodo-content-dim dark:placeholder-kodo-content-dim',
                     'focus:outline-none focus:ring-2 focus:ring-kodo-steel focus:border-transparent',
diff --git a/apps/web/src/features/tracks/components/TrackGrid.test.tsx b/apps/web/src/features/tracks/components/TrackGrid.test.tsx
index 32d6269fa..68e6e2414 100644
--- a/apps/web/src/features/tracks/components/TrackGrid.test.tsx
+++ b/apps/web/src/features/tracks/components/TrackGrid.test.tsx
@@ -192,7 +192,7 @@ describe('TrackGrid', () => {
       <TrackGrid tracks={mockTracks} gap="md" />,
     );
     const gridMd = containerMd.querySelector('[role="grid"]');
-    expect(gridMd).toHaveClass('gap-3', 'sm:gap-4');
+    expect(gridMd).toHaveClass('gap-4', 'sm:gap-4');
 
     const { container: containerLg } = render(
       <TrackGrid tracks={mockTracks} gap="lg" />,
@@ -301,7 +301,7 @@ describe('TrackGrid', () => {
     );
     const grid = container.querySelector('[role="grid"]');
     // En mode normal, gap devrait être 'md'
-    expect(grid).toHaveClass('gap-3', 'sm:gap-4');
+    expect(grid).toHaveClass('gap-4', 'sm:gap-4');
   });
 
   it('should apply comfortable density settings', () => {
diff --git a/apps/web/src/features/tracks/components/TrackGrid.tsx b/apps/web/src/features/tracks/components/TrackGrid.tsx
index 52f591103..02bbac72a 100644
--- a/apps/web/src/features/tracks/components/TrackGrid.tsx
+++ b/apps/web/src/features/tracks/components/TrackGrid.tsx
@@ -94,7 +94,7 @@ export function TrackGrid({
         : 'lg');
 
   if (effectiveGap === 'sm') gapClass = 'gap-2 sm:gap-3';
-  if (effectiveGap === 'md') gapClass = 'gap-3 sm:gap-4';
+  if (effectiveGap === 'md') gapClass = 'gap-4 sm:gap-4';
   if (effectiveGap === 'lg') gapClass = 'gap-4 sm:gap-6';
 
   // Determine grid columns
diff --git a/apps/web/src/features/tracks/components/TrackGridDensitySelector.tsx b/apps/web/src/features/tracks/components/TrackGridDensitySelector.tsx
index 0eb650f92..598f79d1a 100644
--- a/apps/web/src/features/tracks/components/TrackGridDensitySelector.tsx
+++ b/apps/web/src/features/tracks/components/TrackGridDensitySelector.tsx
@@ -64,7 +64,7 @@ export function TrackGridDensitySelector({
             type="button"
             onClick={() => onChange(option.value)}
             className={cn(
-              'flex items-center gap-2 px-3 py-1.5 rounded-md',
+              'flex items-center gap-2 px-4 py-1.5 rounded-md',
               'text-sm font-medium transition-all duration-200',
               'hover:bg-kodo-slate dark:hover:bg-kodo-steel',
               'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
diff --git a/apps/web/src/features/tracks/components/TrackHistory.tsx b/apps/web/src/features/tracks/components/TrackHistory.tsx
index 91ae14b3c..b504a2ca6 100644
--- a/apps/web/src/features/tracks/components/TrackHistory.tsx
+++ b/apps/web/src/features/tracks/components/TrackHistory.tsx
@@ -258,7 +258,7 @@ export function TrackHistory({
 
                       {/* Values comparison */}
                       {(oldValue !== null || newValue !== null) && (
-                        <div className="space-y-2 rounded-lg border bg-muted/50 p-3 text-sm">
+                        <div className="space-y-2 rounded-lg border bg-muted/50 p-4 text-sm">
                           {oldValue !== null && (
                             <div>
                               <div className="text-xs font-medium text-muted-foreground mb-1">
diff --git a/apps/web/src/features/tracks/components/TrackList.tsx b/apps/web/src/features/tracks/components/TrackList.tsx
index eed3911f6..bbaedffca 100644
--- a/apps/web/src/features/tracks/components/TrackList.tsx
+++ b/apps/web/src/features/tracks/components/TrackList.tsx
@@ -157,7 +157,7 @@ export function TrackList({
               key={track.id}
               role="listitem"
               className={cn(
-                'flex items-center gap-3 p-2 rounded-md hover:bg-muted/50 group h-14',
+                'flex items-center gap-4 p-2 rounded-md hover:bg-muted/50 group h-14',
                 selectedTracks.includes(track.id) &&
                   'bg-kodo-cyan/10 dark:bg-kodo-cyan/20',
               )}
diff --git a/apps/web/src/features/tracks/components/TrackListPagination.tsx b/apps/web/src/features/tracks/components/TrackListPagination.tsx
index b7e888e5e..0475e88cf 100644
--- a/apps/web/src/features/tracks/components/TrackListPagination.tsx
+++ b/apps/web/src/features/tracks/components/TrackListPagination.tsx
@@ -101,7 +101,7 @@ export function TrackListPagination({
     <div
       className={cn(
         'flex flex-col sm:flex-row items-center justify-between gap-4',
-        'px-4 py-3 border-t border-kodo-steel dark:border-kodo-steel',
+        'px-4 py-4 border-t border-kodo-steel dark:border-kodo-steel',
         className,
       )}
       role="navigation"
@@ -174,7 +174,7 @@ export function TrackListPagination({
                   onClick={() => handlePageClick(1)}
                   disabled={disabled}
                   className={cn(
-                    'px-3 py-1.5 rounded-md text-sm font-medium transition-colors',
+                    'px-4 py-1.5 rounded-md text-sm font-medium transition-colors',
                     'text-kodo-text-main dark:text-kodo-text-main',
                     'hover:bg-kodo-void dark:hover:bg-kodo-graphite',
                     'focus:outline-none focus:ring-2 focus:ring-blue-500',
@@ -199,7 +199,7 @@ export function TrackListPagination({
                 onClick={() => handlePageClick(page)}
                 disabled={disabled}
                 className={cn(
-                  'px-3 py-1.5 rounded-md text-sm font-medium transition-colors',
+                  'px-4 py-1.5 rounded-md text-sm font-medium transition-colors',
                   'focus:outline-none focus:ring-2 focus:ring-blue-500',
                   page === currentPage
                     ? 'bg-kodo-cyan text-white dark:bg-kodo-cyan'
@@ -225,7 +225,7 @@ export function TrackListPagination({
                   onClick={() => handlePageClick(totalPages)}
                   disabled={disabled}
                   className={cn(
-                    'px-3 py-1.5 rounded-md text-sm font-medium transition-colors',
+                    'px-4 py-1.5 rounded-md text-sm font-medium transition-colors',
                     'text-kodo-text-main dark:text-kodo-text-main',
                     'hover:bg-kodo-void dark:hover:bg-kodo-graphite',
                     'focus:outline-none focus:ring-2 focus:ring-blue-500',
diff --git a/apps/web/src/features/tracks/components/TrackListRow.tsx b/apps/web/src/features/tracks/components/TrackListRow.tsx
index 90f963f6c..61e44e26f 100644
--- a/apps/web/src/features/tracks/components/TrackListRow.tsx
+++ b/apps/web/src/features/tracks/components/TrackListRow.tsx
@@ -85,7 +85,7 @@ export function TrackListRow({
           </td>
         )}
         <td className="p-2">
-          <div className="flex items-center gap-3">
+          <div className="flex items-center gap-4">
             {showCover && (
               <div className="relative w-8 h-8 flex-shrink-0 group">
                 {track.cover ? (
@@ -145,7 +145,7 @@ export function TrackListRow({
     <li
       role="listitem"
       className={cn(
-        'flex items-center gap-3 p-2 rounded-md hover:bg-muted/50 group h-14 transition-colors',
+        'flex items-center gap-4 p-2 rounded-md hover:bg-muted/50 group h-14 transition-colors',
         isSelected && 'bg-kodo-cyan/10 dark:bg-kodo-cyan/20',
         className,
       )}
diff --git a/apps/web/src/features/tracks/components/TrackListSelectionActions.tsx b/apps/web/src/features/tracks/components/TrackListSelectionActions.tsx
index 51e9ca9a7..e7b6f3d33 100644
--- a/apps/web/src/features/tracks/components/TrackListSelectionActions.tsx
+++ b/apps/web/src/features/tracks/components/TrackListSelectionActions.tsx
@@ -58,7 +58,7 @@ export function TrackListSelectionActions({
       className={cn(
         'fixed bottom-0 left-0 right-0 z-50',
         'bg-kodo-cyan dark:bg-kodo-cyan text-white',
-        'px-4 py-3 shadow-lg',
+        'px-4 py-4 shadow-lg',
         'flex items-center justify-between gap-4',
         'transition-transform duration-300 ease-in-out',
         className,
diff --git a/apps/web/src/features/tracks/components/TrackListSkeleton.tsx b/apps/web/src/features/tracks/components/TrackListSkeleton.tsx
index f0b24a505..8bb96ccfb 100644
--- a/apps/web/src/features/tracks/components/TrackListSkeleton.tsx
+++ b/apps/web/src/features/tracks/components/TrackListSkeleton.tsx
@@ -29,7 +29,7 @@ export function TrackListSkeleton({
       {Array.from({ length: count }).map((_, index) => (
         <div
           key={index}
-          className="flex items-center gap-4 p-3 rounded-lg bg-white dark:bg-kodo-graphite border border-kodo-steel dark:border-kodo-steel"
+          className="flex items-center gap-4 p-4 rounded-lg bg-white dark:bg-kodo-graphite border border-kodo-steel dark:border-kodo-steel"
         >
           {/* Cover Skeleton */}
           {showCover && (
diff --git a/apps/web/src/features/tracks/components/TrackStatsDisplay.tsx b/apps/web/src/features/tracks/components/TrackStatsDisplay.tsx
index e382b525e..56e06429f 100644
--- a/apps/web/src/features/tracks/components/TrackStatsDisplay.tsx
+++ b/apps/web/src/features/tracks/components/TrackStatsDisplay.tsx
@@ -124,7 +124,7 @@ export function TrackStatsDisplay({
 
   if (variant === 'vertical') {
     return (
-      <div className={cn('space-y-3', className)}>
+      <div className={cn('space-y-4', className)}>
         {statsItems.map((item, index) => {
           const Icon = item.icon;
           return (
diff --git a/apps/web/src/features/tracks/components/ViewToggle.tsx b/apps/web/src/features/tracks/components/ViewToggle.tsx
index 933bce0f8..8ea8e7002 100644
--- a/apps/web/src/features/tracks/components/ViewToggle.tsx
+++ b/apps/web/src/features/tracks/components/ViewToggle.tsx
@@ -78,7 +78,7 @@ export function ViewToggle({
         type="button"
         onClick={() => handleModeChange('list')}
         className={cn(
-          'flex items-center gap-2 px-3 py-1.5 rounded-md',
+          'flex items-center gap-2 px-4 py-1.5 rounded-md',
           'text-sm font-medium transition-all duration-200',
           'hover:bg-kodo-slate dark:hover:bg-kodo-steel',
           'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
@@ -101,7 +101,7 @@ export function ViewToggle({
         type="button"
         onClick={() => handleModeChange('grid')}
         className={cn(
-          'flex items-center gap-2 px-3 py-1.5 rounded-md',
+          'flex items-center gap-2 px-4 py-1.5 rounded-md',
           'text-sm font-medium transition-all duration-200',
           'hover:bg-kodo-slate dark:hover:bg-kodo-steel',
           'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
diff --git a/apps/web/src/features/upload/components/UploadModal.tsx b/apps/web/src/features/upload/components/UploadModal.tsx
index 719aa1c91..f9295a028 100644
--- a/apps/web/src/features/upload/components/UploadModal.tsx
+++ b/apps/web/src/features/upload/components/UploadModal.tsx
@@ -347,7 +347,7 @@ export function UploadModal({ open, onClose }: UploadModalProps) {
                 data-testid="upload-file-display"
               >
                 <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-3">
+                  <div className="flex items-center gap-4">
                     <FileAudio className="h-8 w-8 text-primary" />
                     <div>
                       <p className="font-medium" data-testid="upload-file-name">
@@ -387,7 +387,7 @@ export function UploadModal({ open, onClose }: UploadModalProps) {
             {/* Messages d'erreur */}
             {error && (
               <Alert variant="destructive" data-testid="upload-error">
-                <div className="flex items-start gap-3">
+                <div className="flex items-start gap-4">
                   <AlertCircle className="h-4 w-4 mt-0.5 shrink-0" />
                   <div className="flex-1 space-y-2">
                     <div>
diff --git a/apps/web/src/pages/AdminDashboardPage.tsx b/apps/web/src/pages/AdminDashboardPage.tsx
index bf827a719..e5b972e85 100644
--- a/apps/web/src/pages/AdminDashboardPage.tsx
+++ b/apps/web/src/pages/AdminDashboardPage.tsx
@@ -468,7 +468,7 @@ export function AdminDashboardPage() {
                 {users.map((user) => (
                   <div
                     key={user.id}
-                    className="flex items-center justify-between p-3 border rounded hover:bg-accent cursor-pointer"
+                    className="flex items-center justify-between p-4 border rounded hover:bg-accent cursor-pointer"
                     onClick={() => navigate(`/u/${user.username}`)}
                   >
                     <div className="flex-1">
@@ -534,7 +534,7 @@ export function AdminDashboardPage() {
               </Button>
               <div className="space-y-2">
                 {recentLogs.map((log) => (
-                  <div key={log.id} className="p-3 border rounded">
+                  <div key={log.id} className="p-4 border rounded">
                     <div className="flex items-center justify-between">
                       <div>
                         <p className="font-medium">{log.action}</p>
@@ -593,7 +593,7 @@ export function AdminDashboardPage() {
                   {suspiciousActivities.map((activity, index) => (
                     <div
                       key={index}
-                      className="p-3 border border-destructive rounded"
+                      className="p-4 border border-destructive rounded"
                     >
                       <p className="font-medium text-destructive">
                         {activity.reason || 'Activité suspecte'}
diff --git a/apps/web/src/pages/AnalyticsPage.tsx b/apps/web/src/pages/AnalyticsPage.tsx
index 2c187a39c..0dbf51755 100644
--- a/apps/web/src/pages/AnalyticsPage.tsx
+++ b/apps/web/src/pages/AnalyticsPage.tsx
@@ -207,7 +207,7 @@ export function AnalyticsPage() {
                 {analytics.tracks.top_tracks.map((track, index) => (
                   <div
                     key={track.id}
-                    className="flex items-center justify-between p-3 border rounded-lg hover:bg-accent cursor-pointer"
+                    className="flex items-center justify-between p-4 border rounded-lg hover:bg-accent cursor-pointer"
                     onClick={() => navigate(`/tracks/${track.id}`)}
                   >
                     <div className="flex items-center gap-4">
@@ -315,7 +315,7 @@ export function AnalyticsPage() {
                 {analytics.playlists.top_playlists.map((playlist, index) => (
                   <div
                     key={playlist.id}
-                    className="flex items-center justify-between p-3 border rounded-lg hover:bg-accent cursor-pointer"
+                    className="flex items-center justify-between p-4 border rounded-lg hover:bg-accent cursor-pointer"
                     onClick={() => navigate(`/playlists/${playlist.id}`)}
                   >
                     <div className="flex items-center gap-4">
diff --git a/apps/web/src/pages/DashboardPage.tsx b/apps/web/src/pages/DashboardPage.tsx
index 8c15a7ce3..59d5577d4 100644
--- a/apps/web/src/pages/DashboardPage.tsx
+++ b/apps/web/src/pages/DashboardPage.tsx
@@ -141,7 +141,7 @@ export function DashboardPage() {
           </p>
         </div>
 
-        <div className="flex items-center gap-3">
+        <div className="flex items-center gap-4">
           <Button
             variant="outline"
             size="lg"
@@ -174,7 +174,7 @@ export function DashboardPage() {
                         'rounded-xl',
                         stat.bgGradient,
                         'border border-white/10 transition-colors duration-300',
-                        isPrimary ? 'p-4' : 'p-3',
+                        isPrimary ? 'p-4' : 'p-4',
                       )}
                     >
                       <stat.icon
diff --git a/apps/web/src/pages/DeveloperPage.tsx b/apps/web/src/pages/DeveloperPage.tsx
index 882334f7d..7b30762b7 100644
--- a/apps/web/src/pages/DeveloperPage.tsx
+++ b/apps/web/src/pages/DeveloperPage.tsx
@@ -6,7 +6,7 @@ export function DeveloperPage() {
     <div className="min-h-screen p-6 space-y-8">
       <div className="glass-hud rounded-2xl border-white/10 p-6 hud-corner">
         <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
+          <div className="flex items-center gap-4">
             <div className="w-12 h-12 rounded-xl bg-kodo-steel/20 flex items-center justify-center border border-kodo-steel/30">
               <Terminal className="w-6 h-6 text-kodo-steel" />
             </div>
diff --git a/apps/web/src/pages/EducationPage.tsx b/apps/web/src/pages/EducationPage.tsx
index ebae782a8..31335babe 100644
--- a/apps/web/src/pages/EducationPage.tsx
+++ b/apps/web/src/pages/EducationPage.tsx
@@ -6,7 +6,7 @@ export function EducationPage() {
     <div className="min-h-screen p-6 space-y-8">
       <div className="glass-hud rounded-2xl border-white/10 p-6 hud-corner">
         <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
+          <div className="flex items-center gap-4">
             <div className="w-12 h-12 rounded-xl bg-kodo-lime/20 flex items-center justify-center border border-kodo-lime/30">
               <GraduationCap className="w-6 h-6 text-kodo-lime" />
             </div>
diff --git a/apps/web/src/pages/GearPage.tsx b/apps/web/src/pages/GearPage.tsx
index 17404ece1..bc72d4893 100644
--- a/apps/web/src/pages/GearPage.tsx
+++ b/apps/web/src/pages/GearPage.tsx
@@ -6,7 +6,7 @@ export function GearPage() {
     <div className="min-h-screen p-6 space-y-8">
       <div className="glass-hud rounded-2xl border-white/10 p-6 hud-corner">
         <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
+          <div className="flex items-center gap-4">
             <div className="w-12 h-12 rounded-xl bg-kodo-steel/20 flex items-center justify-center border border-kodo-steel/30">
               <Box className="w-6 h-6 text-kodo-steel" />
             </div>
diff --git a/apps/web/src/pages/LivePage.tsx b/apps/web/src/pages/LivePage.tsx
index 9ff27045a..37ffeb28c 100644
--- a/apps/web/src/pages/LivePage.tsx
+++ b/apps/web/src/pages/LivePage.tsx
@@ -6,7 +6,7 @@ export function LivePage() {
     <div className="min-h-screen p-6 space-y-8">
       <div className="glass-hud rounded-2xl border-white/10 p-6 hud-corner">
         <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
+          <div className="flex items-center gap-4">
             <div className="w-12 h-12 rounded-xl bg-kodo-red/20 flex items-center justify-center border border-kodo-red/30 animate-pulse">
               <Radio className="w-6 h-6 text-kodo-red" />
             </div>
diff --git a/apps/web/src/pages/QueuePage.tsx b/apps/web/src/pages/QueuePage.tsx
index 283a90aa0..ebd7f2a84 100644
--- a/apps/web/src/pages/QueuePage.tsx
+++ b/apps/web/src/pages/QueuePage.tsx
@@ -6,7 +6,7 @@ export function QueuePage() {
     <div className="min-h-screen p-6 space-y-8">
       <div className="glass-hud rounded-2xl border-white/10 p-6 hud-corner">
         <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
+          <div className="flex items-center gap-4">
             <div className="w-12 h-12 rounded-xl bg-kodo-magenta/20 flex items-center justify-center border border-kodo-magenta/30">
               <ListMusic className="w-6 h-6 text-kodo-magenta" />
             </div>
diff --git a/apps/web/src/pages/SettingsPage.tsx b/apps/web/src/pages/SettingsPage.tsx
index 5617965f6..843fe623b 100644
--- a/apps/web/src/pages/SettingsPage.tsx
+++ b/apps/web/src/pages/SettingsPage.tsx
@@ -35,7 +35,7 @@ export function SettingsPage() {
     <div className="min-h-screen p-6 space-y-8">
       {/* Header */}
       <div className="glass-hud rounded-2xl border-white/10 p-6 hud-corner">
-        <div className="flex items-center gap-3">
+        <div className="flex items-center gap-4">
           <div className="w-12 h-12 rounded-xl bg-kodo-steel/20 flex items-center justify-center border border-kodo-steel/30">
             <Settings className="w-6 h-6 text-kodo-steel" />
           </div>
@@ -60,7 +60,7 @@ export function SettingsPage() {
                 <button
                   key={tab.id}
                   onClick={() => setActiveTab(tab.id)}
-                  className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-all ${
+                  className={`w-full flex items-center gap-4 px-4 py-4 rounded-lg transition-all ${
                     activeTab === tab.id
                       ? 'bg-kodo-cyan/10 text-kodo-cyan border border-kodo-cyan/30'
                       : 'text-kodo-secondary hover:text-white hover:bg-white/5'
@@ -128,12 +128,12 @@ export function SettingsPage() {
                 <label className="block text-sm font-medium text-white mb-2">
                   Light/Dark Mode
                 </label>
-                <div className="grid grid-cols-3 gap-3">
+                <div className="grid grid-cols-3 gap-4">
                   {['light', 'dark', 'system'].map((t) => (
                     <button
                       key={t}
                       onClick={() => setTheme(t as 'light' | 'dark' | 'system')}
-                      className={`px-4 py-3 rounded-lg border transition-all ${
+                      className={`px-4 py-4 rounded-lg border transition-all ${
                         theme === t
                           ? 'bg-kodo-cyan/10 border-kodo-cyan text-kodo-cyan'
                           : 'border-white/10 text-kodo-secondary hover:border-white/20'
diff --git a/apps/web/src/pages/SocialPage.tsx b/apps/web/src/pages/SocialPage.tsx
index 698e57ddc..bf13fdeb6 100644
--- a/apps/web/src/pages/SocialPage.tsx
+++ b/apps/web/src/pages/SocialPage.tsx
@@ -32,7 +32,7 @@ export function SocialPage() {
       {/* Header */}
       <div className="glass-hud rounded-2xl border-white/10 p-6 hud-corner">
         <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
+          <div className="flex items-center gap-4">
             <div className="w-12 h-12 rounded-xl bg-kodo-steel/20 flex items-center justify-center border border-kodo-steel/30">
               <Users className="w-6 h-6 text-kodo-steel" />
             </div>
@@ -59,7 +59,7 @@ export function SocialPage() {
       {/* Stats */}
       <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
         <div className="glass-hud rounded-xl border-white/10 p-4">
-          <div className="flex items-center gap-3">
+          <div className="flex items-center gap-4">
             <TrendingUp className="w-5 h-5 text-kodo-lime" />
             <div>
               <p className="text-xs text-kodo-secondary">Trending</p>
@@ -68,7 +68,7 @@ export function SocialPage() {
           </div>
         </div>
         <div className="glass-hud rounded-xl border-white/10 p-4">
-          <div className="flex items-center gap-3">
+          <div className="flex items-center gap-4">
             <Users className="w-5 h-5 text-kodo-steel" />
             <div>
               <p className="text-xs text-kodo-secondary">Following</p>
@@ -77,7 +77,7 @@ export function SocialPage() {
           </div>
         </div>
         <div className="glass-hud rounded-xl border-white/10 p-4">
-          <div className="flex items-center gap-3">
+          <div className="flex items-center gap-4">
             <Heart className="w-5 h-5 text-kodo-magenta" />
             <div>
               <p className="text-xs text-kodo-secondary">Likes</p>
diff --git a/scripts/align-8px-grid.py b/scripts/align-8px-grid.py
new file mode 100755
index 000000000..468cbd77b
--- /dev/null
+++ b/scripts/align-8px-grid.py
@@ -0,0 +1,211 @@
+#!/usr/bin/env python3
+"""
+Script to align all spacing to 8px grid for Action 11.2.1.3
+
+This script:
+1. Finds all non-8px-aligned spacing values (1, 3, 5, 10, 20)
+2. Replaces them with nearest 8px-aligned values
+3. Preserves necessary fine-tuning (4px values in specific contexts)
+"""
+
+import os
+import re
+import sys
+from pathlib import Path
+from typing import List, Tuple
+
+# Non-8px-aligned spacing values and their replacements
+# Note: We're conservative with 4px (spacing-1) values as they might be intentional fine-tuning
+SPACING_REPLACEMENTS = {
+    # 12px (spacing-3) → 16px (better spacing)
+    'gap-3': 'gap-4',  # 12px → 16px
+    'p-3': 'p-4',      # 12px → 16px
+    'm-3': 'm-4',      # 12px → 16px
+    'px-3': 'px-4',
+    'py-3': 'py-4',
+    'mx-3': 'mx-4',
+    'my-3': 'my-4',
+    'space-x-3': 'space-x-4',
+    'space-y-3': 'space-y-4',
+    
+    # 20px (spacing-5) → 16px or 24px (prefer 24px for better spacing)
+    'gap-5': 'gap-6',  # 20px → 24px
+    'p-5': 'p-6',      # 20px → 24px
+    'm-5': 'm-6',      # 20px → 24px
+    'px-5': 'px-6',
+    'py-5': 'py-6',
+    'mx-5': 'mx-6',
+    'my-5': 'my-6',
+    'space-x-5': 'space-x-6',
+    'space-y-5': 'space-y-6',
+    
+    # 40px (spacing-10) → 32px or 48px (prefer 48px for better spacing)
+    'gap-10': 'gap-12',  # 40px → 48px
+    'p-10': 'p-12',      # 40px → 48px
+    'm-10': 'm-12',      # 40px → 48px
+    'px-10': 'px-12',
+    'py-10': 'py-12',
+    'mx-10': 'mx-12',
+    'my-10': 'my-12',
+    'space-x-10': 'space-x-12',
+    'space-y-10': 'space-y-12',
+    
+    # 80px (spacing-20) → 64px or 96px (prefer 96px for better spacing)
+    'gap-20': 'gap-24',  # 80px → 96px
+    'p-20': 'p-24',      # 80px → 96px
+    'm-20': 'm-24',      # 80px → 96px
+    'px-20': 'px-24',
+    'py-20': 'py-24',
+    'mx-20': 'mx-24',
+    'my-20': 'my-24',
+    'space-x-20': 'space-x-24',
+    'space-y-20': 'space-y-24',
+}
+
+# Patterns to preserve (contexts where non-8px spacing might be intentional)
+PRESERVE_PATTERNS = [
+    # Test files
+    r'\.test\.',
+    r'\.spec\.',
+    # Documentation
+    r'\.md',
+    # Responsive breakpoints (sm:, md:, lg:) - these are intentional
+    r'sm:gap-[135]|md:gap-[135]|lg:gap-[135]',
+    r'sm:p-[135]|md:p-[135]|lg:p-[135]',
+    r'sm:m-[135]|md:m-[135]|lg:m-[135]',
+    # Arbitrary values that might be intentional
+    r'gap-\[|p-\[|m-\[',
+]
+
+# Files/directories to skip
+SKIP_PATTERNS = [
+    'node_modules',
+    '.git',
+    '.build',
+    'dist',
+    'coverage',
+    'test-reports',
+    'EXHAUSTIVE_TODO_LIST.md',
+    'GRID_SYSTEM.md',
+    'SPACING_AUDIT_REPORT.md',
+    'SPACING_GUIDE.md',
+    'design-tokens.css',  # This file defines the spacing scale
+]
+
+def should_preserve(line: str, file_path: str) -> bool:
+    """Check if this line should be preserved"""
+    # Skip test and documentation files
+    if any(pattern in file_path for pattern in SKIP_PATTERNS):
+        return True
+    
+    # Check preserve patterns
+    for pattern in PRESERVE_PATTERNS:
+        if re.search(pattern, line, re.IGNORECASE):
+            return True
+    
+    return False
+
+def replace_spacing(file_path: Path, dry_run: bool = False) -> Tuple[int, int]:
+    """Replace non-8px spacing in a file"""
+    replaced = 0
+    preserved = 0
+    
+    try:
+        with open(file_path, 'r', encoding='utf-8') as f:
+            content = f.read()
+            original_content = content
+        
+        lines = content.split('\n')
+        new_lines = []
+        
+        for line_num, line in enumerate(lines, 1):
+            original_line = line
+            
+            # Check if should preserve
+            if should_preserve(line, str(file_path)):
+                # Count preserved instances
+                for old in SPACING_REPLACEMENTS.keys():
+                    if old in line:
+                        preserved += 1
+                        break
+                new_lines.append(line)
+                continue
+            
+            # Replace non-8px spacing
+            line_replaced = False
+            for old, new in SPACING_REPLACEMENTS.items():
+                # Use word boundaries to avoid partial matches
+                pattern = r'\b' + re.escape(old) + r'\b'
+                if re.search(pattern, line):
+                    line = re.sub(pattern, new, line)
+                    if not line_replaced:
+                        replaced += 1
+                        line_replaced = True
+            
+            new_lines.append(line)
+        
+        new_content = '\n'.join(new_lines)
+        
+        if not dry_run and new_content != original_content:
+            with open(file_path, 'w', encoding='utf-8') as f:
+                f.write(new_content)
+        
+        return replaced, preserved
+    
+    except Exception as e:
+        print(f"Error processing {file_path}: {e}", file=sys.stderr)
+        return 0, 0
+
+def main():
+    """Main function"""
+    import argparse
+    
+    parser = argparse.ArgumentParser(description='Align spacing to 8px grid')
+    parser.add_argument('--dry-run', action='store_true', help='Show what would be changed without making changes')
+    parser.add_argument('--path', default='apps/web/src', help='Path to search (default: apps/web/src)')
+    args = parser.parse_args()
+    
+    base_path = Path(args.path)
+    if not base_path.exists():
+        print(f"Error: Path {base_path} does not exist", file=sys.stderr)
+        sys.exit(1)
+    
+    # Find all TypeScript/TSX files
+    tsx_files = []
+    for ext in ['*.tsx', '*.ts']:
+        tsx_files.extend(base_path.rglob(ext))
+    
+    # Filter out skipped files
+    files_to_process = []
+    for file_path in tsx_files:
+        if not any(pattern in str(file_path) for pattern in SKIP_PATTERNS):
+            files_to_process.append(file_path)
+    
+    print(f"Found {len(files_to_process)} files to process")
+    if args.dry_run:
+        print("DRY RUN MODE - No files will be modified\n")
+    
+    total_replaced = 0
+    total_preserved = 0
+    files_modified = []
+    
+    for file_path in sorted(files_to_process):
+        replaced, preserved = replace_spacing(file_path, dry_run=args.dry_run)
+        if replaced > 0:
+            total_replaced += replaced
+            total_preserved += preserved
+            files_modified.append((file_path, replaced, preserved))
+            status = "[DRY RUN] Would modify" if args.dry_run else "Modified"
+            print(f"{status}: {file_path} ({replaced} replaced, {preserved} preserved)")
+    
+    print(f"\n{'='*60}")
+    print(f"Total files {'would be ' if args.dry_run else ''}modified: {len(files_modified)}")
+    print(f"Total instances replaced: {total_replaced}")
+    print(f"Total instances preserved: {total_preserved}")
+    print(f"{'='*60}")
+    
+    if args.dry_run and len(files_modified) > 0:
+        print("\nRun without --dry-run to apply changes")
+
+if __name__ == '__main__':
+    main()