diff --git a/luci-theme-argonne/Makefile b/luci-theme-argonne/Makefile
index 97554d419..2758df01c 100644
--- a/luci-theme-argonne/Makefile
+++ b/luci-theme-argonne/Makefile
@@ -7,9 +7,9 @@
 include $(TOPDIR)/rules.mk
 
 LUCI_TITLE:=Argonne kenzo
-LUCI_DEPENDS:=
-PKG_VERSION:=1.7.3
-PKG_RELEASE:=2
+LUCI_DEPENDS:=+curl +jsonfilter
+PKG_VERSION:=1.7.7
+PKG_RELEASE:=1
 
 include $(TOPDIR)/feeds/luci/luci.mk
 
diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/css/cascade.css b/luci-theme-argonne/htdocs/luci-static/argonne/css/cascade.css
index 6ecaa729d..697097e90 100644
--- a/luci-theme-argonne/htdocs/luci-static/argonne/css/cascade.css
+++ b/luci-theme-argonne/htdocs/luci-static/argonne/css/cascade.css
@@ -2,7 +2,6 @@
  *  Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argonne Template
  *
  *  luci-theme-argonne
- *      Copyright 2020 Jerryk <jerrykuku@gmail.com>
  *
  *  Have a bug? Please create an issue here on GitHub!
  *      https://github.com/kenzok78/luci-theme-argonne/issues
@@ -18,7 +17,7 @@
  *  luci-theme-material:
  *      https://github.com/LuttyYang/luci-theme-material/
  *
- *  Agron Theme
+ *  Argonne Theme
  *	    https://demos.creative-tim.com/argon-dashboard/index.html
  *
  *  Login background
