diff --git a/frontend/src/components/btmbuch/NeueBuchungModal.js b/frontend/src/components/btmbuch/NeueBuchungModal.js
index 18f216e6321a3f669d7506c5fcbd8e1f679eec06..bf59c911c6f1990e8bca75c7def462dbdd3259ca 100644
--- a/frontend/src/components/btmbuch/NeueBuchungModal.js
+++ b/frontend/src/components/btmbuch/NeueBuchungModal.js
@@ -1,209 +1,210 @@
-import React, { useState, useEffect } from 'react';
-import { Modal, Button, Form, Row, Col } from 'react-bootstrap';
-import { useSnackbar } from 'notistack';
-
-function NeueBuchungModal(props) {
-    
-    const { enqueueSnackbar } = useSnackbar();
-    const [typ, setTyp] = useState('');
-    let {lieferanten, aerzte, empfaenger} = props;
-
-
-    const [maxMenge, setMaxMenge] = useState(props.btm.btm.menge);
-
-    const sendNewBuchungAnfrage = async (buchungData) => {
-        const response = await fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${props.apothekeId}/btmbuchung`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"),
-            },
-            body: JSON.stringify(buchungData)
-        }).catch((err) => {
-            //SHOW ERROR
-            console.log(err);
-        });
-
-
-        if (response && response.status === 201) {
-            const data = await response.json();
-            // console.log(data);
-            hideModal();
-            enqueueSnackbar('Buchung erfolgreich angelegt', { variant:'success', autoHideDuration: 3000} );
-            props.apothekeRefFunctions.updateBtmList();
-        } else {
-            //SHOW ERROR
-            console.log(response);
-        }
-    }
-
-    const createNewBuchung = event => {
-        event.preventDefault();
-        if (typ.toLowerCase() === 'zugang') {
-            let { anforderungsschein, btmMenge, lieferant, datum} = event.target;
-            let buchungData = {
-                benutzer: props.user.id,
-                btm: props.btm.btm.id,
-                menge: btmMenge.value,
-                typ: 'ZUGANG',
-                lieferant: lieferant.value,
-                anforderungsschein: anforderungsschein.value,
-                datum: datum.value,
-                pruefdatum: ''
-            }
-            sendNewBuchungAnfrage(buchungData);
-        } else if (typ.toLowerCase() === 'abgang') {
-            let { btmMenge, rezept, empfaenger, arzt, datum} = event.target;
-            let buchungData = {
-                benutzer: props.user.id,
-                btm: props.btm.btm.id,
-                menge: btmMenge.value,
-                typ: 'ABGANG',
-                empfaenger: empfaenger.value,
-                arzt: arzt.value,
-                rezept: rezept.value,
-                pruefdatum: '',
-                datum: datum.value
-            }
-            sendNewBuchungAnfrage(buchungData);
-        }
-    }
-
-    const hideModal = () => {
-        setTyp('');
-        props.onHide();
-    }
-
-    useEffect(() => {
-        setMaxMenge(props.btm.btm.menge)
-    }, []);
-
-    const renderZugang = () => {
-        return (
-            <React.Fragment>
-                <Form.Group as={Row} controlId="anforderungsschein">
-                    <Form.Label column sm="2">
-                        Lieferschein
-                        </Form.Label>
-                    <Col sm="10">
-                        <Form.Control name="anforderungsschein" type="text" required />
-                    </Col>
-                </Form.Group>
-                <Form.Group as={Row} controlId="lieferant">
-                    <Form.Label column sm="2">
-                        Lieferant
-                        </Form.Label>
-                    <Col sm="10">
-                        <Form.Control name="lieferant" required as="select">
-                            {lieferanten.map(l => <option key={l.id} value={l.id}>{l.name}</option>)}
-                        </Form.Control>
-                    </Col>
-                </Form.Group>
-            </React.Fragment>)
-    }
-
-    const renderAbgang = () => {
-        return (
-            <React.Fragment>
-                <Form.Group as={Row} controlId="empfaenger">
-                    <Form.Label column sm="2">
-                        Empfaenger
-                </Form.Label>
-                    <Col sm="10">
-                        <Form.Control name="empfaenger" required as="select">
-                            {empfaenger.map(e => <option key={e.id} value={e.id}>{e.name}</option>)}
-                        </Form.Control>
-                    </Col>
-                </Form.Group>
-                <Form.Group as={Row} controlId="arzt">
-                    <Form.Label column sm="2">
-                        Arzt
-                </Form.Label>
-                    <Col sm="10">
-                        <Form.Control name="arzt" required as="select">
-                            {aerzte.map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
-                        </Form.Control>
-                    </Col>
-                </Form.Group>
-                <Form.Group as={Row} controlId="rezept">
-                    <Form.Label column sm="2">
-                        Rezept
-                        </Form.Label>
-                    <Col sm="10">
-                        <Form.Control name="rezept" type="text" required />
-                    </Col>
-                </Form.Group>
-            </React.Fragment>)
-    }
-
-    return (
-        <Modal
-            {...props}
-            size="lg"
-            aria-labelledby="contained-modal-title-vcenter"
-            centered
-            onExiting={hideModal}
-        >
-            <Modal.Header closeButton>
-                <Modal.Title id="contained-modal-title-vcenter">
-                    Betäubungsmittel-Buchung hinzufügen
-                 </Modal.Title>
-            </Modal.Header>
-            <Form onSubmit={createNewBuchung}>
-                <Modal.Body>
-                    <Form.Group as={Row} controlId="Typ">
-                        <Col sm={{ span: 10, offset: 2 }}>
-                            <Row sm={6}>
-                                <Form.Check required
-                                    type="radio"
-                                    label="Zugang"
-                                    name="TypRadio"
-                                    id="ZugangRadio"
-                                    onClick={() => {setTyp('zugang'); setMaxMenge(9999)}}
-                                />
-                                <Form.Check required
-                                    type="radio"
-                                    label="Abgang"
-                                    name="TypRadio"
-                                    id="AbgangRadio"
-                                    onClick={() => setTyp('abgang')}
-                                />
-                            </Row>
-                        </Col>
-                    </Form.Group>
-
-                    <Form.Group as={Row} controlId="btmMenge">
-                        <Form.Label column sm="2">
-                            Menge
-                        </Form.Label>
-                        <Col sm="10">
-                            <Form.Control name="btmMenge" type="number" min="1" defaultValue="0" />
-                        </Col>
-                    </Form.Group>
-                    <Form.Group as={Row} controlId="datum">
-                        <Form.Label column sm="2">
-                            Datum
-                        </Form.Label>
-                        <Col sm="10">
-                            <Form.Control name="datum" type="date" defaultValue={new Date()} />
-                        </Col>
-                    </Form.Group>               
-
-                    {typ.toLowerCase() === 'zugang' ? renderZugang() : null}
-                    {typ.toLowerCase() === 'abgang' ? renderAbgang() : null}
-
-                </Modal.Body>
-                <Modal.Footer>
-                    <Button variant="danger" onClick={hideModal}>Close</Button>
-                    <Button variant="primary" type="submit">Bestätigen</Button>
-                </Modal.Footer>
-            </Form>
-
-
-
-        </Modal>
-    )
-}
-
-export default NeueBuchungModal;
-
+import React, { useState, useEffect } from 'react';
+import { Modal, Button, Form, Row, Col } from 'react-bootstrap';
+import { useSnackbar } from 'notistack';
+
+function NeueBuchungModal(props) {
+    
+    const { enqueueSnackbar } = useSnackbar();
+    const [typ, setTyp] = useState('');
+    let {lieferanten, aerzte, empfaenger} = props;
+
+
+    const [maxMenge, setMaxMenge] = useState(props.btm.btm.menge);
+
+    const sendNewBuchungAnfrage = async (buchungData) => {
+        const response = await fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${props.apothekeId}/btmbuchung`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"),
+            },
+            body: JSON.stringify(buchungData)
+        }).catch((err) => {
+            //SHOW ERROR
+            console.log(err);
+        });
+
+
+        if (response && response.status === 201) {
+            const data = await response.json();
+            // console.log(data);
+            hideModal();
+            enqueueSnackbar('Buchung erfolgreich angelegt', { variant:'success', autoHideDuration: 3000} );
+            props.apothekeRefFunctions.updateBtmList();
+        } else {
+            //SHOW ERROR
+            console.log(response);
+        }
+    }
+
+    const createNewBuchung = event => {
+        event.preventDefault();
+        if (typ.toLowerCase() === 'zugang') {
+            let { anforderungsschein, btmMenge, lieferant, datum} = event.target;
+            let buchungData = {
+                benutzer: props.user.id,
+                btm: props.btm.btm.id,
+                menge: btmMenge.value,
+                typ: 'ZUGANG',
+                lieferant: lieferant.value,
+                anforderungsschein: anforderungsschein.value,
+                datum: datum.value,
+                pruefdatum: ''
+            }
+            sendNewBuchungAnfrage(buchungData);
+        } else if (typ.toLowerCase() === 'abgang') {
+            let { btmMenge, rezept, empfaenger, arzt, datum} = event.target;
+            let buchungData = {
+                benutzer: props.user.id,
+                btm: props.btm.btm.id,
+                menge: btmMenge.value,
+                typ: 'ABGANG',
+                empfaenger: empfaenger.value,
+                arzt: arzt.value,
+                rezept: rezept.value,
+                pruefdatum: '',
+                datum: datum.value
+            }
+            sendNewBuchungAnfrage(buchungData);
+        }
+    }
+
+    const hideModal = () => {
+        setTyp('');
+        props.onHide();
+    }
+
+    useEffect(() => {
+        setMaxMenge(props.btm.btm.menge)
+    }, []);
+
+    const renderZugang = () => {
+        return (
+            <React.Fragment>
+                <Form.Group as={Row} controlId="anforderungsschein">
+                    <Form.Label column sm="2">
+                        Lieferschein
+                        </Form.Label>
+                    <Col sm="10">
+                        <Form.Control name="anforderungsschein" type="text" required />
+                    </Col>
+                </Form.Group>
+                <Form.Group as={Row} controlId="lieferant">
+                    <Form.Label column sm="2">
+                        Lieferant
+                        </Form.Label>
+                    <Col sm="10">
+                        <Form.Control name="lieferant" required as="select">
+                            {lieferanten.map(l => <option key={l.id} value={l.id}>{l.name}</option>)}
+                        </Form.Control>
+                    </Col>
+                </Form.Group>
+            </React.Fragment>)
+    }
+
+    const renderAbgang = () => {
+        return (
+            <React.Fragment>
+                <Form.Group as={Row} controlId="empfaenger">
+                    <Form.Label column sm="2">
+                        Empfaenger
+                </Form.Label>
+                    <Col sm="10">
+                        <Form.Control name="empfaenger" required as="select">
+                            {empfaenger.map(e => <option key={e.id} value={e.id}>{e.name}</option>)}
+                        </Form.Control>
+                    </Col>
+                </Form.Group>
+                <Form.Group as={Row} controlId="arzt">
+                    <Form.Label column sm="2">
+                        Arzt
+                </Form.Label>
+                    <Col sm="10">
+                        <Form.Control name="arzt" required as="select">
+                            {aerzte.map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
+                        </Form.Control>
+                    </Col>
+                </Form.Group>
+                <Form.Group as={Row} controlId="rezept">
+                    <Form.Label column sm="2">
+                        Rezept
+                        </Form.Label>
+                    <Col sm="10">
+                        <Form.Control name="rezept" type="text" required />
+                    </Col>
+                </Form.Group>
+            </React.Fragment>)
+    }
+
+    return (
+        <Modal
+            {...props}
+            size="lg"
+            aria-labelledby="contained-modal-title-vcenter"
+            centered
+            onExiting={hideModal}
+            backdrop="static"
+        >
+            <Modal.Header closeButton>
+                <Modal.Title id="contained-modal-title-vcenter">
+                    Betäubungsmittel-Buchung hinzufügen
+                 </Modal.Title>
+            </Modal.Header>
+            <Form onSubmit={createNewBuchung}>
+                <Modal.Body>
+                    <Form.Group as={Row} controlId="Typ">
+                        <Col sm={{ span: 10, offset: 2 }}>
+                            <Row sm={6}>
+                                <Form.Check required
+                                    type="radio"
+                                    label="Zugang"
+                                    name="TypRadio"
+                                    id="ZugangRadio"
+                                    onClick={() => {setTyp('zugang'); setMaxMenge(9999)}}
+                                />
+                                <Form.Check required
+                                    type="radio"
+                                    label="Abgang"
+                                    name="TypRadio"
+                                    id="AbgangRadio"
+                                    onClick={() => setTyp('abgang')}
+                                />
+                            </Row>
+                        </Col>
+                    </Form.Group>
+
+                    <Form.Group as={Row} controlId="btmMenge">
+                        <Form.Label column sm="2">
+                            Menge
+                        </Form.Label>
+                        <Col sm="10">
+                            <Form.Control name="btmMenge" type="number" min="1" defaultValue="0" />
+                        </Col>
+                    </Form.Group>
+                    <Form.Group as={Row} controlId="datum">
+                        <Form.Label column sm="2">
+                            Datum
+                        </Form.Label>
+                        <Col sm="10">
+                            <Form.Control name="datum" type="date" defaultValue={new Date()} />
+                        </Col>
+                    </Form.Group>               
+
+                    {typ.toLowerCase() === 'zugang' ? renderZugang() : null}
+                    {typ.toLowerCase() === 'abgang' ? renderAbgang() : null}
+
+                </Modal.Body>
+                <Modal.Footer>
+                    <Button variant="danger" onClick={hideModal}>Close</Button>
+                    <Button variant="primary" type="submit">Bestätigen</Button>
+                </Modal.Footer>
+            </Form>
+
+
+
+        </Modal>
+    )
+}
+
+export default NeueBuchungModal;
+
diff --git a/frontend/src/components/btmbuch/NeuesBtmModal.js b/frontend/src/components/btmbuch/NeuesBtmModal.js
index 0c55eaebd0ac5b928ec1ad39d9433117fb430fd4..0f13a52ad4ddc9fcecc38cb1a59feeaf69d656e1 100644
--- a/frontend/src/components/btmbuch/NeuesBtmModal.js
+++ b/frontend/src/components/btmbuch/NeuesBtmModal.js
@@ -1,151 +1,152 @@
-import React, { useState } from "react";
-import { Modal, Button, Form, Row, Col, Alert } from "react-bootstrap";
-import { useSnackbar } from "notistack";
-
-export default function NeuesBtmModal(props) {
-  const { enqueueSnackbar } = useSnackbar();
-  const [activeDarreichungsform, setActiveDarreichungsform] = useState("Tbl");
-  const [showError, setShowError] = useState(false);
-  const [errorMessage, setErrorMessage] = useState("");
-
-  const hideModal = () => {
-    setShowError(false);
-    props.onHide();
-  };
-
-  const createNewBtm = async (event) => {
-    event.preventDefault();
-    let { btmName, btmMenge, btmDarreichungsform, btmEinheit } = event.target;
-    const response = await fetch(
-      `http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${props.apothekeId}/btm`,
-      {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization:
-            "Bearer " + window.sessionStorage.getItem("edbapo-jwt"),
-        },
-        body: JSON.stringify({
-          name: btmName.value,
-          menge: btmMenge.value,
-          darreichungsform: btmDarreichungsform.value,
-          einheit: btmEinheit.value,
-        }),
-      }
-    ).catch((err) => {
-      //SHOW ERROR
-      console.log(err);
-    });
-
-    if (response && response.status === 201) {
-      const data = await response.json();
-      console.log(data);
-      hideModal();
-      enqueueSnackbar("Betäubungsmittel erfolgreich angelegt", {
-        variant: "success",
-        autoHideDuration: 3000,
-      });
-      props.apothekeRefFunctions.updateBtmList();
-    } else if (response && response.status === 400) {
-      setErrorMessage("OHJE");
-      setShowError(true);
-    }
-  };
-
-  let darreichungsformen = {
-    Tbl: { einheiten: ["Stueck"] },
-    Trp: { einheiten: ["ml"] },
-    Sup: { einheiten: ["Stueck"] },
-    RTA: { einheiten: ["Stueck"] },
-    RKA: { einheiten: ["Stueck"] },
-    Ampullen: { einheiten: ["Stueck"] },
-    Rezeptursubstanz: { einheiten: ["g"] },
-    HKP: { einheiten: ["Stueck"] },
-    Pfl: { einheiten: ["Stueck"] },
-  };
-  var units = darreichungsformen[activeDarreichungsform].einheiten;
-
-  return (
-    <Modal
-      {...props}
-      size="lg"
-      aria-labelledby="contained-modal-title-vcenter"
-      centered
-      onExiting={hideModal}
-    >
-      <Modal.Header closeButton>
-        <Modal.Title id="contained-modal-title-vcenter">
-          Betäubungsmittel hinzufügen
-        </Modal.Title>
-      </Modal.Header>
-      <Form onSubmit={createNewBtm}>
-        {showError ? <Alert variant="danger">{errorMessage}</Alert> : null}
-        <Modal.Body>
-          <Form.Group as={Row} controlId="btmName">
-            <Form.Label column sm="2">
-              Name
-            </Form.Label>
-            <Col sm="10">
-              <Form.Control name="btmName" required type="text" />
-            </Col>
-          </Form.Group>
-          <Form.Group as={Row} controlId="btmMenge">
-            <Form.Label column sm="2">
-              Menge
-            </Form.Label>
-            <Col sm="10">
-              <Form.Control
-                name="btmMenge"
-                type="number"
-                min="0"
-                defaultValue="0"
-              />
-            </Col>
-          </Form.Group>
-          <Form.Group as={Row} controlId="btmDarreichungsform">
-            <Form.Label column sm="2">
-              Darreichungsform
-            </Form.Label>
-            <Col sm="10">
-              <Form.Control
-                onChange={(event) =>
-                  setActiveDarreichungsform(event.target.value)
-                }
-                name="btmDarreichungsform"
-                required
-                as="select"
-              >
-                {Object.keys(darreichungsformen).map((df) => (
-                  <option value={df}>{df}</option>
-                ))}
-              </Form.Control>
-            </Col>
-          </Form.Group>
-
-          <Form.Group as={Row} controlId="btmEinheit">
-            <Form.Label column sm="2">
-              Einheit
-            </Form.Label>
-            <Col sm="10">
-              <Form.Control name="btmEinheit" required as="select">
-                {activeDarreichungsform !== ""
-                  ? Object.keys(units).map((e) => (
-                      <option value={units[e]}>{units[e]}</option>
-                    ))
-                  : null}
-              </Form.Control>
-            </Col>
-          </Form.Group>
-        </Modal.Body>
-        <Modal.Footer>
-          <Button variant="danger" onClick={props.onHide}>
-            Close
-          </Button>
-          <Button variant="primary" type="submit">
-            Bestätigen
-          </Button>
-        </Modal.Footer>
-      </Form>
-    </Modal>
-  );
-}
+import React, { useState } from "react";
+import { Modal, Button, Form, Row, Col, Alert } from "react-bootstrap";
+import { useSnackbar } from "notistack";
+
+export default function NeuesBtmModal(props) {
+  const { enqueueSnackbar } = useSnackbar();
+  const [activeDarreichungsform, setActiveDarreichungsform] = useState("Tbl");
+  const [showError, setShowError] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("");
+
+  const hideModal = () => {
+    setShowError(false);
+    props.onHide();
+  };
+
+  const createNewBtm = async (event) => {
+    event.preventDefault();
+    let { btmName, btmMenge, btmDarreichungsform, btmEinheit } = event.target;
+    const response = await fetch(
+      `http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${props.apothekeId}/btm`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization:
+            "Bearer " + window.sessionStorage.getItem("edbapo-jwt"),
+        },
+        body: JSON.stringify({
+          name: btmName.value,
+          menge: btmMenge.value,
+          darreichungsform: btmDarreichungsform.value,
+          einheit: btmEinheit.value,
+        }),
+      }
+    ).catch((err) => {
+      //SHOW ERROR
+      console.log(err);
+    });
+
+    if (response && response.status === 201) {
+      const data = await response.json();
+      console.log(data);
+      hideModal();
+      enqueueSnackbar("Betäubungsmittel erfolgreich angelegt", {
+        variant: "success",
+        autoHideDuration: 3000,
+      });
+      props.apothekeRefFunctions.updateBtmList();
+    } else if (response && response.status === 400) {
+      setErrorMessage("OHJE");
+      setShowError(true);
+    }
+  };
+
+  let darreichungsformen = {
+    Tbl: { einheiten: ["Stueck"] },
+    Trp: { einheiten: ["ml"] },
+    Sup: { einheiten: ["Stueck"] },
+    RTA: { einheiten: ["Stueck"] },
+    RKA: { einheiten: ["Stueck"] },
+    Ampullen: { einheiten: ["Stueck"] },
+    Rezeptursubstanz: { einheiten: ["g"] },
+    HKP: { einheiten: ["Stueck"] },
+    Pfl: { einheiten: ["Stueck"] },
+  };
+  var units = darreichungsformen[activeDarreichungsform].einheiten;
+
+  return (
+    <Modal
+      {...props}
+      size="lg"
+      aria-labelledby="contained-modal-title-vcenter"
+      centered
+      onExiting={hideModal}
+      backdrop="static"
+    >
+      <Modal.Header closeButton>
+        <Modal.Title id="contained-modal-title-vcenter">
+          Betäubungsmittel hinzufügen
+        </Modal.Title>
+      </Modal.Header>
+      <Form onSubmit={createNewBtm}>
+        {showError ? <Alert variant="danger">{errorMessage}</Alert> : null}
+        <Modal.Body>
+          <Form.Group as={Row} controlId="btmName">
+            <Form.Label column sm="2">
+              Name
+            </Form.Label>
+            <Col sm="10">
+              <Form.Control name="btmName" required type="text" />
+            </Col>
+          </Form.Group>
+          <Form.Group as={Row} controlId="btmMenge">
+            <Form.Label column sm="2">
+              Menge
+            </Form.Label>
+            <Col sm="10">
+              <Form.Control
+                name="btmMenge"
+                type="number"
+                min="0"
+                defaultValue="0"
+              />
+            </Col>
+          </Form.Group>
+          <Form.Group as={Row} controlId="btmDarreichungsform">
+            <Form.Label column sm="2">
+              Darreichungsform
+            </Form.Label>
+            <Col sm="10">
+              <Form.Control
+                onChange={(event) =>
+                  setActiveDarreichungsform(event.target.value)
+                }
+                name="btmDarreichungsform"
+                required
+                as="select"
+              >
+                {Object.keys(darreichungsformen).map((df) => (
+                  <option value={df}>{df}</option>
+                ))}
+              </Form.Control>
+            </Col>
+          </Form.Group>
+
+          <Form.Group as={Row} controlId="btmEinheit">
+            <Form.Label column sm="2">
+              Einheit
+            </Form.Label>
+            <Col sm="10">
+              <Form.Control name="btmEinheit" required as="select">
+                {activeDarreichungsform !== ""
+                  ? Object.keys(units).map((e) => (
+                      <option value={units[e]}>{units[e]}</option>
+                    ))
+                  : null}
+              </Form.Control>
+            </Col>
+          </Form.Group>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button variant="danger" onClick={props.onHide}>
+            Close
+          </Button>
+          <Button variant="primary" type="submit">
+            Bestätigen
+          </Button>
+        </Modal.Footer>
+      </Form>
+    </Modal>
+  );
+}
diff --git a/frontend/src/modals/ApothekeRegisterModal.js b/frontend/src/modals/ApothekeRegisterModal.js
index b66b2b0992845ad7b4ca9a786fb6fd43e15f7e72..6d5fb79a59ecab706319a573ab71737527d7aa5c 100644
--- a/frontend/src/modals/ApothekeRegisterModal.js
+++ b/frontend/src/modals/ApothekeRegisterModal.js
@@ -1,327 +1,328 @@
-import React, { useEffect, useState } from "react";
-import { useParams } from 'react-router-dom';
-import { makeStyles, useTheme } from "@material-ui/core/styles";
-import { Modal, Button, Form, Row, Col } from "react-bootstrap";
-import { useForm } from "./useForm";
-import MobileStepper from "@material-ui/core/MobileStepper";
-import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft";
-import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight";
-
-const useStyles = makeStyles({
-  root: {
-    flexGrow: 1,
-  },
-});
-
-function ApothekeRegisterModal(props) {
-  const classes = useStyles();
-  const theme = useTheme();
-  const [activeStep, setActiveStep] = useState(0);
-  const [showContinueModal, setShowContinueModal] = useState(false);
-  const [values, handleChange] = useForm({
-    name: "",
-    email: "",
-    strasse: "",
-    nummer: "",
-    plz: "",
-    ort: "",
-    vorname: "",
-    nachname: "",
-    nutzername: "",
-    rolle: "Admin",
-  });
-
-  const handleNext = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep + 1);
-    setShowContinueModal(true);
-  };
-
-  const handleBack = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep - 1);
-    setShowContinueModal(false);
-  };
-
-  const createNewApo = () => {
-    let body = {
-      name: values.name,
-      email: values.email,
-      anschrift: {
-        strasse: values.strasse,
-        nummer: values.nummer,
-        plz: values.plz,
-        ort: values.ort,
-      },
-    };
-    return fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(body),
-    }).catch((err) => {
-      console.log(err);
-    });
-  };
-
-  const createNewAdmin = (apoId) => {
-    let body = {
-      name: values.nachname,
-      vorname: values.vorname,
-      nutzername: values.nutzername,
-      passwort: passwords.password,
-      rolle: 'ADMIN',
-    };
-
-    return fetch(
-      `http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/benutzer`,
-      {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(body),
-      }
-    ).catch((err) => {
-      console.log(err);
-    });
-  };
-
-  const login = async () => {
-    let body = {
-      username: values.nutzername,
-      password: passwords.password,
-    };
-    return await fetch(`http://${process.env.REACT_APP_BACKEND_URL}/login`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(body),
-    }).catch((err) => {
-      //SHOW ERROR
-      console.log(err);
-    });
-  };
-
-  const [passwords, setPasswords] = React.useState({
-    password: "",
-    passwordCheck: "",
-  });
-
-  function handleChangePassword(e) {
-    setPasswords({
-      ...passwords,
-      [e.target.name]: e.target.value,
-    });
-  }
-
-  const handleSubmit = async event => {
-    event.preventDefault();
-
-    //ERROR HANDLING MISSING
-    // let { username, neuesPasswort} = event.target;
-    let apoResponse = await createNewApo();
-    if (apoResponse.status === 201) {
-      let apoId = await apoResponse.json();
-      let adminRespone = await createNewAdmin(apoId.id);
-      if (adminRespone.status === 201) {
-        let loginResponse = await login();
-        if (loginResponse.status === 200) {
-          const data = await loginResponse.json();
-          window.sessionStorage.setItem("edbapo-jwt", data.jwt);
-          props.history.push(`/apotheke/${data.apothekeId}`);
-        }
-      }
-    }
-  };
-
-  const cancel = () => {
-    setShowContinueModal(false);
-  };
-
-  const renderSchritt1 = () => {
-    return (
-      <React.Fragment>
-        <Form.Label>1. Schritt Apotheke erstellen</Form.Label>
-        <Form.Row>
-          <Form.Group as={Col} controlId="name">
-            <Form.Control
-              required
-              type="text"
-              placeholder="Name der Apotheke"
-              name="name"
-              value={values.name}
-              onChange={handleChange}
-            />
-          </Form.Group>
-        </Form.Row>
-
-        <Form.Row>
-          <Form.Group as={Col} controlId="email">
-            <Form.Control
-              required
-              type="email"
-              placeholder="E-Mail der Apotheke"
-              name="email"
-              value={values.email}
-              onChange={handleChange}
-            />
-          </Form.Group>
-        </Form.Row>
-
-        <Form.Row>
-          <Form.Group as={Col} sm={9} controlId="strasse">
-            <Form.Control
-              required
-              type="text"
-              placeholder="Straße"
-              name="strasse"
-              value={values.strasse}
-              onChange={handleChange}
-            />
-          </Form.Group>
-          <Form.Group as={Col} sm={3} controlId="nummer">
-            <Form.Control
-              required
-              type="number"
-              placeholder="Nummer"
-              name="nummer"
-              value={values.nummer}
-              onChange={handleChange}
-            />
-          </Form.Group>
-        </Form.Row>
-        <Form.Row>
-          <Form.Group as={Col} sm={3} controlId="plz">
-            <Form.Control
-              required
-              type="text"
-              placeholder="PLZ"
-              name="plz"
-              value={values.plz}
-              onChange={handleChange}
-            />
-          </Form.Group>
-          <Form.Group as={Col} sm={9} controlId="ort">
-            <Form.Control
-              required
-              type="text"
-              placeholder="Ort"
-              name="ort"
-              value={values.ort}
-              onChange={handleChange}
-            />
-          </Form.Group>
-        </Form.Row>
-      </React.Fragment>
-    );
-  };
-
-  const renderSchritt2 = () => {
-    return (
-      <React.Fragment>
-        <Form.Label>2. Schritt Admin Nutzer erstellen</Form.Label>
-        <Form.Group controllId="vorname">
-          <Form.Control
-            required="required"
-            type="text"
-            placeholder="Vorname"
-            name="vorname"
-            value={values.vorname}
-            onChange={handleChange}
-          />
-        </Form.Group>
-        <Form.Group controllId="nachname">
-          <Form.Control
-            required="required"
-            type="text"
-            placeholder="Nachname"
-            name="nachname"
-            value={values.nachname}
-            onChange={handleChange}
-          />
-        </Form.Group>
-        <Form.Group controllId="nutzername">
-          <Form.Control
-            required="required"
-            type="text"
-            placeholder="Nutzername"
-            name="nutzername"
-            value={values.nutzername}
-            onChange={handleChange}
-          />
-        </Form.Group>
-        <Form.Group controllId="password">
-          <Form.Control
-            required="required"
-            type="password"
-            placeholder="Passwort erstellen"
-            name="password"
-            value={passwords.password}
-            onChange={handleChangePassword}
-          />
-        </Form.Group>
-        <Form.Group>
-          <Form.Control
-            required="required"
-            type="password"
-            name="passwordCheck"
-            placeholder="Passwort wiederholen"
-            value={passwords.passwordCheck}
-            onChange={handleChangePassword}
-          />
-        </Form.Group>
-      </React.Fragment>
-    );
-  };
-
-  return (
-    <Modal
-      show={props.show}
-      onHide={props.onHide}
-      centered
-      aria-labelledby="contained-modal-title-vcenter"
-    >
-      <Modal.Header>
-        <Modal.Title>Neue Apotheke registrieren</Modal.Title>
-      </Modal.Header>
-      <Form onSubmit={handleSubmit}>
-        <Modal.Body>
-          {showContinueModal ? renderSchritt2() : renderSchritt1()}
-        </Modal.Body>
-        <MobileStepper
-          variant="dots"
-          steps={2}
-          position="static"
-          activeStep={activeStep}
-          className={classes.root}
-          nextButton={
-            <Button
-              size="small"
-              type={activeStep == 1 ? "submit" : "button"}
-              onClick={activeStep == 0 ? handleNext : null}
-              disabled={activeStep === 2}
-            >
-              {activeStep === 1 ? 'Registrien' : 'Weiter'}
-              {theme.direction === "rtl" ? (<KeyboardArrowLeft />) : (<KeyboardArrowRight />)}
-            </Button>
-          }
-          backButton={
-            <Button
-              size="small"
-              type={activeStep == 1 ? "submit" : "button"}
-              onClick={handleBack}
-              disabled={activeStep === 0}
-            >
-              {theme.direction === "rtl" ? (
-                <KeyboardArrowRight />
-              ) : (
-                <KeyboardArrowLeft />
-              )}
-              Zurück
-            </Button>
-          }
-        />
-      </Form>
-    </Modal>
-  );
-}
-export default ApothekeRegisterModal;
+import React, { useEffect, useState } from "react";
+import { useParams } from 'react-router-dom';
+import { makeStyles, useTheme } from "@material-ui/core/styles";
+import { Modal, Button, Form, Row, Col } from "react-bootstrap";
+import { useForm } from "./useForm";
+import MobileStepper from "@material-ui/core/MobileStepper";
+import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft";
+import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight";
+
+const useStyles = makeStyles({
+  root: {
+    flexGrow: 1,
+  },
+});
+
+function ApothekeRegisterModal(props) {
+  const classes = useStyles();
+  const theme = useTheme();
+  const [activeStep, setActiveStep] = useState(0);
+  const [showContinueModal, setShowContinueModal] = useState(false);
+  const [values, handleChange] = useForm({
+    name: "",
+    email: "",
+    strasse: "",
+    nummer: "",
+    plz: "",
+    ort: "",
+    vorname: "",
+    nachname: "",
+    nutzername: "",
+    rolle: "Admin",
+  });
+
+  const handleNext = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep + 1);
+    setShowContinueModal(true);
+  };
+
+  const handleBack = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep - 1);
+    setShowContinueModal(false);
+  };
+
+  const createNewApo = () => {
+    let body = {
+      name: values.name,
+      email: values.email,
+      anschrift: {
+        strasse: values.strasse,
+        nummer: values.nummer,
+        plz: values.plz,
+        ort: values.ort,
+      },
+    };
+    return fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+    }).catch((err) => {
+      console.log(err);
+    });
+  };
+
+  const createNewAdmin = (apoId) => {
+    let body = {
+      name: values.nachname,
+      vorname: values.vorname,
+      nutzername: values.nutzername,
+      passwort: passwords.password,
+      rolle: 'ADMIN',
+    };
+
+    return fetch(
+      `http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/benutzer`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(body),
+      }
+    ).catch((err) => {
+      console.log(err);
+    });
+  };
+
+  const login = async () => {
+    let body = {
+      username: values.nutzername,
+      password: passwords.password,
+    };
+    return await fetch(`http://${process.env.REACT_APP_BACKEND_URL}/login`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(body),
+    }).catch((err) => {
+      //SHOW ERROR
+      console.log(err);
+    });
+  };
+
+  const [passwords, setPasswords] = React.useState({
+    password: "",
+    passwordCheck: "",
+  });
+
+  function handleChangePassword(e) {
+    setPasswords({
+      ...passwords,
+      [e.target.name]: e.target.value,
+    });
+  }
+
+  const handleSubmit = async event => {
+    event.preventDefault();
+
+    //ERROR HANDLING MISSING
+    // let { username, neuesPasswort} = event.target;
+    let apoResponse = await createNewApo();
+    if (apoResponse.status === 201) {
+      let apoId = await apoResponse.json();
+      let adminRespone = await createNewAdmin(apoId.id);
+      if (adminRespone.status === 201) {
+        let loginResponse = await login();
+        if (loginResponse.status === 200) {
+          const data = await loginResponse.json();
+          window.sessionStorage.setItem("edbapo-jwt", data.jwt);
+          props.history.push(`/apotheke/${data.apothekeId}`);
+        }
+      }
+    }
+  };
+
+  const cancel = () => {
+    setShowContinueModal(false);
+  };
+
+  const renderSchritt1 = () => {
+    return (
+      <React.Fragment>
+        <Form.Label>1. Schritt Apotheke erstellen</Form.Label>
+        <Form.Row>
+          <Form.Group as={Col} controlId="name">
+            <Form.Control
+              required
+              type="text"
+              placeholder="Name der Apotheke"
+              name="name"
+              value={values.name}
+              onChange={handleChange}
+            />
+          </Form.Group>
+        </Form.Row>
+
+        <Form.Row>
+          <Form.Group as={Col} controlId="email">
+            <Form.Control
+              required
+              type="email"
+              placeholder="E-Mail der Apotheke"
+              name="email"
+              value={values.email}
+              onChange={handleChange}
+            />
+          </Form.Group>
+        </Form.Row>
+
+        <Form.Row>
+          <Form.Group as={Col} sm={9} controlId="strasse">
+            <Form.Control
+              required
+              type="text"
+              placeholder="Straße"
+              name="strasse"
+              value={values.strasse}
+              onChange={handleChange}
+            />
+          </Form.Group>
+          <Form.Group as={Col} sm={3} controlId="nummer">
+            <Form.Control
+              required
+              type="number"
+              placeholder="Nummer"
+              name="nummer"
+              value={values.nummer}
+              onChange={handleChange}
+            />
+          </Form.Group>
+        </Form.Row>
+        <Form.Row>
+          <Form.Group as={Col} sm={3} controlId="plz">
+            <Form.Control
+              required
+              type="text"
+              placeholder="PLZ"
+              name="plz"
+              value={values.plz}
+              onChange={handleChange}
+            />
+          </Form.Group>
+          <Form.Group as={Col} sm={9} controlId="ort">
+            <Form.Control
+              required
+              type="text"
+              placeholder="Ort"
+              name="ort"
+              value={values.ort}
+              onChange={handleChange}
+            />
+          </Form.Group>
+        </Form.Row>
+      </React.Fragment>
+    );
+  };
+
+  const renderSchritt2 = () => {
+    return (
+      <React.Fragment>
+        <Form.Label>2. Schritt Admin Nutzer erstellen</Form.Label>
+        <Form.Group controllId="vorname">
+          <Form.Control
+            required="required"
+            type="text"
+            placeholder="Vorname"
+            name="vorname"
+            value={values.vorname}
+            onChange={handleChange}
+          />
+        </Form.Group>
+        <Form.Group controllId="nachname">
+          <Form.Control
+            required="required"
+            type="text"
+            placeholder="Nachname"
+            name="nachname"
+            value={values.nachname}
+            onChange={handleChange}
+          />
+        </Form.Group>
+        <Form.Group controllId="nutzername">
+          <Form.Control
+            required="required"
+            type="text"
+            placeholder="Nutzername"
+            name="nutzername"
+            value={values.nutzername}
+            onChange={handleChange}
+          />
+        </Form.Group>
+        <Form.Group controllId="password">
+          <Form.Control
+            required="required"
+            type="password"
+            placeholder="Passwort erstellen"
+            name="password"
+            value={passwords.password}
+            onChange={handleChangePassword}
+          />
+        </Form.Group>
+        <Form.Group>
+          <Form.Control
+            required="required"
+            type="password"
+            name="passwordCheck"
+            placeholder="Passwort wiederholen"
+            value={passwords.passwordCheck}
+            onChange={handleChangePassword}
+          />
+        </Form.Group>
+      </React.Fragment>
+    );
+  };
+
+  return (
+    <Modal
+      show={props.show}
+      onHide={props.onHide}
+      centered
+      aria-labelledby="contained-modal-title-vcenter"
+      backdrop="static"
+    >
+      <Modal.Header closeButton>
+        <Modal.Title>Neue Apotheke registrieren</Modal.Title>
+      </Modal.Header>
+      <Form onSubmit={handleSubmit}>
+        <Modal.Body>
+          {showContinueModal ? renderSchritt2() : renderSchritt1()}
+        </Modal.Body>
+        <MobileStepper
+          variant="dots"
+          steps={2}
+          position="static"
+          activeStep={activeStep}
+          className={classes.root}
+          nextButton={
+            <Button
+              size="small"
+              type={activeStep == 1 ? "submit" : "button"}
+              onClick={activeStep == 0 ? handleNext : null}
+              disabled={activeStep === 2}
+            >
+              {activeStep === 1 ? 'Registrien' : 'Weiter'}
+              {theme.direction === "rtl" ? (<KeyboardArrowLeft />) : (<KeyboardArrowRight />)}
+            </Button>
+          }
+          backButton={
+            <Button
+              size="small"
+              type={activeStep == 1 ? "submit" : "button"}
+              onClick={handleBack}
+              disabled={activeStep === 0}
+            >
+              {theme.direction === "rtl" ? (
+                <KeyboardArrowRight />
+              ) : (
+                <KeyboardArrowLeft />
+              )}
+              Zurück
+            </Button>
+          }
+        />
+      </Form>
+    </Modal>
+  );
+}
+export default ApothekeRegisterModal;
diff --git a/frontend/src/modals/ArztAddModal.js b/frontend/src/modals/ArztAddModal.js
index 5f0ef996bd6362feb0e834c146013ef03e8bc8ce..751b4813cf02ce1ab9b7894b8f6348b7a2741b45 100644
--- a/frontend/src/modals/ArztAddModal.js
+++ b/frontend/src/modals/ArztAddModal.js
@@ -1,102 +1,103 @@
-import React from 'react';
-import { useParams } from 'react-router-dom';
-import { Modal, Col, Button, Form } from 'react-bootstrap';
-import { useSnackbar } from 'notistack';
-
-function ArztAddModal(props) {
-
-  const { apoId } = useParams();
-  const { enqueueSnackbar } = useSnackbar();
-
-  const updateDetails = event => {
-    event.preventDefault();
-    let { name, plz, ort, strasse, nummer } = event.target;
-
-    let body = {
-      name: name.value,
-      anschrift: {
-        ort: ort.value,
-        plz: plz.value,
-        strasse: strasse.value,
-        nummer: nummer.value
-      }
-    }
-
-    fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/arzt`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"),
-      },
-      body: JSON.stringify(body)
-    }).then((res) => {
-      if (res.status === 201) {
-        props.onHide();
-        props.updateArztData();
-        enqueueSnackbar('Arzt erstellt', { variant: 'success', autoHideDuration: 3000 });
-      } else if (res.status === 400) {
-        enqueueSnackbar('Ein Fehler ist aufgetaucht', { variant: 'error', autoHideDuration: 3000 });
-      }
-    }).catch((err) => {
-      console.log(err);
-      return;
-    });
-
-    
-  }
-
-  return (
-    <Modal
-      {...props}
-      size="lg"
-      aria-labelledby="contained-modal-title-vcenter"
-      centered
-      onExiting={props.onHide}
-    >
-      <Modal.Header closeButton>
-        <Modal.Title id="contained-modal-title-vcenter">
-          Arzt hinzufügen
-            </Modal.Title>
-      </Modal.Header>
-      <Form onSubmit={updateDetails}>
-        <Modal.Body>
-          <Form.Row>
-            <Form.Group as={Col} controlId="name">
-              <Form.Label>Name</Form.Label>
-              <Form.Control name="name" required type="text" />
-            </Form.Group>
-          </Form.Row>
-
-          <Form.Row>
-            <Form.Group as={Col} sm={9} controlId="strasse">
-              <Form.Label>Straße</Form.Label>
-              <Form.Control name="strasse" required type="text" />
-            </Form.Group>
-            <Form.Group as={Col} sm={3} controlId="nummer">
-              <Form.Label>Nummer</Form.Label>
-              <Form.Control name="nummer" required type="text" />
-            </Form.Group>
-          </Form.Row>
-          <Form.Row>
-            <Form.Group as={Col} sm={3} controlId="plz">
-              <Form.Label>PLZ</Form.Label>
-              <Form.Control name="plz" required type="text" />
-            </Form.Group>
-
-            <Form.Group as={Col} sm={9} controlId="ort">
-              <Form.Label>Ort</Form.Label>
-              <Form.Control name="ort" required type="text" />
-            </Form.Group>
-          </Form.Row>
-        </Modal.Body>
-        <Modal.Footer>
-          <Button autofocus variant="" onClick={props.onHide}>Abbrechen</Button>
-          <Button variant="primary" type="submit" >Bestätigen</Button>
-        </Modal.Footer>
-      </Form>
-    </Modal>
-  )
-
-}
-
-export default ArztAddModal;
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { Modal, Col, Button, Form } from 'react-bootstrap';
+import { useSnackbar } from 'notistack';
+
+function ArztAddModal(props) {
+
+  const { apoId } = useParams();
+  const { enqueueSnackbar } = useSnackbar();
+
+  const updateDetails = event => {
+    event.preventDefault();
+    let { name, plz, ort, strasse, nummer } = event.target;
+
+    let body = {
+      name: name.value,
+      anschrift: {
+        ort: ort.value,
+        plz: plz.value,
+        strasse: strasse.value,
+        nummer: nummer.value
+      }
+    }
+
+    fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/arzt`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"),
+      },
+      body: JSON.stringify(body)
+    }).then((res) => {
+      if (res.status === 201) {
+        props.onHide();
+        props.updateArztData();
+        enqueueSnackbar('Arzt erstellt', { variant: 'success', autoHideDuration: 3000 });
+      } else if (res.status === 400) {
+        enqueueSnackbar('Ein Fehler ist aufgetaucht', { variant: 'error', autoHideDuration: 3000 });
+      }
+    }).catch((err) => {
+      console.log(err);
+      return;
+    });
+
+    
+  }
+
+  return (
+    <Modal
+      {...props}
+      size="lg"
+      aria-labelledby="contained-modal-title-vcenter"
+      centered
+      onExiting={props.onHide}
+      backdrop="static"
+    >
+      <Modal.Header closeButton>
+        <Modal.Title id="contained-modal-title-vcenter">
+          Arzt hinzufügen
+            </Modal.Title>
+      </Modal.Header>
+      <Form onSubmit={updateDetails}>
+        <Modal.Body>
+          <Form.Row>
+            <Form.Group as={Col} controlId="name">
+              <Form.Label>Name</Form.Label>
+              <Form.Control name="name" required type="text" />
+            </Form.Group>
+          </Form.Row>
+
+          <Form.Row>
+            <Form.Group as={Col} sm={9} controlId="strasse">
+              <Form.Label>Straße</Form.Label>
+              <Form.Control name="strasse" required type="text" />
+            </Form.Group>
+            <Form.Group as={Col} sm={3} controlId="nummer">
+              <Form.Label>Nummer</Form.Label>
+              <Form.Control name="nummer" required type="text" />
+            </Form.Group>
+          </Form.Row>
+          <Form.Row>
+            <Form.Group as={Col} sm={3} controlId="plz">
+              <Form.Label>PLZ</Form.Label>
+              <Form.Control name="plz" required type="text" />
+            </Form.Group>
+
+            <Form.Group as={Col} sm={9} controlId="ort">
+              <Form.Label>Ort</Form.Label>
+              <Form.Control name="ort" required type="text" />
+            </Form.Group>
+          </Form.Row>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button autofocus variant="" onClick={props.onHide}>Abbrechen</Button>
+          <Button variant="primary" type="submit" >Bestätigen</Button>
+        </Modal.Footer>
+      </Form>
+    </Modal>
+  )
+
+}
+
+export default ArztAddModal;
diff --git a/frontend/src/modals/ArztEditModal.js b/frontend/src/modals/ArztEditModal.js
index e0ce1b7f6991cfd4809d7852c9a16cf649dca29c..a9a4dbbfcafaa96cc862a33560089d092856eb87 100644
--- a/frontend/src/modals/ArztEditModal.js
+++ b/frontend/src/modals/ArztEditModal.js
@@ -1,107 +1,108 @@
-import React from 'react';
-import { useParams } from 'react-router-dom';
-import { Modal, Col, Button, Form } from 'react-bootstrap';
-import { useSnackbar } from 'notistack';
-
-function ArztEditModal(props) {
-
-  const { apoId } = useParams();
-  const { enqueueSnackbar } = useSnackbar();
-
-  let { id, name, anschrift } = props.arzt;
-
-
-  const updateDetails = async event => {
-    event.preventDefault();
-    let { name, plz, ort, strasse, nummer } = event.target;
-
-    let body = {
-      name: name.value,
-      anschrift: {
-        ort: ort.value,
-        plz: plz.value,
-        strasse: strasse.value,
-        nummer: nummer.value
-      }
-    }
-
-    fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/arzt/${id}`, {
-      method: 'PUT',
-      headers: {
-        'Content-Type': 'application/json',
-        'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"),
-      },
-      body: JSON.stringify(body)
-    }).then((res) => {
-      if (res.status === 200) {
-        props.onHide();
-        props.updateArztData();
-        enqueueSnackbar('Arzt aktualisiert', { variant: 'success', autoHideDuration: 3000 });
-      } else if (res.status === 400) {
-        enqueueSnackbar('Ein Fehler ist aufgetaucht', { variant: 'error', autoHideDuration: 3000 });
-      } else if (res.status === 403) {
-        enqueueSnackbar('Falsches Passwort', { variant: 'error', autoHideDuration: 3000 });
-      }
-    }).catch((err) => {
-      console.log(err);
-      return;
-    });
-
-
-  }
-
-  return (
-    <Modal
-      {...props}
-      size="lg"
-      aria-labelledby="contained-modal-title-vcenter"
-      centered
-      onExiting={props.onHide}
-    >
-      <Modal.Header closeButton>
-        <Modal.Title id="contained-modal-title-vcenter">
-          Arzt bearbeiten
-            </Modal.Title>
-      </Modal.Header>
-      <Form onSubmit={updateDetails}>
-        <Modal.Body>
-          <Form.Row>
-            <Form.Group as={Col} controlId="name">
-              <Form.Label>Name</Form.Label>
-              <Form.Control name="name" required defaultValue={name} type="text" />
-            </Form.Group>
-          </Form.Row>
-
-          <Form.Row>
-            <Form.Group as={Col} sm={9} controlId="strasse">
-              <Form.Label>Straße</Form.Label>
-              <Form.Control name="strasse" required type="text" defaultValue={anschrift.strasse} />
-            </Form.Group>
-            <Form.Group as={Col} sm={3} controlId="nummer">
-              <Form.Label>Nummer</Form.Label>
-              <Form.Control name="nummer" required type="text" defaultValue={anschrift.nummer} />
-            </Form.Group>
-          </Form.Row>
-          <Form.Row>
-            <Form.Group as={Col} sm={3} controlId="plz">
-              <Form.Label>PLZ</Form.Label>
-              <Form.Control name="plz" required type="text" defaultValue={anschrift.plz} />
-            </Form.Group>
-
-            <Form.Group as={Col} sm={9} controlId="ort">
-              <Form.Label>Ort</Form.Label>
-              <Form.Control name="ort" required type="text" defaultValue={anschrift.ort} />
-            </Form.Group>
-          </Form.Row>
-        </Modal.Body>
-        <Modal.Footer>
-          <Button autofocus variant="" onClick={props.onHide}>Abbrechen</Button>
-          <Button variant="primary" type="submit" >Bestätigen</Button>
-        </Modal.Footer>
-      </Form>
-    </Modal>
-  )
-
-}
-
-export default ArztEditModal;
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { Modal, Col, Button, Form } from 'react-bootstrap';
+import { useSnackbar } from 'notistack';
+
+function ArztEditModal(props) {
+
+  const { apoId } = useParams();
+  const { enqueueSnackbar } = useSnackbar();
+
+  let { id, name, anschrift } = props.arzt;
+
+
+  const updateDetails = async event => {
+    event.preventDefault();
+    let { name, plz, ort, strasse, nummer } = event.target;
+
+    let body = {
+      name: name.value,
+      anschrift: {
+        ort: ort.value,
+        plz: plz.value,
+        strasse: strasse.value,
+        nummer: nummer.value
+      }
+    }
+
+    fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/arzt/${id}`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"),
+      },
+      body: JSON.stringify(body)
+    }).then((res) => {
+      if (res.status === 200) {
+        props.onHide();
+        props.updateArztData();
+        enqueueSnackbar('Arzt aktualisiert', { variant: 'success', autoHideDuration: 3000 });
+      } else if (res.status === 400) {
+        enqueueSnackbar('Ein Fehler ist aufgetaucht', { variant: 'error', autoHideDuration: 3000 });
+      } else if (res.status === 403) {
+        enqueueSnackbar('Falsches Passwort', { variant: 'error', autoHideDuration: 3000 });
+      }
+    }).catch((err) => {
+      console.log(err);
+      return;
+    });
+
+
+  }
+
+  return (
+    <Modal
+      {...props}
+      size="lg"
+      aria-labelledby="contained-modal-title-vcenter"
+      centered
+      onExiting={props.onHide}
+      backdrop="static"
+    >
+      <Modal.Header closeButton>
+        <Modal.Title id="contained-modal-title-vcenter">
+          Arzt bearbeiten
+            </Modal.Title>
+      </Modal.Header>
+      <Form onSubmit={updateDetails}>
+        <Modal.Body>
+          <Form.Row>
+            <Form.Group as={Col} controlId="name">
+              <Form.Label>Name</Form.Label>
+              <Form.Control name="name" required defaultValue={name} type="text" />
+            </Form.Group>
+          </Form.Row>
+
+          <Form.Row>
+            <Form.Group as={Col} sm={9} controlId="strasse">
+              <Form.Label>Straße</Form.Label>
+              <Form.Control name="strasse" required type="text" defaultValue={anschrift.strasse} />
+            </Form.Group>
+            <Form.Group as={Col} sm={3} controlId="nummer">
+              <Form.Label>Nummer</Form.Label>
+              <Form.Control name="nummer" required type="text" defaultValue={anschrift.nummer} />
+            </Form.Group>
+          </Form.Row>
+          <Form.Row>
+            <Form.Group as={Col} sm={3} controlId="plz">
+              <Form.Label>PLZ</Form.Label>
+              <Form.Control name="plz" required type="text" defaultValue={anschrift.plz} />
+            </Form.Group>
+
+            <Form.Group as={Col} sm={9} controlId="ort">
+              <Form.Label>Ort</Form.Label>
+              <Form.Control name="ort" required type="text" defaultValue={anschrift.ort} />
+            </Form.Group>
+          </Form.Row>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button autofocus variant="" onClick={props.onHide}>Abbrechen</Button>
+          <Button variant="primary" type="submit" >Bestätigen</Button>
+        </Modal.Footer>
+      </Form>
+    </Modal>
+  )
+
+}
+
+export default ArztEditModal;
diff --git a/frontend/src/modals/BtmAddModal.js b/frontend/src/modals/BtmAddModal.js
index 1120c8cf800a7219fff15ed7b0366e76702e6754..5b0b55b853da0997e6a27f4b780b4ec7a49a7869 100644
--- a/frontend/src/modals/BtmAddModal.js
+++ b/frontend/src/modals/BtmAddModal.js
@@ -1,129 +1,130 @@
-import React, { useState } from 'react';
-import { useParams } from 'react-router-dom';
-import { Modal, Button, Form, Row, Col, Alert } from 'react-bootstrap';
-import { useSnackbar } from 'notistack';
-
-function BtmAddModal(props) {
-
-  const { apoId } = useParams();
-  const { enqueueSnackbar } = useSnackbar();
-  const [activeDarreichungsform, setActiveDarreichungsform] = useState('Tbl');
-  const [showError, setShowError] = useState(false);
-  const [errorMessage, setErrorMessage] = useState('');
-
-  const createNewBtm = async event => {
-    event.preventDefault();
-    let { btmName, btmMenge, btmDarreichungsform, btmEinheit } = event.target;
-
-    fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/btm`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"),
-      },
-      body: JSON.stringify({
-        name: btmName.value,
-        menge: btmMenge.value,
-        darreichungsform: btmDarreichungsform.value,
-        einheit: btmEinheit.value
-      })
-    }).then((res) => {
-      if (res.status === 201) {
-        props.onHide();
-        props.updateBtmData();
-        enqueueSnackbar('Betäubungsmittel erfolgreich angelegt', { variant: 'success', autoHideDuration: 3000 });
-      } else if (res.status === 400) {
-        setErrorMessage('Betäubungsmittel existiert bereits oder Daten ungültig');
-        setShowError(true);
-      }
-    }).catch((err) => {
-      //SHOW ERROR
-      console.log(err);
-    });
-
-    
-
-  }
-
-  // let einheiten = ['g','mg','ml', 'Stueck']
-  let darreichungsformen = {
-    'Tbl': { einheiten: ['Stueck'] },
-    'Trp': { einheiten: ['ml'] },
-    'Sup': { einheiten: ['Stueck'] },
-    'RTA': { einheiten: ['Stueck'] },
-    'RKA': { einheiten: ['Stueck'] },
-    'Ampullen': { einheiten: ['Stueck'] },
-    'Rezeptursubstanz': { einheiten: ['mg', 'g'] },
-    'HKP': { einheiten: ['Stueck'] },
-    'Pfl': { einheiten: ['Stueck'] }
-  }
-  var units = darreichungsformen[activeDarreichungsform].einheiten;
-
-  return (
-    <Modal
-      {...props}
-      size="lg"
-      aria-labelledby="contained-modal-title-vcenter"
-      centered
-      onExiting={props.onHide}
-    >
-      <Modal.Header closeButton>
-        <Modal.Title id="contained-modal-title-vcenter">
-          Betäubungsmittel hinzufügen
-                 </Modal.Title>
-      </Modal.Header>
-      <Form onSubmit={createNewBtm}>
-        {showError ? <Alert variant="danger">{errorMessage}</Alert> : null}
-        <Modal.Body>
-          <Form.Group as={Row} controlId="btmName">
-            <Form.Label column sm="2">
-              Name
-                        </Form.Label>
-            <Col sm="10">
-              <Form.Control name="btmName" required type="text" />
-            </Col>
-          </Form.Group>
-
-          <Form.Group as={Row} controlId="btmMenge">
-            <Form.Label column sm="2">
-              Menge
-                        </Form.Label>
-            <Col sm="10">
-              <Form.Control name="btmMenge" type="number" min="0" defaultValue="0" />
-            </Col>
-          </Form.Group>
-
-
-          <Form.Group as={Row} controlId="btmDarreichungsform">
-            <Form.Label column sm="2">
-              Darreichungsform
-                        </Form.Label>
-            <Col sm="10">
-              <Form.Control onChange={event => setActiveDarreichungsform(event.target.value)} name="btmDarreichungsform" required as="select">
-                {Object.keys(darreichungsformen).map(df => <option kef={df} value={df}>{df}</option>)}
-              </Form.Control>
-            </Col>
-          </Form.Group>
-
-          <Form.Group as={Row} controlId="btmEinheit">
-            <Form.Label column sm="2">
-              Einheit
-                        </Form.Label>
-            <Col sm="10">
-              <Form.Control name="btmEinheit" required as="select">
-                {activeDarreichungsform !== '' ? Object.keys(units).map(e => <option key={units[e]} value={units[e]}>{units[e]}</option>) : null}
-              </Form.Control>
-            </Col>
-          </Form.Group>
-
-        </Modal.Body>
-        <Modal.Footer>
-          <Button variant="" onClick={props.onHide}>Abbrechen</Button>
-          <Button variant="primary" type="submit">Bestätigen</Button>
-        </Modal.Footer>
-      </Form>
-    </Modal>
-  )
-}
-
-export default BtmAddModal;
+import React, { useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { Modal, Button, Form, Row, Col, Alert } from 'react-bootstrap';
+import { useSnackbar } from 'notistack';
+
+function BtmAddModal(props) {
+
+  const { apoId } = useParams();
+  const { enqueueSnackbar } = useSnackbar();
+  const [activeDarreichungsform, setActiveDarreichungsform] = useState('Tbl');
+  const [showError, setShowError] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+
+  const createNewBtm = async event => {
+    event.preventDefault();
+    let { btmName, btmMenge, btmDarreichungsform, btmEinheit } = event.target;
+
+    fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/btm`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"),
+      },
+      body: JSON.stringify({
+        name: btmName.value,
+        menge: btmMenge.value,
+        darreichungsform: btmDarreichungsform.value,
+        einheit: btmEinheit.value
+      })
+    }).then((res) => {
+      if (res.status === 201) {
+        props.onHide();
+        props.updateBtmData();
+        enqueueSnackbar('Betäubungsmittel erfolgreich angelegt', { variant: 'success', autoHideDuration: 3000 });
+      } else if (res.status === 400) {
+        setErrorMessage('Betäubungsmittel existiert bereits oder Daten ungültig');
+        setShowError(true);
+      }
+    }).catch((err) => {
+      //SHOW ERROR
+      console.log(err);
+    });
+
+    
+
+  }
+
+  // let einheiten = ['g','mg','ml', 'Stueck']
+  let darreichungsformen = {
+    'Tbl': { einheiten: ['Stueck'] },
+    'Trp': { einheiten: ['ml'] },
+    'Sup': { einheiten: ['Stueck'] },
+    'RTA': { einheiten: ['Stueck'] },
+    'RKA': { einheiten: ['Stueck'] },
+    'Ampullen': { einheiten: ['Stueck'] },
+    'Rezeptursubstanz': { einheiten: ['mg', 'g'] },
+    'HKP': { einheiten: ['Stueck'] },
+    'Pfl': { einheiten: ['Stueck'] }
+  }
+  var units = darreichungsformen[activeDarreichungsform].einheiten;
+
+  return (
+    <Modal
+      {...props}
+      size="lg"
+      aria-labelledby="contained-modal-title-vcenter"
+      centered
+      onExiting={props.onHide}
+      backdrop="static"
+    >
+      <Modal.Header closeButton>
+        <Modal.Title id="contained-modal-title-vcenter">
+          Betäubungsmittel hinzufügen
+                 </Modal.Title>
+      </Modal.Header>
+      <Form onSubmit={createNewBtm}>
+        {showError ? <Alert variant="danger">{errorMessage}</Alert> : null}
+        <Modal.Body>
+          <Form.Group as={Row} controlId="btmName">
+            <Form.Label column sm="2">
+              Name
+                        </Form.Label>
+            <Col sm="10">
+              <Form.Control name="btmName" required type="text" />
+            </Col>
+          </Form.Group>
+
+          <Form.Group as={Row} controlId="btmMenge">
+            <Form.Label column sm="2">
+              Menge
+                        </Form.Label>
+            <Col sm="10">
+              <Form.Control name="btmMenge" type="number" min="0" defaultValue="0" />
+            </Col>
+          </Form.Group>
+
+
+          <Form.Group as={Row} controlId="btmDarreichungsform">
+            <Form.Label column sm="2">
+              Darreichungsform
+                        </Form.Label>
+            <Col sm="10">
+              <Form.Control onChange={event => setActiveDarreichungsform(event.target.value)} name="btmDarreichungsform" required as="select">
+                {Object.keys(darreichungsformen).map(df => <option kef={df} value={df}>{df}</option>)}
+              </Form.Control>
+            </Col>
+          </Form.Group>
+
+          <Form.Group as={Row} controlId="btmEinheit">
+            <Form.Label column sm="2">
+              Einheit
+                        </Form.Label>
+            <Col sm="10">
+              <Form.Control name="btmEinheit" required as="select">
+                {activeDarreichungsform !== '' ? Object.keys(units).map(e => <option key={units[e]} value={units[e]}>{units[e]}</option>) : null}
+              </Form.Control>
+            </Col>
+          </Form.Group>
+
+        </Modal.Body>
+        <Modal.Footer>
+          <Button variant="" onClick={props.onHide}>Abbrechen</Button>
+          <Button variant="primary" type="submit">Bestätigen</Button>
+        </Modal.Footer>
+      </Form>
+    </Modal>
+  )
+}
+
+export default BtmAddModal;
diff --git a/frontend/src/modals/BtmEditModal.js b/frontend/src/modals/BtmEditModal.js
index 47e3fd31ba4302ffb0bdfda8e21b1a052721b923..8454fc156546fcd288c420b2449e06a09fa0ffd5 100644
--- a/frontend/src/modals/BtmEditModal.js
+++ b/frontend/src/modals/BtmEditModal.js
@@ -1,160 +1,161 @@
-import React, { useState, useEffect } from 'react';
-import { useParams } from 'react-router-dom';
-import { Modal, Col, Button, Form, Alert, Row } from 'react-bootstrap';
-import { useSnackbar } from 'notistack';
-import { responsiveFontSizes } from '@material-ui/core';
-
-function BtmEditModal(props) {
-
-  const { apoId } = useParams();
-
-  const darreichungsformen = {
-    'Tbl': { einheiten: ['Stueck'] },
-    'Trp': { einheiten: ['ml'] },
-    'Sup': { einheiten: ['Stueck'] },
-    'RTA': { einheiten: ['Stueck'] },
-    'RKA': { einheiten: ['Stueck'] },
-    'Ampullen': { einheiten: ['Stueck'] },
-    'Rezeptursubstanz': { einheiten: ['mg', 'g'] },
-    'HKP': { einheiten: ['Stueck'] },
-    'Pfl': { einheiten: ['Stueck'] }
-  };
-
-  let { id, darreichungsform, einheit, name, menge } = props.btm;
-  // console.log(props.btm)
-
-  const [activeDarreichungsform, setActiveDarreichungsform] = useState(darreichungsform);
-  const [activeEinheit, setActiveEinheit] = useState(einheit);
-  const [einheiten, setEinheiten] = useState(darreichungsformen[darreichungsform].einheiten);
-
-  const [showError, setShowError] = useState(false);
-  const [errorMessage, setErrorMessage] = useState('');
-  const { enqueueSnackbar } = useSnackbar();
-
-
-  const updateDetails = async event => {
-    event.preventDefault();
-    let { name, darreichungsform, einheit, menge } = event.target;
-    let body = {
-      name: name.value,
-      darreichungsform: darreichungsform.value,
-      einheit: einheit.value,
-      menge: menge.value
-    }
-    console.log(body)
-    fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/btm/${id}`, {
-      method: 'PUT',
-      headers: {
-        'Content-Type': 'application/json',
-        'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"),
-      },
-      body: JSON.stringify(body)
-    }).then((res) => {
-      if (res.status === 200) {
-        hide();
-        props.updateBtmData();
-        enqueueSnackbar('Benutzer aktualisiert', { variant: 'success', autoHideDuration: 3000 });
-      } else if (res.status === 400) {
-        enqueueSnackbar('Ein Fehler ist aufgetaucht', { variant: 'error', autoHideDuration: 3000 });
-      } else if (responsiveFontSizes.status === 403) {
-        enqueueSnackbar('Falsches Passwort', { variant: 'error', autoHideDuration: 3000 });
-      }
-    }).catch((err) => {
-      console.log(err);
-      return;
-    });
-
-    
-  }
-
-  useEffect(() => {
-    setActiveDarreichungsform(props.btm.darreichungsform);
-    setActiveEinheit(props.btm.einheit);
-    setEinheiten(darreichungsformen[props.btm.darreichungsform].einheiten)
-    console.log(activeDarreichungsform, activeEinheit, einheiten)
-  }, [props.btm])
-
-  const hide = () => {
-    setActiveDarreichungsform(props.btm.darreichungsform);
-    setActiveEinheit(props.btm.einheit);
-    setEinheiten(darreichungsformen[props.btm.darreichungsform].einheiten)
-    props.onHide();
-  }
-
-  return (
-    <Modal
-      {...props}
-      size="lg"
-      aria-labelledby="contained-modal-title-vcenter"
-      centered
-      onExiting={hide}
-    >
-      <Modal.Header closeButton>
-        <Modal.Title id="contained-modal-title-vcenter">
-          Betäubungsmittel bearbeiten
-                 </Modal.Title>
-      </Modal.Header>
-      <Form onSubmit={updateDetails}>
-        {showError ? <Alert variant="danger">{errorMessage}</Alert> : null}
-        <Modal.Body>
-          <Form.Group as={Row} controlId="name">
-            <Form.Label column sm="2">
-              Name
-                        </Form.Label>
-            <Col sm="10">
-              <Form.Control defaultValue={name} name="name" required type="text" />
-            </Col>
-          </Form.Group>
-
-          <Form.Group as={Row} controlId="menge">
-            <Form.Label column sm="2">
-              Menge
-                        </Form.Label>
-            <Col sm="10">
-              <Form.Control defaultValue={menge} name="menge" type="number" min="0" />
-            </Col>
-          </Form.Group>
-
-
-          <Form.Group as={Row} controlId="darreichungsform">
-            <Form.Label column sm="2">
-              Darreichungsform
-                        </Form.Label>
-            <Col sm="10">
-              <Form.Control defaultValue={darreichungsform} onChange={event => {
-                setActiveDarreichungsform(event.target.value)
-                setEinheiten(darreichungsformen[event.target.value].einheiten)
-              }} name="darreichungsform" required as="select">
-                {
-                  darreichungsformen ? Object.keys(darreichungsformen).map(df => <option kef={df} value={df}>{df}</option>) : null
-                }
-              </Form.Control>
-            </Col>
-          </Form.Group>
-
-          <Form.Group as={Row} controlId="einheit">
-            <Form.Label column sm="2">
-              Einheit
-                        </Form.Label>
-            <Col sm="10">
-              <Form.Control defaultValue={einheit} name="einheit" required as="select">
-                {
-                  einheiten ? Object.keys(einheiten).map(e => <option key={einheiten[e]} value={einheiten[e]}>{einheiten[e]}</option>) : null
-                }
-              </Form.Control>
-            </Col>
-          </Form.Group>
-
-        </Modal.Body>
-        <Modal.Footer>
-          <Button variant="" onClick={props.onHide}>Abbrechen</Button>
-          <Button variant="primary" type="submit">Bestätigen</Button>
-        </Modal.Footer>
-      </Form>
-    </Modal>
-  )
-
-
-}
-
-export default BtmEditModal;
+import React, { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { Modal, Col, Button, Form, Alert, Row } from 'react-bootstrap';
+import { useSnackbar } from 'notistack';
+import { responsiveFontSizes } from '@material-ui/core';
+
+function BtmEditModal(props) {
+
+  const { apoId } = useParams();
+
+  const darreichungsformen = {
+    'Tbl': { einheiten: ['Stueck'] },
+    'Trp': { einheiten: ['ml'] },
+    'Sup': { einheiten: ['Stueck'] },
+    'RTA': { einheiten: ['Stueck'] },
+    'RKA': { einheiten: ['Stueck'] },
+    'Ampullen': { einheiten: ['Stueck'] },
+    'Rezeptursubstanz': { einheiten: ['mg', 'g'] },
+    'HKP': { einheiten: ['Stueck'] },
+    'Pfl': { einheiten: ['Stueck'] }
+  };
+
+  let { id, darreichungsform, einheit, name, menge } = props.btm;
+  // console.log(props.btm)
+
+  const [activeDarreichungsform, setActiveDarreichungsform] = useState(darreichungsform);
+  const [activeEinheit, setActiveEinheit] = useState(einheit);
+  const [einheiten, setEinheiten] = useState(darreichungsformen[darreichungsform].einheiten);
+
+  const [showError, setShowError] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+  const { enqueueSnackbar } = useSnackbar();
+
+
+  const updateDetails = async event => {
+    event.preventDefault();
+    let { name, darreichungsform, einheit, menge } = event.target;
+    let body = {
+      name: name.value,
+      darreichungsform: darreichungsform.value,
+      einheit: einheit.value,
+      menge: menge.value
+    }
+    console.log(body)
+    fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/btm/${id}`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"),
+      },
+      body: JSON.stringify(body)
+    }).then((res) => {
+      if (res.status === 200) {
+        hide();
+        props.updateBtmData();
+        enqueueSnackbar('Benutzer aktualisiert', { variant: 'success', autoHideDuration: 3000 });
+      } else if (res.status === 400) {
+        enqueueSnackbar('Ein Fehler ist aufgetaucht', { variant: 'error', autoHideDuration: 3000 });
+      } else if (responsiveFontSizes.status === 403) {
+        enqueueSnackbar('Falsches Passwort', { variant: 'error', autoHideDuration: 3000 });
+      }
+    }).catch((err) => {
+      console.log(err);
+      return;
+    });
+
+    
+  }
+
+  useEffect(() => {
+    setActiveDarreichungsform(props.btm.darreichungsform);
+    setActiveEinheit(props.btm.einheit);
+    setEinheiten(darreichungsformen[props.btm.darreichungsform].einheiten)
+    console.log(activeDarreichungsform, activeEinheit, einheiten)
+  }, [props.btm])
+
+  const hide = () => {
+    setActiveDarreichungsform(props.btm.darreichungsform);
+    setActiveEinheit(props.btm.einheit);
+    setEinheiten(darreichungsformen[props.btm.darreichungsform].einheiten)
+    props.onHide();
+  }
+
+  return (
+    <Modal
+      {...props}
+      size="lg"
+      aria-labelledby="contained-modal-title-vcenter"
+      centered
+      onExiting={hide}
+      backdrop="static"
+    >
+      <Modal.Header closeButton>
+        <Modal.Title id="contained-modal-title-vcenter">
+          Betäubungsmittel bearbeiten
+                 </Modal.Title>
+      </Modal.Header>
+      <Form onSubmit={updateDetails}>
+        {showError ? <Alert variant="danger">{errorMessage}</Alert> : null}
+        <Modal.Body>
+          <Form.Group as={Row} controlId="name">
+            <Form.Label column sm="2">
+              Name
+                        </Form.Label>
+            <Col sm="10">
+              <Form.Control defaultValue={name} name="name" required type="text" />
+            </Col>
+          </Form.Group>
+
+          <Form.Group as={Row} controlId="menge">
+            <Form.Label column sm="2">
+              Menge
+                        </Form.Label>
+            <Col sm="10">
+              <Form.Control defaultValue={menge} name="menge" type="number" min="0" />
+            </Col>
+          </Form.Group>
+
+
+          <Form.Group as={Row} controlId="darreichungsform">
+            <Form.Label column sm="2">
+              Darreichungsform
+                        </Form.Label>
+            <Col sm="10">
+              <Form.Control defaultValue={darreichungsform} onChange={event => {
+                setActiveDarreichungsform(event.target.value)
+                setEinheiten(darreichungsformen[event.target.value].einheiten)
+              }} name="darreichungsform" required as="select">
+                {
+                  darreichungsformen ? Object.keys(darreichungsformen).map(df => <option kef={df} value={df}>{df}</option>) : null
+                }
+              </Form.Control>
+            </Col>
+          </Form.Group>
+
+          <Form.Group as={Row} controlId="einheit">
+            <Form.Label column sm="2">
+              Einheit
+                        </Form.Label>
+            <Col sm="10">
+              <Form.Control defaultValue={einheit} name="einheit" required as="select">
+                {
+                  einheiten ? Object.keys(einheiten).map(e => <option key={einheiten[e]} value={einheiten[e]}>{einheiten[e]}</option>) : null
+                }
+              </Form.Control>
+            </Col>
+          </Form.Group>
+
+        </Modal.Body>
+        <Modal.Footer>
+          <Button variant="" onClick={props.onHide}>Abbrechen</Button>
+          <Button variant="primary" type="submit">Bestätigen</Button>
+        </Modal.Footer>
+      </Form>
+    </Modal>
+  )
+
+
+}
+
+export default BtmEditModal;
diff --git a/frontend/src/modals/DeleteModal.js b/frontend/src/modals/DeleteModal.js
index 27a755e3bba9c5443bece63f506a1d83228bc963..8584712b7181b0537fd847cd48cdf8a9654d8046 100644
--- a/frontend/src/modals/DeleteModal.js
+++ b/frontend/src/modals/DeleteModal.js
@@ -1,39 +1,40 @@
-import React from 'react';
-import { Modal, Row, Col, Button } from 'react-bootstrap';
-import Warning from '@material-ui/icons/Warning'
-
-function DeleteModal(props) {
-
-  return (
-    <Modal
-      {...props}
-      size="lg"
-      aria-labelledby="contained-modal-title-vcenter"
-      centered
-      onExiting={props.onHide}
-    >
-      <Modal.Header closeButton>
-        <Modal.Title id="contained-modal-title-vcenter">
-          {props.headertext}
-        </Modal.Title>
-      </Modal.Header>
-      <Modal.Body>
-        <Row >
-          <Col sm="9">
-            <p style={{ fontSize: '20pt' }}>{props.maintext}</p>
-            <small>{props.subtext}</small>
-          </Col>
-          <Col sm="3">
-            <Warning color="error" fontSize="large" />
-          </Col>
-        </Row>
-      </Modal.Body>
-      <Modal.Footer>
-        <Button autoFocus variant="" onClick={props.onHide}>Abbrechen</Button>
-        <Button variant="danger" onClick={() => { props.onHide(); props.onSubmit() }}>Bestätigen</Button>
-      </Modal.Footer>
-    </Modal>
-  )
-}
-
-export default DeleteModal;
+import React from 'react';
+import { Modal, Row, Col, Button } from 'react-bootstrap';
+import Warning from '@material-ui/icons/Warning'
+
+function DeleteModal(props) {
+
+  return (
+    <Modal
+      {...props}
+      size="lg"
+      aria-labelledby="contained-modal-title-vcenter"
+      centered
+      onExiting={props.onHide}
+      backdrop="static"
+    >
+      <Modal.Header closeButton>
+        <Modal.Title id="contained-modal-title-vcenter">
+          {props.headertext}
+        </Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <Row >
+          <Col sm="9">
+            <p style={{ fontSize: '20pt' }}>{props.maintext}</p>
+            <small>{props.subtext}</small>
+          </Col>
+          <Col sm="3">
+            <Warning color="error" fontSize="large" />
+          </Col>
+        </Row>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button autoFocus variant="" onClick={props.onHide}>Abbrechen</Button>
+        <Button variant="danger" onClick={() => { props.onHide(); props.onSubmit() }}>Bestätigen</Button>
+      </Modal.Footer>
+    </Modal>
+  )
+}
+
+export default DeleteModal;
diff --git a/frontend/src/modals/LieferantAddModal.js b/frontend/src/modals/LieferantAddModal.js
index 817e18d81cafed02ec29c24bef67540a6d689a81..f06c1e53e325190b77e04d3ad160c73bd296ea70 100644
--- a/frontend/src/modals/LieferantAddModal.js
+++ b/frontend/src/modals/LieferantAddModal.js
@@ -1,99 +1,100 @@
-import React from 'react';
-import { useParams } from 'react-router-dom';
-import { Modal, Col, Button, Form } from 'react-bootstrap';
-import { useSnackbar } from 'notistack';
-
-function NeuesLieferantenModal(props) {
-
-  const { apoId } = useParams();
-  const { enqueueSnackbar } = useSnackbar();
-
-  const updateDetails = async event => {
-    event.preventDefault();
-    let { name, plz, ort, strasse, nummer } = event.target;
-
-    let body = {
-      name: name.value,
-      anschrift: {
-        ort: ort.value,
-        plz: plz.value,
-        strasse: strasse.value,
-        nummer: nummer.value
-      }
-    }
-
-    fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/lieferant`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"),
-      },
-      body: JSON.stringify(body)
-    }).then((res) => {
-      if (res.status === 201) {
-        props.onHide();
-        props.updateLieferantData();
-        enqueueSnackbar('Lieferant aktualisiert', { variant: 'success', autoHideDuration: 3000 });
-      } else if (res.status === 400) {
-        enqueueSnackbar('Ein Fehler ist aufgetaucht', { variant: 'error', autoHideDuration: 3000 });
-      }
-    }).catch((err) => {
-      console.log(err);
-      return;
-    });
-  }
-
-  return (
-    <Modal
-      {...props}
-      size="lg"
-      aria-labelledby="contained-modal-title-vcenter"
-      centered
-      onExiting={props.onHide}
-    >
-      <Modal.Header closeButton>
-        <Modal.Title id="contained-modal-title-vcenter">
-          Liefernat hinzufügen
-            </Modal.Title>
-      </Modal.Header>
-      <Form onSubmit={updateDetails}>
-        <Modal.Body>
-          <Form.Row>
-            <Form.Group as={Col} controlId="name">
-              <Form.Label>Name</Form.Label>
-              <Form.Control name="name" required type="text" />
-            </Form.Group>
-          </Form.Row>
-
-          <Form.Row>
-            <Form.Group as={Col} sm={9} controlId="strasse">
-              <Form.Label>Straße</Form.Label>
-              <Form.Control name="strasse" required type="text" />
-            </Form.Group>
-            <Form.Group as={Col} sm={3} controlId="nummer">
-              <Form.Label>Nummer</Form.Label>
-              <Form.Control name="nummer" required type="text" />
-            </Form.Group>
-          </Form.Row>
-          <Form.Row>
-            <Form.Group as={Col} sm={3} controlId="plz">
-              <Form.Label>PLZ</Form.Label>
-              <Form.Control name="plz" required type="text" />
-            </Form.Group>
-
-            <Form.Group as={Col} sm={9} controlId="ort">
-              <Form.Label>Ort</Form.Label>
-              <Form.Control name="ort" required type="text" />
-            </Form.Group>
-          </Form.Row>
-        </Modal.Body>
-        <Modal.Footer>
-          <Button autofocus variant="" onClick={props.onHide}>Abbrechen</Button>
-          <Button variant="primary" type="submit" >Bestätigen</Button>
-        </Modal.Footer>
-      </Form>
-    </Modal>
-  )
-}
-
-export default NeuesLieferantenModal;
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { Modal, Col, Button, Form } from 'react-bootstrap';
+import { useSnackbar } from 'notistack';
+
+function NeuesLieferantenModal(props) {
+
+  const { apoId } = useParams();
+  const { enqueueSnackbar } = useSnackbar();
+
+  const updateDetails = async event => {
+    event.preventDefault();
+    let { name, plz, ort, strasse, nummer } = event.target;
+
+    let body = {
+      name: name.value,
+      anschrift: {
+        ort: ort.value,
+        plz: plz.value,
+        strasse: strasse.value,
+        nummer: nummer.value
+      }
+    }
+
+    fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/lieferant`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"),
+      },
+      body: JSON.stringify(body)
+    }).then((res) => {
+      if (res.status === 201) {
+        props.onHide();
+        props.updateLieferantData();
+        enqueueSnackbar('Lieferant aktualisiert', { variant: 'success', autoHideDuration: 3000 });
+      } else if (res.status === 400) {
+        enqueueSnackbar('Ein Fehler ist aufgetaucht', { variant: 'error', autoHideDuration: 3000 });
+      }
+    }).catch((err) => {
+      console.log(err);
+      return;
+    });
+  }
+
+  return (
+    <Modal
+      {...props}
+      size="lg"
+      aria-labelledby="contained-modal-title-vcenter"
+      centered
+      onExiting={props.onHide}
+      backdrop="static"
+    >
+      <Modal.Header closeButton>
+        <Modal.Title id="contained-modal-title-vcenter">
+          Liefernat hinzufügen
+            </Modal.Title>
+      </Modal.Header>
+      <Form onSubmit={updateDetails}>
+        <Modal.Body>
+          <Form.Row>
+            <Form.Group as={Col} controlId="name">
+              <Form.Label>Name</Form.Label>
+              <Form.Control name="name" required type="text" />
+            </Form.Group>
+          </Form.Row>
+
+          <Form.Row>
+            <Form.Group as={Col} sm={9} controlId="strasse">
+              <Form.Label>Straße</Form.Label>
+              <Form.Control name="strasse" required type="text" />
+            </Form.Group>
+            <Form.Group as={Col} sm={3} controlId="nummer">
+              <Form.Label>Nummer</Form.Label>
+              <Form.Control name="nummer" required type="text" />
+            </Form.Group>
+          </Form.Row>
+          <Form.Row>
+            <Form.Group as={Col} sm={3} controlId="plz">
+              <Form.Label>PLZ</Form.Label>
+              <Form.Control name="plz" required type="text" />
+            </Form.Group>
+
+            <Form.Group as={Col} sm={9} controlId="ort">
+              <Form.Label>Ort</Form.Label>
+              <Form.Control name="ort" required type="text" />
+            </Form.Group>
+          </Form.Row>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button autofocus variant="" onClick={props.onHide}>Abbrechen</Button>
+          <Button variant="primary" type="submit" >Bestätigen</Button>
+        </Modal.Footer>
+      </Form>
+    </Modal>
+  )
+}
+
+export default NeuesLieferantenModal;
diff --git a/frontend/src/modals/LieferantEditModal.js b/frontend/src/modals/LieferantEditModal.js
index 0bcdafb9bc1d55984dc9ee0bd0d3a4ccb17d41a3..85173334d06f1299d2b4925a580b12ea025a04c2 100644
--- a/frontend/src/modals/LieferantEditModal.js
+++ b/frontend/src/modals/LieferantEditModal.js
@@ -1,103 +1,104 @@
-import React from 'react';
-import { useParams } from 'react-router-dom';
-import { Modal, Col, Button, Form } from 'react-bootstrap';
-import { useSnackbar } from 'notistack';
-
-function LieferantUpdateModal(props) {
-
-  const { apoId } = useParams();
-  const { enqueueSnackbar } = useSnackbar();
-
-  let { id, name, anschrift } = props.lieferant;
-
-  const updateDetails = async event => {
-    event.preventDefault();
-    let { name, plz, ort, strasse, nummer } = event.target;
-
-    let body = {
-      name: name.value,
-      anschrift: {
-        ort: ort.value,
-        plz: plz.value,
-        strasse: strasse.value,
-        nummer: nummer.value
-      }
-    }
-
-    fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/lieferant/${id}`, {
-      method: 'PUT',
-      headers: {
-        'Content-Type': 'application/json',
-        'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"),
-      },
-      body: JSON.stringify(body)
-    }).then((res) => {
-      if (res.status === 200) {
-        props.onHide();
-        props.updateLieferantData();
-        enqueueSnackbar('Lieferant aktualisiert', { variant: 'success', autoHideDuration: 3000 });
-      } else if (res.status === 400) {
-        enqueueSnackbar('Ein Fehler ist aufgetaucht', { variant: 'error', autoHideDuration: 3000 });
-      } else if (res.status === 403) {
-        enqueueSnackbar('Falsches Passwort', { variant: 'error', autoHideDuration: 3000 });
-      }
-    }).catch((err) => {
-      console.log(err);
-      return;
-    });
-  }
-
-  return (
-    <Modal
-      {...props}
-      size="lg"
-      aria-labelledby="contained-modal-title-vcenter"
-      centered
-      onExiting={props.onHide}
-    >
-      <Modal.Header closeButton>
-        <Modal.Title id="contained-modal-title-vcenter">
-          Lieferant bearbeiten
-            </Modal.Title>
-      </Modal.Header>
-      <Form onSubmit={updateDetails}>
-        <Modal.Body>
-          <Form.Row>
-            <Form.Group as={Col} controlId="name">
-              <Form.Label>Name</Form.Label>
-              <Form.Control name="name" required defaultValue={name} type="text" />
-            </Form.Group>
-          </Form.Row>
-
-          <Form.Row>
-            <Form.Group as={Col} sm={9} controlId="strasse">
-              <Form.Label>Straße</Form.Label>
-              <Form.Control name="strasse" required type="text" defaultValue={anschrift.strasse} />
-            </Form.Group>
-            <Form.Group as={Col} sm={3} controlId="nummer">
-              <Form.Label>Nummer</Form.Label>
-              <Form.Control name="nummer" required type="text" defaultValue={anschrift.nummer} />
-            </Form.Group>
-          </Form.Row>
-          <Form.Row>
-            <Form.Group as={Col} sm={3} controlId="plz">
-              <Form.Label>PLZ</Form.Label>
-              <Form.Control name="plz" required type="text" defaultValue={anschrift.plz} />
-            </Form.Group>
-
-            <Form.Group as={Col} sm={9} controlId="ort">
-              <Form.Label>Ort</Form.Label>
-              <Form.Control name="ort" required type="text" defaultValue={anschrift.ort} />
-            </Form.Group>
-          </Form.Row>
-        </Modal.Body>
-        <Modal.Footer>
-          <Button autofocus variant="" onClick={props.onHide}>Abbrechen</Button>
-          <Button variant="primary" type="submit" >Bestätigen</Button>
-        </Modal.Footer>
-      </Form>
-    </Modal>
-  )
-}
-
-export default LieferantUpdateModal;
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { Modal, Col, Button, Form } from 'react-bootstrap';
+import { useSnackbar } from 'notistack';
+
+function LieferantUpdateModal(props) {
+
+  const { apoId } = useParams();
+  const { enqueueSnackbar } = useSnackbar();
+
+  let { id, name, anschrift } = props.lieferant;
+
+  const updateDetails = async event => {
+    event.preventDefault();
+    let { name, plz, ort, strasse, nummer } = event.target;
+
+    let body = {
+      name: name.value,
+      anschrift: {
+        ort: ort.value,
+        plz: plz.value,
+        strasse: strasse.value,
+        nummer: nummer.value
+      }
+    }
+
+    fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/lieferant/${id}`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"),
+      },
+      body: JSON.stringify(body)
+    }).then((res) => {
+      if (res.status === 200) {
+        props.onHide();
+        props.updateLieferantData();
+        enqueueSnackbar('Lieferant aktualisiert', { variant: 'success', autoHideDuration: 3000 });
+      } else if (res.status === 400) {
+        enqueueSnackbar('Ein Fehler ist aufgetaucht', { variant: 'error', autoHideDuration: 3000 });
+      } else if (res.status === 403) {
+        enqueueSnackbar('Falsches Passwort', { variant: 'error', autoHideDuration: 3000 });
+      }
+    }).catch((err) => {
+      console.log(err);
+      return;
+    });
+  }
+
+  return (
+    <Modal
+      {...props}
+      size="lg"
+      aria-labelledby="contained-modal-title-vcenter"
+      centered
+      onExiting={props.onHide}
+      backdrop="static"
+    >
+      <Modal.Header closeButton>
+        <Modal.Title id="contained-modal-title-vcenter">
+          Lieferant bearbeiten
+            </Modal.Title>
+      </Modal.Header>
+      <Form onSubmit={updateDetails}>
+        <Modal.Body>
+          <Form.Row>
+            <Form.Group as={Col} controlId="name">
+              <Form.Label>Name</Form.Label>
+              <Form.Control name="name" required defaultValue={name} type="text" />
+            </Form.Group>
+          </Form.Row>
+
+          <Form.Row>
+            <Form.Group as={Col} sm={9} controlId="strasse">
+              <Form.Label>Straße</Form.Label>
+              <Form.Control name="strasse" required type="text" defaultValue={anschrift.strasse} />
+            </Form.Group>
+            <Form.Group as={Col} sm={3} controlId="nummer">
+              <Form.Label>Nummer</Form.Label>
+              <Form.Control name="nummer" required type="text" defaultValue={anschrift.nummer} />
+            </Form.Group>
+          </Form.Row>
+          <Form.Row>
+            <Form.Group as={Col} sm={3} controlId="plz">
+              <Form.Label>PLZ</Form.Label>
+              <Form.Control name="plz" required type="text" defaultValue={anschrift.plz} />
+            </Form.Group>
+
+            <Form.Group as={Col} sm={9} controlId="ort">
+              <Form.Label>Ort</Form.Label>
+              <Form.Control name="ort" required type="text" defaultValue={anschrift.ort} />
+            </Form.Group>
+          </Form.Row>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button autofocus variant="" onClick={props.onHide}>Abbrechen</Button>
+          <Button variant="primary" type="submit" >Bestätigen</Button>
+        </Modal.Footer>
+      </Form>
+    </Modal>
+  )
+}
+
+export default LieferantUpdateModal;
diff --git a/frontend/src/modals/PersonalAddModal.js b/frontend/src/modals/PersonalAddModal.js
index d0c68596bd12c3fa723fc8c80b7fb26c9d417c02..40c0f15a566547d1a5f08ccd3f8079907c038a41 100644
--- a/frontend/src/modals/PersonalAddModal.js
+++ b/frontend/src/modals/PersonalAddModal.js
@@ -1,146 +1,147 @@
-import React, { useState, useEffect } from 'react';
-import { Modal, Col, Button, Form } from 'react-bootstrap';
-import { useParams } from 'react-router-dom';
-import { useSnackbar } from 'notistack';
-
-function PersonalAddModal(props) {
-
-  const { apoId } = useParams();
-
-  const [nutzernameVergeben, setNutzernameVergeben] = useState(false);
-
-  //for password checking
-  const [passwordConfirmInvalid, setPasswordConfirmInvalid] = useState(false);
-  const [newPasswordVal, setNewPasswordVal] = useState('');
-  const [passwordConfirmVal, setPasswordConfirmVal] = useState('');
-
-  const { enqueueSnackbar } = useSnackbar();
-
-  let roles = ["ADMIN", "PRUEFER", "BENUTZER"];
-
-  const createNewUser = async event => {
-    event.preventDefault();
-    let { username, vorname, nachname, neuesPasswort, rolle } = event.target;
-
-    let body = {
-      name: nachname.value,
-      nutzername: username.value,
-      vorname: vorname.value,
-      aktiv: true,
-      rolle: rolle.value,
-      passwort: neuesPasswort.value
-    }
-
-    console.log(body)
-    fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/benutzer`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"),
-      },
-      body: JSON.stringify(body)
-    }).then((res) => {
-      if (res.status === 201) {
-        props.onHide();
-        props.updateUserList();
-        enqueueSnackbar('Benutzer erstellt', { variant: 'success', autoHideDuration: 3000 });
-      } else if (res.status === 400) {
-        enqueueSnackbar('Ein Fehler ist aufgetaucht', { variant: 'error', autoHideDuration: 3000 });
-      }
-    }).catch((err) => {
-      console.log(err);
-      return;
-    });
-  }
-
-  const checkIfUserNameIsTaken = async event => {
-    let newUsername = event.target.value;
-    if (newUsername.length < 4) {
-      //if shorter than 4 its invalid
-      setNutzernameVergeben(true);
-      return;
-    }
-
-    await fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/benutzer/${newUsername}/checkUsername`, {
-      method: 'POST',
-    }).then((res) => {
-      if (res.status === 200) {
-        setNutzernameVergeben(false);
-      } else if (res.status === 400) {
-        setNutzernameVergeben(true);
-      }
-    }).catch((err) => {
-      console.log(err);
-      return;
-    });
-  }
-
-  useEffect(() => {
-    setPasswordConfirmInvalid(newPasswordVal !== passwordConfirmVal);
-  }, [newPasswordVal, passwordConfirmVal]);
-
-
-  return (
-    <Modal
-      {...props}
-      size="lg"
-      aria-labelledby="contained-modal-title-vcenter"
-      centered
-      onExiting={props.onHide}
-    >
-      <Modal.Header closeButton>
-        <Modal.Title id="contained-modal-title-vcenter">
-          Personal hinzufügen
-            </Modal.Title>
-      </Modal.Header>
-      <Form onSubmit={createNewUser}>
-        <Modal.Body>
-          <Form.Row>
-            <Form.Group as={Col} controlId="username">
-              <Form.Label>Benutzername</Form.Label>
-              <Form.Control name="username" required onChange={checkIfUserNameIsTaken}
-                isInvalid={nutzernameVergeben} type="text" />
-            </Form.Group>
-          </Form.Row>
-
-          <Form.Row>
-            <Form.Group as={Col} sm={4} controlId="vorname">
-              <Form.Label>Vorname</Form.Label>
-              <Form.Control name="vorname" required type="text" />
-            </Form.Group>
-
-            <Form.Group as={Col} sm={8} controlId="nachname">
-              <Form.Label>Nachname</Form.Label>
-              <Form.Control name="nachname" required type="text" />
-            </Form.Group>
-          </Form.Row>
-
-          <Form.Row>
-            <Form.Group as={Col} controlId="neuesPasswort">
-              <Form.Label>Neues Passwort</Form.Label>
-              <Form.Control required minlength={5} onChange={event => setNewPasswordVal(event.target.value)} name="neuesPasswort" type="password" />
-            </Form.Group>
-            <Form.Group as={Col} controlId="neuesPasswortConfirm">
-              <Form.Label>Neues Passwort bestätigen</Form.Label>
-              <Form.Control required minlength={5} onChange={event => setPasswordConfirmVal(event.target.value)} isInvalid={passwordConfirmInvalid} name="neuesPasswortConfirm" type="password" />
-            </Form.Group>
-          </Form.Row>
-          <Form.Row>
-            <Form.Group as={Col} sm={4} controlId="rolle">
-              <Form.Label>Rolle</Form.Label>
-              <Form.Control required name="rolle" required as="select" >
-                {roles.map(r => <option key={r} value={r}>{r}</option>)}
-              </Form.Control>
-            </Form.Group>
-          </Form.Row>
-        </Modal.Body>
-        <Modal.Footer>
-          <Button autofocus variant="" onClick={props.onHide}>Abbrechen</Button>
-          <Button variant="primary" type="submit" >Bestätigen</Button>
-        </Modal.Footer>
-      </Form>
-    </Modal>
-  )
-}
-
-export default PersonalAddModal;
+import React, { useState, useEffect } from 'react';
+import { Modal, Col, Button, Form } from 'react-bootstrap';
+import { useParams } from 'react-router-dom';
+import { useSnackbar } from 'notistack';
+
+function PersonalAddModal(props) {
+
+  const { apoId } = useParams();
+
+  const [nutzernameVergeben, setNutzernameVergeben] = useState(false);
+
+  //for password checking
+  const [passwordConfirmInvalid, setPasswordConfirmInvalid] = useState(false);
+  const [newPasswordVal, setNewPasswordVal] = useState('');
+  const [passwordConfirmVal, setPasswordConfirmVal] = useState('');
+
+  const { enqueueSnackbar } = useSnackbar();
+
+  let roles = ["ADMIN", "PRUEFER", "BENUTZER"];
+
+  const createNewUser = async event => {
+    event.preventDefault();
+    let { username, vorname, nachname, neuesPasswort, rolle } = event.target;
+
+    let body = {
+      name: nachname.value,
+      nutzername: username.value,
+      vorname: vorname.value,
+      aktiv: true,
+      rolle: rolle.value,
+      passwort: neuesPasswort.value
+    }
+
+    console.log(body)
+    fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/benutzer`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"),
+      },
+      body: JSON.stringify(body)
+    }).then((res) => {
+      if (res.status === 201) {
+        props.onHide();
+        props.updateUserList();
+        enqueueSnackbar('Benutzer erstellt', { variant: 'success', autoHideDuration: 3000 });
+      } else if (res.status === 400) {
+        enqueueSnackbar('Ein Fehler ist aufgetaucht', { variant: 'error', autoHideDuration: 3000 });
+      }
+    }).catch((err) => {
+      console.log(err);
+      return;
+    });
+  }
+
+  const checkIfUserNameIsTaken = async event => {
+    let newUsername = event.target.value;
+    if (newUsername.length < 4) {
+      //if shorter than 4 its invalid
+      setNutzernameVergeben(true);
+      return;
+    }
+
+    await fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/benutzer/${newUsername}/checkUsername`, {
+      method: 'POST',
+    }).then((res) => {
+      if (res.status === 200) {
+        setNutzernameVergeben(false);
+      } else if (res.status === 400) {
+        setNutzernameVergeben(true);
+      }
+    }).catch((err) => {
+      console.log(err);
+      return;
+    });
+  }
+
+  useEffect(() => {
+    setPasswordConfirmInvalid(newPasswordVal !== passwordConfirmVal);
+  }, [newPasswordVal, passwordConfirmVal]);
+
+
+  return (
+    <Modal
+      {...props}
+      size="lg"
+      aria-labelledby="contained-modal-title-vcenter"
+      centered
+      onExiting={props.onHide}
+      backdrop="static"
+    >
+      <Modal.Header closeButton>
+        <Modal.Title id="contained-modal-title-vcenter">
+          Personal hinzufügen
+            </Modal.Title>
+      </Modal.Header>
+      <Form onSubmit={createNewUser}>
+        <Modal.Body>
+          <Form.Row>
+            <Form.Group as={Col} controlId="username">
+              <Form.Label>Benutzername</Form.Label>
+              <Form.Control name="username" required onChange={checkIfUserNameIsTaken}
+                isInvalid={nutzernameVergeben} type="text" />
+            </Form.Group>
+          </Form.Row>
+
+          <Form.Row>
+            <Form.Group as={Col} sm={4} controlId="vorname">
+              <Form.Label>Vorname</Form.Label>
+              <Form.Control name="vorname" required type="text" />
+            </Form.Group>
+
+            <Form.Group as={Col} sm={8} controlId="nachname">
+              <Form.Label>Nachname</Form.Label>
+              <Form.Control name="nachname" required type="text" />
+            </Form.Group>
+          </Form.Row>
+
+          <Form.Row>
+            <Form.Group as={Col} controlId="neuesPasswort">
+              <Form.Label>Neues Passwort</Form.Label>
+              <Form.Control required minlength={5} onChange={event => setNewPasswordVal(event.target.value)} name="neuesPasswort" type="password" />
+            </Form.Group>
+            <Form.Group as={Col} controlId="neuesPasswortConfirm">
+              <Form.Label>Neues Passwort bestätigen</Form.Label>
+              <Form.Control required minlength={5} onChange={event => setPasswordConfirmVal(event.target.value)} isInvalid={passwordConfirmInvalid} name="neuesPasswortConfirm" type="password" />
+            </Form.Group>
+          </Form.Row>
+          <Form.Row>
+            <Form.Group as={Col} sm={4} controlId="rolle">
+              <Form.Label>Rolle</Form.Label>
+              <Form.Control required name="rolle" required as="select" >
+                {roles.map(r => <option key={r} value={r}>{r}</option>)}
+              </Form.Control>
+            </Form.Group>
+          </Form.Row>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button autofocus variant="" onClick={props.onHide}>Abbrechen</Button>
+          <Button variant="primary" type="submit" >Bestätigen</Button>
+        </Modal.Footer>
+      </Form>
+    </Modal>
+  )
+}
+
+export default PersonalAddModal;
diff --git a/frontend/src/modals/PersonalEditModal.js b/frontend/src/modals/PersonalEditModal.js
index 3752bc48a1ad5b9009fa3b76771aa247fe13e5a3..77084788ded3c9a4f79e2075b496cc0df3ba950c 100644
--- a/frontend/src/modals/PersonalEditModal.js
+++ b/frontend/src/modals/PersonalEditModal.js
@@ -1,170 +1,171 @@
-import React, { useState, useEffect } from 'react';
-import { Modal, Col, Button, Form, OverlayTrigger, Row, Tooltip } from 'react-bootstrap';
-import { useParams } from 'react-router-dom';
-import HelpIcon from '@material-ui/icons/Help';
-import { Checkbox } from '@material-ui/core';
-import { useSnackbar } from 'notistack';
-
-function PersonalUpdateModal(props) {
-
-  const { apoId } = useParams();
-
-  let { id, nutzername, name, vorname, aktiv, rolle } = props.user;
-  const [nutzernameVergeben, setNutzernameVergeben] = useState(false);
-
-  //for password checking
-  const [passwordConfirmInvalid, setPasswordConfirmInvalid] = useState(false);
-  const [newPasswordVal, setNewPasswordVal] = useState('');
-  const [passwordConfirmVal, setPasswordConfirmVal] = useState('');
-
-  const { enqueueSnackbar } = useSnackbar();
-
-  let roles = ["ADMIN", "PRUEFER", "BENUTZER"];
-
-
-  const updateDetails = async event => {
-    event.preventDefault();
-    let { username, vorname, nachname, neuesPasswort, rolle, aktiv } = event.target;
-
-    let body = {
-      name: nachname.value,
-      nutzername: username.value,
-      vorname: vorname.value,
-      aktiv: aktiv.checked,
-      rolle: rolle.value
-    }
-    if (neuesPasswort.value) {
-      body.newPassword = neuesPasswort.value;
-    }
-    fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/benutzer/${id}`, {
-      method: 'PUT',
-      headers: {
-        'Content-Type': 'application/json',
-        'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"),
-      },
-      body: JSON.stringify(body)
-    }).then((res) => {
-      if (res.status === 200) {
-        props.onHide();
-        props.updateUserList();
-        enqueueSnackbar('Benutzer aktualisiert', { variant: 'success', autoHideDuration: 3000 });
-      } else if (res.status === 400) {
-        enqueueSnackbar('Ein Fehler ist aufgetaucht', { variant: 'error', autoHideDuration: 3000 });
-      } else if (res.status === 403) {
-        enqueueSnackbar('Falsches Passwort', { variant: 'error', autoHideDuration: 3000 });
-      }
-    }).catch((err) => {
-      console.log(err);
-      return;
-    });
-  }
-
-  const checkIfUserNameIsTaken = async event => {
-    let newUsername = event.target.value;
-    if (newUsername.length < 4) {
-      //if shorter than 4 its invalid
-      setNutzernameVergeben(true);
-      return;
-    }
-
-    if (newUsername !== nutzername && newUsername) {
-      await fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${id}/benutzer/${newUsername}/checkUsername`, {
-        method: 'POST',
-      }).then((res) => {
-        if (res.status === 200) {
-          setNutzernameVergeben(false);
-        } else if (res.status === 400) {
-          setNutzernameVergeben(true);
-        }
-      }).catch((err) => {
-        console.log(err);
-        return;
-      });
-
-    } else {
-      setNutzernameVergeben(false);
-    }
-  }
-
-  useEffect(() => {
-    setPasswordConfirmInvalid(newPasswordVal !== passwordConfirmVal);
-  }, [newPasswordVal, passwordConfirmVal]);
-
-
-  return (
-    <Modal
-      {...props}
-      size="lg"
-      aria-labelledby="contained-modal-title-vcenter"
-      centered
-      onExiting={props.onHide}
-    >
-      <Modal.Header closeButton>
-        <Modal.Title id="contained-modal-title-vcenter">
-          Personal bearbeiten
-            </Modal.Title>
-      </Modal.Header>
-      <Form onSubmit={updateDetails}>
-        <Modal.Body>
-          <Form.Row>
-            <Form.Group as={Col} controlId="username">
-              <Form.Label>Benutzername</Form.Label>
-              <Form.Control name="username" required onChange={checkIfUserNameIsTaken}
-                isInvalid={nutzernameVergeben} defaultValue={nutzername} type="text" />
-            </Form.Group>
-          </Form.Row>
-
-          <Form.Row>
-            <Form.Group as={Col} sm={4} controlId="vorname">
-              <Form.Label>Vorname</Form.Label>
-              <Form.Control name="vorname" required defaultValue={vorname} type="text" />
-            </Form.Group>
-
-            <Form.Group as={Col} sm={8} controlId="nachname">
-              <Form.Label>Nachname</Form.Label>
-              <Form.Control name="nachname" required defaultValue={name} type="text" />
-            </Form.Group>
-          </Form.Row>
-
-          <Form.Row>
-            <Form.Group as={Col} controlId="neuesPasswort">
-              <Form.Label>Neues Passwort</Form.Label>
-              <Form.Control minlength={5} onChange={event => setNewPasswordVal(event.target.value)} name="neuesPasswort" type="password" />
-            </Form.Group>
-            <Form.Group as={Col} controlId="neuesPasswortConfirm">
-              <Form.Label>Neues Passwort bestätigen</Form.Label>
-              <Form.Control minlength={5} onChange={event => setPasswordConfirmVal(event.target.value)} isInvalid={passwordConfirmInvalid} name="neuesPasswortConfirm" type="password" />
-            </Form.Group>
-          </Form.Row>
-          <Form.Group style={{ marginLeft: '1em' }} controlId="aktiv">
-            <Row style={{ alignItems: 'center' }} >
-              <Form.Label>Aktiv</Form.Label>
-              <Checkbox defaultChecked={aktiv} type="checkbox" name="aktiv" />
-              <OverlayTrigger
-                placement="right"
-                delay={{ show: 250, hide: 400 }}
-                overlay={props => <Tooltip id="button-tooltip" {...props}>Ein inaktiver Benutzer ist gesperrt und kann sich nicht einloggen</Tooltip>}
-              >
-                <HelpIcon style={{ marginLeft: '0.3em' }} />
-              </OverlayTrigger>
-
-
-              <Form.Group style={{ marginLeft: '3.5em' }} as={Col} sm={4} controlId="rolle">
-                <Form.Label>Rolle</Form.Label>
-                <Form.Control name="rolle" required as="select" defaultValue={rolle}>
-                  {roles.map(r => <option key={r} value={r}>{r}</option>)}
-                </Form.Control>
-              </Form.Group>
-            </Row>
-          </Form.Group>
-        </Modal.Body>
-        <Modal.Footer>
-          <Button autofocus variant="" onClick={props.onHide}>Abbrechen</Button>
-          <Button variant="primary" type="submit" >Bestätigen</Button>
-        </Modal.Footer>
-      </Form>
-    </Modal>
-  )
-}
-
-export default PersonalUpdateModal;
+import React, { useState, useEffect } from 'react';
+import { Modal, Col, Button, Form, OverlayTrigger, Row, Tooltip } from 'react-bootstrap';
+import { useParams } from 'react-router-dom';
+import HelpIcon from '@material-ui/icons/Help';
+import { Checkbox } from '@material-ui/core';
+import { useSnackbar } from 'notistack';
+
+function PersonalUpdateModal(props) {
+
+  const { apoId } = useParams();
+
+  let { id, nutzername, name, vorname, aktiv, rolle } = props.user;
+  const [nutzernameVergeben, setNutzernameVergeben] = useState(false);
+
+  //for password checking
+  const [passwordConfirmInvalid, setPasswordConfirmInvalid] = useState(false);
+  const [newPasswordVal, setNewPasswordVal] = useState('');
+  const [passwordConfirmVal, setPasswordConfirmVal] = useState('');
+
+  const { enqueueSnackbar } = useSnackbar();
+
+  let roles = ["ADMIN", "PRUEFER", "BENUTZER"];
+
+
+  const updateDetails = async event => {
+    event.preventDefault();
+    let { username, vorname, nachname, neuesPasswort, rolle, aktiv } = event.target;
+
+    let body = {
+      name: nachname.value,
+      nutzername: username.value,
+      vorname: vorname.value,
+      aktiv: aktiv.checked,
+      rolle: rolle.value
+    }
+    if (neuesPasswort.value) {
+      body.newPassword = neuesPasswort.value;
+    }
+    fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/benutzer/${id}`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"),
+      },
+      body: JSON.stringify(body)
+    }).then((res) => {
+      if (res.status === 200) {
+        props.onHide();
+        props.updateUserList();
+        enqueueSnackbar('Benutzer aktualisiert', { variant: 'success', autoHideDuration: 3000 });
+      } else if (res.status === 400) {
+        enqueueSnackbar('Ein Fehler ist aufgetaucht', { variant: 'error', autoHideDuration: 3000 });
+      } else if (res.status === 403) {
+        enqueueSnackbar('Falsches Passwort', { variant: 'error', autoHideDuration: 3000 });
+      }
+    }).catch((err) => {
+      console.log(err);
+      return;
+    });
+  }
+
+  const checkIfUserNameIsTaken = async event => {
+    let newUsername = event.target.value;
+    if (newUsername.length < 4) {
+      //if shorter than 4 its invalid
+      setNutzernameVergeben(true);
+      return;
+    }
+
+    if (newUsername !== nutzername && newUsername) {
+      await fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${id}/benutzer/${newUsername}/checkUsername`, {
+        method: 'POST',
+      }).then((res) => {
+        if (res.status === 200) {
+          setNutzernameVergeben(false);
+        } else if (res.status === 400) {
+          setNutzernameVergeben(true);
+        }
+      }).catch((err) => {
+        console.log(err);
+        return;
+      });
+
+    } else {
+      setNutzernameVergeben(false);
+    }
+  }
+
+  useEffect(() => {
+    setPasswordConfirmInvalid(newPasswordVal !== passwordConfirmVal);
+  }, [newPasswordVal, passwordConfirmVal]);
+
+
+  return (
+    <Modal
+      {...props}
+      size="lg"
+      aria-labelledby="contained-modal-title-vcenter"
+      centered
+      onExiting={props.onHide}
+      backdrop="static"
+    >
+      <Modal.Header closeButton>
+        <Modal.Title id="contained-modal-title-vcenter">
+          Personal bearbeiten
+            </Modal.Title>
+      </Modal.Header>
+      <Form onSubmit={updateDetails}>
+        <Modal.Body>
+          <Form.Row>
+            <Form.Group as={Col} controlId="username">
+              <Form.Label>Benutzername</Form.Label>
+              <Form.Control name="username" required onChange={checkIfUserNameIsTaken}
+                isInvalid={nutzernameVergeben} defaultValue={nutzername} type="text" />
+            </Form.Group>
+          </Form.Row>
+
+          <Form.Row>
+            <Form.Group as={Col} sm={4} controlId="vorname">
+              <Form.Label>Vorname</Form.Label>
+              <Form.Control name="vorname" required defaultValue={vorname} type="text" />
+            </Form.Group>
+
+            <Form.Group as={Col} sm={8} controlId="nachname">
+              <Form.Label>Nachname</Form.Label>
+              <Form.Control name="nachname" required defaultValue={name} type="text" />
+            </Form.Group>
+          </Form.Row>
+
+          <Form.Row>
+            <Form.Group as={Col} controlId="neuesPasswort">
+              <Form.Label>Neues Passwort</Form.Label>
+              <Form.Control minlength={5} onChange={event => setNewPasswordVal(event.target.value)} name="neuesPasswort" type="password" />
+            </Form.Group>
+            <Form.Group as={Col} controlId="neuesPasswortConfirm">
+              <Form.Label>Neues Passwort bestätigen</Form.Label>
+              <Form.Control minlength={5} onChange={event => setPasswordConfirmVal(event.target.value)} isInvalid={passwordConfirmInvalid} name="neuesPasswortConfirm" type="password" />
+            </Form.Group>
+          </Form.Row>
+          <Form.Group style={{ marginLeft: '1em' }} controlId="aktiv">
+            <Row style={{ alignItems: 'center' }} >
+              <Form.Label>Aktiv</Form.Label>
+              <Checkbox defaultChecked={aktiv} type="checkbox" name="aktiv" />
+              <OverlayTrigger
+                placement="right"
+                delay={{ show: 250, hide: 400 }}
+                overlay={props => <Tooltip id="button-tooltip" {...props}>Ein inaktiver Benutzer ist gesperrt und kann sich nicht einloggen</Tooltip>}
+              >
+                <HelpIcon style={{ marginLeft: '0.3em' }} />
+              </OverlayTrigger>
+
+
+              <Form.Group style={{ marginLeft: '3.5em' }} as={Col} sm={4} controlId="rolle">
+                <Form.Label>Rolle</Form.Label>
+                <Form.Control name="rolle" required as="select" defaultValue={rolle}>
+                  {roles.map(r => <option key={r} value={r}>{r}</option>)}
+                </Form.Control>
+              </Form.Group>
+            </Row>
+          </Form.Group>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button autofocus variant="" onClick={props.onHide}>Abbrechen</Button>
+          <Button variant="primary" type="submit" >Bestätigen</Button>
+        </Modal.Footer>
+      </Form>
+    </Modal>
+  )
+}
+
+export default PersonalUpdateModal;
diff --git a/frontend/src/modals/UpdateBuchungModal.js b/frontend/src/modals/UpdateBuchungModal.js
index 2fd0370f817113467290fd170bc56cdd30104173..b09897ce00b236224ad5f650ba809514b268f2a3 100644
--- a/frontend/src/modals/UpdateBuchungModal.js
+++ b/frontend/src/modals/UpdateBuchungModal.js
@@ -1,200 +1,201 @@
-import React,{useEffect} from 'react';
-import { Modal, Button, Form, Row, Col } from 'react-bootstrap';
-import { useSnackbar } from 'notistack';
-import { useParams } from 'react-router-dom';
-
-
-
-function UpdateBuchungModal(props) {
-
-    // let apothekeId = sessionStorage.getItem('apothekeId');
-    const { apoId } = useParams();
-    // eslint-disable-next-line
-    let {lieferanten, aerzte, empfaenger} = props;
-    const { enqueueSnackbar } = useSnackbar();
-
-    const sendUpdateRequest = async (buchungData) => {
-        const response = await fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/btmbuchung/${props.buchung.id}`, {
-            method: 'PUT',
-            headers: {
-                'Content-Type': 'application/json',
-                'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"),
-            },
-            body: JSON.stringify(buchungData)
-        }).catch((err) => {
-            //SHOW ERROR
-            console.log(err);
-        });
-
-
-        if (response && response.status === 200) {
-            props.onHide();
-            enqueueSnackbar('Buchung erfolgreich aktualisiert', { variant: 'success', autoHideDuration: 3000 });
-            props.apothekeRefFunctions.updateBtmList();
-        } else {
-            //SHOW ERROR
-            console.log(response);
-        }
-    }
-
-
-
-
-    const updateBuchung = event => {
-        event.preventDefault();
-
-        if (props.buchung.typ.toLowerCase() === 'zugang') {
-            let { anforderungsschein, btmMenge, lieferant, pruefdatum, datum } = event.target;
-            let buchungData = {
-                benutzer: props.user.id,
-                btm: props.btm.btm.id,
-                menge: btmMenge.value,
-                typ: 'ZUGANG',
-                lieferant: lieferant.value,
-                anforderungsschein: anforderungsschein.value,
-                pruefdatum: pruefdatum.value,
-                datum: datum.value
-            }
-            sendUpdateRequest(buchungData);
-        } else if (props.buchung.typ.toLowerCase() === 'abgang') {
-            let { btmMenge, rezept, empfaenger, arzt, pruefdatum, datum} = event.target;
-            let buchungData = {
-                benutzer: props.user.id,
-                btm: props.btm.btm.id,
-                menge: btmMenge.value,
-                typ: 'ABGANG',
-                empfaenger: empfaenger.value,
-                arzt: arzt.value,
-                rezept: rezept.value,
-                pruefdatum: pruefdatum.value,
-                datum: datum.value
-            }
-            sendUpdateRequest(buchungData);
-        }
-    }
-
-    
-
-
-    function Zugang({ buchung }) {
-        if (buchung.typ) {
-            if (buchung.typ.toLowerCase() === 'zugang') {
-                return (
-                    <React.Fragment>
-                        <Form.Group as={Row} controlId="anforderungsschein">
-                            <Form.Label column sm="2">
-                                Anforderungsschein
-                    </Form.Label>
-                            <Col sm="10">
-                                <Form.Control name="anforderungsschein" type="text" required defaultValue={buchung.anforderungsschein} />
-                            </Col>
-                        </Form.Group>
-                        <Form.Group as={Row} controlId="lieferant">
-                            <Form.Label column sm="2">
-                                Lieferant
-                    </Form.Label>
-                            <Col sm="10">
-                                <Form.Control name="lieferant" defaultValue={buchung.lieferant.name} required as="select">
-                                     {console.log('lieferanten', lieferanten)}   
-                                    {lieferanten.map(l => <option key={l.id} value={l.id}>{l.name}</option>)}
-                                </Form.Control>
-                            </Col>
-                        </Form.Group>
-                    </React.Fragment>)
-            }
-        }
-        return null;
-    }
-
-    function Abgang({ buchung }) {
-        if (buchung.typ) {
-            if (buchung.typ.toLowerCase() === 'abgang') {
-                return (
-                    <React.Fragment>
-                        <Form.Group as={Row} controlId="empfaenger">
-                            <Form.Label column sm="2">
-                                Empfaenger
-                    </Form.Label>
-                            <Col sm="10">
-                                <Form.Control name="empfaenger" defaultValue={buchung.empfaenger.name} required as="select">
-                                    {empfaenger.map(e => <option key={e.id} value={e.id}>{e.vorname} {e.name}</option>)}
-                                </Form.Control>
-                            </Col>
-                        </Form.Group>
-                        <Form.Group as={Row} controlId="arzt">
-                            <Form.Label column sm="2">
-                                Arzt
-                    </Form.Label>
-                            <Col sm="10">
-                                <Form.Control name="arzt" defaultValue={buchung.arzt.name} required as="select">
-                                    {aerzte.map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
-                                </Form.Control>
-                            </Col>
-                        </Form.Group>
-                        <Form.Group as={Row} controlId="rezept">
-                            <Form.Label column sm="2">
-                                Rezept
-                            </Form.Label>
-                            <Col sm="10">
-                                <Form.Control defaultValue={buchung.rezept} name="rezept" type="text" required />
-                            </Col>
-                        </Form.Group>
-                    </React.Fragment>)
-            }
-        }
-        return null;
-    }
-
-
-    return (
-        <Modal
-            {...props}
-            size="lg"
-            aria-labelledby="contained-modal-title-vcenter"
-            centered
-            onExiting={props.onHide}
-        >
-            <Modal.Header closeButton>
-                <Modal.Title id="contained-modal-title-vcenter">
-                    Betäubungsmittel-Buchung aktualisieren
-                </Modal.Title>
-            </Modal.Header>
-            <Form onSubmit={updateBuchung}>
-                <Modal.Body>
-                <Form.Group as={Row} controlId="datum">
-                        <Form.Label column sm="2">
-                            Datum
-                        </Form.Label>
-                        <Col sm="10">
-                            <Form.Control name="datum" type="date" defaultValue={props.buchung.datum} />
-                        </Col>
-                    </Form.Group>
-                    <Form.Group as={Row} controlId="btmMenge">
-                        <Form.Label column sm="2">
-                            Menge
-                        </Form.Label>
-                        <Col sm="10">
-                            <Form.Control name="btmMenge" type="number" min="1" defaultValue={props.buchung.menge} />
-                        </Col>
-                    </Form.Group>
-                    <Form.Group as={Row} controlId="pruefdatum">
-                        <Form.Label column sm="2">
-                            Prüfdatum
-                        </Form.Label>
-                        <Col sm="10">
-                            <Form.Control name="pruefdatum" type="date" defaultValue={props.buchung.pruefdatum} />
-                        </Col>
-                    </Form.Group>
-                    <Zugang buchung={props.buchung} />
-                    <Abgang buchung={props.buchung} />
-                </Modal.Body>
-                <Modal.Footer>
-                    <Button variant="" onClick={props.onHide}>Abbrechen</Button>
-                    <Button variant="primary" type="submit">Bestätigen</Button>
-                </Modal.Footer>
-            </Form>
-        </Modal>
-    )
-}
-
-export default UpdateBuchungModal;
+import React,{useEffect} from 'react';
+import { Modal, Button, Form, Row, Col } from 'react-bootstrap';
+import { useSnackbar } from 'notistack';
+import { useParams } from 'react-router-dom';
+
+
+
+function UpdateBuchungModal(props) {
+
+    // let apothekeId = sessionStorage.getItem('apothekeId');
+    const { apoId } = useParams();
+    // eslint-disable-next-line
+    let {lieferanten, aerzte, empfaenger} = props;
+    const { enqueueSnackbar } = useSnackbar();
+
+    const sendUpdateRequest = async (buchungData) => {
+        const response = await fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/btmbuchung/${props.buchung.id}`, {
+            method: 'PUT',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"),
+            },
+            body: JSON.stringify(buchungData)
+        }).catch((err) => {
+            //SHOW ERROR
+            console.log(err);
+        });
+
+
+        if (response && response.status === 200) {
+            props.onHide();
+            enqueueSnackbar('Buchung erfolgreich aktualisiert', { variant: 'success', autoHideDuration: 3000 });
+            props.apothekeRefFunctions.updateBtmList();
+        } else {
+            //SHOW ERROR
+            console.log(response);
+        }
+    }
+
+
+
+
+    const updateBuchung = event => {
+        event.preventDefault();
+
+        if (props.buchung.typ.toLowerCase() === 'zugang') {
+            let { anforderungsschein, btmMenge, lieferant, pruefdatum, datum } = event.target;
+            let buchungData = {
+                benutzer: props.user.id,
+                btm: props.btm.btm.id,
+                menge: btmMenge.value,
+                typ: 'ZUGANG',
+                lieferant: lieferant.value,
+                anforderungsschein: anforderungsschein.value,
+                pruefdatum: pruefdatum.value,
+                datum: datum.value
+            }
+            sendUpdateRequest(buchungData);
+        } else if (props.buchung.typ.toLowerCase() === 'abgang') {
+            let { btmMenge, rezept, empfaenger, arzt, pruefdatum, datum} = event.target;
+            let buchungData = {
+                benutzer: props.user.id,
+                btm: props.btm.btm.id,
+                menge: btmMenge.value,
+                typ: 'ABGANG',
+                empfaenger: empfaenger.value,
+                arzt: arzt.value,
+                rezept: rezept.value,
+                pruefdatum: pruefdatum.value,
+                datum: datum.value
+            }
+            sendUpdateRequest(buchungData);
+        }
+    }
+
+    
+
+
+    function Zugang({ buchung }) {
+        if (buchung.typ) {
+            if (buchung.typ.toLowerCase() === 'zugang') {
+                return (
+                    <React.Fragment>
+                        <Form.Group as={Row} controlId="anforderungsschein">
+                            <Form.Label column sm="2">
+                                Anforderungsschein
+                    </Form.Label>
+                            <Col sm="10">
+                                <Form.Control name="anforderungsschein" type="text" required defaultValue={buchung.anforderungsschein} />
+                            </Col>
+                        </Form.Group>
+                        <Form.Group as={Row} controlId="lieferant">
+                            <Form.Label column sm="2">
+                                Lieferant
+                    </Form.Label>
+                            <Col sm="10">
+                                <Form.Control name="lieferant" defaultValue={buchung.lieferant.name} required as="select">
+                                     {console.log('lieferanten', lieferanten)}   
+                                    {lieferanten.map(l => <option key={l.id} value={l.id}>{l.name}</option>)}
+                                </Form.Control>
+                            </Col>
+                        </Form.Group>
+                    </React.Fragment>)
+            }
+        }
+        return null;
+    }
+
+    function Abgang({ buchung }) {
+        if (buchung.typ) {
+            if (buchung.typ.toLowerCase() === 'abgang') {
+                return (
+                    <React.Fragment>
+                        <Form.Group as={Row} controlId="empfaenger">
+                            <Form.Label column sm="2">
+                                Empfaenger
+                    </Form.Label>
+                            <Col sm="10">
+                                <Form.Control name="empfaenger" defaultValue={buchung.empfaenger.name} required as="select">
+                                    {empfaenger.map(e => <option key={e.id} value={e.id}>{e.vorname} {e.name}</option>)}
+                                </Form.Control>
+                            </Col>
+                        </Form.Group>
+                        <Form.Group as={Row} controlId="arzt">
+                            <Form.Label column sm="2">
+                                Arzt
+                    </Form.Label>
+                            <Col sm="10">
+                                <Form.Control name="arzt" defaultValue={buchung.arzt.name} required as="select">
+                                    {aerzte.map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
+                                </Form.Control>
+                            </Col>
+                        </Form.Group>
+                        <Form.Group as={Row} controlId="rezept">
+                            <Form.Label column sm="2">
+                                Rezept
+                            </Form.Label>
+                            <Col sm="10">
+                                <Form.Control defaultValue={buchung.rezept} name="rezept" type="text" required />
+                            </Col>
+                        </Form.Group>
+                    </React.Fragment>)
+            }
+        }
+        return null;
+    }
+
+
+    return (
+        <Modal
+            {...props}
+            size="lg"
+            aria-labelledby="contained-modal-title-vcenter"
+            centered
+            onExiting={props.onHide}
+            backdrop="static"
+        >
+            <Modal.Header closeButton>
+                <Modal.Title id="contained-modal-title-vcenter">
+                    Betäubungsmittel-Buchung aktualisieren
+                </Modal.Title>
+            </Modal.Header>
+            <Form onSubmit={updateBuchung}>
+                <Modal.Body>
+                <Form.Group as={Row} controlId="datum">
+                        <Form.Label column sm="2">
+                            Datum
+                        </Form.Label>
+                        <Col sm="10">
+                            <Form.Control name="datum" type="date" defaultValue={props.buchung.datum} />
+                        </Col>
+                    </Form.Group>
+                    <Form.Group as={Row} controlId="btmMenge">
+                        <Form.Label column sm="2">
+                            Menge
+                        </Form.Label>
+                        <Col sm="10">
+                            <Form.Control name="btmMenge" type="number" min="1" defaultValue={props.buchung.menge} />
+                        </Col>
+                    </Form.Group>
+                    <Form.Group as={Row} controlId="pruefdatum">
+                        <Form.Label column sm="2">
+                            Prüfdatum
+                        </Form.Label>
+                        <Col sm="10">
+                            <Form.Control name="pruefdatum" type="date" defaultValue={props.buchung.pruefdatum} />
+                        </Col>
+                    </Form.Group>
+                    <Zugang buchung={props.buchung} />
+                    <Abgang buchung={props.buchung} />
+                </Modal.Body>
+                <Modal.Footer>
+                    <Button variant="" onClick={props.onHide}>Abbrechen</Button>
+                    <Button variant="primary" type="submit">Bestätigen</Button>
+                </Modal.Footer>
+            </Form>
+        </Modal>
+    )
+}
+
+export default UpdateBuchungModal;
diff --git a/frontend/src/modals/UserDetailsUpdateModal.js b/frontend/src/modals/UserDetailsUpdateModal.js
index 19fbd6d30482f9f25cbc5446ff77052eb81514fb..ea2fb7626f33a744f9848ff2a5aeb23ead9b01ed 100644
--- a/frontend/src/modals/UserDetailsUpdateModal.js
+++ b/frontend/src/modals/UserDetailsUpdateModal.js
@@ -1,183 +1,184 @@
-import React, { useState, useEffect } from 'react';
-import { useParams } from 'react-router-dom';
-import { Modal, Col, Button, Form } from 'react-bootstrap';
-import { useSnackbar } from 'notistack';
-
-function UserDetailsUpdateModal(props) {
-
-    const { apoId } = useParams();
-    let { nutzername, name, vorname, id } = props.user;
-    const [nutzernameVergeben, setNutzernameVergeben] = useState(false);
-
-    //for password checking
-    const [passwordConfirmInvalid, setPasswordConfirmInvalid] = useState(false);
-    const [newPasswordVal, setNewPasswordVal] = useState('');
-    const [passwordConfirmVal, setPasswordConfirmVal] = useState('');
-
-    const { enqueueSnackbar } = useSnackbar();
-
-
-    const updateDetails = async event => {
-        event.preventDefault();
-        let { username, vorname, nachname, neuesPasswort, altesPasswort } = event.target;
-        let body = {
-            name: nachname.value,
-            nutzername: username.value,
-            vorname: vorname.value,
-            oldPassword: altesPasswort.value,
-            aktiv: true
-        }
-        if(neuesPasswort.value){
-            body.newPassword = neuesPasswort.value;
-        } 
-        const response = await fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/benutzer/${id}`, {
-            method: 'PUT',
-            headers: {
-                'Content-Type': 'application/json',
-                'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"),
-            },
-            body: JSON.stringify(body)
-        }).catch((err) => {
-            console.log(err);
-            return;
-        });
-
-        if(response.status === 200) {
-            const data = await response.json();
-            props.onHide();
-            props.setUser(data);
-            let pw = neuesPasswort.value ? neuesPasswort.value: altesPasswort.value;
-            if(props.loggedInUser.nutzername === nutzername) {
-                //if the same user is logged in and changes its details a new token is needed
-                getNewJwt(username.value, pw);
-            }else {
-                enqueueSnackbar('Benutzer Informationen aktualisiert', { variant:'success', autoHideDuration: 3000} );
-            }
-        }else if(response.status === 400) {
-            enqueueSnackbar('Ein Fehler ist aufgetaucht', { variant:'error', autoHideDuration: 3000} );
-        }else if(response.status === 403) {
-            enqueueSnackbar('Falsches Passwort', { variant:'error', autoHideDuration: 3000} );
-        }
-    }
-
-    const getNewJwt = async (username, password) => {
-        console.log(username, password)
-        const response = await fetch(`http://${process.env.REACT_APP_BACKEND_URL}/login`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                username: username,
-                password: password
-            })
-        }).catch((err) => {
-            //SHOW ERROR
-            console.log(err);
-        });
-
-        if(response && response.status === 200){
-            const data = await response.json();
-            window.sessionStorage.setItem("edbapo-jwt", data.jwt)
-            enqueueSnackbar('Benutzer Informationen aktualisiert', { variant:'success', autoHideDuration: 3000} );
-        }else {
-            enqueueSnackbar('Ein Fehler ist aufgetaucht', { variant:'error', autoHideDuration: 3000} );
-        }
-    }
-
-
-    const checkIfUserNameIsTaken = async event => {
-        let newUsername = event.target.value;
-        if (newUsername.length < 4) {
-            //if shorter than 4 its invalid
-            setNutzernameVergeben(true);
-            return;
-        }
-
-        if (newUsername !== nutzername && newUsername) {
-            const response = await fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/benutzer/${newUsername}/checkUsername`, {
-                method: 'POST',
-            }).catch((err) => {
-                console.log(err);
-                return;
-            });
-
-            if (response.status === 200) {
-                setNutzernameVergeben(false);
-            } else if (response.status === 400) {
-                setNutzernameVergeben(true);
-            }
-        } else {
-            setNutzernameVergeben(false);
-        }
-    }
-
-    useEffect(() => {
-        setPasswordConfirmInvalid(newPasswordVal !== passwordConfirmVal);
-    }, [newPasswordVal, passwordConfirmVal]);
-
-
-    return (
-        <Modal
-            {...props}
-            size="lg"
-            aria-labelledby="contained-modal-title-vcenter"
-            centered
-            onExiting={props.onHide}
-        >
-            <Modal.Header closeButton>
-                <Modal.Title id="contained-modal-title-vcenter">
-                    Benutzer Einstellungen
-            </Modal.Title>
-            </Modal.Header>
-            <Form onSubmit={updateDetails}>
-                <Modal.Body>
-                    <Form.Row>
-                        <Form.Group as={Col} controlId="username">
-                            <Form.Label>Benutzername</Form.Label>
-                            <Form.Control name="username" required onChange={checkIfUserNameIsTaken}
-                                isInvalid={nutzernameVergeben} defaultValue={nutzername} type="text" />
-                        </Form.Group>
-                    </Form.Row>
-
-                    <Form.Row>
-                        <Form.Group as={Col} sm={4} controlId="vorname">
-                            <Form.Label>Vorname</Form.Label>
-                            <Form.Control name="vorname" required defaultValue={vorname} type="text" />
-                        </Form.Group>
-
-                        <Form.Group as={Col} sm={8} controlId="nachname">
-                            <Form.Label>Nachname</Form.Label>
-                            <Form.Control name="nachname" required defaultValue={name} type="text" />
-                        </Form.Group>
-                    </Form.Row>
-
-                    <Form.Row>
-                        <Form.Group as={Col} controlId="neuesPasswort">
-                            <Form.Label>Neues Passwort</Form.Label>
-                            <Form.Control onChange={event => setNewPasswordVal(event.target.value)} name="neuesPasswort" type="password" />
-                        </Form.Group>
-                        <Form.Group as={Col} controlId="neuesPasswortConfirm">
-                            <Form.Label>Neues Passwort bestätigen</Form.Label>
-                            <Form.Control onChange={event => setPasswordConfirmVal(event.target.value)} isInvalid={passwordConfirmInvalid} name="neuesPasswortConfirm" type="password" />
-                        </Form.Group>
-                    </Form.Row>
-
-                    <hr />
-                    <Form.Row>
-                        <Form.Group as={Col} controlId="altesPasswort">
-                            <Form.Label>Passwort eingeben</Form.Label>
-                            <Form.Control name="altesPasswort" required type="password" />
-                        </Form.Group>
-                    </Form.Row>
-                </Modal.Body>
-                <Modal.Footer>
-                    <Button autofocus variant="" onClick={props.onHide}>Abbrechen</Button>
-                    <Button variant="primary" type="submit" >Bestätigen</Button>
-                </Modal.Footer>
-            </Form>
-        </Modal>
-    )
-}
-
-export default UserDetailsUpdateModal;
\ No newline at end of file
+import React, { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { Modal, Col, Button, Form } from 'react-bootstrap';
+import { useSnackbar } from 'notistack';
+
+function UserDetailsUpdateModal(props) {
+
+    const { apoId } = useParams();
+    let { nutzername, name, vorname, id } = props.user;
+    const [nutzernameVergeben, setNutzernameVergeben] = useState(false);
+
+    //for password checking
+    const [passwordConfirmInvalid, setPasswordConfirmInvalid] = useState(false);
+    const [newPasswordVal, setNewPasswordVal] = useState('');
+    const [passwordConfirmVal, setPasswordConfirmVal] = useState('');
+
+    const { enqueueSnackbar } = useSnackbar();
+
+
+    const updateDetails = async event => {
+        event.preventDefault();
+        let { username, vorname, nachname, neuesPasswort, altesPasswort } = event.target;
+        let body = {
+            name: nachname.value,
+            nutzername: username.value,
+            vorname: vorname.value,
+            oldPassword: altesPasswort.value,
+            aktiv: true
+        }
+        if(neuesPasswort.value){
+            body.newPassword = neuesPasswort.value;
+        } 
+        const response = await fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/benutzer/${id}`, {
+            method: 'PUT',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"),
+            },
+            body: JSON.stringify(body)
+        }).catch((err) => {
+            console.log(err);
+            return;
+        });
+
+        if(response.status === 200) {
+            const data = await response.json();
+            props.onHide();
+            props.setUser(data);
+            let pw = neuesPasswort.value ? neuesPasswort.value: altesPasswort.value;
+            if(props.loggedInUser.nutzername === nutzername) {
+                //if the same user is logged in and changes its details a new token is needed
+                getNewJwt(username.value, pw);
+            }else {
+                enqueueSnackbar('Benutzer Informationen aktualisiert', { variant:'success', autoHideDuration: 3000} );
+            }
+        }else if(response.status === 400) {
+            enqueueSnackbar('Ein Fehler ist aufgetaucht', { variant:'error', autoHideDuration: 3000} );
+        }else if(response.status === 403) {
+            enqueueSnackbar('Falsches Passwort', { variant:'error', autoHideDuration: 3000} );
+        }
+    }
+
+    const getNewJwt = async (username, password) => {
+        console.log(username, password)
+        const response = await fetch(`http://${process.env.REACT_APP_BACKEND_URL}/login`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                username: username,
+                password: password
+            })
+        }).catch((err) => {
+            //SHOW ERROR
+            console.log(err);
+        });
+
+        if(response && response.status === 200){
+            const data = await response.json();
+            window.sessionStorage.setItem("edbapo-jwt", data.jwt)
+            enqueueSnackbar('Benutzer Informationen aktualisiert', { variant:'success', autoHideDuration: 3000} );
+        }else {
+            enqueueSnackbar('Ein Fehler ist aufgetaucht', { variant:'error', autoHideDuration: 3000} );
+        }
+    }
+
+
+    const checkIfUserNameIsTaken = async event => {
+        let newUsername = event.target.value;
+        if (newUsername.length < 4) {
+            //if shorter than 4 its invalid
+            setNutzernameVergeben(true);
+            return;
+        }
+
+        if (newUsername !== nutzername && newUsername) {
+            const response = await fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/benutzer/${newUsername}/checkUsername`, {
+                method: 'POST',
+            }).catch((err) => {
+                console.log(err);
+                return;
+            });
+
+            if (response.status === 200) {
+                setNutzernameVergeben(false);
+            } else if (response.status === 400) {
+                setNutzernameVergeben(true);
+            }
+        } else {
+            setNutzernameVergeben(false);
+        }
+    }
+
+    useEffect(() => {
+        setPasswordConfirmInvalid(newPasswordVal !== passwordConfirmVal);
+    }, [newPasswordVal, passwordConfirmVal]);
+
+
+    return (
+        <Modal
+            {...props}
+            size="lg"
+            aria-labelledby="contained-modal-title-vcenter"
+            centered
+            onExiting={props.onHide}
+            backdrop="static"
+        >
+            <Modal.Header closeButton>
+                <Modal.Title id="contained-modal-title-vcenter">
+                    Benutzer Einstellungen
+            </Modal.Title>
+            </Modal.Header>
+            <Form onSubmit={updateDetails}>
+                <Modal.Body>
+                    <Form.Row>
+                        <Form.Group as={Col} controlId="username">
+                            <Form.Label>Benutzername</Form.Label>
+                            <Form.Control name="username" required onChange={checkIfUserNameIsTaken}
+                                isInvalid={nutzernameVergeben} defaultValue={nutzername} type="text" />
+                        </Form.Group>
+                    </Form.Row>
+
+                    <Form.Row>
+                        <Form.Group as={Col} sm={4} controlId="vorname">
+                            <Form.Label>Vorname</Form.Label>
+                            <Form.Control name="vorname" required defaultValue={vorname} type="text" />
+                        </Form.Group>
+
+                        <Form.Group as={Col} sm={8} controlId="nachname">
+                            <Form.Label>Nachname</Form.Label>
+                            <Form.Control name="nachname" required defaultValue={name} type="text" />
+                        </Form.Group>
+                    </Form.Row>
+
+                    <Form.Row>
+                        <Form.Group as={Col} controlId="neuesPasswort">
+                            <Form.Label>Neues Passwort</Form.Label>
+                            <Form.Control onChange={event => setNewPasswordVal(event.target.value)} name="neuesPasswort" type="password" />
+                        </Form.Group>
+                        <Form.Group as={Col} controlId="neuesPasswortConfirm">
+                            <Form.Label>Neues Passwort bestätigen</Form.Label>
+                            <Form.Control onChange={event => setPasswordConfirmVal(event.target.value)} isInvalid={passwordConfirmInvalid} name="neuesPasswortConfirm" type="password" />
+                        </Form.Group>
+                    </Form.Row>
+
+                    <hr />
+                    <Form.Row>
+                        <Form.Group as={Col} controlId="altesPasswort">
+                            <Form.Label>Passwort eingeben</Form.Label>
+                            <Form.Control name="altesPasswort" required type="password" />
+                        </Form.Group>
+                    </Form.Row>
+                </Modal.Body>
+                <Modal.Footer>
+                    <Button autofocus variant="" onClick={props.onHide}>Abbrechen</Button>
+                    <Button variant="primary" type="submit" >Bestätigen</Button>
+                </Modal.Footer>
+            </Form>
+        </Modal>
+    )
+}
+
+export default UserDetailsUpdateModal;