diff --git a/src/components/LoginForm/LoginForm.js b/src/components/LoginForm/LoginForm.js
new file mode 100644
index 0000000..ee4e902
--- /dev/null
+++ b/src/components/LoginForm/LoginForm.js
@@ -0,0 +1,100 @@
+import React, { useState } from "react";
+import { Box, Paper, TextField, Button, Avatar, Typography, useTheme, makeStyles } from "@material-ui/core";
+import { Redirect } from "react-router-dom";
+import { useLogin } from "../AuthProvider/";
+
+export default function LoginForm() {
+    const [username, setUsername] = useState("");
+    const [password, setPassword] = useState("");
+
+    const handleUsernameChange = (event) => setUsername(event.target.value);
+    const handlePasswordChange = (event) => setPassword(event.target.value);
+
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        return true;
+    }
+
+    const theme = useTheme();
+    const useStyles = makeStyles({
+        "box_root": {
+            background: `linear-gradient(120deg, ${theme.palette.secondary.main}30 0%, ${theme.palette.primary.main}10 100%)`,
+            width: "100%",
+            height: "100vh",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center"
+        },
+        "avatar_root": {
+            padding: theme.spacing(1),
+            width: theme.spacing(10),
+            height: theme.spacing(10)
+        },
+        "paper_root": {
+            minWidth: theme.breakpoints.values.sm/2,
+            padding: theme.spacing(3),
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+        },
+        "button_root": {
+            marginTop: theme.spacing(2)
+        }
+    })
+    const classes = useStyles();
+
+    const isLoggedIn = useLogin();
+    if (isLoggedIn) {
+        return <Redirect to="/"/>
+    }
+
+    return (
+        <Box classes={{ root: classes.box_root }}>
+            <form onSubmit={handleSubmit}>
+                <Paper classes={{ root: classes.paper_root }}>
+                    <Avatar 
+                        src={process.env.PUBLIC_URL + "/logo512.png"}
+                        classes={{ root: classes.avatar_root }}
+                    />
+                    <Typography variant="h4">
+                        Sign In
+                    </Typography>
+                    <TextField 
+                        type="text" 
+                        id="username" 
+                        name="username" 
+                        label="Username" 
+                        fullWidth
+                        value={username}
+                        onChange={handleUsernameChange}
+                        autoFocus 
+                        margin="normal"
+                        variant="outlined"     
+                    />
+                    <TextField 
+                        type="password" 
+                        id="password" 
+                        name="password" 
+                        label="Password" 
+                        fullWidth
+                        value={password}
+                        onChange={handlePasswordChange}
+                        margin="normal" 
+                        variant="outlined"
+                    />
+                    <Button  
+                        color="primary" 
+                        size="large" 
+                        variant="contained"
+                        fullWidth
+                        classes={{ root: classes.button_root }}
+                        type="submit"
+                    >
+                        Sign In
+                    </Button>
+                </Paper>
+            </form>
+        </Box>
+    );
+};
\ No newline at end of file
diff --git a/src/components/LoginForm/LoginForm.md b/src/components/LoginForm/LoginForm.md
new file mode 100644
index 0000000..7e0553c
--- /dev/null
+++ b/src/components/LoginForm/LoginForm.md
@@ -0,0 +1,11 @@
+The LoginForm acts as the only public facing page for the webqueue2. If any part of the app is access without access tokens, the user will be redirected here. It takes a username and password, attempts to login an, if successful, sets access tokens and redirects users to webqueue2.
+
+---
+```jsx
+import LoginForm from "./LoginForm";
+
+<LoginForm />
+```
+```jsx static
+<LoginForm />
+```
\ No newline at end of file
diff --git a/src/components/LoginForm/index.js b/src/components/LoginForm/index.js
new file mode 100644
index 0000000..3789b92
--- /dev/null
+++ b/src/components/LoginForm/index.js
@@ -0,0 +1 @@
+export { default } from "./LoginForm";
\ No newline at end of file