diff --git a/frontend/app/assets/css/colors.scss b/frontend/app/assets/css/colors.scss
index f731e2d..e291d2f 100644
--- a/frontend/app/assets/css/colors.scss
+++ b/frontend/app/assets/css/colors.scss
@@ -22,7 +22,7 @@ $themes: (
 );
 
 $accents: (
-  alfdir: (
+  katlum: (
     link: #a4dddb,
   ),
   solus: (
@@ -44,15 +44,15 @@ $accents: (
 
 :root {
   @include theme-vars(map.get($themes, dark));
-  @include accent-vars(map.get($accents, alfdir));
+  @include accent-vars(map.get($accents, katlum));
 }
 
 [data-theme="light"] {
   @include theme-vars(map.get($themes, light));
 }
 
-[data-accent="alfdir"] {
-  @include accent-vars(map.get($accents, alfdir));
+[data-accent="katlum"] {
+  @include accent-vars(map.get($accents, katlum));
 }
 
 [data-accent="solus"] {
diff --git a/frontend/app/components/parts/site_options/ThemeSelector.vue b/frontend/app/components/parts/site_options/ThemeSelector.vue
index a646255..720732b 100644
--- a/frontend/app/components/parts/site_options/ThemeSelector.vue
+++ b/frontend/app/components/parts/site_options/ThemeSelector.vue
@@ -58,14 +58,21 @@ onUnmounted(() => {
             </div>
             <div class="divider"></div>
             <div class="menu-section">
-                <div :class="{'menu-item': true, 'active': accent === 'alfdir' }" @click="setAccent('alfdir')">
-                    <div class="circle alfdir"></div>Alfdir
+                <div :class="{'menu-item': true, 'active': accent === 'katlum' }" @click="setAccent('katlum')">
+                    <div class="circle katlum"></div>Katlum
                 </div>
-                <!--
                 <div :class="{'menu-item': true, 'active': accent === 'solus' }" @click="setAccent('solus')">
                     <div class="circle solus"></div>Solus
                 </div>
-                -->
+                <div :class="{'menu-item': true, 'active': accent === 'silang' }" @click="setAccent('silang')">
+                    <div class="circle silang"></div>Silang
+                </div>
+                <div :class="{'menu-item': true, 'active': accent === 'nozt' }" @click="setAccent('nozt')">
+                    <div class="circle nozt"></div>Nozt
+                </div>
+                <div :class="{'menu-item': true, 'active': accent === 'albor' }" @click="setAccent('albor')">
+                    <div class="circle albor"></div>Albor
+                </div>
             </div>
         </div>
     </div>
@@ -89,12 +96,21 @@ onUnmounted(() => {
     &.light {
         background-color: rgb(232, 232, 232);
     }
-    &.alfdir {
+    &.katlum {
         background-color: #4f8fba;
     }
     &.solus {
         background-color: #e9a02b;
     }
+    &.silang {
+        background-color: #a82bcb;
+    }
+    &.nozt {
+        background-color: #dc4242;
+    }
+    &.albor {
+        background-color: #5cd864;
+    }
 }
 
 /* Container */
diff --git a/frontend/app/composables/theme.ts b/frontend/app/composables/theme.ts
index 5b6dc77..7d5ea76 100644
--- a/frontend/app/composables/theme.ts
+++ b/frontend/app/composables/theme.ts
@@ -1,10 +1,10 @@
 import { ref, onMounted, watch } from 'vue'
 
 type Theme = 'light' | 'dark'
-type Accent = 'alfdir'
+type Accent = 'katlum'
 
 const theme = ref<Theme>('light')
-const accent = ref<Accent>('alfdir')
+const accent = ref<Accent>('katlum')
 
 const applyTheme = () => {
   document.documentElement.setAttribute('data-theme', theme.value)
@@ -30,7 +30,7 @@ const setupTheme = () => {
   const media = window.matchMedia('(prefers-color-scheme: dark)')
 
   theme.value = savedTheme || (media.matches ? 'dark' : 'light')
-  accent.value = savedAccent || 'alfdir'
+  accent.value = savedAccent || 'katlum'
 
   applyTheme()