diff --git a/assets/styles/themes/moonless_night.less b/assets/styles/themes/moonless_night.less
index 6755b963e7..09cc92a8df 100644
--- a/assets/styles/themes/moonless_night.less
+++ b/assets/styles/themes/moonless_night.less
@@ -1,7 +1,10 @@
+:root {
+  --flair-color: #B53471;
+}
+
 .moonless_night {
   //------------- Colors -------------
   @white: #fff;
-  @flair: #B53471;
 
   @background: #15161d;
   @midground: #000;
@@ -11,7 +14,7 @@
 
   //------------- Ui Colors -------------
   @border-color: @gray;
-  @flair-glow: 0 5px 14px -5px @flair;
+  @flair-glow: 0 5px 14px -5px var(--flair-color);
 
   //------------- Ui Flair -------------
   @border: 1px solid @border-color;
@@ -20,7 +23,7 @@
   .background { background: @midground !important; }
   .background-alt { background: @graydient !important; }
 
-  .flair { background: @flair !important; }
+  .flair { background: var(--flair-color) !important; }
   .flair-glow { box-shadow: @flair-glow !important; }
 
   .flair-glowing {
@@ -35,7 +38,7 @@
   }
 
   .menu-list li a.is-active {
-    background: @flair !important;
+    background: var(--flair-color) !important;
     box-shadow: @flair-glow !important;
   }
 
@@ -44,7 +47,7 @@
       color: @white !important;
       .selected {
         color: @white !important;
-        background: @flair !important;
+        background: var(--flair-color) !important;
         box-shadow: @flair-glow !important;
       }
     }
@@ -53,32 +56,32 @@
 
   //------------- Navigation -------------
 
-  a {
-    color: @flair !important;
+  .a_link {
+    color: var(--flair-color) !important;
 
     &:hover {
-      color: @flair !important;
+      color: var(--flair-color) !important;
     }
   }
 
   .alpha-divider {
-    color: @flair !important;
+    color: var(--flair-color) !important;
   }
 
   li .is-active,
   li.active {
-    background: @flair !important;
+    background: var(--flair-color) !important;
     box-shadow: @flair-glow !important;
   }
 
   .breadcrumb a {
-    color: @flair !important;
+    color: var(--flair-color) !important;
   }
 
   .toggle-sidebar,
   .toggle--sidebar,
   .menu-toggle {
-    color: @flair !important;
+    color: var(--flair-color) !important;
   }
 
   .sidebar-inner, .controls {
@@ -92,29 +95,29 @@
   }
 
   .multiselect__tags {
-    background: @flair !important;
+    background: var(--flair-color) !important;
     box-shadow: @flair-glow;
-    border: @flair;
+    border: var(--flair-color);
   }
 
   .chip-item {
-    background: @flair !important;
-    border: @flair;
+    background: var(--flair-color) !important;
+    border: var(--flair-color);
   }
 
   .switch-button {
-    border-color: @flair !important;
+    border-color: var(--flair-color) !important;
     .sw-button {
-      border-color: @flair !important;
-      background: @flair !important;
+      border-color: var(--flair-color) !important;
+      background: var(--flair-color) !important;
     }
     &.enabled{
       .sw-button {
         border-color: @white !important;
         background: @white !important;
       }
-      background: @flair !important;
-      border-color: @flair !important;
+      background: var(--flair-color) !important;
+      border-color: var(--flair-color) !important;
     }
   }
   #sidebar {
@@ -132,7 +135,7 @@
         }
 
         &.is-primary {
-          background: @flair !important;
+          background: var(--flair-color) !important;
           box-shadow: @flair-glow !important;
         }
         .tag-inverted {
@@ -158,9 +161,9 @@
       }
       &.active {
         border-radius: @half;
-        color: @flair !important;
+        color: var(--flair-color) !important;
         svg {
-          color: @flair !important;
+          color: var(--flair-color) !important;
         }
       }
       &:extend(.inline-flex-centered);
@@ -179,7 +182,7 @@
 
   .file {
     .file-icon {
-      color: @flair !important;
+      color: var(--flair-color) !important;
     }
   }
 
