diff --git a/src/client/src/App.tsx b/src/client/src/App.tsx
index 088461255..936bc7bc6 100644
--- a/src/client/src/App.tsx
+++ b/src/client/src/App.tsx
@@ -5,7 +5,7 @@ import { ReactQueryDevtools } from "react-query/devtools";
 import { ThemeProvider } from "@mui/material/styles";
 import { theme } from "./AppTheme";
 import OverviewPage from "./pages/overview/overviewPage";
-import SettingCmp from "./pages/settings/settingsPage";
+import SettingsPage from "./pages/settings/settingsPage";
 import { DataLoader } from "./pages/settings/dataLoader";
 import AcceptTerms from "./term/accept";
 import { AlertProvider } from "./components/alert/alertContext";
@@ -15,6 +15,9 @@ import { PromptProvider } from "./components/prompt/promptContext.tsx";
 import { Prompt } from "./components/prompt/prompt.tsx";
 import { BasemapProvider } from "./components/basemapSelector/basemapContext.tsx";
 import { FilterProvider } from "./pages/overview/sidePanelContent/filter/filterContext.tsx";
+import HeaderComponent from "./components/header/headerComponent.tsx";
+import { AppBox } from "./components/styledComponents";
+import { DetailPage } from "./pages/detail/detailPage.tsx";
 
 const queryClient = new QueryClient();
 
