diff --git a/about.html b/about.html
index 1b406c04..2c93e81a 100644
--- a/about.html
+++ b/about.html
@@ -14,6 +14,7 @@
     <script src="/js/all.js"></script>
     <script src="/js/main.js"></script>
     <link rel="stylesheet" href="/style.css" />
+<link rel="stylesheet" href="/themes.css" />
 
     <!-- seo + other things -->
     <title>Settings | Selenite</title>
diff --git a/bookmarklets.html b/bookmarklets.html
index 45f07bc4..286870fa 100644
--- a/bookmarklets.html
+++ b/bookmarklets.html
@@ -15,6 +15,7 @@
     <script src="/js/main.js"></script>
     <script src="/js/randomquote.js"></script>
     <link rel="stylesheet" href="/style.css" />
+<link rel="stylesheet" href="/themes.css" />
 
     <!-- seo + other things -->
     <title>Bookmarklets | Selenite</title>
diff --git a/index.html b/index.html
index 609e8a46..39df8932 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,7 @@
     <script src="/js/main.js"></script>
     <script src="/js/randomquote.js"></script>
     <link rel="stylesheet" href="/style.css" />
+<link rel="stylesheet" href="/themes.css" />
 
     <!-- seo + other things -->
     <title>Selenite</title>
diff --git a/js/main.js b/js/main.js
index 1a29e88d..f4abaf71 100644
--- a/js/main.js
+++ b/js/main.js
@@ -20,6 +20,11 @@ function check() {
 }
 
 window.onload = function () {
+  if (localStorage.getItem("theme")) {
+    document.body.setAttribute("theme", localStorage.getItem("theme"))
+  } else {
+    document.body.setAttribute("theme", "main")
+  }
   checkAlert();
   interval = setInterval(check, 50);
 };
@@ -57,7 +62,7 @@ window.addEventListener(
 function checkAlert() {
   if (!Cookies.get("betaalert")) {
     alert(
-      "PLEASE READ.\nThank you for beta testing the new ui! Send feedback at the feedback link in the header. Any issues? Suggestions? Don't use the suggestions form. Please. Just use the Feedback form. It's made specifically for the beta. DM '@skysthelimit.dev' on discord if you need to say something immediately. Also DM me on discord if you beta tested, might give something a little special, like a private site link?\nThank you for supporting Selenite. Any and all feedback is greatly appreciated."
+      "PLEASE READ.\nYour data from the main page will NOT transfer unless you use the Download and Upload Save feature.\nThank you for beta testing the new ui! Send feedback at the feedback link in the header. Don't use the suggestions form. DM '@skysthelimit.dev' on discord if you need to say something immediately. Also DM me on discord if you beta tested, might give something a little special to y'all.\nThank you for supporting Selenite. Any and all feedback is greatly appreciated."
       );
     Cookies.set("betaalert", true, { expires: 1 });
   }
@@ -74,4 +79,9 @@ function setPanicMode() {
 function copyToClipboard(text) {
   navigator.clipboard.writeText(text);
   alert("Copied text!");
-} 
\ No newline at end of file
+}
+
+function setTheme(theme) {
+  localStorage.setItem('theme', theme);
+  document.body.setAttribute("theme", theme);
+}
\ No newline at end of file
diff --git a/projects.html b/projects.html
index a9504d53..5e5173b4 100644
--- a/projects.html
+++ b/projects.html
@@ -16,6 +16,7 @@
     <script src="/js/main.js"></script>
     <script src="/js/cookie.js"></script>
     <link rel="stylesheet" href="/style.css" />
+<link rel="stylesheet" href="/themes.css" />
 
     <!-- seo + other things -->
     <title>Projects | Selenite</title>
diff --git a/settings.html b/settings.html
index 88fea9bb..e4e7a699 100644
--- a/settings.html
+++ b/settings.html
@@ -15,6 +15,7 @@
     <script src="/js/main.js"></script>
     <script src="/js/randomquote.js"></script>
     <link rel="stylesheet" href="/style.css" />
+<link rel="stylesheet" href="/themes.css" />
 
     <!-- seo + other things -->
     <title>Settings | Selenite</title>
@@ -63,9 +64,10 @@
       <button onclick="javascript:clearCloak();">Clear your current tab cloak</button>
       <br />
       <h3>Themes</h3>
-      <button onclick="setTheme('selenite')" style="background-color: #747474; color: #dadada; border: 2px solid #979797">Selenite</button>
-      <button onclick="setTheme('lightmode')" style="background-color: #aaaaaa; color: #dddddd; border: 2px solid #999999">Selenite - Blinding Edition</button>
+      <button onclick="setTheme('main')" style="background-color: #3c096c; color: #fff; border: 2px solid #5a189a">Selenite</button>
+      <button onclick="setTheme('light')" style="background-color: #aaaaaa; color: #dddddd; border: 2px solid #999999">Selenite - Blinding Edition</button>
       <button onclick="setTheme('egamepass')" style="background-color: #596eb1; color: #95baf1; border: 2px solid #5586e0">e-gamepass</button>
+      <button onclick="setTheme('cools1te')" style="background-color: #596eb1; color: #95baf1; border: 2px solid #5586e0">cools1te</button>
       <br />
       <form action="javascript:setPanicMode();">
         <h3 for="panic">Website URL</h3>
diff --git a/style.css b/style.css
index 0eeca35c..7b524b8e 100644
--- a/style.css
+++ b/style.css
@@ -7,6 +7,7 @@
     opacity: 100;
   }
 }