@@ -193,7 +196,7 @@
   #chatbar {
     .chatbar-controls {
       div[data-tooltip="Send"] {
-        color: @flair !important;
+        color: var(--flair-color) !important;
       }
     }
   }
@@ -201,16 +204,16 @@
   // Buttons
   .button {
     &.is-primary {
-      background: @flair !important;
+      background: var(--flair-color) !important;
       box-shadow: @flair-glow !important;
       color: @white !important;
-      background: @flair !important;
+      background: var(--flair-color) !important;
     }
     &.is-dark {
       background: @gray;
     }
     &.active {
-      background: @flair !important;
+      background: var(--flair-color) !important;
       box-shadow: @flair-glow !important;
       color: @white !important;
     }
@@ -218,13 +221,13 @@
 
   // Labels
   .label {
-    background: @flair !important;
+    background: var(--flair-color) !important;
   }
 
   // Media 
   #mediastream {
     .user, .tag {
-      background: @flair !important;
+      background: var(--flair-color) !important;
     }
     .tag {
       box-shadow: @flair-glow !important;
@@ -233,24 +236,24 @@
 
   // Progress
   .progress {
-    border: @flair;
+    border: var(--flair-color);
 
     &.is-primary {
-      border-color: @flair !important;
+      border-color: var(--flair-color) !important;
       &::-webkit-progress-value {
-        background: @flair !important;
+        background: var(--flair-color) !important;
       }
       &::-moz-progress-bar {
-        background: @flair !important;
+        background: var(--flair-color) !important;
       }
       &::-ms-fill {
-        background: @flair !important;
+        background: var(--flair-color) !important;
         border: none;
       }
     }
 
 
-    border: 1px solid @flair;
+    border: 1px solid var(--flair-color);
     background: transparent;
     margin-bottom: @light-spacing;
   }
@@ -261,9 +264,9 @@
   .volume-slider .vue-slider-process,
   .vue-slider-dot-tooltip-inner {
     &::after {
-      border-left-color: @flair !important;
+      border-left-color: var(--flair-color) !important;
     }
-    background: @flair !important;
+    background: var(--flair-color) !important;
   }
 
   // Scrollbars
@@ -275,19 +278,19 @@
   .ps__rail-y:hover > .ps__thumb-y,
   .ps__rail-y:focus > .ps__thumb-y,
   .ps__rail-y.ps--clicking .ps__thumb-y {
-    background: @flair !important;
+    background: var(--flair-color) !important;
   }
 
   .auto-scroll {
     /* Scroll Handle */
     &::-webkit-scrollbar-thumb {
-      background: @flair !important;
+      background: var(--flair-color) !important;
     }
     /* Custom Scroll for Firefox */
-    scrollbar-color: @flair transparent !important;
+    scrollbar-color: var(--flair-color) transparent !important;
   }
 
   .new-message-alert {
-    background: @flair !important;
+    background: var(--flair-color) !important;
   }
 }
\ No newline at end of file
diff --git a/components/interactables/Select/Select.html b/components/interactables/Select/Select.html
index d1216c16bc..50728b1b08 100644
--- a/components/interactables/Select/Select.html
+++ b/components/interactables/Select/Select.html
@@ -3,9 +3,7 @@
   v-click-outside="() => open = false"
 >
   <div :class="{'custom-select': true, open, up, down: !up}">
-    <div class="selected" @click="toggleOpen()">
-      {{ getSelectLabel() }}
-    </div>
+    <div class="selected" @click="toggleOpen()">{{ getSelectLabel() }}</div>
     <div class="items">
       <div
         v-for="(option, i) of options"
@@ -13,7 +11,14 @@
         :disabled="option.disabled"
         @click="change(option)"
       >
-        {{ option.text }}
+        <div
+          class="color"
+          v-if="colorSupport"
+          :style="{ background: option.value }"
+        >
+          {{ option.text }}
+        </div>
+        <span v-else>{{ option.text }}</span>
       </div>
     </div>
   </div>
diff --git a/components/interactables/Select/Select.less b/components/interactables/Select/Select.less
index 4d3f8cac35..a2b19174af 100644
--- a/components/interactables/Select/Select.less
+++ b/components/interactables/Select/Select.less
@@ -42,6 +42,7 @@
     &:extend(.round-corners);
     &:extend(.bordered);
     &:extend(.blur);
+    min-width: 8rem;
     position: absolute;
     display: none;
     color: #fff;
diff --git a/components/interactables/Select/Select.vue b/components/interactables/Select/Select.vue
index d6361bec4f..00b1fbce42 100644
--- a/components/interactables/Select/Select.vue
+++ b/components/interactables/Select/Select.vue
@@ -12,6 +12,10 @@ export default Vue.extend({
     event: 'change',
   },
   props: {
+    colorSupport: {
+      type: Boolean,
+      default: false,
+    },
     placeholder: {
       type: String,
       default: '',
diff --git a/components/ui/Chat/Image/Image.html b/components/ui/Chat/Image/Image.html
index 84cdb1bcfb..7a2e7e8a3d 100644
--- a/components/ui/Chat/Image/Image.html
+++ b/components/ui/Chat/Image/Image.html
@@ -7,7 +7,7 @@
         :class="`is-image-in-mask`"
         :src="image.url"
         v-click-outside="() => $data.showfull = !$data.showfull" />
-      <a :href="image.url" target="_blank">
+      <a class="a_link" :href="image.url" target="_blank">
         {{ $t('files.view_original') }}
       </a>
     </div>
diff --git a/components/views/settings/pages/personalize/Personalize.html b/components/views/settings/pages/personalize/Personalize.html
index 271afd43ac..3c788f7681 100644
--- a/components/views/settings/pages/personalize/Personalize.html
+++ b/components/views/settings/pages/personalize/Personalize.html
@@ -19,6 +19,20 @@
     </div>
   </div>
 
+  <div class="columns is-desktop">
+    <div class="column">
+      <TypographyLabel :text="$t('pages.settings.personalize.flair')" />
+      <br />
+      <InteractablesSelect 
+        v-model="flair"
+        size="small"
+        :options="flairs"
+        colorSupport
+        :selected="ui.theme.flair.value"
+      />
+    </div>
+  </div>
+
   <div class="columns is-desktop">
     <div class="column">
       <TypographyLabel :text="$t('pages.settings.personalize.language')" />
diff --git a/components/views/settings/pages/personalize/index.vue b/components/views/settings/pages/personalize/index.vue
index cd1817f991..fd67da39e5 100644
--- a/components/views/settings/pages/personalize/index.vue
+++ b/components/views/settings/pages/personalize/index.vue
@@ -3,13 +3,14 @@
 <script lang="ts">
 import Vue from 'vue'
 import { mapState } from 'vuex'
-import { Themes } from '~/store/ui/types.ts'
+import { Themes, Flairs } from '~/store/ui/types.ts'
 export default Vue.extend({
   name: 'PersonalizeSettings',
   layout: 'settings',
   data() {
     return {
       themes: Themes,
+      flairs: Flairs,
     }
   },
   computed: {
@@ -18,19 +19,26 @@ export default Vue.extend({
     // the state accordingly with the mutation
     theme: {
       set(state) {
-        console.log('themes', Themes)
         const activeTheme = Themes.find((th) => {
-          console.log('th', th)
           return th.value === state
         })
-        console.log('activeTheme', activeTheme)
-        console.log('state', state)
         this.$store.commit('ui/updateTheme', activeTheme)
       },
       get() {
         return this.ui.theme.base.value
       },
     },
+    flair: {
+      set(state) {
+        const activeFlair = Flairs.find((fl) => {
+          return fl.value === state
+        })
+        this.$store.commit('ui/updateFlair', activeFlair)
+      },
+      get() {
+        return this.ui.theme.flair.value
+      },
+    },
   },
 })
 </script>
diff --git a/layouts/chat.vue b/layouts/chat.vue
index 8048bba0bc..095e06cc8c 100644
--- a/layouts/chat.vue
+++ b/layouts/chat.vue
@@ -30,7 +30,9 @@
             :sidebar="sidebar"
           />
         </swiper-slide>
-        <swiper-slide :class="`dynamic-content ${ui.fullscreen ? 'fullscreen-media' : ''}`">
+        <swiper-slide
+          :class="`dynamic-content ${ui.fullscreen ? 'fullscreen-media' : ''}`"
+        >
           <menu-icon
             class="toggle--sidebar"
             v-on:click="toggleMenu"
@@ -83,6 +85,10 @@
       </swiper>
     </div>
     <MobileNav v-if="$device.isMobile" />
+    <!-- Sets the global css variable for the theme flair color -->
+    <v-style>
+      :root { --flair-color: {{ $store.state.ui.theme.flair.value }}; }
+    </v-style>
   </div>
 </template>
 
@@ -92,9 +98,7 @@ import { mapState } from 'vuex'
 import { Touch } from '~/components/mixins/Touch'
 import Layout from '~/components/mixins/Layouts/Layout'
 
-import {
-  MenuIcon,
-} from 'satellite-lucide-icons'
+import { MenuIcon } from 'satellite-lucide-icons'
 
 export default Vue.extend({
   name: 'ChatLayout',
@@ -107,18 +111,18 @@ export default Vue.extend({
     return {
       sidebar: true,
       asidebar: !this.$device.isMobile,
-      swiperOption: {        
+      swiperOption: {
         initialSlide: 0,
         resistanceRatio: 0,
         slidesPerView: 'auto',
         noSwiping: this.$device.isMobile ? false : true,
-        allowTouchMove:  this.$device.isMobile ? true : false,
+        allowTouchMove: this.$device.isMobile ? true : false,
         on: {
           slideChange: () => {
             this.$data.sidebar = this.$refs.swiper.$swiper.activeIndex === 0
             this.$data.asidebar = this.$refs.swiper.$swiper.activeIndex === 2
-          }
-        }
+          },
+        },
       },
     }
   },
@@ -159,9 +163,9 @@ export default Vue.extend({
           ? this.$refs.swiper.$swiper.slideNext()
           : this.$refs.swiper.$swiper.slidePrev()
       }
-    }
+    },
   },
 })
 </script>
 
-<style lang="less" src="./Layout.less"></style>
\ No newline at end of file
+<style lang="less" src="./Layout.less"></style>
diff --git a/layouts/default.vue b/layouts/default.vue
index 2f4b138dca..347beeefe2 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,6 +1,10 @@
 <template>
   <div id="app" :class="$store.state.ui.theme.base.class">
     <Nuxt />
+    <!-- Sets the global css variable for the theme flair color -->
+    <v-style>
+      :root { --flair-color: {{ $store.state.ui.theme.flair.value }}; }
+    </v-style>
   </div>
 </template>
 <style lang="less">
diff --git a/layouts/files.vue b/layouts/files.vue
index 56c29cfd3a..502894b440 100644
--- a/layouts/files.vue
+++ b/layouts/files.vue
@@ -42,6 +42,10 @@
       </swiper>
     </div>
     <MobileNav v-if="$device.isMobile" />
+    <!-- Sets the global css variable for the theme flair color -->
+    <v-style>
+      :root { --flair-color: {{ $store.state.ui.theme.flair.value }}; }
+    </v-style>
   </div>
 </template>
 
diff --git a/layouts/friends.vue b/layouts/friends.vue
index e4e09652a8..779387086f 100644
--- a/layouts/friends.vue
+++ b/layouts/friends.vue
@@ -41,6 +41,10 @@
       </swiper>
     </div>
     <MobileNav v-if="$device.isMobile" />
+    <!-- Sets the global css variable for the theme flair color -->
+    <v-style>
+      :root { --flair-color: {{ $store.state.ui.theme.flair.value }}; }
+    </v-style>
   </div>
 </template>
 
diff --git a/layouts/server.vue b/layouts/server.vue
index f783063516..fdf9c1a195 100644
--- a/layouts/server.vue
+++ b/layouts/server.vue
@@ -65,6 +65,10 @@
       </swiper>
     </div>
     <MobileNav v-if="$device.isMobile" />
+    <!-- Sets the global css variable for the theme flair color -->
+    <v-style>
+      :root { --flair-color: {{ $store.state.ui.theme.flair.value }}; }
+    </v-style>
   </div>
 </template>
 
diff --git a/nuxt.config.js b/nuxt.config.js
index 51a16cdf74..edffde4bdb 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -85,6 +85,7 @@ export default defineNuxtConfig({
     { src: '~/plugins/local/config.ts' },
     { src: '~/plugins/local/dayjs.ts' },
     { src: '~/plugins/local/mock.ts' },
+    { src: '~/plugins/local/style.ts' },
   ],
 
   // Auto import components: https://go.nuxtjs.dev/config-components
diff --git a/plugins/local/style.ts b/plugins/local/style.ts
new file mode 100644
index 0000000000..1ce8a07713
--- /dev/null
+++ b/plugins/local/style.ts
@@ -0,0 +1,7 @@
+import Vue from 'vue'
+
+Vue.component('v-style', {
+  render: function (createElement) {
+    return createElement('style', this.$slots.default)
+  }
+})
\ No newline at end of file
diff --git a/store/ui/mutations.ts b/store/ui/mutations.ts
index 2fa31abbb5..3841f9791b 100644
--- a/store/ui/mutations.ts
+++ b/store/ui/mutations.ts
@@ -1,5 +1,5 @@
 import { without } from 'lodash'
-import { EnhancerInfo, Theme, UIState } from './types'
+import { EnhancerInfo, Flair, Theme, UIState } from './types'
 import { MessageGroup } from '~/types/messaging'
 import { Channel } from '~/types/ui/server'
 import { RecentGlyph } from '~/store/ui/types'
@@ -314,7 +314,7 @@ export default {
   updateTheme(state: UIState, theme: Theme) {
     state.theme.base = theme
   },
-  updateFlair(state: UIState, flair: String) {
+  updateFlair(state: UIState, flair: Flair) {
     state.theme.flair = flair
   },
 }
diff --git a/store/ui/state.ts b/store/ui/state.ts
index 19f61b1c78..5e9f8a7045 100644
--- a/store/ui/state.ts
+++ b/store/ui/state.ts
@@ -1,4 +1,4 @@
-import { UIState, GlyphMarketViewStatus, ThemeNames } from './types'
+import { UIState, GlyphMarketViewStatus, Themes, Flairs } from './types'
 
 const InitialUIState = (): UIState => ({
   contextMenuStatus: false,
@@ -50,13 +50,9 @@ const InitialUIState = (): UIState => ({
   editMessage: { id: '', from: '', payload: '' },
   recentReactions: ['👍', '😂', '♥️'],
   mostEmojiUsed: [],
-  recentGlyphs: [],
   theme: {
-    base: {
-      name: ThemeNames.DEFAULT,
-      class: '',
-    },
-    flair: 'Green',
+    base: Themes[0],
+    flair: Flairs[0],
   },
 })
 
diff --git a/store/ui/types.ts b/store/ui/types.ts
index 4dc4300a61..3e64073cfa 100644
--- a/store/ui/types.ts
+++ b/store/ui/types.ts
@@ -11,6 +11,57 @@ export type Theme = {
   class: String
 }
 
+export enum FlairColors {
+  PEACH = '#ED4C67',
+  PINK = '#FDA7DF',
+  LIME = '#A3CB38',
+  PURPLE = '#6F1E51',
+  PURPLER = '#9980FA',
+  SUNFLOWER = '#FFC312',
+  DEEP_BLUE = '#30336b',
+  VOID = '#2C3A47',
+}
+
+export type Flair = {
+  text: String,
+  value: FlairColors,
+}
+
+export const Flairs = [
+  {
+    text: 'Peach',
+    value: FlairColors.PEACH,
+  },
+  {
+    text: 'Pink',
+    value: FlairColors.PINK,
+  },
+  {
+    text: 'Lime',
+    value: FlairColors.LIME,
+  },
+  {
+    text: 'Purple',
+    value: FlairColors.PURPLE,
+  },
+  {
+    text: 'Purpler',
+    value: FlairColors.PURPLER,
+  },
+  {
+    text: 'Sunflower',
+    value: FlairColors.SUNFLOWER,
+  },
+  {
+    text: 'Deep',
+    value: FlairColors.DEEP_BLUE,
+  },
+  {
+    text: 'Void',
+    value: FlairColors.VOID,
+  },
+]
+
 export const Themes = [
   {
     text: 'Default',
@@ -106,6 +157,6 @@ export interface UIState {
   recentGlyphs: Array<RecentGlyph>
   theme: {
     base: Theme
-    flair: String
+    flair: Flair
   }
 }