From d83842e669e759ef0cf1379eced24e5f52fc70cf Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Sat, 14 Feb 2026 01:57:46 -0500
Subject: [PATCH 1/8] Fixed all files for proper componnt child checks

---
 apps/frontend/src/charka-ui.d.ts              | 64 +++++++++++++++++++
 .../components/forms/newDonationFormModal.tsx | 17 +++--
 .../forms/pantryApplicationModal.tsx          |  3 +-
 .../components/forms/requestDetailsModal.tsx  |  2 +-
 apps/frontend/src/containers/FormRequests.tsx |  2 +-
 .../src/containers/pantryDashboard.tsx        |  3 +-
 .../src/containers/volunteerManagement.tsx    |  2 +-
 apps/frontend/src/types/types.ts              |  6 +-
 apps/frontend/tsconfig.json                   |  6 +-
 yarn.lock                                     | 49 ++------------
 10 files changed, 93 insertions(+), 61 deletions(-)
 create mode 100644 apps/frontend/src/charka-ui.d.ts

diff --git a/apps/frontend/src/charka-ui.d.ts b/apps/frontend/src/charka-ui.d.ts
new file mode 100644
index 000000000..0dd649dfd
--- /dev/null
+++ b/apps/frontend/src/charka-ui.d.ts
@@ -0,0 +1,64 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import '@chakra-ui/react';
+
+declare module '@chakra-ui/react' {
+  export interface ComponentProps {
+    asChild?: boolean;
+    children?: React.ReactNode;
+    as?: any;
+    [key: string]: any;
+  }
+
+  // Menu components
+  export interface MenuTriggerProps extends ComponentProps {}
+  export interface MenuContentProps extends ComponentProps {}
+  export interface MenuItemProps extends ComponentProps {}
+  export interface MenuPositionerProps extends ComponentProps {}
+  export interface MenuRootProps extends ComponentProps {}
+  export interface MenuCheckboxItemProps extends ComponentProps {}
+  export interface MenuRadioItemGroupProps extends ComponentProps {}
+  export interface MenuRadioItemProps extends ComponentProps {}
+
+  // Dialog components
+  export interface DialogCloseTriggerProps extends ComponentProps {}
+  export interface DialogContentProps extends ComponentProps {}
+  export interface DialogBackdropProps extends ComponentProps {}
+  export interface DialogPositionerProps extends ComponentProps {}
+  export interface DialogTitleProps extends ComponentProps {}
+  export interface DialogTriggerProps extends ComponentProps {}
+
+  // Checkbox components
+  export interface CheckboxLabelProps extends ComponentProps {}
+  export interface CheckboxControlProps extends ComponentProps {}
+
+  // Radio components
+  export interface RadioGroupItemProps extends ComponentProps {}
+  export interface RadioGroupItemControlProps extends ComponentProps {}
+  export interface RadioGroupItemTextProps extends ComponentProps {}
+
+  // Pagination components
+  export interface PaginationPrevTriggerProps extends ComponentProps {}
+  export interface PaginationNextTriggerProps extends ComponentProps {}
+  export interface PaginationItemsProps extends ComponentProps {}
+
+  // Tabs components
+  export interface TabsTriggerProps extends ComponentProps {}
+  export interface TabsContentProps extends ComponentProps {}
+  export interface TabsListProps extends ComponentProps {}
+
+  // Field components
+  export interface FieldLabelProps extends ComponentProps {}
+  export interface FieldRootProps extends ComponentProps {}
+  export interface FieldHelperTextProps extends ComponentProps {}
+
+  // Common components
+  export interface ButtonProps extends ComponentProps {}
+  export interface IconButtonProps extends ComponentProps {}
+  export interface BoxProps extends ComponentProps {}
+  export interface LinkProps extends ComponentProps {}
+  export interface TextProps extends ComponentProps {}
+  export interface CardProps extends ComponentProps {}
+  export interface CardBodyProps extends ComponentProps {}
+  export interface TextareaProps extends ComponentProps {}
+}
diff --git a/apps/frontend/src/components/forms/newDonationFormModal.tsx b/apps/frontend/src/components/forms/newDonationFormModal.tsx
index cfc22116b..11d1d9f3e 100644
--- a/apps/frontend/src/components/forms/newDonationFormModal.tsx
+++ b/apps/frontend/src/components/forms/newDonationFormModal.tsx
@@ -14,7 +14,7 @@ import {
 } from '@chakra-ui/react';
 import { useState } from 'react';
 import ApiClient from '@api/apiClient';