+
 * {
   outline: none;
   border: none;
@@ -19,13 +20,13 @@ body {
   font-family: "Baloo Da 2", cursive;
   margin: 0;
   padding: 0;
-  background-color: #10002b;
-  color: #fff;
+  background-color: var(--bg);
+  color: var(--textcolor);
 }
 header,
 footer {
-  background-color: #240046;
-  color: #fff;
+  background-color: var(--uibg);
+  color: var(--textcolor);
   display: flex;
   padding: 0.7rem;
   width: 100%;
@@ -35,7 +36,7 @@ footer {
 header {
   top: 0;
   position: fixed;
-  box-shadow: 0 5px 10px #240046;
+  box-shadow: 0 5px 10px var(--uibg);
 }
 footer.noscroll {
   position: fixed;
@@ -43,7 +44,7 @@ footer.noscroll {
 }
 footer {
   bottom: 0;
-  box-shadow: 0 -5px 10px #240046;
+  box-shadow: 0 -5px 10px var(--uibg);
 }
 footer a,
 footer a:visited,
@@ -51,7 +52,7 @@ header a,
 header a:visited {
   text-align: center;
   font-weight: 700;
-  color: #fff;
+  color: var(--textcolor);
   text-decoration: none;
   margin-right: 2rem;
   margin-left: 1rem;
@@ -60,7 +61,7 @@ header a:visited {
 
 footer a:hover,
 header a:hover {
-  text-shadow: 2px 2px 6px white;
+  text-shadow: 2px 2px 6px var(--textcolor);
 }
 main {
   animation: 1.25s ease-in-out 0s 1 loadInAnimation;
@@ -105,18 +106,18 @@ h3 {
 }
 p, a {
   font-size: 16px;
-  color: white;
+  color: var(--textcolor);
 }
 
 button, input#websubmit.submit, input[type=submit]#panic {
   cursor: pointer;
-  background-color: #5a189a;
-  border-color: #3c096c;
+  background-color: var(--inputbg);
+  border-color: var(--inputborder);
   border-width: 5px;
   border-radius: 10px;
   border-style: solid;
   padding: 10px;
-  color: white;
+  color: var(--textcolor);
   margin-left: 20px;
   margin-right: 20px;
   transition-duration: 0.5s;
@@ -124,8 +125,7 @@ button, input#websubmit.submit, input[type=submit]#panic {
 }
 
 button:hover, input#websubmit.submit:hover, input[type=submit]#panic:hover {
-  border-color: #240046;
-  background-color: #3c096c;
+  filter: brightness(80%);
   transform: scale(1.07);
 }
 
@@ -156,16 +156,16 @@ img {
   width: 15%;
   border-radius: 20px;
   display: inline-block;
-  background-color: #240046;
+  background-color: var(--uibg);
   margin: 15px;
   cursor: pointer;
-  box-shadow: 0px 0px 5px 5px #240046;
+  box-shadow: 0px 0px 5px 5px var(--uibg);
 }
 
 .game:hover {
   transform: scale(1.1);
-  background-color: #2f005a;
-  box-shadow: 0px 0px 5px 5px #2f005a;
+  filter: brightness(85%);
+  box-shadow: 0px 0px 5px 5px var(--uibg);
 }
 
 .game h1 {
@@ -207,8 +207,8 @@ a {
 
 input[type="text"] {
   width: 50%;
-  background-color: #3c096c;
-  color: white;
+  background-color: var(--inputbg);
+  color: var(--textcolor);
   box-sizing: border-box;
   font-size: 20px;
   padding: 0.8% 0.8%;
@@ -216,20 +216,20 @@ input[type="text"] {
   border-radius: 5px;
   outline: none;
   margin: 10px;
-  border: 2px solid #5a189a;
+  border: 2px solid var(--inputborder);
   border-radius: 5px;
   transition: opacity 0.25s ease-in-out;
-  opacity: 70%;
+  opacity: 100%;
   transition-duration: 0.5s;
 }
 input[type=text]:hover {
-  opacity: 100%;
+  opacity: 80%;
 }
 
 .bookmarkletdiv {
   width: 30%;
-  background-color: #240046;
-  box-shadow: 0px 0px 5px 5px #240046;
+  background-color: var(--uibg);
+  box-shadow: 0px 0px 5px 5px var(--uibg);
   padding: 5px;
   margin: 15px;
   border-radius: 10px;
@@ -238,7 +238,7 @@ input[type=text]:hover {
 
 .bookmarkletdiv a {
   font-size: 30px;
-  color: white;
+  color: var(--textcolor);
 }
 
 form {
diff --git a/support.html b/support.html
index ea4da299..2a7e4e6f 100644
--- a/support.html
+++ b/support.html
@@ -14,6 +14,7 @@
     <script src="/js/all.js"></script>
     <script src="/js/main.js"></script>
     <link rel="stylesheet" href="/style.css" />
+<link rel="stylesheet" href="/themes.css" />
 
     <!-- seo + other things -->
     <title>Support | Selenite</title>
diff --git a/themes.css b/themes.css
new file mode 100644
index 00000000..eec94471
--- /dev/null
+++ b/themes.css
@@ -0,0 +1,22 @@
+body[theme=main] {
+    --inputbg: #3c096c;
+    --inputborder: #5a189a;
+    --uibg: #240046;
+    --textcolor: #fff;
+    --bg: #10002b;
+}
+
+body[theme=testing] {
+    --inputbg: #ffffff;
+    --inputborder: #312341;
+    --uibg: #abcdef;
+    --textcolor: #fff;
+    --bg: #545555;
+}
+body[theme=egamepass] {
+    --inputbg: #ffffff;
+    --inputborder: #312341;
+    --uibg: #abcdef;
+    --textcolor: #fff;
+    --bg: #545555;
+}
\ No newline at end of file
diff --git a/transfer.html b/transfer.html
index 9a84c128..0bfa8664 100644
--- a/transfer.html
+++ b/transfer.html
@@ -15,6 +15,7 @@
     <script src="/js/main.js"></script>
     <script src="/js/randomquote.js"></script>
     <link rel="stylesheet" href="/style.css" />
+<link rel="stylesheet" href="/themes.css" />
 
     <!-- seo + other things -->
     <title>Settings | Selenite</title>