diff --git a/app/(main)/administration/exports/components/DonationsExportForm.tsx b/app/(main)/administration/exports/components/DonationsExportForm.tsx
index 88671cd3..6f8cf5ca 100644
--- a/app/(main)/administration/exports/components/DonationsExportForm.tsx
+++ b/app/(main)/administration/exports/components/DonationsExportForm.tsx
@@ -66,67 +66,69 @@ export default function Donations() {
   return (
     <Card className="form-card">
       <Card.Body>
-        <h2 className="form-title-1">Export Gift-in-Kind Records</h2>
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <div className="form-body">
-            <Form.Group>
-              <div className="radio-row">
-                <Form.Check
-                  type="radio"
-                  label="All time"
-                  value="all"
-                  id="date-mode-all"
-                  {...register('dateMode')}
-                />
-                <Form.Check
-                  type="radio"
-                  label="Date range"
-                  value="range"
-                  id="date-mode-range"
-                  {...register('dateMode')}
-                />
-              </div>
-            </Form.Group>
-
-            {dateMode === 'range' && (
-              <div className="two-col-row">
-                <Form.Group controlId="startDate">
-                  <Form.Label className="field-label">Start date</Form.Label>
-                  <Form.Control
-                    type="date"
-                    {...register('startDate', {
-                      required: 'Start date is required.',
-                    })}
-                    isInvalid={!!errors.startDate}
+        <div className="form-body">
+          <h2 className="form-title">Export Gift-in-Kind Records</h2>
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <div className="form-body">
+              <Form.Group>
+                <div className="radio-row">
+                  <Form.Check
+                    type="radio"
+                    label="All time"
+                    value="all"
+                    id="date-mode-all"
+                    {...register('dateMode')}
                   />
-                  <Form.Control.Feedback type="invalid">
-                    {errors.startDate?.message}
-                  </Form.Control.Feedback>
-                </Form.Group>
-
-                <Form.Group controlId="endDate">
-                  <Form.Label className="field-label">End date</Form.Label>
-                  <Form.Control
-                    type="date"
-                    {...register('endDate', {
-                      required: 'End date is required.',
-                    })}
-                    isInvalid={!!errors.endDate}
+                  <Form.Check
+                    type="radio"
+                    label="Date range"
+                    value="range"
+                    id="date-mode-range"
+                    {...register('dateMode')}
                   />
-                  <Form.Control.Feedback type="invalid">
-                    {errors.endDate?.message}
-                  </Form.Control.Feedback>
-                </Form.Group>
-              </div>
-            )}
+                </div>
+              </Form.Group>
 
-            <div className="submit-button-row">
-              <button type="submit" className="btn-submit">
-                Export
-              </button>
+              {dateMode === 'range' && (
+                <div className="two-col-row">
+                  <Form.Group controlId="startDate">
+                    <Form.Label className="field-label">Start date</Form.Label>
+                    <Form.Control
+                      type="date"
+                      {...register('startDate', {
+                        required: 'Start date is required.',
+                      })}
+                      isInvalid={!!errors.startDate}
+                    />
+                    <Form.Control.Feedback type="invalid">
+                      {errors.startDate?.message}
+                    </Form.Control.Feedback>
+                  </Form.Group>
+
+                  <Form.Group controlId="endDate">
+                    <Form.Label className="field-label">End date</Form.Label>
+                    <Form.Control
+                      type="date"
+                      {...register('endDate', {
+                        required: 'End date is required.',
+                      })}
+                      isInvalid={!!errors.endDate}
+                    />
+                    <Form.Control.Feedback type="invalid">
+                      {errors.endDate?.message}
+                    </Form.Control.Feedback>
+                  </Form.Group>
+                </div>
+              )}
+
+              <div>
+                <button type="submit" className="btn-submit">
+                  Export
+                </button>
+              </div>
             </div>
-          </div>
-        </form>
+          </form>
+        </div>
       </Card.Body>
     </Card>
   );
diff --git a/app/(main)/administration/exports/page.tsx b/app/(main)/administration/exports/page.tsx
index fe49f1c4..39f6c06b 100644
--- a/app/(main)/administration/exports/page.tsx
+++ b/app/(main)/administration/exports/page.tsx
@@ -26,30 +26,34 @@ export default async function ExportsPage() {
     <div>
       <Breadcrumbs />
       <h1>Exports</h1>
-      <DonationsExportForm />
-      <h2>Recent Gift-in-Kind Records</h2>
-      <Table borderless>
-        <thead className="table-header">
-          <tr>
-            <th>Receiver</th>
-            <th>Store</th>
-            <th>Items Donated</th>
-            <th>Date Submitted</th>
-          </tr>
-        </thead>
-        <tbody>
-          {sortedDonations.map((item) => (
-            <tr key={item.donation_id}>
-              <td>
-                {item.receiver_first_name} {item.receiver_last_name}
-              </td>
-              <td>{item.store_name}</td>
-              <td>{item.items_donated}</td>
-              <td>{new Date(item.date_submitted).toLocaleString()}</td>
-            </tr>
-          ))}
-        </tbody>
-      </Table>
+      <div className="content-body">
+        <DonationsExportForm />
+        <div>
+          <h2>Recent Gift-in-Kind Records</h2>
+          <Table borderless>
+            <thead className="table-header">
+              <tr>
+                <th>Receiver</th>
+                <th>Store</th>
+                <th>Items Donated</th>
+                <th>Date Submitted</th>
+              </tr>
+            </thead>
+            <tbody>
+              {sortedDonations.map((item) => (
+                <tr key={item.donation_id}>
+                  <td>
+                    {item.receiver_first_name} {item.receiver_last_name}
+                  </td>
+                  <td>{item.store_name}</td>
+                  <td>{item.items_donated}</td>
+                  <td>{new Date(item.date_submitted).toLocaleString()}</td>
+                </tr>
+              ))}
+            </tbody>
+          </Table>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/app/(main)/administration/members/[userId]/page.tsx b/app/(main)/administration/members/[userId]/page.tsx
index 8201a748..036a83ce 100644
--- a/app/(main)/administration/members/[userId]/page.tsx
+++ b/app/(main)/administration/members/[userId]/page.tsx
@@ -42,42 +42,46 @@ export default async function TeamProfilePage({
           [`/administration/members/${userId}`]: `${user.first_name || 'FirstName'} ${user.last_name || 'LastName'}`,
         }}
       />
-      <h1>Profile</h1>
+      <h1>
+        {user.first_name} {user.last_name}
+      </h1>
       {/* same styling as profile page */}
-      <div className={styles.card}>
-        <div className={`form-body ${styles.cardBody}`}>
-          <div className={styles.avatarCircle}>
-            <Image
-              src={user.profile_photo_url || imagePlaceholder}
-              alt={user.first_name + ' ' + user.last_name}
-              width={96}
-              height={96}
-              unoptimized
-            />
-          </div>
-          <h2>User Information</h2>
+      <div>
+        <div className={`form-card ${styles.card}`}>
+          <div className={`form-body ${styles.cardBody}`}>
+            <div className={styles.avatarCircle}>
+              <Image
+                src={user.profile_photo_url || imagePlaceholder}
+                alt={user.first_name + ' ' + user.last_name}
+                width={96}
+                height={96}
+                unoptimized
+              />
+            </div>
+            <p className="form-title">User Information</p>
 
-          <div>
-            <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 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>
 
-          <div>
-            <label className={styles.profileLabel}>Email</label>
-            <p className="form-control-plaintext">{user.email}</p>
-          </div>
+            <div>
+              <label className={styles.profileLabel}>Email</label>
+              <p className="form-control-plaintext">{user.email}</p>
+            </div>
 
-          <div>
-            <label className={styles.profileLabel}>Role</label>
-            <Dropdown userId={userId} roleId={role?.role_id} />
+            <div>
+              <label className={styles.profileLabel}>Role</label>
+              <Dropdown userId={userId} roleId={role?.role_id} />
+            </div>
           </div>
         </div>
       </div>
diff --git a/app/(main)/administration/store-admins/[storeId]/components/AddAdminSearch.tsx b/app/(main)/administration/store-admins/[storeId]/components/AddAdminSearch.tsx
index eff1df0b..3717eca9 100644
--- a/app/(main)/administration/store-admins/[storeId]/components/AddAdminSearch.tsx
+++ b/app/(main)/administration/store-admins/[storeId]/components/AddAdminSearch.tsx
@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import { createClient } from '@/app/lib/supabase/browser-client';
 import { createStoreAdmin } from '@/app/actions/store';
 import { User } from '@/app/types/user';
-import { Form, ListGroup } from 'react-bootstrap';
+import { Form, ListGroup, Card } from 'react-bootstrap';
 
 const supabase = createClient();
 
@@ -50,32 +50,44 @@ export default function AddAdminSearch({
   }, [search, existingAdminUserIds]);
 
   return (
-    <div>
-      {/* searching */}
-      <div className="search-filter-wrapper">
-        <Form.Control
-          type="text"
-          placeholder="Search users..."
-          className="search-bar"
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-        />
-      </div>
+    <Card className="form-card">
+      <Card.Body>
+        <div className="form-body">
+          <p className="form-title">Add New Admins</p>
+          {/* searching */}
+          <div>
+            <div className="search-filter-wrapper">
+              <Form.Control
+                type="text"
+                placeholder="Search users..."
+                className="search-bar"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+              />
+            </div>
 
-      {/* search results */}
-      <ListGroup>
-        {searchData.map((u) => (
-          <ListGroup.Item
-            key={u.user_id}
-            action
-            onClick={() =>
-              createStoreAdmin({ user_id: u.user_id, store_id: storeId })
-            }
-          >
-            {u.first_name}
-          </ListGroup.Item>
-        ))}
-      </ListGroup>
-    </div>
+            {/* search results */}
+            {searchData.length > 0 && (
+              <ListGroup>
+                {searchData.map((u) => (
+                  <ListGroup.Item
+                    key={u.user_id}
+                    action
+                    onClick={() =>
+                      createStoreAdmin({
+                        user_id: u.user_id,
+                        store_id: storeId,
+                      })
+                    }
+                  >
+                    {u.first_name}
+                  </ListGroup.Item>
+                ))}
+              </ListGroup>
+            )}
+          </div>
+        </div>
+      </Card.Body>
+    </Card>
   );
 }
diff --git a/app/(main)/administration/store-admins/[storeId]/page.tsx b/app/(main)/administration/store-admins/[storeId]/page.tsx
index 3a01c2d7..26618d03 100644
--- a/app/(main)/administration/store-admins/[storeId]/page.tsx
+++ b/app/(main)/administration/store-admins/[storeId]/page.tsx
@@ -2,6 +2,8 @@ import { createClient } from '@/app/lib/supabase/server-client';
 import AddAdminSearch from '@/app/(main)/administration/store-admins/[storeId]/components/AddAdminSearch';
 import Breadcrumbs from '@/app/(main)/components/Breadcrumbs';
 import AddAdminCard from '@/app/(main)/administration/store-admins/[storeId]/components/AddAdminCard';
+import Image from 'next/image';
+import pinIcon from '@/public/pin-icon.svg';
 
 export default async function StoreAdminPage({
   params,
@@ -85,42 +87,41 @@ export default async function StoreAdminPage({
             store_data?.name ?? 'Store',
         }}
       />
-      <div>
-        <h1>{store_data.name}</h1>
-        <p>{store_data.street_address}</p>
-      </div>
+      <h1>
+        <span>{store_data.name} </span>
+        <Image src={pinIcon} height={32} alt="Pin icon" />
+      </h1>
 
-      {/* searching store admins (AddAdminSearch) if eligible role */}
-      {canChangeAdmins && (
-        <div>
-          <h2>Add New Admins</h2>
+      <div className="content-body">
+        {/* searching store admins (AddAdminSearch) if eligible role */}
+        {canChangeAdmins && (
           <AddAdminSearch
             storeId={storeId}
             existingAdminUserIds={existingAdminUserIds ?? []}
           />
-        </div>
-      )}
+        )}
 
-      {/* viewing store admins */}
-      <div>
-        <h2>Current Admins</h2>
-        <div className="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-5">
-          {admins?.length ? (
-            admins.map((admin) => {
-              const user = admin.users;
-              return (
-                <div key={admin.store_admin_id}>
-                  <AddAdminCard
-                    user={user}
-                    showRemove={canChangeAdmins}
-                    storeAdminId={admin.store_admin_id}
-                  ></AddAdminCard>
-                </div>
-              );
-            })
-          ) : (
-            <div>No admins found.</div>
-          )}
+        {/* viewing store admins */}
+        <div className="form-body">
+          <p className="form-title">Current Admins</p>
+          <div className="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-5">
+            {admins?.length ? (
+              admins.map((admin) => {
+                const user = admin.users;
+                return (
+                  <div key={admin.store_admin_id}>
+                    <AddAdminCard
+                      user={user}
+                      showRemove={canChangeAdmins}
+                      storeAdminId={admin.store_admin_id}
+                    ></AddAdminCard>
+                  </div>
+                );
+              })
+            ) : (
+              <div>No admins found.</div>
+            )}
+          </div>
         </div>
       </div>
     </div>
diff --git a/app/(main)/administration/stores/[storeId]/components/EditStoreForm.module.css b/app/(main)/administration/stores/[storeId]/components/EditStoreForm.module.css
index 58a73ae3..29ecb948 100644
--- a/app/(main)/administration/stores/[storeId]/components/EditStoreForm.module.css
+++ b/app/(main)/administration/stores/[storeId]/components/EditStoreForm.module.css
@@ -2,17 +2,18 @@
   display: flex;
   align-items: flex-start;
   gap: 3rem;
-  margin-bottom: 40px;
   flex-wrap: wrap;
 }
 
 .photoColumn {
-  width: 200px;
-  height: 210px;
+  width: 16rem;
+  height: 16rem;
   flex-shrink: 0;
 }
 
 .fieldsColumn {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
   flex: 1;
-  min-width: 0;
 }
diff --git a/app/(main)/administration/stores/[storeId]/components/RemoveStoreButton.tsx b/app/(main)/administration/stores/[storeId]/components/RemoveStoreButton.tsx
index 4d7223f4..a92d0b7c 100644
--- a/app/(main)/administration/stores/[storeId]/components/RemoveStoreButton.tsx
+++ b/app/(main)/administration/stores/[storeId]/components/RemoveStoreButton.tsx
@@ -27,7 +27,7 @@ export default function RemoveStoreButton({ storeId }: RemoveStoreButtonProp) {
   };
 
   return (
-    <button type="button" onClick={handleDeletion} className="btn-remove mt-3">
+    <button type="button" onClick={handleDeletion} className="btn-remove">
       Remove
     </button>
   );
diff --git a/app/(main)/administration/stores/[storeId]/page.tsx b/app/(main)/administration/stores/[storeId]/page.tsx
index 16b7a0cb..6b4d9a32 100644
--- a/app/(main)/administration/stores/[storeId]/page.tsx
+++ b/app/(main)/administration/stores/[storeId]/page.tsx
@@ -38,8 +38,12 @@ export default async function StoreDetailsPage({
         }}
       />
       <h1>{store.name}</h1>
-      <EditStoreForm store={store} />
-      <RemoveStoreButton storeId={store.store_id} />
+      <div className="content-body">
+        <EditStoreForm store={store} />
+        <div>
+          <RemoveStoreButton storeId={store.store_id} />
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/app/(main)/administration/stores/components/AddStoreForm.tsx b/app/(main)/administration/stores/components/AddStoreForm.tsx
index 23e76a2d..1b424359 100644
--- a/app/(main)/administration/stores/components/AddStoreForm.tsx
+++ b/app/(main)/administration/stores/components/AddStoreForm.tsx
@@ -97,7 +97,7 @@ export default function AddStoreForm() {
       <div className="card-body">
         <form onSubmit={handleSubmit(onSubmit)}>
           <div className="row g-5 align-items-start">
-            <div className="col-auto" style={{ width: '250px' }}>
+            <div className="col-auto" style={{ width: '16rem' }}>
               <PhotoUpload
                 ref={photoUploadRef}
                 onFileSelect={handleFileSelect}
diff --git a/app/(main)/administration/stores/page.tsx b/app/(main)/administration/stores/page.tsx
index c2bfefac..f1caf0d5 100644
--- a/app/(main)/administration/stores/page.tsx
+++ b/app/(main)/administration/stores/page.tsx
@@ -3,7 +3,7 @@ import StoresList from '@/app/(main)/components/StoresList';
 import AddStoreForm from '@/app/(main)/administration/stores/components/AddStoreForm';
 import Breadcrumbs from '@/app/(main)/components/Breadcrumbs';
 
-export default async function HqPage() {
+export default async function StoresPage() {
   const supabase = await createClient();
 
   const { data: storesData, error: storesErr } = await supabase
@@ -20,13 +20,17 @@ export default async function HqPage() {
     <div>
       <Breadcrumbs />
       <h1>Stores</h1>
-      <AddStoreForm />
-      <h3>Edit Stores</h3>
-      {stores.length > 0 ? (
-        <StoresList stores={stores} />
-      ) : (
-        <p>No stores found.</p>
-      )}
+      <div className="content-body">
+        <AddStoreForm />
+        <div>
+          <h2>Edit Stores</h2>
+          {stores.length > 0 ? (
+            <StoresList stores={stores} />
+          ) : (
+            <p>No stores found.</p>
+          )}
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/app/(main)/components/DonationForm.module.css b/app/(main)/components/DonationForm.module.css
index c63bf298..747b981f 100644
--- a/app/(main)/components/DonationForm.module.css
+++ b/app/(main)/components/DonationForm.module.css
@@ -1,192 +1,24 @@
-/* .formContainer:global(.container) {
-  width: 100%;
-  max-width: none;
-  margin: 0;
-  --bs-gutter-x: 0;
-  padding-block: 20px;
-  box-sizing: border-box;
-}
-.formContainer :global(.form-control),
-.formContainer :global(.form-select),
-.formContainer :global(.form-check-label),
-.formContainer :global(.form-label) {
-  font-family: inherit;
-}
-
-.formContainer :global(.form-control::placeholder) {
-  color: #a2a2a2;
-  opacity: 1;
-}
-
-.formCard {
-  border: none;
-  border-radius: 5px;
-  padding: 0;
-}
-
-.formCard :global(.card-body) {
-  padding: 40px;
-}
-
-.formTitle1 {
-  font-size: 1.5rem;
-  line-height: 1.2;
-  font-weight: 600;
-  margin-bottom: 20px;
-}
-
-.formTitle2 {
-  font-size: 1.5rem;
-  font-weight: 600;
-  margin-top: 12px;
-  margin-bottom: 0;
-}
-
-.formBody {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.radioRow {
-  display: flex;
-  gap: 20px;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.twoColRow {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 20px;
-  align-items: start;
-}
-
-@media (max-width: 1020px) {
-  .twoColRow {
-    grid-template-columns: 1fr;
-  }
-
-  .formCard :global(.card-body) {
-    padding: 24px 20px;
-  }
-}
-
-.fieldLabel {
-  margin-bottom: 5px;
-}
-
-.businessFields {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.checkboxGroup {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-}
-
-.errorText {
-  color: red;
-  margin-top: 5px;
-  display: block;
-}
-
-.submitButtonRow {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 20px;
-}
-
-.submitButton {
-  display: inline-flex;
-  padding: 8px 40px;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
-  border: none;
-  border-radius: 5px;
-  background: #2d3748;
-  color: #fff;
-  font-weight: 400;
-  cursor: pointer;
-}
-
-.submitButton:hover {
-  background: #4a5568;
-  transition: background 0.2s ease;
-}
-
-.submitButton:active {
-  background: #1a202c;
-}
-
-.receivingSiteGroup {
-  margin-bottom: 10px;
-}
-
-.estimatedValueField {
-  max-width: 200px;
-} */
-
 /* ── container reset (donation-specific) ── */
 .formContainer:global(.container) {
   width: 100%;
   max-width: none;
   margin: 0;
   --bs-gutter-x: 0;
-  padding-block: 20px;
+  padding-block: 1.5rem;
   box-sizing: border-box;
 }
 
-/* ── layout: body & rows ── */
-.formBody {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.radioRow {
-  display: flex;
-  gap: 20px;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.twoColRow {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 20px;
-  align-items: start;
-}
-
-@media (max-width: 1020px) {
-  .twoColRow {
-    grid-template-columns: 1fr;
-  }
-}
-
 /* ── donation-specific field groups ── */
 .businessFields {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 1.25rem;
 }
 
 .checkboxGroup {
   display: flex;
   flex-direction: column;
-  gap: 5px;
-}
-
-.receivingSiteGroup {
-  margin-bottom: 10px;
-}
-
-.estimatedValueField {
-  max-width: 200px;
+  gap: 0.25rem;
 }
 
 /* ── error & submit row ── */
@@ -195,9 +27,3 @@
   margin-top: 5px;
   display: block;
 }
-
-.submitButtonRow {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 20px;
-}
diff --git a/app/(main)/components/PhotoUpload.tsx b/app/(main)/components/PhotoUpload.tsx
index c71e9ab1..fd9f813e 100644
--- a/app/(main)/components/PhotoUpload.tsx
+++ b/app/(main)/components/PhotoUpload.tsx
@@ -81,9 +81,9 @@ const PhotoUpload = forwardRef<{ resetFile: () => void }, PhotoUploadProps>(
             <Image
               src={displayImage}
               alt="Profile photo"
-              width={200}
-              height={200}
-              style={{ objectFit: 'cover' }}
+              width={256}
+              height={256}
+              objectFit={'cover'}
               unoptimized
             />
           ) : (
diff --git a/app/(main)/faq/FaqPage.module.css b/app/(main)/faq/FaqPage.module.css
index dea6aa2f..4ece195a 100644
--- a/app/(main)/faq/FaqPage.module.css
+++ b/app/(main)/faq/FaqPage.module.css
@@ -6,6 +6,7 @@
 
 .sectionDescription {
   color: #4f5d75;
+  margin-bottom: 0;
 }
 
 .card {
diff --git a/app/(main)/faq/page.tsx b/app/(main)/faq/page.tsx
index cd95ea3c..ebac5937 100644
--- a/app/(main)/faq/page.tsx
+++ b/app/(main)/faq/page.tsx
@@ -77,38 +77,38 @@ export default function FaqPage() {
   return (
     <div>
       <h1>FAQ</h1>
-      <div className={styles.content}>
-        <section>
+      <div className="content-body">
+        <div>
           <h2>Roles &amp; Permissions</h2>
           <p className={styles.sectionDescription}>
             Roles determine what pages you can access and what actions you can
             take. Higher roles inherit all permissions from roles below them.
           </p>
+        </div>
 
-          <div className="row row-cols-1 row-cols-sm-2 g-5">
-            {roleCards.map((card) => (
-              <div key={card.title}>
-                <FaqCard {...card} />
-              </div>
-            ))}
-          </div>
-        </section>
+        <div className="row row-cols-1 row-cols-sm-2 g-5">
+          {roleCards.map((card) => (
+            <div key={card.title}>
+              <FaqCard {...card} />
+            </div>
+          ))}
+        </div>
 
-        <section>
+        <div>
           <h2>Ticket Statuses</h2>
           <p className={styles.sectionDescription}>
             Once a ticket is submitted, tickets move through the following
             statuses as store admins review and fulfill them.
           </p>
+        </div>
 
-          <div className="row row-cols-1 row-cols-sm-2 g-5">
-            {statusCards.map((card) => (
-              <div key={card.title}>
-                <FaqCard {...card} />
-              </div>
-            ))}
-          </div>
-        </section>
+        <div className="row row-cols-1 row-cols-sm-2 g-5">
+          {statusCards.map((card) => (
+            <div key={card.title}>
+              <FaqCard {...card} />
+            </div>
+          ))}
+        </div>
       </div>
     </div>
   );
diff --git a/app/(main)/home/donate/components/LightweightDonationForm.tsx b/app/(main)/home/donate/components/LightweightDonationForm.tsx
index c19c412b..143a5e8b 100644
--- a/app/(main)/home/donate/components/LightweightDonationForm.tsx
+++ b/app/(main)/home/donate/components/LightweightDonationForm.tsx
@@ -4,7 +4,7 @@ import { forwardRef, useState } from 'react';
 import { DonationInsert } from '@/app/types/donation';
 import { useForm, useWatch, Controller } from 'react-hook-form';
 import { PatternFormat, NumericFormat } from 'react-number-format';
-import { Form, Container, Card, Alert } from 'react-bootstrap';
+import { Form, Card, Alert } from 'react-bootstrap';
 import type { FormControlProps } from 'react-bootstrap';
 import { createDonation } from '@/app/actions/donation';
 import styles from '@/app/(main)/components/DonationForm.module.css';
@@ -151,32 +151,27 @@ export default function LightweightDonationForm({ stores, user }: Props) {
   };
 
   return (
-    <Container className={styles.formContainer}>
+    <div>
+      <h1>Record Gift-in-Kind</h1>
       <Card className="form-card">
         <Card.Body>
-          <form onSubmit={handleSubmit(onSubmit)} className={styles.formBody}>
-            <div className={styles.formSection}>
-              <h1 className="form-title-1">Store Information</h1>
-              <Form.Group
-                controlId="receiving_site"
-                className={styles.receivingSiteGroup}
-              >
-                <Form.Label className="field-label">Receiving site</Form.Label>
-
-                <Form.Select {...register('receiving_site')}>
-                  {receivingSiteOptions.map((site) => (
-                    <option key={site} value={site}>
-                      {site}
-                    </option>
-                  ))}
-                </Form.Select>
-              </Form.Group>
-            </div>
+          <form onSubmit={handleSubmit(onSubmit)} className="form-body">
+            <p className="form-title">Store Information</p>
+            <Form.Group controlId="receiving_site">
+              <Form.Label className="field-label">Receiving Site</Form.Label>
+              <Form.Select {...register('receiving_site')}>
+                {receivingSiteOptions.map((site) => (
+                  <option key={site} value={site}>
+                    {site}
+                  </option>
+                ))}
+              </Form.Select>
+            </Form.Group>
 
-            <h1 className="form-title-2">Donor Information</h1>
+            <p className="form-title">Donor Information</p>
 
             <Form.Group key={resetKey}>
-              <div className={styles.radioRow}>
+              <div className="radio-row">
                 <Form.Check
                   type="radio"
                   label="Individual"
@@ -199,15 +194,15 @@ export default function LightweightDonationForm({ stores, user }: Props) {
               </div>
 
               {errors.donor_type && (
-                <Form.Text className={styles.errorText}>
+                <Form.Control.Feedback type="invalid">
                   {errors.donor_type.message}
-                </Form.Text>
+                </Form.Control.Feedback>
               )}
             </Form.Group>
 
             {donorType && (
               <>
-                <div className={styles.twoColRow}>
+                <div className="two-col-row">
                   <div>
                     {donorType === 'individual' && (
                       <Form.Group controlId="individual_name">
@@ -287,7 +282,7 @@ export default function LightweightDonationForm({ stores, user }: Props) {
                   </div>
                 </div>
 
-                <div className={styles.twoColRow}>
+                <div className="two-col-row">
                   <div>
                     <Form.Group controlId="email">
                       <Form.Label className="field-label">
@@ -349,9 +344,9 @@ export default function LightweightDonationForm({ stores, user }: Props) {
                       />
 
                       {errors.phone && (
-                        <Form.Text className={styles.errorText}>
+                        <Form.Control.Feedback type="invalid">
                           {errors.phone.message}
-                        </Form.Text>
+                        </Form.Control.Feedback>
                       )}
                     </Form.Group>
                   </div>
@@ -382,11 +377,11 @@ export default function LightweightDonationForm({ stores, user }: Props) {
               </>
             )}
 
-            <h1 className="form-title-2">Donation Information</h1>
+            <p className="form-title">Donation Information</p>
 
             <Form.Group controlId="estimated_value">
               <Form.Label className="field-label">
-                Estimated value (USD)
+                Estimated Value (USD)
               </Form.Label>
 
               <Controller
@@ -431,7 +426,7 @@ export default function LightweightDonationForm({ stores, user }: Props) {
             </Form.Group>
 
             <Form.Group controlId="items_donated">
-              <Form.Label className="field-label">Items donated</Form.Label>
+              <Form.Label className="field-label">Items Donated</Form.Label>
               <Form.Control
                 type="text"
                 placeholder="Describe the items you are donating"
@@ -451,7 +446,7 @@ export default function LightweightDonationForm({ stores, user }: Props) {
               </Form.Control.Feedback>
             </Form.Group>
 
-            <div className={styles.submitButtonRow}>
+            <div>
               <button type="submit" className="btn-submit">
                 Submit
               </button>
@@ -459,12 +454,12 @@ export default function LightweightDonationForm({ stores, user }: Props) {
 
             {showSuccess && (
               <Alert variant="success" className="mb-0">
-                Form submitted successfully! Thank you for your donation.
+                Form submitted successfully!
               </Alert>
             )}
           </form>
         </Card.Body>
       </Card>
-    </Container>
+    </div>
   );
 }
diff --git a/app/(main)/incoming-tickets/page.tsx b/app/(main)/incoming-tickets/page.tsx
index f16ba03f..aef1c8d9 100644
--- a/app/(main)/incoming-tickets/page.tsx
+++ b/app/(main)/incoming-tickets/page.tsx
@@ -45,7 +45,7 @@ export default async function IncomingTicketsPage() {
   }
   return (
     <div>
-      <h1>Incoming Tickets</h1>
+      <h1>Store Tickets</h1>
       {stores.length > 0 ? (
         <StoresList stores={stores} />
       ) : (
diff --git a/app/(main)/manage/[storeId]/add/components/AddStoreItemSearch.tsx b/app/(main)/manage/[storeId]/add/components/AddStoreItemSearch.tsx
index 5c11e2c8..8d762f72 100644
--- a/app/(main)/manage/[storeId]/add/components/AddStoreItemSearch.tsx
+++ b/app/(main)/manage/[storeId]/add/components/AddStoreItemSearch.tsx
@@ -14,9 +14,8 @@ import AddInventoryItemForm, {
   Inputs,
 } from '@/app/(main)/manage/components/AddInventoryItemForm';
 import { createItem } from '@/app/actions/inventory';
-import { Form, Container, Card } from 'react-bootstrap';
+import { Form, Card } from 'react-bootstrap';
 import AddItemCard from '@/app/(main)/manage/[storeId]/add/components/AddItemCard';
-import donationStyles from '@/app/(main)/components/DonationForm.module.css';
 import { ListGroup } from 'react-bootstrap';
 
 type ItemWithNames = InventoryItem & {
@@ -178,108 +177,105 @@ export default function AddStoreItemSearch({
   };
 
   return (
-    <div>
-      <Container className={donationStyles.formContainer}>
-        <Card className="form-card">
-          <Card.Body>
-            <div className={donationStyles.formBody}>
-              <Form.Group>
-                <div className="radio-row">
-                  <Form.Check
-                    type="radio"
-                    label="Search for Existing Item"
-                    value="existing"
-                    id="inventory-existing"
-                    name="inventoryType"
-                    onChange={() => setInventoryType('existing')}
+    <div className="content-body">
+      <Card className="form-card">
+        <Card.Body>
+          <div className="form-body">
+            <Form.Group>
+              <div className="radio-row">
+                <Form.Check
+                  type="radio"
+                  label="Search for Existing Item"
+                  value="existing"
+                  id="inventory-existing"
+                  name="inventoryType"
+                  onChange={() => setInventoryType('existing')}
+                />
+                <Form.Check
+                  type="radio"
+                  label="Create New Item"
+                  value="new"
+                  id="inventory-new"
+                  name="inventoryType"
+                  onChange={() => setInventoryType('new')}
+                />
+              </div>
+            </Form.Group>
+            {inventoryType == 'existing' && (
+              <div>
+                <div className="search-filter-wrapper">
+                  <Form.Control
+                    type="text"
+                    placeholder="Search store items..."
+                    className="search-bar"
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
                   />
-                  <Form.Check
-                    type="radio"
-                    label="Create New Item"
-                    value="new"
-                    id="inventory-new"
-                    name="inventoryType"
-                    onChange={() => setInventoryType('new')}
-                  />
-                </div>
-              </Form.Group>
-              {inventoryType == 'existing' && (
-                <div>
-                  <div className="search-filter-wrapper">
-                    <Form.Control
-                      type="text"
-                      placeholder="Search store items..."
-                      className="search-bar"
-                      value={searchQuery}
-                      onChange={(e) => setSearchQuery(e.target.value)}
-                    />
-                  </div>
-                  {results.length > 0 && (
-                    <ListGroup>
-                      {results?.map((item) => (
-                        <ListGroup.Item
-                          key={item.inventory_item_id}
-                          action
-                          type="button"
-                          onClick={() => handleSelect(item)}
-                        >
-                          {item.name}
-                        </ListGroup.Item>
-                      ))}
-                    </ListGroup>
-                  )}
                 </div>
-              )}
-              {inventoryType == 'new' && (
-                <FormProvider {...createItemMethods}>
-                  <AddInventoryItemForm
-                    selectedFile={selectedFile}
-                    onFileChange={setSelectedFile}
-                  />
-                  <div>
-                    <div className="submit-button-row">
-                      <button
+                {results.length > 0 && (
+                  <ListGroup>
+                    {results?.map((item) => (
+                      <ListGroup.Item
+                        key={item.inventory_item_id}
+                        action
                         type="button"
-                        onClick={createItemMethods.handleSubmit(
-                          handleCreateAndSelect,
-                        )}
-                        className="btn-submit"
+                        onClick={() => handleSelect(item)}
                       >
-                        Create Item
-                      </button>
-                    </div>
-                  </div>
-                </FormProvider>
-              )}
-            </div>
-          </Card.Body>
-        </Card>
-      </Container>
-
-      <h3>Selected Items</h3>
-      {fields.length > 0 ? (
-        <div className="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-5">
-          {fields.map((field, idx) => (
-            <div key={field.id}>
-              <AddItemCard
-                index={idx}
-                photoUrl={selectedItems[idx]?.photo_url ?? null}
-                item={selectedItems[idx]?.name}
-                subcategory={selectedItems[idx]?.subcategory_name}
-                category={selectedItems[idx]?.category_name}
-                description={selectedItems[idx]?.description}
-                onRemove={() => handleRemove(idx)}
-              />
-              <input
-                type="hidden"
-                {...methods.register(`items.${idx}.inventory_item_id`)}
-              />
-            </div>
-          ))}
-        </div>
-      ) : (
-        <p>No items selected.</p>
-      )}
+                        {item.name}
+                      </ListGroup.Item>
+                    ))}
+                  </ListGroup>
+                )}
+              </div>
+            )}
+            {inventoryType == 'new' && (
+              <FormProvider {...createItemMethods}>
+                <AddInventoryItemForm
+                  selectedFile={selectedFile}
+                  onFileChange={setSelectedFile}
+                />
+                <div>
+                  <button
+                    type="button"
+                    onClick={createItemMethods.handleSubmit(
+                      handleCreateAndSelect,
+                    )}
+                    className="btn-submit"
+                  >
+                    Create Item
+                  </button>
+                </div>
+              </FormProvider>
+            )}
+          </div>
+        </Card.Body>
+      </Card>
+      <div className="form-body">
+        <p className="form-title">Selected Items</p>
+        {fields.length > 0 ? (
+          <div className="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-5">
+            {fields.map((field, idx) => (
+              <div key={field.id}>
+                <AddItemCard
+                  index={idx}
+                  photoUrl={selectedItems[idx]?.photo_url ?? null}
+                  item={selectedItems[idx]?.name}
+                  subcategory={selectedItems[idx]?.subcategory_name}
+                  category={selectedItems[idx]?.category_name}
+                  description={selectedItems[idx]?.description}
+                  onRemove={() => handleRemove(idx)}
+                />
+                <input
+                  type="hidden"
+                  {...methods.register(`items.${idx}.inventory_item_id`)}
+                />
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p>No items selected.</p>
+        )}
+      </div>
     </div>
   );
 }
diff --git a/app/(main)/manage/[storeId]/add/components/DonationForm.tsx b/app/(main)/manage/[storeId]/add/components/DonationForm.tsx
index 46c5bfb2..1ab0b2d8 100644
--- a/app/(main)/manage/[storeId]/add/components/DonationForm.tsx
+++ b/app/(main)/manage/[storeId]/add/components/DonationForm.tsx
@@ -3,7 +3,7 @@
 import { forwardRef } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { PatternFormat, NumericFormat } from 'react-number-format';
-import { Form, Container, Card } from 'react-bootstrap';
+import { Form, Card } from 'react-bootstrap';
 import type { FormControlProps } from 'react-bootstrap';
 import { CombinedFormData } from '@/app/(main)/manage/[storeId]/add/components/StoreItemsDonationForm';
 import styles from '@/app/(main)/components/DonationForm.module.css';
@@ -29,14 +29,14 @@ export default function DonationForm({
   } = useFormContext<CombinedFormData>();
 
   return (
-    <Container className={styles.formContainer}>
+    <div>
       <Card className="form-card">
         <Card.Body>
-          <h1 className="form-title-1">Donor Information</h1>
-          <div className={styles.formBody}>
+          <div className="form-body">
+            <p className="form-title">Donor Information</p>
             {/* Donor Type */}
             <Form.Group>
-              <div className={styles.radioRow}>
+              <div className="radio-row">
                 <Form.Check
                   type="radio"
                   label="Individual"
@@ -57,21 +57,21 @@ export default function DonationForm({
                 />
               </div>
               {errors.donor_type && (
-                <Form.Text className={styles.errorText}>
+                <Form.Control.Feedback type="invalid">
                   {errors.donor_type.message}
-                </Form.Text>
+                </Form.Control.Feedback>
               )}
             </Form.Group>
 
             {donorType && (
               <>
                 {/* Name + Address (same row) */}
-                <div className={styles.twoColRow}>
+                <div className="two-col-row">
                   <div>
                     {/* Conditional Name Field: Individual */}
                     {donorType === 'individual' && (
                       <Form.Group controlId="individual_name">
-                        <Form.Label className={styles.fieldLabel}>
+                        <Form.Label className="field-label">
                           Individual Name
                         </Form.Label>
                         <Form.Control
@@ -90,7 +90,7 @@ export default function DonationForm({
                     {donorType === 'business' && (
                       <div className={styles.businessFields}>
                         <Form.Group controlId="business_name">
-                          <Form.Label className={styles.fieldLabel}>
+                          <Form.Label className="field-label">
                             Business Name
                           </Form.Label>
                           <Form.Control
@@ -105,7 +105,7 @@ export default function DonationForm({
                         </Form.Group>
 
                         <Form.Group controlId="business_contact_name">
-                          <Form.Label className={styles.fieldLabel}>
+                          <Form.Label className="field-label">
                             Business Contact Name
                           </Form.Label>
                           <Form.Control
@@ -125,7 +125,7 @@ export default function DonationForm({
                   <div>
                     {/* Street Address */}
                     <Form.Group controlId="address">
-                      <Form.Label className={styles.fieldLabel}>
+                      <Form.Label className="field-label">
                         Donor Street Address
                       </Form.Label>
                       <Form.Control
@@ -142,11 +142,11 @@ export default function DonationForm({
                 </div>
 
                 {/* Email + Phone (same row) */}
-                <div className={styles.twoColRow}>
+                <div className="two-col-row">
                   <div>
                     {/* Email */}
                     <Form.Group controlId="email">
-                      <Form.Label className={styles.fieldLabel}>
+                      <Form.Label className="field-label">
                         Donor Email
                       </Form.Label>
                       <Form.Control
@@ -169,7 +169,7 @@ export default function DonationForm({
                   <div>
                     {/* Phone */}
                     <Form.Group controlId="phone">
-                      <Form.Label className={styles.fieldLabel}>
+                      <Form.Label className="field-label">
                         Donor Phone Number (Optional)
                       </Form.Label>
                       <Controller
@@ -201,9 +201,9 @@ export default function DonationForm({
                         )}
                       />
                       {errors.phone && (
-                        <Form.Text className={styles.errorText}>
+                        <Form.Control.Feedback type="invalid">
                           {errors.phone.message}
-                        </Form.Text>
+                        </Form.Control.Feedback>
                       )}
                     </Form.Group>
                   </div>
@@ -233,14 +233,11 @@ export default function DonationForm({
               </>
             )}
 
-            <h1 className="form-title-2">Donation Information</h1>
+            <p className="form-title">Donation Information</p>
 
             {/* Estimated Value */}
-            <Form.Group
-              controlId="estimated_value"
-              className={styles.estimatedValueField}
-            >
-              <Form.Label className={styles.fieldLabel}>
+            <Form.Group controlId="estimated_value">
+              <Form.Label className="field-label">
                 Estimated value (USD)
               </Form.Label>
               <Controller
@@ -285,9 +282,7 @@ export default function DonationForm({
 
             {/* Items Donated */}
             <Form.Group controlId="items_donated">
-              <Form.Label className={styles.fieldLabel}>
-                Items donated
-              </Form.Label>
+              <Form.Label className="field-label">Items donated</Form.Label>
               <Form.Control
                 type="text"
                 placeholder="Describe the items you are donating"
@@ -307,7 +302,7 @@ export default function DonationForm({
             </Form.Group>
 
             {showSubmitButton && (
-              <div className={styles.submitButtonRow}>
+              <div>
                 <button type="submit" className="btn-submit">
                   Submit
                 </button>
@@ -316,6 +311,6 @@ export default function DonationForm({
           </div>
         </Card.Body>
       </Card>
-    </Container>
+    </div>
   );
 }
diff --git a/app/(main)/manage/[storeId]/add/components/StoreItemsDonationForm.tsx b/app/(main)/manage/[storeId]/add/components/StoreItemsDonationForm.tsx
index 94780f39..11c5aa02 100644
--- a/app/(main)/manage/[storeId]/add/components/StoreItemsDonationForm.tsx
+++ b/app/(main)/manage/[storeId]/add/components/StoreItemsDonationForm.tsx
@@ -184,9 +184,11 @@ export default function StoreItemsDonationForm({
   };
   return (
     <div>
-      <h2>Add Items</h2>
       <FormProvider {...methods}>
-        <form onSubmit={methods.handleSubmit(onSubmit)}>
+        <form
+          onSubmit={methods.handleSubmit(onSubmit)}
+          className="content-body"
+        >
           <div className="checkbox-row">
             <Form.Check
               type="checkbox"
@@ -222,9 +224,11 @@ export default function StoreItemsDonationForm({
                 setSelectedItems={setSelectedItems}
               />
               {/* add autofillitems connection pass in prop to storeitemsform */}
-              <button type="submit" className="btn-submit">
-                Submit
-              </button>
+              <div>
+                <button type="submit" className="btn-submit">
+                  Submit
+                </button>
+              </div>
             </>
           )}
         </form>
diff --git a/app/(main)/manage/[storeId]/add/page.tsx b/app/(main)/manage/[storeId]/add/page.tsx
index 0468d003..2e3671bf 100644
--- a/app/(main)/manage/[storeId]/add/page.tsx
+++ b/app/(main)/manage/[storeId]/add/page.tsx
@@ -39,6 +39,7 @@ export default async function AddStoreItemsPage({
           add: 'Add Store Items',
         }}
       />
+      <h1>Add Store Items</h1>
       <StoreItemsDonationForm store={storeData} user={userData} />
     </div>
   );
diff --git a/app/(main)/manage/[storeId]/page.tsx b/app/(main)/manage/[storeId]/page.tsx
index ae586aa3..bba72b15 100644
--- a/app/(main)/manage/[storeId]/page.tsx
+++ b/app/(main)/manage/[storeId]/page.tsx
@@ -129,47 +129,49 @@ export default async function ManageStorePage({
         }}
       />
       <div className="page-header">
-        <h1>
+        <h1 className="mb-0">
           <span>Managing </span>
           {store.name} <Image src={pinIcon} height={32} alt="Pin icon" />
         </h1>
-        <Link href={`/manage/${storeId}/add`}>Add and/or donate</Link>
+        <Link className="btn-submit" href={`/manage/${storeId}/add`}>
+          Add Items
+        </Link>
+      </div>
+      <div className="content-body">
+        <ItemSearch
+          categories={
+            categories?.map((cat) => ({
+              id: cat.category_id,
+              name: cat.name,
+            })) || []
+          }
+          subcategories={
+            subcategories?.map((sub) => ({
+              id: sub.subcategory_id,
+              name: sub.name,
+              category_id: sub.category_id,
+            })) || []
+          }
+        />
+
+        {items && items.length > 0 ? (
+          <div className="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-5">
+            {items.map((item) => (
+              <div key={item.id} className="col">
+                <ItemCard
+                  id={item.id}
+                  item={item.item}
+                  photoUrl={item.photoUrl}
+                  subcategory={item.subcategory}
+                  category={item.category}
+                />
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p>No items found.</p>
+        )}
       </div>
-
-      <ItemSearch
-        categories={
-          categories?.map((cat) => ({
-            id: cat.category_id,
-            name: cat.name,
-          })) || []
-        }
-        subcategories={
-          subcategories?.map((sub) => ({
-            id: sub.subcategory_id,
-            name: sub.name,
-            category_id: sub.category_id,
-          })) || []
-        }
-      />
-
-      <h2>Items</h2>
-      {items && items.length > 0 ? (
-        <div className="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-5">
-          {items.map((item) => (
-            <div key={item.id} className="col">
-              <ItemCard
-                id={item.id}
-                item={item.item}
-                photoUrl={item.photoUrl}
-                subcategory={item.subcategory}
-                category={item.category}
-              />
-            </div>
-          ))}
-        </div>
-      ) : (
-        <p>No items found.</p>
-      )}
     </div>
   );
 }
diff --git a/app/(main)/manage/inventory/add/components/EditCategories.tsx b/app/(main)/manage/categories/components/EditCategories.tsx
similarity index 100%
rename from app/(main)/manage/inventory/add/components/EditCategories.tsx
rename to app/(main)/manage/categories/components/EditCategories.tsx
diff --git a/app/(main)/manage/categories/page.tsx b/app/(main)/manage/categories/page.tsx
new file mode 100644
index 00000000..e5d27efd
--- /dev/null
+++ b/app/(main)/manage/categories/page.tsx
@@ -0,0 +1,63 @@
+import { createClient } from '@/app/lib/supabase/server-client';
+import EditCategories from '@/app/(main)/manage/categories/components/EditCategories';
+import Breadcrumbs from '@/app/(main)/components/Breadcrumbs';
+
+export default async function InventoryPage() {
+  const supabase = await createClient();
+
+  const { data: claimsData } = await supabase.auth.getClaims();
+  const role = claimsData?.claims?.user_role;
+
+  const { data: categories, error } = await supabase
+    .from('categories')
+    .select(`category_id, name, subcategories(subcategory_id, name)`)
+    .order('name', { ascending: true })
+    .order('name', { referencedTable: 'subcategories', ascending: true })
+    .overrideTypes<
+      {
+        category_id: number;
+        name: string;
+        subcategories: {
+          name: string;
+          subcategory_id: number;
+        }[];
+      }[],
+      { merge: false }
+    >();
+
+  if (error) {
+    console.error(error);
+    return <div>Failed to load categories.</div>;
+  }
+
+  return (
+    <div>
+      <Breadcrumbs
+        labelMap={{
+          manage: 'Manage Inventory',
+        }}
+      />
+      <h1>Categories</h1>
+      <div className="content-body">
+        {role === 'admin' && (
+          <ul>
+            {categories?.map((cat) => (
+              <li key={cat.category_id}>
+                {cat.name}
+                <ul>
+                  {cat.subcategories?.map((sub) => (
+                    <li key={sub.subcategory_id}>{sub.name}</li>
+                  ))}
+                </ul>
+              </li>
+            ))}
+          </ul>
+        )}
+
+        {(role === 'superadmin' || role === 'owner') && (
+          <EditCategories categories={categories} />
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/app/(main)/manage/components/AddInventoryItemForm.tsx b/app/(main)/manage/components/AddInventoryItemForm.tsx
index 56b982e2..0f298a6e 100644
--- a/app/(main)/manage/components/AddInventoryItemForm.tsx
+++ b/app/(main)/manage/components/AddInventoryItemForm.tsx
@@ -3,11 +3,8 @@ import { createClient } from '@/app/lib/supabase/browser-client';
 import { Subcategory, Category } from '@/app/types/inventory';
 import { useFormContext } from 'react-hook-form';
 import { useEffect, useState, useRef } from 'react';
-import Image from 'next/image';
 import PhotoUpload from '@/app/(main)/components/PhotoUpload';
-import defaultItemPhoto from '@/public/image-placeholder.svg';
 import { Form } from 'react-bootstrap';
-import donationStyles from '@/app/(main)/components/DonationForm.module.css';
 import styles from '@/app/(main)/manage/components/AddInventoryItemForm.module.css';
 
 export type Inputs = {
@@ -111,12 +108,10 @@ export default function AddInventoryItemForm({
   }, [selectedCategory]);
 
   return (
-    <div className={donationStyles.formBody}>
+    <div className="form-body">
       {/* Item Title */}
       <Form.Group controlId="name">
-        <Form.Label className={donationStyles.fieldLabel}>
-          Item Title
-        </Form.Label>
+        <Form.Label>Item Title</Form.Label>
         <Form.Control
           type="text"
           className={styles.nameField}
@@ -129,33 +124,21 @@ export default function AddInventoryItemForm({
       </Form.Group>
       {/* Image */}
       <Form.Group controlId="image">
-        <Form.Label className={donationStyles.fieldLabel}>Image</Form.Label>
+        <Form.Label>Image</Form.Label>
         {/* placeholder for drag and drop */}
-        <div>
-          <Image
-            src={previewUrl || defaultItemPhoto}
-            alt="Item photo"
-            width={64}
-            height={64}
-            style={{ objectFit: 'cover' }}
-            unoptimized
+        <div style={{ width: '16rem' }}>
+          <PhotoUpload
+            ref={photoUploadRef}
+            onFileSelect={handleFileSelect}
+            previewUrl={previewUrl}
+            onRemove={handleRemovePhoto}
           />
-          {selectedFile && (
-            <button type="button" onClick={handleRemovePhoto}>
-              Remove
-            </button>
-          )}
-          <div>
-            <PhotoUpload ref={photoUploadRef} onFileSelect={handleFileSelect} />
-          </div>
         </div>
       </Form.Group>
 
       {/* Description */}
       <Form.Group controlId="description">
-        <Form.Label className={donationStyles.fieldLabel}>
-          Description
-        </Form.Label>
+        <Form.Label>Description</Form.Label>
         <Form.Control
           as="textarea"
           className={styles.descriptionField}
@@ -169,7 +152,7 @@ export default function AddInventoryItemForm({
 
       {/* Category */}
       <Form.Group controlId="selectedCategory">
-        <Form.Label className={donationStyles.fieldLabel}>Category</Form.Label>
+        <Form.Label>Category</Form.Label>
         <Form.Select
           className={styles.selectField}
           {...register('selectedCategory', {
@@ -190,9 +173,7 @@ export default function AddInventoryItemForm({
       </Form.Group>
       {/* subcategory */}
       <Form.Group controlId="selectedSubcategory">
-        <Form.Label className={donationStyles.fieldLabel}>
-          Subcategory
-        </Form.Label>
+        <Form.Label>Subcategory</Form.Label>
         <Form.Select
           className={styles.selectField}
           {...register('selectedSubcategory', {
diff --git a/app/(main)/manage/inventory/[inventoryItemId]/components/DeleteInventoryItemButton.tsx b/app/(main)/manage/inventory/[inventoryItemId]/components/DeleteInventoryItemButton.tsx
index 72ba8b30..c7f3a06c 100644
--- a/app/(main)/manage/inventory/[inventoryItemId]/components/DeleteInventoryItemButton.tsx
+++ b/app/(main)/manage/inventory/[inventoryItemId]/components/DeleteInventoryItemButton.tsx
@@ -23,8 +23,8 @@ export default function DeleteInventoryItemButton({
   }
 
   return (
-    <button type="button" onClick={handleDelete}>
-      Remove item
+    <button className="btn-remove" type="button" onClick={handleDelete}>
+      Remove
     </button>
   );
 }
diff --git a/app/(main)/manage/inventory/[inventoryItemId]/components/EditInventoryItemForm.module.css b/app/(main)/manage/inventory/[inventoryItemId]/components/EditInventoryItemForm.module.css
new file mode 100644
index 00000000..29ecb948
--- /dev/null
+++ b/app/(main)/manage/inventory/[inventoryItemId]/components/EditInventoryItemForm.module.css
@@ -0,0 +1,19 @@
+.layout {
+  display: flex;
+  align-items: flex-start;
+  gap: 3rem;
+  flex-wrap: wrap;
+}
+
+.photoColumn {
+  width: 16rem;
+  height: 16rem;
+  flex-shrink: 0;
+}
+
+.fieldsColumn {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  flex: 1;
+}
diff --git a/app/(main)/manage/inventory/[inventoryItemId]/components/EditInventoryItemForm.tsx b/app/(main)/manage/inventory/[inventoryItemId]/components/EditInventoryItemForm.tsx
index ca833941..b773304f 100644
--- a/app/(main)/manage/inventory/[inventoryItemId]/components/EditInventoryItemForm.tsx
+++ b/app/(main)/manage/inventory/[inventoryItemId]/components/EditInventoryItemForm.tsx
@@ -7,11 +7,10 @@ import type {
   InventoryItem,
   Subcategory,
 } from '@/app/types/inventory';
-import Image from 'next/image';
 import PhotoUpload from '@/app/(main)/components/PhotoUpload';
-import defaultItemPhoto from '@/public/image-placeholder.svg';
 import { useEffect, useRef, useState } from 'react';
 import { useForm, useWatch, type SubmitHandler } from 'react-hook-form';
+import styles from '@/app/(main)/manage/inventory/[inventoryItemId]/components/EditInventoryItemForm.module.css';
 
 type FormValues = {
   name: string;
@@ -215,123 +214,112 @@ export default function EditInventoryItemForm({
     },
   });
 
-  const displayImage = isPendingDelete
-    ? defaultItemPhoto.src
-    : previewUrl || photoUrl || defaultItemPhoto.src;
-
   const hasDirtyTextOrImage = isDirty || !!selectedFile || isPendingDelete;
 
   return (
     <div>
       <form onSubmit={handleSubmit(onSubmit)} className="form-card">
         <div className="card-body">
-          <div className="mb-3">
-            <Image
-              src={displayImage}
-              alt="Item photo"
-              width={64}
-              height={64}
-              className="photo"
-              unoptimized
-            />
-
-            {!isPendingDelete && displayImage !== defaultItemPhoto.src && (
-              <button
-                type="button"
-                onClick={handleRemovePhoto}
-                className="btn-cancel"
-              >
-                Remove
-              </button>
-            )}
-
-            <br />
-            <PhotoUpload ref={photoUploadRef} onFileSelect={handleFileSelect} />
-          </div>
-
-          <div className="mb-3">
-            <label className="form-label field-label">
-              Inventory item name
-            </label>
-            <input
-              type="text"
-              {...register('name', { required: 'Item name is required.' })}
-              className="form-control"
-            />
-            {errors.name && <p role="alert">{errors.name.message}</p>}
-          </div>
-
-          <div className="mb-3">
-            <label className="form-label field-label">Description</label>
-            <input
-              type="text"
-              {...register('description', {
-                required: 'Description is required.',
-              })}
-              className="form-control"
-            />
-            {errors.description && (
-              <p role="alert">{errors.description.message}</p>
-            )}
-          </div>
-
-          <div className="mb-3">
-            <label className="form-label field-label">Category</label>
-            <select className="form-select" {...categoryField}>
-              <option value="">None</option>
-              {initialCategories.map((category) => (
-                <option key={category.category_id} value={category.category_id}>
-                  {category.name}
-                </option>
-              ))}
-            </select>
-          </div>
+          <div className={styles.layout}>
+            <div className={styles.photoColumn}>
+              <PhotoUpload
+                ref={photoUploadRef}
+                onFileSelect={handleFileSelect}
+                previewUrl={previewUrl}
+                initialPhotoUrl={photoUrl}
+                isPendingDelete={isPendingDelete}
+                onRemove={handleRemovePhoto}
+              />
+            </div>
+            <div className={styles.fieldsColumn}>
+              <div>
+                <label className="form-label field-label">
+                  Inventory item name
+                </label>
+                <input
+                  type="text"
+                  {...register('name', { required: 'Item name is required.' })}
+                  className="form-control"
+                />
+                {errors.name && <p role="alert">{errors.name.message}</p>}
+              </div>
+
+              <div>
+                <label className="form-label field-label">Description</label>
+                <input
+                  type="text"
+                  {...register('description', {
+                    required: 'Description is required.',
+                  })}
+                  className="form-control"
+                />
+                {errors.description && (
+                  <p role="alert">{errors.description.message}</p>
+                )}
+              </div>
+
+              <div>
+                <label className="form-label field-label">Category</label>
+                <select className="form-select" {...categoryField}>
+                  <option value="">None</option>
+                  {initialCategories.map((category) => (
+                    <option
+                      key={category.category_id}
+                      value={category.category_id}
+                    >
+                      {category.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              {!!selectedCategory && (
+                <div>
+                  <label className="form-label field-label">Subcategory</label>
+                  <select
+                    className="form-select"
+                    {...register('selectedSubcategory', {
+                      required: 'Subcategory is required.',
+                      onChange: () => trigger('selectedSubcategory'),
+                    })}
+                  >
+                    <option value="">None</option>
+                    {subcategories.map((subcategory) => (
+                      <option
+                        key={subcategory.subcategory_id}
+                        value={subcategory.subcategory_id}
+                      >
+                        {subcategory.name}
+                      </option>
+                    ))}
+                  </select>
+                  {errors.selectedSubcategory && (
+                    <p role="alert">{errors.selectedSubcategory.message}</p>
+                  )}
+                </div>
+              )}
 
-          {!!selectedCategory && (
-            <div className="mb-3">
-              <label className="form-label field-label">Subcategory</label>
-              <select
-                className="form-select"
-                {...register('selectedSubcategory', {
-                  required: 'Subcategory is required.',
-                  onChange: () => trigger('selectedSubcategory'),
-                })}
-              >
-                <option value="">None</option>
-                {subcategories.map((subcategory) => (
-                  <option
-                    key={subcategory.subcategory_id}
-                    value={subcategory.subcategory_id}
+              {hasDirtyTextOrImage && (
+                <div className="button-spacing">
+                  <button
+                    type="submit"
+                    disabled={isSubmitting}
+                    className="btn-submit"
                   >
-                    {subcategory.name}
-                  </option>
-                ))}
-              </select>
-              {errors.selectedSubcategory && (
-                <p role="alert">{errors.selectedSubcategory.message}</p>
+                    {isSubmitting ? 'Saving...' : 'Save'}
+                  </button>
+                  <button
+                    type="button"
+                    className="btn-cancel"
+                    onClick={handleCancel}
+                    disabled={isSubmitting}
+                  >
+                    Cancel
+                  </button>
+                </div>
               )}
             </div>
-          )}
-
-          {hasDirtyTextOrImage && (
-            <div className="button-spacing">
-              <button
-                type="submit"
-                disabled={isSubmitting}
-                className="btn-submit"
-              >
-                {isSubmitting ? 'Saving...' : 'Save'}
-              </button>
-              <button
-                type="button"
-                className="btn-cancel"
-                onClick={handleCancel}
-                disabled={isSubmitting}
-              >
-                Cancel
-              </button>
-            </div>
-          )}
+          </div>
         </div>
       </form>
     </div>
diff --git a/app/(main)/manage/inventory/[inventoryItemId]/page.tsx b/app/(main)/manage/inventory/[inventoryItemId]/page.tsx
index 52e8a088..e84dd593 100644
--- a/app/(main)/manage/inventory/[inventoryItemId]/page.tsx
+++ b/app/(main)/manage/inventory/[inventoryItemId]/page.tsx
@@ -102,12 +102,16 @@ export default async function InventoryItemPage({
         }}
       />
       <h1>{item.name}</h1>
-      <EditInventoryItemForm
-        item={item}
-        initialCategories={categoriesRes.data || []}
-        initialSubcategories={subcategoriesRes.data || []}
-      />
-      <DeleteInventoryItemButton inventoryItemId={item.inventory_item_id} />
+      <div className="content-body">
+        <EditInventoryItemForm
+          item={item}
+          initialCategories={categoriesRes.data || []}
+          initialSubcategories={subcategoriesRes.data || []}
+        />
+        <div>
+          <DeleteInventoryItemButton inventoryItemId={item.inventory_item_id} />
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/app/(main)/manage/inventory/add/page.tsx b/app/(main)/manage/inventory/add/page.tsx
index cebcb799..67c7ad37 100644
--- a/app/(main)/manage/inventory/add/page.tsx
+++ b/app/(main)/manage/inventory/add/page.tsx
@@ -82,17 +82,27 @@ export default function AddInventoryItemPage() {
           add: 'Add Inventory Item',
         }}
       />
-
       <h1>Add Inventory Item</h1>
-      <FormProvider {...methods}>
-        <form onSubmit={methods.handleSubmit(onSubmit)}>
-          <AddInventoryItemForm
-            selectedFile={selectedFile}
-            onFileChange={setSelectedFile}
-          />
-          <button type="submit">Submit</button>
-        </form>
-      </FormProvider>
+      <div className="form-card">
+        <div className="card-body">
+          <FormProvider {...methods}>
+            <form
+              onSubmit={methods.handleSubmit(onSubmit)}
+              className="form-body"
+            >
+              <AddInventoryItemForm
+                selectedFile={selectedFile}
+                onFileChange={setSelectedFile}
+              />
+              <div>
+                <button className="btn-submit" type="submit">
+                  Submit
+                </button>
+              </div>
+            </form>
+          </FormProvider>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/app/(main)/manage/inventory/page.tsx b/app/(main)/manage/inventory/page.tsx
index 1a7da94f..7c702a78 100644
--- a/app/(main)/manage/inventory/page.tsx
+++ b/app/(main)/manage/inventory/page.tsx
@@ -1,7 +1,6 @@
 import ItemCard from '@/app/(main)/components/ItemCard';
 import { createClient } from '@/app/lib/supabase/server-client';
 import Link from 'next/link';
-import EditCategories from '@/app/(main)/manage/inventory/add/components/EditCategories';
 import ItemSearch from '@/app/(main)/components/ItemSearch';
 import Breadcrumbs from '@/app/(main)/components/Breadcrumbs';
 
@@ -18,9 +17,6 @@ export default async function InventoryPage({
 }) {
   const supabase = await createClient();
 
-  const { data: claimsData } = await supabase.auth.getClaims();
-  const role = claimsData?.claims?.user_role;
-
   const { data: subcategories } = await supabase
     .from('subcategories')
     .select('subcategory_id, name, category_id')
@@ -106,65 +102,45 @@ export default async function InventoryPage({
         }}
       />
       <div className="page-header">
-        <h1>Inventory Library</h1>
-        <Link href="/manage/inventory/add">Add inventory item</Link>
+        <h1 className="mb-0">Inventory Library</h1>
+        <Link className="btn-submit" href="/manage/inventory/add">
+          Add Item
+        </Link>
+      </div>
+      <div className="content-body">
+        <ItemSearch
+          categories={
+            categories?.map((cat) => ({
+              id: cat.category_id,
+              name: cat.name,
+            })) || []
+          }
+          subcategories={
+            subcategories?.map((sub) => ({
+              id: sub.subcategory_id,
+              name: sub.name,
+              category_id: sub.category_id,
+            })) || []
+          }
+        />
+        {items && items.length > 0 ? (
+          <div className="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-5">
+            {items.map((item) => (
+              <div key={item.id} className="col">
+                <ItemCard
+                  id={item.id}
+                  item={item.item}
+                  photoUrl={item.photoUrl}
+                  subcategory={item.subcategory}
+                  category={item.category}
+                />
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p>No items found.</p>
+        )}
       </div>
-
-      <ItemSearch
-        categories={
-          categories?.map((cat) => ({
-            id: cat.category_id,
-            name: cat.name,
-          })) || []
-        }
-        subcategories={
-          subcategories?.map((sub) => ({
-            id: sub.subcategory_id,
-            name: sub.name,
-            category_id: sub.category_id,
-          })) || []
-        }
-      />
-
-      <h2>Items</h2>
-      {items && items.length > 0 ? (
-        <div className="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-5">
-          {items.map((item) => (
-            <div key={item.id} className="col">
-              <ItemCard
-                id={item.id}
-                item={item.item}
-                photoUrl={item.photoUrl}
-                subcategory={item.subcategory}
-                category={item.category}
-              />
-            </div>
-          ))}
-        </div>
-      ) : (
-        <p>No items found.</p>
-      )}
-
-      <h2>Categories</h2>
-
-      {role === 'admin' && (
-        <ul>
-          {categories?.map((cat) => (
-            <li key={cat.category_id}>
-              {cat.name}
-              <ul>
-                {cat.subcategories?.map((sub) => (
-                  <li key={sub.subcategory_id}>{sub.name}</li>
-                ))}
-              </ul>
-            </li>
-          ))}
-        </ul>
-      )}
-
-      {(role === 'superadmin' || role === 'owner') && (
-        <EditCategories categories={categories} />
-      )}
     </div>
   );
 }
diff --git a/app/(main)/manage/page.tsx b/app/(main)/manage/page.tsx
index 34edf906..a947dca7 100644
--- a/app/(main)/manage/page.tsx
+++ b/app/(main)/manage/page.tsx
@@ -49,14 +49,21 @@ export default async function ManagePage() {
   return (
     <div>
       <h1>Manage Inventory</h1>
-      <Link href="/manage/inventory">
-        <p>Inventory Library</p>
-      </Link>
-      {stores.length > 0 ? (
-        <StoresList stores={stores} />
-      ) : (
-        <p>No stores found.</p>
-      )}
+      <div className="content-body">
+        <span className="link-btn-row">
+          <Link className="btn-submit" href="/manage/inventory">
+            Inventory Library
+          </Link>
+          <Link className="btn-submit" href="/manage/categories">
+            Item Categories
+          </Link>
+        </span>
+        {stores.length > 0 ? (
+          <StoresList stores={stores} />
+        ) : (
+          <p>No stores found.</p>
+        )}
+      </div>
     </div>
   );
 }
diff --git a/app/(main)/outgoing-tickets/page.tsx b/app/(main)/outgoing-tickets/page.tsx
index e5db4cd8..ef3c499c 100644
--- a/app/(main)/outgoing-tickets/page.tsx
+++ b/app/(main)/outgoing-tickets/page.tsx
@@ -27,7 +27,7 @@ export default async function OutgoingTicketsPage() {
 
   return (
     <div>
-      <h1>Outgoing Tickets</h1>
+      <h1>My Tickets</h1>
       <OutgoingTicketsList tickets={userTickets}></OutgoingTicketsList>
     </div>
   );
diff --git a/app/(main)/profile/components/ProfileForm.module.css b/app/(main)/profile/components/ProfileForm.module.css
index 13a84a71..dcb92dcb 100644
--- a/app/(main)/profile/components/ProfileForm.module.css
+++ b/app/(main)/profile/components/ProfileForm.module.css
@@ -1,18 +1,15 @@
 .card {
-  border: none;
-  border-radius: 5px;
-  background: #fff;
-  margin-top: 8.25rem;
+  margin-top: 6.25rem;
 }
 
 .cardBody {
-  padding: 40px;
-  padding-top: 6.25rem;
-  margin-top: 50px;
+  padding: 6.25rem 1.5rem 1.5rem 1.5rem;
 }
 
-.userInfoText {
-  margin-top: 1.25rem;
+@media (min-width: 576px) {
+  .cardBody {
+    padding: 6.25rem 3rem 3rem 3rem;
+  }
 }
 
 .avatarCircle {
@@ -36,12 +33,6 @@
   margin-top: -12.5rem;
 }
 
-.fieldGroup {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 16px;
-}
-
 .profileLabel {
   font-weight: 500;
   margin-bottom: 5px;
diff --git a/app/(main)/profile/components/ProfileForm.tsx b/app/(main)/profile/components/ProfileForm.tsx
index 7b986e57..597da449 100644
--- a/app/(main)/profile/components/ProfileForm.tsx
+++ b/app/(main)/profile/components/ProfileForm.tsx
@@ -145,7 +145,7 @@ export default function ProfileForm({ user }: { user: User }) {
   };
 
   return (
-    <div className={styles.card}>
+    <div className={`form-card ${styles.card}`}>
       <div className={styles.cardBody}>
         <form onSubmit={handleSubmit(onSubmit)} className="form-body">
           {isEditing ? (
@@ -172,12 +172,12 @@ export default function ProfileForm({ user }: { user: User }) {
               />
             </div>
           )}
-          <h2>User Information</h2>
+          <p className="form-title">User Information</p>
 
           <div>
             <div className="two-col-row">
               <div>
-                <label className={styles.profileLabel}>First name</label>
+                <label className={styles.profileLabel}>First Name</label>
                 {isEditing ? (
                   <>
                     <input
@@ -196,7 +196,7 @@ export default function ProfileForm({ user }: { user: User }) {
               </div>
 
               <div>
-                <label className={styles.profileLabel}>Last name</label>
+                <label className={styles.profileLabel}>Last Name</label>
                 {isEditing ? (
                   <>
                     <input
diff --git a/app/(main)/profile/components/UpdatePasswordForm.tsx b/app/(main)/profile/components/UpdatePasswordForm.tsx
index 9962c832..b74be453 100644
--- a/app/(main)/profile/components/UpdatePasswordForm.tsx
+++ b/app/(main)/profile/components/UpdatePasswordForm.tsx
@@ -57,7 +57,7 @@ export default function UpdatePasswordForm() {
     <div className="form-card">
       <div className="card-body">
         <form onSubmit={handleSubmit(onSubmit)} className="form-body">
-          <h2>Change Password</h2>
+          <p className="form-title">Change Password</p>
           <div>
             <label className="field-label">New password</label>
             <input
diff --git a/app/(main)/profile/page.tsx b/app/(main)/profile/page.tsx
index f1b485d5..f350baf5 100644
--- a/app/(main)/profile/page.tsx
+++ b/app/(main)/profile/page.tsx
@@ -28,15 +28,15 @@ export default async function PersonalProfilePage() {
   return (
     <div>
       <h1>Profile</h1>
-
-      <ProfileForm user={profile as User} />
-
-      <div className="mt-5">
+      <div className="content-body">
+        <div>
+          <ProfileForm user={profile as User} />
+        </div>
         <UpdatePasswordForm />
-      </div>
 
-      <div className="mt-5">
-        <SignOutButton />
+        <div>
+          <SignOutButton />
+        </div>
       </div>
     </div>
   );
diff --git a/app/(main)/request/[storeId]/page.tsx b/app/(main)/request/[storeId]/page.tsx
index 98db603d..b729f3d0 100644
--- a/app/(main)/request/[storeId]/page.tsx
+++ b/app/(main)/request/[storeId]/page.tsx
@@ -138,37 +138,40 @@ export default async function RequestStorePage({
         <span>Requesting from </span>
         {store.name} <Image src={pinIcon} height={32} alt="Pin icon" />
       </h1>
-      <ItemSearch
-        categories={
-          categories?.map((cat) => ({ id: cat.category_id, name: cat.name })) ||
-          []
-        }
-        subcategories={
-          subcategories?.map((sub) => ({
-            id: sub.subcategory_id,
-            name: sub.name,
-            category_id: sub.category_id,
-          })) || []
-        }
-      />
-      <h2>In-Stock Items</h2>
-      {items && items.length > 0 ? (
-        <div className="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-5">
-          {items.map((item) => (
-            <div key={item.id} className="col">
-              <ItemCard
-                id={item.id}
-                item={item.item}
-                subcategory={item.subcategory}
-                category={item.category}
-                photoUrl={item.photoUrl}
-              />
-            </div>
-          ))}
-        </div>
-      ) : (
-        <p>No available items found.</p>
-      )}
+      <div className="content-body">
+        <ItemSearch
+          categories={
+            categories?.map((cat) => ({
+              id: cat.category_id,
+              name: cat.name,
+            })) || []
+          }
+          subcategories={
+            subcategories?.map((sub) => ({
+              id: sub.subcategory_id,
+              name: sub.name,
+              category_id: sub.category_id,
+            })) || []
+          }
+        />
+        {items && items.length > 0 ? (
+          <div className="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-5">
+            {items.map((item) => (
+              <div key={item.id} className="col">
+                <ItemCard
+                  id={item.id}
+                  item={item.item}
+                  subcategory={item.subcategory}
+                  category={item.category}
+                  photoUrl={item.photoUrl}
+                />
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p>No available items found.</p>
+        )}
+      </div>
       <Link href={`/request/${storeId}/cart`} className={styles.cartButton}>
         <Image src={cartIcon} height={32} alt="Cart icon" />
       </Link>
diff --git a/app/(main)/request/page.tsx b/app/(main)/request/page.tsx
index d32a9941..b98e3ed2 100644
--- a/app/(main)/request/page.tsx
+++ b/app/(main)/request/page.tsx
@@ -18,14 +18,18 @@ export default async function RequestPage() {
   return (
     <div>
       <h1>Request Inventory</h1>
-      <Link href="/request/all">
-        <p>All Stores</p>
-      </Link>
-      {stores.length > 0 ? (
-        <StoresList stores={stores} />
-      ) : (
-        <p>No stores found.</p>
-      )}
+      <div className="content-body">
+        <div>
+          <Link className="btn-submit" href="/request/all">
+            All Stores
+          </Link>
+        </div>
+        {stores.length > 0 ? (
+          <StoresList stores={stores} />
+        ) : (
+          <p>No stores found.</p>
+        )}
+      </div>
     </div>
   );
 }
diff --git a/app/globals.css b/app/globals.css
index 6507e355..38d1b957 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -18,21 +18,25 @@ h1 {
 h2 {
   font-weight: 600;
   font-size: 1.5rem;
+  margin-bottom: 1.25rem;
 }
 
 h3 {
   font-weight: 600;
   font-size: 1.5rem;
+  margin-bottom: 1.25rem;
 }
 
 h4 {
   font-weight: 500;
   font-size: 1rem;
+  margin-bottom: 1rem;
 }
 
 p {
   font-weight: 400;
   font-size: 1rem;
+  margin-bottom: 1rem;
 }
 
 th {
@@ -62,7 +66,13 @@ Table {
 }
 
 .main-container {
-  padding-top: calc(3rem + 3.875rem);
+  padding: calc(1.5rem + 3.875rem) 1.5rem 1.5rem 1.5rem;
+}
+
+@media (min-width: 576px) {
+  .main-container {
+    padding: calc(3rem + 3.875rem) 3rem 3rem 3rem;
+  }
 }
 
 @media (min-width: 992px) {
@@ -81,7 +91,8 @@ Table {
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
-  gap: 1rem;
+  gap: 2rem;
+  margin-bottom: 2rem;
 }
 
 /* ── white card container ── */
@@ -96,7 +107,7 @@ Table {
   padding: 1.5rem;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 576px) {
   .form-card .card-body {
     padding: 3rem;
   }
@@ -120,6 +131,12 @@ Table {
 }
 
 /* ── section headings ── */
+.form-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 0;
+}
+
 .form-title-1 {
   font-size: 1.5rem;
   line-height: 1.2;
@@ -150,6 +167,7 @@ Table {
 }
 
 .btn-submit {
+  text-decoration: none;
   display: inline-flex;
   padding: 8px 40px;
   justify-content: center;
@@ -217,12 +235,24 @@ Table {
   margin-bottom: 0;
 }
 
+.link-btn-row {
+  gap: 2rem;
+  display: flex;
+  flex-direction: row;
+}
+
 .form-body {
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
 }
 
+.content-body {
+  gap: 2rem;
+  display: flex;
+  flex-direction: column;
+}
+
 .radio-row {
   display: flex;
   gap: 2rem;
@@ -235,13 +265,14 @@ Table {
 
 .two-col-row {
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px;
+  grid-template-columns: 1fr;
+  gap: 1.25rem;
 }
 
-@media (max-width: 600px) {
+@media (min-width: 768px) {
   .two-col-row {
-    grid-template-columns: 1fr;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
   }
 }