diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2b01d7b04..4d2ebb531 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,10 @@
 - Removed middle name from user details because it was not used until now.
 - Disable inputs of the editor view's borehole _borehole_ tab, when editing mode is not active or borehole status does not allow editing.
 
+### Fixed
+
+- Ensure hydrogeology components are loaded properly when refreshed.
+
 ## v2.0.506 - 2023-12-21
 
 ### Added
diff --git a/src/client/cypress/e2e/viewer/displayLayer.cy.js b/src/client/cypress/e2e/viewer/displayLayer.cy.js
index c151c6303..e088900a1 100644
--- a/src/client/cypress/e2e/viewer/displayLayer.cy.js
+++ b/src/client/cypress/e2e/viewer/displayLayer.cy.js
@@ -142,7 +142,7 @@ describe("Test for the borehole form.", () => {
 
     // Click on layer
     cy.get('[data-cy="stratigraphy-layer-0"]').scrollIntoView();
-    cy.get('[data-cy="stratigraphy-layer-0"]').click();
+    cy.get('[data-cy="stratigraphy-layer-0"]').click({ force: true });
 
     // Three detail rows are displayed - two by default plus one that was selected as default field.
     cy.get('[data-cy="stratigraphy-layer-details"] h6').should(
diff --git a/src/client/src/commons/form/borehole/boreholeForm.js b/src/client/src/commons/form/borehole/boreholeForm.js
index b6218087e..8a11c3010 100644
--- a/src/client/src/commons/form/borehole/boreholeForm.js
+++ b/src/client/src/commons/form/borehole/boreholeForm.js
@@ -408,7 +408,7 @@ class BoreholeForm extends React.Component {
             render={() => (
               <WaterIngress
                 isEditable={isEditable}
-                boreholeId={borehole.data.id}
+                boreholeId={parseInt(this.props.match.params.id, 10)}
               />
             )}
           />
@@ -421,7 +421,7 @@ class BoreholeForm extends React.Component {
             render={() => (
               <GroundwaterLevelMeasurement
                 isEditable={isEditable}
-                boreholeId={borehole.data.id}
+                boreholeId={parseInt(this.props.match.params.id, 10)}
               />
             )}
           />
@@ -434,7 +434,7 @@ class BoreholeForm extends React.Component {
             render={() => (
               <FieldMeasurement
                 isEditable={isEditable}
-                boreholeId={borehole.data.id}
+                boreholeId={parseInt(this.props.match.params.id, 10)}
               />
             )}
           />
@@ -444,7 +444,7 @@ class BoreholeForm extends React.Component {
             render={() => (
               <Hydrotest
                 isEditable={isEditable}
-                boreholeId={borehole.data.id}
+                boreholeId={parseInt(this.props.match.params.id, 10)}
               />
             )}
           />
@@ -457,7 +457,7 @@ class BoreholeForm extends React.Component {
             render={() => (
               <GroundwaterLevelMeasurement
                 isEditable={isEditable}
-                boreholeId={borehole.data.id}
+                boreholeId={parseInt(this.props.match.params.id, 10)}
               />
             )}
           />
diff --git a/src/client/src/commons/form/borehole/completion/backfill.js b/src/client/src/commons/form/borehole/completion/backfill.js
index eaa867441..62b308e8a 100644
--- a/src/client/src/commons/form/borehole/completion/backfill.js
+++ b/src/client/src/commons/form/borehole/completion/backfill.js
@@ -8,7 +8,7 @@ import {
   Tooltip,
   Typography,
 } from "@mui/material";
-import { AddButton } from "./styledComponents";
+import { AddButton, CompletionGrid } from "./styledComponents";
 import {
   getBackfills,
   addBackfill,
@@ -122,20 +122,7 @@ const Backfill = ({ isEditable, completionId }) => {
           )}
         </Stack>
       </Box>
-      <Grid
-        container
-        alignItems="stretch"
-        columnSpacing={{ xs: 2 }}
-        rowSpacing={{ xs: 2 }}
-        sx={{
-          width: "100%",
-          borderWidth: "1px",
-          borderColor: "black",
-          padding: "10px 10px 5px 10px",
-          marginBottom: "10px",
-          overflow: "auto",
-          maxHeight: "85vh",
-        }}>
+      <CompletionGrid>
         {displayedBackfills?.length > 0
           ? displayedBackfills
               ?.sort((a, b) => a.fromDepthM - b.fromDepthM)
@@ -198,7 +185,7 @@ const Backfill = ({ isEditable, completionId }) => {
                 </Typography>
               </Stack>
             )}
-      </Grid>
+      </CompletionGrid>
     </Stack>
   );
 };
diff --git a/src/client/src/commons/form/borehole/completion/casing.js b/src/client/src/commons/form/borehole/completion/casing.js
index 31252b980..146ea783e 100644
--- a/src/client/src/commons/form/borehole/completion/casing.js
+++ b/src/client/src/commons/form/borehole/completion/casing.js
@@ -8,7 +8,7 @@ import {
   Tooltip,
   Typography,
 } from "@mui/material";
-import { AddButton } from "./styledComponents";
+import { AddButton, CompletionGrid } from "./styledComponents";
 import {
   getCasings,
   addCasing,
@@ -122,20 +122,7 @@ const Casing = ({ isEditable, completionId }) => {
           )}
         </Stack>
       </Box>
-      <Grid
-        container
-        alignItems="stretch"
-        columnSpacing={{ xs: 2 }}
-        rowSpacing={{ xs: 2 }}
-        sx={{
-          width: "100%",
-          borderWidth: "1px",
-          borderColor: "black",
-          padding: "10px 10px 5px 10px",
-          marginBottom: "10px",
-          overflow: "auto",
-          maxHeight: "85vh",
-        }}>
+      <CompletionGrid>
         {displayedCasings?.length > 0
           ? displayedCasings
               ?.sort((a, b) => a.fromDepthM - b.fromDepthM)
@@ -198,7 +185,7 @@ const Casing = ({ isEditable, completionId }) => {
                 </Typography>
               </Stack>
             )}
-      </Grid>
+      </CompletionGrid>
     </Stack>
   );
 };
diff --git a/src/client/src/commons/form/borehole/completion/completion.js b/src/client/src/commons/form/borehole/completion/completion.js
index 66543ffe2..58af6c0e8 100644
--- a/src/client/src/commons/form/borehole/completion/completion.js
+++ b/src/client/src/commons/form/borehole/completion/completion.js
@@ -199,6 +199,7 @@ const Completion = props => {
           {isEditable && (
             <Tooltip title={t("add")}>
               <AddButton
+                sx={{ marginRight: "5px" }}
                 data-cy="add-completion-button"
                 onClick={addNewCompletion}>
                 {t("addCompletion")}
diff --git a/src/client/src/commons/form/borehole/completion/completionContent.js b/src/client/src/commons/form/borehole/completion/completionContent.js
index 4de486ad1..e23b10211 100644
--- a/src/client/src/commons/form/borehole/completion/completionContent.js
+++ b/src/client/src/commons/form/borehole/completion/completionContent.js
@@ -29,51 +29,39 @@ const CompletionContent = ({ completion, isEditable }) => {
   };
 
   return (
-    <>
-      <Stack direction="column">
-        <Stack
-          direction="row"
-          justifyContent="space-between"
-          alignItems="center">
-          <CompletionTabs
-            value={state.index}
-            onChange={handleCompletionChanged}>
-            {tabTitels.map((item, index) => {
-              return (
-                <CompletionTab
-                  data-cy={"completion-content-header-tab-" + item.name}
-                  label={
-                    item.name === null || item.name === ""
-                      ? t("common:np")
-                      : item.name
-                  }
-                  key={index}
-                />
-              );
-            })}
-          </CompletionTabs>
-        </Stack>
-        <>
-          <CompletionBox>
-            {(state.index === 0 && (
-              <Casing completionId={completion.id} isEditable={isEditable} />
-            )) ||
-              (state.index === 1 && (
-                <Instrumentation
-                  completionId={completion.id}
-                  isEditable={isEditable}
-                />
-              )) ||
-              (state.index === 2 && (
-                <Backfill
-                  completionId={completion.id}
-                  isEditable={isEditable}
-                />
-              ))}
-          </CompletionBox>
-        </>
+    <Stack direction="column">
+      <Stack direction="row" justifyContent="space-between" alignItems="center">
+        <CompletionTabs value={state.index} onChange={handleCompletionChanged}>
+          {tabTitels.map((item, index) => {
+            return (
+              <CompletionTab
+                data-cy={"completion-content-header-tab-" + item.name}
+                label={
+                  item.name === null || item.name === ""
+                    ? t("common:np")
+                    : item.name
+                }
+                key={index}
+              />
+            );
+          })}
+        </CompletionTabs>
       </Stack>
-    </>
+      <CompletionBox>
+        {(state.index === 0 && (
+          <Casing completionId={completion.id} isEditable={isEditable} />
+        )) ||
+          (state.index === 1 && (
+            <Instrumentation
+              completionId={completion.id}
+              isEditable={isEditable}
+            />
+          )) ||
+          (state.index === 2 && (
+            <Backfill completionId={completion.id} isEditable={isEditable} />
+          ))}
+      </CompletionBox>
+    </Stack>
   );
 };
 
diff --git a/src/client/src/commons/form/borehole/completion/instrumentation.js b/src/client/src/commons/form/borehole/completion/instrumentation.js
index bc113a47a..fd02d479f 100644
--- a/src/client/src/commons/form/borehole/completion/instrumentation.js
+++ b/src/client/src/commons/form/borehole/completion/instrumentation.js
@@ -8,7 +8,7 @@ import {
   Tooltip,
   Typography,
 } from "@mui/material";
-import { AddButton } from "./styledComponents";
+import { AddButton, CompletionGrid } from "./styledComponents";
 import {
   useInstrumentationMutations,
   useInstrumentations,
@@ -91,20 +91,7 @@ const Instrumentation = ({ isEditable, completionId }) => {
           )}
         </Stack>
       </Box>
-      <Grid
-        container
-        alignItems="stretch"
-        columnSpacing={{ xs: 2 }}
-        rowSpacing={{ xs: 2 }}
-        sx={{
-          width: "100%",
-          borderWidth: "1px",
-          borderColor: "black",
-          padding: "10px 10px 5px 10px",
-          marginBottom: "10px",
-          overflow: "auto",
-          maxHeight: "85vh",
-        }}>
+      <CompletionGrid>
         {displayedInstrumentations?.length > 0 ? (
           displayedInstrumentations
             ?.sort((a, b) => a.fromDepthM - b.fromDepthM)
@@ -158,7 +145,7 @@ const Instrumentation = ({ isEditable, completionId }) => {
             </Typography>
           </Stack>
         )}
-      </Grid>
+      </CompletionGrid>
     </Stack>
   );
 };
diff --git a/src/client/src/commons/form/borehole/completion/styledComponents.js b/src/client/src/commons/form/borehole/completion/styledComponents.js
index 82e8e54d4..c984f9095 100644
--- a/src/client/src/commons/form/borehole/completion/styledComponents.js
+++ b/src/client/src/commons/form/borehole/completion/styledComponents.js
@@ -2,6 +2,7 @@ import React, { forwardRef } from "react";
 import {
   Box,
   Button,
+  Grid,
   IconButton,
   Stack,
   Tabs,
@@ -68,6 +69,7 @@ export const BdmsButton = styled(Button)({
   textTransform: "none",
   color: "rgba(0, 0, 0, 0.8)",
   borderColor: "rgba(0, 0, 0, 0.8)",
+  marginBottom: "10px",
   "&:hover, &.Mui-focusVisible, &:active, &:focus, &:focus-visible": {
     borderColor: "rgba(0, 0, 0, 0.8)",
     backgroundColor: "rgba(0, 0, 0, 0.05)",
@@ -118,3 +120,27 @@ export const CompletionTab = styled(props => <Tab disableRipple {...props} />)(
     },
   }),
 );
+
+export const CompletionGrid = forwardRef((props, ref) => {
+  const StyledGrid = styled(Grid)(() => ({
+    width: "100%",
+    borderWidth: "1px",
+    borderColor: "black",
+    padding: "10px 10px 5px 10px",
+    marginBottom: "10px",
+    overflow: "auto",
+    maxHeight: "65vh",
+    alignItems: "stretch",
+  }));
+
+  return (
+    <StyledGrid
+      ref={ref}
+      {...props}
+      container
+      columnSpacing={{ xs: 2 }}
+      rowSpacing={{ xs: 2 }}>
+      {props.children}
+    </StyledGrid>
+  );
+});