diff --git a/crabfit-frontend/src/components/Settings/Settings.jsx b/crabfit-frontend/src/components/Settings/Settings.jsx
index 0117777..7112194 100644
--- a/crabfit-frontend/src/components/Settings/Settings.jsx
+++ b/crabfit-frontend/src/components/Settings/Settings.jsx
@@ -17,6 +17,7 @@ import {
 } from './Settings.styles'
 
 import locales from '/src/i18n/locales'
+import { unhyphenate } from '/src/utils'
 
 // Language specific options
 const setDefaults = (lang, store) => {
@@ -132,11 +133,9 @@ const Settings = () => {
           id="colormap"
           options={{
             'crabfit': t('options.colormap.classic'),
-            ...Object.fromEntries(Object.keys(maps).map(palette => [
+            ...Object.fromEntries(Object.keys(maps).sort().map(palette => [
               palette,
-              palette.split('-')
-                .map(w => w[0].toLocaleUpperCase() + w.substring(1).toLocaleLowerCase())
-                .join(' '),
+              unhyphenate(palette)
             ])),
           }}
           small
diff --git a/crabfit-frontend/src/utils/index.js b/crabfit-frontend/src/utils/index.js
index 2ed7c02..5be893e 100644
--- a/crabfit-frontend/src/utils/index.js
+++ b/crabfit-frontend/src/utils/index.js
@@ -30,3 +30,8 @@ export const detect_browser = () => {
   if (isFirefox) return 'firefox'
   if (isOpera) return 'opera'
 }
+
+export const unhyphenate = s =>
+  s.split('-')
+    .map(w => w[0].toLocaleUpperCase() + w.substring(1).toLocaleLowerCase())
+    .join(' ')