diff --git a/src/ClientApp/cypress/integration/inputform.spec.js b/src/ClientApp/cypress/integration/inputform.spec.js
index 7db1e71..2255128 100644
--- a/src/ClientApp/cypress/integration/inputform.spec.js
+++ b/src/ClientApp/cypress/integration/inputform.spec.js
@@ -47,7 +47,7 @@ describe("Input form tests", () => {
       .scrollIntoView()
       .click();
 
-    cy.get("button[type=submit]").should("not.be.visible");
+    cy.get("button[type=submit]").should("be.disabled");
     cy.get("form[name=bohrung-form]").should("contain", "Bohrung bearbeiten");
     cy.get("form[name=bohrung-form]")
       .find("input[name=bezeichnung]")
@@ -55,7 +55,7 @@ describe("Input form tests", () => {
       .click({ force: true })
       .type(" And More");
 
-    cy.contains("button", "Bohrung speichern").scrollIntoView().should("be.visible").scrollIntoView().click();
+    cy.contains("button", "Bohrung speichern").scrollIntoView().should("not.be.disabled").scrollIntoView().click();
   });
 
   it("Delete Bohrung", function () {
diff --git a/src/ClientApp/src/components/BohrprofilForm.js b/src/ClientApp/src/components/BohrprofilForm.js
index b408e4f..34ca8ff 100644
--- a/src/ClientApp/src/components/BohrprofilForm.js
+++ b/src/ClientApp/src/components/BohrprofilForm.js
@@ -1,31 +1,33 @@
 import React, { useState, useEffect } from "react";
-import DialogActions from "@mui/material/DialogActions";
-import DialogContent from "@mui/material/DialogContent";
-import DialogTitle from "@mui/material/DialogTitle";
+import {
+  Autocomplete,
+  Box,
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  TextField,
+  Tooltip,
+  Typography,
+} from "@mui/material";
 import { Controller, useForm } from "react-hook-form";
-import TextField from "@mui/material/TextField";
-import Table from "@mui/material/Table";
-import IconButton from "@mui/material/IconButton";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableHead from "@mui/material/TableHead";
-import TableRow from "@mui/material/TableRow";
 import EditIcon from "@mui/icons-material/Edit";
 import DeleteIcon from "@mui/icons-material/Delete";
 import PreviewIcon from "@mui/icons-material/Preview";
 import AddCircleIcon from "@mui/icons-material/AddCircle";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
-import Tooltip from "@mui/material/Tooltip";
-import Accordion from "@mui/material/Accordion";
-import AccordionSummary from "@mui/material/AccordionSummary";
-import AccordionDetails from "@mui/material/AccordionDetails";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import { Autocomplete, Box, Button, Typography } from "@mui/material";
+import ArrowLeftIcon from "@mui/icons-material/ArrowLeft";
+import ArrowRightIcon from "@mui/icons-material/ArrowRight";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
-import ArrowLeftIcon from "@mui/icons-material/ArrowLeft";
-import ArrowRightIcon from "@mui/icons-material/ArrowRight";
 import DetailMap from "./DetailMap";
 import DateUserInputs from "./DateUserInputs";
 import { CodeTypes } from "./Codetypes";
@@ -59,7 +61,6 @@ export default function BohrprofilForm(props) {
   const [formationEndtiefeCodes, setFormationEndtiefeCodes] = useState([]);
   const [openSchichtConfirmation, setOpenSchichtConfirmation] = useState(false);
   const [openVorkommnisConfirmation, setOpenVorkommnisConfirmation] = useState(false);
-  const [mapExpanded, setMapExpanded] = useState(true);
   const [selectedDate, setSelectedDate] = useState();
 
   const currentBohrprofilIndex =
@@ -225,350 +226,357 @@ export default function BohrprofilForm(props) {
         )}
       </DialogTitle>
       <DialogContent>
-        <LocalizationProvider dateAdapter={AdapterDateFns}>
-          <DatePicker
-            label="Datum des Bohrprofils"
-            disableFuture
-            inputFormat="dd.MM.yyyy"
-            value={selectedDate || null}
-            onChange={(value) => {
-              setSelectedDate(value);
-              //setValue only needed to dirty form
-              setValue("datum", value, { shouldDirty: true });
-            }}
-            disabled={readOnly}
-            renderInput={(params) => (
-              <TextField
-                InputLabelProps={{ shrink: selectedDate != null }}
-                sx={{ marginRight: "6%", width: "47%" }}
-                margin="normal"
-                variant="standard"
-                {...register("datum")}
-                {...params}
+        <Stack
+          direction={{ xs: "column", md: "row" }}
+          justifyContent="space-evenly"
+          alignItems="flex-start"
+          spacing={2}
+        >
+          <Box sx={{ width: { xs: "100%", md: "50%" } }}>
+            <LocalizationProvider dateAdapter={AdapterDateFns}>
+              <DatePicker
+                label="Datum des Bohrprofils"
+                disableFuture
+                inputFormat="dd.MM.yyyy"
+                value={selectedDate || null}
+                onChange={(value) => {
+                  setSelectedDate(value);
+                  //setValue only needed to dirty form
+                  setValue("datum", value, { shouldDirty: true });
+                }}
+                disabled={readOnly}
+                renderInput={(params) => (
+                  <TextField
+                    InputLabelProps={{ shrink: selectedDate != null }}
+                    sx={{ marginRight: "6%", width: "47%" }}
+                    margin="normal"
+                    variant="standard"
+                    {...register("datum")}
+                    {...params}
+                  />
+                )}
               />
-            )}
-          />
-        </LocalizationProvider>
-        <Controller
-          name="bemerkung"
-          control={control}
-          defaultValue={currentBohrprofil?.bemerkung}
-          render={({ field }) => (
-            <TextField
-              {...field}
-              value={field.value}
-              InputLabelProps={{ shrink: field.value != null }}
-              margin="normal"
-              multiline
-              label="Bemerkungen zum Bohrprofil"
-              type="text"
-              fullWidth
-              variant="standard"
-              {...register("bemerkung")}
-            />
-          )}
-        />
-        <Controller
-          name="kote"
-          control={control}
-          defaultValue={currentBohrprofil?.kote}
-          render={({ field }) => (
-            <TextField
-              {...field}
-              InputLabelProps={{ shrink: field.value != null }}
-              value={field.value}
-              sx={{ marginRight: "6%", width: "47%" }}
-              margin="normal"
-              label="Terrainkote der Bohrung [m ü. M.]"
-              type="number"
-              variant="standard"
-              {...register("kote")}
-            />
-          )}
-        />
-        <Controller
-          name="endteufe"
-          control={control}
-          defaultValue={currentBohrprofil?.endteufe}
-          render={({ field }) => (
-            <TextField
-              {...field}
-              InputLabelProps={{ shrink: field.value != null }}
-              value={field.value}
-              sx={{ width: "47%" }}
-              margin="normal"
-              label="Endtiefe der Bohrung [m u. T.]"
-              type="number"
-              variant="standard"
-              {...register("endteufe")}
-            />
-          )}
-        />
-        <Controller
-          name="tektonikId"
-          control={control}
-          defaultValue={currentBohrprofil?.tektonikId}
-          render={({ field }) => (
-            <Autocomplete
-              {...field}
-              options={tektonikCodes.sort((a, b) => a.kurztext.localeCompare(b.kurztext)).map((c) => c.id)}
-              value={field.value}
-              getOptionLabel={(option) => tektonikCodes.find((c) => c.id === option)?.kurztext}
-              onChange={(_, data) => field.onChange(data)}
-              autoHighlight
-              renderInput={(params) => (
+            </LocalizationProvider>
+            <Controller
+              name="bemerkung"
+              control={control}
+              defaultValue={currentBohrprofil?.bemerkung}
+              render={({ field }) => (
                 <TextField
-                  {...params}
-                  sx={{ marginRight: "6%", width: "47%" }}
+                  {...field}
+                  value={field.value}
+                  InputLabelProps={{ shrink: field.value != null }}
                   margin="normal"
-                  label="Klassierung der Tektonik"
+                  multiline
+                  label="Bemerkungen zum Bohrprofil"
                   type="text"
+                  fullWidth
                   variant="standard"
+                  {...register("bemerkung")}
                 />
               )}
             />
-          )}
-        />
-        <Controller
-          name="formationFelsId"
-          control={control}
-          defaultValue={currentBohrprofil?.formationFelsId}
-          render={({ field }) => (
-            <Autocomplete
-              {...field}
-              options={formationFelsCodes.sort((a, b) => a.kurztext.localeCompare(b.kurztext)).map((c) => c.id)}
-              value={field.value}
-              getOptionLabel={(option) => formationFelsCodes.find((c) => c.id === option)?.kurztext}
-              onChange={(_, data) => field.onChange(data)}
-              autoHighlight
-              renderInput={(params) => (
+            <Controller
+              name="kote"
+              control={control}
+              defaultValue={currentBohrprofil?.kote}
+              render={({ field }) => (
                 <TextField
-                  {...params}
-                  sx={{ width: "47%" }}
+                  {...field}
+                  InputLabelProps={{ shrink: field.value != null }}
+                  value={field.value}
+                  sx={{ marginRight: "6%", width: "47%" }}
                   margin="normal"
-                  label="Formation Felsoberfläche"
-                  type="text"
+                  label="Terrainkote der Bohrung [m ü. M.]"
+                  type="number"
                   variant="standard"
+                  {...register("kote")}
                 />
               )}
             />
-          )}
-        />
-        <Controller
-          name="formationEndtiefeId"
-          control={control}
-          defaultValue={currentBohrprofil?.formationEndtiefeId}
-          render={({ field }) => (
-            <Autocomplete
-              {...field}
-              options={formationEndtiefeCodes.sort((a, b) => a.kurztext.localeCompare(b.kurztext)).map((c) => c.id)}
-              value={field.value}
-              getOptionLabel={(option) => formationEndtiefeCodes.find((c) => c.id === option)?.kurztext}
-              onChange={(_, data) => field.onChange(data)}
-              autoHighlight
-              renderInput={(params) => (
+            <Controller
+              name="endteufe"
+              control={control}
+              defaultValue={currentBohrprofil?.endteufe}
+              render={({ field }) => (
                 <TextField
-                  {...params}
-                  sx={{ marginRight: "6%", width: "47%" }}
+                  {...field}
+                  InputLabelProps={{ shrink: field.value != null }}
+                  value={field.value}
+                  sx={{ width: "47%" }}
                   margin="normal"
-                  label="Formation auf Endtiefe"
-                  type="text"
+                  label="Endtiefe der Bohrung [m u. T.]"
+                  type="number"
                   variant="standard"
+                  {...register("endteufe")}
+                />
+              )}
+            />
+            <Controller
+              name="tektonikId"
+              control={control}
+              defaultValue={currentBohrprofil?.tektonikId}
+              render={({ field }) => (
+                <Autocomplete
+                  {...field}
+                  options={tektonikCodes.sort((a, b) => a.kurztext.localeCompare(b.kurztext)).map((c) => c.id)}
+                  value={field.value}
+                  getOptionLabel={(option) => tektonikCodes.find((c) => c.id === option)?.kurztext}
+                  onChange={(_, data) => field.onChange(data)}
+                  autoHighlight
+                  renderInput={(params) => (
+                    <TextField
+                      {...params}
+                      sx={{ marginRight: "6%", width: "47%" }}
+                      margin="normal"
+                      label="Klassierung der Tektonik"
+                      type="text"
+                      variant="standard"
+                    />
+                  )}
                 />
               )}
             />
-          )}
-        />
-        <Controller
-          name="qualitaetId"
-          control={control}
-          defaultValue={currentBohrprofil?.qualitaetId}
-          render={({ field }) => (
-            <Autocomplete
-              {...field}
-              options={qualitaetCodes.sort((a, b) => a.kurztext.localeCompare(b.kurztext)).map((c) => c.id)}
-              value={field.value}
-              getOptionLabel={(option) => qualitaetCodes.find((c) => c.id === option)?.kurztext}
-              onChange={(_, data) => field.onChange(data)}
-              autoHighlight
-              renderInput={(params) => (
+            <Controller
+              name="formationFelsId"
+              control={control}
+              defaultValue={currentBohrprofil?.formationFelsId}
+              render={({ field }) => (
+                <Autocomplete
+                  {...field}
+                  options={formationFelsCodes.sort((a, b) => a.kurztext.localeCompare(b.kurztext)).map((c) => c.id)}
+                  value={field.value}
+                  getOptionLabel={(option) => formationFelsCodes.find((c) => c.id === option)?.kurztext}
+                  onChange={(_, data) => field.onChange(data)}
+                  autoHighlight
+                  renderInput={(params) => (
+                    <TextField
+                      {...params}
+                      sx={{ width: "47%" }}
+                      margin="normal"
+                      label="Formation Felsoberfläche"
+                      type="text"
+                      variant="standard"
+                    />
+                  )}
+                />
+              )}
+            />
+            <Controller
+              name="formationEndtiefeId"
+              control={control}
+              defaultValue={currentBohrprofil?.formationEndtiefeId}
+              render={({ field }) => (
+                <Autocomplete
+                  {...field}
+                  options={formationEndtiefeCodes.sort((a, b) => a.kurztext.localeCompare(b.kurztext)).map((c) => c.id)}
+                  value={field.value}
+                  getOptionLabel={(option) => formationEndtiefeCodes.find((c) => c.id === option)?.kurztext}
+                  onChange={(_, data) => field.onChange(data)}
+                  autoHighlight
+                  renderInput={(params) => (
+                    <TextField
+                      {...params}
+                      sx={{ marginRight: "6%", width: "47%" }}
+                      margin="normal"
+                      label="Formation auf Endtiefe"
+                      type="text"
+                      variant="standard"
+                    />
+                  )}
+                />
+              )}
+            />
+            <Controller
+              name="qualitaetId"
+              control={control}
+              defaultValue={currentBohrprofil?.qualitaetId}
+              render={({ field }) => (
+                <Autocomplete
+                  {...field}
+                  options={qualitaetCodes.sort((a, b) => a.kurztext.localeCompare(b.kurztext)).map((c) => c.id)}
+                  value={field.value}
+                  getOptionLabel={(option) => qualitaetCodes.find((c) => c.id === option)?.kurztext}
+                  onChange={(_, data) => field.onChange(data)}
+                  autoHighlight
+                  renderInput={(params) => (
+                    <TextField
+                      {...params}
+                      sx={{ width: "47%" }}
+                      margin="normal"
+                      label="Qualität der Angaben zum Bohrprofil"
+                      type="text"
+                      variant="standard"
+                    />
+                  )}
+                />
+              )}
+            />
+            <Controller
+              name="qualitaetBemerkung"
+              control={control}
+              defaultValue={currentBohrprofil?.qualitaetBemerkung}
+              render={({ field }) => (
                 <TextField
-                  {...params}
-                  sx={{ width: "47%" }}
+                  {...field}
+                  value={field.value}
+                  InputLabelProps={{ shrink: field.value != null }}
                   margin="normal"
-                  label="Qualität der Angaben zum Bohrprofil"
+                  multiline
+                  label="Bemerkungen zur Qualitätsangabe"
                   type="text"
+                  fullWidth
                   variant="standard"
+                  {...register("qualitaetBemerkung")}
                 />
               )}
             />
-          )}
-        />
-        <Controller
-          name="qualitaetBemerkung"
-          control={control}
-          defaultValue={currentBohrprofil?.qualitaetBemerkung}
-          render={({ field }) => (
-            <TextField
-              {...field}
-              value={field.value}
-              InputLabelProps={{ shrink: field.value != null }}
-              margin="normal"
-              multiline
-              label="Bemerkungen zur Qualitätsangabe"
-              type="text"
-              fullWidth
-              variant="standard"
-              {...register("qualitaetBemerkung")}
-            />
-          )}
-        />
-        {currentBohrprofil?.id && <DateUserInputs formObject={currentBohrprofil}></DateUserInputs>}
-        <Accordion
-          sx={{ boxShadow: "none" }}
-          expanded={mapExpanded}
-          onChange={(_, expanded) => setMapExpanded(expanded)}
-        >
-          <Tooltip title={mapExpanded ? "Übersichtskarte verbergen" : "Übersichtskarte anzeigen"}>
-            <AccordionSummary expandIcon={<ExpandMoreIcon />}>Lokalität der Bohrung</AccordionSummary>
-          </Tooltip>
-          <AccordionDetails>
+            {currentBohrprofil?.id && <DateUserInputs formObject={currentBohrprofil}></DateUserInputs>}
+          </Box>
+          <Box sx={{ width: { xs: "100%", md: "50%" }, paddingLeft: { xs: 0, md: 4 } }}>
+            <Typography>Lokalität der Bohrung</Typography>
             <DetailMap bohrungen={[currentBohrung]} currentForm={"bohrprofil"}></DetailMap>
-          </AccordionDetails>
-        </Accordion>
-        <Typography sx={{ marginTop: "15px" }} variant="h6" gutterBottom>
-          Schichten ({currentBohrprofil?.schichten ? currentBohrprofil.schichten.length : 0})
-          <Tooltip title="Schicht hinzufügen">
-            <span>
-              <IconButton
-                color="primary"
-                name="add-schicht-button"
-                disabled={readOnly || currentBohrprofil?.id == null}
-                onClick={onAddSchicht}
-              >
-                <AddCircleIcon />
-              </IconButton>
-            </span>
-          </Tooltip>
-        </Typography>
-        {currentBohrprofil?.id == null && (
-          <Typography>Bitte speichern Sie das Bohrprofil bevor Sie Schichten und Vorkommnisse hinzufügen.</Typography>
-        )}
-        {currentBohrprofil?.schichten?.length > 0 && (
-          <React.Fragment>
+            <Typography sx={{ marginTop: "15px" }} variant="h6" gutterBottom>
+              Schichten ({currentBohrprofil?.schichten ? currentBohrprofil.schichten.length : 0})
+              <Tooltip title="Schicht hinzufügen">
+                <span>
+                  <IconButton
+                    color="primary"
+                    name="add-schicht-button"
+                    disabled={readOnly || currentBohrprofil?.id == null}
+                    onClick={onAddSchicht}
+                  >
+                    <AddCircleIcon />
+                  </IconButton>
+                </span>
+              </Tooltip>
+            </Typography>
+            {currentBohrprofil?.id == null && (
+              <Typography>
+                Bitte speichern Sie das Bohrprofil bevor Sie Schichten und Vorkommnisse hinzufügen.
+              </Typography>
+            )}
             {currentBohrprofil?.schichten?.length > 0 && (
-              <Table name="schichten-table" size="small">
-                <TableHead>
-                  <TableRow>
-                    <TableCell>Tiefe [m u. T.]</TableCell>
-                    <TableCell>Schichtgrenze</TableCell>
-                    <TableCell></TableCell>
-                  </TableRow>
-                </TableHead>
-                <TableBody>
-                  {currentBohrprofil.schichten.map((schicht) => (
-                    <TableRow key={schicht.id}>
-                      <TableCell>{schicht.tiefe}</TableCell>
-                      <TableCell>{schicht.codeSchicht?.kurztext}</TableCell>
-                      <TableCell align="right">
-                        <Tooltip title="Schicht editieren">
-                          <IconButton onClick={() => onEditSchicht(schicht)} name="edit-button" color="primary">
-                            {readOnly ? <PreviewIcon /> : <EditIcon />}
-                          </IconButton>
-                        </Tooltip>
-                        <Tooltip title="Schicht duplizieren">
-                          <IconButton
-                            onClick={() => onCopySchicht(schicht)}
-                            name="copy-button"
-                            color="primary"
-                            disabled={readOnly}
-                          >
-                            <ContentCopyIcon />
-                          </IconButton>
-                        </Tooltip>
-                        <Tooltip title="Schicht löschen">
-                          <IconButton
-                            onClick={() => onDeleteSchicht(schicht)}
-                            name="delete-button"
-                            color="primary"
-                            disabled={readOnly}
-                          >
-                            <DeleteIcon />
-                          </IconButton>
-                        </Tooltip>
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
+              <React.Fragment>
+                {currentBohrprofil?.schichten?.length > 0 && (
+                  <Table name="schichten-table" size="small">
+                    <TableHead>
+                      <TableRow>
+                        <TableCell>Tiefe [m u. T.]</TableCell>
+                        <TableCell>Schichtgrenze</TableCell>
+                        <TableCell></TableCell>
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {currentBohrprofil.schichten.map((schicht) => (
+                        <TableRow key={schicht.id}>
+                          <TableCell>{schicht.tiefe}</TableCell>
+                          <TableCell>{schicht.codeSchicht?.kurztext}</TableCell>
+                          <TableCell align="right">
+                            <Tooltip title="Schicht editieren">
+                              <IconButton onClick={() => onEditSchicht(schicht)} name="edit-button" color="primary">
+                                {readOnly ? <PreviewIcon /> : <EditIcon />}
+                              </IconButton>
+                            </Tooltip>
+                            <Tooltip title="Schicht duplizieren">
+                              <IconButton
+                                onClick={() => onCopySchicht(schicht)}
+                                name="copy-button"
+                                color="primary"
+                                disabled={readOnly}
+                              >
+                                <ContentCopyIcon />
+                              </IconButton>
+                            </Tooltip>
+                            <Tooltip title="Schicht löschen">
+                              <IconButton
+                                onClick={() => onDeleteSchicht(schicht)}
+                                name="delete-button"
+                                color="primary"
+                                disabled={readOnly}
+                              >
+                                <DeleteIcon />
+                              </IconButton>
+                            </Tooltip>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                )}
+              </React.Fragment>
             )}
-          </React.Fragment>
-        )}
-        <Typography sx={{ marginTop: "15px" }} variant="h6" gutterBottom>
-          Vorkommnisse ({currentBohrprofil?.vorkommnisse ? currentBohrprofil.vorkommnisse.length : 0})
-          <Tooltip title="Vorkommnis hinzufügen">
-            <span>
-              <IconButton
-                color="primary"
-                name="add-vorkommnis-button"
-                disabled={readOnly || currentBohrprofil?.id == null}
-                onClick={onAddVorkommnis}
-              >
-                <AddCircleIcon />
-              </IconButton>
-            </span>
-          </Tooltip>
-        </Typography>
-        {currentBohrprofil?.vorkommnisse?.length > 0 && (
-          <React.Fragment>
+            <Typography sx={{ marginTop: "15px" }} variant="h6" gutterBottom>
+              Vorkommnisse ({currentBohrprofil?.vorkommnisse ? currentBohrprofil.vorkommnisse.length : 0})
+              <Tooltip title="Vorkommnis hinzufügen">
+                <span>
+                  <IconButton
+                    color="primary"
+                    name="add-vorkommnis-button"
+                    disabled={readOnly || currentBohrprofil?.id == null}
+                    onClick={onAddVorkommnis}
+                  >
+                    <AddCircleIcon />
+                  </IconButton>
+                </span>
+              </Tooltip>
+            </Typography>
             {currentBohrprofil?.vorkommnisse?.length > 0 && (
-              <Table name="vorkommnisse-table" size="small">
-                <TableHead>
-                  <TableRow>
-                    <TableCell>Tiefe [m u.T]</TableCell>
-                    <TableCell>Typ</TableCell>
-                    <TableCell></TableCell>
-                  </TableRow>
-                </TableHead>
-                <TableBody>
-                  {currentBohrprofil.vorkommnisse.map((vorkommnis) => (
-                    <TableRow key={vorkommnis.id}>
-                      <TableCell>{vorkommnis.tiefe}</TableCell>
-                      <TableCell>{vorkommnis.typ?.kurztext}</TableCell>
-                      <TableCell align="right">
-                        <Tooltip title="Vorkommnis editieren">
-                          <IconButton onClick={() => onEditVorkommnis(vorkommnis)} name="edit-button" color="primary">
-                            {readOnly ? <PreviewIcon /> : <EditIcon />}
-                          </IconButton>
-                        </Tooltip>
-                        <Tooltip title="Vorkommnis duplizieren">
-                          <IconButton
-                            onClick={() => onCopyVorkommnis(vorkommnis)}
-                            name="copy-button"
-                            color="primary"
-                            disabled={readOnly}
-                          >
-                            <ContentCopyIcon />
-                          </IconButton>
-                        </Tooltip>
-                        <Tooltip title="Vorkommnis löschen">
-                          <IconButton
-                            onClick={() => onDeleteVorkommnis(vorkommnis)}
-                            name="delete-button"
-                            color="primary"
-                            disabled={readOnly}
-                          >
-                            <DeleteIcon />
-                          </IconButton>
-                        </Tooltip>
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
+              <React.Fragment>
+                {currentBohrprofil?.vorkommnisse?.length > 0 && (
+                  <Table name="vorkommnisse-table" size="small">
+                    <TableHead>
+                      <TableRow>
+                        <TableCell>Tiefe [m u.T]</TableCell>
+                        <TableCell>Typ</TableCell>
+                        <TableCell></TableCell>
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {currentBohrprofil.vorkommnisse.map((vorkommnis) => (
+                        <TableRow key={vorkommnis.id}>
+                          <TableCell>{vorkommnis.tiefe}</TableCell>
+                          <TableCell>{vorkommnis.typ?.kurztext}</TableCell>
+                          <TableCell align="right">
+                            <Tooltip title="Vorkommnis editieren">
+                              <IconButton
+                                onClick={() => onEditVorkommnis(vorkommnis)}
+                                name="edit-button"
+                                color="primary"
+                              >
+                                {readOnly ? <PreviewIcon /> : <EditIcon />}
+                              </IconButton>
+                            </Tooltip>
+                            <Tooltip title="Vorkommnis duplizieren">
+                              <IconButton
+                                onClick={() => onCopyVorkommnis(vorkommnis)}
+                                name="copy-button"
+                                color="primary"
+                                disabled={readOnly}
+                              >
+                                <ContentCopyIcon />
+                              </IconButton>
+                            </Tooltip>
+                            <Tooltip title="Vorkommnis löschen">
+                              <IconButton
+                                onClick={() => onDeleteVorkommnis(vorkommnis)}
+                                name="delete-button"
+                                color="primary"
+                                disabled={readOnly}
+                              >
+                                <DeleteIcon />
+                              </IconButton>
+                            </Tooltip>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                )}
+              </React.Fragment>
             )}
-          </React.Fragment>
-        )}
+          </Box>
+        </Stack>
       </DialogContent>
       <DialogActions>
         <Button onClick={handleBack}>{!isDirty || readOnly ? "Schliessen" : "Abbrechen"}</Button>
diff --git a/src/ClientApp/src/components/BohrungForm.js b/src/ClientApp/src/components/BohrungForm.js
index 7d4e4ef..f8d340b 100644
--- a/src/ClientApp/src/components/BohrungForm.js
+++ b/src/ClientApp/src/components/BohrungForm.js
@@ -1,26 +1,28 @@
 import React, { useState, useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
-import TextField from "@mui/material/TextField";
-import Table from "@mui/material/Table";
-import IconButton from "@mui/material/IconButton";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableHead from "@mui/material/TableHead";
-import TableRow from "@mui/material/TableRow";
+import {
+  Autocomplete,
+  Box,
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  TextField,
+  Tooltip,
+  Typography,
+} from "@mui/material";
 import EditIcon from "@mui/icons-material/Edit";
 import PreviewIcon from "@mui/icons-material/Preview";
 import DeleteIcon from "@mui/icons-material/Delete";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
-import DialogActions from "@mui/material/DialogActions";
-import DialogContent from "@mui/material/DialogContent";
-import DialogTitle from "@mui/material/DialogTitle";
 import AddCircleIcon from "@mui/icons-material/AddCircle";
-import Tooltip from "@mui/material/Tooltip";
-import Accordion from "@mui/material/Accordion";
-import AccordionSummary from "@mui/material/AccordionSummary";
-import AccordionDetails from "@mui/material/AccordionDetails";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import { Autocomplete, Box, Button, Typography } from "@mui/material";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
@@ -29,11 +31,11 @@ import ArrowRightIcon from "@mui/icons-material/ArrowRight";
 import DetailMap from "./DetailMap";
 import DateUserInputs from "./DateUserInputs";
 import ConfirmationDialog from "./ConfirmationDialog";
+import { CodeTypes } from "./Codetypes";
 import { getDistance } from "ol/sphere";
 import { transform } from "ol/proj";
 import { register as registerProjection } from "ol/proj/proj4";
 import proj4 from "proj4";
-import { CodeTypes } from "./Codetypes";
 
 export default function BohrungForm(props) {
   const {
@@ -56,7 +58,6 @@ export default function BohrungForm(props) {
   const [ablenkungCodes, setAblenkungCodes] = useState([]);
   const [qualitaetCodes, setQualitaetCodes] = useState([]);
   const [openConfirmation, setOpenConfirmation] = useState(false);
-  const [mapExpanded, setMapExpanded] = useState(true);
   const [selectedDate, setSelectedDate] = useState();
 
   const currentBohrungIndex =
@@ -215,189 +216,189 @@ export default function BohrungForm(props) {
         )}
       </DialogTitle>
       <DialogContent>
-        <Controller
-          name="bezeichnung"
-          control={control}
-          defaultValue={currentBohrung?.bezeichnung}
-          render={({ field, fieldState: { error } }) => (
-            <TextField
-              {...field}
-              autoFocus
-              value={field.value}
-              margin="normal"
-              label="Bezeichnung der Bohrung"
-              type="text"
-              fullWidth
-              variant="standard"
-              {...register("bezeichnung", { required: true })}
-              error={error !== undefined}
-              helperText={error ? "Geben Sie eine Bezeichnung ein" : ""}
+        <Stack
+          direction={{ xs: "column", sm: "column", md: "row" }}
+          justifyContent="space-evenly"
+          alignItems="flex-start"
+          spacing={2}
+        >
+          <Box sx={{ width: { xs: "100%", sm: "100%", md: "50%" } }}>
+            <Controller
+              name="bezeichnung"
+              control={control}
+              defaultValue={currentBohrung?.bezeichnung}
+              render={({ field, fieldState: { error } }) => (
+                <TextField
+                  {...field}
+                  autoFocus
+                  value={field.value}
+                  margin="normal"
+                  label="Bezeichnung der Bohrung"
+                  type="text"
+                  fullWidth
+                  variant="standard"
+                  {...register("bezeichnung", { required: true })}
+                  error={error !== undefined}
+                  helperText={error ? "Geben Sie eine Bezeichnung ein" : ""}
+                />
+              )}
             />
-          )}
-        />
-        <Controller
-          name="bemerkung"
-          control={control}
-          defaultValue={currentBohrung?.bemerkung}
-          render={({ field }) => (
-            <TextField
-              {...field}
-              value={field.value}
-              margin="normal"
-              InputLabelProps={{ shrink: field.value != null }}
-              multiline
-              label="Bemerkung zur Bohrung"
-              type="text"
-              fullWidth
-              variant="standard"
-              {...register("bemerkung")}
+            <Controller
+              name="bemerkung"
+              control={control}
+              defaultValue={currentBohrung?.bemerkung}
+              render={({ field }) => (
+                <TextField
+                  {...field}
+                  value={field.value}
+                  margin="normal"
+                  InputLabelProps={{ shrink: field.value != null }}
+                  multiline
+                  label="Bemerkung zur Bohrung"
+                  type="text"
+                  fullWidth
+                  variant="standard"
+                  {...register("bemerkung")}
+                />
+              )}
             />
-          )}
-        />
-        <LocalizationProvider dateAdapter={AdapterDateFns}>
-          <DatePicker
-            label="Datum des Bohrbeginns"
-            disableFuture
-            inputFormat="dd.MM.yyyy"
-            value={selectedDate}
-            onChange={(value) => {
-              setSelectedDate(value);
-              //setValue only needed to dirty form
-              setValue("datum", value, { shouldDirty: true });
-            }}
-            disabled={readOnly}
-            renderInput={(params) => (
-              <TextField
-                InputLabelProps={{ shrink: selectedDate != null }}
-                sx={{ marginRight: "6%", width: "47%" }}
-                margin="normal"
-                variant="standard"
-                {...register("datum")}
-                {...params}
+            <LocalizationProvider dateAdapter={AdapterDateFns}>
+              <DatePicker
+                label="Datum des Bohrbeginns"
+                disableFuture
+                inputFormat="dd.MM.yyyy"
+                value={selectedDate}
+                onChange={(value) => {
+                  setSelectedDate(value);
+                  //setValue only needed to dirty form
+                  setValue("datum", value, { shouldDirty: true });
+                }}
+                disabled={readOnly}
+                renderInput={(params) => (
+                  <TextField
+                    InputLabelProps={{ shrink: selectedDate != null }}
+                    sx={{ marginRight: "6%", width: "47%" }}
+                    margin="normal"
+                    variant="standard"
+                    {...register("datum")}
+                    {...params}
+                  />
+                )}
               />
-            )}
-          />
-        </LocalizationProvider>
-        <Controller
-          name="durchmesserBohrloch"
-          control={control}
-          defaultValue={currentBohrung?.durchmesserBohrloch}
-          render={({ field }) => (
-            <TextField
-              {...field}
-              value={field.value}
-              InputLabelProps={{ shrink: field.value != null }}
-              sx={{ width: "47%" }}
-              margin="normal"
-              label="Durchmesser Bohrloch [mm]"
-              type="number"
-              variant="standard"
-              {...register("durchmesserBohrloch")}
+            </LocalizationProvider>
+            <Controller
+              name="durchmesserBohrloch"
+              control={control}
+              defaultValue={currentBohrung?.durchmesserBohrloch}
+              render={({ field }) => (
+                <TextField
+                  {...field}
+                  value={field.value}
+                  InputLabelProps={{ shrink: field.value != null }}
+                  sx={{ width: "47%" }}
+                  margin="normal"
+                  label="Durchmesser Bohrloch [mm]"
+                  type="number"
+                  variant="standard"
+                  {...register("durchmesserBohrloch")}
+                />
+              )}
+            />
+            <Controller
+              name="ablenkungId"
+              control={control}
+              defaultValue={currentBohrung?.ablenkungId}
+              render={({ field }) => (
+                <Autocomplete
+                  {...field}
+                  options={ablenkungCodes.sort((a, b) => a.kurztext.localeCompare(b.kurztext)).map((c) => c.id)}
+                  value={field.value}
+                  onChange={(_, data) => field.onChange(data)}
+                  getOptionLabel={(option) => ablenkungCodes.find((c) => c.id === option)?.kurztext}
+                  autoHighlight
+                  renderInput={(params) => (
+                    <TextField
+                      {...params}
+                      margin="normal"
+                      label="Ablenkung der Bohrung"
+                      type="text"
+                      sx={{ marginRight: "6%", width: "47%" }}
+                      variant="standard"
+                    />
+                  )}
+                />
+              )}
             />
-          )}
-        />
-        <Controller
-          name="ablenkungId"
-          control={control}
-          defaultValue={currentBohrung?.ablenkungId}
-          render={({ field }) => (
-            <Autocomplete
-              {...field}
-              options={ablenkungCodes.sort((a, b) => a.kurztext.localeCompare(b.kurztext)).map((c) => c.id)}
-              value={field.value}
-              onChange={(_, data) => field.onChange(data)}
-              getOptionLabel={(option) => ablenkungCodes.find((c) => c.id === option)?.kurztext}
-              autoHighlight
-              renderInput={(params) => (
+            <Controller
+              name="qualitaetId"
+              control={control}
+              defaultValue={currentBohrung?.qualitaetId}
+              render={({ field }) => (
+                <Autocomplete
+                  {...field}
+                  options={qualitaetCodes.sort((a, b) => a.kurztext.localeCompare(b.kurztext)).map((c) => c.id)}
+                  value={field.value}
+                  getOptionLabel={(option) => qualitaetCodes.find((c) => c.id === option)?.kurztext}
+                  onChange={(_, data) => field.onChange(data)}
+                  autoHighlight
+                  renderInput={(params) => (
+                    <TextField
+                      {...params}
+                      sx={{ width: "47%" }}
+                      margin="normal"
+                      label="Qualität der Angaben zur Bohrung"
+                      type="text"
+                      variant="standard"
+                    />
+                  )}
+                />
+              )}
+            />
+            <Controller
+              name="qualitaetBemerkung"
+              control={control}
+              defaultValue={currentBohrung?.qualitaetBemerkung}
+              render={({ field }) => (
                 <TextField
-                  {...params}
+                  {...field}
+                  value={field.value}
+                  InputLabelProps={{ shrink: field.value != null }}
+                  sx={{ marginRight: "6%", width: "47%" }}
                   margin="normal"
-                  label="Ablenkung der Bohrung"
+                  multiline
+                  label="Bemerkung zur Qualitätsangabe"
                   type="text"
-                  sx={{ marginRight: "6%", width: "47%" }}
                   variant="standard"
+                  {...register("qualitaetBemerkung")}
                 />
               )}
             />
-          )}
-        />
-        <Controller
-          name="qualitaetId"
-          control={control}
-          defaultValue={currentBohrung?.qualitaetId}
-          render={({ field }) => (
-            <Autocomplete
-              {...field}
-              options={qualitaetCodes.sort((a, b) => a.kurztext.localeCompare(b.kurztext)).map((c) => c.id)}
-              value={field.value}
-              getOptionLabel={(option) => qualitaetCodes.find((c) => c.id === option)?.kurztext}
-              onChange={(_, data) => field.onChange(data)}
-              autoHighlight
-              renderInput={(params) => (
+            <Controller
+              name="quelleRef"
+              control={control}
+              defaultValue={currentBohrung?.quelleRef}
+              render={({ field }) => (
                 <TextField
-                  {...params}
-                  sx={{ width: "47%" }}
+                  {...field}
+                  InputLabelProps={{ shrink: field.value != null }}
+                  value={field.value}
                   margin="normal"
-                  label="Qualität der Angaben zur Bohrung"
+                  label="Autor der geologischen Aufnahme"
                   type="text"
+                  sx={{ width: "47%" }}
                   variant="standard"
+                  {...register("quelleRef")}
                 />
               )}
             />
-          )}
-        />
-        <Controller
-          name="qualitaetBemerkung"
-          control={control}
-          defaultValue={currentBohrung?.qualitaetBemerkung}
-          render={({ field }) => (
-            <TextField
-              {...field}
-              value={field.value}
-              InputLabelProps={{ shrink: field.value != null }}
-              sx={{ marginRight: "6%", width: "47%" }}
-              margin="normal"
-              multiline
-              label="Bemerkung zur Qualitätsangabe"
-              type="text"
-              variant="standard"
-              {...register("qualitaetBemerkung")}
-            />
-          )}
-        />
-        <Controller
-          name="quelleRef"
-          control={control}
-          defaultValue={currentBohrung?.quelleRef}
-          render={({ field }) => (
-            <TextField
-              {...field}
-              InputLabelProps={{ shrink: field.value != null }}
-              value={field.value}
-              margin="normal"
-              label="Autor der geologischen Aufnahme"
-              type="text"
-              sx={{ width: "47%" }}
-              variant="standard"
-              {...register("quelleRef")}
-            />
-          )}
-        />
-        {currentBohrung?.id && <DateUserInputs formObject={currentBohrung}></DateUserInputs>}
-
-        <Accordion
-          sx={{ boxShadow: "none" }}
-          expanded={mapExpanded}
-          onChange={(_, expanded) => setMapExpanded(expanded)}
-        >
-          <Tooltip title={mapExpanded ? "Übersichtskarte verbergen" : "Übersichtskarte anzeigen"}>
-            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+            {currentBohrung?.id && <DateUserInputs formObject={currentBohrung}></DateUserInputs>}
+          </Box>
+          <Box sx={{ width: { xs: "100%", md: "50%" }, paddingLeft: { xs: 0, md: 4 } }}>
+            <Typography>
               {currentInteraction === "add"
                 ? "Position der Bohrung durch Klicken in der Karte wählen"
                 : "Position der Bohrung durch Klicken in der Karte ändern"}
-            </AccordionSummary>
-          </Tooltip>
-          <AccordionDetails>
+            </Typography>
             <DetailMap
               bohrungen={[currentBohrung]}
               currentStandort={currentStandort}
@@ -405,134 +406,140 @@ export default function BohrungForm(props) {
               setCurrentBohrung={setCurrentBohrung}
               readOnly={readOnly}
             ></DetailMap>
-          </AccordionDetails>
-        </Accordion>
-        <Controller
-          name="x_coordinate"
-          control={control}
-          render={({ field, fieldState: { error } }) => (
-            <TextField
-              {...field}
-              sx={{ marginRight: "6%", width: "47%" }}
-              margin="normal"
-              InputLabelProps={{ shrink: field.value != null }}
-              value={field.value}
-              onChange={(value) => field.onChange(value)}
-              label="X-Koordinate der Bohrung"
-              type="number"
-              variant="standard"
-              {...register("x_coordinate", {
-                validate: {
-                  range: (v) => validateXCoordinate(v) || "Die X-Koordinate muss zwischen 2590000 und 2646000 liegen",
-                  distance: (v) =>
-                    validateDistance(v, getValues("y_coordinate")) ||
-                    "Die Distanz der neu erstellten Bohrung darf nicht mehr als 200m zu den bereits vorhandenen Bohrungen betragen",
-                },
-              })}
-              error={error !== undefined}
-              helperText={(error && error.message) || ""}
+            <Controller
+              name="x_coordinate"
+              control={control}
+              render={({ field, fieldState: { error } }) => (
+                <TextField
+                  {...field}
+                  sx={{ marginRight: "6%", width: "47%" }}
+                  margin="normal"
+                  InputLabelProps={{ shrink: field.value != null }}
+                  value={field.value}
+                  onChange={(value) => field.onChange(value)}
+                  label="X-Koordinate der Bohrung"
+                  type="number"
+                  variant="standard"
+                  {...register("x_coordinate", {
+                    validate: {
+                      range: (v) =>
+                        validateXCoordinate(v) || "Die X-Koordinate muss zwischen 2590000 und 2646000 liegen",
+                      distance: (v) =>
+                        validateDistance(v, getValues("y_coordinate")) ||
+                        "Die Distanz der neu erstellten Bohrung darf nicht mehr als 200m zu den bereits vorhandenen Bohrungen betragen",
+                    },
+                  })}
+                  error={error !== undefined}
+                  helperText={(error && error.message) || ""}
+                />
+              )}
             />
-          )}
-        />
 
-        <Controller
-          name="y_coordinate"
-          control={control}
-          render={({ field, fieldState: { error } }) => (
-            <TextField
-              {...field}
-              sx={{ width: "47%" }}
-              margin="normal"
-              InputLabelProps={{ shrink: field.value != null }}
-              value={field.value}
-              onChange={(value) => field.onChange(value)}
-              label="Y-Koordinate der Bohrung"
-              type="number"
-              variant="standard"
-              {...register("y_coordinate", {
-                validate: {
-                  range: (v) => validateYCoordinate(v) || "Die Y-Koordinate muss zwischen 1212000 und 1264000 liegen",
-                  distance: (v) =>
-                    validateDistance(getValues("x_coordinate"), v) ||
-                    "Die Distanz der neu erstellten Bohrung darf nicht mehr als 200m zu den bereits vorhandenen Bohrungen betragen",
-                },
-              })}
-              error={error !== undefined}
-              helperText={(error && error.message) || ""}
+            <Controller
+              name="y_coordinate"
+              control={control}
+              render={({ field, fieldState: { error } }) => (
+                <TextField
+                  {...field}
+                  sx={{ width: "47%" }}
+                  margin="normal"
+                  InputLabelProps={{ shrink: field.value != null }}
+                  value={field.value}
+                  onChange={(value) => field.onChange(value)}
+                  label="Y-Koordinate der Bohrung"
+                  type="number"
+                  variant="standard"
+                  {...register("y_coordinate", {
+                    validate: {
+                      range: (v) =>
+                        validateYCoordinate(v) || "Die Y-Koordinate muss zwischen 1212000 und 1264000 liegen",
+                      distance: (v) =>
+                        validateDistance(getValues("x_coordinate"), v) ||
+                        "Die Distanz der neu erstellten Bohrung darf nicht mehr als 200m zu den bereits vorhandenen Bohrungen betragen",
+                    },
+                  })}
+                  error={error !== undefined}
+                  helperText={(error && error.message) || ""}
+                />
+              )}
             />
-          )}
-        />
 
-        <Typography sx={{ marginTop: "15px" }} variant="h6" gutterBottom>
-          Bohrprofile ({currentBohrung?.bohrprofile ? currentBohrung.bohrprofile.length : 0})
-          <Tooltip title="Bohrprofil hinzufügen">
-            <span>
-              <IconButton
-                color="primary"
-                name="add-button"
-                disabled={readOnly || currentBohrung?.id == null}
-                onClick={onAddBohrprofil}
-              >
-                <AddCircleIcon />
-              </IconButton>
-            </span>
-          </Tooltip>
-        </Typography>
-        {currentBohrung?.id == null && (
-          <Typography>Bitte speichern Sie die Bohrung bevor Sie Bohrprofile hinzufügen.</Typography>
-        )}
-        {currentBohrung?.bohrprofile?.length > 0 && (
-          <React.Fragment>
+            <Typography sx={{ marginTop: "15px" }} variant="h6" gutterBottom>
+              Bohrprofile ({currentBohrung?.bohrprofile ? currentBohrung.bohrprofile.length : 0})
+              <Tooltip title="Bohrprofil hinzufügen">
+                <span>
+                  <IconButton
+                    color="primary"
+                    name="add-button"
+                    disabled={readOnly || currentBohrung?.id == null}
+                    onClick={onAddBohrprofil}
+                  >
+                    <AddCircleIcon />
+                  </IconButton>
+                </span>
+              </Tooltip>
+            </Typography>
+            {currentBohrung?.id == null && (
+              <Typography>Bitte speichern Sie die Bohrung bevor Sie Bohrprofile hinzufügen.</Typography>
+            )}
             {currentBohrung?.bohrprofile?.length > 0 && (
-              <Table name="bohrprofile-table" size="small">
-                <TableHead>
-                  <TableRow>
-                    <TableCell>Datum</TableCell>
-                    <TableCell>Endteufe [m]</TableCell>
-                    <TableCell></TableCell>
-                  </TableRow>
-                </TableHead>
-                <TableBody>
-                  {currentBohrung.bohrprofile.map((bohrprofil) => (
-                    <TableRow key={bohrprofil.id}>
-                      <TableCell>
-                        {bohrprofil?.datum != null ? new Date(bohrprofil.datum).toLocaleDateString() : null}
-                      </TableCell>
-                      <TableCell>{bohrprofil.endteufe}</TableCell>
-                      <TableCell align="right">
-                        <Tooltip title="Bohrprofil editieren">
-                          <IconButton onClick={() => onEditBohrprofil(bohrprofil)} name="edit-button" color="primary">
-                            {readOnly ? <PreviewIcon /> : <EditIcon />}
-                          </IconButton>
-                        </Tooltip>
-                        <Tooltip title="Bohrprofil duplizieren">
-                          <IconButton
-                            onClick={() => onCopyBohrprofil(bohrprofil)}
-                            name="copy-button"
-                            color="primary"
-                            disabled={readOnly}
-                          >
-                            <ContentCopyIcon />
-                          </IconButton>
-                        </Tooltip>
-                        <Tooltip title="Bohrprofil löschen">
-                          <IconButton
-                            onClick={() => onDeleteBohrprofil(bohrprofil)}
-                            name="delete-button"
-                            color="primary"
-                            disabled={readOnly}
-                          >
-                            <DeleteIcon />
-                          </IconButton>
-                        </Tooltip>
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
+              <React.Fragment>
+                {currentBohrung?.bohrprofile?.length > 0 && (
+                  <Table name="bohrprofile-table" size="small">
+                    <TableHead>
+                      <TableRow>
+                        <TableCell>Datum</TableCell>
+                        <TableCell>Endteufe [m]</TableCell>
+                        <TableCell></TableCell>
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {currentBohrung.bohrprofile.map((bohrprofil) => (
+                        <TableRow key={bohrprofil.id}>
+                          <TableCell>
+                            {bohrprofil?.datum != null ? new Date(bohrprofil.datum).toLocaleDateString() : null}
+                          </TableCell>
+                          <TableCell>{bohrprofil.endteufe}</TableCell>
+                          <TableCell align="right">
+                            <Tooltip title="Bohrprofil editieren">
+                              <IconButton
+                                onClick={() => onEditBohrprofil(bohrprofil)}
+                                name="edit-button"
+                                color="primary"
+                              >
+                                {readOnly ? <PreviewIcon /> : <EditIcon />}
+                              </IconButton>
+                            </Tooltip>
+                            <Tooltip title="Bohrprofil duplizieren">
+                              <IconButton
+                                onClick={() => onCopyBohrprofil(bohrprofil)}
+                                name="copy-button"
+                                color="primary"
+                                disabled={readOnly}
+                              >
+                                <ContentCopyIcon />
+                              </IconButton>
+                            </Tooltip>
+                            <Tooltip title="Bohrprofil löschen">
+                              <IconButton
+                                onClick={() => onDeleteBohrprofil(bohrprofil)}
+                                name="delete-button"
+                                color="primary"
+                                disabled={readOnly}
+                              >
+                                <DeleteIcon />
+                              </IconButton>
+                            </Tooltip>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                )}
+              </React.Fragment>
             )}
-          </React.Fragment>
-        )}
+          </Box>
+        </Stack>
       </DialogContent>
       <DialogActions>
         <Button onClick={handleBack}>{!isDirty || readOnly ? "Schliessen" : "Abbrechen"}</Button>
diff --git a/src/ClientApp/src/components/ConfirmationDialog.js b/src/ClientApp/src/components/ConfirmationDialog.js
index f96a3a9..8a9b2e9 100644
--- a/src/ClientApp/src/components/ConfirmationDialog.js
+++ b/src/ClientApp/src/components/ConfirmationDialog.js
@@ -1,10 +1,5 @@
 import * as React from "react";
-import Button from "@mui/material/Button";
-import Dialog from "@mui/material/Dialog";
-import DialogActions from "@mui/material/DialogActions";
-import DialogContent from "@mui/material/DialogContent";
-import DialogContentText from "@mui/material/DialogContentText";
-import DialogTitle from "@mui/material/DialogTitle";
+import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material";
 
 export default function ConfirmationDialog(props) {
   const { entityName, open, confirm } = props;
diff --git a/src/ClientApp/src/components/InputForm.js b/src/ClientApp/src/components/InputForm.js
index 03e0154..f13ce32 100644
--- a/src/ClientApp/src/components/InputForm.js
+++ b/src/ClientApp/src/components/InputForm.js
@@ -1,9 +1,8 @@
 import React, { useState, useEffect } from "react";
 import MobileStepper from "@mui/material/MobileStepper";
-import Button from "@mui/material/Button";
+import { Button, Tooltip } from "@mui/material";
 import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
 import CloseIcon from "@mui/icons-material/Close";
-import Tooltip from "@mui/material/Tooltip";
 import StandortForm from "./StandortForm";
 import BohrungForm from "./BohrungForm";
 import BohrprofilForm from "./BohrprofilForm";
diff --git a/src/ClientApp/src/components/Layout.js b/src/ClientApp/src/components/Layout.js
index 93af6ff..3695bf6 100644
--- a/src/ClientApp/src/components/Layout.js
+++ b/src/ClientApp/src/components/Layout.js
@@ -1,23 +1,25 @@
 import React, { useState } from "react";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import CssBaseline from "@mui/material/CssBaseline";
-import Box from "@mui/material/Box";
-import Toolbar from "@mui/material/Toolbar";
-import List from "@mui/material/List";
-import Typography from "@mui/material/Typography";
-import Divider from "@mui/material/Divider";
-import IconButton from "@mui/material/IconButton";
+import {
+  Box,
+  Divider,
+  IconButton,
+  List,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Toolbar,
+  Tooltip,
+  Typography,
+} from "@mui/material";
 import MenuIcon from "@mui/icons-material/Menu";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import LogoutIcon from "@mui/icons-material/Logout";
-import ListItemButton from "@mui/material/ListItemButton";
-import ListItemIcon from "@mui/material/ListItemIcon";
-import ListItemText from "@mui/material/ListItemText";
 import HomeIcon from "@mui/icons-material/Home";
 import GroupIcon from "@mui/icons-material/Group";
 import InfoIcon from "@mui/icons-material/Info";
 import FileDownloadIcon from "@mui/icons-material/FileDownload";
-import Tooltip from "@mui/material/Tooltip";
 import { Footer } from "./Footer";
 import { AppBar } from "./AppBar";
 import { Drawer } from "./Drawer";
diff --git a/src/ClientApp/src/components/Popup.js b/src/ClientApp/src/components/Popup.js
index 500574a..e9a996d 100644
--- a/src/ClientApp/src/components/Popup.js
+++ b/src/ClientApp/src/components/Popup.js
@@ -1,9 +1,5 @@
 import React from "react";
-import Card from "@mui/material/Card";
-import CardActions from "@mui/material/CardActions";
-import CardContent from "@mui/material/CardContent";
-import Button from "@mui/material/Button";
-import Typography from "@mui/material/Typography";
+import { Button, Card, CardActions, CardContent, Typography } from "@mui/material";
 
 function Popup(props) {
   const { popupElement, closePopup, selectedFeature, standorte, popupVisible } = props;
diff --git a/src/ClientApp/src/components/SchichtForm.js b/src/ClientApp/src/components/SchichtForm.js
index a7f3558..f6a8a9f 100644
--- a/src/ClientApp/src/components/SchichtForm.js
+++ b/src/ClientApp/src/components/SchichtForm.js
@@ -1,16 +1,18 @@
 import React, { useState, useEffect } from "react";
-import DialogActions from "@mui/material/DialogActions";
-import DialogContent from "@mui/material/DialogContent";
-import DialogTitle from "@mui/material/DialogTitle";
+import {
+  Autocomplete,
+  Box,
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Stack,
+  TextField,
+  Tooltip,
+  Typography,
+} from "@mui/material";
 import { Controller, useForm } from "react-hook-form";
-import TextField from "@mui/material/TextField";
-import IconButton from "@mui/material/IconButton";
-import Tooltip from "@mui/material/Tooltip";
-import Accordion from "@mui/material/Accordion";
-import AccordionSummary from "@mui/material/AccordionSummary";
-import AccordionDetails from "@mui/material/AccordionDetails";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import { Autocomplete, Box, Button } from "@mui/material";
 import ArrowLeftIcon from "@mui/icons-material/ArrowLeft";
 import ArrowRightIcon from "@mui/icons-material/ArrowRight";
 import DetailMap from "./DetailMap";
@@ -35,8 +37,6 @@ export default function SchichtForm(props) {
   const [qualitaetCodes, setQualitaetCodes] = useState([]);
   const [codeSchichten, setCodeschichten] = useState([]);
 
-  const [mapExpanded, setMapExpanded] = useState(true);
-
   const currentSchichtIndex =
     currentBohrprofil.schichten?.indexOf(currentBohrprofil.schichten.find((b) => b.id === currentSchicht?.id)) || 0;
 
@@ -97,132 +97,133 @@ export default function SchichtForm(props) {
         )}
       </DialogTitle>
       <DialogContent>
-        <Controller
-          name="tiefe"
-          control={control}
-          defaultValue={currentSchicht?.tiefe}
-          render={({ field, fieldState: { error } }) => (
-            <TextField
-              {...field}
-              value={field.value}
-              sx={{ width: "47%" }}
-              margin="normal"
-              label="Tiefe [m u. T.]"
-              type="number"
-              variant="standard"
-              {...register("tiefe", { required: true })}
-              error={error !== undefined}
-              helperText={error ? "Geben Sie die Tiefe ein" : ""}
-            />
-          )}
-        />
-        <Controller
-          name="codeSchichtId"
-          control={control}
-          defaultValue={currentSchicht?.codeSchichtId}
-          rules={{ required: true }}
-          render={({ field, fieldState: { error } }) => (
-            <Autocomplete
-              {...field}
-              sx={{ width: "47%" }}
-              options={codeSchichten.sort((a, b) => a.kurztext.localeCompare(b.kurztext)).map((c) => c.id)}
-              value={field.value}
-              getOptionLabel={(option) => codeSchichten.find((c) => c.id === option)?.kurztext}
-              onChange={(_, data) => field.onChange(data)}
-              autoHighlight
-              renderInput={(params) => (
+        <Stack
+          direction={{ xs: "column", md: "row" }}
+          justifyContent="space-evenly"
+          alignItems="flex-start"
+          spacing={2}
+        >
+          <Box sx={{ width: { xs: "100%", md: "50%" } }}>
+            <Controller
+              name="tiefe"
+              control={control}
+              defaultValue={currentSchicht?.tiefe}
+              render={({ field, fieldState: { error } }) => (
                 <TextField
-                  {...params}
+                  {...field}
+                  value={field.value}
+                  sx={{ width: "47%" }}
                   margin="normal"
-                  label="Schicht (bzw. Schichtgrenze)"
-                  type="text"
+                  label="Tiefe [m u. T.]"
+                  type="number"
                   variant="standard"
+                  {...register("tiefe", { required: true })}
                   error={error !== undefined}
-                  helperText={error ? "Wählen Sie eine Schichtgrenze aus" : ""}
+                  helperText={error ? "Geben Sie die Tiefe ein" : ""}
                 />
               )}
             />
-          )}
-        />
-        <Controller
-          name="bemerkung"
-          control={control}
-          defaultValue={currentSchicht?.bemerkung}
-          render={({ field }) => (
-            <TextField
-              {...field}
-              InputLabelProps={{ shrink: field.value != null }}
-              value={field.value}
-              margin="normal"
-              multiline
-              label="Bemerkungen zur Schicht"
-              type="text"
-              fullWidth
-              variant="standard"
-              {...register("bemerkung")}
+            <Controller
+              name="codeSchichtId"
+              control={control}
+              defaultValue={currentSchicht?.codeSchichtId}
+              rules={{ required: true }}
+              render={({ field, fieldState: { error } }) => (
+                <Autocomplete
+                  {...field}
+                  sx={{ width: "47%" }}
+                  options={codeSchichten.sort((a, b) => a.kurztext.localeCompare(b.kurztext)).map((c) => c.id)}
+                  value={field.value}
+                  getOptionLabel={(option) => codeSchichten.find((c) => c.id === option)?.kurztext}
+                  onChange={(_, data) => field.onChange(data)}
+                  autoHighlight
+                  renderInput={(params) => (
+                    <TextField
+                      {...params}
+                      margin="normal"
+                      label="Schicht (bzw. Schichtgrenze)"
+                      type="text"
+                      variant="standard"
+                      error={error !== undefined}
+                      helperText={error ? "Wählen Sie eine Schichtgrenze aus" : ""}
+                    />
+                  )}
+                />
+              )}
             />
-          )}
-        />
-        <Controller
-          name="qualitaetId"
-          control={control}
-          defaultValue={currentSchicht?.qualitaetId}
-          rules={{ required: true }}
-          render={({ field, fieldState: { error } }) => (
-            <Autocomplete
-              {...field}
-              options={qualitaetCodes.sort((a, b) => a.kurztext.localeCompare(b.kurztext)).map((c) => c.id)}
-              value={field.value}
-              getOptionLabel={(option) => qualitaetCodes.find((c) => c.id === option)?.kurztext}
-              onChange={(_, data) => field.onChange(data)}
-              sx={{ width: "47%" }}
-              autoHighlight
-              renderInput={(params) => (
+            <Controller
+              name="bemerkung"
+              control={control}
+              defaultValue={currentSchicht?.bemerkung}
+              render={({ field }) => (
                 <TextField
-                  {...params}
+                  {...field}
+                  InputLabelProps={{ shrink: field.value != null }}
+                  value={field.value}
                   margin="normal"
-                  label="Qualität"
+                  multiline
+                  label="Bemerkungen zur Schicht"
                   type="text"
+                  fullWidth
                   variant="standard"
-                  error={error !== undefined}
-                  helperText={error ? "Wählen Sie eine Qualitätsangabe aus" : ""}
+                  {...register("bemerkung")}
+                />
+              )}
+            />
+            <Controller
+              name="qualitaetId"
+              control={control}
+              defaultValue={currentSchicht?.qualitaetId}
+              rules={{ required: true }}
+              render={({ field, fieldState: { error } }) => (
+                <Autocomplete
+                  {...field}
+                  options={qualitaetCodes.sort((a, b) => a.kurztext.localeCompare(b.kurztext)).map((c) => c.id)}
+                  value={field.value}
+                  getOptionLabel={(option) => qualitaetCodes.find((c) => c.id === option)?.kurztext}
+                  onChange={(_, data) => field.onChange(data)}
+                  sx={{ width: "47%" }}
+                  autoHighlight
+                  renderInput={(params) => (
+                    <TextField
+                      {...params}
+                      margin="normal"
+                      label="Qualität"
+                      type="text"
+                      variant="standard"
+                      error={error !== undefined}
+                      helperText={error ? "Wählen Sie eine Qualitätsangabe aus" : ""}
+                    />
+                  )}
                 />
               )}
             />
-          )}
-        />
-        <Controller
-          name="qualitaetBemerkung"
-          control={control}
-          defaultValue={currentSchicht?.qualitaetBemerkung}
-          render={({ field }) => (
-            <TextField
-              {...field}
-              InputLabelProps={{ shrink: field.value != null }}
-              value={field.value}
-              margin="normal"
-              multiline
-              label="Bemerkungen zur Qualitätsangabe"
-              type="text"
-              fullWidth
-              variant="standard"
-              {...register("qualitaetBemerkung")}
+            <Controller
+              name="qualitaetBemerkung"
+              control={control}
+              defaultValue={currentSchicht?.qualitaetBemerkung}
+              render={({ field }) => (
+                <TextField
+                  {...field}
+                  InputLabelProps={{ shrink: field.value != null }}
+                  value={field.value}
+                  margin="normal"
+                  multiline
+                  label="Bemerkungen zur Qualitätsangabe"
+                  type="text"
+                  fullWidth
+                  variant="standard"
+                  {...register("qualitaetBemerkung")}
+                />
+              )}
             />
-          )}
-        />
-        {currentSchicht?.id && <DateUserInputs formObject={currentSchicht}></DateUserInputs>}
-        <Accordion
-          sx={{ boxShadow: "none" }}
-          expanded={mapExpanded}
-          onChange={(_, expanded) => setMapExpanded(expanded)}
-        >
-          <Tooltip title={mapExpanded ? "Übersichtskarte verbergen" : "Übersichtskarte anzeigen"}>
-            <AccordionSummary expandIcon={<ExpandMoreIcon />}>Lokalität der Bohrung</AccordionSummary>
-          </Tooltip>
-          <AccordionDetails>
+            {currentSchicht?.id && <DateUserInputs formObject={currentSchicht}></DateUserInputs>}
+          </Box>
+          <Box sx={{ width: { xs: "100%", md: "50%" }, paddingLeft: { xs: 0, md: 4 } }}>
+            <Typography>Lokalität der Bohrung</Typography>
             <DetailMap bohrungen={[currentBohrung]} currentForm={"schicht"}></DetailMap>
-          </AccordionDetails>
-        </Accordion>
+          </Box>
+        </Stack>
       </DialogContent>
       <DialogActions>
         <Button onClick={handleBack}>{!isDirty || readOnly ? "Schliessen" : "Abbrechen"}</Button>
diff --git a/src/ClientApp/src/components/Search.js b/src/ClientApp/src/components/Search.js
index 222da17..9ac48e2 100644
--- a/src/ClientApp/src/components/Search.js
+++ b/src/ClientApp/src/components/Search.js
@@ -1,7 +1,6 @@
 import React from "react";
 import { Controller, useForm } from "react-hook-form";
-import TextField from "@mui/material/TextField";
-import { Autocomplete, Box, Button, Typography } from "@mui/material";
+import { Autocomplete, Box, Button, TextField, Typography } from "@mui/material";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
diff --git a/src/ClientApp/src/components/SearchResults.js b/src/ClientApp/src/components/SearchResults.js
index d2a719c..82a82af 100644
--- a/src/ClientApp/src/components/SearchResults.js
+++ b/src/ClientApp/src/components/SearchResults.js
@@ -1,18 +1,20 @@
 import React, { useEffect } from "react";
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableHead from "@mui/material/TableHead";
-import TableFooter from "@mui/material/TableFooter";
-import TableRow from "@mui/material/TableRow";
-import TablePagination from "@mui/material/TablePagination";
+import {
+  IconButton,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  TableFooter,
+  TablePagination,
+  Tooltip,
+} from "@mui/material";
 import EditIcon from "@mui/icons-material/Edit";
 import DeleteIcon from "@mui/icons-material/Delete";
 import PreviewIcon from "@mui/icons-material/Preview";
-import IconButton from "@mui/material/IconButton";
 import Title from "./Title";
 import { UserRolesMap } from "../UserRolesMap";
-import Tooltip from "@mui/material/Tooltip";
 
 export default function SearchResults(props) {
   const { standorte, openEditForm, onDeleteStandort, currentUser } = props;
diff --git a/src/ClientApp/src/components/SnackbarMessage.js b/src/ClientApp/src/components/SnackbarMessage.js
index 65b1fff..40898b4 100644
--- a/src/ClientApp/src/components/SnackbarMessage.js
+++ b/src/ClientApp/src/components/SnackbarMessage.js
@@ -1,6 +1,5 @@
 import * as React from "react";
-import Alert from "@mui/material/Alert";
-import Snackbar from "@mui/material/Snackbar";
+import { Alert, Snackbar } from "@mui/material";
 
 export default function SnackbarMessage(props) {
   const { showSuccessAlert, setShowSuccessAlert, message, variant } = props;
diff --git a/src/ClientApp/src/components/StandortForm.js b/src/ClientApp/src/components/StandortForm.js
index 29a3460..7ab95af 100644
--- a/src/ClientApp/src/components/StandortForm.js
+++ b/src/ClientApp/src/components/StandortForm.js
@@ -1,34 +1,33 @@
 import React, { useState, useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
-import TextField from "@mui/material/TextField";
-import Table from "@mui/material/Table";
-import IconButton from "@mui/material/IconButton";
+import {
+  Box,
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  FormControlLabel,
+  IconButton,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  TextField,
+  Tooltip,
+  Typography,
+} from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableHead from "@mui/material/TableHead";
-import TableRow from "@mui/material/TableRow";
 import EditIcon from "@mui/icons-material/Edit";
 import PreviewIcon from "@mui/icons-material/Preview";
-import DialogActions from "@mui/material/DialogActions";
-import DialogContent from "@mui/material/DialogContent";
-import DialogTitle from "@mui/material/DialogTitle";
-import Typography from "@mui/material/Typography";
 import AddCircleIcon from "@mui/icons-material/AddCircle";
-import Tooltip from "@mui/material/Tooltip";
-import Accordion from "@mui/material/Accordion";
-import AccordionSummary from "@mui/material/AccordionSummary";
-import AccordionDetails from "@mui/material/AccordionDetails";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import Button from "@mui/material/Button";
-import Box from "@mui/material/Box";
 import DetailMap from "./DetailMap";
 import ConfirmationDialog from "./ConfirmationDialog";
 import DateUserInputs from "./DateUserInputs";
 import Checkbox from "@mui/material/Checkbox";
 import FormGroup from "@mui/material/FormGroup";
-import FormControlLabel from "@mui/material/FormControlLabel";
 import { CodeTypes } from "./Codetypes";
 import { UserRolesMap } from "../UserRolesMap";
 
@@ -51,7 +50,6 @@ export default function StandortForm(props) {
   const { isDirty } = formState;
 
   const [openConfirmation, setOpenConfirmation] = useState(false);
-  const [mapExpanded, setMapExpanded] = useState(true);
   const [afuFreigabe, setAfuFreigabe] = useState();
 
   const onAddBohrung = () => {
@@ -116,201 +114,200 @@ export default function StandortForm(props) {
     <Box component="form" name="standort-form" onSubmit={handleSubmit(onSubmit)}>
       <DialogTitle>{currentStandort ? "Standort bearbeiten" : "Standort erstellen"}</DialogTitle>
       <DialogContent>
-        <Controller
-          name="bezeichnung"
-          control={control}
-          defaultValue={currentStandort?.bezeichnung}
-          render={({ field, fieldState: { error } }) => (
-            <TextField
-              {...field}
-              value={field.value}
-              autoFocus
-              margin="normal"
-              label="Bezeichnung des Standorts"
-              type="text"
-              fullWidth
-              variant="standard"
-              {...register("bezeichnung", { required: true })}
-              error={error !== undefined}
-              helperText={error ? "Geben Sie eine Bezeichnung ein" : ""}
+        <Stack
+          direction={{ xs: "column", sm: "column", md: "row" }}
+          justifyContent="space-evenly"
+          alignItems="flex-start"
+          spacing={2}
+        >
+          <Box sx={{ width: { xs: "100%", sm: "100%", md: "50%" } }}>
+            <Controller
+              name="bezeichnung"
+              control={control}
+              defaultValue={currentStandort?.bezeichnung}
+              render={({ field, fieldState: { error } }) => (
+                <TextField
+                  {...field}
+                  value={field.value}
+                  autoFocus
+                  margin="normal"
+                  label="Bezeichnung des Standorts"
+                  type="text"
+                  fullWidth
+                  variant="standard"
+                  {...register("bezeichnung", { required: true })}
+                  error={error !== undefined}
+                  helperText={error ? "Geben Sie eine Bezeichnung ein" : ""}
+                />
+              )}
             />
-          )}
-        />
-        <Controller
-          name="bemerkung"
-          control={control}
-          defaultValue={currentStandort?.bemerkung}
-          render={({ field }) => (
-            <TextField
-              {...field}
-              value={field.value}
-              margin="normal"
-              label="Bemerkung zum Standort"
-              type="text"
-              fullWidth
-              multiline
-              variant="standard"
-              {...register("bemerkung")}
+            <Controller
+              name="bemerkung"
+              control={control}
+              defaultValue={currentStandort?.bemerkung}
+              render={({ field }) => (
+                <TextField
+                  {...field}
+                  value={field.value}
+                  margin="normal"
+                  label="Bemerkung zum Standort"
+                  type="text"
+                  fullWidth
+                  multiline
+                  variant="standard"
+                  {...register("bemerkung")}
+                />
+              )}
             />
-          )}
-        />
-        <React.Fragment>
-          <TextField
-            value={currentStandort?.gemeinde}
-            fullWidth
-            type="text"
-            disabled
-            variant="standard"
-            label="Gemeinde"
-          />
-          <TextField
-            value={currentStandort?.grundbuchNr}
-            fullWidth
-            type="text"
-            inputProps={{
-              maxLength: 40,
-            }}
-            disabled
-            margin="normal"
-            label="Grundbuchnummer"
-            variant="standard"
-          />
-        </React.Fragment>
-        <React.Fragment>
-          <DateUserInputs formObject={currentStandort}></DateUserInputs>
-          {currentUser?.role !== UserRolesMap.Extern && (
-            <FormGroup sx={{ marginTop: "3%" }}>
-              <FormControlLabel
-                label="Freigabe AfU"
-                control={
-                  <Controller
-                    name="freigabeAfu"
-                    control={control}
-                    defaultValue={currentStandort?.freigabeAfu ?? false}
-                    render={({ field }) => (
-                      <Checkbox
-                        {...field}
-                        checked={field.value}
-                        onChange={(e) => {
-                          field.onChange(e.target.checked);
-                          setAfuFreigabe(e.target.checked);
-                        }}
+            <React.Fragment>
+              <TextField
+                value={currentStandort?.gemeinde}
+                fullWidth
+                type="text"
+                disabled
+                variant="standard"
+                label="Gemeinde"
+              />
+              <TextField
+                value={currentStandort?.grundbuchNr}
+                fullWidth
+                type="text"
+                inputProps={{
+                  maxLength: 40,
+                }}
+                disabled
+                margin="normal"
+                label="Grundbuchnummer"
+                variant="standard"
+              />
+            </React.Fragment>
+            <React.Fragment>
+              <DateUserInputs formObject={currentStandort}></DateUserInputs>
+              {currentUser?.role !== UserRolesMap.Extern && (
+                <FormGroup sx={{ marginTop: "3%" }}>
+                  <FormControlLabel
+                    label="Freigabe AfU"
+                    control={
+                      <Controller
+                        name="freigabeAfu"
+                        control={control}
+                        defaultValue={currentStandort?.freigabeAfu ?? false}
+                        render={({ field }) => (
+                          <Checkbox
+                            {...field}
+                            checked={field.value}
+                            onChange={(e) => {
+                              field.onChange(e.target.checked);
+                              setAfuFreigabe(e.target.checked);
+                            }}
+                          />
+                        )}
+                        {...register("freigabeAfu")}
                       />
-                    )}
-                    {...register("freigabeAfu")}
+                    }
                   />
-                }
-              />
-            </FormGroup>
-          )}
-          <React.Fragment>
-            <TextField
-              value={currentStandort?.afuUser}
-              InputLabelProps={{ shrink: afuFreigabe }}
-              sx={{ marginRight: "6%", width: "47%" }}
-              disabled
-              margin="normal"
-              label="AfU Freigabe erfolgt durch"
-              type="text"
-              variant="standard"
-              {...register("afuUser")}
-            />
+                </FormGroup>
+              )}
+              <React.Fragment>
+                <TextField
+                  value={currentStandort?.afuUser}
+                  InputLabelProps={{ shrink: afuFreigabe }}
+                  sx={{ marginRight: "6%", width: "47%" }}
+                  disabled
+                  margin="normal"
+                  label="AfU Freigabe erfolgt durch"
+                  type="text"
+                  variant="standard"
+                  {...register("afuUser")}
+                />
 
-            <TextField
-              name="afuDatum"
-              value={currentStandort?.afuDatum ? new Date(currentStandort.afuDatum).toLocaleDateString() : null}
-              InputLabelProps={{ shrink: afuFreigabe }}
-              disabled
-              sx={{ width: "47%" }}
-              margin="normal"
-              label="AfU Freigabe erfolgt am"
-              type="text"
-              variant="standard"
-              {...register("afuDatum")}
-            />
-          </React.Fragment>
-        </React.Fragment>
-        {currentStandort?.id == null && (
-          <Typography>Bitte speichern Sie den Standort bevor Sie Bohrungen hinzufügen.</Typography>
-        )}
-        {currentStandort?.bohrungen?.length > 0 && (
-          <Accordion
-            sx={{ boxShadow: "none" }}
-            expanded={mapExpanded}
-            onChange={(_, expanded) => setMapExpanded(expanded)}
-          >
-            <Tooltip title={mapExpanded ? "Übersichtskarte verbergen" : "Übersichtskarte anzeigen"}>
-              <AccordionSummary expandIcon={<ExpandMoreIcon />}>Lokalität der Bohrungen</AccordionSummary>
-            </Tooltip>
+                <TextField
+                  name="afuDatum"
+                  value={currentStandort?.afuDatum ? new Date(currentStandort.afuDatum).toLocaleDateString() : null}
+                  InputLabelProps={{ shrink: afuFreigabe }}
+                  disabled
+                  sx={{ width: "47%" }}
+                  margin="normal"
+                  label="AfU Freigabe erfolgt am"
+                  type="text"
+                  variant="standard"
+                  {...register("afuDatum")}
+                />
+              </React.Fragment>
+            </React.Fragment>
+            {currentStandort?.id == null && (
+              <Typography sx={{ marginTop: 3 }}>
+                Bitte speichern Sie den Standort bevor Sie Bohrungen hinzufügen.
+              </Typography>
+            )}
+          </Box>
+          <Box sx={{ width: { xs: "100%", md: "50%" }, paddingLeft: { xs: 0, md: 4 } }}>
+            <Typography>Lokalität der Bohrungen</Typography>
+            <DetailMap bohrungen={currentStandort?.bohrungen || []} currentForm={"standort"}></DetailMap>
+            <Typography sx={{ marginTop: "15px" }} variant="h6" gutterBottom>
+              Bohrungen ({currentStandort?.bohrungen ? currentStandort.bohrungen.length : 0})
+              <Tooltip title="Bohrung hinzufügen">
+                <span>
+                  <IconButton
+                    color="primary"
+                    name="add-button"
+                    onClick={onAddBohrung}
+                    disabled={readOnly || currentStandort?.id == null}
+                  >
+                    <AddCircleIcon />
+                  </IconButton>
+                </span>
+              </Tooltip>
+            </Typography>
             {currentStandort?.bohrungen?.length > 0 && (
-              <AccordionDetails>
-                <DetailMap bohrungen={currentStandort?.bohrungen} currentForm={"standort"}></DetailMap>
-              </AccordionDetails>
+              <Table name="seach-results-table" size="small">
+                <TableHead>
+                  <TableRow>
+                    <TableCell>Bezeichnung</TableCell>
+                    <TableCell>Datum</TableCell>
+                    <TableCell></TableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {currentStandort.bohrungen.map((bohrung) => (
+                    <TableRow key={bohrung.id}>
+                      <TableCell>{bohrung.bezeichnung}</TableCell>
+                      <TableCell>{(bohrung.datum && new Date(bohrung.datum).toLocaleDateString()) || null}</TableCell>
+                      <TableCell align="right">
+                        <Tooltip title="Bohrung editieren">
+                          <IconButton onClick={() => onEditBohrung(bohrung)} name="edit-button" color="primary">
+                            {readOnly ? <PreviewIcon /> : <EditIcon />}
+                          </IconButton>
+                        </Tooltip>
+                        <Tooltip title="Bohrung duplizieren">
+                          <IconButton
+                            onClick={() => onCopyBohrung(bohrung)}
+                            name="copy-button"
+                            color="primary"
+                            disabled={readOnly}
+                          >
+                            <ContentCopyIcon />
+                          </IconButton>
+                        </Tooltip>
+                        <Tooltip title="Bohrung löschen">
+                          <IconButton
+                            onClick={() => onDeleteBohrung(bohrung)}
+                            name="delete-button"
+                            color="primary"
+                            aria-label="delete bohrung"
+                            disabled={readOnly}
+                          >
+                            <DeleteIcon />
+                          </IconButton>
+                        </Tooltip>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
             )}
-          </Accordion>
-        )}
-        <Typography sx={{ marginTop: "15px" }} variant="h6" gutterBottom>
-          Bohrungen ({currentStandort?.bohrungen ? currentStandort.bohrungen.length : 0})
-          <Tooltip title="Bohrung hinzufügen">
-            <span>
-              <IconButton
-                color="primary"
-                name="add-button"
-                onClick={onAddBohrung}
-                disabled={readOnly || currentStandort?.id == null}
-              >
-                <AddCircleIcon />
-              </IconButton>
-            </span>
-          </Tooltip>
-        </Typography>
-        {currentStandort?.bohrungen?.length > 0 && (
-          <Table name="seach-results-table" size="small">
-            <TableHead>
-              <TableRow>
-                <TableCell>Bezeichnung</TableCell>
-                <TableCell>Datum</TableCell>
-                <TableCell></TableCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {currentStandort.bohrungen.map((bohrung) => (
-                <TableRow key={bohrung.id}>
-                  <TableCell>{bohrung.bezeichnung}</TableCell>
-                  <TableCell>{(bohrung.datum && new Date(bohrung.datum).toLocaleDateString()) || null}</TableCell>
-                  <TableCell align="right">
-                    <Tooltip title="Bohrung editieren">
-                      <IconButton onClick={() => onEditBohrung(bohrung)} name="edit-button" color="primary">
-                        {readOnly ? <PreviewIcon /> : <EditIcon />}
-                      </IconButton>
-                    </Tooltip>
-                    <Tooltip title="Bohrung duplizieren">
-                      <IconButton
-                        onClick={() => onCopyBohrung(bohrung)}
-                        name="copy-button"
-                        color="primary"
-                        disabled={readOnly}
-                      >
-                        <ContentCopyIcon />
-                      </IconButton>
-                    </Tooltip>
-                    <Tooltip title="Bohrung löschen">
-                      <IconButton
-                        onClick={() => onDeleteBohrung(bohrung)}
-                        name="delete-button"
-                        color="primary"
-                        aria-label="delete bohrung"
-                        disabled={readOnly}
-                      >
-                        <DeleteIcon />
-                      </IconButton>
-                    </Tooltip>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        )}
+          </Box>
+        </Stack>
       </DialogContent>
       <DialogActions>
         <Button onClick={handleClose}>{!isDirty || readOnly ? "Schliessen" : "Abbrechen"}</Button>
diff --git a/src/ClientApp/src/components/UserInputForm.js b/src/ClientApp/src/components/UserInputForm.js
index c2b67b8..5d6747a 100644
--- a/src/ClientApp/src/components/UserInputForm.js
+++ b/src/ClientApp/src/components/UserInputForm.js
@@ -1,14 +1,7 @@
 import React from "react";
 import { Controller, useForm } from "react-hook-form";
 import { UserRolesMap } from "../UserRolesMap";
-import TextField from "@mui/material/TextField";
-import DialogActions from "@mui/material/DialogActions";
-import DialogContent from "@mui/material/DialogContent";
-import DialogTitle from "@mui/material/DialogTitle";
-import MenuItem from "@mui/material/MenuItem";
-
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
+import { Box, Button, DialogActions, DialogContent, DialogTitle, MenuItem, TextField } from "@mui/material";
 
 export default function UserInputForm(props) {
   const { control, handleSubmit } = useForm();
diff --git a/src/ClientApp/src/components/UserList.js b/src/ClientApp/src/components/UserList.js
index 6e8eac3..a48b764 100644
--- a/src/ClientApp/src/components/UserList.js
+++ b/src/ClientApp/src/components/UserList.js
@@ -1,17 +1,19 @@
 import React from "react";
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableHead from "@mui/material/TableHead";
-import TableFooter from "@mui/material/TableFooter";
-import TableRow from "@mui/material/TableRow";
-import TablePagination from "@mui/material/TablePagination";
+import {
+  IconButton,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  TableFooter,
+  TablePagination,
+  Tooltip,
+} from "@mui/material";
 import EditIcon from "@mui/icons-material/Edit";
 import DeleteIcon from "@mui/icons-material/Delete";
-import IconButton from "@mui/material/IconButton";
 import Title from "./Title";
 import { UserRolesMap } from "../UserRolesMap";
-import Tooltip from "@mui/material/Tooltip";
 
 export default function UserList(props) {
   const { users, openEditForm, onDelete } = props;
diff --git a/src/ClientApp/src/components/VorkommnisForm.js b/src/ClientApp/src/components/VorkommnisForm.js
index bc916d8..5d457e8 100644
--- a/src/ClientApp/src/components/VorkommnisForm.js
+++ b/src/ClientApp/src/components/VorkommnisForm.js
@@ -1,16 +1,18 @@
 import React, { useState, useEffect } from "react";
-import DialogActions from "@mui/material/DialogActions";
-import DialogContent from "@mui/material/DialogContent";
-import DialogTitle from "@mui/material/DialogTitle";
+import {
+  Autocomplete,
+  Box,
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Stack,
+  TextField,
+  Tooltip,
+  Typography,
+} from "@mui/material";
 import { Controller, useForm } from "react-hook-form";
-import TextField from "@mui/material/TextField";
-import IconButton from "@mui/material/IconButton";
-import Tooltip from "@mui/material/Tooltip";
-import Accordion from "@mui/material/Accordion";
-import AccordionSummary from "@mui/material/AccordionSummary";
-import AccordionDetails from "@mui/material/AccordionDetails";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import { Autocomplete, Box, Button } from "@mui/material";
 import ArrowLeftIcon from "@mui/icons-material/ArrowLeft";
 import ArrowRightIcon from "@mui/icons-material/ArrowRight";
 import DetailMap from "./DetailMap";
@@ -35,8 +37,6 @@ export default function VorkommnisForm(props) {
   const [qualitaetCodes, setQualitaetCodes] = useState([]);
   const [typCodes, setTypCodes] = useState([]);
 
-  const [mapExpanded, setMapExpanded] = useState(true);
-
   const currentVorkommnisIndex =
     currentBohrprofil.vorkommnisse?.indexOf(
       currentBohrprofil.vorkommnisse.find((b) => b.id === currentVorkommnis?.id)
@@ -98,123 +98,124 @@ export default function VorkommnisForm(props) {
         )}
       </DialogTitle>
       <DialogContent>
-        <Controller
-          name="tiefe"
-          control={control}
-          defaultValue={currentVorkommnis?.tiefe}
-          render={({ field, fieldState: { error } }) => (
-            <TextField
-              {...field}
-              value={field.value}
-              sx={{ width: "47%" }}
-              margin="normal"
-              label="Tiefe [m u. T.]"
-              type="number"
-              variant="standard"
-              {...register("tiefe", { required: true })}
-              error={error !== undefined}
-              helperText={error ? "Geben Sie die Tiefe ein" : ""}
-            />
-          )}
-        />
-        <Controller
-          name="typId"
-          control={control}
-          defaultValue={currentVorkommnis?.typId}
-          rules={{ required: true }}
-          render={({ field, fieldState: { error } }) => (
-            <Autocomplete
-              {...field}
-              sx={{ width: "47%" }}
-              options={typCodes.sort((a, b) => a.kurztext.localeCompare(b.kurztext)).map((c) => c.id)}
-              value={field.value}
-              getOptionLabel={(option) => typCodes.find((c) => c.id === option)?.kurztext}
-              onChange={(_, data) => field.onChange(data)}
-              autoHighlight
-              renderInput={(params) => (
+        <Stack
+          direction={{ xs: "column", md: "row" }}
+          justifyContent="space-evenly"
+          alignItems="flex-start"
+          spacing={2}
+        >
+          <Box sx={{ width: { xs: "100%", md: "50%" } }}>
+            <Controller
+              name="tiefe"
+              control={control}
+              defaultValue={currentVorkommnis?.tiefe}
+              render={({ field, fieldState: { error } }) => (
                 <TextField
-                  {...params}
+                  {...field}
+                  value={field.value}
+                  sx={{ width: "47%" }}
                   margin="normal"
-                  label="Typ des Vorkommnisses"
-                  type="text"
+                  label="Tiefe [m u. T.]"
+                  type="number"
                   variant="standard"
+                  {...register("tiefe", { required: true })}
                   error={error !== undefined}
-                  helperText={error ? "Wählen Sie einen Typ aus" : ""}
+                  helperText={error ? "Geben Sie die Tiefe ein" : ""}
                 />
               )}
             />
-          )}
-        />
-        <Controller
-          name="bemerkung"
-          control={control}
-          defaultValue={currentVorkommnis?.bemerkung}
-          render={({ field }) => (
-            <TextField
-              {...field}
-              InputLabelProps={{ shrink: field.value != null }}
-              value={field.value}
-              margin="normal"
-              multiline
-              label="Bemerkungen zum Vorkommnis"
-              type="text"
-              fullWidth
-              variant="standard"
-              {...register("bemerkung")}
+            <Controller
+              name="typId"
+              control={control}
+              defaultValue={currentVorkommnis?.typId}
+              rules={{ required: true }}
+              render={({ field, fieldState: { error } }) => (
+                <Autocomplete
+                  {...field}
+                  sx={{ width: "47%" }}
+                  options={typCodes.sort((a, b) => a.kurztext.localeCompare(b.kurztext)).map((c) => c.id)}
+                  value={field.value}
+                  getOptionLabel={(option) => typCodes.find((c) => c.id === option)?.kurztext}
+                  onChange={(_, data) => field.onChange(data)}
+                  autoHighlight
+                  renderInput={(params) => (
+                    <TextField
+                      {...params}
+                      margin="normal"
+                      label="Typ des Vorkommnisses"
+                      type="text"
+                      variant="standard"
+                      error={error !== undefined}
+                      helperText={error ? "Wählen Sie einen Typ aus" : ""}
+                    />
+                  )}
+                />
+              )}
+            />
+            <Controller
+              name="bemerkung"
+              control={control}
+              defaultValue={currentVorkommnis?.bemerkung}
+              render={({ field }) => (
+                <TextField
+                  {...field}
+                  InputLabelProps={{ shrink: field.value != null }}
+                  value={field.value}
+                  margin="normal"
+                  multiline
+                  label="Bemerkungen zum Vorkommnis"
+                  type="text"
+                  fullWidth
+                  variant="standard"
+                  {...register("bemerkung")}
+                />
+              )}
             />
-          )}
-        />
-        <Controller
-          name="qualitaetId"
-          control={control}
-          defaultValue={currentVorkommnis?.qualitaetId}
-          render={({ field }) => (
-            <Autocomplete
-              {...field}
-              options={qualitaetCodes.sort((a, b) => a.kurztext.localeCompare(b.kurztext)).map((c) => c.id)}
-              value={field.value}
-              getOptionLabel={(option) => qualitaetCodes.find((c) => c.id === option)?.kurztext}
-              onChange={(_, data) => field.onChange(data)}
-              sx={{ width: "47%" }}
-              autoHighlight
-              renderInput={(params) => (
-                <TextField {...params} margin="normal" label="Qualität" type="text" variant="standard" />
+            <Controller
+              name="qualitaetId"
+              control={control}
+              defaultValue={currentVorkommnis?.qualitaetId}
+              render={({ field }) => (
+                <Autocomplete
+                  {...field}
+                  options={qualitaetCodes.sort((a, b) => a.kurztext.localeCompare(b.kurztext)).map((c) => c.id)}
+                  value={field.value}
+                  getOptionLabel={(option) => qualitaetCodes.find((c) => c.id === option)?.kurztext}
+                  onChange={(_, data) => field.onChange(data)}
+                  sx={{ width: "47%" }}
+                  autoHighlight
+                  renderInput={(params) => (
+                    <TextField {...params} margin="normal" label="Qualität" type="text" variant="standard" />
+                  )}
+                />
               )}
             />
-          )}
-        />
-        <Controller
-          name="qualitaetBemerkung"
-          control={control}
-          defaultValue={currentVorkommnis?.qualitaetBemerkung}
-          render={({ field }) => (
-            <TextField
-              {...field}
-              InputLabelProps={{ shrink: field.value != null }}
-              value={field.value}
-              margin="normal"
-              multiline
-              label="Bemerkungen zur Qualitätsangabe"
-              type="text"
-              fullWidth
-              variant="standard"
-              {...register("qualitaetBemerkung")}
+            <Controller
+              name="qualitaetBemerkung"
+              control={control}
+              defaultValue={currentVorkommnis?.qualitaetBemerkung}
+              render={({ field }) => (
+                <TextField
+                  {...field}
+                  InputLabelProps={{ shrink: field.value != null }}
+                  value={field.value}
+                  margin="normal"
+                  multiline
+                  label="Bemerkungen zur Qualitätsangabe"
+                  type="text"
+                  fullWidth
+                  variant="standard"
+                  {...register("qualitaetBemerkung")}
+                />
+              )}
             />
-          )}
-        />
-        {currentVorkommnis?.id && <DateUserInputs formObject={currentVorkommnis}></DateUserInputs>}
-        <Accordion
-          sx={{ boxShadow: "none" }}
-          expanded={mapExpanded}
-          onChange={(_, expanded) => setMapExpanded(expanded)}
-        >
-          <Tooltip title={mapExpanded ? "Übersichtskarte verbergen" : "Übersichtskarte anzeigen"}>
-            <AccordionSummary expandIcon={<ExpandMoreIcon />}>Lokalität der Bohrung</AccordionSummary>
-          </Tooltip>
-          <AccordionDetails>
+            {currentVorkommnis?.id && <DateUserInputs formObject={currentVorkommnis}></DateUserInputs>}
+          </Box>
+          <Box sx={{ width: { xs: "100%", md: "50%" }, paddingLeft: { xs: 0, md: 4 } }}>
+            <Typography>Lokalität der Bohrung</Typography>
             <DetailMap bohrungen={[currentBohrung]} currentForm={"vorkommnis"}></DetailMap>
-          </AccordionDetails>
-        </Accordion>
+          </Box>
+        </Stack>
       </DialogContent>
       <DialogActions>
         <Button onClick={handleBack}>{!isDirty || readOnly ? "Schliessen" : "Abbrechen"}</Button>
diff --git a/src/ClientApp/src/components/pages/Home.js b/src/ClientApp/src/components/pages/Home.js
index 1147cf9..e6bb673 100644
--- a/src/ClientApp/src/components/pages/Home.js
+++ b/src/ClientApp/src/components/pages/Home.js
@@ -1,17 +1,10 @@
 import React, { useState, useEffect } from "react";
-import Box from "@mui/material/Box";
-import Toolbar from "@mui/material/Toolbar";
-import Container from "@mui/material/Container";
-import Grid from "@mui/material/Grid";
-import Paper from "@mui/material/Paper";
+import { Box, Button, Container, Dialog, Grid, Paper, Toolbar, Tooltip } from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
 import InputForm from "../InputForm";
 import SearchResults from "../SearchResults";
 import Search from "../Search";
 import MainMap from "../MainMap";
-import Dialog from "@mui/material/Dialog";
-import Tooltip from "@mui/material/Tooltip";
-import Button from "@mui/material/Button";
-import AddIcon from "@mui/icons-material/Add";
 import SnackbarMessage from "../SnackbarMessage";
 import ConfirmationDialog from "../ConfirmationDialog";
 import { UserRolesMap } from "../../UserRolesMap";
@@ -238,7 +231,7 @@ export function Home(props) {
             )}
           </Grid>
         </Grid>
-        <Dialog open={openStandortForm} fullWidth={true} maxWidth="md">
+        <Dialog open={openStandortForm} fullWidth={true} maxWidth="xl">
           <InputForm
             handleClose={handleClose}
             editStandort={editStandort}
diff --git a/src/ClientApp/src/components/pages/User.js b/src/ClientApp/src/components/pages/User.js
index b599595..f60939d 100644
--- a/src/ClientApp/src/components/pages/User.js
+++ b/src/ClientApp/src/components/pages/User.js
@@ -1,9 +1,5 @@
 import React, { useState, useEffect } from "react";
-import Box from "@mui/material/Box";
-import Toolbar from "@mui/material/Toolbar";
-import Container from "@mui/material/Container";
-import Paper from "@mui/material/Paper";
-import Dialog from "@mui/material/Dialog";
+import { Box, Container, Dialog, Paper, Toolbar } from "@mui/material";
 import UserList from "../UserList";
 import UserInputForm from "../UserInputForm";
 import ConfirmationDialog from "../ConfirmationDialog";