diff --git a/src/server/admin/pwdmanager.js b/src/server/admin/pwdmanager.js
index e69de29..fd711fb 100644
--- a/src/server/admin/pwdmanager.js
+++ b/src/server/admin/pwdmanager.js
@@ -0,0 +1,27 @@
+/*
+*				myevent - pwdmanager.js
+*
+*	Created by Janis Hutz 03/26/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+*/
+
+/* 
+    These functions are required to verify user login and to create new users
+    and to hash new passwords (if user changes password.) This here is only
+    used for the admin panel, another one is used for the normal user accounts
+    to separate the two for additional security.
+*/
+
+// import and init
+const bcrypt = require( 'bcrypt' );
+const db = require( '../backend/db/db.js' );
+
+module.exports.checkpassword = function checkpassword ( username, password ) {
+    return new Promise( resolve => {
+        db.getData( 'admin', username ).then( data => {
+            resolve( bcrypt.compareSync( password, data ) );
+        } );
+    } );
+};
\ No newline at end of file
diff --git a/src/server/admin/routes.js b/src/server/admin/routes.js
index 096e7ec..9f09355 100644
--- a/src/server/admin/routes.js
+++ b/src/server/admin/routes.js
@@ -8,10 +8,45 @@
 */
 
 const path = require( 'path' );
