diff --git a/client/src/components/Layout/Root.tsx b/client/src/components/Layout/Root.tsx
index 9b37af8a3..48a7b2309 100644
--- a/client/src/components/Layout/Root.tsx
+++ b/client/src/components/Layout/Root.tsx
@@ -1,11 +1,11 @@
 import { ErrorBoundary } from 'components/Error';
+import { HtSpinner } from 'components/UI';
 import React, { createContext, Dispatch, SetStateAction, Suspense, useState } from 'react';
 import { Container } from 'react-bootstrap';
 import { Outlet } from 'react-router-dom';
 import { PrivateRoute } from './PrivateRoute';
 import { Sidebar } from './Sidebar/Sidebar';
 import { TopNav } from './TopNav/TopNav';
-import { HtSpinner } from 'components/UI';
 
 export interface NavContextProps {
   showSidebar: boolean;
@@ -29,7 +29,7 @@ export function Root() {
             <Suspense
               fallback={
                 <Container fluid className="d-flex justify-content-center vh-100">
-                  <HtSpinner size="7x" />
+                  <HtSpinner size="6x" className="my-auto" />
                 </Container>
               }
             >
diff --git a/client/src/components/Manifest/ActionBtns/ManifestActionBtns.spec.tsx b/client/src/components/Manifest/ActionBtns/ManifestActionBtns.spec.tsx
new file mode 100644
index 000000000..c0a4fa431
--- /dev/null
+++ b/client/src/components/Manifest/ActionBtns/ManifestActionBtns.spec.tsx
@@ -0,0 +1,65 @@
+import '@testing-library/jest-dom';
+import { ManifestActionBtns } from 'components/Manifest/ActionBtns/ManifestActionBtns';
+import React from 'react';
+import { cleanup, renderWithProviders, screen } from 'test-utils';
+import { afterEach, describe, expect, test } from 'vitest';
+
+afterEach(() => {
+  cleanup();
+});
+
+describe('ManifestActionBtns', () => {
+  test.each([
+    ['Scheduled', true],
+    ['Scheduled', false],
+    ['NotAssigned', false],
+    ['NotAssigned', true],
+  ])('renders a save button when editing and {status: "%s", signAble: %s}', (status, signAble) => {
+    renderWithProviders(
+      // @ts-ignore - Status is expected to be a ManifestStatus, but we're passing a string
+      <ManifestActionBtns readOnly={false} manifestStatus={status} signAble={signAble} />
+    );
+    expect(screen.queryByRole('button', { name: /Save/i })).toBeInTheDocument();
+  });
+  test.each([[true, false]])(
+    'renders a edit button when {readOnly: %s, signAble: %s}',
+    (readOnly, signAble) => {
+      renderWithProviders(
+        // @ts-ignore - Status is expected to be a ManifestStatus, but we're passing a string
+        <ManifestActionBtns readOnly={readOnly} manifestStatus={'Scheduled'} signAble={signAble} />
+      );
+      expect(screen.queryByRole('button', { name: /Edit/i })).toBeInTheDocument();
+      expect(screen.queryByRole('button', { name: /Sign/i })).not.toBeInTheDocument();
+      expect(screen.queryByRole('button', { name: /Save/i })).not.toBeInTheDocument();
+    }
+  );
+  test.each([[true, true]])(
+    'renders a sign button when {readOnly: %s, signAble: %s}',
+    (readOnly, signAble) => {
+      renderWithProviders(
+        // @ts-ignore - Status is expected to be a ManifestStatus, but we're passing a string
+        <ManifestActionBtns readOnly={readOnly} manifestStatus={'Scheduled'} signAble={signAble} />
+      );
+      expect(screen.queryByRole('button', { name: /Sign/i })).toBeInTheDocument();
+    }
+  );
+  test.each([
+    [true, true],
+    [true, false],
+    [false, false],
+    [false, true],
+  ])(
+    'never renders a sign button when draft status with {readOnly: %s, signAble: %s}',
+    (readOnly, signAble) => {
+      renderWithProviders(
+        // @ts-ignore - Status is expected to be a ManifestStatus, but we're passing a string
+        <ManifestActionBtns
+          readOnly={readOnly}
+          manifestStatus={'NotAssigned'}
+          signAble={signAble}
+        />
+      );
+      expect(screen.queryByRole('button', { name: /Sign/i })).not.toBeInTheDocument();
+    }
+  );
+});
diff --git a/client/src/components/Manifest/ActionBtns/ManifestActionBtns.tsx b/client/src/components/Manifest/ActionBtns/ManifestActionBtns.tsx
index fe9f0a29a..ee0ffca71 100644
--- a/client/src/components/Manifest/ActionBtns/ManifestActionBtns.tsx
+++ b/client/src/components/Manifest/ActionBtns/ManifestActionBtns.tsx
@@ -1,44 +1,50 @@
-import React from 'react';
-import { FloatingActionBtn } from 'components/UI';
-import { ManifestStatus } from 'components/Manifest/manifestSchema';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { faFloppyDisk, faPen, faPenToSquare } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { ManifestStatus } from 'components/Manifest/manifestSchema';
+import { FloatingActionBtn } from 'components/UI';
+import React from 'react';
 
 interface ManifestActionBtnsProps {
   manifestStatus?: ManifestStatus;
-  readonly?: boolean;
+  readOnly?: boolean;
   signAble?: boolean;
 }
 
 export function ManifestActionBtns({
   manifestStatus,
-  readonly,
+  readOnly,
   signAble,
 }: ManifestActionBtnsProps) {
-  let variant = 'success';
-  let text = '';
-  let icon = faFloppyDisk;
-  let type: 'button' | 'submit' | 'reset' | undefined = 'button';
-  console.log('signAble', signAble);
-  if (signAble) {
+  let variant: string | undefined = undefined;
+  let text: string | undefined = undefined;
+  let icon: IconProp | undefined = undefined;
+  let type: 'button' | 'submit' | 'reset' | undefined = undefined;
+  let name: string | undefined = undefined;
+  if (!readOnly || manifestStatus === 'NotAssigned') {
+    variant = 'success';
+    icon = faFloppyDisk;
+    text = 'Save';
+    type = 'submit';
+    name = 'saveFAB';
+  } else if (signAble) {
     variant = 'primary';
     icon = faPen;
     text = 'Sign';
-  } else if (readonly) {
+    name = 'signFAB';
+    type = 'button';
+  } else if (readOnly) {
     variant = 'primary';
     icon = faPenToSquare;
     text = 'Edit';
-  } else if (!readonly) {
-    variant = 'success';
-    icon = faFloppyDisk;
-    text = 'Save';
-    type = 'submit';
+    name = 'editFAB';
+    type = 'button';
   } else {
     return <></>;
   }
 
   return (
-    <FloatingActionBtn variant={variant} type={type} position="bottom-left" extended>
+    <FloatingActionBtn name={name} variant={variant} type={type} position="bottom-left" extended>
       <span className="h5 me-3">{text}</span>
       <span className="h5">
         <FontAwesomeIcon icon={icon} />
diff --git a/client/src/components/Manifest/ManifestForm.spec.tsx b/client/src/components/Manifest/ManifestForm.spec.tsx
index f971f410a..b36945f8b 100644
--- a/client/src/components/Manifest/ManifestForm.spec.tsx
+++ b/client/src/components/Manifest/ManifestForm.spec.tsx
@@ -42,26 +42,23 @@ describe('ManifestForm validation', () => {
   test('a generator is required', async () => {
     // Arrange
     renderWithProviders(<ManifestForm readOnly={false} />);
-    const saveBtn = screen.getByRole('button', { name: /Save/i });
+    const saveBtn = screen.getAllByRole('button', { name: /Save/i })[0];
     // Act
     await userEvent.click(saveBtn);
     // Assert
     expect(await screen.findByText(/Generator is required/i)).toBeInTheDocument();
   });
   test('at least one transporter is required', async () => {
-    // Arrange
     renderWithProviders(<ManifestForm readOnly={false} />);
-    const saveBtn = screen.getByRole('button', { name: /Save/i });
-    // Act
+    const saveBtn = screen.getAllByRole('button', { name: /Save/i })[0];
     await userEvent.click(saveBtn);
-    // Assert
     expect(
       await screen.findByText(/A manifest requires at least 1 transporters/i)
     ).toBeInTheDocument();
   });
   test('at least one waste line is required', async () => {
     renderWithProviders(<ManifestForm readOnly={false} />);
-    const saveBtn = screen.getByRole('button', { name: /Save/i });
+    const saveBtn = screen.getAllByRole('button', { name: /Save/i })[0];
     await userEvent.click(saveBtn);
     expect(
       await screen.findByText(/A manifest requires at least 1 waste line/i)
@@ -69,7 +66,7 @@ describe('ManifestForm validation', () => {
   });
   test('a TSDF is required', async () => {
     renderWithProviders(<ManifestForm readOnly={false} />);
-    const saveBtn = screen.getByRole('button', { name: /Save/i });
+    const saveBtn = screen.getAllByRole('button', { name: /Save/i })[0];
     await userEvent.click(saveBtn);
     expect(
       await screen.findByText(/Designated receiving facility is required/i)
diff --git a/client/src/components/Manifest/ManifestForm.tsx b/client/src/components/Manifest/ManifestForm.tsx
index e364b6fac..3c961969d 100644
--- a/client/src/components/Manifest/ManifestForm.tsx
+++ b/client/src/components/Manifest/ManifestForm.tsx
@@ -1,5 +1,6 @@
 import { ErrorMessage } from '@hookform/error-message';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { ManifestActionBtns } from 'components/Manifest/ActionBtns/ManifestActionBtns';
 import { AdditionalInfoForm } from 'components/Manifest/AdditionalInfo';
 import { UpdateRcra } from 'components/Manifest/UpdateRcra/UpdateRcra';
 import { WasteLine } from 'components/Manifest/WasteLine/wasteLineSchema';
@@ -9,6 +10,7 @@ import React, { createContext, useEffect, useState } from 'react';
 import { Alert, Button, Col, Container, Form, Row, Stack } from 'react-bootstrap';
 import { FormProvider, SubmitHandler, useFieldArray, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
+import { toast } from 'react-toastify';
 import { manifest } from 'services';
 import {
   selectHaztrakSiteEpaIds,
@@ -22,8 +24,6 @@ import { Manifest, manifestSchema, ManifestStatus } from './manifestSchema';
 import { QuickerSignData, QuickerSignModal, QuickSignBtn } from './QuickerSign';
 import { Transporter, TransporterTable } from './Transporter';
 import { EditWasteModal, WasteLineTable } from './WasteLine';
-import { toast } from 'react-toastify';
-import { ManifestActionBtns } from 'components/Manifest/ActionBtns/ManifestActionBtns';
 
 const defaultValues: Manifest = {
   transporters: [],
@@ -191,9 +191,7 @@ export function ManifestForm({
 
   const nextSigner = manifest.getNextSigner(manifestData);
   const userSiteIds = useAppSelector(selectHaztrakSiteEpaIds);
-  console.log('userSiteIds', userSiteIds);
-  console.log('nextSigner', nextSigner);
-
+  // Whether the user has permissions and manifest is in a state to be signed
   const signAble = userSiteIds.includes(nextSigner ?? '');
 
   const isDraft = manifestData?.manifestTrackingNumber === undefined;
@@ -606,7 +604,7 @@ export function ManifestForm({
             </Stack>
             <ManifestActionBtns
               manifestStatus={manifestStatus}
-              readonly={readOnly}
+              readOnly={readOnly}
               signAble={signAble}
             />
           </HtForm>
diff --git a/client/src/components/Manifest/WasteLine/WasteLineForm.tsx b/client/src/components/Manifest/WasteLine/WasteLineForm.tsx
index 2a58e62fa..a96829453 100644
--- a/client/src/components/Manifest/WasteLine/WasteLineForm.tsx
+++ b/client/src/components/Manifest/WasteLine/WasteLineForm.tsx
@@ -7,7 +7,7 @@ import { HazardousWasteForm } from 'components/Manifest/WasteLine/HazardousWaste
 import { WasteLine, wasteLineSchema } from 'components/Manifest/WasteLine/wasteLineSchema';
 import { HtCard, HtForm } from 'components/UI';
 import React, { useContext } from 'react';
-import { Button, Col, Container, Form, Row } from 'react-bootstrap';
+import { Button, Col, Container, Form, Row, Stack } from 'react-bootstrap';
 import { Controller, FormProvider, UseFieldArrayReturn, useForm } from 'react-hook-form';
 import { QuantityForm } from './QuantityForm';
 
@@ -103,130 +103,132 @@ export function WasteLineForm({ handleClose, wasteForm, waste, lineNumber }: Was
     <FormProvider {...wasteMethods}>
       <HtForm onSubmit={handleSubmit(onSubmit)}>
         <Container>
-          <HtCard border={'secondary'}>
-            <HtCard.Body>
-              <h5>General Information</h5>
-              <Container className="ms-2">
-                <Row>
-                  <Controller
-                    control={wasteMethods.control}
-                    name={'dotHazardous'}
-                    render={() => (
-                      <HtForm.Switch
-                        id="dotHazardousSwitch"
-                        label="DOT Hazardous Material?"
-                        {...register('dotHazardous')}
-                        onChange={(e) => toggleDotHazardous(e.target.checked)}
-                      />
-                    )}
-                  />
-                </Row>
-                <Row>
-                  <Controller
-                    control={wasteMethods.control}
-                    name={'epaWaste'}
-                    render={() => (
-                      <HtForm.Switch
-                        id="epaWasteSwitch"
-                        label="EPA Hazardous Waste?"
-                        {...register('epaWaste')}
-                        onChange={(e) => toggleEpaWaste(e.target.checked)}
-                      />
-                    )}
-                  />
-                </Row>
-                <Row>
-                  <HtForm.Switch
-                    id="pcbSwitch"
-                    aria-label="PCBWaste"
-                    label="PCB waste?"
-                    {...register('pcb')}
-                  />
-                </Row>
-                <Row>
-                  <HtForm.Switch
-                    id="brSwitch"
-                    aria-label="biennialReport"
-                    label="Supply Biennial Report (BR) data?"
-                    {...register('br')}
-                  />
-                </Row>
-              </Container>
-
-              {!dotHazardous ? (
-                <Row>
-                  <HtForm.Group>
-                    <HtForm.Label htmlFor="wasteDescription">Waste Description</HtForm.Label>
-                    <Form.Control
-                      id="wasteDescription"
-                      as="textarea"
-                      className={errors.wasteDescription && 'is-invalid'}
-                      {...register(`wasteDescription`)}
+          <Stack gap={3}>
+            <HtCard border={'secondary'}>
+              <HtCard.Body>
+                <h5>General Information</h5>
+                <Container className="ms-2">
+                  <Row>
+                    <Controller
+                      control={wasteMethods.control}
+                      name={'dotHazardous'}
+                      render={() => (
+                        <HtForm.Switch
+                          id="dotHazardousSwitch"
+                          label="DOT Hazardous Material?"
+                          {...register('dotHazardous')}
+                          onChange={(e) => toggleDotHazardous(e.target.checked)}
+                        />
+                      )}
                     />
-                    <div className="invalid-feedback">{errors.wasteDescription?.message}</div>
-                  </HtForm.Group>
-                </Row>
-              ) : (
-                <Row>
-                  <Col xs={8}>
+                  </Row>
+                  <Row>
+                    <Controller
+                      control={wasteMethods.control}
+                      name={'epaWaste'}
+                      render={() => (
+                        <HtForm.Switch
+                          id="epaWasteSwitch"
+                          label="EPA Hazardous Waste?"
+                          {...register('epaWaste')}
+                          onChange={(e) => toggleEpaWaste(e.target.checked)}
+                        />
+                      )}
+                    />
+                  </Row>
+                  <Row>
+                    <HtForm.Switch
+                      id="pcbSwitch"
+                      aria-label="PCBWaste"
+                      label="PCB waste?"
+                      {...register('pcb')}
+                    />
+                  </Row>
+                  <Row>
+                    <HtForm.Switch
+                      id="brSwitch"
+                      aria-label="biennialReport"
+                      label="Supply Biennial Report (BR) data?"
+                      {...register('br')}
+                    />
+                  </Row>
+                </Container>
+
+                {!dotHazardous ? (
+                  <Row>
                     <HtForm.Group>
-                      <HtForm.Label htmlFor="dotDescription">DOT Description</HtForm.Label>
+                      <HtForm.Label htmlFor="wasteDescription">Waste Description</HtForm.Label>
                       <Form.Control
-                        id="dotDescription"
+                        id="wasteDescription"
                         as="textarea"
-                        {...register(`dotInformation.printedDotInformation`)}
-                        className={errors.dotInformation?.printedDotInformation && 'is-invalid'}
+                        className={errors.wasteDescription && 'is-invalid'}
+                        {...register(`wasteDescription`)}
                       />
-                      <div className="invalid-feedback">
-                        {errors.dotInformation?.printedDotInformation?.message}
-                      </div>
+                      <div className="invalid-feedback">{errors.wasteDescription?.message}</div>
                     </HtForm.Group>
-                  </Col>
-                  <Col>
-                    <HtForm.Group>
-                      <HtForm.Label htmlFor="idNumber">DOT ID Number</HtForm.Label>
-                      <DotIdSelect />
-                    </HtForm.Group>
-                  </Col>
+                  </Row>
+                ) : (
+                  <Row>
+                    <Col xs={8}>
+                      <HtForm.Group>
+                        <HtForm.Label htmlFor="dotDescription">DOT Description</HtForm.Label>
+                        <Form.Control
+                          id="dotDescription"
+                          as="textarea"
+                          {...register(`dotInformation.printedDotInformation`)}
+                          className={errors.dotInformation?.printedDotInformation && 'is-invalid'}
+                        />
+                        <div className="invalid-feedback">
+                          {errors.dotInformation?.printedDotInformation?.message}
+                        </div>
+                      </HtForm.Group>
+                    </Col>
+                    <Col>
+                      <HtForm.Group>
+                        <HtForm.Label htmlFor="idNumber">DOT ID Number</HtForm.Label>
+                        <DotIdSelect />
+                      </HtForm.Group>
+                    </Col>
+                  </Row>
+                )}
+              </HtCard.Body>
+            </HtCard>
+            <HtCard border={'secondary'}>
+              <HtCard.Body>
+                <h5>Container and Quantity</h5>
+                <Row className="mb-2">
+                  <QuantityForm />
                 </Row>
-              )}
-            </HtCard.Body>
-          </HtCard>
-          <HtCard border={'secondary'}>
-            <HtCard.Body>
-              <h5>Container and Quantity</h5>
-              <Row className="mb-2">
-                <QuantityForm />
-              </Row>
-            </HtCard.Body>
-          </HtCard>
-          <HtCard border={'secondary'}>
-            <HtCard.Body>
-              <h5>Waste Codes</h5>
-              <Row className="mb-2">
-                <HazardousWasteForm epaWaste={epaWaste} />
-              </Row>
-            </HtCard.Body>
-          </HtCard>
-          <HtCard border={'secondary'}>
-            <HtCard.Body>
-              <h5>Special Handing Instructions and Additional Info</h5>
-              <Row className="mb-2">
-                {/* AdditionalInfoForm needs to be used in the context of a
+              </HtCard.Body>
+            </HtCard>
+            <HtCard border={'secondary'}>
+              <HtCard.Body>
+                <h5>Waste Codes</h5>
+                <Row className="mb-2">
+                  <HazardousWasteForm epaWaste={epaWaste} />
+                </Row>
+              </HtCard.Body>
+            </HtCard>
+            <HtCard border={'secondary'}>
+              <HtCard.Body>
+                <h5>Special Handing Instructions and Additional Info</h5>
+                <Row className="mb-2">
+                  {/* AdditionalInfoForm needs to be used in the context of a
                 WasteLineForm or Manifest (e.g., surrounded by FormProvider*/}
-                <AdditionalInfoForm />
-              </Row>
-            </HtCard.Body>
-          </HtCard>
+                  <AdditionalInfoForm />
+                </Row>
+              </HtCard.Body>
+            </HtCard>
+            <div className="d-flex justify-content-end">
+              <Button variant="danger" onClick={handleClose}>
+                Cancel
+              </Button>
+              <Button type="submit" variant="success" className="mx-3">
+                Add
+              </Button>
+            </div>
+          </Stack>
         </Container>
-        <div className="d-flex justify-content-end">
-          <Button variant="danger" onClick={handleClose}>
-            Cancel
-          </Button>
-          <Button type="submit" variant="success" className="mx-3">
-            Add
-          </Button>
-        </div>
       </HtForm>
     </FormProvider>
   );
diff --git a/client/src/components/Rcrainfo/buttons/SyncManifestBtn/SyncManifestBtn.spec.tsx b/client/src/components/Rcrainfo/buttons/SyncManifestBtn/SyncManifestBtn.spec.tsx
index 380f5b371..e280e3078 100644
--- a/client/src/components/Rcrainfo/buttons/SyncManifestBtn/SyncManifestBtn.spec.tsx
+++ b/client/src/components/Rcrainfo/buttons/SyncManifestBtn/SyncManifestBtn.spec.tsx
@@ -11,7 +11,7 @@ const testTaskID = 'testTaskId';
 
 const server = setupServer(
   ...[
-    http.post(`${API_BASE_URL}rcra/manifest/emanifest/sync`, (info) => {
+    http.post(`${API_BASE_URL}rcra/manifest/emanifest/sync`, () => {
       // Mock Sync Site Manifests response
       return HttpResponse.json(
         {
diff --git a/client/src/components/UI/FloatingActionBtn.tsx b/client/src/components/UI/FloatingActionBtn.tsx
index 3c66026be..29edcfbec 100644
--- a/client/src/components/UI/FloatingActionBtn.tsx
+++ b/client/src/components/UI/FloatingActionBtn.tsx
@@ -17,7 +17,7 @@ export function FloatingActionBtn({
     position === undefined || position === 'bottom-right'
       ? 'position-fixed bottom-0 end-0 m-5'
       : 'position-fixed bottom-0 start-0 m-5';
-  const defaultClasses = `p-2 rounded-5 ${extended ? 'px-4' : ''}`;
+  const defaultClasses = `p-2 rounded-5 shadow bg-gradient ${extended ? 'px-4' : ''}`;
   return (
     <div className={positionClasses}>
       <Button {...props} className={`${defaultClasses} ${className}`}>
diff --git a/client/src/components/UI/HtCard/HtCard.tsx b/client/src/components/UI/HtCard/HtCard.tsx
index b8a5a4363..bec14b0ad 100644
--- a/client/src/components/UI/HtCard/HtCard.tsx
+++ b/client/src/components/UI/HtCard/HtCard.tsx
@@ -1,5 +1,4 @@
 import { ErrorBoundary } from 'components/Error';
-import { HtSpinner } from 'components/UI';
 import React, { ReactElement } from 'react';
 import { Card, CardHeaderProps, CardProps, Container } from 'react-bootstrap';
 
@@ -8,10 +7,6 @@ interface HeaderProps extends CardHeaderProps {
   size?: string;
 }
 
-interface SpinnerProps extends CardProps {
-  message?: string;
-}
-
 /**
  * Card with haztrak styling, yeah baby
  * @example
@@ -99,17 +94,3 @@ HtCard.Body = function ({ className, children, ...props }: CardProps): ReactElem
     </Card.Body>
   );
 };
-
-/**
- * Card spinner to use while asynchronous promise is in pending state
- * @param {{message: String}} message string to render next to spinner
- * @param {{classname: String}} string class attributes to pass
- * @constructor
- * @example
- * <HtCard.Body>
- *   <HtCard.Spinner message="loading..."/>
- * </HtCard.Body>
- */
-HtCard.Spinner = function ({ message, className }: SpinnerProps): ReactElement {
-  return <HtSpinner message={message} className={className} />;
-};
diff --git a/client/src/components/UI/HtSpinner.tsx b/client/src/components/UI/HtSpinner.tsx
index 4db685900..8c812c25c 100644
--- a/client/src/components/UI/HtSpinner.tsx
+++ b/client/src/components/UI/HtSpinner.tsx
@@ -1,20 +1,21 @@
 import { faGear } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FontAwesomeIcon, FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
 import React, { ReactElement } from 'react';
 
-interface SpinnerProps {
-  message?: string;
+interface HtSpinnerProps extends Omit<FontAwesomeIconProps, 'icon'> {
   className?: string;
-  size?: 'sm' | 'lg' | 'xs' | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x';
 }
 
-export function HtSpinner({ message, className, size }: SpinnerProps): ReactElement {
+export function HtSpinner({ className, size }: HtSpinnerProps): ReactElement {
+  const defaultCLasses = 'text-muted bg-transparent';
   return (
     <>
-      {/*<h4 className="d-flex justify-content-center my-auto text-muted bg-transparent p-5 my-5 ">*/}
-      <FontAwesomeIcon icon={faGear} className={`${className}`} spin size={size ?? '2xl'} />
-      <span className="sr-only">{message ? message : 'Loading...'}</span>
-      {/*</h4>*/}
+      <FontAwesomeIcon
+        icon={faGear}
+        className={`${defaultCLasses} ${className}`}
+        spin
+        size={size ?? '2xl'}
+      />
     </>
   );
 }
diff --git a/client/src/features/ManifestList/ManifestList.tsx b/client/src/features/ManifestList/ManifestList.tsx
index b97987cd6..140089a8e 100644
--- a/client/src/features/ManifestList/ManifestList.tsx
+++ b/client/src/features/ManifestList/ManifestList.tsx
@@ -1,7 +1,7 @@
 import { NewManifestBtn } from 'components/Manifest';
 import { MtnTable } from 'components/Mtn';
 import { SyncManifestBtn } from 'components/Rcrainfo';
-import { HtCard } from 'components/UI';
+import { HtCard, HtSpinner } from 'components/UI';
 import { useTitle } from 'hooks';
 import React, { ReactElement, useState } from 'react';
 import { Container, Row, Stack } from 'react-bootstrap';
@@ -40,7 +40,7 @@ export function ManifestList(): ReactElement {
         <HtCard title="Manifests">
           <HtCard.Body>
             {isLoading ? (
-              <HtCard.Spinner />
+              <HtSpinner />
             ) : data ? (
               <MtnTable manifests={data} pageSize={pageSize} />
             ) : (
diff --git a/client/src/features/Profile/Profile.tsx b/client/src/features/Profile/Profile.tsx
index 6cbe3a1c5..c58c1598f 100644
--- a/client/src/features/Profile/Profile.tsx
+++ b/client/src/features/Profile/Profile.tsx
@@ -8,8 +8,7 @@ import { Col, Container, Row } from 'react-bootstrap';
 import {
   getRcraProfile,
   HaztrakUser,
-  ProfileSlice,
-  selectRcraProfile,
+  selectHaztrakProfile,
   selectUser,
   useAppDispatch,
   useAppSelector,
@@ -22,7 +21,7 @@ import {
  */
 export function Profile(): ReactElement {
   const dispatch = useAppDispatch();
-  const profile: ProfileSlice | undefined = useAppSelector(selectRcraProfile);
+  const profile = useAppSelector(selectHaztrakProfile);
   const user: HaztrakUser | undefined = useAppSelector(selectUser);
   useTitle('Profile');
 
diff --git a/client/src/features/SiteDetails/SiteDetails.tsx b/client/src/features/SiteDetails/SiteDetails.tsx
index ce9f26560..3300dbd07 100644
--- a/client/src/features/SiteDetails/SiteDetails.tsx
+++ b/client/src/features/SiteDetails/SiteDetails.tsx
@@ -1,6 +1,6 @@
 import { SyncManifestBtn } from 'components/Rcrainfo';
 import { RcraSiteDetails } from 'components/RcraSite';
-import { HtCard } from 'components/UI';
+import { HtCard, HtSpinner } from 'components/UI';
 import React, { ReactElement } from 'react';
 import { Button, Container, Stack } from 'react-bootstrap';
 import { useNavigate, useParams } from 'react-router-dom';
@@ -20,27 +20,26 @@ export function SiteDetails(): ReactElement {
   const navigate = useNavigate();
 
   if (error) throw error;
-  return (
-    <Container>
-      <Stack className="my-3" gap={2}>
-        <div className="pe-0 d-flex flex-row-reverse">
-          <Button variant="outline-success" onClick={() => navigate(`/site/${siteId}/manifest`)}>
-            View Manifest
-          </Button>
-          <div className="me-2">
-            <SyncManifestBtn siteId={siteId ? siteId : ''} />
+  if (isLoading) return <HtSpinner />;
+  if (data)
+    return (
+      <Container>
+        <Stack className="my-3" gap={2}>
+          <div className="pe-0 d-flex flex-row-reverse">
+            <Button variant="outline-success" onClick={() => navigate(`/site/${siteId}/manifest`)}>
+              View Manifest
+            </Button>
+            <div className="me-2">
+              <SyncManifestBtn siteId={siteId ? siteId : ''} />
+            </div>
           </div>
-        </div>
-        <HtCard title={siteId}>
-          <HtCard.Body>
-            {isLoading ? (
-              <HtCard.Spinner message="Loading site details..." />
-            ) : (
-              data && <RcraSiteDetails handler={data.handler} />
-            )}
-          </HtCard.Body>
-        </HtCard>
-      </Stack>
-    </Container>
-  );
+          <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/src/features/SiteList/SiteList.tsx b/client/src/features/SiteList/SiteList.tsx
index 193eff17d..e9f093f36 100644
--- a/client/src/features/SiteList/SiteList.tsx
+++ b/client/src/features/SiteList/SiteList.tsx
@@ -1,5 +1,5 @@
 import { SiteListGroup } from 'components/HaztrakSite';
-import { HtCard } from 'components/UI';
+import { HtCard, HtSpinner } from 'components/UI';
 import { useTitle } from 'hooks';
 import React from 'react';
 import { Container } from 'react-bootstrap';
@@ -16,7 +16,7 @@ export function SiteList() {
       <HtCard title="My Sites">
         <HtCard.Body>
           {isLoading && !error ? (
-            <HtCard.Spinner />
+            <HtSpinner />
           ) : data ? (
             <SiteListGroup sites={data} />
           ) : (