diff --git a/aiserver.py b/aiserver.py
index 2c1e11e1..c19c2e35 100644
--- a/aiserver.py
+++ b/aiserver.py
@@ -7331,9 +7331,15 @@ def UI_2_load_softprompt(data):
 @socketio.on('load_aidg_club')
 def UI_2_load_aidg_club(data):
     print("Load aidg.club: {}".format(data))
-    importAidgRequest(data)
-    
-        
+    importAidgRequest(data) 
+
+
+#==================================================================#
+# Event triggered when Theme Changed
+#==================================================================#
+@socketio.on('theme_change')
+def UI_2_theme_change(data):
+    print("Theme Changed: {}".format(data))
     
 
 #==================================================================#
diff --git a/static/koboldai.css b/static/koboldai.css
index 92099bb5..c4cb3be2 100644
--- a/static/koboldai.css
+++ b/static/koboldai.css
@@ -6,7 +6,7 @@
 }
 @media only screen and (min-aspect-ratio: 7/5) {
 	:root {
-		--flyout_menu_width: 400px;
+		--flyout_menu_width: 402px;
 	}
 }
 
@@ -1693,4 +1693,8 @@ body.NotConnected {
 
 h2 .material-icons-outlined {
 	font-size: 32px;
-}
\ No newline at end of file
+}
+
+.flyout_menu_contents {
+  scrollbar-width: thin;
+}
diff --git a/static/koboldai.js b/static/koboldai.js
index 9a74874f..46a70ac0 100644
--- a/static/koboldai.js
+++ b/static/koboldai.js
@@ -1536,6 +1536,15 @@ function send_world_info(uid) {
 }
 
 //--------------------------------------------General UI Functions------------------------------------
