diff --git a/apps/client/package.json b/apps/client/package.json
index 2ae7b96d0..f788953c3 100644
--- a/apps/client/package.json
+++ b/apps/client/package.json
@@ -5,13 +5,10 @@
   "type": "module",
   "dependencies": {
     "@base-ui-components/react": "1.0.0-beta.1",
-    "@chakra-ui/react": "^2.7.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@emotion/is-prop-valid": "^1.3.1",
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
     "@fontsource/open-sans": "^5.0.28",
     "@mantine/hooks": "^8.1.2",
     "@sentry/react": "^8.43.0",
@@ -22,7 +19,6 @@
     "autosize": "^6.0.1",
     "axios": "^1.9.0",
     "csv-stringify": "^6.4.5",
-    "framer-motion": "^10.10.0",
     "prismjs": "^1.29.0",
     "react": "^18.3.1",
     "react-colorful": "^5.6.1",
@@ -80,7 +76,6 @@
     "eslint-plugin-react-compiler": "19.1.0-rc.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^8.0.0",
-    "happy-dom": "^16.7.2",
     "ontime-types": "workspace:*",
     "ontime-utils": "workspace:*",
     "prettier": "catalog:",
diff --git a/apps/client/src/App.tsx b/apps/client/src/App.tsx
index 81e140fe5..d63dd0a13 100644
--- a/apps/client/src/App.tsx
+++ b/apps/client/src/App.tsx
@@ -1,6 +1,5 @@
 import { BrowserRouter } from 'react-router-dom';
 import { Tooltip } from '@base-ui-components/react/tooltip';
-import { ChakraProvider } from '@chakra-ui/react';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
@@ -9,7 +8,6 @@ import IdentifyOverlay from './common/components/identify-overlay/IdentifyOverla
 import { AppContextProvider } from './common/context/AppContext';
 import { ontimeQueryClient } from './common/queryClient';
 import { connectSocket } from './common/utils/socket';
-import theme from './theme/theme';
 import { TranslationProvider } from './translation/TranslationProvider';
 import AppRouter from './AppRouter';
 import { baseURI } from './externals';
@@ -18,28 +16,26 @@ connectSocket();
 
 function App() {
   return (
-    <ChakraProvider disableGlobalStyle resetCSS theme={theme}>
-      <QueryClientProvider client={ontimeQueryClient}>
-        <AppContextProvider>
-          <Tooltip.Provider>
-            <BrowserRouter basename={baseURI}>
-              <div className='App'>
-                <ErrorBoundary>
-                  <TranslationProvider>
-                    <IdentifyOverlay />
-                    <AppRouter />
-                  </TranslationProvider>
-                </ErrorBoundary>
-                <ReactQueryDevtools initialIsOpen={false} />
-              </div>
+    <QueryClientProvider client={ontimeQueryClient}>
+      <AppContextProvider>
+        <Tooltip.Provider>
+          <BrowserRouter basename={baseURI}>
+            <div className='App'>
               <ErrorBoundary>
-                <div id='identify-portal' />
+                <TranslationProvider>
+                  <IdentifyOverlay />
+                  <AppRouter />
+                </TranslationProvider>
               </ErrorBoundary>
-            </BrowserRouter>
-          </Tooltip.Provider>
-        </AppContextProvider>
-      </QueryClientProvider>
-    </ChakraProvider>
+              <ReactQueryDevtools initialIsOpen={false} />
+            </div>
+            <ErrorBoundary>
+              <div id='identify-portal' />
+            </ErrorBoundary>
+          </BrowserRouter>
+        </Tooltip.Provider>
+      </AppContextProvider>
+    </QueryClientProvider>
   );
 }
 
diff --git a/apps/client/src/common/components/context-menu/ContextMenu.module.scss b/apps/client/src/common/components/context-menu/ContextMenu.module.scss
deleted file mode 100644
index da0e345a0..000000000
--- a/apps/client/src/common/components/context-menu/ContextMenu.module.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.contextMenuButton {
-  position: absolute;
-}
-
-.contextMenuBackdrop {
-  position: fixed;
-  inset: 0;
-}
diff --git a/apps/client/src/common/components/context-menu/ContextMenu.tsx b/apps/client/src/common/components/context-menu/ContextMenu.tsx
deleted file mode 100644
index 331532ee4..000000000
--- a/apps/client/src/common/components/context-menu/ContextMenu.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-// logic (with some modifications) culled from:
-// https://github.com/lukasbach/chakra-ui-contextmenu/blob/main/src/ContextMenu.tsx
-
-import { ReactElement } from 'react';
-import { IconType } from 'react-icons';
-import { Menu, MenuButton, MenuGroup, MenuList } from '@chakra-ui/react';
-import { create } from 'zustand';
-
-import { ContextMenuOption } from './ContextMenuOption';
-
-import style from './ContextMenu.module.scss';
-
-type ContextMenuCoords = {
-  x: number;
-  y: number;
-};
-
-export type OptionWithoutGroup = {
-  label: string;
-  isDisabled?: boolean;
-  icon: IconType;
-  onClick: () => void;
-  withDivider?: boolean;
-};
-
-type OptionWithGroup = {
-  label: string;
-  group: Omit<OptionWithoutGroup, 'isGroup'>[];
-};
-
-export type Option = OptionWithoutGroup | OptionWithGroup;
-
-const isOptionWithGroup = (option: Option): option is OptionWithGroup => 'group' in option;
-
-type ContextMenuStore = {
-  coords: ContextMenuCoords;
-  options: Option[];
-  isOpen: boolean;
-  setContextMenu: (coords: ContextMenuCoords, options: Option[]) => void;
-  setIsOpen: (newIsOpen: boolean) => void;
-};
-
-export const useContextMenuStore = create<ContextMenuStore>((set) => ({
-  coords: { x: 0, y: 0 },
-  options: [],
-  isOpen: false,
-  setContextMenu: (coords, options) => set(() => ({ coords, options, isOpen: true })),
-  setIsOpen: (newIsOpen) => set(() => ({ isOpen: newIsOpen })),
-}));
-
-interface ContextMenuProps {
-  // ReactElement type required due to early `return` (line 51) returning {children}
-  children: ReactElement;
-}
-
-export const ContextMenu = ({ children }: ContextMenuProps) => {
-  const { coords, options, isOpen, setIsOpen } = useContextMenuStore();
-
-  const onClose = () => {
-    return setIsOpen(false);
-  };
-
-  if (!isOpen) {
-    return children;
-  }
-
-  return (
-    <>
-      {children}
-      <div className={style.contextMenuBackdrop} />
-      <Menu isOpen size='sm' gutter={0} onClose={onClose} isLazy lazyBehavior='unmount' variant='ontime-on-dark'>
-        <MenuButton
-          className={style.contextMenuButton}
-          aria-hidden
-          w={1}
-          h={1}
-          style={{
-            position: 'fixed',
-            left: coords.x,
-            top: coords.y,
-          }}
-        />
-        <MenuList>
-          {options.map((option) =>
-            isOptionWithGroup(option) ? (
-              <MenuGroup key={option.label} title={option.label}>
-                {option.group.map((groupOption) => (
-                  <ContextMenuOption key={groupOption.label} {...groupOption} />
-                ))}
-              </MenuGroup>
-            ) : (
-              <ContextMenuOption key={option.label} {...option} />
-            ),
-          )}
-        </MenuList>
-      </Menu>
-    </>
-  );
-};
diff --git a/apps/client/src/common/components/context-menu/ContextMenuOption.tsx b/apps/client/src/common/components/context-menu/ContextMenuOption.tsx
deleted file mode 100644
index 0518e2ebf..000000000
--- a/apps/client/src/common/components/context-menu/ContextMenuOption.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { MenuDivider, MenuItem } from '@chakra-ui/react';
-
-import { OptionWithoutGroup } from './ContextMenu';
-
-export const ContextMenuOption = ({ label, onClick, isDisabled, icon: Icon, withDivider }: OptionWithoutGroup) => (
-  <>
-    {withDivider && <MenuDivider />}
-    <MenuItem icon={<Icon style={{ fontSize: '1rem' }} />} onClick={onClick} isDisabled={isDisabled}>
-      {label}
-    </MenuItem>
-  </>
-);
diff --git a/apps/client/src/common/components/copy-tag/CopyTag.module.scss b/apps/client/src/common/components/copy-tag/CopyTag.module.scss
new file mode 100644
index 000000000..ef4d711f3
--- /dev/null
+++ b/apps/client/src/common/components/copy-tag/CopyTag.module.scss
@@ -0,0 +1,40 @@
+.copytag {
+  display: flex;
+  align-items: center;
+}
+
+.action {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.label {
+  border-radius: 3px 0 0 3px;
+  border: 1px solid $gray-1200;
+  background-color: $white-3;
+  padding-inline: 0.5rem 1rem;
+  line-height: 1em;
+  display: flex;
+  align-items: center;
+  color: $label-gray;
+}
+
+.small {
+  height: 1.5rem;
+  font-size: calc(1rem - 3px);
+}
+
+.medium {
+  height: 2rem;
+  font-size: calc(1rem - 2px);
+}
+
+.large {
+  height: 2.5rem;
+  font-weight: 600;
+}
+
+.copy {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
diff --git a/apps/client/src/common/components/copy-tag/CopyTag.tsx b/apps/client/src/common/components/copy-tag/CopyTag.tsx
index 308041bfb..9b9ab9957 100644
--- a/apps/client/src/common/components/copy-tag/CopyTag.tsx
+++ b/apps/client/src/common/components/copy-tag/CopyTag.tsx
@@ -1,22 +1,28 @@
 import { PropsWithChildren, useState } from 'react';
 import { IoCheckmark } from 'react-icons/io5';
 import { IoCopy } from 'react-icons/io5';
-import { Button, ButtonGroup, IconButton, Tooltip } from '@chakra-ui/react';
 
-import { tooltipDelayFast } from '../../../ontimeConfig';
-import { Size } from '../../models/Util.type';
 import copyToClipboard from '../../utils/copyToClipboard';
+import { cx } from '../../utils/styleUtils';
+import Button from '../buttons/Button';
+import IconButton from '../buttons/IconButton';
+
+import style from './CopyTag.module.scss';
 
 interface CopyTagProps {
   copyValue: string;
-  label: string;
-  size?: Size;
   disabled?: boolean;
   onClick?: () => void;
+  size?: 'small' | 'medium' | 'large';
 }
 
-export default function CopyTag(props: PropsWithChildren<CopyTagProps>) {
-  const { copyValue, label, size = 'xs', disabled, children, onClick } = props;
+export default function CopyTag({
+  copyValue,
+  disabled,
+  size = 'medium',
+  children,
+  onClick,
+}: PropsWithChildren<CopyTagProps>) {
   const [copied, setCopied] = useState(false);
 
   const handleClick = () => {
@@ -28,20 +34,24 @@ export default function CopyTag(props: PropsWithChildren<CopyTagProps>) {
   };
 
   return (
-    <Tooltip label={label} openDelay={tooltipDelayFast}>
-      <ButtonGroup size={size} isAttached>
-        <Button variant='ontime-subtle' tabIndex={-1} onClick={onClick} isDisabled={disabled}>
+    <div className={style.copytag}>
+      {onClick !== undefined ? (
+        <Button className={style.action} size={size} tabIndex={-1} onClick={onClick} disabled={disabled}>
           {children}
         </Button>
-        <IconButton
-          aria-label={label}
-          icon={copied ? <IoCheckmark /> : <IoCopy />}
-          variant='ontime-filled'
-          tabIndex={-1}
-          onClick={handleClick}
-          isDisabled={disabled}
-        />
-      </ButtonGroup>
-    </Tooltip>
+      ) : (
+        <div className={cx([style.label, style[size]])}>{children}</div>
+      )}
+      <IconButton
+        className={style.copy}
+        variant='primary'
+        size={size}
+        tabIndex={-1}
+        onClick={handleClick}
+        disabled={disabled}
+      >
+        {copied ? <IoCheckmark /> : <IoCopy />}
+      </IconButton>
+    </div>
   );
 }
diff --git a/apps/client/src/common/components/dialog/Dialog.module.scss b/apps/client/src/common/components/dialog/Dialog.module.scss
index 8eab95871..a8370909e 100644
--- a/apps/client/src/common/components/dialog/Dialog.module.scss
+++ b/apps/client/src/common/components/dialog/Dialog.module.scss
@@ -3,7 +3,6 @@
   top: 10%;
   left: 50%;
 
-  z-index: $zindex-dialog;
   transform: translateX(-50%);
 
   padding-inline: 1rem;
@@ -19,7 +18,6 @@
 .backdrop {
   position: fixed;
   inset: 0;
-  z-index: $zindex-backdrop;
   background-color: $backdrop-color;
   transition: opacity 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
 
diff --git a/apps/client/src/common/components/dropdown-menu/DropdownMenu.tsx b/apps/client/src/common/components/dropdown-menu/DropdownMenu.tsx
index b7f2a4e12..9181871fd 100644
--- a/apps/client/src/common/components/dropdown-menu/DropdownMenu.tsx
+++ b/apps/client/src/common/components/dropdown-menu/DropdownMenu.tsx
@@ -1,4 +1,5 @@
-import { PropsWithChildren, ReactNode } from 'react';
+import { PropsWithChildren } from 'react';
+import { IconType } from 'react-icons';
 import { Menu as BaseMenu } from '@base-ui-components/react/menu';
 
 import style from './DropdownMenu.module.scss';
@@ -7,13 +8,15 @@ type DropdownMenuItemDivider = { type: 'divider' };
 type DropdownMenuItem = {
   type: 'item';
   label: string;
-  icon?: ReactNode;
+  icon?: IconType;
   disabled?: boolean;
   onClick: () => void;
 };
 
+export type DropdownMenuOption = DropdownMenuItemDivider | DropdownMenuItem;
+
 interface DropdownMenuProps extends BaseMenu.Trigger.Props {
-  items: Array<DropdownMenuItemDivider | DropdownMenuItem>;
+  items: DropdownMenuOption[];
 }
 
 export function DropdownMenu({ items, children, ...triggerProps }: PropsWithChildren<DropdownMenuProps>) {
@@ -29,7 +32,8 @@ export function DropdownMenu({ items, children, ...triggerProps }: PropsWithChil
               }
               return (
                 <BaseMenu.Item key={index} className={style.item} onClick={item.onClick} disabled={item.disabled}>
-                  {item.icon} {item.label}
+                  {item.icon && <item.icon />}
+                  {item.label}
                 </BaseMenu.Item>
               );
             })}
@@ -55,12 +59,9 @@ export function PositionedDropdownMenu({ items, isOpen, position, onClose }: Pos
         if (!open) onClose();
       }}
     >
-      <BaseMenu.Trigger
-        style={{ position: 'absolute', left: position.x, top: position.y, pointerEvents: 'none' }}
-        aria-hidden
-      />
+      <BaseMenu.Trigger style={{ position: 'fixed', left: position.x, top: position.y }} aria-hidden />
       <BaseMenu.Portal>
-        <BaseMenu.Positioner className={style.positioner} align='start' sideOffset={8}>
+        <BaseMenu.Positioner className={style.positioner} align='start' sideOffset={8} alignOffset={8}>
           <BaseMenu.Popup className={style.popup}>
             {items.map((item, index) => {
               if (item.type === 'divider') {
@@ -68,7 +69,8 @@ export function PositionedDropdownMenu({ items, isOpen, position, onClose }: Pos
               }
               return (
                 <BaseMenu.Item key={index} className={style.item} onClick={item.onClick} disabled={item.disabled}>
-                  {item.icon} {item.label}
+                  {item.icon && <item.icon />}
+                  {item.label}
                 </BaseMenu.Item>
               );
             })}
diff --git a/apps/client/src/common/components/identify-overlay/IdentifyOverlay.module.scss b/apps/client/src/common/components/identify-overlay/IdentifyOverlay.module.scss
index e37204230..85f0f8938 100644
--- a/apps/client/src/common/components/identify-overlay/IdentifyOverlay.module.scss
+++ b/apps/client/src/common/components/identify-overlay/IdentifyOverlay.module.scss
@@ -15,7 +15,6 @@
   display: grid;
   place-content: center;
   text-align: center;
-  z-index: $zindex-modal;
   cursor: pointer;
 }
 
diff --git a/apps/client/src/common/components/input/auto-text-area/AutoTextArea.tsx b/apps/client/src/common/components/input/auto-text-area/AutoTextArea.tsx
deleted file mode 100644
index 9fc23c8ed..000000000
--- a/apps/client/src/common/components/input/auto-text-area/AutoTextArea.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { RefObject, useEffect } from 'react';
-import { Textarea, TextareaProps } from '@chakra-ui/react';
-// @ts-expect-error no types from library
-import autosize from 'autosize/dist/autosize';
-
-export const AutoTextArea = (props: TextareaProps & { inputref: RefObject<unknown> }) => {
-  const { value, inputref } = props;
-
-  useEffect(() => {
-    const node = inputref.current;
-    autosize(inputref.current);
-    return () => {
-      autosize.destroy(node);
-    };
-  }, [inputref, value]);
-
-  return (
-    <Textarea
-      overflow='hidden'
-      w='100%'
-      ref={inputref}
-      resize='none'
-      transition='height none'
-      variant='ontime-transparent'
-      {...props}
-    />
-  );
-};
diff --git a/apps/client/src/common/components/input/auto-textarea/AutoTextarea.tsx b/apps/client/src/common/components/input/auto-textarea/AutoTextarea.tsx
new file mode 100644
index 000000000..c7a5b3928
--- /dev/null
+++ b/apps/client/src/common/components/input/auto-textarea/AutoTextarea.tsx
@@ -0,0 +1,26 @@
+import { RefObject, useEffect } from 'react';
+// @ts-expect-error no types from library
+import autosize from 'autosize/dist/autosize';
+
+import Textarea, { type TextareaProps } from '../textarea/Textarea';
+
+interface AutoTextAreaProps extends TextareaProps {
+  inputref: RefObject<HTMLTextAreaElement>;
+}
+
+/**
+ * A textarea that automatically resizes based on its content
+ */
+export function AutoTextarea({ value, inputref, ...textAreaProps }: AutoTextAreaProps) {
+  // when the value changes, we use the ref to reapply autosize
+  useEffect(() => {
+    const node = inputref.current;
+    autosize(inputref.current);
+
+    return () => {
+      autosize.destroy(node);
+    };
+  }, [inputref, value]);
+
+  return <Textarea ref={inputref} value={value} {...textAreaProps} />;
+}
diff --git a/apps/client/src/common/components/input/colour-input/SwatchPicker.tsx b/apps/client/src/common/components/input/colour-input/SwatchPicker.tsx
index 1545f6a76..3686c9f6b 100644
--- a/apps/client/src/common/components/input/colour-input/SwatchPicker.tsx
+++ b/apps/client/src/common/components/input/colour-input/SwatchPicker.tsx
@@ -1,9 +1,8 @@
-import { useCallback } from 'react';
 import { useController, UseControllerProps } from 'react-hook-form';
 import { IoEyedrop } from 'react-icons/io5';
+import { useDebouncedCallback } from '@mantine/hooks';
 import { ViewSettings } from 'ontime-types';
 
-import { debounce } from '../../../utils/debounce';
 import { cx, getAccessibleColour } from '../../../utils/styleUtils';
 import PopoverPicker from '../popover-picker/PopoverPicker';
 
@@ -19,12 +18,9 @@ interface SwatchPickerProps {
 export default function SwatchPicker(props: SwatchPickerProps) {
   const { color, onChange, isSelected, alwaysDisplayColor } = props;
 
-  const debouncedOnChange = useCallback(
-    debounce((newValue: string) => {
-      onChange(newValue);
-    }, 500),
-    [onChange],
-  );
+  const debouncedOnChange = useDebouncedCallback((newValue: string) => {
+    onChange(newValue);
+  }, 100);
 
   const displayColor = alwaysDisplayColor || isSelected ? color : '';
   const { color: iconColor } = getAccessibleColour(displayColor);
diff --git a/apps/client/src/common/components/input/delay-input/BlockRadio.module.scss b/apps/client/src/common/components/input/delay-input/BlockRadio.module.scss
new file mode 100644
index 000000000..2b4d185df
--- /dev/null
+++ b/apps/client/src/common/components/input/delay-input/BlockRadio.module.scss
@@ -0,0 +1,62 @@
+.radioGroup {
+  color: $gray-900;
+  font-size: calc(1rem - 3px);
+  color: $label-gray;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  line-height: 1.2em;
+
+  &:has([data-checked]) {
+    color: $ui-white;
+  }
+}
+
+.radio {
+  box-sizing: border-box;
+  display: flex;
+  width: 0.75rem;
+  height: 0.75rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+  outline: 0;
+  border: none;
+
+  &[data-unchecked] {
+    background-color: $gray-1200;
+  }
+
+  &[data-checked] {
+    background-color: $gray-1200;
+
+    &:hover {
+      border-color: $gray-1000;
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid $blue-500;
+    outline-offset: 2px;
+  }
+}
+
+.indicator {
+  display: grid;
+  place-content: center;
+
+  &[data-unchecked] {
+    display: none;
+  }
+
+  &::before {
+    content: '';
+    border-radius: 100%;
+    width: 0.5em;
+    height: 0.5em;
+    background-color: $blue-500;
+  }
+}
diff --git a/apps/client/src/common/components/input/delay-input/BlockRadio.tsx b/apps/client/src/common/components/input/delay-input/BlockRadio.tsx
new file mode 100644
index 000000000..e72db984a
--- /dev/null
+++ b/apps/client/src/common/components/input/delay-input/BlockRadio.tsx
@@ -0,0 +1,35 @@
+import { Radio } from '@base-ui-components/react/radio';
+import { RadioGroup as BaseRadioGroup } from '@base-ui-components/react/radio-group';
+
+import style from './BlockRadio.module.scss';
+
+interface BlockRadioProps<T extends string | number | boolean> extends Omit<BaseRadioGroup.Props, 'onValueChange'> {
+  items: {
+    value: T;
+    label: string;
+  }[];
+  onValueChange?: (value: T) => void;
+}
+
+export default function BlockRadio<T extends string | number | boolean>({
+  items,
+  onValueChange,
+  ...elementProps
+}: BlockRadioProps<T>) {
+  return (
+    <BaseRadioGroup
+      onValueChange={(value) => onValueChange?.(value as T)}
+      className={style.radioGroup}
+      {...elementProps}
+    >
+      {items.map((item) => (
+        <label className={style.item} key={item.value.toString()}>
+          <Radio.Root value={item.value.toString()} className={style.radio}>
+            <Radio.Indicator className={style.indicator} />
+          </Radio.Root>
+          {item.label}
+        </label>
+      ))}
+    </BaseRadioGroup>
+  );
+}
diff --git a/apps/client/src/common/components/input/delay-input/DelayInput.module.scss b/apps/client/src/common/components/input/delay-input/DelayInput.module.scss
index eb0e8c1ef..db1d5cae5 100644
--- a/apps/client/src/common/components/input/delay-input/DelayInput.module.scss
+++ b/apps/client/src/common/components/input/delay-input/DelayInput.module.scss
@@ -1,22 +1,12 @@
-$input-font-size: 15px;
-
 .delayInput {
   display: flex;
   gap: $element-spacing;
   align-items: center;
-  font-size: $text-body-size;
-
-
-  .inputField {
-    font-size: $input-font-size;
-    letter-spacing: 0.5px;
-    max-width: 7em;
-    padding-left: 16px;
-    color: $ontime-delay-text
-  }
 }
 
-.delayOptions {
-  display: flex;
-  flex-direction: column;
+.inputField {
+  text-align: center;
+  letter-spacing: 1px;
+  max-width: 7em;
+  color: $ontime-delay-text
 }
diff --git a/apps/client/src/common/components/input/delay-input/DelayInput.tsx b/apps/client/src/common/components/input/delay-input/DelayInput.tsx
index bf4e22851..157fb90e4 100644
--- a/apps/client/src/common/components/input/delay-input/DelayInput.tsx
+++ b/apps/client/src/common/components/input/delay-input/DelayInput.tsx
@@ -1,8 +1,10 @@
 import { KeyboardEvent, useEffect, useRef, useState } from 'react';
-import { Input, Radio, RadioGroup } from '@chakra-ui/react';
 import { millisToString, parseUserTime } from 'ontime-utils';
 
 import { useEntryActions } from '../../../hooks/useEntryAction';
+import Input from '../input/Input';
+
+import BlockRadio from './BlockRadio';
 
 import style from './DelayInput.module.scss';
 
@@ -105,13 +107,10 @@ export default function DelayInput(props: DelayInputProps) {
   return (
     <div className={style.delayInput}>
       <Input
-        size='sm'
         ref={inputRef}
         data-testid='delay-input'
         className={style.inputField}
-        type='text'
         placeholder='-'
-        variant='ontime-filled'
         onFocus={handleFocus}
         onChange={(event) => setValue(event.target.value)}
         onBlur={(event) => validateAndSubmit(event.target.value)}
@@ -119,16 +118,14 @@ export default function DelayInput(props: DelayInputProps) {
         value={value}
         maxLength={9}
       />
-      <RadioGroup
-        className={style.delayOptions}
-        onChange={handleSlipChange}
+      <BlockRadio
+        onValueChange={handleSlipChange}
         value={checkedOption}
-        variant='ontime-block'
-        size='sm'
-      >
-        <Radio value='add'>Add time</Radio>
-        <Radio value='subtract'>Subtract time</Radio>
-      </RadioGroup>
+        items={[
+          { value: 'add', label: 'Add time' },
+          { value: 'subtract', label: 'Subtract time' },
+        ]}
+      />
     </div>
   );
 }
diff --git a/apps/client/src/common/components/input/popover-picker/PopoverPicker.module.scss b/apps/client/src/common/components/input/popover-picker/PopoverPicker.module.scss
index 416e29622..76cf4382a 100644
--- a/apps/client/src/common/components/input/popover-picker/PopoverPicker.module.scss
+++ b/apps/client/src/common/components/input/popover-picker/PopoverPicker.module.scss
@@ -1,20 +1,36 @@
+// styles from Input.module.scss
 .input {
-  color: $gray-200;
-  border: 1px solid transparent;
-  border-radius: 0 0 8px 8px;
-  background-color: $gray-1200;
-  padding: 0 0.5rem;
+  width: 100%;
+  margin-top: 0.25rem;
+  box-sizing: border-box;
+
   font-size: 1rem;
+  font-weight: 400;
+  color: $gray-200;
+  border-radius: $component-border-radius-md;
+  background-color: $gray-1200;
+  border: 1px solid transparent;
+
   height: 2rem;
+  padding-inline: 0.5em;
   outline: none;
 
-  &:hover {
+  &:hover:not(:disabled) {
     background-color: $gray-1100;
   }
 
-  &:focus {
+  &:focus:not(:read-only) {
     background-color: $gray-1000;
-    color: $gray-50;
     border: 1px solid $blue-500;
   }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  &::placeholder {
+    color: $gray-500;
+    letter-spacing: 0;
+  }
 }
diff --git a/apps/client/src/common/components/input/popover-picker/PopoverPicker.tsx b/apps/client/src/common/components/input/popover-picker/PopoverPicker.tsx
index bc370ea1a..d6e0128c7 100644
--- a/apps/client/src/common/components/input/popover-picker/PopoverPicker.tsx
+++ b/apps/client/src/common/components/input/popover-picker/PopoverPicker.tsx
@@ -1,6 +1,8 @@
 import { PropsWithChildren } from 'react';
 import { HexAlphaColorPicker, HexColorInput } from 'react-colorful';
-import { Popover, PopoverContent, PopoverTrigger } from '@chakra-ui/react';
+import { Popover } from '@base-ui-components/react/popover';
+
+import PopoverContents from '../../popover/Popover';
 
 import style from './PopoverPicker.module.scss';
 
@@ -9,15 +11,14 @@ interface PopoverPickerProps {
   onChange: (color: string) => void;
 }
 
-export default function PopoverPicker(props: PropsWithChildren<PopoverPickerProps>) {
-  const { color, onChange, children } = props;
+export default function PopoverPicker({ color, onChange, children }: PropsWithChildren<PopoverPickerProps>) {
   return (
-    <Popover>
-      <PopoverTrigger>{children}</PopoverTrigger>
-      <PopoverContent className={style.small} style={{ borderRadius: '9px', width: 'auto' }}>
+    <Popover.Root>
+      <Popover.Trigger>{children}</Popover.Trigger>
+      <PopoverContents>
         <HexAlphaColorPicker color={color} onChange={onChange} />
         <HexColorInput color={color} onChange={onChange} className={style.input} prefixed />
-      </PopoverContent>
-    </Popover>
+      </PopoverContents>
+    </Popover.Root>
   );
 }
diff --git a/apps/client/src/common/components/input/text-input/useReactiveTextInput.tsx b/apps/client/src/common/components/input/text-input/useReactiveTextInput.tsx
index 305458b50..9a2de9f80 100644
--- a/apps/client/src/common/components/input/text-input/useReactiveTextInput.tsx
+++ b/apps/client/src/common/components/input/text-input/useReactiveTextInput.tsx
@@ -11,7 +11,7 @@ interface UseReactiveTextInputReturn {
 export default function useReactiveTextInput(
   initialText: string,
   submitCallback: (newValue: string) => void,
-  ref: RefObject<HTMLInputElement>,
+  ref: RefObject<HTMLInputElement | HTMLTextAreaElement>,
   options?: {
     submitOnEnter?: boolean;
     submitOnCtrlEnter?: boolean;
@@ -101,25 +101,31 @@ export default function useReactiveTextInput(
     ];
 
     if (options?.submitOnEnter) {
-      hotKeys.push(['Enter', () => {
-        isKeyboardSubmitting.current = true;
-        handleSubmit(text);
-        // clear flag after blur has been processed
-        setTimeout(() => {
-          isKeyboardSubmitting.current = false;
-        }, 0);
-      }]);
+      hotKeys.push([
+        'Enter',
+        () => {
+          isKeyboardSubmitting.current = true;
+          handleSubmit(text);
+          // clear flag after blur has been processed
+          setTimeout(() => {
+            isKeyboardSubmitting.current = false;
+          }, 0);
+        },
+      ]);
     }
 
     if (options?.submitOnCtrlEnter) {
-      hotKeys.push(['mod + Enter', () => {
-        isKeyboardSubmitting.current = true;
-        handleSubmit(text);
-        // clear flag after blur has been processed
-        setTimeout(() => {
-          isKeyboardSubmitting.current = false;
-        }, 0);
-      }]);
+      hotKeys.push([
+        'mod + Enter',
+        () => {
+          isKeyboardSubmitting.current = true;
+          handleSubmit(text);
+          // clear flag after blur has been processed
+          setTimeout(() => {
+            isKeyboardSubmitting.current = false;
+          }, 0);
+        },
+      ]);
     }
 
     const hotKeyHandler = getHotkeyHandler(hotKeys);
diff --git a/apps/client/src/common/components/input/textarea/Textarea.module.scss b/apps/client/src/common/components/input/textarea/Textarea.module.scss
index c4f68d291..d5b30ca09 100644
--- a/apps/client/src/common/components/input/textarea/Textarea.module.scss
+++ b/apps/client/src/common/components/input/textarea/Textarea.module.scss
@@ -1,7 +1,6 @@
-@use '../../../../theme/viewerDefs' as *;
-
 .textarea {
   box-sizing: border-box;
+  min-height: 2rem;
 
   display: block;
   font-size: 1rem;
diff --git a/apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss b/apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss
index 9381f6bd6..410c06584 100644
--- a/apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss
+++ b/apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss
@@ -5,7 +5,6 @@
 .backdrop {
   position: fixed;
   inset: 0;
-  z-index: $zindex-backdrop;
   background-color: $backdrop-color;
   transition: opacity 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
 
@@ -21,7 +20,6 @@
   top: 0;
   left: 0;
   bottom: 0;
-  z-index: $zindex-dialog;
 
   width: 22rem;
   height: 100vh;
diff --git a/apps/client/src/common/components/navigation-menu/other-addresses/OtherAddresses.tsx b/apps/client/src/common/components/navigation-menu/other-addresses/OtherAddresses.tsx
index d4a47191f..35d3f6caf 100644
--- a/apps/client/src/common/components/navigation-menu/other-addresses/OtherAddresses.tsx
+++ b/apps/client/src/common/components/navigation-menu/other-addresses/OtherAddresses.tsx
@@ -30,12 +30,7 @@ export default function OtherAddresses({ currentLocation }: OtherAddressesProps)
           const address = linkToOtherHost(nif.address, currentLocation);
 
           return (
-            <CopyTag
-              key={nif.name}
-              copyValue={address}
-              onClick={() => openLink(address)}
-              label='Copy IP or navigate to address'
-            >
+            <CopyTag key={nif.name} copyValue={address} onClick={() => openLink(address)}>
               {nif.address} <IoArrowUp className={style.goIcon} />
             </CopyTag>
           );
diff --git a/apps/client/src/common/components/protect-route/PinPage.module.scss b/apps/client/src/common/components/protect-route/PinPage.module.scss
new file mode 100644
index 000000000..2af602fa2
--- /dev/null
+++ b/apps/client/src/common/components/protect-route/PinPage.module.scss
@@ -0,0 +1,50 @@
+.container {
+  width: 100%;
+  height: 100%;
+
+  padding-top: 25vh;
+
+  background: $ui-black;
+  color: $ontime-color;
+  font-size: 3rem;
+  text-align: center;
+}
+
+.pin {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  input {
+    font-size: 4rem;
+    height: 4rem;
+    width: 4em;
+    text-align: center;
+    letter-spacing: 0.25em;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    height: 4rem;
+    width: 4rem;
+    font-size: 4rem;
+  }
+}
+
+.pinFailed {
+  input {
+    animation: redFlash 1.5s ease;
+  }
+}
+
+@keyframes redFlash {
+  from {
+    background: $red-500;
+  }
+  to {
+    background: rgba($red-500, 0);
+  }
+}
diff --git a/apps/client/src/common/components/protect-route/PinPage.tsx b/apps/client/src/common/components/protect-route/PinPage.tsx
index 1b7f598ce..130e04f01 100644
--- a/apps/client/src/common/components/protect-route/PinPage.tsx
+++ b/apps/client/src/common/components/protect-route/PinPage.tsx
@@ -1,71 +1,55 @@
-import { useCallback, useEffect, useState } from 'react';
+import { PropsWithChildren, useState } from 'react';
 import { IoCheckmark } from 'react-icons/io5';
-import { IconButton, PinInput, PinInputField } from '@chakra-ui/react';
 
-import style from './ProtectRoute.module.scss';
+import { cx } from '../../utils/styleUtils';
+import IconButton from '../buttons/IconButton';
+import Input from '../input/input/Input';
+
+import style from './PinPage.module.scss';
 
 interface PinPageProps {
   permission: 'editor' | 'operator';
   handleValidation: (pin: string) => boolean;
 }
 
-export default function PinPage(props: PinPageProps) {
-  const { permission, handleValidation } = props;
+export default function PinPage({ permission, handleValidation }: PropsWithChildren<PinPageProps>) {
   const [pin, setPin] = useState('');
   const [failed, setFailed] = useState(false);
 
-  const validate = useCallback(() => {
+  const validate = () => {
     const isValid = handleValidation(pin);
     if (!isValid) {
       setFailed(true);
       setPin('');
     }
-  }, [handleValidation, pin]);
+  };
 
-  useEffect(() => {
-    const handleKeyPress = (event: KeyboardEvent) => {
-      if (event.repeat) return;
-      if (event.key === 'Enter') {
-        validate();
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyPress);
-
-    return () => {
-      document.removeEventListener('keydown', handleKeyPress);
-    };
-  }, [validate]);
+  const handleInputChange = (value: string) => {
+    setPin(value);
+    if (failed) setFailed(false);
+  };
 
   return (
     <div className={style.container}>
       {`Ontime ${permission}`}
-      <div className={failed ? style.pin__failed : style.pin}>
-        <PinInput
-          type='alphanumeric'
-          size='lg'
-          mask
-          autoFocus
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+          validate();
+        }}
+        className={cx([style.pin, failed && style.pinFailed])}
+      >
+        <Input
+          type='password'
+          maxLength={4}
+          height='large'
           value={pin}
-          onChange={(value) => {
-            setFailed(false);
-            setPin(value);
-          }}
-        >
-          <PinInputField />
-          <PinInputField />
-          <PinInputField />
-          <PinInputField />
-        </PinInput>
-        <IconButton
-          variant='ontime-filled'
-          aria-label='Enter'
-          size='lg'
-          isRound
-          icon={<IoCheckmark />}
-          onClick={validate}
+          onChange={(e) => handleInputChange(e.target.value)}
         />
-      </div>
+        <IconButton type='submit' variant='primary' aria-label='Enter'>
+          <IoCheckmark />
+        </IconButton>
+      </form>
     </div>
   );
 }
diff --git a/apps/client/src/common/components/protect-route/ProtectRoute.module.scss b/apps/client/src/common/components/protect-route/ProtectRoute.module.scss
deleted file mode 100644
index 262739d65..000000000
--- a/apps/client/src/common/components/protect-route/ProtectRoute.module.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-.container {
-  width: 100%;
-  height: 100%;
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-top: 25vh;
-
-  background: $ui-black;
-  color: $ontime-color;
-  font-weight: 200;
-  font-size: 3rem;
-}
-
-.pin,
-.pin__failed {
-  display: flex;
-  gap: 0.125em;
-  padding-block: 0.5em;
-
-  input {
-    border-radius: 99px;
-    border-color: $gray-500;
-
-    &:hover {
-      border-color: $blue-500;
-    }
-  }
-
-  button {
-    margin-left: 1em;
-  }
-}
-
-.pin__failed {
-  input {
-    animation: colourFade 1.5s ease;
-  }
-}
-
-@keyframes colourFade {
-  from {
-    background: $red-500;
-  }
-  to {
-    background: rgba($red-500, 0);
-  }
-}
diff --git a/apps/client/src/common/components/radio-group/RadioGroup.module.scss b/apps/client/src/common/components/radio-group/RadioGroup.module.scss
new file mode 100644
index 000000000..9e4b9ba52
--- /dev/null
+++ b/apps/client/src/common/components/radio-group/RadioGroup.module.scss
@@ -0,0 +1,74 @@
+.radioGroup {
+  display: flex;
+  gap: 0.25rem;
+  color: $gray-900;
+  font-size: calc(1rem - 2px);
+  color: $ui-white;
+}
+
+.horizontal {
+  align-items: center;
+  flex-direction: row;
+  gap: 1rem;
+}
+
+.vertical {
+  align-items: start;
+  flex-direction: column;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  &:has([data-checked]) {
+    color: $ui-white;
+  }
+}
+
+.radio {
+  box-sizing: border-box;
+  display: flex;
+  width: 1rem;
+  height: 1rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+  outline: 0;
+  border: none;
+
+  &[data-unchecked] {
+    border: 1px solid $gray-1200;
+    background-color: $gray-1200;
+  }
+
+  &[data-checked] {
+    background-color: $ui-white;
+    &:hover {
+      border-color: $gray-1000;
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid $blue-500;
+    outline-offset: 2px;
+  }
+}
+
+.indicator {
+  display: grid;
+  place-content: center;
+
+  &[data-unchecked] {
+    display: none;
+  }
+
+  &::before {
+    content: '';
+    border-radius: 100%;
+    width: 0.5rem;
+    height: 0.5rem;
+    background-color: $gray-1200;
+  }
+}
diff --git a/apps/client/src/common/components/radio-group/RadioGroup.tsx b/apps/client/src/common/components/radio-group/RadioGroup.tsx
new file mode 100644
index 000000000..e68165ed5
--- /dev/null
+++ b/apps/client/src/common/components/radio-group/RadioGroup.tsx
@@ -0,0 +1,40 @@
+import { Radio } from '@base-ui-components/react/radio';
+import { RadioGroup as BaseRadioGroup } from '@base-ui-components/react/radio-group';
+
+import { cx } from '../../utils/styleUtils';
+
+import style from './RadioGroup.module.scss';
+
+interface RadioGroupProps<T extends string | number | boolean> extends Omit<BaseRadioGroup.Props, 'onValueChange'> {
+  items: {
+    value: T;
+    label: string;
+  }[];
+  onValueChange?: (value: T) => void;
+  orientation?: 'horizontal' | 'vertical';
+}
+
+export default function RadioGroup<T extends string | number | boolean>({
+  items,
+  className,
+  orientation = 'vertical',
+  onValueChange,
+  ...elementProps
+}: RadioGroupProps<T>) {
+  return (
+    <BaseRadioGroup
+      onValueChange={(value) => onValueChange?.(value as T)}
+      className={cx([style.radioGroup, style[orientation], className])}
+      {...elementProps}
+    >
+      {items.map((item) => (
+        <label className={style.item} key={item.value.toString()}>
+          <Radio.Root value={item.value.toString()} className={style.radio}>
+            <Radio.Indicator className={style.indicator} />
+          </Radio.Root>
+          {item.label}
+        </label>
+      ))}
+    </BaseRadioGroup>
+  );
+}
diff --git a/apps/client/src/common/components/select/Select.module.scss b/apps/client/src/common/components/select/Select.module.scss
index a2201fef5..06ae80952 100644
--- a/apps/client/src/common/components/select/Select.module.scss
+++ b/apps/client/src/common/components/select/Select.module.scss
@@ -38,10 +38,18 @@
     outline: 2px solid $blue-500;
     outline-offset: 2px;
   }
+}
 
-  &.fluid {
-    width: 100%;
-  }
+.medium {
+  height: 2rem;
+}
+
+.large {
+  height: 2.5rem;
+}
+
+.fluid {
+  width: 100%;
 }
 
 .selectIcon {
diff --git a/apps/client/src/common/components/select/Select.tsx b/apps/client/src/common/components/select/Select.tsx
index ccc65a553..13faf5926 100644
--- a/apps/client/src/common/components/select/Select.tsx
+++ b/apps/client/src/common/components/select/Select.tsx
@@ -6,20 +6,22 @@ import { cx } from '../../utils/styleUtils';
 
 import styles from './Select.module.scss';
 
+export type SelectOption<T = string> = {
+  value: T;
+  label: string;
+  disabled?: boolean;
+};
+
 interface SelectProps<T> extends Omit<BaseSelect.Root.Props<T>, 'items'> {
-  // overload items to not allow undefined values
-  options: {
-    value: T;
-    label: string;
-    disabled?: boolean;
-  }[];
+  options: SelectOption<T>[];
   fluid?: boolean;
+  size?: 'medium' | 'large';
 }
 
-export default function Select<T>({ options, fluid, ...selectRootProps }: SelectProps<T>) {
+export default function Select<T>({ options, fluid, size = 'medium', ...selectRootProps }: SelectProps<T>) {
   return (
     <BaseSelect.Root items={options} {...selectRootProps}>
-      <BaseSelect.Trigger className={cx([styles.select, fluid && styles.fluid])}>
+      <BaseSelect.Trigger className={cx([styles.select, styles[size], fluid && styles.fluid])}>
         <BaseSelect.Value />
         <BaseSelect.Icon className={styles.selectIcon}>
           <LuChevronsUpDown />
diff --git a/apps/client/src/common/components/switch/Switch.module.scss b/apps/client/src/common/components/switch/Switch.module.scss
index a13dcc8c5..d350fb383 100644
--- a/apps/client/src/common/components/switch/Switch.module.scss
+++ b/apps/client/src/common/components/switch/Switch.module.scss
@@ -19,7 +19,8 @@
   }
 
   &:focus {
-    border-color: $blue-500;
+    outline: 2px solid $blue-500;
+    outline-offset: 2px;
   }
 }
 
diff --git a/apps/client/src/common/components/view-params-editor/ParamInput.module.scss b/apps/client/src/common/components/view-params-editor/ParamInput.module.scss
new file mode 100644
index 000000000..63a3a1797
--- /dev/null
+++ b/apps/client/src/common/components/view-params-editor/ParamInput.module.scss
@@ -0,0 +1,42 @@
+.inline {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+// styles from subtle button
+.toggleSelect {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding-inline: 0.5rem;
+  height: 2.5rem;
+  background: $gray-1050;
+  color: $ui-white;
+  line-height: 1em;
+  border-radius: $component-border-radius-md;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $gray-1000;
+    color: $blue-500;
+  }
+
+  &:active:not(:disabled) {
+    background: $gray-1100;
+    border-color: $gray-1250;
+  }
+
+  &::after {
+    content: '';
+    margin-left: 0.25rem;
+    width: 0.75em;
+    height: 0.75em;
+    background: var(--user-bg);
+    border-radius: 50%;
+  }
+}
+
+.empty {
+  color: $ui-white;
+}
\ No newline at end of file
diff --git a/apps/client/src/common/components/view-params-editor/ParamInput.tsx b/apps/client/src/common/components/view-params-editor/ParamInput.tsx
index 960ebb944..5fc763d72 100644
--- a/apps/client/src/common/components/view-params-editor/ParamInput.tsx
+++ b/apps/client/src/common/components/view-params-editor/ParamInput.tsx
@@ -1,25 +1,17 @@
 import { useState } from 'react';
-import { IoChevronDown } from 'react-icons/io5';
 import { useSearchParams } from 'react-router-dom';
-import {
-  Button,
-  Input,
-  InputGroup,
-  InputLeftElement,
-  Menu,
-  MenuButton,
-  MenuItemOption,
-  MenuList,
-  MenuOptionGroup,
-  Select,
-  Switch,
-} from '@chakra-ui/react';
 
 import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
+import Checkbox from '../checkbox/Checkbox';
+import Input from '../input/input/Input';
+import Select from '../select/Select';
+import Switch from '../switch/Switch';
 
 import InlineColourPicker from './InlineColourPicker';
 import { ParamField } from './viewParams.types';
 
+import style from './ParamInput.module.scss';
+
 interface ParamInputProps {
   paramField: ParamField;
 }
@@ -39,20 +31,11 @@ export default function ParamInput({ paramField }: ParamInputProps) {
     const optionFromParams = searchParams.get(id);
     const defaultOptionValue = optionFromParams || defaultValue;
 
-    return (
-      <Select
-        placeholder={defaultValue ? undefined : 'Select an option'}
-        variant='ontime'
-        name={id}
-        defaultValue={defaultOptionValue}
-      >
-        {Object.entries(paramField.values).map(([key, value]) => (
-          <option key={key} value={key}>
-            {value}
-          </option>
-        ))}
-      </Select>
-    );
+    if (paramField.values.length === 0) {
+      return <span className={style.empty}>No options available</span>;
+    }
+
+    return <Select size='large' name={id} defaultValue={defaultOptionValue} options={paramField.values} />;
   }
 
   if (type === 'multi-option') {
@@ -61,27 +44,22 @@ export default function ParamInput({ paramField }: ParamInputProps) {
 
   if (type === 'boolean') {
     const defaultCheckedValue = isStringBoolean(searchParams.get(id)) || defaultValue;
-
-    // checked value should be 'true', so it can be captured by the form event
-    return <Switch variant='ontime' name={id} defaultChecked={defaultCheckedValue} value='true' />;
+    return <Switch size='large' name={id} defaultChecked={defaultCheckedValue} />;
   }
 
   if (type === 'number') {
-    const { prefix, placeholder } = paramField;
+    const { placeholder } = paramField;
     const defaultNumberValue = searchParams.get(id) ?? defaultValue;
 
     return (
-      <InputGroup variant='ontime-filled'>
-        {prefix && <InputLeftElement pointerEvents='none'>{prefix}</InputLeftElement>}
-        <Input
-          type='number'
-          step='any'
-          variant='ontime-filled'
-          name={id}
-          defaultValue={defaultNumberValue}
-          placeholder={placeholder}
-        />
-      </InputGroup>
+      <Input
+        height='large'
+        type='number'
+        step='any'
+        name={id}
+        defaultValue={defaultNumberValue}
+        placeholder={placeholder}
+      />
     );
   }
 
@@ -92,52 +70,56 @@ export default function ParamInput({ paramField }: ParamInputProps) {
   }
 
   const defaultStringValue = searchParams.get(id) ?? defaultValue;
-  const { prefix, placeholder } = paramField;
+  const { placeholder } = paramField;
 
-  return (
-    <InputGroup variant='ontime-filled'>
-      {prefix && <InputLeftElement pointerEvents='none'>{prefix}</InputLeftElement>}
-      <Input name={id} defaultValue={defaultStringValue} placeholder={placeholder} />
-    </InputGroup>
-  );
+  return <Input height='large' name={id} defaultValue={defaultStringValue} placeholder={placeholder} />;
 }
 
 interface EditFormMultiOptionProps {
   paramField: ParamField & { type: 'multi-option' };
 }
 
-function MultiOption(props: EditFormMultiOptionProps) {
+function MultiOption({ paramField }: EditFormMultiOptionProps) {
   const [searchParams] = useSearchParams();
-  const { paramField } = props;
-  const { id, defaultValue } = paramField;
+  const { id, values, defaultValue = [''] } = paramField;
 
   const optionFromParams = searchParams.getAll(id);
-  const [paramState, setParamState] = useState<string[]>(optionFromParams || defaultValue || ['']);
+  const [paramState, setParamState] = useState<string[]>(optionFromParams || defaultValue);
+
+  const toggleValue = (value: string, checked: boolean) => {
+    if (checked) {
+      setParamState((prev) => [...prev, value]);
+    } else {
+      setParamState((prev) => prev.filter((v) => v !== value));
+    }
+  };
+
+  if (values.length === 0) {
+    return <span className={style.empty}>No options available</span>;
+  }
 
   return (
     <>
-      <input name={id} hidden readOnly value={paramState} />
-      <Menu isLazy closeOnSelect={false} variant='ontime-on-dark'>
-        <MenuButton as={Button} variant='ontime-subtle-white' position='relative' width='fit-content' fontWeight={400}>
-          {paramField.title} <IoChevronDown style={{ display: 'inline' }} />
-        </MenuButton>
-        <MenuList overflow='auto' maxHeight='200px'>
-          <MenuOptionGroup
-            type='checkbox'
-            value={paramState}
-            onChange={(value) => setParamState(Array.isArray(value) ? value : [value])}
-          >
-            {Object.values(paramField.values).map((option) => {
-              const { value, label, colour } = option;
-              return (
-                <MenuItemOption value={value} key={value} style={{ borderRight: `8px solid ${colour}` }}>
-                  {label}
-                </MenuItemOption>
-              );
-            })}
-          </MenuOptionGroup>
-        </MenuList>
-      </Menu>
+      <input name={id} hidden readOnly value={paramState.join(',')} />
+      <div className={style.inline}>
+        {values.map((option) => {
+          return (
+            <label
+              key={option.value}
+              className={style.toggleSelect}
+              style={{
+                '--user-bg': option.colour,
+              }}
+            >
+              <Checkbox
+                checked={paramState.includes(option.value)}
+                onCheckedChange={(checked) => toggleValue(option.value, checked as boolean)}
+              />
+              {option.label}
+            </label>
+          );
+        })}
+      </div>
     </>
   );
 }
diff --git a/apps/client/src/common/components/view-params-editor/ViewParamsEditor.module.scss b/apps/client/src/common/components/view-params-editor/ViewParamsEditor.module.scss
index cd6e37914..4bfedeb40 100644
--- a/apps/client/src/common/components/view-params-editor/ViewParamsEditor.module.scss
+++ b/apps/client/src/common/components/view-params-editor/ViewParamsEditor.module.scss
@@ -11,7 +11,6 @@
 .backdrop {
   position: fixed;
   inset: 0;
-  z-index: $zindex-backdrop;
   background-color: $backdrop-color;
   transition: opacity 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
 
@@ -27,14 +26,13 @@
   top: 0;
   right: 0;
   bottom: 0;
-  z-index: $zindex-dialog;
 
   width: 40rem;
   height: 100vh;
 
   display: flex;
   flex-direction: column;
-  padding: 1rem 1.5rem;
+  padding-block: 1rem 1.5rem;
 
   background-color: $gray-1250;
   color: $ui-white;
@@ -58,6 +56,7 @@
 }
 
 .header {
+  padding-inline: 1rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -69,12 +68,14 @@
 
 .body {
   flex: 1;
+  padding-inline: 1rem;
   padding-bottom: 10vh;
   overflow-y: auto;
 }
 
 .footer {
   display: flex;
+  padding-inline: 1rem;
   gap: 1rem;
   align-items: center;
   justify-content: flex-end;
diff --git a/apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx b/apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx
index d317d7d6e..4fb0c2711 100644
--- a/apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx
+++ b/apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx
@@ -1,5 +1,6 @@
 import { FormEvent, memo } from 'react';
 import { IoClose } from 'react-icons/io5';
+import { useSearchParams } from 'react-router-dom';
 import { Dialog } from '@base-ui-components/react/dialog';
 
 import useViewSettings from '../../hooks-query/useViewSettings';
@@ -21,6 +22,7 @@ interface EditFormDrawerProps {
 export default memo(ViewParamsEditor);
 
 function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) {
+  const [_, setSearchParams] = useSearchParams();
   const { data: viewSettings } = useViewSettings();
   const { isOpen, close } = useViewParamsEditorStore();
 
@@ -29,8 +31,7 @@ function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) {
   };
 
   const resetParams = () => {
-    window.history.pushState(null, '', window.location.pathname);
-    close();
+    setSearchParams();
   };
 
   const onParamsFormSubmit = (formEvent: FormEvent<HTMLFormElement>) => {
@@ -38,9 +39,9 @@ function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) {
 
     const newParamsObject = Object.fromEntries(new FormData(formEvent.currentTarget));
     const newSearchParams = getURLSearchParamsFromObj(newParamsObject, viewOptions);
-    const url = new URL(window.location.href);
-    url.search = newSearchParams.toString();
-    window.history.pushState(null, '', url);
+
+    console.log('New search params:', newParamsObject, newSearchParams.toString());
+    setSearchParams(newSearchParams);
   };
 
   return (
diff --git a/apps/client/src/common/components/view-params-editor/__tests__/viewParams.utils.test.ts b/apps/client/src/common/components/view-params-editor/__tests__/viewParams.utils.test.ts
index f164e7e89..9092d3329 100644
--- a/apps/client/src/common/components/view-params-editor/__tests__/viewParams.utils.test.ts
+++ b/apps/client/src/common/components/view-params-editor/__tests__/viewParams.utils.test.ts
@@ -5,32 +5,32 @@ import { OptionTitle } from '../constants';
 import type { ViewOption } from '../viewParams.types';
 import { getURLSearchParamsFromObj, makeOptionsFromCustomFields } from '../viewParams.utils';
 
-describe('makeOptionsFromCustomFields', () => {
+describe('makeOptionsFromCustomFields()', () => {
   const testCustomFields: CustomFields = {
     field1: { label: 'Field 1', colour: 'red', type: 'string' },
     field2: { label: 'Field 2', colour: 'blue', type: 'string' },
   };
 
-  it('creates a record of keys for the given custom fields', () => {
+  it('creates an array of options to use in a select', () => {
     const result = makeOptionsFromCustomFields(testCustomFields);
-    expect(result).toStrictEqual({
-      'custom-field1': 'Custom: Field 1',
-      'custom-field2': 'Custom: Field 2',
-    });
+    expect(result).toStrictEqual([
+      { value: 'custom-field1', label: 'Custom: Field 1' },
+      { value: 'custom-field2', label: 'Custom: Field 2' },
+    ]);
   });
 
   it('appends additional data', () => {
-    const additionalData = {
-      test1: 'test1',
-      test2: 'test2',
-    };
+    const additionalData = [
+      { value: 'test1', label: 'Test 1' },
+      { value: 'test2', label: 'Test 2' },
+    ];
     const result = makeOptionsFromCustomFields(testCustomFields, additionalData);
-    expect(result).toStrictEqual({
-      'custom-field1': 'Custom: Field 1',
-      'custom-field2': 'Custom: Field 2',
-      test1: 'test1',
-      test2: 'test2',
-    });
+    expect(result).toStrictEqual([
+      { value: 'custom-field1', label: 'Custom: Field 1' },
+      { value: 'custom-field2', label: 'Custom: Field 2' },
+      { value: 'test1', label: 'Test 1' },
+      { value: 'test2', label: 'Test 2' },
+    ]);
   });
 
   it('filtersImageTypes', () => {
@@ -40,14 +40,14 @@ describe('makeOptionsFromCustomFields', () => {
     };
 
     const result = makeOptionsFromCustomFields(customFieldsWIthImage);
-    expect(result).toStrictEqual({
-      'custom-field1': 'Custom: Field 1',
-      'custom-field2': 'Custom: Field 2',
-    });
+    expect(result).toStrictEqual([
+      { value: 'custom-field1', label: 'Custom: Field 1' },
+      { value: 'custom-field2', label: 'Custom: Field 2' },
+    ]);
   });
 });
 
-describe('getURLSearchParamsFromObj', () => {
+describe('getURLSearchParamsFromObj()', () => {
   // Mock view options for testing
   const mockViewOptions: ViewOption[] = [
     {
@@ -73,7 +73,10 @@ describe('getURLSearchParamsFromObj', () => {
           title: 'Multi Select',
           description: 'A multi-select field',
           type: 'option',
-          values: { value1: 'Value 1', value2: 'Value 2' },
+          values: [
+            { value: 'value1', label: 'Value 1' },
+            { value: 'value2', label: 'Value 2' },
+          ],
           defaultValue: '',
         },
       ],
@@ -201,4 +204,36 @@ describe('getURLSearchParamsFromObj', () => {
     // Should only include unique values while maintaining order
     expect(result.getAll('sub')).toEqual(['value1', 'value2', 'value3']);
   });
+
+  it('converts on-off from toggle to boolean', () => {
+    const mockOptionsWithBooleans: ViewOption[] = [
+      {
+        title: OptionTitle.StyleOverride,
+        options: [
+          {
+            id: 'bool1',
+            title: 'bool1',
+            description: 'Bool1',
+            type: 'boolean',
+            defaultValue: true,
+          },
+          {
+            id: 'bool2',
+            title: 'bool2',
+            description: 'Bool2',
+            type: 'boolean',
+            defaultValue: false,
+          },
+        ],
+      },
+    ];
+    const params = {
+      bool1: 'off',
+      bool2: 'on',
+    };
+    const result = getURLSearchParamsFromObj(params, mockOptionsWithBooleans);
+    console.log('Result:', result.toString());
+    expect(result.get('bool1')).toBe('false');
+    expect(result.get('bool2')).toBe('true');
+  });
 });
diff --git a/apps/client/src/common/components/view-params-editor/viewParams.types.ts b/apps/client/src/common/components/view-params-editor/viewParams.types.ts
index ee5d6e017..a9962ecc6 100644
--- a/apps/client/src/common/components/view-params-editor/viewParams.types.ts
+++ b/apps/client/src/common/components/view-params-editor/viewParams.types.ts
@@ -8,20 +8,19 @@ type BaseField = {
 
 type OptionsField = {
   type: 'option';
-  values: Record<string, string>;
+  values: { value: string; label: string }[];
   defaultValue?: string;
 };
 
-type MultiselectOption = { value: string; label: string; colour: string };
-export type MultiselectOptions = Record<string, MultiselectOption>;
+export type MultiselectOption = { value: string; label: string; colour: string };
 type MultiOptionsField = {
   type: 'multi-option';
-  values: MultiselectOptions;
+  values: MultiselectOption[];
   defaultValue?: string;
 };
 
-type StringField = { type: 'string'; defaultValue?: string; prefix?: string; placeholder?: string };
-type NumberField = { type: 'number'; defaultValue?: number; prefix?: string; placeholder?: string };
+type StringField = { type: 'string'; defaultValue?: string; placeholder?: string };
+type NumberField = { type: 'number'; defaultValue?: number; placeholder?: string };
 type BooleanField = { type: 'boolean'; defaultValue: boolean };
 type ColourField = { type: 'colour'; defaultValue: string; placeholder?: string };
 type PersistedField = { type: 'persist'; defaultValue?: string[]; values: string[] };
diff --git a/apps/client/src/common/components/view-params-editor/viewParams.utils.ts b/apps/client/src/common/components/view-params-editor/viewParams.utils.ts
index 4c5923529..a59b7c3a2 100644
--- a/apps/client/src/common/components/view-params-editor/viewParams.utils.ts
+++ b/apps/client/src/common/components/view-params-editor/viewParams.utils.ts
@@ -1,6 +1,8 @@
 import type { CustomFields } from 'ontime-types';
 
-import type { MultiselectOptions, ViewOption } from './viewParams.types';
+import type { SelectOption } from '../select/Select';
+
+import type { MultiselectOption, ViewOption } from './viewParams.types';
 
 /**
  * Creates a list of custom fields for a select
@@ -8,32 +10,46 @@ import type { MultiselectOptions, ViewOption } from './viewParams.types';
  */
 export function makeOptionsFromCustomFields(
   customFields: CustomFields,
-  additionalOptions: Readonly<Record<string, string>> = {},
+  additionalOptions: SelectOption[] = [],
   filterImageType = true,
-): Record<string, string> {
-  const options = { ...additionalOptions };
+): SelectOption[] {
+  const options: SelectOption[] = [];
+
+  // Add custom fields first
   for (const [key, value] of Object.entries(customFields)) {
     if (filterImageType && value.type === 'image') {
       continue;
     }
 
-    options[`custom-${key}`] = `Custom: ${value.label}`;
+    options.push({
+      value: `custom-${key}`,
+      label: `Custom: ${value.label}`,
+    });
   }
-  return options;
+
+  return options.concat(additionalOptions);
 }
 
 /**
  * Creates data for a multiselect component from custom fields
  * Filters out image type custom fields
  */
-export function makeCustomFieldSelectOptions(customFields: CustomFields, filterImageType = true): MultiselectOptions {
-  const options: MultiselectOptions = {};
+export function makeCustomFieldSelectOptions(customFields: CustomFields, filterImageType = true): MultiselectOption[] {
+  const options: MultiselectOption[] = [];
+
+  // Add custom fields first
   for (const [key, value] of Object.entries(customFields)) {
     if (filterImageType && value.type === 'image') {
       continue;
     }
-    options[key] = { value: key, label: value.label, colour: value.colour };
+
+    options.push({
+      value: key,
+      label: value.label,
+      colour: value.colour || 'transparent',
+    });
   }
+
   return options;
 }
 
@@ -52,17 +68,22 @@ function sanitiseColour(colour: string) {
 type FieldMetadata = {
   defaultValues: Record<string, string>;
   colorFields: Set<string>;
+  booleanFields: Set<string>;
   isPersistedField: Set<string>;
   persistedValues: Record<string, string[]>;
 };
 
 /**
  * Utility collects metadata about fields from view options
+ * - where are the default values
+ * - which fields are colours
+ * - which fields are persisted
  */
 function collectFieldMetadata(paramFields: ViewOption[]): FieldMetadata {
   const metadata: FieldMetadata = {
     defaultValues: {},
     colorFields: new Set(),
+    booleanFields: new Set(),
     isPersistedField: new Set(),
     persistedValues: {},
   };
@@ -80,6 +101,8 @@ function collectFieldMetadata(paramFields: ViewOption[]): FieldMetadata {
 
       if (option.type === 'colour') {
         metadata.colorFields.add(option.id);
+      } else if (option.type === 'boolean') {
+        metadata.booleanFields.add(option.id);
       }
     });
   });
@@ -132,7 +155,16 @@ export function getURLSearchParamsFromObj(paramsObj: ViewParamsObj, paramFields:
 
       // Process and add new values
       value.split(',').forEach((v) => {
-        const processedValue = metadata.colorFields.has(id) ? sanitiseColour(v) : v;
+        // some field types need extra processing
+        const processedValue = (() => {
+          if (metadata.colorFields.has(id)) {
+            return sanitiseColour(v);
+          }
+          if (metadata.booleanFields.has(id)) {
+            return v === 'on' ? 'true' : 'false';
+          }
+          return v;
+        })();
         if (metadata.isPersistedField.has(id) || metadata.defaultValues[id] !== processedValue) {
           addUniqueParam(id, processedValue);
         }
diff --git a/apps/client/src/common/hooks/useContextMenu.tsx b/apps/client/src/common/hooks/useContextMenu.tsx
index d98a4fba4..f1ca6280b 100644
--- a/apps/client/src/common/hooks/useContextMenu.tsx
+++ b/apps/client/src/common/hooks/useContextMenu.tsx
@@ -1,9 +1,10 @@
 import { MouseEvent } from 'react';
 
-import { Option, useContextMenuStore } from '../components/context-menu/ContextMenu';
+import { useContextMenuStore } from '../../features/rundown/rundown-context-menu/RundownContextMenu';
+import { DropdownMenuOption } from '../components/dropdown-menu/DropdownMenu';
 
-export const useContextMenu = <T extends HTMLElement>(options: Option[]) => {
-  const { setContextMenu } = useContextMenuStore();
+export const useContextMenu = <T extends HTMLElement>(options: DropdownMenuOption[]) => {
+  const setContextMenu = useContextMenuStore((state) => state.setContextMenu);
 
   const localCreateContextMenu = (contextMenuEvent: MouseEvent<T, globalThis.MouseEvent>) => {
     // prevent browser default context menu from showing up
diff --git a/apps/client/src/features/app-settings/panel-utils/PanelUtils.module.scss b/apps/client/src/features/app-settings/panel-utils/PanelUtils.module.scss
index 2e5ef678e..66156171e 100644
--- a/apps/client/src/features/app-settings/panel-utils/PanelUtils.module.scss
+++ b/apps/client/src/features/app-settings/panel-utils/PanelUtils.module.scss
@@ -150,9 +150,9 @@ $inner-padding: 1rem;
 }
 
 .divider {
+  border: none;
   border-top: 1px solid $white-10;
   margin: 1rem -2rem;
-  z-index: $zindex-floating;
 }
 
 .overlay {
diff --git a/apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.module.scss b/apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.module.scss
index 50a6023b5..d1f772623 100644
--- a/apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.module.scss
+++ b/apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.module.scss
@@ -13,11 +13,6 @@
   gap: 0.5rem;
 }
 
-.matchRadio {
-  display: flex;
-  gap: 1rem;
-}
-
 .ruleSection {
   display: flex;
   flex-direction: column;
diff --git a/apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.tsx b/apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.tsx
index 3104be134..211b193a6 100644
--- a/apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.tsx
+++ b/apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useMemo } from 'react';
-import { Controller, useFieldArray, useForm } from 'react-hook-form';
+import { useFieldArray, useForm } from 'react-hook-form';
 import { IoAdd, IoTrash } from 'react-icons/io5';
-import { Radio, RadioGroup, Select } from '@chakra-ui/react';
 import {
   Automation,
   AutomationDTO,
@@ -20,6 +19,8 @@ import IconButton from '../../../../common/components/buttons/IconButton';
 import Info from '../../../../common/components/info/Info';
 import Input from '../../../../common/components/input/input/Input';
 import ExternalLink from '../../../../common/components/link/external-link/ExternalLink';
+import RadioGroup from '../../../../common/components/radio-group/RadioGroup';
+import Select from '../../../../common/components/select/Select';
 import Tag from '../../../../common/components/tag/Tag';
 import useAutomationSettings from '../../../../common/hooks-query/useAutomationSettings';
 import useCustomFields from '../../../../common/hooks-query/useCustomFields';
@@ -214,15 +215,14 @@ export default function AutomationForm(props: AutomationFormProps) {
         <div className={style.ruleSection}>
           <label>
             Trigger outputs if
-            <Controller
-              name='filterRule'
-              control={control}
-              render={({ field }) => (
-                <RadioGroup {...field} size='sm' className={style.matchRadio} variant='ontime'>
-                  <Radio value='all'>All filters pass</Radio>
-                  <Radio value='any'>Any filter passes</Radio>
-                </RadioGroup>
-              )}
+            <RadioGroup
+              orientation='horizontal'
+              value={watch('filterRule')}
+              onValueChange={(value) => setValue('filterRule', value, { shouldDirty: true })}
+              items={[
+                { value: 'all', label: 'All filters pass' },
+                { value: 'any', label: 'Any filter passes' },
+              ]}
             />
           </label>
           {fieldFilters.map((field, index) => {
@@ -232,43 +232,29 @@ export default function AutomationForm(props: AutomationFormProps) {
                 <label>
                   Runtime data source
                   <Select
-                    {...register(`filters.${index}.field`, { required: { value: true, message: 'Required field' } })}
-                    size='sm'
-                    variant='ontime'
-                  >
-                    <option selected hidden disabled value=''>
-                      Event field
-                    </option>
-                    {fieldList.map(({ value, label }, localIndex) => {
-                      const key = `filters.${index}.field.${localIndex}`;
-                      return (
-                        <option key={key} value={value}>
-                          {label}
-                        </option>
-                      );
-                    })}
-                  </Select>
+                    value={watch(`filters.${index}.field`)}
+                    onValueChange={(value) => setValue(`filters.${index}.field`, value, { shouldDirty: true })}
+                    options={fieldList.map(({ value, label }) => ({ value, label }))}
+                    aria-label='Event field'
+                  />
                   <Panel.Error>{errors.filters?.[index]?.field?.message}</Panel.Error>
                 </label>
                 <label>
                   Matching condition
                   <Select
-                    {...register(`filters.${index}.operator`, { required: { value: true, message: 'Required field' } })}
-                    size='sm'
-                    variant='ontime'
-                  >
-                    <option selected hidden disabled value=''>
-                      Operator
-                    </option>
-                    <option value='equals'>equals</option>
-                    <option value='not_equals'>not equals</option>
-                    <option value='contains'>contains</option>
-                    {/* 
-                  We dont currently offer a data source where these operators would make sense
-                  <option value='greater_than'>greater than</option>
-                  <option value='less_than'>less than</option> 
-                  */}
-                  </Select>
+                    value={watch(`filters.${index}.operator`)}
+                    onValueChange={(value) =>
+                      setValue(`filters.${index}.operator`, value as 'equals' | 'not_equals' | 'contains', {
+                        shouldDirty: true,
+                      })
+                    }
+                    options={[
+                      { value: 'equals', label: 'equals' },
+                      { value: 'not_equals', label: 'not equals' },
+                      { value: 'contains', label: 'contains' },
+                    ]}
+                    aria-label='Operator'
+                  />
                   <Panel.Error>{errors.filters?.[index]?.operator?.message}</Panel.Error>
                 </label>
                 <label>
diff --git a/apps/client/src/features/app-settings/panel/automations-panel/AutomationSettingsForm.tsx b/apps/client/src/features/app-settings/panel/automations-panel/AutomationSettingsForm.tsx
index 9673b26fe..77fdffade 100644
--- a/apps/client/src/features/app-settings/panel/automations-panel/AutomationSettingsForm.tsx
+++ b/apps/client/src/features/app-settings/panel/automations-panel/AutomationSettingsForm.tsx
@@ -1,5 +1,4 @@
-import { Controller, useForm } from 'react-hook-form';
-import { Switch } from '@chakra-ui/react';
+import { useForm } from 'react-hook-form';
 
 import { editAutomationSettings } from '../../../../common/api/automation';
 import { maybeAxiosError } from '../../../../common/api/utils';
@@ -7,6 +6,7 @@ import Button from '../../../../common/components/buttons/Button';
 import Info from '../../../../common/components/info/Info';
 import Input from '../../../../common/components/input/input/Input';
 import ExternalLink from '../../../../common/components/link/external-link/ExternalLink';
+import Switch from '../../../../common/components/switch/Switch';
 import { preventEscape } from '../../../../common/utils/keyEvent';
 import { isOnlyNumbers } from '../../../../common/utils/regex';
 import { isOntimeCloud } from '../../../../externals';
@@ -24,11 +24,12 @@ export default function AutomationSettingsForm(props: AutomationSettingsProps) {
   const { enabledAutomations, enabledOscIn, oscPortIn } = props;
 
   const {
-    control,
     handleSubmit,
     reset,
     register,
     setError,
+    watch,
+    setValue,
     formState: { errors, isSubmitting, isDirty, isValid },
   } = useForm<AutomationSettingsProps>({
     mode: 'onChange',
@@ -103,12 +104,10 @@ export default function AutomationSettingsForm(props: AutomationSettingsProps) {
               description='Allow Ontime to send messages on lifecycle triggers'
               error={errors.enabledAutomations?.message}
             />
-            <Controller
-              control={control}
-              name='enabledAutomations'
-              render={({ field: { onChange, value, ref } }) => (
-                <Switch variant='ontime' size='lg' isChecked={value} onChange={onChange} ref={ref} />
-              )}
+            <Switch
+              size='large'
+              checked={watch('enabledAutomations')}
+              onCheckedChange={(value: boolean) => setValue('enabledAutomations', value, { shouldDirty: true })}
             />
           </Panel.ListItem>
         </Panel.ListGroup>
@@ -123,12 +122,10 @@ export default function AutomationSettingsForm(props: AutomationSettingsProps) {
               description='Allow control of Ontime through OSC'
               error={errors.enabledOscIn?.message}
             />
-            <Controller
-              control={control}
-              name='enabledOscIn'
-              render={({ field: { onChange, value, ref } }) => (
-                <Switch variant='ontime' size='lg' isChecked={value} onChange={onChange} ref={ref} />
-              )}
+            <Switch
+              size='large'
+              checked={watch('enabledOscIn')}
+              onCheckedChange={(value: boolean) => setValue('enabledOscIn', value, { shouldDirty: true })}
             />
           </Panel.ListItem>
           <Panel.ListItem>
diff --git a/apps/client/src/features/app-settings/panel/automations-panel/TriggerForm.tsx b/apps/client/src/features/app-settings/panel/automations-panel/TriggerForm.tsx
index fdfacb8dc..02868160a 100644
--- a/apps/client/src/features/app-settings/panel/automations-panel/TriggerForm.tsx
+++ b/apps/client/src/features/app-settings/panel/automations-panel/TriggerForm.tsx
@@ -1,12 +1,12 @@
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
-import { Select } from '@chakra-ui/react';
 import { NormalisedAutomation, TimerLifeCycle, TriggerDTO } from 'ontime-types';
 
 import { addTrigger, editTrigger } from '../../../../common/api/automation';
 import { maybeAxiosError } from '../../../../common/api/utils';
 import Button from '../../../../common/components/buttons/Button';
 import Input from '../../../../common/components/input/input/Input';
+import Select from '../../../../common/components/select/Select';
 import { preventEscape } from '../../../../common/utils/keyEvent';
 import * as Panel from '../../panel-utils/PanelUtils';
 
@@ -29,6 +29,8 @@ export default function TriggerForm(props: TriggerFormProps) {
     register,
     setFocus,
     setError,
+    watch,
+    setValue,
     formState: { errors, isSubmitting, isValid, isDirty },
   } = useForm<TriggerDTO>({
     defaultValues: {
@@ -44,8 +46,7 @@ export default function TriggerForm(props: TriggerFormProps) {
   // give initial focus to the title field
   useEffect(() => {
     setFocus('title');
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- focus on mount
-  }, []);
+  }, [setFocus]);
 
   const onSubmit = async (values: TriggerDTO) => {
     // if we were passed an ID we are editing a Trigger
@@ -97,33 +98,21 @@ export default function TriggerForm(props: TriggerFormProps) {
       <label>
         Lifecycle trigger
         <Select
-          size='sm'
-          variant='ontime'
-          defaultValue={initialTrigger}
-          {...register('trigger', { required: { value: true, message: 'Required field' } })}
-        >
-          {cycles.map((cycle) => (
-            <option key={cycle.id} value={cycle.value}>
-              {cycle.label}
-            </option>
-          ))}
-        </Select>
+          value={watch('trigger')}
+          onValueChange={(value) => setValue('trigger', value as TimerLifeCycle, { shouldDirty: true })}
+          options={cycles.map((cycle) => ({ value: cycle.value, label: cycle.label }))}
+          aria-label='Lifecycle trigger'
+        />
         <Panel.Error>{errors.trigger?.message}</Panel.Error>
       </label>
       <label>
         Automation title
         <Select
-          size='sm'
-          variant='ontime'
-          defaultValue={initialAutomationId}
-          {...register('automationId', { required: { value: true, message: 'Required field' } })}
-        >
-          {automationSelect.map((automation) => (
-            <option key={automation.value} value={automation.value}>
-              {automation.label}
-            </option>
-          ))}
-        </Select>
+          value={watch('automationId')}
+          onValueChange={(value) => setValue('automationId', value, { shouldDirty: true })}
+          options={automationSelect}
+          aria-label='Automation title'
+        />
         <Panel.Error>{errors.automationId?.message}</Panel.Error>
       </label>
       <Panel.InlineElements align='end'>
diff --git a/apps/client/src/features/app-settings/panel/feature-panel/GenerateLinkForm.tsx b/apps/client/src/features/app-settings/panel/feature-panel/GenerateLinkForm.tsx
index 596ad9039..527becff6 100644
--- a/apps/client/src/features/app-settings/panel/feature-panel/GenerateLinkForm.tsx
+++ b/apps/client/src/features/app-settings/panel/feature-panel/GenerateLinkForm.tsx
@@ -107,11 +107,17 @@ export default function GenerateLinkForm({ hostOptions, pathOptions, isLockedToV
             title='Lock navigation'
             description='Prevent showing navigation (will only work for non production URLs)'
           />
-          <Switch name='lock' checked={watch('lock')} onCheckedChange={(checked) => setValue('lock', checked)} />
+          <Switch
+            size='large'
+            name='lock'
+            checked={watch('lock')}
+            onCheckedChange={(checked) => setValue('lock', checked)}
+          />
         </Panel.ListItem>
         <Panel.ListItem>
           <Panel.Field title='Authenticate' description='Whether the URL should be pre-authenticated' />
           <Switch
+            size='large'
             name='authenticate'
             checked={watch('authenticate')}
             onCheckedChange={(checked) => setValue('authenticate', checked)}
diff --git a/apps/client/src/features/app-settings/panel/feature-panel/UrlPresetsForm.tsx b/apps/client/src/features/app-settings/panel/feature-panel/UrlPresetsForm.tsx
index aa4da6e10..7aad743c4 100644
--- a/apps/client/src/features/app-settings/panel/feature-panel/UrlPresetsForm.tsx
+++ b/apps/client/src/features/app-settings/panel/feature-panel/UrlPresetsForm.tsx
@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { IoAdd, IoOpenOutline, IoTrash } from 'react-icons/io5';
-import { Switch } from '@chakra-ui/react';
 import { URLPreset } from 'ontime-types';
 
 import { postUrlPresets } from '../../../../common/api/urlPresets';
@@ -11,6 +10,7 @@ import IconButton from '../../../../common/components/buttons/IconButton';
 import Info from '../../../../common/components/info/Info';
 import Input from '../../../../common/components/input/input/Input';
 import ExternalLink from '../../../../common/components/link/external-link/ExternalLink';
+import Switch from '../../../../common/components/switch/Switch';
 import Tooltip from '../../../../common/components/tooltip/Tooltip';
 import useUrlPresets from '../../../../common/hooks-query/useUrlPresets';
 import { preventEscape } from '../../../../common/utils/keyEvent';
@@ -34,6 +34,8 @@ export default function UrlPresetsForm() {
     register,
     reset,
     setError,
+    watch,
+    setValue,
     formState: { isSubmitting, isDirty, isValid, errors },
   } = useForm<FormData>({
     mode: 'onChange',
@@ -166,8 +168,11 @@ export default function UrlPresetsForm() {
                   <tr key={preset.id}>
                     <td className={style.fit}>
                       <Switch
-                        {...register(`data.${index}.enabled`)}
-                        variant='ontime'
+                        size='large'
+                        checked={watch(`data.${index}.enabled`)}
+                        onCheckedChange={(value: boolean) =>
+                          setValue(`data.${index}.enabled`, value, { shouldDirty: true })
+                        }
                         data-testid={`field__enable_${index}`}
                       />
                     </td>
diff --git a/apps/client/src/features/app-settings/panel/manage-panel/RundownDefaultSettings.tsx b/apps/client/src/features/app-settings/panel/manage-panel/RundownDefaultSettings.tsx
index 037c9078c..86467101a 100644
--- a/apps/client/src/features/app-settings/panel/manage-panel/RundownDefaultSettings.tsx
+++ b/apps/client/src/features/app-settings/panel/manage-panel/RundownDefaultSettings.tsx
@@ -1,8 +1,9 @@
-import { Select, Switch } from '@chakra-ui/react';
 import { EndAction, TimerType, TimeStrategy } from 'ontime-types';
 import { parseUserTime } from 'ontime-utils';
 
 import TimeInput from '../../../../common/components/input/time-input/TimeInput';
+import Select from '../../../../common/components/select/Select';
+import Switch from '../../../../common/components/switch/Switch';
 import { editorSettingsDefaults, useEditorSettings } from '../../../../common/stores/editorSettings';
 import * as Panel from '../../panel-utils/PanelUtils';
 
@@ -41,12 +42,7 @@ export default function RundownDefaultSettings() {
                 title='Link previous'
                 description='Whether the start time of new events should be linked to the previous event end time'
               />
-              <Switch
-                variant='ontime'
-                size='lg'
-                defaultChecked={linkPrevious}
-                onChange={(event) => setLinkPrevious(event.target.checked)}
-              />
+              <Switch size='large' checked={linkPrevious} onCheckedChange={setLinkPrevious} />
             </Panel.ListItem>
             <Panel.ListItem>
               <Panel.Field
@@ -54,15 +50,13 @@ export default function RundownDefaultSettings() {
                 description='Which time should be maintained when event schedule is recalculated'
               />
               <Select
-                variant='ontime'
-                size='sm'
-                width='auto'
                 value={defaultTimeStrategy}
-                onChange={(event) => setTimeStrategy(event.target.value as TimeStrategy)}
-              >
-                <option value={TimeStrategy.LockDuration}>Duration</option>
-                <option value={TimeStrategy.LockEnd}>End Time</option>
-              </Select>
+                onValueChange={(value) => setTimeStrategy(value as TimeStrategy)}
+                options={[
+                  { value: TimeStrategy.LockDuration, label: 'Duration' },
+                  { value: TimeStrategy.LockEnd, label: 'End Time' },
+                ]}
+              />
             </Panel.ListItem>
           </Panel.ListGroup>
           <Panel.ListGroup>
@@ -78,31 +72,27 @@ export default function RundownDefaultSettings() {
             <Panel.ListItem>
               <Panel.Field title='Timer type' description='Default type of timer for new events' />
               <Select
-                variant='ontime'
-                size='sm'
-                width='auto'
                 value={defaultTimerType}
-                onChange={(event) => setDefaultTimerType(event.target.value as TimerType)}
-              >
-                <option value={TimerType.CountDown}>Count down</option>
-                <option value={TimerType.CountUp}>Count up</option>
-                <option value={TimerType.Clock}>Clock</option>
-                <option value={TimerType.None}>None</option>
-              </Select>
+                onValueChange={(value) => setDefaultTimerType(value as TimerType)}
+                options={[
+                  { value: TimerType.CountDown, label: 'Count down' },
+                  { value: TimerType.CountUp, label: 'Count up' },
+                  { value: TimerType.Clock, label: 'Clock' },
+                  { value: TimerType.None, label: 'None' },
+                ]}
+              />
             </Panel.ListItem>
             <Panel.ListItem>
               <Panel.Field title='End Action' description='Default end action for new events' />
               <Select
-                variant='ontime'
-                size='sm'
-                width='auto'
                 value={defaultEndAction}
-                onChange={(event) => setDefaultEndAction(event.target.value as EndAction)}
-              >
-                <option value={EndAction.None}>None</option>
-                <option value={EndAction.LoadNext}>Load next</option>
-                <option value={EndAction.PlayNext}>Play next</option>
-              </Select>
+                onValueChange={(value) => setDefaultEndAction(value as EndAction)}
+                options={[
+                  { value: EndAction.None, label: 'None' },
+                  { value: EndAction.LoadNext, label: 'Load next' },
+                  { value: EndAction.PlayNext, label: 'Play next' },
+                ]}
+              />
             </Panel.ListItem>
           </Panel.ListGroup>
           <Panel.ListGroup>
diff --git a/apps/client/src/features/app-settings/panel/manage-panel/composite/CustomFieldEntry.tsx b/apps/client/src/features/app-settings/panel/manage-panel/composite/CustomFieldEntry.tsx
index 629df80d8..96c1bc5e7 100644
--- a/apps/client/src/features/app-settings/panel/manage-panel/composite/CustomFieldEntry.tsx
+++ b/apps/client/src/features/app-settings/panel/manage-panel/composite/CustomFieldEntry.tsx
@@ -56,7 +56,7 @@ export default function CustomFieldEntry(props: CustomFieldEntryProps) {
       </td>
       <td className={style.halfWidth}>{label}</td>
       <td className={style.fullWidth}>
-        <CopyTag label='Copy key to use in integrations' copyValue={fieldKey}>
+        <CopyTag size='small' copyValue={fieldKey}>
           {fieldKey}
         </CopyTag>
       </td>
diff --git a/apps/client/src/features/app-settings/panel/manage-panel/composite/CustomFieldForm.tsx b/apps/client/src/features/app-settings/panel/manage-panel/composite/CustomFieldForm.tsx
index 595b7b945..451c15a91 100644
--- a/apps/client/src/features/app-settings/panel/manage-panel/composite/CustomFieldForm.tsx
+++ b/apps/client/src/features/app-settings/panel/manage-panel/composite/CustomFieldForm.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Radio, RadioGroup } from '@chakra-ui/react';
+import { useForm } from 'react-hook-form';
 import { CustomField } from 'ontime-types';
 import { customFieldLabelToKey, isAlphanumericWithSpace } from 'ontime-utils';
 
@@ -9,6 +8,7 @@ import Button from '../../../../../common/components/buttons/Button';
 import Info from '../../../../../common/components/info/Info';
 import SwatchSelect from '../../../../../common/components/input/colour-input/SwatchSelect';
 import Input from '../../../../../common/components/input/input/Input';
+import RadioGroup from '../../../../../common/components/radio-group/RadioGroup';
 import useCustomFields from '../../../../../common/hooks-query/useCustomFields';
 import { preventEscape } from '../../../../../common/utils/keyEvent';
 import * as Panel from '../../../panel-utils/PanelUtils';
@@ -33,13 +33,13 @@ export default function CustomFieldForm(props: CustomFieldsFormProps) {
   const [_, setColour] = useState(initialColour || '');
 
   const {
-    control,
     handleSubmit,
     register,
     setFocus,
     setError,
     setValue,
     getValues,
+    watch,
     formState: { errors, isSubmitting, isValid, isDirty },
   } = useForm<CustomFieldFormData>({
     defaultValues: { type: 'string', label: initialLabel || '', colour: initialColour || '' },
@@ -90,17 +90,15 @@ export default function CustomFieldForm(props: CustomFieldsFormProps) {
       </Info>
       <div>
         <Panel.Description>Type</Panel.Description>
-        <Controller
-          name='type'
-          control={control}
-          render={({ field }) => (
-            <RadioGroup {...field} size='sm' isDisabled={isEditMode} variant='ontime'>
-              <Panel.InlineElements relation='component'>
-                <Radio value='string'>Text</Radio>
-                <Radio value='image'>Image</Radio>
-              </Panel.InlineElements>
-            </RadioGroup>
-          )}
+        <RadioGroup
+          orientation='horizontal'
+          disabled={isEditMode}
+          onValueChange={(value) => setValue('type', value, { shouldDirty: true })}
+          value={watch('type')}
+          items={[
+            { value: 'string', label: 'Text' },
+            { value: 'image', label: 'Image' },
+          ]}
         />
       </div>
       <div className={style.twoCols}>
@@ -138,7 +136,7 @@ export default function CustomFieldForm(props: CustomFieldsFormProps) {
         <Button variant='ghosted' onClick={onCancel}>
           Cancel
         </Button>
-        <Button  type='submit' variant='primary' disabled={!canSubmit} loading={isSubmitting}>
+        <Button type='submit' variant='primary' disabled={!canSubmit} loading={isSubmitting}>
           Save
         </Button>
       </Panel.InlineElements>
diff --git a/apps/client/src/features/app-settings/panel/manage-panel/sources-panel/GSheetSetup.tsx b/apps/client/src/features/app-settings/panel/manage-panel/sources-panel/GSheetSetup.tsx
index d77a19e06..49b706828 100644
--- a/apps/client/src/features/app-settings/panel/manage-panel/sources-panel/GSheetSetup.tsx
+++ b/apps/client/src/features/app-settings/panel/manage-panel/sources-panel/GSheetSetup.tsx
@@ -174,7 +174,7 @@ export default function GSheetSetup(props: GSheetSetupProps) {
         <Panel.ListGroup>
           <Panel.InlineElements>
             {isAuthenticating && <span>Authenticating...</span>}
-            <CopyTag copyValue={authKey ?? ''} label='Google Auth Key' disabled={!canAuthenticate} size='sm'>
+            <CopyTag copyValue={authKey ?? ''} disabled={!canAuthenticate}>
               {authKey ? authKey : 'Upload files to generate Auth Key'}
             </CopyTag>
             <Button onClick={handleAuthenticate} disabled={!canAuthenticate}>
diff --git a/apps/client/src/features/app-settings/panel/manage-panel/sources-panel/import-map/ImportMapForm.tsx b/apps/client/src/features/app-settings/panel/manage-panel/sources-panel/import-map/ImportMapForm.tsx
index d9ed1ae3f..3a61905be 100644
--- a/apps/client/src/features/app-settings/panel/manage-panel/sources-panel/import-map/ImportMapForm.tsx
+++ b/apps/client/src/features/app-settings/panel/manage-panel/sources-panel/import-map/ImportMapForm.tsx
@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { IoAdd, IoTrash } from 'react-icons/io5';
-import { Select } from '@chakra-ui/react';
 import { ImportMap, isAlphanumericWithSpace } from 'ontime-utils';
 
 import Button from '../../../../../../common/components/buttons/Button';
 import IconButton from '../../../../../../common/components/buttons/IconButton';
 import Input from '../../../../../../common/components/input/input/Input';
+import Select from '../../../../../../common/components/select/Select';
 import Tooltip from '../../../../../../common/components/tooltip/Tooltip';
 import * as Panel from '../../../../panel-utils/PanelUtils';
 import useGoogleSheet from '../useGoogleSheet';
@@ -33,6 +33,7 @@ export default function ImportMapForm(props: ImportMapFormProps) {
     handleSubmit,
     register,
     setValue,
+    watch,
     formState: { errors, isValid },
   } = useForm<NamedImportMap>({
     mode: 'onChange',
@@ -149,19 +150,13 @@ export default function ImportMapForm(props: ImportMapFormProps) {
                   <td>{label}</td>
                   <td>
                     <Select
-                      variant='ontime'
                       id={importName as string}
-                      size='sm'
-                      {...register(label as keyof NamedImportMap)}
-                    >
-                      {worksheetNames?.map((name) => {
-                        return (
-                          <option key={name} value={name}>
-                            {name}
-                          </option>
-                        );
-                      })}
-                    </Select>
+                      value={watch(label as keyof NamedImportMap) as string}
+                      onValueChange={(value: string) =>
+                        setValue(label as keyof NamedImportMap, value, { shouldDirty: true })
+                      }
+                      options={worksheetNames?.map((name) => ({ value: name, label: name })) || []}
+                    />
                   </td>
                   <td className={style.singleActionCell} />
                 </tr>
diff --git a/apps/client/src/features/app-settings/panel/network-panel/NetworkInterfaces.tsx b/apps/client/src/features/app-settings/panel/network-panel/NetworkInterfaces.tsx
index ae9062060..0b6ea6354 100644
--- a/apps/client/src/features/app-settings/panel/network-panel/NetworkInterfaces.tsx
+++ b/apps/client/src/features/app-settings/panel/network-panel/NetworkInterfaces.tsx
@@ -21,12 +21,7 @@ export default function InfoNif() {
         const address = linkToOtherHost(nif.address);
 
         return (
-          <CopyTag
-            key={nif.name}
-            copyValue={address}
-            onClick={() => handleClick(address)}
-            label='Copy IP or navigate to address'
-          >
+          <CopyTag key={nif.name} copyValue={address} onClick={() => handleClick(address)}>
             {`${nif.name} - ${nif.address}`} <IoArrowUp className={style.goIcon} />
           </CopyTag>
         );
diff --git a/apps/client/src/features/app-settings/panel/network-panel/client-control/ClientControlPanel.module.scss b/apps/client/src/features/app-settings/panel/network-panel/client-control/ClientControlPanel.module.scss
index d61ceebfc..d2ac12273 100644
--- a/apps/client/src/features/app-settings/panel/network-panel/client-control/ClientControlPanel.module.scss
+++ b/apps/client/src/features/app-settings/panel/network-panel/client-control/ClientControlPanel.module.scss
@@ -10,3 +10,8 @@
   width: 50%;
   white-space: nowrap;
 }
+
+.copiable {
+  cursor: text  ;
+  user-select: text;
+}
\ No newline at end of file
diff --git a/apps/client/src/features/app-settings/panel/network-panel/client-control/ClientList.tsx b/apps/client/src/features/app-settings/panel/network-panel/client-control/ClientList.tsx
index 53b269e8c..5d8935a4d 100644
--- a/apps/client/src/features/app-settings/panel/network-panel/client-control/ClientList.tsx
+++ b/apps/client/src/features/app-settings/panel/network-panel/client-control/ClientList.tsx
@@ -61,8 +61,8 @@ export default function ClientList() {
         <Panel.Table>
           <thead>
             <tr>
-              <td className={style.halfWidth}>Client Name</td>
-              <td className={style.fullWidth}>Path</td>
+              <td style={{ width: '20%' }}>Client Name</td>
+              <td>Path</td>
               <td />
             </tr>
           </thead>
@@ -76,7 +76,7 @@ export default function ClientList() {
                     {isCurrent && <Tag>SELF</Tag>}
                     {name}
                   </Panel.InlineElements>
-                  <td>{path}</td>
+                  <td className={style.copiable}>{path}</td>
                   <Panel.InlineElements relation='inner'>
                     <Button
                       size='small'
diff --git a/apps/client/src/features/app-settings/panel/project-panel/ProjectListItem.tsx b/apps/client/src/features/app-settings/panel/project-panel/ProjectListItem.tsx
index b5f99ed29..4ebb35745 100644
--- a/apps/client/src/features/app-settings/panel/project-panel/ProjectListItem.tsx
+++ b/apps/client/src/features/app-settings/panel/project-panel/ProjectListItem.tsx
@@ -1,6 +1,12 @@
 import { useState } from 'react';
-import { IoEllipsisHorizontal } from 'react-icons/io5';
-import { IconButton, Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/react';
+import {
+  IoCopyOutline,
+  IoDocumentOutline,
+  IoDownloadOutline,
+  IoEllipsisHorizontal,
+  IoPencilOutline,
+  IoTrash,
+} from 'react-icons/io5';
 
 import {
   deleteProject,
@@ -11,6 +17,8 @@ import {
   renameProject,
 } from '../../../../common/api/db';
 import { invalidateAllCaches, maybeAxiosError } from '../../../../common/api/utils';
+import IconButton from '../../../../common/components/buttons/IconButton';
+import { DropdownMenu } from '../../../../common/components/dropdown-menu/DropdownMenu';
 import { cx } from '../../../../common/utils/styleUtils';
 import * as Panel from '../../panel-utils/PanelUtils';
 
@@ -184,31 +192,33 @@ function ActionMenu(props: ActionMenuProps) {
   };
 
   return (
-    <Menu variant='ontime-on-dark' size='sm'>
-      <MenuButton
-        as={IconButton}
-        aria-label='Options'
-        icon={<IoEllipsisHorizontal />}
-        color='#e2e2e2' // $gray-200
-        variant='ontime-ghosted'
-        size='sm'
-        isDisabled={isDisabled}
-      />
-      <MenuList>
-        <MenuItem onClick={() => onLoad(filename)} isDisabled={current}>
-          Load
-        </MenuItem>
-        <MenuItem onClick={() => onMerge(filename)} isDisabled={current}>
-          Partial Load
-        </MenuItem>
-        <MenuItem onClick={handleRename}>Rename</MenuItem>
-        <MenuItem onClick={handleDuplicate}>Duplicate</MenuItem>
-        <MenuItem onClick={handleDownload}>Download</MenuItem>
-        <MenuItem onClick={handleExportCSV}>Export CSV Rundown</MenuItem>
-        <MenuItem isDisabled={current} onClick={() => onDelete(filename)}>
-          Delete
-        </MenuItem>
-      </MenuList>
-    </Menu>
+    <DropdownMenu
+      render={<IconButton variant='ghosted-white' />}
+      disabled={isDisabled}
+      items={[
+        {
+          type: 'item',
+          icon: IoDownloadOutline,
+          label: 'Load',
+          onClick: () => onLoad(filename),
+          disabled: current,
+        },
+        {
+          type: 'item',
+          icon: IoDownloadOutline,
+          label: 'Partial Load',
+          onClick: () => onMerge(filename),
+          disabled: current,
+        },
+        { type: 'item', icon: IoPencilOutline, label: 'Rename', onClick: handleRename },
+        { type: 'item', icon: IoCopyOutline, label: 'Duplicate', onClick: handleDuplicate },
+        { type: 'item', icon: IoDocumentOutline, label: 'Download', onClick: handleDownload },
+        { type: 'item', icon: IoDocumentOutline, label: 'Export CSV Rundown', onClick: handleExportCSV },
+        { type: 'divider' },
+        { type: 'item', icon: IoTrash, label: 'Delete', onClick: () => onDelete(filename), disabled: current },
+      ]}
+    >
+      <IoEllipsisHorizontal />
+    </DropdownMenu>
   );
 }
diff --git a/apps/client/src/features/app-settings/panel/project-panel/ProjectMergeForm.tsx b/apps/client/src/features/app-settings/panel/project-panel/ProjectMergeForm.tsx
index e21b4b753..66d7cffcb 100644
--- a/apps/client/src/features/app-settings/panel/project-panel/ProjectMergeForm.tsx
+++ b/apps/client/src/features/app-settings/panel/project-panel/ProjectMergeForm.tsx
@@ -1,12 +1,12 @@
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { Switch } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 
 import { PROJECT_DATA } from '../../../../common/api/constants';
 import { getDb, patchData } from '../../../../common/api/db';
 import { maybeAxiosError } from '../../../../common/api/utils';
 import Button from '../../../../common/components/buttons/Button';
+import Switch from '../../../../common/components/switch/Switch';
 import { cx } from '../../../../common/utils/styleUtils';
 import * as Panel from '../../panel-utils/PanelUtils';
 
@@ -34,7 +34,8 @@ export default function ProjectMergeForm(props: ProjectMergeFromProps) {
 
   const {
     handleSubmit,
-    register,
+    watch,
+    setValue,
     formState: { isSubmitting, isValid, isDirty },
   } = useForm<ProjectMergeFormValues>({
     defaultValues: {
@@ -92,23 +93,43 @@ export default function ProjectMergeForm(props: ProjectMergeFromProps) {
           <br /> This process is irreversible.
         </Panel.Description>
         <label>
-          <Switch variant='ontime' {...register('project')} />
+          <Switch
+            size='large'
+            checked={watch('project')}
+            onCheckedChange={(value: boolean) => setValue('project', value, { shouldDirty: true })}
+          />
           Project data
         </label>
         <label>
-          <Switch variant='ontime' {...register('rundown')} />
+          <Switch
+            size='large'
+            checked={watch('rundown')}
+            onCheckedChange={(value: boolean) => setValue('rundown', value, { shouldDirty: true })}
+          />
           Rundown + Custom Fields
         </label>
         <label>
-          <Switch variant='ontime' {...register('viewSettings')} />
+          <Switch
+            size='large'
+            checked={watch('viewSettings')}
+            onCheckedChange={(value: boolean) => setValue('viewSettings', value, { shouldDirty: true })}
+          />
           View Settings
         </label>
         <label>
-          <Switch variant='ontime' {...register('urlPresets')} />
+          <Switch
+            size='large'
+            checked={watch('urlPresets')}
+            onCheckedChange={(value: boolean) => setValue('urlPresets', value, { shouldDirty: true })}
+          />
           URL Presets
         </label>
         <label>
-          <Switch variant='ontime' {...register('automation')} />
+          <Switch
+            size='large'
+            checked={watch('automation')}
+            onCheckedChange={(value: boolean) => setValue('automation', value, { shouldDirty: true })}
+          />
           Automation Settings
         </label>
       </Panel.Section>
diff --git a/apps/client/src/features/app-settings/panel/settings-panel/GeneralSettings.tsx b/apps/client/src/features/app-settings/panel/settings-panel/GeneralSettings.tsx
index 40fcba239..7ea3b780f 100644
--- a/apps/client/src/features/app-settings/panel/settings-panel/GeneralSettings.tsx
+++ b/apps/client/src/features/app-settings/panel/settings-panel/GeneralSettings.tsx
@@ -119,7 +119,7 @@ export default function GeneralSettings() {
                 description='Protect the editor view with a pin code'
                 error={errors.editorKey?.message}
               />
-              <GeneralPinInput register={register} formName='editorKey' isDisabled={disableInputs} />
+              <GeneralPinInput register={register} formName='editorKey' disabled={disableInputs} />
             </Panel.ListItem>
             <Panel.ListItem>
               <Panel.Field
@@ -127,7 +127,7 @@ export default function GeneralSettings() {
                 description='Protect the operator and cuesheet views with a pin code'
                 error={errors.operatorKey?.message}
               />
-              <GeneralPinInput register={register} formName='operatorKey' isDisabled={disableInputs} />
+              <GeneralPinInput register={register} formName='operatorKey' disabled={disableInputs} />
             </Panel.ListItem>
             <Panel.ListItem>
               <Panel.Field
diff --git a/apps/client/src/features/app-settings/panel/settings-panel/ViewSettings.tsx b/apps/client/src/features/app-settings/panel/settings-panel/ViewSettings.tsx
index ee60936f8..a3ddecd92 100644
--- a/apps/client/src/features/app-settings/panel/settings-panel/ViewSettings.tsx
+++ b/apps/client/src/features/app-settings/panel/settings-panel/ViewSettings.tsx
@@ -1,6 +1,5 @@
 import { useEffect } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Switch } from '@chakra-ui/react';
+import { useForm } from 'react-hook-form';
 import { useDisclosure } from '@mantine/hooks';
 import { ViewSettings as ViewSettingsType } from 'ontime-types';
 
@@ -10,6 +9,7 @@ import Info from '../../../../common/components/info/Info';
 import { SwatchPickerRHF } from '../../../../common/components/input/colour-input/SwatchPicker';
 import Input from '../../../../common/components/input/input/Input';
 import ExternalLink from '../../../../common/components/link/external-link/ExternalLink';
+import Switch from '../../../../common/components/switch/Switch';
 import useViewSettings from '../../../../common/hooks-query/useViewSettings';
 import { preventEscape } from '../../../../common/utils/keyEvent';
 import * as Panel from '../../panel-utils/PanelUtils';
@@ -28,6 +28,8 @@ export default function ViewSettings() {
     setError,
     register,
     reset,
+    setValue,
+    watch,
     formState: { isSubmitting, isDirty, errors },
   } = useForm<ViewSettingsType>({
     defaultValues: data,
@@ -96,12 +98,10 @@ export default function ViewSettings() {
                 title='Override CSS styles'
                 description='Enables overriding view styles with custom stylesheet'
               />
-              <Controller
-                control={control}
-                name='overrideStyles'
-                render={({ field: { onChange, value, ref } }) => (
-                  <Switch variant='ontime' size='lg' isChecked={value} onChange={onChange} ref={ref} />
-                )}
+              <Switch
+                size='large'
+                checked={watch('overrideStyles')}
+                onCheckedChange={(value: boolean) => setValue('overrideStyles', value, { shouldDirty: true })}
               />
               <Button onClick={codeEditorHandler.open} disabled={isSubmitting}>
                 Edit CSS override
@@ -128,12 +128,10 @@ export default function ViewSettings() {
                 title='Freeze timer on end'
                 description='When a timer hits 00:00:00, it freezes instead of going negative. It invalidates the End Message.'
               />
-              <Controller
-                control={control}
-                name='freezeEnd'
-                render={({ field: { onChange, value, ref } }) => (
-                  <Switch variant='ontime' size='lg' isChecked={value} onChange={onChange} ref={ref} />
-                )}
+              <Switch
+                size='large'
+                checked={watch('freezeEnd')}
+                onCheckedChange={(value: boolean) => setValue('freezeEnd', value, { shouldDirty: true })}
               />
             </Panel.ListItem>
             <Panel.ListItem>
diff --git a/apps/client/src/features/app-settings/panel/settings-panel/composite/GeneralPinInput.module.scss b/apps/client/src/features/app-settings/panel/settings-panel/composite/GeneralPinInput.module.scss
new file mode 100644
index 000000000..d5791c890
--- /dev/null
+++ b/apps/client/src/features/app-settings/panel/settings-panel/composite/GeneralPinInput.module.scss
@@ -0,0 +1,9 @@
+.container {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+
+  input {
+    width: 5em;
+  }
+}
diff --git a/apps/client/src/features/app-settings/panel/settings-panel/composite/GeneralPinInput.tsx b/apps/client/src/features/app-settings/panel/settings-panel/composite/GeneralPinInput.tsx
index 5540beaed..bbac8f071 100644
--- a/apps/client/src/features/app-settings/panel/settings-panel/composite/GeneralPinInput.tsx
+++ b/apps/client/src/features/app-settings/panel/settings-panel/composite/GeneralPinInput.tsx
@@ -1,24 +1,26 @@
 import { PropsWithChildren, useState } from 'react';
 import { UseFormRegister } from 'react-hook-form';
 import { IoEyeOutline } from 'react-icons/io5';
-import { IconButton, Input, InputGroup, InputRightElement } from '@chakra-ui/react';
 import { Settings } from 'ontime-types';
 
+import IconButton from '../../../../../common/components/buttons/IconButton';
+import Input from '../../../../../common/components/input/input/Input';
 import { isAlphanumeric } from '../../../../../common/utils/regex';
 
+import style from './GeneralPinInput.module.scss';
+
 interface GeneralPinInputProps {
   register: UseFormRegister<Settings>;
   formName: keyof Settings;
-  isDisabled?: boolean;
+  disabled?: boolean;
 }
 
-export default function GeneralPinInput(props: PropsWithChildren<GeneralPinInputProps>) {
-  const { register, formName, isDisabled } = props;
+export default function GeneralPinInput({ register, formName, disabled }: PropsWithChildren<GeneralPinInputProps>) {
   const [isVisible, setVisible] = useState(false);
+
   return (
-    <InputGroup size='sm' width='100px'>
+    <div className={style.container}>
       <Input
-        variant='ontime-filled'
         type={isVisible ? 'text' : 'password'}
         maxLength={4}
         {...register(formName, {
@@ -28,18 +30,16 @@ export default function GeneralPinInput(props: PropsWithChildren<GeneralPinInput
           },
         })}
         placeholder='-'
-        isDisabled={isDisabled}
+        disabled={disabled}
       />
-      <InputRightElement>
-        <IconButton
-          onMouseDown={() => setVisible(true)}
-          onMouseUp={() => setVisible(false)}
-          size='sm'
-          variant='ontime-ghosted'
-          icon={<IoEyeOutline />}
-          aria-label='Show pin code'
-        />
-      </InputRightElement>
-    </InputGroup>
+      <IconButton
+        onMouseDown={() => setVisible(true)}
+        onMouseUp={() => setVisible(false)}
+        variant='ghosted'
+        aria-label='Show pin code'
+      >
+        <IoEyeOutline />
+      </IconButton>
+    </div>
   );
 }
diff --git a/apps/client/src/features/app-settings/quick-start/QuickStart.tsx b/apps/client/src/features/app-settings/quick-start/QuickStart.tsx
index 634562882..9032dda80 100644
--- a/apps/client/src/features/app-settings/quick-start/QuickStart.tsx
+++ b/apps/client/src/features/app-settings/quick-start/QuickStart.tsx
@@ -75,7 +75,8 @@ export default function QuickStart({ isOpen, onClose }: QuickStartProps) {
                 error={errors.settings?.timeFormat?.message}
               />
               <Select
-                {...register('settings.timeFormat')}
+                value={watch('settings.timeFormat')}
+                onValueChange={(value: '12' | '24') => setValue('settings.timeFormat', value, { shouldDirty: true })}
                 defaultValue='24'
                 options={[
                   { value: '12', label: '12 hours 11:00:10 PM' },
@@ -90,7 +91,8 @@ export default function QuickStart({ isOpen, onClose }: QuickStartProps) {
                 error={errors.settings?.language?.message}
               />
               <Select
-                {...register('settings.language')}
+                value={watch('settings.language')}
+                onValueChange={(value: string) => setValue('settings.language', value, { shouldDirty: true })}
                 defaultValue='en'
                 options={[
                   { value: 'en', label: 'English' },
@@ -132,6 +134,7 @@ export default function QuickStart({ isOpen, onClose }: QuickStartProps) {
                 description='When a timer hits 00:00:00, it freezes instead of going negative. It invalidates the End Message.'
               />
               <Switch
+                size='large'
                 name='viewSettings.freezeEnd'
                 checked={watch('viewSettings.freezeEnd')}
                 onCheckedChange={(checked) => setValue('viewSettings.freezeEnd', checked)}
diff --git a/apps/client/src/features/control/playback/tap-button/TapButton.module.scss b/apps/client/src/features/control/playback/tap-button/TapButton.module.scss
index e091dbbb7..f904cb8c8 100644
--- a/apps/client/src/features/control/playback/tap-button/TapButton.module.scss
+++ b/apps/client/src/features/control/playback/tap-button/TapButton.module.scss
@@ -2,16 +2,6 @@ $button-bg-gray: $gray-1050;
 $button-color-white: $gray-50;
 
 @mixin tap-factory($theme-color) {
-  font-family: $ontime-font-family;
-  font-size: calc(1rem + 2px);
-  border-radius: $component-border-radius-md;
-  width: 100%;
-  transition-property: color, background-color;
-  transition-duration: $transition-time-feedback;
-  display: grid;
-  place-content: center;
-  letter-spacing: 0.5px;
-
   background-color: $button-bg-gray;
   color: $theme-color;
 
@@ -43,6 +33,18 @@ $button-color-white: $gray-50;
   }
 }
 
+.tapButton {
+  font-family: $ontime-font-family;
+  font-size: calc(1rem + 2px);
+  border-radius: $component-border-radius-md;
+  width: 100%;
+  transition-property: color, background-color;
+  transition-duration: $transition-time-feedback;
+  display: grid;
+  place-content: center;
+  letter-spacing: 0.5px;
+}
+
 .tapButton.neutral {
   @include tap-factory($gray-50);
 
@@ -86,7 +88,7 @@ $button-color-white: $gray-50;
 
 .tapButton.tight {
   padding-inline: 0.5rem;
-  width: fit-content
+  width: fit-content;
 }
 
 .tapButton.fill {
diff --git a/apps/client/src/features/control/playback/tap-button/TapButton.tsx b/apps/client/src/features/control/playback/tap-button/TapButton.tsx
index 267b8f963..bec58fc37 100644
--- a/apps/client/src/features/control/playback/tap-button/TapButton.tsx
+++ b/apps/client/src/features/control/playback/tap-button/TapButton.tsx
@@ -17,10 +17,15 @@ interface TapButtonProps {
 
 const TapButton = forwardRef((props: PropsWithChildren<TapButtonProps>, ref: ForwardedRef<HTMLButtonElement>) => {
   const { children, disabled, onClick, theme = 'neutral', aspect = 'normal', active, className } = props;
-  const classes = cx([style.tapButton, className, style[theme], style[aspect], active ? style.active : null]);
 
   return (
-    <button className={classes} disabled={disabled} type='button' onClick={onClick} ref={ref}>
+    <button
+      className={cx([style.tapButton, className, style[theme], style[aspect], active && style.active])}
+      disabled={disabled}
+      type='button'
+      onClick={onClick}
+      ref={ref}
+    >
       {children}
     </button>
   );
diff --git a/apps/client/src/features/log/Log.module.scss b/apps/client/src/features/log/Log.module.scss
index 87b5f1a56..7e550db34 100644
--- a/apps/client/src/features/log/Log.module.scss
+++ b/apps/client/src/features/log/Log.module.scss
@@ -7,6 +7,12 @@ $info-hover: $section-white;
   user-select: text;
   min-height: 20vh;
   max-height: 40vh;
+  background-color: $gray-1350;
+  padding: 0.5rem;
+}
+
+.apart {
+  margin-left: auto;
 }
 
 .logEntry {
diff --git a/apps/client/src/features/log/Log.tsx b/apps/client/src/features/log/Log.tsx
index 8ba13473c..158fa30ca 100644
--- a/apps/client/src/features/log/Log.tsx
+++ b/apps/client/src/features/log/Log.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useState } from 'react';
+import { IoClose } from 'react-icons/io5';
 import { LogOrigin } from 'ontime-types';
 
 import Button from '../../common/components/buttons/Button';
@@ -105,8 +106,8 @@ export default function Log() {
         >
           {LogOrigin.Tx}
         </Button>
-        <Button variant='subtle-destructive' size='small' onClick={clearLogs}>
-          Clear
+        <Button variant='subtle-destructive' size='small' onClick={clearLogs} className={style.apart}>
+          <IoClose /> Clear
         </Button>
       </Panel.InlineElements>
       <ul className={style.log}>
diff --git a/apps/client/src/features/operator/edit-modal/EditModal.module.scss b/apps/client/src/features/operator/edit-modal/EditModal.module.scss
index 8061d793a..74e581ae1 100644
--- a/apps/client/src/features/operator/edit-modal/EditModal.module.scss
+++ b/apps/client/src/features/operator/edit-modal/EditModal.module.scss
@@ -3,7 +3,6 @@
   top: 10%;
   left: 50%;
 
-  z-index: $zindex-dialog;
   transform: translateX(-50%);
 
   padding-inline: 1rem;
diff --git a/apps/client/src/features/operator/edit-modal/EditModal.tsx b/apps/client/src/features/operator/edit-modal/EditModal.tsx
index 86045b4e5..22121d651 100644
--- a/apps/client/src/features/operator/edit-modal/EditModal.tsx
+++ b/apps/client/src/features/operator/edit-modal/EditModal.tsx
@@ -78,7 +78,6 @@ export default function EditModal(props: EditModalProps) {
                     defaultValue={field.value}
                     data-field={field.id}
                     disabled={loading}
-                    resize='none'
                     rows={5}
                   />
                 </Fragment>
diff --git a/apps/client/src/features/operator/operator.options.tsx b/apps/client/src/features/operator/operator.options.tsx
index 743f2cdb2..02adcf794 100644
--- a/apps/client/src/features/operator/operator.options.tsx
+++ b/apps/client/src/features/operator/operator.options.tsx
@@ -12,7 +12,10 @@ import {
 import { isStringBoolean } from '../viewers/common/viewUtils';
 
 export const getOperatorOptions = (customFields: CustomFields, timeFormat: string): ViewOption[] => {
-  const fieldOptions = makeOptionsFromCustomFields(customFields, { title: 'Title', note: 'Note' });
+  const fieldOptions = makeOptionsFromCustomFields(customFields, [
+    { value: 'title', label: 'Title' },
+    { value: 'note', label: 'Note' },
+  ]);
   const customFieldSelect = makeCustomFieldSelectOptions(customFields);
 
   return [
diff --git a/apps/client/src/features/rundown/RundownExport.tsx b/apps/client/src/features/rundown/RundownExport.tsx
index a99eea386..b3d9926da 100644
--- a/apps/client/src/features/rundown/RundownExport.tsx
+++ b/apps/client/src/features/rundown/RundownExport.tsx
@@ -1,7 +1,6 @@
 import { memo } from 'react';
 import { useSessionStorage } from '@mantine/hooks';
 
-import { ContextMenu } from '../../common/components/context-menu/ContextMenu';
 import { Corner } from '../../common/components/editor-utils/EditorUtils';
 import ErrorBoundary from '../../common/components/error-boundary/ErrorBoundary';
 import ViewNavigationMenu from '../../common/components/navigation-menu/ViewNavigationMenu';
@@ -13,6 +12,7 @@ import { AppMode, sessionKeys } from '../../ontimeConfig';
 
 import RundownEntryEditor from './entry-editor/RundownEntryEditor';
 import FinderPlacement from './placements/FinderPlacement';
+import { RundownContextMenu } from './rundown-context-menu/RundownContextMenu';
 import RundownWrapper from './RundownWrapper';
 
 import style from './RundownExport.module.scss';
@@ -39,9 +39,9 @@ function RundownExport() {
           <ViewNavigationMenu suppressSettings />
           <div className={style.content}>
             <ErrorBoundary>
-              <ContextMenu>
+              <RundownContextMenu>
                 <RundownWrapper isSmallDevice />
-              </ContextMenu>
+              </RundownContextMenu>
             </ErrorBoundary>
           </div>
         </div>
@@ -59,9 +59,9 @@ function RundownExport() {
           <div className={style.list}>
             <ErrorBoundary>
               <Corner onClick={(event) => handleLinks('rundown', event)} />
-              <ContextMenu>
+              <RundownContextMenu>
                 <RundownWrapper />
-              </ContextMenu>
+              </RundownContextMenu>
             </ErrorBoundary>
           </div>
           {!hideSideBar && (
diff --git a/apps/client/src/features/rundown/entry-editor/composite/EventEditorFooter.tsx b/apps/client/src/features/rundown/entry-editor/composite/EventEditorFooter.tsx
index 30c5c7b25..a994dcb7f 100644
--- a/apps/client/src/features/rundown/entry-editor/composite/EventEditorFooter.tsx
+++ b/apps/client/src/features/rundown/entry-editor/composite/EventEditorFooter.tsx
@@ -16,12 +16,8 @@ function EventEditorFooter({ id, cue }: EventEditorFooterProps) {
 
   return (
     <div className={style.footer}>
-      <CopyTag copyValue={loadById} label='OSC trigger by ID'>
-        {loadById}
-      </CopyTag>
-      <CopyTag copyValue={loadByCue} label='OSC trigger by cue'>
-        {loadByCue}
-      </CopyTag>
+      <CopyTag copyValue={loadById}>{loadById}</CopyTag>
+      <CopyTag copyValue={loadByCue}>{loadByCue}</CopyTag>
     </div>
   );
 }
diff --git a/apps/client/src/features/rundown/entry-editor/composite/EventTextArea.tsx b/apps/client/src/features/rundown/entry-editor/composite/EventTextArea.tsx
index 8a72ff16f..9968be987 100644
--- a/apps/client/src/features/rundown/entry-editor/composite/EventTextArea.tsx
+++ b/apps/client/src/features/rundown/entry-editor/composite/EventTextArea.tsx
@@ -1,7 +1,7 @@
 import { type CSSProperties, useCallback, useRef } from 'react';
 
 import * as Editor from '../../../../common/components/editor-utils/EditorUtils';
-import { AutoTextArea } from '../../../../common/components/input/auto-text-area/AutoTextArea';
+import { AutoTextarea } from '../../../../common/components/input/auto-textarea/AutoTextarea';
 import useReactiveTextInput from '../../../../common/components/input/text-input/useReactiveTextInput';
 import { EventEditorUpdateFields } from '../EventEditor';
 
@@ -22,7 +22,7 @@ export default function EventTextArea({
   style: givenStyles,
   submitHandler,
 }: CountedTextAreaProps) {
-  const ref = useRef<HTMLInputElement | null>(null);
+  const ref = useRef<HTMLTextAreaElement | null>(null);
   const submitCallback = useCallback((newValue: string) => submitHandler(field, newValue), [field, submitHandler]);
 
   const { value, onChange, onBlur, onKeyDown } = useReactiveTextInput(initialValue, submitCallback, ref, {
@@ -34,14 +34,12 @@ export default function EventTextArea({
       <Editor.Label className={className} htmlFor={field} style={givenStyles}>
         {label}
       </Editor.Label>
-      <AutoTextArea
+      <AutoTextarea
         id={field}
         inputref={ref}
         rows={1}
-        size='sm'
-        resize='none'
-        variant='ontime-filled'
         data-testid='input-textarea'
+        fluid
         value={value}
         onChange={onChange}
         onBlur={onBlur}
diff --git a/apps/client/src/features/rundown/entry-editor/quick-add-cursor/QuickAddInline.tsx b/apps/client/src/features/rundown/entry-editor/quick-add-cursor/QuickAddInline.tsx
index a424929f3..6a7397663 100644
--- a/apps/client/src/features/rundown/entry-editor/quick-add-cursor/QuickAddInline.tsx
+++ b/apps/client/src/features/rundown/entry-editor/quick-add-cursor/QuickAddInline.tsx
@@ -67,10 +67,10 @@ function QuickAddInline({ previousEventId, parentBlock }: QuickAddInlineProps) {
     <div className={style.quickAdd} data-testid='quick-add-inline'>
       <DropdownMenu
         items={[
-          { type: 'item', icon: <IoAdd />, label: 'Add Event', onClick: addEvent },
-          { type: 'item', icon: <IoAdd />, label: 'Add Delay', onClick: addDelay },
-          { type: 'item', icon: <IoAdd />, label: 'Add Milestone', onClick: addMilestone },
-          { type: 'item', icon: <IoAdd />, label: 'Add Group', onClick: addBlock, disabled: parentBlock !== null },
+          { type: 'item', icon: IoAdd, label: 'Add Event', onClick: addEvent },
+          { type: 'item', icon: IoAdd, label: 'Add Delay', onClick: addDelay },
+          { type: 'item', icon: IoAdd, label: 'Add Milestone', onClick: addMilestone },
+          { type: 'item', icon: IoAdd, label: 'Add Group', onClick: addBlock, disabled: parentBlock !== null },
         ]}
         render={<IconButton size='small' variant='primary' className={style.addButton} />}
       >
diff --git a/apps/client/src/features/rundown/rundown-block/RundownBlock.tsx b/apps/client/src/features/rundown/rundown-block/RundownBlock.tsx
index 6e6c0ff7f..08a064f2d 100644
--- a/apps/client/src/features/rundown/rundown-block/RundownBlock.tsx
+++ b/apps/client/src/features/rundown/rundown-block/RundownBlock.tsx
@@ -36,21 +36,26 @@ export default function RundownBlock({ data, hasCursor, collapsed, onCollapse }:
 
   const [onContextMenu] = useContextMenu<HTMLDivElement>([
     {
+      type: 'item',
       label: 'Clone Group',
       icon: IoDuplicateOutline,
       onClick: () => clone(data.id),
     },
     {
+      type: 'item',
+
       label: 'Ungroup',
       icon: IoFolderOpenOutline,
       onClick: () => ungroup(data.id),
-      isDisabled: data.entries.length === 0,
+      disabled: data.entries.length === 0,
     },
+    { type: 'divider' },
     {
+      type: 'item',
       label: 'Delete Group',
       icon: IoTrash,
       onClick: () => deleteEntry([data.id]),
-      withDivider: true,
+      disabled: true,
     },
   ]);
 
diff --git a/apps/client/src/features/rundown/rundown-context-menu/RundownContextMenu.tsx b/apps/client/src/features/rundown/rundown-context-menu/RundownContextMenu.tsx
new file mode 100644
index 000000000..980fea1cf
--- /dev/null
+++ b/apps/client/src/features/rundown/rundown-context-menu/RundownContextMenu.tsx
@@ -0,0 +1,44 @@
+import type { PropsWithChildren } from 'react';
+import { create } from 'zustand';
+
+import { DropdownMenuOption, PositionedDropdownMenu } from '../../../common/components/dropdown-menu/DropdownMenu';
+
+type Position = {
+  x: number;
+  y: number;
+};
+
+type ContextMenuStore = {
+  position: Position;
+  options: DropdownMenuOption[];
+  isOpen: boolean;
+  setContextMenu: (position: Position, options: DropdownMenuOption[]) => void;
+  setIsOpen: (newIsOpen: boolean) => void;
+};
+
+export const useContextMenuStore = create<ContextMenuStore>((set) => ({
+  position: { x: 0, y: 0 },
+  options: [],
+  isOpen: false,
+  setContextMenu: (position, options) => set(() => ({ position, options, isOpen: true })),
+  setIsOpen: (newIsOpen) => set(() => ({ isOpen: newIsOpen })),
+}));
+
+export function RundownContextMenu({ children }: PropsWithChildren) {
+  const { position, options, isOpen, setIsOpen } = useContextMenuStore();
+
+  const onClose = () => {
+    return setIsOpen(false);
+  };
+
+  if (!isOpen) {
+    return children;
+  }
+
+  return (
+    <>
+      {children}
+      <PositionedDropdownMenu isOpen position={position} onClose={onClose} items={options} />
+    </>
+  );
+}
diff --git a/apps/client/src/features/rundown/rundown-event/RundownEvent.tsx b/apps/client/src/features/rundown/rundown-event/RundownEvent.tsx
index a15fd8285..1e2227c29 100644
--- a/apps/client/src/features/rundown/rundown-event/RundownEvent.tsx
+++ b/apps/client/src/features/rundown/rundown-event/RundownEvent.tsx
@@ -107,6 +107,7 @@ export default function RundownEvent({
     selectedEvents.size > 1
       ? [
           {
+            type: 'item',
             label: 'Link to previous',
             icon: IoLink,
             onClick: () =>
@@ -116,6 +117,8 @@ export default function RundownEvent({
               }),
           },
           {
+            type: 'item',
+
             label: 'Unlink from previous',
             icon: IoUnlink,
             onClick: () =>
@@ -124,11 +127,15 @@ export default function RundownEvent({
                 value: null,
               }),
           },
-          { withDivider: true, label: 'Group', icon: IoFolder, onClick: () => actionHandler('group') },
-          { withDivider: true, label: 'Delete', icon: IoTrash, onClick: () => actionHandler('delete') },
+          { type: 'divider' },
+          { type: 'item', label: 'Group', icon: IoFolder, onClick: () => actionHandler('group') },
+          { type: 'divider' },
+          { type: 'item', label: 'Delete', icon: IoTrash, onClick: () => actionHandler('delete') },
         ]
       : [
           {
+            type: 'item',
+
             label: 'Toggle link to previous',
             icon: IoLink,
             onClick: () =>
@@ -137,23 +144,34 @@ export default function RundownEvent({
                 value: linkStart,
               }),
           },
+          { type: 'divider' },
+
           {
+            type: 'item',
+
             label: 'Add to swap',
             icon: IoAdd,
             onClick: () => setSelectedEventId(eventId),
-            withDivider: true,
           },
           {
+            type: 'item',
+
             label: `Swap this event with ${selectedEventId ?? ''}`,
             icon: IoSwapVertical,
             onClick: () => {
               actionHandler('swap', { field: 'id', value: selectedEventId });
               clearSelectedEventId();
             },
-            isDisabled: selectedEventId == null || selectedEventId === eventId,
+            disabled: selectedEventId == null || selectedEventId === eventId,
           },
-          { withDivider: false, label: 'Clone', icon: IoDuplicateOutline, onClick: () => actionHandler('clone') },
-          { withDivider: true, label: 'Delete', icon: IoTrash, onClick: () => actionHandler('delete') },
+          {
+            type: 'item',
+            label: 'Clone',
+            icon: IoDuplicateOutline,
+            onClick: () => actionHandler('clone'),
+          },
+          { type: 'divider' },
+          { type: 'item', label: 'Delete', icon: IoTrash, onClick: () => actionHandler('delete') },
         ],
   );
 
diff --git a/apps/client/src/features/viewers/clock/clock.options.ts b/apps/client/src/features/viewers/clock/clock.options.ts
index 59cb05cf9..85c558f05 100644
--- a/apps/client/src/features/viewers/clock/clock.options.ts
+++ b/apps/client/src/features/viewers/clock/clock.options.ts
@@ -48,7 +48,11 @@ export const getClockOptions = (timeFormat: string): ViewOption[] => [
         title: 'Align Horizontal',
         description: 'Moves the horizontally in page to start = left | center | end = right',
         type: 'option',
-        values: { start: 'Start', center: 'Center', end: 'End' },
+        values: [
+          { value: 'start', label: 'Start' },
+          { value: 'center', label: 'Center' },
+          { value: 'end', label: 'End' },
+        ],
         defaultValue: 'center',
       },
       {
@@ -63,7 +67,11 @@ export const getClockOptions = (timeFormat: string): ViewOption[] => [
         title: 'Align Vertical',
         description: 'Moves the vertically in page to start = left | center | end = right',
         type: 'option',
-        values: { start: 'Start', center: 'Center', end: 'End' },
+        values: [
+          { value: 'start', label: 'Start' },
+          { value: 'center', label: 'Center' },
+          { value: 'end', label: 'End' },
+        ],
         defaultValue: 'center',
       },
       {
diff --git a/apps/client/src/features/viewers/lower-thirds/lowerThird.options.ts b/apps/client/src/features/viewers/lower-thirds/lowerThird.options.ts
index 93ba38b8d..1fb6cde3e 100644
--- a/apps/client/src/features/viewers/lower-thirds/lowerThird.options.ts
+++ b/apps/client/src/features/viewers/lower-thirds/lowerThird.options.ts
@@ -8,16 +8,16 @@ import { makeOptionsFromCustomFields } from '../../../common/components/view-par
 import safeParseNumber from '../../../common/utils/safeParseNumber';
 
 export const getLowerThirdOptions = (customFields: CustomFields): ViewOption[] => {
-  const topSourceOptions = makeOptionsFromCustomFields(customFields, {
-    title: 'Title',
-    note: 'Note',
-  });
+  const topSourceOptions = makeOptionsFromCustomFields(customFields, [
+    { value: 'title', label: 'Title' },
+    { value: 'note', label: 'Note' },
+  ]);
 
-  const bottomSourceOptions = makeOptionsFromCustomFields(customFields, {
-    title: 'Title',
-    note: 'Note',
-    none: 'None',
-  });
+  const bottomSourceOptions = makeOptionsFromCustomFields(customFields, [
+    { value: 'title', label: 'Title' },
+    { value: 'note', label: 'Note' },
+    { value: 'none', label: 'None' },
+  ]);
 
   return [
     {
@@ -99,10 +99,9 @@ export const getLowerThirdOptions = (customFields: CustomFields): ViewOption[] =
         {
           id: 'width',
           title: 'Minimum Width',
-          description: 'Minimum Width of the element',
+          description: 'Minimum Width of the element (percentage)',
           type: 'number',
-          prefix: '%',
-          placeholder: '45 (default)',
+          placeholder: '45 (default %)',
         },
         {
           id: 'key',
diff --git a/apps/client/src/features/viewers/minimal-timer/minimalTimer.options.ts b/apps/client/src/features/viewers/minimal-timer/minimalTimer.options.ts
index aa5fdaec0..6833a36dd 100644
--- a/apps/client/src/features/viewers/minimal-timer/minimalTimer.options.ts
+++ b/apps/client/src/features/viewers/minimal-timer/minimalTimer.options.ts
@@ -68,7 +68,11 @@ export const MINIMAL_TIMER_OPTIONS: ViewOption[] = [
         title: 'Align Horizontal',
         description: 'Moves the horizontally in page to start = left | center | end = right',
         type: 'option',
-        values: { start: 'Start', center: 'Center', end: 'End' },
+        values: [
+          { value: 'start', label: 'Start' },
+          { value: 'center', label: 'Center' },
+          { value: 'end', label: 'End' },
+        ],
         defaultValue: 'center',
       },
       {
@@ -83,7 +87,11 @@ export const MINIMAL_TIMER_OPTIONS: ViewOption[] = [
         title: 'Align Vertical',
         description: 'Moves the vertically in page to start = left | center | end = right',
         type: 'option',
-        values: { start: 'Start', center: 'Center', end: 'End' },
+        values: [
+          { value: 'start', label: 'Start' },
+          { value: 'center', label: 'Center' },
+          { value: 'end', label: 'End' },
+        ],
         defaultValue: 'center',
       },
       {
diff --git a/apps/client/src/index.scss b/apps/client/src/index.scss
index 89b8aa83c..f44e22265 100644
--- a/apps/client/src/index.scss
+++ b/apps/client/src/index.scss
@@ -43,24 +43,29 @@ $track-color: $white-1;
 $thumb-color: $gray-1100;
 $thumb-color-hover: $gray-900;
 
-* {
+/* Apply a natural box layout model to all elements */
+html {
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+  margin: 0;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   scrollbar-color: $thumb-color $track-color;
   scrollbar-width: thin;
 }
 
-// reset box-sizing
-*,
-*:before,
-*:after {
-  box-sizing: inherit;
-}
-
-body, html {
+body,
+html {
   font-size: 15px;
   font-family: $ontime-font-family;
   background-color: var(--background-color-override, $ui-black);
+  -webkit-font-smoothing: antialiased;
+  line-height: 1.5;
 }
 
 body,
@@ -76,6 +81,51 @@ html,
   isolation: isolate;
 }
 
+// reset button styles
+button {
+  all: unset;
+  box-sizing: border-box;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+table {
+  word-break: break-word;
+}
+
+// remove buttons in number inputs
+/* WebKit and Blink */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+/* Firefox */
+input[type='number'] {
+  -moz-appearance: textfield;
+}
+
 /* smaller root size for MacOS laptops */
 @media (max-width: 1600px) {
   body,
@@ -85,14 +135,6 @@ html,
   }
 }
 
-/**
- * workaround for chakra
- * https://github.com/chakra-ui/chakra-ui/issues/417
- */
-option {
-  color: initial;
-}
-
 /* width */
 ::-webkit-scrollbar {
   width: 6px;
diff --git a/apps/client/src/theme/OntimeAlert.ts b/apps/client/src/theme/OntimeAlert.ts
deleted file mode 100644
index d133b0327..000000000
--- a/apps/client/src/theme/OntimeAlert.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-export const ontimeAlertOnDark = {
-  container: {
-    fontSize: 'calc(1rem - 1px)',
-    backgroundColor: '#202020', // $gray-1200
-    color: '#e2e2e2', // $gray-200
-    borderRadius: '3px',
-  },
-  icon: {
-    alignSelf: 'start',
-    color: '#578AF4', // $blue-500
-  },
-};
-
-export const ontimeDialog = {
-  container: {
-    backgroundColor: '#1a1a1a', // $gray-1300
-    color: '#e2e2e2', // $gray-200
-    borderRadius: '3px',
-  },
-};
diff --git a/apps/client/src/theme/ontimeButton.ts b/apps/client/src/theme/ontimeButton.ts
deleted file mode 100644
index 826e752de..000000000
--- a/apps/client/src/theme/ontimeButton.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-export const ontimeButtonFilled = {
-  background: '#2B5ABC', // $blue-700
-  color: '#fff', // pure-white
-  border: '1px solid #2B5ABC', // $blue-700
-  _hover: {
-    backgroundColor: '#0A43B9', // $blue-800
-    border: '1px solid #0A43B9', // $blue-800
-    _disabled: {
-      background: '#2B5ABC', // $blue-700
-    },
-  },
-  _active: {
-    backgroundColor: '#0036A6', // blue-900
-    borderColor: '#002A90', // blue-1000
-  },
-};
-
-export const ontimeButtonOutlined = {
-  backgroundColor: '#2d2d2d', // $gray-1100
-  color: '#e2e2e2', // $blue-400
-  border: '1px solid rgba(255, 255, 255, 0.10)', // white-10
-  _hover: {
-    backgroundColor: '#404040', // $gray-1000
-    _disabled: {
-      backgroundColor: '#2d2d2d', // $gray-1100
-    },
-  },
-  _active: {
-    backgroundColor: '#2d2d2d', // $gray-1100
-    borderColor: '#202020', // $gray-1250
-  },
-};
-
-export const ontimeButtonSubtle = {
-  backgroundColor: '#303030', // $gray-1050
-  color: '#779BE7', // $blue-400
-  border: '1px solid transparent',
-  _hover: {
-    background: '#404040', // $gray-1000
-    _disabled: {
-      backgroundColor: '#303030', // $gray-1050
-    },
-  },
-  _active: {
-    backgroundColor: '#2d2d2d', // $gray-1100
-    borderColor: '#202020', // $gray-1250
-  },
-};
-
-// TODO: revise colours
-export const ontimeButtonGhostedWhite = {
-  ...ontimeButtonSubtle,
-  backgroundColor: 'transparent',
-  color: 'white',
-  _hover: {
-    background: '#404040', // $gray-1000
-  },
-  _active: {
-    background: '#2d2d2d', // $gray-1100
-  },
-};
-
-export const ontimeButtonGhosted = {
-  ...ontimeButtonSubtle,
-  backgroundColor: 'transparent',
-  _hover: {
-    background: '#404040', // $gray-1000
-    _disabled: {
-      backgroundColor: 'transparent',
-    },
-  },
-};
-
-export const ontimeButtonSubtleWhite = {
-  ...ontimeButtonSubtle,
-  color: '#f6f6f6', // $gray-50
-  fontWeight: 600,
-};
diff --git a/apps/client/src/theme/ontimeCheckbox.ts b/apps/client/src/theme/ontimeCheckbox.ts
deleted file mode 100644
index cb4f7704f..000000000
--- a/apps/client/src/theme/ontimeCheckbox.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-export const ontimeCheckboxOnDark = {
-  control: {
-    border: '1px',
-    borderColor: '#2d2d2d', // $gray-1100
-    backgroundColor: '#2d2d2d', // $gray-1100
-    _disabled: {
-      color: 'white',
-      borderColor: '#2d2d2d', // $gray-1100
-      backgroundColor: '#2d2d2d', // $gray-1100
-      opacity: 0.6,
-    },
-    _checked: {
-      borderColor: '#578AF4', // $blue-500
-      backgroundColor: '#578AF4', // $blue-500
-      _disabled: {
-        color: 'white',
-        borderColor: '#578AF4', // $blue-500
-        backgroundColor: '#578AF4', // $blue-500
-        opacity: 0.6,
-      },
-    },
-    _focus: {
-      boxShadow: 'none',
-    },
-  },
-  label: {
-    fontWeight: '200',
-    color: '#9d9d9d', // $gray-500
-    _checked: {
-      color: '#cfcfcf', // $gray-300
-    },
-  },
-};
diff --git a/apps/client/src/theme/ontimeDrawer.ts b/apps/client/src/theme/ontimeDrawer.ts
deleted file mode 100644
index 0ca18ac62..000000000
--- a/apps/client/src/theme/ontimeDrawer.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-export const ontimeDrawer = {
-  header: {
-    color: '#fefefe', // $gray-50
-    backgroundColor: '#202020', // $gray-1250
-  },
-  body: {
-    display: 'flex',
-    flexDirection: 'column',
-    color: '#fefefe', // $gray-50
-    backgroundColor: '#202020', // $gray-1250
-  },
-  footer: {
-    backgroundColor: '#202020', // $gray-1250
-  },
-  closeButton: {
-    color: '#fefefe', // $gray-50
-    _hover: {
-      color: '#303030', // $gray-1050
-      backgroundColor: '#fefefe', // $gray-50
-    },
-  },
-};
diff --git a/apps/client/src/theme/ontimeEditable.ts b/apps/client/src/theme/ontimeEditable.ts
deleted file mode 100644
index 6e5bb63ca..000000000
--- a/apps/client/src/theme/ontimeEditable.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export const ontimeEditable = {
-  input: {
-    borderRadius: '3px',
-    width: '100%',
-    _focus: {
-      border: '1px solid #578AF4', // $blue-500
-      boxShadow: 'none',
-    },
-  },
-  preview: {
-    width: '100%',
-    border: '1px solid transparent', // $blue-500
-  },
-};
diff --git a/apps/client/src/theme/ontimeMenu.ts b/apps/client/src/theme/ontimeMenu.ts
deleted file mode 100644
index 82c499bfa..000000000
--- a/apps/client/src/theme/ontimeMenu.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-export const ontimeMenuOnDark = {
-  list: {
-    fontSize: 'calc(1rem - 2px)',
-    borderRadius: '3px',
-    borderColor: 'rgba(255, 255, 255, 0.1)',
-    color: '#ececec', // $gray-1030
-    backgroundColor: '#202020', // $gray-1250
-    zIndex: 100,
-  },
-  item: {
-    backgroundColor: 'transparent',
-    paddingBlock: '0.5rem',
-    _hover: {
-      backgroundColor: 'rgba(0, 0, 0, 0.2)',
-      _disabled: {
-        backgroundColor: 'transparent',
-      },
-    },
-    _disabled: {
-      color: '#b1b1b1', // $gray-400
-    },
-  },
-  divider: {
-    borderColor: 'rgba(255, 255, 255, 0.07)',
-    opacity: 1,
-  },
-};
diff --git a/apps/client/src/theme/ontimeModal.ts b/apps/client/src/theme/ontimeModal.ts
deleted file mode 100644
index 0f0a4740b..000000000
--- a/apps/client/src/theme/ontimeModal.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-export const ontimeModal = {
-  header: {
-    fontWeight: 400,
-    letterSpacing: '0.3px',
-    padding: '1rem 1.5rem',
-    fontSize: '1.25rem',
-    color: '#fefefe', // $gray-50
-  },
-  dialog: {
-    borderRadius: '3px',
-    padding: 0,
-    minHeight: 'min(200px, 10vh)',
-    backgroundColor: '#202020', // $gray-1250
-    color: '#fefefe', // $gray-50
-    border: '1px solid #2d2d2d', // $gray-1100
-  },
-  body: {
-    padding: '1rem',
-    fontSize: 'calc(1rem - 2px)',
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '1rem',
-  },
-  closeButton: {
-    color: '#fefefe', // $gray-50
-  },
-  footer: {
-    padding: '1rem',
-    display: 'flex',
-    alignItems: 'left',
-    gap: '0.5rem',
-  },
-};
diff --git a/apps/client/src/theme/ontimeRadio.ts b/apps/client/src/theme/ontimeRadio.ts
deleted file mode 100644
index 5b83ffddd..000000000
--- a/apps/client/src/theme/ontimeRadio.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-export const ontimeRadio = {
-  control: {
-    borderColor: '#262626', // $gray-1200
-    backgroundColor: '#262626', // $gray-1200
-    _checked: {
-      borderColor: '#262626', // $gray-1200
-      color: '#f6f6f6', // $ui-white
-      backgroundColor: '#f6f6f6', // $ui-white
-    },
-  },
-  label: {
-    color: '#9d9d9d', // $gray-500, same as placeholder value
-    _checked: {
-      color: '#f6f6f6', // $gray-200
-    },
-    _hover: {
-      color: '#e2e2e2', // $gray-200
-    },
-  },
-};
-
-export const ontimeBlockRadio = {
-  control: {
-    borderColor: '#262626', // $gray-1200
-    backgroundColor: '#262626', // $gray-1200
-    _checked: {
-      borderColor: '#262626', // $gray-1200
-      color: '#578AF4', // $blue-500
-      backgroundColor: '#578AF4', // $blue-500
-    },
-    _hover: {
-      color: '#578AF4', // $blue-500
-      backgroundColor: '#578AF4', // $blue-500
-      outline: 'none',
-    },
-  },
-  label: {
-    fontSize: '0.7em',
-    letterSpacing: '0.3px',
-    color: '#9d9d9d', // $gray-500
-    _checked: {
-      color: '#cfcfcf', // $gray-300
-    },
-    _hover: {
-      color: '#e2e2e2', // $gray-200
-    },
-  },
-};
diff --git a/apps/client/src/theme/ontimeSelect.ts b/apps/client/src/theme/ontimeSelect.ts
deleted file mode 100644
index 3d89fef40..000000000
--- a/apps/client/src/theme/ontimeSelect.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export const ontimeSelect = {
-  field: {
-    color: '#e2e2e2', // $gray-200
-    borderRadius: '3px',
-    fontWeight: '400',
-    background: '#262626', // $gray-1100
-    border: '1px solid transparent',
-    _hover: {
-      background: '#404040', // $gray-1000
-    },
-    _focus: {
-      background: '#404040', // $gray-1000
-      color: '#f6f6f6', // $gray-50
-      border: '1px solid #578AF4', // $blue-500
-    },
-    _disabled: {
-      _hover: {
-        background: '#262626', // $gray-1100
-      },
-    },
-  },
-  icon: {
-    color: '#e2e2e2', // $gray-200
-  },
-};
diff --git a/apps/client/src/theme/ontimeSwitch.ts b/apps/client/src/theme/ontimeSwitch.ts
deleted file mode 100644
index 2727fd3e2..000000000
--- a/apps/client/src/theme/ontimeSwitch.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export const ontimeSwitch = {
-  track: {
-    background: '#2d2d2d', // $gray-1100
-    border: '1px solid transparent',
-    _checked: {
-      background: '#2B5ABC', // $blue-700
-    },
-    _focus: {
-      border: '1px solid #578AF4', // $blue-500
-    },
-  },
-};
diff --git a/apps/client/src/theme/ontimeTab.ts b/apps/client/src/theme/ontimeTab.ts
deleted file mode 100644
index 34bf5f222..000000000
--- a/apps/client/src/theme/ontimeTab.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-export const ontimeTab = {
-  tab: {
-    fontWeight: 600,
-    borderBottom: '2px solid transparent',
-    color: '#9d9d9d', // $gray-500
-    marginBottom: '-2px',
-    _selected: {
-      color: '#101010', // $ui-black
-      border: 'none',
-      borderBottom: '2px solid #779BE7', // $blue-400
-    },
-  },
-  tablist: {
-    borderBottom: '2px solid #ececec', // $gray-100
-  },
-  tabpanel: {
-    padding: 0,
-  },
-};
diff --git a/apps/client/src/theme/ontimeTextInputs.ts b/apps/client/src/theme/ontimeTextInputs.ts
deleted file mode 100644
index 86b6d5534..000000000
--- a/apps/client/src/theme/ontimeTextInputs.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-const commonStyles = {
-  fontWeight: '400',
-  backgroundColor: '#262626', // $gray-1200
-  color: '#e2e2e2', // $gray-200
-  border: '1px solid transparent',
-  borderRadius: '3px',
-  _hover: {
-    backgroundColor: '#2d2d2d', // $gray-1100
-  },
-  _focus: {
-    backgroundColor: '#2d2d2d', // $gray-1000
-    color: '#f6f6f6', // $gray-50
-    border: '1px solid #578AF4', // $blue-500
-  },
-  _placeholder: { color: '#9d9d9d' }, // $gray-500
-  _disabled: {
-    _hover: {
-      backgroundColor: '#262626', // $gray-1200
-    },
-  },
-};
-
-export const ontimeInputFilled = {
-  field: {
-    ...commonStyles,
-  },
-};
-
-export const ontimeInputGhosted = {
-  field: {
-    ...commonStyles,
-    backgroundColor: 'transparent',
-    color: '#f6f6f6', // $gray-50
-    _hover: {
-      backgroundColor: 'transparent',
-      border: '1px solid #2B5ABC', // $blue-500
-    },
-  },
-};
-
-export const ontimeInputTransparent = {
-  field: {
-    ...commonStyles,
-    backgroundColor: 'transparent',
-    _hover: {
-      backgroundColor: '#2d2d2d', // $gray-1100
-    },
-  },
-};
-
-export const ontimeTextAreaFilled = {
-  ...commonStyles,
-};
-
-export const ontimeTextAreaTransparent = {
-  ...commonStyles,
-  backgroundColor: 'transparent',
-  _hover: {
-    backgroundColor: '#2d2d2d', // $gray-1100
-  },
-};
diff --git a/apps/client/src/theme/ontimeTooltip.ts b/apps/client/src/theme/ontimeTooltip.ts
deleted file mode 100644
index 0afe553bf..000000000
--- a/apps/client/src/theme/ontimeTooltip.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export const ontimeTooltip = {
-  _light: {
-    backgroundColor: '#2d2d2d', // $gray-1100
-    color: '#ececec', // $gray-100
-    padding: '2px 8px',
-  },
-  _dark: {
-    backgroundColor: '#2d2d2d', // $gray-1100
-    color: '#ececec', // $gray-100
-    padding: '2px 8px',
-  },
-};
diff --git a/apps/client/src/theme/theme.ts b/apps/client/src/theme/theme.ts
deleted file mode 100644
index 3003fb001..000000000
--- a/apps/client/src/theme/theme.ts
+++ /dev/null
@@ -1,146 +0,0 @@
-import { extendTheme } from '@chakra-ui/react';
-
-import { ontimeAlertOnDark, ontimeDialog } from './OntimeAlert';
-import {
-  ontimeButtonFilled,
-  ontimeButtonGhosted,
-  ontimeButtonGhostedWhite,
-  ontimeButtonOutlined,
-  ontimeButtonSubtle,
-  ontimeButtonSubtleWhite,
-} from './ontimeButton';
-import { ontimeCheckboxOnDark } from './ontimeCheckbox';
-import { ontimeDrawer } from './ontimeDrawer';
-import { ontimeEditable } from './ontimeEditable';
-import { ontimeMenuOnDark } from './ontimeMenu';
-import { ontimeModal } from './ontimeModal';
-import { ontimeBlockRadio, ontimeRadio } from './ontimeRadio';
-import { ontimeSelect } from './ontimeSelect';
-import { ontimeSwitch } from './ontimeSwitch';
-import { ontimeTab } from './ontimeTab';
-import {
-  ontimeInputFilled,
-  ontimeInputGhosted,
-  ontimeInputTransparent,
-  ontimeTextAreaFilled,
-  ontimeTextAreaTransparent,
-} from './ontimeTextInputs';
-import { ontimeTooltip } from './ontimeTooltip';
-
-const theme = extendTheme({
-  initialColorMode: 'dark',
-  useSystemColorMode: false,
-  components: {
-    Alert: {
-      variants: {
-        'ontime-on-dark-info': { ...ontimeAlertOnDark },
-      },
-    },
-    AlertDialog: {
-      variants: {
-        ontime: { ...ontimeDialog },
-      },
-    },
-    Button: {
-      baseStyle: {
-        letterSpacing: '0.3px',
-        fontWeight: '400',
-        borderRadius: '3px',
-      },
-      variants: {
-        'ontime-filled': { ...ontimeButtonFilled },
-        'ontime-outlined': { ...ontimeButtonOutlined },
-        'ontime-subtle': { ...ontimeButtonSubtle },
-        'ontime-ghosted': { ...ontimeButtonGhosted },
-        'ontime-ghosted-white': { ...ontimeButtonGhostedWhite },
-        'ontime-subtle-white': { ...ontimeButtonSubtleWhite },
-      },
-    },
-    Checkbox: {
-      variants: {
-        'ontime-ondark': { ...ontimeCheckboxOnDark },
-      },
-    },
-    Drawer: {
-      variants: {
-        ontime: { ...ontimeDrawer },
-      },
-    },
-    Editable: {
-      variants: {
-        ontime: { ...ontimeEditable },
-      },
-    },
-    Input: {
-      baseStyle: {
-        borderRadius: '3px',
-        border: '1px',
-      },
-      variants: {
-        'ontime-filled': { ...ontimeInputFilled },
-        'ontime-ghosted': { ...ontimeInputGhosted },
-        'ontime-transparent': { ...ontimeInputTransparent },
-      },
-    },
-    Kbd: {
-      baseStyle: {
-        borderRadius: '2px',
-        border: 'none',
-        background: '#262626', // $gray-1200
-        padding: '0.125rem 0.5rem',
-        color: '#f6f6f6', // $ui-white
-        fontWeight: 400,
-        boxShadow: '0px 0px 3px 0px rgba(0,0,0,0.4)',
-        fontSize: 'calc(1rem - 2px)',
-      },
-    },
-    Menu: {
-      variants: {
-        'ontime-on-dark': { ...ontimeMenuOnDark },
-      },
-    },
-    Modal: {
-      baseStyle: {
-        background: 'rgba(0, 0, 0, 0.5)',
-      },
-      variants: {
-        ontime: { ...ontimeModal },
-      },
-    },
-    Radio: {
-      variants: {
-        ontime: { ...ontimeRadio },
-        'ontime-block': { ...ontimeBlockRadio },
-      },
-    },
-    Tabs: {
-      variants: {
-        ontime: { ...ontimeTab },
-      },
-    },
-    Textarea: {
-      baseStyle: {
-        borderRadius: '3px',
-      },
-      variants: {
-        'ontime-filled': { ...ontimeTextAreaFilled },
-        'ontime-transparent': { ...ontimeTextAreaTransparent },
-      },
-    },
-    Tooltip: {
-      baseStyle: { ...ontimeTooltip },
-    },
-    Switch: {
-      variants: {
-        ontime: { ...ontimeSwitch },
-      },
-    },
-    Select: {
-      variants: {
-        ontime: { ...ontimeSelect },
-      },
-    },
-  },
-});
-
-export default theme;
diff --git a/apps/client/src/views/backstage/backstage.options.ts b/apps/client/src/views/backstage/backstage.options.ts
index a16ec7e1f..735ad4aae 100644
--- a/apps/client/src/views/backstage/backstage.options.ts
+++ b/apps/client/src/views/backstage/backstage.options.ts
@@ -9,7 +9,7 @@ import { makeOptionsFromCustomFields } from '../../common/components/view-params
 import { scheduleOptions } from '../common/schedule/schedule.options';
 
 export const getBackstageOptions = (timeFormat: string, customFields: CustomFields): ViewOption[] => {
-  const secondaryOptions = makeOptionsFromCustomFields(customFields, { note: 'Note' });
+  const secondaryOptions = makeOptionsFromCustomFields(customFields, [{ value: 'note', label: 'Note' }]);
 
   return [
     { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] },
diff --git a/apps/client/src/views/countdown/countdown.options.ts b/apps/client/src/views/countdown/countdown.options.ts
index a390cf8ea..4cba4ac41 100644
--- a/apps/client/src/views/countdown/countdown.options.ts
+++ b/apps/client/src/views/countdown/countdown.options.ts
@@ -13,7 +13,7 @@ export const getCountdownOptions = (
   customFields: CustomFields,
   persistedSubscriptions: EntryId[],
 ): ViewOption[] => {
-  const secondaryOptions = makeOptionsFromCustomFields(customFields, { note: 'Note' });
+  const secondaryOptions = makeOptionsFromCustomFields(customFields, [{ value: 'note', label: 'Note' }]);
 
   return [
     { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] },
diff --git a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/MultiLineCell.tsx b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/MultiLineCell.tsx
index 7bf55718c..8727a8805 100644
--- a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/MultiLineCell.tsx
+++ b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/MultiLineCell.tsx
@@ -1,6 +1,6 @@
 import { memo, useCallback, useRef } from 'react';
 
-import { AutoTextArea } from '../../../../common/components/input/auto-text-area/AutoTextArea';
+import { AutoTextarea } from '../../../../common/components/input/auto-textarea/AutoTextarea';
 import useReactiveTextInput from '../../../../common/components/input/text-input/useReactiveTextInput';
 
 interface MultiLineCellProps {
@@ -11,7 +11,7 @@ interface MultiLineCellProps {
 export default memo(MultiLineCell);
 
 function MultiLineCell({ initialValue, handleUpdate }: MultiLineCellProps) {
-  const ref = useRef<HTMLInputElement | null>(null);
+  const ref = useRef<HTMLTextAreaElement | null>(null);
   const submitCallback = useCallback((newValue: string) => handleUpdate(newValue), [handleUpdate]);
 
   const { value, onChange, onBlur, onKeyDown } = useReactiveTextInput(initialValue, submitCallback, ref, {
@@ -20,18 +20,11 @@ function MultiLineCell({ initialValue, handleUpdate }: MultiLineCellProps) {
   });
 
   return (
-    <AutoTextArea
+    <AutoTextarea
       inputref={ref}
+      variant='ghosted'
+      fluid
       rows={1}
-      size='sm'
-      style={{
-        minHeight: '2rem',
-        padding: '0',
-        paddingTop: '0.25rem',
-        fontSize: '1rem',
-      }}
-      transition='none'
-      variant='ontime-transparent'
       value={value}
       onChange={onChange}
       onBlur={onBlur}
diff --git a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-menu/CuesheetTableMenu.tsx b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-menu/CuesheetTableMenu.tsx
index 957abcfb4..d66a84877 100644
--- a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-menu/CuesheetTableMenu.tsx
+++ b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-menu/CuesheetTableMenu.tsx
@@ -24,46 +24,46 @@ function CuesheetTableMenu() {
       isOpen
       onClose={closeMenu}
       items={[
-        { type: 'item', label: 'Edit...', onClick: () => showModal(entryId), icon: <IoOptions /> },
+        { type: 'item', label: 'Edit...', onClick: () => showModal(entryId), icon: IoOptions },
         { type: 'divider' },
         {
           type: 'item',
           label: 'Add event above',
           onClick: () => addEntry({ type: SupportedEntry.Event, parent: parentId }, { before: entryId }),
-          icon: <IoAdd />,
+          icon: IoAdd,
         },
         {
           type: 'item',
           label: 'Add event below',
           onClick: () => addEntry({ type: SupportedEntry.Event, parent: parentId }, { after: entryId }),
-          icon: <IoAdd />,
+          icon: IoAdd,
         },
         {
           type: 'item',
           label: 'Clone event',
           onClick: () => clone(entryId),
-          icon: <IoDuplicateOutline />,
+          icon: IoDuplicateOutline,
         },
         { type: 'divider' },
         {
           type: 'item',
           label: 'Move up',
           onClick: () => move(entryId, 'up'),
-          icon: <IoArrowUp />,
+          icon: IoArrowUp,
           disabled: entryIndex < 1,
         },
         {
           type: 'item',
           label: 'Move down',
           onClick: () => move(entryId, 'down'),
-          icon: <IoArrowDown />,
+          icon: IoArrowDown,
         },
         { type: 'divider' },
         {
           type: 'item',
           label: 'Delete',
           onClick: () => deleteEntry([entryId]),
-          icon: <IoTrash />,
+          icon: IoTrash,
         },
       ]}
       position={position}
diff --git a/apps/client/src/views/timer/timer.options.ts b/apps/client/src/views/timer/timer.options.ts
index ae16ac142..c5a1eaabe 100644
--- a/apps/client/src/views/timer/timer.options.ts
+++ b/apps/client/src/views/timer/timer.options.ts
@@ -3,6 +3,7 @@ import { useSearchParams } from 'react-router-dom';
 import { CustomFields, OntimeEvent, TimerType } from 'ontime-types';
 import { validateTimerType } from 'ontime-utils';
 
+import type { SelectOption } from '../../common/components/select/Select';
 import {
   getTimeOption,
   hideTimerSeconds,
@@ -14,16 +15,22 @@ import { makeOptionsFromCustomFields } from '../../common/components/view-params
 import { isStringBoolean } from '../../features/viewers/common/viewUtils';
 
 // manually match the properties of TimerType excluding the None
-const timerDisplayOptions = {
-  'no-overrides': 'No Overrides',
-  'count-up': 'Count up',
-  'count-down': 'Count down',
-  clock: 'Clock',
-};
+const timerDisplayOptions: SelectOption[] = [
+  { value: 'no-overrides', label: 'No Overrides' },
+  { value: TimerType.CountUp, label: 'Count Up' },
+  { value: TimerType.CountDown, label: 'Count Down' },
+  { value: TimerType.Clock, label: 'Clock' },
+];
 
 export const getTimerOptions = (timeFormat: string, customFields: CustomFields): ViewOption[] => {
-  const mainOptions = makeOptionsFromCustomFields(customFields, { title: 'Title', note: 'Note' });
-  const secondaryOptions = makeOptionsFromCustomFields(customFields, { title: 'Title', note: 'Note' });
+  const mainOptions = makeOptionsFromCustomFields(customFields, [
+    { value: 'title', label: 'Title' },
+    { value: 'note', label: 'Note' },
+  ]);
+  const secondaryOptions = makeOptionsFromCustomFields(customFields, [
+    { value: 'title', label: 'Title' },
+    { value: 'note', label: 'Note' },
+  ]);
 
   return [
     { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] },
diff --git a/e2e/tests/features/301-spreadsheet-import.spec.ts b/e2e/tests/features/301-spreadsheet-import.spec.ts
index 742b00913..5a99b79c0 100644
--- a/e2e/tests/features/301-spreadsheet-import.spec.ts
+++ b/e2e/tests/features/301-spreadsheet-import.spec.ts
@@ -18,8 +18,8 @@ test('sheet file upload', async ({ page }) => {
   const fileChooser = await fileChooserPromise;
   await fileChooser.setFiles(fileToUpload);
 
-  await page.locator('[id="event\\ schedule"]').selectOption('Sheet2');
-  await page.locator('[id="event\\ schedule"]').selectOption('test');
+  await page.getByRole('row', { name: 'Worksheet' }).getByRole('combobox').click();
+  await page.getByRole('option', { name: 'test' }).click();
 
   await page.getByRole('button', { name: 'Import preview' }).click();
   await page.getByRole('button', { name: 'Apply' }).click();
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ef1c23e8d..5a59efb13 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -89,9 +89,6 @@ importers:
       '@base-ui-components/react':
         specifier: 1.0.0-beta.1
         version: 1.0.0-beta.1(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@chakra-ui/react':
-        specifier: ^2.7.0
-        version: 2.10.9(@emotion/react@11.14.0(@types/react@18.3.23)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.23)(react@18.3.1))(@types/react@18.3.23)(react@18.3.1))(@types/react@18.3.23)(framer-motion@10.18.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@dnd-kit/core':
         specifier: ^6.3.1
         version: 6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -104,12 +101,6 @@ importers:
       '@emotion/is-prop-valid':
         specifier: ^1.3.1
         version: 1.3.1
-      '@emotion/react':
-        specifier: ^11.10.6
-        version: 11.14.0(@types/react@18.3.23)(react@18.3.1)
-      '@emotion/styled':
-        specifier: ^11.10.6
-        version: 11.14.1(@emotion/react@11.14.0(@types/react@18.3.23)(react@18.3.1))(@types/react@18.3.23)(react@18.3.1)
       '@fontsource/open-sans':
         specifier: ^5.0.28
         version: 5.2.6
@@ -140,9 +131,6 @@ importers:
       csv-stringify:
         specifier: ^6.4.5
         version: 6.5.2
-      framer-motion:
-        specifier: ^10.10.0
-        version: 10.18.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       prismjs:
         specifier: ^1.29.0
         version: 1.30.0
@@ -228,9 +216,6 @@ importers:
       eslint-plugin-simple-import-sort:
         specifier: ^8.0.0
         version: 8.0.0(eslint@8.56.0)
-      happy-dom:
-        specifier: ^16.7.2
-        version: 16.8.1
       ontime-types:
         specifier: workspace:*
         version: link:../../packages/types
@@ -659,10 +644,6 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/runtime@7.24.5':
-    resolution: {integrity: sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/runtime@7.27.6':
     resolution: {integrity: sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==}
     engines: {node: '>=6.9.0'}
@@ -710,41 +691,6 @@ packages:
       '@types/react':
         optional: true
 
-  '@chakra-ui/anatomy@2.3.6':
-    resolution: {integrity: sha512-TjmjyQouIZzha/l8JxdBZN1pKZTj7sLpJ0YkFnQFyqHcbfWggW9jKWzY1E0VBnhtFz/xF3KC6UAVuZVSJx+y0g==}
-
-  '@chakra-ui/hooks@2.4.5':
-    resolution: {integrity: sha512-601fWfHE2i7UjaxK/9lDLlOni6vk/I+04YDbM0BrelJy+eqxdlOmoN8Z6MZ3PzFh7ofERUASor+vL+/HaCaZ7w==}
-    peerDependencies:
-      react: '>=18'
-
-  '@chakra-ui/react@2.10.9':
-    resolution: {integrity: sha512-lhdcgoocOiURwBNR3L8OioCNIaGCZqRfuKioLyaQLjOanl4jr0PQclsGb+w0cmito252vEWpsz2xRqF7y+Flrw==}
-    peerDependencies:
-      '@emotion/react': '>=11'
-      '@emotion/styled': '>=11'
-      framer-motion: '>=4.0.0'
-      react: '>=18'
-      react-dom: '>=18'
-
-  '@chakra-ui/styled-system@2.12.4':
-    resolution: {integrity: sha512-oa07UG7Lic5hHSQtGRiMEnYjuhIa8lszyuVhZjZqR2Ap3VMF688y1MVPJ1pK+8OwY5uhXBgVd5c0+rI8aBZlwg==}
-
-  '@chakra-ui/theme-tools@2.2.9':
-    resolution: {integrity: sha512-PcbYL19lrVvEc7Oydy//jsy/MO/rZz1DvLyO6AoI+bI/+Kwz9WfOKsspbulEhRg5COayE0R/IZPsskXZ7Mp4bA==}
-    peerDependencies:
-      '@chakra-ui/styled-system': '>=2.0.0'
-
-  '@chakra-ui/theme@3.4.9':
-    resolution: {integrity: sha512-GAom2SjSdRWTcX76/2yJOFJsOWHQeBgaynCUNBsHq62OafzvELrsSHDUw0bBqBb1c2ww0CclIvGilPup8kXBFA==}
-    peerDependencies:
-      '@chakra-ui/styled-system': '>=2.8.0'
-
-  '@chakra-ui/utils@2.2.5':
-    resolution: {integrity: sha512-KTBCK+M5KtXH6p54XS39ImQUMVtAx65BoZDoEms3LuObyTo1+civ1sMm4h3nRT320U6H5H7D35WnABVQjqU/4g==}
-    peerDependencies:
-      react: '>=16.8.0'
-
   '@develar/schema-utils@2.6.5':
     resolution: {integrity: sha512-0cp4PsWQ/9avqTVMCtZ+GirikIA36ikvjtHweU4/j8yLtgObI0+JUPhYFScgwlteveGB1rt3Cm8UhN04XayDig==}
     engines: {node: '>= 8.9.0'}
@@ -826,66 +772,12 @@ packages:
     resolution: {integrity: sha512-fKpv9kg4SPmt+hY7SVBnIYULE9QJl8L3sCfcBsnqbJwwBwAeTLokJ9TRt9y7bK0JAzIW2y78TVVjvnQEms/yyA==}
     engines: {node: '>=16.4'}
 
-  '@emotion/babel-plugin@11.13.5':
-    resolution: {integrity: sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==}
-
-  '@emotion/cache@11.14.0':
-    resolution: {integrity: sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==}
-
-  '@emotion/hash@0.9.2':
-    resolution: {integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==}
-
-  '@emotion/is-prop-valid@0.8.8':
-    resolution: {integrity: sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==}
-
   '@emotion/is-prop-valid@1.3.1':
     resolution: {integrity: sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==}
 
-  '@emotion/memoize@0.7.4':
-    resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==}
-
   '@emotion/memoize@0.9.0':
     resolution: {integrity: sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==}
 
-  '@emotion/react@11.14.0':
-    resolution: {integrity: sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: '>=16.8.0'
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@emotion/serialize@1.3.3':
-    resolution: {integrity: sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==}
-
-  '@emotion/sheet@1.4.0':
-    resolution: {integrity: sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==}
-
-  '@emotion/styled@11.14.1':
-    resolution: {integrity: sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==}
-    peerDependencies:
-      '@emotion/react': ^11.0.0-rc.0
-      '@types/react': '*'
-      react: '>=16.8.0'
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@emotion/unitless@0.10.0':
-    resolution: {integrity: sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==}
-
-  '@emotion/use-insertion-effect-with-fallbacks@1.2.0':
-    resolution: {integrity: sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==}
-    peerDependencies:
-      react: '>=16.8.0'
-
-  '@emotion/utils@1.4.2':
-    resolution: {integrity: sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==}
-
-  '@emotion/weak-memoize@0.4.0':
-    resolution: {integrity: sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==}
-
   '@esbuild/aix-ppc64@0.24.2':
     resolution: {integrity: sha512-thpVCb/rhxE/BnMLQ7GReQLLN8q9qbHmI55F4489/ByVg2aQaQ6kbcLb6FHkocZzQhxc4gx0sCk0tJkKBFzDhA==}
     engines: {node: '>=18'}
@@ -1433,9 +1325,6 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
-  '@popperjs/core@2.11.8':
-    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
-
   '@remix-run/router@1.23.0':
     resolution: {integrity: sha512-O3rHJzAQKamUz1fvE0Qaw0xSFqsA/yafi2iqeE0pvdFtCO1viYx8QL6f3Ln/aCCTLxs68SLf0KPM9eSeM8yBnA==}
     engines: {node: '>=14.0.0'}
@@ -1838,12 +1727,6 @@ packages:
   '@types/keyv@3.1.4':
     resolution: {integrity: sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==}
 
-  '@types/lodash.mergewith@4.6.9':
-    resolution: {integrity: sha512-fgkoCAOF47K7sxrQ7Mlud2TH023itugZs2bUg8h/KzT+BnZNrR2jAOmaokbLunHNnobXVWOezAeNn/lZqwxkcw==}
-
-  '@types/lodash@4.17.19':
-    resolution: {integrity: sha512-NYqRyg/hIQrYPT9lbOeYc3kIRabJDn/k4qQHIXUpx88CBDww2fD15Sg5kbXlW86zm2XEW4g0QxkTI3/Kfkc7xQ==}
-
   '@types/mime@1.3.5':
     resolution: {integrity: sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==}
 
@@ -1859,9 +1742,6 @@ packages:
   '@types/node@22.15.26':
     resolution: {integrity: sha512-lgISkNrqdQ5DAzjBhnDNGKDuXDNo7/1V4FhNzsKREhWLZTOELQAptuAnJMzHtUl1qyEBBy9lNBKQ9WjyiSloTw==}
 
-  '@types/parse-json@4.0.2':
-    resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
-
   '@types/plist@3.0.5':
     resolution: {integrity: sha512-E6OCaRmAe4WDmWNsL/9RMqdkkzDCY1etutkflWk4c+AcjDU07Pcz1fQwTX0TQz+Pxqn9i4L1TU3UFpjnrcDgxA==}
 
@@ -2043,15 +1923,6 @@ packages:
     resolution: {integrity: sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==}
     engines: {node: '>=10.0.0'}
 
-  '@zag-js/dom-query@0.31.1':
-    resolution: {integrity: sha512-oiuohEXAXhBxpzzNm9k2VHGEOLC1SXlXSbRPcfBZ9so5NRQUA++zCE7cyQJqGLTZR0t3itFLlZqDbYEXRrefwg==}
-
-  '@zag-js/element-size@0.31.1':
-    resolution: {integrity: sha512-4T3yvn5NqqAjhlP326Fv+w9RqMIBbNN9H72g5q2ohwzhSgSfZzrKtjL4rs9axY/cw9UfMfXjRjEE98e5CMq7WQ==}
-
-  '@zag-js/focus-visible@0.31.1':
-    resolution: {integrity: sha512-dbLksz7FEwyFoANbpIlNnd3bVm0clQSUsnP8yUVQucStZPsuWjCrhL2jlAbGNrTrahX96ntUMXHb/sM68TibFg==}
-
   abab@2.0.6:
     resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==}
     deprecated: Use your platform's native atob() and btoa() methods instead
@@ -2180,10 +2051,6 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
-  aria-hidden@1.2.6:
-    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
-    engines: {node: '>=10'}
-
   array-buffer-byte-length@1.0.2:
     resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
     engines: {node: '>= 0.4'}
@@ -2252,10 +2119,6 @@ packages:
   axios@1.10.0:
     resolution: {integrity: sha512-/1xYAC4MP/HEG+3duIhFr4ZQXR4sQXOIe+o6sdqzeykGLx6Upp/1p8MHqhINOvGeP7xyNHe7tsiJByc4SSVUxw==}
 
-  babel-plugin-macros@3.1.0:
-    resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
-    engines: {node: '>=10', npm: '>=6'}
-
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
@@ -2479,9 +2342,6 @@ packages:
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
-  color2k@2.0.3:
-    resolution: {integrity: sha512-zW190nQTIoXcGCaU08DvVNFTmQhUpnJfVuAKfWqUQkflXKpaDdpaYoM0iluLS9lgJNHyBF58KKA2FBEwkD7wog==}
-
   combined-stream@1.0.8:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
@@ -2519,9 +2379,6 @@ packages:
     resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
     engines: {node: '>= 0.6'}
 
-  convert-source-map@1.9.0:
-    resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
-
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
@@ -2544,9 +2401,6 @@ packages:
     resolution: {integrity: sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==}
     engines: {node: '>=18'}
 
-  copy-to-clipboard@3.3.3:
-    resolution: {integrity: sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==}
-
   core-util-is@1.0.2:
     resolution: {integrity: sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==}
 
@@ -2557,10 +2411,6 @@ packages:
     resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
     engines: {node: '>= 0.10'}
 
-  cosmiconfig@7.1.0:
-    resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==}
-    engines: {node: '>=10'}
-
   cosmiconfig@8.3.6:
     resolution: {integrity: sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==}
     engines: {node: '>=14'}
@@ -2608,9 +2458,6 @@ packages:
   csstype@3.1.2:
     resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
 
-  csstype@3.1.3:
-    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
-
   csv-stringify@6.5.2:
     resolution: {integrity: sha512-RFPahj0sXcmUyjrObAK+DOWtMvMIFV328n4qZJhgX3x2RqkQgOTU2mCUmiFR0CzM6AzChlRSUErjiJeEt8BaQA==}
 
@@ -2698,9 +2545,6 @@ packages:
     resolution: {integrity: sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==}
     engines: {node: '>=8'}
 
-  detect-node-es@1.1.0:
-    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
-
   detect-node@2.1.0:
     resolution: {integrity: sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==}
 
@@ -3117,9 +2961,6 @@ packages:
     resolution: {integrity: sha512-/t88Ty3d5JWQbWYgaOGCCYfXRwV1+be02WqYYlL6h0lEiUAMPM8o8qKGO01YIkOHzka2up08wvgYD0mDiI+q3Q==}
     engines: {node: '>= 0.8'}
 
-  find-root@1.1.0:
-    resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
-
   find-up@5.0.0:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
@@ -3131,10 +2972,6 @@ packages:
   flatted@3.2.9:
     resolution: {integrity: sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==}
 
-  focus-lock@1.3.6:
-    resolution: {integrity: sha512-Ik/6OCk9RQQ0T5Xw+hKNLWrjSMtv51dD4GRmJjbD5a58TIEpI5a5iXagKVl3Z5UuyslMCA8Xwnu76jQob62Yhg==}
-    engines: {node: '>=10'}
-
   follow-redirects@1.15.6:
     resolution: {integrity: sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==}
     engines: {node: '>=4.0'}
@@ -3168,20 +3005,6 @@ packages:
     resolution: {integrity: sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==}
     engines: {node: '>=0.8'}
 
-  framer-motion@10.18.0:
-    resolution: {integrity: sha512-oGlDh1Q1XqYPksuTD/usb0I70hq95OUzmL9+6Zd+Hs4XV0oaISBa/UUMSjYiq6m8EUF32132mOJ8xVZS+I0S6w==}
-    peerDependencies:
-      react: ^18.0.0
-      react-dom: ^18.0.0
-    peerDependenciesMeta:
-      react:
-        optional: true
-      react-dom:
-        optional: true
-
-  framesync@6.1.2:
-    resolution: {integrity: sha512-jBTqhX6KaQVDyus8muwZbBeGGP0XgujBRbQ7gM7BRdS3CadCZIHiawyzYLnafYcvZIh5j8WE7cxZKFn7dXhu9g==}
-
   fresh@2.0.0:
     resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
     engines: {node: '>= 0.8'}
@@ -3252,10 +3075,6 @@ packages:
     resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
     engines: {node: '>= 0.4'}
 
-  get-nonce@1.0.1:
-    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
-    engines: {node: '>=6'}
-
   get-proto@1.0.1:
     resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
     engines: {node: '>= 0.4'}
@@ -3457,10 +3276,6 @@ packages:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
     engines: {node: '>=6'}
 
-  import-fresh@3.3.1:
-    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
-    engines: {node: '>=6'}
-
   imurmurhash@0.1.4:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
@@ -3780,9 +3595,6 @@ packages:
   lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
 
-  lodash.mergewith@4.6.2:
-    resolution: {integrity: sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==}
-
   lodash.union@4.6.0:
     resolution: {integrity: sha512-c4pB2CdGrGdjMKYLA+XiRDO7Y0PRQbm/Gzg8qMj+QH+pFVAoTp5sBpO0odL3FjoPCGjK96p6qsP+yQoiLoOBcw==}
 
@@ -4310,11 +4122,6 @@ packages:
     resolution: {integrity: sha512-RmkhL8CAyCRPXCE28MMH0z2PNWQBNk2Q09ZdxM9IOOXwxwZbN+qbWaatPkdkWIKL2ZVDImrN/pK5HTRz2PcS4g==}
     engines: {node: '>= 0.8'}
 
-  react-clientside-effect@1.2.8:
-    resolution: {integrity: sha512-ma2FePH0z3px2+WOu6h+YycZcEvFmmxIlAb62cF52bG86eMySciO/EQZeQMXd07kPCYB0a1dWDT5J+KE9mCDUw==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-
   react-colorful@5.6.1:
     resolution: {integrity: sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==}
     peerDependencies:
@@ -4329,15 +4136,6 @@ packages:
   react-fast-compare@3.2.2:
     resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==}
 
-  react-focus-lock@2.13.6:
-    resolution: {integrity: sha512-ehylFFWyYtBKXjAO9+3v8d0i+cnc1trGS0vlTGhzFW1vbFXVUTmR8s2tt/ZQG8x5hElg6rhENlLG1H3EZK0Llg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   react-hook-form@7.59.0:
     resolution: {integrity: sha512-kmkek2/8grqarTJExFNjy+RXDIP8yM+QTl3QL6m6Q8b2bih4ltmiXxH7T9n+yXNK477xPh5yZT/6vD8sYGzJTA==}
     engines: {node: '>=18.0.0'}
@@ -4361,26 +4159,6 @@ packages:
     resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
     engines: {node: '>=0.10.0'}
 
-  react-remove-scroll-bar@2.3.8:
-    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  react-remove-scroll@2.7.1:
-    resolution: {integrity: sha512-HpMh8+oahmIdOuS5aFKKY6Pyog+FNaZV/XyJOq7b4YFwsFHe5yYfdbIalI4k3vU2nSDql7YskmUseHsRrJqIPA==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   react-router-dom@6.30.1:
     resolution: {integrity: sha512-llKsgOkZdbPU1Eg3zK8lCn+sjD9wMRZZPuzmdWWX5SUs8OFkN5HnFVC0u5KMeMaC9aoancFI/KoLuKPqN+hxHw==}
     engines: {node: '>=14.0.0'}
@@ -4400,16 +4178,6 @@ packages:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
 
-  react-style-singleton@2.2.3:
-    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   react@18.3.1:
     resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
     engines: {node: '>=0.10.0'}
@@ -4448,9 +4216,6 @@ packages:
     resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
     engines: {node: '>= 0.4'}
 
-  regenerator-runtime@0.14.1:
-    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
-
   regexp.prototype.flags@1.5.4:
     resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
     engines: {node: '>= 0.4'}
@@ -4702,10 +4467,6 @@ packages:
   source-map-support@0.5.21:
     resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
 
-  source-map@0.5.7:
-    resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
-    engines: {node: '>=0.10.0'}
-
   source-map@0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
@@ -4792,9 +4553,6 @@ packages:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
-  stylis@4.2.0:
-    resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
-
   sumchecker@3.0.1:
     resolution: {integrity: sha512-MvjXzkz/BOfyVDkG0oFOtBxHX2u3gKbMHIF/dXblZsgD3BWOFLmHovIpZY7BykJdAjcqRCBi1WYBNdEC9yI7vg==}
     engines: {node: '>= 8.0'}
@@ -4885,9 +4643,6 @@ packages:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
 
-  toggle-selection@1.0.6:
-    resolution: {integrity: sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==}
-
   toidentifier@1.0.1:
     resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
     engines: {node: '>=0.6'}
@@ -4936,15 +4691,9 @@ packages:
       typescript:
         optional: true
 
-  tslib@2.4.0:
-    resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
-
   tslib@2.6.2:
     resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
 
-  tslib@2.8.1:
-    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
-
   tsx@4.20.3:
     resolution: {integrity: sha512-qjbnuR9Tr+FJOMBqJCW5ehvIo/buZq7vH7qD7JziU98h6l3qGy0a/yPFjwO+y0/T7GFpNgNAvEcPPVfyT8rrPQ==}
     engines: {node: '>=18.0.0'}
@@ -5088,26 +4837,6 @@ packages:
   url-template@2.0.8:
     resolution: {integrity: sha512-XdVKMF4SJ0nP/O7XIPB0JwAEuT9lDIYnNsK8yGVe43y0AWoKeJNdv3ZNWh7ksJ6KqQFjOO6ox/VEitLnaVNufw==}
 
-  use-callback-ref@1.3.3:
-    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  use-sidecar@1.1.3:
-    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   use-sync-external-store@1.5.0:
     resolution: {integrity: sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==}
     peerDependencies:
@@ -5357,10 +5086,6 @@ packages:
   yallist@4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
 
-  yaml@1.10.2:
-    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
-    engines: {node: '>= 6'}
-
   yargs-parser@21.1.1:
     resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
     engines: {node: '>=12'}
@@ -5697,10 +5422,6 @@ snapshots:
       '@babel/core': 7.27.4
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/runtime@7.24.5':
-    dependencies:
-      regenerator-runtime: 0.14.1
-
   '@babel/runtime@7.27.6': {}
 
   '@babel/template@7.22.15':
@@ -5783,67 +5504,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.23
 
-  '@chakra-ui/anatomy@2.3.6': {}
-
-  '@chakra-ui/hooks@2.4.5(react@18.3.1)':
-    dependencies:
-      '@chakra-ui/utils': 2.2.5(react@18.3.1)
-      '@zag-js/element-size': 0.31.1
-      copy-to-clipboard: 3.3.3
-      framesync: 6.1.2
-      react: 18.3.1
-
-  '@chakra-ui/react@2.10.9(@emotion/react@11.14.0(@types/react@18.3.23)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.23)(react@18.3.1))(@types/react@18.3.23)(react@18.3.1))(@types/react@18.3.23)(framer-motion@10.18.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@chakra-ui/hooks': 2.4.5(react@18.3.1)
-      '@chakra-ui/styled-system': 2.12.4(react@18.3.1)
-      '@chakra-ui/theme': 3.4.9(@chakra-ui/styled-system@2.12.4(react@18.3.1))(react@18.3.1)
-      '@chakra-ui/utils': 2.2.5(react@18.3.1)
-      '@emotion/react': 11.14.0(@types/react@18.3.23)(react@18.3.1)
-      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@18.3.23)(react@18.3.1))(@types/react@18.3.23)(react@18.3.1)
-      '@popperjs/core': 2.11.8
-      '@zag-js/focus-visible': 0.31.1
-      aria-hidden: 1.2.6
-      framer-motion: 10.18.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      react-fast-compare: 3.2.2
-      react-focus-lock: 2.13.6(@types/react@18.3.23)(react@18.3.1)
-      react-remove-scroll: 2.7.1(@types/react@18.3.23)(react@18.3.1)
-    transitivePeerDependencies:
-      - '@types/react'
-
-  '@chakra-ui/styled-system@2.12.4(react@18.3.1)':
-    dependencies:
-      '@chakra-ui/utils': 2.2.5(react@18.3.1)
-      csstype: 3.1.3
-    transitivePeerDependencies:
-      - react
-
-  '@chakra-ui/theme-tools@2.2.9(@chakra-ui/styled-system@2.12.4(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@chakra-ui/anatomy': 2.3.6
-      '@chakra-ui/styled-system': 2.12.4(react@18.3.1)
-      '@chakra-ui/utils': 2.2.5(react@18.3.1)
-      color2k: 2.0.3
-    transitivePeerDependencies:
-      - react
-
-  '@chakra-ui/theme@3.4.9(@chakra-ui/styled-system@2.12.4(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@chakra-ui/anatomy': 2.3.6
-      '@chakra-ui/styled-system': 2.12.4(react@18.3.1)
-      '@chakra-ui/theme-tools': 2.2.9(@chakra-ui/styled-system@2.12.4(react@18.3.1))(react@18.3.1)
-      '@chakra-ui/utils': 2.2.5(react@18.3.1)
-    transitivePeerDependencies:
-      - react
-
-  '@chakra-ui/utils@2.2.5(react@18.3.1)':
-    dependencies:
-      '@types/lodash.mergewith': 4.6.9
-      lodash.mergewith: 4.6.2
-      react: 18.3.1
-
   '@develar/schema-utils@2.6.5':
     dependencies:
       ajv: 6.12.6
@@ -6004,97 +5664,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@emotion/babel-plugin@11.13.5':
-    dependencies:
-      '@babel/helper-module-imports': 7.27.1
-      '@babel/runtime': 7.24.5
-      '@emotion/hash': 0.9.2
-      '@emotion/memoize': 0.9.0
-      '@emotion/serialize': 1.3.3
-      babel-plugin-macros: 3.1.0
-      convert-source-map: 1.9.0
-      escape-string-regexp: 4.0.0
-      find-root: 1.1.0
-      source-map: 0.5.7
-      stylis: 4.2.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@emotion/cache@11.14.0':
-    dependencies:
-      '@emotion/memoize': 0.9.0
-      '@emotion/sheet': 1.4.0
-      '@emotion/utils': 1.4.2
-      '@emotion/weak-memoize': 0.4.0
-      stylis: 4.2.0
-
-  '@emotion/hash@0.9.2': {}
-
-  '@emotion/is-prop-valid@0.8.8':
-    dependencies:
-      '@emotion/memoize': 0.7.4
-    optional: true
-
   '@emotion/is-prop-valid@1.3.1':
     dependencies:
       '@emotion/memoize': 0.9.0
 
-  '@emotion/memoize@0.7.4':
-    optional: true
-
   '@emotion/memoize@0.9.0': {}
 
-  '@emotion/react@11.14.0(@types/react@18.3.23)(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.5
-      '@emotion/babel-plugin': 11.13.5
-      '@emotion/cache': 11.14.0
-      '@emotion/serialize': 1.3.3
-      '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@18.3.1)
-      '@emotion/utils': 1.4.2
-      '@emotion/weak-memoize': 0.4.0
-      hoist-non-react-statics: 3.3.2
-      react: 18.3.1
-    optionalDependencies:
-      '@types/react': 18.3.23
-    transitivePeerDependencies:
-      - supports-color
-
-  '@emotion/serialize@1.3.3':
-    dependencies:
-      '@emotion/hash': 0.9.2
-      '@emotion/memoize': 0.9.0
-      '@emotion/unitless': 0.10.0
-      '@emotion/utils': 1.4.2
-      csstype: 3.1.3
-
-  '@emotion/sheet@1.4.0': {}
-
-  '@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.23)(react@18.3.1))(@types/react@18.3.23)(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.5
-      '@emotion/babel-plugin': 11.13.5
-      '@emotion/is-prop-valid': 1.3.1
-      '@emotion/react': 11.14.0(@types/react@18.3.23)(react@18.3.1)
-      '@emotion/serialize': 1.3.3
-      '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@18.3.1)
-      '@emotion/utils': 1.4.2
-      react: 18.3.1
-    optionalDependencies:
-      '@types/react': 18.3.23
-    transitivePeerDependencies:
-      - supports-color
-
-  '@emotion/unitless@0.10.0': {}
-
-  '@emotion/use-insertion-effect-with-fallbacks@1.2.0(react@18.3.1)':
-    dependencies:
-      react: 18.3.1
-
-  '@emotion/utils@1.4.2': {}
-
-  '@emotion/weak-memoize@0.4.0': {}
-
   '@esbuild/aix-ppc64@0.24.2':
     optional: true
 
@@ -6485,8 +6060,6 @@ snapshots:
     dependencies:
       playwright: 1.53.2
 
-  '@popperjs/core@2.11.8': {}
-
   '@remix-run/router@1.23.0': {}
 
   '@rolldown/pluginutils@1.0.0-beta.9': {}
@@ -6871,12 +6444,6 @@ snapshots:
     dependencies:
       '@types/node': 22.15.26
 
-  '@types/lodash.mergewith@4.6.9':
-    dependencies:
-      '@types/lodash': 4.17.19
-
-  '@types/lodash@4.17.19': {}
-
   '@types/mime@1.3.5': {}
 
   '@types/mime@3.0.1': {}
@@ -6891,8 +6458,6 @@ snapshots:
     dependencies:
       undici-types: 6.21.0
 
-  '@types/parse-json@4.0.2': {}
-
   '@types/plist@3.0.5':
     dependencies:
       '@types/node': 22.15.26
@@ -7136,14 +6701,6 @@ snapshots:
 
   '@xmldom/xmldom@0.8.10': {}
 
-  '@zag-js/dom-query@0.31.1': {}
-
-  '@zag-js/element-size@0.31.1': {}
-
-  '@zag-js/focus-visible@0.31.1':
-    dependencies:
-      '@zag-js/dom-query': 0.31.1
-
   abab@2.0.6:
     optional: true
 
@@ -7348,10 +6905,6 @@ snapshots:
 
   argparse@2.0.1: {}
 
-  aria-hidden@1.2.6:
-    dependencies:
-      tslib: 2.8.1
-
   array-buffer-byte-length@1.0.2:
     dependencies:
       call-bound: 1.0.4
@@ -7436,12 +6989,6 @@ snapshots:
     transitivePeerDependencies:
       - debug
 
-  babel-plugin-macros@3.1.0:
-    dependencies:
-      '@babel/runtime': 7.24.5
-      cosmiconfig: 7.1.0
-      resolve: 1.22.10
-
   balanced-match@1.0.2: {}
 
   base64-js@1.5.1: {}
@@ -7745,8 +7292,6 @@ snapshots:
 
   color-name@1.1.4: {}
 
-  color2k@2.0.3: {}
-
   combined-stream@1.0.8:
     dependencies:
       delayed-stream: 1.0.0
@@ -7787,8 +7332,6 @@ snapshots:
 
   content-type@1.0.5: {}
 
-  convert-source-map@1.9.0: {}
-
   convert-source-map@2.0.0: {}
 
   cookie-parser@1.4.7:
@@ -7804,10 +7347,6 @@ snapshots:
 
   cookie@1.0.2: {}
 
-  copy-to-clipboard@3.3.3:
-    dependencies:
-      toggle-selection: 1.0.6
-
   core-util-is@1.0.2:
     optional: true
 
@@ -7818,14 +7357,6 @@ snapshots:
       object-assign: 4.1.1
       vary: 1.1.2
 
-  cosmiconfig@7.1.0:
-    dependencies:
-      '@types/parse-json': 4.0.2
-      import-fresh: 3.3.1
-      parse-json: 5.2.0
-      path-type: 4.0.0
-      yaml: 1.10.2
-
   cosmiconfig@8.3.6(typescript@5.5.3):
     dependencies:
       import-fresh: 3.3.0
@@ -7876,8 +7407,6 @@ snapshots:
 
   csstype@3.1.2: {}
 
-  csstype@3.1.3: {}
-
   csv-stringify@6.5.2: {}
 
   data-urls@3.0.2:
@@ -7953,8 +7482,6 @@ snapshots:
 
   detect-libc@2.0.4: {}
 
-  detect-node-es@1.1.0: {}
-
   detect-node@2.1.0:
     optional: true
 
@@ -8608,8 +8135,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  find-root@1.1.0: {}
-
   find-up@5.0.0:
     dependencies:
       locate-path: 6.0.0
@@ -8623,10 +8148,6 @@ snapshots:
 
   flatted@3.2.9: {}
 
-  focus-lock@1.3.6:
-    dependencies:
-      tslib: 2.8.1
-
   follow-redirects@1.15.6: {}
 
   for-each@0.3.5:
@@ -8657,18 +8178,6 @@ snapshots:
 
   frac@1.1.2: {}
 
-  framer-motion@10.18.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
-    dependencies:
-      tslib: 2.6.2
-    optionalDependencies:
-      '@emotion/is-prop-valid': 0.8.8
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-
-  framesync@6.1.2:
-    dependencies:
-      tslib: 2.4.0
-
   fresh@2.0.0: {}
 
   fs-constants@1.0.0: {}
@@ -8758,8 +8267,6 @@ snapshots:
       hasown: 2.0.2
       math-intrinsics: 1.1.0
 
-  get-nonce@1.0.1: {}
-
   get-proto@1.0.1:
     dependencies:
       dunder-proto: 1.0.1
@@ -8908,6 +8415,7 @@ snapshots:
     dependencies:
       webidl-conversions: 7.0.0
       whatwg-mimetype: 3.0.0
+    optional: true
 
   has-bigints@1.1.0: {}
 
@@ -9025,11 +8533,6 @@ snapshots:
       parent-module: 1.0.1
       resolve-from: 4.0.0
 
-  import-fresh@3.3.1:
-    dependencies:
-      parent-module: 1.0.1
-      resolve-from: 4.0.0
-
   imurmurhash@0.1.4: {}
 
   indent-string@4.0.0: {}
@@ -9361,8 +8864,6 @@ snapshots:
 
   lodash.merge@4.6.2: {}
 
-  lodash.mergewith@4.6.2: {}
-
   lodash.union@4.6.0: {}
 
   lodash@4.17.21: {}
@@ -9852,11 +9353,6 @@ snapshots:
       iconv-lite: 0.6.3
       unpipe: 1.0.0
 
-  react-clientside-effect@1.2.8(react@18.3.1):
-    dependencies:
-      '@babel/runtime': 7.27.6
-      react: 18.3.1
-
   react-colorful@5.6.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       react: 18.3.1
@@ -9870,18 +9366,6 @@ snapshots:
 
   react-fast-compare@3.2.2: {}
 
-  react-focus-lock@2.13.6(@types/react@18.3.23)(react@18.3.1):
-    dependencies:
-      '@babel/runtime': 7.27.6
-      focus-lock: 1.3.6
-      prop-types: 15.8.1
-      react: 18.3.1
-      react-clientside-effect: 1.2.8(react@18.3.1)
-      use-callback-ref: 1.3.3(@types/react@18.3.23)(react@18.3.1)
-      use-sidecar: 1.1.3(@types/react@18.3.23)(react@18.3.1)
-    optionalDependencies:
-      '@types/react': 18.3.23
-
   react-hook-form@7.59.0(react@18.3.1):
     dependencies:
       react: 18.3.1
@@ -9900,25 +9384,6 @@ snapshots:
 
   react-refresh@0.17.0: {}
 
-  react-remove-scroll-bar@2.3.8(@types/react@18.3.23)(react@18.3.1):
-    dependencies:
-      react: 18.3.1
-      react-style-singleton: 2.2.3(@types/react@18.3.23)(react@18.3.1)
-      tslib: 2.8.1
-    optionalDependencies:
-      '@types/react': 18.3.23
-
-  react-remove-scroll@2.7.1(@types/react@18.3.23)(react@18.3.1):
-    dependencies:
-      react: 18.3.1
-      react-remove-scroll-bar: 2.3.8(@types/react@18.3.23)(react@18.3.1)
-      react-style-singleton: 2.2.3(@types/react@18.3.23)(react@18.3.1)
-      tslib: 2.8.1
-      use-callback-ref: 1.3.3(@types/react@18.3.23)(react@18.3.1)
-      use-sidecar: 1.1.3(@types/react@18.3.23)(react@18.3.1)
-    optionalDependencies:
-      '@types/react': 18.3.23
-
   react-router-dom@6.30.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@remix-run/router': 1.23.0
@@ -9936,14 +9401,6 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  react-style-singleton@2.2.3(@types/react@18.3.23)(react@18.3.1):
-    dependencies:
-      get-nonce: 1.0.1
-      react: 18.3.1
-      tslib: 2.8.1
-    optionalDependencies:
-      '@types/react': 18.3.23
-
   react@18.3.1:
     dependencies:
       loose-envify: 1.4.0
@@ -10004,8 +9461,6 @@ snapshots:
       get-proto: 1.0.1
       which-builtin-type: 1.2.1
 
-  regenerator-runtime@0.14.1: {}
-
   regexp.prototype.flags@1.5.4:
     dependencies:
       call-bind: 1.0.8
@@ -10328,8 +9783,6 @@ snapshots:
       buffer-from: 1.1.2
       source-map: 0.6.1
 
-  source-map@0.5.7: {}
-
   source-map@0.6.1: {}
 
   sprintf-js@1.1.3: {}
@@ -10433,8 +9886,6 @@ snapshots:
 
   strip-json-comments@3.1.1: {}
 
-  stylis@4.2.0: {}
-
   sumchecker@3.0.1:
     dependencies:
       debug: 4.4.1
@@ -10531,8 +9982,6 @@ snapshots:
     dependencies:
       is-number: 7.0.0
 
-  toggle-selection@1.0.6: {}
-
   toidentifier@1.0.1: {}
 
   tough-cookie@4.1.4:
@@ -10570,12 +10019,8 @@ snapshots:
     optionalDependencies:
       typescript: 5.5.3
 
-  tslib@2.4.0: {}
-
   tslib@2.6.2: {}
 
-  tslib@2.8.1: {}
-
   tsx@4.20.3:
     dependencies:
       esbuild: 0.25.5
@@ -10726,21 +10171,6 @@ snapshots:
 
   url-template@2.0.8: {}
 
-  use-callback-ref@1.3.3(@types/react@18.3.23)(react@18.3.1):
-    dependencies:
-      react: 18.3.1
-      tslib: 2.8.1
-    optionalDependencies:
-      '@types/react': 18.3.23
-
-  use-sidecar@1.1.3(@types/react@18.3.23)(react@18.3.1):
-    dependencies:
-      detect-node-es: 1.1.0
-      react: 18.3.1
-      tslib: 2.8.1
-    optionalDependencies:
-      '@types/react': 18.3.23
-
   use-sync-external-store@1.5.0(react@18.3.1):
     dependencies:
       react: 18.3.1
@@ -10894,7 +10324,8 @@ snapshots:
 
   webidl-conversions@3.0.1: {}
 
-  webidl-conversions@7.0.0: {}
+  webidl-conversions@7.0.0:
+    optional: true
 
   webpack-sources@3.2.3: {}
 
@@ -10905,7 +10336,8 @@ snapshots:
       iconv-lite: 0.6.3
     optional: true
 
-  whatwg-mimetype@3.0.0: {}
+  whatwg-mimetype@3.0.0:
+    optional: true
 
   whatwg-url@11.0.0:
     dependencies:
@@ -11014,8 +10446,6 @@ snapshots:
 
   yallist@4.0.0: {}
 
-  yaml@1.10.2: {}
-
   yargs-parser@21.1.1: {}
 
   yargs@17.7.2: