diff --git a/src/components/palette_editor/palette_editor.vue b/src/components/palette_editor/palette_editor.vue
index b6350b0f..cebe73ee 100644
--- a/src/components/palette_editor/palette_editor.vue
+++ b/src/components/palette_editor/palette_editor.vue
@@ -1,31 +1,27 @@
 <template>
   <div class="PaletteEditor">
-    <div class="colors">
-      <ColorInput
-        v-for="key in paletteKeys"
-        :key="key"
-        :model-value="props.modelValue[key]"
-        :fallback="fallback(key)"
-        :label="$t('settings.style.themes3.palette.' + key)"
-        @update:modelValue="value => updatePalette(key, value)"
-      />
-    </div>
-    <div class="controls">
-      <button
-        class="btn button-default"
-        @click="importPalette"
-      >
-        <FAIcon icon="file-import" />
-        {{ $t('settings.style.themes3.palette.import') }}
-      </button>
-      <button
-        class="btn button-default"
-        @click="exportPalette"
-      >
-        <FAIcon icon="file-export" />
-        {{ $t('settings.style.themes3.palette.export') }}
-      </button>
-    </div>
+    <ColorInput
+      v-for="key in paletteKeys"
+      :key="key"
+      :model-value="props.modelValue[key]"
+      :fallback="fallback(key)"
+      :label="$t('settings.style.themes3.palette.' + key)"
+      @update:modelValue="value => updatePalette(key, value)"
+    />
+    <button
+      class="btn button-default palette-import-button"
+      @click="importPalette"
+    >
+      <FAIcon icon="file-import" />
+      {{ $t('settings.style.themes3.palette.import') }}
+    </button>
+    <button
+      class="btn button-default palette-export-button"
+      @click="exportPalette"
+    >
+      <FAIcon icon="file-export" />
+      {{ $t('settings.style.themes3.palette.export') }}
+    </button>
   </div>
 </template>
 
@@ -106,18 +102,23 @@ const updatePalette = (paletteKey, value) => {
 
 <style lang="scss">
 .PaletteEditor {
-  .colors {
-    display: grid;
-    justify-content: space-around;
-    grid-template-columns: repeat(4, min-content);
-    grid-template-rows: repeat(auto-fit, min-content);
-    grid-gap: 0.5em;
+  display: grid;
+  justify-content: space-around;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(3, 1fr) auto;
+  grid-gap: 0.5em;
+  align-items: space-between;
+
+  .palette-import-button {
+    grid-column: 1 / span 2;
   }
 
-  .controls {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: 0.5em;
+  .palette-export-button {
+    grid-column: 3 / span 2;
+  }
+
+  .color-input.style-control {
+    margin: 0;
   }
 }
 </style>
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
index f3d44bac..fb42e193 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -72,8 +72,9 @@ export default {
     })
 
     // ### Palette stuff
-    const palettes = reactive({
-      light: {
+    const palettes = reactive([
+      {
+        name: 'light',
         bg: '#f2f6f9',
         fg: '#d6dfed',
         text: '#304055',
@@ -85,7 +86,8 @@ export default {
         cOrange: '#ffa500',
         border: '#d8e6f9'
       },
-      dark: {
+      {
+        name: 'dark',
         bg: '#121a24',
         fg: '#182230',
         text: '#b9b9ba',
@@ -96,10 +98,11 @@ export default {
         cGreen: '#0fa00f',
         cOrange: '#ffa500'
       }
-    })
+    ])
 
     const palettesOut = computed(() => {
-      return Object.entries(palettes).map(([name, palette]) => {
+      console.log('WORK DAMN', palettes)
+      return palettes.map(({ name, ...palette }) => {
         const entries = Object
           .entries(palette)
           .map(([slot, data]) => `  ${slot}: ${data};`)
@@ -109,9 +112,10 @@ export default {
       }).join('\n\n')
     })
 
-    const editedPalette = ref('dark')
+    const editedPalette = ref(0)
     const palette = computed({
       get () {
+        console.log(palettes, editedPalette.value)
         return palettes[editedPalette.value]
       },
       set (newPalette) {
@@ -435,10 +439,12 @@ export default {
 
     const updatePreview = () => {
       try {
+        const { name, ...paletteData } = palette.value
+        console.log('WORK', paletteData)
         const rules = init({
           inputRuleset: editorFriendlyToOriginal.value,
           initialStaticVars: {
-            ...palette.value
+            ...paletteData
           },
           ultimateBackgroundColor: '#000000',
           rootComponentName: selectedComponentName.value,
@@ -529,6 +535,7 @@ export default {
       license,
       website,
       palette,
+      palettes,
       editedPalette,
       getNewPalette,
       componentKeys,
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.scss b/src/components/settings_modal/tabs/style_tab/style_tab.scss
index deb087ee..f557b7d5 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.scss
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.scss
@@ -89,10 +89,33 @@
 
   .palette-editor {
     display: grid;
+    grid-template-areas:
+      "label    editor"
+      "selector editor"
+      "motion   editor";
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto 1fr auto;
+    grid-gap: 0.5em;
+
+    .palette-editor-edit {
+      grid-area: editor;
+    }
 
     .palette-selector {
       &-label {
         font-weight: bold;
+        grid-area: label;
+        margin: 0;
+      }
+    }
+
+    .palette-list {
+      grid-area: selector;
+      margin: 0;
+
+      &-movement {
+        grid-area: motion;
+        margin: 0;
       }
     }
   }
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/src/components/settings_modal/tabs/style_tab/style_tab.vue
index 9951849a..704cdc1b 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.vue
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -271,14 +271,14 @@
             id="palette-selector"
             v-model="editedPalette"
             class="palette-list"
-            size="10"
+            size="9"
           >
             <option
               v-for="(p, index) in palettes"
-              :key="p"
+              :key="p.name"
               :value="index"
             >
-              {{ p }}
+              {{ p.name }}
             </option>
           </Select>
           <SelectMotion
@@ -286,9 +286,12 @@
             v-model="palettes"
             :selected-id="editedPalette"
             :get-add-value="getNewPalette"
-            @update:selectedId="e => editecPalette = e"
+            @update:selectedId="e => editedPalette = e"
           />
-        <PaletteEditor v-model="palette" />
+        <PaletteEditor
+          class="palette-editor-edit"
+          v-model="palette"
+        />
       </div>
     </tab-switcher>
   </div>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index b5628be4..b7ee0984 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -760,8 +760,6 @@
           "label": "Palette",
           "import": "Import",
           "export": "Export",
-          "dark": "Dark mode",
-          "light": "Light mode",
           "bg": "Panel background",
           "fg": "Buttons etc.",
           "text": "Text",