+function palette_color(item) {
+	console.log(item);
+	console.log(item.id);
+	console.log(item.value);
+	var r = document.querySelector(':root');
+	r.style.setProperty("--"+item.id, item.value);
+	socket.emit("theme_change", getAllCSSVariableNames());
+}
+
 function getAllCSSVariableNames(styleSheets = document.styleSheets){
    var cssVars = [];
    var r = document.querySelector(':root');
@@ -1563,6 +1572,74 @@ function getAllCSSVariableNames(styleSheets = document.styleSheets){
    return cssVars;
 }
 
+function create_theming_elements() {
+	var cssVars = getAllCSSVariableNames();
+	palette_table = document.createElement("table");
+	advanced_table = document.createElement("table");
+	theme_area = document.getElementById("Palette");
+	theme_area.append(palette_table);
+	//theme_area.append(advanced_table);
+	for (css_item of cssVars) {
+		if (css_item[0].includes("_palette")) {
+			if (document.getElementById(css_item[0].replace("--", ""))) {
+				input = document.getElementById(css_item[0].replace("--", ""));
+				input.setAttribute("title", css_item[0].replace("--", "").replace("_palette", ""));
+				input.value = css_item[1];
+			}
+		} else {
+			tr = document.createElement("tr");
+			tr.style = "width:100%;";
+			title = document.createElement("td");
+			title.textContent = css_item[0].replace("--", "").replace("_palette", "");
+			tr.append(title);
+			select = document.createElement("select");
+			select.style = "width: 100px; color:black;";
+			var option = document.createElement("option");
+			option.value="";
+			option.text="Use Color";
+			select.append(option);
+			for (css_item2 of cssVars) {
+			   if (css_item2 != css_item) {
+					var option = document.createElement("option");
+					option.value=css_item2[0];
+					option.text=css_item2[0].replace("--", "");
+					select.append(option);
+			   }
+			}
+			select_td = document.createElement("td");
+			select_td.append(select);
+			tr.append(select_td);
+			td = document.createElement("td");
+			tr.append(td);
+			if (css_item[1].includes("#")) {
+				input = document.createElement("input");
+				input.setAttribute("type", "color");
+				input.id = css_item[0];
+				input.setAttribute("title", css_item[0].replace("--", "").replace("_palette", ""));
+				input.value = css_item[1];
+				input.onchange = function () {
+									var r = document.querySelector(':root');
+									r.style.setProperty(this.id, this.value);
+								}
+				td.append(input);
+			} else {
+			   input = document.createElement("input");
+				input.setAttribute("type", "text");
+				input.id = css_item[0];
+				input.setAttribute("title", css_item[0].replace("--", "").replace("_palette", ""));
+				input.value = css_item[1];
+				input.onchange = function () {
+									var r = document.querySelector(':root');
+									r.style.setProperty(this.id, this.value);
+								}
+				td.append(input);
+			}
+			
+			advanced_table.append(tr);
+		}
+	}
+}
+
 function select_sample(item) {
 	for (temp of document.getElementsByClassName("sample_order")) {
 		temp.classList.remove("selected");
@@ -2339,6 +2416,7 @@ function detect_key_up(e) {
 }
 
 $(document).ready(function(){
+	create_theming_elements();
 	document.onkeydown = detect_key_down;
 	document.onkeyup = detect_key_up;
 	document.getElementById("input_text").onkeydown = detect_enter_submit;
diff --git a/templates/settings flyout.html b/templates/settings flyout.html
index 1250d9d0..8300deab 100644
--- a/templates/settings flyout.html	
+++ b/templates/settings flyout.html	
@@ -224,7 +224,55 @@
 		<div onclick="toggle_setting_category(this);">
 			<h4 style="width:var(--flyout_menu_width);"><span class="material-icons-outlined cursor">expand_more</span> Theme</h4>
 		</div>
-		<div class="setting_tile_area">
+		<div class="setting_tile_area" id="Theme">
+			<div onclick="toggle_setting_category(this);">
+				<h4 style="width:var(--flyout_menu_width);"><span class="material-icons-outlined cursor">expand_more</span> Palette</h4>
+			</div>
+			<div class="setting_tile_area" id="Palette">
+				<table border=1>
+					<tr>
+						<th></th>
+						<th colspan=2>Main</th>
+						<th colspan=2>Alternative</th>
+					</tr>
+					<tr>
+						<th></th>
+						<th>Background</th>
+						<th>Text</th>
+						<th>Background</th>
+						<th>Text</th>
+					</tr>
+					<tr>
+						<td>Primary</td>
+						<td><input type=color id="primary_palette" onchange="palette_color(this)"></td>
+						<td><input type=color id="on_primary_palette" onchange="palette_color(this)"></td>
+						<td><input type=color id="primary_containter_palette" onchange="palette_color(this)"></td>
+						<td><input type=color id="on_primary_containter_palette" onchange="palette_color(this)"></td>
+					</tr>
+					<tr>
+						<td>Secondary</td>
+						<td><input type=color id="secondary_palette" onchange="palette_color(this)"></td>
+						<td><input type=color id="on_secondary_palette" onchange="palette_color(this)"></td>
+						<td><input type=color id="secondary_containter_palette" onchange="palette_color(this)"></td>
+						<td><input type=color id="on_secondary_containter_palette" onchange="palette_color(this)"></td>
+					</tr>
+					<tr>
+						<td>Tertiary</td>
+						<td><input type=color id="tertiary_palette" onchange="palette_color(this)"></td>
+						<td><input type=color id="on_tertiary_palette" onchange="palette_color(this)"></td>
+						<td><input type=color id="tertiary_containter_palette" onchange="palette_color(this)"></td>
+						<td><input type=color id="on_tertiary_containter_palette" onchange="palette_color(this)"></td>
+					</tr>
+					<tr>
+						<td>Error</td>
+						<td><input type=color id="error_palette" onchange="palette_color(this)"></td>
+						<td><input type=color id="on_error_palette" onchange="palette_color(this)"></td>
+						<td><input type=color id="error_containter_palette" onchange="palette_color(this)"></td>
+						<td><input type=color id="on_error_containter_palette" onchange="palette_color(this)"></td>
+					</tr>
+				</table>
+				
+			</div>
 			
 		</div>
 		<div onclick="toggle_setting_category(this);">