diff --git a/Backend/test.php b/Backend/test.php
index a466263..faa2bef 100644
--- a/Backend/test.php
+++ b/Backend/test.php
@@ -4,5 +4,5 @@ use Backend\Models\AdminUser;
 
 require_once ('Database/databaseMigration.php');
 AdminUser::firstOrCreate([
-    'user_name' => '', 'password' => password_hash('',PASSWORD_DEFAULT)
-]);
\ No newline at end of file
+    'user_name' => 'admin', 'password' => password_hash('admin123',PASSWORD_DEFAULT)
+]);
diff --git a/Frontend/Html/FirstTimeSetup.html b/Frontend/Html/FirstTimeSetup.html
index 2aef370..aa364d9 100644
--- a/Frontend/Html/FirstTimeSetup.html
+++ b/Frontend/Html/FirstTimeSetup.html
@@ -3,70 +3,126 @@
 
 <head>
     <!-- Default page settings -->
-    <title>Setup</title>
-    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
-    <meta content="utf-8" http-equiv="encoding">
+    <title>Opsætning</title>
+    <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="shortcut icon" href="../Images/UFO.png" />
+    <link rel="shortcut icon" href="../Images/SetupFav.png" />
     <!-- Default page settings end -->
 
     <!-- CSS -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
-    <link rel="stylesheet" href="../Styles/Index.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
+    <link rel="stylesheet" href="../Styles/FirstTimeSetup.css" />
+    <link rel="stylesheet" href="../Styles/minibar.min.css" />
+    <link rel="stylesheet" href="../Styles/Index.css" />
     <!-- CSS end -->
 
     <!-- Header scripts -->
-    <script src="https://kit.fontawesome.com/57b6c8b971.js" crossorigin="anonymous"></script>
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <script src="https://kit.fontawesome.com/57b6c8b971.js" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
     <!-- Header scripts end -->
 </head>
 
 <body>
-    <div>
-        <form id="SetupForm" method="POST">
-            <input type="text" name="dbType" id="dbType">
-            <input type="text" name="dbServername" id="dbServername">
-            <input type="text" name="dbUsername" id="dbUsername">
-            <input type="text" name="dbPassword" id="dbPassword">
-            <input type="text" name="dbName" id="dbName">
-            <input type="text" name="AdminUsername" id="AdminUsername">
-            <input type="text" name="AdminPassword" id="AdminPassword">
-            <input type="submit" name="dbSetup" id="dbSetup" value="Submit">
-        </form>
+    <div class="HeaderPanel">
+        <h6 class="HeaderTitle">
+            Første Gangs Opsætning
+        </h6>
     </div>
 
