diff --git a/src/main/webapp/css/index.css b/src/main/webapp/css/index.css
index b4b8b66b0eee400863cf390b8b3fe30c8d3985ff..32b16a4030bdaf726029c4d9ee38e0752ea85821 100644
--- a/src/main/webapp/css/index.css
+++ b/src/main/webapp/css/index.css
@@ -25,6 +25,11 @@ a:hover { color: #2C303C; }
     align-self: center;
     justify-self: center;
 }
+.login {
+    display:flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
 
 .loginInput {
     align-self: center;
@@ -34,6 +39,7 @@ a:hover { color: #2C303C; }
     padding: 2px;
     margin: 2px;
     box-sizing: border-box;
+    margin-bottom:10px;
 }
 
 .loginBtn {
diff --git a/src/main/webapp/index.html b/src/main/webapp/index.html
index a437e70b8e4cce1c16ed3dfe53aebc5200e47e3b..3d8a13987befcc8d978cd6749eaa3eb88c184df3 100644
--- a/src/main/webapp/index.html
+++ b/src/main/webapp/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -8,16 +9,24 @@
     <link rel="stylesheet" href="css/app.css" />
     <title>ChatPage</title>
 </head>
+
 <body>
     <div class="container">
         <div class="navbar">
             <h1 class="header">Meldingsapplikasjon</h1>
         </div>
-        <form class="main" id="loginForm" onsubmit="login(event)">
+        <form class="main login" id="loginForm" onsubmit="login(event)">
             <input class="loginInput" placeholder="Brukernavn..." id="username" required pattern="([\w]+)">
+            <input class="loginInput" type="password" placeholder="Passord..." id="password" required pattern="[\s\S]*">
             <button class="loginBtn">Logg inn</button>
         </form>
     </div>
-<script type="text/javascript" src="./js/index.js"></script>
+    <script type="text/javascript" src="./js/index.js"></script>
 </body>
+
+</html>>
+
+</html>index.js"></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/src/main/webapp/js/index.js b/src/main/webapp/js/index.js
index 60d5a1f6a82d5eb71a3920cb936b7eb1f3789cd7..87c0ac47e7274baae2a6f544d6cf3f1e7afe823b 100644
--- a/src/main/webapp/js/index.js
+++ b/src/main/webapp/js/index.js
@@ -1,5 +1,5 @@
 let inputfield = document.getElementById('username');
-inputfield.addEventListener("input",function () {
+inputfield.addEventListener("input", function () {
     if (inputfield.validity.patternMismatch) {
         inputfield.setCustomValidity("Ugyldig tegn, bruk kun bokstaver (a-z) og tall (0-9)");
     } else {
@@ -12,10 +12,11 @@ inputfield.addEventListener("input",function () {
  * Function called when pressing login-button. Makes a HTTP POST request to server.
  * On success it calls loadApplication().
  */
-function login(event){
+function login(event) {
     event.preventDefault();
     let user = {
-        "username": document.getElementById('username').value
+        "username": document.getElementById('username').value,
+        "password": document.getElementById('password').value
     };
 
     fetch('../api/user', {
@@ -27,7 +28,7 @@ function login(event){
     })
         .then(response => response.json())
         .then(user => {
-            if(user.userId === 0) alert("Feil brukernavn og/eller passord");
+            if (user.userId === 0) alert("Feil brukernavn og/eller passord");
             else loadApplication(user);
         })
         .catch(error => console.error(error));
@@ -38,9 +39,11 @@ function login(event){
  * Adds user information to sessionStorage and redirects to app.html
  * @param user contains user information as a JSON object
  */
-function loadApplication(user){
+function loadApplication(user) {
     sessionStorage.setItem("userId", user.userId);
     sessionStorage.setItem("username", user.username);
     window.location.href = "../app.html"
 
+}ion.href = "../app.html"
+
 }
\ No newline at end of file