diff --git a/components/Settings/AppSettings/Appearance.vue b/components/Settings/AppSettings/Appearance.vue
index 3adfda6..135c0a1 100644
--- a/components/Settings/AppSettings/Appearance.vue
+++ b/components/Settings/AppSettings/Appearance.vue
@@ -1,100 +1,14 @@
 <template>
   <div>
-    <h1>Appearance</h1>
-    
-    <p class="subtitle">THEMES</p>
-    <div class="themes">
-      <div v-for="theme of themes" class="theme-preview-container">
-        <span class="theme-preview"
-          :title="theme.displayName"
-          :style="{background:`linear-gradient(${theme.previewGradient})`}"
-          @click="changeTheme(theme.id, theme.themeUrl)"
-        >
-          <span class="theme-title" :style="{color:`${theme.complementaryColor}`}">
-            {{ theme.displayName }}
-          </span>
-        </span>
-      </div>
-    </div>
-
-    <p class="subtitle">ICONS</p>
-    <div class="themes">
-    </div>
-
-
+    <h1>hi</h1>
+    <h5>TEST</h5>
+    <h5>TEST</h5>
   </div>
 </template>
 
 <script lang="ts" setup>
-const runtimeConfig = useRuntimeConfig()
-const defaultThemes = runtimeConfig.public.defaultThemes
-const baseURL = runtimeConfig.app.baseURL;
-let themeLinkElement: HTMLLinkElement | null = null;
-
-const themes: Array<Theme> = []
-
-interface Theme {
-  id: string
-  displayName: string
-  previewGradient: string
-  complementaryColor: string
-  themeUrl: string
-}
-
-function changeTheme(id: string, url: string) {
-  if (themeLinkElement && themeLinkElement.getAttribute('href') === `${baseURL}themes/${url}`) {
-    return;
-  }
-
-  localStorage.setItem("selectedTheme", id);
-
-  // if the theme didn't originally load for some reason, create it
-  if (!themeLinkElement) {
-    themeLinkElement = document.createElement('link');
-    themeLinkElement.rel = 'stylesheet';
-    document.head.appendChild(themeLinkElement);
-  }
-
-  themeLinkElement.href = `${baseURL}themes/${url}`;
-}
-
-async function fetchThemes() {
-  for (const theme of defaultThemes) {
-    const themeConfig = await $fetch(`${baseURL}themes/${theme}.json`) as Theme
-    themeConfig.id = theme
-
-    themes.push(themeConfig)
-  }
-}
-
-await fetchThemes()
 </script>
 
 <style scoped>
-.themes {
-  display: flex;
-}
 
