diff --git a/README.md b/README.md
index b270b3cbb..bc38922ed 100644
--- a/README.md
+++ b/README.md
@@ -70,3 +70,29 @@ Die Applikation benötigt für die Authentifizierung und Autorisierung eine gül
 ### Legacy API Authentifizierung
 
 Requests and das Legacy API werden mit dem [YARP Reverse Proxy](https://microsoft.github.io/reverse-proxy/articles/config-files.html) durch das neue API weitergeleitet. Die Authentifizierung wird über das neue API übernommen. Die Authentifizierung erfolgt mit der [LegacyApiAuthenticationMiddleware](src\api\Authentication\LegacyApiAuthenticationMiddleware.cs) welche den `Authorization` Header mit dem `sub` Claim des Benutzers befüllt. **⚠️Da die Validierung des `identity_tokens` dabei verloren geht, darf das Legacy API nicht öffentlich verfügbar sein**. Die Konfiguration des Legacy API Endpunkts erfolgt über die [Konfiguration](https://learn.microsoft.com/en-us/aspnet/core/fundamentals/configuration) von `ReverseProxy:Clusters:pythonApi:Destinations:legacyApi:Address`.
+
+## Developer best practices
+
+#### UI/UX
+
+- Das UI-Design ist in [Figma](https://www.figma.com/design/cEiOoOazAQZqpRY92ZhBeO/SwissGeol?node-id=7390-40928&t=DemUCUzYlysJ5lB4-0) definiert. Unter Pages/Screens sind die definitiven Designs zu finden.
+- Standardmässig werden die [Lucid Icons](https://lucide.dev/icons/) verwendet. Custom-Icons können aus [Figma](https://www.figma.com/design/cEiOoOazAQZqpRY92ZhBeO/SwissGeol?node-id=7390-40928&t=DemUCUzYlysJ5lB4-0) kopiert und als SVG eingebunden werden. Um die Icons farblich stylen zu können, müssen `fill` und `stroke` wie folgt angepasst werden `fill="currentColor" stroke="currentColor"`.
+- [MUI](https://mui.com/) wird als UI-Component library verwendet. Allgemeine Styles werden im [AppTheme.ts](./src/client/src/AppTheme.ts) definiert und diese Styles wo immer möglich verwendet. [MUI Styled Components](https://mui.com/system/styled/) im gleichen File mit der Komponente definieren, sobald die Styles mehrfach gebraucht werden. Übergreifende Styled Components werden in [styledComponents.js](./src/client/src/components/styledComponents.js) definiert. 
+
+#### Typescript
+
+- Neue Komponenten werden in Typescript geschrieben.
+- Es werden bevorzugt Interfaces statt Types verwendet.
+- Interfaces, die API Calls abbilden, werden unter [apiInterfaces.ts](./src/client/api/apiInterfaces.ts) definiert ([ReduxStateInterfaces.ts](./src/client/src/api-lib/ReduxStateInterfaces.ts) für das Legacy API).
+- Existieren mehrere Interfaces für eine Komponente, werden sie in einem separaten File neben der Komponente abgelegt. 
+- Das Interface für die React props der Komponente kann im selben File mit der Komponente definiert werden.
+
+#### Translation
+- Texte werden mit dem `useTranslation` hook von `react-i18next` übersetzt. Das `withTranslation HOC` wird nicht mehr verwendet.
+- Neue Übersetzungskeys alphabetisch sortiert und in CamelCase in den `common.json` Files unter [public/locale](./src/client/public/locale) erfassen.
+
+#### API
+
+- Neue Endpoints werden immer im .NET API erstellt. Das Python Legacy API wird nicht erweitert.
+- Redux wird nicht mehr erweitert. Datenabfragen werden mit dem Javascript [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) (siehe [fetchApiV2.js](src/client/src/api/fetchApiV2.js)) oder wo sinnvoll mit `useQuery` von `react-query` gemacht.
+- Wenn Abfragen aus dem Redux Store in neuen Komponenten gebraucht werden, sollten die React hooks `useSelector` und `useDispatch` verwendet werden.
diff --git a/src/client/src/ReduxStateInterfaces.ts b/src/client/src/api-lib/ReduxStateInterfaces.ts
similarity index 100%
rename from src/client/src/ReduxStateInterfaces.ts
rename to src/client/src/api-lib/ReduxStateInterfaces.ts
diff --git a/src/client/src/commons/files/fileInterfaces.ts b/src/client/src/commons/files/fileInterfaces.ts
index 350e50c33..60718d931 100644
--- a/src/client/src/commons/files/fileInterfaces.ts
+++ b/src/client/src/commons/files/fileInterfaces.ts
@@ -1,4 +1,4 @@
-import { Borehole } from "../../ReduxStateInterfaces.ts";
+import { Borehole } from "../../api-lib/ReduxStateInterfaces.ts";
 
 export interface File {
   id: number;
diff --git a/src/client/src/commons/form/borehole/borehole/geometry.jsx b/src/client/src/commons/form/borehole/borehole/geometry.jsx
index ceab36f97..0a9e0fc8e 100644
--- a/src/client/src/commons/form/borehole/borehole/geometry.jsx
+++ b/src/client/src/commons/form/borehole/borehole/geometry.jsx
@@ -4,7 +4,7 @@ import GeometryTable from "./geometryTable";
 import GeometryChartNE from "./geometryChartNE";
 import { GeometryChartZE, GeometryChartZInteractive, GeometryChartZN } from "./geometryChartZ";
 import { Card, CardActions, CardContent, CircularProgress, Grid, Typography } from "@mui/material/";
-import { FullPageCentered } from "../../../../components/baseComponents";
+import { FullPageCentered } from "../../../../components/styledComponents";
 import { useBoreholeGeometry, useBoreholeGeometryMutations } from "../../../../api/fetchApiV2";
 import { DeleteButton } from "../../../../components/buttons/buttons.tsx";
 
diff --git a/src/client/src/commons/form/borehole/borehole/geometryImport.jsx b/src/client/src/commons/form/borehole/borehole/geometryImport.jsx
index 219b49271..07300ef4f 100644
--- a/src/client/src/commons/form/borehole/borehole/geometryImport.jsx
+++ b/src/client/src/commons/form/borehole/borehole/geometryImport.jsx
@@ -23,7 +23,7 @@ import { Controller, FormProvider, useForm, useWatch } from "react-hook-form";
 import { FormSelect } from "../../../../components/form/form";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import { AlertContext } from "../../../../components/alert/alertContext";
-import { StackHalfWidth } from "../../../../components/baseComponents.js";
+import { StackHalfWidth } from "../../../../components/styledComponents.js";
 import { DevTool } from "../../../../../hookformDevtools.ts";
 
 const GeometryImport = ({ boreholeId }) => {
diff --git a/src/client/src/commons/form/borehole/borehole/geometryTable.jsx b/src/client/src/commons/form/borehole/borehole/geometryTable.jsx
index c5278949a..6d062bcb1 100644
--- a/src/client/src/commons/form/borehole/borehole/geometryTable.jsx
+++ b/src/client/src/commons/form/borehole/borehole/geometryTable.jsx
@@ -1,15 +1,15 @@
 import { useTranslation } from "react-i18next";
 import {
-  Typography,
+  CircularProgress,
   Table,
-  TableHead,
   TableBody,
+  TableCell,
   TableContainer,
+  TableHead,
   TableRow,
-  TableCell,
-  CircularProgress,
+  Typography,
 } from "@mui/material/";
-import { FullPageCentered } from "../../../../components/baseComponents";
+import { FullPageCentered } from "../../../../components/styledComponents";
 
 const GeometryTable = ({ data }) => {
   const { t } = useTranslation();
diff --git a/src/client/src/commons/form/borehole/borehole/sectionDisplay.jsx b/src/client/src/commons/form/borehole/borehole/sectionDisplay.jsx
index 229ecd007..63b81a4b3 100644
--- a/src/client/src/commons/form/borehole/borehole/sectionDisplay.jsx
+++ b/src/client/src/commons/form/borehole/borehole/sectionDisplay.jsx
@@ -1,4 +1,4 @@
-import { StackFullWidth } from "../../../../components/baseComponents";
+import { StackFullWidth } from "../../../../components/styledComponents";
 import { FormDisplay, FormDisplayType } from "../../../../components/form/form";
 import DataDisplayCard from "../../../../components/dataCard/dataDisplayCard";
 import { deleteSection, useDomains } from "../../../../api/fetchApiV2";
diff --git a/src/client/src/commons/form/borehole/borehole/sectionInput.jsx b/src/client/src/commons/form/borehole/borehole/sectionInput.jsx
index d6abc03d3..91c04bedc 100644
--- a/src/client/src/commons/form/borehole/borehole/sectionInput.jsx
+++ b/src/client/src/commons/form/borehole/borehole/sectionInput.jsx
@@ -1,6 +1,6 @@
 import { useTranslation } from "react-i18next";
 import { Checkbox, Divider, FormControlLabel, IconButton } from "@mui/material";
-import { StackFullWidth } from "../../../../components/baseComponents";
+import { StackFullWidth } from "../../../../components/styledComponents";
 import { FormDisplayType, FormInput, FormSelect } from "../../../../components/form/form";
 import { addSection, updateSection, useDomains } from "../../../../api/fetchApiV2";
 import { useContext, useEffect } from "react";
diff --git a/src/client/src/commons/form/borehole/completion/backfillDisplay.jsx b/src/client/src/commons/form/borehole/completion/backfillDisplay.jsx
index a376769f5..38dcc8360 100644
--- a/src/client/src/commons/form/borehole/completion/backfillDisplay.jsx
+++ b/src/client/src/commons/form/borehole/completion/backfillDisplay.jsx
@@ -1,7 +1,6 @@
-import { StackFullWidth } from "../../../../components/baseComponents";
+import { StackFullWidth, StackHalfWidth } from "../../../../components/styledComponents";
 import { FormDisplay, FormDisplayType } from "../../../../components/form/form";
 import DataDisplayCard from "../../../../components/dataCard/dataDisplayCard";
-import { StackHalfWidth } from "../../../../components/baseComponents.js";
 import { useGetCasingName } from "./casingUtils";
 import { deleteBackfill } from "../../../../api/fetchApiV2";
 
diff --git a/src/client/src/commons/form/borehole/completion/backfillInput.jsx b/src/client/src/commons/form/borehole/completion/backfillInput.jsx
index e39970271..2d00ed9a4 100644
--- a/src/client/src/commons/form/borehole/completion/backfillInput.jsx
+++ b/src/client/src/commons/form/borehole/completion/backfillInput.jsx
@@ -1,11 +1,11 @@
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useDomains, getCasings, addBackfill, updateBackfill } from "../../../../api/fetchApiV2";
+import { addBackfill, getCasings, updateBackfill, useDomains } from "../../../../api/fetchApiV2";
 import { completionSchemaConstants } from "./completionSchemaConstants";
 import { FormInput, FormSelect } from "../../../../components/form/form";
 import { DataInputCard } from "../../../../components/dataCard/dataInputCard";
-import { StackFullWidth, StackHalfWidth } from "../../../../components/baseComponents.js";
-import { useGetCasingOptions, prepareCasingDataForSubmit } from "./casingUtils";
+import { StackFullWidth, StackHalfWidth } from "../../../../components/styledComponents.js";
+import { prepareCasingDataForSubmit, useGetCasingOptions } from "./casingUtils";
 
 const BackfillInput = ({ item, parentId }) => {
   const domains = useDomains();
diff --git a/src/client/src/commons/form/borehole/completion/casingDisplay.jsx b/src/client/src/commons/form/borehole/completion/casingDisplay.jsx
index e50c9cb9f..b92094fb3 100644
--- a/src/client/src/commons/form/borehole/completion/casingDisplay.jsx
+++ b/src/client/src/commons/form/borehole/completion/casingDisplay.jsx
@@ -1,6 +1,6 @@
 import { useTranslation } from "react-i18next";
-import { Table, TableHead, TableBody, TableContainer, TableRow, TableCell, Typography } from "@mui/material";
-import { StackFullWidth } from "../../../../components/baseComponents";
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from "@mui/material";
+import { StackFullWidth } from "../../../../components/styledComponents";
 import { FormDisplay, FormDisplayType } from "../../../../components/form/form";
 import DataDisplayCard from "../../../../components/dataCard/dataDisplayCard";
 import { deleteCasing, useDomains } from "../../../../api/fetchApiV2";
diff --git a/src/client/src/commons/form/borehole/completion/casingInput.jsx b/src/client/src/commons/form/borehole/completion/casingInput.jsx
index 2b0dd7147..899964a20 100644
--- a/src/client/src/commons/form/borehole/completion/casingInput.jsx
+++ b/src/client/src/commons/form/borehole/completion/casingInput.jsx
@@ -1,7 +1,7 @@
 import { useContext, useEffect } from "react";
 import { FormProvider, useFieldArray, useForm } from "react-hook-form";
 import { Box, Divider, IconButton, Stack, Typography } from "@mui/material";
-import { StackFullWidth } from "../../../../components/baseComponents";
+import { StackFullWidth } from "../../../../components/styledComponents";
 import Delete from "@mui/icons-material/Delete";
 import { useTranslation } from "react-i18next";
 import { addCasing, updateCasing, useDomains } from "../../../../api/fetchApiV2";
diff --git a/src/client/src/commons/form/borehole/completion/completion.jsx b/src/client/src/commons/form/borehole/completion/completion.jsx
index 48d23a6ec..db309e6b4 100644
--- a/src/client/src/commons/form/borehole/completion/completion.jsx
+++ b/src/client/src/commons/form/borehole/completion/completion.jsx
@@ -14,7 +14,7 @@ import CompletionContent from "./completionContent";
 import CompletionHeaderInput from "./completionHeaderInput";
 import CompletionHeaderDisplay from "./completionHeaderDisplay";
 import { AddButton } from "../../../../components/buttons/buttons.tsx";
-import { FullPage } from "../../../../components/baseComponents";
+import { FullPage } from "../../../../components/styledComponents";
 import { DataCardExternalContext } from "../../../../components/dataCard/dataCardContext";
 import { PromptContext } from "../../../../components/prompt/promptContext.tsx";
 import TrashIcon from "../../../../assets/icons/trash.svg?react";
diff --git a/src/client/src/commons/form/borehole/completion/instrumentationDisplay.jsx b/src/client/src/commons/form/borehole/completion/instrumentationDisplay.jsx
index abd2eca41..5a9deca7a 100644
--- a/src/client/src/commons/form/borehole/completion/instrumentationDisplay.jsx
+++ b/src/client/src/commons/form/borehole/completion/instrumentationDisplay.jsx
@@ -1,4 +1,4 @@
-import { StackFullWidth } from "../../../../components/baseComponents";
+import { StackFullWidth } from "../../../../components/styledComponents";
 import { FormDisplay, FormDisplayType } from "../../../../components/form/form";
 import DataDisplayCard from "../../../../components/dataCard/dataDisplayCard";
 import { useGetCasingName } from "./casingUtils";
diff --git a/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementDisplay.jsx b/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementDisplay.jsx
index 8bac18adf..53ae6f4a0 100644
--- a/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementDisplay.jsx
+++ b/src/client/src/commons/form/borehole/hydrogeology/groundwaterLevelMeasurementDisplay.jsx
@@ -1,4 +1,4 @@
-import { StackFullWidth } from "../../../../components/baseComponents";
+import { StackFullWidth } from "../../../../components/styledComponents";
 import { FormDisplay, FormDisplayType } from "../../../../components/form/form";
 import DataDisplayCard from "../../../../components/dataCard/dataDisplayCard";
 import ObservationDisplay from "./observationDisplay";
diff --git a/src/client/src/commons/form/borehole/hydrogeology/hydrotestDisplay.jsx b/src/client/src/commons/form/borehole/hydrogeology/hydrotestDisplay.jsx
index dd301c871..1b764cf25 100644
--- a/src/client/src/commons/form/borehole/hydrogeology/hydrotestDisplay.jsx
+++ b/src/client/src/commons/form/borehole/hydrogeology/hydrotestDisplay.jsx
@@ -1,7 +1,7 @@
 import { useTranslation } from "react-i18next";
 import { TableCell } from "@mui/material";
 import { FormResultTableDisplay } from "../../../../components/form/formResultTableDisplay";
-import { StackFullWidth } from "../../../../components/baseComponents";
+import { StackFullWidth } from "../../../../components/styledComponents";
 import { FormDisplay, FormDisplayType } from "../../../../components/form/form";
 import DataDisplayCard from "../../../../components/dataCard/dataDisplayCard";
 import ObservationDisplay from "./observationDisplay";
diff --git a/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.jsx b/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.jsx
index bbb476916..d1728b128 100644
--- a/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.jsx
+++ b/src/client/src/commons/form/borehole/hydrogeology/hydrotestInput.jsx
@@ -2,7 +2,7 @@ import { useContext, useEffect, useState } from "react";
 import { FormProvider, useFieldArray, useForm } from "react-hook-form";
 import { Box, IconButton, InputAdornment, Stack, Typography } from "@mui/material";
 import { FormInput, FormMultiSelect, FormSelect } from "../../../../components/form/form";
-import { StackHalfWidth } from "../../../../components/baseComponents";
+import { StackHalfWidth } from "../../../../components/styledComponents";
 import { DataCardButtonContainer } from "../../../../components/dataCard/dataCard";
 import { AddButton, CancelButton, SaveButton } from "../../../../components/buttons/buttons.tsx";
 import ObservationInput from "./observationInput";
diff --git a/src/client/src/commons/form/borehole/hydrogeology/observationDisplay.jsx b/src/client/src/commons/form/borehole/hydrogeology/observationDisplay.jsx
index 284f0ddfe..db4798905 100644
--- a/src/client/src/commons/form/borehole/hydrogeology/observationDisplay.jsx
+++ b/src/client/src/commons/form/borehole/hydrogeology/observationDisplay.jsx
@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-import { StackFullWidth } from "../../../../components/baseComponents";
+import { StackFullWidth } from "../../../../components/styledComponents";
 import { FormDisplay, FormDisplayType } from "../../../../components/form/form";
 import { useGetCasingName } from "../completion/casingUtils";
 
diff --git a/src/client/src/commons/form/borehole/hydrogeology/observationInput.jsx b/src/client/src/commons/form/borehole/hydrogeology/observationInput.jsx
index 41e3f01bd..d33437b30 100644
--- a/src/client/src/commons/form/borehole/hydrogeology/observationInput.jsx
+++ b/src/client/src/commons/form/borehole/hydrogeology/observationInput.jsx
@@ -4,7 +4,7 @@ import { FormInput, FormSelect } from "../../../../components/form/form";
 import { getCasingsByBoreholeId, useDomains } from "../../../../api/fetchApiV2";
 import { useTranslation } from "react-i18next";
 import { hydrogeologySchemaConstants } from "./hydrogeologySchemaConstants";
-import { StackHalfWidth } from "../../../../components/baseComponents";
+import { StackHalfWidth } from "../../../../components/styledComponents";
 import { useGetCasingOptions } from "../completion/casingUtils";
 
 const ObservationInput = props => {
diff --git a/src/client/src/commons/form/borehole/hydrogeology/waterIngressDisplay.jsx b/src/client/src/commons/form/borehole/hydrogeology/waterIngressDisplay.jsx
index d53ceaa0c..2846ac0a1 100644
--- a/src/client/src/commons/form/borehole/hydrogeology/waterIngressDisplay.jsx
+++ b/src/client/src/commons/form/borehole/hydrogeology/waterIngressDisplay.jsx
@@ -1,4 +1,4 @@
-import { StackFullWidth } from "../../../../components/baseComponents";
+import { StackFullWidth } from "../../../../components/styledComponents";
 import { FormDisplay, FormDisplayType } from "../../../../components/form/form";
 import DataDisplayCard from "../../../../components/dataCard/dataDisplayCard";
 import ObservationDisplay from "./observationDisplay";
diff --git a/src/client/src/commons/form/borehole/segments/coordinateSegmentInterfaces.ts b/src/client/src/commons/form/borehole/segments/coordinateSegmentInterfaces.ts
index 83ee9330c..152ef528f 100644
--- a/src/client/src/commons/form/borehole/segments/coordinateSegmentInterfaces.ts
+++ b/src/client/src/commons/form/borehole/segments/coordinateSegmentInterfaces.ts
@@ -1,4 +1,4 @@
-import { Borehole, User } from "../../../../ReduxStateInterfaces";
+import { Borehole, User } from "../../../../api-lib/ReduxStateInterfaces";
 
 export enum ReferenceSystemCode {
   LV95 = 20104001,
diff --git a/src/client/src/commons/menu/detailView/detailHeader.tsx b/src/client/src/commons/menu/detailView/detailHeader.tsx
index 227acf196..64579ffa1 100644
--- a/src/client/src/commons/menu/detailView/detailHeader.tsx
+++ b/src/client/src/commons/menu/detailView/detailHeader.tsx
@@ -7,7 +7,7 @@ import TrashIcon from "../../../assets/icons/trash.svg?react";
 import { useHistory, useLocation } from "react-router-dom";
 import { DeleteButton, EditButton, EndEditButton } from "../../../components/buttons/buttons";
 import { useDispatch, useSelector } from "react-redux";
-import { Borehole, ReduxRootState } from "../../../ReduxStateInterfaces";
+import { Borehole, ReduxRootState } from "../../../api-lib/ReduxStateInterfaces";
 import { deleteBorehole, lockBorehole, unlockBorehole } from "../../../api-lib";
 import { useTranslation } from "react-i18next";
 import { PromptContext } from "../../../components/prompt/promptContext";
diff --git a/src/client/src/commons/menu/headerComponent.tsx b/src/client/src/commons/menu/headerComponent.tsx
index 5b1b8551f..ea2a4c7b0 100644
--- a/src/client/src/commons/menu/headerComponent.tsx
+++ b/src/client/src/commons/menu/headerComponent.tsx
@@ -2,7 +2,7 @@ import { Box, Stack } from "@mui/material";
 import { theme } from "../../AppTheme";
 import { VersionTag } from "./versionTag";
 import { ProfilePopup } from "./profilePopup";
-import { ReduxRootState, User } from "../../ReduxStateInterfaces";
+import { ReduxRootState, User } from "../../api-lib/ReduxStateInterfaces";
 import { useSelector } from "react-redux";
 import { LanguagePopup } from "./languagePopup.tsx";
 
diff --git a/src/client/src/commons/menu/mainView/actions/actionsInterfaces.ts b/src/client/src/commons/menu/mainView/actions/actionsInterfaces.ts
index 3baebc5b9..635fd7ea1 100644
--- a/src/client/src/commons/menu/mainView/actions/actionsInterfaces.ts
+++ b/src/client/src/commons/menu/mainView/actions/actionsInterfaces.ts
@@ -1,6 +1,6 @@
 import React from "react";
 import { ErrorResponse } from "../menuComponents/menuComponentInterfaces";
-import { Workgroup } from "../../../../ReduxStateInterfaces";
+import { Workgroup } from "../../../../api-lib/ReduxStateInterfaces";
 
 export interface WorkgroupSelectProps {
   workgroup: number | null;
diff --git a/src/client/src/commons/menu/mainView/actions/importer/importModalContent.tsx b/src/client/src/commons/menu/mainView/actions/importer/importModalContent.tsx
index 645a57c2c..38787dbfd 100644
--- a/src/client/src/commons/menu/mainView/actions/importer/importModalContent.tsx
+++ b/src/client/src/commons/menu/mainView/actions/importer/importModalContent.tsx
@@ -2,7 +2,7 @@ import { useCallback } from "react";
 import { Box, Stack } from "@mui/material/";
 import TranslationText from "../../../../form/translationText.jsx";
 import { FileDropzone } from "../../../../files/fileDropzone.jsx";
-import { StackHalfWidth } from "../../../../../components/baseComponents.js";
+import { StackHalfWidth } from "../../../../../components/styledComponents.js";
 import { downloadCodelistCsv } from "../../../../../api/fetchApiV2.js";
 import { ImportContentProps } from "../actionsInterfaces.js";
 import Downloadlink from "../../../../files/downloadlink.jsx";
diff --git a/src/client/src/commons/menu/mainView/mainSideNav.tsx b/src/client/src/commons/menu/mainView/mainSideNav.tsx
index 54e28d1a2..07fe27265 100644
--- a/src/client/src/commons/menu/mainView/mainSideNav.tsx
+++ b/src/client/src/commons/menu/mainView/mainSideNav.tsx
@@ -13,7 +13,7 @@ import { theme } from "../../../AppTheme";
 import ImportModal from "./actions/importModal";
 import { DrawerContentTypes } from "../../../pages/editor/editorComponentInterfaces";
 import { ErrorResponse, MainSideNavProps } from "./menuComponents/menuComponentInterfaces";
-import { ReduxRootState, User } from "../../../ReduxStateInterfaces";
+import { ReduxRootState, User } from "../../../api-lib/ReduxStateInterfaces";
 import { FilterContext } from "../../../components/filter/filterContext";
 import { useTranslation } from "react-i18next";
 import { NavButton } from "../../../components/buttons/navButton";
diff --git a/src/client/src/commons/menu/mainView/menuComponents/menuComponentInterfaces.ts b/src/client/src/commons/menu/mainView/menuComponents/menuComponentInterfaces.ts
index a96a29b19..c135dc73e 100644
--- a/src/client/src/commons/menu/mainView/menuComponents/menuComponentInterfaces.ts
+++ b/src/client/src/commons/menu/mainView/menuComponents/menuComponentInterfaces.ts
@@ -1,5 +1,5 @@
 import React from "react";
-import { Boreholes, Workgroup } from "../../../../ReduxStateInterfaces";
+import { Boreholes, Workgroup } from "../../../../api-lib/ReduxStateInterfaces";
 import { DrawerContentTypes } from "../../../../pages/editor/editorComponentInterfaces";
 
 export interface BoreholeNumbersPreviewProps {
diff --git a/src/client/src/commons/menu/profilePopup.tsx b/src/client/src/commons/menu/profilePopup.tsx
index 2edaf4c6b..e9b7d2364 100644
--- a/src/client/src/commons/menu/profilePopup.tsx
+++ b/src/client/src/commons/menu/profilePopup.tsx
@@ -2,7 +2,7 @@ import { useAuth } from "react-oidc-context";
 import { Button, IconButton, Popover, Stack, Typography } from "@mui/material";
 import { theme } from "../../AppTheme.ts";
 import ProfileIcon from "../../assets/icons/profile.svg?react";
-import { UserData } from "../../ReduxStateInterfaces";
+import { UserData } from "../../api-lib/ReduxStateInterfaces";
 import { MouseEvent, useState } from "react";
 
 export function ProfilePopup({ user }: { user: UserData }) {
diff --git a/src/client/src/components/dataCard/dataCards.jsx b/src/client/src/components/dataCard/dataCards.jsx
index 1797085be..e1e4095b9 100644
--- a/src/client/src/components/dataCard/dataCards.jsx
+++ b/src/client/src/components/dataCard/dataCards.jsx
@@ -4,7 +4,7 @@ import { CircularProgress, Typography } from "@mui/material";
 import { DataCard, DataCardButtonContainer, DataCardContainer, DataCardItem } from "./dataCard";
 import { DataCardContext, DataCardSwitchContext } from "./dataCardContext";
 import { AddButton } from "../buttons/buttons.tsx";
-import { FullPage, FullPageCentered } from "../baseComponents";
+import { FullPage, FullPageCentered } from "../styledComponents";
 
 const DataCardsContainer = props => {
   return <DataCardContainer>{props.children()}</DataCardContainer>;
diff --git a/src/client/src/components/dataCard/dataDisplayCard.jsx b/src/client/src/components/dataCard/dataDisplayCard.jsx
index c578cf742..53b5a05d9 100644
--- a/src/client/src/components/dataCard/dataDisplayCard.jsx
+++ b/src/client/src/components/dataCard/dataDisplayCard.jsx
@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 import { DataCardButtonContainer } from "./dataCard.jsx";
 import { DataCardContext, DataCardSwitchContext } from "./dataCardContext";
 import { PromptContext } from "../prompt/promptContext.tsx";
-import { StackFullWidth } from "../baseComponents";
+import { StackFullWidth } from "../styledComponents";
 import { DeleteButton, EditButton } from "../buttons/buttons.tsx";
 import TrashIcon from "../../assets/icons/trash.svg?react";
 
diff --git a/src/client/src/components/dataCard/dataInputCard.jsx b/src/client/src/components/dataCard/dataInputCard.jsx
index c41c483de..670cde8ea 100644
--- a/src/client/src/components/dataCard/dataInputCard.jsx
+++ b/src/client/src/components/dataCard/dataInputCard.jsx
@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 import { FormProvider, useForm } from "react-hook-form";
 import { DataCardButtonContainer } from "./dataCard.jsx";
 import { DataCardContext, DataCardSwitchContext } from "./dataCardContext.jsx";
-import { StackFullWidth } from "../baseComponents";
+import { StackFullWidth } from "../styledComponents";
 import { CancelButton, SaveButton } from "../buttons/buttons.tsx";
 import { PromptContext } from "../prompt/promptContext.tsx";
 
diff --git a/src/client/src/components/baseComponents.js b/src/client/src/components/styledComponents.js
similarity index 100%
rename from src/client/src/components/baseComponents.js
rename to src/client/src/components/styledComponents.js