diff --git a/Whats-the-Weather/manifest.json b/Whats-the-Weather/manifest.json
index 194688e..42ac2c9 100644
--- a/Whats-the-Weather/manifest.json
+++ b/Whats-the-Weather/manifest.json
@@ -3,7 +3,7 @@
     "name": "What's the Weather?",
     "description": "Check the weather on the fly from a chrome extension!",
     "author": "Dylan Ravel",
-    "version": "1.5.1.0",
+    "version": "1.5.2.1",
     "icons": {
         "16": "/src/favicon-stuff/android-chrome-192x192.png",
         "32": "/src/favicon-stuff/android-chrome-192x192.png",
diff --git a/Whats-the-Weather/src/scripts/options.js b/Whats-the-Weather/src/scripts/options.js
index 45a7148..10f41b6 100644
--- a/Whats-the-Weather/src/scripts/options.js
+++ b/Whats-the-Weather/src/scripts/options.js
@@ -1,3 +1,25 @@
+// sets background color of settings depending on if you are using light or dark mode
+function updateColorScheme(e) {
+    const isDarkMode = e.matches;
+    const root = document.documentElement;
+    if (isDarkMode) {
+        // is dark mode
+        root.style.setProperty('--text-color', '#fff');
+        root.style.setProperty('--background-color', '#222');
+    } else {
+        // is not dark mode
+        root.style.setProperty('--text-color', '#222');
+        root.style.setProperty('--background-color', '#fff');
+    }
+}
+
+// Check the user's preferred color scheme on load
+const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+updateColorScheme({ matches: isDarkMode });
+
+// Watch for changes in the user's preferred color scheme and update styles accordingly
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateColorScheme);
+
 // saves options to chrome storage
 const saveOptions = () => {
     var possibleDegreeOptions = document.getElementsByName('degree-unit');
diff --git a/Whats-the-Weather/src/styles/options-styles.css b/Whats-the-Weather/src/styles/options-styles.css
index b825083..e5bb4ec 100644
--- a/Whats-the-Weather/src/styles/options-styles.css
+++ b/Whats-the-Weather/src/styles/options-styles.css
@@ -1,3 +1,8 @@
+:root {
+    --text-color: #fff;
+    --background-color: #222;
+}
+
 * {
     margin: 8px;
     padding: 0;
@@ -6,8 +11,8 @@
 }
 
 body {
-    background: #222;
-    color: white;
+    background: var(--background-color);
+    color: var(--text-color);
     overflow: hidden;
 }
 
@@ -17,7 +22,6 @@ h1 {
 
 .label-text {
     font-size: 18px;
-    color: #ffffff;
     margin-bottom: 5px;
 }
 
diff --git a/Whats-the-Weather/src/styles/styles.css b/Whats-the-Weather/src/styles/styles.css
index 1e93073..6062d44 100644
--- a/Whats-the-Weather/src/styles/styles.css
+++ b/Whats-the-Weather/src/styles/styles.css
@@ -39,14 +39,13 @@ body {
 }
 
 .popup-container {
-    width: 450px;
-    height: 270px;
+    width: 500px;
+    height: 250px;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: auto;
     margin-bottom: auto;
-    transform: scale(0.9);
 
     /*
     width: 80%;
@@ -68,7 +67,7 @@ body {
 }
 
 .card {
-    width: 90%;
+    width: 80%;
     max-width: 470px;
     background: linear-gradient(135deg, #00feba, #5b548a);
     color: #fff;