diff --git a/src/states/Login/tabs/LoginTab/components/LoginFields/LoginFields.jsx b/src/states/Login/tabs/LoginTab/components/LoginFields/LoginFields.jsx
new file mode 100644
index 0000000..82e7193
--- /dev/null
+++ b/src/states/Login/tabs/LoginTab/components/LoginFields/LoginFields.jsx
@@ -0,0 +1,26 @@
+import {IconButton, InputAdornment, TextField} from "@mui/material";
+import {Key, Person, Visibility, VisibilityOff} from "@mui/icons-material";
+import {useState} from "react";
+
+export const LoginFields = ({username, setUsername, password, setPassword}) => {
+    const [passwordShown, setPasswordShown] = useState(false);
+
+    return (
+        <>
+            <TextField label="Benutzername" variant="outlined" sx={{width: "20rem"}} type="text"
+                       placeholder="Benutzername" autoComplete="username" value={username}
+                       onChange={(e) => setUsername(e.target.value)}
+                       InputProps={{startAdornment: <InputAdornment position="start"><Person/></InputAdornment>}}/>
+
+            <TextField label="Passwort" variant="outlined" sx={{width: "20rem"}} placeholder="Passwort"
+                       InputProps={{
+                           startAdornment: <InputAdornment position="start"><Key/></InputAdornment>,
+                           endAdornment: <InputAdornment position="end"
+                                                         onClick={() => setPasswordShown(!passwordShown)}>
+                               <IconButton>{passwordShown ? <VisibilityOff/> : <Visibility/>}</IconButton>
+                           </InputAdornment>
+                       }} type={passwordShown ? "text" : "password"} autoComplete="current-password"
+                       value={password} onChange={(e) => setPassword(e.target.value)}/>
+        </>
+    )
+}
\ No newline at end of file