diff --git a/webui/package-lock.json b/webui/package-lock.json
index 9d72b37..1b6c65e 100644
--- a/webui/package-lock.json
+++ b/webui/package-lock.json
@@ -885,11 +885,37 @@
         "loader-utils": "^1.1.0"
       }
     },
+    "@types/prop-types": {
+      "version": "15.5.8",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.5.8.tgz",
+      "integrity": "sha512-3AQoUxQcQtLHsK25wtTWIoIpgYjH3vSDroZOUr7PpCHw/jLY1RB9z9E8dBT/OSmwStVgkRNvdh+ZHNiomRieaw==",
+      "dev": true
+    },
     "@types/q": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.1.tgz",
       "integrity": "sha512-eqz8c/0kwNi/OEHQfvIuJVLTst3in0e7uTKeuY+WL/zfKn0xVujOTp42bS/vUUokhK5P2BppLd9JXMOMHcgbjA=="
     },
+    "@types/react": {
+      "version": "16.8.2",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.8.2.tgz",
+      "integrity": "sha512-6mcKsqlqkN9xADrwiUz2gm9Wg4iGnlVGciwBRYFQSMWG6MQjhOZ/AVnxn+6v8nslFgfYTV8fNdE6XwKu6va5PA==",
+      "dev": true,
+      "requires": {
+        "@types/prop-types": "*",
+        "csstype": "^2.2.0"
+      }
+    },
+    "@types/react-redux": {
+      "version": "6.0.13",
+      "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-6.0.13.tgz",
+      "integrity": "sha512-69lPYT69CSvzQ75Ut4MfT+oQU9TAjCycdL6BQOrPztqbzdhzSe1d4Qj8vrMkTOm454Xz151zh+YT6S4t2OBopw==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*",
+        "redux": "^4.0.0"
+      }
+    },
     "@types/tapable": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.2.tgz",
@@ -3460,6 +3486,12 @@
         "cssom": "0.3.x"
       }
     },
+    "csstype": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.2.tgz",
+      "integrity": "sha512-Rl7PvTae0pflc1YtxtKbiSqq20Ts6vpIYOD5WBafl4y123DyHUeLrRdQP66sQW8/6gmX8jrYJLXwNeMqYVJcow==",
+      "dev": true
+    },
     "cyclist": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-0.2.2.tgz",
@@ -11320,14 +11352,25 @@
       }
     },
     "react": {
-      "version": "16.7.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.7.0.tgz",
-      "integrity": "sha512-StCz3QY8lxTb5cl2HJxjwLFOXPIFQp+p+hxQfc8WE0QiLfCtIlKj8/+5tjjKm8uSTlAW+fCPaavGFS06V9Ar3A==",
+      "version": "16.8.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.8.1.tgz",
+      "integrity": "sha512-wLw5CFGPdo7p/AgteFz7GblI2JPOos0+biSoxf1FPsGxWQZdN/pj6oToJs1crn61DL3Ln7mN86uZ4j74p31ELQ==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
         "prop-types": "^15.6.2",
-        "scheduler": "^0.12.0"
+        "scheduler": "^0.13.1"
+      },
+      "dependencies": {
+        "scheduler": {
+          "version": "0.13.1",
+          "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.1.tgz",
+          "integrity": "sha512-VJKOkiKIN2/6NOoexuypwSrybx13MY7NSy9RNt8wPvZDMRT1CW6qlpF5jXRToXNHz3uWzbm2elNpZfXfGPqP9A==",
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1"
+          }
+        }
       }
     },
     "react-app-polyfill": {
@@ -11484,14 +11527,14 @@
       }
     },
     "react-dom": {
-      "version": "16.7.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.7.0.tgz",
-      "integrity": "sha512-D0Ufv1ExCAmF38P2Uh1lwpminZFRXEINJe53zRAbm4KPwSyd6DY/uDoS0Blj9jvPpn1+wivKpZYc8aAAN/nAkg==",
+      "version": "16.8.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.1.tgz",
+      "integrity": "sha512-N74IZUrPt6UiDjXaO7UbDDFXeUXnVhZzeRLy/6iqqN1ipfjrhR60Bp5NuBK+rv3GMdqdIuwIl22u1SYwf330bg==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
         "prop-types": "^15.6.2",
-        "scheduler": "^0.12.0"
+        "scheduler": "^0.13.1"
       }
     },
     "react-error-overlay": {
@@ -12713,9 +12756,9 @@
       }
     },
     "scheduler": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.12.0.tgz",
