Styles styels styles

docs/plans/FRONTEND-AUDIT-PLAN.md

@@ -1,5 +1,26 @@
 # Frontend Complete Refactoring & Standardization Plan
 
+## ✅ STATUS: TAILWIND DEFAULT COLORS DISABLED
+
+**As of 2026-01-01**: All Tailwind default color palettes (blue-500, red-600, green-400, etc.) have been **disabled** via `@theme` in `design-system.css`. Only our custom design system colors work now.
+
+### What's Disabled (via `@theme { --color-*-*: initial; }`)
+- `red-*`, `orange-*`, `amber-*`, `yellow-*`, `lime-*`
+- `green-*`, `emerald-*`, `teal-*`, `cyan-*`, `sky-*`
+- `blue-*`, `indigo-*`, `violet-*`, `fuchsia-*`, `pink-*`, `rose-*`
+- `slate-*`, `zinc-*`, `neutral-*`, `stone-*`
+
+### What WORKS (our design system)
+- `brand-*` (25-950) - derived from `--color-primary`
+- `success-*` (25-950) - derived from `--color-success`
+- `warning-*` (25-950) - derived from `--color-warning`
+- `error-*` (25-950) - derived from `--color-danger`
+- `purple-*` (25-950) - derived from `--color-purple`
+- `gray-*` (25-950) - derived from `--color-gray-base`
+- `blue-light-*` - info/link colors (derived from primary)
+
+---
+
 ## 🎯 Objective
 
 **Completely remove Tailwind default styles** and refactor the entire frontend to use **ONLY** the custom design system defined in `/src/styles/design-system.css`.

frontend/package-lock.json

@@ -43,6 +43,7 @@
         "@types/react-dom": "^19.0.4",
         "@vitejs/plugin-react": "^4.3.4",
         "@vitest/ui": "^1.0.4",
+        "autoprefixer": "^10.4.23",
         "eslint": "^9.19.0",
         "eslint-plugin-react-hooks": "^5.0.0",
         "eslint-plugin-react-refresh": "^0.4.18",
@@ -3058,6 +3059,43 @@
         "node": ">=4"
       }
     },
+    "node_modules/autoprefixer": {
+      "version": "10.4.23",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.23.tgz",
+      "integrity": "sha512-YYTXSFulfwytnjAPlw8QHncHJmlvFKtczb8InXaAx9Q0LbfDnfEYDE55omerIJKihhmU61Ft+cAOSzQVaBUmeA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.28.1",
+        "caniuse-lite": "^1.0.30001760",
+        "fraction.js": "^5.3.4",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -3081,6 +3119,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.9.11",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.11.tgz",
+      "integrity": "sha512-Sg0xJUNDU1sJNGdfGWhVHX0kkZ+HWcvmVymJbj6NSgZZmW/8S9Y2HQ5euytnIgakgxN6papOAWiwDo1ctFDcoQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.js"
+      }
+    },
     "node_modules/bidi-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
@@ -3116,9 +3164,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.24.4",
+      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
-      "integrity": "sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==",
+      "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
       "dev": true,
       "funding": [
         {
@@ -3136,10 +3184,11 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "caniuse-lite": "^1.0.30001688",
+        "baseline-browser-mapping": "^2.9.0",
-        "electron-to-chromium": "^1.5.73",
+        "caniuse-lite": "^1.0.30001759",
-        "node-releases": "^2.0.19",
+        "electron-to-chromium": "^1.5.263",
-        "update-browserslist-db": "^1.1.1"
+        "node-releases": "^2.0.27",
+        "update-browserslist-db": "^1.2.0"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -3232,9 +3281,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001699",
+      "version": "1.0.30001762",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001699.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001762.tgz",
-      "integrity": "sha512-b+uH5BakXZ9Do9iK+CkDmctUSEqZl+SP056vc5usa0PL+ev5OHw003rZXcnjNDv3L8P5j6rwT6C0BPKSikW08w==",
+      "integrity": "sha512-PxZwGNvH7Ak8WX5iXzoK1KPZttBXNPuaOvI2ZYU7NrlM+d9Ov+TUvlLOBNGzVXAntMSMMlJPd+jY6ovrVjSmUw==",
       "dev": true,
       "funding": [
         {
@@ -3676,9 +3725,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.98",
+      "version": "1.5.267",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.98.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.267.tgz",
-      "integrity": "sha512-bI/LbtRBxU2GzK7KK5xxFd2y9Lf9XguHooPYbcXWy6wUoT8NMnffsvRhPmSeUHLSDKAEtKuTaEtK4Ms15zkIEA==",
+      "integrity": "sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==",
       "dev": true,
       "license": "ISC"
     },
@@ -4243,6 +4292,20 @@
         "node": ">= 6"
       }
     },
+    "node_modules/fraction.js": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -5623,9 +5686,9 @@
       }
     },
     "node_modules/node-releases": {
-      "version": "2.0.19",
+      "version": "2.0.27",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
-      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
+      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
       "dev": true,
       "license": "MIT"
     },
@@ -5977,6 +6040,13 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/preact": {
       "version": "10.12.1",
       "resolved": "https://registry.npmjs.org/preact/-/preact-10.12.1.tgz",
