From 1b3db638aa2f69980c00be3d6d2d347850856c19 Mon Sep 17 00:00:00 2001
From: minado05 <athudo@g.ucla.edu>
Date: Thu, 14 May 2026 21:43:34 -0700
Subject: [PATCH 1/4] moved update button down

---
 app/(main)/components/PhotoUpload.tsx         |  8 +--
 .../people/[userId]/components/Dropdown.tsx   |  7 +-
 app/(main)/team/people/[userId]/page.tsx      | 64 +++++++++++++------
 3 files changed, 53 insertions(+), 26 deletions(-)

diff --git a/app/(main)/components/PhotoUpload.tsx b/app/(main)/components/PhotoUpload.tsx
index 7dec412d..7e44a81a 100644
--- a/app/(main)/components/PhotoUpload.tsx
+++ b/app/(main)/components/PhotoUpload.tsx
@@ -2,7 +2,7 @@
 
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import Image from 'next/image';
-import defaultProfilePhoto from '@/public/default-profile-picture.png';
+import imagePlaceholder from '@/public/image-placeholder.svg';
 import uploadPhotoIcon from '@/public/image-upload.svg';
 import styles from './PhotoUpload.module.css';
 
@@ -58,10 +58,10 @@ const PhotoUpload = forwardRef<{ resetFile: () => void }, PhotoUploadProps>(
     };
 
     const displayImage = isPendingDelete
-      ? defaultProfilePhoto.src
-      : previewUrl || initialPhotoUrl || defaultProfilePhoto.src;
+      ? imagePlaceholder.src
+      : previewUrl || initialPhotoUrl || imagePlaceholder.src;
 
-    const hasPhoto = displayImage !== defaultProfilePhoto.src;
+    const hasPhoto = displayImage !== imagePlaceholder.src;
 
     return (
       <div className={styles.wrapper}>
diff --git a/app/(main)/team/people/[userId]/components/Dropdown.tsx b/app/(main)/team/people/[userId]/components/Dropdown.tsx
index b7d81e8d..80f55f4c 100644
--- a/app/(main)/team/people/[userId]/components/Dropdown.tsx
+++ b/app/(main)/team/people/[userId]/components/Dropdown.tsx
@@ -60,6 +60,7 @@ export default function Dropdown({
     >
       <select
         name="role"
+        className="form-select w-auto"
         value={currentRoleId}
         onChange={(e) => setCurrentRoleId(Number(e.target.value))}
       >
@@ -69,7 +70,11 @@ export default function Dropdown({
           </option>
         ))}
       </select>
-      <button type="submit">Update role</button>
+      <div className="btn-row">
+        <button className="btn-submit" type="submit">
+          Update role
+        </button>
+      </div>
     </form>
   );
 }
diff --git a/app/(main)/team/people/[userId]/page.tsx b/app/(main)/team/people/[userId]/page.tsx
index 2ad58297..0fcff2fa 100644
--- a/app/(main)/team/people/[userId]/page.tsx
+++ b/app/(main)/team/people/[userId]/page.tsx
@@ -2,6 +2,7 @@ import { createClient } from '@/app/lib/supabase/server-client';
 import Breadcrumbs from '@/app/(main)/components/Breadcrumbs';
 import Dropdown from '@/app/(main)/team/people/[userId]/components/Dropdown';
 import Image from 'next/image';
