diff --git a/src/app.css b/src/app.css
index 78efeadf0..613acd778 100644
--- a/src/app.css
+++ b/src/app.css
@@ -37,7 +37,7 @@
   --size-selector: 0.25rem;
   --size-field: 0.28125rem;
   --border: 1px;
-  --depth: 0;
+  --depth: 1;
   --noise: 0;
 }
 @plugin "daisyui/theme" {
@@ -71,7 +71,7 @@
   --size-selector: 0.25rem;
   --size-field: 0.28125rem;
   --border: 1px;
-  --depth: 0;
+  --depth: 1;
   --noise: 0;
 }
 
@@ -127,6 +127,15 @@
   * {
     font-size: 15px;
   }
+  @media (prefers-color-scheme: dark) {
+    .select {
+      &, & select {
+        &::picker(select) {
+          border: var(--border) solid var(--color-base-content);
+        }
+      }
+    }
+  }
 }
 
 .dropdown-content {
diff --git a/src/lib/components/BlockIfJobsUnavailable.svelte b/src/lib/components/BlockIfJobsUnavailable.svelte
index f70882bcb..ba28494d1 100644
--- a/src/lib/components/BlockIfJobsUnavailable.svelte
+++ b/src/lib/components/BlockIfJobsUnavailable.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import type { ClassValue } from 'svelte/elements';
   import { page } from '$app/state';
   import { m } from '$lib/paraglide/messages';
   import { toast } from '$lib/utils';
@@ -7,16 +8,16 @@
   interface Props {
     altContent: Snippet;
     children: Snippet;
-    className?: string;
+    class?: ClassValue;
   }
-  let { altContent, children, className }: Props = $props();
+  let { altContent, children, class: classes }: Props = $props();
 </script>
 
 {#if page.data.jobsAvailable}
   {@render children()}
 {:else}
   <button
-    class="{className} opacity-30 cursor-not-allowed"
+    class={[classes, 'opacity-30 cursor-not-allowed']}
     type="button"
     onclick={() => toast('warning', m.system_unavailable())}
   >
diff --git a/src/lib/components/Dropdown.svelte b/src/lib/components/Dropdown.svelte
index eab836d63..3750ccdde 100644
--- a/src/lib/components/Dropdown.svelte
+++ b/src/lib/components/Dropdown.svelte
@@ -5,29 +5,24 @@ A simple dropdown menu from DaisyUI.
 -->
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import type { ClassValue } from 'svelte/elements';
   import { onNavigate } from '$app/navigation';
   interface Props {
-    /** class="dropdown ..." */
-    dropdownClasses?: string;
-    /** class="btn btn-ghost ..." */
-    labelClasses?: string;
-    /** class="dropdown-content z-10 drop-shadow-lg rounded-md bg-base-200 ..." */
-    contentClasses?: string;
+    class?: {
+      /** class="dropdown ..." */
+      dropdown?: ClassValue;
+      /** class="btn btn-ghost ..." */
+      label?: ClassValue;
+      /** class="dropdown-content z-10 drop-shadow-lg rounded-md bg-base-200 ..." */
+      content?: ClassValue;
+    };
     label: Snippet;
     content: Snippet;
     onclick?: () => void;
     open?: boolean;
   }
 
-  let {
-    dropdownClasses = '',
-    labelClasses = '',
-    contentClasses = '',
-    label,
-    content,
-    onclick,
-    open = $bindable(false)
-  }: Props = $props();
+  let { class: classes, label, content, onclick, open = $bindable(false) }: Props = $props();
 
   onNavigate(() => {
     // close opened dropdown when navigating (this is mostly important for the dropdowns in the navbar)
@@ -48,11 +43,16 @@ A simple dropdown menu from DaisyUI.
   }}
 />
 
-<details class="dropdown {dropdownClasses}" bind:open bind:this={dropEl}>
-  <summary class="btn btn-ghost {labelClasses}" onclick={() => onclick?.()}>
+<details class={['dropdown', classes?.dropdown]} bind:open bind:this={dropEl}>
+  <summary class={['btn btn-ghost', classes?.label]} onclick={() => onclick?.()}>
     {@render label()}
   </summary>
-  <div class="dropdown-content z-10 drop-shadow-lg rounded-md bg-base-200 {contentClasses}">
+  <div
+    class={[
+      'dropdown-content z-10 drop-shadow-lg rounded-md bg-base-200 dark:border dark:border-base-content',
+      classes?.content
+    ]}
+  >
     {@render content()}
   </div>
 </details>
diff --git a/src/lib/components/LanguageCodeTypeahead.svelte b/src/lib/components/LanguageCodeTypeahead.svelte
index 60dd09494..0faa38b40 100644
--- a/src/lib/components/LanguageCodeTypeahead.svelte
+++ b/src/lib/components/LanguageCodeTypeahead.svelte
@@ -3,7 +3,7 @@
 
   import type { FuseResultMatch } from 'fuse.js';
   import type { Snippet } from 'svelte';
-  import type { HTMLInputAttributes } from 'svelte/elements';
+  import type { ClassValue, HTMLInputAttributes } from 'svelte/elements';
   import TypeaheadInput from './TypeaheadInput.svelte';
   import { page } from '$app/state';
   import { type LangInfo, l10nMap, localizeTagData } from '$lib/locales.svelte';
@@ -106,8 +106,10 @@
   let typeaheadInput: HTMLInputElement | undefined = $state(undefined);
   interface Props {
     langCode: string;
-    dropdownClasses?: string;
-    inputClasses?: string;
+    class?: {
+      dropdown?: ClassValue;
+      input?: ClassValue;
+    };
     onLangCodeSelected?: (langCode: string) => void;
     inputElProps?: HTMLInputAttributes;
     validatorHint?: Snippet;
@@ -115,8 +117,7 @@
 
   let {
     langCode = $bindable(),
-    dropdownClasses = '',
-    inputClasses = '',
+    class: classes,
     onLangCodeSelected,
     inputElProps = {},
     validatorHint
@@ -155,13 +156,12 @@
 <TypeaheadInput
   inputElProps={{ placeholder: m.project_languageCode(), ...inputElProps }}
   getList={(searchValue) => search(searchValue)}
-  classes="pr-20 {inputClasses}"
+  class={{ default: ['pr-20', classes?.input], dropdown: classes?.dropdown }}
   bind:search={langCode}
   onItemClicked={(res) => {
     langCode = res.item.tag;
     onLangCodeSelected?.(langCode);
   }}
-  {dropdownClasses}
   bind:inputElement={typeaheadInput}
 >
   <!-- This is a convenience option and unnecessary for a11y -->
diff --git a/src/lib/components/LocaleSelector.svelte b/src/lib/components/LocaleSelector.svelte
index b01a9619c..02caa51a1 100644
--- a/src/lib/components/LocaleSelector.svelte
+++ b/src/lib/components/LocaleSelector.svelte
@@ -1,11 +1,5 @@
-<script lang="ts">
-  import Dropdown from './Dropdown.svelte';
-  import IconContainer from './IconContainer.svelte';
-  import { LanguageIcon } from '$lib/icons';
-  import { l10nMap } from '$lib/locales.svelte';
-  import { type Locale, getLocale, locales, setLocale } from '$lib/paraglide/runtime';
-
-  function getFlag(locale: Locale) {
+<script lang="ts" module>
+  export function getFlag(locale: Locale) {
     switch (locale) {
       case 'en-US':
         return 'us';
@@ -20,26 +14,65 @@
   }
 </script>
 
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { ClassValue } from 'svelte/elements';
+  import Dropdown from './Dropdown.svelte';
+  import IconContainer from './IconContainer.svelte';
+  import { LanguageIcon } from '$lib/icons';
+  import { l10nMap } from '$lib/locales.svelte';
+  import { type Locale, getLocale, locales, setLocale } from '$lib/paraglide/runtime';
+
+  interface Props {
+    label?: Snippet;
+    class?: {
+      dropdown?: ClassValue;
+      label?: ClassValue;
+    };
+    currentLocale?: () => Locale;
+    onselect?: (lang: Locale) => void;
+  }
+
+  let {
+    label = globe,
+    class: classes = {},
+    currentLocale = getLocale,
+    onselect = setLocale
+  }: Props = $props();
+
+  let open = $state(false);
+
+  function onclick(locale: Locale) {
+    open = false;
+    onselect?.(locale);
+  }
+</script>
+
+{#snippet globe()}
+  <LanguageIcon color="white" />
+{/snippet}
+
 {#key getLocale()}
+  {@const langMap = l10nMap.value.get(getLocale())?.get('languages')}
   <Dropdown
-    dropdownClasses="dropdown-end"
-    labelClasses="m-2 p-2 rounded-xl items-middle justify-center flex-nowrap"
-    contentClasses="overflow-y-auto min-w-52"
+    class={{
+      ...classes,
+      content: 'overflow-y-auto min-w-52'
+    }}
+    bind:open
+    {label}
   >
-    {#snippet label()}
-      <LanguageIcon color="white" />
-    {/snippet}
     {#snippet content()}
-      <ul class="menu menu-compact gap-1 p-2">
+      <ul class="menu menu-sm gap-1 p-2">
         {#each locales as locale}
-          {@const langMap = l10nMap.value.get(getLocale())?.get('languages')}
           <li class="w-full">
             <div
-              class="btn flex-nowrap justify-start pl-2 pr-1"
-              class:bg-accent={locale === getLocale()}
-              class:text-accent-content={locale === getLocale()}
-              onclick={() => setLocale(locale)}
-              onkeypress={() => setLocale(locale)}
+              class={[
+                'btn flex-nowrap justify-start pl-2 pr-1',
+                locale === currentLocale() && 'bg-accent text-accent-content'
+              ]}
+              onclick={() => onclick(locale)}
+              onkeypress={() => onclick(locale)}
               role="button"
               tabindex="0"
             >
diff --git a/src/lib/components/OrganizationDropdown.svelte b/src/lib/components/OrganizationDropdown.svelte
index 23eb9fd9a..af800b056 100644
--- a/src/lib/components/OrganizationDropdown.svelte
+++ b/src/lib/components/OrganizationDropdown.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-  import type { HTMLSelectAttributes } from 'svelte/elements';
+  import type { ClassValue, HTMLSelectAttributes } from 'svelte/elements';
   import { org_allOrganizations } from '$lib/paraglide/messages';
   import { getLocale } from '$lib/paraglide/runtime';
   import { byName } from '$lib/utils/sorting';
   interface Props {
     organizations: { Id: number; Name: string | null }[];
     value: number | null;
-    className?: string;
+    class?: ClassValue;
     allowNull?: boolean;
     selectProperties?: HTMLSelectAttributes;
   }
@@ -14,7 +14,7 @@
   let {
     organizations,
     value = $bindable(),
-    className = '',
+    class: classes,
     allowNull = false,
     selectProperties = {}
   }: Props = $props();
@@ -26,7 +26,7 @@
   });
 </script>
 
-<select class="select select-bordered {className}" bind:value {...selectProperties}>
+<select class={['select', classes]} bind:value {...selectProperties}>
   {#if organizations.length === 1}
     <option selected value={organizations[0].Id}>{organizations[0].Name}</option>
   {:else}
diff --git a/src/lib/components/Pagination.svelte b/src/lib/components/Pagination.svelte
index ca2e47521..7fb821d80 100644
--- a/src/lib/components/Pagination.svelte
+++ b/src/lib/components/Pagination.svelte
@@ -67,7 +67,7 @@
       {m.common_total({ total })}
     </div>
     <div class="grow">&nbsp;</div>
-    <select class="select select-bordered" name="size" bind:value={size}>
+    <select class="select" name="size" bind:value={size}>
       {#each [10, 25, 50, 100].concat(extraSizeOptions).toSorted((a, b) => a - b) as value}
         <option {value}>{value}</option>
       {/each}
diff --git a/src/lib/components/SearchBar.svelte b/src/lib/components/SearchBar.svelte
index 358870c33..1af28a99b 100644
--- a/src/lib/components/SearchBar.svelte
+++ b/src/lib/components/SearchBar.svelte
@@ -7,18 +7,19 @@
 
 <script lang="ts">
   import { onDestroy } from 'svelte';
+  import type { ClassValue } from 'svelte/elements';
   import IconContainer from './IconContainer.svelte';
   import { m } from '$lib/paraglide/messages';
 
   interface Props {
-    className?: string;
+    class?: ClassValue;
     value: string;
     requestSubmit?: () => void;
     requestDelay?: number;
   }
 
   let {
-    className = '',
+    class: classes,
     value = $bindable(),
     requestSubmit,
     requestDelay = 1_000
@@ -33,7 +34,7 @@
   });
 </script>
 
-<div class={className} data-html="true">
+<div class={[classes]} data-html="true">
   <label class="input input-bordered flex items-center gap-2 w-full">
     <input
       type="search"
diff --git a/src/lib/components/SortTable.svelte b/src/lib/components/SortTable.svelte
index 569134795..b52b7896a 100644
--- a/src/lib/components/SortTable.svelte
+++ b/src/lib/components/SortTable.svelte
@@ -4,6 +4,7 @@
 -->
 <script lang="ts" generics="RowItem extends Record<string, unknown>">
   import type { Snippet } from 'svelte';
+  import type { ClassValue } from 'svelte/elements';
   import { ArrowDownIcon, ArrowUpIcon } from '$lib/icons';
 
   interface Props {
@@ -19,9 +20,9 @@
        * If `serverSide` is `true`, just use a dummy function like `() => 0`
        */
       compare?: (a: RowItem, b: RowItem) => number;
-      className?: string;
+      class?: ClassValue;
     }[];
-    className?: string;
+    class?: ClassValue;
     /** If this is true, will defer sorting to the server instead */
     serverSide?: boolean;
     onSort?: (field: string, direction: 'asc' | 'desc') => void;
@@ -32,7 +33,7 @@
   let {
     data = $bindable(),
     columns,
-    className = '',
+    class: classes,
     serverSide = false,
     onSort,
     row,
@@ -76,13 +77,13 @@
   }
 </script>
 
-<div class="overflow-y {className}">
+<div class={[classes]}>
   <table class="table" class:table-fixed={fixedLayout}>
     <thead>
       <tr>
         {#each columns as c}
           <th
-            class={c.className ?? ''}
+            class={[c.class]}
             onclick={() => {
               if (c.compare) {
                 sortColByDirection(c);
diff --git a/src/lib/components/Tooltip.svelte b/src/lib/components/Tooltip.svelte
index ba6732165..a551bdacd 100644
--- a/src/lib/components/Tooltip.svelte
+++ b/src/lib/components/Tooltip.svelte
@@ -1,18 +1,19 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import type { ClassValue } from 'svelte/elements';
 
   interface Props {
     tip?: string | null | undefined;
-    className?: string;
+    class?: ClassValue;
     // tooltip-content can also be handled in the children snippet
     children?: Snippet;
   }
 
-  let { tip, className = '', children }: Props = $props();
+  let { tip, class: classes, children }: Props = $props();
 </script>
 
 <span
-  class="tooltip [--tt-bg:var(--color-white)] dark:tooltip-secondary {className}"
+  class={['tooltip [--tt-bg:var(--color-white)] dark:tooltip-secondary', classes]}
   data-tip={tip}
 >
   {@render children?.()}
diff --git a/src/lib/components/TypeaheadInput.svelte b/src/lib/components/TypeaheadInput.svelte
index f6f430dc7..76134745b 100644
--- a/src/lib/components/TypeaheadInput.svelte
+++ b/src/lib/components/TypeaheadInput.svelte
@@ -1,13 +1,12 @@
 <script lang="ts" generics="T">
   import type { Snippet } from 'svelte';
-  import type { HTMLInputAttributes } from 'svelte/elements';
+  import type { ClassValue, HTMLInputAttributes } from 'svelte/elements';
 
   let selectedIndex = $state(-1);
   let inputFocused = $state(false);
   interface Props {
     inputElProps?: HTMLInputAttributes;
-    classes?: string;
-    dropdownClasses?: string;
+    class?: { default?: ClassValue; dropdown?: ClassValue };
     getList: (searchTerm: string) => T[];
     search?: string;
     inputElement?: HTMLInputElement;
@@ -18,8 +17,7 @@
 
   let {
     inputElProps = {},
-    classes = '',
-    dropdownClasses = '',
+    class: classes,
     getList,
     search = $bindable(''),
     inputElement = $bindable(undefined!),
@@ -66,7 +64,7 @@
 <div class="relative">
   <input
     type="text"
-    class="input input-bordered {classes}"
+    class={['input input-bordered', classes?.default]}
     bind:value={search}
     onkeydown={keypress}
     onfocus={onFocus}
@@ -77,8 +75,11 @@
   {@render custom?.()}
   {#if list.length}
     <ul
-      class="bg-base-200 absolute z-10 rounded-lg p-2 shadow-xl {dropdownClasses}"
-      class:hidden={!inputFocused}
+      class={[
+        'bg-base-200 absolute z-10 rounded-lg p-2 shadow-xl',
+        classes?.dropdown,
+        !inputFocused && 'hidden'
+      ]}
       role="listbox"
     >
       {#each list as item, i}
diff --git a/src/lib/components/settings/InputWithMessage.svelte b/src/lib/components/settings/InputWithMessage.svelte
index 753ff675f..c40756fc0 100644
--- a/src/lib/components/settings/InputWithMessage.svelte
+++ b/src/lib/components/settings/InputWithMessage.svelte
@@ -6,28 +6,29 @@
 <script lang="ts">
   /* eslint-disable @typescript-eslint/no-explicit-any */
   import type { Snippet } from 'svelte';
+  import type { ClassValue } from 'svelte/elements';
   import type { ValueKey } from '$lib/locales.svelte';
   import * as m from '$lib/paraglide/messages';
 
   interface Props {
     title?: ValueKey;
     message?: ValueKey;
-    className?: string;
+    class?: ClassValue;
     children?: Snippet;
   }
 
-  let { title, message, className = '', children }: Props = $props();
+  let { title, message, class: classes, children }: Props = $props();
 </script>
 
-<div class="flex flex-row items-center gap-2 {className}">
+<div class={['flex flex-row items-center gap-2', classes]}>
   <div class="fieldset-label flex-col items-start grow text-base-content">
     {#if title}
-      <span class="title {title.classes ?? ''}">
+      <span class={['title', title.class]}>
         {m[title.key](title.params as any)}
       </span>
     {/if}
     {#if message}
-      <span class="text-sm {message.classes ?? ''}">
+      <span class={['text-sm', message.class]}>
         {m[message.key](message.params as any)}
       </span>
     {/if}
diff --git a/src/lib/components/settings/LabeledFormInput.svelte b/src/lib/components/settings/LabeledFormInput.svelte
index ccbaf222b..3f5277068 100644
--- a/src/lib/components/settings/LabeledFormInput.svelte
+++ b/src/lib/components/settings/LabeledFormInput.svelte
@@ -11,10 +11,10 @@
     children?: Snippet;
   }
 
-  let { key, params = {}, classes = '', children }: Props = $props();
+  let { key, params = {}, class: classes, children }: Props = $props();
 </script>
 
-<label class="flex flex-col w-full {classes}">
+<label class={['flex flex-col w-full', classes]}>
   <div class="label">
     <span class="fieldset-label">
       <!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
diff --git a/src/lib/components/settings/PropertiesEditor.svelte b/src/lib/components/settings/PropertiesEditor.svelte
index 2776e6507..cdb8ef17e 100644
--- a/src/lib/components/settings/PropertiesEditor.svelte
+++ b/src/lib/components/settings/PropertiesEditor.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
+  import type { ClassValue } from 'svelte/elements';
   import { flatten, safeParse } from 'valibot';
   import { propertiesSchema } from '$lib/valibot';
 
   interface Props {
     value: string | null;
     name: string;
-    className?: string;
+    class?: ClassValue;
     ok?: boolean;
   }
 
-  let { value = $bindable(), name, className = '', ok = $bindable(true) }: Props = $props();
+  let { value = $bindable(), name, class: classes, ok = $bindable(true) }: Props = $props();
 
   const parsed = $derived(safeParse(propertiesSchema, value));
 
@@ -23,7 +24,7 @@
 <div class="w-full">
   <textarea
     {name}
-    class="textarea textarea-bordered h-48 {className}"
+    class={['textarea textarea-bordered h-48', classes]}
     onfocus={() => {
       showErrors = false;
     }}
diff --git a/src/lib/components/settings/Toggle.svelte b/src/lib/components/settings/Toggle.svelte
index fea07eace..6f2e2689f 100644
--- a/src/lib/components/settings/Toggle.svelte
+++ b/src/lib/components/settings/Toggle.svelte
@@ -11,7 +11,7 @@
     checked: boolean;
     onIcon?: string;
     offIcon?: string;
-    className?: string;
+    class?: string;
     inputAttr?: HTMLInputAttributes;
   }
 
@@ -22,19 +22,18 @@
     checked = $bindable(),
     onIcon = '',
     offIcon = '',
-    className,
+    class: classes,
     inputAttr = {}
   }: Props = $props();
 </script>
 
-<InputWithMessage
-  {title}
-  {message}
-  className="{className} {inputAttr.disabled ? 'cursor-not-allowed' : ''} "
->
+<InputWithMessage {title} {message} class={[classes, inputAttr.disabled && 'cursor-not-allowed']}>
   <label
-    class="toggle {checked ? 'border-accent' : ''} text-base-content
-           {inputAttr.disabled ? 'cursor-not-allowed opacity-50 pointer-events-none' : ''}"
+    class={[
+      'toggle text-base-content',
+      checked && 'border-accent',
+      inputAttr.disabled && 'cursor-not-allowed opacity-50 pointer-events-none'
+    ]}
   >
     <input
       {name}
diff --git a/src/lib/locales.svelte.ts b/src/lib/locales.svelte.ts
index 6f612030e..3ef5bd63d 100644
--- a/src/lib/locales.svelte.ts
+++ b/src/lib/locales.svelte.ts
@@ -1,3 +1,4 @@
+import type { ClassValue } from 'svelte/elements';
 import { SvelteMap } from 'svelte/reactivity';
 import * as v from 'valibot';
 import type { Locale } from './paraglide/runtime';
@@ -8,7 +9,7 @@ export type ValidI13nKey = ValidKey<typeof m>;
 export type ValueKey<T extends ValidI13nKey = ValidI13nKey> = {
   key: T;
   params?: Parameters<(typeof m)[T]>[0];
-  classes?: string;
+  class?: ClassValue;
 };
 
 export type L10NKeys = 'languages' | 'territories';
diff --git a/src/lib/products/components/ReleaseInfo.svelte b/src/lib/products/components/ReleaseInfo.svelte
index 058320753..fa4d6506f 100644
--- a/src/lib/products/components/ReleaseInfo.svelte
+++ b/src/lib/products/components/ReleaseInfo.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Prisma } from '@prisma/client';
+  import type { ClassValue } from 'svelte/elements';
   import { m } from '$lib/paraglide/messages';
   import { getTimeDateString } from '$lib/utils/time';
 
@@ -13,46 +14,48 @@
         DateResolved: true;
       };
     }>;
-    classes?: string;
-    headerClasses?: string;
+    class?: {
+      default?: ClassValue;
+      header?: ClassValue;
+    };
   }
 
-  let { release, classes = '', headerClasses = '' }: Props = $props();
+  let { release, class: classes }: Props = $props();
 </script>
 
 {#if release?.LogUrl}
-  <table class="table table-auto bg-base-100 sm:hidden {classes}">
+  <table class={['table table-auto bg-base-100 sm:hidden', classes?.default]}>
     <tbody>
       <tr>
-        <th class={headerClasses}>{m.publications_channel()}</th>
+        <th class={[classes?.header]}>{m.publications_channel()}</th>
         <td>{release.Channel}</td>
       </tr>
       <tr>
-        <th class={headerClasses}>{m.publications_status()}</th>
+        <th class={[classes?.header]}>{m.publications_status()}</th>
         <td>
           {release.Success ? m.publications_succeeded() : m.publications_failed()}
         </td>
       </tr>
       {#if release.DateResolved}
         <tr>
-          <th class={headerClasses}>{m.publications_resolved()}</th>
+          <th class={[classes?.header]}>{m.publications_resolved()}</th>
           <td>{getTimeDateString(release.DateResolved)}</td>
         </tr>
       {/if}
       <tr>
-        <th class={headerClasses}>{m.publications_date()}</th>
+        <th class={[classes?.header]}>{m.publications_date()}</th>
         <td>{getTimeDateString(release.DateUpdated)}</td>
       </tr>
       <tr>
-        <th class={headerClasses}>{m.publications_url()}</th>
+        <th class={[classes?.header]}>{m.publications_url()}</th>
         <td>
           <a href={release.LogUrl} class="link" target="_blank">{m.publications_console()}</a>
         </td>
       </tr>
     </tbody>
   </table>
-  <table class="hidden sm:table table-auto bg-base-100 {classes}">
-    <thead class={headerClasses}>
+  <table class={['hidden sm:table table-auto bg-base-100', classes]}>
+    <thead class={[classes?.header]}>
       <tr>
         <th>{m.publications_channel()}</th>
         <th>{m.publications_status()}</th>
diff --git a/src/lib/projects/components/ProjectActionMenu.svelte b/src/lib/projects/components/ProjectActionMenu.svelte
index 3b2af8171..1eed06432 100644
--- a/src/lib/projects/components/ProjectActionMenu.svelte
+++ b/src/lib/projects/components/ProjectActionMenu.svelte
@@ -52,9 +52,11 @@
 </script>
 
 <Dropdown
-  dropdownClasses="dropdown-bottom dropdown-end"
-  labelClasses="max-h-fit min-h-fit p-1 inline"
-  contentClasses="p-1 min-w-36 w-auto"
+  class={{
+    dropdown: 'dropdown-bottom dropdown-end',
+    label: 'max-h-fit min-h-fit p-1 inline',
+    content: 'p-1 min-w-36 w-auto'
+  }}
   onclick={() => {
     $form.projectId = project.Id;
   }}
@@ -65,10 +67,10 @@
   {#snippet content()}
     <form method="POST" action="?/{endpoint}" use:enhance>
       <input type="hidden" name="projectId" value={project.Id} />
-      <ul class="menu menu-compact overflow-hidden rounded-md">
+      <ul class="menu menu-sm overflow-hidden rounded-md">
         {#if allowActions && canArchive(project, page.data.session!.user)}
           <li class="w-full rounded-none">
-            <BlockIfJobsUnavailable className="text-nowrap">
+            <BlockIfJobsUnavailable class="text-nowrap">
               {#snippet altContent()}
                 {m.common_archive()}
               {/snippet}
@@ -81,7 +83,7 @@
         {/if}
         {#if allowReactivate && canReactivate(project, page.data.session!.user)}
           <li class="w-full rounded-none">
-            <BlockIfJobsUnavailable className="text-nowrap">
+            <BlockIfJobsUnavailable class="text-nowrap">
               {#snippet altContent()}
                 {m.common_reactivate()}
               {/snippet}
@@ -99,7 +101,7 @@
         {/if}
         {#if canClaimProject(page.data.session!.user, project.OwnerId, project.OrganizationId, project.GroupId, userGroups)}
           <li class="w-full rounded-none">
-            <BlockIfJobsUnavailable className="text-nowrap">
+            <BlockIfJobsUnavailable class="text-nowrap">
               {#snippet altContent()}
                 {m.project_claimOwnership()}
               {/snippet}
diff --git a/src/lib/projects/components/ProjectFilterSelector.svelte b/src/lib/projects/components/ProjectFilterSelector.svelte
index a3a137b05..94b5504fa 100644
--- a/src/lib/projects/components/ProjectFilterSelector.svelte
+++ b/src/lib/projects/components/ProjectFilterSelector.svelte
@@ -22,9 +22,11 @@
 </script>
 
 <Dropdown
-  dropdownClasses="dropdown-start"
-  labelClasses="no-animation hover:bg-transparent"
-  contentClasses="overflow-y-auto left-2 p-2 border m-2"
+  class={{
+    dropdown: 'dropdown-start',
+    label: 'no-animation hover:bg-transparent',
+    content: 'overflow-y-auto left-2 p-2 border m-2'
+  }}
   bind:open
 >
   {#snippet label()}
diff --git a/src/routes/(authenticated)/+layout.svelte b/src/routes/(authenticated)/+layout.svelte
index f99cdfce3..7885744c3 100644
--- a/src/routes/(authenticated)/+layout.svelte
+++ b/src/routes/(authenticated)/+layout.svelte
@@ -2,6 +2,7 @@
   import { signOut } from '@auth/sveltekit/client';
   import type { Prisma } from '@prisma/client';
   import { type Snippet, onMount } from 'svelte';
+  import type { ClassValue } from 'svelte/elements';
   import type { LayoutData } from './$types';
   import { dev } from '$app/environment';
   import { page } from '$app/state';
@@ -70,7 +71,7 @@
 
 {#snippet orgDisplay(
   org?: Prisma.OrganizationsGetPayload<{ select: { LogoUrl: true; Id: true; Name: true } }>,
-  textClasses?: string
+  classes?: ClassValue
 )}
   {#if org?.LogoUrl}
     <img class="inline-block p-1 h-12 w-12" src={org.LogoUrl} alt="Logo" />
@@ -79,7 +80,7 @@
       <div class="bg-white w-full h-full"></div>
     </div>
   {/if}
-  <span class={textClasses ?? ''}>
+  <span class={[classes]}>
     {org?.Name ?? m.org_allOrganizations()}
   </span>
 {/snippet}
@@ -230,7 +231,7 @@
                   </a>
                 </li>
                 <li>
-                  <BlockIfJobsUnavailable className="rounded-none">
+                  <BlockIfJobsUnavailable class="rounded-none">
                     {#snippet altContent()}
                       {m.sidebar_jobAdministration()}
                       <IconContainer icon="mdi:open-in-new" width="18" />
@@ -294,11 +295,18 @@
           <!-- <p>SCRIPTORIA</p> -->
         </div>
         <div class="navbar-end">
-          <LocaleSelector />
+          <LocaleSelector
+            class={{
+              dropdown: 'dropdown-end',
+              label: 'm-2 p-2 rounded-xl items-middle justify-center flex-nowrap'
+            }}
+          />
           <Dropdown
-            dropdownClasses="dropdown-end"
-            labelClasses="m-2 p-2 rounded-xl"
-            contentClasses="w-36 overflow-y-auto"
+            class={{
+              dropdown: 'dropdown-end',
+              label: 'm-2 p-2 rounded-xl',
+              content: 'w-36 overflow-y-auto'
+            }}
           >
             {#snippet label()}
               <img
@@ -309,7 +317,7 @@
               />
             {/snippet}
             {#snippet content()}
-              <ul class="menu menu-compact gap-1 p-2">
+              <ul class="menu menu-sm gap-1 p-2">
                 <li>
                   <a
                     href={localizeHref(
diff --git a/src/routes/(authenticated)/admin/settings/build-engines/+page.svelte b/src/routes/(authenticated)/admin/settings/build-engines/+page.svelte
index a4365eac7..e576ea724 100644
--- a/src/routes/(authenticated)/admin/settings/build-engines/+page.svelte
+++ b/src/routes/(authenticated)/admin/settings/build-engines/+page.svelte
@@ -21,7 +21,7 @@
 </script>
 
 {#snippet date(engine?: (typeof buildEngines)[0] & { i: number })}
-  <Tooltip className="indent-0" tip={getTimeDateString(engine?.DateUpdated ?? null)}>
+  <Tooltip class="indent-0" tip={getTimeDateString(engine?.DateUpdated ?? null)}>
     {engine ? $dates[engine.i] : '-'}
   </Tooltip>
 {/snippet}
diff --git a/src/routes/(authenticated)/admin/settings/organizations/edit/+page.svelte b/src/routes/(authenticated)/admin/settings/organizations/edit/+page.svelte
index a42828c57..772295464 100644
--- a/src/routes/(authenticated)/admin/settings/organizations/edit/+page.svelte
+++ b/src/routes/(authenticated)/admin/settings/organizations/edit/+page.svelte
@@ -61,7 +61,7 @@
     />
     <span class="validator-hint">&nbsp;</span>
   </LabeledFormInput>
-  <InputWithMessage title={{ key: 'org_useDefaultBuildEngine' }} className="py-2">
+  <InputWithMessage title={{ key: 'org_useDefaultBuildEngine' }} class="py-2">
     <input
       name="useDefaultBuildEngine"
       class="toggle toggle-accent"
@@ -103,7 +103,7 @@
   <Toggle
     title={{ key: 'org_publicByDefault' }}
     message={{ key: 'org_publicByDefaultDescription' }}
-    className="py-1"
+    class="py-1"
     name="publicByDefault"
     bind:checked={$form.publicByDefault}
     onIcon="mdi:lock-open-variant"
diff --git a/src/routes/(authenticated)/admin/settings/organizations/new/+page.svelte b/src/routes/(authenticated)/admin/settings/organizations/new/+page.svelte
index f2ba54102..2106874ef 100644
--- a/src/routes/(authenticated)/admin/settings/organizations/new/+page.svelte
+++ b/src/routes/(authenticated)/admin/settings/organizations/new/+page.svelte
@@ -57,7 +57,7 @@
     />
     <span class="validator-hint">&nbsp;</span>
   </LabeledFormInput>
-  <InputWithMessage title={{ key: 'org_useDefaultBuildEngine' }} className="py-2">
+  <InputWithMessage title={{ key: 'org_useDefaultBuildEngine' }} class="py-2">
     <input
       name="useDefaultBuildEngine"
       class="toggle toggle-accent"
@@ -99,7 +99,7 @@
   <InputWithMessage
     title={{ key: 'org_publicByDefault' }}
     message={{ key: 'org_publicByDefaultDescription' }}
-    className="py-1"
+    class="py-1"
   >
     <input
       name="publicByDefault"
diff --git a/src/routes/(authenticated)/admin/settings/product-definitions/edit/+page.svelte b/src/routes/(authenticated)/admin/settings/product-definitions/edit/+page.svelte
index 8a3379436..8609f455e 100644
--- a/src/routes/(authenticated)/admin/settings/product-definitions/edit/+page.svelte
+++ b/src/routes/(authenticated)/admin/settings/product-definitions/edit/+page.svelte
@@ -58,7 +58,7 @@
   </LabeledFormInput>
   <LabeledFormInput key="prodDefs_type">
     <select
-      class="select select-bordered validator"
+      class="select validator"
       name="applicationType"
       bind:value={$form.applicationType}
       required
@@ -70,12 +70,7 @@
     <span class="validator-hint">{m.prodDefs_emptyType()}</span>
   </LabeledFormInput>
   <LabeledFormInput key="prodDefs_flow">
-    <select
-      class="select select-bordered validator"
-      name="workflow"
-      bind:value={$form.workflow}
-      required
-    >
+    <select class="select validator" name="workflow" bind:value={$form.workflow} required>
       {#each workflows as wf}
         <option value={wf.Id}>{wf.Name}</option>
       {/each}
@@ -83,11 +78,7 @@
     <span class="validator-hint">{m.prodDefs_emptyFlow()}</span>
   </LabeledFormInput>
   <LabeledFormInput key="prodDefs_rebuildFlow">
-    <select
-      class="select select-bordered"
-      name="rebuildWorkflow"
-      bind:value={$form.rebuildWorkflow}
-    >
+    <select class="select" name="rebuildWorkflow" bind:value={$form.rebuildWorkflow}>
       <option value={null}>{m.prodDefs_noFlow()}</option>
       {#each rebuildWorkflows as workflow}
         <option value={workflow.Id}>{workflow.Name}</option>
@@ -96,11 +87,7 @@
     <span class="validator-hint">&nbsp;</span>
   </LabeledFormInput>
   <LabeledFormInput key="prodDefs_republishFlow">
-    <select
-      class="select select-bordered"
-      name="republishWorkflow"
-      bind:value={$form.republishWorkflow}
-    >
+    <select class="select" name="republishWorkflow" bind:value={$form.republishWorkflow}>
       <option value={null}>{m.prodDefs_noFlow()}</option>
       {#each republishWorkflows as workflow}
         <option value={workflow.Id}>{workflow.Name}</option>
@@ -119,7 +106,7 @@
   <LabeledFormInput key="prodDefs_properties">
     <PropertiesEditor
       name="properties"
-      className="w-full"
+      class="w-full"
       bind:value={$form.properties}
       bind:ok={propsOk}
     />
diff --git a/src/routes/(authenticated)/admin/settings/product-definitions/new/+page.svelte b/src/routes/(authenticated)/admin/settings/product-definitions/new/+page.svelte
index 72ce1c5e7..883caf7db 100644
--- a/src/routes/(authenticated)/admin/settings/product-definitions/new/+page.svelte
+++ b/src/routes/(authenticated)/admin/settings/product-definitions/new/+page.svelte
@@ -56,7 +56,7 @@
   </LabeledFormInput>
   <LabeledFormInput key="prodDefs_type">
     <select
-      class="select select-bordered validator"
+      class="select validator"
       name="applicationType"
       bind:value={$form.applicationType}
       required
@@ -68,12 +68,7 @@
     <span class="validator-hint">{m.prodDefs_emptyType()}</span>
   </LabeledFormInput>
   <LabeledFormInput key="prodDefs_flow">
-    <select
-      class="select select-bordered validator"
-      name="workflow"
-      bind:value={$form.workflow}
-      required
-    >
+    <select class="select validator" name="workflow" bind:value={$form.workflow} required>
       {#each workflows as wf}
         <option value={wf.Id}>{wf.Name}</option>
       {/each}
@@ -81,11 +76,7 @@
     <span class="validator-hint">{m.prodDefs_emptyFlow()}</span>
   </LabeledFormInput>
   <LabeledFormInput key="prodDefs_rebuildFlow">
-    <select
-      class="select select-bordered"
-      name="rebuildWorkflow"
-      bind:value={$form.rebuildWorkflow}
-    >
+    <select class="select" name="rebuildWorkflow" bind:value={$form.rebuildWorkflow}>
       <option value={null}>{m.prodDefs_noFlow()}</option>
       {#each rebuildWorkflows as wf}
         <option value={wf.Id}>{wf.Name}</option>
@@ -94,11 +85,7 @@
     <span class="validator-hint">&nbsp;</span>
   </LabeledFormInput>
   <LabeledFormInput key="prodDefs_republishFlow">
-    <select
-      class="select select-bordered"
-      name="republishWorkflow"
-      bind:value={$form.republishWorkflow}
-    >
+    <select class="select" name="republishWorkflow" bind:value={$form.republishWorkflow}>
       <option value={null}>{m.prodDefs_noFlow()}</option>
       {#each republishWorkflows as wf}
         <option value={wf.Id}>{wf.Name}</option>
@@ -117,7 +104,7 @@
   <LabeledFormInput key="prodDefs_properties">
     <PropertiesEditor
       name="properties"
-      className="w-full"
+      class="w-full"
       bind:value={$form.properties}
       bind:ok={propsOk}
     />
diff --git a/src/routes/(authenticated)/admin/settings/stores/edit/+page.svelte b/src/routes/(authenticated)/admin/settings/stores/edit/+page.svelte
index 2f0de8faf..4594044a9 100644
--- a/src/routes/(authenticated)/admin/settings/stores/edit/+page.svelte
+++ b/src/routes/(authenticated)/admin/settings/stores/edit/+page.svelte
@@ -51,12 +51,7 @@
     <span class="validator-hint">&nbsp;</span>
   </LabeledFormInput>
   <LabeledFormInput key="storeTypes_listTitle">
-    <select
-      class="select select-bordered validator"
-      name="storeType"
-      bind:value={$form.storeType}
-      required
-    >
+    <select class="select validator" name="storeType" bind:value={$form.storeType} required>
       {#each data.options.toSorted((a, b) => byName(a, b, getLocale())) as type}
         <option value={type.Id}>{type.Name}</option>
       {/each}
diff --git a/src/routes/(authenticated)/admin/settings/stores/new/+page.svelte b/src/routes/(authenticated)/admin/settings/stores/new/+page.svelte
index cb8033397..2bcd00d0a 100644
--- a/src/routes/(authenticated)/admin/settings/stores/new/+page.svelte
+++ b/src/routes/(authenticated)/admin/settings/stores/new/+page.svelte
@@ -49,12 +49,7 @@
     <span class="validator-hint">&nbsp;</span>
   </LabeledFormInput>
   <LabeledFormInput key="storeTypes_listTitle">
-    <select
-      class="select select-bordered validator"
-      name="storeType"
-      bind:value={$form.storeType}
-      required
-    >
+    <select class="select validator" name="storeType" bind:value={$form.storeType} required>
       {#each data.options.storeType.toSorted((a, b) => byName(a, b, getLocale())) as type}
         <option value={type.Id}>{type.Name}</option>
       {/each}
diff --git a/src/routes/(authenticated)/admin/settings/workflow-definitions/edit/+page.svelte b/src/routes/(authenticated)/admin/settings/workflow-definitions/edit/+page.svelte
index 94ae1be26..b832665b4 100644
--- a/src/routes/(authenticated)/admin/settings/workflow-definitions/edit/+page.svelte
+++ b/src/routes/(authenticated)/admin/settings/workflow-definitions/edit/+page.svelte
@@ -49,12 +49,7 @@
     <span class="validator-hint">{m.formErrors_nameEmpty()}</span>
   </LabeledFormInput>
   <LabeledFormInput key="flowDefs_storeType">
-    <select
-      class="select select-bordered validator"
-      name="storeType"
-      bind:value={$form.storeType}
-      required
-    >
+    <select class="select validator" name="storeType" bind:value={$form.storeType} required>
       {#each data.storeTypes.toSorted((a, b) => byName(a, b, getLocale())) as type}
         <option value={type.Id}>{type.Name}</option>
       {/each}
@@ -62,12 +57,7 @@
     <span class="validator-hint">{m.flowDefs_emptyStoreType()}</span>
   </LabeledFormInput>
   <LabeledFormInput key="flowDefs_productType">
-    <select
-      class="select select-bordered validator"
-      name="productType"
-      bind:value={$form.productType}
-      required
-    >
+    <select class="select validator" name="productType" bind:value={$form.productType} required>
       {#each enumNumVals(ProductType) as type}
         <option value={type}>
           {m.flowDefs_productTypes({ type })}
@@ -86,7 +76,7 @@
     <span class="validator-hint">&nbsp;</span>
   </LabeledFormInput>
   <LabeledFormInput key="flowDefs_scheme">
-    <select class="select select-bordered" name="workflowScheme" bind:value={$form.workflowScheme}>
+    <select class="select" name="workflowScheme" bind:value={$form.workflowScheme}>
       {#each data.schemes.toSorted((a, b) => byString(a.Code, b.Code, getLocale())) as scheme}
         <option value={scheme.Code}>{scheme.Code}</option>
       {/each}
@@ -94,11 +84,7 @@
     <span class="validator-hint">&nbsp;</span>
   </LabeledFormInput>
   <LabeledFormInput key="flowDefs_businessFlow">
-    <select
-      class="select select-bordered"
-      name="workflowBusinessFlow"
-      bind:value={$form.workflowBusinessFlow}
-    >
+    <select class="select" name="workflowBusinessFlow" bind:value={$form.workflowBusinessFlow}>
       {#each businessFlows as flow}
         <option value={flow}>{flow}</option>
       {/each}
@@ -108,18 +94,15 @@
   <LabeledFormInput key="flowDefs_properties">
     <PropertiesEditor
       name="properties"
-      className="w-full"
+      class="w-full"
       bind:value={$form.properties}
       bind:ok={propsOk}
     />
     <span class="validator-hint">&nbsp;</span>
   </LabeledFormInput>
-  <LabeledFormInput
-    key="flowDefs_options_title"
-    classes="border border-warning p-1 my-4 rounded-lg"
-  >
+  <LabeledFormInput key="flowDefs_options_title" class="border border-warning p-1 my-4 rounded-lg">
     {#each enumNumVals(WorkflowOptions) as option}
-      <InputWithMessage message={{ key: 'flowDefs_options', params: { option } }} className="my-1">
+      <InputWithMessage message={{ key: 'flowDefs_options', params: { option } }} class="my-1">
         <input
           class="toggle toggle-warning border-warning"
           type="checkbox"
diff --git a/src/routes/(authenticated)/admin/settings/workflow-definitions/new/+page.svelte b/src/routes/(authenticated)/admin/settings/workflow-definitions/new/+page.svelte
index ddf787332..fb57c9bf7 100644
--- a/src/routes/(authenticated)/admin/settings/workflow-definitions/new/+page.svelte
+++ b/src/routes/(authenticated)/admin/settings/workflow-definitions/new/+page.svelte
@@ -48,12 +48,7 @@
     <span class="validator-hint">{m.formErrors_nameEmpty()}</span>
   </LabeledFormInput>
   <LabeledFormInput key="flowDefs_storeType">
-    <select
-      class="select select-bordered validator"
-      name="storeType"
-      bind:value={$form.storeType}
-      required
-    >
+    <select class="select validator" name="storeType" bind:value={$form.storeType} required>
       {#each data.options.storeType.toSorted((a, b) => byName(a, b, getLocale())) as type}
         <option value={type.Id}>{type.Name}</option>
       {/each}
@@ -61,12 +56,7 @@
     <span class="validator-hint">{m.flowDefs_emptyStoreType()}</span>
   </LabeledFormInput>
   <LabeledFormInput key="flowDefs_productType">
-    <select
-      class="select select-bordered validator"
-      name="productType"
-      bind:value={$form.productType}
-      required
-    >
+    <select class="select validator" name="productType" bind:value={$form.productType} required>
       {#each enumNumVals(ProductType) as type}
         <option value={type}>
           {m.flowDefs_productTypes({ type })}
@@ -76,12 +66,7 @@
     <span class="validator-hint">{m.flowDefs_emptyProductType()}</span>
   </LabeledFormInput>
   <LabeledFormInput key="flowDefs_type">
-    <select
-      class="select select-bordered validator"
-      name="workflowType"
-      bind:value={$form.workflowType}
-      required
-    >
+    <select class="select validator" name="workflowType" bind:value={$form.workflowType} required>
       {#each enumNumVals(WorkflowType) as type}
         <option value={type}>{m.flowDefs_types({ type })}</option>
       {/each}
@@ -98,7 +83,7 @@
     <span class="validator-hint">&nbsp;</span>
   </LabeledFormInput>
   <LabeledFormInput key="flowDefs_scheme">
-    <select class="select select-bordered" name="workflowScheme" bind:value={$form.workflowScheme}>
+    <select class="select" name="workflowScheme" bind:value={$form.workflowScheme}>
       {#each data.options.schemes.toSorted( (a, b) => byString(a.Code, b.Code, getLocale()) ) as scheme}
         <option value={scheme.Code}>{scheme.Code}</option>
       {/each}
@@ -106,11 +91,7 @@
     <span class="validator-hint">&nbsp;</span>
   </LabeledFormInput>
   <LabeledFormInput key="flowDefs_businessFlow">
-    <select
-      class="select select-bordered"
-      name="workflowBusinessFlow"
-      bind:value={$form.workflowBusinessFlow}
-    >
+    <select class="select" name="workflowBusinessFlow" bind:value={$form.workflowBusinessFlow}>
       {#each businessFlows as flow}
         <option value={flow}>{flow}</option>
       {/each}
@@ -120,18 +101,15 @@
   <LabeledFormInput key="flowDefs_properties">
     <PropertiesEditor
       name="properties"
-      className="w-full"
+      class="w-full"
       bind:value={$form.properties}
       bind:ok={propsOk}
     />
     <span class="validator-hint">&nbsp;</span>
   </LabeledFormInput>
-  <LabeledFormInput
-    key="flowDefs_options_title"
-    classes="border border-warning p-1 my-4 rounded-lg"
-  >
+  <LabeledFormInput key="flowDefs_options_title" class="border border-warning p-1 my-4 rounded-lg">
     {#each enumNumVals(WorkflowOptions) as option}
-      <InputWithMessage message={{ key: 'flowDefs_options', params: { option } }} className="my-1">
+      <InputWithMessage message={{ key: 'flowDefs_options', params: { option } }} class="my-1">
         <input
           class="toggle toggle-warning border-warning"
           type="checkbox"
diff --git a/src/routes/(authenticated)/directory/+page.svelte b/src/routes/(authenticated)/directory/+page.svelte
index 464516d47..30d4dff41 100644
--- a/src/routes/(authenticated)/directory/+page.svelte
+++ b/src/routes/(authenticated)/directory/+page.svelte
@@ -70,12 +70,12 @@
         class="flex flex-row flex-wrap md:flex-nowrap place-content-end items-center gap-1 {mobileSizing}"
       >
         <OrganizationDropdown
-          className={mobileSizing}
+          class={mobileSizing}
           organizations={data.organizations}
           bind:value={$form.organizationId}
           allowNull={true}
         />
-        <Tooltip className="tooltip-bottom {mobileSizing}">
+        <Tooltip class="tooltip-bottom {mobileSizing}">
           <div class="tooltip-content text-left">
             <!-- eslint-disable-next-line svelte/no-at-html-tags -->
             {@html m.directory_searchHelp()}
@@ -91,10 +91,10 @@
         <LanguageCodeTypeahead
           bind:langCode={$form.langCode}
           onLangCodeSelected={() => submit()}
-          inputClasses="w-full md:max-w-xs"
+          class={{ input: 'w-full md:max-w-xs' }}
         />
       </div>
-      <select class="select select-bordered {mobileSizing}" bind:value={$form.productDefinitionId}>
+      <select class="select {mobileSizing}" bind:value={$form.productDefinitionId}>
         <option value={null} selected>{m.filters_allProdDefs()}</option>
         {#each data.productDefinitions.toSorted((a, b) => byName(a, b, getLocale())) as pD}
           <option value={pD.Id}>{pD.Name}</option>
diff --git a/src/routes/(authenticated)/organizations/[id=idNumber]/settings/products/+page.svelte b/src/routes/(authenticated)/organizations/[id=idNumber]/settings/products/+page.svelte
index 99ac6844f..b41bfe3f1 100644
--- a/src/routes/(authenticated)/organizations/[id=idNumber]/settings/products/+page.svelte
+++ b/src/routes/(authenticated)/organizations/[id=idNumber]/settings/products/+page.svelte
@@ -34,9 +34,9 @@
     }}
   >
     <Toggle
-      title={{ key: 'org_makePrivateTitle', classes: 'font-bold' }}
+      title={{ key: 'org_makePrivateTitle', class: 'font-bold' }}
       message={{ key: 'org_makePrivateDescription' }}
-      className="pb-2"
+      class="pb-2"
       name="publicByDefault"
       checked={!!data.organization.PublicByDefault}
       inputAttr={{
diff --git a/src/routes/(authenticated)/projects/[filter=projectSelector]/[[orgId=idNumber]]/+page.svelte b/src/routes/(authenticated)/projects/[filter=projectSelector]/[[orgId=idNumber]]/+page.svelte
index b2fde7175..b4e9a0d08 100644
--- a/src/routes/(authenticated)/projects/[filter=projectSelector]/[[orgId=idNumber]]/+page.svelte
+++ b/src/routes/(authenticated)/projects/[filter=projectSelector]/[[orgId=idNumber]]/+page.svelte
@@ -194,7 +194,7 @@
       <div
         class="flex flex-row flex-wrap md:flex-nowrap place-content-end items-center mx-4 gap-1 {mobileSizing}"
       >
-        <Tooltip className="tooltip-bottom {mobileSizing}">
+        <Tooltip class="tooltip-bottom {mobileSizing}">
           <div class="tooltip-content text-left">
             <!-- eslint-disable-next-line svelte/no-at-html-tags -->
             {@html m.directory_searchHelp()}
@@ -214,7 +214,7 @@
       >
         <input type="hidden" name="projectId" value={null} />
         {#if data.allowActions && (canArchiveSelected || !selectedProjects.length)}
-          <BlockIfJobsUnavailable className="btn btn-outline {mobileSizing}">
+          <BlockIfJobsUnavailable class="btn btn-outline {mobileSizing}">
             {#snippet altContent()}
               {m.common_archive()}
             {/snippet}
@@ -234,7 +234,7 @@
           </BlockIfJobsUnavailable>
         {/if}
         {#if data.allowReactivate && (canReactivateSelected || !selectedProjects.length)}
-          <BlockIfJobsUnavailable className="btn btn-outline {mobileSizing}">
+          <BlockIfJobsUnavailable class="btn btn-outline {mobileSizing}">
             {#snippet altContent()}
               {m.common_reactivate()}
             {/snippet}
@@ -254,7 +254,7 @@
           </BlockIfJobsUnavailable>
         {/if}
         {#if data.allowActions && (canArchiveSelected || !selectedProjects.length)}
-          <BlockIfJobsUnavailable className="btn btn-outline {mobileSizing}">
+          <BlockIfJobsUnavailable class="btn btn-outline {mobileSizing}">
             {#snippet altContent()}
               {m.common_rebuild()}
             {/snippet}
@@ -337,7 +337,7 @@
             >
               {m.common_cancel()}
             </button>
-            <BlockIfJobsUnavailable className="btn btn-primary">
+            <BlockIfJobsUnavailable class="btn btn-primary">
               {#snippet altContent()}
                 {m.products_acts_rebuild()}
               {/snippet}
@@ -359,7 +359,7 @@
                 />
               </label>
             </BlockIfJobsUnavailable>
-            <BlockIfJobsUnavailable className="btn btn-primary">
+            <BlockIfJobsUnavailable class="btn btn-primary">
               {#snippet altContent()}
                 {m.products_acts_republish()}
               {/snippet}
@@ -388,7 +388,7 @@
         </form>
       </dialog>
       <div class="flex flex-row flex-wrap gap-1 mx-4 {mobileSizing}">
-        <BlockIfJobsUnavailable className="btn btn-outline {mobileSizing}">
+        <BlockIfJobsUnavailable class="btn btn-outline {mobileSizing}">
           {#snippet altContent()}
             {m.projectImport_title()}
           {/snippet}
@@ -399,7 +399,7 @@
             {@render altContent()}
           </a>
         </BlockIfJobsUnavailable>
-        <BlockIfJobsUnavailable className="btn btn-outline {mobileSizing}">
+        <BlockIfJobsUnavailable class="btn btn-outline {mobileSizing}">
           {#snippet altContent()}
             {m.sidebar_addProject()}
           {/snippet}
diff --git a/src/routes/(authenticated)/projects/[id=idNumber]/+page.svelte b/src/routes/(authenticated)/projects/[id=idNumber]/+page.svelte
index ee5d15842..85246a40c 100644
--- a/src/routes/(authenticated)/projects/[id=idNumber]/+page.svelte
+++ b/src/routes/(authenticated)/projects/[id=idNumber]/+page.svelte
@@ -99,7 +99,7 @@
 
       <div class="grow">
         {#if canEdit}
-          <Tooltip className="tooltip-bottom" tip={m.project_editProject()}>
+          <Tooltip class="tooltip-bottom" tip={m.project_editProject()}>
             <a
               href={localizeHref(`/projects/${projectData.project.Id}/edit`)}
               title={m.project_editProject()}
@@ -193,7 +193,7 @@
               <span class="italic">{m.products_definition()}</span>
             </div>
           </div>
-          <BlockIfJobsUnavailable className="btn btn-outline">
+          <BlockIfJobsUnavailable class="btn btn-outline">
             {#snippet altContent()}
               {m.products_add()}
             {/snippet}
diff --git a/src/routes/(authenticated)/projects/[id=idNumber]/ProductCard.svelte b/src/routes/(authenticated)/projects/[id=idNumber]/ProductCard.svelte
index e5402bab4..4910b72fe 100644
--- a/src/routes/(authenticated)/projects/[id=idNumber]/ProductCard.svelte
+++ b/src/routes/(authenticated)/projects/[id=idNumber]/ProductCard.svelte
@@ -167,18 +167,20 @@
         {$publishedTime}
       </Tooltip>
     </span>
-    <Dropdown labelClasses="px-1" contentClasses="drop-arrow bottom-12 right-0 p-1 min-w-36 w-auto">
+    <Dropdown
+      class={{ label: 'px-1', content: 'drop-arrow bottom-12 right-0 p-1 min-w-36 w-auto' }}
+    >
       {#snippet label()}
         <IconContainer icon="charm:menu-kebab" width="20" />
       {/snippet}
       {#snippet content()}
-        <ul class="menu menu-compact overflow-hidden rounded-md">
+        <ul class="menu menu-sm overflow-hidden rounded-md">
           {#each product.actions as action}
             {@const message =
               //@ts-expect-error this is in fact correct
               m['products_acts_' + action]()}
             <li class="w-full rounded-none">
-              <BlockIfJobsUnavailable className="text-nowrap">
+              <BlockIfJobsUnavailable class="text-nowrap">
                 {#snippet altContent()}
                   {message}
                 {/snippet}
@@ -220,7 +222,7 @@
           {/if}
           {#if canEdit}
             <li class="w-full rounded-none">
-              <BlockIfJobsUnavailable className="text-nowrap text-error">
+              <BlockIfJobsUnavailable class="text-nowrap text-error">
                 {#snippet altContent()}
                   {m.models_delete({ name: m.tasks_product() })}
                 {/snippet}
diff --git a/src/routes/(authenticated)/projects/[id=idNumber]/edit/+page.svelte b/src/routes/(authenticated)/projects/[id=idNumber]/edit/+page.svelte
index bec627cf0..dd24bd372 100644
--- a/src/routes/(authenticated)/projects/[id=idNumber]/edit/+page.svelte
+++ b/src/routes/(authenticated)/projects/[id=idNumber]/edit/+page.svelte
@@ -37,7 +37,7 @@
     <h1>{m.project_editProject()}</h1>
     <div class="flex flex-col gap-2 items-center">
       <div class="row">
-        <LabeledFormInput key="project_name" classes="md:max-w-xs grow">
+        <LabeledFormInput key="project_name" class="md:max-w-xs grow">
           <input
             type="text"
             name="name"
@@ -47,12 +47,12 @@
           />
           <span class="validator-hint">{m.formErrors_nameEmpty()}</span>
         </LabeledFormInput>
-        <LabeledFormInput key="project_owner" classes="md:max-w-xs">
-          <BlockIfJobsUnavailable className="select select-bordered">
+        <LabeledFormInput key="project_owner" class="md:max-w-xs">
+          <BlockIfJobsUnavailable class="select">
             {#snippet altContent()}
               {data.owners.find((o) => o.Id === $form.owner)?.Name}
             {/snippet}
-            <select name="owner" class="select select-bordered" bind:value={$form.owner}>
+            <select name="owner" class="select" bind:value={$form.owner}>
               {#each data.owners.toSorted((a, b) => byName(a, b, getLocale())) as owner}
                 <option value={owner.Id}>{owner.Name}</option>
               {/each}
@@ -61,18 +61,20 @@
         </LabeledFormInput>
       </div>
       <div class="row">
-        <LabeledFormInput key="project_group" classes="md:max-w-xs grow">
-          <select name="group" class="select select-bordered" bind:value={$form.group}>
+        <LabeledFormInput key="project_group" class="md:max-w-xs grow">
+          <select name="group" class="select" bind:value={$form.group}>
             {#each data.groups.toSorted((a, b) => byName(a, b, getLocale())) as group}
               <option value={group.Id}>{group.Name}</option>
             {/each}
           </select>
         </LabeledFormInput>
-        <LabeledFormInput key="project_languageCode" classes="md:max-w-xs">
+        <LabeledFormInput key="project_languageCode" class="md:max-w-xs">
           <LanguageCodeTypeahead
             bind:langCode={$form.language}
-            inputClasses="w-full md:max-w-xs validator"
-            dropdownClasses="left-0"
+            class={{
+              dropdown: 'left-0',
+              input: 'w-full md:max-w-xs validator'
+            }}
             inputElProps={{ required: true, pattern: regExpToInputPattern(langtagRegex) }}
           >
             {#snippet validatorHint()}
@@ -82,7 +84,7 @@
         </LabeledFormInput>
       </div>
       <div class="row">
-        <LabeledFormInput key="project_description" classes="w-full max-w-2xl">
+        <LabeledFormInput key="project_description" class="w-full max-w-2xl">
           <textarea
             name="description"
             class="textarea textarea-bordered h-48 w-full"
diff --git a/src/routes/(authenticated)/projects/[id=idNumber]/forms/Authors.svelte b/src/routes/(authenticated)/projects/[id=idNumber]/forms/Authors.svelte
index 787a3376e..ea62ab63d 100644
--- a/src/routes/(authenticated)/projects/[id=idNumber]/forms/Authors.svelte
+++ b/src/routes/(authenticated)/projects/[id=idNumber]/forms/Authors.svelte
@@ -99,12 +99,7 @@
     {#if canEdit}
       <form action="?/{createEndpoint}" method="post" use:enhance>
         <div class="flex place-content-between space-x-2">
-          <select
-            class="grow select select-bordered"
-            name="author"
-            bind:value={$form.author}
-            required
-          >
+          <select class="grow select" name="author" bind:value={$form.author} required>
             {#if availableAuthors.length}
               {#each availableAuthors.sort((a, b) => byName(a, b, getLocale())) as author}
                 <option value={author.Id}>
@@ -117,7 +112,7 @@
               </option>
             {/if}
           </select>
-          <BlockIfJobsUnavailable className="btn btn-primary">
+          <BlockIfJobsUnavailable class="btn btn-primary">
             {#snippet altContent()}
               {m.authors_submit()}
             {/snippet}
diff --git a/src/routes/(authenticated)/projects/[id=idNumber]/forms/OwnerGroup.svelte b/src/routes/(authenticated)/projects/[id=idNumber]/forms/OwnerGroup.svelte
index 15a24329d..b95e56fdd 100644
--- a/src/routes/(authenticated)/projects/[id=idNumber]/forms/OwnerGroup.svelte
+++ b/src/routes/(authenticated)/projects/[id=idNumber]/forms/OwnerGroup.svelte
@@ -97,8 +97,10 @@
           <input type="hidden" name="owner" value={project.Owner.Id} bind:this={ownerField} />
           {#if canEdit || canClaim}
             <Dropdown
-              labelClasses="p-0.5 h-auto min-h-0 no-animation flex-nowrap items-center font-normal"
-              contentClasses="drop-arrow arrow-top menu z-20 min-w-[10rem] top-8 right-0"
+              class={{
+                label: 'p-0.5 h-auto min-h-0 no-animation flex-nowrap items-center font-normal',
+                content: 'drop-arrow arrow-top menu z-20 min-w-[10rem] top-8 right-0'
+              }}
               bind:open={ownerOpen}
             >
               {#snippet label()}
@@ -153,8 +155,10 @@
           <input type="hidden" name="group" value={project.Group.Id} bind:this={groupField} />
           {#if canEdit}
             <Dropdown
-              labelClasses="p-0.5 h-auto min-h-0 no-animation flex-nowrap items-center font-normal"
-              contentClasses="drop-arrow arrow-top menu z-20 min-w-[10rem] top-8 right-0"
+              class={{
+                label: 'p-0.5 h-auto min-h-0 no-animation flex-nowrap items-center font-normal',
+                content: 'drop-arrow arrow-top menu z-20 min-w-[10rem] top-8 right-0'
+              }}
               bind:open={groupOpen}
             >
               {#snippet label()}
diff --git a/src/routes/(authenticated)/projects/[id=idNumber]/forms/Reviewers.svelte b/src/routes/(authenticated)/projects/[id=idNumber]/forms/Reviewers.svelte
index d1c606a2c..3d841bf95 100644
--- a/src/routes/(authenticated)/projects/[id=idNumber]/forms/Reviewers.svelte
+++ b/src/routes/(authenticated)/projects/[id=idNumber]/forms/Reviewers.svelte
@@ -4,8 +4,9 @@
   import type { ReviewerSchema } from './valibot';
   import { enhance as svk_enhance } from '$app/forms';
   import IconContainer from '$lib/components/IconContainer.svelte';
+  import LocaleSelector, { getFlag } from '$lib/components/LocaleSelector.svelte';
   import { m } from '$lib/paraglide/messages';
-  import { getLocale, locales } from '$lib/paraglide/runtime';
+  import { getLocale } from '$lib/paraglide/runtime';
   import { byName } from '$lib/utils/sorting';
 
   interface Props {
@@ -34,7 +35,7 @@
   });
 </script>
 
-<div class="card card-bordered border-slate-400 overflow-hidden rounded-md max-w-full">
+<div class="card card-bordered border-slate-400 rounded-md max-w-full">
   <div class="bg-neutral">
     <h2>{m.reviewers_title()}</h2>
   </div>
@@ -92,11 +93,25 @@
             />
           </div>
           <div class="flex flex-row space-x-2">
-            <select name="locale" class="grow select select-bordered" bind:value={$form.language}>
-              {#each locales as locale}
-                <option value={locale}>{locale.split('-')[0]}</option>
-              {/each}
-            </select>
+            <input type="hidden" name="locale" value={$form.language} />
+            <LocaleSelector
+              class={{
+                dropdown: 'dropdown-start w-full',
+                label: 'select bg-none flex-nowrap grow w-full pl-1'
+              }}
+              currentLocale={() => $form.language}
+              onselect={(lang) => ($form.language = lang)}
+            >
+              {#snippet label()}
+                <span class="flex items-center pl-1 w-full">
+                  <span class="grow">
+                    <IconContainer icon="circle-flags:{getFlag($form.language)}" width="24" />
+                    {$form.language?.split('-')[0]}
+                  </span>
+                  <IconContainer icon="gridicons:dropdown" width="20" />
+                </span>
+              {/snippet}
+            </LocaleSelector>
             <button type="submit" class="btn btn-primary">
               {m.reviewers_submit()}
             </button>
diff --git a/src/routes/(authenticated)/projects/[id=idNumber]/forms/valibot.ts b/src/routes/(authenticated)/projects/[id=idNumber]/forms/valibot.ts
index 32ee3bf51..666a5aeae 100644
--- a/src/routes/(authenticated)/projects/[id=idNumber]/forms/valibot.ts
+++ b/src/routes/(authenticated)/projects/[id=idNumber]/forms/valibot.ts
@@ -1,10 +1,11 @@
 import * as v from 'valibot';
+import { locales } from '$lib/paraglide/runtime';
 import { idSchema } from '$lib/valibot';
 
 export const addReviewerSchema = v.object({
   name: v.string(),
   email: v.pipe(v.string(), v.email()),
-  language: v.string()
+  language: v.pipe(v.string(), v.picklist(locales))
 });
 
 export type ReviewerSchema = typeof addReviewerSchema;
diff --git a/src/routes/(authenticated)/projects/[id=idNumber]/modals/DeleteProduct.svelte b/src/routes/(authenticated)/projects/[id=idNumber]/modals/DeleteProduct.svelte
index f1fcee01d..edee797a6 100644
--- a/src/routes/(authenticated)/projects/[id=idNumber]/modals/DeleteProduct.svelte
+++ b/src/routes/(authenticated)/projects/[id=idNumber]/modals/DeleteProduct.svelte
@@ -93,7 +93,7 @@
           >
             {m.common_cancel()}
           </button>
-          <BlockIfJobsUnavailable className="btn btn-error">
+          <BlockIfJobsUnavailable class="btn btn-error">
             {#snippet altContent()}
               {m.common_delete()}
             {/snippet}
diff --git a/src/routes/(authenticated)/projects/[id=idNumber]/modals/Properties.svelte b/src/routes/(authenticated)/projects/[id=idNumber]/modals/Properties.svelte
index c6c49501f..9d9f1837c 100644
--- a/src/routes/(authenticated)/projects/[id=idNumber]/modals/Properties.svelte
+++ b/src/routes/(authenticated)/projects/[id=idNumber]/modals/Properties.svelte
@@ -47,9 +47,9 @@
       <hr />
       <div class="flex flex-col gap-2 items-center w-full pt-2 text-left">
         <input type="hidden" name="productId" value={product.Id} />
-        <LabeledFormInput key="products_properties_computeType" classes="w-full">
+        <LabeledFormInput key="products_properties_computeType" class="w-full">
           <select
-            class="select select-bordered w-full"
+            class="select w-full"
             placeholder={m.products_properties_selectComputeType()}
             onchange={(e) => {
               if (ok) {
@@ -70,7 +70,7 @@
           </select>
         </LabeledFormInput>
         <LabeledFormInput key="products_properties_title">
-          <PropertiesEditor name="properties" className="w-full" bind:value bind:ok />
+          <PropertiesEditor name="properties" class="w-full" bind:value bind:ok />
         </LabeledFormInput>
         <div class="flex flex-row gap-2">
           <button
diff --git a/src/routes/(authenticated)/projects/import/[id=idNumber]/+page.svelte b/src/routes/(authenticated)/projects/import/[id=idNumber]/+page.svelte
index dccd6501c..ee5e15888 100644
--- a/src/routes/(authenticated)/projects/import/[id=idNumber]/+page.svelte
+++ b/src/routes/(authenticated)/projects/import/[id=idNumber]/+page.svelte
@@ -94,21 +94,21 @@
       {m.projectImport_help()}
     </a>
     <div class="flex flex-row gap-4 flex-wrap place-content-center sm:place-content-start p-4">
-      <LabeledFormInput key="project_group" classes="max-w-xs">
-        <select name="group" class="select select-bordered" bind:value={$form.group}>
+      <LabeledFormInput key="project_group" class="max-w-xs">
+        <select name="group" class="select" bind:value={$form.group}>
           {#each data.organization.Groups.toSorted((a, b) => byName(a, b, getLocale())) as group}
             <option value={group.Id}>{group.Name}</option>
           {/each}
         </select>
       </LabeledFormInput>
-      <LabeledFormInput key="project_type" classes="max-w-xs">
-        <select name="type" class="select select-bordered" bind:value={$form.type}>
+      <LabeledFormInput key="project_type" class="max-w-xs">
+        <select name="type" class="select" bind:value={$form.type}>
           {#each data.types.toSorted( (a, b) => byString(a.Description, b.Description, getLocale()) ) as type}
             <option value={type.Id}>{type.Description}</option>
           {/each}
         </select>
       </LabeledFormInput>
-      <LabeledFormInput key="projectImport_file" classes="max-w-xs">
+      <LabeledFormInput key="projectImport_file" class="max-w-xs">
         <input
           type="file"
           class="file-input file-input-bordered"
@@ -169,7 +169,7 @@
       >
         {m.common_cancel()}
       </a>
-      <BlockIfJobsUnavailable className="btn btn-primary w-full max-w-xs">
+      <BlockIfJobsUnavailable class="btn btn-primary w-full max-w-xs">
         {#snippet altContent()}
           {m.common_save()}
         {/snippet}
diff --git a/src/routes/(authenticated)/projects/new/[id=idNumber]/+page.svelte b/src/routes/(authenticated)/projects/new/[id=idNumber]/+page.svelte
index 9553fb401..6f44d37cf 100644
--- a/src/routes/(authenticated)/projects/new/[id=idNumber]/+page.svelte
+++ b/src/routes/(authenticated)/projects/new/[id=idNumber]/+page.svelte
@@ -50,7 +50,7 @@
     <h1 class="pl-2">{m.project_newProject()}</h1>
     <div class="flex flex-col gap-2 items-center">
       <div class="row">
-        <LabeledFormInput key="project_name" classes="md:max-w-xs grow">
+        <LabeledFormInput key="project_name" class="md:max-w-xs grow">
           <input
             type="text"
             name="Name"
@@ -60,8 +60,8 @@
           />
           <span class="validator-hint">{m.formErrors_nameEmpty()}</span>
         </LabeledFormInput>
-        <LabeledFormInput key="project_group" classes="md:max-w-xs">
-          <select name="group" class="select select-bordered" bind:value={$form.group}>
+        <LabeledFormInput key="project_group" class="md:max-w-xs">
+          <select name="group" class="select" bind:value={$form.group}>
             {#each data.organization.Groups.toSorted((a, b) => byName(a, b, getLocale())) as group}
               <option value={group.Id}>{group.Name}</option>
             {/each}
@@ -70,11 +70,13 @@
         </LabeledFormInput>
       </div>
       <div class="row">
-        <LabeledFormInput key="project_languageCode" classes="md:max-w-xs">
+        <LabeledFormInput key="project_languageCode" class="md:max-w-xs">
           <LanguageCodeTypeahead
             bind:langCode={$form.Language}
-            inputClasses="w-full md:max-w-xs validator"
-            dropdownClasses="left-0"
+            class={{
+              dropdown: 'left-0',
+              input: 'w-full md:max-w-xs validator'
+            }}
             inputElProps={{ required: true, pattern: regExpToInputPattern(langtagRegex) }}
           >
             {#snippet validatorHint()}
@@ -82,8 +84,8 @@
             {/snippet}
           </LanguageCodeTypeahead>
         </LabeledFormInput>
-        <LabeledFormInput key="project_type" classes="md:max-w-xs">
-          <select name="type" class="select select-bordered" bind:value={$form.type}>
+        <LabeledFormInput key="project_type" class="md:max-w-xs">
+          <select name="type" class="select" bind:value={$form.type}>
             {#each data.types.toSorted( (a, b) => byString(a.Description, b.Description, getLocale()) ) as type}
               <option value={type.Id}>{type.Description}</option>
             {/each}
@@ -92,7 +94,7 @@
         </LabeledFormInput>
       </div>
       <div class="row">
-        <LabeledFormInput key="project_description" classes="md:max-w-xs">
+        <LabeledFormInput key="project_description" class="md:max-w-xs">
           <textarea
             name="Description"
             class="textarea textarea-bordered h-48 w-full"
@@ -103,7 +105,7 @@
         <Toggle
           title={{ key: 'project_public' }}
           message={{ key: 'project_visibilityDescription' }}
-          className="py-2 md:max-w-xs"
+          class="py-2 md:max-w-xs"
           name="IsPublic"
           inputAttr={{ onchange: () => {} }}
           bind:checked={$form.IsPublic}
@@ -118,7 +120,7 @@
         >
           {m.common_cancel()}
         </a>
-        <BlockIfJobsUnavailable className="btn btn-primary w-full max-w-xs">
+        <BlockIfJobsUnavailable class="btn btn-primary w-full max-w-xs">
           {#snippet altContent()}
             {m.common_save()}
           {/snippet}
diff --git a/src/routes/(authenticated)/tasks/[product_id]/+page.svelte b/src/routes/(authenticated)/tasks/[product_id]/+page.svelte
index 1599aa9f9..b78fa3046 100644
--- a/src/routes/(authenticated)/tasks/[product_id]/+page.svelte
+++ b/src/routes/(authenticated)/tasks/[product_id]/+page.svelte
@@ -125,7 +125,7 @@
         <div class="flex flex-row gap-x-3 py-4">
           {#each data.actions as action, i}
             {@const disabled = i === 0 && checksRemaining}
-            <BlockIfJobsUnavailable className="btn btn-primary">
+            <BlockIfJobsUnavailable class="btn btn-primary">
               {#snippet altContent()}
                 {action}
               {/snippet}
@@ -165,7 +165,7 @@
     <div>
       {#if data.fields.ownerName && data.fields.ownerEmail}
         <div class="flex flex-col gap-x-3 w-full md:flex-row">
-          <LabeledFormInput key="projectTable_owner" classes="md:w-2/4">
+          <LabeledFormInput key="projectTable_owner" class="md:w-2/4">
             <input
               type="text"
               class="input input-bordered w-full"
@@ -173,7 +173,7 @@
               value={data.fields.ownerName}
             />
           </LabeledFormInput>
-          <LabeledFormInput key="profile_email" classes="md:w-2/4">
+          <LabeledFormInput key="profile_email" class="md:w-2/4">
             <input
               type="text"
               class="input input-bordered w-full"
@@ -184,7 +184,7 @@
         </div>
       {/if}
       <div class="flex flex-col gap-x-3 w-full md:flex-row">
-        <LabeledFormInput key="project_name" classes="md:w-2/4">
+        <LabeledFormInput key="project_name" class="md:w-2/4">
           <input
             type="text"
             class="input input-bordered w-full"
@@ -192,7 +192,7 @@
             value={data.fields.projectName}
           />
         </LabeledFormInput>
-        <LabeledFormInput key="project_description" classes="md:w-2/4">
+        <LabeledFormInput key="project_description" class="md:w-2/4">
           <input
             type="text"
             class="input input-bordered w-full"
@@ -203,7 +203,7 @@
       </div>
       {#if data.fields.storeDescription}
         <div class="flex flex-col gap-x-3 md:flex-row">
-          <LabeledFormInput key="stores_name" classes="md:w-2/4">
+          <LabeledFormInput key="stores_name" class="md:w-2/4">
             <input
               type="text"
               class="input input-bordered w-full"
@@ -212,7 +212,7 @@
             />
           </LabeledFormInput>
           {#if data.fields.listingLanguageCode}
-            <LabeledFormInput key="tasks_storeLanguage" classes="md:w-2/4">
+            <LabeledFormInput key="tasks_storeLanguage" class="md:w-2/4">
               <input
                 type="text"
                 class="input input-bordered w-full"
@@ -304,14 +304,14 @@
         {/each}
       </div>
     {/if}
-    <ReleaseInfo release={data.release} classes="border" headerClasses="bg-neutral" />
+    <ReleaseInfo release={data.release} class={{ default: 'border', header: 'bg-neutral' }} />
   {/if}
   {#if data?.files?.length && !waiting}
     {@const locale = getLocale()}
     <h3>{m.products_files_title()}</h3>
     <div class="w-full overflow-x-auto">
       <SortTable
-        className="max-h-none w-full sm:hidden"
+        class="max-h-none w-full sm:hidden"
         data={data.files}
         columns={[
           {
@@ -354,7 +354,7 @@
         {/snippet}
       </SortTable>
       <SortTable
-        className="max-h-none hidden sm:block"
+        class="max-h-none hidden sm:block"
         data={data.files}
         columns={[
           {
@@ -370,7 +370,7 @@
           {
             id: 'url',
             header: m.tasks_downloadURL(),
-            className: 'w-1/2'
+            class: 'w-1/2'
           }
         ]}
       >
@@ -413,7 +413,7 @@
     <h3>{m.reviewers_title()}</h3>
     <div class="w-full overflow-x-auto">
       <SortTable
-        className="max-h-none"
+        class="max-h-none"
         data={data.reviewers}
         columns={[
           {
diff --git a/src/routes/(authenticated)/users/[id=idNumber]/settings/profile/+page.svelte b/src/routes/(authenticated)/users/[id=idNumber]/settings/profile/+page.svelte
index 368e82a4d..4752688ef 100644
--- a/src/routes/(authenticated)/users/[id=idNumber]/settings/profile/+page.svelte
+++ b/src/routes/(authenticated)/users/[id=idNumber]/settings/profile/+page.svelte
@@ -114,8 +114,10 @@
           tzValue = res.item.value;
         }}
         bind:search={tzValue}
-        classes="w-full {!tzValue || timeZoneMap.has(tzValue) ? '' : 'select-error'}"
-        dropdownClasses="w-full bg-base-100"
+        class={{
+          default: ['w-full', tzValue && !timeZoneMap.has(tzValue) && 'select-error'],
+          dropdown: 'w-full bg-base-100'
+        }}
       >
         {#snippet listElement(res, selected)}
           <div class="w-full right-0" class:selected>
@@ -125,7 +127,7 @@
       </TypeaheadInput>
     </LabeledFormInput>
     <InputWithMessage
-      className="mt-4"
+      class="mt-4"
       title={{ key: 'profile_notificationSettingsTitle' }}
       message={{ key: 'profile_optOutOfEmailOption' }}
     >
@@ -137,7 +139,7 @@
       />
     </InputWithMessage>
     <InputWithMessage
-      className="mt-4"
+      class="mt-4"
       title={{ key: 'profile_visibleProfile' }}
       message={{ key: 'profile_visibility_visible' }}
     >
@@ -148,7 +150,7 @@
         bind:checked={$form.visible}
       />
     </InputWithMessage>
-    <InputWithMessage className="mt-4" title={{ key: 'users_table_active' }}>
+    <InputWithMessage class="mt-4" title={{ key: 'users_table_active' }}>
       <input
         type="checkbox"
         name="active"
diff --git a/src/routes/(authenticated)/users/invite/+page.svelte b/src/routes/(authenticated)/users/invite/+page.svelte
index a5d39e62f..73ab82fb7 100644
--- a/src/routes/(authenticated)/users/invite/+page.svelte
+++ b/src/routes/(authenticated)/users/invite/+page.svelte
@@ -73,7 +73,7 @@
         </LabeledFormInput>
         <LabeledFormInput key="project_org">
           <OrganizationDropdown
-            className="w-full"
+            class="w-full"
             selectProperties={{ name: 'organizationId' }}
             bind:value={$form.organizationId}
             organizations={data.groupsByOrg}
@@ -118,7 +118,7 @@
     </div>
     <div class="my-4 flex justify-end gap-2">
       <a class="btn btn-secondary" href={localizeHref(redirectUrl)}>{m.common_cancel()}</a>
-      <BlockIfJobsUnavailable className="btn btn-primary">
+      <BlockIfJobsUnavailable class="btn btn-primary">
         {#snippet altContent()}
           {m.orgMembership_send()}
         {/snippet}
diff --git a/src/routes/(authenticated)/users/org/[[orgId=idNumber]]/+page.svelte b/src/routes/(authenticated)/users/org/[[orgId=idNumber]]/+page.svelte
index 34363f968..945d11f45 100644
--- a/src/routes/(authenticated)/users/org/[[orgId=idNumber]]/+page.svelte
+++ b/src/routes/(authenticated)/users/org/[[orgId=idNumber]]/+page.svelte
@@ -157,7 +157,7 @@
     <div class="flex flex-row items-center">
       <h1>{m.users_title()}</h1>
       {#if isAdminForAny(data.session?.user.roles)}
-        <BlockIfJobsUnavailable className="btn btn-outline">
+        <BlockIfJobsUnavailable class="btn btn-outline">
           {#snippet altContent()}
             <IconContainer icon="mdi:user-add" width="20" />
             <span>{m.orgMembership_title()}</span>
@@ -174,7 +174,7 @@
       use:enhance
       class="flex flex-row flex-wrap place-content-end items-center p-2 gap-1 w-full md:w-auto"
     >
-      <SearchBar bind:value={$form.search} className="w-full md:w-auto" requestSubmit={submit} />
+      <SearchBar bind:value={$form.search} class="w-full md:w-auto" requestSubmit={submit} />
     </form>
   </div>
   <div class="m-4 relative mt-0">
diff --git a/src/routes/(authenticated)/workflow-instances/+page.svelte b/src/routes/(authenticated)/workflow-instances/+page.svelte
index c3a7344db..71a77c4b2 100644
--- a/src/routes/(authenticated)/workflow-instances/+page.svelte
+++ b/src/routes/(authenticated)/workflow-instances/+page.svelte
@@ -73,11 +73,11 @@
       <div
         class="flex flex-row flex-wrap md:flex-nowrap place-content-end items-center gap-1 {mobileSizing}"
       >
-        <SearchBar bind:value={$form.search} className={mobileSizing} requestSubmit={submit} />
+        <SearchBar bind:value={$form.search} class={mobileSizing} requestSubmit={submit} />
       </div>
     </div>
     <div class="flex flex-row flex-wrap gap-1 place-content-start px-4 pt-1 {mobileSizing}">
-      <select class="select select-bordered {mobileSizing}" bind:value={$form.productDefinitionId}>
+      <select class="select {mobileSizing}" bind:value={$form.productDefinitionId}>
         <option value={null} selected>{m.filters_allProdDefs()}</option>
         {#each data.productDefinitions.toSorted((a, b) => byName(a, b, getLocale())) as pD}
           <option value={pD.Id}>{pD.Name}</option>
@@ -107,7 +107,7 @@
           }
         ]}
         serverSide={true}
-        className="max-h-full sm:hidden"
+        class="max-h-full sm:hidden"
         onSort={(field, direction) =>
           form.update((data) => ({ ...data, sort: { field, direction } }))}
         fixedLayout={false}
@@ -118,7 +118,7 @@
           {@const prodDef = instance.Product.ProductDefinition}
           <tr>
             <td class="border">
-              <Tooltip className="text-left" tip={getTimeDateString(instance.DateUpdated)}>
+              <Tooltip class="text-left" tip={getTimeDateString(instance.DateUpdated)}>
                 {$instanceUpdated[instance.i]}
               </Tooltip>
             </td>
@@ -174,7 +174,7 @@
           }
         ]}
         serverSide={true}
-        className="max-h-full hidden sm:block"
+        class="max-h-full hidden sm:block"
         onSort={(field, direction) =>
           form.update((data) => ({ ...data, sort: { field, direction } }))}
         fixedLayout={false}
@@ -185,7 +185,7 @@
           {@const prodDef = instance.Product.ProductDefinition}
           <tr class="cursor-pointer hover:bg-neutral">
             <td class="border">
-              <Tooltip className="text-left" tip={getTimeDateString(instance.DateUpdated)}>
+              <Tooltip class="text-left" tip={getTimeDateString(instance.DateUpdated)}>
                 {$instanceUpdated[instance.i]}
               </Tooltip>
             </td>
diff --git a/src/routes/(authenticated)/workflow-instances/[product_id]/+page.svelte b/src/routes/(authenticated)/workflow-instances/[product_id]/+page.svelte
index a4c5ef22a..ea5114510 100644
--- a/src/routes/(authenticated)/workflow-instances/[product_id]/+page.svelte
+++ b/src/routes/(authenticated)/workflow-instances/[product_id]/+page.svelte
@@ -136,19 +136,19 @@
       </ul>
     </div>
     <span class="navbar-end w-auto">
-      <Dropdown labelClasses="px-1" contentClasses="top-12 right-0 p-1 min-w-36 w-auto">
+      <Dropdown class={{ label: 'px-1', content: 'top-12 right-0 p-1 min-w-36 w-auto' }}>
         {#snippet label()}
           <IconContainer icon="charm:menu-kebab" width="20" />
         {/snippet}
         {#snippet content()}
-          <ul class="menu menu-compact overflow-hidden rounded-md">
+          <ul class="menu menu-sm overflow-hidden rounded-md">
             <li class="w-full rounded-none">
               <button class="text-nowrap" onclick={() => showProductDetails(data.product.Id)}>
                 {m.products_details()}
               </button>
             </li>
             <li class="w-full rounded-none">
-              <BlockIfJobsUnavailable className="text-nowrap">
+              <BlockIfJobsUnavailable class="text-nowrap">
                 {#snippet altContent()}
                   {m.workflowInstances_jump({ state: $form.state })}
                 {/snippet}
diff --git a/src/routes/(unauthenticated)/downloads/apk/[package]/published/+page@.svelte b/src/routes/(unauthenticated)/downloads/apk/[package]/published/+page@.svelte
index 5b2f290ac..a9732b020 100644
--- a/src/routes/(unauthenticated)/downloads/apk/[package]/published/+page@.svelte
+++ b/src/routes/(unauthenticated)/downloads/apk/[package]/published/+page@.svelte
@@ -53,9 +53,10 @@
       href={data.manifest.link}
       download
       target="_blank"
-      class="btn {lightness(data.manifest.color.substring(1 /*ignore #*/)) < 0.5
-        ? 'text-white'
-        : 'text-black'}"
+      class={[
+        'btn',
+        lightness(data.manifest.color.substring(1 /*ignore #*/)) < 0.5 ? 'text-white' : 'text-black'
+      ]}
       style="background-color: {data.manifest.color}"
     >
       {downloadLinkText(data.manifest, lang)}