diff --git a/assets/css/custom.css b/assets/css/custom.css
index 65c5a94..8d993fd 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -1,3 +1,8 @@
+/* THEME STYLE */
+pre{background:#f7f7f9}iframe{overflow:hidden;border:none}@media (min-width: 768px){body>.navbar-transparent{box-shadow:none}body>.navbar-transparent .navbar-nav>.open>a{box-shadow:none}}#home,#help{font-size:.9rem}#home .navbar,#help .navbar{background:#349aed;background:linear-gradient(145deg, #349aed 50%, #34d8ed 100%);transition:box-shadow 200ms ease-in}#home .navbar-transparent,#help .navbar-transparent{background:none !important;box-shadow:none}#home .navbar-brand .nav-link,#help .navbar-brand .nav-link{display:inline-block;margin-right:-30px}#home .nav-link,#help .nav-link{text-transform:uppercase;font-weight:500;color:#fff}#home{padding-top:0}#home .btn{padding:.6rem .55rem .5rem;box-shadow:none;font-size:.7rem;font-weight:500}.bs-docs-section{margin-top:4em}.bs-docs-section .page-header h1{padding:2rem 0;font-size:3rem}.dropdown-menu.show[aria-labelledby="themes"]{display:-ms-flexbox;display:flex;width:420px;-ms-flex-wrap:wrap;flex-wrap:wrap}.dropdown-menu.show[aria-labelledby="themes"] .dropdown-item{width:33.333%}.dropdown-menu.show[aria-labelledby="themes"] .dropdown-item:first-child{width:100%}.bs-component{position:relative}.bs-component+.bs-component{margin-top:1rem}.bs-component .card{margin-bottom:1rem}.bs-component .modal{position:relative;top:auto;right:auto;left:auto;bottom:auto;z-index:1;display:block}.bs-component .modal-dialog{width:90%}.bs-component .popover{position:relative;display:inline-block;width:220px;margin:20px}.source-button{display:none;position:absolute;top:0;right:0;z-index:100;font-weight:700}.source-button:hover{cursor:pointer}.bs-component:hover .source-button{display:block}#source-modal pre{max-height:calc(100vh - 11rem);background-color:rgba(0,0,0,0.7);color:rgba(255,255,255,0.7)}.nav-tabs{margin-bottom:15px}.progress{margin-bottom:10px}#footer{margin:5em 0}#footer li{float:left;margin-right:1.5em;margin-bottom:1.5em}#footer p{clear:left;margin-bottom:0}.splash{padding:12em 0 6em;background:#349aed;background:linear-gradient(145deg, #349aed 50%, #34d8ed 100%);color:#fff;text-align:center}.splash .logo{width:160px}.splash h1{font-size:3em;color:#fff}.splash #social{margin:2em 0 3em}.splash .alert{margin:2em 0;border:none}.splash .sponsor a{color:#fff}.section-tout{padding:6em 0 1em;border-bottom:1px solid rgba(0,0,0,0.05);background-color:#eaf1f1;text-align:center}.section-tout .icon{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;width:80px;height:80px;margin:0 auto 1rem;background:#349aed;background:linear-gradient(145deg, #3b9cea 50%, #3db8eb 100%);border-radius:50%;font-size:2rem;color:rgba(0,0,0,0.5)}.section-tout p{margin-bottom:5em}.section-preview{padding:4em 0}.section-preview .preview{margin-bottom:4em;background-color:#eaf1f1}.section-preview .preview .image{position:relative}.section-preview .preview .image::before{box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1);position:absolute;top:0;left:0;width:100%;height:100%;content:"";pointer-events:none}.section-preview .preview .options{padding:2em;border:1px solid rgba(0,0,0,0.05);border-top:none;text-align:center}.section-preview .preview .options p{margin-bottom:2em}.section-preview .dropdown-menu{text-align:left}.section-preview .lead{margin-bottom:2em}.sponsor #carbonads{max-width:240px;margin:0 auto}.sponsor .carbon-text{display:block;margin-top:1em;font-size:12px}.sponsor .carbon-poweredby{float:right;margin-top:1em;font-size:10px}@media (max-width: 767px){.splash{padding-top:8em}.splash .logo{width:100px}.splash h1{font-size:2em}#banner{margin-bottom:2em;text-align:center}}
+
+/* CUSTOM STYLE */
+
 /* Start collapsable table
 -------------------------------------------------- */
 
diff --git a/assets/tpl/admin_create_clients.html b/assets/tpl/admin_create_clients.html
index 63585c9..81e5987 100644
--- a/assets/tpl/admin_create_clients.html
+++ b/assets/tpl/admin_create_clients.html
@@ -14,9 +14,9 @@
     <link rel="stylesheet" href="/css/custom.css">
 </head>
 
-<body id="page-top">
+<body id="page-top" class="d-flex flex-column min-vh-100">
     {{template "prt_nav.html" .}}
-    <div class="container">
+    <div class="container mt-5">
         <h1>Create new clients</h1>
         <h2>Enter valid LDAP user email addresses to quickly create new accounts.</h2>
         {{if $.Alerts.HasAlert}}
diff --git a/assets/tpl/admin_edit_client.html b/assets/tpl/admin_edit_client.html
index 8fdfebd..b245304 100644
--- a/assets/tpl/admin_edit_client.html
+++ b/assets/tpl/admin_edit_client.html
@@ -11,9 +11,9 @@
     <link rel="stylesheet" href="/css/custom.css">
 </head>
 
-<body id="page-top">
+<body id="page-top" class="d-flex flex-column min-vh-100">
     {{template "prt_nav.html" .}}
-    <div class="container">
+    <div class="container mt-5">
         {{if .Peer.IsNew}}
             <h1>Create a new client</h1>
         {{else}}
@@ -69,15 +69,15 @@
 
             <div class="form-row">
                 <div class="form-group col-md-12">
-                    <div class="form-check form-check-inline">
-                    <input class="form-check-input" name="isdisabled" type="checkbox" value="true" id="inputDisabled" {{if .Peer.DeactivatedAt}}checked{{end}}>
-                    <label class="form-check-label" for="inputDisabled">
-                        Disabled
-                    </label>
+                    <div class="custom-control custom-switch">
+                        <input class="custom-control-input" name="isdisabled" type="checkbox" value="true" id="inputDisabled" {{if .Peer.DeactivatedAt}}checked{{end}}>
+                        <label class="custom-control-label" for="inputDisabled">
+                            Disabled
+                        </label>
                     </div>
-                    <div class="form-check form-check-inline">
-                        <input class="form-check-input" name="ignorekeepalive" type="checkbox" value="true" id="inputIgnoreKeepalive" {{if .Peer.IgnorePersistentKeepalive}}checked{{end}}>
-                        <label class="form-check-label" for="inputIgnoreKeepalive">
+                    <div class="custom-control custom-switch">
+                        <input class="custom-control-input" name="ignorekeepalive" type="checkbox" value="true" id="inputIgnoreKeepalive" {{if .Peer.IgnorePersistentKeepalive}}checked{{end}}>
+                        <label class="custom-control-label" for="inputIgnoreKeepalive">
                             Ignore persistent keepalive
                         </label>
                     </div>
diff --git a/assets/tpl/admin_edit_interface.html b/assets/tpl/admin_edit_interface.html
index e537525..c816e60 100644
--- a/assets/tpl/admin_edit_interface.html
+++ b/assets/tpl/admin_edit_interface.html
@@ -11,9 +11,9 @@
     <link rel="stylesheet" href="/css/custom.css">
 </head>
 
-<body id="page-top">
+<body id="page-top" class="d-flex flex-column min-vh-100">
     {{template "prt_nav.html" .}}
-    <div class="container">
+    <div class="container mt-5 main-app">
         <h1>Edit interface <strong>{{.Device.DeviceName}}</strong></h1>
 
         {{if $.Alerts.HasAlert}}
diff --git a/assets/tpl/admin_index.html b/assets/tpl/admin_index.html
index 23600f9..7f81adc 100644
--- a/assets/tpl/admin_index.html
+++ b/assets/tpl/admin_index.html
@@ -11,10 +11,10 @@
     <link rel="stylesheet" href="/css/custom.css">
 </head>
 
-<body id="page-top">
+<body id="page-top" class="d-flex flex-column min-vh-100">
     {{template "prt_nav.html" .}}
-    <div class="container">
-        <h1 class="mt-2">WireGuard VPN Administration</h1>
+    <div class="container mt-5">
+        <h1>WireGuard VPN Administration</h1>
 
         <div class="card">
             <div class="card-header">
@@ -95,7 +95,6 @@
                     <th scope="col"><a href="?sort=pubKey">Public Key <i class="fa fa-fw {{.Session.GetSortIcon "pubKey"}}"></i></a></th>
                     <th scope="col"><a href="?sort=mail">E-Mail <i class="fa fa-fw {{.Session.GetSortIcon "mail"}}"></i></a></th>
                     <th scope="col"><a href="?sort=ip">IP's <i class="fa fa-fw {{.Session.GetSortIcon "ip"}}"></i></a></th>
-                    <th scope="col"><a href="?sort=traffic">Traffic <i class="fa fa-fw {{.Session.GetSortIcon "traffic"}}"></i></a></th>
                     <th scope="col"><a href="?sort=handshake">Last Handshake <i class="fa fa-fw {{.Session.GetSortIcon "handshake"}}"></i></a></th>
                     <th scope="col"></th><!-- Actions -->
                 </tr>
@@ -112,10 +111,8 @@
                         <td>{{$p.Email}}</td>
                         <td>{{$p.IPsStr}}</td>
                         {{if not $p.Peer}}
-                            <td>? / ?</td>
                             <td>?</td>
                         {{else}}
-                        <td>{{if $p.DeactivatedAt}}-{{else}}{{$p.Peer.ReceiveBytes}} / {{$p.Peer.TransmitBytes}}{{end}}</td>
                         <td>{{if $p.DeactivatedAt}}-{{else}}{{$p.Peer.LastHandshakeTime}}{{end}}</td>
                         {{end}}
                         <td>
@@ -125,7 +122,7 @@
                         </td>
                     </tr>
                     <tr class="hiddenRow">
-                        <td colspan="8" class="hiddenCell" style="white-space:nowrap">
+                        <td colspan="7" class="hiddenCell" style="white-space:nowrap">
                             <div class="collapse" id="{{$p.UID}}" data-parent="#userTable">
                                 <div class="row collapsedRow">
                                     <div class="col-md-6 leftBorder">
@@ -142,6 +139,7 @@
                                         </ul>
                                         <div class="tab-content" id="tabContent{{$p.UID}}">
                                             <div id="t1{{$p.UID}}" class="tab-pane fade active show">
+                                                <h4>User details</h4>
                                                 {{if not $p.LdapUser}}
                                                     <p>No LDAP user-information available...</p>
                                                 {{else}}
@@ -153,6 +151,12 @@
                                                         <li>Department: {{$p.UID}}</li>
                                                     </ul>
                                                 {{end}}
+                                                <h4>Traffic</h4>
+                                                {{if not $p.Peer}}
+                                                    <p>No Traffic data available...</p>
+                                                {{else}}
+                                                    <p>{{if $p.DeactivatedAt}}-{{else}}{{$p.Peer.ReceiveBytes}} / {{$p.Peer.TransmitBytes}}{{end}}</p>
+                                                {{end}}
                                             </div>
                                             <div id="t2{{$p.UID}}" class="tab-pane fade">
                                                 <pre>{{$p.Config}}</pre>
diff --git a/assets/tpl/edit.html b/assets/tpl/edit.html
deleted file mode 100644
index ea20342..0000000
--- a/assets/tpl/edit.html
+++ /dev/null
@@ -1,142 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<!-- http://paintstrap.com/preview_by_id/27826?design=large -->
-<!-- http://www.colourlovers.com/palette/4657935 -->
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-    <title>{{ .static.WebsiteTitle }} - Edit User</title>
-    <meta name="description" content="{{ .static.WebsiteTitle }}">
-    <link rel="stylesheet" href="/css/bootstrap.min.css">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i">
-    <link rel="stylesheet" href="/fonts/fontawesome-all.min.css">
-    <link rel="stylesheet" href="/css/custom.css">
-</head>
-
-<body id="page-top">
-    {{template "prt_nav.html" .}}
-    <div class="container user-edit-container">
-        <div class="jumbotron user-edit-jumbotron">
-            <form method="post" enctype="multipart/form-data">
-                <div class="row">
-                    <div class="form-row">
-                        <div class="form-group col-md-6 text-center">
-                            <img class="list-image-edit" src="/user/{{$.user.Username}}/user.jpg?cc={{len $.user.Image}}" alt="User Image"/>
-
-                            <input type="file" accept="image/jpeg" name="thumbnailPhoto"
-                                   class="form-control-file center-block" id="inputThumbnailPhoto">
-                        </div>
-                        <div class="form-group col-md-6">
-                            <label for="inputName">Name</label>
-                            <input type="text" name="displayName" class="form-control" id="inputName" placeholder="" value="{{index $.user.Attributes "displayName" }}">
-                            <label for="inputMail">Email</label>
-                            <input type="email" name="mail" class="form-control" id="inputMail" placeholder="" value="{{index $.user.Attributes "mail" }}" readonly >
-                            <label for="inputUserID">User ID</label>
-                            <input type="text" name="sAMAccountName" class="form-control" id="inputUserID" placeholder="" value="{{index $.user.Attributes "sAMAccountName" }}" readonly>
-                        </div>
-                    </div>
-                </div>
-                <br>
-                <div class="row">
-                    <div class="form-row">
-                        <div class="form-group col-md-4">
-                            <label for="inputPhone">Phone Number</label>
-                            <input type="text" name="telephoneNumber" class="form-control" id="inputPhone" value="{{index $.user.Attributes "telephoneNumber" }}" placeholder="">
-                        </div>
-                        <div class="form-group col-md-4">
-                            <label for="inputMobile">Mobile Number</label>
-                            <input type="text" name="mobile" class="form-control" id="inputMobile" value="{{index $.user.Attributes "mobile" }}" placeholder="">
-                        </div>
-                        <div class="form-group col-md-4">
-                            <label for="inputEmployeeID">Employee ID</label>
-                            <input type="text" name="employeeID" class="form-control" id="inputEmployeeID" value="{{index $.user.Attributes "employeeID" }}" placeholder="">
-                        </div>
-                    </div>
-                    <div class="form-row">
-                        <div class="form-group col-md-6">
-                            <label for="inputTitle">Title</label>
-                            <input type="text" name="title" class="form-control" id="inputTitle" value="{{index $.user.Attributes "title" }}" placeholder="">
-                        </div>
-                        <div class="form-group col-md-6">
-                            <label for="inputDepartment">Department</label>
-                            <input type="text" name="department" class="form-control" id="inputDepartment" value="{{index $.user.Attributes "department" }}" placeholder="">
-                        </div>
-                    </div>
-                    <div class="form-row">
-                        <div class="form-group col-md-6">
-                            <label for="inputCompany">Company</label>
-                            <input type="text" name="company" class="form-control" id="inputCompany" value="{{index $.user.Attributes "company" }}" placeholder="">
-                        </div>
-                        <div class="form-group col-md-6">
-                            <label for="inputManager">Teamleader</label>
-                            <select name="manager" id="inputManager" class="form-control">
-                                <option value="">No Teamleader</option>
-                                {{range $i, $leader := $.teamLeaders}}
-                                    {{if eq $leader.DN (index $.user.Attributes "manager")}}
-                                        <option value="{{$leader.DN}}" selected>{{$leader.Firstname}} {{$leader.Lastname}}</option>
-                                    {{else}}
-                                        <option value="{{$leader.DN}}">{{$leader.Firstname}} {{$leader.Lastname}}</option>
-                                    {{end}}
-                                {{end}}
-                            </select>
-                        </div>
-                    </div>
-                    <div class="form-row">
-                        <div class="form-group col-md-4">
-                            <label for="inputStreet">Street</label>
-                            <input type="text" name="streetAddress" class="form-control" id="inputStreet" value="{{index $.user.Attributes "streetAddress" }}" placeholder="">
-                        </div>
-                        <div class="form-group col-md-4">
-                            <label for="inputZip">Street</label>
-                            <input type="text" name="postalCode" class="form-control" id="inputZip" value="{{index $.user.Attributes "postalCode" }}" placeholder="">
-                        </div>
-                        <div class="form-group col-md-4">
-                            <label for="inputCity">City</label>
-                            <input type="text" name="l" class="form-control" id="inputCity" value="{{index $.user.Attributes "l" }}" placeholder="">
-                        </div>
-                    </div>
-                    <div class="form-row">
-                        <div class="form-group col-md-6">
-                            <label for="inputState">State/Province</label>
-                            <input type="text" name="st" class="form-control" id="inputState" value="{{index $.user.Attributes "st" }}" placeholder="">
-                        </div>
-                        <div class="form-group col-md-6">
-                            <label for="inputCountry">Country</label>
-                            <input type="text" name="co" class="form-control" id="inputCountry" value="{{index $.user.Attributes "co" }}" placeholder="">
-                        </div>
-                    </div>
-                </div>
-                <div class="row">
-                    <div class="form-row">
-                        <div class="form-group col-md-12">
-                            <button type="submit" class="btn btn-primary">Save</button>
-                            {{if le $.jumpBack 0 }}
-                                <a href="/" class="btn btn-default">Cancel</a>
-                            {{else}}
-                                <a href="/#user-pos-{{$.jumpBack}}" class="btn btn-default">Cancel</a>
-                            {{end}}
-                        </div>
-                    </div>
-                </div>
-                {{if $.alerts.HasAlert}}
-                    <div class="row">
-                        <div class="form-row">
-                            <div class="col-md-12">
-                                <div class="alert alert-{{$.alerts.Type}}" role="alert">
-                                    {{$.alerts.Message}}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                {{end}}
-            </form>
-        </div>
-    </div>
-    {{template "prt_footer.html"}}
-    <script src="/js/jquery.min.js"></script>
-    <script src="/js/bootstrap.min.js"></script>
-    <script src="/js/jquery.easing.js"></script>
-    <script src="/js/custom.js"></script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/assets/tpl/index.html b/assets/tpl/index.html
index fe13534..da1734f 100644
--- a/assets/tpl/index.html
+++ b/assets/tpl/index.html
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
-<!-- http://paintstrap.com/preview_by_id/27826?design=large -->
-<!-- http://www.colourlovers.com/palette/4657935 -->
+<!-- https://bootswatch.com/lux/ -->
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
@@ -13,9 +12,9 @@
     <link rel="stylesheet" href="/css/custom.css">
 </head>
 
-<body id="page-top">
+<body id="page-top" class="d-flex flex-column min-vh-100">
     {{template "prt_nav.html" .}}
-    <div class="container">
+    <div class="container mt-5">
         <div class="page-header">
             <h1>WireGuard VPN Portal</h1>
         </div>
@@ -23,7 +22,7 @@
     </div>
     {{template "prt_footer.html"}}
     <script src="/js/jquery.min.js"></script>
-    <script src="/js/bootstrap.min.js"></script>
+    <script src="/js/bootstrap.bundle.min.js"></script>
     <script src="/js/jquery.easing.js"></script>
     <script src="/js/custom.js"></script>
 </body>
diff --git a/assets/tpl/login.html b/assets/tpl/login.html
index d7219f0..f441f35 100644
--- a/assets/tpl/login.html
+++ b/assets/tpl/login.html
@@ -16,23 +16,32 @@
 
 <body class="bg-gradient-primary">
     <div class="container">
-        <form class="form-signin" method="post">
-            <h2 class="form-signin-heading">Please sign in</h2>
-            <label for="inputUser" class="sr-only">Username</label>
-            <input name="username" type="text" id="inputUser" class="form-control" placeholder="user.name" required="" autofocus="">
-            <label for="inputPassword" class="sr-only">Password</label>
-            <input name="password" type="password" id="inputPassword" class="form-control" placeholder="password" required="">
-            <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
+        <div class="card mt-5">
+            <div class="card-header">Please sign in</div>
+            <div class="card-body">
+                <form class="form-signin" method="post">
+                    <div class="form-group">
+                        <label for="inputUsername">Username</label>
+                        <input type="text" name="username" class="form-control" id="inputUsername" aria-describedby="usernameHelp" placeholder="Enter username">
+                        <small id="usernameHelp" class="form-text text-muted">Please enter your LDAP username, not the email address.</small>
+                    </div>
+                    <div class="form-group">
+                        <label for="inputPassword">Password</label>
+                        <input type="password" name="password" class="form-control" id="inputPassword" placeholder="Password">
+                    </div>
+                    <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
 
-            {{ if eq .error true }}
-                <hr>
-                <span class="text-danger">{{.message}}</span>
-            {{end}}
-        </form>
+                    {{ if eq .error true }}
+                        <hr>
+                        <span class="text-danger">{{.message}}</span>
+                    {{end}}
+                </form>
 
-        <div class="card shadow-lg o-hidden border-0 my-5">
-            <div class="card-body p-0">
-                <a href="/" class="btn btn-white btn-block text-primary btn-user">Go Home</a>
+                <div class="card shadow-lg o-hidden border-0 my-5">
+                    <div class="card-body p-0">
+                        <a href="/" class="btn btn-white btn-block text-primary btn-user">Go Home</a>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
diff --git a/assets/tpl/prt_footer.html b/assets/tpl/prt_footer.html
index 095662c..b7ebe9b 100644
--- a/assets/tpl/prt_footer.html
+++ b/assets/tpl/prt_footer.html
@@ -1,6 +1,5 @@
-<footer class="footer">
-    <div class="container">
+<footer class="page-footer mt-auto">
+    <div class="container mt-3">
         <p class="text-muted">Copyright © Prolicht GmbH 2020 <a class="scroll-to-top" href="#page-top"><i class="fas fa-angle-up"></i></a></p>
-
     </div>
 </footer>
\ No newline at end of file
diff --git a/assets/tpl/prt_nav.html b/assets/tpl/prt_nav.html
index c56848e..d0772e6 100644
--- a/assets/tpl/prt_nav.html
+++ b/assets/tpl/prt_nav.html
@@ -7,11 +7,12 @@
     <div id="topNavbar" class="navbar-collapse collapse">
         <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
             <li class="nav-spacer"></li>
+            {{with eq $.Session.LoggedIn true}}{{with eq $.Session.IsAdmin true}}
             <form class="form-inline my-2 my-lg-0" action="/search">
                 <input class="form-control mr-sm-2" name="search" type="search" placeholder="Search" aria-label="Search">
                 <button class="btn btn-outline-success my-2 my-sm-0" type="submit"><i class="fa fa-search"></i></button>
             </form>
-
+            {{end}}{{end}}
         </ul>
         {{if eq $.Session.LoggedIn true}}
             <div class="nav-item dropdown">