diff --git a/languages/en_CA.json b/languages/en_CA.json
index 87513a21..42e8d9b8 100644
--- a/languages/en_CA.json
+++ b/languages/en_CA.json
@@ -19,6 +19,7 @@
    "Turn Speed": "Turn Speed",
    "Session Key": "Session Key",
    "Login": "Login",
+   "Welcome": "Welcome!",
    "API Key Action Failed": "API Key Action Failed",
    "Authenticate": "Authenticate",
    "Dashboard": "Dashboard",
diff --git a/libs/branding.js b/libs/branding.js
index 982153c6..7fec4c28 100644
--- a/libs/branding.js
+++ b/libs/branding.js
@@ -1,7 +1,6 @@
 module.exports = function(s,config,lang,app,io){
     if(config.showPoweredByShinobi === undefined){config.showPoweredByShinobi=true}
     if(config.poweredByShinobi === undefined){config.poweredByShinobi='Powered by Shinobi.Systems'}
-    if(config.poweredByShinobiClass === undefined){config.poweredByShinobiClass='margin:15px 0 0 0;text-align:center;color:#777;font-family: sans-serif;text-transform: uppercase;letter-spacing: 3;font-size: 8pt;'}
     if(config.webPageTitle === undefined){config.webPageTitle='Shinobi'}
     if(config.showLoginCardHeader === undefined){config.showLoginCardHeader=true}
     if(config.webFavicon === undefined){config.webFavicon='libs/img/icon/favicon.ico'}
@@ -9,6 +8,30 @@ module.exports = function(s,config,lang,app,io){
     if(config.logoLocation76x76Link === undefined){config.logoLocation76x76Link='https://shinobi.video'}
     if(config.logoLocation76x76Style === undefined){config.logoLocation76x76Style='border-radius:50%'}
     if(config.showLoginSelector === undefined){config.showLoginSelector=true}
+    if(config.socialLinks === undefined){
+        config.socialLinks = [
+            {
+                icon: 'home',
+                href: 'https://shinobi.video',
+                title: 'Homepage'
+            },
+            {
+                icon: 'facebook',
+                href: 'https://www.facebook.com/ShinobiCCTV',
+                title: 'Facebook'
+            },
+            {
+                icon: 'twitter',
+                href: 'https://twitter.com/ShinobiCCTV',
+                title: 'Twitter'
+            },
+            {
+                icon: 'youtube',
+                href: 'https://www.youtube.com/channel/UCbgbBLTK-koTyjOmOxA9msQ',
+                title: 'YouTube'
+            },
+        ]
+}
 
     s.getConfigWithBranding = function(domain){
         var configCopy = Object.assign({},config)
diff --git a/libs/config.js b/libs/config.js
index 65ed5fff..27dae089 100644
--- a/libs/config.js
+++ b/libs/config.js
@@ -45,6 +45,7 @@ module.exports = function(s){
     if(config.orphanedVideoCheckMax === undefined){config.orphanedVideoCheckMax = 2}
     if(config.detectorMergePamRegionTriggers === undefined){config.detectorMergePamRegionTriggers = false}
     if(config.probeMonitorOnStart === undefined){config.probeMonitorOnStart = true}
+    if(config.showLoginTypeSelector === undefined){config.showLoginTypeSelector = true}
     //Child Nodes
     if(config.childNodes === undefined)config.childNodes = {};
         //enabled
diff --git a/web/assets/css/bs5.darktheme.css b/web/assets/css/bs5.darktheme.css
index 889331cf..55718e20 100644
--- a/web/assets/css/bs5.darktheme.css
+++ b/web/assets/css/bs5.darktheme.css
@@ -20,7 +20,7 @@
 .dark .form-select
  {
     background-color: #2b3c4b;
-    border: 1px solid #444;
+    border: 1px solid #2b3c4b;
     color: #fff;
 }
 
@@ -30,7 +30,8 @@
 .dark .form-select:focus
 {
     color: #ddd;
-    background-color: #333;
+    background-color: #2b3c4b;
+    border: 1px solid #222;
     box-shadow: none;
 }
 
diff --git a/web/assets/css/gradients.css b/web/assets/css/gradients.css
new file mode 100644
index 00000000..46fe2747
--- /dev/null
+++ b/web/assets/css/gradients.css
@@ -0,0 +1,41 @@
+/* Gradients from https://uigradients.com/ */
+.bg-gradient-dark {
+    background: #000428;  /* fallback for old browsers */
+    background: -webkit-linear-gradient(to right, #004e92, #000428);  /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to right, #004e92, #000428); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+}
+.bg-gradient-blue {
+    background: #0575E6;  /* fallback for old browsers */
+    background: -webkit-linear-gradient(to right, #021B79, #0575E6);  /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to right, #021B79, #0575E6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+}
+.bg-gradient-red {
+    background: #ED213A;  /* fallback for old browsers */
+    background: -webkit-linear-gradient(to right, #93291E, #ED213A);  /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to right, #93291E, #ED213A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+}
+.bg-gradient-red {
+    background: #ED213A;  /* fallback for old browsers */
+    background: -webkit-linear-gradient(to right, #93291E, #ED213A);  /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to right, #93291E, #ED213A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+}
+.bg-gradient-orange {
+    background: #f12711;  /* fallback for old browsers */
+    background: -webkit-linear-gradient(to right, #f5af19, #f12711);  /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to right, #f5af19, #f12711); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+}
+.bg-gradient-yellow {
+    background: #CAC531;  /* fallback for old browsers */
+    background: -webkit-linear-gradient(to right, #F3F9A7, #CAC531);  /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to right, #F3F9A7, #CAC531); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+}
+.bg-gradient-green {
+    background: #134E5E;  /* fallback for old browsers */
+    background: -webkit-linear-gradient(to right, #71B280, #134E5E);  /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to right, #71B280, #134E5E); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+}
+.bg-gradient-pinkgreen {
+    background: #aa4b6b;  /* fallback for old browsers */
+    background: -webkit-linear-gradient(to right, #3b8d99, #6b6b83, #aa4b6b);  /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to right, #3b8d99, #6b6b83, #aa4b6b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+}
diff --git a/web/assets/css/login.css b/web/assets/css/login.css
new file mode 100644
index 00000000..a64f4086
--- /dev/null
+++ b/web/assets/css/login.css
@@ -0,0 +1,54 @@
+body {
+    font-family: "Roboto"
+}
+.shinobi-bg-shade{
+    position:absolute;
+    height:100%;
+    width:100%;
+}
+.bg-none {
+    background: transparent;
+}
+.monospace{
+    font-family: monospace;
+}
+.full-height {
+    height: 100%;
+}
+.vertical-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.text-color {
+    color: #28b391!important;
+}
+.text-white {
+    color: #fff!important;
+}
+hr.divider {
+    border-top: 1px solid #595959;
+    background-color: initial;
+}
+#page-contents {
+    background: #334a6d;
+}
+.social-link.btn {
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    display: inline-block;
+    font-size: 1.2rem;
+    border: 0;
+}
+.card label {
+    color: #fff;
+}
+#login-submit {
+    background: #2596fb;
+}
+#remember_me {
+    width: 15px;
+    height: 15px;
+    transform: translate(0px, 3px);
+}
diff --git a/web/assets/js/bs5.login.js b/web/assets/js/bs5.login.js
new file mode 100644
index 00000000..479ad374
--- /dev/null
+++ b/web/assets/js/bs5.login.js
@@ -0,0 +1,69 @@
+var loginForm = $('#login-form')
+var cachedLoginInfo = localStorage.getItem('ShinobiLogin_'+location.host)
+var cachedMachineId = localStorage.getItem('ShinobiAuth_'+location.host)
+function generateId(x){
+    if(!x){x=10};var t = "";var p = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+    for( var i=0; i < x; i++ )
+        t += p.charAt(Math.floor(Math.random() * p.length));
+    return t;
+}
+function onSelectorChange(_this,parent){
+    var el = $(_this)
+    var theParam = el.attr('selector')
+    var theValue = el.val()
+    var theSelected = el.find('option:selected').text()
+    parent.find(`.${theParam}_input`).hide()
+    parent.find(`.${theParam}_${theValue}`).show()
+    parent.find(`.${theParam}_text`).text(theSelected)
+}
+if(!cachedMachineId){
+    cachedMachineId = generateId(20)
+    localStorage.setItem('ShinobiAuth_'+location.host,cachedMachineId)
+}
+$(document).ready(function(){
+    $('#machineID').val(cachedMachineId)
+    $('[selector]').change(onSelectorChange).change();
+})
+loginForm.submit(function(e){
+    $('#login-message').remove()
+    var formValues = loginForm.serializeObject()
+    if(formValues.remember){
+        localStorage.setItem('ShinobiLogin_'+location.host,JSON.stringify({
+            mail: formValues.mail,
+            pass: formValues.pass,
+            function: formValues.function
+        }))
+    }else{
+        localStorage.removeItem('ShinobiLogin_'+location.host)
+    }
+    if(googleSignIn)googleSignOut();
+})
+if(cachedLoginInfo){
+    cachedLoginInfo = JSON.parse(cachedLoginInfo)
+    $.each(cachedLoginInfo,function(n,v){
+        var el = loginForm.find('[name="'+n+'"]')
+        if(el.attr('type') === 'checkbox'){
+            el.prop('checked',true)
+        }else{
+            el.val(v)
+        }
+    })
+    loginForm.find('[name="remember"]').prop('checked',true)
+    loginForm.submit()
+}
+$('[name="function"]').change(function(){
+    var removeClass='btn-danger btn-primary btn-success btn-warning'
+    var addClass='btn-success'
+    switch($(this).val()){
+        case'streamer':
+            addClass='btn-warning'
+        break;
+        case'admin':
+            addClass='btn-primary'
+        break;
+        case'super':
+            addClass='btn-danger'
+        break;
+    }
+    $('#login-submit').removeClass(removeClass).addClass(addClass)
+})
diff --git a/web/libs/css/login.css b/web/libs/css/login.css
deleted file mode 100644
index 1fcd3365..00000000
--- a/web/libs/css/login.css
+++ /dev/null
@@ -1,105 +0,0 @@
-#register-msg:empty{display:none}
-.shinobi-bg{background:url(/libs/img/bg.jpg);background-size:cover;background-position:center;position:relative}
-.shinobi-bg{background:#333}
-.shinobi-bg-shade{position:absolute;height:100%;width:100%;background:rgba(0,0,0,0.5)}
-.panel-login {
-    background:#343434;
-    color:#ddd;
-    margin-top:90px;
-	border-color: #444;
-	-webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
-	-moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
-	box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
-}
-.panel-login>.panel-heading {
-	color: #00415d;
-	background-color: #333;
-	color: #fff;
-	border-color: #444;
-	text-align:center;
-}
-.panel-login>.panel-heading a{
-	text-decoration: none;
-	color: #666;
-	font-weight: bold;
-	font-size: 15px;
-	-webkit-transition: all 0.1s linear;
-	-moz-transition: all 0.1s linear;
-	transition: all 0.1s linear;
-}
-.panel-login>.panel-heading a.active{
-	color: #3b75b4;
-}
-.panel-login>.panel-heading hr{
-	margin-top: 10px;
-	margin-bottom: 0px;
-	clear: both;
-	border: 0;
-	height: 1px;
-	background-image: -webkit-linear-gradient(left,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.15),rgba(0, 0, 0, 0));
-	background-image: -moz-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
-	background-image: -ms-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
-	background-image: -o-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
-}
-.panel-login input[type="text"],.panel-login input[type="email"],.panel-login input[type="password"] {
-	height: 45px;
-	border: 1px solid #ddd;
-	font-size: 16px;
-	-webkit-transition: all 0.1s linear;
-	-moz-transition: all 0.1s linear;
-	transition: all 0.1s linear;
-}
-.panel-login input:hover,
-.panel-login input:focus {
-	outline:none;
-	-webkit-box-shadow: none;
-	-moz-box-shadow: none;
-	box-shadow: none;
-	border-color: #ccc;
-}
-.btn-login {
-	background-color: #59B2E0;
-	outline: none;
-	color: #fff;
-	font-size: 14px;
-	height: auto;
-	font-weight: normal;
-	padding: 14px 0;
-	text-transform: uppercase;
-	border-color: #59B2E6;
-}
-.btn-login:hover,
-.btn-login:focus {
-	color: #fff;
-	background-color: #53A3CD;
-	border-color: #53A3CD;
-}
-.forgot-password {
-	text-decoration: underline;
-	color: #888;
-}
-.forgot-password:hover,
-.forgot-password:focus {
-	text-decoration: underline;
-	color: #666;
-}
-
-.btn-register {
-	background-color: #1CB94E;
-	outline: none;
-	color: #fff;
-	font-size: 14px;
-	height: auto;
-	font-weight: normal;
-	padding: 14px 0;
-	text-transform: uppercase;
-	border-color: #1CB94A;
-}
-.btn-register:hover,
-.btn-register:focus {
-	color: #fff;
-	background-color: #1CA347;
-	border-color: #1CA347;
-}
-
-.monospace{font-family: monospace;}
\ No newline at end of file
diff --git a/web/pages/index.ejs b/web/pages/index.ejs
index bd9bbae0..7a56ed95 100644
--- a/web/pages/index.ejs
+++ b/web/pages/index.ejs
@@ -5,11 +5,12 @@
 <% 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%>libs/css/bootstrap.min.css">
+<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%>libs/css/login.css">
-<link rel="stylesheet" href="<%-window.libURL%>libs/css/material.min.css">
-<link rel="stylesheet" href="<%-window.libURL%>libs/css/material.style.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="mobile-web-app-capable" content="yes">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
@@ -17,77 +18,46 @@
 <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>
-<link rel="stylesheet" href="<%-window.libURL%>libs/themes/Ice/style.css">
 <meta name="google-signin-client_id" content="<%- config.appIdGoogleSignIn %>">
-<style>
-.wide-text{
-    text-transform: uppercase;
-    letter-spacing: 3;
-    font-size: 8pt!important;
-    font-family: sans-serif;
-    color: #555;
-}
-.text-green {
-    color: #28b391!important;
-}
-.panel {
-    border-color: #28b391!important;
-    background: #044032!important;
-}
-.panel-heading {
-    background: #124438!important;
-    border-color: #163537!important;
-}
-.mdl-switch.is-checked .mdl-switch__thumb {
-    background: #28b391!important;
-}
-.mdl-switch.is-checked .mdl-switch__track {
-    background: rgba(63, 181, 99, 0.5)!important;
-}
-.shinobi-bg {
-    background: #33686d;
-}
-.form-control {
-    background: #163537;
-    border-color: #1d4c40!important;
-    color: #979797;
-}
-</style>
 </head>
 <% cleanLang = function(string){
     if(!string){string=''}
     return string.replace(/'/g,"\\'")
 }%>
 <% if(screen){screen=screen.toLowerCase()} %>
-<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">
-                    <% if(config.showLoginCardHeader === true){
-                        var logoImageLink
-                        if(config.logoLocation76x76.indexOf('//') === -1){
-                            logoImageLink = window.libURL + config.logoLocation76x76
-                        }else{
-                            logoImageLink = config.logoLocation76x76
-                        }
-                        %>
-                        <div class="panel-heading">
-                            <div class="panel-heading-shade">
-                                <div class="row">
-                                    <div class="col-xs-12">
-                                        <a href="<%- config.logoLocation76x76Link %>" target="_blank">
-                                            <img src="<%- logoImageLink %>" style="<%- config.logoLocation76x76Style %>">
-                                        </a>
-                                    </div>
-                                </div>
-                        	</div>
+<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">
+
+            </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="panel-body">
-						<div class="row">
-							<div class="col-lg-12">
+    					<div class="card-body">
+    						<div class="row dark">
 								<form id="login-form" method="post" style="display: block;margin:0">
                                     <input type="hidden" name="machineID" id="machineID" value="">
                                     <% var message,timeLeft;if(message){ %>
@@ -96,18 +66,22 @@
     									</div>
                                     <% } %>
 									<div class="form-group">
+                                        <label><%- lang['Email'] %></label>
 										<input type="text" name="mail" id="email" tabindex="1" autofocus class="form-control wide-text" placeholder="<%- lang.Email %>" value="">
 									</div>
 									<div class="form-group">
+                                        <label><%- lang['Password'] %></label>
 										<input type="password" name="pass" id="pass" tabindex="2" class="form-control wide-text" placeholder="<%- lang.Password %>">
 									</div>
 									<div class="form-group f_i_input f_i_ldap" style="display:none">
-										<input name="key" id="key" tabindex="2" class="monospace form-control wide-text" placeholder="Group Key">
+                                        <label><%- lang['Group Key'] %></label>
+										<input name="key" id="key" tabindex="2" class="form-control wide-text" placeholder="Group Key">
 									</div>
                                     <% if(config.showLoginSelector === true){ %>
     									<div class="form-group f_i_input f_i_">
+                                            <label><%- lang['Landing Page'] %></label>
         									<div class="row">
-                                                <div class="col-md-12 monospace">
+                                                <div class="col-md-12">
                                                     <select class="form-control wide-text" name="function">
                                                         <% switch(screen){
                                                             case'super': %>
@@ -141,125 +115,82 @@
                                             } %>
                                         </select>
                                     <% } %>
-                                    <div class="form-group">
+                                    <div class="form-group" <% config.showLoginTypeSelector === true ? '' : 'style="display:none"' %>>
+                                        <label><%- lang['Authenticate'] %></label>
                                         <select class="form-control wide-text" name="alternateLogin" selector="f_i">
                                             <option value="" selected><%- lang.Default %></option>
-                                            <option value="google">Google</option>
+                                            <% if(config.allowGoogleSignOn){ %>
+                                                <option value="google">Google</option>
+                                            <% } %>
                                             <option value="ldap"><%- lang.LDAP %></option>
                                         </select>
-                                        <input style="display:none" name="alternateLoginToken" class="monospace form-control wide-text" placeholder="Group Key">
+                                        <input style="display:none" name="alternateLoginToken" class="form-control wide-text" placeholder="Group Key">
                                     </div>
-									<div class="form-group">
-                                        <button type="submit" name="login-submit" id="login-submit" tabindex="4" class="btn btn-success btn-block wide-text" style="color:#FFF"><i class="fa fa-key"></i> <%- lang.Login %></button>
+                                    <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.Login %></button>
 									</div>
                                     <% if(config.allowGoogleSignOn){ %>
     									<div class="form-group text-center">
                                             <div class="g-signin2" data-onsuccess="onGoogleSignIn" style="display: inline-block;"></div>
     									</div>
-                                    <% } %>
-									<div class="form-group text-center" style="margin:0">
-                                        <span style="<%- config.poweredByShinobiClass %>;margin-right: 10px" class="epic-text text-green"><i class="fa fa-sign-in"></i> <%- lang['Remember Me'] %></span>
-                                        <div class="text-right" title="<%- lang['Remember Me'] %>" 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>
-                                    <% if(config.showPoweredByShinobi){ %>
-                                        <p class="text-green" style="<%- config.poweredByShinobiClass %>"><small><%- config.poweredByShinobi %></small></p>
-                                    <% }else{ %>
-                                        <!-- <%- config.poweredByShinobi %> -->
                                     <% } %>
 								</form>
-							</div>
-						</div>
-					</div>
+    						</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>
+                            </a>
+                        <% }) %>
+                    </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>
 </div>
-</div>
-<script src="<%-window.libURL%>libs/js/material.min.js"></script>
 <script>
     var googleSignIn = false;
     <% var failedLogin;if(failedLogin===true){ %>
         localStorage.removeItem('ShinobiLogin_'+location.host)
     <% } %>
-    $.ccio={f:$('#login-form'),ls:localStorage.getItem('ShinobiLogin_'+location.host),auth:localStorage.getItem('ShinobiAuth_'+location.host)}
-    $.ccio.gid=function(x){
-        if(!x){x=10};var t = "";var p = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-        for( var i=0; i < x; i++ )
-            t += p.charAt(Math.floor(Math.random() * p.length));
-        return t;
-    };
-    if(!$.ccio.auth||$.ccio.auth===''){
-        $.ccio.auth=$.ccio.gid(20)
-        localStorage.setItem('ShinobiAuth_'+location.host,$.ccio.auth)
-    }
-    $(document).ready(function(){
-        $('#machineID').val($.ccio.auth)
-    })
-    $.ccio.f.submit(function(e){
-        $('#login-message').remove()
-        $('input').css('border-color','')
-        e.e=$(this),e.s=e.e.serializeObject(),e.inputs=e.e.find('input,button');
-        if(e.s.remember){
-            localStorage.setItem('ShinobiLogin_'+location.host,JSON.stringify({mail:e.s.mail,pass:e.s.pass,function:e.s.function}))
-        }else{localStorage.removeItem('ShinobiLogin_'+location.host)}
-        if(googleSignIn)googleSignOut()
-    })
-    if($.ccio.ls){
-        $.ccio.ls=JSON.parse($.ccio.ls);
-        $.each($.ccio.ls,function(n,v){
-            n=$.ccio.f.find('[name="'+n+'"]')
-            if(n.attr('type')==='checkbox'){
-                n.prop('checked',true)
-            }else{
-                n.val(v)
-            }
-        });
-        $.ccio.f.find('[name="remember"]').prop('checked',true);
-        $.ccio.f.submit()
-    }
-    $('[name="function"]').change(function(){
-        e={};
-        e.removeClass='btn-danger btn-primary btn-success btn-warning'
-        switch($(this).val()){
-            case'streamer':
-                e.addClass='btn-warning'
-            break;
-            case'admin':
-                e.addClass='btn-primary'
-            break;
-            case'super':
-                e.addClass='btn-danger'
-            break;
-            default:
-                e.addClass='btn-success'
-            break;
-        }
-        $('#login-submit').removeClass(e.removeClass).addClass(e.addClass)
-    })
-$('[selector]').change(function(e){
-    e.v=$(this).val();e.a=$(this).attr('selector')
-    $('.'+e.a+'_input').hide()
-    $('.'+e.a+'_'+e.v).show();
-    $('.'+e.a+'_text').text($(this).find('option:selected').text())
-}).change();
 </script>
+<script src="<%-window.libURL%>assets/js/bs5.login.js"></script>
 <% if(config.allowGoogleSignOn){ %>
     <script src="https://apis.google.com/js/platform.js" async defer></script>
     <script>
         function onGoogleSignIn(googleUser) {
             var id_token = googleUser.getAuthResponse().id_token;
-            $.ccio.f.find('[name="mail"],[name="pass"],[name="alternateLogin"],.g-signin2').hide()
-            $.ccio.f.find('[name="alternateLogin"]').val('google')
-            $.ccio.f.find('[name="alternateLoginToken"]').val(id_token)
-            $.ccio.f.find('[name="login-submit"]').html(`<i class="fa fa-google"></i> <%- lang.Login %>`)
+            loginForm.find('[name="mail"],[name="pass"],[name="alternateLogin"],.g-signin2').hide()
+            loginForm.find('[name="alternateLogin"]').val('google')
+            loginForm.find('[name="alternateLoginToken"]').val(id_token)
             googleSignIn = true
-            $.ccio.f.submit()
+            loginForm.submit()
         }
         function googleSignOut() {
           var auth2 = gapi.auth2.getAuthInstance();