diff --git a/libs/notifications/telegram.js b/libs/notifications/telegram.js
index 083079c8..dd580657 100644
--- a/libs/notifications/telegram.js
+++ b/libs/notifications/telegram.js
@@ -30,6 +30,7 @@ module.exports = function(s,config,lang,getSnapshot){
                             })
                         }
                     }catch(err){
+                        s.debugLog('Telegram Error',err)
                         s.userLog({ke:groupKey,mid:'$USER'},{type:lang.NotifyErrorText,msg:err})
                     }
                 }else{
@@ -301,7 +302,7 @@ module.exports = function(s,config,lang,getSnapshot){
                  ]
             })
         }catch(err){
-            console.log(err)
+            console.error(err)
             console.log('Could not start Telegram bot, please run "npm install node-telegram-bot-api" inside the Shinobi folder.')
         }
     }
diff --git a/libs/webServerPaths.js b/libs/webServerPaths.js
index 8335fc6a..654a3488 100644
--- a/libs/webServerPaths.js
+++ b/libs/webServerPaths.js
@@ -435,9 +435,12 @@ module.exports = function(s,config,lang,app,io){
                                 $user:{
                                     ke: user.ke,
                                     uid: user.uid,
-                                    mail: user.mail
+                                    mail: user.mail,
+                                    details: {
+                                        sub: user.details.sub
+                                    }
                                 },
-                                lang: user.lang
+                                lang: user.lang,
                             })
                             return;
                         }
diff --git a/web/pages/blocks/header-loggedIn.ejs b/web/pages/blocks/header-loggedIn.ejs
new file mode 100644
index 00000000..1ab8af0e
--- /dev/null
+++ b/web/pages/blocks/header-loggedIn.ejs
@@ -0,0 +1,30 @@
+<script>lang = <%- JSON.stringify(lang) %></script>
+<script>definitions = <%- JSON.stringify(define) %></script>
+<script>addStorage = <%- JSON.stringify(addStorage) %>;</script>
+<script>logoLocation196x196 = `<%- window.libURL + config.logoLocation196x196 %>`;</script>
+<script>libURL = location.search === '?p2p=1' ? location.pathname + '/' : '<%-window.libURL%>';</script>
+<script>HWAccelChoices = [
+<% if(config.availableHWAccels) {
+        var methods = {
+            auto: {label:lang['Auto'],value:'auto'},
+            drm: {label:lang['drm'],value:'drm'},
+            cuvid: {label:lang['cuvid'],value:'cuvid'},
+            cuda: {label:lang['cuda'],value:'cuda'},
+            vaapi: {label:lang['vaapi'],value:'vaapi'},
+            qsv: {label:lang['qsv'],value:'qsv'},
+            vdpau: {label:lang['vdpau'],value:'vdpau'},
+            dxva2: {label:lang['dxva2'],value:'dxva2'},
+            vdpau: {label:lang['vdpau'],value:'vdpau'},
+            videotoolbox: {label:lang['videotoolbox'],value:'videotoolbox'}
+        }
+        config.availableHWAccels.forEach(function(availibleMethod){
+            if(methods[availibleMethod]){ %>
+                <%- JSON.stringify(methods[availibleMethod]) %>,
+            <% }
+        })
+    }
+ %>
+]</script>
+<script>
+monitorStatusCodes = definitions["Monitor Status Codes"]
+</script>
diff --git a/web/pages/blocks/header.ejs b/web/pages/blocks/header.ejs
index 8ac77bcf..399c9890 100644
--- a/web/pages/blocks/header.ejs
+++ b/web/pages/blocks/header.ejs
@@ -79,36 +79,6 @@
     </style>
     <script src="<%-window.libURL%>libs/js/jquery.min.js"></script>
     <script src="<%-window.libURL%>assets/vendor/moment-with-locales.js"></script>
+    <script>applicationName = `<%- lang.Shinobi %>`</script>
+    <script>$user = <%- JSON.stringify($user) %></script>
 </head>