-    <script>
-        $('#SetupForm').submit(function(e) {
-            let URL = "../../Backend/setup.php";
+     <form id="regForm" method="POST">
+        <input type="hidden" name="dbType" id="DBType" />
+        <div class="tab"> 
+            <h1>
+                Type database:
+            </h1>
+            <p>
+                <select id="dbSelect" class="form-select" aria-label="Default select example">
+                    <option value="mysql">MySQL</option>
+                    <option value="sqlite">SQLite</option>
+                </select>
+            </p>
+        </div>
 
-            let form = $('#SetupForm')[0];
-            let formData = new FormData(form);
+        <div class="tab"> 
+            <h1>
+                Database ip:
+            </h1>
+            <p>
+                <input name="dbServername" class="form-control" placeholder="F.eks. 127.0.0.1">
+            </p>
+        </div>
 
-            let id = $('#dbSetup').attr('name');
-            let value = $('#dbSetup').val();
+        <div class="tab"> 
+            <h1>
+                Database:
+            </h1>
+            <p>
+                <input name="dbName" class="form-control">
+            </p>
+        </div>
 
-            formData.append(id, value);
+        <div class="tab">
+            <h1>
+                Database bruger:
+            </h1>
+            <p>
+                <input name="dbUsername" class="form-control" placeholder="Brugernavn">
+            </p>
+            <p>
+                <input id="Password" type="password" class="form-control" placeholder="Password">
+            </p>
+            <p>
+                <input id="ConfirmPassword" type="password" name="dbPassword" class="form-control" placeholder="Gentag password">
+            </p>
+        </div>
+        
 
-            axios.post(URL, formData, {
-                header: 'multipart/form-data'
-            }).then(res => {
-                if (res.status === 201)
-                {
-                    console.log('Logged in');
-                }
+        <div class="tab">
+            <h1>
+                Opret admin bruger:
+            </h1>
+            <p>
+                <input name="dbUsername" class="form-control" placeholder="Brugernavn">
+            </p>
+            <p>
+                <input id="adminPassword" type="password" class="form-control" placeholder="Password">
+            </p>
+            <p>
+                <input id="adminConfirmPassword" type="password" name="dbPassword" class="form-control" placeholder="Gentag password">
+            </p>
+        </div>
 
-                console.log("not code 201");
-            }).catch(error => {
-                console.log(error);
-            });
+        <div style="overflow:auto;">
+            <div>
+                <a type="button" style="float:left;" id="prevBtn" onclick="nextPrev(-1)">
+                    <i class="fas fa-arrow-left"></i>
+                </a>
 
-            e.preventDefault();
-        })
-    </script>
+                <a type="button" style="float:right;" id="nextBtn" onclick="nextPrev(1)">
+                    <i class="fas fa-arrow-right"></i>
+                </a>
+                <input id="submitBtn" type="submit" style="float:right;" name="regGroup" value="Opret Siden" onclick="nextPrev(1)">
+            </div>
+        </div>
+
+        <!-- Circles which indicates the steps of the form: -->
+        <div style="text-align:center;margin-top:40px;">
+            <i class="fas fa-circle step"></i>
+            <i class="fas fa-circle step"></i>
+            <i class="fas fa-circle step"></i>
+            <i class="fas fa-circle step"></i>
+            <i class="fas fa-circle step"></i>
+        </div>
+
+    </form>
+
+    <!-- Body scripts -->
+    <script src="../Javascript/SetupForm.js"></script>
+    <script src="../Javascript/minibar.min.js"></script>
+    <!-- Body scripts end -->
 </body>
-
 </html>
\ No newline at end of file
diff --git a/Frontend/Index.html b/Frontend/Index.html
index 0e39053..07c510f 100755
--- a/Frontend/Index.html
+++ b/Frontend/Index.html
@@ -72,7 +72,7 @@
                             </ul>
                         </div>
                     </li>
-                    <li class="nav-item">
+                    <li class="nav-item" id="AdminPanelLI" style="display: none;">
                         <a class="nav-link NavLink" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" href="#admin">
                             Administration
                         </a>
@@ -641,12 +641,12 @@
     <!-- Footer end -->
 
     <!-- Body scripts -->
+    <script src="Javascript/LoginFunctionality.js"></script>
     <script src="Javascript/Collapsible.js"></script>
     <script src="Javascript/PasswordValidation.js"></script>
     <script src="Javascript/Kalender.js"></script>
     <script src="Javascript/minibar.min.js"></script>
     <script src="Javascript/HeaderFunctionality.js"></script>
-    <script src="Javascript/Lodtrækning.js"></script>
     <!-- Body scripts end -->
 </body>
 
