diff --git a/app/components/Canvas.vue b/app/components/Canvas.vue
index 396187e..8a3a37a 100644
--- a/app/components/Canvas.vue
+++ b/app/components/Canvas.vue
@@ -131,7 +131,7 @@ const props = defineProps({
     themeType: { type: String, default: 'dark' },
 });
 
-const emit = defineEmits(['update:width', 'update:height']);
+const emit = defineEmits(['update:width', 'update:height', 'resize-start', 'resize-end']);
 
 const x = ref(null);
 const y = ref(null);
@@ -155,6 +155,10 @@ const { zoom, aspectRatio } = toRefs(props);
 let resizeObserver = null;
 let observedSceneWindow = null;
 let sceneMetricsRequest = null;
+let resizeRequest = null;
+let pendingResize = null;
+let resizeScaleX = 1;
+let resizeScaleY = 1;
 
 const ratio = computed(() => {
     if (aspectRatio.value) {
@@ -182,22 +186,55 @@ function onResizeStart(event) {
 
     resizingWidth.value = hasWidth || !!ratio.value;
     resizingHeight.value = hasHeight || !!ratio.value;
+
+    const container = event.target.parentNode;
+    const containerRect = container.getBoundingClientRect();
+
+    resizeScaleX = containerRect.width / container.offsetWidth || 1;
+    resizeScaleY = containerRect.height / container.offsetHeight || 1;
+
+    emit('resize-start');
 }
 
 function onResizeEnd() {
+    flushResize();
+
     resizingWidth.value = false;
     resizingHeight.value = false;
+
+    emit('resize-end');
 }
 
 function onResize(event) {
-    const container = event.target.parentNode;
-    if (event.rect.width) {
-        const scaleX = container.getBoundingClientRect().width / container.offsetWidth;
-        emit('update:width', event.rect.width / scaleX);
+    pendingResize = {
+        width: event.rect.width,
+        height: event.rect.height,
+    };
+
+    if (!resizeRequest) {
+        resizeRequest = requestAnimationFrame(flushResize);
+    }
+}
+
+function flushResize() {
+    if (resizeRequest) {
+        cancelAnimationFrame(resizeRequest);
+        resizeRequest = null;
+    }
+
+    if (!pendingResize) {
+        return;
+    }
+
+    const { width, height } = pendingResize;
+    pendingResize = null;
+
+    if (width) {
+        emit('update:width', width / resizeScaleX);
     }
-    if (event.rect.height) {
-        const scaleY = container.getBoundingClientRect().height / container.offsetHeight;
-        emit('update:height', event.rect.height / scaleY);
+
+    if (height) {
+        emit('update:height', height / resizeScaleY);
     }
 }
 
@@ -271,6 +308,10 @@ onBeforeUnmount(() => {
         cancelAnimationFrame(sceneMetricsRequest);
     }
 
+    if (resizeRequest) {
+        cancelAnimationFrame(resizeRequest);
+    }
+
     resizeObserver?.disconnect();
 });
 </script>
diff --git a/app/components/Editor.vue b/app/components/Editor.vue
index b6a10d8..152c70d 100644
--- a/app/components/Editor.vue
+++ b/app/components/Editor.vue
@@ -147,8 +147,6 @@
             <Monaco
                 ref="monaco"
                 class="size-full"
-                :width="width"
-                :height="height"
                 :value="modelValue"
                 :added="added"
                 :removed="removed"
@@ -174,8 +172,7 @@ import {
     ArrowDownIcon,
     CreditCardIcon,
 } from 'lucide-vue-next';
-import { ref, watch, toRefs, computed, onMounted, onUnmounted } from 'vue';
-import { useResizeObserver } from '@vueuse/core';
+import { ref, toRefs, computed, onUnmounted } from 'vue';
 
 const props = defineProps({
     id: { type: String, required: true },
@@ -211,8 +208,6 @@ const { sizes, orientation, language } = toRefs(props);
 const { $bus, $shiki } = useNuxtApp();
 const { options: languageOptions } = useLanguages();
 
-const width = ref(0);
-const height = ref(0);
 const root = ref(null);
 const toolbar = ref(null);
 
@@ -225,20 +220,5 @@ const languageAlias = computed(
         language.value
 );
 
-function updateMonacoDimensions() {
-    if (root.value && root.value.offsetParent) {
-        width.value = root.value.clientWidth;
-        height.value = root.value.clientHeight;
-    }
-}
-
-useResizeObserver(document.body, updateMonacoDimensions);
-
-onMounted(() => {
-    updateMonacoDimensions();
-    watch([sizes, orientation], updateMonacoDimensions);
-    $bus.$on('editors:refresh', updateMonacoDimensions);
-});
-
 onUnmounted(() => $bus.$emit('editors:refresh'));
 </script>
diff --git a/app/components/Monaco.vue b/app/components/Monaco.vue
index 8b38919..16593c0 100644
--- a/app/components/Monaco.vue
+++ b/app/components/Monaco.vue
@@ -1,5 +1,5 @@
 <template>
-    <div ref="root" :style="{ height: `${height}px` }"></div>
+    <div ref="root" class="w-full" :style="{ height: height ? `${height}px` : '100%' }"></div>
 </template>
 
 <script setup>
@@ -8,6 +8,7 @@ import { storeToRefs } from 'pinia';
 import { useResizeObserver } from '@vueuse/core';
 import { uniq, get, range, union, difference } from 'lodash';
 import useFonts from '@/composables/useFonts';
+import useMonaco from '@/composables/useMonaco';
 import useApplicationStore from '@/composables/useApplicationStore';
 import usePreferencesStore from '@/composables/usePreferencesStore';
 
@@ -25,7 +26,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'update:added', 'update:removed', 'update:focused']);
 
-const { language, tabSize, value, width, height, added, removed, focused } = toRefs(props);
+const { language, tabSize, value, height, added, removed, focused } = toRefs(props);
 
 const { $bus } = useNuxtApp();
 
@@ -34,6 +35,7 @@ const editor = shallowRef(null);
 const monacoRef = shallowRef(null);
 
 const { fontFamilies } = useFonts();
+const { prepare, loadLanguage, loadTheme } = useMonaco();
 
 const addedLineDecos = ref([]);
 const removedLineDecos = ref([]);
@@ -51,7 +53,11 @@ const {
     editorFontSize: fontSize,
 } = storeToRefs(usePreferencesStore());
 
+let layoutFrame = null;
+
 function updateLayout() {
+    layoutFrame = null;
+
     if (root.value && root.value.offsetParent && editor.value) {
         editor.value.layout({
             width: root.value.clientWidth,
@@ -60,6 +66,14 @@ function updateLayout() {
     }
 }
 
+function scheduleLayout() {
+    if (layoutFrame) {
+        cancelAnimationFrame(layoutFrame);
+    }
+
+    layoutFrame = requestAnimationFrame(updateLayout);
+}
+
 function makeDecoration(range, type) {
     return {
         options: {
@@ -74,7 +88,7 @@ function selectionToRange(selection) {
     return range(selection.startLineNumber, selection.endLineNumber + 1);
 }
 
-useResizeObserver(root, updateLayout);
+useResizeObserver(root, scheduleLayout);
 
 const fontFamily = computed(() => {
     const font = fontFamilies.value.find((font) => font.name === editorFontFamily.value);
@@ -112,33 +126,10 @@ const makeDecosCallback = (className, decoRef) => (lines) => {
 };
 
 onMounted(async () => {
-    self.MonacoEnvironment = {
-        getWorker: () =>
-            new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url), {
-                type: 'module',
-            }),
-    };
-
-    const monaco = await import('monaco-editor');
+    const activeTheme = isDarkMode.value ? editorDarkTheme.value : editorLightTheme.value;
+    const monaco = await prepare({ language: language.value, theme: activeTheme });
     monacoRef.value = monaco;
 
-    // Load themes
-    const themeList = (await import('../data/monaco-themes/themelist.json')).default;
-
-    const themeLoaders = import.meta.glob(
-        ['../data/monaco-themes/*.json', '!../data/monaco-themes/themelist.json'],
-        { import: 'default' }
-    );
-
-    await Promise.all(
-        Object.keys(themeList).map(async (theme) => {
-            const loader = themeLoaders[`../data/monaco-themes/${themeList[theme]}.json`];
-            if (loader) {
-                monaco.editor.defineTheme(theme, await loader());
-            }
-        })
-    );
-
     if (!root.value || !root.value.isConnected) return;
 
     editor.value = monaco.editor.create(root.value, {
@@ -156,7 +147,7 @@ onMounted(async () => {
         renderLineHighlight: false,
         scrollBeyondLastLine: false,
         lineNumbersMinChars: 6,
-        theme: isDarkMode.value ? editorDarkTheme.value : editorLightTheme.value,
+        theme: activeTheme,
     });
 
     document.fonts.ready.then(() => monaco.editor.remeasureFonts());
@@ -193,13 +184,17 @@ onMounted(async () => {
         }
     });
 
-    $bus.$on('editors:refresh', updateLayout);
+    $bus.$on('editors:refresh', scheduleLayout);
 
-    watch(isDarkMode, (enabled) => {
-        monaco.editor.setTheme(enabled ? editorDarkTheme.value : editorLightTheme.value);
+    watch(isDarkMode, async (enabled) => {
+        const theme = enabled ? editorDarkTheme.value : editorLightTheme.value;
+
+        await loadTheme(theme);
+        monaco.editor.setTheme(theme);
     });
 
-    watch(language, (lang) => {
+    watch(language, async (lang) => {
+        await loadLanguage(lang);
         monaco.editor.setModelLanguage(editor.value.getModel(), lang);
     });
 
@@ -238,14 +233,20 @@ onMounted(async () => {
         });
     });
 
-    watch([width, height], updateLayout);
+    watch(height, scheduleLayout);
+
+    watch(editorDarkTheme, async (theme) => {
+        if (!isDarkMode.value) return;
 
-    watch(editorDarkTheme, (theme) => {
-        if (isDarkMode.value) monaco.editor.setTheme(theme);
+        await loadTheme(theme);
+        monaco.editor.setTheme(theme);
     });
 
-    watch(editorLightTheme, (theme) => {
-        if (!isDarkMode.value) monaco.editor.setTheme(theme);
+    watch(editorLightTheme, async (theme) => {
+        if (isDarkMode.value) return;
+
+        await loadTheme(theme);
+        monaco.editor.setTheme(theme);
     });
 
     watch(added, makeDecosCallback('added', addedLineDecos), { immediate: true });
@@ -253,7 +254,14 @@ onMounted(async () => {
     watch(focused, makeDecosCallback('focused', focusedLineDecos), { immediate: true });
 });
 
-onBeforeUnmount(() => editor.value?.dispose());
+onBeforeUnmount(() => {
+    if (layoutFrame) {
+        cancelAnimationFrame(layoutFrame);
+    }
+
+    $bus.$off('editors:refresh', scheduleLayout);
+    editor.value?.dispose();
+});
 </script>
 
 <style>
diff --git a/app/components/Preview.vue b/app/components/Preview.vue
index 9b3bec0..1aadf9f 100644
--- a/app/components/Preview.vue
+++ b/app/components/Preview.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="bg-pattern relative bg-white dark:bg-black">
+    <div class="bg-pattern relative bg-white dark:bg-black" :class="{ 'is-resizing': resizing }">
         <ModalCustomBackground
             v-model="showingBackgroundsModal"
             :blocks="blocks"
@@ -50,6 +50,8 @@
                     :theme-type="settings.themeType"
                     @update:width="setWidth($event)"
                     @update:height="setHeight($event)"
+                    @resize-start="resizing = true"
+                    @resize-end="resizing = false"
                 >
                     <template #default="{ sceneGutters }">
                         <Window
@@ -191,7 +193,6 @@
 import download from 'downloadjs';
 import { cloneDeep, debounce } from 'lodash';
 import { UAParser } from 'ua-parser-js';
-import * as htmlToImage from 'html-to-image';
 import {
     ShareIcon,
     ZoomInIcon,
@@ -283,8 +284,12 @@ const {
 } = toRefs(settings);
 
 const hasScene = computed(() => settings.scene && settings.scene !== 'none');
+let tokenGeneration = 0;
+let htmlToImagePromise = null;
 
 function generateTokens() {
+    const generation = ++tokenGeneration;
+
     return buildCodeBlocks(
         {
             code: code.value,
@@ -293,6 +298,10 @@ function generateTokens() {
             opacity: themeOpacity.value,
         },
         ({ blocks: code, themeType: type, themeBackground: bg }) => {
+            if (generation !== tokenGeneration) {
+                return;
+            }
+
             blocks.value = code;
             themeType.value = type;
             themeBackground.value = bg;
@@ -300,13 +309,17 @@ function generateTokens() {
     );
 }
 
-function generateImageFromPreview(method, pixelRatio = 3) {
+async function generateImageFromPreview(method, pixelRatio = 3) {
     const filter = (node) => !(node.dataset && node.dataset.hasOwnProperty('hide'));
 
     if (!canvas.value?.$el) {
         return;
     }
 
+    htmlToImagePromise ??= import('html-to-image');
+
+    const htmlToImage = await htmlToImagePromise;
+
     return htmlToImage[method](canvas.value.$el, {
         filter,
         pixelRatio,
@@ -323,6 +336,8 @@ async function generateTemplateImage() {
 
 async function flushProjectPreview() {
     templateGenerationDebounce?.cancel();
+    cancelScheduledTemplateGeneration();
+    emitSettingsUpdate.cancel();
 
     await generateTokens();
     await nextTick();
@@ -447,23 +462,67 @@ const backgroundAttrs = computed(() => {
 });
 
 let templateGenerationDebounce = null;
+let templateGenerationIdle = null;
+let templateGenerationIdleType = null;
+
+const generateTokensDebounced = debounce(generateTokens, 150);
+const emitSettingsUpdate = debounce((values) => emit('update:settings', cloneDeep(values)), 250, {
+    maxWait: 1000,
+});
+
+function cancelScheduledTemplateGeneration() {
+    if (!templateGenerationIdle) {
+        return;
+    }
+
+    if (templateGenerationIdleType === 'idle') {
+        cancelIdleCallback(templateGenerationIdle);
+    } else {
+        clearTimeout(templateGenerationIdle);
+    }
+
+    templateGenerationIdle = null;
+    templateGenerationIdleType = null;
+}
 
-watch(settings, (values) => emit('update:settings', values));
+function scheduleTemplateGeneration() {
+    cancelScheduledTemplateGeneration();
+
+    const generate = () => {
+        templateGenerationIdle = null;
+        templateGenerationIdleType = null;
+        generateTemplateImage();
+    };
+
+    if (typeof requestIdleCallback === 'function') {
+        templateGenerationIdleType = 'idle';
+        templateGenerationIdle = requestIdleCallback(generate, { timeout: 2500 });
+        return;
+    }
+
+    templateGenerationIdleType = 'timeout';
+    templateGenerationIdle = setTimeout(generate, 1500);
+}
+
+watch(settings, emitSettingsUpdate);
 
 onMounted(() => {
     nextTick(() => createPanZoom(preview));
 
     generateTokens();
-    generateTemplateImage();
+    scheduleTemplateGeneration();
 
     // Our code will change quickly. We will make
     // sure to debounce the token generation
     // so performance doesn't take a hit.
-    watch(code, debounce(generateTokens, 500));
+    watch(code, generateTokensDebounced);
 
-    watch(themeOpacity, debounce(generateTokens, 500));
+    watch(themeOpacity, generateTokensDebounced);
 
-    watch([languages, themeName], generateTokens);
+    watch([languages, themeName], () => {
+        generateTokensDebounced.cancel();
+        generateTokens();
+    });
 
     watch(background, () => (backgroundColor.value = null));
 
@@ -500,7 +559,25 @@ onMounted(() => {
     );
 });
 
-onBeforeUnmount(() => templateGenerationDebounce?.cancel());
+onBeforeUnmount(() => {
+    templateGenerationDebounce?.cancel();
+    generateTokensDebounced.cancel();
+    emitSettingsUpdate.flush();
+    cancelScheduledTemplateGeneration();
+});
 
 const { aspectRatios } = useAspectRatios();
 </script>
+
+<style scoped>
+.is-resizing :deep(.backdrop-blur-xl),
+.is-resizing :deep(.backdrop-blur-md),
+.is-resizing :deep(.backdrop-blur-xs) {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+}
+
+.is-resizing :deep(.shadow-lg) {
+    box-shadow: none;
+}
+</style>
diff --git a/app/components/TabBackgrounds.vue b/app/components/TabBackgrounds.vue
index fe29ac1..b7edaae 100644
--- a/app/components/TabBackgrounds.vue
+++ b/app/components/TabBackgrounds.vue
@@ -52,7 +52,8 @@
                     :data-ref="`button-background-${id}`"
                     :active="background === id && !backgroundColor"
                     @delete="$emit('delete', id)"
-                    @click="$emit('select', id)"
+                    @mousedown.prevent
+                    @click="selectBackground($event, id)"
                 />
             </div>
         </ScrollArea>
@@ -62,7 +63,7 @@
 <script setup>
 import useBackgrounds from '@/composables/useBackgrounds';
 import { PlusCircleIcon, DropletIcon } from 'lucide-vue-next';
-import { onMounted, toRefs, watch } from 'vue';
+import { onMounted, toRefs } from 'vue';
 import useScrollRefIntoView from '@/composables/useScrollRefIntoView';
 
 const props = defineProps({
@@ -71,19 +72,18 @@ const props = defineProps({
     backgroundColor: { type: Object, required: false },
 });
 
-defineEmits(['add', 'color', 'delete', 'select']);
+const emit = defineEmits(['add', 'color', 'delete', 'select']);
 
 const { addCustomBackground } = useBackgrounds();
-const { background, backgrounds } = toRefs(props);
+const { background } = toRefs(props);
 const { scrollRefIntoView } = useScrollRefIntoView();
 
 onMounted(() => {
-    setTimeout(() => {
-        scrollRefIntoView(`button-background-${background.value}`);
-    }, 100);
-});
-
-watch(backgrounds, () => {
     scrollRefIntoView(`button-background-${background.value}`);
 });
+
+function selectBackground(event, id) {
+    event.currentTarget.focus({ preventScroll: true });
+    emit('select', id);
+}
 </script>
diff --git a/app/components/TabScenes.vue b/app/components/TabScenes.vue
index e1deda8..30e0f41 100644
--- a/app/components/TabScenes.vue
+++ b/app/components/TabScenes.vue
@@ -4,6 +4,7 @@
             <button
                 v-for="scene in scenes"
                 :key="scene.id"
+                :data-ref="`button-scene-${scene.id}`"
                 type="button"
                 class="flex w-32 flex-col items-center gap-2 rounded-xl p-1.5 text-xs font-medium text-zinc-600 transition-colors hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"
                 :class="
@@ -11,7 +12,8 @@
                         ? 'bg-zinc-200/80 text-zinc-950 ring-1 ring-violet-500 dark:bg-zinc-950 dark:text-zinc-50 dark:ring-violet-400'
                         : ''
                 "
-                @click="$emit('select', scene.id)"
+                @mousedown.prevent
+                @click="selectScene($event, scene.id)"
             >
                 <span
                     class="scene-preview relative aspect-video w-full overflow-hidden rounded-lg border border-zinc-200 dark:border-zinc-700"
@@ -47,12 +49,27 @@
 </template>
 
 <script setup>
-defineProps({
+import { onMounted, toRefs } from 'vue';
+import useScrollRefIntoView from '@/composables/useScrollRefIntoView';
+
+const props = defineProps({
     scenes: { type: Array, required: true },
     activeScene: { type: String, required: true },
 });
 
-defineEmits(['select']);
+const emit = defineEmits(['select']);
+
+const { activeScene } = toRefs(props);
+const { scrollRefIntoView } = useScrollRefIntoView();
+
+onMounted(() => {
+    scrollRefIntoView(`button-scene-${activeScene.value}`);
+});
+
+function selectScene(event, id) {
+    event.currentTarget.focus({ preventScroll: true });
+    emit('select', id);
+}
 
 function previewStyle(scene) {
     if (scene.preview.background === 'checker') {
diff --git a/app/components/TabThemes.vue b/app/components/TabThemes.vue
index d887d35..9c69c63 100644
--- a/app/components/TabThemes.vue
+++ b/app/components/TabThemes.vue
@@ -1,25 +1,36 @@
 <template>
-    <ScrollArea orientation="horizontal" force-vertical-scroll class="w-full">
-        <div class="grid auto-cols-max grid-flow-col grid-rows-2 gap-4 p-4">
-            <ButtonTheme
-                v-for="availableTheme in themes"
-                :code="code"
-                :settings="settings"
-                :languages="languages"
-                :key="availableTheme"
-                :theme="availableTheme"
-                :background="background"
-                :active="availableTheme === theme"
-                :data-ref="`button-theme-${availableTheme}`"
-                @click="$emit('select', availableTheme)"
-            />
+    <div
+        ref="viewport"
+        class="scrollbar-hide w-full overflow-x-auto"
+        @scroll.passive="scheduleVisibleRangeUpdate"
+        @wheel="onWheel"
+    >
+        <div class="relative" :style="canvasStyle">
+            <div
+                v-for="entry in visibleThemes"
+                :key="entry.theme"
+                class="absolute"
+                :style="entry.style"
+            >
+                <ButtonTheme
+                    :code="code"
+                    :settings="settings"
+                    :languages="languages"
+                    :theme="entry.theme"
+                    :background="background"
+                    :active="entry.theme === theme"
+                    :data-ref="`button-theme-${entry.theme}`"
+                    @mousedown.prevent
+                    @click="selectTheme($event, entry.theme)"
+                />
+            </div>
         </div>
-    </ScrollArea>
+    </div>
 </template>
 
 <script setup>
-import { onMounted } from 'vue';
-import useScrollRefIntoView from '@/composables/useScrollRefIntoView';
+import { computed, onBeforeUnmount, onMounted, ref, toRefs, watch } from 'vue';
+import { useResizeObserver } from '@vueuse/core';
 
 const props = defineProps({
     code: { type: Array, required: true },
@@ -30,9 +41,120 @@ const props = defineProps({
     languages: { type: Array, required: true },
 });
 
-defineEmits(['select']);
+const emit = defineEmits(['select']);
 
-const { scrollRefIntoView } = useScrollRefIntoView();
+const rows = 2;
+const cardWidth = 256;
+const cardHeight = 192;
+const gap = 16;
+const padding = 16;
+const overscan = 0;
+const columnStride = cardWidth + gap;
 
-onMounted(() => scrollRefIntoView(`button-theme-${props.theme}`));
+const { theme, themes } = toRefs(props);
+const viewport = ref(null);
+const firstVisibleColumn = ref(0);
+const lastVisibleColumn = ref(0);
+let visibleRangeFrame = null;
+
+const columnCount = computed(() => Math.ceil(themes.value.length / rows));
+
+const canvasStyle = computed(() => ({
+    width: `${padding * 2 + columnCount.value * cardWidth + Math.max(0, columnCount.value - 1) * gap}px`,
+    height: `${padding * 2 + rows * cardHeight + (rows - 1) * gap}px`,
+}));
+
+const visibleThemes = computed(() => {
+    const entries = [];
+
+    for (let column = firstVisibleColumn.value; column <= lastVisibleColumn.value; column++) {
+        for (let row = 0; row < rows; row++) {
+            const index = column * rows + row;
+            const availableTheme = themes.value[index];
+
+            if (!availableTheme) {
+                continue;
+            }
+
+            entries.push({
+                theme: availableTheme,
+                style: {
+                    left: `${padding + column * columnStride}px`,
+                    top: `${padding + row * (cardHeight + gap)}px`,
+                },
+            });
+        }
+    }
+
+    return entries;
+});
+
+function updateVisibleRange() {
+    visibleRangeFrame = null;
+
+    if (!viewport.value) {
+        return;
+    }
+
+    const start = Math.floor(Math.max(0, viewport.value.scrollLeft - padding) / columnStride);
+    const end = Math.ceil(
+        (viewport.value.scrollLeft + viewport.value.clientWidth - padding) / columnStride
+    );
+
+    firstVisibleColumn.value = Math.max(0, start - overscan);
+    lastVisibleColumn.value = Math.min(columnCount.value - 1, end + overscan);
+}
+
+function scheduleVisibleRangeUpdate() {
+    if (visibleRangeFrame) {
+        cancelAnimationFrame(visibleRangeFrame);
+    }
+
+    visibleRangeFrame = requestAnimationFrame(updateVisibleRange);
+}
+
+function scrollToTheme() {
+    if (!viewport.value) {
+        return;
+    }
+
+    const index = themes.value.indexOf(theme.value);
+
+    if (index === -1) {
+        scheduleVisibleRangeUpdate();
+        return;
+    }
+
+    const column = Math.floor(index / rows);
+    const left = padding + column * columnStride;
+
+    viewport.value.scrollLeft = Math.max(0, left - (viewport.value.clientWidth - cardWidth) / 2);
+
+    scheduleVisibleRangeUpdate();
+}
+
+function onWheel(event) {
+    if (!viewport.value || Math.abs(event.deltaX) >= Math.abs(event.deltaY)) {
+        return;
+    }
+
+    event.preventDefault();
+    viewport.value.scrollLeft += event.deltaY;
+}
+
+function selectTheme(event, selectedTheme) {
+    event.currentTarget.focus({ preventScroll: true });
+    emit('select', selectedTheme);
+}
+
+useResizeObserver(viewport, scheduleVisibleRangeUpdate);
+
+onMounted(scrollToTheme);
+watch(themes, scheduleVisibleRangeUpdate);
+
+onBeforeUnmount(() => {
+    if (visibleRangeFrame) {
+        cancelAnimationFrame(visibleRangeFrame);
+    }
+});
 </script>
diff --git a/app/composables/useMonaco.js b/app/composables/useMonaco.js
new file mode 100644
index 0000000..36a7191
--- /dev/null
+++ b/app/composables/useMonaco.js
@@ -0,0 +1,90 @@
+import themeList from '@/data/monaco-themes/themelist.json';
+
+const builtInThemes = new Set(['vs', 'vs-light', 'vs-dark', 'hc-black']);
+const loadedThemes = new Set(builtInThemes);
+
+const themeLoaders = import.meta.glob(
+    ['../data/monaco-themes/*.json', '!../data/monaco-themes/themelist.json'],
+    { import: 'default' }
+);
+
+const languageLoaders = import.meta.glob(
+    '../../node_modules/monaco-editor/esm/vs/basic-languages/*/*.contribution.js'
+);
+
+let monacoPromise = null;
+
+function loadMonaco() {
+    if (monacoPromise) {
+        return monacoPromise;
+    }
+
+    self.MonacoEnvironment = {
+        getWorker: () =>
+            new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url), {
+                type: 'module',
+            }),
+    };
+
+    monacoPromise = import('monaco-editor/esm/vs/editor/editor.api.js').then(async (monaco) => {
+        await Promise.all([
+            import('monaco-editor/esm/vs/editor/contrib/bracketMatching/browser/bracketMatching.js'),
+            import('monaco-editor/esm/vs/editor/contrib/clipboard/browser/clipboard.js'),
+            import('monaco-editor/esm/vs/editor/contrib/comment/browser/comment.js'),
+            import('monaco-editor/esm/vs/editor/contrib/contextmenu/browser/contextmenu.js'),
+            import('monaco-editor/esm/vs/editor/contrib/find/browser/findController.js'),
+            import('monaco-editor/esm/vs/editor/contrib/hover/browser/hoverContribution.js'),
+            import('monaco-editor/esm/vs/editor/contrib/indentation/browser/indentation.js'),
+            import('monaco-editor/esm/vs/editor/contrib/linesOperations/browser/linesOperations.js'),
+            import('monaco-editor/esm/vs/editor/contrib/multicursor/browser/multicursor.js'),
+            import('monaco-editor/esm/vs/editor/contrib/wordOperations/browser/wordOperations.js'),
+        ]);
+
+        return monaco;
+    });
+
+    return monacoPromise;
+}
+
+async function loadMonacoLanguage(monaco, language) {
+    if (monaco.languages.getLanguages().some(({ id }) => id === language)) {
+        return;
+    }
+
+    const suffix = `/basic-languages/${language}/${language}.contribution.js`;
+    const loader = Object.entries(languageLoaders).find(([path]) => path.endsWith(suffix))?.[1];
+
+    await loader?.();
+}
+
+async function loadMonacoTheme(monaco, theme) {
+    if (loadedThemes.has(theme)) {
+        return;
+    }
+
+    const filename = themeList[theme];
+    const loader = themeLoaders[`../data/monaco-themes/${filename}.json`];
+
+    if (!loader) {
+        return;
+    }
+
+    monaco.editor.defineTheme(theme, await loader());
+    loadedThemes.add(theme);
+}
+
+export default function () {
+    async function prepare({ language, theme }) {
+        const monaco = await loadMonaco();
+
+        await Promise.all([loadMonacoLanguage(monaco, language), loadMonacoTheme(monaco, theme)]);
+
+        return monaco;
+    }
+
+    return {
+        prepare,
+        loadLanguage: async (language) => loadMonacoLanguage(await loadMonaco(), language),
+        loadTheme: async (theme) => loadMonacoTheme(await loadMonaco(), theme),
+    };
+}
diff --git a/app/composables/useShiki.js b/app/composables/useShiki.js
index 9e666a8..ee368fe 100644
--- a/app/composables/useShiki.js
+++ b/app/composables/useShiki.js
@@ -1,16 +1,8 @@
 import hexAlpha from 'hex-alpha';
 import { defaults } from 'lodash';
 
-function yieldToMain() {
-    if (typeof requestIdleCallback === 'function') {
-        return new Promise((resolve) => requestIdleCallback(() => resolve(), { timeout: 50 }));
-    }
-
-    return new Promise((resolve) => setTimeout(resolve, 0));
-}
-
 export default function () {
-    const { $queue, $shiki } = useNuxtApp();
+    const { $shiki } = useNuxtApp();
     const { highlightLanguage } = useLanguages();
 
     const themeTypeOverrides = {
@@ -29,52 +21,24 @@ export default function () {
             theme: 'github-dark',
         });
 
-        return new Promise((resolve, reject) => {
-            $queue.push(async () => {
-                try {
-                    await yieldToMain();
-
-                    await $shiki.loadLanguages(
-                        languages.map((lang) => highlightLanguage(lang.name))
-                    );
-
-                    await yieldToMain();
-
-                    await $shiki.loadTheme(theme);
-
-                    const blocks = [];
-
-                    for (const block of code) {
-                        await yieldToMain();
-
-                        blocks.push({
-                            added: block.added,
-                            removed: block.removed,
-                            focused: block.focused,
-                            lines: await $shiki.tokens(
-                                limit
-                                    ? block.value?.split('\n').slice(0, limit).join('\n')
-                                    : block.value,
-                                findEditorLanguageById(languages, block.id),
-                                theme
-                            ),
-                        });
-                    }
-
-                    const { name, fg, bg, type } = $shiki.getTheme(theme);
-
-                    callback({
-                        blocks: blocks,
-                        themeType:
-                            themeTypeOverrides[name] ?? (name.includes('light') ? 'light' : type),
-                        themeForeground: hexAlpha(fg, parseFloat(opacity)),
-                        themeBackground: hexAlpha(bg, parseFloat(opacity)),
-                    });
-
-                    resolve();
-                } catch (e) {
-                    reject(e);
-                }
+        const sourceBlocks = code.map((block) => ({
+            value: limit ? block.value?.split('\n').slice(0, limit).join('\n') : block.value,
+            language: findEditorLanguageById(languages, block.id),
+        }));
+
+        return $shiki.tokenizeBlocks({ blocks: sourceBlocks, theme }).then((result) => {
+            const { name, fg, bg, type } = result.theme;
+
+            callback({
+                blocks: code.map((block, index) => ({
+                    added: block.added,
+                    removed: block.removed,
+                    focused: block.focused,
+                    lines: result.blocks[index],
+                })),
+                themeType: themeTypeOverrides[name] ?? (name.includes('light') ? 'light' : type),
+                themeForeground: hexAlpha(fg, parseFloat(opacity)),
+                themeBackground: hexAlpha(bg, parseFloat(opacity)),
             });
         });
     }
diff --git a/app/plugins/queue.js b/app/plugins/queue.js
deleted file mode 100644
index 33a28b8..0000000
--- a/app/plugins/queue.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Queue from 'queue';
-
-export default defineNuxtPlugin(() => {
-    return {
-        provide: {
-            queue: new Queue({
-                autostart: true,
-                concurrency: 2,
-            }),
-        },
-    };
-});
diff --git a/app/plugins/shiki.client.js b/app/plugins/shiki.client.js
index b56d9b1..8280a44 100644
--- a/app/plugins/shiki.client.js
+++ b/app/plugins/shiki.client.js
@@ -1,130 +1,58 @@
 import { ref } from 'vue';
-import collect from 'collect.js';
 
 export default defineNuxtPlugin(() => {
-    let highlighter = null;
-    const allLanguageIds = ref([]);
-    const allThemeIds = ref([]);
-    let readyResolve;
-
-    const ready = new Promise((resolve) => {
-        readyResolve = resolve;
+    const worker = new Worker(new URL('../workers/shiki.worker.js', import.meta.url), {
+        type: 'module',
     });
 
-    // Defer shiki loading until after the app is mounted
-    if (import.meta.client) {
-        setTimeout(async () => {
-            try {
-                const { createHighlighter, bundledLanguagesInfo, bundledThemesInfo } =
-                    await import('shiki');
+    const pending = new Map();
+    const allLanguageIds = ref([]);
+    const allThemeIds = ref([]);
+    let requestId = 0;
 
-                highlighter = await createHighlighter({
-                    themes: ['github-light'],
-                    langs: ['html', 'xml', 'sql', 'javascript', 'json', 'css', 'php'],
-                });
+    worker.addEventListener('message', ({ data: { id, result, error } }) => {
+        const request = pending.get(id);
 
-                allLanguageIds.value = bundledLanguagesInfo
-                    .map((lang) => lang.id)
-                    .filter((id) => !['php-html', 'html-derivative'].includes(id));
+        if (!request) {
+            return;
+        }
 
-                const bundledIds = collect(bundledThemesInfo.map((t) => t.id))
-                    .filter((theme) => !['css-variables'].some((t) => theme.includes(t)))
-                    .sort()
-                    .toArray();
+        pending.delete(id);
 
-                // Load custom theme IDs from the static manifest
-                let customIds = [];
+        if (error) {
+            request.reject(new Error(error));
+            return;
+        }
 
-                try {
-                    const manifest = await fetch('/shiki/themes/all.json').then((r) => r.json());
-                    customIds = manifest.filter((id) => !bundledIds.includes(id)).sort();
-                } catch {
-                    // No custom themes manifest found
-                }
+        request.resolve(result);
+    });
 
-                allThemeIds.value = [...bundledIds, ...customIds].sort();
+    function send(method, payload = {}) {
+        const id = ++requestId;
 
-                readyResolve();
-            } catch (e) {
-                console.error('Failed to initialize shiki:', e);
-                readyResolve();
-            }
-        }, 0);
+        return new Promise((resolve, reject) => {
+            pending.set(id, { resolve, reject });
+            worker.postMessage({ id, method, payload });
+        });
     }
 
-    const shiki = {
-        ready,
-
-        async loadLanguage(lang) {
-            await ready;
-            if (this.languageIsLoaded(lang)) return;
-            return await highlighter.loadLanguage(lang);
-        },
-
-        async loadLanguages(langs = []) {
-            return await Promise.all(langs.map(async (lang) => await this.loadLanguage(lang)));
-        },
-
-        async loadTheme(theme) {
-            await ready;
-            if (this.themeIsLoaded(theme)) return;
-
-            // Try loading as a bundled shiki theme first.
-            // If that fails, fetch from the static custom themes directory.
-            try {
-                return await highlighter.loadTheme(theme);
-            } catch {
-                const themeData = await fetch(`/shiki/themes/${theme}.json`).then((r) => {
-                    if (!r.ok) throw new Error(`Theme "${theme}" not found.`);
-                    return r.json();
-                });
-
-                return await highlighter.loadTheme(themeData);
-            }
-        },
-
-        getTheme(theme) {
-            return highlighter?.getTheme(theme);
-        },
-
-        languages() {
-            return allLanguageIds.value;
-        },
-
-        languageIsLoaded(lang) {
-            return this.loadedLanguages().includes(lang);
-        },
-
-        loadedLanguages() {
-            return highlighter?.getLoadedLanguages() ?? [];
-        },
-
-        themes() {
-            return allThemeIds.value;
-        },
-
-        themeIsLoaded(theme) {
-            return this.loadedThemes().includes(theme);
-        },
-
-        loadedThemes() {
-            return highlighter?.getLoadedThemes() ?? [];
-        },
-
-        async tokens(code, lang, theme) {
-            await ready;
-
-            if (code.includes('<?php') && lang === 'php') {
-                await this.loadLanguage('php');
-            }
-
-            return highlighter.codeToTokensBase(code, { lang, theme });
-        },
-    };
+    const ready = send('initialize').then(({ languages, themes }) => {
+        allLanguageIds.value = languages;
+        allThemeIds.value = themes;
+    });
 
     return {
         provide: {
-            shiki,
+            shiki: {
+                ready,
+                languages: () => allLanguageIds.value,
+                themes: () => allThemeIds.value,
+                async tokenizeBlocks(payload) {
+                    await ready;
+
+                    return send('tokenizeBlocks', payload);
+                },
+            },
         },
     };
 });
diff --git a/app/workers/shiki.worker.js b/app/workers/shiki.worker.js
new file mode 100644
index 0000000..7c96043
--- /dev/null
+++ b/app/workers/shiki.worker.js
@@ -0,0 +1,94 @@
+import { bundledLanguagesInfo, bundledThemesInfo, createHighlighter } from 'shiki';
+
+let highlighter = null;
+let initialization = null;
+
+async function initialize() {
+    if (initialization) {
+        return initialization;
+    }
+
+    initialization = (async () => {
+        highlighter = await createHighlighter({
+            themes: ['github-light'],
+            langs: ['html', 'xml', 'sql', 'javascript', 'json', 'css', 'php'],
+        });
+
+        const languages = bundledLanguagesInfo
+            .map(({ id }) => id)
+            .filter((id) => !['php-html', 'html-derivative'].includes(id));
+
+        const bundledThemes = bundledThemesInfo
+            .map(({ id }) => id)
+            .filter((theme) => !theme.includes('css-variables'));
+
+        const response = await fetch('/shiki/themes/all.json');
+        const customThemes = response.ok ? await response.json() : [];
+
+        return {
+            languages,
+            themes: [...new Set([...bundledThemes, ...customThemes])].sort(),
+        };
+    })();
+
+    return initialization;
+}
+
+async function loadLanguage(language) {
+    if (!highlighter.getLoadedLanguages().includes(language)) {
+        await highlighter.loadLanguage(language);
+    }
+}
+
+async function loadTheme(theme) {
+    if (highlighter.getLoadedThemes().includes(theme)) {
+        return;
+    }
+
+    try {
+        await highlighter.loadTheme(theme);
+    } catch {
+        const response = await fetch(`/shiki/themes/${theme}.json`);
+
+        if (!response.ok) {
+            throw new Error(`Theme "${theme}" not found.`);
+        }
+
+        await highlighter.loadTheme(await response.json());
+    }
+}
+
+async function tokenizeBlocks({ blocks, theme }) {
+    await initialize();
+
+    const languages = [...new Set(blocks.map(({ language }) => language))];
+
+    await Promise.all([loadTheme(theme), ...languages.map(loadLanguage)]);
+
+    const tokenized = blocks.map(({ value, language }) =>
+        highlighter.codeToTokensBase(value, { lang: language, theme })
+    );
+
+    const { name, fg, bg, type } = highlighter.getTheme(theme);
+
+    return {
+        blocks: tokenized,
+        theme: { name, fg, bg, type },
+    };
+}
+
+const handlers = {
+    initialize,
+    tokenizeBlocks,
+};
+
+self.addEventListener('message', async ({ data: { id, method, payload } }) => {
+    try {
+        self.postMessage({ id, result: await handlers[method](payload) });
+    } catch (error) {
+        self.postMessage({
+            id,
+            error: error instanceof Error ? error.message : String(error),
+        });
+    }
+});
diff --git a/nuxt.config.ts b/nuxt.config.ts
index ef3d425..52e9c09 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -17,6 +17,9 @@ export default defineNuxtConfig({
 
     vite: {
         plugins: [tailwindcss()],
+        worker: {
+            format: 'es',
+        },
     },
 
     site: {
@@ -78,11 +81,47 @@ export default defineNuxtConfig({
         workbox: {
             skipWaiting: true,
             clientsClaim: true,
-            navigateFallback: '/',
-            globPatterns: ['**/*.{js,css,html,png,svg,ico,woff2}'],
+            cleanupOutdatedCaches: true,
+            navigateFallback: null,
+            // Keep installation light. Feature chunks, themes, and artwork are
+            // cached as they are used instead of downloading the whole app.
+            globPatterns: ['**/*.{css,html,ico,woff2}'],
             globIgnores: ['**/*.worker-*.js'],
             maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
             runtimeCaching: [
+                {
+                    urlPattern: ({ request }) => request.mode === 'navigate',
+                    handler: 'NetworkFirst',
+                    options: {
+                        cacheName: 'page-cache',
+                        networkTimeoutSeconds: 3,
+                        expiration: { maxEntries: 10, maxAgeSeconds: 60 * 60 * 24 * 7 },
+                    },
+                },
+                {
+                    urlPattern: /\/_nuxt\//,
+                    handler: 'CacheFirst',
+                    options: {
+                        cacheName: 'asset-cache',
+                        expiration: { maxEntries: 120, maxAgeSeconds: 60 * 60 * 24 * 365 },
+                    },
+                },
+                {
+                    urlPattern: /\/background-thumbnails\//,
+                    handler: 'CacheFirst',
+                    options: {
+                        cacheName: 'background-thumbnail-cache',
+                        expiration: { maxEntries: 80, maxAgeSeconds: 60 * 60 * 24 * 90 },
+                    },
+                },
+                {
+                    urlPattern: /\/shiki\/themes\//,
+                    handler: 'CacheFirst',
+                    options: {
+                        cacheName: 'theme-cache',
+                        expiration: { maxEntries: 40, maxAgeSeconds: 60 * 60 * 24 * 90 },
+                    },
+                },
                 {
                     urlPattern: /\.worker.*\.js$/,
                     handler: 'CacheFirst',
@@ -139,7 +178,6 @@ export default defineNuxtConfig({
                     ? [{ rel: 'manifest', href: '/manifest.webmanifest' }]
                     : []),
             ],
-
         },
     },
-})
+});
diff --git a/package-lock.json b/package-lock.json
index 62ed966..b6df756 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -47,7 +47,6 @@
                 "pinia-plugin-persistedstate": "^4.7.1",
                 "prettier": "^3.8.1",
                 "prettier-plugin-tailwindcss": "^0.7.2",
-                "queue": "^7.0.0",
                 "radix-vue": "^1.9.17",
                 "reka-ui": "^2.9.2",
                 "satori": "^0.26.0",
@@ -14857,13 +14856,6 @@
             ],
             "license": "MIT"
         },
-        "node_modules/queue": {
-            "version": "7.0.0",
-            "resolved": "https://registry.npmjs.org/queue/-/queue-7.0.0.tgz",
-            "integrity": "sha512-sphwS7HdfQnvrJAXUNAUgpf9H/546IE3p/5Lf2jr71O4udEYlqAhkevykumas2FYuMkX/29JMOgrRdRoYZ/X9w==",
-            "dev": true,
-            "license": "MIT"
-        },
         "node_modules/queue-microtask": {
             "version": "1.2.3",
             "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
diff --git a/package.json b/package.json
index 86eebde..7d2f62b 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,6 @@
         "pinia-plugin-persistedstate": "^4.7.1",
         "prettier": "^3.8.1",
         "prettier-plugin-tailwindcss": "^0.7.2",
-        "queue": "^7.0.0",
         "radix-vue": "^1.9.17",
         "reka-ui": "^2.9.2",
         "satori": "^0.26.0",
diff --git a/tests/components/TabBackgrounds.test.js b/tests/components/TabBackgrounds.test.js
new file mode 100644
index 0000000..8afcb80
--- /dev/null
+++ b/tests/components/TabBackgrounds.test.js
@@ -0,0 +1,57 @@
+import { mount } from '@vue/test-utils';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import TabBackgrounds from '~/components/TabBackgrounds.vue';
+
+const { scrollRefIntoView } = vi.hoisted(() => ({
+    scrollRefIntoView: vi.fn(),
+}));
+
+vi.mock('~/composables/useScrollRefIntoView', () => ({
+    default: () => ({ scrollRefIntoView }),
+}));
+
+const passthroughStub = {
+    template: '<div><slot /></div>',
+};
+
+describe('TabBackgrounds', () => {
+    afterEach(() => {
+        scrollRefIntoView.mockReset();
+    });
+
+    it('positions the selected background only when the tab mounts', async () => {
+        const wrapper = mount(TabBackgrounds, {
+            props: {
+                background: 'background-20',
+                backgroundColor: null,
+                backgrounds: Array.from({ length: 30 }, (_, index) => ({
+                    id: `background-${index}`,
+                    style: { backgroundColor: '#000' },
+                })),
+            },
+            global: {
+                directives: {
+                    tooltip: {},
+                },
+                stubs: {
+                    Button: passthroughStub,
+                    ButtonBackground: {
+                        props: ['active', 'attributes', 'custom', 'thumbnail', 'title'],
+                        template: '<button v-bind="$attrs">{{ title }}</button>',
+                    },
+                    ColorPicker: passthroughStub,
+                    ScrollArea: passthroughStub,
+                },
+            },
+        });
+
+        await wrapper.vm.$nextTick();
+
+        expect(scrollRefIntoView).toHaveBeenCalledOnce();
+        expect(scrollRefIntoView).toHaveBeenCalledWith('button-background-background-20');
+
+        await wrapper.setProps({ background: 'background-21' });
+
+        expect(scrollRefIntoView).toHaveBeenCalledOnce();
+    });
+});
diff --git a/tests/components/TabScenes.test.js b/tests/components/TabScenes.test.js
new file mode 100644
index 0000000..1680e68
--- /dev/null
+++ b/tests/components/TabScenes.test.js
@@ -0,0 +1,53 @@
+import { mount } from '@vue/test-utils';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import TabScenes from '~/components/TabScenes.vue';
+
+const { scrollRefIntoView } = vi.hoisted(() => ({
+    scrollRefIntoView: vi.fn(),
+}));
+
+vi.mock('~/composables/useScrollRefIntoView', () => ({
+    default: () => ({ scrollRefIntoView }),
+}));
+
+describe('TabScenes', () => {
+    afterEach(() => {
+        scrollRefIntoView.mockReset();
+    });
+
+    it('positions the selected scene only when the tab mounts', async () => {
+        const wrapper = mount(TabScenes, {
+            props: {
+                activeScene: 'scene-2',
+                scenes: [
+                    {
+                        id: 'scene-1',
+                        title: 'Scene 1',
+                        preview: { accent: '#fff', background: '#000', window: '#111' },
+                    },
+                    {
+                        id: 'scene-2',
+                        title: 'Scene 2',
+                        preview: { accent: '#fff', background: '#000', window: '#111' },
+                    },
+                ],
+            },
+            global: {
+                stubs: {
+                    ScrollArea: {
+                        template: '<div><slot /></div>',
+                    },
+                },
+            },
+        });
+
+        await wrapper.vm.$nextTick();
+
+        expect(scrollRefIntoView).toHaveBeenCalledOnce();
+        expect(scrollRefIntoView).toHaveBeenCalledWith('button-scene-scene-2');
+
+        await wrapper.setProps({ activeScene: 'scene-1' });
+
+        expect(scrollRefIntoView).toHaveBeenCalledOnce();
+    });
+});
diff --git a/tests/components/TabThemes.test.js b/tests/components/TabThemes.test.js
new file mode 100644
index 0000000..5625fce
--- /dev/null
+++ b/tests/components/TabThemes.test.js
@@ -0,0 +1,65 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import TabThemes from '~/components/TabThemes.vue';
+
+const ButtonThemeStub = {
+    name: 'ButtonTheme',
+    props: ['theme'],
+    template: '<button class="theme-card">{{ theme }}</button>',
+};
+
+describe('TabThemes', () => {
+    it('only mounts theme cards near the visible viewport', async () => {
+        const themes = Array.from({ length: 80 }, (_, index) => `theme-${index}`);
+
+        const wrapper = mount(TabThemes, {
+            props: {
+                code: [],
+                theme: 'theme-40',
+                themes,
+                settings: {},
+                background: {},
+                languages: [],
+            },
+            global: {
+                stubs: {
+                    ButtonTheme: ButtonThemeStub,
+                },
+            },
+        });
+
+        await new Promise((resolve) => setTimeout(resolve, 30));
+
+        const renderedThemes = wrapper.findAll('.theme-card').map((card) => card.text());
+
+        expect(renderedThemes).toContain('theme-40');
+        expect(renderedThemes.length).toBeGreaterThan(0);
+        expect(renderedThemes.length).toBeLessThan(12);
+    });
+
+    it('does not reposition the viewport when a theme is selected', async () => {
+        const themes = Array.from({ length: 80 }, (_, index) => `theme-${index}`);
+        const wrapper = mount(TabThemes, {
+            props: {
+                code: [],
+                theme: 'theme-40',
+                themes,
+                settings: {},
+                background: {},
+                languages: [],
+            },
+            global: {
+                stubs: {
+                    ButtonTheme: ButtonThemeStub,
+                },
+            },
+        });
+
+        await wrapper.vm.$nextTick();
+        wrapper.element.scrollLeft = 240;
+
+        await wrapper.setProps({ theme: 'theme-42' });
+
+        expect(wrapper.element.scrollLeft).toBe(240);
+    });
+});