diff --git a/ESP32_AP-Flasher/wwwroot/edit.html b/ESP32_AP-Flasher/wwwroot/edit.html
index fa4ca6f0..e6cea6f9 100644
--- a/ESP32_AP-Flasher/wwwroot/edit.html
+++ b/ESP32_AP-Flasher/wwwroot/edit.html
@@ -777,8 +777,10 @@
 			if (typeof lang === "undefined") {
 				lang = getLangFromFilename(file);
 			}
-
-			if (typeof theme === "undefined") theme = "textmate";
+			if (typeof theme === "undefined") {
+				const currentTheme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+				theme = (currentTheme === 'dark') ? "tomorrow_night" : "textmate";
+			}
 
 			if (typeof type === "undefined") {
 				type = "text/" + lang;
diff --git a/ESP32_AP-Flasher/wwwroot/index.html b/ESP32_AP-Flasher/wwwroot/index.html
index 2a893a23..535d627c 100644
--- a/ESP32_AP-Flasher/wwwroot/index.html
+++ b/ESP32_AP-Flasher/wwwroot/index.html
@@ -25,11 +25,11 @@
 					<div class="tablinks material-symbols-outlined" data-target="hometab" title="Dashboard">home</div>
 					<div class="tablinks material-symbols-outlined" data-target="tagtab" title="Tags">sell</div>
 					<div class="tablinks material-symbols-outlined" data-target="aptab" title="Access Points">cell_tower</div>
-					<!--<div class="tablinks material-symbols-outlined" data-target="templatetab" title="Templates">browse
-					</div>-->
+					<!--<div class="tablinks material-symbols-outlined" data-target="templatetab" title="Templates">browse</div>-->
 					<div class="tablinks material-symbols-outlined" data-target="flashtab" title="Tag flasher" style="display:none;">flash_on</div>
 					<div class="tablinks material-symbols-outlined" data-target="configtab" title="Settings">settings</div>
 					<div class="tablinks material-symbols-outlined" data-target="logtab" title="Logging">text_snippet</div>
+					<button id="theme-toggle" class="theme-toggle-btn material-symbols-outlined" title="Toggle Theme">light_mode</button>
 				</div>
 				<!-- /tabs -->
 				<div><span id="runstate"></div>
diff --git a/ESP32_AP-Flasher/wwwroot/main.css b/ESP32_AP-Flasher/wwwroot/main.css
index ecdb0e77..7a6454a8 100644
--- a/ESP32_AP-Flasher/wwwroot/main.css
+++ b/ESP32_AP-Flasher/wwwroot/main.css
@@ -1,3 +1,110 @@
+/* CSS Variables for Theming */
+:root {
+	--color-background: #e4e4e0;
+	--color-text: #000000;
+	--color-text-light: #444;
+	--color-text-error: red;
+	--color-header-bg: #646260;
+	--color-header-text: #ffffff;
+	--color-nav-bg: #ffffff;
+	--color-tab-bg: #f2f2f2;
+	--color-tab-hover-bg: #ddd;
+	--color-tab-active-bg: #ccc;
+	--color-tab-border: #ccc;
+	--color-card-bg: #ffffff;
+	--color-card-border: #cccccc;
+	--color-card-hover-shadow: rgba(0, 0, 0, 0.63);
+	--color-dialog-bg: #f0e6d3;
+	--color-button-bg: #ccc;
+	--color-button-text: black;
+	--color-button-hover-bg: #aaaaaa;
+	--color-input-bg: #ffffff;
+	--color-input-text: #000000;
+	--color-input-border: #cccccc;
+	--color-console-bg: black;
+	--color-console-text: white;
+	--color-console-mono-bg: #666;
+	--color-console-mono-text: #ccc;
+	--color-console-quote-text: white;
+	--color-tag-pending-anim-bg: #d4d4f5;
+	--color-tag-group-bg: #6d6e6e;
+	--color-tag-group-text: white;
+	--color-tag-group-border: #c0c0c0;
+	--color-context-menu-bg: white;
+	--color-context-menu-border: gray;
+	--color-context-menu-hover-bg: #e0e0e0;
+	--color-link: #0000ee;
+	--color-readonly-bg: #ccc;
+	--color-tag-deepsleep-bg: #e4e4e0;
+	--color-tag-boot-bg: #b0d0b0;
+	--color-tag-wakeup-bg: #c8f1bb;
+	--color-tag-scan-bg: #c0c0d0;
+	--color-tag-reset-bg: #d0a0a0;
+	--color-tag-failed-ota-bg: #f0a0a0;
+	--color-tag-timeout-bg: #e0e0a0;
+	--color-log-new-bg-start: rgba(255, 255, 204, 1);
+	--color-log-new-bg-mid: rgba(255, 255, 204, 0.5);
+	--color-log-new-bg-end: rgba(255, 255, 204, 0);
+}
+
+body.dark-mode {
+	--color-background: #1c1c1e;
+	--color-text: #f0f0f0;
+	--color-text-light: #cccccc;
+	--color-text-error: #ff8a8a;
+	--color-header-bg: #2a2a2d;
+	--color-header-text: #f0f0f0;
+	--color-nav-bg: #1f1f22;
+	--color-tab-bg: #3a3a3c;
+	--color-tab-hover-bg: #4a4a4c;
+	--color-tab-active-bg: #5a5a5c;
+	--color-tab-border: #5a5a5c;
+	--color-card-bg: #2c2c2e;
+	--color-card-border: #444444;
+	--color-card-hover-shadow: rgba(255, 255, 255, 0.2);
+	--color-dialog-bg: #3a3a3c;
+	--color-button-bg: #5a5a5c;
+	--color-button-text: #f0f0f0;
+	--color-button-hover-bg: #6a6a6c;
+	--color-input-bg: #3a3a3c;
+	--color-input-text: #f0f0f0;
+	--color-input-border: #555555;
+	--color-console-bg: #1e1e1e;
+	--color-console-text: #f0f0f0;
+	--color-console-mono-bg: #444;
+	--color-console-mono-text: #ddd;
+	--color-console-quote-text: #ffffff;
+	--color-tag-pending-anim-bg: #3c3c5c;
+	--color-tag-group-bg: #4a4a4c;
+	--color-tag-group-text: #f0f0f0;
+	--color-tag-group-border: #555555;
+	--color-context-menu-bg: #2c2c2e;
+	--color-context-menu-border: #555;
+	--color-context-menu-hover-bg: #4a4a4c;
+	--color-link: #58a6ff;
+	--color-readonly-bg: #4a4a4c;
+	--color-tag-deepsleep-bg: #3a3a3c;
+	--color-tag-boot-bg: #3a5c3a;
+	--color-tag-wakeup-bg: #4a6c4a;
+	--color-tag-scan-bg: #4c4c5c;
+	--color-tag-reset-bg: #6c4c4c;
+	--color-tag-failed-ota-bg: #7c4c4c;
+	--color-tag-timeout-bg: #6c6c4c;
+	--color-log-new-bg-start: rgba(88, 166, 255, 0.3);
+	--color-log-new-bg-mid: rgba(88, 166, 255, 0.15);
+	--color-log-new-bg-end: rgba(88, 166, 255, 0);
+}
+
+/* Tag State Classes */
+.tagcard.state-deepsleep { background-color: var(--color-tag-deepsleep-bg); }
+.tagcard.state-boot { background-color: var(--color-tag-boot-bg); }
+.tagcard.state-wakeup { background-color: var(--color-tag-wakeup-bg); }
+.tagcard.state-scan { background-color: var(--color-tag-scan-bg); }
+.tagcard.state-reset { background-color: var(--color-tag-reset-bg); }
+.tagcard.state-failed-ota { background-color: var(--color-tag-failed-ota-bg); }
+.tagcard.state-timeout { background-color: var(--color-tag-timeout-bg); }
+
+
 * {
 	margin: 0;
 	padding: 0;
@@ -16,11 +123,12 @@ body {
 	font-size: 12px;
 	font-family: Helvetica, Arial, Verdana, sans-serif;
 	line-height: 1.5;
-	background-color: #e4e4e0;
+	background-color: var(--color-background);
+	color: var(--color-text);
 }
 
 header {
-	background-color: #646260;
+	background-color: var(--color-header-bg);
 	z-index: 999;
 	position: sticky;
 	top: 0px;
@@ -35,7 +143,7 @@ nav>div {
 	display: flex;
 	gap: 20px;
 	padding: 10px;
-	background-color: white;
+	background-color: var(--color-nav-bg);
 }
 
 nav label {
@@ -50,11 +158,13 @@ footer {
 	position: fixed;
 	bottom: 0;
 	width: 100%;
-	background-color: white;
+	background-color: var(--color-nav-bg);
+	border-top: 1px solid var(--color-card-border);
+	color: var(--color-text);
+}
 
-	#sysinfo {
-		float: right;
-	}
+footer #sysinfo {
+	float: right;
 }
 
 .logo {
@@ -63,12 +173,13 @@ footer {
 	text-indent: 12px;
 	overflow: hidden;
 	font-size: 2.5em;
-	color: white;
+	color: var(--color-header-text);
 }
 
 h3 {
 	padding-bottom: 10px;
 	font-size: 1.5em;
+	color: var(--color-text);
 }
 
 /* tabs */
@@ -79,7 +190,8 @@ h3 {
 }
 
 .tablinks {
-	background-color: #f2f2f2;
+	background-color: var(--color-tab-bg);
+	color: var(--color-text);
 	padding: 5px 10px;
 	border: none;
 	cursor: pointer;
@@ -87,12 +199,12 @@ h3 {
 	transition: all 0.2s ease-in-out;
 
 	&:hover {
-		background-color: #ddd;
+		background-color: var(--color-tab-hover-bg);
 	}
 }
 
 .tab-container .active {
-	background-color: #ccc;
+	background-color: var(--color-tab-active-bg);
 	margin-top: 10px;
 	margin-bottom: -10px;
 	padding-bottom: 0px;
@@ -100,7 +212,7 @@ h3 {
 
 .tabcontent {
 	display: none;
-	border-top: 1px solid #ccc;
+	border-top: 1px solid var(--color-tab-border);
 }
 
 
@@ -109,11 +221,11 @@ label {
 	display: inline-block;
 	vertical-align: top;
 	padding: 4px 20px;
+	color: var(--color-text);
 }
 
 .container {
 	padding-bottom: 20px;
-	;
 }
 
 #hometab {
@@ -121,9 +233,10 @@ label {
 
 	& table {
 		margin: 20px;
-		background: #fff;
+		background: var(--color-card-bg);
 		padding: 5px 20px;
 		border-spacing: 0px;
+		color: var(--color-text);
 	}
 
 	& td {
@@ -136,7 +249,7 @@ label {
 	}
 
 	& tr:hover {
-		background-color: #ccc;
+		background-color: var(--color-tab-active-bg);
 		cursor: pointer;
 	}
 
@@ -167,14 +280,14 @@ label {
 }
 
 .tabheader {
-	background-color: white;
+	background-color: var(--color-nav-bg);
 	padding: 5px 10px;
 	display: flex;
 	gap: 2em;
 }
 
 #filterOptions {
-	background-color: white;
+	background-color: var(--color-nav-bg);
 	max-height: 0;
 	padding: 0px 10px;
 	overflow: hidden;
@@ -205,6 +318,9 @@ label {
 	& p {
 		padding: 3px;
 	}
+	& a {
+		color: var(--color-link);
+	}
 }
 
 #updatetab, #flashtab {
@@ -226,7 +342,7 @@ label {
 		margin: 0px 5px;
 	}
 	& input:read-only {
-		background-color: #ccc;
+		background-color: var(--color-readonly-bg);
 	}
 	& .warning {
 		padding: 5px;
@@ -243,10 +359,15 @@ label {
 }
 
 .apcard {
-	background-color: #fff;
-	border: 1px solid #ccc;
+	background-color: var(--color-card-bg);
+	border: 1px solid var(--color-card-border);
 	padding: 10px;
 	width: 300px;
+	color: var(--color-text);
+	
+	& .apip a {
+		color: var(--color-link);
+	}
 
 	& .apalias {
 		font-size: 1.5em;
@@ -278,15 +399,15 @@ label {
 	padding: 5px 10px;
 	margin-bottom: 0px;
 	margin-top: -1px;
-	background-color: #ccc;
+	background-color: var(--color-button-bg);
 	text-decoration: none;
-	color: black;
+	color: var(--color-button-text);
 	cursor: pointer;
 	white-space: nowrap;
 	text-align: center;
 
 	&:hover {
-		background-color: #aaa;
+		background-color: var(--color-button-hover-bg);
 	}
 }
 
@@ -296,9 +417,9 @@ label {
 #uploadButton,
 .wifibutton {
 	padding: 4px 5px;
-	background-color: #ccc;
+	background-color: var(--color-button-bg);
 	text-decoration: none;
-	color: black;
+	color: var(--color-button-text);
 	cursor: pointer;
 	white-space: nowrap;
 	width: 120px;
@@ -307,7 +428,7 @@ label {
 	text-align: center;
 
 	&:hover {
-		background-color: #aaa;
+		background-color: var(--color-button-hover-bg);
 	}
 }
 
@@ -327,10 +448,13 @@ input[type="submit"],
 button {
 	appearance: none;
 	border-radius: 0;
+	color: var(--color-input-text);
 }
 
-input {
-	border: solid 1px #cccccc;
+input, textarea, select {
+	border: solid 1px var(--color-input-border);
+	background-color: var(--color-input-bg);
+	color: var(--color-input-text);
 	padding: 4px;
 	border-radius: 0px;
 }
@@ -340,18 +464,21 @@ button {
 	border: 0px;
 	padding: 4px 10px;
 	cursor: pointer;
-	background-color: #ccc;
+	background-color: var(--color-button-bg);
+	color: var(--color-button-text);
 }
 
 input[type=button]:hover,
 button:hover {
-	background-color: #aaaaaa;
+	background-color: var(--color-button-hover-bg);
 }
 
 input[type=file] {
 	padding: 0px;
 	margin-left: 20px;
 	width: 200px;
+	background: none;
+	border: none;
 }
 
 input[type=checkbox] {
@@ -361,7 +488,6 @@ input[type=checkbox] {
 select {
 	padding: 3px 4px;
 	border-radius: 0px;
-	border: solid 1px #cccccc;
 	max-width: 180px;
 }
 
@@ -375,7 +501,7 @@ select {
 	padding: 15px;
 	background-color: #f0e6d3;
 	z-index: 999;
-	box-shadow: 7px 10px 52px -19px rgba(0, 0, 0, 0.63);
+	box-shadow: 7px 10px 52px -19px var(--color-card-hover-shadow);
 	overflow: auto;
 	max-height: calc(100vh - 75px);
 }
@@ -384,11 +510,12 @@ select {
 	margin: auto;
 	min-width: 380px;
 	padding: 15px;
-	background-color: #f0e6d3;
+	background-color: var(--color-dialog-bg);
 	z-index: 999;
-	box-shadow: 7px 10px 52px -19px rgba(0, 0, 0, 0.63);
+	box-shadow: 7px 10px 52px -19px var(--color-card-hover-shadow);
 	overflow: auto;
 	max-height: calc(100vh - 75px);
+	color: var(--color-text);
 
 	& label {
 			width: 150px;
@@ -414,7 +541,7 @@ select {
 
 #configbox input,
 #apconfigbox input {
-	border: solid 1px #cccccc;
+	border: solid 1px var(--color-input-border);
 }
 
 #configbox input[type=number] {
@@ -475,7 +602,7 @@ select {
 
 .closebtn,
 .closebtn2 {
-	border: 1px solid black;
+	border: 1px solid var(--color-text);
 	float: right;
 	width: 19px;
 	height: 20px;
@@ -483,6 +610,7 @@ select {
 	text-align: center;
 	margin: 5px;
 	cursor: pointer;
+	color: var(--color-text);
 }
 
 #logtab {
@@ -523,13 +651,14 @@ select {
 	min-height: 170px;
 	margin: 3px;
 	padding: 4px 5px 5px 8px;
-	background-color: #ffffff;
-	border: 1px solid #cccccc;
-	transition: box-shadow 0.3s ease;
+	background-color: var(--color-card-bg);
+	border: 1px solid var(--color-card-border);
+	transition: box-shadow 0.3s ease, background-color 0.3s ease;
+	color: var(--color-text);
 
 	&:hover {
 		cursor: pointer;
-		box-shadow: 7px 10px 52px -19px rgba(0, 0, 0, 0.63);
+		box-shadow: 7px 10px 52px -19px var(--color-card-hover-shadow);
 		filter: brightness(1.02);
 	}
 }
@@ -549,10 +678,10 @@ select {
 }
 
 .taggroup {
-	border: 1px solid #c0c0c0;
+	border: 1px solid var(--color-tag-group-border);
 	width: 100%;
-	background-color: #6d6e6e;
-	color: white;
+	background-color: var(--color-tag-group-bg);
+	color: var(--color-tag-group-text);
 	padding: 5px;
 	margin: 0px 3px;
 }
@@ -564,7 +693,7 @@ select {
 .currimg img,
 .currimg canvas {
 	max-width: 50px;
-	border: 1px solid #c0c0c0;
+	border: 1px solid var(--color-tag-group-border);
 }
 
 .mac {
@@ -621,6 +750,15 @@ select {
 	display: inline-block;
 }
 
+.lastseen {
+	color: var(--color-text);
+}
+
+.lastseen.error {
+	color: var(--color-text-error);
+}
+
+
 .corner {
 	position: absolute;
 	right: 0px;
@@ -667,6 +805,7 @@ ul.messages {
 
 ul.messages li {
 	position: relative;
+	color: var(--color-text);
 }
 
 ul.messages li.new {
@@ -677,40 +816,41 @@ ul.messages li.new {
 }
 
 .error {
-	color: red;
+	color: var(--color-text-error);
 }
 
 .mono {
 	font-family: monospace;
 	word-break: break-all;
-	background-color: #666;
-	color: #ccc;
+	background-color: var(--color-console-mono-bg);
+	color: var(--color-console-mono-text);
 	padding: 2px;
 }
 
 .quote {
-	color: white;
+	color: var(--color-console-quote-text);
 }
 
 #georesults {
 	position: absolute;
-	background: white;
+	background: var(--color-nav-bg);
 	cursor: pointer;
 	width: 240px;
 	max-height: 115px;
 	overflow-y: scroll;
 	padding: 0px 2px 0px 2px;
+	border: 1px solid var(--color-card-border);
 	& div {
 		display:flex;
 	}
 	& div:hover {
-		background-color: #e0e0e0;
+		background-color: var(--color-tab-hover-bg);
 	}
 }
 
 #paintbutton {
 	padding: 1px 3px;
-	border: 1px solid black;
+	border: 1px solid var(--color-text);
 	font-size: 1.3em;
 	vertical-align: top;
 	margin-left: 12px;
@@ -719,7 +859,7 @@ ul.messages li.new {
 }
 
 #paintbutton:hover {
-	background-color: #aaaaaa;
+	background-color: var(--color-button-hover-bg);
 }
 
 .drophighlight {
@@ -730,8 +870,8 @@ ul.messages li.new {
 #context-menu {
 	display: none;
 	position: absolute;
-	background: white;
-	border: 1px solid gray;
+	background: var(--color-context-menu-bg);
+	border: 1px solid var(--color-context-menu-border);
 	list-style: none;
 	z-index: 999;
 	padding: 2px 5px;
@@ -740,10 +880,11 @@ ul.messages li.new {
 #context-menu li {
 	cursor: pointer;
 	padding: 1px 5px;
+	color: var(--color-text);
 }
 
 #context-menu li:hover {
-	background-color: #e0e0e0;
+	background-color: var(--color-context-menu-hover-bg);
 }
 
 /* painter */
@@ -753,7 +894,7 @@ ul.messages li.new {
 }
 
 #canvasdiv canvas {
-	border: 1px solid black;
+	border: 1px solid var(--color-text);
 }
 
 #buttonbar {
@@ -765,8 +906,8 @@ ul.messages li.new {
 #buttonbar button,
 #layersdiv button {
 	padding: 1px 2px;
-	border: 1px solid #cccccc;
-	background-color: #dddddd;
+	border: 1px solid var(--color-input-border);
+	background-color: var(--color-button-bg);
 	width: 40px;
 }
 
@@ -776,13 +917,13 @@ ul.messages li.new {
 }
 
 #buttonbar .active {
-	background-color: #ffffff;
+	background-color: var(--color-input-bg);
 	cursor: pointer;
 }
 
 #buttonbar button:hover,
 #layersdiv button:hover {
-	background-color: #cccccc;
+	background-color: var(--color-button-hover-bg);
 	cursor: pointer;
 }
 
@@ -806,14 +947,14 @@ ul.messages li.new {
 }
 
 #savebar button {
-	border: solid 1px #666666;
+	border: solid 1px var(--color-text-light);
 }
 
 /* updatescreens */
 
 #easyupdate {
 	padding: 10px;
-	background-color: white;
+	background-color: var(--color-nav-bg);
 	width: 400px;
 	margin-bottom: 20px;
 }
@@ -845,12 +986,12 @@ h4 {
 
 .releasetable th {
 	text-align: left;
-	background-color: #ffffff;
+	background-color: var(--color-nav-bg);
 	padding: 1px 5px;
 }
 
 .releasetable td {
-	background-color: #ffffff;
+	background-color: var(--color-nav-bg);
 	padding: 1px 5px;
 	min-width: 70px;
 	vertical-align: baseline;
@@ -862,11 +1003,11 @@ h4 {
 
 .releasetable button {
 	padding: 3px 10px;
-	background-color: #e0e0e0;
+	background-color: var(--color-button-bg);
 }
 
 .releasetable button:hover {
-	background-color: #a0a0a0;
+	background-color: var(--color-button-hover-bg);
 }
 
 .updateCol1, .flashCol1 {
@@ -875,9 +1016,9 @@ h4 {
 
 .console {
 	width: 450px;
-	background-color: black;
+	background-color: var(--color-console-bg);
 	font-family: 'lucida console', 'ui-monospace', 'monospace';
-	color: white;
+	color: var(--color-console-text);
 	padding: 5px 10px;
 	padding-bottom: 25px;
 	height: calc(100vh - 200px);
@@ -916,15 +1057,15 @@ h4 {
 
 @keyframes new {
 	0% {
-		background-color: rgba(255, 255, 204, 1);
+		background-color: var(--color-log-new-bg-start);
 	}
 
 	50% {
-		background-color: rgba(255, 255, 204, .5);
+		background-color: var(--color-log-new-bg-mid);
 	}
 
 	100% {
-		background-color: rgba(255, 255, 204, 0);
+		background-color: var(--color-log-new-bg-end);
 	}
 }
 
@@ -946,14 +1087,13 @@ h4 {
 	0% {}
 
 	50% {
-		background-color: #d4d4f5;
+		background-color: var(--color-tag-pending-anim-bg);
 	}
 
 	100% {}
 }
 
 @media screen and (max-width: 480px) {
-	/* styles for mobile devices in portrait mode */
 
 	body {
 		font-size: 13px;
@@ -1008,4 +1148,22 @@ h4 {
 		padding: 1px 1px;
 	}
 
-}
+	.theme-toggle-btn {
+	background-color: transparent;
+	border: none;
+	color: var(--color-header-text);
+	cursor: pointer;
+	align-self: center;
+	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;	
+	margin-left: auto; 	
+	border-left: 1px solid var(--color-tab-border);	
+	padding: 6px 1rem;
+	border-radius: 4px;
+	margin-right: 1rem;
+	}
+
+	.theme-toggle-btn:hover {
+		background-color: var(--color-tab-hover-bg);
+	}
+
+}
\ No newline at end of file
diff --git a/ESP32_AP-Flasher/wwwroot/main.js b/ESP32_AP-Flasher/wwwroot/main.js
index 66471bcb..691b0937 100644
--- a/ESP32_AP-Flasher/wwwroot/main.js
+++ b/ESP32_AP-Flasher/wwwroot/main.js
@@ -83,6 +83,34 @@ window.addEventListener("loadConfig", function () {
 });
 
 window.addEventListener("load", function () {
+    const themeToggle = $('#theme-toggle');
+    if (themeToggle) {
+        const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
+
+        const setTheme = (theme) => {
+            if (theme === 'dark') {
+                document.body.classList.add('dark-mode');
+                themeToggle.innerHTML = 'dark_mode';
+                localStorage.setItem('theme', 'dark');
+            } else {
+                document.body.classList.remove('dark-mode');
+                themeToggle.innerHTML = 'light_mode';
+                localStorage.setItem('theme', 'light');
+            }
+        };
+
+        themeToggle.addEventListener('click', () => {
+            const isDarkMode = document.body.classList.contains('dark-mode');
+            setTheme(isDarkMode ? 'light' : 'dark');
+        });
+
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme) {
+            setTheme(savedTheme);
+        } else {
+            setTheme(prefersDarkScheme.matches ? 'dark' : 'light');
+        }
+    }
 	window.dispatchEvent(loadConfig);
 	initTabs();
 	fetch('content_cards.json')
@@ -267,6 +295,17 @@ function convertSize(bytes) {
 	return bytes;
 }
 
+function clearTagStateClasses(tagElement) {
+	tagElement.classList.remove(
+		'state-deepsleep',
+		'state-boot',
+		'state-wakeup',
+		'state-scan',
+		'state-reset',
+		'state-failed-ota'
+	);
+}
+
 function processTags(tagArray) {
 	for (const element of tagArray) {
 		const tagmac = element.mac;
@@ -385,7 +424,7 @@ function processTags(tagArray) {
 		}
 
 		div.style.opacity = '1';
-		$('#tag' + tagmac + ' .lastseen').style.color = "black";
+		$('#tag' + tagmac + ' .lastseen').style.color = "";
 		div.classList.remove("tagpending");
 		div.dataset.lastseen = element.lastseen;
 		div.dataset.wakeupreason = element.wakeupReason;
@@ -393,51 +432,56 @@ function processTags(tagArray) {
 		div.dataset.channel = element.ch;
 		div.dataset.isexternal = element.isexternal;
 		$('#tag' + tagmac + ' .warningicon').style.display = 'none';
-		$('#tag' + tagmac).style.background = "#ffffff";
-		if (element.contentMode == 12 || element.nextcheckin == 3216153600) $('#tag' + tagmac).style.background = "#e4e4e0";
-
+		
+		div.style.background = '';
+		div.classList.remove('state-timeout');
+		clearTagStateClasses(div);
+		
+		let stateClassSet = false;
 		switch (parseInt(element.wakeupReason)) {
-
 			case WAKEUP_REASON_TIMED:
 				break;
 			case WAKEUP_REASON_BOOT:
 			case WAKEUP_REASON_FIRSTBOOT:
 				$('#tag' + tagmac + ' .nextcheckin').innerHTML = "<font color=yellow>First boot</font>"
-				$('#tag' + tagmac).style.background = "#b0d0b0";
+				div.classList.add("state-boot");
+				stateClassSet = true;
 				break;
 			case WAKEUP_REASON_GPIO:
-				$('#tag' + tagmac + ' .nextcheckin').innerHTML = "GPIO wakeup"
-				$('#tag' + tagmac).style.background = "#c8f1bb";
-				break;
 			case WAKEUP_REASON_BUTTON1:
-				$('#tag' + tagmac + ' .nextcheckin').innerHTML = "Button 1 pressed"
-				$('#tag' + tagmac).style.background = "#c8f1bb";
-				break;
 			case WAKEUP_REASON_BUTTON2:
-				$('#tag' + tagmac + ' .nextcheckin').innerHTML = "Button 2 pressed"
-				$('#tag' + tagmac).style.background = "#c8f1bb";
-				break;
 			case WAKEUP_REASON_BUTTON3:
-				$('#tag' + tagmac + ' .nextcheckin').innerHTML = "Button 3 pressed"
-				$('#tag' + tagmac).style.background = "#c8f1bb";
-				break;
 			case WAKEUP_REASON_NFC:
-				$('#tag' + tagmac + ' .nextcheckin').innerHTML = "NFC wakeup"
-				$('#tag' + tagmac).style.background = "#c8f1bb";
+				let reasonText = {
+					[WAKEUP_REASON_GPIO]: "GPIO wakeup",
+					[WAKEUP_REASON_BUTTON1]: "Button 1 pressed",
+					[WAKEUP_REASON_BUTTON2]: "Button 2 pressed",
+					[WAKEUP_REASON_BUTTON3]: "Button 3 pressed",
+					[WAKEUP_REASON_NFC]: "NFC wakeup"
+				}[parseInt(element.wakeupReason)];
+				$('#tag' + tagmac + ' .nextcheckin').innerHTML = reasonText;
+				div.classList.add("state-wakeup");
+				stateClassSet = true;
 				break;
 			case WAKEUP_REASON_NETWORK_SCAN:
 				$('#tag' + tagmac + ' .nextcheckin').innerHTML = "<font color=yellow>Network scan</font>"
-				$('#tag' + tagmac).style.background = "#c0c0d0";
+				div.classList.add("state-scan");
+				stateClassSet = true;
 				break;
 			case WAKEUP_REASON_WDT_RESET:
 				$('#tag' + tagmac + ' .nextcheckin').innerHTML = "Watchdog reset!"
-				$('#tag' + tagmac).style.background = "#d0a0a0";
+				div.classList.add("state-reset");
+				stateClassSet = true;
 				break;
 			case WAKEUP_REASON_FAILED_OTA_FW:
 				$('#tag' + tagmac + ' .nextcheckin').innerHTML = "Firmware update rejected!"
-				$('#tag' + tagmac).style.background = "#f0a0a0";
+				div.classList.add("state-failed-ota");
+				stateClassSet = true;
 				break;
-		}
+		}		
+		if (!stateClassSet && (element.contentMode == 12 || element.nextcheckin == 3216153600)) {
+			div.classList.add("state-deepsleep");
+		}		
 		$('#tag' + tagmac + ' .pendingicon').style.display = (element.pending ? 'inline-block' : 'none');
 		$('#tag' + tagmac + ' .pendingicon').innerHTML = element.pending;
 		div.classList.add("tagflash");
@@ -472,18 +516,24 @@ function updatecards() {
 		if (tagDB[tagmac].batteryMv < 2400 && tagDB[tagmac].batteryMv != 0 && tagDB[tagmac].batteryMv != 1337) lowbattcount++;
 		if (item.dataset.lastseen && item.dataset.lastseen > (Date.now() / 1000) - servertimediff - 30 * 24 * 3600 * 60) {
 			let idletime = (Date.now() / 1000) - servertimediff - item.dataset.lastseen;
-			$('#tag' + tagmac + ' .lastseen').innerHTML = "<span>last seen</span>" + displayTime(Math.floor(idletime)) + " ago";
+			$('#tag' + tagmac + ' .lastseen').innerHTML = "<span>last seen</span>" + displayTime(Math.floor(idletime)) + " ago";	
 			if ((Date.now() / 1000) - servertimediff - apConfig.maxsleep * 60 - 300 > item.dataset.nextcheckin) {
-				$('#tag' + tagmac + ' .warningicon').style.display = 'inline-block';
-				$('#tag' + tagmac).classList.remove("tagpending")
-				$('#tag' + tagmac).style.background = '#e0e0a0';
+				item.querySelector('.warningicon').style.display = 'inline-block';
+				item.classList.remove("tagpending");
+				item.classList.add('state-timeout');
 				timeoutcount++;
 			} else {
+				item.classList.remove('state-timeout');
 				if (tagDB[tagmac].pending) pendingcount++;
 			}
+			
+			const lastseenEl = item.querySelector('.lastseen');
 			if (idletime > 24 * 3600) {
-				$('#tag' + tagmac).style.opacity = '.5';
-				$('#tag' + tagmac + ' .lastseen').style.color = "red";
+				item.style.opacity = '.5';
+				lastseenEl.classList.add('error');
+			} else {
+				item.style.opacity = '1';
+				lastseenEl.classList.remove('error');
 			}
 		} else {
 			if ($('#tag' + tagmac + ' .lastseen')) {