+```
+
+**Step 2: Verify visually**
+
+Run: `pnpm --filter @customer-portal/portal dev` (if dev server is running, just check the browser)
+Expected: Page title areas no longer have a bottom border, content flows smoothly below.
+
+**Step 3: Commit**
+
+```bash
+git add apps/portal/src/components/templates/PageLayout/PageLayout.tsx
+git commit -m "style: remove border from PageLayout header band"
+```
+
+---
+
+### Task 2: Add profile row to Sidebar
+
+**Files:**
+
+- Modify: `apps/portal/src/components/organisms/AppShell/Sidebar.tsx`
+
+**Step 1: Add SidebarProfile component**
+
+Add a new component inside `Sidebar.tsx`, before the `Sidebar` export. This renders the compact profile row with avatar initials, display name, and the notification bell.
+
+```tsx
+import { NotificationBell } from "@/features/notifications";
+
+interface SidebarProfileProps {
+ user: { firstName?: string | null; lastName?: string | null; email?: string | null } | null;
+ profileReady: boolean;
+}
+
+function getDisplayName(user: SidebarProfileProps["user"], profileReady: boolean): string {
+ const fullName = [user?.firstName, user?.lastName].filter(Boolean).join(" ");
+ const emailPrefix = user?.email?.split("@")[0];
+ if (profileReady) return fullName || emailPrefix || "Account";
+ return emailPrefix || "Account";
+}
+
+function getInitials(
+ user: SidebarProfileProps["user"],
+ profileReady: boolean,
+ displayName: string
+): string {
+ if (profileReady && user?.firstName && user?.lastName) {
+ return `${user.firstName[0]}${user.lastName[0]}`.toUpperCase();
+ }
+ return displayName.slice(0, 2).toUpperCase();
+}
+
+function SidebarProfile({ user, profileReady }: SidebarProfileProps) {
+ const displayName = getDisplayName(user, profileReady);
+ const initials = getInitials(user, profileReady, displayName);
+
+ return (
+
+
+
+
+ {initials}
+
+
+ {displayName}
+
+
+
+
+
+ );
+}
+```
+
+Note: The `NotificationBell` styling override uses Tailwind's child selector syntax to restyle the button for the dark sidebar context. The dropdown will still render with its normal popover styling since it uses `absolute` positioning with `bg-popover`.
+
+**Step 2: Update Sidebar props and render the profile row**
+
+Add `user` and `profileReady` to `SidebarProps`:
+
+```tsx
+interface SidebarProps {
+ navigation: NavigationItem[];
+ pathname: string;
+ expandedItems: string[];
+ toggleExpanded: (name: string) => void;
+ isMobile?: boolean;
+ user?: { firstName?: string | null; lastName?: string | null; email?: string | null } | null;
+ profileReady?: boolean;
+}
+```
+
+In the `Sidebar` component, render `SidebarProfile` between the logo area and the nav:
+
+```tsx
+export const Sidebar = memo(function Sidebar({
+ navigation,
+ pathname,
+ expandedItems,
+ toggleExpanded,
+ user,
+ profileReady = false,
+}: SidebarProps) {
+ return (
+
+
+ {/* ... existing logo ... */}
+
+
+ {/* Profile row */}
+
+
+
+
+
+
+ {/* ... existing logout ... */}
+
+
+ );
+});
+```
+
+**Step 3: Add Link import**
+
+Ensure `Link` from `next/link` is imported (it already is in the existing file).
+
+**Step 4: Verify build**
+
+Run: `pnpm type-check`
+Expected: No type errors.
+
+**Step 5: Commit**
+
+```bash
+git add apps/portal/src/components/organisms/AppShell/Sidebar.tsx
+git commit -m "feat: add profile row with notification bell to sidebar"
+```
+
+---
+
+### Task 3: Pass user data to Sidebar from AppShell
+
+**Files:**
+
+- Modify: `apps/portal/src/components/organisms/AppShell/AppShell.tsx`
+
+**Step 1: Pass user and profileReady props to both Sidebar instances**
+
+In `AppShell.tsx`, the `user` object from `useAppShellAuth` has `firstName`, `lastName`, `email` fields. Pass them to both the mobile and desktop `
` instances:
+
+For the mobile sidebar (around line 177):
+
+```tsx
+
+```
+
+For the desktop sidebar (around line 191):
+
+```tsx
+
+```
+
+Note: The auth store uses `firstname`/`lastname` (lowercase). The Sidebar's `SidebarProfile` expects `firstName`/`lastName` (camelCase) matching the Header convention. Map in the prop:
+
+```tsx
+user={user ? { firstName: user.firstname, lastName: user.lastname, email: user.email } : null}
+```
+
+**Step 2: Verify build**
+
+Run: `pnpm type-check`
+Expected: No type errors.
+
+**Step 3: Commit**
+
+```bash
+git add apps/portal/src/components/organisms/AppShell/AppShell.tsx
+git commit -m "feat: pass user data to sidebar for profile row"
+```
+
+---
+
+### Task 4: Remove Header from desktop, keep mobile hamburger
+
+**Files:**
+
+- Modify: `apps/portal/src/components/organisms/AppShell/AppShell.tsx`
+
+**Step 1: Replace the Header component with a mobile-only hamburger bar**
+
+In `AppShell.tsx`, replace the `` render (around line 203) with:
+
+```tsx
+{
+ /* Mobile-only hamburger bar */
+}
+
+
+
+
+
+