diff --git a/img/button.png b/img/button.png
new file mode 100644
index 0000000..a296adc
Binary files /dev/null and b/img/button.png differ
diff --git a/img/button.xcf b/img/button.xcf
new file mode 100644
index 0000000..3d5f7cb
Binary files /dev/null and b/img/button.xcf differ
diff --git a/img/button_long.png b/img/button_long.png
new file mode 100644
index 0000000..a03a057
Binary files /dev/null and b/img/button_long.png differ
diff --git a/img/button_long.xcf b/img/button_long.xcf
new file mode 100644
index 0000000..04b1db9
Binary files /dev/null and b/img/button_long.xcf differ
diff --git a/index.php b/index.php
index 34af5e9..539ecb5 100644
--- a/index.php
+++ b/index.php
@@ -61,13 +61,24 @@ if (!isset($_SESSION['modname']) || (!file_exists(APP_DB)) || (!file_exists($_SE
 } else {
 
 	PDO_Connect("sqlite:" . APP_DB);
-	$sql = "SELECT * FROM D2Modder ORDER BY lastused LIMIT 1";
+	$sql = "SELECT * FROM D2Modder ORDER BY lastused LIMIT 1";	
 
 	$lastUsedMod = PDO_FetchRow($sql);
 
 	$_SESSION['modname'] = $lastUsedMod['modname'];
 	$_SESSION['path'] = $lastUsedMod['path'];	
 	
+	$sql = "SELECT theme FROM `D2Modder` WHERE `modname`='{$_SESSION['modname']}'";
+	$res = PDO_FetchAll($sql);
+	
+	if($res[0]['theme'] == 1) {
+		$css = 'dark.css';
+	} else {
+		$css = '';
+	}
+	
+	
+	
 	define('FILTER_PROPERTIES_FILE', 'filterProperties.txt');
 	define('DB_FILE', $_SESSION['modname'] . ".db");
 	define('TXT_PATH', $_SESSION['path']);
diff --git a/res/app.js b/res/app.js
index 74419c0..e8fae16 100644
--- a/res/app.js
+++ b/res/app.js
@@ -169,7 +169,20 @@ $(document).ready(function () {
 	searchbox.addEventListener('input', search);
 
 
-
+	$('input[name="theme"]').change(function(){
+		modname = $('input[name="modname"]').val();
+		$.get("/res/css.php?theme="+this.value+"&modname="+modname, function(data){
+			location.reload();
+		});
+		
+		
+//		$('body').toggleClass("body-dark");
+//		$('.container-top').toggleClass("container-top-dark");
+//		$('input').toggleClass("input-dark");
+//		$('select').toggleClass("select-dark");
+//		$('option').toggleClass("option-dark");
+//		$('.col-2,.col-3,.col-4').attr({"style":""});
+	});
 
 
 });
\ No newline at end of file
diff --git a/res/css.php b/res/css.php
new file mode 100644
index 0000000..6e1ab84
--- /dev/null
+++ b/res/css.php
@@ -0,0 +1,56 @@
+<?php
+
+/*
+ 
+ Copyright (C) 2021 Hash Borgir
+ 
+ This file is part of D2Modder 
+ 
+ Redistribution and use in source and binary forms, with
+ or without modification, are permitted provided that the
+ following conditions are met:
+ 
+ * Redistributions of source code must retain the above
+ copyright notice, this list of conditions and the
+ following disclaimer.
+ 
+ * Redistributions in binary form must reproduce the above
+ copyright notice, this list of conditions and the
+ following disclaimer in the documentation and/or other
+ materials provided with the distribution.
+ 
+ * This software must not be used for commercial purposes 
+ * without my consent. Any sales or commercial use are prohibited
+ * without my express knowledge and consent.
+ 
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY! 
+ 
+ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND
+ CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES,
+ INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+ MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR
+ CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT
+ NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
+ HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE
+ OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+ SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ 
+ */
+
+
+// 0 = light
+// 1 = dark
+
+include "../_pdo.php";
+
+$theme = $_GET['theme'];
+$modname = $_GET['modname'];
+
+PDO_Connect("sqlite:../D2Modder.db");
+$sql = "UPDATE D2Modder SET `theme`=$theme WHERE `modname`='$modname'";
+PDO_Execute($sql);
\ No newline at end of file
diff --git a/res/dark.css b/res/dark.css
new file mode 100644
index 0000000..7485f7e
--- /dev/null
+++ b/res/dark.css
@@ -0,0 +1,58 @@
+body {
+	background-color: #222 !important;
+	color: #eee;
+}
+.container-top {
+	background: #222;
+	color: #eee;
+	border: none;
+}
+input, select{
+	background: url(/img/button.png) !important;
+	background-size: contain;
+	color: #eee;
+}
+option {
+	background: #333;
+	color: #eee;
+}
+.row {
+	background: none;
+	color: #eee;
+}
+.col-2,.col-3,.col-4 {
+	background: none !important;
+}
+
+.sortby {
+	background: #434;
+	padding: 20px;
+}
+.viewonly {
+	background: #656;
+}
+#search{
+	background: url(/img/button_long.png) !important;
+	background-size: cover;
+	color: #eee;
+	height: 36px;
+	text-align: center;
+}
+
+.props input {
+	margin: 15px 0;
+}
+
+.props {
+	background: #222;
+	color: white;
+	font-weight: bold;
+}
+.uniqueitems-select {
+	background: url(/img/button_long.png) !important;
+	background-size: cover;
+	color: #eee;
+	height: 36px;
+	width: 420px;
+	text-align: center;
+}
\ No newline at end of file
diff --git a/res/style.css b/res/style.css
index 7695d7d..fa34ef2 100644
--- a/res/style.css
+++ b/res/style.css
@@ -38,7 +38,7 @@
 	OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 	SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
- */
+*/
 @font-face {
     font-family: 'Exocet';
     src: url('/fonts/ExocetHeavy.eot');
@@ -105,9 +105,9 @@ option {
 }
 
 body {
-  background-size: cover;
-  background-attachment: fixed;
-  font-family:lato;
+	background-size: cover;
+	background-attachment: fixed;
+	font-family:lato;
 }
 
 h1,h2,h3,h4,h5,h6, div > p {
@@ -135,13 +135,9 @@ h1,h2,h3,h4,h5,h6, div > p {
 }
 
 select {
-  font-size: 18px;
-  border: 1px solid #CCC;
-  height: 34px;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: url(https://stackoverflow.com/favicon.ico) 96% / 15% no-repeat #EEE;
+	font-size: 18px;
+	border: 1px solid #CCC;
+	height: 34px;
 }
 
 
@@ -161,6 +157,10 @@ select::-ms-expand {
 }
 
 option {
-   -webkit-appearance: none;
-   -moz-appearance: none;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+}
+
+.props input {
+	margin: 15px 0;
 }
\ No newline at end of file
diff --git a/src/D2Config.php b/src/D2Config.php
index b01cf30..2870080 100644
--- a/src/D2Config.php
+++ b/src/D2Config.php
@@ -61,7 +61,8 @@ if (!empty($_POST)) {
 		$sql = "CREATE TABLE IF NOT EXISTS D2Modder (
 					modname VARCHAR(255),
 					path VARCHAR(255),
-					lastused INT
+					lastused INT,
+					theme INT
 			)";
 		PDO_Execute($sql);
 		
@@ -90,7 +91,8 @@ ERROR: INVALID PATH</h1></center>';
 		$sql = "CREATE TABLE IF NOT EXISTS D2Modder (
 					modname VARCHAR(255),
 					path VARCHAR(255),
-					lastused INT
+					lastused INT,
+					theme INT
 			)";
 		PDO_Execute($sql);
 
diff --git a/src/footer.php b/src/footer.php
index bae106d..8b210ef 100644
--- a/src/footer.php
+++ b/src/footer.php
@@ -1,11 +1,24 @@
 <div class="container">
-<div class=" row" style="background: none;">
-	<div class="offset-9 col-3" style="background: none;">
+	<div class=" row" style="background: none;">
+		<div class="offset-9 col-3" style="background: none;">
 			<a style="font-weight: bold;" class="btn btn-info" href="/src/D2Config.php">Setup New Mod</a>
 			<a style="font-weight: bold;" class="btn btn-warning" href="/switchMods.php">Switch Mods</a>
+			<br><hr>
+			<div class="custom-control custom-radio custom-control-inline">
+				<input name="theme" id="theme_0" type="radio" class="custom-control-input" value="0"> 
+				<label for="theme_0" class="custom-control-label">Light</label>
+			</div>
+			<div class="custom-control custom-radio custom-control-inline">
+				<input name="theme" id="theme_1" type="radio" class="custom-control-input" value="1"> 
+				<label for="theme_1" class="custom-control-label">Dark</label>
+			</div>			
+			<input type="hidden" name="modname" value="<?php echo $_SESSION['modname'] ?>">
+
+		</div>
+
+		<span id="themeHelpBlock" class="form-text text-muted">Theme</span>
 	</div>
 </div>
-</div>
 <footer>
 	<h1 id="credits-">Credits:</h1>
 	<p><a target="_blank" href="https://d2mods.info">Thanks Phrozen Keep! My favorite mod community since 2002!</a></p>
diff --git a/src/head.php b/src/head.php
index b5e94c0..e6af88c 100644
--- a/src/head.php
+++ b/src/head.php
@@ -53,11 +53,11 @@
 	<link rel="preconnect" href="https://fonts.gstatic.com">
 	<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet">
 	<link rel="stylesheet" href="/res/style.css">
+	<link rel="stylesheet" href="/res/<?php echo $css ?>">
 	<style>
 
 	</style>
-    <script
-	src="/res/jquery-3.6.0.min.js"></script>
+    <script src="/res/jquery-3.6.0.min.js"></script>
     <script src="/res/bootstrap.bundle.min.js"></script>
 	<script src="/res/app.js"></script>
 
diff --git a/src/tabs/UniqueItems.php b/src/tabs/UniqueItems.php
index ebf6eae..2e5bc7b 100644
--- a/src/tabs/UniqueItems.php
+++ b/src/tabs/UniqueItems.php
@@ -7,7 +7,7 @@
 	</div>
 </div>
 <div class="row" style="">
-	<div class="col-4">
+	<div class="col-5">
 		<select name="uniqueitems" class="custom-select uniqueitems-select">
 			<option value=""></option>
 			<?php foreach ($uniqueitems as $u) { ?>
@@ -15,8 +15,8 @@
 			<?php } ?>
 		</select>	
 	</div>
-	<div class="col-8">
-		<span style="font-family:Exocet;">Sort By: </span>
+	<div class="col-7 sortby">
+		<p style="font-family:Exocet;">Sort By: </p>
 		<div class="custom-control custom-radio custom-control-inline">
 			<input name="sort" id="sort_0" type="radio" class="custom-control-input" value="lvl"> 
 			<label for="sort_0" class="custom-control-label">Level</label>
@@ -33,10 +33,8 @@
 			<input name="sort" id="sort_3" type="radio" class="custom-control-input" value="code"> 
 			<label for="sort_3" class="custom-control-label">Item Code</label>
 		</div>
-	</div>		
-
-	<div class="offset-4 col-8">
-		<span style="font-family:Exocet;">View Only: </span>
+		<hr>
+		<p style="font-family:Exocet;">View Only: </p>
 		<div class="custom-control custom-radio custom-control-inline">
 			<input name="view" id="view_0" type="radio" class="custom-control-input" value="rin"> 
 			<label for="view_0" class="custom-control-label">Rings</label>
@@ -79,15 +77,15 @@
 		<div class="col-2" style="background: #eed;">
 			<p>Version:</p>
 			<div class="custom-control custom-radio custom-control-inline">
-				<input name="version"  type="radio" aria-describedby="versionHelpBlock" required="required" class="custom-control-input" value="0">
+				<input name="version" id="version_0" type="radio" aria-describedby="versionHelpBlock" required="required" class="custom-control-input" value="0">
 				<label for="version_0" class="custom-control-label">0</label>
 			</div>
 			<div class="custom-control custom-radio custom-control-inline">
-				<input name="version"  type="radio" aria-describedby="versionHelpBlock" required="required" class="custom-control-input" value="1">
+				<input name="version" id="version_1" type="radio" aria-describedby="versionHelpBlock" required="required" class="custom-control-input" value="1">
 				<label for="version_1" class="custom-control-label">1</label>
 			</div>
 			<div class="custom-control custom-radio custom-control-inline">
-				<input name="version"  type="radio" aria-describedby="versionHelpBlock" required="required" class="custom-control-input" value="100" checked>
+				<input name="version" id="version_2" type="radio" aria-describedby="versionHelpBlock" required="required" class="custom-control-input" value="100" checked>
 				<label for="version_2" class="custom-control-label">100</label>
 			</div><br><span class="help"><i class="fa fa-question-circle" aria-hidden="true"></i>
 			</span>
@@ -98,11 +96,11 @@
 		<div class="col-2" style="background: #def;">
 			<p>Enabled:</p>
 			<div class="custom-control custom-radio custom-control-inline">
-				<input name="enabled"  type="radio" class="custom-control-input" value="0" aria-describedby="enabledHelpBlock" required="required">
+				<input name="enabled" id="enabled_0"  type="radio" class="custom-control-input" value="0" aria-describedby="enabledHelpBlock" required="required">
 				<label for="enabled_0" class="custom-control-label">0</label>
 			</div>
 			<div class="custom-control custom-radio custom-control-inline">
-				<input name="enabled"  type="radio" class="custom-control-input" value="1" aria-describedby="enabledHelpBlock" required="required" checked>
+				<input name="enabled" id="enabled_1"  type="radio" class="custom-control-input" value="1" aria-describedby="enabledHelpBlock" required="required" checked>
 				<label for="enabled_1" class="custom-control-label">1</label>
 			</div><br><span class="help"><i class="fa fa-question-circle" aria-hidden="true"></i>
 			</span>
@@ -114,11 +112,11 @@
 
 			<p>Ladder:</p>
 			<div class="custom-control custom-radio custom-control-inline">
-				<input name="ladder"  type="radio" class="custom-control-input" value="0" aria-describedby="ladderHelpBlock" required="required" checked>
+				<input name="ladder" id="ladder_0" type="radio" class="custom-control-input" value="0" aria-describedby="ladderHelpBlock" required="required" checked>
 				<label for="ladder_0" class="custom-control-label">0</label>
 			</div>
 			<div class="custom-control custom-radio custom-control-inline">
-				<input name="ladder"  type="radio" class="custom-control-input" value="1" aria-describedby="ladderHelpBlock" required="required">
+				<input name="ladder" id="ladder_1" type="radio" class="custom-control-input" value="1" aria-describedby="ladderHelpBlock" required="required">
 				<label for="ladder_1" class="custom-control-label">1</label>
 			</div><br><span class="help"><i class="fa fa-question-circle" aria-hidden="true"></i>
 			</span>
@@ -228,7 +226,7 @@
 		</div>
 
 
-		<div class="col-3" style="background: #def;">
+		<div class="col-2" style="background: #def;">
 			<p>CostAdd</p>
 			<input  value="" name="costadd"  type="text" aria-describedby="costaddHelpBlock" required="required" class="form-control"><span class="help"><i class="fa fa-question-circle" aria-hidden="true"></i>
 			</span>
@@ -236,14 +234,13 @@
 		</div>
 
 
-		<div class="col-3" style="background: #fde;">
+		<div class="col-2" style="background: #fde;">
 			<p>CharTransform</p>
 			<input  name="chrtransform"  type="text" aria-describedby="chrtransformHelpBlock" class="form-control"><span class="help"><i class="fa fa-question-circle" aria-hidden="true"></i>
 			</span>
 			<span  class="form-text">ChrTransform: palette shift to apply to the the DCC component-file and the DC6 flippy-file (whenever or not the color shift will apply is determined by Weapons.txt, Armor.txt or Misc.txt). This is an ID pointer from Colors.txt.</span>
 		</div>
-	</div>
-	<div class="form-group row">
+
 
 		<div class="col-2">
 			<p>InvTransform</p>
@@ -290,7 +287,7 @@
 			</span><span  class="form-text">UseSound: overrides the usesound (the sound played when the item is consumed by the player) specified in Weapons.txt, Armor.txt or Misc.txt for the base item. This field contains an ID pointer from Sounds.txt.</span>
 		</div>
 	</div>
-	<div class="form-group row">
+	<div class="form-group row props">
 		<?php
 		$html = '';
 
diff --git a/src/tabs/optionSubmit.php b/src/tabs/optionSubmit.php
index 92712a8..47a4cdf 100644
--- a/src/tabs/optionSubmit.php
+++ b/src/tabs/optionSubmit.php
@@ -2,6 +2,5 @@
 	<div class="offset-10 col-2" style="background: none;">
 		<button style="" name="submit" type="submit" class="btn btn-success">SAVE</button>
 		<button name="submit" type="reset" class="btn btn-danger">CLEAR</button>
-	</div>
-
+    </div>
 </div>
\ No newline at end of file