diff --git a/src/renderer/components/theme-settings/theme-settings.js b/src/renderer/components/theme-settings/theme-settings.js
index 8f9142def..3851a8dc0 100644
--- a/src/renderer/components/theme-settings/theme-settings.js
+++ b/src/renderer/components/theme-settings/theme-settings.js
@@ -30,16 +30,20 @@ export default defineComponent({
         'restart',
         'cancel'
       ],
+      /* Themes are devided into 3 groups. The first group contains the default themes. The second group are themes that don't have specific primary and secondary colors. The third group are themes that do have specific primary and secondary colors available. */
       baseThemeValues: [
+        // First group
         'system',
         'light',
         'dark',
         'black',
-        'dracula',
-        'catppuccinMocha',
-        'pastelPink',
-        'hotPink',
+        // Second group
         'nordic',
+        'hotPink',
+        'pastelPink',
+        // Third group
+        'catppuccinMocha',
+        'dracula',
         'solarizedDark',
         'solarizedLight'
       ]
@@ -97,17 +101,21 @@ export default defineComponent({
       ]
     },
 
+    /* Themes are devided into 3 groups. The first group contains the default themes. The second group are themes that don't have specific primary and secondary colors. The third group are themes that do have specific primary and secondary colors available. */
     baseThemeNames: function () {
       return [
+        // First group
         this.$t('Settings.Theme Settings.Base Theme.System Default'),
         this.$t('Settings.Theme Settings.Base Theme.Light'),
         this.$t('Settings.Theme Settings.Base Theme.Dark'),
         this.$t('Settings.Theme Settings.Base Theme.Black'),
-        this.$t('Settings.Theme Settings.Base Theme.Dracula'),
-        this.$t('Settings.Theme Settings.Base Theme.Catppuccin Mocha'),
-        this.$t('Settings.Theme Settings.Base Theme.Pastel Pink'),
-        this.$t('Settings.Theme Settings.Base Theme.Hot Pink'),
+        // Second group
         this.$t('Settings.Theme Settings.Base Theme.Nordic'),
+        this.$t('Settings.Theme Settings.Base Theme.Hot Pink'),
+        this.$t('Settings.Theme Settings.Base Theme.Pastel Pink'),
+        // Third group
+        this.$t('Settings.Theme Settings.Base Theme.Catppuccin Mocha'),
+        this.$t('Settings.Theme Settings.Base Theme.Dracula'),
         this.$t('Settings.Theme Settings.Base Theme.Solarized Dark'),
         this.$t('Settings.Theme Settings.Base Theme.Solarized Light')
       ]
diff --git a/src/renderer/helpers/colors.js b/src/renderer/helpers/colors.js
index d4951e4a2..fbd0f7a87 100644
--- a/src/renderer/helpers/colors.js
+++ b/src/renderer/helpers/colors.js
@@ -17,13 +17,6 @@ export const colors = [
   { name: 'Amber', value: '#FFAB00' },
   { name: 'Orange', value: '#FF6D00' },
   { name: 'DeepOrange', value: '#DD2C00' },
-  { name: 'DraculaCyan', value: '#8BE9FD' },
-  { name: 'DraculaGreen', value: '#50FA7B' },
-  { name: 'DraculaOrange', value: '#FFB86C' },
-  { name: 'DraculaPink', value: '#FF79C6' },
-  { name: 'DraculaPurple', value: '#BD93F9' },
-  { name: 'DraculaRed', value: '#FF5555' },
-  { name: 'DraculaYellow', value: '#F1FA8C' },
   { name: 'CatppuccinMochaRosewater', value: '#F5E0DC' },
   { name: 'CatppuccinMochaFlamingo', value: '#F2CDCD' },
   { name: 'CatppuccinMochaPink', value: '#F5C2E7' },
@@ -38,6 +31,13 @@ export const colors = [
   { name: 'CatppuccinMochaSapphire', value: '#74C7EC' },
   { name: 'CatppuccinMochaBlue', value: '#89B4FA' },
   { name: 'CatppuccinMochaLavender', value: '#B4BEFE' },
+  { name: 'DraculaCyan', value: '#8BE9FD' },
+  { name: 'DraculaGreen', value: '#50FA7B' },
+  { name: 'DraculaOrange', value: '#FFB86C' },
+  { name: 'DraculaPink', value: '#FF79C6' },
+  { name: 'DraculaPurple', value: '#BD93F9' },
+  { name: 'DraculaRed', value: '#FF5555' },
+  { name: 'DraculaYellow', value: '#F1FA8C' },
   { name: 'SolarizedYellow', value: '#b58900' },
   { name: 'SolarizedOrange', value: '#cb4b16' },
   { name: 'SolarizedRed', value: '#dc322f' },
@@ -66,13 +66,6 @@ export function getColorTranslations() {
     i18n.t('Settings.Theme Settings.Main Color Theme.Amber'),
     i18n.t('Settings.Theme Settings.Main Color Theme.Orange'),
     i18n.t('Settings.Theme Settings.Main Color Theme.Deep Orange'),
-    i18n.t('Settings.Theme Settings.Main Color Theme.Dracula Cyan'),
-    i18n.t('Settings.Theme Settings.Main Color Theme.Dracula Green'),
-    i18n.t('Settings.Theme Settings.Main Color Theme.Dracula Orange'),
-    i18n.t('Settings.Theme Settings.Main Color Theme.Dracula Pink'),
-    i18n.t('Settings.Theme Settings.Main Color Theme.Dracula Purple'),
-    i18n.t('Settings.Theme Settings.Main Color Theme.Dracula Red'),
-    i18n.t('Settings.Theme Settings.Main Color Theme.Dracula Yellow'),
     i18n.t('Settings.Theme Settings.Main Color Theme.Catppuccin Mocha Rosewater'),
     i18n.t('Settings.Theme Settings.Main Color Theme.Catppuccin Mocha Flamingo'),
     i18n.t('Settings.Theme Settings.Main Color Theme.Catppuccin Mocha Pink'),
@@ -87,6 +80,13 @@ export function getColorTranslations() {
     i18n.t('Settings.Theme Settings.Main Color Theme.Catppuccin Mocha Sapphire'),
     i18n.t('Settings.Theme Settings.Main Color Theme.Catppuccin Mocha Blue'),
     i18n.t('Settings.Theme Settings.Main Color Theme.Catppuccin Mocha Lavender'),
+    i18n.t('Settings.Theme Settings.Main Color Theme.Dracula Cyan'),
+    i18n.t('Settings.Theme Settings.Main Color Theme.Dracula Green'),
+    i18n.t('Settings.Theme Settings.Main Color Theme.Dracula Orange'),
+    i18n.t('Settings.Theme Settings.Main Color Theme.Dracula Pink'),
+    i18n.t('Settings.Theme Settings.Main Color Theme.Dracula Purple'),
+    i18n.t('Settings.Theme Settings.Main Color Theme.Dracula Red'),
+    i18n.t('Settings.Theme Settings.Main Color Theme.Dracula Yellow'),
     i18n.t('Settings.Theme Settings.Main Color Theme.Solarized Yellow'),
     i18n.t('Settings.Theme Settings.Main Color Theme.Solarized Orange'),
     i18n.t('Settings.Theme Settings.Main Color Theme.Solarized Red'),