-import { FoodTypes } from '../../types/types';
+import { FoodTypes, FoodType } from '../../types/types';
 
 interface NewDonationFormModalProps {
   onDonationSuccess: () => void;
@@ -22,12 +22,21 @@ interface NewDonationFormModalProps {
   onClose: () => void;
 }
 
+interface DonationRow {
+  id: number;
+  foodItem: string;
+  foodType: FoodType | '';
+  numItems: string;
+  ozPerItem: string;
+  valuePerItem: string;
+}
+
 const NewDonationFormModal: React.FC<NewDonationFormModalProps> = ({
   onDonationSuccess,
   isOpen,
   onClose,
 }) => {
-  const [rows, setRows] = useState([
+  const [rows, setRows] = useState<DonationRow[]>([
     {
       id: 1,
       foodItem: '',
@@ -51,7 +60,7 @@ const NewDonationFormModal: React.FC<NewDonationFormModalProps> = ({
     calculateTotals(updatedRows);
   };
 
-  const calculateTotals = (updatedRows: typeof rows) => {
+  const calculateTotals = (updatedRows: DonationRow[]) => {
     let totalItems = 0,
       totalOz = 0,
       totalValue = 0;
@@ -123,7 +132,7 @@ const NewDonationFormModal: React.FC<NewDonationFormModalProps> = ({
           reservedQuantity: 0,
           ozPerItem: parseFloat(row.ozPerItem),
           estimatedValue: parseFloat(row.valuePerItem),
-          foodType: row.foodType,
+          foodType: row.foodType as FoodType,
         }));
 
         await ApiClient.postMultipleDonationItems({ donationId, items });
diff --git a/apps/frontend/src/components/forms/pantryApplicationModal.tsx b/apps/frontend/src/components/forms/pantryApplicationModal.tsx
index ceb8179c2..4a4efdd71 100644
--- a/apps/frontend/src/components/forms/pantryApplicationModal.tsx
+++ b/apps/frontend/src/components/forms/pantryApplicationModal.tsx
@@ -1,6 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { Button, Dialog, Grid, GridItem, Text } from '@chakra-ui/react';
-import ApiClient from '@api/apiClient';
 import { Pantry } from 'types/types';
 
 interface PantryApplicationModalProps {
diff --git a/apps/frontend/src/components/forms/requestDetailsModal.tsx b/apps/frontend/src/components/forms/requestDetailsModal.tsx
index 5a63830da..ce31fd4c4 100644
--- a/apps/frontend/src/components/forms/requestDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/requestDetailsModal.tsx
@@ -311,7 +311,7 @@ const RequestDetailsModal: React.FC<RequestDetailsModalProps> = ({
                       count={orderDetailsList.length}
                       pageSize={1}
                       page={currentPage}
-                      onChange={(page) => setCurrentPage(page)}
+                      onChange={(page: number) => setCurrentPage(page)}
                     >
                       <ButtonGroup variant="outline" size="sm">
                         <Pagination.PrevTrigger asChild>
diff --git a/apps/frontend/src/containers/FormRequests.tsx b/apps/frontend/src/containers/FormRequests.tsx
index 8d5b2246d..f3bc33c8e 100644
--- a/apps/frontend/src/containers/FormRequests.tsx
+++ b/apps/frontend/src/containers/FormRequests.tsx
@@ -204,7 +204,7 @@ const FormRequests: React.FC = () => {
           count={Math.ceil(requests.length / pageSize)}
           pageSize={1}
           page={currentPage}
-          onChange={(page) => setCurrentPage(page)}
+          onChange={(page: number) => setCurrentPage(page)}
         >
           <ButtonGroup variant="outline" size="sm">
             <Pagination.PrevTrigger asChild>
diff --git a/apps/frontend/src/containers/pantryDashboard.tsx b/apps/frontend/src/containers/pantryDashboard.tsx
index 39e98346a..228084c1c 100644
--- a/apps/frontend/src/containers/pantryDashboard.tsx
+++ b/apps/frontend/src/containers/pantryDashboard.tsx
@@ -61,7 +61,7 @@ const PantryDashboard: React.FC = () => {
           transform="translateY(-50%)"
         >
           <Menu.Root>
-            <Menu.Trigger asChild>
+            <Menu.Trigger>
               <Button
                 bg="transparent"
                 size="lg"
@@ -123,7 +123,6 @@ const PantryDashboard: React.FC = () => {
       </Card.Root>
 
       <Button
-        asChild
         mt="6"
         _hover={{ textDecoration: 'none' }}
         _focus={{ textDecoration: 'none' }}
diff --git a/apps/frontend/src/containers/volunteerManagement.tsx b/apps/frontend/src/containers/volunteerManagement.tsx
index 4929767b1..faea914cf 100644
--- a/apps/frontend/src/containers/volunteerManagement.tsx
+++ b/apps/frontend/src/containers/volunteerManagement.tsx
@@ -202,7 +202,7 @@ const VolunteerManagement: React.FC = () => {
             count={Math.ceil(filteredVolunteers.length / pageSize)}
             pageSize={1}
             page={currentPage}
-            onChange={(page) => setCurrentPage(page)}
+            onChange={(page: number) => setCurrentPage(page)}
           >
             <ButtonGroup variant="outline" size="sm">
               <Pagination.PrevTrigger asChild>
diff --git a/apps/frontend/src/types/types.ts b/apps/frontend/src/types/types.ts
index 4b6d50527..ad10cff52 100644
--- a/apps/frontend/src/types/types.ts
+++ b/apps/frontend/src/types/types.ts
@@ -46,7 +46,7 @@ export interface Pantry {
   secondaryContactPhone?: string;
   pantryUser?: User;
   status: ApplicationStatus;
-  dateApplied: Date;
+  dateApplied: string;
   activities: Activity[];
   activitiesComments?: string;
   itemsInStock: string;
@@ -182,8 +182,8 @@ export interface FoodRequest {
   requestedSize: string;
   requestedItems: string[];
   additionalInformation: string | null;
-  requestedAt: Date;
-  dateReceived: Date | null;
+  requestedAt: string;
+  dateReceived: string | null;
   feedback: string | null;
   photos: string[] | null;
   orders?: Order[];
diff --git a/apps/frontend/tsconfig.json b/apps/frontend/tsconfig.json
index a664b36c0..138d5986f 100644
--- a/apps/frontend/tsconfig.json
+++ b/apps/frontend/tsconfig.json
@@ -14,11 +14,11 @@
       "@public/*": ["../public/*"],
       "@shared/*": ["../../../shared/*"],
       "@utils/*": ["utils/*"],
-      "@loaders/*": ["loaders/*"],
-    },
+      "@loaders/*": ["loaders/*"]
+    }
   },
   "files": [],
-  "include": [],
+  "include": ["src/chakra-ui.d.ts"],
   "references": [
     {
       "path": "./tsconfig.app.json"
diff --git a/yarn.lock b/yarn.lock
index 6851f8d53..40e88109f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7122,11 +7122,6 @@ ansi-regex@^5.0.1:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
   integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
 
-ansi-regex@^6.0.1:
-  version "6.2.2"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.2.2.tgz#60216eea464d864597ce2832000738a0589650c1"
-  integrity sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==
-
 ansi-styles@^4.0.0, ansi-styles@^4.1.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
@@ -8905,11 +8900,6 @@ duplexer@^0.1.1:
   resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
   integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
 
-eastasianwidth@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
-  integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
-
 ecc-jsbn@~0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
@@ -8947,11 +8937,6 @@ emittery@^0.13.1:
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.13.1.tgz#c04b8c3457490e0847ae51fced3af52d338e3dad"
   integrity sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==
 
-emoji-regex@^10.3.0:
-  version "10.6.0"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.6.0.tgz#bf3d6e8f7f8fd22a65d9703475bc0147357a6b0d"
-  integrity sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==
-
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
@@ -10048,7 +10033,7 @@ get-caller-file@^2.0.1, get-caller-file@^2.0.5:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
-get-east-asian-width@^1.0.0, get-east-asian-width@^1.3.1:
+get-east-asian-width@^1.3.1:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/get-east-asian-width/-/get-east-asian-width-1.4.0.tgz#9bc4caa131702b4b61729cb7e42735bc550c9ee6"
   integrity sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==
@@ -14629,7 +14614,7 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@4.2.3, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3, string-width@^5.0.1, string-width@^5.1.2, string-width@^7.0.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -14638,24 +14623,6 @@ string-length@^4.0.1:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.1"
 
-string-width@^5.0.1, string-width@^5.1.2:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
-  integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
-  dependencies:
-    eastasianwidth "^0.2.0"
-    emoji-regex "^9.2.2"
-    strip-ansi "^7.0.1"
-
-string-width@^7.0.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-7.2.0.tgz#b5bb8e2165ce275d4d43476dd2700ad9091db6dc"
-  integrity sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==
-  dependencies:
-    emoji-regex "^10.3.0"
-    get-east-asian-width "^1.0.0"
-    strip-ansi "^7.1.0"
-
 string.prototype.includes@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz#eceef21283640761a81dbe16d6c7171a4edf7d92"
@@ -14738,20 +14705,13 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1, strip-ansi@^7.0.1, strip-ansi@^7.1.0:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
   dependencies:
     ansi-regex "^5.0.1"
 
-strip-ansi@^7.0.1, strip-ansi@^7.1.0:
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.2.tgz#132875abde678c7ea8d691533f2e7e22bb744dba"
-  integrity sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==
-  dependencies:
-    ansi-regex "^6.0.1"
-
 strip-bom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
@@ -15971,6 +15931,7 @@ wordwrap@^1.0.0:
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+  name wrap-ansi-cjs
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -16158,4 +16119,4 @@ yocto-queue@^0.1.0:
 yocto-queue@^1.0.0:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-1.2.2.tgz#3e09c95d3f1aa89a58c114c99223edf639152c00"
-  integrity sha512-4LCcse/U2MHZ63HAJVE+v71o7yOdIe4cZ70Wpf8D/IyjDKYQLV5GD46B+hSTjJsvV5PztjvHoU580EftxjDZFQ==
\ No newline at end of file
+  integrity sha512-4LCcse/U2MHZ63HAJVE+v71o7yOdIe4cZ70Wpf8D/IyjDKYQLV5GD46B+hSTjJsvV5PztjvHoU580EftxjDZFQ==

From 522e7ac54269074f81dcbe65bc38256f21ef53a7 Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Sat, 14 Feb 2026 02:08:10 -0500
Subject: [PATCH 2/8] Fianl commit

---
 apps/frontend/src/charka-ui.d.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/frontend/src/charka-ui.d.ts b/apps/frontend/src/charka-ui.d.ts
index 0dd649dfd..6246dc1dc 100644
--- a/apps/frontend/src/charka-ui.d.ts
+++ b/apps/frontend/src/charka-ui.d.ts
@@ -4,10 +4,10 @@ import '@chakra-ui/react';
 
 declare module '@chakra-ui/react' {
   export interface ComponentProps {
-    asChild?: boolean;
-    children?: React.ReactNode;
-    as?: any;
-    [key: string]: any;
+    asChild?: boolean; // Enables composition pattern
+    children?: React.ReactNode; // Allows child elements
+    as?: any; // Polymorphic component prop
+    [key: string]: any; // Catch-all for any other props
   }
 
   // Menu components

From 02c8e6e0091b4264e8916ea1294c2d97607d176d Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Sat, 14 Feb 2026 23:23:32 -0500
Subject: [PATCH 3/8] Started convertion

---
 apps/frontend/src/charka-ui.d.ts              |  2 +-
 .../components/forms/addNewVolunteerModal.tsx | 10 +--
 .../forms/deliveryConfirmationModal.tsx       |  8 ++-
 .../components/forms/donationDetailsModal.tsx |  2 +-
 .../components/forms/newDonationFormModal.tsx |  2 +-
 .../components/forms/orderDetailsModal.tsx    |  2 +-
 .../forms/pantryApplicationForm.tsx           | 62 ++++++++++++-------
 .../src/containers/pantryDashboard.tsx        |  6 +-
 8 files changed, 55 insertions(+), 39 deletions(-)

diff --git a/apps/frontend/src/charka-ui.d.ts b/apps/frontend/src/charka-ui.d.ts
index 6246dc1dc..ebd2f264c 100644
--- a/apps/frontend/src/charka-ui.d.ts
+++ b/apps/frontend/src/charka-ui.d.ts
@@ -5,7 +5,7 @@ import '@chakra-ui/react';
 declare module '@chakra-ui/react' {
   export interface ComponentProps {
     asChild?: boolean; // Enables composition pattern
-    children?: React.ReactNode; // Allows child elements
+    children?: JSX.Element | JSX.Element[]; // Allows child elements
     as?: any; // Polymorphic component prop
     [key: string]: any; // Catch-all for any other props
   }
diff --git a/apps/frontend/src/components/forms/addNewVolunteerModal.tsx b/apps/frontend/src/components/forms/addNewVolunteerModal.tsx
index 545122dad..c7ee2281a 100644
--- a/apps/frontend/src/components/forms/addNewVolunteerModal.tsx
+++ b/apps/frontend/src/components/forms/addNewVolunteerModal.tsx
@@ -125,7 +125,7 @@ const NewVolunteerModal: React.FC<NewVolunteerModalProps> = ({
               fontFamily="Inter"
               color="#000"
             >
-              Add New Volunteer
+              <Text>Add New Volunteer</Text>
             </Dialog.Title>
             <CloseButton
               onClick={() => setIsOpen(false)}
@@ -146,7 +146,7 @@ const NewVolunteerModal: React.FC<NewVolunteerModalProps> = ({
                   color="neutral.800"
                   fontWeight={600}
                 >
-                  First Name
+                  <Text>First Name</Text>
                 </Field.Label>
                 <Input
                   color="neutral.700"
@@ -162,7 +162,7 @@ const NewVolunteerModal: React.FC<NewVolunteerModalProps> = ({
                   color="neutral.800"
                   fontWeight={600}
                 >
-                  Last Name
+                  <Text>Last Name</Text>
                 </Field.Label>
                 <Input
                   color="neutral.700"
@@ -175,7 +175,7 @@ const NewVolunteerModal: React.FC<NewVolunteerModalProps> = ({
             </Flex>
             <Field.Root>
               <Field.Label textStyle="p2" color="neutral.800" fontWeight={600}>
-                Email
+                <Text>Email</Text>
               </Field.Label>
               <Input
                 color="neutral.700"
@@ -187,7 +187,7 @@ const NewVolunteerModal: React.FC<NewVolunteerModalProps> = ({
             </Field.Root>
             <Field.Root my={4}>
               <Field.Label textStyle="p2" color="neutral.800" fontWeight={600}>
-                Phone Number
+                <Text>Phone Number</Text>
               </Field.Label>
               <USPhoneInput
                 value={phone}
diff --git a/apps/frontend/src/components/forms/deliveryConfirmationModal.tsx b/apps/frontend/src/components/forms/deliveryConfirmationModal.tsx
index c85b09cfe..2d527a1e1 100644
--- a/apps/frontend/src/components/forms/deliveryConfirmationModal.tsx
+++ b/apps/frontend/src/components/forms/deliveryConfirmationModal.tsx
@@ -70,7 +70,7 @@ const DeliveryConfirmationModal: React.FC<DeliveryConfirmationModalProps> = ({
         <Dialog.Content maxW="49em">
           <Dialog.Header>
             <Dialog.Title fontSize={25} fontWeight={700}>
-              Delivery Confirmation Form
+              <Text>Delivery Confirmation Form</Text>
             </Dialog.Title>
           </Dialog.Header>
           <Dialog.Body>
@@ -97,7 +97,9 @@ const DeliveryConfirmationModal: React.FC<DeliveryConfirmationModalProps> = ({
                   name="deliveryDate"
                   max={new Date().toISOString().split('T')[0]}
                 />
-                <Field.HelperText>Select the delivery date.</Field.HelperText>
+                <Field.HelperText>
+                  <Text>Select the delivery date.</Text>
+                </Field.HelperText>
               </Field.Root>
               <Field.Root mb="2em">
                 <Field.Label asChild>
@@ -125,7 +127,7 @@ const DeliveryConfirmationModal: React.FC<DeliveryConfirmationModalProps> = ({
                   onChange={handlePhotoChange}
                 />
                 <Field.HelperText>
-                  Select up to 3 photos to upload.
+                  <Text>Select up to 3 photos to upload.</Text>
                 </Field.HelperText>
                 <Box mt={3}>{renderPhotoNames()}</Box>
               </Field.Root>
diff --git a/apps/frontend/src/components/forms/donationDetailsModal.tsx b/apps/frontend/src/components/forms/donationDetailsModal.tsx
index 80b8d15ce..d5630190d 100644
--- a/apps/frontend/src/components/forms/donationDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/donationDetailsModal.tsx
@@ -75,7 +75,7 @@ const DonationDetailsModal: React.FC<DonationDetailsModalProps> = ({
             <Dialog.Header>
               <VStack align="stretch" gap={0}>
                 <Dialog.Title fontSize="lg" mb={2} fontWeight="600">
-                  Donation #{donationId} Details
+                  <Text>Donation #{donationId} Details</Text>
                 </Dialog.Title>
 
                 {loadedDonation && (
diff --git a/apps/frontend/src/components/forms/newDonationFormModal.tsx b/apps/frontend/src/components/forms/newDonationFormModal.tsx
index 11d1d9f3e..1b8bdcb1f 100644
--- a/apps/frontend/src/components/forms/newDonationFormModal.tsx
+++ b/apps/frontend/src/components/forms/newDonationFormModal.tsx
@@ -177,7 +177,7 @@ const NewDonationFormModal: React.FC<NewDonationFormModalProps> = ({
 
             <Dialog.Header asChild>
               <Dialog.Title fontSize={25} fontWeight={700}>
-                SSF Log New Donation Form
+                <Text>SSF Log New Donation Form</Text>
               </Dialog.Title>
             </Dialog.Header>
 
diff --git a/apps/frontend/src/components/forms/orderDetailsModal.tsx b/apps/frontend/src/components/forms/orderDetailsModal.tsx
index 672fefe08..ced315c6e 100644
--- a/apps/frontend/src/components/forms/orderDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/orderDetailsModal.tsx
@@ -56,7 +56,7 @@ const OrderDetailsModal: React.FC<OrderDetailsModalProps> = ({
         <Dialog.Content maxW={650}>
           <Dialog.Header pb={0} mt={2}>
             <Dialog.Title fontSize="lg" fontWeight={700} fontFamily="inter">
-              Order {order.orderId}
+              <Text>Order {order.orderId}</Text>
             </Dialog.Title>
           </Dialog.Header>
           <Dialog.Body>
diff --git a/apps/frontend/src/components/forms/pantryApplicationForm.tsx b/apps/frontend/src/components/forms/pantryApplicationForm.tsx
index df185caaa..09498e461 100644
--- a/apps/frontend/src/components/forms/pantryApplicationForm.tsx
+++ b/apps/frontend/src/components/forms/pantryApplicationForm.tsx
@@ -152,7 +152,7 @@ const PantryApplicationForm: React.FC = () => {
           <SimpleGrid columns={2} columnGap={9} rowGap={10} mb="2.5em">
             <Field.Root required>
               <Field.Label {...fieldHeaderStyles}>
-                First Name
+                <Text>First Name</Text>
                 <Field.RequiredIndicator color="red" />
               </Field.Label>
               <Input
@@ -163,7 +163,7 @@ const PantryApplicationForm: React.FC = () => {
             </Field.Root>
             <Field.Root required>
               <Field.Label {...fieldHeaderStyles}>
-                Last Name
+                <Text>Last Name</Text>
                 <Field.RequiredIndicator color="red" />
               </Field.Label>
               <Input
@@ -174,7 +174,7 @@ const PantryApplicationForm: React.FC = () => {
             </Field.Root>
             <Field.Root required>
               <Field.Label {...fieldHeaderStyles}>
-                Phone Number
+                <Text>Phone Number</Text>
                 <Field.RequiredIndicator color="red" />
               </Field.Label>
               <USPhoneInput
@@ -188,7 +188,7 @@ const PantryApplicationForm: React.FC = () => {
             </Field.Root>
             <Field.Root required>
               <Field.Label {...fieldHeaderStyles}>
-                Email Address
+                <Text>Email Address</Text>
                 <Field.RequiredIndicator color="red" />
               </Field.Label>
               <Input
@@ -200,8 +200,10 @@ const PantryApplicationForm: React.FC = () => {
           </SimpleGrid>
           <Field.Root required mb=".75em">
             <Field.Label {...fieldHeaderStyles} mb=".5em">
-              Is there someone at your pantry who can regularly check and
-              respond to emails from SSF as needed?{' '}
+              <Text>
+                Is there someone at your pantry who can regularly check and
+                respond to emails from SSF as needed?{' '}
+              </Text>
               <Field.RequiredIndicator color="red" />
             </Field.Label>
             <RadioGroup.Root
@@ -222,7 +224,7 @@ const PantryApplicationForm: React.FC = () => {
                       />
                     </RadioGroup.ItemControl>
                     <RadioGroup.ItemText color="neutral.700" textStyle="p2">
-                      {value}
+                      <Text>{value}</Text>
                     </RadioGroup.ItemText>
                   </RadioGroup.Item>
                 ))}
@@ -245,7 +247,9 @@ const PantryApplicationForm: React.FC = () => {
           <Text {...sectionTitleStyles}>Secondary Contact Information</Text>
           <SimpleGrid columns={2} columnGap={9} rowGap={9} mb="4em">
             <Field.Root>
-              <Field.Label {...fieldHeaderStyles}>First Name</Field.Label>
+              <Field.Label {...fieldHeaderStyles}>
+                <Text>First Name</Text>
+              </Field.Label>
               <Input
                 name="secondaryContactFirstName"
                 type="text"
@@ -253,7 +257,9 @@ const PantryApplicationForm: React.FC = () => {
               />
             </Field.Root>
             <Field.Root>
-              <Field.Label {...fieldHeaderStyles}>Last Name</Field.Label>
+              <Field.Label {...fieldHeaderStyles}>
+                <Text>Last Name</Text>
+              </Field.Label>
               <Input
                 name="secondaryContactLastName"
                 type="text"
@@ -261,7 +267,9 @@ const PantryApplicationForm: React.FC = () => {
               />
             </Field.Root>
             <Field.Root>
-              <Field.Label {...fieldHeaderStyles}>Phone Number</Field.Label>
+              <Field.Label {...fieldHeaderStyles}>
+                <Text>Phone Number</Text>
+              </Field.Label>
               <USPhoneInput
                 value={secondaryContactPhone}
                 onChange={setSecondaryContactPhone}
@@ -273,7 +281,9 @@ const PantryApplicationForm: React.FC = () => {
               />
             </Field.Root>
             <Field.Root>
-              <Field.Label {...fieldHeaderStyles}>Email Address</Field.Label>
+              <Field.Label {...fieldHeaderStyles}>
+                <Text>Email Address</Text>
+              </Field.Label>
               <Input
                 name="secondaryContactEmail"
                 type="email"
@@ -293,7 +303,7 @@ const PantryApplicationForm: React.FC = () => {
           <SimpleGrid columns={2} columnGap={9} rowGap={9} mb="2em">
             <Field.Root required>
               <Field.Label {...fieldHeaderStyles}>
-                Address Line 1
+                <Text>Address Line 1</Text>
                 <Field.RequiredIndicator color="red" />
               </Field.Label>
               <Input
@@ -303,7 +313,9 @@ const PantryApplicationForm: React.FC = () => {
               />
             </Field.Root>
             <Field.Root>
-              <Field.Label {...fieldHeaderStyles}>Address Line 2</Field.Label>
+              <Field.Label {...fieldHeaderStyles}>
+                <Text>Address Line 2</Text>
+              </Field.Label>
               <Input
                 name="shipmentAddressLine2"
                 type="text"
@@ -312,7 +324,7 @@ const PantryApplicationForm: React.FC = () => {
             </Field.Root>
             <Field.Root required>
               <Field.Label {...fieldHeaderStyles}>
-                City/Town
+                <Text>City/Town</Text>
                 <Field.RequiredIndicator color="red" />
               </Field.Label>
               <Input
@@ -323,7 +335,7 @@ const PantryApplicationForm: React.FC = () => {
             </Field.Root>
             <Field.Root required>
               <Field.Label {...fieldHeaderStyles}>
-                State/Region/Province
+                <Text>State/Region/Province</Text>
                 <Field.RequiredIndicator color="red" />
               </Field.Label>
               <Input
@@ -334,7 +346,7 @@ const PantryApplicationForm: React.FC = () => {
             </Field.Root>
             <Field.Root required>
               <Field.Label {...fieldHeaderStyles}>
-                Zip/Post Code
+                <Text>Zip/Post Code</Text>
                 <Field.RequiredIndicator color="red" />
               </Field.Label>
               <Input
@@ -344,7 +356,7 @@ const PantryApplicationForm: React.FC = () => {
               />
             </Field.Root>
             <Field.Root>
-              <Field.Label {...fieldHeaderStyles}>Country</Field.Label>
+              <Field.Label {...fieldHeaderStyles}><Text>Country</Text></Field.Label>
               <Input
                 name="shipmentAddressCountry"
                 type="text"
@@ -354,8 +366,9 @@ const PantryApplicationForm: React.FC = () => {
           </SimpleGrid>
           <Field.Root required mb="2em">
             <Field.Label {...fieldHeaderStyles} mb=".5em">
-              Does this address differ from your pantry's mailing address for
-              documents? <Field.RequiredIndicator color="red" />
+              <Text>Does this address differ from your pantry's mailing address for
+              documents?</Text>
+               <Field.RequiredIndicator color="red" />
             </Field.Label>
             <RadioGroup.Root
               variant="solid"
@@ -384,8 +397,9 @@ const PantryApplicationForm: React.FC = () => {
           </Field.Root>
           <Field.Root required mb="2em">
             <Field.Label {...fieldHeaderStyles} mb=".5em">
-              Would your pantry be able to accept food deliveries during
+              <Text>Would your pantry be able to accept food deliveries during
               standard business hours Mon-Fri?{' '}
+              </Text>
               <Field.RequiredIndicator color="red" />
             </Field.Label>
             <RadioGroup.Root name="acceptFoodDeliveries" variant="solid">
@@ -400,7 +414,7 @@ const PantryApplicationForm: React.FC = () => {
                       />
                     </RadioGroup.ItemControl>
                     <RadioGroup.ItemText color="neutral.700" textStyle="p2">
-                      {value}
+                      <Text>{value}</Text>
                     </RadioGroup.ItemText>
                   </RadioGroup.Item>
                 ))}
@@ -409,7 +423,7 @@ const PantryApplicationForm: React.FC = () => {
           </Field.Root>
           <Field.Root mb="4em">
             <Field.Label {...fieldHeaderStyles}>
-              Please note any delivery window restrictions.
+              <Text>Please note any delivery window restrictions.</Text>
             </Field.Label>
             <Textarea
               name="deliveryWindowInstructions"
@@ -430,7 +444,7 @@ const PantryApplicationForm: React.FC = () => {
               <SimpleGrid columns={2} columnGap={9} rowGap={9} mb="4em">
                 <Field.Root required={differentMailingAddress}>
                   <Field.Label {...fieldHeaderStyles}>
-                    Address Line 1
+                    <Text>Address Line 1</Text>
                     <Field.RequiredIndicator color="red" />
                   </Field.Label>
                   <Input
@@ -441,7 +455,7 @@ const PantryApplicationForm: React.FC = () => {
                 </Field.Root>
                 <Field.Root>
                   <Field.Label {...fieldHeaderStyles}>
-                    Address Line 2
+                    <Text>Address Line 2</Text>
                   </Field.Label>
                   <Input
                     name="mailingAddressLine2"
diff --git a/apps/frontend/src/containers/pantryDashboard.tsx b/apps/frontend/src/containers/pantryDashboard.tsx
index 228084c1c..8f8f0f50f 100644
--- a/apps/frontend/src/containers/pantryDashboard.tsx
+++ b/apps/frontend/src/containers/pantryDashboard.tsx
@@ -80,7 +80,7 @@ const PantryDashboard: React.FC = () => {
                     _hover={{ textDecoration: 'none', cursor: 'pointer' }}
                     textDecoration="none"
                   >
-                    Profile
+                    <Text>Profile</Text>
                   </Menu.Item>
                   <Menu.Item
                     as={Link}
@@ -88,7 +88,7 @@ const PantryDashboard: React.FC = () => {
                     _hover={{ textDecoration: 'none', cursor: 'pointer' }}
                     textDecoration="none"
                   >
-                    Request Form
+                    <Text>Request Form</Text>
                   </Menu.Item>
                   <Menu.Item
                     as={Link}
@@ -96,7 +96,7 @@ const PantryDashboard: React.FC = () => {
                     _hover={{ textDecoration: 'none', cursor: 'pointer' }}
                     textDecoration="none"
                   >
-                    Sign out
+                    <Text>Sign out</Text>
                   </Menu.Item>
                 </Menu.Content>
               </Menu.Positioner>

From 0dd76bf973aa01f8f8983d3a70aea66f0c980eda Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Sat, 14 Feb 2026 23:26:12 -0500
Subject: [PATCH 4/8] prettier

---
 .../components/forms/pantryApplicationForm.tsx  | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/apps/frontend/src/components/forms/pantryApplicationForm.tsx b/apps/frontend/src/components/forms/pantryApplicationForm.tsx
index 09498e461..240dd4185 100644
--- a/apps/frontend/src/components/forms/pantryApplicationForm.tsx
+++ b/apps/frontend/src/components/forms/pantryApplicationForm.tsx
@@ -356,7 +356,9 @@ const PantryApplicationForm: React.FC = () => {
               />
             </Field.Root>
             <Field.Root>
-              <Field.Label {...fieldHeaderStyles}><Text>Country</Text></Field.Label>
+              <Field.Label {...fieldHeaderStyles}>
+                <Text>Country</Text>
+              </Field.Label>
               <Input
                 name="shipmentAddressCountry"
                 type="text"
@@ -366,9 +368,11 @@ const PantryApplicationForm: React.FC = () => {
           </SimpleGrid>
           <Field.Root required mb="2em">
             <Field.Label {...fieldHeaderStyles} mb=".5em">
-              <Text>Does this address differ from your pantry's mailing address for
-              documents?</Text>
-               <Field.RequiredIndicator color="red" />
+              <Text>
+                Does this address differ from your pantry's mailing address for
+                documents?
+              </Text>
+              <Field.RequiredIndicator color="red" />
             </Field.Label>
             <RadioGroup.Root
               variant="solid"
@@ -397,8 +401,9 @@ const PantryApplicationForm: React.FC = () => {
           </Field.Root>
           <Field.Root required mb="2em">
             <Field.Label {...fieldHeaderStyles} mb=".5em">
-              <Text>Would your pantry be able to accept food deliveries during
-              standard business hours Mon-Fri?{' '}
+              <Text>
+                Would your pantry be able to accept food deliveries during
+                standard business hours Mon-Fri?{' '}
               </Text>
               <Field.RequiredIndicator color="red" />
             </Field.Label>

From 0f786c9a3555660b80408e3cfbac472cd64eb917 Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Sun, 15 Feb 2026 02:18:53 -0500
Subject: [PATCH 5/8] Fixed children permissions

---
 apps/frontend/src/charka-ui.d.ts              |   3 +
 .../forms/pantryApplicationForm.tsx           | 296 ++++++++++-------
 .../components/forms/requestDetailsModal.tsx  | 312 +++++++++---------
 .../src/components/forms/requestFormModal.tsx |  93 +++---
 .../frontend/src/containers/adminDonation.tsx |   4 +-
 .../src/containers/adminOrderManagement.tsx   |   4 +-
 6 files changed, 386 insertions(+), 326 deletions(-)

diff --git a/apps/frontend/src/charka-ui.d.ts b/apps/frontend/src/charka-ui.d.ts
index ebd2f264c..39188d977 100644
--- a/apps/frontend/src/charka-ui.d.ts
+++ b/apps/frontend/src/charka-ui.d.ts
@@ -1,6 +1,9 @@
 /* eslint-disable @typescript-eslint/no-empty-object-type */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import '@chakra-ui/react';
+// This file serves as an extension onto some select chakra-ui components that we use
+// It essentially allows us to give permissions for these components to have children
+// Which, while the DOM renders just fine, TypeScript throws errors for unless these are specified
 
 declare module '@chakra-ui/react' {
   export interface ComponentProps {
diff --git a/apps/frontend/src/components/forms/pantryApplicationForm.tsx b/apps/frontend/src/components/forms/pantryApplicationForm.tsx
index 240dd4185..ac431690e 100644
--- a/apps/frontend/src/components/forms/pantryApplicationForm.tsx
+++ b/apps/frontend/src/components/forms/pantryApplicationForm.tsx
@@ -392,7 +392,7 @@ const PantryApplicationForm: React.FC = () => {
                       />
                     </RadioGroup.ItemControl>
                     <RadioGroup.ItemText color="neutral.700" textStyle="p2">
-                      {value}
+                      <Text>{value}</Text>
                     </RadioGroup.ItemText>
                   </RadioGroup.Item>
                 ))}
@@ -470,7 +470,7 @@ const PantryApplicationForm: React.FC = () => {
                 </Field.Root>
                 <Field.Root required={differentMailingAddress}>
                   <Field.Label {...fieldHeaderStyles}>
-                    City/Town
+                    <Text>City/Town</Text>
                     <Field.RequiredIndicator color="red" />
                   </Field.Label>
                   <Input
@@ -481,7 +481,7 @@ const PantryApplicationForm: React.FC = () => {
                 </Field.Root>
                 <Field.Root required={differentMailingAddress}>
                   <Field.Label {...fieldHeaderStyles}>
-                    State/Region/Province
+                    <Text>State/Region/Province</Text>
                     <Field.RequiredIndicator color="red" />
                   </Field.Label>
                   <Input
@@ -492,7 +492,7 @@ const PantryApplicationForm: React.FC = () => {
                 </Field.Root>
                 <Field.Root required={differentMailingAddress}>
                   <Field.Label {...fieldHeaderStyles}>
-                    Zip/Post Code
+                    <Text>Zip/Post Code</Text>
                     <Field.RequiredIndicator color="red" />
                   </Field.Label>
                   <Input
@@ -502,7 +502,9 @@ const PantryApplicationForm: React.FC = () => {
                   />
                 </Field.Root>
                 <Field.Root>
-                  <Field.Label {...fieldHeaderStyles}>Country</Field.Label>
+                  <Field.Label {...fieldHeaderStyles}>
+                    <Text>Country</Text>
+                  </Field.Label>
                   <Input
                     name="mailingAddressCountry"
                     type="text"
@@ -527,8 +529,10 @@ const PantryApplicationForm: React.FC = () => {
           </Field.Root>
           <Field.Root required mb="2em" invalid={!allergenClients}>
             <Field.Label {...fieldHeaderStyles}>
-              Approximately how many allergen-avoidant clients does your pantry
-              serve?
+              <Text>
+                Approximately how many allergen-avoidant clients does your
+                pantry serve?
+              </Text>
               <Field.RequiredIndicator color="red" />
             </Field.Label>
             <NativeSelect.Root>
@@ -560,7 +564,7 @@ const PantryApplicationForm: React.FC = () => {
           {allergenClients === allergenClientsExactOption && (
             <Field.Root required mb="2em">
               <Field.Label {...fieldHeaderStyles}>
-                Please provide the exact number, if known
+                <Text>Please provide the exact number, if</Text>
                 <Field.RequiredIndicator color="red" />
               </Field.Label>
               <Input
@@ -575,19 +579,22 @@ const PantryApplicationForm: React.FC = () => {
           )}
           <Field.Root required mb="2em">
             <Field.Label {...fieldHeaderStyles}>
-              Which food allergies or other medical dietary restrictions do
-              clients at your pantry report?
+              <Text>
+                Which food allergies or other medical dietary restrictions do
+                clients at your pantry report?
+              </Text>
               <Field.RequiredIndicator color="red" />
             </Field.Label>
-
-            {restrictions.map((value) => (
-              <input
-                type="hidden"
-                name="restrictions"
-                key={value}
-                value={value}
-              />
-            ))}
+            <Text>
+              {restrictions.map((value) => (
+                <input
+                  type="hidden"
+                  name="restrictions"
+                  key={value}
+                  value={value}
+                />
+              ))}
+            </Text>
 
             <Menu.Root closeOnSelect={false}>
               <Menu.Trigger asChild>
@@ -664,32 +671,33 @@ const PantryApplicationForm: React.FC = () => {
                 </Menu.Content>
               </Menu.Positioner>
             </Menu.Root>
-
-            {restrictions.length > 0 && (
-              <Flex wrap="wrap" mt={1} gap={2}>
-                {restrictions.map((value) => (
-                  <Tag.Root
-                    key={value}
-                    bg="teal.100"
-                    p={2}
-                    border="1px solid"
-                    borderColor="teal.400"
-                  >
-                    <Tag.Label>{value}</Tag.Label>
-                    <Tag.EndElement ml={4}>
-                      <Tag.CloseTrigger
-                        onClick={() =>
-                          setRestrictions((prev) =>
-                            prev.filter((item) => item !== value),
-                          )
-                        }
-                        style={{ cursor: 'pointer' }}
-                      />
-                    </Tag.EndElement>
-                  </Tag.Root>
-                ))}
-              </Flex>
-            )}
+            <Text>
+              {restrictions.length > 0 && (
+                <Flex wrap="wrap" mt={1} gap={2}>
+                  {restrictions.map((value) => (
+                    <Tag.Root
+                      key={value}
+                      bg="teal.100"
+                      p={2}
+                      border="1px solid"
+                      borderColor="teal.400"
+                    >
+                      <Tag.Label>{value}</Tag.Label>
+                      <Tag.EndElement ml={4}>
+                        <Tag.CloseTrigger
+                          onClick={() =>
+                            setRestrictions((prev) =>
+                              prev.filter((item) => item !== value),
+                            )
+                          }
+                          style={{ cursor: 'pointer' }}
+                        />
+                      </Tag.EndElement>
+                    </Tag.Root>
+                  ))}
+                </Flex>
+              )}
+            </Text>
           </Field.Root>
 
           {restrictions.find((option) =>
@@ -702,7 +710,7 @@ const PantryApplicationForm: React.FC = () => {
               mb="2em"
             >
               <Field.Label {...fieldHeaderStyles}>
-                If you selected "Other," please specify:
+                <Text>If you selected "Other," please specify:</Text>
                 <Field.RequiredIndicator color="red" />
               </Field.Label>
               <Input maxW="20em" name="restrictionsOther" type="text" />
@@ -710,8 +718,10 @@ const PantryApplicationForm: React.FC = () => {
           )}
           <Field.Root required mb="2em">
             <Field.Label {...fieldHeaderStyles}>
-              Would you be able to accept frozen donations that require
-              refrigeration or freezing?
+              <Text>
+                Would you be able to accept frozen donations that require
+                refrigeration or freezing?
+              </Text>
               <Field.RequiredIndicator color="red" />
             </Field.Label>
             <RadioGroup.Root name="refrigeratedDonation" variant="solid">
@@ -730,7 +740,7 @@ const PantryApplicationForm: React.FC = () => {
                       />
                     </RadioGroup.ItemControl>
                     <RadioGroup.ItemText color="neutral.700" textStyle="p2">
-                      {value}
+                      <Text>{value}</Text>
                     </RadioGroup.ItemText>
                   </RadioGroup.Item>
                 ))}
@@ -740,8 +750,10 @@ const PantryApplicationForm: React.FC = () => {
 
           <Field.Root required mb="2em">
             <Field.Label {...fieldHeaderStyles}>
-              Do you have a dedicated shelf or section of your pantry for
-              allergy-friendly items?
+              <Text>
+                Do you have a dedicated shelf or section of your pantry for
+                allergy-friendly items?
+              </Text>
               <Field.RequiredIndicator color="red" />
             </Field.Label>
             <RadioGroup.Root name="dedicatedAllergyFriendly" variant="solid">
@@ -756,7 +768,7 @@ const PantryApplicationForm: React.FC = () => {
                       />
                     </RadioGroup.ItemControl>
                     <RadioGroup.ItemText color="neutral.700" textStyle="p2">
-                      {value}
+                      <Text>{value}</Text>
                     </RadioGroup.ItemText>
                   </RadioGroup.Item>
                 ))}
@@ -766,14 +778,19 @@ const PantryApplicationForm: React.FC = () => {
 
           <Field.Root required mb="2em">
             <Field.Label {...fieldHeaderStyles}>
-              Are you willing to reserve our food shipments for
-              allergen-avoidant individuals?{' '}
+              <Text>
+                Are you willing to reserve our food shipments for
+                allergen-avoidant individuals?{' '}
+              </Text>
               <Field.RequiredIndicator color="red" />
             </Field.Label>
             <Field.HelperText color="neutral.600" mb=".5em">
-              For example, grouping allergen-friendly items on a separate shelf
-              or in separate bins and encouraging non-allergic clients to save
-              these items for clients who do not have other safe food options.
+              <Text>
+                For example, grouping allergen-friendly items on a separate
+                shelf or in separate bins and encouraging non-allergic clients
+                to save these items for clients who do not have other safe food
+                options.
+              </Text>
             </Field.HelperText>
             <RadioGroup.Root
               name="reserveFoodForAllergic"
@@ -793,7 +810,7 @@ const PantryApplicationForm: React.FC = () => {
                       />
                     </RadioGroup.ItemControl>
                     <RadioGroup.ItemText color="neutral.700" textStyle="p2">
-                      {value}
+                      <Text>{value}</Text>
                     </RadioGroup.ItemText>
                   </RadioGroup.Item>
                 ))}
@@ -804,9 +821,11 @@ const PantryApplicationForm: React.FC = () => {
           {reserveFoodForAllergic === 'Yes' && (
             <Field.Root mb="2em">
               <Field.Label {...fieldHeaderStyles}>
-                How would you work to ensure that allergen-friendly foods are
-                distributed to clients with food allergies or other adverse
-                reactions to foods?
+                <Text>
+                  How would you work to ensure that allergen-friendly foods are
+                  distributed to clients with food allergies or other adverse
+                  reactions to foods?
+                </Text>
               </Field.Label>
               <Textarea
                 name="reservationExplanation"
@@ -819,7 +838,7 @@ const PantryApplicationForm: React.FC = () => {
           {reserveFoodForAllergic === 'Some' && (
             <Field.Root mb="2em">
               <Field.Label {...fieldHeaderStyles}>
-                Please explain why you selected "Some."
+                <Text>Please explain why you selected "Some."</Text>
               </Field.Label>
               <Textarea
                 name="reservationExplanation"
@@ -831,7 +850,9 @@ const PantryApplicationForm: React.FC = () => {
 
           <Field.Root mb="2em">
             <Field.Label {...fieldHeaderStyles}>
-              How often do allergen-avoidant clients visit your food pantry?
+              <Text>
+                How often do allergen-avoidant clients visit your food pantry?
+              </Text>
             </Field.Label>
             <NativeSelect.Root>
               <NativeSelect.Field
@@ -857,8 +878,10 @@ const PantryApplicationForm: React.FC = () => {
           </Field.Root>
           <Field.Root mb="2em">
             <Field.Label {...fieldHeaderStyles}>
-              Are you confident in identifying the top 9 allergens in an
-              ingredient list?
+              <Text>
+                Are you confident in identifying the top 9 allergens in an
+                ingredient list?
+              </Text>
             </Field.Label>
             <NativeSelect.Root>
               <NativeSelect.Field
@@ -880,14 +903,18 @@ const PantryApplicationForm: React.FC = () => {
               <NativeSelectIndicator />
             </NativeSelect.Root>
             <Field.HelperText color="neutral.600">
-              The top 9 allergens are milk, egg, peanut, tree nuts, wheat, soy,
-              fish, shellfish, and sesame.
+              <Text>
+                The top 9 allergens are milk, egg, peanut, tree nuts, wheat,
+                soy, fish, shellfish, and sesame.
+              </Text>
             </Field.HelperText>
           </Field.Root>
           <Field.Root mb="2em">
             <Field.Label {...fieldHeaderStyles}>
-              Do you serve allergen-avoidant or food-allergic children at your
-              pantry?
+              <Text>
+                Do you serve allergen-avoidant or food-allergic children at your
+                pantry?
+              </Text>
             </Field.Label>
             <NativeSelect.Root>
               <NativeSelect.Field
@@ -907,24 +934,27 @@ const PantryApplicationForm: React.FC = () => {
               <NativeSelectIndicator />
             </NativeSelect.Root>
             <Field.HelperText color="neutral.600">
-              "Children" is defined as any individual under the age of 18 either
-              living independently or as part of a household.
+              <Text>
+                "Children" is defined as any individual under the age of 18
+                either living independently or as part of a household.
+              </Text>
             </Field.HelperText>
           </Field.Root>
           <Field.Root required mb="2em">
             <Field.Label {...fieldHeaderStyles}>
-              What activities are you open to doing with SSF?
+              <Text>What activities are you open to doing with SSF?</Text>
               <Field.RequiredIndicator color="red" />
             </Field.Label>
-
-            {activities.map((value) => (
-              <input
-                type="hidden"
-                name="activities"
-                key={value}
-                value={value}
-              />
-            ))}
+            <Text>
+              {activities.map((value) => (
+                <input
+                  type="hidden"
+                  name="activities"
+                  key={value}
+                  value={value}
+                />
+              ))}
+            </Text>
 
             <Menu.Root closeOnSelect={false}>
               <Menu.Trigger asChild>
@@ -1001,45 +1031,50 @@ const PantryApplicationForm: React.FC = () => {
                 </Menu.Content>
               </Menu.Positioner>
             </Menu.Root>
-
-            {activities.length > 0 && (
-              <Flex wrap="wrap" mt={1} gap={2}>
-                {activities.map((value) => (
-                  <Tag.Root
-                    key={value}
-                    bg="teal.100"
-                    p={2}
-                    border="1px solid"
-                    borderColor="teal.400"
-                  >
-                    <Tag.Label>{value}</Tag.Label>
-                    <Tag.EndElement ml={4}>
-                      <Tag.CloseTrigger
-                        onClick={() =>
-                          setActivities((prev) =>
-                            prev.filter((item) => item !== value),
-                          )
-                        }
-                        style={{ cursor: 'pointer' }}
-                      />
-                    </Tag.EndElement>
-                  </Tag.Root>
-                ))}
-              </Flex>
-            )}
+            <Text>
+              {activities.length > 0 && (
+                <Flex wrap="wrap" mt={1} gap={2}>
+                  {activities.map((value) => (
+                    <Tag.Root
+                      key={value}
+                      bg="teal.100"
+                      p={2}
+                      border="1px solid"
+                      borderColor="teal.400"
+                    >
+                      <Tag.Label>{value}</Tag.Label>
+                      <Tag.EndElement ml={4}>
+                        <Tag.CloseTrigger
+                          onClick={() =>
+                            setActivities((prev) =>
+                              prev.filter((item) => item !== value),
+                            )
+                          }
+                          style={{ cursor: 'pointer' }}
+                        />
+                      </Tag.EndElement>
+                    </Tag.Root>
+                  ))}
+                </Flex>
+              )}
+            </Text>
             <Field.HelperText color="neutral.600">
-              Food donations are one part of being a partner pantry. The
-              following are additional ways to help us better support you!
-              Please select all that apply.
+              <Text>
+                Food donations are one part of being a partner pantry. The
+                following are additional ways to help us better support you!
+                Please select all that apply.
+              </Text>
             </Field.HelperText>
           </Field.Root>
           <Field.Root required={activities.includes('Something else')} mb="2em">
             <Field.Label {...fieldHeaderStyles}>
-              Please list any comments/concerns related to the previous
-              question.
-              {activities.includes('Something else') && (
-                <Field.RequiredIndicator color="red" />
-              )}
+              <Text>
+                Please list any comments/concerns related to the previous
+                question.
+                {activities.includes('Something else') && (
+                  <Field.RequiredIndicator color="red" />
+                )}
+              </Text>
             </Field.Label>
             <Textarea
               name="activitiesComments"
@@ -1047,13 +1082,15 @@ const PantryApplicationForm: React.FC = () => {
               autoresize
             />
             <Field.HelperText color="neutral.600">
-              If you answered "Something Else," please elaborate.
+              <Text>If you answered "Something Else," please elaborate.</Text>
             </Field.HelperText>
           </Field.Root>
           <Field.Root required mb="2em">
             <Field.Label {...fieldHeaderStyles}>
-              What types of allergen-free items, if any, do you currently have
-              in stock?
+              <Text>
+                What types of allergen-free items, if any, do you currently have
+                in stock?
+              </Text>
               <Field.RequiredIndicator color="red" />
             </Field.Label>
             <Textarea
@@ -1062,14 +1099,19 @@ const PantryApplicationForm: React.FC = () => {
               autoresize
             />
             <Field.HelperText color="neutral.600">
-              For example, gluten-free breads, sunflower seed butters, nondairy
-              beverages, etc.
+              <Text>
+                For example, gluten-free breads, sunflower seed butters,
+                nondairy beverages, etc.
+              </Text>
             </Field.HelperText>
           </Field.Root>
           <Field.Root required mb="4em">
             <Field.Label {...fieldHeaderStyles}>
-              Do allergen-avoidant clients at your pantry ever request a greater
-              variety of items or not have enough options? Please explain.
+              <Text>
+                Do allergen-avoidant clients at your pantry ever request a
+                greater variety of items or not have enough options? Please
+                explain.
+              </Text>
               <Field.RequiredIndicator color="red" />
             </Field.Label>
             <Textarea
@@ -1083,7 +1125,9 @@ const PantryApplicationForm: React.FC = () => {
 
           <Field.Root mb="2em">
             <Field.Label {...fieldHeaderStyles}>
-              Would you like to subscribe to our quarterly newsletter?
+              <Text>
+                Would you like to subscribe to our quarterly newsletter?
+              </Text>
             </Field.Label>
             <RadioGroup.Root name="newsletterSubscription" variant="solid">
               <Stack>
@@ -1097,7 +1141,7 @@ const PantryApplicationForm: React.FC = () => {
                       />
                     </RadioGroup.ItemControl>
                     <RadioGroup.ItemText color="neutral.700" textStyle="p2">
-                      {value}
+                      <Text>{value}</Text>
                     </RadioGroup.ItemText>
                   </RadioGroup.Item>
                 ))}
@@ -1113,7 +1157,9 @@ const PantryApplicationForm: React.FC = () => {
                 _checked={{ bg: 'neutral.800' }}
               />
               <Checkbox.Label {...fieldHeaderStyles}>
-                By submitting this form, you agree to our Privacy Policy.{' '}
+                <Text>
+                  By submitting this form, you agree to our Privacy Policy.{' '}
+                </Text>
                 <Field.RequiredIndicator color="red" />
               </Checkbox.Label>
             </Checkbox.Root>
diff --git a/apps/frontend/src/components/forms/requestDetailsModal.tsx b/apps/frontend/src/components/forms/requestDetailsModal.tsx
index ce31fd4c4..640574a88 100644
--- a/apps/frontend/src/components/forms/requestDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/requestDetailsModal.tsx
@@ -122,7 +122,7 @@ const RequestDetailsModal: React.FC<RequestDetailsModalProps> = ({
         <Dialog.Content maxW={650}>
           <Dialog.Header pb={0} mt={2}>
             <Dialog.Title fontSize="lg" fontWeight={600} fontFamily="inter">
-              Food Request #{request.requestId}
+              <Text>Food Request #{request.requestId}</Text>
             </Dialog.Title>
           </Dialog.Header>
           <Dialog.Body>
@@ -142,7 +142,7 @@ const RequestDetailsModal: React.FC<RequestDetailsModalProps> = ({
                   borderColor="neutral.100"
                   _selected={{ borderColor: 'neutral.700' }}
                 >
-                  Request Details
+                  <Text>Request Details</Text>
                 </Tabs.Trigger>
                 <Tabs.Trigger
                   textStyle="p2"
@@ -154,7 +154,7 @@ const RequestDetailsModal: React.FC<RequestDetailsModalProps> = ({
                   borderColor="neutral.100"
                   _selected={{ borderColor: 'neutral.700' }}
                 >
-                  Associated Orders
+                  <Text>Associated Orders</Text>
                 </Tabs.Trigger>
               </Tabs.List>
               <Tabs.Content value="requestDetails">
@@ -175,27 +175,28 @@ const RequestDetailsModal: React.FC<RequestDetailsModalProps> = ({
                       Food Type(s)
                     </Text>
                   </Field.Label>
-
-                  {selectedItems.length > 0 && (
-                    <Flex wrap="wrap" mt={3} gap={2}>
-                      {selectedItems.map((item) => (
-                        <Tag.Root
-                          key={item}
-                          size="xl"
-                          variant="solid"
-                          bg={'neutral.100'}
-                          color="neutral.800"
-                          borderRadius="4px"
-                          borderColor={'neutral.300'}
-                          borderWidth="1px"
-                          fontFamily="Inter"
-                          fontWeight={500}
-                        >
-                          <Tag.Label>{item}</Tag.Label>
-                        </Tag.Root>
-                      ))}
-                    </Flex>
-                  )}
+                  <Text>
+                    {selectedItems.length > 0 && (
+                      <Flex wrap="wrap" mt={3} gap={2}>
+                        {selectedItems.map((item) => (
+                          <Tag.Root
+                            key={item}
+                            size="xl"
+                            variant="solid"
+                            bg={'neutral.100'}
+                            color="neutral.800"
+                            borderRadius="4px"
+                            borderColor={'neutral.300'}
+                            borderWidth="1px"
+                            fontFamily="Inter"
+                            fontWeight={500}
+                          >
+                            <Tag.Label>{item}</Tag.Label>
+                          </Tag.Root>
+                        ))}
+                      </Flex>
+                    )}
+                  </Text>
                 </Field.Root>
 
                 <Field.Root mb={4}>
@@ -211,148 +212,149 @@ const RequestDetailsModal: React.FC<RequestDetailsModalProps> = ({
               </Tabs.Content>
 
               <Tabs.Content value="associatedOrders">
-                {!currentOrder && (
-                  <Text mt={5} textStyle="p2">
-                    {' '}
-                    No associated orders to display{' '}
-                  </Text>
-                )}
-                {currentOrder && (
-                  <Box
-                    borderWidth="1px"
-                    borderColor="neutral.100"
-                    borderRadius="5px"
-                    p={3}
-                    mt={6}
-                  >
-                    <Flex justify="space-between" align="center" mb={3}>
-                      <Text {...sectionTitleStyles}>
-                        Order {currentOrder.orderId} -
-                        <Text as="span" color="neutral.800" textStyle="p2">
-                          {' '}
-                          Fulfilled by {currentOrder.foodManufacturerName}
+                <Text>
+                  {!currentOrder && (
+                    <Text mt={5} textStyle="p2">
+                      {' '}
+                      No associated orders to display{' '}
+                    </Text>
+                  )}
+                  {currentOrder && (
+                    <Box
+                      borderWidth="1px"
+                      borderColor="neutral.100"
+                      borderRadius="5px"
+                      p={3}
+                      mt={6}
+                    >
+                      <Flex justify="space-between" align="center" mb={3}>
+                        <Text {...sectionTitleStyles}>
+                          Order {currentOrder.orderId} -
+                          <Text as="span" color="neutral.800" textStyle="p2">
+                            {' '}
+                            Fulfilled by {currentOrder.foodManufacturerName}
+                          </Text>
                         </Text>
-                      </Text>
-                      {currentOrder.status === OrderStatus.DELIVERED ? (
-                        <Badge
-                          {...badgeStyles}
-                          bgColor="#EAEDEF"
-                          color="#2B4E60"
-                        >
-                          Received
-                        </Badge>
-                      ) : (
-                        <Badge
-                          {...badgeStyles}
-                          bgColor="#FEECD1"
-                          color="#9C5D00"
-                        >
-                          In Progress
-                        </Badge>
-                      )}
-                    </Flex>
-                    {Object.entries(
-                      groupedOrderItemsByType as Record<
-                        string,
-                        OrderItemDetails[]
-                      >,
-                    ).map(([foodType, items]) => (
-                      <Box key={foodType} mb={4}>
-                        <Text {...sectionTitleStyles}>{foodType}</Text>
-                        {items.map((item) => (
-                          <Flex
-                            border="1px solid"
-                            borderColor="neutral.100"
-                            borderRadius="md"
-                            px={4}
-                            align="center"
-                            mt="2"
+                        {currentOrder.status === OrderStatus.DELIVERED ? (
+                          <Badge
+                            {...badgeStyles}
+                            bgColor="#EAEDEF"
+                            color="#2B4E60"
+                          >
+                            Received
+                          </Badge>
+                        ) : (
+                          <Badge
+                            {...badgeStyles}
+                            bgColor="#FEECD1"
+                            color="#9C5D00"
                           >
-                            <Text
-                              py={2}
-                              textStyle="p2"
-                              color="neutral.800"
-                              flex={1}
+                            In Progress
+                          </Badge>
+                        )}
+                      </Flex>
+                      {Object.entries(
+                        groupedOrderItemsByType as Record<
+                          string,
+                          OrderItemDetails[]
+                        >,
+                      ).map(([foodType, items]) => (
+                        <Box key={foodType} mb={4}>
+                          <Text {...sectionTitleStyles}>{foodType}</Text>
+                          {items.map((item) => (
+                            <Flex
+                              border="1px solid"
+                              borderColor="neutral.100"
+                              borderRadius="md"
+                              px={4}
+                              align="center"
+                              mt="2"
                             >
-                              {item.name}
-                            </Text>
+                              <Text
+                                py={2}
+                                textStyle="p2"
+                                color="neutral.800"
+                                flex={1}
+                              >
+                                {item.name}
+                              </Text>
 
-                            <Box
-                              alignSelf="stretch"
-                              borderLeft="1px solid"
-                              borderColor="neutral.100"
-                              mx={3}
-                            />
+                              <Box
+                                alignSelf="stretch"
+                                borderLeft="1px solid"
+                                borderColor="neutral.100"
+                                mx={3}
+                              />
 
-                            <Text
-                              minW={5}
-                              py={2}
-                              textStyle="p2"
-                              color="neutral.800"
+                              <Text
+                                minW={5}
+                                py={2}
+                                textStyle="p2"
+                                color="neutral.800"
+                              >
+                                {item.quantity}
+                              </Text>
+                            </Flex>
+                          ))}
+                        </Box>
+                      ))}
+                      <Text {...sectionTitleStyles} mt="3">
+                        Tracking
+                      </Text>
+                      <Text color="neutral.700" textStyle="p2" mt="3" mb="3">
+                        No tracking link available at this time
+                      </Text>
+                    </Box>
+                  )}
+                  {orderDetailsList.length > 0 && (
+                    <Flex justify="center" mt={7}>
+                      <Pagination.Root
+                        count={orderDetailsList.length}
+                        pageSize={1}
+                        page={currentPage}
+                        onChange={(page: number) => setCurrentPage(page)}
+                      >
+                        <ButtonGroup variant="outline" size="sm">
+                          <Pagination.PrevTrigger asChild>
+                            <IconButton
+                              variant="ghost"
+                              onClick={() =>
+                                setCurrentPage((prev) => Math.max(prev - 1, 1))
+                              }
                             >
-                              {item.quantity}
-                            </Text>
-                          </Flex>
-                        ))}
-                      </Box>
-                    ))}
-                    <Text {...sectionTitleStyles} mt="3">
-                      Tracking
-                    </Text>
-                    <Text color="neutral.700" textStyle="p2" mt="3" mb="3">
-                      No tracking link available at this time
-                    </Text>
-                  </Box>
-                )}
+                              <ChevronLeft />
+                            </IconButton>
+                          </Pagination.PrevTrigger>
 
-                {orderDetailsList.length > 0 && (
-                  <Flex justify="center" mt={7}>
-                    <Pagination.Root
-                      count={orderDetailsList.length}
-                      pageSize={1}
-                      page={currentPage}
-                      onChange={(page: number) => setCurrentPage(page)}
-                    >
-                      <ButtonGroup variant="outline" size="sm">
-                        <Pagination.PrevTrigger asChild>
-                          <IconButton
-                            variant="ghost"
-                            onClick={() =>
-                              setCurrentPage((prev) => Math.max(prev - 1, 1))
-                            }
-                          >
-                            <ChevronLeft />
-                          </IconButton>
-                        </Pagination.PrevTrigger>
+                          <Pagination.Items
+                            render={(page) => (
+                              <IconButton
+                                variant="outline"
+                                _selected={{ borderColor: 'neutral.800' }}
+                                onClick={() => setCurrentPage(page.value)}
+                              >
+                                {page.value}
+                              </IconButton>
+                            )}
+                          />
 
-                        <Pagination.Items
-                          render={(page) => (
+                          <Pagination.NextTrigger asChild>
                             <IconButton
-                              variant="outline"
-                              _selected={{ borderColor: 'neutral.800' }}
-                              onClick={() => setCurrentPage(page.value)}
+                              variant="ghost"
+                              onClick={() =>
+                                setCurrentPage((prev) =>
+                                  Math.min(prev + 1, orderDetailsList.length),
+                                )
+                              }
                             >
-                              {page.value}
+                              <ChevronRight />
                             </IconButton>
-                          )}
-                        />
-
-                        <Pagination.NextTrigger asChild>
-                          <IconButton
-                            variant="ghost"
-                            onClick={() =>
-                              setCurrentPage((prev) =>
-                                Math.min(prev + 1, orderDetailsList.length),
-                              )
-                            }
-                          >
-                            <ChevronRight />
-                          </IconButton>
-                        </Pagination.NextTrigger>
-                      </ButtonGroup>
-                    </Pagination.Root>
-                  </Flex>
-                )}
+                          </Pagination.NextTrigger>
+                        </ButtonGroup>
+                      </Pagination.Root>
+                    </Flex>
+                  )}
+                </Text>
               </Tabs.Content>
             </Tabs.Root>
           </Dialog.Body>
diff --git a/apps/frontend/src/components/forms/requestFormModal.tsx b/apps/frontend/src/components/forms/requestFormModal.tsx
index f54e625ed..d8a7cbc19 100644
--- a/apps/frontend/src/components/forms/requestFormModal.tsx
+++ b/apps/frontend/src/components/forms/requestFormModal.tsx
@@ -59,7 +59,11 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
         <Dialog.Content maxW={650}>
           <Dialog.Header pb={0} mt={2}>
             <Dialog.Title fontSize="lg" fontWeight={700} fontFamily="inter">
-              {previousRequest ? 'Resubmit Latest Request' : 'New Food Request'}
+              <Text>
+                {previousRequest
+                  ? 'Resubmit Latest Request'
+                  : 'New Food Request'}
+              </Text>
             </Dialog.Title>
           </Dialog.Header>
           <Dialog.Body>
@@ -131,7 +135,7 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
                             pl={1}
                             mt={idx === 0 ? 0 : 2}
                           >
-                            {option}
+                            <Text>{option}</Text>
                           </Menu.RadioItem>
                         ))}
                       </Menu.RadioItemGroup>
@@ -146,16 +150,16 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
                     Food Type(s)
                   </Text>
                 </Field.Label>
-
-                {selectedItems.map((item) => (
-                  <input
-                    key={item}
-                    type="hidden"
-                    name="restrictions"
-                    value={item}
-                  />
-                ))}
-
+                <Text>
+                  {selectedItems.map((item) => (
+                    <input
+                      key={item}
+                      type="hidden"
+                      name="restrictions"
+                      value={item}
+                    />
+                  ))}
+                </Text>
                 <Menu.Root closeOnSelect={false}>
                   <Menu.Trigger asChild>
                     <Button
@@ -219,38 +223,39 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
                     </Menu.Content>
                   </Menu.Positioner>
                 </Menu.Root>
+                <Text>
+                  {selectedItems.length > 0 && (
+                    <Flex wrap="wrap" mt={1} gap={2}>
+                      {selectedItems.map((item) => (
+                        <Tag.Root
+                          key={item}
+                          size="xl"
+                          variant="solid"
+                          bg={'neutral.100'}
+                          color="neutral.800"
+                          borderRadius="4px"
+                          borderColor={'neutral.300'}
+                          borderWidth="1px"
+                          fontFamily="Inter"
+                          fontWeight={500}
+                        >
+                          <Tag.Label>{item}</Tag.Label>
 
-                {selectedItems.length > 0 && (
-                  <Flex wrap="wrap" mt={1} gap={2}>
-                    {selectedItems.map((item) => (
-                      <Tag.Root
-                        key={item}
-                        size="xl"
-                        variant="solid"
-                        bg={'neutral.100'}
-                        color="neutral.800"
-                        borderRadius="4px"
-                        borderColor={'neutral.300'}
-                        borderWidth="1px"
-                        fontFamily="Inter"
-                        fontWeight={500}
-                      >
-                        <Tag.Label>{item}</Tag.Label>
-
-                        <Tag.EndElement>
-                          <Tag.CloseTrigger
-                            cursor="pointer"
-                            onClick={() =>
-                              setSelectedItems((prev) =>
-                                prev.filter((i) => i !== item),
-                              )
-                            }
-                          />
-                        </Tag.EndElement>
-                      </Tag.Root>
-                    ))}
-                  </Flex>
-                )}
+                          <Tag.EndElement>
+                            <Tag.CloseTrigger
+                              cursor="pointer"
+                              onClick={() =>
+                                setSelectedItems((prev) =>
+                                  prev.filter((i) => i !== item),
+                                )
+                              }
+                            />
+                          </Tag.EndElement>
+                        </Tag.Root>
+                      ))}
+                    </Flex>
+                  )}
+                </Text>
               </Field.Root>
 
               <Field.Root mb={4}>
@@ -285,7 +290,7 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
                 />
 
                 <Field.HelperText color="neutral.600">
-                  Max 250 words
+                  <Text>Max 250 words</Text>
                 </Field.HelperText>
               </Field.Root>
 
diff --git a/apps/frontend/src/containers/adminDonation.tsx b/apps/frontend/src/containers/adminDonation.tsx
index c444803bb..b3f8eb45c 100644
--- a/apps/frontend/src/containers/adminDonation.tsx
+++ b/apps/frontend/src/containers/adminDonation.tsx
@@ -156,7 +156,9 @@ const AdminDonation: React.FC = () => {
                     >
                       <Checkbox.HiddenInput />
                       <Checkbox.Control borderRadius="sm" />
-                      <Checkbox.Label>{manufacturer}</Checkbox.Label>
+                      <Checkbox.Label>
+                        <span>{manufacturer}</span>
+                      </Checkbox.Label>
                     </Checkbox.Root>
                   ))}
                 </VStack>
diff --git a/apps/frontend/src/containers/adminOrderManagement.tsx b/apps/frontend/src/containers/adminOrderManagement.tsx
index 60273c428..1939f4ff5 100644
--- a/apps/frontend/src/containers/adminOrderManagement.tsx
+++ b/apps/frontend/src/containers/adminOrderManagement.tsx
@@ -457,7 +457,9 @@ const OrderStatusSection: React.FC<OrderStatusSectionProps> = ({
                           >
                             <Checkbox.HiddenInput />
                             <Checkbox.Control borderRadius="sm" />
-                            <Checkbox.Label>{pantry}</Checkbox.Label>
+                            <Checkbox.Label>
+                              <span>{pantry}</span>
+                            </Checkbox.Label>
                           </Checkbox.Root>
                         ))}
                     </VStack>

From d7471656faf1f613ce854a55ff5d7ef1327fd9ab Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Sun, 15 Feb 2026 17:30:26 -0500
Subject: [PATCH 6/8] Reverted commit

---
 apps/frontend/src/charka-ui.d.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/frontend/src/charka-ui.d.ts b/apps/frontend/src/charka-ui.d.ts
index 39188d977..539306983 100644
--- a/apps/frontend/src/charka-ui.d.ts
+++ b/apps/frontend/src/charka-ui.d.ts
@@ -7,10 +7,10 @@ import '@chakra-ui/react';
 
 declare module '@chakra-ui/react' {
   export interface ComponentProps {
-    asChild?: boolean; // Enables composition pattern
-    children?: JSX.Element | JSX.Element[]; // Allows child elements
-    as?: any; // Polymorphic component prop
-    [key: string]: any; // Catch-all for any other props
+    asChild?: boolean;
+    children?: React.ReactNode;
+    as?: any;
+    [key: string]: any;
   }
 
   // Menu components

From 00529fa4595c3dca957f8e65cd527e46ff76e4dd Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Sun, 15 Feb 2026 18:18:16 -0500
Subject: [PATCH 7/8] Fixed typing

---
 apps/frontend/src/charka-ui.d.ts              | 95 +++++++++++--------
 .../components/forms/donationDetailsModal.tsx |  4 +-
 2 files changed, 58 insertions(+), 41 deletions(-)

diff --git a/apps/frontend/src/charka-ui.d.ts b/apps/frontend/src/charka-ui.d.ts
index 6246dc1dc..d22a6c5ba 100644
--- a/apps/frontend/src/charka-ui.d.ts
+++ b/apps/frontend/src/charka-ui.d.ts
@@ -1,64 +1,81 @@
 /* eslint-disable @typescript-eslint/no-empty-object-type */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import '@chakra-ui/react';
+import React from 'react';
 
+// This file serves as an extension onto some select chakra-ui components that we use
+// It essentially allows us to give permissions for these components to have children
+// Which, while the DOM renders just fine, TypeScript throws errors for unless these are specified
 declare module '@chakra-ui/react' {
-  export interface ComponentProps {
+  export interface ComponentPropsStrictChildren {
     asChild?: boolean; // Enables composition pattern
-    children?: React.ReactNode; // Allows child elements
-    as?: any; // Polymorphic component prop
+    children?: JSX.Element | JSX.Element[]; // Allows child elements only
+    as?: React.ElementType; // Polymorphic component prop
+    [key: string]: any; // Catch-all for any other props
+  }
+
+  export interface ComponentPropsLenientChildren {
+    asChild?: boolean; // Enables composition pattern
+    children?: React.ReactNode; // Allows child elements (any combination of components/strings)
+    as?: React.ElementType; // Polymorphic component prop
     [key: string]: any; // Catch-all for any other props
   }
 
   // Menu components
-  export interface MenuTriggerProps extends ComponentProps {}
-  export interface MenuContentProps extends ComponentProps {}
-  export interface MenuItemProps extends ComponentProps {}
-  export interface MenuPositionerProps extends ComponentProps {}
-  export interface MenuRootProps extends ComponentProps {}
-  export interface MenuCheckboxItemProps extends ComponentProps {}
-  export interface MenuRadioItemGroupProps extends ComponentProps {}
-  export interface MenuRadioItemProps extends ComponentProps {}
+  export interface MenuTriggerProps extends ComponentPropsStrictChildren {}
+  export interface MenuContentProps extends ComponentPropsStrictChildren {}
+  export interface MenuItemProps extends ComponentPropsLenientChildren {}
+  export interface MenuPositionerProps extends ComponentPropsStrictChildren {}
+  export interface MenuRootProps extends ComponentPropsStrictChildren {}
+  export interface MenuCheckboxItemProps extends ComponentPropsStrictChildren {}
+  export interface MenuRadioItemGroupProps
+    extends ComponentPropsStrictChildren {}
+  export interface MenuRadioItemProps extends ComponentPropsLenientChildren {}
 
   // Dialog components
-  export interface DialogCloseTriggerProps extends ComponentProps {}
-  export interface DialogContentProps extends ComponentProps {}
-  export interface DialogBackdropProps extends ComponentProps {}
-  export interface DialogPositionerProps extends ComponentProps {}
-  export interface DialogTitleProps extends ComponentProps {}
-  export interface DialogTriggerProps extends ComponentProps {}
+  export interface DialogCloseTriggerProps
+    extends ComponentPropsStrictChildren {}
+  export interface DialogContentProps extends ComponentPropsStrictChildren {}
+  export interface DialogBackdropProps extends ComponentPropsStrictChildren {}
+  export interface DialogPositionerProps extends ComponentPropsStrictChildren {}
+  export interface DialogTitleProps extends ComponentPropsLenientChildren {}
+  export interface DialogTriggerProps extends ComponentPropsStrictChildren {}
 
   // Checkbox components
-  export interface CheckboxLabelProps extends ComponentProps {}
-  export interface CheckboxControlProps extends ComponentProps {}
+  export interface CheckboxLabelProps extends ComponentPropsLenientChildren {}
+  export interface CheckboxControlProps extends ComponentPropsStrictChildren {}
 
   // Radio components
-  export interface RadioGroupItemProps extends ComponentProps {}
-  export interface RadioGroupItemControlProps extends ComponentProps {}
-  export interface RadioGroupItemTextProps extends ComponentProps {}
+  export interface RadioGroupItemProps extends ComponentPropsStrictChildren {}
+  export interface RadioGroupItemControlProps
+    extends ComponentPropsStrictChildren {}
+  export interface RadioGroupItemTextProps
+    extends ComponentPropsLenientChildren {}
 
   // Pagination components
-  export interface PaginationPrevTriggerProps extends ComponentProps {}
-  export interface PaginationNextTriggerProps extends ComponentProps {}
-  export interface PaginationItemsProps extends ComponentProps {}
+  export interface PaginationPrevTriggerProps
+    extends ComponentPropsStrictChildren {}
+  export interface PaginationNextTriggerProps
+    extends ComponentPropsStrictChildren {}
+  export interface PaginationItemsProps extends ComponentPropsStrictChildren {}
 
   // Tabs components
-  export interface TabsTriggerProps extends ComponentProps {}
-  export interface TabsContentProps extends ComponentProps {}
-  export interface TabsListProps extends ComponentProps {}
+  export interface TabsTriggerProps extends ComponentPropsLenientChildren {}
+  export interface TabsContentProps extends ComponentPropsLenientChildren {}
+  export interface TabsListProps extends ComponentPropsStrictChildren {}
 
   // Field components
-  export interface FieldLabelProps extends ComponentProps {}
-  export interface FieldRootProps extends ComponentProps {}
-  export interface FieldHelperTextProps extends ComponentProps {}
+  export interface FieldLabelProps extends ComponentPropsLenientChildren {}
+  export interface FieldRootProps extends ComponentPropsLenientChildren {}
+  export interface FieldHelperTextProps extends ComponentPropsLenientChildren {}
 
   // Common components
-  export interface ButtonProps extends ComponentProps {}
-  export interface IconButtonProps extends ComponentProps {}
-  export interface BoxProps extends ComponentProps {}
-  export interface LinkProps extends ComponentProps {}
-  export interface TextProps extends ComponentProps {}
-  export interface CardProps extends ComponentProps {}
-  export interface CardBodyProps extends ComponentProps {}
-  export interface TextareaProps extends ComponentProps {}
+  export interface ButtonProps extends ComponentPropsStrictChildren {}
+  export interface IconButtonProps extends ComponentPropsStrictChildren {}
+  export interface BoxProps extends ComponentPropsStrictChildren {}
+  export interface LinkProps extends ComponentPropsStrictChildren {}
+  export interface TextProps extends ComponentPropsStrictChildren {}
+  export interface CardProps extends ComponentPropsStrictChildren {}
+  export interface CardBodyProps extends ComponentPropsStrictChildren {}
+  export interface TextareaProps extends ComponentPropsStrictChildren {}
 }
diff --git a/apps/frontend/src/components/forms/donationDetailsModal.tsx b/apps/frontend/src/components/forms/donationDetailsModal.tsx
index 80b8d15ce..a3aa1731e 100644
--- a/apps/frontend/src/components/forms/donationDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/donationDetailsModal.tsx
@@ -12,7 +12,7 @@ import { Donation, DonationItem, FoodType } from 'types/types';
 import { formatDate } from '@utils/utils';
 
 interface DonationDetailsModalProps {
-  donation?: Donation;
+  donation: Donation;
   isOpen: boolean;
   onClose: () => void;
 }
@@ -25,7 +25,7 @@ const DonationDetailsModal: React.FC<DonationDetailsModalProps> = ({
   const [loadedDonation, setLoadedDonation] = useState<Donation>();
   const [items, setItems] = useState<DonationItem[]>([]);
 
-  const donationId = donation?.donationId; // adjust if your ID field is different
+  const donationId = donation.donationId;
 
   useEffect(() => {
     if (!isOpen || !donationId) return;

From 0349c33bb00f305be99fa313401f9a5b55c5233e Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Sun, 15 Feb 2026 18:30:54 -0500
Subject: [PATCH 8/8] Removed Text components

---
 .../components/forms/addNewVolunteerModal.tsx |  10 +-
 .../forms/deliveryConfirmationModal.tsx       |   8 +-
 .../components/forms/donationDetailsModal.tsx |   2 +-
 .../components/forms/newDonationFormModal.tsx |   2 +-
 .../components/forms/orderDetailsModal.tsx    |   2 +-
 .../forms/pantryApplicationForm.tsx           | 365 +++++++-----------
 .../components/forms/requestDetailsModal.tsx  | 312 ++++++++-------
 .../src/components/forms/requestFormModal.tsx |  93 +++--
 .../frontend/src/containers/adminDonation.tsx |   4 +-
 .../src/containers/adminOrderManagement.tsx   |   4 +-
 .../src/containers/pantryDashboard.tsx        |   9 +-
 11 files changed, 367 insertions(+), 444 deletions(-)

diff --git a/apps/frontend/src/components/forms/addNewVolunteerModal.tsx b/apps/frontend/src/components/forms/addNewVolunteerModal.tsx
index c7ee2281a..545122dad 100644
--- a/apps/frontend/src/components/forms/addNewVolunteerModal.tsx
+++ b/apps/frontend/src/components/forms/addNewVolunteerModal.tsx
@@ -125,7 +125,7 @@ const NewVolunteerModal: React.FC<NewVolunteerModalProps> = ({
               fontFamily="Inter"
               color="#000"
             >
-              <Text>Add New Volunteer</Text>
+              Add New Volunteer
             </Dialog.Title>
             <CloseButton
               onClick={() => setIsOpen(false)}
@@ -146,7 +146,7 @@ const NewVolunteerModal: React.FC<NewVolunteerModalProps> = ({
                   color="neutral.800"
                   fontWeight={600}
                 >
-                  <Text>First Name</Text>
+                  First Name
                 </Field.Label>
                 <Input
                   color="neutral.700"
@@ -162,7 +162,7 @@ const NewVolunteerModal: React.FC<NewVolunteerModalProps> = ({
                   color="neutral.800"
                   fontWeight={600}
                 >
-                  <Text>Last Name</Text>
+                  Last Name
                 </Field.Label>
                 <Input
                   color="neutral.700"
@@ -175,7 +175,7 @@ const NewVolunteerModal: React.FC<NewVolunteerModalProps> = ({
             </Flex>
             <Field.Root>
               <Field.Label textStyle="p2" color="neutral.800" fontWeight={600}>
-                <Text>Email</Text>
+                Email
               </Field.Label>
               <Input
                 color="neutral.700"
@@ -187,7 +187,7 @@ const NewVolunteerModal: React.FC<NewVolunteerModalProps> = ({
             </Field.Root>
             <Field.Root my={4}>
               <Field.Label textStyle="p2" color="neutral.800" fontWeight={600}>
-                <Text>Phone Number</Text>
+                Phone Number
               </Field.Label>
               <USPhoneInput
                 value={phone}
diff --git a/apps/frontend/src/components/forms/deliveryConfirmationModal.tsx b/apps/frontend/src/components/forms/deliveryConfirmationModal.tsx
index 2d527a1e1..c85b09cfe 100644
--- a/apps/frontend/src/components/forms/deliveryConfirmationModal.tsx
+++ b/apps/frontend/src/components/forms/deliveryConfirmationModal.tsx
@@ -70,7 +70,7 @@ const DeliveryConfirmationModal: React.FC<DeliveryConfirmationModalProps> = ({
         <Dialog.Content maxW="49em">
           <Dialog.Header>
             <Dialog.Title fontSize={25} fontWeight={700}>
-              <Text>Delivery Confirmation Form</Text>
+              Delivery Confirmation Form
             </Dialog.Title>
           </Dialog.Header>
           <Dialog.Body>
@@ -97,9 +97,7 @@ const DeliveryConfirmationModal: React.FC<DeliveryConfirmationModalProps> = ({
                   name="deliveryDate"
                   max={new Date().toISOString().split('T')[0]}
                 />
-                <Field.HelperText>
-                  <Text>Select the delivery date.</Text>
-                </Field.HelperText>
+                <Field.HelperText>Select the delivery date.</Field.HelperText>
               </Field.Root>
               <Field.Root mb="2em">
                 <Field.Label asChild>
@@ -127,7 +125,7 @@ const DeliveryConfirmationModal: React.FC<DeliveryConfirmationModalProps> = ({
                   onChange={handlePhotoChange}
                 />
                 <Field.HelperText>
-                  <Text>Select up to 3 photos to upload.</Text>
+                  Select up to 3 photos to upload.
                 </Field.HelperText>
                 <Box mt={3}>{renderPhotoNames()}</Box>
               </Field.Root>
diff --git a/apps/frontend/src/components/forms/donationDetailsModal.tsx b/apps/frontend/src/components/forms/donationDetailsModal.tsx
index 2db4a354b..a3aa1731e 100644
--- a/apps/frontend/src/components/forms/donationDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/donationDetailsModal.tsx
@@ -75,7 +75,7 @@ const DonationDetailsModal: React.FC<DonationDetailsModalProps> = ({
             <Dialog.Header>
               <VStack align="stretch" gap={0}>
                 <Dialog.Title fontSize="lg" mb={2} fontWeight="600">
-                  <Text>Donation #{donationId} Details</Text>
+                  Donation #{donationId} Details
                 </Dialog.Title>
 
                 {loadedDonation && (
diff --git a/apps/frontend/src/components/forms/newDonationFormModal.tsx b/apps/frontend/src/components/forms/newDonationFormModal.tsx
index 1b8bdcb1f..11d1d9f3e 100644
--- a/apps/frontend/src/components/forms/newDonationFormModal.tsx
+++ b/apps/frontend/src/components/forms/newDonationFormModal.tsx
@@ -177,7 +177,7 @@ const NewDonationFormModal: React.FC<NewDonationFormModalProps> = ({
 
             <Dialog.Header asChild>
               <Dialog.Title fontSize={25} fontWeight={700}>
-                <Text>SSF Log New Donation Form</Text>
+                SSF Log New Donation Form
               </Dialog.Title>
             </Dialog.Header>
 
diff --git a/apps/frontend/src/components/forms/orderDetailsModal.tsx b/apps/frontend/src/components/forms/orderDetailsModal.tsx
index 711f95795..917bc484d 100644
--- a/apps/frontend/src/components/forms/orderDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/orderDetailsModal.tsx
@@ -56,7 +56,7 @@ const OrderDetailsModal: React.FC<OrderDetailsModalProps> = ({
         <Dialog.Content maxW={650}>
           <Dialog.Header pb={0} mt={2}>
             <Dialog.Title fontSize="lg" fontWeight={700} fontFamily="inter">
-              <Text>Order {order.orderId}</Text>
+              Order {order.orderId}
             </Dialog.Title>
           </Dialog.Header>
           <Dialog.Body>
diff --git a/apps/frontend/src/components/forms/pantryApplicationForm.tsx b/apps/frontend/src/components/forms/pantryApplicationForm.tsx
index 163d81ae6..a132376da 100644
--- a/apps/frontend/src/components/forms/pantryApplicationForm.tsx
+++ b/apps/frontend/src/components/forms/pantryApplicationForm.tsx
@@ -152,7 +152,7 @@ const PantryApplicationForm: React.FC = () => {
           <SimpleGrid columns={2} columnGap={9} rowGap={10} mb="2.5em">
             <Field.Root required>
               <Field.Label {...fieldHeaderStyles}>
-                <Text>First Name</Text>
+                First Name
                 <Field.RequiredIndicator color="red" />
               </Field.Label>
               <Input
@@ -163,7 +163,7 @@ const PantryApplicationForm: React.FC = () => {
             </Field.Root>
             <Field.Root required>
               <Field.Label {...fieldHeaderStyles}>
-                <Text>Last Name</Text>
+                Last Name
                 <Field.RequiredIndicator color="red" />
               </Field.Label>
               <Input
@@ -174,7 +174,7 @@ const PantryApplicationForm: React.FC = () => {
             </Field.Root>
             <Field.Root required>
               <Field.Label {...fieldHeaderStyles}>
-                <Text>Phone Number</Text>
+                Phone Number
                 <Field.RequiredIndicator color="red" />
               </Field.Label>
               <USPhoneInput
@@ -188,7 +188,7 @@ const PantryApplicationForm: React.FC = () => {
             </Field.Root>
             <Field.Root required>
               <Field.Label {...fieldHeaderStyles}>
-                <Text>Email Address</Text>
+                Email Address
                 <Field.RequiredIndicator color="red" />
               </Field.Label>
               <Input
@@ -200,10 +200,8 @@ const PantryApplicationForm: React.FC = () => {
           </SimpleGrid>
           <Field.Root required mb=".75em">
             <Field.Label {...fieldHeaderStyles} mb=".5em">
-              <Text>
-                Is there someone at your pantry who can regularly check and
-                respond to emails from SSF as needed?{' '}
-              </Text>
+              Is there someone at your pantry who can regularly check and
+              respond to emails from SSF as needed?{' '}
               <Field.RequiredIndicator color="red" />
             </Field.Label>
             <RadioGroup.Root
@@ -224,7 +222,7 @@ const PantryApplicationForm: React.FC = () => {
                       />
                     </RadioGroup.ItemControl>
                     <RadioGroup.ItemText color="neutral.700" textStyle="p2">
-                      <Text>{value}</Text>
+                      {value}
                     </RadioGroup.ItemText>
                   </RadioGroup.Item>
                 ))}
@@ -247,9 +245,7 @@ const PantryApplicationForm: React.FC = () => {
           <Text {...sectionTitleStyles}>Secondary Contact Information</Text>
           <SimpleGrid columns={2} columnGap={9} rowGap={9} mb="4em">
             <Field.Root>
-              <Field.Label {...fieldHeaderStyles}>
-                <Text>First Name</Text>
-              </Field.Label>
+              <Field.Label {...fieldHeaderStyles}>First Name</Field.Label>
               <Input
                 name="secondaryContactFirstName"
                 type="text"
@@ -257,9 +253,7 @@ const PantryApplicationForm: React.FC = () => {
               />
             </Field.Root>
             <Field.Root>
-              <Field.Label {...fieldHeaderStyles}>
-                <Text>Last Name</Text>
-              </Field.Label>
+              <Field.Label {...fieldHeaderStyles}>Last Name</Field.Label>
               <Input
                 name="secondaryContactLastName"
                 type="text"
@@ -267,9 +261,7 @@ const PantryApplicationForm: React.FC = () => {
               />
             </Field.Root>
             <Field.Root>
-              <Field.Label {...fieldHeaderStyles}>
-                <Text>Phone Number</Text>
-              </Field.Label>
+              <Field.Label {...fieldHeaderStyles}>Phone Number</Field.Label>
               <USPhoneInput
                 value={secondaryContactPhone}
                 onChange={setSecondaryContactPhone}
@@ -281,9 +273,7 @@ const PantryApplicationForm: React.FC = () => {
               />
             </Field.Root>
             <Field.Root>
-              <Field.Label {...fieldHeaderStyles}>
-                <Text>Email Address</Text>
-              </Field.Label>
+              <Field.Label {...fieldHeaderStyles}>Email Address</Field.Label>
               <Input
                 name="secondaryContactEmail"
                 type="email"
@@ -303,7 +293,7 @@ const PantryApplicationForm: React.FC = () => {
           <SimpleGrid columns={2} columnGap={9} rowGap={9} mb="2em">
             <Field.Root required>
               <Field.Label {...fieldHeaderStyles}>
-                <Text>Address Line 1</Text>
+                Address Line 1
                 <Field.RequiredIndicator color="red" />
               </Field.Label>
               <Input
@@ -313,9 +303,7 @@ const PantryApplicationForm: React.FC = () => {
               />
             </Field.Root>
             <Field.Root>
-              <Field.Label {...fieldHeaderStyles}>
-                <Text>Address Line 2</Text>
-              </Field.Label>
+              <Field.Label {...fieldHeaderStyles}>Address Line 2</Field.Label>
               <Input
                 name="shipmentAddressLine2"
                 type="text"
@@ -324,7 +312,7 @@ const PantryApplicationForm: React.FC = () => {
             </Field.Root>
             <Field.Root required>
               <Field.Label {...fieldHeaderStyles}>
-                <Text>City/Town</Text>
+                City/Town
                 <Field.RequiredIndicator color="red" />
               </Field.Label>
               <Input
@@ -335,7 +323,7 @@ const PantryApplicationForm: React.FC = () => {
             </Field.Root>
             <Field.Root required>
               <Field.Label {...fieldHeaderStyles}>
-                <Text>State/Region/Province</Text>
+                State/Region/Province
                 <Field.RequiredIndicator color="red" />
               </Field.Label>
               <Input
@@ -346,7 +334,7 @@ const PantryApplicationForm: React.FC = () => {
             </Field.Root>
             <Field.Root required>
               <Field.Label {...fieldHeaderStyles}>
-                <Text>Zip/Post Code</Text>
+                Zip/Post Code
                 <Field.RequiredIndicator color="red" />
               </Field.Label>
               <Input
@@ -356,9 +344,7 @@ const PantryApplicationForm: React.FC = () => {
               />
             </Field.Root>
             <Field.Root>
-              <Field.Label {...fieldHeaderStyles}>
-                <Text>Country</Text>
-              </Field.Label>
+              <Field.Label {...fieldHeaderStyles}>Country</Field.Label>
               <Input
                 name="shipmentAddressCountry"
                 type="text"
@@ -368,11 +354,8 @@ const PantryApplicationForm: React.FC = () => {
           </SimpleGrid>
           <Field.Root required mb="2em">
             <Field.Label {...fieldHeaderStyles} mb=".5em">
-              <Text>
-                Does this address differ from your pantry's mailing address for
-                documents?
-              </Text>
-              <Field.RequiredIndicator color="red" />
+              Does this address differ from your pantry's mailing address for
+              documents? <Field.RequiredIndicator color="red" />
             </Field.Label>
             <RadioGroup.Root
               variant="solid"
@@ -392,7 +375,7 @@ const PantryApplicationForm: React.FC = () => {
                       />
                     </RadioGroup.ItemControl>
                     <RadioGroup.ItemText color="neutral.700" textStyle="p2">
-                      <Text>{value}</Text>
+                      {value}
                     </RadioGroup.ItemText>
                   </RadioGroup.Item>
                 ))}
@@ -401,10 +384,8 @@ const PantryApplicationForm: React.FC = () => {
           </Field.Root>
           <Field.Root required mb="2em">
             <Field.Label {...fieldHeaderStyles} mb=".5em">
-              <Text>
-                Would your pantry be able to accept food deliveries during
-                standard business hours Mon-Fri?{' '}
-              </Text>
+              Would your pantry be able to accept food deliveries during
+              standard business hours Mon-Fri?{' '}
               <Field.RequiredIndicator color="red" />
             </Field.Label>
             <RadioGroup.Root name="acceptFoodDeliveries" variant="solid">
@@ -419,7 +400,7 @@ const PantryApplicationForm: React.FC = () => {
                       />
                     </RadioGroup.ItemControl>
                     <RadioGroup.ItemText color="neutral.700" textStyle="p2">
-                      <Text>{value}</Text>
+                      {value}
                     </RadioGroup.ItemText>
                   </RadioGroup.Item>
                 ))}
@@ -428,7 +409,7 @@ const PantryApplicationForm: React.FC = () => {
           </Field.Root>
           <Field.Root mb="4em">
             <Field.Label {...fieldHeaderStyles}>
-              <Text>Please note any delivery window restrictions.</Text>
+              Please note any delivery window restrictions.
             </Field.Label>
             <Textarea
               name="deliveryWindowInstructions"
@@ -449,7 +430,7 @@ const PantryApplicationForm: React.FC = () => {
               <SimpleGrid columns={2} columnGap={9} rowGap={9} mb="4em">
                 <Field.Root required={differentMailingAddress}>
                   <Field.Label {...fieldHeaderStyles}>
-                    <Text>Address Line 1</Text>
+                    Address Line 1
                     <Field.RequiredIndicator color="red" />
                   </Field.Label>
                   <Input
@@ -460,7 +441,7 @@ const PantryApplicationForm: React.FC = () => {
                 </Field.Root>
                 <Field.Root>
                   <Field.Label {...fieldHeaderStyles}>
-                    <Text>Address Line 2</Text>
+                    Address Line 2
                   </Field.Label>
                   <Input
                     name="mailingAddressLine2"
@@ -470,7 +451,7 @@ const PantryApplicationForm: React.FC = () => {
                 </Field.Root>
                 <Field.Root required={differentMailingAddress}>
                   <Field.Label {...fieldHeaderStyles}>
-                    <Text>City/Town</Text>
+                    City/Town
                     <Field.RequiredIndicator color="red" />
                   </Field.Label>
                   <Input
@@ -481,7 +462,7 @@ const PantryApplicationForm: React.FC = () => {
                 </Field.Root>
                 <Field.Root required={differentMailingAddress}>
                   <Field.Label {...fieldHeaderStyles}>
-                    <Text>State/Region/Province</Text>
+                    State/Region/Province
                     <Field.RequiredIndicator color="red" />
                   </Field.Label>
                   <Input
@@ -492,7 +473,7 @@ const PantryApplicationForm: React.FC = () => {
                 </Field.Root>
                 <Field.Root required={differentMailingAddress}>
                   <Field.Label {...fieldHeaderStyles}>
-                    <Text>Zip/Post Code</Text>
+                    Zip/Post Code
                     <Field.RequiredIndicator color="red" />
                   </Field.Label>
                   <Input
@@ -502,9 +483,7 @@ const PantryApplicationForm: React.FC = () => {
                   />
                 </Field.Root>
                 <Field.Root>
-                  <Field.Label {...fieldHeaderStyles}>
-                    <Text>Country</Text>
-                  </Field.Label>
+                  <Field.Label {...fieldHeaderStyles}>Country</Field.Label>
                   <Input
                     name="mailingAddressCountry"
                     type="text"
@@ -529,10 +508,8 @@ const PantryApplicationForm: React.FC = () => {
           </Field.Root>
           <Field.Root required mb="2em" invalid={!allergenClients}>
             <Field.Label {...fieldHeaderStyles}>
-              <Text>
-                Approximately how many allergen-avoidant clients does your
-                pantry serve?
-              </Text>
+              Approximately how many allergen-avoidant clients does your pantry
+              serve?
               <Field.RequiredIndicator color="red" />
             </Field.Label>
             <NativeSelect.Root>
@@ -564,7 +541,7 @@ const PantryApplicationForm: React.FC = () => {
           {allergenClients === allergenClientsExactOption && (
             <Field.Root required mb="2em">
               <Field.Label {...fieldHeaderStyles}>
-                <Text>Please provide the exact number, if</Text>
+                Please provide the exact number, if known
                 <Field.RequiredIndicator color="red" />
               </Field.Label>
               <Input
@@ -579,22 +556,19 @@ const PantryApplicationForm: React.FC = () => {
           )}
           <Field.Root required mb="2em">
             <Field.Label {...fieldHeaderStyles}>
-              <Text>
-                Which food allergies or other medical dietary restrictions do
-                clients at your pantry report?
-              </Text>
+              Which food allergies or other medical dietary restrictions do
+              clients at your pantry report?
               <Field.RequiredIndicator color="red" />
             </Field.Label>
-            <Text>
-              {restrictions.map((value) => (
-                <input
-                  type="hidden"
-                  name="restrictions"
-                  key={value}
-                  value={value}
-                />
-              ))}
-            </Text>
+
+            {restrictions.map((value) => (
+              <input
+                type="hidden"
+                name="restrictions"
+                key={value}
+                value={value}
+              />
+            ))}
 
             <Menu.Root closeOnSelect={false}>
               <Menu.Trigger asChild>
@@ -671,33 +645,32 @@ const PantryApplicationForm: React.FC = () => {
                 </Menu.Content>
               </Menu.Positioner>
             </Menu.Root>
-            <Text>
-              {restrictions.length > 0 && (
-                <Flex wrap="wrap" mt={1} gap={2}>
-                  {restrictions.map((value) => (
-                    <Tag.Root
-                      key={value}
-                      bg="teal.100"
-                      p={2}
-                      border="1px solid"
-                      borderColor="teal.400"
-                    >
-                      <Tag.Label>{value}</Tag.Label>
-                      <Tag.EndElement ml={4}>
-                        <Tag.CloseTrigger
-                          onClick={() =>
-                            setRestrictions((prev) =>
-                              prev.filter((item) => item !== value),
-                            )
-                          }
-                          style={{ cursor: 'pointer' }}
-                        />
-                      </Tag.EndElement>
-                    </Tag.Root>
-                  ))}
-                </Flex>
-              )}
-            </Text>
+
+            {restrictions.length > 0 && (
+              <Flex wrap="wrap" mt={1} gap={2}>
+                {restrictions.map((value) => (
+                  <Tag.Root
+                    key={value}
+                    bg="teal.100"
+                    p={2}
+                    border="1px solid"
+                    borderColor="teal.400"
+                  >
+                    <Tag.Label>{value}</Tag.Label>
+                    <Tag.EndElement ml={4}>
+                      <Tag.CloseTrigger
+                        onClick={() =>
+                          setRestrictions((prev) =>
+                            prev.filter((item) => item !== value),
+                          )
+                        }
+                        style={{ cursor: 'pointer' }}
+                      />
+                    </Tag.EndElement>
+                  </Tag.Root>
+                ))}
+              </Flex>
+            )}
           </Field.Root>
 
           {restrictions.find((option) =>
@@ -710,7 +683,7 @@ const PantryApplicationForm: React.FC = () => {
               mb="2em"
             >
               <Field.Label {...fieldHeaderStyles}>
-                <Text>If you selected "Other," please specify:</Text>
+                If you selected "Other," please specify:
                 <Field.RequiredIndicator color="red" />
               </Field.Label>
               <Input maxW="20em" name="restrictionsOther" type="text" />
@@ -718,10 +691,8 @@ const PantryApplicationForm: React.FC = () => {
           )}
           <Field.Root required mb="2em">
             <Field.Label {...fieldHeaderStyles}>
-              <Text>
-                Would you be able to accept frozen donations that require
-                refrigeration or freezing?
-              </Text>
+              Would you be able to accept frozen donations that require
+              refrigeration or freezing?
               <Field.RequiredIndicator color="red" />
             </Field.Label>
             <RadioGroup.Root name="refrigeratedDonation" variant="solid">
@@ -740,7 +711,7 @@ const PantryApplicationForm: React.FC = () => {
                       />
                     </RadioGroup.ItemControl>
                     <RadioGroup.ItemText color="neutral.700" textStyle="p2">
-                      <Text>{value}</Text>
+                      {value}
                     </RadioGroup.ItemText>
                   </RadioGroup.Item>
                 ))}
@@ -750,10 +721,8 @@ const PantryApplicationForm: React.FC = () => {
 
           <Field.Root required mb="2em">
             <Field.Label {...fieldHeaderStyles}>
-              <Text>
-                Do you have a dedicated shelf or section of your pantry for
-                allergy-friendly items?
-              </Text>
+              Do you have a dedicated shelf or section of your pantry for
+              allergy-friendly items?
               <Field.RequiredIndicator color="red" />
             </Field.Label>
             <RadioGroup.Root name="dedicatedAllergyFriendly" variant="solid">
@@ -768,7 +737,7 @@ const PantryApplicationForm: React.FC = () => {
                       />
                     </RadioGroup.ItemControl>
                     <RadioGroup.ItemText color="neutral.700" textStyle="p2">
-                      <Text>{value}</Text>
+                      {value}
                     </RadioGroup.ItemText>
                   </RadioGroup.Item>
                 ))}
@@ -778,19 +747,14 @@ const PantryApplicationForm: React.FC = () => {
 
           <Field.Root required mb="2em">
             <Field.Label {...fieldHeaderStyles}>
-              <Text>
-                Are you willing to reserve our food shipments for
-                allergen-avoidant individuals?{' '}
-              </Text>
+              Are you willing to reserve our food shipments for
+              allergen-avoidant individuals?{' '}
               <Field.RequiredIndicator color="red" />
             </Field.Label>
             <Field.HelperText color="neutral.600" mb=".5em">
-              <Text>
-                For example, grouping allergen-friendly items on a separate
-                shelf or in separate bins and encouraging non-allergic clients
-                to save these items for clients who do not have other safe food
-                options.
-              </Text>
+              For example, grouping allergen-friendly items on a separate shelf
+              or in separate bins and encouraging non-allergic clients to save
+              these items for clients who do not have other safe food options.
             </Field.HelperText>
             <RadioGroup.Root
               name="reserveFoodForAllergic"
@@ -810,7 +774,7 @@ const PantryApplicationForm: React.FC = () => {
                       />
                     </RadioGroup.ItemControl>
                     <RadioGroup.ItemText color="neutral.700" textStyle="p2">
-                      <Text>{value}</Text>
+                      {value}
                     </RadioGroup.ItemText>
                   </RadioGroup.Item>
                 ))}
@@ -821,11 +785,9 @@ const PantryApplicationForm: React.FC = () => {
           {reserveFoodForAllergic === 'Yes' && (
             <Field.Root mb="2em">
               <Field.Label {...fieldHeaderStyles}>
-                <Text>
-                  How would you work to ensure that allergen-friendly foods are
-                  distributed to clients with food allergies or other adverse
-                  reactions to foods?
-                </Text>
+                How would you work to ensure that allergen-friendly foods are
+                distributed to clients with food allergies or other adverse
+                reactions to foods?
               </Field.Label>
               <Textarea
                 name="reservationExplanation"
@@ -838,7 +800,7 @@ const PantryApplicationForm: React.FC = () => {
           {reserveFoodForAllergic === 'Some' && (
             <Field.Root mb="2em">
               <Field.Label {...fieldHeaderStyles}>
-                <Text>Please explain why you selected "Some."</Text>
+                Please explain why you selected "Some."
               </Field.Label>
               <Textarea
                 name="reservationExplanation"
@@ -850,9 +812,7 @@ const PantryApplicationForm: React.FC = () => {
 
           <Field.Root mb="2em">
             <Field.Label {...fieldHeaderStyles}>
-              <Text>
-                How often do allergen-avoidant clients visit your food pantry?
-              </Text>
+              How often do allergen-avoidant clients visit your food pantry?
             </Field.Label>
             <NativeSelect.Root>
               <NativeSelect.Field
@@ -878,10 +838,8 @@ const PantryApplicationForm: React.FC = () => {
           </Field.Root>
           <Field.Root mb="2em">
             <Field.Label {...fieldHeaderStyles}>
-              <Text>
-                Are you confident in identifying the top 9 allergens in an
-                ingredient list?
-              </Text>
+              Are you confident in identifying the top 9 allergens in an
+              ingredient list?
             </Field.Label>
             <NativeSelect.Root>
               <NativeSelect.Field
@@ -903,18 +861,14 @@ const PantryApplicationForm: React.FC = () => {
               <NativeSelectIndicator />
             </NativeSelect.Root>
             <Field.HelperText color="neutral.600">
-              <Text>
-                The top 9 allergens are milk, egg, peanut, tree nuts, wheat,
-                soy, fish, shellfish, and sesame.
-              </Text>
+              The top 9 allergens are milk, egg, peanut, tree nuts, wheat, soy,
+              fish, shellfish, and sesame.
             </Field.HelperText>
           </Field.Root>
           <Field.Root mb="2em">
             <Field.Label {...fieldHeaderStyles}>
-              <Text>
-                Do you serve allergen-avoidant or food-allergic children at your
-                pantry?
-              </Text>
+              Do you serve allergen-avoidant or food-allergic children at your
+              pantry?
             </Field.Label>
             <NativeSelect.Root>
               <NativeSelect.Field
@@ -934,27 +888,24 @@ const PantryApplicationForm: React.FC = () => {
               <NativeSelectIndicator />
             </NativeSelect.Root>
             <Field.HelperText color="neutral.600">
-              <Text>
-                "Children" is defined as any individual under the age of 18
-                either living independently or as part of a household.
-              </Text>
+              "Children" is defined as any individual under the age of 18 either
+              living independently or as part of a household.
             </Field.HelperText>
           </Field.Root>
           <Field.Root required mb="2em">
             <Field.Label {...fieldHeaderStyles}>
-              <Text>What activities are you open to doing with SSF?</Text>
+              What activities are you open to doing with SSF?
               <Field.RequiredIndicator color="red" />
             </Field.Label>
-            <Text>
-              {activities.map((value) => (
-                <input
-                  type="hidden"
-                  name="activities"
-                  key={value}
-                  value={value}
-                />
-              ))}
-            </Text>
+
+            {activities.map((value) => (
+              <input
+                type="hidden"
+                name="activities"
+                key={value}
+                value={value}
+              />
+            ))}
 
             <Menu.Root closeOnSelect={false}>
               <Menu.Trigger asChild>
@@ -1031,50 +982,45 @@ const PantryApplicationForm: React.FC = () => {
                 </Menu.Content>
               </Menu.Positioner>
             </Menu.Root>
-            <Text>
-              {activities.length > 0 && (
-                <Flex wrap="wrap" mt={1} gap={2}>
-                  {activities.map((value) => (
-                    <Tag.Root
-                      key={value}
-                      bg="teal.100"
-                      p={2}
-                      border="1px solid"
-                      borderColor="teal.400"
-                    >
-                      <Tag.Label>{value}</Tag.Label>
-                      <Tag.EndElement ml={4}>
-                        <Tag.CloseTrigger
-                          onClick={() =>
-                            setActivities((prev) =>
-                              prev.filter((item) => item !== value),
-                            )
-                          }
-                          style={{ cursor: 'pointer' }}
-                        />
-                      </Tag.EndElement>
-                    </Tag.Root>
-                  ))}
-                </Flex>
-              )}
-            </Text>
+
+            {activities.length > 0 && (
+              <Flex wrap="wrap" mt={1} gap={2}>
+                {activities.map((value) => (
+                  <Tag.Root
+                    key={value}
+                    bg="teal.100"
+                    p={2}
+                    border="1px solid"
+                    borderColor="teal.400"
+                  >
+                    <Tag.Label>{value}</Tag.Label>
+                    <Tag.EndElement ml={4}>
+                      <Tag.CloseTrigger
+                        onClick={() =>
+                          setActivities((prev) =>
+                            prev.filter((item) => item !== value),
+                          )
+                        }
+                        style={{ cursor: 'pointer' }}
+                      />
+                    </Tag.EndElement>
+                  </Tag.Root>
+                ))}
+              </Flex>
+            )}
             <Field.HelperText color="neutral.600">
-              <Text>
-                Food donations are one part of being a partner pantry. The
-                following are additional ways to help us better support you!
-                Please select all that apply.
-              </Text>
+              Food donations are one part of being a partner pantry. The
+              following are additional ways to help us better support you!
+              Please select all that apply.
             </Field.HelperText>
           </Field.Root>
           <Field.Root required={activities.includes('Something else')} mb="2em">
             <Field.Label {...fieldHeaderStyles}>
-              <Text>
-                Please list any comments/concerns related to the previous
-                question.
-                {activities.includes('Something else') && (
-                  <Field.RequiredIndicator color="red" />
-                )}
-              </Text>
+              Please list any comments/concerns related to the previous
+              question.
+              {activities.includes('Something else') && (
+                <Field.RequiredIndicator color="red" />
+              )}
             </Field.Label>
             <Textarea
               name="activitiesComments"
@@ -1082,15 +1028,13 @@ const PantryApplicationForm: React.FC = () => {
               autoresize
             />
             <Field.HelperText color="neutral.600">
-              <Text>If you answered "Something Else," please elaborate.</Text>
+              If you answered "Something Else," please elaborate.
             </Field.HelperText>
           </Field.Root>
           <Field.Root required mb="2em">
             <Field.Label {...fieldHeaderStyles}>
-              <Text>
-                What types of allergen-free items, if any, do you currently have
-                in stock?
-              </Text>
+              What types of allergen-free items, if any, do you currently have
+              in stock?
               <Field.RequiredIndicator color="red" />
             </Field.Label>
             <Textarea
@@ -1099,19 +1043,14 @@ const PantryApplicationForm: React.FC = () => {
               autoresize
             />
             <Field.HelperText color="neutral.600">
-              <Text>
-                For example, gluten-free breads, sunflower seed butters,
-                nondairy beverages, etc.
-              </Text>
+              For example, gluten-free breads, sunflower seed butters, nondairy
+              beverages, etc.
             </Field.HelperText>
           </Field.Root>
           <Field.Root required mb="4em">
             <Field.Label {...fieldHeaderStyles}>
-              <Text>
-                Do allergen-avoidant clients at your pantry ever request a
-                greater variety of items or not have enough options? Please
-                explain.
-              </Text>
+              Do allergen-avoidant clients at your pantry ever request a greater
+              variety of items or not have enough options? Please explain.
               <Field.RequiredIndicator color="red" />
             </Field.Label>
             <Textarea
@@ -1125,9 +1064,7 @@ const PantryApplicationForm: React.FC = () => {
 
           <Field.Root mb="2em">
             <Field.Label {...fieldHeaderStyles}>
-              <Text>
-                Would you like to subscribe to our quarterly newsletter?
-              </Text>
+              Would you like to subscribe to our quarterly newsletter?
             </Field.Label>
             <RadioGroup.Root name="newsletterSubscription" variant="solid">
               <Stack>
@@ -1141,7 +1078,7 @@ const PantryApplicationForm: React.FC = () => {
                       />
                     </RadioGroup.ItemControl>
                     <RadioGroup.ItemText color="neutral.700" textStyle="p2">
-                      <Text>{value}</Text>
+                      {value}
                     </RadioGroup.ItemText>
                   </RadioGroup.Item>
                 ))}
@@ -1157,9 +1094,7 @@ const PantryApplicationForm: React.FC = () => {
                 _checked={{ bg: 'neutral.800' }}
               />
               <Checkbox.Label {...fieldHeaderStyles}>
-                <Text>
-                  By submitting this form, you agree to our Privacy Policy.{' '}
-                </Text>
+                By submitting this form, you agree to our Privacy Policy.{' '}
                 <Field.RequiredIndicator color="red" />
               </Checkbox.Label>
             </Checkbox.Root>
diff --git a/apps/frontend/src/components/forms/requestDetailsModal.tsx b/apps/frontend/src/components/forms/requestDetailsModal.tsx
index 640574a88..ce31fd4c4 100644
--- a/apps/frontend/src/components/forms/requestDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/requestDetailsModal.tsx
@@ -122,7 +122,7 @@ const RequestDetailsModal: React.FC<RequestDetailsModalProps> = ({
         <Dialog.Content maxW={650}>
           <Dialog.Header pb={0} mt={2}>
             <Dialog.Title fontSize="lg" fontWeight={600} fontFamily="inter">
-              <Text>Food Request #{request.requestId}</Text>
+              Food Request #{request.requestId}
             </Dialog.Title>
           </Dialog.Header>
           <Dialog.Body>
@@ -142,7 +142,7 @@ const RequestDetailsModal: React.FC<RequestDetailsModalProps> = ({
                   borderColor="neutral.100"
                   _selected={{ borderColor: 'neutral.700' }}
                 >
-                  <Text>Request Details</Text>
+                  Request Details
                 </Tabs.Trigger>
                 <Tabs.Trigger
                   textStyle="p2"
@@ -154,7 +154,7 @@ const RequestDetailsModal: React.FC<RequestDetailsModalProps> = ({
                   borderColor="neutral.100"
                   _selected={{ borderColor: 'neutral.700' }}
                 >
-                  <Text>Associated Orders</Text>
+                  Associated Orders
                 </Tabs.Trigger>
               </Tabs.List>
               <Tabs.Content value="requestDetails">
@@ -175,28 +175,27 @@ const RequestDetailsModal: React.FC<RequestDetailsModalProps> = ({
                       Food Type(s)
                     </Text>
                   </Field.Label>
-                  <Text>
-                    {selectedItems.length > 0 && (
-                      <Flex wrap="wrap" mt={3} gap={2}>
-                        {selectedItems.map((item) => (
-                          <Tag.Root
-                            key={item}
-                            size="xl"
-                            variant="solid"
-                            bg={'neutral.100'}
-                            color="neutral.800"
-                            borderRadius="4px"
-                            borderColor={'neutral.300'}
-                            borderWidth="1px"
-                            fontFamily="Inter"
-                            fontWeight={500}
-                          >
-                            <Tag.Label>{item}</Tag.Label>
-                          </Tag.Root>
-                        ))}
-                      </Flex>
-                    )}
-                  </Text>
+
+                  {selectedItems.length > 0 && (
+                    <Flex wrap="wrap" mt={3} gap={2}>
+                      {selectedItems.map((item) => (
+                        <Tag.Root
+                          key={item}
+                          size="xl"
+                          variant="solid"
+                          bg={'neutral.100'}
+                          color="neutral.800"
+                          borderRadius="4px"
+                          borderColor={'neutral.300'}
+                          borderWidth="1px"
+                          fontFamily="Inter"
+                          fontWeight={500}
+                        >
+                          <Tag.Label>{item}</Tag.Label>
+                        </Tag.Root>
+                      ))}
+                    </Flex>
+                  )}
                 </Field.Root>
 
                 <Field.Root mb={4}>
@@ -212,149 +211,148 @@ const RequestDetailsModal: React.FC<RequestDetailsModalProps> = ({
               </Tabs.Content>
 
               <Tabs.Content value="associatedOrders">
-                <Text>
-                  {!currentOrder && (
-                    <Text mt={5} textStyle="p2">
-                      {' '}
-                      No associated orders to display{' '}
-                    </Text>
-                  )}
-                  {currentOrder && (
-                    <Box
-                      borderWidth="1px"
-                      borderColor="neutral.100"
-                      borderRadius="5px"
-                      p={3}
-                      mt={6}
-                    >
-                      <Flex justify="space-between" align="center" mb={3}>
-                        <Text {...sectionTitleStyles}>
-                          Order {currentOrder.orderId} -
-                          <Text as="span" color="neutral.800" textStyle="p2">
-                            {' '}
-                            Fulfilled by {currentOrder.foodManufacturerName}
-                          </Text>
+                {!currentOrder && (
+                  <Text mt={5} textStyle="p2">
+                    {' '}
+                    No associated orders to display{' '}
+                  </Text>
+                )}
+                {currentOrder && (
+                  <Box
+                    borderWidth="1px"
+                    borderColor="neutral.100"
+                    borderRadius="5px"
+                    p={3}
+                    mt={6}
+                  >
+                    <Flex justify="space-between" align="center" mb={3}>
+                      <Text {...sectionTitleStyles}>
+                        Order {currentOrder.orderId} -
+                        <Text as="span" color="neutral.800" textStyle="p2">
+                          {' '}
+                          Fulfilled by {currentOrder.foodManufacturerName}
                         </Text>
-                        {currentOrder.status === OrderStatus.DELIVERED ? (
-                          <Badge
-                            {...badgeStyles}
-                            bgColor="#EAEDEF"
-                            color="#2B4E60"
-                          >
-                            Received
-                          </Badge>
-                        ) : (
-                          <Badge
-                            {...badgeStyles}
-                            bgColor="#FEECD1"
-                            color="#9C5D00"
+                      </Text>
+                      {currentOrder.status === OrderStatus.DELIVERED ? (
+                        <Badge
+                          {...badgeStyles}
+                          bgColor="#EAEDEF"
+                          color="#2B4E60"
+                        >
+                          Received
+                        </Badge>
+                      ) : (
+                        <Badge
+                          {...badgeStyles}
+                          bgColor="#FEECD1"
+                          color="#9C5D00"
+                        >
+                          In Progress
+                        </Badge>
+                      )}
+                    </Flex>
+                    {Object.entries(
+                      groupedOrderItemsByType as Record<
+                        string,
+                        OrderItemDetails[]
+                      >,
+                    ).map(([foodType, items]) => (
+                      <Box key={foodType} mb={4}>
+                        <Text {...sectionTitleStyles}>{foodType}</Text>
+                        {items.map((item) => (
+                          <Flex
+                            border="1px solid"
+                            borderColor="neutral.100"
+                            borderRadius="md"
+                            px={4}
+                            align="center"
+                            mt="2"
                           >
-                            In Progress
-                          </Badge>
-                        )}
-                      </Flex>
-                      {Object.entries(
-                        groupedOrderItemsByType as Record<
-                          string,
-                          OrderItemDetails[]
-                        >,
-                      ).map(([foodType, items]) => (
-                        <Box key={foodType} mb={4}>
-                          <Text {...sectionTitleStyles}>{foodType}</Text>
-                          {items.map((item) => (
-                            <Flex
-                              border="1px solid"
-                              borderColor="neutral.100"
-                              borderRadius="md"
-                              px={4}
-                              align="center"
-                              mt="2"
+                            <Text
+                              py={2}
+                              textStyle="p2"
+                              color="neutral.800"
+                              flex={1}
                             >
-                              <Text
-                                py={2}
-                                textStyle="p2"
-                                color="neutral.800"
-                                flex={1}
-                              >
-                                {item.name}
-                              </Text>
+                              {item.name}
+                            </Text>
 
-                              <Box
-                                alignSelf="stretch"
-                                borderLeft="1px solid"
-                                borderColor="neutral.100"
-                                mx={3}
-                              />
+                            <Box
+                              alignSelf="stretch"
+                              borderLeft="1px solid"
+                              borderColor="neutral.100"
+                              mx={3}
+                            />
 
-                              <Text
-                                minW={5}
-                                py={2}
-                                textStyle="p2"
-                                color="neutral.800"
-                              >
-                                {item.quantity}
-                              </Text>
-                            </Flex>
-                          ))}
-                        </Box>
-                      ))}
-                      <Text {...sectionTitleStyles} mt="3">
-                        Tracking
-                      </Text>
-                      <Text color="neutral.700" textStyle="p2" mt="3" mb="3">
-                        No tracking link available at this time
-                      </Text>
-                    </Box>
-                  )}
-                  {orderDetailsList.length > 0 && (
-                    <Flex justify="center" mt={7}>
-                      <Pagination.Root
-                        count={orderDetailsList.length}
-                        pageSize={1}
-                        page={currentPage}
-                        onChange={(page: number) => setCurrentPage(page)}
-                      >
-                        <ButtonGroup variant="outline" size="sm">
-                          <Pagination.PrevTrigger asChild>
-                            <IconButton
-                              variant="ghost"
-                              onClick={() =>
-                                setCurrentPage((prev) => Math.max(prev - 1, 1))
-                              }
+                            <Text
+                              minW={5}
+                              py={2}
+                              textStyle="p2"
+                              color="neutral.800"
                             >
-                              <ChevronLeft />
-                            </IconButton>
-                          </Pagination.PrevTrigger>
+                              {item.quantity}
+                            </Text>
+                          </Flex>
+                        ))}
+                      </Box>
+                    ))}
+                    <Text {...sectionTitleStyles} mt="3">
+                      Tracking
+                    </Text>
+                    <Text color="neutral.700" textStyle="p2" mt="3" mb="3">
+                      No tracking link available at this time
+                    </Text>
+                  </Box>
+                )}
 
-                          <Pagination.Items
-                            render={(page) => (
-                              <IconButton
-                                variant="outline"
-                                _selected={{ borderColor: 'neutral.800' }}
-                                onClick={() => setCurrentPage(page.value)}
-                              >
-                                {page.value}
-                              </IconButton>
-                            )}
-                          />
+                {orderDetailsList.length > 0 && (
+                  <Flex justify="center" mt={7}>
+                    <Pagination.Root
+                      count={orderDetailsList.length}
+                      pageSize={1}
+                      page={currentPage}
+                      onChange={(page: number) => setCurrentPage(page)}
+                    >
+                      <ButtonGroup variant="outline" size="sm">
+                        <Pagination.PrevTrigger asChild>
+                          <IconButton
+                            variant="ghost"
+                            onClick={() =>
+                              setCurrentPage((prev) => Math.max(prev - 1, 1))
+                            }
+                          >
+                            <ChevronLeft />
+                          </IconButton>
+                        </Pagination.PrevTrigger>
 
-                          <Pagination.NextTrigger asChild>
+                        <Pagination.Items
+                          render={(page) => (
                             <IconButton
-                              variant="ghost"
-                              onClick={() =>
-                                setCurrentPage((prev) =>
-                                  Math.min(prev + 1, orderDetailsList.length),
-                                )
-                              }
+                              variant="outline"
+                              _selected={{ borderColor: 'neutral.800' }}
+                              onClick={() => setCurrentPage(page.value)}
                             >
-                              <ChevronRight />
+                              {page.value}
                             </IconButton>
-                          </Pagination.NextTrigger>
-                        </ButtonGroup>
-                      </Pagination.Root>
-                    </Flex>
-                  )}
-                </Text>
+                          )}
+                        />
+
+                        <Pagination.NextTrigger asChild>
+                          <IconButton
+                            variant="ghost"
+                            onClick={() =>
+                              setCurrentPage((prev) =>
+                                Math.min(prev + 1, orderDetailsList.length),
+                              )
+                            }
+                          >
+                            <ChevronRight />
+                          </IconButton>
+                        </Pagination.NextTrigger>
+                      </ButtonGroup>
+                    </Pagination.Root>
+                  </Flex>
+                )}
               </Tabs.Content>
             </Tabs.Root>
           </Dialog.Body>
diff --git a/apps/frontend/src/components/forms/requestFormModal.tsx b/apps/frontend/src/components/forms/requestFormModal.tsx
index d8a7cbc19..f54e625ed 100644
--- a/apps/frontend/src/components/forms/requestFormModal.tsx
+++ b/apps/frontend/src/components/forms/requestFormModal.tsx
@@ -59,11 +59,7 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
         <Dialog.Content maxW={650}>
           <Dialog.Header pb={0} mt={2}>
             <Dialog.Title fontSize="lg" fontWeight={700} fontFamily="inter">
-              <Text>
-                {previousRequest
-                  ? 'Resubmit Latest Request'
-                  : 'New Food Request'}
-              </Text>
+              {previousRequest ? 'Resubmit Latest Request' : 'New Food Request'}
             </Dialog.Title>
           </Dialog.Header>
           <Dialog.Body>
@@ -135,7 +131,7 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
                             pl={1}
                             mt={idx === 0 ? 0 : 2}
                           >
-                            <Text>{option}</Text>
+                            {option}
                           </Menu.RadioItem>
                         ))}
                       </Menu.RadioItemGroup>
@@ -150,16 +146,16 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
                     Food Type(s)
                   </Text>
                 </Field.Label>
-                <Text>
-                  {selectedItems.map((item) => (
-                    <input
-                      key={item}
-                      type="hidden"
-                      name="restrictions"
-                      value={item}
-                    />
-                  ))}
-                </Text>
+
+                {selectedItems.map((item) => (
+                  <input
+                    key={item}
+                    type="hidden"
+                    name="restrictions"
+                    value={item}
+                  />
+                ))}
+
                 <Menu.Root closeOnSelect={false}>
                   <Menu.Trigger asChild>
                     <Button
@@ -223,39 +219,38 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
                     </Menu.Content>
                   </Menu.Positioner>
                 </Menu.Root>
-                <Text>
-                  {selectedItems.length > 0 && (
-                    <Flex wrap="wrap" mt={1} gap={2}>
-                      {selectedItems.map((item) => (
-                        <Tag.Root
-                          key={item}
-                          size="xl"
-                          variant="solid"
-                          bg={'neutral.100'}
-                          color="neutral.800"
-                          borderRadius="4px"
-                          borderColor={'neutral.300'}
-                          borderWidth="1px"
-                          fontFamily="Inter"
-                          fontWeight={500}
-                        >
-                          <Tag.Label>{item}</Tag.Label>
 
-                          <Tag.EndElement>
-                            <Tag.CloseTrigger
-                              cursor="pointer"
-                              onClick={() =>
-                                setSelectedItems((prev) =>
-                                  prev.filter((i) => i !== item),
-                                )
-                              }
-                            />
-                          </Tag.EndElement>
-                        </Tag.Root>
-                      ))}
-                    </Flex>
-                  )}
-                </Text>
+                {selectedItems.length > 0 && (
+                  <Flex wrap="wrap" mt={1} gap={2}>
+                    {selectedItems.map((item) => (
+                      <Tag.Root
+                        key={item}
+                        size="xl"
+                        variant="solid"
+                        bg={'neutral.100'}
+                        color="neutral.800"
+                        borderRadius="4px"
+                        borderColor={'neutral.300'}
+                        borderWidth="1px"
+                        fontFamily="Inter"
+                        fontWeight={500}
+                      >
+                        <Tag.Label>{item}</Tag.Label>
+
+                        <Tag.EndElement>
+                          <Tag.CloseTrigger
+                            cursor="pointer"
+                            onClick={() =>
+                              setSelectedItems((prev) =>
+                                prev.filter((i) => i !== item),
+                              )
+                            }
+                          />
+                        </Tag.EndElement>
+                      </Tag.Root>
+                    ))}
+                  </Flex>
+                )}
               </Field.Root>
 
               <Field.Root mb={4}>
@@ -290,7 +285,7 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
                 />
 
                 <Field.HelperText color="neutral.600">
-                  <Text>Max 250 words</Text>
+                  Max 250 words
                 </Field.HelperText>
               </Field.Root>
 
diff --git a/apps/frontend/src/containers/adminDonation.tsx b/apps/frontend/src/containers/adminDonation.tsx
index b3f8eb45c..c444803bb 100644
--- a/apps/frontend/src/containers/adminDonation.tsx
+++ b/apps/frontend/src/containers/adminDonation.tsx
@@ -156,9 +156,7 @@ const AdminDonation: React.FC = () => {
                     >
                       <Checkbox.HiddenInput />
                       <Checkbox.Control borderRadius="sm" />
-                      <Checkbox.Label>
-                        <span>{manufacturer}</span>
-                      </Checkbox.Label>
+                      <Checkbox.Label>{manufacturer}</Checkbox.Label>
                     </Checkbox.Root>
                   ))}
                 </VStack>
diff --git a/apps/frontend/src/containers/adminOrderManagement.tsx b/apps/frontend/src/containers/adminOrderManagement.tsx
index 5a421b1a7..6edc92894 100644
--- a/apps/frontend/src/containers/adminOrderManagement.tsx
+++ b/apps/frontend/src/containers/adminOrderManagement.tsx
@@ -463,9 +463,7 @@ const OrderStatusSection: React.FC<OrderStatusSectionProps> = ({
                           >
                             <Checkbox.HiddenInput />
                             <Checkbox.Control borderRadius="sm" />
-                            <Checkbox.Label>
-                              <span>{pantry}</span>
-                            </Checkbox.Label>
+                            <Checkbox.Label>{pantry}</Checkbox.Label>
                           </Checkbox.Root>
                         ))}
                     </VStack>
diff --git a/apps/frontend/src/containers/pantryDashboard.tsx b/apps/frontend/src/containers/pantryDashboard.tsx
index 8f8f0f50f..39e98346a 100644
--- a/apps/frontend/src/containers/pantryDashboard.tsx
+++ b/apps/frontend/src/containers/pantryDashboard.tsx
@@ -61,7 +61,7 @@ const PantryDashboard: React.FC = () => {
           transform="translateY(-50%)"
         >
           <Menu.Root>
-            <Menu.Trigger>
+            <Menu.Trigger asChild>
               <Button
                 bg="transparent"
                 size="lg"
@@ -80,7 +80,7 @@ const PantryDashboard: React.FC = () => {
                     _hover={{ textDecoration: 'none', cursor: 'pointer' }}
                     textDecoration="none"
                   >
-                    <Text>Profile</Text>
+                    Profile
                   </Menu.Item>
                   <Menu.Item
                     as={Link}
@@ -88,7 +88,7 @@ const PantryDashboard: React.FC = () => {
                     _hover={{ textDecoration: 'none', cursor: 'pointer' }}
                     textDecoration="none"
                   >
-                    <Text>Request Form</Text>
+                    Request Form
                   </Menu.Item>
                   <Menu.Item
                     as={Link}
@@ -96,7 +96,7 @@ const PantryDashboard: React.FC = () => {
                     _hover={{ textDecoration: 'none', cursor: 'pointer' }}
                     textDecoration="none"
                   >
-                    <Text>Sign out</Text>
+                    Sign out
                   </Menu.Item>
                 </Menu.Content>
               </Menu.Positioner>
@@ -123,6 +123,7 @@ const PantryDashboard: React.FC = () => {
       </Card.Root>
 
       <Button
+        asChild
         mt="6"
         _hover={{ textDecoration: 'none' }}
         _focus={{ textDecoration: 'none' }}