diff --git a/package.json b/package.json
index e6635e9..aaeeb76 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
   "dependencies": {
     "@codemirror/lang-css": "^6.0.0",
     "@codemirror/theme-one-dark": "^6.0.0",
+    "@headlessui/vue": "1.7.23",
     "axios": "^0.28.0",
     "codemirror": "^6.0.0",
     "vue": "^3.2.25"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e0cbb82..87fc63f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
       '@codemirror/theme-one-dark':
         specifier: ^6.0.0
         version: 6.0.0
+      '@headlessui/vue':
+        specifier: 1.7.23
+        version: 1.7.23(vue@3.2.37)
       axios:
         specifier: ^0.28.0
         version: 0.28.0
@@ -97,6 +100,12 @@ packages:
   '@codemirror/view@6.0.1':
     resolution: {integrity: sha512-n5olUr4Ld+XDTZN8+cnUHzkqJPeO2kr55HvBQ+4C1xWlDaRGrsedAoxCgeuGZsXRTUup/H/0e2kAN+a0R3skdA==}
 
+  '@headlessui/vue@1.7.23':
+    resolution: {integrity: sha512-JzdCNqurrtuu0YW6QaDtR2PIYCKPUWq28csDyMvN4zmGccmE7lz40Is6hc3LA4HFeCI7sekZ/PQMTNmn9I/4Wg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      vue: ^3.2.0
+
   '@lezer/common@1.0.0':
     resolution: {integrity: sha512-ohydQe+Hb+w4oMDvXzs8uuJd2NoA3D8YDcLiuDsLqH+yflDTPEpgCsWI3/6rH5C3BAedtH1/R51dxENldQceEA==}
 
@@ -109,6 +118,14 @@ packages:
   '@lezer/lr@1.0.0':
     resolution: {integrity: sha512-k6DEqBh4HxqO/cVGedb6Ern6LS7K6IOzfydJ5WaqCR26v6UR9sIFyb6PS+5rPUs/mXgnBR/QQCW7RkyjSCMoQA==}
 
+  '@tanstack/virtual-core@3.17.8':
+    resolution: {integrity: sha512-BfEvehNpOT75r5Ksc5xW6NZuXujTfb7nlSEyVu4XHG3gdxNg1KqXruWbDewXOUaUYIo4oRbSfkjIajz4MAT8tA==}
+
+  '@tanstack/vue-virtual@3.13.36':
+    resolution: {integrity: sha512-gKpExv4RbB9luVG+SucTXoqPZv/gzu/Yvz6BNO+8kpNxJ2x+I/ulryzl5W9BRciahZGp5Tls3Dp5XP1ztVGbMw==}
+    peerDependencies:
+      vue: ^2.7.0 || ^3.0.0
+
   '@types/less@3.0.3':
     resolution: {integrity: sha512-1YXyYH83h6We1djyoUEqTlVyQtCfJAFXELSKW2ZRtjHD4hQ82CC4lvrv5D0l0FLcKBaiPbXyi3MpMsI9ZRgKsw==}
 
@@ -566,6 +583,11 @@ snapshots:
       style-mod: 4.0.0
       w3c-keyname: 2.2.4
 
+  '@headlessui/vue@1.7.23(vue@3.2.37)':
+    dependencies:
+      '@tanstack/vue-virtual': 3.13.36(vue@3.2.37)
+      vue: 3.2.37
+
   '@lezer/common@1.0.0': {}
 
   '@lezer/css@1.0.0':
@@ -581,6 +603,13 @@ snapshots:
     dependencies:
       '@lezer/common': 1.0.0
 
+  '@tanstack/virtual-core@3.17.8': {}
+
+  '@tanstack/vue-virtual@3.13.36(vue@3.2.37)':
+    dependencies:
+      '@tanstack/virtual-core': 3.17.8
+      vue: 3.2.37
+
   '@types/less@3.0.3': {}
 
   '@types/node@16.11.41': {}
diff --git a/src/App.vue b/src/App.vue
index e3b4774..10e7e38 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,6 +4,10 @@ import { utoa, atou, LESS_DATA } from './utils'
 import Header from '@components/Header.vue'
 import Editor from '@components/Editor.vue'
 import Layout from '@components/Layout.vue'
+import Select from '@components/Select.vue'
+import { Switch } from '@headlessui/vue'
+
+const mathOptions = ['always', 'parens-division', 'parens'].map(value => ({ value }))
 
 let input = $ref(LESS_DATA)
 let output = $ref<string | undefined>('')
@@ -76,20 +80,18 @@ onMounted(() => {
     </template>
     <template #options>
       <h3>Options</h3>
-      <div>
-        <label>Math mode</label>
-        <select v-model="store.math">
-          <option>always</option>
-          <option>parens-division</option>
-          <option>parens</option>
-        </select>
+      <div class="option">
+        <span>Math mode</span>
+        <Select v-model="store.math" :options="mathOptions" />
       </div>
-      
-      <label>
-        <input type="checkbox" v-model="store.strictUnits" />
+      <Switch
+        v-model="store.strictUnits"
+        class="option switch"
+        :class="{ on: store.strictUnits }"
+      >
         <span>Strict units</span>
-      </label>
-      
+        <span class="switch-track" aria-hidden="true"><span class="switch-thumb"></span></span>
+      </Switch>
     </template>
     <template #preview>
       <editor v-model:value="output" readOnly />
@@ -102,16 +104,17 @@ onMounted(() => {
   </Layout>
 </template>
 <style lang="less">
+@import './theme.less';
+
 html,
 body {
   margin: 0;
   font-family: system-ui, sans-serif;
 }
 
-@base: #35495e;
-
 body {
   background: @base;
+  color: @text;
 }
 
 *,
@@ -130,13 +133,73 @@ body {
   }
 }
 
+.options {
+  h3 {
+    font-family: @font;
+    font-weight: 300;
+    letter-spacing: 1px;
+    color: white;
+  }
+  .option {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    font-size: 14px;
+    color: @muted;
+  }
+  .switch {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    background: none;
+    border: none;
+    padding: 0;
+    font: inherit;
+    color: @muted;
+    cursor: pointer;
+    &:focus-visible .switch-track {
+      outline: 2px solid @accent;
+      outline-offset: 1px;
+    }
+  }
+  .switch-track {
+    position: relative;
+    width: 36px;
+    height: 20px;
+    border-radius: 10px;
+    background: darken(@base, 10%);
+    border: 1px solid lighten(@base, 12%);
+    transition: background 0.15s;
+  }
+  .switch-thumb {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: @muted;
+    transition: transform 0.15s, background 0.15s;
+  }
+  .switch.on {
+    .switch-track {
+      background: @accent;
+      border-color: @accent;
+    }
+    .switch-thumb {
+      background: white;
+      transform: translateX(16px);
+    }
+  }
+}
+
 .error {
   color: hsl(10, 89%, 78%);
   background: hsl(10, 89%, 26%);
-  height: 28px;
-  padding: 2px 8px;
-  position: relative;
-  top: -6px;
-  animation: opac 1s;
+  border-top: 1px solid @border;
+  padding: 6px 12px;
+  font-size: 14px;
+  font-family: @font;
+  animation: opac 0.3s;
 }
 </style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 6ac820e..87326ab 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,16 +1,20 @@
 <script setup lang="ts">
 import axios from "axios";
+import Select from "./Select.vue";
 const props = defineProps(["store"]);
 const { store } = props;
 
 const baseVersionUrl = "https://cdn.jsdelivr.net/npm/less@";
 let activeVersion = $ref("");
 let publishedVersions = $ref<string[]>();
-let expanded = $ref(false);
 let showTipFlag = $ref(false);
 let versionSelectFail = $ref(false);
 const emit = defineEmits(["updateVue", 'upLoadingLessJS']);
 let majorMinorSet = new Set<string>()
+const versionLabel = (v: string) => v.includes("-") ? `${v} (experimental)` : v;
+const versionOptions = $computed(() =>
+  (publishedVersions ?? []).map((v) => ({ value: v, label: versionLabel(v) }))
+);
 
 async function fetchVersions() {
   let { data } = await axios.get(
@@ -104,10 +108,6 @@ function showTip() {
   }, 2000);
 }
 
-async function toggle() {
-  expanded = !expanded;
-}
-
 async function setLessVersion(v: string) {
   activeVersion = v;
   store.activeVersion = v;
@@ -144,26 +144,17 @@ init();
     </transition>
     <div class="toolbar">
       <div class="version-select">
-        Version:
-        <!--
-          TODO - use a plain select box instead of this one which has
-          weird / non-standard behavior.
-        -->
-        <div class="version-select-click" @click.stop @click="toggle">
-          <span class="active-version">
-            {{ activeVersion }}{{ activeVersion.includes("-") ? " (experimental)" : "" }}
-          </span>
-          <ul v-if="expanded" class="versions">
-            <li v-for="(item, index) in publishedVersions" :key="index">
-              <a @click="setLessVersion(item)">{{ item }}{{ item.includes("-") ? " (experimental)" : "" }}</a>
-            </li>
-          </ul>
-        </div>
+        <span>Version</span>
+        <Select
+          :modelValue="activeVersion"
+          :options="versionOptions"
+          @update:modelValue="setLessVersion"
+        />
       </div>
-      <button title="CopyLink" class="github button iconfont" @click="copyLink">
+      <button title="CopyLink" class="control button iconfont" @click="copyLink">
         &#xe616;
       </button>
-      <button title="Go to less-preview repo" class="github button">
+      <button title="Go to less-preview repo" class="control button">
         <a
           href="https://github.com/less/less-preview"
           target="_blank"
@@ -171,7 +162,7 @@ init();
           >&#xe885;
         </a>
       </button>
-      <button title="Go to less issue" class="github button">
+      <button title="Go to less issue" class="control button">
         <a
           href="https://github.com/less/less.js/issues"
           target="_blank"
@@ -184,194 +175,113 @@ init();
 </template>
 
 <style lang="less">
-@base: #35495e;
+@import (reference) "../theme.less";
 @font-face {
   font-family: "iconfont";
   src: url("../assets/iconfont.ttf") format("truetype");
 }
 .titlebar {
   position: relative;
+  z-index: 10;
   background: lighten(@base, 5);
   height: 40px;
-  border: 1px solid hsla(210, 20%, 10%, 0.5);
+  border: 1px solid @border;
   display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  padding: 0 8px;
+  font-family: @font;
+  color: white;
   .logo {
-    position: absolute;
-    display: inline-block;
+    flex: none;
     width: 52.8px;
     height: 23.4px;
-    background-image: url("../assets/less_logo.png");
+    background: url("../assets/less_logo.png") no-repeat;
     background-size: 52.8px 23.4px;
-    background-repeat: no-repeat;
-    margin-left: 3px;
-    margin-top: 8px;
   }
 
   .title {
-    font-family: "Quicksand", "Source Sans Pro", -apple-system,
-      BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
-      sans-serif; /* 1 */
+    flex: 1;
     font-weight: 300;
     font-size: 18px;
-    color: white;
     letter-spacing: 1px;
-    padding: 8px 16px;
-    margin-left: 54px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
   @media (max-width: 720px) {
     .title {
       font-size: 0.8em;
     }
   }
-
   @media (max-width: 640px) {
     .title {
       display: none;
     }
+    .toolbar {
+      margin-left: auto;
+    }
   }
+
   .version-select-tips {
     position: fixed;
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
-    width: 450px;
-    z-index: 100;
-    font-family: "Quicksand", "Source Sans Pro", -apple-system,
-      BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
-      sans-serif;
-    display: block;
-    font-weight: 300;
-    font-size: 18px;
-    letter-spacing: 1px;
-    margin-top: 6px;
-    line-height: 18px;
+    z-index: 300;
+    padding: 8px 16px;
+    border-radius: @radius;
+    font-size: 15px;
+    letter-spacing: 0.5px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
     .version-select-tips-error {
-      width: 100%;
-      height: 100%;
-      padding: 6px 16px;
-      border-radius: 3px;
       color: #f26b6e;
-      background-color: #fef0f0;
     }
     .version-select-tips-success {
-      width: 100%;
-      height: 100%;
-      padding: 6px 16px;
-      border-radius: 3px;
-      color: #6bc247;
-      background-color: #e2f3d9;
-    }
-  }
-    @media (max-width: 560px) {
-    .toolbar {
-      font-size: 0.8em;
+      color: @accent;
     }
+    background: @panel;
+    border: 1px solid @border;
   }
 
-  @media (max-width: 640px) {
-    .toolbar {
-          margin-left:54PX;
-    }
-  }
   .toolbar {
-    width: 25rem;
-    z-index: 100;
-    font-family: "Quicksand", "Source Sans Pro", -apple-system,
-      BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
-      sans-serif;
-    display: block;
-    font-weight: 300;
-    font-size: 18px;
-    color: white;
-    letter-spacing: 1px;
-    padding: 4px 10px;
-    height: 25px;
-    line-height: 25px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 14px;
     .version-select {
-      display: inline-block;
-      cursor: default;
-      .version-select-click {
-        position: relative;
-        color: black;
-        background-color: #e6e8eb;
-        display: inline-block;
-        margin-right: 12px;
-        width: 200px;
-        height: 25px;
-        line-height: 25px;
-        .active-version {
-          cursor: pointer;
-          position: relative;
-          display: inline-block;
-          vertical-align: middle;
-          width: 100%;
-          line-height: 25px;
-          padding-left: 5px;
-          &:after {
-            content: "";
-            width: 0;
-            height: 0;
-            border-left: 8px solid transparent;
-            border-right: 8px solid transparent;
-            border-top: 12px solid #aaa;
-            position: absolute;
-            right: 2px;
-            top: 6px;
-          }
-        }
-        .versions {
-          position: absolute;
-          left: 0;
-          top: 40px;
-          background-color: #fff;
-          border: 1px solid #ddd;
-          border-radius: 4px;
-          list-style-type: none;
-          padding: 8px;
-          margin: 0;
-          width: 200px;
-          max-height: calc(100vh - 70px);
-          overflow: scroll;
-          background-color: #e6e8eb;
-          a {
-            display: block;
-            padding: 6px 12px;
-            text-decoration: none;
-            cursor: pointer;
-            color: var(--base);
-            &:hover {
-              color: #3ca877;
-            }
-          }
-        }
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin: 0;
+      padding: 0;
+      .select {
+        width: 14rem;
       }
     }
-    .github {
+    .button {
+      width: 28px;
+      height: 28px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      cursor: pointer;
       a {
         text-decoration: none;
-        color: #fff;
-      }
-    }
-    .button {
-      display: inline-block;
-      width: 20px;
-      height: 20px;
-      cursor: default;
-      margin-left: 1px;
-      margin-right: 2px;
-      text-decoration: none;
-      color: #fff;
-      background: none;
-      border: none;
-      text-align:center;
-      &:hover {
-        font-weight: 600;
+        color: inherit;
       }
     }
   }
 }
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.15s;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
 .iconfont {
   font-family: "iconfont" !important;
   font-size: 16px;
diff --git a/src/components/Layout.vue b/src/components/Layout.vue
index bcf1f8a..ec3cecf 100644
--- a/src/components/Layout.vue
+++ b/src/components/Layout.vue
@@ -24,17 +24,17 @@
   </section>
 </template>
 <style lang="less">
+@import (reference) '../theme.less';
+
 .container {
   position: relative;
   height: calc(100vh - 40px);
   display: flex;
   flex-direction: column;
-  justify-content: space-evenly;
 }
 .body {
   overflow: hidden;
   display: flex;
-  justify-content: stretch;
   align-items: stretch;
   gap: 6px;
   padding: 6px;
@@ -43,17 +43,19 @@
 
 .editor {
   flex: 5;
-  border: 1px solid hsl(190, 10%, 50%);
+  min-width: 0;
+  border: 1px solid @border;
+  border-radius: @radius;
+  overflow: hidden;
 }
 
 .options {
-  border: 1px solid hsl(190, 10%, 50%);
-  background: darken(#35495e, 5%);
+  border: 1px solid @border;
+  border-radius: @radius;
+  background: @panel;
   flex: 2;
   display: none;
-  color: #ddd;
   padding: 12px;
-  display: flex;
   flex-direction: column;
   gap: 16px;
   > * {
@@ -64,49 +66,7 @@
   }
 }
 
-label {
-  display: flex;
-  gap: 4px;
-  span {
-    flex: 1;
-  }
-  padding-bottom: 3px;
-}
-
-select {
-  width: 100%;
-}
-
 .footer {
   width: 100%;
 }
-.loading {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background-color: #f2efef;
-  @keyframes identifier {
-    0%{
-      transform: rotate(0deg) ;
-    }
-    100%{
-      transform: rotate(360deg);
-    }
-  }
-  .loadingCircle{
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    margin-left: -5rem;
-    margin-top: -5rem;
-    width: 10rem;
-    height: 10rem;
-    border: 1px solid #91abe3;
-    border-left: 2px solid #91abe3;
-    border-radius: 50%;
-    animation: identifier 0.6s linear infinite forwards;
-  }
-}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Select.vue b/src/components/Select.vue
new file mode 100644
index 0000000..53bf65c
--- /dev/null
+++ b/src/components/Select.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue'
+
+interface Option {
+  value: string
+  label?: string
+}
+defineProps<{ modelValue?: string | number; options: Option[] }>()
+defineEmits<(e: 'update:modelValue', value: string) => void>()
+</script>
+
+<template>
+  <Listbox
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    as="div"
+    class="select"
+    v-slot="{ open }"
+  >
+    <ListboxButton class="control select-button" :class="{ open }">
+      <span class="select-label">
+        {{ options.find(o => o.value === modelValue)?.label ?? modelValue }}
+      </span>
+      <span class="select-caret" aria-hidden="true"></span>
+    </ListboxButton>
+    <ListboxOptions class="select-options">
+      <ListboxOption
+        v-for="o in options"
+        :key="o.value"
+        :value="o.value"
+        v-slot="{ active, selected }"
+      >
+        <li class="select-option" :class="{ active, selected }">
+          {{ o.label ?? o.value }}
+        </li>
+      </ListboxOption>
+    </ListboxOptions>
+  </Listbox>
+</template>
+
+<style lang="less">
+@import (reference) '../theme.less';
+
+.select {
+  position: relative;
+  display: inline-block;
+  min-width: 10rem;
+  width: 100%;
+  font-size: 14px;
+  text-align: left;
+}
+.select-button {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  cursor: pointer;
+  &.open {
+    border-color: @accent;
+  }
+}
+.select-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.select-caret {
+  flex: none;
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 6px solid @muted;
+}
+.select-options {
+  position: absolute;
+  left: 0;
+  top: calc(100% + 4px);
+  z-index: 200;
+  width: 100%;
+  max-height: calc(100vh - 80px);
+  overflow: auto;
+  margin: 0;
+  padding: 4px;
+  list-style: none;
+  background: @panel;
+  border: 1px solid @border;
+  border-radius: @radius;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  &:focus {
+    outline: none;
+  }
+}
+.select-option {
+  padding: 6px 10px;
+  border-radius: @radius;
+  cursor: pointer;
+  color: @text;
+  white-space: nowrap;
+  &.active {
+    background: lighten(@base, 12%);
+  }
+  &.selected {
+    color: @accent;
+    font-weight: 600;
+  }
+}
+</style>
diff --git a/src/theme.less b/src/theme.less
new file mode 100644
index 0000000..dfc55b7
--- /dev/null
+++ b/src/theme.less
@@ -0,0 +1,27 @@
+// Shared palette + control base. Imported (reference) by every component's <style>.
+@base: #35495e;
+@panel: darken(@base, 5%);
+@border: hsla(210, 20%, 10%, 0.5);
+@text: #e6e8eb;
+@muted: #9aa8b8;
+@accent: #3ca877;
+@radius: 4px;
+@font: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont,
+  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+
+.control {
+  font: inherit;
+  color: @text;
+  background: darken(@base, 10%);
+  border: 1px solid lighten(@base, 12%);
+  border-radius: @radius;
+  padding: 4px 10px;
+  line-height: 1.4;
+  &:hover {
+    border-color: lighten(@base, 25%);
+  }
+  &:focus-visible {
+    outline: 2px solid @accent;
+    outline-offset: 1px;
+  }
+}
diff --git a/src/utils.ts b/src/utils.ts
index fbc41f0..2c50558 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,29 +1,29 @@
 export function utoa(data: string): string {
-    return btoa(unescape(encodeURIComponent(data)))
+  return btoa(unescape(encodeURIComponent(data)))
 }
-  
+
 export function atou(base64: string): string {
-    return decodeURIComponent(escape(atob(base64)))
+  return decodeURIComponent(escape(atob(base64)))
 }
 
 export const LESS_DATA = `#lib() {
-    .colors() {
-      @primary: blue;
-      @secondary: green;
-    }
-    .rules(@size) {
-      border: @size solid white;
-    }
+  .colors() {
+    @primary: blue;
+    @secondary: green;
+  }
+  .rules(@size) {
+    border: @size solid white;
   }
-  
-  .box when (#lib.colors[@primary] = blue) {
-    width: 100px;
-    height: ($width / 2);
+}
+
+.box when (#lib.colors[@primary] = blue) {
+  width: 100px;
+  height: ($width / 2);
+}
+
+.bar:extend(.box) {
+  @media (min-width: 600px) {
+    width: 200px;
+    #lib.rules(1px);
   }
-  
-  .bar:extend(.box) {
-    @media (min-width: 600px) {
-      width: 200px;
-      #lib.rules(1px);
-    }
-  }`
\ No newline at end of file
+}`