@@ -48,28 +51,32 @@ class App extends React.Component {
                   <BasemapProvider>
                     <FilterProvider>
                       <QueryClientProvider client={queryClient}>
-                        <Router>
-                          <Switch>
-                            <Route render={props => <SettingCmp {...props} />} key={1} path={"/setting"} />
-                            <Route
-                              render={props => {
-                                return <OverviewPage {...props} />;
-                              }}
-                              exact={false}
-                              key={0}
-                              path={"/"}
-                            />
-                            <Route
-                              component={() => (
-                                <Redirect
-                                  to={{
-                                    pathname: "/",
-                                  }}
-                                />
-                              )}
-                            />
-                          </Switch>
-                        </Router>
+                        <AppBox>
+                          <HeaderComponent />
+                          <Router>
+                            <Switch>
+                              <Route render={props => <SettingsPage {...props} />} key={0} path={"/setting"} />
+                              <Route exact={false} key={1} path={"/:id"} render={() => <DetailPage />} />
+                              <Route
+                                render={props => {
+                                  return <OverviewPage {...props} />;
+                                }}
+                                exact={false}
+                                key={2}
+                                path={"/"}
+                              />
+                              <Route
+                                component={() => (
+                                  <Redirect
+                                    to={{
+                                      pathname: "/",
+                                    }}
+                                  />
+                                )}
+                              />
+                            </Switch>
+                          </Router>
+                        </AppBox>
                         <ReactQueryDevtools />
                       </QueryClientProvider>
                     </FilterProvider>
diff --git a/src/client/src/components/styledComponents.js b/src/client/src/components/styledComponents.js
index d24018b6e..98821c73e 100644
--- a/src/client/src/components/styledComponents.js
+++ b/src/client/src/components/styledComponents.js
@@ -24,6 +24,12 @@ export const TypographyWithBottomMargin = styled(Typography)(() => ({
   marginBottom: "1em",
 }));
 
+export const AppBox = styled(Box)({
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+});
+
 export const LayoutBox = styled(Box)({ flex: "1 1 100%", display: "flex", flexDirection: "row", overflow: "hidden" });
 
 export const SidebarBox = styled(Box)(() => ({
diff --git a/src/client/src/pages/detail/detailPage.tsx b/src/client/src/pages/detail/detailPage.tsx
index dd67926cf..528fe2337 100644
--- a/src/client/src/pages/detail/detailPage.tsx
+++ b/src/client/src/pages/detail/detailPage.tsx
@@ -1,7 +1,7 @@
 import { LayoutBox, MainContentBox, SidebarBox } from "../../components/styledComponents.js";
 import { FC } from "react";
 import DetailSideNav from "./detailSideNav";
-import BoreholeForm from "./form/borehole/boreholeForm";
+import DetailPageContent from "./detailPageContent";
 import DetailHeader from "./detailHeader.tsx";
 
 export const DetailPage: FC = () => {
@@ -13,7 +13,7 @@ export const DetailPage: FC = () => {
           <DetailSideNav />
         </SidebarBox>
         <MainContentBox>
-          <BoreholeForm />
+          <DetailPageContent />
         </MainContentBox>
       </LayoutBox>
     </>
diff --git a/src/client/src/pages/detail/form/borehole/boreholeForm.jsx b/src/client/src/pages/detail/detailPageContent.jsx
similarity index 90%
rename from src/client/src/pages/detail/form/borehole/boreholeForm.jsx
rename to src/client/src/pages/detail/detailPageContent.jsx
index c9e4ed9da..24880e321 100644
--- a/src/client/src/pages/detail/form/borehole/boreholeForm.jsx
+++ b/src/client/src/pages/detail/detailPageContent.jsx
@@ -4,28 +4,28 @@ import { connect } from "react-redux";
 import { withTranslation } from "react-i18next";
 import _ from "lodash";
 import { Redirect, Route, Switch, withRouter } from "react-router-dom";
-import { loadBorehole, patchBorehole, updateBorehole } from "../../../../api-lib";
-import EditorBoreholeFilesTable from "../../attachments/table/editorBoreholeFilesTable.tsx";
-import TranslationText from "../../../../components/legacyComponents/translationText.jsx";
+import { loadBorehole, patchBorehole, updateBorehole } from "../../api-lib";
+import EditorBoreholeFilesTable from "./attachments/table/editorBoreholeFilesTable.tsx";
+import TranslationText from "../../components/legacyComponents/translationText.jsx";
 import { Dimmer, Loader } from "semantic-ui-react";
-import Lithology from "../stratigraphy/lithology";
-import IdentifierSegment from "../location/indentifierSegment.jsx";
-import NameSegment from "../location/nameSegment.jsx";
-import RestrictionSegment from "../location/restrictionSegment.jsx";
-import BoreholePanel from "./boreholePanel.jsx";
-import LocationSegment from "../location/locationSegment.jsx";
-import WaterIngress from "../hydrogeology/waterIngress.jsx";
-import GroundwaterLevelMeasurement from "../hydrogeology/groundwaterLevelMeasurement.jsx";
-import Hydrotest from "../hydrogeology/hydrotest.jsx";
-import FieldMeasurement from "../hydrogeology/fieldMeasurement.jsx";
-import ChronostratigraphyPanel from "../stratigraphy/chronostratigraphy/chronostratigraphyPanel.jsx";
-import LithostratigraphyPanel from "../stratigraphy/lithostratigraphy/lithostratigraphyPanel.jsx";
-import Completion from "../completion/completion.jsx";
+import Lithology from "./form/stratigraphy/lithology";
+import IdentifierSegment from "./form/location/indentifierSegment.jsx";
+import NameSegment from "./form/location/nameSegment.jsx";
+import RestrictionSegment from "./form/location/restrictionSegment.jsx";
+import BoreholePanel from "./form/borehole/boreholePanel.jsx";
+import LocationSegment from "./form/location/locationSegment.jsx";
+import WaterIngress from "./form/hydrogeology/waterIngress.jsx";
+import GroundwaterLevelMeasurement from "./form/hydrogeology/groundwaterLevelMeasurement.jsx";
+import Hydrotest from "./form/hydrogeology/hydrotest.jsx";
+import FieldMeasurement from "./form/hydrogeology/fieldMeasurement.jsx";
+import ChronostratigraphyPanel from "./form/stratigraphy/chronostratigraphy/chronostratigraphyPanel.jsx";
+import LithostratigraphyPanel from "./form/stratigraphy/lithostratigraphy/lithostratigraphyPanel.jsx";
+import Completion from "./form/completion/completion.jsx";
 import { Box } from "@mui/material";
-import WorkflowForm from "../workflow/workflowForm.jsx";
-import { AlertContext } from "../../../../components/alert/alertContext";
+import WorkflowForm from "./form/workflow/workflowForm.jsx";
+import { AlertContext } from "../../components/alert/alertContext";
 
-class BoreholeForm extends React.Component {
+class DetailPageContent extends React.Component {
   static contextType = AlertContext;
 
   constructor(props) {
@@ -417,7 +417,7 @@ class BoreholeForm extends React.Component {
   }
 }
 
-BoreholeForm.propTypes = {
+DetailPageContent.propTypes = {
   borehole: PropTypes.object,
   getBorehole: PropTypes.func,
   id: PropTypes.number,
@@ -431,7 +431,7 @@ BoreholeForm.propTypes = {
   workflow: PropTypes.object,
 };
 
-BoreholeForm.defaultProps = {
+DetailPageContent.defaultProps = {
   id: undefined,
 };
 
@@ -457,6 +457,6 @@ const mapDispatchToProps = dispatch => {
 };
 
 const ConnectedBoreholeForm = withRouter(
-  connect(mapStateToProps, mapDispatchToProps)(withTranslation(["common"])(BoreholeForm)),
+  connect(mapStateToProps, mapDispatchToProps)(withTranslation(["common"])(DetailPageContent)),
 );
 export default ConnectedBoreholeForm;
diff --git a/src/client/src/pages/overview/overviewPage.jsx b/src/client/src/pages/overview/overviewPage.jsx
index 7142e9bf5..d24ce2cd0 100644
--- a/src/client/src/pages/overview/overviewPage.jsx
+++ b/src/client/src/pages/overview/overviewPage.jsx
@@ -1,5 +1,5 @@
 import { useContext, useEffect, useState } from "react";
-import { Route, Switch, useLocation, withRouter } from "react-router-dom";
+import { useLocation, withRouter } from "react-router-dom";
 import MainSideNav from "./layout/mainSideNav.tsx";
 import MapView from "./layout/mapView.jsx";
 import { SideDrawer } from "./layout/sideDrawer.tsx";
@@ -9,18 +9,6 @@ import { DrawerContentTypes } from "./overviewPageInterfaces.ts";
 import { AlertContext } from "../../components/alert/alertContext.tsx";
 import CustomLayersPanel from "./sidePanelContent/customLayers/customLayersPanel.jsx";
 import { LayoutBox, MainContentBox, SidebarBox } from "../../components/styledComponents.js";
-import HeaderComponent from "../../components/header/headerComponent";
-import DetailHeader from "../detail/detailHeader";
-import { styled } from "@mui/material/styles";
-import { Box } from "@mui/material";
-import DetailSideNav from "../detail/detailSideNav";
-import BoreholeForm from "../detail/form/borehole/boreholeForm";
-
-const AppBox = styled(Box)({
-  display: "flex",
-  flexDirection: "column",
-  height: "100%",
-});
 
 const OverviewPage = props => {
   const [sort, setSort] = useState(null);
@@ -59,55 +47,33 @@ const OverviewPage = props => {
   }, [location.pathname]);
 
   return (
-    <AppBox>
-      <HeaderComponent />
-      <Route exact={false} path={"/:id"} render={() => <DetailHeader />} />
-      <LayoutBox>
-        <SidebarBox>
-          <Switch>
-            <Route
-              exact
-              path={"/"}
-              render={() => (
-                <MainSideNav
-                  workgroup={workgroup}
-                  setWorkgroup={setWorkgroup}
-                  enabledWorkgroups={enabledWorkgroups}
-                  setEnabledWorkgroups={setEnabledWorkgroups}
-                  toggleDrawer={toggleSideDrawer}
-                  drawerOpen={sideDrawerOpen}
-                  setSideDrawerContent={setSideDrawerContent}
-                  sideDrawerContent={sideDrawerContent}
-                />
-              )}
-            />
-            <Route component={DetailSideNav} path="/:id" />
-          </Switch>
-        </SidebarBox>
-        <SideDrawer drawerOpen={sideDrawerOpen} drawerContent={sideDrawerComponentMap[sideDrawerContent]} />
-        <MainContentBox>
-          <Switch>
-            <Route
-              exact
-              path={"/"}
-              render={() => (
-                <MapView
-                  {...props}
-                  sort={sort}
-                  setSort={setSort}
-                  toggleBottomDrawer={toggleBottomDrawer}
-                  bottomDrawerOpen={bottomDrawerOpen}
-                  displayErrorMessage={message => {
-                    showAlert(message, "error");
-                  }}
-                />
-              )}
-            />
-            <Route exact={false} path={"/:id"} render={() => <BoreholeForm />} />
-          </Switch>
-        </MainContentBox>
-      </LayoutBox>
-    </AppBox>
+    <LayoutBox>
+      <SidebarBox>
+        <MainSideNav
+          workgroup={workgroup}
+          setWorkgroup={setWorkgroup}
+          enabledWorkgroups={enabledWorkgroups}
+          setEnabledWorkgroups={setEnabledWorkgroups}
+          toggleDrawer={toggleSideDrawer}
+          drawerOpen={sideDrawerOpen}
+          setSideDrawerContent={setSideDrawerContent}
+          sideDrawerContent={sideDrawerContent}
+        />
+      </SidebarBox>
+      <SideDrawer drawerOpen={sideDrawerOpen} drawerContent={sideDrawerComponentMap[sideDrawerContent]} />
+      <MainContentBox>
+        <MapView
+          {...props}
+          sort={sort}
+          setSort={setSort}
+          toggleBottomDrawer={toggleBottomDrawer}
+          bottomDrawerOpen={bottomDrawerOpen}
+          displayErrorMessage={message => {
+            showAlert(message, "error");
+          }}
+        />
+      </MainContentBox>
+    </LayoutBox>
   );
 };
 
diff --git a/src/client/src/pages/overview/table/boreholeEditorTable.jsx b/src/client/src/pages/overview/table/boreholeEditorTable.jsx
index ecabc04e9..d3d136cc1 100644
--- a/src/client/src/pages/overview/table/boreholeEditorTable.jsx
+++ b/src/client/src/pages/overview/table/boreholeEditorTable.jsx
@@ -42,9 +42,9 @@ class BoreholeEditorTable extends TTable {
   }
 
   componentDidMount() {
-    const { filter, store, sort } = this.props;
+    const { filter, store } = this.props;
     this.props.clear();
-    this.props.loadData(store.page, filter, this.props.featureIds, sort?.column ?? "creation", sort?.direction);
+    this.props.loadData(store.page, filter, this.props.featureIds, store?.orderby, store?.direction);
   }
 
   reorder(orderby) {
diff --git a/src/client/src/pages/settings/settingsPage.jsx b/src/client/src/pages/settings/settingsPage.jsx
index 2f53a917f..98ab829a2 100644
--- a/src/client/src/pages/settings/settingsPage.jsx
+++ b/src/client/src/pages/settings/settingsPage.jsx
@@ -1,7 +1,6 @@
 import { withTranslation } from "react-i18next";
 import { Route, Switch, withRouter } from "react-router-dom";
 import MenuSettings from "./menuSettings";
-import HeaderComponent from "../../components/header/headerComponent.tsx";
 import EditorSettings from "./editorSettings";
 import AdminSettings from "./admin/adminSettings";
 import AboutSettings from "./aboutSettings";
@@ -16,7 +15,6 @@ const SettingsPage = () => {
         flexDirection: "column",
         height: "100%",
       }}>
-      <HeaderComponent />
       <div
         style={{
           flex: "1 1 100%",