diff --git a/src/server/admin/routes.js b/src/server/admin/routes.js
index 408956f..ef785f7 100644
--- a/src/server/admin/routes.js
+++ b/src/server/admin/routes.js
@@ -9,7 +9,7 @@
 
 const path = require( 'path' );
 const pwdmanager = require( './pwdmanager.js' );
-
+const fs = require( 'fs' );
 
 module.exports = ( app, settings ) => {
     /* 
@@ -27,6 +27,12 @@ module.exports = ( app, settings ) => {
         response.sendFile( path.join( __dirname + '/ui/js/loginLangPack.js' ) );
     } );
 
+    app.get( '/admin/js/:file', ( request, response ) => {
+        if ( request.session.loggedIn ) {
+            response.sendFile( path.join( __dirname + '/ui/js/' + request.params.file ) );
+        }
+    } );
+
     app.get( '/admin/css/:file', ( request, response ) => {
         response.sendFile( path.join( __dirname + '/ui/css/' + request.params.file ) );
     } );
@@ -72,6 +78,17 @@ module.exports = ( app, settings ) => {
         }
     } );
 
+
+    /* 
+        Send admin panel modules to UI as UI uses Vue.js Router
+    */
+    app.get( '/admin/panel/modules', ( request, response ) => {
+        let panelModules = { 'home': fs.readFileSync( path.join( __dirname + '/ui/panel/home.html' ) ).toString() };
+        if ( request.session.loggedIn ) {
+            response.send( panelModules );
+        }
+    } );
+
     app.get( '/admin/setup', ( request, response ) => {
         if ( request.session.loggedIn ) {
             response.sendFile( path.join( __dirname + '/ui/setup.html' ) );
diff --git a/src/server/admin/ui/css/style.css b/src/server/admin/ui/css/style.css
new file mode 100644
index 0000000..e067c09
--- /dev/null
+++ b/src/server/admin/ui/css/style.css
@@ -0,0 +1,72 @@
+:root, :root.light {
+    --background-color: rgb(202, 223, 255);
+    --secondary-background: white;
+    --primary-color: black;
+    --primary-inverse: white;
+    --secondary-color: blue;
+    --secondary-hover: darkblue;
+}
+
+:root.dark {
+    --background-color: rgb(42, 44, 56);
+    --secondary-background: rgb(19, 20, 32);
+    --primary-color: white;
+    --primary-inverse: black;
+    --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;
+}
+
+.button {
+    text-decoration: none;
+    color: white;
+    background-color: var(--secondary-color);
+    padding: 15px;
+    border-radius: 30px;
+    transition: 1s;
+    cursor: pointer;
+}
+
+.button:hover {
+    transition: ease-in-out 0.2s;
+    color: var(--primary-inverse);
+    background-color: var(--secondary-hover);
+    border-radius: 5px;
+}
+
+.input {
+    padding: 1%;
+    width: 80%;
+    margin-bottom: 3%;
+    border-radius: 10px;
+}
+
+.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/index.js b/src/server/admin/ui/js/index.js
new file mode 100644
index 0000000..7df002c
--- /dev/null
+++ b/src/server/admin/ui/js/index.js
@@ -0,0 +1,35 @@
+/* eslint-disable no-undef */
+
+fetch( '/admin/panel/modules' ).then( res => {
+    res.json().then( data => {
+        const Home = { template: data[ 'home' ] };
+        const About = { template: '<div>About</div>' };
+
+        const routes = [
+            { path: '/', component: Home },
+            { path: '/about', component: About }
+        ];
+
+        const router = VueRouter.createRouter( {
+            history: VueRouter.createWebHashHistory(),
+            routes,
+        } );
+
+        const app = Vue.createApp( {
+            data() {
+                return {
+
+                };
+            },
+            watch: {
+                $route ( to, from ) {
+                    console.log( 'changing route' );
+                }
+            },
+        } );
+
+        app.use( router );
+
+        app.mount( '#app' );
+    } );
+} );
\ No newline at end of file
diff --git a/src/server/admin/ui/panel.html b/src/server/admin/ui/panel.html
new file mode 100644
index 0000000..28a4817
--- /dev/null
+++ b/src/server/admin/ui/panel.html
@@ -0,0 +1,77 @@
+<!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">
+        <link rel="stylesheet" href="/admin/css/style.css">
+
+        <title>Admin panel :: myevent</title>
+    </head>
+    <body>
+        <div id="top">
+            <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>
+        <div id="app">
+            <div id="nav">
+                <router-link to="/">Home</router-link>
+                <router-link to="/about">About</router-link>
+            </div>
+            <div id="content">
+                <router-view></router-view>
+            </div>
+        </div>
+
+        <!-- Load vue.js and app -->
+        <script src="https://unpkg.com/vue@3"></script>
+        <script src="https://unpkg.com/vue-router@4"></script>
+        <script src="/admin/js/index.js"></script>
+        <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/website/src/setup.md b/src/server/admin/ui/panel/accounts.html
similarity index 100%
rename from website/src/setup.md
rename to src/server/admin/ui/panel/accounts.html
diff --git a/src/server/admin/ui/panel/entrycontrol.html b/src/server/admin/ui/panel/entrycontrol.html
new file mode 100644
index 0000000..e69de29
diff --git a/src/server/admin/ui/panel/events.html b/src/server/admin/ui/panel/events.html
new file mode 100644
index 0000000..e69de29
diff --git a/src/server/admin/ui/panel/financial.html b/src/server/admin/ui/panel/financial.html
new file mode 100644
index 0000000..e69de29
diff --git a/src/server/admin/ui/panel/home.html b/src/server/admin/ui/panel/home.html
new file mode 100644
index 0000000..9f69a84
--- /dev/null
+++ b/src/server/admin/ui/panel/home.html
@@ -0,0 +1,3 @@
+<div>
+    Hello World!
+</div>
\ No newline at end of file
diff --git a/src/server/admin/ui/panel/landingpage.html b/src/server/admin/ui/panel/landingpage.html
new file mode 100644
index 0000000..e69de29
diff --git a/src/server/admin/ui/panel/otherpages.html b/src/server/admin/ui/panel/otherpages.html
new file mode 100644
index 0000000..e69de29
diff --git a/src/server/admin/ui/panel/pages.html b/src/server/admin/ui/panel/pages.html
new file mode 100644
index 0000000..e69de29
diff --git a/src/server/admin/ui/panel/printtickets.html b/src/server/admin/ui/panel/printtickets.html
new file mode 100644
index 0000000..e69de29
diff --git a/src/server/admin/ui/panel/settings.html b/src/server/admin/ui/panel/settings.html
new file mode 100644
index 0000000..e69de29
diff --git a/src/server/admin/ui/panel/tos.html b/src/server/admin/ui/panel/tos.html
new file mode 100644
index 0000000..e69de29
diff --git a/src/server/admin/ui/setup.html b/src/server/admin/ui/setup.html
index 93ef562..aac1f01 100644
--- a/src/server/admin/ui/setup.html
+++ b/src/server/admin/ui/setup.html
@@ -107,7 +107,6 @@
                     <button class="button" style="margin-bottom: 1.5%; margin-top: 2%;">Preview</button>
                     <button class="button" style="margin-bottom: 3%;">Continue</button>
                 </div>
-
             </div>
         </div>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
diff --git a/src/server/app.js b/src/server/app.js
index 63fee43..9582450 100644
--- a/src/server/app.js
+++ b/src/server/app.js
@@ -16,12 +16,13 @@ const bodyParser = require( 'body-parser' );
 const cookieParser = require( 'cookie-parser' );
 const favicon = require( 'serve-favicon' );
 const http = require( 'http' );
+const serveStatic = require( 'serve-static' );
 
 // const env = process.env.PROD || false;
 
 const root = process.env.ROOT || '/order';
 
-const settings = fs.readFileSync( path.join( __dirname + '/config.json' ) );
+const settings = JSON.parse( fs.readFileSync( path.join( __dirname + '/config.json' ) ) );
 
 
 // initialise express with middlewares
@@ -35,6 +36,7 @@ app.use( bodyParser.urlencoded( { extended: false } ) );
 app.use( bodyParser.json() );
 app.use( cookieParser() );
 app.use( favicon( path.join( __dirname + '/ui/assets/logo.png' ) ) );
+app.use( serveStatic( __dirname + '/admin/ui/modules' ) );
 
 require( './admin/routes.js' )( app, settings ); // admin route
 
diff --git a/src/server/config.json b/src/server/config.json
index baf095c..bc8c0b4 100644
--- a/src/server/config.json
+++ b/src/server/config.json
@@ -1,3 +1,3 @@
 {
-    "init":false
+    "init":true
 }
\ No newline at end of file
diff --git a/src/server/package-lock.json b/src/server/package-lock.json
index 7657d14..376c212 100644
--- a/src/server/package-lock.json
+++ b/src/server/package-lock.json
@@ -14,7 +14,8 @@
         "cookie-parser": "^1.4.6",
         "express": "^4.18.2",
         "express-session": "^1.17.3",
-        "serve-favicon": "^2.5.0"
+        "serve-favicon": "^2.5.0",
+        "serve-static": "^1.15.0"
       },
       "devDependencies": {
         "acorn": "^8.8.2",
diff --git a/src/server/package.json b/src/server/package.json
index 2e2b078..d86eacf 100644
--- a/src/server/package.json
+++ b/src/server/package.json
@@ -46,7 +46,8 @@
     "cookie-parser": "^1.4.6",
     "express": "^4.18.2",
     "express-session": "^1.17.3",
-    "serve-favicon": "^2.5.0"
+    "serve-favicon": "^2.5.0",
+    "serve-static": "^1.15.0"
   },
   "scripts": {
     "test": "test.js"
diff --git a/website/src/how-it-works.md b/website/src/how-it-works.md
index 1030a1a..1fa7f46 100644
--- a/website/src/how-it-works.md
+++ b/website/src/how-it-works.md
@@ -1,2 +1,2 @@
 # How it works
-This page gives you a somewhat detailed overview on how the system operates. Note that this page is not made with user-legibility in mind, as this page is oriented to give possible contributors an introduction to the project to help them getting started.
\ No newline at end of file
+This page gives you a somewhat detailed overview on how the system operates. Note that this page is not made with user-legibility in mind, as this page is oriented to give possible contributors an introduction to the project to help them getting started. Therefore we expect you to have quite decent understanding of the underlying programming languages and concepts.
\ No newline at end of file
diff --git a/website/src/setup/setup.md b/website/src/setup/setup.md
new file mode 100644
index 0000000..aed2e69
--- /dev/null
+++ b/website/src/setup/setup.md
@@ -0,0 +1,35 @@
+# Setup of myevent
+At this point we assume you've completed the initial install of myevent. If not, you may find a guide on how to do it [here](/setup/getting-started). Let's get started setting up your event management system!
+
+## Connecting to the server
+As discussed in the previous part where we installed the system, you can connect to your server simply by opening a web browser and typing your domain name into the address field. After that you should be greeted by the myevent post-install landing page. Please click onto the button saying 'To the admin panel' and log in with the following credentials:
+
+Username: setup
+
+Password: myevent-setup
+
+*Note: This is only available during the setup process of myevent and will afterwards be deactivated to ensure safety of the system.*
+
+## Setting up the root account
+This is the most powerful account in this system. From it you can control EVERY aspect of your system. 
+
+**Remark: You may (and definitely should) add other accounts with less privileges after completing setup and only use the root account when it is actually necessary**
+
+Please choose an email address to which you want to link the root account. Two-Factor-Authentication is ALWAYS required when logging into an account that has root privileges to ensure a higher degree of security, so please ensure you have access to that email address at all times.
+
+When choosing a password, please ensure it meets the minimum requirements of the system or let the system generate one for you by clicking the 'generate password' button, which will generate a password that fulfills all requirements and exceeds the minimum requirements for password length. In the table below, you may see all the password requirements:
+
+Factor              | Requirement
+--------------------|--------------------------------------------------
+Length              | At least 15 characters
+Special characters  | At least 2 required
+Numbers             | At least 2 required
+Upper / Lower case  | At least 2 upper & 2 lower case letters required
+
+Please avoid using easy to guess combinations like names & birth dates of you or your relatives, zip codes & cities and obvious words like 'password', 'myevent', 'admin', 'root' and your organisation / event's name.
+
+## Page setup
+After having set up the root account and confirmed the email address, it is now time to set the name of the webpage. For this, you'll need to enter your organisation's name and choose the offered languages. Note that for every language you select, you need to add a promotional text if you choose to add a homepage. If you selected a homepage, you have to insert a promotional text and you have to select a homepage-template from one that is available [here](/homepage/templates). You also have to upload some images at this stage.
+
+## Payment methods
+Now it is time to set up some payment methods. You may find advantages / disadvantages of each payment gateway [here](/payments). It is advised to only choose one payment gateway which provides lots of different payment options, but cost of usage can also be a factor to consider. You may add more payment options by downloading a plugin through the plugin installer in the admin panel.
\ No newline at end of file