diff --git a/bun.lockb b/bun.lockb
index b1b27fe..79e1130 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index fe8b4f1..6958e2a 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,6 @@
     "node-addon-api": "^8.2.1",
     "polished": "^4.3.1",
     "sharp": "^0.33.5",
-    "solid-focus-trap": "^0.1.7",
     "tailwind-merge": "^2.5.3"
   },
   "devDependencies": {
diff --git a/src/renderer/src/components/dropdown-list/DropdownListItem.tsx b/src/renderer/src/components/dropdown-list/DropdownListItem.tsx
index ddab6ca..acece81 100644
--- a/src/renderer/src/components/dropdown-list/DropdownListItem.tsx
+++ b/src/renderer/src/components/dropdown-list/DropdownListItem.tsx
@@ -7,7 +7,7 @@ export type Props = JSX.IntrinsicElements["button"];
 const DropdownListItem: Component<Props> = (props) => {
   const state = useDropdownList();
   const value = state.namespace.create();
-  const { attrs, tabIndex, isSelected } = state.item(value, {
+  const { attrs, tabIndex } = state.item(value, {
     onPointerMove: state.handleItemPointerMove,
   });
 
@@ -19,10 +19,7 @@ const DropdownListItem: Component<Props> = (props) => {
     <RawList.Item
       onPointerLeave={state.handleItemPointerLeave}
       tabIndex={tabIndex()}
-      classList={{
-        "bg-overlay/30": state.isHighlighted() && isSelected(),
-      }}
-      {...attrs}
+      {...attrs()}
       {...props}
     />
   );
diff --git a/src/renderer/src/components/popover/Popover.tsx b/src/renderer/src/components/popover/Popover.tsx
index 1c4671d..1b2f253 100644
--- a/src/renderer/src/components/popover/Popover.tsx
+++ b/src/renderer/src/components/popover/Popover.tsx
@@ -30,6 +30,7 @@ import {
 } from "solid-js";
 
 export const DEFAULT_POPOVER_OPEN = false;
+export const DEFAULT_CUSTOM_POSITION_PLACEMENT: Placement = "bottom-start";
 
 export type Props = {
   offset?: OffsetOptions;
@@ -99,24 +100,6 @@ function useProviderValue(props: Props) {
     handleResize();
   };
 
-  let lastMousePos: [number, number];
-  const useCustomCoords = {
-    name: "useCustomCoords",
-    fn() {
-      const position = props.position?.();
-      if (position === undefined || position === lastMousePos) {
-        return {};
-      }
-
-      const [x, y] = position;
-      if (x === 0 || y === 0) {
-        return {};
-      }
-
-      return { x, y };
-    },
-  };
-
   const handleResize = () => {
     const trigger = triggerRef();
     const content = contentRef();
@@ -125,9 +108,12 @@ function useProviderValue(props: Props) {
       return;
     }
 
-    const middleware: Middleware[] = [offset(props.offset)];
-    if (typeof props.position !== "undefined") {
-      middleware.push(useCustomCoords);
+    const [x, y] = props.position?.() ?? [];
+    const hasCustomPosition = x !== undefined && y !== undefined;
+
+    const middleware: Middleware[] = [];
+    if (!hasCustomPosition) {
+      middleware.push(offset(props.offset));
     }
     if (typeof props.flip !== "undefined") {
       middleware.push(flip(props.flip === true ? undefined : props.flip));
@@ -136,10 +122,35 @@ function useProviderValue(props: Props) {
       middleware.push(shift(props.shift === true ? undefined : props.shift));
     }
 
-    computePosition(trigger, content, {
-      placement: props.placement,
-      strategy: "fixed",
+    const getBoundingClientRect = () => {
+      const triggerRect = trigger.getBoundingClientRect();
+      if (!hasCustomPosition) {
+        return triggerRect;
+      }
+
+      return {
+        x,
+        y,
+        top: y,
+        right: x,
+        bottom: y,
+        left: x,
+        width: 0,
+        height: 0,
+      };
+    };
+
+    const getPlacement = () => {
+      if (hasCustomPosition) {
+        return DEFAULT_CUSTOM_POSITION_PLACEMENT;
+      }
+      return props.placement;
+    };
+
+    computePosition({ getBoundingClientRect }, content, {
       middleware,
+      strategy: "fixed",
+      placement: getPlacement(),
     }).then(setPosition);
   };
 
diff --git a/src/renderer/src/components/popover/PopoverContent.tsx b/src/renderer/src/components/popover/PopoverContent.tsx
index 75b28ef..ea66326 100644
--- a/src/renderer/src/components/popover/PopoverContent.tsx
+++ b/src/renderer/src/components/popover/PopoverContent.tsx
@@ -1,7 +1,7 @@
 import { popoverStack, usePopover } from "./Popover";
 import { ComputePositionReturn } from "@floating-ui/dom";
 import { cn, sn } from "@renderer/lib/css.utils";
-import createFocusTrap from "solid-focus-trap";
+import createFocusTrap from "@renderer/lib/focus-trap";
 import { Component, createMemo, onCleanup, onMount, Show } from "solid-js";
 import { JSX } from "solid-js/jsx-runtime";
 
@@ -20,18 +20,18 @@ export type Props = JSX.IntrinsicElements["div"];
 const PopoverContent: Component<Props> = (props) => {
   const state = usePopover();
 
-  const isLastPopoupOpen = createMemo(() => {
+  const isLastPopupOpen = createMemo(() => {
     return state.isOpen() && popoverStack().at(-1) === state.id();
   });
 
   createFocusTrap({
     element: state.contentRef,
-    enabled: isLastPopoupOpen,
+    enabled: () => isLastPopupOpen(),
   });
 
   onMount(() => {
     const handleKeyUp = (e: KeyboardEvent) => {
-      if (!isLastPopoupOpen()) {
+      if (!isLastPopupOpen()) {
         return;
       }
 
diff --git a/src/renderer/src/components/popover/PopoverTrigger.tsx b/src/renderer/src/components/popover/PopoverTrigger.tsx
index ce8d2e5..2a3333f 100644
--- a/src/renderer/src/components/popover/PopoverTrigger.tsx
+++ b/src/renderer/src/components/popover/PopoverTrigger.tsx
@@ -1,20 +1,36 @@
 import { usePopover } from "./Popover";
-import { Component } from "solid-js";
+import { Component, splitProps, Switch, Match } from "solid-js";
 import { JSX } from "solid-js/jsx-runtime";
 
-export type Props = JSX.IntrinsicElements["button"];
-const PopoverTrigger: Component<Props> = (props) => {
+type PartialButtonProps = Partial<JSX.IntrinsicElements["button"]>;
+export type Props = Omit<PartialButtonProps, "ref" | "onClick" | "children"> & {
+  children?: JSX.Element | ((props: PartialButtonProps) => JSX.Element);
+};
+
+const PopoverTrigger: Component<Props> = (_props) => {
   const state = usePopover();
+  const [props, rest] = splitProps(_props, ["children"]);
+
+  const triggerProps: PartialButtonProps = {
+    ref: state.setTriggerRef,
+    // it complains about "data-open" not being a string for some reason
+    // so we have to cast it to a string
+    ["data-open" as string]: state.isOpen(),
+    onClick: () => {
+      state?.open();
+    },
+    ...rest,
+  };
 
   return (
-    <button
-      ref={state.setTriggerRef}
-      data-open={state.isOpen()}
-      onClick={() => {
-        state?.toggle();
-      }}
-      {...props}
-    />
+    <Switch>
+      <Match when={typeof props.children === "function"}>
+        {(props.children as (props: PartialButtonProps) => JSX.Element)(triggerProps)}
+      </Match>
+      <Match when={typeof props.children !== "function"}>
+        <button {...triggerProps}>{props.children as JSX.Element}</button>
+      </Match>
+    </Switch>
   );
 };
 
diff --git a/src/renderer/src/components/raw-list/RawList.tsx b/src/renderer/src/components/raw-list/RawList.tsx
index de544a4..d11e30f 100644
--- a/src/renderer/src/components/raw-list/RawList.tsx
+++ b/src/renderer/src/components/raw-list/RawList.tsx
@@ -10,7 +10,7 @@ export const RawListItem: Component<JSX.IntrinsicElements["button"]> = (_props)
   return (
     <button
       class={cn(
-        "flex items-center justify-between rounded-md px-2 py-1.5 focus:outline-none disabled:pointer-events-none disabled:opacity-50",
+        "data-[focused-keyboard=true]:focus:outline-initial flex items-center justify-between rounded-md px-2 py-1.5 disabled:pointer-events-none disabled:opacity-50 data-[focused=true]:bg-overlay/30 data-[focused-mouse=true]:focus:outline-none",
         props.class,
       )}
       {...rest}
diff --git a/src/renderer/src/components/selectable-list/SelectableListItem.tsx b/src/renderer/src/components/selectable-list/SelectableListItem.tsx
index 59d5de7..0a58acb 100644
--- a/src/renderer/src/components/selectable-list/SelectableListItem.tsx
+++ b/src/renderer/src/components/selectable-list/SelectableListItem.tsx
@@ -12,11 +12,7 @@ const SelectableListItem: Component<Props> = (_props) => {
   const [props, rest] = splitProps(_props, ["value", "onSelectedByClick", "children"]);
 
   const state = useSelectableList();
-  const {
-    attrs,
-    isSelected: isFocused,
-    tabIndex,
-  } = state.item(props.value, {
+  const { attrs, tabIndex } = state.item(props.value, {
     onSelectedByClick: () => {
       props.onSelectedByClick?.();
       if (!props.value) {
@@ -32,14 +28,7 @@ const SelectableListItem: Component<Props> = (_props) => {
   });
 
   return (
-    <RawList.Item
-      tabIndex={tabIndex()}
-      classList={{
-        "bg-overlay/30": isFocused(),
-      }}
-      {...attrs}
-      {...rest}
-    >
+    <RawList.Item tabIndex={tabIndex()} {...attrs()} {...rest}>
       {props.children}
       <Show when={isSelected()}>
         <CheckIcon size={14} />
diff --git a/src/renderer/src/components/song/song-detail/SongControls.tsx b/src/renderer/src/components/song/song-detail/SongControls.tsx
index b885c8a..753d133 100644
--- a/src/renderer/src/components/song/song-detail/SongControls.tsx
+++ b/src/renderer/src/components/song/song-detail/SongControls.tsx
@@ -13,6 +13,7 @@ import {
   handleMuteSong,
 } from "../song.utils";
 import Button from "@renderer/components/button/Button";
+import SelectableList from "@renderer/components/selectable-list/SelectableList";
 import Slider from "@renderer/components/slider/Slider";
 import {
   CirclePlusIcon,
@@ -28,7 +29,6 @@ import {
   VolumeXIcon,
 } from "lucide-solid";
 import { Component, createMemo, createSignal, Match, Show, Switch, For } from "solid-js";
-import { ParentComponent } from "solid-js";
 import { Portal } from "solid-js/web";
 
 // Add a prop to accept the averageColor
@@ -190,6 +190,7 @@ const MIN_SPEED_AMOUNT = PREDEFINED_SPEEDS[0];
 const MAX_SPEED_AMOUNT = PREDEFINED_SPEEDS.at(-1);
 const RightPart = () => {
   const [isPopoverOpen, setisPopoverOpen] = createSignal(false);
+  const stringSpeed = createMemo(() => String(speed()));
 
   return (
     <div class="flex flex-1 justify-end gap-4">
@@ -201,16 +202,13 @@ const RightPart = () => {
           mainAxis: 10,
         }}
       >
-        <Popover.Anchor>
-          <Button
-            onClick={() => setisPopoverOpen(true)}
-            size="icon"
-            variant="ghost"
-            title="Set speed"
-          >
-            <GaugeIcon size={20} />
-          </Button>
-        </Popover.Anchor>
+        <Popover.Trigger>
+          {(triggerProps) => (
+            <Button {...triggerProps} size="icon" variant="ghost" title="Set speed">
+              <GaugeIcon size={20} />
+            </Button>
+          )}
+        </Popover.Trigger>
 
         <Portal>
           <Popover.Overlay />
@@ -234,9 +232,16 @@ const RightPart = () => {
             </div>
             <div class="my-2 h-px w-full bg-stroke" />
 
-            <For each={PREDEFINED_SPEEDS}>
-              {(amount) => <SpeedOption amount={amount}>{amount}</SpeedOption>}
-            </For>
+            <SelectableList
+              value={stringSpeed}
+              onValueChange={(newSpeed) => setSpeed(Number(newSpeed))}
+            >
+              <For each={PREDEFINED_SPEEDS}>
+                {(amount) => (
+                  <SelectableList.Item value={String(amount)}>{amount}</SelectableList.Item>
+                )}
+              </For>
+            </SelectableList>
           </Popover.Content>
         </Portal>
       </Popover>
@@ -247,18 +252,4 @@ const RightPart = () => {
   );
 };
 
-type SpeedOptionProps = {
-  amount: number;
-};
-const SpeedOption: ParentComponent<SpeedOptionProps> = (props) => {
-  return (
-    <button
-      onClick={() => setSpeed(props.amount)}
-      class="flex items-center justify-between rounded-md px-2 py-1.5 hover:bg-surface focus:outline-none disabled:pointer-events-none disabled:opacity-50"
-    >
-      {props.children}
-    </button>
-  );
-};
-
 export default SongControls;
diff --git a/src/renderer/src/components/song/song-list-search/SongListSearch.tsx b/src/renderer/src/components/song/song-list-search/SongListSearch.tsx
index 874309a..ba643b2 100644
--- a/src/renderer/src/components/song/song-list-search/SongListSearch.tsx
+++ b/src/renderer/src/components/song/song-list-search/SongListSearch.tsx
@@ -6,7 +6,7 @@ import { SongListSearchTags } from "./SongListSearchTags";
 import Button from "@renderer/components/button/Button";
 import { Input } from "@renderer/components/input/Input";
 import { FilterIcon, SearchIcon, FilterXIcon } from "lucide-solid";
-import { Accessor, Component, createSignal, Match, Setter, Signal, Switch } from "solid-js";
+import { Accessor, Component, createSignal, Match, Setter, Signal, Switch, Show } from "solid-js";
 
 export type SearchProps = {
   tags: Signal<Tag[]>;
@@ -109,8 +109,10 @@ const SongListSearch: Component<SearchProps> = (props) => {
         }}
       >
         <div class="mt-2 flex flex-nowrap items-center gap-2 overflow-y-auto">
-          <SongListSearchOrderBy disabled={!filterExpanded()} setOrder={props.setOrder} />
-          <SongListSearchTags disabled={!filterExpanded()} />
+          <Show when={filterExpanded()}>
+            <SongListSearchOrderBy setOrder={props.setOrder} />
+            <SongListSearchTags />
+          </Show>
         </div>
       </div>
     </div>
diff --git a/src/renderer/src/components/tabs/TabsTrigger.tsx b/src/renderer/src/components/tabs/TabsTrigger.tsx
index eb906d3..77fbd50 100644
--- a/src/renderer/src/components/tabs/TabsTrigger.tsx
+++ b/src/renderer/src/components/tabs/TabsTrigger.tsx
@@ -16,7 +16,7 @@ const TabsTrigger: Component<Props> = (_props) => {
     <button
       data-selected={isSelected()}
       tabIndex={tabIndex()}
-      {...attrs}
+      {...attrs()}
       {...rest}
       class={cn(
         "ring-offset-background z-10 flex h-[33px] items-center gap-2 rounded-lg px-3 text-subtext transition-colors",
diff --git a/src/renderer/src/lib/focus-trap.ts b/src/renderer/src/lib/focus-trap.ts
new file mode 100644
index 0000000..ab69c1a
--- /dev/null
+++ b/src/renderer/src/lib/focus-trap.ts
@@ -0,0 +1,205 @@
+import { createEffect, createMemo, createSignal, mergeProps, onCleanup, untrack } from "solid-js";
+
+type MaybeAccessor<T> = T | (() => T);
+type MaybeAccessorValue<T extends MaybeAccessor<unknown>> = T extends () => unknown
+  ? ReturnType<T>
+  : T;
+
+const focusableElementSelector =
+  'a[href]:not([tabindex="-1"]), button:not([tabindex="-1"]), input:not([tabindex="-1"]), textarea:not([tabindex="-1"]), select:not([tabindex="-1"]), details:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])';
+
+const EVENT_INITIAL_FOCUS = "focusTrap.initialFocus";
+const EVENT_FINAL_FOCUS = "focusTrap.finalFocus";
+const EVENT_OPTIONS = { bubbles: false, cancelable: true };
+
+const access = <T extends MaybeAccessor<unknown>>(v: T): MaybeAccessorValue<T> =>
+  typeof v === "function" ? v() : v;
+
+const afterPaint = (fn: () => void) => requestAnimationFrame(() => requestAnimationFrame(fn));
+
+/**
+ * Traps focus inside the given element. Is aware of changes being made to the DOM tree inside the focus trap by using a `MutationObserver`.
+ *
+ * @param props.element - Element to trap focus in.
+ * @param props.enabled - If the focus trap is enabled. *Default = `true`*
+ * @param props.observeChanges - Whether to watch for changes being made to the DOM tree inside the focus trap and reload the focus trap accordingly. *Default = `true`*
+ * @param props.initialFocusElement - The element to receive focus when the focus trap is activated. *Default = The first focusable element inside `element`*
+ * @param props.restoreFocus - If the focus should be restored to the element the focus was on initially when the focus trap is deactivated. *Default = `true`*
+ * @param props.finalFocusElement - The element to receive focus when the focus trap is deactivated (`enabled` = `false`). *Default = The element the focus was on initially*
+ * @param props.onInitialFocus - Callback fired when focus moves inside the focus trap. Can be prevented by calling `event.preventDefault`.
+ * @param props.onFinalFocus - Callback fired when focus moves outside the focus trap. Can be prevented by calling `event.preventDefault`.
+ */
+const createFocusTrap = (props: {
+  element: MaybeAccessor<HTMLElement | null>;
+  enabled?: MaybeAccessor<boolean>;
+  observeChanges?: MaybeAccessor<boolean>;
+  initialFocusElement?: MaybeAccessor<HTMLElement | null>;
+  restoreFocus?: MaybeAccessor<boolean>;
+  finalFocusElement?: MaybeAccessor<HTMLElement | null>;
+  onInitialFocus?: (event: Event) => void;
+  onFinalFocus?: (event: Event) => void;
+}) => {
+  const defaultedProps = mergeProps(
+    {
+      enabled: true,
+      observeChanges: true,
+      restoreFocus: true,
+    },
+    props,
+  );
+
+  const [focusableElements, setFocusableElements] = createSignal<HTMLElement[] | null>(null);
+  const firstFocusElement = createMemo(() => {
+    const _focusableElements = focusableElements();
+    if (!_focusableElements) return null;
+    return _focusableElements[0] ?? null;
+  });
+  const lastFocusElement = createMemo(() => {
+    const _focusableElements = focusableElements();
+    if (!_focusableElements) return null;
+    return _focusableElements[_focusableElements.length - 1] ?? null;
+  });
+
+  let originalFocusedElement: HTMLElement | null = null;
+
+  const mutationObserverCallback = () => {
+    loadFocusTrap(access(defaultedProps.element)!);
+    if (document.activeElement === null || document.activeElement === document.body) {
+      initialFocus(access(defaultedProps.element)!);
+    }
+  };
+
+  createEffect(() => {
+    const container = access(defaultedProps.element);
+    if (container && access(defaultedProps.enabled)) {
+      originalFocusedElement = document.activeElement as HTMLElement | null;
+
+      untrack(() => {
+        loadFocusTrap(container);
+        initialFocus(container);
+      });
+
+      const observer = new MutationObserver(mutationObserverCallback);
+      if (access(defaultedProps.observeChanges)) {
+        observer.observe(container, {
+          subtree: true,
+          childList: true,
+          attributes: true,
+          attributeFilter: ["tabindex"],
+        });
+      }
+
+      onCleanup(() => {
+        if (access(defaultedProps.observeChanges)) {
+          observer.disconnect();
+        }
+        setFocusableElements(null);
+        restoreFocus(container);
+      });
+    }
+  });
+
+  createEffect(() => {
+    const _focusableElements = focusableElements();
+    if (_focusableElements === null || _focusableElements.length !== 0) return;
+
+    document.addEventListener("keydown", preventFocusChange);
+    onCleanup(() => {
+      document.removeEventListener("keydown", preventFocusChange);
+    });
+  });
+
+  createEffect(() => {
+    const _firstFocusElement = firstFocusElement();
+    if (!_firstFocusElement) return;
+
+    _firstFocusElement.addEventListener("keydown", onFirstFocusElementKeyDown);
+    onCleanup(() => {
+      _firstFocusElement.removeEventListener("keydown", onFirstFocusElementKeyDown);
+    });
+  });
+
+  createEffect(() => {
+    const _lastFocusElement = lastFocusElement();
+    if (!_lastFocusElement) return;
+
+    _lastFocusElement.addEventListener("keydown", onLastFocusElementKeyDown);
+    onCleanup(() => {
+      _lastFocusElement.removeEventListener("keydown", onLastFocusElementKeyDown);
+    });
+  });
+
+  const loadFocusTrap = (container: HTMLElement) => {
+    setFocusableElements(
+      Array.from(container.querySelectorAll(focusableElementSelector)) as HTMLElement[],
+    );
+  };
+
+  const initialFocus = (container: HTMLElement) => {
+    const initialFocusElement =
+      access(defaultedProps.initialFocusElement) ?? firstFocusElement() ?? container;
+    const onInitialFocus = defaultedProps.onInitialFocus;
+
+    let event: CustomEvent | undefined;
+    if (onInitialFocus) {
+      event = new CustomEvent(EVENT_INITIAL_FOCUS, EVENT_OPTIONS);
+      container.addEventListener(EVENT_INITIAL_FOCUS, onInitialFocus);
+      container.dispatchEvent(event);
+      container.removeEventListener(EVENT_INITIAL_FOCUS, onInitialFocus);
+    }
+
+    if (event?.defaultPrevented === true) {
+      return;
+    }
+
+    afterPaint(() => initialFocusElement.focus());
+  };
+
+  const onFirstFocusElementKeyDown = (event: KeyboardEvent) => {
+    if (event.key === "Tab" && event.shiftKey) {
+      event.preventDefault();
+      lastFocusElement()!.focus();
+    }
+  };
+
+  const onLastFocusElementKeyDown = (event: KeyboardEvent) => {
+    if (event.key === "Tab" && !event.shiftKey) {
+      event.preventDefault();
+      firstFocusElement()!.focus();
+    }
+  };
+
+  const preventFocusChange = (event: KeyboardEvent) => {
+    if (event.key === "Tab") {
+      event.preventDefault();
+    }
+  };
+
+  const restoreFocus = (container: HTMLElement) => {
+    const restoreFocus = access(defaultedProps.restoreFocus);
+    if (!restoreFocus) return;
+
+    const finalFocusElement = access(defaultedProps.finalFocusElement) ?? originalFocusedElement;
+
+    if (!finalFocusElement) {
+      return;
+    }
+
+    let event: CustomEvent | undefined;
+    const onFinalFocus = defaultedProps.onFinalFocus;
+    if (onFinalFocus) {
+      event = new CustomEvent(EVENT_FINAL_FOCUS, EVENT_OPTIONS);
+      container.addEventListener(EVENT_FINAL_FOCUS, onFinalFocus);
+      container.dispatchEvent(event);
+      container.removeEventListener(EVENT_FINAL_FOCUS, onFinalFocus);
+    }
+
+    if (event?.defaultPrevented === true) {
+      return;
+    }
+
+    afterPaint(() => finalFocusElement.focus());
+  };
+};
+
+export default createFocusTrap;
diff --git a/src/renderer/src/lib/roving-focus-group/rovingFocusGroup.ts b/src/renderer/src/lib/roving-focus-group/rovingFocusGroup.ts
index ef939ba..b1cbb21 100644
--- a/src/renderer/src/lib/roving-focus-group/rovingFocusGroup.ts
+++ b/src/renderer/src/lib/roving-focus-group/rovingFocusGroup.ts
@@ -2,8 +2,11 @@ import useControllableState from "../controllable-state";
 import { Accessor, createMemo, createSignal, onCleanup, onMount } from "solid-js";
 import { DOMElement } from "solid-js/jsx-runtime";
 
-const ITEM_DATA_ATTR = "data-item";
-const DEFAULT_SELECTED_VALUE = "";
+export const ITEM_DATA_ATTR = "data-item";
+export const ITEM_DATA_FOCUSED = "data-focused";
+export const ITEM_DATA_FOCUS_KEYBOARD = "data-focused-keyboard";
+export const ITEM_DATA_FOCUS_MOUSE = "data-focused-mouse";
+export const DEFAULT_SELECTED_VALUE = "";
 
 const canFocus = (
   element: Element | null | undefined,
@@ -27,6 +30,9 @@ type Params = {
 export function useRovingFocusGroup(props: Params = {}) {
   let container!: HTMLElement;
 
+  const [currentInteractionMode, setCurrentInteractionMode] = createSignal<"mouse" | "keyboard">(
+    "mouse",
+  );
   const [registeredTabs, setRegisteredTabs] = createSignal<string[]>([]);
 
   const [hasMounted, setHasMounted] = createSignal(false);
@@ -72,6 +78,7 @@ export function useRovingFocusGroup(props: Params = {}) {
       return;
     }
 
+    setCurrentInteractionMode("keyboard");
     props.onKeyUp?.();
 
     const orderedNodes = findOrderedNodes();
@@ -152,6 +159,7 @@ export function useRovingFocusGroup(props: Params = {}) {
     currentlyActiveElement,
     onListmounted,
     tryFocusFirstItem,
+    currentInteractionMode,
     value: currentStopId,
     attrs: {
       ref: (node: HTMLElement) => {
@@ -176,6 +184,7 @@ export function useRovingFocusGroup(props: Params = {}) {
           return;
         }
 
+        setCurrentInteractionMode("mouse");
         const optionToFocus = getCurrentOption();
         if (!canFocus(optionToFocus)) {
           return;
@@ -225,12 +234,15 @@ export function useRovingFocusGroup(props: Params = {}) {
       return {
         isSelected,
         tabIndex,
-        attrs: {
+        attrs: () => ({
           onKeyUp: handleItemKeyUp,
           onClick: handleClick,
           onPointerMove: handlePointerMove,
           [ITEM_DATA_ATTR]: tabStopId ?? "fallback",
-        },
+          [ITEM_DATA_FOCUS_KEYBOARD]: isSelected() && currentInteractionMode() === "keyboard",
+          [ITEM_DATA_FOCUS_MOUSE]: isSelected() && currentInteractionMode() === "mouse",
+          [ITEM_DATA_FOCUSED]: isSelected(),
+        }),
       };
     },
   };
diff --git a/src/renderer/src/scenes/main-scene/MainScene.tsx b/src/renderer/src/scenes/main-scene/MainScene.tsx
index d5cf72a..817f7da 100644
--- a/src/renderer/src/scenes/main-scene/MainScene.tsx
+++ b/src/renderer/src/scenes/main-scene/MainScene.tsx
@@ -17,7 +17,7 @@ import { song } from "@renderer/components/song/song.utils";
 import { WindowsControls } from "@renderer/components/windows-control/WindowsControl";
 import { os } from "@renderer/lib/os";
 import { Layers3Icon } from "lucide-solid";
-import { Accessor, Component, createSignal, Match, Switch } from "solid-js";
+import { Accessor, Component, Match, Switch } from "solid-js";
 
 const MainScene: Component = () => {
   const { maxSidebarWidth, offsetFromPanel } = useMainResizableOptions();
@@ -79,22 +79,25 @@ const MainScene: Component = () => {
 };
 
 const Queue: Component = () => {
-  const [isOpen, setIsOpen] = createSignal(false);
-
   return (
     <Popover
       placement="bottom-end"
       offset={{
         mainAxis: 8,
       }}
-      onValueChange={setIsOpen}
-      isOpen={isOpen}
     >
-      <Popover.Anchor onClick={() => setIsOpen(true)} class="no-drag absolute right-2 top-2 z-10">
-        <Button size="square" variant="outlined" class="no-drag">
-          <Layers3Icon size={20} />
-        </Button>
-      </Popover.Anchor>
+      <Popover.Trigger>
+        {(triggerProps) => (
+          <Button
+            {...triggerProps}
+            class="no-drag absolute right-2 top-2 z-10"
+            size="square"
+            variant="outlined"
+          >
+            <Layers3Icon size={20} />
+          </Button>
+        )}
+      </Popover.Trigger>
 
       <Popover.Portal>
         <Popover.Overlay />