-      "integrity": "sha512-t7MBR28Akcp4Jm+QoR63XgAi9YgCUmgvDHqf5otgAj4QvdoBE4ImCX0ffehefePPG+aitiYHp0g/mW6s4Tp+dw==",
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.1.tgz",
+      "integrity": "sha512-VJKOkiKIN2/6NOoexuypwSrybx13MY7NSy9RNt8wPvZDMRT1CW6qlpF5jXRToXNHz3uWzbm2elNpZfXfGPqP9A==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1"
diff --git a/webui/package.json b/webui/package.json
index 6e9e88c..ea7858f 100644
--- a/webui/package.json
+++ b/webui/package.json
@@ -4,13 +4,17 @@
   "private": true,
   "dependencies": {
     "bootstrap": "^4.2.1",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
+    "react": "^16.8.1",
+    "react-dom": "^16.8.1",
     "react-redux": "^6.0.0",
     "react-scripts": "2.1.3",
     "reactstrap": "^7.0.2",
     "redux": "^4.0.1"
   },
+  "devDependencies": {
+    "@types/react": "^16.8.1",
+    "@types/react-redux": "^6.0.0"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
diff --git a/webui/src/App.js b/webui/src/App.js
index f8a9d9e..bde5e91 100755
--- a/webui/src/App.js
+++ b/webui/src/App.js
@@ -1,12 +1,17 @@
 import React, {Component} from 'react';
 import './App.css';
 import Header from "./Components/Header";
+import LoginForm from "./Components/LoginForm";
+import {Container} from "reactstrap";
 
 class App extends Component {
   render() {
     return (
       <div>
         <Header/>
+        <Container>
+          <LoginForm/>
+        </Container>
       </div>
     );
   }
diff --git a/webui/src/Components/Header.jsx b/webui/src/Components/Header.jsx
index 8c0f490..151cc4b 100644
--- a/webui/src/Components/Header.jsx
+++ b/webui/src/Components/Header.jsx
@@ -1,21 +1,29 @@
-import React, {Component} from "react"
+import React, {useState} from "react"
+import {Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink} from "reactstrap";
 import {connect} from "react-redux";
-import {Navbar, NavbarBrand} from "reactstrap";
 
-class Header extends Component {
-  constructor(props) {
-    super(props);
-  }
+function Header({isLoggedIn}) {
+  const [showMenu, setShowMenu] = useState(false);
 
-  render() {
-    return (
-      <Navbar color="dark" expand="md">
-        <NavbarBrand href="/">Lucifer</NavbarBrand>
-      </Navbar>
-    );
-  }
+  return (
+    <Navbar color="dark" dark expand="md">
+      <NavbarBrand href="/">Lucifer</NavbarBrand>
+      <NavbarToggler onClick={() => setShowMenu(!showMenu)}/>
+      <Collapse isOpen={showMenu} navbar>
+        {isLoggedIn && (
+          <Nav className="ml-auto" navbar>
+            <NavItem>
+              <NavLink href="/lights">Grupper</NavLink>
+            </NavItem>
+          </Nav>
+        )}
+      </Collapse>
+    </Navbar>
+  );
 }
 
-const mapStateToProps = (state) => ({});
+const mapStateToProps = (state) => ({
+  isLoggedIn: state.auth.isLoggedIn,
+});
 
-export default connect(mapStateToProps)(Header);
\ No newline at end of file
+export default connect(mapStateToProps)(Header);
diff --git a/webui/src/Components/LoginForm.jsx b/webui/src/Components/LoginForm.jsx
new file mode 100644
index 0000000..a416178
--- /dev/null
+++ b/webui/src/Components/LoginForm.jsx
@@ -0,0 +1,35 @@
+import React from "react";
+import {connect} from "react-redux";
+import {Card, CardBody, CardHeader, CardTitle, Col, Form, FormGroup, Input, Label} from "reactstrap";
+
+function LoginForm(props) {
+
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Innlogging</CardTitle>
+      </CardHeader>
+      <CardBody>
+        <Form>
+          <FormGroup row>
+            <Label sm={2} for="input-username">Brukernavn</Label>
+            <Col sm={10}>
+              <Input type="text" name="email" id="input-username"/>
+            </Col>
+          </FormGroup>
+          <FormGroup row>
+            <Label sm={2} for="input-password">Passord</Label>
+            <Col sm={10}>
+              <Input type="password" name="email" id="input-password"/>
+            </Col>
+          </FormGroup>
+        </Form>
+      </CardBody>
+    </Card>
+  );
+}
+
+const mapStateToProps = (state) => ({});
+
+export default connect(mapStateToProps)(LoginForm);