+const pwdmanager = require( './pwdmanager.js' );
+
 
 module.exports = ( app, settings ) => {
+    /* 
+        Static routes for files like login screen, css, js and assets. Js and assets require login
+    */
     app.get( '/admin/login', ( request, response ) => {
-        response.sendFile( path.join( __dirname + '/ui/login.html' ) );
+        if ( request.session.loggedIn ) {
+            response.redirect( '/admin' );
+        } else {
+            response.sendFile( path.join( __dirname + '/ui/login.html' ) );
+        }
+    } );
+
+    app.get( '/admin/loginLangPack', ( request, response ) => {
+        response.sendFile( path.join( __dirname + '/ui/js/loginLangPack.js' ) );
+    } );
+
+    app.get( '/admin/css/:file', ( request, response ) => {
+        response.sendFile( path.join( __dirname + '/ui/css/' + request.params.file ) );
+    } );
+
+    /* 
+        Admin login route that checks the password and, if enabled in settings, redirects to 2fa page or directly to admin panel
+    */
+    app.post( '/admin/auth', ( request, response ) => {
+        pwdmanager.checkpassword( request.body.mail, request.body.pwd ).then( data => {
+            if ( data ) {
+                if ( settings.twoFA ) {
+                    response.sendFile( path.join( __dirname + '../admin/ui/2fa.html' ) );
+                } else {
+                    request.session.loggedIn = true;
+                    response.redirect( '/admin' );
+                }
+            } else {
+                response.send( 'Password wrong' );
+            }
+        } );
     } );
     
     /* 
diff --git a/src/server/admin/ui/css/loginstyle.css b/src/server/admin/ui/css/loginstyle.css
new file mode 100644
index 0000000..ce11022
--- /dev/null
+++ b/src/server/admin/ui/css/loginstyle.css
@@ -0,0 +1,98 @@
+:root, :root.light {
+    --background-color: rgb(202, 223, 255);
+    --secondary-background: white;
+    --primary-color: black;
+    --secondary-color: blue;
+    --secondary-hover: darkblue;
+}
+
+:root.dark {
+    --background-color: rgb(42, 44, 56);
+        --secondary-background: rgb(19, 20, 32);
+        --primary-color: white;
+        --secondary-color: rgb(94, 94, 226);
+        --secondary-hover: rgb(155, 155, 255);
+}
+
+@media ( prefers-color-scheme: dark ) {
+    :root {
+        --background-color: rgb(42, 44, 56);
+        --secondary-background: rgb(19, 20, 32);
+        --primary-color: white;
+        --secondary-color: rgb(94, 94, 226);
+        --secondary-hover: rgb(155, 155, 255);
+    }
+}
+
+body {
+    background-color: var(--background-color);
+    font-family: sans-serif;
+    font-size: calc(12pt + 0.35vw);
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.login-app {
+    border-radius: 50px;
+    margin-top: 2%;
+    background-color: var(--secondary-background);
+    color: var(--primary-color);
+    width: 60%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.form {
+    width: 80%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: 4%;
+    margin-bottom: 4%;
+}
+
+.button {
+    text-decoration: none;
+    color: var(--primary-color);
+    background-color: var(--secondary-color);
+    padding: 15px;
+    border-radius: 30px;
+    transition: 1s;
+    cursor: pointer;
+}
+
+.button:hover {
+    transition: ease-in-out 0.2s;
+    background-color: var(--secondary-hover);
+    border-radius: 5px;
+}
+
+.input {
+    padding: 1%;
+    width: 80%;
+    margin-bottom: 3%;
+    border-radius: 10px;
+}
+
+.top-bar {
+    width: 100%;
+    display: flex;
+    align-items: end;
+    justify-content: end;
+}
+
+.selector {
+    background-color: lightblue;
+    border-radius: 20px;
+    padding: 0.5%;
+    border-style: solid;
+    border-color: blue;
+}
\ No newline at end of file
diff --git a/src/server/admin/ui/js/loginLangPack.js b/src/server/admin/ui/js/loginLangPack.js
new file mode 100644
index 0000000..5c8dfec
--- /dev/null
+++ b/src/server/admin/ui/js/loginLangPack.js
@@ -0,0 +1,32 @@
+let themeSelector2 = document.getElementById( 'theme' );
+let languageSelector = document.getElementById( 'lang' );
+let mailLabel = document.getElementById( 'mailLabel' );
+let pwdLabel = document.getElementById( 'pwdLabel' );
+let login = document.getElementById( 'login' );
+
+languageSelector.value = sessionStorage.getItem( 'lang' );
+
+function langUpdate () {
+    if ( sessionStorage.getItem( 'lang' ) === 'de' ) {
+        themeSelector2.options[0].innerHTML = 'Automatisch';
+        themeSelector2.options[1].innerHTML = 'Hellmodus';
+        themeSelector2.options[2].innerHTML = 'Dunkelmodus';
+        mailLabel.innerHTML = 'Email - Adresse';
+        pwdLabel.innerHTML = 'Passwort';
+        login.value = 'Anmelden';
+    } else {
+        themeSelector2.options[0].innerHTML = 'System theme';
+        themeSelector2.options[1].innerHTML = 'Light';
+        themeSelector2.options[2].innerHTML = 'Dark';
+        mailLabel.innerHTML = 'Email address';
+        pwdLabel.innerHTML = 'Password';
+        login.value = 'Log in';
+    }
+}
+
+function changeLang () {
+    sessionStorage.setItem( 'lang', languageSelector.value );
+    langUpdate();
+}
+
+langUpdate();
\ No newline at end of file
diff --git a/src/server/admin/ui/login.html b/src/server/admin/ui/login.html
index 2ffef05..1ef0900 100644
--- a/src/server/admin/ui/login.html
+++ b/src/server/admin/ui/login.html
@@ -5,88 +5,17 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Login :: myevent - admin panel</title>
-        <style>
-            body {
-                background-color: rgb(202, 223, 255);
-                font-family: sans-serif;
-                font-size: calc(12pt + 0.35vw);
-            }
-
-            .content {
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
-            }
-
-            .login-app {
-                border-radius: 50px;
-                margin-top: 2%;
-                background-color: white;
-                width: 60%;
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
-            }
-
-            .form {
-                width: 80%;
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
-                margin-top: 4%;
-                margin-bottom: 4%;
-            }
-
-            .button {
-                text-decoration: none;
-                color: white;
-                background-color: blue;
-                padding: 15px;
-                border-radius: 30px;
-                transition: 1s;
-                cursor: pointer;
-            }
-
-            .button:hover {
-                transition: ease-in-out 0.2s;
-                background-color: darkblue;
-                border-radius: 5px;
-            }
-
-            .input {
-                padding: 1%;
-                width: 80%;
-                margin-bottom: 3%;
-                border-radius: 10px;
-            }
-
-            .top-bar {
-                width: 100%;
-                display: flex;
-                align-items: end;
-                justify-content: end;
-            }
-
-            .selector {
-                background-color: lightblue;
-                border-radius: 20px;
-                padding: 0.5%;
-                border-style: solid;
-                border-color: blue;
-            }
-        </style>
+        <link rel="stylesheet" href="/admin/css/loginstyle.css">
+        <script defer src="/admin/loginLangPack"></script>
     </head>
     <body>
         <div class="content">
             <div class="top-bar">
-                <select name="lang" id="lang" class="selector">
+                <select name="lang" id="lang" class="selector" onchange="changeLang();">
                     <option value="en">English</option>
                     <option value="de">Deutsch</option>
                 </select>
-                <select name="theme" id="theme" class="selector">
+                <select name="theme" id="theme" class="selector" onchange="toggleTheme();">
                     <option value="system">System theme</option>
                     <option value="light">Light</option>
                     <option value="dark">Dark</option>
@@ -97,13 +26,52 @@
                 <h1>Login</h1>
                 <footer>myevent - admin panel</footer>
                 <form action="/admin/auth" method="post" class="form">
-                    <label for="mail">Email address</label><br>
+                    <label for="mail" id="mailLabel">Email address</label><br>
                     <input type="email" id="mail" name="mail" required class="input"><br>
-                    <label for="pwd">Password</label><br>
+                    <label for="pwd" id="pwdLabel">Password</label><br>
                     <input type="password" id="pwd" name="pwd" required class="input"><br>
-                    <input type="submit" value="Log in" class="button">
+                    <input type="submit" value="Log in" class="button" id="login">
                 </form>
             </div>
         </div>
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
+        <script>
+            let themeSelector = document.getElementById( 'theme' );
+
+            if ( sessionStorage.getItem( 'theme' ) ) {
+                themeSelector.value = sessionStorage.getItem( 'theme' );
+            }
+
+            if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches || themeSelector.value === 'dark' ) {
+                document.documentElement.classList.add( 'dark' );
+            } else {
+                document.documentElement.classList.add( 'light' );
+            };
+
+            setTimeout( activate, 500 );
+
+            function activate () {
+                $( 'body' ).css( 'transition', '0.5s' );
+            }
+
+            function toggleTheme () { 
+                sessionStorage.setItem( 'theme', themeSelector.value );
+                if ( themeSelector.value === 'dark' ) {
+                    document.documentElement.classList.remove( 'light' );
+                    document.documentElement.classList.add( 'dark' );
+                } else if ( themeSelector.value === 'light' ) {
+                    document.documentElement.classList.remove( 'dark' );
+                    document.documentElement.classList.add( 'light' );
+                } else if ( themeSelector.value === 'system' ) {
+                    if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches ) {
+                        document.documentElement.classList.remove( 'light' );
+                        document.documentElement.classList.add( 'dark' );
+                    } else {
+                        document.documentElement.classList.remove( 'dark' );
+                        document.documentElement.classList.add( 'light' );
+                    }
+                }
+            }
+        </script>
     </body>
 </html>
\ No newline at end of file
diff --git a/src/server/admin/ui/setup.html b/src/server/admin/ui/setup.html
new file mode 100644
index 0000000..d6f022f
--- /dev/null
+++ b/src/server/admin/ui/setup.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Login :: myevent - admin panel</title>
+        <link rel="stylesheet" href="/admin/css/loginstyle.css">
+    </head>
+    <body>
+        <div class="content">
+            <div class="top-bar">
+                <select name="lang" id="lang" class="selector" onchange="changeLang();">
+                    <option value="en">English</option>
+                    <option value="de">Deutsch</option>
+                </select>
+                <select name="theme" id="theme" class="selector" onchange="toggleTheme()">
+                    <option value="system">System theme</option>
+                    <option value="light">Light</option>
+                    <option value="dark">Dark</option>
+                </select>
+            </div>
+            <a href="https://myevent.janishutz.com"><img src="/assets/logo.png" alt="myevent-logo" style="height: 35vh;"></a>
+            <div class="login-app">
+                <h1>Setup</h1>
+                <footer>myevent - admin panel</footer>
+                <form action="/admin/auth" method="post" class="form">
+                    <label for="mail">Email address</label><br>
+                    <input type="email" id="mail" name="mail" required class="input"><br>
+                    <label for="pwd">Password</label><br>
+                    <input type="password" id="pwd" name="pwd" required class="input"><br>
+                    <input type="submit" value="Log in" class="button">
+                </form>
+            </div>
+        </div>
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
+        <script>
+            let themeSelector = document.getElementById( 'theme' );
+
+            if ( sessionStorage.getItem( 'theme' ) ) {
+                themeSelector.value = sessionStorage.getItem( 'theme' );
+            }
+
+            if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches || themeSelector.value === 'dark' ) {
+                document.documentElement.classList.add( 'dark' );
+            } else {
+                document.documentElement.classList.add( 'light' );
+            };
+
+            setTimeout( activate, 500 );
+
+            function activate () {
+                $( 'body' ).css( 'transition', '0.5s' );
+            }
+
+            function toggleTheme () { 
+                sessionStorage.setItem( 'theme', themeSelector.value );
+                if ( themeSelector.value === 'dark' ) {
+                    document.documentElement.classList.remove( 'light' );
+                    document.documentElement.classList.add( 'dark' );
+                } else if ( themeSelector.value === 'light' ) {
+                    document.documentElement.classList.remove( 'dark' );
+                    document.documentElement.classList.add( 'light' );
+                } else if ( themeSelector.value === 'system' ) {
+                    if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches ) {
+                        document.documentElement.classList.remove( 'light' );
+                        document.documentElement.classList.add( 'dark' );
+                    } else {
+                        document.documentElement.classList.remove( 'dark' );
+                        document.documentElement.classList.add( 'light' );
+                    }
+                }
+            }
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/src/server/backend/db/db.js b/src/server/backend/db/db.js
new file mode 100644
index 0000000..8218794
--- /dev/null
+++ b/src/server/backend/db/db.js
@@ -0,0 +1,15 @@
+/*
+*				myevent - db.js
+*
+*	Created by Janis Hutz 03/26/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+*/
+
+module.exports.getData = function getData ( db, searchQuery ) {
+    console.log( db + searchQuery );
+    return new Promise( resolve => {
+        resolve( '$2b$05$ElMYWoMjk7567lXkIkee.e.6cxCrWU4gkfuNLB8gmGYLQQPm7gT3O' );
+    } );
+};
\ No newline at end of file
diff --git a/src/server/ui/html/index.html b/src/server/ui/html/index.html
index 29c85b6..c8e422d 100644
--- a/src/server/ui/html/index.html
+++ b/src/server/ui/html/index.html
@@ -33,6 +33,7 @@
                 margin: 3%;
                 margin-bottom: 0;
                 border-radius: 50px;
+                width: 40%;
             }
 
             .button {
@@ -62,12 +63,12 @@
             <div class="lang presented" id="en">
                 <h1>Welcome to myevent!</h1>
                 <!-- <p>Thank you for installing and using myevent! Let's get started by setting it up! First plan of action is to log in to the admin panel where you can replace this page here with your own landing page!</p> -->
-                <a href="/admin/login" class="button">To the admin panel</a>
+                <a href="/admin/login" class="button" onclick="sessionStorage.setItem( 'lang', 'de' )">To the admin panel</a>
             </div>
             <div class="lang" id="de">
                 <h1>Willkommen zu myevent!</h1>
                 <!-- <p>Vielen Dank für die Installation und Nutzung von myevent! Beginnen wir mit dem Aufsetzen! Der erste Schritt ist, sich ins Admin-Panel einzuloggen um die Seite hier mit deiner eigenen Seite zu ersetzen!</p> -->
-                <a href="/admin/login?lang=de" class="button">Zum Admin-Panel</a>
+                <a href="/admin/login" class="button" onclick="sessionStorage.setItem( 'lang', 'de' )">Zum Admin-Panel</a>
             </div>
         </div>
         <script>