+import styles from '@/app/(main)/components/ProfilePage.module.css';
 import imagePlaceholder from '@/public/image-placeholder.svg';
 
 export default async function TeamProfilePage({
@@ -35,27 +36,48 @@ export default async function TeamProfilePage({
   }
 
   return (
-    <div>
-      <Breadcrumbs
-        labelMap={{
-          '/team': 'Team',
-          '/team/people': 'People',
-          [`/team/people/${userId}`]: `${user.first_name || 'FirstName'} ${user.last_name || 'LastName'}`,
-        }}
-      />
-
-      <Image
-        src={user.profile_photo_url || imagePlaceholder}
-        alt={user.first_name + ' ' + user.last_name}
-        height={64}
-        width={64}
-        unoptimized
-      />
-      <p>
-        Name: {user.first_name || 'FirstName'} {user.last_name || 'LastName'}
-      </p>
-      <p>Email: {user.email}</p>
-      <Dropdown userId={userId} roleId={role?.role_id} />
+    <div className="form-body">
+      <h1>Profile</h1>
+      <div style={{ height: '50px' }} />
+      {/* same styling as profile page */}
+      <div className={styles.card}>
+        <div className={styles.cardBody}>
+          <h2 className={styles.userInfoText}>User Information</h2>
+
+          <div className={styles.avatarCircle}>
+            <Image
+              src={user.profile_photo_url || imagePlaceholder}
+              alt={user.first_name + ' ' + user.last_name}
+              width={96}
+              height={96}
+              unoptimized
+            />
+          </div>
+
+          <div className={styles.fieldGroup}>
+            <div className="two-col-row">
+              <div>
+                <label className={styles.profileLabel}>First name</label>
+                <p className="form-control-plaintext">{user.first_name}</p>
+              </div>
+              <div>
+                <label className={styles.profileLabel}>Last name</label>
+                <p className="form-control-plaintext">{user.last_name}</p>
+              </div>
+            </div>
+          </div>
+
+          <div className={styles.fieldGroup}>
+            <label className={styles.profileLabel}>Email</label>
+            <p className="form-control-plaintext">{user.email}</p>
+          </div>
+
+          <div className={styles.fieldGroup}>
+            <label className={styles.profileLabel}>Role</label>
+            <Dropdown userId={userId} roleId={role?.role_id} />
+          </div>
+        </div>
+      </div>
     </div>
   );
 }

From 71fb61328e785a8391f13eed6430f4958dc9424c Mon Sep 17 00:00:00 2001
From: minado05 <athudo@g.ucla.edu>
Date: Thu, 14 May 2026 22:46:44 -0700
Subject: [PATCH 2/4] Revert "Merge remote-tracking branch
 'origin/profile-page-styling' into team-profile-page-styling"

This reverts commit c15332650942a1b59209ccb16060d400539f7166, reversing
changes made to 5887dca5a6feffb3ac157f7c57b38f72f60dc3c5.
---
 app/(main)/components/PhotoUpload.module.css |  38 +---
 app/(main)/components/PhotoUpload.tsx        | 205 +++++++------------
 app/(main)/components/ProfilePage.module.css |   6 +-
 app/(main)/hq/components/AddStoreForm.tsx    | 120 ++++++-----
 app/globals.css                              |   1 -
 5 files changed, 135 insertions(+), 235 deletions(-)

diff --git a/app/(main)/components/PhotoUpload.module.css b/app/(main)/components/PhotoUpload.module.css
index e74a2588..8adaa6a8 100644
--- a/app/(main)/components/PhotoUpload.module.css
+++ b/app/(main)/components/PhotoUpload.module.css
@@ -18,12 +18,6 @@
     background 0.2s ease;
 }
 
-.container img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
 .container:hover {
   border-color: #2d3748;
   background: #edf2f7;
@@ -47,7 +41,7 @@
 
 .rectangle {
   width: 100%;
-  aspect-ratio: 1;
+  height: 160px;
   border-radius: 8px;
 }
 
@@ -61,33 +55,3 @@
   text-align: center;
   color: #000;
 }
-
-.removeButton {
-  position: absolute;
-  top: -10px;
-  right: -10px;
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  background: #c53030;
-  color: #fff;
-  border: none;
-  font-weight: 600;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  line-height: 1;
-  transition: background 0.2s ease;
-}
-
-.removeButton:hover {
-  background: #ac1c1c;
-  transition: background 0.2s ease;
-}
-
-.removeButtonCircle {
-  top: 15px;
-  right: 10px;
-}
diff --git a/app/(main)/components/PhotoUpload.tsx b/app/(main)/components/PhotoUpload.tsx
index 959a7da7..92f8cc32 100644
--- a/app/(main)/components/PhotoUpload.tsx
+++ b/app/(main)/components/PhotoUpload.tsx
@@ -63,140 +63,79 @@ const PhotoUpload = forwardRef<{ resetFile: () => void }, PhotoUploadProps>(
 
     const hasPhoto = displayImage !== defaultProfilePhoto.src;
 
-    // return (
-    //   <div className={styles.wrapper}>
-    //     <div style={{ position: 'relative', width: '100%' }}>
-    //       <label
-    //         htmlFor={id}
-    //         className={[
-    //           styles.container,
-    //           styles[variant],
-    //           isDragging ? styles.dragging : '',
-    //           hasPhoto ? styles.hasPhoto : '',
-    //         ].join(' ')}
-    //         onDragOver={handleDragOver}
-    //         onDragLeave={handleDragLeave}
-    //         onDrop={handleDrop}
-    //       >
-    //         {hasPhoto ? (
-    //           <Image
-    //             src={displayImage}
-    //             alt="Profile photo"
-    //             width={200}
-    //             height={200}
-    //             style={{ objectFit: 'cover' }}
-    //             unoptimized
-    //           />
-    //         ) : (
-    //           <div
-    //             className={styles.placeholder}
-    //             style={{ width: '100%', height: '100%' }}
-    //           >
-    //             <img
-    //               src={uploadPhotoIcon.src}
-    //               alt="Upload photo"
-    //               style={{ width: 32, height: 32 }}
-    //             />
-    //             <span className={styles.photoPlaceholderText}>
-    //               Drag and drop file here or <u>Browse</u>
-    //             </span>
-    //           </div>
-    //         )}
-    //       </label>
-
-    //       {variant === 'rectangle' && !isPendingDelete && hasPhoto && (
-    //         <button
-    //           type="button"
-    //           onClick={onRemove}
-    //           className={styles.removeButton}
-    //         >
-    //           —
-    //         </button>
-    //       )}
-    //     </div>
-
-    //     {/* circle variant keep the reserved-space remove button */}
-    //     {variant === 'circle' && (
-    //       <div
-    //         style={{
-    //           height: 56,
-    //           display: 'flex',
-    //           alignItems: 'center',
-    //           justifyContent: 'center',
-    //         }}
-    //       >
-    //         {!isPendingDelete && hasPhoto && (
-    //           <button type="button" onClick={onRemove} className="btn-remove">
-    //             Remove
-    //           </button>
-    //         )}
-    //       </div>
-    //     )}
-
-    //     <input
-    //       ref={inputRef}
-    //       id={id}
-    //       type="file"
-    //       accept="image/*"
-    //       onChange={handleFileChange}
-    //       style={{ display: 'none' }}
-    //     />
-    //   </div>
-    // );
     return (
-  <div className={styles.wrapper}>
-    <div style={{ position: 'relative', width: variant === 'circle' ? '200px' : '100%' }}>
-      <label
-        htmlFor={id}
-        className={[
-          styles.container,
-          styles[variant],
-          isDragging ? styles.dragging : '',
-          hasPhoto ? styles.hasPhoto : '',
-        ].join(' ')}
-        onDragOver={handleDragOver}
-        onDragLeave={handleDragLeave}
-        onDrop={handleDrop}
-      >
-        {hasPhoto ? (
-          <Image
-            src={displayImage}
-            alt="Profile photo"
-            width={200}
-            height={200}
-            style={{ objectFit: 'cover' }}
-            unoptimized
-          />
-        ) : (
-          <div className={styles.placeholder} style={{ width: '100%', height: '100%' }}>
-            <img src={uploadPhotoIcon.src} alt="Upload photo" style={{ width: 32, height: 32 }} />
-            <span className={styles.photoPlaceholderText}>
-              Drag and drop file here or <u>Browse</u>
-            </span>
-          </div>
-        )}
-      </label>
-
-      {!isPendingDelete && hasPhoto && (
-        <button 
-        type="button" 
-        onClick={onRemove} 
-        className={[styles.removeButton, variant === 'circle' ? styles.removeButtonCircle : ''].join(' ')}>
-          —
-        </button>
-      )}
-    </div>
-
-    <input
-      ref={inputRef}
-      id={id}
-      type="file"
-      accept="image/*"
-      onChange={handleFileChange}
-      style={{ display: 'none' }}
-    />
-  </div>
-);
+      <div className={styles.wrapper}>
+        <label
+          htmlFor={id}
+          className={[
+            styles.container,
+            styles[variant],
+            isDragging ? styles.dragging : '',
+            hasPhoto ? styles.hasPhoto : '',
+          ].join(' ')}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+        >
+          {hasPhoto ? (
+            <Image
+              src={displayImage}
+              alt="Profile photo"
+              width={200}
+              height={200}
+              style={{
+                objectFit: 'cover',
+              }}
+              unoptimized
+            />
+          ) : (
+            <div
+              className={styles.placeholder}
+              style={{ width: '100%', height: '100%' }}
+            >
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                src={uploadPhotoIcon.src}
+                alt="Upload photo"
+                style={{ width: 32, height: 32 }}
+              />
+              <span className={styles.photoPlaceholderText}>
+                Drag and drop file here or <u>Browse</u>
+              </span>
+            </div>
+          )}
+        </label>
+
+        <div
+          style={{
+            height: 56,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          {!isPendingDelete && hasPhoto && (
+            <button
+              type="button"
+              onClick={onRemove}
+              className="btn-remove"
+              style={{ marginTop: 10 }}
+            >
+              Remove
+            </button>
+          )}
+        </div>
+
+        <input
+          ref={inputRef}
+          id={id}
+          type="file"
+          accept="image/*"
+          onChange={handleFileChange}
+          style={{ display: 'none' }}
+        />
+      </div>
+    );
   },
 );
 
diff --git a/app/(main)/components/ProfilePage.module.css b/app/(main)/components/ProfilePage.module.css
index a6d36af6..9dd62a89 100644
--- a/app/(main)/components/ProfilePage.module.css
+++ b/app/(main)/components/ProfilePage.module.css
@@ -15,7 +15,7 @@
 }
 
 .userInfoTextEdit {
-  margin-top: 30px;
+  margin-top: 60px;
   margin-bottom: 20px;
 }
 