@@ -315,7 +314,7 @@ li {
   position: relative;
 }
 .login-page .login-container .login-form .form-login .input-group::before {
-  font-family: 'argon' !important;
+  font-family: 'argonne' !important;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
@@ -633,7 +632,7 @@ footer a {
   position: relative;
 }
 .main .main-left .nav li.slide .menu::before {
-  font-family: 'argon' !important;
+  font-family: 'argonne' !important;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
@@ -652,7 +651,7 @@ footer a {
   position: absolute;
   right: 0.5rem;
   top: 0.8rem;
-  font-family: 'argon' !important;
+  font-family: 'argonne' !important;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
@@ -889,7 +888,7 @@ footer a {
   box-shadow: 0 0px 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
 }
 .cbi-button:active {
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.19), 0 5px 5px rgba(0, 0, 0, 0.23);
 }
 .cbi-button:disabled {
   cursor: not-allowed;
@@ -947,6 +946,34 @@ form.inline + form.inline,
 .cbi-value-field .cbi-button-neutral {
   min-width: 2.5rem !important;
 }
+/* Replace LuCI's default file and folder type icons */
+img[src="/luci-static/resources/cbi/reload.gif"] {
+  content: url("/luci-static/argonne/img/reload.webp");
+}
+img[src="/luci-static/resources/cbi/file.gif"] {
+  content: url("/luci-static/argonne/img/file.webp");
+}
+img[src="/luci-static/resources/cbi/add.gif"] {
+  content: url("/luci-static/argonne/img/add.webp");
+}
+img[src="/luci-static/resources/cbi/remove.gif"] {
+  content: url("/luci-static/argonne/img/remove.webp");
+}
+img[src="/luci-static/resources/cbi/edit.gif"] {
+  content: url("/luci-static/argonne/img/edit.webp");
+}
+img[src="/luci-static/resources/cbi/fieldadd.gif"] {
+  content: url("/luci-static/argonne/img/fieldadd.webp");
+}
+img[src="/luci-static/resources/cbi/link.gif"] {
+  content: url("/luci-static/argonne/img/link.webp");
+}
+img[src="/luci-static/resources/cbi/find.gif"] {
+  content: url("/luci-static/argonne/img/find.webp");
+}
+img[src="/luci-static/resources/cbi/folder.gif"] {
+  content: url("/luci-static/argonne/img/folder.webp");
+}
 /* input */
 .cbi-value input[type="password"],
 .cbi-value input[type="text"] {
@@ -1055,12 +1082,13 @@ input[type="checkbox"] {
   appearance: none !important;
   -webkit-appearance: none !important;
   border: 1px solid #dee2e6;
-  width: 16px !important;
-  height: 16px !important;
+  width: 17px !important;
+  height: 17px !important;
   padding: 0;
   cursor: pointer;
   transition: all 0.2s;
-  margin: 0.9rem 0.25rem 0 0.25rem;
+  margin: 0.5rem 0.25rem 0.7rem 0.25rem;
+  vertical-align: middle;
 }
 input[type="checkbox"]:checked {
   border: 1px solid #5e72e4;
@@ -1073,7 +1101,8 @@ input[type="checkbox"]:checked {
   background-position: center;
 }
 ul li .cbi-input-checkbox {
-  margin: 0.5rem 0.25rem !important;
+  margin: 0.5rem 0.25rem 0.7rem 0.25rem !important;
+  vertical-align: middle !important;
 }
 .cbi-input-radio {
   appearance: none !important;
@@ -1186,7 +1215,7 @@ ul li .cbi-input-checkbox {
 }
 .cbi-section-create {
   margin: 0;
-  padding-left: 1rem;
+  padding-left: 0.5rem;
   align-items: center;
 }
 .cbi-section-create > * {
@@ -1245,10 +1274,41 @@ small {
 .cbi-section > legend {
   display: none !important;
 }
-.cbi-section-error {
-  padding: 1.5rem;
-  color: #fb6340;
+/* Define the error text border breathe display animation */
+@keyframes error-border-breathe {
+  0%{
+    border-color: #fb6340;
+  }
+  50%{
+    border-color: transparent;
+  }
+  100%{
+    border-color: #fb6340;
+  }
+}
+/* Center display error text box */
+.cbi-section-error > ul{
+  text-align: center;
+}
+/* Add border for error text box, and border breathe display animation to make it more noticeable */
+.cbi-section-error > ul > li {
   font-weight: 600;
+  max-width: 60%;
+  color: #fb6340;
+  line-height: 1rem;
+  display: inline-block;
+  border: 2px solid #fb6340;
+  border-radius: 0.3rem;
+  animation: error-border-breathe 1.5s ease-in-out infinite;
+  padding-left: 4px;
+  padding-right: 4px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+.cbi-input-invalid, 
+.cbi-value-error input {
+  color: #fb6340;
+  border: 1px dashed #fb6340;
 }
 fieldset > fieldset {
   margin: 0;
@@ -1309,6 +1369,7 @@ input[name="nslookup"] {
   height: 1.6rem !important;
   line-height: 1.6rem;
   border-radius: 0.25rem;
+  overflow: hidden;
 }
 #swaptotal > div > div,
 #swapfree > div > div,
@@ -1400,6 +1461,30 @@ td > table > tbody > tr > td,
 .a-to-btn {
   text-decoration: none;
 }
+/* file selector button */
+::file-selector-button {
+  color: #fff;
+  border-radius: .25rem;
+  border: 1px solid #2e6da4;
+  padding: .4rem .5rem;
+  background-color: #337ab7;
+  box-sizing: border-box;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+::file-selector-button:hover,
+::file-selector-button:focus,
+::file-selector-button:active {
+  outline: 0;
+  text-decoration: none;
+}
+::file-selector-button:hover,
+::file-selector-button:focus {
+  box-shadow: 0 0px 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
+}
+::file-selector-button:active {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.19), 0 5px 5px rgba(0, 0, 0, 0.23);
+}
 /* table */
 .cbi-section-table .cbi-section-table-titles .cbi-section-table-cell {
   width: auto !important;
@@ -1514,6 +1599,40 @@ td > table > tbody > tr > td,
 #cbi-network-switch_vlan .td {
   flex-basis: 12%;
 }
+/* Fix background color of table-titles */
+.cbi-section-node > .cbi-section-table > tbody > .cbi-section-table-titles th {
+  background-color: var(--lighter);
+  border: none;
+}
+/* Fix background color of table-descr */
+.cbi-section-node > .cbi-section-table > tbody > .cbi-section-table-descr th {
+  border: none;
+}
+/* Fix background color not change when the H tag is in the table rowstyle-1 */
+.cbi-section-node > .cbi-section-table > tbody > .cbi-rowstyle-1 th {
+  background-color: #fff;
+  border-top: 1px solid #ddd;
+  border-bottom: none;
+}
+/* Fix background color not change when the H tag is in the table rowstyle-2 */
+.cbi-section-node > .cbi-section-table > tbody > .cbi-rowstyle-2 th {
+  background-color: #f9f9f9;
+  border-top: 1px solid #ddd;
+  border-bottom: none;
+}
+/* Change the color of the H label in the table to make it more visible */
+th h1, td h1,
+th h2, td h2,
+th h3, td h3,
+th h4, td h4,
+th h5, td h5,
+th h6, td h6 {
+  background: var(--lighter);
+}
+/* OCD: Change the background color of the "now in use" node in PassWall  */
+.cbi-section-table > tbody > ._now_use {
+  background: #5e72e473 !important;
+}
 /* language fix */
 body.lang_pl.node-main-login .cbi-value-title {
   width: 12rem;
@@ -1634,7 +1753,7 @@ body.lang_pl.node-main-login .cbi-value-title {
 .cbi-value-helpicon,
 .showSide,
 .main > .loading > span {
-  font-family: 'argon' !important;
+  font-family: 'argonne' !important;
   font-style: normal !important;
   font-weight: normal !important;
   font-variant: normal !important;
@@ -1777,12 +1896,20 @@ table > thead > tr > th,
 .cbi-section-table-row:last-child {
   margin-bottom: 0;
 }
+.cbi-section-table-row > .cbi-value-field .cbi-dropdown,
 .cbi-section-table-row > .cbi-value-field .cbi-input-select,
 .cbi-section-table-row > .cbi-value-field .cbi-input-text,
-.cbi-section-table-row > .cbi-value-field .cbi-input-password,
-.cbi-section-table-row > .cbi-value-field .cbi-dropdown {
+.cbi-section-table-row > .cbi-value-field .cbi-input-password {
   width: 100%;
 }
+.cbi-section-table-row > .cbi-value-field .cbi-input-text,
+.cbi-section-table-row > .cbi-value-field .cbi-input-password {
+  min-width: 100px;
+}
+#lease6_status_table > tbody > .cbi-section-table-row.cbi-rowstyle-1 div,
+#lease6_status_table > tbody > .cbi-section-table-row.cbi-rowstyle-2 div {
+  min-width: 100%;
+}
 .cbi-section-table-row > .cbi-value-field [data-dynlist] > input,
 .cbi-section-table-row > .cbi-value-field input.cbi-input-password {
   width: calc(100% - 1.5rem);
@@ -1800,10 +1927,27 @@ div > .table > .tbody > .tr:nth-of-type(2n) {
   background-color: var(--danger) !important;
   color: #fff !important;
 }
-.warning {
-  background-color: #fb6340 !important;
-  background-color: var(--warning) !important;
-  color: #fff !important;
+/* Define the warning background-color breathe display animation */
+@keyframes warning-background-color-breathe {
+  0%{
+    color: #fff;
+    background-color: #fb6340;
+  }
+  50%{
+    color: #32325d;
+    background-color: #fff;
+  }
+  100%{
+    color: #fff;
+    background-color: #fb6340;
+  }
+}
+.warning,
+.warning * {
+  background-color: #fb6340;
+  background-color: var(--warning);
+  color: #fff;
+  animation: warning-background-color-breathe 1.5s ease-in-out infinite !important;
 }
 .notice {
   background-color: #5e72e4 !important;
@@ -1948,7 +2092,6 @@ table > thead > tr > th {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
   letter-spacing: 1px;
-  text-transform: uppercase;
   border-bottom: 1px solid #e9ecef;
 }
 table > tbody > tr:first-child > td,
@@ -2031,7 +2174,7 @@ td > table > tbody > tr > td {
 }
 .cbi-tabmenu {
   color: white;
-  padding: 0.5rem 1rem 0 1rem;
+  padding: 0.5rem 0.5rem 0 0.5rem;
   white-space: nowrap;
   overflow-x: auto;
   border-bottom: 1px solid #ddd !important;
@@ -2297,7 +2440,7 @@ select[multiple="multiple"] {
   overflow-y: visible;
 }
 .cbi-section-node .cbi-value {
-  padding: 0.3rem 1rem 0.3rem 1rem;
+  padding: 0.5rem 1rem 0.5rem 1rem !important;
 }
 .cbi-tabcontainer > .cbi-value:nth-of-type(2n) {
   background-color: #f9f9f9;
@@ -2308,6 +2451,18 @@ select[multiple="multiple"] {
   line-height: 1.6;
   font-size: 0.875rem;
 }
+/* Fix text position of the luci-app-filebrowser running state */
+#cbi-filebrowser > .cbi-section > .cbi-section > .cbi-value > .cbi-value-field,
+/* Fix text position of the luci-apps running state of the [Control] type */
+form > .cbi-map > .cbi-section > .cbi-section-node > .cbi-value > .cbi-value-field font {
+  word-wrap: break-word;
+  font-size: 0.875rem;
+  line-height: 1.6;
+  padding: 0.7rem;
+  padding-left: 0;
+  text-align: right;
+  display: table-cell;
+}
 .cbi-value-helpicon > img {
   display: none;
 }
@@ -2327,7 +2482,6 @@ select[multiple="multiple"] {
   padding: 0.7rem;
   padding-left: 0;
   width: 23rem;
-  float: left;
   text-align: right;
   display: table-cell;
 }
@@ -2515,18 +2669,22 @@ td > .ifacebadge,
   min-width: 10rem;
   margin-top: 0.3rem;
 }
-.cbi-value-field .cbi-input-checkbox,
-.cbi-value-field .cbi-input-radio {
-  margin: 0.9rem 0.25rem 0 0.25rem;
+.cbi-value-field .cbi-input-checkbox {
+  margin: 0.5rem 0.25rem 0.7rem 0.25rem;
+  vertical-align: middle;
   height: 1rem;
   line-height: 1.6;
 }
 .cbi-input-checkbox {
-  margin: 0.9rem 0.25rem 0 0.25rem;
+  margin: 0.5rem 0.25rem 0.7rem 0.25rem;
+  vertical-align: middle;
 }
 .cbi-value-field .cbi-input-radio {
   margin: 0rem 0.25rem;
 }
+.cbi-input-radio {
+  margin: 0rem 0.25rem;
+}
 .cbi-value-field > input + .cbi-value-description {
   padding: 0;
 }
@@ -2547,7 +2705,7 @@ td > .ifacebadge,
   min-width: 7rem;
 }
 .cbi-section-create > .cbi-button-add {
-  margin: 0.5rem 0.5rem 0.5rem 0.5rem;
+  margin: 0.75rem 0.75rem 0.75rem 0.25rem;
 }
 .cbi-section-remove {
   padding: 0.5rem;
@@ -2651,6 +2809,10 @@ input[name="nslookup"] {
   border-right: 0 !important;
   background-color: #5e72e4 !important;
   background-color: var(--primary) !important;
+  height: 100% !important;
+  background-image: url(../img/trafficbar.png);
+  background-position: left top;
+  animation: sparkle 1500ms linear infinite;
 }
 .node-system-leds .cbi-section em {
   display: block;
@@ -2852,10 +3014,6 @@ input[name="nslookup"] {
   header > .fill > .container > .brand {
     display: inline-block;
   }
-  .cbi-value-title {
-    width: 9rem;
-    padding-right: 1rem;
-  }
   .node-network-diagnostics > .main .cbi-map fieldset > div * {
     width: 100% !important;
   }
@@ -2963,12 +3121,6 @@ input[name="nslookup"] {
     width: 100%;
     position: relative;
   }
-  .cbi-value-field .cbi-input-checkbox,
-  .cbi-value-field .cbi-input-radio {
-    margin: 0rem 0.25rem 0 0.25rem;
-    height: 1rem;
-    line-height: 1.6;
-  }
   .cbi-page-actions > div > input {
     display: none;
   }
@@ -3066,4 +3218,4 @@ input[name="nslookup"] {
     width: 2.3rem !important;
     height: auto;
   }
-}
+}
\ No newline at end of file
diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/css/dark.css b/luci-theme-argonne/htdocs/luci-static/argonne/css/dark.css
index 9288375fa..370cbcd08 100644
--- a/luci-theme-argonne/htdocs/luci-static/argonne/css/dark.css
+++ b/luci-theme-argonne/htdocs/luci-static/argonne/css/dark.css
@@ -1 +1,682 @@
-body{background:#1e1e1e;color:#cccccc}.login-page .login-container .login-form{background-color:#1e1e1e}.login-page .login-container .login-form .brand{color:#adb5bd}.login-page .login-container .login-form .form-login .input-group::before{color:#adb5bd}.login-page .login-container .login-form .form-login .input-group input{background-color:transparent !important;color:#adb5bd;border-bottom:#adb5bd 1px solid !important;border-radius:0;border-top:none !important;border-left:none !important;border-right:none !important;box-shadow:none}.login-page .login-container .login-form .form-login .input-group input:focus{border-top:none !important;border-left:none !important;border-right:none !important}.login-page .login-container .login-form .form-login .cbi-button-apply{background-color:#483d8b !important;background-color:var(--dark-primary) !important}.login-page .login-container .login-form .form-login .cbi-button-apply:hover,.login-page .login-container .login-form .form-login .cbi-button-apply:focus{opacity:.9}.login-page .login-container footer{color:#adb5bd}header::after{background-color:#1e1e1e !important}.main .main-left{background-color:#333333 !important;box-shadow:0 0 .5rem 0 rgba(0,0,0,0.15)}.main .main-left .sidenav-header .brand{color:#ccc}.main .main-left .nav .slide .slide-menu .active a{color:#cccccc}.main .main-left .nav .slide .slide-menu .active a::after{background-color:#cccccc !important}.main .main-left .nav .slide .slide-menu li a{color:#cccccc}.main .main-left .nav .slide .slide-menu li a:hover{background:none !important}.main .main-left .nav .slide .menu.active{background-color:#483d8b !important;background-color:var(--dark-primary) !important;color:#cccccc !important}.main .main-left .nav .slide .menu.active a::after{background-color:#cccccc !important}.main .main-left .nav li a{color:#cccccc !important}.main .main-left .nav li a:hover{background-color:#483d8b !important;background-color:var(--dark-primary) !important;color:#cccccc !important}.main .main-left::-webkit-scrollbar-thumb{background-color:#252526 !important}.main .main-left::-webkit-scrollbar-track{background-color:#333}.main .main-right{background-color:#1e1e1e}h2{color:#ccc;background:#333333}h3{color:#ccc;border-bottom:0;background:#333333}a:-webkit-any-link{color:-webkit-link;cursor:pointer;color:#483d8b;color:var(--dark-primary)}input:-webkit-autofill{background-color:#3c3c3c !important}.cbi-value-field .cbi-input-apply,.cbi-button-apply,.cbi-button-edit{color:#fff !important;background-color:#483d8b !important;background-color:var(--dark-primary) !important;border-color:#483d8b !important;border-color:var(--dark-primary) !important}.cbi-section em{color:#483d8b;color:var(--dark-primary)}header.bg-primary{background-color:#1e1e1e !important}.cbi-map-descr{color:#ccc}.cbi-section{background:none;box-shadow:0 0 .5rem 0 rgba(0,0,0,0.35)}.panel-title{color:#ccc;background-color:#333333;border-bottom:0px}table>tbody>tr>td,table>tfoot>tr>td,table>thead>tr>td{color:#ccc}fieldset>table>tbody>tr:nth-of-type(2n){background-color:#252526}table>tbody>tr>td,table>tfoot>tr>td,table>thead>tr>td{border-top:1px solid #252526}#swaptotal>div>div,#swapfree>div>div,#memfree>div>div,#membuff>div>div,#conns>div>div,#memtotal>div>div{background-color:#483d8b !important;background-color:var(--dark-primary) !important}#swaptotal>div>div>div>small,#swapfree>div>div>div>small,#memfree>div>div>div>small,#membuff>div>div>div>small,#conns>div>div>div>small,#memtotal>div>div>div>small{color:#ccc !important}.node-system-packages>.main .cbi-section-node:first-child .cbi-value-last{line-height:1.8em}.node-system-packages>.main .cbi-section-node:first-child .cbi-value-last div[style="margin:3px 0; width:300px; height:10px; border:1px solid #000000; background-color:#80C080"]{border:1px solid #999999 !important;background-color:transparent !important}.node-system-packages>.main .cbi-section-node:first-child .cbi-value-last div[style="margin:3px 0; width:300px; height:10px; border:1px solid #000000; background-color:#80C080"] div{background-color:#32325d !important}table>tbody>tr>th,table>tfoot>tr>th,table>thead>tr>th{background-color:#252526;border-bottom:black 1px solid !important}.cbi-rowstyle-2{background-color:#1e1e1e}.cbi-rowstyle-1{background-color:#252526}.cbi-section>h3:first-child,.panel-title{color:#ccc;border-bottom:0}.cbi-section-table .cbi-section-table-titles .cbi-section-table-cell{background-color:#1e1e1f}.cbi-button{color:#ccc;background-color:#252526}.cbi-section-node{background:none;border-radius:0 0 .375rem .375rem;padding:0rem}abbr{color:#483d8b;color:var(--dark-primary)}div>table>tbody>tr:nth-of-type(2n),div>.table>.tbody>.tr:nth-of-type(2n){background-color:#252526}#content_syslog{box-shadow:0 0 .5rem 0 rgba(0,0,0,0.35)}#syslog{color:#ccc;background-color:#1e1e1e}#iwsvg,#iwsvg2,#bwsvg{overflow:hidden;box-shadow:0 0 .5rem 0 rgba(0,0,0,0.35);background-color:#1e1e1e !important}.tabs{background-color:#252526}.tabs>li[class~="active"]>a{color:#ccc}.tabs>li[class~="active"],.tabs>li:hover{border-bottom:.18751rem solid #483d8b;border-bottom:.18751rem solid var(--dark-primary);color:#ccc;background-color:#181819}.cbi-tabmenu>li>a,.tabs>li>a{color:#ccc}.cbi-tabmenu>li>a:hover,.tabs>li>a:hover{color:#ccc}.cbi-tabmenu>li{background:#2d2d2d}.cbi-tabmenu{border-bottom:0 solid #ddd !important}.cbi-tabmenu li[class~="cbi-tab"] a{color:#ccc}.cbi-tabmenu>li:hover{color:#ccc;background:#2d2d2d}.cbi-tabmenu>li[class~="cbi-tab"]{background-color:#181819}.cbi-tabcontainer>.cbi-value:nth-of-type(2n){background-color:#252526}.cbi-value-title{color:#ccc}select,input{color:#ccc;background-color:transparent;border:1px solid #3c3c3c !important;box-shadow:0 3px 2px rgba(0,0,0,0.05)}select:not([multiple="multiple"]):focus,input:focus{border-color:#483d8b !important;border-color:var(--dark-primary) !important;background-color:transparent;outline:0;box-shadow:none}select{background-color:#1e1e1e !important}#cbi-dropbear h2,#cbi-dropbear .cbi-map-descr,#cbi-dropbear .cbi-map-descr abbr,#cbi-rc h2,#cbi-rc .cbi-map-descr,#cbi-distfeedconf h2,#cbi-distfeedconf .cbi-map-descr,#cbi-customfeedconf h2,#cbi-customfeedconf .cbi-map-descr,#cbi-download h2,#cbi-filelist h2{color:#ccc !important}.cbi-value-field>ul>li .ifacebadge{background-color:#3c3c3c}.cbi-section-descr{color:#ccc}.cbi-input-textarea{background-color:#1e1e1e;color:#ccc}.cbi-section-remove:nth-of-type(2n),.cbi-section-node:nth-of-type(2n){background-color:#1e1e1e}.node-system-packages>.main table tr td:nth-last-child(1){color:#ccc}.node-system-packages>.main .cbi-value>pre{background-color:#333}.cbi-section-node .cbi-value{padding:1rem 1rem .3rem 1rem}.ifacebox{background-color:none;border:1px solid #1e1e1e}.ifacebox-head{color:#666}.ifacebox-body{background-color:#333}.zonebadge strong{color:#333}.zonebadge>.ifacebadge{background-color:#3c3c3c}div.cbi-value var,td.cbi-value-field var{color:#483d8b;color:var(--dark-primary)}#diag-rc-output>pre{color:#ccc;background-color:#1e1e1e}.node-services-vssr .block{background-color:#1e1e1e !important;box-shadow:0 0 .5rem 0 rgba(0,0,0,0.35)}.node-services-vssr .block h4{color:#ccc !important}.node-services-vssr .status-bar{color:#ccc;box-shadow:0 0 .5rem 0 rgba(0,0,0,0.35);background-color:#1e1e1e}.node-services-vssr .cbi-section-table-row{color:#ccc;background-color:#3c3c3c !important;box-shadow:0 0 5px 0 rgba(0,0,0,0.35)}.node-services-vssr .cbi-section-table-row.fast{background:#483d8b !important;background:var(--dark-primary) !important;color:#fff}.node-services-vssr .ssr-button{color:#ccc}.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}.notice{background-color:#483d8b !important;background-color:var(--dark-primary) !important}.cbi-input-find,.cbi-input-save,.cbi-button-add,.cbi-button-save,.cbi-button-find,.cbi-input-reload,.cbi-button-reload{background-color:darkseagreen !important;border-color:darkseagreen !important}.cbi-button-reset,.cbi-input-remove{color:#fff !important;background-color:darkorange !important;border-color:darkorange !important}.cbi-page-actions .cbi-button-apply,.cbi-section-actions .cbi-button-edit,.cbi-button-edit.important,.cbi-button-apply.important,.cbi-button-reload.important,.cbi-button-action.important{border:1px #483d8b solid !important;border:1px var(--dark-primary) solid !important}fieldset[id^="cbi-apply-"]{background-color:#333333}#detail-bubble>div{border:1px solid #ccc;border-radius:2px;padding:5px;background:#252525}.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(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){.node-status-iptables>.main div>.cbi-map>form{background-color:#1e1e1e;box-shadow:0 0 .5rem 0 rgba(0,0,0,0.35)}}
\ No newline at end of file
+body {
+  background: #1e1e1e;
+  color: #cccccc;
+}
+
+.login-page .login-container .login-form {
+  background-color: #1e1e1e;
+}
+
+.login-page .login-container .login-form .brand {
+  color: #adb5bd;
+}
+
+.login-page .login-container .login-form .form-login .input-group::before {
+  color: #adb5bd;
+}
+
+.login-page .login-container .login-form .form-login .input-group input {
+  background-color: transparent !important;
+  color: #adb5bd;
+  border-bottom: #adb5bd 1px solid !important;
+  border-radius: 0;
+  border-top: none !important;
+  border-left: none !important;
+  border-right: none !important;
+  box-shadow: none;
+}
+
+.login-page .login-container .login-form .form-login .input-group input:focus {
+  border-top: none !important;
+  border-left: none !important;
+  border-right: none !important;
+}
+
+.login-page .login-container .login-form .form-login .cbi-button-apply {
+  background-color: #483d8b !important;
+  background-color: var(--dark-primary) !important;
+}
+
+.login-page .login-container .login-form .form-login .cbi-button-apply:hover,
+.login-page .login-container .login-form .form-login .cbi-button-apply:focus {
+  opacity: .9;
+}
+
+.login-page .login-container footer {
+  color: #adb5bd;
+}
+
+header::after {
+  background-color: #1e1e1e !important;
+}
+
+.main .main-left {
+  background-color: #333333 !important;
+  box-shadow: 0 0 .5rem 0 rgba(0,0,0,0.15);
+}
+
+.main .main-left .sidenav-header .brand {
+  color: #ccc;
+}
+
+.main .main-left .nav .slide .slide-menu .active a {
+  color: #cccccc;
+}
+
+.main .main-left .nav .slide .slide-menu .active a::after {
+  background-color: #cccccc !important;
+}
+
+.main .main-left .nav .slide .slide-menu li a {
+  color: #cccccc;
+}
+
+.main .main-left .nav .slide .slide-menu li a:hover {
+  background: none !important;
+}
+
+.main .main-left .nav .slide .menu.active {
+  background-color: #483d8b !important;
+  background-color: var(--dark-primary) !important;
+  color: #cccccc !important;
+}
+
+.main .main-left .nav .slide .menu.active a::after {
+  background-color: #cccccc !important;
+}
+
+.main .main-left .nav li a {
+  color: #cccccc !important;
+}
+
+.main .main-left .nav li a:hover {
+  background-color: #483d8b !important;
+  background-color: var(--dark-primary) !important;
+  color: #cccccc !important;
+}
+
+.main .main-left::-webkit-scrollbar-thumb {
+  background-color: #252526 !important;
+}
+
+.main .main-left::-webkit-scrollbar-track {
+  background-color: #333;
+}
+
+.main .main-right {
+  background-color: #1e1e1e;
+}
+
+h2 {
+  color: #ccc;
+  background: #333333;
+}
+
+h3 {
+  color: #ccc;
+  border-bottom: 0;
+  background: #333333;
+}
+
+a:-webkit-any-link {
+  color: -webkit-link;
+  cursor: pointer;
+  color: #483d8b;
+  color: var(--dark-primary);
+}
+
+input:-webkit-autofill {
+  background-color: #3c3c3c !important;
+}
+
+.cbi-value-field .cbi-input-apply,
+.cbi-button-apply,
+.cbi-button-edit {
+  color: #fff !important;
+  background-color: #483d8b !important;
+  background-color: var(--dark-primary) !important;
+  border-color: #483d8b !important;
+  border-color: var(--dark-primary) !important;
+}
+
+.cbi-section em {
+  color: #483d8b;
+  color: var(--dark-primary);
+}
+
+header.bg-primary {
+  background-color: #1e1e1e !important;
+}
+
+.cbi-map-descr {
+  color: #ccc;
+}
+
+.cbi-section {
+  background: none;
+  box-shadow: 0 0 .5rem 0 rgba(0,0,0,0.35);
+}
+
+.panel-title {
+  color: #ccc;
+  background-color: #333333;
+  border-bottom: 0px;
+}
+
+table>tbody>tr>td,
+table>tfoot>tr>td,
+table>thead>tr>td {
+  color: #ccc;
+}
+
+fieldset>table>tbody>tr:nth-of-type(2n) {
+  background-color: #252526;
+}
+
+table>tbody>tr>td,
+table>tfoot>tr>td,
+table>thead>tr>td {
+  border-top: 1px solid #252526;
+}
+
+#swaptotal>div>div,
+#swapfree>div>div,
+#memfree>div>div,
+#membuff>div>div,
+#conns>div>div,
+#memtotal>div>div {
+  background-color: #483d8b !important;
+  background-color: var(--dark-primary) !important;
+}
+
+#swaptotal>div>div>div>small,
+#swapfree>div>div>div>small,
+#memfree>div>div>div>small,
+#membuff>div>div>div>small,
+#conns>div>div>div>small,
+#memtotal>div>div>div>small {
+  color: #ccc !important;
+}
+
+.node-system-packages>.main .cbi-section-node:first-child .cbi-value-last {
+  line-height: 1.8em;
+}
+
+.node-system-packages>.main .cbi-section-node:first-child .cbi-value-last div[style="margin:3px 0; width:300px; height:10px; border:1px solid #000000; background-color:#80C080"] {
+  border: 1px solid #999999 !important;
+  background-color: transparent !important;
+}
+
+.node-system-packages>.main .cbi-section-node:first-child .cbi-value-last div[style="margin:3px 0; width:300px; height:10px; border:1px solid #000000; background-color:#80C080"] div {
+  background-color: #32325d !important;
+  background-color: var(--dark-primary) !important;
+}
+
+table>tbody>tr>th,
+table>tfoot>tr>th,
+table>thead>tr>th {
+  background-color: #252526;
+  border-bottom: black 1px solid !important;
+}
+
+.cbi-rowstyle-2 {
+  background-color: #2c2c2c !important;
+}
+
+.cbi-rowstyle-1 {
+  background-color: #252526;
+}
+
+.cbi-section>h3:first-child,
+.panel-title {
+  color: #ccc;
+  border-bottom: 0;
+}
+
+.cbi-section-table .cbi-section-table-titles .cbi-section-table-cell {
+  background-color: #1e1e1f;
+}
+
+.cbi-button {
+  color: #ccc;
+  background-color: #2c2c2c;
+}
+
+.cbi-rowstyle-2 .cbi-button-up,
+.cbi-rowstyle-2 .cbi-button-down {
+  background-color: #252526 !important;
+}
+
+.cbi-section-node {
+  background: none;
+  border-radius: 0 0 .375rem .375rem;
+  padding: 0rem;
+}
+
+abbr {
+  color: #483d8b;
+  color: var(--dark-primary);
+}
+
+div>table>tbody>tr:nth-of-type(2n),
+div>.table>.tbody>.tr:nth-of-type(2n) {
+  background-color: #252526;
+}
+
+/* file selector button */
+::file-selector-button {
+  border: 1px solid darkseagreen !important;
+  background-color: darkseagreen !important;
+}
+
+/* Fix background color of table-titles */
+.cbi-section-node>.cbi-section-table>tbody>.cbi-section-table-titles th {
+  background-color: #1e1e1e;
+  border: none !important;
+}
+
+/* Fix background color of table-descr */
+.cbi-section-node>.cbi-section-table>tbody>.cbi-section-table-descr th {
+  background-color: #333333;
+  border: none !important;
+}
+
+/* Fix background color not change when the H tag is in the table rowstyle-1 */
+.cbi-section-node>.cbi-section-table>tbody>.cbi-rowstyle-1 th {
+  background-color: #252526;
+  border-top: 1px solid #252526;
+  border-bottom: none !important;
+}
+
+/* Fix background color not change when the H tag is in the table rowstyle-2 */
+.cbi-section-node>.cbi-section-table>tbody>.cbi-rowstyle-2 th {
+  background-color: #2c2c2c;
+  border-top: 1px solid #252526;
+  border-bottom: none !important;
+}
+
+/* Change the color of the H label in the table to make it more visible */
+th h1, td h1,
+th h2, td h2,
+th h3, td h3,
+th h4, td h4,
+th h5, td h5,
+th h6, td h6 {
+  background: var(--gray-dark);
+}
+
+/* Improved the background color of each itemes in "UNSAVED CHANGES" (dark mode only) */
+.uci-change-list del,
+.uci-change-legend-label del {
+  background-color: #fb74008c;
+}
+.uci-change-list var,
+.uci-change-legend-label var {
+  background-color: #333333;
+}
+.uci-change-list ins,
+.uci-change-legend-label ins {
+  background-color: #00ff0a45 !important;
+}
+
+/* OCD: Compatible the background color of the "Add the node via the link" & "USE(node)" pop-up window in PassWall (dark mode only) */
+#add_link_div,
+#set_node_div {
+  background-color: #333333f0 !important;
+  box-shadow: #00000094 10px 10px 30px 5px !important;
+}
+#add_link_div>.cbi-value>.cbi-value-field>#nodes_link {
+  background: #ccc;
+}
+
+#content_syslog {
+  box-shadow: 0 0 .5rem 0 rgba(0,0,0,0.35);
+}
+
+#syslog {
+  color: #ccc;
+  background-color: #1e1e1e;
+}
+
+#iwsvg,
+#iwsvg2,
+#bwsvg {
+  overflow: hidden;
+  box-shadow: 0 0 .5rem 0 rgba(0,0,0,0.35);
+  background-color: #1e1e1e !important;
+}
+
+.tabs {
+  background-color: #252526;
+}
+
+.tabs>li[class~="active"]>a {
+  color: #ccc;
+}
+
+.tabs>li[class~="active"],
+.tabs>li:hover {
+  border-bottom: .18751rem solid #483d8b;
+  border-bottom: .18751rem solid var(--dark-primary);
+  color: #ccc;
+  background-color: #181819;
+}
+
+.cbi-tabmenu>li>a,
+.tabs>li>a {
+  color: #ccc;
+}
+
+.cbi-tabmenu>li>a:hover,
+.tabs>li>a:hover {
+  color: #ccc;
+}
+
+.cbi-tabmenu>li {
+  background: #2d2d2d;
+}
+
+.cbi-tabmenu {
+  border-bottom: 0 solid #ddd !important;
+}
+
+.cbi-tabmenu li[class~="cbi-tab"] a {
+  color: #ccc;
+}
+
+.cbi-tabmenu>li:hover {
+  color: #ccc;
+  background: #2d2d2d;
+}
+
+.cbi-tabmenu>li[class~="cbi-tab"] {
+  background-color: #181819;
+}
+
+.cbi-tabcontainer>.cbi-value:nth-of-type(2n) {
+  background-color: #252526;
+}
+
+.cbi-value-title {
+  color: #ccc;
+}
+
+select,
+input {
+  color: #ccc;
+  background-color: transparent;
+  border: 1px solid #3c3c3c !important;
+  box-shadow: 0 3px 2px rgba(0,0,0,0.05);
+}
+
+select:not([multiple="multiple"]):focus,
+input:focus {
+  border-color: #483d8b !important;
+  border-color: var(--dark-primary) !important;
+  background-color: transparent;
+  outline: 0;
+  box-shadow: none;
+}
+
+select {
+  background-color: #1e1e1e !important;
+}
+
+#cbi-dropbear h2,
+#cbi-dropbear .cbi-map-descr,
+#cbi-dropbear .cbi-map-descr abbr,
+#cbi-rc h2,
+#cbi-rc .cbi-map-descr,
+#cbi-distfeedconf h2,
+#cbi-distfeedconf .cbi-map-descr,
+#cbi-customfeedconf h2,
+#cbi-customfeedconf .cbi-map-descr,
+#cbi-download h2,
+#cbi-filelist h2 {
+  color: #ccc !important;
+}
+
+.cbi-value-field>ul>li .ifacebadge {
+  background-color: #3c3c3c;
+}
+
+.cbi-section-descr {
+  color: #ccc;
+}
+
+.cbi-input-textarea {
+  background-color: #1e1e1e;
+  color: #ccc;
+}
+
+.cbi-section-remove:nth-of-type(2n),
+.cbi-section-node:nth-of-type(2n) {
+  background-color: #1e1e1e;
+}
+
+.node-system-packages>.main table tr td:nth-last-child(1) {
+  color: #ccc;
+}
+
+.node-system-packages>.main .cbi-value>pre {
+  background-color: #333;
+}
+
+.cbi-section-node .cbi-value {
+  padding: 1rem 1rem .3rem 1rem;
+}
+
+.ifacebox {
+  background-color: #1e1e1e;
+  border: 1px solid #1e1e1e;
+}
+
+.ifacebox-head {
+  color: #666;
+}
+
+.ifacebox-body {
+  background-color: #333;
+}
+
+.zonebadge strong {
+  color: #333;
+}
+
+.zonebadge>.ifacebadge {
+  background-color: #3c3c3c;
+}
+
+/* Fix firewall zone: "unspecified -or- create: " background color (dark mode only) */
+div[onclick$="._fwzone_new').checked=true"] {
+  border: 1px solid #3c3c3c;
+  background-color: transparent !important;
+}
+
+/* Improve the background color of "Any zone" and "Device" when ADD/EDIT Rules in Firewall > Traffic Rules (dark mode only) */
+label[for$=".src_any"],
+label[for$=".dest_empty"],
+label[for$=".dest_any"] {
+  background-color: #2888db !important;
+}
+
+/* Fix/add background color of wireless signal strength badge for dark mode */
+td>.ifacebadge,
+.td>.ifacebadge {
+  background-color: #3c3c3c;
+}
+
+/* Improved loading process gif color (dark mode only) */
+img[src="/luci-static/resources/icons/loading.gif"] {
+  filter: invert(1);
+}
+
+div.cbi-value var,
+td.cbi-value-field var {
+  color: #483d8b;
+  color: var(--dark-primary);
+}
+
+#diag-rc-output>pre {
+  color: #ccc;
+  background-color: #1e1e1e;
+}
+
+.node-services-vssr .block {
+  background-color: #1e1e1e !important;
+  box-shadow: 0 0 .5rem 0 rgba(0,0,0,0.35);
+}
+
+.node-services-vssr .block h4 {
+  color: #ccc !important;
+}
+
+.node-services-vssr .status-bar {
+  color: #ccc;
+  box-shadow: 0 0 .5rem 0 rgba(0,0,0,0.35);
+  background-color: #1e1e1e;
+}
+
+.node-services-vssr .cbi-section-table-row {
+  color: #ccc;
+  background-color: #3c3c3c !important;
+  box-shadow: 0 0 5px 0 rgba(0,0,0,0.35);
+}
+
+.node-services-vssr .cbi-section-table-row.fast {
+  background: #483d8b !important;
+  background: var(--dark-primary) !important;
+  color: #fff;
+}
+
+.node-services-vssr .ssr-button {
+  color: #ccc;
+}
+
+.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;
+}
+
+/* Define the warning background-color breathe display animation (dark mode) */
+@keyframes warning-background-color-breathe-dark {
+  0%{
+    color: #fff;
+    background-color: darkorange;
+  }
+  50%{
+    color: #ccc;
+    background-color: #333333;
+  }
+  100%{
+    color: #fff;
+    background-color: darkorange;
+  }
+}
+.warning,
+.warning * {
+  animation: warning-background-color-breathe-dark 1.5s ease-in-out infinite !important;
+}
+
+.notice {
+  background-color: #483d8b !important;
+  background-color: var(--dark-primary) !important;
+}
+
+/* Improved the aleart-message background color during device restart (dark mode only) */
+.errorbox,
+.alert-message {
+  background-color: #333333;
+}
+
+.cbi-input-find,
+.cbi-input-save,
+.cbi-button-add,
+.cbi-button-save,
+.cbi-button-find,
+.cbi-input-reload,
+.cbi-button-reload {
+  background-color: darkseagreen !important;
+  border-color: darkseagreen !important;
+}
+
+.cbi-button-reset,
+.cbi-input-remove {
+  color: #fff !important;
+  background-color: darkorange !important;
+  border-color: darkorange !important;
+}
+
+.cbi-page-actions .cbi-button-apply,
+.cbi-section-actions .cbi-button-edit,
+.cbi-button-edit.important,
+.cbi-button-apply.important,
+.cbi-button-reload.important,
+.cbi-button-action.important {
+  border: 1px #483d8b solid !important;
+  border: 1px var(--dark-primary) solid !important;
+}
+
+fieldset[id^="cbi-apply-"] {
+  background-color: #333333;
+}
+
+#detail-bubble>div {
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  padding: 5px;
+  background: #252525;
+}
+
+/* Define the error text border breathe display animation (dark mode) */
+@keyframes error-border-breathe-dark {
+  0%{
+    border-color: darkorange;
+  }
+  50%{
+    border-color: transparent;
+  }
+  100%{
+    border-color: darkorange;
+  }
+}
+
+/* Add border for error text box, and border breathe display animation to make it more noticeable (dark mode) */
+.cbi-section-error>ul>li {
+  color: darkorange;
+  border: 2px solid darkorange ;
+  animation: error-border-breathe-dark 1.5s ease-in-out infinite;
+}
+
+.cbi-input-invalid,
+.cbi-value-error input {
+  color: darkorange;
+  border: 1px dashed darkorange !important;
+}
+
+.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(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) {
+  .node-status-iptables>.main div>.cbi-map>form {
+    background-color: #1e1e1e;
+    box-shadow: 0 0 .5rem 0 rgba(0,0,0,0.35);
+  }
+}
\ No newline at end of file
diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/css/fonts.css b/luci-theme-argonne/htdocs/luci-static/argonne/css/fonts.css
index 89cddbe28..85d7f891b 100644
--- a/luci-theme-argonne/htdocs/luci-static/argonne/css/fonts.css
+++ b/luci-theme-argonne/htdocs/luci-static/argonne/css/fonts.css
@@ -2,10 +2,9 @@
  *  Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argonne Template
  *
  *  luci-theme-argonne
- *      Copyright 2020 Jerryk <jerrykuku@gmail.com>
  *
  *  Have a bug? Please create an issue here on GitHub!
- *      https://github.com/kenzok78/luci-theme-argonne/issues
+ *      https://github.com/kenzok78/luci-theme-argonnene/issues
  *
  *  luci-theme-bootstrap:
  *      Copyright 2008 Steven Barth <steven@midlink.org>
@@ -18,7 +17,7 @@
  *  luci-theme-material:
  *      https://github.com/LuttyYang/luci-theme-material/
  *
- *  Agron Theme
+ *  Argonne Theme
  *	    https://demos.creative-tim.com/argon-dashboard/index.html
  *
  *  Login background
@@ -47,12 +46,12 @@
 /* ICON Font */
 
 @font-face {
-    font-family: 'argon';
-    src: url('../fonts/argon.eot?u6kthm');
-    src: url('../fonts/argon.eot?u6kthm#iefix') format('embedded-opentype'),
-        url('../fonts/argon.ttf?u6kthm') format('truetype'),
-        url('../fonts/argon.woff?u6kthm') format('woff'),
-        url('../fonts/argon.svg?u6kthm#argon') format('svg');
+    font-family: 'argonne';
+    src: url('../fonts/argonne.eot?u6kthm');
+    src: url('../fonts/argonne.eot?u6kthm#iefix') format('embedded-opentype'),
+        url('../fonts/argonne.ttf?u6kthm') format('truetype'),
+        url('../fonts/argonne.woff?u6kthm') format('woff'),
+        url('../fonts/argonne.svg?u6kthm#argonne') format('svg');
     font-weight: normal;
     font-style: normal;
     font-display: block;
@@ -61,7 +60,7 @@
 [class^="icon-"],
 [class*=" icon-"] {
     /* use !important to prevent issues with browser extensions that change fonts */
-    font-family: 'argon' !important;
+    font-family: 'argonne' !important;
     font-style: normal;
     font-weight: normal;
     font-variant: normal;
diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/img/add.webp b/luci-theme-argonne/htdocs/luci-static/argonne/img/add.webp
new file mode 100644
index 000000000..7271dd3ef
Binary files /dev/null and b/luci-theme-argonne/htdocs/luci-static/argonne/img/add.webp differ
diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/img/argonne.svg b/luci-theme-argonne/htdocs/luci-static/argonne/img/argon.svg
similarity index 100%
rename from luci-theme-argonne/htdocs/luci-static/argonne/img/argonne.svg
rename to luci-theme-argonne/htdocs/luci-static/argonne/img/argon.svg
diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/img/edit.webp b/luci-theme-argonne/htdocs/luci-static/argonne/img/edit.webp
new file mode 100644
index 000000000..264840a33
Binary files /dev/null and b/luci-theme-argonne/htdocs/luci-static/argonne/img/edit.webp differ
diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/img/fieldadd.webp b/luci-theme-argonne/htdocs/luci-static/argonne/img/fieldadd.webp
new file mode 100644
index 000000000..a4619e247
Binary files /dev/null and b/luci-theme-argonne/htdocs/luci-static/argonne/img/fieldadd.webp differ
diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/img/file.webp b/luci-theme-argonne/htdocs/luci-static/argonne/img/file.webp
new file mode 100644
index 000000000..6597e6ce7
Binary files /dev/null and b/luci-theme-argonne/htdocs/luci-static/argonne/img/file.webp differ
diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/img/find.webp b/luci-theme-argonne/htdocs/luci-static/argonne/img/find.webp
new file mode 100644
index 000000000..0b8fae856
Binary files /dev/null and b/luci-theme-argonne/htdocs/luci-static/argonne/img/find.webp differ
diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/img/folder.webp b/luci-theme-argonne/htdocs/luci-static/argonne/img/folder.webp
new file mode 100644
index 000000000..eef1fb104
Binary files /dev/null and b/luci-theme-argonne/htdocs/luci-static/argonne/img/folder.webp differ
diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/img/link.webp b/luci-theme-argonne/htdocs/luci-static/argonne/img/link.webp
new file mode 100644
index 000000000..51dc404ed
Binary files /dev/null and b/luci-theme-argonne/htdocs/luci-static/argonne/img/link.webp differ
diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/img/reload.webp b/luci-theme-argonne/htdocs/luci-static/argonne/img/reload.webp
new file mode 100644
index 000000000..f9a15668c
Binary files /dev/null and b/luci-theme-argonne/htdocs/luci-static/argonne/img/reload.webp differ
diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/img/remove.webp b/luci-theme-argonne/htdocs/luci-static/argonne/img/remove.webp
new file mode 100644
index 000000000..02e498606
Binary files /dev/null and b/luci-theme-argonne/htdocs/luci-static/argonne/img/remove.webp differ
diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/js/script.js b/luci-theme-argonne/htdocs/luci-static/argonne/js/menu-argon.js
similarity index 58%
rename from luci-theme-argonne/htdocs/luci-static/argonne/js/script.js
rename to luci-theme-argonne/htdocs/luci-static/argonne/js/menu-argon.js
index 3a0f5cc9a..a4c98af97 100644
--- a/luci-theme-argonne/htdocs/luci-static/argonne/js/script.js
+++ b/luci-theme-argonne/htdocs/luci-static/argonne/js/menu-argon.js
@@ -1,11 +1,11 @@
 /**
- *  Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argonne Template
+ *  Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template
  *
- *  luci-theme-argonne
- *      Copyright 2019 Jerrykuku <jerrykuku@qq.com>
+ *  luci-theme-argon
+ *      Copyright 2023 Jerrykuku <jerrykuku@qq.com>
  *
  *  Have a bug? Please create an issue here on GitHub!
- *      https://github.com/kenzok78/luci-theme-argonne/issues
+ *      https://github.com/jerrykuku/luci-theme-argon/issues
  *
  *  luci-theme-bootstrap:
  *      Copyright 2008 Steven Barth <steven@midlink.org>
@@ -18,7 +18,7 @@
  *  luci-theme-material:
  *      https://github.com/LuttyYang/luci-theme-material/
  *
- *  Agron Theme
+ *  Argon Theme
  *	    https://demos.creative-tim.com/argon-dashboard/index.html
  *
  *  Login background
@@ -27,22 +27,6 @@
  *  Licensed to the public under the Apache License 2.0
  */
 
-/*
- *  Font generate by Icomoon<icomoon.io>
- */
-(function ($) {
-    $(".main > .loading").fadeOut();
-
-    /**
-     * trim text, Remove spaces, wrap
-     * @param text
-     * @returns {string}
-     */
-    function trimText(text) {
-        return text.replace(/[ \t\n\r]+/g, " ");
-    }
-
-
     var lastNode = undefined;
     var mainNodeName = undefined;
 
@@ -68,6 +52,7 @@
      */
     function getCurrentNodeByUrl() {
         var ret = false;
+        const urlReg = new RegExp(nodeUrl + "$")
         if (!$('body').hasClass('logged-in')) {
             luciLocation = ["Main", "Login"];
             return true;
@@ -81,7 +66,7 @@
                 var that = $(this);
                 var href = that.attr("href");
 
-                if (href.indexOf(nodeUrl) != -1) {
+                if (urlReg.test(href)) {
                     ulNode.click();
                     ulNode.next(".slide-menu").stop(true, true);
                     lastNode = that.parent();
@@ -119,18 +104,6 @@
 
     });
 
-
-
-
-// define what element should be observed by the observer
-// and what types of mutations trigger the callback
-    if ($("#cbi-dhcp-lan-ignore").length > 0) {
-        observer.observe(document.getElementById("cbi-dhcp-lan-ignore"), {
-            subtree: true,
-            attributes: true
-        });
-    }
-
     /**
      * hook menu click and add the hash
      */
@@ -153,7 +126,7 @@
         window.location = $($(this).find("a")[0]).attr("href");
         return false;
     });
-    
+
     /**
      * fix submenu click
      */
@@ -166,91 +139,11 @@
     /**
      * get current node and open it
      */
-    
-    $(".cbi-button-up").val("");
-    $(".cbi-button-down").val("");
-
-
-    /**
-     * hook other "A Label" and add hash to it.
-     */
-    $("#maincontent > .container").find("a").each(function () {
-        var that = $(this);
-        var onclick = that.attr("onclick");
-        if (onclick == undefined || onclick == "") {
-            that.click(function () {
-                var href = that.attr("href");
-                if (href.indexOf("#") == -1) {
-                    $(".main > .loading").fadeIn("fast");
-                    return true;
-                }
-            });
-        }
-    });
-
-    /**
-     * Sidebar expand
-     */
-    var showSide = false;
-    $(".showSide").click(function () {
-        if (showSide) {
-            $(".darkMask").stop(true).fadeOut("fast");
-            $(".main-left").width(0);
-            $(".main-right").css("overflow-y", "auto");
-            showSide = false;
-        } else {
-            $(".darkMask").stop(true).fadeIn("fast");
-            $(".main-left").width("15rem");
-            $(".main-right").css("overflow-y", "hidden");
-            showSide = true;
-        }
-    });
-
-
-    $(".darkMask").click(function () {
-        if (showSide) {
-            showSide = false;
-            $(".darkMask").stop(true).fadeOut("fast");
-            $(".main-left").width(0);
-            $(".main-right").css("overflow-y", "auto");
-        }
-    });
-
-    $(window).resize(function () {
-        if ($(window).width() > 921) {
-            $(".main-left").css("width", "");
-            $(".darkMask").stop(true);
-            $(".darkMask").css("display", "none");
-            showSide = false;
-        }
-    });
-
-    /**
-     * fix legend position
-     */
-    $("legend").each(function () {
-        var that = $(this);
-        that.after("<span class='panel-title'>" + that.text() + "</span>");
-    });
-
-    $(".cbi-section-table-titles, .cbi-section-table-descr, .cbi-section-descr").each(function () {
-        var that = $(this);
-        if (that.text().trim() == "") {
-            that.css("padding", "0px");
-        }
-    });
-
-    $(".node-main-login > .main .cbi-value.cbi-value-last .cbi-input-text").focus(function () {
-        //$(".node-main-login > .main > .main-right > .login-bg").addClass("blur");
-    });
-    $(".node-main-login > .main .cbi-value.cbi-value-last .cbi-input-text").blur(function () {
-        //$(".node-main-login > .main > .main-right > .login-bg").removeClass("blur");
-    });
-
-
-    $(".main-right").focus();
-    $(".main-right").blur();
-    $("input").attr("size", "0");
+    if (getCurrentNodeByUrl()) {
+        mainNodeName = "node-" + luciLocation[0] + "-" + luciLocation[1];
+        mainNodeName = mainNodeName.replace(/[ \t\n\r\/]+/g, "_").toLowerCase();
+        $("body").addClass(mainNodeName);
+    }
 
     if (mainNodeName != undefined) {
         console.log(mainNodeName);
@@ -273,5 +166,3 @@
                 break;
         }
     }
-
-})(jQuery);
diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/js/sidebar-argon.js b/luci-theme-argonne/htdocs/luci-static/argonne/js/sidebar-argon.js
new file mode 100644
index 000000000..fdf5a99c0
--- /dev/null
+++ b/luci-theme-argonne/htdocs/luci-static/argonne/js/sidebar-argon.js
@@ -0,0 +1,64 @@
+/**
+ *  Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template
+ *
+ *  luci-theme-argon
+ *      Copyright 2023 Jerrykuku <jerrykuku@qq.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 Jo-Philipp Wich <jow@openwrt.org>
+ *      Copyright 2012 David Menting <david@nut-bolt.nl>
+ *
+ *  MUI:
+ *      https://github.com/muicss/mui
+ *
+ *  luci-theme-material:
+ *      https://github.com/LuttyYang/luci-theme-material/
+ *
+ *  Argon Theme
+ *	    https://demos.creative-tim.com/argon-dashboard/index.html
+ *
+ *  Login background
+ *      https://unsplash.com/
+ *
+ *  Licensed to the public under the Apache License 2.0
+ */
+
+    /**
+     * Sidebar expand
+     */
+    var showSide = false;
+    $(".showSide").click(function () {
+        if (showSide) {
+            $(".darkMask").stop(true).fadeOut("fast");
+            $(".main-left").width(0);
+            $(".main-right").css("overflow-y", "auto");
+            showSide = false;
+        } else {
+            $(".darkMask").stop(true).fadeIn("fast");
+            $(".main-left").width("15rem");
+            $(".main-right").css("overflow-y", "hidden");
+            showSide = true;
+        }
+    });
+
+    $(".darkMask").click(function () {
+        if (showSide) {
+            showSide = false;
+            $(".darkMask").stop(true).fadeOut("fast");
+            $(".main-left").width(0);
+            $(".main-right").css("overflow-y", "auto");
+        }
+    });
+
+    $(window).resize(function () {
+        if ($(window).width() > 921) {
+            $(".main-left").css("width", "");
+            $(".darkMask").stop(true);
+            $(".darkMask").css("display", "none");
+            showSide = false;
+        }
+    });
diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/js/styles-argon.js b/luci-theme-argonne/htdocs/luci-static/argonne/js/styles-argon.js
new file mode 100644
index 000000000..2e40a94ca
--- /dev/null
+++ b/luci-theme-argonne/htdocs/luci-static/argonne/js/styles-argon.js
@@ -0,0 +1,103 @@
+/**
+ *  Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template
+ *
+ *  luci-theme-argon
+ *      Copyright 2023 Jerrykuku <jerrykuku@qq.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 Jo-Philipp Wich <jow@openwrt.org>
+ *      Copyright 2012 David Menting <david@nut-bolt.nl>
+ *
+ *  MUI:
+ *      https://github.com/muicss/mui
+ *
+ *  luci-theme-material:
+ *      https://github.com/LuttyYang/luci-theme-material/
+ *
+ *  Argon Theme
+ *	    https://demos.creative-tim.com/argon-dashboard/index.html
+ *
+ *  Login background
+ *      https://unsplash.com/
+ *
+ *  Licensed to the public under the Apache License 2.0
+ */
+
+/*
+ *  Font generate by Icomoon<icomoon.io>
+ */
+(function ($) {
+    $(".main > .loading").fadeOut();
+
+    /**
+     * trim text, Remove spaces, wrap
+     * @param text
+     * @returns {string}
+     */
+    function trimText(text) {
+        return text.replace(/[ \t\n\r]+/g, " ");
+    }
+
+// define what element should be observed by the observer
+// and what types of mutations trigger the callback
+    const observer = new MutationObserver(() => {
+    console.log("callback that runs when observer is triggered");
+    });
+    if ($("#cbi-dhcp-lan-ignore").length > 0) {
+        observer.observe(document.getElementById("cbi-dhcp-lan-ignore"), {
+            subtree: true,
+            attributes: true
+        });
+    }
+
+    $(".cbi-button-up").val("");
+    $(".cbi-button-down").val("");
+
+    /**
+     * hook other "A Label" and add hash to it.
+     */
+    $("#maincontent > .container").find("a").each(function () {
+        var that = $(this);
+        var onclick = that.attr("onclick");
+        if (onclick == undefined || onclick == "") {
+            that.click(function () {
+                var href = that.attr("href");
+                if (href.indexOf("#") == -1) {
+                    $(".main > .loading").fadeIn("fast");
+                    return true;
+                }
+            });
+        }
+    });
+
+    /**
+     * fix legend position
+     */
+    $("legend").each(function () {
+        var that = $(this);
+        that.after("<span class='panel-title'>" + that.text() + "</span>");
+    });
+
+    $(".cbi-section-table-titles, .cbi-section-table-descr, .cbi-section-descr").each(function () {
+        var that = $(this);
+        if (that.text().trim() == "") {
+            that.css("padding", "0px");
+        }
+    });
+
+    $(".node-main-login > .main .cbi-value.cbi-value-last .cbi-input-text").focus(function () {
+        //$(".node-main-login > .main > .main-right > .login-bg").addClass("blur");
+    });
+    $(".node-main-login > .main .cbi-value.cbi-value-last .cbi-input-text").blur(function () {
+        //$(".node-main-login > .main > .main-right > .login-bg").removeClass("blur");
+    });
+
+    $(".main-right").focus();
+    $(".main-right").blur();
+    $("input").attr("size", "0");
+
+})(jQuery);
diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/less/cascade.less b/luci-theme-argonne/htdocs/luci-static/argonne/less/cascade.less
index 64220ec12..475bef82a 100644
--- a/luci-theme-argonne/htdocs/luci-static/argonne/less/cascade.less
+++ b/luci-theme-argonne/htdocs/luci-static/argonne/less/cascade.less
@@ -3,10 +3,9 @@
  *  Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argonne Template
  *
  *  luci-theme-argonne
- *      Copyright 2020 Jerryk <jerrykuku@gmail.com>
  *
  *  Have a bug? Please create an issue here on GitHub!
- *      https://github.com/kenzok78/luci-theme-argonne/issues
+ *      https://github.com/jerrykuku/luci-theme-argonne/issues
  *
  *  luci-theme-bootstrap:
  *      Copyright 2008 Steven Barth <steven@midlink.org>
@@ -19,7 +18,7 @@
  *  luci-theme-material:
  *      https://github.com/LuttyYang/luci-theme-material/
  *
- *  Agron Theme
+ *  Argonne Theme
  *	    https://demos.creative-tim.com/argon-dashboard/index.html
  *
  *  Login background
@@ -362,7 +361,7 @@ li {
                     position: relative;
 
                     &::before {
-                        font-family: 'argon' !important;
+                        font-family: 'argonne' !important;
                         font-style: normal;
                         font-weight: normal;
                         font-variant: normal;
@@ -745,7 +744,7 @@ footer {
                         position: relative;
 
                         &::before {
-                            font-family: 'argon' !important;
+                            font-family: 'argonne' !important;
                             font-style: normal;
                             font-weight: normal;
                             font-variant: normal;
@@ -765,7 +764,7 @@ footer {
                             position: absolute;
                             right: 0.5rem;
                             top: 0.8rem;
-                            font-family: 'argon' !important;
+                            font-family: 'argonne' !important;
                             font-style: normal;
                             font-weight: normal;
                             font-variant: normal;
@@ -1060,7 +1059,7 @@ footer {
 }
 
 .cbi-button:active {
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.19), 0 5px 5px rgba(0, 0, 0, 0.23);
 }
 
 .cbi-button:disabled {
@@ -1134,6 +1133,34 @@ form.inline+form.inline,
     min-width: 2.5rem !important;
 }
 
+/* Replace LuCI's default file and folder type icons */
+img[src="/luci-static/resources/cbi/reload.gif"] {
+    content: url("/luci-static/argonne/img/reload.webp");
+}
+img[src="/luci-static/resources/cbi/file.gif"] {
+    content: url("/luci-static/argonne/img/file.webp");
+}
+img[src="/luci-static/resources/cbi/add.gif"] {
+    content: url("/luci-static/argonne/img/add.webp");
+}
+img[src="/luci-static/resources/cbi/remove.gif"] {
+    content: url("/luci-static/argonne/img/remove.webp");
+}
+img[src="/luci-static/resources/cbi/edit.gif"] {
+    content: url("/luci-static/argonne/img/edit.webp");
+}
+img[src="/luci-static/resources/cbi/fieldadd.gif"] {
+    content: url("/luci-static/argonne/img/fieldadd.webp");
+}
+img[src="/luci-static/resources/cbi/link.gif"] {
+    content: url("/luci-static/argonne/img/link.webp");
+}
+img[src="/luci-static/resources/cbi/find.gif"] {
+    content: url("/luci-static/argonne/img/find.webp");
+}
+img[src="/luci-static/resources/cbi/folder.gif"] {
+    content: url("/luci-static/argonne/img/folder.webp");
+}
 
 /* input */
 .cbi-value input[type="password"],
@@ -1268,13 +1295,14 @@ input[type="checkbox"] {
     -webkit-appearance: none !important;
     border: 1px solid #dee2e6;
 
-    width: 16px !important;
-    height: 16px !important;
+    width: 17px !important;
+    height: 17px !important;
     padding: 0;
     cursor: pointer;
     transition: all 0.2s;
 
-    margin: 0.9rem 0.25rem 0 0.25rem;
+    margin: 0.5rem 0.25rem 0.7rem 0.25rem;
+    vertical-align: middle;
 }
 
 input[type="checkbox"]:checked {
@@ -1289,7 +1317,8 @@ input[type="checkbox"]:checked {
 }
 
 ul li .cbi-input-checkbox {
-    margin: 0.5rem 0.25rem !important;
+    margin: 0.5rem 0.25rem 0.7rem 0.25rem !important;
+    vertical-align: middle !important;
 }
 
 .cbi-input-radio {
@@ -1422,7 +1451,7 @@ ul li .cbi-input-checkbox {
 
 .cbi-section-create {
     margin: 0;
-    padding-left: 1rem;
+    padding-left: 0.5rem;
     align-items: center;
 
 }
@@ -1495,12 +1524,47 @@ small {
     display: none !important;
 }
 
-.cbi-section-error {
-    padding: 1.5rem;
-    color: #fb6340;
-    font-weight: 600;
+/* Define the error text border breathe display animation */
+@keyframes error-border-breathe {
+    0%{
+        border-color: #fb6340;
+    }
+    50%{
+        border-color: transparent;
+    }
+    100%{
+        border-color: #fb6340;
+    }
 }
 
+/* Center display error text box */
+.cbi-section-error > ul{
+    text-align: center;
+}
+
+/* Add border for error text box, and border breathe display animation to make it more noticeable */
+.cbi-section-error > ul > li {
+    font-weight: 600;
+    max-width: 60%;
+    color: #fb6340;
+    line-height: 1rem;
+    display: inline-block;
+    border: 2px solid #fb6340;
+    border-radius: 0.3rem;
+    animation: error-border-breathe 1.5s ease-in-out infinite;
+    padding-left: 4px;
+    padding-right: 4px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+}
+
+.cbi-input-invalid, 
+.cbi-value-error input {
+    color: #fb6340;
+    border: 1px dashed #fb6340;
+}
+
+
 fieldset>fieldset {
     margin: 0;
     padding: 0;
@@ -1571,6 +1635,7 @@ input[name="nslookup"] {
     height: 1.6rem !important;
     line-height: 1.6rem;
     border-radius: .25rem;
+    overflow: hidden;
 }
 
 #swaptotal>div>div,
@@ -1683,6 +1748,31 @@ td>table>tbody>tr>td,
     text-decoration: none;
 }
 
+/* file selector button */
+::file-selector-button {
+    color: #fff;
+    border-radius: .25rem;
+    border: 1px solid #2e6da4;
+    padding: .4rem .5rem;
+    background-color: #337ab7;
+    box-sizing: border-box;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+}
+::file-selector-button:hover,
+::file-selector-button:focus,
+::file-selector-button:active {
+    outline: 0;
+    text-decoration: none;
+}
+::file-selector-button:hover,
+::file-selector-button:focus {
+    box-shadow: 0 0px 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
+}
+::file-selector-button:active {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.19), 0 5px 5px rgba(0, 0, 0, 0.23);
+}
+
 /* table */
 
 
@@ -1835,6 +1925,46 @@ td>table>tbody>tr>td,
     flex-basis: 12%;
 }
 
+/* Fix background color of table-titles */
+.cbi-section-node>.cbi-section-table>tbody>.cbi-section-table-titles th {
+    background-color: var(--lighter);
+    border: none;
+}
+
+/* Fix background color of table-descr */
+.cbi-section-node>.cbi-section-table>tbody>.cbi-section-table-descr th {
+    border: none;
+}
+
+/* Fix background color not change when the H tag is in the table rowstyle-1 */
+.cbi-section-node>.cbi-section-table>tbody>.cbi-rowstyle-1 th {
+    background-color: #fff;
+    border-top: 1px solid #ddd;
+    border-bottom: none;
+}
+
+/* Fix background color not change when the H tag is in the table rowstyle-2 */
+.cbi-section-node>.cbi-section-table>tbody>.cbi-rowstyle-2 th {
+    background-color: #f9f9f9;
+    border-top: 1px solid #ddd;
+    border-bottom: none;
+}
+
+/* Change the color of the H label in the table to make it more visible */
+th h1, td h1,
+th h2, td h2,
+th h3, td h3,
+th h4, td h4,
+th h5, td h5,
+th h6, td h6 {
+    background: var(--lighter);
+}
+
+/* OCD: Change the background color of the "now in use" node in PassWall  */
+.cbi-section-table>tbody>._now_use {
+    background: #5e72e473 !important;
+}
+
 /* language fix */
 body.lang_pl.node-main-login .cbi-value-title {
     width: 12rem;
@@ -1989,7 +2119,7 @@ body.lang_pl.node-main-login .cbi-value-title {
 .cbi-value-helpicon,
 .showSide,
 .main>.loading>span {
-    font-family: 'argon' !important;
+    font-family: 'argonne' !important;
     font-style: normal !important;
     font-weight: normal !important;
     font-variant: normal !important;
@@ -2165,11 +2295,21 @@ table>thead>tr>th,
     margin-bottom: 0;
 }
 
+.cbi-section-table-row>.cbi-value-field .cbi-dropdown,
 .cbi-section-table-row>.cbi-value-field .cbi-input-select,
 .cbi-section-table-row>.cbi-value-field .cbi-input-text,
-.cbi-section-table-row>.cbi-value-field .cbi-input-password,
-.cbi-section-table-row>.cbi-value-field .cbi-dropdown {
-    width: 100%;
+.cbi-section-table-row>.cbi-value-field .cbi-input-password{
+    width:100%
+}
+
+.cbi-section-table-row>.cbi-value-field .cbi-input-text,
+.cbi-section-table-row>.cbi-value-field .cbi-input-password{
+    min-width:100px
+}
+
+#lease6_status_table > tbody > .cbi-section-table-row.cbi-rowstyle-1 div,
+#lease6_status_table > tbody > .cbi-section-table-row.cbi-rowstyle-2 div{
+    min-width:100%;
 }
 
 .cbi-section-table-row>.cbi-value-field [data-dynlist]>input,
@@ -2193,10 +2333,27 @@ div>.table>.tbody>.tr:nth-of-type(2n) {
     color: #fff !important;
 }
 
-.warning {
-    background-color: #fb6340 !important;
-    background-color: var(--warning) !important;
-    color: #fff !important;
+/* Define the warning background-color breathe display animation */
+@keyframes warning-background-color-breathe {
+    0%{
+        color: #fff;
+        background-color: #fb6340;
+    }
+    50%{
+        color: #32325d;
+        background-color: #fff;
+    }
+    100%{
+        color: #fff;
+        background-color: #fb6340;
+    }
+}
+.warning,
+.warning * {
+    background-color: #fb6340;
+    background-color: var(--warning);
+    color: #fff;
+    animation: warning-background-color-breathe 1.5s ease-in-out infinite !important;
 }
 
 .notice {
@@ -2373,7 +2530,6 @@ table>thead>tr>th {
     padding-top: .75rem;
     padding-bottom: .75rem;
     letter-spacing: 1px;
-    text-transform: uppercase;
     border-bottom: 1px solid #e9ecef;
 }
 
@@ -2484,7 +2640,7 @@ td>table>tbody>tr>td {
 
 .cbi-tabmenu {
     color: white;
-    padding: 0.5rem 1rem 0 1rem;
+    padding: 0.5rem 0.5rem 0 0.5rem;
     white-space: nowrap;
     overflow-x: auto;
     border-bottom: 1px solid #ddd !important;
@@ -2811,7 +2967,7 @@ select[multiple="multiple"] {
 
 
 .cbi-section-node .cbi-value {
-    padding: 0.3rem 1rem 0.3rem 1rem;
+    padding: 0.5rem 1rem 0.5rem 1rem !important;
 }
 
 
@@ -2827,6 +2983,18 @@ select[multiple="multiple"] {
 
 }
 
+/* Fix text position of the luci-app-filebrowser running state */
+#cbi-filebrowser>.cbi-section>.cbi-section>.cbi-value>.cbi-value-field,
+/* Fix text position of the luci-apps running state of the [Control] type */
+form>.cbi-map>.cbi-section>.cbi-section-node>.cbi-value>.cbi-value-field font {
+    word-wrap: break-word;
+    font-size: 0.875rem;
+    line-height: 1.6;
+    padding: 0.7rem;
+    padding-left: 0;
+    text-align: right;
+    display: table-cell;
+}
 
 
 .cbi-value-helpicon>img {
@@ -2851,7 +3019,6 @@ select[multiple="multiple"] {
     padding: .7rem;
     padding-left: 0;
     width: 23rem;
-    float: left;
     text-align: right;
     display: table-cell;
 }
@@ -3097,21 +3264,25 @@ td>.ifacebadge,
     margin-top: 0.3rem;
 }
 
-.cbi-value-field .cbi-input-checkbox,
-.cbi-value-field .cbi-input-radio {
-    margin: 0.9rem 0.25rem 0 0.25rem;
+.cbi-value-field .cbi-input-checkbox {
+    margin: 0.5rem 0.25rem 0.7rem 0.25rem;
+    vertical-align: middle;
     height: 1rem;
     line-height: 1.6;
 }
 
 .cbi-input-checkbox {
-    margin: 0.9rem 0.25rem 0 0.25rem;
+    margin: 0.5rem 0.25rem 0.7rem 0.25rem;
+    vertical-align: middle;
 }
 
 .cbi-value-field .cbi-input-radio {
     margin: 0rem 0.25rem;
 }
 
+.cbi-input-radio {
+    margin: 0rem 0.25rem;
+}
 
 .cbi-value-field>input+.cbi-value-description {
     padding: 0;
@@ -3139,7 +3310,7 @@ td>.ifacebadge,
 }
 
 .cbi-section-create>.cbi-button-add {
-    margin: 0.5rem 0.5rem 0.5rem 0.5rem;
+    margin: 0.75rem 0.75rem 0.75rem 0.25rem;
 }
 
 .cbi-section-remove {
@@ -3276,6 +3447,10 @@ input[name="nslookup"] {
             border-right: 0 !important;
             background-color: #5e72e4 !important;
             background-color: var(--primary) !important;
+            height: 100% !important;
+            background-image: url(../img/trafficbar.png);
+            background-position: left top;
+            animation: sparkle 1500ms linear infinite;
         }
     }
 
@@ -3555,17 +3730,10 @@ input[name="nslookup"] {
         font-size: 1.7rem;
     }
 
-
-
     header>.fill>.container>.brand {
         display: inline-block;
     }
 
-    .cbi-value-title {
-        width: 9rem;
-        padding-right: 1rem;
-    }
-
     .node-network-diagnostics>.main .cbi-map fieldset>div * {
         width: 100% !important;
     }
@@ -3716,13 +3884,6 @@ input[name="nslookup"] {
         position: relative;
     }
 
-    .cbi-value-field .cbi-input-checkbox,
-    .cbi-value-field .cbi-input-radio {
-        margin: 0rem 0.25rem 0 0.25rem;
-        height: 1rem;
-        line-height: 1.6;
-    }
-
     .cbi-page-actions>div>input {
         display: none;
     }
diff --git a/luci-theme-argonne/htdocs/luci-static/argonne/less/dark.less b/luci-theme-argonne/htdocs/luci-static/argonne/less/dark.less
index fba9a56da..b8397c15d 100644
--- a/luci-theme-argonne/htdocs/luci-static/argonne/less/dark.less
+++ b/luci-theme-argonne/htdocs/luci-static/argonne/less/dark.less
@@ -3,10 +3,9 @@
  *  Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argonne Template
  *
  *  luci-theme-argonne
- *      Copyright 2020 Jerryk <jerrykuku@gmail.com>
  *
  *  Have a bug? Please create an issue here on GitHub!
- *      https://github.com/kenzok78/luci-theme-argonne/issues
+ *      https://github.com/jerrykuku/luci-theme-argonne/issues
  *
  *  luci-theme-bootstrap:
  *      Copyright 2008 Steven Barth <steven@midlink.org>
@@ -19,7 +18,7 @@
  *  luci-theme-material:
  *      https://github.com/LuttyYang/luci-theme-material/
  *
- *  Agron Theme
+ *  Argonne Theme
  *	    https://demos.creative-tim.com/argon-dashboard/index.html
  *
  *  Login background
@@ -272,6 +271,7 @@ table>thead>tr>td {
 
         div {
             background-color: #32325d !important;
+            background-color: var(--dark-primary) !important;
         }
     }
 
@@ -287,7 +287,7 @@ table>thead>tr>th {
 }
 
 .cbi-rowstyle-2 {
-    background-color: #1e1e1e;
+    background-color: #2c2c2c !important;
 }
 
 .cbi-rowstyle-1 {
@@ -306,7 +306,12 @@ table>thead>tr>th {
 
 .cbi-button {
     color: #ccc;
-    background-color: #252526;
+    background-color: #2c2c2c;
+}
+
+.cbi-rowstyle-2 .cbi-button-up,
+.cbi-rowstyle-2 .cbi-button-down {
+    background-color: #252526 !important;
 }
 
 .cbi-section-node {
@@ -326,6 +331,72 @@ div>.table>.tbody>.tr:nth-of-type(2n) {
     background-color: #252526;
 }
 
+/* file selector button */
+::file-selector-button {
+    border: 1px solid darkseagreen !important;
+    background-color: darkseagreen !important;
+}
+
+/* Fix background color of table-titles */
+.cbi-section-node>.cbi-section-table>tbody>.cbi-section-table-titles th {
+    background-color: #1e1e1e;
+    border: none !important;
+}
+
+/* Fix background color of table-descr */
+.cbi-section-node>.cbi-section-table>tbody>.cbi-section-table-descr th {
+    background-color: #333333;
+    border: none !important;
+}
+
+/* Fix background color not change when the H tag is in the table rowstyle-1 */
+.cbi-section-node>.cbi-section-table>tbody>.cbi-rowstyle-1 th {
+    background-color: #252526;
+    border-top: 1px solid #252526;
+    border-bottom: none !important;
+}
+
+/* Fix background color not change when the H tag is in the table rowstyle-2 */
+.cbi-section-node>.cbi-section-table>tbody>.cbi-rowstyle-2 th {
+    background-color: #2c2c2c;
+    border-top: 1px solid #252526;
+    border-bottom: none !important;
+}
+
+/* Change the color of the H label in the table to make it more visible */
+th h1, td h1,
+th h2, td h2,
+th h3, td h3,
+th h4, td h4,
+th h5, td h5,
+th h6, td h6 {
+    background: var(--gray-dark);
+}
+
+/* Improved the background color of each itemes in "UNSAVED CHANGES" (dark mode only) */
+.uci-change-list del,
+.uci-change-legend-label del {
+    background-color: #fb74008c;
+}
+.uci-change-list var,
+.uci-change-legend-label var {
+    background-color: #333333;
+}
+.uci-change-list ins,
+.uci-change-legend-label ins {
+    background-color: #00ff0a45 !important;
+}
+
+/* OCD: Compatible the background color of the "Add the node via the link" & "USE(node)" pop-up window in PassWall (dark mode only) */
+#add_link_div,
+#set_node_div {
+    background-color: #333333f0 !important;
+    box-shadow: #00000094 10px 10px 30px 5px !important;
+}
+#add_link_div>.cbi-value>.cbi-value-field>#nodes_link {
+    background: #ccc;
+}
+
 #content_syslog {
     box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, .35)
 }
@@ -464,7 +535,7 @@ select {
 }
 
 .ifacebox {
-    background-color: none;
+    background-color: #1e1e1e;
     border: 1px solid #1e1e1e;
 }
 
@@ -484,6 +555,30 @@ select {
     background-color: #3c3c3c;
 }
 
+/* Fix firewall zone: "unspecified -or- create: " background color (dark mode only) */
+div[onclick$="._fwzone_new').checked=true"] {
+    border: 1px solid #3c3c3c;
+    background-color: transparent !important;
+}
+
+/* Improve the background color of "Any zone" and "Device" when ADD/EDIT Rules in Firewall > Traffic Rules (dark mode only) */
+label[for$=".src_any"],
+label[for$=".dest_empty"],
+label[for$=".dest_any"] {
+    background-color: #2888db !important;
+}
+
+/* Fix/add background color of wireless signal strength badge for dark mode */
+td>.ifacebadge,
+.td>.ifacebadge {
+    background-color: #3c3c3c;
+}
+
+/* Improved loading process gif color (dark mode only) */
+img[src="/luci-static/resources/icons/loading.gif"] {
+    filter: invert(1);
+}
+
 div.cbi-value var,
 td.cbi-value-field var {
     color: #483d8b;
@@ -541,11 +636,37 @@ td.cbi-value-field var {
     background-color: darkolivegreen !important;
 }
 
+/* Define the warning background-color breathe display animation (dark mode) */
+@keyframes warning-background-color-breathe-dark {
+    0%{
+        color: #fff;
+        background-color: darkorange;
+    }
+    50%{
+        color: #ccc;
+        background-color: #333333;
+    }
+    100%{
+        color: #fff;
+        background-color: darkorange;
+    }
+}
+.warning,
+.warning * {
+    animation: warning-background-color-breathe-dark 1.5s ease-in-out infinite !important;
+}
+
 .notice {
     background-color: #483d8b !important;
     background-color: var(--dark-primary) !important;
 }
 
+/* Improved the aleart-message background color during device restart (dark mode only) */
+.errorbox,
+.alert-message {
+    background-color: #333333;
+}
+
 .cbi-input-find,
 .cbi-input-save,
 .cbi-button-add,
@@ -587,8 +708,30 @@ fieldset[id^="cbi-apply-"] {
     background: #252525;
 }
 
-.cbi-section-error {
+/* Define the error text border breathe display animation (dark mode) */
+@keyframes error-border-breathe-dark {
+    0%{
+        border-color: darkorange;
+    }
+    50%{
+        border-color: transparent;
+    }
+    100%{
+        border-color: darkorange;
+    }
+}
+
+/* Add border for error text box, and border breathe display animation to make it more noticeable (dark mode) */
+.cbi-section-error>ul>li {
     color: darkorange;
+    border: 2px solid darkorange ;
+    animation: error-border-breathe-dark 1.5s ease-in-out infinite;
+}
+
+.cbi-input-invalid,
+.cbi-value-error input {
+    color: darkorange;
+    border: 1px dashed darkorange !important;
 }
 
 .node-services-vssr .block h4 span{
diff --git a/luci-theme-argonne/luasrc/view/themes/argonne/footer.htm b/luci-theme-argonne/luasrc/view/themes/argonne/footer.htm
index b735534f6..a5c4d9dbe 100644
--- a/luci-theme-argonne/luasrc/view/themes/argonne/footer.htm
+++ b/luci-theme-argonne/luasrc/view/themes/argonne/footer.htm
@@ -1,8 +1,7 @@
 <%#
-	Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argonne Template
+	Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-material Argonne Template
 
 	luci-theme-argonne
-	Copyright 2019 Jerrykuku <jerrykuku@qq.com>
 
 	Have a bug? Please create an issue here on GitHub!
 	https://github.com/kenzok78/luci-theme-argonne/issues
@@ -18,7 +17,7 @@
 	luci-theme-material:
 	https://github.com/LuttyYang/luci-theme-material/
 
-	Agron Theme
+	Argonne Theme
 	https://demos.creative-tim.com/argon-dashboard/index.html
 
 	Login background
@@ -58,31 +57,28 @@
 </footer>
 </div>
 </div>
-
-<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);
-		}
-		if($(document.body).height() < 525 ){
-			if($(".ftc").css('display') != 'none'){
-				$(".ftc").hide()
+	<script>
+		// thanks for Jo-Philipp Wich <jow@openwrt.org>
+		var winHeight = $(window).height();
+		$(window).resize(function () {
+			if($(document.body).height() < 525 ){
+				if($(".ftc").css('display') != 'none'){
+					$(".ftc").hide()
+				}
+			}else{
+				if($(".ftc").css('display') == 'none'){
+					$(".ftc").show()
+				}
 			}
-		}else{
-			if($(".ftc").css('display') == 'none'){
-				$(".ftc").show()
-			}
-		}
-	})
-</script>
+		})
+	</script>
 
-<script src="<%=media%>/js/script.js"></script>
+	<script>
+		if (window.orientation == 90 || window.orientation == -90) {
+			$(".ftc").hide()
+		}
+	</script>
+
+	<script src="<%=media%>/js/styles-argonne.js<%# ?v=PKG_VERSION %>"></script>
 </body>
-
 </html>
diff --git a/luci-theme-argonne/luasrc/view/themes/argonne/header.htm b/luci-theme-argonne/luasrc/view/themes/argonne/header.htm
index 53b772741..7cf1eec11 100644
--- a/luci-theme-argonne/luasrc/view/themes/argonne/header.htm
+++ b/luci-theme-argonne/luasrc/view/themes/argonne/header.htm
@@ -2,7 +2,6 @@
 	Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI and Argonne Template
 
 	luci-theme-argonne
-	Copyright 2020 Jerryk <jerrykuku@gmail.com>
 
 	Have a bug? Please create an issue here on GitHub!
 	https://github.com/kenzok78/luci-theme-argonne/issues
@@ -15,7 +14,7 @@
 	MUI:
 	https://github.com/muicss/mui
 	
-	Agron Theme
+	Argonne Theme
 	https://demos.creative-tim.com/argon-dashboard/index.html
 
 	Licensed to the public under the Apache License 2.0
@@ -44,7 +43,7 @@
 	local node = disp.context.dispatched
 
 	local categories = disp.node_childs(tree)
-	local currentNode = luci.dispatcher.context.path
+
 	local c = tree
 	local i, r
 	
@@ -108,22 +107,16 @@
 		end
 	end
 
-	local function render_submenu(prefix,parent, node)
+	local function render_submenu(prefix, node)
 		local childs = disp.node_childs(node)
 		if #childs > 0 then
-			local active = (currentNode[2] == parent) and "active" or ""
-			local display = (currentNode[2] == parent) and 'style="display: block;"' or ""
-			
-			write('<ul class="slide-menu %s" %s>' %{
-				active,
-				display
-			})
+			write('<ul class="slide-menu">')
+
 			for i, r in ipairs(childs) do
 				local nnode = node.nodes[r]
 				local title = pcdata(striptags(translate(nnode.title)))
-				local subactive = (currentNode[3] == r) and 'class="active"' or ""
-				write('<li %s><a data-title="%s" href="%s">%s</a></li>' %{
-					subactive,
+
+				write('<li><a data-title="%s" href="%s">%s</a></li>' %{
 					title,
 					nodeurl(prefix, r, nnode.query),
 					title
@@ -138,21 +131,20 @@
 		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 active = (currentNode[2] == r) and "active" or ""
 					local title = pcdata(striptags(translate(nnode.title)))
                                         local en_title = pcdata(striptags(string.gsub(nnode.title," ","_")))
-					write('<li class="slide"><a class="menu %s" data-title="%s" href="#">%s</a>' %{
-						active,
+					write('<li class="slide"><a class="menu" data-title="%s" href="#">%s</a>' %{
 						en_title,
 						title
 					})
 
-					render_submenu(category .. "/" .. r,r, nnode)
+					render_submenu(category .. "/" .. r, nnode)
 					write('</li>')
 				else
 					local title = pcdata(striptags(translate(nnode.title)))
@@ -240,11 +232,11 @@
 	<link rel="icon" type="image/png" sizes="32x32" href="<%=media%>/icon/favicon-32x32.png">
 	<link rel="icon" type="image/png" sizes="96x96" href="<%=media%>/icon/favicon-96x96.png">
 	<link rel="icon" type="image/png" sizes="16x16" href="<%=media%>/icon/favicon-16x16.png">
-	<link rel="manifest" href="<%=media%>/icon/manifest.json">
+	<link rel="manifest" href="<%=media%>/icon/manifest.json"  crossorigin="use-credentials">
 	<meta name="msapplication-TileColor" content="<%=bar_color%>">
 	<meta name="msapplication-TileImage" content="<%=media%>/icon/ms-icon-144x144.png">
 	<meta name="theme-color" content="<%=bar_color%>">
-	<link rel="stylesheet" href="<%=media%>/css/cascade.css?v=<%=math.random(1,100000)%>">
+	<link rel="stylesheet" href="<%=media%>/css/cascade.css<%# ?v=PKG_VERSION %>">
 	<style title="text/css">
 	<% if mode == 'normal' then %>
 		@media (prefers-color-scheme: dark) {
@@ -273,11 +265,11 @@
 	<% end -%>
 	<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>
+	<script src="<%=media%>/js/jquery.min.js?v=3.5.1"></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%>  ">
+	class="<%- if node then %><%= striptags( node.title ) %><%- end %> <% if luci.dispatcher.context.authsession then %>logged-in<% end %> lang_<%=luci.i18n.context.lang%> <%=mode %>  ">
 
 	<div class="main">
 		<div class="main-left">
@@ -326,3 +318,12 @@
 					</noscript>
 
 					<% if category then render_tabmenu(category, cattree) end %>
+
+	<script>
+		// thanks for Jo-Philipp Wich <jow@openwrt.org>
+		var luciLocation = <%= luci.http.write_json(luci.dispatcher.context.path) %>;
+	</script>
+
+	<script src="<%=media%>/js/menu-argonne.js<%# ?v=PKG_VERSION %>"></script>
+
+	<script src="<%=media%>/js/sidebar-argonne.js<%# ?v=PKG_VERSION %>"></script>
diff --git a/luci-theme-argonne/luasrc/view/themes/argonne/header_login.htm b/luci-theme-argonne/luasrc/view/themes/argonne/header_login.htm
index 3e6b0a882..07b5a0edb 100644
--- a/luci-theme-argonne/luasrc/view/themes/argonne/header_login.htm
+++ b/luci-theme-argonne/luasrc/view/themes/argonne/header_login.htm
@@ -2,10 +2,9 @@
 	Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI and Argonne Template
 
 	luci-theme-argonne
-	Copyright 2020 Jerryk <jerrykuku@gmail.com>
 
 	Have a bug? Please create an issue here on GitHub!
-	https://github.com/kenzok78/luci-theme-argonne/issues
+	https://github.com/jerrykuku/luci-theme-argonne/issues
 
 	luci-theme-bootstrap:
 	Copyright 2008 Steven Barth <steven@midlink.org>
@@ -15,7 +14,7 @@
 	MUI:
 	https://github.com/muicss/mui
 	
-	Agron Theme
+	Argonne Theme
 	https://demos.creative-tim.com/argon-dashboard/index.html
 
 	Licensed to the public under the Apache License 2.0
@@ -66,69 +65,70 @@
 		bar_color = mode == 'dark' and dark_primary or primary
 	end
 -%>
-
 <!DOCTYPE html>
 <html lang="<%=luci.i18n.context.lang%>">
+
 <head>
-	<meta charset="utf-8">
-	<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">
-	<meta name="mobile-web-app-capable" content="yes">
-	<meta name="x5-fullscreen" content="true">
-	<meta name="full-screen" content="yes">
-	<meta name="x5-page-mode" content="app">
-	<meta name="browsermode" content="application">
-	<meta name="msapplication-tap-highlight" content="no">
-	<meta name="msapplication-TileColor" content="<%=bar_color%>">
+    <meta charset="utf-8">
+    <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">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="x5-fullscreen" content="true">
+    <meta name="full-screen" content="yes">
+    <meta name="x5-page-mode" content="app">
+    <meta name="browsermode" content="application">
+    <meta name="msapplication-tap-highlight" content="no">
+    <meta name="msapplication-TileColor" content="<%=bar_color%>">
+    <meta name="application-name" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI">
+    <meta name="apple-mobile-web-app-title" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI">
+    <link rel="apple-touch-icon" sizes="60x60" href="<%=media%>/icon/apple-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="<%=media%>/icon/apple-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="<%=media%>/icon/apple-icon-144x144.png">
+    <link rel="icon" type="image/png" sizes="192x192" href="<%=media%>/icon/android-icon-192x192.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="<%=media%>/icon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="<%=media%>/icon/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="<%=media%>/icon/favicon-16x16.png">
+    <link rel="manifest" href="<%=media%>/icon/manifest.json" crossorigin="use-credentials">
+    <meta name="msapplication-TileColor" content="<%=bar_color%>">
+    <meta name="msapplication-TileImage" content="<%=media%>/icon/ms-icon-144x144.png">
+    <meta name="theme-color" content="<%=bar_color%>">
+    <link rel="stylesheet" href="<%=media%>/css/cascade.css<%# ?v=PKG_VERSION %>">
+    <style title="text/css">
+        <% if mode == 'normal' then %>
+            @media (prefers-color-scheme: dark) {
+                <%=dark_css%>
+            }
+        <% elseif mode == 'dark' then %>
+            <%=dark_css%>
+        <% end -%>
+        <% if fs.access('/etc/config/argonne') then %>
+        :root {
+            --primary: <%=primary%>;
+            --dark-primary: <%=dark_primary%>;
+            --blur-radius:<%=blur_radius%>px;
+            --blur-opacity:<%=blur_opacity%>;
+            --blur-radius-dark:<%=blur_radius_dark%>px;
+            --blur-opacity-dark:<%=blur_opacity_dark%>;
+        }
+        <% end -%>
+    </style>
+    <link rel="shortcut icon" href="<%=media%>/favicon.ico">
+    <% if node and node.css then %>
+    <link rel="stylesheet" href="<%=resource%>/<%=node.css%>">
+    <% end -%>
+    <% if css then %>
+    <style title="text/css">
+        <%=css %>
+    </style>
+    <% end -%>
+    <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=3.5.1"></script>
 
-	<meta name="application-name" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI">
-	<meta name="apple-mobile-web-app-title" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI">
-
-	<link rel="apple-touch-icon" sizes="60x60" href="<%=media%>/icon/apple-icon-60x60.png">
-	<link rel="apple-touch-icon" sizes="72x72" href="<%=media%>/icon/apple-icon-72x72.png">
-	<link rel="apple-touch-icon" sizes="144x144" href="<%=media%>/icon/apple-icon-144x144.png">
-	<link rel="icon" type="image/png" sizes="192x192"  href="<%=media%>/icon/android-icon-192x192.png">
-	<link rel="icon" type="image/png" sizes="32x32" href="<%=media%>/icon/favicon-32x32.png">
-	<link rel="icon" type="image/png" sizes="96x96" href="<%=media%>/icon/favicon-96x96.png">
-	<link rel="icon" type="image/png" sizes="16x16" href="<%=media%>/icon/favicon-16x16.png">
-	<link rel="manifest" href="<%=media%>/icon/manifest.json">
-	<meta name="msapplication-TileColor" content="<%=bar_color%>">
-	<meta name="msapplication-TileImage" content="<%=media%>/icon/ms-icon-144x144.png">
-	<meta name="theme-color" content="<%=bar_color%>">
-	<link rel="stylesheet" href="<%=media%>/css/cascade.css?v=<%=math.random(1,100000)%>">
-	<style title="text/css">
-	<% if mode == 'normal' then %>
-		@media (prefers-color-scheme: dark) {
-			<%=dark_css%>
-		}
-	<% elseif mode == 'dark' then %>
-		<%=dark_css%>
-	<% end -%>
-	<% if fs.access('/etc/config/argonne') then %>
-	:root {
-		--primary: <%=primary%>;
-		--dark-primary: <%=dark_primary%>;
-		--blur-radius:<%=blur_radius%>px;
-		--blur-opacity:<%=blur_opacity%>;
-		--blur-radius-dark:<%=blur_radius_dark%>px;
-		--blur-opacity-dark:<%=blur_opacity_dark%>;
-	}
-	<% end -%>
-	</style>
-	<link rel="shortcut icon" href="<%=media%>/favicon.ico">
-	<% if node and node.css then %>
-	<link rel="stylesheet" href="<%=resource%>/<%=node.css%>">
-	<% end -%>
-	<% if css then %>
-	<style title="text/css"><%=css %></style>
-	<% end -%>
-	<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%>  ">
diff --git a/luci-theme-argonne/luasrc/view/themes/argonne/out_header_login.htm b/luci-theme-argonne/luasrc/view/themes/argonne/out_header_login.htm
index 5a54a75b1..062d17fa9 100644
--- a/luci-theme-argonne/luasrc/view/themes/argonne/out_header_login.htm
+++ b/luci-theme-argonne/luasrc/view/themes/argonne/out_header_login.htm
@@ -1,6 +1,6 @@
 <%#
  Copyright 2008 Steven Barth <steven@midlink.org>
- Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
+ Copyright 2008-2019 Jo-Philipp Wich <jo@mein.io>
  Licensed to the public under the Apache License 2.0.
 -%>
 
diff --git a/luci-theme-argonne/luasrc/view/themes/argonne/sysauth.htm b/luci-theme-argonne/luasrc/view/themes/argonne/sysauth.htm
index 27f3e73b3..af48fdb9e 100644
--- a/luci-theme-argonne/luasrc/view/themes/argonne/sysauth.htm
+++ b/luci-theme-argonne/luasrc/view/themes/argonne/sysauth.htm
@@ -2,10 +2,9 @@
 	Argonne is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI and Argonne Template
 
 	luci-theme-argonne
-	Copyright 2021 Jerryk <jerrykuku@gmail.com>
 
 	Have a bug? Please create an issue here on GitHub!
-	https://github.com/kenzok78/luci-theme-argonne/issues
+	https://github.com/jerrykuku/luci-theme-argonne/issues
 
 	luci-theme-bootstrap:
 	Copyright 2008 Steven Barth <steven@midlink.org>
@@ -14,8 +13,8 @@
 
 	MUI:
 	https://github.com/muicss/mui
-	
-	Agron Theme
+
+	Argonne Theme
 	https://demos.creative-tim.com/argon-dashboard/index.html
 
 	Licensed to the public under the Apache License 2.0
@@ -23,16 +22,16 @@
 
 <%+header_login%>
 <%
-	local util	= require "luci.util"
-	local fs	= require "nixio.fs"
-	local nutil = require "nixio.util"
-	local sys 	= require "luci.sys"
-	local json 	= require "luci.jsonc"
-	local uci 	= require 'luci.model.uci'.cursor()
-	
+	local util		= require "luci.util"
+	local fs		= require "nixio.fs"
+	local nutil		= require "nixio.util"
+	local json		= require "luci.jsonc"
+	local sys		= require "luci.sys"
+	local uci		= require 'luci.model.uci'.cursor()
+
 	-- Fetch Local Background Media
 
-	function glob(...)
+	local function glob(...)
 		local iter, code, msg = fs.glob(...)
 		if iter then
 			return nutil.consume(iter)
@@ -41,64 +40,84 @@
 		end
 	end
 
-	function fetchMedia(path,themeDir)
-		local backgroundTable 	= {}
-		local backgroundCount 	= 0
+
+	local imageTypes = " jpg png gif webp "
+	local videoTypes = " mp4 webm "
+	local allTypes = imageTypes .. videoTypes
+	local function fetchMedia(path, themeDir)
+		local backgroundTable = {}
+		local backgroundCount = 0
 		for i, f in ipairs(glob(path)) do
 			attr = fs.stat(f)
 			if attr then
 				local ext = fs.basename(f):match(".+%.(%w+)$")
-				if ext == "jpg" or ext == "png" or ext == "gif" or ext == "mp4" then
+				if ext ~= nil then
+					ext = ext:lower()
+				end
+				if ext ~= nil and string.match(allTypes, " "..ext.." ") ~= nil then
 					local bg = {}
 					bg.type = ext
 					bg.url = themeDir .. fs.basename(f)
-					table.insert(backgroundTable,bg)
+					table.insert(backgroundTable, bg)
 					backgroundCount = backgroundCount + 1
 				end
 			end
 		end
-		return backgroundTable,backgroundCount
+		return backgroundTable, backgroundCount
+	end
+	local function selectBackground(themeDir)
+		local bgUrl				= media .. "/img/bg1.jpg"
+		local backgroundType	= "Image"
+		local mimeType			= ""
+
+		if fs.access("/etc/config/argonne") then
+			local online_wallpaper = uci:get_first('argonne', 'global', 'online_wallpaper') or (uci:get_first('argonne', 'global', 'bing_background') == '1' and 'bing')
+			if (online_wallpaper and online_wallpaper ~= "none") then
+				local picurl = sys.exec("/usr/libexec/argonne/online_wallpaper")
+				if (picurl and picurl ~= '') then
+					return picurl, "Image", ""
+				end
+			end
+		end
+
+		local backgroundTable, backgroundCount = fetchMedia("/www" .. themeDir .. "*", themeDir)
+		if ( backgroundCount > 0 ) then
+			local currentBg = backgroundTable[math.random(1, backgroundCount)]
+			bgUrl			= currentBg.url
+			if (string.match(videoTypes, " "..currentBg.type.." ") ~= nil) then
+				backgroundType	= "Video"
+				mimeType		= "video/" .. currentBg.type
+			end
+		end
+
+		return bgUrl, backgroundType, mimeType
 	end
 
 	local boardinfo			= util.ubus("system", "board")
-	local bingUrl 			= "http://www.bing.com/"
-	local bingApiUrl 		= bingUrl .. "HPImageArchive.aspx?format=js&idx=0&n=1&mkt=en-US"
 	local themeDir			= media .. "/background/"
-	local bgUrl 			= media .. "/img/bg1.jpg"
-	local useBing			= fs.access('/etc/config/argonne') and uci:get_first('argonne', 'global', 'bing_background') or "0"
-	local backgroundTable, backgroundCount 		= fetchMedia("/www" .. themeDir .. "*",themeDir)
-	local backgroundType 	= "Image"
-
-	function getBing()
-		local bing = sys.exec("wget --timeout=0.5 -qO- '%s'" %bingApiUrl)
-		if (bing and bing ~= '') then
-			bgUrl 	= bingUrl .. json.parse(bing).images[1].url
-		end
-	end
-
-	if ( useBing == "0" ) then
-		if ( backgroundCount > 0 ) then
-			local currentBg = backgroundTable[math.random(1,backgroundCount)]
-			bgUrl 			= currentBg.url
-			if (currentBg.type == "mp4" ) then
-				backgroundType 	= "Video"
-			end
-		end
-	else
-		pcall(getBing)
-	end
+	local bgUrl, backgroundType, mimeType = selectBackground(themeDir)
 %>
 <!-- Login Page Start -->
 <div class="login-page">
-	
 	<% if ( backgroundType == "Video" ) then %>
 	<!-- Video Player Start -->
-	<div class="video ar-flex ar-justify-content-center ar-align-items-center">
+	<div class="video">
 		<video autoplay loop muted id="video">
-			<source src="<%=bgUrl%>" type="video/mp4">
+			<source src="<%=bgUrl%>" type="<%=mimeType%>">
 		</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>
 	<!-- Video Player End -->
 	<% else %>
 	<!-- Image Background Start -->
@@ -108,8 +127,12 @@
 	<!-- Login Container Start -->
 	<div class="login-container">
 		<div class="login-form">
-			<a class="brand" href="/"><img src="<%=media%>/img/argonne.svg" class="icon"><span
-					class="brand-text"><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %></span></a>
+			<!-- Logo Start -->
+			<a class="brand" href="/"><img src="<%=media%>/img/argonne.svg" class="icon">
+				<span class="brand-text"><%=striptags( (boardinfo.hostname or "?") ) %></span>
+			</a>
+			<!-- Logo End -->
+			<!-- Login Form Start -->
 			<form class="form-login" method="post" action="<%=pcdata(luci.http.getenv("REQUEST_URI"))%>">
 
 				<%- if fuser then %>
@@ -130,7 +153,7 @@
 					<input type="submit" value="<%:Login%>" class="cbi-button cbi-button-apply" />
 				</div>
 			</form>
-
+			<!-- Login Form End -->
 			<script type="text/javascript">//<![CDATA[
 				var input = document.getElementsByName('luci_password')[0];
 				if (input)
diff --git a/luci-theme-argonne/root/etc/uci-defaults/90_luci-theme-argonne b/luci-theme-argonne/root/etc/uci-defaults/90_luci-theme-argonne
index 912c3aae5..093f61612 100644
--- a/luci-theme-argonne/root/etc/uci-defaults/90_luci-theme-argonne
+++ b/luci-theme-argonne/root/etc/uci-defaults/90_luci-theme-argonne
@@ -1,12 +1,12 @@
 #!/bin/sh
 sed -i ":a;$!N;s/tmpl.render.*sysauth_template.*return/local scope = { duser = default_user, fuser = user }\nlocal ok, res = luci.util.copcall\(luci.template.render_string, [[<% include\(\"themes\/\" .. theme .. \"\/sysauth\"\) %>]], scope\)\nif ok then\nreturn res\nend\nreturn luci.template.render\(\"sysauth\", scope\)/;ba" /usr/lib/lua/luci/dispatcher.lua
 sed -i ":a;$!N;s/t.render.*sysauth_template.*return/local scope = { duser = h, fuser = a }\nlocal ok, res = luci.util.copcall\(luci.template.render_string, [[<% include\(\"themes\/\" .. theme .. \"\/sysauth\"\) %>]], scope\)\nif ok then\nreturn res\nend\nreturn luci.template.render\(\"sysauth\", scope\)/;ba" /usr/lib/lua/luci/dispatcher.lua
-[ -f /usr/lib/lua/luci/view/themes/argonne/out_header_login.htm ] && mv -f /usr/lib/lua/luci/view/themes/argonne/out_header_login.htm /usr/lib/lua/luci/view/header_login.htm
+[ -f /usr/lib/lua/luci/view/themes/argonnene/out_header_login.htm ] && mv -f /usr/lib/lua/luci/view/themes/argonnene/out_header_login.htm /usr/lib/lua/luci/view/header_login.htm
 rm -Rf /var/luci-modulecache
 rm -Rf /var/luci-indexcache
 uci batch <<-EOF
-	set luci.themes.Argonne=/luci-static/argonne
-	set luci.main.mediaurlbase=/luci-static/argonne
+	set luci.themes.Argonne=/luci-static/argonnene
+	set luci.main.mediaurlbase=/luci-static/argonnene
 	commit luci
 EOF
 exit 0
\ No newline at end of file
diff --git a/luci-theme-argonne/root/usr/libexec/argonne/online_wallpaper b/luci-theme-argonne/root/usr/libexec/argonne/online_wallpaper
new file mode 100755
index 000000000..241c31d0b
--- /dev/null
+++ b/luci-theme-argonne/root/usr/libexec/argonne/online_wallpaper
@@ -0,0 +1,70 @@
+#!/bin/sh
+# author jjm2473
+
+# the script will be excuted when `argon.@global[0].bing_background == '1'`
+# defaults to 'bing' to be compatible with old config
+WEB_PIC_SRC=$(uci -q get argon.@global[0].online_wallpaper || echo 'bing')
+CACHE=/var/run/argon_${WEB_PIC_SRC}.url
+WRLOCK=/var/lock/argon_${WEB_PIC_SRC}.lock
+
+fetch_pic_url() {
+    case $WEB_PIC_SRC in
+    bing)
+        local picpath=$(curl -fks --max-time 3 \
+            "https://www.bing.com/HPImageArchive.aspx?format=js&n=1" |
+            jsonfilter -q -e '@.images[0].url')
+        [ -n "${picpath}" ] && echo "//www.bing.com${picpath}"
+        ;;
+    unsplash)
+        curl -fks --max-time 3 \
+            "https://source.unsplash.com/1920x1080/daily?wallpapers" |
+            sed -E 's#^.*href="([^?]+)\?.*$#\1?fm=jpg\&fit=crop\&w=1920\&h=1080#'
+        ;;
+    unsplash_*)
+        local collection_id=${WEB_PIC_SRC#unsplash_}
+        curl -fks --max-time 3 \
+            "https://source.unsplash.com/collection/${collection_id}/1920x1080" |
+            sed -E 's#^.*href="([^?]+)\?.*$#\1?fm=jpg\&fit=crop\&w=1920\&h=1080#'
+        ;;
+    esac
+}
+
+try_update() {
+    local lock="$WRLOCK"
+    exec 200>$lock
+
+    if flock -n 200 >/dev/null 2>&1; then
+        local picurl=$(fetch_pic_url)
+        if [ -n "$picurl" ]; then
+            echo "${picurl}" | tee "$CACHE"
+        else
+            if [ -s "$CACHE" ]; then
+                cat "$CACHE"
+            else
+                touch "$CACHE"
+            fi
+        fi
+        flock -u 200 >/dev/null 2>&1
+    elif [ -s "$CACHE" ]; then
+        cat "$CACHE"
+    fi
+}
+
+get_url() {
+    if [ -f "$CACHE" ]; then
+        local idle_t=$(($(date '+%s') - $(date -r "$CACHE" '+%s' 2>/dev/null || echo '0')))
+        if [ -s "$CACHE" ]; then
+            if [ $idle_t -le 43200 ]; then
+                cat "$CACHE"
+                return
+            fi
+        else
+            if [ $idle_t -le 120 ]; then
+                return
+            fi
+        fi
+    fi
+    try_update
+}
+
+get_url