diff --git a/api/submitSensorDataExample.json b/api/submitSensorDataExample.json
old mode 100644
new mode 100755
diff --git a/css/blueweather.css b/css/blueweather.css
new file mode 100644
index 0000000..a1b2886
--- /dev/null
+++ b/css/blueweather.css
@@ -0,0 +1,106 @@
+/*
+ * 
+ */
+
+ .opacity-animated {
+    -webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
+    transition: opacity 1s;
+    -webkit-transition: padding-top 1s; /* For Safari 3.1 to 6.0 */
+    transform: scale(1);
+    transition: 1s all ease;
+  }
+  
+  .flexFont {
+    height:100%;
+    width:100%;
+  }
+
+/*
+  * Login modal
+  */
+  .bd-placeholder-img {
+    font-size: 1.125rem;
+    text-anchor: middle;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+@media (min-width: 768px) {
+    .bd-placeholder-img-lg {
+        font-size: 3.5rem;
+    }
+}
+
+.modal-login {
+    color: #636363;
+    width: 350px;
+}
+
+.modal-login .modal-content {
+    padding: 20px;
+    border-radius: 5px;
+    border: none;
+}
+
+.modal-login .modal-header {
+    border-bottom: none;
+    position: relative;
+    justify-content: center;
+}
+
+.modal-login h4 {
+    text-align: center;
+    font-size: 26px;
+}
+
+.modal-login .form-group {
+    position: relative;
+}
+
+.modal-login i {
+    position: absolute;
+    left: 13px;
+    top: 11px;
+    font-size: 18px;
+}
+
+.modal-login .form-control,
+.modal-login .btn {
+    min-height: 40px;
+    border-radius: 3px;
+    transition: all 0.5s;
+    border: 1px solid #ced4da;
+    border-width: 1px;
+}
+
+.modal-login .close {
+    position: absolute;
+    top: -5px;
+    right: -5px;
+}
+
+.modal-login .forgot-link {
+    color: #12b5e5;
+    float: right;
+}
+
+.modal-login .modal-footer {
+    color: #999;
+    border: none;
+    text-align: center;
+    border-radius: 5px;
+    font-size: 13px;
+    margin-top: -20px;
+    justify-content: center;
+}
+
+.modal-login .modal-footer a {
+    color: #12b5e5;
+}
+
+.trigger-btn {
+    display: inline-block;
+    margin: 100px auto;
+}
\ No newline at end of file
diff --git a/css/dashboard.css b/css/dashboard.css
index 06c0db8..9f8adb7 100755
--- a/css/dashboard.css
+++ b/css/dashboard.css
@@ -81,8 +81,6 @@ body {
 
 .navbar .form-control {
   padding: .75rem 1rem;
-  border-width: 0;
-  border-radius: 0;
 }
 
 .form-control-dark {
@@ -109,22 +107,4 @@ body {
   .bd-placeholder-img-lg {
     font-size: 3.5rem;
   }
-}
-
-.dropdown-toggle::after {
-  display:none;
-}
-
-/*
- * 
- */
-
-.opacity-animated {
-  -webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
-  transition: opacity 1s;
-}
-
-.flexFont {
-  height:100%;
-  width:100%;
 }
\ No newline at end of file
diff --git a/css/font-awesome.min.css b/css/font-awesome.min.css
old mode 100644
new mode 100755
diff --git a/css/index.css b/css/index.css
index 76d47f8..df92462 100755
--- a/css/index.css
+++ b/css/index.css
@@ -2,15 +2,105 @@
  * 
  */
 
- .opacity-animated {
-    -webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
-    transition: opacity 1s;
-    -webkit-transition: padding-top 1s; /* For Safari 3.1 to 6.0 */
-    transform: scale(1);
-    transition: 1s all ease;
+  .bd-placeholder-img {
+    font-size: 1.125rem;
+    text-anchor: middle;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
   }
+
+  @media (min-width: 768px) {
+    .bd-placeholder-img-lg {
+      font-size: 3.5rem;
+    }
+  }
+
+  /*
+   * Offcanvas
+   */
+
+  html,
+body {
+  overflow-x: hidden; /* Prevent scroll on narrow devices */
+}
+
+body {
+  padding-top: 56px;
   
-  .flexFont {
-    height:100%;
-    width:100%;
-  }
\ No newline at end of file
+}
+
+@media (max-width: 991.98px) {
+  .offcanvas-collapse {
+    position: fixed;
+    top: 56px; /* Height of navbar */
+    bottom: 0;
+    left: 100%;
+    width: 100%;
+    padding-right: 1rem;
+    padding-left: 1rem;
+    overflow-y: auto;
+    visibility: hidden;
+    background-color: #343a40;
+    transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
+    transition: transform .3s ease-in-out, visibility .3s ease-in-out;
+    transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
+  }
+  .offcanvas-collapse.open {
+    visibility: visible;
+    -webkit-transform: translateX(-100%);
+    transform: translateX(-100%);
+  }
+}
+
+.nav-scroller {
+  position: relative;
+  z-index: 2;
+  height: 2.75rem;
+  overflow-y: hidden;
+}
+
+.nav-scroller .nav {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding-bottom: 1rem;
+  margin-top: -1px;
+  overflow-x: auto;
+  color: rgba(255, 255, 255, .75);
+  text-align: center;
+  white-space: nowrap;
+  -webkit-overflow-scrolling: touch;
+}
+
+.nav-underline .nav-link {
+  padding-top: .75rem;
+  padding-bottom: .75rem;
+  font-size: .875rem;
+  color: #6c757d;
+}
+
+.nav-underline .nav-link:hover {
+  color: #007bff;
+}
+
+.nav-underline .active {
+  font-weight: 500;
+  color: #343a40;
+}
+
+.text-white-50 { color: rgba(255, 255, 255, .5); }
+
+.bg-purple { background-color: #6f42c1; }
+.bg-blue { background-color: #007bff; }
+.bg-ff { background-color: #e6e4e4; }
+
+.lh-100 { line-height: 1; }
+.lh-125 { line-height: 1.25; }
+.lh-150 { line-height: 1.5; }
+
+.rounded {
+  border-radius: .7rem !important;
+ }  
diff --git a/css/offcanvas.css b/css/offcanvas.css
deleted file mode 100755
index 3a76bbc..0000000
--- a/css/offcanvas.css
+++ /dev/null
@@ -1,84 +0,0 @@
-html,
-body {
-  overflow-x: hidden; /* Prevent scroll on narrow devices */
-}
-
-body {
-  padding-top: 56px;
-  
-}
-
-@media (max-width: 991.98px) {
-  .offcanvas-collapse {
-    position: fixed;
-    top: 56px; /* Height of navbar */
-    bottom: 0;
-    left: 100%;
-    width: 100%;
-    padding-right: 1rem;
-    padding-left: 1rem;
-    overflow-y: auto;
-    visibility: hidden;
-    background-color: #343a40;
-    transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
-    transition: transform .3s ease-in-out, visibility .3s ease-in-out;
-    transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
-  }
-  .offcanvas-collapse.open {
-    visibility: visible;
-    -webkit-transform: translateX(-100%);
-    transform: translateX(-100%);
-  }
-}
-
-.nav-scroller {
-  position: relative;
-  z-index: 2;
-  height: 2.75rem;
-  overflow-y: hidden;
-}
-
-.nav-scroller .nav {
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  padding-bottom: 1rem;
-  margin-top: -1px;
-  overflow-x: auto;
-  color: rgba(255, 255, 255, .75);
-  text-align: center;
-  white-space: nowrap;
-  -webkit-overflow-scrolling: touch;
-}
-
-.nav-underline .nav-link {
-  padding-top: .75rem;
-  padding-bottom: .75rem;
-  font-size: .875rem;
-  color: #6c757d;
-}
-
-.nav-underline .nav-link:hover {
-  color: #007bff;
-}
-
-.nav-underline .active {
-  font-weight: 500;
-  color: #343a40;
-}
-
-.text-white-50 { color: rgba(255, 255, 255, .5); }
-
-.bg-purple { background-color: #6f42c1; }
-.bg-blue { background-color: #007bff; }
-.bg-ff { background-color: #e6e4e4; }
-
-.lh-100 { line-height: 1; }
-.lh-125 { line-height: 1.25; }
-.lh-150 { line-height: 1.5; }
-
-.rounded {
-  border-radius: .7rem !important;
- }  
-}
\ No newline at end of file
diff --git a/css/signin.css b/css/signin.css
deleted file mode 100755
index fc1b18b..0000000
--- a/css/signin.css
+++ /dev/null
@@ -1,44 +0,0 @@
-html,
-body {
-  height: 100%;
-}
-
-body {
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-align: center;
-  align-items: center;
-  padding-top: 40px;
-  padding-bottom: 40px;
-  background-color: #f5f5f5;
-}
-
-.form-signin {
-  width: 100%;
-  max-width: 330px;
-  padding: 15px;
-  margin: auto;
-}
-.form-signin .checkbox {
-  font-weight: 400;
-}
-.form-signin .form-control {
-  position: relative;
-  box-sizing: border-box;
-  height: auto;
-  padding: 10px;
-  font-size: 16px;
-}
-.form-signin .form-control:focus {
-  z-index: 2;
-}
-.form-signin input[type="email"] {
-  margin-bottom: -1px;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-}
-.form-signin input[type="password"] {
-  margin-bottom: 10px;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
\ No newline at end of file
diff --git a/dashboard.html b/dashboard.html
index 0c07a39..580e482 100755
--- a/dashboard.html
+++ b/dashboard.html
@@ -13,14 +13,16 @@
   <link href="css/bootstrap.min.css" rel="stylesheet">
   <link href="css/font-awesome.min.css" rel="stylesheet">
 
-  <!-- Custom styles for this template -->
-  <link href="css/bootstrap.min.css" rel="stylesheet">
+    <!-- gobal custom styles -->
+    <link href="css/blueweather.css" rel="stylesheet">
+
+  <!-- Custom styles for this site -->
   <link href="css/dashboard.css" rel="stylesheet">
 
 </head>
 
 <body style="height: 100%;">
-  <nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow">
+  <nav class="navbar nav-pills navbar-expand-lg navbar-dark bg-dark shadow">
     <!-- left part of toolbar -->
     <a class="navbar-brand" href="index.html">BlueWeather</a>
 
@@ -29,36 +31,9 @@
       <span class="navbar-toggler-icon"></span>
     </button>
 
-    <div class="collapse navbar-collapse" id="navbarSupportedContent">
-      <ul class="navbar-nav ml-auto">
-        <li class="nav-item dropdown no-arrow">
-          <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown"
-            aria-haspopup="true" aria-expanded="false" style="padding: 0;">
-            <img class="img-profile rounded-circle" height="30" src="https://source.unsplash.com/QAB-WJcbgJk/60x60">
-          </a>
-          <!-- Dropdown - User Information -->
-          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
-            <a class="dropdown-item" href="#">
-              <span data-feather="user"></span>
-              Profile
-            </a>
-            <a class="dropdown-item" href="#">
-              <span data-feather="settings"></span>
-              Settings
-            </a>
-            <a class="dropdown-item" href="#">
-              <i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
-              Activity Log
-            </a>
-            <div class="dropdown-divider"></div>
-            <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
-                <span data-feather="log-out"></span>
-              Logout
-            </a>
-          </div>
-        </li>
-      </ul>
-    </div>
+
+    <ul id="profileContainer" class="navbar-nav ml-auto">
+    </ul>
   </nav>
 
   <div class="container-fluid" style="height: 100%">
@@ -81,7 +56,6 @@
               <span data-feather="plus-circle"></span>
             </a>
           </h6>
-
           <ul class="nav flex-column mb-2" id="sensorsList">
             <li class="nav-item">
               <a class="nav-link" href="#">
diff --git a/img/user.png b/img/user.png
new file mode 100755
index 0000000..fb9e33f
Binary files /dev/null and b/img/user.png differ
diff --git a/index.html b/index.html
index e78f470..d15e3f7 100755
--- a/index.html
+++ b/index.html
@@ -8,47 +8,29 @@
   <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
   <link rel="icon" href="img/favicon.ico" type="image/x-icon">
 
-  <!-- Bootstrap CSS -->
+  <!-- External styles -->
   <link rel="stylesheet" href="css/bootstrap.min.css" crossorigin="anonymous">
 
-  <!-- Custom styles for this template -->
+  <!-- gobal custom styles -->
+  <link href="css/blueweather.css" rel="stylesheet">
+
+  <!-- Custom styles for this site -->
   <link href="css/index.css" rel="stylesheet">
 
-  <style>
-    .bd-placeholder-img {
-      font-size: 1.125rem;
-      text-anchor: middle;
-      -webkit-user-select: none;
-      -moz-user-select: none;
-      -ms-user-select: none;
-      user-select: none;
-    }
-
-    @media (min-width: 768px) {
-      .bd-placeholder-img-lg {
-        font-size: 3.5rem;
-      }
-    }
-  </style>
-  <!-- Custom styles for this template -->
-  <link href="css/offcanvas.css" rel="stylesheet">
-  <link href="css/dashboard.css" rel="stylesheet">
-
   <title>BlueWeather</title>
 </head>
 
 <body class="bg-ff" style="height: 100%;padding-top: 0;">
-  <nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow">
+  <nav class="navbar nav-pills navbar-expand-lg navbar-dark bg-dark shadow">
     <a class="navbar-brand" href="#">BlueWeather</a>
 
-    <ul class="navbar-nav px-3">
-      <li class="nav-item text-nowrap">
-        <a class="nav-link" href="login.html">Sign in</a>
-      </li>
+    <ul id="profileContainer" class="navbar-nav ml-auto">
     </ul>
   </nav>
 
+  <!-- Locations list -->
   <main role="main" class="container" style="padding-top: 30px;">
+
     <div class="d-flex align-items-center p-3 my-3 text-white-50 bg-blue rounded shadow-sm">
       <img class="mr-3" src="img/icon.png" alt="" width="48" height="48">
       <div class="lh-100">
@@ -72,9 +54,18 @@
           </div>
 
         </div>
+      </div>
+    </div>
+
   </main>
+  <!-- js -->
+  <!-- External libs -->
   <script src="js/jquery.min.js"></script>
-  <script src="js/bootstrap.bundle.min.js"></script>
+  <script src="js/popper.min.js"></script>
+  <script src="js/feather.js"></script>
+  <script src="js/bootstrap.min.js"></script>
+
+  <!-- Internal code -->
   <script src="js/blueweather.js"></script>
   <script src="js/index.js"></script>
 </body>
diff --git a/js/blueweather.js b/js/blueweather.js
index 19f7fb7..0d30101 100755
--- a/js/blueweather.js
+++ b/js/blueweather.js
@@ -3,13 +3,17 @@ class BlueWeather {
     constructor() {
         // cunstruct xmlhttp
         this.xhttp = new XMLHttpRequest();
-        this.host =  window.location.href.substring(0, window.location.href.lastIndexOf("/"));
+        this.host =  "https://weather.itsblue.de"//window.location.href.substring(0, window.location.href.lastIndexOf("/"));
 
         this.log("init done", 2)
 
         this.session = {
             loggedIn: false,
-            token: ""
+            token: "",
+            user: {
+                realName: "Real Name",
+                username: "username"
+            }
         }
 
         this.restoreSession()
@@ -20,14 +24,15 @@ class BlueWeather {
     // ----------------------
 
     restoreSession() {
-        if(this.getCookie("session") !== "") {
+        if(this.getCookie("session") !== "" && this.getCookie("session") !== undefined) {
+            console.log("old session found: " + this.getCookie("session"), 3)
             // old session found
             this.session.loggedIn = true
             this.session.token = this.getCookie("session")
         }
     }
 
-    login(async, processingFunction, username, password) {
+    login(async, username, password, processingFunction) {
         this.xhttp.abort()
         var thisObject = this
 
@@ -39,14 +44,14 @@ class BlueWeather {
                         thisObject.log("login response was: " + this.responseText, 3)
                         var ret = JSON.parse(this.responseText)
                         if(ret && ret['status'] === 200) {
-                            this.session.token = ret["token"]
-                            this.session.loggedIn = true
+                            //this.session.token = ret["token"]
+                            //this.session.loggedIn = true
                             processingFunction(true)
                             return
                         }
                         else {
-                            this.session.token = ""
-                            this.session.loggedIn = false
+                            //this.session.token = ""
+                            //this.session.loggedIn = false
                         }
                     }
                     processingFunction(false)
@@ -129,6 +134,212 @@ class BlueWeather {
         this.xhttp.send()
     }
 
+    // ----------------------
+    // - template functions -
+    // ----------------------
+
+    loadProfileObject(parent) {
+        if(!parent) {
+            return false
+        }
+
+        var thisObject = this
+
+        var profileObject = document.createElement("li")
+        parent.appendChild(profileObject)
+        profileObject.classList.add("nav-item")
+
+        if(!this.session.loggedIn) {
+            this.log("not logged in", 3)
+
+            profileObject.classList.add("text-nowrap")
+
+            // create login button
+            var loginButton = document.createElement('button')
+            profileObject.appendChild(loginButton)
+            loginButton.type = "button"
+            loginButton.setAttribute("data-toggle", "modal")
+            loginButton.setAttribute("data-target", "#loginModal")
+            loginButton.classList.add("btn", "btn-outline-light")
+            loginButton.innerHTML = "Login"
+
+            // ------------
+            // create modal
+            var loginModal = document.createElement('div')
+            loginModal.id = "loginModal"
+            loginModal.setAttribute("tabindex", "-1")
+            loginModal.setAttribute("role", "dialog")
+            loginModal.setAttribute("aria-labelledby", "exampleModalLabel")
+            loginModal.setAttribute("aria-hidden", "true")
+            loginModal.classList.add("modal", "fade")
+
+            // create login form
+            var loginDiv = document.createElement("div")
+            loginModal.appendChild(loginDiv)
+            loginDiv.classList.add("modal-dialog", "modal-login")
+            loginDiv.setAttribute("role", "document")
+            // - modal content
+            var modalContent = document.createElement("div")
+            loginDiv.appendChild(modalContent)
+            modalContent.classList.add("modal-content")
+
+            // -- modal header
+            var modalHeader = document.createElement("div")
+            modalContent.appendChild(modalHeader)
+            modalHeader.classList.add("modal-header")
+            // --- close button
+            var modalCloseButton = document.createElement("button")
+            modalHeader.appendChild(modalCloseButton)
+            modalCloseButton.setAttribute("type", "button")
+            modalCloseButton.setAttribute("data-dismiss", "modal")
+            modalCloseButton.setAttribute("aria-label", "Close")
+            modalCloseButton.classList.add("close")
+            modalCloseButton.innerHTML = '<span aria-hidden="true">×</span>'
+
+            // -- modal body
+            var modalBody = document.createElement("div")
+            modalContent.appendChild(modalBody)
+            modalBody.classList.add("modal-body", "text-center")
+            // --- login form
+            var loginForm = document.createElement("form")
+            modalBody.appendChild(loginForm)
+            loginForm.classList.add("form-signin")
+            // ---- login form fieldset
+            var fieldset = document.createElement("fieldset")
+            loginForm.appendChild(fieldset)
+            // ----- blueweather icon
+            var loginFormIcon = document.createElement("img")
+            fieldset.appendChild(loginFormIcon)
+            loginFormIcon.width = "72"
+            loginFormIcon.height = "72"
+            loginFormIcon.src = "img/icon.png"
+            loginFormIcon.alt = ""
+            loginFormIcon.classList.add("mb-4")
+            // ----- 'Please sign in' text
+            var loginFormHeadline = document.createElement("h1")
+            fieldset.append(loginFormHeadline)
+            loginFormHeadline.classList.add("h3", "mb-3", "font-weight-normal")
+            loginFormHeadline.innerHTML = "Please sign in"
+            // ----- login failed alert
+            var alert = document.createElement("div")
+            fieldset.append(alert)
+            alert.id = "loginFormLoginFailedAlert"
+            alert.appear = function() {
+                alert.innerHTML = '<div class="alert alert-danger alert-dismissible fade show" role="alert">Invalid username or password<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>'
+            }
+            // ----- username input
+            var usernameInputGroup = document.createElement("div")
+            fieldset.appendChild(usernameInputGroup)
+            usernameInputGroup.classList.add("form-group", "input-group")
+            usernameInputGroup.innerHTML = '<div class="input-group-prepend"><div class="input-group-text"><span data-feather="user"></span></div></div><input type="text" class="form-control" id="loginFormUsernameInput" placeholder="Username"> </div>'
+            // ----- password input
+            var passwordInputGroup = document.createElement("div")
+            fieldset.appendChild(passwordInputGroup)
+            passwordInputGroup.classList.add("form-group", "input-group")
+            passwordInputGroup.innerHTML = '<div class="input-group-prepend"><div class="input-group-text"><span data-feather="lock"></span></div></div><input type="password" class="form-control" id="loginFormPasswordInput" placeholder="Password"> </div>'
+            // ----- 'remember me' checkbox
+            var rememberCheckboxContainer = document.createElement("div")
+            rememberCheckboxContainer.classList.add("checkbox", "mb-3")
+            rememberCheckboxContainer.innerHTML = '<label> <input id="loginFormRememberMeChekbox" type="checkbox"> Remember me </label>'
+            // ----- 'sign in' button
+            var signInButton = document.createElement("button")
+            modalBody.appendChild(signInButton)
+            signInButton.id = "loginFormSignInButton"
+            signInButton.type = "submit"
+            signInButton.classList.add("btn", "btn-lg", "btn-primary", "btn-block")
+            signInButton.innerHTML = "Sign in"
+            signInButton.setLoading = function() {
+                signInButton.disabled = true
+                signInButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Signing in...'
+            }
+            signInButton.setNormal = function() {
+                signInButton.disabled = false
+                signInButton.innerHTML = 'Sign in'
+            }
+            signInButton.onclick = function() {
+                signInButton.setLoading()
+                var username = document.getElementById("loginFormUsernameInput").value
+                var password = document.getElementById("loginFormPasswordInput").value
+                thisObject.login(true, username, password, function(loginSuccess){
+                    if(!loginSuccess){
+                        alert.appear()
+                    }
+                    signInButton.setNormal()
+                })
+            }
+            // ----------
+
+            parent.appendChild(loginModal)
+        }
+        else {
+            
+            this.log("logged in", 3)
+            profileObject.classList.add("dropdown")
+
+            // create profile picture button
+            var profileButton = document.createElement("a")
+            profileObject.appendChild(profileButton)
+            profileButton.id = "userDropdown"
+            profileButton.style = "padding: 0;"
+            profileButton.href = "#"
+            profileButton.setAttribute("role", "button")
+            profileButton.classList.add("nav-link", "dropdown-toggle")
+            profileButton.setAttribute("data-toggle", "dropdown")
+            profileButton.setAttribute("aria-haspopup", "true")
+            profileButton.setAttribute("aria-expanded", "false")
+
+            // create profile image inside button
+            var profileImage = document.createElement("img")
+            profileButton.appendChild(profileImage)
+            profileImage.height="30"
+            profileImage.src = "img/user.png"
+            profileImage.classList.add("img-profile", "rounded-circle")
+
+            // create dropdown menu
+            var profileDropdown = document.createElement("div")
+            profileObject.appendChild(profileDropdown)
+            profileDropdown.classList.add("dropdown-menu", "dropdown-menu-right")
+            profileDropdown.setAttribute("aria-labelledby", "userDropdown")
+
+            // fill the dropdown menu
+            function createDropdownMenuElement(icon, text) {
+                // create element
+                var elem = document.createElement("a")
+                elem.classList.add("dropdown-item")
+                elem.href = "#"
+                
+                // create icon
+                var iconSpan = document.createElement("span")
+                elem.appendChild(iconSpan)
+                iconSpan.setAttribute("data-feather", icon)
+
+                // create text
+                var text = document.createTextNode(text)
+                elem.appendChild(text)
+
+                return elem
+            }
+
+            function createDropdownSeparator() {
+                var sep = document.createElement("div")
+                sep.classList.add("dropdown-divider")
+                return sep
+            }
+            
+            var header = document.createElement("div")
+            header.classList.add("dropdown-item")
+            header.innerHTML = "<h6><b>" + this.session.user.realName + "</b></h6>@" + this.session.user.username
+            profileDropdown.appendChild(header)
+            profileDropdown.appendChild(createDropdownSeparator())
+            profileDropdown.appendChild(createDropdownMenuElement("settings", " Settings"))
+            profileDropdown.appendChild(createDropdownSeparator())
+            profileDropdown.appendChild(createDropdownMenuElement("log-out", " Log out"))
+
+        }
+
+        feather.replace()
+    }
+
     // --------------------
     // - helper functions -
     // --------------------
diff --git a/js/bootstrap.bundle.min.js b/js/bootstrap.min.js
old mode 100644
new mode 100755
similarity index 100%
rename from js/bootstrap.bundle.min.js
rename to js/bootstrap.min.js
diff --git a/js/dashboard.js b/js/dashboard.js
index cd32a12..c27cd0c 100755
--- a/js/dashboard.js
+++ b/js/dashboard.js
@@ -615,4 +615,5 @@ window.onresize = function (event) {
   flexFont();
 };
 feather.replace()
-dashboard = new BlueWeatherDashboard()
\ No newline at end of file
+dashboard = new BlueWeatherDashboard()
+dashboard.blueweather.loadProfileObject(document.getElementById("profileContainer"))
\ No newline at end of file
diff --git a/js/index.js b/js/index.js
index 2273449..dd7575d 100755
--- a/js/index.js
+++ b/js/index.js
@@ -54,5 +54,6 @@ class BlueWeatherIndex {
         })
     }
 }
-
-index = new BlueWeatherIndex()
\ No newline at end of file
+feather.replace()
+index = new BlueWeatherIndex()
+index.blueweather.loadProfileObject(document.getElementById("profileContainer"))
\ No newline at end of file
diff --git a/js/popper.min.js b/js/popper.min.js
old mode 100644
new mode 100755
diff --git a/login.html b/login.html
deleted file mode 100755
index 7370ad3..0000000
--- a/login.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<!doctype html>
-<html lang="en">
-
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="description" content="">
-    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
-    <meta name="generator" content="Jekyll v3.8.5">
-    <title>BlueWeather login</title>
-
-    <link rel="canonical" href="https://getbootstrap.com/docs/4.3/examples/sign-in/">
-
-    <!-- Bootstrap core CSS -->
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
-        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-
-
-    <style>
-        .bd-placeholder-img {
-            font-size: 1.125rem;
-            text-anchor: middle;
-            -webkit-user-select: none;
-            -moz-user-select: none;
-            -ms-user-select: none;
-            user-select: none;
-        }
-
-        @media (min-width: 768px) {
-            .bd-placeholder-img-lg {
-                font-size: 3.5rem;
-            }
-        }
-    </style>
-    <!-- Custom styles for this template -->
-    <link href="css/signin.css" rel="stylesheet">
-</head>
-
-<body class="text-center">
-    <form class="form-signin">
-        <img class="mb-4" src="img/icon-cloud.jpg" alt="" width="120" height="120">
-        <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
-        <label for="inputEmail" class="sr-only">Email address</label>
-        <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
-        <label for="inputPassword" class="sr-only">Password</label>
-        <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
-        <div class="checkbox mb-3">
-            <label>
-                <input type="checkbox" value="remember-me"> Remember me
-            </label>
-        </div>
-        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
-        
-      <!--  <p class="mt-5 mb-3 text-muted">&copy; 2017-2019</p> -->
-    </form>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/loginmodal.html b/loginmodal.html
deleted file mode 100755
index d14d918..0000000
--- a/loginmodal.html
+++ /dev/null
@@ -1,132 +0,0 @@
-
-<!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">
-<title>Bootstrap Elegant Modal Login Modal Form with Icons</title>
-<link href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round" rel="stylesheet">
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-<style type="text/css">
-    body {
-		font-family: 'Varela Round', sans-serif;
-	}
-	.modal-login {
-		color: #636363;
-		width: 350px;
-	}
-	.modal-login .modal-content {
-		padding: 20px;
-		border-radius: 5px;
-		border: none;
-	}
-	.modal-login .modal-header {
-		border-bottom: none;
-		position: relative;
-		justify-content: center;
-	}
-	.modal-login h4 {
-		text-align: center;
-		font-size: 26px;
-	}
-	.modal-login  .form-group {
-		position: relative;
-	}
-	.modal-login i {
-		position: absolute;
-		left: 13px;
-		top: 11px;
-		font-size: 18px;
-	}
-	.modal-login .form-control {
-		padding-left: 40px;
-	}
-	.modal-login .form-control:focus {
-		border-color: #12b5e5;
-	}
-	.modal-login .form-control, .modal-login .btn {
-		min-height: 40px;
-		border-radius: 3px; 
-        transition: all 0.5s;
-	}
-	.modal-login .close {
-        position: absolute;
-		top: -5px;
-		right: -5px;
-	}
-    .modal-login input[type="checkbox"] {
-        margin-top: 1px;
-    }
-    .modal-login .forgot-link {
-        color: #12b5e5;
-        float: right;
-    }
-	.modal-login .btn {
-		background: #12b5e5;
-		border: none;
-		line-height: normal;
-	}
-	.modal-login .btn:hover, .modal-login .btn:focus {
-		background: #10a3cd;
-	}
-	.modal-login .modal-footer {
-		color: #999;
-		border: none;
-		text-align: center;
-		border-radius: 5px;
-		font-size: 13px;
-        margin-top: -20px;
-		justify-content: center;
-	}
-	.modal-login .modal-footer a {
-		color: #12b5e5;
-	}
-	.trigger-btn {
-		display: inline-block;
-		margin: 100px auto;
-	}
-</style>
-</head>
-<body>
-<div class="text-center">
-	<!-- Button HTML (to Trigger Modal) -->
-	<a href="#myModal" class="trigger-btn" data-toggle="modal">Click to Open Login Modal</a>
-</div>
-
-<!-- Modal HTML -->
-<div id="myModal" class="modal fade">
-	<div class="modal-dialog modal-login">
-		<div class="modal-content">
-			<div class="modal-header">				
-				<h4 class="modal-title">Sign in</h4>
-				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-			</div>
-			<div class="modal-body">
-				<form action="/examples/actions/confirmation.php" method="post">
-					<div class="form-group">
-						<i class="fa fa-user"></i>
-						<input type="text" class="form-control" placeholder="Username" required="required">
-					</div>
-					<div class="form-group">
-						<i class="fa fa-lock"></i>
-						<input type="password" class="form-control" placeholder="Password" required="required">					
-					</div>
-                    <div class="form-group small clearfix">
-                        <label class="checkbox-inline"><input type="checkbox"> Remember me</label>
-                        <a href="#" class="forgot-link">Forgot Password?</a>
-					</div>
-					<div class="form-group">
-						<input type="submit" class="btn btn-primary btn-block btn-lg" value="Sign in">
-					</div>
-				</form>
-			</div>
-			<div class="modal-footer">Don't have an account? <a href="">Sign up</a></div>
-		</div>
-	</div>
-</div>     
-</body>
-</html>                                		
\ No newline at end of file
diff --git a/loginmodal2.html b/loginmodal2.html
deleted file mode 100644
index 9e4dcb0..0000000
--- a/loginmodal2.html
+++ /dev/null
@@ -1,151 +0,0 @@
-<html>
-
-<head>
-    <link href="css/bootstrap.min.css" rel="stylesheet">
-    <script src="js/jquery.min.js" type="text/javascript"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
-        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
-        crossorigin="anonymous"></script>
-
-    <style>
-        .bd-placeholder-img {
-            font-size: 1.125rem;
-            text-anchor: middle;
-            -webkit-user-select: none;
-            -moz-user-select: none;
-            -ms-user-select: none;
-            user-select: none;
-        }
-
-        @media (min-width: 768px) {
-            .bd-placeholder-img-lg {
-                font-size: 3.5rem;
-            }
-        }
-
-        .modal-login {
-            color: #636363;
-            width: 350px;
-        }
-
-        .modal-login .modal-content {
-            padding: 20px;
-            border-radius: 5px;
-            border: none;
-        }
-
-        .modal-login .modal-header {
-            border-bottom: none;
-            position: relative;
-            justify-content: center;
-        }
-
-        .modal-login h4 {
-            text-align: center;
-            font-size: 26px;
-        }
-
-        .modal-login .form-group {
-            position: relative;
-        }
-
-        .modal-login i {
-            position: absolute;
-            left: 13px;
-            top: 11px;
-            font-size: 18px;
-        }
-
-        .modal-login .form-control,
-        .modal-login .btn {
-            min-height: 40px;
-            border-radius: 3px;
-            transition: all 0.5s;
-        }
-
-        .modal-login .close {
-            position: absolute;
-            top: -5px;
-            right: -5px;
-        }
-
-        .modal-login .forgot-link {
-            color: #12b5e5;
-            float: right;
-        }
-
-        .modal-login .modal-footer {
-            color: #999;
-            border: none;
-            text-align: center;
-            border-radius: 5px;
-            font-size: 13px;
-            margin-top: -20px;
-            justify-content: center;
-        }
-
-        .modal-login .modal-footer a {
-            color: #12b5e5;
-        }
-
-        .trigger-btn {
-            display: inline-block;
-            margin: 100px auto;
-        }
-    </style>
-</head>
-
-<body>
-    <!-- Button trigger modal -->
-    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
-        Launch demo modal
-    </button>
-
-    <!-- Modal -->
-    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
-        aria-hidden="true">
-        <div class="modal-dialog modal-login" role="document">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
-                </div>
-                <div class="modal-body text-center">
-                    <form class="form-signin">
-                        <fieldset>
-                            <img class="mb-4" src="img/icon.png" alt="" width="72" height="72">
-                            <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
-                            <div class="form-group input-group">
-                                <div class="input-group-prepend">
-                                    <div class="input-group-text"><span data-feather="user"></span></div>
-                                </div>
-                                <input type="text" class="form-control" id="inlineFormInputGroupUsername"
-                                    placeholder="Username">
-                            </div>
-                            <div class="form-group input-group">
-                                <div class="input-group-prepend">
-                                    <div class="input-group-text"><span data-feather="lock"></span></div>
-                                </div>
-                                <input type="password" class="form-control" id="inlineFormInputGroupUsername"
-                                    placeholder="Password">
-                            </div>
-                            <div class="checkbox mb-3">
-                                <label>
-                                    <input type="checkbox" value="remember-me"> Remember me
-                                </label>
-                            </div>
-                            <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
-                        </fieldset>
-                    </form>
-                </div>
-            </div>
-        </div>
-    </div>
-    <script src="js/feather.js"></script>
-    <script>
-        feather.replace()
-    </script>
-</body>
-
-</html>
\ No newline at end of file