diff --git a/Frontend/Javascript/LoginFunctionality.js b/Frontend/Javascript/LoginFunctionality.js
index 5c19cfc..97b04d9 100755
--- a/Frontend/Javascript/LoginFunctionality.js
+++ b/Frontend/Javascript/LoginFunctionality.js
@@ -10,15 +10,15 @@ $(document).ready(function () {
     // Populate select with options from the database
     axios.get('/Backend/Controllers/GameJam/GetGameJam.php')
     .then(function(res) {
-        let resArr = res.data;
+        let resArr = res.data.data;
 
-        //console.log(res.data.data);
+        // console.log(resArr);
 
-        for(let i = 0; i < res.data.data.length; i++)
+        for(let i = 0; i < resArr.length; i++)
         {
             arr.push({
-                id: res.data.data[i].id, 
-                Gamejam: res.data.data[i].name
+                id: resArr[i].id, 
+                Gamejam: resArr[i].name
             });
         }
 
@@ -211,7 +211,6 @@ $(document).ready(function () {
 
         formData.append(id, value);
 
-
         axios.post(URL, formData, {
             header: 'multipart/form-data'
         }).then(res => {
diff --git a/Frontend/Javascript/SetupForm.js b/Frontend/Javascript/SetupForm.js
new file mode 100644
index 0000000..923549f
--- /dev/null
+++ b/Frontend/Javascript/SetupForm.js
@@ -0,0 +1,178 @@
+let currentTab = 0; // Current tab is set to be the first tab (0)
+let passNotMatch = false;   // Keep track of passwords
+showTab(currentTab); // Display the current tab
+
+let selectedDBType;
+
+function showTab(n) {
+    let x = document.getElementsByClassName("tab");
+    x[n].style.display = "block";
+
+    if (n == 0) 
+    {
+        document.getElementById("prevBtn").style.display = "none";
+    } 
+    else 
+    {
+        document.getElementById("prevBtn").style.display = "inline";
+    }
+
+    if (n == (x.length - 1)) 
+    {
+        
+        document.getElementById("nextBtn").style.display = "none";
+        document.getElementById("submitBtn").style.display = "inline-block";
+    } 
+    else 
+    {
+        document.getElementById("nextBtn").style.display = "inline-block";
+        document.getElementById("submitBtn").style.display = "none";
+    }
+
+    FixIndicators(n)
+}
+
+function nextPrev(n) {
+    let x = document.getElementsByClassName("tab");
+
+    // Exit the function if any field in the current tab is invalid
+    if (n == 1 && !Validation()) return false;
+
+    if(passNotMatch) return false;
+
+    // Hide the current tab
+    x[currentTab].style.display = "none";
+
+    // Increase or decrease the current tab by 1
+    currentTab = currentTab + n;
+
+    if (currentTab >= x.length) 
+    {
+        document.getElementById("regForm").submit();
+        return false;
+    }
+
+    // Otherwise, display the correct tab:
+    showTab(currentTab);
+}
+
+function Validation() {
+    let x, y, i, valid = true;
+    x = document.getElementsByClassName("tab");
+    y = x[currentTab].getElementsByTagName("input");
+
+    // Check every input field in the current tab
+    for (i = 0; i < y.length; i++) 
+    {
+        if (y[i].value == "") 
+        {
+            y[i].className += " invalid";
+
+            valid = false;
+        }
+    }
+
+    // If valid is true, mark the step as finished, and valid.
+    if (valid) 
+    {
+        document.getElementsByClassName("step")[currentTab].className += " finish";
+    }
+
+    return valid;
+}
+
+function FixIndicators(n) {
+    // Remove the active class from all steps
+    let i, x = document.getElementsByClassName("step");
+
+    for (i = 0; i < x.length; i++) 
+    {
+        x[i].className = x[i].className.replace(" active", "");
+    }
+
+    // Add the active class to the current step
+    x[n].className += " active";
+}
+
+$('#dbSelect').change(function() {
+    selectedDBType = $('#dbSelect').children("option:selected").val();
+});
+
+$('#ConfirmPassword').on('change keyup paste', function() {
+    if ($(this).val() != $('#Password').val())
+    {
+        passNotMatch = true;       
+        $(this).addClass('invalid');
+    }
+    else
+    {
+        passNotMatch = false
+        $('#nextBtn').prop('disabled', false);
+        if($(this).hasClass('invalid'))
+        {
+            $(this).removeClass('invalid');
+        }
+    }
+});
+
+$('#adminConfirmPassword').on('change keyup paste', function() {
+
+    if ($(this).val() != $('#adminPassword').val())
+    {
+        passNotMatch = true;       
+        $(this).addClass('invalid');
+    }
+    else
+    {
+        passNotMatch = false
+        $('#nextBtn').prop('disabled', false);
+        if($(this).hasClass('invalid'))
+        {
+            $(this).removeClass('invalid');
+        }
+    }
+});
+
+$('#regForm').submit(function(e) {
+    e.preventDefault();
+    $('#DBType').val($('#dbSelect option:selected').val());
+    
+
+    let form = $('#regForm')[0];
+    let formData = new FormData(form);
+
+    let id = $('#submitBtn').attr('name');
+    let value = $('#submitBtn').val();
+
+    formData.append(id, value);
+
+    console.log(form);
+    console.log(formData);
+
+
+    $.ajax({
+        url : 'https://ptsv2.com/t/tzztn-1616799712/post',
+        type: 'POST',
+        data : formData,
+        processData: false,
+        contentType: false,
+        crossDomain: true,
+        success:function(data, textStatus, jqXHR) {
+            console.log(textStatus);
+            console.log(data)
+        },
+        error: function(jqXHR, textStatus, errorThrown) {
+            console.log(textStatus);
+            console.log(jqXHR);
+            console.log(errorThrown);     
+        }
+    });
+    // axios.post(', formData, {
+    //     header: 'multipart/form-data'
+    // }).then(res => {
+    //     console.log(`data: ${res}`)
+    // }).catch(error => {
+    //     console.log(error);
+    // });
+    e.preventDefault();
+});
\ No newline at end of file
diff --git a/Frontend/Styles/FirstTimeSetup.css b/Frontend/Styles/FirstTimeSetup.css
new file mode 100644
index 0000000..f081794
--- /dev/null
+++ b/Frontend/Styles/FirstTimeSetup.css
@@ -0,0 +1,85 @@
+/* Header Start */
+.HeaderPanel {
+    position: fixed;
+    overflow: hidden;
+    background-color: rgb(33, 37, 41);
+    padding: 10px 10px;
+    top: 0;
+    width: 100%;
+}
+
+.HeaderPanel a {
+    text-align: center;
+    color: rgba(255, 255, 255, .75);
+    text-decoration: none;
+    font-size: 18px; 
+    line-height: 25px;
+    border-radius: 4px;
+}
+
+.HeaderTitle {
+    text-align: center;
+    font-weight: bold;
+    margin-top: 3px !important;
+    margin: 0;
+}
+/* Header End */
+
+
+ /* Setup form Start */
+#regForm {
+    background-color: rgb(18, 18, 18);
+    margin: 25vh auto;
+    padding: 40px;
+    width: 70%;
+    min-width: 300px;
+}
+
+.form-floating > label {
+    color: black;
+}
+
+input {
+    color: green;
+    padding: 10px;
+    width: 100%;
+    font-size: 17px;
+    font-family: Raleway;
+    border: 1px solid #aaaaaa;
+}
+
+input.invalid {
+    border-color: red;
+    background-color: #ffdddd;
+}
+
+.tab {
+    display: none;
+}
+
+.tab h1 {
+    text-align: center;
+    margin-bottom: 1vh;
+}
+
+.step {
+    height: 15px;
+    width: 15px;
+    margin: 0 2px;
+    color: #bbbbbb;
+    display: inline-block;
+    opacity: 0.5;
+}
+
+.step.active {
+    opacity: 1;
+}
+
+.step.finish {
+    color: #4CAF50;
+}
+
+.step.finish::before {
+    content: "\f058";
+}
+/* Setup form End */
\ No newline at end of file
diff --git a/bootstrap.php b/bootstrap.php
index b988801..1959089 100755
--- a/bootstrap.php
+++ b/bootstrap.php
@@ -6,4 +6,3 @@ $con = json_decode(file_get_contents('config/database.json', true), true);
 $capsule->addConnection($con);
 $capsule->setAsGlobal();
 $capsule->bootEloquent();
-$capsule->Connection()->getPdo();
diff --git a/config/database.json b/config/database.json
index e69de29..364d1a8 100644
--- a/config/database.json
+++ b/config/database.json
@@ -0,0 +1,7 @@
+{
+    "driver":"mysql",
+    "host":"localhost",
+    "database":"testdb",
+    "username":"root",
+    "password":"V#_xWL6_"
+}
\ No newline at end of file
