From 7f27dee2c8e59115106e44caf6a3d93eb90dd83f Mon Sep 17 00:00:00 2001
From: cheyennelu17 <cheyennelu17@g.ucla.edu>
Date: Mon, 18 May 2026 01:40:56 -0700
Subject: [PATCH 1/7] finished all tables styling move to global except Stores

---
 app/(main)/components/ItemSearch.tsx          |  2 +
 app/(main)/components/StoresList.tsx          |  9 ++-
 .../components/TicketStatusDropdown.tsx       |  1 +
 app/(main)/hq/page.tsx                        |  6 ++
 .../components/IncomingTicket.module.css      | 61 --------------
 .../components/IncomingTicketCard.module.css  |  9 +++
 .../components/IncomingTicketCard.tsx         |  2 +-
 .../components/IncomingTicketsList.tsx        | 17 ++--
 .../components/OutgoingTicket.module.css      | 79 -------------------
 .../components/OutgoingTicketCard.module.css  | 13 +++
 .../components/OutgoingTicketCard.tsx         |  2 +-
 .../components/OutgoingTicketsList.tsx        | 18 ++---
 .../people/[userId]/components/Dropdown.tsx   |  1 +
 .../team/people/components/UserSearch.tsx     |  1 +
 .../people/components/UsersList.module.css    | 12 ---
 .../team/people/components/UsersList.tsx      | 11 ++-
 app/globals.css                               | 50 +++++++++++-
 17 files changed, 103 insertions(+), 191 deletions(-)
 delete mode 100644 app/(main)/incoming-tickets/[storeId]/components/IncomingTicket.module.css
 create mode 100644 app/(main)/incoming-tickets/[storeId]/components/IncomingTicketCard.module.css
 delete mode 100644 app/(main)/outgoing-tickets/components/OutgoingTicket.module.css
 create mode 100644 app/(main)/outgoing-tickets/components/OutgoingTicketCard.module.css
 delete mode 100644 app/(main)/team/people/components/UsersList.module.css

