diff --git a/client/app/App.scss b/client/app/App.scss
index e8c273095..fe46ec3b4 100644
--- a/client/app/App.scss
+++ b/client/app/App.scss
@@ -1,6 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
 :root {
   --bs-card-cap-padding-y: 0;
   --haztrak-info: #33cccc;
@@ -104,7 +105,8 @@ $info: #009999;
   }
 }
 
-body {
+html, body {
+  height: 100%;
   margin: 0;
   font-family: var(--bs-body-font-family);
   font-size: var(--bs-body-font-size);
diff --git a/client/app/App.tsx b/client/app/App.tsx
index 0e3bf50c8..257fba3bd 100644
--- a/client/app/App.tsx
+++ b/client/app/App.tsx
@@ -1,5 +1,5 @@
-import { HtSpinner } from 'app/components/legacyUi';
-import React, { ReactElement, Suspense } from 'react';
+import { HtSpinner } from '~/components/legacyUi';
+import { ReactElement, Suspense } from 'react';
 import { Container } from 'react-bootstrap';
 import { RouterProvider } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
diff --git a/client/app/components/Auth/LoginForm.tsx b/client/app/components/Auth/LoginForm.tsx
index e95d8f169..af96d87b6 100644
--- a/client/app/components/Auth/LoginForm.tsx
+++ b/client/app/components/Auth/LoginForm.tsx
@@ -1,6 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { HtForm, HtSpinner } from 'app/components/legacyUi';
-import React from 'react';
+import { HtForm, HtSpinner } from '~/components/legacyUi';
+
 import { FloatingLabel, Form } from 'react-bootstrap';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
diff --git a/client/app/components/Charts/ManifestCountBarChart/ManifestCountBarChart.tsx b/client/app/components/Charts/ManifestCountBarChart/ManifestCountBarChart.tsx
index af075de38..d941ea4c9 100644
--- a/client/app/components/Charts/ManifestCountBarChart/ManifestCountBarChart.tsx
+++ b/client/app/components/Charts/ManifestCountBarChart/ManifestCountBarChart.tsx
@@ -73,17 +73,13 @@ const data = [
   },
 ];
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const monthTickFormatter = (tick: any) => {
   const date = new Date(tick);
 
   return date.getMonth() + 1;
 };
 
-const renderQuarterTick = (
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  tickProps: any
-): ReactElement<SVGElement> => {
+const renderQuarterTick = (tickProps: any): ReactElement<SVGElement> => {
   const { x, y, payload } = tickProps;
   const { value, offset } = payload;
   const date = new Date(value);
diff --git a/client/app/components/Charts/ManifestStatusPieChart/ManifestStatusPieChart.tsx b/client/app/components/Charts/ManifestStatusPieChart/ManifestStatusPieChart.tsx
index 8b4953466..903acffac 100644
--- a/client/app/components/Charts/ManifestStatusPieChart/ManifestStatusPieChart.tsx
+++ b/client/app/components/Charts/ManifestStatusPieChart/ManifestStatusPieChart.tsx
@@ -17,7 +17,7 @@ const data: Entry[] = [
   { name: 'Pending', value: 40, searchParam: 'pending' },
   { name: 'Scheduled', value: 39, searchParam: 'scheduled' },
   { name: 'In Transit', value: 33, searchParam: 'intransit' },
-  { name: 'Ready for TSDF Signature', value: 21, searchParam: 'readyforsignature' },
+  { name: 'Ready Signature', value: 21, searchParam: 'readyforsignature' },
 ];
 
 const inactiveAlpha = '1';
@@ -54,7 +54,6 @@ const calculateCoordinates = (
   };
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const renderCustomLabel = (props: any): ReactElement | null => {
   const { cx, cy, midAngle, outerRadius, value, hover, activeIndex, index } = props;
   const { sin, cos } = calculateTrig(midAngle);
@@ -84,7 +83,6 @@ const renderCustomLabel = (props: any): ReactElement | null => {
   return activeIndex !== index ? labelElement : null;
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const renderOuterRing = (props: any): ReactElement => {
   const { cx, cy, midAngle, outerRadius, startAngle, endAngle, fill, payload, percent } = props;
   const { sin, cos } = calculateTrig(midAngle);
@@ -147,7 +145,7 @@ const renderOuterRing = (props: any): ReactElement => {
 };
 
 /** Render the currently focused pie slice*/
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
 const renderActiveShape = (props: any): ReactElement => {
   const { cx, cy, midAngle, innerRadius, outerRadius, startAngle, endAngle, fill, onClick } = props;
   const { sin, cos } = calculateTrig(midAngle);
@@ -173,62 +171,38 @@ const renderActiveShape = (props: any): ReactElement => {
   );
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const renderLegend = (props: any): ReactElement => {
   const { payload, handleMouseEnter, handleMouseLeave, handleClick } = props;
 
   return (
-    <div
-      className="recharts-legend-wrapper"
-      style={{ position: 'absolute', width: '626px', height: '36px', left: '5px', bottom: '5px' }}
-    >
-      <ul
-        className="recharts-default-legend"
-        style={{ padding: '0px', margin: '10px', textAlign: 'center' }}
-      >
-        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any*/}
-        {payload.map((entry: any, index: number) => {
-          const dataEntry = data.find((d) => d.name === entry.value);
-          const activeAlphaColor = entry.color.slice(
-            entry.color.lastIndexOf(' ') + 1,
-            entry.color.length - 1
-          );
-          const activeLegend = activeAlphaColor === activeAlpha;
-          const baseStyle = { color: entry.color, paddingBottom: '2px' };
-          const spanStyle = activeLegend ? { ...baseStyle, borderBottom: `2px solid` } : baseStyle;
+    <div className="tw-relative tw-flex tw-flex-wrap tw-justify-center">
+      {payload.map((entry: any, index: number) => {
+        const dataEntry = data.find((d) => d.name === entry.value);
+        const activeAlphaColor = entry.color.slice(
+          entry.color.lastIndexOf(' ') + 1,
+          entry.color.length - 1
+        );
+        const activeLegend = activeAlphaColor === activeAlpha;
+        const baseStyle = { color: entry.color, paddingBottom: '2px' };
+        const spanStyle = activeLegend ? { ...baseStyle, borderBottom: `2px solid` } : baseStyle;
 
-          return (
-            <button
-              key={`item-${index}`}
-              onMouseEnter={() => handleMouseEnter(null, index)}
-              onMouseLeave={handleMouseLeave}
-              onClick={handleClick(dataEntry)}
-              className={`recharts-legend-item legend-item-${index}`}
-              style={{ display: 'inline-block', marginRight: '10px' }}
-            >
-              <svg
-                className="recharts-surface"
-                width="14"
-                height="14"
-                style={{ display: 'inline-block', verticalAlign: 'middle', marginRight: '4px' }}
-                viewBox="0 0 32 32"
-              >
-                <title></title>
-                <desc></desc>
-                <path
-                  stroke="none"
-                  fill={entry.color}
-                  d="M0,4h32v24h-32z"
-                  className="recharts-legend-icon"
-                />
-              </svg>
-              <span className="recharts-legend-item-text" style={spanStyle}>
-                {entry.value}
-              </span>
-            </button>
-          );
-        })}
-      </ul>
+        return (
+          <button
+            key={`item-${index}`}
+            onMouseEnter={() => handleMouseEnter(null, index)}
+            onMouseLeave={handleMouseLeave}
+            onClick={handleClick(dataEntry)}
+            className="tw-me-4 tw-inline-block"
+          >
+            <svg className="tw-me-4 tw-inline-block tw-h-4  tw-align-middle" viewBox="0 0 32 32">
+              <title></title>
+              <desc></desc>
+              <path stroke="none" fill={entry.color} d="M0,4h32v24h-32z" />
+            </svg>
+            <span style={spanStyle}>{entry.value}</span>
+          </button>
+        );
+      })}
     </div>
   );
 };
@@ -239,7 +213,6 @@ export function ManifestStatusPieChart() {
   const navigate = useNavigate();
 
   const handleMouseEnter = useCallback(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (_: any, index: number) => {
       setAnimationIsActive(false); // stop animation if impatient user
       setActiveIndex(index);
@@ -252,7 +225,6 @@ export function ManifestStatusPieChart() {
     setActiveIndex(-1);
   }, [setActiveIndex]);
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const renderLabel = (props: any) => {
     return renderCustomLabel({ ...props, hover: false, activeIndex: activeIndex });
   };
@@ -268,7 +240,6 @@ export function ManifestStatusPieChart() {
     <ResponsiveContainer minWidth={100} minHeight={300} height={'10%'}>
       <PieChart width={400} height={400}>
         <Legend
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
           content={(props: any) =>
             renderLegend({ ...props, handleMouseEnter, handleMouseLeave, handleClick })
           }
diff --git a/client/app/components/Error/Error404.tsx b/client/app/components/Error/Error404.tsx
index 1da2682cc..ec63b8521 100644
--- a/client/app/components/Error/Error404.tsx
+++ b/client/app/components/Error/Error404.tsx
@@ -1,5 +1,4 @@
 import robotRedX from '/assets/img/robot/robot-bad-sign.jpg';
-import React from 'react';
 
 export function Error404() {
   return (
diff --git a/client/app/components/Help/HaztrakLicense.tsx b/client/app/components/Help/HaztrakLicense.tsx
index 292222b85..33a0926b3 100644
--- a/client/app/components/Help/HaztrakLicense.tsx
+++ b/client/app/components/Help/HaztrakLicense.tsx
@@ -1,35 +1,31 @@
-import { HtCard } from 'app/components/legacyUi';
-import React from 'react';
+import { Card, CardContent } from '~/components/ui';
 
 export function HaztrakLicense() {
   return (
-    <HtCard className="shadow-lg mx-5 my-3 bg-white p-2">
-      <HtCard.Body>
-        <div className="d-flex flex-column text-muted">
-          <p className="text-start">MIT License</p>
-          <p className="text-start">Copyright (c) 2022 U.S. Environmental Protection Agency</p>
-          <p className="text-start">
-            Permission is hereby granted, free of charge, to any person obtaining a copy of this
-            software and associated documentation files (the "Software"), to deal in the Software
-            without restriction, including without limitation the rights to use, copy, modify,
-            merge, publish, distribute, sublicense, and/or sell copies of the Software, and to
-            permit persons to whom the Software is furnished to do so, subject to the following
-            conditions:
-          </p>
-          <p className="text-start">
-            The above copyright notice and this permission notice shall be included in all copies or
-            substantial portions of the Software.
-          </p>
-          <p className="text-start">
-            THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
-            INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
-            PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-            LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT
-            OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
-            OTHER DEALINGS IN THE SOFTWARE.
-          </p>
-        </div>
-      </HtCard.Body>
-    </HtCard>
+    <Card className="tw-shadow-ls tw-mx-5 tw-my-3 tw-bg-white tw-p-2">
+      <CardContent className="text-muted tw-space-y-2">
+        <p>MIT License</p>
+        <p>Copyright (c) 2022 U.S. Environmental Protection Agency</p>
+        <p>
+          Permission is hereby granted, free of charge, to any person obtaining a copy of this
+          software and associated documentation files (the "Software"), to deal in the Software
+          without restriction, including without limitation the rights to use, copy, modify, merge,
+          publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons
+          to whom the Software is furnished to do so, subject to the following conditions:
+        </p>
+        <p>
+          The above copyright notice and this permission notice shall be included in all copies or
+          substantial portions of the Software.
+        </p>
+        <p>
+          THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+          INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
+          PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE
+          FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+          OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+          DEALINGS IN THE SOFTWARE.
+        </p>
+      </CardContent>
+    </Card>
   );
 }
diff --git a/client/app/components/Help/SectionTitle.tsx b/client/app/components/Help/SectionTitle.tsx
index f863f2b8c..2f9125669 100644
--- a/client/app/components/Help/SectionTitle.tsx
+++ b/client/app/components/Help/SectionTitle.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 /** A section title for the textual content such as About and help content*/
 export function SectionTitle({
   title,
@@ -9,8 +7,8 @@ export function SectionTitle({
   variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }) {
   return (
-    <div className="section-title text-center pb-3 ">
-      <h2 className={`${variant ?? 'h2'} text-primary fw-bold text-uppercase position-relative`}>
+    <div className="tw-pb-3 tw-text-center ">
+      <h2 className={`${variant ?? 'h2'} text-primary tw-relative tw-font-bold tw-uppercase`}>
         <div
           className="bg-secondary-subtle"
           style={{
diff --git a/client/app/components/Layout/Nav/NavSection.tsx b/client/app/components/Layout/Nav/NavSection.tsx
index 6163a0ed0..d37c77c0c 100644
--- a/client/app/components/Layout/Nav/NavSection.tsx
+++ b/client/app/components/Layout/Nav/NavSection.tsx
@@ -1,6 +1,6 @@
 import { NavItem } from '~/components/Layout/Nav/NavItem';
 import { RoutesSection } from '~/components/Layout/Sidebar/SidebarRoutes';
-import React from 'react';
+
 import { Separator } from '~/components/ui/Separator/Separator';
 
 interface SidebarSectionProps {
diff --git a/client/app/components/Layout/Root.tsx b/client/app/components/Layout/Root.tsx
index 8024c7fa7..4960fb7e7 100644
--- a/client/app/components/Layout/Root.tsx
+++ b/client/app/components/Layout/Root.tsx
@@ -1,4 +1,4 @@
-import { HtSpinner } from 'app/components/legacyUi';
+import { HtSpinner } from '~/components/legacyUi';
 import React, { createContext, Dispatch, SetStateAction, Suspense, useState } from 'react';
 import { Container } from 'react-bootstrap';
 import { Outlet } from 'react-router-dom';
@@ -23,7 +23,7 @@ export function Root() {
       <div>
         <TopNav />
         <Sidebar />
-        <Container fluid>
+        <Container fluid className="tw-mt-20">
           <ErrorBoundary>
             <Suspense fallback={<HtSpinner center className="my-auto" />}>
               <Outlet />
diff --git a/client/app/components/Layout/Sidebar/Sidebar.spec.tsx b/client/app/components/Layout/Sidebar/Sidebar.spec.tsx
index d56dd1e30..3d9551a12 100644
--- a/client/app/components/Layout/Sidebar/Sidebar.spec.tsx
+++ b/client/app/components/Layout/Sidebar/Sidebar.spec.tsx
@@ -1,6 +1,6 @@
 import { Sidebar } from '~/components/Layout/Sidebar/Sidebar';
-import React from 'react';
-import { cleanup, renderWithProviders, screen } from 'app/mocks';
+
+import { cleanup, renderWithProviders, screen } from '~/mocks';
 import { afterEach, describe, expect, test } from 'vitest';
 
 afterEach(() => {
diff --git a/client/app/components/Layout/Sidebar/Sidebar.tsx b/client/app/components/Layout/Sidebar/Sidebar.tsx
index 91452194d..7cb9e6fb1 100644
--- a/client/app/components/Layout/Sidebar/Sidebar.tsx
+++ b/client/app/components/Layout/Sidebar/Sidebar.tsx
@@ -1,11 +1,11 @@
 import logo from '/assets/img/haztrak-logos/haztrak-logo-zip-file/png/logo-black-crop.png';
-import { NavSection } from '~/components/Layout/Nav/NavSection';
-import { NavItem } from '~/components/Layout/Nav/NavItem';
-import { NavContext, NavContextProps } from '~/components/Layout/Root';
 import React, { ReactElement, useContext } from 'react';
 import { Link } from 'react-router-dom';
-import { routes } from './SidebarRoutes';
+import { NavItem } from '~/components/Layout/Nav/NavItem';
+import { NavSection } from '~/components/Layout/Nav/NavSection';
+import { NavContext, NavContextProps } from '~/components/Layout/Root';
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from '~/components/ui';
+import { routes } from './SidebarRoutes';
 
 /** Vertical sidebar for navigation that disappears when the viewport is small*/
 export function Sidebar(): ReactElement | null {
diff --git a/client/app/components/Layout/TopNav/TopNav.spec.tsx b/client/app/components/Layout/TopNav/TopNav.spec.tsx
index fad0ab918..23751eeb1 100644
--- a/client/app/components/Layout/TopNav/TopNav.spec.tsx
+++ b/client/app/components/Layout/TopNav/TopNav.spec.tsx
@@ -1,5 +1,5 @@
-import { cleanup, renderWithProviders, screen } from 'app/mocks';
-import React from 'react';
+import { cleanup, renderWithProviders, screen } from '~/mocks';
+
 import { afterEach, describe, expect, test } from 'vitest';
 import { TopNav } from '~/components/Layout/TopNav/TopNav';
 
diff --git a/client/app/components/Layout/TopNav/TopNav.tsx b/client/app/components/Layout/TopNav/TopNav.tsx
index 5922061c9..d177415b0 100644
--- a/client/app/components/Layout/TopNav/TopNav.tsx
+++ b/client/app/components/Layout/TopNav/TopNav.tsx
@@ -30,57 +30,64 @@ export function TopNav() {
   };
 
   return (
-    <nav className="tw-flex tw-items-center tw-justify-between tw-bg-primary tw-px-5">
-      <div className="tw-flex tw-items-center">
-        <Button
-          size="icon"
-          aria-label="toggleSidebarNavigation"
-          aria-hidden={false}
-          id="sidebarToggle"
-          onClick={toggleSidebar}
-          rounded
-          variant={null}
-          className="tw-border-none tw-bg-transparent tw-text-white hover:tw-bg-gray-700"
-        >
-          <LuMenu size={32} strokeWidth={2} />
-        </Button>
-        <Link to="/" className="tw-px-3">
-          <img
-            src={logo}
-            alt="haztrak logo, hazardous waste tracking made easy."
-            width={125}
-            height={'auto'}
-            className="tw-my-3"
-          />
-        </Link>
-      </div>
-      <div className="tw-hidden tw-max-w-64 tw-grow md:tw-block">
-        <OrgSelect />
-      </div>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
+    <header className="tw-fixed tw-left-0 tw-top-0 tw-z-50 tw-flex tw-min-h-16 tw-w-full tw-items-center tw-bg-primary tw-px-5">
+      <nav className="tw-flex tw-grow tw-items-center tw-justify-between">
+        <div className="tw-flex tw-items-center" id="leftNavSection">
           <Button
-            variant="outline"
-            className="tw-border-0 tw-text-white hover:tw-bg-transparent hover:tw-text-accent"
+            size="icon"
+            aria-label="toggleSidebarNavigation"
+            aria-hidden={false}
+            id="sidebarToggle"
+            onClick={toggleSidebar}
+            rounded
+            variant={null}
+            className="tw-border-none tw-bg-transparent tw-text-white hover:tw-bg-gray-700"
           >
-            <RiArrowDropDownFill size={24} />
-            <LuUser size={32} />
+            <LuMenu size={32} strokeWidth={2} />
           </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="tw-me-5 tw-w-56">
-          <DropdownMenuItem asChild>
-            <Link to={'./profile'} relative="path">
-              <LuUser className="tw-mr-2 tw-h-4 tw-w-4 tw-text-primary" />
-              <span>Profile</span>
-            </Link>
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem onClick={handleLogout}>
-            <LogOut className="tw-mr-2 tw-h-4 tw-w-4 tw-text-destructive" />
-            <span>Log out</span>
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </nav>
+          <Link to="/" className="tw-hidden tw-px-3 sm:tw-block">
+            <img
+              src={logo}
+              alt="haztrak logo, hazardous waste tracking made easy."
+              width={125}
+              height={'auto'}
+              className="tw-my-3"
+            />
+          </Link>
+        </div>
+        <div
+          className="tw-hidden tw-max-w-64 tw-grow tw-items-center tw-justify-center md:tw-flex"
+          id="centerNavSection"
+        >
+          <OrgSelect />
+        </div>
+        <div id="rightNavSection" className="tw-flex tw-items-center">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="outline"
+                className="tw-border-0 tw-text-white hover:tw-bg-transparent hover:tw-text-accent"
+              >
+                <RiArrowDropDownFill size={24} />
+                <LuUser size={32} />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="tw-me-5 tw-w-56">
+              <DropdownMenuItem asChild>
+                <Link to={'./profile'} relative="path">
+                  <LuUser className="tw-mr-2 tw-h-4 tw-w-4 tw-text-primary" />
+                  <span>Profile</span>
+                </Link>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={handleLogout}>
+                <LogOut className="tw-mr-2 tw-h-4 tw-w-4 tw-text-destructive" />
+                <span>Log out</span>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </nav>
+    </header>
   );
 }
diff --git a/client/app/components/Manifest/Actions/ManifestCancelBtn.tsx b/client/app/components/Manifest/Actions/ManifestCancelBtn.tsx
index a70b42e07..28c80a578 100644
--- a/client/app/components/Manifest/Actions/ManifestCancelBtn.tsx
+++ b/client/app/components/Manifest/Actions/ManifestCancelBtn.tsx
@@ -1,9 +1,8 @@
-import { faTrash } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { HtButton } from 'app/components/legacyUi';
 import React, { useContext } from 'react';
 import { useFormContext } from 'react-hook-form';
+import { FaTrash } from 'react-icons/fa';
 import { useNavigate } from 'react-router-dom';
+import { HtButton } from '~/components/legacyUi';
 import { ManifestContext } from '~/components/Manifest/ManifestForm';
 import { Manifest } from '~/components/Manifest/manifestSchema';
 import { useReadOnly } from '~/hooks/manifest';
@@ -29,7 +28,7 @@ export function ManifestCancelBtn() {
       }}
     >
       <span>Cancel </span>
-      <FontAwesomeIcon icon={faTrash} />
+      <FaTrash />
     </HtButton>
   );
 }
diff --git a/client/app/components/Manifest/Actions/ManifestEditBtn.tsx b/client/app/components/Manifest/Actions/ManifestEditBtn.tsx
index 0d58d9182..e5abf1e4b 100644
--- a/client/app/components/Manifest/Actions/ManifestEditBtn.tsx
+++ b/client/app/components/Manifest/Actions/ManifestEditBtn.tsx
@@ -1,9 +1,8 @@
-import { faPenToSquare } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { HtButton } from 'app/components/legacyUi';
 import React, { useContext } from 'react';
 import { ButtonProps } from 'react-bootstrap';
+import { FaPenToSquare } from 'react-icons/fa6';
 import { useNavigate } from 'react-router-dom';
+import { HtButton } from '~/components/legacyUi';
 import { ManifestContext } from '~/components/Manifest/ManifestForm';
 import { useReadOnly } from '~/hooks/manifest';
 
@@ -23,7 +22,7 @@ export function ManifestEditBtn({ children: _unused, ...props }: ManifestEditBtn
   return (
     <HtButton {...props} variant="info" type="button" name="edit" onClick={handleClick}>
       <span>Edit </span>
-      <FontAwesomeIcon icon={faPenToSquare} />
+      <FaPenToSquare />
     </HtButton>
   );
 }
diff --git a/client/app/components/Manifest/Actions/ManifestFABs.spec.tsx b/client/app/components/Manifest/Actions/ManifestFABs.spec.tsx
index 7b940ed57..f8ea28c3d 100644
--- a/client/app/components/Manifest/Actions/ManifestFABs.spec.tsx
+++ b/client/app/components/Manifest/Actions/ManifestFABs.spec.tsx
@@ -2,8 +2,8 @@ import { ManifestFABs } from '~/components/Manifest/Actions/ManifestFABs';
 import { ManifestContext } from '~/components/Manifest/ManifestForm';
 import { ManifestStatus } from '~/components/Manifest/manifestSchema';
 import { useReadOnly } from '~/hooks/manifest';
-import React from 'react';
-import { cleanup, renderWithProviders, screen } from 'app/mocks';
+
+import { cleanup, renderWithProviders, screen } from '~/mocks';
 import { afterEach, describe, expect, test } from 'vitest';
 
 const TestComponent = ({
diff --git a/client/app/components/Manifest/Actions/ManifestFABs.tsx b/client/app/components/Manifest/Actions/ManifestFABs.tsx
index 66639272e..0e8ca342a 100644
--- a/client/app/components/Manifest/Actions/ManifestFABs.tsx
+++ b/client/app/components/Manifest/Actions/ManifestFABs.tsx
@@ -1,4 +1,4 @@
-import { FloatingActionBtn } from 'app/components/legacyUi';
+import { FloatingActionBtn } from '~/components/legacyUi';
 import React, { ReactElement, useContext } from 'react';
 import { ManifestEditBtn } from '~/components/Manifest/Actions/ManifestEditBtn';
 import { ManifestSaveBtn } from '~/components/Manifest/Actions/ManifestSaveBtn';
diff --git a/client/app/components/Manifest/Actions/ManifestSaveBtn.tsx b/client/app/components/Manifest/Actions/ManifestSaveBtn.tsx
index 0a04cad2b..ee79b8d70 100644
--- a/client/app/components/Manifest/Actions/ManifestSaveBtn.tsx
+++ b/client/app/components/Manifest/Actions/ManifestSaveBtn.tsx
@@ -1,8 +1,6 @@
-import { faFloppyDisk } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { HtButton } from 'app/components/legacyUi';
-import React from 'react';
 import { ButtonProps } from 'react-bootstrap';
+import { FaFloppyDisk } from 'react-icons/fa6';
+import { HtButton } from '~/components/legacyUi';
 import { useReadOnly } from '~/hooks/manifest';
 
 interface ManifestSaveBtnProps extends ButtonProps {}
@@ -13,7 +11,7 @@ export function ManifestSaveBtn({ children: _unused, ...props }: ManifestSaveBtn
   return (
     <HtButton variant="success" type="submit" name="save" {...props}>
       <span>Save </span>
-      <FontAwesomeIcon icon={faFloppyDisk} />
+      <FaFloppyDisk />
     </HtButton>
   );
 }
diff --git a/client/app/components/Manifest/AdditionalInfo/AdditionalInfoForm.tsx b/client/app/components/Manifest/AdditionalInfo/AdditionalInfoForm.tsx
index 1be4913de..8cbaa17d9 100644
--- a/client/app/components/Manifest/AdditionalInfo/AdditionalInfoForm.tsx
+++ b/client/app/components/Manifest/AdditionalInfo/AdditionalInfoForm.tsx
@@ -1,9 +1,7 @@
-import { faTimesCircle } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { HtForm } from 'app/components/legacyUi';
-import React from 'react';
 import { Button, Col, Form, Row } from 'react-bootstrap';
 import { useFieldArray, useFormContext } from 'react-hook-form';
+import { FaTimesCircle } from 'react-icons/fa';
+import { HtForm } from '~/components/legacyUi';
 import { Manifest } from '~/components/Manifest';
 import { WasteLine } from '~/components/Manifest/WasteLine';
 import { useReadOnly } from '~/hooks/manifest';
@@ -104,7 +102,7 @@ export function AdditionalInfoForm() {
                       remove(index);
                     }}
                   >
-                    <FontAwesomeIcon icon={faTimesCircle} className="fa-lg text-danger" />
+                    <FaTimesCircle className="fa-lg text-danger" />
                   </Button>
                 </Col>
               </Row>
diff --git a/client/app/components/Manifest/AdditionalInfo/AdditionalinfoForm.spec.tsx b/client/app/components/Manifest/AdditionalInfo/AdditionalinfoForm.spec.tsx
index 6ced7a232..150e1c90a 100644
--- a/client/app/components/Manifest/AdditionalInfo/AdditionalinfoForm.spec.tsx
+++ b/client/app/components/Manifest/AdditionalInfo/AdditionalinfoForm.spec.tsx
@@ -1,7 +1,7 @@
 import { fireEvent } from '@testing-library/react';
 import { AdditionalInfoForm } from '~/components/Manifest/AdditionalInfo';
-import React from 'react';
-import { cleanup, renderWithProviders, screen } from 'app/mocks';
+
+import { cleanup, renderWithProviders, screen } from '~/mocks';
 import { afterEach, describe, expect, test } from 'vitest';
 
 afterEach(() => {
diff --git a/client/app/components/Manifest/Address/AddressForm.spec.tsx b/client/app/components/Manifest/Address/AddressForm.spec.tsx
index de62d97eb..38fb4e5b8 100644
--- a/client/app/components/Manifest/Address/AddressForm.spec.tsx
+++ b/client/app/components/Manifest/Address/AddressForm.spec.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { cleanup, renderWithProviders, screen } from 'app/mocks';
+import { cleanup, renderWithProviders, screen } from '~/mocks';
 import { AddressForm } from './AddressForm';
 import { afterEach, describe, test, expect } from 'vitest';
 
diff --git a/client/app/components/Manifest/Address/AddressForm.tsx b/client/app/components/Manifest/Address/AddressForm.tsx
index f143ebf5f..390c83652 100644
--- a/client/app/components/Manifest/Address/AddressForm.tsx
+++ b/client/app/components/Manifest/Address/AddressForm.tsx
@@ -1,5 +1,4 @@
 import { GeneratorAddress } from '~/components/Manifest/Address/GeneratorAddress';
-import React from 'react';
 
 interface Props {
   addressType: 'siteAddress' | 'mailingAddress';
diff --git a/client/app/components/Manifest/Address/GeneratorAddress.tsx b/client/app/components/Manifest/Address/GeneratorAddress.tsx
index 9e3892964..7e1d5894c 100644
--- a/client/app/components/Manifest/Address/GeneratorAddress.tsx
+++ b/client/app/components/Manifest/Address/GeneratorAddress.tsx
@@ -1,5 +1,5 @@
 import { ErrorMessage } from '@hookform/error-message';
-import { HtForm } from 'app/components/legacyUi';
+import { HtForm } from '~/components/legacyUi';
 import React, { useContext } from 'react';
 import { Col, Form, Row } from 'react-bootstrap';
 import { Controller, FieldError, FieldErrorsImpl, Merge, useFormContext } from 'react-hook-form';
diff --git a/client/app/components/Manifest/Contact/ContactForm.spec.tsx b/client/app/components/Manifest/Contact/ContactForm.spec.tsx
index f8c591a9f..5863f8990 100644
--- a/client/app/components/Manifest/Contact/ContactForm.spec.tsx
+++ b/client/app/components/Manifest/Contact/ContactForm.spec.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { cleanup, renderWithProviders, screen } from 'app/mocks';
+import { cleanup, renderWithProviders, screen } from '~/mocks';
 import { ContactForm } from './ContactForm';
 import { afterEach, describe, test, expect } from 'vitest';
 
diff --git a/client/app/components/Manifest/Contact/ContactForm.tsx b/client/app/components/Manifest/Contact/ContactForm.tsx
index 67ed29178..00c2c4207 100644
--- a/client/app/components/Manifest/Contact/ContactForm.tsx
+++ b/client/app/components/Manifest/Contact/ContactForm.tsx
@@ -1,5 +1,5 @@
-import { HtForm } from 'app/components/legacyUi';
-import React from 'react';
+import { HtForm } from '~/components/legacyUi';
+
 import { Col, Form, Row } from 'react-bootstrap';
 import { useFormContext } from 'react-hook-form';
 import { Manifest } from '~/components/Manifest';
diff --git a/client/app/components/Manifest/Contact/PhoneForm.spec.tsx b/client/app/components/Manifest/Contact/PhoneForm.spec.tsx
index 3788c78d5..4c889b2d1 100644
--- a/client/app/components/Manifest/Contact/PhoneForm.spec.tsx
+++ b/client/app/components/Manifest/Contact/PhoneForm.spec.tsx
@@ -1,6 +1,6 @@
 import { PhoneForm } from '~/components/Manifest/Contact';
-import React from 'react';
-import { cleanup, renderWithProviders, screen } from 'app/mocks';
+
+import { cleanup, renderWithProviders, screen } from '~/mocks';
 import { afterEach, describe, expect, test } from 'vitest';
 
 afterEach(() => {
diff --git a/client/app/components/Manifest/Contact/PhoneForm.tsx b/client/app/components/Manifest/Contact/PhoneForm.tsx
index 23b1f238e..7c6ec2cea 100644
--- a/client/app/components/Manifest/Contact/PhoneForm.tsx
+++ b/client/app/components/Manifest/Contact/PhoneForm.tsx
@@ -1,4 +1,4 @@
-import { HtForm } from 'app/components/legacyUi';
+import { HtForm } from '~/components/legacyUi';
 import React, { useState } from 'react';
 import { Col, Form, Row } from 'react-bootstrap';
 import { useFormContext } from 'react-hook-form';
diff --git a/client/app/components/Manifest/GeneralInfo/GeneralInfoForm.spec.tsx b/client/app/components/Manifest/GeneralInfo/GeneralInfoForm.spec.tsx
index df833a5e6..4a0bb192e 100644
--- a/client/app/components/Manifest/GeneralInfo/GeneralInfoForm.spec.tsx
+++ b/client/app/components/Manifest/GeneralInfo/GeneralInfoForm.spec.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { cleanup, renderWithProviders, screen } from 'app/mocks';
+import { cleanup, renderWithProviders, screen } from '~/mocks';
 import { afterEach, describe, expect, test } from 'vitest';
 import { GeneralInfoForm } from './GeneralInfoForm';
 
diff --git a/client/app/components/Manifest/GeneralInfo/GeneralInfoForm.tsx b/client/app/components/Manifest/GeneralInfo/GeneralInfoForm.tsx
index d630979e8..119708cf9 100644
--- a/client/app/components/Manifest/GeneralInfo/GeneralInfoForm.tsx
+++ b/client/app/components/Manifest/GeneralInfo/GeneralInfoForm.tsx
@@ -1,5 +1,5 @@
-import { HtForm, InfoIconTooltip } from 'app/components/legacyUi';
-import React from 'react';
+import { HtForm, InfoIconTooltip } from '~/components/legacyUi';
+
 import { Col, Form, Row } from 'react-bootstrap';
 import { useFormContext } from 'react-hook-form';
 import { ManifestStatusSelect } from '~/components/Manifest/GeneralInfo/ManifestStatusSelect';
diff --git a/client/app/components/Manifest/GeneralInfo/ManifestStatusSelect.spec.tsx b/client/app/components/Manifest/GeneralInfo/ManifestStatusSelect.spec.tsx
index 194507149..163e0100e 100644
--- a/client/app/components/Manifest/GeneralInfo/ManifestStatusSelect.spec.tsx
+++ b/client/app/components/Manifest/GeneralInfo/ManifestStatusSelect.spec.tsx
@@ -2,11 +2,11 @@ import userEvent from '@testing-library/user-event';
 import { ManifestStatusSelect } from '~/components/Manifest/GeneralInfo/ManifestStatusSelect';
 import { http, HttpResponse } from 'msw';
 import { setupServer } from 'msw/node';
-import React from 'react';
-import { cleanup, renderWithProviders, screen } from 'app/mocks';
+
+import { cleanup, renderWithProviders, screen } from '~/mocks';
 import { createMockHandler, createMockSite } from '~/mocks/fixtures';
 import { createMockProfileResponse } from '~/mocks/fixtures/mockUser';
-import { mockUserEndpoints } from 'app/mocks/handlers';
+import { mockUserEndpoints } from '~/mocks/handlers';
 import { API_BASE_URL } from '~/mocks/handlers/mockSiteEndpoints';
 import { afterAll, afterEach, beforeAll, describe, expect, test } from 'vitest';
 
diff --git a/client/app/components/Manifest/GeneralInfo/ManifestStatusSelect.tsx b/client/app/components/Manifest/GeneralInfo/ManifestStatusSelect.tsx
index 694941d82..076f71cea 100644
--- a/client/app/components/Manifest/GeneralInfo/ManifestStatusSelect.tsx
+++ b/client/app/components/Manifest/GeneralInfo/ManifestStatusSelect.tsx
@@ -1,5 +1,5 @@
-import { HtForm, InfoIconTooltip } from 'app/components/legacyUi';
-import React from 'react';
+import { HtForm, InfoIconTooltip } from '~/components/legacyUi';
+
 import { Controller, useFormContext } from 'react-hook-form';
 import Select, { SingleValue } from 'react-select';
 import { Manifest, ManifestStatus } from '~/components/Manifest/manifestSchema';
diff --git a/client/app/components/Manifest/GeneralInfo/ManifestTypeField.spec.tsx b/client/app/components/Manifest/GeneralInfo/ManifestTypeField.spec.tsx
index 82dc46d54..531a506f8 100644
--- a/client/app/components/Manifest/GeneralInfo/ManifestTypeField.spec.tsx
+++ b/client/app/components/Manifest/GeneralInfo/ManifestTypeField.spec.tsx
@@ -1,10 +1,10 @@
 import userEvent from '@testing-library/user-event';
 import { ManifestTypeSelect } from '~/components/Manifest/GeneralInfo/ManifestTypeSelect';
 import { setupServer } from 'msw/node';
-import React from 'react';
-import { cleanup, renderWithProviders, screen } from 'app/mocks';
+
+import { cleanup, renderWithProviders, screen } from '~/mocks';
 import { createMockHandler } from '~/mocks/fixtures';
-import { mockUserEndpoints } from 'app/mocks/handlers';
+import { mockUserEndpoints } from '~/mocks/handlers';
 import { afterAll, afterEach, beforeAll, describe, expect, test } from 'vitest';
 
 const server = setupServer(...mockUserEndpoints);
diff --git a/client/app/components/Manifest/GeneralInfo/ManifestTypeSelect.tsx b/client/app/components/Manifest/GeneralInfo/ManifestTypeSelect.tsx
index 3ed28c52f..4d7b7f989 100644
--- a/client/app/components/Manifest/GeneralInfo/ManifestTypeSelect.tsx
+++ b/client/app/components/Manifest/GeneralInfo/ManifestTypeSelect.tsx
@@ -1,4 +1,4 @@
-import { HtForm } from 'app/components/legacyUi';
+import { HtForm } from '~/components/legacyUi';
 import React, { useState } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import Select, { SingleValue } from 'react-select';
diff --git a/client/app/components/Manifest/Generator/GeneratorForm.spec.tsx b/client/app/components/Manifest/Generator/GeneratorForm.spec.tsx
index a915e7357..4d3b887fa 100644
--- a/client/app/components/Manifest/Generator/GeneratorForm.spec.tsx
+++ b/client/app/components/Manifest/Generator/GeneratorForm.spec.tsx
@@ -1,7 +1,7 @@
 import { fireEvent } from '@testing-library/react';
 import { siteType } from '~/components/Manifest/manifestSchema';
-import React from 'react';
-import { cleanup, renderWithProviders, screen } from 'app/mocks';
+
+import { cleanup, renderWithProviders, screen } from '~/mocks';
 import { afterEach, describe, expect, test } from 'vitest';
 import { GeneratorForm } from './GeneratorForm';
 
diff --git a/client/app/components/Manifest/Generator/GeneratorForm.tsx b/client/app/components/Manifest/Generator/GeneratorForm.tsx
index a9512d2ae..6be95fef3 100644
--- a/client/app/components/Manifest/Generator/GeneratorForm.tsx
+++ b/client/app/components/Manifest/Generator/GeneratorForm.tsx
@@ -1,4 +1,4 @@
-import { HtForm } from 'app/components/legacyUi';
+import { HtForm } from '~/components/legacyUi';
 import { ReactElement, useEffect, useState } from 'react';
 import { Col, Form, Row } from 'react-bootstrap';
 import { useFormContext } from 'react-hook-form';
diff --git a/client/app/components/Manifest/Generator/GeneratorSection.spec.tsx b/client/app/components/Manifest/Generator/GeneratorSection.spec.tsx
index 744f8373a..510c6496c 100644
--- a/client/app/components/Manifest/Generator/GeneratorSection.spec.tsx
+++ b/client/app/components/Manifest/Generator/GeneratorSection.spec.tsx
@@ -1,4 +1,4 @@
-import { cleanup, renderWithProviders, screen } from 'app/mocks';
+import { cleanup, renderWithProviders, screen } from '~/mocks';
 import { createMockHandler } from '~/mocks/fixtures';
 import { afterEach, describe, expect, test } from 'vitest';
 import { GeneratorSection } from './GeneratorSection';
diff --git a/client/app/components/Manifest/Generator/GeneratorSection.tsx b/client/app/components/Manifest/Generator/GeneratorSection.tsx
index 4d4342900..0f0a00bcf 100644
--- a/client/app/components/Manifest/Generator/GeneratorSection.tsx
+++ b/client/app/components/Manifest/Generator/GeneratorSection.tsx
@@ -1,5 +1,5 @@
 import { ErrorMessage } from '@hookform/error-message';
-import { HtButton, HtSpinner } from 'app/components/legacyUi';
+import { HtButton, HtSpinner } from '~/components/legacyUi';
 import React, { useEffect, useState } from 'react';
 import { Alert, Button, Col, Stack } from 'react-bootstrap';
 import { useFormContext } from 'react-hook-form';
@@ -7,7 +7,7 @@ import { useSearchParams } from 'react-router-dom';
 import { ContactForm, PhoneForm } from '~/components/Manifest/Contact';
 import { Handler, Manifest } from '~/components/Manifest/manifestSchema';
 import { QuickSignBtn } from '~/components/Manifest/QuickerSign';
-import { RcraSiteDetails } from '~/components/RcraSite';
+import { RcraSiteDetails } from '~/components/RcraSite/RcraSiteDetails';
 import { useReadOnly } from '~/hooks/manifest';
 import { useHandlerSearchConfig } from '~/hooks/manifest/useOpenHandlerSearch/useHandlerSearchConfig';
 import { useGetRcrainfoSiteQuery } from '~/store';
diff --git a/client/app/components/Manifest/Handler/Search/HandlerSearchForm.spec.tsx b/client/app/components/Manifest/Handler/Search/HandlerSearchForm.spec.tsx
index 1f8922a6f..05c4044d6 100644
--- a/client/app/components/Manifest/Handler/Search/HandlerSearchForm.spec.tsx
+++ b/client/app/components/Manifest/Handler/Search/HandlerSearchForm.spec.tsx
@@ -1,9 +1,8 @@
 import userEvent from '@testing-library/user-event';
-import { cleanup, renderWithProviders, screen } from 'app/mocks';
-import { mockUserEndpoints } from 'app/mocks/handlers';
+import { cleanup, renderWithProviders, screen } from '~/mocks';
+import { mockUserEndpoints } from '~/mocks/handlers';
 import { http, HttpResponse } from 'msw';
 import { setupServer } from 'msw/node';
-import React from 'react';
 
 import { afterAll, afterEach, beforeAll, describe, expect, test } from 'vitest';
 import { createMockRcrainfoSite } from '~/mocks/fixtures';
diff --git a/client/app/components/Manifest/Handler/Search/HandlerSearchForm.tsx b/client/app/components/Manifest/Handler/Search/HandlerSearchForm.tsx
index 357e43a28..03b0ee345 100644
--- a/client/app/components/Manifest/Handler/Search/HandlerSearchForm.tsx
+++ b/client/app/components/Manifest/Handler/Search/HandlerSearchForm.tsx
@@ -1,4 +1,4 @@
-import { HtForm } from 'app/components/legacyUi';
+import { HtForm } from '~/components/legacyUi';
 import React, { useContext, useEffect, useState } from 'react';
 import { Button, Col, Row } from 'react-bootstrap';
 import {
diff --git a/client/app/components/Manifest/Handler/Search/HandlerSearchModal.tsx b/client/app/components/Manifest/Handler/Search/HandlerSearchModal.tsx
index fdb436c9c..737bf3792 100644
--- a/client/app/components/Manifest/Handler/Search/HandlerSearchModal.tsx
+++ b/client/app/components/Manifest/Handler/Search/HandlerSearchModal.tsx
@@ -1,5 +1,5 @@
-import { HtModal } from 'app/components/legacyUi';
-import React from 'react';
+import { HtModal } from '~/components/legacyUi';
+
 import { Col, Row } from 'react-bootstrap';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 import { HandlerSearchForm } from '~/components/Manifest/Handler';
diff --git a/client/app/components/Manifest/Handler/Search/RcrainfoSiteSearchBadge.tsx b/client/app/components/Manifest/Handler/Search/RcrainfoSiteSearchBadge.tsx
index 36ce9f26e..7cbad8082 100644
--- a/client/app/components/Manifest/Handler/Search/RcrainfoSiteSearchBadge.tsx
+++ b/client/app/components/Manifest/Handler/Search/RcrainfoSiteSearchBadge.tsx
@@ -1,8 +1,7 @@
-import { faCheck, faXmark } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { HtSpinner } from 'app/components/legacyUi';
-import React from 'react';
 import { Badge } from 'react-bootstrap';
+import { FaCheck } from 'react-icons/fa';
+import { FaXmark } from 'react-icons/fa6';
+import { HtSpinner } from '~/components/legacyUi';
 
 interface RcrainfoInfoStatusProps {
   data: any;
@@ -41,15 +40,7 @@ export function RcrainfoSiteSearchBadge({
     <div className="my-2">
       <Badge className="p-2" bg={bg} text={text} pill>
         <span>{message}</span>
-        {isFetching ? (
-          <HtSpinner size="lg" />
-        ) : error ? (
-          <FontAwesomeIcon icon={faXmark} />
-        ) : data ? (
-          <FontAwesomeIcon icon={faCheck} />
-        ) : (
-          <></>
-        )}
+        {isFetching ? <HtSpinner size="lg" /> : error ? <FaXmark /> : data ? <FaCheck /> : <></>}
       </Badge>
     </div>
   );
diff --git a/client/app/components/Manifest/ManifestForm.spec.tsx b/client/app/components/Manifest/ManifestForm.spec.tsx
index e09724f27..d2be27cf2 100644
--- a/client/app/components/Manifest/ManifestForm.spec.tsx
+++ b/client/app/components/Manifest/ManifestForm.spec.tsx
@@ -1,9 +1,9 @@
 import { fireEvent, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { cleanup, renderWithProviders } from 'app/mocks';
-import { mockSiteEndpoints, mockUserEndpoints, mockWasteEndpoints } from 'app/mocks/handlers';
+import { cleanup, renderWithProviders } from '~/mocks';
+import { mockSiteEndpoints, mockUserEndpoints, mockWasteEndpoints } from '~/mocks/handlers';
 import { setupServer } from 'msw/node';
-import React from 'react';
+
 import { afterAll, afterEach, beforeAll, describe, expect, test } from 'vitest';
 import { ManifestForm } from '~/components/Manifest';
 
diff --git a/client/app/components/Manifest/ManifestForm.tsx b/client/app/components/Manifest/ManifestForm.tsx
index cabef3619..fd95c46a4 100644
--- a/client/app/components/Manifest/ManifestForm.tsx
+++ b/client/app/components/Manifest/ManifestForm.tsx
@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { HtCard, HtForm } from 'app/components/legacyUi';
+import { HtCard, HtForm } from '~/components/legacyUi';
 import React, { createContext, useEffect, useState } from 'react';
 import { Container, Stack } from 'react-bootstrap';
 import { FormProvider, SubmitHandler, useFieldArray, useForm } from 'react-hook-form';
diff --git a/client/app/components/Manifest/NewManifestBtn.tsx b/client/app/components/Manifest/NewManifestBtn.tsx
index a77fda852..f635cc69a 100644
--- a/client/app/components/Manifest/NewManifestBtn.tsx
+++ b/client/app/components/Manifest/NewManifestBtn.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Button } from 'react-bootstrap';
 import { useNavigate } from 'react-router-dom';
 
diff --git a/client/app/components/Manifest/QuickerSign/QuickerSignForm.spec.tsx b/client/app/components/Manifest/QuickerSign/QuickerSignForm.spec.tsx
index a9e0c2010..2b6099899 100644
--- a/client/app/components/Manifest/QuickerSign/QuickerSignForm.spec.tsx
+++ b/client/app/components/Manifest/QuickerSign/QuickerSignForm.spec.tsx
@@ -1,6 +1,6 @@
 import { QuickerSignForm } from '~/components/Manifest/QuickerSign';
-import React from 'react';
-import { cleanup, renderWithProviders, screen } from 'app/mocks';
+
+import { cleanup, renderWithProviders, screen } from '~/mocks';
 import { createMockMTNHandler } from '~/mocks/fixtures';
 import { afterEach, describe, expect, test } from 'vitest';
 
diff --git a/client/app/components/Manifest/QuickerSign/QuickerSignForm.tsx b/client/app/components/Manifest/QuickerSign/QuickerSignForm.tsx
index eab205e67..7534b59b3 100644
--- a/client/app/components/Manifest/QuickerSign/QuickerSignForm.tsx
+++ b/client/app/components/Manifest/QuickerSign/QuickerSignForm.tsx
@@ -1,11 +1,10 @@
-import { faFileSignature, faPen } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { HtForm } from 'app/components/legacyUi';
 import React, { useEffect, useState } from 'react';
 import { Button, Col, Container, Form, ListGroup, Row, Stack } from 'react-bootstrap';
 import { SubmitHandler, useForm } from 'react-hook-form';
+import { FaFileSignature, FaPen } from 'react-icons/fa';
 import { useNavigate } from 'react-router-dom';
 import { z } from 'zod';
+import { HtForm } from '~/components/legacyUi';
 import { Handler, RcraSiteType } from '~/components/Manifest/manifestSchema';
 import { Transporter } from '~/components/Manifest/Transporter';
 import { useProgressTracker } from '~/hooks';
@@ -160,7 +159,7 @@ export function QuickerSignForm({ mtn, mtnHandler, handleClose, siteType }: Quic
               {mtn.map((value) => {
                 return (
                   <ListGroup.Item key={value}>
-                    <FontAwesomeIcon icon={faFileSignature} className="text-success" />
+                    <FaFileSignature className="text-success" />
                     {` ${value}`}
                   </ListGroup.Item>
                 );
@@ -173,7 +172,7 @@ export function QuickerSignForm({ mtn, mtnHandler, handleClose, siteType }: Quic
             </Button>
             <Button variant="success" type="submit">
               <span>Submit Signature </span>
-              <FontAwesomeIcon icon={faPen} />
+              <FaPen />
             </Button>
           </Stack>
         </Container>
diff --git a/client/app/components/Manifest/QuickerSign/QuickerSignModal.tsx b/client/app/components/Manifest/QuickerSign/QuickerSignModal.tsx
index e4b07f083..a125c6941 100644
--- a/client/app/components/Manifest/QuickerSign/QuickerSignModal.tsx
+++ b/client/app/components/Manifest/QuickerSign/QuickerSignModal.tsx
@@ -1,5 +1,5 @@
-import { HtModal } from 'app/components/legacyUi';
-import React from 'react';
+import { HtModal } from '~/components/legacyUi';
+
 import { Handler, RcraSiteType } from '~/components/Manifest/manifestSchema';
 import { QuickerSignForm } from './QuickerSignForm';
 
diff --git a/client/app/components/Manifest/QuickerSign/SignBtn/QuickSignBtn.spec.tsx b/client/app/components/Manifest/QuickerSign/SignBtn/QuickSignBtn.spec.tsx
index 2e2065b59..1e89d78e7 100644
--- a/client/app/components/Manifest/QuickerSign/SignBtn/QuickSignBtn.spec.tsx
+++ b/client/app/components/Manifest/QuickerSign/SignBtn/QuickSignBtn.spec.tsx
@@ -2,10 +2,10 @@ import { ManifestContext } from '~/components/Manifest/ManifestForm';
 import { Handler, RcraSiteType } from '~/components/Manifest/manifestSchema';
 import { QuickSignBtn } from '~/components/Manifest/QuickerSign/index';
 import { setupServer } from 'msw/node';
-import React from 'react';
-import { cleanup, renderWithProviders, screen } from 'app/mocks';
+
+import { cleanup, renderWithProviders, screen } from '~/mocks';
 import { createMockMTNHandler } from '~/mocks/fixtures';
-import { mockUserEndpoints } from 'app/mocks/handlers';
+import { mockUserEndpoints } from '~/mocks/handlers';
 import { afterAll, afterEach, beforeAll, describe, expect, test, vi } from 'vitest';
 import { undefined } from 'zod';
 
diff --git a/client/app/components/Manifest/QuickerSign/SignBtn/QuickSignBtn.tsx b/client/app/components/Manifest/QuickerSign/SignBtn/QuickSignBtn.tsx
index c49414bd1..2f3f8a57b 100644
--- a/client/app/components/Manifest/QuickerSign/SignBtn/QuickSignBtn.tsx
+++ b/client/app/components/Manifest/QuickerSign/SignBtn/QuickSignBtn.tsx
@@ -1,11 +1,10 @@
-import { faFeather } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { createSelector } from '@reduxjs/toolkit';
+import React, { useContext, useMemo } from 'react';
+import { ButtonProps } from 'react-bootstrap';
+import { FaFeather } from 'react-icons/fa';
 import { ManifestContext } from '~/components/Manifest/ManifestForm';
 import { Handler } from '~/components/Manifest/manifestSchema';
 import { RcraApiUserBtn } from '~/components/Rcrainfo';
-import React, { useContext, useMemo } from 'react';
-import { ButtonProps } from 'react-bootstrap';
 import { ProfileSlice, useGetProfileQuery } from '~/store';
 
 interface QuickSignBtnProps extends ButtonProps {
@@ -46,7 +45,7 @@ export function QuickSignBtn({ mtnHandler, iconOnly = false, ...props }: QuickSi
   return (
     <RcraApiUserBtn {...props}>
       {iconOnly ? '' : 'Sign '}
-      <FontAwesomeIcon icon={faFeather} />
+      <FaFeather />
     </RcraApiUserBtn>
   );
 }
diff --git a/client/app/components/Manifest/SiteSelect/SiteSelect.spec.tsx b/client/app/components/Manifest/SiteSelect/SiteSelect.spec.tsx
index ecb20f61e..07c756a64 100644
--- a/client/app/components/Manifest/SiteSelect/SiteSelect.spec.tsx
+++ b/client/app/components/Manifest/SiteSelect/SiteSelect.spec.tsx
@@ -2,7 +2,7 @@ import { screen } from '@testing-library/react';
 import { SiteSelect } from '~/components/Manifest/SiteSelect/SiteSelect';
 import React, { useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { renderWithProviders } from 'app/mocks';
+import { renderWithProviders } from '~/mocks';
 import { describe, expect, test } from 'vitest';
 
 function TestComponent() {
diff --git a/client/app/components/Manifest/SiteSelect/SiteSelect.tsx b/client/app/components/Manifest/SiteSelect/SiteSelect.tsx
index 92ca1bb1e..83fc65c1a 100644
--- a/client/app/components/Manifest/SiteSelect/SiteSelect.tsx
+++ b/client/app/components/Manifest/SiteSelect/SiteSelect.tsx
@@ -1,9 +1,9 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { HtForm } from 'app/components/legacyUi';
+import { HtForm } from '~/components/legacyUi';
 import React, { useMemo } from 'react';
 import { Control, Controller } from 'react-hook-form';
 import Select from 'react-select';
-import { HaztrakSite } from 'app/components/Site';
+import { HaztrakSite } from '~/components/Site';
 import { RcraSite } from '~/components/RcraSite';
 import { useGetUserHaztrakSitesQuery } from '~/store';
 
diff --git a/client/app/components/Manifest/SiteSelect/SiteTypeSelect.spec.tsx b/client/app/components/Manifest/SiteSelect/SiteTypeSelect.spec.tsx
index c2688523f..38cf5aaa3 100644
--- a/client/app/components/Manifest/SiteSelect/SiteTypeSelect.spec.tsx
+++ b/client/app/components/Manifest/SiteSelect/SiteTypeSelect.spec.tsx
@@ -3,12 +3,12 @@ import { RcraSiteType } from '~/components/Manifest/manifestSchema';
 import { SiteTypeSelect } from '~/components/Manifest/SiteSelect/SiteTypeSelect';
 import React, { useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { renderWithProviders } from 'app/mocks';
+import { renderWithProviders } from '~/mocks';
 import { describe, expect, test } from 'vitest';
 
 function TestComponent({ siteType }: { siteType?: RcraSiteType }) {
   const [mockSiteType, setMockSiteType] = useState();
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
   const handleChange = (siteType: any) => setMockSiteType(siteType);
   const { control } = useForm();
   return (
diff --git a/client/app/components/Manifest/SiteSelect/SiteTypeSelect.tsx b/client/app/components/Manifest/SiteSelect/SiteTypeSelect.tsx
index 4e592fcc5..9340f757b 100644
--- a/client/app/components/Manifest/SiteSelect/SiteTypeSelect.tsx
+++ b/client/app/components/Manifest/SiteSelect/SiteTypeSelect.tsx
@@ -1,5 +1,5 @@
-import { HtForm } from 'app/components/legacyUi';
-import React from 'react';
+import { HtForm } from '~/components/legacyUi';
+
 import { Form } from 'react-bootstrap';
 import { Control, Controller } from 'react-hook-form';
 import { RcraSiteType } from '~/components/Manifest/manifestSchema';
diff --git a/client/app/components/Manifest/Transporter/TransporterRowActions.tsx b/client/app/components/Manifest/Transporter/TransporterRowActions.tsx
index e89a01c48..aa26e3642 100644
--- a/client/app/components/Manifest/Transporter/TransporterRowActions.tsx
+++ b/client/app/components/Manifest/Transporter/TransporterRowActions.tsx
@@ -1,15 +1,8 @@
-import {
-  faArrowDown,
-  faArrowUp,
-  faEllipsisVertical,
-  faEye,
-  faEyeSlash,
-  faTrash,
-} from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { MouseEventHandler, ReactElement, useState } from 'react';
 import { Col, Dropdown, Row, useAccordionButton } from 'react-bootstrap';
 import { UseFieldArrayRemove, UseFieldArraySwap } from 'react-hook-form';
+import { FaArrowDown, FaArrowUp, FaEye, FaEyeSlash, FaTrash } from 'react-icons/fa';
+import { FaEllipsisVertical } from 'react-icons/fa6';
 
 interface TranRowActionProps {
   index: number;
@@ -47,9 +40,7 @@ export function TransporterRowActions({
   const actions: RowDropdownItems[] = [
     {
       text: 'Move up',
-      icon: (
-        <FontAwesomeIcon icon={faArrowUp} className={isFirst ? 'text-secondary' : 'text-primary'} />
-      ),
+      icon: <FaArrowUp className={isFirst ? 'text-secondary' : 'text-primary'} />,
       onClick: () => {
         swapTransporter(index, index - 1);
       },
@@ -58,12 +49,7 @@ export function TransporterRowActions({
     },
     {
       text: 'Move Down',
-      icon: (
-        <FontAwesomeIcon
-          icon={faArrowDown}
-          className={isLast ? 'text-secondary' : 'text-primary'}
-        />
-      ),
+      icon: <FaArrowDown className={isLast ? 'text-secondary' : 'text-primary'} />,
       onClick: () => {
         swapTransporter(index, index + 1);
       },
@@ -72,7 +58,7 @@ export function TransporterRowActions({
     },
     {
       text: 'Remove',
-      icon: <FontAwesomeIcon icon={faTrash} className="text-danger" />,
+      icon: <FaTrash className="text-danger" />,
       onClick: () => {
         removeTransporter(index);
       },
@@ -81,7 +67,7 @@ export function TransporterRowActions({
     },
     {
       text: open ? 'Close' : 'Details',
-      icon: <FontAwesomeIcon icon={open ? faEyeSlash : faEye} className="text-info" />,
+      icon: open ? <FaEyeSlash /> : <FaEye />,
       onClick: (event) => {
         decoratedOnClick(event);
       },
@@ -97,7 +83,7 @@ export function TransporterRowActions({
           title={`transporter ${index + 1} actions`}
           className="bg-transparent border-0 text-dark no-caret justify-content-end"
         >
-          <FontAwesomeIcon icon={faEllipsisVertical} className="pe-2 shadow-none" />
+          <FaEllipsisVertical className="pe-2 shadow-none" />
         </Dropdown.Toggle>
         <Dropdown.Menu>
           {actions.map((action, i) => {
diff --git a/client/app/components/Manifest/Transporter/TransporterSection.tsx b/client/app/components/Manifest/Transporter/TransporterSection.tsx
index 674f7726d..083409e62 100644
--- a/client/app/components/Manifest/Transporter/TransporterSection.tsx
+++ b/client/app/components/Manifest/Transporter/TransporterSection.tsx
@@ -1,5 +1,5 @@
 import { ErrorMessage } from '@hookform/error-message';
-import { HtButton } from 'app/components/legacyUi';
+import { HtButton } from '~/components/legacyUi';
 import { Alert } from 'react-bootstrap';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 import { v4 as uuidv4 } from 'uuid';
diff --git a/client/app/components/Manifest/Transporter/TransporterTable.spec.tsx b/client/app/components/Manifest/Transporter/TransporterTable.spec.tsx
index 28b5cbe2d..be42dd93a 100644
--- a/client/app/components/Manifest/Transporter/TransporterTable.spec.tsx
+++ b/client/app/components/Manifest/Transporter/TransporterTable.spec.tsx
@@ -1,10 +1,10 @@
 import userEvent from '@testing-library/user-event';
 import { Transporter } from '~/components/Manifest';
 import { setupServer } from 'msw/node';
-import React from 'react';
-import { cleanup, renderWithProviders, screen } from 'app/mocks';
+
+import { cleanup, renderWithProviders, screen } from '~/mocks';
 import { createMockTransporter } from '~/mocks/fixtures';
-import { mockUserEndpoints } from 'app/mocks/handlers';
+import { mockUserEndpoints } from '~/mocks/handlers';
 import { afterAll, afterEach, beforeAll, describe, expect, test } from 'vitest';
 import { TransporterTable } from './index';
 
diff --git a/client/app/components/Manifest/Transporter/TransporterTable.tsx b/client/app/components/Manifest/Transporter/TransporterTable.tsx
index a4a5b1dfe..af97f8d3e 100644
--- a/client/app/components/Manifest/Transporter/TransporterTable.tsx
+++ b/client/app/components/Manifest/Transporter/TransporterTable.tsx
@@ -1,14 +1,13 @@
 import { useAutoAnimate } from '@formkit/auto-animate/react';
-import { faAngleRight, faCheck, faSignature } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Transporter } from '~/components/Manifest';
-import { Manifest } from '~/components/Manifest/manifestSchema';
-import { QuickSignBtn } from '~/components/Manifest/QuickerSign';
-import { useReadOnly } from '~/hooks/manifest';
 import React, { useState } from 'react';
 import { Accordion, Button, Card, Col, Row, Table, useAccordionButton } from 'react-bootstrap';
 import { UseFieldArrayReturn } from 'react-hook-form';
+import { FaAngleRight, FaCheck, FaSignature } from 'react-icons/fa';
 import { v4 as uuidv4 } from 'uuid';
+import { Transporter } from '~/components/Manifest';
+import { Manifest } from '~/components/Manifest/manifestSchema';
+import { QuickSignBtn } from '~/components/Manifest/QuickerSign';
+import { useReadOnly } from '~/hooks/manifest';
 import { TransporterRowActions } from './TransporterRowActions';
 
 interface TransporterTableProps {
@@ -17,7 +16,6 @@ interface TransporterTableProps {
   setupSign: () => void;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function CustomToggle({ eventKey }: any) {
   const [open, setOpen] = useState(false);
   const decoratedOnClick = useAccordionButton(eventKey, () => setOpen(!open));
@@ -28,10 +26,7 @@ function CustomToggle({ eventKey }: any) {
       className="bg-transparent border-0 text-dark"
       title="more info"
     >
-      <FontAwesomeIcon
-        icon={faAngleRight}
-        className={`sb-sidenav-collapse-arrow ${open ? 'rotate-90' : ''} `}
-      />
+      <FaAngleRight className={`sb-sidenav-collapse-arrow ${open ? 'rotate-90' : ''} `} />
     </Button>
   );
 }
@@ -71,7 +66,7 @@ function TransporterTable({ transporters, arrayFieldMethods, setupSign }: Transp
                       disabled={transporter.signed}
                     />
                   ) : transporter.signed ? (
-                    <FontAwesomeIcon icon={faSignature} />
+                    <FaSignature />
                   ) : (
                     <></>
                   )}
@@ -105,7 +100,7 @@ function TransporterTable({ transporters, arrayFieldMethods, setupSign }: Transp
                         <td>{transporter.epaSiteId}</td>
                         <td>{transporter.contact.phone?.number}</td>
                         <td className="text-success text-center">
-                          {transporter ? <FontAwesomeIcon icon={faCheck} /> : 'no'}
+                          {transporter ? <FaCheck /> : 'no'}
                         </td>
                       </tr>
                     </tbody>
diff --git a/client/app/components/Manifest/Tsdf/TsdfSection.spec.tsx b/client/app/components/Manifest/Tsdf/TsdfSection.spec.tsx
index 41db1783a..b69afe2ca 100644
--- a/client/app/components/Manifest/Tsdf/TsdfSection.spec.tsx
+++ b/client/app/components/Manifest/Tsdf/TsdfSection.spec.tsx
@@ -1,4 +1,4 @@
-import { cleanup, renderWithProviders, screen } from 'app/mocks';
+import { cleanup, renderWithProviders, screen } from '~/mocks';
 import { createMockHandler } from '~/mocks/fixtures';
 import { afterEach, describe, expect, test } from 'vitest';
 import { TsdfSection } from './TsdfSection';
diff --git a/client/app/components/Manifest/Tsdf/TsdfSection.tsx b/client/app/components/Manifest/Tsdf/TsdfSection.tsx
index 41a33eb00..16647f0e4 100644
--- a/client/app/components/Manifest/Tsdf/TsdfSection.tsx
+++ b/client/app/components/Manifest/Tsdf/TsdfSection.tsx
@@ -1,12 +1,12 @@
 import { ErrorMessage } from '@hookform/error-message';
-import { HtButton, HtSpinner } from 'app/components/legacyUi';
+import { HtButton, HtSpinner } from '~/components/legacyUi';
 import React, { useEffect } from 'react';
 import { Alert, Col } from 'react-bootstrap';
 import { useFormContext } from 'react-hook-form';
 import { useSearchParams } from 'react-router-dom';
 import { Handler, Manifest } from '~/components/Manifest/manifestSchema';
 import { QuickSignBtn } from '~/components/Manifest/QuickerSign';
-import { RcraSiteDetails } from '~/components/RcraSite';
+import { RcraSiteDetails } from '~/components/RcraSite/RcraSiteDetails';
 import { useReadOnly } from '~/hooks/manifest';
 import { useHandlerSearchConfig } from '~/hooks/manifest/useOpenHandlerSearch/useHandlerSearchConfig';
 import { useGetRcrainfoSiteQuery } from '~/store';
diff --git a/client/app/components/Manifest/UpdateRcra/UpdateRcra.tsx b/client/app/components/Manifest/UpdateRcra/UpdateRcra.tsx
index 39f698e3d..80ebdc524 100644
--- a/client/app/components/Manifest/UpdateRcra/UpdateRcra.tsx
+++ b/client/app/components/Manifest/UpdateRcra/UpdateRcra.tsx
@@ -1,4 +1,4 @@
-import { HtSpinner } from 'app/components/legacyUi';
+import { HtSpinner } from '~/components/legacyUi';
 import React, { useEffect } from 'react';
 import { Navigate } from 'react-router-dom';
 import { addAlert, useAppDispatch, useGetTaskStatusQuery } from '~/store';
diff --git a/client/app/components/Manifest/WasteLine/EditWasteModal.tsx b/client/app/components/Manifest/WasteLine/EditWasteModal.tsx
index 7769bc3fe..1d8c94d05 100644
--- a/client/app/components/Manifest/WasteLine/EditWasteModal.tsx
+++ b/client/app/components/Manifest/WasteLine/EditWasteModal.tsx
@@ -1,4 +1,4 @@
-import { HtModal } from 'app/components/legacyUi';
+import { HtModal } from '~/components/legacyUi';
 import React, { useContext } from 'react';
 import { Col, Row } from 'react-bootstrap';
 import { UseFieldArrayReturn } from 'react-hook-form';
diff --git a/client/app/components/Manifest/WasteLine/HazardousWasteForm/HazardousWasteForm.tsx b/client/app/components/Manifest/WasteLine/HazardousWasteForm/HazardousWasteForm.tsx
index af634753e..4a7868808 100644
--- a/client/app/components/Manifest/WasteLine/HazardousWasteForm/HazardousWasteForm.tsx
+++ b/client/app/components/Manifest/WasteLine/HazardousWasteForm/HazardousWasteForm.tsx
@@ -1,5 +1,5 @@
 import { ErrorMessage } from '@hookform/error-message';
-import { HtForm } from 'app/components/legacyUi';
+import { HtForm } from '~/components/legacyUi';
 import React, { useContext } from 'react';
 import { Col, Row } from 'react-bootstrap';
 import { Controller, useFormContext } from 'react-hook-form';
diff --git a/client/app/components/Manifest/WasteLine/HazardousWasteForm/StateWasteCodeSelect.tsx b/client/app/components/Manifest/WasteLine/HazardousWasteForm/StateWasteCodeSelect.tsx
index b29a9d825..b1bf1b62b 100644
--- a/client/app/components/Manifest/WasteLine/HazardousWasteForm/StateWasteCodeSelect.tsx
+++ b/client/app/components/Manifest/WasteLine/HazardousWasteForm/StateWasteCodeSelect.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import Select, { components } from 'react-select';
 import { useGetStateWasteCodesQuery } from '~/store';
@@ -43,7 +42,7 @@ export function StateWasteCodeSelect({ stateId, fieldName }: StateWasteCodeSelec
    * see SO question here
    * https://stackoverflow.com/questions/52482985/react-select-show-different-text-label-for-drop-down-and-control
    */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
   const MultiValue = (props: any) => (
     <components.MultiValue {...props}>{props.data.code}</components.MultiValue>
   );
diff --git a/client/app/components/Manifest/WasteLine/QuantityForm.spec.tsx b/client/app/components/Manifest/WasteLine/QuantityForm.spec.tsx
index 941ac6dc4..70a22e4ea 100644
--- a/client/app/components/Manifest/WasteLine/QuantityForm.spec.tsx
+++ b/client/app/components/Manifest/WasteLine/QuantityForm.spec.tsx
@@ -1,6 +1,6 @@
 import { QuantityForm } from '~/components/Manifest/WasteLine/QuantityForm';
-import React from 'react';
-import { cleanup, renderWithProviders, screen } from 'app/mocks';
+
+import { cleanup, renderWithProviders, screen } from '~/mocks';
 import { afterEach, describe, expect, test } from 'vitest';
 
 afterEach(() => cleanup());
diff --git a/client/app/components/Manifest/WasteLine/QuantityForm.tsx b/client/app/components/Manifest/WasteLine/QuantityForm.tsx
index 65a404f85..0cbe00f0e 100644
--- a/client/app/components/Manifest/WasteLine/QuantityForm.tsx
+++ b/client/app/components/Manifest/WasteLine/QuantityForm.tsx
@@ -1,6 +1,6 @@
 import { ErrorMessage } from '@hookform/error-message';
-import { HtForm } from 'app/components/legacyUi';
-import React from 'react';
+import { HtForm } from '~/components/legacyUi';
+
 import { Col, Form, Row } from 'react-bootstrap';
 import { Controller, useFormContext } from 'react-hook-form';
 import Select from 'react-select';
diff --git a/client/app/components/Manifest/WasteLine/WasteLineForm.spec.tsx b/client/app/components/Manifest/WasteLine/WasteLineForm.spec.tsx
index 0244527bd..979ac30af 100644
--- a/client/app/components/Manifest/WasteLine/WasteLineForm.spec.tsx
+++ b/client/app/components/Manifest/WasteLine/WasteLineForm.spec.tsx
@@ -1,8 +1,8 @@
 import userEvent from '@testing-library/user-event';
 import { setupServer } from 'msw/node';
-import React from 'react';
-import { cleanup, renderWithProviders, screen } from 'app/mocks';
-import { mockUserEndpoints, mockWasteEndpoints } from 'app/mocks/handlers';
+
+import { cleanup, renderWithProviders, screen } from '~/mocks';
+import { mockUserEndpoints, mockWasteEndpoints } from '~/mocks/handlers';
 import { afterAll, afterEach, beforeAll, describe, expect, test } from 'vitest';
 import { WasteLineForm } from './WasteLineForm';
 
diff --git a/client/app/components/Manifest/WasteLine/WasteLineForm.tsx b/client/app/components/Manifest/WasteLine/WasteLineForm.tsx
index 64f4989ec..6c7bde24d 100644
--- a/client/app/components/Manifest/WasteLine/WasteLineForm.tsx
+++ b/client/app/components/Manifest/WasteLine/WasteLineForm.tsx
@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { HtCard, HtForm } from 'app/components/legacyUi';
+import { HtCard, HtForm } from '~/components/legacyUi';
 import React, { useContext, useState } from 'react';
 import { Button, Col, Container, Form, Row, Stack } from 'react-bootstrap';
 import { Controller, FormProvider, UseFieldArrayReturn, useForm } from 'react-hook-form';
diff --git a/client/app/components/Manifest/WasteLine/WasteLineSection.tsx b/client/app/components/Manifest/WasteLine/WasteLineSection.tsx
index 9d9383d49..2edf49220 100644
--- a/client/app/components/Manifest/WasteLine/WasteLineSection.tsx
+++ b/client/app/components/Manifest/WasteLine/WasteLineSection.tsx
@@ -1,6 +1,6 @@
 import { ErrorMessage } from '@hookform/error-message';
-import { HtButton } from 'app/components/legacyUi';
-import React from 'react';
+import { HtButton } from '~/components/legacyUi';
+
 import { Alert } from 'react-bootstrap';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 import { Manifest } from '~/components/Manifest/manifestSchema';
diff --git a/client/app/components/Manifest/WasteLine/WasteLineTable/WasteLineTable.spec.tsx b/client/app/components/Manifest/WasteLine/WasteLineTable/WasteLineTable.spec.tsx
index 597983459..c2d36b619 100644
--- a/client/app/components/Manifest/WasteLine/WasteLineTable/WasteLineTable.spec.tsx
+++ b/client/app/components/Manifest/WasteLine/WasteLineTable/WasteLineTable.spec.tsx
@@ -1,9 +1,9 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import { WasteLineTable } from '~/components/Manifest/WasteLine/WasteLineTable/WasteLineTable';
-import { ManifestContext, ManifestContextType } from '~/components/Manifest/ManifestForm';
-import { useReadOnly } from '~/hooks/manifest';
+import { render, screen } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { ManifestContext, ManifestContextType } from '~/components/Manifest/ManifestForm';
 import { WasteLine } from '~/components/Manifest/WasteLine';
+import { WasteLineTable } from '~/components/Manifest/WasteLine/WasteLineTable/WasteLineTable';
+import { useReadOnly } from '~/hooks/manifest';
 import { createMockWaste } from '~/mocks/fixtures/mockWaste';
 
 vi.mock('~/hooks/manifest', () => ({
@@ -80,16 +80,4 @@ describe('WasteLineTable', () => {
     );
     expect(screen.getByTitle('more info')).toBeInTheDocument();
   });
-
-  it('toggles accordion on CustomToggle click', () => {
-    vi.mocked(useReadOnly).mockReturnValue([true, (_newReadOnly) => {}]);
-    render(
-      <ManifestContext.Provider value={mockContextValue}>
-        <WasteLineTable wastes={mockWastes} toggleWLModal={vi.fn()} wasteForm={mockWasteForm} />
-      </ManifestContext.Provider>
-    );
-    const toggleButton = screen.getByTitle('more info');
-    fireEvent.click(toggleButton);
-    expect(toggleButton.querySelector('.rotate-90')).toBeInTheDocument();
-  });
 });
diff --git a/client/app/components/Manifest/WasteLine/WasteLineTable/WasteLineTable.tsx b/client/app/components/Manifest/WasteLine/WasteLineTable/WasteLineTable.tsx
index 823316aef..7a531c874 100644
--- a/client/app/components/Manifest/WasteLine/WasteLineTable/WasteLineTable.tsx
+++ b/client/app/components/Manifest/WasteLine/WasteLineTable/WasteLineTable.tsx
@@ -1,14 +1,14 @@
 import { useAutoAnimate } from '@formkit/auto-animate/react';
-import { faAngleRight, faCheckCircle, faCircleXmark } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React, { useContext, useState } from 'react';
+import { Accordion, Button, Card, Col, Row, useAccordionButton } from 'react-bootstrap';
+import { UseFieldArrayReturn } from 'react-hook-form';
+import { FaAngleRight, FaCheckCircle } from 'react-icons/fa';
+import { FaCircleXmark } from 'react-icons/fa6';
 import { Manifest } from '~/components/Manifest';
 import { ManifestContext, ManifestContextType } from '~/components/Manifest/ManifestForm';
 import { WasteLine } from '~/components/Manifest/WasteLine/wasteLineSchema';
 import { WasteRowActions } from '~/components/Manifest/WasteLine/WasteLineTable/WasteRowActions';
 import { useReadOnly } from '~/hooks/manifest';
-import React, { useContext, useState } from 'react';
-import { Accordion, Button, Card, Col, Row, useAccordionButton } from 'react-bootstrap';
-import { UseFieldArrayReturn } from 'react-hook-form';
 
 interface WasteLineTableProps {
   wastes: WasteLine[];
@@ -44,9 +44,10 @@ const CustomToggle = ({ eventKey }: any) => {
       className="bg-transparent border-0 text-dark me-2"
       title="more info"
     >
-      <FontAwesomeIcon
-        icon={faAngleRight}
-        className={`sb-sidenav-collapse-arrow ${open ? 'rotate-90' : ''} `}
+      <FaAngleRight
+        className={` sb-sidenav-collapse-arrow tw-transform tw-transition-all ${
+          open ? 'tw-rotate-90' : ''
+        } `}
       />
     </Button>
   );
@@ -76,7 +77,7 @@ export function WasteLineTable({ wastes, toggleWLModal, wasteForm }: WasteLineTa
                 </Col>
                 <Col className="d-flex justify-content-end align-items-center" xs={2}>
                   {readOnly ? (
-                    <CustomToggle eventKey={waste.lineNumber.toString()}></CustomToggle>
+                    <CustomToggle eventKey={waste.lineNumber.toString()} />
                   ) : (
                     <WasteRowActions
                       wasteForm={wasteForm}
@@ -101,9 +102,9 @@ export function WasteLineTable({ wastes, toggleWLModal, wasteForm }: WasteLineTa
                       <small className="fw-bold">Federal Waste</small>
                       <p>
                         {waste.epaWaste ? (
-                          <FontAwesomeIcon icon={faCheckCircle} className="text-success" />
+                          <FaCheckCircle className="test-success" />
                         ) : (
-                          <FontAwesomeIcon icon={faCircleXmark} className="text-danger" />
+                          <FaCircleXmark className="text-danger" />
                         )}
                       </p>
                     </Col>
@@ -111,9 +112,9 @@ export function WasteLineTable({ wastes, toggleWLModal, wasteForm }: WasteLineTa
                       <small className="fw-bold">DOT Haz Material</small>
                       <p>
                         {waste.dotHazardous ? (
-                          <FontAwesomeIcon icon={faCheckCircle} className="text-success" />
+                          <FaCheckCircle className="test-success" />
                         ) : (
-                          <FontAwesomeIcon icon={faCircleXmark} className="text-danger" />
+                          <FaCircleXmark className="text-danger" />
                         )}
                       </p>
                     </Col>
@@ -121,9 +122,9 @@ export function WasteLineTable({ wastes, toggleWLModal, wasteForm }: WasteLineTa
                       <small className="fw-bold">PCB Waste</small>
                       <p>
                         {waste.pcb ? (
-                          <FontAwesomeIcon icon={faCheckCircle} className="text-success" />
+                          <FaCheckCircle className="test-success" />
                         ) : (
-                          <FontAwesomeIcon icon={faCircleXmark} className="text-danger" />
+                          <FaCircleXmark className="text-danger" />
                         )}
                       </p>
                     </Col>
diff --git a/client/app/components/Manifest/WasteLine/WasteLineTable/WasteRowActions.tsx b/client/app/components/Manifest/WasteLine/WasteLineTable/WasteRowActions.tsx
index cd404a97e..3a50b88ff 100644
--- a/client/app/components/Manifest/WasteLine/WasteLineTable/WasteRowActions.tsx
+++ b/client/app/components/Manifest/WasteLine/WasteLineTable/WasteRowActions.tsx
@@ -1,15 +1,8 @@
-import {
-  faEllipsisVertical,
-  faEye,
-  faEyeSlash,
-  faPen,
-  faTrash,
-} from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Manifest } from '~/components/Manifest';
 import React, { MouseEventHandler, ReactElement, useState } from 'react';
 import { Col, Dropdown, Row, useAccordionButton } from 'react-bootstrap';
 import { UseFieldArrayReturn } from 'react-hook-form';
+import { FaEllipsisV, FaEye, FaEyeSlash, FaPen, FaTrash } from 'react-icons/fa';
+import { Manifest } from '~/components/Manifest';
 
 interface WasteRowActionProps {
   index: number;
@@ -44,7 +37,7 @@ function WasteRowActions({
   const actions: RowDropdownItems[] = [
     {
       text: 'Remove',
-      icon: <FontAwesomeIcon icon={faTrash} className="text-danger" />,
+      icon: <FaTrash className="tw-text-destructive" />,
       onClick: () => {
         wasteForm.remove(index);
       },
@@ -53,7 +46,7 @@ function WasteRowActions({
     },
     {
       text: 'Edit',
-      icon: <FontAwesomeIcon icon={faPen} className="text-primary" />,
+      icon: <FaPen className="tw-text-secondary" />,
       onClick: () => {
         setEditWasteLine(index);
         toggleWLModal();
@@ -63,7 +56,7 @@ function WasteRowActions({
     },
     {
       text: open ? 'Close' : 'Details',
-      icon: <FontAwesomeIcon icon={open ? faEyeSlash : faEye} className="text-info" />,
+      icon: open ? <FaEyeSlash /> : <FaEye />,
       onClick: (event) => {
         decoratedOnClick(event);
       },
@@ -79,7 +72,7 @@ function WasteRowActions({
           title={`transporter ${index + 1} actions`}
           className="bg-transparent border-0 text-dark no-caret justify-content-end"
         >
-          <FontAwesomeIcon icon={faEllipsisVertical} className="pe-2 shadow-none" />
+          <FaEllipsisV className="tw-pe-2 tw-shadow-none" />
         </Dropdown.Toggle>
         <Dropdown.Menu>
           {actions.map((action, i) => {
diff --git a/client/app/components/Mtn/MtnRowActions.tsx b/client/app/components/Mtn/MtnRowActions.tsx
index 84b017c4b..40782b791 100644
--- a/client/app/components/Mtn/MtnRowActions.tsx
+++ b/client/app/components/Mtn/MtnRowActions.tsx
@@ -1,7 +1,6 @@
-import { faEllipsisVertical, faEye, faPen } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { MouseEventHandler, ReactElement } from 'react';
 import { Col, Dropdown, Row } from 'react-bootstrap';
+import { FaEllipsisV, FaEye, FaPen } from 'react-icons/fa';
 import { useNavigate } from 'react-router-dom';
 
 interface MtnRowActionsProps {
@@ -22,7 +21,7 @@ export function MtnRowActions({ mtn }: MtnRowActionsProps) {
   const actions: RowDropdownItems[] = [
     {
       text: 'View ',
-      icon: <FontAwesomeIcon icon={faEye} className="text-primary" />,
+      icon: <FaEye className="tw-text-secondary" />,
       onClick: () => {
         navigate(`./${mtn}/view`);
       },
@@ -31,7 +30,7 @@ export function MtnRowActions({ mtn }: MtnRowActionsProps) {
     },
     {
       text: 'Edit',
-      icon: <FontAwesomeIcon icon={faPen} className="text-primary" />,
+      icon: <FaPen className="tw-text-secondary" />,
       onClick: () => {
         navigate(`./${mtn}/edit`);
       },
@@ -47,7 +46,7 @@ export function MtnRowActions({ mtn }: MtnRowActionsProps) {
           title={`${mtn} actions`}
           className="bg-transparent border-0 text-dark no-caret justify-content-end"
         >
-          <FontAwesomeIcon icon={faEllipsisVertical} className="pe-2 shadow-none" />
+          <FaEllipsisV className="tw-pe-2 tw-shadow-none" />
         </Dropdown.Toggle>
         <Dropdown.Menu>
           {actions.map((action, i) => {
diff --git a/client/app/components/Mtn/MtnTable.spec.tsx b/client/app/components/Mtn/MtnTable.spec.tsx
index 46fb570b9..fe6a596e2 100644
--- a/client/app/components/Mtn/MtnTable.spec.tsx
+++ b/client/app/components/Mtn/MtnTable.spec.tsx
@@ -1,7 +1,7 @@
 import { fireEvent } from '@testing-library/react';
 import { MtnDetails, MtnTable } from '~/components/Mtn';
-import React from 'react';
-import { renderWithProviders, screen } from 'app/mocks';
+
+import { renderWithProviders, screen } from '~/mocks';
 import { describe, expect, test } from 'vitest';
 
 const DEFAULT_MTN_DETAILS: MtnDetails = {
diff --git a/client/app/components/Mtn/MtnTable.tsx b/client/app/components/Mtn/MtnTable.tsx
index 93a76e5d5..01df64256 100644
--- a/client/app/components/Mtn/MtnTable.tsx
+++ b/client/app/components/Mtn/MtnTable.tsx
@@ -1,5 +1,3 @@
-import { faSort, faSortDown, faSortUp } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { rankItem } from '@tanstack/match-sorter-utils';
 import {
   CellContext,
@@ -16,11 +14,12 @@ import {
   getSortedRowModel,
   useReactTable,
 } from '@tanstack/react-table';
-import { HtPageBtns, HtPageControls } from 'app/components/legacyUi';
 import React, { ChangeEvent, useState } from 'react';
 import { Button, Col, Table } from 'react-bootstrap';
+import { FaSort, FaSortDown, FaSortUp } from 'react-icons/fa';
 import { Link, useSearchParams } from 'react-router-dom';
 import { z } from 'zod';
+import { HtPageBtns, HtPageControls } from '~/components/legacyUi';
 import { MtnRowActions } from '~/components/Mtn/MtnRowActions';
 import { MtnSearchField } from '~/components/Mtn/MtnSearchField/MtnSearchField';
 import { MtnStatusField, StatusOption } from '~/components/Mtn/MtnStatusField/MtnStatusField';
@@ -182,21 +181,21 @@ export function MtnTable({ manifests }: MtnTableProps) {
                           asc: (
                             <>
                               {' '}
-                              <FontAwesomeIcon icon={faSortUp} className="text-info" />
+                              <FaSortUp className="text-info" />
                             </>
                           ),
                           // Column sort icon when descending order
                           desc: (
                             <>
                               {' '}
-                              <FontAwesomeIcon icon={faSortDown} className="text-info" />
+                              <FaSortDown className="text-info" />
                             </>
                           ),
                         }[header.column.getIsSorted() as string] ?? (
                           <>
                             {' '}
                             {/* Default column sort icon when not sorting by this column*/}
-                            <FontAwesomeIcon icon={faSort} className="text-info" />
+                            <FaSort className="text-info" />
                           </>
                         )}
                       </Button>
diff --git a/client/app/components/Org/OrgSelect.tsx b/client/app/components/Org/OrgSelect.tsx
index 3ab4edc84..ed221a8e8 100644
--- a/client/app/components/Org/OrgSelect.tsx
+++ b/client/app/components/Org/OrgSelect.tsx
@@ -32,14 +32,15 @@ export const OrgSelect = () => {
   };
 
   return (
-    <div data-testid="org-select">
+    <div data-testid="org-select" className="tw-min-w-full">
       <Select
         value={currentOrg}
         isLoading={isLoading}
         options={orgs?.map((org) => ({ label: org.name, value: org.slug }))}
         onChange={onChange}
         classNames={{
-          control: () => 'form-control p-0',
+          control: () => 'border border-gray-300 rounded-md',
+          container: () => 'tw-min-w-full',
         }}
       />
     </div>
diff --git a/client/app/components/Org/OrgSitesTable.tsx b/client/app/components/Org/OrgSitesTable.tsx
index 2edfc2f31..3724ac739 100644
--- a/client/app/components/Org/OrgSitesTable.tsx
+++ b/client/app/components/Org/OrgSitesTable.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
 import { Row, Table } from 'react-bootstrap';
-import { HaztrakSite } from 'app/components/Site';
+import { HaztrakSite } from '~/components/Site';
 import { Organization, useGetOrgSitesQuery } from '~/store';
 
 interface OrgSitesProps {
diff --git a/client/app/components/Org/UserOrg.tsx b/client/app/components/Org/UserOrg.tsx
index 28e85f8c4..1abf26207 100644
--- a/client/app/components/Org/UserOrg.tsx
+++ b/client/app/components/Org/UserOrg.tsx
@@ -1,8 +1,7 @@
-import { faCheck, faX } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { SiteAccess } from '~/components/User/SiteAccess';
-import React from 'react';
 import { Col, Row, Tab, Tabs } from 'react-bootstrap';
+import { FaCheck } from 'react-icons/fa';
+import { FaX } from 'react-icons/fa6';
+import { SiteAccess } from '~/components/User/SiteAccess';
 import { ProfileSlice } from '~/store';
 import { OrgSitesTable } from './OrgSitesTable';
 
@@ -31,11 +30,11 @@ export function UserOrg({ profile }: UserOrgProps) {
           <p>
             {profile.org.rcrainfoIntegrated ? (
               <span>
-                Yes <FontAwesomeIcon icon={faCheck} className="text-success" />
+                Yes <FaCheck className="text-success" />
               </span>
             ) : (
               <span>
-                No <FontAwesomeIcon icon={faX} className="text-danger" />
+                No <FaX className="text-danger" />
               </span>
             )}
           </p>
diff --git a/client/app/components/RcraProfile/RcraProfile.tsx b/client/app/components/RcraProfile/RcraProfile.tsx
index 220d9e6ae..c57910027 100644
--- a/client/app/components/RcraProfile/RcraProfile.tsx
+++ b/client/app/components/RcraProfile/RcraProfile.tsx
@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { HtForm, HtSpinner } from 'app/components/legacyUi';
+import { HtForm, HtSpinner } from '~/components/legacyUi';
 import React, { useEffect, useState } from 'react';
 import { Button, Col, Container, Form, Row, Table } from 'react-bootstrap';
 import { useForm } from 'react-hook-form';
diff --git a/client/app/components/RcraSite/AddressListGroup.tsx b/client/app/components/RcraSite/AddressListGroup.tsx
index 8ccdfe87d..0f407a065 100644
--- a/client/app/components/RcraSite/AddressListGroup.tsx
+++ b/client/app/components/RcraSite/AddressListGroup.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { ListGroup } from 'react-bootstrap';
 import { RcraAddress } from '~/components/RcraSite';
 
diff --git a/client/app/components/RcraSite/RcraSiteDetails.spec.tsx b/client/app/components/RcraSite/RcraSiteDetails.spec.tsx
index a787bd968..0ac1506d4 100644
--- a/client/app/components/RcraSite/RcraSiteDetails.spec.tsx
+++ b/client/app/components/RcraSite/RcraSiteDetails.spec.tsx
@@ -1,6 +1,6 @@
 import { RcraSiteDetails } from '~/components/RcraSite';
-import React from 'react';
-import { cleanup, renderWithProviders, screen } from 'app/mocks';
+
+import { cleanup, renderWithProviders, screen } from '~/mocks';
 import { createMockMTNHandler } from '~/mocks/fixtures';
 import { afterEach, describe, expect, test } from 'vitest';
 
diff --git a/client/app/components/RcraSite/RcraSiteDetails.tsx b/client/app/components/RcraSite/RcraSiteDetails.tsx
index 7d2f6c3a3..f2c3dadc9 100644
--- a/client/app/components/RcraSite/RcraSiteDetails.tsx
+++ b/client/app/components/RcraSite/RcraSiteDetails.tsx
@@ -1,9 +1,8 @@
-import { faCircleCheck, faCircleXmark, faSignature } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Col, Row } from 'react-bootstrap';
+import { FaSignature } from 'react-icons/fa';
+import { FaCircleCheck, FaCircleXmark } from 'react-icons/fa6';
 import { Handler } from '~/components/Manifest';
 import { AddressListGroup, RcraSite } from '~/components/RcraSite';
-import React from 'react';
-import { Col, Row } from 'react-bootstrap';
 
 interface RcraSiteDetailsProps {
   handler?: Handler | RcraSite;
@@ -27,7 +26,7 @@ export function RcraSiteDetails({ handler }: RcraSiteDetailsProps) {
         <Col className="d-flex justify-content-end">
           {'signed' in handler && handler.signed && (
             <p className="text-right">
-              signed <FontAwesomeIcon icon={faSignature} className="text-success" size="xl" />
+              signed <FaSignature className="text-success" size="xl" />
             </p>
           )}
         </Col>
@@ -42,18 +41,18 @@ export function RcraSiteDetails({ handler }: RcraSiteDetailsProps) {
             <p className="fw-bold">
               Can e-Sign:{' '}
               {handler.canEsign ? (
-                <FontAwesomeIcon icon={faCircleCheck} className="text-success align-text-bottom" />
+                <FaCircleCheck className="text-success align-text-bottom" />
               ) : (
-                <FontAwesomeIcon icon={faCircleXmark} className="text-danger align-text-bottom" />
+                <FaCircleXmark className="text-danger align-text-bottom" />
               )}
             </p>
           </div>
           <p className="fw-bold">
             Has registered e-Manifest user:{' '}
             {handler.hasRegisteredEmanifestUser ? (
-              <FontAwesomeIcon icon={faCircleCheck} className="text-success align-text-bottom" />
+              <FaCircleCheck className="text-success align-text-bottom" />
             ) : (
-              <FontAwesomeIcon icon={faCircleXmark} className="text-danger align-text-bottom" />
+              <FaCircleXmark className="text-danger align-text-bottom" />
             )}
           </p>
         </Col>
diff --git a/client/app/components/Rcrainfo/buttons/RcraApiUserBtn/RcraApiUserBtn.spec.tsx b/client/app/components/Rcrainfo/buttons/RcraApiUserBtn/RcraApiUserBtn.spec.tsx
index 56f74a558..0fd1bb88e 100644
--- a/client/app/components/Rcrainfo/buttons/RcraApiUserBtn/RcraApiUserBtn.spec.tsx
+++ b/client/app/components/Rcrainfo/buttons/RcraApiUserBtn/RcraApiUserBtn.spec.tsx
@@ -1,6 +1,6 @@
 import { RcraApiUserBtn } from '~/components/Rcrainfo/buttons/RcraApiUserBtn/RcraApiUserBtn';
-import React from 'react';
-import { cleanup, renderWithProviders, screen } from 'app/mocks';
+
+import { cleanup, renderWithProviders, screen } from '~/mocks';
 import { afterEach, describe, expect, test, vi } from 'vitest';
 
 afterEach(() => {
diff --git a/client/app/components/Rcrainfo/buttons/SyncManifestBtn/SyncManifestBtn.spec.tsx b/client/app/components/Rcrainfo/buttons/SyncManifestBtn/SyncManifestBtn.spec.tsx
index d325b8036..f8a9f4127 100644
--- a/client/app/components/Rcrainfo/buttons/SyncManifestBtn/SyncManifestBtn.spec.tsx
+++ b/client/app/components/Rcrainfo/buttons/SyncManifestBtn/SyncManifestBtn.spec.tsx
@@ -1,9 +1,9 @@
 import { SyncManifestBtn } from '~/components/Rcrainfo/buttons/SyncManifestBtn/SyncManifestBtn';
 import { http, HttpResponse } from 'msw';
 import { setupServer } from 'msw/node';
-import React from 'react';
-import { cleanup, renderWithProviders, screen } from 'app/mocks';
-import { mockUserEndpoints } from 'app/mocks/handlers';
+
+import { cleanup, renderWithProviders, screen } from '~/mocks';
+import { mockUserEndpoints } from '~/mocks/handlers';
 import { API_BASE_URL } from '~/mocks/handlers/mockSiteEndpoints';
 import { afterAll, afterEach, beforeAll, describe, expect, test, vi } from 'vitest';
 
diff --git a/client/app/components/Rcrainfo/buttons/SyncManifestBtn/SyncManifestBtn.tsx b/client/app/components/Rcrainfo/buttons/SyncManifestBtn/SyncManifestBtn.tsx
index 23bbc86fa..d353fea15 100644
--- a/client/app/components/Rcrainfo/buttons/SyncManifestBtn/SyncManifestBtn.tsx
+++ b/client/app/components/Rcrainfo/buttons/SyncManifestBtn/SyncManifestBtn.tsx
@@ -1,8 +1,7 @@
-import { faSync } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React, { useEffect, useState } from 'react';
+import { FaSync } from 'react-icons/fa';
 import { RcraApiUserBtn } from '~/components/Rcrainfo/buttons/RcraApiUserBtn/RcraApiUserBtn';
 import { useProgressTracker } from '~/hooks';
-import React, { useEffect, useState } from 'react';
 import { addTask, updateTask, useAppDispatch, useSyncEManifestMutation } from '~/store';
 
 interface SyncManifestProps {
@@ -65,7 +64,7 @@ export function SyncManifestBtn({
       }}
     >
       {`Sync Manifest `}
-      <FontAwesomeIcon icon={faSync} spin={syncInProgress} />
+      <FaSync className={syncInProgress ? 'tw-spin' : ''} />
     </RcraApiUserBtn>
   );
 }
diff --git a/client/app/components/Site/SiteFilter/SiteFilterForm.spec.tsx b/client/app/components/Site/SiteFilter/SiteFilterForm.spec.tsx
index 6443f4a85..d03e14c36 100644
--- a/client/app/components/Site/SiteFilter/SiteFilterForm.spec.tsx
+++ b/client/app/components/Site/SiteFilter/SiteFilterForm.spec.tsx
@@ -1,6 +1,6 @@
 import { screen } from '@testing-library/react';
 import React, { useState } from 'react';
-import { cleanup, renderWithProviders } from 'app/mocks';
+import { cleanup, renderWithProviders } from '~/mocks';
 import { afterEach, describe, expect, test } from 'vitest';
 import { createMockHandler, createMockSite } from '~/mocks/fixtures/mockHandler';
 import { SiteFilterForm } from '~/components/Site/SiteFilter/SiteFilterForm';
diff --git a/client/app/components/Site/SiteListGroup/SiteListGroup.spec.tsx b/client/app/components/Site/SiteListGroup/SiteListGroup.spec.tsx
index 1b80b1701..8e32ef8ee 100644
--- a/client/app/components/Site/SiteListGroup/SiteListGroup.spec.tsx
+++ b/client/app/components/Site/SiteListGroup/SiteListGroup.spec.tsx
@@ -1,6 +1,6 @@
 import { screen } from '@testing-library/react';
-import React from 'react';
-import { cleanup, renderWithProviders } from 'app/mocks';
+
+import { cleanup, renderWithProviders } from '~/mocks';
 import { afterEach, describe, expect, test } from 'vitest';
 import { SiteListGroup } from '~/components/Site/SiteListGroup/SiteListGroup';
 import { createMockHandler, createMockSite } from '~/mocks/fixtures/mockHandler';
@@ -9,10 +9,11 @@ afterEach(() => {
   cleanup();
 });
 
-const mySite2Handler = createMockHandler({ epaSiteId: 'TXD0192837465' });
-
 const mySite1 = createMockSite();
-const mySite2 = createMockSite({ name: 'My Second Site', handler: mySite2Handler });
+const mySite2 = createMockSite({
+  name: 'My Second Site',
+  handler: createMockHandler({ epaSiteId: 'TXD0192837465' }),
+});
 
 const mockSites = [mySite1, mySite2];
 
diff --git a/client/app/components/Site/SiteListItem/SiteListItem.spec.tsx b/client/app/components/Site/SiteListItem/SiteListItem.spec.tsx
index 41f2c117f..539d89e53 100644
--- a/client/app/components/Site/SiteListItem/SiteListItem.spec.tsx
+++ b/client/app/components/Site/SiteListItem/SiteListItem.spec.tsx
@@ -1,6 +1,6 @@
 import { screen } from '@testing-library/react';
-import React from 'react';
-import { cleanup, renderWithProviders } from 'app/mocks';
+
+import { cleanup, renderWithProviders } from '~/mocks';
 import { afterEach, describe, expect, test } from 'vitest';
 import { createMockSite } from '~/mocks/fixtures/mockHandler';
 import { SiteListItem } from './SiteListItem';
diff --git a/client/app/components/Site/SiteListItem/SiteListItem.tsx b/client/app/components/Site/SiteListItem/SiteListItem.tsx
index 6b817f350..6bcfd38d9 100644
--- a/client/app/components/Site/SiteListItem/SiteListItem.tsx
+++ b/client/app/components/Site/SiteListItem/SiteListItem.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { HaztrakSite } from '~/components/Site/siteSchema';
 import { ListGroup } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
diff --git a/client/app/components/Site/SiteListItem/SiteListItemActions.tsx b/client/app/components/Site/SiteListItem/SiteListItemActions.tsx
index e8b97b071..58fc13b20 100644
--- a/client/app/components/Site/SiteListItem/SiteListItemActions.tsx
+++ b/client/app/components/Site/SiteListItem/SiteListItemActions.tsx
@@ -1,7 +1,7 @@
-import { faEllipsisVertical, faEye, faFileLines } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { MouseEventHandler, ReactElement } from 'react';
 import { Col, Dropdown, Row } from 'react-bootstrap';
+import { FaEllipsisV, FaEye } from 'react-icons/fa';
+import { FaFileLines } from 'react-icons/fa6';
 import { useNavigate } from 'react-router-dom';
 
 interface SiteTableRowActionsProps {
@@ -27,7 +27,7 @@ export function SiteListItemActions({ siteId }: SiteTableRowActionsProps) {
   const actions: RowDropdownItems[] = [
     {
       text: 'View Site',
-      icon: <FontAwesomeIcon icon={faEye} className="text-primary" />,
+      icon: <FaEye className="text-primary" />,
       onClick: () => {
         navigate(`/site/${siteId}`);
       },
@@ -36,7 +36,7 @@ export function SiteListItemActions({ siteId }: SiteTableRowActionsProps) {
     },
     {
       text: 'View Manifests',
-      icon: <FontAwesomeIcon icon={faFileLines} className="text-primary" />,
+      icon: <FaFileLines className="text-primary" />,
       onClick: () => {
         navigate(`/site/${siteId}/manifest`);
       },
@@ -52,7 +52,7 @@ export function SiteListItemActions({ siteId }: SiteTableRowActionsProps) {
           title={`${siteId} actions`}
           className="bg-transparent border-0 text-dark no-caret justify-content-end"
         >
-          <FontAwesomeIcon icon={faEllipsisVertical} className="pe-2 shadow-none" />
+          <FaEllipsisV className="pe-2 shadow-none" />
         </Dropdown.Toggle>
         <Dropdown.Menu>
           {actions.map((action, i) => {
diff --git a/client/app/components/Site/index.ts b/client/app/components/Site/index.ts
index 5875985d7..06092617c 100644
--- a/client/app/components/Site/index.ts
+++ b/client/app/components/Site/index.ts
@@ -1,4 +1,4 @@
 export { SiteListGroup } from './SiteListGroup/SiteListGroup';
-import { HaztrakSite } from 'app/components/Site/siteSchema';
+import { HaztrakSite } from '~/components/Site/siteSchema';
 
 export type { HaztrakSite };
diff --git a/client/app/components/User/SiteAccess.tsx b/client/app/components/User/SiteAccess.tsx
index a9a8ab421..3e4aa57ac 100644
--- a/client/app/components/User/SiteAccess.tsx
+++ b/client/app/components/User/SiteAccess.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Row, Table } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 import { HaztrakProfileSite } from '~/store';
diff --git a/client/app/components/User/UserInfoForm.spec.tsx b/client/app/components/User/UserInfoForm.spec.tsx
index eaf058294..def5ca126 100644
--- a/client/app/components/User/UserInfoForm.spec.tsx
+++ b/client/app/components/User/UserInfoForm.spec.tsx
@@ -2,11 +2,11 @@ import { cleanup } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { UserInfoForm } from '~/components/User/UserInfoForm';
 import { setupServer } from 'msw/node';
-import React from 'react';
+
 import { HaztrakUser, ProfileSlice } from '~/store';
-import { renderWithProviders, screen } from 'app/mocks';
+import { renderWithProviders, screen } from '~/mocks';
 import { createMockHaztrakUser } from '~/mocks/fixtures';
-import { mockUserEndpoints } from 'app/mocks/handlers';
+import { mockUserEndpoints } from '~/mocks/handlers';
 import { afterAll, afterEach, beforeAll, describe, expect, test, vi } from 'vitest';
 
 const server = setupServer(...mockUserEndpoints);
diff --git a/client/app/components/User/UserInfoForm.tsx b/client/app/components/User/UserInfoForm.tsx
index 0943edf07..63b08ff71 100644
--- a/client/app/components/User/UserInfoForm.tsx
+++ b/client/app/components/User/UserInfoForm.tsx
@@ -1,11 +1,10 @@
-import { faUser } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { HtForm, HtSpinner } from 'app/components/legacyUi';
 import React, { createRef, useState } from 'react';
 import { Button, Col, Form, Row } from 'react-bootstrap';
 import { useForm } from 'react-hook-form';
+import { FaUser } from 'react-icons/fa';
 import { z } from 'zod';
+import { HtForm, HtSpinner } from '~/components/legacyUi';
 import { HaztrakUser, ProfileSlice, useUpdateUserMutation } from '~/store';
 
 interface UserProfileProps {
@@ -57,7 +56,7 @@ export function UserInfoForm({ user }: UserProfileProps) {
                 onClick={() => fileRef.current?.click()}
                 className="bg-secondary rounded-circle border-0 shadow"
               >
-                <FontAwesomeIcon icon={faUser} size="5x" className="m-3" />
+                <FaUser size="5x" className="m-3" />
               </Button>
             </div>
             <div className="d-flex justify-content-center">
diff --git a/client/app/components/legacyUi/FeatureDescription.tsx b/client/app/components/legacyUi/FeatureDescription.tsx
index 3f4c68e91..d1b1bb516 100644
--- a/client/app/components/legacyUi/FeatureDescription.tsx
+++ b/client/app/components/legacyUi/FeatureDescription.tsx
@@ -1,20 +1,18 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { ReactElement } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 interface FeatureDescriptionProps {
   title: string;
   children: ReactElement;
-  icon: IconProp;
+  iconElement: ReactElement;
 }
 
-export function FeatureDescription({ title, children, icon }: FeatureDescriptionProps) {
+export function FeatureDescription({ title, children, iconElement }: FeatureDescriptionProps) {
   return (
-    <div className="col">
-      <div className="bg-primary bg-gradient d-inline-flex align-items-start p-3 rounded-3 mb-2">
-        <FontAwesomeIcon icon={icon} className="text-light" size="2xl" />
+    <div className="tw-py-3 sm:tw-w-full md:tw-w-1/3 lg:tw-w-1/2">
+      <div className="bg-primary bg-gradient tw-mb-2 tw-inline-flex tw-items-start tw-rounded-lg tw-p-6">
+        <iconElement.type className="tw-text-white" size={24} {...iconElement.props} />
       </div>
-      <h2>{title}</h2>
+      <h2 className="tw-text-2xl tw-font-bold">{title}</h2>
       {children}
     </div>
   );
diff --git a/client/app/components/legacyUi/FloatingActionBtn.tsx b/client/app/components/legacyUi/FloatingActionBtn.tsx
index 6f3418872..d40d80b90 100644
--- a/client/app/components/legacyUi/FloatingActionBtn.tsx
+++ b/client/app/components/legacyUi/FloatingActionBtn.tsx
@@ -4,7 +4,7 @@ import { Button, ButtonProps } from 'react-bootstrap';
 interface HtFloatingActionBtnProps extends ButtonProps {
   position?: 'bottom-left' | 'bottom-right';
   extended?: boolean;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
   component?: any;
 }
 
diff --git a/client/app/components/legacyUi/HtButton.tsx b/client/app/components/legacyUi/HtButton.tsx
index e6fd171c1..c219b3f13 100644
--- a/client/app/components/legacyUi/HtButton.tsx
+++ b/client/app/components/legacyUi/HtButton.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Button, ButtonProps } from 'react-bootstrap';
 
 interface HtButtonProps extends ButtonProps {
diff --git a/client/app/components/legacyUi/HtCard/HtCard.spec.tsx b/client/app/components/legacyUi/HtCard/HtCard.spec.tsx
index 302c1bd06..3fb9f6e80 100644
--- a/client/app/components/legacyUi/HtCard/HtCard.spec.tsx
+++ b/client/app/components/legacyUi/HtCard/HtCard.spec.tsx
@@ -1,6 +1,6 @@
-import { HtCard } from 'app/components/legacyUi';
-import { cleanup, render, screen } from 'app/mocks';
-import React from 'react';
+import { HtCard } from './HtCard';
+import { cleanup, render, screen } from '~/mocks';
+
 import { afterEach, describe, expect, test } from 'vitest';
 
 afterEach(() => {
@@ -17,7 +17,6 @@ describe('HtCard', () => {
         </HtCard.Body>
       </HtCard>
     );
-    // debug(undefined, Infinity);
     expect(screen.getByText('Hello, world')).toBeInTheDocument();
   });
 });
diff --git a/client/app/components/legacyUi/HtModal/HtModal.spec.tsx b/client/app/components/legacyUi/HtModal/HtModal.spec.tsx
index 884082a7d..bb50b6c1f 100644
--- a/client/app/components/legacyUi/HtModal/HtModal.spec.tsx
+++ b/client/app/components/legacyUi/HtModal/HtModal.spec.tsx
@@ -1,6 +1,6 @@
-import { HtModal } from 'app/components/legacyUi';
-import { cleanup, render, screen } from 'app/mocks';
-import React from 'react';
+import { HtModal } from './HtModal';
+import { cleanup, render, screen } from '~/mocks';
+
 import { afterEach, describe, expect, test, vi } from 'vitest';
 
 afterEach(() => {
diff --git a/client/app/components/legacyUi/HtPaginate/HtPageBtns.tsx b/client/app/components/legacyUi/HtPaginate/HtPageBtns.tsx
index d8cd30b53..15fe858ed 100644
--- a/client/app/components/legacyUi/HtPaginate/HtPageBtns.tsx
+++ b/client/app/components/legacyUi/HtPaginate/HtPageBtns.tsx
@@ -1,14 +1,9 @@
-import {
-  faBackwardFast,
-  faCaretLeft,
-  faCaretRight,
-  faForwardFast,
-} from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Table } from '@tanstack/react-table';
-import { usePagination } from '~/hooks';
-import React from 'react';
+
 import { Pagination } from 'react-bootstrap';
+import { FaCaretLeft, FaCaretRight } from 'react-icons/fa';
+import { FaBackwardFast, FaForwardFast } from 'react-icons/fa6';
+import { usePagination } from '~/hooks';
 
 interface HtPageBtnsProps<T> {
   table: Table<T>;
@@ -41,10 +36,10 @@ export function HtPageBtns<T>({ table }: HtPageBtnsProps<T>) {
             onClick={() => table.setPageIndex(0)}
             disabled={!table.getCanPreviousPage()}
           >
-            <FontAwesomeIcon icon={faBackwardFast} size={'lg'} />
+            <FaBackwardFast size={'lg'} />
           </Pagination.First>
           <Pagination.Prev onClick={table.previousPage} disabled={!table.getCanPreviousPage()}>
-            <FontAwesomeIcon icon={faCaretLeft} size={'lg'} />
+            <FaCaretLeft size={'lg'} />
           </Pagination.Prev>
 
           {paginationRange.map((pageNumber, index) => {
@@ -63,13 +58,13 @@ export function HtPageBtns<T>({ table }: HtPageBtnsProps<T>) {
             );
           })}
           <Pagination.Next onClick={table.nextPage} disabled={!table.getCanNextPage()}>
-            <FontAwesomeIcon icon={faCaretRight} size={'lg'} />
+            <FaCaretRight size="lg" />
           </Pagination.Next>
           <Pagination.Last
             onClick={() => table.setPageIndex(table.getPageCount() - 1)}
             disabled={!table.getCanNextPage()}
           >
-            <FontAwesomeIcon icon={faForwardFast} size={'lg'} />
+            <FaForwardFast size="lg" />
           </Pagination.Last>
         </Pagination>
       </div>
diff --git a/client/app/components/legacyUi/HtPaginate/HtPageControls.tsx b/client/app/components/legacyUi/HtPaginate/HtPageControls.tsx
index c18484844..0628fe077 100644
--- a/client/app/components/legacyUi/HtPaginate/HtPageControls.tsx
+++ b/client/app/components/legacyUi/HtPaginate/HtPageControls.tsx
@@ -1,5 +1,5 @@
 import { Table } from '@tanstack/react-table';
-import React from 'react';
+
 import { Col, Form, Row } from 'react-bootstrap';
 
 interface HtPageBtnsProps<T> {
diff --git a/client/app/components/legacyUi/HtPaginate/HtPaginate.spec.tsx b/client/app/components/legacyUi/HtPaginate/HtPaginate.spec.tsx
index 53f0ec73d..bd79d01d8 100644
--- a/client/app/components/legacyUi/HtPaginate/HtPaginate.spec.tsx
+++ b/client/app/components/legacyUi/HtPaginate/HtPaginate.spec.tsx
@@ -1,6 +1,6 @@
-import { HtPaginate } from 'app/components/legacyUi';
-import { cleanup, render, screen } from 'app/mocks';
-import React from 'react';
+import { HtPaginate } from './HtPaginate';
+import { cleanup, render, screen } from '~/mocks';
+
 import { afterEach, describe, expect, test } from 'vitest';
 
 afterEach(() => {
diff --git a/client/app/components/legacyUi/HtPaginate/HtPaginate.tsx b/client/app/components/legacyUi/HtPaginate/HtPaginate.tsx
index 6c38ac081..e6bc99ba3 100644
--- a/client/app/components/legacyUi/HtPaginate/HtPaginate.tsx
+++ b/client/app/components/legacyUi/HtPaginate/HtPaginate.tsx
@@ -1,5 +1,5 @@
 import { usePagination } from '~/hooks';
-import React from 'react';
+
 import { Pagination } from 'react-bootstrap';
 
 /**
@@ -15,7 +15,6 @@ interface usePaginationProps {
 }
 
 interface HtPaginateProps extends usePaginationProps {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onPageChange: any;
 }
 
diff --git a/client/app/components/legacyUi/HtSpinner.tsx b/client/app/components/legacyUi/HtSpinner.tsx
index 668808afe..52aa56ce8 100644
--- a/client/app/components/legacyUi/HtSpinner.tsx
+++ b/client/app/components/legacyUi/HtSpinner.tsx
@@ -1,24 +1,18 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { faGear } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon, FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
 import React, { ReactElement } from 'react';
 import { Container } from 'react-bootstrap';
+import { IconBaseProps } from 'react-icons';
+import { FaGear } from 'react-icons/fa6';
 
-interface HtSpinnerProps extends Omit<FontAwesomeIconProps, 'icon'> {
+interface HtSpinnerProps extends IconBaseProps {
   center?: boolean;
-  icon?: IconProp;
 }
 
 export function HtSpinner({ className, size, center, ...props }: HtSpinnerProps): ReactElement {
-  const defaultCLasses = 'bg-transparent text-muted';
-
   const spinner = (
-    <FontAwesomeIcon
-      icon={faGear}
+    <FaGear
       data-testid="spinner"
-      className={`${defaultCLasses} ${className}`}
-      spin
-      size={size ?? '6x'}
+      className={`text-muted tw-bg-transparent ${className} tw-animate-spin`}
+      size={size ?? 20}
       {...props}
     />
   );
diff --git a/client/app/components/legacyUi/HtTooltip/HtTooltip.spec.tsx b/client/app/components/legacyUi/HtTooltip/HtTooltip.spec.tsx
index bb121e4b0..22503763b 100644
--- a/client/app/components/legacyUi/HtTooltip/HtTooltip.spec.tsx
+++ b/client/app/components/legacyUi/HtTooltip/HtTooltip.spec.tsx
@@ -1,6 +1,6 @@
 import { cleanup, fireEvent, render, screen } from '@testing-library/react';
-import { HtTooltip } from 'app/components/legacyUi';
-import React from 'react';
+import { HtTooltip } from './HtTooltip';
+
 import { afterEach, describe, expect, test } from 'vitest';
 
 afterEach(() => {
diff --git a/client/app/components/legacyUi/HtTooltip/HtTooltip.tsx b/client/app/components/legacyUi/HtTooltip/HtTooltip.tsx
index b32b44a9f..ee2dd0201 100644
--- a/client/app/components/legacyUi/HtTooltip/HtTooltip.tsx
+++ b/client/app/components/legacyUi/HtTooltip/HtTooltip.tsx
@@ -1,7 +1,6 @@
-import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { ReactElement } from 'react';
 import { OverlayTrigger, Tooltip, TooltipProps } from 'react-bootstrap';
+import { FaInfoCircle } from 'react-icons/fa';
 
 // see react-bootstrap OverlayTrigger for additional props that could be added
 // https://react-bootstrap.github.io/components/overlays/#overlay-trigger-props
@@ -31,7 +30,7 @@ interface InfoTooltipProps {
 export function InfoIconTooltip({ message }: InfoTooltipProps) {
   return (
     <HtTooltip text={message}>
-      <FontAwesomeIcon icon={faInfoCircle} size={'2xs'} className={'pb-1 text-muted'} />
+      <FaInfoCircle size={'2xs'} className={'pb-1 text-muted'} />
     </HtTooltip>
   );
 }
diff --git a/client/app/components/ui/Button/Button.tsx b/client/app/components/ui/Button/Button.tsx
index 809040223..baf9e66ff 100644
--- a/client/app/components/ui/Button/Button.tsx
+++ b/client/app/components/ui/Button/Button.tsx
@@ -5,7 +5,7 @@ import * as React from 'react';
 import { cn } from '~/lib/utils';
 
 const buttonVariants = cva(
-  'tw-inline-flex tw-items-center tw-justify-center tw-whitespace-nowrap tw-text-sm tw-font-medium tw-ring-offset-background tw-transition-colors focus-visible:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-ring focus-visible:tw-ring-offset-2 disabled:tw-pointer-events-none disabled:tw-opacity-50',
+  'tw-text-md tw-inline-flex tw-items-center tw-justify-center tw-whitespace-nowrap tw-font-medium tw-ring-offset-background tw-transition-colors focus-visible:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-ring focus-visible:tw-ring-offset-2 disabled:tw-pointer-events-none disabled:tw-opacity-50',
   {
     variants: {
       variant: {
@@ -13,7 +13,7 @@ const buttonVariants = cva(
         destructive: 'tw-bg-destructive tw-text-destructive-foreground hover:tw-bg-destructive/90',
         outline:
           'tw-border tw-border-input tw-bg-transparent hover:tw-bg-accent hover:tw-text-accent-foreground',
-        secondary: 'tw-bg-secondary tw-text-secondary-foreground hover:tw-bg-secondary/80',
+        secondary: 'tw-bg-secondary tw-text-secondary-foreground hover:tw-bg-secondary/90',
         ghost: 'hover:tw-bg-accent hover:tw-text-accent-foreground',
         link: 'tw-text-primary tw-underline-offset-4 hover:tw-underline',
       },
diff --git a/client/app/components/ui/Card/Card.spec.tsx b/client/app/components/ui/Card/Card.spec.tsx
new file mode 100644
index 000000000..494de7d13
--- /dev/null
+++ b/client/app/components/ui/Card/Card.spec.tsx
@@ -0,0 +1,79 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './Card';
+
+describe('Card Component', () => {
+  it('renders correctly with default props', () => {
+    const { container } = render(<Card />);
+    expect(container.firstChild).toHaveClass(
+      'tw-rounded-lg tw-border tw-bg-card tw-text-card-foreground tw-shadow-sm'
+    );
+  });
+
+  it('applies additional class names', () => {
+    const { container } = render(<Card className="additional-class" />);
+    expect(container.firstChild).toHaveClass('additional-class');
+  });
+});
+
+describe('CardHeader Component', () => {
+  it('renders correctly with default props', () => {
+    const { container } = render(<CardHeader />);
+    expect(container.firstChild).toHaveClass('tw-flex tw-flex-col tw-space-y-1.5 tw-p-6');
+  });
+
+  it('applies additional class names', () => {
+    const { container } = render(<CardHeader className="additional-class" />);
+    expect(container.firstChild).toHaveClass('additional-class');
+  });
+});
+
+describe('CardTitle Component', () => {
+  it('renders correctly with default props', () => {
+    const { container } = render(<CardTitle />);
+    expect(container.firstChild).toHaveClass(
+      'tw-text-xl tw-font-semibold tw-leading-none tw-tracking-tight'
+    );
+  });
+
+  it('applies additional class names', () => {
+    const { container } = render(<CardTitle className="additional-class" />);
+    expect(container.firstChild).toHaveClass('additional-class');
+  });
+});
+
+describe('CardDescription Component', () => {
+  it('renders correctly with default props', () => {
+    const { container } = render(<CardDescription />);
+    expect(container.firstChild).toHaveClass('tw-text-sm tw-text-muted-foreground');
+  });
+
+  it('applies additional class names', () => {
+    const { container } = render(<CardDescription className="additional-class" />);
+    expect(container.firstChild).toHaveClass('additional-class');
+  });
+});
+
+describe('CardContent Component', () => {
+  it('renders correctly with default props', () => {
+    const { container } = render(<CardContent />);
+    expect(container.firstChild).toHaveClass('tw-p-6 tw-pt-0');
+  });
+
+  it('applies additional class names', () => {
+    const { container } = render(<CardContent className="additional-class" />);
+    expect(container.firstChild).toHaveClass('additional-class');
+  });
+});
+
+describe('CardFooter Component', () => {
+  it('renders correctly with default props', () => {
+    const { container } = render(<CardFooter />);
+    expect(container.firstChild).toHaveClass('tw-flex tw-items-center tw-p-6 tw-pt-0');
+  });
+
+  it('applies additional class names', () => {
+    const { container } = render(<CardFooter className="additional-class" />);
+    expect(container.firstChild).toHaveClass('additional-class');
+  });
+});
diff --git a/client/app/components/ui/Card/Card.tsx b/client/app/components/ui/Card/Card.tsx
new file mode 100644
index 000000000..169f291dc
--- /dev/null
+++ b/client/app/components/ui/Card/Card.tsx
@@ -0,0 +1,64 @@
+import * as React from 'react';
+
+import { cn } from '~/lib/utils';
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'tw-rounded-lg tw-border tw-bg-card tw-text-card-foreground tw-shadow-sm',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('tw-flex tw-flex-col tw-space-y-1.5 tw-p-6', className)}
+      {...props}
+    />
+  )
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    // eslint-disable-next-line jsx-a11y/heading-has-content
+    <h3
+      ref={ref}
+      className={cn('tw-text-xl tw-font-semibold tw-leading-none tw-tracking-tight', className)}
+      {...props}
+    />
+  )
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p ref={ref} className={cn('tw-text-sm tw-text-muted-foreground', className)} {...props} />
+));
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('tw-p-6 tw-pt-0', className)} {...props} />
+  )
+);
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('tw-flex tw-items-center tw-p-6 tw-pt-0', className)} {...props} />
+  )
+);
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
diff --git a/client/app/components/ui/Sheet/Sheet.spec.tsx b/client/app/components/ui/Sheet/Sheet.spec.tsx
index 48a0601a7..dc9e0f2d6 100644
--- a/client/app/components/ui/Sheet/Sheet.spec.tsx
+++ b/client/app/components/ui/Sheet/Sheet.spec.tsx
@@ -10,7 +10,7 @@ import {
   SheetHeader,
   SheetTitle,
   SheetTrigger,
-} from 'app/components/ui/Sheet/Sheet';
+} from './Sheet';
 
 describe('Sheet component', () => {
   it('renders SheetTrigger and opens SheetContent on click', async () => {
diff --git a/client/app/components/ui/index.ts b/client/app/components/ui/index.ts
index fc933fe74..7f9cfd413 100644
--- a/client/app/components/ui/index.ts
+++ b/client/app/components/ui/index.ts
@@ -20,4 +20,6 @@ export {
   SheetHeader,
   SheetTitle,
   SheetTrigger,
-} from 'app/components/ui/Sheet/Sheet';
+} from '~/components/ui/Sheet/Sheet';
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './Card/Card';
diff --git a/client/app/features/ErrorPage/index.ts b/client/app/features/ErrorPage/index.ts
deleted file mode 100644
index 48f567067..000000000
--- a/client/app/features/ErrorPage/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { ErrorPage as Component } from '~/features/ErrorPage/ErrorPage';
diff --git a/client/app/features/SiteDetails/SiteDetails.tsx b/client/app/features/SiteDetails/SiteDetails.tsx
deleted file mode 100644
index b492091e8..000000000
--- a/client/app/features/SiteDetails/SiteDetails.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { HtCard, HtSpinner } from 'app/components/legacyUi';
-import React, { ReactElement } from 'react';
-import { Button, Container, Stack } from 'react-bootstrap';
-import { useNavigate, useParams } from 'react-router-dom';
-import { RcraSiteDetails } from '~/components/RcraSite';
-import { useGetUserHaztrakSiteQuery } from '~/store';
-
-/**
- * GET and Display details of the Haztrak site including RCRA site details.
- *
- * This could be expanded to include other information about a haztrak site
- * if, for example, the site also had information relevant to the office of water (OW)
- * of data that's not directly related to any regulatory agency (the site's users).
- * @constructor
- */
-export function SiteDetails(): ReactElement {
-  const { siteId } = useParams();
-  const { data, isLoading, error } = useGetUserHaztrakSiteQuery(siteId ? siteId : '');
-  const navigate = useNavigate();
-
-  if (isLoading) return <HtSpinner center />;
-  if (error) throw new Error(error.message);
-  if (data)
-    return (
-      <Container>
-        <Stack className="my-3" gap={2}>
-          <div className="pe-0 d-flex flex-row-reverse">
-            <Button variant="primary" onClick={() => navigate(`/site/${siteId}/manifest`)}>
-              View Manifest
-            </Button>
-          </div>
-          <HtCard title={siteId}>
-            <HtCard.Body>
-              <RcraSiteDetails handler={data.handler} />
-            </HtCard.Body>
-          </HtCard>
-        </Stack>
-      </Container>
-    );
-  else return <div>Something went wrong</div>;
-}
diff --git a/client/app/features/SiteDetails/index.ts b/client/app/features/SiteDetails/index.ts
deleted file mode 100644
index ff2a23af7..000000000
--- a/client/app/features/SiteDetails/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { SiteDetails } from '~/features/SiteDetails/SiteDetails';
-
-export { SiteDetails as Component };
-export default SiteDetails;
diff --git a/client/app/features/about/About.tsx b/client/app/features/about/About.tsx
index 0cd0dcbcd..f3217545b 100644
--- a/client/app/features/about/About.tsx
+++ b/client/app/features/about/About.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-import { Col, Container, Row } from 'react-bootstrap';
 import { HaztrakLicense, SectionTitle } from '~/components/Help';
 import { useTitle } from '~/hooks';
 
@@ -11,10 +9,10 @@ import { useTitle } from '~/hooks';
 export function About() {
   useTitle('About');
   return (
-    <Container fluid className="p-5">
+    <div className="tw-w-full tw-p-5">
       <SectionTitle title="About" variant="h1" />
-      <Row className="content">
-        <Col xs={12} md={5} lg={6}>
+      <div className="tw-content tw-flex tw-flex-wrap">
+        <div className="tw-md:w-5/12 tw-lg:w-1/2 tw-w-full">
           <p>
             Haztrak is an an open-source example of how hazardous handlers can interface their waste
             management software with <a href="https://rcrainfo.epa.gov">RCRAInfo</a> to use
@@ -22,8 +20,8 @@ export function About() {
             electronic manifest can be completed without ever having to login to RCRAInfo via the
             web browser.
           </p>
-        </Col>
-        <Col xs={12} md={7} lg={6}>
+        </div>
+        <div className="tw-md:w-7/12 tw-lg:w-1/2 tw-w-full">
           <p>
             Integration with RCRAInfo and e-Manifest directly benefits the end user and the
             organization.
@@ -33,8 +31,8 @@ export function About() {
             <li>Seamless electronic manifest and e-signatures</li>
             <li>Waste stream data analysis for compliance</li>
           </ul>
-        </Col>
-      </Row>
+        </div>
+      </div>
       <SectionTitle title="Licensing" />
       <p>
         Haztrak It was developed by the United State Environmental Protection Agency (US EPA) under
@@ -43,12 +41,12 @@ export function About() {
         you to read the license, don't worry, it's short:
       </p>
       <HaztrakLicense />
-      <p className="pt-4">
+      <p className="tw-pt-4">
         We welcome contribution to the source code, which you can find, along with the contributor's
         guidelines in our git repository on{' '}
         <a href={`${import.meta.env.VITE_GITHUB_URL}`}>GitHub</a>
       </p>
       <p />
-    </Container>
+    </div>
   );
 }
diff --git a/client/app/features/dashboard/Dashboard.spec.tsx b/client/app/features/dashboard/Dashboard.spec.tsx
index 150fb08d8..3a887bbc7 100644
--- a/client/app/features/dashboard/Dashboard.spec.tsx
+++ b/client/app/features/dashboard/Dashboard.spec.tsx
@@ -1,5 +1,5 @@
-import { cleanup, renderWithProviders, screen } from 'app/mocks';
-import { mockUserEndpoints } from 'app/mocks/handlers';
+import { cleanup, renderWithProviders, screen } from '~/mocks';
+import { mockUserEndpoints } from '~/mocks/handlers';
 import { setupServer } from 'msw/node';
 import React, { createElement } from 'react';
 import { afterAll, afterEach, beforeAll, describe, expect, test, vi } from 'vitest';
diff --git a/client/app/features/dashboard/Dashboard.tsx b/client/app/features/dashboard/Dashboard.tsx
index db12cab66..bda572601 100644
--- a/client/app/features/dashboard/Dashboard.tsx
+++ b/client/app/features/dashboard/Dashboard.tsx
@@ -1,4 +1,4 @@
-import { HtCard } from 'app/components/legacyUi';
+import { HtCard } from '~/components/legacyUi';
 import React, { ReactElement } from 'react';
 import { Col, Container, Row } from 'react-bootstrap';
 import {
diff --git a/client/app/features/errorPage/ErrorPage.spec.tsx b/client/app/features/errorPage/ErrorPage.spec.tsx
new file mode 100644
index 000000000..6b787dd05
--- /dev/null
+++ b/client/app/features/errorPage/ErrorPage.spec.tsx
@@ -0,0 +1,32 @@
+import { screen } from '@testing-library/react';
+import { useNavigate } from 'react-router-dom';
+import { describe, expect, it, vi } from 'vitest';
+import { renderWithProviders } from '~/mocks';
+import { ErrorPage } from './ErrorPage';
+
+vi.mock('react-router-dom', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('react-router-dom')>()),
+  useNavigate: vi.fn(),
+}));
+
+describe('ErrorPage', () => {
+  it('renders 404 error message when code is 404', () => {
+    renderWithProviders(<ErrorPage code={404} />);
+    expect(screen.getByText(/not found/i)).toBeInTheDocument();
+  });
+
+  it('renders default error message when code is undefined', () => {
+    renderWithProviders(<ErrorPage />);
+    expect(screen.getByText(/not found/i)).toBeInTheDocument();
+  });
+
+  it('navigates back when Return button is clicked', () => {
+    const navigate = vi.fn();
+    vi.mocked(useNavigate).mockReturnValue(navigate);
+
+    renderWithProviders(<ErrorPage />);
+
+    screen.getByText('Return').click();
+    expect(navigate).toHaveBeenCalledWith(-1);
+  });
+});
diff --git a/client/app/features/ErrorPage/ErrorPage.tsx b/client/app/features/errorPage/ErrorPage.tsx
similarity index 55%
rename from client/app/features/ErrorPage/ErrorPage.tsx
rename to client/app/features/errorPage/ErrorPage.tsx
index d52e54cf0..505ce916e 100644
--- a/client/app/features/ErrorPage/ErrorPage.tsx
+++ b/client/app/features/errorPage/ErrorPage.tsx
@@ -1,8 +1,7 @@
-import { HtCard } from 'app/components/legacyUi';
 import React, { ReactElement } from 'react';
-import { Button, Container } from 'react-bootstrap';
 import { useNavigate } from 'react-router-dom';
 import { Error404 } from '~/components/Error';
+import { Button, Card, CardContent, CardFooter, CardHeader } from '~/components/ui';
 
 interface ErrorPageProps {
   code?: number;
@@ -21,15 +20,16 @@ const renderErrorMessage = (code: number | undefined): ReactElement => {
 export const ErrorPage = ({ code }: ErrorPageProps) => {
   const navigate = useNavigate();
   return (
-    <Container>
-      <HtCard>
-        <HtCard.Body className="d-grid justify-content-center">
-          {renderErrorMessage(code)}
-        </HtCard.Body>
-        <HtCard.Footer>
-          <Button onClick={() => navigate(-1)}>Return</Button>
-        </HtCard.Footer>
-      </HtCard>
-    </Container>
+    <div className="tw-container tw-p-8">
+      <Card>
+        <CardHeader />
+        <CardContent className="tw-grid tw-justify-center">{renderErrorMessage(code)}</CardContent>
+        <CardFooter>
+          <Button variant="secondary" onClick={() => navigate(-1)}>
+            Return
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
   );
 };
diff --git a/client/app/features/errorPage/index.ts b/client/app/features/errorPage/index.ts
new file mode 100644
index 000000000..df82b99af
--- /dev/null
+++ b/client/app/features/errorPage/index.ts
@@ -0,0 +1 @@
+export { ErrorPage as Component } from '~/features/errorPage/ErrorPage';
diff --git a/client/app/features/login/login.spec.tsx b/client/app/features/login/login.spec.tsx
index cf8e47432..e574c7010 100644
--- a/client/app/features/login/login.spec.tsx
+++ b/client/app/features/login/login.spec.tsx
@@ -1,5 +1,5 @@
-import { renderWithProviders, screen } from 'app/mocks';
-import React from 'react';
+import { renderWithProviders, screen } from '~/mocks';
+
 import { describe, expect, test } from 'vitest';
 import { Login } from '~/features/login';
 
diff --git a/client/app/features/ManifestDetails/ManifestDetails.spec.tsx b/client/app/features/manifestDetails/ManifestDetails.spec.tsx
similarity index 100%
rename from client/app/features/ManifestDetails/ManifestDetails.spec.tsx
rename to client/app/features/manifestDetails/ManifestDetails.spec.tsx
diff --git a/client/app/features/ManifestDetails/ManifestDetails.tsx b/client/app/features/manifestDetails/ManifestDetails.tsx
similarity index 94%
rename from client/app/features/ManifestDetails/ManifestDetails.tsx
rename to client/app/features/manifestDetails/ManifestDetails.tsx
index 88df38f46..abcd31a3a 100644
--- a/client/app/features/ManifestDetails/ManifestDetails.tsx
+++ b/client/app/features/manifestDetails/ManifestDetails.tsx
@@ -1,4 +1,4 @@
-import { HtSpinner } from 'app/components/legacyUi';
+import { HtSpinner } from '~/components/legacyUi';
 import { useParams } from 'react-router-dom';
 import { ManifestForm } from '~/components/Manifest';
 import { useTitle } from '~/hooks';
diff --git a/client/app/features/ManifestDetails/index.ts b/client/app/features/manifestDetails/index.ts
similarity index 100%
rename from client/app/features/ManifestDetails/index.ts
rename to client/app/features/manifestDetails/index.ts
diff --git a/client/app/features/ManifestList/ManifestList.spec.tsx b/client/app/features/manifestList/ManifestList.spec.tsx
similarity index 100%
rename from client/app/features/ManifestList/ManifestList.spec.tsx
rename to client/app/features/manifestList/ManifestList.spec.tsx
diff --git a/client/app/features/ManifestList/ManifestList.tsx b/client/app/features/manifestList/ManifestList.tsx
similarity index 96%
rename from client/app/features/ManifestList/ManifestList.tsx
rename to client/app/features/manifestList/ManifestList.tsx
index d7bae676b..538816c62 100644
--- a/client/app/features/ManifestList/ManifestList.tsx
+++ b/client/app/features/manifestList/ManifestList.tsx
@@ -1,4 +1,4 @@
-import { HtCard, HtSpinner } from 'app/components/legacyUi';
+import { HtCard, HtSpinner } from '~/components/legacyUi';
 import React, { ReactElement, useState } from 'react';
 import { Container, Row, Stack } from 'react-bootstrap';
 import { useParams } from 'react-router-dom';
diff --git a/client/app/features/ManifestList/index.ts b/client/app/features/manifestList/index.ts
similarity index 100%
rename from client/app/features/ManifestList/index.ts
rename to client/app/features/manifestList/index.ts
diff --git a/client/app/features/NewManifest/NewManifest.spec.tsx b/client/app/features/newManifest/NewManifest.spec.tsx
similarity index 88%
rename from client/app/features/NewManifest/NewManifest.spec.tsx
rename to client/app/features/newManifest/NewManifest.spec.tsx
index 9f9d304ec..4b13b8eef 100644
--- a/client/app/features/NewManifest/NewManifest.spec.tsx
+++ b/client/app/features/newManifest/NewManifest.spec.tsx
@@ -1,11 +1,11 @@
 import userEvent from '@testing-library/user-event';
-import { cleanup, renderWithProviders, screen } from 'app/mocks';
-import { mockSiteEndpoints, mockUserEndpoints } from 'app/mocks/handlers';
+import { cleanup, renderWithProviders, screen } from '~/mocks';
+import { mockSiteEndpoints, mockUserEndpoints } from '~/mocks/handlers';
 import { http, HttpResponse } from 'msw';
 import { setupServer } from 'msw/node';
-import React from 'react';
+
 import { afterAll, afterEach, beforeAll, describe, expect, test } from 'vitest';
-import NewManifest from '~/features/NewManifest';
+import NewManifest from '~/features/newManifest';
 import { createMockSite } from '~/mocks/fixtures';
 import { API_BASE_URL } from '~/mocks/handlers/mockSiteEndpoints';
 
diff --git a/client/app/features/NewManifest/NewManifest.tsx b/client/app/features/newManifest/NewManifest.tsx
similarity index 97%
rename from client/app/features/NewManifest/NewManifest.tsx
rename to client/app/features/newManifest/NewManifest.tsx
index 28a95cb4c..1287da1c0 100644
--- a/client/app/features/NewManifest/NewManifest.tsx
+++ b/client/app/features/newManifest/NewManifest.tsx
@@ -1,10 +1,10 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { HtCard, HtSpinner } from 'app/components/legacyUi';
+import { HtCard, HtSpinner } from '~/components/legacyUi';
 import React, { useEffect, useMemo, useState } from 'react';
 import { Col, Container, Form } from 'react-bootstrap';
 import { useForm } from 'react-hook-form';
 import { useParams, useSearchParams } from 'react-router-dom';
-import { HaztrakSite } from 'app/components/Site';
+import { HaztrakSite } from '~/components/Site';
 import { Manifest, ManifestForm } from '~/components/Manifest';
 import { RcraSiteType } from '~/components/Manifest/manifestSchema';
 import { SiteSelect, SiteTypeSelect } from '~/components/Manifest/SiteSelect';
diff --git a/client/app/features/NewManifest/index.ts b/client/app/features/newManifest/index.ts
similarity index 100%
rename from client/app/features/NewManifest/index.ts
rename to client/app/features/newManifest/index.ts
diff --git a/client/app/features/org/Org.tsx b/client/app/features/org/Org.tsx
index 5244a780b..49c298024 100644
--- a/client/app/features/org/Org.tsx
+++ b/client/app/features/org/Org.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { LoaderFunction, Outlet, redirect } from 'react-router-dom';
 import { useOrg } from '~/hooks/useOrg/useOrg';
 import { rootStore as store } from '~/store';
@@ -12,7 +11,6 @@ export const orgsLoader: LoaderFunction = async () => {
   } catch (_error) {
     console.error('Error fetching orgs');
     return redirect('/login');
-    // throw Error('Error fetching orgs');
   } finally {
     p.unsubscribe();
   }
diff --git a/client/app/features/org/index.ts b/client/app/features/org/index.ts
index 3c2af7ed0..281609a68 100644
--- a/client/app/features/org/index.ts
+++ b/client/app/features/org/index.ts
@@ -1,6 +1,5 @@
-import { Org } from './Org';
-
-export { orgsLoader } from './Org';
+import { Org, orgsLoader } from './Org';
 
+export { orgsLoader as loader };
 export { Org as Component };
 export default Org;
diff --git a/client/app/features/PrivateRoute/PrivateRoute.spec.tsx b/client/app/features/privateRoute/PrivateRoute.spec.tsx
similarity index 100%
rename from client/app/features/PrivateRoute/PrivateRoute.spec.tsx
rename to client/app/features/privateRoute/PrivateRoute.spec.tsx
diff --git a/client/app/features/PrivateRoute/PrivateRoute.tsx b/client/app/features/privateRoute/PrivateRoute.tsx
similarity index 100%
rename from client/app/features/PrivateRoute/PrivateRoute.tsx
rename to client/app/features/privateRoute/PrivateRoute.tsx
diff --git a/client/app/features/PrivateRoute/index.ts b/client/app/features/privateRoute/index.ts
similarity index 100%
rename from client/app/features/PrivateRoute/index.ts
rename to client/app/features/privateRoute/index.ts
diff --git a/client/app/features/profile/Profile.tsx b/client/app/features/profile/Profile.tsx
index 60a7d8eab..f6c9c047d 100644
--- a/client/app/features/profile/Profile.tsx
+++ b/client/app/features/profile/Profile.tsx
@@ -1,4 +1,4 @@
-import { HtCard, HtSpinner } from 'app/components/legacyUi';
+import { HtCard, HtSpinner } from '~/components/legacyUi';
 import React, { ReactElement } from 'react';
 import { Col, Container, Row } from 'react-bootstrap';
 import { UserOrg } from '~/components/Org';
diff --git a/client/app/features/register/RegisterHero.tsx b/client/app/features/register/RegisterHero.tsx
index 85275fd2f..06e7277c3 100644
--- a/client/app/features/register/RegisterHero.tsx
+++ b/client/app/features/register/RegisterHero.tsx
@@ -1,13 +1,14 @@
 import logo from '/assets/img/haztrak-logos/high-resolution/png/haztrak-high-resolution-logo-black-on-transparent-background.png';
-import { faFileLines, faPen, faSitemap } from '@fortawesome/free-solid-svg-icons';
-import { FeatureDescription } from 'app/components/legacyUi';
-import React from 'react';
+
 import { Button, Col, Container, Row, Stack } from 'react-bootstrap';
+import { FaPen, FaSitemap } from 'react-icons/fa';
+import { FaFileLines } from 'react-icons/fa6';
 import { Link } from 'react-router-dom';
+import { FeatureDescription } from '~/components/legacyUi';
 
 export function RegisterHero() {
   return (
-    <Container fluid className="text-center px-4 py-5 bg-light vh-100">
+    <Container fluid className="text-center px-4 py-5 bg-light tw-h-full">
       <img
         src={logo}
         alt="haztrak logo, hazardous waste tracking made easy."
@@ -36,7 +37,7 @@ export function RegisterHero() {
       </Col>
       <Row className="my-5 text-start pt-5" lg={3} xs={1}>
         <Col>
-          <FeatureDescription title="Manifest" icon={faFileLines}>
+          <FeatureDescription title="Manifest" iconElement={<FaFileLines />}>
             <p>
               Leverage the power of integration with EPA while creating, updating, or deleting
               electronic hazardous waste manifests to accurately capture the waste shipment.
@@ -44,7 +45,7 @@ export function RegisterHero() {
           </FeatureDescription>
         </Col>
         <Col>
-          <FeatureDescription title="e-Sign" icon={faPen}>
+          <FeatureDescription title="e-Sign" iconElement={<FaPen />}>
             <p>
               Sign your electronic manifests to signify custody exchange without ever logging into
               EPA's e-Manifest system.
@@ -52,7 +53,7 @@ export function RegisterHero() {
           </FeatureDescription>
         </Col>
         <Col>
-          <FeatureDescription title="Manage" icon={faSitemap}>
+          <FeatureDescription title="Manage" iconElement={<FaSitemap />}>
             <p>
               Organize sites to match company structure and give personnel the access and tools to
               get the job done with ease.
diff --git a/client/app/features/SiteDetails/SiteDetails.spec.tsx b/client/app/features/siteDetails/SiteDetails.spec.tsx
similarity index 100%
rename from client/app/features/SiteDetails/SiteDetails.spec.tsx
rename to client/app/features/siteDetails/SiteDetails.spec.tsx
diff --git a/client/app/features/siteDetails/SiteDetails.tsx b/client/app/features/siteDetails/SiteDetails.tsx
new file mode 100644
index 000000000..25d5c731d
--- /dev/null
+++ b/client/app/features/siteDetails/SiteDetails.tsx
@@ -0,0 +1,61 @@
+import { HtSpinner } from '~/components/legacyUi';
+import { ReactElement } from 'react';
+import { LoaderFunction, redirect, useNavigate, useParams } from 'react-router-dom';
+import { RcraSiteDetails } from '~/components/RcraSite/RcraSiteDetails';
+import { rootStore as store, useGetUserHaztrakSiteQuery } from '~/store';
+import { haztrakApi } from '~/store/htApi.slice';
+import { Button, Card, CardContent, CardHeader } from '~/components/ui';
+
+export const siteDetailsLoader: LoaderFunction = async ({ params }) => {
+  const { siteId } = params;
+  if (!siteId) return null;
+  const p = store.dispatch(haztrakApi.endpoints.getUserHaztrakSite.initiate(siteId));
+
+  try {
+    return await p.unwrap();
+  } catch (_error) {
+    console.error('Error fetching orgs');
+    return redirect('/login');
+  } finally {
+    p.unsubscribe();
+  }
+};
+
+/**
+ * GET and Display details of the Haztrak site including RCRA site details.
+ *
+ * This could be expanded to include other information about a haztrak site
+ * if, for example, the site also had information relevant to the office of water (OW)
+ * of data that's not directly related to any regulatory agency (the site's users).
+ * @constructor
+ */
+export function SiteDetails(): ReactElement {
+  const { siteId } = useParams();
+  const { data, isLoading, error } = useGetUserHaztrakSiteQuery(siteId ? siteId : '');
+  const navigate = useNavigate();
+
+  if (isLoading) return <HtSpinner center />;
+  if (error) throw new Error(error.message);
+  if (data)
+    return (
+      <div className="tw-container">
+        <div className="my-3 tw-flex tw-flex-col tw-space-y-2">
+          <h2 className="tw-text-start tw-text-2xl tw-font-bold">Site Details</h2>
+          <div className="tw-flex tw-flex-row-reverse tw-pe-0">
+            <Button variant="secondary" onClick={() => navigate(`/site/${siteId}/manifest`)}>
+              View Manifest
+            </Button>
+          </div>
+          <Card className="tw-drop-shadow-2xl">
+            <CardHeader>
+              <h2 className="tw-text-xl tw-font-bold">{data.name}</h2>
+            </CardHeader>
+            <CardContent className="tw-p-5">
+              <RcraSiteDetails handler={data.handler} />
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    );
+  else return <div>Something went wrong</div>;
+}
diff --git a/client/app/features/siteDetails/index.ts b/client/app/features/siteDetails/index.ts
new file mode 100644
index 000000000..cd8851cab
--- /dev/null
+++ b/client/app/features/siteDetails/index.ts
@@ -0,0 +1,5 @@
+import { SiteDetails, siteDetailsLoader } from './SiteDetails';
+
+export { siteDetailsLoader as loader };
+export { SiteDetails as Component };
+export default SiteDetails;
diff --git a/client/app/features/SiteList/SiteList.spec.tsx b/client/app/features/siteList/SiteList.spec.tsx
similarity index 88%
rename from client/app/features/SiteList/SiteList.spec.tsx
rename to client/app/features/siteList/SiteList.spec.tsx
index 035dd1d37..0dbc84d88 100644
--- a/client/app/features/SiteList/SiteList.spec.tsx
+++ b/client/app/features/siteList/SiteList.spec.tsx
@@ -1,8 +1,8 @@
-import { renderWithProviders, screen } from 'app/mocks';
-import { mockSiteEndpoints, mockUserEndpoints } from 'app/mocks/handlers';
+import { renderWithProviders, screen } from '~/mocks';
+import { mockSiteEndpoints, mockUserEndpoints } from '~/mocks/handlers';
 import { http, HttpResponse } from 'msw';
 import { setupServer } from 'msw/node';
-import React from 'react';
+
 import { afterAll, beforeAll, describe, expect, test } from 'vitest';
 import { createMockHandler, createMockSite } from '~/mocks/fixtures/mockHandler';
 import { SiteList } from './SiteList';
diff --git a/client/app/features/SiteList/SiteList.tsx b/client/app/features/siteList/SiteList.tsx
similarity index 87%
rename from client/app/features/SiteList/SiteList.tsx
rename to client/app/features/siteList/SiteList.tsx
index af35d5154..973cdb0bf 100644
--- a/client/app/features/SiteList/SiteList.tsx
+++ b/client/app/features/siteList/SiteList.tsx
@@ -1,8 +1,7 @@
-import { HtCard, HtSpinner } from 'app/components/legacyUi';
-import React from 'react';
+import { HtCard, HtSpinner } from '~/components/legacyUi';
 import { Container } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
-import { SiteListGroup } from 'app/components/Site';
+import { SiteListGroup } from '~/components/Site';
 import { useTitle } from '~/hooks';
 import { useGetUserHaztrakSitesQuery } from '~/store';
 
diff --git a/client/app/features/SiteList/index.ts b/client/app/features/siteList/index.ts
similarity index 51%
rename from client/app/features/SiteList/index.ts
rename to client/app/features/siteList/index.ts
index 2fdde129b..aadad4656 100644
--- a/client/app/features/SiteList/index.ts
+++ b/client/app/features/siteList/index.ts
@@ -1,4 +1,4 @@
-import { SiteList } from '~/features/SiteList/SiteList';
+import { SiteList } from '~/features/siteList/SiteList';
 
 export { SiteList as Component };
 export default SiteList;
diff --git a/client/app/globals.css b/client/app/globals.css
index 83a2aae23..afaad0809 100644
--- a/client/app/globals.css
+++ b/client/app/globals.css
@@ -12,8 +12,8 @@
         --popover-foreground: 222.2 84% 4.9%;
         --primary: 211, 30%, 29%;
         --primary-foreground: 210 40% 98%;
-        --secondary: 210 40% 96.1%;
-        --secondary-foreground: 222.2 47.4% 11.2%;
+        --secondary: 217, 98.3%, 52.2%;
+        --secondary-foreground: 0 100% 98%;
         --muted: 210 40% 96.1%;
         --muted-foreground: 215.4 16.3% 46.9%;
         --accent: 210 40% 96.1%;
@@ -40,8 +40,8 @@
         --popover-foreground: 210 40% 98%;
         --primary: 211, 30%, 29%;
         --primary-foreground: 222.2 47.4% 11.2%;
-        --secondary: 217.2 32.6% 17.5%;
-        --secondary-foreground: 210 40% 98%;
+        --secondary: 217, 98.3%, 52.2%;
+        --secondary-foreground: 0 100% 98%;
         --muted: 217.2 32.6% 17.5%;
         --muted-foreground: 215 20.2% 65.1%;
         --accent: 217.2 32.6% 17.5%;
diff --git a/client/app/hooks/manifest/useManifestStatus/useManifestStatus.spec.tsx b/client/app/hooks/manifest/useManifestStatus/useManifestStatus.spec.tsx
index 299d2b5f3..fb3eb3c19 100644
--- a/client/app/hooks/manifest/useManifestStatus/useManifestStatus.spec.tsx
+++ b/client/app/hooks/manifest/useManifestStatus/useManifestStatus.spec.tsx
@@ -1,7 +1,7 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { cleanup } from '@testing-library/react';
-import React from 'react';
-import { renderWithProviders, screen } from 'app/mocks';
+
+import { renderWithProviders, screen } from '~/mocks';
 import { useManifestStatus } from './useManifestStatus';
 import userEvent from '@testing-library/user-event';
 import { ManifestStatus } from '~/components/Manifest/manifestSchema';
diff --git a/client/app/hooks/manifest/useOpenHandlerSearch/useOpenHandlerSearch.spec.tsx b/client/app/hooks/manifest/useOpenHandlerSearch/useOpenHandlerSearch.spec.tsx
index 9389c4b9f..fc6dc6eca 100644
--- a/client/app/hooks/manifest/useOpenHandlerSearch/useOpenHandlerSearch.spec.tsx
+++ b/client/app/hooks/manifest/useOpenHandlerSearch/useOpenHandlerSearch.spec.tsx
@@ -2,8 +2,8 @@ import { cleanup } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { SiteType } from '~/components/Manifest/manifestSchema';
 import { useHandlerSearchConfig } from '~/hooks/manifest/useOpenHandlerSearch/useHandlerSearchConfig';
-import React from 'react';
-import { renderWithProviders, screen } from 'app/mocks';
+
+import { renderWithProviders, screen } from '~/mocks';
 import { afterEach, describe, expect, it } from 'vitest';
 
 const TestChildComponent = () => {
diff --git a/client/app/hooks/manifest/useReadOnly/useReadOnly.spec.tsx b/client/app/hooks/manifest/useReadOnly/useReadOnly.spec.tsx
index 8f35ba9ca..fbce1d923 100644
--- a/client/app/hooks/manifest/useReadOnly/useReadOnly.spec.tsx
+++ b/client/app/hooks/manifest/useReadOnly/useReadOnly.spec.tsx
@@ -1,7 +1,7 @@
 import { cleanup } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React from 'react';
-import { renderWithProviders, screen } from 'app/mocks';
+
+import { renderWithProviders, screen } from '~/mocks';
 import { afterEach, describe, expect, it } from 'vitest';
 import { useReadOnly } from './useReadOnly';
 
diff --git a/client/app/hooks/manifest/useSaveManifest/useSaveManifest.spec.tsx b/client/app/hooks/manifest/useSaveManifest/useSaveManifest.spec.tsx
index 6747f4a96..da210b198 100644
--- a/client/app/hooks/manifest/useSaveManifest/useSaveManifest.spec.tsx
+++ b/client/app/hooks/manifest/useSaveManifest/useSaveManifest.spec.tsx
@@ -2,10 +2,10 @@ import { cleanup, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Manifest } from '~/components/Manifest';
 import { setupServer } from 'msw/node';
-import React from 'react';
-import { renderWithProviders, screen } from 'app/mocks';
+
+import { renderWithProviders, screen } from '~/mocks';
 import { createMockManifest } from '~/mocks/fixtures';
-import { mockManifestEndpoints } from 'app/mocks/handlers';
+import { mockManifestEndpoints } from '~/mocks/handlers';
 import { afterAll, afterEach, beforeAll, describe, expect, it } from 'vitest';
 import { useSaveManifest } from './useSaveManifest';
 
diff --git a/client/app/hooks/usePagination/usePagination.spec.tsx b/client/app/hooks/usePagination/usePagination.spec.tsx
index 7f96c4fb3..1e10e732b 100644
--- a/client/app/hooks/usePagination/usePagination.spec.tsx
+++ b/client/app/hooks/usePagination/usePagination.spec.tsx
@@ -1,6 +1,6 @@
 import { cleanup, fireEvent, waitFor } from '@testing-library/react';
 import React, { useState } from 'react';
-import { render, screen } from 'app/mocks';
+import { render, screen } from '~/mocks';
 import { afterEach, describe, expect, test } from 'vitest';
 import { usePagination } from './usePagination';
 
diff --git a/client/app/hooks/useProgressTracker/useProgressTracker.spec.tsx b/client/app/hooks/useProgressTracker/useProgressTracker.spec.tsx
index a1105d48d..c7c5f68fe 100644
--- a/client/app/hooks/useProgressTracker/useProgressTracker.spec.tsx
+++ b/client/app/hooks/useProgressTracker/useProgressTracker.spec.tsx
@@ -1,7 +1,7 @@
 import { http, HttpResponse } from 'msw';
 import { setupServer } from 'msw/node';
 import React, { useState } from 'react';
-import { renderWithProviders, screen, waitFor, cleanup } from 'app/mocks';
+import { renderWithProviders, screen, waitFor, cleanup } from '~/mocks';
 import { afterAll, afterEach, beforeAll, describe, expect, test } from 'vitest';
 import { useProgressTracker } from '~/hooks/useProgressTracker/useProgressTracker';
 import userEvent from '@testing-library/user-event';
diff --git a/client/app/hooks/useTitle/useTitle.spec.tsx b/client/app/hooks/useTitle/useTitle.spec.tsx
index 03ab8b9e8..5d5e7d928 100644
--- a/client/app/hooks/useTitle/useTitle.spec.tsx
+++ b/client/app/hooks/useTitle/useTitle.spec.tsx
@@ -1,7 +1,7 @@
 import { describe, expect, afterEach, it } from 'vitest';
 import { cleanup, fireEvent } from '@testing-library/react';
-import React from 'react';
-import { render, screen } from 'app/mocks';
+
+import { render, screen } from '~/mocks';
 import { useTitle } from '~/hooks';
 
 const originalPageTitle = 'originalPageTitle';
diff --git a/client/app/hooks/useUserSiteIds/useUserSiteIds.spec.tsx b/client/app/hooks/useUserSiteIds/useUserSiteIds.spec.tsx
index 2bce5e291..f1eb6b2a5 100644
--- a/client/app/hooks/useUserSiteIds/useUserSiteIds.spec.tsx
+++ b/client/app/hooks/useUserSiteIds/useUserSiteIds.spec.tsx
@@ -1,9 +1,9 @@
 import { cleanup, waitFor } from '@testing-library/react';
-import { renderWithProviders, screen } from 'app/mocks';
-import { mockUserEndpoints, mockWasteEndpoints } from 'app/mocks/handlers';
+import { renderWithProviders, screen } from '~/mocks';
+import { mockUserEndpoints, mockWasteEndpoints } from '~/mocks/handlers';
 import { http, HttpResponse } from 'msw';
 import { setupServer } from 'msw/node';
-import React from 'react';
+
 import { afterAll, afterEach, beforeAll, describe, expect, it } from 'vitest';
 import { useUserSiteIds } from '~/hooks';
 import { createMockHandler, createMockSite } from '~/mocks/fixtures';
diff --git a/client/app/hooks/useUserSiteIds/useUserSiteIds.tsx b/client/app/hooks/useUserSiteIds/useUserSiteIds.tsx
index 9a62a0290..c3b3f81bc 100644
--- a/client/app/hooks/useUserSiteIds/useUserSiteIds.tsx
+++ b/client/app/hooks/useUserSiteIds/useUserSiteIds.tsx
@@ -1,4 +1,4 @@
-import { HaztrakSite } from 'app/components/Site';
+import { HaztrakSite } from '~/components/Site';
 import { useGetUserHaztrakSitesQuery } from '~/store';
 
 /**
diff --git a/client/app/index.tsx b/client/app/index.tsx
index ff2930b25..58c72750b 100644
--- a/client/app/index.tsx
+++ b/client/app/index.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { rootStore } from '~/store';
 import App from './App';
+import React from 'react';
 
 // Start mock service worker in development mode
 async function enableMocking() {
diff --git a/client/app/mocks/fixtures/mockHandler.ts b/client/app/mocks/fixtures/mockHandler.ts
index d2b7e0799..5edda3762 100644
--- a/client/app/mocks/fixtures/mockHandler.ts
+++ b/client/app/mocks/fixtures/mockHandler.ts
@@ -1,4 +1,4 @@
-import { HaztrakSite } from 'app/components/Site';
+import { HaztrakSite } from '~/components/Site';
 import { Handler } from '~/components/Manifest';
 import { Transporter } from '~/components/Manifest/Transporter';
 import { RcraAddress, RcraSite } from '~/components/RcraSite';
diff --git a/client/app/routes.tsx b/client/app/routes.tsx
index 51edf9d76..229eaa231 100644
--- a/client/app/routes.tsx
+++ b/client/app/routes.tsx
@@ -1,20 +1,18 @@
-import React from 'react';
 import { createBrowserRouter } from 'react-router-dom';
-import { ErrorPage } from '~/features/ErrorPage/ErrorPage';
+import { ErrorPage } from '~/features/errorPage/ErrorPage';
 import { Login } from '~/features/login';
-import { orgsLoader } from '~/features/org';
 
 const Dashboard = () => import('~/features/dashboard');
 const Profile = () => import('~/features/profile');
-const SiteList = () => import('~/features/SiteList');
-const SiteDetails = () => import('~/features/SiteDetails');
+const SiteList = () => import('~/features/siteList');
+const SiteDetails = () => import('~/features/siteDetails');
 const About = () => import('~/features/about');
 const Org = () => import('~/features/org');
-const PrivateRoute = () => import('~/features/PrivateRoute');
+const PrivateRoute = () => import('~/features/privateRoute');
 const RegisterHero = () => import('~/features/register');
-const ManifestList = () => import('~/features/ManifestList');
-const ManifestDetails = () => import('~/features/ManifestDetails');
-const NewManifest = () => import('~/features/NewManifest');
+const ManifestList = () => import('~/features/manifestList');
+const ManifestDetails = () => import('~/features/manifestDetails');
+const NewManifest = () => import('~/features/newManifest');
 const Layout = () => import('./components/Layout');
 
 export const router = createBrowserRouter([
@@ -29,7 +27,6 @@ export const router = createBrowserRouter([
           {
             path: '',
             lazy: Org,
-            loader: orgsLoader,
             children: [
               {
                 path: '',
diff --git a/client/app/store/htApi.slice.ts b/client/app/store/htApi.slice.ts
index 58a1aa3b8..3d2890024 100644
--- a/client/app/store/htApi.slice.ts
+++ b/client/app/store/htApi.slice.ts
@@ -1,6 +1,6 @@
 import { BaseQueryFn, createApi } from '@reduxjs/toolkit/query/react';
 import { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios';
-import { HaztrakSite } from 'app/components/Site';
+import { HaztrakSite } from '~/components/Site';
 import { Manifest } from '~/components/Manifest';
 import { QuickerSignature } from '~/components/Manifest/QuickerSign';
 import { Code } from '~/components/Manifest/WasteLine/wasteLineSchema';
diff --git a/client/app/store/manifestSlice/manifest.slice.spec.tsx b/client/app/store/manifestSlice/manifest.slice.spec.tsx
index 38ab64ef9..5776b9a93 100644
--- a/client/app/store/manifestSlice/manifest.slice.spec.tsx
+++ b/client/app/store/manifestSlice/manifest.slice.spec.tsx
@@ -6,7 +6,7 @@ import reducer, {
   setManifestReadOnly,
   setManifestStatus,
 } from '~/store/manifestSlice/manifest.slice';
-import { renderWithProviders, screen } from 'app/mocks';
+import { renderWithProviders, screen } from '~/mocks';
 import { describe, expect, test } from 'vitest';
 
 const TestComponent = () => {
diff --git a/client/app/store/notificationSlice/notification.slice.spec.tsx b/client/app/store/notificationSlice/notification.slice.spec.tsx
index 62f7d1f12..32405d7f0 100644
--- a/client/app/store/notificationSlice/notification.slice.spec.tsx
+++ b/client/app/store/notificationSlice/notification.slice.spec.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
 import { addAlert, HaztrakAlert, removeAlert, useAppSelector } from '~/store';
-import { renderWithProviders, screen } from 'app/mocks';
+import { renderWithProviders, screen } from '~/mocks';
 import { describe, expect, test } from 'vitest';
 import reducer, { selectAllAlerts } from './notification.slice';
 
diff --git a/client/app/store/userApi/userApi.spec.tsx b/client/app/store/userApi/userApi.spec.tsx
index 1d980eb35..595ec0b28 100644
--- a/client/app/store/userApi/userApi.spec.tsx
+++ b/client/app/store/userApi/userApi.spec.tsx
@@ -2,8 +2,8 @@ import { waitFor } from '@testing-library/react';
 import { setupServer } from 'msw/node';
 import { useEffect, useState } from 'react';
 import { useGetUserQuery, useUpdateUserMutation } from '~/store';
-import { cleanup, renderWithProviders, screen } from 'app/mocks';
-import { mockUserEndpoints } from 'app/mocks/handlers';
+import { cleanup, renderWithProviders, screen } from '~/mocks';
+import { mockUserEndpoints } from '~/mocks/handlers';
 import { afterAll, afterEach, beforeAll, describe, expect, test } from 'vitest';
 
 const server = setupServer(...mockUserEndpoints);
diff --git a/client/app/store/userApi/userApi.ts b/client/app/store/userApi/userApi.ts
index aeaa29c60..61667c785 100644
--- a/client/app/store/userApi/userApi.ts
+++ b/client/app/store/userApi/userApi.ts
@@ -1,4 +1,4 @@
-import { HaztrakSite } from 'app/components/Site';
+import { HaztrakSite } from '~/components/Site';
 import { HaztrakUser } from '~/store/authSlice/auth.slice';
 import { haztrakApi, TaskResponse } from '~/store/htApi.slice';
 
diff --git a/client/index.html b/client/index.html
index 23c284269..4bf2b85fc 100644
--- a/client/index.html
+++ b/client/index.html
@@ -1,17 +1,17 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Web site created using create-react-app" />
-    <link rel="manifest" href="/manifest.json" />
-    <title>Haztrak</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <script type="module" src="/app/index.tsx"></script>
-  </body>
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="/favicon.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <link rel="manifest" href="/manifest.json" />
+  <title>Haztrak</title>
+</head>
+<body class='tw-h-screen bg-light'>
+<noscript>You need to enable JavaScript to run this app.</noscript>
+<div id="root"></div>
+<script type="module" src="/app/index.tsx"></script>
+</body>
 </html>
diff --git a/client/package-lock.json b/client/package-lock.json
index eb7a830f6..225bb0041 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -9,31 +9,27 @@
       "version": "0.7.2",
       "dependencies": {
         "@formkit/auto-animate": "^0.8.2",
-        "@fortawesome/fontawesome-svg-core": "^6.5.2",
-        "@fortawesome/free-brands-svg-icons": "^6.5.2",
-        "@fortawesome/free-solid-svg-icons": "^6.5.2",
-        "@fortawesome/react-fontawesome": "^0.2.2",
         "@hookform/error-message": "^2.0.1",
         "@hookform/resolvers": "^3.7.0",
         "@radix-ui/react-dialog": "^1.1.1",
         "@radix-ui/react-dropdown-menu": "^2.1.1",
         "@radix-ui/react-separator": "^1.1.0",
         "@radix-ui/react-slot": "^1.1.0",
-        "@reduxjs/toolkit": "^2.2.6",
+        "@reduxjs/toolkit": "^2.2.7",
         "@tanstack/match-sorter-utils": "^8.15.1",
         "@tanstack/react-table": "^8.19.2",
-        "axios": "^1.7.2",
+        "axios": "^1.7.4",
         "bootstrap": "^5.3.3",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
-        "lucide-react": "^0.427.0",
+        "lucide-react": "^0.428.0",
         "react": "^18.3.1",
         "react-bootstrap": "^2.10.4",
         "react-dom": "^18.3.1",
         "react-hook-form": "^7.52.1",
         "react-icons": "^5.3.0",
         "react-redux": "^9.1.2",
-        "react-router-dom": "^6.24.1",
+        "react-router-dom": "^6.26.1",
         "react-select": "^5.8.0",
         "react-toastify": "^10.0.5",
         "recharts": "^2.13.0-alpha.4",
@@ -1204,63 +1200,6 @@
       "resolved": "https://registry.npmjs.org/@formkit/auto-animate/-/auto-animate-0.8.2.tgz",
       "integrity": "sha512-SwPWfeRa5veb1hOIBMdzI+73te5puUBHmqqaF1Bu7FjvxlYSz/kJcZKSa9Cg60zL0uRNeJL2SbRxV6Jp6Q1nFQ=="
     },
-    "node_modules/@fortawesome/fontawesome-common-types": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.2.tgz",
-      "integrity": "sha512-gBxPg3aVO6J0kpfHNILc+NMhXnqHumFxOmjYCFfOiLZfwhnnfhtsdA2hfJlDnj+8PjAs6kKQPenOTKj3Rf7zHw==",
-      "hasInstallScript": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@fortawesome/fontawesome-svg-core": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.2.tgz",
-      "integrity": "sha512-5CdaCBGl8Rh9ohNdxeeTMxIj8oc3KNBgIeLMvJosBMdslK/UnEB8rzyDRrbKdL1kDweqBPo4GT9wvnakHWucZw==",
-      "hasInstallScript": true,
-      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "6.5.2"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@fortawesome/free-brands-svg-icons": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.5.2.tgz",
-      "integrity": "sha512-zi5FNYdmKLnEc0jc0uuHH17kz/hfYTg4Uei0wMGzcoCL/4d3WM3u1VMc0iGGa31HuhV5i7ZK8ZlTCQrHqRHSGQ==",
-      "hasInstallScript": true,
-      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "6.5.2"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@fortawesome/free-solid-svg-icons": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.2.tgz",
-      "integrity": "sha512-QWFZYXFE7O1Gr1dTIp+D6UcFUF0qElOnZptpi7PBUMylJh+vFmIedVe1Ir6RM1t2tEQLLSV1k7bR4o92M+uqlw==",
-      "hasInstallScript": true,
-      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "6.5.2"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@fortawesome/react-fontawesome": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz",
-      "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==",
-      "dependencies": {
-        "prop-types": "^15.8.1"
-      },
-      "peerDependencies": {
-        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
-        "react": ">=16.3"
-      }
-    },
     "node_modules/@hookform/error-message": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@hookform/error-message/-/error-message-2.0.1.tgz",
@@ -2195,9 +2134,9 @@
       }
     },
     "node_modules/@reduxjs/toolkit": {
-      "version": "2.2.6",
-      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.6.tgz",
-      "integrity": "sha512-kH0r495c5z1t0g796eDQAkYbEQ3a1OLYN9o8jQQVZyKyw367pfRGS+qZLkHYvFHiUUdafpoSlQ2QYObIApjPWA==",
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.7.tgz",
+      "integrity": "sha512-faI3cZbSdFb8yv9dhDTmGwclW0vk0z5o1cia+kf7gCbaCwHI5e+7tP57mJUv22pNcNbeA62GSrPpfrUfdXcQ6g==",
       "dependencies": {
         "immer": "^10.0.3",
         "redux": "^5.0.1",
@@ -2218,9 +2157,9 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.17.1",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.17.1.tgz",
-      "integrity": "sha512-mCOMec4BKd6BRGBZeSnGiIgwsbLGp3yhVqAD8H+PxiRNEHgDpZb8J1TnrSDlg97t0ySKMQJTHCWBCmBpSmkF6Q==",
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.1.tgz",
+      "integrity": "sha512-S45oynt/WH19bHbIXjtli6QmwNYvaz+vtnubvNpNDvUOoA/OWh6j1OikIP3G+v5GHdxyC6EXoChG3HgYGEUfcg==",
       "engines": {
         "node": ">=14.0.0"
       }
@@ -3401,9 +3340,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
-      "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.4.tgz",
+      "integrity": "sha512-DukmaFRnY6AzAALSH4J2M3k6PkaC+MfaAGdEERRWcC9q3/TWQwLpHR8ZRLKTdQ3aBDL64EdluRDjJqKw+BPZEw==",
       "dependencies": {
         "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
@@ -6618,10 +6557,9 @@
       }
     },
     "node_modules/lucide-react": {
-      "version": "0.427.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.427.0.tgz",
-      "integrity": "sha512-lv9s6c5BDF/ccuA0EgTdskTxIe11qpwBDmzRZHJAKtp8LTewAvDvOM+pTES9IpbBuTqkjiMhOmGpJ/CB+mKjFw==",
-      "license": "ISC",
+      "version": "0.428.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.428.0.tgz",
+      "integrity": "sha512-rGrzslfEcgqwh+TLBC5qJ8wvVIXhLvAIXVFKNHndYyb1utSxxn9rXOC+1CNJLi6yNOooyPqIs6+3YCp6uSiEvg==",
       "peerDependencies": {
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
       }
@@ -7875,11 +7813,11 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.24.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.24.1.tgz",
-      "integrity": "sha512-PTXFXGK2pyXpHzVo3rR9H7ip4lSPZZc0bHG5CARmj65fTT6qG7sTngmb6lcYu1gf3y/8KxORoy9yn59pGpCnpg==",
+      "version": "6.26.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.1.tgz",
+      "integrity": "sha512-kIwJveZNwp7teQRI5QmwWo39A5bXRyqpH0COKKmPnyD2vBvDwgFXSqDUYtt1h+FEyfnE8eXr7oe0MxRzVwCcvQ==",
       "dependencies": {
-        "@remix-run/router": "1.17.1"
+        "@remix-run/router": "1.19.1"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -7889,12 +7827,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.24.1",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.24.1.tgz",
-      "integrity": "sha512-U19KtXqooqw967Vw0Qcn5cOvrX5Ejo9ORmOtJMzYWtCT4/WOfFLIZGGsVLxcd9UkBO0mSTZtXqhZBsWlHr7+Sg==",
+      "version": "6.26.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.1.tgz",
+      "integrity": "sha512-veut7m41S1fLql4pLhxeSW3jlqs+4MtjRLj0xvuCEXsxusJCbs6I8yn9BxzzDX2XDgafrccY6hwjmd/bL54tFw==",
       "dependencies": {
-        "@remix-run/router": "1.17.1",
-        "react-router": "6.24.1"
+        "@remix-run/router": "1.19.1",
+        "react-router": "6.26.1"
       },
       "engines": {
         "node": ">=14.0.0"
diff --git a/client/package.json b/client/package.json
index 2d03da0ef..046910d00 100644
--- a/client/package.json
+++ b/client/package.json
@@ -18,31 +18,27 @@
   },
   "dependencies": {
     "@formkit/auto-animate": "^0.8.2",
-    "@fortawesome/fontawesome-svg-core": "^6.5.2",
-    "@fortawesome/free-brands-svg-icons": "^6.5.2",
-    "@fortawesome/free-solid-svg-icons": "^6.5.2",
-    "@fortawesome/react-fontawesome": "^0.2.2",
     "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "^3.7.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
-    "@reduxjs/toolkit": "^2.2.6",
+    "@reduxjs/toolkit": "^2.2.7",
     "@tanstack/match-sorter-utils": "^8.15.1",
     "@tanstack/react-table": "^8.19.2",
-    "axios": "^1.7.2",
+    "axios": "^1.7.4",
     "bootstrap": "^5.3.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.427.0",
+    "lucide-react": "^0.428.0",
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.4",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.52.1",
     "react-icons": "^5.3.0",
     "react-redux": "^9.1.2",
-    "react-router-dom": "^6.24.1",
+    "react-router-dom": "^6.26.1",
     "react-select": "^5.8.0",
     "react-toastify": "^10.0.5",
     "recharts": "^2.13.0-alpha.4",
diff --git a/client/public/mockServiceWorker.js b/client/public/mockServiceWorker.js
index cbd28e53a..1f4a15371 100644
--- a/client/public/mockServiceWorker.js
+++ b/client/public/mockServiceWorker.js
@@ -8,42 +8,42 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.3.4'
-const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
-const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
-const activeClientIds = new Set()
+const PACKAGE_VERSION = '2.3.4';
+const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423';
+const IS_MOCKED_RESPONSE = Symbol('isMockedResponse');
+const activeClientIds = new Set();
 
 self.addEventListener('install', function () {
-  self.skipWaiting()
-})
+  self.skipWaiting();
+});
 
 self.addEventListener('activate', function (event) {
-  event.waitUntil(self.clients.claim())
-})
+  event.waitUntil(self.clients.claim());
+});
 
 self.addEventListener('message', async function (event) {
-  const clientId = event.source.id
+  const clientId = event.source.id;
 
   if (!clientId || !self.clients) {
-    return
+    return;
   }
 
-  const client = await self.clients.get(clientId)
+  const client = await self.clients.get(clientId);
 
   if (!client) {
-    return
+    return;
   }
 
   const allClients = await self.clients.matchAll({
     type: 'window',
-  })
+  });
 
   switch (event.data) {
     case 'KEEPALIVE_REQUEST': {
       sendToClient(client, {
         type: 'KEEPALIVE_RESPONSE',
-      })
-      break
+      });
+      break;
     }
 
     case 'INTEGRITY_CHECK_REQUEST': {
@@ -53,78 +53,78 @@ self.addEventListener('message', async function (event) {
           packageVersion: PACKAGE_VERSION,
           checksum: INTEGRITY_CHECKSUM,
         },
-      })
-      break
+      });
+      break;
     }
 
     case 'MOCK_ACTIVATE': {
-      activeClientIds.add(clientId)
+      activeClientIds.add(clientId);
 
       sendToClient(client, {
         type: 'MOCKING_ENABLED',
         payload: true,
-      })
-      break
+      });
+      break;
     }
 
     case 'MOCK_DEACTIVATE': {
-      activeClientIds.delete(clientId)
-      break
+      activeClientIds.delete(clientId);
+      break;
     }
 
     case 'CLIENT_CLOSED': {
-      activeClientIds.delete(clientId)
+      activeClientIds.delete(clientId);
 
       const remainingClients = allClients.filter((client) => {
-        return client.id !== clientId
-      })
+        return client.id !== clientId;
+      });
 
       // Unregister itself when there are no more clients
       if (remainingClients.length === 0) {
-        self.registration.unregister()
+        self.registration.unregister();
       }
 
-      break
+      break;
     }
   }
-})
+});
 
 self.addEventListener('fetch', function (event) {
-  const { request } = event
+  const { request } = event;
 
   // Bypass navigation requests.
   if (request.mode === 'navigate') {
-    return
+    return;
   }
 
   // Opening the DevTools triggers the "only-if-cached" request
   // that cannot be handled by the worker. Bypass such requests.
   if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
-    return
+    return;
   }
 
   // Bypass all requests when there are no active clients.
   // Prevents the self-unregistered worked from handling requests
   // after it's been deleted (still remains active until the next reload).
   if (activeClientIds.size === 0) {
-    return
+    return;
   }
 
   // Generate unique request ID.
-  const requestId = crypto.randomUUID()
-  event.respondWith(handleRequest(event, requestId))
-})
+  const requestId = crypto.randomUUID();
+  event.respondWith(handleRequest(event, requestId));
+});
 
 async function handleRequest(event, requestId) {
-  const client = await resolveMainClient(event)
-  const response = await getResponse(event, client, requestId)
+  const client = await resolveMainClient(event);
+  const response = await getResponse(event, client, requestId);
 
   // Send back the response clone for the "response:*" life-cycle events.
   // Ensure MSW is active and ready to handle the message, otherwise
   // this message will pend indefinitely.
   if (client && activeClientIds.has(client.id)) {
-    ;(async function () {
-      const responseClone = response.clone()
+    (async function () {
+      const responseClone = response.clone();
 
       sendToClient(
         client,
@@ -140,12 +140,12 @@ async function handleRequest(event, requestId) {
             headers: Object.fromEntries(responseClone.headers.entries()),
           },
         },
-        [responseClone.body],
-      )
-    })()
+        [responseClone.body]
+      );
+    })();
   }
 
-  return response
+  return response;
 }
 
 // Resolve the main client for the given event.
@@ -153,49 +153,49 @@ async function handleRequest(event, requestId) {
 // that registered the worker. It's with the latter the worker should
 // communicate with during the response resolving phase.
 async function resolveMainClient(event) {
-  const client = await self.clients.get(event.clientId)
+  const client = await self.clients.get(event.clientId);
 
   if (client?.frameType === 'top-level') {
-    return client
+    return client;
   }
 
   const allClients = await self.clients.matchAll({
     type: 'window',
-  })
+  });
 
   return allClients
     .filter((client) => {
       // Get only those clients that are currently visible.
-      return client.visibilityState === 'visible'
+      return client.visibilityState === 'visible';
     })
     .find((client) => {
       // Find the client ID that's recorded in the
       // set of clients that have registered the worker.
-      return activeClientIds.has(client.id)
-    })
+      return activeClientIds.has(client.id);
+    });
 }
 
 async function getResponse(event, client, requestId) {
-  const { request } = event
+  const { request } = event;
 
   // Clone the request because it might've been already used
   // (i.e. its body has been read and sent to the client).
-  const requestClone = request.clone()
+  const requestClone = request.clone();
 
   function passthrough() {
-    const headers = Object.fromEntries(requestClone.headers.entries())
+    const headers = Object.fromEntries(requestClone.headers.entries());
 
     // Remove internal MSW request header so the passthrough request
     // complies with any potential CORS preflight checks on the server.
     // Some servers forbid unknown request headers.
-    delete headers['x-msw-intention']
+    delete headers['x-msw-intention'];
 
-    return fetch(requestClone, { headers })
+    return fetch(requestClone, { headers });
   }
 
   // Bypass mocking when the client is not active.
   if (!client) {
-    return passthrough()
+    return passthrough();
   }
 
   // Bypass initial page load requests (i.e. static assets).
@@ -203,11 +203,11 @@ async function getResponse(event, client, requestId) {
   // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
   // and is not ready to handle requests.
   if (!activeClientIds.has(client.id)) {
-    return passthrough()
+    return passthrough();
   }
 
   // Notify the client that a request has been intercepted.
-  const requestBuffer = await request.arrayBuffer()
+  const requestBuffer = await request.arrayBuffer();
   const clientMessage = await sendToClient(
     client,
     {
@@ -229,39 +229,36 @@ async function getResponse(event, client, requestId) {
         keepalive: request.keepalive,
       },
     },
-    [requestBuffer],
-  )
+    [requestBuffer]
+  );
 
   switch (clientMessage.type) {
     case 'MOCK_RESPONSE': {
-      return respondWithMock(clientMessage.data)
+      return respondWithMock(clientMessage.data);
     }
 
     case 'PASSTHROUGH': {
-      return passthrough()
+      return passthrough();
     }
   }
 
-  return passthrough()
+  return passthrough();
 }
 
 function sendToClient(client, message, transferrables = []) {
   return new Promise((resolve, reject) => {
-    const channel = new MessageChannel()
+    const channel = new MessageChannel();
 
     channel.port1.onmessage = (event) => {
       if (event.data && event.data.error) {
-        return reject(event.data.error)
+        return reject(event.data.error);
       }
 
-      resolve(event.data)
-    }
+      resolve(event.data);
+    };
 
-    client.postMessage(
-      message,
-      [channel.port2].concat(transferrables.filter(Boolean)),
-    )
-  })
+    client.postMessage(message, [channel.port2].concat(transferrables.filter(Boolean)));
+  });
 }
 
 async function respondWithMock(response) {
@@ -270,15 +267,15 @@ async function respondWithMock(response) {
   // instance will have status code set to 0. Since it's not possible to create
   // a Response instance with status code 0, handle that use-case separately.
   if (response.status === 0) {
-    return Response.error()
+    return Response.error();
   }
 
-  const mockedResponse = new Response(response.body, response)
+  const mockedResponse = new Response(response.body, response);
 
   Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
     value: true,
     enumerable: true,
-  })
+  });
 
-  return mockedResponse
+  return mockedResponse;
 }
diff --git a/client/tsconfig.json b/client/tsconfig.json
index a09102233..241770a3b 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -19,6 +19,7 @@
       "~/*": ["./app/*"]
     },
     "noEmit": true,
+    "emitDeclarationOnly": false,
     "incremental": true
   }
 }
diff --git a/client/vite.config.ts b/client/vite.config.ts
index 90ab5533e..8898999bf 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -41,6 +41,9 @@ export default defineConfig({
   server: {
     host: true,
     port: 3000,
+    hmr: {
+      clientPort: 8080,
+    },
   },
   test: {
     environment: 'jsdom',
@@ -65,6 +68,6 @@ export default defineConfig({
       ],
     },
     globals: true,
-    setupFiles: ['app/mocks/setupTests.ts'],
+    setupFiles: ['./app/mocks/setupTests.ts'],
   },
 });
diff --git a/docs/guide/src/design/browser-client.md b/docs/guide/src/design/browser-client.md
index 0d512d8be..eed91517d 100644
--- a/docs/guide/src/design/browser-client.md
+++ b/docs/guide/src/design/browser-client.md
@@ -7,8 +7,10 @@ user during the creation, editing, and signing of electronic manifests.
 
 ## Application Configuration
 
-The project was originally bootstrapped with `Create React App` but was transitioned to use the `Vite`
-build tool. For more information on Vite, see the [Vite documentation](https://vitejs.dev/). The configuration is found in `./client/vite.config.ts`.
+The project was originally bootstrapped with
+`Create React App` but was transitioned to use the `Vite`
+build tool. For more information on Vite, see the [Vite documentation](https://vitejs.dev/). The configuration is found in
+`./client/vite.config.ts`.
 
 The following tools have been configured to aid development:
 
@@ -18,7 +20,8 @@ The project uses ESLint to lint the codebase and prevent developers from making
 
 ### TypeScript
 
-While ESLint is great for catching common little mistakes related to JavaScript, TypeScript is a superset of JavaScript that adds type checking. It's a great tool for catching more complex mistakes and preventing them from making it into production. For more information on TypeScript, see the [TypeScript documentation](https://www.typescriptlang.org/). TypeScript is configured in `./client/tsconfig.json`.
+While ESLint is great for catching common little mistakes related to JavaScript, TypeScript is a superset of JavaScript that adds type checking. It's a great tool for catching more complex mistakes and preventing them from making it into production. For more information on TypeScript, see the [TypeScript documentation](https://www.typescriptlang.org/). TypeScript is configured in
+`./client/tsconfig.json`.
 
 ### Prettier
 
@@ -48,14 +51,16 @@ We use two naming conventions for selectors:
 
 #### React Components
 
-Constructors that return a React component should be named with PascalCase. (e.g., `MyComponent`). In addition, the file they are located in should also be named with PascalCase (e.g., `MyComponent.tsx`).
+Constructors that return a React component should be named with PascalCase. (e.g.,
+`MyComponent`). In addition, the file they are located in should also be named with PascalCase (e.g.,
+`MyComponent.tsx`).
 
 #### React features
 
 Do differentiate between react components and features, we use lowercase directory name. These directories often do not export a named constant that is identical to the directory name.
 
 ```Typescript
-import { ManifestDetails as Component } from './ManifestDetails';
+import { ManifestDetails as Component } from './manifestDetails';
 
 export { Component };
 ```
@@ -70,44 +75,64 @@ See the [source roadmap](./source-roadmap.md) for a high level overview of the p
 
 ### Application State
 
-The project employs `Redux` and `Redux toolkit` as a global state management library. The store is the single source of truth for the client application and stores information relevant to all/most/many subcomponents in the application. For more information on redux, see the [redux documentation](https://redux.js.org/).
+The project employs `Redux` and
+`Redux toolkit` as a global state management library. The store is the single source of truth for the client application and stores information relevant to all/most/many subcomponents in the application. For more information on redux, see the [redux documentation](https://redux.js.org/).
 
 ### Component State
 
-The project uses the `useState` and `useReducer` React hooks to manage component state. For more information on hooks, see the [react documentation](https://reactjs.org/docs/hooks-intro.html). This type of state is local to a component and can be passed down to child components via props or context.
+The project uses the `useState` and
+`useReducer` React hooks to manage component state. For more information on hooks, see the [react documentation](https://reactjs.org/docs/hooks-intro.html). This type of state is local to a component and can be passed down to child components via props or context.
 
 ### Form State
 
-The project embraces use of uncontrolled form inputs where possible. As such, the project uses the `react-hook-form` library to manage form state. For more information on `react-hook-form`, see the [react-hook-form documentation](https://react-hook-form.com/).
+The project embraces use of uncontrolled form inputs where possible. As such, the project uses the
+`react-hook-form` library to manage form state. For more information on
+`react-hook-form`, see the [react-hook-form documentation](https://react-hook-form.com/).
 
 Since the manifest is a relatively large and complex schema, we do need to use controlled components when necessary. For example, the hazardous waste generator's state, which is used in other parts of the manifest form to decide what state waste codes are available for selection. This state is controlled in the ManifestForm component and passed down to the child components that need it via props (e.g., the generator form and the waste line forms).
 
-The `react-hook-form` library facilitates the mechanism we use to add one-to-many relationships via the
+The
+`react-hook-form` library facilitates the mechanism we use to add one-to-many relationships via the
 `useFieldArray` hook. This allows us to add/edit/delete multiple waste lines and transporters to a manifest.
 
 The forms are also integrated with a schema validation library, currently zod. This allows us to validate the form data before submitting it to the server. For more information on zod, see the [zod documentation](https://zod.dev).
 
 ### URL state
 
-The project uses the `react-router` library to manage URL state. For more information on `react-router`, see the [react-router documentation](https://reactrouter.com/). Parameters are passed to components via the URL and are accessible via the `useParams` hook which allows users to share URLs with other users and bookmark URLs for later use.
+The project uses the
+`react-router` library to manage URL state. For more information on
+`react-router`, see the [react-router documentation](https://reactrouter.com/). Parameters are passed to components via the URL and are accessible via the
+`useParams` hook which allows users to share URLs with other users and bookmark URLs for later use.
 
-The complete URL tree can be viewed in the `routes.tsx` file in the root of the client directory.
+The complete URL tree can be viewed in the
+`routes.tsx` file in the root of the client directory.
 
 ## Testing
 
-This project uses `vitest` as the test runner as it integrates its configs seamlessly with the `vite` build tool and exposes a `Jest` compatible API (which is generally a standard in the javascript ecosystem). For more information on `vitest`, see the [vitest documentation](https://vitest.dev/).
+This project uses
+`vitest` as the test runner as it integrates its configs seamlessly with the
+`vite` build tool and exposes a
+`Jest` compatible API (which is generally a standard in the javascript ecosystem). For more information on
+`vitest`, see the [vitest documentation](https://vitest.dev/).
 
 ### Tooling
 
-As previously mentioned the project uses `vitest`. In addition, for assertions, the project uses the `react-testing-library` library. For more information on `react-testing-library`, see the [react-testing-library documentation](https://testing-library.com/docs/react-testing-library/intro/).
-We also use `msw` to mock API requests to ensure that test can be run offline with predictable results. For more information on `msw`, see the [msw documentation](https://mswjs.io/).
+As previously mentioned the project uses
+`vitest`. In addition, for assertions, the project uses the
+`react-testing-library` library. For more information on
+`react-testing-library`, see the [react-testing-library documentation](https://testing-library.com/docs/react-testing-library/intro/).
+We also use
+`msw` to mock API requests to ensure that test can be run offline with predictable results. For more information on
+`msw`, see the [msw documentation](https://mswjs.io/).
 
 ### Unit Tests
 
-Unit test represent the bulk of our tests. These test a single unit or component and ensure that it behaves as expected. Unit tests are located in the same directory as the component they are testing and are named with the `.spec.tsx` extension.
+Unit test represent the bulk of our tests. These test a single unit or component and ensure that it behaves as expected. Unit tests are located in the same directory as the component they are testing and are named with the
+`.spec.tsx` extension.
 
 ### Integration Tests
 
-Integration test look similar to unit test, but they test multiple components simultaneously and ensure they interact as expected. Like unit tests, integration tests are located in the same directory as the component they are testing and are named with the `.spec.tsx` extension.
+Integration test look similar to unit test, but they test multiple components simultaneously and ensure they interact as expected. Like unit tests, integration tests are located in the same directory as the component they are testing and are named with the
+`.spec.tsx` extension.
 
 With integration test, we primarily focus on testing behavior of components to ensure the user interface is behaving as expected. We do not test the implementation details of the components, such as the internal state of the component.
diff --git a/server/manifest/urls.py b/server/manifest/urls.py
index 2e9af6a55..5d88396a1 100644
--- a/server/manifest/urls.py
+++ b/server/manifest/urls.py
@@ -41,7 +41,7 @@
                 # Manifest Tracking Numbers
                 path("/mtn", include(mtn_patterns)),
                 # Manifests
-                path("", include(manifest_router.urls)),
+                path("/", include(manifest_router.urls)),
             ]
         ),
     ),
diff --git a/server/org/filters.py b/server/org/filters.py
index 218aca644..59e602228 100644
--- a/server/org/filters.py
+++ b/server/org/filters.py
@@ -14,7 +14,6 @@ class ObjectPermissionsFilter(BaseFilterBackend):
     }
 
     def filter_queryset(self, request, queryset, view):
-        print("filter_queryset")
         user = request.user
         permission = self.perm_format % {
             "app_label": queryset.model._meta.app_label,