diff --git a/KeyCtrl/src/App.css b/KeyCtrl/src/App.css
index a3d2e1c..e56c8a5 100644
--- a/KeyCtrl/src/App.css
+++ b/KeyCtrl/src/App.css
@@ -245,4 +245,78 @@
     --selection-color: #fbc401;
     --bg-color: #122738;
     --dark-bg: #193549;
+}
+
+[data-theme="wood"]{
+    --primary-color: #bb9457;
+    --text-container: #bb9457;
+    --secondary-color: #6688c1;
+    --text-color: #ffe6a7;
+    --next-up-text-color: #ffe6a7;
+    --selection-color: #6f1d1b;
+    --bg-color: #99582a;
+    --dark-bg: #432818;
+}
+
+[data-theme="bronze"]{
+    --primary-color: #806b27;
+    --text-container: #3a3b2d;
+    --secondary-color: #a47e1b;
+    --text-color: #c49515;
+    --next-up-text-color: #db9004;
+    --selection-color: #b67534;
+    --bg-color: #53410e;
+    --dark-bg: #413f23;
+}
+
+[data-theme="silver"]{
+    --primary-color: #464646;
+    --text-container: #444444;
+    --secondary-color: #c16666;
+    --text-color: #a7a5a5;
+    --next-up-text-color: #a5a6a7;
+    --selection-color: #C0C0C0;
+    --bg-color: #464646;
+    --dark-bg: #282828;
+}
+
+[data-theme="gold"]{
+    --primary-color: #464646;
+    --text-container: #444444;
+    --secondary-color: #c16666;
+    --text-color: #fce981;
+    --next-up-text-color: #ffe96d;
+    --selection-color: #FFD700;
+    --bg-color: #464646;
+    --dark-bg: #282828;
+}
+[data-theme="diamond"]{
+    --primary-color: #0b304a;
+    --text-container: #6d9dc2;
+    --secondary-color: #788cac;
+    --text-color: #2e6abe;
+    --next-up-text-color: #788cac;
+    --selection-color: #99d3ff;
+    --bg-color: #7db6fa;
+    --dark-bg: #243864;
+}
+[data-theme="platinum"]{
+    --primary-color: #464646;
+    --text-container: #444444;
+    --secondary-color: #66c1bc;
+    --text-color: #81fcc9;
+    --next-up-text-color: #6dffda;
+    --selection-color: #00ffaa;
+    --bg-color: #435a55;
+    --dark-bg: #2a383f;
+}
+[data-theme="champion"]{
+    --primary-color: #464646;
+    --text-container: #e5383b;
+    --secondary-color: #ba181b;
+    --text-color: #0b090a;
+    --next-up-text-color: #161a1d;
+    --selection-color: #dbc858;
+    --bg-color: #a4161a;
+    --dark-bg: #2c343a;
 }
\ No newline at end of file
diff --git a/KeyCtrl/src/components/SettingsPage/ThemeSelect.js b/KeyCtrl/src/components/SettingsPage/ThemeSelect.js
index 3e8ff9e..5aea54a 100644
--- a/KeyCtrl/src/components/SettingsPage/ThemeSelect.js
+++ b/KeyCtrl/src/components/SettingsPage/ThemeSelect.js
@@ -179,6 +179,55 @@ const ThemeSelect = ({updateOptions}) => {
                     onClick={() => changeTheme('cobalt')}>
                     cobalt
                 </BaseThemeBox>
+                <BaseThemeBox
+                    background="#99582a"
+                    border="#6f1d1b"
+                    text="#ffe6a7"
+                    onClick={() => changeTheme('wood')}>
+                    wood
+                </BaseThemeBox>
+                <BaseThemeBox
+                    background="#53410e"
+                    border="#b67534"
+                    text="#c49515"
+                    onClick={() => changeTheme('bronze')}>
+                    bronze
+                </BaseThemeBox>
+                <BaseThemeBox
+                    background="#282828"
+                    border="#C0C0C0"
+                    text="#c0caf5"
+                    onClick={() => changeTheme('silver')}>
+                    silver
+                </BaseThemeBox>
+                <BaseThemeBox
+                    background="#464646"
+                    border="#fbc401"
+                    text="#fce981"
+                    onClick={() => changeTheme('gold')}>
+                    gold
+                </BaseThemeBox>
+                <BaseThemeBox
+                    background="#435a55"
+                    border="#00ffaa"
+                    text="#81fcc9"
+                    onClick={() => changeTheme('platinum')}>
+                    platinum
+                </BaseThemeBox>
+                <BaseThemeBox
+                    background="#7db6fa"
+                    border="#99d3ff"
+                    text="#2e6abe"
+                    onClick={() => changeTheme('diamond')}>
+                    diamond
+                </BaseThemeBox>
+                <BaseThemeBox
+                    background="#a4161a"
+                    border="#dbc858"
+                    text="#0b090a"
+                    onClick={() => changeTheme('champion')}>
+                    champion
+                </BaseThemeBox>
             </StyledPopup>
         </div>
     )