-.theme-preview-container {
-  margin: .5em;
-  width: 5em;
-  height: 5em;
-}
-
-.theme-preview {
-  width: 5em;
-  height: 5em;
-  border-radius: 100%;
-  border: .1em solid var(--primary-color);
-
-  display: inline-block;
-  text-align: center;
-  align-content: center;
-  cursor: pointer;
-}
-
-.theme-title {
-  font-size: .8em;
-  line-height: 5em; /* same height as the parent to centre it vertically */
-}
-</style>
+</style>
\ No newline at end of file
diff --git a/components/Settings/UserSettings/Account.vue b/components/Settings/UserSettings/Account.vue
index 866471e..85589e7 100644
--- a/components/Settings/UserSettings/Account.vue
+++ b/components/Settings/UserSettings/Account.vue
@@ -70,6 +70,13 @@ async function deleteAccount() {
 </script>
 
 <style scoped>
+.subtitle {
+  display: block;
+  font-size: 0.8em;
+  font-weight: 800;
+  margin: 4dvh 0 0.5dvh 0.25dvw;
+}
+
 .user-data-fields {
   min-width: 35dvw;
   max-width: 35dvw;
diff --git a/components/Settings/UserSettings/Profile.vue b/components/Settings/UserSettings/Profile.vue
index db6188e..ed7da0a 100644
--- a/components/Settings/UserSettings/Profile.vue
+++ b/components/Settings/UserSettings/Profile.vue
@@ -108,6 +108,13 @@ async function changeAvatar() {
   display: flex;
 }
 
+.subtitle {
+  display: block;
+  font-size: 0.8em;
+  font-weight: 800;
+  margin: 1.5dvh 0 0.5dvh 0.25dvw;
+}
+
 .user-data-fields {
   min-width: 35dvw;
   max-width: 35dvw;
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 489e1b8..05a40fa 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -30,9 +30,6 @@ export default defineNuxtConfig({
       messageGroupingMaxDifference: 300000,
       buildTimeString: new Date().toISOString(),
       gitHash: process.env.GIT_SHORT_REV || "N/A",
-      defaultThemes: [
-        "light", "ash", "dark"
-      ]
     }
   },
   /* nitro: {
diff --git a/pages/settings.vue b/pages/settings.vue
index 17558b1..bd1a484 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -40,7 +40,10 @@
 
 
 <script lang="ts" setup>
+import Button from '~/components/Button.vue';
+
 const { logout } = useAuth()
+
 const appConfig = useRuntimeConfig()
 
 interface Page {
@@ -96,16 +99,6 @@ function selectCategory(page: Page) {
   selectedPage.value = page.displayName;
 };
 
-// redirects to you privacy if you go to settings#privacy
-onMounted(() => {
-  const hash = window.location.hash.substring(1).toLowerCase();
-  const foundPage = categories.flatMap(category => category.pages).find(page => page.displayName.toLowerCase() === hash);
-
-  if (foundPage) {
-    currentPage.value = foundPage;
-    selectedPage.value = foundPage.displayName;
-  }
-});
 </script>
 
 <style scoped>
@@ -187,10 +180,7 @@ onMounted(() => {
 }
 
 /* applies to child pages too */
-:deep(.subtitle) {
-  display: block;
-  font-size: 0.8em;
-  font-weight: 800;
-  margin: 4dvh 0 0.5dvh 0.25dvw;
+:deep(h5) {
+  color: red;
 }
 </style>
\ No newline at end of file
diff --git a/public/themes/ash.css b/public/themes/ash.css
deleted file mode 100644
index b685551..0000000
--- a/public/themes/ash.css
+++ /dev/null
@@ -1,19 +0,0 @@
-:root {
-	--text-color: #f0e5e0;
-	--secondary-text-color: #e8e0db;
-
-	--chat-background-color: #2f2e2d;
-    --chat-highlighted-background-color: #3f3b38;
-	--sidebar-background-color: #3e3a37;
-	--sidebar-highlighted-background-color: #46423b;
-	--topbar-background-color: #3a3733;
-
-    --padding-color: #e0e0e0;
-    
-	--primary-color: #f07028;
-	--primary-highlighted-color: #f28f4b;
-	--secondary-color: #683820;
-	--secondary-highlighted-color: #885830;
-	--accent-color: #a04b24;
-	--accent-highlighted-color: #b86038;
-}
\ No newline at end of file
diff --git a/public/themes/ash.json b/public/themes/ash.json
deleted file mode 100644
index d5d2a59..0000000
--- a/public/themes/ash.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-	"displayName": "Ash",
-	"previewGradient": "45deg, #2f2e2d, #46423b",
-	"complementaryColor": "white",
-	"themeUrl": "ash.css"
-}
\ No newline at end of file
diff --git a/public/themes/dark.json b/public/themes/dark.json
deleted file mode 100644
index 4731d43..0000000
--- a/public/themes/dark.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-	"displayName": "Dark",
-	"previewGradient": "45deg, #1f1e1d, #36322b",
-	"complementaryColor": "white",
-	"themeUrl": "dark.css"
-}
\ No newline at end of file
diff --git a/public/themes/default-themes.json b/public/themes/default-themes.json
new file mode 100644
index 0000000..fb9478d
--- /dev/null
+++ b/public/themes/default-themes.json
@@ -0,0 +1,4 @@
+[
+	"dark.css",
+	"light.css"
+]
\ No newline at end of file
diff --git a/public/themes/light.json b/public/themes/light.json
deleted file mode 100644
index b95c78b..0000000
--- a/public/themes/light.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-	"displayName": "Light",
-	"previewGradient": "45deg, #f0ebe8, #d4d0ca",
-	"complementaryColor": "black",
-	"themeUrl": "light.css"
-}
\ No newline at end of file