diff --git a/app/(main)/components/ItemSearch.tsx b/app/(main)/components/ItemSearch.tsx
index 28cc002e..d54a8037 100644
--- a/app/(main)/components/ItemSearch.tsx
+++ b/app/(main)/components/ItemSearch.tsx
@@ -93,6 +93,7 @@ export default function ItemSearch({ categories, subcategories }: Props) {
       <select
         value={searchParams.get('category') ?? ''}
         onChange={(e) => handleCategoryChange(e.target.value)}
+        className="form-select w-auto dropdown"
       >
         <option value="">All categories</option>
         {categories.map((category) => (
@@ -107,6 +108,7 @@ export default function ItemSearch({ categories, subcategories }: Props) {
         <select
           value={searchParams.get('subcategory') ?? ''}
           onChange={(e) => handleSubcategoryChange(e.target.value)}
+          className="form-select w-auto dropdown"
         >
           <option value="">All subcategories</option>
           {filteredSubcategories.map((subcategory) => (
diff --git a/app/(main)/components/StoresList.tsx b/app/(main)/components/StoresList.tsx
index a7559b9f..81d7282f 100644
--- a/app/(main)/components/StoresList.tsx
+++ b/app/(main)/components/StoresList.tsx
@@ -9,6 +9,7 @@ import ViewToggle, { ViewMode } from '@/app/(main)/components/ViewToggle';
 import Image from 'next/image';
 import styles from '@/app/(main)/components/StoresList.module.css';
 import defaultStorePhoto from '@/public/image-placeholder.svg';
+import { Table } from 'react-bootstrap';
 
 export default function StoresList({ stores }: { stores: Store[] }) {
   const [view, setView] = useState<ViewMode>('grid');
@@ -27,8 +28,8 @@ export default function StoresList({ stores }: { stores: Store[] }) {
           ))}
         </Row>
       ) : (
-        <table className={styles.table}>
-          <thead className={styles.tableHeader}>
+        <Table borderless>
+          <thead className="table-header">
             <tr>
               <th>NAME</th>
               <th>ADDRESS</th>
@@ -36,7 +37,7 @@ export default function StoresList({ stores }: { stores: Store[] }) {
           </thead>
           <tbody>
             {stores?.map((store) => (
-              <tr className={styles.tableRow} key={store.store_id}>
+              <tr key={store.store_id}>
                 <td>
                   <div className={styles.nameCell}>
                     <Image
@@ -55,7 +56,7 @@ export default function StoresList({ stores }: { stores: Store[] }) {
               </tr>
             ))}
           </tbody>
-        </table>
+        </Table>
       )}
     </Container>
   );
diff --git a/app/(main)/components/TicketStatusDropdown.tsx b/app/(main)/components/TicketStatusDropdown.tsx
index d8fed11f..4b58667d 100644
--- a/app/(main)/components/TicketStatusDropdown.tsx
+++ b/app/(main)/components/TicketStatusDropdown.tsx
@@ -40,6 +40,7 @@ export default function TicketStatusDropdown({
       <select
         value={selectedStatus}
         onChange={(e) => setSelectedStatus(e.target.value as TicketStatus)}
+        className="form-select w-auto dropdown"
       >
         {statusOptions.map((status) => (
           <option key={status} value={status}>
diff --git a/app/(main)/hq/page.tsx b/app/(main)/hq/page.tsx
index 1487475b..e91e683d 100644
--- a/app/(main)/hq/page.tsx
+++ b/app/(main)/hq/page.tsx
@@ -18,6 +18,12 @@ export default async function HqPage() {
     .from('stores')
     .select('store_id, name, street_address, photo_url');
 
+  if (storesData) {
+    console.log('Stores data:', storesData);
+  } else {
+    console.error('Error fetching stores:', storesErr);
+  }
+
   if (err) {
     console.error('Error fetching donations:', err);
     return <div>Failed to load data.</div>;
diff --git a/app/(main)/incoming-tickets/[storeId]/components/IncomingTicket.module.css b/app/(main)/incoming-tickets/[storeId]/components/IncomingTicket.module.css
deleted file mode 100644
index e1433b7e..00000000
--- a/app/(main)/incoming-tickets/[storeId]/components/IncomingTicket.module.css
+++ /dev/null
@@ -1,61 +0,0 @@
-.tableWrapper {
-  border-radius: 12px;
-  overflow: hidden;
-}
-
-.table {
-  width: 100%;
-  border-collapse: collapse;
-  margin-top: 28px;
-}
-
-.table th {
-  padding: 22.28px 44.56px;
-  color: #4a5568;
-  background-color: #e5f3ff;
-  font-weight: 600;
-  font-size: 16.93px;
-  line-height: 100%;
-}
-
-.table td {
-  padding: 22.28px 26.74px;
-  color: #718096;
-  border-bottom: 0.45px solid #e5f3ff;
-}
-
-.table tr:last-child td {
-  border-bottom: none;
-}
-
-.table td:nth-child(1) {
-  font-weight: 600;
-  font-size: 16.93px;
-  line-height: 100%;
-}
-
-.idCol {
-  width: 32.69%;
-}
-
-.requestorCol {
-  width: 22.14%;
-}
-
-.statusCol {
-  width: 23.44%;
-}
-
-.dateCol {
-  width: 21.74%;
-}
-
-.statusBubble {
-  background-color: #3182ce;
-  color: #ffffff;
-  font-weight: 600;
-  font-size: 16.93px;
-  line-height: 100%;
-  padding: 8.91px 22.28px;
-  border-radius: 4.46px;
-}
diff --git a/app/(main)/incoming-tickets/[storeId]/components/IncomingTicketCard.module.css b/app/(main)/incoming-tickets/[storeId]/components/IncomingTicketCard.module.css
new file mode 100644
index 00000000..5e785ab9
--- /dev/null
+++ b/app/(main)/incoming-tickets/[storeId]/components/IncomingTicketCard.module.css
@@ -0,0 +1,9 @@
+.statusBubble {
+  background-color: #3182ce;
+  color: #ffffff;
+  font-weight: 600;
+  font-size: 16.93px;
+  line-height: 100%;
+  padding: 8.91px 22.28px;
+  border-radius: 4.46px;
+}
diff --git a/app/(main)/incoming-tickets/[storeId]/components/IncomingTicketCard.tsx b/app/(main)/incoming-tickets/[storeId]/components/IncomingTicketCard.tsx
index d5104c95..f934de1d 100644
--- a/app/(main)/incoming-tickets/[storeId]/components/IncomingTicketCard.tsx
+++ b/app/(main)/incoming-tickets/[storeId]/components/IncomingTicketCard.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { usePathname, useRouter } from 'next/navigation';
-import styles from '@/app/(main)/incoming-tickets/[storeId]/components/IncomingTicket.module.css';
+import styles from '@/app/(main)/incoming-tickets/[storeId]/components/IncomingTicketCard.module.css';
 
 type IncomingTicketCardProps = {
   ticketId: string;
diff --git a/app/(main)/incoming-tickets/[storeId]/components/IncomingTicketsList.tsx b/app/(main)/incoming-tickets/[storeId]/components/IncomingTicketsList.tsx
index b9f20748..68a0b76a 100644
--- a/app/(main)/incoming-tickets/[storeId]/components/IncomingTicketsList.tsx
+++ b/app/(main)/incoming-tickets/[storeId]/components/IncomingTicketsList.tsx
@@ -1,7 +1,7 @@
 'use client';
 import IncomingTicketCard from '@/app/(main)/incoming-tickets/[storeId]/components/IncomingTicketCard';
 import { useState } from 'react';
-import styles from '@/app/(main)/incoming-tickets/[storeId]/components/IncomingTicket.module.css';
+import { Table } from 'react-bootstrap';
 
 type IncomingTicketsListProps = {
   tickets: {
@@ -34,6 +34,7 @@ export default function IncomingTicketsList({
         <select
           value={selectedStatus}
           onChange={(e) => setSelectedStatus(e.target.value)}
+          className="form-select w-auto dropdown"
         >
           {statusOptions.map((statusOption) => (
             <option key={statusOption} value={statusOption}>
@@ -45,16 +46,8 @@ export default function IncomingTicketsList({
 
       {filteredTickets.length > 0 ? (
         <div>
-          <table
-            className={`table table-borderless text-center align-middle ${styles.table} ${styles.tableWrapper}`}
-          >
-            <colgroup>
-              <col className={styles.idCol} />
-              <col className={styles.requestorCol} />
-              <col className={styles.statusCol} />
-              <col className={styles.dateCol} />
-            </colgroup>
-            <thead>
+          <Table>
+            <thead className="table-header">
               <tr>
                 <th>ID</th>
                 <th>REQUESTOR</th>
@@ -75,7 +68,7 @@ export default function IncomingTicketsList({
                 />
               ))}
             </tbody>
-          </table>
+          </Table>
         </div>
       ) : (
         <p>No tickets found.</p>
diff --git a/app/(main)/outgoing-tickets/components/OutgoingTicket.module.css b/app/(main)/outgoing-tickets/components/OutgoingTicket.module.css
deleted file mode 100644
index fea8d410..00000000
--- a/app/(main)/outgoing-tickets/components/OutgoingTicket.module.css
+++ /dev/null
@@ -1,79 +0,0 @@
-.tableWrapper {
-  border-radius: 12px;
-  overflow: hidden;
-}
-
-.table {
-  width: 100%;
-  border-collapse: collapse;
-  margin-top: 28px;
-}
-
-.table th {
-  padding: 22.28px 44.56px;
-  color: #4a5568;
-  background-color: #e5f3ff;
-  font-weight: 600;
-  font-size: 16.93px;
-  line-height: 100%;
-}
-
-.table td {
-  padding: 22.28px 26.74px;
-  color: #718096;
-  border-bottom: 0.45px solid #e5f3ff;
-}
-
-.table tr:last-child td {
-  border-bottom: none;
-}
-
-.table td:nth-child(1) {
-  font-weight: 600;
-  font-size: 16.93px;
-  line-height: 100%;
-}
-
-.idCol {
-  width: 32.69%;
-}
-
-.storeCol {
-  width: 20.7%;
-}
-
-.statusCol {
-  width: 23.44%;
-}
-
-.dateCol {
-  width: 23.17%;
-}
-
-.statusBubble {
-  background-color: #3182ce;
-  color: #ffffff;
-  font-weight: 600;
-  font-size: 16.93px;
-  line-height: 100%;
-  padding: 8.91px 22.28px;
-  border-radius: 4.46px;
-}
-
-.cursor {
-  cursor: pointer;
-}
-
-.dropdown {
-  padding: 8px 16px;
-  width: auto;
-  border: 0.5px solid #cbd5e0;
-  border-radius: 5px;
-
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1;
-
-  color: #000000;
-  cursor: pointer;
-}
diff --git a/app/(main)/outgoing-tickets/components/OutgoingTicketCard.module.css b/app/(main)/outgoing-tickets/components/OutgoingTicketCard.module.css
new file mode 100644
index 00000000..3494abce
--- /dev/null
+++ b/app/(main)/outgoing-tickets/components/OutgoingTicketCard.module.css
@@ -0,0 +1,13 @@
+.statusBubble {
+  background-color: #3182ce;
+  color: #ffffff;
+  font-weight: 600;
+  font-size: 16.93px;
+  line-height: 100%;
+  padding: 8.91px 22.28px;
+  border-radius: 4.46px;
+}
+
+.cursor {
+  cursor: pointer;
+}
diff --git a/app/(main)/outgoing-tickets/components/OutgoingTicketCard.tsx b/app/(main)/outgoing-tickets/components/OutgoingTicketCard.tsx
index 4919ec36..c16c1a1f 100644
--- a/app/(main)/outgoing-tickets/components/OutgoingTicketCard.tsx
+++ b/app/(main)/outgoing-tickets/components/OutgoingTicketCard.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { usePathname, useRouter } from 'next/navigation';
-import styles from '@/app/(main)/outgoing-tickets/components/OutgoingTicket.module.css';
+import styles from '@/app/(main)/outgoing-tickets/components/OutgoingTicketCard.module.css';
 
 type OutgoingTicketCardProps = {
   ticketId: string;
diff --git a/app/(main)/outgoing-tickets/components/OutgoingTicketsList.tsx b/app/(main)/outgoing-tickets/components/OutgoingTicketsList.tsx
index c6fef0eb..0353a14c 100644
--- a/app/(main)/outgoing-tickets/components/OutgoingTicketsList.tsx
+++ b/app/(main)/outgoing-tickets/components/OutgoingTicketsList.tsx
@@ -1,7 +1,7 @@
 'use client';
 import OutgoingTicketCard from '@/app/(main)/outgoing-tickets/components/OutgoingTicketCard';
 import { useState } from 'react';
-import styles from '@/app/(main)/outgoing-tickets/components/OutgoingTicket.module.css';
+import { Table } from 'react-bootstrap';
 
 type Ticket = {
   ticket_id: string;
@@ -30,7 +30,7 @@ export default function OutgoingTicketsList({
       {/* Dropdown menu with status options */}
       <div className="d-flex justify-content-end">
         <select
-          className={`form-select w-auto ${styles.dropdown}`}
+          className="form-select w-auto dropdown"
           value={selectedStatus}
           onChange={(e) => setSelectedStatus(e.target.value)}
         >
@@ -43,16 +43,8 @@ export default function OutgoingTicketsList({
       </div>
 
       {filteredTickets.length > 0 ? (
-        <table
-          className={`table table-borderless text-center align-middle ${styles.table} ${styles.tableWrapper}`}
-        >
-          <colgroup>
-            <col className={styles.idCol} />
-            <col className={styles.storeCol} />
-            <col className={styles.statusCol} />
-            <col className={styles.dateCol} />
-          </colgroup>
-          <thead>
+        <Table>
+          <thead className="table-header">
             <tr>
               <th>ID</th>
               <th>STORE NAME</th>
@@ -71,7 +63,7 @@ export default function OutgoingTicketsList({
               />
             ))}
           </tbody>
-        </table>
+        </Table>
       ) : (
         <p>No tickets found.</p>
       )}
diff --git a/app/(main)/team/people/[userId]/components/Dropdown.tsx b/app/(main)/team/people/[userId]/components/Dropdown.tsx
index 4f55fbcb..cdbe26c6 100644
--- a/app/(main)/team/people/[userId]/components/Dropdown.tsx
+++ b/app/(main)/team/people/[userId]/components/Dropdown.tsx
@@ -46,6 +46,7 @@ export default function Dropdown({
       <select
         name="role"
         value={currentRoleId}
+        className="form-select w-auto dropdown"
         onChange={(e) => setCurrentRoleId(Number(e.target.value))}
       >
         {allRoles.map((r) => (
diff --git a/app/(main)/team/people/components/UserSearch.tsx b/app/(main)/team/people/components/UserSearch.tsx
index 19a7e688..867c88e6 100644
--- a/app/(main)/team/people/components/UserSearch.tsx
+++ b/app/(main)/team/people/components/UserSearch.tsx
@@ -74,6 +74,7 @@ export default function UserSearch({ roles }: Props) {
       <select
         value={searchParams.get('role') ?? ''}
         onChange={(e) => handleRoleChange(e.target.value)}
+        className="form-select w-auto dropdown"
       >
         <option value="">All roles</option>
         {roles.map((role) => (
diff --git a/app/(main)/team/people/components/UsersList.module.css b/app/(main)/team/people/components/UsersList.module.css
deleted file mode 100644
index 6813fe16..00000000
--- a/app/(main)/team/people/components/UsersList.module.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.userPfp {
-  margin-right: 10px;
-}
-.userLink,
-.userEmail {
-  color: #333;
-  text-decoration: none;
-}
-
-.userRole {
-  text-transform: uppercase;
-}
diff --git a/app/(main)/team/people/components/UsersList.tsx b/app/(main)/team/people/components/UsersList.tsx
index 97da3e0d..85e7f756 100644
--- a/app/(main)/team/people/components/UsersList.tsx
+++ b/app/(main)/team/people/components/UsersList.tsx
@@ -1,6 +1,5 @@
 import Link from 'next/link';
 import Image from 'next/image';
-import styles from '@/app/(main)/team/people/components/UsersList.module.css';
 import { Table } from 'react-bootstrap';
 import imagePlaceholder from '@/public/image-placeholder.svg';
 
@@ -21,7 +20,7 @@ export default function UsersList({
       <Table borderless>
         <thead className="table-header">
           <tr>
-            <th>Requestor</th>
+            <th>Team Member</th>
             <th>Role</th>
             <th>Email</th>
           </tr>
@@ -36,19 +35,19 @@ export default function UsersList({
                   height={32}
                   width={32}
                   unoptimized
-                  className={styles.userPfp}
+                  className="profilePicture"
                 />
                 <Link
                   key={user.user_id}
                   href={`/team/people/${user.user_id}`} // Where to navigate
-                  className={styles.userLink}
+                  className="userLink"
                 >
                   {user.first_name + ' ' + user.last_name}
                 </Link>
               </td>
-              <td className={styles.userRole}>{user.role}</td>
+              <td className="userRole">{user.role}</td>
               <td>
-                <a className={styles.userEmail} href={`mailto:${user.email}`}>
+                <a className="userEmail" href={`mailto:${user.email}`}>
                   {user.email}
                 </a>
               </td>
diff --git a/app/globals.css b/app/globals.css
index 28b01d2f..eac0ebdd 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -36,23 +36,45 @@ p {
 
 th {
   text-transform: uppercase;
+  padding: 22.28px 44.56px;
+  color: #4a5568;
+  background-color: #e5f3ff;
+  font-weight: 600;
+  font-size: 16.93px;
+  line-height: 100%;
+}
+
+td {
+  padding: 22.28px 26.74px;
+  color: #718096;
+  border-bottom: 0.45px solid #e5f3ff;
+}
+
+td a,
+td Link {
+  color: #333;
+  text-decoration: none;
 }
 
 tr {
   height: 80px;
-  text-align: center;
   vertical-align: middle;
 }
 
 Table {
-  margin-top: 10px;
+  margin-top: 26.74px;
   width: 100%;
   border-collapse: collapse;
+  border-radius: 12px;
+  overflow: hidden;
+  text-align: left;
 }
 
+/* for tables, this ensures that it is blue*/
 .table-header th {
   background-color: #e5f3ff;
   font-weight: 500;
+  padding-left: 15px;
 }
 
 .main-container {
@@ -64,3 +86,27 @@ Table {
 .main {
   display: flex;
 }
+/* Outgoing, Incoming Tickets */
+.dropdown {
+  padding: 8px 36px 8px 16px;
+  width: auto;
+  border: 0.5px solid #cbd5e0;
+  border-radius: 5px;
+
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1;
+
+  color: #000000;
+  cursor: pointer;
+}
+
+/*Used in UserList and StoresList to align picture */
+.profilePicture {
+  margin-right: 10px;
+}
+
+/* Used in UserList to convert role names to uppercase*/
+.userRole {
+  text-transform: uppercase;
+}

From b15e7473cc60fcc51fbbda15490228080cb1b496 Mon Sep 17 00:00:00 2001
From: cheyennelu17 <cheyennelu17@g.ucla.edu>
Date: Mon, 18 May 2026 01:46:01 -0700
Subject: [PATCH 2/7] finished StoresList table unification

---
 app/(main)/components/StoresList.module.css | 59 ---------------------
 app/(main)/components/StoresList.tsx        |  8 +--
 app/globals.css                             |  1 +
 3 files changed, 5 insertions(+), 63 deletions(-)

diff --git a/app/(main)/components/StoresList.module.css b/app/(main)/components/StoresList.module.css
index dce1e15d..9f42bb99 100644
--- a/app/(main)/components/StoresList.module.css
+++ b/app/(main)/components/StoresList.module.css
@@ -9,62 +9,3 @@
   column-gap: 130px;
   align-items: flex-start;
 }
-
-.table {
-  width: 100%;
-}
-
-.tableHeader {
-  width: 100%;
-  border-radius: 5px 5px 0 0;
-  background: #e0ecf7;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
-}
-
-.tableHeader th {
-  padding: 12px 16px;
-  color: #4a5568;
-  text-align: left;
-  padding-left: 50px;
-  font-family: Montserrat;
-  font-size: 16.933px;
-  font-weight: 600;
-}
-
-.tableRow td {
-  padding: 12px 16px;
-  text-align: left;
-  vertical-align: middle;
-  padding-left: 44.565px;
-}
-
-.tableRow {
-  height: 89.122px;
-  background: #fff;
-  border-bottom: 0.446px solid #e5f3ff;
-}
-
-.nameCell {
-  display: flex;
-  align-items: center;
-  padding: 8px;
-  margin-left: -44.565px;
-}
-
-.name {
-  color: #718096;
-  font-family: Montserrat;
-  font-size: 16.933px;
-  font-weight: 600;
-}
-
-.address {
-  color: #718096;
-  font-family: Montserrat;
-  font-size: 16px;
-  font-weight: 500;
-}
-
-.storePhoto {
-  border-radius: 50%;
-}
diff --git a/app/(main)/components/StoresList.tsx b/app/(main)/components/StoresList.tsx
index 81d7282f..0af642c7 100644
--- a/app/(main)/components/StoresList.tsx
+++ b/app/(main)/components/StoresList.tsx
@@ -39,20 +39,20 @@ export default function StoresList({ stores }: { stores: Store[] }) {
             {stores?.map((store) => (
               <tr key={store.store_id}>
                 <td>
-                  <div className={styles.nameCell}>
+                  <div>
                     <Image
                       src={store.photo_url || defaultStorePhoto}
                       alt={`${store.name} photo`}
                       width={32}
                       height={32}
-                      className={styles.storePhoto}
+                      className="profilePicture"
                       unoptimized
                     />
 
-                    <span className={styles.name}>{store.name}</span>
+                    <span>{store.name}</span>
                   </div>
                 </td>
-                <td className={styles.address}>{store.street_address}</td>
+                <td>{store.street_address}</td>
               </tr>
             ))}
           </tbody>
diff --git a/app/globals.css b/app/globals.css
index eac0ebdd..58e8e422 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -104,6 +104,7 @@ Table {
 /*Used in UserList and StoresList to align picture */
 .profilePicture {
   margin-right: 10px;
+  border-radius: 50%;
 }
 
 /* Used in UserList to convert role names to uppercase*/

From 3bb517bab7be6926594e8fb2c0f3685f6817d213 Mon Sep 17 00:00:00 2001
From: cheyennelu17 <cheyennelu17@g.ucla.edu>
Date: Mon, 18 May 2026 01:58:37 -0700
Subject: [PATCH 3/7] added color for tickets

---
 .../components/IncomingTicketCard.module.css  | 23 +++++++++++++++++--
 .../components/IncomingTicketCard.tsx         | 14 ++++++++++-
 .../components/OutgoingTicketCard.module.css  | 23 +++++++++++++++++--
 .../components/OutgoingTicketCard.tsx         | 14 ++++++++++-
 4 files changed, 68 insertions(+), 6 deletions(-)

diff --git a/app/(main)/incoming-tickets/[storeId]/components/IncomingTicketCard.module.css b/app/(main)/incoming-tickets/[storeId]/components/IncomingTicketCard.module.css
index 5e785ab9..75e7ec27 100644
--- a/app/(main)/incoming-tickets/[storeId]/components/IncomingTicketCard.module.css
+++ b/app/(main)/incoming-tickets/[storeId]/components/IncomingTicketCard.module.css
@@ -1,9 +1,28 @@
 .statusBubble {
-  background-color: #3182ce;
-  color: #ffffff;
   font-weight: 600;
   font-size: 16.93px;
   line-height: 100%;
   padding: 8.91px 22.28px;
   border-radius: 4.46px;
 }
+
+.statusRequested {
+  background-color: #eeedff;
+  color: #6921c0;
+}
+.statusReady {
+  background-color: #e7ffee;
+  color: #24704a;
+}
+.statusRejected {
+  background-color: #ffefef;
+  color: #c53030;
+}
+.statusApproved {
+  background-color: #ffebf6;
+  color: #822c65;
+}
+.statusFulfilled {
+  background-color: #ebf8ff;
+  color: #2c5282;
+}
diff --git a/app/(main)/incoming-tickets/[storeId]/components/IncomingTicketCard.tsx b/app/(main)/incoming-tickets/[storeId]/components/IncomingTicketCard.tsx
index f934de1d..05952e4b 100644
--- a/app/(main)/incoming-tickets/[storeId]/components/IncomingTicketCard.tsx
+++ b/app/(main)/incoming-tickets/[storeId]/components/IncomingTicketCard.tsx
@@ -21,6 +21,18 @@ export default function IncomingTicketCard({
   const pathname = usePathname();
   const router = useRouter();
 
+  /* Stuatus Class mapping for colors for different statuses */
+  const statusClassMap: Record<string, string> = {
+    requested: styles.statusRequested,
+    ready: styles.statusReady,
+    rejected: styles.statusRejected,
+    fulfilled: styles.statusFulfilled,
+    approved: styles.statusApproved,
+  };
+
+  const normalizedStatus = status.toLowerCase();
+  const statusClass = statusClassMap[normalizedStatus] ?? styles.statusDefault;
+
   // Display requestor's name, status, and date submitted
   return (
     <tr
@@ -33,7 +45,7 @@ export default function IncomingTicketCard({
       </td>
 
       <td>
-        <span className={styles.statusBubble}>
+        <span className={`${styles.statusBubble} ${statusClass}`}>
           {status.charAt(0).toUpperCase() + status.slice(1).toLowerCase()}
         </span>
       </td>
diff --git a/app/(main)/outgoing-tickets/components/OutgoingTicketCard.module.css b/app/(main)/outgoing-tickets/components/OutgoingTicketCard.module.css
index 3494abce..66f1c0e8 100644
--- a/app/(main)/outgoing-tickets/components/OutgoingTicketCard.module.css
+++ b/app/(main)/outgoing-tickets/components/OutgoingTicketCard.module.css
@@ -1,6 +1,4 @@
 .statusBubble {
-  background-color: #3182ce;
-  color: #ffffff;
   font-weight: 600;
   font-size: 16.93px;
   line-height: 100%;
@@ -8,6 +6,27 @@
   border-radius: 4.46px;
 }
 
+.statusRequested {
+  background-color: #eeedff;
+  color: #6921c0;
+}
+.statusReady {
+  background-color: #e7ffee;
+  color: #24704a;
+}
+.statusRejected {
+  background-color: #ffefef;
+  color: #c53030;
+}
+.statusApproved {
+  background-color: #ffebf6;
+  color: #822c65;
+}
+.statusFulfilled {
+  background-color: #ebf8ff;
+  color: #2c5282;
+}
+
 .cursor {
   cursor: pointer;
 }
diff --git a/app/(main)/outgoing-tickets/components/OutgoingTicketCard.tsx b/app/(main)/outgoing-tickets/components/OutgoingTicketCard.tsx
index c16c1a1f..e9712e01 100644
--- a/app/(main)/outgoing-tickets/components/OutgoingTicketCard.tsx
+++ b/app/(main)/outgoing-tickets/components/OutgoingTicketCard.tsx
@@ -19,6 +19,18 @@ export default function OutgoingTicketCard({
   const pathname = usePathname();
   const router = useRouter();
 
+  /* Stuatus Class mapping for colors for different statuses */
+  const statusClassMap: Record<string, string> = {
+    requested: styles.statusRequested,
+    ready: styles.statusReady,
+    rejected: styles.statusRejected,
+    fulfilled: styles.statusFulfilled,
+    approved: styles.statusApproved,
+  };
+
+  const normalizedStatus = status.toLowerCase();
+  const statusClass = statusClassMap[normalizedStatus] ?? styles.statusDefault;
+
   return (
     <tr
       onClick={() => router.push(`${pathname}/${ticketId}`)}
@@ -27,7 +39,7 @@ export default function OutgoingTicketCard({
       <td>{ticketId}</td>
       <td>{storeName}</td>
       <td>
-        <span className={styles.statusBubble}>
+        <span className={`${styles.statusBubble} ${statusClass}`}>
           {status.charAt(0).toUpperCase() + status.slice(1).toLowerCase()}
         </span>
       </td>

From 05505ada77471cf44dee6716b81e372b176ddd9d Mon Sep 17 00:00:00 2001
From: cheyennelu17 <cheyennelu17@g.ucla.edu>
Date: Mon, 18 May 2026 02:09:52 -0700
Subject: [PATCH 4/7] fixed kebab case

---
 app/(main)/components/StoresList.tsx                        | 4 ++--
 .../[storeId]/components/IncomingTicketsList.tsx            | 2 +-
 .../outgoing-tickets/components/OutgoingTicketsList.tsx     | 2 +-
 app/(main)/team/people/components/UsersList.tsx             | 6 +++---
 app/globals.css                                             | 4 ++--
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/(main)/components/StoresList.tsx b/app/(main)/components/StoresList.tsx
index 0af642c7..6bc40530 100644
--- a/app/(main)/components/StoresList.tsx
+++ b/app/(main)/components/StoresList.tsx
@@ -28,7 +28,7 @@ export default function StoresList({ stores }: { stores: Store[] }) {
           ))}
         </Row>
       ) : (
-        <Table borderless>
+        <Table borderless responsive>
           <thead className="table-header">
             <tr>
               <th>NAME</th>
@@ -45,7 +45,7 @@ export default function StoresList({ stores }: { stores: Store[] }) {
                       alt={`${store.name} photo`}
                       width={32}
                       height={32}
-                      className="profilePicture"
+                      className="profile-picture"
                       unoptimized
                     />
 
diff --git a/app/(main)/incoming-tickets/[storeId]/components/IncomingTicketsList.tsx b/app/(main)/incoming-tickets/[storeId]/components/IncomingTicketsList.tsx
index 68a0b76a..6b0d651a 100644
--- a/app/(main)/incoming-tickets/[storeId]/components/IncomingTicketsList.tsx
+++ b/app/(main)/incoming-tickets/[storeId]/components/IncomingTicketsList.tsx
@@ -46,7 +46,7 @@ export default function IncomingTicketsList({
 
       {filteredTickets.length > 0 ? (
         <div>
-          <Table>
+          <Table borderless responsive>
             <thead className="table-header">
               <tr>
                 <th>ID</th>
diff --git a/app/(main)/outgoing-tickets/components/OutgoingTicketsList.tsx b/app/(main)/outgoing-tickets/components/OutgoingTicketsList.tsx
index 0353a14c..d7e1371f 100644
--- a/app/(main)/outgoing-tickets/components/OutgoingTicketsList.tsx
+++ b/app/(main)/outgoing-tickets/components/OutgoingTicketsList.tsx
@@ -43,7 +43,7 @@ export default function OutgoingTicketsList({
       </div>
 
       {filteredTickets.length > 0 ? (
-        <Table>
+        <Table borderless responsive>
           <thead className="table-header">
             <tr>
               <th>ID</th>
diff --git a/app/(main)/team/people/components/UsersList.tsx b/app/(main)/team/people/components/UsersList.tsx
index 85e7f756..abb5ba1f 100644
--- a/app/(main)/team/people/components/UsersList.tsx
+++ b/app/(main)/team/people/components/UsersList.tsx
@@ -17,7 +17,7 @@ export default function UsersList({
 }) {
   return (
     <div>
-      <Table borderless>
+      <Table borderless responsive>
         <thead className="table-header">
           <tr>
             <th>Team Member</th>
@@ -35,7 +35,7 @@ export default function UsersList({
                   height={32}
                   width={32}
                   unoptimized
-                  className="profilePicture"
+                  className="profile-picture"
                 />
                 <Link
                   key={user.user_id}
@@ -45,7 +45,7 @@ export default function UsersList({
                   {user.first_name + ' ' + user.last_name}
                 </Link>
               </td>
-              <td className="userRole">{user.role}</td>
+              <td className="user-role">{user.role}</td>
               <td>
                 <a className="userEmail" href={`mailto:${user.email}`}>
                   {user.email}
diff --git a/app/globals.css b/app/globals.css
index 58e8e422..1e4d7e22 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -102,12 +102,12 @@ Table {
 }
 
 /*Used in UserList and StoresList to align picture */
-.profilePicture {
+.profile-picture {
   margin-right: 10px;
   border-radius: 50%;
 }
 
 /* Used in UserList to convert role names to uppercase*/
-.userRole {
+.user-role {
   text-transform: uppercase;
 }

From 84f5ff58a973e01844cb115a0a36e7e051f2362a Mon Sep 17 00:00:00 2001
From: cheyennelu17 <cheyennelu17@g.ucla.edu>
Date: Mon, 18 May 2026 02:12:46 -0700
Subject: [PATCH 5/7] remove user-role to react bootstrap

---
 app/(main)/team/people/components/UsersList.tsx | 2 +-
 app/globals.css                                 | 5 -----
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/app/(main)/team/people/components/UsersList.tsx b/app/(main)/team/people/components/UsersList.tsx
index abb5ba1f..c54706c7 100644
--- a/app/(main)/team/people/components/UsersList.tsx
+++ b/app/(main)/team/people/components/UsersList.tsx
@@ -45,7 +45,7 @@ export default function UsersList({
                   {user.first_name + ' ' + user.last_name}
                 </Link>
               </td>
-              <td className="user-role">{user.role}</td>
+              <td className="text-uppercase">{user.role}</td>
               <td>
                 <a className="userEmail" href={`mailto:${user.email}`}>
                   {user.email}
diff --git a/app/globals.css b/app/globals.css
index 1e4d7e22..cac4c9c8 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -106,8 +106,3 @@ Table {
   margin-right: 10px;
   border-radius: 50%;
 }
-
-/* Used in UserList to convert role names to uppercase*/
-.user-role {
-  text-transform: uppercase;
-}

From eeb105608801e47bd17576e9cdd6c2e5f126f154 Mon Sep 17 00:00:00 2001
From: cheyennelu17 <cheyennelu17@g.ucla.edu>
Date: Mon, 18 May 2026 02:14:31 -0700
Subject: [PATCH 6/7] remove profile-picture styling replace with bootstrap

---
 app/(main)/components/StoresList.tsx            | 2 +-
 app/(main)/team/people/components/UsersList.tsx | 2 +-
 app/globals.css                                 | 6 ------
 3 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/app/(main)/components/StoresList.tsx b/app/(main)/components/StoresList.tsx
index 6bc40530..68e1881a 100644
--- a/app/(main)/components/StoresList.tsx
+++ b/app/(main)/components/StoresList.tsx
@@ -45,7 +45,7 @@ export default function StoresList({ stores }: { stores: Store[] }) {
                       alt={`${store.name} photo`}
                       width={32}
                       height={32}
-                      className="profile-picture"
+                      className="rounded-circle me-2"
                       unoptimized
                     />
 
diff --git a/app/(main)/team/people/components/UsersList.tsx b/app/(main)/team/people/components/UsersList.tsx
index c54706c7..33767fc4 100644
--- a/app/(main)/team/people/components/UsersList.tsx
+++ b/app/(main)/team/people/components/UsersList.tsx
@@ -35,7 +35,7 @@ export default function UsersList({
                   height={32}
                   width={32}
                   unoptimized
-                  className="profile-picture"
+                  className="rounded-circle me-2"
                 />
                 <Link
                   key={user.user_id}
diff --git a/app/globals.css b/app/globals.css
index cac4c9c8..52a67dbe 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -100,9 +100,3 @@ Table {
   color: #000000;
   cursor: pointer;
 }
-
-/*Used in UserList and StoresList to align picture */
-.profile-picture {
-  margin-right: 10px;
-  border-radius: 50%;
-}

From c421bca543aa287d9421f42ba8c54d4300096384 Mon Sep 17 00:00:00 2001
From: joy-y-cheng <joycheng@ucla.edu>
Date: Mon, 18 May 2026 04:27:49 -0700
Subject: [PATCH 7/7] Clean up

---
 .../members/[userId]/components/Dropdown.tsx  |  1 -
 .../administration/members/[userId]/page.tsx  |  2 +-
 .../members/components/UsersList.module.css   | 18 +++++
 .../members/components/UsersList.tsx          | 15 ++--
 .../[storeId]/[ticketId]/page.tsx             |  2 +-
 .../components/IncomingTicketsList.tsx        | 34 ++++-----
 .../incoming-tickets/[storeId]/page.tsx       |  4 +-
 .../outgoing-tickets/[ticketId]/page.tsx      |  2 +-
 .../components/OutgoingTicketsList.tsx        | 33 ++++-----
 .../team/people/components/UsersList.tsx      | 60 ----------------
 .../test/components/TicketsTestComponent.tsx  |  2 +-
 app/globals.css                               | 72 +------------------
 12 files changed, 66 insertions(+), 179 deletions(-)
 create mode 100644 app/(main)/administration/members/components/UsersList.module.css
 delete mode 100644 app/(main)/team/people/components/UsersList.tsx

diff --git a/app/(main)/administration/members/[userId]/components/Dropdown.tsx b/app/(main)/administration/members/[userId]/components/Dropdown.tsx
index 267181b9..60a3880c 100644
--- a/app/(main)/administration/members/[userId]/components/Dropdown.tsx
+++ b/app/(main)/administration/members/[userId]/components/Dropdown.tsx
@@ -62,7 +62,6 @@ export default function Dropdown({
         name="role"
         className="form-select w-auto"
         value={currentRoleId}
-        className="form-select w-auto dropdown"
         onChange={(e) => setCurrentRoleId(Number(e.target.value))}
       >
         {sortedRoles.map((r) => (
diff --git a/app/(main)/administration/members/[userId]/page.tsx b/app/(main)/administration/members/[userId]/page.tsx
index 036a83ce..dbb40cb2 100644
--- a/app/(main)/administration/members/[userId]/page.tsx
+++ b/app/(main)/administration/members/[userId]/page.tsx
@@ -46,7 +46,7 @@ export default async function TeamProfilePage({
         {user.first_name} {user.last_name}
       </h1>
       {/* same styling as profile page */}
-      <div>
+      <div className="content-body">
         <div className={`form-card ${styles.card}`}>
           <div className={`form-body ${styles.cardBody}`}>
             <div className={styles.avatarCircle}>
diff --git a/app/(main)/administration/members/components/UsersList.module.css b/app/(main)/administration/members/components/UsersList.module.css
new file mode 100644
index 00000000..00171a7c
--- /dev/null
+++ b/app/(main)/administration/members/components/UsersList.module.css
@@ -0,0 +1,18 @@
+.userPfp {
+  margin-right: 10px;
+}
+.userLink,
+.userEmail {
+  color: #333;
+  text-decoration: none;
+}
+
+.userRole {
+  text-transform: uppercase;
+}
+
+.header {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 1rem;
+}
diff --git a/app/(main)/administration/members/components/UsersList.tsx b/app/(main)/administration/members/components/UsersList.tsx
index 23683a66..4d07a444 100644
--- a/app/(main)/administration/members/components/UsersList.tsx
+++ b/app/(main)/administration/members/components/UsersList.tsx
@@ -38,10 +38,10 @@ export default function UsersList({
           ))}
         </div>
       ) : (
-        <Table borderless>
+        <Table borderless responsive>
           <thead className="table-header">
             <tr>
-              <th>Requestor</th>
+              <th>Team Member</th>
               <th>Role</th>
               <th>Email</th>
             </tr>
@@ -56,21 +56,18 @@ export default function UsersList({
                     height={32}
                     width={32}
                     unoptimized
-                    className={styles.userPfp}
+                    className="rounded-circle me-2"
                   />
                   <Link
                     key={user.user_id}
-                    href={`/team/people/${user.user_id}`} // Where to navigate
-                    className={styles.userLink}
+                    href={`/administration/members/${user.user_id}`} // Where to navigate
                   >
                     {user.first_name + ' ' + user.last_name}
                   </Link>
                 </td>
-                <td className={styles.userRole}>{user.role}</td>
+                <td className="text-uppercase">{user.role}</td>
                 <td>
-                  <a className={styles.userEmail} href={`mailto:${user.email}`}>
-                    {user.email}
-                  </a>
+                  <a href={`mailto:${user.email}`}>{user.email}</a>
                 </td>
               </tr>
             ))}
diff --git a/app/(main)/incoming-tickets/[storeId]/[ticketId]/page.tsx b/app/(main)/incoming-tickets/[storeId]/[ticketId]/page.tsx
index e8a016c9..45336d7d 100644
--- a/app/(main)/incoming-tickets/[storeId]/[ticketId]/page.tsx
+++ b/app/(main)/incoming-tickets/[storeId]/[ticketId]/page.tsx
@@ -24,7 +24,7 @@ export default async function IncomingTicketDetailsPage({
     <div>
       <Breadcrumbs
         labelMap={{
-          '/incoming-tickets': 'Incoming Tickets',
+          '/incoming-tickets': 'Store Tickets',
           [`/incoming-tickets/${storeId}`]: store?.name ?? 'Store',
           [`/incoming-tickets/${storeId}/${ticketId}`]: ticketId,
         }}
diff --git a/app/(main)/incoming-tickets/[storeId]/components/IncomingTicketsList.tsx b/app/(main)/incoming-tickets/[storeId]/components/IncomingTicketsList.tsx
index 93720d5e..2f3155ca 100644
--- a/app/(main)/incoming-tickets/[storeId]/components/IncomingTicketsList.tsx
+++ b/app/(main)/incoming-tickets/[storeId]/components/IncomingTicketsList.tsx
@@ -1,7 +1,7 @@
 'use client';
 import IncomingTicketCard from '@/app/(main)/incoming-tickets/[storeId]/components/IncomingTicketCard';
 import { useState } from 'react';
-import { Table } from 'react-bootstrap';
+import { Table, Form } from 'react-bootstrap';
 
 type IncomingTicketsListProps = {
   tickets: {
@@ -20,10 +20,10 @@ export default function IncomingTicketsList({
   const statusOptions = [
     'All',
     'Requested',
+    'Approved',
     'Ready',
-    'Rejected',
     'Fulfilled',
-    'Approved',
+    'Rejected',
   ];
 
   // Filter tickets to only show tickets with the selected status
@@ -38,21 +38,21 @@ export default function IncomingTicketsList({
   );
 
   return (
-    <div>
+    <div className="content-body">
       {/* Dropdown menu with status options */}
-      <div className="d-flex justify-content-end">
-        <select
-          className={`form-select w-auto ${styles.dropdown}`}
-          value={selectedStatus}
-          onChange={(e) => setSelectedStatus(e.target.value)}
-          className="form-select w-auto dropdown"
-        >
-          {statusOptions.map((statusOption) => (
-            <option key={statusOption} value={statusOption}>
-              {statusOption}
-            </option>
-          ))}
-        </select>
+      <div className="d-flex">
+        <div>
+          <Form.Select
+            value={selectedStatus}
+            onChange={(e) => setSelectedStatus(e.target.value)}
+          >
+            {statusOptions.map((statusOption) => (
+              <option key={statusOption} value={statusOption}>
+                {statusOption}
+              </option>
+            ))}
+          </Form.Select>
+        </div>
       </div>
 
       {filteredTickets.length > 0 ? (
diff --git a/app/(main)/incoming-tickets/[storeId]/page.tsx b/app/(main)/incoming-tickets/[storeId]/page.tsx
index 551ca933..260245d8 100644
--- a/app/(main)/incoming-tickets/[storeId]/page.tsx
+++ b/app/(main)/incoming-tickets/[storeId]/page.tsx
@@ -72,11 +72,11 @@ export default async function IncomingTicketsStorePage({
     <div>
       <Breadcrumbs
         labelMap={{
-          'incoming-tickets': 'Incoming Tickets',
+          'incoming-tickets': 'Store Tickets',
           [storeId]: store.name,
         }}
       />
-      <h1>Incoming Tickets</h1>
+      <h1>Store Tickets</h1>
       <IncomingTicketsList tickets={tickets} />
     </div>
   );
diff --git a/app/(main)/outgoing-tickets/[ticketId]/page.tsx b/app/(main)/outgoing-tickets/[ticketId]/page.tsx
index 4c146e07..3bca25f7 100644
--- a/app/(main)/outgoing-tickets/[ticketId]/page.tsx
+++ b/app/(main)/outgoing-tickets/[ticketId]/page.tsx
@@ -12,7 +12,7 @@ export default async function OutgoingTicketDetailsPage({
     <div>
       <Breadcrumbs
         labelMap={{
-          'outgoing-tickets': 'Outgoing Tickets',
+          'outgoing-tickets': 'My Tickets',
           [`/outgoing-tickets/${ticketId}`]: ticketId,
         }}
       />
diff --git a/app/(main)/outgoing-tickets/components/OutgoingTicketsList.tsx b/app/(main)/outgoing-tickets/components/OutgoingTicketsList.tsx
index 40d6422d..c7bd12a8 100644
--- a/app/(main)/outgoing-tickets/components/OutgoingTicketsList.tsx
+++ b/app/(main)/outgoing-tickets/components/OutgoingTicketsList.tsx
@@ -1,7 +1,7 @@
 'use client';
 import OutgoingTicketCard from '@/app/(main)/outgoing-tickets/components/OutgoingTicketCard';
 import { useState } from 'react';
-import { Table } from 'react-bootstrap';
+import { Table, Form } from 'react-bootstrap';
 
 type Ticket = {
   ticket_id: string;
@@ -20,10 +20,10 @@ export default function OutgoingTicketsList({
   const statusOptions = [
     'All',
     'Requested',
+    'Approved',
     'Ready',
-    'Rejected',
     'Fulfilled',
-    'Approved',
+    'Rejected',
   ];
   const filteredTickets =
     selectedStatus === 'All'
@@ -37,20 +37,21 @@ export default function OutgoingTicketsList({
   );
 
   return (
-    <div>
+    <div className="content-body">
       {/* Dropdown menu with status options */}
-      <div className="d-flex justify-content-end">
-        <select
-          className="form-select w-auto dropdown"
-          value={selectedStatus}
-          onChange={(e) => setSelectedStatus(e.target.value)}
-        >
-          {statusOptions.map((statusOption) => (
-            <option key={statusOption} value={statusOption}>
-              {statusOption}
-            </option>
-          ))}
-        </select>
+      <div className="d-flex">
+        <div>
+          <Form.Select
+            value={selectedStatus}
+            onChange={(e) => setSelectedStatus(e.target.value)}
+          >
+            {statusOptions.map((statusOption) => (
+              <option key={statusOption} value={statusOption}>
+                {statusOption}
+              </option>
+            ))}
+          </Form.Select>
+        </div>
       </div>
 
       {filteredTickets.length > 0 ? (
diff --git a/app/(main)/team/people/components/UsersList.tsx b/app/(main)/team/people/components/UsersList.tsx
deleted file mode 100644
index 33767fc4..00000000
--- a/app/(main)/team/people/components/UsersList.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import Link from 'next/link';
-import Image from 'next/image';
-import { Table } from 'react-bootstrap';
-import imagePlaceholder from '@/public/image-placeholder.svg';
-
-export default function UsersList({
-  users,
-}: {
-  users: {
-    user_id: string;
-    first_name: string;
-    last_name: string;
-    role: string;
-    email: string;
-    profile_photo_url: string | null;
-  }[];
-}) {
-  return (
-    <div>
-      <Table borderless responsive>
-        <thead className="table-header">
-          <tr>
-            <th>Team Member</th>
-            <th>Role</th>
-            <th>Email</th>
-          </tr>
-        </thead>
-        <tbody>
-          {users.map((user) => (
-            <tr key={user.user_id}>
-              <td>
-                <Image
-                  src={user.profile_photo_url || imagePlaceholder}
-                  alt={`Profile picture for ${user.first_name}`}
-                  height={32}
-                  width={32}
-                  unoptimized
-                  className="rounded-circle me-2"
-                />
-                <Link
-                  key={user.user_id}
-                  href={`/team/people/${user.user_id}`} // Where to navigate
-                  className="userLink"
-                >
-                  {user.first_name + ' ' + user.last_name}
-                </Link>
-              </td>
-              <td className="text-uppercase">{user.role}</td>
-              <td>
-                <a className="userEmail" href={`mailto:${user.email}`}>
-                  {user.email}
-                </a>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </Table>
-    </div>
-  );
-}
diff --git a/app/(main)/test/components/TicketsTestComponent.tsx b/app/(main)/test/components/TicketsTestComponent.tsx
index 5b4420b8..fbebf25d 100644
--- a/app/(main)/test/components/TicketsTestComponent.tsx
+++ b/app/(main)/test/components/TicketsTestComponent.tsx
@@ -53,7 +53,7 @@ export default function TicketsTestComponent() {
     <div>
       <h2>Ticket Testing</h2>
       <a href={url + 'outgoing-tickets'}>
-        <button>View Outgoing Tickets</button>
+        <button>View My Tickets</button>
       </a>
       <ul>
         <li>Tickets you can read will appear here.</li>
diff --git a/app/globals.css b/app/globals.css
index e783b189..e62af9e4 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -45,12 +45,11 @@ th {
   color: #4a5568;
   background-color: #e5f3ff;
   font-weight: 600;
-  font-size: 16.93px;
   line-height: 100%;
 }
 
 td {
-  padding: 22.28px 26.74px;
+  padding: 1.25rem;
   color: #718096;
   border-bottom: 0.45px solid #e5f3ff;
 }
@@ -67,10 +66,9 @@ tr {
 }
 
 Table {
-  margin-top: 26.74px;
   width: 100%;
   border-collapse: collapse;
-  border-radius: 12px;
+  border-radius: 0.5rem;
   overflow: hidden;
   text-align: left;
 }
@@ -79,7 +77,6 @@ Table {
 .table-header th {
   background-color: #e5f3ff;
   font-weight: 500;
-  padding-left: 15px;
 }
 
 .main-container {
@@ -391,36 +388,6 @@ Table {
   align-self: flex-end;
 }
 
-/* search bar layout */
-.search-filter-wrapper {
-  margin-bottom: 1rem;
-}
-
-/* clear filter button styling */
-.btn-primary.search-filter-clear {
-  padding-left: 2.25rem;
-  background: #fff url('/filter-icon.svg') no-repeat left 0.75rem center / 1rem;
-  border-color: #dee2e6;
-  color: #000;
-}
-
-.btn-primary.search-filter-clear:hover {
-  background: #dee2e6 url('/filter-icon.svg') no-repeat left 0.75rem center /
-    1rem;
-  border-color: #dee2e6;
-  color: #000;
-}
-
-.search-bar {
-  background: #fff url('/search-icon.svg') no-repeat right 0.75rem center / 1rem;
-  margin-bottom: 0.5rem;
-}
-
-/* search bar layout */
-.search-filter-wrapper {
-  margin-bottom: 1rem;
-}
-
 /* clear filter button styling */
 .btn-primary.search-filter-clear {
   padding-left: 2.25rem;
@@ -446,26 +413,6 @@ Table {
   margin-bottom: 0.5rem;
 }
 
-/* clear filter button styling */
-.btn-primary.search-filter-clear {
-  padding-left: 2.25rem;
-  background: #fff url('/filter-icon.svg') no-repeat left 0.75rem center / 1rem;
-  border-color: #dee2e6;
-  color: #000;
-}
-
-.btn-primary.search-filter-clear:hover {
-  background: #dee2e6 url('/filter-icon.svg') no-repeat left 0.75rem center /
-    1rem;
-  border-color: #dee2e6;
-  color: #000;
-}
-
-.search-bar {
-  background: #fff url('/search-icon.svg') no-repeat right 0.75rem center / 1rem;
-  margin-bottom: 0.5rem;
-}
-
 .photo {
   object-fit: cover;
   margin-bottom: 10px;
@@ -475,18 +422,3 @@ Table {
   display: flex;
   gap: 12px;
 }
-
-/* Outgoing, Incoming Tickets */
-.dropdown {
-  padding: 8px 36px 8px 16px;
-  width: auto;
-  border: 0.5px solid #cbd5e0;
-  border-radius: 5px;
-
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1;
-
-  color: #000000;
-  cursor: pointer;
-}