-<script>applicationName = `<%- lang.Shinobi %>`</script>
-<script>$user = <%- JSON.stringify($user) %></script>
-<script>lang = <%- JSON.stringify(lang) %></script>
-<script>definitions = <%- JSON.stringify(define) %></script>
-<script>addStorage = <%- JSON.stringify(addStorage) %>;</script>
-<script>logoLocation196x196 = `<%- window.libURL + config.logoLocation196x196 %>`;</script>
-<script>libURL = location.search === '?p2p=1' ? location.pathname + '/' : '<%-window.libURL%>';</script>
-<script>HWAccelChoices = [
-<% if(config.availableHWAccels) {
-        var methods = {
-            auto: {label:lang['Auto'],value:'auto'},
-            drm: {label:lang['drm'],value:'drm'},
-            cuvid: {label:lang['cuvid'],value:'cuvid'},
-            cuda: {label:lang['cuda'],value:'cuda'},
-            vaapi: {label:lang['vaapi'],value:'vaapi'},
-            qsv: {label:lang['qsv'],value:'qsv'},
-            vdpau: {label:lang['vdpau'],value:'vdpau'},
-            dxva2: {label:lang['dxva2'],value:'dxva2'},
-            vdpau: {label:lang['vdpau'],value:'vdpau'},
-            videotoolbox: {label:lang['videotoolbox'],value:'videotoolbox'}
-        }
-        config.availableHWAccels.forEach(function(availibleMethod){
-            if(methods[availibleMethod]){ %>
-                <%- JSON.stringify(methods[availibleMethod]) %>,
-            <% }
-        })
-    }
- %>
-]</script>
-<script>
-monitorStatusCodes = definitions["Monitor Status Codes"]
-</script>
diff --git a/web/pages/factor.ejs b/web/pages/factor.ejs
index 75d11bad..741daab1 100644
--- a/web/pages/factor.ejs
+++ b/web/pages/factor.ejs
@@ -1,56 +1,107 @@
-<% include blocks/header.ejs %>
-<div class="shinobi-bg display-table" style="height:100%">
-    <div class="shinobi-bg-shade">
-        <div class="container">
-            <div class="row">
-                <div class="col-md-6 col-md-offset-3">
-                    <div class="panel panel-login">
-                        <div class="panel-heading">
-                            <div class="panel-heading-shade">
-                                <div class="row">
-                                    <div class="col-xs-12">
-                                        <a href="http://shinobi.video" target="_blank">
-                                            <img src="<%-window.libURL%>libs/img/icon/apple-touch-icon-76x76.png" style="border-radius:50%">
-                                        </a>
+<% var pageTitle = lang.Shinobi + ' - ' + lang["2-Factor Authentication"] %>
+<head>
+    <!-- Powered by Shinobi, http://shinobi.video -->
+    <% include blocks/header-title.ejs %>
+    <% if(!window.libURL)window.libURL = originalURL + global.s.checkCorrectPathEnding(config.webPaths.home) %>
+    <% include blocks/header-meta.ejs %>
+    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link rel="stylesheet" href="<%-window.libURL%>assets/vendor/bootstrap5/css/bootstrap.min.css">
+    <link rel="stylesheet" href="<%-window.libURL%>assets/css/bootstrap5-theme.css">
+    <link rel="stylesheet" href="<%-window.libURL%>libs/css/font-awesome.min.css">
+    <link rel="stylesheet" href="<%-window.libURL%>assets/css/login.css">
+    <link rel="stylesheet" href="<%-window.libURL%>assets/css/gradients.css">
+    <link rel="stylesheet" href="<%-window.libURL%>assets/css/bs5.darktheme.css">
+    <link rel="stylesheet" href="<%-window.libURL%>libs/css/roboto.css" type="text/css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+    <% include blocks/header-favicon.ejs %>
+    <script src="<%-window.libURL%>libs/js/jquery.min.js"></script>
+    <script src="<%-window.libURL%>libs/js/jquery-ui.min.js"></script>
+    <script src="<%-window.libURL%>libs/js/jquery.serialize.js"></script>
+</head>
+<div id="page-contents" class="display-table full-height">
+    <div class="shinobi-bg-shade bg-gradient-blue">
+    	<div class="d-flex flex-row full-height">
+			<div class="col-0 col-lg-8" style="background-image:url(<%- config.loginScreenBackground %>);<%- config.loginScreenBackgroundCss ? config.loginScreenBackgroundCss : 'background-size: cover;opacity: 0.2;' %>">
+
+            </div>
+			<div class="col-12 col-lg-4 vertical-center" style="background:rgba(0,0,0,0.8)">
+                <div style="flex:1" class="p-4">
+                    <!-- Logo/Header -->
+                    <div>
+                        <% if(config.showLoginCardHeader === true){
+                            var logoImageLink
+                            if(config.logoLocation76x76.indexOf('//') === -1){
+                                logoImageLink = window.libURL + config.logoLocation76x76
+                            }else{
+                                logoImageLink = config.logoLocation76x76
+                            }
+                            %>
+                            <div class="text-center p-2">
+                                <a href="<%- config.logoLocation76x76Link %>" target="_blank">
+                                    <img src="<%- logoImageLink %>" style="<%- config.logoLocation76x76Style %>">
+                                </a>
+                            </div>
+                        <% } %>
+                    </div>
+                    <!-- Logo/Header END -->
+                    <!-- Card -->
+    				<div class="text-white">
+                        <div class="text-center">
+                            <h4 class="mt-3 mb-2 text-white" style="font-weight:normal"><%- lang.Welcome %></h4>
+                        </div>
+    					<div class="card-body">
+    						<div class="row dark">
+                                <form id="auth-form" action="/" method="post" style="display: block;">
+                                    <div class="form-group">
+                                        <input type="hidden" name="ke" id="ke" value="<%-$user.ke%>">
+                                        <input type="hidden" name="id" id="uid" value="<%-$user.uid%>">
+                                        <input type="hidden" name="machineID" id="machineID" value="">
+                                        <input type="password" name="factorAuthKey" id="factorAuthKey" tabindex="2" class="wide-text form-control" placeholder="<%-lang['2-Factor Authentication']%>">
+                                    </div>
+                                    <!-- <div class="form-group">
+                                        <label class="mb-0">
+                                            <input class="mt-1 mr-1" type="checkbox" id="remember_me" value="1" name="remember">
+                                            <span class="text-white"><%- lang['Remember Me'] %></span>
+                                        </label>
+                                    </div> -->
+                                    <div class="form-group mt-4">
+                                        <button type="submit" name="login-submit" id="login-submit" tabindex="4" class="btn btn-success btn-block wide-text" style="color:#FFF"><%- lang.Authenticate %></button>
+									</div>
+                                </form>
+    						</div>
+    					</div>
+    				</div>
+                    <!-- Card END -->
+                    <div class="my-5"></div>
+                    <div class="form-group mb-0 text-center">
+                        <% config.socialLinks.forEach((item) => { %>
+                            <a class="mr-2 social-link btn btn-primary <%- item.color || 'bg-none text-white' %>" target="_blank" href="<%- item.href %>">
+                                <div class="d-flex flex-row full-height">
+                                    <div class="vertical-center full-height" style="flex: 1">
+                                        <i class="fa fa-<%- item.icon %>"></i>
                                     </div>
                                 </div>
-                            </div>
-                        </div>
-                        <div class="panel-body">
-                            <div class="row">
-                                <div class="col-lg-12">
-                                    <form id="auth-form" action="/" method="post" style="display: block;">
-                                        <div class="form-group">
-                                            <div class="row">
-                                                <div class="col-md-12 monospace" style="width:calc(100% - 48px)">
-                                                    <input type="hidden" name="ke" id="ke" value="<%-$user.ke%>">
-                                                    <input type="hidden" name="id" id="uid" value="<%-$user.uid%>">
-                                                    <input type="hidden" name="machineID" id="machineID" value="">
-                                                    <input type="password" name="factorAuthKey" id="factorAuthKey" tabindex="2" class="monospace form-control" placeholder="<%-lang['2-Factor Authentication']%>">
-                                                </div>
-                                                <div class="text-right" title="Remember This Machine" style="display:inline-block">
-                                                    <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="remember_me">
-                                                      <input type="checkbox" id="remember_me" value="1" name="remember" class="mdl-switch__input">
-                                                        <span class="monospace mdl-switch__label"></span>
-                                                    </label>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="form-group" style="margin:20px"></div>
-                                        <div class="form-group">
-                                            <button type="submit" name="login-submit" id="login-submit" tabindex="4" class="btn btn-success btn-block"><%-lang.Authenticate%></button>
-                                        </div>
-                                    </form>
-                                </div>
-                            </div>
-                        </div>
+                            </a>
+                        <% }) %>
                     </div>