@@ -38,8 +38,8 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-top: -270px;
-  margin-bottom: 65px;
+  margin-top: -300px;
+  margin-bottom: 40px;
 }
 
 .fieldGroup {
diff --git a/app/(main)/hq/components/AddStoreForm.tsx b/app/(main)/hq/components/AddStoreForm.tsx
index 0fac74b8..a718c79f 100644
--- a/app/(main)/hq/components/AddStoreForm.tsx
+++ b/app/(main)/hq/components/AddStoreForm.tsx
@@ -93,71 +93,69 @@ export default function AddStoreForm() {
     }
   };
 
+  const displayImage = previewUrl || defaultStorePhoto.src;
+
   return (
     <div className="form-card">
       <div className="card-body">
         <form onSubmit={handleSubmit(onSubmit)}>
-          <div
-            style={{
-              display: 'flex',
-              alignItems: 'flex-start',
-              gap: '3rem',
-              marginBottom: '40px',
-              flexWrap: 'wrap',
-            }}
-          >
-            <div style={{ width: '200px', height: '210px', flexShrink: 0 }}>
-              <PhotoUpload
-                ref={photoUploadRef}
-                onFileSelect={handleFileSelect}
-                previewUrl={previewUrl}
-                onRemove={handleRemovePhoto}
-              />
-            </div>
-
-            <div style={{ flex: 1, minWidth: 0 }}>
-              <div className="mb-3">
-                <label className="form-label field-label">Store name</label>
-                <input {...register('storeName')} className="form-control" />
-              </div>
-
-              <div className="mb-3">
-                <label className="form-label field-label">
-                  Store street address
-                </label>
-                <input
-                  {...register('storeStreetAddress')}
-                  className="form-control"
-                />
-              </div>
-
-              <div className="button-spacing">
-                {eitherFilled && (
-                  <button
-                    type="button"
-                    className="btn-cancel"
-                    disabled={isSaving}
-                    onClick={() => {
-                      reset({ storeName: '', storeStreetAddress: '' });
-                      setSelectedFile(null);
-                      setPreviewUrl(null);
-                      photoUploadRef.current?.resetFile();
-                    }}
-                  >
-                    Cancel
-                  </button>
-                )}
-                {bothFilled && (
-                  <button
-                    type="submit"
-                    disabled={isSaving}
-                    className="btn-submit"
-                  >
-                    {isSaving ? 'Saving...' : 'Save'}
-                  </button>
-                )}
-              </div>
-            </div>
+          <div>
+            <Image
+              src={displayImage}
+              alt="Store photo"
+              width={64}
+              height={64}
+              className="photo"
+              unoptimized
+            />
+            {displayImage !== defaultStorePhoto.src && (
+              <button
+                type="button"
+                onClick={handleRemovePhoto}
+                className="btn-cancel"
+              >
+                Remove
+              </button>
+            )}
+            <PhotoUpload ref={photoUploadRef} onFileSelect={handleFileSelect} />
+          </div>
+
+          <div className="mb-3">
+            <label className="form-label field-label">Store name</label>
+            <input {...register('storeName')} className="form-control" />
+          </div>
+
+          <div className="mb-3">
+            <label className="form-label field-label">
+              Store street address
+            </label>
+            <input
+              {...register('storeStreetAddress')}
+              className="form-control"
+            />
+          </div>
+
+          <div className="button-spacing">
+            {bothFilled && (
+              <button type="submit" disabled={isSaving} className="btn-submit">
+                {isSaving ? 'Saving...' : 'Save'}
+              </button>
+            )}
+            {eitherFilled && (
+              <button
+                type="button"
+                className="btn-cancel"
+                disabled={isSaving}
+                onClick={() => {
+                  reset({ storeName: '', storeStreetAddress: '' });
+                  setSelectedFile(null);
+                  setPreviewUrl(null);
+                  photoUploadRef.current?.resetFile();
+                }}
+              >
+                Cancel
+              </button>
+            )}
           </div>
         </form>
       </div>
diff --git a/app/globals.css b/app/globals.css
index f7015588..3f7c696a 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -390,5 +390,4 @@ Table {
 .button-spacing {
   display: flex;
   gap: 12px;
-  flex-wrap: wrap;
 }

From 22ff05446409efce4d288147bd3bfa2eb5c0d411 Mon Sep 17 00:00:00 2001
From: joy-y-cheng <joycheng@ucla.edu>
Date: Sat, 16 May 2026 23:41:26 -0700
Subject: [PATCH 3/4] Update styles

---
 app/(main)/hq/components/AddStoreForm.tsx     | 68 ++++++++++---------
 .../people/[userId]/components/Dropdown.tsx   |  2 +-
 app/(main)/team/people/[userId]/page.tsx      | 17 ++---
 3 files changed, 44 insertions(+), 43 deletions(-)

diff --git a/app/(main)/hq/components/AddStoreForm.tsx b/app/(main)/hq/components/AddStoreForm.tsx
index e003ea41..23e76a2d 100644
--- a/app/(main)/hq/components/AddStoreForm.tsx
+++ b/app/(main)/hq/components/AddStoreForm.tsx
@@ -92,8 +92,6 @@ export default function AddStoreForm() {
     }
   };
 
-  const displayImage = previewUrl || defaultStorePhoto.src;
-
   return (
     <div className="form-card">
       <div className="card-body">
@@ -114,37 +112,43 @@ export default function AddStoreForm() {
                 <input {...register('storeName')} className="form-control" />
               </div>
 
-          <div className="mb-3">
-            <label className="form-label field-label">
-              Store street address
-            </label>
-            <input
-              {...register('storeStreetAddress')}
-              className="form-control"
-            />
-          </div>
+              <div className="mb-3">
+                <label className="form-label field-label">
+                  Store street address
+                </label>
+                <input
+                  {...register('storeStreetAddress')}
+                  className="form-control"
+                />
+              </div>
 
-          <div className="button-spacing">
-            {bothFilled && (
-              <button type="submit" disabled={isSaving} className="btn-submit">
-                {isSaving ? 'Saving...' : 'Save'}
-              </button>
-            )}
-            {eitherFilled && (
-              <button
-                type="button"
-                className="btn-cancel"
-                disabled={isSaving}
-                onClick={() => {
-                  reset({ storeName: '', storeStreetAddress: '' });
-                  setSelectedFile(null);
-                  setPreviewUrl(null);
-                  photoUploadRef.current?.resetFile();
-                }}
-              >
-                Cancel
-              </button>
-            )}
+              <div className="button-spacing">
+                {eitherFilled && (
+                  <button
+                    type="button"
+                    className="btn-cancel"
+                    disabled={isSaving}
+                    onClick={() => {
+                      reset({ storeName: '', storeStreetAddress: '' });
+                      setSelectedFile(null);
+                      setPreviewUrl(null);
+                      photoUploadRef.current?.resetFile();
+                    }}
+                  >
+                    Cancel
+                  </button>
+                )}
+                {bothFilled && (
+                  <button
+                    type="submit"
+                    disabled={isSaving}
+                    className="btn-submit"
+                  >
+                    {isSaving ? 'Saving...' : 'Save'}
+                  </button>
+                )}
+              </div>
+            </div>
           </div>
         </form>
       </div>
diff --git a/app/(main)/team/people/[userId]/components/Dropdown.tsx b/app/(main)/team/people/[userId]/components/Dropdown.tsx
index 80f55f4c..60a3880c 100644
--- a/app/(main)/team/people/[userId]/components/Dropdown.tsx
+++ b/app/(main)/team/people/[userId]/components/Dropdown.tsx
@@ -72,7 +72,7 @@ export default function Dropdown({
       </select>
       <div className="btn-row">
         <button className="btn-submit" type="submit">
-          Update role
+          Save
         </button>
       </div>
     </form>
diff --git a/app/(main)/team/people/[userId]/page.tsx b/app/(main)/team/people/[userId]/page.tsx
index 0fcff2fa..81be2888 100644
--- a/app/(main)/team/people/[userId]/page.tsx
+++ b/app/(main)/team/people/[userId]/page.tsx
@@ -1,8 +1,7 @@
 import { createClient } from '@/app/lib/supabase/server-client';
-import Breadcrumbs from '@/app/(main)/components/Breadcrumbs';
 import Dropdown from '@/app/(main)/team/people/[userId]/components/Dropdown';
 import Image from 'next/image';
-import styles from '@/app/(main)/components/ProfilePage.module.css';
+import styles from '@/app/(main)/profile/components/ProfileForm.module.css';
 import imagePlaceholder from '@/public/image-placeholder.svg';
 
 export default async function TeamProfilePage({
@@ -36,14 +35,11 @@ export default async function TeamProfilePage({
   }
 
   return (
-    <div className="form-body">
+    <div>
       <h1>Profile</h1>
-      <div style={{ height: '50px' }} />
       {/* same styling as profile page */}
       <div className={styles.card}>
-        <div className={styles.cardBody}>
-          <h2 className={styles.userInfoText}>User Information</h2>
-
+        <div className={`form-body ${styles.cardBody}`}>
           <div className={styles.avatarCircle}>
             <Image
               src={user.profile_photo_url || imagePlaceholder}
@@ -53,8 +49,9 @@ export default async function TeamProfilePage({
               unoptimized
             />
           </div>
+          <h2>User Information</h2>
 
-          <div className={styles.fieldGroup}>
+          <div>
             <div className="two-col-row">
               <div>
                 <label className={styles.profileLabel}>First name</label>
@@ -67,12 +64,12 @@ export default async function TeamProfilePage({
             </div>
           </div>
 
-          <div className={styles.fieldGroup}>
+          <div>
             <label className={styles.profileLabel}>Email</label>
             <p className="form-control-plaintext">{user.email}</p>
           </div>
 
-          <div className={styles.fieldGroup}>
+          <div>
             <label className={styles.profileLabel}>Role</label>
             <Dropdown userId={userId} roleId={role?.role_id} />
           </div>

From d4d15890a1c550ddd6d553cbca18b7d6855f5bf3 Mon Sep 17 00:00:00 2001
From: joy-y-cheng <joycheng@ucla.edu>
Date: Sat, 16 May 2026 23:45:30 -0700
Subject: [PATCH 4/4] Add back breadcrumbs

---
 app/(main)/team/people/[userId]/page.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/app/(main)/team/people/[userId]/page.tsx b/app/(main)/team/people/[userId]/page.tsx
index 81be2888..1d6802a3 100644
--- a/app/(main)/team/people/[userId]/page.tsx
+++ b/app/(main)/team/people/[userId]/page.tsx
@@ -1,4 +1,5 @@
 import { createClient } from '@/app/lib/supabase/server-client';
+import Breadcrumbs from '@/app/(main)/components/Breadcrumbs';
 import Dropdown from '@/app/(main)/team/people/[userId]/components/Dropdown';
 import Image from 'next/image';
 import styles from '@/app/(main)/profile/components/ProfileForm.module.css';
@@ -36,6 +37,13 @@ export default async function TeamProfilePage({
 
   return (
     <div>
+      <Breadcrumbs
+        labelMap={{
+          '/team': 'Team',
+          '/team/people': 'People',
+          [`/team/people/${userId}`]: `${user.first_name || 'FirstName'} ${user.last_name || 'LastName'}`,
+        }}
+      />
       <h1>Profile</h1>
       {/* same styling as profile page */}
       <div className={styles.card}>