From 44f8f6396cc9bbe440f8d2bd5128b43fc8957770 Mon Sep 17 00:00:00 2001
From: Nathan Curtis <nathan.curtis@gmail.com>
Date: Mon, 3 Jun 2024 12:56:43 -0700
Subject: [PATCH] Address test failures.

---
 .../__snapshots__/Accordion.stories.storyshot |    6 +-
 .../Breadcrumbs.stories.storyshot             |    6 +-
 .../__snapshots__/Button.stories.storyshot    |   34 +-
 .../ExpandedCard.stories.storyshot            |    2 +-
 .../FundingCard.stories.storyshot             |   22 +-
 .../GenericCard.stories.storyshot             |    8 +-
 .../GoalProgressCard.stories.storyshot        |   83 +-
 .../GoalProgressCardItem.stories.storyshot    |    6 +-
 .../SmallGoalProgressCard.stories.storyshot   |    4 +-
 ...pcomingOpportunitiesCard.stories.storyshot |    4 +-
 .../UserProfileCard.stories.storyshot         |   18 +-
 .../EmptyState.stories.storyshot              |    2 +-
 .../ButtonField.stories.storyshot             |    4 +-
 .../FieldsExpander.stories.storyshot          |    8 +-
 .../ProgressField.stories.storyshot           |    4 +-
 .../SelectImageListField.stories.storyshot    |    4 +-
 .../__snapshots__/TextField.stories.storyshot |    4 +-
 .../FilePreviewCard.stories.storyshot         |    4 +-
 .../ImageGallery.stories.storyshot            |  136 +-
 .../ImageGalleryItem.stories.storyshot        |   14 +-
 .../ImageWithChildren.stories.storyshot       |    6 +-
 .../AutoCompleteInput.stories.storyshot       |   12 +-
 .../BooleanInput.stories.storyshot            |   16 +-
 .../__snapshots__/Checkbox.stories.storyshot  |   24 +-
 .../ConditionalInput.stories.storyshot        |   16 +-
 .../__snapshots__/DataTable.stories.storyshot |    6 +-
 .../__snapshots__/Dropdown.stories.storyshot  |  126 +-
 .../__snapshots__/FileInput.stories.storyshot |  119 +-
 .../__snapshots__/Input.stories.storyshot     |   34 +-
 .../InputTable.stories.storyshot              |   15 +-
 .../LanguagesDropdown.stories.storyshot       |    4 +-
 .../__snapshots__/Radio.stories.storyshot     |    4 +-
 .../RadioGroup.stories.storyshot              |   14 +-
 .../__snapshots__/Select.stories.storyshot    |   42 +-
 .../SelectImage.stories.storyshot             |   42 +-
 .../TreeSpeciesInput.stories.storyshot        |   35 +-
 .../__snapshots__/TextArea.stories.storyshot  |   10 +-
 .../AlternatingSection.stories.storyshot      |    8 +-
 .../TwoByOneSection.stories.storyshot         |    4 +-
 .../UpcomingOpportunities.stories.storyshot   |   12 +-
 src/components/elements/Menu/Menu.stories.tsx |    4 +-
 .../__snapshots__/Paper.stories.storyshot     |    2 +-
 .../Pill/__snapshots__/Pill.stories.storyshot |   14 +-
 .../LinerProgressbar.stories.storyshot        |   20 +-
 .../SectionBody.stories.storyshot             |    8 +-
 .../SectionHeader.stories.storyshot           |    4 +-
 .../__snapshots__/StatusBar.stories.storyshot |  100 +-
 .../__snapshots__/Table.stories.storyshot     | 7248 +++++++++++++++--
 .../__snapshots__/Tabs.stories.storyshot      |   26 +-
 .../SecondaryTabs.stories.storyshot           |   28 +-
 .../__snapshots__/Toast.stories.storyshot     |    8 +-
 .../ActionTracker.stories.storyshot           |   54 +-
 .../ActionTrackerCardRow.stories.storyshot    |    8 +-
 .../ApplicationsCard.stories.storyshot        |   52 +-
 .../HeroBanner.stories.storyshot              |    4 +-
 .../OverviewBanner.stories.storyshot          |    2 +-
 .../BannerCard.stories.storyshot              |    6 +-
 .../BuildStrongerProfile.stories.storyshot    |    8 +-
 .../Confirmation.stories.storyshot            |    2 +-
 .../CookieBanner.stories.storyshot            |    6 +-
 .../IconSocial.stories.storyshot              |   20 +-
 .../Modal/ModalContent/MockedData.ts          |    4 +-
 .../__snapshots__/FormModal.stories.storyshot |    4 +-
 .../__snapshots__/Modal.stories.storyshot     |    8 +-
 .../__snapshots__/PageBody.stories.storyshot  |   10 +-
 .../PageBreadcrumbs.stories.storyshot         |    8 +-
 .../__snapshots__/PageCard.stories.storyshot  |    6 +-
 .../PageColumn.stories.storyshot              |   12 +-
 .../PageHeader.stories.storyshot              |    6 +-
 .../__snapshots__/PageRow.stories.storyshot   |   10 +-
 .../PerPageSelector.stories.storyshot         |    8 +-
 .../PasswordStrength.stories.storyshot        |   84 +-
 .../__snapshots__/TaskList.stories.storyshot  |   65 +-
 .../__snapshots__/TextRow.stories.storyshot   |    4 +-
 .../WizardForm.stories.storyshot              |  768 +-
 .../BackgroundLayout.stories.storyshot        |    2 +-
 .../__snapshots__/Container.stories.storyshot |    2 +-
 .../MainLayout.stories.storyshot              |   36 +-
 .../__snapshots__/Navbar.stories.storyshot    |   64 +-
 .../useGetCustomFormSteps.stories.storyshot   | 1402 ++--
 80 files changed, 8507 insertions(+), 2542 deletions(-)

diff --git a/src/components/elements/Accordion/__snapshots__/Accordion.stories.storyshot b/src/components/elements/Accordion/__snapshots__/Accordion.stories.storyshot
index 2a37a0363..721d10828 100644
--- a/src/components/elements/Accordion/__snapshots__/Accordion.stories.storyshot
+++ b/src/components/elements/Accordion/__snapshots__/Accordion.stories.storyshot
@@ -2,7 +2,7 @@
 
 exports[`Storyshots Components/Elements/Accordion Default 1`] = `
 <div
-  className="rounded-lg border-2 border-neutral-100 shadow undefined"
+  className="undefined rounded-lg border-2 border-neutral-100 shadow"
   data-headlessui-state=""
 >
   <button
@@ -39,7 +39,7 @@ exports[`Storyshots Components/Elements/Accordion Default 1`] = `
 
 exports[`Storyshots Components/Elements/Accordion Secondary 1`] = `
 <div
-  className="rounded-lg border-2 border-neutral-100 shadow undefined rounded-lg"
+  className="undefined rounded-lg border-2 border-neutral-100 shadow"
   data-headlessui-state=""
 >
   <button
@@ -76,7 +76,7 @@ exports[`Storyshots Components/Elements/Accordion Secondary 1`] = `
 
 exports[`Storyshots Components/Elements/Accordion With CTA 1`] = `
 <div
-  className="rounded-lg border-2 border-neutral-100 shadow undefined"
+  className="undefined rounded-lg border-2 border-neutral-100 shadow"
   data-headlessui-state=""
 >
   <button
diff --git a/src/components/elements/Breadcrumbs/__snapshots__/Breadcrumbs.stories.storyshot b/src/components/elements/Breadcrumbs/__snapshots__/Breadcrumbs.stories.storyshot
index 56d176596..e162542c1 100644
--- a/src/components/elements/Breadcrumbs/__snapshots__/Breadcrumbs.stories.storyshot
+++ b/src/components/elements/Breadcrumbs/__snapshots__/Breadcrumbs.stories.storyshot
@@ -14,7 +14,7 @@ exports[`Storyshots Components/Elements/Breadcrumbs Default 1`] = `
       onTouchStart={[Function]}
     >
       <p
-        className="text-neutral-800 hover:underline line-clamp-1 text-bold-body-300"
+        className="text-darkCustom opacity-60 hover:underline line-clamp-1 text-14-bold"
         data-testid="txt"
         title="My Projects"
       >
@@ -36,7 +36,7 @@ exports[`Storyshots Components/Elements/Breadcrumbs Default 1`] = `
       onTouchStart={[Function]}
     >
       <p
-        className="text-neutral-800 hover:underline line-clamp-1 text-bold-body-300"
+        className="text-darkCustom opacity-60 hover:underline line-clamp-1 text-14-bold"
         data-testid="txt"
         title="India Tree restoration project"
       >
@@ -52,7 +52,7 @@ exports[`Storyshots Components/Elements/Breadcrumbs Default 1`] = `
       }
     />
     <p
-      className="text-black line-clamp-1 text-bold-body-300"
+      className="text-darkCustom line-clamp-1 text-14-bold"
       data-testid="txt"
       title="Taj Mahal"
     >
diff --git a/src/components/elements/Button/__snapshots__/Button.stories.storyshot b/src/components/elements/Button/__snapshots__/Button.stories.storyshot
index 0ef0cd23d..654b3e4d2 100644
--- a/src/components/elements/Button/__snapshots__/Button.stories.storyshot
+++ b/src/components/elements/Button/__snapshots__/Button.stories.storyshot
@@ -2,12 +2,12 @@
 
 exports[`Storyshots Components/Elements/Buttons Disabled Link 1`] = `
 <button
-  className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+  className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
   disabled={true}
   href="/"
 >
   <span
-    className="text-bold-caption-200 pt-0.75 leading-3"
+    className="flex items-center text-bold-caption-200"
   >
     Disabled Link
   </span>
@@ -16,10 +16,10 @@ exports[`Storyshots Components/Elements/Buttons Disabled Link 1`] = `
 
 exports[`Storyshots Components/Elements/Buttons Primary 1`] = `
 <button
-  className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+  className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
 >
   <span
-    className="text-bold-caption-200 pt-0.75 leading-3"
+    className="flex items-center text-bold-caption-200"
   >
     Primary
   </span>
@@ -28,11 +28,11 @@ exports[`Storyshots Components/Elements/Buttons Primary 1`] = `
 
 exports[`Storyshots Components/Elements/Buttons Primary Disabled 1`] = `
 <button
-  className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+  className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
   disabled={true}
 >
   <span
-    className="text-bold-caption-200 pt-0.75 leading-3"
+    className="flex items-center text-bold-caption-200"
   >
     Primary
   </span>
@@ -41,7 +41,7 @@ exports[`Storyshots Components/Elements/Buttons Primary Disabled 1`] = `
 
 exports[`Storyshots Components/Elements/Buttons Primary Icon 1`] = `
 <button
-  className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+  className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
 >
   <div
     style={
@@ -52,7 +52,7 @@ exports[`Storyshots Components/Elements/Buttons Primary Icon 1`] = `
     }
   />
   <span
-    className="text-bold-caption-200 pt-0.75 leading-3"
+    className="flex items-center text-bold-caption-200"
   >
     Primary
   </span>
@@ -61,11 +61,11 @@ exports[`Storyshots Components/Elements/Buttons Primary Icon 1`] = `
 
 exports[`Storyshots Components/Elements/Buttons Primary Link 1`] = `
 <a
-  className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+  className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
   href="/"
 >
   <span
-    className="text-bold-caption-200 pt-0.75 leading-3"
+    className="flex items-center text-bold-caption-200"
   >
     Primary Link
   </span>
@@ -74,10 +74,10 @@ exports[`Storyshots Components/Elements/Buttons Primary Link 1`] = `
 
 exports[`Storyshots Components/Elements/Buttons Secondary 1`] = `
 <button
-  className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-1.75 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+  className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-[10.5px] rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
 >
   <span
-    className="text-bold-caption-200 pt-0.75 leading-3"
+    className="flex items-center text-bold-caption-200"
   >
     Secondary
   </span>
@@ -86,11 +86,11 @@ exports[`Storyshots Components/Elements/Buttons Secondary 1`] = `
 
 exports[`Storyshots Components/Elements/Buttons Secondary Disabled 1`] = `
 <button
-  className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-1.75 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+  className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-[10.5px] rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
   disabled={true}
 >
   <span
-    className="text-bold-caption-200 pt-0.75 leading-3"
+    className="flex items-center text-bold-caption-200"
   >
     Secondary
   </span>
@@ -99,7 +99,7 @@ exports[`Storyshots Components/Elements/Buttons Secondary Disabled 1`] = `
 
 exports[`Storyshots Components/Elements/Buttons Secondary Icon 1`] = `
 <button
-  className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-1.75 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+  className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-[10.5px] rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
 >
   <div
     style={
@@ -110,7 +110,7 @@ exports[`Storyshots Components/Elements/Buttons Secondary Icon 1`] = `
     }
   />
   <span
-    className="text-bold-caption-200 pt-0.75 leading-3"
+    className="flex items-center text-bold-caption-200"
   >
     Secondary
   </span>
@@ -122,7 +122,7 @@ exports[`Storyshots Components/Elements/Buttons Text 1`] = `
   className="flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
 >
   <span
-    className="text-bold-body-300"
+    className="text-12-bold"
   >
     Text
   </span>
diff --git a/src/components/elements/Cards/ExpandedCard/__snapshots__/ExpandedCard.stories.storyshot b/src/components/elements/Cards/ExpandedCard/__snapshots__/ExpandedCard.stories.storyshot
index 6affd7b58..c64987e3b 100644
--- a/src/components/elements/Cards/ExpandedCard/__snapshots__/ExpandedCard.stories.storyshot
+++ b/src/components/elements/Cards/ExpandedCard/__snapshots__/ExpandedCard.stories.storyshot
@@ -2,7 +2,7 @@
 
 exports[`Storyshots Components/Elements/Cards/ExpandedCard Default 1`] = `
 <div
-  className="rounded-lg bg-primary-50"
+  className="rounded-lg bg-neutral-40"
 >
   <div
     className="flex items-center gap-4 px-5 py-4"
diff --git a/src/components/elements/Cards/FundingCard/__snapshots__/FundingCard.stories.storyshot b/src/components/elements/Cards/FundingCard/__snapshots__/FundingCard.stories.storyshot
index 5ea8b0618..3a835078c 100644
--- a/src/components/elements/Cards/FundingCard/__snapshots__/FundingCard.stories.storyshot
+++ b/src/components/elements/Cards/FundingCard/__snapshots__/FundingCard.stories.storyshot
@@ -5,13 +5,13 @@ exports[`Storyshots Components/Elements/Cards/FundingCard Default 1`] = `
   className="w-[378px]"
 >
   <div
-    className="flex h-[420px] w-full flex-col rounded-lg border border-neutral-100 border-opacity-25 bg-white p-6 shadow"
+    className="flex h-[420px] w-full flex-col overflow-auto rounded-lg border border-neutral-100 border-opacity-25 bg-white p-6 shadow wide:h-[500px]"
   >
     <div
       className="bg-secondary-200 mb-4 w-fit flex items-center justify-center rounded-2xl py-0.5 px-3 first-letter:uppercase"
     >
       <p
-        className="text-black mt-[3px] text-bold-caption-200"
+        className="text-black flex h-fit items-center text-bold-caption-200"
         data-testid="txt"
       >
         Receiving Applications
@@ -24,7 +24,7 @@ exports[`Storyshots Components/Elements/Cards/FundingCard Default 1`] = `
       TerraFund for AFR100: Landscapes 
     </p>
     <div
-      className="flex items-center gap-2 border-b border-neutral-200 py-2"
+      className="flex items-center gap-2 py-2"
     >
       <div
         style={
@@ -57,7 +57,7 @@ exports[`Storyshots Components/Elements/Cards/FundingCard Default 1`] = `
       className="mt-4 flex flex-col gap-3 sm:flex-row"
     >
       <a
-        className="w-full flex-1 bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-1.75 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+        className="h-fit bg-white py-4 rounded-lg flex items-center justify-center gap-1.5 tracking-wide w-fit-content w-full flex-1"
         disabled={false}
         href="#"
         onClick={[Function]}
@@ -65,22 +65,14 @@ exports[`Storyshots Components/Elements/Cards/FundingCard Default 1`] = `
         onTouchStart={[Function]}
         target="_blank"
       >
-        <div
-          style={
-            Object {
-              "height": 14,
-              "width": 14,
-            }
-          }
-        />
         <span
-          className="text-bold-caption-200 pt-0.75 leading-3"
+          className="flex items-center font-inter font-bold text-16 leading-snug tracking-tighter uppercase text-primary"
         >
           Read More
         </span>
       </a>
       <a
-        className="w-full flex-1 bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+        className="h-fit py-4 bg-primary-200 rounded-lg flex items-center justify-center gap-1.5 tracking-wide w-fit-content w-full flex-1"
         disabled={false}
         href="#"
         onClick={[Function]}
@@ -88,7 +80,7 @@ exports[`Storyshots Components/Elements/Cards/FundingCard Default 1`] = `
         onTouchStart={[Function]}
       >
         <span
-          className="text-bold-caption-200 pt-0.75 leading-3"
+          className="flex items-center font-inter font-bold text-16 leading-snug tracking-tighter uppercase text-primary"
         >
           Apply Now
         </span>
diff --git a/src/components/elements/Cards/Generic/__snapshots__/GenericCard.stories.storyshot b/src/components/elements/Cards/Generic/__snapshots__/GenericCard.stories.storyshot
index e99b11515..68669f0a6 100644
--- a/src/components/elements/Cards/Generic/__snapshots__/GenericCard.stories.storyshot
+++ b/src/components/elements/Cards/Generic/__snapshots__/GenericCard.stories.storyshot
@@ -5,7 +5,7 @@ exports[`Storyshots Components/Elements/Cards/GenericCard Default 1`] = `
   className="h-[530px] max-w-xs flex w-full flex-col overflow-hidden rounded-lg border border-neutral-500 border-opacity-25 bg-white"
 >
   <div
-    className="relative flex aspect-[5/3] min-h-[180px] items-start justify-between bg-cover bg-center bg-no-repeat p-4"
+    className="relative flex aspect-[5/3] min-h-[180px] items-start justify-between bg-cover bg-center bg-no-repeat p-4 wide:p-6"
     style={
       Object {
         "backgroundImage": "url(static/media/public/images/green-leaves.webp)",
@@ -31,7 +31,7 @@ exports[`Storyshots Components/Elements/Cards/GenericCard Default 1`] = `
         className="flex items-center justify-center rounded-2xl py-0.5 px-3 first-letter:uppercase"
       >
         <p
-          className="text-black mt-[3px] text-bold-caption-200"
+          className="text-black flex h-fit items-center text-bold-caption-200"
           data-testid="txt"
         >
           Completed
@@ -111,10 +111,10 @@ exports[`Storyshots Components/Elements/Cards/GenericCard Default 1`] = `
     className="px-6 py-4.5"
   >
     <button
-      className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-1.75 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-full justify-center"
+      className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-[10.5px] rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center gap-1.5 tracking-wide w-full justify-center"
     >
       <span
-        className="text-bold-caption-200 pt-0.75 leading-3"
+        className="flex items-center text-bold-caption-200"
       >
         View
       </span>
diff --git a/src/components/elements/Cards/GoalProgressCard/__snapshots__/GoalProgressCard.stories.storyshot b/src/components/elements/Cards/GoalProgressCard/__snapshots__/GoalProgressCard.stories.storyshot
index 9a6659ec3..9062439f5 100644
--- a/src/components/elements/Cards/GoalProgressCard/__snapshots__/GoalProgressCard.stories.storyshot
+++ b/src/components/elements/Cards/GoalProgressCard/__snapshots__/GoalProgressCard.stories.storyshot
@@ -5,29 +5,34 @@ exports[`Storyshots Components/Elements/Cards/GoalProgressCard/Card No Progress
   className="h-44 p-4"
 >
   <div
-    className="flex items-center rounded-lg bg-primary-100 px-4 py-3 shadow"
+    className="flex items-center rounded-lg"
   >
     <div
       className="mr-6 w-full"
     >
       <p
-        className="text-bold-caption-100"
+        className="mb-1 w-full text-16-light"
         data-testid="txt"
       >
         Hectors Restored
       </p>
       <p
-        className="text-bold-headline-1000"
+        className="flex w-full items-baseline text-24-bold"
         data-testid="txt"
       >
         150
+         
+        <p
+          className="text-16-light"
+          data-testid="txt"
+        />
       </p>
       <div
-        className="h-[9px] w-full bg-neutral-200 bg-primary-200 opacity-0"
+        className="h-[9px] w-full rounded-full bg-neutral-200 mt-2 bg-primary-200 opacity-0"
         role="progressbar"
       >
         <div
-          className="h-full bg-primary transition-all duration-300"
+          className="h-full bg-primary rounded-full transition-all duration-300"
           style={
             Object {
               "width": "0%",
@@ -45,29 +50,41 @@ exports[`Storyshots Components/Elements/Cards/GoalProgressCard/Card Progress And
   className="h-44 p-4"
 >
   <div
-    className="flex items-center rounded-lg bg-primary-100 px-4 py-3 shadow"
+    className="flex items-center rounded-lg"
   >
     <div
       className="mr-6 w-full"
     >
       <p
-        className="text-bold-caption-100"
+        className="mb-1 w-full text-16-light"
         data-testid="txt"
       >
         Trees Restored
       </p>
       <p
-        className="text-bold-headline-1000"
+        className="flex w-full items-baseline text-24-bold"
         data-testid="txt"
       >
-        600/732
+        600
+         
+        <p
+          className="text-16-light"
+          data-testid="txt"
+        >
+          of 
+          732
+        </p>
+        <p
+          className="text-16-light"
+          data-testid="txt"
+        />
       </p>
       <div
-        className="h-[9px] w-full bg-neutral-200 bg-primary-200"
+        className="h-[9px] w-full rounded-full bg-neutral-200 mt-2 bg-primary-200"
         role="progressbar"
       >
         <div
-          className="h-full bg-primary transition-all duration-300"
+          className="h-full bg-primary rounded-full transition-all duration-300"
           style={
             Object {
               "width": "81.9672131147541%",
@@ -77,10 +94,10 @@ exports[`Storyshots Components/Elements/Cards/GoalProgressCard/Card Progress And
       </div>
     </div>
     <div
-      className="space-y-3 p-3"
+      className="w-full space-y-3 pl-6 "
     >
       <div
-        className="flex items-center justify-between"
+        className="flex w-full items-center"
       >
         <div
           style={
@@ -91,20 +108,20 @@ exports[`Storyshots Components/Elements/Cards/GoalProgressCard/Card Progress And
           }
         />
         <p
-          className="mr-auto whitespace-nowrap text-bold-caption-200"
+          className="w-[13vw] whitespace-nowrap text-16-light"
           data-testid="txt"
         >
           Organisations Joined
         </p>
         <p
-          className="ml-4 text-bold-subtitle-500"
+          className="text-14-bold"
           data-testid="txt"
         >
           23
         </p>
       </div>
       <div
-        className="flex items-center justify-between"
+        className="flex w-full items-center"
       >
         <div
           style={
@@ -115,20 +132,20 @@ exports[`Storyshots Components/Elements/Cards/GoalProgressCard/Card Progress And
           }
         />
         <p
-          className="mr-auto whitespace-nowrap text-bold-caption-200"
+          className="w-[13vw] whitespace-nowrap text-16-light"
           data-testid="txt"
         >
           Trees Planed
         </p>
         <p
-          className="ml-4 text-bold-subtitle-500"
+          className="text-14-bold"
           data-testid="txt"
         >
           1332
         </p>
       </div>
       <div
-        className="flex items-center justify-between"
+        className="flex w-full items-center"
       >
         <div
           style={
@@ -139,13 +156,13 @@ exports[`Storyshots Components/Elements/Cards/GoalProgressCard/Card Progress And
           }
         />
         <p
-          className="mr-auto whitespace-nowrap text-bold-caption-200"
+          className="w-[13vw] whitespace-nowrap text-16-light"
           data-testid="txt"
         >
           Trash Removed 
         </p>
         <p
-          className="ml-4 text-bold-subtitle-500"
+          className="text-14-bold"
           data-testid="txt"
         >
           530000
@@ -161,29 +178,41 @@ exports[`Storyshots Components/Elements/Cards/GoalProgressCard/Card Progress No
   className="h-44 p-4"
 >
   <div
-    className="flex items-center rounded-lg bg-primary-100 px-4 py-3 shadow"
+    className="flex items-center rounded-lg"
   >
     <div
       className="mr-6 w-full"
     >
       <p
-        className="text-bold-caption-100"
+        className="mb-1 w-full text-16-light"
         data-testid="txt"
       >
         Workday (PPC)
       </p>
       <p
-        className="text-bold-headline-1000"
+        className="flex w-full items-baseline text-24-bold"
         data-testid="txt"
       >
-        75/150
+        75
+         
+        <p
+          className="text-16-light"
+          data-testid="txt"
+        >
+          of 
+          150
+        </p>
+        <p
+          className="text-16-light"
+          data-testid="txt"
+        />
       </p>
       <div
-        className="h-[9px] w-full bg-neutral-200 bg-primary-200"
+        className="h-[9px] w-full rounded-full bg-neutral-200 mt-2 bg-primary-200"
         role="progressbar"
       >
         <div
-          className="h-full bg-primary transition-all duration-300"
+          className="h-full bg-primary rounded-full transition-all duration-300"
           style={
             Object {
               "width": "50%",
diff --git a/src/components/elements/Cards/GoalProgressCard/__snapshots__/GoalProgressCardItem.stories.storyshot b/src/components/elements/Cards/GoalProgressCard/__snapshots__/GoalProgressCardItem.stories.storyshot
index ccf17fc4f..b1003597b 100644
--- a/src/components/elements/Cards/GoalProgressCard/__snapshots__/GoalProgressCardItem.stories.storyshot
+++ b/src/components/elements/Cards/GoalProgressCard/__snapshots__/GoalProgressCardItem.stories.storyshot
@@ -2,7 +2,7 @@
 
 exports[`Storyshots Components/Elements/Cards/GoalProgressCard/Item Default 1`] = `
 <div
-  className="flex items-center justify-between"
+  className="flex w-full items-center"
 >
   <div
     style={
@@ -13,13 +13,13 @@ exports[`Storyshots Components/Elements/Cards/GoalProgressCard/Item Default 1`]
     }
   />
   <p
-    className="mr-auto whitespace-nowrap text-bold-caption-200"
+    className="w-[13vw] whitespace-nowrap text-16-light"
     data-testid="txt"
   >
     Trash Removed 
   </p>
   <p
-    className="ml-4 text-bold-subtitle-500"
+    className="text-14-bold"
     data-testid="txt"
   >
     530000
diff --git a/src/components/elements/Cards/SmallGoalProgressCard/__snapshots__/SmallGoalProgressCard.stories.storyshot b/src/components/elements/Cards/SmallGoalProgressCard/__snapshots__/SmallGoalProgressCard.stories.storyshot
index d8080a560..63d300115 100644
--- a/src/components/elements/Cards/SmallGoalProgressCard/__snapshots__/SmallGoalProgressCard.stories.storyshot
+++ b/src/components/elements/Cards/SmallGoalProgressCard/__snapshots__/SmallGoalProgressCard.stories.storyshot
@@ -20,11 +20,11 @@ exports[`Storyshots Components/Elements/Cards/SmallGoalProgressCard Default 1`]
       123/200
     </p>
     <div
-      className="h-[9px] w-full bg-neutral-200 bg-primary-200"
+      className="h-[9px] w-full rounded-full bg-neutral-200 bg-primary-200"
       role="progressbar"
     >
       <div
-        className="h-full bg-primary transition-all duration-300"
+        className="h-full bg-primary rounded-full transition-all duration-300"
         style={
           Object {
             "width": "61.5%",
diff --git a/src/components/elements/Cards/UpcomingOpportunitiesCard/__snapshots__/UpcomingOpportunitiesCard.stories.storyshot b/src/components/elements/Cards/UpcomingOpportunitiesCard/__snapshots__/UpcomingOpportunitiesCard.stories.storyshot
index a4d6f55b2..47369020c 100644
--- a/src/components/elements/Cards/UpcomingOpportunitiesCard/__snapshots__/UpcomingOpportunitiesCard.stories.storyshot
+++ b/src/components/elements/Cards/UpcomingOpportunitiesCard/__snapshots__/UpcomingOpportunitiesCard.stories.storyshot
@@ -17,14 +17,14 @@ exports[`Storyshots Components/Elements/Cards/UpcomingOpportunitiesCard Primary
     Land Accelerator fund
   </p>
   <a
-    className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-1.75 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+    className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-[10.5px] rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
     href="/"
     onClick={[Function]}
     onMouseEnter={[Function]}
     onTouchStart={[Function]}
   >
     <span
-      className="text-bold-caption-200 pt-0.75 leading-3"
+      className="flex items-center text-bold-caption-200"
     >
       Find out more
     </span>
diff --git a/src/components/elements/Cards/UserProfileCard/__snapshots__/UserProfileCard.stories.storyshot b/src/components/elements/Cards/UserProfileCard/__snapshots__/UserProfileCard.stories.storyshot
index daae99dda..e43d898b1 100644
--- a/src/components/elements/Cards/UserProfileCard/__snapshots__/UserProfileCard.stories.storyshot
+++ b/src/components/elements/Cards/UserProfileCard/__snapshots__/UserProfileCard.stories.storyshot
@@ -5,7 +5,7 @@ exports[`Storyshots Components/Elements/Cards/UserProfileCard Default 1`] = `
   className="w-[200px]"
 >
   <div
-    className="rounded-xl pb-4 shadow"
+    className="rounded-xl border border-neutral-200 pb-4"
   >
     <div
       className="relative flex aspect-square w-full items-center justify-center"
@@ -50,26 +50,26 @@ exports[`Storyshots Components/Elements/Cards/UserProfileCard Default 1`] = `
           }
         />
         <p
-          className="pt-0.5 text-bold-caption-100"
+          className="text-12-semibold"
           data-testid="txt"
         >
           Invite Sent
         </p>
       </div>
       <p
-        className="text-bold-body-300"
+        className="text-14-bold"
         data-testid="txt"
       >
         johndoe
       </p>
       <p
-        className="text-light-body-300"
+        className="text-14-light"
         data-testid="txt"
       >
         SaveTheTrees
       </p>
       <p
-        className="text-ellipsis line-clamp-1 text-light-body-300"
+        className="one-line-text text-14-light"
         data-testid="txt"
         title="johndoe@mail.com"
       >
@@ -85,7 +85,7 @@ exports[`Storyshots Components/Elements/Cards/UserProfileCard No Image 1`] = `
   className="w-[200px]"
 >
   <div
-    className="rounded-xl pb-4 shadow"
+    className="rounded-xl border border-neutral-200 pb-4"
   >
     <div
       className="relative flex aspect-square w-full items-center justify-center"
@@ -119,19 +119,19 @@ exports[`Storyshots Components/Elements/Cards/UserProfileCard No Image 1`] = `
       className="mt-4 space-y-2 px-3"
     >
       <p
-        className="text-bold-body-300"
+        className="text-14-bold"
         data-testid="txt"
       >
         janedoe
       </p>
       <p
-        className="text-light-body-300"
+        className="text-14-light"
         data-testid="txt"
       >
         WeLoveTrees
       </p>
       <p
-        className="text-ellipsis line-clamp-1 text-light-body-300"
+        className="one-line-text text-14-light"
         data-testid="txt"
         title="jane@mail.com"
       >
diff --git a/src/components/elements/EmptyState/__snapshots__/EmptyState.stories.storyshot b/src/components/elements/EmptyState/__snapshots__/EmptyState.stories.storyshot
index 2845ed30a..31887b50b 100644
--- a/src/components/elements/EmptyState/__snapshots__/EmptyState.stories.storyshot
+++ b/src/components/elements/EmptyState/__snapshots__/EmptyState.stories.storyshot
@@ -2,7 +2,7 @@
 
 exports[`Storyshots Components/Elements/EmptyState Default 1`] = `
 <div
-  className="w-full rounded-xl bg-white shadow p-15"
+  className="w-full rounded-xl border border-neutral-200 bg-white p-15"
 >
   <p
     className="mb-5 text-center text-bold-headline-1000"
diff --git a/src/components/elements/Field/__snapshots__/ButtonField.stories.storyshot b/src/components/elements/Field/__snapshots__/ButtonField.stories.storyshot
index 4f32b4d05..f15e70e7a 100644
--- a/src/components/elements/Field/__snapshots__/ButtonField.stories.storyshot
+++ b/src/components/elements/Field/__snapshots__/ButtonField.stories.storyshot
@@ -18,10 +18,10 @@ exports[`Storyshots Components/Elements/Fields/ButtonField Default 1`] = `
       </p>
     </div>
     <button
-      className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+      className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
     >
       <span
-        className="text-bold-caption-200 pt-0.75 leading-3"
+        className="flex items-center text-bold-caption-200"
       >
         View
       </span>
diff --git a/src/components/elements/Field/__snapshots__/FieldsExpander.stories.storyshot b/src/components/elements/Field/__snapshots__/FieldsExpander.stories.storyshot
index 98576403d..fecd13e93 100644
--- a/src/components/elements/Field/__snapshots__/FieldsExpander.stories.storyshot
+++ b/src/components/elements/Field/__snapshots__/FieldsExpander.stories.storyshot
@@ -34,13 +34,13 @@ exports[`Storyshots Components/Elements/Fields/FieldsExpander Default 1`] = `
         className="flex items-center justify-between"
       >
         <p
-          className="text-bold-subtitle-500"
+          className="text-16-bold"
           data-testid="txt"
         >
           Metric
         </p>
         <p
-          className="text-light-subtitle-400"
+          className="text-16-light"
           data-testid="txt"
         >
           1,321
@@ -92,11 +92,11 @@ exports[`Storyshots Components/Elements/Fields/FieldsExpander Default 1`] = `
           </p>
         </div>
         <button
-          className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+          className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
           onClick={[Function]}
         >
           <span
-            className="text-bold-caption-200 pt-0.75 leading-3"
+            className="flex items-center text-bold-caption-200"
           >
             Download
           </span>
diff --git a/src/components/elements/Field/__snapshots__/ProgressField.stories.storyshot b/src/components/elements/Field/__snapshots__/ProgressField.stories.storyshot
index a34a64677..ca5d83e65 100644
--- a/src/components/elements/Field/__snapshots__/ProgressField.stories.storyshot
+++ b/src/components/elements/Field/__snapshots__/ProgressField.stories.storyshot
@@ -25,11 +25,11 @@ exports[`Storyshots Components/Elements/Fields/ProgressField Default 1`] = `
         100
       </p>
       <div
-        className="h-[9px] w-full bg-neutral-200 "
+        className="h-[9px] w-full rounded-full bg-neutral-200 "
         role="progressbar"
       >
         <div
-          className="h-full bg-primary transition-all duration-300"
+          className="h-full bg-primary rounded-full transition-all duration-300"
           style={
             Object {
               "width": "35%",
diff --git a/src/components/elements/Field/__snapshots__/SelectImageListField.stories.storyshot b/src/components/elements/Field/__snapshots__/SelectImageListField.stories.storyshot
index 7f2da0e42..b29410057 100644
--- a/src/components/elements/Field/__snapshots__/SelectImageListField.stories.storyshot
+++ b/src/components/elements/Field/__snapshots__/SelectImageListField.stories.storyshot
@@ -8,13 +8,13 @@ exports[`Storyshots Components/Elements/Fields/SelectImageListField Default 1`]
     className="flex items-center justify-between"
   >
     <p
-      className="text-bold-subtitle-500"
+      className="text-16-bold"
       data-testid="txt"
     >
       Metric
     </p>
     <p
-      className="text-light-subtitle-400"
+      className="text-16-light"
       data-testid="txt"
     >
       1,000
diff --git a/src/components/elements/Field/__snapshots__/TextField.stories.storyshot b/src/components/elements/Field/__snapshots__/TextField.stories.storyshot
index a54fd5c3a..ed5a88e3e 100644
--- a/src/components/elements/Field/__snapshots__/TextField.stories.storyshot
+++ b/src/components/elements/Field/__snapshots__/TextField.stories.storyshot
@@ -8,13 +8,13 @@ exports[`Storyshots Components/Elements/Fields/TextField Default 1`] = `
     className="flex items-center justify-between"
   >
     <p
-      className="text-bold-subtitle-500"
+      className="text-16-bold"
       data-testid="txt"
     >
       Metric
     </p>
     <p
-      className="text-light-subtitle-400"
+      className="text-16-light"
       data-testid="txt"
     >
       1,000
diff --git a/src/components/elements/FilePreviewCard/__snapshots__/FilePreviewCard.stories.storyshot b/src/components/elements/FilePreviewCard/__snapshots__/FilePreviewCard.stories.storyshot
index 325318aa0..a2c6882f8 100644
--- a/src/components/elements/FilePreviewCard/__snapshots__/FilePreviewCard.stories.storyshot
+++ b/src/components/elements/FilePreviewCard/__snapshots__/FilePreviewCard.stories.storyshot
@@ -8,7 +8,7 @@ exports[`Storyshots Components/Elements/FilePreview Default 1`] = `
     className="flex flex-1 items-center justify-center gap-2"
   >
     <div
-      className="flex h-16 w-16 items-center justify-center rounded-lg border border-neutral-400 border-opacity-20 bg-cover bg-no-repeat"
+      className="flex items-center justify-center rounded-lg bg-cover bg-no-repeat"
       style={
         Object {
           "backgroundImage": "url(https://s3-eu-west-1.amazonaws.com/wri-restoration-marketplace-api-test/8V/Ds/8VDszG5DDB6flK1mYgtKqtWySlhXVCjpWEdnpfbOd0WmbgpRYyoWQtFjlre31Ojl.jpg)",
@@ -19,7 +19,7 @@ exports[`Storyshots Components/Elements/FilePreview Default 1`] = `
       className="flex flex-1 flex-col items-start gap-1"
     >
       <p
-        className=" capitalize line-clamp-1 text-heading-200"
+        className=" capitalize line-clamp-1 text-body-900"
         data-testid="txt"
       >
         file title
diff --git a/src/components/elements/ImageGallery/__snapshots__/ImageGallery.stories.storyshot b/src/components/elements/ImageGallery/__snapshots__/ImageGallery.stories.storyshot
index 38fa4a4b6..87fafba2d 100644
--- a/src/components/elements/ImageGallery/__snapshots__/ImageGallery.stories.storyshot
+++ b/src/components/elements/ImageGallery/__snapshots__/ImageGallery.stories.storyshot
@@ -17,16 +17,16 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
         <div
           aria-expanded={false}
           aria-haspopup="listbox"
-          className="flex h-8 items-center justify-center gap-1 rounded-md border bg-white px-10"
+          className="pitems-center flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white py-2 pl-4 pr-4"
           data-headlessui-state=""
           disabled={false}
-          id="headlessui-listbox-button-:r6:"
+          id="headlessui-listbox-button-:r7:"
           onClick={[Function]}
           onKeyDown={[Function]}
           onKeyUp={[Function]}
         >
           <p
-            className="mt-1 w-full uppercase line-clamp-1 text-bold-caption-200"
+            className="w-full uppercase line-clamp-1 text-14-bold"
             data-testid="txt"
           >
             Show All
@@ -44,17 +44,17 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
     </div>
   </div>
   <div
-    className="grid grid-cols-3 gap-8"
+    className="grid grid-cols-3 gap-4"
   >
     <div
-      className="relative overflow-hidden rounded-lg shadow"
+      className="relative overflow-hidden rounded-lg border border-neutral-200"
     >
       <div
-        className="h-[211px] w-full relative"
+        className="m-2 h-[211px] w-[calc(100%-16px)] rounded-lg relative"
       >
         <img
           alt=""
-          className="absolute top-0 right-0 left-0 bottom-0 h-full w-full"
+          className="absolute top-0 bottom-0 left-0 right-0 h-full w-full rounded-lg"
           data-nimg="1"
           decoding="async"
           height={211}
@@ -106,7 +106,7 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
                 />
               </a>
               <button
-                className="flex items-center justify-center rounded-full hover:bg-opacity-60 z-10"
+                className="flex items-center justify-center rounded-full hover:bg-opacity-60 z-10 hover:opacity-60"
                 onClick={[Function]}
               >
                 <div
@@ -123,10 +123,10 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
         </div>
       </div>
       <div
-        className="px-8 py-4"
+        className="px-2 py-4"
       >
         <p
-          className="text-bold-body-300"
+          className="text-16-bold"
           data-testid="txt"
         >
           Quod distinctio reiciendis maxime enim et quidem.
@@ -138,14 +138,14 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
       />
     </div>
     <div
-      className="relative overflow-hidden rounded-lg shadow"
+      className="relative overflow-hidden rounded-lg border border-neutral-200"
     >
       <div
-        className="h-[211px] w-full relative"
+        className="m-2 h-[211px] w-[calc(100%-16px)] rounded-lg relative"
       >
         <img
           alt=""
-          className="absolute top-0 right-0 left-0 bottom-0 h-full w-full"
+          className="absolute top-0 bottom-0 left-0 right-0 h-full w-full rounded-lg"
           data-nimg="1"
           decoding="async"
           height={211}
@@ -189,7 +189,7 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
                 />
               </a>
               <button
-                className="flex items-center justify-center rounded-full hover:bg-opacity-60 z-10"
+                className="flex items-center justify-center rounded-full hover:bg-opacity-60 z-10 hover:opacity-60"
                 onClick={[Function]}
               >
                 <div
@@ -206,10 +206,10 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
         </div>
       </div>
       <div
-        className="px-8 py-4"
+        className="px-2 py-4"
       >
         <p
-          className="text-bold-body-300"
+          className="text-16-bold"
           data-testid="txt"
         >
           Blanditiis magnam quae labore vel dicta quasi qui.
@@ -221,14 +221,14 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
       />
     </div>
     <div
-      className="relative overflow-hidden rounded-lg shadow"
+      className="relative overflow-hidden rounded-lg border border-neutral-200"
     >
       <div
-        className="h-[211px] w-full relative"
+        className="m-2 h-[211px] w-[calc(100%-16px)] rounded-lg relative"
       >
         <img
           alt=""
-          className="absolute top-0 right-0 left-0 bottom-0 h-full w-full"
+          className="absolute top-0 bottom-0 left-0 right-0 h-full w-full rounded-lg"
           data-nimg="1"
           decoding="async"
           height={211}
@@ -272,7 +272,7 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
                 />
               </a>
               <button
-                className="flex items-center justify-center rounded-full hover:bg-opacity-60 z-10"
+                className="flex items-center justify-center rounded-full hover:bg-opacity-60 z-10 hover:opacity-60"
                 onClick={[Function]}
               >
                 <div
@@ -289,10 +289,10 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
         </div>
       </div>
       <div
-        className="px-8 py-4"
+        className="px-2 py-4"
       >
         <p
-          className="text-bold-body-300"
+          className="text-16-bold"
           data-testid="txt"
         >
           Aliquam quidem cupiditate reprehenderit incidunt.
@@ -304,14 +304,14 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
       />
     </div>
     <div
-      className="relative overflow-hidden rounded-lg shadow"
+      className="relative overflow-hidden rounded-lg border border-neutral-200"
     >
       <div
-        className="h-[211px] w-full relative"
+        className="m-2 h-[211px] w-[calc(100%-16px)] rounded-lg relative"
       >
         <img
           alt=""
-          className="absolute top-0 right-0 left-0 bottom-0 h-full w-full"
+          className="absolute top-0 bottom-0 left-0 right-0 h-full w-full rounded-lg"
           data-nimg="1"
           decoding="async"
           height={211}
@@ -363,7 +363,7 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
                 />
               </a>
               <button
-                className="flex items-center justify-center rounded-full hover:bg-opacity-60 z-10"
+                className="flex items-center justify-center rounded-full hover:bg-opacity-60 z-10 hover:opacity-60"
                 onClick={[Function]}
               >
                 <div
@@ -380,10 +380,10 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
         </div>
       </div>
       <div
-        className="px-8 py-4"
+        className="px-2 py-4"
       >
         <p
-          className="text-bold-body-300"
+          className="text-16-bold"
           data-testid="txt"
         >
           Doloremque quisquam hic pariatur in dolores reprehenderit illo.
@@ -395,14 +395,14 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
       />
     </div>
     <div
-      className="relative overflow-hidden rounded-lg shadow"
+      className="relative overflow-hidden rounded-lg border border-neutral-200"
     >
       <div
-        className="h-[211px] w-full relative"
+        className="m-2 h-[211px] w-[calc(100%-16px)] rounded-lg relative"
       >
         <img
           alt=""
-          className="absolute top-0 right-0 left-0 bottom-0 h-full w-full"
+          className="absolute top-0 bottom-0 left-0 right-0 h-full w-full rounded-lg"
           data-nimg="1"
           decoding="async"
           height={211}
@@ -446,7 +446,7 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
                 />
               </a>
               <button
-                className="flex items-center justify-center rounded-full hover:bg-opacity-60 z-10"
+                className="flex items-center justify-center rounded-full hover:bg-opacity-60 z-10 hover:opacity-60"
                 onClick={[Function]}
               >
                 <div
@@ -463,10 +463,10 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
         </div>
       </div>
       <div
-        className="px-8 py-4"
+        className="px-2 py-4"
       >
         <p
-          className="text-bold-body-300"
+          className="text-16-bold"
           data-testid="txt"
         >
           Dignissimos unde tempore modi aut ut.
@@ -478,14 +478,14 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
       />
     </div>
     <div
-      className="relative overflow-hidden rounded-lg shadow"
+      className="relative overflow-hidden rounded-lg border border-neutral-200"
     >
       <div
-        className="h-[211px] w-full relative"
+        className="m-2 h-[211px] w-[calc(100%-16px)] rounded-lg relative"
       >
         <img
           alt=""
-          className="absolute top-0 right-0 left-0 bottom-0 h-full w-full"
+          className="absolute top-0 bottom-0 left-0 right-0 h-full w-full rounded-lg"
           data-nimg="1"
           decoding="async"
           height={211}
@@ -537,7 +537,7 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
                 />
               </a>
               <button
-                className="flex items-center justify-center rounded-full hover:bg-opacity-60 z-10"
+                className="flex items-center justify-center rounded-full hover:bg-opacity-60 z-10 hover:opacity-60"
                 onClick={[Function]}
               >
                 <div
@@ -554,10 +554,10 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
         </div>
       </div>
       <div
-        className="px-8 py-4"
+        className="px-2 py-4"
       >
         <p
-          className="text-bold-body-300"
+          className="text-16-bold"
           data-testid="txt"
         >
           Fugit quod ullam cum natus expedita reprehenderit.
@@ -569,14 +569,14 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
       />
     </div>
     <div
-      className="relative overflow-hidden rounded-lg shadow"
+      className="relative overflow-hidden rounded-lg border border-neutral-200"
     >
       <div
-        className="h-[211px] w-full relative"
+        className="m-2 h-[211px] w-[calc(100%-16px)] rounded-lg relative"
       >
         <img
           alt=""
-          className="absolute top-0 right-0 left-0 bottom-0 h-full w-full"
+          className="absolute top-0 bottom-0 left-0 right-0 h-full w-full rounded-lg"
           data-nimg="1"
           decoding="async"
           height={211}
@@ -620,7 +620,7 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
                 />
               </a>
               <button
-                className="flex items-center justify-center rounded-full hover:bg-opacity-60 z-10"
+                className="flex items-center justify-center rounded-full hover:bg-opacity-60 z-10 hover:opacity-60"
                 onClick={[Function]}
               >
                 <div
@@ -637,10 +637,10 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
         </div>
       </div>
       <div
-        className="px-8 py-4"
+        className="px-2 py-4"
       >
         <p
-          className="text-bold-body-300"
+          className="text-16-bold"
           data-testid="txt"
         >
           Sit nobis unde numquam tenetur.
@@ -652,14 +652,14 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
       />
     </div>
     <div
-      className="relative overflow-hidden rounded-lg shadow"
+      className="relative overflow-hidden rounded-lg border border-neutral-200"
     >
       <div
-        className="h-[211px] w-full relative"
+        className="m-2 h-[211px] w-[calc(100%-16px)] rounded-lg relative"
       >
         <img
           alt=""
-          className="absolute top-0 right-0 left-0 bottom-0 h-full w-full"
+          className="absolute top-0 bottom-0 left-0 right-0 h-full w-full rounded-lg"
           data-nimg="1"
           decoding="async"
           height={211}
@@ -703,7 +703,7 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
                 />
               </a>
               <button
-                className="flex items-center justify-center rounded-full hover:bg-opacity-60 z-10"
+                className="flex items-center justify-center rounded-full hover:bg-opacity-60 z-10 hover:opacity-60"
                 onClick={[Function]}
               >
                 <div
@@ -720,10 +720,10 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
         </div>
       </div>
       <div
-        className="px-8 py-4"
+        className="px-2 py-4"
       >
         <p
-          className="text-bold-body-300"
+          className="text-16-bold"
           data-testid="txt"
         >
           Dolorum explicabo magnam ad qui ab reprehenderit dolor.
@@ -735,14 +735,14 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
       />
     </div>
     <div
-      className="relative overflow-hidden rounded-lg shadow"
+      className="relative overflow-hidden rounded-lg border border-neutral-200"
     >
       <div
-        className="h-[211px] w-full relative"
+        className="m-2 h-[211px] w-[calc(100%-16px)] rounded-lg relative"
       >
         <img
           alt=""
-          className="absolute top-0 right-0 left-0 bottom-0 h-full w-full"
+          className="absolute top-0 bottom-0 left-0 right-0 h-full w-full rounded-lg"
           data-nimg="1"
           decoding="async"
           height={211}
@@ -794,7 +794,7 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
                 />
               </a>
               <button
-                className="flex items-center justify-center rounded-full hover:bg-opacity-60 z-10"
+                className="flex items-center justify-center rounded-full hover:bg-opacity-60 z-10 hover:opacity-60"
                 onClick={[Function]}
               >
                 <div
@@ -811,10 +811,10 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
         </div>
       </div>
       <div
-        className="px-8 py-4"
+        className="px-2 py-4"
       >
         <p
-          className="text-bold-body-300"
+          className="text-16-bold"
           data-testid="txt"
         >
           Rerum hic laboriosam similique quidem molestias.
@@ -826,14 +826,14 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
       />
     </div>
     <div
-      className="relative overflow-hidden rounded-lg shadow"
+      className="relative overflow-hidden rounded-lg border border-neutral-200"
     >
       <div
-        className="h-[211px] w-full relative"
+        className="m-2 h-[211px] w-[calc(100%-16px)] rounded-lg relative"
       >
         <img
           alt=""
-          className="absolute top-0 right-0 left-0 bottom-0 h-full w-full"
+          className="absolute top-0 bottom-0 left-0 right-0 h-full w-full rounded-lg"
           data-nimg="1"
           decoding="async"
           height={211}
@@ -885,7 +885,7 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
                 />
               </a>
               <button
-                className="flex items-center justify-center rounded-full hover:bg-opacity-60 z-10"
+                className="flex items-center justify-center rounded-full hover:bg-opacity-60 z-10 hover:opacity-60"
                 onClick={[Function]}
               >
                 <div
@@ -902,10 +902,10 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
         </div>
       </div>
       <div
-        className="px-8 py-4"
+        className="px-2 py-4"
       >
         <p
-          className="text-bold-body-300"
+          className="text-16-bold"
           data-testid="txt"
         >
           Odit quo ipsam cupiditate laborum qui.
@@ -930,11 +930,11 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
         <div
           aria-expanded={false}
           aria-haspopup="listbox"
-          aria-labelledby="headlessui-listbox-label-:r8: headlessui-listbox-button-:r7:"
+          aria-labelledby="headlessui-listbox-label-:r9: headlessui-listbox-button-:r8:"
           className="flex h-10 w-20 items-center justify-center rounded-md shadow"
           data-headlessui-state=""
           disabled={false}
-          id="headlessui-listbox-button-:r7:"
+          id="headlessui-listbox-button-:r8:"
           onClick={[Function]}
           onKeyDown={[Function]}
           onKeyUp={[Function]}
@@ -950,7 +950,7 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
             </p>
           </div>
           <div
-            className="flex h-full flex-1 items-center justify-center rounded-r-lg bg-primary-200"
+            className="flex h-full flex-1 items-center justify-center rounded-r-lg bg-[#CFE6F4]"
           >
             <div
               style={
@@ -966,7 +966,7 @@ exports[`Storyshots Components/Elements/ImageGallery Default 1`] = `
           className="text-bold-subtitle-500"
           data-headlessui-state=""
           data-testid="txt"
-          id="headlessui-listbox-label-:r8:"
+          id="headlessui-listbox-label-:r9:"
           onClick={[Function]}
         >
           Per page
diff --git a/src/components/elements/ImageGallery/__snapshots__/ImageGalleryItem.stories.storyshot b/src/components/elements/ImageGallery/__snapshots__/ImageGalleryItem.stories.storyshot
index e7bca9a9f..8cf76880e 100644
--- a/src/components/elements/ImageGallery/__snapshots__/ImageGalleryItem.stories.storyshot
+++ b/src/components/elements/ImageGallery/__snapshots__/ImageGalleryItem.stories.storyshot
@@ -5,14 +5,14 @@ exports[`Storyshots Components/Elements/Cards/ImageGalleryCard/Item Default 1`]
   className="p-4"
 >
   <div
-    className="relative overflow-hidden rounded-lg shadow"
+    className="relative overflow-hidden rounded-lg border border-neutral-200"
   >
     <div
-      className="h-[211px] w-full relative"
+      className="m-2 h-[211px] w-[calc(100%-16px)] rounded-lg relative"
     >
       <img
         alt=""
-        className="absolute top-0 right-0 left-0 bottom-0 h-full w-full"
+        className="absolute top-0 bottom-0 left-0 right-0 h-full w-full rounded-lg"
         data-nimg="1"
         decoding="async"
         height={211}
@@ -56,7 +56,7 @@ exports[`Storyshots Components/Elements/Cards/ImageGalleryCard/Item Default 1`]
               />
             </a>
             <button
-              className="flex items-center justify-center rounded-full hover:bg-opacity-60 z-10"
+              className="flex items-center justify-center rounded-full hover:bg-opacity-60 z-10 hover:opacity-60"
               onClick={[Function]}
             >
               <div
@@ -73,16 +73,16 @@ exports[`Storyshots Components/Elements/Cards/ImageGalleryCard/Item Default 1`]
       </div>
     </div>
     <div
-      className="px-8 py-4"
+      className="px-2 py-4"
     >
       <p
-        className="text-bold-body-300"
+        className="text-16-bold"
         data-testid="txt"
       >
         Fugit deleniti hic optio totam beatae.
       </p>
       <p
-        className="mt-2 text-light-body-300"
+        className="mt-2 text-16-light"
         data-testid="txt"
       >
         30/10/2022
diff --git a/src/components/elements/ImageWithChildren/__snapshots__/ImageWithChildren.stories.storyshot b/src/components/elements/ImageWithChildren/__snapshots__/ImageWithChildren.stories.storyshot
index 66af23934..c9770b97a 100644
--- a/src/components/elements/ImageWithChildren/__snapshots__/ImageWithChildren.stories.storyshot
+++ b/src/components/elements/ImageWithChildren/__snapshots__/ImageWithChildren.stories.storyshot
@@ -6,7 +6,7 @@ exports[`Storyshots Components/Elements/ImageWithChildren Primary 1`] = `
 >
   <img
     alt=""
-    className="absolute top-0 right-0 left-0 bottom-0 h-full w-full"
+    className="absolute top-0 bottom-0 left-0 right-0 h-full w-full rounded-lg"
     data-nimg="1"
     decoding="async"
     height={40}
@@ -30,7 +30,7 @@ exports[`Storyshots Components/Elements/ImageWithChildren Primary 1`] = `
       className="m-auto flex h-full w-full max-w-7xl flex-col items-start justify-between p-10 text-white"
     >
       <button
-        className="gap-2 p-0 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+        className="flex items-center justify-center tracking-wide w-fit-content gap-2 p-0"
       >
         <div
           style={
@@ -41,7 +41,7 @@ exports[`Storyshots Components/Elements/ImageWithChildren Primary 1`] = `
           }
         />
         <span
-          className="text-bold-body-300"
+          className="text-12-bold"
         >
           Back to somewhere
         </span>
diff --git a/src/components/elements/Inputs/AutoCompleteInput/__snapshots__/AutoCompleteInput.stories.storyshot b/src/components/elements/Inputs/AutoCompleteInput/__snapshots__/AutoCompleteInput.stories.storyshot
index 7ba90acd9..899a3691e 100644
--- a/src/components/elements/Inputs/AutoCompleteInput/__snapshots__/AutoCompleteInput.stories.storyshot
+++ b/src/components/elements/Inputs/AutoCompleteInput/__snapshots__/AutoCompleteInput.stories.storyshot
@@ -11,30 +11,30 @@ exports[`Storyshots Components/Elements/Inputs/AutoComplete Default 1`] = `
     <label
       className="mr-2 inline uppercase text-bold-body-300"
       data-testid="txt"
-      htmlFor=":rb:"
+      htmlFor=":rc:"
     >
       Input Label 
     </label>
     <p
-      className="text-light-body-300 with-inner-html"
+      className="text-body-400 with-inner-html"
       dangerouslySetInnerHTML={
         Object {
           "__html": "Input description",
         }
       }
       data-testid="txt"
-      id=":rb:-description"
+      id=":rc:-description"
     />
     <div
       className="relative"
     >
       <input
-        aria-describedby=":rb:-description"
+        aria-describedby=":rc:-description"
         aria-expanded={false}
         aria-invalid={false}
-        className="w-full outline-none transition-all duration-300 ease-in-out focus:ring-transparent px-3 py-[9px] rounded-lg focus:border-primary-500 border border-neutral-400"
+        className="w-full outline-none transition-all duration-300 ease-in-out focus:ring-transparent px-3 py-[9px] rounded-lg focus:border-primary-500 border border-neutral-200"
         data-headlessui-state=""
-        id=":rb:"
+        id=":rc:"
         onChangeCapture={[Function]}
         onClick={[Function]}
         onKeyUp={[Function]}
diff --git a/src/components/elements/Inputs/BooleanInput/__snapshots__/BooleanInput.stories.storyshot b/src/components/elements/Inputs/BooleanInput/__snapshots__/BooleanInput.stories.storyshot
index dfc1cdbb4..67a158f2f 100644
--- a/src/components/elements/Inputs/BooleanInput/__snapshots__/BooleanInput.stories.storyshot
+++ b/src/components/elements/Inputs/BooleanInput/__snapshots__/BooleanInput.stories.storyshot
@@ -11,7 +11,7 @@ exports[`Storyshots Components/Elements/Inputs/BooleanInput Default 1`] = `
     Input Label 
   </label>
   <p
-    className="text-light-body-300 with-inner-html"
+    className="text-body-400 with-inner-html"
     dangerouslySetInnerHTML={
       Object {
         "__html": "Input description",
@@ -21,14 +21,14 @@ exports[`Storyshots Components/Elements/Inputs/BooleanInput Default 1`] = `
   />
   <div
     className="space-y-2"
-    id="headlessui-radiogroup-:rc:"
+    id="headlessui-radiogroup-:rd:"
     onKeyDown={[Function]}
     role="radiogroup"
   >
     <div
       aria-checked="false"
       data-headlessui-state=""
-      id="headlessui-radiogroup-option-:rd:"
+      id="headlessui-radiogroup-option-:re:"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -40,7 +40,7 @@ exports[`Storyshots Components/Elements/Inputs/BooleanInput Default 1`] = `
       >
         <label
           className="flex items-center flex flex-row-reverse items-center justify-end gap-3 "
-          htmlFor=":re:"
+          htmlFor=":rf:"
         >
           <p
             className="text-light-caption-200"
@@ -51,7 +51,7 @@ exports[`Storyshots Components/Elements/Inputs/BooleanInput Default 1`] = `
           <input
             checked={false}
             className="flex flex-row-reverse items-center justify-end gap-3 "
-            id=":re:"
+            id=":rf:"
             label="Yes"
             onChange={[Function]}
             type="radio"
@@ -62,7 +62,7 @@ exports[`Storyshots Components/Elements/Inputs/BooleanInput Default 1`] = `
     <div
       aria-checked="false"
       data-headlessui-state=""
-      id="headlessui-radiogroup-option-:rf:"
+      id="headlessui-radiogroup-option-:rg:"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -74,7 +74,7 @@ exports[`Storyshots Components/Elements/Inputs/BooleanInput Default 1`] = `
       >
         <label
           className="flex items-center flex flex-row-reverse items-center justify-end gap-3 "
-          htmlFor=":rg:"
+          htmlFor=":rh:"
         >
           <p
             className="text-light-caption-200"
@@ -85,7 +85,7 @@ exports[`Storyshots Components/Elements/Inputs/BooleanInput Default 1`] = `
           <input
             checked={false}
             className="flex flex-row-reverse items-center justify-end gap-3 "
-            id=":rg:"
+            id=":rh:"
             label="No"
             onChange={[Function]}
             type="radio"
diff --git a/src/components/elements/Inputs/Checkbox/__snapshots__/Checkbox.stories.storyshot b/src/components/elements/Inputs/Checkbox/__snapshots__/Checkbox.stories.storyshot
index 32e5c1de8..c1566b596 100644
--- a/src/components/elements/Inputs/Checkbox/__snapshots__/Checkbox.stories.storyshot
+++ b/src/components/elements/Inputs/Checkbox/__snapshots__/Checkbox.stories.storyshot
@@ -1,12 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Components/Elements/Inputs/Checkbox Checked 1`] = `
-<div
-  className="relative flex items-start gap-4 justify-between"
->
+<div>
   <label
     className="w-full"
-    htmlFor=":ri:"
+    htmlFor=":rj:"
   >
     <label
       className="max-w-[365px] undefined text-body-600 with-inner-html"
@@ -16,25 +14,23 @@ exports[`Storyshots Components/Elements/Inputs/Checkbox Checked 1`] = `
         }
       }
       data-testid="txt"
-      htmlFor=":ri:"
+      htmlFor=":rj:"
     />
   </label>
   <input
     checked={true}
-    className="h-5 w-5 cursor-pointer rounded-sm border-neutral-400 transition-all duration-300 checked:text-primary-500 focus:ring-transparent disabled:bg-neutral-400"
-    id=":ri:"
+    className="h-4 w-4 cursor-pointer rounded-sm border-neutral-400 transition-all duration-300 checked:text-primary-500 focus:ring-transparent disabled:bg-neutral-400 lg:h-5 lg:w-5"
+    id=":rj:"
     type="checkbox"
   />
 </div>
 `;
 
 exports[`Storyshots Components/Elements/Inputs/Checkbox Unchecked 1`] = `
-<div
-  className="relative flex items-start gap-4 justify-between"
->
+<div>
   <label
     className="w-full"
-    htmlFor=":rh:"
+    htmlFor=":ri:"
   >
     <label
       className="max-w-[365px] undefined text-body-600 with-inner-html"
@@ -44,12 +40,12 @@ exports[`Storyshots Components/Elements/Inputs/Checkbox Unchecked 1`] = `
         }
       }
       data-testid="txt"
-      htmlFor=":rh:"
+      htmlFor=":ri:"
     />
   </label>
   <input
-    className="h-5 w-5 cursor-pointer rounded-sm border-neutral-400 transition-all duration-300 checked:text-primary-500 focus:ring-transparent disabled:bg-neutral-400"
-    id=":rh:"
+    className="h-4 w-4 cursor-pointer rounded-sm border-neutral-400 transition-all duration-300 checked:text-primary-500 focus:ring-transparent disabled:bg-neutral-400 lg:h-5 lg:w-5"
+    id=":ri:"
     type="checkbox"
   />
 </div>
diff --git a/src/components/elements/Inputs/ConditionalInput/__snapshots__/ConditionalInput.stories.storyshot b/src/components/elements/Inputs/ConditionalInput/__snapshots__/ConditionalInput.stories.storyshot
index aa443fce1..164f25c60 100644
--- a/src/components/elements/Inputs/ConditionalInput/__snapshots__/ConditionalInput.stories.storyshot
+++ b/src/components/elements/Inputs/ConditionalInput/__snapshots__/ConditionalInput.stories.storyshot
@@ -12,7 +12,7 @@ Array [
       Input Label 
     </label>
     <p
-      className="text-light-body-300 with-inner-html"
+      className="text-body-400 with-inner-html"
       dangerouslySetInnerHTML={
         Object {
           "__html": "Input description",
@@ -22,14 +22,14 @@ Array [
     />
     <div
       className="space-y-2"
-      id="headlessui-radiogroup-:rj:"
+      id="headlessui-radiogroup-:rk:"
       onKeyDown={[Function]}
       role="radiogroup"
     >
       <div
         aria-checked="false"
         data-headlessui-state=""
-        id="headlessui-radiogroup-option-:rk:"
+        id="headlessui-radiogroup-option-:rl:"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -41,7 +41,7 @@ Array [
         >
           <label
             className="flex items-center flex flex-row-reverse items-center justify-end gap-3 "
-            htmlFor=":rl:"
+            htmlFor=":rm:"
           >
             <p
               className="text-light-caption-200"
@@ -52,7 +52,7 @@ Array [
             <input
               checked={false}
               className="flex flex-row-reverse items-center justify-end gap-3 "
-              id=":rl:"
+              id=":rm:"
               label="Yes"
               onChange={[Function]}
               type="radio"
@@ -63,7 +63,7 @@ Array [
       <div
         aria-checked="false"
         data-headlessui-state=""
-        id="headlessui-radiogroup-option-:rm:"
+        id="headlessui-radiogroup-option-:rn:"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -75,7 +75,7 @@ Array [
         >
           <label
             className="flex items-center flex flex-row-reverse items-center justify-end gap-3 "
-            htmlFor=":rn:"
+            htmlFor=":ro:"
           >
             <p
               className="text-light-caption-200"
@@ -86,7 +86,7 @@ Array [
             <input
               checked={false}
               className="flex flex-row-reverse items-center justify-end gap-3 "
-              id=":rn:"
+              id=":ro:"
               label="No"
               onChange={[Function]}
               type="radio"
diff --git a/src/components/elements/Inputs/DataTable/__snapshots__/DataTable.stories.storyshot b/src/components/elements/Inputs/DataTable/__snapshots__/DataTable.stories.storyshot
index 9a9591e0b..ef2ec9b5c 100644
--- a/src/components/elements/Inputs/DataTable/__snapshots__/DataTable.stories.storyshot
+++ b/src/components/elements/Inputs/DataTable/__snapshots__/DataTable.stories.storyshot
@@ -11,7 +11,7 @@ exports[`Storyshots Components/Elements/Inputs/DataTable Default 1`] = `
     What are your funding sources? 
   </label>
   <p
-    className="text-light-body-300 with-inner-html"
+    className="text-body-400 with-inner-html"
     dangerouslySetInnerHTML={
       Object {
         "__html": "Add a description for jobs created.",
@@ -23,7 +23,7 @@ exports[`Storyshots Components/Elements/Inputs/DataTable Default 1`] = `
     className="w-full pt-6"
   >
     <button
-      className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-1.75 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+      className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-[10.5px] rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
       onClick={[Function]}
     >
       <div
@@ -35,7 +35,7 @@ exports[`Storyshots Components/Elements/Inputs/DataTable Default 1`] = `
         }
       />
       <span
-        className="text-bold-caption-200 pt-0.75 leading-3"
+        className="flex items-center text-bold-caption-200"
       >
         Add funding source
       </span>
diff --git a/src/components/elements/Inputs/Dropdown/__snapshots__/Dropdown.stories.storyshot b/src/components/elements/Inputs/Dropdown/__snapshots__/Dropdown.stories.storyshot
index 48ed83dc6..fa942614b 100644
--- a/src/components/elements/Inputs/Dropdown/__snapshots__/Dropdown.stories.storyshot
+++ b/src/components/elements/Inputs/Dropdown/__snapshots__/Dropdown.stories.storyshot
@@ -11,13 +11,13 @@ exports[`Storyshots Components/Elements/Inputs/Dropdown Multi Select 1`] = `
       className="mr-2 inline uppercase text-bold-body-300"
       data-headlessui-state=""
       data-testid="txt"
-      id="headlessui-listbox-label-:rq:"
+      id="headlessui-listbox-label-:rr:"
       onClick={[Function]}
     >
       Drop down label 
     </label>
     <p
-      className="text-light-body-300 with-inner-html"
+      className="text-body-400 with-inner-html"
       dangerouslySetInnerHTML={
         Object {
           "__html": "Drop down description",
@@ -28,20 +28,23 @@ exports[`Storyshots Components/Elements/Inputs/Dropdown Multi Select 1`] = `
     <div
       aria-expanded={false}
       aria-haspopup="listbox"
-      aria-labelledby="headlessui-listbox-label-:rq: headlessui-listbox-button-:rr:"
+      aria-labelledby="headlessui-listbox-label-:rr: headlessui-listbox-button-:rs:"
       className="flex h-10 items-center justify-between gap-3 rounded-lg py-2 px-3 hover:cursor-pointer border-light"
       data-headlessui-state=""
       disabled={false}
-      id="headlessui-listbox-button-:rr:"
+      id="headlessui-listbox-button-:rs:"
       onClick={[Function]}
       onKeyDown={[Function]}
       onKeyUp={[Function]}
     >
-      <span
-        className="w-full line-clamp-1"
+      <div
+        className="flex items-center gap-2"
       >
-        placeholder
-      </span>
+        <p
+          className="w-full line-clamp-1 text-14-light"
+          data-testid="txt"
+        />
+      </div>
       <div
         style={
           Object {
@@ -66,13 +69,13 @@ exports[`Storyshots Components/Elements/Inputs/Dropdown Multi Select With Other
       className="mr-2 inline uppercase text-bold-body-300"
       data-headlessui-state=""
       data-testid="txt"
-      id="headlessui-listbox-label-:ru:"
+      id="headlessui-listbox-label-:rv:"
       onClick={[Function]}
     >
       Drop down label 
     </label>
     <p
-      className="text-light-body-300 with-inner-html"
+      className="text-body-400 with-inner-html"
       dangerouslySetInnerHTML={
         Object {
           "__html": "Drop down description",
@@ -83,20 +86,23 @@ exports[`Storyshots Components/Elements/Inputs/Dropdown Multi Select With Other
     <div
       aria-expanded={false}
       aria-haspopup="listbox"
-      aria-labelledby="headlessui-listbox-label-:ru: headlessui-listbox-button-:rv:"
+      aria-labelledby="headlessui-listbox-label-:rv: headlessui-listbox-button-:r10:"
       className="flex h-10 items-center justify-between gap-3 rounded-lg py-2 px-3 hover:cursor-pointer border-light"
       data-headlessui-state=""
       disabled={false}
-      id="headlessui-listbox-button-:rv:"
+      id="headlessui-listbox-button-:r10:"
       onClick={[Function]}
       onKeyDown={[Function]}
       onKeyUp={[Function]}
     >
-      <span
-        className="w-full line-clamp-1"
+      <div
+        className="flex items-center gap-2"
       >
-        placeholder
-      </span>
+        <p
+          className="w-full line-clamp-1 text-14-light"
+          data-testid="txt"
+        />
+      </div>
       <div
         style={
           Object {
@@ -121,13 +127,13 @@ exports[`Storyshots Components/Elements/Inputs/Dropdown Single Select 1`] = `
       className="mr-2 inline uppercase text-bold-body-300"
       data-headlessui-state=""
       data-testid="txt"
-      id="headlessui-listbox-label-:ro:"
+      id="headlessui-listbox-label-:rp:"
       onClick={[Function]}
     >
       Drop down label 
     </label>
     <p
-      className="text-light-body-300 with-inner-html"
+      className="text-body-400 with-inner-html"
       dangerouslySetInnerHTML={
         Object {
           "__html": "Drop down description",
@@ -138,20 +144,23 @@ exports[`Storyshots Components/Elements/Inputs/Dropdown Single Select 1`] = `
     <div
       aria-expanded={false}
       aria-haspopup="listbox"
-      aria-labelledby="headlessui-listbox-label-:ro: headlessui-listbox-button-:rp:"
+      aria-labelledby="headlessui-listbox-label-:rp: headlessui-listbox-button-:rq:"
       className="flex h-10 items-center justify-between gap-3 rounded-lg py-2 px-3 hover:cursor-pointer border-light"
       data-headlessui-state=""
       disabled={false}
-      id="headlessui-listbox-button-:rp:"
+      id="headlessui-listbox-button-:rq:"
       onClick={[Function]}
       onKeyDown={[Function]}
       onKeyUp={[Function]}
     >
-      <span
-        className="w-full line-clamp-1"
+      <div
+        className="flex items-center gap-2"
       >
-        placeholder
-      </span>
+        <p
+          className="w-full line-clamp-1 text-14-light"
+          data-testid="txt"
+        />
+      </div>
       <div
         style={
           Object {
@@ -165,6 +174,56 @@ exports[`Storyshots Components/Elements/Inputs/Dropdown Single Select 1`] = `
 </div>
 `;
 
+exports[`Storyshots Components/Elements/Inputs/Dropdown Single Select With Meta Data 1`] = `
+<div
+  className="space-y-2"
+>
+  <label
+    className="mr-2 inline uppercase capitalize text-16-bold"
+    data-headlessui-state=""
+    data-testid="txt"
+    id="headlessui-listbox-label-:r11:"
+    onClick={[Function]}
+  >
+    Select Polygon 
+  </label>
+  <div
+    aria-expanded={false}
+    aria-haspopup="listbox"
+    aria-labelledby="headlessui-listbox-label-:r11: headlessui-listbox-button-:r12:"
+    className="flex h-10 items-center justify-between gap-3 rounded-lg py-2 px-3 hover:cursor-pointer border-light"
+    data-headlessui-state=""
+    disabled={false}
+    id="headlessui-listbox-button-:r12:"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+  >
+    <div
+      className="flex items-center gap-2"
+    >
+      <div
+        className="min-h-[8px] min-w-[8px] rounded-full "
+      />
+      <p
+        className="w-full line-clamp-1 text-14-light"
+        data-testid="txt"
+      >
+        Aerobic Agroforestry
+      </p>
+    </div>
+    <div
+      style={
+        Object {
+          "height": undefined,
+          "width": 16,
+        }
+      }
+    />
+  </div>
+</div>
+`;
+
 exports[`Storyshots Components/Elements/Inputs/Dropdown Single Select With Other Option 1`] = `
 <div
   className="relative"
@@ -176,13 +235,13 @@ exports[`Storyshots Components/Elements/Inputs/Dropdown Single Select With Other
       className="mr-2 inline uppercase text-bold-body-300"
       data-headlessui-state=""
       data-testid="txt"
-      id="headlessui-listbox-label-:rs:"
+      id="headlessui-listbox-label-:rt:"
       onClick={[Function]}
     >
       Drop down label 
     </label>
     <p
-      className="text-light-body-300 with-inner-html"
+      className="text-body-400 with-inner-html"
       dangerouslySetInnerHTML={
         Object {
           "__html": "Drop down description",
@@ -193,20 +252,23 @@ exports[`Storyshots Components/Elements/Inputs/Dropdown Single Select With Other
     <div
       aria-expanded={false}
       aria-haspopup="listbox"
-      aria-labelledby="headlessui-listbox-label-:rs: headlessui-listbox-button-:rt:"
+      aria-labelledby="headlessui-listbox-label-:rt: headlessui-listbox-button-:ru:"
       className="flex h-10 items-center justify-between gap-3 rounded-lg py-2 px-3 hover:cursor-pointer border-light"
       data-headlessui-state=""
       disabled={false}
-      id="headlessui-listbox-button-:rt:"
+      id="headlessui-listbox-button-:ru:"
       onClick={[Function]}
       onKeyDown={[Function]}
       onKeyUp={[Function]}
     >
-      <span
-        className="w-full line-clamp-1"
+      <div
+        className="flex items-center gap-2"
       >
-        placeholder
-      </span>
+        <p
+          className="w-full line-clamp-1 text-14-light"
+          data-testid="txt"
+        />
+      </div>
       <div
         style={
           Object {
diff --git a/src/components/elements/Inputs/FileInput/__snapshots__/FileInput.stories.storyshot b/src/components/elements/Inputs/FileInput/__snapshots__/FileInput.stories.storyshot
index aba83d72b..fcd51b61a 100644
--- a/src/components/elements/Inputs/FileInput/__snapshots__/FileInput.stories.storyshot
+++ b/src/components/elements/Inputs/FileInput/__snapshots__/FileInput.stories.storyshot
@@ -8,22 +8,22 @@ Array [
     <label
       className="mr-2 inline uppercase text-bold-body-300"
       data-testid="txt"
-      htmlFor=":r11:"
+      htmlFor=":r15:"
     >
       Input Label 
     </label>
     <p
-      className="text-light-body-300 with-inner-html"
+      className="text-body-400 with-inner-html"
       dangerouslySetInnerHTML={
         Object {
           "__html": "Input description",
         }
       }
       data-testid="txt"
-      id=":r11:-description"
+      id=":r15:-description"
     />
     <div
-      className="border-dashed-2 relative cursor-pointer rounded-xl p-10 bg-white"
+      className="bg-white border-dashed-2 relative cursor-pointer rounded-xl p-10"
       onBlur={[Function]}
       onClick={[Function]}
       onDragEnter={[Function]}
@@ -38,7 +38,7 @@ Array [
       <input
         accept="image/png, image/jpeg"
         hidden={true}
-        id=":r11:"
+        id=":r15:"
         multiple={true}
         onChange={[Function]}
         onClick={[Function]}
@@ -60,7 +60,7 @@ Array [
           <div
             style={
               Object {
-                "height": 32,
+                "height": undefined,
                 "width": 24,
               }
             }
@@ -104,22 +104,22 @@ Array [
     <label
       className="mr-2 inline uppercase text-bold-body-300"
       data-testid="txt"
-      htmlFor=":r10:"
+      htmlFor=":r13:"
     >
       Input Label 
     </label>
     <p
-      className="text-light-body-300 with-inner-html"
+      className="text-body-400 with-inner-html"
       dangerouslySetInnerHTML={
         Object {
           "__html": "Input description",
         }
       }
       data-testid="txt"
-      id=":r10:-description"
+      id=":r13:-description"
     />
     <div
-      className="border-dashed-2 relative cursor-pointer rounded-xl p-10 bg-white"
+      className="bg-white border-dashed-2 relative cursor-pointer rounded-xl p-10"
       onBlur={[Function]}
       onClick={[Function]}
       onDragEnter={[Function]}
@@ -134,7 +134,7 @@ Array [
       <input
         accept="image/png, image/jpeg"
         hidden={true}
-        id=":r10:"
+        id=":r13:"
         onChange={[Function]}
         onClick={[Function]}
         style={
@@ -155,7 +155,7 @@ Array [
           <div
             style={
               Object {
-                "height": 32,
+                "height": undefined,
                 "width": 24,
               }
             }
@@ -190,3 +190,98 @@ Array [
   />,
 ]
 `;
+
+exports[`Storyshots Components/Elements/Inputs/File Variant For Modal 1`] = `
+Array [
+  <div
+    className="relative space-y-2"
+  >
+    <label
+      className="mr-2 inline uppercase text-bold-body-300"
+      data-testid="txt"
+      htmlFor=":r14:"
+    >
+      Input Label 
+    </label>
+    <p
+      className="text-body-400 with-inner-html"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "Input description",
+        }
+      }
+      data-testid="txt"
+      id=":r14:-description"
+    />
+    <div
+      className="bg-white flex flex-col items-center justify-center rounded-lg border border-grey-750 py-8"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onDragEnter={[Function]}
+      onDragLeave={[Function]}
+      onDragOver={[Function]}
+      onDrop={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      role="presentation"
+      tabIndex={0}
+    >
+      <input
+        accept="image/png, image/jpeg"
+        hidden={true}
+        id=":r14:"
+        onChange={[Function]}
+        onClick={[Function]}
+        style={
+          Object {
+            "display": "none",
+          }
+        }
+        tabIndex={-1}
+        type="file"
+      />
+      <div
+        style={
+          Object {
+            "height": undefined,
+            "width": 24,
+          }
+        }
+      />
+      <div
+        className="flex flex-col"
+      >
+        <p
+          className="text-center text-primary text-12-bold"
+          data-testid="txt"
+        >
+          Click to upload
+        </p>
+        <p
+          className="text-center text-12-light"
+          data-testid="txt"
+        >
+          or
+        </p>
+        <p
+          className="max-w-[210px] text-center text-12-light"
+          data-testid="txt"
+        >
+          drag and drop
+        </p>
+      </div>
+    </div>
+  </div>,
+  <div
+    className="flex items-center justify-between"
+  >
+    <p
+      className="mt-9 pr-5 text-primary text-12-bold"
+      data-testid="txt"
+    />
+  </div>,
+  <div
+    className="flex flex-col gap-4 w-full mt-2 mb-4"
+  />,
+]
+`;
diff --git a/src/components/elements/Inputs/Input/__snapshots__/Input.stories.storyshot b/src/components/elements/Inputs/Input/__snapshots__/Input.stories.storyshot
index e1712ba9f..68139c31d 100644
--- a/src/components/elements/Inputs/Input/__snapshots__/Input.stories.storyshot
+++ b/src/components/elements/Inputs/Input/__snapshots__/Input.stories.storyshot
@@ -7,28 +7,28 @@ exports[`Storyshots Components/Elements/Inputs/Input Default 1`] = `
   <label
     className="mr-2 inline uppercase text-bold-body-300"
     data-testid="txt"
-    htmlFor=":r12:"
+    htmlFor=":r16:"
   >
     Input Label 
   </label>
   <p
-    className="text-light-body-300 with-inner-html"
+    className="text-body-400 with-inner-html"
     dangerouslySetInnerHTML={
       Object {
         "__html": "Input description",
       }
     }
     data-testid="txt"
-    id=":r12:-description"
+    id=":r16:-description"
   />
   <div
     className="relative"
   >
     <input
-      aria-describedby=":r12:-description"
+      aria-describedby=":r16:-description"
       aria-invalid={false}
-      className="w-full outline-none transition-all duration-300 ease-in-out focus:ring-transparent px-3 py-[9px] rounded-lg focus:border-primary-500 border border-neutral-400"
-      id=":r12:"
+      className="w-full outline-none transition-all duration-300 ease-in-out focus:ring-transparent px-3 py-[9px] rounded-lg focus:border-primary-500 border border-neutral-200"
+      id=":r16:"
       placeholder="Input placeholder"
       type="text"
     />
@@ -43,29 +43,29 @@ exports[`Storyshots Components/Elements/Inputs/Input Disabled 1`] = `
   <label
     className="mr-2 inline uppercase text-bold-body-300"
     data-testid="txt"
-    htmlFor=":r14:"
+    htmlFor=":r18:"
   >
     Input Label 
   </label>
   <p
-    className="text-light-body-300 with-inner-html"
+    className="text-body-400 with-inner-html"
     dangerouslySetInnerHTML={
       Object {
         "__html": "Input description",
       }
     }
     data-testid="txt"
-    id=":r14:-description"
+    id=":r18:-description"
   />
   <div
     className="relative"
   >
     <input
-      aria-describedby=":r14:-description"
+      aria-describedby=":r18:-description"
       aria-invalid={false}
-      className="w-full outline-none transition-all duration-300 ease-in-out focus:ring-transparent px-3 py-[9px] rounded-lg focus:border-primary-500 border border-neutral-400"
+      className="w-full outline-none transition-all duration-300 ease-in-out focus:ring-transparent px-3 py-[9px] rounded-lg focus:border-primary-500 border border-neutral-200"
       disabled={true}
-      id=":r14:"
+      id=":r18:"
       placeholder="Input placeholder"
       type="text"
     />
@@ -80,29 +80,29 @@ exports[`Storyshots Components/Elements/Inputs/Input Error 1`] = `
   <label
     className="mr-2 inline uppercase text-bold-body-300"
     data-testid="txt"
-    htmlFor=":r13:"
+    htmlFor=":r17:"
   >
     Input Label 
   </label>
   <p
-    className="text-light-body-300 with-inner-html"
+    className="text-body-400 with-inner-html"
     dangerouslySetInnerHTML={
       Object {
         "__html": "Input description",
       }
     }
     data-testid="txt"
-    id=":r13:-description"
+    id=":r17:-description"
   />
   <div
     className="relative"
   >
     <input
-      aria-describedby=":r13:-description"
+      aria-describedby=":r17:-description"
       aria-errormessage="Field Required"
       aria-invalid={true}
       className="w-full outline-none transition-all duration-300 ease-in-out focus:ring-transparent px-3 py-[9px] rounded-lg focus:border-primary-500 border border-error focus:border-error"
-      id=":r13:"
+      id=":r17:"
       placeholder="Input placeholder"
       type="text"
     />
diff --git a/src/components/elements/Inputs/InputTable/__snapshots__/InputTable.stories.storyshot b/src/components/elements/Inputs/InputTable/__snapshots__/InputTable.stories.storyshot
index 27e204baf..bb841dc96 100644
--- a/src/components/elements/Inputs/InputTable/__snapshots__/InputTable.stories.storyshot
+++ b/src/components/elements/Inputs/InputTable/__snapshots__/InputTable.stories.storyshot
@@ -57,12 +57,11 @@ exports[`Storyshots Components/Elements/Inputs/InputTable Default 1`] = `
                 className="relative"
               >
                 <input
-                  aria-describedby=":r15:-description"
+                  aria-describedby=":r19:-description"
                   aria-invalid={false}
                   className="text-heading-100 text-center w-full outline-none transition-all duration-300 ease-in-out focus:ring-transparent border-0 border-b py-[10px] px-0 pl-4 border-b-neutral-400"
-                  id=":r15:"
+                  id=":r19:"
                   name="full-time-jobs"
-                  onChange={[Function]}
                   onKeyDown={[Function]}
                   placeholder="Enter a value"
                   type="number"
@@ -93,12 +92,11 @@ exports[`Storyshots Components/Elements/Inputs/InputTable Default 1`] = `
                 className="relative"
               >
                 <input
-                  aria-describedby=":r16:-description"
+                  aria-describedby=":r1a:-description"
                   aria-invalid={false}
                   className="text-heading-100 text-center w-full outline-none transition-all duration-300 ease-in-out focus:ring-transparent border-0 border-b py-[10px] px-0 pl-4 border-b-neutral-400"
-                  id=":r16:"
+                  id=":r1a:"
                   name="part-time-jobs"
-                  onChange={[Function]}
                   onKeyDown={[Function]}
                   placeholder="Enter a value"
                   type="number"
@@ -129,12 +127,11 @@ exports[`Storyshots Components/Elements/Inputs/InputTable Default 1`] = `
                 className="relative"
               >
                 <input
-                  aria-describedby=":r17:-description"
+                  aria-describedby=":r1b:-description"
                   aria-invalid={false}
                   className="text-heading-100 text-center w-full outline-none transition-all duration-300 ease-in-out focus:ring-transparent border-0 border-b py-[10px] px-0 pl-4 border-b-neutral-400"
-                  id=":r17:"
+                  id=":r1b:"
                   name="women-employees"
-                  onChange={[Function]}
                   onKeyDown={[Function]}
                   placeholder="Enter a value"
                   type="number"
diff --git a/src/components/elements/Inputs/LanguageDropdown/__snapshots__/LanguagesDropdown.stories.storyshot b/src/components/elements/Inputs/LanguageDropdown/__snapshots__/LanguagesDropdown.stories.storyshot
index aaa73a5c6..a89146289 100644
--- a/src/components/elements/Inputs/LanguageDropdown/__snapshots__/LanguagesDropdown.stories.storyshot
+++ b/src/components/elements/Inputs/LanguageDropdown/__snapshots__/LanguagesDropdown.stories.storyshot
@@ -12,7 +12,7 @@ exports[`Storyshots Components/Elements/Inputs/LanguagesDropdown Default 1`] = `
       aria-expanded={false}
       className="flex items-center justify-between p-2"
       data-headlessui-state=""
-      id="headlessui-popover-button-:r18:"
+      id="headlessui-popover-button-:r1c:"
       onClick={[Function]}
       onKeyDown={[Function]}
       onKeyUp={[Function]}
@@ -28,7 +28,7 @@ exports[`Storyshots Components/Elements/Inputs/LanguagesDropdown Default 1`] = `
         }
       />
       <span
-        className="mr-2 whitespace-nowrap text-sm uppercase text-neutral-900"
+        className="text-14-light mr-2 whitespace-nowrap text-sm uppercase text-darkCustom"
       >
         English
       </span>
diff --git a/src/components/elements/Inputs/Radio/__snapshots__/Radio.stories.storyshot b/src/components/elements/Inputs/Radio/__snapshots__/Radio.stories.storyshot
index f0f4d871b..1688b7fa1 100644
--- a/src/components/elements/Inputs/Radio/__snapshots__/Radio.stories.storyshot
+++ b/src/components/elements/Inputs/Radio/__snapshots__/Radio.stories.storyshot
@@ -3,7 +3,7 @@
 exports[`Storyshots Components/Elements/Inputs/Radio Default 1`] = `
 <label
   className="flex items-center undefined"
-  htmlFor=":r1d:"
+  htmlFor=":r1h:"
 >
   <p
     className="text-light-caption-200"
@@ -13,7 +13,7 @@ exports[`Storyshots Components/Elements/Inputs/Radio Default 1`] = `
   </p>
   <input
     checked={true}
-    id=":r1d:"
+    id=":r1h:"
     label="Radio Label"
     type="radio"
   />
diff --git a/src/components/elements/Inputs/RadioGroup/__snapshots__/RadioGroup.stories.storyshot b/src/components/elements/Inputs/RadioGroup/__snapshots__/RadioGroup.stories.storyshot
index 11a8a76e6..0479a2b47 100644
--- a/src/components/elements/Inputs/RadioGroup/__snapshots__/RadioGroup.stories.storyshot
+++ b/src/components/elements/Inputs/RadioGroup/__snapshots__/RadioGroup.stories.storyshot
@@ -12,14 +12,14 @@ exports[`Storyshots Components/Elements/Inputs/RadioGroup Default 1`] = `
   </label>
   <div
     className="space-y-2"
-    id="headlessui-radiogroup-:r1e:"
+    id="headlessui-radiogroup-:r1i:"
     onKeyDown={[Function]}
     role="radiogroup"
   >
     <div
       aria-checked="false"
       data-headlessui-state=""
-      id="headlessui-radiogroup-option-:r1f:"
+      id="headlessui-radiogroup-option-:r1j:"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -31,7 +31,7 @@ exports[`Storyshots Components/Elements/Inputs/RadioGroup Default 1`] = `
       >
         <label
           className="flex items-center flex flex-row-reverse items-center justify-end gap-3 "
-          htmlFor=":r1g:"
+          htmlFor=":r1k:"
         >
           <p
             className="text-light-caption-200"
@@ -42,7 +42,7 @@ exports[`Storyshots Components/Elements/Inputs/RadioGroup Default 1`] = `
           <input
             checked={false}
             className="flex flex-row-reverse items-center justify-end gap-3 "
-            id=":r1g:"
+            id=":r1k:"
             label="Yes"
             onChange={[Function]}
             type="radio"
@@ -53,7 +53,7 @@ exports[`Storyshots Components/Elements/Inputs/RadioGroup Default 1`] = `
     <div
       aria-checked="false"
       data-headlessui-state=""
-      id="headlessui-radiogroup-option-:r1h:"
+      id="headlessui-radiogroup-option-:r1l:"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -65,7 +65,7 @@ exports[`Storyshots Components/Elements/Inputs/RadioGroup Default 1`] = `
       >
         <label
           className="flex items-center flex flex-row-reverse items-center justify-end gap-3 "
-          htmlFor=":r1i:"
+          htmlFor=":r1m:"
         >
           <p
             className="text-light-caption-200"
@@ -76,7 +76,7 @@ exports[`Storyshots Components/Elements/Inputs/RadioGroup Default 1`] = `
           <input
             checked={false}
             className="flex flex-row-reverse items-center justify-end gap-3 "
-            id=":r1i:"
+            id=":r1m:"
             label="No"
             onChange={[Function]}
             type="radio"
diff --git a/src/components/elements/Inputs/Select/__snapshots__/Select.stories.storyshot b/src/components/elements/Inputs/Select/__snapshots__/Select.stories.storyshot
index 7647e3e6a..05537954f 100644
--- a/src/components/elements/Inputs/Select/__snapshots__/Select.stories.storyshot
+++ b/src/components/elements/Inputs/Select/__snapshots__/Select.stories.storyshot
@@ -7,26 +7,26 @@ exports[`Storyshots Components/Elements/Inputs/Select Default 1`] = `
   <label
     className="mr-2 inline uppercase text-bold-body-300"
     data-testid="txt"
-    htmlFor=":r1j:"
+    htmlFor=":r1n:"
   >
     Select label 
   </label>
   <p
-    className="text-light-body-300 with-inner-html"
+    className="text-body-400 with-inner-html"
     dangerouslySetInnerHTML={
       Object {
         "__html": "Select description",
       }
     }
     data-testid="txt"
-    id=":r1j:-description"
+    id=":r1n:-description"
   />
   <div
     className="space-y-3"
   >
     <label
       className="flex items-center flex-row-reverse justify-end gap-3"
-      htmlFor=":r1k:"
+      htmlFor=":r1o:"
     >
       <p
         className="text-light-caption-200"
@@ -37,7 +37,7 @@ exports[`Storyshots Components/Elements/Inputs/Select Default 1`] = `
       <input
         checked={false}
         className="flex-row-reverse justify-end gap-3"
-        id=":r1k:"
+        id=":r1o:"
         label="Option 1"
         onClick={[Function]}
         type="radio"
@@ -45,7 +45,7 @@ exports[`Storyshots Components/Elements/Inputs/Select Default 1`] = `
     </label>
     <label
       className="flex items-center flex-row-reverse justify-end gap-3"
-      htmlFor=":r1l:"
+      htmlFor=":r1p:"
     >
       <p
         className="text-light-caption-200"
@@ -56,7 +56,7 @@ exports[`Storyshots Components/Elements/Inputs/Select Default 1`] = `
       <input
         checked={false}
         className="flex-row-reverse justify-end gap-3"
-        id=":r1l:"
+        id=":r1p:"
         label="Option 2"
         onClick={[Function]}
         type="radio"
@@ -64,7 +64,7 @@ exports[`Storyshots Components/Elements/Inputs/Select Default 1`] = `
     </label>
     <label
       className="flex items-center flex-row-reverse justify-end gap-3"
-      htmlFor=":r1m:"
+      htmlFor=":r1q:"
     >
       <p
         className="text-light-caption-200"
@@ -75,7 +75,7 @@ exports[`Storyshots Components/Elements/Inputs/Select Default 1`] = `
       <input
         checked={false}
         className="flex-row-reverse justify-end gap-3"
-        id=":r1m:"
+        id=":r1q:"
         label="Option 3"
         onClick={[Function]}
         type="radio"
@@ -83,7 +83,7 @@ exports[`Storyshots Components/Elements/Inputs/Select Default 1`] = `
     </label>
     <label
       className="flex items-center flex-row-reverse justify-end gap-3"
-      htmlFor=":r1n:"
+      htmlFor=":r1r:"
     >
       <p
         className="text-light-caption-200"
@@ -94,7 +94,7 @@ exports[`Storyshots Components/Elements/Inputs/Select Default 1`] = `
       <input
         checked={false}
         className="flex-row-reverse justify-end gap-3"
-        id=":r1n:"
+        id=":r1r:"
         label="Option 4"
         onClick={[Function]}
         type="radio"
@@ -102,7 +102,7 @@ exports[`Storyshots Components/Elements/Inputs/Select Default 1`] = `
     </label>
     <label
       className="flex items-center flex-row-reverse justify-end gap-3"
-      htmlFor=":r1o:"
+      htmlFor=":r1s:"
     >
       <p
         className="text-light-caption-200"
@@ -113,7 +113,7 @@ exports[`Storyshots Components/Elements/Inputs/Select Default 1`] = `
       <input
         checked={false}
         className="flex-row-reverse justify-end gap-3"
-        id=":r1o:"
+        id=":r1s:"
         label="Option 5"
         onClick={[Function]}
         type="radio"
@@ -121,7 +121,7 @@ exports[`Storyshots Components/Elements/Inputs/Select Default 1`] = `
     </label>
     <label
       className="flex items-center flex-row-reverse justify-end gap-3"
-      htmlFor=":r1p:"
+      htmlFor=":r1t:"
     >
       <p
         className="text-light-caption-200"
@@ -132,7 +132,7 @@ exports[`Storyshots Components/Elements/Inputs/Select Default 1`] = `
       <input
         checked={false}
         className="flex-row-reverse justify-end gap-3"
-        id=":r1p:"
+        id=":r1t:"
         label="Option 6"
         onClick={[Function]}
         type="radio"
@@ -140,7 +140,7 @@ exports[`Storyshots Components/Elements/Inputs/Select Default 1`] = `
     </label>
     <label
       className="flex items-center flex-row-reverse justify-end gap-3"
-      htmlFor=":r1q:"
+      htmlFor=":r1u:"
     >
       <p
         className="text-light-caption-200"
@@ -151,7 +151,7 @@ exports[`Storyshots Components/Elements/Inputs/Select Default 1`] = `
       <input
         checked={false}
         className="flex-row-reverse justify-end gap-3"
-        id=":r1q:"
+        id=":r1u:"
         label="Option 7"
         onClick={[Function]}
         type="radio"
@@ -159,7 +159,7 @@ exports[`Storyshots Components/Elements/Inputs/Select Default 1`] = `
     </label>
     <label
       className="flex items-center flex-row-reverse justify-end gap-3"
-      htmlFor=":r1r:"
+      htmlFor=":r1v:"
     >
       <p
         className="text-light-caption-200"
@@ -170,7 +170,7 @@ exports[`Storyshots Components/Elements/Inputs/Select Default 1`] = `
       <input
         checked={false}
         className="flex-row-reverse justify-end gap-3"
-        id=":r1r:"
+        id=":r1v:"
         label="Option 8"
         onClick={[Function]}
         type="radio"
@@ -178,7 +178,7 @@ exports[`Storyshots Components/Elements/Inputs/Select Default 1`] = `
     </label>
     <label
       className="flex items-center flex-row-reverse justify-end gap-3"
-      htmlFor=":r1s:"
+      htmlFor=":r20:"
     >
       <p
         className="text-light-caption-200"
@@ -189,7 +189,7 @@ exports[`Storyshots Components/Elements/Inputs/Select Default 1`] = `
       <input
         checked={false}
         className="flex-row-reverse justify-end gap-3"
-        id=":r1s:"
+        id=":r20:"
         label="Option 9"
         onClick={[Function]}
         type="radio"
diff --git a/src/components/elements/Inputs/SelectImage/__snapshots__/SelectImage.stories.storyshot b/src/components/elements/Inputs/SelectImage/__snapshots__/SelectImage.stories.storyshot
index 6f083f2e5..59d478da4 100644
--- a/src/components/elements/Inputs/SelectImage/__snapshots__/SelectImage.stories.storyshot
+++ b/src/components/elements/Inputs/SelectImage/__snapshots__/SelectImage.stories.storyshot
@@ -7,26 +7,26 @@ exports[`Storyshots Components/Elements/Inputs/SelectImage Default 1`] = `
   <label
     className="mr-2 inline uppercase text-bold-body-300"
     data-testid="txt"
-    htmlFor=":r1t:"
+    htmlFor=":r21:"
   >
     Select Image label 
   </label>
   <p
-    className="text-light-body-300 with-inner-html"
+    className="text-body-400 with-inner-html"
     dangerouslySetInnerHTML={
       Object {
         "__html": "Select Image description",
       }
     }
     data-testid="txt"
-    id=":r1t:-description"
+    id=":r21:-description"
   />
   <div
     className="mx-auto !mt-4 flex max-w-[573px] flex-wrap justify-center gap-4"
   >
     <label
       className="relative flex-row-reverse justify-end gap-3"
-      htmlFor=":r1u:"
+      htmlFor=":r22:"
     >
       <div
         className="flex flex-col items-center gap-2 cursor-pointer"
@@ -49,7 +49,7 @@ exports[`Storyshots Components/Elements/Inputs/SelectImage Default 1`] = `
       <input
         checked={false}
         className="absolute top-0 opacity-0"
-        id=":r1u:"
+        id=":r22:"
         label={
           <SelectImageLabel
             imageUrl="https://cdn.britannica.com/98/214598-050-9879F2FA/giant-sequoia-tree-Sequoia-National-Park-California.jpg"
@@ -63,7 +63,7 @@ exports[`Storyshots Components/Elements/Inputs/SelectImage Default 1`] = `
     </label>
     <label
       className="relative flex-row-reverse justify-end gap-3"
-      htmlFor=":r1v:"
+      htmlFor=":r23:"
     >
       <div
         className="flex flex-col items-center gap-2 cursor-pointer"
@@ -86,7 +86,7 @@ exports[`Storyshots Components/Elements/Inputs/SelectImage Default 1`] = `
       <input
         checked={false}
         className="absolute top-0 opacity-0"
-        id=":r1v:"
+        id=":r23:"
         label={
           <SelectImageLabel
             imageUrl="https://cdn.britannica.com/98/214598-050-9879F2FA/giant-sequoia-tree-Sequoia-National-Park-California.jpg"
@@ -100,7 +100,7 @@ exports[`Storyshots Components/Elements/Inputs/SelectImage Default 1`] = `
     </label>
     <label
       className="relative flex-row-reverse justify-end gap-3"
-      htmlFor=":r20:"
+      htmlFor=":r24:"
     >
       <div
         className="flex flex-col items-center gap-2 cursor-pointer"
@@ -123,7 +123,7 @@ exports[`Storyshots Components/Elements/Inputs/SelectImage Default 1`] = `
       <input
         checked={false}
         className="absolute top-0 opacity-0"
-        id=":r20:"
+        id=":r24:"
         label={
           <SelectImageLabel
             imageUrl="https://cdn.britannica.com/98/214598-050-9879F2FA/giant-sequoia-tree-Sequoia-National-Park-California.jpg"
@@ -137,7 +137,7 @@ exports[`Storyshots Components/Elements/Inputs/SelectImage Default 1`] = `
     </label>
     <label
       className="relative flex-row-reverse justify-end gap-3"
-      htmlFor=":r21:"
+      htmlFor=":r25:"
     >
       <div
         className="flex flex-col items-center gap-2 cursor-pointer"
@@ -160,7 +160,7 @@ exports[`Storyshots Components/Elements/Inputs/SelectImage Default 1`] = `
       <input
         checked={false}
         className="absolute top-0 opacity-0"
-        id=":r21:"
+        id=":r25:"
         label={
           <SelectImageLabel
             imageUrl="https://cdn.britannica.com/98/214598-050-9879F2FA/giant-sequoia-tree-Sequoia-National-Park-California.jpg"
@@ -174,7 +174,7 @@ exports[`Storyshots Components/Elements/Inputs/SelectImage Default 1`] = `
     </label>
     <label
       className="relative flex-row-reverse justify-end gap-3"
-      htmlFor=":r22:"
+      htmlFor=":r26:"
     >
       <div
         className="flex flex-col items-center gap-2 cursor-pointer"
@@ -197,7 +197,7 @@ exports[`Storyshots Components/Elements/Inputs/SelectImage Default 1`] = `
       <input
         checked={false}
         className="absolute top-0 opacity-0"
-        id=":r22:"
+        id=":r26:"
         label={
           <SelectImageLabel
             imageUrl="https://cdn.britannica.com/98/214598-050-9879F2FA/giant-sequoia-tree-Sequoia-National-Park-California.jpg"
@@ -211,7 +211,7 @@ exports[`Storyshots Components/Elements/Inputs/SelectImage Default 1`] = `
     </label>
     <label
       className="relative flex-row-reverse justify-end gap-3"
-      htmlFor=":r23:"
+      htmlFor=":r27:"
     >
       <div
         className="flex flex-col items-center gap-2 cursor-pointer"
@@ -234,7 +234,7 @@ exports[`Storyshots Components/Elements/Inputs/SelectImage Default 1`] = `
       <input
         checked={false}
         className="absolute top-0 opacity-0"
-        id=":r23:"
+        id=":r27:"
         label={
           <SelectImageLabel
             imageUrl="https://cdn.britannica.com/98/214598-050-9879F2FA/giant-sequoia-tree-Sequoia-National-Park-California.jpg"
@@ -248,7 +248,7 @@ exports[`Storyshots Components/Elements/Inputs/SelectImage Default 1`] = `
     </label>
     <label
       className="relative flex-row-reverse justify-end gap-3"
-      htmlFor=":r24:"
+      htmlFor=":r28:"
     >
       <div
         className="flex flex-col items-center gap-2 cursor-pointer"
@@ -271,7 +271,7 @@ exports[`Storyshots Components/Elements/Inputs/SelectImage Default 1`] = `
       <input
         checked={false}
         className="absolute top-0 opacity-0"
-        id=":r24:"
+        id=":r28:"
         label={
           <SelectImageLabel
             imageUrl="https://cdn.britannica.com/98/214598-050-9879F2FA/giant-sequoia-tree-Sequoia-National-Park-California.jpg"
@@ -285,7 +285,7 @@ exports[`Storyshots Components/Elements/Inputs/SelectImage Default 1`] = `
     </label>
     <label
       className="relative flex-row-reverse justify-end gap-3"
-      htmlFor=":r25:"
+      htmlFor=":r29:"
     >
       <div
         className="flex flex-col items-center gap-2 cursor-pointer"
@@ -308,7 +308,7 @@ exports[`Storyshots Components/Elements/Inputs/SelectImage Default 1`] = `
       <input
         checked={false}
         className="absolute top-0 opacity-0"
-        id=":r25:"
+        id=":r29:"
         label={
           <SelectImageLabel
             imageUrl="https://cdn.britannica.com/98/214598-050-9879F2FA/giant-sequoia-tree-Sequoia-National-Park-California.jpg"
@@ -322,7 +322,7 @@ exports[`Storyshots Components/Elements/Inputs/SelectImage Default 1`] = `
     </label>
     <label
       className="relative flex-row-reverse justify-end gap-3"
-      htmlFor=":r26:"
+      htmlFor=":r2a:"
     >
       <div
         className="flex flex-col items-center gap-2 cursor-pointer"
@@ -345,7 +345,7 @@ exports[`Storyshots Components/Elements/Inputs/SelectImage Default 1`] = `
       <input
         checked={false}
         className="absolute top-0 opacity-0"
-        id=":r26:"
+        id=":r2a:"
         label={
           <SelectImageLabel
             imageUrl="https://cdn.britannica.com/98/214598-050-9879F2FA/giant-sequoia-tree-Sequoia-National-Park-California.jpg"
diff --git a/src/components/elements/Inputs/TreeSpeciesInput/__snapshots__/TreeSpeciesInput.stories.storyshot b/src/components/elements/Inputs/TreeSpeciesInput/__snapshots__/TreeSpeciesInput.stories.storyshot
index edbb74ea9..b6fd57fc7 100644
--- a/src/components/elements/Inputs/TreeSpeciesInput/__snapshots__/TreeSpeciesInput.stories.storyshot
+++ b/src/components/elements/Inputs/TreeSpeciesInput/__snapshots__/TreeSpeciesInput.stories.storyshot
@@ -7,19 +7,19 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput Default 1`] = `
   <label
     className="mr-2 inline uppercase text-bold-body-300"
     data-testid="txt"
-    htmlFor=":r27:"
+    htmlFor=":r2b:"
   >
     Tree Species Grown *
   </label>
   <p
-    className="text-light-body-300 with-inner-html"
+    className="text-body-400 with-inner-html"
     dangerouslySetInnerHTML={
       Object {
         "__html": "List the tree species that you expect to restore on this project, across all sites. Please enter the scientific name for each tree species.",
       }
     }
     data-testid="txt"
-    id=":r27:-description"
+    id=":r2b:-description"
   />
   <div>
     <div
@@ -47,13 +47,12 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput Default 1`] = `
             className="relative"
           >
             <input
-              aria-describedby=":r28:-description"
+              aria-describedby=":r2c:-description"
               aria-invalid={false}
               className="w-full outline-none transition-all duration-300 ease-in-out focus:ring-transparent border-0 border-b py-[10px] px-0 border-b-neutral-400"
               defaultValue="Test"
-              id=":r28:"
+              id=":r2c:"
               name="name"
-              onChange={[Function]}
               onKeyDownCapture={[Function]}
               placeholder="Species Name"
               type="text"
@@ -76,7 +75,7 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput Default 1`] = `
       </div>
     </div>
     <button
-      className="mt-4 w-fit bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-1.75 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+      className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-[10.5px] rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content mt-4 w-fit"
       onClick={[Function]}
     >
       <div
@@ -88,7 +87,7 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput Default 1`] = `
         }
       />
       <span
-        className="text-bold-caption-200 pt-0.75 leading-3"
+        className="flex items-center text-bold-caption-200"
       >
         Add Another undefined
       </span>
@@ -104,19 +103,19 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput With Number 1`]
   <label
     className="mr-2 inline uppercase text-bold-body-300"
     data-testid="txt"
-    htmlFor=":r29:"
+    htmlFor=":r2d:"
   >
     Tree Species Grown *
   </label>
   <p
-    className="text-light-body-300 with-inner-html"
+    className="text-body-400 with-inner-html"
     dangerouslySetInnerHTML={
       Object {
         "__html": "List the tree species that you expect to restore on this project, across all sites. Please enter the scientific name for each tree species.",
       }
     }
     data-testid="txt"
-    id=":r29:-description"
+    id=":r2d:-description"
   />
   <div>
     <div
@@ -150,13 +149,12 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput With Number 1`]
             className="relative"
           >
             <input
-              aria-describedby=":r2a:-description"
+              aria-describedby=":r2e:-description"
               aria-invalid={false}
               className="w-full outline-none transition-all duration-300 ease-in-out focus:ring-transparent border-0 border-b py-[10px] px-0 border-b-neutral-400"
               defaultValue="Test"
-              id=":r2a:"
+              id=":r2e:"
               name="name"
-              onChange={[Function]}
               onKeyDownCapture={[Function]}
               placeholder="Species Name"
               type="text"
@@ -170,13 +168,12 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput With Number 1`]
             className="relative"
           >
             <input
-              aria-describedby=":r2b:-description"
+              aria-describedby=":r2f:-description"
               aria-invalid={false}
               className="w-full outline-none transition-all duration-300 ease-in-out focus:ring-transparent border-0 border-b py-[10px] px-0 pl-4 border-b-neutral-400"
               defaultValue={23}
-              id=":r2b:"
+              id=":r2f:"
               name="amount"
-              onChange={[Function]}
               onKeyDown={[Function]}
               onKeyDownCapture={[Function]}
               placeholder="Enter value"
@@ -200,7 +197,7 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput With Number 1`]
       </div>
     </div>
     <button
-      className="mt-4 w-fit bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-1.75 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+      className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-[10.5px] rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content mt-4 w-fit"
       onClick={[Function]}
     >
       <div
@@ -212,7 +209,7 @@ exports[`Storyshots Components/Elements/Inputs/TreeSpeciesInput With Number 1`]
         }
       />
       <span
-        className="text-bold-caption-200 pt-0.75 leading-3"
+        className="flex items-center text-bold-caption-200"
       >
         Add Another undefined
       </span>
diff --git a/src/components/elements/Inputs/textArea/__snapshots__/TextArea.stories.storyshot b/src/components/elements/Inputs/textArea/__snapshots__/TextArea.stories.storyshot
index 4a36174c8..ddc3dc665 100644
--- a/src/components/elements/Inputs/textArea/__snapshots__/TextArea.stories.storyshot
+++ b/src/components/elements/Inputs/textArea/__snapshots__/TextArea.stories.storyshot
@@ -7,24 +7,26 @@ exports[`Storyshots Components/Elements/Inputs/TextArea Default 1`] = `
   <label
     className="mr-2 inline uppercase text-bold-body-300"
     data-testid="txt"
-    htmlFor=":r2c:"
+    htmlFor=":r2g:"
   >
     Input Label 
   </label>
   <p
-    className="text-light-body-300 with-inner-html"
+    className="text-body-400 with-inner-html"
     dangerouslySetInnerHTML={
       Object {
         "__html": "Input description",
       }
     }
     data-testid="txt"
-    id=":r2c:-description"
+    id=":r2g:-description"
   />
   <textarea
     className="min-h-[150px] w-full rounded-lg px-3 py-2 focus:border-primary-500 outline-none transition-all duration-300 ease-in-out focus:ring-transparent border-light "
-    id=":r2c:"
+    id=":r2g:"
+    onChange={[Function]}
     placeholder="Input placeholder"
+    value=""
   />
 </div>
 `;
diff --git a/src/components/elements/LandingPage/__snapshots__/AlternatingSection.stories.storyshot b/src/components/elements/LandingPage/__snapshots__/AlternatingSection.stories.storyshot
index 6aabb122e..f84bb9534 100644
--- a/src/components/elements/LandingPage/__snapshots__/AlternatingSection.stories.storyshot
+++ b/src/components/elements/LandingPage/__snapshots__/AlternatingSection.stories.storyshot
@@ -26,14 +26,14 @@ exports[`Storyshots Components/Elements/LandingPage/AlternatingSection Left 1`]
         data-testid="txt"
       />
       <a
-        className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+        className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
         href="/"
         onClick={[Function]}
         onMouseEnter={[Function]}
         onTouchStart={[Function]}
       >
         <span
-          className="text-bold-caption-200 pt-0.75 leading-3"
+          className="flex items-center text-bold-caption-200"
         >
           Learn more
         </span>
@@ -104,14 +104,14 @@ exports[`Storyshots Components/Elements/LandingPage/AlternatingSection Right 1`]
         data-testid="txt"
       />
       <a
-        className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+        className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
         href="/"
         onClick={[Function]}
         onMouseEnter={[Function]}
         onTouchStart={[Function]}
       >
         <span
-          className="text-bold-caption-200 pt-0.75 leading-3"
+          className="flex items-center text-bold-caption-200"
         >
           Learn more
         </span>
diff --git a/src/components/elements/LandingPage/__snapshots__/TwoByOneSection.stories.storyshot b/src/components/elements/LandingPage/__snapshots__/TwoByOneSection.stories.storyshot
index 050423bdb..38c3daa47 100644
--- a/src/components/elements/LandingPage/__snapshots__/TwoByOneSection.stories.storyshot
+++ b/src/components/elements/LandingPage/__snapshots__/TwoByOneSection.stories.storyshot
@@ -35,10 +35,10 @@ exports[`Storyshots Components/Elements/LandingPage/TwoByOneSection Primary 1`]
           Behind TerraMatch is a team of restoration project specialists, who want to x, y, x. We are gathering a document of support materials to help projects prepare for upcoming applications and
         </p>
         <button
-          className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+          className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
         >
           <span
-            className="text-bold-caption-200 pt-0.75 leading-3"
+            className="flex items-center text-bold-caption-200"
           >
             Launch Resource Library
           </span>
diff --git a/src/components/elements/LandingPage/__snapshots__/UpcomingOpportunities.stories.storyshot b/src/components/elements/LandingPage/__snapshots__/UpcomingOpportunities.stories.storyshot
index 64613b5d2..57a2a84d2 100644
--- a/src/components/elements/LandingPage/__snapshots__/UpcomingOpportunities.stories.storyshot
+++ b/src/components/elements/LandingPage/__snapshots__/UpcomingOpportunities.stories.storyshot
@@ -33,14 +33,14 @@ exports[`Storyshots Components/Elements/LandingPage/UpcomingOpportunities Defaul
         Land Accelerator Africa 2022
       </p>
       <a
-        className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-1.75 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+        className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-[10.5px] rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
         href="/"
         onClick={[Function]}
         onMouseEnter={[Function]}
         onTouchStart={[Function]}
       >
         <span
-          className="text-bold-caption-200 pt-0.75 leading-3"
+          className="flex items-center text-bold-caption-200"
         >
           Find out more
         </span>
@@ -62,14 +62,14 @@ exports[`Storyshots Components/Elements/LandingPage/UpcomingOpportunities Defaul
         Terramatch RFP
       </p>
       <a
-        className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-1.75 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+        className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-[10.5px] rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
         href="/"
         onClick={[Function]}
         onMouseEnter={[Function]}
         onTouchStart={[Function]}
       >
         <span
-          className="text-bold-caption-200 pt-0.75 leading-3"
+          className="flex items-center text-bold-caption-200"
         >
           Find out more
         </span>
@@ -91,14 +91,14 @@ exports[`Storyshots Components/Elements/LandingPage/UpcomingOpportunities Defaul
         Land Accelerator fund
       </p>
       <a
-        className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-1.75 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+        className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-[10.5px] rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
         href="/"
         onClick={[Function]}
         onMouseEnter={[Function]}
         onTouchStart={[Function]}
       >
         <span
-          className="text-bold-caption-200 pt-0.75 leading-3"
+          className="flex items-center text-bold-caption-200"
         >
           Find out more
         </span>
diff --git a/src/components/elements/Menu/Menu.stories.tsx b/src/components/elements/Menu/Menu.stories.tsx
index 206590973..3aa74bf0d 100644
--- a/src/components/elements/Menu/Menu.stories.tsx
+++ b/src/components/elements/Menu/Menu.stories.tsx
@@ -19,12 +19,12 @@ type Story = StoryObj<typeof Menu>;
 const itemsMenu = [
   { id: "1", render: () => <div>Test1</div>, onClick: () => {} },
   { id: "2", render: () => <div>Test2</div>, onClick: () => {} },
-  { id: "2", render: () => <div>Test3</div>, onClick: () => {} }
+  { id: "3", render: () => <div>Test3</div>, onClick: () => {} }
 ];
 const itemsLargeMenu = [
   { id: "1", render: () => <div>Test 1 this is a large text example</div>, onClick: () => {} },
   { id: "2", render: () => <div>Test 2 this is a large text example</div>, onClick: () => {} },
-  { id: "2", render: () => <div>Test 3 this is a large text example</div>, onClick: () => {} }
+  { id: "3", render: () => <div>Test 3 this is a large text example</div>, onClick: () => {} }
 ];
 export const Primary: Story = {
   args: {
diff --git a/src/components/elements/Paper/__snapshots__/Paper.stories.storyshot b/src/components/elements/Paper/__snapshots__/Paper.stories.storyshot
index c297eef25..5e4c3fd8c 100644
--- a/src/components/elements/Paper/__snapshots__/Paper.stories.storyshot
+++ b/src/components/elements/Paper/__snapshots__/Paper.stories.storyshot
@@ -2,7 +2,7 @@
 
 exports[`Storyshots Components/Extensive/Paper Default 1`] = `
 <div
-  className="w-full rounded-xl bg-white p-8 shadow"
+  className="w-full rounded-xl border border-neutral-200 bg-white p-8"
 >
   <p>
     Paper content
diff --git a/src/components/elements/Pill/__snapshots__/Pill.stories.storyshot b/src/components/elements/Pill/__snapshots__/Pill.stories.storyshot
index 5ff4fb0b6..a019e6d0e 100644
--- a/src/components/elements/Pill/__snapshots__/Pill.stories.storyshot
+++ b/src/components/elements/Pill/__snapshots__/Pill.stories.storyshot
@@ -8,7 +8,7 @@ exports[`Storyshots Components/Elements/Pill Default 1`] = `
     className="bg-tertiary flex items-center justify-center rounded-2xl py-0.5 px-3 first-letter:uppercase"
   >
     <p
-      className="text-black mt-[3px] text-bold-caption-200"
+      className="text-black flex h-fit items-center text-bold-caption-200"
       data-testid="txt"
     >
       Pill children
@@ -25,7 +25,7 @@ exports[`Storyshots Components/Elements/Pill Error 1`] = `
     className="bg-error-200 flex items-center justify-center rounded-2xl py-0.5 px-3 first-letter:uppercase"
   >
     <p
-      className="text-black mt-[3px] text-bold-caption-200"
+      className="text-black flex h-fit items-center text-bold-caption-200"
       data-testid="txt"
     >
       Error
@@ -42,7 +42,7 @@ exports[`Storyshots Components/Elements/Pill Neutral 1`] = `
     className="bg-neutral-200 flex items-center justify-center rounded-2xl py-0.5 px-3 first-letter:uppercase"
   >
     <p
-      className="text-black mt-[3px] text-bold-caption-200"
+      className="text-black flex h-fit items-center text-bold-caption-200"
       data-testid="txt"
     >
       Neutral
@@ -59,7 +59,7 @@ exports[`Storyshots Components/Elements/Pill Primary 1`] = `
     className="bg-primary-200 flex items-center justify-center rounded-2xl py-0.5 px-3 first-letter:uppercase"
   >
     <p
-      className="text-black mt-[3px] text-bold-caption-200"
+      className="text-black flex h-fit items-center text-bold-caption-200"
       data-testid="txt"
     >
       Primary
@@ -76,7 +76,7 @@ exports[`Storyshots Components/Elements/Pill Secondary 1`] = `
     className="bg-secondary-200 flex items-center justify-center rounded-2xl py-0.5 px-3 first-letter:uppercase"
   >
     <p
-      className="text-black mt-[3px] text-bold-caption-200"
+      className="text-black flex h-fit items-center text-bold-caption-200"
       data-testid="txt"
     >
       Secondary
@@ -93,7 +93,7 @@ exports[`Storyshots Components/Elements/Pill Success 1`] = `
     className="bg-success-200 flex items-center justify-center rounded-2xl py-0.5 px-3 first-letter:uppercase"
   >
     <p
-      className="text-black mt-[3px] text-bold-caption-200"
+      className="text-black flex h-fit items-center text-bold-caption-200"
       data-testid="txt"
     >
       success
@@ -110,7 +110,7 @@ exports[`Storyshots Components/Elements/Pill Tertiary 1`] = `
     className="bg-tertiary-200 flex items-center justify-center rounded-2xl py-0.5 px-3 first-letter:uppercase"
   >
     <p
-      className="text-black mt-[3px] text-bold-caption-200"
+      className="text-black flex h-fit items-center text-bold-caption-200"
       data-testid="txt"
     >
       Tertiary
diff --git a/src/components/elements/ProgressBar/LinerProgressbar/__snapshots__/LinerProgressbar.stories.storyshot b/src/components/elements/ProgressBar/LinerProgressbar/__snapshots__/LinerProgressbar.stories.storyshot
index bc372d02b..4ade2a40b 100644
--- a/src/components/elements/ProgressBar/LinerProgressbar/__snapshots__/LinerProgressbar.stories.storyshot
+++ b/src/components/elements/ProgressBar/LinerProgressbar/__snapshots__/LinerProgressbar.stories.storyshot
@@ -2,11 +2,11 @@
 
 exports[`Storyshots Components/Elements/ProgressBar Default 1`] = `
 <div
-  className="h-[9px] w-full bg-neutral-200 "
+  className="h-[9px] w-full rounded-full bg-neutral-200 "
   role="progressbar"
 >
   <div
-    className="h-full bg-primary transition-all duration-300"
+    className="h-full bg-primary rounded-full transition-all duration-300"
     style={
       Object {
         "width": "50%",
@@ -18,11 +18,11 @@ exports[`Storyshots Components/Elements/ProgressBar Default 1`] = `
 
 exports[`Storyshots Components/Elements/ProgressBar Error 1`] = `
 <div
-  className="h-[9px] w-full bg-neutral-200 "
+  className="h-[9px] w-full rounded-full bg-neutral-200 "
   role="progressbar"
 >
   <div
-    className="h-full bg-error transition-all duration-300"
+    className="h-full bg-error rounded-full transition-all duration-300"
     style={
       Object {
         "width": "50%",
@@ -34,11 +34,11 @@ exports[`Storyshots Components/Elements/ProgressBar Error 1`] = `
 
 exports[`Storyshots Components/Elements/ProgressBar Secondary 1`] = `
 <div
-  className="h-[9px] w-full bg-neutral-200 "
+  className="h-[9px] w-full rounded-full bg-neutral-200 "
   role="progressbar"
 >
   <div
-    className="h-full bg-secondary transition-all duration-300"
+    className="h-full bg-secondary rounded-full transition-all duration-300"
     style={
       Object {
         "width": "50%",
@@ -50,11 +50,11 @@ exports[`Storyshots Components/Elements/ProgressBar Secondary 1`] = `
 
 exports[`Storyshots Components/Elements/ProgressBar Success 1`] = `
 <div
-  className="h-[9px] w-full bg-neutral-200 "
+  className="h-[9px] w-full rounded-full bg-neutral-200 "
   role="progressbar"
 >
   <div
-    className="h-full bg-success transition-all duration-300"
+    className="h-full bg-success rounded-full transition-all duration-300"
     style={
       Object {
         "width": "50%",
@@ -66,11 +66,11 @@ exports[`Storyshots Components/Elements/ProgressBar Success 1`] = `
 
 exports[`Storyshots Components/Elements/ProgressBar Tertiary 1`] = `
 <div
-  className="h-[9px] w-full bg-neutral-200 "
+  className="h-[9px] w-full rounded-full bg-neutral-200 "
   role="progressbar"
 >
   <div
-    className="h-full bg-tertiary transition-all duration-300"
+    className="h-full bg-tertiary rounded-full transition-all duration-300"
     style={
       Object {
         "width": "50%",
diff --git a/src/components/elements/Section/__snapshots__/SectionBody.stories.storyshot b/src/components/elements/Section/__snapshots__/SectionBody.stories.storyshot
index 16340088b..07bb6781b 100644
--- a/src/components/elements/Section/__snapshots__/SectionBody.stories.storyshot
+++ b/src/components/elements/Section/__snapshots__/SectionBody.stories.storyshot
@@ -83,7 +83,7 @@ exports[`Storyshots Components/Elements/Section/Body Default 1`] = `
           className="flex flex-1 items-center justify-center gap-2"
         >
           <div
-            className="flex h-16 w-16 items-center justify-center rounded-lg border border-neutral-400 border-opacity-20 bg-cover bg-no-repeat"
+            className="flex items-center justify-center rounded-lg bg-cover bg-no-repeat"
             style={
               Object {
                 "backgroundImage": "url()",
@@ -93,8 +93,8 @@ exports[`Storyshots Components/Elements/Section/Body Default 1`] = `
             <div
               style={
                 Object {
-                  "height": 30,
-                  "width": 22.5,
+                  "height": undefined,
+                  "width": 24,
                 }
               }
             />
@@ -103,7 +103,7 @@ exports[`Storyshots Components/Elements/Section/Body Default 1`] = `
             className="flex flex-1 flex-col items-start gap-1"
           >
             <p
-              className=" capitalize line-clamp-1 text-heading-200"
+              className=" capitalize line-clamp-1 text-body-900"
               data-testid="txt"
             >
               Project Budget
diff --git a/src/components/elements/Section/__snapshots__/SectionHeader.stories.storyshot b/src/components/elements/Section/__snapshots__/SectionHeader.stories.storyshot
index 12b64be51..5f83d7788 100644
--- a/src/components/elements/Section/__snapshots__/SectionHeader.stories.storyshot
+++ b/src/components/elements/Section/__snapshots__/SectionHeader.stories.storyshot
@@ -11,10 +11,10 @@ exports[`Storyshots Components/Elements/Section/Header Default 1`] = `
     Objectives
   </p>
   <button
-    className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+    className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
   >
     <span
-      className="text-bold-caption-200 pt-0.75 leading-3"
+      className="flex items-center text-bold-caption-200"
     >
       View more
     </span>
diff --git a/src/components/elements/StatusBar/__snapshots__/StatusBar.stories.storyshot b/src/components/elements/StatusBar/__snapshots__/StatusBar.stories.storyshot
index 1438a27e1..99aab4ca6 100644
--- a/src/components/elements/StatusBar/__snapshots__/StatusBar.stories.storyshot
+++ b/src/components/elements/StatusBar/__snapshots__/StatusBar.stories.storyshot
@@ -8,10 +8,10 @@ exports[`Storyshots Components/Elements/StatusBar Awaiting 1`] = `
     className="bg-primary-200 w-full"
   >
     <div
-      className="mx-auto flex max-w-7xl items-center justify-between gap-3 p-4 px-10 xl:px-0"
+      className="mx-auto flex w-[82vw] items-center justify-between gap-3 p-3.5 px-10 xl:px-0"
     >
       <div
-        className="flex flex-1 items-start"
+        className="flex flex-1 items-center"
       >
         <div
           className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-primary-200"
@@ -27,13 +27,13 @@ exports[`Storyshots Components/Elements/StatusBar Awaiting 1`] = `
         </div>
         <div>
           <p
-            className="text-bold-subtitle-400"
+            className="text-16-bold"
             data-testid="txt"
           >
             Status: Awaiting Feedback
           </p>
           <p
-            className="line-clamp-3 text-light-subtitle-400"
+            className="line-clamp-3 text-16-light"
             data-testid="txt"
             title="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
           >
@@ -45,28 +45,28 @@ exports[`Storyshots Components/Elements/StatusBar Awaiting 1`] = `
         className="flex gap-3"
       >
         <button
-          className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-1.75 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+          className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-[10.5px] rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
         >
           <span
-            className="text-bold-caption-200 pt-0.75 leading-3"
+            className="flex items-center text-bold-caption-200"
           >
             View Feedback
           </span>
         </button>
         <button
-          className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-1.75 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+          className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-[10.5px] rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
         >
           <span
-            className="text-bold-caption-200 pt-0.75 leading-3"
+            className="flex items-center text-bold-caption-200"
           >
             Learn More
           </span>
         </button>
         <button
-          className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+          className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
         >
           <span
-            className="text-bold-caption-200 pt-0.75 leading-3"
+            className="flex items-center text-bold-caption-200"
           >
             Setup Project
           </span>
@@ -85,10 +85,10 @@ exports[`Storyshots Components/Elements/StatusBar Default 1`] = `
     className="bg-secondary-200 w-full"
   >
     <div
-      className="mx-auto flex max-w-7xl items-center justify-between gap-3 p-4 px-10 xl:px-0"
+      className="mx-auto flex w-[82vw] items-center justify-between gap-3 p-3.5 px-10 xl:px-0"
     >
       <div
-        className="flex flex-1 items-start"
+        className="flex flex-1 items-center"
       >
         <div
           className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-secondary-200"
@@ -104,13 +104,13 @@ exports[`Storyshots Components/Elements/StatusBar Default 1`] = `
         </div>
         <div>
           <p
-            className="text-bold-subtitle-400"
+            className="text-16-bold"
             data-testid="txt"
           >
             Status: Approved
           </p>
           <p
-            className="line-clamp-3 text-light-subtitle-400"
+            className="line-clamp-3 text-16-light"
             data-testid="txt"
             title="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
           >
@@ -122,28 +122,28 @@ exports[`Storyshots Components/Elements/StatusBar Default 1`] = `
         className="flex gap-3"
       >
         <button
-          className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-1.75 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+          className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-[10.5px] rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
         >
           <span
-            className="text-bold-caption-200 pt-0.75 leading-3"
+            className="flex items-center text-bold-caption-200"
           >
             View Feedback
           </span>
         </button>
         <button
-          className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-1.75 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+          className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-[10.5px] rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
         >
           <span
-            className="text-bold-caption-200 pt-0.75 leading-3"
+            className="flex items-center text-bold-caption-200"
           >
             Learn More
           </span>
         </button>
         <button
-          className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+          className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
         >
           <span
-            className="text-bold-caption-200 pt-0.75 leading-3"
+            className="flex items-center text-bold-caption-200"
           >
             Setup Project
           </span>
@@ -162,10 +162,10 @@ exports[`Storyshots Components/Elements/StatusBar Draft 1`] = `
     className="bg-neutral-200 w-full"
   >
     <div
-      className="mx-auto flex max-w-7xl items-center justify-between gap-3 p-4 px-10 xl:px-0"
+      className="mx-auto flex w-[82vw] items-center justify-between gap-3 p-3.5 px-10 xl:px-0"
     >
       <div
-        className="flex flex-1 items-start"
+        className="flex flex-1 items-center"
       >
         <div
           className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-neutral-200"
@@ -181,13 +181,13 @@ exports[`Storyshots Components/Elements/StatusBar Draft 1`] = `
         </div>
         <div>
           <p
-            className="text-bold-subtitle-400"
+            className="text-16-bold"
             data-testid="txt"
           >
             Status: Draft
           </p>
           <p
-            className="line-clamp-3 text-light-subtitle-400"
+            className="line-clamp-3 text-16-light"
             data-testid="txt"
             title="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
           >
@@ -199,28 +199,28 @@ exports[`Storyshots Components/Elements/StatusBar Draft 1`] = `
         className="flex gap-3"
       >
         <button
-          className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-1.75 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+          className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-[10.5px] rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
         >
           <span
-            className="text-bold-caption-200 pt-0.75 leading-3"
+            className="flex items-center text-bold-caption-200"
           >
             View Feedback
           </span>
         </button>
         <button
-          className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-1.75 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+          className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-[10.5px] rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
         >
           <span
-            className="text-bold-caption-200 pt-0.75 leading-3"
+            className="flex items-center text-bold-caption-200"
           >
             Learn More
           </span>
         </button>
         <button
-          className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+          className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
         >
           <span
-            className="text-bold-caption-200 pt-0.75 leading-3"
+            className="flex items-center text-bold-caption-200"
           >
             Setup Project
           </span>
@@ -239,10 +239,10 @@ exports[`Storyshots Components/Elements/StatusBar Error 1`] = `
     className="bg-error-200 w-full"
   >
     <div
-      className="mx-auto flex max-w-7xl items-center justify-between gap-3 p-4 px-10 xl:px-0"
+      className="mx-auto flex w-[82vw] items-center justify-between gap-3 p-3.5 px-10 xl:px-0"
     >
       <div
-        className="flex flex-1 items-start"
+        className="flex flex-1 items-center"
       >
         <div
           className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-error-200"
@@ -258,13 +258,13 @@ exports[`Storyshots Components/Elements/StatusBar Error 1`] = `
         </div>
         <div>
           <p
-            className="text-bold-subtitle-400"
+            className="text-16-bold"
             data-testid="txt"
           >
             Status: Rejected
           </p>
           <p
-            className="line-clamp-3 text-light-subtitle-400"
+            className="line-clamp-3 text-16-light"
             data-testid="txt"
             title="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
           >
@@ -276,28 +276,28 @@ exports[`Storyshots Components/Elements/StatusBar Error 1`] = `
         className="flex gap-3"
       >
         <button
-          className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-1.75 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+          className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-[10.5px] rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
         >
           <span
-            className="text-bold-caption-200 pt-0.75 leading-3"
+            className="flex items-center text-bold-caption-200"
           >
             View Feedback
           </span>
         </button>
         <button
-          className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-1.75 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+          className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-[10.5px] rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
         >
           <span
-            className="text-bold-caption-200 pt-0.75 leading-3"
+            className="flex items-center text-bold-caption-200"
           >
             Learn More
           </span>
         </button>
         <button
-          className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+          className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
         >
           <span
-            className="text-bold-caption-200 pt-0.75 leading-3"
+            className="flex items-center text-bold-caption-200"
           >
             Setup Project
           </span>
@@ -316,10 +316,10 @@ exports[`Storyshots Components/Elements/StatusBar Warning 1`] = `
     className="bg-tertiary-200 w-full"
   >
     <div
-      className="mx-auto flex max-w-7xl items-center justify-between gap-3 p-4 px-10 xl:px-0"
+      className="mx-auto flex w-[82vw] items-center justify-between gap-3 p-3.5 px-10 xl:px-0"
     >
       <div
-        className="flex flex-1 items-start"
+        className="flex flex-1 items-center"
       >
         <div
           className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-tertiary-200"
@@ -335,13 +335,13 @@ exports[`Storyshots Components/Elements/StatusBar Warning 1`] = `
         </div>
         <div>
           <p
-            className="text-bold-subtitle-400"
+            className="text-16-bold"
             data-testid="txt"
           >
             Status: More Info Requested
           </p>
           <p
-            className="line-clamp-3 text-light-subtitle-400"
+            className="line-clamp-3 text-16-light"
             data-testid="txt"
             title="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
           >
@@ -353,28 +353,28 @@ exports[`Storyshots Components/Elements/StatusBar Warning 1`] = `
         className="flex gap-3"
       >
         <button
-          className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-1.75 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+          className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-[10.5px] rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
         >
           <span
-            className="text-bold-caption-200 pt-0.75 leading-3"
+            className="flex items-center text-bold-caption-200"
           >
             View Feedback
           </span>
         </button>
         <button
-          className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-1.75 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+          className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-[10.5px] rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
         >
           <span
-            className="text-bold-caption-200 pt-0.75 leading-3"
+            className="flex items-center text-bold-caption-200"
           >
             Learn More
           </span>
         </button>
         <button
-          className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+          className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
         >
           <span
-            className="text-bold-caption-200 pt-0.75 leading-3"
+            className="flex items-center text-bold-caption-200"
           >
             Setup Project
           </span>
diff --git a/src/components/elements/Table/__snapshots__/Table.stories.storyshot b/src/components/elements/Table/__snapshots__/Table.stories.storyshot
index e2ef42969..8aa6250d2 100644
--- a/src/components/elements/Table/__snapshots__/Table.stories.storyshot
+++ b/src/components/elements/Table/__snapshots__/Table.stories.storyshot
@@ -1,717 +1,5789 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Components/Elements/Table Default 1`] = `
-<div
-  className="overflow-x-auto px-4 md:px-0 lg:overflow-x-visible"
->
+<div>
   <div
-    className="flex items-center justify-between"
+    className="overflow-x-auto px-4 md:px-0 undefined"
   >
     <div
-      className="flex items-center gap-12"
+      className="flex w-full items-center justify-between"
     >
-      <div
-        className="w-64 relative"
-      >
+      <div>
         <div
-          style={
-            Object {
-              "height": undefined,
-              "width": 20,
+          className="relative w-64"
+        >
+          <div
+            style={
+              Object {
+                "height": undefined,
+                "width": 24,
+              }
             }
-          }
-        />
-        <input
-          className="placeholder:text-light-subtitle-400 text-light-subtitle-400 h-8 w-full rounded-lg border border-neutral-100 pl-8 text-neutral-1000 placeholder:text-neutral-1000"
-          onChange={[Function]}
-          placeholder="Search"
-          type="search"
-        />
+          />
+          <input
+            className="placeholder:text-body-300 text-body-300 w-full rounded-lg border border-neutral-200 py-2 pl-10 pr-4 text-neutral-1000 placeholder:text-neutral-1000"
+            onChange={[Function]}
+            placeholder="Search"
+            type="search"
+          />
+        </div>
       </div>
       <div
-        className="space-y-2"
-        data-headlessui-state=""
+        className="flex gap-5"
       >
         <div
-          className="flex items-center gap-3"
+          className="flex items-center gap-5"
         >
-          <p
-            className="text-bold-subtitle-500"
-            data-headlessui-state=""
-            data-testid="txt"
-            id="headlessui-listbox-label-:r2d:"
-            onClick={[Function]}
-          >
-            Funding source
-          </p>
           <div
-            className="relative"
+            className="space-y-2"
+            data-headlessui-state=""
           >
             <div
-              aria-expanded={false}
-              aria-haspopup="listbox"
-              aria-labelledby="headlessui-listbox-label-:r2d: headlessui-listbox-button-:r2e:"
-              className="flex h-8 items-center justify-center gap-1 rounded-md border bg-white px-10"
-              data-headlessui-state=""
-              disabled={false}
-              id="headlessui-listbox-button-:r2e:"
-              onClick={[Function]}
-              onKeyDown={[Function]}
-              onKeyUp={[Function]}
+              className="flex items-center gap-3"
             >
               <p
-                className="mt-1 w-full uppercase line-clamp-1 text-bold-caption-200"
+                className="text-16-bold"
+                data-headlessui-state=""
                 data-testid="txt"
+                id="headlessui-listbox-label-:r2h:"
+                onClick={[Function]}
               >
-                Show All
+                Funding source
               </p>
               <div
-                style={
-                  Object {
-                    "height": undefined,
-                    "width": 20,
-                  }
-                }
-              />
+                className="relative"
+              >
+                <div
+                  aria-expanded={false}
+                  aria-haspopup="listbox"
+                  aria-labelledby="headlessui-listbox-label-:r2h: headlessui-listbox-button-:r2i:"
+                  className="pitems-center flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white py-2 pl-4 pr-4"
+                  data-headlessui-state=""
+                  disabled={false}
+                  id="headlessui-listbox-button-:r2i:"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  onKeyUp={[Function]}
+                >
+                  <p
+                    className="w-full uppercase line-clamp-1 text-14-bold"
+                    data-testid="txt"
+                  >
+                    Show All
+                  </p>
+                  <div
+                    style={
+                      Object {
+                        "height": undefined,
+                        "width": 20,
+                      }
+                    }
+                  />
+                </div>
+              </div>
             </div>
           </div>
         </div>
+        <div
+          className="flex items-center gap-5"
+        />
       </div>
     </div>
     <button
-      className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+      className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
     >
       <span
-        className="text-bold-caption-200 pt-0.75 leading-3"
+        className="flex items-center text-bold-caption-200"
       >
         Create
       </span>
     </button>
+    <div>
+      <table
+        className="w-full border-spacing-y-4 border-separate"
+      >
+        <thead
+          className="bg-blueCustom-100"
+        >
+          <tr
+            className="bg-neutral-50"
+          >
+            <th
+              align="left"
+              className="text-bold-subtitle-500 whitespace-nowrap px-6 py-4 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg"
+              colSpan={1}
+              onClick={[Function]}
+            >
+              <div
+                className="flex items-center"
+                style={
+                  Object {
+                    "color": "currentColor",
+                    "fontFamily": "inherit",
+                    "fontSize": "inherit",
+                    "fontWeight": "inherit",
+                  }
+                }
+              >
+                Funding type
+              </div>
+            </th>
+            <th
+              align="left"
+              className="text-bold-subtitle-500 whitespace-nowrap px-6 py-4 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg cursor-pointer"
+              colSpan={1}
+              onClick={[Function]}
+            >
+              <div
+                className="flex items-center"
+                style={
+                  Object {
+                    "color": "currentColor",
+                    "fontFamily": "inherit",
+                    "fontSize": "inherit",
+                    "fontWeight": "inherit",
+                  }
+                }
+              >
+                Funding source
+                <div
+                  style={
+                    Object {
+                      "height": 14,
+                      "width": 11,
+                    }
+                  }
+                />
+              </div>
+            </th>
+            <th
+              align="left"
+              className="text-bold-subtitle-500 whitespace-nowrap px-6 py-4 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg cursor-pointer"
+              colSpan={1}
+              onClick={[Function]}
+            >
+              <div
+                className="flex items-center"
+                style={
+                  Object {
+                    "color": "currentColor",
+                    "fontFamily": "inherit",
+                    "fontSize": "inherit",
+                    "fontWeight": "inherit",
+                  }
+                }
+              >
+                Funding amount
+                <div
+                  style={
+                    Object {
+                      "height": 14,
+                      "width": 11,
+                    }
+                  }
+                />
+              </div>
+            </th>
+            <th
+              align="left"
+              className="text-bold-subtitle-500 whitespace-nowrap px-6 py-4 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg"
+              colSpan={1}
+              onClick={[Function]}
+            >
+              <div
+                className="flex items-center"
+                style={
+                  Object {
+                    "color": "currentColor",
+                    "fontFamily": "inherit",
+                    "fontSize": "inherit",
+                    "fontWeight": "inherit",
+                  }
+                }
+              >
+                Status
+              </div>
+            </th>
+            <th
+              align="left"
+              className="text-bold-subtitle-500 whitespace-nowrap px-6 py-4 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg"
+              colSpan={1}
+              onClick={[Function]}
+            >
+              <div
+                className="flex items-center"
+                style={
+                  Object {
+                    "color": "currentColor",
+                    "fontFamily": "inherit",
+                    "fontSize": "inherit",
+                    "fontWeight": "inherit",
+                  }
+                }
+              />
+            </th>
+          </tr>
+        </thead>
+        <tbody
+          className="space-y-4"
+        >
+          <tr
+            className="rounded-lg bg-neutral-50 rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Cash
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              VISA
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              2000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-error-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  error
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-neutral-50 rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Cash
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Master Card
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              1000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-primary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  awaiting
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-neutral-50 rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Credit
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              American Express
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              1500
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-tertiary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  warning
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-neutral-50 rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Cash
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              VISA
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              7500
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-error-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  error
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-neutral-50 rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Credit
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              American Express
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              1900
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-neutral-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  edit
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-neutral-50 rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Credit
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Master Card
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              5000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-secondary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  success
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-neutral-50 rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Credit
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              VISA
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              100000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-error-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  error
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-neutral-50 rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Cash
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              VISA
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              60000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-primary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  awaiting
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-neutral-50 rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Credit
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Master Card
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              15000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-tertiary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  warning
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-neutral-50 rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Cash
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              VISA
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              1510000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-secondary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  success
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
-  <table
-    className="w-full border-separate border-spacing-y-4"
+</div>
+`;
+
+exports[`Storyshots Components/Elements/Table Primary 1`] = `
+<div>
+  <div
+    className="overflow-x-auto px-4 md:px-0 undefined"
   >
-    <thead
-      className="bg-primary-200"
+    <div
+      className="flex w-full items-center justify-between"
     >
-      <tr>
-        <th
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-bold-subtitle-500 whitespace-nowrap px-6 py-4"
-          colSpan={1}
-          onClick={[Function]}
-        >
-          Funding type
-        </th>
-        <th
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-bold-subtitle-500 whitespace-nowrap px-6 py-4 cursor-pointer"
-          colSpan={1}
-          onClick={[Function]}
+      <div>
+        <div
+          className="relative w-64"
         >
-          Funding source
           <div
             style={
               Object {
-                "height": 14,
-                "width": 11,
+                "height": undefined,
+                "width": 24,
               }
             }
           />
-        </th>
-        <th
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-bold-subtitle-500 whitespace-nowrap px-6 py-4 cursor-pointer"
-          colSpan={1}
-          onClick={[Function]}
-        >
-          Funding amount
-          <div
-            style={
-              Object {
-                "height": 14,
-                "width": 11,
-              }
-            }
+          <input
+            className="placeholder:text-body-300 text-body-300 w-full rounded-lg border border-neutral-200 py-2 pl-10 pr-4 text-neutral-1000 placeholder:text-neutral-1000"
+            onChange={[Function]}
+            placeholder="Search"
+            type="search"
           />
-        </th>
-        <th
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-bold-subtitle-500 whitespace-nowrap px-6 py-4"
-          colSpan={1}
-          onClick={[Function]}
-        >
-          Status
-        </th>
-        <th
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-bold-subtitle-500 whitespace-nowrap px-6 py-4"
-          colSpan={1}
-          onClick={[Function]}
-        />
-      </tr>
-    </thead>
-    <tbody
-      className="space-y-4"
-    >
-      <tr
-        className="rounded-lg bg-white shadow"
+        </div>
+      </div>
+      <div
+        className="flex gap-5"
       >
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          Cash
-        </td>
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          VISA
-        </td>
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          2000
-        </td>
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
+        <div
+          className="flex items-center gap-5"
         >
           <div
-            className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-error-200 w-fit"
+            className="space-y-2"
+            data-headlessui-state=""
           >
             <div
-              style={
-                Object {
-                  "height": undefined,
-                  "width": 24,
-                }
-              }
-            />
-            <p
-              className="text-bold-caption-100"
-              data-testid="txt"
+              className="flex items-center gap-3"
             >
-              error
-            </p>
+              <p
+                className="text-16-bold"
+                data-headlessui-state=""
+                data-testid="txt"
+                id="headlessui-listbox-label-:r2j:"
+                onClick={[Function]}
+              >
+                Funding source
+              </p>
+              <div
+                className="relative"
+              >
+                <div
+                  aria-expanded={false}
+                  aria-haspopup="listbox"
+                  aria-labelledby="headlessui-listbox-label-:r2j: headlessui-listbox-button-:r2k:"
+                  className="pitems-center flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white py-2 pl-4 pr-4"
+                  data-headlessui-state=""
+                  disabled={false}
+                  id="headlessui-listbox-button-:r2k:"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  onKeyUp={[Function]}
+                >
+                  <p
+                    className="w-full uppercase line-clamp-1 text-14-bold"
+                    data-testid="txt"
+                  >
+                    Show All
+                  </p>
+                  <div
+                    style={
+                      Object {
+                        "height": undefined,
+                        "width": 20,
+                      }
+                    }
+                  />
+                </div>
+              </div>
+            </div>
           </div>
-        </td>
-        <td
-          align="right"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          <button
-            className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
-          >
-            <span
-              className="text-bold-caption-200 pt-0.75 leading-3"
-            >
-              View
-            </span>
-          </button>
-        </td>
-      </tr>
-      <tr
-        className="rounded-lg bg-white shadow"
+        </div>
+        <div
+          className="flex items-center gap-5"
+        />
+      </div>
+    </div>
+    <button
+      className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+    >
+      <span
+        className="flex items-center text-bold-caption-200"
       >
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          Cash
-        </td>
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          Master Card
-        </td>
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          1000
-        </td>
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          <div
-            className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-primary-200 w-fit"
-          >
-            <div
-              style={
-                Object {
-                  "height": undefined,
-                  "width": 24,
-                }
-              }
-            />
-            <p
-              className="text-bold-caption-100"
-              data-testid="txt"
-            >
-              awaiting
-            </p>
-          </div>
-        </td>
-        <td
-          align="right"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          <button
-            className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
-          >
-            <span
-              className="text-bold-caption-200 pt-0.75 leading-3"
-            >
-              View
-            </span>
-          </button>
-        </td>
-      </tr>
-      <tr
-        className="rounded-lg bg-white shadow"
+        Create
+      </span>
+    </button>
+    <div>
+      <table
+        className="w-full border-spacing-y-4 border-separate"
       >
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          Credit
-        </td>
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          American Express
-        </td>
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          1500
-        </td>
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
+        <thead
+          className="bg-blueCustom-100"
         >
-          <div
-            className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-tertiary-200 w-fit"
+          <tr
+            className="bg-white shadow"
           >
-            <div
-              style={
-                Object {
-                  "height": undefined,
-                  "width": 24,
-                }
-              }
-            />
-            <p
-              className="text-bold-caption-100"
-              data-testid="txt"
+            <th
+              align="left"
+              className="text-bold-subtitle-500 whitespace-nowrap px-6 py-4 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg"
+              colSpan={1}
+              onClick={[Function]}
             >
-              warning
-            </p>
-          </div>
-        </td>
-        <td
-          align="right"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          <button
-            className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
-          >
-            <span
-              className="text-bold-caption-200 pt-0.75 leading-3"
-            >
-              View
-            </span>
-          </button>
-        </td>
-      </tr>
-      <tr
-        className="rounded-lg bg-white shadow"
+              <div
+                className="flex items-center"
+                style={
+                  Object {
+                    "color": "currentColor",
+                    "fontFamily": "inherit",
+                    "fontSize": "inherit",
+                    "fontWeight": "inherit",
+                  }
+                }
+              >
+                Funding type
+              </div>
+            </th>
+            <th
+              align="left"
+              className="text-bold-subtitle-500 whitespace-nowrap px-6 py-4 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg cursor-pointer"
+              colSpan={1}
+              onClick={[Function]}
+            >
+              <div
+                className="flex items-center"
+                style={
+                  Object {
+                    "color": "currentColor",
+                    "fontFamily": "inherit",
+                    "fontSize": "inherit",
+                    "fontWeight": "inherit",
+                  }
+                }
+              >
+                Funding source
+                <div
+                  style={
+                    Object {
+                      "height": 14,
+                      "width": 11,
+                    }
+                  }
+                />
+              </div>
+            </th>
+            <th
+              align="left"
+              className="text-bold-subtitle-500 whitespace-nowrap px-6 py-4 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg cursor-pointer"
+              colSpan={1}
+              onClick={[Function]}
+            >
+              <div
+                className="flex items-center"
+                style={
+                  Object {
+                    "color": "currentColor",
+                    "fontFamily": "inherit",
+                    "fontSize": "inherit",
+                    "fontWeight": "inherit",
+                  }
+                }
+              >
+                Funding amount
+                <div
+                  style={
+                    Object {
+                      "height": 14,
+                      "width": 11,
+                    }
+                  }
+                />
+              </div>
+            </th>
+            <th
+              align="left"
+              className="text-bold-subtitle-500 whitespace-nowrap px-6 py-4 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg"
+              colSpan={1}
+              onClick={[Function]}
+            >
+              <div
+                className="flex items-center"
+                style={
+                  Object {
+                    "color": "currentColor",
+                    "fontFamily": "inherit",
+                    "fontSize": "inherit",
+                    "fontWeight": "inherit",
+                  }
+                }
+              >
+                Status
+              </div>
+            </th>
+            <th
+              align="left"
+              className="text-bold-subtitle-500 whitespace-nowrap px-6 py-4 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg"
+              colSpan={1}
+              onClick={[Function]}
+            >
+              <div
+                className="flex items-center"
+                style={
+                  Object {
+                    "color": "currentColor",
+                    "fontFamily": "inherit",
+                    "fontSize": "inherit",
+                    "fontWeight": "inherit",
+                  }
+                }
+              />
+            </th>
+          </tr>
+        </thead>
+        <tbody
+          className="space-y-4"
+        >
+          <tr
+            className="rounded-lg border-2 border-neutral-200 rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Cash
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              VISA
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              2000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-error-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  error
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg border-2 border-neutral-200 rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Cash
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Master Card
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              1000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-primary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  awaiting
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg border-2 border-neutral-200 rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Credit
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              American Express
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              1500
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-tertiary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  warning
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg border-2 border-neutral-200 rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Cash
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              VISA
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              7500
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-error-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  error
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg border-2 border-neutral-200 rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Credit
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              American Express
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              1900
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-neutral-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  edit
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg border-2 border-neutral-200 rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Credit
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Master Card
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              5000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-secondary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  success
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg border-2 border-neutral-200 rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Credit
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              VISA
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              100000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-error-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  error
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg border-2 border-neutral-200 rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Cash
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              VISA
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              60000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-primary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  awaiting
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg border-2 border-neutral-200 rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Credit
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Master Card
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              15000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-tertiary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  warning
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg border-2 border-neutral-200 rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Cash
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              VISA
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              1510000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-secondary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  success
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Components/Elements/Table Secundary White 1`] = `
+<div>
+  <div
+    className="overflow-x-auto px-4 md:px-0 undefined"
+  >
+    <div
+      className="flex w-full items-center justify-between"
+    >
+      <div>
+        <div
+          className="relative w-64"
+        >
+          <div
+            style={
+              Object {
+                "height": undefined,
+                "width": 24,
+              }
+            }
+          />
+          <input
+            className="placeholder:text-body-300 text-body-300 w-full rounded-lg border border-neutral-200 py-2 pl-10 pr-4 text-neutral-1000 placeholder:text-neutral-1000"
+            onChange={[Function]}
+            placeholder="Search"
+            type="search"
+          />
+        </div>
+      </div>
+      <div
+        className="flex gap-5"
+      >
+        <div
+          className="flex items-center gap-5"
+        >
+          <div
+            className="space-y-2"
+            data-headlessui-state=""
+          >
+            <div
+              className="flex items-center gap-3"
+            >
+              <p
+                className="text-16-bold"
+                data-headlessui-state=""
+                data-testid="txt"
+                id="headlessui-listbox-label-:r2l:"
+                onClick={[Function]}
+              >
+                Funding source
+              </p>
+              <div
+                className="relative"
+              >
+                <div
+                  aria-expanded={false}
+                  aria-haspopup="listbox"
+                  aria-labelledby="headlessui-listbox-label-:r2l: headlessui-listbox-button-:r2m:"
+                  className="pitems-center flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white py-2 pl-4 pr-4"
+                  data-headlessui-state=""
+                  disabled={false}
+                  id="headlessui-listbox-button-:r2m:"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  onKeyUp={[Function]}
+                >
+                  <p
+                    className="w-full uppercase line-clamp-1 text-14-bold"
+                    data-testid="txt"
+                  >
+                    Show All
+                  </p>
+                  <div
+                    style={
+                      Object {
+                        "height": undefined,
+                        "width": 20,
+                      }
+                    }
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="flex items-center gap-5"
+        />
+      </div>
+    </div>
+    <button
+      className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+    >
+      <span
+        className="flex items-center text-bold-caption-200"
+      >
+        Create
+      </span>
+    </button>
+    <div>
+      <table
+        className="w-full border-spacing-y-4 border-separate"
+      >
+        <thead
+          className="bg-blueCustom-100"
+        >
+          <tr
+            className="bg-neutral-50"
+          >
+            <th
+              align="left"
+              className="text-bold-subtitle-500 whitespace-nowrap px-6 py-4 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg"
+              colSpan={1}
+              onClick={[Function]}
+            >
+              <div
+                className="flex items-center"
+                style={
+                  Object {
+                    "color": "currentColor",
+                    "fontFamily": "inherit",
+                    "fontSize": "inherit",
+                    "fontWeight": "inherit",
+                  }
+                }
+              >
+                Funding type
+              </div>
+            </th>
+            <th
+              align="left"
+              className="text-bold-subtitle-500 whitespace-nowrap px-6 py-4 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg cursor-pointer"
+              colSpan={1}
+              onClick={[Function]}
+            >
+              <div
+                className="flex items-center"
+                style={
+                  Object {
+                    "color": "currentColor",
+                    "fontFamily": "inherit",
+                    "fontSize": "inherit",
+                    "fontWeight": "inherit",
+                  }
+                }
+              >
+                Funding source
+                <div
+                  style={
+                    Object {
+                      "height": 14,
+                      "width": 11,
+                    }
+                  }
+                />
+              </div>
+            </th>
+            <th
+              align="left"
+              className="text-bold-subtitle-500 whitespace-nowrap px-6 py-4 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg cursor-pointer"
+              colSpan={1}
+              onClick={[Function]}
+            >
+              <div
+                className="flex items-center"
+                style={
+                  Object {
+                    "color": "currentColor",
+                    "fontFamily": "inherit",
+                    "fontSize": "inherit",
+                    "fontWeight": "inherit",
+                  }
+                }
+              >
+                Funding amount
+                <div
+                  style={
+                    Object {
+                      "height": 14,
+                      "width": 11,
+                    }
+                  }
+                />
+              </div>
+            </th>
+            <th
+              align="left"
+              className="text-bold-subtitle-500 whitespace-nowrap px-6 py-4 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg"
+              colSpan={1}
+              onClick={[Function]}
+            >
+              <div
+                className="flex items-center"
+                style={
+                  Object {
+                    "color": "currentColor",
+                    "fontFamily": "inherit",
+                    "fontSize": "inherit",
+                    "fontWeight": "inherit",
+                  }
+                }
+              >
+                Status
+              </div>
+            </th>
+            <th
+              align="left"
+              className="text-bold-subtitle-500 whitespace-nowrap px-6 py-4 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg"
+              colSpan={1}
+              onClick={[Function]}
+            >
+              <div
+                className="flex items-center"
+                style={
+                  Object {
+                    "color": "currentColor",
+                    "fontFamily": "inherit",
+                    "fontSize": "inherit",
+                    "fontWeight": "inherit",
+                  }
+                }
+              />
+            </th>
+          </tr>
+        </thead>
+        <tbody
+          className="space-y-4"
+        >
+          <tr
+            className="rounded-lg bg-white rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              Cash
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              VISA
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              2000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-error-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  error
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              Cash
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              Master Card
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              1000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-primary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  awaiting
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              Credit
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              American Express
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              1500
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-tertiary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  warning
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              Cash
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              VISA
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              7500
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-error-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  error
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              Credit
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              American Express
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              1900
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-neutral-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  edit
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              Credit
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              Master Card
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              5000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-secondary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  success
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              Credit
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              VISA
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              100000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-error-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  error
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              Cash
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              VISA
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              60000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-primary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  awaiting
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              Credit
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              Master Card
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              15000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-tertiary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  warning
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              Cash
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              VISA
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              1510000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-secondary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  success
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4 border-0"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Components/Elements/Table Table Airtable 1`] = `
+<div>
+  <div
+    className="overflow-x-auto px-4 md:px-0 undefined"
+  >
+    <div
+      className="flex w-full items-center justify-between"
+    >
+      <div>
+        <div
+          className="relative w-64"
+        >
+          <div
+            style={
+              Object {
+                "height": undefined,
+                "width": 24,
+              }
+            }
+          />
+          <input
+            className="placeholder:text-body-300 text-body-300 w-full rounded-lg border border-neutral-200 py-2 pl-10 pr-4 text-neutral-1000 placeholder:text-neutral-1000"
+            onChange={[Function]}
+            placeholder="Search"
+            type="search"
+          />
+        </div>
+      </div>
+      <div
+        className="flex gap-5"
+      >
+        <div
+          className="flex items-center gap-5"
+        >
+          <div
+            className="space-y-2"
+            data-headlessui-state=""
+          >
+            <div
+              className="flex items-center gap-3"
+            >
+              <p
+                className="text-16-bold"
+                data-headlessui-state=""
+                data-testid="txt"
+                id="headlessui-listbox-label-:r2r:"
+                onClick={[Function]}
+              >
+                Funding source
+              </p>
+              <div
+                className="relative"
+              >
+                <div
+                  aria-expanded={false}
+                  aria-haspopup="listbox"
+                  aria-labelledby="headlessui-listbox-label-:r2r: headlessui-listbox-button-:r2s:"
+                  className="pitems-center flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white py-2 pl-4 pr-4"
+                  data-headlessui-state=""
+                  disabled={false}
+                  id="headlessui-listbox-button-:r2s:"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  onKeyUp={[Function]}
+                >
+                  <p
+                    className="w-full uppercase line-clamp-1 text-14-bold"
+                    data-testid="txt"
+                  >
+                    Show All
+                  </p>
+                  <div
+                    style={
+                      Object {
+                        "height": undefined,
+                        "width": 20,
+                      }
+                    }
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="flex items-center gap-5"
+        />
+      </div>
+    </div>
+    <button
+      className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+    >
+      <span
+        className="flex items-center text-bold-caption-200"
+      >
+        Create
+      </span>
+    </button>
+    <div>
+      <table
+        className="w-full border-collapse"
+      >
+        <thead
+          className="bg-blueCustom-100"
+        >
+          <tr
+            className="bg-neutral-150"
+          >
+            <th
+              align="left"
+              className="whitespace-nowrap px-6 py-4 first:rounded-tl-lg last:rounded-tr-lg border-y border-neutral-200 text-14-semibold first:w-full"
+              colSpan={1}
+              onClick={[Function]}
+            >
+              <div
+                className="flex items-center"
+                style={
+                  Object {
+                    "color": "currentColor",
+                    "fontFamily": "inherit",
+                    "fontSize": "inherit",
+                    "fontWeight": "inherit",
+                  }
+                }
+              >
+                Funding type
+              </div>
+            </th>
+            <th
+              align="left"
+              className="whitespace-nowrap px-6 py-4 first:rounded-tl-lg last:rounded-tr-lg border-y border-neutral-200 text-14-semibold first:w-full cursor-pointer"
+              colSpan={1}
+              onClick={[Function]}
+            >
+              <div
+                className="flex items-center"
+                style={
+                  Object {
+                    "color": "currentColor",
+                    "fontFamily": "inherit",
+                    "fontSize": "inherit",
+                    "fontWeight": "inherit",
+                  }
+                }
+              >
+                Funding source
+                <div
+                  style={
+                    Object {
+                      "height": 14,
+                      "width": 11,
+                    }
+                  }
+                />
+              </div>
+            </th>
+            <th
+              align="left"
+              className="whitespace-nowrap px-6 py-4 first:rounded-tl-lg last:rounded-tr-lg border-y border-neutral-200 text-14-semibold first:w-full cursor-pointer"
+              colSpan={1}
+              onClick={[Function]}
+            >
+              <div
+                className="flex items-center"
+                style={
+                  Object {
+                    "color": "currentColor",
+                    "fontFamily": "inherit",
+                    "fontSize": "inherit",
+                    "fontWeight": "inherit",
+                  }
+                }
+              >
+                Funding amount
+                <div
+                  style={
+                    Object {
+                      "height": 14,
+                      "width": 11,
+                    }
+                  }
+                />
+              </div>
+            </th>
+            <th
+              align="left"
+              className="whitespace-nowrap px-6 py-4 first:rounded-tl-lg last:rounded-tr-lg border-y border-neutral-200 text-14-semibold first:w-full"
+              colSpan={1}
+              onClick={[Function]}
+            >
+              <div
+                className="flex items-center"
+                style={
+                  Object {
+                    "color": "currentColor",
+                    "fontFamily": "inherit",
+                    "fontSize": "inherit",
+                    "fontWeight": "inherit",
+                  }
+                }
+              >
+                Status
+              </div>
+            </th>
+            <th
+              align="left"
+              className="whitespace-nowrap px-6 py-4 first:rounded-tl-lg last:rounded-tr-lg border-y border-neutral-200 text-14-semibold first:w-full"
+              colSpan={1}
+              onClick={[Function]}
+            >
+              <div
+                className="flex items-center"
+                style={
+                  Object {
+                    "color": "currentColor",
+                    "fontFamily": "inherit",
+                    "fontSize": "inherit",
+                    "fontWeight": "inherit",
+                  }
+                }
+              />
+            </th>
+          </tr>
+        </thead>
+        <tbody
+          className=""
+        >
+          <tr
+            className="rounded-lg bg-white border-y border-neutral-200 lastRow"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              Cash
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              VISA
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              2000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-error-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  error
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white border-y border-neutral-200 lastRow"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              Cash
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              Master Card
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              1000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-primary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  awaiting
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white border-y border-neutral-200 lastRow"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              Credit
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              American Express
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              1500
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-tertiary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  warning
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white border-y border-neutral-200 lastRow"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              Cash
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              VISA
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              7500
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-error-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  error
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white border-y border-neutral-200 lastRow"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              Credit
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              American Express
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              1900
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-neutral-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  edit
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white border-y border-neutral-200 lastRow"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              Credit
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              Master Card
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              5000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-secondary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  success
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white border-y border-neutral-200 lastRow"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              Credit
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              VISA
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              100000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-error-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  error
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white border-y border-neutral-200 lastRow"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              Cash
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              VISA
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              60000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-primary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  awaiting
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white border-y border-neutral-200 lastRow"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              Credit
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              Master Card
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              15000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-tertiary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  warning
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white border-y border-neutral-200 lastRow"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              Cash
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              VISA
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              1510000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-secondary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  success
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 text-16-light px-6 py-3"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Components/Elements/Table Table Border 1`] = `
+<div>
+  <div
+    className="overflow-x-auto px-4 md:px-0 undefined"
+  >
+    <div
+      className="flex w-full items-center justify-between"
+    >
+      <div>
+        <div
+          className="relative w-64"
+        >
+          <div
+            style={
+              Object {
+                "height": undefined,
+                "width": 24,
+              }
+            }
+          />
+          <input
+            className="placeholder:text-body-300 text-body-300 w-full rounded-lg border border-neutral-200 py-2 pl-10 pr-4 text-neutral-1000 placeholder:text-neutral-1000"
+            onChange={[Function]}
+            placeholder="Search"
+            type="search"
+          />
+        </div>
+      </div>
+      <div
+        className="flex gap-5"
+      >
+        <div
+          className="flex items-center gap-5"
+        >
+          <div
+            className="space-y-2"
+            data-headlessui-state=""
+          >
+            <div
+              className="flex items-center gap-3"
+            >
+              <p
+                className="text-16-bold"
+                data-headlessui-state=""
+                data-testid="txt"
+                id="headlessui-listbox-label-:r2n:"
+                onClick={[Function]}
+              >
+                Funding source
+              </p>
+              <div
+                className="relative"
+              >
+                <div
+                  aria-expanded={false}
+                  aria-haspopup="listbox"
+                  aria-labelledby="headlessui-listbox-label-:r2n: headlessui-listbox-button-:r2o:"
+                  className="pitems-center flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white py-2 pl-4 pr-4"
+                  data-headlessui-state=""
+                  disabled={false}
+                  id="headlessui-listbox-button-:r2o:"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  onKeyUp={[Function]}
+                >
+                  <p
+                    className="w-full uppercase line-clamp-1 text-14-bold"
+                    data-testid="txt"
+                  >
+                    Show All
+                  </p>
+                  <div
+                    style={
+                      Object {
+                        "height": undefined,
+                        "width": 20,
+                      }
+                    }
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="flex items-center gap-5"
+        />
+      </div>
+    </div>
+    <button
+      className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+    >
+      <span
+        className="flex items-center text-bold-caption-200"
+      >
+        Create
+      </span>
+    </button>
+    <div>
+      <table
+        className="w-full border-spacing-y-4 border-separate"
+      >
+        <thead
+          className="bg-blueCustom-100"
+        >
+          <tr
+            className="border-neutral-200 border bg-blueCustom-50"
+          >
+            <th
+              align="left"
+              className="text-bold-subtitle-500 whitespace-nowrap px-6 py-4 border-neutral-200 border first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg"
+              colSpan={1}
+              onClick={[Function]}
+            >
+              <div
+                className="flex items-center"
+                style={
+                  Object {
+                    "color": "currentColor",
+                    "fontFamily": "inherit",
+                    "fontSize": "inherit",
+                    "fontWeight": "inherit",
+                  }
+                }
+              >
+                Funding type
+              </div>
+            </th>
+            <th
+              align="left"
+              className="text-bold-subtitle-500 whitespace-nowrap px-6 py-4 border-neutral-200 border first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg cursor-pointer"
+              colSpan={1}
+              onClick={[Function]}
+            >
+              <div
+                className="flex items-center"
+                style={
+                  Object {
+                    "color": "currentColor",
+                    "fontFamily": "inherit",
+                    "fontSize": "inherit",
+                    "fontWeight": "inherit",
+                  }
+                }
+              >
+                Funding source
+                <div
+                  style={
+                    Object {
+                      "height": 14,
+                      "width": 11,
+                    }
+                  }
+                />
+              </div>
+            </th>
+            <th
+              align="left"
+              className="text-bold-subtitle-500 whitespace-nowrap px-6 py-4 border-neutral-200 border first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg cursor-pointer"
+              colSpan={1}
+              onClick={[Function]}
+            >
+              <div
+                className="flex items-center"
+                style={
+                  Object {
+                    "color": "currentColor",
+                    "fontFamily": "inherit",
+                    "fontSize": "inherit",
+                    "fontWeight": "inherit",
+                  }
+                }
+              >
+                Funding amount
+                <div
+                  style={
+                    Object {
+                      "height": 14,
+                      "width": 11,
+                    }
+                  }
+                />
+              </div>
+            </th>
+            <th
+              align="left"
+              className="text-bold-subtitle-500 whitespace-nowrap px-6 py-4 border-neutral-200 border first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg"
+              colSpan={1}
+              onClick={[Function]}
+            >
+              <div
+                className="flex items-center"
+                style={
+                  Object {
+                    "color": "currentColor",
+                    "fontFamily": "inherit",
+                    "fontSize": "inherit",
+                    "fontWeight": "inherit",
+                  }
+                }
+              >
+                Status
+              </div>
+            </th>
+            <th
+              align="left"
+              className="text-bold-subtitle-500 whitespace-nowrap px-6 py-4 border-neutral-200 border first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg"
+              colSpan={1}
+              onClick={[Function]}
+            >
+              <div
+                className="flex items-center"
+                style={
+                  Object {
+                    "color": "currentColor",
+                    "fontFamily": "inherit",
+                    "fontSize": "inherit",
+                    "fontWeight": "inherit",
+                  }
+                }
+              />
+            </th>
+          </tr>
+        </thead>
+        <tbody
+          className="space-y-4"
+        >
+          <tr
+            className="rounded-lg bg-white border rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Cash
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              VISA
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              2000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-error-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  error
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white border rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Cash
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Master Card
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              1000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-primary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  awaiting
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white border rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Credit
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              American Express
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              1500
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-tertiary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  warning
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white border rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Cash
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              VISA
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              7500
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-error-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  error
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white border rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Credit
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              American Express
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              1900
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-neutral-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  edit
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white border rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Credit
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Master Card
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              5000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-secondary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  success
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white border rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Credit
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              VISA
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              100000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-error-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  error
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white border rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Cash
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              VISA
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              60000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-primary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  awaiting
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white border rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Credit
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Master Card
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              15000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-tertiary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  warning
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white border rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Cash
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              VISA
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              1510000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-secondary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  success
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 border-neutral-200 border text-16-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Components/Elements/Table Table Border All 1`] = `
+<div>
+  <div
+    className="overflow-x-auto px-4 md:px-0 undefined"
+  >
+    <div
+      className="flex w-full items-center justify-between"
+    >
+      <div>
+        <div
+          className="relative w-64"
+        >
+          <div
+            style={
+              Object {
+                "height": undefined,
+                "width": 24,
+              }
+            }
+          />
+          <input
+            className="placeholder:text-body-300 text-body-300 w-full rounded-lg border border-neutral-200 py-2 pl-10 pr-4 text-neutral-1000 placeholder:text-neutral-1000"
+            onChange={[Function]}
+            placeholder="Search"
+            type="search"
+          />
+        </div>
+      </div>
+      <div
+        className="flex gap-5"
+      >
+        <div
+          className="flex items-center gap-5"
+        >
+          <div
+            className="space-y-2"
+            data-headlessui-state=""
+          >
+            <div
+              className="flex items-center gap-3"
+            >
+              <p
+                className="text-16-bold"
+                data-headlessui-state=""
+                data-testid="txt"
+                id="headlessui-listbox-label-:r2p:"
+                onClick={[Function]}
+              >
+                Funding source
+              </p>
+              <div
+                className="relative"
+              >
+                <div
+                  aria-expanded={false}
+                  aria-haspopup="listbox"
+                  aria-labelledby="headlessui-listbox-label-:r2p: headlessui-listbox-button-:r2q:"
+                  className="pitems-center flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white py-2 pl-4 pr-4"
+                  data-headlessui-state=""
+                  disabled={false}
+                  id="headlessui-listbox-button-:r2q:"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  onKeyUp={[Function]}
+                >
+                  <p
+                    className="w-full uppercase line-clamp-1 text-14-bold"
+                    data-testid="txt"
+                  >
+                    Show All
+                  </p>
+                  <div
+                    style={
+                      Object {
+                        "height": undefined,
+                        "width": 20,
+                      }
+                    }
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="flex items-center gap-5"
+        />
+      </div>
+    </div>
+    <button
+      className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+    >
+      <span
+        className="flex items-center text-bold-caption-200"
+      >
+        Create
+      </span>
+    </button>
+    <div>
+      <table
+        className="w-full border-spacing-y-4 border-separate"
       >
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
+        <thead
+          className="bg-blueCustom-100"
         >
-          Cash
-        </td>
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
+          <tr
+            className="border-neutral-200 border bg-blueCustom-100"
+          >
+            <th
+              align="left"
+              className="whitespace-nowrap px-6 py-4 border-neutral-200 text-16-bold border first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg"
+              colSpan={1}
+              onClick={[Function]}
+            >
+              <div
+                className="flex items-center"
+                style={
+                  Object {
+                    "color": "currentColor",
+                    "fontFamily": "inherit",
+                    "fontSize": "inherit",
+                    "fontWeight": "inherit",
+                  }
+                }
+              >
+                Funding type
+              </div>
+            </th>
+            <th
+              align="left"
+              className="whitespace-nowrap px-6 py-4 border-neutral-200 text-16-bold border first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg cursor-pointer"
+              colSpan={1}
+              onClick={[Function]}
+            >
+              <div
+                className="flex items-center"
+                style={
+                  Object {
+                    "color": "currentColor",
+                    "fontFamily": "inherit",
+                    "fontSize": "inherit",
+                    "fontWeight": "inherit",
+                  }
+                }
+              >
+                Funding source
+                <div
+                  style={
+                    Object {
+                      "height": 14,
+                      "width": 11,
+                    }
+                  }
+                />
+              </div>
+            </th>
+            <th
+              align="left"
+              className="whitespace-nowrap px-6 py-4 border-neutral-200 text-16-bold border first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg cursor-pointer"
+              colSpan={1}
+              onClick={[Function]}
+            >
+              <div
+                className="flex items-center"
+                style={
+                  Object {
+                    "color": "currentColor",
+                    "fontFamily": "inherit",
+                    "fontSize": "inherit",
+                    "fontWeight": "inherit",
+                  }
+                }
+              >
+                Funding amount
+                <div
+                  style={
+                    Object {
+                      "height": 14,
+                      "width": 11,
+                    }
+                  }
+                />
+              </div>
+            </th>
+            <th
+              align="left"
+              className="whitespace-nowrap px-6 py-4 border-neutral-200 text-16-bold border first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg"
+              colSpan={1}
+              onClick={[Function]}
+            >
+              <div
+                className="flex items-center"
+                style={
+                  Object {
+                    "color": "currentColor",
+                    "fontFamily": "inherit",
+                    "fontSize": "inherit",
+                    "fontWeight": "inherit",
+                  }
+                }
+              >
+                Status
+              </div>
+            </th>
+            <th
+              align="left"
+              className="whitespace-nowrap px-6 py-4 border-neutral-200 text-16-bold border first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg"
+              colSpan={1}
+              onClick={[Function]}
+            >
+              <div
+                className="flex items-center"
+                style={
+                  Object {
+                    "color": "currentColor",
+                    "fontFamily": "inherit",
+                    "fontSize": "inherit",
+                    "fontWeight": "inherit",
+                  }
+                }
+              />
+            </th>
+          </tr>
+        </thead>
+        <tbody
+          className="space-y-4"
         >
-          VISA
-        </td>
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
+          <tr
+            className="rounded-lg bg-white rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Cash
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              VISA
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              2000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-error-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  error
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Cash
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Master Card
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              1000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-primary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  awaiting
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Credit
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              American Express
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              1500
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-tertiary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  warning
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Cash
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              VISA
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              7500
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-error-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  error
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Credit
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              American Express
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              1900
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-neutral-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  edit
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Credit
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Master Card
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              5000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-secondary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  success
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Credit
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              VISA
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              100000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-error-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  error
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Cash
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              VISA
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              60000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-primary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  awaiting
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Credit
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Master Card
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              15000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-tertiary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  warning
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white rounded-lg"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              Cash
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              VISA
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              1510000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-secondary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  success
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 border-neutral-200 border-t border-b first:border-l last:border-r text-14-light first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg px-6 py-4"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Components/Elements/Table Table Site Polygon 1`] = `
+<div>
+  <div
+    className="overflow-x-auto px-4 md:px-0 undefined"
+  >
+    <div
+      className="flex w-full items-center justify-between"
+    >
+      <div>
+        <div
+          className="relative w-64"
         >
-          7500
-        </td>
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
+          <div
+            style={
+              Object {
+                "height": undefined,
+                "width": 24,
+              }
+            }
+          />
+          <input
+            className="placeholder:text-body-300 text-body-300 w-full rounded-lg border border-neutral-200 py-2 pl-10 pr-4 text-neutral-1000 placeholder:text-neutral-1000"
+            onChange={[Function]}
+            placeholder="Search"
+            type="search"
+          />
+        </div>
+      </div>
+      <div
+        className="flex gap-5"
+      >
+        <div
+          className="flex items-center gap-5"
         >
           <div
-            className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-error-200 w-fit"
+            className="space-y-2"
+            data-headlessui-state=""
           >
             <div
-              style={
-                Object {
-                  "height": undefined,
-                  "width": 24,
+              className="flex items-center gap-3"
+            >
+              <p
+                className="text-16-bold"
+                data-headlessui-state=""
+                data-testid="txt"
+                id="headlessui-listbox-label-:r2t:"
+                onClick={[Function]}
+              >
+                Funding source
+              </p>
+              <div
+                className="relative"
+              >
+                <div
+                  aria-expanded={false}
+                  aria-haspopup="listbox"
+                  aria-labelledby="headlessui-listbox-label-:r2t: headlessui-listbox-button-:r2u:"
+                  className="pitems-center flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white py-2 pl-4 pr-4"
+                  data-headlessui-state=""
+                  disabled={false}
+                  id="headlessui-listbox-button-:r2u:"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  onKeyUp={[Function]}
+                >
+                  <p
+                    className="w-full uppercase line-clamp-1 text-14-bold"
+                    data-testid="txt"
+                  >
+                    Show All
+                  </p>
+                  <div
+                    style={
+                      Object {
+                        "height": undefined,
+                        "width": 20,
+                      }
+                    }
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="flex items-center gap-5"
+        />
+      </div>
+    </div>
+    <button
+      className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+    >
+      <span
+        className="flex items-center text-bold-caption-200"
+      >
+        Create
+      </span>
+    </button>
+    <div
+      className="border border-neutral-200 rounded-lg overflow-hidden"
+    >
+      <table
+        className="w-full border-collapse"
+      >
+        <thead
+          className="bg-blueCustom-100"
+        >
+          <tr
+            className="bg-neutral-150"
+          >
+            <th
+              align="left"
+              className="py-4 first:pl-4 first:pr-2 last:pl-2 last:pr-4 border-y border-neutral-200 text-12-semibold whitespace-normal px-2 border-t-0"
+              colSpan={1}
+              onClick={[Function]}
+            >
+              <div
+                className="flex items-center"
+                style={
+                  Object {
+                    "color": "currentColor",
+                    "fontFamily": "inherit",
+                    "fontSize": "inherit",
+                    "fontWeight": "inherit",
+                  }
                 }
-              }
-            />
-            <p
-              className="text-bold-caption-100"
-              data-testid="txt"
+              >
+                Funding type
+              </div>
+            </th>
+            <th
+              align="left"
+              className="py-4 first:pl-4 first:pr-2 last:pl-2 last:pr-4 border-y border-neutral-200 text-12-semibold whitespace-normal px-2 border-t-0 cursor-pointer"
+              colSpan={1}
+              onClick={[Function]}
+            >
+              <div
+                className="flex items-center"
+                style={
+                  Object {
+                    "color": "currentColor",
+                    "fontFamily": "inherit",
+                    "fontSize": "inherit",
+                    "fontWeight": "inherit",
+                  }
+                }
+              >
+                Funding source
+                <div
+                  style={
+                    Object {
+                      "height": 14,
+                      "width": 11,
+                    }
+                  }
+                />
+              </div>
+            </th>
+            <th
+              align="left"
+              className="py-4 first:pl-4 first:pr-2 last:pl-2 last:pr-4 border-y border-neutral-200 text-12-semibold whitespace-normal px-2 border-t-0 cursor-pointer"
+              colSpan={1}
+              onClick={[Function]}
+            >
+              <div
+                className="flex items-center"
+                style={
+                  Object {
+                    "color": "currentColor",
+                    "fontFamily": "inherit",
+                    "fontSize": "inherit",
+                    "fontWeight": "inherit",
+                  }
+                }
+              >
+                Funding amount
+                <div
+                  style={
+                    Object {
+                      "height": 14,
+                      "width": 11,
+                    }
+                  }
+                />
+              </div>
+            </th>
+            <th
+              align="left"
+              className="py-4 first:pl-4 first:pr-2 last:pl-2 last:pr-4 border-y border-neutral-200 text-12-semibold whitespace-normal px-2 border-t-0"
+              colSpan={1}
+              onClick={[Function]}
+            >
+              <div
+                className="flex items-center"
+                style={
+                  Object {
+                    "color": "currentColor",
+                    "fontFamily": "inherit",
+                    "fontSize": "inherit",
+                    "fontWeight": "inherit",
+                  }
+                }
+              >
+                Status
+              </div>
+            </th>
+            <th
+              align="left"
+              className="py-4 first:pl-4 first:pr-2 last:pl-2 last:pr-4 border-y border-neutral-200 text-12-semibold whitespace-normal px-2 border-t-0"
+              colSpan={1}
+              onClick={[Function]}
+            >
+              <div
+                className="flex items-center"
+                style={
+                  Object {
+                    "color": "currentColor",
+                    "fontFamily": "inherit",
+                    "fontSize": "inherit",
+                    "fontWeight": "inherit",
+                  }
+                }
+              />
+            </th>
+          </tr>
+        </thead>
+        <tbody
+          className=""
+        >
+          <tr
+            className="rounded-lg bg-white border-y border-neutral-200 last:border-b-0"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              Cash
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              VISA
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              2000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-error-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  error
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white border-y border-neutral-200 last:border-b-0"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              Cash
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              Master Card
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              1000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-primary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  awaiting
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white border-y border-neutral-200 last:border-b-0"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              Credit
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              American Express
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              1500
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-tertiary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  warning
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white border-y border-neutral-200 last:border-b-0"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              Cash
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              VISA
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              7500
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-error-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  error
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white border-y border-neutral-200 last:border-b-0"
+          >
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              Credit
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              American Express
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              1900
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-neutral-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  edit
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
             >
-              error
-            </p>
-          </div>
-        </td>
-        <td
-          align="right"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          <button
-            className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
-          >
-            <span
-              className="text-bold-caption-200 pt-0.75 leading-3"
-            >
-              View
-            </span>
-          </button>
-        </td>
-      </tr>
-      <tr
-        className="rounded-lg bg-white shadow"
-      >
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          Credit
-        </td>
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          American Express
-        </td>
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          1900
-        </td>
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          <div
-            className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-neutral-200 w-fit"
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white border-y border-neutral-200 last:border-b-0"
           >
-            <div
-              style={
-                Object {
-                  "height": undefined,
-                  "width": 24,
-                }
-              }
-            />
-            <p
-              className="text-bold-caption-100"
-              data-testid="txt"
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
             >
-              edit
-            </p>
-          </div>
-        </td>
-        <td
-          align="right"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          <button
-            className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
-          >
-            <span
-              className="text-bold-caption-200 pt-0.75 leading-3"
-            >
-              View
-            </span>
-          </button>
-        </td>
-      </tr>
-      <tr
-        className="rounded-lg bg-white shadow"
-      >
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          Credit
-        </td>
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          Master Card
-        </td>
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          5000
-        </td>
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          <div
-            className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-secondary-200 w-fit"
+              Credit
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              Master Card
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              5000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-secondary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  success
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white border-y border-neutral-200 last:border-b-0"
           >
-            <div
-              style={
-                Object {
-                  "height": undefined,
-                  "width": 24,
-                }
-              }
-            />
-            <p
-              className="text-bold-caption-100"
-              data-testid="txt"
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
             >
-              success
-            </p>
-          </div>
-        </td>
-        <td
-          align="right"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          <button
-            className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
-          >
-            <span
-              className="text-bold-caption-200 pt-0.75 leading-3"
-            >
-              View
-            </span>
-          </button>
-        </td>
-      </tr>
-      <tr
-        className="rounded-lg bg-white shadow"
-      >
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          Credit
-        </td>
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          VISA
-        </td>
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          100000
-        </td>
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          <div
-            className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-error-200 w-fit"
+              Credit
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              VISA
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              100000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-error-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  error
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white border-y border-neutral-200 last:border-b-0"
           >
-            <div
-              style={
-                Object {
-                  "height": undefined,
-                  "width": 24,
-                }
-              }
-            />
-            <p
-              className="text-bold-caption-100"
-              data-testid="txt"
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
             >
-              error
-            </p>
-          </div>
-        </td>
-        <td
-          align="right"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          <button
-            className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
-          >
-            <span
-              className="text-bold-caption-200 pt-0.75 leading-3"
-            >
-              View
-            </span>
-          </button>
-        </td>
-      </tr>
-      <tr
-        className="rounded-lg bg-white shadow"
-      >
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          Cash
-        </td>
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          VISA
-        </td>
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          60000
-        </td>
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          <div
-            className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-primary-200 w-fit"
+              Cash
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              VISA
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              60000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-primary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  awaiting
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white border-y border-neutral-200 last:border-b-0"
           >
-            <div
-              style={
-                Object {
-                  "height": undefined,
-                  "width": 24,
-                }
-              }
-            />
-            <p
-              className="text-bold-caption-100"
-              data-testid="txt"
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
             >
-              awaiting
-            </p>
-          </div>
-        </td>
-        <td
-          align="right"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          <button
-            className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
-          >
-            <span
-              className="text-bold-caption-200 pt-0.75 leading-3"
-            >
-              View
-            </span>
-          </button>
-        </td>
-      </tr>
-      <tr
-        className="rounded-lg bg-white shadow"
-      >
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          Credit
-        </td>
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          Master Card
-        </td>
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          15000
-        </td>
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          <div
-            className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-tertiary-200 w-fit"
+              Credit
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              Master Card
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              15000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-tertiary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  warning
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr
+            className="rounded-lg bg-white border-y border-neutral-200 last:border-b-0"
           >
-            <div
-              style={
-                Object {
-                  "height": undefined,
-                  "width": 24,
-                }
-              }
-            />
-            <p
-              className="text-bold-caption-100"
-              data-testid="txt"
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
             >
-              warning
-            </p>
-          </div>
-        </td>
-        <td
-          align="right"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          <button
-            className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
-          >
-            <span
-              className="text-bold-caption-200 pt-0.75 leading-3"
-            >
-              View
-            </span>
-          </button>
-        </td>
-      </tr>
-      <tr
-        className="rounded-lg bg-white shadow"
+              Cash
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              VISA
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              1510000
+            </td>
+            <td
+              align="left"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              <div
+                className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-secondary-200 w-fit"
+              >
+                <div
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": 24,
+                    }
+                  }
+                />
+                <p
+                  className="text-bold-caption-100"
+                  data-testid="txt"
+                >
+                  success
+                </p>
+              </div>
+            </td>
+            <td
+              align="right"
+              className="text-normal-subtitle-400 text-12-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 whitespace-nowrap"
+            >
+              <button
+                className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+              >
+                <span
+                  className="flex items-center text-bold-caption-200"
+                >
+                  View
+                </span>
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Components/Elements/Table Table Version 1`] = `
+<div
+  className="bg-neutral-600"
+>
+  <div>
+    <div
+      className="overflow-x-auto px-4 md:px-0 undefined"
+    >
+      <div
+        className="flex w-full items-center justify-between"
       >
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          Cash
-        </td>
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          VISA
-        </td>
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          1510000
-        </td>
-        <td
-          align="left"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
+        <div>
           <div
-            className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-secondary-200 w-fit"
+            className="relative w-64"
           >
             <div
               style={
@@ -721,140 +5793,806 @@ exports[`Storyshots Components/Elements/Table Default 1`] = `
                 }
               }
             />
-            <p
-              className="text-bold-caption-100"
-              data-testid="txt"
-            >
-              success
-            </p>
+            <input
+              className="placeholder:text-body-300 text-body-300 w-full rounded-lg border border-neutral-200 py-2 pl-10 pr-4 text-neutral-1000 placeholder:text-neutral-1000"
+              onChange={[Function]}
+              placeholder="Search"
+              type="search"
+            />
           </div>
-        </td>
-        <td
-          align="right"
-          className="first:rounded-tl-lg first:rounded-bl-lg last:rounded-br-lg last:rounded-tr-lg text-light-subtitle-400 px-6 py-4"
-        >
-          <button
-            className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
-          >
-            <span
-              className="text-bold-caption-200 pt-0.75 leading-3"
-            >
-              View
-            </span>
-          </button>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-  <div
-    className="flex items-center justify-between mt-6"
-  >
-    <div
-      className="space-y-2"
-      data-headlessui-state=""
-    >
-      <div
-        className="flex items-center gap-3"
-      >
+        </div>
         <div
-          aria-expanded={false}
-          aria-haspopup="listbox"
-          aria-labelledby="headlessui-listbox-label-:r2g: headlessui-listbox-button-:r2f:"
-          className="flex h-10 w-20 items-center justify-center rounded-md shadow"
-          data-headlessui-state=""
-          disabled={false}
-          id="headlessui-listbox-button-:r2f:"
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          onKeyUp={[Function]}
+          className="flex gap-5"
         >
           <div
-            className="flex h-full flex-1 items-center justify-center"
+            className="flex items-center gap-5"
           >
-            <p
-              className="w-fit uppercase line-clamp-1 text-bold-subtitle-500"
-              data-testid="txt"
+            <div
+              className="space-y-2"
+              data-headlessui-state=""
             >
-              5
-            </p>
+              <div
+                className="flex items-center gap-3"
+              >
+                <p
+                  className="text-16-bold"
+                  data-headlessui-state=""
+                  data-testid="txt"
+                  id="headlessui-listbox-label-:r2v:"
+                  onClick={[Function]}
+                >
+                  Funding source
+                </p>
+                <div
+                  className="relative"
+                >
+                  <div
+                    aria-expanded={false}
+                    aria-haspopup="listbox"
+                    aria-labelledby="headlessui-listbox-label-:r2v: headlessui-listbox-button-:r30:"
+                    className="pitems-center flex items-center justify-center gap-1 rounded-md border border-neutral-200 bg-white py-2 pl-4 pr-4"
+                    data-headlessui-state=""
+                    disabled={false}
+                    id="headlessui-listbox-button-:r30:"
+                    onClick={[Function]}
+                    onKeyDown={[Function]}
+                    onKeyUp={[Function]}
+                  >
+                    <p
+                      className="w-full uppercase line-clamp-1 text-14-bold"
+                      data-testid="txt"
+                    >
+                      Show All
+                    </p>
+                    <div
+                      style={
+                        Object {
+                          "height": undefined,
+                          "width": 20,
+                        }
+                      }
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <div
-            className="flex h-full flex-1 items-center justify-center rounded-r-lg bg-primary-200"
-          >
-            <div
-              style={
-                Object {
-                  "height": undefined,
-                  "width": 20,
-                }
-              }
-            />
-          </div>
+            className="flex items-center gap-5"
+          />
         </div>
-        <p
-          className="text-bold-subtitle-500"
-          data-headlessui-state=""
-          data-testid="txt"
-          id="headlessui-listbox-label-:r2g:"
-          onClick={[Function]}
-        >
-          Per page
-        </p>
       </div>
-    </div>
-    <div
-      className="flex items-center justify-center gap-5"
-      containerClassName="mt-6"
-      defaultPageSize={5}
-      hasPageSizeSelector={true}
-      setPageSize={[Function]}
-    >
-      <button
-        className="flex items-center justify-center rounded-full hover:bg-opacity-60"
-        disabled={true}
-        onClick={[Function]}
-      >
-        <div
-          style={
-            Object {
-              "height": undefined,
-              "width": 20,
-            }
-          }
-        />
-      </button>
-      <p
-        className="text-neutral-1000 underline text-bold-subtitle-500"
-        data-testid="txt"
-        disabled={false}
-        onClick={[Function]}
-        role="button"
-      >
-        1
-      </p>
-      <p
-        className="text-neutral-600 text-bold-subtitle-500"
-        data-testid="txt"
-        disabled={false}
-        onClick={[Function]}
-        role="button"
-      >
-        2
-      </p>
       <button
-        className="flex items-center justify-center rounded-full hover:bg-opacity-60"
-        disabled={false}
-        onClick={[Function]}
+        className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
       >
-        <div
-          style={
-            Object {
-              "height": undefined,
-              "width": 20,
-            }
-          }
-        />
+        <span
+          className="flex items-center text-bold-caption-200"
+        >
+          Create
+        </span>
       </button>
+      <div>
+        <table
+          className="w-full border-collapse"
+        >
+          <thead
+            className="bg-transparent"
+          >
+            <tr
+              className="!bg-transparent"
+            >
+              <th
+                align="left"
+                className="whitespace-nowrap px-6 py-4 text-white !px-0 !py-2"
+                colSpan={1}
+                onClick={[Function]}
+              >
+                <div
+                  className="flex items-center"
+                  style={
+                    Object {
+                      "color": "currentColor",
+                      "fontFamily": "inherit",
+                      "fontSize": "inherit",
+                      "fontWeight": "inherit",
+                    }
+                  }
+                >
+                  Funding type
+                </div>
+              </th>
+              <th
+                align="left"
+                className="whitespace-nowrap px-6 py-4 text-white !px-0 !py-2 cursor-pointer"
+                colSpan={1}
+                onClick={[Function]}
+              >
+                <div
+                  className="flex items-center"
+                  style={
+                    Object {
+                      "color": "currentColor",
+                      "fontFamily": "inherit",
+                      "fontSize": "inherit",
+                      "fontWeight": "inherit",
+                    }
+                  }
+                >
+                  Funding source
+                  <div
+                    style={
+                      Object {
+                        "height": 14,
+                        "width": 11,
+                      }
+                    }
+                  />
+                </div>
+              </th>
+              <th
+                align="left"
+                className="whitespace-nowrap px-6 py-4 text-white !px-0 !py-2 cursor-pointer"
+                colSpan={1}
+                onClick={[Function]}
+              >
+                <div
+                  className="flex items-center"
+                  style={
+                    Object {
+                      "color": "currentColor",
+                      "fontFamily": "inherit",
+                      "fontSize": "inherit",
+                      "fontWeight": "inherit",
+                    }
+                  }
+                >
+                  Funding amount
+                  <div
+                    style={
+                      Object {
+                        "height": 14,
+                        "width": 11,
+                      }
+                    }
+                  />
+                </div>
+              </th>
+              <th
+                align="left"
+                className="whitespace-nowrap px-6 py-4 text-white !px-0 !py-2"
+                colSpan={1}
+                onClick={[Function]}
+              >
+                <div
+                  className="flex items-center"
+                  style={
+                    Object {
+                      "color": "currentColor",
+                      "fontFamily": "inherit",
+                      "fontSize": "inherit",
+                      "fontWeight": "inherit",
+                    }
+                  }
+                >
+                  Status
+                </div>
+              </th>
+              <th
+                align="left"
+                className="whitespace-nowrap px-6 py-4 text-white !px-0 !py-2"
+                colSpan={1}
+                onClick={[Function]}
+              >
+                <div
+                  className="flex items-center"
+                  style={
+                    Object {
+                      "color": "currentColor",
+                      "fontFamily": "inherit",
+                      "fontSize": "inherit",
+                      "fontWeight": "inherit",
+                    }
+                  }
+                />
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            className=""
+          >
+            <tr
+              className="rounded-lg bg-transparent border-y border-neutral-200 lastRow !group hover:bg-[#ffffff33] py-0.5"
+            >
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                Cash
+              </td>
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                VISA
+              </td>
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                2000
+              </td>
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                <div
+                  className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-error-200 w-fit"
+                >
+                  <div
+                    style={
+                      Object {
+                        "height": undefined,
+                        "width": 24,
+                      }
+                    }
+                  />
+                  <p
+                    className="text-bold-caption-100"
+                    data-testid="txt"
+                  >
+                    error
+                  </p>
+                </div>
+              </td>
+              <td
+                align="right"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                <button
+                  className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+                >
+                  <span
+                    className="flex items-center text-bold-caption-200"
+                  >
+                    View
+                  </span>
+                </button>
+              </td>
+            </tr>
+            <tr
+              className="rounded-lg bg-transparent border-y border-neutral-200 lastRow !group hover:bg-[#ffffff33] py-0.5"
+            >
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                Cash
+              </td>
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                Master Card
+              </td>
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                1000
+              </td>
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                <div
+                  className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-primary-200 w-fit"
+                >
+                  <div
+                    style={
+                      Object {
+                        "height": undefined,
+                        "width": 24,
+                      }
+                    }
+                  />
+                  <p
+                    className="text-bold-caption-100"
+                    data-testid="txt"
+                  >
+                    awaiting
+                  </p>
+                </div>
+              </td>
+              <td
+                align="right"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                <button
+                  className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+                >
+                  <span
+                    className="flex items-center text-bold-caption-200"
+                  >
+                    View
+                  </span>
+                </button>
+              </td>
+            </tr>
+            <tr
+              className="rounded-lg bg-transparent border-y border-neutral-200 lastRow !group hover:bg-[#ffffff33] py-0.5"
+            >
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                Credit
+              </td>
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                American Express
+              </td>
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                1500
+              </td>
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                <div
+                  className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-tertiary-200 w-fit"
+                >
+                  <div
+                    style={
+                      Object {
+                        "height": undefined,
+                        "width": 24,
+                      }
+                    }
+                  />
+                  <p
+                    className="text-bold-caption-100"
+                    data-testid="txt"
+                  >
+                    warning
+                  </p>
+                </div>
+              </td>
+              <td
+                align="right"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                <button
+                  className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+                >
+                  <span
+                    className="flex items-center text-bold-caption-200"
+                  >
+                    View
+                  </span>
+                </button>
+              </td>
+            </tr>
+            <tr
+              className="rounded-lg bg-transparent border-y border-neutral-200 lastRow !group hover:bg-[#ffffff33] py-0.5"
+            >
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                Cash
+              </td>
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                VISA
+              </td>
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                7500
+              </td>
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                <div
+                  className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-error-200 w-fit"
+                >
+                  <div
+                    style={
+                      Object {
+                        "height": undefined,
+                        "width": 24,
+                      }
+                    }
+                  />
+                  <p
+                    className="text-bold-caption-100"
+                    data-testid="txt"
+                  >
+                    error
+                  </p>
+                </div>
+              </td>
+              <td
+                align="right"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                <button
+                  className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+                >
+                  <span
+                    className="flex items-center text-bold-caption-200"
+                  >
+                    View
+                  </span>
+                </button>
+              </td>
+            </tr>
+            <tr
+              className="rounded-lg bg-transparent border-y border-neutral-200 lastRow !group hover:bg-[#ffffff33] py-0.5"
+            >
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                Credit
+              </td>
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                American Express
+              </td>
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                1900
+              </td>
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                <div
+                  className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-neutral-200 w-fit"
+                >
+                  <div
+                    style={
+                      Object {
+                        "height": undefined,
+                        "width": 24,
+                      }
+                    }
+                  />
+                  <p
+                    className="text-bold-caption-100"
+                    data-testid="txt"
+                  >
+                    edit
+                  </p>
+                </div>
+              </td>
+              <td
+                align="right"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                <button
+                  className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+                >
+                  <span
+                    className="flex items-center text-bold-caption-200"
+                  >
+                    View
+                  </span>
+                </button>
+              </td>
+            </tr>
+            <tr
+              className="rounded-lg bg-transparent border-y border-neutral-200 lastRow !group hover:bg-[#ffffff33] py-0.5"
+            >
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                Credit
+              </td>
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                Master Card
+              </td>
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                5000
+              </td>
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                <div
+                  className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-secondary-200 w-fit"
+                >
+                  <div
+                    style={
+                      Object {
+                        "height": undefined,
+                        "width": 24,
+                      }
+                    }
+                  />
+                  <p
+                    className="text-bold-caption-100"
+                    data-testid="txt"
+                  >
+                    success
+                  </p>
+                </div>
+              </td>
+              <td
+                align="right"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                <button
+                  className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+                >
+                  <span
+                    className="flex items-center text-bold-caption-200"
+                  >
+                    View
+                  </span>
+                </button>
+              </td>
+            </tr>
+            <tr
+              className="rounded-lg bg-transparent border-y border-neutral-200 lastRow !group hover:bg-[#ffffff33] py-0.5"
+            >
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                Credit
+              </td>
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                VISA
+              </td>
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                100000
+              </td>
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                <div
+                  className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-error-200 w-fit"
+                >
+                  <div
+                    style={
+                      Object {
+                        "height": undefined,
+                        "width": 24,
+                      }
+                    }
+                  />
+                  <p
+                    className="text-bold-caption-100"
+                    data-testid="txt"
+                  >
+                    error
+                  </p>
+                </div>
+              </td>
+              <td
+                align="right"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                <button
+                  className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+                >
+                  <span
+                    className="flex items-center text-bold-caption-200"
+                  >
+                    View
+                  </span>
+                </button>
+              </td>
+            </tr>
+            <tr
+              className="rounded-lg bg-transparent border-y border-neutral-200 lastRow !group hover:bg-[#ffffff33] py-0.5"
+            >
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                Cash
+              </td>
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                VISA
+              </td>
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                60000
+              </td>
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                <div
+                  className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-primary-200 w-fit"
+                >
+                  <div
+                    style={
+                      Object {
+                        "height": undefined,
+                        "width": 24,
+                      }
+                    }
+                  />
+                  <p
+                    className="text-bold-caption-100"
+                    data-testid="txt"
+                  >
+                    awaiting
+                  </p>
+                </div>
+              </td>
+              <td
+                align="right"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                <button
+                  className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+                >
+                  <span
+                    className="flex items-center text-bold-caption-200"
+                  >
+                    View
+                  </span>
+                </button>
+              </td>
+            </tr>
+            <tr
+              className="rounded-lg bg-transparent border-y border-neutral-200 lastRow !group hover:bg-[#ffffff33] py-0.5"
+            >
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                Credit
+              </td>
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                Master Card
+              </td>
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                15000
+              </td>
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                <div
+                  className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-tertiary-200 w-fit"
+                >
+                  <div
+                    style={
+                      Object {
+                        "height": undefined,
+                        "width": 24,
+                      }
+                    }
+                  />
+                  <p
+                    className="text-bold-caption-100"
+                    data-testid="txt"
+                  >
+                    warning
+                  </p>
+                </div>
+              </td>
+              <td
+                align="right"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                <button
+                  className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+                >
+                  <span
+                    className="flex items-center text-bold-caption-200"
+                  >
+                    View
+                  </span>
+                </button>
+              </td>
+            </tr>
+            <tr
+              className="rounded-lg bg-transparent border-y border-neutral-200 lastRow !group hover:bg-[#ffffff33] py-0.5"
+            >
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                Cash
+              </td>
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                VISA
+              </td>
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                1510000
+              </td>
+              <td
+                align="left"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                <div
+                  className="flex items-center gap-1.5 whitespace-nowrap rounded-xl py-0.5 pr-3 pl-1.5 bg-secondary-200 w-fit"
+                >
+                  <div
+                    style={
+                      Object {
+                        "height": undefined,
+                        "width": 24,
+                      }
+                    }
+                  />
+                  <p
+                    className="text-bold-caption-100"
+                    data-testid="txt"
+                  >
+                    success
+                  </p>
+                </div>
+              </td>
+              <td
+                align="right"
+                className="text-normal-subtitle-400 first:rounded-l-lg last:rounded-r-lg text-10-bold text-white"
+              >
+                <button
+                  className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+                >
+                  <span
+                    className="flex items-center text-bold-caption-200"
+                  >
+                    View
+                  </span>
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/components/elements/Tabs/Default/__snapshots__/Tabs.stories.storyshot b/src/components/elements/Tabs/Default/__snapshots__/Tabs.stories.storyshot
index bd70e4075..3bb08da30 100644
--- a/src/components/elements/Tabs/Default/__snapshots__/Tabs.stories.storyshot
+++ b/src/components/elements/Tabs/Default/__snapshots__/Tabs.stories.storyshot
@@ -2,7 +2,7 @@
 
 exports[`Storyshots Components/Elements/Tabs Horizontal 1`] = `
 <div
-  className="flex h-full w-full"
+  className="flex h-full w-full shadow"
 >
   <div
     aria-orientation="vertical"
@@ -12,9 +12,9 @@ exports[`Storyshots Components/Elements/Tabs Horizontal 1`] = `
     <button
       aria-checked="false"
       aria-selected="true"
-      className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border border-b border-neutral-100 border-r-white bg-white text-neutral-1000 peer-aria-checked:shadow-t-secondary"
+      className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border-b border-neutral-100 border-r-white bg-white text-neutral-1000 peer-aria-checked:shadow-t-secondary"
       data-headlessui-state="selected"
-      id="headlessui-tabs-tab-:r2h:"
+      id="headlessui-tabs-tab-:r31:"
       onClick={[Function]}
       onKeyDown={[Function]}
       onMouseDown={[Function]}
@@ -22,7 +22,7 @@ exports[`Storyshots Components/Elements/Tabs Horizontal 1`] = `
       tabIndex={0}
     >
       <p
-        className="w-full text-left line-clamp-2 md:pr-6 text-bold-caption-200 with-inner-html"
+        className="w-full text-left line-clamp-2 md:pr-6 text-14-bold with-inner-html"
         dangerouslySetInnerHTML={
           Object {
             "__html": "Organization Details",
@@ -34,9 +34,9 @@ exports[`Storyshots Components/Elements/Tabs Horizontal 1`] = `
     <button
       aria-checked="false"
       aria-selected="false"
-      className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
+      className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
       data-headlessui-state=""
-      id="headlessui-tabs-tab-:r2i:"
+      id="headlessui-tabs-tab-:r32:"
       onClick={[Function]}
       onKeyDown={[Function]}
       onMouseDown={[Function]}
@@ -44,7 +44,7 @@ exports[`Storyshots Components/Elements/Tabs Horizontal 1`] = `
       tabIndex={-1}
     >
       <p
-        className="w-full text-left line-clamp-2 md:pr-6 text-bold-caption-200 with-inner-html"
+        className="w-full text-left line-clamp-2 md:pr-6 text-14-bold with-inner-html"
         dangerouslySetInnerHTML={
           Object {
             "__html": "Social Media Presence",
@@ -56,9 +56,9 @@ exports[`Storyshots Components/Elements/Tabs Horizontal 1`] = `
     <button
       aria-checked="false"
       aria-selected="false"
-      className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
+      className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
       data-headlessui-state=""
-      id="headlessui-tabs-tab-:r2j:"
+      id="headlessui-tabs-tab-:r33:"
       onClick={[Function]}
       onKeyDown={[Function]}
       onMouseDown={[Function]}
@@ -66,7 +66,7 @@ exports[`Storyshots Components/Elements/Tabs Horizontal 1`] = `
       tabIndex={-1}
     >
       <p
-        className="w-full text-left line-clamp-2 md:pr-6 text-bold-caption-200 with-inner-html"
+        className="w-full text-left line-clamp-2 md:pr-6 text-14-bold with-inner-html"
         dangerouslySetInnerHTML={
           Object {
             "__html": "This is a very long tab title too long to fit into one line",
@@ -78,9 +78,9 @@ exports[`Storyshots Components/Elements/Tabs Horizontal 1`] = `
     <button
       aria-checked="false"
       aria-selected="false"
-      className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border border-b border-neutral-100 bg-neutral-300 text-neutral-900"
+      className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border-b border-neutral-100 bg-neutral-300 text-neutral-900"
       data-headlessui-state=""
-      id="headlessui-tabs-tab-:r2k:"
+      id="headlessui-tabs-tab-:r34:"
       onClick={[Function]}
       onKeyDown={[Function]}
       onMouseDown={[Function]}
@@ -88,7 +88,7 @@ exports[`Storyshots Components/Elements/Tabs Horizontal 1`] = `
       tabIndex={-1}
     >
       <p
-        className="w-full text-left line-clamp-2 md:pr-6 text-bold-caption-200 with-inner-html"
+        className="w-full text-left line-clamp-2 md:pr-6 text-14-bold with-inner-html"
         dangerouslySetInnerHTML={
           Object {
             "__html": "Additional Information",
diff --git a/src/components/elements/Tabs/Secondary/__snapshots__/SecondaryTabs.stories.storyshot b/src/components/elements/Tabs/Secondary/__snapshots__/SecondaryTabs.stories.storyshot
index f02c3a623..0b6e04d3d 100644
--- a/src/components/elements/Tabs/Secondary/__snapshots__/SecondaryTabs.stories.storyshot
+++ b/src/components/elements/Tabs/Secondary/__snapshots__/SecondaryTabs.stories.storyshot
@@ -6,17 +6,17 @@ exports[`Storyshots Components/Elements/Tabs Secondary 1`] = `
 >
   <div
     aria-orientation="horizontal"
-    className="h-12 w-full border-b border-neutral-400 bg-white"
+    className="h-max w-full border-b-2 border-neutral-200 bg-white"
     role="tablist"
   >
     <div
-      className="justify-between lg:justify-center lg:gap-30 m-auto flex h-full items-center"
+      className="justify-between lg:justify-start lg:gap-30 m-auto flex h-full items-center"
     >
       <button
         aria-selected={true}
-        className="h-full border-b-[3px] px-4 pt-[3px] outline-none border-primary"
+        className="mb-[-2px] h-full border-b-[3px] px-4 py-4  outline-none border-primary"
         data-headlessui-state="selected"
-        id="headlessui-tabs-tab-:r2l:"
+        id="headlessui-tabs-tab-:r35:"
         onClick={[Function]}
         onKeyDown={[Function]}
         onMouseDown={[Function]}
@@ -24,7 +24,7 @@ exports[`Storyshots Components/Elements/Tabs Secondary 1`] = `
         tabIndex={0}
       >
         <p
-          className="whitespace-nowrap text-black text-heading-200"
+          className="whitespace-nowrap text-black text-16-bold"
           data-testid="txt"
         >
           Overview
@@ -32,9 +32,9 @@ exports[`Storyshots Components/Elements/Tabs Secondary 1`] = `
       </button>
       <button
         aria-selected={false}
-        className="h-full border-b-[3px] px-4 pt-[3px] outline-none border-transparent"
+        className="mb-[-2px] h-full border-b-[3px] px-4 py-4  outline-none border-transparent"
         data-headlessui-state=""
-        id="headlessui-tabs-tab-:r2m:"
+        id="headlessui-tabs-tab-:r36:"
         onClick={[Function]}
         onKeyDown={[Function]}
         onMouseDown={[Function]}
@@ -42,7 +42,7 @@ exports[`Storyshots Components/Elements/Tabs Secondary 1`] = `
         tabIndex={-1}
       >
         <p
-          className="whitespace-nowrap text-neutral-700 text-heading-200"
+          className="whitespace-nowrap text-black text-16-light"
           data-testid="txt"
         >
           Environmental Impact
@@ -50,9 +50,9 @@ exports[`Storyshots Components/Elements/Tabs Secondary 1`] = `
       </button>
       <button
         aria-selected={false}
-        className="h-full border-b-[3px] px-4 pt-[3px] outline-none border-transparent"
+        className="mb-[-2px] h-full border-b-[3px] px-4 py-4  outline-none border-transparent"
         data-headlessui-state=""
-        id="headlessui-tabs-tab-:r2n:"
+        id="headlessui-tabs-tab-:r37:"
         onClick={[Function]}
         onKeyDown={[Function]}
         onMouseDown={[Function]}
@@ -60,7 +60,7 @@ exports[`Storyshots Components/Elements/Tabs Secondary 1`] = `
         tabIndex={-1}
       >
         <p
-          className="whitespace-nowrap text-neutral-700 text-heading-200"
+          className="whitespace-nowrap text-black text-16-light"
           data-testid="txt"
         >
           Social Impact
@@ -71,7 +71,7 @@ exports[`Storyshots Components/Elements/Tabs Secondary 1`] = `
   <div>
     <div
       data-headlessui-state="selected"
-      id="headlessui-tabs-panel-:r2o:"
+      id="headlessui-tabs-panel-:r38:"
       role="tabpanel"
       tabIndex={0}
     >
@@ -80,7 +80,7 @@ exports[`Storyshots Components/Elements/Tabs Secondary 1`] = `
       </div>
     </div>
     <span
-      id="headlessui-tabs-panel-:r2p:"
+      id="headlessui-tabs-panel-:r39:"
       role="tabpanel"
       style={
         Object {
@@ -100,7 +100,7 @@ exports[`Storyshots Components/Elements/Tabs Secondary 1`] = `
       tabIndex={-1}
     />
     <span
-      id="headlessui-tabs-panel-:r2q:"
+      id="headlessui-tabs-panel-:r3a:"
       role="tabpanel"
       style={
         Object {
diff --git a/src/components/elements/Toast/__snapshots__/Toast.stories.storyshot b/src/components/elements/Toast/__snapshots__/Toast.stories.storyshot
index 90ec29bf3..8ee7f08e9 100644
--- a/src/components/elements/Toast/__snapshots__/Toast.stories.storyshot
+++ b/src/components/elements/Toast/__snapshots__/Toast.stories.storyshot
@@ -3,11 +3,11 @@
 exports[`Storyshots Components/Elements/Toast Error 1`] = `
 Array [
   <button
-    className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+    className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
     onClick={[Function]}
   >
     <span
-      className="text-bold-caption-200 pt-0.75 leading-3"
+      className="flex items-center text-bold-caption-200"
     >
       Trigger
     </span>
@@ -21,11 +21,11 @@ Array [
 exports[`Storyshots Components/Elements/Toast Success 1`] = `
 Array [
   <button
-    className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+    className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
     onClick={[Function]}
   >
     <span
-      className="text-bold-caption-200 pt-0.75 leading-3"
+      className="flex items-center text-bold-caption-200"
     >
       Trigger
     </span>
diff --git a/src/components/extensive/ActionTracker/__snapshots__/ActionTracker.stories.storyshot b/src/components/extensive/ActionTracker/__snapshots__/ActionTracker.stories.storyshot
index 44ec66f46..e688fa6bc 100644
--- a/src/components/extensive/ActionTracker/__snapshots__/ActionTracker.stories.storyshot
+++ b/src/components/extensive/ActionTracker/__snapshots__/ActionTracker.stories.storyshot
@@ -7,8 +7,8 @@ exports[`Storyshots Components/Extensive/ActionTracker/ActionTrackerCard Default
   <div
     style={
       Object {
-        "height": 36,
-        "width": 36,
+        "height": undefined,
+        "width": 24,
       }
     }
   />
@@ -19,7 +19,7 @@ exports[`Storyshots Components/Extensive/ActionTracker/ActionTrackerCard Default
     A title
   </p>
   <ul
-    className="scroll-indicator-hide mt-4 flex h-full w-full flex-1 flex-col gap-3 overflow-y-auto rounded-lg border border-neutral border-opacity-30 p-4"
+    className="scroll-indicator-hide mt-4 flex h-full w-full flex-1 flex-col gap-3 overflow-y-auto rounded-lg border border-neutral border-opacity-30 p-4 wide:p-6"
   >
     <li>
       <a
@@ -31,7 +31,7 @@ exports[`Storyshots Components/Extensive/ActionTracker/ActionTrackerCard Default
         title="Card 1"
       >
         <div
-          className="mx-3 mb-2 mt-3"
+          className="mx-3 mb-2 mt-3 wide:mx-6 wide:mt-6 wide:mb-5"
         >
           <div
             className="mb-1 flex items-start gap-3"
@@ -54,7 +54,7 @@ exports[`Storyshots Components/Extensive/ActionTracker/ActionTrackerCard Default
                 }
               />
               <p
-                className="pt-0.5 text-bold-caption-100"
+                className="text-bold-caption-100"
                 data-testid="txt"
               >
                 Awaiting
@@ -72,10 +72,10 @@ exports[`Storyshots Components/Extensive/ActionTracker/ActionTrackerCard Default
           />
         </div>
         <div
-          className="flex w-full items-center justify-between rounded-b-md bg-primary-200 p-3 group-hover:bg-primary-400 "
+          className="flex w-full items-center justify-between rounded-b-md bg-primary-200 p-3 group-hover:bg-primary-400 group-hover:text-white wide:p-6"
         >
           <p
-            className="text-body-500"
+            className="group-hover:text-white text-button-700"
             data-testid="txt"
           >
             cta
@@ -101,7 +101,7 @@ exports[`Storyshots Components/Extensive/ActionTracker/ActionTrackerCard Default
         title="Card 2"
       >
         <div
-          className="mx-3 mb-2 mt-3"
+          className="mx-3 mb-2 mt-3 wide:mx-6 wide:mt-6 wide:mb-5"
         >
           <div
             className="mb-1 flex items-start gap-3"
@@ -124,7 +124,7 @@ exports[`Storyshots Components/Extensive/ActionTracker/ActionTrackerCard Default
                 }
               />
               <p
-                className="pt-0.5 text-bold-caption-100"
+                className="text-bold-caption-100"
                 data-testid="txt"
               >
                 Edit
@@ -142,10 +142,10 @@ exports[`Storyshots Components/Extensive/ActionTracker/ActionTrackerCard Default
           />
         </div>
         <div
-          className="flex w-full items-center justify-between rounded-b-md bg-primary-200 p-3 group-hover:bg-primary-400 "
+          className="flex w-full items-center justify-between rounded-b-md bg-primary-200 p-3 group-hover:bg-primary-400 group-hover:text-white wide:p-6"
         >
           <p
-            className="text-body-500"
+            className="group-hover:text-white text-button-700"
             data-testid="txt"
           >
             cta
@@ -171,7 +171,7 @@ exports[`Storyshots Components/Extensive/ActionTracker/ActionTrackerCard Default
         title="Card 3"
       >
         <div
-          className="mx-3 mb-2 mt-3"
+          className="mx-3 mb-2 mt-3 wide:mx-6 wide:mt-6 wide:mb-5"
         >
           <div
             className="mb-1 flex items-start gap-3"
@@ -194,7 +194,7 @@ exports[`Storyshots Components/Extensive/ActionTracker/ActionTrackerCard Default
                 }
               />
               <p
-                className="pt-0.5 text-bold-caption-100"
+                className="text-bold-caption-100"
                 data-testid="txt"
               >
                 Error
@@ -212,10 +212,10 @@ exports[`Storyshots Components/Extensive/ActionTracker/ActionTrackerCard Default
           />
         </div>
         <div
-          className="flex w-full items-center justify-between rounded-b-md bg-primary-200 p-3 group-hover:bg-primary-400 "
+          className="flex w-full items-center justify-between rounded-b-md bg-primary-200 p-3 group-hover:bg-primary-400 group-hover:text-white wide:p-6"
         >
           <p
-            className="text-body-500"
+            className="group-hover:text-white text-button-700"
             data-testid="txt"
           >
             cta
@@ -241,7 +241,7 @@ exports[`Storyshots Components/Extensive/ActionTracker/ActionTrackerCard Default
         title="Card 4"
       >
         <div
-          className="mx-3 mb-2 mt-3"
+          className="mx-3 mb-2 mt-3 wide:mx-6 wide:mt-6 wide:mb-5"
         >
           <div
             className="mb-1 flex items-start gap-3"
@@ -264,7 +264,7 @@ exports[`Storyshots Components/Extensive/ActionTracker/ActionTrackerCard Default
                 }
               />
               <p
-                className="pt-0.5 text-bold-caption-100"
+                className="text-bold-caption-100"
                 data-testid="txt"
               >
                 Success
@@ -282,10 +282,10 @@ exports[`Storyshots Components/Extensive/ActionTracker/ActionTrackerCard Default
           />
         </div>
         <div
-          className="flex w-full items-center justify-between rounded-b-md bg-primary-200 p-3 group-hover:bg-primary-400 "
+          className="flex w-full items-center justify-between rounded-b-md bg-primary-200 p-3 group-hover:bg-primary-400 group-hover:text-white wide:p-6"
         >
           <p
-            className="text-body-500"
+            className="group-hover:text-white text-button-700"
             data-testid="txt"
           >
             cta
@@ -311,7 +311,7 @@ exports[`Storyshots Components/Extensive/ActionTracker/ActionTrackerCard Default
         title="Card 5"
       >
         <div
-          className="mx-3 mb-2 mt-3"
+          className="mx-3 mb-2 mt-3 wide:mx-6 wide:mt-6 wide:mb-5"
         >
           <div
             className="mb-1 flex items-start gap-3"
@@ -334,7 +334,7 @@ exports[`Storyshots Components/Extensive/ActionTracker/ActionTrackerCard Default
                 }
               />
               <p
-                className="pt-0.5 text-bold-caption-100"
+                className="text-bold-caption-100"
                 data-testid="txt"
               >
                 Warning
@@ -352,10 +352,10 @@ exports[`Storyshots Components/Extensive/ActionTracker/ActionTrackerCard Default
           />
         </div>
         <div
-          className="flex w-full items-center justify-between rounded-b-md bg-primary-200 p-3 group-hover:bg-primary-400 "
+          className="flex w-full items-center justify-between rounded-b-md bg-primary-200 p-3 group-hover:bg-primary-400 group-hover:text-white wide:p-6"
         >
           <p
-            className="text-body-500"
+            className="group-hover:text-white text-button-700"
             data-testid="txt"
           >
             cta
@@ -382,8 +382,8 @@ exports[`Storyshots Components/Extensive/ActionTracker/ActionTrackerCard Empty 1
   <div
     style={
       Object {
-        "height": 36,
-        "width": 36,
+        "height": undefined,
+        "width": 24,
       }
     }
   />
@@ -409,10 +409,10 @@ exports[`Storyshots Components/Extensive/ActionTracker/ActionTrackerCard Empty 1
       Empty Subtitle
     </p>
     <button
-      className="mt-6 bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+      className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content mt-6"
     >
       <span
-        className="text-bold-caption-200 pt-0.75 leading-3"
+        className="flex items-center text-bold-caption-200"
       >
         CTA here
       </span>
diff --git a/src/components/extensive/ActionTracker/__snapshots__/ActionTrackerCardRow.stories.storyshot b/src/components/extensive/ActionTracker/__snapshots__/ActionTrackerCardRow.stories.storyshot
index 6361ea606..7b9396519 100644
--- a/src/components/extensive/ActionTracker/__snapshots__/ActionTrackerCardRow.stories.storyshot
+++ b/src/components/extensive/ActionTracker/__snapshots__/ActionTrackerCardRow.stories.storyshot
@@ -10,7 +10,7 @@ exports[`Storyshots Components/Extensive/ActionTracker/CardRow Default 1`] = `
   title="TerraFund for AFR100: Landscapes - Non Profits"
 >
   <div
-    className="mx-3 mb-2 mt-3"
+    className="mx-3 mb-2 mt-3 wide:mx-6 wide:mt-6 wide:mb-5"
   >
     <div
       className="mb-1 flex items-start gap-3"
@@ -33,7 +33,7 @@ exports[`Storyshots Components/Extensive/ActionTracker/CardRow Default 1`] = `
           }
         />
         <p
-          className="pt-0.5 text-bold-caption-100"
+          className="text-bold-caption-100"
           data-testid="txt"
         >
           Draft
@@ -51,10 +51,10 @@ exports[`Storyshots Components/Extensive/ActionTracker/CardRow Default 1`] = `
     />
   </div>
   <div
-    className="flex w-full items-center justify-between rounded-b-md bg-primary-200 p-3 group-hover:bg-primary-400 "
+    className="flex w-full items-center justify-between rounded-b-md bg-primary-200 p-3 group-hover:bg-primary-400 group-hover:text-white wide:p-6"
   >
     <p
-      className="text-body-500"
+      className="group-hover:text-white text-button-700"
       data-testid="txt"
     >
       Continue Draft
diff --git a/src/components/extensive/ActionTracker/cards/__snapshots__/ApplicationsCard.stories.storyshot b/src/components/extensive/ActionTracker/cards/__snapshots__/ApplicationsCard.stories.storyshot
index 024613e50..8de3ef645 100644
--- a/src/components/extensive/ActionTracker/cards/__snapshots__/ApplicationsCard.stories.storyshot
+++ b/src/components/extensive/ActionTracker/cards/__snapshots__/ApplicationsCard.stories.storyshot
@@ -7,8 +7,8 @@ exports[`Storyshots Components/Extensive/ActionTracker/ApplicationsCard Default
   <div
     style={
       Object {
-        "height": 36,
-        "width": 36,
+        "height": undefined,
+        "width": 24,
       }
     }
   />
@@ -25,7 +25,7 @@ exports[`Storyshots Components/Extensive/ActionTracker/ApplicationsCard Default
     You have 6 updates
   </p>
   <ul
-    className="scroll-indicator-hide mt-4 flex h-full w-full flex-1 flex-col gap-3 overflow-y-auto rounded-lg border border-neutral border-opacity-30 p-4"
+    className="scroll-indicator-hide mt-4 flex h-full w-full flex-1 flex-col gap-3 overflow-y-auto rounded-lg border border-neutral border-opacity-30 p-4 wide:p-6"
   >
     <li>
       <a
@@ -37,7 +37,7 @@ exports[`Storyshots Components/Extensive/ActionTracker/ApplicationsCard Default
         title="TerraFund for AFR100: Landscapes - Expression of Interest (Enterprises)"
       >
         <div
-          className="mx-3 mb-2 mt-3"
+          className="mx-3 mb-2 mt-3 wide:mx-6 wide:mt-6 wide:mb-5"
         >
           <div
             className="mb-1 flex items-start gap-3"
@@ -60,7 +60,7 @@ exports[`Storyshots Components/Extensive/ActionTracker/ApplicationsCard Default
                 }
               />
               <p
-                className="pt-0.5 text-bold-caption-100"
+                className="text-bold-caption-100"
                 data-testid="txt"
               >
                 Approved
@@ -78,10 +78,10 @@ exports[`Storyshots Components/Extensive/ActionTracker/ApplicationsCard Default
           />
         </div>
         <div
-          className="flex w-full items-center justify-between rounded-b-md bg-primary-200 p-3 group-hover:bg-primary-400 "
+          className="flex w-full items-center justify-between rounded-b-md bg-primary-200 p-3 group-hover:bg-primary-400 group-hover:text-white wide:p-6"
         >
           <p
-            className="text-body-500"
+            className="group-hover:text-white text-button-700"
             data-testid="txt"
           >
             View Application
@@ -107,7 +107,7 @@ exports[`Storyshots Components/Extensive/ActionTracker/ApplicationsCard Default
         title="TerraFund for AFR100: Landscapes - Expression of Interest (Enterprises)"
       >
         <div
-          className="mx-3 mb-2 mt-3"
+          className="mx-3 mb-2 mt-3 wide:mx-6 wide:mt-6 wide:mb-5"
         >
           <div
             className="mb-1 flex items-start gap-3"
@@ -130,7 +130,7 @@ exports[`Storyshots Components/Extensive/ActionTracker/ApplicationsCard Default
                 }
               />
               <p
-                className="pt-0.5 text-bold-caption-100"
+                className="text-bold-caption-100"
                 data-testid="txt"
               >
                 Draft
@@ -148,10 +148,10 @@ exports[`Storyshots Components/Extensive/ActionTracker/ApplicationsCard Default
           />
         </div>
         <div
-          className="flex w-full items-center justify-between rounded-b-md bg-primary-200 p-3 group-hover:bg-primary-400 "
+          className="flex w-full items-center justify-between rounded-b-md bg-primary-200 p-3 group-hover:bg-primary-400 group-hover:text-white wide:p-6"
         >
           <p
-            className="text-body-500"
+            className="group-hover:text-white text-button-700"
             data-testid="txt"
           >
             View Application
@@ -177,7 +177,7 @@ exports[`Storyshots Components/Extensive/ActionTracker/ApplicationsCard Default
         title="TerraFund for AFR100: Landscapes - Expression of Interest (Enterprises)"
       >
         <div
-          className="mx-3 mb-2 mt-3"
+          className="mx-3 mb-2 mt-3 wide:mx-6 wide:mt-6 wide:mb-5"
         >
           <div
             className="mb-1 flex items-start gap-3"
@@ -200,7 +200,7 @@ exports[`Storyshots Components/Extensive/ActionTracker/ApplicationsCard Default
                 }
               />
               <p
-                className="pt-0.5 text-bold-caption-100"
+                className="text-bold-caption-100"
                 data-testid="txt"
               >
                 Draft
@@ -218,10 +218,10 @@ exports[`Storyshots Components/Extensive/ActionTracker/ApplicationsCard Default
           />
         </div>
         <div
-          className="flex w-full items-center justify-between rounded-b-md bg-primary-200 p-3 group-hover:bg-primary-400 "
+          className="flex w-full items-center justify-between rounded-b-md bg-primary-200 p-3 group-hover:bg-primary-400 group-hover:text-white wide:p-6"
         >
           <p
-            className="text-body-500"
+            className="group-hover:text-white text-button-700"
             data-testid="txt"
           >
             View Application
@@ -247,7 +247,7 @@ exports[`Storyshots Components/Extensive/ActionTracker/ApplicationsCard Default
         title="TerraFund for AFR100: Landscapes - Expression of Interest (Enterprises)"
       >
         <div
-          className="mx-3 mb-2 mt-3"
+          className="mx-3 mb-2 mt-3 wide:mx-6 wide:mt-6 wide:mb-5"
         >
           <div
             className="mb-1 flex items-start gap-3"
@@ -270,10 +270,10 @@ exports[`Storyshots Components/Extensive/ActionTracker/ApplicationsCard Default
           />
         </div>
         <div
-          className="flex w-full items-center justify-between rounded-b-md bg-primary-200 p-3 group-hover:bg-primary-400 "
+          className="flex w-full items-center justify-between rounded-b-md bg-primary-200 p-3 group-hover:bg-primary-400 group-hover:text-white wide:p-6"
         >
           <p
-            className="text-body-500"
+            className="group-hover:text-white text-button-700"
             data-testid="txt"
           >
             View Application
@@ -299,7 +299,7 @@ exports[`Storyshots Components/Extensive/ActionTracker/ApplicationsCard Default
         title="TerraFund for AFR100: Landscapes - Expression of Interest (Enterprises)"
       >
         <div
-          className="mx-3 mb-2 mt-3"
+          className="mx-3 mb-2 mt-3 wide:mx-6 wide:mt-6 wide:mb-5"
         >
           <div
             className="mb-1 flex items-start gap-3"
@@ -322,7 +322,7 @@ exports[`Storyshots Components/Extensive/ActionTracker/ApplicationsCard Default
                 }
               />
               <p
-                className="pt-0.5 text-bold-caption-100"
+                className="text-bold-caption-100"
                 data-testid="txt"
               >
                 More info requested
@@ -340,10 +340,10 @@ exports[`Storyshots Components/Extensive/ActionTracker/ApplicationsCard Default
           />
         </div>
         <div
-          className="flex w-full items-center justify-between rounded-b-md bg-primary-200 p-3 group-hover:bg-primary-400 "
+          className="flex w-full items-center justify-between rounded-b-md bg-primary-200 p-3 group-hover:bg-primary-400 group-hover:text-white wide:p-6"
         >
           <p
-            className="text-body-500"
+            className="group-hover:text-white text-button-700"
             data-testid="txt"
           >
             View Application
@@ -369,7 +369,7 @@ exports[`Storyshots Components/Extensive/ActionTracker/ApplicationsCard Default
         title="TerraFund for AFR100: Landscapes - Expression of Interest (Enterprises)"
       >
         <div
-          className="mx-3 mb-2 mt-3"
+          className="mx-3 mb-2 mt-3 wide:mx-6 wide:mt-6 wide:mb-5"
         >
           <div
             className="mb-1 flex items-start gap-3"
@@ -392,7 +392,7 @@ exports[`Storyshots Components/Extensive/ActionTracker/ApplicationsCard Default
                 }
               />
               <p
-                className="pt-0.5 text-bold-caption-100"
+                className="text-bold-caption-100"
                 data-testid="txt"
               >
                 Awaiting approval
@@ -410,10 +410,10 @@ exports[`Storyshots Components/Extensive/ActionTracker/ApplicationsCard Default
           />
         </div>
         <div
-          className="flex w-full items-center justify-between rounded-b-md bg-primary-200 p-3 group-hover:bg-primary-400 "
+          className="flex w-full items-center justify-between rounded-b-md bg-primary-200 p-3 group-hover:bg-primary-400 group-hover:text-white wide:p-6"
         >
           <p
-            className="text-body-500"
+            className="group-hover:text-white text-button-700"
             data-testid="txt"
           >
             View Application
diff --git a/src/components/extensive/Banner/Hero/__snapshots__/HeroBanner.stories.storyshot b/src/components/extensive/Banner/Hero/__snapshots__/HeroBanner.stories.storyshot
index adf1cc60c..0e4327602 100644
--- a/src/components/extensive/Banner/Hero/__snapshots__/HeroBanner.stories.storyshot
+++ b/src/components/extensive/Banner/Hero/__snapshots__/HeroBanner.stories.storyshot
@@ -25,14 +25,14 @@ exports[`Storyshots Components/Extensive/Banner/HeroBanner Default 1`] = `
     Unlocking the funding and training opportunities needed to grow millions of trees the right way.
   </h2>
   <a
-    className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+    className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
     href="auth/signup"
     onClick={[Function]}
     onMouseEnter={[Function]}
     onTouchStart={[Function]}
   >
     <span
-      className="text-bold-caption-200 pt-0.75 leading-3"
+      className="flex items-center text-bold-caption-200"
     >
       Sign up
     </span>
diff --git a/src/components/extensive/Banner/Overview/__snapshots__/OverviewBanner.stories.storyshot b/src/components/extensive/Banner/Overview/__snapshots__/OverviewBanner.stories.storyshot
index ae5874604..1ef7b38ba 100644
--- a/src/components/extensive/Banner/Overview/__snapshots__/OverviewBanner.stories.storyshot
+++ b/src/components/extensive/Banner/Overview/__snapshots__/OverviewBanner.stories.storyshot
@@ -19,7 +19,7 @@ exports[`Storyshots Components/Extensive/Banner/OverviewBanner Default 1`] = `
         className="w-[75px] bg-tertiary flex items-center justify-center rounded-2xl py-0.5 px-3 first-letter:uppercase"
       >
         <p
-          className="text-black mt-[3px] text-bold-caption-200"
+          className="text-black flex h-fit items-center text-bold-caption-200"
           data-testid="txt"
         >
           Pitch
diff --git a/src/components/extensive/Banner/__snapshots__/BannerCard.stories.storyshot b/src/components/extensive/Banner/__snapshots__/BannerCard.stories.storyshot
index 9fcb0313f..270e00f0a 100644
--- a/src/components/extensive/Banner/__snapshots__/BannerCard.stories.storyshot
+++ b/src/components/extensive/Banner/__snapshots__/BannerCard.stories.storyshot
@@ -2,7 +2,7 @@
 
 exports[`Storyshots Components/Extensive/Banner/BannerCard Default 1`] = `
 <section
-  className="mx-auto w-full max-w-[1218px] flex justify-end"
+  className="mx-auto w-full max-w-[82vw] flex justify-end"
 >
   <div
     className="w-[420px] rounded-sm bg-white"
@@ -43,10 +43,10 @@ exports[`Storyshots Components/Extensive/Banner/BannerCard Default 1`] = `
       className="bg-neutral-150 p-4"
     >
       <button
-        className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-full justify-center"
+        className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center gap-1.5 tracking-wide w-full justify-center"
       >
         <span
-          className="text-bold-caption-200 pt-0.75 leading-3"
+          className="flex items-center text-bold-caption-200"
         >
           View Profile
         </span>
diff --git a/src/components/extensive/BuildStrongProfile/__snapshots__/BuildStrongerProfile.stories.storyshot b/src/components/extensive/BuildStrongProfile/__snapshots__/BuildStrongerProfile.stories.storyshot
index f303304f3..ba6ff9c31 100644
--- a/src/components/extensive/BuildStrongProfile/__snapshots__/BuildStrongerProfile.stories.storyshot
+++ b/src/components/extensive/BuildStrongProfile/__snapshots__/BuildStrongerProfile.stories.storyshot
@@ -17,10 +17,10 @@ exports[`Storyshots Components/Extensive/BuildStrongerProfile Neutral 150 1`] =
         Build a Stronger Pitch
       </p>
       <button
-        className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+        className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
       >
         <span
-          className="text-bold-caption-200 pt-0.75 leading-3"
+          className="flex items-center text-bold-caption-200"
         >
           Edit Profile
         </span>
@@ -99,10 +99,10 @@ exports[`Storyshots Components/Extensive/BuildStrongerProfile White 1`] = `
         Build a Stronger Pitch
       </p>
       <button
-        className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+        className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
       >
         <span
-          className="text-bold-caption-200 pt-0.75 leading-3"
+          className="flex items-center text-bold-caption-200"
         >
           Edit Profile
         </span>
diff --git a/src/components/extensive/Confirmation/__snapshots__/Confirmation.stories.storyshot b/src/components/extensive/Confirmation/__snapshots__/Confirmation.stories.storyshot
index 92d873cd3..1371137d7 100644
--- a/src/components/extensive/Confirmation/__snapshots__/Confirmation.stories.storyshot
+++ b/src/components/extensive/Confirmation/__snapshots__/Confirmation.stories.storyshot
@@ -2,7 +2,7 @@
 
 exports[`Storyshots Components/Extensive/Confirmation Default 1`] = `
 <section
-  className="min-h-[calc(100vh-74px)] w-full bg-primary-50"
+  className="min-h-[calc(100vh-74px)] w-full bg-neutral-150"
 >
   <div
     className="mx-auto my-10 w-full max-w-[800px]"
diff --git a/src/components/extensive/CookieBanner/__snapshots__/CookieBanner.stories.storyshot b/src/components/extensive/CookieBanner/__snapshots__/CookieBanner.stories.storyshot
index cade336e5..8e4617baa 100644
--- a/src/components/extensive/CookieBanner/__snapshots__/CookieBanner.stories.storyshot
+++ b/src/components/extensive/CookieBanner/__snapshots__/CookieBanner.stories.storyshot
@@ -2,7 +2,7 @@
 
 exports[`Storyshots Components/Extensive/CookieBanner Default 1`] = `
 <div
-  className="sticky bottom-0 right-0 left-0 z-50 flex w-full flex-col items-center justify-center gap-4 bg-black py-4 px-8 md:flex-row"
+  className="flex w-full flex-col items-center justify-center gap-4 bg-black px-8 py-4 md:flex-row"
 >
   <p
     className="u-text-center u-font-gold u-text-decoration-none text-white text-heading-200 with-inner-html"
@@ -14,11 +14,11 @@ exports[`Storyshots Components/Extensive/CookieBanner Default 1`] = `
     data-testid="txt"
   />
   <button
-    className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+    className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
     onClick={[Function]}
   >
     <span
-      className="text-bold-caption-200 pt-0.75 leading-3"
+      className="flex items-center text-bold-caption-200"
     >
       Ok
     </span>
diff --git a/src/components/extensive/Icon/__snapshots__/IconSocial.stories.storyshot b/src/components/extensive/Icon/__snapshots__/IconSocial.stories.storyshot
index 5dc6b15d0..0f4719f10 100644
--- a/src/components/extensive/Icon/__snapshots__/IconSocial.stories.storyshot
+++ b/src/components/extensive/Icon/__snapshots__/IconSocial.stories.storyshot
@@ -10,13 +10,13 @@ exports[`Storyshots Components/Extensive/IconSocial Facebook 1`] = `
   target="_blank"
 >
   <div
-    className="flex h-8 w-8 items-center justify-center rounded-full border border-white bg-black"
+    className="flex h-9 w-9 items-center justify-center rounded-full border border-white bg-[#002633]"
   >
     <div
       style={
         Object {
           "height": undefined,
-          "width": 18,
+          "width": 17,
         }
       }
     />
@@ -34,13 +34,13 @@ exports[`Storyshots Components/Extensive/IconSocial Instagram 1`] = `
   target="_blank"
 >
   <div
-    className="flex h-8 w-8 items-center justify-center rounded-full border border-white bg-black"
+    className="flex h-9 w-9 items-center justify-center rounded-full border border-white bg-[#002633]"
   >
     <div
       style={
         Object {
           "height": undefined,
-          "width": 18,
+          "width": 17,
         }
       }
     />
@@ -58,13 +58,13 @@ exports[`Storyshots Components/Extensive/IconSocial Linkedin 1`] = `
   target="_blank"
 >
   <div
-    className="flex h-8 w-8 items-center justify-center rounded-full border border-white bg-black"
+    className="flex h-9 w-9 items-center justify-center rounded-full border border-white bg-[#002633]"
   >
     <div
       style={
         Object {
           "height": undefined,
-          "width": 18,
+          "width": 17,
         }
       }
     />
@@ -82,13 +82,13 @@ exports[`Storyshots Components/Extensive/IconSocial Twitter 1`] = `
   target="_blank"
 >
   <div
-    className="flex h-8 w-8 items-center justify-center rounded-full border border-white bg-black"
+    className="flex h-9 w-9 items-center justify-center rounded-full border border-white bg-[#002633]"
   >
     <div
       style={
         Object {
           "height": undefined,
-          "width": 18,
+          "width": 17,
         }
       }
     />
@@ -106,13 +106,13 @@ exports[`Storyshots Components/Extensive/IconSocial Website 1`] = `
   target="_blank"
 >
   <div
-    className="flex h-8 w-8 items-center justify-center rounded-full border border-white bg-black"
+    className="flex h-9 w-9 items-center justify-center rounded-full border border-white bg-[#002633]"
   >
     <div
       style={
         Object {
           "height": undefined,
-          "width": 18,
+          "width": 17,
         }
       }
     />
diff --git a/src/components/extensive/Modal/ModalContent/MockedData.ts b/src/components/extensive/Modal/ModalContent/MockedData.ts
index 2e0388080..4b5f68277 100644
--- a/src/components/extensive/Modal/ModalContent/MockedData.ts
+++ b/src/components/extensive/Modal/ModalContent/MockedData.ts
@@ -108,7 +108,7 @@ export const comentariesItems = [
     date: "Oct 6, 2022 at 1:12 AM",
     comentary: `Don't see the outline. the source code also needs to be updated.re: aligned to one source. we need to make sure whether this is appropriate. consider that we have the organization in sign-up/profile, mask, and work request boards. On Thursday will provide the the source tables requested`,
     files: comentaryFiles,
-    status: "Submitted"
+    status: "submitted"
   },
   {
     id: "2",
@@ -117,6 +117,6 @@ export const comentariesItems = [
     date: "Oct 5, 2022 at 11:51 PM",
     comentary: `The zoom to areas table sources the main mapvi
         ew drop down list which only has for example, "Adams County" and not "Unincorporated Adams County". Do we want both options? @ricardosaavedra2    what is the source table of the mask layers? and also what is the source layer for work request drop down? Earlier this week when I was trying to add highlands ranch geom you said 'jurisdictions'. I added it but still don't see the outline. All this should be aligned to one source with data restructure I added it but still don't see the outline. All this should be aligned to one source with data restructure I added it but still don't see the outline. All this should be aligned to one source with data restructure`,
-    status: "Draft"
+    status: "draft"
   }
 ];
diff --git a/src/components/extensive/Modal/__snapshots__/FormModal.stories.storyshot b/src/components/extensive/Modal/__snapshots__/FormModal.stories.storyshot
index 618aeb004..b022c1209 100644
--- a/src/components/extensive/Modal/__snapshots__/FormModal.stories.storyshot
+++ b/src/components/extensive/Modal/__snapshots__/FormModal.stories.storyshot
@@ -35,11 +35,11 @@ exports[`Storyshots Components/Extensive/Modal/FormModal Default 1`] = `
       onSubmit={[Function]}
     >
       <button
-        className="m-auto mt-15 bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+        className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content m-auto mt-15"
         type="submit"
       >
         <span
-          className="text-bold-caption-200 pt-0.75 leading-3"
+          className="flex items-center text-bold-caption-200"
         >
           Save
         </span>
diff --git a/src/components/extensive/Modal/__snapshots__/Modal.stories.storyshot b/src/components/extensive/Modal/__snapshots__/Modal.stories.storyshot
index b020e2a42..d363bc3c5 100644
--- a/src/components/extensive/Modal/__snapshots__/Modal.stories.storyshot
+++ b/src/components/extensive/Modal/__snapshots__/Modal.stories.storyshot
@@ -35,21 +35,21 @@ exports[`Storyshots Components/Extensive/Modal Default 1`] = `
       className="mt-15 flex w-full gap-3 justify-between"
     >
       <button
-        className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-1.75 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+        className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-[10.5px] rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
         onClick={[Function]}
       >
         <span
-          className="text-bold-caption-200 pt-0.75 leading-3"
+          className="flex items-center text-bold-caption-200"
         >
           Cancel
         </span>
       </button>
       <button
-        className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+        className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
         onClick={[Function]}
       >
         <span
-          className="text-bold-caption-200 pt-0.75 leading-3"
+          className="flex items-center text-bold-caption-200"
         >
           Close and continue later
         </span>
diff --git a/src/components/extensive/PageElements/Body/__snapshots__/PageBody.stories.storyshot b/src/components/extensive/PageElements/Body/__snapshots__/PageBody.stories.storyshot
index 61fce7194..a9970966e 100644
--- a/src/components/extensive/PageElements/Body/__snapshots__/PageBody.stories.storyshot
+++ b/src/components/extensive/PageElements/Body/__snapshots__/PageBody.stories.storyshot
@@ -2,19 +2,19 @@
 
 exports[`Storyshots Components/Extensive/Page/Body Default 1`] = `
 <div
-  className="min-h-[calc(100vh-70px)] w-full space-y-15 bg-neutral-50 p-10 pb-30 xl:p-15"
+  className="min-h-[calc(100vh-70px)] w-full space-y-15 bg-neutral-50 pt-10"
 >
   <div
     className="min-w-[500px] flex-1 space-y-8"
   >
     <div
-      className="w-full rounded-xl bg-white p-8 shadow"
+      className="w-full rounded-xl border border-neutral-200 bg-white p-8"
     >
       <div
         className="flex flex-wrap justify-between"
       >
         <p
-          className="flex-1 text-bold-headline-1000"
+          className="flex flex-1 items-baseline text-darkCustom text-24-bold"
           data-testid="txt"
         >
           card title
@@ -26,13 +26,13 @@ exports[`Storyshots Components/Extensive/Page/Body Default 1`] = `
     className="min-w-[500px] flex-1 space-y-8"
   >
     <div
-      className="w-full rounded-xl bg-white p-8 shadow"
+      className="w-full rounded-xl border border-neutral-200 bg-white p-8"
     >
       <div
         className="flex flex-wrap justify-between"
       >
         <p
-          className="flex-1 text-bold-headline-1000"
+          className="flex flex-1 items-baseline text-darkCustom text-24-bold"
           data-testid="txt"
         >
           card title
diff --git a/src/components/extensive/PageElements/Breadcrumbs/__snapshots__/PageBreadcrumbs.stories.storyshot b/src/components/extensive/PageElements/Breadcrumbs/__snapshots__/PageBreadcrumbs.stories.storyshot
index 577ae8b06..c831d0098 100644
--- a/src/components/extensive/PageElements/Breadcrumbs/__snapshots__/PageBreadcrumbs.stories.storyshot
+++ b/src/components/extensive/PageElements/Breadcrumbs/__snapshots__/PageBreadcrumbs.stories.storyshot
@@ -8,7 +8,7 @@ exports[`Storyshots Components/Extensive/Page/Breadcrumbs Default 1`] = `
     className="flex h-12 items-center bg-primary-100 p-4 px-10 xl:px-0"
   >
     <div
-      className="mx-auto w-full max-w-7xl flex items-center gap-3"
+      className="mx-auto w-full max-w-[82vw] flex items-center gap-3"
     >
       <a
         href="#"
@@ -17,7 +17,7 @@ exports[`Storyshots Components/Extensive/Page/Breadcrumbs Default 1`] = `
         onTouchStart={[Function]}
       >
         <p
-          className="text-neutral-800 hover:underline line-clamp-1 text-bold-body-300"
+          className="text-darkCustom opacity-60 hover:underline line-clamp-1 text-14-bold"
           data-testid="txt"
           title="My Projects"
         >
@@ -39,7 +39,7 @@ exports[`Storyshots Components/Extensive/Page/Breadcrumbs Default 1`] = `
         onTouchStart={[Function]}
       >
         <p
-          className="text-neutral-800 hover:underline line-clamp-1 text-bold-body-300"
+          className="text-darkCustom opacity-60 hover:underline line-clamp-1 text-14-bold"
           data-testid="txt"
           title="India Tree restoration project"
         >
@@ -61,7 +61,7 @@ exports[`Storyshots Components/Extensive/Page/Breadcrumbs Default 1`] = `
         onTouchStart={[Function]}
       >
         <p
-          className="text-neutral-800 hover:underline line-clamp-1 text-bold-body-300"
+          className="text-darkCustom opacity-60 hover:underline line-clamp-1 text-14-bold"
           data-testid="txt"
           title="Taj Mahal"
         >
diff --git a/src/components/extensive/PageElements/Card/__snapshots__/PageCard.stories.storyshot b/src/components/extensive/PageElements/Card/__snapshots__/PageCard.stories.storyshot
index 5682e78b7..f7885858b 100644
--- a/src/components/extensive/PageElements/Card/__snapshots__/PageCard.stories.storyshot
+++ b/src/components/extensive/PageElements/Card/__snapshots__/PageCard.stories.storyshot
@@ -5,20 +5,20 @@ exports[`Storyshots Components/Extensive/Page/Card Default 1`] = `
   className="h-[500px]"
 >
   <div
-    className="w-full rounded-xl bg-white p-8 shadow"
+    className="w-full rounded-xl border border-neutral-200 bg-white p-8"
   >
     <div
       className="flex flex-wrap justify-between"
     >
       <p
-        className="flex-1 text-bold-headline-1000"
+        className="flex flex-1 items-baseline text-darkCustom text-24-bold"
         data-testid="txt"
       >
         Card title
       </p>
     </div>
     <p
-      className="mt-3 text-light-subtitle-400"
+      className="mt-3 text-darkCustom text-light-subtitle-400"
       data-testid="txt"
     >
       Card subtitle
diff --git a/src/components/extensive/PageElements/Column/__snapshots__/PageColumn.stories.storyshot b/src/components/extensive/PageElements/Column/__snapshots__/PageColumn.stories.storyshot
index 6c79575bb..88c1df76d 100644
--- a/src/components/extensive/PageElements/Column/__snapshots__/PageColumn.stories.storyshot
+++ b/src/components/extensive/PageElements/Column/__snapshots__/PageColumn.stories.storyshot
@@ -5,13 +5,13 @@ exports[`Storyshots Components/Extensive/Page/Column Default 1`] = `
   className="min-w-[500px] flex-1 space-y-8"
 >
   <div
-    className="w-full rounded-xl bg-white p-8 shadow"
+    className="w-full rounded-xl border border-neutral-200 bg-white p-8"
   >
     <div
       className="flex flex-wrap justify-between"
     >
       <p
-        className="flex-1 text-bold-headline-1000"
+        className="flex flex-1 items-baseline text-darkCustom text-24-bold"
         data-testid="txt"
       >
         card title
@@ -19,13 +19,13 @@ exports[`Storyshots Components/Extensive/Page/Column Default 1`] = `
     </div>
   </div>
   <div
-    className="w-full rounded-xl bg-white p-8 shadow"
+    className="w-full rounded-xl border border-neutral-200 bg-white p-8"
   >
     <div
       className="flex flex-wrap justify-between"
     >
       <p
-        className="flex-1 text-bold-headline-1000"
+        className="flex flex-1 items-baseline text-darkCustom text-24-bold"
         data-testid="txt"
       >
         card title
@@ -33,13 +33,13 @@ exports[`Storyshots Components/Extensive/Page/Column Default 1`] = `
     </div>
   </div>
   <div
-    className="w-full rounded-xl bg-white p-8 shadow"
+    className="w-full rounded-xl border border-neutral-200 bg-white p-8"
   >
     <div
       className="flex flex-wrap justify-between"
     >
       <p
-        className="flex-1 text-bold-headline-1000"
+        className="flex flex-1 items-baseline text-darkCustom text-24-bold"
         data-testid="txt"
       >
         card title
diff --git a/src/components/extensive/PageElements/Header/__snapshots__/PageHeader.stories.storyshot b/src/components/extensive/PageElements/Header/__snapshots__/PageHeader.stories.storyshot
index c11fc5ec3..7cb4bd95e 100644
--- a/src/components/extensive/PageElements/Header/__snapshots__/PageHeader.stories.storyshot
+++ b/src/components/extensive/PageElements/Header/__snapshots__/PageHeader.stories.storyshot
@@ -8,10 +8,10 @@ exports[`Storyshots Components/Extensive/Page/Header Default 1`] = `
     className="flex w-full flex-col bg-treesHeaderWithOverlay bg-cover bg-no-repeat min-h-[230px]"
   >
     <div
-      className="m-auto flex h-full w-full max-w-7xl flex-1 flex-col items-start justify-between gap-10 p-10 text-white xl:px-0"
+      className="m-auto flex h-full w-full max-w-[82vw] flex-1 flex-col items-start justify-between gap-10 p-10 text-white xl:px-0"
     >
       <a
-        className="gap-2 px-0 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+        className="flex items-center justify-center tracking-wide w-fit-content gap-2 px-0"
         href="/home"
         onClick={[Function]}
         onMouseEnter={[Function]}
@@ -26,7 +26,7 @@ exports[`Storyshots Components/Extensive/Page/Header Default 1`] = `
           }
         />
         <span
-          className="text-bold-body-300"
+          className="text-12-bold"
         >
           Back to Home
         </span>
diff --git a/src/components/extensive/PageElements/Row/__snapshots__/PageRow.stories.storyshot b/src/components/extensive/PageElements/Row/__snapshots__/PageRow.stories.storyshot
index 4bdd937b2..7feab45e2 100644
--- a/src/components/extensive/PageElements/Row/__snapshots__/PageRow.stories.storyshot
+++ b/src/components/extensive/PageElements/Row/__snapshots__/PageRow.stories.storyshot
@@ -2,19 +2,19 @@
 
 exports[`Storyshots Components/Extensive/Page/Row Default 1`] = `
 <div
-  className="mx-auto flex max-w-7xl flex-wrap gap-8"
+  className="mx-auto flex max-w-[82vw] flex-wrap gap-8"
 >
   <div
     className="min-w-[500px] flex-1 space-y-8"
   >
     <div
-      className="w-full rounded-xl bg-white p-8 shadow"
+      className="w-full rounded-xl border border-neutral-200 bg-white p-8"
     >
       <div
         className="flex flex-wrap justify-between"
       >
         <p
-          className="flex-1 text-bold-headline-1000"
+          className="flex flex-1 items-baseline text-darkCustom text-24-bold"
           data-testid="txt"
         >
           card title
@@ -26,13 +26,13 @@ exports[`Storyshots Components/Extensive/Page/Row Default 1`] = `
     className="min-w-[500px] flex-1 space-y-8"
   >
     <div
-      className="w-full rounded-xl bg-white p-8 shadow"
+      className="w-full rounded-xl border border-neutral-200 bg-white p-8"
     >
       <div
         className="flex flex-wrap justify-between"
       >
         <p
-          className="flex-1 text-bold-headline-1000"
+          className="flex flex-1 items-baseline text-darkCustom text-24-bold"
           data-testid="txt"
         >
           card title
diff --git a/src/components/extensive/Pagination/__snapshots__/PerPageSelector.stories.storyshot b/src/components/extensive/Pagination/__snapshots__/PerPageSelector.stories.storyshot
index efcc498c7..ab868cb7c 100644
--- a/src/components/extensive/Pagination/__snapshots__/PerPageSelector.stories.storyshot
+++ b/src/components/extensive/Pagination/__snapshots__/PerPageSelector.stories.storyshot
@@ -14,11 +14,11 @@ exports[`Storyshots Components/Elements/Table/PerPageSelector Default 1`] = `
       <div
         aria-expanded={false}
         aria-haspopup="listbox"
-        aria-labelledby="headlessui-listbox-label-:r2s: headlessui-listbox-button-:r2r:"
+        aria-labelledby="headlessui-listbox-label-:r3n: headlessui-listbox-button-:r3m:"
         className="flex h-10 w-20 items-center justify-center rounded-md shadow"
         data-headlessui-state=""
         disabled={false}
-        id="headlessui-listbox-button-:r2r:"
+        id="headlessui-listbox-button-:r3m:"
         onClick={[Function]}
         onKeyDown={[Function]}
         onKeyUp={[Function]}
@@ -34,7 +34,7 @@ exports[`Storyshots Components/Elements/Table/PerPageSelector Default 1`] = `
           </p>
         </div>
         <div
-          className="flex h-full flex-1 items-center justify-center rounded-r-lg bg-primary-200"
+          className="flex h-full flex-1 items-center justify-center rounded-r-lg bg-[#CFE6F4]"
         >
           <div
             style={
@@ -50,7 +50,7 @@ exports[`Storyshots Components/Elements/Table/PerPageSelector Default 1`] = `
         className="text-bold-subtitle-500"
         data-headlessui-state=""
         data-testid="txt"
-        id="headlessui-listbox-label-:r2s:"
+        id="headlessui-listbox-label-:r3n:"
         onClick={[Function]}
       />
     </div>
diff --git a/src/components/extensive/PasswordStrength/__snapshots__/PasswordStrength.stories.storyshot b/src/components/extensive/PasswordStrength/__snapshots__/PasswordStrength.stories.storyshot
index d6ea98dd9..fe945d529 100644
--- a/src/components/extensive/PasswordStrength/__snapshots__/PasswordStrength.stories.storyshot
+++ b/src/components/extensive/PasswordStrength/__snapshots__/PasswordStrength.stories.storyshot
@@ -1,103 +1,113 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Components/Extensive/PasswordStrength Default 1`] = `
-<div>
-  <p
-    className="text-bold-body-300"
-    data-testid="txt"
+<div
+  className="flex flex-col gap-2"
+>
+  <div
+    className="flex items-center gap-1"
   >
-    Password Strength: Very Weak
-  </p>
+    <p
+      className="text-14-light"
+      data-testid="txt"
+    >
+      Password Strength:
+    </p>
+    <p
+      className="text-red-300 text-14-bold"
+      data-testid="txt"
+    >
+      Very Weak
+    </p>
+  </div>
   <div
-    className="h-[9px] w-full bg-neutral-200 my-2"
-    role="progressbar"
+    className="w-2/3 rounded-lg bg-grey-500"
   >
     <div
-      className="h-full bg-error transition-all duration-300"
-      style={
-        Object {
-          "width": "0%",
+      className="h-[9px] w-full rounded-full bg-neutral-200 "
+      role="progressbar"
+    >
+      <div
+        className="h-full bg-error rounded-full transition-all duration-300"
+        style={
+          Object {
+            "width": "0%",
+          }
         }
-      }
-    />
+      />
+    </div>
   </div>
   <div>
-    <p
-      className="text-light-body-300"
-      data-testid="txt"
-    >
-      Password must:
-    </p>
     <ul
-      className="mt-2 ml-0"
+      className="flex flex-col gap-2"
     >
       <li
-        className="mt-2 flex gap-4"
+        className="flex items-center gap-1"
       >
         <div
           style={
             Object {
-              "height": undefined,
-              "width": 16,
+              "height": 0,
+              "width": 0,
             }
           }
         />
         <p
-          className="text-body-600"
+          className="text-14-light"
           data-testid="txt"
         >
           Use a minimum of 8 characters
         </p>
       </li>
       <li
-        className="mt-2 flex gap-4"
+        className="flex items-center gap-1"
       >
         <div
           style={
             Object {
-              "height": undefined,
-              "width": 16,
+              "height": 0,
+              "width": 0,
             }
           }
         />
         <p
-          className="text-body-600"
+          className="text-14-light"
           data-testid="txt"
         >
           Use an uppercase letter
         </p>
       </li>
       <li
-        className="mt-2 flex gap-4"
+        className="flex items-center gap-1"
       >
         <div
           style={
             Object {
-              "height": undefined,
-              "width": 16,
+              "height": 0,
+              "width": 0,
             }
           }
         />
         <p
-          className="text-body-600"
+          className="text-14-light"
           data-testid="txt"
         >
           Use a lowercase letter
         </p>
       </li>
       <li
-        className="mt-2 flex gap-4"
+        className="flex items-center gap-1"
       >
         <div
           style={
             Object {
-              "height": undefined,
-              "width": 16,
+              "height": 0,
+              "width": 0,
             }
           }
         />
         <p
-          className="text-body-600"
+          className="text-14-light"
           data-testid="txt"
         >
           Use a number
diff --git a/src/components/extensive/TaskList/__snapshots__/TaskList.stories.storyshot b/src/components/extensive/TaskList/__snapshots__/TaskList.stories.storyshot
index 517765a1a..3f1d20ef1 100644
--- a/src/components/extensive/TaskList/__snapshots__/TaskList.stories.storyshot
+++ b/src/components/extensive/TaskList/__snapshots__/TaskList.stories.storyshot
@@ -2,29 +2,32 @@
 
 exports[`Storyshots Components/Extensive/TaskList Default 1`] = `
 <div
-  className="w-full overflow-hidden rounded-xl shadow"
+  className="w-[82vw] max-w-[82vw] overflow-hidden"
 >
   <div
     className="bg-white p-8"
   >
     <p
-      className="mb-2 text-bold-headline-800"
+      className="text-center text-36-bold with-inner-html"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "Get Ready for Funding Opportunities",
+        }
+      }
       data-testid="txt"
-    >
-      Get Ready for Funding Opportunities
-    </p>
+    />
     <p
-      className="text-light-subtitle-400"
+      className="mt-2 text-center text-16"
       data-testid="txt"
     >
       Keep your information updated to have more chances of having a successful application.
     </p>
   </div>
   <div
-    className="flex flex-col gap-8 bg-taskList bg-cover bg-no-repeat p-8 pb-10"
+    className="flex flex-col gap-8 bg-no-repeat pt-8 pb-10"
   >
     <div
-      className="flex items-center justify-between gap-6 rounded-xl border py-6 px-5 shadow  border-neutral-200 bg-white"
+      className="flex items-center justify-between gap-6 rounded-xl border py-6 px-12  border-neutral-200 bg-white"
     >
       <div
         className="flex min-w-0 items-center gap-4"
@@ -45,7 +48,7 @@ exports[`Storyshots Components/Extensive/TaskList Default 1`] = `
             Organizational Information
           </p>
           <p
-            className="text-light-body-300 with-inner-html"
+            className="text-body-400 with-inner-html"
             dangerouslySetInnerHTML={
               Object {
                 "__html": "Keep your profile updated to have more chances of having a successful application. ",
@@ -55,19 +58,23 @@ exports[`Storyshots Components/Extensive/TaskList Default 1`] = `
           />
         </div>
       </div>
-      <a
-        className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-1.75 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
-        href="/"
+      <div
+        className="w-[148px]"
       >
-        <span
-          className="text-bold-caption-200 pt-0.75 leading-3"
+        <a
+          className="h-fit py-4 bg-primary-200 rounded-lg flex items-center justify-center gap-1.5 tracking-wide w-fit-content w-full flex-1"
+          href="/"
         >
-          View
-        </span>
-      </a>
+          <span
+            className="flex items-center font-inter font-bold text-16 leading-snug tracking-tighter uppercase text-primary"
+          >
+            View
+          </span>
+        </a>
+      </div>
     </div>
     <div
-      className="flex items-center justify-between gap-6 rounded-xl border py-6 px-5 shadow  border-neutral-200 bg-white"
+      className="flex items-center justify-between gap-6 rounded-xl border py-6 px-12  border-neutral-200 bg-white"
     >
       <div
         className="flex min-w-0 items-center gap-4"
@@ -88,7 +95,7 @@ exports[`Storyshots Components/Extensive/TaskList Default 1`] = `
             Pitches
           </p>
           <p
-            className="text-light-body-300 with-inner-html"
+            className="text-body-400 with-inner-html"
             dangerouslySetInnerHTML={
               Object {
                 "__html": "Start a pitch or edit your pitches to apply for funding opportunities. To go to create a pitch, manage your pitches/funding applications, tap on \\"view\\".",
@@ -98,16 +105,20 @@ exports[`Storyshots Components/Extensive/TaskList Default 1`] = `
           />
         </div>
       </div>
-      <a
-        className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-1.75 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
-        href="/"
+      <div
+        className="w-[148px]"
       >
-        <span
-          className="text-bold-caption-200 pt-0.75 leading-3"
+        <a
+          className="h-fit py-4 bg-primary-200 rounded-lg flex items-center justify-center gap-1.5 tracking-wide w-fit-content w-full flex-1"
+          href="/"
         >
-          View
-        </span>
-      </a>
+          <span
+            className="flex items-center font-inter font-bold text-16 leading-snug tracking-tighter uppercase text-primary"
+          >
+            View
+          </span>
+        </a>
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/components/extensive/TextRow/__snapshots__/TextRow.stories.storyshot b/src/components/extensive/TextRow/__snapshots__/TextRow.stories.storyshot
index 34071c220..854aafe7c 100644
--- a/src/components/extensive/TextRow/__snapshots__/TextRow.stories.storyshot
+++ b/src/components/extensive/TextRow/__snapshots__/TextRow.stories.storyshot
@@ -5,13 +5,13 @@ exports[`Storyshots Components/Extensive/TextRow Default 1`] = `
   className="flex gap-2"
 >
   <p
-    className="text-body-500"
+    className="text-body-900"
     data-testid="txt"
   >
     Address
   </p>
   <p
-    className="flex-1 text-body-300"
+    className="flex-1 text-body-800"
     data-testid="txt"
   >
     Lonsdale Road 34, London
diff --git a/src/components/extensive/WizardForm/__snapshots__/WizardForm.stories.storyshot b/src/components/extensive/WizardForm/__snapshots__/WizardForm.stories.storyshot
index 35cca809c..c17cf05be 100644
--- a/src/components/extensive/WizardForm/__snapshots__/WizardForm.stories.storyshot
+++ b/src/components/extensive/WizardForm/__snapshots__/WizardForm.stories.storyshot
@@ -6,33 +6,37 @@ exports[`Storyshots Components/Extensive/Form/Wizard Create Form 1`] = `
 >
   <div>
     <div
-      className="sticky top-[74px] z-40 flex border-primary-50 bg-leavesWithOverlay bg-cover bg-center p-6"
+      className="sticky top-[74px] z-40 flex border-neutral-150 bg-treesHeaderWithOverlay bg-cover bg-no-repeat px-10 py-3 md:py-8"
     >
       <div
-        className="mx-auto flex w-full min-w-0 max-w-7xl items-center gap-8"
+        className="mx-auto flex w-full min-w-0 max-w-[82vw] items-center gap-8"
       >
         <div
           className="min-w-0 flex-grow text-white"
         >
-          <p
-            className="overflow-hidden text-ellipsis whitespace-nowrap text-bold-body-300"
-            data-testid="txt"
-          >
-            Progress: 1/8 steps complete
-          </p>
-          <p
-            className="text-bold-caption-200"
-            data-testid="txt"
+          <div
+            className="flex"
           >
-            Unsaved
-          </p>
+            <p
+              className="overflow-hidden text-ellipsis whitespace-nowrap text-14-light"
+              data-testid="txt"
+            >
+              Progress: 1/8 steps complete
+            </p>
+            <p
+              className="text-14-light"
+              data-testid="txt"
+            >
+              Unsaved
+            </p>
+          </div>
         </div>
         <button
-          className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+          className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-[10.5px] rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
           onClick={[Function]}
         >
           <span
-            className="text-bold-caption-200 pt-0.75 leading-3"
+            className="flex items-center text-bold-caption-200"
           >
             Close and continue later
           </span>
@@ -40,10 +44,10 @@ exports[`Storyshots Components/Extensive/Form/Wizard Create Form 1`] = `
       </div>
     </div>
     <div
-      className="mx-auto mt-0 max-w-7xl px-6 py-10 xl:px-0"
+      className="mx-auto mt-0 max-w-[82vw] px-6 py-10 xl:px-0"
     >
       <div
-        className="flex h-full w-full"
+        className="flex h-full w-full shadow"
       >
         <div
           aria-orientation="vertical"
@@ -53,10 +57,10 @@ exports[`Storyshots Components/Extensive/Form/Wizard Create Form 1`] = `
           <button
             aria-checked="false"
             aria-selected="false"
-            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
+            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
             data-headlessui-state=""
             disabled={false}
-            id="headlessui-tabs-tab-:r2t:"
+            id="headlessui-tabs-tab-:r3o:"
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseDown={[Function]}
@@ -64,10 +68,10 @@ exports[`Storyshots Components/Extensive/Form/Wizard Create Form 1`] = `
             tabIndex={-1}
           >
             <p
-              className="w-full text-left line-clamp-2 md:pr-6 text-bold-caption-200 with-inner-html"
+              className="w-full text-left line-clamp-2 md:pr-6 text-14-bold with-inner-html"
               dangerouslySetInnerHTML={
                 Object {
-                  "__html": "Step 1<br/> Simple Inputs",
+                  "__html": "Step 1<br/> <p className=\\"text-14-light\\">Simple Inputs </p>",
                 }
               }
               data-testid="txt"
@@ -76,10 +80,10 @@ exports[`Storyshots Components/Extensive/Form/Wizard Create Form 1`] = `
           <button
             aria-checked="false"
             aria-selected="false"
-            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
+            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
             data-headlessui-state=""
             disabled={false}
-            id="headlessui-tabs-tab-:r2u:"
+            id="headlessui-tabs-tab-:r3p:"
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseDown={[Function]}
@@ -87,10 +91,10 @@ exports[`Storyshots Components/Extensive/Form/Wizard Create Form 1`] = `
             tabIndex={-1}
           >
             <p
-              className="w-full text-left line-clamp-2 md:pr-6 text-bold-caption-200 with-inner-html"
+              className="w-full text-left line-clamp-2 md:pr-6 text-14-bold with-inner-html"
               dangerouslySetInnerHTML={
                 Object {
-                  "__html": "Step 2<br/> Dropdown Inputs",
+                  "__html": "Step 2<br/> <p className=\\"text-14-light\\">Dropdown Inputs </p>",
                 }
               }
               data-testid="txt"
@@ -99,10 +103,10 @@ exports[`Storyshots Components/Extensive/Form/Wizard Create Form 1`] = `
           <button
             aria-checked="false"
             aria-selected="true"
-            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border border-b border-neutral-100 border-r-white bg-white text-neutral-1000 peer-aria-checked:shadow-t-secondary"
+            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border-b border-neutral-100 border-r-white bg-white text-neutral-1000 peer-aria-checked:shadow-t-secondary"
             data-headlessui-state="selected"
             disabled={false}
-            id="headlessui-tabs-tab-:r2v:"
+            id="headlessui-tabs-tab-:r3q:"
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseDown={[Function]}
@@ -110,10 +114,10 @@ exports[`Storyshots Components/Extensive/Form/Wizard Create Form 1`] = `
             tabIndex={0}
           >
             <p
-              className="w-full text-left line-clamp-2 md:pr-6 text-bold-caption-200 with-inner-html"
+              className="w-full text-left line-clamp-2 md:pr-6 text-14-bold with-inner-html"
               dangerouslySetInnerHTML={
                 Object {
-                  "__html": "Step 3<br/> Select Inputs",
+                  "__html": "Step 3<br/> <p className=\\"text-14-light\\">Select Inputs </p>",
                 }
               }
               data-testid="txt"
@@ -122,10 +126,10 @@ exports[`Storyshots Components/Extensive/Form/Wizard Create Form 1`] = `
           <button
             aria-checked="false"
             aria-selected="false"
-            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
+            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
             data-headlessui-state=""
             disabled={false}
-            id="headlessui-tabs-tab-:r30:"
+            id="headlessui-tabs-tab-:r3r:"
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseDown={[Function]}
@@ -133,10 +137,10 @@ exports[`Storyshots Components/Extensive/Form/Wizard Create Form 1`] = `
             tabIndex={-1}
           >
             <p
-              className="w-full text-left line-clamp-2 md:pr-6 text-bold-caption-200 with-inner-html"
+              className="w-full text-left line-clamp-2 md:pr-6 text-14-bold with-inner-html"
               dangerouslySetInnerHTML={
                 Object {
-                  "__html": "Step 4<br/> File Uploader",
+                  "__html": "Step 4<br/> <p className=\\"text-14-light\\">File Uploader </p>",
                 }
               }
               data-testid="txt"
@@ -145,10 +149,10 @@ exports[`Storyshots Components/Extensive/Form/Wizard Create Form 1`] = `
           <button
             aria-checked="false"
             aria-selected="false"
-            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
+            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
             data-headlessui-state=""
             disabled={false}
-            id="headlessui-tabs-tab-:r31:"
+            id="headlessui-tabs-tab-:r3s:"
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseDown={[Function]}
@@ -156,10 +160,10 @@ exports[`Storyshots Components/Extensive/Form/Wizard Create Form 1`] = `
             tabIndex={-1}
           >
             <p
-              className="w-full text-left line-clamp-2 md:pr-6 text-bold-caption-200 with-inner-html"
+              className="w-full text-left line-clamp-2 md:pr-6 text-14-bold with-inner-html"
               dangerouslySetInnerHTML={
                 Object {
-                  "__html": "Step 5<br/> Tree species input",
+                  "__html": "Step 5<br/> <p className=\\"text-14-light\\">Tree species input </p>",
                 }
               }
               data-testid="txt"
@@ -168,10 +172,10 @@ exports[`Storyshots Components/Extensive/Form/Wizard Create Form 1`] = `
           <button
             aria-checked="false"
             aria-selected="false"
-            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
+            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
             data-headlessui-state=""
             disabled={false}
-            id="headlessui-tabs-tab-:r32:"
+            id="headlessui-tabs-tab-:r3t:"
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseDown={[Function]}
@@ -179,10 +183,10 @@ exports[`Storyshots Components/Extensive/Form/Wizard Create Form 1`] = `
             tabIndex={-1}
           >
             <p
-              className="w-full text-left line-clamp-2 md:pr-6 text-bold-caption-200 with-inner-html"
+              className="w-full text-left line-clamp-2 md:pr-6 text-14-bold with-inner-html"
               dangerouslySetInnerHTML={
                 Object {
-                  "__html": "Step 6<br/> Funding Sources",
+                  "__html": "Step 6<br/> <p className=\\"text-14-light\\">Funding Sources </p>",
                 }
               }
               data-testid="txt"
@@ -191,10 +195,10 @@ exports[`Storyshots Components/Extensive/Form/Wizard Create Form 1`] = `
           <button
             aria-checked="false"
             aria-selected="false"
-            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
+            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
             data-headlessui-state=""
             disabled={false}
-            id="headlessui-tabs-tab-:r33:"
+            id="headlessui-tabs-tab-:r3u:"
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseDown={[Function]}
@@ -202,10 +206,10 @@ exports[`Storyshots Components/Extensive/Form/Wizard Create Form 1`] = `
             tabIndex={-1}
           >
             <p
-              className="w-full text-left line-clamp-2 md:pr-6 text-bold-caption-200 with-inner-html"
+              className="w-full text-left line-clamp-2 md:pr-6 text-14-bold with-inner-html"
               dangerouslySetInnerHTML={
                 Object {
-                  "__html": "Step 7<br/> Info of proposed projects",
+                  "__html": "Step 7<br/> <p className=\\"text-14-light\\">Info of proposed projects </p>",
                 }
               }
               data-testid="txt"
@@ -214,10 +218,10 @@ exports[`Storyshots Components/Extensive/Form/Wizard Create Form 1`] = `
           <button
             aria-checked="false"
             aria-selected="false"
-            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border border-b border-neutral-100 bg-neutral-300 text-neutral-900"
+            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border-b border-neutral-100 bg-neutral-300 text-neutral-900"
             data-headlessui-state=""
             disabled={false}
-            id="headlessui-tabs-tab-:r34:"
+            id="headlessui-tabs-tab-:r3v:"
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseDown={[Function]}
@@ -225,10 +229,10 @@ exports[`Storyshots Components/Extensive/Form/Wizard Create Form 1`] = `
             tabIndex={-1}
           >
             <p
-              className="w-full text-left line-clamp-2 md:pr-6 text-bold-caption-200 with-inner-html"
+              className="w-full text-left line-clamp-2 md:pr-6 text-14-bold with-inner-html"
               dangerouslySetInnerHTML={
                 Object {
-                  "__html": "Step 8<br/> Map",
+                  "__html": "Step 8<br/> <p className=\\"text-14-light\\">Map </p>",
                 }
               }
               data-testid="txt"
@@ -242,263 +246,267 @@ exports[`Storyshots Components/Extensive/Form/Wizard Create Form 1`] = `
           className="w-full overflow-hidden border border-l-0 border-neutral-100"
         >
           <div
-            className="flex-1 bg-white px-16 pt-8 pb-15 h-[calc(100vh-287px)] overflow-auto"
-            id="step"
+            className="h-[calc(100vh-287px)] overflow-auto"
           >
             <div
-              className="flex items-center justify-between"
+              className="flex-1 bg-white px-16 pt-8 pb-15"
+              id="step"
             >
-              <p
-                className="text-heading-700"
-                data-testid="txt"
+              <div
+                className="flex items-center justify-between"
               >
-                Select Inputs
-              </p>
-            </div>
-            <p
-              className="mt-8 text-body-600 with-inner-html"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "These are all simple inputs",
+                <p
+                  className="text-heading-700"
+                  data-testid="txt"
+                >
+                  Select Inputs
+                </p>
+              </div>
+              <p
+                className="mt-8 text-body-600 with-inner-html"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "These are all simple inputs",
+                  }
                 }
-              }
-              data-testid="txt"
-            />
-            <div
-              className="my-8 h-[2px] w-full bg-neutral-200"
-            />
-            <ul>
-              <li
-                className="mt-8"
-              >
-                <div
-                  className="relative space-y-2"
+                data-testid="txt"
+              />
+              <div
+                className="my-8 h-[2px] w-full bg-neutral-200"
+              />
+              <ul>
+                <li
+                  className="mt-8"
                 >
-                  <label
-                    className="mr-2 inline uppercase text-bold-body-300"
-                    data-testid="txt"
-                    htmlFor=":r35:"
-                  >
-                    Select component *
-                  </label>
                   <div
-                    className="space-y-3"
+                    className="relative space-y-2"
                   >
                     <label
-                      className="flex items-center flex-row-reverse justify-end gap-3"
-                      htmlFor=":r36:"
+                      className="mr-2 inline uppercase text-bold-body-300"
+                      data-testid="txt"
+                      htmlFor=":r40:"
                     >
-                      <p
-                        className="text-light-caption-200"
-                        data-testid="txt"
-                      >
-                        Option 1
-                      </p>
-                      <input
-                        checked={false}
-                        className="flex-row-reverse justify-end gap-3"
-                        id=":r36:"
-                        label="Option 1"
-                        onClick={[Function]}
-                        type="radio"
-                      />
+                      Select component *
                     </label>
-                    <label
-                      className="flex items-center flex-row-reverse justify-end gap-3"
-                      htmlFor=":r37:"
+                    <div
+                      className="space-y-3"
                     >
-                      <p
-                        className="text-light-caption-200"
-                        data-testid="txt"
+                      <label
+                        className="flex items-center flex-row-reverse justify-end gap-3"
+                        htmlFor=":r41:"
                       >
-                        Option 2
-                      </p>
-                      <input
-                        checked={false}
-                        className="flex-row-reverse justify-end gap-3"
-                        id=":r37:"
-                        label="Option 2"
-                        onClick={[Function]}
-                        type="radio"
-                      />
-                    </label>
-                    <label
-                      className="flex items-center flex-row-reverse justify-end gap-3"
-                      htmlFor=":r38:"
-                    >
-                      <p
-                        className="text-light-caption-200"
-                        data-testid="txt"
+                        <p
+                          className="text-light-caption-200"
+                          data-testid="txt"
+                        >
+                          Option 1
+                        </p>
+                        <input
+                          checked={false}
+                          className="flex-row-reverse justify-end gap-3"
+                          id=":r41:"
+                          label="Option 1"
+                          onClick={[Function]}
+                          type="radio"
+                        />
+                      </label>
+                      <label
+                        className="flex items-center flex-row-reverse justify-end gap-3"
+                        htmlFor=":r42:"
                       >
-                        Option 3
-                      </p>
-                      <input
-                        checked={false}
-                        className="flex-row-reverse justify-end gap-3"
-                        id=":r38:"
-                        label="Option 3"
-                        onClick={[Function]}
-                        type="radio"
-                      />
-                    </label>
+                        <p
+                          className="text-light-caption-200"
+                          data-testid="txt"
+                        >
+                          Option 2
+                        </p>
+                        <input
+                          checked={false}
+                          className="flex-row-reverse justify-end gap-3"
+                          id=":r42:"
+                          label="Option 2"
+                          onClick={[Function]}
+                          type="radio"
+                        />
+                      </label>
+                      <label
+                        className="flex items-center flex-row-reverse justify-end gap-3"
+                        htmlFor=":r43:"
+                      >
+                        <p
+                          className="text-light-caption-200"
+                          data-testid="txt"
+                        >
+                          Option 3
+                        </p>
+                        <input
+                          checked={false}
+                          className="flex-row-reverse justify-end gap-3"
+                          id=":r43:"
+                          label="Option 3"
+                          onClick={[Function]}
+                          type="radio"
+                        />
+                      </label>
+                    </div>
                   </div>
-                </div>
-              </li>
-              <li
-                className="mt-8"
-              >
-                <div
-                  className="relative space-y-2"
+                </li>
+                <li
+                  className="mt-8"
                 >
-                  <label
-                    className="mr-2 inline uppercase text-bold-body-300"
-                    data-testid="txt"
-                    htmlFor=":r39:"
-                  >
-                    Multi-Select component *
-                  </label>
                   <div
-                    className="space-y-3"
+                    className="relative space-y-2"
                   >
+                    <label
+                      className="mr-2 inline uppercase text-bold-body-300"
+                      data-testid="txt"
+                      htmlFor=":r44:"
+                    >
+                      Multi-Select component *
+                    </label>
                     <div
-                      className="flex-row-reverse justify-end gap-3 relative flex items-start gap-4"
+                      className="space-y-3"
                     >
-                      <label
-                        className="w-full"
-                        htmlFor=":r3a:"
+                      <div
+                        className="flex-row-reverse justify-end gap-3"
                       >
                         <label
-                          className="max-w-[365px] undefined text-body-600 with-inner-html"
-                          dangerouslySetInnerHTML={
-                            Object {
-                              "__html": "Option 1 ",
+                          className="w-full"
+                          htmlFor=":r45:"
+                        >
+                          <label
+                            className="max-w-[365px] undefined text-body-600 with-inner-html"
+                            dangerouslySetInnerHTML={
+                              Object {
+                                "__html": "Option 1 ",
+                              }
                             }
-                          }
-                          data-testid="txt"
-                          htmlFor=":r3a:"
+                            data-testid="txt"
+                            htmlFor=":r45:"
+                          />
+                        </label>
+                        <input
+                          checked={false}
+                          className="h-4 w-4 cursor-pointer rounded-sm border-neutral-400 transition-all duration-300 checked:text-primary-500 focus:ring-transparent disabled:bg-neutral-400 lg:h-5 lg:w-5"
+                          id=":r45:"
+                          name=""
+                          onClick={[Function]}
+                          type="checkbox"
                         />
-                      </label>
-                      <input
-                        checked={false}
-                        className="h-5 w-5 cursor-pointer rounded-sm border-neutral-400 transition-all duration-300 checked:text-primary-500 focus:ring-transparent disabled:bg-neutral-400"
-                        id=":r3a:"
-                        name=""
-                        onClick={[Function]}
-                        type="checkbox"
-                      />
-                    </div>
-                    <div
-                      className="flex-row-reverse justify-end gap-3 relative flex items-start gap-4"
-                    >
-                      <label
-                        className="w-full"
-                        htmlFor=":r3b:"
+                      </div>
+                      <div
+                        className="flex-row-reverse justify-end gap-3"
                       >
                         <label
-                          className="max-w-[365px] undefined text-body-600 with-inner-html"
-                          dangerouslySetInnerHTML={
-                            Object {
-                              "__html": "Option 2 ",
+                          className="w-full"
+                          htmlFor=":r46:"
+                        >
+                          <label
+                            className="max-w-[365px] undefined text-body-600 with-inner-html"
+                            dangerouslySetInnerHTML={
+                              Object {
+                                "__html": "Option 2 ",
+                              }
                             }
-                          }
-                          data-testid="txt"
-                          htmlFor=":r3b:"
+                            data-testid="txt"
+                            htmlFor=":r46:"
+                          />
+                        </label>
+                        <input
+                          checked={false}
+                          className="h-4 w-4 cursor-pointer rounded-sm border-neutral-400 transition-all duration-300 checked:text-primary-500 focus:ring-transparent disabled:bg-neutral-400 lg:h-5 lg:w-5"
+                          id=":r46:"
+                          name=""
+                          onClick={[Function]}
+                          type="checkbox"
                         />
-                      </label>
-                      <input
-                        checked={false}
-                        className="h-5 w-5 cursor-pointer rounded-sm border-neutral-400 transition-all duration-300 checked:text-primary-500 focus:ring-transparent disabled:bg-neutral-400"
-                        id=":r3b:"
-                        name=""
-                        onClick={[Function]}
-                        type="checkbox"
-                      />
-                    </div>
-                    <div
-                      className="flex-row-reverse justify-end gap-3 relative flex items-start gap-4"
-                    >
-                      <label
-                        className="w-full"
-                        htmlFor=":r3c:"
+                      </div>
+                      <div
+                        className="flex-row-reverse justify-end gap-3"
                       >
                         <label
-                          className="max-w-[365px] undefined text-body-600 with-inner-html"
-                          dangerouslySetInnerHTML={
-                            Object {
-                              "__html": "Option 3 ",
+                          className="w-full"
+                          htmlFor=":r47:"
+                        >
+                          <label
+                            className="max-w-[365px] undefined text-body-600 with-inner-html"
+                            dangerouslySetInnerHTML={
+                              Object {
+                                "__html": "Option 3 ",
+                              }
                             }
-                          }
-                          data-testid="txt"
-                          htmlFor=":r3c:"
+                            data-testid="txt"
+                            htmlFor=":r47:"
+                          />
+                        </label>
+                        <input
+                          checked={false}
+                          className="h-4 w-4 cursor-pointer rounded-sm border-neutral-400 transition-all duration-300 checked:text-primary-500 focus:ring-transparent disabled:bg-neutral-400 lg:h-5 lg:w-5"
+                          id=":r47:"
+                          name=""
+                          onClick={[Function]}
+                          type="checkbox"
                         />
-                      </label>
-                      <input
-                        checked={false}
-                        className="h-5 w-5 cursor-pointer rounded-sm border-neutral-400 transition-all duration-300 checked:text-primary-500 focus:ring-transparent disabled:bg-neutral-400"
-                        id=":r3c:"
-                        name=""
-                        onClick={[Function]}
-                        type="checkbox"
-                      />
-                    </div>
-                    <div
-                      className="flex-row-reverse justify-end gap-3 relative flex items-start gap-4"
-                    >
-                      <label
-                        className="w-full"
-                        htmlFor=":r3d:"
+                      </div>
+                      <div
+                        className="flex-row-reverse justify-end gap-3"
                       >
                         <label
-                          className="max-w-[365px] undefined text-body-600 with-inner-html"
-                          dangerouslySetInnerHTML={
-                            Object {
-                              "__html": "Option 4 ",
+                          className="w-full"
+                          htmlFor=":r48:"
+                        >
+                          <label
+                            className="max-w-[365px] undefined text-body-600 with-inner-html"
+                            dangerouslySetInnerHTML={
+                              Object {
+                                "__html": "Option 4 ",
+                              }
                             }
-                          }
-                          data-testid="txt"
-                          htmlFor=":r3d:"
+                            data-testid="txt"
+                            htmlFor=":r48:"
+                          />
+                        </label>
+                        <input
+                          checked={false}
+                          className="h-4 w-4 cursor-pointer rounded-sm border-neutral-400 transition-all duration-300 checked:text-primary-500 focus:ring-transparent disabled:bg-neutral-400 lg:h-5 lg:w-5"
+                          id=":r48:"
+                          name=""
+                          onClick={[Function]}
+                          type="checkbox"
                         />
-                      </label>
-                      <input
-                        checked={false}
-                        className="h-5 w-5 cursor-pointer rounded-sm border-neutral-400 transition-all duration-300 checked:text-primary-500 focus:ring-transparent disabled:bg-neutral-400"
-                        id=":r3d:"
-                        name=""
-                        onClick={[Function]}
-                        type="checkbox"
-                      />
+                      </div>
                     </div>
                   </div>
-                </div>
-              </li>
-            </ul>
-            <div
-              className="w-full"
-            >
+                </li>
+              </ul>
               <div
-                className="flex w-full items-center justify-between mt-12"
+                className="w-full"
               >
-                <button
-                  className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-1.75 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
-                  onClick={[Function]}
+                <div
+                  className="flex w-full items-center justify-between mt-12"
                 >
-                  <span
-                    className="text-bold-caption-200 pt-0.75 leading-3"
+                  <button
+                    className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-[10.5px] rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+                    onClick={[Function]}
                   >
-                    Back
-                  </span>
-                </button>
-                <button
-                  className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
-                  disabled={false}
-                  onClick={[Function]}
-                >
-                  <span
-                    className="text-bold-caption-200 pt-0.75 leading-3"
+                    <span
+                      className="flex items-center text-bold-caption-200"
+                    >
+                      Back
+                    </span>
+                  </button>
+                  <button
+                    className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+                    disabled={false}
+                    onClick={[Function]}
                   >
-                    Save and Continue
-                  </span>
-                </button>
+                    <span
+                      className="flex items-center text-bold-caption-200"
+                    >
+                      Save and Continue
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -515,10 +523,10 @@ exports[`Storyshots Components/Extensive/Form/Wizard Edit Form 1`] = `
 >
   <div>
     <div
-      className="mx-auto mt-0 max-w-7xl px-6 py-10 xl:px-0"
+      className="mx-auto mt-0 max-w-[82vw] px-6 py-10 xl:px-0"
     >
       <div
-        className="flex h-full w-full"
+        className="flex h-full w-full shadow"
       >
         <div
           aria-orientation="vertical"
@@ -528,10 +536,10 @@ exports[`Storyshots Components/Extensive/Form/Wizard Edit Form 1`] = `
           <button
             aria-checked="false"
             aria-selected="true"
-            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border border-b border-neutral-100 border-r-white bg-white text-neutral-1000 peer-aria-checked:shadow-t-secondary"
+            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border-b border-neutral-100 border-r-white bg-white text-neutral-1000 peer-aria-checked:shadow-t-secondary"
             data-headlessui-state="selected"
             disabled={false}
-            id="headlessui-tabs-tab-:r3e:"
+            id="headlessui-tabs-tab-:r49:"
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseDown={[Function]}
@@ -539,7 +547,7 @@ exports[`Storyshots Components/Extensive/Form/Wizard Edit Form 1`] = `
             tabIndex={0}
           >
             <p
-              className="w-full text-left line-clamp-2 md:pr-6 text-bold-caption-200 with-inner-html"
+              className="w-full text-left line-clamp-2 md:pr-6 text-14-bold with-inner-html"
               dangerouslySetInnerHTML={
                 Object {
                   "__html": "Simple Inputs",
@@ -551,10 +559,10 @@ exports[`Storyshots Components/Extensive/Form/Wizard Edit Form 1`] = `
           <button
             aria-checked="false"
             aria-selected="false"
-            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
+            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
             data-headlessui-state=""
             disabled={false}
-            id="headlessui-tabs-tab-:r3f:"
+            id="headlessui-tabs-tab-:r4a:"
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseDown={[Function]}
@@ -562,7 +570,7 @@ exports[`Storyshots Components/Extensive/Form/Wizard Edit Form 1`] = `
             tabIndex={-1}
           >
             <p
-              className="w-full text-left line-clamp-2 md:pr-6 text-bold-caption-200 with-inner-html"
+              className="w-full text-left line-clamp-2 md:pr-6 text-14-bold with-inner-html"
               dangerouslySetInnerHTML={
                 Object {
                   "__html": "Dropdown Inputs",
@@ -574,10 +582,10 @@ exports[`Storyshots Components/Extensive/Form/Wizard Edit Form 1`] = `
           <button
             aria-checked="false"
             aria-selected="false"
-            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
+            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
             data-headlessui-state=""
             disabled={false}
-            id="headlessui-tabs-tab-:r3g:"
+            id="headlessui-tabs-tab-:r4b:"
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseDown={[Function]}
@@ -585,7 +593,7 @@ exports[`Storyshots Components/Extensive/Form/Wizard Edit Form 1`] = `
             tabIndex={-1}
           >
             <p
-              className="w-full text-left line-clamp-2 md:pr-6 text-bold-caption-200 with-inner-html"
+              className="w-full text-left line-clamp-2 md:pr-6 text-14-bold with-inner-html"
               dangerouslySetInnerHTML={
                 Object {
                   "__html": "Select Inputs",
@@ -597,10 +605,10 @@ exports[`Storyshots Components/Extensive/Form/Wizard Edit Form 1`] = `
           <button
             aria-checked="false"
             aria-selected="false"
-            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
+            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
             data-headlessui-state=""
             disabled={false}
-            id="headlessui-tabs-tab-:r3h:"
+            id="headlessui-tabs-tab-:r4c:"
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseDown={[Function]}
@@ -608,7 +616,7 @@ exports[`Storyshots Components/Extensive/Form/Wizard Edit Form 1`] = `
             tabIndex={-1}
           >
             <p
-              className="w-full text-left line-clamp-2 md:pr-6 text-bold-caption-200 with-inner-html"
+              className="w-full text-left line-clamp-2 md:pr-6 text-14-bold with-inner-html"
               dangerouslySetInnerHTML={
                 Object {
                   "__html": "File Uploader",
@@ -620,10 +628,10 @@ exports[`Storyshots Components/Extensive/Form/Wizard Edit Form 1`] = `
           <button
             aria-checked="false"
             aria-selected="false"
-            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
+            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
             data-headlessui-state=""
             disabled={false}
-            id="headlessui-tabs-tab-:r3i:"
+            id="headlessui-tabs-tab-:r4d:"
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseDown={[Function]}
@@ -631,7 +639,7 @@ exports[`Storyshots Components/Extensive/Form/Wizard Edit Form 1`] = `
             tabIndex={-1}
           >
             <p
-              className="w-full text-left line-clamp-2 md:pr-6 text-bold-caption-200 with-inner-html"
+              className="w-full text-left line-clamp-2 md:pr-6 text-14-bold with-inner-html"
               dangerouslySetInnerHTML={
                 Object {
                   "__html": "Tree species input",
@@ -643,10 +651,10 @@ exports[`Storyshots Components/Extensive/Form/Wizard Edit Form 1`] = `
           <button
             aria-checked="false"
             aria-selected="false"
-            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
+            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
             data-headlessui-state=""
             disabled={false}
-            id="headlessui-tabs-tab-:r3j:"
+            id="headlessui-tabs-tab-:r4e:"
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseDown={[Function]}
@@ -654,7 +662,7 @@ exports[`Storyshots Components/Extensive/Form/Wizard Edit Form 1`] = `
             tabIndex={-1}
           >
             <p
-              className="w-full text-left line-clamp-2 md:pr-6 text-bold-caption-200 with-inner-html"
+              className="w-full text-left line-clamp-2 md:pr-6 text-14-bold with-inner-html"
               dangerouslySetInnerHTML={
                 Object {
                   "__html": "What are your funding sources?*",
@@ -666,10 +674,10 @@ exports[`Storyshots Components/Extensive/Form/Wizard Edit Form 1`] = `
           <button
             aria-checked="false"
             aria-selected="false"
-            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
+            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
             data-headlessui-state=""
             disabled={false}
-            id="headlessui-tabs-tab-:r3k:"
+            id="headlessui-tabs-tab-:r4f:"
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseDown={[Function]}
@@ -677,7 +685,7 @@ exports[`Storyshots Components/Extensive/Form/Wizard Edit Form 1`] = `
             tabIndex={-1}
           >
             <p
-              className="w-full text-left line-clamp-2 md:pr-6 text-bold-caption-200 with-inner-html"
+              className="w-full text-left line-clamp-2 md:pr-6 text-14-bold with-inner-html"
               dangerouslySetInnerHTML={
                 Object {
                   "__html": "Section subtitle",
@@ -689,10 +697,10 @@ exports[`Storyshots Components/Extensive/Form/Wizard Edit Form 1`] = `
           <button
             aria-checked="false"
             aria-selected="false"
-            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border border-b border-neutral-100 bg-neutral-300 text-neutral-900"
+            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border-b border-neutral-100 bg-neutral-300 text-neutral-900"
             data-headlessui-state=""
             disabled={false}
-            id="headlessui-tabs-tab-:r3l:"
+            id="headlessui-tabs-tab-:r4g:"
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseDown={[Function]}
@@ -700,7 +708,7 @@ exports[`Storyshots Components/Extensive/Form/Wizard Edit Form 1`] = `
             tabIndex={-1}
           >
             <p
-              className="w-full text-left line-clamp-2 md:pr-6 text-bold-caption-200 with-inner-html"
+              className="w-full text-left line-clamp-2 md:pr-6 text-14-bold with-inner-html"
               dangerouslySetInnerHTML={
                 Object {
                   "__html": "Draw on Map",
@@ -717,113 +725,115 @@ exports[`Storyshots Components/Extensive/Form/Wizard Edit Form 1`] = `
           className="w-full overflow-hidden border border-l-0 border-neutral-100"
         >
           <div
-            className="flex-1 bg-white px-16 pt-8 pb-15 h-[calc(100vh-287px)] overflow-auto"
-            id="step"
+            className="h-[calc(100vh-287px)] overflow-auto"
           >
             <div
-              className="flex items-center justify-between"
+              className="flex-1 bg-white px-16 pt-8 pb-15"
+              id="step"
             >
-              <p
-                className="text-heading-700"
-                data-testid="txt"
+              <div
+                className="flex items-center justify-between"
               >
-                Simple Inputs
-              </p>
-            </div>
-            <p
-              className="mt-8 text-body-600 with-inner-html"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "These are all simple inputs",
+                <p
+                  className="text-heading-700"
+                  data-testid="txt"
+                >
+                  Simple Inputs
+                </p>
+              </div>
+              <p
+                className="mt-8 text-body-600 with-inner-html"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "These are all simple inputs",
+                  }
                 }
-              }
-              data-testid="txt"
-            />
-            <div
-              className="my-8 h-[2px] w-full bg-neutral-200"
-            />
-            <ul>
-              <li
-                className="mt-8"
-              >
-                <div
-                  className="relative space-y-2"
+                data-testid="txt"
+              />
+              <div
+                className="my-8 h-[2px] w-full bg-neutral-200"
+              />
+              <ul>
+                <li
+                  className="mt-8"
                 >
-                  <label
-                    className="mr-2 inline uppercase text-bold-body-300"
-                    data-testid="txt"
-                    htmlFor=":r3m:"
-                  >
-                    Simple text field *
-                  </label>
                   <div
-                    className="relative"
+                    className="relative space-y-2"
                   >
-                    <input
-                      aria-describedby=":r3m:-description"
-                      aria-invalid={false}
-                      className="w-full outline-none transition-all duration-300 ease-in-out focus:ring-transparent px-3 py-[9px] rounded-lg focus:border-primary-500 border border-neutral-400"
-                      id=":r3m:"
-                      name="text_field"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onChangeCapture={[Function]}
-                      placeholder="Please enter ..."
-                      type="text"
-                    />
+                    <label
+                      className="mr-2 inline uppercase text-bold-body-300"
+                      data-testid="txt"
+                      htmlFor=":r4h:"
+                    >
+                      Simple text field *
+                    </label>
+                    <div
+                      className="relative"
+                    >
+                      <input
+                        aria-describedby=":r4h:-description"
+                        aria-invalid={false}
+                        className="w-full outline-none transition-all duration-300 ease-in-out focus:ring-transparent px-3 py-[9px] rounded-lg focus:border-primary-500 border border-neutral-200"
+                        id=":r4h:"
+                        name="text_field"
+                        onBlur={[Function]}
+                        onChangeCapture={[Function]}
+                        placeholder="Please enter ..."
+                        type="text"
+                      />
+                    </div>
                   </div>
-                </div>
-              </li>
-              <li
-                className="mt-8"
-              >
-                <div
-                  className="relative space-y-2"
+                </li>
+                <li
+                  className="mt-8"
                 >
-                  <label
-                    className="mr-2 inline uppercase text-bold-body-300"
-                    data-testid="txt"
-                    htmlFor=":r3n:"
-                  >
-                    Simple number field *
-                  </label>
                   <div
-                    className="relative"
+                    className="relative space-y-2"
                   >
-                    <input
-                      aria-describedby=":r3n:-description"
-                      aria-invalid={false}
-                      className="w-full outline-none transition-all duration-300 ease-in-out focus:ring-transparent px-3 py-[9px] rounded-lg focus:border-primary-500 border border-neutral-400"
-                      id=":r3n:"
-                      name="number_field"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onChangeCapture={[Function]}
-                      onKeyDown={[Function]}
-                      placeholder="Please enter ..."
-                      type="number"
-                    />
+                    <label
+                      className="mr-2 inline uppercase text-bold-body-300"
+                      data-testid="txt"
+                      htmlFor=":r4i:"
+                    >
+                      Simple number field *
+                    </label>
+                    <div
+                      className="relative"
+                    >
+                      <input
+                        aria-describedby=":r4i:-description"
+                        aria-invalid={false}
+                        className="w-full outline-none transition-all duration-300 ease-in-out focus:ring-transparent px-3 py-[9px] rounded-lg focus:border-primary-500 border border-neutral-200"
+                        id=":r4i:"
+                        name="number_field"
+                        onBlur={[Function]}
+                        onChangeCapture={[Function]}
+                        onKeyDown={[Function]}
+                        placeholder="Please enter ..."
+                        type="number"
+                      />
+                    </div>
                   </div>
-                </div>
-              </li>
-            </ul>
-            <div
-              className="w-full"
-            >
+                </li>
+              </ul>
               <div
-                className="flex w-full items-center justify-between mt-12"
+                className="w-full"
               >
-                <button
-                  className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
-                  disabled={false}
-                  onClick={[Function]}
+                <div
+                  className="flex w-full items-center justify-between mt-12"
                 >
-                  <span
-                    className="text-bold-caption-200 pt-0.75 leading-3"
+                  <button
+                    className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+                    disabled={false}
+                    onClick={[Function]}
                   >
-                    Save
-                  </span>
-                </button>
+                    <span
+                      className="flex items-center text-bold-caption-200"
+                    >
+                      Save
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
diff --git a/src/components/generic/Layout/__snapshots__/BackgroundLayout.stories.storyshot b/src/components/generic/Layout/__snapshots__/BackgroundLayout.stories.storyshot
index b82ebb3dc..ab4501cdd 100644
--- a/src/components/generic/Layout/__snapshots__/BackgroundLayout.stories.storyshot
+++ b/src/components/generic/Layout/__snapshots__/BackgroundLayout.stories.storyshot
@@ -2,7 +2,7 @@
 
 exports[`Storyshots Components/Generic/Layouts/BackgroundLayout Default 1`] = `
 <section
-  className="min-h-[calc(100vh-74px)] w-full bg-primary-50"
+  className="min-h-[calc(100vh-74px)] w-full bg-neutral-150"
 >
   <div
     className="h-[400px]"
diff --git a/src/components/generic/Layout/__snapshots__/Container.stories.storyshot b/src/components/generic/Layout/__snapshots__/Container.stories.storyshot
index 807ea4919..66db7a14f 100644
--- a/src/components/generic/Layout/__snapshots__/Container.stories.storyshot
+++ b/src/components/generic/Layout/__snapshots__/Container.stories.storyshot
@@ -2,7 +2,7 @@
 
 exports[`Storyshots Components/Generic/Layouts/Container Default 1`] = `
 <section
-  className="mx-auto w-full max-w-[1218px] undefined"
+  className="mx-auto w-full max-w-[82vw] undefined"
 >
   <div
     className="h-[400px] bg-neutral-200"
diff --git a/src/components/generic/Layout/__snapshots__/MainLayout.stories.storyshot b/src/components/generic/Layout/__snapshots__/MainLayout.stories.storyshot
index e2244bb59..029de9749 100644
--- a/src/components/generic/Layout/__snapshots__/MainLayout.stories.storyshot
+++ b/src/components/generic/Layout/__snapshots__/MainLayout.stories.storyshot
@@ -8,10 +8,10 @@ exports[`Storyshots Components/Generic/Layouts/MainLayout Default 1`] = `
     className="flex min-h-screen w-full flex-col"
   >
     <header
-      className="sticky top-0 z-50 flex w-full flex-col justify-center border-b-4 border-primary bg-white px-4 lg:flex-row"
+      className="sticky top-0 z-50 flex w-full flex-col justify-center bg-white px-4 sm:flex-row"
     >
       <section
-        className="mx-auto w-full max-w-[1218px] flex h-[70px] items-center justify-between"
+        className="mx-auto w-full max-w-[82vw] flex h-[70px] items-center justify-between"
       >
         <div
           style={
@@ -22,20 +22,20 @@ exports[`Storyshots Components/Generic/Layouts/MainLayout Default 1`] = `
           }
         />
         <div
-          className="hidden items-center gap-8 lg:flex"
+          className="hidden items-center gap-8 sm:flex"
         >
           <div
             className="absolute top-4 left-[50%] translate-x-[-50%]"
           >
             <div
-              className="block lg:hidden relative w-fit"
+              className="block sm:hidden relative w-fit"
               data-headlessui-state=""
             >
               <button
                 aria-expanded={false}
                 className="flex items-center justify-between p-2"
                 data-headlessui-state=""
-                id="headlessui-popover-button-:r4j:"
+                id="headlessui-popover-button-:r5e:"
                 onClick={[Function]}
                 onKeyDown={[Function]}
                 onKeyUp={[Function]}
@@ -51,7 +51,7 @@ exports[`Storyshots Components/Generic/Layouts/MainLayout Default 1`] = `
                   }
                 />
                 <span
-                  className="mr-2 whitespace-nowrap text-sm uppercase text-neutral-900"
+                  className="text-14-light mr-2 whitespace-nowrap text-sm uppercase text-darkCustom"
                 >
                   English
                 </span>
@@ -68,7 +68,7 @@ exports[`Storyshots Components/Generic/Layouts/MainLayout Default 1`] = `
           </div>
           <div>
             <div
-              className="font-regular uppercase xl:w-full hover:underline lg:mr-2"
+              className="font-regular uppercase xl:w-full hover:opacity-50 text-darkCustom sm:mr-2"
             >
               <a
                 href="/"
@@ -80,7 +80,7 @@ exports[`Storyshots Components/Generic/Layouts/MainLayout Default 1`] = `
                   className="flex items-center"
                 >
                   <span
-                    className="whitespace-nowrap text-neutral-900 lg:text-body-300 text-heading-400"
+                    className="whitespace-nowrap text-darkCustom text-14-light"
                     data-testid="txt"
                   >
                     Home
@@ -91,7 +91,7 @@ exports[`Storyshots Components/Generic/Layouts/MainLayout Default 1`] = `
           </div>
           <div>
             <div
-              className="font-regular uppercase xl:w-full hover:underline lg:mr-2"
+              className="font-regular uppercase xl:w-full hover:opacity-50 text-darkCustom sm:mr-2"
             >
               <a
                 href="https://terramatchsupport.zendesk.com/"
@@ -103,7 +103,7 @@ exports[`Storyshots Components/Generic/Layouts/MainLayout Default 1`] = `
                   className="flex items-center"
                 >
                   <span
-                    className="whitespace-nowrap text-neutral-900 lg:text-body-300 text-heading-400"
+                    className="whitespace-nowrap text-darkCustom text-14-light"
                     data-testid="txt"
                   >
                     Support
@@ -113,10 +113,10 @@ exports[`Storyshots Components/Generic/Layouts/MainLayout Default 1`] = `
             </div>
           </div>
           <div
-            className="hidden h-4 w-[1px] bg-neutral-500 lg:mx-2 lg:block"
+            className="hidden h-4 w-[1px] bg-neutral-500 sm:mx-2 sm:block"
           />
           <div
-            className="font-regular uppercase xl:w-full hover:underline"
+            className="font-regular uppercase xl:w-full hover:opacity-50"
           >
             <a
               href="/auth/login"
@@ -136,7 +136,7 @@ exports[`Storyshots Components/Generic/Layouts/MainLayout Default 1`] = `
                   }
                 />
                 <span
-                  className="whitespace-nowrap text-neutral-900 lg:text-body-300 text-heading-400"
+                  className="whitespace-nowrap text-darkCustom text-14-light"
                   data-testid="txt"
                 >
                   Sign in
@@ -145,14 +145,14 @@ exports[`Storyshots Components/Generic/Layouts/MainLayout Default 1`] = `
             </a>
           </div>
           <div
-            className="hidden lg:block relative w-fit"
+            className="hidden sm:block relative w-fit"
             data-headlessui-state=""
           >
             <button
               aria-expanded={false}
               className="flex items-center justify-between p-2"
               data-headlessui-state=""
-              id="headlessui-popover-button-:r4o:"
+              id="headlessui-popover-button-:r5j:"
               onClick={[Function]}
               onKeyDown={[Function]}
               onKeyUp={[Function]}
@@ -168,7 +168,7 @@ exports[`Storyshots Components/Generic/Layouts/MainLayout Default 1`] = `
                 }
               />
               <span
-                className="mr-2 whitespace-nowrap text-sm uppercase text-neutral-900"
+                className="text-14-light mr-2 whitespace-nowrap text-sm uppercase text-darkCustom"
               >
                 English
               </span>
@@ -184,7 +184,7 @@ exports[`Storyshots Components/Generic/Layouts/MainLayout Default 1`] = `
           </div>
         </div>
         <button
-          className="flex items-center justify-center rounded-full hover:bg-opacity-60 tour-menu-button block lg:hidden"
+          className="flex items-center justify-center rounded-full hover:bg-opacity-60 tour-menu-button block sm:hidden"
           disabled={false}
           onClick={[Function]}
         >
@@ -200,7 +200,7 @@ exports[`Storyshots Components/Generic/Layouts/MainLayout Default 1`] = `
       </section>
     </header>
     <main
-      className="flex min-h-[calc(100vh-74px)] flex-1 flex-col undefined"
+      className="flex flex-[1_1_0] flex-col undefined"
     >
       <div
         className="h-[400px] "
diff --git a/src/components/generic/Navbar/__snapshots__/Navbar.stories.storyshot b/src/components/generic/Navbar/__snapshots__/Navbar.stories.storyshot
index b55e7b089..0dcba4153 100644
--- a/src/components/generic/Navbar/__snapshots__/Navbar.stories.storyshot
+++ b/src/components/generic/Navbar/__snapshots__/Navbar.stories.storyshot
@@ -2,10 +2,10 @@
 
 exports[`Storyshots Components/Generic/Navbar Logged In 1`] = `
 <header
-  className="sticky top-0 z-50 flex w-full flex-col justify-center border-b-4 border-primary bg-white px-4 lg:flex-row"
+  className="sticky top-0 z-50 flex w-full flex-col justify-center bg-white px-4 sm:flex-row"
 >
   <section
-    className="mx-auto w-full max-w-[1218px] flex h-[70px] items-center justify-between"
+    className="mx-auto w-full max-w-[82vw] flex h-[70px] items-center justify-between"
   >
     <div
       style={
@@ -16,20 +16,20 @@ exports[`Storyshots Components/Generic/Navbar Logged In 1`] = `
       }
     />
     <div
-      className="hidden items-center gap-8 lg:flex"
+      className="hidden items-center gap-8 sm:flex"
     >
       <div
         className="absolute top-4 left-[50%] translate-x-[-50%]"
       >
         <div
-          className="block lg:hidden relative w-fit"
+          className="block sm:hidden relative w-fit"
           data-headlessui-state=""
         >
           <button
             aria-expanded={false}
             className="flex items-center justify-between p-2"
             data-headlessui-state=""
-            id="headlessui-popover-button-:r4t:"
+            id="headlessui-popover-button-:r5o:"
             onClick={[Function]}
             onKeyDown={[Function]}
             onKeyUp={[Function]}
@@ -45,7 +45,7 @@ exports[`Storyshots Components/Generic/Navbar Logged In 1`] = `
               }
             />
             <span
-              className="mr-2 whitespace-nowrap text-sm uppercase text-neutral-900"
+              className="text-14-light mr-2 whitespace-nowrap text-sm uppercase text-darkCustom"
             >
               English
             </span>
@@ -62,7 +62,7 @@ exports[`Storyshots Components/Generic/Navbar Logged In 1`] = `
       </div>
       <div>
         <div
-          className="font-regular uppercase xl:w-full hover:underline lg:mr-2 tour-help"
+          className="font-regular uppercase xl:w-full hover:opacity-50 text-darkCustom sm:mr-2 tour-help"
         >
           <a
             href="https://terramatchsupport.zendesk.com/"
@@ -74,7 +74,7 @@ exports[`Storyshots Components/Generic/Navbar Logged In 1`] = `
               className="flex items-center"
             >
               <span
-                className="whitespace-nowrap text-neutral-900 lg:text-body-300 text-heading-400"
+                className="whitespace-nowrap text-darkCustom text-14-light"
                 data-testid="txt"
               >
                 Help Center
@@ -84,10 +84,10 @@ exports[`Storyshots Components/Generic/Navbar Logged In 1`] = `
         </div>
       </div>
       <div
-        className="hidden h-4 w-[1px] bg-neutral-500 lg:mx-2 lg:block"
+        className="hidden h-4 w-[1px] bg-neutral-500 sm:mx-2 sm:block"
       />
       <div
-        className="font-regular uppercase xl:w-full hover:underline"
+        className="font-regular uppercase xl:w-full hover:opacity-50"
       >
         <a
           href="/"
@@ -107,7 +107,7 @@ exports[`Storyshots Components/Generic/Navbar Logged In 1`] = `
               }
             />
             <span
-              className="whitespace-nowrap text-neutral-900 lg:text-body-300 text-heading-400"
+              className="whitespace-nowrap text-darkCustom text-14-light"
               data-testid="txt"
             >
               Logout
@@ -116,14 +116,14 @@ exports[`Storyshots Components/Generic/Navbar Logged In 1`] = `
         </a>
       </div>
       <div
-        className="hidden lg:block relative w-fit"
+        className="hidden sm:block relative w-fit"
         data-headlessui-state=""
       >
         <button
           aria-expanded={false}
           className="flex items-center justify-between p-2"
           data-headlessui-state=""
-          id="headlessui-popover-button-:r52:"
+          id="headlessui-popover-button-:r5t:"
           onClick={[Function]}
           onKeyDown={[Function]}
           onKeyUp={[Function]}
@@ -139,7 +139,7 @@ exports[`Storyshots Components/Generic/Navbar Logged In 1`] = `
             }
           />
           <span
-            className="mr-2 whitespace-nowrap text-sm uppercase text-neutral-900"
+            className="text-14-light mr-2 whitespace-nowrap text-sm uppercase text-darkCustom"
           >
             English
           </span>
@@ -155,7 +155,7 @@ exports[`Storyshots Components/Generic/Navbar Logged In 1`] = `
       </div>
     </div>
     <button
-      className="flex items-center justify-center rounded-full hover:bg-opacity-60 tour-menu-button block lg:hidden"
+      className="flex items-center justify-center rounded-full hover:bg-opacity-60 tour-menu-button block sm:hidden"
       disabled={false}
       onClick={[Function]}
     >
@@ -174,10 +174,10 @@ exports[`Storyshots Components/Generic/Navbar Logged In 1`] = `
 
 exports[`Storyshots Components/Generic/Navbar Logged Out 1`] = `
 <header
-  className="sticky top-0 z-50 flex w-full flex-col justify-center border-b-4 border-primary bg-white px-4 lg:flex-row"
+  className="sticky top-0 z-50 flex w-full flex-col justify-center bg-white px-4 sm:flex-row"
 >
   <section
-    className="mx-auto w-full max-w-[1218px] flex h-[70px] items-center justify-between"
+    className="mx-auto w-full max-w-[82vw] flex h-[70px] items-center justify-between"
   >
     <div
       style={
@@ -188,20 +188,20 @@ exports[`Storyshots Components/Generic/Navbar Logged Out 1`] = `
       }
     />
     <div
-      className="hidden items-center gap-8 lg:flex"
+      className="hidden items-center gap-8 sm:flex"
     >
       <div
         className="absolute top-4 left-[50%] translate-x-[-50%]"
       >
         <div
-          className="block lg:hidden relative w-fit"
+          className="block sm:hidden relative w-fit"
           data-headlessui-state=""
         >
           <button
             aria-expanded={false}
             className="flex items-center justify-between p-2"
             data-headlessui-state=""
-            id="headlessui-popover-button-:r57:"
+            id="headlessui-popover-button-:r62:"
             onClick={[Function]}
             onKeyDown={[Function]}
             onKeyUp={[Function]}
@@ -217,7 +217,7 @@ exports[`Storyshots Components/Generic/Navbar Logged Out 1`] = `
               }
             />
             <span
-              className="mr-2 whitespace-nowrap text-sm uppercase text-neutral-900"
+              className="text-14-light mr-2 whitespace-nowrap text-sm uppercase text-darkCustom"
             >
               English
             </span>
@@ -234,7 +234,7 @@ exports[`Storyshots Components/Generic/Navbar Logged Out 1`] = `
       </div>
       <div>
         <div
-          className="font-regular uppercase xl:w-full hover:underline lg:mr-2"
+          className="font-regular uppercase xl:w-full hover:opacity-50 text-darkCustom sm:mr-2"
         >
           <a
             href="/"
@@ -246,7 +246,7 @@ exports[`Storyshots Components/Generic/Navbar Logged Out 1`] = `
               className="flex items-center"
             >
               <span
-                className="whitespace-nowrap text-neutral-900 lg:text-body-300 text-heading-400"
+                className="whitespace-nowrap text-darkCustom text-14-light"
                 data-testid="txt"
               >
                 Home
@@ -257,7 +257,7 @@ exports[`Storyshots Components/Generic/Navbar Logged Out 1`] = `
       </div>
       <div>
         <div
-          className="font-regular uppercase xl:w-full hover:underline lg:mr-2"
+          className="font-regular uppercase xl:w-full hover:opacity-50 text-darkCustom sm:mr-2"
         >
           <a
             href="https://terramatchsupport.zendesk.com/"
@@ -269,7 +269,7 @@ exports[`Storyshots Components/Generic/Navbar Logged Out 1`] = `
               className="flex items-center"
             >
               <span
-                className="whitespace-nowrap text-neutral-900 lg:text-body-300 text-heading-400"
+                className="whitespace-nowrap text-darkCustom text-14-light"
                 data-testid="txt"
               >
                 Support
@@ -279,10 +279,10 @@ exports[`Storyshots Components/Generic/Navbar Logged Out 1`] = `
         </div>
       </div>
       <div
-        className="hidden h-4 w-[1px] bg-neutral-500 lg:mx-2 lg:block"
+        className="hidden h-4 w-[1px] bg-neutral-500 sm:mx-2 sm:block"
       />
       <div
-        className="font-regular uppercase xl:w-full hover:underline"
+        className="font-regular uppercase xl:w-full hover:opacity-50"
       >
         <a
           href="/auth/login"
@@ -302,7 +302,7 @@ exports[`Storyshots Components/Generic/Navbar Logged Out 1`] = `
               }
             />
             <span
-              className="whitespace-nowrap text-neutral-900 lg:text-body-300 text-heading-400"
+              className="whitespace-nowrap text-darkCustom text-14-light"
               data-testid="txt"
             >
               Sign in
@@ -311,14 +311,14 @@ exports[`Storyshots Components/Generic/Navbar Logged Out 1`] = `
         </a>
       </div>
       <div
-        className="hidden lg:block relative w-fit"
+        className="hidden sm:block relative w-fit"
         data-headlessui-state=""
       >
         <button
           aria-expanded={false}
           className="flex items-center justify-between p-2"
           data-headlessui-state=""
-          id="headlessui-popover-button-:r5c:"
+          id="headlessui-popover-button-:r67:"
           onClick={[Function]}
           onKeyDown={[Function]}
           onKeyUp={[Function]}
@@ -334,7 +334,7 @@ exports[`Storyshots Components/Generic/Navbar Logged Out 1`] = `
             }
           />
           <span
-            className="mr-2 whitespace-nowrap text-sm uppercase text-neutral-900"
+            className="text-14-light mr-2 whitespace-nowrap text-sm uppercase text-darkCustom"
           >
             English
           </span>
@@ -350,7 +350,7 @@ exports[`Storyshots Components/Generic/Navbar Logged Out 1`] = `
       </div>
     </div>
     <button
-      className="flex items-center justify-center rounded-full hover:bg-opacity-60 tour-menu-button block lg:hidden"
+      className="flex items-center justify-center rounded-full hover:bg-opacity-60 tour-menu-button block sm:hidden"
       disabled={false}
       onClick={[Function]}
     >
diff --git a/src/hooks/useGetCustomFormSteps/__snapshots__/useGetCustomFormSteps.stories.storyshot b/src/hooks/useGetCustomFormSteps/__snapshots__/useGetCustomFormSteps.stories.storyshot
index b0167205e..d559a21de 100644
--- a/src/hooks/useGetCustomFormSteps/__snapshots__/useGetCustomFormSteps.stories.storyshot
+++ b/src/hooks/useGetCustomFormSteps/__snapshots__/useGetCustomFormSteps.stories.storyshot
@@ -6,33 +6,37 @@ exports[`Storyshots Components/Extensive/Form/Wizard With Get Form Step Hook 1`]
 >
   <div>
     <div
-      className="sticky top-[74px] z-40 flex border-primary-50 bg-leavesWithOverlay bg-cover bg-center p-6"
+      className="sticky top-[74px] z-40 flex border-neutral-150 bg-treesHeaderWithOverlay bg-cover bg-no-repeat px-10 py-3 md:py-8"
     >
       <div
-        className="mx-auto flex w-full min-w-0 max-w-7xl items-center gap-8"
+        className="mx-auto flex w-full min-w-0 max-w-[82vw] items-center gap-8"
       >
         <div
           className="min-w-0 flex-grow text-white"
         >
-          <p
-            className="overflow-hidden text-ellipsis whitespace-nowrap text-bold-body-300"
-            data-testid="txt"
-          >
-            Progress: 1/6 steps complete
-          </p>
-          <p
-            className="text-bold-caption-200"
-            data-testid="txt"
+          <div
+            className="flex"
           >
-            Unsaved
-          </p>
+            <p
+              className="overflow-hidden text-ellipsis whitespace-nowrap text-14-light"
+              data-testid="txt"
+            >
+              Progress: 1/6 steps complete
+            </p>
+            <p
+              className="text-14-light"
+              data-testid="txt"
+            >
+              Unsaved
+            </p>
+          </div>
         </div>
         <button
-          className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+          className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-[10.5px] rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
           onClick={[Function]}
         >
           <span
-            className="text-bold-caption-200 pt-0.75 leading-3"
+            className="flex items-center text-bold-caption-200"
           >
             Close and continue later
           </span>
@@ -40,10 +44,10 @@ exports[`Storyshots Components/Extensive/Form/Wizard With Get Form Step Hook 1`]
       </div>
     </div>
     <div
-      className="mx-auto mt-0 max-w-7xl px-6 py-10 xl:px-0"
+      className="mx-auto mt-0 max-w-[82vw] px-6 py-10 xl:px-0"
     >
       <div
-        className="flex h-full w-full"
+        className="flex h-full w-full shadow"
       >
         <div
           aria-orientation="vertical"
@@ -53,10 +57,10 @@ exports[`Storyshots Components/Extensive/Form/Wizard With Get Form Step Hook 1`]
           <button
             aria-checked="false"
             aria-selected="true"
-            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border border-b border-neutral-100 border-r-white bg-white text-neutral-1000 peer-aria-checked:shadow-t-secondary"
+            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border-b border-neutral-100 border-r-white bg-white text-neutral-1000 peer-aria-checked:shadow-t-secondary"
             data-headlessui-state="selected"
             disabled={false}
-            id="headlessui-tabs-tab-:r3o:"
+            id="headlessui-tabs-tab-:r4j:"
             onClick={[Function]}
             onKeyDown={[Function]}
             onMouseDown={[Function]}
@@ -64,10 +68,10 @@ exports[`Storyshots Components/Extensive/Form/Wizard With Get Form Step Hook 1`]
             tabIndex={0}
           >
             <p
-              className="w-full text-left line-clamp-2 md:pr-6 text-bold-caption-200 with-inner-html"
+              className="w-full text-left line-clamp-2 md:pr-6 text-14-bold with-inner-html"
               dangerouslySetInnerHTML={
                 Object {
-                  "__html": "Step 1<br/> Organizational Information: Governance  ",
+                  "__html": "Step 1<br/> <p className=\\"text-14-light\\">Organizational Information: Governance   </p>",
                 }
               }
               data-testid="txt"
@@ -76,18 +80,18 @@ exports[`Storyshots Components/Extensive/Form/Wizard With Get Form Step Hook 1`]
           <button
             aria-checked="false"
             aria-selected="false"
-            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
+            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
             data-headlessui-state=""
             disabled={true}
-            id="headlessui-tabs-tab-:r3p:"
+            id="headlessui-tabs-tab-:r4k:"
             role="option"
             tabIndex={-1}
           >
             <p
-              className="w-full text-left line-clamp-2 md:pr-6 text-bold-caption-200 with-inner-html"
+              className="w-full text-left line-clamp-2 md:pr-6 text-14-bold with-inner-html"
               dangerouslySetInnerHTML={
                 Object {
-                  "__html": "Step 2<br/> Organizational Information: Past Community Engagement Experience",
+                  "__html": "Step 2<br/> <p className=\\"text-14-light\\">Organizational Information: Past Community Engagement Experience </p>",
                 }
               }
               data-testid="txt"
@@ -96,18 +100,18 @@ exports[`Storyshots Components/Extensive/Form/Wizard With Get Form Step Hook 1`]
           <button
             aria-checked="false"
             aria-selected="false"
-            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
+            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
             data-headlessui-state=""
             disabled={true}
-            id="headlessui-tabs-tab-:r3q:"
+            id="headlessui-tabs-tab-:r4l:"
             role="option"
             tabIndex={-1}
           >
             <p
-              className="w-full text-left line-clamp-2 md:pr-6 text-bold-caption-200 with-inner-html"
+              className="w-full text-left line-clamp-2 md:pr-6 text-14-bold with-inner-html"
               dangerouslySetInnerHTML={
                 Object {
-                  "__html": "Step 3<br/> Organizational Information: Financial History ",
+                  "__html": "Step 3<br/> <p className=\\"text-14-light\\">Organizational Information: Financial History  </p>",
                 }
               }
               data-testid="txt"
@@ -116,18 +120,18 @@ exports[`Storyshots Components/Extensive/Form/Wizard With Get Form Step Hook 1`]
           <button
             aria-checked="false"
             aria-selected="false"
-            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
+            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
             data-headlessui-state=""
             disabled={true}
-            id="headlessui-tabs-tab-:r3r:"
+            id="headlessui-tabs-tab-:r4m:"
             role="option"
             tabIndex={-1}
           >
             <p
-              className="w-full text-left line-clamp-2 md:pr-6 text-bold-caption-200 with-inner-html"
+              className="w-full text-left line-clamp-2 md:pr-6 text-14-bold with-inner-html"
               dangerouslySetInnerHTML={
                 Object {
-                  "__html": "Step 4<br/> Organizational Information: Past Restoration Experience ",
+                  "__html": "Step 4<br/> <p className=\\"text-14-light\\">Organizational Information: Past Restoration Experience  </p>",
                 }
               }
               data-testid="txt"
@@ -136,18 +140,18 @@ exports[`Storyshots Components/Extensive/Form/Wizard With Get Form Step Hook 1`]
           <button
             aria-checked="false"
             aria-selected="false"
-            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
+            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border-b-0 border-neutral-100 bg-neutral-300 text-neutral-900"
             data-headlessui-state=""
             disabled={true}
-            id="headlessui-tabs-tab-:r3s:"
+            id="headlessui-tabs-tab-:r4n:"
             role="option"
             tabIndex={-1}
           >
             <p
-              className="w-full text-left line-clamp-2 md:pr-6 text-bold-caption-200 with-inner-html"
+              className="w-full text-left line-clamp-2 md:pr-6 text-14-bold with-inner-html"
               dangerouslySetInnerHTML={
                 Object {
-                  "__html": "Step 5<br/> Proposed Project Information",
+                  "__html": "Step 5<br/> <p className=\\"text-14-light\\">Proposed Project Information </p>",
                 }
               }
               data-testid="txt"
@@ -156,18 +160,18 @@ exports[`Storyshots Components/Extensive/Form/Wizard With Get Form Step Hook 1`]
           <button
             aria-checked="false"
             aria-selected="false"
-            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border border-b border-neutral-100 bg-neutral-300 text-neutral-900"
+            className="flex min-h-[70px] w-full items-center justify-start py-4 px-6 w-full items-center focus:outline-none disabled:text-neutral-900 border-b border-neutral-100 bg-neutral-300 text-neutral-900"
             data-headlessui-state=""
             disabled={true}
-            id="headlessui-tabs-tab-:r3t:"
+            id="headlessui-tabs-tab-:r4o:"
             role="option"
             tabIndex={-1}
           >
             <p
-              className="w-full text-left line-clamp-2 md:pr-6 text-bold-caption-200 with-inner-html"
+              className="w-full text-left line-clamp-2 md:pr-6 text-14-bold with-inner-html"
               dangerouslySetInnerHTML={
                 Object {
-                  "__html": "Step 6<br/> Additional Information ",
+                  "__html": "Step 6<br/> <p className=\\"text-14-light\\">Additional Information  </p>",
                 }
               }
               data-testid="txt"
@@ -181,767 +185,789 @@ exports[`Storyshots Components/Extensive/Form/Wizard With Get Form Step Hook 1`]
           className="w-full overflow-hidden border border-l-0 border-neutral-100"
         >
           <div
-            className="flex-1 bg-white px-16 pt-8 pb-15 h-[calc(100vh-287px)] overflow-auto"
-            id="step"
+            className="h-[calc(100vh-287px)] overflow-auto"
           >
             <div
-              className="flex items-center justify-between"
+              className="flex-1 bg-white px-16 pt-8 pb-15"
+              id="step"
             >
-              <p
-                className="text-heading-700"
-                data-testid="txt"
+              <div
+                className="flex items-center justify-between"
               >
-                Organizational Information: Governance  
-              </p>
-            </div>
-            <p
-              className="mt-8 text-body-600 with-inner-html"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "Please answer the questions below so that we can understand your organization's mission and structure. If you need more information on any of the questions outlined below, please visit our resources page: <a href=\\"https://terramatchsupport.zendesk.com/hc/en-us/sections/13162666535835-EOI-Resources\\" target=\\"_blank\\">EOI-Resources</a>",
+                <p
+                  className="text-heading-700"
+                  data-testid="txt"
+                >
+                  Organizational Information: Governance  
+                </p>
+              </div>
+              <p
+                className="mt-8 text-body-600 with-inner-html"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "Please answer the questions below so that we can understand your organization's mission and structure. If you need more information on any of the questions outlined below, please visit our resources page: <a href=\\"https://terramatchsupport.zendesk.com/hc/en-us/sections/13162666535835-EOI-Resources\\" target=\\"_blank\\">EOI-Resources</a>",
+                  }
                 }
-              }
-              data-testid="txt"
-            />
-            <div
-              className="my-8 h-[2px] w-full bg-neutral-200"
-            />
-            <ul>
-              <li
-                className="mt-8"
-              >
-                <div
-                  className="space-y-2"
+                data-testid="txt"
+              />
+              <div
+                className="my-8 h-[2px] w-full bg-neutral-200"
+              />
+              <ul>
+                <li
+                  className="mt-8"
                 >
-                  <label
-                    className="mr-2 inline uppercase text-bold-body-300"
-                    data-headlessui-state=""
-                    data-testid="txt"
-                    id="headlessui-listbox-label-:r3u:"
-                    onClick={[Function]}
-                  >
-                    Headquarters address Country 
-                  </label>
                   <div
-                    aria-expanded={false}
-                    aria-haspopup="listbox"
-                    aria-labelledby="headlessui-listbox-label-:r3u: headlessui-listbox-button-:r3v:"
-                    className="flex h-10 items-center justify-between gap-3 rounded-lg py-2 px-3 hover:cursor-pointer border-light"
-                    data-headlessui-state=""
-                    disabled={false}
-                    id="headlessui-listbox-button-:r3v:"
-                    onClick={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyUp={[Function]}
+                    className="space-y-2"
                   >
-                    <span
-                      className="w-full line-clamp-1"
-                    />
+                    <label
+                      className="mr-2 inline uppercase text-bold-body-300"
+                      data-headlessui-state=""
+                      data-testid="txt"
+                      id="headlessui-listbox-label-:r4p:"
+                      onClick={[Function]}
+                    >
+                      Headquarters address Country 
+                    </label>
                     <div
-                      style={
-                        Object {
-                          "height": undefined,
-                          "width": 16,
+                      aria-expanded={false}
+                      aria-haspopup="listbox"
+                      aria-labelledby="headlessui-listbox-label-:r4p: headlessui-listbox-button-:r4q:"
+                      className="flex h-10 items-center justify-between gap-3 rounded-lg py-2 px-3 hover:cursor-pointer border-light"
+                      data-headlessui-state=""
+                      disabled={false}
+                      id="headlessui-listbox-button-:r4q:"
+                      onClick={[Function]}
+                      onKeyDown={[Function]}
+                      onKeyUp={[Function]}
+                    >
+                      <div
+                        className="flex items-center gap-2"
+                      >
+                        <p
+                          className="w-full line-clamp-1 text-14-light"
+                          data-testid="txt"
+                        />
+                      </div>
+                      <div
+                        style={
+                          Object {
+                            "height": undefined,
+                            "width": 16,
+                          }
                         }
-                      }
-                    />
+                      />
+                    </div>
                   </div>
-                </div>
-              </li>
-              <li
-                className="mt-8"
-              >
-                <div
-                  className="space-y-2"
+                </li>
+                <li
+                  className="mt-8"
                 >
-                  <label
-                    className="mr-2 inline uppercase text-bold-body-300"
-                    data-headlessui-state=""
-                    data-testid="txt"
-                    id="headlessui-listbox-label-:r40:"
-                    onClick={[Function]}
-                  >
-                    What Countries is your organisation legally registered in? 
-                  </label>
-                  <p
-                    className="text-light-body-300 with-inner-html"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "Please select the relevant countries where your organization is legally registered to operate.",
-                      }
-                    }
-                    data-testid="txt"
-                  />
                   <div
-                    aria-expanded={false}
-                    aria-haspopup="listbox"
-                    aria-labelledby="headlessui-listbox-label-:r40: headlessui-listbox-button-:r41:"
-                    className="flex h-10 items-center justify-between gap-3 rounded-lg py-2 px-3 hover:cursor-pointer border-light"
-                    data-headlessui-state=""
-                    disabled={false}
-                    id="headlessui-listbox-button-:r41:"
-                    onClick={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyUp={[Function]}
+                    className="space-y-2"
                   >
-                    <span
-                      className="w-full line-clamp-1"
-                    />
-                    <div
-                      style={
+                    <label
+                      className="mr-2 inline uppercase text-bold-body-300"
+                      data-headlessui-state=""
+                      data-testid="txt"
+                      id="headlessui-listbox-label-:r4r:"
+                      onClick={[Function]}
+                    >
+                      What Countries is your organisation legally registered in? 
+                    </label>
+                    <p
+                      className="text-body-400 with-inner-html"
+                      dangerouslySetInnerHTML={
                         Object {
-                          "height": undefined,
-                          "width": 16,
+                          "__html": "Please select the relevant countries where your organization is legally registered to operate.",
                         }
                       }
+                      data-testid="txt"
                     />
+                    <div
+                      aria-expanded={false}
+                      aria-haspopup="listbox"
+                      aria-labelledby="headlessui-listbox-label-:r4r: headlessui-listbox-button-:r4s:"
+                      className="flex h-10 items-center justify-between gap-3 rounded-lg py-2 px-3 hover:cursor-pointer border-light"
+                      data-headlessui-state=""
+                      disabled={false}
+                      id="headlessui-listbox-button-:r4s:"
+                      onClick={[Function]}
+                      onKeyDown={[Function]}
+                      onKeyUp={[Function]}
+                    >
+                      <div
+                        className="flex items-center gap-2"
+                      >
+                        <p
+                          className="w-full line-clamp-1 text-14-light"
+                          data-testid="txt"
+                        />
+                      </div>
+                      <div
+                        style={
+                          Object {
+                            "height": undefined,
+                            "width": 16,
+                          }
+                        }
+                      />
+                    </div>
                   </div>
-                </div>
-              </li>
-              <li
-                className="mt-8"
-              >
-                <div
-                  className="relative space-y-2"
+                </li>
+                <li
+                  className="mt-8"
                 >
-                  <label
-                    className="mr-2 inline uppercase text-bold-body-300"
-                    data-testid="txt"
-                    htmlFor=":r42:"
-                  >
-                    Organization Mission *
-                  </label>
-                  <p
-                    className="text-light-body-300 with-inner-html"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "Please describe your organization's mission.",
-                      }
-                    }
-                    data-testid="txt"
-                    id=":r42:-description"
-                  />
-                  <textarea
-                    className="min-h-[150px] w-full rounded-lg px-3 py-2 focus:border-primary-500 outline-none transition-all duration-300 ease-in-out focus:ring-transparent border-light "
-                    id=":r42:"
-                    maxLength={300}
-                    name="d64877a6-fc33-4bd8-9f75-43e77a5112ab"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onChangeCapture={[Function]}
-                  />
-                </div>
-              </li>
-              <li
-                className="mt-8"
-              >
-                <div
-                  className="relative space-y-2"
-                >
-                  <label
-                    className="mr-2 inline uppercase text-bold-body-300"
-                    data-testid="txt"
-                    htmlFor=":r43:"
-                  >
-                    On what date was your organisation founded? 
-                  </label>
                   <div
-                    className="relative"
+                    className="relative space-y-2"
                   >
-                    <input
-                      aria-describedby=":r43:-description"
-                      aria-invalid={false}
-                      className="w-full outline-none transition-all duration-300 ease-in-out focus:ring-transparent px-3 py-[9px] rounded-lg focus:border-primary-500 border border-neutral-400"
-                      id=":r43:"
-                      name="ced1d792-2f5f-40b0-8686-86e048c98406"
+                    <label
+                      className="mr-2 inline uppercase text-bold-body-300"
+                      data-testid="txt"
+                      htmlFor=":r4t:"
+                    >
+                      Organization Mission *
+                    </label>
+                    <p
+                      className="text-body-400 with-inner-html"
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "Please describe your organization's mission.",
+                        }
+                      }
+                      data-testid="txt"
+                      id=":r4t:-description"
+                    />
+                    <textarea
+                      className="min-h-[150px] w-full rounded-lg px-3 py-2 focus:border-primary-500 outline-none transition-all duration-300 ease-in-out focus:ring-transparent border-light "
+                      id=":r4t:"
+                      maxLength={300}
+                      name="d64877a6-fc33-4bd8-9f75-43e77a5112ab"
                       onBlur={[Function]}
                       onChange={[Function]}
                       onChangeCapture={[Function]}
-                      type="date"
+                      value=""
                     />
                   </div>
-                </div>
-              </li>
-              <li
-                className="mt-8"
-              >
-                <div
-                  className="space-y-2"
+                </li>
+                <li
+                  className="mt-8"
                 >
-                  <label
-                    className="mr-2 inline uppercase text-bold-body-300"
-                    data-headlessui-state=""
-                    data-testid="txt"
-                    id="headlessui-listbox-label-:r44:"
-                    onClick={[Function]}
-                  >
-                    In what languages can your organisation communicate? *
-                  </label>
-                  <p
-                    className="text-light-body-300 with-inner-html"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "Please select as many as apply. TerraMatch is available only in the languages listed below.",
-                      }
-                    }
-                    data-testid="txt"
-                  />
                   <div
-                    aria-expanded={false}
-                    aria-haspopup="listbox"
-                    aria-labelledby="headlessui-listbox-label-:r44: headlessui-listbox-button-:r45:"
-                    className="flex h-10 items-center justify-between gap-3 rounded-lg py-2 px-3 hover:cursor-pointer border-light"
-                    data-headlessui-state=""
-                    disabled={false}
-                    id="headlessui-listbox-button-:r45:"
-                    onClick={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyUp={[Function]}
+                    className="relative space-y-2"
                   >
-                    <span
-                      className="w-full line-clamp-1"
-                    />
+                    <label
+                      className="mr-2 inline uppercase text-bold-body-300"
+                      data-testid="txt"
+                      htmlFor=":r4u:"
+                    >
+                      On what date was your organisation founded? 
+                    </label>
                     <div
-                      style={
+                      className="relative"
+                    >
+                      <input
+                        aria-describedby=":r4u:-description"
+                        aria-invalid={false}
+                        className="w-full outline-none transition-all duration-300 ease-in-out focus:ring-transparent px-3 py-[9px] rounded-lg focus:border-primary-500 border border-neutral-200"
+                        id=":r4u:"
+                        name="ced1d792-2f5f-40b0-8686-86e048c98406"
+                        onBlur={[Function]}
+                        onChangeCapture={[Function]}
+                        type="date"
+                      />
+                    </div>
+                  </div>
+                </li>
+                <li
+                  className="mt-8"
+                >
+                  <div
+                    className="space-y-2"
+                  >
+                    <label
+                      className="mr-2 inline uppercase text-bold-body-300"
+                      data-headlessui-state=""
+                      data-testid="txt"
+                      id="headlessui-listbox-label-:r4v:"
+                      onClick={[Function]}
+                    >
+                      In what languages can your organisation communicate? *
+                    </label>
+                    <p
+                      className="text-body-400 with-inner-html"
+                      dangerouslySetInnerHTML={
                         Object {
-                          "height": undefined,
-                          "width": 16,
+                          "__html": "Please select as many as apply. TerraMatch is available only in the languages listed below.",
                         }
                       }
+                      data-testid="txt"
                     />
+                    <div
+                      aria-expanded={false}
+                      aria-haspopup="listbox"
+                      aria-labelledby="headlessui-listbox-label-:r4v: headlessui-listbox-button-:r50:"
+                      className="flex h-10 items-center justify-between gap-3 rounded-lg py-2 px-3 hover:cursor-pointer border-light"
+                      data-headlessui-state=""
+                      disabled={false}
+                      id="headlessui-listbox-button-:r50:"
+                      onClick={[Function]}
+                      onKeyDown={[Function]}
+                      onKeyUp={[Function]}
+                    >
+                      <div
+                        className="flex items-center gap-2"
+                      >
+                        <div
+                          className="min-h-[8px] min-w-[8px] rounded-full "
+                        />
+                        <p
+                          className="w-full line-clamp-1 text-14-light"
+                          data-testid="txt"
+                        />
+                      </div>
+                      <div
+                        style={
+                          Object {
+                            "height": undefined,
+                            "width": 16,
+                          }
+                        }
+                      />
+                    </div>
                   </div>
-                </div>
-              </li>
-              <li
-                className="mt-8"
-              >
-                <div
-                  className="relative space-y-2"
+                </li>
+                <li
+                  className="mt-8"
                 >
-                  <label
-                    className="mr-2 inline uppercase text-bold-body-300"
-                    data-testid="txt"
-                    htmlFor=":r46:"
-                  >
-                    What interventions do you intend to use to restore land? 
-                  </label>
-                  <p
-                    className="text-light-body-300 with-inner-html"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "Please indicate all of the restoration interventions you have used in previous projects. If you intend to use multiple different restoration interventions, check all that apply. ",
-                      }
-                    }
-                    data-testid="txt"
-                    id=":r46:-description"
-                  />
                   <div
-                    className="mx-auto !mt-4 flex max-w-[573px] flex-wrap justify-center gap-4"
+                    className="relative space-y-2"
                   >
+                    <label
+                      className="mr-2 inline uppercase text-bold-body-300"
+                      data-testid="txt"
+                      htmlFor=":r51:"
+                    >
+                      What interventions do you intend to use to restore land? 
+                    </label>
+                    <p
+                      className="text-body-400 with-inner-html"
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "Please indicate all of the restoration interventions you have used in previous projects. If you intend to use multiple different restoration interventions, check all that apply. ",
+                        }
+                      }
+                      data-testid="txt"
+                      id=":r51:-description"
+                    />
                     <div
-                      className="flex-row-reverse justify-end gap-3 relative flex items-start gap-4"
+                      className="mx-auto !mt-4 flex max-w-[573px] flex-wrap justify-center gap-4"
                     >
-                      <label
-                        className="w-full"
-                        htmlFor=":r47:"
+                      <div
+                        className="flex-row-reverse justify-end gap-3"
                       >
-                        <div
-                          className="flex flex-col items-center gap-2 cursor-pointer"
+                        <label
+                          className="w-full"
+                          htmlFor=":r52:"
                         >
                           <div
-                            className="border-4 border-neutral-900 aspect-square h-[6.375rem] rounded-lg bg-cover bg-center transition-all duration-200"
-                            style={
-                              Object {
-                                "backgroundImage": "url('https://cdn.britannica.com/98/214598-050-9879F2FA/giant-sequoia-tree-Sequoia-National-Park-California.jpg')",
-                              }
-                            }
-                          />
-                          <p
-                            className="max-w-[96px] text-center leading-4 text-light-body-300"
-                            data-testid="txt"
+                            className="flex flex-col items-center gap-2 cursor-pointer"
                           >
-                            Agroforestry
-                          </p>
-                        </div>
-                      </label>
-                      <input
-                        checked={false}
-                        className="h-5 w-5 cursor-pointer rounded-sm border-neutral-400 transition-all duration-300 checked:text-primary-500 focus:ring-transparent disabled:bg-neutral-400 absolute opacity-0"
-                        id=":r47:"
-                        name=""
-                        onClick={[Function]}
-                        type="checkbox"
-                      />
-                    </div>
-                    <div
-                      className="flex-row-reverse justify-end gap-3 relative flex items-start gap-4"
-                    >
-                      <label
-                        className="w-full"
-                        htmlFor=":r48:"
+                            <div
+                              className="border-4 border-neutral-900 aspect-square h-[6.375rem] rounded-lg bg-cover bg-center transition-all duration-200"
+                              style={
+                                Object {
+                                  "backgroundImage": "url('https://cdn.britannica.com/98/214598-050-9879F2FA/giant-sequoia-tree-Sequoia-National-Park-California.jpg')",
+                                }
+                              }
+                            />
+                            <p
+                              className="max-w-[96px] text-center leading-4 text-light-body-300"
+                              data-testid="txt"
+                            >
+                              Agroforestry
+                            </p>
+                          </div>
+                        </label>
+                        <input
+                          checked={false}
+                          className="h-4 w-4 cursor-pointer rounded-sm border-neutral-400 transition-all duration-300 checked:text-primary-500 focus:ring-transparent disabled:bg-neutral-400 lg:h-5 lg:w-5 absolute opacity-0"
+                          id=":r52:"
+                          name=""
+                          onClick={[Function]}
+                          type="checkbox"
+                        />
+                      </div>
+                      <div
+                        className="flex-row-reverse justify-end gap-3"
                       >
-                        <div
-                          className="flex flex-col items-center gap-2 cursor-pointer"
+                        <label
+                          className="w-full"
+                          htmlFor=":r53:"
                         >
                           <div
-                            className="border-4 border-neutral-900 aspect-square h-[6.375rem] rounded-lg bg-cover bg-center transition-all duration-200"
-                            style={
-                              Object {
-                                "backgroundImage": "url('https://cdn.britannica.com/98/214598-050-9879F2FA/giant-sequoia-tree-Sequoia-National-Park-California.jpg')",
-                              }
-                            }
-                          />
-                          <p
-                            className="max-w-[96px] text-center leading-4 text-light-body-300"
-                            data-testid="txt"
+                            className="flex flex-col items-center gap-2 cursor-pointer"
                           >
-                            Applied Nucleation
-                          </p>
-                        </div>
-                      </label>
-                      <input
-                        checked={false}
-                        className="h-5 w-5 cursor-pointer rounded-sm border-neutral-400 transition-all duration-300 checked:text-primary-500 focus:ring-transparent disabled:bg-neutral-400 absolute opacity-0"
-                        id=":r48:"
-                        name=""
-                        onClick={[Function]}
-                        type="checkbox"
-                      />
-                    </div>
-                    <div
-                      className="flex-row-reverse justify-end gap-3 relative flex items-start gap-4"
-                    >
-                      <label
-                        className="w-full"
-                        htmlFor=":r49:"
+                            <div
+                              className="border-4 border-neutral-900 aspect-square h-[6.375rem] rounded-lg bg-cover bg-center transition-all duration-200"
+                              style={
+                                Object {
+                                  "backgroundImage": "url('https://cdn.britannica.com/98/214598-050-9879F2FA/giant-sequoia-tree-Sequoia-National-Park-California.jpg')",
+                                }
+                              }
+                            />
+                            <p
+                              className="max-w-[96px] text-center leading-4 text-light-body-300"
+                              data-testid="txt"
+                            >
+                              Applied Nucleation
+                            </p>
+                          </div>
+                        </label>
+                        <input
+                          checked={false}
+                          className="h-4 w-4 cursor-pointer rounded-sm border-neutral-400 transition-all duration-300 checked:text-primary-500 focus:ring-transparent disabled:bg-neutral-400 lg:h-5 lg:w-5 absolute opacity-0"
+                          id=":r53:"
+                          name=""
+                          onClick={[Function]}
+                          type="checkbox"
+                        />
+                      </div>
+                      <div
+                        className="flex-row-reverse justify-end gap-3"
                       >
-                        <div
-                          className="flex flex-col items-center gap-2 cursor-pointer"
+                        <label
+                          className="w-full"
+                          htmlFor=":r54:"
                         >
                           <div
-                            className="border-4 border-neutral-900 aspect-square h-[6.375rem] rounded-lg bg-cover bg-center transition-all duration-200"
-                            style={
-                              Object {
-                                "backgroundImage": "url('https://cdn.britannica.com/98/214598-050-9879F2FA/giant-sequoia-tree-Sequoia-National-Park-California.jpg')",
-                              }
-                            }
-                          />
-                          <p
-                            className="max-w-[96px] text-center leading-4 text-light-body-300"
-                            data-testid="txt"
+                            className="flex flex-col items-center gap-2 cursor-pointer"
                           >
-                            Assisted Natural Regeneration
-                          </p>
-                        </div>
-                      </label>
-                      <input
-                        checked={false}
-                        className="h-5 w-5 cursor-pointer rounded-sm border-neutral-400 transition-all duration-300 checked:text-primary-500 focus:ring-transparent disabled:bg-neutral-400 absolute opacity-0"
-                        id=":r49:"
-                        name=""
-                        onClick={[Function]}
-                        type="checkbox"
-                      />
-                    </div>
-                    <div
-                      className="flex-row-reverse justify-end gap-3 relative flex items-start gap-4"
-                    >
-                      <label
-                        className="w-full"
-                        htmlFor=":r4a:"
+                            <div
+                              className="border-4 border-neutral-900 aspect-square h-[6.375rem] rounded-lg bg-cover bg-center transition-all duration-200"
+                              style={
+                                Object {
+                                  "backgroundImage": "url('https://cdn.britannica.com/98/214598-050-9879F2FA/giant-sequoia-tree-Sequoia-National-Park-California.jpg')",
+                                }
+                              }
+                            />
+                            <p
+                              className="max-w-[96px] text-center leading-4 text-light-body-300"
+                              data-testid="txt"
+                            >
+                              Assisted Natural Regeneration
+                            </p>
+                          </div>
+                        </label>
+                        <input
+                          checked={false}
+                          className="h-4 w-4 cursor-pointer rounded-sm border-neutral-400 transition-all duration-300 checked:text-primary-500 focus:ring-transparent disabled:bg-neutral-400 lg:h-5 lg:w-5 absolute opacity-0"
+                          id=":r54:"
+                          name=""
+                          onClick={[Function]}
+                          type="checkbox"
+                        />
+                      </div>
+                      <div
+                        className="flex-row-reverse justify-end gap-3"
                       >
-                        <div
-                          className="flex flex-col items-center gap-2 cursor-pointer"
+                        <label
+                          className="w-full"
+                          htmlFor=":r55:"
                         >
                           <div
-                            className="border-4 border-neutral-900 aspect-square h-[6.375rem] rounded-lg bg-cover bg-center transition-all duration-200"
-                            style={
-                              Object {
-                                "backgroundImage": "url('https://cdn.britannica.com/98/214598-050-9879F2FA/giant-sequoia-tree-Sequoia-National-Park-California.jpg')",
-                              }
-                            }
-                          />
-                          <p
-                            className="max-w-[96px] text-center leading-4 text-light-body-300"
-                            data-testid="txt"
+                            className="flex flex-col items-center gap-2 cursor-pointer"
                           >
-                            Direct Seeding
-                          </p>
-                        </div>
-                      </label>
-                      <input
-                        checked={false}
-                        className="h-5 w-5 cursor-pointer rounded-sm border-neutral-400 transition-all duration-300 checked:text-primary-500 focus:ring-transparent disabled:bg-neutral-400 absolute opacity-0"
-                        id=":r4a:"
-                        name=""
-                        onClick={[Function]}
-                        type="checkbox"
-                      />
-                    </div>
-                    <div
-                      className="flex-row-reverse justify-end gap-3 relative flex items-start gap-4"
-                    >
-                      <label
-                        className="w-full"
-                        htmlFor=":r4b:"
+                            <div
+                              className="border-4 border-neutral-900 aspect-square h-[6.375rem] rounded-lg bg-cover bg-center transition-all duration-200"
+                              style={
+                                Object {
+                                  "backgroundImage": "url('https://cdn.britannica.com/98/214598-050-9879F2FA/giant-sequoia-tree-Sequoia-National-Park-California.jpg')",
+                                }
+                              }
+                            />
+                            <p
+                              className="max-w-[96px] text-center leading-4 text-light-body-300"
+                              data-testid="txt"
+                            >
+                              Direct Seeding
+                            </p>
+                          </div>
+                        </label>
+                        <input
+                          checked={false}
+                          className="h-4 w-4 cursor-pointer rounded-sm border-neutral-400 transition-all duration-300 checked:text-primary-500 focus:ring-transparent disabled:bg-neutral-400 lg:h-5 lg:w-5 absolute opacity-0"
+                          id=":r55:"
+                          name=""
+                          onClick={[Function]}
+                          type="checkbox"
+                        />
+                      </div>
+                      <div
+                        className="flex-row-reverse justify-end gap-3"
                       >
-                        <div
-                          className="flex flex-col items-center gap-2 cursor-pointer"
+                        <label
+                          className="w-full"
+                          htmlFor=":r56:"
                         >
                           <div
-                            className="border-4 border-neutral-900 aspect-square h-[6.375rem] rounded-lg bg-cover bg-center transition-all duration-200"
-                            style={
-                              Object {
-                                "backgroundImage": "url('https://cdn.britannica.com/98/214598-050-9879F2FA/giant-sequoia-tree-Sequoia-National-Park-California.jpg')",
-                              }
-                            }
-                          />
-                          <p
-                            className="max-w-[96px] text-center leading-4 text-light-body-300"
-                            data-testid="txt"
+                            className="flex flex-col items-center gap-2 cursor-pointer"
                           >
-                            Enrichment Planting
-                          </p>
-                        </div>
-                      </label>
-                      <input
-                        checked={false}
-                        className="h-5 w-5 cursor-pointer rounded-sm border-neutral-400 transition-all duration-300 checked:text-primary-500 focus:ring-transparent disabled:bg-neutral-400 absolute opacity-0"
-                        id=":r4b:"
-                        name=""
-                        onClick={[Function]}
-                        type="checkbox"
-                      />
-                    </div>
-                    <div
-                      className="flex-row-reverse justify-end gap-3 relative flex items-start gap-4"
-                    >
-                      <label
-                        className="w-full"
-                        htmlFor=":r4c:"
+                            <div
+                              className="border-4 border-neutral-900 aspect-square h-[6.375rem] rounded-lg bg-cover bg-center transition-all duration-200"
+                              style={
+                                Object {
+                                  "backgroundImage": "url('https://cdn.britannica.com/98/214598-050-9879F2FA/giant-sequoia-tree-Sequoia-National-Park-California.jpg')",
+                                }
+                              }
+                            />
+                            <p
+                              className="max-w-[96px] text-center leading-4 text-light-body-300"
+                              data-testid="txt"
+                            >
+                              Enrichment Planting
+                            </p>
+                          </div>
+                        </label>
+                        <input
+                          checked={false}
+                          className="h-4 w-4 cursor-pointer rounded-sm border-neutral-400 transition-all duration-300 checked:text-primary-500 focus:ring-transparent disabled:bg-neutral-400 lg:h-5 lg:w-5 absolute opacity-0"
+                          id=":r56:"
+                          name=""
+                          onClick={[Function]}
+                          type="checkbox"
+                        />
+                      </div>
+                      <div
+                        className="flex-row-reverse justify-end gap-3"
                       >
-                        <div
-                          className="flex flex-col items-center gap-2 cursor-pointer"
+                        <label
+                          className="w-full"
+                          htmlFor=":r57:"
                         >
                           <div
-                            className="border-4 border-neutral-900 aspect-square h-[6.375rem] rounded-lg bg-cover bg-center transition-all duration-200"
-                            style={
-                              Object {
-                                "backgroundImage": "url('https://cdn.britannica.com/98/214598-050-9879F2FA/giant-sequoia-tree-Sequoia-National-Park-California.jpg')",
+                            className="flex flex-col items-center gap-2 cursor-pointer"
+                          >
+                            <div
+                              className="border-4 border-neutral-900 aspect-square h-[6.375rem] rounded-lg bg-cover bg-center transition-all duration-200"
+                              style={
+                                Object {
+                                  "backgroundImage": "url('https://cdn.britannica.com/98/214598-050-9879F2FA/giant-sequoia-tree-Sequoia-National-Park-California.jpg')",
+                                }
                               }
-                            }
-                          />
-                          <p
-                            className="max-w-[96px] text-center leading-4 text-light-body-300"
-                            data-testid="txt"
+                            />
+                            <p
+                              className="max-w-[96px] text-center leading-4 text-light-body-300"
+                              data-testid="txt"
+                            >
+                              Mangrove Restoration
+                            </p>
+                          </div>
+                        </label>
+                        <input
+                          checked={false}
+                          className="h-4 w-4 cursor-pointer rounded-sm border-neutral-400 transition-all duration-300 checked:text-primary-500 focus:ring-transparent disabled:bg-neutral-400 lg:h-5 lg:w-5 absolute opacity-0"
+                          id=":r57:"
+                          name=""
+                          onClick={[Function]}
+                          type="checkbox"
+                        />
+                      </div>
+                      <div
+                        className="flex-row-reverse justify-end gap-3"
+                      >
+                        <label
+                          className="w-full"
+                          htmlFor=":r58:"
+                        >
+                          <div
+                            className="flex flex-col items-center gap-2 cursor-pointer"
                           >
-                            Mangrove Restoration
-                          </p>
-                        </div>
-                      </label>
-                      <input
-                        checked={false}
-                        className="h-5 w-5 cursor-pointer rounded-sm border-neutral-400 transition-all duration-300 checked:text-primary-500 focus:ring-transparent disabled:bg-neutral-400 absolute opacity-0"
-                        id=":r4c:"
-                        name=""
-                        onClick={[Function]}
-                        type="checkbox"
-                      />
-                    </div>
-                    <div
-                      className="flex-row-reverse justify-end gap-3 relative flex items-start gap-4"
-                    >
-                      <label
-                        className="w-full"
-                        htmlFor=":r4d:"
+                            <div
+                              className="border-4 border-neutral-900 aspect-square h-[6.375rem] rounded-lg bg-cover bg-center transition-all duration-200"
+                              style={
+                                Object {
+                                  "backgroundImage": "url('https://cdn.britannica.com/98/214598-050-9879F2FA/giant-sequoia-tree-Sequoia-National-Park-California.jpg')",
+                                }
+                              }
+                            />
+                            <p
+                              className="max-w-[96px] text-center leading-4 text-light-body-300"
+                              data-testid="txt"
+                            >
+                              Reforestation
+                            </p>
+                          </div>
+                        </label>
+                        <input
+                          checked={false}
+                          className="h-4 w-4 cursor-pointer rounded-sm border-neutral-400 transition-all duration-300 checked:text-primary-500 focus:ring-transparent disabled:bg-neutral-400 lg:h-5 lg:w-5 absolute opacity-0"
+                          id=":r58:"
+                          name=""
+                          onClick={[Function]}
+                          type="checkbox"
+                        />
+                      </div>
+                      <div
+                        className="flex-row-reverse justify-end gap-3"
                       >
-                        <div
-                          className="flex flex-col items-center gap-2 cursor-pointer"
+                        <label
+                          className="w-full"
+                          htmlFor=":r59:"
                         >
                           <div
-                            className="border-4 border-neutral-900 aspect-square h-[6.375rem] rounded-lg bg-cover bg-center transition-all duration-200"
-                            style={
-                              Object {
-                                "backgroundImage": "url('https://cdn.britannica.com/98/214598-050-9879F2FA/giant-sequoia-tree-Sequoia-National-Park-California.jpg')",
+                            className="flex flex-col items-center gap-2 cursor-pointer"
+                          >
+                            <div
+                              className="border-4 border-neutral-900 aspect-square h-[6.375rem] rounded-lg bg-cover bg-center transition-all duration-200"
+                              style={
+                                Object {
+                                  "backgroundImage": "url('https://cdn.britannica.com/98/214598-050-9879F2FA/giant-sequoia-tree-Sequoia-National-Park-California.jpg')",
+                                }
                               }
-                            }
-                          />
-                          <p
-                            className="max-w-[96px] text-center leading-4 text-light-body-300"
-                            data-testid="txt"
+                            />
+                            <p
+                              className="max-w-[96px] text-center leading-4 text-light-body-300"
+                              data-testid="txt"
+                            >
+                              Riparian Restoration
+                            </p>
+                          </div>
+                        </label>
+                        <input
+                          checked={false}
+                          className="h-4 w-4 cursor-pointer rounded-sm border-neutral-400 transition-all duration-300 checked:text-primary-500 focus:ring-transparent disabled:bg-neutral-400 lg:h-5 lg:w-5 absolute opacity-0"
+                          id=":r59:"
+                          name=""
+                          onClick={[Function]}
+                          type="checkbox"
+                        />
+                      </div>
+                      <div
+                        className="flex-row-reverse justify-end gap-3"
+                      >
+                        <label
+                          className="w-full"
+                          htmlFor=":r5a:"
+                        >
+                          <div
+                            className="flex flex-col items-center gap-2 cursor-pointer"
                           >
-                            Reforestation
-                          </p>
-                        </div>
-                      </label>
-                      <input
-                        checked={false}
-                        className="h-5 w-5 cursor-pointer rounded-sm border-neutral-400 transition-all duration-300 checked:text-primary-500 focus:ring-transparent disabled:bg-neutral-400 absolute opacity-0"
-                        id=":r4d:"
-                        name=""
-                        onClick={[Function]}
-                        type="checkbox"
-                      />
+                            <div
+                              className="border-4 border-neutral-900 aspect-square h-[6.375rem] rounded-lg bg-cover bg-center transition-all duration-200"
+                              style={
+                                Object {
+                                  "backgroundImage": "url('https://cdn.britannica.com/98/214598-050-9879F2FA/giant-sequoia-tree-Sequoia-National-Park-California.jpg')",
+                                }
+                              }
+                            />
+                            <p
+                              className="max-w-[96px] text-center leading-4 text-light-body-300"
+                              data-testid="txt"
+                            >
+                              Silvopasture
+                            </p>
+                          </div>
+                        </label>
+                        <input
+                          checked={false}
+                          className="h-4 w-4 cursor-pointer rounded-sm border-neutral-400 transition-all duration-300 checked:text-primary-500 focus:ring-transparent disabled:bg-neutral-400 lg:h-5 lg:w-5 absolute opacity-0"
+                          id=":r5a:"
+                          name=""
+                          onClick={[Function]}
+                          type="checkbox"
+                        />
+                      </div>
                     </div>
+                  </div>
+                </li>
+                <li
+                  className="mt-8"
+                >
+                  <div
+                    className="relative space-y-2"
+                  >
+                    <label
+                      className="mr-2 inline uppercase text-bold-body-300"
+                      data-testid="txt"
+                      htmlFor=":r5b:"
+                    >
+                      Please provide at least two letters of reference 
+                    </label>
+                    <p
+                      className="text-body-400 with-inner-html"
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "Reference letters could come from a verifiable former donor or investor, a former or current project partner, a traditional or community leader, or any other individual or organization that can vouch for your work. We highly recommend that applicants submit an endorsement letter from a local or national government agency. Upload only .pdf files less than 5mb.",
+                        }
+                      }
+                      data-testid="txt"
+                      id=":r5b:-description"
+                    />
                     <div
-                      className="flex-row-reverse justify-end gap-3 relative flex items-start gap-4"
+                      className="bg-white border-dashed-2 relative cursor-pointer rounded-xl p-10"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onDragEnter={[Function]}
+                      onDragLeave={[Function]}
+                      onDragOver={[Function]}
+                      onDrop={[Function]}
+                      onFocus={[Function]}
+                      onKeyDown={[Function]}
+                      role="presentation"
+                      tabIndex={0}
                     >
-                      <label
-                        className="w-full"
-                        htmlFor=":r4e:"
+                      <input
+                        accept="application/pdf"
+                        hidden={true}
+                        id=":r5b:"
+                        multiple={true}
+                        onChange={[Function]}
+                        onClick={[Function]}
+                        style={
+                          Object {
+                            "display": "none",
+                          }
+                        }
+                        tabIndex={-1}
+                        type="file"
+                      />
+                      <div
+                        className="m-auto flex w-fit items-center justify-center gap-3"
                       >
                         <div
-                          className="flex flex-col items-center gap-2 cursor-pointer"
+                          className="bg-primary-100 flex h-15 w-15 items-center justify-center rounded-lg bg-cover bg-no-repeat"
+                          style={Object {}}
                         >
                           <div
-                            className="border-4 border-neutral-900 aspect-square h-[6.375rem] rounded-lg bg-cover bg-center transition-all duration-200"
                             style={
                               Object {
-                                "backgroundImage": "url('https://cdn.britannica.com/98/214598-050-9879F2FA/giant-sequoia-tree-Sequoia-National-Park-California.jpg')",
+                                "height": undefined,
+                                "width": 24,
                               }
                             }
                           />
+                        </div>
+                        <div
+                          className="flex-1"
+                        >
                           <p
-                            className="max-w-[96px] text-center leading-4 text-light-body-300"
+                            className="mb-1 line-clamp-1 text-bold-subtitle-400"
                             data-testid="txt"
+                            title="Upload File (File format: PDF max. 10MB)"
                           >
-                            Riparian Restoration
+                            Upload File (File format: PDF max. 10MB)
                           </p>
-                        </div>
-                      </label>
-                      <input
-                        checked={false}
-                        className="h-5 w-5 cursor-pointer rounded-sm border-neutral-400 transition-all duration-300 checked:text-primary-500 focus:ring-transparent disabled:bg-neutral-400 absolute opacity-0"
-                        id=":r4e:"
-                        name=""
-                        onClick={[Function]}
-                        type="checkbox"
-                      />
-                    </div>
-                    <div
-                      className="flex-row-reverse justify-end gap-3 relative flex items-start gap-4"
-                    >
-                      <label
-                        className="w-full"
-                        htmlFor=":r4f:"
-                      >
-                        <div
-                          className="flex flex-col items-center gap-2 cursor-pointer"
-                        >
-                          <div
-                            className="border-4 border-neutral-900 aspect-square h-[6.375rem] rounded-lg bg-cover bg-center transition-all duration-200"
-                            style={
+                          <p
+                            className="line-clamp-1 text-light-body-300 with-inner-html"
+                            dangerouslySetInnerHTML={
                               Object {
-                                "backgroundImage": "url('https://cdn.britannica.com/98/214598-050-9879F2FA/giant-sequoia-tree-Sequoia-National-Park-California.jpg')",
+                                "__html": "Drag and drop or <span className=\\"text-primary underline\\">browse your device</span>",
                               }
                             }
-                          />
-                          <p
-                            className="max-w-[96px] text-center leading-4 text-light-body-300"
                             data-testid="txt"
-                          >
-                            Silvopasture
-                          </p>
+                            title="Drag and drop or <span className=\\"text-primary underline\\">browse your device</span>"
+                          />
                         </div>
-                      </label>
-                      <input
-                        checked={false}
-                        className="h-5 w-5 cursor-pointer rounded-sm border-neutral-400 transition-all duration-300 checked:text-primary-500 focus:ring-transparent disabled:bg-neutral-400 absolute opacity-0"
-                        id=":r4f:"
-                        name=""
-                        onClick={[Function]}
-                        type="checkbox"
-                      />
+                      </div>
                     </div>
                   </div>
-                </div>
-              </li>
-              <li
-                className="mt-8"
-              >
-                <div
-                  className="relative space-y-2"
-                >
-                  <label
-                    className="mr-2 inline uppercase text-bold-body-300"
-                    data-testid="txt"
-                    htmlFor=":r4g:"
-                  >
-                    Please provide at least two letters of reference 
-                  </label>
-                  <p
-                    className="text-light-body-300 with-inner-html"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "Reference letters could come from a verifiable former donor or investor, a former or current project partner, a traditional or community leader, or any other individual or organization that can vouch for your work. We highly recommend that applicants submit an endorsement letter from a local or national government agency. Upload only .pdf files less than 5mb.",
-                      }
-                    }
-                    data-testid="txt"
-                    id=":r4g:-description"
+                  <div
+                    className="mt-8 flex flex-col items-center justify-center gap-8"
                   />
+                </li>
+                <li
+                  className="mt-8"
+                >
                   <div
-                    className="border-dashed-2 relative cursor-pointer rounded-xl p-10 bg-white"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onDragEnter={[Function]}
-                    onDragLeave={[Function]}
-                    onDragOver={[Function]}
-                    onDrop={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    role="presentation"
-                    tabIndex={0}
+                    className="relative space-y-2"
                   >
-                    <input
-                      accept="application/pdf"
-                      hidden={true}
-                      id=":r4g:"
-                      multiple={true}
-                      onChange={[Function]}
-                      onClick={[Function]}
-                      style={
-                        Object {
-                          "display": "none",
-                        }
-                      }
-                      tabIndex={-1}
-                      type="file"
-                    />
+                    <label
+                      className="mr-2 inline uppercase text-bold-body-300"
+                      data-testid="txt"
+                      htmlFor=":r5c:"
+                    >
+                      Organization Twitter URL(optional) 
+                    </label>
                     <div
-                      className="m-auto flex w-fit items-center justify-center gap-3"
+                      className="relative"
                     >
-                      <div
-                        className="bg-primary-100 flex h-15 w-15 items-center justify-center rounded-lg bg-cover bg-no-repeat"
-                        style={Object {}}
-                      >
-                        <div
-                          style={
-                            Object {
-                              "height": 32,
-                              "width": 24,
-                            }
-                          }
-                        />
-                      </div>
-                      <div
-                        className="flex-1"
-                      >
-                        <p
-                          className="mb-1 line-clamp-1 text-bold-subtitle-400"
-                          data-testid="txt"
-                          title="Upload File (File format: PDF max. 10MB)"
-                        >
-                          Upload File (File format: PDF max. 10MB)
-                        </p>
-                        <p
-                          className="line-clamp-1 text-light-body-300 with-inner-html"
-                          dangerouslySetInnerHTML={
-                            Object {
-                              "__html": "Drag and drop or <span className=\\"text-primary underline\\">browse your device</span>",
-                            }
-                          }
-                          data-testid="txt"
-                          title="Drag and drop or <span className=\\"text-primary underline\\">browse your device</span>"
-                        />
-                      </div>
+                      <input
+                        aria-describedby=":r5c:-description"
+                        aria-invalid={false}
+                        className="w-full outline-none transition-all duration-300 ease-in-out focus:ring-transparent px-3 py-[9px] rounded-lg focus:border-primary-500 border border-neutral-200"
+                        id=":r5c:"
+                        name="981edb54-739e-4971-b078-4e2a971d9ffd"
+                        onBlur={[Function]}
+                        onChangeCapture={[Function]}
+                        type="url"
+                      />
                     </div>
                   </div>
-                </div>
-                <div
-                  className="mt-8 flex flex-col items-center justify-center gap-8"
-                />
-              </li>
-              <li
-                className="mt-8"
-              >
-                <div
-                  className="relative space-y-2"
+                </li>
+                <li
+                  className="mt-8"
                 >
-                  <label
-                    className="mr-2 inline uppercase text-bold-body-300"
-                    data-testid="txt"
-                    htmlFor=":r4h:"
-                  >
-                    Organization Twitter URL(optional) 
-                  </label>
                   <div
-                    className="relative"
+                    className="relative space-y-2"
                   >
-                    <input
-                      aria-describedby=":r4h:-description"
-                      aria-invalid={false}
-                      className="w-full outline-none transition-all duration-300 ease-in-out focus:ring-transparent px-3 py-[9px] rounded-lg focus:border-primary-500 border border-neutral-400"
-                      id=":r4h:"
-                      name="981edb54-739e-4971-b078-4e2a971d9ffd"
+                    <label
+                      className="mr-2 inline uppercase text-bold-body-300"
+                      data-testid="txt"
+                      htmlFor=":r5d:"
+                    >
+                      List the people who have a ownership stake in your company 
+                    </label>
+                    <p
+                      className="text-body-400 with-inner-html"
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "Please list the individuals who own your company. For each person listed, please indicate their name, title, gender and age:<br>Name<br>Title<br>Gender<br>Age",
+                        }
+                      }
+                      data-testid="txt"
+                      id=":r5d:-description"
+                    />
+                    <textarea
+                      className="min-h-[150px] w-full rounded-lg px-3 py-2 focus:border-primary-500 outline-none transition-all duration-300 ease-in-out focus:ring-transparent border-light "
+                      id=":r5d:"
+                      name="4388ff23-a5e7-486a-9b37-7ad41cce5e77"
                       onBlur={[Function]}
                       onChange={[Function]}
                       onChangeCapture={[Function]}
-                      type="url"
+                      value=""
                     />
                   </div>
-                </div>
-              </li>
-              <li
-                className="mt-8"
-              >
-                <div
-                  className="relative space-y-2"
-                >
-                  <label
-                    className="mr-2 inline uppercase text-bold-body-300"
-                    data-testid="txt"
-                    htmlFor=":r4i:"
-                  >
-                    List the people who have a ownership stake in your company 
-                  </label>
-                  <p
-                    className="text-light-body-300 with-inner-html"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "Please list the individuals who own your company. For each person listed, please indicate their name, title, gender and age:<br>Name<br>Title<br>Gender<br>Age",
-                      }
-                    }
-                    data-testid="txt"
-                    id=":r4i:-description"
-                  />
-                  <textarea
-                    className="min-h-[150px] w-full rounded-lg px-3 py-2 focus:border-primary-500 outline-none transition-all duration-300 ease-in-out focus:ring-transparent border-light "
-                    id=":r4i:"
-                    name="4388ff23-a5e7-486a-9b37-7ad41cce5e77"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onChangeCapture={[Function]}
-                  />
-                </div>
-              </li>
-            </ul>
-            <div
-              className="w-full"
-            >
+                </li>
+              </ul>
               <div
-                className="flex w-full items-center justify-between mt-12"
+                className="w-full"
               >
-                <button
-                  className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-1.75 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
-                  onClick={[Function]}
+                <div
+                  className="flex w-full items-center justify-between mt-12"
                 >
-                  <span
-                    className="text-bold-caption-200 pt-0.75 leading-3"
+                  <button
+                    className="bg-white border border-neutral-1000 hover:border-primary-500 disabled:border-neutral-1000 py-[10.5px] rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+                    onClick={[Function]}
                   >
-                    Back
-                  </span>
-                </button>
-                <button
-                  className="bg-primary-500 hover:bg-primary-400 py-2 rounded-md px-10 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black h-8 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
-                  disabled={false}
-                  onClick={[Function]}
-                >
-                  <span
-                    className="text-bold-caption-200 pt-0.75 leading-3"
+                    <span
+                      className="flex items-center text-bold-caption-200"
+                    >
+                      Back
+                    </span>
+                  </button>
+                  <button
+                    className="bg-primary-500 hover:bg-primary-400 py-2 !text-white rounded-md px-4 uppercase disabled:bg-neutral-300 disabled:text-neutral-800 transition whitespace-nowrap text-black min-h-10 flex items-center justify-center gap-1.5 tracking-wide w-fit-content"
+                    disabled={false}
+                    onClick={[Function]}
                   >
-                    Save and Continue
-                  </span>
-                </button>
+                    <span
+                      className="flex items-center text-bold-caption-200"
+                    >
+                      Save and Continue
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>