-                </div>
-            </div>
-        </div>
+                    <!-- Powered By Shinobi -->
+                    <div class="mt-4"></div>
+                    <div class="text-center text-white monospace mt-2">
+                        <small>
+                            <% if(config.showPoweredByShinobi){ %>
+                                <p><%- config.poweredByShinobi %></p>
+                            <% }else{ %>
+                                <!-- <%- config.poweredByShinobi %> -->
+                            <% } %>
+                        </small>
+                    </div>
+                    <!-- Powered By Shinobi END -->
+				</div>
+			</div>
+		</div>
     </div>
 </div>
-<script src="<%-window.libURL%>libs/js/material.min.js"></script>
 <script>
     $.ccio={f:$('#auth-form'),ls:localStorage.getItem('ShinobiAuth_'+location.host)}
     $.ccio.gid=function(x){
diff --git a/web/pages/home.ejs b/web/pages/home.ejs
index 185f8f91..9e8fef32 100644
--- a/web/pages/home.ejs
+++ b/web/pages/home.ejs
@@ -1,6 +1,7 @@
 <% var pageTitle = lang.Shinobi %>
 <!-- Header -->
 <% include blocks/header.ejs %>
+<% include blocks/header-loggedIn.ejs %>
 <!-- Page -->
 <% include blocks/home.ejs %>
 <!-- Footer -->