diff --git a/layout.md b/layout.md
new file mode 100644
index 0000000..ace7094
--- /dev/null
+++ b/layout.md
@@ -0,0 +1,171 @@
+# Fourge Portal Layout System
+
+This is the single source of truth for dashboard/profile visual structure and UI geometry.
+
+## 1) Global Frame
+- Viewport app shell: `height: 100vh`, `overflow: hidden`
+- Main content gutter: `24px` all sides
+- Sidebar: `width: 76px`, `top: 24px`, `left: 24px`, `height: calc(100vh - 48px)`, `border-radius: 8px`
+- Main wrapper offset from sidebar: `margin-left: 100px`
+- Page rhythm unit: `24px` (header spacing, card gaps, section gaps)
+
+## 2) Theme + Background
+- Background ownership is `body` via `background: var(--bg)`.
+- Dark base token `--bg` is full gradient:
+  - radial glow + vertical dark gradient.
+- Light base token `--bg` is full gradient:
+  - gray radial glow + white vertical gradient.
+- Do not use `html` theme-gradient scripting for Safari chrome behavior.
+
+## 3) Tokens
+- Accent: `#F5A523`
+- Card bg dark: `rgba(255,255,255,0.02)`
+- Card bg light: `rgba(0,0,0,0.02)`
+- Secondary card tone dark: `rgba(255,255,255,0.08)`
+- Secondary card tone light: `rgba(0,0,0,0.08)`
+- Border dark: `rgba(245,165,35,0.15)`
+- Border light: `rgba(0,0,0,0.1)`
+- Text primary dark/light: `#ffffff / #0d0d0d`
+- Text secondary dark/light: `#a8a8a8 / rgba(0,0,0,0.6)`
+- Text muted dark/light: `#666666 / rgba(0,0,0,0.38)`
+
+## 4) Typography
+- Font family: `Fourge`, then `-apple-system`, `BlinkMacSystemFont`, `'Segoe UI'`, `sans-serif`
+- Base font size: `14px`
+- Header title: `28px`, `500`, `line-height: 1.2`
+- Header subtitle: `13px`
+- Widget title: `11px`, `500`, uppercase, `letter-spacing: 0.8px`
+- Body table text: `12px/13px` by column importance
+
+## 5) Card System
+- Default widget shell:
+  - `background: var(--card-bg)`
+  - `border: 1px solid var(--border)`
+  - `border-radius: 8px`
+  - `padding: 18px 21px`
+  - `backdrop-filter: blur(12px)` + `-webkit-backdrop-filter`
+- Compact card radius (legacy generic `.card`): `4px` (do not use for new dashboard widgets)
+
+## 6) Header + Top Right Controls
+- Site header: `padding-top: 24px`, `padding-bottom: 24px`
+- Right control row:
+  - Search icon button: `32x32`
+  - Search button to theme toggle space: `7px` (`search-wrap margin-right`)
+  - Theme toggle: `32x32`
+  - Theme toggle to avatar: `14px` (`avatar-wrap margin-left`)
+  - Avatar button: `49x49`, circle, `2px` inner ring + `2px` accent outline
+
+## 7) Dashboard Grids (Team)
+- Stat row: `grid-template-columns: 1fr 1fr 1fr 1.5fr`, `gap: 24`, `margin-bottom: 0`
+- Row 2: `grid-template-columns: 1fr 280px`, `gap: 24`, `margin-top: 24`
+- Row 3: `grid-template-columns: 1fr 1fr`, `gap: 24`, `margin-top: 24`
+- Row 4 full-width: `margin-top: 24`
+
+## 8) Stat Cards
+- Card min height: `120px`
+- Internal row gap: `21px`
+- Label/value/sub spacing:
+  - Label: `margin-bottom: 5px`
+  - Value: `30px`, `400`, `letter-spacing: -0.5`, `line-height: 1.1`
+  - Sub: `12px`, `margin-top: 5px`
+- Icon badge: `27x27`, circle
+- Icon glyph: `13x13`
+
+## 9) Calendar
+- Card uses widget shell
+- Header-to-grid gap: `14px`
+- Weekday label: `10px`, `600`, `letter-spacing: 0.5`
+- Day cell button: `28x28`, circular
+- Day number: `12px`
+- Today style: bg `#F5A523`, text `#0d0d0d`, `700`
+- Dots: up to 3, each `3x3`, gap `2`
+- Popover:
+  - Anchored left of cell: `right: calc(100% + 8px)`, vertical centered
+  - `width: 210px`, `padding: 10px 12px`, `border-radius: 8px`
+  - shadow `0 12px 32px rgba(0,0,0,0.45)`
+  - row dot `6x6`, row text `12px`
+
+## 10) Activity + Performance Rows
+- Visible rows target: 5
+- Row layout: `display:flex`, `align-items:center`, `gap:10px`
+- Row spacing: `margin-top: 10px` from second row onward
+- Name text: `13px`
+- Meta/date text: `11px`
+- Progress track: `height: 4px`, `radius: 2px`
+- Percentage width slot: `min-width: 28px`
+
+## 11) Tables
+- General table layout in dashboard cards: `table-layout: fixed`, `border-collapse: collapse`
+- Header cells:
+  - `font-size: 10px`, `font-weight: 500`, uppercase, `letter-spacing: 0.6px`
+  - bottom spacing: `padding-bottom: 12px`
+- Body cells:
+  - primary text: `13px`
+  - secondary/metrics text: `12px`
+  - row vertical spacing via cell padding: typically `5px`
+- Hot Items column widths:
+  - check `10%`, task `40%`, requested by `35%`, due by `15%`
+- Client Highlight column widths:
+  - icon `5%`, company `22%`, contact `23%`, projects `13%`, open `13%`, outstanding `12%`, paid `12%`
+- Sorting rule:
+  - Every visible data column header must be sortable.
+  - Use clickable header controls (`SortTh`) with ascending/descending indicator.
+  - Exclude only non-data utility/action columns (checkbox-only, icon-only status marker, action buttons).
+
+## 12) Profile Page
+- Container: full available content width, column, `gap: 24`
+- Top row: `grid-template-columns: 1fr 280px`, `gap: 24`
+- At `<=1200px`: top row stacks to one column
+- Main profile card uses widget shell
+- Internal card layout:
+  - row `gap: 20px`
+  - portrait column `width: 160px`, portrait max `140x140`, circle
+  - detail grid `140px 1fr`, `row-gap: 8`, `column-gap: 12`, `margin-top: 14`
+  - social row `margin-top: 14`, `gap: 8`
+  - self-only edit button: `position: absolute`, `top: 18px`, `right: 21px` (aligns to card padding), `border-radius: 8px` (matches card), `height: 30px`, `font-size: 12px`
+- Right calendar card shows only tasks/events assigned to the viewed profile user
+- Modal:
+  - overlay: fixed inset, `z-index: 1200`, bg `rgba(0,0,0,0.58)`, blur `6px`
+  - overlay padding: `24px`
+  - modal width: `min(620px, 100%)`
+  - modal max-height: `calc(100vh - 48px)`, `overflow-y: auto`
+
+## 13) Radius + Geometry Rules
+- Dashboard/profile widgets: `8px` radius
+- Sidebar: `8px` radius
+- Buttons/input/dropdowns mostly `4px` radius
+- Circular elements (avatar/day/icon badges): `50%`
+
+## 14) Z-Index Stack
+- Sidebar: `200`
+- Header dropdowns/tooltips: `300`
+- Calendar hover popover: `1002` within card context (`card can be 1001 active`)
+- Modal overlay: `1200`
+
+## 15) Motion
+- Motion vars:
+  - fast `160ms`
+  - base `220ms`
+  - easing `cubic-bezier(0.22, 1, 0.36, 1)`
+- Dropdown animation: `ui-fade-up` from `translateY(4px)` + opacity 0 -> 1
+
+## 17) Hover Interaction Contract
+- Sidebar, header icon buttons, dropdown items, and avatar menu items must show a visible hover surface before click.
+- Single hover source-of-truth block controls these elements.
+- Dark hover surface baseline: `#1f1f1f`.
+- Light hover surface baseline: `rgba(0,0,0,0.08)`.
+- Nav icon opacity must lift from muted to full on hover (`opacity: 1`).
+- Hover and active must be visually distinct:
+  - hover uses stronger temporary contrast (`bg` + thin border),
+  - active remains persistent selected-state background.
+
+## 16) Non-Negotiable Implementation Rules
+- Keep gradient backgrounds on `html`, not `body`
+- Keep widget shell values (`18px 21px`, `8px`, blur 12, border token) consistent
+- Maintain global `24px` spacing rhythm for page/frame/grid gaps
+- Keep team dashboard card order:
+  1. Open Tasks
+  2. Active Projects
+  3. Net Profit
+  4. Revenue (wide)
+- Keep row 2 order: Recent Activity (left), Calendar (right)
diff --git a/package-lock.json b/package-lock.json
index cec7c2d..a6a6ec3 100755
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,8 @@
         "jszip": "^3.10.1",
         "react": "^19.2.4",
         "react-dom": "^19.2.4",
-        "react-router-dom": "^7.13.1"
+        "react-router-dom": "^7.13.1",
+        "recharts": "^2.15.4"
       },
       "devDependencies": {
         "@eslint/js": "^9.39.4",
@@ -962,6 +963,69 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
+      "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -1272,6 +1336,15 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1366,9 +1439,129 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -1387,6 +1580,12 @@
         }
       }
     },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+      "license": "MIT"
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -1404,6 +1603,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dompurify": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.3.3.tgz",
@@ -1628,6 +1837,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -1635,6 +1850,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-equals": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.4.0.tgz",
+      "integrity": "sha512-jt2DW/aNFNwke7AUd+Z+e6pz39KO5rzdbbFCg2sGafS4mk13MI7Z8O5z9cADNn5lhGODIgLwug6TZO2ctf7kcw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -1897,6 +2121,15 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "license": "ISC"
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/iobuffer": {
       "version": "5.4.0",
       "resolved": "https://registry.npmjs.org/iobuffer/-/iobuffer-5.4.0.tgz",
@@ -1943,7 +2176,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/js-yaml": {
@@ -2360,6 +2592,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
+      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -2367,6 +2605,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -2430,6 +2680,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -2591,6 +2850,23 @@
       "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
       "license": "MIT"
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -2632,6 +2908,12 @@
         "react": "^19.2.4"
       }
     },
+    "node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "license": "MIT"
+    },
     "node_modules/react-router": {
       "version": "7.13.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.13.1.tgz",
@@ -2670,6 +2952,37 @@
         "react-dom": ">=18"
       }
     },
+    "node_modules/react-smooth": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz",
+      "integrity": "sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-equals": "^5.0.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
@@ -2685,6 +2998,39 @@
         "util-deprecate": "~1.0.1"
       }
     },
+    "node_modules/recharts": {
+      "version": "2.15.4",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.4.tgz",
+      "integrity": "sha512-UT/q6fwS3c1dHbXv2uFgYJ9BMFHu3fwnd7AYZaEQhXuYQ4hgsxLvsUXzGdKeZrW5xopzDCvuA2N41WJ88I7zIw==",
+      "deprecated": "1.x and 2.x branches are no longer active. Bump to Recharts v3 to receive latest features and bugfixes. See https://github.com/recharts/recharts/wiki/3.0-migration-guide",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.0.0",
+        "eventemitter3": "^4.0.1",
+        "lodash": "^4.17.21",
+        "react-is": "^18.3.1",
+        "react-smooth": "^4.0.4",
+        "recharts-scale": "^0.4.4",
+        "tiny-invariant": "^1.3.1",
+        "victory-vendor": "^36.6.8"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/recharts-scale": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
+      "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
+      "license": "MIT",
+      "dependencies": {
+        "decimal.js-light": "^2.4.1"
+      }
+    },
     "node_modules/regenerator-runtime": {
       "version": "0.13.11",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
@@ -2885,6 +3231,12 @@
         "utrie": "^1.0.2"
       }
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -2984,6 +3336,28 @@
         "base64-arraybuffer": "^1.0.2"
       }
     },
+    "node_modules/victory-vendor": {
+      "version": "36.9.2",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
+      "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==",
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
     "node_modules/vite": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.0.tgz",
diff --git a/package.json b/package.json
index 6f52232..54648c8 100755
--- a/package.json
+++ b/package.json
@@ -18,7 +18,8 @@
     "jszip": "^3.10.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "react-router-dom": "^7.13.1"
+    "react-router-dom": "^7.13.1",
+    "recharts": "^2.15.4"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.4",
diff --git a/public/logonowordmark.png b/public/logonowordmark.png
new file mode 100644
index 0000000..7366211
Binary files /dev/null and b/public/logonowordmark.png differ
diff --git a/src/App.jsx b/src/App.jsx
index 2413bef..224a8d1 100755
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,18 +1,32 @@
 import { lazy, Suspense, Component } from 'react';
 import { BrowserRouter, Routes, Route, Navigate, useParams } from 'react-router-dom';
-import { AuthProvider } from './context/AuthContext';
+import { AuthProvider, useAuth } from './context/AuthContext';
 import ProtectedRoute from './components/ProtectedRoute';
 import PageLoader from './components/PageLoader';
 
 class ChunkErrorBoundary extends Component {
   state = { error: null };
   static getDerivedStateFromError(error) { return { error }; }
+  componentDidCatch(error) {
+    const isChunkError = error?.name === 'ChunkLoadError'
+      || error?.message?.includes('dynamically imported module')
+      || error?.message?.includes('Failed to fetch');
+    if (isChunkError) {
+      const key = 'chunk_reload_attempted';
+      if (!sessionStorage.getItem(key)) {
+        sessionStorage.setItem(key, '1');
+        window.location.reload();
+        return;
+      }
+      sessionStorage.removeItem(key);
+    }
+  }
   render() {
     if (this.state.error) {
       return (
         <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '60vh', gap: 16 }}>
           <div style={{ fontSize: 14, color: 'var(--text-secondary)' }}>Page failed to load.</div>
-          <button className="btn btn-primary" onClick={() => { this.setState({ error: null }); window.location.reload(); }}>
+          <button className="btn btn-primary" onClick={() => { sessionStorage.removeItem('chunk_reload_attempted'); this.setState({ error: null }); window.location.reload(); }}>
             Reload
           </button>
         </div>
@@ -25,11 +39,10 @@ class ChunkErrorBoundary extends Component {
 import Login from './pages/Login';
 import PayInvoice from './pages/PayInvoice';
 
-const Settings = lazy(() => import('./pages/Settings'));
+const ProfilePage = lazy(() => import('./pages/Settings'));
 const CompaniesPage = lazy(() => import('./pages/CompaniesPage'));
 const CompanyDetail = lazy(() => import('./pages/CompanyDetail'));
 const Invoices = lazy(() => import('./pages/team/Invoices'));
-const MeetingNotes = lazy(() => import('./pages/team/MeetingNotes'));
 const RequestDetail = lazy(() => import('./pages/RequestDetail'));
 const CreateInvoice = lazy(() => import('./pages/team/CreateInvoice'));
 const CreateSubcontractorPO = lazy(() => import('./pages/team/CreateSubcontractorPO'));
@@ -48,6 +61,7 @@ const ExternalMyInvoiceCreate = lazy(() => import('./pages/external/MyInvoiceCre
 const Projects = lazy(() => import('./pages/Projects'));
 const ProjectDetailPage = lazy(() => import('./pages/ProjectDetailPage'));
 const DashboardPage = lazy(() => import('./pages/DashboardPage'));
+const TeamDashboard = lazy(() => import('./pages/team/TeamDashboard'));
 const RequestsPage = lazy(() => import('./pages/RequestsPage'));
 const MyInvoices = lazy(() => import('./pages/client/MyInvoices'));
 const NewRequest = lazy(() => import('./pages/client/NewRequest'));
@@ -68,6 +82,12 @@ function NavigateCompanyDetail() {
   return <Navigate to={`/company/${id}`} replace />;
 }
 
+function DashboardRoute() {
+  const { currentUser } = useAuth();
+  if (currentUser?.role === 'team') return <Navigate to="/team/dashboard" replace />;
+  return <DashboardPage />;
+}
+
 export default function App() {
   return (
     <AuthProvider>
@@ -77,7 +97,8 @@ export default function App() {
         <Routes>
           <Route path="/" element={<Login />} />
 
-          <Route path="/dashboard" element={<ProtectedRoute role={['team', 'external', 'client']}><DashboardPage /></ProtectedRoute>} />
+          <Route path="/dashboard" element={<ProtectedRoute role={['external', 'client']}><DashboardRoute /></ProtectedRoute>} />
+          <Route path="/team/dashboard" element={<ProtectedRoute role={['team']}><TeamDashboard /></ProtectedRoute>} />
           <Route path="/projects" element={<ProtectedRoute role={['team', 'external', 'client']}><Projects /></ProtectedRoute>} />
           <Route path="/projects/:id" element={<ProtectedRoute role={['team', 'external', 'client']}><ProjectDetailPage /></ProtectedRoute>} />
           <Route path="/tasks/:id" element={<RedirectRequestDetail />} />
@@ -88,7 +109,6 @@ export default function App() {
           <Route path="/companies/:id" element={<NavigateCompanyDetail />} />
           <Route path="/requests" element={<ProtectedRoute role={['team', 'external', 'client']}><RequestsPage /></ProtectedRoute>} />
           <Route path="/team-projects" element={<Navigate to="/projects" replace />} />
-          <Route path="/meeting-notes" element={<ProtectedRoute role="team"><MeetingNotes /></ProtectedRoute>} />
           <Route path="/invoices" element={<ProtectedRoute role="team"><Invoices /></ProtectedRoute>} />
           <Route path="/invoices/new" element={<ProtectedRoute role="team"><CreateInvoice /></ProtectedRoute>} />
           <Route path="/subcontractor-pos/new" element={<ProtectedRoute role="team"><CreateSubcontractorPO /></ProtectedRoute>} />
@@ -109,7 +129,9 @@ export default function App() {
           <Route path="/my-invoices-sub/new" element={<ProtectedRoute role="external"><ExternalMyInvoiceCreate /></ProtectedRoute>} />
           <Route path="/my-invoices-sub/:id" element={<ProtectedRoute role="external"><ExternalMyInvoiceDetail /></ProtectedRoute>} />
 
-          <Route path="/settings" element={<ProtectedRoute><Settings /></ProtectedRoute>} />
+          <Route path="/profile" element={<ProtectedRoute><ProfilePage /></ProtectedRoute>} />
+          <Route path="/profile/:id" element={<ProtectedRoute><ProfilePage /></ProtectedRoute>} />
+          <Route path="/settings" element={<Navigate to="/profile" replace />} />
 
           <Route path="/my-dashboard" element={<Navigate to="/dashboard" replace />} />
           <Route path="/my-company" element={<Navigate to="/company" replace />} />
diff --git a/src/components/FileAttachment.jsx b/src/components/FileAttachment.jsx
index b724d7f..65910e6 100755
--- a/src/components/FileAttachment.jsx
+++ b/src/components/FileAttachment.jsx
@@ -1,7 +1,7 @@
 import { useState, useRef } from 'react';
 
 const MAX_FILES = 20;
-const MAX_SIZE_MB = 50;
+const MAX_SIZE_MB = 250;
 const MAX_SIZE_BYTES = MAX_SIZE_MB * 1024 * 1024;
 
 const formatSize = (bytes) => {
@@ -74,7 +74,7 @@ export default function FileAttachment({ files, onChange }) {
         onDrop={handleDrop}
         style={{
           border: `2px dashed ${dragging ? 'var(--accent)' : files.length > 0 ? 'var(--accent)' : 'var(--border)'}`,
-          borderRadius: 8, padding: '18px 16px', textAlign: 'center',
+          borderRadius: 4, padding: '18px 16px', textAlign: 'center',
           background: dragging ? 'color-mix(in srgb, var(--accent) 8%, var(--bg))' : 'var(--bg)',
           transition: 'all 0.15s',
         }}
@@ -82,7 +82,7 @@ export default function FileAttachment({ files, onChange }) {
         <input type="file" multiple onChange={handleChange} style={{ display: 'none' }} id="req-file-upload" />
         <label htmlFor="req-file-upload" style={{ cursor: 'pointer' }}>
           <div style={{ fontSize: 22, marginBottom: 4 }}>{dragging ? '📂' : '📎'}</div>
-          <div style={{ fontWeight: 600, fontSize: 13, color: 'var(--text-primary)' }}>
+          <div style={{ fontWeight: 400, fontSize: 13, color: 'var(--text-primary)' }}>
             {dragging
               ? 'Drop files here'
               : files.length > 0
@@ -102,12 +102,12 @@ export default function FileAttachment({ files, onChange }) {
           {files.map((file, i) => (
             <div key={i} style={{
               display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-              padding: '7px 12px', background: 'var(--card-bg)', borderRadius: 8, border: '1px solid var(--border)',
+              padding: '7px 12px', background: 'var(--card-bg)', borderRadius: 4, border: '1px solid var(--border)',
             }}>
               <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                 <span>📄</span>
                 <div>
-                  <div style={{ fontSize: 13, fontWeight: 600 }}>{file.name}</div>
+                  <div style={{ fontSize: 13, fontWeight: 400 }}>{file.name}</div>
                   <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{formatSize(file.size)}</div>
                 </div>
               </div>
diff --git a/src/components/FileBrowser.jsx b/src/components/FileBrowser.jsx
index 4e551b0..76a1426 100644
--- a/src/components/FileBrowser.jsx
+++ b/src/components/FileBrowser.jsx
@@ -41,7 +41,7 @@ function FileIcon({ entry }) {
   const ext = (entry.name.includes('.') ? entry.name.split('.').pop() : '').toUpperCase().slice(0, 4) || 'FILE';
   const { bg, color } = fileIconStyle(ext);
   return (
-    <span className="file-icon" style={{ background: bg, color, border: 'none', fontSize: 9, fontWeight: 700, letterSpacing: 0.4, fontFamily: 'monospace' }}>
+    <span className="file-icon" style={{ background: bg, color, border: 'none', fontSize: 9, fontWeight: 400, letterSpacing: 0.4, fontFamily: 'monospace' }}>
       {ext}
     </span>
   );
@@ -497,7 +497,7 @@ export default function FileBrowser({ initialPath = '/', rootPath = '/', showSyn
                 placeholder="Folder name"
                 autoFocus
                 disabled={!configured || loading || Boolean(working)}
-                style={{ fontSize: 13, padding: '4px 8px', borderRadius: 6, border: '1px solid var(--border)', background: 'var(--input-bg)', color: 'var(--text-primary)', width: 160 }}
+                style={{ fontSize: 13, padding: '4px 8px', borderRadius: 4, border: '1px solid var(--border)', background: 'var(--input-bg)', color: 'var(--text-primary)', width: 160 }}
               />
               <LoadingButton type="submit" className="btn btn-outline btn-sm" loading={working === 'mkdir'} disabled={!folderName.trim() || !configured || loading || Boolean(working)} loadingText="Creating...">
                 Create
@@ -589,7 +589,7 @@ export default function FileBrowser({ initialPath = '/', rootPath = '/', showSyn
               onDragOver={isDragTarget ? (e) => handleFolderDragOver(e, entry) : undefined}
               onDragLeave={isDragTarget ? handleFolderDragLeave : undefined}
               onDrop={isDragTarget ? (e) => handleFolderDrop(e, entry) : undefined}
-              style={isDragOver ? { outline: '2px solid var(--accent)', borderRadius: 6 } : undefined}
+              style={isDragOver ? { outline: '2px solid var(--accent)', borderRadius: 4 } : undefined}
             >
               <FileIcon entry={entry} />
               {isRenaming ? (
@@ -600,7 +600,7 @@ export default function FileBrowser({ initialPath = '/', rootPath = '/', showSyn
                     onChange={(e) => setRenameValue(e.target.value)}
                     autoFocus
                     disabled={Boolean(working)}
-                    style={{ fontSize: 13, padding: '2px 8px', borderRadius: 6, border: '1px solid var(--border)', background: 'var(--input-bg)', color: 'var(--text-primary)', flex: 1, minWidth: 0 }}
+                    style={{ fontSize: 13, padding: '2px 8px', borderRadius: 4, border: '1px solid var(--border)', background: 'var(--input-bg)', color: 'var(--text-primary)', flex: 1, minWidth: 0 }}
                     onKeyDown={(e) => { if (e.key === 'Escape') setRenamingEntry(null); }}
                   />
                   <LoadingButton type="submit" className="btn btn-outline btn-sm" loading={working === `rename:${entry.path}`} disabled={!renameValue.trim() || Boolean(working)} loadingText="Renaming...">
diff --git a/src/components/FilterDropdown.jsx b/src/components/FilterDropdown.jsx
new file mode 100644
index 0000000..30c638c
--- /dev/null
+++ b/src/components/FilterDropdown.jsx
@@ -0,0 +1,36 @@
+import { useState, useEffect, useRef } from 'react';
+
+const FilterIcon = () => (
+  <svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M2 4h12M4 8h8M6 12h4"/>
+  </svg>
+);
+
+export default function FilterDropdown({ value, onChange, options }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    function handler(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [open]);
+  const current = options.find(o => o.value === value);
+  return (
+    <div ref={ref} style={{ position: 'relative' }}>
+      <button className="btn btn-outline btn-sm" onClick={() => setOpen(o => !o)} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+        <FilterIcon />
+        {current?.label}
+      </button>
+      {open && (
+        <div style={{ position: 'absolute', top: 'calc(100% + 4px)', right: 0, background: 'var(--card-bg)', border: '1px solid var(--border)', borderRadius: 4, zIndex: 200, minWidth: 160, boxShadow: '0 4px 12px rgba(0,0,0,0.25)' }}>
+          {options.map(opt => (
+            <button key={opt.value} onClick={() => { onChange(opt.value); setOpen(false); }} style={{ display: 'block', width: '100%', padding: '7px 14px', textAlign: 'left', background: value === opt.value ? 'rgba(245,165,35,0.08)' : 'transparent', fontSize: 13, color: value === opt.value ? 'var(--accent)' : 'var(--text-primary)', border: 'none', cursor: 'pointer' }}>
+              {opt.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
index b12981f..531f583 100755
--- a/src/components/Layout.jsx
+++ b/src/components/Layout.jsx
@@ -1,24 +1,42 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { NavLink, useNavigate, useLocation } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
 
+const ICONS = {
+  dashboard:   <svg viewBox="0 0 16 16" fill="currentColor"><rect x="1" y="1" width="6" height="6" rx="1.5"/><rect x="9" y="1" width="6" height="6" rx="1.5"/><rect x="1" y="9" width="6" height="6" rx="1.5"/><rect x="9" y="9" width="6" height="6" rx="1.5"/></svg>,
+  requests:    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><rect x="2" y="2" width="12" height="12" rx="1.5"/><line x1="5" y1="5.5" x2="11" y2="5.5"/><line x1="5" y1="8" x2="11" y2="8"/><line x1="5" y1="10.5" x2="8" y2="10.5"/></svg>,
+  projects:    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M1.5 5.5C1.5 4.67 2.17 4 3 4h2.5l1.5 2H13c.83 0 1.5.67 1.5 1.5v5.5c0 .83-.67 1.5-1.5 1.5H3c-.83 0-1.5-.67-1.5-1.5V5.5z"/></svg>,
+  fileSharing: <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M9 2H4a1.5 1.5 0 00-1.5 1.5v9A1.5 1.5 0 004 14h8a1.5 1.5 0 001.5-1.5V6L9 2z"/><polyline points="9,2 9,6 13.5,6"/></svg>,
+  invoices:    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><rect x="2" y="1.5" width="12" height="13" rx="1"/><line x1="8" y1="4" x2="8" y2="12"/><path d="M10 5.5H7a1.5 1.5 0 000 3h2a1.5 1.5 0 010 3H5.5"/></svg>,
+  notes:       <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><rect x="3" y="1.5" width="10" height="13" rx="1"/><line x1="5.5" y1="5" x2="10.5" y2="5"/><line x1="5.5" y1="7.5" x2="10.5" y2="7.5"/><line x1="5.5" y1="10" x2="8.5" y2="10"/></svg>,
+  survey:      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="1.5" y="9.5" width="3" height="5" rx="0.5"/><rect x="6.5" y="6" width="3" height="8.5" rx="0.5"/><rect x="11.5" y="2.5" width="3" height="12" rx="0.5"/></svg>,
+  brandBook:   <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M2.5 2.5h4a2 2 0 012 2v9a2 2 0 00-2-2h-4V2.5z"/><path d="M13.5 2.5h-4a2 2 0 00-2 2v9a2 2 0 012-2h4V2.5z"/></svg>,
+  converter:   <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="1.5" y="1.5" width="13" height="13" rx="1.5"/><circle cx="5.5" cy="5.5" r="1.5"/><path d="M1.5 11.5l3.5-3.5 3 3L11 7.5l3 3"/></svg>,
+  passwords:   <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="7" width="10" height="7.5" rx="1"/><path d="M5 7V5.5a3 3 0 016 0V7"/><circle cx="8" cy="10.5" r="1" fill="currentColor" stroke="none"/></svg>,
+  companies:   <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="1.5" y="5" width="13" height="9.5" rx="1"/><path d="M5.5 5V3a1 1 0 011-1h3a1 1 0 011 1v2"/><line x1="8" y1="5" x2="8" y2="14.5"/><line x1="1.5" y1="9" x2="14.5" y2="9"/></svg>,
+  users:       <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><circle cx="6" cy="5" r="2.5"/><path d="M1 14c0-2.76 2.24-5 5-5s5 2.24 5 5"/><circle cx="12.5" cy="5.5" r="2"/><path d="M12.5 10c1.93 0 3.5 1.57 3.5 3.5"/></svg>,
+};
+
+function NI({ icon }) {
+  return <span className="nav-icon">{icon}</span>;
+}
+
 function TeamNav({ onNav }) {
   const location = useLocation();
 
   const primaryLinks = [
-    { to: '/dashboard', label: 'Dashboard' },
-    { to: '/projects', label: 'Projects' },
-    { to: '/requests', label: 'Requests' },
-    { to: '/file-sharing', label: 'File Sharing' },
+    { to: '/team/dashboard', label: 'Dashboard',    icon: ICONS.dashboard },
+    { to: '/requests',     label: 'Requests',     icon: ICONS.requests },
+    { to: '/projects',     label: 'Projects',     icon: ICONS.projects },
+    { to: '/invoices',     label: 'Finances',     icon: ICONS.invoices },
+    { to: '/file-sharing', label: 'File Sharing', icon: ICONS.fileSharing },
   ];
 
   const utilityLinks = [
-    { to: '/meeting-notes', label: 'Meeting Notes' },
-    { to: '/invoices', label: 'Invoices & Expenses' },
-    { to: '/survey-maker', label: 'Survey Maker' },
-    { to: '/brand-book', label: 'Brand Book Maker' },
-    { to: '/converters', label: 'Image Converter' },
-    { to: '/fourge-passwords', label: 'Fourge Passwords' },
+    { to: '/survey-maker',     label: 'Survey Maker',       icon: ICONS.survey },
+    { to: '/brand-book',       label: 'Brand Book Maker',   icon: ICONS.brandBook },
+    { to: '/converters',       label: 'Image Converter',    icon: ICONS.converter },
+    { to: '/fourge-passwords', label: 'Fourge Passwords',   icon: ICONS.passwords },
   ];
 
   const isCompaniesActive = location.pathname === '/company' && !location.search.includes('tab=users');
@@ -26,51 +44,44 @@ function TeamNav({ onNav }) {
 
   return (
     <div className="sidebar-section">
-      {primaryLinks.map(({ to, label }) => (
+      {primaryLinks.map(({ to, label, icon }) => (
         <NavLink key={to} to={to} onClick={onNav} className={({ isActive }) => `sidebar-link${isActive ? ' active' : ''}`}>
-          {label}
+          <NI icon={icon} /><span className="nav-label">{label}</span>
         </NavLink>
       ))}
-      <div style={{ height: 1, margin: '10px 12px', background: 'var(--border)' }} />
-      <div style={{ padding: '0 12px 8px', fontSize: 11, fontWeight: 700, letterSpacing: 0.8, textTransform: 'uppercase', color: 'var(--text-muted)' }}>
-        Team Tools
+      <div className="sidebar-tools-divider" style={{ height: 1, margin: '10px 12px', background: 'var(--border)' }} />
+      <div className="sidebar-tools-label" style={{ padding: '0 12px 8px', fontSize: 11, fontWeight: 400, letterSpacing: 0.8, textTransform: 'uppercase', color: 'var(--text-muted)' }}>
+        Tools
       </div>
-      {utilityLinks.map(({ to, label }) => (
+      {utilityLinks.map(({ to, label, icon }) => (
         <NavLink key={to} to={to} onClick={onNav} className={({ isActive }) => `sidebar-link${isActive ? ' active' : ''}`}>
-          {label}
+          <NI icon={icon} /><span className="nav-label">{label}</span>
         </NavLink>
       ))}
       <NavLink to="/company" onClick={onNav} className={() => `sidebar-link${isCompaniesActive ? ' active' : ''}`}>
-        Companies
+        <NI icon={ICONS.companies} /><span className="nav-label">Companies</span>
       </NavLink>
       <NavLink to="/company?tab=users" onClick={onNav} className={() => `sidebar-link${isUsersActive ? ' active' : ''}`}>
-        Users
+        <NI icon={ICONS.users} /><span className="nav-label">Users</span>
       </NavLink>
     </div>
   );
 }
 
 function ClientNav({ onNav }) {
-  const { currentUser } = useAuth();
-  const companies = currentUser?.companies?.length
-    ? currentUser.companies
-    : currentUser?.company ? [currentUser.company] : [];
-  const companyTo = companies.length === 1 ? `/company/${companies[0].id}` : '/company';
-
   const links = [
-    { to: '/dashboard', label: 'Dashboard' },
-    { to: '/projects', label: 'Projects' },
-    { to: '/requests', label: 'Requests' },
-    { to: '/file-sharing', label: 'File Sharing' },
-    { to: '/my-invoices', label: 'Invoices' },
-    { to: companyTo, label: 'Company' },
+    { to: '/dashboard',    label: 'Dashboard',    icon: ICONS.dashboard },
+    { to: '/requests',     label: 'Requests',     icon: ICONS.requests },
+    { to: '/projects',     label: 'Projects',     icon: ICONS.projects },
+    { to: '/file-sharing', label: 'File Sharing', icon: ICONS.fileSharing },
+    { to: '/my-invoices',  label: 'Invoices',     icon: ICONS.invoices },
   ];
 
   return (
     <div className="sidebar-section">
-      {links.map(({ to, label }) => (
+      {links.map(({ to, label, icon }) => (
         <NavLink key={label} to={to} onClick={onNav} className={({ isActive }) => `sidebar-link${isActive ? ' active' : ''}`}>
-          {label}
+          <NI icon={icon} /><span className="nav-label">{label}</span>
         </NavLink>
       ))}
     </div>
@@ -79,30 +90,30 @@ function ClientNav({ onNav }) {
 
 function ExternalNav({ onNav }) {
   const links = [
-    { to: '/dashboard', label: 'Dashboard' },
-    { to: '/requests', label: 'Requests' },
-    { to: '/projects', label: 'Projects' },
-    { to: '/my-invoices-sub', label: 'Invoices' },
-    { to: '/file-sharing', label: 'File Sharing' },
-    { to: '/survey-maker', label: 'Survey Maker' },
-    { to: '/brand-book', label: 'Brand Book Maker' },
-    { to: '/converters', label: 'Image Converter' },
+    { to: '/dashboard',        label: 'Dashboard',        icon: ICONS.dashboard },
+    { to: '/requests',         label: 'Requests',         icon: ICONS.requests },
+    { to: '/projects',         label: 'Projects',         icon: ICONS.projects },
+    { to: '/my-invoices-sub',  label: 'Invoices',         icon: ICONS.invoices },
+    { to: '/file-sharing',     label: 'File Sharing',     icon: ICONS.fileSharing },
+    { to: '/survey-maker',     label: 'Survey Maker',     icon: ICONS.survey },
+    { to: '/brand-book',       label: 'Brand Book Maker', icon: ICONS.brandBook },
+    { to: '/converters',       label: 'Image Converter',  icon: ICONS.converter },
   ];
 
   return (
     <div className="sidebar-section">
-      {links.map(({ to, label }, index) => (
+      {links.map(({ to, label, icon }, index) => (
         <div key={to}>
           {index === 4 && (
             <>
-              <div style={{ height: 1, margin: '10px 12px', background: 'var(--border)' }} />
-              <div style={{ padding: '0 12px 8px', fontSize: 11, fontWeight: 700, letterSpacing: 0.8, textTransform: 'uppercase', color: 'var(--text-muted)' }}>
-                Team Tools
+              <div className="sidebar-tools-divider" style={{ height: 1, margin: '10px 12px', background: 'var(--border)' }} />
+              <div className="sidebar-tools-label" style={{ padding: '0 12px 8px', fontSize: 11, fontWeight: 400, letterSpacing: 0.8, textTransform: 'uppercase', color: 'var(--text-muted)' }}>
+                Tools
               </div>
             </>
           )}
           <NavLink to={to} onClick={onNav} className={({ isActive }) => `sidebar-link${isActive ? ' active' : ''}`}>
-            {label}
+            <NI icon={icon} /><span className="nav-label">{label}</span>
           </NavLink>
         </div>
       ))}
@@ -116,7 +127,22 @@ export default function Layout({ children }) {
   const location = useLocation();
   const [theme, setTheme] = useState(() => localStorage.getItem('theme') || 'dark');
   const [menuOpen, setMenuOpen] = useState(false);
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(() => localStorage.getItem('sidebarCollapsed') === 'true');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState({ projects: [], tasks: [] });
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [searchExpanded, setSearchExpanded] = useState(false);
+  const searchInputRef = useRef(null);
+  const [avatarOpen, setAvatarOpen] = useState(false);
+  const avatarRef = useRef(null);
+
+  const hour = new Date().getHours();
+  const timeOfDay = hour < 12 ? 'morning' : hour < 17 ? 'afternoon' : 'evening';
+  const firstName = currentUser?.name?.split(' ')[0] || '';
+  const isProfileRoute = location.pathname === '/profile' || location.pathname.startsWith('/profile/');
+  const headerTitle = isProfileRoute ? 'Profile' : `Good ${timeOfDay}${firstName ? `, ${firstName}` : ''}`;
+  const headerSubtitle = isProfileRoute
+    ? 'Account details and security settings.'
+    : "Here's what's happening today.";
 
   useEffect(() => {
     document.documentElement.setAttribute('data-theme', theme);
@@ -124,81 +150,146 @@ export default function Layout({ children }) {
   }, [theme]);
 
   useEffect(() => {
-    localStorage.setItem('sidebarCollapsed', String(sidebarCollapsed));
-  }, [sidebarCollapsed]);
+    if (!searchQuery.trim()) { setSearchResults({ projects: [], tasks: [] }); return; }
+    const t = setTimeout(async () => {
+      const { supabase } = await import('../lib/supabase');
+      const [{ data: projects }, { data: tasks }] = await Promise.all([
+        supabase.from('projects').select('id, name').ilike('name', `%${searchQuery}%`).limit(6),
+        supabase.from('tasks').select('id, title').ilike('title', `%${searchQuery}%`).limit(6),
+      ]);
+      setSearchResults({ projects: projects || [], tasks: tasks || [] });
+    }, 280);
+    return () => clearTimeout(t);
+  }, [searchQuery]);
+
+  useEffect(() => {
+    if (!avatarOpen) return;
+    function handler(e) {
+      if (avatarRef.current && !avatarRef.current.contains(e.target)) setAvatarOpen(false);
+    }
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [avatarOpen]);
 
-  // Close menu on route change (derived-state pattern, no effect needed)
   const [lastPathname, setLastPathname] = useState(location.pathname);
   if (lastPathname !== location.pathname) {
     setLastPathname(location.pathname);
     setMenuOpen(false);
+    setAvatarOpen(false);
   }
 
   const toggleTheme = () => setTheme(t => t === 'dark' ? 'light' : 'dark');
-  const handleLogout = async () => {
-    await logout();
-    navigate('/');
-  };
+  const handleLogout = async () => { await logout(); navigate('/'); };
 
-  const initials = currentUser?.name
-    ?.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+  const hasResults = searchResults.projects.length > 0 || searchResults.tasks.length > 0;
 
   return (
-    <div className={`app-layout${sidebarCollapsed ? ' sidebar-collapsed' : ''}`}>
-      {/* Overlay */}
+    <div className="app-layout">
       {menuOpen && <div className="sidebar-overlay" onClick={() => setMenuOpen(false)} />}
 
       <aside className={`sidebar${menuOpen ? ' sidebar-open' : ''}`}>
         <div className="sidebar-logo">
-          <img className="brand-logo brand-logo-sidebar" src="/fourge-logo.png" alt="Fourge Branding" />
-          <button
-            className="sidebar-pin-toggle"
-            onClick={() => setSidebarCollapsed(current => !current)}
-            title={sidebarCollapsed ? 'Pin sidebar open' : 'Collapse sidebar'}
-            aria-label={sidebarCollapsed ? 'Pin sidebar open' : 'Collapse sidebar'}
-          >
-            {sidebarCollapsed ? '›' : '‹'}
-          </button>
+          <img className="brand-logo brand-logo-sidebar" src="/logonowordmark.png" alt="Fourge Branding" />
         </div>
 
-        {!sidebarCollapsed && (
-          currentUser?.role === 'team'
-            ? <TeamNav onNav={() => setMenuOpen(false)} />
-            : currentUser?.role === 'external'
-              ? <ExternalNav onNav={() => setMenuOpen(false)} />
-              : <ClientNav onNav={() => setMenuOpen(false)} />
-        )}
+        {currentUser?.role === 'team'
+          ? <TeamNav onNav={() => setMenuOpen(false)} />
+          : currentUser?.role === 'external'
+            ? <ExternalNav onNav={() => setMenuOpen(false)} />
+            : <ClientNav onNav={() => setMenuOpen(false)} />
+        }
 
-        <div className="sidebar-bottom">
-          <NavLink to="/settings" onClick={() => setMenuOpen(false)} className={({ isActive }) => `sidebar-link${isActive ? ' active' : ''}`}>
-            <div className="sidebar-avatar" style={{ width: 28, height: 28, fontSize: 11, flexShrink: 0 }}>{initials}</div>
-            <div className="sidebar-user-info">
-              <div className="sidebar-user-name">{currentUser?.name || 'Set your name'}</div>
-              <div className="sidebar-user-role">{currentUser?.role === 'external' ? 'Team' : currentUser?.role}</div>
-            </div>
-          </NavLink>
-          <div className="sidebar-bottom-actions">
-            {!sidebarCollapsed && <button className="sidebar-link" style={{ flex: 1 }} onClick={handleLogout}>Sign Out</button>}
-            <button
-              onClick={toggleTheme}
-              className="sidebar-theme-toggle"
-              title={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
-            >
-              {theme === 'dark' ? '☀' : '☾'}
-            </button>
-          </div>
-        </div>
       </aside>
 
       <div className="main-wrapper">
-        {/* Mobile top bar inside main wrapper so it sits at the top */}
         <div className="mobile-topbar">
           <button className="hamburger" onClick={() => setMenuOpen(o => !o)} aria-label="Menu">
             <span /><span /><span />
           </button>
           <img className="brand-logo brand-logo-mobile" src="/fourge-logo.png" alt="Fourge Branding" />
         </div>
+
         <main className="main-content">
+        <div className="site-header">
+          <div>
+            <div className="site-header-greeting">{headerTitle}</div>
+            <div className="site-header-sub">{headerSubtitle}</div>
+          </div>
+          <div className="site-header-right">
+            <div className="site-header-search-wrap">
+              {!searchExpanded ? (
+                <button
+                  className="site-header-search-btn"
+                  onClick={() => { setSearchExpanded(true); setTimeout(() => searchInputRef.current?.focus(), 50); }}
+                  aria-label="Search"
+                >
+                  <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><circle cx="6.5" cy="6.5" r="4"/><line x1="10" y1="10" x2="14" y2="14"/></svg>
+                </button>
+              ) : (
+                <>
+                  <input
+                    ref={searchInputRef}
+                    className="site-header-search"
+                    type="text"
+                    placeholder="Search projects & tasks..."
+                    value={searchQuery}
+                    onChange={e => setSearchQuery(e.target.value)}
+                    onFocus={() => setSearchOpen(true)}
+                    onBlur={() => setTimeout(() => { setSearchOpen(false); setSearchExpanded(false); setSearchQuery(''); }, 150)}
+                    onKeyDown={e => { if (e.key === 'Escape') { setSearchOpen(false); setSearchExpanded(false); setSearchQuery(''); } }}
+                  />
+                </>
+              )}
+              {searchOpen && searchQuery.trim() && (
+                <div className="site-header-dropdown">
+                  {!hasResults && <div className="site-header-dropdown-empty">No results for "{searchQuery}"</div>}
+                  {searchResults.projects.length > 0 && (
+                    <>
+                      <div className="site-header-dropdown-group">Projects</div>
+                      {searchResults.projects.map(p => (
+                        <div key={p.id} className="site-header-dropdown-item" onMouseDown={() => { navigate(`/projects/${p.id}`); setSearchQuery(''); setSearchOpen(false); setSearchExpanded(false); }}>
+                          <span className="nav-icon" style={{ opacity: 0.6 }}>{ICONS.projects}</span>
+                          {p.name}
+                        </div>
+                      ))}
+                    </>
+                  )}
+                  {searchResults.tasks.length > 0 && (
+                    <>
+                      <div className="site-header-dropdown-group">Tasks</div>
+                      {searchResults.tasks.map(r => (
+                        <div key={r.id} className="site-header-dropdown-item" onMouseDown={() => { navigate(`/requests/${r.id}`); setSearchQuery(''); setSearchOpen(false); setSearchExpanded(false); }}>
+                          <span className="nav-icon" style={{ opacity: 0.6 }}>{ICONS.requests}</span>
+                          {r.title}
+                        </div>
+                      ))}
+                    </>
+                  )}
+                </div>
+              )}
+            </div>
+
+            <button onClick={toggleTheme} className="site-header-theme-toggle" title={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}>
+              {theme === 'dark'
+                ? <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="8" cy="8" r="3"/><line x1="8" y1="1" x2="8" y2="2.5"/><line x1="8" y1="13.5" x2="8" y2="15"/><line x1="1" y1="8" x2="2.5" y2="8"/><line x1="13.5" y1="8" x2="15" y2="8"/><line x1="3" y1="3" x2="4.1" y2="4.1"/><line x1="11.9" y1="11.9" x2="13" y2="13"/><line x1="13" y1="3" x2="11.9" y2="4.1"/><line x1="4.1" y1="11.9" x2="3" y2="13"/></svg>
+                : <svg viewBox="0 0 16 16" fill="currentColor" stroke="none"><path d="M14 8.53A6 6 0 1 1 7.47 2 4.67 4.67 0 0 0 14 8.53Z"/></svg>
+              }
+            </button>
+
+            <div className="site-header-avatar-wrap" ref={avatarRef}>
+              <button className="site-header-avatar-btn" onClick={() => setAvatarOpen(o => !o)} aria-label="Account menu">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4.4 3.6-7 8-7s8 2.6 8 7" fill="currentColor"/></svg>
+              </button>
+              {avatarOpen && (
+                <div className="site-header-avatar-menu">
+                  <button className="site-header-avatar-item" onClick={() => { navigate('/profile'); setAvatarOpen(false); }}>Settings</button>
+                  <div className="site-header-avatar-divider" />
+                  <button className="site-header-avatar-item" onClick={handleLogout}>Sign Out</button>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
           {children}
         </main>
       </div>
diff --git a/src/components/ProtectedRoute.jsx b/src/components/ProtectedRoute.jsx
index 0dd3822..12a0185 100755
--- a/src/components/ProtectedRoute.jsx
+++ b/src/components/ProtectedRoute.jsx
@@ -1,13 +1,18 @@
 import { Navigate } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
 
-export default function ProtectedRoute({ children, role }) {
+function getRoleHomePath(role) {
+  if (role === 'team') return '/team/dashboard';
+  return '/dashboard';
+}
+
+export default function ProtectedRoute({ children, role, redirectTo }) {
   const { currentUser } = useAuth();
   if (!currentUser) return <Navigate to="/" replace />;
   if (role) {
     const allowed = Array.isArray(role) ? role : [role];
     if (!allowed.includes(currentUser.role)) {
-      return <Navigate to="/dashboard" replace />;
+      return <Navigate to={redirectTo || getRoleHomePath(currentUser.role)} replace />;
     }
   }
   return children;
diff --git a/src/components/RequestForm.jsx b/src/components/RequestForm.jsx
index 6a79e34..a0b1c84 100644
--- a/src/components/RequestForm.jsx
+++ b/src/components/RequestForm.jsx
@@ -195,7 +195,7 @@ export default function RequestForm({
 
       <div className="form-group">
         <label>Request Title *</label>
-        <input type="text" placeholder="e.g. Street Name" value={form.title} onChange={set('title')} required />
+        <input type="text" placeholder="e.g. City, State or Site Name" value={form.title} onChange={set('title')} required />
       </div>
 
       <div className="form-group">
diff --git a/src/index.css b/src/index.css
index 1e7de1f..517bd13 100755
--- a/src/index.css
+++ b/src/index.css
@@ -8,6 +8,10 @@
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
 :root {
+  --motion-fast: 160ms;
+  --motion-base: 220ms;
+  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --h-control: 30px;
   --sidebar-bg: #0d0d0d;
   --sidebar-text: #888888;
   --sidebar-active-text: #ffffff;
@@ -15,34 +19,43 @@
   --sidebar-hover-bg: #1a1a1a;
   --accent: #F5A523;
   --accent-hover: #e09510;
-  --bg: #111111;
-  --card-bg: #1a1a1a;
-  --card-bg-2: #222222;
+  --bg:
+    radial-gradient(560px circle at 58% -6%, rgba(245, 165, 35, 0.16) 0%, rgba(245, 165, 35, 0.105) 24%, rgba(245, 165, 35, 0.055) 48%, rgba(245, 165, 35, 0.018) 72%, rgba(245, 165, 35, 0) 100%),
+    linear-gradient(180deg, #111111 0%, #0d0d0d 42%, #0a0a0a 100%);
+  --card-bg: rgba(255, 255, 255, 0.02);
+  --card-bg-2: rgba(255, 255, 255, 0.08);
   --text-primary: #ffffff;
   --text-secondary: #a8a8a8;
   --text-muted: #666666;
-  --border: #2a2a2a;
-  --interactive-hover-border: #3a3a3a;
-  --interactive-row-hover: rgba(255,255,255,0.02);
+  --border: rgba(245, 165, 35, 0.15);
+  --interactive-hover-border: rgba(245, 165, 35, 0.3);
+  --interactive-row-hover: rgba(255,255,255,0.03);
   --danger: #ef4444;
   --success: #22c55e;
 }
 
+@keyframes ui-fade-up {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
 [data-theme="light"] {
-  --sidebar-bg: #1a1a1a;
-  --sidebar-text: #888888;
-  --sidebar-active-text: #ffffff;
-  --sidebar-active-bg: #2a2a2a;
-  --sidebar-hover-bg: #2a2a2a;
-  --bg: #f4f4f4;
-  --card-bg: #ffffff;
-  --card-bg-2: #f0f0f0;
-  --text-primary: #1a1a1a;
-  --text-secondary: #5a5a5a;
-  --text-muted: #999999;
-  --border: #e0e0e0;
-  --interactive-hover-border: #d0d0d0;
-  --interactive-row-hover: #fafafa;
+  --sidebar-bg: #ffffff;
+  --sidebar-text: rgba(0,0,0,0.45);
+  --sidebar-active-text: #0d0d0d;
+  --sidebar-active-bg: rgba(0,0,0,0.1);
+  --sidebar-hover-bg: rgba(0,0,0,0.08);
+  --bg:
+    radial-gradient(560px circle at 58% -6%, rgba(78,78,78,0.42) 0%, rgba(78,78,78,0.29) 24%, rgba(78,78,78,0.16) 48%, rgba(78,78,78,0.06) 72%, rgba(78,78,78,0) 100%),
+    linear-gradient(180deg, #ffffff 0%, #ffffff 42%, #ffffff 100%);
+  --card-bg: rgba(0,0,0,0.02);
+  --card-bg-2: rgba(0,0,0,0.08);
+  --text-primary: #0d0d0d;
+  --text-secondary: rgba(0,0,0,0.6);
+  --text-muted: rgba(0,0,0,0.38);
+  --border: rgba(0,0,0,0.1);
+  --interactive-hover-border: rgba(0,0,0,0.2);
+  --interactive-row-hover: rgba(0,0,0,0.025);
 }
 [data-theme="light"] input[type="text"],
 [data-theme="light"] input[type="email"],
@@ -102,23 +115,25 @@ body {
 .app-layout { display: flex; height: 100vh; overflow: hidden; }
 
 .sidebar {
-  width: 240px;
-  min-width: 240px;
+  width: 76px;
+  min-width: 76px;
   background: var(--sidebar-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
   display: flex;
   flex-direction: column;
   padding: 24px 0;
   position: fixed;
-  top: 0; left: 0;
-  height: 100vh;
-  overflow-y: auto;
-  border-right: 1px solid var(--border);
-  transition: width 0.2s ease, min-width 0.2s ease;
+  top: 24px; left: 24px;
+  height: calc(100vh - 48px);
+  overflow: visible;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  z-index: 200;
 }
 
 .sidebar-logo {
-  padding: 0 20px 24px;
-  border-bottom: 1px solid var(--border);
+  padding: 0 12px 24px;
   margin-bottom: 16px;
   position: relative;
 }
@@ -127,70 +142,89 @@ body {
   height: auto;
 }
 .brand-logo-sidebar {
-  width: 140px;
+  display: block;
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
+  margin: 0 auto;
 }
-.sidebar-pin-toggle {
-  position: absolute;
-  right: 12px;
-  top: 0;
-  width: 26px;
-  height: 26px;
-  border-radius: 4px;
-  border: 1px solid #333;
-  background: transparent;
-  color: var(--sidebar-text);
-  cursor: pointer;
-  font-size: 18px;
-  line-height: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.sidebar-pin-toggle:hover {
-  background: var(--sidebar-hover-bg);
-  color: #fff;
+[data-theme="dark"] .brand-logo-sidebar {
+  filter: brightness(0) invert(1);
 }
 .brand-logo-auth {
   width: 200px;
   margin: 0 auto 8px;
 }
-.sidebar-logo h1 { font-size: 18px; font-weight: 700; color: #fff; letter-spacing: -0.3px; }
+.sidebar-logo h1 { font-size: 18px; font-weight: 400; color: #fff; letter-spacing: -0.3px; }
 .sidebar-logo span { font-size: 12px; color: var(--sidebar-text); }
 
-.sidebar-section { padding: 0 12px; margin-bottom: 8px; }
+.sidebar-section { padding: 0 8px; margin-bottom: 8px; }
 .sidebar-section-label {
-  font-size: 10px; font-weight: 600; text-transform: uppercase;
+  font-size: 10px; font-weight: 400; text-transform: uppercase;
   letter-spacing: 0.8px; color: #444; padding: 0 8px; margin-bottom: 4px;
 }
 
 .sidebar-link {
   display: flex; align-items: center; gap: 10px;
-  padding: 9px 12px; border-radius: 4px;
+  justify-content: center;
+  padding: 10px 8px; border-radius: 4px;
   color: var(--sidebar-text); text-decoration: none;
   font-size: 13px; font-weight: 500;
   transition: background 0.15s, color 0.15s;
-  cursor: pointer; border: none; background: none;
+  cursor: pointer; border: 1px solid transparent; background: none;
   width: 100%; text-align: left;
+  position: relative;
 }
-.sidebar-link:hover { background: var(--sidebar-hover-bg); color: #fff; }
-.sidebar-link.active { background: var(--sidebar-active-bg); color: #fff; border: 1px solid rgba(245,165,35,0.3); }
+.sidebar-link:hover .nav-icon,
+.sidebar-link.active .nav-icon { color: var(--accent); opacity: 1; }
+.sidebar-link.active { cursor: default; pointer-events: none; }
 .sidebar-link .icon { font-size: 15px; width: 18px; text-align: center; opacity: 0.7; }
+.nav-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 16px; height: 16px; opacity: 0.7; color: inherit; transition: color var(--motion-fast) var(--motion-ease), opacity var(--motion-fast) var(--motion-ease); }
+.nav-icon svg { width: 16px; height: 16px; display: block; }
+.nav-label {
+  position: absolute;
+  left: calc(100% + 10px);
+  top: 50%;
+  transform: translateY(-50%);
+  background: var(--sidebar-bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 4px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #ffffff;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.1s ease;
+  z-index: 300;
+}
+.sidebar-link:hover .nav-label { opacity: 1; }
+[data-theme="light"] .nav-label { color: #0d0d0d; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
+.sidebar-tools-divider,
+.sidebar-tools-label { display: none; }
+.grid-card { background: var(--card-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer; transition: background 0.15s; }
+.grid-card:hover { background: var(--card-bg-2); }
+[data-theme="light"] .grid-card:hover { background: #fafafa; }
 
 .sidebar-bottom {
-  margin-top: auto; padding: 16px 12px 0;
+  margin-top: auto; padding: 16px 8px 0;
   border-top: 1px solid var(--border);
 }
 .sidebar-bottom-actions {
   display: flex;
   align-items: center;
-  padding: 0 12px;
+  justify-content: center;
+  padding: 0;
   gap: 8px;
 }
 .sidebar-theme-toggle {
+  width: 32px;
+  height: 32px;
   background: transparent;
   border: 1px solid #333;
   border-radius: 4px;
-  padding: 7px 10px;
+  padding: 0;
   cursor: pointer;
   color: #888;
   font-size: 13px;
@@ -198,76 +232,79 @@ body {
   transition: all 0.15s;
   flex-shrink: 0;
 }
-.sidebar-theme-toggle:hover {
-  background: var(--sidebar-hover-bg);
-  color: #fff;
-}
+.sidebar-theme-toggle:hover { color: #fff; }
 .sidebar-user { padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
 .sidebar-avatar {
   width: 30px; height: 30px; border-radius: 4px;
   background: var(--accent); display: flex; align-items: center;
   justify-content: center; color: #1a1a1a; font-size: 12px;
-  font-weight: 700; flex-shrink: 0;
+  font-weight: 400; flex-shrink: 0;
 }
-.sidebar-user-info { overflow: hidden; }
-.sidebar-user-name { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.sidebar-user-info { display: none; }
+.sidebar-user-name { font-size: 13px; font-weight: 400; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .sidebar-user-role { font-size: 11px; color: var(--sidebar-text); text-transform: capitalize; }
 
-.main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
-.main-wrapper { transition: margin-left 0.2s ease; }
-.main-content { flex: 1; padding: 32px; overflow-y: auto; display: flex; flex-direction: column; min-height: 0; }
-
-.app-layout.sidebar-collapsed .sidebar {
-  width: 76px;
-  min-width: 76px;
-}
-.app-layout.sidebar-collapsed .main-wrapper {
-  margin-left: 76px;
-}
-.app-layout.sidebar-collapsed .sidebar-logo {
-  padding: 0 12px 52px;
-}
-.app-layout.sidebar-collapsed .brand-logo-sidebar {
-  display: none;
-}
-.app-layout.sidebar-collapsed .sidebar-pin-toggle {
-  left: 50%;
-  right: auto;
-  top: 0;
-  transform: translateX(-50%);
-}
-.app-layout.sidebar-collapsed .sidebar-avatar {
-  margin: 0 auto;
-}
-.app-layout.sidebar-collapsed .sidebar-user-info {
-  display: none;
-}
-.app-layout.sidebar-collapsed .sidebar-bottom {
-  padding-left: 8px;
-  padding-right: 8px;
-}
-.app-layout.sidebar-collapsed .sidebar-bottom-actions {
-  justify-content: center;
-  padding: 8px 0 0;
-}
-.app-layout.sidebar-collapsed .sidebar-theme-toggle {
-  width: 32px;
-  height: 32px;
-  padding: 0;
-}
+.main-wrapper { margin-left: 100px; flex: 1; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
+.main-content { flex: 1; padding: 24px; overflow-y: scroll; display: block; min-height: 0; scrollbar-gutter: stable; }
+.site-header { display: flex; align-items: flex-start; justify-content: space-between; padding-top: 24px; padding-bottom: 24px; flex-shrink: 0; position: relative; z-index: 50; }
+.site-header-greeting { font-size: 28px; font-weight: 500; color: var(--text-primary); line-height: 1.2; letter-spacing: -0.3px; }
+.site-header-sub { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
+.hot-items-row { cursor: pointer; }
+.hot-items-row:hover td { background: rgba(255,255,255,0.04); }
+.site-header-right { display: flex; align-items: center; gap: 0; }
+.site-header-search-wrap { position: relative; margin-right: 7px; }
+.site-header-search-btn { background: none; border: 1px solid transparent; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 4px; }
+.site-header-search-btn:hover { color: var(--accent); }
+.site-header-search-btn svg { width: 16px; height: 16px; }
+.site-header-search { width: 240px; height: 34px; background: var(--card-bg-2); border: 1px solid var(--border); border-radius: 4px; color: var(--text-primary); font-size: 13px; padding: 0 12px 0 34px; outline: none; font-family: inherit; transition: border-color 0.15s, width 0.2s; }
+.site-header-search:focus { border-color: var(--accent); width: 300px; }
+.site-header-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; display: flex; }
+.site-header-search-icon svg { width: 14px; height: 14px; }
+.site-header-dropdown { position: absolute; top: calc(100% + 6px); right: 0; width: 340px; background: var(--sidebar-bg); border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 300; overflow: hidden; }
+.site-header-dropdown { animation: ui-fade-up var(--motion-fast) var(--motion-ease); }
+.site-header-dropdown-group { padding: 8px 12px 4px; font-size: 10px; font-weight: 500; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-muted); }
+.site-header-dropdown-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; font-size: 13px; color: var(--text-primary); border: 1px solid transparent; }
+.site-header-dropdown-item:hover { color: #fff; }
+.site-header-dropdown-empty { padding: 12px; font-size: 13px; color: var(--text-muted); text-align: center; }
+.site-header-avatar-wrap { position: relative; margin-left: 14px; }
+.site-header-theme-toggle { background: none; border: 1px solid transparent; border-radius: 4px; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; flex-shrink: 0; }
+.site-header-theme-toggle:hover { color: var(--accent); }
+.site-header-theme-toggle svg { width: 16px; height: 16px; display: block; flex-shrink: 0; }
+.site-header-avatar-btn { width: 49px; height: 49px; border-radius: 50%; background: var(--card-bg-2); border: 2px solid #111; outline: 2px solid var(--accent); outline-offset: 0; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: opacity 0.15s; padding: 0; }
+.site-header-avatar-btn:hover { opacity: 0.85; }
+[data-theme="light"] .site-header-avatar-btn { border-color: #fff; }
+.site-header-avatar-menu { position: absolute; top: calc(100% + 8px); right: 0; background: var(--sidebar-bg); border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 300; min-width: 160px; overflow: hidden; }
+.site-header-avatar-menu { animation: ui-fade-up var(--motion-fast) var(--motion-ease); }
+.site-header-avatar-item { padding: 10px 16px; cursor: pointer; font-size: 13px; color: var(--text-primary); display: block; width: 100%; text-align: left; background: none; border: 1px solid transparent; font-family: inherit; }
+.site-header-avatar-item:hover { color: #fff; }
+.site-header-avatar-divider { height: 1px; background: var(--border); margin: 4px 0; }
+.main-content::-webkit-scrollbar { width: 8px; }
+.main-content::-webkit-scrollbar-track { background: var(--bg); }
+.main-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
+.main-content::-webkit-scrollbar-thumb:hover { background: var(--interactive-hover-border); }
 
 /* Page header */
 .page-header {
   margin-bottom: 24px; display: flex;
-  align-items: flex-start; justify-content: space-between; gap: 16px;
-  background: var(--card-bg); border-radius: 8px; border: 1px solid var(--border); padding: 20px;
+  align-items: flex-end; justify-content: space-between; gap: 16px;
+  border-bottom: 1px solid var(--border); padding-bottom: 20px;
+  position: sticky; top: 0; background: rgba(13,13,13,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 10;
+  flex-shrink: 0; padding-top: 32px;
 }
-.page-title { font-size: 22px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.3px; }
-.page-subtitle { font-size: 13px; color: var(--text-secondary); margin-top: 3px; }
+.page-title { font-size: 22px; font-weight: 400; color: var(--text-primary); letter-spacing: -0.3px; }
+.page-subtitle { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
+.dashboard-banner { font-size: 13px; color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.3px; }
+.page-header-left { display: flex; flex-direction: column; justify-content: flex-end; }
+.dashboard-greeting { font-size: 35px !important; letter-spacing: -0.5px; }
+.dashboard-header-stats { display: flex; align-items: flex-end; gap: 0; align-self: flex-end; }
+.dashboard-header-stat { display: flex; flex-direction: column; align-items: flex-end; padding: 0 14px; border-right: 1px solid var(--border); }
+.dashboard-header-stat:last-child { border-right: none; padding-right: 0; }
+.dashboard-header-stat-label { font-size: 9px; font-weight: 400; color: var(--text-muted); letter-spacing: 0.5px; text-transform: uppercase; }
+.dashboard-header-stat-value { font-size: 15px; font-weight: 400; color: var(--text-primary); margin-top: 2px; }
 
 /* Cards */
-.card { background: var(--card-bg); border-radius: 8px; border: 1px solid var(--border); padding: 20px; }
-.card-title { font-size: 14px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 16px; }
+.card { background: var(--card-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 4px; border: 1px solid var(--border); padding: 15px; }
+.card-title { font-size: 14px; font-weight: 400; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 16px; }
 .page-toolbar {
   margin-bottom: 24px;
 }
@@ -302,7 +339,18 @@ body {
 
 /* Stats */
 .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 28px; }
-.stat-card { background: var(--card-bg); border-radius: 8px; border: 1px solid var(--border); padding: 20px; }
+.dash-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 24px; }
+.profile-top-grid { display: grid; grid-template-columns: 60fr 40fr; gap: 24px; align-items: start; }
+.stat-card { background: var(--card-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 4px; border: 1px solid var(--border); padding: 20px; }
+.stat-bar { display: grid; grid-template-columns: repeat(5, 1fr); margin-bottom: 24px; flex-shrink: 0; }
+.stat-bar-item { background: rgba(255,255,255,0.05); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(245,165,35,0.15); border-right: none; padding: 16px 18px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
+.stat-bar-header { display: flex; align-items: flex-start; justify-content: space-between; }
+.stat-bar-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; }
+.stat-bar-item:last-child { border-right: 1px solid rgba(245,165,35,0.15); border-radius: 0 4px 4px 0; }
+.stat-bar-item:first-child { border-radius: 4px 0 0 4px; }
+[data-theme="light"] .stat-bar-item { background: rgba(255,255,255,0.7); border-color: rgba(245,165,35,0.2); }
+.stat-bar-label { font-size: 10px; font-weight: 400; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 10px; }
+.stat-bar-value { font-size: 32px; font-weight: 400; color: var(--text-primary); line-height: 1; }
 .stat-card-highlight {
   border-color: rgba(245, 165, 35, 0.45);
   background:
@@ -310,7 +358,7 @@ body {
     var(--card-bg);
   box-shadow: inset 0 0 0 1px rgba(245, 165, 35, 0.08);
 }
-.stat-value { font-size: 32px; font-weight: 700; color: var(--text-primary); letter-spacing: -1px; }
+.stat-value { font-size: 32px; font-weight: 400; color: var(--text-primary); letter-spacing: -1px; }
 .stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.4px; }
 .stat-icon { display: none; }
 .dashboard-chart-grid {
@@ -320,8 +368,10 @@ body {
 }
 .dashboard-chart-card {
   background: var(--card-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: 4px;
   padding: 20px;
 }
 .dashboard-chart-content {
@@ -330,6 +380,28 @@ body {
   gap: 20px;
   align-items: center;
 }
+.pie-charts-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0;
+}
+@media (max-width: 1200px) {
+  .pie-charts-grid { grid-template-columns: 1fr; }
+  .pie-chart-cell-first { border-right: none; border-bottom: 1px solid var(--border); }
+  .profile-top-grid { grid-template-columns: 1fr; }
+}
+.dashboard-bottom-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  margin-top: 24px;
+}
+.pie-chart-cell {
+  padding: 20px;
+}
+.pie-chart-cell-first {
+  border-right: 1px solid var(--border);
+}
 .dashboard-pie-wrap {
   display: flex;
   align-items: center;
@@ -409,14 +481,16 @@ body {
 .status-stat-card,
 .status-component {
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: 4px;
   background: var(--card-bg-2);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
   padding: 12px 14px;
 }
 
 .status-stat-value {
   font-size: 20px;
-  font-weight: 700;
+  font-weight: 400;
   color: var(--text-primary);
   letter-spacing: -0.3px;
 }
@@ -437,8 +511,10 @@ body {
 
 .status-meter {
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: 4px;
   background: var(--card-bg-2);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
   padding: 14px 16px;
 }
 
@@ -479,8 +555,10 @@ body {
 
 .meeting-note-content {
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: 4px;
   background: var(--card-bg-2);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
   padding: 16px;
 }
 
@@ -493,7 +571,7 @@ body {
 
 .meeting-note-title {
   font-size: 15px;
-  font-weight: 700;
+  font-weight: 400;
   color: var(--text-primary);
 }
 
@@ -519,7 +597,7 @@ body {
   max-width: none;
   background: var(--card-bg);
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: 4px;
   overflow: hidden;
   position: relative;
   flex: 1;
@@ -536,7 +614,7 @@ body {
   height: 3px;
   z-index: 10;
   background: transparent;
-  border-radius: 8px 8px 0 0;
+  border-radius: 4px 4px 0 0;
   overflow: hidden;
 }
 
@@ -583,11 +661,11 @@ body {
   border: 1px solid var(--border);
   background: var(--card-bg-2);
   color: var(--text-primary);
-  border-radius: 6px;
+  border-radius: 4px;
   padding: 7px 10px;
   font-family: inherit;
   font-size: 12px;
-  font-weight: 600;
+  font-weight: 400;
   cursor: pointer;
 }
 
@@ -654,7 +732,7 @@ body {
   min-height: 38px;
   color: var(--text-muted);
   font-size: 10px;
-  font-weight: 700;
+  font-weight: 400;
   text-transform: uppercase;
   letter-spacing: 0.6px;
   background: var(--card-bg);
@@ -668,7 +746,7 @@ body {
   width: 28px;
   height: 28px;
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: 4px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -684,7 +762,7 @@ body {
   white-space: nowrap;
   color: var(--text-primary);
   font-size: 13px;
-  font-weight: 600;
+  font-weight: 400;
 }
 
 .file-name-button {
@@ -727,7 +805,7 @@ body {
   color: var(--text-secondary);
   display: inline-flex;
   align-items: center;
-  border-radius: 6px;
+  border-radius: 4px;
   font-family: inherit;
   font-size: 17px;
   line-height: 1;
@@ -737,6 +815,9 @@ body {
   color: var(--text-primary);
   background: var(--interactive-row-hover);
 }
+[data-theme="light"] .btn-icon:hover:not(:disabled) {
+  background: rgba(0,0,0,0.06);
+}
 .btn-icon:disabled {
   opacity: 0.4;
   cursor: not-allowed;
@@ -765,7 +846,7 @@ body {
   min-width: 280px;
   max-width: min(420px, calc(100% - 40px));
   border: 1px solid rgba(245, 165, 35, 0.45);
-  border-radius: 8px;
+  border-radius: 4px;
   background: var(--card-bg);
   padding: 28px;
   text-align: center;
@@ -775,20 +856,20 @@ body {
 .file-drop-icon {
   width: 46px;
   height: 46px;
-  border-radius: 8px;
+  border-radius: 4px;
   background: var(--accent);
   color: #111;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
-  font-weight: 800;
+  font-weight: 400;
   margin-bottom: 14px;
 }
 
 .file-drop-title {
   font-size: 17px;
-  font-weight: 700;
+  font-weight: 400;
   color: var(--text-primary);
 }
 
@@ -821,8 +902,8 @@ body {
 /* Buttons */
 .btn {
   display: inline-flex; align-items: center; gap: 6px;
-  padding: 9px 18px; border-radius: 4px; font-size: 13px;
-  font-weight: 600; cursor: pointer; border: 1px solid transparent;
+  height: var(--h-control); padding: 0 14px; border-radius: 4px; font-size: 13px;
+  font-weight: 400; cursor: pointer; border: 1px solid transparent;
   transition: all 0.15s; text-decoration: none; white-space: nowrap;
   font-family: inherit; line-height: 1;
 }
@@ -848,7 +929,7 @@ body {
 @keyframes btn-spin {
   to { transform: rotate(360deg); }
 }
-.btn-sm { padding: 5px 12px; font-size: 12px; line-height: 1; }
+.btn-sm { padding: 0 12px; font-size: 12px; line-height: 1; }
 .btn-primary { background: var(--accent); color: #111111; }
 .btn-primary:hover { background: var(--accent-hover); }
 .btn-outline { background: transparent; color: var(--text-primary); border: 1px solid var(--border); }
@@ -859,10 +940,44 @@ body {
 .btn-warning:hover { background: var(--accent-hover); }
 .btn-danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
 .btn-danger:hover { background: var(--danger); color: white; }
-.btn-lg { padding: 13px 28px; font-size: 15px; }
+.btn-lg { height: auto; padding: 11px 28px; font-size: 15px; }
+
+/* Shared interaction smoothing */
+.sidebar-link,
+.site-header-search,
+.site-header-search-btn,
+.site-header-theme-toggle,
+.site-header-avatar-btn,
+.site-header-dropdown-item,
+.site-header-avatar-item,
+.grid-card,
+.card,
+.request-card,
+.btn,
+.dashboard-inline-link,
+.tab-btn,
+input,
+select,
+textarea {
+  transition:
+    background-color var(--motion-fast) var(--motion-ease),
+    color var(--motion-fast) var(--motion-ease),
+    border-color var(--motion-fast) var(--motion-ease),
+    box-shadow var(--motion-base) var(--motion-ease),
+    opacity var(--motion-fast) var(--motion-ease),
+    transform var(--motion-fast) var(--motion-ease);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation: none !important;
+    transition: none !important;
+    scroll-behavior: auto !important;
+  }
+}
 
 /* Badges */
-.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: 600; white-space: nowrap; letter-spacing: 0.3px; }
+.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: 400; white-space: nowrap; letter-spacing: 0.3px; }
 .badge-not_started { background: #222; color: #888; border: 1px solid #333; }
 .badge-in_progress { background: rgba(37,99,235,0.15); color: #60a5fa; border: 1px solid rgba(37,99,235,0.3); }
 .badge-on_hold { background: rgba(217,119,6,0.15); color: #fbbf24; border: 1px solid rgba(217,119,6,0.3); }
@@ -885,36 +1000,58 @@ body {
 [data-theme="light"] .badge-needs_revision { background: #dc2626; color: #fff; border-color: #b91c1c; }
 
 /* Table */
-.table-wrapper { overflow-x: auto; border-radius: 8px; border: 1px solid var(--border); background: var(--card-bg); }
+.table-wrapper { overflow-x: auto; border-radius: 4px; border: 1px solid var(--border); background: var(--card-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
 table { width: 100%; border-collapse: collapse; }
-th { text-align: left; padding: 12px 16px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); background: var(--card-bg); border-bottom: 1px solid var(--border); }
+th { text-align: left; padding: 12px 16px; font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); background: rgba(255,255,255,0.07); border-bottom: 1px solid var(--border); }
 td { padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text-primary); }
 
 tr:hover td { background: rgba(255,255,255,0.02); }
-.table-link { color: var(--accent); text-decoration: none; font-weight: 600; }
+.table-link { color: var(--accent); text-decoration: none; font-weight: 400; }
 .table-link:hover { text-decoration: underline; }
+.dashboard-inline-link {
+  background: transparent;
+  border: 0;
+  padding: 0;
+  color: inherit;
+  font: inherit;
+  text-align: inherit;
+  cursor: pointer;
+  text-decoration: none;
+  transition: color 0.15s;
+}
+.dashboard-inline-link:hover,
+.dashboard-inline-link:focus-visible {
+  color: var(--accent) !important;
+  outline: none;
+}
 
 /* Forms */
 .form-group { margin-bottom: 18px; }
-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.4px; }
+label { display: block; font-size: 12px; font-weight: 400; color: var(--text-secondary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.4px; }
 input[type="text"], input[type="email"], input[type="date"], input[type="password"], select, textarea {
-  width: 100%; padding: 10px 14px; border: 1px solid var(--border);
-  border-radius: 6px; font-size: 14px; color: var(--text-primary);
+  width: 100%; padding: 0 14px; height: var(--h-control); border: 1px solid var(--border);
+  border-radius: 4px; font-size: 14px; color: var(--text-primary);
   background: var(--card-bg-2); outline: none; transition: border 0.15s; font-family: inherit;
+  line-height: 1;
+}
+select {
+  -webkit-appearance: none; -moz-appearance: none; appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px;
 }
 input::placeholder, textarea::placeholder { color: var(--text-muted); }
 input:focus, select:focus, textarea:focus {
   border-color: var(--accent);
   box-shadow: 0 0 0 3px rgba(245,165,35,0.1);
 }
-textarea { resize: vertical; min-height: 100px; }
+textarea { resize: vertical; height: auto; min-height: 100px; padding: 8px 14px; }
 select option { background: #222; color: #fff; }
 
 /* Auth */
 .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0d0d0d; padding: 20px; }
-.auth-card { background: #1a1a1a; border-radius: 8px; border: 1px solid var(--border); padding: 40px; width: 100%; max-width: 440px; }
+.auth-card { background: #1a1a1a; border-radius: 4px; border: 1px solid var(--border); padding: 40px; width: 100%; max-width: 440px; }
 .auth-logo { text-align: center; margin-bottom: 32px; }
-.auth-logo h1 { font-size: 22px; font-weight: 800; color: #ffffff; letter-spacing: -0.5px; }
+.auth-logo h1 { font-size: 22px; font-weight: 400; color: #ffffff; letter-spacing: -0.5px; }
 .auth-logo p { font-size: 13px; color: #888; margin-top: 6px; }
 .auth-card label { color: var(--text-secondary); }
 .auth-card input[type="text"],
@@ -934,11 +1071,11 @@ select option { background: #222; color: #fff; }
 .auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: #444; font-size: 12px; }
 .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
 .quick-login { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
-.quick-login-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #555; margin-bottom: 10px; }
+.quick-login-title { font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.5px; color: #555; margin-bottom: 10px; }
 .quick-login-list { display: flex; flex-direction: column; gap: 6px; }
-.quick-login-btn { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 6px; border: 1px solid #2a2a2a; background: #222; cursor: pointer; transition: background 0.15s; text-align: left; width: 100%; }
+.quick-login-btn { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 4px; border: 1px solid #2a2a2a; background: #222; cursor: pointer; transition: background 0.15s; text-align: left; width: 100%; }
 .quick-login-btn:hover { background: #2a2a2a; }
-.quick-login-name { font-size: 13px; font-weight: 600; color: #fff; }
+.quick-login-name { font-size: 13px; font-weight: 400; color: #fff; }
 .quick-login-email { font-size: 11px; color: #666; }
 
 /* Misc */
@@ -946,24 +1083,24 @@ select option { background: #222; color: #fff; }
 .back-link:hover { color: var(--text-primary); }
 .empty-state { text-align: center; padding: 56px 20px; color: var(--text-secondary); }
 .empty-state-icon { display: none; }
-.empty-state h3 { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
+.empty-state h3 { font-size: 15px; font-weight: 400; color: var(--text-primary); margin-bottom: 6px; }
 .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
 .version-timeline { display: flex; flex-direction: column; gap: 12px; }
-.version-item { border: 1px solid var(--border); border-radius: 8px; padding: 16px; background: var(--card-bg); }
+.version-item { border: 1px solid var(--border); border-radius: 4px; padding: 16px; background: var(--card-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
 .version-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
-.version-number { font-size: 12px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; }
+.version-number { font-size: 12px; font-weight: 400; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; }
 .version-meta { font-size: 12px; color: var(--text-secondary); margin-top: 8px; display: flex; gap: 16px; }
 .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
-.detail-item label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); margin-bottom: 4px; }
+.detail-item label { font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); margin-bottom: 4px; }
 .detail-item p { font-size: 14px; color: var(--text-primary); font-weight: 500; }
-.notification { padding: 12px 16px; border-radius: 6px; font-size: 13px; font-weight: 500; margin-bottom: 20px; }
+.notification { padding: 12px 16px; border-radius: 4px; font-size: 13px; font-weight: 500; margin-bottom: 20px; }
 .notification-success { background: rgba(34,197,94,0.1); color: #4ade80; border: 1px solid rgba(34,197,94,0.2); }
 .notification-info { background: rgba(37,99,235,0.1); color: #60a5fa; border: 1px solid rgba(37,99,235,0.2); }
 .request-card,
 .interactive-surface {
   transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
 }
-.request-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; margin-bottom: 0; }
+.request-card { background: var(--card-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border); border-radius: 4px; padding: 12px 16px; margin-bottom: 0; }
 .request-card:hover,
 .interactive-surface:hover { border-color: var(--interactive-hover-border); }
 .request-card:hover { background: var(--interactive-row-hover); }
@@ -976,7 +1113,7 @@ select option { background: #222; color: #fff; }
   background: var(--interactive-row-hover);
 }
 .request-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0; }
-.request-card-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
+.request-card-title { font-size: 15px; font-weight: 400; color: var(--text-primary); }
 .request-card-meta { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
 .request-title-inline-meta {
   margin-left: 8px;
@@ -996,7 +1133,7 @@ select option { background: #222; color: #fff; }
   background: var(--card-bg-2);
   color: var(--text-secondary);
   font-size: 11px;
-  font-weight: 700;
+  font-weight: 400;
   letter-spacing: 0.5px;
 }
 .request-column-header {
@@ -1006,7 +1143,7 @@ select option { background: #222; color: #fff; }
   gap: 12px;
   margin-bottom: 12px;
   font-size: 13px;
-  font-weight: 700;
+  font-weight: 400;
   text-transform: uppercase;
   letter-spacing: 0.6px;
   color: var(--text-muted);
@@ -1022,7 +1159,7 @@ select option { background: #222; color: #fff; }
   border: none;
   font-family: inherit;
   font-size: 13px;
-  font-weight: 700;
+  font-weight: 400;
   text-transform: uppercase;
   letter-spacing: 0.6px;
   color: var(--text-muted);
@@ -1045,14 +1182,14 @@ select option { background: #222; color: #fff; }
   gap: 12px;
   margin: 4px 0 10px;
   font-size: 12px;
-  font-weight: 700;
+  font-weight: 400;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   color: var(--text-muted);
 }
 .request-toolbar-card { margin-bottom: 24px; }
 .filter-select {
-  padding: 6px 10px;
+  height: var(--h-control); padding: 0 32px 0 10px; line-height: 1;
   border-radius: 4px;
   border: 1px solid var(--border);
   background: var(--card-bg);
@@ -1061,6 +1198,9 @@ select option { background: #222; color: #fff; }
   cursor: pointer;
   width: 25%;
   min-width: 120px;
+  -webkit-appearance: none; -moz-appearance: none; appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat; background-position: right 10px center;
 }
 .request-toolbar-grid {
   display: grid;
@@ -1103,7 +1243,7 @@ select option { background: #222; color: #fff; }
   color: var(--text-muted);
 }
 .action-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
-.assign-select { padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border); font-size: 13px; color: var(--text-primary); background: var(--card-bg-2); cursor: pointer; font-family: inherit; }
+.assign-select { height: var(--h-control); padding: 0 10px; border-radius: 4px; border: 1px solid var(--border); font-size: 13px; color: var(--text-primary); background: var(--card-bg-2); cursor: pointer; font-family: inherit; line-height: 1; }
 .assign-select option { background: #222; }
 .flex { display: flex; }
 .items-center { align-items: center; }
@@ -1116,7 +1256,7 @@ select option { background: #222; color: #fff; }
 .mb-4 { margin-bottom: 16px; }
 .mb-6 { margin-bottom: 24px; }
 .w-full { width: 100%; }
-.font-bold { font-weight: 700; }
+.font-bold { font-weight: 400; }
 .text-muted { color: var(--text-muted); }
 .text-secondary { color: var(--text-secondary); }
 
@@ -1128,9 +1268,11 @@ select option { background: #222; color: #fff; }
 
 .client-summary-tile {
   padding: 14px 16px;
-  border-radius: 8px;
+  border-radius: 4px;
   border: 1px solid var(--border);
   background: var(--card-bg-2);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
   display: flex;
   flex-direction: column;
   gap: 4px;
@@ -1152,7 +1294,7 @@ select option { background: #222; color: #fff; }
 .client-inline-empty {
   padding: 20px 16px;
   border: 1px dashed var(--border);
-  border-radius: 8px;
+  border-radius: 4px;
   color: var(--text-muted);
   font-size: 13px;
   text-align: center;
@@ -1171,8 +1313,10 @@ select option { background: #222; color: #fff; }
   gap: 12px;
   padding: 12px 14px;
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: 4px;
   background: var(--card-bg-2);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
   text-decoration: none;
 }
 
@@ -1192,15 +1336,17 @@ select option { background: #222; color: #fff; }
 .client-project-card {
   padding: 14px 16px;
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: 4px;
   background: var(--card-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
 .client-project-card-title {
-  font-weight: 700;
+  font-weight: 400;
   font-size: 14px;
   color: var(--text-primary);
 }
@@ -1213,7 +1359,7 @@ select option { background: #222; color: #fff; }
 
 .client-project-highlight {
   color: var(--accent);
-  font-weight: 700;
+  font-weight: 400;
 }
 
 /* Mobile topbar — hidden on desktop */
@@ -1232,7 +1378,7 @@ select option { background: #222; color: #fff; }
 }
 .hamburger span {
   display: block; width: 22px; height: 2px;
-  background: var(--text-primary); border-radius: 2px; transition: all 0.2s;
+  background: var(--text-primary); border-radius: 4px; transition: all 0.2s;
 }
 
 /* Sidebar overlay (mobile) */
@@ -1254,30 +1400,12 @@ select option { background: #222; color: #fff; }
 
   /* Sidebar slides in from left */
   .sidebar {
-    position: fixed; left: -240px; top: 0; z-index: 200;
+    position: fixed; left: -76px; top: 0; z-index: 200;
     transition: left 0.25s ease; height: 100vh;
-    width: 240px;
-    min-width: 240px;
+    width: 76px;
+    min-width: 76px;
   }
   .sidebar.sidebar-open { left: 0; }
-  .app-layout.sidebar-collapsed .sidebar {
-    width: 240px;
-    min-width: 240px;
-  }
-  .app-layout.sidebar-collapsed .brand-logo-sidebar {
-    width: 140px;
-    display: block;
-  }
-  .app-layout.sidebar-collapsed .sidebar-pin-toggle {
-    display: none;
-  }
-  .app-layout.sidebar-collapsed .sidebar-user-info {
-    display: block;
-  }
-  .app-layout.sidebar-collapsed .sidebar-bottom-actions {
-    justify-content: flex-start;
-    padding: 0 12px;
-  }
 
   /* Show overlay when menu open */
   .sidebar-overlay { display: block; }
@@ -1285,14 +1413,16 @@ select option { background: #222; color: #fff; }
   /* Main wrapper full width, no left margin */
   .main-wrapper { margin-left: 0; }
   .main-content { padding: 16px; }
+  .site-header { display: none; }
 
   /* Stack grids on mobile */
   .grid-2 { grid-template-columns: 1fr; }
   .stats-grid { grid-template-columns: 1fr 1fr; }
+  .dash-stat-grid { grid-template-columns: 1fr 1fr; }
   .detail-grid { grid-template-columns: 1fr 1fr; }
 
   /* Smaller page header */
-  .page-header { flex-direction: column; gap: 12px; }
+  .page-header { flex-direction: column; gap: 12px; align-items: flex-start; }
   .page-title { font-size: 18px; }
 
   /* Action buttons wrap */
@@ -1302,7 +1432,7 @@ select option { background: #222; color: #fff; }
   .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
 
   /* Cards tighter padding */
-  .card { padding: 14px; }
+  .card { padding: 11px; }
 
   /* Request cards */
   .request-card-header { flex-direction: column; gap: 8px; }
@@ -1310,6 +1440,8 @@ select option { background: #222; color: #fff; }
   .page-toolbar-grid { grid-template-columns: 1fr; }
   .dashboard-chart-content { grid-template-columns: 1fr; }
   .dashboard-pie-wrap { justify-content: flex-start; }
+  .pie-charts-grid { grid-template-columns: 1fr; }
+  .pie-chart-cell-first { border-right: none; border-bottom: 1px solid var(--border); }
   .client-summary-grid { grid-template-columns: 1fr; }
 
   /* Auth card full width */
@@ -1321,7 +1453,7 @@ select option { background: #222; color: #fff; }
 
 /* Tab bar */
 .tab-btn {
-  padding: 6px 14px;
+  height: var(--h-control); padding: 0 14px;
   border-radius: 4px;
   border: 1px solid var(--border);
   background: transparent;
@@ -1333,4 +1465,27 @@ select option { background: #222; color: #fff; }
   white-space: nowrap;
 }
 .tab-btn:hover { border-color: var(--interactive-hover-border); color: var(--text-secondary); }
-.tab-btn.active { background: var(--accent); border-color: var(--accent); color: #000; font-weight: 600; }
+.tab-btn.active { background: var(--accent); border-color: var(--accent); color: #000; font-weight: 400; }
+
+/* Rebuilt hover system (single source of truth) */
+.sidebar-theme-toggle:hover,
+.site-header-dropdown-item:hover,
+.site-header-avatar-item:hover {
+  background-color: rgba(255,255,255,0.12);
+}
+.site-header-search-btn:hover,
+.site-header-theme-toggle:hover {
+  color: var(--accent);
+}
+[data-theme="dark"] .sidebar-theme-toggle:hover,
+[data-theme="dark"] .site-header-dropdown-item:hover,
+[data-theme="dark"] .site-header-avatar-item:hover {
+  border-color: rgba(255,255,255,0.2);
+}
+[data-theme="light"] .sidebar-theme-toggle:hover,
+[data-theme="light"] .site-header-dropdown-item:hover,
+[data-theme="light"] .site-header-avatar-item:hover {
+  background-color: rgba(0,0,0,0.14);
+  border-color: rgba(0,0,0,0.18);
+  color: #0d0d0d;
+}
diff --git a/src/lib/activityLog.js b/src/lib/activityLog.js
new file mode 100644
index 0000000..339625a
--- /dev/null
+++ b/src/lib/activityLog.js
@@ -0,0 +1,14 @@
+import { supabase } from './supabase';
+
+export async function logActivity({ actorId, actorName, action, taskId, taskTitle, projectId, projectName }) {
+  const { error } = await supabase.from('activity_log').insert({
+    actor_id: actorId || null,
+    actor_name: actorName || null,
+    action,
+    task_id: taskId || null,
+    task_title: taskTitle || null,
+    project_id: projectId || null,
+    project_name: projectName || null,
+  });
+  if (error) console.error('logActivity failed:', action, error);
+}
diff --git a/src/lib/dashboardBanner.jsx b/src/lib/dashboardBanner.jsx
new file mode 100644
index 0000000..06199bd
--- /dev/null
+++ b/src/lib/dashboardBanner.jsx
@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+
+export function useLiveClock() {
+  const [now, setNow] = useState(() => new Date());
+  useEffect(() => {
+    const id = setInterval(() => setNow(new Date()), 1000);
+    return () => clearInterval(id);
+  }, []);
+  return now;
+}
+
+export function DashboardBanner() {
+  const now = useLiveClock();
+  const day = now.toLocaleDateString('en-US', { weekday: 'long', timeZone: 'America/New_York' });
+  const date = now.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric', timeZone: 'America/New_York' });
+  const time = now.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', timeZone: 'America/New_York', timeZoneName: 'short' });
+  return (
+    <div className="dashboard-banner">
+      Fourge Branding &bull; {day}, {date} &bull; {time}
+    </div>
+  );
+}
+
+export function getGreeting() {
+  const h = new Date().getHours();
+  if (h < 12) return 'Good morning';
+  if (h < 17) return 'Good afternoon';
+  return 'Good evening';
+}
diff --git a/src/lib/dates.js b/src/lib/dates.js
index e52e784..6abdbf6 100644
--- a/src/lib/dates.js
+++ b/src/lib/dates.js
@@ -47,3 +47,13 @@ export function formatDateOnly(value, fallback = '—') {
     year: 'numeric',
   });
 }
+
+export function fmtShortDate(value, fallback = '—') {
+  if (!value) return fallback;
+  const date = parseDateOnly(value) || new Date(value);
+  if (isNaN(date)) return fallback;
+  const m = String(date.getMonth() + 1).padStart(2, '0');
+  const d = String(date.getDate()).padStart(2, '0');
+  const y = String(date.getFullYear()).slice(2);
+  return `${m}/${d}/${y}`;
+}
diff --git a/src/lib/withTimeout.js b/src/lib/withTimeout.js
index 10dc4ef..76e1164 100644
--- a/src/lib/withTimeout.js
+++ b/src/lib/withTimeout.js
@@ -1,4 +1,4 @@
-export async function withTimeout(promise, ms = 12000, label = 'Request') {
+export async function withTimeout(promise, ms = 25000, label = 'Request') {
   let timerId;
   try {
     return await Promise.race([
diff --git a/src/pages/BrandBook.jsx b/src/pages/BrandBook.jsx
index 7858d88..bffa9fc 100644
--- a/src/pages/BrandBook.jsx
+++ b/src/pages/BrandBook.jsx
@@ -825,7 +825,7 @@ export default function BrandBook() {
 
                   return (
                     <tr key={book.id} onClick={() => handleLoad(book)} style={{ cursor: 'pointer' }}>
-                      <td style={{ fontWeight: 600 }}>{book.project_name || 'Brand Book'}</td>
+                      <td style={{ fontWeight: 400 }}>{book.project_name || 'Brand Book'}</td>
                       <td>{`R${String(book.revision || '01').padStart(2, '0')}`}</td>
                       <td>{signCount}</td>
                       <td>{clientName}</td>
@@ -911,7 +911,7 @@ export default function BrandBook() {
           <div className="form-group" style={{ maxWidth: 180 }}>
             <label>Revision</label>
             <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-              <span style={{ fontWeight: 600, color: 'var(--text-primary)' }}>R</span>
+              <span style={{ fontWeight: 400, color: 'var(--text-primary)' }}>R</span>
               <input
                 type="text"
                 inputMode="numeric"
@@ -936,7 +936,7 @@ export default function BrandBook() {
             <label>Project Logo <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>(top left, 5"×5" area)</span></label>
             <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
               {projectLogoPreview && (
-                <img src={projectLogoPreview} alt="Project logo" style={{ maxHeight: 60, maxWidth: 120, objectFit: 'contain', border: '1px solid var(--border)', borderRadius: 6, padding: 4, background: '#fff' }} />
+                <img src={projectLogoPreview} alt="Project logo" style={{ maxHeight: 60, maxWidth: 120, objectFit: 'contain', border: '1px solid var(--border)', borderRadius: 4, padding: 4, background: '#fff' }} />
               )}
               <div>
                 <button className="btn btn-outline btn-sm" onClick={() => projectLogoRef.current?.click()}>
@@ -1001,7 +1001,7 @@ export default function BrandBook() {
                       right: 0,
                       zIndex: 20,
                       border: '1px solid var(--border)',
-                      borderRadius: 8,
+                      borderRadius: 4,
                       background: 'var(--card-bg)',
                       boxShadow: '0 16px 36px rgba(0,0,0,0.28)',
                       overflow: 'hidden',
@@ -1046,7 +1046,7 @@ export default function BrandBook() {
           {/* Client info (saved per company) */}
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
             <div>
-              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>Client Info</div>
+              <div style={{ fontSize: 13, fontWeight: 400, color: 'var(--text-primary)' }}>Client Info</div>
               <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 2 }}>Logo and contact saved to company — reused across all brand books.</div>
             </div>
             <button className="btn btn-outline btn-sm" onClick={handleSaveClientInfo} disabled={savingClientInfo || !bookInfo.clientId}>
@@ -1058,7 +1058,7 @@ export default function BrandBook() {
             <label>Client Logo <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>(3.5"×1.5" area, bottom right)</span></label>
             <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
               {bookInfo.clientLogoUrl && (
-                <img src={bookInfo.clientLogoUrl} alt="Client logo" style={{ maxHeight: 44, maxWidth: 130, objectFit: 'contain', border: '1px solid var(--border)', borderRadius: 6, padding: 4, background: '#fff' }} />
+                <img src={bookInfo.clientLogoUrl} alt="Client logo" style={{ maxHeight: 44, maxWidth: 130, objectFit: 'contain', border: '1px solid var(--border)', borderRadius: 4, padding: 4, background: '#fff' }} />
               )}
               <div>
                 <button className="btn btn-outline btn-sm" onClick={() => clientLogoRef.current?.click()} disabled={uploadingClientLogo}>
@@ -1088,7 +1088,7 @@ export default function BrandBook() {
           <div style={{ borderTop: '1px solid var(--border)', margin: '4px 0 20px' }} />
 
           {/* Approval */}
-          <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 14 }}>Approval</div>
+          <div style={{ fontSize: 13, fontWeight: 400, color: 'var(--text-primary)', marginBottom: 14 }}>Approval</div>
           <div className="form-group" style={{ maxWidth: 280 }}>
             <label>Approved Date <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>(optional)</span></label>
             <input type="date" value={bookInfo.approvedDate} onChange={set('approvedDate')} />
@@ -1212,16 +1212,16 @@ function SignCard({ sign, index, onChange, onPhotoChange, onRemove, canRemove, t
   const hasPhoto = sign._photoPreview || sign._existingPhotoPreview || sign._recommendationPhotoPreview || sign._signDetailPhotoPreview;
 
   return (
-    <div style={{ border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden' }}>
+    <div style={{ border: '1px solid var(--border)', borderRadius: 4, overflow: 'hidden' }}>
       <div style={{
         width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
         padding: '10px 14px', background: 'var(--card-bg-2)', borderBottom: '1px solid var(--border)',
       }}>
         <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-          <span style={{ fontSize: 10, fontWeight: 700, padding: '2px 8px', background: 'var(--accent)', color: '#1a1a1a', borderRadius: 4 }}>
+          <span style={{ fontSize: 10, fontWeight: 400, padding: '2px 8px', background: 'var(--accent)', color: '#1a1a1a', borderRadius: 4 }}>
             #{sign.signNumber || (index + 1)}
           </span>
-          <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>{summary}</span>
+          <span style={{ fontSize: 13, fontWeight: 400, color: 'var(--text-primary)' }}>{summary}</span>
         </div>
         <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
           {hasPhoto && <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>📷</span>}
@@ -1333,7 +1333,7 @@ function PhotoField({ label, preview, fileName, dragging, inputRef, onDragEnter,
         onClick={() => inputRef.current?.click()}
         style={{
           border: `2px dashed ${dragging ? 'var(--accent)' : 'var(--border)'}`,
-          borderRadius: 8,
+          borderRadius: 4,
           background: dragging ? 'rgba(245,165,35,0.05)' : 'var(--input-bg, var(--card-bg))',
           padding: 12,
           cursor: 'pointer',
@@ -1387,7 +1387,7 @@ function SiteMapDropZone({ preview, onFile, onClear, inputRef }) {
   if (preview) {
     return (
       <div style={{ display: 'flex', alignItems: 'flex-start', gap: 16 }}>
-        <img src={preview} alt="site map" style={{ maxHeight: 160, maxWidth: 280, borderRadius: 6, border: '1px solid var(--border)', objectFit: 'contain' }} />
+        <img src={preview} alt="site map" style={{ maxHeight: 160, maxWidth: 280, borderRadius: 4, border: '1px solid var(--border)', objectFit: 'contain' }} />
         <div>
           <button className="btn btn-outline btn-sm" onClick={onClear}>Remove</button>
           <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 8 }}>Click to replace</div>
@@ -1404,7 +1404,7 @@ function SiteMapDropZone({ preview, onFile, onClear, inputRef }) {
         onClick={() => inputRef.current?.click()}
         style={{
           border: `2px dashed ${dragging ? 'var(--accent)' : 'var(--border)'}`,
-          borderRadius: 8,
+          borderRadius: 4,
           background: dragging ? 'rgba(245,165,35,0.05)' : 'var(--input-bg, var(--card-bg))',
           padding: '24px 16px', textAlign: 'center', cursor: 'pointer',
           color: dragging ? 'var(--accent)' : 'var(--text-muted)', fontSize: 13, transition: 'all 0.15s',
@@ -1435,7 +1435,7 @@ function SitePhotosDropZone({ photoItems, onFiles, onRemove, inputRef }) {
         onClick={() => inputRef.current?.click()}
         style={{
           border: `2px dashed ${dragging ? 'var(--accent)' : 'var(--border)'}`,
-          borderRadius: 8,
+          borderRadius: 4,
           background: dragging ? 'rgba(245,165,35,0.05)' : 'var(--input-bg, var(--card-bg))',
           padding: '20px 16px', textAlign: 'center', cursor: 'pointer',
           color: dragging ? 'var(--accent)' : 'var(--text-muted)', fontSize: 13,
@@ -1456,7 +1456,7 @@ function SitePhotosDropZone({ photoItems, onFiles, onRemove, inputRef }) {
                 style={{ width: 80, height: 60, objectFit: 'cover', borderRadius: 4, border: '1px solid var(--border)', display: 'block' }}
               />
               {item.file && (
-                <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, background: 'rgba(245,165,35,0.8)', fontSize: 8, textAlign: 'center', borderRadius: '0 0 4px 4px', padding: '1px 2px', color: '#1a1a1a', fontWeight: 700 }}>NEW</div>
+                <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, background: 'rgba(245,165,35,0.8)', fontSize: 8, textAlign: 'center', borderRadius: '0 0 4px 4px', padding: '1px 2px', color: '#1a1a1a', fontWeight: 400 }}>NEW</div>
               )}
               <button
                 type="button"
@@ -1507,7 +1507,7 @@ function CombinedMockupPhotoField({
 
   const tileStyle = {
     border: `2px dashed ${dragging ? 'var(--accent)' : 'var(--border)'}`,
-    borderRadius: 8,
+    borderRadius: 4,
     background: dragging ? 'rgba(245,165,35,0.05)' : 'var(--input-bg, var(--card-bg))',
     padding: 12,
     cursor: 'pointer',
@@ -1646,7 +1646,7 @@ function RecommendationPhotoField({ preview, fileName, dragging, inputRef, onDra
         onClick={() => setShowEditor(true)}
         style={{
           border: `2px dashed ${dragging ? 'var(--accent)' : 'var(--border)'}`,
-          borderRadius: 8,
+          borderRadius: 4,
           background: dragging ? 'rgba(245,165,35,0.05)' : 'var(--input-bg, var(--card-bg))',
           padding: 12,
           cursor: 'pointer',
@@ -1729,7 +1729,7 @@ function SignDetailPhotoField({ preview, fileName, dragging, inputRef, onDragEnt
         onClick={() => preview && setShowEditor(true)}
         style={{
           border: `2px dashed ${dragging ? 'var(--accent)' : 'var(--border)'}`,
-          borderRadius: 8,
+          borderRadius: 4,
           background: dragging ? 'rgba(245,165,35,0.05)' : 'var(--input-bg, var(--card-bg))',
           padding: 12,
           cursor: preview ? 'pointer' : 'default',
@@ -2357,10 +2357,10 @@ function DimensionEditorModal({ sourceImage, onApply, onCancel }) {
       }}
       onClick={(e) => { if (e.target === e.currentTarget) onCancel(); }}
     >
-      <div style={{ background: 'var(--card-bg)', borderRadius: 12, display: 'flex', flexDirection: 'column', maxWidth: '98vw', maxHeight: '96vh', overflow: 'hidden', boxShadow: '0 24px 64px rgba(0,0,0,0.55)' }}>
+      <div style={{ background: 'var(--card-bg)', borderRadius: 4, display: 'flex', flexDirection: 'column', maxWidth: '98vw', maxHeight: '96vh', overflow: 'hidden', boxShadow: '0 24px 64px rgba(0,0,0,0.55)' }}>
         <div style={{ padding: '12px 18px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }}>
           <div>
-            <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)' }}>Sign Detail Dimensions</div>
+            <div style={{ fontSize: 14, fontWeight: 400, color: 'var(--text-primary)' }}>Sign Detail Dimensions</div>
             <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>Add line dimensions or drag a box to auto-place width and height callouts.</div>
           </div>
           <button onClick={onCancel} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-muted)', fontSize: 18, lineHeight: 1, padding: '0 2px' }}>✕</button>
@@ -3445,14 +3445,14 @@ function PhotoEditorModal({
       onClick={(e) => { if (e.target === e.currentTarget) onCancel(); }}
     >
       <div style={{
-        background: 'var(--card-bg)', borderRadius: 12, display: 'flex', flexDirection: 'column',
+        background: 'var(--card-bg)', borderRadius: 4, display: 'flex', flexDirection: 'column',
         maxWidth: '98vw', maxHeight: '96vh', overflow: 'hidden',
         boxShadow: '0 24px 64px rgba(0,0,0,0.55)',
       }}>
         {/* Header */}
         <div style={{ padding: '12px 18px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }}>
           <div>
-            <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)' }}>{title}</div>
+            <div style={{ fontSize: 14, fontWeight: 400, color: 'var(--text-primary)' }}>{title}</div>
             <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>{subtitle}</div>
           </div>
           <button onClick={onCancel} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-muted)', fontSize: 18, lineHeight: 1, padding: '0 2px' }}>✕</button>
@@ -3597,10 +3597,10 @@ function PhotoEditorModal({
 
         <div style={{ display: 'grid', gridTemplateColumns: '220px minmax(0, 1fr)', minHeight: 0, flex: 1 }}>
           <div style={{ borderRight: '1px solid var(--border)', background: 'var(--card-bg)', padding: 12, overflowY: 'auto' }}>
-            <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 10 }}>Layers</div>
+            <div style={{ fontSize: 11, fontWeight: 400, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 10 }}>Layers</div>
             {dimensions.length > 0 && (
               <>
-                <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 6 }}>Dimensions</div>
+                <div style={{ fontSize: 10, fontWeight: 400, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 6 }}>Dimensions</div>
                 <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 14 }}>
                   {dimensions.map((item, index) => (
                     <button
@@ -3616,7 +3616,7 @@ function PhotoEditorModal({
                         border: `1px solid ${item.id === activeDimensionId ? 'var(--accent)' : 'var(--border)'}`,
                         background: item.id === activeDimensionId ? 'rgba(245,165,35,0.12)' : 'var(--card-bg-2)',
                         color: 'var(--text-primary)',
-                        borderRadius: 6,
+                        borderRadius: 4,
                         padding: '8px 10px',
                         cursor: 'pointer',
                         textAlign: 'left',
@@ -3632,7 +3632,7 @@ function PhotoEditorModal({
                 </div>
               </>
             )}
-            <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 6 }}>Artwork</div>
+            <div style={{ fontSize: 10, fontWeight: 400, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 6 }}>Artwork</div>
             {artworks.length === 0 ? (
               <div style={{ fontSize: 12, color: 'var(--text-muted)', lineHeight: 1.5 }}>
                 Import or drop artwork to create layers.
@@ -3660,7 +3660,7 @@ function PhotoEditorModal({
                         border: `1px solid ${item.id === selectedArtworkId ? 'var(--accent)' : 'var(--border)'}`,
                         background: item.id === selectedArtworkId ? 'rgba(245,165,35,0.12)' : 'var(--card-bg-2)',
                         color: 'var(--text-primary)',
-                        borderRadius: 6,
+                        borderRadius: 4,
                         padding: '8px 10px',
                         cursor: 'grab',
                         textAlign: 'left',
diff --git a/src/pages/CompaniesPage.jsx b/src/pages/CompaniesPage.jsx
index 8d37302..b76168d 100644
--- a/src/pages/CompaniesPage.jsx
+++ b/src/pages/CompaniesPage.jsx
@@ -15,6 +15,8 @@ function TeamCompanies() {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const tab = searchParams.get('tab') || 'companies';
+  const profileId = searchParams.get('profile');
+  const profileRole = searchParams.get('role');
   const cached = readPageCache('team_companies');
   const [companies, setCompanies] = useState(() => cached?.companies || []);
   const [profiles, setProfiles] = useState(() => cached?.profiles || []);
@@ -30,7 +32,7 @@ function TeamCompanies() {
   const [editUserVal, setEditUserVal] = useState('');
   const [deletingUserId, setDeletingUserId] = useState(null);
   const [filterCompany, setFilterCompany] = useState('');
-  const [userSubTab, setUserSubTab] = useState('client');
+  const [userSubTab, setUserSubTab] = useState(profileRole === 'external' ? 'external' : 'client');
   const { sortKey: coSortKey, sortDir: coSortDir, toggle: coToggle, sort: coSort } = useSortable('name');
   const { sortKey: clSortKey, sortDir: clSortDir, toggle: clToggle, sort: clSort } = useSortable('name');
   const { sortKey: subSortKey, sortDir: subSortDir, toggle: subToggle, sort: subSort } = useSortable('name');
@@ -144,7 +146,7 @@ function TeamCompanies() {
                 {clientProfiles.length} client user{clientProfiles.length !== 1 ? 's' : ''}
                 <span style={{ marginLeft: 10 }}>· {subcontractors.length} subcontractor{subcontractors.length !== 1 ? 's' : ''}</span>
                 {unassigned.length > 0 && (
-                  <span style={{ marginLeft: 10, color: 'var(--danger)', fontWeight: 600 }}>
+                  <span style={{ marginLeft: 10, color: 'var(--danger)', fontWeight: 400 }}>
                     · {unassigned.length} unassigned
                   </span>
                 )}
@@ -173,7 +175,7 @@ function TeamCompanies() {
       {/* Clients (companies) — only on companies tab */}
       {tab === 'companies' && <>
       {showNew && (
-        <div className="card" style={{ marginBottom: 16, border: '1px solid var(--accent)', borderRadius: 12, flexShrink: 0 }}>
+        <div className="card" style={{ marginBottom: 16, border: '1px solid var(--accent)', borderRadius: 4, flexShrink: 0 }}>
           <div className="card-title">New Client</div>
           <form onSubmit={handleCreate}>
             <div className="form-group">
@@ -212,6 +214,7 @@ function TeamCompanies() {
                 <tr>
                   <SortTh col="name" sortKey={coSortKey} sortDir={coSortDir} onSort={coToggle}>Company</SortTh>
                   <SortTh col="clients" sortKey={coSortKey} sortDir={coSortDir} onSort={coToggle}>Users</SortTh>
+                  <th>Primary Contact</th>
                   <SortTh col="phone" sortKey={coSortKey} sortDir={coSortDir} onSort={coToggle}>Phone</SortTh>
                   <SortTh col="address" sortKey={coSortKey} sortDir={coSortDir} onSort={coToggle}>Address</SortTh>
                   <th style={{ width: 1, whiteSpace: 'nowrap' }}>Actions</th>
@@ -225,8 +228,9 @@ function TeamCompanies() {
                   const companyProfiles = clientProfiles.filter(p => getProfileCompanyIds(p).includes(company.id));
                   return (
                     <tr key={company.id} onClick={() => navigate(`/company/${company.id}`)} style={{ cursor: 'pointer' }}>
-                      <td style={{ fontWeight: 600 }}>{company.name}</td>
+                      <td style={{ fontWeight: 400 }}>{company.name}</td>
                       <td>{companyProfiles.length}</td>
+                      <td>{companyProfiles[0]?.name || '—'}</td>
                       <td>{company.phone || '—'}</td>
                       <td>{company.address || '—'}</td>
                       <td onClick={e => e.stopPropagation()}>
@@ -252,7 +256,7 @@ function TeamCompanies() {
         </select>
       </div>
       {showNewUser && userForm.role === 'client' && (
-        <div className="card" style={{ marginBottom: 16, border: '1px solid var(--accent)', borderRadius: 12, flexShrink: 0 }}>
+        <div className="card" style={{ marginBottom: 16, border: '1px solid var(--accent)', borderRadius: 4, flexShrink: 0 }}>
           <div className="card-title">New User</div>
           <form onSubmit={handleCreateUser}>
             <div className="grid-2">
@@ -290,7 +294,7 @@ function TeamCompanies() {
         </div>
       )}
       {showNewUser && userForm.role === 'external' && (
-        <div className="card" style={{ marginBottom: 16, border: '1px solid var(--accent)', borderRadius: 12, flexShrink: 0 }}>
+        <div className="card" style={{ marginBottom: 16, border: '1px solid var(--accent)', borderRadius: 4, flexShrink: 0 }}>
           <div className="card-title">New Subcontractor</div>
           <form onSubmit={handleCreateUser}>
             <div className="grid-2">
@@ -321,11 +325,11 @@ function TeamCompanies() {
       <div className="card" style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
         {userSubTab === 'client' && <>
           {unassigned.length > 0 && (
-            <div style={{ marginBottom: 12, padding: 14, background: 'rgba(220,38,38,0.06)', borderRadius: 8, border: '1px solid var(--danger)', flexShrink: 0 }}>
-              <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--danger)', marginBottom: 8 }}>Unassigned ({unassigned.length})</div>
+            <div style={{ marginBottom: 12, padding: 14, background: 'rgba(220,38,38,0.06)', borderRadius: 4, border: '1px solid var(--danger)', flexShrink: 0 }}>
+              <div style={{ fontSize: 12, fontWeight: 400, color: 'var(--danger)', marginBottom: 8 }}>Unassigned ({unassigned.length})</div>
               <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                 {unassigned.map(user => (
-                  <div key={user.id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--card-bg)', borderRadius: 6, border: '1px solid var(--border)' }}>
+                  <div key={user.id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--card-bg)', borderRadius: 4, border: '1px solid var(--border)' }}>
                     <div style={{ flex: 1 }}>
                       {editingUserId === user.id ? (
                         <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
@@ -337,7 +341,7 @@ function TeamCompanies() {
                         </div>
                       ) : (
                         <>
-                          <div style={{ fontWeight: 600, fontSize: 13 }}>{user.name}</div>
+                          <div style={{ fontWeight: 400, fontSize: 13 }}>{user.name}</div>
                           <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{user.email}</div>
                         </>
                       )}
@@ -375,8 +379,8 @@ function TeamCompanies() {
                   }).map(user => {
                     const companyNames = getProfileCompanyIds(user).map(id => companies.find(c => c.id === id)?.name).filter(Boolean);
                     return (
-                      <tr key={user.id}>
-                        <td style={{ fontWeight: 600 }}>
+                      <tr key={user.id} style={user.id === profileId ? { background: 'rgba(245,165,35,0.08)' } : undefined}>
+                        <td style={{ fontWeight: 400 }}>
                           {editingUserId === user.id ? (
                             <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                               <input type="text" value={editUserVal} onChange={e => setEditUserVal(e.target.value)} autoFocus
@@ -423,8 +427,8 @@ function TeamCompanies() {
                 </thead>
                 <tbody>
                   {subSort(subcontractors, (u, key) => u[key] || '').map(user => (
-                    <tr key={user.id}>
-                      <td style={{ fontWeight: 600 }}>
+                    <tr key={user.id} style={user.id === profileId ? { background: 'rgba(245,165,35,0.08)' } : undefined}>
+                      <td style={{ fontWeight: 400 }}>
                         {editingUserId === user.id ? (
                           <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                             <input type="text" value={editUserVal} onChange={e => setEditUserVal(e.target.value)} autoFocus
@@ -491,7 +495,7 @@ function ClientCompanyList() {
               <tbody>
                 {sort(companies, (c, key) => c[key] || '').map(company => (
                   <tr key={company.id} onClick={() => navigate(`/company/${company.id}`)} style={{ cursor: 'pointer' }}>
-                    <td style={{ fontWeight: 600 }}>{company.name}</td>
+                    <td style={{ fontWeight: 400 }}>{company.name}</td>
                     <td>{company.phone || '—'}</td>
                     <td>{company.address || '—'}</td>
                   </tr>
@@ -577,8 +581,8 @@ function _UnusedClientCompanies() {
                 value={selectedId}
                 onChange={e => setSelectedId(e.target.value)}
                 style={{
-                  fontSize: 22, fontWeight: 700, background: 'var(--card-bg)',
-                  border: '1px solid var(--border)', borderRadius: 6,
+                  fontSize: 22, fontWeight: 400, background: 'var(--card-bg)',
+                  border: '1px solid var(--border)', borderRadius: 4,
                   color: 'var(--text-primary)', cursor: 'pointer',
                   padding: '4px 8px', fontFamily: 'inherit',
                 }}
@@ -652,14 +656,14 @@ function _UnusedClientCompanies() {
                 borderBottom: i < members.length - 1 ? '1px solid var(--border)' : 'none',
               }}>
                 <div style={{
-                  width: 36, height: 36, borderRadius: 6, background: 'var(--accent)',
+                  width: 36, height: 36, borderRadius: 4, background: 'var(--accent)',
                   display: 'flex', alignItems: 'center', justifyContent: 'center',
-                  fontSize: 13, fontWeight: 700, color: '#111', flexShrink: 0,
+                  fontSize: 13, fontWeight: 400, color: '#111', flexShrink: 0,
                 }}>
                   {member.name?.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)}
                 </div>
                 <div>
-                  <div style={{ fontWeight: 600, fontSize: 14, color: 'var(--text-primary)' }}>
+                  <div style={{ fontWeight: 400, fontSize: 14, color: 'var(--text-primary)' }}>
                     {member.name}
                     {member.id === currentUser.id && (
                       <span style={{ marginLeft: 8, fontSize: 11, color: 'var(--accent)', fontWeight: 500 }}>You</span>
diff --git a/src/pages/CompanyDetail.jsx b/src/pages/CompanyDetail.jsx
index ab77ac1..9045994 100644
--- a/src/pages/CompanyDetail.jsx
+++ b/src/pages/CompanyDetail.jsx
@@ -7,6 +7,7 @@ import { useAuth } from '../context/AuthContext';
 import { serviceTypes } from '../data/mockData';
 import { cleanupTaskStorage, deleteCompanyData } from '../lib/deleteHelpers';
 import { renameClientFolder, backfillClientFolders } from '../lib/filebrowserFolders';
+import { logActivity } from '../lib/activityLog';
 
 export default function CompanyDetail() {
   const { id } = useParams();
@@ -174,6 +175,7 @@ export default function CompanyDetail() {
       status: 'active',
     }).select().single();
     if (data) {
+      logActivity({ actorId: currentUser.id, actorName: currentUser.name, action: 'project_created', projectId: data.id, projectName: data.name });
       setProjects(prev => [data, ...prev]);
       setNewProjectName('');
       setShowNewProject(false);
@@ -241,7 +243,7 @@ export default function CompanyDetail() {
                 onChange={e => setNameVal(e.target.value)}
                 autoFocus
                 required
-                style={{ fontSize: 22, fontWeight: 700, padding: '4px 10px', margin: 0, width: 260 }}
+                style={{ fontSize: 22, fontWeight: 400, padding: '4px 10px', margin: 0, width: 260 }}
               />
               <button type="submit" className="btn btn-primary btn-sm" disabled={savingName}>{savingName ? '...' : 'Save'}</button>
               <button type="button" className="btn btn-outline btn-sm" onClick={() => setEditingName(false)}>Cancel</button>
@@ -253,10 +255,12 @@ export default function CompanyDetail() {
             </div>
           )}
           <div className="page-subtitle">
+            {users[0]?.name && <>{users[0].name}</>}
+            {users[0]?.name && (company.phone || company.address) && ' · '}
             {company.phone && <>{company.phone}</>}
             {company.phone && company.address && ' · '}
             {company.address && <>{company.address}</>}
-            {!company.phone && !company.address && 'No contact info'}
+            {!users[0]?.name && !company.phone && !company.address && 'No contact info'}
           </div>
         </div>
         {isTeam && <button
@@ -299,7 +303,7 @@ export default function CompanyDetail() {
           >
             {t}
             {t === 'users' && availableUsers.length > 0 && (
-              <span style={{ marginLeft: 6, fontSize: 10, background: tab === t ? 'rgba(0,0,0,0.3)' : 'var(--danger)', color: 'white', padding: '1px 5px', borderRadius: 10, fontWeight: 700 }}>
+              <span style={{ marginLeft: 6, fontSize: 10, background: tab === t ? 'rgba(0,0,0,0.3)' : 'var(--danger)', color: 'white', padding: '1px 5px', borderRadius: 4, fontWeight: 400 }}>
                 {availableUsers.length}
               </span>
             )}
@@ -326,7 +330,7 @@ export default function CompanyDetail() {
                       <div style={{
                         width: 32, height: 32, borderRadius: 4, background: 'var(--accent)',
                         display: 'flex', alignItems: 'center', justifyContent: 'center',
-                        fontSize: 12, fontWeight: 700, color: '#111', flexShrink: 0,
+                        fontSize: 12, fontWeight: 400, color: '#111', flexShrink: 0,
                       }}>
                         {user.name?.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)}
                       </div>
@@ -346,7 +350,7 @@ export default function CompanyDetail() {
                           </div>
                         ) : (
                           <>
-                            <div style={{ fontWeight: 600, fontSize: 14 }}>{user.name}</div>
+                            <div style={{ fontWeight: 400, fontSize: 14 }}>{user.name}</div>
                             <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{user.email || '—'}</div>
                             <div style={{ fontSize: 11, color: 'var(--text-muted)', textTransform: 'capitalize', marginTop: 2 }}>{user.role || '—'}</div>
                           </>
@@ -388,7 +392,7 @@ export default function CompanyDetail() {
               </p>
               <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                 {availableUsers.map(user => (
-                  <div key={user.id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 14px', background: 'var(--bg)', borderRadius: 8, border: '1px solid var(--border)' }}>
+                  <div key={user.id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 14px', background: 'var(--bg)', borderRadius: 4, border: '1px solid var(--border)' }}>
                     <div style={{ flex: 1 }}>
                       {editingUserId === user.id ? (
                         <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
@@ -405,7 +409,7 @@ export default function CompanyDetail() {
                         </div>
                       ) : (
                         <>
-                          <div style={{ fontWeight: 600, fontSize: 13 }}>{user.name}</div>
+                          <div style={{ fontWeight: 400, fontSize: 13 }}>{user.name}</div>
                           <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{user.email}</div>
                           <div style={{ fontSize: 11, color: 'var(--text-muted)', textTransform: 'capitalize', marginTop: 2 }}>{user.role || '—'}</div>
                         </>
@@ -476,10 +480,10 @@ export default function CompanyDetail() {
                 const active = projectTasks.filter(t => t.status !== 'client_approved').length;
                 const done = projectTasks.filter(t => t.status === 'client_approved').length;
                 return (
-                  <div key={project.id} className="interactive-surface" style={{ display: 'flex', alignItems: 'center', background: 'var(--card-bg)', border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden' }}>
+                  <div key={project.id} className="interactive-surface" style={{ display: 'flex', alignItems: 'center', background: 'var(--card-bg)', border: '1px solid var(--border)', borderRadius: 4, overflow: 'hidden' }}>
                     <Link to={`/projects/${project.id}`} className="interactive-row" style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 16px', textDecoration: 'none', cursor: 'pointer' }}>
                       <div>
-                        <div style={{ fontWeight: 600, fontSize: 14, color: 'var(--text-primary)' }}>{project.name}</div>
+                        <div style={{ fontWeight: 400, fontSize: 14, color: 'var(--text-primary)' }}>{project.name}</div>
                         <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 3 }}>
                           {projectTasks.length} job{projectTasks.length !== 1 ? 's' : ''}
                           {active > 0 && <> · <span style={{ color: 'var(--accent)' }}>{active} active</span></>}
@@ -513,7 +517,7 @@ export default function CompanyDetail() {
           <div style={{ display: 'grid', gridTemplateColumns: '1fr 130px 130px 60px', gap: 8, marginBottom: 8, alignItems: 'center' }}>
             <div />
             {['New', 'Revision'].map(label => (
-              <div key={label} style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', textAlign: 'right' }}>{label}</div>
+              <div key={label} style={{ fontSize: 11, fontWeight: 400, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', textAlign: 'right' }}>{label}</div>
             ))}
             <div />
           </div>
diff --git a/src/pages/Converters.jsx b/src/pages/Converters.jsx
index 74dea51..90c7d5e 100644
--- a/src/pages/Converters.jsx
+++ b/src/pages/Converters.jsx
@@ -287,7 +287,7 @@ export default function Converters() {
               }}
               style={{
                 border: '2px dashed var(--border)',
-                borderRadius: 10,
+                borderRadius: 4,
                 padding: '28px 18px',
                 textAlign: 'center',
                 cursor: 'pointer',
@@ -295,7 +295,7 @@ export default function Converters() {
                 color: 'var(--text-muted)',
               }}
             >
-              <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 6 }}>
+              <div style={{ fontSize: 15, fontWeight: 400, color: 'var(--text-primary)', marginBottom: 6 }}>
                 Drop images here or click to upload
               </div>
               <div style={{ fontSize: 13 }}>
@@ -381,7 +381,7 @@ export default function Converters() {
                     key={id}
                     style={{
                       border: '1px solid var(--border)',
-                      borderRadius: 10,
+                      borderRadius: 4,
                       padding: 14,
                       display: 'grid',
                       gridTemplateColumns: 'minmax(0, 1fr) auto',
@@ -390,7 +390,7 @@ export default function Converters() {
                     }}
                   >
                     <div style={{ minWidth: 0 }}>
-                      <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-primary)' }}>{file.name}</div>
+                      <div style={{ fontSize: 14, fontWeight: 400, color: 'var(--text-primary)' }}>{file.name}</div>
                       <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 4 }}>
                         {file.type || 'Unknown type'} · {(file.size / 1024 / 1024).toFixed(file.size >= 1024 * 1024 ? 2 : 3)} MB
                       </div>
diff --git a/src/pages/DashboardPage.jsx b/src/pages/DashboardPage.jsx
index 2eadf3d..b8bdab5 100644
--- a/src/pages/DashboardPage.jsx
+++ b/src/pages/DashboardPage.jsx
@@ -1,359 +1,322 @@
 import { useState, useEffect } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import Layout from '../components/Layout';
-import StatusBadge from '../components/StatusBadge';
 import { supabase } from '../lib/supabase';
 import { useAuth } from '../context/AuthContext';
 import { readPageCache, writePageCache } from '../lib/pageCache';
 import { withTimeout } from '../lib/withTimeout';
-import { getDeadlineSourceSubmission } from '../lib/taskDeadlines';
-import { formatDateOnly, parseDateOnly } from '../lib/dates';
+import SortTh from '../components/SortTh';
+import { useSortable } from '../hooks/useSortable';
 
-// ─── Team / External helpers ───────────────────────────────────────────────
+const ICON_TONES = [
+  { bg: 'rgba(245,165,35,0.15)', color: '#F5A523' },
+  { bg: 'rgba(74,222,128,0.15)', color: '#4ade80' },
+  { bg: 'rgba(96,165,250,0.15)', color: '#60a5fa' },
+  { bg: 'rgba(167,139,250,0.15)', color: '#a78bfa' },
+];
 
-function getDeadlineMeta(value) {
-  const date = parseDateOnly(value);
-  if (!date) return null;
-  const today = new Date();
-  today.setHours(0, 0, 0, 0);
-  const diffDays = Math.round((date.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
-  if (diffDays < 0) return { label: `${Math.abs(diffDays)} day${Math.abs(diffDays) === 1 ? '' : 's'} overdue`, color: 'var(--danger)' };
-  if (diffDays === 0) return { label: 'Due today', color: '#f97316' };
-  if (diffDays === 1) return { label: 'Due tomorrow', color: '#f5a523' };
-  return { label: `Due in ${diffDays} days`, color: 'var(--text-muted)' };
+function iconTone(key) {
+  let h = 0;
+  for (let i = 0; i < (key || '').length; i++) h = (h * 31 + key.charCodeAt(i)) % ICON_TONES.length;
+  return ICON_TONES[h];
 }
 
-function TaskTable({ title, subtitle, tasks, projects, emptyMessage, fill }) {
-  const navigate = useNavigate();
+function InitialPortrait({ name }) {
+  const tone = iconTone(name);
   return (
-    <div className="card" style={fill ? { display: 'flex', flexDirection: 'column', minHeight: 0, overflow: 'hidden' } : {}}>
-      <div className="card-title" style={{ marginBottom: subtitle ? 2 : 12, flexShrink: 0 }}>{title}</div>
-      {subtitle && <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 12, flexShrink: 0 }}>{subtitle}</div>}
-      {tasks.length === 0 ? (
-        <div style={{ fontSize: 13, color: 'var(--text-muted)' }}>{emptyMessage}</div>
-      ) : (
-        <div className="table-wrapper" style={{ marginTop: 4, ...(fill ? { flex: 1, minHeight: 0, overflowY: 'auto' } : {}) }}>
-          <table>
-            <thead>
-              <tr>
-                <th>Task</th>
-                <th>Project</th>
-                <th>Deadline</th>
-                <th>Status</th>
-              </tr>
-            </thead>
-            <tbody>
-              {tasks.map(task => {
-                const project = projects.find(p => p.id === task.project_id);
-                const deadlineMeta = getDeadlineMeta(task.deadline);
-                return (
-                  <tr key={task.id} onClick={() => navigate(`/requests/${task.id}`)} style={{ cursor: 'pointer' }}>
-                    <td style={{ fontWeight: 600 }}>{task.title}</td>
-                    <td style={{ color: 'var(--text-muted)' }}>{project?.name || '—'}</td>
-                    <td style={{ color: deadlineMeta?.color || 'var(--text-muted)', fontWeight: deadlineMeta ? 600 : 400, whiteSpace: 'nowrap' }}>
-                      {formatDateOnly(task.deadline, '—')}
-                      {deadlineMeta ? <span style={{ fontSize: 11, marginLeft: 6 }}>({deadlineMeta.label})</span> : null}
-                    </td>
-                    <td><StatusBadge status={task.status} /></td>
-                  </tr>
-                );
-              })}
-            </tbody>
-          </table>
-        </div>
-      )}
+    <div style={{ width: 27, height: 27, borderRadius: '50%', background: tone.bg, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+      <span style={{ fontSize: 12, fontWeight: 500, color: tone.color, lineHeight: 1 }}>{(name || '?')[0].toUpperCase()}</span>
     </div>
   );
 }
 
-function CompanyGroup({ company, tasks, projects }) {
-  const [open, setOpen] = useState(true);
-  return (
-    <div className="interactive-surface" style={{ marginBottom: 10, border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden', background: 'var(--card-bg)' }}>
-      <button
-        className="interactive-panel-toggle"
-        onClick={() => setOpen(o => !o)}
-        style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 14px', background: 'var(--card-bg-2)', border: 'none', cursor: 'pointer', borderBottom: open ? '1px solid var(--border)' : 'none', fontFamily: 'inherit' }}
-      >
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-          <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-primary)' }}>{company.name}</span>
-          <span style={{ fontSize: 11, fontWeight: 600, padding: '1px 7px', borderRadius: 20, background: 'var(--accent)', color: '#1a1a1a' }}>{tasks.length}</span>
-        </div>
-        <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>{open ? '▲' : '▼'}</span>
-      </button>
-      {open && (
-        <div>
-          {tasks.map(task => {
-            const project = projects.find(p => p.id === task.project_id);
-            return (
-              <Link key={task.id} to={`/requests/${task.id}`} className="interactive-row" style={{ padding: '10px 14px', borderBottom: '1px solid var(--border)', display: 'flex', flexDirection: 'column', gap: 4, textDecoration: 'none', cursor: 'pointer' }}>
-                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                  <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>
-                    {task.title} <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>{'R' + String(task.current_version || 0).padStart(2, '0')}</span>
-                  </span>
-                  <StatusBadge status={task.status} />
-                </div>
-                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                  <span style={{ fontSize: 11, color: 'var(--text-secondary)' }}>{project?.name}</span>
-                  <span style={{ fontSize: 11, color: task.assigned_name ? 'var(--text-secondary)' : 'var(--text-muted)' }}>{task.assigned_name || 'Unassigned'}</span>
-                </div>
-              </Link>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function ProjectGroup({ project, tasks }) {
-  const [open, setOpen] = useState(true);
-  return (
-    <div className="interactive-surface" style={{ marginBottom: 10, border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden', background: 'var(--card-bg)' }}>
-      <button
-        className="interactive-panel-toggle"
-        onClick={() => setOpen(o => !o)}
-        style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 14px', background: 'var(--card-bg-2)', border: 'none', cursor: 'pointer', borderBottom: open ? '1px solid var(--border)' : 'none', fontFamily: 'inherit' }}
-      >
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-          <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-primary)' }}>{project.name}</span>
-          <span style={{ fontSize: 11, fontWeight: 600, padding: '1px 7px', borderRadius: 20, background: 'var(--accent)', color: '#1a1a1a' }}>{tasks.length}</span>
-        </div>
-        <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>{open ? '▲' : '▼'}</span>
-      </button>
-      {open && (
-        <div>
-          {tasks.map(task => (
-            <a key={task.id} href={`/requests/${task.id}`} className="interactive-row" style={{ padding: '10px 14px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', textDecoration: 'none' }}>
-              <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>
-                {task.title} <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>{'R' + String(task.current_version || 0).padStart(2, '0')}</span>
-              </span>
-              <StatusBadge status={task.status} />
-            </a>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function OutputCharts({ title, subtitle, taskPeople, revisionPeople }) {
-  const taskRows = [...(taskPeople || [])].sort((a, b) => b.total - a.total || a.name.localeCompare(b.name));
-  const revisionRows = [...(revisionPeople || [])].sort((a, b) => b.revisions - a.revisions || a.name.localeCompare(b.name));
-  const hasData = taskRows.length > 0 || revisionRows.length > 0;
-  const chartColors = ['#F5A523', '#60A5FA', '#4ADE80', '#F87171', '#C084FC', '#FBBF24', '#22C55E', '#38BDF8'];
-  const totalTasks = taskRows.reduce((sum, p) => sum + p.total, 0);
-  const totalRevisions = revisionRows.reduce((sum, p) => sum + p.revisions, 0);
-  const taskGradient = taskRows.length
-    ? `conic-gradient(${taskRows.map((p, i) => { const start = (taskRows.slice(0, i).reduce((s, x) => s + x.total, 0) / Math.max(totalTasks, 1)) * 100; const end = (taskRows.slice(0, i + 1).reduce((s, x) => s + x.total, 0) / Math.max(totalTasks, 1)) * 100; return `${chartColors[i % chartColors.length]} ${start}% ${end}%`; }).join(', ')})`
-    : 'none';
-  const revisionGradient = totalRevisions > 0
-    ? `conic-gradient(${revisionRows.map((p, i) => { const start = (revisionRows.slice(0, i).reduce((s, x) => s + x.revisions, 0) / totalRevisions) * 100; const end = (revisionRows.slice(0, i + 1).reduce((s, x) => s + x.revisions, 0) / totalRevisions) * 100; return `${chartColors[i % chartColors.length]} ${start}% ${end}%`; }).join(', ')})`
-    : 'none';
-  return (
-    <div className="card">
-      <div className="card-title" style={{ marginBottom: 6 }}>{title}</div>
-      <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 14 }}>{subtitle}</div>
-      {!hasData ? (
-        <div style={{ color: 'var(--text-muted)', fontSize: 13 }}>No completed assigned tasks yet.</div>
-      ) : (
-        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
-          {[
-            { title: 'New Tasks', total: totalTasks, rows: taskRows, valueKey: 'total', gradient: taskGradient },
-            { title: 'Revisions', total: totalRevisions, rows: revisionRows, valueKey: 'revisions', gradient: revisionGradient },
-          ].map(chart => (
-            <div key={chart.title} style={{ border: '1px solid var(--border)', borderRadius: 8, padding: 16, background: 'var(--card-bg-2)' }}>
-              <div style={{ display: 'grid', gridTemplateColumns: '140px minmax(0, 1fr)', gap: 18, alignItems: 'center' }}>
-                <div className="dashboard-pie-wrap">
-                  <div className="dashboard-pie" style={{ background: chart.gradient }}>
-                    <div className="dashboard-pie-center">
-                      <strong>{chart.total}</strong>
-                      <span>{chart.title}</span>
-                    </div>
-                  </div>
-                </div>
-                <div className="dashboard-legend">
-                  {chart.rows.map((person, index) => {
-                    const value = person[chart.valueKey];
-                    const percent = chart.total ? Math.round((value / chart.total) * 100) : 0;
-                    return (
-                      <div key={`${chart.title}-${person.name}`} className="dashboard-legend-item">
-                        <span className="dashboard-legend-dot" style={{ background: chartColors[index % chartColors.length] }} />
-                        <span style={{ minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{person.name}</span>
-                        <strong>{value} · {percent}%</strong>
-                      </div>
-                    );
-                  })}
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function buildTaskPeople(tasks) {
-  const completed = tasks.filter(t => t.status === 'client_approved' && t.assigned_name);
-  return [...completed.reduce((map, t) => {
-    const entry = map.get(t.assigned_name) || { name: t.assigned_name, total: 0 };
-    entry.total += 1;
-    map.set(t.assigned_name, entry);
-    return map;
-  }, new Map()).values()];
-}
-
-function buildRevisionPeople(submissions, tasks, roleFilter) {
-  return [...(submissions || []).reduce((map, sub) => {
-    if ((sub.version_number || 0) <= 0) return map;
-    if (!sub.delivery?.sent_by) return map;
-    if (roleFilter && sub.delivery_sender_role !== roleFilter) return map;
-    if (!roleFilter && sub.delivery_sender_role === 'external') return map;
-    const entry = map.get(sub.delivery.sent_by) || { name: sub.delivery.sent_by, revisions: 0 };
-    entry.revisions += 1;
-    map.set(sub.delivery.sent_by, entry);
-    return map;
-  }, new Map()).values()];
-}
-
-function SubcontractorRates({ externals }) {
-  const [rates, setRates] = useState(() => Object.fromEntries(externals.map(p => [p.id, String(p.brand_book_rate ?? 60)])));
-  const [saving, setSaving] = useState('');
-  const [saved, setSaved] = useState('');
-  const handleSave = async (profile) => {
-    const rate = parseFloat(rates[profile.id]);
-    if (isNaN(rate) || rate < 0) return;
-    setSaving(profile.id);
-    await supabase.from('profiles').update({ brand_book_rate: rate }).eq('id', profile.id);
-    setSaving('');
-    setSaved(profile.id);
-    setTimeout(() => setSaved(s => s === profile.id ? '' : s), 2000);
-  };
-  if (externals.length === 0) return null;
-  return (
-    <div className="card" style={{ marginTop: 24 }}>
-      <div className="card-title" style={{ marginBottom: 4 }}>Subcontractor Rates</div>
-      <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 16 }}>Brand book rate per completed task, used to calculate invoices.</div>
-      <div style={{ display: 'grid', gap: 10 }}>
-        {externals.map(profile => (
-          <div key={profile.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 14px', border: '1px solid var(--border)', borderRadius: 8, background: 'var(--card-bg-2)' }}>
-            <div style={{ flex: 1, fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>{profile.name || profile.email}</div>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-              <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>$/task</span>
-              <input type="number" min="0" step="0.01" value={rates[profile.id] ?? '60'} onChange={e => setRates(r => ({ ...r, [profile.id]: e.target.value }))} style={{ width: 80, fontSize: 13, padding: '4px 8px', borderRadius: 6, border: '1px solid var(--border)', background: 'var(--input-bg)', color: 'var(--text-primary)', textAlign: 'right' }} />
-              <button className="btn btn-outline btn-sm" disabled={saving === profile.id} onClick={() => handleSave(profile)}>
-                {saving === profile.id ? 'Saving...' : saved === profile.id ? '✓ Saved' : 'Save'}
-              </button>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function ExternalDashboard({ currentUser, projects, tasks, pos }) {
-  const activeTasks = tasks.filter(t => t.status !== 'client_approved');
-  const completedTasks = tasks.filter(t => t.status === 'client_approved');
+function ExternalDashboard({ currentUser, projects, tasks, pos, submissions, clientProfiles, companyMemberships }) {
+  const myTasks = tasks.filter(t => t.assigned_to === currentUser?.id);
+  const myActiveTasks = myTasks.filter(t => !['client_approved', 'on_hold'].includes(t.status));
+  const myCompleted = myTasks.filter(t => t.status === 'client_approved');
+  const myCompletedRevisions = myCompleted.reduce((sum, t) => sum + Number(t.current_version || 0), 0);
+  const myOnHold = myTasks.filter(t => t.status === 'on_hold');
+  const myAssignedProjectCount = new Set(myTasks.map(t => t.project_id).filter(Boolean)).size;
   const unpaidAmount = pos.filter(p => !['paid', 'cancelled'].includes(p.status)).reduce((s, p) => s + Number(p.amount || 0), 0);
   const paidAmount = pos.filter(p => p.status === 'paid').reduce((s, p) => s + Number(p.amount || 0), 0);
+
+  const myProjectIds = new Set(myTasks.map(t => t.project_id).filter(Boolean));
+  const myProjects = myProjectIds.size > 0
+    ? projects.filter(p => myProjectIds.has(p.id))
+    : projects;
+  const companyById = Object.fromEntries(myProjects.filter(p => p.company).map(p => [p.company_id, p.company]));
+  const myProjectIdSet = new Set(myProjects.map(p => p.id));
+  const activityEvents = buildActivityEvents(submissions, myProjectIdSet);
+  const externalHighlights = buildClientHighlights(Object.values(companyById), myProjects, tasks, clientProfiles, companyMemberships || [])
+    .sort((a, b) => b.openTaskCount - a.openTaskCount || a.company.name.localeCompare(b.company.name))
+    .slice(0, 5);
   return (
     <Layout>
-      <div className="page-header">
-        <div>
-          <div className="page-title">Welcome back, {currentUser?.name?.split(' ')[0]}</div>
-          <div className="page-subtitle">Your assigned projects.</div>
-        </div>
+      <div className="dash-stat-grid">
+        <DashStatCard label="Active Tasks" value={myActiveTasks.length} sub={`${myOnHold.length} on hold`} iconBg="rgba(96,165,250,0.15)" iconColor="#60a5fa" iconPath={DASH_ICONS.tasks} />
+        <DashStatCard label="Completed Tasks" value={myCompleted.length} sub={`${myCompletedRevisions} total revisions`} iconBg="rgba(74,222,128,0.15)" iconColor="#4ade80" iconPath={DASH_ICONS.trending} />
+        <DashStatCard label="Active Projects" value={myProjects.length} sub={`${myAssignedProjectCount} assigned to me`} iconBg="rgba(167,139,250,0.15)" iconColor="#a78bfa" iconPath={DASH_ICONS.projects} />
+        <DashStatCard label="Pending Payment" value={fmtMoney(unpaidAmount)} sub={`${fmtMoney(paidAmount)} paid`} iconBg="rgba(245,165,35,0.15)" iconColor="#F5A523" iconPath={DASH_ICONS.invoice} />
       </div>
-      <div className="stats-grid" style={{ marginBottom: 24 }}>
-        <div className="stat-card stat-card-highlight">
-          <div className="stat-value">{activeTasks.length}</div>
-          <div className="stat-label">Active Tasks</div>
-        </div>
-        <div className="stat-card">
-          <div className="stat-value">{completedTasks.length}</div>
-          <div className="stat-label">Completed Tasks</div>
-        </div>
-        <div className="stat-card">
-          <div className="stat-value" style={{ color: unpaidAmount > 0 ? 'var(--accent)' : undefined }}>${unpaidAmount.toFixed(2)}</div>
-          <div className="stat-label">Unpaid Invoices</div>
-        </div>
-        <div className="stat-card">
-          <div className="stat-value">${paidAmount.toFixed(2)}</div>
-          <div className="stat-label">Paid Invoices</div>
-        </div>
+      <div className="dashboard-bottom-grid">
+        <ActivityFeed events={activityEvents} />
+        {myProjects.length > 0 && <ClientHighlightTable highlights={externalHighlights} />}
       </div>
-      {projects.length === 0 ? (
-        <div className="empty-state">
-          <div className="empty-state-icon">📋</div>
-          <h3>No projects assigned yet</h3>
-          <p>Your team lead will assign you to projects.</p>
-        </div>
-      ) : (
-        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
-          <div>
-            <div className="card-title">Active Jobs</div>
-            {activeTasks.length === 0 ? (
-              <div style={{ padding: '24px 16px', textAlign: 'center', color: 'var(--text-muted)', fontSize: 13, background: 'var(--card-bg)', borderRadius: 8, border: '1px solid var(--border)' }}>No active jobs</div>
-            ) : projects.map(project => {
-              const projectTasks = activeTasks.filter(t => t.project_id === project.id);
-              if (projectTasks.length === 0) return null;
-              return <ProjectGroup key={project.id} project={project} tasks={projectTasks} />;
-            })}
-          </div>
-          <div>
-            <div className="card-title">Completed</div>
-            {completedTasks.length === 0 ? (
-              <div style={{ padding: '24px 16px', textAlign: 'center', color: 'var(--text-muted)', fontSize: 13, background: 'var(--card-bg)', borderRadius: 8, border: '1px solid var(--border)' }}>No completed jobs yet</div>
-            ) : projects.map(project => {
-              const projectTasks = completedTasks.filter(t => t.project_id === project.id);
-              if (projectTasks.length === 0) return null;
-              return <ProjectGroup key={project.id} project={project} tasks={projectTasks} />;
-            })}
-          </div>
-        </div>
-      )}
     </Layout>
   );
 }
 
-// ─── Client helpers ────────────────────────────────────────────────────────
+// ─── Shared dashboard helpers ──────────────────────────────────────────────
 
-function ClientTaskRow({ task, project }) {
+const ACTION_ICON = {
+  task_started:       { bg: 'rgba(96,165,250,0.15)',  color: '#60a5fa', path: <polygon points="6,4 20,12 6,20" fill="currentColor"/> },
+  task_resumed:       { bg: 'rgba(96,165,250,0.15)',  color: '#60a5fa', path: <polygon points="6,4 20,12 6,20" fill="currentColor"/> },
+  task_submitted:     { bg: 'rgba(74,222,128,0.15)',  color: '#4ade80', path: <><line x1="12" y1="19" x2="12" y2="5" strokeWidth="2" strokeLinecap="round"/><polyline points="5,12 12,5 19,12" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/></> },
+  task_approved:      { bg: 'rgba(74,222,128,0.15)',  color: '#4ade80', path: <polyline points="4,13 9,18 20,7" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/> },
+  task_on_hold:       { bg: 'rgba(239,68,68,0.15)',   color: '#ef4444', path: <><rect x="6" y="4" width="4" height="16" rx="1" fill="currentColor"/><rect x="14" y="4" width="4" height="16" rx="1" fill="currentColor"/></> },
+  task_created:       { bg: 'rgba(167,139,250,0.15)', color: '#a78bfa', path: <><line x1="12" y1="5" x2="12" y2="19" strokeWidth="2" strokeLinecap="round"/><line x1="5" y1="12" x2="19" y2="12" strokeWidth="2" strokeLinecap="round"/></> },
+  project_created:    { bg: 'rgba(245,165,35,0.15)',  color: '#F5A523', path: <><path d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V7z" fill="none" strokeWidth="1.5"/></> },
+  request_submitted:  { bg: 'rgba(167,139,250,0.15)', color: '#a78bfa', path: <><rect x="5" y="3" width="14" height="18" rx="2" fill="none" strokeWidth="1.5"/><line x1="9" y1="8" x2="15" y2="8" strokeWidth="1.5" strokeLinecap="round"/><line x1="9" y1="12" x2="15" y2="12" strokeWidth="1.5" strokeLinecap="round"/><line x1="9" y1="16" x2="12" y2="16" strokeWidth="1.5" strokeLinecap="round"/></> },
+  revision_requested: { bg: 'rgba(245,158,11,0.15)',  color: '#f59e0b', path: <><path d="M4 12a8 8 0 018-8v0a8 8 0 018 8" fill="none" strokeWidth="1.5" strokeLinecap="round"/><polyline points="18,8 20,12 16,12" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none"/></> },
+};
+function ActionIcon({ actionKey, size = 27 }) {
+  const cfg = ACTION_ICON[actionKey] || { bg: 'rgba(255,255,255,0.08)', color: 'rgba(255,255,255,0.4)', path: <circle cx="12" cy="12" r="3" fill="currentColor"/> };
   return (
-    <Link
-      to={`/requests/${task.id}`}
-      className="interactive-row"
-      style={{ display: 'flex', flexDirection: 'column', gap: 4, padding: '10px 14px', borderBottom: '1px solid var(--border)', textDecoration: 'none', cursor: 'pointer' }}
-    >
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
-        <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>{task.title}</span>
-        <StatusBadge status={task.status} />
-      </div>
-      <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>{project?.name || '—'}</span>
-    </Link>
+    <div style={{ width: size, height: size, borderRadius: '50%', background: cfg.bg, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <svg width="13" height="13" viewBox="0 0 24 24" stroke={cfg.color} fill="none" style={{ color: cfg.color }}>{cfg.path}</svg>
+    </div>
   );
 }
 
-function ClientTaskColumn({ title, tasks, projects, emptyMessage }) {
+const ACTION_LABEL = {
+  task_created: 'created',
+  task_started: 'started',
+  task_on_hold: 'put on hold',
+  task_resumed: 'resumed',
+  task_submitted: 'submitted',
+  task_approved: 'approved',
+  project_created: 'created project',
+  request_submitted: 'submitted',
+  revision_requested: 'requested revision on',
+};
+
+function buildActivityEvents(activityData, projectIdSet = null) {
+  return (activityData || [])
+    .filter(e => !projectIdSet || !e.project_id || projectIdSet.has(e.project_id))
+    .map(e => ({
+      time: new Date(e.created_at),
+      name: e.actor_name || 'Fourge',
+      actionKey: e.action,
+      action: ACTION_LABEL[e.action] || e.action,
+      task: e.task_title || null,
+      project: e.project_name || null,
+    })).filter(e => !isNaN(e.time)).slice(0, 10);
+}
+
+function buildClientHighlights(companies, projects, tasks, clientProfiles, companyMemberships = [], invoices = []) {
+  const doneStatuses = ['client_approved', 'invoiced', 'paid'];
+  return (companies || []).map(company => {
+    const companyProjects = (projects || []).filter(p => p.company_id === company.id);
+    const primaryContact = (clientProfiles || []).find(p =>
+      p.company_id === company.id ||
+      (companyMemberships || []).some(m => m.company_id === company.id && m.profile_id === p.id)
+    );
+    const openTasks = (tasks || []).filter(t => companyProjects.some(p => p.id === t.project_id) && !doneStatuses.includes(t.status));
+    const companyInvoices = (invoices || []).filter(i => i.company_id === company.id);
+    const outstandingTotal = companyInvoices.filter(i => i.status === 'sent').reduce((s, i) => s + Number(i.total || 0), 0);
+    const paidTotal = companyInvoices.filter(i => i.status === 'paid').reduce((s, i) => s + Number(i.total || 0), 0);
+    return { company, primaryContact, projectCount: companyProjects.length, openTaskCount: openTasks.length, outstandingTotal, paidTotal };
+  });
+}
+
+function fmtMoney(n) {
+  if (Math.abs(n) >= 1000000) return `$${(n / 1000000).toFixed(2)}M`;
+  if (Math.abs(n) >= 10000) return `$${(n / 1000).toFixed(1)}k`;
+  return `$${Number(n).toFixed(2)}`;
+}
+
+function smoothCurve(pts) {
+  if (pts.length < 2) return '';
+  let d = `M${pts[0][0].toFixed(1)},${pts[0][1].toFixed(1)}`;
+  for (let i = 1; i < pts.length; i++) {
+    const [x0, y0] = pts[i - 1];
+    const [x1, y1] = pts[i];
+    const cpX = (x0 + x1) / 2;
+    d += ` C${cpX.toFixed(1)},${y0.toFixed(1)} ${cpX.toFixed(1)},${y1.toFixed(1)} ${x1.toFixed(1)},${y1.toFixed(1)}`;
+  }
+  return d;
+}
+
+function MiniAreaChart({ data }) {
+  const W = 90, H = 42;
+  if (!data || data.length < 2) return null;
+  const max = Math.max(...data, 1);
+  const pts = data.map((v, i) => [
+    (i / (data.length - 1)) * W,
+    4 + (1 - v / max) * (H - 8),
+  ]);
+  const line = smoothCurve(pts);
+  const lastPt = pts[pts.length - 1];
+  const firstPt = pts[0];
+  const area = `${line} L${lastPt[0].toFixed(1)},${H} L${firstPt[0].toFixed(1)},${H} Z`;
   return (
-    <div className="card" style={{ padding: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
-      <div style={{ padding: '12px 14px', borderBottom: tasks.length > 0 ? '1px solid var(--border)' : 'none', background: 'var(--card-bg-2)', flexShrink: 0 }}>
-        <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-primary)' }}>{title}</span>
-        {tasks.length > 0 && (
-          <span style={{ marginLeft: 8, fontSize: 11, fontWeight: 600, padding: '1px 7px', borderRadius: 20, background: 'var(--accent)', color: '#1a1a1a' }}>{tasks.length}</span>
-        )}
+    <svg width="100%" height={H} viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" style={{ display: 'block', overflow: 'hidden' }}>
+      <defs>
+        <linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="5%" stopColor="#F5A523" stopOpacity="0.3" />
+          <stop offset="95%" stopColor="#F5A523" stopOpacity="0" />
+        </linearGradient>
+      </defs>
+      <path d={area} fill="url(#areaGrad)" />
+      <path d={line} fill="none" stroke="#F5A523" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function DashStatCard({ label, value, sub, iconBg, iconColor, iconPath, chartData }) {
+  return (
+    <div style={{ background: 'var(--card-bg)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', border: '1px solid var(--border)', borderRadius: 8, padding: '18px 21px', display: 'flex', alignItems: 'stretch', gap: 21, minHeight: 120 }}>
+      <div style={{ flexShrink: 0, display: 'flex', flexDirection: 'column', ...(chartData ? {} : { flex: 1 }) }}>
+        <div style={{ fontSize: 11, fontWeight: 500, color: 'rgba(255,255,255,0.7)', letterSpacing: 0.8, textTransform: 'uppercase', marginBottom: 5 }}>{label}</div>
+        <div style={{ flex: 1, display: 'flex', alignItems: 'center' }}>
+          <div style={{ fontSize: 30, fontWeight: 400, color: '#ffffff', letterSpacing: -0.5, lineHeight: 1.1 }}>{value}</div>
+        </div>
+        {sub && <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', marginTop: 5 }}>{sub}</div>}
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', justifyContent: 'space-between', ...(chartData ? { flex: 1, minWidth: 0 } : { flexShrink: 0 }) }}>
+        <div style={{ width: 27, height: 27, borderRadius: '50%', background: iconBg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke={iconColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" dangerouslySetInnerHTML={{ __html: iconPath }} />
+        </div>
+        {chartData && <MiniAreaChart data={chartData} />}
+      </div>
+    </div>
+  );
+}
+
+const DASH_ICONS = {
+  revenue: '<line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/>',
+  projects: '<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>',
+  tasks: '<path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/>',
+  invoice: '<rect x="2" y="2" width="20" height="20" rx="2"/><line x1="12" y1="6" x2="12" y2="18"/><path d="M16 8H9.5a2.5 2.5 0 000 5h5a2.5 2.5 0 010 5H8"/>',
+  trending: '<polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/>',
+  profit: '<line x1="12" y1="20" x2="12" y2="4"/><polyline points="5 11 12 4 19 11"/>',
+};
+
+function StatBar({ items }) {
+  return (
+    <div className="stat-bar">
+      {items.map((item, i) => (
+        <div key={i} className="stat-bar-item">
+          <div className="stat-bar-header">
+            <div className="stat-bar-label">{item.label}</div>
+            <div className="stat-bar-dot" style={{ background: item.color }} />
+          </div>
+          <div className="stat-bar-value">{item.value}</div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function TaskFeed({ title, tasks, projects, emptyMessage }) {
+  const navigate = useNavigate();
+  return (
+    <div className="card" style={{ padding: 0, overflow: 'hidden', borderRadius: 4, flexShrink: 0 }}>
+      <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--border)', background: 'var(--card-bg-2)', display: 'flex', alignItems: 'center', gap: 8 }}>
+        <span style={{ fontSize: 13, fontWeight: 400, color: 'var(--text-primary)' }}>{title}</span>
+        {tasks.length > 0 && <span style={{ fontSize: 11, fontWeight: 400, padding: '1px 7px', borderRadius: 20, background: 'var(--accent)', color: '#1a1a1a' }}>{tasks.length}</span>}
       </div>
       {tasks.length === 0 ? (
-        <div style={{ padding: '14px', fontSize: 13, color: 'var(--text-muted)' }}>{emptyMessage}</div>
-      ) : (
-        <div style={{ overflowY: 'auto', maxHeight: 'calc(100vh - 412px)' }}>
-          {tasks.map(task => (
-            <ClientTaskRow key={task.id} task={task} project={projects.find(p => p.id === task.project_id)} />
-          ))}
+        <div style={{ padding: 24, textAlign: 'center', color: 'var(--text-muted)', fontSize: 13 }}>{emptyMessage}</div>
+      ) : tasks.map((task, i) => {
+        const project = projects.find(p => p.id === task.project_id);
+        return (
+          <div key={task.id} onClick={() => navigate(`/requests/${task.id}`)} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, padding: '10px 16px', borderBottom: i < tasks.length - 1 ? '1px solid var(--border)' : 'none', cursor: 'pointer' }}>
+            <div style={{ minWidth: 0 }}>
+              <div style={{ fontSize: 13, fontWeight: 400, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{task.title}</div>
+              {project && <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>{project.name}</div>}
+            </div>
+            <div style={{ fontSize: 12, color: 'var(--text-muted)', whiteSpace: 'nowrap', flexShrink: 0 }}>
+              {task.assigned_name ? <>Assigned to <span style={{ color: 'var(--text-primary)' }}>{task.assigned_name}</span></> : 'Unassigned'}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function ActivityFeed({ events }) {
+  const visible = events.slice(0, 5);
+  return (
+    <div style={{ background: 'var(--card-bg)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', border: '1px solid var(--border)', borderRadius: 8, padding: '18px 21px', flexShrink: 0 }}>
+      <div style={{ marginBottom: visible.length > 0 ? 14 : 0 }}>
+        <span style={{ fontSize: 11, fontWeight: 500, color: 'rgba(255,255,255,0.7)', letterSpacing: 0.8, textTransform: 'uppercase' }}>Recent Activity</span>
+      </div>
+      {visible.length === 0 ? (
+        <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.5)', marginTop: 14 }}>No recent activity</div>
+      ) : visible.map((e, i) => (
+        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: i > 0 ? 10 : 0 }}>
+          <ActionIcon actionKey={e.actionKey} />
+          <div style={{ flex: 1, minWidth: 0, fontSize: 13, lineHeight: 1.4 }}>
+            <span style={{ color: '#ffffff', fontWeight: 400 }}>{e.name}</span>
+            {e.action && <span style={{ color: 'rgba(255,255,255,0.5)' }}> {e.action}</span>}
+            {e.task && <span style={{ color: '#ffffff' }}> {e.task}</span>}
+          </div>
+          <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', whiteSpace: 'nowrap', flexShrink: 0 }}>{e.time.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}</span>
         </div>
-      )}
+      ))}
+    </div>
+  );
+}
+
+function ClientHighlightTable({ highlights }) {
+  const { sortKey, sortDir, toggle, sort } = useSortable('company');
+  if (!highlights || highlights.length === 0) return null;
+  const fmtMoney = (n) => `$${Number(n || 0).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+  const sortedHighlights = sort(highlights, (row, key) => {
+    if (key === 'company') return row.company?.name || '';
+    if (key === 'primaryContact') return row.primaryContact?.name || '';
+    if (key === 'projectCount') return row.projectCount || 0;
+    if (key === 'openTaskCount') return row.openTaskCount || 0;
+    if (key === 'outstandingTotal') return Number(row.outstandingTotal || 0);
+    if (key === 'paidTotal') return Number(row.paidTotal || 0);
+    return '';
+  });
+  return (
+    <div className="card" style={{ padding: 0, overflow: 'hidden', borderRadius: 4, flexShrink: 0 }}>
+      <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--border)', background: 'var(--card-bg-2)' }}>
+        <span style={{ fontSize: 13, fontWeight: 400, color: 'var(--text-primary)' }}>Client Highlight</span>
+      </div>
+      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+        <thead>
+          <tr style={{ background: 'var(--card-bg-2)' }}>
+            <SortTh col="company" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ padding: '8px 16px', textAlign: 'left', fontSize: 11, fontWeight: 400, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.4px', borderBottom: '1px solid var(--border)' }}>Company</SortTh>
+            <SortTh col="primaryContact" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ padding: '8px 16px', textAlign: 'center', fontSize: 11, fontWeight: 400, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.4px', borderBottom: '1px solid var(--border)' }}>Primary Contact</SortTh>
+            <SortTh col="projectCount" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ padding: '8px 16px', textAlign: 'center', fontSize: 11, fontWeight: 400, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.4px', borderBottom: '1px solid var(--border)' }}>Projects</SortTh>
+            <SortTh col="openTaskCount" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ padding: '8px 16px', textAlign: 'center', fontSize: 11, fontWeight: 400, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.4px', borderBottom: '1px solid var(--border)' }}>Open Tasks</SortTh>
+            <SortTh col="outstandingTotal" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ padding: '8px 16px', textAlign: 'right', fontSize: 11, fontWeight: 400, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.4px', borderBottom: '1px solid var(--border)' }}>Outstanding</SortTh>
+            <SortTh col="paidTotal" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ padding: '8px 16px', textAlign: 'right', fontSize: 11, fontWeight: 400, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.4px', borderBottom: '1px solid var(--border)' }}>Paid</SortTh>
+          </tr>
+        </thead>
+        <tbody>
+          {sortedHighlights.map(({ company, primaryContact, projectCount, openTaskCount, outstandingTotal = 0, paidTotal = 0 }, i) => (
+            <tr key={company.id} style={{ borderBottom: i < sortedHighlights.length - 1 ? '1px solid var(--border)' : 'none' }}>
+              <td style={{ padding: '10px 16px', fontSize: 13, fontWeight: 400, color: 'var(--text-primary)' }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                  <InitialPortrait name={company.name} />
+                  {company.name}
+                </div>
+              </td>
+              <td style={{ padding: '10px 16px', fontSize: 13, color: 'var(--text-secondary)', textAlign: 'center' }}>{primaryContact?.name || '—'}</td>
+              <td style={{ padding: '10px 16px', fontSize: 13, color: 'var(--text-secondary)', textAlign: 'center' }}>{projectCount}</td>
+              <td style={{ padding: '10px 16px', fontSize: 13, color: 'var(--text-primary)', textAlign: 'center' }}>{openTaskCount}</td>
+              <td style={{ padding: '10px 16px', fontSize: 13, color: 'var(--accent)', textAlign: 'right' }}>{fmtMoney(outstandingTotal)}</td>
+              <td style={{ padding: '10px 16px', fontSize: 13, color: 'var(--accent)', textAlign: 'right' }}>{fmtMoney(paidTotal)}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
     </div>
   );
 }
@@ -370,155 +333,116 @@ export default function DashboardPage() {
   const companies = isClient
     ? (currentUser?.companies?.length ? currentUser.companies : (currentUser?.company ? [currentUser.company] : [])).slice().sort((a, b) => a.name.localeCompare(b.name))
     : [];
-  const [activeCompanyId, setActiveCompanyId] = useState(companies[0]?.id || null);
   const [allClientTasks, setAllClientTasks] = useState([]);
   const [allClientProjects, setAllClientProjects] = useState([]);
   const [allClientInvoices, setAllClientInvoices] = useState([]);
+  const [clientActivity, setClientActivity] = useState([]);
 
-  // ── Team/External state ───────────────────────────────────────────────
-  const cacheKey = isExternal ? 'team_dashboard_external' : 'team_dashboard';
-  const cached = !isClient ? readPageCache(cacheKey, 5 * 60_000) : null;
+  // ── External state ────────────────────────────────────────────────────
+  const cacheKey = 'team_dashboard_external';
+  const cached = isExternal ? readPageCache(cacheKey, 5 * 60_000) : null;
   const [tasks, setTasks] = useState(() => cached?.tasks || []);
   const [projects, setProjects] = useState(() => cached?.projects || []);
   const [submissions, setSubmissions] = useState(() => cached?.submissions || []);
   const [pos, setPos] = useState(() => cached?.pos || []);
-  const [externalProfiles, setExternalProfiles] = useState(() => cached?.externalProfiles || []);
+  const [clientProfiles, setClientProfiles] = useState(() => cached?.clientProfiles || []);
+  const [companyMemberships, setCompanyMemberships] = useState(() => cached?.companyMemberships || []);
 
-  const [loading, setLoading] = useState(() => isClient ? hasCompany : !cached);
+  const [loading, setLoading] = useState(() => isClient ? hasCompany : isExternal && !cached);
 
   useEffect(() => {
+    let cancelled = false;
     if (isClient) {
       if (!hasCompany) { setLoading(false); return; }
       async function loadClient() {
         try {
-          const [{ data: activeTasks }, { data: invoices }] = await withTimeout(Promise.all([
-            supabase.from('tasks').select('id, title, status, project_id, project:projects(id, name, company_id)').order('submitted_at', { ascending: false }),
+          const [{ data: activeTasks }, { data: invoices }, { data: activityData }] = await withTimeout(Promise.all([
+            supabase.from('tasks').select('id, title, status, project_id, assigned_name, project:projects(id, name, company_id)').order('submitted_at', { ascending: false }),
             supabase.from('invoices').select('total, status, company_id').in('status', ['sent', 'paid']),
-          ]), 12000, 'Client dashboard load');
+            supabase.from('activity_log').select('id, created_at, actor_name, action, task_title, project_name, project_id').order('created_at', { ascending: false }).limit(20),
+          ]), 30000, 'Client dashboard load');
+          if (cancelled) return;
           const clientTasks = activeTasks || [];
           setAllClientTasks(clientTasks);
           setAllClientInvoices(invoices || []);
+          setClientActivity(activityData || []);
           const projectMap = {};
           clientTasks.forEach(t => { if (t.project?.id) projectMap[t.project.id] = t.project; });
           setAllClientProjects(Object.values(projectMap));
         } catch (error) {
           console.error('ClientDashboard load failed:', error);
         } finally {
-          setLoading(false);
+          if (!cancelled) setLoading(false);
         }
       }
       loadClient();
-    } else {
-      async function loadTeam() {
+    } else if (isExternal) {
+      async function loadExternal() {
         try {
-          if (isExternal) {
-            const [{ data: p }, { data: t }, { data: posData }] = await withTimeout(Promise.all([
-              supabase.from('projects').select('id, name').order('created_at', { ascending: false }),
-              supabase.from('tasks').select('id, title, status, current_version, project_id').order('submitted_at', { ascending: false }),
-              supabase.from('subcontractor_payments').select('id, amount, status').eq('profile_id', currentUser.id),
-            ]), 12000, 'Dashboard load');
+          const [{ data: p }, { data: t }, { data: posData }, { data: memRows }, { data: clientProfiles }, { data: activityData }] = await withTimeout(Promise.all([
+            supabase.from('projects').select('id, name, company_id, company:companies(id, name)').order('created_at', { ascending: false }),
+            supabase.from('tasks').select('id, title, status, current_version, project_id, assigned_to, assigned_name').order('submitted_at', { ascending: false }),
+            supabase.from('subcontractor_payments').select('id, amount, status').eq('profile_id', currentUser.id),
+            supabase.from('company_members').select('company_id, profile_id'),
+            supabase.from('profiles').select('id, name, email, company_id').eq('role', 'client'),
+            supabase.from('activity_log').select('id, created_at, actor_name, action, task_title, project_name, project_id').order('created_at', { ascending: false }).limit(20),
+          ]), 30000, 'External dashboard load');
+          if (!cancelled) {
             setProjects(p || []);
             setTasks(t || []);
             setPos(posData || []);
-            setSubmissions([]);
-            writePageCache(cacheKey, { projects: p || [], tasks: t || [], submissions: [], pos: posData || [], externalProfiles: [] });
-          } else {
-            const [{ data: t }, { data: p }, { data: subs }, { data: profiles }] = await withTimeout(Promise.all([
-              supabase.from('tasks').select('id, title, status, current_version, project_id, assigned_name, assigned_to, completed_at').order('submitted_at', { ascending: false }),
-              supabase.from('projects').select('id, name, status, company_id'),
-              supabase.from('submissions').select('task_id, version_number, deadline, type, submitted_by, submitted_by_name, delivery:deliveries(sent_by, sent_at)').order('version_number', { ascending: false }),
-              supabase.from('profiles').select('id, role, name, email, brand_book_rate'),
-            ]), 12000, 'Dashboard load');
-            const roleById = new Map((profiles || []).map(pr => [pr.id, pr.role]));
-            const roleByName = new Map((profiles || []).map(pr => [pr.name, pr.role]));
-            const tasksWithDeadlines = (t || []).map(task => ({
-              ...task,
-              deadline: getDeadlineSourceSubmission(task, subs)?.deadline || null,
-              assignee_role: roleById.get(task.assigned_to) || null,
-            }));
-            const subsWithRole = (subs || []).map(sub => ({
-              ...sub,
-              submitter_role: roleById.get(sub.submitted_by) || null,
-              delivery_sender_role: roleByName.get(sub.delivery?.sent_by) || null,
-            }));
-            const externals = (profiles || []).filter(pr => pr.role === 'external');
-            setTasks(tasksWithDeadlines);
-            setProjects(p || []);
-            setExternalProfiles(externals);
-            writePageCache(cacheKey, { tasks: tasksWithDeadlines, projects: p || [], submissions: subsWithRole, pos: [], externalProfiles: externals });
-            setSubmissions(subsWithRole);
+            setSubmissions(activityData || []);
+            setClientProfiles(clientProfiles || []);
+            setCompanyMemberships(memRows || []);
+            writePageCache(cacheKey, { projects: p || [], tasks: t || [], submissions: activityData || [], pos: posData || [], clientProfiles: clientProfiles || [], companyMemberships: memRows || [] });
           }
         } catch (error) {
-          console.error('Dashboard load failed:', error);
+          console.error('External dashboard load failed:', error);
+        } finally {
+          if (!cancelled) setLoading(false);
         }
-        setLoading(false);
       }
-      loadTeam();
+      loadExternal();
+    } else {
+      setLoading(false);
     }
-  }, [isClient, isExternal, hasCompany, cacheKey]); // eslint-disable-line react-hooks/exhaustive-deps
+    return () => { cancelled = true; };
+  }, [isClient, isExternal, hasCompany, cacheKey, currentUser?.id]);
 
   if (loading) return <Layout><p style={{ padding: 24, color: 'var(--text-muted)' }}>Loading...</p></Layout>;
 
   // ── Client render ──────────────────────────────────────────────────────
   if (isClient) {
-    const filterByCompany = (clientTasks) => {
-      if (companies.length <= 1 || !activeCompanyId) return clientTasks;
-      return clientTasks.filter(t => {
-        const proj = allClientProjects.find(p => p.id === t.project_id);
-        return proj?.company_id === activeCompanyId;
-      });
-    };
-    const visibleTasks = filterByCompany(allClientTasks);
-    const visibleProjects = companies.length <= 1 ? allClientProjects : allClientProjects.filter(p => p.company_id === activeCompanyId);
-    const visibleInvoices = companies.length <= 1 || !activeCompanyId ? allClientInvoices : allClientInvoices.filter(i => i.company_id === activeCompanyId);
-    const reviewTasks = visibleTasks.filter(t => t.status === 'client_review');
-    const inProgressTasks = visibleTasks.filter(t => t.status === 'in_progress');
-    const onHoldTasks = visibleTasks.filter(t => t.status === 'on_hold');
-    const notStartedTasks = visibleTasks.filter(t => t.status === 'not_started');
-    const outstandingInvoices = visibleInvoices.filter(i => i.status === 'sent').reduce((sum, inv) => sum + Number(inv.total || 0), 0);
-    const paidInvoices = visibleInvoices.filter(i => i.status === 'paid').reduce((sum, inv) => sum + Number(inv.total || 0), 0);
+    const myCompanyIds = new Set(companies.map(c => c.id));
+    const myTasks = myCompanyIds.size > 0
+      ? allClientTasks.filter(t => t.project?.company_id && myCompanyIds.has(t.project.company_id))
+      : allClientTasks;
+    const myProjects = myCompanyIds.size > 0
+      ? allClientProjects.filter(p => myCompanyIds.has(p.company_id))
+      : allClientProjects;
+    const myInvoices = myCompanyIds.size > 0
+      ? allClientInvoices.filter(i => myCompanyIds.has(i.company_id))
+      : allClientInvoices;
+    const myProjectIds = new Set(myProjects.map(p => p.id));
+    const reviewTasks = myTasks.filter(t => t.status === 'client_review');
+    const inProgressTasks = myTasks.filter(t => t.status === 'in_progress');
+    const onHoldTasks = myTasks.filter(t => t.status === 'on_hold');
+    const notStartedTasks = myTasks.filter(t => t.status === 'not_started');
+    const outstandingInvoices = myInvoices.filter(i => i.status === 'sent').reduce((sum, inv) => sum + Number(inv.total || 0), 0);
+    const paidInvoices = myInvoices.filter(i => i.status === 'paid').reduce((sum, inv) => sum + Number(inv.total || 0), 0);
 
     return (
       <Layout>
-        <div className="page-header">
-          <div>
-            <div className="page-title">Welcome back, {currentUser?.name?.split(' ')[0]}</div>
-            <div className="page-subtitle">Track active work and the items that need your attention.</div>
-          </div>
-          <Link to="/new-request" className="btn btn-primary">+ New Request</Link>
+        <div className="dash-stat-grid">
+          <DashStatCard label="Active Projects" value={myProjects.length} sub={`${myTasks.length} total tasks`} iconBg="rgba(96,165,250,0.15)" iconColor="#60a5fa" iconPath={DASH_ICONS.projects} />
+          <DashStatCard label="Outstanding" value={fmtMoney(outstandingInvoices)} sub={`${fmtMoney(paidInvoices)} paid`} iconBg="rgba(245,165,35,0.15)" iconColor="#F5A523" iconPath={DASH_ICONS.invoice} />
+          <DashStatCard label="In Progress" value={inProgressTasks.length} sub={`${notStartedTasks.length} not started`} iconBg="rgba(74,222,128,0.15)" iconColor="#4ade80" iconPath={DASH_ICONS.tasks} />
+          <DashStatCard label="Awaiting Review" value={reviewTasks.length} sub={`${onHoldTasks.length} on hold`} iconBg="rgba(245,165,35,0.15)" iconColor="#F5A523" iconPath={DASH_ICONS.trending} />
         </div>
-        {companies.length > 1 && (
-          <div style={{ marginBottom: 16 }}>
-            <select value={activeCompanyId || ''} onChange={e => setActiveCompanyId(e.target.value)} className="filter-select">
-              {companies.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
-            </select>
-          </div>
-        )}
-        <div className="stats-grid" style={{ marginBottom: 24 }}>
-          <div className="stat-card stat-card-highlight">
-            <div className="stat-value" style={{ color: reviewTasks.length > 0 ? 'var(--accent)' : undefined }}>{reviewTasks.length}</div>
-            <div className="stat-label">Awaiting Review</div>
-          </div>
-          <div className="stat-card">
-            <div className="stat-value">{inProgressTasks.length + onHoldTasks.length}</div>
-            <div className="stat-label">In Progress</div>
-          </div>
-          <div className="stat-card">
-            <div className="stat-value">{notStartedTasks.length}</div>
-            <div className="stat-label">Not Started</div>
-          </div>
-          <div className="stat-card">
-            <div className="stat-value">${outstandingInvoices.toFixed(2)}</div>
-            <div className="stat-label">Outstanding Invoices</div>
-          </div>
-          <div className="stat-card">
-            <div className="stat-value">${paidInvoices.toFixed(2)}</div>
-            <div className="stat-label">Paid Invoices</div>
-          </div>
-        </div>
-        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, flex: 1, minHeight: 0 }}>
-          <TaskTable title="Awaiting Your Review" subtitle="Items waiting for your approval." tasks={reviewTasks} projects={visibleProjects} emptyMessage="No items need your review." fill />
-          <TaskTable title="In Progress" subtitle="Active work across your projects." tasks={inProgressTasks} projects={visibleProjects} emptyMessage="No items currently in progress." fill />
+        <ActivityFeed events={buildActivityEvents(clientActivity, myProjectIds)} />
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginTop: 24 }}>
+          <TaskFeed title="Awaiting Your Review" tasks={reviewTasks} projects={myProjects} emptyMessage="No items need your review." />
+          <TaskFeed title="In Progress" tasks={inProgressTasks} projects={myProjects} emptyMessage="No items currently in progress." />
         </div>
       </Layout>
     );
@@ -526,65 +450,8 @@ export default function DashboardPage() {
 
   // ── External render ────────────────────────────────────────────────────
   if (isExternal) {
-    return <ExternalDashboard currentUser={currentUser} projects={projects} tasks={tasks} pos={pos} />;
+    return <ExternalDashboard currentUser={currentUser} projects={projects} tasks={tasks} pos={pos} submissions={submissions} clientProfiles={clientProfiles} companyMemberships={companyMemberships} />;
   }
 
-  // ── Team render ────────────────────────────────────────────────────────
-  const activeTasks = tasks.filter(t => t.status !== 'client_approved');
-  const inProgressTasks = tasks.filter(t => t.status === 'in_progress');
-  const notStartedTasks = tasks.filter(t => t.status === 'not_started');
-  const onHoldTasks = tasks.filter(t => t.status === 'on_hold');
-  const reviewTasks = tasks.filter(t => t.status === 'client_review');
-  const upcomingDeadlineTasks = [...tasks].filter(t => t.deadline && t.status !== 'client_approved').sort((a, b) => parseDateOnly(a.deadline) - parseDateOnly(b.deadline)).slice(0, 6);
-  const assignedToMeTasks = [...tasks].filter(t => t.assigned_to === currentUser?.id && t.status !== 'client_approved').sort((a, b) => { const ad = parseDateOnly(a.deadline); const bd = parseDateOnly(b.deadline); if (ad && bd) return ad - bd; if (ad) return -1; if (bd) return 1; return 0; }).slice(0, 6);
-  const teamOutputTasks = tasks.filter(t => t.assignee_role !== 'external');
-  const subOutputTasks = tasks.filter(t => t.assignee_role === 'external');
-
-  return (
-    <Layout>
-      <div className="page-header">
-        <div>
-          <div className="page-title">Welcome back, {currentUser?.name?.split(' ')[0]}</div>
-          <div className="page-subtitle">Here's what's happening across your projects.</div>
-        </div>
-      </div>
-      <div className="stats-grid">
-        <div className="stat-card stat-card-highlight">
-          <div className="stat-icon">⚡</div>
-          <div className="stat-value">{activeTasks.length}</div>
-          <div className="stat-label">Active Jobs</div>
-        </div>
-        <div className="stat-card">
-          <div className="stat-icon">⏹</div>
-          <div className="stat-value">{notStartedTasks.length}</div>
-          <div className="stat-label">Not Started</div>
-        </div>
-        <div className="stat-card">
-          <div className="stat-icon">▶</div>
-          <div className="stat-value">{inProgressTasks.length}</div>
-          <div className="stat-label">In Progress</div>
-        </div>
-        <div className="stat-card">
-          <div className="stat-icon">⏸</div>
-          <div className="stat-value">{onHoldTasks.length}</div>
-          <div className="stat-label">On Hold</div>
-        </div>
-        <div className="stat-card">
-          <div className="stat-icon">🕓</div>
-          <div className="stat-value">{reviewTasks.length}</div>
-          <div className="stat-label">In Review</div>
-        </div>
-      </div>
-      <div style={{ marginTop: 24 }}>
-        <OutputCharts title="Completed By Team Member" subtitle="Completed-task output by team assignee, with revisions counted by the person who submitted them." taskPeople={buildTaskPeople(teamOutputTasks)} revisionPeople={buildRevisionPeople(submissions, tasks, null)} />
-      </div>
-      <div style={{ marginTop: 24 }}>
-        <OutputCharts title="Completed By Subcontractor" subtitle="Completed-task output by subcontractor assignee, with revisions counted by the person who submitted them." taskPeople={buildTaskPeople(subOutputTasks)} revisionPeople={buildRevisionPeople(submissions, tasks, 'external')} />
-      </div>
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginTop: 24 }}>
-        <TaskTable title="Deadlines" subtitle="Upcoming due dates across active work." tasks={upcomingDeadlineTasks} projects={projects} emptyMessage="No active deadlines right now." />
-        <TaskTable title="Assigned To You" subtitle="Your active jobs, sorted by deadline." tasks={assignedToMeTasks} projects={projects} emptyMessage="Nothing is assigned to you right now." />
-      </div>
-    </Layout>
-  );
+  return null;
 }
diff --git a/src/pages/PayInvoice.jsx b/src/pages/PayInvoice.jsx
index 51f2268..909a956 100644
--- a/src/pages/PayInvoice.jsx
+++ b/src/pages/PayInvoice.jsx
@@ -83,49 +83,49 @@ export default function PayInvoice() {
         {loading ? (
           <div style={{ textAlign: 'center', color: '#666' }}>Loading...</div>
         ) : !invoice ? (
-          <div style={{ background: '#fff', color: '#141414', borderRadius: 12, padding: 32, textAlign: 'center', boxShadow: '0 2px 12px rgba(0,0,0,0.08)' }}>
-            <div style={{ fontSize: 18, fontWeight: 700, marginBottom: 8 }}>Invoice not found</div>
+          <div style={{ background: '#fff', color: '#141414', borderRadius: 4, padding: 32, textAlign: 'center', boxShadow: '0 2px 12px rgba(0,0,0,0.08)' }}>
+            <div style={{ fontSize: 18, fontWeight: 400, marginBottom: 8 }}>Invoice not found</div>
             <div style={{ color: '#666' }}>This payment link may be invalid or expired.</div>
           </div>
         ) : success || invoice.status === 'paid' ? (
-          <div style={{ background: '#fff', color: '#141414', borderRadius: 12, padding: 32, textAlign: 'center', boxShadow: '0 2px 12px rgba(0,0,0,0.08)' }}>
+          <div style={{ background: '#fff', color: '#141414', borderRadius: 4, padding: 32, textAlign: 'center', boxShadow: '0 2px 12px rgba(0,0,0,0.08)' }}>
             <div style={{ fontSize: 32, marginBottom: 12 }}>✓</div>
-            <div style={{ fontSize: 20, fontWeight: 700, marginBottom: 8 }}>Payment received</div>
+            <div style={{ fontSize: 20, fontWeight: 400, marginBottom: 8 }}>Payment received</div>
             <div style={{ color: '#666', marginBottom: 4 }}>{invoice.invoice_number}</div>
-            <div style={{ fontSize: 24, fontWeight: 700, color: '#16a34a', marginTop: 16 }}>{totalLabel}</div>
+            <div style={{ fontSize: 24, fontWeight: 400, color: '#16a34a', marginTop: 16 }}>{totalLabel}</div>
             <div style={{ color: '#666', marginTop: 6, fontSize: 12, letterSpacing: '0.3px' }}>Charged in USD</div>
             <div style={{ color: '#666', marginTop: 8, fontSize: 13 }}>Thank you for your payment. We'll be in touch!</div>
           </div>
         ) : (
-          <div style={{ background: '#fff', color: '#141414', borderRadius: 12, padding: 32, boxShadow: '0 2px 12px rgba(0,0,0,0.08)' }}>
-            <div style={{ fontSize: 13, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: '#999', marginBottom: 4 }}>Invoice</div>
-            <div style={{ fontSize: 22, fontWeight: 700, marginBottom: 4 }}>{invoice.invoice_number}</div>
+          <div style={{ background: '#fff', color: '#141414', borderRadius: 4, padding: 32, boxShadow: '0 2px 12px rgba(0,0,0,0.08)' }}>
+            <div style={{ fontSize: 13, fontWeight: 400, textTransform: 'uppercase', letterSpacing: '0.5px', color: '#999', marginBottom: 4 }}>Invoice</div>
+            <div style={{ fontSize: 22, fontWeight: 400, marginBottom: 4 }}>{invoice.invoice_number}</div>
             <div style={{ color: '#666', marginBottom: 24 }}>{invoice.bill_to || company?.name}</div>
 
             <div style={{ display: 'flex', justifyContent: 'space-between', padding: '12px 0', borderTop: '1px solid #eee', borderBottom: '1px solid #eee', marginBottom: 24 }}>
               <div>
                 <div style={{ fontSize: 12, color: '#999', marginBottom: 2 }}>Invoice Date</div>
-                <div style={{ fontWeight: 600, color: '#141414' }}>{new Date(invoice.invoice_date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}</div>
+                <div style={{ fontWeight: 400, color: '#141414' }}>{new Date(invoice.invoice_date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}</div>
               </div>
               <div style={{ textAlign: 'right' }}>
                 <div style={{ fontSize: 12, color: '#999', marginBottom: 2 }}>Due Date</div>
-                <div style={{ fontWeight: 600, color: '#141414' }}>{new Date(invoice.due_date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}</div>
+                <div style={{ fontWeight: 400, color: '#141414' }}>{new Date(invoice.due_date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}</div>
               </div>
             </div>
 
             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
               <div style={{ fontSize: 14, color: '#666' }}>Total Due</div>
-              <div style={{ fontSize: 28, fontWeight: 700, color: '#141414' }}>{totalLabel}</div>
+              <div style={{ fontSize: 28, fontWeight: 400, color: '#141414' }}>{totalLabel}</div>
             </div>
 
             {cancelled && (
-              <div style={{ background: '#fef2f2', border: '1px solid #fecaca', borderRadius: 8, padding: '10px 14px', fontSize: 13, color: '#dc2626', marginBottom: 16 }}>
+              <div style={{ background: '#fef2f2', border: '1px solid #fecaca', borderRadius: 4, padding: '10px 14px', fontSize: 13, color: '#dc2626', marginBottom: 16 }}>
                 Payment was cancelled. You can try again below.
               </div>
             )}
 
             {error && (
-              <div style={{ background: '#fef2f2', border: '1px solid #fecaca', borderRadius: 8, padding: '10px 14px', fontSize: 13, color: '#dc2626', marginBottom: 16 }}>
+              <div style={{ background: '#fef2f2', border: '1px solid #fecaca', borderRadius: 4, padding: '10px 14px', fontSize: 13, color: '#dc2626', marginBottom: 16 }}>
                 {error}
               </div>
             )}
@@ -134,9 +134,9 @@ export default function PayInvoice() {
               onClick={handlePay}
               disabled={paying}
               style={{
-                width: '100%', padding: '14px', borderRadius: 8, border: 'none',
+                width: '100%', padding: '14px', borderRadius: 4, border: 'none',
                 background: paying ? '#999' : '#141414', color: '#fff',
-                fontSize: 16, fontWeight: 700, cursor: paying ? 'not-allowed' : 'pointer',
+                fontSize: 16, fontWeight: 400, cursor: paying ? 'not-allowed' : 'pointer',
               }}
             >
               {paying ? 'Redirecting to payment...' : `Pay ${totalLabel}`}
diff --git a/src/pages/ProjectDetailPage.jsx b/src/pages/ProjectDetailPage.jsx
index ee6b2eb..db08d6f 100644
--- a/src/pages/ProjectDetailPage.jsx
+++ b/src/pages/ProjectDetailPage.jsx
@@ -3,10 +3,13 @@ import { useParams, Link, useNavigate } from 'react-router-dom';
 import Layout from '../components/Layout';
 import StatusBadge from '../components/StatusBadge';
 import FileBrowser from '../components/FileBrowser';
+import SortTh from '../components/SortTh';
 import { supabase } from '../lib/supabase';
 import { useAuth } from '../context/AuthContext';
 import { serviceTypes } from '../data/mockData';
 import { addDaysToDateOnly, getTodayDateOnlyEST } from '../lib/dates';
+import { logActivity } from '../lib/activityLog';
+import { useSortable } from '../hooks/useSortable';
 
 const safeFbName = v => String(v || '').trim().replace(/[\\/:*?"<>|#%{}^~[\]`]+/g, '-').replace(/\s+/g, ' ').replace(/^-+|-+$/g, '');
 
@@ -44,6 +47,7 @@ export default function ProjectDetailPage() {
 
 
   const [filter, setFilter] = useState('all');
+  const { sortKey, sortDir, toggle, sort } = useSortable('title');
 
   const requesterOptions = [
     ...(currentUser ? [{ id: currentUser.id, name: `${currentUser.name} (You)`, email: currentUser.email || '' }] : []),
@@ -73,7 +77,7 @@ export default function ProjectDetailPage() {
             supabase.from('companies').select('*').eq('id', p.company_id).single(),
             supabase.from('tasks').select('*').eq('project_id', id).order('submitted_at', { ascending: false }),
             supabase.from('profiles').select('id, name, email').eq('company_id', p.company_id).eq('role', 'client'),
-            supabase.from('project_members').select('*, profile:profiles(id, name, email)').eq('project_id', id),
+            supabase.from('project_members').select('*, profile:profiles(id, name, email, role)').eq('project_id', id),
             supabase.from('profiles').select('id, name, email').eq('role', 'external').order('name'),
           ]);
           setCompany(co);
@@ -144,6 +148,7 @@ export default function ProjectDetailPage() {
     const { data: task } = await supabase.from('tasks').insert({ project_id: id, title: jobForm.title.trim(), status: 'not_started', current_version: 0 }).select().single();
     if (task) {
       await supabase.from('submissions').insert({ task_id: task.id, version_number: 0, type: 'initial', is_hot: jobForm.isHot, service_type: jobForm.serviceType, deadline: jobForm.deadline || null, description: jobForm.description.trim() || null, submitted_by: requestor.id, submitted_by_name: requestor.name.replace(' (You)', '') });
+      logActivity({ actorId: currentUser.id, actorName: currentUser.name, action: 'task_created', taskId: task.id, taskTitle: task.title, projectId: id, projectName: project?.name });
       setTasks(prev => [task, ...prev]);
       setJobForm(emptyJobForm());
       setShowAddJob(false);
@@ -172,6 +177,14 @@ export default function ProjectDetailPage() {
         return initial?.submitted_by === currentUser.id;
       })
     : tasks;
+  const sortedTasks = sort(filteredTasks, (task, key) => {
+    if (key === 'title') return task.title || '';
+    if (key === 'assigned_name') return task.assigned_name || '';
+    if (key === 'current_version') return Number(task.current_version || 0);
+    if (key === 'status') return task.status || '';
+    if (key === 'submitted_at') return task.submitted_at || '';
+    return '';
+  });
 
   return (
     <Layout>
@@ -183,7 +196,7 @@ export default function ProjectDetailPage() {
         <div>
           {editingName && (isTeam || isClient) ? (
             <form onSubmit={handleSaveName} style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
-              <input type="text" value={nameVal} onChange={e => setNameVal(e.target.value)} autoFocus required style={{ fontSize: 22, fontWeight: 700, padding: '4px 10px', margin: 0, width: 280 }} />
+              <input type="text" value={nameVal} onChange={e => setNameVal(e.target.value)} autoFocus required style={{ fontSize: 22, fontWeight: 400, padding: '4px 10px', margin: 0, width: 280 }} />
               <button type="submit" className="btn btn-primary btn-sm" disabled={savingName}>{savingName ? '...' : 'Save'}</button>
               <button type="button" className="btn btn-outline btn-sm" onClick={() => setEditingName(false)}>Cancel</button>
             </form>
@@ -215,7 +228,9 @@ export default function ProjectDetailPage() {
           <StatusBadge status={project.status} />
           {isClient && (
             <>
-              <button className="btn btn-outline btn-sm" style={{ color: 'var(--danger, #dc2626)', borderColor: 'var(--danger, #dc2626)' }} onClick={handleDeleteProject}>Delete Project</button>
+              {tasks.length === 0 && (
+                <button className="btn btn-outline btn-sm" style={{ color: 'var(--danger, #dc2626)', borderColor: 'var(--danger, #dc2626)' }} onClick={handleDeleteProject}>Delete Project</button>
+              )}
               <Link to={`/new-request?project=${encodeURIComponent(project.name)}`} className="btn btn-primary">+ Add Request</Link>
             </>
           )}
@@ -230,7 +245,7 @@ export default function ProjectDetailPage() {
 
       {/* Team: Add job form */}
       {isTeam && showAddJob && (
-        <div className="card" style={{ marginBottom: 24, border: '1px solid var(--accent)', borderRadius: 12 }}>
+        <div className="card" style={{ marginBottom: 24, border: '1px solid var(--accent)', borderRadius: 4 }}>
           <div className="card-title">Add Job — {project.name}</div>
           <form onSubmit={handleAddJob}>
             <div className="grid-2">
@@ -345,7 +360,7 @@ export default function ProjectDetailPage() {
         </div>
       ) : isClient ? (
         <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-          {filteredTasks.map(task => {
+          {sortedTasks.map(task => {
             const taskSubs = submissions.filter(s => s.task_id === task.id);
             const initialSub = taskSubs.find(s => s.type === 'initial') || taskSubs[0];
             const latestSub = taskSubs[taskSubs.length - 1];
@@ -358,7 +373,7 @@ export default function ProjectDetailPage() {
                     <div className="request-card-title">
                       {task.title}{' '}
                       <span style={{ fontWeight: 400, color: 'var(--text-muted)', fontSize: 13 }}>{rLabel(task.current_version)}</span>
-                      {isMine && <span style={{ marginLeft: 8, fontSize: 11, background: 'rgba(245,165,35,0.15)', color: 'var(--accent)', padding: '2px 8px', borderRadius: 4, fontWeight: 600 }}>Mine</span>}
+                      {isMine && <span style={{ marginLeft: 8, fontSize: 11, background: 'rgba(245,165,35,0.15)', color: 'var(--accent)', padding: '2px 8px', borderRadius: 4, fontWeight: 400 }}>Mine</span>}
                     </div>
                     <div className="request-card-meta" style={{ marginTop: 4 }}>
                       {initialSub?.submitted_by_name && <>By {initialSub.submitted_by_name}</>}
@@ -376,18 +391,18 @@ export default function ProjectDetailPage() {
           <table>
             <thead>
               <tr>
-                <th>Job</th>
-                <th>Assigned To</th>
-                <th>Revision</th>
-                <th>Status</th>
-                <th>Submitted</th>
+                <SortTh col="title" sortKey={sortKey} sortDir={sortDir} onSort={toggle}>Job</SortTh>
+                <SortTh col="assigned_name" sortKey={sortKey} sortDir={sortDir} onSort={toggle}>Assigned To</SortTh>
+                <SortTh col="current_version" sortKey={sortKey} sortDir={sortDir} onSort={toggle}>Revision</SortTh>
+                <SortTh col="status" sortKey={sortKey} sortDir={sortDir} onSort={toggle}>Status</SortTh>
+                <SortTh col="submitted_at" sortKey={sortKey} sortDir={sortDir} onSort={toggle}>Submitted</SortTh>
                 <th></th>
               </tr>
             </thead>
             <tbody>
-              {filteredTasks.map(task => (
+              {sortedTasks.map(task => (
                 <tr key={task.id} onClick={() => navigate(`/requests/${task.id}`)} style={{ cursor: 'pointer' }}>
-                  <td style={{ fontWeight: 600 }}>
+                  <td style={{ fontWeight: 400 }}>
                     {task.title}
                     <span style={{ marginLeft: 6, fontWeight: 400, color: 'var(--text-muted)', fontSize: 12 }}>{'R' + String(task.current_version || 0).padStart(2, '0')}</span>
                   </td>
@@ -425,14 +440,14 @@ export default function ProjectDetailPage() {
               <button className="btn btn-outline btn-sm" onClick={() => { setAddingMember(false); setSelectedExternal(''); }}>Cancel</button>
             </div>
           )}
-          {members.length === 0 ? (
+          {members.filter(m => m.profile?.role === 'external').length === 0 ? (
             <p style={{ fontSize: 13, color: 'var(--text-muted)', margin: 0 }}>No external members assigned to this project.</p>
           ) : (
             <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-              {members.map(m => (
-                <div key={m.id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--bg)', borderRadius: 8, border: '1px solid var(--border)' }}>
+              {members.filter(m => m.profile?.role === 'external').map(m => (
+                <div key={m.id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--bg)', borderRadius: 4, border: '1px solid var(--border)' }}>
                   <div>
-                    <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>{m.profile?.name}</div>
+                    <div style={{ fontSize: 13, fontWeight: 400, color: 'var(--text-primary)' }}>{m.profile?.name}</div>
                     <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{m.profile?.email}</div>
                   </div>
                   <button onClick={() => handleRemoveMember(m.profile_id)} style={{ background: 'none', border: 'none', color: 'var(--danger)', cursor: 'pointer', fontSize: 16, padding: '0 4px' }} title="Remove from project">✕</button>
diff --git a/src/pages/Projects.jsx b/src/pages/Projects.jsx
index d57d4e3..9e4b948 100644
--- a/src/pages/Projects.jsx
+++ b/src/pages/Projects.jsx
@@ -5,6 +5,10 @@ import StatusBadge from '../components/StatusBadge';
 import { supabase } from '../lib/supabase';
 import { useAuth } from '../context/AuthContext';
 import { withTimeout } from '../lib/withTimeout';
+import { DashboardBanner } from '../lib/dashboardBanner';
+import SortTh from '../components/SortTh';
+import { useSortable } from '../hooks/useSortable';
+import FilterDropdown from '../components/FilterDropdown';
 
 // ─── Client helpers ────────────────────────────────────────────────────────
 
@@ -20,17 +24,17 @@ function ClientProjectGroup({ project, tasks, submissions, currentUserId, filter
     : tasks;
   if (filter === 'mine' && filteredTasks.length === 0) return null;
   return (
-    <div className="interactive-surface" style={{ border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden', marginBottom: 8 }}>
+    <div className="interactive-surface" style={{ border: '1px solid var(--border)', borderRadius: 4, overflow: 'hidden', marginBottom: 8 }}>
       <button
         className="interactive-panel-toggle"
         onClick={() => setOpen(o => !o)}
         style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 16px', background: 'var(--card-bg-2)', border: 'none', cursor: 'pointer', borderBottom: open ? '1px solid var(--border)' : 'none', fontFamily: 'inherit' }}
       >
         <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-          <Link to={`/projects/${project.id}`} onClick={e => e.stopPropagation()} style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-primary)', textDecoration: 'none' }}>
+          <Link to={`/projects/${project.id}`} onClick={e => e.stopPropagation()} style={{ fontSize: 14, fontWeight: 400, color: 'var(--text-primary)', textDecoration: 'none' }}>
             {project.name}
           </Link>
-          <span style={{ fontSize: 11, fontWeight: 600, padding: '2px 8px', borderRadius: 4, background: 'rgba(245,165,35,0.15)', color: 'var(--accent)' }}>
+          <span style={{ fontSize: 11, fontWeight: 400, padding: '2px 8px', borderRadius: 4, background: 'rgba(245,165,35,0.15)', color: 'var(--accent)' }}>
             {filteredTasks.length} request{filteredTasks.length !== 1 ? 's' : ''}
           </span>
         </div>
@@ -58,9 +62,9 @@ function ClientProjectGroup({ project, tasks, submissions, currentUserId, filter
               >
                 <div style={{ minWidth: 0 }}>
                   <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
-                    <span style={{ fontWeight: 600, fontSize: 13, color: 'var(--text-primary)' }}>{task.title}</span>
+                    <span style={{ fontWeight: 400, fontSize: 13, color: 'var(--text-primary)' }}>{task.title}</span>
                     <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>{rLabel(task.current_version)}</span>
-                    {isMine && <span style={{ fontSize: 11, background: 'rgba(245,165,35,0.15)', color: 'var(--accent)', padding: '1px 7px', borderRadius: 4, fontWeight: 600 }}>Mine</span>}
+                    {isMine && <span style={{ fontSize: 11, background: 'rgba(245,165,35,0.15)', color: 'var(--accent)', padding: '1px 7px', borderRadius: 4, fontWeight: 400 }}>Mine</span>}
                   </div>
                   <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 3 }}>
                     {initialSub?.submitted_by_name && <>By {initialSub.submitted_by_name}</>}
@@ -77,6 +81,33 @@ function ClientProjectGroup({ project, tasks, submissions, currentUserId, filter
   );
 }
 
+function ProgressBar({ tasks = [], noPad = false }) {
+  const total = tasks.length;
+  if (total === 0) return <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>—</span>;
+  const done = tasks.filter(t => ['client_approved', 'invoiced', 'paid'].includes(t.status)).length;
+  const pct = Math.round((done / total) * 100);
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 8, paddingRight: noPad ? 0 : '10%' }}>
+      <div style={{ flex: 1, minWidth: 60, height: 6, borderRadius: 3, background: 'var(--border)', overflow: 'hidden' }}>
+        <div style={{ width: `${pct}%`, height: '100%', borderRadius: 3, background: pct === 100 ? '#4ade80' : 'var(--accent)', transition: 'width 0.3s' }} />
+      </div>
+      <span style={{ fontSize: 11, color: 'var(--text-muted)', whiteSpace: 'nowrap', textAlign: 'right' }}>{done}/{total} <span style={{ opacity: 0.65 }}>({pct}%)</span></span>
+    </div>
+  );
+}
+
+const ListViewIcon = () => (
+  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
+    <line x1="1" y1="3" x2="13" y2="3"/><line x1="1" y1="7" x2="13" y2="7"/><line x1="1" y1="11" x2="13" y2="11"/>
+  </svg>
+);
+const GridViewIcon = () => (
+  <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
+    <rect x="1" y="1" width="5" height="5" rx="1"/><rect x="8" y="1" width="5" height="5" rx="1"/>
+    <rect x="1" y="8" width="5" height="5" rx="1"/><rect x="8" y="8" width="5" height="5" rx="1"/>
+  </svg>
+);
+
 // ─── Main export ───────────────────────────────────────────────────────────
 
 export default function Projects() {
@@ -92,6 +123,9 @@ export default function Projects() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
 
+  const [viewMode, setViewMode] = useState(() => localStorage.getItem('projectsViewMode') || 'list');
+  const toggleView = () => setViewMode(v => { const n = v === 'list' ? 'grid' : 'list'; localStorage.setItem('projectsViewMode', n); return n; });
+
   // Team/External state
   const [filterCompany, setFilterCompany] = useState('');
   const [filterStatus, setFilterStatus] = useState('all');
@@ -115,7 +149,7 @@ export default function Projects() {
       try {
         if (isTeam) {
           const [{ data }, { data: cos }] = await Promise.all([
-            supabase.from('projects').select('id, name, status, created_at, company:companies(id, name)').order('created_at', { ascending: false }),
+            supabase.from('projects').select('id, name, status, created_at, company:companies(id, name), tasks:tasks(id,status)').order('created_at', { ascending: false }),
             supabase.from('companies').select('id, name').order('name'),
           ]);
           setProjects(data || []);
@@ -124,7 +158,7 @@ export default function Projects() {
           if (!currentUser?.id) { setLoading(false); return; }
           const { data, error: err } = await supabase
             .from('projects')
-            .select('id, name, status, company:companies(name)')
+            .select('id, name, status, created_at, company:companies(name), tasks:tasks(id,status)')
             .order('created_at', { ascending: false });
           if (err) setError(err.message);
           else setProjects(data || []);
@@ -157,6 +191,12 @@ export default function Projects() {
     load();
   }, [isTeam, isExternal, isClient, currentUser?.id]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const { sortKey: projSortKey, sortDir: projSortDir, toggle: projToggle, sort: projSort } = useSortable('status', 'asc');
+  const { sortKey: extSortKey, sortDir: extSortDir, toggle: extToggle, sort: extSort } = useSortable('status', 'asc');
+  const { sortKey: clientSortKey, sortDir: clientSortDir, toggle: clientToggle, sort: clientSort } = useSortable('status', 'asc');
+
+  const fmtDate = (d) => d ? new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : '—';
+
   const teamCompanies = useMemo(() => {
     if (!isTeam) return [];
     const seen = new Map();
@@ -190,7 +230,10 @@ export default function Projects() {
   // ── Team render ────────────────────────────────────────────────────────
   if (isTeam) {
     const companyFiltered = filterCompany ? projects.filter(p => p.company?.id === filterCompany) : projects;
-    const statusFiltered = filterStatus === 'all' ? companyFiltered : companyFiltered.filter(p => (p.status || 'active') === filterStatus);
+    const statusFiltered = projSort(
+      filterStatus === 'all' ? companyFiltered : companyFiltered.filter(p => (p.status || 'active') === filterStatus),
+      (p, key) => key === 'client' ? (p.company?.name || '') : key === 'status' ? (p.status || 'active') : p[key] || ''
+    );
     const allCount = companyFiltered.length;
     const activeCount = companyFiltered.filter(p => !p.status || p.status === 'active').length;
     const completedCount = companyFiltered.filter(p => p.status === 'completed').length;
@@ -198,20 +241,27 @@ export default function Projects() {
     return (
       <Layout>
         <div className="page-header" style={{ flexShrink: 0 }}>
-          <div>
-            <div className="page-title">Projects</div>
-            <div className="page-subtitle">All active client projects.</div>
+          <div className="page-header-left">
+            <DashboardBanner />
+            <div className="page-title dashboard-greeting">Projects</div>
+            <div className="page-subtitle">{activeCount} active &bull; {completedCount} completed</div>
           </div>
-          <button className="btn btn-primary btn-sm" onClick={() => { setShowAddForm(s => !s); setAddError(''); }}>
-            {showAddForm ? 'Cancel' : '+ Add Project'}
+          <button className="btn btn-primary btn-sm" onClick={() => { setShowAddForm(true); setAddError(''); }}>
+            + Add Project
           </button>
         </div>
 
         {showAddForm && (
-          <div className="card" style={{ marginBottom: 24, border: '1px solid var(--accent)', borderRadius: 12, flexShrink: 0 }}>
-            <div className="card-title">Add Project</div>
-            <form onSubmit={handleAddProject}>
-              <div className="grid-2">
+          <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(4px)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }} onClick={() => { setShowAddForm(false); setAddForm({ name: '', companyId: '' }); setAddError(''); }}>
+            <div style={{ background: 'var(--card-bg)', borderRadius: 4, padding: 28, width: '100%', maxWidth: 480, border: '1px solid var(--border)', boxShadow: '0 24px 64px rgba(0,0,0,0.5)' }} onClick={e => e.stopPropagation()}>
+              <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 20 }}>
+                <div>
+                  <div style={{ fontSize: 11, fontWeight: 400, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', marginBottom: 4 }}>New Project</div>
+                  <div style={{ fontSize: 22, color: 'var(--text-primary)' }}>Add a project</div>
+                </div>
+                <button onClick={() => { setShowAddForm(false); setAddForm({ name: '', companyId: '' }); setAddError(''); }} style={{ background: 'none', border: 'none', color: 'var(--text-muted)', fontSize: 20, cursor: 'pointer', lineHeight: 1, padding: 4 }}>×</button>
+              </div>
+              <form onSubmit={handleAddProject}>
                 <div className="form-group">
                   <label>Company *</label>
                   <select value={addForm.companyId} onChange={e => setAddForm(f => ({ ...f, companyId: e.target.value }))} required>
@@ -221,125 +271,180 @@ export default function Projects() {
                 </div>
                 <div className="form-group">
                   <label>Project Name *</label>
-                  <input type="text" placeholder="e.g. Brand Identity 2026" value={addForm.name} onChange={e => setAddForm(f => ({ ...f, name: e.target.value }))} required />
+                  <input type="text" placeholder="e.g. Brand Identity 2026" value={addForm.name} onChange={e => setAddForm(f => ({ ...f, name: e.target.value }))} required autoFocus />
                 </div>
-              </div>
-              {addError && <div style={{ fontSize: 13, color: 'var(--danger)', marginBottom: 12 }}>⚠ {addError}</div>}
-              <div className="action-buttons">
-                <button type="submit" className="btn btn-primary" disabled={addSaving}>{addSaving ? 'Creating...' : 'Create Project'}</button>
-                <button type="button" className="btn btn-outline" onClick={() => { setShowAddForm(false); setAddForm({ name: '', companyId: '' }); setAddError(''); }}>Cancel</button>
-              </div>
-            </form>
+                {addError && <div style={{ fontSize: 13, color: 'var(--danger)', marginBottom: 12 }}>⚠ {addError}</div>}
+                <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 20 }}>
+                  <button type="button" className="btn btn-outline" onClick={() => { setShowAddForm(false); setAddForm({ name: '', companyId: '' }); setAddError(''); }}>Cancel</button>
+                  <button type="submit" className="btn btn-primary" disabled={addSaving}>{addSaving ? 'Creating...' : 'Create Project'}</button>
+                </div>
+              </form>
+            </div>
           </div>
         )}
 
-        {teamCompanies.length > 0 && (
-          <div style={{ display: 'flex', gap: 12, marginBottom: 16, flexShrink: 0 }}>
-            <select className="filter-select" value={filterCompany} onChange={e => setFilterCompany(e.target.value)}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16, flexShrink: 0, flexWrap: 'wrap' }}>
+          {teamCompanies.length > 0 && (
+            <select className="filter-select" style={{ width: 120 }} value={filterCompany} onChange={e => setFilterCompany(e.target.value)}>
               <option value="">All Companies</option>
               {teamCompanies.map(([id, name]) => <option key={id} value={id}>{name}</option>)}
             </select>
+          )}
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginLeft: 'auto' }}>
+            <select className="filter-select" style={{ width: 120 }} value={filterStatus} onChange={e => setFilterStatus(e.target.value)}>
+              <option value="active">Active ({activeCount})</option>
+              <option value="completed">Completed ({completedCount})</option>
+              <option value="all">All ({allCount})</option>
+            </select>
+            <button className="btn btn-outline btn-sm" onClick={toggleView} title={viewMode === 'list' ? 'Grid view' : 'List view'} style={{ padding: '5px 9px', lineHeight: 1, display: 'flex', alignItems: 'center' }}>
+              {viewMode === 'list' ? <GridViewIcon /> : <ListViewIcon />}
+            </button>
+          </div>
+        </div>
+
+        {statusFiltered.length === 0 ? (
+          <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, color: 'var(--text-muted)' }}>No projects found.</div>
+        ) : viewMode === 'grid' ? (
+          <div style={{ flex: 1, overflowY: 'auto' }}>
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 12 }}>
+              {statusFiltered.map(p => (
+                <div key={p.id} className="grid-card" onClick={() => navigate(`/projects/${p.id}`)} style={{ padding: '14px 16px', border: '1px solid var(--border)', borderRadius: 6 }}>
+                  <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 8, marginBottom: 6 }}>
+                    <div style={{ minWidth: 0 }}>
+                      <div style={{ fontWeight: 400, fontSize: 13, color: 'var(--text-primary)', marginBottom: filterCompany ? 0 : 2 }}>{p.name}</div>
+                      {!filterCompany && <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{p.company?.name || '—'}</div>}
+                    </div>
+                    <StatusBadge status={p.status || 'active'} />
+                  </div>
+                  <div style={{ fontSize: 11, color: 'var(--text-muted)', marginBottom: 10, textAlign: 'right' }}>Created {fmtDate(p.created_at)}</div>
+                  <ProgressBar tasks={p.tasks || []} noPad />
+                </div>
+              ))}
+            </div>
+          </div>
+        ) : (
+          <div style={{ flex: 1, minHeight: 0, overflowY: 'auto', background: 'var(--card-bg)', borderRadius: 4, border: '1px solid var(--border)' }}>
+            <table style={{ tableLayout: 'fixed', width: '100%' }}>
+              <colgroup>
+                <col style={{ width: filterCompany ? '30%' : '25%' }} />
+                {!filterCompany && <col style={{ width: '20%' }} />}
+                <col style={{ width: filterCompany ? '35%' : '25%' }} />
+                <col style={{ width: '15%' }} />
+                <col style={{ width: '20%' }} />
+              </colgroup>
+              <thead>
+                <tr>
+                  <SortTh col="name" sortKey={projSortKey} sortDir={projSortDir} onSort={projToggle}>Project</SortTh>
+                  {!filterCompany && <SortTh col="client" sortKey={projSortKey} sortDir={projSortDir} onSort={projToggle}>Client</SortTh>}
+                  <th>Progress</th>
+                  <SortTh col="status" sortKey={projSortKey} sortDir={projSortDir} onSort={projToggle}>Status</SortTh>
+                  <SortTh col="created_at" sortKey={projSortKey} sortDir={projSortDir} onSort={projToggle}>Date Created</SortTh>
+                </tr>
+              </thead>
+              <tbody>
+                {statusFiltered.map(p => (
+                  <tr key={p.id} style={{ cursor: 'pointer' }} onClick={() => navigate(`/projects/${p.id}`)}>
+                    <td style={{ fontWeight: 400 }}>{p.name}</td>
+                    {!filterCompany && <td style={{ color: 'var(--text-muted)' }}>{p.company?.name || '—'}</td>}
+                    <td><ProgressBar tasks={p.tasks || []} /></td>
+                    <td><StatusBadge status={p.status} /></td>
+                    <td style={{ color: 'var(--text-muted)', fontSize: 12 }}>{fmtDate(p.created_at)}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
           </div>
         )}
-
-        <div className="card" style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
-          <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', marginBottom: 16, flexShrink: 0 }}>
-            {[
-              { id: 'all', label: 'All', count: allCount },
-              { id: 'active', label: 'Active', count: activeCount },
-              { id: 'completed', label: 'Completed', count: completedCount },
-            ].map(tab => (
-              <button key={tab.id} className={`tab-btn${filterStatus === tab.id ? ' active' : ''}`} onClick={() => setFilterStatus(tab.id)}>
-                {tab.label} ({tab.count})
-              </button>
-            ))}
-          </div>
-          {statusFiltered.length === 0 ? (
-            <div style={{ fontSize: 13, color: 'var(--text-muted)', padding: '8px 0' }}>No projects found.</div>
-          ) : (
-            <div className="table-wrapper" style={{ flex: 1, minHeight: 0, overflowY: 'auto' }}>
-              <table>
-                <thead>
-                  <tr>
-                    <th>Project</th>
-                    {!filterCompany && <th>Client</th>}
-                    <th>Status</th>
-                    <th>Started</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {statusFiltered.map(p => (
-                    <tr key={p.id} style={{ cursor: 'pointer' }} onClick={() => navigate(`/projects/${p.id}`)}>
-                      <td style={{ fontWeight: 600 }}>{p.name}</td>
-                      {!filterCompany && <td style={{ color: 'var(--text-muted)' }}>{p.company?.name || '—'}</td>}
-                      <td><StatusBadge status={p.status} /></td>
-                      <td style={{ color: 'var(--text-muted)' }}>{new Date(p.created_at).toLocaleDateString()}</td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
-        </div>
       </Layout>
     );
   }
 
   // ── External render ────────────────────────────────────────────────────
   if (isExternal) {
-    const extFiltered = filterStatus === 'all' ? projects : projects.filter(p => (p.status || 'active') === filterStatus);
+    const extBase = filterStatus === 'all' ? projects : projects.filter(p => (p.status || 'active') === filterStatus);
+    const extFiltered = extSort(extBase, (p, key) => key === 'client' ? (p.company?.name || '') : p[key] || '');
     const extActiveCount = projects.filter(p => !p.status || p.status === 'active').length;
     const extCompletedCount = projects.filter(p => p.status === 'completed').length;
 
     return (
       <Layout>
         <div className="page-header" style={{ flexShrink: 0 }}>
-          <div>
-            <div className="page-title">Projects</div>
-            <div className="page-subtitle">All projects you are assigned to.</div>
+          <div className="page-header-left">
+            <DashboardBanner />
+            <div className="page-title dashboard-greeting">Projects</div>
+            <div className="page-subtitle">{extActiveCount} active &bull; {extCompletedCount} completed</div>
           </div>
         </div>
         {error && <div className="card" style={{ color: 'var(--danger)', marginBottom: 16, flexShrink: 0 }}>{error}</div>}
 
-        <div className="card" style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
-          <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', marginBottom: 16, flexShrink: 0 }}>
-            {[
-              { id: 'all', label: 'All', count: projects.length },
-              { id: 'active', label: 'Active', count: extActiveCount },
-              { id: 'completed', label: 'Completed', count: extCompletedCount },
-            ].map(tab => (
-              <button key={tab.id} className={`tab-btn${filterStatus === tab.id ? ' active' : ''}`} onClick={() => setFilterStatus(tab.id)}>
-                {tab.label} ({tab.count})
-              </button>
-            ))}
+        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16, flexShrink: 0, flexWrap: 'wrap' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginLeft: 'auto' }}>
+            <select className="filter-select" style={{ width: 120 }} value={filterStatus} onChange={e => setFilterStatus(e.target.value)}>
+              <option value="active">Active ({extActiveCount})</option>
+              <option value="completed">Completed ({extCompletedCount})</option>
+              <option value="all">All ({projects.length})</option>
+            </select>
+            <button className="btn btn-outline btn-sm" onClick={toggleView} title={viewMode === 'list' ? 'Grid view' : 'List view'} style={{ padding: '5px 9px', lineHeight: 1, display: 'flex', alignItems: 'center' }}>
+              {viewMode === 'list' ? <GridViewIcon /> : <ListViewIcon />}
+            </button>
           </div>
-          {projects.length === 0 ? (
-            <div style={{ fontSize: 13, color: 'var(--text-muted)', padding: '8px 0' }}>No projects yet. Team will assign you to one.</div>
-          ) : extFiltered.length === 0 ? (
-            <div style={{ fontSize: 13, color: 'var(--text-muted)', padding: '8px 0' }}>No {filterStatus} projects.</div>
-          ) : (
-            <div className="table-wrapper" style={{ flex: 1, minHeight: 0, overflowY: 'auto' }}>
-              <table>
-                <thead>
-                  <tr>
-                    <th>Project</th>
-                    <th>Client</th>
-                    <th>Status</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {extFiltered.map(p => (
-                    <tr key={p.id} style={{ cursor: 'pointer' }} onClick={() => navigate(`/projects/${p.id}`)}>
-                      <td style={{ fontWeight: 600 }}>{p.name}</td>
-                      <td style={{ color: 'var(--text-muted)' }}>{p.company?.name || '—'}</td>
-                      <td style={{ textTransform: 'capitalize', color: 'var(--text-muted)' }}>{p.status || 'Active'}</td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
         </div>
+
+        {projects.length === 0 ? (
+          <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, color: 'var(--text-muted)' }}>No projects yet. Team will assign you to one.</div>
+        ) : extFiltered.length === 0 ? (
+          <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, color: 'var(--text-muted)' }}>No {filterStatus} projects.</div>
+        ) : viewMode === 'grid' ? (
+          <div style={{ flex: 1, overflowY: 'auto' }}>
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 12 }}>
+              {extFiltered.map(p => (
+                <div key={p.id} className="grid-card" onClick={() => navigate(`/projects/${p.id}`)} style={{ padding: '14px 16px', border: '1px solid var(--border)', borderRadius: 6 }}>
+                  <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 8, marginBottom: 6 }}>
+                    <div style={{ minWidth: 0 }}>
+                      <div style={{ fontWeight: 400, fontSize: 13, color: 'var(--text-primary)', marginBottom: 2 }}>{p.name}</div>
+                      <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{p.company?.name || '—'}</div>
+                    </div>
+                    <StatusBadge status={p.status || 'active'} />
+                  </div>
+                  <div style={{ fontSize: 11, color: 'var(--text-muted)', marginBottom: 10, textAlign: 'right' }}>Created {fmtDate(p.created_at)}</div>
+                  <ProgressBar tasks={p.tasks || []} noPad />
+                </div>
+              ))}
+            </div>
+          </div>
+        ) : (
+          <div style={{ flex: 1, minHeight: 0, overflowY: 'auto', background: 'var(--card-bg)', borderRadius: 4, border: '1px solid var(--border)' }}>
+            <table style={{ tableLayout: 'fixed', width: '100%' }}>
+              <colgroup>
+                <col style={{ width: '25%' }} />
+                <col style={{ width: '15%' }} />
+                <col style={{ width: '30%' }} />
+                <col style={{ width: '15%' }} />
+                <col style={{ width: '15%' }} />
+              </colgroup>
+              <thead>
+                <tr>
+                  <SortTh col="name" sortKey={extSortKey} sortDir={extSortDir} onSort={extToggle}>Project</SortTh>
+                  <SortTh col="client" sortKey={extSortKey} sortDir={extSortDir} onSort={extToggle}>Client</SortTh>
+                  <th>Progress</th>
+                  <SortTh col="status" sortKey={extSortKey} sortDir={extSortDir} onSort={extToggle}>Status</SortTh>
+                  <SortTh col="created_at" sortKey={extSortKey} sortDir={extSortDir} onSort={extToggle}>Date Created</SortTh>
+                </tr>
+              </thead>
+              <tbody>
+                {extFiltered.map(p => (
+                  <tr key={p.id} style={{ cursor: 'pointer' }} onClick={() => navigate(`/projects/${p.id}`)}>
+                    <td style={{ fontWeight: 400 }}>{p.name}</td>
+                    <td style={{ color: 'var(--text-muted)' }}>{p.company?.name || '—'}</td>
+                    <td><ProgressBar tasks={p.tasks || []} /></td>
+                    <td><StatusBadge status={p.status || 'active'} /></td>
+                    <td style={{ color: 'var(--text-muted)', fontSize: 12 }}>{fmtDate(p.created_at)}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
       </Layout>
     );
   }
@@ -348,72 +453,138 @@ export default function Projects() {
   const clientBase = companies.length > 1 && activeCompanyId
     ? projects.filter(p => p.company_id === activeCompanyId)
     : projects;
-  const clientFiltered = filterStatus === 'all' ? clientBase : clientBase.filter(p => (p.status || 'active') === filterStatus);
+  const clientFiltered = clientSort(
+    filterStatus === 'all' ? clientBase : clientBase.filter(p => (p.status || 'active') === filterStatus),
+    (p, key) => p[key] || ''
+  );
   const clientActiveCount = clientBase.filter(p => !p.status || p.status === 'active').length;
   const clientCompletedCount = clientBase.filter(p => p.status === 'completed').length;
 
   return (
     <Layout>
       <div className="page-header" style={{ flexShrink: 0 }}>
-        <div>
-          <div className="page-title">Projects</div>
-          <div className="page-subtitle">All work for your company.</div>
+        <div className="page-header-left">
+          <DashboardBanner />
+          <div className="page-title dashboard-greeting">Projects</div>
+          <div className="page-subtitle">{clientActiveCount} active &bull; {clientCompletedCount} completed</div>
         </div>
+        <button className="btn btn-primary btn-sm" onClick={() => { setShowAddForm(true); setAddError(''); if (companies.length === 1) setAddForm(f => ({ ...f, companyId: companies[0].id })); }}>
+          + Add Project
+        </button>
       </div>
 
-      {companies.length > 1 && (
-        <div style={{ display: 'flex', gap: 12, marginBottom: 16, flexShrink: 0 }}>
-          <select className="filter-select" value={activeCompanyId || ''} onChange={e => setActiveCompanyId(e.target.value)}>
-            <option value="">All Companies</option>
-            {companies.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
-          </select>
+      {showAddForm && (
+        <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(4px)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }} onClick={() => { setShowAddForm(false); setAddForm({ name: '', companyId: '' }); setAddError(''); }}>
+          <div style={{ background: 'var(--card-bg)', borderRadius: 4, padding: 28, width: '100%', maxWidth: 480, border: '1px solid var(--border)', boxShadow: '0 24px 64px rgba(0,0,0,0.5)' }} onClick={e => e.stopPropagation()}>
+            <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 20 }}>
+              <div>
+                <div style={{ fontSize: 11, fontWeight: 400, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', marginBottom: 4 }}>New Project</div>
+                <div style={{ fontSize: 22, color: 'var(--text-primary)' }}>Add a project</div>
+              </div>
+              <button onClick={() => { setShowAddForm(false); setAddForm({ name: '', companyId: '' }); setAddError(''); }} style={{ background: 'none', border: 'none', color: 'var(--text-muted)', fontSize: 20, cursor: 'pointer', lineHeight: 1, padding: 4 }}>×</button>
+            </div>
+            <form onSubmit={handleAddProject}>
+              {companies.length > 1 && (
+                <div className="form-group">
+                  <label>Company *</label>
+                  <select value={addForm.companyId} onChange={e => setAddForm(f => ({ ...f, companyId: e.target.value }))} required>
+                    <option value="">Select company...</option>
+                    {companies.map(co => <option key={co.id} value={co.id}>{co.name}</option>)}
+                  </select>
+                </div>
+              )}
+              <div className="form-group">
+                <label>Project Name *</label>
+                <input type="text" placeholder="e.g. Brand Identity 2026" value={addForm.name} onChange={e => setAddForm(f => ({ ...f, name: e.target.value }))} required autoFocus />
+              </div>
+              {addError && <div style={{ fontSize: 13, color: 'var(--danger)', marginBottom: 12 }}>⚠ {addError}</div>}
+              <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 20 }}>
+                <button type="button" className="btn btn-outline" onClick={() => { setShowAddForm(false); setAddForm({ name: '', companyId: '' }); setAddError(''); }}>Cancel</button>
+                <button type="submit" className="btn btn-primary" disabled={addSaving}>{addSaving ? 'Creating...' : 'Create Project'}</button>
+              </div>
+            </form>
+          </div>
         </div>
       )}
 
-      <div className="card" style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
-        <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', marginBottom: 16, flexShrink: 0 }}>
-          {[
-            { id: 'all', label: 'All', count: clientBase.length },
-            { id: 'active', label: 'Active', count: clientActiveCount },
-            { id: 'completed', label: 'Completed', count: clientCompletedCount },
-          ].map(tab => (
-            <button key={tab.id} className={`tab-btn${filterStatus === tab.id ? ' active' : ''}`} onClick={() => setFilterStatus(tab.id)}>
-              {tab.label} ({tab.count})
-            </button>
-          ))}
-        </div>
-        {clientBase.length === 0 ? (
-          <div style={{ fontSize: 13, color: 'var(--text-muted)', padding: '8px 0' }}>No projects yet.</div>
-        ) : clientFiltered.length === 0 ? (
-          <div style={{ fontSize: 13, color: 'var(--text-muted)', padding: '8px 0' }}>No {filterStatus} projects.</div>
-        ) : (
-          <div className="table-wrapper" style={{ flex: 1, minHeight: 0, overflowY: 'auto' }}>
-            <table>
-              <thead>
-                <tr>
-                  <th>Project</th>
-                  <th>Tasks</th>
-                  <th>Status</th>
-                  <th>Started</th>
-                </tr>
-              </thead>
-              <tbody>
-                {clientFiltered.map(p => {
-                  const projectTasks = tasks.filter(t => t.project_id === p.id);
-                  return (
-                    <tr key={p.id} style={{ cursor: 'pointer' }} onClick={() => navigate(`/projects/${p.id}`)}>
-                      <td style={{ fontWeight: 600 }}>{p.name}</td>
-                      <td style={{ color: 'var(--text-muted)' }}>{projectTasks.length}</td>
-                      <td><StatusBadge status={p.status || 'active'} /></td>
-                      <td style={{ color: 'var(--text-muted)' }}>{new Date(p.created_at).toLocaleDateString()}</td>
-                    </tr>
-                  );
-                })}
-              </tbody>
-            </table>
-          </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16, flexShrink: 0, flexWrap: 'wrap' }}>
+        {companies.length > 1 && (
+          <select className="filter-select" style={{ width: 120 }} value={activeCompanyId || ''} onChange={e => setActiveCompanyId(e.target.value)}>
+            <option value="">All Companies</option>
+            {companies.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
+          </select>
         )}
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginLeft: 'auto' }}>
+          <select className="filter-select" style={{ width: 120 }} value={filterStatus} onChange={e => setFilterStatus(e.target.value)}>
+            <option value="active">Active ({clientActiveCount})</option>
+            <option value="completed">Completed ({clientCompletedCount})</option>
+            <option value="all">All ({clientBase.length})</option>
+          </select>
+          <button className="btn btn-outline btn-sm" onClick={toggleView} title={viewMode === 'list' ? 'Grid view' : 'List view'} style={{ padding: '5px 9px', lineHeight: 1, display: 'flex', alignItems: 'center' }}>
+            {viewMode === 'list' ? <GridViewIcon /> : <ListViewIcon />}
+          </button>
+        </div>
       </div>
+
+      {clientBase.length === 0 ? (
+        <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, color: 'var(--text-muted)' }}>No projects yet.</div>
+      ) : clientFiltered.length === 0 ? (
+        <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, color: 'var(--text-muted)' }}>No {filterStatus} projects.</div>
+      ) : viewMode === 'grid' ? (
+        <div style={{ flex: 1, overflowY: 'auto' }}>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 12 }}>
+            {clientFiltered.map(p => {
+              const projectTasks = tasks.filter(t => t.project_id === p.id);
+              const co = companies.find(c => c.id === p.company_id);
+              return (
+                <div key={p.id} className="grid-card" onClick={() => navigate(`/projects/${p.id}`)} style={{ padding: '14px 16px', border: '1px solid var(--border)', borderRadius: 6 }}>
+                  <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 8, marginBottom: 6 }}>
+                    <div style={{ minWidth: 0 }}>
+                      <div style={{ fontWeight: 400, fontSize: 13, color: 'var(--text-primary)', marginBottom: 2 }}>{p.name}</div>
+                      {co && <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{co.name}</div>}
+                    </div>
+                    <StatusBadge status={p.status || 'active'} />
+                  </div>
+                  <div style={{ fontSize: 11, color: 'var(--text-muted)', marginBottom: 10, textAlign: 'right' }}>Created {fmtDate(p.created_at)}</div>
+                  <ProgressBar tasks={projectTasks} noPad />
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      ) : (
+        <div style={{ flex: 1, minHeight: 0, overflowY: 'auto', background: 'var(--card-bg)', borderRadius: 4, border: '1px solid var(--border)' }}>
+          <table style={{ tableLayout: 'fixed', width: '100%' }}>
+            <colgroup>
+              <col style={{ width: '30%' }} />
+              <col style={{ width: '35%' }} />
+              <col style={{ width: '15%' }} />
+              <col style={{ width: '20%' }} />
+            </colgroup>
+            <thead>
+              <tr>
+                <SortTh col="name" sortKey={clientSortKey} sortDir={clientSortDir} onSort={clientToggle}>Project</SortTh>
+                <th>Progress</th>
+                <SortTh col="status" sortKey={clientSortKey} sortDir={clientSortDir} onSort={clientToggle}>Status</SortTh>
+                <SortTh col="created_at" sortKey={clientSortKey} sortDir={clientSortDir} onSort={clientToggle}>Date Created</SortTh>
+              </tr>
+            </thead>
+            <tbody>
+              {clientFiltered.map(p => {
+                const projectTasks = tasks.filter(t => t.project_id === p.id);
+                return (
+                  <tr key={p.id} style={{ cursor: 'pointer' }} onClick={() => navigate(`/projects/${p.id}`)}>
+                    <td style={{ fontWeight: 400 }}>{p.name}</td>
+                    <td><ProgressBar tasks={projectTasks} /></td>
+                    <td><StatusBadge status={p.status || 'active'} /></td>
+                    <td style={{ color: 'var(--text-muted)', fontSize: 12 }}>{fmtDate(p.created_at)}</td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      )}
     </Layout>
   );
 }
diff --git a/src/pages/RequestDetail.jsx b/src/pages/RequestDetail.jsx
index 02c5722..4d455b1 100644
--- a/src/pages/RequestDetail.jsx
+++ b/src/pages/RequestDetail.jsx
@@ -11,6 +11,7 @@ import { useAuth } from '../context/AuthContext';
 import { serviceTypes } from '../data/mockData';
 import { addDaysToDateOnly, formatDateEST, getTodayDateOnlyEST } from '../lib/dates';
 import { uploadFilesToRequestInfo } from '../lib/filebrowserFolders';
+import { logActivity } from '../lib/activityLog';
 
 const rLabel = (v) => 'R' + String(v || 0).padStart(2, '0');
 const MAX_FILES = 20;
@@ -70,6 +71,7 @@ export default function RequestDetail() {
   const [savingRevision, setSavingRevision] = useState(false);
   const [editingRequest, setEditingRequest] = useState(false);
   const [requestForm, setRequestForm] = useState({ serviceType: '', deadline: addDaysToDateOnly(getTodayDateOnlyEST(), 3), description: '', requestedBy: '', isHot: false });
+  const [requestFiles, setRequestFiles] = useState([]);
   const [savingRequest, setSavingRequest] = useState(false);
 
   const [notification, setNotification] = useState(null);
@@ -169,6 +171,10 @@ export default function RequestDetail() {
     const update = completedAt ? { status: newStatus, completed_at: completedAt } : { status: newStatus };
     await supabase.from('tasks').update(update).eq('id', id);
     setTask(t => ({ ...t, status: newStatus, ...(completedAt ? { completed_at: completedAt } : {}) }));
+    const actionMap = { on_hold: 'task_on_hold', in_progress: 'task_resumed', client_approved: 'task_approved' };
+    if (actionMap[newStatus]) {
+      logActivity({ actorId: currentUser.id, actorName: currentUser.name, action: actionMap[newStatus], taskId: id, taskTitle: task?.title, projectId: project?.id, projectName: project?.name });
+    }
     setNotification(message);
     setSaving(false);
   };
@@ -176,6 +182,7 @@ export default function RequestDetail() {
   const handleStart = async () => {
     await supabase.from('tasks').update({ status: 'in_progress', assigned_to: currentUser.id, assigned_name: currentUser.name }).eq('id', id);
     setTask(t => ({ ...t, status: 'in_progress', assigned_to: currentUser.id, assigned_name: currentUser.name }));
+    logActivity({ actorId: currentUser.id, actorName: currentUser.name, action: 'task_started', taskId: id, taskTitle: task?.title, projectId: project?.id, projectName: project?.name });
     setNotification('✓ Job started and assigned to you.');
   };
   const handleOnHold = () => updateStatus('on_hold', '✓ Job placed on hold.');
@@ -196,6 +203,7 @@ export default function RequestDetail() {
       setNotification(`✗ Error approving: ${error.message}`);
     } else {
       setTask(t => ({ ...t, status: 'client_approved', completed_at: new Date().toISOString() }));
+      logActivity({ actorId: currentUser.id, actorName: currentUser.name, action: 'task_approved', taskId: id, taskTitle: task?.title, projectId: project?.id, projectName: project?.name });
       setNotification('✓ Job approved.');
     }
     setSaving(false);
@@ -276,9 +284,28 @@ export default function RequestDetail() {
       submitted_by_name: selectedRequester.name.replace(' (You)', ''),
     }).eq('id', currentPrimary.id);
     if (!error) {
-      setSubmissions(prev => prev.map(sub => sub.id === currentPrimary.id ? { ...sub, service_type: requestForm.serviceType, deadline: requestForm.deadline || null, is_hot: requestForm.isHot, description: requestForm.description, submitted_by: requestForm.requestedBy, submitted_by_name: selectedRequester.name.replace(' (You)', '') } : sub));
+      let uploadedFiles = [];
+      if (requestFiles.length > 0) {
+        try {
+          for (const file of requestFiles) {
+            const path = `${id}/${Date.now()}_${file.name}`;
+            const { data: uploaded, error: upErr } = await supabase.storage.from('submissions').upload(path, file);
+            if (upErr) throw new Error(`Upload failed: ${upErr.message}`);
+            if (uploaded) uploadedFiles.push({ name: file.name, storage_path: path, size: file.size });
+          }
+          if (uploadedFiles.length > 0) {
+            await supabase.from('submission_files').insert(uploadedFiles.map(f => ({ ...f, submission_id: currentPrimary.id })));
+          }
+        } catch (upErr) {
+          setNotification(`✗ Upload error: ${upErr.message}`);
+          setSavingRequest(false);
+          return;
+        }
+      }
+      await refreshSubmissions();
       setEditingRequest(false);
-      setNotification('✓ Request details updated.');
+      setRequestFiles([]);
+      setNotification(uploadedFiles.length > 0 ? `✓ Request updated — ${uploadedFiles.length} file${uploadedFiles.length !== 1 ? 's' : ''} added.` : '✓ Request details updated.');
     } else {
       setNotification(`✗ Error: ${error.message}`);
     }
@@ -316,17 +343,12 @@ export default function RequestDetail() {
     e.preventDefault();
     setSaving(true);
     try {
-      const recipients = clientEmails.length > 0 ? clientEmails : (extraClientEmail ? [extraClientEmail] : []);
-      if (recipients.length === 0) throw new Error('No client email — add one before sending.');
+      const recipients = [...clientEmails, ...(extraClientEmail ? [extraClientEmail] : [])];
       const primarySub = getCurrentPrimarySubmission(submissions, getRevisionBaseline(task, submissions));
       if (!primarySub) { setSaving(false); return; }
       const existingFiles = primarySub.delivery?.files || [];
       if (sendForm.files.length === 0 && existingFiles.length === 0) throw new Error('Attach at least one file before sending.');
       const uploadedFiles = await uploadDeliveryFiles(id, sendForm.files);
-      if (extraClientEmail && clientEmails.length === 0) {
-        await supabase.from('companies').update({ contact_email: extraClientEmail }).eq('id', company.id);
-        setCompany(c => ({ ...c, contact_email: extraClientEmail }));
-      }
       const { data: delivery, error: deliveryError } = await supabase.from('deliveries').upsert({ submission_id: primarySub.id, sent_by: currentUser?.name, message: sendForm.message, sent_at: new Date().toISOString() }, { onConflict: 'submission_id' }).select().single();
       if (deliveryError) throw new Error(`Delivery failed: ${deliveryError.message}`);
       if (delivery && uploadedFiles.length > 0) {
@@ -335,6 +357,7 @@ export default function RequestDetail() {
       }
       await supabase.from('tasks').update({ status: 'client_review' }).eq('id', id);
       setTask(t => ({ ...t, status: 'client_review' }));
+      logActivity({ actorId: currentUser.id, actorName: currentUser.name, action: 'task_submitted', taskId: id, taskTitle: task?.title, projectId: project?.id, projectName: project?.name });
       await refreshSubmissions();
       setShowSendForm(false);
       setSendForm({ files: [], message: '' });
@@ -342,7 +365,7 @@ export default function RequestDetail() {
       const totalDeliveredFiles = existingFiles.length + uploadedFiles.length;
       const updateLabel = existingFiles.length > 0 ? `${uploadedFiles.length} new file${uploadedFiles.length !== 1 ? 's' : ''} added, ${totalDeliveredFiles} total` : `${uploadedFiles.length} file${uploadedFiles.length !== 1 ? 's' : ''} delivered`;
       setNotification(`✓ Sent to client — ${updateLabel}.`);
-      void sendEmail('sent_to_client', recipients, { clientFirstName: company?.name, serviceType: task.title, projectName: project?.name, message: sendForm.message, taskId: id, senderEmail: currentUser?.email }).catch(err => console.error('Send-to-client email failed:', err));
+      if (recipients.length > 0) void sendEmail('sent_to_client', recipients, { clientFirstName: company?.name, serviceType: task.title, projectName: project?.name, message: sendForm.message, taskId: id, senderEmail: currentUser?.email }).catch(err => console.error('Send-to-client email failed:', err));
     } catch (err) {
       setNotification(`✗ Error: ${err.message}`);
     } finally {
@@ -369,6 +392,7 @@ export default function RequestDetail() {
       }
       await supabase.from('tasks').update({ status: 'client_review' }).eq('id', id);
       setTask(t => ({ ...t, status: 'client_review' }));
+      logActivity({ actorId: currentUser.id, actorName: currentUser.name, action: 'task_submitted', taskId: id, taskTitle: task?.title, projectId: project?.id, projectName: project?.name });
       await refreshSubmissions();
       setWorkForm({ files: [], description: '' });
       setShowWorkUpload(false);
@@ -423,8 +447,14 @@ export default function RequestDetail() {
     setSaving(true);
     await supabase.from('tasks').update({ status: 'client_approved', completed_at: new Date().toISOString() }).eq('id', id);
     setTask(t => ({ ...t, status: 'client_approved' }));
+    logActivity({ actorId: currentUser.id, actorName: currentUser.name, action: 'task_approved', taskId: id, taskTitle: task?.title, projectId: project?.id, projectName: project?.name });
     setClientAction('approved');
-    sendEmail('client_approved', 'hello@fourgebranding.com', { clientName: currentUser.name, serviceType: task.title, projectName: project?.name, taskId: id }).catch(err => console.error('Client approved email failed:', err));
+    const approvalRecipients = ['hello@fourgebranding.com'];
+    if (task.assigned_to) {
+      const { data: ap } = await supabase.from('profiles').select('email').eq('id', task.assigned_to).single();
+      if (ap?.email && ap.email !== 'hello@fourgebranding.com') approvalRecipients.push(ap.email);
+    }
+    sendEmail('client_approved', approvalRecipients, { clientName: currentUser.name, serviceType: task.title, projectName: project?.name, taskId: id }).catch(err => console.error('Client approved email failed:', err));
     setSaving(false);
   };
 
@@ -466,7 +496,13 @@ export default function RequestDetail() {
           if (project?.name && task?.title) uploadFilesToRequestInfo(revisionFiles, company?.name, project.name, task.title, newVersion).catch(() => {});
         }
         setTask(t => ({ ...t, status: 'not_started', current_version: newVersion, assigned_to: null, assigned_name: null }));
-        sendEmail('revision_submitted', 'hello@fourgebranding.com', { clientName: currentUser.name, serviceType: task.title, projectName: project?.name, version: rLabel(newVersion), deadline: revisionForm.deadline, description: revisionForm.description, taskId: id }).catch(err => console.error('Revision submitted email failed:', err));
+        const revisionRecipients = ['hello@fourgebranding.com'];
+        if (task.assigned_to) {
+          const { data: rp } = await supabase.from('profiles').select('email').eq('id', task.assigned_to).single();
+          if (rp?.email && rp.email !== 'hello@fourgebranding.com') revisionRecipients.push(rp.email);
+        }
+        sendEmail('revision_submitted', revisionRecipients, { clientName: currentUser.name, serviceType: task.title, projectName: project?.name, version: rLabel(newVersion), deadline: revisionForm.deadline, description: revisionForm.description, taskId: id }).catch(err => console.error('Revision submitted email failed:', err));
+        logActivity({ actorId: currentUser.id, actorName: currentUser.name, action: 'revision_requested', taskId: id, taskTitle: task?.title, projectId: project?.id, projectName: project?.name }).catch(() => {});
       }
       await refreshSubmissions();
       setSubmitted(true);
@@ -482,13 +518,22 @@ export default function RequestDetail() {
 
   // ── File helpers ───────────────────────────────────────────────────────────
 
+  const triggerBlobDownload = (blob, filename) => {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    a.click();
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+  };
+
   const getFileUrl = async (file) => {
     const key = `delivery:${file.storage_path}`;
     if (downloading) return;
     setDownloading(key);
     try {
       const { data } = await supabase.storage.from('deliveries').createSignedUrl(file.storage_path, 3600, { download: file.name });
-      if (data?.signedUrl) window.open(data.signedUrl, '_blank');
+      if (data?.signedUrl) { const res = await fetch(data.signedUrl); const blob = await res.blob(); triggerBlobDownload(blob, file.name); }
     } finally { setDownloading(''); }
   };
 
@@ -498,7 +543,7 @@ export default function RequestDetail() {
     setDownloading(key);
     try {
       const { data } = await supabase.storage.from('submissions').createSignedUrl(file.storage_path, 3600, { download: file.name });
-      if (data?.signedUrl) window.open(data.signedUrl, '_blank');
+      if (data?.signedUrl) { const res = await fetch(data.signedUrl); const blob = await res.blob(); triggerBlobDownload(blob, file.name); }
     } finally { setDownloading(''); }
   };
 
@@ -510,11 +555,16 @@ export default function RequestDetail() {
     try {
       const zip = new JSZip();
       for (const file of files) {
-        const { data } = await supabase.storage.from('submissions').createSignedUrl(file.storage_path, 3600, { download: file.name });
-        if (data?.signedUrl) {
-          const response = await fetch(data.signedUrl);
-          const blob = await response.blob();
-          zip.file(file.name, blob);
+        try {
+          const { data } = await supabase.storage.from('submissions').createSignedUrl(file.storage_path, 3600, { download: file.name });
+          if (data?.signedUrl) {
+            const response = await fetch(data.signedUrl);
+            if (!response.ok) throw new Error(`HTTP ${response.status}`);
+            const blob = await response.blob();
+            zip.file(file.name, blob);
+          }
+        } catch (fileErr) {
+          console.error(`Skipping ${file.name}:`, fileErr);
         }
       }
       const content = await zip.generateAsync({ type: 'blob' });
@@ -555,7 +605,7 @@ export default function RequestDetail() {
         <div>
           {editingTitle && !isClient && !isExternal ? (
             <form onSubmit={handleSaveTitle} style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
-              <input type="text" value={titleVal} onChange={e => setTitleVal(e.target.value)} autoFocus required style={{ fontSize: 22, fontWeight: 700, padding: '4px 10px', margin: 0, width: 280 }} />
+              <input type="text" value={titleVal} onChange={e => setTitleVal(e.target.value)} autoFocus required style={{ fontSize: 22, fontWeight: 400, padding: '4px 10px', margin: 0, width: 280 }} />
               <button type="submit" className="btn btn-primary btn-sm" disabled={savingTitle}>{savingTitle ? '...' : 'Save'}</button>
               <button type="button" className="btn btn-outline btn-sm" onClick={() => setEditingTitle(false)}>Cancel</button>
             </form>
@@ -581,30 +631,12 @@ export default function RequestDetail() {
         </div>
         <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
           <StatusBadge status={task.status} />
-          {isClient && clientAction !== 'confirm-delete' && (
-            <button className="btn-icon btn-icon-danger" onClick={() => setClientAction('confirm-delete')} title="Delete">✕</button>
-          )}
-          {!isClient && !isExternal && (
+          {isTeam && (
             <button className="btn-icon btn-icon-danger" onClick={handleDeleteTask} title="Delete Job">✕</button>
           )}
         </div>
       </div>
 
-      {/* Client delete confirm */}
-      {isClient && clientAction === 'confirm-delete' && (
-        <div className="card" style={{ background: 'var(--bg)', borderColor: 'var(--danger)', marginBottom: 24 }}>
-          <div style={{ fontWeight: 600, marginBottom: 8 }}>⚠ Delete this request?</div>
-          <p style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 16 }}>
-            This will permanently delete <strong>{titleWithVersion}</strong> and all its history. This cannot be undone.
-          </p>
-          <div className="action-buttons">
-            <button className="btn" style={{ background: '#ef4444', color: 'white', border: 'none' }} onClick={handleDeleteTask} disabled={saving}>
-              {saving ? 'Deleting...' : 'Yes, Delete'}
-            </button>
-            <button className="btn btn-outline" onClick={() => setClientAction(null)}>Cancel</button>
-          </div>
-        </div>
-      )}
 
       {/* Notifications */}
       {notification && <div className="notification notification-success">{notification}</div>}
@@ -622,9 +654,9 @@ export default function RequestDetail() {
       {/* Client action cards */}
       {isClient && canReview && !submitted && clientAction !== 'confirm-delete' && clientAction !== 'revision' && (
         <div className="card" style={{ borderColor: 'var(--accent)', marginBottom: 24 }}>
-          <div style={{ fontWeight: 600, marginBottom: 8 }}>🎨 Your work is ready for review!</div>
+          <div style={{ fontWeight: 400, marginBottom: 8 }}>🎨 Your work is ready for review!</div>
           <p style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 16 }}>
-            Please review the delivered work for <strong>{titleWithVersion}</strong> and let us know if you are happy or need changes.
+            Please review the delivered work for <span style={{ color: "var(--text-primary)" }}>{titleWithVersion}</span> and let us know if you are happy or need changes.
           </p>
           <div className="action-buttons">
             <button className="btn btn-success" onClick={handleClientApprove} disabled={saving}>✓ Approve — I'm Happy!</button>
@@ -634,7 +666,7 @@ export default function RequestDetail() {
       )}
       {isClient && canEdit && !submitted && clientAction !== 'confirm-delete' && clientAction !== 'edit' && (
         <div className="card" style={{ marginBottom: 24 }}>
-          <div style={{ fontWeight: 600, marginBottom: 8 }}>✏️ Need to make changes?</div>
+          <div style={{ fontWeight: 400, marginBottom: 8 }}>✏️ Need to make changes?</div>
           <p style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 16 }}>
             Your request is still being worked on. You can update the details or requirements.
           </p>
@@ -649,7 +681,7 @@ export default function RequestDetail() {
       )}
       {isClient && canReopen && !submitted && clientAction !== 'confirm-delete' && clientAction !== 'reopen' && (
         <div className="card" style={{ marginBottom: 24 }}>
-          <div style={{ fontWeight: 600, marginBottom: 8 }}>🔄 Need more changes?</div>
+          <div style={{ fontWeight: 400, marginBottom: 8 }}>🔄 Need more changes?</div>
           <p style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 16 }}>
             This job was approved but you can still request a new revision if needed.
           </p>
@@ -687,14 +719,14 @@ export default function RequestDetail() {
                   <label style={{ display: 'flex', alignItems: 'flex-start', gap: 10, cursor: 'pointer', fontWeight: 400 }}>
                     <input type="radio" name="revisionType" value="client_revision" checked={revisionForm.revisionType === 'client_revision'} onChange={e => setRevisionForm(f => ({ ...f, revisionType: e.target.value }))} style={{ marginTop: 2, flexShrink: 0 }} />
                     <div>
-                      <div style={{ fontWeight: 600, fontSize: 13 }}>Client Revision</div>
+                      <div style={{ fontWeight: 400, fontSize: 13 }}>Client Revision</div>
                       <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>I want changes made to the current work</div>
                     </div>
                   </label>
                   <label style={{ display: 'flex', alignItems: 'flex-start', gap: 10, cursor: 'pointer', fontWeight: 400 }}>
                     <input type="radio" name="revisionType" value="fourge_error" checked={revisionForm.revisionType === 'fourge_error'} onChange={e => setRevisionForm(f => ({ ...f, revisionType: e.target.value }))} style={{ marginTop: 2, flexShrink: 0 }} />
                     <div>
-                      <div style={{ fontWeight: 600, fontSize: 13 }}>Fourge Error</div>
+                      <div style={{ fontWeight: 400, fontSize: 13 }}>Fourge Error</div>
                       <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>Something was incorrect or not delivered as agreed</div>
                     </div>
                   </label>
@@ -716,7 +748,7 @@ export default function RequestDetail() {
 
       {/* Team/External: Send form */}
       {!isClient && showSendForm && (
-        <div className="card" style={{ marginBottom: 24, border: '1px solid var(--accent)', borderRadius: 12 }}>
+        <div className="card" style={{ marginBottom: 24, border: '1px solid var(--accent)', borderRadius: 4 }}>
           <div className="card-title">{currentDelivery ? 'Update Client Delivery' : 'Send to Client'} — {company?.name}</div>
           <p style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 16 }}>
             {currentDelivery ? 'Add files or resend the email with the current delivery package.' : 'Upload the completed file and add an optional message for the client.'}
@@ -732,12 +764,12 @@ export default function RequestDetail() {
                 onDragLeave={e => { e.preventDefault(); dragCounter.current--; if (dragCounter.current === 0) setDragging(false); }}
                 onDragOver={e => e.preventDefault()}
                 onDrop={e => { e.preventDefault(); dragCounter.current = 0; setDragging(false); const dropped = Array.from(e.dataTransfer.files); if (dropped.length > 0) processFiles(dropped); }}
-                style={{ border: `2px dashed ${dragging ? 'var(--accent)' : sendForm.files.length > 0 ? 'var(--accent)' : 'var(--border)'}`, borderRadius: 8, padding: '20px 16px', textAlign: 'center', background: dragging ? 'color-mix(in srgb, var(--accent) 8%, var(--bg))' : 'var(--bg)', transition: 'all 0.15s' }}
+                style={{ border: `2px dashed ${dragging ? 'var(--accent)' : sendForm.files.length > 0 ? 'var(--accent)' : 'var(--border)'}`, borderRadius: 4, padding: '20px 16px', textAlign: 'center', background: dragging ? 'color-mix(in srgb, var(--accent) 8%, var(--bg))' : 'var(--bg)', transition: 'all 0.15s' }}
               >
                 <input type="file" multiple onChange={e => { processFiles(Array.from(e.target.files)); e.target.value = ''; }} style={{ display: 'none' }} id="file-upload" />
                 <label htmlFor="file-upload" style={{ cursor: 'pointer' }}>
                   <div style={{ fontSize: 24, marginBottom: 6 }}>{dragging ? '📂' : '📎'}</div>
-                  <div style={{ fontWeight: 600, fontSize: 13 }}>{dragging ? 'Drop files here' : sendForm.files.length > 0 ? `${sendForm.files.length} file${sendForm.files.length !== 1 ? 's' : ''} added — click or drag to add more` : 'Click or drag files here'}</div>
+                  <div style={{ fontWeight: 400, fontSize: 13 }}>{dragging ? 'Drop files here' : sendForm.files.length > 0 ? `${sendForm.files.length} file${sendForm.files.length !== 1 ? 's' : ''} added — click or drag to add more` : 'Click or drag files here'}</div>
                   <div style={{ fontSize: 12, color: 'var(--text-secondary)', marginTop: 4 }}>Any file type accepted</div>
                 </label>
               </div>
@@ -745,8 +777,8 @@ export default function RequestDetail() {
               {sendForm.files.length > 0 && (
                 <div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 6 }}>
                   {sendForm.files.map((file, i) => (
-                    <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--card-bg)', borderRadius: 8, border: '1px solid var(--border)' }}>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span>📄</span><div><div style={{ fontSize: 13, fontWeight: 600 }}>{file.name}</div><div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{formatSize(file.size)}</div></div></div>
+                    <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--card-bg)', borderRadius: 4, border: '1px solid var(--border)' }}>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span>📄</span><div><div style={{ fontSize: 13, fontWeight: 400 }}>{file.name}</div><div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{formatSize(file.size)}</div></div></div>
                       <button type="button" onClick={() => setSendForm(f => ({ ...f, files: f.files.filter((_, fi) => fi !== i) }))} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--danger)', fontSize: 16 }}>✕</button>
                     </div>
                   ))}
@@ -754,11 +786,11 @@ export default function RequestDetail() {
               )}
               {currentDeliveryFiles.length > 0 && (
                 <div style={{ marginTop: 12 }}>
-                  <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', marginBottom: 6 }}>Already Delivered</div>
+                  <div style={{ fontSize: 11, fontWeight: 400, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', marginBottom: 6 }}>Already Delivered</div>
                   <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                     {currentDeliveryFiles.map((file, i) => (
-                      <div key={file.id || i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--card-bg)', borderRadius: 8, border: '1px solid var(--border)' }}>
-                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span>📄</span><div><div style={{ fontSize: 13, fontWeight: 600 }}>{file.name}</div>{file.size > 0 && <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{formatSize(file.size)}</div>}</div></div>
+                      <div key={file.id || i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--card-bg)', borderRadius: 4, border: '1px solid var(--border)' }}>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span>📄</span><div><div style={{ fontSize: 13, fontWeight: 400 }}>{file.name}</div>{file.size > 0 && <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{formatSize(file.size)}</div>}</div></div>
                         <LoadingButton className="btn btn-outline btn-sm" loading={downloading === `delivery:${file.storage_path}`} disabled={Boolean(downloading)} loadingText="Downloading..." onClick={() => getFileUrl(file)}>📥 Download</LoadingButton>
                       </div>
                     ))}
@@ -770,15 +802,20 @@ export default function RequestDetail() {
               <label>Message to Client <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>(optional)</span></label>
               <textarea placeholder={`Hi ${company?.name}, your ${task.title} is ready for review!`} value={sendForm.message} onChange={e => setSendForm(f => ({ ...f, message: e.target.value }))} style={{ minHeight: 80 }} />
             </div>
-            {clientEmails.length === 0 && (
-              <div className="form-group" style={{ padding: '12px 14px', background: 'color-mix(in srgb, var(--danger) 8%, var(--bg))', borderRadius: 8, border: '1px solid var(--danger)' }}>
-                <label style={{ color: 'var(--danger)', marginBottom: 6, display: 'block' }}>⚠ No client email on file for {company?.name}</label>
-                <input type="email" required placeholder="client@example.com" value={extraClientEmail} onChange={e => setExtraClientEmail(e.target.value)} />
-                <p style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 6, marginBottom: 0 }}>This will be saved as the company contact email.</p>
+            {clientEmails.length > 0 && (
+              <div className="form-group">
+                <label>Sending To</label>
+                <div style={{ fontSize: 13, color: 'var(--text-secondary)', padding: '8px 12px', background: 'var(--bg)', borderRadius: 4, border: '1px solid var(--border)' }}>
+                  {clientEmails.join(', ')}
+                </div>
               </div>
             )}
+            <div className="form-group">
+              <label>Additional Recipient <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>(optional)</span></label>
+              <input type="email" placeholder="cc@example.com" value={extraClientEmail} onChange={e => setExtraClientEmail(e.target.value)} />
+            </div>
             <div className="action-buttons">
-              <button type="submit" className="btn btn-success" disabled={(sendForm.files.length === 0 && currentDeliveryFiles.length === 0) || saving || (clientEmails.length === 0 && !extraClientEmail)}>
+              <button type="submit" className="btn btn-success" disabled={(sendForm.files.length === 0 && currentDeliveryFiles.length === 0) || saving}>
                 {saving ? 'Uploading...' : `✉️ ${currentDelivery ? 'Resend to Client' : 'Send to Client'}${sendForm.files.length > 0 ? ` (${sendForm.files.length} new file${sendForm.files.length !== 1 ? 's' : ''})` : ''}`}
               </button>
               <button type="button" className="btn btn-outline" onClick={() => { setShowSendForm(false); setSendForm({ files: [], message: '' }); setExtraClientEmail(''); }}>Cancel</button>
@@ -789,7 +826,7 @@ export default function RequestDetail() {
 
       {/* Team/External: External work upload */}
       {isExternal && showWorkUpload && (
-        <div className="card" style={{ marginBottom: 24, border: '1px solid var(--accent)', borderRadius: 12 }}>
+        <div className="card" style={{ marginBottom: 24, border: '1px solid var(--accent)', borderRadius: 4 }}>
           <div className="card-title">Submit Finished Work</div>
           <p style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 16 }}>Upload your completed files. This will mark the task as ready for team review.</p>
           <form onSubmit={handleWorkUpload}>
@@ -800,12 +837,12 @@ export default function RequestDetail() {
                 onDragLeave={e => { e.preventDefault(); workDragCounter.current--; if (workDragCounter.current === 0) setWorkDragging(false); }}
                 onDragOver={e => e.preventDefault()}
                 onDrop={e => { e.preventDefault(); workDragCounter.current = 0; setWorkDragging(false); const dropped = Array.from(e.dataTransfer.files); if (dropped.length > 0) { const combined = [...workForm.files, ...dropped]; if (combined.length > MAX_FILES) { setWorkFileErrors([`Maximum ${MAX_FILES} files allowed.`]); return; } setWorkFileErrors([]); setWorkForm(f => ({ ...f, files: combined })); }; }}
-                style={{ border: `2px dashed ${workDragging ? 'var(--accent)' : workForm.files.length > 0 ? 'var(--accent)' : 'var(--border)'}`, borderRadius: 8, padding: '20px 16px', textAlign: 'center', background: workDragging ? 'color-mix(in srgb, var(--accent) 8%, var(--bg))' : 'var(--bg)', transition: 'all 0.15s' }}
+                style={{ border: `2px dashed ${workDragging ? 'var(--accent)' : workForm.files.length > 0 ? 'var(--accent)' : 'var(--border)'}`, borderRadius: 4, padding: '20px 16px', textAlign: 'center', background: workDragging ? 'color-mix(in srgb, var(--accent) 8%, var(--bg))' : 'var(--bg)', transition: 'all 0.15s' }}
               >
                 <input type="file" multiple onChange={e => { const combined = [...workForm.files, ...Array.from(e.target.files)]; if (combined.length > MAX_FILES) { setWorkFileErrors([`Maximum ${MAX_FILES} files allowed.`]); return; } setWorkFileErrors([]); setWorkForm(f => ({ ...f, files: combined })); e.target.value = ''; }} style={{ display: 'none' }} id="work-file-upload" />
                 <label htmlFor="work-file-upload" style={{ cursor: 'pointer' }}>
                   <div style={{ fontSize: 24, marginBottom: 6 }}>{workDragging ? '📂' : '📎'}</div>
-                  <div style={{ fontWeight: 600, fontSize: 13 }}>{workDragging ? 'Drop files here' : workForm.files.length > 0 ? `${workForm.files.length} file${workForm.files.length !== 1 ? 's' : ''} added` : 'Click or drag files here'}</div>
+                  <div style={{ fontWeight: 400, fontSize: 13 }}>{workDragging ? 'Drop files here' : workForm.files.length > 0 ? `${workForm.files.length} file${workForm.files.length !== 1 ? 's' : ''} added` : 'Click or drag files here'}</div>
                   <div style={{ fontSize: 12, color: 'var(--text-secondary)', marginTop: 4 }}>Any file type accepted</div>
                 </label>
               </div>
@@ -813,8 +850,8 @@ export default function RequestDetail() {
               {workForm.files.length > 0 && (
                 <div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 6 }}>
                   {workForm.files.map((file, i) => (
-                    <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--card-bg)', borderRadius: 8, border: '1px solid var(--border)' }}>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span>📄</span><div><div style={{ fontSize: 13, fontWeight: 600 }}>{file.name}</div><div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{formatSize(file.size)}</div></div></div>
+                    <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--card-bg)', borderRadius: 4, border: '1px solid var(--border)' }}>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span>📄</span><div><div style={{ fontSize: 13, fontWeight: 400 }}>{file.name}</div><div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{formatSize(file.size)}</div></div></div>
                       <button type="button" onClick={() => setWorkForm(f => ({ ...f, files: f.files.filter((_, fi) => fi !== i) }))} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--danger)', fontSize: 16 }}>✕</button>
                     </div>
                   ))}
@@ -844,13 +881,13 @@ export default function RequestDetail() {
                 <label>Revision</label>
                 {editingRevision && isTeam ? (
                   <form onSubmit={handleSaveRevision} style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 4 }}>
-                    <span style={{ fontWeight: 700, fontSize: 13 }}>R</span>
+                    <span style={{ fontWeight: 400, fontSize: 13 }}>R</span>
                     <input type="text" inputMode="numeric" pattern="[0-9]*" maxLength={2} value={revisionVal} onChange={e => setRevisionVal(e.target.value.replace(/\D/g, '').slice(0, 2))} autoFocus required style={{ width: 54, padding: '4px 8px', fontSize: 13 }} />
                     <button type="submit" className="btn btn-primary btn-sm" disabled={savingRevision}>{savingRevision ? '...' : 'Save'}</button>
                     <button type="button" className="btn btn-outline btn-sm" onClick={() => setEditingRevision(false)}>Cancel</button>
                   </form>
                 ) : (
-                  <p style={{ display: 'flex', alignItems: 'center', gap: 8, fontWeight: 700, fontSize: 16 }}>
+                  <p style={{ display: 'flex', alignItems: 'center', gap: 8, fontWeight: 400, fontSize: 16 }}>
                     {rLabel(revisionBaseline)}
                     {isTeam && (
                       <button className="btn-icon" title="Edit" onClick={() => { setRevisionVal(String(revisionBaseline).padStart(2, '0')); setEditingRevision(true); }}>
@@ -901,14 +938,14 @@ export default function RequestDetail() {
                   {!isExternal && !showSendForm && <button className="btn btn-success btn-sm" onClick={handleOpenSendForm}>✉️ Add Files / Resend</button>}
                   {isExternal && !showSendForm && <button className="btn btn-outline btn-sm" onClick={handleOpenSendForm}>📎 Add Files</button>}
                   {!isClient && (
-                    <div style={{ padding: '10px 14px', background: 'var(--bg)', borderRadius: 8, fontSize: 13, color: '#7c3aed', fontWeight: 500 }}>
+                    <div style={{ padding: '10px 14px', background: 'var(--bg)', borderRadius: 4, fontSize: 13, color: '#7c3aed', fontWeight: 500 }}>
                       ⏳ Awaiting client review.
                     </div>
                   )}
                 </>
               )}
               {task.status === 'client_approved' && (
-                <div style={{ padding: '10px 14px', background: 'var(--bg)', borderRadius: 8, fontSize: 13, color: '#16a34a', fontWeight: 500 }}>
+                <div style={{ padding: '10px 14px', background: 'var(--bg)', borderRadius: 4, fontSize: 13, color: '#16a34a', fontWeight: 500 }}>
                   ✓ Client approved this job.
                 </div>
               )}
@@ -951,12 +988,13 @@ export default function RequestDetail() {
               if (!primary) return null;
               const startEditRequest = () => {
                 setRequestForm({ serviceType: primary.service_type || '', deadline: primary.deadline || '', description: primary.description || '', requestedBy: primary.submitted_by || currentUser?.id || '', isHot: Boolean(primary.is_hot) });
+                setRequestFiles([]);
                 setEditingRequest(true);
               };
               return (
                 <>
                   <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
-                    <span style={{ fontWeight: 700, fontSize: 13 }}>{rLabel(primary.version_number)}</span>
+                    <span style={{ fontWeight: 400, fontSize: 13 }}>{rLabel(primary.version_number)}</span>
                     <StatusBadge status={primary.type} />
                     <span style={{ fontSize: 12, color: 'var(--text-muted)', marginLeft: 'auto' }}>{primary.submitted_by_name} · {formatDateEST(primary.submitted_at)}</span>
                     {isTeam && !editingRequest && (
@@ -997,6 +1035,7 @@ export default function RequestDetail() {
                         <label>Description</label>
                         <textarea value={requestForm.description} onChange={e => setRequestForm(f => ({ ...f, description: e.target.value }))} style={{ minHeight: 100 }} />
                       </div>
+                      <FileAttachment files={requestFiles} onChange={setRequestFiles} />
                       <div className="action-buttons" style={{ marginBottom: 14 }}>
                         <button type="submit" className="btn btn-primary btn-sm" disabled={savingRequest}>{savingRequest ? 'Saving...' : 'Save'}</button>
                         <button type="button" className="btn btn-outline btn-sm" onClick={() => setEditingRequest(false)}>Cancel</button>
@@ -1014,20 +1053,20 @@ export default function RequestDetail() {
                         <p>{primary.submitted_by_name || '—'}</p>
                       </div>
                       <div>
-                        <label style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>Description</label>
-                        <p style={{ marginTop: 8, fontSize: 14, lineHeight: 1.7, color: 'var(--text-primary)', background: 'var(--bg)', padding: '12px 14px', borderRadius: 8, border: '1px solid var(--border)', whiteSpace: 'pre-wrap' }}>{primary.description}</p>
+                        <label style={{ fontSize: 11, fontWeight: 400, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>Description</label>
+                        <p style={{ marginTop: 8, fontSize: 14, lineHeight: 1.7, color: 'var(--text-primary)', background: 'var(--bg)', padding: '12px 14px', borderRadius: 4, border: '1px solid var(--border)', whiteSpace: 'pre-wrap' }}>{primary.description}</p>
                       </div>
                     </>
                   )}
                   {amendments.map(amendment => (
-                    <div key={amendment.id} style={{ marginTop: 12, padding: '12px 14px', background: 'var(--bg)', borderRadius: 8, border: '1px solid var(--border)' }}>
-                      <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 6, letterSpacing: 0.5 }}>Amended Request</div>
+                    <div key={amendment.id} style={{ marginTop: 12, padding: '12px 14px', background: 'var(--bg)', borderRadius: 4, border: '1px solid var(--border)' }}>
+                      <div style={{ fontSize: 11, fontWeight: 400, textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 6, letterSpacing: 0.5 }}>Amended Request</div>
                       <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 6 }}>{amendment.submitted_by_name} · {formatDateEST(amendment.submitted_at)}</div>
                       <p style={{ fontSize: 13, lineHeight: 1.6, color: 'var(--text-secondary)', whiteSpace: 'pre-wrap', margin: 0 }}>{amendment.description}</p>
                       {amendment.files?.length > 0 && (
                         <div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 4 }}>
                           {amendment.files.map((file, fi) => (
-                            <div key={fi} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '5px 10px', background: 'var(--card-bg)', borderRadius: 6, border: '1px solid var(--border)' }}>
+                            <div key={fi} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '5px 10px', background: 'var(--card-bg)', borderRadius: 4, border: '1px solid var(--border)' }}>
                               <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span>📎</span><span style={{ fontSize: 12, fontWeight: 500 }}>{file.name}</span></div>
                               <LoadingButton className="btn-icon" loading={downloading === `submission:${file.storage_path}`} disabled={Boolean(downloading)} loadingText="↓" onClick={() => getSubmissionFileUrl(file)}>📥 Download</LoadingButton>
                             </div>
@@ -1039,12 +1078,12 @@ export default function RequestDetail() {
                   {primary.files?.length > 0 && (
                     <div style={{ marginTop: 12 }}>
                       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6 }}>
-                        <label style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>Attached Files</label>
+                        <label style={{ fontSize: 11, fontWeight: 400, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>Attached Files</label>
                         <LoadingButton className="btn-icon" loading={downloading === `zip:${rLabel(primary.version_number)}`} disabled={Boolean(downloading)} loadingText="↓" onClick={() => downloadAllSubmissionFiles(primary.files, rLabel(primary.version_number))}>⬇ Download All</LoadingButton>
                       </div>
                       <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                         {primary.files.map((file, fi) => (
-                          <div key={fi} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 10px', background: 'var(--bg)', borderRadius: 6, border: '1px solid var(--border)' }}>
+                          <div key={fi} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 10px', background: 'var(--bg)', borderRadius: 4, border: '1px solid var(--border)' }}>
                             <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span>📎</span><span style={{ fontSize: 13, fontWeight: 500 }}>{file.name}</span></div>
                             <LoadingButton className="btn btn-outline btn-sm" loading={downloading === `submission:${file.storage_path}`} disabled={Boolean(downloading)} loadingText="Downloading..." onClick={() => getSubmissionFileUrl(file)}>📥 Download</LoadingButton>
                           </div>
@@ -1100,12 +1139,12 @@ export default function RequestDetail() {
                 {primary.files?.length > 0 && (
                   <div style={{ marginTop: 10 }}>
                     <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
-                      <label style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>Attached Files</label>
+                      <label style={{ fontSize: 11, fontWeight: 400, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>Attached Files</label>
                       <LoadingButton className="btn-icon" loading={downloading === `zip:${rLabel(primary.version_number)}`} disabled={Boolean(downloading)} loadingText="↓" onClick={() => downloadAllSubmissionFiles(primary.files, rLabel(primary.version_number))}>⬇ Download All</LoadingButton>
                     </div>
                     <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                       {primary.files.map((file, fi) => (
-                        <div key={fi} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 10px', background: 'var(--bg)', borderRadius: 6, border: '1px solid var(--border)' }}>
+                        <div key={fi} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 10px', background: 'var(--bg)', borderRadius: 4, border: '1px solid var(--border)' }}>
                           <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span>📎</span><span style={{ fontSize: 13, fontWeight: 500 }}>{file.name}</span></div>
                           <LoadingButton className="btn-icon" loading={downloading === `submission:${file.storage_path}`} disabled={Boolean(downloading)} loadingText="↓" onClick={() => getSubmissionFileUrl(file)}>📥 Download</LoadingButton>
                         </div>
@@ -1114,14 +1153,14 @@ export default function RequestDetail() {
                   </div>
                 )}
                 {amendments.map(amendment => (
-                  <div key={amendment.id} style={{ marginTop: 12, padding: '12px 14px', background: 'var(--bg)', borderRadius: 8, border: '1px solid var(--border)' }}>
-                    <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 8, letterSpacing: 0.5 }}>Amended Request</div>
+                  <div key={amendment.id} style={{ marginTop: 12, padding: '12px 14px', background: 'var(--bg)', borderRadius: 4, border: '1px solid var(--border)' }}>
+                    <div style={{ fontSize: 11, fontWeight: 400, textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 8, letterSpacing: 0.5 }}>Amended Request</div>
                     <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 6 }}>{amendment.submitted_by_name} · {formatDateEST(amendment.submitted_at)}</div>
                     <p style={{ fontSize: 13, lineHeight: 1.6, color: 'var(--text-secondary)', whiteSpace: 'pre-wrap', margin: 0 }}>{amendment.description}</p>
                     {amendment.files?.length > 0 && (
                       <div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 4 }}>
                         {amendment.files.map((file, fi) => (
-                          <div key={fi} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '5px 10px', background: 'var(--card-bg)', borderRadius: 6, border: '1px solid var(--border)' }}>
+                          <div key={fi} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '5px 10px', background: 'var(--card-bg)', borderRadius: 4, border: '1px solid var(--border)' }}>
                             <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span>📎</span><span style={{ fontSize: 12, fontWeight: 500 }}>{file.name}</span></div>
                             <LoadingButton className="btn-icon" loading={downloading === `submission:${file.storage_path}`} disabled={Boolean(downloading)} loadingText="↓" onClick={() => getSubmissionFileUrl(file)}>📥 Download</LoadingButton>
                           </div>
@@ -1131,10 +1170,10 @@ export default function RequestDetail() {
                   </div>
                 ))}
                 {delivery && delivery.files && delivery.files.length > 0 && (
-                  <div style={{ marginTop: 12, padding: '10px 14px', background: 'var(--bg)', borderRadius: 8, border: '1px solid var(--border)' }}>
-                    <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', color: '#16a34a', marginBottom: 8 }}>✓ Delivered {formatDateEST(delivery.sent_at)}</div>
+                  <div style={{ marginTop: 12, padding: '10px 14px', background: 'var(--bg)', borderRadius: 4, border: '1px solid var(--border)' }}>
+                    <div style={{ fontSize: 11, fontWeight: 400, textTransform: 'uppercase', color: '#16a34a', marginBottom: 8 }}>✓ Delivered {formatDateEST(delivery.sent_at)}</div>
                     {delivery.files.map((file, fi) => (
-                      <div key={fi} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 10px', background: 'var(--card-bg)', borderRadius: 6, border: '1px solid var(--border)', marginBottom: 4 }}>
+                      <div key={fi} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 10px', background: 'var(--card-bg)', borderRadius: 4, border: '1px solid var(--border)', marginBottom: 4 }}>
                         <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span>📄</span><span style={{ fontSize: 13, fontWeight: 500 }}>{file.name}</span></div>
                         <LoadingButton className="btn-icon" loading={downloading === `delivery:${file.storage_path}`} disabled={Boolean(downloading)} loadingText="↓" onClick={() => getFileUrl(file)}>📥 Download</LoadingButton>
                       </div>
@@ -1147,29 +1186,29 @@ export default function RequestDetail() {
 
           // Team/External revision history style
           return (
-            <div key={primary.id} style={{ borderRadius: 8, border: `1px solid ${isCurrent ? 'var(--accent)' : 'var(--border)'}`, background: 'var(--bg)', overflow: 'hidden', opacity: isCurrent ? 1 : 0.85, marginBottom: 12 }}>
+            <div key={primary.id} style={{ borderRadius: 4, border: `1px solid ${isCurrent ? 'var(--accent)' : 'var(--border)'}`, background: 'var(--bg)', overflow: 'hidden', opacity: isCurrent ? 1 : 0.85, marginBottom: 12 }}>
               <div style={{ padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 10, borderBottom: '1px solid var(--border)', background: 'var(--card-bg-2)' }}>
-                <span style={{ fontWeight: 700, fontSize: 13 }}>{rLabel(primary.version_number)}</span>
+                <span style={{ fontWeight: 400, fontSize: 13 }}>{rLabel(primary.version_number)}</span>
                 <StatusBadge status={primary.type} />
                 {primary.revision_type && <StatusBadge status={primary.revision_type} />}
-                {isCurrent && <span style={{ fontSize: 11, color: 'var(--accent)', fontWeight: 600 }}>Current</span>}
+                {isCurrent && <span style={{ fontSize: 11, color: 'var(--accent)', fontWeight: 400 }}>Current</span>}
                 <span style={{ fontSize: 12, color: 'var(--text-muted)', marginLeft: 'auto' }}>{primary.submitted_by_name} · {formatDateEST(primary.submitted_at)}</span>
               </div>
               <div style={{ padding: '12px 16px' }}>
                 <div style={{ display: 'flex', gap: 24, marginBottom: 8 }}>
-                  <div><span style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>Service</span><div style={{ fontSize: 13, marginTop: 2 }}>{primary.service_type}</div></div>
-                  <div><span style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>Deadline</span><div style={{ fontSize: 13, marginTop: 2 }}>{primary.deadline || '—'}</div></div>
+                  <div><span style={{ fontSize: 11, fontWeight: 400, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>Service</span><div style={{ fontSize: 13, marginTop: 2 }}>{primary.service_type}</div></div>
+                  <div><span style={{ fontSize: 11, fontWeight: 400, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>Deadline</span><div style={{ fontSize: 13, marginTop: 2 }}>{primary.deadline || '—'}</div></div>
                 </div>
                 <p style={{ fontSize: 13, color: 'var(--text-secondary)', lineHeight: 1.6, whiteSpace: 'pre-wrap', margin: 0 }}>{primary.description}</p>
                 {primary.files?.length > 0 && (
                   <div style={{ marginTop: 10 }}>
                     <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
-                      <span style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>Attached Files</span>
+                      <span style={{ fontSize: 11, fontWeight: 400, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>Attached Files</span>
                       <LoadingButton className="btn-icon" loading={downloading === `zip:${rLabel(revisionBaseline)}`} disabled={Boolean(downloading)} loadingText="↓" onClick={() => downloadAllSubmissionFiles(primary.files)}>⬇ Download All</LoadingButton>
                     </div>
                     <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                       {primary.files.map((file, fi) => (
-                        <div key={fi} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 10px', background: 'var(--card-bg-2)', borderRadius: 6, border: '1px solid var(--border)' }}>
+                        <div key={fi} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 10px', background: 'var(--card-bg-2)', borderRadius: 4, border: '1px solid var(--border)' }}>
                           <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span>📎</span><span style={{ fontSize: 13, fontWeight: 500 }}>{file.name}</span></div>
                           <LoadingButton className="btn-icon" loading={downloading === `submission:${file.storage_path}`} disabled={Boolean(downloading)} loadingText="↓" onClick={() => getSubmissionFileUrl(file)}>📥 Download</LoadingButton>
                         </div>
@@ -1178,14 +1217,14 @@ export default function RequestDetail() {
                   </div>
                 )}
                 {amendments.map(amendment => (
-                  <div key={amendment.id} style={{ marginTop: 12, padding: '12px 14px', background: 'var(--card-bg)', borderRadius: 8, border: '1px solid var(--border)' }}>
-                    <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 6, letterSpacing: 0.5 }}>Amended Request</div>
+                  <div key={amendment.id} style={{ marginTop: 12, padding: '12px 14px', background: 'var(--card-bg)', borderRadius: 4, border: '1px solid var(--border)' }}>
+                    <div style={{ fontSize: 11, fontWeight: 400, textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 6, letterSpacing: 0.5 }}>Amended Request</div>
                     <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 6 }}>{amendment.submitted_by_name} · {formatDateEST(amendment.submitted_at)}</div>
                     <p style={{ fontSize: 13, lineHeight: 1.6, color: 'var(--text-secondary)', whiteSpace: 'pre-wrap', margin: 0 }}>{amendment.description}</p>
                     {amendment.files?.length > 0 && (
                       <div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 4 }}>
                         {amendment.files.map((file, fi) => (
-                          <div key={fi} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '5px 10px', background: 'var(--bg)', borderRadius: 6, border: '1px solid var(--border)' }}>
+                          <div key={fi} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '5px 10px', background: 'var(--bg)', borderRadius: 4, border: '1px solid var(--border)' }}>
                             <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span>📎</span><span style={{ fontSize: 12, fontWeight: 500 }}>{file.name}</span></div>
                             <LoadingButton className="btn-icon" loading={downloading === `submission:${file.storage_path}`} disabled={Boolean(downloading)} loadingText="↓" onClick={() => getSubmissionFileUrl(file)}>📥 Download</LoadingButton>
                           </div>
@@ -1197,10 +1236,10 @@ export default function RequestDetail() {
               </div>
               {delivery ? (
                 <div style={{ padding: '10px 16px', borderTop: '1px solid var(--border)' }}>
-                  <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: '#16a34a', marginBottom: 8 }}>✓ Delivered by {delivery.sent_by} on {formatDateEST(delivery.sent_at)}</div>
+                  <div style={{ fontSize: 11, fontWeight: 400, textTransform: 'uppercase', letterSpacing: '0.5px', color: '#16a34a', marginBottom: 8 }}>✓ Delivered by {delivery.sent_by} on {formatDateEST(delivery.sent_at)}</div>
                   <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                     {(delivery.files || []).map((file, fi) => (
-                      <div key={fi} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 10px', background: 'var(--card-bg-2)', borderRadius: 6, border: '1px solid var(--border)' }}>
+                      <div key={fi} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 10px', background: 'var(--card-bg-2)', borderRadius: 4, border: '1px solid var(--border)' }}>
                         <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span>📄</span><span style={{ fontSize: 13, fontWeight: 500 }}>{file.name}</span>{file.size > 0 && <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>{formatSize(file.size)}</span>}</div>
                         <LoadingButton className="btn-icon" loading={downloading === `delivery:${file.storage_path}`} disabled={Boolean(downloading)} loadingText="↓" onClick={() => getFileUrl(file)}>📥 Download</LoadingButton>
                       </div>
diff --git a/src/pages/RequestsPage.jsx b/src/pages/RequestsPage.jsx
index b0e91be..7562505 100644
--- a/src/pages/RequestsPage.jsx
+++ b/src/pages/RequestsPage.jsx
@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import Layout from '../components/Layout';
+import { DashboardBanner } from '../lib/dashboardBanner';
 import StatusBadge from '../components/StatusBadge';
 import RequestForm from '../components/RequestForm';
 import { supabase } from '../lib/supabase';
@@ -8,10 +9,16 @@ import { useAuth } from '../context/AuthContext';
 import { readPageCache, writePageCache } from '../lib/pageCache';
 import { withTimeout } from '../lib/withTimeout';
 import { getCurrentVersionForTask, getDeadlineSourceSubmission } from '../lib/taskDeadlines';
-import { formatDateOnly } from '../lib/dates';
+import { formatDateOnly, fmtShortDate } from '../lib/dates';
 import { createInitialSubmissionForRequest, createTaskForRequest, findOrCreateProject } from '../lib/requestSubmission';
 import { sendEmail } from '../lib/email';
 import { uploadFilesToRequestInfo } from '../lib/filebrowserFolders';
+import SortTh from '../components/SortTh';
+import { useSortable } from '../hooks/useSortable';
+import FilterDropdown from '../components/FilterDropdown';
+
+const ListViewIcon = () => <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><line x1="3" y1="4" x2="13" y2="4"/><line x1="3" y1="8" x2="13" y2="8"/><line x1="3" y1="12" x2="13" y2="12"/></svg>;
+const GridViewIcon = () => <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor"><rect x="1" y="1" width="6" height="6" rx="1"/><rect x="9" y="1" width="6" height="6" rx="1"/><rect x="1" y="9" width="6" height="6" rx="1"/><rect x="9" y="9" width="6" height="6" rx="1"/></svg>;
 
 export default function RequestsPage() {
   const { currentUser } = useAuth();
@@ -30,7 +37,10 @@ export default function RequestsPage() {
     return true;
   });
   const [error, setError] = useState('');
+  const [loadError, setLoadError] = useState(false);
   const [activeTab, setActiveTab] = useState('all');
+  const [viewMode, setViewMode] = useState(() => localStorage.getItem('requestsViewMode') || 'list');
+  const toggleView = () => setViewMode(v => { const n = v === 'list' ? 'grid' : 'list'; localStorage.setItem('requestsViewMode', n); return n; });
 
   // ── Team-only state ────────────────────────────────────────────────────
   const teamCached = isTeam ? readPageCache('team_requests') : null;
@@ -39,6 +49,9 @@ export default function RequestsPage() {
   const [invoiceItems, setInvoiceItems] = useState(() => teamCached?.invoiceItems || []);
   const [filterCompany, setFilterCompany] = useState('');
   const [filterUser, setFilterUser] = useState('');
+  const { sortKey: reqSortKey, sortDir: reqSortDir, toggle: reqToggle, sort: reqSort } = useSortable('submitted_at', 'desc');
+  const { sortKey: extSortKey, sortDir: extSortDir, toggle: extToggle, sort: extSort } = useSortable('submitted_at', 'desc');
+  const { sortKey: clientSortKey, sortDir: clientSortDir, toggle: clientToggle, sort: clientSort } = useSortable('submitted_at', 'desc');
   const [showAddForm, setShowAddForm] = useState(false);
   const [addFormKey, setAddFormKey] = useState(0);
   const [addSaving, setAddSaving] = useState(false);
@@ -77,7 +90,7 @@ export default function RequestsPage() {
           writePageCache('team_requests', { submissions: subs || [], tasks: t || [], projects: p || [], companies: co || [], invoices: inv || [], invoiceItems: itemRows || [] });
         } catch (err) {
           console.error('Requests load failed:', err);
-          setSubmissions([]); setTasks([]); setProjects([]); setCompanies([]); setInvoices([]); setInvoiceItems([]);
+          setLoadError(true);
         } finally {
           setLoading(false);
         }
@@ -86,17 +99,19 @@ export default function RequestsPage() {
         setSubmissions(teamCached.submissions || []);
         setTasks(teamCached.tasks || []);
         setProjects(teamCached.projects || []);
+        setCompanies(teamCached.companies || []);
+        setInvoices(teamCached.invoices || []);
+        setInvoiceItems(teamCached.invoiceItems || []);
         setLoading(false);
-      } else {
-        loadTeam();
       }
+      loadTeam();
     } else if (isExternal) {
       async function loadExternal() {
         if (!currentUser?.id) { setLoading(false); return; }
         try {
           const [{ data: projectData }, { data: taskData }, { data: subData }, { data: paidItems }] = await withTimeout(
             Promise.all([
-              supabase.from('projects').select('id, name, company_id').order('created_at', { ascending: false }),
+              supabase.from('projects').select('id, name, company_id, company:companies(id, name)').order('created_at', { ascending: false }),
               supabase.from('tasks').select('id, title, status, current_version, project_id, invoiced, completed_at').order('submitted_at', { ascending: false }),
               supabase.from('submissions').select('task_id, submitted_by_name, version_number, deadline, is_hot, service_type, submitted_at').order('submitted_at', { ascending: false }),
               supabase.from('subcontractor_invoice_items').select('task_id, invoice:subcontractor_invoices!inner(status)').eq('subcontractor_invoices.status', 'paid'),
@@ -136,8 +151,8 @@ export default function RequestsPage() {
           const myTaskIds = mySubs.map(s => s.task_id);
           const [{ data: t }, { data: allSubs }, { data: inv }, { data: itemRows }] = await withTimeout(
             Promise.all([
-              supabase.from('tasks').select('*, project:projects(id, name, created_at, status)').in('id', myTaskIds),
-              supabase.from('submissions').select('task_id, submitted_by_name, version_number, type').in('task_id', myTaskIds).order('version_number'),
+              supabase.from('tasks').select('*, project:projects(id, name, created_at, status, company_id)').in('id', myTaskIds),
+              supabase.from('submissions').select('task_id, submitted_by_name, version_number, type, service_type, deadline').in('task_id', myTaskIds).order('version_number'),
               supabase.from('invoices').select('id, status'),
               supabase.from('invoice_items').select('task_id, invoice_id').in('task_id', myTaskIds),
             ]),
@@ -153,6 +168,7 @@ export default function RequestsPage() {
           setProjects(Object.values(projectMap));
         } catch (err) {
           console.error('MyRequests load failed:', err);
+          setLoadError(true);
         } finally {
           setLoading(false);
         }
@@ -236,6 +252,7 @@ export default function RequestsPage() {
   };
 
   if (loading) return <Layout><p style={{ padding: 24, color: 'var(--text-muted)' }}>Loading...</p></Layout>;
+  if (loadError) return <Layout><div style={{ padding: 24 }}><p style={{ color: 'var(--text-muted)', marginBottom: 12 }}>Failed to load. Check your connection and try again.</p><button className="btn btn-outline" onClick={() => window.location.reload()}>Retry</button></div></Layout>;
 
   // ── Team render ────────────────────────────────────────────────────────
   if (isTeam) {
@@ -248,10 +265,10 @@ export default function RequestsPage() {
       const latestGroup = taskSubs.filter(s => s.version_number === currentVersion);
       return { task, primary: deadlineSource, group: latestGroup };
     }).filter(Boolean);
-    const filteredGroups = latestTaskGroups.filter(({ task, group }) => {
+    const filteredGroups = latestTaskGroups.filter(({ task }) => {
       const project = projects.find(p => p.id === task?.project_id);
       if (filterCompany && project?.company_id !== filterCompany) return false;
-      if (filterUser && !group.some(s => s.submitted_by_name === filterUser)) return false;
+      if (filterProject && task?.project_id !== filterProject) return false;
       return true;
     }).sort((a, b) => Math.max(...b.group.map(s => new Date(s.submitted_at).getTime())) - Math.max(...a.group.map(s => new Date(s.submitted_at).getTime())));
     const byStatus = (s) => filteredGroups.filter(({ task }) => task?.status === s);
@@ -264,18 +281,18 @@ export default function RequestsPage() {
         || '—';
       return (
         <tr key={task.id} onClick={() => task && navigate(`/requests/${task.id}`)} style={{ cursor: task ? 'pointer' : 'default' }}>
-          <td style={{ color: 'var(--text-muted)' }}>{project?.name || 'No project'}</td>
-          <td style={{ fontWeight: 600 }}>
+          <td style={{ fontWeight: 400 }}>
             <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
               <span>{task?.title || '—'}</span>
+              <span style={{ color: 'var(--text-muted)' }}>{`R${String(primary.version_number ?? 0).padStart(2, '0')}`}</span>
               {primary.is_hot ? <span className="badge badge-needs_revision">HOT</span> : null}
             </div>
+            <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 2 }}>{project?.name || '—'}</div>
           </td>
-          <td style={{ color: 'var(--text-muted)' }}>{serviceType}</td>
-          <td>{`R${String(primary.version_number ?? 0).padStart(2, '0')}`}</td>
-          <td>{company ? <Link to={`/company/${company.id}`} className="table-link" onClick={e => e.stopPropagation()}>{company.name}</Link> : 'No client'}</td>
-          <td>{formatDateOnly(primary.deadline, 'Not specified')}</td>
-          <td style={{ color: 'var(--text-muted)' }}>{task?.completed_at ? new Date(task.completed_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : '—'}</td>
+          <td style={{ color: 'var(--accent)' }}>{company ? <Link to={`/company/${company.id}`} className="table-link" style={{ color: 'var(--accent)' }} onClick={e => e.stopPropagation()}>{company.name}</Link> : 'No client'}</td>
+          <td>{serviceType}</td>
+          <td>{fmtShortDate(primary.deadline, 'Not specified')}</td>
+          <td style={{ color: 'var(--text-muted)' }}>{fmtShortDate(task?.completed_at)}</td>
           <td><StatusBadge status={task?.status || 'not_started'} /></td>
         </tr>
       );
@@ -290,89 +307,144 @@ export default function RequestsPage() {
       { id: 'invoiced', label: 'Invoiced', groups: byStatus('invoiced') },
       { id: 'paid', label: 'Paid', groups: byStatus('paid') },
     ];
-    const currentGroups = teamTabs.find(t => t.id === activeTab)?.groups || [];
+    const rawGroups = teamTabs.find(t => t.id === activeTab)?.groups || [];
+    const currentGroups = reqSort(rawGroups, ({ task, primary }, key) => {
+      const project = projects.find(p => p.id === task?.project_id);
+      const company = companies.find(co => co.id === project?.company_id);
+      if (key === 'project') return project?.name || '';
+      if (key === 'title') return task?.title || '';
+      if (key === 'serviceType') return primary?.service_type || '';
+      if (key === 'revision') return primary?.version_number ?? 0;
+      if (key === 'client') return company?.name || '';
+      if (key === 'deadline') return primary?.deadline || '';
+      if (key === 'completed_at') return task?.completed_at || '';
+      if (key === 'status') return task?.status || '';
+      if (key === 'submitted_at') return primary?.submitted_at || '';
+      return '';
+    });
+
+    const doneStatuses = new Set(['client_approved', 'invoiced', 'paid']);
+    const teamActiveCount = latestTaskGroups.filter(({ task }) => !doneStatuses.has(task?.status)).length;
+    const teamCompletedCount = latestTaskGroups.filter(({ task }) => doneStatuses.has(task?.status)).length;
 
     return (
       <Layout>
         <div className="page-header">
-          <div>
-            <div className="page-title">Requests</div>
-            <div className="page-subtitle">Track incoming requests, revisions, and completed jobs in one place.</div>
+          <div className="page-header-left">
+            <DashboardBanner />
+            <div className="page-title dashboard-greeting">Requests</div>
+            <div className="page-subtitle">{teamActiveCount} active &bull; {teamCompletedCount} completed</div>
           </div>
           <button className="btn btn-primary btn-sm" onClick={() => { setShowAddForm(s => !s); setAddError(''); }}>
-            {showAddForm ? 'Cancel' : '+ Add Request'}
+            + Add Request
           </button>
         </div>
 
         {showAddForm && (
-          <div className="card" style={{ marginBottom: 24, border: '1px solid var(--accent)', borderRadius: 12, flexShrink: 0 }}>
-            <div className="card-title">Add Request</div>
-            <RequestForm
-              key={addFormKey}
-              companies={companies}
-              currentUser={currentUser}
-              showRequester={true}
-              onSubmit={handleAddRequest}
-              onCancel={() => { setShowAddForm(false); setAddFormKey(k => k + 1); setAddError(''); }}
-              saving={addSaving}
-              error={addError}
-              submitLabel="Add Request"
-            />
+          <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(4px)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }} onClick={() => { setShowAddForm(false); setAddFormKey(k => k + 1); setAddError(''); }}>
+            <div style={{ background: 'var(--card-bg)', borderRadius: 4, padding: 28, width: '100%', maxWidth: 560, border: '1px solid var(--border)', boxShadow: '0 24px 64px rgba(0,0,0,0.5)', maxHeight: '90vh', overflowY: 'auto' }} onClick={e => e.stopPropagation()}>
+              <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 20 }}>
+                <div>
+                  <div style={{ fontSize: 11, fontWeight: 400, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', marginBottom: 4 }}>New Request</div>
+                  <div style={{ fontSize: 22, color: 'var(--text-primary)' }}>Add a request</div>
+                </div>
+                <button onClick={() => { setShowAddForm(false); setAddFormKey(k => k + 1); setAddError(''); }} style={{ background: 'none', border: 'none', color: 'var(--text-muted)', fontSize: 20, cursor: 'pointer', lineHeight: 1, padding: 4 }}>×</button>
+              </div>
+              <RequestForm
+                key={addFormKey}
+                companies={companies}
+                currentUser={currentUser}
+                showRequester={true}
+                onSubmit={handleAddRequest}
+                onCancel={() => { setShowAddForm(false); setAddFormKey(k => k + 1); setAddError(''); }}
+                saving={addSaving}
+                error={addError}
+                submitLabel="Add Request"
+              />
+            </div>
           </div>
         )}
 
-        {!showAddForm && (
-          <>
-            {(companies.length > 0 || requesterNames.length > 0) && (
-              <div style={{ display: 'flex', gap: 12, marginBottom: 16, flexWrap: 'wrap', flexShrink: 0 }}>
-                {companies.length > 0 && (
-                  <select className="filter-select" value={filterCompany} onChange={e => setFilterCompany(e.target.value)}>
-                    <option value="">All Companies</option>
-                    {companies.map(co => <option key={co.id} value={co.id}>{co.name}</option>)}
-                  </select>
-                )}
-                {requesterNames.length > 0 && (
-                  <select className="filter-select" value={filterUser} onChange={e => setFilterUser(e.target.value)}>
-                    <option value="">All Requesters</option>
-                    {requesterNames.map(name => <option key={name} value={name}>{name}</option>)}
-                  </select>
-                )}
+        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16, flexShrink: 0, flexWrap: 'wrap' }}>
+              {companies.length > 0 && (
+                <select className="filter-select" style={{ width: 120 }} value={filterCompany} onChange={e => { setFilterCompany(e.target.value); setFilterProject(''); }}>
+                  <option value="">All Companies</option>
+                  {companies.map(co => <option key={co.id} value={co.id}>{co.name}</option>)}
+                </select>
+              )}
+              {filterCompany && (() => { const co_projects = projects.filter(p => p.company_id === filterCompany); return co_projects.length > 0 ? (
+                <select className="filter-select" style={{ width: 120 }} value={filterProject} onChange={e => setFilterProject(e.target.value)}>
+                  <option value="">All Projects</option>
+                  {co_projects.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
+                </select>
+              ) : null; })()}
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginLeft: 'auto' }}>
+                <select className="filter-select" style={{ width: 120 }} value={activeTab} onChange={e => setActiveTab(e.target.value)}>
+                  {teamTabs.map(t => <option key={t.id} value={t.id}>{t.label} ({t.groups.length})</option>)}
+                </select>
+                <button className="btn btn-outline btn-sm" onClick={toggleView} title={viewMode === 'list' ? 'Grid view' : 'List view'} style={{ padding: '5px 9px', lineHeight: 1, display: 'flex', alignItems: 'center' }}>
+                  {viewMode === 'list' ? <GridViewIcon /> : <ListViewIcon />}
+                </button>
               </div>
-            )}
+            </div>
 
             {submissions.length === 0 ? (
-              <div className="empty-state"><h3>No requests yet</h3><p>Client requests will appear here.</p></div>
+              <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, color: 'var(--text-muted)' }}>No requests yet.</div>
             ) : filteredGroups.length === 0 ? (
-              <div className="empty-state"><h3>No matching requests</h3><p>Try clearing the current company or requester filters.</p></div>
-            ) : (
-              <div className="card" style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
-                <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', marginBottom: 16, flexShrink: 0 }}>
-                  {teamTabs.map(tab => (
-                    <button key={tab.id} type="button" className={`tab-btn${activeTab === tab.id ? ' active' : ''}`} onClick={() => setActiveTab(tab.id)}>
-                      {tab.label} ({tab.groups.length})
-                    </button>
-                  ))}
+              <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, color: 'var(--text-muted)' }}>No matching requests.</div>
+            ) : currentGroups.length === 0 ? (
+              <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, color: 'var(--text-muted)' }}>No {teamTabs.find(t => t.id === activeTab)?.label.toLowerCase()} requests.</div>
+            ) : viewMode === 'grid' ? (
+              <div style={{ flex: 1, overflowY: 'auto' }}>
+                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 12 }}>
+                  {currentGroups.map(({ task, primary }) => {
+                    const project = projects.find(p => p.id === task?.project_id);
+                    const company = companies.find(co => co.id === project?.company_id);
+                    const serviceType = submissions.find(s => s.task_id === task?.id && s.type === 'initial')?.service_type || primary?.service_type || '—';
+                    return (
+                      <div key={task.id} className="grid-card" onClick={() => navigate(`/requests/${task.id}`)} style={{ padding: '14px 16px', border: '1px solid var(--border)', borderRadius: 6 }}>
+                        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 8, marginBottom: 4 }}>
+                          <div style={{ minWidth: 0 }}>
+                            <div style={{ fontWeight: 400, fontSize: 13, color: 'var(--text-primary)', marginBottom: 2 }}>{task?.title || '—'}</div>
+                            <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{project?.name || '—'}</div>
+                          </div>
+                          <StatusBadge status={task?.status || 'not_started'} />
+                        </div>
+                        {company && <div style={{ fontSize: 12, color: 'var(--accent)', marginBottom: 6 }}>{company.name}</div>}
+                        <div style={{ fontSize: 11, color: 'var(--text-muted)', display: 'flex', justifyContent: 'space-between' }}>
+                          <span>{serviceType}</span>
+                          <span>{fmtShortDate(primary?.deadline)}</span>
+                        </div>
+                      </div>
+                    );
+                  })}
                 </div>
-                {currentGroups.length === 0 ? (
-                  <div style={{ fontSize: 13, color: 'var(--text-muted)', padding: '8px 0' }}>
-                    No {teamTabs.find(t => t.id === activeTab)?.label.toLowerCase()} requests.
-                  </div>
-                ) : (
-                  <div className="table-wrapper" style={{ flex: 1, minHeight: 0, overflowY: 'auto' }}>
-                    <table>
-                      <thead>
-                        <tr>
-                          <th>Project</th><th>Name</th><th>Request Type</th><th>Revision</th><th>Client</th><th>Deadline</th><th>Approved</th><th>Status</th>
-                        </tr>
-                      </thead>
-                      <tbody>{currentGroups.map(group => renderRow(group))}</tbody>
-                    </table>
-                  </div>
-                )}
+              </div>
+            ) : (
+              <div style={{ flex: 1, minHeight: 0, overflowY: 'auto', background: 'var(--card-bg)', borderRadius: 4, border: '1px solid var(--border)' }}>
+                <table style={{ tableLayout: 'fixed', width: '100%' }}>
+                  <colgroup>
+                    <col style={{ width: '28%' }} />
+                    <col style={{ width: '25%' }} />
+                    <col style={{ width: '15%' }} />
+                    <col style={{ width: '10%' }} />
+                    <col style={{ width: '10%' }} />
+                    <col style={{ width: '12%' }} />
+                  </colgroup>
+                  <thead>
+                    <tr>
+                      <SortTh col="title" sortKey={reqSortKey} sortDir={reqSortDir} onSort={reqToggle}>Name</SortTh>
+                      <SortTh col="client" sortKey={reqSortKey} sortDir={reqSortDir} onSort={reqToggle}>Client</SortTh>
+                      <SortTh col="serviceType" sortKey={reqSortKey} sortDir={reqSortDir} onSort={reqToggle}>Request Type</SortTh>
+                      <SortTh col="deadline" sortKey={reqSortKey} sortDir={reqSortDir} onSort={reqToggle}>Deadline</SortTh>
+                      <SortTh col="completed_at" sortKey={reqSortKey} sortDir={reqSortDir} onSort={reqToggle}>Approved</SortTh>
+                      <SortTh col="status" sortKey={reqSortKey} sortDir={reqSortDir} onSort={reqToggle}>Status</SortTh>
+                    </tr>
+                  </thead>
+                  <tbody>{currentGroups.map(group => renderRow(group))}</tbody>
+                </table>
               </div>
             )}
-          </>
-        )}
       </Layout>
     );
   }
@@ -405,96 +477,129 @@ export default function RequestsPage() {
       { id: 'invoiced', label: 'Invoiced', groups: byStatusExt('invoiced') },
       { id: 'paid', label: 'Paid', groups: byStatusExt('paid') },
     ];
-    const currentExtGroups = extTabs.find(t => t.id === activeTab)?.groups || [];
+    const rawExtGroups = extTabs.find(t => t.id === activeTab)?.groups || [];
+    const currentExtGroups = extSort(rawExtGroups, ({ task, primary }, key) => {
+      const project = projects.find(p => p.id === task?.project_id);
+      if (key === 'title') return task?.title || '';
+      if (key === 'serviceType') return submissions.find(s => s.task_id === task?.id && s.service_type)?.service_type || primary?.service_type || '';
+      if (key === 'revision') return primary?.version_number ?? 0;
+      if (key === 'client') return project?.company?.name || '';
+      if (key === 'deadline') return primary?.deadline || '';
+      if (key === 'completed_at') return task?.completed_at || '';
+      if (key === 'status') return task?.status || '';
+      if (key === 'submitted_at') return primary?.submitted_at || '';
+      return '';
+    });
     const renderExtRow = ({ task, primary }) => {
       const project = projects.find(p => p.id === task?.project_id);
       const extServiceType = submissions.find(s => s.task_id === task?.id && s.service_type)?.service_type || primary.service_type || '—';
       return (
         <tr key={task.id} onClick={() => navigate(`/requests/${task.id}`)} style={{ cursor: 'pointer' }}>
-          <td style={{ color: 'var(--text-muted)' }}>{project?.name || 'No project'}</td>
-          <td style={{ fontWeight: 600 }}>
+          <td style={{ fontWeight: 400 }}>
             <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
               <span>{task?.title || '—'}</span>
+              <span style={{ color: 'var(--text-muted)' }}>{`R${String(primary.version_number ?? 0).padStart(2, '0')}`}</span>
               {primary.is_hot ? <span className="badge badge-needs_revision">HOT</span> : null}
             </div>
+            <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 2 }}>{project?.name || '—'}</div>
           </td>
-          <td style={{ color: 'var(--text-muted)' }}>{extServiceType}</td>
-          <td>{`R${String(primary.version_number ?? 0).padStart(2, '0')}`}</td>
-          <td>{formatDateOnly(primary.deadline, 'Not specified')}</td>
-          <td style={{ color: 'var(--text-muted)' }}>{task?.completed_at ? new Date(task.completed_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : '—'}</td>
+          <td style={{ color: 'var(--accent)' }}>{project?.company?.name || '—'}</td>
+          <td>{extServiceType}</td>
+          <td>{fmtShortDate(primary.deadline, 'Not specified')}</td>
+          <td style={{ color: 'var(--text-muted)' }}>{fmtShortDate(task?.completed_at)}</td>
           <td><StatusBadge status={task?.status || 'not_started'} /></td>
         </tr>
       );
     };
 
+    const doneStatusesExt = new Set(['client_approved', 'invoiced', 'paid']);
+    const extActiveCount = latestTaskGroupsExt.filter(({ task }) => !doneStatusesExt.has(task?.status)).length;
+    const extCompletedCount = latestTaskGroupsExt.filter(({ task }) => doneStatusesExt.has(task?.status)).length;
+
     return (
       <Layout>
         <div className="page-header">
-          <div>
-            <div className="page-title">Requests</div>
-            <div className="page-subtitle">All tasks in your assigned projects.</div>
+          <div className="page-header-left">
+            <DashboardBanner />
+            <div className="page-title dashboard-greeting">Requests</div>
+            <div className="page-subtitle">{extActiveCount} active &bull; {extCompletedCount} completed</div>
           </div>
         </div>
 
-        {(projectNames.length > 0 || requesterNamesExt.length > 0) && (
-          <div className="card request-toolbar-card" style={{ marginBottom: 16 }}>
-            <div className="request-toolbar-grid">
-              {projectNames.length > 0 && (
-                <div className="request-toolbar-section">
-                  <div className="card-title" style={{ marginBottom: 10 }}>Filter By Project</div>
-                  <div className="request-filter-row">
-                    <button className={`btn btn-sm ${!filterProject ? 'btn-primary' : 'btn-outline'}`} onClick={() => setFilterProject('')}>All</button>
-                    {projectNames.map(p => (
-                      <button key={p.id} className={`btn btn-sm ${filterProject === p.id ? 'btn-primary' : 'btn-outline'}`} onClick={() => setFilterProject(f => f === p.id ? '' : p.id)}>{p.name}</button>
-                    ))}
-                  </div>
-                </div>
-              )}
-              {requesterNamesExt.length > 0 && (
-                <div className="request-toolbar-section">
-                  <div className="card-title" style={{ marginBottom: 10 }}>Filter By Requester</div>
-                  <div className="request-filter-row">
-                    <button className={`btn btn-sm ${!filterRequester ? 'btn-primary' : 'btn-outline'}`} onClick={() => setFilterRequester('')}>All</button>
-                    {requesterNamesExt.map(name => (
-                      <button key={name} className={`btn btn-sm ${filterRequester === name ? 'btn-primary' : 'btn-outline'}`} onClick={() => setFilterRequester(f => f === name ? '' : name)}>{name}</button>
-                    ))}
-                  </div>
-                </div>
-              )}
-            </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16, flexShrink: 0, flexWrap: 'wrap' }}>
+          {projectNames.length > 0 && (
+            <select className="filter-select" style={{ width: 120 }} value={filterProject} onChange={e => setFilterProject(e.target.value)}>
+              <option value="">All Projects</option>
+              {projectNames.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
+            </select>
+          )}
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginLeft: 'auto' }}>
+            <select className="filter-select" style={{ width: 120 }} value={activeTab} onChange={e => setActiveTab(e.target.value)}>
+              {extTabs.map(t => <option key={t.id} value={t.id}>{t.label} ({t.groups.length})</option>)}
+            </select>
+            <button className="btn btn-outline btn-sm" onClick={toggleView} title={viewMode === 'list' ? 'Grid view' : 'List view'} style={{ padding: '5px 9px', lineHeight: 1, display: 'flex', alignItems: 'center' }}>
+              {viewMode === 'list' ? <GridViewIcon /> : <ListViewIcon />}
+            </button>
           </div>
-        )}
+        </div>
 
         {submissions.length === 0 ? (
-          <div className="empty-state"><h3>No requests yet</h3><p>Tasks will appear here once Fourge assigns you to a project.</p></div>
+          <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, color: 'var(--text-muted)' }}>No requests yet.</div>
         ) : filteredGroupsExt.length === 0 ? (
-          <div className="empty-state"><h3>No matching requests</h3><p>Try clearing the current filters.</p></div>
-        ) : (
-          <div>
-            <div style={{ marginBottom: 20, display: 'flex', gap: 4, flexWrap: 'wrap' }}>
-              {extTabs.map(tab => (
-                <button key={tab.id} type="button" className={`tab-btn${activeTab === tab.id ? ' active' : ''}`} onClick={() => setActiveTab(tab.id)}>
-                  {tab.label} ({tab.groups.length})
-                </button>
-              ))}
+          <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, color: 'var(--text-muted)' }}>No matching requests.</div>
+        ) : currentExtGroups.length === 0 ? (
+          <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, color: 'var(--text-muted)' }}>No {extTabs.find(t => t.id === activeTab)?.label.toLowerCase()} requests.</div>
+        ) : viewMode === 'grid' ? (
+          <div style={{ flex: 1, overflowY: 'auto' }}>
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 12 }}>
+              {currentExtGroups.map(({ task, primary }) => {
+                const project = projects.find(p => p.id === task?.project_id);
+                const extServiceType = submissions.find(s => s.task_id === task?.id && s.service_type)?.service_type || primary?.service_type || '—';
+                return (
+                  <div key={task.id} className="grid-card" onClick={() => navigate(`/requests/${task.id}`)} style={{ padding: '14px 16px', border: '1px solid var(--border)', borderRadius: 6 }}>
+                    <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 8, marginBottom: 4 }}>
+                      <div style={{ minWidth: 0 }}>
+                        <div style={{ fontWeight: 400, fontSize: 13, color: 'var(--text-primary)', marginBottom: 2 }}>{task?.title || '—'}</div>
+                        <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{project?.name || '—'}</div>
+                      </div>
+                      <StatusBadge status={task?.status || 'not_started'} />
+                    </div>
+                    {project?.company?.name && <div style={{ fontSize: 12, color: 'var(--accent)', marginBottom: 6 }}>{project.company.name}</div>}
+                    <div style={{ fontSize: 11, color: 'var(--text-muted)', display: 'flex', justifyContent: 'space-between' }}>
+                      <span>{extServiceType}</span>
+                      <span>{fmtShortDate(primary?.deadline)}</span>
+                    </div>
+                  </div>
+                );
+              })}
             </div>
-            {currentExtGroups.length === 0 ? (
-              <div className="empty-state" style={{ padding: '28px 20px' }}>
-                <h3>No {extTabs.find(t => t.id === activeTab)?.label.toLowerCase()} requests</h3>
-              </div>
-            ) : (
-              <div className="table-wrapper">
-                <table>
-                  <thead>
-                    <tr><th>Project</th><th>Name</th><th>Request Type</th><th>Revision</th><th>Deadline</th><th>Approved</th><th>Status</th></tr>
-                  </thead>
-                  <tbody>{currentExtGroups.map(group => renderExtRow(group))}</tbody>
-                </table>
-              </div>
-            )}
+          </div>
+        ) : (
+          <div style={{ flex: 1, minHeight: 0, overflowY: 'auto', background: 'var(--card-bg)', borderRadius: 4, border: '1px solid var(--border)' }}>
+            <table style={{ tableLayout: 'fixed', width: '100%' }}>
+              <colgroup>
+                <col style={{ width: '28%' }} />
+                <col style={{ width: '25%' }} />
+                <col style={{ width: '15%' }} />
+                <col style={{ width: '10%' }} />
+                <col style={{ width: '10%' }} />
+                <col style={{ width: '12%' }} />
+              </colgroup>
+              <thead>
+                <tr>
+                  <SortTh col="title" sortKey={extSortKey} sortDir={extSortDir} onSort={extToggle}>Name</SortTh>
+                  <SortTh col="client" sortKey={extSortKey} sortDir={extSortDir} onSort={extToggle}>Client</SortTh>
+                  <SortTh col="serviceType" sortKey={extSortKey} sortDir={extSortDir} onSort={extToggle}>Request Type</SortTh>
+                  <SortTh col="deadline" sortKey={extSortKey} sortDir={extSortDir} onSort={extToggle}>Deadline</SortTh>
+                  <SortTh col="completed_at" sortKey={extSortKey} sortDir={extSortDir} onSort={extToggle}>Approved</SortTh>
+                  <SortTh col="status" sortKey={extSortKey} sortDir={extSortDir} onSort={extToggle}>Status</SortTh>
+                </tr>
+              </thead>
+              <tbody>{currentExtGroups.map(group => renderExtRow(group))}</tbody>
+            </table>
           </div>
         )}
-        {error && <div className="card" style={{ color: 'var(--danger)', marginTop: 16 }}>{error}</div>}
+        {error && <div style={{ color: 'var(--danger)', marginTop: 16, fontSize: 13 }}>{error}</div>}
       </Layout>
     );
   }
@@ -506,10 +611,7 @@ export default function RequestsPage() {
   const clientRequesterNames = [...new Set(submissions.filter(s => s.type === 'initial').map(s => s.submitted_by_name).filter(Boolean))].sort();
   const clientFilteredTasks = tasks.filter(task => {
     if (filterCompany && task.project?.company_id !== filterCompany) return false;
-    if (filterRequester) {
-      const initialSub = submissions.find(s => s.task_id === task.id && s.type === 'initial');
-      if (initialSub?.submitted_by_name !== filterRequester) return false;
-    }
+    if (filterProject && task.project?.id !== filterProject) return false;
     return true;
   });
   const byStatusClientFiltered = (s) => clientFilteredTasks.filter(t => t.status === s);
@@ -523,106 +625,155 @@ export default function RequestsPage() {
     { id: 'invoiced', label: 'Invoiced', tasks: byStatusClientFiltered('invoiced') },
     { id: 'paid', label: 'Paid', tasks: byStatusClientFiltered('paid') },
   ];
-  const currentClientTasks = clientTabs.find(t => t.id === activeTab)?.tasks || [];
+  const rawClientTasks = clientTabs.find(t => t.id === activeTab)?.tasks || [];
+  const currentClientTasks = clientSort(rawClientTasks, (task, key) => {
+    if (key === 'title') return task?.title || '';
+    if (key === 'serviceType') return submissions.find(s => s.task_id === task?.id && s.type === 'initial')?.service_type || '';
+    if (key === 'revision') return task?.current_version ?? 0;
+    if (key === 'client') return (clientCompanies.find(c => c.id === task.project?.company_id))?.name || '';
+    if (key === 'deadline') return submissions.find(s => s.task_id === task?.id && s.type === 'initial')?.deadline || '';
+    if (key === 'completed_at') return task?.completed_at || '';
+    if (key === 'status') return task?.status || '';
+    if (key === 'submitted_at') return task?.submitted_at || '';
+    return '';
+  });
 
   return (
     <Layout>
       <div className="page-header" style={{ flexShrink: 0 }}>
-        <div>
-          <div className="page-title">Requests</div>
-          <div className="page-subtitle">Track your active requests and their status.</div>
+        <div className="page-header-left">
+          <DashboardBanner />
+          <div className="page-title dashboard-greeting">Requests</div>
+          <div className="page-subtitle">{clientFilteredTasks.filter(t => !['client_approved','invoiced','paid'].includes(t.status)).length} active &bull; {clientFilteredTasks.filter(t => ['client_approved','invoiced','paid'].includes(t.status)).length} completed</div>
         </div>
         <button className="btn btn-primary btn-sm" onClick={() => { setShowAddForm(s => !s); setAddError(''); }}>
-          {showAddForm ? 'Cancel' : '+ New Request'}
+          + New Request
         </button>
       </div>
 
       {showAddForm && (
-        <div className="card" style={{ marginBottom: 24, border: '1px solid var(--accent)', borderRadius: 12, flexShrink: 0 }}>
-          <div className="card-title">New Request</div>
-          <RequestForm
-            key={addFormKey}
-            companies={clientCompanies}
-            initialCompanyId={clientCompanies[0]?.id || ''}
-            showRequester={false}
-            onSubmit={handleClientRequest}
-            onCancel={() => { setShowAddForm(false); setAddFormKey(k => k + 1); setAddError(''); }}
-            saving={addSaving}
-            error={addError}
-            submitLabel="Submit Request"
-          />
+        <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(4px)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }} onClick={() => { setShowAddForm(false); setAddFormKey(k => k + 1); setAddError(''); }}>
+          <div style={{ background: 'var(--card-bg)', borderRadius: 4, padding: 28, width: '100%', maxWidth: 560, border: '1px solid var(--border)', boxShadow: '0 24px 64px rgba(0,0,0,0.5)', maxHeight: '90vh', overflowY: 'auto' }} onClick={e => e.stopPropagation()}>
+            <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 20 }}>
+              <div>
+                <div style={{ fontSize: 11, fontWeight: 400, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', marginBottom: 4 }}>New Request</div>
+                <div style={{ fontSize: 22, color: 'var(--text-primary)' }}>Submit a request</div>
+              </div>
+              <button onClick={() => { setShowAddForm(false); setAddFormKey(k => k + 1); setAddError(''); }} style={{ background: 'none', border: 'none', color: 'var(--text-muted)', fontSize: 20, cursor: 'pointer', lineHeight: 1, padding: 4 }}>×</button>
+            </div>
+            <RequestForm
+              key={addFormKey}
+              companies={clientCompanies}
+              initialCompanyId={clientCompanies[0]?.id || ''}
+              showRequester={false}
+              onSubmit={handleClientRequest}
+              onCancel={() => { setShowAddForm(false); setAddFormKey(k => k + 1); setAddError(''); }}
+              saving={addSaving}
+              error={addError}
+              submitLabel="Submit Request"
+            />
+          </div>
         </div>
       )}
 
-      {!showAddForm && (
-        <>
-          {(clientCompanies.length > 1 || clientRequesterNames.length > 0) && (
-            <div style={{ display: 'flex', gap: 12, marginBottom: 16, flexWrap: 'wrap', flexShrink: 0 }}>
-              {clientCompanies.length > 1 && (
-                <select className="filter-select" value={filterCompany} onChange={e => setFilterCompany(e.target.value)}>
-                  <option value="">All Companies</option>
-                  {clientCompanies.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
-                </select>
-              )}
-              {clientRequesterNames.length > 0 && (
-                <select className="filter-select" value={filterRequester} onChange={e => setFilterRequester(e.target.value)}>
-                  <option value="">All Requesters</option>
-                  {clientRequesterNames.map(name => <option key={name} value={name}>{name}</option>)}
-                </select>
-              )}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16, flexShrink: 0, flexWrap: 'wrap' }}>
+            {clientCompanies.length > 1 && (
+              <select className="filter-select" style={{ width: 120 }} value={filterCompany} onChange={e => { setFilterCompany(e.target.value); setFilterProject(''); }}>
+                <option value="">All Companies</option>
+                {clientCompanies.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
+              </select>
+            )}
+            {filterCompany && (() => { const co_projects = projects.filter(p => p.company_id === filterCompany); return co_projects.length > 0 ? (
+              <select className="filter-select" style={{ width: 120 }} value={filterProject} onChange={e => setFilterProject(e.target.value)}>
+                <option value="">All Projects</option>
+                {co_projects.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
+              </select>
+            ) : null; })()}
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginLeft: 'auto' }}>
+              <select className="filter-select" style={{ width: 120 }} value={activeTab} onChange={e => setActiveTab(e.target.value)}>
+                {clientTabs.map(t => <option key={t.id} value={t.id}>{t.label} ({t.tasks.length})</option>)}
+              </select>
+              <button className="btn btn-outline btn-sm" onClick={toggleView} title={viewMode === 'list' ? 'Grid view' : 'List view'} style={{ padding: '5px 9px', lineHeight: 1, display: 'flex', alignItems: 'center' }}>
+                {viewMode === 'list' ? <GridViewIcon /> : <ListViewIcon />}
+              </button>
             </div>
-          )}
+          </div>
 
           {tasks.length === 0 ? (
-            <div className="empty-state">
-              <div className="empty-state-icon">📋</div>
-              <h3>No requests yet</h3>
-              <p>Submit a new request to get started.</p>
-              <button className="btn btn-primary" style={{ marginTop: 16 }} onClick={() => setShowAddForm(true)}>Submit Request</button>
+            <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, color: 'var(--text-muted)' }}>No requests yet.</div>
+          ) : currentClientTasks.length === 0 ? (
+            <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, color: 'var(--text-muted)' }}>No {clientTabs.find(t => t.id === activeTab)?.label.toLowerCase()} requests.</div>
+          ) : viewMode === 'grid' ? (
+            <div style={{ flex: 1, overflowY: 'auto' }}>
+              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 12 }}>
+                {currentClientTasks.map(task => {
+                  const clientSub = submissions.find(s => s.task_id === task.id && s.type === 'initial');
+                  const clientCo = clientCompanies.find(c => c.id === task.project?.company_id);
+                  return (
+                    <div key={task.id} className="grid-card" onClick={() => navigate(`/requests/${task.id}`)} style={{ padding: '14px 16px', border: '1px solid var(--border)', borderRadius: 6 }}>
+                      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 8, marginBottom: 4 }}>
+                        <div style={{ minWidth: 0 }}>
+                          <div style={{ fontWeight: 400, fontSize: 13, color: 'var(--text-primary)', marginBottom: 2 }}>{task.title}</div>
+                          <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{task.project?.name || '—'}</div>
+                        </div>
+                        <StatusBadge status={task.status} />
+                      </div>
+                      {clientCo && <div style={{ fontSize: 12, color: 'var(--accent)', marginBottom: 6 }}>{clientCo.name}</div>}
+                      <div style={{ fontSize: 11, color: 'var(--text-muted)', display: 'flex', justifyContent: 'space-between' }}>
+                        <span>{clientSub?.service_type || '—'}</span>
+                        <span>{fmtShortDate(clientSub?.deadline)}</span>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
             </div>
           ) : (
-            <div className="card" style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
-              <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', marginBottom: 16, flexShrink: 0 }}>
-                {clientTabs.map(tab => (
-                  <button key={tab.id} type="button" className={`tab-btn${activeTab === tab.id ? ' active' : ''}`} onClick={() => setActiveTab(tab.id)}>
-                    {tab.label} ({tab.tasks.length})
-                  </button>
-                ))}
-              </div>
-              {currentClientTasks.length === 0 ? (
-                <div style={{ fontSize: 13, color: 'var(--text-muted)', padding: '8px 0' }}>
-                  No {clientTabs.find(t => t.id === activeTab)?.label.toLowerCase()} requests.
-                </div>
-              ) : (
-                <div className="table-wrapper" style={{ flex: 1, minHeight: 0, overflowY: 'auto' }}>
-                  <table>
-                    <thead>
-                      <tr>
-                        <th>Project</th>
-                        <th>Name</th>
-                        <th>Revision</th>
-                        <th>Approved</th>
-                        <th>Status</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {currentClientTasks.map(task => (
-                        <tr key={task.id} onClick={() => navigate(`/requests/${task.id}`)} style={{ cursor: 'pointer' }}>
-                          <td style={{ color: 'var(--text-muted)' }}>{task.project?.name || '—'}</td>
-                          <td style={{ fontWeight: 600 }}>{task.title}</td>
-                          <td>{`R${String(task.current_version || 0).padStart(2, '0')}`}</td>
-                          <td style={{ color: 'var(--text-muted)' }}>{task.completed_at ? formatDateOnly(task.completed_at) : '—'}</td>
-                          <td><StatusBadge status={task.status} /></td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
-              )}
+            <div style={{ flex: 1, minHeight: 0, overflowY: 'auto', background: 'var(--card-bg)', borderRadius: 4, border: '1px solid var(--border)' }}>
+              <table style={{ tableLayout: 'fixed', width: '100%' }}>
+                <colgroup>
+                  <col style={{ width: '28%' }} />
+                  <col style={{ width: '25%' }} />
+                  <col style={{ width: '15%' }} />
+                  <col style={{ width: '10%' }} />
+                  <col style={{ width: '10%' }} />
+                  <col style={{ width: '12%' }} />
+                </colgroup>
+                <thead>
+                  <tr>
+                    <SortTh col="title" sortKey={clientSortKey} sortDir={clientSortDir} onSort={clientToggle}>Name</SortTh>
+                    <SortTh col="client" sortKey={clientSortKey} sortDir={clientSortDir} onSort={clientToggle}>Client</SortTh>
+                    <SortTh col="serviceType" sortKey={clientSortKey} sortDir={clientSortDir} onSort={clientToggle}>Request Type</SortTh>
+                    <SortTh col="deadline" sortKey={clientSortKey} sortDir={clientSortDir} onSort={clientToggle}>Deadline</SortTh>
+                    <SortTh col="completed_at" sortKey={clientSortKey} sortDir={clientSortDir} onSort={clientToggle}>Approved</SortTh>
+                    <SortTh col="status" sortKey={clientSortKey} sortDir={clientSortDir} onSort={clientToggle}>Status</SortTh>
+                  </tr>
+                </thead>
+                <tbody>
+                  {currentClientTasks.map(task => {
+                    const clientSub = submissions.find(s => s.task_id === task.id && s.type === 'initial');
+                    const clientCo = clientCompanies.find(c => c.id === task.project?.company_id);
+                    return (
+                    <tr key={task.id} onClick={() => navigate(`/requests/${task.id}`)} style={{ cursor: 'pointer' }}>
+                      <td style={{ fontWeight: 400 }}>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
+                          <span>{task.title}</span>
+                          <span style={{ color: 'var(--text-muted)' }}>{`R${String(task.current_version || 0).padStart(2, '0')}`}</span>
+                        </div>
+                        <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 2 }}>{task.project?.name || '—'}</div>
+                      </td>
+                      <td style={{ color: 'var(--accent)' }}>{clientCo?.name || '—'}</td>
+                      <td>{clientSub?.service_type || '—'}</td>
+                      <td>{fmtShortDate(clientSub?.deadline)}</td>
+                      <td style={{ color: 'var(--text-muted)' }}>{fmtShortDate(task.completed_at)}</td>
+                      <td><StatusBadge status={task.status} /></td>
+                    </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
             </div>
           )}
-        </>
-      )}
     </Layout>
   );
 }
diff --git a/src/pages/Settings.jsx b/src/pages/Settings.jsx
index 1ae012d..99ceb0e 100755
--- a/src/pages/Settings.jsx
+++ b/src/pages/Settings.jsx
@@ -1,90 +1,453 @@
-import { useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
 import Layout from '../components/Layout';
 import { supabase } from '../lib/supabase';
 import { useAuth } from '../context/AuthContext';
 
-export default function Settings() {
+export default function ProfilePage() {
   const { currentUser } = useAuth();
-  const [passwords, setPasswords] = useState({ next: '', confirm: '' });
-  const [passwordSaved, setPasswordSaved] = useState(false);
-  const [passwordError, setPasswordError] = useState('');
-  const [savingPw, setSavingPw] = useState(false);
+  const navigate = useNavigate();
+  const { id: profileId } = useParams();
+  const [loadingProfile, setLoadingProfile] = useState(false);
+  const [profileError, setProfileError] = useState('');
+  const [viewedProfile, setViewedProfile] = useState(null);
+  const [viewedCompanies, setViewedCompanies] = useState([]);
+  const [primaryCompanyAddress, setPrimaryCompanyAddress] = useState('');
+  const [editOpen, setEditOpen] = useState(false);
+  const [savingProfile, setSavingProfile] = useState(false);
+  const [editError, setEditError] = useState('');
+  const [editForm, setEditForm] = useState({
+    name: '',
+    title: '',
+    email: '',
+    website: '',
+    linkedin: '',
+    instagram: '',
+    twitter: '',
+  });
+  const [activityItems, setActivityItems] = useState([]);
+  const [profileStats, setProfileStats] = useState(null);
 
-  const setPw = (field) => (e) => setPasswords(p => ({ ...p, [field]: e.target.value }));
+  const isSelfView = !profileId || profileId === currentUser?.id;
 
-  const handlePasswordSave = async (e) => {
-    e.preventDefault();
-    setPasswordError('');
-    setPasswordSaved(false);
-    if (passwords.next !== passwords.confirm) { setPasswordError('New passwords do not match.'); return; }
-    if (passwords.next.length < 6) { setPasswordError('Password must be at least 6 characters.'); return; }
-    setSavingPw(true);
-    try {
-      const { error } = await supabase.auth.updateUser({ password: passwords.next });
-      if (error) { setPasswordError(error.message); return; }
-      setPasswords({ next: '', confirm: '' });
-      setPasswordSaved(true);
-      setTimeout(() => setPasswordSaved(false), 3000);
-    } finally {
-      setSavingPw(false);
+  useEffect(() => {
+    let cancelled = false;
+    async function loadViewedProfile() {
+      if (!profileId || profileId === currentUser?.id) {
+        setViewedProfile(null);
+        setViewedCompanies([]);
+        setPrimaryCompanyAddress('');
+        setProfileError('');
+        return;
+      }
+      setLoadingProfile(true);
+      setProfileError('');
+      try {
+        const [{ data: profile, error }, { data: assignedTasks }] = await Promise.all([
+          supabase
+            .from('profiles')
+            .select('*')
+            .eq('id', profileId)
+            .single(),
+          supabase
+            .from('tasks')
+            .select('id, title, deadline, status')
+            .eq('assigned_to', profileId)
+            .not('deadline', 'is', null),
+        ]);
+        if (error || !profile) {
+          setProfileError('Unable to load profile.');
+          return;
+        }
+
+        const [{ data: primaryCompany }, { data: memberships }] = await Promise.all([
+          profile.company_id
+            ? supabase.from('companies').select('id, name, address').eq('id', profile.company_id).maybeSingle()
+            : Promise.resolve({ data: null }),
+          supabase
+            .from('company_members')
+            .select('company_id, company:companies(id, name, address)')
+            .eq('profile_id', profileId),
+        ]);
+
+        if (cancelled) return;
+        const names = new Set();
+        if (primaryCompany?.name) names.add(primaryCompany.name);
+        const primaryAddress = primaryCompany?.address || '';
+        (memberships || []).forEach((row) => {
+          const n = row?.company?.name;
+          if (n) names.add(n);
+        });
+
+        setViewedProfile(profile);
+        setViewedCompanies([...names]);
+        setPrimaryCompanyAddress(primaryAddress);
+        setCalendarItems(
+          (assignedTasks || []).map((t) => ({
+            id: t.id,
+            title: t.title,
+            deadline: t.deadline,
+            isDone: ['client_approved', 'invoiced', 'paid'].includes(t.status),
+            isOverdue: !!t.deadline && !['client_approved', 'invoiced', 'paid'].includes(t.status) && new Date(t.deadline) < new Date(),
+            isHot: t.status === 'revision_requested',
+          }))
+        );
+      } catch (err) {
+        if (!cancelled) setProfileError('Unable to load profile.');
+      } finally {
+        if (!cancelled) setLoadingProfile(false);
+      }
     }
+
+    loadViewedProfile();
+    return () => {
+      cancelled = true;
+    };
+  }, [profileId, currentUser?.id]);
+
+  useEffect(() => {
+    let cancelled = false;
+    const uid = isSelfView ? currentUser?.id : profileId;
+    if (!uid) return;
+    const doneStatuses = ['client_approved', 'invoiced', 'paid'];
+    Promise.all([
+      supabase.from('tasks').select('id', { count: 'exact', head: true }).eq('assigned_to', uid).in('status', doneStatuses),
+      supabase.from('project_members').select('project_id').eq('profile_id', uid),
+      supabase.from('tasks').select('id', { count: 'exact', head: true }).eq('assigned_to', uid).eq('status', 'revision_requested'),
+      supabase.from('submissions').select('id', { count: 'exact', head: true }).eq('submitted_by', uid),
+    ]).then(([completed, members, revisions, submissions]) => {
+      if (cancelled) return;
+      const projectIds = (members.data || []).map(m => m.project_id);
+      const fetchActiveProjects = projectIds.length > 0
+        ? supabase.from('projects').select('id', { count: 'exact', head: true }).in('id', projectIds).not('status', 'in', '("completed","cancelled")')
+        : Promise.resolve({ count: 0 });
+      fetchActiveProjects.then(active => {
+        if (cancelled) return;
+        setProfileStats({
+          tasksCompleted: completed.count ?? 0,
+          activeProjects: active.count ?? 0,
+          revisionRequests: revisions.count ?? 0,
+          submissions: submissions.count ?? 0,
+        });
+      });
+    });
+    return () => { cancelled = true; };
+  }, [isSelfView, currentUser?.id, profileId]);
+
+  useEffect(() => {
+    let cancelled = false;
+    const uid = isSelfView ? currentUser?.id : profileId;
+    if (!uid) return;
+    supabase
+      .from('activity_log')
+      .select('id, created_at, action, task_id, task_title, project_name, project_id')
+      .eq('actor_id', uid)
+      .order('created_at', { ascending: false })
+      .limit(10)
+      .then(({ data }) => {
+        if (cancelled) return;
+        setActivityItems(data || []);
+      });
+    return () => { cancelled = true; };
+  }, [isSelfView, currentUser?.id, profileId]);
+
+  const profile = useMemo(
+    () => isSelfView ? { ...(currentUser || {}), ...(viewedProfile || {}) } : viewedProfile,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isSelfView, currentUser?.id, currentUser?.name, currentUser?.title, currentUser?.email, currentUser?.role, currentUser?.website, currentUser?.linkedin, currentUser?.instagram, currentUser?.twitter, viewedProfile]
+  );
+  const companyNames = useMemo(() => {
+    if (isSelfView) {
+      const names = new Set((currentUser?.companies || []).map((c) => c?.company?.name).filter(Boolean));
+      if (currentUser?.company?.name) names.add(currentUser.company.name);
+      return [...names];
+    }
+    return viewedCompanies;
+  }, [isSelfView, currentUser, viewedCompanies]);
+  const companyAddress = useMemo(() => {
+    if (isSelfView) return currentUser?.company?.address || currentUser?.companies?.[0]?.company?.address || '';
+    return primaryCompanyAddress || '';
+  }, [isSelfView, currentUser, primaryCompanyAddress]);
+
+  const memberSince = useMemo(() => {
+    const d = profile?.created_at ? new Date(profile.created_at) : null;
+    return d && !Number.isNaN(d.getTime())
+      ? d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
+      : null;
+  }, [profile?.created_at]);
+
+  const socialLinks = useMemo(() => {
+    if (!profile) return [];
+    const candidates = [
+      { key: 'website', label: 'Website' },
+      { key: 'linkedin', label: 'LinkedIn' },
+      { key: 'instagram', label: 'Instagram' },
+      { key: 'twitter', label: 'X / Twitter' },
+    ];
+    return candidates
+      .map(({ key, label }) => ({ label, value: profile[key] }))
+      .filter((item) => typeof item.value === 'string' && item.value.trim().length > 0);
+  }, [profile]);
+  const dashCardStyle = {
+    background: 'var(--card-bg)',
+    border: '1px solid var(--border)',
+    borderRadius: 8,
+    padding: '18px 21px',
+    backdropFilter: 'blur(12px)',
+    WebkitBackdropFilter: 'blur(12px)',
   };
 
-  const initials = (currentUser?.name || '')
+  const initials = (profile?.name || '')
     .split(' ')
     .map(n => n[0])
     .join('')
     .toUpperCase()
     .slice(0, 2);
 
+  useEffect(() => {
+    if (!profile) return;
+    setEditForm({
+      name: profile.name || '',
+      title: profile.title || '',
+      email: profile.email || '',
+      website: profile.website || '',
+      linkedin: profile.linkedin || '',
+      instagram: profile.instagram || '',
+      twitter: profile.twitter || '',
+    });
+    setEditError('');
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [profile?.name, profile?.title, profile?.email, profile?.website, profile?.linkedin, profile?.instagram, profile?.twitter]);
+
+  const setEditField = (field) => (e) => setEditForm((prev) => ({ ...prev, [field]: e.target.value }));
+
+  const handleProfileSave = async (e) => {
+    e.preventDefault();
+    if (!currentUser?.id) return;
+    setSavingProfile(true);
+    setEditError('');
+    try {
+      const payload = {
+        name: editForm.name.trim(),
+        title: editForm.title.trim(),
+        email: editForm.email.trim(),
+        website: editForm.website.trim(),
+        linkedin: editForm.linkedin.trim(),
+        instagram: editForm.instagram.trim(),
+        twitter: editForm.twitter.trim(),
+      };
+      const { data, error } = await supabase
+        .from('profiles')
+        .update(payload)
+        .eq('id', currentUser.id)
+        .select('*')
+        .single();
+      if (error) {
+        setEditError(error.message || 'Unable to update profile.');
+        return;
+      }
+      setViewedProfile(data || null);
+      setEditOpen(false);
+    } finally {
+      setSavingProfile(false);
+    }
+  };
+
+
+  const ACTION_LABEL = {
+    task_created: 'created', task_started: 'started', task_on_hold: 'put on hold',
+    task_resumed: 'resumed', task_submitted: 'submitted', task_approved: 'approved',
+    project_created: 'created project', request_submitted: 'submitted', revision_requested: 'requested revision on',
+  };
+
+  const ProfileActivityFeed = ({ items }) => (
+    <div style={{ ...dashCardStyle }}>
+      <div style={{ marginBottom: items.length > 0 ? 14 : 0 }}>
+        <span style={{ fontSize: 11, fontWeight: 500, color: 'var(--text-secondary)', letterSpacing: 0.8, textTransform: 'uppercase' }}>Recent Activity</span>
+      </div>
+      {items.length === 0 ? (
+        <div style={{ fontSize: 13, color: 'var(--text-muted)', marginTop: 14 }}>No recent activity</div>
+      ) : items.map((e, i) => (
+        <div key={e.id} style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: i > 0 ? 10 : 0 }}>
+          <div style={{ flex: 1, minWidth: 0, fontSize: 13, lineHeight: 1.4 }}>
+            <span style={{ color: 'var(--text-muted)' }}>{ACTION_LABEL[e.action] || e.action}</span>
+            {e.task_title && e.task_id && (
+              <><span style={{ color: 'var(--text-muted)' }}> </span>
+              <button type="button" className="dashboard-inline-link" onClick={() => navigate(`/requests/${e.task_id}`)}>{e.task_title}</button></>
+            )}
+            {e.task_title && !e.task_id && <span style={{ color: 'var(--text-primary)' }}> {e.task_title}</span>}
+          </div>
+          <span style={{ fontSize: 11, color: 'var(--text-muted)', whiteSpace: 'nowrap', flexShrink: 0 }}>
+            {new Date(e.created_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+
   return (
     <Layout>
-      <div className="page-header">
-        <div>
-          <div className="page-title">Settings</div>
-          <div className="page-subtitle">Your account info and password.</div>
-        </div>
-      </div>
-
-      <div style={{ maxWidth: 520, display: 'flex', flexDirection: 'column', gap: 24 }}>
-
-        <div className="card" style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
-          <div className="sidebar-avatar" style={{ width: 56, height: 56, fontSize: 20, flexShrink: 0 }}>
-            {initials || '?'}
-          </div>
-          <div>
-            <div style={{ fontWeight: 700, fontSize: 15 }}>{currentUser?.name || '—'}</div>
-            <div style={{ fontSize: 13, color: 'var(--text-secondary)' }}>{currentUser?.email}</div>
-            <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 2, textTransform: 'capitalize' }}>
-              {currentUser?.role}{currentUser?.company?.name ? ` · ${currentUser.company.name}` : ''}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+        {loadingProfile && <div style={dashCardStyle}>Loading profile...</div>}
+        {!loadingProfile && profileError && <div style={{ ...dashCardStyle, color: 'var(--danger)' }}>{profileError}</div>}
+        {!loadingProfile && !profileError && (
+        <div className="profile-top-grid">
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+          <div style={{ ...dashCardStyle, display: 'flex', alignItems: 'flex-start', gap: 20, position: 'relative' }}>
+            {isSelfView && (
+              <div style={{ position: 'absolute', top: 18, right: 21, bottom: 18, display: 'flex', flexDirection: 'column', alignItems: 'flex-end', justifyContent: 'space-between' }}>
+                <button
+                  type="button"
+                  className="btn btn-outline"
+                  onClick={() => setEditOpen(true)}
+                  style={{ borderRadius: 8, height: 30, padding: '0 12px', fontSize: 12 }}
+                >
+                  Edit Profile
+                </button>
+                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 10 }}>
+                  {memberSince && (
+                    <div style={{ textAlign: 'right' }}>
+                      <div style={{ fontSize: 10, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 0.6 }}>Member Since</div>
+                      <div style={{ fontSize: 12, color: 'var(--text-primary)', marginTop: 2 }}>{memberSince}</div>
+                    </div>
+                  )}
+                  {profile?.role && (
+                    <div style={{ textAlign: 'right' }}>
+                      <div style={{ fontSize: 10, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 0.6 }}>Role</div>
+                      <div style={{ fontSize: 12, color: 'var(--text-primary)', marginTop: 2, textTransform: 'capitalize' }}>{profile.role}</div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+            <div style={{ width: 120, height: 120, flexShrink: 0, borderRadius: '50%', background: 'var(--card-bg-2)', border: '2px solid #111', outline: '2px solid var(--accent)', outlineOffset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 36, color: 'var(--text-primary)', fontWeight: 500, lineHeight: 1 }}>
+              {initials || '?'}
+            </div>
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <div style={{ fontWeight: 500, fontSize: 18, color: 'var(--text-primary)' }}>{profile?.name || '—'}</div>
+              {profile?.title && <div style={{ fontSize: 13, color: 'var(--text-muted)', marginTop: 3 }}>{profile.title}</div>}
+              <div style={{ fontSize: 13, color: 'var(--text-secondary)', marginTop: 3 }}>
+                {companyNames.length > 0 ? companyNames.join(', ') : '—'}
+              </div>
+              <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
+                {companyAddress && (
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13 }}>
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}><path d="M12 22s-8-4.5-8-11.8A8 8 0 0112 2a8 8 0 018 8.2c0 7.3-8 11.8-8 11.8z"/><circle cx="12" cy="10" r="3"/></svg>
+                    <span style={{ color: 'var(--text-primary)' }}>{companyAddress}</span>
+                  </div>
+                )}
+                {profile?.email && (
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13 }}>
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}><rect x="2" y="4" width="20" height="16" rx="2"/><polyline points="2,4 12,13 22,4"/></svg>
+                    <span style={{ color: 'var(--text-primary)' }}>{profile.email}</span>
+                  </div>
+                )}
+                {profile?.linkedin && (
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13 }}>
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="var(--text-muted)" style={{ flexShrink: 0 }}><path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>
+                    <a href={profile.linkedin.startsWith('http') ? profile.linkedin : `https://${profile.linkedin}`} target="_blank" rel="noreferrer" style={{ color: 'var(--accent)', textDecoration: 'none', fontSize: 13 }}>{profile.linkedin.replace(/^https?:\/\/(www\.)?/, '')}</a>
+                  </div>
+                )}
+              </div>
             </div>
           </div>
-        </div>
-
-        <div className="card">
-          <div className="card-title">Change Password</div>
-          <form onSubmit={handlePasswordSave}>
-            <div className="form-group">
-              <label>New Password *</label>
-              <input type="password" placeholder="Min. 6 characters" value={passwords.next} onChange={setPw('next')} required />
+          {profileStats && (
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
+              {[
+                { label: 'Tasks Completed',  value: profileStats.tasksCompleted,   iconBg: 'rgba(74,222,128,0.15)',  iconColor: '#4ade80', iconPath: '<polyline points="4,13 9,18 20,7"/>' },
+                { label: 'Active Projects',  value: profileStats.activeProjects,   iconBg: 'rgba(245,165,35,0.15)', iconColor: '#F5A523', iconPath: '<path d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V7z" fill="none"/>' },
+                { label: 'Revision Requests',value: profileStats.revisionRequests, iconBg: 'rgba(239,68,68,0.15)',  iconColor: '#f87171', iconPath: '<path d="M4 12a8 8 0 018-8v0a8 8 0 018 8" fill="none" stroke-linecap="round"/><polyline points="18,8 20,12 16,12" fill="none"/>' },
+                { label: 'Submissions',      value: profileStats.submissions,      iconBg: 'rgba(96,165,250,0.15)', iconColor: '#60a5fa', iconPath: '<line x1="12" y1="19" x2="12" y2="5" stroke-linecap="round"/><polyline points="5,12 12,5 19,12" fill="none"/>' },
+              ].map(({ label, value, iconBg, iconColor, iconPath }) => (
+                <div key={label} style={{ ...dashCardStyle, display: 'flex', alignItems: 'stretch', gap: 21, minHeight: 120 }}>
+                  <div style={{ flexShrink: 0, display: 'flex', flexDirection: 'column', flex: 1 }}>
+                    <div style={{ fontSize: 11, fontWeight: 500, color: 'var(--text-secondary)', letterSpacing: 0.8, textTransform: 'uppercase', marginBottom: 5 }}>{label}</div>
+                    <div style={{ flex: 1, display: 'flex', alignItems: 'center' }}>
+                      <div style={{ fontSize: 30, fontWeight: 400, color: 'var(--text-primary)', letterSpacing: -0.5, lineHeight: 1.1 }}>{value}</div>
+                    </div>
+                  </div>
+                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', justifyContent: 'space-between', flexShrink: 0 }}>
+                    <div style={{ width: 27, height: 27, borderRadius: '50%', background: iconBg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke={iconColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" dangerouslySetInnerHTML={{ __html: iconPath }} />
+                    </div>
+                  </div>
+                </div>
+              ))}
             </div>
-            <div className="form-group">
-              <label>Confirm New Password *</label>
-              <input type="password" placeholder="Repeat new password" value={passwords.confirm} onChange={setPw('confirm')} required />
-            </div>
-            {passwordError && (
-              <div style={{ fontSize: 13, color: 'var(--danger)', marginBottom: 12 }}>⚠ {passwordError}</div>
-            )}
-            {passwordSaved && (
-              <div className="notification notification-success" style={{ marginBottom: 12 }}>✓ Password updated.</div>
-            )}
-            <button type="submit" className="btn btn-primary" disabled={savingPw}>
-              {savingPw ? 'Updating...' : 'Update Password'}
-            </button>
-          </form>
+          )}
+          </div>
+          <ProfileActivityFeed items={activityItems} />
         </div>
-
+        )}
       </div>
+      {isSelfView && editOpen && (
+        <div
+          style={{
+            position: 'fixed',
+            inset: 0,
+            zIndex: 1200,
+            background: 'rgba(0,0,0,0.58)',
+            backdropFilter: 'blur(6px)',
+            WebkitBackdropFilter: 'blur(6px)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: 24,
+          }}
+          onClick={() => { if (!savingProfile) setEditOpen(false); }}
+        >
+          <div
+            style={{
+              ...dashCardStyle,
+              width: 'min(620px, 100%)',
+              maxHeight: 'calc(100vh - 48px)',
+              overflowY: 'auto',
+            }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div style={{ fontSize: 18, fontWeight: 500, marginBottom: 14, color: 'var(--text-primary)' }}>Edit Profile</div>
+            <form onSubmit={handleProfileSave}>
+              <div className="form-group">
+                <label>Name</label>
+                <input value={editForm.name} onChange={setEditField('name')} />
+              </div>
+              <div className="form-group">
+                <label>Title</label>
+                <input value={editForm.title} onChange={setEditField('title')} placeholder="e.g. Creative Director" />
+              </div>
+              <div className="form-group">
+                <label>Email</label>
+                <input type="email" value={editForm.email} onChange={setEditField('email')} />
+              </div>
+              <div className="form-group">
+                <label>Website</label>
+                <input value={editForm.website} onChange={setEditField('website')} placeholder="example.com" />
+              </div>
+              <div className="form-group">
+                <label>LinkedIn</label>
+                <input value={editForm.linkedin} onChange={setEditField('linkedin')} placeholder="linkedin.com/in/username" />
+              </div>
+              <div className="form-group">
+                <label>Instagram</label>
+                <input value={editForm.instagram} onChange={setEditField('instagram')} placeholder="instagram.com/username" />
+              </div>
+              <div className="form-group">
+                <label>X / Twitter</label>
+                <input value={editForm.twitter} onChange={setEditField('twitter')} placeholder="x.com/username" />
+              </div>
+              {editError && <div style={{ fontSize: 13, color: 'var(--danger)', marginBottom: 12 }}>{editError}</div>}
+              <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 6 }}>
+                <button type="button" className="btn btn-outline" onClick={() => setEditOpen(false)} disabled={savingProfile}>
+                  Cancel
+                </button>
+                <button type="submit" className="btn btn-primary" disabled={savingProfile}>
+                  {savingProfile ? 'Saving...' : 'Save Changes'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
     </Layout>
   );
 }
diff --git a/src/pages/SurveyMaker.jsx b/src/pages/SurveyMaker.jsx
index a13d0d9..07e9d0b 100644
--- a/src/pages/SurveyMaker.jsx
+++ b/src/pages/SurveyMaker.jsx
@@ -154,9 +154,9 @@ function SignCard({ sign, index, onChange, onPhoto, onRemove, canRemove }) {
   const contextInputRef3 = useRef(null);
 
   return (
-    <div style={{ border: '1px solid var(--border)', borderRadius: 10, padding: 16, display: 'grid', gap: 14 }}>
+    <div style={{ border: '1px solid var(--border)', borderRadius: 4, padding: 16, display: 'grid', gap: 14 }}>
       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
-        <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-primary)' }}>
+        <div style={{ fontSize: 14, fontWeight: 400, color: 'var(--text-primary)' }}>
           {sign.signName || `Sign ${index + 1}`}
         </div>
         {canRemove && (
@@ -276,7 +276,7 @@ function PhotoPicker({ inputRef, preview, label, onPick, small = false }) {
         onDrop={handleDrop}
         style={{
           border: `2px dashed ${dragging ? 'var(--accent)' : 'var(--border)'}`,
-          borderRadius: 8,
+          borderRadius: 4,
           minHeight: small ? 110 : 120,
           cursor: 'pointer',
           background: dragging ? 'rgba(245,165,35,0.05)' : 'var(--card-bg-2)',
@@ -289,7 +289,7 @@ function PhotoPicker({ inputRef, preview, label, onPick, small = false }) {
         }}
       >
         {preview ? (
-          <img src={preview} alt={label} style={{ maxHeight: small ? 100 : 150, maxWidth: '100%', objectFit: 'contain', borderRadius: 6 }} />
+          <img src={preview} alt={label} style={{ maxHeight: small ? 100 : 150, maxWidth: '100%', objectFit: 'contain', borderRadius: 4 }} />
         ) : (
           <div style={{ fontSize: 13, color: 'var(--text-muted)', textAlign: 'center' }}>
             {dragging ? 'Drop photo here' : label}
diff --git a/src/pages/client/MyInvoices.jsx b/src/pages/client/MyInvoices.jsx
index faaf101..6ba6b11 100644
--- a/src/pages/client/MyInvoices.jsx
+++ b/src/pages/client/MyInvoices.jsx
@@ -1,4 +1,5 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
 import Layout from '../../components/Layout';
 import LoadingButton from '../../components/LoadingButton';
 import SortTh from '../../components/SortTh';
@@ -49,6 +50,15 @@ export default function MyInvoices() {
   const paid = visible.filter(i => i.status === 'paid').reduce((s, i) => s + Number(i.total), 0);
   const overdueCount = visible.filter(inv => inv.status !== 'paid' && new Date(inv.due_date) < new Date()).length;
 
+  const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+  const chartYear = new Date().getFullYear();
+  const chartData = useMemo(() => MONTHS.map((month, mi) => {
+    const paidAmt = visible.filter(i => i.status === 'paid' && new Date(i.invoice_date).getFullYear() === chartYear && new Date(i.invoice_date).getMonth() === mi).reduce((s, i) => s + Number(i.total || 0), 0);
+    const outAmt = visible.filter(i => i.status === 'sent' && new Date(i.invoice_date).getFullYear() === chartYear && new Date(i.invoice_date).getMonth() === mi).reduce((s, i) => s + Number(i.total || 0), 0);
+    return { month, Paid: +paidAmt.toFixed(2), Outstanding: +outAmt.toFixed(2) };
+  }), [visible, chartYear]);
+  const hasChartData = chartData.some(d => d.Paid > 0 || d.Outstanding > 0);
+
   const sorted = sort(visible, (inv, key) => {
     if (key === 'invoice_date' || key === 'due_date') return new Date(inv[key] || 0).getTime();
     if (key === 'total') return Number(inv.total || 0);
@@ -66,20 +76,26 @@ export default function MyInvoices() {
         </div>
       </div>
 
-      <div className="stats-grid" style={{ marginBottom: 24 }}>
-        <div className="stat-card stat-card-highlight">
-          <div className="stat-value">${outstanding.toFixed(2)}</div>
-          <div className="stat-label">Outstanding</div>
+
+      {hasChartData && (
+        <div style={{ background: 'var(--card-bg)', border: '1px solid var(--border)', borderRadius: 4, padding: '16px 16px 8px', marginBottom: 18 }}>
+          <ResponsiveContainer width="100%" height={180}>
+            <AreaChart data={chartData} margin={{ top: 4, right: 8, left: 0, bottom: 0 }}>
+              <defs>
+                <linearGradient id="gradPaidC" x1="0" y1="0" x2="0" y2="1"><stop offset="5%" stopColor="#4ade80" stopOpacity={0.25}/><stop offset="95%" stopColor="#4ade80" stopOpacity={0}/></linearGradient>
+                <linearGradient id="gradOutC" x1="0" y1="0" x2="0" y2="1"><stop offset="5%" stopColor="#60a5fa" stopOpacity={0.2}/><stop offset="95%" stopColor="#60a5fa" stopOpacity={0}/></linearGradient>
+              </defs>
+              <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" vertical={false} />
+              <XAxis dataKey="month" tick={{ fontSize: 11, fill: 'var(--text-muted)' }} axisLine={false} tickLine={false} />
+              <YAxis tick={{ fontSize: 11, fill: 'var(--text-muted)' }} axisLine={false} tickLine={false} tickFormatter={v => `$${v >= 1000 ? (v/1000).toFixed(0)+'k' : v}`} width={45} />
+              <Tooltip formatter={(v) => [`$${Number(v).toLocaleString('en-US', { minimumFractionDigits: 2 })}`, undefined]} contentStyle={{ background: 'var(--card-bg)', border: '1px solid var(--border)', borderRadius: 4, fontSize: 12 }} />
+              <Legend wrapperStyle={{ fontSize: 11, paddingTop: 8 }} />
+              <Area type="monotone" dataKey="Paid" stroke="#4ade80" strokeWidth={2} fill="url(#gradPaidC)" dot={false} activeDot={{ r: 4 }} />
+              <Area type="monotone" dataKey="Outstanding" stroke="#60a5fa" strokeWidth={2} fill="url(#gradOutC)" dot={false} activeDot={{ r: 4 }} />
+            </AreaChart>
+          </ResponsiveContainer>
         </div>
-        <div className="stat-card">
-          <div className="stat-value">${paid.toFixed(2)}</div>
-          <div className="stat-label">Paid</div>
-        </div>
-        <div className="stat-card">
-          <div className="stat-value" style={{ color: overdueCount > 0 ? 'var(--danger)' : undefined }}>{overdueCount}</div>
-          <div className="stat-label">Overdue</div>
-        </div>
-      </div>
+      )}
 
       {companies.length > 1 && (
         <div style={{ marginBottom: 16 }}>
@@ -115,14 +131,14 @@ export default function MyInvoices() {
                   const isOverdue = inv.status !== 'paid' && new Date(inv.due_date) < new Date();
                   return (
                     <tr key={inv.id}>
-                      <td style={{ fontWeight: 600 }}>{inv.invoice_number}</td>
+                      <td style={{ fontWeight: 400 }}>{inv.invoice_number}</td>
                       <td style={{ color: 'var(--text-muted)' }}>{new Date(inv.invoice_date).toLocaleDateString()}</td>
                       <td style={{ color: isOverdue ? 'var(--danger)' : 'var(--text-muted)' }}>
                         {inv.due_date ? new Date(inv.due_date).toLocaleDateString() : '—'}
                         {isOverdue && <span style={{ marginLeft: 6, fontSize: 11 }}>Overdue</span>}
                       </td>
                       <td><span className={`badge badge-${statusColor[inv.status]}`} style={{ textTransform: 'capitalize' }}>{inv.status}</span></td>
-                      <td style={{ fontWeight: 700, color: 'var(--accent)' }}>${Number(inv.total).toFixed(2)}</td>
+                      <td style={{ fontWeight: 400, color: 'var(--accent)' }}>${Number(inv.total).toFixed(2)}</td>
                       <td>
                         <LoadingButton
                           className="btn btn-outline btn-sm"
diff --git a/src/pages/client/NewProject.jsx b/src/pages/client/NewProject.jsx
index 1d622d2..4d70982 100644
--- a/src/pages/client/NewProject.jsx
+++ b/src/pages/client/NewProject.jsx
@@ -20,7 +20,7 @@ export default function NewProject() {
     return (
       <Layout>
         <div style={{ maxWidth: 480, margin: '0 auto', textAlign: 'center', paddingTop: 48 }}>
-          <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 8 }}>Account Not Yet Active</h2>
+          <h2 style={{ fontSize: 20, fontWeight: 400, marginBottom: 8 }}>Account Not Yet Active</h2>
           <p style={{ color: 'var(--text-secondary)', fontSize: 14 }}>
             Your account hasn't been linked to a company yet. Please contact the Fourge team to get set up.
           </p>
diff --git a/src/pages/client/NewRequest.jsx b/src/pages/client/NewRequest.jsx
index d19848f..6b297a4 100755
--- a/src/pages/client/NewRequest.jsx
+++ b/src/pages/client/NewRequest.jsx
@@ -7,6 +7,7 @@ import { sendEmail } from '../../lib/email';
 import { useAuth } from '../../context/AuthContext';
 import { createInitialSubmissionForRequest, createTaskForRequest, findOrCreateProject } from '../../lib/requestSubmission';
 import { uploadFilesToRequestInfo } from '../../lib/filebrowserFolders';
+import { logActivity } from '../../lib/activityLog';
 
 export default function NewRequest() {
   const { currentUser } = useAuth();
@@ -29,7 +30,7 @@ export default function NewRequest() {
       <Layout>
         <div style={{ maxWidth: 480, margin: '0 auto', textAlign: 'center', paddingTop: 48 }}>
           <div style={{ fontSize: 48, marginBottom: 16 }}>⚠️</div>
-          <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 8 }}>Account Not Yet Active</h2>
+          <h2 style={{ fontSize: 20, fontWeight: 400, marginBottom: 8 }}>Account Not Yet Active</h2>
           <p style={{ color: 'var(--text-secondary)', fontSize: 14 }}>
             Your account hasn't been linked to a company yet. Please contact the Fourge team to get set up.
           </p>
@@ -43,10 +44,10 @@ export default function NewRequest() {
       <Layout>
         <div style={{ maxWidth: 480, margin: '0 auto', textAlign: 'center', paddingTop: 48 }}>
           <div style={{ fontSize: 48, marginBottom: 16 }}>✅</div>
-          <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 8 }}>Request Submitted!</h2>
+          <h2 style={{ fontSize: 20, fontWeight: 400, marginBottom: 8 }}>Request Submitted!</h2>
           <p style={{ color: 'var(--text-secondary)', marginBottom: 24, fontSize: 14 }}>
-            Thanks, {currentUser?.name?.split(' ')[0]}! We've received your request for <strong>{lastServiceType}</strong>
-            {lastProject && <> under <strong>{lastProject}</strong></>}.
+            Thanks, {currentUser?.name?.split(' ')[0]}! We've received your request for <span style={{ color: "var(--text-primary)" }}>{lastServiceType}</span>
+            {lastProject && <> under <span style={{ color: "var(--text-primary)" }}>{lastProject}</span></>}.
             Our team will review it and update you shortly.
           </p>
           <div className="action-buttons" style={{ justifyContent: 'center' }}>
@@ -75,6 +76,8 @@ export default function NewRequest() {
       });
       if (!task) { setSaving(false); return; }
 
+      logActivity({ actorId: currentUser.id, actorName: currentUser.name, action: 'request_submitted', taskId: task.id, taskTitle: formData.title.trim(), projectId: resolvedProject.id, projectName: resolvedProject.name }).catch(() => {});
+
       const { submission } = await createInitialSubmissionForRequest({
         taskId: task.id,
         requestKey,
diff --git a/src/pages/external/MyInvoiceCreate.jsx b/src/pages/external/MyInvoiceCreate.jsx
index bc72eb4..09059c1 100644
--- a/src/pages/external/MyInvoiceCreate.jsx
+++ b/src/pages/external/MyInvoiceCreate.jsx
@@ -4,6 +4,7 @@ import Layout from '../../components/Layout';
 import LoadingButton from '../../components/LoadingButton';
 import { supabase } from '../../lib/supabase';
 import { useAuth } from '../../context/AuthContext';
+import { sendEmail } from '../../lib/email';
 
 const INVOICE_TODAY = new Date().toISOString().split('T')[0];
 
@@ -62,14 +63,15 @@ export default function MyInvoiceCreate() {
 
   const addTask = (task) => {
     if (addedTaskIds.has(task.id)) return;
-    const isRevision = (task.current_version || 0) > 0;
-    const desc = task.project?.name ? `${task.project.name} • ${task.title}` : task.title;
-    const price = isRevision ? 30 : rate;
+    const version = task.current_version || 0;
+    const baseDesc = task.project?.name ? `${task.project.name} • ${task.title}` : task.title;
+    const toAdd = [newItem(`${baseDesc} – R00`, rate, 1, task.id, false)];
+    for (let v = 1; v <= version; v++) {
+      toAdd.push(newItem(`${baseDesc} – R${String(v).padStart(2, '0')}`, 30, 1, task.id, true));
+    }
     setItems(prev => {
-      if (prev.length === 1 && !prev[0].description && !prev[0].unit_price) {
-        return [newItem(desc, price, 1, task.id, isRevision)];
-      }
-      return [...prev, newItem(desc, price, 1, task.id, isRevision)];
+      if (prev.length === 1 && !prev[0].description && !prev[0].unit_price) return toAdd;
+      return [...prev, ...toAdd];
     });
   };
 
@@ -123,6 +125,14 @@ export default function MyInvoiceCreate() {
       );
       if (itemsErr) throw itemsErr;
 
+      const total = valid.reduce((s, i) => s + (Number(i.unit_price) || 0) * (Number(i.quantity) || 1), 0);
+      sendEmail('subcontractor_invoice_submitted', 'hello@fourgebranding.com', {
+        subName: currentUser.name,
+        invoiceNumber: inv.invoice_number,
+        total: total.toFixed(2),
+        invoiceId: inv.id,
+      }).catch(err => console.error('Sub invoice notification failed:', err));
+
       navigate(`/my-invoices-sub/${inv.id}`);
     } catch (err) {
       setError(err.message);
@@ -164,17 +174,20 @@ export default function MyInvoiceCreate() {
         ) : (
           <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
             {completedTasks.map(task => {
-              const isRevision = (task.current_version || 0) > 0;
-              const price = isRevision ? 30 : rate;
               const alreadyAdded = addedTaskIds.has(task.id);
               return (
-                <div key={task.id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--bg)', borderRadius: 6, border: '1px solid var(--border)' }}>
+                <div key={task.id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--bg)', borderRadius: 4, border: '1px solid var(--border)' }}>
                   <div>
-                    <div style={{ fontSize: 13, fontWeight: 600 }}>
+                    <div style={{ fontSize: 13, fontWeight: 400 }}>
                       {task.project?.name ? `${task.project.name} • ` : ''}{task.title}
                     </div>
                     <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>
-                      {isRevision ? 'Revision' : 'New'} · ${price.toFixed(2)}{isRevision ? '/hr' : ''}
+                      {(() => {
+                        const v = task.current_version || 0;
+                        const parts = [`R00 New Book $${rate.toFixed(2)}`];
+                        if (v > 0) parts.push(`+ ${v} Revision${v > 1 ? 's' : ''} @ $30ea`);
+                        return parts.join(' · ');
+                      })()}
                     </div>
                   </div>
                   <button
@@ -198,7 +211,7 @@ export default function MyInvoiceCreate() {
 
         <div style={{ display: 'grid', gridTemplateColumns: '20px 90px 1fr 80px 120px 120px 40px', gap: 8, marginBottom: 8 }}>
           {['', 'Type', 'Description', 'Qty / Hrs', 'Rate', 'Total', ''].map((h, i) => (
-            <div key={i} style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', textAlign: i > 3 ? 'right' : 'left' }}>{h}</div>
+            <div key={i} style={{ fontSize: 11, fontWeight: 400, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', textAlign: i > 3 ? 'right' : 'left' }}>{h}</div>
           ))}
         </div>
 
@@ -242,7 +255,7 @@ export default function MyInvoiceCreate() {
                 onChange={e => updateItem(item.id, 'unit_price', e.target.value)}
                 style={{ margin: 0, textAlign: 'right' }}
               />
-              <div style={{ textAlign: 'right', fontSize: 14, fontWeight: 600, color: 'var(--text-primary)', paddingRight: 4 }}>
+              <div style={{ textAlign: 'right', fontSize: 14, fontWeight: 400, color: 'var(--text-primary)', paddingRight: 4 }}>
                 ${((Number(item.quantity) || 0) * (Number(item.unit_price) || 0)).toFixed(2)}
               </div>
               <button onClick={() => removeItem(item.id)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--danger)', fontSize: 16, padding: 4 }}>✕</button>
@@ -256,8 +269,8 @@ export default function MyInvoiceCreate() {
 
         <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 20, paddingTop: 16, borderTop: '1px solid var(--border)' }}>
           <div style={{ textAlign: 'right' }}>
-            <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', marginBottom: 4 }}>Total</div>
-            <div style={{ fontSize: 26, fontWeight: 700, color: 'var(--accent)' }}>${total.toFixed(2)}</div>
+            <div style={{ fontSize: 11, fontWeight: 400, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', marginBottom: 4 }}>Total</div>
+            <div style={{ fontSize: 26, fontWeight: 400, color: 'var(--accent)' }}>${total.toFixed(2)}</div>
           </div>
         </div>
       </div>
diff --git a/src/pages/external/MyInvoiceDetail.jsx b/src/pages/external/MyInvoiceDetail.jsx
index 00aa245..5c915ae 100644
--- a/src/pages/external/MyInvoiceDetail.jsx
+++ b/src/pages/external/MyInvoiceDetail.jsx
@@ -2,9 +2,11 @@ import { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import Layout from '../../components/Layout';
 import LoadingButton from '../../components/LoadingButton';
+import SortTh from '../../components/SortTh';
 import { supabase } from '../../lib/supabase';
 import { useAuth } from '../../context/AuthContext';
 import { generateSubcontractorPOPDF } from '../../lib/invoice';
+import { useSortable } from '../../hooks/useSortable';
 
 const STATUS_COLOR = { draft: 'not_started', submitted: 'in_progress', paid: 'client_approved' };
 const STATUS_LABEL = { draft: 'Draft', submitted: 'Submitted', paid: 'Paid' };
@@ -28,6 +30,7 @@ export default function MyInvoiceDetail() {
   const [deleting, setDeleting] = useState(false);
   const [downloading, setDownloading] = useState(false);
   const [error, setError] = useState('');
+  const { sortKey, sortDir, toggle, sort } = useSortable('description');
 
   useEffect(() => {
     async function load() {
@@ -93,6 +96,14 @@ export default function MyInvoiceDetail() {
 
   const total = invoiceTotal(invoice.items);
   const sortedItems = [...(invoice.items || [])].sort((a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0));
+  const tableItems = sort(sortedItems, (item, key) => {
+    if (key === 'type') return item.task_id ? 'Task' : 'Other';
+    if (key === 'description') return item.description || '';
+    if (key === 'quantity') return Number(item.quantity || 0);
+    if (key === 'unit_price') return Number(item.unit_price || 0);
+    if (key === 'line_total') return Number(item.unit_price || 0) * Number(item.quantity || 1);
+    return '';
+  });
 
   return (
     <Layout>
@@ -126,7 +137,7 @@ export default function MyInvoiceDetail() {
       <div className="grid-2" style={{ marginBottom: 24 }}>
         <div className="card">
           <div className="card-title">From</div>
-          <div style={{ fontSize: 15, fontWeight: 700 }}>{currentUser?.name || 'Subcontractor'}</div>
+          <div style={{ fontSize: 15, fontWeight: 400 }}>{currentUser?.name || 'Subcontractor'}</div>
           <div style={{ fontSize: 13, color: 'var(--text-muted)', marginTop: 4 }}>{currentUser?.email}</div>
         </div>
 
@@ -135,7 +146,7 @@ export default function MyInvoiceDetail() {
           <div className="detail-grid" style={{ marginBottom: 0 }}>
             <div className="detail-item">
               <label>Invoice #</label>
-              <p style={{ fontWeight: 700 }}>{invoice.invoice_number}</p>
+              <p style={{ fontWeight: 400 }}>{invoice.invoice_number}</p>
             </div>
             <div className="detail-item">
               <label>Created</label>
@@ -161,12 +172,12 @@ export default function MyInvoiceDetail() {
             )}
             <div className="detail-item">
               <label>Total</label>
-              <p style={{ fontSize: 18, fontWeight: 700, color: 'var(--accent)' }}>{fmt(total)}</p>
+              <p style={{ fontSize: 18, fontWeight: 400, color: 'var(--accent)' }}>{fmt(total)}</p>
             </div>
             {invoice.paid_at && (
               <div className="detail-item">
                 <label>Paid On</label>
-                <p style={{ color: 'var(--success, #16a34a)', fontWeight: 600 }}>
+                <p style={{ color: 'var(--success, #16a34a)', fontWeight: 400 }}>
                   {new Date(invoice.paid_at).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}
                 </p>
               </div>
@@ -181,15 +192,15 @@ export default function MyInvoiceDetail() {
           <table>
             <thead>
               <tr>
-                <th style={{ width: 100 }}>Type</th>
-                <th>Description</th>
-                <th style={{ textAlign: 'center' }}>Qty / Hrs</th>
-                <th style={{ textAlign: 'right' }}>Rate</th>
-                <th style={{ textAlign: 'right' }}>Total</th>
+                <SortTh col="type" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ width: 100 }}>Type</SortTh>
+                <SortTh col="description" sortKey={sortKey} sortDir={sortDir} onSort={toggle}>Description</SortTh>
+                <SortTh col="quantity" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ textAlign: 'center' }}>Qty / Hrs</SortTh>
+                <SortTh col="unit_price" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ textAlign: 'right' }}>Rate</SortTh>
+                <SortTh col="line_total" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ textAlign: 'right' }}>Total</SortTh>
               </tr>
             </thead>
             <tbody>
-              {sortedItems.map(item => (
+              {tableItems.map(item => (
                 <tr key={item.id}>
                   <td>
                     <span className={`badge ${item.task_id ? 'badge-in_progress' : 'badge-initial'}`}>
@@ -199,7 +210,7 @@ export default function MyInvoiceDetail() {
                   <td>{item.description}</td>
                   <td style={{ textAlign: 'center' }}>{item.quantity}</td>
                   <td style={{ textAlign: 'right' }}>{fmt(item.unit_price)}</td>
-                  <td style={{ textAlign: 'right', fontWeight: 700 }}>
+                  <td style={{ textAlign: 'right', fontWeight: 400 }}>
                     {fmt(Number(item.unit_price) * Number(item.quantity || 1))}
                   </td>
                 </tr>
@@ -209,8 +220,8 @@ export default function MyInvoiceDetail() {
         </div>
         <div style={{ display: 'flex', justifyContent: 'flex-end', padding: '16px 16px 0', borderTop: '1px solid var(--border)', marginTop: 8 }}>
           <div style={{ textAlign: 'right' }}>
-            <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', marginBottom: 4 }}>Total</div>
-            <div style={{ fontSize: 24, fontWeight: 700, color: 'var(--accent)' }}>{fmt(total)}</div>
+            <div style={{ fontSize: 11, fontWeight: 400, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', marginBottom: 4 }}>Total</div>
+            <div style={{ fontSize: 24, fontWeight: 400, color: 'var(--accent)' }}>{fmt(total)}</div>
           </div>
         </div>
       </div>
diff --git a/src/pages/external/MyInvoices.jsx b/src/pages/external/MyInvoices.jsx
index a37f722..b37a664 100644
--- a/src/pages/external/MyInvoices.jsx
+++ b/src/pages/external/MyInvoices.jsx
@@ -1,4 +1,5 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
 import { useNavigate } from 'react-router-dom';
 import Layout from '../../components/Layout';
 import StatusBadge from '../../components/StatusBadge';
@@ -42,6 +43,17 @@ export default function MyInvoices() {
       });
   }, [currentUser?.id]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+  const chartYear = new Date().getFullYear();
+  const chartData = useMemo(() => MONTHS.map((month, mi) => {
+    const submittedAmt = invoices.filter(i => i.status === 'submitted' && new Date(i.created_at).getFullYear() === chartYear && new Date(i.created_at).getMonth() === mi).reduce((s, i) => s + invoiceTotal(i.items), 0);
+    const paidAmt = invoices.filter(i => i.status === 'paid' && new Date(i.created_at).getFullYear() === chartYear && new Date(i.created_at).getMonth() === mi).reduce((s, i) => s + invoiceTotal(i.items), 0);
+    return { month, Submitted: +submittedAmt.toFixed(2), Paid: +paidAmt.toFixed(2) };
+  }), [invoices, chartYear]);
+  const hasChartData = chartData.some(d => d.Submitted > 0 || d.Paid > 0);
+  const totalPaid = invoices.filter(i => i.status === 'paid').reduce((s, i) => s + invoiceTotal(i.items), 0);
+  const totalPending = invoices.filter(i => i.status === 'submitted').reduce((s, i) => s + invoiceTotal(i.items), 0);
+
   return (
     <Layout>
       <div className="page-header">
@@ -57,6 +69,35 @@ export default function MyInvoices() {
 
       {error && <div className="notification notification-info" style={{ marginBottom: 16 }}>{error}</div>}
 
+      {!loading && invoices.length > 0 && (
+        <>
+          <div className="stat-bar" style={{ marginBottom: 18 }}>
+            <div className="stat-bar-item"><div className="stat-bar-header"><div className="stat-bar-label">Total Paid</div><div className="stat-bar-dot" style={{ background: '#4ade80' }} /></div><div className="stat-bar-value">{fmt(totalPaid)}</div></div>
+            <div className="stat-bar-item"><div className="stat-bar-header"><div className="stat-bar-label">Pending Payment</div><div className="stat-bar-dot" style={{ background: '#F5A523' }} /></div><div className="stat-bar-value">{fmt(totalPending)}</div></div>
+            <div className="stat-bar-item"><div className="stat-bar-header"><div className="stat-bar-label">Total Invoices</div><div className="stat-bar-dot" style={{ background: '#60a5fa' }} /></div><div className="stat-bar-value">{invoices.length}</div></div>
+          </div>
+          {hasChartData && (
+            <div style={{ background: 'var(--card-bg)', border: '1px solid var(--border)', borderRadius: 4, padding: '16px 16px 8px', marginBottom: 18 }}>
+              <ResponsiveContainer width="100%" height={180}>
+                <AreaChart data={chartData} margin={{ top: 4, right: 8, left: 0, bottom: 0 }}>
+                  <defs>
+                    <linearGradient id="gradSubAmt" x1="0" y1="0" x2="0" y2="1"><stop offset="5%" stopColor="#F5A523" stopOpacity={0.25}/><stop offset="95%" stopColor="#F5A523" stopOpacity={0}/></linearGradient>
+                    <linearGradient id="gradSubPaid" x1="0" y1="0" x2="0" y2="1"><stop offset="5%" stopColor="#4ade80" stopOpacity={0.25}/><stop offset="95%" stopColor="#4ade80" stopOpacity={0}/></linearGradient>
+                  </defs>
+                  <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" vertical={false} />
+                  <XAxis dataKey="month" tick={{ fontSize: 11, fill: 'var(--text-muted)' }} axisLine={false} tickLine={false} />
+                  <YAxis tick={{ fontSize: 11, fill: 'var(--text-muted)' }} axisLine={false} tickLine={false} tickFormatter={v => `$${v >= 1000 ? (v/1000).toFixed(0)+'k' : v}`} width={45} />
+                  <Tooltip formatter={(v) => [`$${Number(v).toLocaleString('en-US', { minimumFractionDigits: 2 })}`, undefined]} contentStyle={{ background: 'var(--card-bg)', border: '1px solid var(--border)', borderRadius: 4, fontSize: 12 }} />
+                  <Legend wrapperStyle={{ fontSize: 11, paddingTop: 8 }} />
+                  <Area type="monotone" dataKey="Submitted" stroke="#F5A523" strokeWidth={2} fill="url(#gradSubAmt)" dot={false} activeDot={{ r: 4 }} />
+                  <Area type="monotone" dataKey="Paid" stroke="#4ade80" strokeWidth={2} fill="url(#gradSubPaid)" dot={false} activeDot={{ r: 4 }} />
+                </AreaChart>
+              </ResponsiveContainer>
+            </div>
+          )}
+        </>
+      )}
+
       {loading ? (
         <div className="empty-state">Loading invoices...</div>
       ) : invoices.length === 0 ? (
@@ -85,10 +126,10 @@ export default function MyInvoices() {
                   const total = invoiceTotal(inv.items);
                   return (
                     <tr key={inv.id} style={{ cursor: 'pointer' }} onClick={() => navigate(`/my-invoices-sub/${inv.id}`)}>
-                      <td style={{ fontWeight: 600 }}>{inv.invoice_number}</td>
+                      <td style={{ fontWeight: 400 }}>{inv.invoice_number}</td>
                       <td style={{ color: 'var(--text-muted)' }}>{inv.submitted_at ? new Date(inv.submitted_at).toLocaleDateString() : '—'}</td>
                       <td><StatusBadge status={STATUS_BADGE[inv.status]} label={STATUS_LABEL[inv.status]} /></td>
-                      <td style={{ textAlign: 'right', fontWeight: 700, color: 'var(--accent)' }}>{fmt(total)}</td>
+                      <td style={{ textAlign: 'right', fontWeight: 400, color: 'var(--accent)' }}>{fmt(total)}</td>
                     </tr>
                   );
                 })}
diff --git a/src/pages/external/MyPurchaseOrders.jsx b/src/pages/external/MyPurchaseOrders.jsx
index 686debf..edda1b3 100644
--- a/src/pages/external/MyPurchaseOrders.jsx
+++ b/src/pages/external/MyPurchaseOrders.jsx
@@ -108,7 +108,7 @@ export default function MyPurchaseOrders() {
             <div key={po.id} className="card">
               <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16, marginBottom: 12 }}>
                 <div>
-                  <div style={{ fontSize: 12, color: 'var(--text-muted)', fontWeight: 700, textTransform: 'uppercase' }}>
+                  <div style={{ fontSize: 12, color: 'var(--text-muted)', fontWeight: 400, textTransform: 'uppercase' }}>
                     {po.po_number || 'Purchase Order'}
                   </div>
                   <div className="card-title" style={{ marginBottom: 4 }}>{po.project?.name || 'Subcontractor Work'}</div>
@@ -124,25 +124,25 @@ export default function MyPurchaseOrders() {
 
               <div style={{ display: 'grid', gap: 10 }}>
                 <div>
-                  <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-muted)', textTransform: 'uppercase', marginBottom: 4 }}>Scope</div>
+                  <div style={{ fontSize: 11, fontWeight: 400, color: 'var(--text-muted)', textTransform: 'uppercase', marginBottom: 4 }}>Scope</div>
                   <div style={{ whiteSpace: 'pre-wrap' }}>{po.description}</div>
                 </div>
                 {po.items?.length > 0 && (
                   <div>
-                    <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-muted)', textTransform: 'uppercase', marginBottom: 4 }}>Line Items</div>
-                    <div style={{ border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden' }}>
+                    <div style={{ fontSize: 11, fontWeight: 400, color: 'var(--text-muted)', textTransform: 'uppercase', marginBottom: 4 }}>Line Items</div>
+                    <div style={{ border: '1px solid var(--border)', borderRadius: 4, overflow: 'hidden' }}>
                       {po.items
                         .slice()
                         .sort((a, b) => Number(a.sort_order || 0) - Number(b.sort_order || 0))
                         .map(item => (
                           <div key={item.id} style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 12, padding: '10px 12px', borderBottom: '1px solid var(--border)' }}>
                             <div>
-                              <div style={{ fontWeight: 700 }}>{item.description || item.task?.title}</div>
+                              <div style={{ fontWeight: 400 }}>{item.description || item.task?.title}</div>
                               {item.task?.title && item.description !== item.task.title && (
                                 <div style={{ color: 'var(--text-muted)', fontSize: 12 }}>{item.task.title}</div>
                               )}
                             </div>
-                            <div style={{ fontWeight: 800 }}>${Number(item.amount).toFixed(2)}</div>
+                            <div style={{ fontWeight: 400 }}>${Number(item.amount).toFixed(2)}</div>
                           </div>
                         ))}
                     </div>
@@ -150,15 +150,15 @@ export default function MyPurchaseOrders() {
                 )}
                 <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 10 }}>
                   <div>
-                    <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-muted)', textTransform: 'uppercase' }}>Amount</div>
-                    <div style={{ fontWeight: 800 }}>${Number(po.amount).toFixed(2)}</div>
+                    <div style={{ fontSize: 11, fontWeight: 400, color: 'var(--text-muted)', textTransform: 'uppercase' }}>Amount</div>
+                    <div style={{ fontWeight: 400 }}>${Number(po.amount).toFixed(2)}</div>
                   </div>
                   <div>
-                    <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-muted)', textTransform: 'uppercase' }}>Terms</div>
+                    <div style={{ fontSize: 11, fontWeight: 400, color: 'var(--text-muted)', textTransform: 'uppercase' }}>Terms</div>
                     <div>{po.terms || 'Net 15'}</div>
                   </div>
                   <div>
-                    <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-muted)', textTransform: 'uppercase' }}>Paid</div>
+                    <div style={{ fontSize: 11, fontWeight: 400, color: 'var(--text-muted)', textTransform: 'uppercase' }}>Paid</div>
                     <div>{po.paid_at ? new Date(po.paid_at).toLocaleDateString() : 'Not paid'}</div>
                   </div>
                 </div>
diff --git a/src/pages/team/CreateInvoice.jsx b/src/pages/team/CreateInvoice.jsx
index 399e320..7d84724 100644
--- a/src/pages/team/CreateInvoice.jsx
+++ b/src/pages/team/CreateInvoice.jsx
@@ -95,7 +95,8 @@ export default function CreateInvoice() {
             .from('tasks')
             .select('*, project:projects(name), submissions(service_type, type, version_number)')
             .in('project_id', projectIds)
-            .eq('invoiced', false),
+            .eq('invoiced', false)
+            .eq('status', 'client_approved'),
           supabase
             .from('submissions')
             .select('*, task:tasks(id, title, project:projects(name), submissions(service_type, type))')
@@ -385,9 +386,9 @@ export default function CreateInvoice() {
               const price = priceList.find(p => p.service_type === task.service_type && p.price_type === 'new');
               const alreadyAdded = items.some(i => i.task_id === task.id && !i.submission_id);
               return (
-                <div key={task.id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--bg)', borderRadius: 6, border: '1px solid var(--border)' }}>
+                <div key={task.id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--bg)', borderRadius: 4, border: '1px solid var(--border)' }}>
                   <div>
-                    <div style={{ fontSize: 13, fontWeight: 600 }}>{buildNewItemDescription(task)}</div>
+                    <div style={{ fontSize: 13, fontWeight: 400 }}>{buildNewItemDescription(task)}</div>
                     <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>
                       {task.service_type || 'Other'} • {price ? `$${Number(price.price).toFixed(2)}` : 'No price set'}
                     </div>
@@ -428,9 +429,9 @@ export default function CreateInvoice() {
                 const price = priceList.find(p => p.service_type === revServiceType && p.price_type === 'revision');
                 const alreadyAdded = items.some(i => i.submission_id === rev.id);
                 return (
-                  <div key={rev.id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--bg)', borderRadius: 6, border: '1px solid var(--border)' }}>
+                  <div key={rev.id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--bg)', borderRadius: 4, border: '1px solid var(--border)' }}>
                     <div>
-                      <div style={{ fontSize: 13, fontWeight: 600 }}>{buildRevisionItemDescription(rev)}</div>
+                      <div style={{ fontSize: 13, fontWeight: 400 }}>{buildRevisionItemDescription(rev)}</div>
                       <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>
                         {revServiceType || 'Other'} • {price ? `$${Number(price.price).toFixed(2)}` : 'No price set'}
                       </div>
@@ -457,7 +458,7 @@ export default function CreateInvoice() {
             <select
               onChange={e => { if (e.target.value) { sortItems(e.target.value); e.target.value = ''; } }}
               defaultValue=""
-              style={{ fontSize: 12, padding: '4px 8px', borderRadius: 6, border: '1px solid var(--border)', background: 'var(--card-bg)', color: 'var(--text-primary)', cursor: 'pointer' }}
+              style={{ fontSize: 12, padding: '4px 8px', borderRadius: 4, border: '1px solid var(--border)', background: 'var(--card-bg)', color: 'var(--text-primary)', cursor: 'pointer' }}
             >
               <option value="" disabled>Sort by…</option>
               <option value="new-first">New first</option>
@@ -469,7 +470,7 @@ export default function CreateInvoice() {
 
         <div style={{ display: 'grid', gridTemplateColumns: '20px 90px 1fr 80px 120px 120px 40px', gap: 8, marginBottom: 8 }}>
           {['', 'Type', 'Description', 'Qty', 'Unit Price', 'Total', ''].map((h, i) => (
-            <div key={i} style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', textAlign: i > 3 ? 'right' : 'left' }}>{h}</div>
+            <div key={i} style={{ fontSize: 11, fontWeight: 400, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', textAlign: i > 3 ? 'right' : 'left' }}>{h}</div>
           ))}
         </div>
 
@@ -492,7 +493,7 @@ export default function CreateInvoice() {
               <input type="text" placeholder="Description..." value={item.description} onChange={e => updateItem(item.id, 'description', e.target.value)} style={{ margin: 0 }} />
               <input type="number" min="1" value={item.quantity} onChange={e => updateItem(item.id, 'quantity', e.target.value)} style={{ margin: 0, textAlign: 'center' }} />
               <input type="number" min="0" step="0.01" placeholder="0.00" value={item.unit_price} onChange={e => updateItem(item.id, 'unit_price', e.target.value)} style={{ margin: 0, textAlign: 'right' }} />
-              <div style={{ textAlign: 'right', fontSize: 14, fontWeight: 600, color: 'var(--text-primary)', paddingRight: 4 }}>
+              <div style={{ textAlign: 'right', fontSize: 14, fontWeight: 400, color: 'var(--text-primary)', paddingRight: 4 }}>
                 ${((Number(item.quantity) || 0) * (Number(item.unit_price) || 0)).toFixed(2)}
               </div>
               <button onClick={() => removeItem(item.id)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--danger)', fontSize: 16, padding: 4 }}>✕</button>
@@ -506,8 +507,8 @@ export default function CreateInvoice() {
 
         <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 20, paddingTop: 16, borderTop: '1px solid var(--border)' }}>
           <div style={{ textAlign: 'right' }}>
-            <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', marginBottom: 4 }}>Total</div>
-            <div style={{ fontSize: 26, fontWeight: 700, color: 'var(--accent)' }}>${total.toFixed(2)}</div>
+            <div style={{ fontSize: 11, fontWeight: 400, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', marginBottom: 4 }}>Total</div>
+            <div style={{ fontSize: 26, fontWeight: 400, color: 'var(--accent)' }}>${total.toFixed(2)}</div>
           </div>
         </div>
       </div>
diff --git a/src/pages/team/CreateSubcontractorPO.jsx b/src/pages/team/CreateSubcontractorPO.jsx
index 4ecaeaf..2120050 100644
--- a/src/pages/team/CreateSubcontractorPO.jsx
+++ b/src/pages/team/CreateSubcontractorPO.jsx
@@ -5,7 +5,7 @@ import { supabase } from '../../lib/supabase';
 import { useAuth } from '../../context/AuthContext';
 import { sendEmail } from '../../lib/email';
 
-const FIELD_LABEL_STYLE = { fontSize: 11, fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 0.5, display: 'block', marginBottom: 4 };
+const FIELD_LABEL_STYLE = { fontSize: 11, fontWeight: 400, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 0.5, display: 'block', marginBottom: 4 };
 const FIELD_INPUT_STYLE = { minHeight: 42, margin: 0 };
 
 const blankSubcontractorPO = () => ({
@@ -264,9 +264,9 @@ export default function CreateSubcontractorPO() {
                 const usedItem = getUsedTaskItem(task.id);
                 const usedBy = usedItem?.po?.profile?.name || usedItem?.po?.profile?.email || 'another PO';
                 return (
-                  <div key={task.id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--bg)', borderRadius: 6, border: '1px solid var(--border)' }}>
+                  <div key={task.id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--bg)', borderRadius: 4, border: '1px solid var(--border)' }}>
                     <div>
-                      <div style={{ fontSize: 13, fontWeight: 700 }}>{task.title}</div>
+                      <div style={{ fontSize: 13, fontWeight: 400 }}>{task.title}</div>
                       <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>
                         {usedItem
                           ? `Already on ${usedItem.po?.po_number || 'a PO'} for ${usedBy}`
@@ -292,7 +292,7 @@ export default function CreateSubcontractorPO() {
         <div className="card-title">Line Items</div>
         <div style={{ display: 'grid', gridTemplateColumns: '1fr 120px 40px', gap: 8, marginBottom: 8 }}>
           {['Description', 'Pay Amount', ''].map((header, index) => (
-            <div key={header} style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', textAlign: index > 0 ? 'right' : 'left' }}>{header}</div>
+            <div key={header} style={{ fontSize: 11, fontWeight: 400, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', textAlign: index > 0 ? 'right' : 'left' }}>{header}</div>
           ))}
         </div>
         <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
@@ -339,8 +339,8 @@ export default function CreateSubcontractorPO() {
 
         <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 20, paddingTop: 16, borderTop: '1px solid var(--border)' }}>
           <div style={{ textAlign: 'right' }}>
-            <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', marginBottom: 4 }}>Total</div>
-            <div style={{ fontSize: 26, fontWeight: 700, color: 'var(--accent)' }}>${total.toFixed(2)}</div>
+            <div style={{ fontSize: 11, fontWeight: 400, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', marginBottom: 4 }}>Total</div>
+            <div style={{ fontSize: 26, fontWeight: 400, color: 'var(--accent)' }}>${total.toFixed(2)}</div>
           </div>
         </div>
       </div>
diff --git a/src/pages/team/FourgePasswords.jsx b/src/pages/team/FourgePasswords.jsx
index 9923ea1..dddbd13 100644
--- a/src/pages/team/FourgePasswords.jsx
+++ b/src/pages/team/FourgePasswords.jsx
@@ -307,14 +307,14 @@ export default function FourgePasswords() {
                 style={{
                   padding: '16px',
                   border: '1px solid var(--border)',
-                  borderRadius: 10,
+                  borderRadius: 4,
                   display: 'grid',
                   gap: 10,
                 }}
               >
                 <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, alignItems: 'flex-start', flexWrap: 'wrap' }}>
                   <div>
-                    <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--text-primary)' }}>{entry.service_name}</div>
+                    <div style={{ fontSize: 15, fontWeight: 400, color: 'var(--text-primary)' }}>{entry.service_name}</div>
                     <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 4 }}>
                       Updated {formatDate(entry.updated_at || entry.created_at)}
                     </div>
diff --git a/src/pages/team/InvoiceDetail.jsx b/src/pages/team/InvoiceDetail.jsx
index 740f567..39ecc2c 100644
--- a/src/pages/team/InvoiceDetail.jsx
+++ b/src/pages/team/InvoiceDetail.jsx
@@ -2,10 +2,12 @@ import { useState, useEffect } from 'react';
 import { useParams, useNavigate, useLocation, Link } from 'react-router-dom';
 import Layout from '../../components/Layout';
 import LoadingButton from '../../components/LoadingButton';
+import SortTh from '../../components/SortTh';
 import { supabase } from '../../lib/supabase';
 import { generateInvoicePDF, generateReceiptPDF } from '../../lib/invoice';
 import { blobToEmailAttachment, sendEmail } from '../../lib/email';
 import { withTimeout } from '../../lib/withTimeout';
+import { useSortable } from '../../hooks/useSortable';
 
 const statusColor = { draft: 'not_started', sent: 'in_progress', paid: 'client_approved' };
 
@@ -24,6 +26,7 @@ export default function InvoiceDetail() {
   const [editingDates, setEditingDates] = useState(false);
   const [dateForm, setDateForm] = useState({ invoice_date: '', due_date: '' });
   const [emailRecipient, setEmailRecipient] = useState('');
+  const { sortKey, sortDir, toggle, sort } = useSortable('description');
 
   useEffect(() => {
     async function load() {
@@ -311,6 +314,14 @@ export default function InvoiceDetail() {
 
   if (loading) return <Layout><p style={{ padding: 24, color: 'var(--text-muted)' }}>Loading...</p></Layout>;
   if (!invoice) return <Layout><p>Invoice not found.</p></Layout>;
+  const sortedItems = sort(items, (item, key) => {
+    if (key === 'type') return item.submission_id ? 'Revision' : 'New';
+    if (key === 'description') return item.description || '';
+    if (key === 'quantity') return Number(item.quantity || 0);
+    if (key === 'unit_price') return Number(item.unit_price || 0);
+    if (key === 'line_total') return Number(item.quantity || 0) * Number(item.unit_price || 0);
+    return '';
+  });
 
   const isOverdue = invoice.status !== 'paid' && new Date(invoice.due_date) < new Date();
 
@@ -345,7 +356,7 @@ export default function InvoiceDetail() {
       <div className="grid-2" style={{ marginBottom: 24 }}>
         <div className="card">
           <div className="card-title">Bill To</div>
-          <div style={{ fontSize: 15, fontWeight: 700 }}>{invoice.bill_to || company?.name}</div>
+          <div style={{ fontSize: 15, fontWeight: 400 }}>{invoice.bill_to || company?.name}</div>
           <div style={{ marginTop: 12 }}>
             <Link to={`/company/${company?.id}`} className="btn btn-outline btn-sm">View Company</Link>
           </div>
@@ -400,14 +411,14 @@ export default function InvoiceDetail() {
                 disabled={saving}
               />
             </div>
-            <div className="detail-item"><label>Total</label><p style={{ fontSize: 18, fontWeight: 700, color: 'var(--accent)' }}>${Number(invoice.total).toFixed(2)}</p></div>
+            <div className="detail-item"><label>Total</label><p style={{ fontSize: 18, fontWeight: 400, color: 'var(--accent)' }}>${Number(invoice.total).toFixed(2)}</p></div>
             {invoice.paid_at && (
-              <div className="detail-item"><label>Paid On</label><p style={{ color: 'var(--success, #16a34a)', fontWeight: 600 }}>{new Date(invoice.paid_at).toLocaleDateString()}</p></div>
+              <div className="detail-item"><label>Paid On</label><p style={{ color: 'var(--success, #16a34a)', fontWeight: 400 }}>{new Date(invoice.paid_at).toLocaleDateString()}</p></div>
             )}
             {invoice.status === 'paid' && invoice.stripe_fee != null && (
               <>
                 <div className="detail-item"><label>Stripe Fee</label><p style={{ color: 'var(--text-secondary)' }}>−${Number(invoice.stripe_fee).toFixed(2)}</p></div>
-                <div className="detail-item"><label>Net Received</label><p style={{ fontWeight: 700 }}>${(Number(invoice.total) - Number(invoice.stripe_fee)).toFixed(2)}</p></div>
+                <div className="detail-item"><label>Net Received</label><p style={{ fontWeight: 400 }}>${(Number(invoice.total) - Number(invoice.stripe_fee)).toFixed(2)}</p></div>
               </>
             )}
           </div>
@@ -420,15 +431,15 @@ export default function InvoiceDetail() {
           <table>
             <thead>
               <tr>
-                <th style={{ width: 100 }}>Type</th>
-                <th>Description</th>
-                <th style={{ textAlign: 'center' }}>Qty</th>
-                <th style={{ textAlign: 'right' }}>Unit Price</th>
-                <th style={{ textAlign: 'right' }}>Total</th>
+                <SortTh col="type" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ width: 100 }}>Type</SortTh>
+                <SortTh col="description" sortKey={sortKey} sortDir={sortDir} onSort={toggle}>Description</SortTh>
+                <SortTh col="quantity" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ textAlign: 'center' }}>Qty</SortTh>
+                <SortTh col="unit_price" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ textAlign: 'right' }}>Unit Price</SortTh>
+                <SortTh col="line_total" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ textAlign: 'right' }}>Total</SortTh>
               </tr>
             </thead>
             <tbody>
-              {items.map(item => (
+              {sortedItems.map(item => (
                 <tr key={item.id}>
                   <td>
                     <span className={`badge ${item.submission_id ? 'badge-client_revision' : 'badge-initial'}`}>
@@ -438,7 +449,7 @@ export default function InvoiceDetail() {
                   <td>{item.description}</td>
                   <td style={{ textAlign: 'center' }}>{item.quantity}</td>
                   <td style={{ textAlign: 'right' }}>${Number(item.unit_price).toFixed(2)}</td>
-                  <td style={{ textAlign: 'right', fontWeight: 700 }}>${(Number(item.quantity) * Number(item.unit_price)).toFixed(2)}</td>
+                  <td style={{ textAlign: 'right', fontWeight: 400 }}>${(Number(item.quantity) * Number(item.unit_price)).toFixed(2)}</td>
                 </tr>
               ))}
             </tbody>
@@ -446,15 +457,15 @@ export default function InvoiceDetail() {
         </div>
         <div style={{ display: 'flex', justifyContent: 'flex-end', padding: '16px 16px 0', borderTop: '1px solid var(--border)', marginTop: 8 }}>
           <div style={{ textAlign: 'right' }}>
-            <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', marginBottom: 4 }}>Total</div>
-            <div style={{ fontSize: 24, fontWeight: 700, color: 'var(--accent)' }}>${Number(invoice.total).toFixed(2)}</div>
+            <div style={{ fontSize: 11, fontWeight: 400, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', marginBottom: 4 }}>Total</div>
+            <div style={{ fontSize: 24, fontWeight: 400, color: 'var(--accent)' }}>${Number(invoice.total).toFixed(2)}</div>
             {invoice.status === 'paid' && invoice.stripe_fee != null && (
               <div style={{ marginTop: 10, paddingTop: 10, borderTop: '1px solid var(--border)' }}>
                 <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>
                   Stripe fee: <span style={{ color: 'var(--text-secondary)' }}>−${Number(invoice.stripe_fee).toFixed(2)}</span>
                 </div>
                 <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 2 }}>
-                  Net received: <span style={{ fontWeight: 700, color: 'var(--text-primary)' }}>${(Number(invoice.total) - Number(invoice.stripe_fee)).toFixed(2)}</span>
+                  Net received: <span style={{ fontWeight: 400, color: 'var(--text-primary)' }}>${(Number(invoice.total) - Number(invoice.stripe_fee)).toFixed(2)}</span>
                 </div>
               </div>
             )}
diff --git a/src/pages/team/Invoices.jsx b/src/pages/team/Invoices.jsx
index 3266f44..4a48775 100644
--- a/src/pages/team/Invoices.jsx
+++ b/src/pages/team/Invoices.jsx
@@ -1,4 +1,6 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+import { DashboardBanner } from '../../lib/dashboardBanner';
 import { useLocation, useNavigate } from 'react-router-dom';
 import Layout from '../../components/Layout';
 import SortTh from '../../components/SortTh';
@@ -27,7 +29,7 @@ const poStatusLabel = {
   cancelled: 'Cancelled',
 };
 const RECEIPT_BUCKET = 'expense-receipts';
-const FIELD_LABEL_STYLE = { fontSize: 11, fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 0.5, display: 'block', marginBottom: 4 };
+const FIELD_LABEL_STYLE = { fontSize: 11, fontWeight: 400, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 0.5, display: 'block', marginBottom: 4 };
 const FIELD_INPUT_STYLE = { minHeight: 42, margin: 0 };
 
 const blankExpense = () => ({
@@ -47,6 +49,20 @@ function getFileExt(name = '') {
   return clean && clean !== name ? clean.replace(/[^a-z0-9]/g, '') : 'bin';
 }
 
+const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+
+function FinancesChartTooltip({ active, payload, label, year }) {
+  if (!active || !payload?.length) return null;
+  return (
+    <div style={{ background: 'var(--card-bg)', border: '1px solid var(--border)', borderRadius: 4, padding: '10px 14px', fontSize: 12 }}>
+      <div style={{ fontWeight: 600, marginBottom: 6, color: 'var(--text-primary)' }}>{label} {year}</div>
+      {payload.map(p => (
+        <div key={p.dataKey} style={{ color: p.color, marginBottom: 2 }}>{p.name}: <strong>${p.value.toLocaleString('en-US', { minimumFractionDigits: 2 })}</strong></div>
+      ))}
+    </div>
+  );
+}
+
 export default function Invoices() {
   const navigate = useNavigate();
   const location = useLocation();
@@ -68,6 +84,7 @@ export default function Invoices() {
   const [newExpense, setNewExpense] = useState(blankExpense());
   const [addingExpense, setAddingExpense] = useState(false);
   const [editingExpenseId, setEditingExpenseId] = useState('');
+  const [showExpenseForm, setShowExpenseForm] = useState(false);
   const [expenseFilter, setExpenseFilter] = useState('all');
   const [subcontractorPOs, setSubcontractorPOs] = useState([]);
   const [subcontractorLoading, setSubcontractorLoading] = useState(true);
@@ -150,12 +167,14 @@ export default function Invoices() {
       removeReceipt: false,
     });
     setExpensesError('');
+    setShowExpenseForm(true);
   };
 
   const cancelExpenseEdit = () => {
     setEditingExpenseId('');
     setNewExpense(blankExpense());
     setExpensesError('');
+    setShowExpenseForm(false);
   };
 
   const handleAddExpense = async (e) => {
@@ -214,6 +233,7 @@ export default function Invoices() {
         );
         setNewExpense(blankExpense());
         setEditingExpenseId('');
+        setShowExpenseForm(false);
       }
     } catch (error) {
       console.error(`Failed to ${editingExpenseId ? 'update' : 'add'} expense:`, error);
@@ -456,74 +476,115 @@ export default function Invoices() {
   const revenue = totals.paid;
   const profit = totals.netReceived - expenses.reduce((s, e) => s + Number(e.amount), 0) - totalPaidSubcontractors;
 
+  const chartYear = exportYear;
+  const chartData = useMemo(() => MONTHS.map((month, mi) => {
+    const paid = invoices
+      .filter(inv => inv.status === 'paid' && new Date(inv.invoice_date).getFullYear() === chartYear && new Date(inv.invoice_date).getMonth() === mi)
+      .reduce((s, inv) => s + Number(inv.total || 0), 0);
+    const outstanding = invoices
+      .filter(inv => inv.status === 'sent' && new Date(inv.invoice_date).getFullYear() === chartYear && new Date(inv.invoice_date).getMonth() === mi)
+      .reduce((s, inv) => s + Number(inv.total || 0), 0);
+    const exp = expenses
+      .filter(e => new Date(e.date).getFullYear() === chartYear && new Date(e.date).getMonth() === mi)
+      .reduce((s, e) => s + Number(e.amount || 0), 0);
+    const subExp = subInvoices
+      .filter(i => i.status === 'paid' && new Date(i.created_at).getFullYear() === chartYear && new Date(i.created_at).getMonth() === mi)
+      .reduce((s, i) => s + (i.items || []).reduce((a, x) => a + Number(x.unit_price || 0) * Number(x.quantity || 1), 0), 0);
+    const totalExp = exp + subExp;
+    return { month, Revenue: +paid.toFixed(2), Outstanding: +outstanding.toFixed(2), Expenses: +totalExp.toFixed(2), Profit: +(paid - totalExp).toFixed(2) };
+  }), [invoices, expenses, subInvoices, chartYear]);
+
+
   return (
     <Layout>
-      <div className="page-header">
-        <div>
-          <div className="page-title">Invoices & Expenses</div>
+      <div className="page-header" style={{ flexShrink: 0 }}>
+        <div className="page-header-left">
+          <DashboardBanner />
+          <div className="page-title dashboard-greeting">Finances</div>
           <div className="page-subtitle">{invoices.length} invoice{invoices.length !== 1 ? 's' : ''} · {expenses.length} expense{expenses.length !== 1 ? 's' : ''} · {subcontractorPOs.length} subcontractor PO{subcontractorPOs.length !== 1 ? 's' : ''}</div>
         </div>
         <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
           {paidYears.length > 0 && (
-            <select
-              value={exportYear}
-              onChange={e => setExportYear(Number(e.target.value))}
-              className="btn btn-outline btn-sm"
-              style={{ cursor: 'pointer' }}
-            >
-              {paidYears.map(y => (
-                <option key={y} value={y}>{y}</option>
-              ))}
+            <select className="filter-select" value={exportYear} onChange={e => setExportYear(Number(e.target.value))} style={{ width: 120 }}>
+              {paidYears.map(y => <option key={y} value={y}>{y}</option>)}
             </select>
           )}
-          <button className="btn btn-outline btn-sm" onClick={handleCPAExport} disabled={exporting}>
+          <button className="btn btn-primary btn-sm" onClick={handleCPAExport} disabled={exporting}>
             {exporting ? 'Exporting…' : 'Export for CPA'}
           </button>
         </div>
       </div>
 
-      <div className="stats-grid" style={{ marginBottom: 18 }}>
+      <div style={{ background: 'var(--card-bg)', border: '1px solid var(--border)', borderRadius: 4, padding: '16px 16px 8px', marginBottom: 18 }}>
+        <ResponsiveContainer width="100%" height={200}>
+          <AreaChart data={chartData} margin={{ top: 4, right: 8, left: 0, bottom: 0 }}>
+            <defs>
+              <linearGradient id="gradRevenue" x1="0" y1="0" x2="0" y2="1"><stop offset="5%" stopColor="#F5A523" stopOpacity={0.25}/><stop offset="95%" stopColor="#F5A523" stopOpacity={0}/></linearGradient>
+              <linearGradient id="gradProfit" x1="0" y1="0" x2="0" y2="1"><stop offset="5%" stopColor="#4ade80" stopOpacity={0.25}/><stop offset="95%" stopColor="#4ade80" stopOpacity={0}/></linearGradient>
+              <linearGradient id="gradExpenses" x1="0" y1="0" x2="0" y2="1"><stop offset="5%" stopColor="#ef4444" stopOpacity={0.2}/><stop offset="95%" stopColor="#ef4444" stopOpacity={0}/></linearGradient>
+              <linearGradient id="gradOutstanding" x1="0" y1="0" x2="0" y2="1"><stop offset="5%" stopColor="#60a5fa" stopOpacity={0.2}/><stop offset="95%" stopColor="#60a5fa" stopOpacity={0}/></linearGradient>
+            </defs>
+            <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" vertical={false} />
+            <XAxis dataKey="month" tick={{ fontSize: 11, fill: 'var(--text-muted)' }} axisLine={false} tickLine={false} />
+            <YAxis tick={{ fontSize: 11, fill: 'var(--text-muted)' }} axisLine={false} tickLine={false} tickFormatter={v => `$${v >= 1000 ? (v/1000).toFixed(0)+'k' : v}`} width={45} />
+            <Tooltip content={<FinancesChartTooltip year={chartYear} />} />
+            <Legend wrapperStyle={{ fontSize: 11, paddingTop: 8 }} />
+            <Area type="monotone" dataKey="Revenue" stroke="#F5A523" strokeWidth={2} fill="url(#gradRevenue)" dot={false} activeDot={{ r: 4 }} />
+            <Area type="monotone" dataKey="Profit" stroke="#4ade80" strokeWidth={2} fill="url(#gradProfit)" dot={false} activeDot={{ r: 4 }} />
+            <Area type="monotone" dataKey="Expenses" stroke="#ef4444" strokeWidth={2} fill="url(#gradExpenses)" dot={false} activeDot={{ r: 4 }} />
+            <Area type="monotone" dataKey="Outstanding" stroke="#60a5fa" strokeWidth={2} fill="url(#gradOutstanding)" dot={false} activeDot={{ r: 4 }} />
+          </AreaChart>
+        </ResponsiveContainer>
+      </div>
+
+      <div style={{ display: 'flex', alignItems: 'center', gap: 0, marginBottom: 16 }}>
         {[
-          { label: 'Revenue', value: revenue, detail: 'paid invoices' },
-          { label: 'Profit', value: profit, detail: 'net minus expenses' },
-          { label: 'Outstanding', value: totals.sent, count: invoices.filter(i => i.status === 'sent').length },
-          { label: 'Paid', value: totals.paid, count: invoices.filter(i => i.status === 'paid').length },
-          { label: 'Net Received', value: totals.netReceived, detail: 'after Stripe fees' },
-        ].map(({ label, value, count, detail }) => (
-          <div key={label} className={`stat-card${label === 'Revenue' ? ' stat-card-highlight' : ''}`}>
-            <div className="stat-value" style={{ fontSize: 22, color: label === 'Profit' && value < 0 ? 'var(--danger)' : undefined }}>${value.toFixed(2)}</div>
-            <div className="stat-label">{count !== undefined ? `${label} · ${count} invoice${count !== 1 ? 's' : ''}` : `${label} · ${detail}`}</div>
-          </div>
+          { id: 'invoices', label: 'INVOICES' },
+          { id: 'expenses', label: 'EXPENSES' },
+          { id: 'sub-invoices', label: 'SUBCONTRACTOR INVOICES' },
+        ].map((t, i, arr) => (
+          <span key={t.id} style={{ display: 'flex', alignItems: 'center' }}>
+            <button
+              type="button"
+              onClick={() => setActiveTab(t.id)}
+              style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, fontSize: 13, letterSpacing: 0.5, fontWeight: activeTab === t.id ? 600 : 400, color: activeTab === t.id ? 'var(--text-primary)' : 'var(--text-muted)', fontFamily: 'inherit' }}
+            >{t.label}</button>
+            {i < arr.length - 1 && <span style={{ margin: '0 10px', color: 'var(--border)', userSelect: 'none' }}>|</span>}
+          </span>
         ))}
       </div>
 
-      <div className="stats-grid" style={{ marginBottom: 24 }}>
-        <div className="stat-card">
-          <div className="stat-value" style={{ fontSize: 22 }}>${currentYearTotalExpenses.toFixed(2)}</div>
-          <div className="stat-label">Expenses This Year · includes paid subcontractors</div>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 16, flexWrap: 'wrap' }}>
+        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+          {companyNames.length > 0 && activeTab === 'invoices' && (
+            <select className="filter-select" style={{ width: 120 }} value={filterCompany} onChange={e => setFilterCompany(e.target.value)}>
+              <option value="">All Companies</option>
+              {companyNames.map(name => <option key={name} value={name}>{name}</option>)}
+            </select>
+          )}
         </div>
-        <div className="stat-card">
-          <div className="stat-value" style={{ fontSize: 22 }}>${totalExpenses.toFixed(2)}</div>
-          <div className="stat-label">Filtered Expenses · {filteredExpenses.length} item{filteredExpenses.length !== 1 ? 's' : ''}</div>
-        </div>
-        <div className="stat-card">
-          <div className="stat-value" style={{ fontSize: 22 }}>${totalPayableSubcontractors.toFixed(2)}</div>
-          <div className="stat-label">Subcontractors Payable · {payableSubcontractorCount} pending</div>
-        </div>
-      </div>
-
-      <div style={{ display: 'flex', gap: 12, marginBottom: 16, flexWrap: 'wrap' }}>
-        {companyNames.length > 0 && (
-          <select className="filter-select" value={filterCompany} onChange={e => setFilterCompany(e.target.value)}>
-            <option value="">All Companies</option>
-            {companyNames.map(name => <option key={name} value={name}>{name}</option>)}
-          </select>
+        {activeTab === 'invoices' && (
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+            <select className="filter-select" style={{ width: 120 }} value={filter} onChange={e => setFilter(e.target.value)}>
+              <option value="all">All</option>
+              <option value="draft">Draft</option>
+              <option value="sent">Sent</option>
+              <option value="paid">Paid</option>
+            </select>
+            <button className="btn btn-primary btn-sm" onClick={() => navigate('/invoices/new')}>+ New Invoice</button>
+          </div>
+        )}
+        {activeTab === 'expenses' && (
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+            <select className="filter-select" style={{ width: 120 }} value={expenseFilter} onChange={e => setExpenseFilter(e.target.value)}>
+              <option value="all">All</option>
+              {CATEGORIES.filter(c => expenses.some(ex => ex.category === c)).map(c => (
+                <option key={c} value={c}>{c}</option>
+              ))}
+            </select>
+            <button className="btn btn-primary btn-sm" onClick={() => { setEditingExpenseId(''); setNewExpense(blankExpense()); setExpensesError(''); setShowExpenseForm(true); }}>+ Add Expense</button>
+          </div>
         )}
-        <select className="filter-select" value={activeTab} onChange={e => setActiveTab(e.target.value)}>
-          <option value="invoices">Invoices</option>
-          <option value="sub-invoices">Subcontractor Invoices</option>
-          <option value="expenses">Expenses</option>
-        </select>
       </div>
 
       {activeTab === 'invoices' && (
@@ -533,29 +594,10 @@ export default function Invoices() {
         <div>
           {loading ? (
             <p style={{ color: 'var(--text-muted)' }}>Loading...</p>
+          ) : filtered.length === 0 ? (
+            <p style={{ color: 'var(--text-muted)', fontSize: 13 }}>No invoices.</p>
           ) : (
-            <div className="card">
-              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 16, flexWrap: 'wrap' }}>
-                <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
-                  {[
-                    { id: 'all', label: 'All' },
-                    { id: 'draft', label: 'Draft' },
-                    { id: 'sent', label: 'Sent' },
-                    { id: 'paid', label: 'Paid' },
-                  ].map(s => (
-                    <button key={s.id} type="button" className={`tab-btn${filter === s.id ? ' active' : ''}`} onClick={() => setFilter(s.id)}>{s.label}</button>
-                  ))}
-                </div>
-                <button className="btn btn-primary btn-sm" onClick={() => navigate('/invoices/new')}>+ New Invoice</button>
-              </div>
-              {filtered.length === 0 ? (
-                <div className="empty-state">
-                  <h3>No invoices</h3>
-                  <p>Create your first invoice to get started.</p>
-                  <button className="btn btn-primary" style={{ marginTop: 16 }} onClick={() => navigate('/invoices/new')}>+ New Invoice</button>
-                </div>
-              ) : (
-              <div className="table-wrapper">
+            <div style={{ background: 'var(--card-bg)', borderRadius: 4, border: '1px solid var(--border)' }}>
               <table>
                 <thead>
                   <tr>
@@ -574,8 +616,8 @@ export default function Invoices() {
                     return inv[key] || inv.company?.name || '';
                   }).map(inv => (
                     <tr key={inv.id} onClick={() => navigate(`/invoices/${inv.id}`)} style={{ cursor: 'pointer' }}>
-                      <td style={{ fontWeight: 600 }}>{inv.invoice_number}</td>
-                      <td style={{ fontWeight: 600 }}>{inv.bill_to || inv.company?.name}</td>
+                      <td style={{ fontWeight: 400 }}>{inv.invoice_number}</td>
+                      <td style={{ fontWeight: 400 }}>{inv.bill_to || inv.company?.name}</td>
                       <td style={{ color: 'var(--text-muted)' }}>{new Date(inv.invoice_date).toLocaleDateString()}</td>
                       <td>
                         <span style={{ color: inv.status !== 'paid' && new Date(inv.due_date) < new Date() ? 'var(--danger)' : 'var(--text-muted)' }}>
@@ -583,13 +625,11 @@ export default function Invoices() {
                         </span>
                       </td>
                       <td><span className={`badge badge-${statusColor[inv.status]}`} style={{ textTransform: 'capitalize' }}>{inv.status}</span></td>
-                      <td style={{ fontWeight: 700, color: 'var(--accent)' }}>${Number(inv.total).toFixed(2)}</td>
+                      <td style={{ fontWeight: 400, color: 'var(--accent)' }}>${Number(inv.total).toFixed(2)}</td>
                     </tr>
                   ))}
                 </tbody>
               </table>
-              </div>
-              )}
             </div>
           )}
         </div>
@@ -599,18 +639,7 @@ export default function Invoices() {
       {activeTab === 'expenses' && (
       <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
         <div>
-          <div className="card" style={{ marginBottom: 16 }}>
-            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 12 }}>
-              <div className="card-title" style={{ marginBottom: 0 }}>Saved Expenses</div>
-              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--accent)' }}>${totalExpenses.toFixed(2)}</div>
-            </div>
-
-            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginBottom: 12 }}>
-              <button onClick={() => setExpenseFilter('all')} className={`tab-btn${expenseFilter === 'all' ? ' active' : ''}`}>All</button>
-              {CATEGORIES.filter(c => expenses.some(e => e.category === c)).map(c => (
-                <button key={c} onClick={() => setExpenseFilter(f => f === c ? 'all' : c)} className={`tab-btn${expenseFilter === c ? ' active' : ''}`}>{c}</button>
-              ))}
-            </div>
+          <div style={{ marginBottom: 16 }}>
 
             {expensesLoading ? (
               <p style={{ color: 'var(--text-muted)', fontSize: 13 }}>Loading...</p>
@@ -619,7 +648,7 @@ export default function Invoices() {
             ) : filteredExpenses.length === 0 ? (
               <p style={{ color: 'var(--text-muted)', fontSize: 13 }}>No expenses yet.</p>
             ) : (
-              <div className="table-wrapper" style={{ marginTop: 0 }}>
+              <div style={{ background: 'var(--card-bg)', borderRadius: 4, border: '1px solid var(--border)' }}>
                 <table>
                   <thead>
                     <tr>
@@ -637,9 +666,9 @@ export default function Invoices() {
                       if (key === 'date') return exp.date || '';
                       return exp[key] || '';
                     }).map(exp => (
-                      <tr key={exp.id}>
+                      <tr key={exp.id} style={{ cursor: 'pointer' }} onClick={() => startEditExpense(exp)}>
                         <td>{new Date(exp.date).toLocaleDateString()}</td>
-                        <td style={{ fontWeight: 600 }}>{exp.description}</td>
+                        <td style={{ fontWeight: 400 }}>{exp.description}</td>
                         <td>{exp.category}</td>
                         <td style={{ color: 'var(--text-muted)' }}>
                           {exp.notes || exp.receipt_path ? (
@@ -649,7 +678,7 @@ export default function Invoices() {
                                 <button
                                   className="btn btn-outline btn-sm"
                                   style={{ width: 'fit-content' }}
-                                  onClick={() => handleViewReceipt(exp)}
+                                  onClick={e => { e.stopPropagation(); handleViewReceipt(exp); }}
                                 >
                                   View Receipt
                                 </button>
@@ -657,24 +686,15 @@ export default function Invoices() {
                             </div>
                           ) : '—'}
                         </td>
-                        <td style={{ textAlign: 'right', fontWeight: 700 }}>${Number(exp.amount).toFixed(2)}</td>
+                        <td style={{ textAlign: 'right', fontWeight: 400 }}>${Number(exp.amount).toFixed(2)}</td>
                         <td style={{ textAlign: 'right' }}>
-                          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 6 }}>
-                            <button
-                              className="btn-icon"
-                              title="Edit"
-                              onClick={() => startEditExpense(exp)}
-                            >
-                              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
-                            </button>
-                            <button
-                              className="btn-icon btn-icon-danger"
-                              title="Delete"
-                              onClick={() => handleDeleteExpense(exp.id)}
-                            >
-                              ✕
-                            </button>
-                          </div>
+                          <button
+                            className="btn-icon btn-icon-danger"
+                            title="Delete"
+                            onClick={e => { e.stopPropagation(); handleDeleteExpense(exp.id); }}
+                          >
+                            ✕
+                          </button>
                         </td>
                       </tr>
                     ))}
@@ -686,11 +706,17 @@ export default function Invoices() {
 
         </div>
 
-        {/* ── Expenses ── */}
-        <div>
-          <div className="card" style={{ marginBottom: 16 }}>
-            <div className="card-title">{editingExpenseId ? 'Edit Expense' : 'Add Expense'}</div>
-            <form onSubmit={handleAddExpense} style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+        {showExpenseForm && (
+          <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(4px)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }} onClick={cancelExpenseEdit}>
+            <div style={{ background: 'var(--card-bg)', borderRadius: 4, padding: 28, width: '100%', maxWidth: 520, border: '1px solid var(--border)', boxShadow: '0 24px 64px rgba(0,0,0,0.5)', maxHeight: '90vh', overflowY: 'auto' }} onClick={e => e.stopPropagation()}>
+              <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 20 }}>
+                <div>
+                  <div style={{ fontSize: 11, fontWeight: 400, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', marginBottom: 4 }}>{editingExpenseId ? 'Edit Expense' : 'New Expense'}</div>
+                  <div style={{ fontSize: 22, color: 'var(--text-primary)' }}>{editingExpenseId ? 'Edit expense' : 'Add an expense'}</div>
+                </div>
+                <button onClick={cancelExpenseEdit} style={{ background: 'none', border: 'none', color: 'var(--text-muted)', fontSize: 20, cursor: 'pointer', lineHeight: 1, padding: 4 }}>×</button>
+              </div>
+              <form onSubmit={handleAddExpense} style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
               <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                 <div>
                   <label style={FIELD_LABEL_STYLE}>Date</label>
@@ -713,7 +739,7 @@ export default function Invoices() {
                     placeholder="0.00"
                     value={newExpense.amount}
                     onChange={e => setNewExpense(p => ({ ...p, amount: e.target.value }))}
-                    style={{ ...FIELD_INPUT_STYLE, minHeight: 38, borderRadius: 10 }}
+                    style={{ ...FIELD_INPUT_STYLE, minHeight: 38, borderRadius: 4, paddingLeft: 10 }}
                     required
                   />
                 </div>
@@ -787,7 +813,7 @@ export default function Invoices() {
               </div>
               <div className="action-buttons" style={{ marginTop: 4 }}>
                 <button className="btn btn-primary btn-sm" type="submit" disabled={addingExpense}>
-                  {addingExpense ? (editingExpenseId ? 'Saving…' : 'Adding…') : (editingExpenseId ? 'Save Changes' : '+ Add Expense')}
+                  {addingExpense ? (editingExpenseId ? 'Saving…' : 'Adding…') : (editingExpenseId ? 'Save Changes' : 'Add Expense')}
                 </button>
                 {editingExpenseId && (
                   <button className="btn btn-outline btn-sm" type="button" onClick={cancelExpenseEdit}>
@@ -801,22 +827,15 @@ export default function Invoices() {
                 </div>
               )}
             </form>
+            </div>
           </div>
-
-        </div>
+        )}
       </div>
       )}
 
       {activeTab === 'sub-invoices' && (
       <div>
-        <div className="card" style={{ marginBottom: 16 }}>
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 12 }}>
-            <div className="card-title" style={{ marginBottom: 0 }}>Sub Invoices</div>
-            <div style={{ display: 'flex', gap: 12, fontSize: 13, fontWeight: 700 }}>
-              <span style={{ color: 'var(--accent)' }}>${subInvoices.filter(i => i.status === 'submitted').reduce((s, i) => s + (i.items || []).reduce((a, x) => a + Number(x.unit_price || 0) * Number(x.quantity || 1), 0), 0).toFixed(2)} pending</span>
-              <span>${subInvoices.filter(i => i.status === 'paid').reduce((s, i) => s + (i.items || []).reduce((a, x) => a + Number(x.unit_price || 0) * Number(x.quantity || 1), 0), 0).toFixed(2)} paid</span>
-            </div>
-          </div>
+        <div style={{ marginBottom: 16 }}>
           {subInvoicesLoading ? (
             <p style={{ color: 'var(--text-muted)', fontSize: 13 }}>Loading...</p>
           ) : subInvoicesError ? (
@@ -824,7 +843,7 @@ export default function Invoices() {
           ) : subInvoices.length === 0 ? (
             <p style={{ color: 'var(--text-muted)', fontSize: 13 }}>No sub invoices yet.</p>
           ) : (
-            <div className="table-wrapper" style={{ marginTop: 0 }}>
+            <div style={{ background: 'var(--card-bg)', borderRadius: 4, border: '1px solid var(--border)' }}>
               <table>
                 <thead>
                   <tr>
@@ -847,14 +866,14 @@ export default function Invoices() {
                     const subInvoiceStatusColor = { draft: 'not_started', submitted: 'in_progress', paid: 'client_approved' };
                     return (
                       <tr key={inv.id} style={{ cursor: 'pointer' }} onClick={() => navigate(`/sub-invoices/${inv.id}`)}>
-                        <td style={{ fontWeight: 600 }}>{inv.invoice_number}</td>
+                        <td style={{ fontWeight: 400 }}>{inv.invoice_number}</td>
                         <td>
-                          <div style={{ fontWeight: 600 }}>{inv.profile?.name || 'External'}</div>
+                          <div style={{ fontWeight: 400 }}>{inv.profile?.name || 'External'}</div>
                           <div style={{ color: 'var(--text-muted)', fontSize: 12 }}>{inv.profile?.email || '—'}</div>
                         </td>
                         <td style={{ color: 'var(--text-muted)' }}>{inv.submitted_at ? new Date(inv.submitted_at).toLocaleDateString() : '—'}</td>
                         <td><span className={`badge badge-${subInvoiceStatusColor[inv.status] || 'not_started'}`} style={{ textTransform: 'capitalize' }}>{inv.status}</span></td>
-                        <td style={{ textAlign: 'right', fontWeight: 700, color: 'var(--accent)' }}>${total.toFixed(2)}</td>
+                        <td style={{ textAlign: 'right', fontWeight: 400, color: 'var(--accent)' }}>${total.toFixed(2)}</td>
                         <td />
                       </tr>
                     );
diff --git a/src/pages/team/MeetingNotes.jsx b/src/pages/team/MeetingNotes.jsx
deleted file mode 100644
index 87df919..0000000
--- a/src/pages/team/MeetingNotes.jsx
+++ /dev/null
@@ -1,194 +0,0 @@
-import { useEffect, useState } from 'react';
-import Layout from '../../components/Layout';
-import LoadingButton from '../../components/LoadingButton';
-import { supabase } from '../../lib/supabase';
-import { useAuth } from '../../context/AuthContext';
-
-function emptyForm() {
-  return {
-    title: '',
-    attendees: '',
-    meeting_at: new Date().toISOString().slice(0, 16),
-    notes: '',
-  };
-}
-
-function formatMeetingDate(value) {
-  if (!value) return 'Unknown date';
-  return new Date(value).toLocaleString('en-US', {
-    month: 'short',
-    day: 'numeric',
-    year: 'numeric',
-    hour: 'numeric',
-    minute: '2-digit',
-  });
-}
-
-export default function MeetingNotes() {
-  const { currentUser } = useAuth();
-  const [notes, setNotes] = useState([]);
-  const [form, setForm] = useState(emptyForm());
-  const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
-  const [deletingId, setDeletingId] = useState('');
-  const [status, setStatus] = useState('');
-
-  useEffect(() => {
-    let isMounted = true;
-
-    async function loadInitialNotes() {
-      const { data, error } = await supabase
-        .from('meeting_notes')
-        .select('*')
-        .order('meeting_at', { ascending: false })
-        .order('created_at', { ascending: false });
-
-      if (!isMounted) return;
-
-      if (error) {
-        setStatus(`Failed to load meeting notes: ${error.message}`);
-        setNotes([]);
-      } else {
-        setNotes(data || []);
-        setStatus('');
-      }
-      setLoading(false);
-    }
-
-    loadInitialNotes();
-
-    return () => {
-      isMounted = false;
-    };
-  }, []);
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    if (!form.title.trim() || !form.notes.trim()) {
-      setStatus('Meeting title and notes are required.');
-      return;
-    }
-
-    setSaving(true);
-    const payload = {
-      title: form.title.trim(),
-      attendees: form.attendees.trim(),
-      meeting_at: form.meeting_at ? new Date(form.meeting_at).toISOString() : new Date().toISOString(),
-      notes: form.notes.trim(),
-      created_by: currentUser?.id || null,
-      updated_at: new Date().toISOString(),
-    };
-
-    const { data, error } = await supabase
-      .from('meeting_notes')
-      .insert(payload)
-      .select('*')
-      .single();
-
-    setSaving(false);
-    if (error) {
-      setStatus(`Failed to save note: ${error.message}`);
-      return;
-    }
-
-    setNotes(prev => [data, ...prev]);
-    setForm(emptyForm());
-    setStatus('Meeting note added.');
-  };
-
-  const handleDelete = async (entry) => {
-    if (!window.confirm(`Delete meeting note "${entry.title}"?`)) return;
-    setDeletingId(entry.id);
-    const { error } = await supabase.from('meeting_notes').delete().eq('id', entry.id);
-    setDeletingId('');
-    if (error) {
-      setStatus(`Failed to delete note: ${error.message}`);
-      return;
-    }
-    setNotes(prev => prev.filter(note => note.id !== entry.id));
-    setStatus('Meeting note deleted.');
-  };
-
-  return (
-    <Layout>
-      <div className="page-header">
-        <div>
-          <div className="page-title">Meeting Notes</div>
-          <div className="page-subtitle">Internal team timeline for meeting recaps, decisions, and follow-ups.</div>
-        </div>
-      </div>
-
-      <div style={{ display: 'grid', gap: 18 }}>
-        <section className="card">
-          <div className="card-title">Add Note</div>
-          <form onSubmit={handleSubmit}>
-            <div className="grid-2">
-              <div className="form-group">
-                <label>Meeting Title</label>
-                <input type="text" value={form.title} onChange={(e) => setForm(prev => ({ ...prev, title: e.target.value }))} placeholder="Weekly team sync" />
-              </div>
-              <div className="form-group">
-                <label>Meeting Date</label>
-                <input type="datetime-local" value={form.meeting_at} onChange={(e) => setForm(prev => ({ ...prev, meeting_at: e.target.value }))} />
-              </div>
-            </div>
-            <div className="form-group">
-              <label>Attendees</label>
-              <input type="text" value={form.attendees} onChange={(e) => setForm(prev => ({ ...prev, attendees: e.target.value }))} placeholder="Team, client, subcontractor" />
-            </div>
-            <div className="form-group" style={{ marginBottom: 12 }}>
-              <label>Notes</label>
-              <textarea value={form.notes} onChange={(e) => setForm(prev => ({ ...prev, notes: e.target.value }))} placeholder="Key decisions, next steps, blockers, and follow-up items..." style={{ minHeight: 180 }} />
-            </div>
-            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
-              <div style={{ color: 'var(--text-muted)', fontSize: 12 }}>{status || 'Newest notes appear first in the timeline.'}</div>
-              <LoadingButton className="btn btn-primary" loading={saving} loadingText="Saving...">Save Note</LoadingButton>
-            </div>
-          </form>
-        </section>
-
-        <section className="card">
-          <div className="card-title">Timeline</div>
-          {loading ? (
-            <div style={{ color: 'var(--text-muted)' }}>Loading meeting notes...</div>
-          ) : notes.length === 0 ? (
-            <div className="empty-state" style={{ padding: '36px 12px' }}>
-              <h3>No meeting notes yet</h3>
-              <p>Add the first entry to start the internal timeline.</p>
-            </div>
-          ) : (
-            <div className="meeting-timeline">
-              {notes.map((entry) => (
-                <article key={entry.id} className="meeting-note-card">
-                  <div className="meeting-note-marker" aria-hidden="true" />
-                  <div className="meeting-note-content">
-                    <div className="meeting-note-header">
-                      <div>
-                        <div className="meeting-note-title">{entry.title}</div>
-                        <div className="meeting-note-meta">
-                          <span>{formatMeetingDate(entry.meeting_at)}</span>
-                          {entry.attendees ? <span>Attendees: {entry.attendees}</span> : null}
-                        </div>
-                      </div>
-                      <LoadingButton
-                        className="btn-icon btn-icon-danger"
-                        loading={deletingId === entry.id}
-                        disabled={Boolean(deletingId)}
-                        loadingText="..."
-                        title="Delete"
-                        onClick={() => handleDelete(entry)}
-                      >
-                        ✕
-                      </LoadingButton>
-                    </div>
-                    <div className="meeting-note-body">{entry.notes}</div>
-                  </div>
-                </article>
-              ))}
-            </div>
-          )}
-        </section>
-      </div>
-    </Layout>
-  );
-}
diff --git a/src/pages/team/SubInvoiceDetail.jsx b/src/pages/team/SubInvoiceDetail.jsx
index e296c5b..9d6b70f 100644
--- a/src/pages/team/SubInvoiceDetail.jsx
+++ b/src/pages/team/SubInvoiceDetail.jsx
@@ -1,9 +1,11 @@
 import { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import Layout from '../../components/Layout';
+import SortTh from '../../components/SortTh';
 import { supabase } from '../../lib/supabase';
 import { generateSubcontractorPOPDF } from '../../lib/invoice';
 import { blobToEmailAttachment, sendEmail } from '../../lib/email';
+import { useSortable } from '../../hooks/useSortable';
 
 const statusColor = { draft: 'not_started', submitted: 'in_progress', paid: 'client_approved' };
 
@@ -14,6 +16,7 @@ export default function SubInvoiceDetail() {
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   const [generating, setGenerating] = useState(false);
+  const { sortKey, sortDir, toggle, sort } = useSortable('description');
 
   useEffect(() => {
     supabase
@@ -28,6 +31,13 @@ export default function SubInvoiceDetail() {
   }, [id]);
 
   const total = (invoice?.items || []).reduce((s, i) => s + Number(i.unit_price || 0) * Number(i.quantity || 1), 0);
+  const tableItems = sort(sortedItems, (item, key) => {
+    if (key === 'description') return item.description || '';
+    if (key === 'quantity') return Number(item.quantity || 0);
+    if (key === 'unit_price') return Number(item.unit_price || 0);
+    if (key === 'amount') return Number(item.unit_price || 0) * Number(item.quantity || 1);
+    return '';
+  });
 
   const buildPDFArgs = (inv) => ({
     po_number: inv.invoice_number,
@@ -120,11 +130,11 @@ export default function SubInvoiceDetail() {
         <div className="card">
           <div className="card-title">Invoice Info</div>
           <div className="detail-grid" style={{ marginBottom: 0 }}>
-            <div className="detail-item"><label>Invoice #</label><p style={{ fontWeight: 700 }}>{invoice.invoice_number}</p></div>
+            <div className="detail-item"><label>Invoice #</label><p style={{ fontWeight: 400 }}>{invoice.invoice_number}</p></div>
             <div className="detail-item"><label>Status</label><p style={{ textTransform: 'capitalize' }}>{invoice.status}</p></div>
             <div className="detail-item"><label>Submitted</label><p>{invoice.submitted_at ? new Date(invoice.submitted_at).toLocaleDateString() : '—'}</p></div>
             {invoice.paid_at && (
-              <div className="detail-item"><label>Paid On</label><p style={{ color: 'var(--success)', fontWeight: 600 }}>{new Date(invoice.paid_at).toLocaleDateString()}</p></div>
+              <div className="detail-item"><label>Paid On</label><p style={{ color: 'var(--success)', fontWeight: 400 }}>{new Date(invoice.paid_at).toLocaleDateString()}</p></div>
             )}
           </div>
         </div>
@@ -132,7 +142,7 @@ export default function SubInvoiceDetail() {
           <div className="card-title">Summary</div>
           <div className="detail-grid" style={{ marginBottom: 0 }}>
             <div className="detail-item"><label>Line Items</label><p>{sortedItems.length}</p></div>
-            <div className="detail-item"><label>Total</label><p style={{ fontWeight: 700, fontSize: 18 }}>${total.toFixed(2)}</p></div>
+            <div className="detail-item"><label>Total</label><p style={{ fontWeight: 400, fontSize: 18 }}>${total.toFixed(2)}</p></div>
           </div>
         </div>
       </div>
@@ -146,32 +156,32 @@ export default function SubInvoiceDetail() {
             <table>
               <thead>
                 <tr>
-                  <th>Description</th>
-                  <th style={{ textAlign: 'right' }}>Qty</th>
-                  <th style={{ textAlign: 'right' }}>Unit Price</th>
-                  <th style={{ textAlign: 'right' }}>Amount</th>
+                  <SortTh col="description" sortKey={sortKey} sortDir={sortDir} onSort={toggle}>Description</SortTh>
+                  <SortTh col="quantity" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ textAlign: 'right' }}>Qty</SortTh>
+                  <SortTh col="unit_price" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ textAlign: 'right' }}>Unit Price</SortTh>
+                  <SortTh col="amount" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ textAlign: 'right' }}>Amount</SortTh>
                 </tr>
               </thead>
               <tbody>
-                {sortedItems.map(item => (
+                {tableItems.map(item => (
                   <tr key={item.id}>
                     <td>{item.description}</td>
                     <td style={{ textAlign: 'right' }}>{item.quantity}</td>
                     <td style={{ textAlign: 'right' }}>${Number(item.unit_price).toFixed(2)}</td>
-                    <td style={{ textAlign: 'right', fontWeight: 700 }}>${(Number(item.unit_price) * Number(item.quantity || 1)).toFixed(2)}</td>
+                    <td style={{ textAlign: 'right', fontWeight: 400 }}>${(Number(item.unit_price) * Number(item.quantity || 1)).toFixed(2)}</td>
                   </tr>
                 ))}
                 <tr>
-                  <td colSpan={3} style={{ textAlign: 'right', fontWeight: 700, borderTop: '1px solid var(--border)', paddingTop: 10 }}>Total</td>
-                  <td style={{ textAlign: 'right', fontWeight: 700, fontSize: 16, borderTop: '1px solid var(--border)', paddingTop: 10 }}>${total.toFixed(2)}</td>
+                  <td colSpan={3} style={{ textAlign: 'right', fontWeight: 400, borderTop: '1px solid var(--border)', paddingTop: 10 }}>Total</td>
+                  <td style={{ textAlign: 'right', fontWeight: 400, fontSize: 16, borderTop: '1px solid var(--border)', paddingTop: 10 }}>${total.toFixed(2)}</td>
                 </tr>
               </tbody>
             </table>
           </div>
         )}
         {invoice.notes && (
-          <div style={{ marginTop: 16, padding: '12px 14px', background: 'var(--bg)', borderRadius: 8, border: '1px solid var(--border)' }}>
-            <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 6 }}>Notes</div>
+          <div style={{ marginTop: 16, padding: '12px 14px', background: 'var(--bg)', borderRadius: 4, border: '1px solid var(--border)' }}>
+            <div style={{ fontSize: 11, fontWeight: 400, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 6 }}>Notes</div>
             <p style={{ fontSize: 13, color: 'var(--text-secondary)', whiteSpace: 'pre-wrap', margin: 0 }}>{invoice.notes}</p>
           </div>
         )}
diff --git a/src/pages/team/SubcontractorPODetail.jsx b/src/pages/team/SubcontractorPODetail.jsx
index e4b3b6b..75ea798 100644
--- a/src/pages/team/SubcontractorPODetail.jsx
+++ b/src/pages/team/SubcontractorPODetail.jsx
@@ -2,9 +2,11 @@ import { useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import Layout from '../../components/Layout';
 import LoadingButton from '../../components/LoadingButton';
+import SortTh from '../../components/SortTh';
 import { supabase } from '../../lib/supabase';
 import { sendEmail } from '../../lib/email';
 import { generateSubcontractorPOPDF } from '../../lib/invoice';
+import { useSortable } from '../../hooks/useSortable';
 
 const poStatusColor = {
   draft: 'not_started',
@@ -33,6 +35,7 @@ export default function SubcontractorPODetail() {
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   const [generating, setGenerating] = useState(false);
+  const { sortKey, sortDir, toggle, sort } = useSortable('task');
 
   useEffect(() => {
     async function load() {
@@ -149,6 +152,13 @@ export default function SubcontractorPODetail() {
   if (!po) return <Layout><p>Purchase order not found.</p></Layout>;
 
   const sortedItems = (po.items || []).slice().sort((a, b) => Number(a.sort_order || 0) - Number(b.sort_order || 0));
+  const tableItems = sort(sortedItems, (item, key) => {
+    if (key === 'project') return po.project?.name || '';
+    if (key === 'task') return item.task?.title || '';
+    if (key === 'description') return item.description || '';
+    if (key === 'amount') return Number(item.amount || 0);
+    return '';
+  });
 
   return (
     <Layout>
@@ -172,7 +182,7 @@ export default function SubcontractorPODetail() {
       <div className="grid-2" style={{ marginBottom: 24 }}>
         <div className="card">
           <div className="card-title">Subcontractor</div>
-          <div style={{ fontSize: 15, fontWeight: 700 }}>{po.profile?.name || 'External Team Member'}</div>
+          <div style={{ fontSize: 15, fontWeight: 400 }}>{po.profile?.name || 'External Team Member'}</div>
           <div style={{ color: 'var(--text-muted)', fontSize: 13, marginTop: 4 }}>{po.profile?.email || 'No email on file'}</div>
         </div>
         <div className="card">
@@ -183,7 +193,7 @@ export default function SubcontractorPODetail() {
             <div className="detail-item"><label>Terms</label><p>{po.terms || 'Net 15'}</p></div>
             <div className="detail-item"><label>Project</label><p>{po.project?.name || 'No project'}</p></div>
             <div className="detail-item"><label>Client</label><p>{po.project?.company?.name || '—'}</p></div>
-            <div className="detail-item"><label>Total</label><p style={{ fontSize: 18, fontWeight: 700, color: 'var(--accent)' }}>${Number(po.amount).toFixed(2)}</p></div>
+            <div className="detail-item"><label>Total</label><p style={{ fontSize: 18, fontWeight: 400, color: 'var(--accent)' }}>${Number(po.amount).toFixed(2)}</p></div>
             {po.paid_at && <div className="detail-item"><label>Paid On</label><p>{new Date(po.paid_at).toLocaleDateString()}</p></div>}
           </div>
         </div>
@@ -195,19 +205,19 @@ export default function SubcontractorPODetail() {
           <table>
             <thead>
               <tr>
-                <th>Project</th>
-                <th>Task</th>
-                <th>Description</th>
-                <th style={{ textAlign: 'right' }}>Amount</th>
+                <SortTh col="project" sortKey={sortKey} sortDir={sortDir} onSort={toggle}>Project</SortTh>
+                <SortTh col="task" sortKey={sortKey} sortDir={sortDir} onSort={toggle}>Task</SortTh>
+                <SortTh col="description" sortKey={sortKey} sortDir={sortDir} onSort={toggle}>Description</SortTh>
+                <SortTh col="amount" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ textAlign: 'right' }}>Amount</SortTh>
               </tr>
             </thead>
             <tbody>
-              {sortedItems.map(item => (
+              {tableItems.map(item => (
                 <tr key={item.id}>
                   <td>{po.project?.name || 'No project'}</td>
                   <td>{item.task?.title || '—'}</td>
                   <td>{item.description}</td>
-                  <td style={{ textAlign: 'right', fontWeight: 700 }}>${Number(item.amount).toFixed(2)}</td>
+                  <td style={{ textAlign: 'right', fontWeight: 400 }}>${Number(item.amount).toFixed(2)}</td>
                 </tr>
               ))}
             </tbody>
@@ -215,8 +225,8 @@ export default function SubcontractorPODetail() {
         </div>
         <div style={{ display: 'flex', justifyContent: 'flex-end', padding: '16px 16px 0', borderTop: '1px solid var(--border)', marginTop: 8 }}>
           <div style={{ textAlign: 'right' }}>
-            <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', marginBottom: 4 }}>Total</div>
-            <div style={{ fontSize: 24, fontWeight: 700, color: 'var(--accent)' }}>${Number(po.amount).toFixed(2)}</div>
+            <div style={{ fontSize: 11, fontWeight: 400, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', marginBottom: 4 }}>Total</div>
+            <div style={{ fontSize: 24, fontWeight: 400, color: 'var(--accent)' }}>${Number(po.amount).toFixed(2)}</div>
           </div>
         </div>
       </div>
diff --git a/src/pages/team/TeamDashboard.jsx b/src/pages/team/TeamDashboard.jsx
new file mode 100644
index 0000000..7ea7a26
--- /dev/null
+++ b/src/pages/team/TeamDashboard.jsx
@@ -0,0 +1,712 @@
+import { useState, useEffect, useMemo, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import Layout from '../../components/Layout';
+import SortTh from '../../components/SortTh';
+import { supabase } from '../../lib/supabase';
+import { useAuth } from '../../context/AuthContext';
+import { readPageCache, writePageCache } from '../../lib/pageCache';
+import { withTimeout } from '../../lib/withTimeout';
+import { getDeadlineSourceSubmission } from '../../lib/taskDeadlines';
+import { useSortable } from '../../hooks/useSortable';
+
+// ─── Helpers ──────────────────────────────────────────────────────────────
+
+const ICON_TONES = [
+  { bg: 'rgba(245,165,35,0.15)', color: '#F5A523' },
+  { bg: 'rgba(74,222,128,0.15)', color: '#4ade80' },
+  { bg: 'rgba(96,165,250,0.15)', color: '#60a5fa' },
+  { bg: 'rgba(167,139,250,0.15)', color: '#a78bfa' },
+];
+
+function iconTone(key) {
+  let h = 0;
+  for (let i = 0; i < (key || '').length; i++) h = (h * 31 + key.charCodeAt(i)) % ICON_TONES.length;
+  return ICON_TONES[h];
+}
+
+function fmtMoney(n) {
+  if (Math.abs(n) >= 1000000) return `$${(n / 1000000).toFixed(2)}M`;
+  if (Math.abs(n) >= 10000) return `$${(n / 1000).toFixed(1)}k`;
+  return `$${Number(n).toFixed(2)}`;
+}
+
+function buildClientHighlights(companies, projects, tasks, clientProfiles, companyMemberships = [], invoices = []) {
+  const doneStatuses = ['client_approved', 'invoiced', 'paid'];
+  return (companies || []).map(company => {
+    const companyProjects = (projects || []).filter(p => p.company_id === company.id);
+    const primaryContact = (clientProfiles || []).find(p =>
+      p.company_id === company.id ||
+      (companyMemberships || []).some(m => m.company_id === company.id && m.profile_id === p.id)
+    );
+    const openTasks = (tasks || []).filter(t => companyProjects.some(p => p.id === t.project_id) && !doneStatuses.includes(t.status));
+    const companyInvoices = (invoices || []).filter(i => i.company_id === company.id);
+    const outstandingTotal = companyInvoices.filter(i => i.status === 'sent').reduce((s, i) => s + Number(i.total || 0), 0);
+    const paidTotal = companyInvoices.filter(i => i.status === 'paid').reduce((s, i) => s + Number(i.total || 0), 0);
+    return { company, primaryContact, projectCount: companyProjects.length, openTaskCount: openTasks.length, outstandingTotal, paidTotal };
+  });
+}
+
+const ACTION_ICON = {
+  task_started:       { bg: 'rgba(96,165,250,0.15)',  color: '#60a5fa', path: <polygon points="6,4 20,12 6,20" fill="currentColor"/> },
+  task_resumed:       { bg: 'rgba(96,165,250,0.15)',  color: '#60a5fa', path: <polygon points="6,4 20,12 6,20" fill="currentColor"/> },
+  task_submitted:     { bg: 'rgba(74,222,128,0.15)',  color: '#4ade80', path: <><line x1="12" y1="19" x2="12" y2="5" strokeWidth="2" strokeLinecap="round"/><polyline points="5,12 12,5 19,12" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/></> },
+  task_approved:      { bg: 'rgba(74,222,128,0.15)',  color: '#4ade80', path: <polyline points="4,13 9,18 20,7" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/> },
+  task_on_hold:       { bg: 'rgba(239,68,68,0.15)',   color: '#ef4444', path: <><rect x="6" y="4" width="4" height="16" rx="1" fill="currentColor"/><rect x="14" y="4" width="4" height="16" rx="1" fill="currentColor"/></> },
+  task_created:       { bg: 'rgba(167,139,250,0.15)', color: '#a78bfa', path: <><line x1="12" y1="5" x2="12" y2="19" strokeWidth="2" strokeLinecap="round"/><line x1="5" y1="12" x2="19" y2="12" strokeWidth="2" strokeLinecap="round"/></> },
+  project_created:    { bg: 'rgba(245,165,35,0.15)',  color: '#F5A523', path: <><path d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V7z" fill="none" strokeWidth="1.5"/></> },
+  request_submitted:  { bg: 'rgba(167,139,250,0.15)', color: '#a78bfa', path: <><rect x="5" y="3" width="14" height="18" rx="2" fill="none" strokeWidth="1.5"/><line x1="9" y1="8" x2="15" y2="8" strokeWidth="1.5" strokeLinecap="round"/><line x1="9" y1="12" x2="15" y2="12" strokeWidth="1.5" strokeLinecap="round"/><line x1="9" y1="16" x2="12" y2="16" strokeWidth="1.5" strokeLinecap="round"/></> },
+  revision_requested: { bg: 'rgba(245,158,11,0.15)',  color: '#f59e0b', path: <><path d="M4 12a8 8 0 018-8v0a8 8 0 018 8" fill="none" strokeWidth="1.5" strokeLinecap="round"/><polyline points="18,8 20,12 16,12" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none"/></> },
+};
+
+const ACTION_LABEL = {
+  task_created: 'created', task_started: 'started', task_on_hold: 'put on hold',
+  task_resumed: 'resumed', task_submitted: 'submitted', task_approved: 'approved',
+  project_created: 'created project', request_submitted: 'submitted', revision_requested: 'requested revision on',
+};
+
+function ActionIcon({ actionKey, size = 27 }) {
+  const cfg = ACTION_ICON[actionKey] || { bg: 'rgba(255,255,255,0.08)', color: 'var(--text-muted)', path: <circle cx="12" cy="12" r="3" fill="currentColor"/> };
+  return (
+    <div style={{ width: size, height: size, borderRadius: '50%', background: cfg.bg, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <svg width="13" height="13" viewBox="0 0 24 24" stroke={cfg.color} fill="none" style={{ color: cfg.color }}>{cfg.path}</svg>
+    </div>
+  );
+}
+
+function Avatar({ name, size = 27 }) {
+  const tone = iconTone(name);
+  return (
+    <div style={{ width: size, height: size, borderRadius: '50%', background: tone.bg, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <svg width="13" height="13" viewBox="0 0 24 24" fill={tone.color}>
+        <circle cx="12" cy="8" r="4" />
+        <path d="M4 20c0-4.4 3.6-7 8-7s8 2.6 8 7" />
+      </svg>
+    </div>
+  );
+}
+
+function InitialPortrait({ name }) {
+  const tone = iconTone(name);
+  return (
+    <div style={{ width: 27, height: 27, borderRadius: '50%', background: tone.bg, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+      <span style={{ fontSize: 12, fontWeight: 500, color: tone.color, lineHeight: 1 }}>{(name || '?')[0].toUpperCase()}</span>
+    </div>
+  );
+}
+
+function smoothCurve(pts) {
+  if (pts.length < 2) return '';
+  let d = `M${pts[0][0].toFixed(1)},${pts[0][1].toFixed(1)}`;
+  for (let i = 1; i < pts.length; i++) {
+    const [x0, y0] = pts[i - 1];
+    const [x1, y1] = pts[i];
+    const cpX = (x0 + x1) / 2;
+    d += ` C${cpX.toFixed(1)},${y0.toFixed(1)} ${cpX.toFixed(1)},${y1.toFixed(1)} ${x1.toFixed(1)},${y1.toFixed(1)}`;
+  }
+  return d;
+}
+
+function MiniAreaChart({ data }) {
+  const W = 90, H = 42;
+  if (!data || data.length < 2) return null;
+  const max = Math.max(...data, 1);
+  const pts = data.map((v, i) => [(i / (data.length - 1)) * W, 4 + (1 - v / max) * (H - 8)]);
+  const line = smoothCurve(pts);
+  const lastPt = pts[pts.length - 1];
+  const firstPt = pts[0];
+  const area = `${line} L${lastPt[0].toFixed(1)},${H} L${firstPt[0].toFixed(1)},${H} Z`;
+  return (
+    <svg width="100%" height={H} viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" style={{ display: 'block', overflow: 'hidden' }}>
+      <defs>
+        <linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="5%" stopColor="#F5A523" stopOpacity="0.3" />
+          <stop offset="95%" stopColor="#F5A523" stopOpacity="0" />
+        </linearGradient>
+      </defs>
+      <path d={area} fill="url(#areaGrad)" />
+      <path d={line} fill="none" stroke="#F5A523" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+const DASH_ICONS = {
+  revenue:  '<line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/>',
+  projects: '<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>',
+  tasks:    '<path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/>',
+  profit:   '<line x1="12" y1="20" x2="12" y2="4"/><polyline points="5 11 12 4 19 11"/>',
+};
+
+function DashStatCard({ label, value, sub, iconBg, iconColor, iconPath, chartData }) {
+  return (
+    <div style={{ background: 'var(--card-bg)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', border: '1px solid var(--border)', borderRadius: 8, padding: '18px 21px', display: 'flex', alignItems: 'stretch', gap: 21, minHeight: 120 }}>
+      <div style={{ flexShrink: 0, display: 'flex', flexDirection: 'column', ...(chartData ? {} : { flex: 1 }) }}>
+        <div style={{ fontSize: 11, fontWeight: 500, color: 'var(--text-secondary)', letterSpacing: 0.8, textTransform: 'uppercase', marginBottom: 5 }}>{label}</div>
+        <div style={{ flex: 1, display: 'flex', alignItems: 'center' }}>
+          <div style={{ fontSize: 30, fontWeight: 400, color: 'var(--text-primary)', letterSpacing: -0.5, lineHeight: 1.1 }}>{value}</div>
+        </div>
+        {sub && <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 5 }}>{sub}</div>}
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', justifyContent: 'space-between', ...(chartData ? { flex: 1, minWidth: 0 } : { flexShrink: 0 }) }}>
+        <div style={{ width: 27, height: 27, borderRadius: '50%', background: iconBg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke={iconColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" dangerouslySetInnerHTML={{ __html: iconPath }} />
+        </div>
+        {chartData && <MiniAreaChart data={chartData} />}
+      </div>
+    </div>
+  );
+}
+
+function ActivityFeed({ events }) {
+  const navigate = useNavigate();
+  const visible = events.slice(0, 5);
+  return (
+    <div style={{ background: 'var(--card-bg)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', border: '1px solid var(--border)', borderRadius: 8, padding: '18px 21px', flexShrink: 0 }}>
+      <div style={{ marginBottom: visible.length > 0 ? 14 : 0 }}>
+        <span style={{ fontSize: 11, fontWeight: 500, color: 'var(--text-secondary)', letterSpacing: 0.8, textTransform: 'uppercase' }}>Recent Activity</span>
+      </div>
+      {visible.length === 0 ? (
+        <div style={{ fontSize: 13, color: 'var(--text-muted)', marginTop: 14 }}>No recent activity</div>
+      ) : visible.map((e, i) => (
+        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: i > 0 ? 10 : 0 }}>
+          <ActionIcon actionKey={e.actionKey} />
+          <div style={{ flex: 1, minWidth: 0, fontSize: 13, lineHeight: 1.4 }}>
+            {e.actorId
+              ? <button type="button" className="dashboard-inline-link" onClick={() => navigate(`/profile/${e.actorId}`)}>{e.name}</button>
+              : <span style={{ color: 'var(--text-primary)' }}>{e.name}</span>
+            }
+            {e.action && <span style={{ color: 'var(--text-muted)' }}> {e.action}</span>}
+            {e.task && e.taskId
+              ? <><span style={{ color: 'var(--text-muted)' }}> </span><button type="button" className="dashboard-inline-link" onClick={() => navigate(`/requests/${e.taskId}`)}>{e.task}</button></>
+              : e.task && <span style={{ color: 'var(--text-primary)' }}> {e.task}</span>
+            }
+          </div>
+          <span style={{ fontSize: 11, color: 'var(--text-muted)', whiteSpace: 'nowrap', flexShrink: 0 }}>{e.time.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function getDateKey(date) {
+  const d = new Date(date);
+  if (Number.isNaN(d.getTime())) return null;
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+}
+
+function profilePath(id) {
+  return `/profile/${id}`;
+}
+
+function MiniCalendar({ items = [] }) {
+  const navigate = useNavigate();
+  const today = new Date();
+  const [view, setView] = useState({ year: today.getFullYear(), month: today.getMonth() });
+  const [hoveredKey, setHoveredKey] = useState(null);
+  const hoverTimeout = useRef(null);
+  const clearHover = () => { hoverTimeout.current = setTimeout(() => setHoveredKey(null), 120); };
+  const keepHover = (k) => { clearTimeout(hoverTimeout.current); if (k) setHoveredKey(k); };
+  const { year, month } = view;
+  const firstDay = new Date(year, month, 1).getDay();
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const cells = [];
+  for (let i = 0; i < firstDay; i++) cells.push(null);
+  for (let d = 1; d <= daysInMonth; d++) cells.push(d);
+  const isToday = (d) => d === today.getDate() && month === today.getMonth() && year === today.getFullYear();
+  const dayKey = (d) => `${year}-${String(month + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
+  const itemsByDay = useMemo(() => {
+    const map = new Map();
+    (items || []).forEach(item => {
+      const key = getDateKey(item.deadline);
+      if (!key) return;
+      const list = map.get(key) || [];
+      list.push(item);
+      map.set(key, list);
+    });
+    return map;
+  }, [items]);
+  const activeKey = hoveredKey;
+  const activeItems = (itemsByDay.get(activeKey) || []).slice().sort((a, b) => {
+    if (a.isOverdue !== b.isOverdue) return a.isOverdue ? -1 : 1;
+    if (a.isHot !== b.isHot) return a.isHot ? -1 : 1;
+    return (a.title || '').localeCompare(b.title || '');
+  });
+  const monthLabel = new Date(year, month, 1).toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
+  const prev = () => setView(v => v.month === 0 ? { year: v.year - 1, month: 11 } : { year: v.year, month: v.month - 1 });
+  const next = () => setView(v => v.month === 11 ? { year: v.year + 1, month: 0 } : { year: v.year, month: v.month + 1 });
+  const dotColor = (item) => {
+    if (item.isOverdue) return '#ef4444';
+    if (item.isHot) return '#F5A523';
+    if (item.isDone) return '#4ade80';
+    return '#60a5fa';
+  };
+  const activeLabel = activeKey
+    ? new Date(`${activeKey}T12:00:00`).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+    : 'Selected day';
+  return (
+    <div style={{ position: 'relative', zIndex: activeKey ? 1001 : 0, overflow: 'visible', background: 'var(--card-bg)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', border: '1px solid var(--border)', borderRadius: 8, padding: '18px 21px', flexShrink: 0 }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
+        <span style={{ fontSize: 11, fontWeight: 500, color: 'var(--text-secondary)', letterSpacing: 0.8, textTransform: 'uppercase' }}>{monthLabel}</span>
+        <div style={{ display: 'flex', gap: 6 }}>
+          <button onClick={prev} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '2px 4px', color: 'var(--text-muted)', display: 'flex', alignItems: 'center' }}>
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><polyline points="15,18 9,12 15,6"/></svg>
+          </button>
+          <button onClick={next} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '2px 4px', color: 'var(--text-muted)', display: 'flex', alignItems: 'center' }}>
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><polyline points="9,18 15,12 9,6"/></svg>
+          </button>
+        </div>
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 2, textAlign: 'center' }}>
+        {['S','M','T','W','T','F','S'].map((d, i) => (
+          <div key={i} style={{ fontSize: 10, fontWeight: 600, color: 'var(--text-muted)', letterSpacing: 0.5, paddingBottom: 6 }}>{d}</div>
+        ))}
+        {cells.map((d, i) => {
+          const key = d ? dayKey(d) : null;
+          const dayItems = key ? itemsByDay.get(key) || [] : [];
+          const active = key && key === activeKey;
+          const hasItems = dayItems.length > 0;
+          return (
+            <div key={i} style={{ position: 'relative' }} onMouseEnter={() => keepHover(key)} onMouseLeave={clearHover}>
+              <button
+                type="button"
+                onClick={() => {
+                  if (dayItems.length === 1) navigate(`/requests/${dayItems[0].id}`);
+                }}
+                disabled={!d}
+                style={{
+                  position: 'relative',
+                  width: 28,
+                  height: 28,
+                  borderRadius: '50%',
+                  border: active && !isToday(d) && hasItems ? '1px solid rgba(245,165,35,0.5)' : '1px solid transparent',
+                  color: d ? (isToday(d) ? '#0d0d0d' : 'var(--text-secondary)') : 'transparent',
+                  background: d && isToday(d) ? '#F5A523' : hasItems ? 'rgba(255,255,255,0.035)' : 'transparent',
+                  fontSize: 12,
+                  lineHeight: 1,
+                  fontWeight: isToday(d) ? 700 : 400,
+                  cursor: d && hasItems ? 'pointer' : 'default',
+                  fontFamily: 'inherit',
+                  padding: 0,
+                }}
+              >
+                {d || ''}
+                {hasItems && (
+                  <span style={{ position: 'absolute', left: '50%', bottom: 3, transform: 'translateX(-50%)', display: 'flex', gap: 2 }}>
+                    {dayItems.slice(0, 3).map((item, idx) => (
+                      <span key={`${item.id}-${idx}`} style={{ width: 3, height: 3, borderRadius: '50%', background: isToday(d) ? '#0d0d0d' : dotColor(item), display: 'block' }} />
+                    ))}
+                  </span>
+                )}
+              </button>
+              {active && hasItems && (
+                <div onMouseEnter={() => keepHover(key)} onMouseLeave={clearHover} style={{ position: 'absolute', zIndex: 1002, right: 'calc(100% + 8px)', top: '50%', transform: 'translateY(-50%)', width: 210, padding: '10px 12px', background: 'var(--sidebar-bg)', border: '1px solid var(--border)', borderRadius: 8, boxShadow: '0 12px 32px rgba(0,0,0,0.45)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', pointerEvents: 'auto' }}>
+                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6 }}>
+                    <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>{activeLabel}</span>
+                    <span style={{ fontSize: 11, color: '#F5A523' }}>{activeItems.length} due</span>
+                  </div>
+                  {activeItems.slice(0, 4).map(item => (
+                    <button key={item.id} type="button" onClick={() => navigate(`/requests/${item.id}`)} style={{ display: 'flex', alignItems: 'center', gap: 7, width: '100%', padding: '5px 0', background: 'transparent', border: 'none', cursor: 'pointer', textAlign: 'left', fontFamily: 'inherit' }}>
+                      <span style={{ width: 6, height: 6, borderRadius: '50%', background: dotColor(item), flexShrink: 0 }} />
+                      <span style={{ flex: 1, minWidth: 0, fontSize: 12, color: 'var(--text-primary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{item.title}</span>
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function HotItemsCard({ submissions, tasks }) {
+  const navigate = useNavigate();
+  const { sortKey, sortDir, toggle, sort } = useSortable('deadline');
+  const taskMap = new Map((tasks || []).map(t => [t.id, t]));
+  const seen = new Set();
+  const hotItems = (submissions || [])
+    .filter(s => s.is_hot && !seen.has(s.task_id) && seen.add(s.task_id))
+    .map(s => ({ ...s, task: taskMap.get(s.task_id) }))
+    .filter(s => s.task)
+    .sort((a, b) => {
+      if (!a.deadline && !b.deadline) return 0;
+      if (!a.deadline) return 1;
+      if (!b.deadline) return -1;
+      return new Date(a.deadline) - new Date(b.deadline);
+    })
+    .slice(0, 7);
+  const sortedHotItems = sort(hotItems, (s, key) => {
+    if (key === 'task') return s.task?.title || '';
+    if (key === 'requested_by') return s.submitted_by_name || '';
+    if (key === 'deadline') return s.deadline || '';
+    return '';
+  });
+  return (
+    <div style={{ background: 'var(--card-bg)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', border: '1px solid var(--border)', borderRadius: 8, padding: '18px 21px', display: 'flex', flexDirection: 'column' }}>
+      <div style={{ marginBottom: hotItems.length > 0 ? 14 : 0, flexShrink: 0 }}>
+        <span style={{ fontSize: 11, fontWeight: 500, color: 'var(--text-secondary)', letterSpacing: 0.8, textTransform: 'uppercase' }}>Hot Items</span>
+      </div>
+      {hotItems.length === 0 ? (
+        <div style={{ fontSize: 13, color: 'var(--text-muted)' }}>No hot items</div>
+      ) : (
+        <table style={{ width: '100%', borderCollapse: 'collapse', tableLayout: 'fixed' }}>
+          <colgroup>
+            <col style={{ width: '10%' }} />
+            <col style={{ width: '40%' }} />
+            <col style={{ width: '35%' }} />
+            <col style={{ width: '15%' }} />
+          </colgroup>
+          <thead style={{ background: 'transparent' }}>
+            <tr style={{ background: 'transparent' }}>
+              <th style={{ padding: '0 0 12px 0', border: 'none', background: 'transparent', verticalAlign: 'top', textAlign: 'center' }} />
+              <SortTh col="task" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-muted)', textAlign: 'left', letterSpacing: 0.6, textTransform: 'uppercase', padding: '0 0 12px 5px', border: 'none', background: 'transparent', verticalAlign: 'top' }}>Task</SortTh>
+              <SortTh col="requested_by" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-muted)', textAlign: 'center', letterSpacing: 0.6, textTransform: 'uppercase', padding: '0 0 12px 0', border: 'none', background: 'transparent', verticalAlign: 'top' }}>Requested By</SortTh>
+              <SortTh col="deadline" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-muted)', textAlign: 'center', letterSpacing: 0.6, textTransform: 'uppercase', padding: '0 0 12px 0', border: 'none', background: 'transparent', verticalAlign: 'top' }}>Due By</SortTh>
+            </tr>
+          </thead>
+          <tbody>
+            {sortedHotItems.map(s => (
+              <tr key={s.task_id} style={{ verticalAlign: 'middle', background: 'transparent' }}>
+                <td style={{ padding: '3px 5px 7px', border: 'none', background: 'transparent', textAlign: 'center', verticalAlign: 'middle' }}>
+                  {s.task.status === 'client_approved' ? (
+                    <svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="rgba(74,222,128,0.8)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ display: 'block', margin: '0 auto' }}>
+                      <rect x="1.5" y="1.5" width="13" height="13" rx="2"/><polyline points="4,8 6.5,10.5 12,5.5"/>
+                    </svg>
+                  ) : (
+                    <svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="var(--text-muted)" strokeWidth="1.5" strokeLinecap="round" style={{ display: 'block', margin: '0 auto' }}>
+                      <rect x="1.5" y="1.5" width="13" height="13" rx="2"/>
+                    </svg>
+                  )}
+                </td>
+                <td style={{ fontSize: 13, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', padding: '5px', border: 'none', background: 'transparent', textAlign: 'left' }}>
+                  <button type="button" className="dashboard-inline-link" onClick={() => navigate('/requests/' + s.task_id)}>{s.task.title}</button>
+                </td>
+                <td style={{ fontSize: 12, color: 'var(--text-primary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '5px', border: 'none', background: 'transparent', textAlign: 'center' }}>
+                  {s.submitted_by ? (
+                    <button type="button" className="dashboard-inline-link" onClick={() => navigate(profilePath(s.submitted_by, s.submitter_role))}>{s.submitted_by_name || 'Profile'}</button>
+                  ) : (s.submitted_by_name || '—')}
+                </td>
+                <td style={{ fontSize: 12, color: 'var(--text-primary)', whiteSpace: 'nowrap', textAlign: 'center', padding: '5px', border: 'none', background: 'transparent' }}>{s.deadline ? new Date(s.deadline).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) : '—'}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+}
+
+function ClientHighlightCard({ highlights }) {
+  const navigate = useNavigate();
+  const { sortKey, sortDir, toggle, sort } = useSortable('company');
+  const fmt = (n) => `$${Number(n || 0).toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}`;
+  const thStyle = { fontSize: 10, fontWeight: 500, color: 'var(--text-muted)', textAlign: 'center', letterSpacing: 0.6, textTransform: 'uppercase', padding: '0 0 12px 0', border: 'none', background: 'transparent', verticalAlign: 'top' };
+  const td = () => ({ padding: '5px', border: 'none', background: 'transparent', textAlign: 'center', verticalAlign: 'middle' });
+  const sortedHighlights = sort(highlights || [], (row, key) => {
+    if (key === 'company') return row.company?.name || '';
+    if (key === 'contact') return row.primaryContact?.name || '';
+    if (key === 'projects') return row.projectCount || 0;
+    if (key === 'open_tasks') return row.openTaskCount || 0;
+    if (key === 'outstanding') return Number(row.outstandingTotal || 0);
+    if (key === 'paid') return Number(row.paidTotal || 0);
+    return '';
+  });
+  return (
+    <div style={{ background: 'var(--card-bg)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', border: '1px solid var(--border)', borderRadius: 8, padding: '18px 21px', display: 'flex', flexDirection: 'column' }}>
+      <div style={{ marginBottom: highlights && highlights.length > 0 ? 14 : 0, flexShrink: 0 }}>
+        <span style={{ fontSize: 11, fontWeight: 500, color: 'var(--text-secondary)', letterSpacing: 0.8, textTransform: 'uppercase' }}>Client Highlight</span>
+      </div>
+      {!highlights || highlights.length === 0 ? (
+        <div style={{ fontSize: 13, color: 'var(--text-muted)' }}>No data</div>
+      ) : (
+        <table style={{ width: '100%', borderCollapse: 'collapse', tableLayout: 'fixed' }}>
+          <colgroup>
+            <col style={{ width: '5%' }} />
+            <col style={{ width: '22%' }} />
+            <col style={{ width: '23%' }} />
+            <col style={{ width: '13%' }} />
+            <col style={{ width: '13%' }} />
+            <col style={{ width: '12%' }} />
+            <col style={{ width: '12%' }} />
+          </colgroup>
+          <thead style={{ background: 'transparent' }}>
+            <tr style={{ background: 'transparent' }}>
+              <th style={{ ...thStyle, padding: '0 0 12px 5px' }} />
+              <SortTh col="company" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ ...thStyle, textAlign: 'left', paddingLeft: 5 }}>Company</SortTh>
+              <SortTh col="contact" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={thStyle}>Contact</SortTh>
+              <SortTh col="projects" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={thStyle}>Projects</SortTh>
+              <SortTh col="open_tasks" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={thStyle}>Open Tasks</SortTh>
+              <SortTh col="outstanding" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={thStyle}>Outstanding</SortTh>
+              <SortTh col="paid" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={thStyle}>Paid</SortTh>
+            </tr>
+          </thead>
+          <tbody>
+            {sortedHighlights.map(({ company, primaryContact, projectCount, openTaskCount, outstandingTotal = 0, paidTotal = 0 }) => (
+              <tr key={company.id} style={{ background: 'transparent' }}>
+                <td style={{ ...td(), padding: '3px 5px 7px' }}>
+                  <InitialPortrait name={company.name} />
+                </td>
+                <td style={{ ...td(), fontSize: 13, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'left' }}>
+                  <button type="button" className="dashboard-inline-link" onClick={() => navigate(`/company/${company.id}`)}>{company.name}</button>
+                </td>
+                <td style={{ ...td(), fontSize: 12, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                  {primaryContact?.id ? (
+                    <button type="button" className="dashboard-inline-link" onClick={() => navigate(profilePath(primaryContact.id, primaryContact.role))}>{primaryContact.name || 'Profile'}</button>
+                  ) : (primaryContact?.name || '—')}
+                </td>
+                <td style={{ ...td(), fontSize: 12, color: 'var(--text-primary)' }}>{projectCount}</td>
+                <td style={{ ...td(), fontSize: 12, color: 'var(--text-primary)' }}>{openTaskCount || 0}</td>
+                <td style={{ ...td(), fontSize: 12, color: '#F5A523' }}>{fmt(outstandingTotal)}</td>
+                <td style={{ ...td(), fontSize: 12, color: '#4ade80' }}>{fmt(paidTotal)}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+}
+
+function TeamPerformanceCard({ tasks }) {
+  const doneStatuses = ['client_approved', 'invoiced', 'paid'];
+  const allMonthOpts = useMemo(() => {
+    const opts = [];
+    const now = new Date();
+    for (let i = 0; i < 6; i++) {
+      const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
+      opts.push({ value: `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`, label: i === 0 ? 'This Month' : d.toLocaleDateString('en-US', { month: 'long', year: 'numeric' }) });
+    }
+    return opts;
+  }, []);
+  const monthsWithData = useMemo(() => new Set(
+    (tasks || []).filter(t => doneStatuses.includes(t.status) && t.completed_at).map(t => {
+      const d = new Date(t.completed_at);
+      return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
+    })
+  ), [tasks]); // eslint-disable-line react-hooks/exhaustive-deps
+  const monthOpts = allMonthOpts.filter(o => monthsWithData.has(o.value));
+  const [monthKey, setMonthKey] = useState(() => monthOpts[0]?.value || allMonthOpts[0].value);
+
+  const { people, totalDone } = useMemo(() => {
+    const [year, month] = monthKey.split('-').map(Number);
+    const map = new Map();
+    (tasks || []).forEach(t => {
+      if (!doneStatuses.includes(t.status) || !t.completed_at) return;
+      const d = new Date(t.completed_at);
+      if (d.getFullYear() !== year || d.getMonth() + 1 !== month) return;
+      if (!t.assigned_name) return;
+      const entry = map.get(t.assigned_name) || { name: t.assigned_name, newCount: 0, revCount: 0 };
+      if ((t.current_version || 0) === 0) entry.newCount += 1;
+      else entry.revCount += 1;
+      map.set(t.assigned_name, entry);
+    });
+    const people = [...map.values()].map(p => ({ ...p, done: p.newCount + p.revCount })).sort((a, b) => b.done - a.done);
+    return { people, totalDone: people.reduce((s, p) => s + p.done, 0) };
+  }, [tasks, monthKey]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <div style={{ background: 'var(--card-bg)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', border: '1px solid var(--border)', borderRadius: 8, padding: '18px 21px', display: 'flex', flexDirection: 'column' }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14, flexShrink: 0 }}>
+        <span style={{ fontSize: 11, fontWeight: 500, color: 'var(--text-secondary)', letterSpacing: 0.8, textTransform: 'uppercase' }}>Team Performance</span>
+        <div style={{ position: 'relative', display: 'inline-flex', alignItems: 'center' }}>
+          <select value={monthKey} onChange={e => setMonthKey(e.target.value)} style={{ fontSize: 11, color: 'var(--text-muted)', background: 'transparent', border: 'none', boxShadow: 'none', cursor: 'pointer', outline: 'none', fontFamily: 'inherit', appearance: 'none', WebkitAppearance: 'none', MozAppearance: 'none', paddingRight: 14 }}>
+            {monthOpts.map(o => <option key={o.value} value={o.value} style={{ background: '#1a1a1a' }}>{o.label}</option>)}
+          </select>
+          <svg width="8" height="8" viewBox="0 0 8 8" fill="none" style={{ position: 'absolute', right: 0, pointerEvents: 'none' }} stroke="rgba(255,255,255,0.5)" strokeWidth="1.5" strokeLinecap="round"><polyline points="1,2 4,6 7,2"/></svg>
+        </div>
+      </div>
+      {people.slice(0, 5).length === 0 ? (
+        <div style={{ fontSize: 13, color: 'var(--text-muted)', flex: 1 }}>No completed tasks this month</div>
+      ) : (
+        <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
+          {people.slice(0, 5).map((p, i) => {
+            const pct = totalDone > 0 ? Math.round((p.done / totalDone) * 100) : 0;
+            const tone = iconTone(p.name);
+            return (
+              <div key={p.name} style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: i > 0 ? 10 : 0 }}>
+                <Avatar name={p.name} />
+                <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 4 }}>
+                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                    <span style={{ fontSize: 13, color: 'var(--text-primary)', fontWeight: 400, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.name}</span>
+                    <span style={{ fontSize: 11, color: 'var(--text-muted)', flexShrink: 0, marginLeft: 8 }}>{p.newCount} new · {p.revCount} revision</span>
+                  </div>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                    <div style={{ flex: 1, height: 4, borderRadius: 2, background: tone.bg, overflow: 'hidden' }}>
+                      <div style={{ height: '100%', borderRadius: 2, background: tone.color, width: `${pct}%`, transition: 'width 0.3s ease' }} />
+                    </div>
+                    <span style={{ fontSize: 11, color: 'var(--text-muted)', minWidth: 28, textAlign: 'right' }}>{pct}%</span>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Page ──────────────────────────────────────────────────────────────────
+
+const CACHE_KEY = 'team_dashboard_v2';
+const CUTOFF_MONTHS = 6;
+
+export default function TeamDashboard() {
+  useAuth(); // ensures auth context loaded
+  const cached = readPageCache(CACHE_KEY, 5 * 60_000);
+
+  const [tasks, setTasks] = useState(() => cached?.tasks || []);
+  const [projects, setProjects] = useState(() => cached?.projects || []);
+  const [submissions, setSubmissions] = useState(() => cached?.submissions || []);
+  const [allCompanies, setAllCompanies] = useState(() => cached?.companies || []);
+  const [clientProfiles, setClientProfiles] = useState(() => cached?.clientProfiles || []);
+  const [companyMemberships, setCompanyMemberships] = useState(() => cached?.companyMemberships || []);
+  const [activityLog, setActivityLog] = useState(() => cached?.activityLog || []);
+  const [teamInvoices, setTeamInvoices] = useState(() => cached?.teamInvoices || []);
+  const [teamExpenses, setTeamExpenses] = useState([]);
+  const [loading, setLoading] = useState(!cached);
+
+  useEffect(() => {
+    let cancelled = false;
+    async function load() {
+      try {
+        const cutoff = new Date();
+        cutoff.setMonth(cutoff.getMonth() - CUTOFF_MONTHS);
+        const cutoffStr = cutoff.toISOString();
+
+        const [
+          { data: t },
+          { data: p },
+          { data: subs },
+          { data: profiles },
+          { data: activity },
+          { data: cos },
+          { data: memRows },
+        ] = await withTimeout(Promise.all([
+          supabase.from('tasks').select('id, title, status, current_version, project_id, assigned_name, assigned_to, completed_at').gte('submitted_at', cutoffStr).order('submitted_at', { ascending: false }),
+          supabase.from('projects').select('id, name, status, company_id'),
+          supabase.from('submissions').select('task_id, version_number, deadline, type, submitted_by, submitted_by_name, is_hot, delivery:deliveries(sent_by, sent_at)').gte('submitted_at', cutoffStr).order('version_number', { ascending: false }),
+          supabase.from('profiles').select('id, role, name, email, company_id, brand_book_rate'),
+          supabase.from('activity_log').select('id, created_at, actor_id, actor_name, action, task_id, task_title, project_name, project_id').order('created_at', { ascending: false }).limit(20),
+          supabase.from('companies').select('id, name').order('name'),
+          supabase.from('company_members').select('company_id, profile_id'),
+        ]), 30000, 'TeamDashboard load');
+
+        if (cancelled) return;
+
+        const roleById = new Map((profiles || []).map(pr => [pr.id, pr.role]));
+        const roleByName = new Map((profiles || []).map(pr => [pr.name, pr.role]));
+        const clients = (profiles || []).filter(pr => pr.role === 'client');
+
+        const tasksWithDeadlines = (t || []).map(task => ({
+          ...task,
+          deadline: getDeadlineSourceSubmission(task, subs)?.deadline || null,
+          assignee_role: roleById.get(task.assigned_to) || null,
+        }));
+        const subsWithRole = (subs || []).map(sub => ({
+          ...sub,
+          submitter_role: roleById.get(sub.submitted_by) || null,
+          delivery_sender_role: roleByName.get(sub.delivery?.sent_by) || null,
+        }));
+
+        setTasks(tasksWithDeadlines);
+        setProjects(p || []);
+        setSubmissions(subsWithRole);
+        setClientProfiles(clients);
+        setAllCompanies(cos || []);
+        setCompanyMemberships(memRows || []);
+        setActivityLog(activity || []);
+
+        writePageCache(CACHE_KEY, {
+          tasks: tasksWithDeadlines, projects: p || [], submissions: subsWithRole,
+          clientProfiles: clients, companies: cos || [], companyMemberships: memRows || [],
+          activityLog: activity || [], teamInvoices: [],
+        });
+
+        supabase.from('invoices').select('total, status, company_id, created_at').in('status', ['sent', 'paid']).then(({ data: invs }) => {
+          if (invs && !cancelled) setTeamInvoices(invs);
+        });
+        supabase.from('expenses').select('amount').then(({ data: exps }) => {
+          if (exps && !cancelled) setTeamExpenses(exps);
+        });
+      } catch (err) {
+        console.error('TeamDashboard load failed:', err);
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+    load();
+    return () => { cancelled = true; };
+  }, []);
+
+  const teamHighlights = useMemo(() =>
+    buildClientHighlights(allCompanies, projects, tasks, clientProfiles, companyMemberships, teamInvoices)
+      .sort((a, b) => b.openTaskCount - a.openTaskCount || b.projectCount - a.projectCount || a.company.name.localeCompare(b.company.name))
+      .slice(0, 5),
+  [allCompanies, projects, tasks, clientProfiles, companyMemberships, teamInvoices]);
+
+  const activityEvents = useMemo(() =>
+    (activityLog || []).map(e => ({
+      time: new Date(e.created_at),
+      name: e.actor_name || 'Fourge',
+      actorId: e.actor_id || null,
+      actionKey: e.action,
+      action: ACTION_LABEL[e.action] || e.action,
+      task: e.task_title || null,
+      taskId: e.task_id || null,
+      project: e.project_name || null,
+      projectId: e.project_id || null,
+    })).filter(e => !isNaN(e.time)).slice(0, 10),
+  [activityLog]);
+
+  if (loading) return <Layout><p style={{ padding: 24, color: 'var(--text-muted)' }}>Loading...</p></Layout>;
+
+  const doneStatuses = ['client_approved', 'invoiced', 'paid'];
+  const activeTasks = tasks.filter(t => !doneStatuses.includes(t.status));
+  const activeProjects = projects.filter(p => p.status !== 'completed' && p.status !== 'cancelled');
+  const hotTaskIds = new Set((submissions || []).filter(s => s.is_hot).map(s => s.task_id));
+  const calendarItems = tasks
+    .filter(t => t.deadline)
+    .map(t => {
+      const deadlineKey = getDateKey(t.deadline);
+      return {
+        id: t.id,
+        title: t.title,
+        deadline: t.deadline,
+        isHot: hotTaskIds.has(t.id),
+        isDone: doneStatuses.includes(t.status),
+        isOverdue: deadlineKey && deadlineKey < getDateKey(new Date()) && !doneStatuses.includes(t.status),
+      };
+    });
+  const dashRevenue = teamInvoices.filter(i => i.status === 'paid').reduce((s, i) => s + Number(i.total || 0), 0);
+  const dashOutstanding = teamInvoices.filter(i => i.status === 'sent').reduce((s, i) => s + Number(i.total || 0), 0);
+  const dashExpensesTotal = teamExpenses.reduce((s, e) => s + Number(e.amount || 0), 0);
+  const revenueByMonth = Array.from({ length: 4 }, (_, i) => {
+    const now = new Date();
+    const start = new Date(now.getFullYear(), now.getMonth() - (3 - i), 1);
+    const end = new Date(now.getFullYear(), now.getMonth() - (3 - i) + 1, 1);
+    return teamInvoices.filter(inv => inv.status === 'paid' && inv.created_at && new Date(inv.created_at) >= start && new Date(inv.created_at) < end).reduce((s, inv) => s + Number(inv.total || 0), 0);
+  });
+
+  return (
+    <Layout>
+      <div className="dash-stat-grid" style={{ gridTemplateColumns: '1fr 1fr 1fr 1.5fr', marginBottom: 0 }}>
+        <DashStatCard label="Open Tasks" value={activeTasks.length} sub="not complete" iconBg="rgba(167,139,250,0.15)" iconColor="#a78bfa" iconPath={DASH_ICONS.tasks} />
+        <DashStatCard label="Active Projects" value={activeProjects.length} sub={`${projects.length} total`} iconBg="rgba(96,165,250,0.15)" iconColor="#60a5fa" iconPath={DASH_ICONS.projects} />
+        <DashStatCard label="Net Profit" value={fmtMoney(dashRevenue - dashExpensesTotal)} sub={`${fmtMoney(dashExpensesTotal)} expenses`} iconBg="rgba(74,222,128,0.15)" iconColor="#4ade80" iconPath={DASH_ICONS.profit} />
+        <DashStatCard label="Revenue" value={fmtMoney(dashRevenue)} sub={`${fmtMoney(dashOutstanding)} outstanding`} iconBg="rgba(245,165,35,0.15)" iconColor="#F5A523" iconPath={DASH_ICONS.revenue} chartData={revenueByMonth} />
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 280px', gap: 24, marginTop: 24 }}>
+        <ActivityFeed events={activityEvents} />
+        <MiniCalendar items={calendarItems} />
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginTop: 24 }}>
+        <HotItemsCard submissions={submissions} tasks={tasks} />
+        <TeamPerformanceCard tasks={tasks} />
+      </div>
+      <div style={{ marginTop: 24 }}>
+        <ClientHighlightCard highlights={teamHighlights} />
+      </div>
+    </Layout>
+  );
+}
diff --git a/supabase/functions/send-email/index.ts b/supabase/functions/send-email/index.ts
index c1f89dc..efa76a1 100755
--- a/supabase/functions/send-email/index.ts
+++ b/supabase/functions/send-email/index.ts
@@ -12,7 +12,7 @@ const TEAM_EMAILS = [
   'twebb@fourgebranding.com',
 ];
 
-const ALLOWED_TYPES = ['new_request', 'sent_to_client', 'revision_submitted', 'client_approved', 'invoice_sent', 'receipt_sent', 'subcontractor_po_sent'] as const;
+const ALLOWED_TYPES = ['new_request', 'sent_to_client', 'revision_submitted', 'client_approved', 'invoice_sent', 'receipt_sent', 'subcontractor_po_sent', 'subcontractor_invoice_submitted'] as const;
 type EmailType = typeof ALLOWED_TYPES[number];
 
 // Types that only team members may trigger
@@ -391,8 +391,45 @@ serve(async (req) => {
       `;
     }
 
+    else if (type === 'subcontractor_invoice_submitted') {
+      const subName       = requireStr(data?.subName);
+      const invoiceNumber = requireStr(data?.invoiceNumber);
+      const total         = requireStr(data?.total);
+
+      subject = `New Invoice from ${esc(subName)} — #${esc(invoiceNumber)}`;
+      html = `
+        <div style="font-family:sans-serif;max-width:560px;margin:0 auto;color:#1a1a1a;">
+          <div style="background:#141414;padding:20px 28px;border-radius:8px 8px 0 0;">
+            <img src="https://portal.fourgebranding.com/fourge-logo.png" alt="Fourge Branding" style="height:28px;" />
+          </div>
+          <div style="background:#fff;padding:28px;border:1px solid #e5e7eb;border-top:none;border-radius:0 0 8px 8px;">
+            <h2 style="margin:0 0 8px;font-size:20px;">New Subcontractor Invoice</h2>
+            <p style="color:#555;margin:0 0 24px;">${esc(subName)} has submitted an invoice for review.</p>
+            <table style="width:100%;border-collapse:collapse;margin-bottom:24px;">
+              <tr style="background:#f9f9f9;">
+                <td style="padding:10px 14px;font-size:13px;color:#666;">Invoice #</td>
+                <td style="padding:10px 14px;font-size:13px;font-weight:700;text-align:right;">${esc(invoiceNumber)}</td>
+              </tr>
+              <tr>
+                <td style="padding:10px 14px;font-size:13px;color:#666;">Subcontractor</td>
+                <td style="padding:10px 14px;font-size:13px;font-weight:700;text-align:right;">${esc(subName)}</td>
+              </tr>
+              <tr style="background:#f9f9f9;">
+                <td style="padding:10px 14px;font-size:13px;color:#666;">Amount</td>
+                <td style="padding:10px 14px;font-size:18px;font-weight:700;color:#141414;text-align:right;">$${esc(total)}</td>
+              </tr>
+            </table>
+            <a href="https://portal.fourgebranding.com/invoices" style="display:block;background:#141414;color:#fff;text-align:center;padding:14px;border-radius:8px;text-decoration:none;font-weight:700;font-size:16px;margin-bottom:20px;">Review Invoice</a>
+            <p style="font-size:12px;color:#999;text-align:center;margin:0;">
+              Questions? <a href="mailto:hello@fourgebranding.com" style="color:#555;">hello@fourgebranding.com</a>
+            </p>
+          </div>
+        </div>
+      `;
+    }
+
     // ── 5. Resolve recipients ────────────────────────────────────────────────
-    const teamTypes = ['new_request', 'revision_submitted', 'client_approved'];
+    const teamTypes = ['new_request', 'revision_submitted', 'client_approved', 'subcontractor_invoice_submitted'];
     let recipients: string[];
     let cc: string[] | undefined;
 
diff --git a/supabase/migrations/20260520000000_add_activity_log.sql b/supabase/migrations/20260520000000_add_activity_log.sql
new file mode 100644
index 0000000..6b4c546
--- /dev/null
+++ b/supabase/migrations/20260520000000_add_activity_log.sql
@@ -0,0 +1,21 @@
+create table if not exists activity_log (
+  id uuid default gen_random_uuid() primary key,
+  created_at timestamptz default now(),
+  actor_id uuid references profiles(id) on delete set null,
+  actor_name text,
+  action text not null,
+  task_id uuid references tasks(id) on delete cascade,
+  task_title text,
+  project_id uuid references projects(id) on delete cascade,
+  project_name text
+);
+
+alter table activity_log enable row level security;
+
+create policy "authenticated read activity_log"
+  on activity_log for select
+  using (auth.role() = 'authenticated');
+
+create policy "authenticated insert activity_log"
+  on activity_log for insert
+  with check (auth.role() = 'authenticated');
diff --git a/supabase/migrations/20260520000001_auto_project_member_on_task_assign.sql b/supabase/migrations/20260520000001_auto_project_member_on_task_assign.sql
new file mode 100644
index 0000000..c55a582
--- /dev/null
+++ b/supabase/migrations/20260520000001_auto_project_member_on_task_assign.sql
@@ -0,0 +1,27 @@
+-- Auto-add external user to project_members when assigned to a task,
+-- so RLS "External reads assigned tasks" policy grants them project-wide task visibility.
+
+create or replace function public.sync_project_member_on_task_assign()
+returns trigger as $$
+begin
+  if new.assigned_to is not null and new.project_id is not null then
+    insert into public.project_members (project_id, profile_id)
+    values (new.project_id, new.assigned_to)
+    on conflict (project_id, profile_id) do nothing;
+  end if;
+  return new;
+end;
+$$ language plpgsql security definer;
+
+drop trigger if exists trg_sync_project_member_on_task_assign on public.tasks;
+create trigger trg_sync_project_member_on_task_assign
+  after insert or update of assigned_to
+  on public.tasks
+  for each row execute function public.sync_project_member_on_task_assign();
+
+-- Backfill existing assigned tasks
+insert into public.project_members (project_id, profile_id)
+select distinct project_id, assigned_to
+from public.tasks
+where assigned_to is not null and project_id is not null
+on conflict (project_id, profile_id) do nothing;
diff --git a/supabase/migrations/20260528000000_add_title_to_profiles.sql b/supabase/migrations/20260528000000_add_title_to_profiles.sql
new file mode 100644
index 0000000..950acfa
--- /dev/null
+++ b/supabase/migrations/20260528000000_add_title_to_profiles.sql
@@ -0,0 +1,2 @@
+alter table public.profiles
+  add column if not exists title text;