diff --git a/package/ctcgfw/luci-theme-argonv3/Makefile b/package/ctcgfw/luci-theme-argonv3/Makefile
index a818ffc828..6e703047c0 100644
--- a/package/ctcgfw/luci-theme-argonv3/Makefile
+++ b/package/ctcgfw/luci-theme-argonv3/Makefile
@@ -7,9 +7,9 @@
 include $(TOPDIR)/rules.mk
 
 LUCI_TITLE:=Argon Theme
-LUCI_DEPENDS:=
-PKG_VERSION:=1.6.5
-PKG_RELEASE:=20200731
+LUCI_DEPENDS:=+luasocket
+PKG_VERSION:=1.6.7
+PKG_RELEASE:=20200818
 
 include $(TOPDIR)/feeds/luci/luci.mk
 
diff --git a/package/ctcgfw/luci-theme-argonv3/htdocs/luci-static/argon/css/cascade.css b/package/ctcgfw/luci-theme-argonv3/htdocs/luci-static/argon/css/cascade.css
index 572af83c8b..7d0aee9029 100644
--- a/package/ctcgfw/luci-theme-argonv3/htdocs/luci-static/argon/css/cascade.css
+++ b/package/ctcgfw/luci-theme-argonv3/htdocs/luci-static/argon/css/cascade.css
@@ -35,6 +35,16 @@
 @import url("fonts.css?v=3");
 @import url("pure-min.css?v=1");
 :root {
+  --primary: #5e72e4;
+  --dark-primary: #5065d8;
+  --darker: black;
+  --default: #525461;
+  --background-color: #f4f5f7;
+  --warning: #fb6340;
+  --footer-color: #aaa;
+  --menubar-background: #fff;
+  --menubar-scrollbar-thumb: #f6f9fc;
+  --menubar-text-color: #4c4c4c;
   --blue: #5e72e4;
   --indigo: #5603ad;
   --purple: #8965e0;
@@ -45,29 +55,28 @@
   --green: #2dce89;
   --teal: #11cdef;
   --cyan: #2bffc6;
+  --white: #fff;
   --gray: #8898aa;
   --gray-dark: #32325d;
   --light: #ced4da;
   --lighter: #e9ecef;
-  --primary: #5e72e4;
   --secondary: #f7fafc;
   --success: #2dce89;
   --info: #11cdef;
-  --warning: #fb6340;
   --danger: #f5365c;
   --light: #adb5bd;
   --dark: #212529;
-  --default: #172b4d;
-  --white: #fff;
   --neutral: #fff;
-  --darker: black;
-  --background-color: #f4f5f7;
   --login-form-bg-color: rgba(244, 245, 247, 0.8);
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
   --breakpoint-md: 768px;
   --breakpoint-lg: 992px;
   --breakpoint-xl: 1200px;
+  --blur-radius: 10px;
+  --blur-opacity: 0.5;
+  --blur-radius-dark: 10px;
+  --blur-opacity-dark: 0.5;
   --font-family-sans-serif: "Google Sans", "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica", "Hiragino Sans GB";
   --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
   --font-family-normal: Open Sans, PingFangSC-Regular, Microsoft Yahei, WenQuanYi Micro Hei, "Helvetica Neue", Helvetica, Hiragino Sans GB, sans-serif;
@@ -94,10 +103,11 @@ body {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 ::selection {
-  background-color: var(--primary);
   background-color: #5e72e4;
+  background-color: var(--primary);
   color: #ffffff;
   color: var(--white);
 }
@@ -135,12 +145,27 @@ li {
   align-items: center;
   justify-content: center;
   background-color: #000;
+  background-color: var(--darker);
   overflow: hidden;
 }
 .login-page .video video {
   width: 100%;
   height: auto;
 }
+.login-page .volume-control {
+  position: fixed;
+  right: 1rem;
+  top: 1rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  z-index: 5000;
+  cursor: pointer;
+  background-size: contain;
+  background-image: url(../img/volume_high.svg);
+}
+.login-page .volume-control.mute {
+  background-image: url(../img/volume_off.svg);
+}
 .login-page .login-container {
   height: 100%;
   margin-left: 4.5rem;
@@ -168,7 +193,8 @@ li {
   width: 100%;
   min-height: 100%;
   max-width: 420px;
-  background-color: #ffffff;
+  background-color: #fff;
+  background-color: var(--white);
 }
 .login-page .login-container .login-form .brand {
   display: flex;
@@ -176,6 +202,7 @@ li {
   align-items: center;
   margin: 50px auto 100px 50px;
   color: #525461;
+  color: var(--default);
 }
 .login-page .login-container .login-form .brand .icon {
   width: 50px;
@@ -215,6 +242,7 @@ li {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #525461;
+  color: var(--default);
   font-size: 1.5rem;
   position: absolute;
   z-index: 100;
@@ -227,6 +255,7 @@ li {
   height: 1px;
   bottom: 0;
   border-bottom: 1px #5e72e4 solid;
+  border-bottom: 1px var(--primary) solid;
   transform: scaleX(0);
   transition: transform 0.3s;
 }
@@ -240,9 +269,11 @@ li {
   box-sizing: border-box;
   transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   color: #525461;
+  color: var(--default);
   border: 0;
   border-radius: 0;
   border-bottom: 1px solid #fff;
+  border-bottom: 1px solid var(--white);
   background-color: transparent;
   background-clip: padding-box;
   box-shadow: 0 3px 2px rgba(233, 236, 239, 0.05);
@@ -266,12 +297,14 @@ li {
   box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 50px 0px;
   font-weight: 600;
   font-size: 15px;
-  color: #ffffff;
+  color: #fff;
+  color: var(--white);
   text-align: center;
   width: 100%;
   cursor: pointer;
   min-height: 50px;
-  background-image: linear-gradient(-135deg, #8692de 0%, #788aef 100%);
+  background-color: #5e72e4 !important;
+  background-color: var(--primary) !important;
   border-radius: 6px;
   outline: none;
   border-width: initial;
@@ -285,7 +318,8 @@ li {
 }
 .login-page .login-container .login-form .cbi-button-apply:hover,
 .login-page .login-container .login-form .cbi-button-apply :focus {
-  background-image: linear-gradient(-135deg, #828fe0 0%, #5e72e4 100%);
+  background-color: #5065d8 !important;
+  background-color: var(--dark-primary) !important;
 }
 .login-page .login-container footer {
   box-sizing: border-box;
@@ -298,6 +332,13 @@ li {
   padding: 0px 0px 30px;
   z-index: 10;
   color: #525461;
+  color: var(--default);
+  position: relative;
+}
+.login-page .login-container footer .ftc {
+  position: absolute;
+  bottom: 30px;
+  width: 100%;
 }
 .login-page .login-container footer .luci-link {
   display: block;
@@ -310,9 +351,9 @@ li {
 }
 @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
   .login-page .login-container .login-form {
-    -webkit-backdrop-filter: blur(10px);
-    backdrop-filter: blur(10px);
-    background-color: rgba(244, 245, 247, 0.7);
+    -webkit-backdrop-filter: blur(var(--blur-radius));
+    backdrop-filter: blur(var(--blur-radius));
+    background-color: rgba(244, 245, 247, var(--blur-opacity));
   }
 }
 /***********************
@@ -340,9 +381,11 @@ header::after {
   height: 2rem;
   width: 100%;
   background-color: #5e72e4 !important;
+  background-color: var(--primary) !important;
 }
 header.bg-primary {
   background-color: #5e72e4 !important;
+  background-color: var(--primary) !important;
 }
 header .fill {
   padding: 0.8rem 0;
@@ -355,6 +398,7 @@ header .fill .container {
 header .fill .container .brand {
   font-size: 1.5rem;
   color: #fff;
+  color: var(--white);
   font-family: "TypoGraphica";
   text-decoration: none;
   padding-left: 1rem;
@@ -371,10 +415,12 @@ footer {
   text-align: right;
   padding: 1rem;
   color: #aaa;
+  color: var(--footer-color);
   font-size: 0.8rem;
 }
 footer a {
   color: #aaa;
+  color: var(--footer-color);
   text-decoration: none;
 }
 /***********************
@@ -408,11 +454,12 @@ footer a {
   width: calc(0% + 15rem);
   height: 100%;
   background-color: #fff !important;
+  background-color: var(--menubar-background) !important;
   box-shadow: rgba(0, 0, 0, 0.75) 0px 0px 15px -5px;
   overflow-x: auto;
   position: fixed;
   z-index: 100;
-  transition: width 0.3s ease-in-out;
+  transition: width 0.2s ease-in-out;
 }
 .main .main-left::-webkit-scrollbar {
   width: 5px;
@@ -420,9 +467,11 @@ footer a {
 }
 .main .main-left::-webkit-scrollbar-thumb {
   background-color: #f6f9fc;
+  background-color: var(--menubar-scrollbar-thumb);
 }
 .main .main-left::-webkit-scrollbar-track {
   background-color: #fff;
+  background-color: var(--menubar-background);
 }
 .main .main-left .sidenav-header {
   padding: 1.5rem;
@@ -431,6 +480,7 @@ footer a {
 .main .main-left .sidenav-header .brand {
   font-size: 1.8rem;
   color: #5e72e4;
+  color: var(--primary);
   font-family: "TypoGraphica", sans-serif;
   text-decoration: none;
   padding-left: 0;
@@ -447,6 +497,7 @@ footer a {
 }
 .main .main-left .nav li a {
   color: #525f7f;
+  color: var(--default);
   display: block;
 }
 .main .main-left .nav li:nth-last-child(1) {
@@ -467,7 +518,8 @@ footer a {
   padding: 0.5rem 0rem 0.5rem 0;
   text-decoration: none;
   white-space: nowrap;
-  color: rgba(0, 0, 0, 0.7);
+  color: #4c4c4c;
+  color: var(--menubar-text-color);
   transition: all 0.2s;
   font-size: 0.875rem;
 }
@@ -479,10 +531,12 @@ footer a {
   left: 0;
   bottom: 0;
   background-color: #5e72e4;
+  background-color: var(--primary);
   transition: all 0.2s;
 }
 .main .main-left .nav li.slide ul li a:hover::after {
   color: #000;
+  color: var(--darker);
   width: 100%;
 }
 .main .main-left .nav li.slide .menu {
@@ -2634,6 +2688,25 @@ input[name="nslookup"] {
     font-size: 0.7rem;
   }
 }
+@media screen and (min-width: 600px) {
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  ::-webkit-scrollbar,
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: #9e9e9e;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: #757575;
+  }
+  ::-webkit-scrollbar-thumb:active {
+    background: #424242;
+  }
+}
 @media screen and (max-width: 992px) {
   .main .main-left {
     width: 0;
@@ -3245,9 +3318,9 @@ input[name="nslookup"] {
   }
   @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
     .login-page .login-container .login-form {
-      -webkit-backdrop-filter: blur(10px);
-      backdrop-filter: blur(10px);
-      background-color: rgba(0, 0, 0, 0.7);
+      -webkit-backdrop-filter: blur(var(--blur-radius-dark));
+      backdrop-filter: blur(var(--blur-radius-dark));
+      background-color: rgba(0, 0, 0, var(--blur-opacity-dark));
     }
   }
 }
diff --git a/package/ctcgfw/luci-theme-argonv3/htdocs/luci-static/argon/css/dark.css b/package/ctcgfw/luci-theme-argonv3/htdocs/luci-static/argon/css/dark.css
index db1955cf7b..0c01977b3e 100644
--- a/package/ctcgfw/luci-theme-argonv3/htdocs/luci-static/argon/css/dark.css
+++ b/package/ctcgfw/luci-theme-argonv3/htdocs/luci-static/argon/css/dark.css
@@ -296,6 +296,9 @@ input:focus {
   outline: 0;
   box-shadow: none;
 }
+select {
+  background-color: #1e1e1e !important;
+}
 #cbi-dropbear h2,
 #cbi-dropbear .cbi-map-descr,
 #cbi-dropbear .cbi-map-descr abbr,
@@ -354,7 +357,7 @@ td.cbi-value-field var {
   background-color: #1e1e1e;
 }
 .node-services-vssr .block {
-  background-color: #3c3c3c !important;
+  background-color: #1e1e1e !important;
   box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.35);
 }
 .node-services-vssr .block h4 {
@@ -380,6 +383,9 @@ td.cbi-value-field var {
 .node-services-vssr .incon:nth-child(2) {
   border-right: #1e1e1e 1px solid;
 }
+.main .main-right #maincontent .container p {
+  color: #ccc;
+}
 #xhr_poll_status > .label.success {
   color: #ccc !important;
   background-color: darkolivegreen !important;
@@ -423,11 +429,14 @@ fieldset[id^="cbi-apply-"] {
 .cbi-section-error {
   color: darkorange;
 }
+.node-services-vssr .block h4 span {
+  color: #ccc !important;
+}
 @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
   .login-page .login-container .login-form {
-    -webkit-backdrop-filter: blur(10px);
-    backdrop-filter: blur(10px);
-    background-color: rgba(0, 0, 0, 0.7);
+    -webkit-backdrop-filter: blur(var(--blur-radius-dark));
+    backdrop-filter: blur(var(--blur-radius-dark));
+    background-color: rgba(0, 0, 0, var(--blur-opacity-dark));
   }
 }
 @media screen and (max-width: 480px) {
diff --git a/package/ctcgfw/luci-theme-argonv3/htdocs/luci-static/argon/img/volume_high.svg b/package/ctcgfw/luci-theme-argonv3/htdocs/luci-static/argon/img/volume_high.svg
new file mode 100644
index 0000000000..f01ad5c79d
--- /dev/null
+++ b/package/ctcgfw/luci-theme-argonv3/htdocs/luci-static/argon/img/volume_high.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1597500707209" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9192" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M484.430769 51.2L236.307692 354.461538H118.153846c-43.323077 0-78.769231 35.446154-78.769231 78.769231v157.538462c0 43.323077 35.446154 78.769231 78.769231 78.769231h118.153846l248.123077 303.261538c25.6 25.6 66.953846 7.876923 66.953846-27.569231V78.769231c0-35.446154-43.323077-53.169231-66.953846-27.569231z m354.461539 120.123077c-7.876923-7.876923-19.692308-7.876923-27.569231 0l-27.569231 27.569231c-7.876923 7.876923-7.876923 21.661538 0 27.56923C858.584615 299.323077 905.846154 399.753846 905.846154 512c0 112.246154-47.261538 212.676923-122.092308 285.538462-7.876923 7.876923-7.876923 19.692308 0 27.56923l27.569231 27.569231c7.876923 7.876923 19.692308 7.876923 27.569231 0C927.507692 768 984.615385 645.907692 984.615385 512c0-133.907692-55.138462-256-145.723077-340.676923z m-124.061539 126.030769c-7.876923-7.876923-19.692308-7.876923-27.569231 0l-27.56923 27.569231c-7.876923 7.876923-7.876923 19.692308 0 27.569231 43.323077 39.384615 68.923077 96.492308 68.923077 159.507692 0 63.015385-27.569231 120.123077-70.892308 159.507692-7.876923 7.876923-7.876923 19.692308 0 27.569231l27.569231 27.569231c7.876923 7.876923 19.692308 7.876923 27.56923 0 57.107692-53.169231 94.523077-129.969231 94.523077-216.615385 0-82.707692-35.446154-159.507692-92.553846-212.676923z" p-id="9193" fill="#ffffff"></path></svg>
\ No newline at end of file
diff --git a/package/ctcgfw/luci-theme-argonv3/htdocs/luci-static/argon/img/volume_off.svg b/package/ctcgfw/luci-theme-argonv3/htdocs/luci-static/argon/img/volume_off.svg
new file mode 100644
index 0000000000..0598d584e7
--- /dev/null
+++ b/package/ctcgfw/luci-theme-argonv3/htdocs/luci-static/argon/img/volume_off.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1597500723732" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9385" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M484.430769 51.2L236.307692 354.461538H118.153846c-43.323077 0-78.769231 35.446154-78.769231 78.769231v157.538462c0 43.323077 35.446154 78.769231 78.769231 78.769231h118.153846l248.123077 303.261538c25.6 25.6 66.953846 7.876923 66.953846-27.569231V78.769231c0-35.446154-43.323077-53.169231-66.953846-27.569231zM882.215385 512l96.492307-96.492308c7.876923-7.876923 7.876923-19.692308 0-27.56923l-27.56923-27.569231c-7.876923-7.876923-19.692308-7.876923-27.569231 0L827.076923 456.861538l-96.492308-96.492307c-7.876923-7.876923-19.692308-7.876923-27.56923 0l-27.569231 27.569231c-7.876923 7.876923-7.876923 19.692308 0 27.56923l96.492308 96.492308-96.492308 96.492308c-7.876923 7.876923-7.876923 19.692308 0 27.56923l27.569231 27.569231c7.876923 7.876923 19.692308 7.876923 27.56923 0l96.492308-96.492307 96.492308 96.492307c7.876923 7.876923 19.692308 7.876923 27.569231 0l27.56923-27.569231c7.876923-7.876923 7.876923-19.692308 0-27.56923L882.215385 512z" p-id="9386" fill="#ffffff"></path></svg>
\ No newline at end of file
diff --git a/package/ctcgfw/luci-theme-argonv3/htdocs/luci-static/argon/js/script.js b/package/ctcgfw/luci-theme-argonv3/htdocs/luci-static/argon/js/script.js
index 66e3fc0ec6..a627f4e743 100644
--- a/package/ctcgfw/luci-theme-argonv3/htdocs/luci-static/argon/js/script.js
+++ b/package/ctcgfw/luci-theme-argonv3/htdocs/luci-static/argon/js/script.js
@@ -199,16 +199,12 @@
     $(".showSide").click(function () {
         if (showSide) {
             $(".darkMask").stop(true).fadeOut("fast");
-            $(".main-left").stop(true).animate({
-                width: "0"
-            }, "fast");
+            $(".main-left").width(0);
             $(".main-right").css("overflow-y", "auto");
             showSide = false;
         } else {
             $(".darkMask").stop(true).fadeIn("fast");
-            $(".main-left").stop(true).animate({
-                width: "15rem"
-            }, "fast");
+            $(".main-left").width("15rem");
             $(".main-right").css("overflow-y", "hidden");
             showSide = true;
         }
@@ -219,9 +215,7 @@
         if (showSide) {
             showSide = false;
             $(".darkMask").stop(true).fadeOut("fast");
-            $(".main-left").stop(true).animate({
-                width: "0"
-            }, "fast");
+            $(".main-left").width(0);
             $(".main-right").css("overflow-y", "auto");
         }
     });
diff --git a/package/ctcgfw/luci-theme-argonv3/htdocs/luci-static/argon/less/cascade.less b/package/ctcgfw/luci-theme-argonv3/htdocs/luci-static/argon/less/cascade.less
index 595bba4484..cbc3381a70 100644
--- a/package/ctcgfw/luci-theme-argonv3/htdocs/luci-static/argon/less/cascade.less
+++ b/package/ctcgfw/luci-theme-argonv3/htdocs/luci-static/argon/less/cascade.less
@@ -39,6 +39,17 @@
 @import url("pure-min.css?v=1");
 
 :root {
+    --primary: #5e72e4;
+    --dark-primary: #5065d8;
+    --white: #fff;
+    --darker: black;
+    --default: #525461;
+    --background-color: #f4f5f7;
+    --warning: #fb6340;
+    --footer-color:#aaa;
+    --menubar-background:#fff;
+    --menubar-scrollbar-thumb:#f6f9fc;
+    --menubar-text-color:#4c4c4c;
     --blue: #5e72e4;
     --indigo: #5603ad;
     --purple: #8965e0;
@@ -54,25 +65,26 @@
     --gray-dark: #32325d;
     --light: #ced4da;
     --lighter: #e9ecef;
-    --primary: #5e72e4;
     --secondary: #f7fafc;
     --success: #2dce89;
     --info: #11cdef;
-    --warning: #fb6340;
     --danger: #f5365c;
     --light: #adb5bd;
     --dark: #212529;
-    --default: #172b4d;
-    --white: #fff;
+    
+    
     --neutral: #fff;
-    --darker: black;
-    --background-color: #f4f5f7;
+    
     --login-form-bg-color: rgba(244, 245, 247, 0.8);
     --breakpoint-xs: 0;
     --breakpoint-sm: 576px;
     --breakpoint-md: 768px;
     --breakpoint-lg: 992px;
     --breakpoint-xl: 1200px;
+    --blur-radius:10px;
+    --blur-opacity:0.5;
+    --blur-radius-dark:10px;
+    --blur-opacity-dark:0.5;
     --font-family-sans-serif: "Google Sans", "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica", "Hiragino Sans GB";
     --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
     --font-family-normal: Open Sans, PingFangSC-Regular, Microsoft Yahei, WenQuanYi Micro Hei, "Helvetica Neue", Helvetica, Hiragino Sans GB, sans-serif;
@@ -104,11 +116,13 @@ body {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    -webkit-tap-highlight-color:transparent;
+
 }
 
 ::selection {
-    background-color: var(--primary);
     background-color: #5e72e4;
+    background-color: var(--primary);
     color: #ffffff;
     color: var(--white);
 }
@@ -130,9 +144,6 @@ li {
 }
 
 
-
-
-
 /***********************
 *
 *  Login Page
@@ -155,6 +166,7 @@ li {
         align-items: center;
         justify-content: center;
         background-color: #000;
+        background-color: var(--darker);
         overflow: hidden;
         video {
             width: 100%;
@@ -162,6 +174,21 @@ li {
         }
     }
 
+    .volume-control{
+        position: fixed;
+        right: 1rem;
+        top: 1rem;
+        width: 1.5rem;
+        height: 1.5rem;
+        z-index: 5000;
+        cursor: pointer;
+        background-size: contain;
+        background-image: url(../img/volume_high.svg);
+        &.mute{
+            background-image: url(../img/volume_off.svg);
+        }
+    }
+
     .login-container {
         height: 100%;
         margin-left: 4.5rem;
@@ -189,7 +216,8 @@ li {
             width: 100%;
             min-height: 100%;
             max-width: 420px;
-            background-color: rgb(255, 255, 255);
+            background-color: #fff;
+            background-color: var(--white);
 
             .brand {
                 display: flex;
@@ -197,6 +225,7 @@ li {
                 align-items: center;
                 margin: 50px auto 100px 50px;
                 color: #525461;
+                color: var(--default);
 
                 .icon {
                     width: 50px;
@@ -242,6 +271,7 @@ li {
                         -webkit-font-smoothing: antialiased;
                         -moz-osx-font-smoothing: grayscale;
                         color: #525461;
+                        color: var(--default);
                         font-size: 1.5rem;
                         position: absolute;
                         z-index: 100;
@@ -255,6 +285,7 @@ li {
                         height: 1px;
                         bottom: 0;
                         border-bottom: 1px #5e72e4 solid;
+                        border-bottom: 1px var(--primary) solid;
                         transform: scaleX(0);
                         transition: transform 0.3s;
                     }
@@ -269,9 +300,11 @@ li {
                         box-sizing: border-box;
                         transition: all .3s cubic-bezier(.68, -.55, .265, 1.55);
                         color: #525461;
+                        color:var(--default);
                         border: 0;
                         border-radius: 0;
                         border-bottom: 1px solid #fff;
+                        border-bottom: 1px solid var(--white);
                         background-color: transparent;
                         background-clip: padding-box;
                         box-shadow: 0 3px 2px rgba(233, 236, 239, .05);
@@ -303,12 +336,14 @@ li {
                 box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 50px 0px;
                 font-weight: 600;
                 font-size: 15px;
-                color: rgb(255, 255, 255);
+                color: #fff;
+                color: var(--white);
                 text-align: center;
                 width: 100%;
                 cursor: pointer;
                 min-height: 50px;
-                background-image: linear-gradient(-135deg, rgb(134, 146, 222) 0%, rgb(120, 138, 239) 100%);
+                background-color: #5e72e4 !important;
+                background-color: var(--primary) !important;
                 border-radius: 6px;
                 outline: none;
                 border-width: initial;
@@ -322,7 +357,8 @@ li {
 
                 &:hover,
                 :focus {
-                    background-image: linear-gradient(-135deg, rgb(130, 143, 224) 0%, rgb(94, 114, 228) 100%);
+                    background-color: #5065d8 !important;
+                    background-color: var(--dark-primary) !important;
                 }
             }
 
@@ -340,6 +376,13 @@ li {
             padding: 0px 0px 30px;
             z-index: 10;
             color: #525461;
+            color: var(--default);
+            position: relative;
+            .ftc{
+                position: absolute;
+                bottom: 30px;
+                width: 100%;
+            }
 
             .luci-link {
                 display: block;
@@ -358,9 +401,9 @@ li {
 
 @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
     .login-page .login-container .login-form {
-        -webkit-backdrop-filter: blur(10px);
-        backdrop-filter: blur(10px);
-        background-color: rgba(244, 245, 247, 0.7);
+        -webkit-backdrop-filter: blur(var(--blur-radius));
+        backdrop-filter: blur(var(--blur-radius));
+        background-color: rgba(244, 245, 247, var(--blur-opacity));
 
     }
 }
@@ -396,10 +439,12 @@ header {
         height: 2rem;
         width: 100%;
         background-color: #5e72e4 !important;
+        background-color: var(--primary) !important;
     }
 
     &.bg-primary {
         background-color: #5e72e4 !important;
+        background-color: var(--primary) !important;
     }
 
     .fill {
@@ -413,6 +458,7 @@ header {
             .brand {
                 font-size: 1.5rem;
                 color: #fff;
+                color: var(--white);
                 font-family: "TypoGraphica";
                 text-decoration: none;
                 padding-left: 1rem;
@@ -435,13 +481,16 @@ header {
 ***************************/
 
 footer {
+    
     text-align: right;
     padding: 1rem;
     color: #aaa;
+    color:var(--footer-color);
     font-size: 0.8rem;
 
     a {
         color: #aaa;
+        color:var(--footer-color);
         text-decoration: none;
     }
 }
@@ -482,11 +531,12 @@ footer {
         width: calc(0% + 15rem);
         height: 100%;
         background-color: #fff !important;
+        background-color: var(--menubar-background) !important;
         box-shadow: rgba(0, 0, 0, 0.75) 0px 0px 15px -5px;
         overflow-x: auto;
         position: fixed;
         z-index: 100;
-        transition: width 0.3s ease-in-out;
+        transition: width 0.2s ease-in-out;
 
         &::-webkit-scrollbar {
             width: 5px;
@@ -494,11 +544,14 @@ footer {
         }
 
         &::-webkit-scrollbar-thumb {
-            background-color: #f6f9fc
+            background-color: #f6f9fc;
+            background-color: var(--menubar-scrollbar-thumb);
+            
         }
 
         &::-webkit-scrollbar-track {
             background-color: #fff;
+            background-color: var(--menubar-background);
         }
 
         .sidenav-header {
@@ -508,6 +561,7 @@ footer {
             .brand {
                 font-size: 1.8rem;
                 color: #5e72e4;
+                color: var(--primary);
                 font-family: "TypoGraphica", sans-serif;
                 text-decoration: none;
                 padding-left: 0;
@@ -526,6 +580,7 @@ footer {
 
                 a {
                     color: #525f7f;
+                    color: var(--default);
                     display: block;
                 }
 
@@ -551,7 +606,8 @@ footer {
                                 padding: 0.5rem 0rem 0.5rem 0;
                                 text-decoration: none;
                                 white-space: nowrap;
-                                color: rgba(0, 0, 0, .7);
+                                color: #4c4c4c;
+                                color: var(--menubar-text-color);
                                 transition: all 0.2s;
                                 font-size: 0.875rem;
 
@@ -563,12 +619,14 @@ footer {
                                     left: 0;
                                     bottom: 0;
                                     background-color: #5e72e4;
+                                    background-color: var(--primary);
                                     transition: all 0.2s;
                                 }
 
                                 &:hover {
                                     &::after {
                                         color: #000;
+                                        color:var(--darker);
                                         width: 100%;
                                     }
                                 }
@@ -3309,6 +3367,30 @@ input[name="nslookup"] {
     }
 }
 
+@media screen and (min-width: 600px) {
+    ::-webkit-scrollbar {
+        width: 10px;
+        height: 10px;
+    }
+
+    ::-webkit-scrollbar,
+    ::-webkit-scrollbar-corner {
+        background: transparent;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background: #9e9e9e;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+        background: #757575;
+    }
+
+    ::-webkit-scrollbar-thumb:active {
+        background: #424242;
+    }
+}
+
 @media screen and (max-width: 992px) {
     .main {
         .main-left {
@@ -4150,9 +4232,9 @@ input[name="nslookup"] {
 
     @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
         .login-page .login-container .login-form {
-            -webkit-backdrop-filter: blur(10px);
-            backdrop-filter: blur(10px);
-            background-color: rgba(0, 0, 0, 0.7);
+            -webkit-backdrop-filter: blur(var(--blur-radius-dark));
+            backdrop-filter: blur(var(--blur-radius-dark));
+            background-color: rgba(0, 0, 0, var(--blur-opacity-dark));
 
         }
     }
diff --git a/package/ctcgfw/luci-theme-argonv3/htdocs/luci-static/argon/less/dark.less b/package/ctcgfw/luci-theme-argonv3/htdocs/luci-static/argon/less/dark.less
index cee0b7b66a..758177f911 100644
--- a/package/ctcgfw/luci-theme-argonv3/htdocs/luci-static/argon/less/dark.less
+++ b/package/ctcgfw/luci-theme-argonv3/htdocs/luci-static/argon/less/dark.less
@@ -405,6 +405,10 @@ input:focus {
     box-shadow: none;
 }
 
+select {
+    background-color: #1e1e1e !important;
+}
+
 #cbi-dropbear h2,
 #cbi-dropbear .cbi-map-descr,
 #cbi-dropbear .cbi-map-descr abbr,
@@ -480,7 +484,7 @@ td.cbi-value-field var {
 }
 
 .node-services-vssr .block {
-    background-color: #3c3c3c !important;
+    background-color: #1e1e1e !important;
     box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, .35);
 }
 
@@ -514,6 +518,10 @@ td.cbi-value-field var {
     border-right: #1e1e1e 1px solid;
 }
 
+.main .main-right #maincontent .container p {
+    color: #ccc;
+}
+
 #xhr_poll_status>.label.success {
     color: #ccc !important;
 
@@ -568,12 +576,15 @@ fieldset[id^="cbi-apply-"] {
     color: darkorange;
 }
 
+.node-services-vssr .block h4 span{
+    color: #ccc !important;
+}
+
 @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
     .login-page .login-container .login-form {
-        -webkit-backdrop-filter: blur(10px);
-        backdrop-filter: blur(10px);
-        background-color: rgba(0, 0, 0, 0.7);
-
+        -webkit-backdrop-filter: blur(var(--blur-radius-dark));
+        backdrop-filter: blur(var(--blur-radius-dark));
+        background-color: rgba(0, 0, 0, var(--blur-opacity-dark));
     }
 }
 
diff --git a/package/ctcgfw/luci-theme-argonv3/luasrc/view/themes/argon/footer.htm b/package/ctcgfw/luci-theme-argonv3/luasrc/view/themes/argon/footer.htm
index 4cca01f5f8..19ec480a47 100644
--- a/package/ctcgfw/luci-theme-argonv3/luasrc/view/themes/argon/footer.htm
+++ b/package/ctcgfw/luci-theme-argonv3/luasrc/view/themes/argon/footer.htm
@@ -38,29 +38,42 @@
 	local tree = disp.node()
 	local categories = disp.node_childs(tree)
 %>
-                </div>
-                <footer class="mobile-hide">
-					<div>
-						<a class="luci-link" href="https://github.com/openwrt/luci">Powered by <%= ver.luciname %> (<%= ver.luciversion %>)</a> /
-						<a href="https://github.com/jerrykuku/luci-theme-argon">ArgonTheme v1.6.5</a> /
-						<%= ver.distversion %>
-						<% if #categories > 1 then %>
-						<ul class="breadcrumb pull-right" id="modemenu">
-							<% for i, r in ipairs(categories) do %>
-							<li<% if request[1] == r then %> class="active"<%end%>><a href="<%=controller%>/<%=r%>/"><%=striptags(translate(tree.nodes[r].title))%></a> <span class="divider">|</span></li>
-							<% end %>
-						</ul>
-						<% end %>
-					</div>
-                </footer>
-            </div>
-        </div>
+</div>
+<footer class="mobile-hide">
+	<div class="ftc">
+		<a class="luci-link" href="https://github.com/openwrt/luci">Powered by <%= ver.luciname %>
+			(<%= ver.luciversion %>)</a> /
+		<a href="https://github.com/jerrykuku/luci-theme-argon">ArgonTheme <%# vPKG_VERSION %></a> /
+		<%= ver.distversion %>
+		<% if #categories > 1 then %>
+		<ul class="breadcrumb pull-right" id="modemenu">
+			<% for i, r in ipairs(categories) do %>
+			<li<% if request[1] == r then %> class="active" <%end%>><a
+					href="<%=controller%>/<%=r%>/"><%=striptags(translate(tree.nodes[r].title))%></a> <span
+					class="divider">|</span></li>
+				<% end %>
+		</ul>
+		<% end %>
+	</div>
+</footer>
+</div>
+</div>
 
-    <script>
-        // thanks for Jo-Philipp Wich <jow@openwrt.org>
-        var luciLocation = <%= luci.http.write_json(luci.dispatcher.context.path) %>;
-    </script>
-    
-    <script src="<%=media%>/js/script.js"></script>
+<script>
+	// thanks for Jo-Philipp Wich <jow@openwrt.org>
+	var luciLocation = <%= luci.http.write_json(luci.dispatcher.context.path) %>;
+	var winHeight = $(window).height();
+	$(window).resize(function () {
+		var winWidth = $(window).width()
+		if(winWidth < 600){
+			var newHeight = $(this).height();
+			var keyboradHeight = newHeight - winHeight;
+			$(".ftc").css("bottom", keyboradHeight + 30);
+		}
+	})
+</script>
+
+<script src="<%=media%>/js/script.js"></script>
 </body>
+
 </html>
diff --git a/package/ctcgfw/luci-theme-argonv3/luasrc/view/themes/argon/header.htm b/package/ctcgfw/luci-theme-argonv3/luasrc/view/themes/argon/header.htm
index b4975bf868..fc62c1ee11 100644
--- a/package/ctcgfw/luci-theme-argonv3/luasrc/view/themes/argon/header.htm
+++ b/package/ctcgfw/luci-theme-argonv3/luasrc/view/themes/argon/header.htm
@@ -229,19 +229,18 @@
 	<% if css then %>
 	<style title="text/css"><%=css %></style>
 	<% end -%>
-	<script src="<%=resource%>/cbi.js?v=git-19.190.55614-35357e4"></script>
-	<script src="<%=resource%>/xhr.js?v=git-19.190.55614-35357e4"></script>
-	<script src="<%=media%>/js/jquery.min.js?v=git-19.190.55614-35357e4"></script>
+	<script src="<%=resource%>/cbi.js<%# ?v=PKG_VERSION %>"></script>
+	<script src="<%=resource%>/xhr.js<%# ?v=PKG_VERSION %>"></script>
+	<script src="<%=media%>/js/jquery.min.js<%# ?v=PKG_VERSION %>"></script>
 </head>
 
 <body
 	class="<%- if node then %><%= striptags( node.title ) %><%- end %> <% if luci.dispatcher.context.authsession then %>logged-in<% end %> lang_<%=luci.i18n.context.lang%>  ">
 
 	<div class="main">
-
 		<div class="main-left">
 			<div class="sidenav-header d-flex align-items-center">
-				<a class="brand" href="#"><%=boardinfo.hostname or "?"%> ™</a>
+				<a class="brand" href="#"><%=boardinfo.hostname or "?"%></a>
 			</div>
 			<% render_topmenu() %>
 		</div>
@@ -250,7 +249,7 @@
 				<div class="fill">
 					<div class="container">
 						<a class="showSide"></a>
-						<a class="brand" href="#"><%=boardinfo.hostname or "?"%> ™</a>
+						<a class="brand" href="#"><%=boardinfo.hostname or "?"%></a>
 						<div class="pull-right">
 							<% render_changes() %>
 							<span id="xhr_poll_status" style="display:none"
@@ -265,7 +264,6 @@
 				</div>
 			</header>
 			<div class="darkMask"></div>
-			
 			<div id="maincontent">
 				<div class="container">
 					<%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%>
diff --git a/package/ctcgfw/luci-theme-argonv3/luasrc/view/themes/argon/header_login.htm b/package/ctcgfw/luci-theme-argonv3/luasrc/view/themes/argon/header_login.htm
index 40b80b68ce..733f1c8384 100644
--- a/package/ctcgfw/luci-theme-argonv3/luasrc/view/themes/argon/header_login.htm
+++ b/package/ctcgfw/luci-theme-argonv3/luasrc/view/themes/argon/header_login.htm
@@ -47,147 +47,7 @@
 	local c = tree
 	local i, r
 	
-
-	
-	-- tag all nodes leading to this page
-	for i, r in ipairs(request) do
-		if c.nodes and c.nodes[r] then
-			c = c.nodes[r]
-			c._menu_selected = true
-		end
-	end
-
-	-- send as HTML5
-	http.prepare_content("text/html")
-
-	local function nodeurl(prefix, name, query)
-		local u = url(prefix, name)
-		if query then
-			u = u .. http.build_querystring(query)
-		end
-		return pcdata(u)
-	end
-
-	local function render_tabmenu(prefix, node, level)
-		if not level then
-			level = 1
-		end
-
-		local childs = disp.node_childs(node)
-		if #childs > 0 then
-			if level > 2 then
-				write('<ul class="tabs">')
-			end
-
-			local selected_node
-			local selected_name
-			local i, v
-
-			for i, v in ipairs(childs) do
-				local nnode = node.nodes[v]
-				if nnode._menu_selected then
-					selected_node = nnode
-					selected_name = v
-				end
-
-				if level > 2 then
-					write('<li class="tabmenu-item-%s %s"><a href="%s">%s</a></li>' %{
-						v, (nnode._menu_selected or (node.leaf and v == leaf)) and 'active' or '',
-						nodeurl(prefix, v, nnode.query),
-						striptags(translate(nnode.title))
-					})
-				end
-			end
-
-			if level > 2 then
-				write('</ul>')
-			end
-
-			if selected_node then
-				render_tabmenu(prefix .. "/" .. selected_name, selected_node, level + 1)
-			end
-		end
-	end
-
-	local function render_submenu(prefix, node)
-		local childs = disp.node_childs(node)
-		if #childs > 0 then
-			write('<ul class="slide-menu">')
-
-			for i, r in ipairs(childs) do
-				local nnode = node.nodes[r]
-				local title = pcdata(striptags(translate(nnode.title)))
-
-				write('<li><a data-title="%s" href="%s">%s</a></li>' %{
-					title,
-					nodeurl(prefix, r, nnode.query),
-					title
-				})
-			end
-
-			write('</ul>')
-		end
-	end
-
-	local function render_topmenu()
-		local childs = disp.node_childs(cattree)
-		if #childs > 0 then
-			write('<ul class="nav">')
-
-			for i, r in ipairs(childs) do
-				local nnode = cattree.nodes[r]
-				local grandchildren = disp.node_childs(nnode)
-
-				if #grandchildren > 0 then
-					local title = pcdata(striptags(translate(nnode.title)))
-                                        local en_title = pcdata(striptags(string.gsub(nnode.title," ","_")))
-					write('<li class="slide"><a class="menu" data-title="%s" href="#">%s</a>' %{
-						en_title,
-						title
-					})
-
-					render_submenu(category .. "/" .. r, nnode)
-					write('</li>')
-				else
-					local title = pcdata(striptags(translate(nnode.title)))
-                                        local en_title = pcdata(striptags(nnode.title))
-					write('<li  class="slide"><a  class="menu exit" data-title="%s" href="%s">%s</a></li>' %{
-						en_title,
-						nodeurl(category, r, nnode.query),
-						title
-					})
-				end
-			end
-
-			write('</ul>')
-		end
-	end
-
-	local function render_changes()
-		-- calculate the number of unsaved changes
-		if tree.nodes[category] and tree.nodes[category].ucidata then
-			local ucichanges = 0
-			for i, j in pairs(require("luci.model.uci").cursor():changes()) do
-				for k, l in pairs(j) do
-					for m, n in pairs(l) do
-						ucichanges = ucichanges + 1;
-					end
-				end
-			end
-
-			if ucichanges > 0 then
-				write('<a class="uci_change_indicator label notice" href="%s?redir=%s">%s: %d</a>' %{
-					url(category, 'uci/changes'),
-					http.urlencode(http.formvalue('redir') or table.concat(disp.context.request, "/")),
-					translate('Unsaved Changes'),
-					ucichanges
-				})
-			end
-		end
-	end
-	
-	math.randomseed(os.time())
-    
+	math.randomseed(tonumber(tostring(os.time()):reverse():sub(1, 9)))
 -%>
 
 <!DOCTYPE html>
@@ -195,8 +55,8 @@
 <head>
 	<meta charset="utf-8">
 	<title>
-		<%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %>
-		- LuCI</title>
+	<%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI
+	</title>
 	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
 	<meta name="format-detection" content="telephone=no, email=no" />
 	<meta name="apple-mobile-web-app-capable" content="yes">
@@ -233,49 +93,10 @@
 	<% if css then %>
 	<style title="text/css"><%=css %></style>
 	<% end -%>
-	<script src="<%=resource%>/cbi.js?v=1.6.4"></script>
-	<script src="<%=resource%>/xhr.js?v=1.6.4"></script>
-	<script src="<%=media%>/js/jquery.min.js?v=1.6.4"></script>
+	<script src="<%=resource%>/cbi.js<%# ?v=PKG_VERSION %>"></script>
+	<script src="<%=resource%>/xhr.js<%# ?v=PKG_VERSION %>"></script>
+	<script src="<%=media%>/js/jquery.min.js<%# ?v=PKG_VERSION %>"></script>
 </head>
 
 <body class="<%- if node then %><%= striptags( node.title ) %><%- end %> <% if luci.dispatcher.context.authsession then %>logged-in<% end %> lang_<%=luci.i18n.context.lang%>  ">
-	<div class="login-page">
-        <%
-        function glob(...)
-            local iter, code, msg = fs.glob(...)
-            if iter then
-                return nutil.consume(iter)
-            else
-                return nil, code, msg
-            end
-        end
-        function getExtension(str)
-            return str:match(".+%.(%w+)$")
-        end
-        local videocount = 0
-        local attr = {}
-        local vvits = {}
-        local theme_dir = "/luci-static/argon/background/"
-        for i, f in ipairs(glob("/www" .. theme_dir .. "*")) do
-            attr = fs.stat(f)
-            if attr then
-                local ext = getExtension(fs.basename(f))
-                if ext == "mp4" then
-                    vvits[videocount] = theme_dir .. fs.basename(f)
-                    videocount = videocount + 1
-                end
-                
-            end
-        end
-        
-        if videocount > 0 then
-        %>
-        <div class="video">
-            <video autoplay="" loop="" muted="" >
-                    <source src="<%=vvits[math.random(0,videocount-1)]%>" type="video/mp4">
-            </video>
-        </div>
-        <% end %>
-
-		<div class="login-container">
-			<div class="login-form">
\ No newline at end of file
+	
\ No newline at end of file
diff --git a/package/ctcgfw/luci-theme-argonv3/luasrc/view/themes/argon/sysauth.htm b/package/ctcgfw/luci-theme-argonv3/luasrc/view/themes/argon/sysauth.htm
index 8d4cd55168..4eb10ccfb4 100644
--- a/package/ctcgfw/luci-theme-argonv3/luasrc/view/themes/argon/sysauth.htm
+++ b/package/ctcgfw/luci-theme-argonv3/luasrc/view/themes/argon/sysauth.htm
@@ -1,9 +1,27 @@
 <%#
- Copyright 2008 Steven Barth <steven@midlink.org>
- Copyright 2008-2012 Jo-Philipp Wich <jow@openwrt.org>
- Licensed to the public under the Apache License 2.0.
+	Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI and Argon Template
+
+	luci-theme-argon
+	Copyright 2020 Jerryk <jerrykuku@gmail.com>
+
+	Have a bug? Please create an issue here on GitHub!
+	https://github.com/jerrykuku/luci-theme-argon/issues
+
+	luci-theme-bootstrap:
+	Copyright 2008 Steven Barth <steven@midlink.org>
+	Copyright 2008-2016 Jo-Philipp Wich <jow@openwrt.org>
+	Copyright 2012 David Menting <david@nut-bolt.nl>
+
+	MUI:
+	https://github.com/muicss/mui
+	
+	Agron Theme
+	https://demos.creative-tim.com/argon-dashboard/index.html
+
+	Licensed to the public under the Apache License 2.0
 -%>
 
+
 <%+header_login%>
 <%
 	local util = require "luci.util"
@@ -11,6 +29,7 @@
 	local fs	= require "nixio.fs"
 	local nutil = require "nixio.util"
 
+	-- get files from folder
 	function glob(...)
 		local iter, code, msg = fs.glob(...)
 		if iter then
@@ -20,113 +39,137 @@
 		end
 	end
 
+	-- get file extension
 	function getExtension(str)
 		return str:match(".+%.(%w+)$")
 	end
 
 	local bgcount = 0
-	local videocount = 0
-	local inits,attr = {}
-    local vvits = {}
-	local theme_dir = "/luci-static/argon/background/"
+	local currentBg = {}
+	local bgs,attr = {}
+	local theme_dir = media .. "/background/"
 	for i, f in ipairs(glob("/www" .. theme_dir .. "*")) do
 		attr = fs.stat(f)
 		if attr then
 			local ext = getExtension(fs.basename(f))
-			if ext == "jpg" or ext == "png" or ext == "gif" then
-				inits[bgcount] = theme_dir .. fs.basename(f)
+			if ext == "jpg" or ext == "png" or ext == "gif" or ext == "mp4" then
+				local bg = {}
+				bg.type = ext
+				bg.url = theme_dir .. fs.basename(f)
+				table.insert(bgs,bg)
 				bgcount = bgcount + 1
-            elseif ext == "mp4" then
-                vvits[videocount] = theme_dir .. fs.basename(f)
-                videocount = videocount + 1
 			end
-			
 		end
 	end
+
+
+	if bgcount > 0 then
+		currentBg =  bgs[math.random(1,bgcount)]
+	end
+
+
 %>
-<a class="brand" href="/"><img src="/luci-static/argon/img/argon.svg" class="icon"><span
-		class="brand-text"><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %></span></a>
-<form class="form-login" method="post" action="<%=pcdata(luci.http.getenv("REQUEST_URI"))%>">
-
-	<%- if fuser then %>
-	<div class="errorbox"><%:Invalid username and/or password! Please try again.%></div>
-	<% end -%>
-
-
-	<div class="input-container">
-		<div class="input-group user-icon">
-			<input class="cbi-input-user" id="cbi-input-user" type="text" name="luci_username" value="<%=duser%>" />
-			<label class="border" for="cbi-input-user"></label>
-		</div>
-		<div class="input-group pass-icon">
-			<input class="cbi-input-password" id="cbi-input-password" type="password" name="luci_password" />
-			<label class="border" for="cbi-input-password"></label>
-		</div>
-
-
+<div class="login-page">
+	<% if (bgcount > 0 and currentBg.type == "mp4") then %>
+	<div class="video">
+		<video autoplay loop muted id="video">
+			<source src="<%=currentBg.url%>" type="video/mp4">
+		</video>
 	</div>
+	<div class="volume-control mute"></div>
+	
+	<script>
+		$(".volume-control").click(function(){
+			if($(this).hasClass("mute")){
+				$(this).removeClass("mute")
+				$("#video").prop('muted', false);
+			}else{
+				$(this).addClass("mute")
+				$("#video").prop('muted', true);
+			}
+		})
+	</script>
+	<% end %>
+	<div class="login-container">
+		<div class="login-form">
+			<a class="brand" href="/"><img src="<%=media%>/img/argon.svg" class="icon"><span
+					class="brand-text"><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %></span></a>
+			<form class="form-login" method="post" action="<%=pcdata(luci.http.getenv("REQUEST_URI"))%>">
+				<%- if fuser then %>
+				<div class="errorbox"><%:Invalid username and/or password! Please try again.%></div>
+				<% end -%>
+				<div class="input-container">
+					<div class="input-group user-icon">
+						<input class="cbi-input-user" id="cbi-input-user" type="text" name="luci_username"
+							value="<%=duser%>" />
+						<label class="border" for="cbi-input-user"></label>
+					</div>
+					<div class="input-group pass-icon">
+						<input class="cbi-input-password" id="cbi-input-password" type="password"
+							name="luci_password" />
+						<label class="border" for="cbi-input-password"></label>
+					</div>
+				</div>
+				<div>
+					<input type="submit" value="<%:Login%>" class="cbi-button cbi-button-apply" />
+				</div>
+			</form>
+			<script type="text/javascript">//<![CDATA[
+				var input = document.getElementsByName('luci_password')[0];
+				if (input)
+					input.focus();
+			//]]></script>
+			<%
+			if (bgcount == 0 ) then
+				local bingjson = "{}"
+				local http = require "socket.http"
+				local bing = http.request("http://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=en-US")
+				if (bing and bing ~= '') then
+					bingjson = bing
+				end
+			%>
+			<script type="text/javascript">//<![CDATA[
+				try {
+					var bing = <%=bingjson%>;
+					var bg = "https://www.bing.com" + bing.images[0].url;
+					$(".login-page").css("background-image", "url(" + bg + ")");
+				} catch{
+					console.log("can not access bing api");
+					$(".login-page").css("background-image", "url(<%=media%>/img/bg1.jpg)");
+				}
+		//]]></script>
+			<% elseif  (bgcount > 0 and currentBg["type"] ~= "mp4") then%>
+			<script type="text/javascript">//<![CDATA[
+				console.log("can not access bing api");
+				$(".login-page").css("background-image", "url(<%=currentBg.url%>)");
 
-	<div>
-		<input type="submit" value="<%:Login%>" class="cbi-button cbi-button-apply" />
-	</div>
-</form>
+		//]]></script>
 
-<%
+			<%
+			end 
 
-if (bgcount == 0 and videocount == 0) then
-    local bingjson = "{}"
-	local bing = string.gsub(luci.sys.exec("content=`wget --no-check-certificate -q -O - 'http://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=en-US'`;echo $content"), "\n", "")
-    if (bing and bing ~= '') then
-        bingjson = bing
-    end
-%>
-<script type="text/javascript">//<![CDATA[
-	var input = document.getElementsByName('luci_password')[0];
-	if (input)
-		input.focus();
-	try {
-		var bing = <%=bingjson%>;
-		var bg = "https://www.bing.com" + bing.images[0].url;
-		$(".login-page").css("background-image", "url(" + bg + ")");
-	} catch{
-		console.log("can not access bing api");
-		$(".login-page").css("background-image", "url(/luci-static/argon/img/bg1.jpg)");
-	}
+			local uci  = require "luci.model.uci".cursor()
+			local fs  = require "nixio.fs"
+			local https_key = uci:get("uhttpd", "main", "key")
+			local https_port = uci:get("uhttpd", "main", "listen_https")
+			if type(https_port) == "table" then
+				https_port = https_port[1]
+			end
 
-//]]></script>
-<% elseif  videocount == 0 then%>
-<script type="text/javascript">//<![CDATA[
-	console.log("can not access bing api");
-	$(".login-page").css("background-image", "url(<%=inits[math.random(0,bgcount-1)]%>)");
+			if https_port and fs.access(https_key) then
+				https_port = https_port:match("(%d+)$")
+			%>
+			<script type="text/javascript">//<![CDATA[
+				if (document.location.protocol != 'https:') {
+					var url = 'https://' + window.location.hostname + ':' + '<%=https_port%>' + window.location.pathname;
+					var img = new Image;
+					img.onload = function () { window.location = url };
+					img.src = 'https://' + window.location.hostname + ':' + '<%=https_port%>' + '<%=resource%>/cbi/up.gif?' + Math.random();;
+					setTimeout(function () {
+						img.src = ''
+					}, 5000);
+				}
+		//]]></script>
+			<% end %>
 
-//]]></script>
-
-<% end %>
-<%
-local uci  = require "luci.model.uci".cursor()
-local fs  = require "nixio.fs"
-local https_key = uci:get("uhttpd", "main", "key")
-local https_port = uci:get("uhttpd", "main", "listen_https")
-if type(https_port) == "table" then
-	https_port = https_port[1]
-end
-
-if https_port and fs.access(https_key) then
-	https_port = https_port:match("(%d+)$")
-%>
-
-<script type="text/javascript">//<![CDATA[
-	if (document.location.protocol != 'https:') {
-		var url = 'https://' + window.location.hostname + ':' + '<%=https_port%>' + window.location.pathname;
-		var img = new Image;
-		img.onload = function () { window.location = url };
-		img.src = 'https://' + window.location.hostname + ':' + '<%=https_port%>' + '<%=resource%>/cbi/up.gif?' + Math.random();;
-		setTimeout(function () {
-			img.src = ''
-		}, 5000);
-	}
-//]]></script>
-
-<% end %>
-
-<%+footer%>
+			<%+footer%>