From bc35de5307024887b35fd3567ba7d23c7d6876aa Mon Sep 17 00:00:00 2001
From: Shreeya Adhikari <adh.shreeya@gmail.com>
Date: Wed, 19 Aug 2026 18:44:37 -0400
Subject: [PATCH] align accounts page with figma

---
 apps/frontend/src/app/accounts/page.tsx | 61 +++++++++++++++----------
 1 file changed, 38 insertions(+), 23 deletions(-)

diff --git a/apps/frontend/src/app/accounts/page.tsx b/apps/frontend/src/app/accounts/page.tsx
index 5bd1f7a5..e7ee9ed8 100644
--- a/apps/frontend/src/app/accounts/page.tsx
+++ b/apps/frontend/src/app/accounts/page.tsx
@@ -1,6 +1,8 @@
 'use client';
 
 import React, { useState } from 'react';
+import NavBar from '../components/Navbar';
+import Header from '../components/Header';
 import StaffCard from '../components/StaffCard';
 import AddUserModal from '../components/AddUserModal';
 import { Button } from '@chakra-ui/react';
@@ -10,29 +12,42 @@ export default function AccountsPage() {
     const [isModalOpen, setIsModalOpen] = useState(false);
 
     return (
-        <div className="!p-6">
-            <div className="flex items-center justify-between !mb-4">
-                <h1 className="![font-family:var(--font-heading)] !text-[length:var(--font-size-heading-1)] !font-semibold">Accounts</h1>
-                <Button
-                    backgroundColor="var(--color-core-green)"
-                    color="var(--color-core-white)"
-                    onClick={() => setIsModalOpen(true)}
-                >
-                    + Add User
-                </Button>
-            </div>
-            <h3 className="![font-family:var(--font-heading)] !text-[length:var(--font-size-heading-3)] !font-semibold">Core BRANCH Facilitation Team</h3>
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 !pt-3 !pb-7">
-                {facilitationTeam.map(user => (
-                    <StaffCard key={user.user_id} name={user.name} email={user.email} />
-                ))}
-            </div>
-            <h3 className="![font-family:var(--font-heading)] !text-[length:var(--font-size-heading-3)] !font-semibold">BRANCH Team Members</h3>
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 !pt-3 !pb-7">
-                {teamMembers.map(user => (
-                    <StaffCard key={user.user_id} name={user.name} email={user.email} />
-                ))}
-            </div>
+        <div className="flex min-h-screen">
+            <NavBar />
+            <main className="min-w-0 flex-1 bg-core-white">
+                <Header />
+                <div className="flex flex-col !gap-4 !px-4 !py-5 sm:!px-8">
+                    <div className="flex items-center justify-between !mb-2">
+                        <h1>Accounts</h1>
+                        <Button
+                            backgroundColor="var(--color-core-green)"
+                            color="var(--color-core-white)"
+                            onClick={() => setIsModalOpen(true)}
+                        >
+                            + Add User
+                        </Button>
+                    </div>
+
+                    <section className="flex flex-col !gap-3">
+                        <h3 className="!font-semibold">Core BRANCH Facilitation Team</h3>
+                        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
+                            {facilitationTeam.map(user => (
+                                <StaffCard key={user.user_id} name={user.name} email={user.email} />
+                            ))}
+                        </div>
+                    </section>
+
+                    <section className="flex flex-col !gap-3 !pt-2">
+                        <h3 className="!font-semibold">BRANCH Team Members</h3>
+                        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
+                            {teamMembers.map(user => (
+                                <StaffCard key={user.user_id} name={user.name} email={user.email} />
+                            ))}
+                        </div>
+                    </section>
+                </div>
+            </main>
+
             <AddUserModal
                 open={isModalOpen}
                 onClose={() => setIsModalOpen(false)}