@@ -7007,9 +7077,9 @@
       }
     },
     "node_modules/update-browserslist-db": {
-      "version": "1.1.2",
+      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
-      "integrity": "sha512-PPypAm5qvlD7XMZC3BujecnaOxwhrtoFR+Dqkk5Aa/6DssiH0ibKoketaj9w8LP7Bont1rYeoV5plxD7RTEPRg==",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
       "dev": true,
       "funding": [
         {

frontend/package.json

@@ -52,6 +52,7 @@
     "@types/react-dom": "^19.0.4",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/ui": "^1.0.4",
+    "autoprefixer": "^10.4.23",
     "eslint": "^9.19.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.18",

frontend/src/components/dashboard/StandardThreeWidgetFooter.tsx

@@ -272,7 +272,7 @@ export default function StandardThreeWidgetFooter({
   const moduleType: ModuleType = module || (moduleStats?.title?.toLowerCase().includes('planner') ? 'planner' : 'writer');
   
   return (
-    <div className={`mt-8 pt-6 border-t border-gray-200 dark:border-gray-700 w-full max-w-full overflow-hidden ${className}`}>
+    <div className={`pt-4 border-t border-gray-200 dark:border-gray-700 w-full max-w-full overflow-hidden ${className}`}>
       {/* 
        * Widget widths adjusted per requirements:
        * - Widget 1 (Page Progress): 28.3% (reduced by 5%)

frontend/src/components/dashboard/ThreeWidgetFooter.tsx

@@ -367,7 +367,7 @@ export default function ThreeWidgetFooter({
   className = '',
 }: ThreeWidgetFooterProps) {
   return (
-    <div className={`mt-8 pt-6 border-t border-gray-200 dark:border-gray-700 ${className}`}>
+    <div className={`pt-4 border-t border-gray-200 dark:border-gray-700 ${className}`}>
       {/* 
        * Widget widths adjusted per requirements:
        * - Widget 1 (Page Progress): 28.3% (reduced by 5%)

frontend/src/components/onboarding/OnboardingWizard.tsx

@@ -191,8 +191,8 @@ export default function OnboardingWizard({ onComplete, onSkip }: OnboardingWizar
   };
 
   return (
-    <div className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
+    <div className="w-full max-w-3xl mx-auto">
-      <Card className="w-full max-w-2xl bg-white dark:bg-gray-900 rounded-2xl shadow-2xl overflow-hidden">
+      <Card className="w-full bg-white dark:bg-gray-900 rounded-2xl shadow-lg overflow-hidden">
         {/* Header */}
         <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
           <div className="flex items-center justify-between">

frontend/src/components/ui/badge/Badge.tsx

@@ -105,9 +105,9 @@ const toneStyles: Record<
 };
 
 const sizeClasses: Record<BadgeSize, string> = {
-  xs: "min-h-[20px] px-2.5 py-1 text-[11px] leading-[1.4]",
+  xs: "min-h-[20px] px-2.5 py-1 leading-[1.4]",
-  sm: "min-h-[24px] px-3 py-1 text-xs leading-[1.4]",
+  sm: "min-h-[24px] px-3 py-1 leading-[1.4]",
-  md: "min-h-[28px] px-3.5 py-1.5 text-sm leading-[1.4]",
+  md: "min-h-[28px] px-3.5 py-1.5 leading-[1.4]",
 };
 
 const Badge: React.FC<BadgeProps> = ({

frontend/src/components/ui/table/index.tsx

@@ -35,11 +35,12 @@ interface TableCellProps {
   children: ReactNode; // Cell content
   isHeader?: boolean; // If true, renders as <th>, otherwise <td>
   className?: string; // Optional className for styling
+  style?: React.CSSProperties; // Optional inline styles for width, fontSize, etc.
 }
 
 // Table Component
 const Table: React.FC<TableProps> = ({ children, className }) => {
-  return <table className={`min-w-full w-full ${className}`}>{children}</table>;
+  return <table className={`min-w-full w-full ${className}`} style={{ tableLayout: 'auto' }}>{children}</table>;
 };
 
 // TableHeader Component
@@ -62,9 +63,10 @@ const TableCell: React.FC<TableCellProps> = ({
   children,
   isHeader = false,
   className,
+  style,
 }) => {
   const CellTag = isHeader ? "th" : "td";
-  return <CellTag className={` ${className}`}>{children}</CellTag>;
+  return <CellTag className={` ${className}`} style={style}>{children}</CellTag>;
 };
 
 export { Table, TableHeader, TableBody, TableRow, TableCell };

frontend/src/config/pages/approved.config.tsx

@@ -62,17 +62,18 @@ export function createApprovedPageConfig(params: {
       label: 'Content Idea Title',
       sortable: true,
       sortField: 'title',
+      width: '400px',
       render: (value: string, row: Content) => (
         <div className="flex items-center gap-2">
           {params.onRowClick ? (
             <button
               onClick={() => params.onRowClick!(row)}
-              className="text-base font-light text-brand-500 hover:text-brand-600 hover:underline text-left transition-colors"
+              className="text-sm text-brand-500 hover:text-brand-600 hover:underline text-left transition-colors"
             >
               {value || `Content #${row.id}`}
             </button>
           ) : (
-            <span className="text-base font-light text-gray-900 dark:text-white">
+            <span className="text-sm text-gray-900 dark:text-white">
               {value || `Content #${row.id}`}
             </span>
           )}
@@ -95,7 +96,6 @@ export function createApprovedPageConfig(params: {
       label: 'Status',
       sortable: true,
       sortField: 'status',
-      width: '130px',
       render: (value: string, row: Content) => {
         // Map internal status to user-friendly labels
         const statusConfig: Record<string, { color: 'success' | 'blue' | 'amber' | 'gray'; label: string }> = {
@@ -251,8 +251,8 @@ export function createApprovedPageConfig(params: {
       sortable: false, // Backend doesn't support sorting by word_count
       sortField: 'word_count',
       numeric: true,
-      width: '100px',
+      align: 'center' as const,
-      align: 'right' as const,
+      headingAlign: 'center' as const,
       render: (value: number) => (
         <span className="text-gray-900 dark:text-white">
           {value ? value.toLocaleString() : '-'}
@@ -265,7 +265,8 @@ export function createApprovedPageConfig(params: {
       sortable: true,
       sortField: 'created_at',
       date: true,
-      width: '140px',
+      width: '130px',
+      hasActions: true,
       render: (value: string) => (
         <span className="text-gray-600 dark:text-gray-400">
           {formatRelativeDate(value)}

frontend/src/config/pages/clusters.config.tsx

@@ -10,7 +10,7 @@ import {
   sectorColumn,
   difficultyColumn,
   statusColumn,
-  createdColumn,
+  createdWithActionsColumn,
 } from '../snippets/columns.snippets';
 import Badge from '../../components/ui/badge/Badge';
 import { formatRelativeDate } from '../../utils/date';
@@ -107,6 +107,7 @@ export const createClustersPageConfig = (
         label: 'Cluster Name',
         sortable: true,
         sortField: 'name',
+        width: '400px',
         render: (value: string, row: Cluster) => (
           <Link
             to={`/planner/clusters/${row.id}`}
@@ -130,17 +131,8 @@ export const createClustersPageConfig = (
         label: 'KW Count',
         sortable: true,
         sortField: 'keywords_count',
-        width: '120px',
-        align: 'center' as const,
-        render: (value: number) => value.toLocaleString(),
-      },
-      {
-        key: 'ideas_count',
-        label: 'Ideas',
-        sortable: false, // Backend doesn't support sorting by ideas_count
-        sortField: 'ideas_count',
-        width: '120px',
         align: 'center' as const,
+        headingAlign: 'center' as const,
         render: (value: number) => value.toLocaleString(),
       },
       {
@@ -148,8 +140,8 @@ export const createClustersPageConfig = (
         label: 'Volume',
         sortable: true,
         sortField: 'volume',
-        width: '120px',
         align: 'center' as const,
+        headingAlign: 'center' as const,
         render: (value: number) => value.toLocaleString(),
       },
       {
@@ -159,6 +151,7 @@ export const createClustersPageConfig = (
         sortable: true,
         sortField: 'difficulty',
         align: 'center' as const,
+        headingAlign: 'center' as const,
         render: (value: number) => {
           const difficultyNum = getDifficultyNumber(value);
           const difficultyBadgeColor =
@@ -187,8 +180,8 @@ export const createClustersPageConfig = (
         label: 'Content',
         sortable: false, // Backend doesn't support sorting by content_count
         sortField: 'content_count',
-        width: '120px',
         align: 'center' as const,
+        headingAlign: 'center' as const,
         render: (value: number) => value.toLocaleString(),
       },
       {
@@ -205,9 +198,44 @@ export const createClustersPageConfig = (
         },
       },
       {
-        ...createdColumn,
+        key: 'ideas_count',
+        label: 'Ideas',
+        sortable: false, // Backend doesn't support sorting by ideas_count
+        sortField: 'ideas_count',
+        align: 'center' as const,
+        headingAlign: 'center' as const,
+        render: (value: number) => value.toLocaleString(),
+      },
+      // Generate Ideas action column - only shows button for status = 'new'
+      {
+        key: 'generate_action',
+        label: 'Generate Ideas',
+        sortable: false,
+        render: (_value: any, row: Cluster) => {
+          // Only show generate button for clusters with status 'new'
+          if (row.status === 'new' && handlers.onGenerateIdeas) {
+            return (
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handlers.onGenerateIdeas!(row.id);
+                }}
+                className="inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-white bg-brand-500 hover:bg-brand-600 rounded transition-colors"
+                title="Generate Ideas"
+              >
+                <BoltIcon className="w-4 h-4" />
+                Generate
+              </button>
+            );
+          }
+          return <span className="text-gray-400 dark:text-gray-500 text-sm">-</span>;
+        },
+      },
+      {
+        ...createdWithActionsColumn,
         sortable: true,
         sortField: 'created_at',
+        width: '130px',
         render: (value: string) => formatRelativeDate(value),
       },
       // Optional columns - hidden by default
@@ -240,32 +268,6 @@ export const createClustersPageConfig = (
         defaultVisible: false,
         render: (value: string) => formatRelativeDate(value),
       },
-      // Generate Ideas action column - only shows button for status = 'new'
-      {
-        key: 'generate_action',
-        label: 'Generate Ideas',
-        sortable: false,
-        width: '120px',
-        render: (_value: any, row: Cluster) => {
-          // Only show generate button for clusters with status 'new'
-          if (row.status === 'new' && handlers.onGenerateIdeas) {
-            return (
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  handlers.onGenerateIdeas!(row.id);
-                }}
-                className="inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-white bg-brand-500 hover:bg-brand-600 rounded transition-colors"
-                title="Generate Ideas"
-              >
-                <BoltIcon className="w-4 h-4" />
-                Generate
-              </button>
-            );
-          }
-          return <span className="text-gray-400 dark:text-gray-500 text-sm">-</span>;
-        },
-      },
     ],
     filters: [
       {

frontend/src/config/pages/content.config.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 import {
   titleColumn,
   statusColumn,
-  createdColumn,
+  createdWithActionsColumn,
   wordCountColumn,
   sectorColumn,
 } from '../snippets/columns.snippets';
@@ -100,17 +100,18 @@ export const createContentPageConfig = (
         label: 'Content Idea Title',
         sortable: true,
         sortField: 'title',
+        width: '400px',
         render: (value: string, row: Content) => (
           <div>
             {handlers.onRowClick ? (
               <button
                 onClick={() => handlers.onRowClick!(row)}
-                className="text-base font-light text-brand-500 hover:text-brand-600 hover:underline text-left transition-colors"
+                className="text-sm text-brand-500 hover:text-brand-600 hover:underline text-left transition-colors"
               >
                 {row.title || `Content #${row.id}`}
               </button>
             ) : (
-              <div className="text-base font-light text-gray-900 dark:text-white">
+              <div className="text-sm text-gray-900 dark:text-white">
                 {row.title || `Content #${row.id}`}
               </div>
             )}
@@ -130,7 +131,6 @@ export const createContentPageConfig = (
         label: 'Type',
         sortable: true,
         sortField: 'content_type',
-        width: '110px',
         render: (value: string) => {
           const label = TYPE_LABELS[value] || value || '-';
           // Proper case: capitalize first letter only
@@ -147,7 +147,6 @@ export const createContentPageConfig = (
         label: 'Structure',
         sortable: true,
         sortField: 'content_structure',
-        width: '130px',
         render: (value: string) => {
           const label = STRUCTURE_LABELS[value] || value || '-';
           // Proper case: capitalize first letter of each word
@@ -165,16 +164,15 @@ export const createContentPageConfig = (
         key: 'cluster_name',
         label: 'Cluster',
         sortable: false,
-        width: '130px',
         render: (_value: any, row: Content) => {
           const clusterName = row.cluster_name;
           if (!clusterName) {
-            return <span className="text-gray-400 dark:text-gray-500 text-[11px]">-</span>;
+            return <span className="text-gray-400 dark:text-gray-500">-</span>;
           }
           return (
-            <Badge color="indigo" size="xs" variant="soft">
+            <span className="text-gray-800 dark:text-white">
-              <span className="text-[11px] font-normal">{clusterName}</span>
+              {clusterName}
-            </Badge>
+            </span>
           );
         },
       },
@@ -305,11 +303,11 @@ export const createContentPageConfig = (
         ),
       },
       {
-        ...createdColumn,
+        ...createdWithActionsColumn,
         sortable: true,
         sortField: 'created_at',
         label: 'Created',
-        align: 'right',
+        width: '130px',
         render: (value: string, row: Content) => {
           // Prompt icon logic (unchanged)
           const hasPrompts = row.has_image_prompts || false;
@@ -335,7 +333,7 @@ export const createContentPageConfig = (
           };
 
           return (
-            <div className="flex items-center justify-end gap-3 pr-10">
+            <div className="flex items-center gap-2">
               <span className="text-gray-700 dark:text-gray-300 whitespace-nowrap">
                 {formatRelativeDate(value)}
               </span>

frontend/src/config/pages/ideas.config.tsx

@@ -9,7 +9,7 @@ import {
   titleColumn,
   sectorColumn,
   statusColumn,
-  createdColumn,
+  createdWithActionsColumn,
 } from '../snippets/columns.snippets';
 import Badge from '../../components/ui/badge/Badge';
 import { formatRelativeDate } from '../../utils/date';
@@ -98,6 +98,7 @@ export const createIdeasPageConfig = (
         label: 'Content Idea Title',
         sortable: true,
         sortField: 'idea_title',
+        width: '400px',
         toggleable: true, // Enable toggle for this column
         toggleContentKey: 'description', // Use description field for toggle content
         toggleContentLabel: 'Content Outline', // Label for expanded content
@@ -119,7 +120,6 @@ export const createIdeasPageConfig = (
         label: 'Structure',
         sortable: false, // Backend doesn't support sorting by content_structure
         sortField: 'content_structure',
-        width: '130px',
         render: (value: string) => {
           const label = value?.replace('_', ' ') || '-';
           const properCase = label.split(/[_\s]+/).map(word => 
@@ -137,7 +137,6 @@ export const createIdeasPageConfig = (
         label: 'Type',
         sortable: false, // Backend doesn't support sorting by content_type
         sortField: 'content_type',
-        width: '110px',
         render: (value: string) => {
           const label = value?.replace('_', ' ') || '-';
           const properCase = label.charAt(0).toUpperCase() + label.slice(1);
@@ -152,9 +151,8 @@ export const createIdeasPageConfig = (
         key: 'target_keywords',
         label: 'Keywords',
         sortable: false,
-        width: '250px',
         render: (value: string) => (
-          <span className="text-sm text-gray-600 dark:text-gray-400 truncate block max-w-[250px]">
+          <span className="text-sm text-gray-600 dark:text-gray-400">
             {value || '-'}
           </span>
         ),
@@ -164,7 +162,6 @@ export const createIdeasPageConfig = (
         label: 'Cluster',
         sortable: false, // Backend doesn't support sorting by keyword_cluster_id
         sortField: 'keyword_cluster_id',
-        width: '200px',
         render: (_value: string, row: ContentIdea) => {
           if (row.keyword_cluster_id && row.keyword_cluster_name) {
             return (
@@ -202,14 +199,15 @@ export const createIdeasPageConfig = (
         label: 'Words',
         sortable: true,
         sortField: 'estimated_word_count',
-        width: '100px',
         align: 'center' as const,
+        headingAlign: 'center' as const,
         render: (value: number) => value.toLocaleString(),
       },
       {
-        ...createdColumn,
+        ...createdWithActionsColumn,
         sortable: true,
         sortField: 'created_at',
+        width: '130px',
         render: (value: string) => formatRelativeDate(value),
       },
       // Optional columns - hidden by default

frontend/src/config/pages/images.config.tsx

@@ -64,7 +64,7 @@ export const createImagesPageConfig = (
       label: 'Content Title',
       sortable: true,
       sortField: 'content_title',
-      width: '250px',
+      width: '400px',
       render: (_value: string, row: ContentImagesGroup) => {
         const statusColors: Record<string, 'warning' | 'info' | 'success'> = {
           draft: 'warning',
@@ -130,13 +130,14 @@ export const createImagesPageConfig = (
     });
   }
 
-  // Add status column (separate from generate button)
+  // Add status column with actions (3-dot dropdown rendered by TablePageTemplate)
   columns.push({
     key: 'overall_status',
     label: 'Status',
     sortable: true,
     sortField: 'overall_status',
-    width: '120px',
+    width: '130px',
+    hasActions: true,
     render: (value: string, row: ContentImagesGroup) => {
       const statusColors: Record<string, 'success' | 'warning' | 'error' | 'info'> = {
         'complete': 'success',
@@ -159,40 +160,6 @@ export const createImagesPageConfig = (
     },
   });
 
-  // Add generate button column (separate from status)
-  columns.push({
-    key: 'generate_action',
-    label: 'Actions',
-    sortable: false,
-    width: '120px',
-    render: (_value: any, row: ContentImagesGroup) => {
-      // Check if there are any pending images with prompts
-      const hasPendingImages = 
-        (row.featured_image?.status === 'pending' && row.featured_image?.prompt) ||
-        row.in_article_images.some(img => img.status === 'pending' && img.prompt);
-      
-      return (
-        <>
-          {hasPendingImages && handlers.onGenerateImages ? (
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                handlers.onGenerateImages!(row.content_id);
-              }}
-              className="inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-white bg-brand-500 hover:bg-brand-600 rounded transition-colors"
-              title="Generate Images"
-            >
-              <BoltIcon className="w-4 h-4" />
-              Generate
-            </button>
-          ) : (
-            <span className="text-gray-400 dark:text-gray-500 text-sm">-</span>
-          )}
-        </>
-      );
-    },
-  });
-
   return {
     columns,
     filters: [

frontend/src/config/pages/keywords.config.tsx

@@ -15,7 +15,7 @@ import {
   clusterColumn,
   sectorColumn,
   statusColumn,
-  createdColumn,
+  createdWithActionsColumn,
 } from '../snippets/columns.snippets';
 // Icons removed - bulkActions and rowActions are now in table-actions.config.tsx
 import Badge from '../../components/ui/badge/Badge';
@@ -146,13 +146,19 @@ export const createKeywordsPageConfig = (
         ...keywordColumn,
         sortable: false, // Backend doesn't support sorting by keyword field
         sortField: 'seed_keyword__keyword',
+        width: '300px',
+        render: (value: string) => (
+          <span>
+            {value || '-'}
+          </span>
+        ),
       },
       // Sector column - only show when viewing all sectors
       ...(showSectorColumn ? [{
         ...sectorColumn,
         render: (value: string, row: Keyword) => (
           <Badge color="info" size="xs" variant="soft">
-            <span className="text-[11px] font-normal">{row.sector_name || '-'}</span>
+            {row.sector_name || '-'}
           </Badge>
         ),
       }] : []),
@@ -161,16 +167,18 @@ export const createKeywordsPageConfig = (
         sortable: true,
         sortField: 'seed_keyword__volume', // Backend expects seed_keyword__volume
         align: 'center' as const,
+        headingAlign: 'center' as const,
         render: (value: number) => value.toLocaleString(),
       },
       {
         ...clusterColumn,
         sortable: false, // Backend doesn't support sorting by cluster_id
         sortField: 'cluster_id',
+        width: '300px',
         render: (_value: string, row: Keyword) => row.cluster_name ? (
-          <Badge color="info" size="xs" variant="outline">
+          <span className="text-gray-800 dark:text-white">
-            <span className="text-[11px] font-normal">{row.cluster_name}</span>
+            {row.cluster_name}
-          </Badge>
+          </span>
         ) : <span className="text-gray-400">-</span>,
       },
       {
@@ -178,6 +186,7 @@ export const createKeywordsPageConfig = (
         sortable: true,
         sortField: 'seed_keyword__difficulty', // Backend expects seed_keyword__difficulty
         align: 'center' as const,
+        headingAlign: 'center' as const,
         render: (value: number) => {
           const difficultyNum = getDifficultyNumber(value);
           const difficultyBadgeColor =
@@ -194,7 +203,7 @@ export const createKeywordsPageConfig = (
               : 'gray';
           return typeof difficultyNum === 'number' ? (
             <Badge color={difficultyBadgeColor} variant="soft" size="xs">
-              <span className="text-[11px] font-normal">{difficultyNum}</span>
+              {difficultyNum}
             </Badge>
           ) : (
             difficultyNum
@@ -206,23 +215,12 @@ export const createKeywordsPageConfig = (
         sortable: false, // Backend doesn't support sorting by country
         sortField: 'seed_keyword__country',
         align: 'center' as const,
-        render: (value: string) => {
+        headingAlign: 'center' as const,
-          const countryNames: Record<string, string> = {
+        render: (value: string) => (
-            'US': 'United States',
+          <Badge color="info" size="xs" variant="soft">
-            'CA': 'Canada',
+            {value || '-'}
-            'GB': 'United Kingdom',
+          </Badge>
-            'AE': 'United Arab Emirates',
+        ),
-            'AU': 'Australia',
-            'IN': 'India',
-            'PK': 'Pakistan',
-          };
-          const displayName = countryNames[value] || value || '-';
-          return (
-            <Badge color="info" size="xs" variant="soft">
-              <span className="text-[11px] font-normal">{value || '-'}</span>
-            </Badge>
-          );
-        },
       },
       {
         ...statusColumn,
@@ -242,16 +240,17 @@ export const createKeywordsPageConfig = (
               size="xs"
               variant="soft"
             >
-              <span className="text-[11px] font-normal">{properCase}</span>
+              {properCase}
             </Badge>
           );
         },
       },
       {
-        ...createdColumn,
+        ...createdWithActionsColumn,
         label: 'Added',
         sortable: true,
         sortField: 'created_at',
+        width: '130px',
         render: (value: string) => formatRelativeDate(value),
       },
     ],

frontend/src/config/pages/review.config.tsx

@@ -62,17 +62,18 @@ export function createReviewPageConfig(params: {
       label: 'Content Idea Title',
       sortable: true,
       sortField: 'title',
+      width: '400px',
       render: (value: string, row: Content) => (
         <div className="flex items-center gap-2">
           {params.onRowClick ? (
             <button
               onClick={() => params.onRowClick!(row)}
-              className="text-base font-light text-brand-500 hover:text-brand-600 hover:underline text-left transition-colors"
+              className="text-sm text-brand-500 hover:text-brand-600 hover:underline text-left transition-colors"
             >
               {value || `Content #${row.id}`}
             </button>
           ) : (
-            <span className="text-base font-light text-gray-900 dark:text-white">
+            <span className="text-sm text-gray-900 dark:text-white">
               {value || `Content #${row.id}`}
             </span>
           )}
@@ -83,7 +84,6 @@ export function createReviewPageConfig(params: {
       key: 'categories',
       label: 'Categories',
       sortable: false,
-      width: '180px',
       render: (_value: any, row: Content) => {
         const categories = row.categories || [];
         if (!categories || categories.length === 0) {
@@ -107,7 +107,6 @@ export function createReviewPageConfig(params: {
       key: 'tags',
       label: 'Tags',
       sortable: false,
-      width: '180px',
       render: (_value: any, row: Content) => {
         const tags = row.tags || [];
         if (!tags || tags.length === 0) {
@@ -132,7 +131,6 @@ export function createReviewPageConfig(params: {
       label: 'Type',
       sortable: true,
       sortField: 'content_type',
-      width: '110px',
       render: (value: string) => {
         const label = TYPE_LABELS[value] || value || '-';
         const properCase = label.charAt(0).toUpperCase() + label.slice(1);
@@ -148,7 +146,6 @@ export function createReviewPageConfig(params: {
       label: 'Structure',
       sortable: true,
       sortField: 'content_structure',
-      width: '130px',
       render: (value: string) => {
         const label = STRUCTURE_LABELS[value] || value || '-';
         const properCase = label.split(/[_\s]+/).map(word => 
@@ -165,16 +162,15 @@ export function createReviewPageConfig(params: {
       key: 'cluster_name',
       label: 'Cluster',
       sortable: false,
-      width: '150px',
       render: (_value: any, row: Content) => {
         const clusterName = row.cluster_name;
         if (!clusterName) {
           return <span className="text-gray-400 dark:text-gray-500">-</span>;
         }
         return (
-          <Badge color="indigo" size="xs" variant="soft">
+          <span className="text-gray-800 dark:text-white">
-            <span className="text-[11px] font-normal">{clusterName}</span>
+            {clusterName}
-          </Badge>
+          </span>
         );
       },
     },
@@ -183,7 +179,6 @@ export function createReviewPageConfig(params: {
       label: 'Status',
       sortable: true,
       sortField: 'status',
-      width: '120px',
       render: (value: string, row: Content) => {
         const status = value || 'draft';
         const statusColors: Record<string, 'gray' | 'blue' | 'green' | 'amber' | 'red'> = {
@@ -214,7 +209,8 @@ export function createReviewPageConfig(params: {
       sortable: true,
       sortField: 'word_count',
       numeric: true,
-      width: '100px',
+      align: 'center' as const,
+      headingAlign: 'center' as const,
       render: (value: number) => (
         <span className="font-mono text-sm text-gray-700 dark:text-gray-300">
           {value?.toLocaleString() || 0}
@@ -227,7 +223,8 @@ export function createReviewPageConfig(params: {
       sortable: true,
       sortField: 'created_at',
       date: true,
-      align: 'right',
+      width: '130px',
+      hasActions: true,
       render: (value: string) => (
         <span className="text-gray-700 dark:text-gray-300 whitespace-nowrap">
           {formatRelativeDate(value)}

frontend/src/config/pages/tasks.config.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 import {
   titleColumn,
   statusColumn,
-  createdColumn,
+  createdWithActionsColumn,
   wordCountColumn,
   sectorColumn,
 } from '../snippets/columns.snippets';
@@ -104,6 +104,7 @@ export const createTasksPageConfig = (
         label: 'Content Idea Title',
         sortable: true,
         sortField: 'title',
+        width: '400px',
         toggleable: true,
         toggleContentKey: 'description',
         toggleContentLabel: 'Idea & Content Outline',
@@ -133,8 +134,11 @@ export const createTasksPageConfig = (
         label: 'Cluster',
         sortable: false, // Backend doesn't support sorting by cluster_id
         sortField: 'cluster_id',
-        width: '200px',
+        render: (_value: string, row: Task) => (
-        render: (_value: string, row: Task) => row.cluster_name || '-',
+          <span className="text-gray-800 dark:text-white">
+            {row.cluster_name || '-'}
+          </span>
+        ),
       },
       {
         key: 'taxonomy_name',
@@ -159,7 +163,6 @@ export const createTasksPageConfig = (
         label: 'Type',
         sortable: false, // Backend doesn't support sorting by content_type
         sortField: 'content_type',
-        width: '110px',
         render: (value: string) => {
           const label = TYPE_LABELS[value] || value || '-';
           const properCase = label.charAt(0).toUpperCase() + label.slice(1);
@@ -175,7 +178,6 @@ export const createTasksPageConfig = (
         label: 'Structure',
         sortable: true,
         sortField: 'content_structure',
-        width: '130px',
         render: (value: string) => {
           const label = STRUCTURE_LABELS[value] || value || '-';
           const properCase = label.split(/[_\s]+/).map(word => 
@@ -211,12 +213,14 @@ export const createTasksPageConfig = (
         sortable: true,
         sortField: 'word_count',
         align: 'center' as const,
+        headingAlign: 'center' as const,
         render: (value: number | null | undefined) => (value != null ? value.toLocaleString() : '-'),
       },
       {
-        ...createdColumn,
+        ...createdWithActionsColumn,
         sortable: true,
         sortField: 'created_at',
+        width: '130px',
         render: (value: string) => formatRelativeDate(value),
       },
       // Optional columns - hidden by default

frontend/src/config/snippets/columns.snippets.ts

@@ -7,14 +7,12 @@ export const titleColumn = {
   key: 'title',
   label: 'Title',
   sortable: true,
-  width: 'auto',
 };
 
 export const keywordColumn = {
   key: 'keyword',
   label: 'Keyword',
   sortable: true,
-  width: 'auto',
 };
 
 export const statusColumn = {
@@ -22,7 +20,6 @@ export const statusColumn = {
   label: 'Status',
   sortable: true,
   badge: true,
-  width: '120px',
 };
 
 export const volumeColumn = {
@@ -30,7 +27,7 @@ export const volumeColumn = {
   label: 'Volume',
   sortable: true,
   numeric: true,
-  width: '100px',
+  align: 'center' as const,
 };
 
 export const difficultyColumn = {
@@ -38,7 +35,7 @@ export const difficultyColumn = {
   label: 'Difficulty',
   sortable: true,
   badge: true,
-  width: '120px',
+  align: 'center' as const,
 };
 
 export const countryColumn = {
@@ -46,14 +43,12 @@ export const countryColumn = {
   label: 'Country',
   sortable: true,
   badge: true,
-  width: '120px',
 };
 
 export const clusterColumn = {
   key: 'cluster',
   label: 'Cluster',
   sortable: true,
-  width: '200px',
 };
 
 export const createdColumn = {
@@ -61,7 +56,16 @@ export const createdColumn = {
   label: 'Created',
   sortable: true,
   date: true,
-  width: '100px',
+};
+
+// Combined column with date and actions in one cell
+export const createdWithActionsColumn = {
+  key: 'created_at',
+  label: 'Created',
+  sortable: true,
+  date: true,
+  align: 'left' as const,
+  hasActions: true, // Special flag to indicate this column has row actions
 };
 
 export const updatedColumn = {
@@ -69,14 +73,12 @@ export const updatedColumn = {
   label: 'Modified',
   sortable: true,
   date: true,
-  width: '150px',
 };
 
 export const actionsColumn = {
   key: 'actions',
   label: 'Actions',
   sortable: false,
-  width: '100px',
   fixed: true,
 };
 
@@ -85,13 +87,12 @@ export const wordCountColumn = {
   label: 'Words',
   sortable: true,
   numeric: true,
-  width: '120px',
+  align: 'center' as const,
 };
 
 export const sectorColumn = {
   key: 'sector_name',
   label: 'Sector',
   sortable: false,
-  width: '150px',
 };
 

frontend/src/pages/Planner/Keywords.tsx

@@ -663,6 +663,7 @@ export default function Keywords() {
         data={keywords}
         loading={loading}
         showContent={showContent}
+        checkboxColumnWidth="40px"
         filters={pageConfig.filters}
         filterValues={{
           search: searchTerm,

frontend/src/pages/Setup/SetupWizard.tsx

@@ -20,14 +20,14 @@ export default function SetupWizard() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+    <div className="space-y-6">
       <PageHeader
         title="Setup Wizard"
         badge={{ icon: <ShootingStarIcon className="w-5 h-5" />, color: 'blue' }}
         description="Complete guided setup for your site"
       />
       
-      <div className="max-w-4xl mx-auto py-8 px-4">
+      <div className="py-4">
         <OnboardingWizard 
           onComplete={handleComplete}
           onSkip={handleSkip}

frontend/src/styles/design-system.css

@@ -9,10 +9,14 @@
    these tokens. See DESIGN_SYSTEM.md for usage guidelines.
    
    ⚠️  ONLY 6 HEX VALUES IN ENTIRE SYSTEM - Everything else derived!
+   ⚠️  TAILWIND DEFAULT COLORS ARE DISABLED - THEY WON'T WORK!
+   ⚠️  AI AGENTS: DO NOT USE blue-500, red-500, green-500, etc.
+   ⚠️  USE ONLY: brand-*, success-*, warning-*, error-*, purple-*, gray-*
    
    Last Updated: 2026-01-01
    =================================================================== */
 
+/* Tailwind with ALL default colors DISABLED */
 @import "tailwindcss";
 @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap") layer(base);
 
@@ -26,7 +30,7 @@
 
 :root {
   /* ===== THE ONLY 6 HEX VALUES IN THE ENTIRE SYSTEM ===== */
-  --color-primary: #2C7AA1;      /* Brand Blue - main CTA, links, primary actions */
+  --color-primary: #0077B6;      /* Brand Blue - main CTA, links, primary actions */
   --color-success: #2CA18E;      /* Success Green - confirmations, positive states */
   --color-warning: #D9A12C;      /* Warning Amber - alerts, cautions */
   --color-danger: #A12C40;       /* Danger Red - errors, destructive actions */
@@ -82,13 +86,13 @@
   /* ===================================================================
      BORDER RADIUS
      =================================================================== */
-  --radius-xs: 4px;
+  --radius-xs: 2px;
-  --radius-sm: 6px;
+  --radius-sm: 4px;
-  --radius-base: 8px;
+  --radius-base: 6px;
-  --radius-md: 10px;
+  --radius-md: 6px;
-  --radius-lg: 12px;
+  --radius-lg: 8px;
-  --radius-xl: 16px;
+  --radius-xl: 10px;
-  --radius-2xl: 20px;
+  --radius-2xl: 12px;
   --radius-full: 9999px;
   
   /* ===================================================================
@@ -182,6 +186,18 @@
   --color-neutral-*: initial;
   --color-stone-*: initial;
 
+  /* -----------------------------------------------------------------
+     BORDER RADIUS (Override Tailwind defaults)
+     ----------------------------------------------------------------- */
+  --radius-xs: 2px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 10px;
+  --radius-2xl: 12px;
+  --radius-3xl: 16px;
+  --radius-4xl: 20px;
+
   /* -----------------------------------------------------------------
      FONTS
      ----------------------------------------------------------------- */
@@ -481,18 +497,23 @@
    SECTION 7: TABLE STYLES
    =================================================================== */
 
+/* Global Table Font Size */
+.igny8-table-compact th,
+.igny8-table-compact td {
+  font-size: 13px !important;
+}
+
 /* Compact Table Headers */
 .igny8-table-compact th {
   padding: 8px 12px !important;
-  font-size: 13px !important;
+  font-weight: 500 !important;
-  font-weight: 600 !important;
   color: var(--color-text-dim) !important;
   text-align: left !important;
   background-color: var(--color-surface) !important;
-  border-bottom: 2px solid var(--color-stroke) !important;
+  border-bottom: 1px solid var(--color-stroke) !important;
-  text-transform: capitalize;
+  text-transform: uppercase;
-  letter-spacing: 0.3px;
+  letter-spacing: 0.5px;
-  line-height: 1.3 !important;
+  line-height: 1.4 !important;
 }
 
 .dark .igny8-table-compact th {
@@ -502,9 +523,8 @@
 }
 
 .igny8-table-compact td {
-  padding: 6px 10px !important;
+  padding: 8px !important;
-  font-size: 13px !important;
+  line-height: 1.4 !important;
-  line-height: 1.3 !important;
   border-bottom: 1px solid var(--color-stroke) !important;
 }
 

frontend/src/templates/ContentViewTemplate.tsx

@@ -793,7 +793,7 @@ export default function ContentViewTemplate({ content, loading, onBack }: Conten
       return 'bg-success-100 text-success-800 dark:bg-success-900/30 dark:text-success-400';
     }
     if (statusLower === 'approved') {
-      return 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400';
+      return 'bg-brand-100 text-brand-800 dark:bg-brand-900/30 dark:text-brand-400';
     }
     if (statusLower === 'review') {
       return 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400';

frontend/src/templates/TablePageTemplate.tsx

@@ -81,11 +81,13 @@ interface ColumnConfig {
   width?: string;
   fixed?: boolean;
   align?: 'left' | 'center' | 'right';
+  headingAlign?: 'left' | 'center' | 'right'; // Separate alignment for heading
   render?: (value: any, row: any) => ReactNode;
   toggleable?: boolean; // If true, this column will have a toggle button for expanding content
   toggleContentKey?: string; // Key of the field containing content to display when toggled
   toggleContentLabel?: string; // Label for the expanded content (e.g., "Content Outline")
   defaultVisible?: boolean; // Whether column is visible by default (default: true)
+  hasActions?: boolean; // If true, this column will include row actions (3-dot menu)
 }
 
 interface FilterConfig {
@@ -179,6 +181,8 @@ interface TablePageTemplateProps {
   };
   // Custom row highlight function (returns bg class based on row data)
   getRowClassName?: (row: any) => string;
+  // Custom checkbox column width (default: w-12 = 48px)
+  checkboxColumnWidth?: string;
 }
 
 export default function TablePageTemplate({
@@ -217,6 +221,7 @@ export default function TablePageTemplate({
   bulkActions: customBulkActions,
   primaryAction,
   getRowClassName,
+  checkboxColumnWidth = '48px',
 }: TablePageTemplateProps) {
   const location = useLocation();
   const [isBulkActionsDropdownOpen, setIsBulkActionsDropdownOpen] = useState(false);
@@ -799,7 +804,8 @@ export default function TablePageTemplate({
                 {selection && (
                   <TableCell
                     isHeader
-                    className="font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400 w-12"
+                    className="font-medium text-gray-500 text-center text-theme-xs dark:text-gray-400"
+                    style={{ width: checkboxColumnWidth, maxWidth: checkboxColumnWidth }}
                   >
                     {showContent && (
                       <Checkbox
@@ -816,15 +822,19 @@ export default function TablePageTemplate({
                 )}
                 {visibleColumnsList.map((column, colIndex) => {
                   const isLastColumn = colIndex === visibleColumnsList.length - 1;
+                  const hasActionsInColumn = column.hasActions && rowActions.length > 0;
                   const displayName = column.label || formatColumnKey(column.key);
+                  const headerAlign = column.headingAlign || column.align || 'start';
+                  const justifyClass = headerAlign === 'center' ? 'justify-center' : headerAlign === 'right' ? 'justify-end' : 'justify-start';
                   return (
                     <TableCell
                       key={column.key}
                       isHeader
-                      className={`font-medium text-gray-500 text-${column.align || 'start'} text-[11px] dark:text-gray-400 ${column.sortable ? 'cursor-pointer hover:text-gray-700 dark:hover:text-gray-300' : ''} ${isLastColumn && rowActions.length > 0 ? 'pr-16' : ''}`}
+                      className={`font-medium text-gray-500 text-${hasActionsInColumn ? 'start' : headerAlign} dark:text-gray-400 ${column.sortable ? 'cursor-pointer hover:text-gray-700 dark:hover:text-gray-300' : ''} ${hasActionsInColumn ? 'pr-16' : ''}`}
+                      style={column.width ? { width: column.width } : undefined}
                     >
-                      <div className="flex items-center justify-between gap-2">
+                      <div className={`flex items-center gap-2 ${hasActionsInColumn ? 'justify-between' : justifyClass}`}>
-                        <div className="flex items-center flex-1">
+                        <div className={`flex items-center ${hasActionsInColumn ? 'flex-1' : justifyClass}`}>
                           {column.sortable ? (
                             <div onClick={() => handleSort(column)} className="flex items-center">
                               {displayName}
@@ -915,7 +925,10 @@ export default function TablePageTemplate({
                         className={`igny8-data-row ${isRowAdded ? 'bg-brand-50 dark:bg-brand-500/10' : ''} ${customRowClass}`}
                       >
                         {selection && (
-                          <TableCell className="text-start">
+                          <TableCell 
+                            className="text-center"
+                            style={{ width: checkboxColumnWidth, maxWidth: checkboxColumnWidth }}
+                          >
                             <Checkbox
                               checked={selectedIds.includes(row.id?.toString() || '')}
                               onChange={(checked) => handleSelectRow(row.id?.toString() || '', checked)}
@@ -925,11 +938,11 @@ export default function TablePageTemplate({
                           </TableCell>
                         )}
                         {visibleColumnsList.map((column, colIndex) => {
-                          const isLastColumn = colIndex === visibleColumnsList.length - 1;
                           const rowId = row.id || index;
+                          const hasActionsInColumn = column.hasActions && rowActions.length > 0;
                           
                           // Get or create ref for this row's actions button
-                          if (isLastColumn && rowActions.length > 0) {
+                          if (hasActionsInColumn) {
                             if (!rowActionButtonRefs.current.has(rowId)) {
                               const ref = React.createRef<HTMLButtonElement>();
                               rowActionButtonRefs.current.set(rowId, ref);
@@ -939,7 +952,7 @@ export default function TablePageTemplate({
                           return (
                             <TableCell 
                               key={column.key} 
-                              className={`text-${column.align || 'start'} text-gray-800 dark:text-white/90 ${isLastColumn && rowActions.length > 0 ? 'relative pr-16' : ''}`}
+                              className={`text-${column.align || 'start'} text-gray-800 dark:text-white/90 ${hasActionsInColumn ? 'relative pr-16' : ''}`}
                             >
                               <div className={`flex items-center ${column.align === 'center' ? 'justify-center' : column.align === 'end' ? 'justify-end' : ''} ${column.toggleable && hasToggleContent ? 'justify-between w-full' : ''} gap-2`}>
                                 <div className={column.toggleable && hasToggleContent ? 'flex-1' : ''}>
@@ -962,8 +975,8 @@ export default function TablePageTemplate({
                                 )}
                               </div>
                               
-                              {/* Actions button - absolutely positioned in last column */}
+                              {/* Actions button - absolutely positioned in column with hasActions flag */}
-                              {isLastColumn && rowActions.length > 0 && (() => {
+                              {hasActionsInColumn && (() => {
                                 // Check if row is already added - use same logic as handleBulkAddSelected
                                 const isRowAdded = !!(row as any).isAdded;
                                 
@@ -1172,7 +1185,7 @@ export default function TablePageTemplate({
 
       {/* Pagination - Compact icon-based pagination */}
       {pagination && (
-        <div className="mt-6 border-t border-gray-200 dark:border-gray-800 pt-6">
+        <div className="mt-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 px-4 py-3">
           <div className="flex items-center justify-between">
             <div className="text-sm text-gray-500 dark:text-gray-400">
               Showing {data.length} of {pagination.totalCount} {selectionLabel || 'items'}