diff --git a/css/games.css b/css/games.css
index 15aba73..76d59dd 100755
--- a/css/games.css
+++ b/css/games.css
@@ -27,7 +27,7 @@ game img {
 #holder h1 {
     font-size: 14px;
     margin: 15px;
-    width: 100%;
+    width: 80%;
     text-align: right;
     height: 70%;
 }
@@ -39,8 +39,8 @@ game img {
     align-items: flex-end;
 }
 #star {
+    margin-top: 0px;
     width: 10%;
-    justify-self: right;
     margin-left: auto;
     margin-right: 15px;
     /* transition-duration: 0.25s; */
diff --git a/css/settings.css b/css/settings.css
index 3268df8..0aa2ee1 100644
--- a/css/settings.css
+++ b/css/settings.css
@@ -1,6 +1,6 @@
 section {
     width: 30%;
-    height: 400px;
+    /* height: 400px; */
     height: auto;
     padding: 8px;
     margin: 16px;
@@ -22,6 +22,11 @@ sections {
     justify-content: center;
     align-items: center;
 }
+
+#colorPicker {
+  margin: 6px;
+}
+
 @-moz-document url-prefix() {
   section {
     backdrop-filter: blur(0);
diff --git a/css/sidebar.css b/css/sidebar.css
index 02a20bd..4952f20 100755
--- a/css/sidebar.css
+++ b/css/sidebar.css
@@ -64,7 +64,7 @@ iframe {
     height: 50px;
     left: 0;
     right: 0;
-    width: 30%;
+    width: 40%;
     margin-left: auto; 
     margin-right: auto;
     display: flex;
@@ -76,6 +76,11 @@ iframe {
     cursor: pointer;
     color: black;
 }
+#bottom-menu {
+    width: fit-content;
+    padding-left: 16px;
+    padding-right: 16px;
+}
 #open-bottom-menu {
     bottom: 10px;
     height: 15px;
diff --git a/index.html b/index.html
index b1228d2..a0b28b2 100755
--- a/index.html
+++ b/index.html
@@ -57,7 +57,62 @@
 		<!-- <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3415518411898563" crossorigin="anonymous"></script> -->
 		<script>
 			let currentPanic = {key: "", url: ""};
+			const weatherCodeToEmoji = {
+			    0: '☀️',
+						
+			    1: '🌤️',
+			    2: '⛅',
+			    3: '☁️',
+						
+			    45: '🌫️',
+			    48: '🌫️',
+						
+			    51: '🌦️',
+			    53: '🌧️',
+			    55: '🌧️',
+			    56: '🌧️',
+			    57: '🌧️',
+						
+			    61: '🌧️',
+			    63: '🌧️',
+			    65: '🌧️',
+			    66: '🥶🌧️',
+			    67: '🥶🌧️',
+						
+			    71: '❄️',
+			    73: '❄️',
+			    75: '❄️',
+			    77: '🌨️',
+						
+			    80: '🌧️',
+			    81: '🌧️',
+			    82: '🌧️',
+						
+			    85: '🌨️',
+			    86: '🌨️',
+						
+			    95: '⛈️',
+			    96: '⛈️',
+			    99: '⛈️',
+			};
+
+			async function getWeather() {
+				// we do not store this data :)
+            	let locationData = await fetch("https://speed.cloudflare.com/meta")
+            	.then(data => data.json());
+
+            	let weatherData = await fetch(`https://api.open-meteo.com/v1/forecast?latitude=${locationData.latitude}&longitude=${locationData.longitude}&current=temperature_2m,weather_code&temperature_unit=fahrenheit`)
+            	.then(data => data.json());
+
+				document.getElementById("weather").innerText = `${Math.round(weatherData["current"]["temperature_2m"])}°C ${weatherCodeToEmoji[weatherData["current"]["weather_code"]]}`
+			}
+			function updateTime() {
+				document.getElementById("time").innerText = (new Date()).toLocaleTimeString();
+			}
 			document.addEventListener("DOMContentLoaded", async ()=>{
+				getWeather();
+				setInterval(getWeather, 1000 * 60 * 30);
+				setInterval(updateTime, 1000 / 2);
 				let hash = location.hash.substring(1);
 				if(hash) {
 					// location.hash = "";
@@ -191,7 +246,11 @@
         </sidebar>
 		<div id="open-bottom-menu"></div>
 		<div id="bottom-menu">
-			<div class="bottom-item"><p id="online">yap yap yap</p></div>
+			<div class="bottom-item"><p id="online">currently online: --</p></div>
+			<div class="bottom-item"><p>|</p></div>
+			<div class="bottom-item"><p id="weather">--° 🌩️</p></div>
+			<div class="bottom-item"><p>|</p></div>
+			<div class="bottom-item"><p id="time">7:41:21 pm</p></div>
 		</div>
 	</body>
 </html>
diff --git a/js/all.min.js b/js/all.min.js
index e69de29..42314ee 100755
--- a/js/all.min.js
+++ b/js/all.min.js
@@ -0,0 +1,15 @@
+// this is a test
+function loadAnalytics() {};
+
+loadAnalytics.unami = function() {
+    // <script defer src="https://cloud.umami.is/script.js" data-website-id="cdb79ddd-06a6-478f-b726-be39b502d6a5"></script>
+    let script = document.createElement("script");
+    script.setAttribute("defer", "");
+    script.setAttribute("src", "https://cloud.umami.is/script.js");
+    script.setAttribute("data-website-id", "cdb79ddd-06a6-478f-b726-be39b502d6a5");
+    document.head.appendChild(script);
+};
+
+document.addEventListener("DOMContentLoaded", () => {
+    loadAnalytics.unami();
+})
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index fba3f0c..dc2cdf6 100755
--- a/js/main.js
+++ b/js/main.js
@@ -35,8 +35,22 @@ function cursor() {
 }
 function themes() {
 	document.body.setAttribute("theme", localStorage.getItem("selenite.theme") || "")
+	if(document.body.getAttribute("theme") == "custom") {
+		setTheme(JSON.parse(localStorage.getItem("selenite.customTheme")))
+	}
+}
+function setTheme(arg) {
+	let theme = arg;
+	document.body.setAttribute("style", `
+		--text-color: ${theme["text-color"]};
+    	--bg-1: ${theme["bg-1"]};
+    	--bg-2: ${theme["bg-2"]};
+    	--color-1: ${theme["color-1"]};
+    	--color-2: ${theme["color-2"]};
+    	--color-3: ${theme["color-3"]};
+    	--color-4: ${theme["color-4"]};	
+	`)
 }
-
 document.addEventListener("DOMContentLoaded", ()=>{
 	if(!(localStorage.getItem("selenite.fast-mode") == 'true')) {
 		setBackground();
@@ -55,7 +69,6 @@ document.addEventListener("scroll", ()=>{
 
 
 
-
 // var interval;
 // document.addEventListener("DOMContentLoaded", function () {
 // 	if (localStorage.getItem("theme")) {
diff --git a/loader.html b/loader.html
index ee5ddaa..653695f 100755
--- a/loader.html
+++ b/loader.html
@@ -63,7 +63,7 @@
 		<link rel="icon" href="/favicon.ico" />
 	</head>
 	<body>
-		<iframe id="gameFrame" sandbox="allow-downloads allow-forms allow-modals allow-pointer-lock allow-scripts allow-same-origin"></iframe>
+		<iframe id="gameFrame" sandbox="allow-downloads allow-forms allow-modals allow-pointer-lock allow-scripts allow-same-origin" allow="cross-origin-isolated"></iframe>
 		<div id="infobox">
 			<img id="gameImage" src="favicon.png" />
 			<h2 id="gameName">Selenite</h2>
diff --git a/settings.html b/settings.html
index d916aac..05ab0d1 100755
--- a/settings.html
+++ b/settings.html
@@ -5,6 +5,8 @@
     https://coolors.co/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff -->
 
 		<!-- initialize externals -->
+    <!-- chroma.js -->
+    <script src="https://cdn.jsdelivr.net/npm/chroma-js@latest/chroma.min.js"></script>
 		<meta property="og:title" content="Selenite" />
 		<meta property="description" content="Selenite is the best unblocked games site. With over 400 games and an account system, no other websites come close to Selenite." />
 		<meta name="keywords" content="proxy, web proxy, unblock websites, unblock chromebook, free web proxy, proxy list, proxy sites, un block chromebook, online proxy, proxy server, proxysite, proxy youtube, bypass securly, bypass iboss, bypass lightspeed filter, chromebooks, unblock youtube, youtube proxy, unblocked youtube, youtube unblocked, unblock games, selenite, unblocked games, free games">
@@ -47,8 +49,37 @@
 		<link rel="icon" href="/favicon.ico" />
 		<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3415518411898563" crossorigin="anonymous"></script>
     <script>
+      let cloaks = {
+        "powerschool": [
+          "Grades and Attendance", "https://www.powerschool.com/"
+        ],
+        "canvas": [
+          "Dashboard", "https://usc.instructure.com/"
+        ],
+        "google": [
+          "Google", "https://google.com/"
+        ],
+        "drive": [
+          "My Drive - Google Drive", "https://drive.google.com"
+        ],
+        "classroom": [
+          "Home", "https://google-classroom.en.softonic.com"
+        ],
+        "ixl": [
+          "IXL | Dashboard", "https://www.ixl.com/favicon.ico"
+        ],
+        "khan": [
+          "Dashboard | Khan Academy", "https://www.khanacademy.org/favicon.ico"
+        ]
+      }
       document.addEventListener("DOMContentLoaded", () => {
         document.querySelector(`option[value="${localStorage.getItem("selenite.theme") || ""}"]`).setAttribute("selected", "");
+        if(document.getElementById("themes").value == "custom") {
+          document.getElementById("colorPicker").style.display = "block";
+          document.getElementById("colorPicker").value = localStorage.getItem("selenite.customThemeMainColor");
+        } else {
+          document.getElementById("colorPicker").style.display = "none";
+        }
         if(localStorage.getItem("selenite.fast-mode") == 'true') {
           document.getElementById("fastMode").setAttribute("checked", "")
         };
@@ -58,6 +89,20 @@
         document.getElementById("themes").addEventListener("input", (e)=>{
           localStorage.setItem("selenite.theme", e.target.value);
           document.body.setAttribute("theme", e.target.value);
+          if(e.target.value == "custom") {
+            document.getElementById("colorPicker").style.display = "block";
+            document.getElementById("colorPicker").value = localStorage.getItem("selenite.customThemeMainColor");
+          } else {
+            document.getElementById("colorPicker").style.display = "none";
+            document.body.removeAttribute("style");
+          }
+        });
+        document.getElementById("colorPicker").addEventListener("input", (e) => {
+          let generatedTheme = generatePallete(e.target.value);
+          localStorage.setItem("selenite.customTheme", JSON.stringify(generatedTheme));
+          localStorage.setItem("selenite.customThemeMainColor", e.target.value);
+          setTheme(generatedTheme);
+
         })
         document.getElementById("fastMode").addEventListener("click", (e) => {
           localStorage.setItem("selenite.fast-mode", !(e.target.checked == false));
@@ -68,10 +113,17 @@
           location.reload();
         });
         document.getElementById("submitCloak").addEventListener("click", (e) => {
-          localStorage.setItem("selenite.tab-cloak", JSON.stringify({
-            "name": document.getElementById("cloakName").value || "",
-            "icon": document.getElementById("cloakIcon").value || ""
-          }));
+          if(document.getElementById("cloaks").value) {
+            localStorage.setItem("selenite.tab-cloak", JSON.stringify({
+              "name": cloaks[document.getElementById("cloaks").value][0],
+              "icon": cloaks[document.getElementById("cloaks").value][1]
+            }));
+          } else {
+            localStorage.setItem("selenite.tab-cloak", JSON.stringify({
+              "name": document.getElementById("cloakName").value || "",
+              "icon": document.getElementById("cloakIcon").value || ""
+            }));
+          }
         });
         document.getElementById("submitPanic").addEventListener("click", (e) => {
           localStorage.setItem("selenite.panic-mode", JSON.stringify({
@@ -79,6 +131,18 @@
             "url": document.getElementById("panicURL").value || ""
           }));
         })
+        function generatePallete(color) {
+          let theme = {};
+          let chromaColor = chroma(color);
+          theme["color-1"] = chromaColor.hex();
+          theme["color-2"] = chromaColor.darken(1).hex();
+          theme["color-3"] = chromaColor.darken(2).hex();
+          theme["color-4"] = chromaColor.darken(3).hex();
+          theme["bg-1"] = chromaColor.darken(1.5).hex();
+          theme["bg-2"] = chromaColor.darken(2.5).hex();
+          theme["text-color"] = "#fff"
+          return theme;
+        }
       });
     </script>
 	</head>
@@ -93,7 +157,9 @@
             <option value="grass">grass</option>
             <option value="evil">evil</option>
             <option value="sky">sky</option>
+            <option value="custom">custom</option>
           </select>
+          <input type="color" id="colorPicker" style="display: none">
         </section>
         <section>
           <h2>toggles</h2>
@@ -106,6 +172,17 @@
           <input type="text" id="cloakName">
           <p>website icon</p>
           <input type="text" id="cloakIcon">
+          <select id="cloaks">
+            <option value="">or select a preset</option>
+            <option value="powerschool">powerschool</option>
+            <option value="canvas">canvas</option>
+            <option value="google">google</option>
+            <option value="drive">google drive</option>
+            <option value="classroom">google classroom</option>
+            <option value="ixl">ixl</option>
+            <option value="khan">khan academy</option>
+          </select>
+          
           <button id="submitCloak">set tab cloak</button>
         </section>
         <section>