diff --git a/client/src/App/App.jsx b/client/src/App/App.jsx
index 199bbd26d..1b2931d8b 100644
--- a/client/src/App/App.jsx
+++ b/client/src/App/App.jsx
@@ -4,7 +4,7 @@ import LogRocket from "logrocket";
 import React, { lazy, Suspense, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { Route } from "react-router-dom";
+import { Route,  Routes } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import DocumentEditorContainer from "../components/document-editor/document-editor.container";
 import ErrorBoundary from "../components/error-boundary/error-boundary.component";
@@ -73,6 +73,7 @@ export function App({
   window.addEventListener("online", function (e) {
     setOnline(true);
   });
+
   useEffect(() => {
     if (currentUser.authorized && bodyshop) {
       client.setAttribute("imexshopid", bodyshop.imexshopid);
@@ -107,54 +108,77 @@ export function App({
       />
     );
 
+  // <Switch>
+  //   <Suspense fallback={<LoadingSpinner message="ImEX Online" />}>
+  //     <ErrorBoundary>
+  //       <Route exact path="/" component={LandingPage} />
+  //     </ErrorBoundary>
+  //     <ErrorBoundary>
+  //       <Route exact path="/signin" component={SignInPage} />
+  //     </ErrorBoundary>
+  //     <ErrorBoundary>
+  //       <Route exact path="/resetpassword" component={ResetPassword} />
+  //     </ErrorBoundary>
+  //     <ErrorBoundary>
+  //       <Route exact path="/csi/:surveyId" component={CsiPage} />
+  //     </ErrorBoundary>
+  //     <ErrorBoundary>
+  //       <Route exact path="/disclaimer" component={DisclaimerPage} />
+  //     </ErrorBoundary>
+  //     <ErrorBoundary>
+  //       <Route
+  //           exact
+  //           path="/mp/:paymentIs"
+  //           component={MobilePaymentContainer}
+  //       />
+  //     </ErrorBoundary>
+  //     <ErrorBoundary>
+  //       <PrivateRoute
+  //           isAuthorized={currentUser.authorized}
+  //           path="/manage"
+  //           component={ManagePage}
+  //       />
+  //     </ErrorBoundary>
+  //     <ErrorBoundary>
+  //       <PrivateRoute
+  //           isAuthorized={currentUser.authorized}
+  //           path="/tech"
+  //           component={TechPageContainer}
+  //       />
+  //     </ErrorBoundary>
+  //     <ErrorBoundary>
+  //       <PrivateRoute
+  //           isAuthorized={currentUser.authorized}
+  //           path="/edit"
+  //           component={DocumentEditorContainer}
+  //       />
+  //     </ErrorBoundary>
+  //   </Suspense>
+  // </Switch>
+
+
   return (
-    <Switch>
-      <Suspense fallback={<LoadingSpinner message="ImEX Online" />}>
-        <ErrorBoundary>
-          <Route exact path="/" component={LandingPage} />
-        </ErrorBoundary>
-        <ErrorBoundary>
-          <Route exact path="/signin" component={SignInPage} />
-        </ErrorBoundary>
-        <ErrorBoundary>
-          <Route exact path="/resetpassword" component={ResetPassword} />
-        </ErrorBoundary>
-        <ErrorBoundary>
-          <Route exact path="/csi/:surveyId" component={CsiPage} />
-        </ErrorBoundary>
-        <ErrorBoundary>
-          <Route exact path="/disclaimer" component={DisclaimerPage} />
-        </ErrorBoundary>
-        <ErrorBoundary>
-          <Route
-            exact
-            path="/mp/:paymentIs"
-            component={MobilePaymentContainer}
-          />
-        </ErrorBoundary>
-        <ErrorBoundary>
-          <PrivateRoute
-            isAuthorized={currentUser.authorized}
-            path="/manage"
-            component={ManagePage}
-          />
-        </ErrorBoundary>
-        <ErrorBoundary>
-          <PrivateRoute
-            isAuthorized={currentUser.authorized}
-            path="/tech"
-            component={TechPageContainer}
-          />
-        </ErrorBoundary>
-        <ErrorBoundary>
-          <PrivateRoute
-            isAuthorized={currentUser.authorized}
-            path="/edit"
-            component={DocumentEditorContainer}
-          />
-        </ErrorBoundary>
-      </Suspense>
-    </Switch>
+        <Suspense fallback={<LoadingSpinner message="ImEX Online" />}>
+          <ErrorBoundary>
+            <Routes>
+              <Route path="/" element={<LandingPage />} />
+              <Route path="/signin" element={<SignInPage />} />
+              <Route path="/resetpassword" element={<ResetPassword />} />
+              <Route path="/csi/:surveyId" element={<CsiPage />} />
+              <Route path="/disclaimer" element={<DisclaimerPage />} />
+              <Route path="/mp/:paymentIs" element={<MobilePaymentContainer />} />
+              <Route path="/manage" element={<PrivateRoute isAuthorized={currentUser.authorized} />}>
+                <Route path="/manage" element={<ManagePage />} />
+              </Route>
+              <Route path="/tech" element={<PrivateRoute isAuthorized={currentUser.authorized} />}>
+                <Route path="/tech" element={<TechPageContainer />} />
+              </Route>
+              <Route path="/edit" element={<PrivateRoute isAuthorized={currentUser.authorized} />}>
+                <Route path="/edit" element={<DocumentEditorContainer />} />
+              </Route>
+            </Routes>
+          </ErrorBoundary>
+        </Suspense>
   );
 }
 
diff --git a/client/src/components/bill-detail-edit/bill-detail-edit-component.jsx b/client/src/components/bill-detail-edit/bill-detail-edit-component.jsx
index f92a4a349..fd78843ad 100644
--- a/client/src/components/bill-detail-edit/bill-detail-edit-component.jsx
+++ b/client/src/components/bill-detail-edit/bill-detail-edit-component.jsx
@@ -1,21 +1,17 @@
-import { useMutation, useQuery } from "@apollo/client";
-import { Button, Form, PageHeader, Popconfirm, Space } from "antd";
+import {useMutation, useQuery} from "@apollo/client";
+import {Button, Form, PageHeader, Popconfirm, Space} from "antd";
 import moment from "moment";
 import queryString from "query-string";
-import React, { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
-import { useLocation } from "react-router-dom";
-import { createStructuredSelector } from "reselect";
-import {
-  DELETE_BILL_LINE,
-  INSERT_NEW_BILL_LINES,
-  UPDATE_BILL_LINE
-} from "../../graphql/bill-lines.queries";
-import { QUERY_BILL_BY_PK, UPDATE_BILL } from "../../graphql/bills.queries";
-import { insertAuditTrail } from "../../redux/application/application.actions";
-import { setModalContext } from "../../redux/modals/modals.actions";
-import { selectBodyshop } from "../../redux/user/user.selectors";
+import React, {useState} from "react";
+import {useTranslation} from "react-i18next";
+import {connect} from "react-redux";
+import {useSearchParams} from "react-router-dom";
+import {createStructuredSelector} from "reselect";
+import {DELETE_BILL_LINE, INSERT_NEW_BILL_LINES, UPDATE_BILL_LINE} from "../../graphql/bill-lines.queries";
+import {QUERY_BILL_BY_PK, UPDATE_BILL} from "../../graphql/bills.queries";
+import {insertAuditTrail} from "../../redux/application/application.actions";
+import {setModalContext} from "../../redux/modals/modals.actions";
+import {selectBodyshop} from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import AlertComponent from "../alert/alert.component";
 import BillFormContainer from "../bill-form/bill-form.container";
@@ -27,225 +23,223 @@ import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import BillDetailEditReturn from "./bill-detail-edit-return.component";
 
 const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop,
+    bodyshop: selectBodyshop,
 });
 const mapDispatchToProps = (dispatch) => ({
-  setPartsOrderContext: (context) =>
-    dispatch(setModalContext({ context: context, modal: "partsOrder" })),
-  insertAuditTrail: ({ jobid, operation }) =>
-    dispatch(insertAuditTrail({ jobid, operation })),
+    setPartsOrderContext: (context) =>
+        dispatch(setModalContext({context: context, modal: "partsOrder"})),
+    insertAuditTrail: ({jobid, operation}) =>
+        dispatch(insertAuditTrail({jobid, operation})),
 });
 
 export default connect(
-  mapStateToProps,
-  mapDispatchToProps
+    mapStateToProps,
+    mapDispatchToProps
 )(BillDetailEditcontainer);
 
-export function BillDetailEditcontainer({
-  setPartsOrderContext,
-  insertAuditTrail,
-  bodyshop,
-}) {
-  const search = queryString.parse(useLocation().search);
+export function BillDetailEditcontainer({setPartsOrderContext, insertAuditTrail, bodyshop,}) {
+    const search = queryString.parse(useSearchParams().toString());
 
-  const { t } = useTranslation();
-  const [form] = Form.useForm();
-  const [visible, setVisible] = useState(false);
-  const [updateLoading, setUpdateLoading] = useState(false);
-  const [update_bill] = useMutation(UPDATE_BILL);
-  const [insertBillLine] = useMutation(INSERT_NEW_BILL_LINES);
-  const [updateBillLine] = useMutation(UPDATE_BILL_LINE);
-  const [deleteBillLine] = useMutation(DELETE_BILL_LINE);
+    const {t} = useTranslation();
+    const [form] = Form.useForm();
+    const [visible, setVisible] = useState(false);
+    const [updateLoading, setUpdateLoading] = useState(false);
+    const [update_bill] = useMutation(UPDATE_BILL);
+    const [insertBillLine] = useMutation(INSERT_NEW_BILL_LINES);
+    const [updateBillLine] = useMutation(UPDATE_BILL_LINE);
+    const [deleteBillLine] = useMutation(DELETE_BILL_LINE);
 
-  const { loading, error, data, refetch } = useQuery(QUERY_BILL_BY_PK, {
-    variables: { billid: search.billid },
-    skip: !!!search.billid,
-    fetchPolicy: "network-only",
-    nextFetchPolicy: "network-only",
-  });
-
-  const handleSave = () => {
-    //It's got a previously deducted bill line!
-    if (
-      data.bills_by_pk.billlines.filter((b) => b.deductedfromlbr).length > 0 ||
-      form.getFieldValue("billlines").filter((b) => b.deductedfromlbr).length >
-        0
-    )
-      setVisible(true);
-    else {
-      form.submit();
-    }
-  };
-
-  const handleFinish = async (values) => {
-    setUpdateLoading(true);
-    //let adjustmentsToInsert = {};
-
-    const { billlines, upload, ...bill } = values;
-    const updates = [];
-    updates.push(
-      update_bill({
-        variables: { billId: search.billid, bill: bill },
-      })
-    );
-
-    billlines.forEach((l) => {
-      delete l.selected;
+    const {loading, error, data, refetch} = useQuery(QUERY_BILL_BY_PK, {
+        variables: {billid: search.billid},
+        skip: !!!search.billid,
+        fetchPolicy: "network-only",
+        nextFetchPolicy: "network-only",
     });
 
-    //Find bill lines that were deleted.
-    const deletedJobLines = [];
+    // ... rest of the code remains the same
 
-    data.bills_by_pk.billlines.forEach((a) => {
-      const matchingRecord = billlines.find((b) => b.id === a.id);
-      if (!matchingRecord) {
-        deletedJobLines.push(a);
-      }
-    });
+    const handleSave = () => {
+        //It's got a previously deducted bill line!
+        if (
+            data.bills_by_pk.billlines.filter((b) => b.deductedfromlbr).length > 0 ||
+            form.getFieldValue("billlines").filter((b) => b.deductedfromlbr).length >
+            0
+        )
+            setVisible(true);
+        else {
+            form.submit();
+        }
+    };
 
-    deletedJobLines.forEach((d) => {
-      updates.push(deleteBillLine({ variables: { id: d.id } }));
-    });
+    const handleFinish = async (values) => {
+        setUpdateLoading(true);
+        //let adjustmentsToInsert = {};
 
-    billlines.forEach((billline) => {
-      const { deductedfromlbr, inventories, jobline, ...il } = billline;
-      delete il.__typename;
-
-      if (il.id) {
+        const {billlines, upload, ...bill} = values;
+        const updates = [];
         updates.push(
-          updateBillLine({
-            variables: {
-              billLineId: il.id,
-              billLine: {
-                ...il,
-                deductedfromlbr: deductedfromlbr,
-                joblineid: il.joblineid === "noline" ? null : il.joblineid,
-              },
-            },
-          })
+            update_bill({
+                variables: {billId: search.billid, bill: bill},
+            })
         );
-      } else {
-        //It's a new line, have to insert it.
-        updates.push(
-          insertBillLine({
-            variables: {
-              billLines: [
-                {
-                  ...il,
-                  deductedfromlbr: deductedfromlbr,
-                  billid: search.billid,
-                  joblineid: il.joblineid === "noline" ? null : il.joblineid,
-                },
-              ],
-            },
-          })
-        );
-      }
-    });
 
-    await Promise.all(updates);
+        billlines.forEach((l) => {
+            delete l.selected;
+        });
 
-    insertAuditTrail({
-      jobid: bill.jobid,
-      billid: search.billid,
-      operation: AuditTrailMapping.billupdated(bill.invoice_number),
-    });
+        //Find bill lines that were deleted.
+        const deletedJobLines = [];
 
-    await refetch();
-    form.setFieldsValue(transformData(data));
-    form.resetFields();
-    setVisible(false);
-    setUpdateLoading(false);
-  };
+        data.bills_by_pk.billlines.forEach((a) => {
+            const matchingRecord = billlines.find((b) => b.id === a.id);
+            if (!matchingRecord) {
+                deletedJobLines.push(a);
+            }
+        });
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
-  if (!search.billid) return <></>; //<div>{t("bills.labels.noneselected")}</div>;
+        deletedJobLines.forEach((d) => {
+            updates.push(deleteBillLine({variables: {id: d.id}}));
+        });
 
-  const exported = data && data.bills_by_pk && data.bills_by_pk.exported;
+        billlines.forEach((billline) => {
+            const {deductedfromlbr, inventories, jobline, ...il} = billline;
+            delete il.__typename;
 
-  return (
-    <>
-      {loading && <LoadingSkeleton />}
-      {data && (
+            if (il.id) {
+                updates.push(
+                    updateBillLine({
+                        variables: {
+                            billLineId: il.id,
+                            billLine: {
+                                ...il,
+                                deductedfromlbr: deductedfromlbr,
+                                joblineid: il.joblineid === "noline" ? null : il.joblineid,
+                            },
+                        },
+                    })
+                );
+            } else {
+                //It's a new line, have to insert it.
+                updates.push(
+                    insertBillLine({
+                        variables: {
+                            billLines: [
+                                {
+                                    ...il,
+                                    deductedfromlbr: deductedfromlbr,
+                                    billid: search.billid,
+                                    joblineid: il.joblineid === "noline" ? null : il.joblineid,
+                                },
+                            ],
+                        },
+                    })
+                );
+            }
+        });
+
+        await Promise.all(updates);
+
+        insertAuditTrail({
+            jobid: bill.jobid,
+            billid: search.billid,
+            operation: AuditTrailMapping.billupdated(bill.invoice_number),
+        });
+
+        await refetch();
+        form.setFieldsValue(transformData(data));
+        form.resetFields();
+        setVisible(false);
+        setUpdateLoading(false);
+    };
+
+    if (error) return <AlertComponent message={error.message} type="error"/>;
+    if (!search.billid) return <></>; //<div>{t("bills.labels.noneselected")}</div>;
+
+    const exported = data && data.bills_by_pk && data.bills_by_pk.exported;
+
+    return (
         <>
-          <PageHeader
-            title={
-              data &&
-              `${data.bills_by_pk.invoice_number} - ${data.bills_by_pk.vendor.name}`
-            }
-            extra={
-              <Space>
-                <BillDetailEditReturn data={data} />
+            {loading && <LoadingSkeleton/>}
+            {data && (
+                <>
+                    <PageHeader
+                        title={
+                            data &&
+                            `${data.bills_by_pk.invoice_number} - ${data.bills_by_pk.vendor.name}`
+                        }
+                        extra={
+                            <Space>
+                                <BillDetailEditReturn data={data}/>
 
-                <Popconfirm
-                  open={visible}
-                  onConfirm={() => form.submit()}
-                  onCancel={() => setVisible(false)}
-                  okButtonProps={{ loading: updateLoading }}
-                  title={t("bills.labels.editadjwarning")}
-                >
-                  <Button
-                    htmlType="submit"
-                    disabled={exported}
-                    onClick={handleSave}
-                    loading={updateLoading}
-                    type="primary"
-                  >
-                    {t("general.actions.save")}
-                  </Button>
-                </Popconfirm>
-                <BillReeportButtonComponent bill={data && data.bills_by_pk} />
-                <BillMarkExportedButton bill={data && data.bills_by_pk} />
-              </Space>
-            }
-          />
-          <Form
-            form={form}
-            onFinish={handleFinish}
-            initialValues={transformData(data)}
-            layout="vertical"
-          >
-            <BillFormContainer form={form} billEdit disabled={exported} />
+                                <Popconfirm
+                                    open={visible}
+                                    onConfirm={() => form.submit()}
+                                    onCancel={() => setVisible(false)}
+                                    okButtonProps={{loading: updateLoading}}
+                                    title={t("bills.labels.editadjwarning")}
+                                >
+                                    <Button
+                                        htmlType="submit"
+                                        disabled={exported}
+                                        onClick={handleSave}
+                                        loading={updateLoading}
+                                        type="primary"
+                                    >
+                                        {t("general.actions.save")}
+                                    </Button>
+                                </Popconfirm>
+                                <BillReeportButtonComponent bill={data && data.bills_by_pk}/>
+                                <BillMarkExportedButton bill={data && data.bills_by_pk}/>
+                            </Space>
+                        }
+                    />
+                    <Form
+                        form={form}
+                        onFinish={handleFinish}
+                        initialValues={transformData(data)}
+                        layout="vertical"
+                    >
+                        <BillFormContainer form={form} billEdit disabled={exported}/>
 
-            {bodyshop.uselocalmediaserver ? (
-              <JobsDocumentsLocalGallery
-                job={{ id: data ? data.bills_by_pk.jobid : null }}
-                invoice_number={data ? data.bills_by_pk.invoice_number : null}
-                vendorid={data ? data.bills_by_pk.vendorid : null}
-              />
-            ) : (
-              <JobDocumentsGallery
-                jobId={data ? data.bills_by_pk.jobid : null}
-                billId={search.billid}
-                documentsList={data ? data.bills_by_pk.documents : []}
-                billsCallback={refetch}
-              />
+                        {bodyshop.uselocalmediaserver ? (
+                            <JobsDocumentsLocalGallery
+                                job={{id: data ? data.bills_by_pk.jobid : null}}
+                                invoice_number={data ? data.bills_by_pk.invoice_number : null}
+                                vendorid={data ? data.bills_by_pk.vendorid : null}
+                            />
+                        ) : (
+                            <JobDocumentsGallery
+                                jobId={data ? data.bills_by_pk.jobid : null}
+                                billId={search.billid}
+                                documentsList={data ? data.bills_by_pk.documents : []}
+                                billsCallback={refetch}
+                            />
+                        )}
+                    </Form>
+                </>
             )}
-          </Form>
         </>
-      )}
-    </>
-  );
+    );
 }
 
 const transformData = (data) => {
-  return data
-    ? {
-        ...data.bills_by_pk,
+    return data
+        ? {
+            ...data.bills_by_pk,
 
-        billlines: data.bills_by_pk.billlines.map((i) => {
-          return {
-            ...i,
-            joblineid: !!i.joblineid ? i.joblineid : "noline",
-            applicable_taxes: {
-              federal:
-                (i.applicable_taxes && i.applicable_taxes.federal) || false,
-              state: (i.applicable_taxes && i.applicable_taxes.state) || false,
-              local: (i.applicable_taxes && i.applicable_taxes.local) || false,
-            },
-          };
-        }),
-        date: data.bills_by_pk ? moment(data.bills_by_pk.date) : null,
-      }
-    : {};
+            billlines: data.bills_by_pk.billlines.map((i) => {
+                return {
+                    ...i,
+                    joblineid: !!i.joblineid ? i.joblineid : "noline",
+                    applicable_taxes: {
+                        federal:
+                            (i.applicable_taxes && i.applicable_taxes.federal) || false,
+                        state: (i.applicable_taxes && i.applicable_taxes.state) || false,
+                        local: (i.applicable_taxes && i.applicable_taxes.local) || false,
+                    },
+                };
+            }),
+            date: data.bills_by_pk ? moment(data.bills_by_pk.date) : null,
+        }
+        : {};
 };
diff --git a/client/src/components/bill-detail-edit/bill-detail-edit-return.component.jsx b/client/src/components/bill-detail-edit/bill-detail-edit-return.component.jsx
index 32d27e3cd..987c03b38 100644
--- a/client/src/components/bill-detail-edit/bill-detail-edit-return.component.jsx
+++ b/client/src/components/bill-detail-edit/bill-detail-edit-return.component.jsx
@@ -3,7 +3,7 @@ import queryString from "query-string";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useSearchParams, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { setModalContext } from "../../redux/modals/modals.actions";
@@ -32,7 +32,7 @@ export function BillDetailEditReturn({
   data,
   disabled,
 }) {
-  const search = queryString.parse(useLocation().search);
+  const search = queryString.parse(useSearchParams().toString());
   const history = useNavigate();
   const { t } = useTranslation();
   const [form] = Form.useForm();
@@ -67,7 +67,7 @@ export function BillDetailEditReturn({
     });
     delete search.billid;
 
-    history.push({ search: queryString.stringify(search) });
+    history({ search: queryString.stringify(search) });
     setVisible(false);
   };
   useEffect(() => {
diff --git a/client/src/components/bill-detail-edit/bill-detail-edit.container.jsx b/client/src/components/bill-detail-edit/bill-detail-edit.container.jsx
index dd9490d77..63a3180c7 100644
--- a/client/src/components/bill-detail-edit/bill-detail-edit.container.jsx
+++ b/client/src/components/bill-detail-edit/bill-detail-edit.container.jsx
@@ -1,11 +1,11 @@
 import { Drawer, Grid } from "antd";
 import queryString from "query-string";
 import React from "react";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useSearchParams, useNavigate } from "react-router-dom";
 import BillDetailEditComponent from "./bill-detail-edit-component";
 
 export default function BillDetailEditcontainer() {
-  const search = queryString.parse(useLocation().search);
+  const search = queryString.parse(useSearchParams().toString());
   const history = useNavigate();
 
   const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
@@ -29,7 +29,7 @@ export default function BillDetailEditcontainer() {
       width={drawerPercentage}
       onClose={() => {
         delete search.billid;
-        history.push({ search: queryString.stringify(search) });
+        history({ search: queryString.stringify(search) });
       }}
       destroyOnClose
       open={search.billid}
diff --git a/client/src/components/billline-add-inventory/billline-add-inventory.component.jsx b/client/src/components/billline-add-inventory/billline-add-inventory.component.jsx
index 1fea48f5b..bf6200ed4 100644
--- a/client/src/components/billline-add-inventory/billline-add-inventory.component.jsx
+++ b/client/src/components/billline-add-inventory/billline-add-inventory.component.jsx
@@ -13,7 +13,7 @@ import {
 } from "../../redux/user/user.selectors";
 import { CalculateBillTotal } from "../bill-form/bill-form.totals.utility";
 import queryString from "query-string";
-import { useLocation } from "react-router-dom";
+import { useSearchParams } from "react-router-dom";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -35,7 +35,7 @@ export function BilllineAddInventory({
   jobid,
 }) {
   const [loading, setLoading] = useState(false);
-  const { billid } = queryString.parse(useLocation().search);
+  const { billid } = queryString.parse(useSearchParams().toString());
 
   const [insertInventoryLine] = useMutation(INSERT_INVENTORY_AND_CREDIT);
 
diff --git a/client/src/components/bills-vendors-list/bills-vendors-list.component.jsx b/client/src/components/bills-vendors-list/bills-vendors-list.component.jsx
index 9af21662b..e9e24197d 100644
--- a/client/src/components/bills-vendors-list/bills-vendors-list.component.jsx
+++ b/client/src/components/bills-vendors-list/bills-vendors-list.component.jsx
@@ -2,14 +2,14 @@ import React, { useState } from "react";
 import { QUERY_ALL_VENDORS } from "../../graphql/vendors.queries";
 import { useQuery } from "@apollo/client";
 import queryString from "query-string";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useSearchParams, useNavigate } from "react-router-dom";
 import { Table, Input } from "antd";
 import { useTranslation } from "react-i18next";
 import { alphaSort } from "../../utils/sorters";
 import AlertComponent from "../alert/alert.component";
 
 export default function BillsVendorsList() {
-  const search = queryString.parse(useLocation().search);
+  const search = queryString.parse(useSearchParams().toString());
   const history = useNavigate();
 
   const { loading, error, data } = useQuery(QUERY_ALL_VENDORS, {
diff --git a/client/src/components/contracts-list/contracts-list.component.jsx b/client/src/components/contracts-list/contracts-list.component.jsx
index 8495bf340..92136ba34 100644
--- a/client/src/components/contracts-list/contracts-list.component.jsx
+++ b/client/src/components/contracts-list/contracts-list.component.jsx
@@ -3,7 +3,7 @@ import { Button, Card, Input, Space, Table, Typography } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate, useLocation } from "react-router-dom";
+import { Link, useNavigate, useSearchParams } from "react-router-dom";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
 import { alphaSort } from "../../utils/sorters";
@@ -40,7 +40,7 @@ export function ContractsList({
     filteredInfo: { text: "" },
   });
   const history = useNavigate();
-  const search = queryString.parse(useLocation().search);
+  const search = queryString.parse(useSearchParams().toString());
   const { page } = search;
 
   const { t } = useTranslation();
@@ -164,7 +164,7 @@ export function ContractsList({
     search.page = pagination.current;
     search.sortcolumn = sorter.columnKey;
     search.sortorder = sorter.order;
-    history.push({ search: queryString.stringify(search) });
+    history({ search: queryString.stringify(search) });
   };
 
   return (
@@ -179,7 +179,7 @@ export function ContractsList({
               <Button
                 onClick={() => {
                   delete search.search;
-                  history.push({ search: queryString.stringify(search) });
+                  history({ search: queryString.stringify(search) });
                 }}
               >
                 {t("general.actions.clear")}
@@ -196,7 +196,7 @@ export function ContractsList({
             placeholder={search.searh || t("general.labels.search")}
             onSearch={(value) => {
               search.search = value;
-              history.push({ search: queryString.stringify(search) });
+              history({ search: queryString.stringify(search) });
             }}
           />
         </Space>
diff --git a/client/src/components/courtesy-car-contract-list/courtesy-car-contract-list.component.jsx b/client/src/components/courtesy-car-contract-list/courtesy-car-contract-list.component.jsx
index 0d2b4bc1f..21a519860 100644
--- a/client/src/components/courtesy-car-contract-list/courtesy-car-contract-list.component.jsx
+++ b/client/src/components/courtesy-car-contract-list/courtesy-car-contract-list.component.jsx
@@ -2,7 +2,7 @@ import { Card, Table } from "antd";
 import queryString from "query-string";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate, useLocation } from "react-router-dom";
+import { Link, useSearchParams, useNavigate } from "react-router-dom";
 import { DateFormatter } from "../../utils/DateFormatter";
 import { alphaSort } from "../../utils/sorters";
 import {pageLimit} from "../../utils/config";
@@ -11,7 +11,7 @@ export default function CourtesyCarContractListComponent({
   contracts,
   totalContracts,
 }) {
-  const search = queryString.parse(useLocation().search);
+  const search = queryString.parse(useSearchParams().toString());
   const { page, sortcolumn, sortorder } = search;
   const history = useNavigate();
 
@@ -81,7 +81,7 @@ export default function CourtesyCarContractListComponent({
     search.page = pagination.current;
     search.sortcolumn = sorter.columnKey;
     search.sortorder = sorter.order;
-    history.push({ search: queryString.stringify(search) });
+    history({ search: queryString.stringify(search) });
   };
 
   return (
diff --git a/client/src/components/csi-response-form/csi-response-form.container.jsx b/client/src/components/csi-response-form/csi-response-form.container.jsx
index a1882b09a..16c57e134 100644
--- a/client/src/components/csi-response-form/csi-response-form.container.jsx
+++ b/client/src/components/csi-response-form/csi-response-form.container.jsx
@@ -1,9 +1,8 @@
 import { useQuery } from "@apollo/client";
 import { Card, Form, Result } from "antd";
-import queryString from "query-string";
 import React, { useEffect } from "react";
+import { useSearchParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { useLocation } from "react-router-dom";
 import { QUERY_CSI_RESPONSE_BY_PK } from "../../graphql/csi.queries";
 import AlertComponent from "../alert/alert.component";
 import ConfigFormComponents from "../config-form-components/config-form-components.component";
@@ -12,7 +11,7 @@ import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 export default function CsiResponseFormContainer() {
   const { t } = useTranslation();
   const [form] = Form.useForm();
-  const searchParams = queryString.parse(useLocation().search);
+  const searchParams = Object.fromEntries(useSearchParams());
   const { responseid } = searchParams;
   const { loading, error, data } = useQuery(QUERY_CSI_RESPONSE_BY_PK, {
     variables: {
diff --git a/client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx b/client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx
index 05f076e47..09f7e777d 100644
--- a/client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx
+++ b/client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx
@@ -3,7 +3,7 @@ import { Button, Card, Table } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate, useLocation } from "react-router-dom";
+import { Link, useSearchParams, useNavigate } from "react-router-dom";
 import { DateFormatter } from "../../utils/DateFormatter";
 import { alphaSort } from "../../utils/sorters";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
@@ -15,7 +15,7 @@ export default function CsiResponseListPaginated({
   responses,
   total,
 }) {
-  const search = queryString.parse(useLocation().search);
+  const search = queryString.parse(useSearchParams().toString());
   const { responseid, page, sortcolumn, sortorder } = search;
   const history = useNavigate();
   const [state, setState] = useState({
@@ -80,18 +80,18 @@ export default function CsiResponseListPaginated({
     search.page = pagination.current;
     search.sortcolumn = sorter.columnKey;
     search.sortorder = sorter.order;
-    history.push({ search: queryString.stringify(search) });
+    history({ search: queryString.stringify(search) });
   };
 
   const handleOnRowClick = (record) => {
     if (record) {
       if (record.id) {
         search.responseid = record.id;
-        history.push({ search: queryString.stringify(search) });
+        history({ search: queryString.stringify(search) });
       }
     } else {
       delete search.responseid;
-      history.push({ search: queryString.stringify(search) });
+      history({ search: queryString.stringify(search) });
     }
   };
 
@@ -128,7 +128,7 @@ export default function CsiResponseListPaginated({
               handleOnRowClick(record);
             }, // click row
           };
-        }}
+        }}q
       />
     </Card>
   );
diff --git a/client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx b/client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx
index 73fda834c..58bf9bb41 100644
--- a/client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx
+++ b/client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Form, Space } from "antd";
 import { useTranslation } from "react-i18next";
 import AlertComponent from "../alert/alert.component";
-import {useLocation } from "react-router-dom";
+import {useSearchParams } from "react-router-dom";
 import "./form-fields-changed.styles.scss";
 import Prompt from "../../utils/prompt";
 
@@ -12,7 +12,7 @@ export default function FormsFieldChanged({ form, skipPrompt }) {
   const handleReset = () => {
     form.resetFields();
   };
-  const loc = useLocation();
+  const loc = useSearchParams();
   //if (!form.isFieldsTouched()) return <></>;
   return (
     <Form.Item
@@ -26,7 +26,7 @@ export default function FormsFieldChanged({ form, skipPrompt }) {
           return (
             <Space direction="vertical" style={{ width: "100%" }}>
               <Prompt
-                when={skipPrompt ? false : true}
+                when={!skipPrompt}
                 message={(location) => {
                   if (loc.pathname === location.pathname) return false;
                   return t("general.messages.unsavedchangespopup");
diff --git a/client/src/components/global-search/global-search-os.component.jsx b/client/src/components/global-search/global-search-os.component.jsx
index 112c51789..aace8a63d 100644
--- a/client/src/components/global-search/global-search-os.component.jsx
+++ b/client/src/components/global-search/global-search-os.component.jsx
@@ -201,7 +201,7 @@ export default function GlobalSearchOs() {
       onSearch={handleSearch}
       defaultActiveFirstOption
       onSelect={(val, opt) => {
-        history.push(opt.label.props.to);
+        history(opt.label.props.to);
       }}
       onClear={() => setData([])}
     >
diff --git a/client/src/components/global-search/global-search.component.jsx b/client/src/components/global-search/global-search.component.jsx
index 7b3f752f1..5e0ba1a9d 100644
--- a/client/src/components/global-search/global-search.component.jsx
+++ b/client/src/components/global-search/global-search.component.jsx
@@ -186,7 +186,7 @@ export default function GlobalSearch() {
       onSearch={handleSearch}
       defaultActiveFirstOption
       onSelect={(val, opt) => {
-        history.push(opt.label.props.to);
+        history(opt.label.props.to);
       }}
     >
       <Input.Search
diff --git a/client/src/components/inventory-list/inventory-list.component.jsx b/client/src/components/inventory-list/inventory-list.component.jsx
index 31b9ca158..99027952c 100644
--- a/client/src/components/inventory-list/inventory-list.component.jsx
+++ b/client/src/components/inventory-list/inventory-list.component.jsx
@@ -1,229 +1,224 @@
-import { EditFilled, SyncOutlined, FileAddFilled } from "@ant-design/icons";
-import { Button, Card, Input, Space, Table, Typography } from "antd";
+import {EditFilled, FileAddFilled, SyncOutlined} from "@ant-design/icons";
+import {Button, Card, Input, Space, Table, Typography} from "antd";
 import queryString from "query-string";
 import React from "react";
-import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
-import { Link, useNavigate, useLocation } from "react-router-dom";
-import { createStructuredSelector } from "reselect";
-import { setModalContext } from "../../redux/modals/modals.actions";
-import { selectBodyshop } from "../../redux/user/user.selectors";
+import {useTranslation} from "react-i18next";
+import {connect} from "react-redux";
+import {Link, useNavigate, useSearchParams} from "react-router-dom";
+import {createStructuredSelector} from "reselect";
+import {setModalContext} from "../../redux/modals/modals.actions";
+import {selectBodyshop} from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import InventoryBillRo from "../inventory-bill-ro/inventory-bill-ro.component";
 import InventoryLineDelete from "../inventory-line-delete/inventory-line-delete.component";
 import {pageLimit} from "../../utils/config";
+
 const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
-  bodyshop: selectBodyshop,
+    //currentUser: selectCurrentUser
+    bodyshop: selectBodyshop,
 });
 const mapDispatchToProps = (dispatch) => ({
-  setInventoryUpsertContext: (context) =>
-    dispatch(setModalContext({ context: context, modal: "inventoryUpsert" })),
+    setInventoryUpsertContext: (context) =>
+        dispatch(setModalContext({context: context, modal: "inventoryUpsert"})),
 });
 
-export function JobsList({
-  bodyshop,
-  refetch,
-  loading,
-  jobs,
-  total,
-  setInventoryUpsertContext,
-}) {
-  const search = queryString.parse(useLocation().search);
-  const { page, sortcolumn, sortorder } = search;
-  const history = useNavigate();
+export function JobsList({bodyshop, refetch, loading, jobs, total, setInventoryUpsertContext,}) {
+    const search = queryString.parse(useSearchParams().toString());
+    const {page, sortcolumn, sortorder} = search;
+    const history = useNavigate();
 
-  const { t } = useTranslation();
-  const columns = [
-    {
-      title: t("billlines.fields.line_desc"),
-      dataIndex: "line_desc",
-      key: "line_desc",
+    const {t} = useTranslation();
+    const columns = [
+        {
+            title: t("billlines.fields.line_desc"),
+            dataIndex: "line_desc",
+            key: "line_desc",
 
-      sorter: true, //(a, b) => alphaSort(a.line_desc, b.line_desc),
-      sortOrder: sortcolumn === "line_desc" && sortorder,
-      render: (text, record) =>
-        record.billline?.bill?.job ? (
-          <div>
-            <div>{text}</div>
-            <strong>{`(${record.billline?.bill?.job?.v_model_yr} ${record.billline?.bill?.job?.v_make_desc} ${record.billline?.bill?.job?.v_model_desc})`}</strong>
-          </div>
-        ) : (
-          text
-        ),
-    },
-    {
-      title: t("inventory.labels.frombillinvoicenumber"),
-      dataIndex: "vendorname",
-      key: "vendorname",
-      ellipsis: true,
-      //sorter: true, // (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
+            sorter: true, //(a, b) => alphaSort(a.line_desc, b.line_desc),
+            sortOrder: sortcolumn === "line_desc" && sortorder,
+            render: (text, record) =>
+                record.billline?.bill?.job ? (
+                    <div>
+                        <div>{text}</div>
+                        <strong>{`(${record.billline?.bill?.job?.v_model_yr} ${record.billline?.bill?.job?.v_make_desc} ${record.billline?.bill?.job?.v_model_desc})`}</strong>
+                    </div>
+                ) : (
+                    text
+                ),
+        },
+        {
+            title: t("inventory.labels.frombillinvoicenumber"),
+            dataIndex: "vendorname",
+            key: "vendorname",
+            ellipsis: true,
+            //sorter: true, // (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
 
-      //sortOrder: sortcolumn === "ownr_ln" && sortorder,
-      render: (text, record) =>
-        (
-          (record.billline?.bill?.invoice_number || "") +
-          " " +
-          (record.manualinvoicenumber || "")
-        ).trim(),
-    },
-    {
-      title: t("inventory.labels.fromvendor"),
-      dataIndex: "vendorname",
-      key: "vendorname",
-      ellipsis: true,
-      //sorter: true, // (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
+            //sortOrder: sortcolumn === "ownr_ln" && sortorder,
+            render: (text, record) =>
+                (
+                    (record.billline?.bill?.invoice_number || "") +
+                    " " +
+                    (record.manualinvoicenumber || "")
+                ).trim(),
+        },
+        {
+            title: t("inventory.labels.fromvendor"),
+            dataIndex: "vendorname",
+            key: "vendorname",
+            ellipsis: true,
+            //sorter: true, // (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
 
-      //sortOrder: sortcolumn === "ownr_ln" && sortorder,
-      render: (text, record) =>
-        (
-          (record.billline?.bill?.vendor?.name || "") +
-          " " +
-          (record.manualvendor || "")
-        ).trim(),
-    },
-    {
-      title: t("billlines.fields.actual_price"),
-      dataIndex: "actual_price",
-      key: "actual_price",
+            //sortOrder: sortcolumn === "ownr_ln" && sortorder,
+            render: (text, record) =>
+                (
+                    (record.billline?.bill?.vendor?.name || "") +
+                    " " +
+                    (record.manualvendor || "")
+                ).trim(),
+        },
+        {
+            title: t("billlines.fields.actual_price"),
+            dataIndex: "actual_price",
+            key: "actual_price",
 
-      render: (text, record) => (
-        <CurrencyFormatter>{record.actual_price}</CurrencyFormatter>
-      ),
-    },
-    {
-      title: t("billlines.fields.actual_cost"),
-      dataIndex: "actual_cost",
-      key: "actual_cost",
+            render: (text, record) => (
+                <CurrencyFormatter>{record.actual_price}</CurrencyFormatter>
+            ),
+        },
+        {
+            title: t("billlines.fields.actual_cost"),
+            dataIndex: "actual_cost",
+            key: "actual_cost",
 
-      render: (text, record) => (
-        <CurrencyFormatter>{record.actual_cost}</CurrencyFormatter>
-      ),
-    },
-    {
-      title: t("inventory.fields.comment"),
-      dataIndex: "comment",
-      key: "comment",
-    },
-    {
-      title: t("inventory.labels.consumedbyjob"),
-      dataIndex: "consumedbyjob",
-      key: "consumedbyjob",
+            render: (text, record) => (
+                <CurrencyFormatter>{record.actual_cost}</CurrencyFormatter>
+            ),
+        },
+        {
+            title: t("inventory.fields.comment"),
+            dataIndex: "comment",
+            key: "comment",
+        },
+        {
+            title: t("inventory.labels.consumedbyjob"),
+            dataIndex: "consumedbyjob",
+            key: "consumedbyjob",
 
-      ellipsis: true,
-      render: (text, record) =>
-        record.bill?.job?.ro_number ? (
-          <Link to={`/manage/jobs/${record.bill?.job?.id}`}>
-            {record.bill?.job?.ro_number}
-          </Link>
-        ) : (
-          <InventoryBillRo inventoryline={record} />
-        ),
-    },
-    {
-      title: t("general.labels.actions"),
-      dataIndex: "actions",
-      key: "actions",
+            ellipsis: true,
+            render: (text, record) =>
+                record.bill?.job?.ro_number ? (
+                    <Link to={`/manage/jobs/${record.bill?.job?.id}`}>
+                        {record.bill?.job?.ro_number}
+                    </Link>
+                ) : (
+                    <InventoryBillRo inventoryline={record}/>
+                ),
+        },
+        {
+            title: t("general.labels.actions"),
+            dataIndex: "actions",
+            key: "actions",
 
-      ellipsis: true,
-      render: (text, record) => (
-        <Space wrap>
-          <Button
-            onClick={() => {
-              setInventoryUpsertContext({
-                actions: { refetch: refetch },
-                context: {
-                  existingInventory: record,
-                },
-              });
-            }}
-          >
-            <EditFilled />
-          </Button>
-          <InventoryLineDelete inventoryline={record} refetch={refetch} />
-        </Space>
-      ),
-    },
-  ];
+            ellipsis: true,
+            render: (text, record) => (
+                <Space wrap>
+                    <Button
+                        onClick={() => {
+                            setInventoryUpsertContext({
+                                actions: {refetch: refetch},
+                                context: {
+                                    existingInventory: record,
+                                },
+                            });
+                        }}
+                    >
+                        <EditFilled/>
+                    </Button>
+                    <InventoryLineDelete inventoryline={record} refetch={refetch}/>
+                </Space>
+            ),
+        },
+    ];
 
-  const handleTableChange = (pagination, filters, sorter) => {
-    search.page = pagination.current;
-    search.sortcolumn = sorter.column && sorter.column.key;
-    search.sortorder = sorter.order;
-    history.push({ search: queryString.stringify(search) });
-  };
+    const handleTableChange = (pagination, filters, sorter) => {
+        search.page = pagination.current;
+        search.sortcolumn = sorter.column && sorter.column.key;
+        search.sortorder = sorter.order;
+        history({search: queryString.stringify(search)});
+    };
 
-  return (
-    <Card
-      extra={
-        <Space wrap>
-          {search.search && (
-            <>
-              <Typography.Title level={4}>
-                {t("general.labels.searchresults", { search: search.search })}
-              </Typography.Title>
-              <Button
-                onClick={() => {
-                  delete search.search;
-                  history.push({ search: queryString.stringify(search) });
+    return (
+        <Card
+            extra={
+                <Space wrap>
+                    {search.search && (
+                        <>
+                            <Typography.Title level={4}>
+                                {t("general.labels.searchresults", {search: search.search})}
+                            </Typography.Title>
+                            <Button
+                                onClick={() => {
+                                    delete search.search;
+                                    history({search: queryString.stringify(search)});
+                                }}
+                            >
+                                {t("general.actions.clear")}
+                            </Button>
+                        </>
+                    )}
+                    <Button
+                        onClick={() => {
+                            setInventoryUpsertContext({
+                                actions: {refetch: refetch},
+                                context: {},
+                            });
+                        }}
+                    >
+                        <FileAddFilled/>
+                    </Button>
+                    <Button
+                        onClick={() => {
+                            if (search.showall) delete search.showall;
+                            else {
+                                search.showall = true;
+                            }
+                            history({search: queryString.stringify(search)});
+                        }}
+                    >
+                        {search.showall
+                            ? t("inventory.labels.showavailable")
+                            : t("inventory.labels.showall")}
+                    </Button>
+
+                    <Button onClick={() => refetch()}>
+                        <SyncOutlined/>
+                    </Button>
+                    <Input.Search
+                        placeholder={search.search || t("general.labels.search")}
+                        onSearch={(value) => {
+                            search.search = value;
+                            history({search: queryString.stringify(search)});
+                        }}
+                        enterButton
+                    />
+                </Space>
+            }
+        >
+            <Table
+                loading={loading}
+                pagination={{
+                    position: "top",
+                    pageSize: pageLimit,
+                    current: parseInt(page || 1),
+                    total: total,
                 }}
-              >
-                {t("general.actions.clear")}
-              </Button>
-            </>
-          )}
-          <Button
-            onClick={() => {
-              setInventoryUpsertContext({
-                actions: { refetch: refetch },
-                context: {},
-              });
-            }}
-          >
-            <FileAddFilled />
-          </Button>
-          <Button
-            onClick={() => {
-              if (search.showall) delete search.showall;
-              else {
-                search.showall = true;
-              }
-              history.push({ search: queryString.stringify(search) });
-            }}
-          >
-            {search.showall
-              ? t("inventory.labels.showavailable")
-              : t("inventory.labels.showall")}
-          </Button>
-
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
-          <Input.Search
-            placeholder={search.search || t("general.labels.search")}
-            onSearch={(value) => {
-              search.search = value;
-              history.push({ search: queryString.stringify(search) });
-            }}
-            enterButton
-          />
-        </Space>
-      }
-    >
-      <Table
-        loading={loading}
-        pagination={{
-          position: "top",
-          pageSize: pageLimit,
-          current: parseInt(page || 1),
-          total: total,
-        }}
-        columns={columns}
-        rowKey="id"
-        dataSource={jobs}
-        onChange={handleTableChange}
-      />
-    </Card>
-  );
+                columns={columns}
+                rowKey="id"
+                dataSource={jobs}
+                onChange={handleTableChange}
+            />
+        </Card>
+    );
 }
+
 export default connect(mapStateToProps, mapDispatchToProps)(JobsList);
diff --git a/client/src/components/inventory-list/inventory-list.container.jsx b/client/src/components/inventory-list/inventory-list.container.jsx
index e98266464..0b85b4433 100644
--- a/client/src/components/inventory-list/inventory-list.container.jsx
+++ b/client/src/components/inventory-list/inventory-list.container.jsx
@@ -2,7 +2,7 @@ import { useQuery } from "@apollo/client";
 import queryString from "query-string";
 import React from "react";
 import { connect } from "react-redux";
-import { useLocation } from "react-router-dom";
+import { useSearchParams } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { QUERY_INVENTORY_PAGINATED } from "../../graphql/inventory.queries";
 import {
@@ -23,7 +23,7 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 export function InventoryList({ setBreadcrumbs, setSelectedHeader }) {
-  const searchParams = queryString.parse(useLocation().search);
+  const searchParams = queryString.parse(useSearchParams().toString());
   const { page, sortcolumn, sortorder, search, showall } = searchParams;
 
   const { loading, error, data, refetch } = useQuery(
diff --git a/client/src/components/job-at-change/schedule-event.component.jsx b/client/src/components/job-at-change/schedule-event.component.jsx
index 2651c5e27..9bb08e2f8 100644
--- a/client/src/components/job-at-change/schedule-event.component.jsx
+++ b/client/src/components/job-at-change/schedule-event.component.jsx
@@ -17,7 +17,7 @@ import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { Link, useNavigate, useLocation } from "react-router-dom";
+import { Link, useNavigate, useSearchParams } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import {
   openChatByPhone,
@@ -60,7 +60,7 @@ export function ScheduleEventComponent({
   const { t } = useTranslation();
   const [visible, setVisible] = useState(false);
   const history = useNavigate();
-  const searchParams = queryString.parse(useLocation().search);
+  const searchParams = queryString.parse(useSearchParams().toString());
   const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
   const [title, setTitle] = useState(event.title);
   const blockContent = (
@@ -172,7 +172,7 @@ export function ScheduleEventComponent({
         {event.job ? (
           <Button
             onClick={() => {
-              history.push({
+              history({
                 search: queryString.stringify({
                   ...searchParams,
                   selected: event.job.id,
diff --git a/client/src/components/job-checklist/components/job-checklist-form/job-checklist-form.component.jsx b/client/src/components/job-checklist/components/job-checklist-form/job-checklist-form.component.jsx
index 55bf299d2..67b1304a8 100644
--- a/client/src/components/job-checklist/components/job-checklist-form/job-checklist-form.component.jsx
+++ b/client/src/components/job-checklist/components/job-checklist-form/job-checklist-form.component.jsx
@@ -5,7 +5,7 @@ import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useNavigate, useLocation, useParams } from "react-router-dom";
+import { useSearchParams, useNavigate, useParams } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../../../firebase/firebase.utils";
 import {
@@ -50,7 +50,7 @@ export function JobChecklistForm({
 
   const { jobId } = useParams();
   const history = useNavigate();
-  const search = queryString.parse(useLocation().search);
+  const search = queryString.parse(useSearchParams().toString());
   const [form] = Form.useForm();
 
   const handleFinish = async (values) => {
@@ -172,7 +172,7 @@ export function JobChecklistForm({
 
     if (!!!result.errors) {
       notification["success"]({ message: t("checklist.successes.completed") });
-      history.push(`/manage/jobs/${jobId}`);
+      history(`/manage/jobs/${jobId}`);
 
       insertAuditTrail({
         jobid: jobId,
diff --git a/client/src/components/job-create-iou/job-create-iou.component.jsx b/client/src/components/job-create-iou/job-create-iou.component.jsx
index 12df9a9b4..9af56d68b 100644
--- a/client/src/components/job-create-iou/job-create-iou.component.jsx
+++ b/client/src/components/job-create-iou/job-create-iou.component.jsx
@@ -50,7 +50,7 @@ export function JobCreateIOU({ bodyshop, currentUser, job, selectedJobLines }) {
     notification.open({
       type: "success",
       message: t("jobs.successes.ioucreated"),
-      onClick: () => history.push(`/manage/jobs/${iouId}`),
+      onClick: () => history(`/manage/jobs/${iouId}`),
     });
     const selectedJobLinesIds = selectedJobLines.map((l) => l.id);
     await client.mutate({
diff --git a/client/src/components/job-detail-cards/job-detail-cards.component.jsx b/client/src/components/job-detail-cards/job-detail-cards.component.jsx
index 9740f89ce..396684695 100644
--- a/client/src/components/job-detail-cards/job-detail-cards.component.jsx
+++ b/client/src/components/job-detail-cards/job-detail-cards.component.jsx
@@ -5,7 +5,7 @@ import queryString from "query-string";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { Link, useNavigate, useLocation } from "react-router-dom";
+import { Link, useNavigate, useSearchParams } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { QUERY_JOB_CARD_DETAILS } from "../../graphql/jobs.queries";
 import { setModalContext } from "../../redux/modals/modals.actions";
@@ -54,7 +54,7 @@ export function JobDetailCards({ bodyshop, setPrintCenterContext }) {
     ? bpoints[selectedBreakpoint[0]]
     : "100%";
 
-  const searchParams = queryString.parse(useLocation().search);
+  const searchParams = queryString.parse(useSearchParams().toString());
   const { selected } = searchParams;
   const history = useNavigate();
   const { loading, error, data, refetch } = useQuery(QUERY_JOB_CARD_DETAILS, {
@@ -67,7 +67,7 @@ export function JobDetailCards({ bodyshop, setPrintCenterContext }) {
   const { t } = useTranslation();
   const handleDrawerClose = () => {
     delete searchParams.selected;
-    history.push({
+    history({
       search: queryString.stringify({
         ...searchParams,
       }),
diff --git a/client/src/components/job-sync-button/job-sync-button.component.jsx b/client/src/components/job-sync-button/job-sync-button.component.jsx
index 71fa014c4..8994caf0b 100644
--- a/client/src/components/job-sync-button/job-sync-button.component.jsx
+++ b/client/src/components/job-sync-button/job-sync-button.component.jsx
@@ -8,7 +8,7 @@ export default function JobSyncButton({ job }) {
   const { t } = useTranslation();
   const history = useNavigate();
   const handleClick = () => {
-    history.push(
+    history(
       `/manage/available?availableJobId=${job.available_jobs[0].id}&clm_no=${job.clm_no}`
     );
   };
diff --git a/client/src/components/jobs-available-table/jobs-available-table.container.jsx b/client/src/components/jobs-available-table/jobs-available-table.container.jsx
index d76267140..b83b5b68e 100644
--- a/client/src/components/jobs-available-table/jobs-available-table.container.jsx
+++ b/client/src/components/jobs-available-table/jobs-available-table.container.jsx
@@ -14,7 +14,7 @@ import queryString from "query-string";
 import React, { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import {
@@ -64,7 +64,7 @@ export function JobsAvailableContainer({
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
   });
-  const { clm_no, availableJobId } = queryString.parse(useLocation().search);
+  const { clm_no, availableJobId } = queryString.parse(useSearchParams().toString());
   const history = useNavigate();
   const { t } = useTranslation();
 
@@ -174,7 +174,7 @@ export function JobsAvailableContainer({
       notification["success"]({
         message: t("jobs.successes.created"),
         onClick: () => {
-          history.push(`/manage/jobs/${r.data.insert_jobs.returning[0].id}`);
+          history(`/manage/jobs/${r.data.insert_jobs.returning[0].id}`);
         },
       });
       //Job has been inserted. Clean up the available jobs record.
@@ -292,7 +292,7 @@ export function JobsAvailableContainer({
       notification["success"]({
         message: t("jobs.successes.supplemented"),
         onClick: () => {
-          history.push(
+          history(
             `/manage/jobs/${updateResult.data.update_jobs.returning[0].id}`
           );
         },
diff --git a/client/src/components/jobs-close-export-button/jobs-close-export-button.component.jsx b/client/src/components/jobs-close-export-button/jobs-close-export-button.component.jsx
index f125fec80..0acb9d911 100644
--- a/client/src/components/jobs-close-export-button/jobs-close-export-button.component.jsx
+++ b/client/src/components/jobs-close-export-button/jobs-close-export-button.component.jsx
@@ -50,7 +50,7 @@ export function JobsCloseExportButton({
   const handleQbxml = async () => {
     //Check if it's a CDK setup.
     if (bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber) {
-      history.push(`/manage/dms?jobId=${jobId}`);
+      history(`/manage/dms?jobId=${jobId}`);
       return;
     }
     logImEXEvent("jobs_close_export");
diff --git a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx b/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
index 446093c2b..bccff8507 100644
--- a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
+++ b/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
@@ -344,7 +344,7 @@ export function JobsDetailHeaderActions({
                 job.id,
                 { defaultOpenStatus: bodyshop.md_ro_statuses.default_imported },
                 (newJobId) => {
-                  history.push(`/manage/jobs/${newJobId}`);
+                  history(`/manage/jobs/${newJobId}`);
                   notification["success"]({
                     message: t("jobs.successes.duplicated"),
                   });
@@ -369,7 +369,7 @@ export function JobsDetailHeaderActions({
                 job.id,
                 { defaultOpenStatus: bodyshop.md_ro_statuses.default_imported },
                 (newJobId) => {
-                  history.push(`/manage/jobs/${newJobId}`);
+                  history(`/manage/jobs/${newJobId}`);
                   notification["success"]({
                     message: t("jobs.successes.duplicated"),
                   });
@@ -480,7 +480,7 @@ export function JobsDetailHeaderActions({
                   message: t("jobs.successes.delete"),
                 });
                 //go back to jobs list.
-                history.push(`/manage/`);
+                history(`/manage/`);
               } else {
                 notification["error"]({
                   message: t("jobs.errors.deleted", {
@@ -533,7 +533,7 @@ export function JobsDetailHeaderActions({
                     message: t("jobs.successes.voided"),
                   });
                   //go back to jobs list.
-                  history.push(`/manage/`);
+                  history(`/manage/`);
                 } else {
                   notification["error"]({
                     message: t("jobs.errors.voiding", {
diff --git a/client/src/components/jobs-detail-pli/jobs-detail-pli.container.jsx b/client/src/components/jobs-detail-pli/jobs-detail-pli.container.jsx
index e540e8a5a..a8ff0756b 100644
--- a/client/src/components/jobs-detail-pli/jobs-detail-pli.container.jsx
+++ b/client/src/components/jobs-detail-pli/jobs-detail-pli.container.jsx
@@ -1,7 +1,7 @@
 import { useQuery } from "@apollo/client";
 import queryString from "query-string";
 import React from "react";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import { QUERY_BILLS_BY_JOBID } from "../../graphql/bills.queries";
 import JobsDetailPliComponent from "./jobs-detail-pli.component";
 
@@ -12,18 +12,18 @@ export default function JobsDetailPliContainer({ job }) {
     nextFetchPolicy: "network-only",
   });
 
-  const search = queryString.parse(useLocation().search);
+  const search = queryString.parse(useSearchParams().toString());
   const history = useNavigate();
 
   const handleBillOnRowClick = (record) => {
     if (record) {
       if (record.id) {
         search.billid = record.id;
-        history.push({ search: queryString.stringify(search) });
+        history({ search: queryString.stringify(search) });
       }
     } else {
       delete search.billid;
-      history.push({ search: queryString.stringify(search) });
+      history({ search: queryString.stringify(search) });
     }
   };
 
@@ -31,11 +31,11 @@ export default function JobsDetailPliContainer({ job }) {
     if (record) {
       if (record.id) {
         search.partsorderid = record.id;
-        history.push({ search: queryString.stringify(search) });
+        history({ search: queryString.stringify(search) });
       }
     } else {
       delete search.partsorderid;
-      history.push({ search: queryString.stringify(search) });
+      history({ search: queryString.stringify(search) });
     }
   };
 
diff --git a/client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx b/client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx
index b95698a95..f0f6da533 100644
--- a/client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx
+++ b/client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx
@@ -6,7 +6,7 @@ import queryString from "query-string";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { Link, useNavigate, useLocation } from "react-router-dom";
+import { Link, useNavigate, useSearchParams } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
@@ -22,7 +22,7 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
-  const search = queryString.parse(useLocation().search);
+  const search = queryString.parse(useSearchParams().toString());
   const [openSearchResults, setOpenSearchResults] = useState([]);
   const [searchLoading, setSearchLoading] = useState(false);
   const { page, sortcolumn, sortorder } = search;
@@ -189,7 +189,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
     } else {
       delete search.statusFilters;
     }
-    history.push({ search: queryString.stringify(search) });
+    history({ search: queryString.stringify(search) });
   };
 
   useEffect(() => {
@@ -227,7 +227,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
                 onClick={() => {
                   delete search.search;
                   delete search.page;
-                  history.push({ search: queryString.stringify(search) });
+                  history({ search: queryString.stringify(search) });
                 }}
               >
                 {t("general.actions.clear")}
@@ -241,7 +241,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
             placeholder={search.search || t("general.labels.search")}
             onSearch={(value) => {
               search.search = value;
-              history.push({ search: queryString.stringify(search) });
+              history({ search: queryString.stringify(search) });
               searchJobs(value);
             }}
             loading={loading || searchLoading}
diff --git a/client/src/components/jobs-list/jobs-list.component.jsx b/client/src/components/jobs-list/jobs-list.component.jsx
index 7b2e24b8f..8b125630c 100644
--- a/client/src/components/jobs-list/jobs-list.component.jsx
+++ b/client/src/components/jobs-list/jobs-list.component.jsx
@@ -10,7 +10,7 @@ import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { Link, useNavigate, useLocation } from "react-router-dom";
+import { Link, useNavigate, useSearchParams } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
@@ -26,7 +26,7 @@ const mapStateToProps = createStructuredSelector({
 });
 
 export function JobsList({ bodyshop }) {
-    const searchParams = queryString.parse(useLocation().search);
+    const searchParams = queryString.parse(useSearchParams().toString());
     const { selected } = searchParams;
     const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
         .filter((screen) => !!screen[1])
@@ -97,7 +97,7 @@ export function JobsList({ bodyshop }) {
     const handleOnRowClick = (record) => {
         if (record) {
             if (record.id) {
-                history.push({
+                history({
                     search: queryString.stringify({
                         ...searchParams,
                         selected: record.id,
diff --git a/client/src/components/jobs-ready-list/jobs-ready-list.component.jsx b/client/src/components/jobs-ready-list/jobs-ready-list.component.jsx
index da08dc78d..d165901e2 100644
--- a/client/src/components/jobs-ready-list/jobs-ready-list.component.jsx
+++ b/client/src/components/jobs-ready-list/jobs-ready-list.component.jsx
@@ -10,7 +10,7 @@ import queryString from "query-string";
 import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { Link, useNavigate, useLocation } from "react-router-dom";
+import { Link, useNavigate, useSearchParams } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
@@ -27,7 +27,7 @@ const mapStateToProps = createStructuredSelector({
 });
 
 export function JobsReadyList({ bodyshop }) {
-  const searchParams = queryString.parse(useLocation().search);
+  const searchParams = queryString.parse(useSearchParams().toString());
   const { selected } = searchParams;
   const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
     .filter((screen) => !!screen[1])
@@ -111,7 +111,7 @@ export function JobsReadyList({ bodyshop }) {
   const handleOnRowClick = (record) => {
     if (record) {
       if (record.id) {
-        history.push({
+        history({
           search: queryString.stringify({
             ...searchParams,
             selected: record.id,
diff --git a/client/src/components/owner-detail-form/owner-detail-form.container.jsx b/client/src/components/owner-detail-form/owner-detail-form.container.jsx
index fd2a5d636..4a65fba2a 100644
--- a/client/src/components/owner-detail-form/owner-detail-form.container.jsx
+++ b/client/src/components/owner-detail-form/owner-detail-form.container.jsx
@@ -32,7 +32,7 @@ function OwnerDetailFormContainer({ owner, refetch }) {
         message: t("owners.successes.delete"),
       });
       setLoading(false);
-      history.push(`/manage/owners`);
+      history(`/manage/owners`);
     }
   };
 
diff --git a/client/src/components/owners-list/owners-list.component.jsx b/client/src/components/owners-list/owners-list.component.jsx
index 08226e486..1d4d4d94a 100644
--- a/client/src/components/owners-list/owners-list.component.jsx
+++ b/client/src/components/owners-list/owners-list.component.jsx
@@ -3,7 +3,7 @@ import { Button, Card, Input, Space, Table, Typography } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate, useLocation } from "react-router-dom";
+import { Link, useNavigate, useSearchParams } from "react-router-dom";
 import PhoneFormatter from "../../utils/PhoneFormatter";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import {pageLimit} from "../../utils/config";
@@ -14,7 +14,7 @@ export default function OwnersListComponent({
   total,
   refetch,
 }) {
-  const search = queryString.parse(useLocation().search);
+  const search = queryString.parse(useSearchParams().toString());
   const {
     page,
     // sortcolumn, sortorder
@@ -79,7 +79,7 @@ export default function OwnersListComponent({
     search.page = pagination.current;
     search.sortcolumn = sorter.columnKey;
     search.sortorder = sorter.order;
-    history.push({ search: queryString.stringify(search) });
+    history({ search: queryString.stringify(search) });
   };
   return (
     <Card
@@ -94,7 +94,7 @@ export default function OwnersListComponent({
               <Button
                 onClick={() => {
                   delete search.search;
-                  history.push({ search: queryString.stringify(search) });
+                  history({ search: queryString.stringify(search) });
                 }}
               >
                 {t("general.actions.clear")}
@@ -112,7 +112,7 @@ export default function OwnersListComponent({
               } else {
                 delete search.search;
               }
-              history.push({ search: queryString.stringify(search) });
+              history({ search: queryString.stringify(search) });
             }}
             enterButton
           />
diff --git a/client/src/components/owners-list/owners-list.container.jsx b/client/src/components/owners-list/owners-list.container.jsx
index 7303c4222..c4b78d3bc 100644
--- a/client/src/components/owners-list/owners-list.container.jsx
+++ b/client/src/components/owners-list/owners-list.container.jsx
@@ -4,11 +4,11 @@ import { QUERY_ALL_OWNERS_PAGINATED } from "../../graphql/owners.queries";
 import AlertComponent from "../alert/alert.component";
 import OwnersListComponent from "./owners-list.component";
 import queryString from "query-string";
-import { useLocation } from "react-router-dom";
+import { useSearchParams } from "react-router-dom";
 import {pageLimit} from "../../utils/config";
 
 export default function OwnersListContainer() {
-  const searchParams = queryString.parse(useLocation().search);
+  const searchParams = queryString.parse(useSearchParams().toString());
   const { page, sortcolumn, sortorder, search } = searchParams;
   const { loading, error, data, refetch } = useQuery(
     QUERY_ALL_OWNERS_PAGINATED,
diff --git a/client/src/components/parts-order-list-table/parts-order-list-table.component.jsx b/client/src/components/parts-order-list-table/parts-order-list-table.component.jsx
index cafb95e7d..b42ae036b 100644
--- a/client/src/components/parts-order-list-table/parts-order-list-table.component.jsx
+++ b/client/src/components/parts-order-list-table/parts-order-list-table.component.jsx
@@ -16,7 +16,7 @@ import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useLocation } from "react-router-dom";
+import { useSearchParams } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { DELETE_PARTS_ORDER } from "../../graphql/parts-orders.queries";
@@ -78,7 +78,7 @@ export function PartsOrderListTableComponent({
   const [state, setState] = useState({
     sortedInfo: {},
   });
-  const search = queryString.parse(useLocation().search);
+  const search = queryString.parse(useSearchParams().toString());
   const selectedpartsorder = search.partsorderid;
   const [searchText, setSearchText] = useState("");
 
diff --git a/client/src/components/payments-list-paginated/payment-list-paginated.component.jsx b/client/src/components/payments-list-paginated/payment-list-paginated.component.jsx
index 83b8fc499..894f79512 100644
--- a/client/src/components/payments-list-paginated/payment-list-paginated.component.jsx
+++ b/client/src/components/payments-list-paginated/payment-list-paginated.component.jsx
@@ -6,7 +6,7 @@ import queryString from "query-string";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { Link, useNavigate, useLocation } from "react-router-dom";
+import { Link, useNavigate, useSearchParams } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { QUERY_PAYMENT_BY_ID } from "../../graphql/payments.queries";
 import { setModalContext } from "../../redux/modals/modals.actions";
@@ -42,7 +42,7 @@ export function PaymentsListPaginated({
   total,
   bodyshop,
 }) {
-  const search = queryString.parse(useLocation().search);
+  const search =queryString.parse(useSearchParams().toString());
   const [openSearchResults, setOpenSearchResults] = useState([]);
   const [searchLoading, setSearchLoading] = useState(false);
   const { page, sortcolumn, sortorder } = search;
@@ -208,7 +208,7 @@ export function PaymentsListPaginated({
     search.page = pagination.current;
     search.sortcolumn = sorter.columnKey;
     search.sortorder = sorter.order;
-    history.push({ search: queryString.stringify(search) });
+    history({ search: queryString.stringify(search) });
   };
 
   useEffect(() => {
@@ -246,7 +246,7 @@ export function PaymentsListPaginated({
                 onClick={() => {
                   delete search.search;
                   delete search.page;
-                  history.push({ search: queryString.stringify(search) });
+                  history({ search: queryString.stringify(search) });
                 }}
               >
                 {t("general.actions.clear")}
@@ -268,7 +268,7 @@ export function PaymentsListPaginated({
             placeholder={search.search || t("general.labels.search")}
             onSearch={(value) => {
               search.search = value;
-              history.push({ search: queryString.stringify(search) });
+              history({ search: queryString.stringify(search) });
               searchPayments(value);
             }}
             loading={loading || searchLoading}
diff --git a/client/src/components/phonebook-form/phonebook-form.container.jsx b/client/src/components/phonebook-form/phonebook-form.container.jsx
index 1fb466e9e..511744577 100644
--- a/client/src/components/phonebook-form/phonebook-form.container.jsx
+++ b/client/src/components/phonebook-form/phonebook-form.container.jsx
@@ -4,7 +4,7 @@ import queryString from "query-string";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import {
   DELETE_PHONEBOOK,
@@ -23,7 +23,7 @@ const mapStateToProps = createStructuredSelector({
 
 function PhonebookFormContainer({ refetch, bodyshop }) {
   const history = useNavigate();
-  const search = queryString.parse(useLocation().search);
+  const search = queryString.parse(useSearchParams().toString());
   const { phonebookentry } = search;
   const [formLoading, setFormLoading] = useState(false);
   const [form] = Form.useForm();
@@ -51,7 +51,7 @@ function PhonebookFormContainer({ refetch, bodyshop }) {
         message: t("phonebook.successes.deleted"),
       });
       delete search.phonebookentry;
-      history.push({ search: queryString.stringify(search) });
+      history({ search: queryString.stringify(search) });
       if (refetch)
         refetch().then((r) => {
           form.resetFields();
@@ -113,7 +113,7 @@ function PhonebookFormContainer({ refetch, bodyshop }) {
         form.resetFields();
         form.resetFields();
         delete search.phonebookentry;
-        history.push({ search: queryString.stringify(search) });
+        history({ search: queryString.stringify(search) });
         setFormLoading(false);
       } else {
         notification["error"]({
diff --git a/client/src/components/production-list-detail/production-list-detail.component.jsx b/client/src/components/production-list-detail/production-list-detail.component.jsx
index bdb2aa533..b79ec2f04 100644
--- a/client/src/components/production-list-detail/production-list-detail.component.jsx
+++ b/client/src/components/production-list-detail/production-list-detail.component.jsx
@@ -5,7 +5,7 @@ import queryString from "query-string";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { QUERY_JOB_CARD_DETAILS } from "../../graphql/jobs.queries";
 import { setModalContext } from "../../redux/modals/modals.actions";
@@ -44,7 +44,7 @@ export function ProductionListDetail({
   setPrintCenterContext,
   technician,
 }) {
-  const search = queryString.parse(useLocation().search);
+  const search = queryString.parse(useSearchParams().toString());
   const history = useNavigate();
   const { selected } = search;
 
@@ -53,7 +53,7 @@ export function ProductionListDetail({
 
   const handleClose = () => {
     delete search.selected;
-    history.push({ search: queryString.stringify(search) });
+    history({ search: queryString.stringify(search) });
   };
   const { loading, error, data, refetch } = useQuery(QUERY_JOB_CARD_DETAILS, {
     variables: { id: selected },
diff --git a/client/src/components/production-remove-button/production-remove-button.component.jsx b/client/src/components/production-remove-button/production-remove-button.component.jsx
index 499c2a562..dbb96135f 100644
--- a/client/src/components/production-remove-button/production-remove-button.component.jsx
+++ b/client/src/components/production-remove-button/production-remove-button.component.jsx
@@ -5,13 +5,13 @@ import { useTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import queryString from "query-string";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 
 export default function ProductionRemoveButton({ jobId }) {
   const [removeJobFromProduction] = useMutation(UPDATE_JOB);
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
-  const search = queryString.parse(useLocation().search);
+  const search = queryString.parse(useSearchParams().toString());
   const history = useNavigate();
 
   const handleRemoveFromProd = async () => {
@@ -24,7 +24,7 @@ export default function ProductionRemoveButton({ jobId }) {
     if (!!!result.errors) {
       notification["success"]({ message: t("production.successes.removed") });
       delete search.selected;
-      history.push({ search: queryString.stringify(search) });
+      history({ search: queryString.stringify(search) });
     } else {
       notification["error"]({
         message: t("production.errors.removing", {
diff --git a/client/src/components/qbo-authorize/qbo-authorize.component.jsx b/client/src/components/qbo-authorize/qbo-authorize.component.jsx
index c924d8b83..e0a37cb33 100644
--- a/client/src/components/qbo-authorize/qbo-authorize.component.jsx
+++ b/client/src/components/qbo-authorize/qbo-authorize.component.jsx
@@ -3,19 +3,19 @@ import Axios from "axios";
 import queryString from "query-string";
 import React, { useEffect } from "react";
 import { useCookies } from "react-cookie";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import QboSignIn from "../../assets/qbo/C2QB_green_btn_med_default.svg";
 
 export default function QboAuthorizeComponent() {
-  const location = useLocation();
+  const location = useSearchParams();
   const history = useNavigate();
-  const [, setCookie] = useCookies(["access_token", "refresh_token"]);
+  const [setCookie] = useCookies(["access_token", "refresh_token"]);
 
   const handleQbSignIn = async () => {
     const result = await Axios.post("/qbo/authorize");
     window.location.href = result.data;
   };
-  const qs = queryString.parse(location.search);
+  const qs = queryString.parse(location.toString());
 
   const { error } = qs;
 
@@ -39,7 +39,7 @@ export default function QboAuthorizeComponent() {
       //     : {}),
       // });
 
-      history.push({ pathname: `/manage/accounting/receivables` });
+      history({ pathname: `/manage/accounting/receivables` });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [qs, location, setCookie]);
diff --git a/client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx b/client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx
index 1ba555475..797b25e0a 100644
--- a/client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx
+++ b/client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx
@@ -3,7 +3,7 @@ import queryString from "query-string";
 import React from "react";
 import { Calendar, momentLocalizer } from "react-big-calendar";
 import { connect } from "react-redux";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import Event from "../job-at-change/schedule-event.container";
@@ -30,7 +30,7 @@ export function ScheduleCalendarWrapperComponent({
   date,
   ...otherProps
 }) {
-  const search = queryString.parse(useLocation().search);
+  const search = queryString.parse(useSearchParams().toString());
   const history = useNavigate();
   const { t } = useTranslation();
   const handleEventPropStyles = (event, start, end, isSelected) => {
@@ -113,14 +113,14 @@ export function ScheduleCalendarWrapperComponent({
         date={selectedDate}
         onNavigate={(date, view, action) => {
           search.date = date.toISOString().substr(0, 10);
-          history.push({ search: queryString.stringify(search) });
+          history({ search: queryString.stringify(search) });
         }}
         onRangeChange={(start, end) => {
           if (setDateRangeCallback) setDateRangeCallback({ start, end });
         }}
         onView={(view) => {
           search.view = view;
-          history.push({ search: queryString.stringify(search) });
+          history({ search: queryString.stringify(search) });
         }}
         step={15}
         // timeslots={1}
diff --git a/client/src/components/schedule-calendar/schedule-calendar.container.jsx b/client/src/components/schedule-calendar/schedule-calendar.container.jsx
index 27e05258a..36fb7f182 100644
--- a/client/src/components/schedule-calendar/schedule-calendar.container.jsx
+++ b/client/src/components/schedule-calendar/schedule-calendar.container.jsx
@@ -1,7 +1,7 @@
 import { useQuery } from "@apollo/client";
 import queryString from "query-string";
 import React, { useMemo, useEffect } from "react";
-import { useLocation } from "react-router-dom";
+import { useSearchParams } from "react-router-dom";
 import { QUERY_ALL_ACTIVE_APPOINTMENTS } from "../../graphql/appointments.queries";
 import AlertComponent from "../alert/alert.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
@@ -19,7 +19,7 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 export function ScheduleCalendarContainer({ calculateScheduleLoad }) {
-  const search = queryString.parse(useLocation().search);
+  const search = queryString.parse(useSearchParams().toString());
 
   const { date, view } = search;
   const range = useMemo(() => getRange(date, view), [date, view]);
diff --git a/client/src/components/scoreboard-timetickets/scoreboard-timetickets.component.jsx b/client/src/components/scoreboard-timetickets/scoreboard-timetickets.component.jsx
index 0fc84af6d..0658acc56 100644
--- a/client/src/components/scoreboard-timetickets/scoreboard-timetickets.component.jsx
+++ b/client/src/components/scoreboard-timetickets/scoreboard-timetickets.component.jsx
@@ -4,7 +4,7 @@ import _ from "lodash";
 import moment from "moment";
 import queryString from "query-string";
 import React, { useMemo } from "react";
-import { useLocation } from "react-router-dom";
+import { useSearchParams } from "react-router-dom";
 import { QUERY_TIME_TICKETS_IN_RANGE_SB } from "../../graphql/timetickets.queries";
 import AlertComponent from "../alert/alert.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
@@ -13,7 +13,7 @@ import ScoreboardTicketsBar from "./scoreboard-timetickets.bar.component";
 import ScoreboardTicketsStats from "./scoreboard-timetickets.stats.component";
 
 export default function ScoreboardTimeTickets() {
-  const searchParams = queryString.parse(useLocation().search);
+  const searchParams = queryString.parse(useSearchParams().toString());
   const { start, end } = searchParams;
   const startDate = start
     ? moment(start)
diff --git a/client/src/components/shop-employees/shop-employees-form.component.jsx b/client/src/components/shop-employees/shop-employees-form.component.jsx
index 8587dc39a..04a7c275b 100644
--- a/client/src/components/shop-employees/shop-employees-form.component.jsx
+++ b/client/src/components/shop-employees/shop-employees-form.component.jsx
@@ -13,11 +13,10 @@ import {
 } from "antd";
 import { useForm } from "antd/es/form/Form";
 import moment from "moment";
-import querystring from "query-string";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import {
@@ -36,6 +35,7 @@ import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import ShopEmployeeAddVacation from "./shop-employees-add-vacation.component";
+import queryString from "query-string";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -48,7 +48,7 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
   const { t } = useTranslation();
   const [form] = useForm();
   const history = useNavigate();
-  const search = querystring.parse(useLocation().search);
+  const search = queryString.parse(useSearchParams().toString());
   const [deleteVacation] = useMutation(DELETE_VACATION);
   const { error, data } = useQuery(QUERY_EMPLOYEE_BY_ID, {
     variables: { id: search.employeeId },
@@ -103,7 +103,7 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
         refetchQueries: ["QUERY_EMPLOYEES"],
       }).then((r) => {
         search.employeeId = r.data.insert_employees.returning[0].id;
-        history.push({ search: querystring.stringify(search) });
+        history({ search: queryString.stringify(search) });
         notification["success"]({
           message: t("employees.successes.save"),
         });
diff --git a/client/src/components/shop-employees/shop-employees-list.component.jsx b/client/src/components/shop-employees/shop-employees-list.component.jsx
index 6d2bec36a..49dcedba8 100644
--- a/client/src/components/shop-employees/shop-employees-list.component.jsx
+++ b/client/src/components/shop-employees/shop-employees-list.component.jsx
@@ -2,20 +2,20 @@ import { Button, Table } from "antd";
 import queryString from "query-string";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 
 export default function ShopEmployeesListComponent({ loading, employees }) {
   const { t } = useTranslation();
   const history = useNavigate();
-  const search = queryString.parse(useLocation().search);
+  const search = queryString.parse(useSearchParams().toString());
 
   const handleOnRowClick = (record) => {
     if (record) {
       search.employeeId = record.id;
-      history.push({ search: queryString.stringify(search) });
+      history({ search: queryString.stringify(search) });
     } else {
       delete search.employeeId;
-      history.push({ search: queryString.stringify(search) });
+      history({ search: queryString.stringify(search) });
     }
   };
   const columns = [
@@ -54,7 +54,7 @@ export default function ShopEmployeesListComponent({ loading, employees }) {
               type="primary"
               onClick={() => {
                 search.employeeId = "new";
-                history.push({ search: queryString.stringify(search) });
+                history({ search: queryString.stringify(search) });
               }}
             >
               {t("employees.actions.new")}
@@ -69,7 +69,7 @@ export default function ShopEmployeesListComponent({ loading, employees }) {
         rowSelection={{
           onSelect: (props) => {
             search.employeeId = props.id;
-            history.push({ search: queryString.stringify(search) });
+            history({ search: queryString.stringify(search) });
           },
           type: "radio",
           selectedRowKeys: [search.employeeId],
diff --git a/client/src/components/shop-info/shop-info.component.jsx b/client/src/components/shop-info/shop-info.component.jsx
index c387e94a0..52658ecf3 100644
--- a/client/src/components/shop-info/shop-info.component.jsx
+++ b/client/src/components/shop-info/shop-info.component.jsx
@@ -15,7 +15,7 @@ import ShopInfoResponsibilityCenterComponent from "./shop-info.responsibilitycen
 import ShopInfoROStatusComponent from "./shop-info.rostatus.component";
 import ShopInfoSchedulingComponent from "./shop-info.scheduling.component";
 import ShopInfoSpeedPrint from "./shop-info.speedprint.component";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import queryString from "query-string";
 
 const mapStateToProps = createStructuredSelector({
@@ -34,8 +34,8 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
   );
   const { t } = useTranslation();
   const history = useNavigate();
-  const location = useLocation();
-  const search = queryString.parse(location.search);
+  const location = useSearchParams();
+  const search = queryString.parse(location.toString());
 
   return (
     <Card
@@ -52,7 +52,7 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
       <Tabs
         defaultActiveKey={search.subtab}
         onChange={(key) =>
-          history.push({
+          history({
             search: `?tab=${search.tab}&subtab=${key}`,
           })
         }
diff --git a/client/src/components/shop-template-add/shop-template-add.component.jsx b/client/src/components/shop-template-add/shop-template-add.component.jsx
index 8ccca1967..7d0e2459c 100644
--- a/client/src/components/shop-template-add/shop-template-add.component.jsx
+++ b/client/src/components/shop-template-add/shop-template-add.component.jsx
@@ -5,7 +5,7 @@ import queryString from "query-string";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import {
@@ -29,7 +29,7 @@ export function ShopTemplateAddComponent({
   refetch,
 }) {
   const { t } = useTranslation();
-  const search = queryString.parse(useLocation().search);
+  const search = queryString.parse(useSearchParams().toString());
   const history = useNavigate();
   const [insertTemplate] = useMutation(INSERT_TEMPLATE);
 
@@ -64,7 +64,7 @@ export function ShopTemplateAddComponent({
 
     const returningId = result.data.insert_templates.returning[0].id;
     search.customTemplateId = returningId;
-    history.push({ search: queryString.stringify(search) });
+    history({ search: queryString.stringify(search) });
     if (!!refetch) refetch();
   };
   const TemplateListGenerated = TemplateList();
diff --git a/client/src/components/shop-template-delete/shop-template-delete.component.jsx b/client/src/components/shop-template-delete/shop-template-delete.component.jsx
index 8bc872f08..6f6f96b91 100644
--- a/client/src/components/shop-template-delete/shop-template-delete.component.jsx
+++ b/client/src/components/shop-template-delete/shop-template-delete.component.jsx
@@ -3,13 +3,13 @@ import { Button, notification, Popconfirm } from "antd";
 import queryString from "query-string";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import { DELETE_TEMPLATE } from "../../graphql/templates.queries";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 
 export default function ShopTemplateDeleteComponent({ templateId, refetch }) {
   const { t } = useTranslation();
-  const search = queryString.parse(useLocation().search);
+  const search = queryString.parse(useSearchParams().toString());
   const history = useNavigate();
   const [deleteTemplate] = useMutation(DELETE_TEMPLATE);
 
@@ -30,7 +30,7 @@ export default function ShopTemplateDeleteComponent({ templateId, refetch }) {
       });
     } else {
       delete search.customTemplateId;
-      history.push({ search: queryString.stringify(search) });
+      history({ search: queryString.stringify(search) });
       if (!!refetch) refetch();
     }
   };
diff --git a/client/src/components/shop-templates-list/shop-templates-list.container.jsx b/client/src/components/shop-templates-list/shop-templates-list.container.jsx
index e8ab7e448..135352995 100644
--- a/client/src/components/shop-templates-list/shop-templates-list.container.jsx
+++ b/client/src/components/shop-templates-list/shop-templates-list.container.jsx
@@ -5,7 +5,7 @@ import { QUERY_CUSTOM_TEMPLATES } from "../../graphql/templates.queries";
 import AlertComponent from "../alert/alert.component";
 import Skeleton from "../loading-skeleton/loading-skeleton.component";
 import { useTranslation } from "react-i18next";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import queryString from "query-string";
 import { TemplateList } from "../../utils/TemplateConstants";
 import ShopTemplateAdd from "../shop-template-add/shop-template-add.component";
@@ -18,7 +18,7 @@ export default function ShopTemplatesListContainer({ visibleState }) {
     nextFetchPolicy: "network-only",
   });
   const { t } = useTranslation();
-  const search = queryString.parse(useLocation().search);
+  const search = queryString.parse(useSearchParams().toString());
   const history = useNavigate();
   if (error) return <AlertComponent message={error.message} type="error" />;
 
@@ -26,11 +26,11 @@ export default function ShopTemplatesListContainer({ visibleState }) {
     if (record) {
       if (record.id) {
         search.customTemplateId = record.id;
-        history.push({ search: queryString.stringify(search) });
+        history({ search: queryString.stringify(search) });
       }
     } else {
       delete search.customTemplateId;
-      history.push({ search: queryString.stringify(search) });
+      history({ search: queryString.stringify(search) });
     }
   };
 
diff --git a/client/src/components/sign-in-form/sign-in-form.component.jsx b/client/src/components/sign-in-form/sign-in-form.component.jsx
index 4e8d29cf9..88f119abd 100644
--- a/client/src/components/sign-in-form/sign-in-form.component.jsx
+++ b/client/src/components/sign-in-form/sign-in-form.component.jsx
@@ -1,10 +1,10 @@
 import { LockOutlined, UserOutlined } from "@ant-design/icons";
 import { Button, Form, Input, Typography } from "antd";
 import queryString from "query-string";
-import React from "react";
+import React, {useEffect} from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { Link, useNavigate, useLocation } from "react-router-dom";
+import { Link, useNavigate, useSearchParams } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import ImEXOnlineLogo from "../../assets/logo192.png";
 import {
@@ -38,8 +38,10 @@ export function SignInComponent({
   sendPasswordReset,
   loginLoading,
 }) {
-  const { redirect } = queryString.parse(useLocation().search);
+  const [searchParams] = useSearchParams();
+  const redirect = searchParams.get("redirect");
   const navigate = useNavigate();
+
   const { t } = useTranslation();
   const handleFinish = (values) => {
     const { email, password } = values;
@@ -47,8 +49,13 @@ export function SignInComponent({
   };
   const [form] = Form.useForm();
 
-  if (currentUser.authorized === true)
-    return navigate("/manage");
+  useEffect(() => {
+    console.log('navigating to ' + redirect || "/manage");
+    if (currentUser.authorized === true) {
+      navigate(redirect || "/manage");
+    }
+  }, [currentUser, redirect, navigate]);
+
 
   return (
     <div className="login-container">
diff --git a/client/src/components/tech-login/tech-login.component.jsx b/client/src/components/tech-login/tech-login.component.jsx
index eec9775b4..9de429142 100644
--- a/client/src/components/tech-login/tech-login.component.jsx
+++ b/client/src/components/tech-login/tech-login.component.jsx
@@ -1,5 +1,5 @@
 import { Button, Form, Input } from "antd";
-import React from "react";
+import React, {useEffect} from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -36,7 +36,9 @@ export function TechLogin({
     techLoginStart(values);
   };
 
-  if (technician) return navigate("/tech/joblookup");
+  useEffect(() => {
+    if (technician) return navigate("/tech/joblookup");
+  }, [technician, navigate]);
 
   return (
     <div className="tech-login-container">
diff --git a/client/src/components/tech-lookup-jobs-drawer/tech-lookup-jobs-drawer.component.jsx b/client/src/components/tech-lookup-jobs-drawer/tech-lookup-jobs-drawer.component.jsx
index d9a6fa2cc..feab78ba4 100644
--- a/client/src/components/tech-lookup-jobs-drawer/tech-lookup-jobs-drawer.component.jsx
+++ b/client/src/components/tech-lookup-jobs-drawer/tech-lookup-jobs-drawer.component.jsx
@@ -5,7 +5,7 @@ import queryString from "query-string";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { GET_JOB_BY_PK } from "../../graphql/jobs.queries";
 import { setModalContext } from "../../redux/modals/modals.actions";
@@ -51,7 +51,7 @@ export function TechLookupJobsDrawer({ bodyshop, setPrintCenterContext }) {
     ? bpoints[selectedBreakpoint[0]]
     : "100%";
 
-  const searchParams = queryString.parse(useLocation().search);
+  const searchParams = queryString.parse(useSearchParams().toString());
   const { selected } = searchParams;
   const history = useNavigate();
   const { loading, error, data, refetch } = useQuery(GET_JOB_BY_PK, {
@@ -64,7 +64,7 @@ export function TechLookupJobsDrawer({ bodyshop, setPrintCenterContext }) {
   const { t } = useTranslation();
   const handleDrawerClose = () => {
     delete searchParams.selected;
-    history.push({
+    history({
       search: queryString.stringify({
         ...searchParams,
       }),
diff --git a/client/src/components/tech-lookup-jobs-list/tech-lookup-jobs-list.component.jsx b/client/src/components/tech-lookup-jobs-list/tech-lookup-jobs-list.component.jsx
index 0bc7b7d85..408f57c95 100644
--- a/client/src/components/tech-lookup-jobs-list/tech-lookup-jobs-list.component.jsx
+++ b/client/src/components/tech-lookup-jobs-list/tech-lookup-jobs-list.component.jsx
@@ -5,7 +5,7 @@ import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
@@ -19,7 +19,7 @@ const mapStateToProps = createStructuredSelector({
 });
 
 export function TechLookupJobsList({ bodyshop }) {
-  const searchParams = queryString.parse(useLocation().search);
+  const searchParams = queryString.parse(useSearchParams().toString());
   const { selected } = searchParams;
 
   const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
@@ -80,7 +80,7 @@ export function TechLookupJobsList({ bodyshop }) {
   const handleOnRowClick = (record) => {
     if (record) {
       if (record.id) {
-        history.push({
+        history({
           search: queryString.stringify({
             ...searchParams,
             selected: record.id,
diff --git a/client/src/components/ticket-tickets-dates-selector/time-tickets-dates-selector.component.jsx b/client/src/components/ticket-tickets-dates-selector/time-tickets-dates-selector.component.jsx
index 3c6792aaf..55f532256 100644
--- a/client/src/components/ticket-tickets-dates-selector/time-tickets-dates-selector.component.jsx
+++ b/client/src/components/ticket-tickets-dates-selector/time-tickets-dates-selector.component.jsx
@@ -3,10 +3,10 @@ import { DatePicker } from "antd";
 import moment from "moment";
 import queryString from "query-string";
 import React from "react";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 
 export default function TimeTicketsDatesSelector() {
-  const searchParams = queryString.parse(useLocation().search);
+  const searchParams = queryString.parse(useSearchParams().toString());
   const { start, end } = searchParams;
   const history = useNavigate();
 
@@ -15,7 +15,7 @@ export default function TimeTicketsDatesSelector() {
       const [start, end] = dates;
 
       if (!!start && !!end) {
-        history.push({
+        history({
           search: queryString.stringify({
             ...searchParams,
             start: start.format("YYYY-MM-DD"),
@@ -24,7 +24,7 @@ export default function TimeTicketsDatesSelector() {
         });
       }
     } else {
-      history.push({
+      history({
         search: queryString.stringify({
           ...searchParams,
           start: null,
diff --git a/client/src/components/time-tickets-attendance-table/time-tickets-attendance-table.component.jsx b/client/src/components/time-tickets-attendance-table/time-tickets-attendance-table.component.jsx
index ce7c4b34f..f750c00a3 100644
--- a/client/src/components/time-tickets-attendance-table/time-tickets-attendance-table.component.jsx
+++ b/client/src/components/time-tickets-attendance-table/time-tickets-attendance-table.component.jsx
@@ -1,7 +1,7 @@
 import { Button } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
-import { useLocation } from "react-router-dom";
+import { useSearchParams } from "react-router-dom";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
 import { useTranslation } from "react-i18next";
@@ -9,7 +9,7 @@ import moment from "moment";
 const AttendanceCsv = TemplateList("special").attendance_detail_csv;
 
 export default function TimeTicketsAttendanceTable() {
-  const searchParams = queryString.parse(useLocation().search);
+  const searchParams = queryString.parse(useSearchParams().toString());
   const { start, end } = searchParams;
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
diff --git a/client/src/components/time-tickets-payroll-table/time-tickets-payroll-table.component.jsx b/client/src/components/time-tickets-payroll-table/time-tickets-payroll-table.component.jsx
index 731d94273..8afa4ea05 100644
--- a/client/src/components/time-tickets-payroll-table/time-tickets-payroll-table.component.jsx
+++ b/client/src/components/time-tickets-payroll-table/time-tickets-payroll-table.component.jsx
@@ -1,14 +1,14 @@
 import { Button } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
-import { useLocation } from "react-router-dom";
+import { useSearchParams } from "react-router-dom";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
 import { useTranslation } from "react-i18next";
 import moment from "moment";
 const PayrollTemplate = TemplateList("special").exported_payroll;
 export default function TimeTicketsPayrollTable() {
-  const searchParams = queryString.parse(useLocation().search);
+  const searchParams = queryString.parse(useSearchParams().toString());
   const { start, end } = searchParams;
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
diff --git a/client/src/components/vehicle-detail-form/vehicle-detail-form.container.jsx b/client/src/components/vehicle-detail-form/vehicle-detail-form.container.jsx
index 38406e515..79c9df48a 100644
--- a/client/src/components/vehicle-detail-form/vehicle-detail-form.container.jsx
+++ b/client/src/components/vehicle-detail-form/vehicle-detail-form.container.jsx
@@ -33,7 +33,7 @@ function VehicleDetailFormContainer({ vehicle, refetch }) {
         message: t("vehicles.successes.delete"),
       });
       setLoading(false);
-      history.push(`/manage/vehicles`);
+      history(`/manage/vehicles`);
     }
   };
 
diff --git a/client/src/components/vehicles-list/vehicles-list.component.jsx b/client/src/components/vehicles-list/vehicles-list.component.jsx
index 38e68655b..e39ed602a 100644
--- a/client/src/components/vehicles-list/vehicles-list.component.jsx
+++ b/client/src/components/vehicles-list/vehicles-list.component.jsx
@@ -3,7 +3,7 @@ import { Button, Card, Input, Space, Table, Typography } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate, useLocation } from "react-router-dom";
+import { Link, useNavigate, useSearchParams } from "react-router-dom";
 import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.component";
 import {pageLimit} from "../../utils/config";
 export default function VehiclesListComponent({
@@ -12,7 +12,7 @@ export default function VehiclesListComponent({
   total,
   refetch,
 }) {
-  const search = queryString.parse(useLocation().search);
+  const search = queryString.parse(useSearchParams().toString());
   const {
     page,
     //sortcolumn, sortorder,
@@ -66,7 +66,7 @@ export default function VehiclesListComponent({
     search.page = pagination.current;
     search.sortcolumn = sorter.columnKey;
     search.sortorder = sorter.order;
-    history.push({ search: queryString.stringify(search) });
+    history({ search: queryString.stringify(search) });
   };
 
   return (
@@ -82,7 +82,7 @@ export default function VehiclesListComponent({
               <Button
                 onClick={() => {
                   delete search.search;
-                  history.push({ search: queryString.stringify(search) });
+                  history({ search: queryString.stringify(search) });
                 }}
               >
                 {t("general.actions.clear")}
@@ -96,7 +96,7 @@ export default function VehiclesListComponent({
             placeholder={search.search || t("general.labels.search")}
             onSearch={(value) => {
               search.search = value;
-              history.push({ search: queryString.stringify(search) });
+              history({ search: queryString.stringify(search) });
             }}
             enterButton
           />
diff --git a/client/src/components/vehicles-list/vehicles-list.container.jsx b/client/src/components/vehicles-list/vehicles-list.container.jsx
index 2e85236f8..d933b9db6 100644
--- a/client/src/components/vehicles-list/vehicles-list.container.jsx
+++ b/client/src/components/vehicles-list/vehicles-list.container.jsx
@@ -4,11 +4,11 @@ import { useQuery } from "@apollo/client";
 import AlertComponent from "../alert/alert.component";
 import { QUERY_ALL_VEHICLES_PAGINATED } from "../../graphql/vehicles.queries";
 import queryString from "query-string";
-import { useLocation } from "react-router-dom";
+import { useSearchParams } from "react-router-dom";
 import {pageLimit} from "../../utils/config";
 
 export default function VehiclesListContainer() {
-  const searchParams = queryString.parse(useLocation().search);
+  const searchParams = queryString.parse(useSearchParams().toString());
   const { page, sortcolumn, sortorder, search } = searchParams;
 
   const { loading, error, data, refetch } = useQuery(
diff --git a/client/src/components/vendors-form/vendors-form.container.jsx b/client/src/components/vendors-form/vendors-form.container.jsx
index 3f92c717d..9609585b1 100644
--- a/client/src/components/vendors-form/vendors-form.container.jsx
+++ b/client/src/components/vendors-form/vendors-form.container.jsx
@@ -4,7 +4,7 @@ import queryString from "query-string";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import {
   DELETE_VENDOR,
@@ -23,7 +23,7 @@ const mapStateToProps = createStructuredSelector({
 
 function VendorsFormContainer({ refetch, bodyshop }) {
   const history = useNavigate();
-  const search = queryString.parse(useLocation().search);
+  const search = queryString.parse(useSearchParams().toString());
   const { selectedvendor } = search;
   const [formLoading, setFormLoading] = useState(false);
   const [form] = Form.useForm();
@@ -55,7 +55,7 @@ function VendorsFormContainer({ refetch, bodyshop }) {
         message: t("vendors.successes.deleted"),
       });
       delete search.selectedvendor;
-      history.push({ search: queryString.stringify(search) });
+      history({ search: queryString.stringify(search) });
       if (refetch)
         refetch().then((r) => {
           form.resetFields();
@@ -107,7 +107,7 @@ function VendorsFormContainer({ refetch, bodyshop }) {
         form.resetFields();
         form.resetFields();
         delete search.selectedvendor;
-        history.push({ search: queryString.stringify(search) });
+        history({ search: queryString.stringify(search) });
         setFormLoading(false);
       } else {
         notification["error"]({
diff --git a/client/src/components/vendors-list/vendors-list.component.jsx b/client/src/components/vendors-list/vendors-list.component.jsx
index 52c2a9a94..3f7026f88 100644
--- a/client/src/components/vendors-list/vendors-list.component.jsx
+++ b/client/src/components/vendors-list/vendors-list.component.jsx
@@ -3,7 +3,7 @@ import { Button, Card, Input, Space, Table } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useLocation } from "react-router-dom";
+import { useSearchParams } from "react-router-dom";
 import { alphaSort } from "../../utils/sorters";
 
 export default function VendorsListComponent({
@@ -13,7 +13,7 @@ export default function VendorsListComponent({
   vendors,
   refetch,
 }) {
-  const search = queryString.parse(useLocation().search);
+  const search = queryString.parse(useSearchParams().toString());
   const { selectedvendor } = search;
 
   const [state, setState] = useState({
diff --git a/client/src/components/vendors-list/vendors-list.container.jsx b/client/src/components/vendors-list/vendors-list.container.jsx
index 5bf201790..6f5e0af18 100644
--- a/client/src/components/vendors-list/vendors-list.container.jsx
+++ b/client/src/components/vendors-list/vendors-list.container.jsx
@@ -1,7 +1,7 @@
 import { useQuery } from "@apollo/client";
 import queryString from "query-string";
 import React from "react";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import AlertComponent from "../../components/alert/alert.component";
 import { QUERY_ALL_VENDORS } from "../../graphql/vendors.queries";
 import VendorsListComponent from "./vendors-list.component";
@@ -11,21 +11,21 @@ export default function VendorsListContainer() {
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
   });
-  const search = queryString.parse(useLocation().search);
+  const search = queryString.parse(useSearchParams().toString());
   const history = useNavigate();
 
   const handleNewVendor = () => {
     search.selectedvendor = "new";
-    history.push({ search: queryString.stringify(search) });
+    history({ search: queryString.stringify(search) });
   };
 
   const handleOnRowClick = (record) => {
     if (record) {
       search.selectedvendor = record.id;
-      history.push({ search: queryString.stringify(search) });
+      history({ search: queryString.stringify(search) });
     } else {
       delete search.selectedvendor;
-      history.push({ search: queryString.stringify(search) });
+      history({ search: queryString.stringify(search) });
     }
   };
 
diff --git a/client/src/index.js b/client/src/index.js
index 2006eccee..823660345 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -3,9 +3,9 @@ import * as Sentry from "@sentry/react";
 import "antd/dist/antd.less";
 import Dinero from "dinero.js";
 import React from "react";
-import ReactDOM from "react-dom";
+import ReactDOM from "react-dom/client";
 import { Provider } from "react-redux";
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter as Router } from "react-router-dom";
 import { PersistGate } from "redux-persist/integration/react";
 import AppContainer from "./App/App.container";
 import LoadingSpinner from "./components/loading-spinner/loading-spinner.component";
@@ -47,18 +47,20 @@ if (process.env.NODE_ENV !== "development") {
   });
 }
 
-ReactDOM.render(
-  <Provider store={store}>
-    <BrowserRouter>
-      <PersistGate
-        loading={<LoadingSpinner message="Restoring your settings..." />}
-        persistor={persistor}
-      >
-        <AppContainer />
-      </PersistGate>
-    </BrowserRouter>
-  </Provider>,
-  document.getElementById("root")
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
+    <React.StrictMode>
+      <Provider store={store}>
+        <Router>
+          <PersistGate
+              loading={<LoadingSpinner message="Restoring your settings..." />}
+              persistor={persistor}
+          >
+            <AppContainer />
+          </PersistGate>
+        </Router>
+      </Provider>
+    </React.StrictMode>
 );
 
 // const onServiceWorkerUpdate = (registration) => {
diff --git a/client/src/pages/bills/bills.page.component.jsx b/client/src/pages/bills/bills.page.component.jsx
index b3854c423..e824b63c6 100644
--- a/client/src/pages/bills/bills.page.component.jsx
+++ b/client/src/pages/bills/bills.page.component.jsx
@@ -5,7 +5,7 @@ import queryString from "query-string";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { Link, useNavigate, useLocation } from "react-router-dom";
+import { Link, useNavigate, useSearchParams } from "react-router-dom";
 import BillDeleteButton from "../../components/bill-delete-button/bill-delete-button.component";
 import PartsOrderModalContainer from "../../components/parts-order-modal/parts-order-modal.container";
 import PrintWrapperComponent from "../../components/print-wrapper/print-wrapper.component";
@@ -31,7 +31,7 @@ export function BillsListPage({
   setPartsOrderContext,
   setBillEnterContext,
 }) {
-  const search = queryString.parse(useLocation().search);
+  const search = queryString.parse(useSearchParams().toString());
   const [openSearchResults, setOpenSearchResults] = useState([]);
   const [searchLoading, setSearchLoading] = useState(false);
   const { page } = search;
@@ -212,7 +212,7 @@ export function BillsListPage({
       search.sortorder = sorter.order;
     }
     search.sort = JSON.stringify({ [sorter.columnKey]: sorter.order });
-    history.push({ search: queryString.stringify(search) });
+    history({ search: queryString.stringify(search) });
   };
 
   useEffect(() => {
@@ -251,7 +251,7 @@ export function BillsListPage({
                 onClick={() => {
                   delete search.search;
                   delete search.page;
-                  history.push({ search: queryString.stringify(search) });
+                  history({ search: queryString.stringify(search) });
                 }}
               >
                 {t("general.actions.clear")}
@@ -276,7 +276,7 @@ export function BillsListPage({
             placeholder={search.search || t("general.labels.search")}
             onSearch={(value) => {
               search.search = value;
-              history.push({ search: queryString.stringify(search) });
+              history({ search: queryString.stringify(search) });
               searchBills(value);
             }}
             loading={loading || searchLoading}
diff --git a/client/src/pages/bills/bills.page.container.jsx b/client/src/pages/bills/bills.page.container.jsx
index 40e662899..88f307558 100644
--- a/client/src/pages/bills/bills.page.container.jsx
+++ b/client/src/pages/bills/bills.page.container.jsx
@@ -3,7 +3,7 @@ import queryString from "query-string";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useLocation } from "react-router-dom";
+import { useSearchParams } from "react-router-dom";
 import AlertComponent from "../../components/alert/alert.component";
 import BillDetailEditContainer from "../../components/bill-detail-edit/bill-detail-edit.container";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
@@ -22,7 +22,7 @@ const mapDispatchToProps = (dispatch) => ({
 
 export function BillsPageContainer({ setBreadcrumbs, setSelectedHeader }) {
   const { t } = useTranslation();
-  const searchParams = queryString.parse(useLocation().search);
+  const searchParams = queryString.parse(useSearchParams().toString());
   const { page, sortcolumn, sortorder, searchObj } = searchParams;
 
   useEffect(() => {
diff --git a/client/src/pages/contract-create/contract-create.page.container.jsx b/client/src/pages/contract-create/contract-create.page.container.jsx
index 8eae1e43b..ec22aaf18 100644
--- a/client/src/pages/contract-create/contract-create.page.container.jsx
+++ b/client/src/pages/contract-create/contract-create.page.container.jsx
@@ -3,7 +3,7 @@ import { Form, notification } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useSearchParams, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import { INSERT_NEW_CONTRACT } from "../../graphql/cccontracts.queries";
@@ -31,11 +31,11 @@ export function ContractCreatePageContainer({
   const [form] = Form.useForm();
   const { t } = useTranslation();
   const history = useNavigate();
-  const location = useLocation();
+  const searchParams = useSearchParams();
   const [loading, setLoading] = useState(false);
   const selectedCarState = useState(null);
   const selectedJobState = useState(
-    (location.state && location.state.jobId) || null
+      (searchParams.get('state') && searchParams.get('state').jobId) || null
   );
   const [insertContract] = useMutation(INSERT_NEW_CONTRACT);
   const [intakeJob] = useMutation(UPDATE_JOB);
@@ -87,7 +87,7 @@ export function ContractCreatePageContainer({
 
         form.resetFields();
         form.resetFields();
-        history.push(
+        history(
           `/manage/courtesycars/contracts/${result.data.insert_cccontracts.returning[0].id}`
         );
       } else {
diff --git a/client/src/pages/contracts/contracts.page.container.jsx b/client/src/pages/contracts/contracts.page.container.jsx
index 466b468e0..1f41c6c0d 100644
--- a/client/src/pages/contracts/contracts.page.container.jsx
+++ b/client/src/pages/contracts/contracts.page.container.jsx
@@ -3,7 +3,7 @@ import queryString from "query-string";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useLocation } from "react-router-dom";
+import { useSearchParams } from "react-router-dom";
 import AlertComponent from "../../components/alert/alert.component";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import { QUERY_ACTIVE_CONTRACTS_PAGINATED } from "../../graphql/cccontracts.queries";
@@ -20,7 +20,7 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 export function ContractsPageContainer({ setBreadcrumbs, setSelectedHeader }) {
-  const searchParams = queryString.parse(useLocation().search);
+  const searchParams = queryString.parse(useSearchParams().toString());
   const { search, page, sortcolumn, sortorder } = searchParams;
 
   const { loading, error, data, refetch } = useQuery(
diff --git a/client/src/pages/courtesy-car-create/courtesy-car-create.page.container.jsx b/client/src/pages/courtesy-car-create/courtesy-car-create.page.container.jsx
index 5079c65d6..606c4291b 100644
--- a/client/src/pages/courtesy-car-create/courtesy-car-create.page.container.jsx
+++ b/client/src/pages/courtesy-car-create/courtesy-car-create.page.container.jsx
@@ -50,7 +50,7 @@ export function CourtesyCarCreateContainer({
       form.resetFields();
       form.resetFields();
       notification["success"]({ message: t("courtesycars.successes.saved") });
-      history.push(
+      history(
         `/manage/courtesycars/${result.data.insert_courtesycars.returning[0].id}`
       );
     }
diff --git a/client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx b/client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx
index 93bffe97f..1880ce657 100644
--- a/client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx
+++ b/client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx
@@ -18,7 +18,7 @@ import CourtesyCarDetailPageComponent from "./courtesy-car-detail.page.component
 import NotFound from "../../components/not-found/not-found.component";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import queryString from "query-string";
-import { useLocation } from "react-router-dom";
+import { useSearchParams } from "react-router-dom";
 import {pageLimit} from "../../utils/config";
 
 const mapDispatchToProps = (dispatch) => ({
@@ -31,7 +31,7 @@ export function CourtesyCarDetailPageContainer({
   addRecentItem,
   setSelectedHeader,
 }) {
-  const searchParams = queryString.parse(useLocation().search);
+  const searchParams = queryString.parse(useSearchParams().toString());
   const { page, sortcolumn, sortorder } = searchParams;
 
   const { t } = useTranslation();
diff --git a/client/src/pages/dms-payables/dms-payables.container.jsx b/client/src/pages/dms-payables/dms-payables.container.jsx
index 4349c49c5..0d8eec2d9 100644
--- a/client/src/pages/dms-payables/dms-payables.container.jsx
+++ b/client/src/pages/dms-payables/dms-payables.container.jsx
@@ -2,7 +2,7 @@ import { Button, Card, Col, notification, Row, Select, Space } from "antd";
 import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import SocketIO from "socket.io-client";
 import DmsAllocationsSummaryApComponent from "../../components/dms-allocations-summary-ap/dms-allocations-summary-ap.component";
@@ -45,9 +45,9 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
   const history = useNavigate();
   const [logs, setLogs] = useState([]);
 
-  const { state } = useLocation();
-
-  const logsRef = useRef(null);
+   const searchParams = useSearchParams();
+   const state = Object.fromEntries(searchParams);
+   const logsRef = useRef(null);
 
   useEffect(() => {
     document.title = t("titles.dms");
@@ -101,7 +101,7 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
   }, []);
 
   if (!state?.billids) {
-    history.push(`/manage/accounting/payables`);
+    history(`/manage/accounting/payables`);
   }
 
   return (
diff --git a/client/src/pages/dms/dms.container.jsx b/client/src/pages/dms/dms.container.jsx
index ae748c04c..96c4faabf 100644
--- a/client/src/pages/dms/dms.container.jsx
+++ b/client/src/pages/dms/dms.container.jsx
@@ -13,7 +13,7 @@ import queryString from "query-string";
 import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { Link, useNavigate, useLocation } from "react-router-dom";
+import { Link, useNavigate, useSearchParams } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import SocketIO from "socket.io-client";
 import AlertComponent from "../../components/alert/alert.component";
@@ -62,7 +62,7 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
   const [logLevel, setLogLevel] = useState("DEBUG");
   const history = useNavigate();
   const [logs, setLogs] = useState([]);
-  const search = queryString.parse(useLocation().search);
+  const search = queryString.parse(useSearchParams().toString());
   const { jobId } = search;
 
   const { loading, error, data } = useQuery(QUERY_JOB_EXPORT_DMS, {
@@ -115,7 +115,7 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
       notification.success({
         message: t("jobs.successes.exported"),
       });
-      history.push("/manage/accounting/receivables");
+      history("/manage/accounting/receivables");
     });
 
     if (socket.disconnected) socket.connect();
diff --git a/client/src/pages/export-logs/export-logs.page.component.jsx b/client/src/pages/export-logs/export-logs.page.component.jsx
index 14c415990..4b540a853 100644
--- a/client/src/pages/export-logs/export-logs.page.component.jsx
+++ b/client/src/pages/export-logs/export-logs.page.component.jsx
@@ -6,7 +6,7 @@ import queryString from "query-string";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { Link, useNavigate, useLocation } from "react-router-dom";
+import { Link, useNavigate, useSearchParams } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import AlertComponent from "../../components/alert/alert.component";
 import { QUERY_EXPORT_LOG_PAGINATED } from "../../graphql/accounting.queries";
@@ -19,7 +19,7 @@ const mapStateToProps = createStructuredSelector({
 });
 
 export function ExportLogsPageComponent({ bodyshop }) {
-  const searchParams = queryString.parse(useLocation().search);
+  const searchParams = queryString.parse(useSearchParams().toString());
   const { page, sortcolumn, sortorder, search } = searchParams;
   const history = useNavigate();
 
@@ -60,7 +60,7 @@ export function ExportLogsPageComponent({ bodyshop }) {
     } else {
       delete searchParams.statusFilters;
     }
-    history.push({ search: queryString.stringify(searchParams) });
+    history({ search: queryString.stringify(searchParams) });
   };
 
   const columns = [
@@ -155,7 +155,7 @@ export function ExportLogsPageComponent({ bodyshop }) {
               <Button
                 onClick={() => {
                   delete searchParams.search;
-                  history.push({ search: queryString.stringify(searchParams) });
+                  history({ search: queryString.stringify(searchParams) });
                 }}
               >
                 {t("general.actions.clear")}
@@ -169,7 +169,7 @@ export function ExportLogsPageComponent({ bodyshop }) {
             placeholder={searchParams.search || t("general.labels.search")}
             onSearch={(value) => {
               searchParams.search = value;
-              history.push({ search: queryString.stringify(searchParams) });
+              history({ search: queryString.stringify(searchParams) });
             }}
           />
         </Space>
diff --git a/client/src/pages/jobs-all/jobs-all.container.jsx b/client/src/pages/jobs-all/jobs-all.container.jsx
index b9fa9a52a..8d399f73c 100644
--- a/client/src/pages/jobs-all/jobs-all.container.jsx
+++ b/client/src/pages/jobs-all/jobs-all.container.jsx
@@ -3,7 +3,7 @@ import queryString from "query-string";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useLocation } from "react-router-dom";
+import { useSearchParams } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import AlertComponent from "../../components/alert/alert.component";
 import JobsListPaginated from "../../components/jobs-list-paginated/jobs-list-paginated.component";
@@ -25,7 +25,7 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 export function AllJobs({ setBreadcrumbs, setSelectedHeader }) {
-  const searchParams = queryString.parse(useLocation().search);
+  const searchParams = queryString.parse(useSearchParams().toString());
   const { page, sortcolumn, sortorder, statusFilters } = searchParams;
 
   const { loading, error, data, refetch } = useQuery(
diff --git a/client/src/pages/jobs-close/jobs-close.component.jsx b/client/src/pages/jobs-close/jobs-close.component.jsx
index 91c8c7385..e5c0463ab 100644
--- a/client/src/pages/jobs-close/jobs-close.component.jsx
+++ b/client/src/pages/jobs-close/jobs-close.component.jsx
@@ -21,7 +21,7 @@ import {
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-//import { useHistory } from "react-router-dom";
+// import { useNavigate } from 'react-router-dom';
 import { useTreatments } from "@splitsoftware/splitio-react";
 import Dinero from "dinero.js";
 import moment from "moment";
@@ -110,7 +110,9 @@ export function JobsCloseComponent({ job, bodyshop, jobRO }) {
       notification["success"]({
         message: t("jobs.successes.closed"),
       });
-      // history.push(`/manage/jobs/${job.id}`);
+
+    // const navigate = useNavigate();
+    // navigate(`/manage/jobs/${job.id}`);
     } else {
       setLoading(false);
       notification["error"]({
diff --git a/client/src/pages/jobs-detail/jobs-detail.page.component.jsx b/client/src/pages/jobs-detail/jobs-detail.page.component.jsx
index ebde2e03e..ced95d71a 100644
--- a/client/src/pages/jobs-detail/jobs-detail.page.component.jsx
+++ b/client/src/pages/jobs-detail/jobs-detail.page.component.jsx
@@ -24,7 +24,7 @@ import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { FaHardHat, FaRegStickyNote, FaShieldAlt } from "react-icons/fa";
 import { connect } from "react-redux";
-import {useNavigate, useLocation} from "react-router-dom";
+import {useNavigate, useSearchParams} from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import FormFieldsChanged from "../../components/form-fields-changed-alert/form-fields-changed-alert.component";
 import JobAuditTrail from "../../components/job-audit-trail/job-audit-trail.component";
@@ -79,8 +79,7 @@ export function JobsDetailPage({
   const [form] = Form.useForm();
   const history = useNavigate();
   const [loading, setLoading] = useState(false);
-  const search = queryString.parse(useLocation().search);
-
+  const search = queryString.parse(useSearchParams().toString());
   const formItemLayout = {
     layout: "vertical",
   };
@@ -256,7 +255,7 @@ export function JobsDetailPage({
         <FormFieldsChanged form={form} />
         <Tabs
           defaultActiveKey={search.tab}
-          onChange={(key) => history.push({ search: `?tab=${key}` })}
+          onChange={(key) => history({ search: `?tab=${key}` })}
           tabBarStyle={{ fontWeight: "bold", borderBottom: "10px" }}
         >
           <Tabs.TabPane
diff --git a/client/src/pages/landing/landing.page.jsx b/client/src/pages/landing/landing.page.jsx
index a189a5409..e0a862a6a 100644
--- a/client/src/pages/landing/landing.page.jsx
+++ b/client/src/pages/landing/landing.page.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useEffect} from "react";
 import { connect } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
@@ -13,8 +13,12 @@ export default connect(mapStateToProps, null)(LandingPage);
 
 export function LandingPage({ currentUser }) {
   const navigate = useNavigate();
-  if (currentUser.authorized) return navigate("/manage");
 
-  return <LandingPageStatic />;
-  //return <Redirect to={"/signin"} />;
+  useEffect(() => {
+    if (!currentUser.authorized) {
+      navigate('/manage');
+    }
+  }, [currentUser, navigate]);
+
+  return currentUser.authorized ? <LandingPageStatic /> : <div />;
 }
diff --git a/client/src/pages/manage-root/manage-root.page.component.jsx b/client/src/pages/manage-root/manage-root.page.component.jsx
index 0b87db1d8..f1c4fc53f 100644
--- a/client/src/pages/manage-root/manage-root.page.component.jsx
+++ b/client/src/pages/manage-root/manage-root.page.component.jsx
@@ -1,14 +1,19 @@
-import React from "react";
+import React, {useEffect} from "react";
 //import DashboardGridComponent from "../../components/dashboard-grid/dashboard-grid.component";
 import { useNavigate } from "react-router-dom";
 export default function ManageRootPageComponent() {
   //const client = useApolloClient();
   const navigate = useNavigate();
-  return navigate("/manage/jobs");
 
+  useEffect(() => {
+      navigate('/manage/jobs');
+  }, [navigate]);
+
+  return <div />;
   // return (
   //   <div>
   //     <DashboardGridComponent />
   //   </div>
   // );
+
 }
diff --git a/client/src/pages/manage/manage.page.component.jsx b/client/src/pages/manage/manage.page.component.jsx
index c83ebd0e8..a11a2217b 100644
--- a/client/src/pages/manage/manage.page.component.jsx
+++ b/client/src/pages/manage/manage.page.component.jsx
@@ -179,7 +179,13 @@ const mapStateToProps = createStructuredSelector({
 });
 
 export function Manage({ match, conflict, bodyshop }) {
+
+  // TODO: Remove after client upgrade
+  console.log('Manage Page :');
+  console.dir({ match, conflict, bodyshop });
+
   const { t } = useTranslation();
+
   useEffect(() => {
     const widgetId = "IABVNO4scRKY11XBQkNr";
     window.noticeable.render("widget", widgetId);
@@ -209,184 +215,152 @@ export function Manage({ match, conflict, bodyshop }) {
       <EmailOverlayContainer />
       <TimeTicketModalContainer />
       <PrintCenterModalContainer />
-      <Route exact path={`${match.path}/_test`} component={TestComponent} />
-      <Route exact path={`${match.path}`} component={ManageRootPage} />
-      <Route exact path={`${match.path}/jobs`} component={JobsPage} />
+      <Route path={`${match.path}/_test`} element={<TestComponent />} />
+      <Route path={`${match.path}`} element={<ManageRootPage />} />
+      <Route path={`${match.path}/jobs`} element={<JobsPage />} />
       <Routes>
         <Route
-          exact
           path={`${match.path}/jobs/:jobId/intake`}
-          component={JobIntake}
+          element={<JobIntake />}
         />
         <Route
-          exact
           path={`${match.path}/jobs/:jobId/deliver`}
-          component={JobDeliver}
+          element={<JobDeliver />}
         />
         <Route
-          exact
           path={`${match.path}/jobs/:jobId/checklist`}
-          component={JobChecklistView}
+          element={<JobChecklistView />}
         />
         <Route
-          exact
           path={`${match.path}/jobs/:jobId/close`}
-          component={JobsClose}
+          element={<JobsClose />}
         />
         <Route
-          exact
           path={`${match.path}/jobs/:jobId/admin`}
-          component={JobsAdmin}
+          element={<JobsAdmin />}
         />
-        <Route exact path={`${match.path}/jobs/all`} component={AllJobs} />
-        <Route exact path={`${match.path}/jobs/ready`} component={ReadyJobs} />
+        <Route path={`${match.path}/jobs/all`} element={<AllJobs />} />
+        <Route path={`${match.path}/jobs/ready`} element={<ReadyJobs />} />
         <Route
-          exact
           path={`${match.path}/jobs/new`}
-          component={JobsCreateContainerPage}
+          element={<JobsCreateContainerPage />}
         />
-        <Route path={`${match.path}/jobs/:jobId`} component={JobsDetailPage} />
+        <Route path={`${match.path}/jobs/:jobId`} element={<JobsDetailPage />} />
       </Routes>
-      <Route exact path={`${match.path}/temporarydocs/`} component={TempDocs} />
+      <Route path={`${match.path}/temporarydocs/`} element={<TempDocs />} />
       <Route
-        exact
         path={`${match.path}/inventory/`}
-        component={InventoryListPage}
+        element={<InventoryListPage />}
       />
       <Route
-        exact
         path={`${match.path}/courtesycars/`}
-        component={CourtesyCarsPage}
+        element={<CourtesyCarsPage />}
       />
       <Routes>
         <Route
-          exact
           path={`${match.path}/courtesycars/new`}
-          component={CourtesyCarCreateContainer}
+          element={<CourtesyCarCreateContainer />}
         />
-
         <Route
-          exact
           path={`${match.path}/courtesycars/contracts`}
-          component={ContractsList}
+          element={<ContractsList />}
         />
-
         <Route
-          exact
           path={`${match.path}/courtesycars/contracts/new`}
-          component={ContractCreatePage}
+          element={<ContractCreatePage />}
         />
         <Route
-          exact
           path={`${match.path}/courtesycars/contracts/:contractId`}
-          component={ContractDetailPage}
+          element={<ContractDetailPage />}
         />
-
         <Route
-          exact
           path={`${match.path}/courtesycars/:ccId`}
-          component={CourtesyCarDetailContainer}
+          element={<CourtesyCarDetailContainer />}
         />
       </Routes>
-      <Route exact path={`${match.path}/profile`} component={ProfilePage} />
+      <Route path={`${match.path}/profile`} element={<ProfilePage />} />
       <Route
-        exact
         path={`${match.path}/vehicles`}
-        component={VehiclesContainer}
+        element={<VehiclesContainer />}
       />
       <Route
-        exact
         path={`${match.path}/production/list`}
-        component={ProductionListPage}
+        element={<ProductionListPage />}
       />
       <Route
-        exact
         path={`${match.path}/production/board`}
-        component={ProductionBoardPage}
+        element={<ProductionBoardPage />}
       />
       <Route
-        exact
         path={`${match.path}/vehicles/:vehId`}
-        component={VehiclesDetailContainer}
+        element={<VehiclesDetailContainer />}
       />
-      <Route exact path={`${match.path}/bills`} component={BillsListPage} />
-      <Route exact path={`${match.path}/owners`} component={OwnersContainer} />
+      <Route path={`${match.path}/bills`} element={<BillsListPage />} />
+      <Route path={`${match.path}/owners`} element={<OwnersContainer />} />
       <Route
-        exact
         path={`${match.path}/owners/:ownerId`}
-        component={OwnersDetailContainer}
+        element={<OwnersDetailContainer />}
       />
       <Route
-        exact
         path={`${match.path}/schedule`}
-        component={ScheduleContainer}
+        element={<ScheduleContainer />}
       />
       <Route
-        exact
         path={`${match.path}/available`}
-        component={JobsAvailablePage}
+        element={<JobsAvailablePage />}
       />
-      <Route exact path={`${match.path}/shop/`} component={ShopPage} />
+      <Route path={`${match.path}/shop/`} element={<ShopPage />} />
       {
         //   <Route
-        // exact
         // path={`${match.path}/shop/templates`}
-        // component={ShopTemplates}
+        // element={<ShopTemplates />}
         //   />
       }
       <Route
-        exact
         path={`${match.path}/shop/vendors`}
-        component={ShopVendorPageContainer}
+        element={<ShopVendorPageContainer />}
       />
       <Route
-        exact
         path={`${match.path}/shop/csi`}
-        component={ShopCsiPageContainer}
+        element={<ShopCsiPageContainer />}
       />
 
       <Route
-        exact
         path={`${match.path}/accounting/qbo`}
-        component={AccountingQboCallback}
+        element={<AccountingQboCallback />}
       />
 
       <Route
-        exact
         path={`${match.path}/accounting/receivables`}
-        component={AccountingReceivables}
+        element={<AccountingReceivables />}
       />
       <Route
-        exact
         path={`${match.path}/accounting/payables`}
-        component={AccountingPayables}
+        element={<AccountingPayables />}
       />
       <Route
-        exact
         path={`${match.path}/accounting/payments`}
-        component={AccountingPayments}
+        element={<AccountingPayments />}
       />
       <Route
-        exact
         path={`${match.path}/accounting/exportlogs`}
-        component={ExportLogs}
+        element={<ExportLogs />}
       />
-      <Route exact path={`${match.path}/partsqueue`} component={PartsQueue} />
-      <Route exact path={`${match.path}/phonebook`} component={Phonebook} />
+      <Route path={`${match.path}/partsqueue`} element={<PartsQueue />} />
+      <Route path={`${match.path}/phonebook`} element={<Phonebook />} />
 
-      <Route exact path={`${match.path}/payments`} component={PaymentsAll} />
-      <Route exact path={`${match.path}/shiftclock`} component={ShiftClock} />
-      <Route exact path={`${match.path}/scoreboard`} component={Scoreboard} />
+      <Route path={`${match.path}/payments`} element={<PaymentsAll />} />
+      <Route path={`${match.path}/shiftclock`} element={<ShiftClock />} />
+      <Route path={`${match.path}/scoreboard`} element={<Scoreboard />} />
       <Route
-        exact
         path={`${match.path}/timetickets`}
-        component={TimeTicketsAll}
+        element={<TimeTicketsAll />}
       />
-      <Route exact path={`${match.path}/help`} component={Help} />
-      <Route exact path={`${match.path}/emailtest`} component={EmailTest} />
-      <Route exact path={`${match.path}/dashboard`} component={Dashboard} />
-      <Route exact path={`${match.path}/dms`} component={Dms} />
-      <Route exact path={`${match.path}/dmsap`} component={DmsPayables} />
+      <Route path={`${match.path}/help`} element={<Help />} />
+      <Route path={`${match.path}/emailtest`} element={<EmailTest />} />
+      <Route path={`${match.path}/dashboard`} element={<Dashboard />} />
+      <Route path={`${match.path}/dms`} element={<Dms />} />
+      <Route path={`${match.path}/dmsap`} element={<DmsPayables />} />
     </Suspense>
   );
 
diff --git a/client/src/pages/parts-queue/parts-queue.page.component.jsx b/client/src/pages/parts-queue/parts-queue.page.component.jsx
index fd6dbef67..0f78d86cd 100644
--- a/client/src/pages/parts-queue/parts-queue.page.component.jsx
+++ b/client/src/pages/parts-queue/parts-queue.page.component.jsx
@@ -6,7 +6,7 @@ import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { Link, useNavigate, useLocation } from "react-router-dom";
+import { Link, useNavigate, useSearchParams } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import AlertComponent from "../../components/alert/alert.component";
 import JobPartsQueueCount from "../../components/job-parts-queue-count/job-parts-queue-count.component";
@@ -25,7 +25,7 @@ const mapStateToProps = createStructuredSelector({
 });
 
 export function PartsQueuePageComponent({ bodyshop }) {
-  const searchParams = queryString.parse(useLocation().search);
+  const searchParams = queryString.parse(useSearchParams().toString());
   const {
     //page,
     sortcolumn,
@@ -104,7 +104,7 @@ export function PartsQueuePageComponent({ bodyshop }) {
       delete searchParams.statusFilters;
     }
     setFilter(filters);
-    history.push({ search: queryString.stringify(searchParams) });
+    history({ search: queryString.stringify(searchParams) });
   };
 
   const columns = [
diff --git a/client/src/pages/payments-all/payments-all.container.page.jsx b/client/src/pages/payments-all/payments-all.container.page.jsx
index 3d3cb6287..a1981d319 100644
--- a/client/src/pages/payments-all/payments-all.container.page.jsx
+++ b/client/src/pages/payments-all/payments-all.container.page.jsx
@@ -3,7 +3,7 @@ import queryString from "query-string";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useLocation } from "react-router-dom";
+import { useSearchParams } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import AlertComponent from "../../components/alert/alert.component";
 import PaymentsListPaginated from "../../components/payments-list-paginated/payment-list-paginated.component";
@@ -26,7 +26,7 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 export function AllJobs({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
-  const searchParams = queryString.parse(useLocation().search);
+  const searchParams = queryString.parse(useSearchParams().toString());
   const { page, sortcolumn, sortorder, searchObj } = searchParams;
 
   const { loading, error, data, refetch } = useQuery(
diff --git a/client/src/pages/phonebook/phonebook.page.component.jsx b/client/src/pages/phonebook/phonebook.page.component.jsx
index 75963f84c..399402d3d 100644
--- a/client/src/pages/phonebook/phonebook.page.component.jsx
+++ b/client/src/pages/phonebook/phonebook.page.component.jsx
@@ -6,7 +6,7 @@ import queryString from "query-string";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import AlertComponent from "../../components/alert/alert.component";
 import { QUERY_PHONEBOOK_PAGINATED } from "../../graphql/phonebook.queries";
@@ -25,7 +25,7 @@ const mapStateToProps = createStructuredSelector({
 });
 
 export function PhonebookPageComponent({ bodyshop, authLevel }) {
-  const searchParams = queryString.parse(useLocation().search);
+  const searchParams = queryString.parse(useSearchParams().toString());
   const { page, sortcolumn, sortorder, search, phonebookentry } = searchParams;
   const history = useNavigate();
 
@@ -66,7 +66,7 @@ export function PhonebookPageComponent({ bodyshop, authLevel }) {
     } else {
       delete searchParams.statusFilters;
     }
-    history.push({ search: queryString.stringify(searchParams) });
+    history({ search: queryString.stringify(searchParams) });
   };
 
   const columns = [
@@ -129,16 +129,16 @@ export function PhonebookPageComponent({ bodyshop, authLevel }) {
 
   const handleNewPhonebook = () => {
     searchParams.phonebookentry = "new";
-    history.push({ search: queryString.stringify(searchParams) });
+    history({ search: queryString.stringify(searchParams) });
   };
 
   const handleOnRowClick = (record) => {
     if (record) {
       searchParams.phonebookentry = record.id;
-      history.push({ search: queryString.stringify(searchParams) });
+      history({ search: queryString.stringify(searchParams) });
     } else {
       delete searchParams.phonebookentry;
-      history.push({ search: queryString.stringify(searchParams) });
+      history({ search: queryString.stringify(searchParams) });
     }
   };
   const hasNoAccess = !HasRbacAccess({
@@ -162,7 +162,7 @@ export function PhonebookPageComponent({ bodyshop, authLevel }) {
                 onClick={() => {
                   delete searchParams.search;
                   searchParams.page = 1;
-                  history.push({ search: queryString.stringify(searchParams) });
+                  history({ search: queryString.stringify(searchParams) });
                 }}
               >
                 {t("general.actions.clear")}
@@ -180,7 +180,7 @@ export function PhonebookPageComponent({ bodyshop, authLevel }) {
             onSearch={(value) => {
               searchParams.search = value;
               searchParams.page = 1;
-              history.push({ search: queryString.stringify(searchParams) });
+              history({ search: queryString.stringify(searchParams) });
             }}
           />
         </Space>
diff --git a/client/src/pages/phonebook/phonebook.page.container.jsx b/client/src/pages/phonebook/phonebook.page.container.jsx
index 129335237..41b0243c7 100644
--- a/client/src/pages/phonebook/phonebook.page.container.jsx
+++ b/client/src/pages/phonebook/phonebook.page.container.jsx
@@ -8,9 +8,9 @@ import {
 } from "../../redux/application/application.actions";
 import PhonebookPage from "./phonebook.page.component";
 import { Drawer, Grid } from "antd";
-import queryString from "query-string";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useSearchParams, useNavigate } from "react-router-dom";
 import PhonebookFormContainer from "../../components/phonebook-form/phonebook-form.container";
+
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
   setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
@@ -29,13 +29,16 @@ export function PhonebookContainer({ setBreadcrumbs, setSelectedHeader }) {
       },
     ]);
   }, [setBreadcrumbs, t, setSelectedHeader]);
-  const search = queryString.parse(useLocation().search);
-  const { phonebookentry } = search;
-  const history = useNavigate();
+
+    const [searchParams] = useSearchParams();
+    const search = Object.fromEntries(searchParams);
+    const { phonebookentry } = search;
+
+    const navigate = useNavigate();
 
   const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
-    .filter((screen) => !!screen[1])
-    .slice(-1)[0];
+      .filter((screen) => !!screen[1])
+      .slice(-1)[0];
 
   const bpoints = {
     xs: "100%",
@@ -46,23 +49,23 @@ export function PhonebookContainer({ setBreadcrumbs, setSelectedHeader }) {
     xxl: "45%",
   };
   const drawerPercentage = selectedBreakpoint
-    ? bpoints[selectedBreakpoint[0]]
-    : "100%";
+      ? bpoints[selectedBreakpoint[0]]
+      : "100%";
 
   return (
-    <RbacWrapper action="phonebook:view">
-      <PhonebookPage />
-      <Drawer
-        width={drawerPercentage}
-        onClose={() => {
-          delete search.phonebookentry;
-          history.push({ search: queryString.stringify(search) });
-        }}
-        visible={phonebookentry}
-      >
-        <PhonebookFormContainer />
-      </Drawer>
-    </RbacWrapper>
+      <RbacWrapper action="phonebook:view">
+        <PhonebookPage />
+        <Drawer
+            width={drawerPercentage}
+            onClose={() => {
+              searchParams.delete("phonebookentry");
+              navigate({ search: searchParams.toString() });
+            }}
+            visible={phonebookentry}
+        >
+          <PhonebookFormContainer />
+        </Drawer>
+      </RbacWrapper>
   );
 }
-export default connect(null, mapDispatchToProps)(PhonebookContainer);
+export default connect(null, mapDispatchToProps)(PhonebookContainer);
\ No newline at end of file
diff --git a/client/src/pages/reset-password/reset-password.component.jsx b/client/src/pages/reset-password/reset-password.component.jsx
index 90a11c226..a9b9f42c3 100644
--- a/client/src/pages/reset-password/reset-password.component.jsx
+++ b/client/src/pages/reset-password/reset-password.component.jsx
@@ -1,14 +1,13 @@
-import queryString from "query-string";
 import React from "react";
-import { useLocation } from "react-router-dom";
+import { useSearchParams } from "react-router-dom";
 import UserRequestResetPw from "../../components/user-request-pw-reset/user-request-reset-pw.component";
 import UserValidatePwReset from "../../components/user-validate-pw-reset/user-validate-pw-reset.component";
 
 export default function ResetPassword() {
-  const searchParams = queryString.parse(useLocation().search);
-  const { mode, oobCode } = searchParams;
+  const [searchParams] = useSearchParams();
+  const { mode, oobCode } = Object.fromEntries(searchParams);
 
   if (mode === "resetPassword")
     return <UserValidatePwReset oobCode={oobCode} />;
   return <UserRequestResetPw />;
-}
+}
\ No newline at end of file
diff --git a/client/src/pages/scoreboard/scoreboard.page.container.jsx b/client/src/pages/scoreboard/scoreboard.page.container.jsx
index c181c55df..6d822a570 100644
--- a/client/src/pages/scoreboard/scoreboard.page.container.jsx
+++ b/client/src/pages/scoreboard/scoreboard.page.container.jsx
@@ -1,12 +1,9 @@
 import Icon, { FieldTimeOutlined } from "@ant-design/icons";
 import { Tabs } from "antd";
-import queryString from "query-string";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { FaShieldAlt } from "react-icons/fa";
 import { connect } from "react-redux";
-import { useNavigate, useLocation } from "react-router-dom";
-import { createStructuredSelector } from "reselect";
 import FeatureWrapper from "../../components/feature-wrapper/feature-wrapper.component";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import ScoreboardDisplay from "../../components/scoreboard-display/scoreboard-display.component";
@@ -17,6 +14,8 @@ import {
   setSelectedHeader,
 } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import {createStructuredSelector} from "reselect";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -29,9 +28,9 @@ const mapDispatchToProps = (dispatch) => ({
 
 export function ScoreboardContainer({ setBreadcrumbs, setSelectedHeader }) {
   const { t } = useTranslation();
-  const searchParams = queryString.parse(useLocation().search);
-  const { tab } = searchParams;
-  const history = useNavigate();
+  const [searchParams] = useSearchParams();
+  const { tab } = Object.fromEntries(searchParams);
+  const navigate = useNavigate();
   useEffect(() => {
     document.title = t("titles.scoreboard");
     setSelectedHeader("scoreboard");
@@ -44,60 +43,58 @@ export function ScoreboardContainer({ setBreadcrumbs, setSelectedHeader }) {
   }, [t, setBreadcrumbs, setSelectedHeader]);
 
   return (
-    <FeatureWrapper featureName="scoreboard">
-      <RbacWrapper action="scoreboard:view">
-        <Tabs
-          activeKey={tab || "sb"}
-          destroyInactiveTabPane
-          onChange={(key) => {
-            searchParams.tab = key;
-            history.push({
-              search: queryString.stringify(searchParams),
-            });
-          }}
-        >
-          <Tabs.TabPane
-            tab={
-              <span>
+      <FeatureWrapper featureName="scoreboard">
+        <RbacWrapper action="scoreboard:view">
+          <Tabs
+              activeKey={tab || "sb"}
+              destroyInactiveTabPane
+              onChange={(key) => {
+                searchParams.set("tab", key);
+                navigate({ search: searchParams.toString() });
+              }}
+          >
+            <Tabs.TabPane
+                tab={
+                  <span>
                 <Icon component={FaShieldAlt} />
-                {t("scoreboard.labels.jobs")}
+                    {t("scoreboard.labels.jobs")}
               </span>
-            }
-            destroyInactiveTabPane
-            key="sb"
-          >
-            <ScoreboardDisplay />
-          </Tabs.TabPane>
-          <Tabs.TabPane
-            tab={
-              <span>
+                }
+                destroyInactiveTabPane
+                key="sb"
+            >
+              <ScoreboardDisplay />
+            </Tabs.TabPane>
+            <Tabs.TabPane
+                tab={
+                  <span>
                 <FieldTimeOutlined />
-                {t("scoreboard.labels.timeticketsemployee")}
+                    {t("scoreboard.labels.timeticketsemployee")}
               </span>
-            }
-            destroyInactiveTabPane
-            key="tickets"
-          >
-            <ScoreboardTimeTickets />
-          </Tabs.TabPane>
-          <Tabs.TabPane
-            tab={
-              <span>
+                }
+                destroyInactiveTabPane
+                key="tickets"
+            >
+              <ScoreboardTimeTickets />
+            </Tabs.TabPane>
+            <Tabs.TabPane
+                tab={
+                  <span>
                 <FieldTimeOutlined />
-                {t("scoreboard.labels.allemployeetimetickets")}
+                    {t("scoreboard.labels.allemployeetimetickets")}
               </span>
-            }
-            destroyInactiveTabPane
-            key="ticketsstats"
-          >
-            <ScoreboardTimeTicketsStats />
-          </Tabs.TabPane>
-        </Tabs>
-      </RbacWrapper>
-    </FeatureWrapper>
+                }
+                destroyInactiveTabPane
+                key="ticketsstats"
+            >
+              <ScoreboardTimeTicketsStats />
+            </Tabs.TabPane>
+          </Tabs>
+        </RbacWrapper>
+      </FeatureWrapper>
   );
 }
 export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(ScoreboardContainer);
+    mapStateToProps,
+    mapDispatchToProps
+)(ScoreboardContainer);
\ No newline at end of file
diff --git a/client/src/pages/shop-csi/shop-csi.container.page.jsx b/client/src/pages/shop-csi/shop-csi.container.page.jsx
index f0c295685..646a573a8 100644
--- a/client/src/pages/shop-csi/shop-csi.container.page.jsx
+++ b/client/src/pages/shop-csi/shop-csi.container.page.jsx
@@ -1,22 +1,19 @@
 import { Row, Col } from "antd";
 import { useQuery } from "@apollo/client";
-import queryString from "query-string";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useLocation } from "react-router-dom";
+import { useSearchParams } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import AlertComponent from "../../components/alert/alert.component";
 import CsiResponseFormContainer from "../../components/csi-response-form/csi-response-form.container";
 import CsiResponseListPaginated from "../../components/csi-response-list-paginated/csi-response-list-paginated.component";
 import { QUERY_CSI_RESPONSE_PAGINATED } from "../../graphql/csi.queries";
-import {
-  setBreadcrumbs,
-  setSelectedHeader,
-} from "../../redux/application/application.actions";
+import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
-import {pageLimit} from "../../utils/config";
+import { pageLimit } from "../../utils/config";
+
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
 });
@@ -26,36 +23,30 @@ const mapDispatchToProps = (dispatch) => ({
   setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
 });
 
-export function ShopCsiContainer({
-  bodyshop,
-  setBreadcrumbs,
-  setSelectedHeader,
-}) {
+export function ShopCsiContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
   const { t } = useTranslation();
-
-  const searchParams = queryString.parse(useLocation().search);
-  const { page, sortcolumn, sortorder } = searchParams;
+  const [searchParams] = useSearchParams();
+  const { page, sortcolumn, sortorder } = Object.fromEntries(searchParams);
 
   const { loading, error, data, refetch } = useQuery(
-    QUERY_CSI_RESPONSE_PAGINATED,
-    {
-      fetchPolicy: "network-only",
-      nextFetchPolicy: "network-only",
-      variables: {
-        //search: search || "",
-        offset: page ? (page - 1) * pageLimit : 0,
-        limit: pageLimit,
-        order: [
-          {
-            [sortcolumn || "completedon"]: sortorder
-              ? sortorder === "descend"
-                ? "desc_nulls_last"
-                : "asc"
-              : "desc_nulls_last",
-          },
-        ],
-      },
-    }
+      QUERY_CSI_RESPONSE_PAGINATED,
+      {
+        fetchPolicy: "network-only",
+        nextFetchPolicy: "network-only",
+        variables: {
+          offset: page ? (page - 1) * pageLimit : 0,
+          limit: pageLimit,
+          order: [
+            {
+              [sortcolumn || "completedon"]: sortorder
+                  ? sortorder === "descend"
+                      ? "desc_nulls_last"
+                      : "asc"
+                  : "desc_nulls_last",
+            },
+          ],
+        },
+      }
   );
 
   useEffect(() => {
@@ -73,26 +64,21 @@ export function ShopCsiContainer({
   if (error) return <AlertComponent message={error.message} type="error" />;
 
   return (
-    <RbacWrapper
-      action="csi:page"
-      // noauth={
-      //   <AlertComponent message="You don't have acess to see this screen." />
-      // }
-    >
-      <Row gutter={16}>
-        <Col span={10}>
-          <CsiResponseListPaginated
-            refetch={refetch}
-            loading={loading}
-            responses={data ? data.csi : []}
-            total={data ? data.csi_aggregate.aggregate.count : 0}
-          />
-        </Col>
-        <Col span={14}>
-          <CsiResponseFormContainer />
-        </Col>
-      </Row>
-    </RbacWrapper>
+      <RbacWrapper action="csi:page">
+        <Row gutter={16}>
+          <Col span={10}>
+            <CsiResponseListPaginated
+                refetch={refetch}
+                loading={loading}
+                responses={data ? data.csi : []}
+                total={data ? data.csi_aggregate.aggregate.count : 0}
+            />
+          </Col>
+          <Col span={14}>
+            <CsiResponseFormContainer />
+          </Col>
+        </Row>
+      </RbacWrapper>
   );
 }
-export default connect(mapStateToProps, mapDispatchToProps)(ShopCsiContainer);
+export default connect(mapStateToProps, mapDispatchToProps)(ShopCsiContainer);
\ No newline at end of file
diff --git a/client/src/pages/shop-vendor/shop-vendor.page.component.jsx b/client/src/pages/shop-vendor/shop-vendor.page.component.jsx
index dafa7ffbe..00acb0ff6 100644
--- a/client/src/pages/shop-vendor/shop-vendor.page.component.jsx
+++ b/client/src/pages/shop-vendor/shop-vendor.page.component.jsx
@@ -1,45 +1,44 @@
 import { Drawer, Grid } from "antd";
-import queryString from "query-string";
 import React from "react";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import VendorsFormContainer from "../../components/vendors-form/vendors-form.container";
 import VendorsListContainer from "../../components/vendors-list/vendors-list.container";
 
 export default function ShopVendorPageComponent() {
-  const search = queryString.parse(useLocation().search);
-  const { selectedvendor } = search;
-  const history = useNavigate();
+    const [searchParams] = useSearchParams();
+    const { selectedvendor } = Object.fromEntries(searchParams);
+    const navigate = useNavigate();
 
-  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
-    .filter((screen) => !!screen[1])
-    .slice(-1)[0];
+    const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
+        .filter((screen) => !!screen[1])
+        .slice(-1)[0];
 
-  const bpoints = {
-    xs: "100%",
-    sm: "100%",
-    md: "100%",
-    lg: "50%",
-    xl: "50%",
-    xxl: "45%",
-  };
-  const drawerPercentage = selectedBreakpoint
-    ? bpoints[selectedBreakpoint[0]]
-    : "100%";
+    const bpoints = {
+        xs: "100%",
+        sm: "100%",
+        md: "100%",
+        lg: "50%",
+        xl: "50%",
+        xxl: "45%",
+    };
+    const drawerPercentage = selectedBreakpoint
+        ? bpoints[selectedBreakpoint[0]]
+        : "100%";
 
-  return (
-    <div>
-      <VendorsListContainer />
+    return (
+        <div>
+            <VendorsListContainer />
 
-      <Drawer
-        width={drawerPercentage}
-        onClose={() => {
-          delete search.selectedvendor;
-          history.push({ search: queryString.stringify(search) });
-        }}
-        visible={selectedvendor}
-      >
-        <VendorsFormContainer />
-      </Drawer>
-    </div>
-  );
-}
+            <Drawer
+                width={drawerPercentage}
+                onClose={() => {
+                    searchParams.delete("selectedvendor");
+                    navigate({ search: searchParams.toString() });
+                }}
+                visible={selectedvendor}
+            >
+                <VendorsFormContainer />
+            </Drawer>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/client/src/pages/shop/shop.page.component.jsx b/client/src/pages/shop/shop.page.component.jsx
index 0ce020a54..3c14f3c99 100644
--- a/client/src/pages/shop/shop.page.component.jsx
+++ b/client/src/pages/shop/shop.page.component.jsx
@@ -1,7 +1,6 @@
 import { Tabs } from "antd";
 import React, { useEffect } from "react";
-import { useNavigate, useLocation } from "react-router-dom";
-import queryString from "query-string";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import ShopEmployeesContainer from "../../components/shop-employees/shop-employees.container";
 import ShopInfoContainer from "../../components/shop-info/shop-info.container";
@@ -26,8 +25,9 @@ const mapDispatchToProps = (dispatch) => ({
 
 export function ShopPage({ bodyshop, setSelectedHeader, setBreadcrumbs }) {
   const { t } = useTranslation();
-  const history = useNavigate();
-  const search = queryString.parse(useLocation().search);
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const { tab } = Object.fromEntries(searchParams);
 
   useEffect(() => {
     document.title = t("titles.shop");
@@ -41,29 +41,32 @@ export function ShopPage({ bodyshop, setSelectedHeader, setBreadcrumbs }) {
   }, [t, setSelectedHeader, setBreadcrumbs, bodyshop.shopname]);
 
   useEffect(() => {
-    if (!search.tab) history.push({ search: "?tab=info" });
-  }, [history, search]);
+    if (!tab) navigate({ search: "?tab=info" });
+  }, [navigate, tab]);
 
   return (
-    <RbacWrapper action="shop:config">
-      <Tabs
-        defaultActiveKey={search.tab}
-        onChange={(key) => history.push({ search: `?tab=${key}` })}
-      >
-        <Tabs.TabPane tab={t("bodyshop.labels.shopinfo")} key="info">
-          <ShopInfoContainer />
-        </Tabs.TabPane>
-        <Tabs.TabPane tab={t("bodyshop.labels.employees")} key="employees">
-          <ShopEmployeesContainer />
-        </Tabs.TabPane>
-        <Tabs.TabPane tab={t("bodyshop.labels.licensing")} key="licensing">
-          <ShopInfoUsersComponent />
-        </Tabs.TabPane>
-        <Tabs.TabPane tab={t("bodyshop.labels.csiq")} key="csiq">
-          <ShopCsiConfig />
-        </Tabs.TabPane>
-      </Tabs>
-    </RbacWrapper>
+      <RbacWrapper action="shop:config">
+        <Tabs
+            defaultActiveKey={tab}
+            onChange={(key) => {
+              searchParams.set("tab", key);
+              navigate({ search: searchParams.toString() });
+            }}
+        >
+          <Tabs.TabPane tab={t("bodyshop.labels.shopinfo")} key="info">
+            <ShopInfoContainer />
+          </Tabs.TabPane>
+          <Tabs.TabPane tab={t("bodyshop.labels.employees")} key="employees">
+            <ShopEmployeesContainer />
+          </Tabs.TabPane>
+          <Tabs.TabPane tab={t("bodyshop.labels.licensing")} key="licensing">
+            <ShopInfoUsersComponent />
+          </Tabs.TabPane>
+          <Tabs.TabPane tab={t("bodyshop.labels.csiq")} key="csiq">
+            <ShopCsiConfig />
+          </Tabs.TabPane>
+        </Tabs>
+      </RbacWrapper>
   );
 }
-export default connect(mapStateToProps, mapDispatchToProps)(ShopPage);
+export default connect(mapStateToProps, mapDispatchToProps)(ShopPage);
\ No newline at end of file
diff --git a/client/src/pages/tech/tech.page.component.jsx b/client/src/pages/tech/tech.page.component.jsx
index cdf0d6e1b..a5db31778 100644
--- a/client/src/pages/tech/tech.page.component.jsx
+++ b/client/src/pages/tech/tech.page.component.jsx
@@ -14,29 +14,29 @@ import UpdateAlert from "../../components/update-alert/update-alert.component";
 import { selectTechnician } from "../../redux/tech/tech.selectors";
 import "./tech.page.styles.scss";
 const TimeTicketModalContainer = lazy(() =>
-  import("../../components/time-ticket-modal/time-ticket-modal.container")
+    import("../../components/time-ticket-modal/time-ticket-modal.container")
 );
 const EmailOverlayContainer = lazy(() =>
-  import("../../components/email-overlay/email-overlay.container.jsx")
+    import("../../components/email-overlay/email-overlay.container.jsx")
 );
 const PrintCenterModalContainer = lazy(() =>
-  import("../../components/print-center-modal/print-center-modal.container")
+    import("../../components/print-center-modal/print-center-modal.container")
 );
 const TechLogin = lazy(() =>
-  import("../../components/tech-login/tech-login.component")
+    import("../../components/tech-login/tech-login.component")
 );
 const TechLookup = lazy(() => import("../tech-lookup/tech-lookup.container"));
 const ProductionListPage = lazy(() =>
-  import("../production-list/production-list.container")
+    import("../production-list/production-list.container")
 );
 const ProductionBoardPage = lazy(() =>
-  import("../production-board/production-board.container")
+    import("../production-board/production-board.container")
 );
 const TechJobClock = lazy(() =>
-  import("../tech-job-clock/tech-job-clock.component")
+    import("../tech-job-clock/tech-job-clock.component")
 );
 const TechShiftClock = lazy(() =>
-  import("../tech-shift-clock/tech-shift-clock.component")
+    import("../tech-shift-clock/tech-shift-clock.component")
 );
 
 const { Content } = Layout;
@@ -56,66 +56,41 @@ export function TechPage({ technician, match }) {
     document.title = t("titles.app");
   }, [t]);
 
-  if (!technician) return navigate(`${match.path}/login`
-  );
   return (
-    <Layout className="tech-layout-container">
-      <TechSider />
-      <Layout>
-        <UpdateAlert />
-        <TechHeader />
+      <Layout className="tech-layout-container">
+        <TechSider />
+        <Layout>
+          {technician ? null : navigate(`${match.path}/login`)}
+          <UpdateAlert />
+          <TechHeader />
 
-        <Content className="tech-content-container">
-          <ErrorBoundary>
-            <Suspense
-              fallback={
-                <LoadingSpinner message={t("general.labels.loadingapp")} />
-              }
-            >
-              <FeatureWrapper featureName="tech-console">
-                <TimeTicketModalContainer />
-                <EmailOverlayContainer />
-                <PrintCenterModalContainer />
-                <Routes>
-                  <Route
-                    exact
-                    path={`${match.path}/login`}
-                    component={TechLogin}
-                  />
-                  <Route
-                    exact
-                    path={`${match.path}/joblookup`}
-                    component={TechLookup}
-                  />
-                  <Route
-                    exact
-                    path={`${match.path}/list`}
-                    component={ProductionListPage}
-                  />
-                  <Route
-                    exact
-                    path={`${match.path}/jobclock`}
-                    component={TechJobClock}
-                  />
-                  <Route
-                    exact
-                    path={`${match.path}/shiftclock`}
-                    component={TechShiftClock}
-                  />
-                  <Route
-                    exact
-                    path={`${match.path}/board`}
-                    component={ProductionBoardPage}
-                  />
-                </Routes>
-              </FeatureWrapper>
-            </Suspense>
-          </ErrorBoundary>
+          <Content className="tech-content-container">
+            <ErrorBoundary>
+              <Suspense
+                  fallback={
+                    <LoadingSpinner message={t("general.labels.loadingapp")} />
+                  }
+              >
+                <FeatureWrapper featureName="tech-console">
+                  <TimeTicketModalContainer />
+                  <EmailOverlayContainer />
+                  <PrintCenterModalContainer />
+                  <Routes>
+                    <Route path={`${match.path}/login`} element={<TechLogin />} />
+                    <Route path={`${match.path}/joblookup`} element={<TechLookup />} />
+                    <Route path={`${match.path}/list`} element={<ProductionListPage />} />
+                    <Route path={`${match.path}/jobclock`} element={<TechJobClock />} />
+                    <Route path={`${match.path}/shiftclock`} element={<TechShiftClock />} />
+                    <Route path={`${match.path}/board`} element={<ProductionBoardPage />} />
+                  </Routes>
+                </FeatureWrapper>
+              </Suspense>
+            </ErrorBoundary>
 
-          <BackTop />
-        </Content>
+            <BackTop />
+          </Content>
+        </Layout>
       </Layout>
-    </Layout>
   );
 }
-export default connect(mapStateToProps, mapDispatchToProps)(TechPage);
+export default connect(mapStateToProps, mapDispatchToProps)(TechPage);
\ No newline at end of file
diff --git a/client/src/pages/time-tickets/time-tickets.container.jsx b/client/src/pages/time-tickets/time-tickets.container.jsx
index 03cfdda50..bb9f6c2d1 100644
--- a/client/src/pages/time-tickets/time-tickets.container.jsx
+++ b/client/src/pages/time-tickets/time-tickets.container.jsx
@@ -1,11 +1,10 @@
 import { useQuery } from "@apollo/client";
 import { Col, Row, Space } from "antd";
 import moment from "moment";
-import queryString from "query-string";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useLocation } from "react-router-dom";
+import { useSearchParams } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import AlertComponent from "../../components/alert/alert.component";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
@@ -28,28 +27,17 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 export function TimeTicketsContainer({
-  bodyshop,
-  setBreadcrumbs,
-  setSelectedHeader,
-}) {
+                                       bodyshop,
+                                       setBreadcrumbs,
+                                       setSelectedHeader,
+                                     }) {
   const { t } = useTranslation();
-  useEffect(() => {
-    document.title = t("titles.timetickets");
-    setSelectedHeader("timetickets");
-    setBreadcrumbs([
-      {
-        link: "/manage/timetickets",
-        label: t("titles.bc.timetickets"),
-      },
-    ]);
-  }, [t, setBreadcrumbs, setSelectedHeader]);
-
-  const searchParams = queryString.parse(useLocation().search);
-  const { start, end } = searchParams;
+  const [searchParams] = useSearchParams();
+  const { start, end } = Object.fromEntries(searchParams);
 
   const startDate = start
-    ? moment(start)
-    : moment().startOf("week").subtract(7, "days");
+      ? moment(start)
+      : moment().startOf("week").subtract(7, "days");
   const endDate = end ? moment(end) : moment().endOf("week");
 
   const { loading, error, data } = useQuery(QUERY_TIME_TICKETS_IN_RANGE, {
@@ -61,38 +49,49 @@ export function TimeTicketsContainer({
     nextFetchPolicy: "network-only",
   });
 
+  useEffect(() => {
+    document.title = t("titles.timetickets");
+    setSelectedHeader("timetickets");
+    setBreadcrumbs([
+      {
+        link: "/manage/timetickets",
+        label: t("titles.bc.timetickets"),
+      },
+    ]);
+  }, [t, setBreadcrumbs, setSelectedHeader]);
+
   if (error) return <AlertComponent message={error.message} type="error" />;
 
   return (
-    <RbacWrapper action="timetickets:list">
-      <Row gutter={[16, 16]}>
-        <Col span={24}>
-          <TimeTicketList
-            loading={loading}
-            timetickets={data ? data.timetickets : []}
-            extra={
-              <Space wrap>
-                <TimeTicketsAttendanceTable />
-                <TimeTicketsPayrollTable />
-                <TimeTicketsDatesSelector />
-              </Space>
-            }
-          />
-        </Col>
-        <Col span={24}>
-          <TimeTicketsSummaryEmployees
-            loading={loading}
-            timetickets={data ? data.timetickets : []}
-            startDate={startDate}
-            endDate={endDate}
-          />
-        </Col>
-      </Row>
-    </RbacWrapper>
+      <RbacWrapper action="timetickets:list">
+        <Row gutter={[16, 16]}>
+          <Col span={24}>
+            <TimeTicketList
+                loading={loading}
+                timetickets={data ? data.timetickets : []}
+                extra={
+                  <Space wrap>
+                    <TimeTicketsAttendanceTable />
+                    <TimeTicketsPayrollTable />
+                    <TimeTicketsDatesSelector />
+                  </Space>
+                }
+            />
+          </Col>
+          <Col span={24}>
+            <TimeTicketsSummaryEmployees
+                loading={loading}
+                timetickets={data ? data.timetickets : []}
+                startDate={startDate}
+                endDate={endDate}
+            />
+          </Col>
+        </Row>
+      </RbacWrapper>
   );
 }
 
 export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(TimeTicketsContainer);
+    mapStateToProps,
+    mapDispatchToProps
+)(TimeTicketsContainer);
\ No newline at end of file
diff --git a/client/src/utils/private-route.js b/client/src/utils/private-route.js
index 13b7c837d..5108c7507 100644
--- a/client/src/utils/private-route.js
+++ b/client/src/utils/private-route.js
@@ -1,20 +1,21 @@
-import React from "react";
-import { useNavigate, Route, useLocation } from "react-router-dom";
+import React, { useEffect } from 'react';
+import { Outlet, useSearchParams, useNavigate } from 'react-router-dom';
 
-function PrivateRoute({ component: Component, isAuthorized, ...rest }) {
-  const location = useLocation();
-    const navigate = useNavigate();
+const PrivateRoute = ({ isAuthorized }) => {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
 
-  if (!isAuthorized) {
-    navigate(`/signin?redirect=${location.pathname}`);
-  }
-  return (
-    <Route
-      {...rest}
-      render={(props) => <Component {...props} />
-      }
-    />
-  );
+  useEffect(() => {
+    if (!isAuthorized) {
+      console.log('is not authorized');
+      searchParams.set("redirect", window.location.pathname);
+      navigate(`/signin?${searchParams.toString()}`);
+    } else {
+      console.log('isAuthorized');
+    }
+  }, [isAuthorized, navigate, searchParams]);
+
+  return <Outlet />;
 }
 
-export default PrivateRoute;
+export default PrivateRoute;
\ No newline at end of file
diff --git a/client/src/utils/prompt.js b/client/src/utils/prompt.js
index 718029f73..0d60f0911 100644
--- a/client/src/utils/prompt.js
+++ b/client/src/utils/prompt.js
@@ -15,4 +15,22 @@ function Prompt(props) {
     )
 }
 
-export default Prompt
\ No newline at end of file
+export default Prompt
+
+
+// Potential new solution:
+// import { useBlocker } from 'react-router-dom';
+//
+// function Prompt({ when, message }) {
+//     useBlocker((transition) => {
+//         if (when) {
+//             transition.retry();
+//             return !window.confirm(message);
+//         }
+//         return false;
+//     }, when);
+//
+//     return null;
+// }
+//
+// export default Prompt;
\ No newline at end of file