diff --git a/src/@types.d.ts b/src/@types.d.ts
index d2367d80..ade0c9b6 100644
--- a/src/@types.d.ts
+++ b/src/@types.d.ts
@@ -112,6 +112,7 @@ export type System = {
 // Settings table definition
 export type Settings = {
   volume: number;
+  sidebarWidth: number;
   audioDeviceId: string;
   osuSongsDir: string;
   "window.width": number;
diff --git a/src/main/index.ts b/src/main/index.ts
index e2e79acf..7d49031f 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -30,9 +30,10 @@ async function createWindow() {
     show: false,
     autoHideMenuBar: true,
     titleBarStyle: "hidden",
+    minWidth: 500,
     trafficLightPosition: {
       x: 20,
-      y: 20,
+      y: 28,
     },
     icon: getIcon(),
     webPreferences: {
diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index 794c5ec7..932af65f 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -1,5 +1,8 @@
 import { Scenes } from "../../@types";
+import NoticeContainer from "./components/notice/NoticeContainer";
+import Popover from "./components/popover/Popover";
 import "./keyboard-registers/initialize";
+import { fetchOs, os, setOs } from "./lib/os";
 import { TokenNamespace } from "./lib/tungsten/token";
 import ErrorScene from "./scenes/ErrorScene";
 import NoScene from "./scenes/NoScene";
@@ -7,7 +10,8 @@ import DirSelectScene from "./scenes/dir-select-scene/DirSelectScene";
 import LoadingScene from "./scenes/loading-scene/LoadingScene";
 import MainScene from "./scenes/main-scene/MainScene";
 import type { JSX } from "solid-js";
-import { createSignal, Match, onCleanup, onMount, Switch } from "solid-js";
+import { createMemo, createSignal, Match, onCleanup, onMount, Show, Switch } from "solid-js";
+import { sidebarWidth } from "./scenes/main-scene/main.utils";
 
 export default function App(): JSX.Element {
   const [scene, setScene] = createSignal<Scenes>("");
@@ -22,9 +26,12 @@ export default function App(): JSX.Element {
     setScene(event.detail.scene);
   };
 
-  onMount(() => {
+  onMount(async () => {
     window.api.listen("changeScene", setScene);
     window.addEventListener("changeScene", eventHandler);
+
+    // Sets current OS
+    setOs(await fetchOs());
   });
 
   onCleanup(() => {
@@ -32,21 +39,31 @@ export default function App(): JSX.Element {
     window.removeEventListener("changeScene", eventHandler);
   });
 
+  const hasRequiredOptions = createMemo(() => {
+    return typeof os() !== "undefined" && typeof sidebarWidth() !== "undefined";
+  });
+
   return (
-    <Switch fallback={<NoScene />}>
-      <Match when={scene() === "dir-select"}>
-        <DirSelectScene />
-      </Match>
-      <Match when={scene() === "main"}>
-        <MainScene />
-      </Match>
-      <Match when={scene() === "loading"}>
-        <LoadingScene />
-      </Match>
-      <Match when={scene() === "error"}>
-        <ErrorScene />
-      </Match>
-    </Switch>
+    <Show when={hasRequiredOptions()}>
+      <NoticeContainer />
+
+      <Switch fallback={<NoScene />}>
+        <Match when={scene() === "dir-select"}>
+          <DirSelectScene />
+        </Match>
+        <Match when={scene() === "main"}>
+          <MainScene />
+        </Match>
+        <Match when={scene() === "loading"}>
+          <LoadingScene />
+        </Match>
+        <Match when={scene() === "error"}>
+          <ErrorScene />
+        </Match>
+      </Switch>
+
+      <Popover.PortalMountStack />
+    </Show>
   );
 }
 
diff --git a/src/renderer/src/components/InfiniteScroller.tsx b/src/renderer/src/components/InfiniteScroller.tsx
index 94e13bc6..d309b609 100644
--- a/src/renderer/src/components/InfiniteScroller.tsx
+++ b/src/renderer/src/components/InfiniteScroller.tsx
@@ -223,7 +223,11 @@ const InfiniteScroller: Component<InfinityScrollerProps> = (props) => {
   });
 
   return (
-    <div class={"list flex flex-col gap-4 py-4"} ref={container} {...rest}>
+    <div
+      class="grid grid-cols-[repeat(auto-fit,_minmax(340px,_1fr))] gap-4 py-4 items-stretch"
+      ref={container}
+      {...rest}
+    >
       <Show when={show() === true} fallback={props.fallback ?? <div>No items...</div>}>
         <For each={elements()}>{(componentProps) => props.builder(componentProps)}</For>
       </Show>
diff --git a/src/renderer/src/components/button/Button.tsx b/src/renderer/src/components/button/Button.tsx
index 3947573e..fdcd5f2a 100644
--- a/src/renderer/src/components/button/Button.tsx
+++ b/src/renderer/src/components/button/Button.tsx
@@ -1,30 +1,27 @@
 import { cva, type VariantProps } from "class-variance-authority";
 import { Component, JSX, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
 
-const buttonStyles = cva(
-  ["rounded-lg", "transition-colors", "duration-200", "ease-in-out", "font-medium"],
-  {
-    variants: {
-      variant: {
-        primary: "bg-text text-thick-material hover:bg-text/80",
-        secondary: "bg-surface text-text ring-inset ring-1 ring-stroke hover:bg-surface/40",
-        outlined: "bg-transparent border-stroke border-solid text-text hover:bg-surface",
-        ghost: "rounded-full border-none text-xl hover:bg-surface",
-        link: "bg-transparent text-text hover:underline text-decoration-2 underline-offset-2",
-      },
-      size: {
-        medium: "px-4 py-2",
-        large: "px-7 py-2.5",
-        icon: "grid place-items-center aspect-square size-9 p-1 -m-2",
-      },
+const buttonStyles = cva(["rounded-lg transition-colors duration-200 ease font-medium"], {
+  variants: {
+    variant: {
+      primary: "bg-text text-thick-material hover:bg-text/80",
+      secondary: "bg-surface text-text hover:bg-surface/40 border-stroke border border-solid",
+      outlined: "bg-transparent border-stroke text-text hover:bg-surface border border-solid",
+      ghost: "border-transparent hover:bg-surface",
+      link: "bg-transparent text-text hover:underline text-decoration-2 underline-offset-2",
     },
-    defaultVariants: {
-      variant: "primary",
-      size: "medium",
+    size: {
+      medium: "px-4 py-2",
+      large: "px-7 py-2.5",
+      icon: "grid place-items-center aspect-square size-9 p-1 -m-2",
+      square: "grid place-items-center aspect-square h-10",
     },
   },
-);
+  defaultVariants: {
+    variant: "primary",
+    size: "medium",
+  },
+});
 
 type ButtonProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonStyles>;
 
@@ -33,7 +30,7 @@ const Button: Component<ButtonProps> = (props) => {
 
   return (
     <button
-      class={twMerge(buttonStyles({ variant: local.variant, size: local.size }), local.class)}
+      class={buttonStyles({ variant: local.variant, size: local.size, class: local.class })}
       {...others}
     >
       {local.children}
diff --git a/src/renderer/src/components/dropdown-list/DropdownList.tsx b/src/renderer/src/components/dropdown-list/DropdownList.tsx
new file mode 100644
index 00000000..a9fd016f
--- /dev/null
+++ b/src/renderer/src/components/dropdown-list/DropdownList.tsx
@@ -0,0 +1,65 @@
+import DropdownListItem from "./DropdownListItem";
+import { useRovingFocusGroup } from "@renderer/lib/roving-focus-group/rovingFocusGroup";
+import { createContext, createSignal, JSX, ParentComponent, useContext } from "solid-js";
+import { RawList } from "../raw-list/RawList";
+import { TokenNamespace } from "@renderer/lib/tungsten/token";
+
+export type Props = JSX.IntrinsicElements["div"];
+
+export type Context = ReturnType<typeof useProviderValue>;
+function useProviderValue() {
+  const namespace = new TokenNamespace();
+  let pointerLeaveTimeout: NodeJS.Timeout | undefined;
+
+  const [isHighlighted, setIsHighlighted] = createSignal(false);
+
+  const rovingFocusGroup = useRovingFocusGroup({
+    updateFocusOnHover: true,
+    onKeyUp: () => {
+      setIsHighlighted(true);
+    },
+  });
+
+  const handleItemPointerLeave = () => {
+    clearTimeout(pointerLeaveTimeout);
+    pointerLeaveTimeout = setTimeout(() => {
+      setIsHighlighted(false);
+    }, 60);
+  };
+
+  const handleItemPointerMove = () => {
+    setIsHighlighted(true);
+  };
+
+  return {
+    ...rovingFocusGroup,
+    handleItemPointerMove,
+    isHighlighted,
+    handleItemPointerLeave,
+    namespace,
+  };
+}
+
+export const DropdownListContext = createContext<Context>();
+const DropdownListRoot: ParentComponent<Props> = (props) => {
+  const value = useProviderValue();
+  return (
+    <DropdownListContext.Provider value={value}>
+      <RawList {...props} {...value.attrs} />
+    </DropdownListContext.Provider>
+  );
+};
+
+export function useDropdownList(): Context {
+  const state = useContext(DropdownListContext);
+  if (!state) {
+    throw new Error("useDropdownList needs to be used inisde of the `ListContext` component.");
+  }
+  return state;
+}
+
+const DropdownList = Object.assign(DropdownListRoot, {
+  Item: DropdownListItem,
+});
+
+export default DropdownList;
diff --git a/src/renderer/src/components/dropdown-list/DropdownListItem.tsx b/src/renderer/src/components/dropdown-list/DropdownListItem.tsx
new file mode 100644
index 00000000..68b9db60
--- /dev/null
+++ b/src/renderer/src/components/dropdown-list/DropdownListItem.tsx
@@ -0,0 +1,31 @@
+import { useDropdownList } from "./DropdownList";
+import { Component, onCleanup } from "solid-js";
+import { JSX } from "solid-js/jsx-runtime";
+import { RawList } from "../raw-list/RawList";
+
+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, {
+    onPointerMove: state.handleItemPointerMove,
+  });
+
+  onCleanup(() => {
+    state.namespace.destroy(value);
+  });
+
+  return (
+    <RawList.Item
+      onPointerLeave={state.handleItemPointerLeave}
+      tabIndex={tabIndex()}
+      classList={{
+        "bg-overlay/30": state.isHighlighted() && isSelected(),
+      }}
+      {...attrs}
+      {...props}
+    />
+  );
+};
+
+export default DropdownListItem;
diff --git a/src/renderer/src/components/dropdown/Dropdown.tsx b/src/renderer/src/components/dropdown/Dropdown.tsx
deleted file mode 100644
index 68ad3bb7..00000000
--- a/src/renderer/src/components/dropdown/Dropdown.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import Popover, { Props as PopoverProps } from "../popover/Popover";
-import DropdownList from "./DropdownList";
-import DropdownListItem from "./DropdownListItem";
-import DropdownSelectTrigger from "./DropdownSelectTrigger";
-import DropdownTrigger from "./DropdownTrigger";
-import { ParentComponent } from "solid-js";
-
-const DropdownRoot: ParentComponent<PopoverProps> = (props) => {
-  return <Popover placement="bottom-start" offset={10} {...props} />;
-};
-
-const Dropdown = Object.assign(DropdownRoot, {
-  SelectTrigger: DropdownSelectTrigger,
-  Trigger: DropdownTrigger,
-  List: DropdownList,
-  Item: DropdownListItem,
-});
-
-export default Dropdown;
diff --git a/src/renderer/src/components/dropdown/DropdownList.tsx b/src/renderer/src/components/dropdown/DropdownList.tsx
deleted file mode 100644
index 9e9cda55..00000000
--- a/src/renderer/src/components/dropdown/DropdownList.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import List from "../list/List";
-import { Props as ListProps } from "../list/List";
-import Popover from "../popover/Popover";
-import { ParentComponent } from "solid-js";
-import { Portal } from "solid-js/web";
-
-const DropdownList: ParentComponent<ListProps> = (props) => {
-  return (
-    <Portal>
-      <Popover.Overlay />
-      <Popover.Content class="flex w-fit min-w-48 flex-col gap-1 rounded-xl ring-stroke ring-1 ring-inset bg-thick-material p-2 backdrop-blur-md shadow-xl">
-        <List {...props} />
-      </Popover.Content>
-    </Portal>
-  );
-};
-
-export default DropdownList;
diff --git a/src/renderer/src/components/dropdown/DropdownListItem.tsx b/src/renderer/src/components/dropdown/DropdownListItem.tsx
deleted file mode 100644
index 2bda8918..00000000
--- a/src/renderer/src/components/dropdown/DropdownListItem.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import List from "../list/List";
-import { Props as ListItemProps } from "../list/ListItem";
-import { ParentComponent } from "solid-js";
-
-const DropdownListItem: ParentComponent<ListItemProps> = (props) => {
-  return (
-    <List.Item
-      class="flex items-center justify-between rounded-md py-1.5 px-2.5 hover:bg-surface data-[selected=true]:bg-overlay/35"
-      value={props.value}
-    >
-      <span>{props.children}</span>
-    </List.Item>
-  );
-};
-
-export default DropdownListItem;
diff --git a/src/renderer/src/components/dropdown/DropdownSelectTrigger.tsx b/src/renderer/src/components/dropdown/DropdownSelectTrigger.tsx
deleted file mode 100644
index fd1ea058..00000000
--- a/src/renderer/src/components/dropdown/DropdownSelectTrigger.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import Popover from "../popover/Popover";
-import { ChevronDownIcon } from "lucide-solid";
-import { Component, JSX } from "solid-js";
-
-type Props = JSX.IntrinsicElements["button"];
-const DropdownSelectTrigger: Component<Props> = (props) => {
-  return (
-    <Popover.Trigger class="flex items-center justify-between gap-2 rounded bg-surface px-4 py-2.5 hover:bg-overlay/50">
-      <span class="text-base leading-6">{props.children}</span>
-      <ChevronDownIcon size={20} class="text-subtext" />
-    </Popover.Trigger>
-  );
-};
-
-export default DropdownSelectTrigger;
diff --git a/src/renderer/src/components/dropdown/DropdownTrigger.tsx b/src/renderer/src/components/dropdown/DropdownTrigger.tsx
deleted file mode 100644
index 44c28114..00000000
--- a/src/renderer/src/components/dropdown/DropdownTrigger.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import Popover from "../popover/Popover";
-import { ChevronDownIcon } from "lucide-solid";
-import { Component, JSX } from "solid-js";
-
-type Props = JSX.IntrinsicElements["button"];
-const DropdownTrigger: Component<Props> = (props) => {
-  return (
-    <Popover.Trigger class="flex items-center gap-2 rounded-full border-solid border-stroke px-4 py-0.5 hover:bg-surface">
-      <ChevronDownIcon size={20} class="text-subtext" />
-      <span class="text-base">{props.children}</span>
-    </Popover.Trigger>
-  );
-};
-
-export default DropdownTrigger;
diff --git a/src/renderer/src/components/input/Input.tsx b/src/renderer/src/components/input/Input.tsx
new file mode 100644
index 00000000..8458103c
--- /dev/null
+++ b/src/renderer/src/components/input/Input.tsx
@@ -0,0 +1,34 @@
+import { cva, VariantProps } from "class-variance-authority";
+import { Component, JSX, splitProps } from "solid-js";
+
+export const inputStyles = cva(
+  [
+    "ring-offset-background placeholder:text-subtext flex h-[42px] w-full rounded-lg px-3.5 py-2 disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:bg-surface",
+  ],
+  {
+    variants: {
+      variant: {
+        primary: "",
+        outlined:
+          "border border-stroke bg-transparent border-solid block focus-visible:border-grey-400",
+      },
+    },
+    defaultVariants: {
+      variant: "outlined",
+    },
+  },
+);
+
+type Props = JSX.IntrinsicElements["input"] & VariantProps<typeof inputStyles>;
+export const Input: Component<Props> = (_props) => {
+  const [props, rest] = splitProps(_props, ["class", "variant"]);
+  return (
+    <input
+      {...rest}
+      class={inputStyles({
+        variant: props.variant,
+        class: props.class,
+      })}
+    />
+  );
+};
diff --git a/src/renderer/src/components/list/List.tsx b/src/renderer/src/components/list/List.tsx
deleted file mode 100644
index 6fe5ac59..00000000
--- a/src/renderer/src/components/list/List.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import ListItem from "./ListItem";
-import useControllableState from "@renderer/lib/controllable-state";
-import { Accessor, createContext, ParentComponent, useContext } from "solid-js";
-
-const DEFAULT_SELECTED_VALUE = "";
-
-export type Props = {
-  defaultValue?: string;
-  value?: Accessor<string>;
-  onValueChange?: (newValue: string) => void;
-};
-
-export type Context = ReturnType<typeof useProviderValue>;
-function useProviderValue(props: Props) {
-  const [selectedValue, setSelectedValue] = useControllableState({
-    defaultProp: props.defaultValue || DEFAULT_SELECTED_VALUE,
-    onChange: props.onValueChange,
-    prop: props.value,
-  });
-
-  return {
-    selectedValue,
-    setSelectedValue,
-  };
-}
-
-export const ListContext = createContext<Context>();
-const ListRoot: ParentComponent<Props> = (props) => {
-  const value = useProviderValue(props);
-  return <ListContext.Provider value={value}>{props.children}</ListContext.Provider>;
-};
-
-export function useList(): Context {
-  const state = useContext(ListContext);
-  if (!state) {
-    throw new Error("useList needs to be used inisde of the `ListContext` component.");
-  }
-  return state;
-}
-
-const List = Object.assign(ListRoot, {
-  Item: ListItem,
-});
-
-export default List;
diff --git a/src/renderer/src/components/list/ListItem.tsx b/src/renderer/src/components/list/ListItem.tsx
deleted file mode 100644
index b2888dd7..00000000
--- a/src/renderer/src/components/list/ListItem.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { useList } from "./List";
-import { Component } from "solid-js";
-import { JSX } from "solid-js/jsx-runtime";
-
-export type Props = JSX.IntrinsicElements["button"] & {
-  value: string;
-};
-const ListItem: Component<Props> = (props) => {
-  const state = useList();
-  return (
-    <button
-      data-selected={state.selectedValue() === props.value}
-      onClick={() => state.setSelectedValue(props.value)}
-      {...props}
-    />
-  );
-};
-
-export default ListItem;
diff --git a/src/renderer/src/components/notice/Notice.tsx b/src/renderer/src/components/notice/Notice.tsx
index a59e3625..a54dc7f3 100644
--- a/src/renderer/src/components/notice/Notice.tsx
+++ b/src/renderer/src/components/notice/Notice.tsx
@@ -10,7 +10,7 @@ const bgStyle = cva([], {
     variant: {
       success: "bg-green after:bg-green",
       neutral: "bg-overlay after:bg-overlay",
-      error: "bg-red after:bg-red",
+      error: "bg-danger after:bg-danger",
     },
   },
   defaultVariants: {
@@ -23,7 +23,7 @@ const textStyle = cva([], {
     variant: {
       success: "text-green",
       neutral: "text-subtext",
-      error: "text-red",
+      error: "text-danger",
     },
   },
   defaultVariants: {
diff --git a/src/renderer/src/components/popover/Popover.tsx b/src/renderer/src/components/popover/Popover.tsx
index 6de7b087..c723cd2c 100644
--- a/src/renderer/src/components/popover/Popover.tsx
+++ b/src/renderer/src/components/popover/Popover.tsx
@@ -1,13 +1,16 @@
+import { Token, TokenNamespace } from "@renderer/lib/tungsten/token";
 import PopoverContent from "./PopoverContent";
 import PopoverOverlay from "./PopoverOverlay";
 import PopoverTrigger from "./PopoverTrigger";
-import { PopoverAnchor } from "./PopoverTrigger";
+import PopoverAnchor from "./PopoverAnchor";
+
 import "./styles.css";
 import {
   computePosition,
   ComputePositionReturn,
   flip,
   FlipOptions,
+  Middleware,
   offset,
   OffsetOptions,
   Placement,
@@ -15,24 +18,39 @@ import {
   ShiftOptions,
 } from "@floating-ui/dom";
 import useControllableState from "@renderer/lib/controllable-state";
-import { createSignal, createContext, useContext, ParentComponent, Accessor } from "solid-js";
+import {
+  createSignal,
+  createContext,
+  useContext,
+  ParentComponent,
+  Accessor,
+  createEffect,
+  onMount,
+  onCleanup,
+} from "solid-js";
+import { PopoverPortal, PopoverPortalMountStack } from "./PopoverPortal";
 
 export const DEFAULT_POPOVER_OPEN = false;
 
 export type Props = {
   offset?: OffsetOptions;
-  flip?: FlipOptions;
-  shift?: ShiftOptions;
+  flip?: true | FlipOptions;
+  shift?: true | ShiftOptions;
   placement?: Placement;
-  mousePos?: Accessor<[number, number]>; // [x, y]
+  position?: Accessor<[number, number] | undefined>; // [x, y]
   defaultProp?: boolean;
   isOpen?: Accessor<boolean>;
   onValueChange?: (newOpen: boolean) => void;
 };
 
+export const [popoverStack, setPopoverStack] = createSignal<Token[]>([]);
+const stackIds = new TokenNamespace();
+
 export type Context = ReturnType<typeof useProviderValue>;
 
 function useProviderValue(props: Props) {
+  let resizeObserver: ResizeObserver | undefined;
+
   const [isOpen, setIsOpen] = useControllableState<boolean>({
     defaultProp: props.defaultProp || DEFAULT_POPOVER_OPEN,
     onChange: props.onValueChange,
@@ -42,35 +60,65 @@ function useProviderValue(props: Props) {
   const [position, setPosition] = createSignal<ComputePositionReturn | null>(null);
   const [triggerRef, _setTriggerRef] = createSignal<HTMLElement | null>(null);
   const [contentRef, _setContentRef] = createSignal<HTMLDivElement | null>(null);
+  const [id, setId] = createSignal<string>("");
+
+  onMount(() => {
+    window.addEventListener("resize", handleResize);
+
+    onCleanup(() => {
+      window.removeEventListener("resize", handleResize);
+    });
+  });
+
+  createEffect(() => {
+    const triggerElement = triggerRef();
+    if (!triggerElement) {
+      return;
+    }
+
+    if (typeof resizeObserver !== "undefined") {
+      // Disconnects old resize observer if the trigger was chaneged
+      resizeObserver.disconnect();
+      resizeObserver = undefined;
+    }
+
+    resizeObserver = new ResizeObserver(handleResize);
+    resizeObserver.observe(triggerElement);
+
+    onCleanup(() => {
+      resizeObserver?.disconnect();
+    });
+  });
 
   const setTriggerRef = (element: HTMLElement) => {
     _setTriggerRef(element);
-    listenResize();
+    handleResize();
   };
 
   const setContentRef = (element: HTMLDivElement) => {
     _setContentRef(element);
-    listenResize();
+    handleResize();
   };
 
   let lastMousePos: [number, number];
   const useCustomCoords = {
     name: "useCustomCoords",
     fn() {
-      if (
-        props.mousePos !== undefined &&
-        props.mousePos() !== lastMousePos &&
-        props.mousePos()[0] !== 0 &&
-        props.mousePos()[1] !== 0
-      ) {
-        lastMousePos = props.mousePos();
-        return { x: lastMousePos[0], y: lastMousePos[1] };
+      const position = props.position?.();
+      if (position === undefined || position === lastMousePos) {
+        return {};
+      }
+
+      const [x, y] = position;
+      if (x === 0 || y === 0) {
+        return {};
       }
-      return {};
+
+      return { x, y };
     },
   };
 
-  const listenResize = () => {
+  const handleResize = () => {
     const trigger = triggerRef();
     const content = contentRef();
 
@@ -78,22 +126,49 @@ function useProviderValue(props: Props) {
       return;
     }
 
+    const middleware: Middleware[] = [offset(props.offset)];
+    if (typeof props.position !== "undefined") {
+      middleware.push(useCustomCoords);
+    }
+    if (typeof props.flip !== "undefined") {
+      middleware.push(flip(props.flip === true ? undefined : props.flip));
+    }
+    if (typeof props.shift !== "undefined") {
+      middleware.push(shift(props.shift === true ? undefined : props.shift));
+    }
+
     computePosition(trigger, content, {
       placement: props.placement,
       strategy: "fixed",
-      middleware: [
-        props.mousePos !== undefined && useCustomCoords,
-        offset(props.offset),
-        props.shift && shift(props.shift),
-        props.flip && flip(props.flip),
-      ],
+      middleware,
     }).then(setPosition);
   };
 
+  createEffect(() => {
+    if (isOpen()) {
+      const newId = stackIds.create();
+      setPopoverStack((p) => [...p, newId]);
+      setId(newId);
+    } else {
+      stackIds.destroy(id());
+      setPopoverStack((p) => p.filter((popoverId) => popoverId !== id()));
+      setId("");
+    }
+
+    onCleanup(() => {
+      stackIds.destroy(id());
+    });
+  });
+
   return {
+    id,
     isOpen,
-    open: () => setIsOpen(true),
-    close: () => setIsOpen(false),
+    open: () => {
+      setIsOpen(true);
+    },
+    close: () => {
+      setIsOpen(false);
+    },
     toggle: () => setIsOpen((o) => !o),
     position,
     setPosition,
@@ -122,6 +197,8 @@ export function usePopover(): Context {
 const Popover = Object.assign(PopoverRoot, {
   Anchor: PopoverAnchor,
   Content: PopoverContent,
+  Portal: PopoverPortal,
+  PortalMountStack: PopoverPortalMountStack,
   Trigger: PopoverTrigger,
   Overlay: PopoverOverlay,
 });
diff --git a/src/renderer/src/components/popover/PopoverAnchor.tsx b/src/renderer/src/components/popover/PopoverAnchor.tsx
new file mode 100644
index 00000000..1ab5b05e
--- /dev/null
+++ b/src/renderer/src/components/popover/PopoverAnchor.tsx
@@ -0,0 +1,10 @@
+import { Component, JSX } from "solid-js";
+import { usePopover } from "./Popover";
+
+export type PopoverAnchorProps = JSX.IntrinsicElements["div"];
+const PopoverAnchor: Component<PopoverAnchorProps> = (props) => {
+  const state = usePopover();
+  return <div ref={state.setTriggerRef} {...props} />;
+};
+
+export default PopoverAnchor;
diff --git a/src/renderer/src/components/popover/PopoverContent.tsx b/src/renderer/src/components/popover/PopoverContent.tsx
index fa0ba6ba..623c2c2b 100644
--- a/src/renderer/src/components/popover/PopoverContent.tsx
+++ b/src/renderer/src/components/popover/PopoverContent.tsx
@@ -1,7 +1,8 @@
-import { usePopover } from "./Popover";
+import { cn, sn } from "@renderer/lib/css.utils";
+import { popoverStack, usePopover } from "./Popover";
 import { ComputePositionReturn } from "@floating-ui/dom";
 import createFocusTrap from "solid-focus-trap";
-import { Component, Show } from "solid-js";
+import { Component, createMemo, onCleanup, onMount, Show } from "solid-js";
 import { JSX } from "solid-js/jsx-runtime";
 
 function stylesFromPosition(position: ComputePositionReturn | null): JSX.CSSProperties | undefined {
@@ -15,22 +16,51 @@ function stylesFromPosition(position: ComputePositionReturn | null): JSX.CSSProp
   };
 }
 
-type Props = JSX.IntrinsicElements["div"];
+export type Props = JSX.IntrinsicElements["div"];
 const PopoverContent: Component<Props> = (props) => {
   const state = usePopover();
 
+  const isLastPopoupOpen = createMemo(() => {
+    return state.isOpen() && popoverStack().at(-1) === state.id();
+  });
+
   createFocusTrap({
     element: state.contentRef,
-    enabled: state.isOpen,
+    enabled: isLastPopoupOpen,
+  });
+
+  onMount(() => {
+    const handleKeyUp = (e: KeyboardEvent) => {
+      if (!isLastPopoupOpen()) {
+        return;
+      }
+
+      switch (e.key) {
+        case "Escape":
+          state.close();
+          break;
+
+        default:
+          break;
+      }
+    };
+    window.addEventListener("keydown", handleKeyUp);
+
+    onCleanup(() => {
+      window.removeEventListener("keydown", handleKeyUp);
+    });
   });
 
   return (
     <Show when={state.isOpen()}>
       <div
         {...props}
-        class={`popover-content ${props.class}`}
+        class={cn(
+          "popover-content rounded-lg p-2 border border-stroke bg-thick-material backdrop-blur-md",
+          props.class,
+        )}
         ref={state.setContentRef}
-        style={stylesFromPosition(state.position())}
+        style={sn(stylesFromPosition(state.position()), props.style)}
       />
     </Show>
   );
diff --git a/src/renderer/src/components/popover/PopoverPortal.tsx b/src/renderer/src/components/popover/PopoverPortal.tsx
new file mode 100644
index 00000000..50b1e4fd
--- /dev/null
+++ b/src/renderer/src/components/popover/PopoverPortal.tsx
@@ -0,0 +1,28 @@
+import { popoverStack, usePopover } from "./Popover";
+import { Component, For, ParentComponent, Show } from "solid-js";
+import { Portal } from "solid-js/web";
+
+export const PopoverPortal: ParentComponent = (props) => {
+  const state = usePopover();
+  return (
+    <Show when={state.isOpen() && state.id()}>
+      <Portal mount={document.getElementById(state.id())!}>{props.children}</Portal>
+    </Show>
+  );
+};
+
+export const PopoverPortalMountStack: Component = () => {
+  return (
+    <For each={popoverStack()}>
+      {(id, index) => (
+        <div
+          style={{
+            "z-index": 100 + index(),
+            position: "relative",
+          }}
+          id={id}
+        />
+      )}
+    </For>
+  );
+};
diff --git a/src/renderer/src/components/popover/PopoverTrigger.tsx b/src/renderer/src/components/popover/PopoverTrigger.tsx
index 5b18756c..ce8d2e51 100644
--- a/src/renderer/src/components/popover/PopoverTrigger.tsx
+++ b/src/renderer/src/components/popover/PopoverTrigger.tsx
@@ -2,13 +2,14 @@ import { usePopover } from "./Popover";
 import { Component } from "solid-js";
 import { JSX } from "solid-js/jsx-runtime";
 
-type Props = JSX.IntrinsicElements["button"];
+export type Props = JSX.IntrinsicElements["button"];
 const PopoverTrigger: Component<Props> = (props) => {
   const state = usePopover();
 
   return (
     <button
       ref={state.setTriggerRef}
+      data-open={state.isOpen()}
       onClick={() => {
         state?.toggle();
       }}
@@ -17,10 +18,4 @@ const PopoverTrigger: Component<Props> = (props) => {
   );
 };
 
-type PopoverAnchorProps = JSX.IntrinsicElements["div"];
-export const PopoverAnchor: Component<PopoverAnchorProps> = (props) => {
-  const state = usePopover();
-  return <div ref={state.setTriggerRef} {...props} />;
-};
-
 export default PopoverTrigger;
diff --git a/src/renderer/src/components/raw-list/RawList.tsx b/src/renderer/src/components/raw-list/RawList.tsx
new file mode 100644
index 00000000..e38ae543
--- /dev/null
+++ b/src/renderer/src/components/raw-list/RawList.tsx
@@ -0,0 +1,24 @@
+import { cn } from "@renderer/lib/css.utils";
+import { Component, JSX, splitProps } from "solid-js";
+
+export const RawListContainer: Component<JSX.IntrinsicElements["div"]> = (_props) => {
+  const [props, rest] = splitProps(_props, ["class"]);
+  return <div class={cn("flex flex-col gap-0.5", props.class)} {...rest} />;
+};
+export const RawListItem: Component<JSX.IntrinsicElements["button"]> = (_props) => {
+  const [props, rest] = splitProps(_props, ["class"]);
+  return (
+    <button
+      class={cn(
+        "flex items-center justify-between rounded-md px-2 py-1.5 disabled:opacity-50 disabled:pointer-events-none focus:outline-none",
+        props.class,
+      )}
+      {...rest}
+    />
+  );
+};
+
+/** List component with only styles */
+export const RawList = Object.assign(RawListContainer, {
+  Item: RawListItem,
+});
diff --git a/src/renderer/src/components/resizable-panel/DragHandler.tsx b/src/renderer/src/components/resizable-panel/DragHandler.tsx
new file mode 100644
index 00000000..ea1b0e27
--- /dev/null
+++ b/src/renderer/src/components/resizable-panel/DragHandler.tsx
@@ -0,0 +1,68 @@
+import { Component } from "solid-js";
+import { useResizablePanel } from "./ResizablePanel";
+import { cn } from "@renderer/lib/css.utils";
+
+type DragHandlerProps = {
+  class?: string;
+};
+export const DragHandler: Component<DragHandlerProps> = (props) => {
+  const state = useResizablePanel();
+
+  return (
+    <div
+      tabIndex={0}
+      onPointerDown={(event) => {
+        const target = event.target as HTMLElement;
+        target.setPointerCapture(event.pointerId);
+        event.preventDefault();
+
+        state.handlePointerStart(event);
+      }}
+      onPointerMove={(event) => {
+        const target = event.target as HTMLElement;
+        if (!target.hasPointerCapture(event.pointerId)) {
+          return;
+        }
+
+        state.handlePointerMove(event);
+      }}
+      onPointerUp={(event) => {
+        const target = event.target as HTMLElement;
+        if (target.hasPointerCapture(event.pointerId)) {
+          target.releasePointerCapture(event.pointerId);
+          state.handlePointerEnd();
+        }
+      }}
+      onKeyUp={() => {
+        state.handleKeyUp();
+      }}
+      onKeyDown={(event) => {
+        state.handleKeyDown();
+
+        switch (event.key) {
+          case "ArrowLeft":
+            state.handleStep("left");
+            break;
+          case "ArrowRight":
+            state.handleStep("right");
+            break;
+          case "Home":
+            state.handleHomeKeyDown();
+            break;
+          case "End":
+            state.handleEndKeyDown();
+            break;
+
+          default:
+            break;
+        }
+      }}
+      class={cn(
+        "opacity-0 hover:opacity-100 focus:opacity-100 h-full w-4 translate-x-[-50%] cursor-w-resize flex flex-col items-center justify-center",
+        props.class,
+      )}
+    >
+      <div class="bg-white/60 flex-1 w-0.5" />
+    </div>
+  );
+};
diff --git a/src/renderer/src/components/resizable-panel/ResizablePanel.tsx b/src/renderer/src/components/resizable-panel/ResizablePanel.tsx
new file mode 100644
index 00000000..14f626db
--- /dev/null
+++ b/src/renderer/src/components/resizable-panel/ResizablePanel.tsx
@@ -0,0 +1,130 @@
+import { Accessor, createContext, createMemo, ParentComponent, useContext } from "solid-js";
+import { DragHandler } from "./DragHandler";
+import useControllableState from "@renderer/lib/controllable-state";
+import { DOMElement } from "solid-js/jsx-runtime";
+import { clamp } from "@renderer/lib/tungsten/math";
+
+const DEFAULT_RESIZABLE_PANEL_VALUE = 100;
+const DEFAULT_MIN = 0;
+const DEFAULT_MAX = Infinity;
+
+type Event = PointerEvent & {
+  currentTarget: HTMLDivElement;
+  target: DOMElement;
+};
+
+export type Props = {
+  min?: number;
+  max?: number;
+
+  offsetFromPanel?: number;
+
+  defaultValue?: number;
+  value?: Accessor<number>;
+  onValueChange?: (newValue: number) => void;
+  onValueCommit?: (value: number) => void;
+  onValueStart?: () => void;
+};
+
+export type Context = ReturnType<typeof useProviderValue>;
+function useProviderValue(props: Props) {
+  let startDragValue: number | undefined;
+  const [value, setValue] = useControllableState({
+    defaultProp: props.defaultValue ?? DEFAULT_RESIZABLE_PANEL_VALUE,
+    prop: props.value,
+    onChange: props.onValueChange,
+  });
+
+  const min = createMemo(() => props.min ?? DEFAULT_MIN);
+  const max = createMemo(() => props.max ?? DEFAULT_MAX);
+
+  const getValueFromPointer = (pointerPosition: number) => {
+    if (!startDragValue) {
+      return;
+    }
+
+    const value = pointerPosition - (props.offsetFromPanel ?? 0);
+    return clamp(min(), max(), value);
+  };
+
+  const handlePointerStart = (event: Event) => {
+    startDragValue = value();
+    const newValue = getValueFromPointer(event.clientX);
+    if (typeof newValue === "undefined") {
+      return;
+    }
+
+    setValue(newValue);
+    props.onValueStart?.();
+  };
+  const handlePointerMove = (event: Event) => {
+    const newValue = getValueFromPointer(event.clientX);
+    if (typeof newValue === "undefined") {
+      return;
+    }
+
+    setValue(newValue);
+  };
+  const handlePointerEnd = () => {
+    props.onValueCommit?.(value());
+  };
+
+  const handleKeyDown = () => {
+    props.onValueStart?.();
+  };
+
+  const handleKeyUp = () => {
+    props.onValueCommit?.(value());
+  };
+
+  const handleStep = (direction: "left" | "right") => {
+    const stepDirection = direction === "left" ? -1 : 1;
+    const step = (max() / 100) * 5;
+    const stepInDirection = step * stepDirection;
+    setValue((value) => clamp(min(), max(), value + stepInDirection));
+  };
+
+  const handleHomeKeyDown = () => {
+    setValue(min());
+  };
+
+  const handleEndKeyDown = () => {
+    setValue(max());
+  };
+
+  return {
+    value,
+    handlePointerStart,
+    handlePointerMove,
+    handlePointerEnd,
+    handleStep,
+    handleHomeKeyDown,
+    handleEndKeyDown,
+    handleKeyDown,
+    handleKeyUp,
+  };
+}
+
+export const ResizablePanelContext = createContext<Context>();
+const ResizablePanelRoot: ParentComponent<Props> = (props) => {
+  const value = useProviderValue(props);
+  return (
+    <ResizablePanelContext.Provider value={value}>{props.children}</ResizablePanelContext.Provider>
+  );
+};
+
+export function useResizablePanel(): Context {
+  const state = useContext(ResizablePanelContext);
+  if (!state) {
+    throw new Error(
+      "useResizablePanel needs to be used inisde of the `ResizablePanelContext` component.",
+    );
+  }
+  return state;
+}
+
+const ResizablePanel = Object.assign(ResizablePanelRoot, {
+  DragHandler,
+});
+
+export default ResizablePanel;
diff --git a/src/renderer/src/components/select/Select.tsx b/src/renderer/src/components/select/Select.tsx
new file mode 100644
index 00000000..d5d88495
--- /dev/null
+++ b/src/renderer/src/components/select/Select.tsx
@@ -0,0 +1,76 @@
+import { Component, createMemo, ParentComponent, splitProps } from "solid-js";
+import Popover, { Props as PopoverProps, usePopover } from "../popover/Popover";
+import { Props as PopoverTriggerProps } from "../popover/PopoverTrigger";
+import { ChevronsUpDownIcon } from "lucide-solid";
+import SelectableList, { Props as ListProps } from "../selectable-list/SelectableList";
+import SelectableListItem, { Props as ListItemProps } from "../selectable-list/SelectableListItem";
+import { cn } from "@renderer/lib/css.utils";
+import { inputStyles } from "../input/Input";
+import { VariantProps } from "class-variance-authority";
+
+export const SelectContainer: ParentComponent<PopoverProps> = (props) => {
+  return (
+    <Popover
+      offset={{
+        mainAxis: 4,
+      }}
+      placement="bottom-start"
+      {...props}
+    />
+  );
+};
+
+type Props = PopoverTriggerProps & VariantProps<typeof inputStyles>;
+export const SelectTrigger: ParentComponent<Props> = (_props) => {
+  const [props, rest] = splitProps(_props, ["class", "variant", "children"]);
+  return (
+    <Popover.Trigger
+      {...rest}
+      class={cn(
+        inputStyles({ variant: props.variant, class: props.class }),
+        "flex items-center justify-between gap-2 box-border h-auto min-h-[42px] hover:bg-surface data-[open='true']:bg-surface",
+      )}
+    >
+      <span class="text-base leading-6">{props.children}</span>
+      <ChevronsUpDownIcon size={20} class="text-subtext flex-shrink-0" />
+    </Popover.Trigger>
+  );
+};
+
+export const SelectContent: Component<ListProps> = (props) => {
+  const state = usePopover();
+
+  const width = createMemo(() => {
+    state.isOpen();
+    const trigger = state.triggerRef();
+    if (!trigger) {
+      return "0px";
+    }
+
+    return `${trigger.getBoundingClientRect().width}px`;
+  });
+
+  return (
+    <Popover.Portal>
+      <Popover.Overlay />
+      <Popover.Content
+        style={{
+          width: width(),
+        }}
+      >
+        <SelectableList {...props} />
+      </Popover.Content>
+    </Popover.Portal>
+  );
+};
+export const SelectOption: Component<ListItemProps> = (props) => {
+  return <SelectableListItem {...props} />;
+};
+
+const Select = Object.assign(SelectContainer, {
+  Trigger: SelectTrigger,
+  Content: SelectContent,
+  Option: SelectOption,
+});
+
+export default Select;
diff --git a/src/renderer/src/components/selectable-list/SelectableList.tsx b/src/renderer/src/components/selectable-list/SelectableList.tsx
new file mode 100644
index 00000000..a2c37158
--- /dev/null
+++ b/src/renderer/src/components/selectable-list/SelectableList.tsx
@@ -0,0 +1,61 @@
+import SelectableListItem from "./SelectableListItem";
+import { useRovingFocusGroup } from "@renderer/lib/roving-focus-group/rovingFocusGroup";
+import { Accessor, createContext, JSX, ParentComponent, splitProps, useContext } from "solid-js";
+import useControllableState from "@renderer/lib/controllable-state";
+import { RawList } from "../raw-list/RawList";
+
+const DEFAULT_SELECTED_VALUE = "";
+
+export type SelectableListOptions = {
+  defaultValue?: string;
+  value?: Accessor<string>;
+  onValueChange?: (newValue: string) => void;
+};
+
+export type Props = JSX.IntrinsicElements["div"] & SelectableListOptions;
+
+export type Context = ReturnType<typeof useProviderValue>;
+function useProviderValue(props: SelectableListOptions) {
+  const rovingFocusGroup = useRovingFocusGroup({
+    updateFocusOnHover: true,
+    defaultProp: props.value?.() ?? props.defaultValue,
+  });
+  const [selectedItem, setSelectedItem] = useControllableState({
+    defaultProp: props.defaultValue || DEFAULT_SELECTED_VALUE,
+    onChange: props.onValueChange,
+    prop: props.value,
+  });
+
+  return {
+    ...rovingFocusGroup,
+    selectedItem,
+    setSelectedItem,
+  };
+}
+
+export const SelectableListContext = createContext<Context>();
+const SelectableListRoot: ParentComponent<Props> = (_props) => {
+  const [props, rest] = splitProps(_props, ["value", "onValueChange", "defaultValue", "children"]);
+  const value = useProviderValue(props);
+  return (
+    <SelectableListContext.Provider value={value}>
+      <RawList {...rest} {...value.attrs}>
+        {props.children}
+      </RawList>
+    </SelectableListContext.Provider>
+  );
+};
+
+export function useSelectableList(): Context {
+  const state = useContext(SelectableListContext);
+  if (!state) {
+    throw new Error("useSelectableList needs to be used inisde of the `ListContext` component.");
+  }
+  return state;
+}
+
+const SelectableList = Object.assign(SelectableListRoot, {
+  Item: SelectableListItem,
+});
+
+export default SelectableList;
diff --git a/src/renderer/src/components/selectable-list/SelectableListItem.tsx b/src/renderer/src/components/selectable-list/SelectableListItem.tsx
new file mode 100644
index 00000000..087e368a
--- /dev/null
+++ b/src/renderer/src/components/selectable-list/SelectableListItem.tsx
@@ -0,0 +1,51 @@
+import { useSelectableList } from "./SelectableList";
+import { Component, createMemo, Show, splitProps } from "solid-js";
+import { JSX } from "solid-js/jsx-runtime";
+import { CheckIcon } from "lucide-solid";
+import { RawList } from "../raw-list/RawList";
+
+export type Props = JSX.IntrinsicElements["button"] & {
+  value: string;
+  onSelectedByClick?: () => void;
+};
+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, {
+    onSelectedByClick: () => {
+      props.onSelectedByClick?.();
+      if (!props.value) {
+        return;
+      }
+
+      state.setSelectedItem(props.value);
+    },
+  });
+
+  const isSelected = createMemo(() => {
+    return state.selectedItem() === props.value;
+  });
+
+  return (
+    <RawList.Item
+      tabIndex={tabIndex()}
+      classList={{
+        "bg-overlay/30": isFocused(),
+      }}
+      {...attrs}
+      {...rest}
+    >
+      {props.children}
+      <Show when={isSelected()}>
+        <CheckIcon size={14} />
+      </Show>
+    </RawList.Item>
+  );
+};
+
+export default SelectableListItem;
diff --git a/src/renderer/src/components/settings/Settings.tsx b/src/renderer/src/components/settings/Settings.tsx
index 97ddd0e2..90c587bd 100644
--- a/src/renderer/src/components/settings/Settings.tsx
+++ b/src/renderer/src/components/settings/Settings.tsx
@@ -1,12 +1,12 @@
 import { cn } from "../../lib/css.utils";
-import Dropdown from "../dropdown/Dropdown";
 import { changeAudioDevice } from "@renderer/components/song/song.utils";
 import { GlobeIcon, LucideIcon, Volume2Icon } from "lucide-solid";
 import { Component, createEffect, createSignal, For, JSX, onMount } from "solid-js";
+import Select from "../select/Select";
 
 const Settings: Component = () => {
   return (
-    <div class="flex flex-col gap-10 p-8">
+    <div class="flex flex-col gap-10 px-5 py-8">
       <SettingsSection title="General" Icon={GlobeIcon}>
         Empty
       </SettingsSection>
@@ -73,23 +73,31 @@ const AudioDeviceSetting: Component = () => {
 
   const handleValueChange = (newSelectedOption: string) => {
     setSelectedAudioDevice(newSelectedOption);
-    setIsPopoverOpen(false);
     audioDevices().get(newSelectedOption)?.();
   };
 
   return (
     <Setting name="audio-device" label="Choose audio device">
-      <Dropdown isOpen={isPopoverOpen} onValueChange={setIsPopoverOpen}>
-        <Dropdown.SelectTrigger class="w-full rounded border border-stroke bg-surface px-2 py-1 text-text focus:outline-none focus:ring-2 focus:ring-overlay">
+      <Select isOpen={isPopoverOpen} onValueChange={setIsPopoverOpen}>
+        <Select.Trigger variant="outlined">
           {selectedAudioDevice() || "No device selected"}
-        </Dropdown.SelectTrigger>
+        </Select.Trigger>
 
-        <Dropdown.List value={selectedAudioDevice} onValueChange={handleValueChange}>
+        <Select.Content value={selectedAudioDevice} onValueChange={handleValueChange}>
           <For each={Array.from(audioDevices().keys())}>
-            {(audioDevice) => <Dropdown.Item value={audioDevice}>{audioDevice}</Dropdown.Item>}
+            {(audioDevice) => (
+              <Select.Option
+                onSelectedByClick={() => {
+                  setIsPopoverOpen(false);
+                }}
+                value={audioDevice}
+              >
+                {audioDevice}
+              </Select.Option>
+            )}
           </For>
-        </Dropdown.List>
-      </Dropdown>
+        </Select.Content>
+      </Select>
     </Setting>
   );
 };
diff --git a/src/renderer/src/components/slider/Slider.tsx b/src/renderer/src/components/slider/Slider.tsx
index 2b546a0e..c0bc7ab5 100644
--- a/src/renderer/src/components/slider/Slider.tsx
+++ b/src/renderer/src/components/slider/Slider.tsx
@@ -108,7 +108,6 @@ export const SliderContext = createContext<Context>();
 const SliderRoot: ParentComponent<Props> = (props) => {
   const sliderContext = useProviderValue(props);
   const [slider, setSlider] = createSignal<HTMLElement>();
-  const [lastRect, setLastRect] = createSignal<DOMRect | undefined>();
 
   const getValueFromPointer = (pointerPosition: number) => {
     const sliderElement = slider();
@@ -116,16 +115,13 @@ const SliderRoot: ParentComponent<Props> = (props) => {
       return;
     }
 
-    const sliderRect = sliderElement.getBoundingClientRect();
-    const rect = lastRect() || sliderRect;
-
+    const rect = sliderElement.getBoundingClientRect();
     const min = sliderContext.min;
     const max = sliderContext.max;
     const input: [number, number] = [0, rect.width];
     const output: [number, number] = [min, max];
     const value = linearScale(input, output);
 
-    setLastRect(sliderRect);
     return clamp(min, max, value(pointerPosition - rect.left));
   };
 
diff --git a/src/renderer/src/components/slider/SliderThumb.tsx b/src/renderer/src/components/slider/SliderThumb.tsx
index c5ac42fb..a3b5b3f6 100644
--- a/src/renderer/src/components/slider/SliderThumb.tsx
+++ b/src/renderer/src/components/slider/SliderThumb.tsx
@@ -1,3 +1,4 @@
+import { sn } from "@renderer/lib/css.utils";
 import { useSlider } from "./Slider";
 import { linearScale } from "@renderer/lib/linear-scale";
 import { Component, createMemo, JSX } from "solid-js";
@@ -29,9 +30,12 @@ const SliderThumb: Component<JSX.IntrinsicElements["span"]> = (props) => {
     >
       <span
         {...props}
-        style={{
-          transform: "translate(-50%)",
-        }}
+        style={sn(
+          {
+            transform: "translate(-50%)",
+          },
+          props.style,
+        )}
         tabIndex={0}
         ref={state.setThumb}
       />
diff --git a/src/renderer/src/components/song/color-extractor.ts b/src/renderer/src/components/song/color-extractor.ts
index f363be86..0a73a1e1 100644
--- a/src/renderer/src/components/song/color-extractor.ts
+++ b/src/renderer/src/components/song/color-extractor.ts
@@ -28,7 +28,6 @@ export function useColorExtractor() {
 
       try {
         const colors = await extractColorsFromImage(src);
-        console.log("colors", colors);
         if (!colors.primaryColor || !colors.secondaryColor) {
           return;
         }
diff --git a/src/renderer/src/components/song/context-menu/SongContextMenu.css b/src/renderer/src/components/song/context-menu/SongContextMenu.css
deleted file mode 100644
index f59b42e9..00000000
--- a/src/renderer/src/components/song/context-menu/SongContextMenu.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.song-item {
-  position: relative;
-}
-
-.song-menu {
-  --x: 0px;
-  --y: 0px;
-  position: fixed;
-  z-index: var(--top-layer);
-  border-radius: var(--border-radius);
-  overflow: hidden;
-  left: var(--x);
-  top: var(--y);
-  outline: 2px solid rgba(var(--color-fg), var(--level-0));
-}
-
-.song-menu-container {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 4px;
-}
-
-.song-menu-container > button {
-  padding: 8px;
-  background-color: rgba(var(--color-fg), 0);
-  text-align: left;
-}
-
-.song-menu-container > button:hover {
-  background-color: rgba(var(--color-fg), var(--level-0));
-}
diff --git a/src/renderer/src/components/song/context-menu/SongContextMenu.tsx b/src/renderer/src/components/song/context-menu/SongContextMenu.tsx
deleted file mode 100644
index 03403c5e..00000000
--- a/src/renderer/src/components/song/context-menu/SongContextMenu.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import "./SongContextMenu.css";
-import { Component, For } from "solid-js";
-
-type SongContextMenuProps = {
-  children: any;
-};
-
-const SongContextMenu: Component<SongContextMenuProps> = (props) => {
-  let menu: HTMLDivElement | undefined;
-
-  return (
-    <div
-      class="flex flex-col gap-1 rounded-xl bg-thick-material p-2 z-30 min-w-48 ring-1 ring-inset ring-stroke backdrop-blur-md shadow-xl"
-      ref={menu}
-    >
-      <For each={props.children}>{(child) => child}</For>
-    </div>
-  );
-};
-
-export default SongContextMenu;
-
-export function ignoreClickInContextMenu(fn: (evt: MouseEvent) => any): (evt: MouseEvent) => void {
-  return (evt: MouseEvent) => {
-    const t = evt.target;
-
-    if (!(t instanceof HTMLElement)) {
-      return;
-    }
-
-    fn(evt);
-  };
-}
diff --git a/src/renderer/src/components/song/context-menu/SongContextMenuItem.tsx b/src/renderer/src/components/song/context-menu/SongContextMenuItem.tsx
deleted file mode 100644
index 54a20a37..00000000
--- a/src/renderer/src/components/song/context-menu/SongContextMenuItem.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Component, JSX, onCleanup } from "solid-js";
-import { twMerge } from "tailwind-merge";
-
-type SongContextMenuItemProps = {
-  onClick: (event: MouseEvent) => any;
-  children: any;
-  class?: JSX.ButtonHTMLAttributes<HTMLButtonElement>["class"];
-  disabled?: JSX.ButtonHTMLAttributes<HTMLButtonElement>["disabled"];
-};
-
-const SongContextMenuItem: Component<SongContextMenuItemProps> = (props) => {
-  let item: HTMLElement | undefined;
-  const buttonDisabled = props.disabled !== undefined ? props.disabled : false;
-
-  const divAccessor = (div: HTMLElement) => {
-    div.addEventListener("click", props.onClick);
-    item = div;
-  };
-
-  onCleanup(() => {
-    item?.removeEventListener("click", props.onClick);
-  });
-
-  return (
-    <button
-      ref={divAccessor}
-      class={twMerge(
-        "flex flex-row items-center justify-between gap-3 rounded-md py-1.5 pl-2.5 pr-2 text-left hover:cursor-pointer hover:bg-surface align-baseline",
-        props.class,
-        buttonDisabled && "text-overlay hover:cursor-auto hover:bg-transparent",
-      )}
-      disabled={buttonDisabled}
-    >
-      {props.children}
-    </button>
-  );
-};
-
-export default SongContextMenuItem;
diff --git a/src/renderer/src/components/song/context-menu/items/AddToPlaylist.tsx b/src/renderer/src/components/song/context-menu/items/AddToPlaylist.tsx
deleted file mode 100644
index 035b0ffc..00000000
--- a/src/renderer/src/components/song/context-menu/items/AddToPlaylist.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Song } from "../../../../../../@types";
-import SongContextMenuItem from "../SongContextMenuItem";
-import { PlusIcon } from "lucide-solid";
-import { Component } from "solid-js";
-
-type AddToPlaylistProps = {
-  path: Song["path"] | undefined;
-};
-
-const AddToPlaylist: Component<AddToPlaylistProps> = (props) => {
-  return (
-    <SongContextMenuItem
-      onClick={() => {
-        if (props.path !== undefined && props.path !== "") {
-          console.log("TODO: add " + props.path + " to playlist");
-        }
-      }}
-    >
-      <p>Add to Playlist</p>
-      <PlusIcon size={20} />
-    </SongContextMenuItem>
-  );
-};
-
-export default AddToPlaylist;
diff --git a/src/renderer/src/components/song/context-menu/items/PlayNext.tsx b/src/renderer/src/components/song/context-menu/items/PlayNext.tsx
deleted file mode 100644
index 293f99d0..00000000
--- a/src/renderer/src/components/song/context-menu/items/PlayNext.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Song } from "../../../../../../@types";
-import SongContextMenuItem from "../SongContextMenuItem";
-import { ListStartIcon } from "lucide-solid";
-import { Component } from "solid-js";
-
-type SongPlayNextProps = {
-  path: Song["path"] | undefined;
-  disabled: boolean;
-};
-
-const PlayNext: Component<SongPlayNextProps> = (props) => {
-  return (
-    <SongContextMenuItem
-      onClick={() => {
-        if (props.path !== undefined && props.path !== "") {
-          window.api.request("queue::playNext", props.path);
-        }
-      }}
-      disabled={props.disabled}
-    >
-      <p>Play next</p>
-      <ListStartIcon size={20} />
-    </SongContextMenuItem>
-  );
-};
-
-export default PlayNext;
diff --git a/src/renderer/src/components/song/context-menu/items/RemoveFromQueue.tsx b/src/renderer/src/components/song/context-menu/items/RemoveFromQueue.tsx
deleted file mode 100644
index bb1dec88..00000000
--- a/src/renderer/src/components/song/context-menu/items/RemoveFromQueue.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import SongContextMenuItem from "../SongContextMenuItem";
-import { DeleteIcon } from "lucide-solid";
-import { Component } from "solid-js";
-import { Song } from "src/@types";
-
-type RemoveFromQueueProps = {
-  path: Song["path"] | undefined;
-};
-
-const RemoveFromQueue: Component<RemoveFromQueueProps> = (props) => {
-  return (
-    <SongContextMenuItem
-      onClick={() => {
-        if (props.path !== undefined && props.path !== "") {
-          window.api.request("queue::removeSong", props.path);
-        }
-      }}
-      class="hover:bg-red/20 hover:ring-1 ring-red/30"
-    >
-      <p class="text-red">Remove from queue</p>
-      <DeleteIcon class="text-red" size={20} />
-    </SongContextMenuItem>
-  );
-};
-
-export default RemoveFromQueue;
diff --git a/src/renderer/src/components/song/song-detail/SongControls.tsx b/src/renderer/src/components/song/song-detail/SongControls.tsx
index 26587ec4..27119bca 100644
--- a/src/renderer/src/components/song/song-detail/SongControls.tsx
+++ b/src/renderer/src/components/song/song-detail/SongControls.tsx
@@ -26,33 +26,30 @@ import {
   Volume2Icon,
   VolumeXIcon,
 } from "lucide-solid";
-import { Component, createEffect, createSignal, Match, Show, Switch, For } from "solid-js";
+import { Component, createMemo, createSignal, Match, Show, Switch, For } from "solid-js";
 import Popover from "../../popover/Popover";
 import { ParentComponent } from "solid-js";
 import { Portal } from "solid-js/web";
 
 // Add a prop to accept the averageColor
 type SongControlsProps = {
-  averageColor?: string;
+  averageColor: string | undefined;
+  secondatyColor: string | undefined;
 };
 
 const SongControls: Component<SongControlsProps> = (props) => {
-  const [disable, setDisable] = createSignal(isSongUndefined(song()));
-  const [playHint, setPlayHint] = createSignal("");
+  const [isHovering, setIsHovering] = createSignal(false);
 
-  createEffect(() => {
+  const disable = createMemo(() => isSongUndefined(song()));
+  const playHint = createMemo(() => {
     const disabled = disable();
-
     if (disabled) {
-      setPlayHint("");
-      return;
+      return "";
     }
 
-    setPlayHint(isPlaying() ? "Pause" : "Play");
+    return isPlaying() ? "Pause" : "Play";
   });
 
-  createEffect(() => setDisable(isSongUndefined(song())));
-
   return (
     <div class="flex w-full items-center gap-4" style={{ "--dynamic-color": props.averageColor }}>
       <LeftPart />
@@ -79,12 +76,14 @@ const SongControls: Component<SongControlsProps> = (props) => {
           </Button>
 
           <button
-            class="flex h-12 w-12 items-center justify-center rounded-full border border-solid border-stroke bg-surface text-2xl text-thick-material text-white shadow-lg"
+            class="flex h-12 w-12 items-center justify-center rounded-full ring-1 ring-stroke bg-surface text-2xl text-thick-material text-white transition-all active:scale-95 shadow-lg"
             onClick={() => togglePlay()}
             disabled={disable()}
             title={playHint()}
+            onMouseEnter={() => setIsHovering(true)}
+            onMouseLeave={() => setIsHovering(false)}
             style={{
-              "background-color": props.averageColor, // Use the average color as background
+              "background-color": isHovering() ? props.secondatyColor : props.averageColor,
             }}
           >
             <Show when={!isPlaying()} fallback={<PauseIcon fill="white" size={20} />}>
@@ -125,21 +124,30 @@ const LeftPart = () => {
   const [isHoveringVolume, setIsHoveringVolume] = createSignal(false);
   let isHoverintTimeoutId: NodeJS.Timeout;
 
+  const showVolumeSlider = () => {
+    clearTimeout(isHoverintTimeoutId);
+    setIsHoveringVolume(true);
+  };
+  const hideVolumeSlider = () => {
+    isHoverintTimeoutId = setTimeout(() => {
+      setIsHoveringVolume(false);
+    }, 320);
+  };
+
   return (
     <div class="flex-1">
       <div
         class="group flex w-max items-center gap-4"
-        onMouseEnter={() => {
-          clearTimeout(isHoverintTimeoutId);
-          setIsHoveringVolume(true);
-        }}
-        onMouseLeave={() => {
-          isHoverintTimeoutId = setTimeout(() => {
-            setIsHoveringVolume(false);
-          }, 320);
-        }}
+        onMouseEnter={showVolumeSlider}
+        onMouseLeave={hideVolumeSlider}
       >
-        <Button size="icon" variant="ghost" onClick={handleMuteSong}>
+        <Button
+          size="icon"
+          variant="ghost"
+          onClick={handleMuteSong}
+          onFocus={showVolumeSlider}
+          onBlur={hideVolumeSlider}
+        >
           <Switch>
             <Match when={volume() === 0}>
               <VolumeXIcon size={20} />
@@ -155,7 +163,7 @@ const LeftPart = () => {
 
         <Show when={isHoveringVolume()}>
           <Slider
-            class="flex h-8 w-28 flex-grow items-center"
+            class="flex h-8 w-24 flex-grow items-center"
             min={0}
             max={1}
             value={volume}
@@ -165,7 +173,11 @@ const LeftPart = () => {
             <Slider.Track class="h-1 flex-1 rounded bg-thick-material ring-1 ring-stroke">
               <Slider.Range class="block h-1 rounded bg-white" />
             </Slider.Track>
-            <Slider.Thumb class="mt-2 block h-4 w-4 rounded-full bg-white" />
+            <Slider.Thumb
+              onFocus={showVolumeSlider}
+              onBlur={hideVolumeSlider}
+              class="mt-2 block h-4 w-4 rounded-full bg-white"
+            />
           </Slider>
         </Show>
       </div>
diff --git a/src/renderer/src/components/song/song-detail/SongDetail.tsx b/src/renderer/src/components/song/song-detail/SongDetail.tsx
index 6d576a2f..921d3d24 100644
--- a/src/renderer/src/components/song/song-detail/SongDetail.tsx
+++ b/src/renderer/src/components/song/song-detail/SongDetail.tsx
@@ -19,13 +19,13 @@ const SongDetail: Component = () => {
   const colorData = createMemo(() => extractColorFromImage(song()));
 
   return (
-    <div class="flex h-full w-full max-w-[800px] flex-col p-8">
+    <div class="z-10 flex h-full w-full max-w-[800px] flex-col p-10">
       <div class="mb-8 grid flex-grow place-items-center">
         <SongImage
           src={song().bg}
           instantLoad={true}
           onImageLoaded={colorData().processImage}
-          class="size-80 rounded-lg bg-cover bg-center object-cover shadow-lg ring-2 ring-stroke ring-inset"
+          class="size-80 rounded-lg bg-cover bg-center object-cover shadow-lg"
         />
       </div>
 
@@ -36,7 +36,10 @@ const SongDetail: Component = () => {
         </div>
 
         <ProgressBar averageColor={colorData().primaryColor()} />
-        <SongControls averageColor={colorData().primaryColor()} />
+        <SongControls
+          secondatyColor={colorData().secondaryColor()}
+          averageColor={colorData().primaryColor()}
+        />
       </div>
     </div>
   );
diff --git a/src/renderer/src/components/song/song-item/SongItem.tsx b/src/renderer/src/components/song/song-item/SongItem.tsx
index dae96bda..e18e501b 100644
--- a/src/renderer/src/components/song/song-item/SongItem.tsx
+++ b/src/renderer/src/components/song/song-item/SongItem.tsx
@@ -3,13 +3,11 @@ import draggable from "../../../lib/draggable/draggable";
 import SongHint from "../SongHint";
 import SongImage from "../SongImage";
 import { useColorExtractor } from "../color-extractor";
-import { ignoreClickInContextMenu } from "../context-menu/SongContextMenu";
 import { song as selectedSong } from "../song.utils";
 import { transparentize } from "polished";
 import Popover from "@renderer/components/popover/Popover";
 import { EllipsisVerticalIcon } from "lucide-solid";
-import { Component, createSignal, JSXElement, onMount, createMemo } from "solid-js";
-import { Portal } from "solid-js/web";
+import { Component, createSignal, JSXElement, onMount, createMemo, Show } from "solid-js";
 import { twMerge } from "tailwind-merge";
 
 type SongItemProps = {
@@ -19,24 +17,23 @@ type SongItemProps = {
   onSelect: (songResource: ResourceID) => any;
   draggable?: true;
   onDrop?: (before: Element | null) => any;
-  contextMenu: JSXElement;
+  contextMenu?: JSXElement;
 };
 
 const SongItem: Component<SongItemProps> = (props) => {
   let item: HTMLDivElement | undefined;
-  const [, setCoords] = createSignal<[number, number]>([0, 0], { equals: false });
-
   const { extractColorFromImage } = useColorExtractor();
   const { primaryColor, secondaryColor, processImage } = extractColorFromImage(props.song);
   const [localShow, setLocalShow] = createSignal(false);
-  const [mousePos, setMousePos] = createSignal<[number, number]>([0, 0]);
+  const [isHovering, setIsHovering] = createSignal(false);
+  const [mousePos, setMousePos] = createSignal<[number, number] | undefined>();
 
   onMount(() => {
     if (!item) return;
 
     // Initialize draggable functionality
     draggable(item, {
-      onClick: ignoreClickInContextMenu(() => props.onSelect(props.song.path)),
+      onClick: () => props.onSelect(props.song.path),
       onDrop: props.onDrop ?? (() => {}),
       createHint: SongHint,
       useOnlyAsOnClickBinder: !props.draggable || selectedSong().path === props.song.path,
@@ -70,8 +67,11 @@ const SongItem: Component<SongItemProps> = (props) => {
       return "rgba(0, 0, 0, 0.72)";
     }
 
-    const lowerAlpha = transparentize(0.9);
-    return `linear-gradient(to right, ${color}, ${lowerAlpha(color)})`;
+    if (isHovering() || localShow() || isSelected()) {
+      return `linear-gradient(to right, ${transparentize(0.1)(color)} 20%, ${transparentize(0.9)(color)}), rgba(0, 0, 0, 0.1)`;
+    }
+
+    return `linear-gradient(to right, ${color} 20%, ${transparentize(0.9)(color)}), rgba(0, 0, 0, 0.2)`;
   });
 
   return (
@@ -80,11 +80,11 @@ const SongItem: Component<SongItemProps> = (props) => {
       onValueChange={setLocalShow}
       placement="right"
       offset={{ crossAxis: 5, mainAxis: 5 }}
-      shift={{}}
-      flip={{}}
-      mousePos={mousePos}
+      position={mousePos}
+      shift
+      flip
     >
-      <Portal>
+      <Popover.Portal>
         <Popover.Overlay />
         <Popover.Content
           onClick={(e) => {
@@ -94,9 +94,16 @@ const SongItem: Component<SongItemProps> = (props) => {
         >
           {props.contextMenu}
         </Popover.Content>
-      </Portal>
+      </Popover.Portal>
+
       <div
-        class="min-h-[72px] rounded-lg py-0.5 pl-1.5 pr-0.5 transition-colors"
+        onMouseEnter={() => {
+          setIsHovering(true);
+        }}
+        onMouseLeave={() => {
+          setIsHovering(false);
+        }}
+        class="min-h-[72px] rounded-lg py-0.5 pl-1.5 pr-0.5 transition-colors active: group relative isolate overflow-hidden"
         classList={{
           "shadow-glow-blue": isSelected(),
         }}
@@ -110,19 +117,22 @@ const SongItem: Component<SongItemProps> = (props) => {
         }}
       >
         <div
-          class="group relative isolate select-none rounded-lg"
+          class="relative isolate select-none rounded-lg h-full"
           ref={item}
           data-url={props.song.bg}
-          onContextMenu={(evt) => setCoords([evt.clientX, evt.clientY])}
         >
           <SongImage
-            class={`absolute inset-0 z-[-1] h-full w-full rounded-md bg-cover bg-center bg-no-repeat`}
+            class={`absolute z-[-1] inset-0 h-full w-full rounded-l-[9px] rounded-r-md bg-cover bg-center bg-no-repeat bg-scroll opacity-70 rounded-lg`}
+            classList={{
+              "opacity-100": isSelected(),
+            }}
             src={props.song.bg}
             group={props.group}
             onImageLoaded={processImage}
           />
+
           <div
-            class="flex flex-col justify-center overflow-hidden rounded-md p-3"
+            class="flex flex-col justify-center overflow-hidden rounded-md p-3 pr-10 h-full"
             style={{
               background: backgrund(),
             }}
@@ -130,18 +140,34 @@ const SongItem: Component<SongItemProps> = (props) => {
             <h3 class="drop-shadow-md text-[22px] font-[740] leading-7">{props.song.title}</h3>
             <p class="text-base text-subtext drop-shadow-sm">{props.song.artist}</p>
           </div>
+        </div>
 
-          <div class="absolute right-2 top-1/2 -translate-y-1/2 grid aspect-square place-items-center rounded bg-transparent text-text hover:bg-thin-material/30 hover:backdrop-blur-sm">
-            <Popover.Trigger
-              class={twMerge(
-                "opacity-0 transition-opacity group-hover:opacity-100 p-1",
-                localShow() && "opacity-100",
-              )}
+        <Show when={isHovering() || localShow()}>
+          <Popover.Anchor
+            onClick={(e) => {
+              e.stopPropagation();
+              setMousePos(undefined);
+              setLocalShow(true);
+            }}
+            class="absolute right-0 top-0 h-full flex items-center text-subtext transition-colors hover:text-text rounded-r-lg animate-song-item-slide-in"
+            title="Song options"
+            classList={{
+              "text-text": localShow(),
+            }}
+            style={{
+              background: borderColor(),
+            }}
+          >
+            <div
+              class={twMerge("transition-opacity z-10")}
+              style={{
+                color: isSelected() ? secondaryColor() : undefined,
+              }}
             >
               <EllipsisVerticalIcon />
-            </Popover.Trigger>
-          </div>
-        </div>
+            </div>
+          </Popover.Anchor>
+        </Show>
       </div>
     </Popover>
   );
diff --git a/src/renderer/src/components/song/song-item/SongItemAnimations.ts b/src/renderer/src/components/song/song-item/SongItemAnimations.ts
new file mode 100644
index 00000000..86738fde
--- /dev/null
+++ b/src/renderer/src/components/song/song-item/SongItemAnimations.ts
@@ -0,0 +1,11 @@
+export const songItemAnimations = {
+  keyframes: {
+    "song-item-slide-in": {
+      from: { transform: "translateX(100%)", opacity: 0 },
+      to: { transform: "translateX(0)", opacity: 1 },
+    },
+  },
+  animation: {
+    "song-item-slide-in": "song-item-slide-in 160ms cubic-bezier(0.4, 0, 0.2, 1) forwards",
+  },
+};
diff --git a/src/renderer/src/components/song/song-list-search/FilterOption.tsx b/src/renderer/src/components/song/song-list-search/FilterOption.tsx
new file mode 100644
index 00000000..f2dd4003
--- /dev/null
+++ b/src/renderer/src/components/song/song-list-search/FilterOption.tsx
@@ -0,0 +1,119 @@
+import Popover, { Props as PopoverProps } from "@renderer/components/popover/Popover";
+import { Props as PopoverContentProps } from "@renderer/components/popover/PopoverContent";
+import { cn } from "@renderer/lib/css.utils";
+import { ChevronDownIcon } from "lucide-solid";
+import { Component, createMemo, JSX, mergeProps, ParentComponent, splitProps } from "solid-js";
+
+// ------------
+// Container
+// ------------
+type FilterOptionContainerProps = {
+  popoverProps?: PopoverProps;
+} & JSX.IntrinsicElements["div"];
+const FilterOptionContainer: Component<FilterOptionContainerProps> = (_props) => {
+  const [props, rest] = splitProps(_props, ["class", "popoverProps"]);
+
+  const mergedPopoverProps = createMemo(() => {
+    const mergedProps = mergeProps<PopoverProps[]>(
+      { placement: "bottom-start", offset: 10 },
+      props.popoverProps ?? {},
+    );
+    return mergedProps;
+  });
+
+  return (
+    <Popover {...mergedPopoverProps}>
+      <div class={cn("flex p-0.5 items-center rounded-lg bg-surface", props.class)} {...rest} />
+    </Popover>
+  );
+};
+
+// ------------
+// Label
+// ------------
+type FilterOptionLabelProps = JSX.IntrinsicElements["p"];
+export const FilterOptionLabel: Component<FilterOptionLabelProps> = (_props) => {
+  const [props, rest] = splitProps(_props, ["class"]);
+  return <p class={cn("py-1.5 px-3 text-sm", props.class)} {...rest} />;
+};
+
+// ------------
+// Trigger
+// ------------
+export const FilterOptionList: ParentComponent = (props) => {
+  return (
+    <div
+      class="bg-thick-material rounded-md flex items-center overflow-hidden border-2 border-thick-material gap-0.5"
+      {...props}
+    />
+  );
+};
+
+// ------------
+// Trigger
+// ------------
+type FilterOptionTriggerProps = JSX.IntrinsicElements["button"];
+export const FilterOptionTrigger: Component<FilterOptionTriggerProps> = (_props) => {
+  const [props, rest] = splitProps(_props, ["class", "children"]);
+
+  return (
+    <Popover.Trigger
+      {...rest}
+      class={cn(
+        "hover:bg-surface py-1 px-2.5 rounded text-sm flex gap-1.5 items-center focus-visible:bg-surface focus-within:outline-none",
+        props.class,
+      )}
+    >
+      <span>{props.children}</span>
+      <ChevronDownIcon size={16} class="text-subtext" />
+    </Popover.Trigger>
+  );
+};
+
+// ------------
+// Item
+// ------------
+type FilterOptionItemProps = JSX.IntrinsicElements["button"];
+export const FilterOptionItem: Component<FilterOptionItemProps> = (_props) => {
+  const [props, rest] = splitProps(_props, ["class", "children"]);
+
+  return (
+    <button
+      {...rest}
+      class={cn(
+        "hover:bg-surface py-1 px-2.5 rounded text-sm flex gap-1 items-center focus-within:bg-surface focus-within:outline-none",
+        props.class,
+      )}
+    >
+      {props.children}
+    </button>
+  );
+};
+
+// ------------
+// Content
+// ------------
+const FilterOptionContent: ParentComponent<PopoverContentProps> = (props) => {
+  return (
+    <Popover.Portal>
+      <Popover.Overlay />
+      <Popover.Content
+        {...props}
+        class={cn(
+          "rounded-lg border border-stroke bg-thick-material p-2 backdrop-blur-md",
+          props.class,
+        )}
+      />
+    </Popover.Portal>
+  );
+};
+
+const FilterOption = Object.assign(FilterOptionContainer, {
+  Label: FilterOptionLabel,
+  List: FilterOptionList,
+  Trigger: FilterOptionTrigger,
+  Content: FilterOptionContent,
+  Item: FilterOptionItem,
+});
+
+export default FilterOption;
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 548b0212..2e3da0fc 100644
--- a/src/renderer/src/components/song/song-list-search/SongListSearch.tsx
+++ b/src/renderer/src/components/song/song-list-search/SongListSearch.tsx
@@ -2,8 +2,11 @@ import { Optional, Order, Tag } from "../../../../../@types";
 import { SearchQueryError } from "../../../../../main/lib/search-parser/@search-types";
 import { setSongsSearch } from "../song-list/song-list.utils";
 import SongListSearchOrderBy from "./SongListSearchOrderBy";
-import { SearchIcon } from "lucide-solid";
-import { Accessor, Component, Setter, Signal } from "solid-js";
+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 { SongListSearchTags } from "./SongListSearchTags";
 
 export type SearchProps = {
   tags: Signal<Tag[]>;
@@ -13,6 +16,8 @@ export type SearchProps = {
 };
 
 const SongListSearch: Component<SearchProps> = (props) => {
+  const [filterExpanded, setFilterExpanded] = createSignal(false);
+
   // const [editable, setEditable] = createSignal<HTMLElement | undefined>();
   // const [doShowError, setDoShowError] = createSignal(false);
   // const [doShowSuggestion, setDoShowSuggestion] = createSignal(false);
@@ -62,27 +67,51 @@ const SongListSearch: Component<SearchProps> = (props) => {
   // });
 
   return (
-    <div class="p-5">
-      <div class="relative mb-4">
-        <input
-          class="h-10 w-full rounded-full bg-thin-material pl-10 pr-4 focus:outline-none focus:ring-2 focus:ring-overlay"
-          type="text"
-          id="search_input"
-          placeholder="Type to search songs..."
-          onInput={(e) => {
-            setSongsSearch(e.target.value);
-          }}
-        />
-        <label
-          class="absolute left-3 top-1/2 -translate-y-1/2 transform text-text"
-          for="search_input"
+    <div class="px-5 pb-2 pt-1">
+      <div class="flex gap-2">
+        <div class="relative flex-1">
+          <Input
+            variant="outlined"
+            type="text"
+            id="search_input"
+            placeholder="Type to search songs..."
+            onInput={(e) => {
+              setSongsSearch(e.target.value);
+            }}
+          />
+          <label
+            class="absolute right-3.5 top-1/2 -translate-y-1/2 transform text-subtext"
+            for="search_input"
+          >
+            <SearchIcon size={20} class="opacity-70" />
+          </label>
+        </div>
+        <Button
+          onClick={() => setFilterExpanded((e) => !e)}
+          size="square"
+          variant={filterExpanded() ? "secondary" : "outlined"}
         >
-          <SearchIcon size={20} class="opacity-70" />
-        </label>
+          <Switch>
+            <Match when={filterExpanded()}>
+              <FilterXIcon size={20} />
+            </Match>
+            <Match when={!filterExpanded()}>
+              <FilterIcon size={20} />
+            </Match>
+          </Switch>
+        </Button>
       </div>
-
-      <div class="flex items-center space-x-4">
-        <SongListSearchOrderBy setOrder={props.setOrder} />
+      <div
+        class="overflow-hidden transition-all"
+        classList={{
+          "h-0": !filterExpanded(),
+          "h-[46px]": filterExpanded(),
+        }}
+      >
+        <div class="mt-2 flex flex-nowrap items-center gap-2 overflow-y-auto">
+          <SongListSearchOrderBy disabled={!filterExpanded()} setOrder={props.setOrder} />
+          <SongListSearchTags disabled={!filterExpanded()} />
+        </div>
       </div>
     </div>
   );
diff --git a/src/renderer/src/components/song/song-list-search/SongListSearchOrderBy.tsx b/src/renderer/src/components/song/song-list-search/SongListSearchOrderBy.tsx
index 11179c27..e2aed231 100644
--- a/src/renderer/src/components/song/song-list-search/SongListSearchOrderBy.tsx
+++ b/src/renderer/src/components/song/song-list-search/SongListSearchOrderBy.tsx
@@ -1,8 +1,8 @@
-import Button from "@renderer/components/button/Button";
-import Dropdown from "@renderer/components/dropdown/Dropdown";
-import { ArrowDownAzIcon, ArrowUpZaIcon } from "lucide-solid";
+import SelectableList from "@renderer/components/selectable-list/SelectableList";
+import { SortAsc, SortDesc } from "lucide-solid";
 import { Component, createMemo, createSignal, For, Match, Setter, Switch } from "solid-js";
 import { OrderDirection, OrderOptions, Order } from "src/@types";
+import FilterOption from "./FilterOption";
 
 type OrderOption = {
   text: string;
@@ -61,24 +61,38 @@ const SongListSearchOrderBy: Component<OrderSelectProps> = (props) => {
   });
 
   return (
-    <div class="flex items-center space-x-3">
-      <Button variant={"ghost"} size="icon" onClick={switchDirections}>
-        <Switch>
-          <Match when={direction() === "asc"}>
-            <ArrowDownAzIcon size={20} />
-          </Match>
-          <Match when={direction() === "desc"}>
-            <ArrowUpZaIcon size={20} />
-          </Match>
-        </Switch>
-      </Button>
-      <Dropdown isOpen={isOpen} onValueChange={setIsOpen}>
-        <Dropdown.Trigger class="rounded-md bg-thin-material px-3 py-1">
-          {optionLabel()}
-        </Dropdown.Trigger>
-        <Dropdown.List
+    <FilterOption
+      class="flex-shrink-0"
+      popoverProps={{
+        isOpen,
+        onValueChange: setIsOpen,
+      }}
+    >
+      <FilterOption.Label>Sort by</FilterOption.Label>
+      <FilterOption.List>
+        <FilterOption.Item
+          disabled={props.disabled}
+          onClick={switchDirections}
+          class="text-subtext"
+        >
+          <span class="p-0.5">
+            <Switch>
+              <Match when={direction() === "asc"}>
+                <SortAsc size={16} />
+              </Match>
+              <Match when={direction() === "desc"}>
+                <SortDesc size={16} />
+              </Match>
+            </Switch>
+          </span>
+        </FilterOption.Item>
+        <div class="h-4 w-px bg-stroke" />
+        <FilterOption.Trigger disabled={props.disabled}>{optionLabel()}</FilterOption.Trigger>
+      </FilterOption.List>
+
+      <FilterOption.Content class="w-48">
+        <SelectableList
           onValueChange={(newSelectedOption) => {
-            setIsOpen(false);
             setOption(newSelectedOption as OrderOptions);
             handlerOrderChanged();
           }}
@@ -86,17 +100,14 @@ const SongListSearchOrderBy: Component<OrderSelectProps> = (props) => {
         >
           <For each={orderOptions}>
             {(option) => (
-              <Dropdown.Item
-                class="px-4 py-2 transition-colors duration-200 hover:bg-surface"
-                value={option.value}
-              >
+              <SelectableList.Item onSelectedByClick={() => setIsOpen(false)} value={option.value}>
                 {option.text}
-              </Dropdown.Item>
+              </SelectableList.Item>
             )}
           </For>
-        </Dropdown.List>
-      </Dropdown>
-    </div>
+        </SelectableList>
+      </FilterOption.Content>
+    </FilterOption>
   );
 };
 
diff --git a/src/renderer/src/components/song/song-list-search/SongListSearchTags.tsx b/src/renderer/src/components/song/song-list-search/SongListSearchTags.tsx
new file mode 100644
index 00000000..4dc74ec1
--- /dev/null
+++ b/src/renderer/src/components/song/song-list-search/SongListSearchTags.tsx
@@ -0,0 +1,17 @@
+import { Component } from "solid-js";
+import FilterOption from "./FilterOption";
+
+type Props = {
+  disabled?: boolean;
+};
+export const SongListSearchTags: Component<Props> = (props) => {
+  return (
+    <FilterOption>
+      <FilterOption.Label>Tags</FilterOption.Label>
+      <FilterOption.List>
+        <FilterOption.Trigger disabled={props.disabled}>None</FilterOption.Trigger>
+      </FilterOption.List>
+      <FilterOption.Content>Tags placeholder</FilterOption.Content>
+    </FilterOption>
+  );
+};
diff --git a/src/renderer/src/components/song/song-list/SongList.tsx b/src/renderer/src/components/song/song-list/SongList.tsx
index 6c557820..2e15614f 100644
--- a/src/renderer/src/components/song/song-list/SongList.tsx
+++ b/src/renderer/src/components/song/song-list/SongList.tsx
@@ -1,16 +1,15 @@
-import { Optional, Order, ResourceID, SongsQueryPayload, Tag } from "../../../../../@types";
+import { Optional, Order, ResourceID, Song, SongsQueryPayload, Tag } from "../../../../../@types";
 import { SearchQueryError } from "../../../../../main/lib/search-parser/@search-types";
 import { namespace } from "../../../App";
 import Impulse from "../../../lib/Impulse";
 import { none, some } from "../../../lib/rust-like-utils-client/Optional";
 import InfiniteScroller from "../../InfiniteScroller";
-import SongContextMenu from "../context-menu/SongContextMenu";
-import AddToPlaylist from "../context-menu/items/AddToPlaylist";
-import PlayNext from "../context-menu/items/PlayNext";
 import SongItem from "../song-item/SongItem";
 import SongListSearch from "../song-list-search/SongListSearch";
 import { songsSearch } from "./song-list.utils";
 import { Component, createEffect, createSignal, onCleanup, onMount } from "solid-js";
+import { ListPlus, ListStartIcon } from "lucide-solid";
+import DropdownList from "@renderer/components/dropdown-list/DropdownList";
 
 export type SongViewProps = {
   isAllSongs?: boolean;
@@ -22,10 +21,9 @@ const DEFAULT_TAGS_VALUE: Tag[] = [];
 const DEFAULT_ORDER_VALUE: Order = { option: "title", direction: "asc" };
 
 const SongList: Component<SongViewProps> = (props) => {
-  const [tags, setTags] = createSignal(DEFAULT_TAGS_VALUE, { equals: false });
+  const tagsSignal = createSignal(DEFAULT_TAGS_VALUE, { equals: false });
   const [order, setOrder] = createSignal(DEFAULT_ORDER_VALUE);
   const [count, setCount] = createSignal(0);
-  const [isQueueExist, setIsQueueExist] = createSignal(false);
 
   const [payload, setPayload] = createSignal<SongsQueryPayload>({
     view: props,
@@ -40,7 +38,7 @@ const SongList: Component<SongViewProps> = (props) => {
 
   const searchSongs = async () => {
     const o = order();
-    const t = tags();
+    const t = tagsSignal[0]();
     const parsedQuery = await window.api.request("parse::search", songsSearch());
 
     if (parsedQuery.type === "error") {
@@ -72,21 +70,13 @@ const SongList: Component<SongViewProps> = (props) => {
       startSong: songResource,
       ...payload(),
     });
-    setIsQueueExist(true);
   };
 
   const group = namespace.create(true);
 
   return (
-    <div class="flex h-full flex-col">
-      <div class="sticky top-0 z-10">
-        <SongListSearch
-          tags={[tags, setTags]}
-          setOrder={setOrder}
-          count={count}
-          error={searchError}
-        />
-      </div>
+    <>
+      <SongListSearch tags={tagsSignal} setOrder={setOrder} count={count} error={searchError} />
 
       <div class="flex-grow overflow-y-auto p-5 py-0">
         <InfiniteScroller
@@ -96,25 +86,38 @@ const SongList: Component<SongViewProps> = (props) => {
           apiInitData={payload()}
           setCount={setCount}
           reset={resetListing}
-          fallback={<div class="py-8 text-center text-text">No songs...</div>}
+          fallback={<div class="py-8 text-center text-lg uppercase text-subtext">No songs</div>}
           builder={(s) => (
-            <div>
-              <SongItem
-                song={s}
-                group={group}
-                onSelect={createQueue}
-                contextMenu={
-                  <SongContextMenu>
-                    <PlayNext path={s.path} disabled={!isQueueExist()} />
-                    <AddToPlaylist path={s.path} />
-                  </SongContextMenu>
-                }
-              ></SongItem>
-            </div>
+            <SongItem
+              song={s}
+              group={group}
+              onSelect={createQueue}
+              contextMenu={<SongListContextMenuContent song={s} />}
+            />
           )}
         />
       </div>
-    </div>
+    </>
+  );
+};
+
+type SongListContextMenuContentProps = { song: Song };
+const SongListContextMenuContent: Component<SongListContextMenuContentProps> = (props) => {
+  return (
+    <DropdownList class="w-40">
+      <DropdownList.Item>
+        <span>Add to Playlist</span>
+        <ListPlus class="text-subtext" size={20} />
+      </DropdownList.Item>
+      <DropdownList.Item
+        onClick={() => {
+          window.api.request("queue::playNext", props.song.path);
+        }}
+      >
+        <span>Play next</span>
+        <ListStartIcon class="text-subtext" size={20} />
+      </DropdownList.Item>
+    </DropdownList>
   );
 };
 
diff --git a/src/renderer/src/components/song/song-queue/SongQueue.tsx b/src/renderer/src/components/song/song-queue/SongQueue.tsx
index ef9a83d8..f4a6ca75 100644
--- a/src/renderer/src/components/song/song-queue/SongQueue.tsx
+++ b/src/renderer/src/components/song/song-queue/SongQueue.tsx
@@ -3,14 +3,10 @@ import { namespace } from "../../../App";
 import Impulse from "../../../lib/Impulse";
 import scrollIfNeeded from "../../../lib/tungsten/scroll-if-needed";
 import InfiniteScroller from "../../InfiniteScroller";
-import SongContextMenu from "../context-menu/SongContextMenu";
-import AddToPlaylist from "../context-menu/items/AddToPlaylist";
-import RemoveFromQueue from "../context-menu/items/RemoveFromQueue";
 import SongItem from "../song-item/SongItem";
-import { setSongQueueModalOpen } from "./song-queue.utils";
-import Button from "@renderer/components/button/Button";
-import { XIcon } from "lucide-solid";
 import { Component, createSignal, onCleanup, onMount } from "solid-js";
+import { DeleteIcon, ListPlus } from "lucide-solid";
+import DropdownList from "@renderer/components/dropdown-list/DropdownList";
 
 const SongQueue: Component = () => {
   const [count, setCount] = createSignal(0);
@@ -69,10 +65,6 @@ const SongQueue: Component = () => {
     scrollIfNeeded(element, list);
   };
 
-  const handleCloseButtonClick = () => {
-    setSongQueueModalOpen(false);
-  };
-
   onMount(() => {
     window.api.listen("queue::created", resetListing.pulse.bind(resetListing));
     window.api.listen("queue::songChanged", changeSongHighlight);
@@ -84,12 +76,12 @@ const SongQueue: Component = () => {
   });
 
   return (
-    <div ref={view} class="flex h-full flex-col bg-regular-material backdrop-blur-md">
-      <div class="sticky top-0 z-10 flex items-center justify-between p-5">
-        <h2 class="text-lg font-semibold">Next songs on the queue ({count()})</h2>
-        <Button variant="ghost" size="icon" onClick={handleCloseButtonClick}>
-          <XIcon size={20} />
-        </Button>
+    <div class="flex flex-col w-full">
+      <div class="flex items-center justify-between px-5 pb-2 pt-5">
+        <h2 class="text-sm font-bold">
+          <span>Next songs on the queue</span>
+          <span class="text-subtext"> ({count()})</span>
+        </h2>
       </div>
 
       <div class="flex-grow overflow-y-auto px-4">
@@ -105,16 +97,10 @@ const SongQueue: Component = () => {
               song={s}
               group={group}
               selectable={true}
-              draggable={true}
               onSelect={() => window.api.request("queue::play", s.path)}
               onDrop={onDrop(s)}
-              contextMenu={
-                <SongContextMenu>
-                  <AddToPlaylist path={s.path} />
-                  <RemoveFromQueue path={s.path} />
-                </SongContextMenu>
-              }
-            ></SongItem>
+              contextMenu={<QueueContextMenuContent song={s} />}
+            />
           )}
         />
       </div>
@@ -122,4 +108,23 @@ const SongQueue: Component = () => {
   );
 };
 
+type QueueContextMenuContentProps = { song: Song };
+const QueueContextMenuContent: Component<QueueContextMenuContentProps> = (props) => {
+  return (
+    <DropdownList class="w-52">
+      <DropdownList.Item>
+        <span>Add to Playlist</span>
+        <ListPlus class="text-subtext" size={20} />
+      </DropdownList.Item>
+      <DropdownList.Item
+        onClick={() => window.api.request("queue::removeSong", props.song.path)}
+        class="text-danger"
+      >
+        <span>Remove from queue</span>
+        <DeleteIcon class="opacity-80" size={20} />
+      </DropdownList.Item>
+    </DropdownList>
+  );
+};
+
 export default SongQueue;
diff --git a/src/renderer/src/components/song/song.utils.ts b/src/renderer/src/components/song/song.utils.ts
index 0ae9e3b5..eecff1ec 100644
--- a/src/renderer/src/components/song/song.utils.ts
+++ b/src/renderer/src/components/song/song.utils.ts
@@ -114,25 +114,26 @@ export async function play(): Promise<void> {
   }
 
   const currentSong = song();
-  await window.api.request("discord::play", currentSong, player.currentTime);
-  document.title = `${currentSong.artist} - ${currentSong.title}`;
 
   const m = media();
   if (m !== undefined && player.src !== m.href) {
     player.src = m.href;
   }
 
-  await player.play().catch((reason) => console.error(reason));
   setIsPlaying(true);
+  await player.play().catch((reason) => console.error(reason));
 
   await setMediaSession(currentSong);
+
+  await window.api.request("discord::play", currentSong, player.currentTime);
+  document.title = `${currentSong.artist} - ${currentSong.title}`;
 }
 
 export async function pause() {
   const currentSong = song();
-  await window.api.request("discord::pause", currentSong);
   setIsPlaying(false);
   player.pause();
+  await window.api.request("discord::pause", currentSong);
 }
 
 export async function changeAudioDevice(deviceId: string) {
diff --git a/src/renderer/src/components/tabs/Tabs.tsx b/src/renderer/src/components/tabs/Tabs.tsx
new file mode 100644
index 00000000..d6e50b16
--- /dev/null
+++ b/src/renderer/src/components/tabs/Tabs.tsx
@@ -0,0 +1,46 @@
+import { TabsContent } from "./TabsContent";
+import { TabsIndicator } from "./TabsIndicator";
+import { TabsList } from "./TabsList";
+import TabsTrigger from "./TabsTrigger";
+import { useRovingFocusGroup } from "@renderer/lib/roving-focus-group/rovingFocusGroup";
+import { Accessor, createContext, ParentComponent, useContext } from "solid-js";
+
+const DEFAULT_SELECTED_VALUE = "";
+
+export type Props = {
+  defaultValue?: string;
+  value?: Accessor<string>;
+  onValueChange?: (newValue: string) => void;
+};
+export type Context = ReturnType<typeof useProviderValue>;
+
+function useProviderValue(props: Props) {
+  return useRovingFocusGroup({
+    defaultProp: props.defaultValue || DEFAULT_SELECTED_VALUE,
+    onChange: props.onValueChange,
+    prop: props.value,
+  });
+}
+
+export const TabsContext = createContext<Context>();
+const TabsRoot: ParentComponent<Props> = (props) => {
+  const value = useProviderValue(props);
+  return <TabsContext.Provider value={value}>{props.children}</TabsContext.Provider>;
+};
+
+export function useTabs(): Context {
+  const state = useContext(TabsContext);
+  if (!state) {
+    throw new Error("useTabs needs to be used inisde of the `ListContext` component.");
+  }
+  return state;
+}
+
+const Tabs = Object.assign(TabsRoot, {
+  Trigger: TabsTrigger,
+  List: TabsList,
+  Content: TabsContent,
+  Indicator: TabsIndicator,
+});
+
+export default Tabs;
diff --git a/src/renderer/src/components/tabs/TabsContent.tsx b/src/renderer/src/components/tabs/TabsContent.tsx
new file mode 100644
index 00000000..1aabcb2f
--- /dev/null
+++ b/src/renderer/src/components/tabs/TabsContent.tsx
@@ -0,0 +1,14 @@
+import { useTabs } from "./Tabs";
+import { createMemo, ParentComponent, Show } from "solid-js";
+
+export type Props = {
+  value: string;
+};
+export const TabsContent: ParentComponent<Props> = (props) => {
+  const state = useTabs();
+  const isSelected = createMemo(() => {
+    return state.value() === props.value;
+  });
+
+  return <Show when={isSelected()}>{props.children}</Show>;
+};
diff --git a/src/renderer/src/components/tabs/TabsIndicator.tsx b/src/renderer/src/components/tabs/TabsIndicator.tsx
new file mode 100644
index 00000000..ec69e29b
--- /dev/null
+++ b/src/renderer/src/components/tabs/TabsIndicator.tsx
@@ -0,0 +1,33 @@
+import { useTabs } from "./Tabs";
+import { cn } from "@renderer/lib/css.utils";
+import { Component, createMemo } from "solid-js";
+import { JSX } from "solid-js/jsx-runtime";
+
+type Props = JSX.IntrinsicElements["div"];
+export const TabsIndicator: Component<Props> = (props) => {
+  const state = useTabs();
+  const style = createMemo((): JSX.CSSProperties => {
+    const activeElement = state.currentlyActiveElement();
+    if (typeof activeElement === "undefined") {
+      return {};
+    }
+
+    const { width, height } = activeElement.getBoundingClientRect();
+    return {
+      position: "absolute",
+      "transition-property": "left, width, height",
+      top: `${activeElement.offsetTop}px`,
+      left: `${activeElement.offsetLeft}px`,
+      width: `${width}px`,
+      height: `${height}px`,
+    };
+  });
+
+  return (
+    <div
+      {...props}
+      class={cn("fixed rounded-lg bg-surface transition", props.class)}
+      style={style()}
+    />
+  );
+};
diff --git a/src/renderer/src/components/tabs/TabsList.tsx b/src/renderer/src/components/tabs/TabsList.tsx
new file mode 100644
index 00000000..5aaa7d37
--- /dev/null
+++ b/src/renderer/src/components/tabs/TabsList.tsx
@@ -0,0 +1,36 @@
+import { useTabs } from "./Tabs";
+import { cn } from "@renderer/lib/css.utils";
+import { createMemo, JSX, onMount, ParentComponent, splitProps } from "solid-js";
+
+type Props = JSX.IntrinsicElements["div"];
+export const TabsList: ParentComponent<Props> = (_props) => {
+  const [props, rest] = splitProps(_props, ["children", "class"]);
+  const state = useTabs();
+
+  onMount(state.onListmounted);
+
+  const hasSelectedValue = createMemo(() => {
+    return state.registeredTabs().includes(state.value());
+  });
+
+  return (
+    <div
+      {...state.attrs}
+      {...rest}
+      tabIndex={hasSelectedValue() ? -1 : 0}
+      onFocus={(event) => {
+        if (!event.currentTarget.isSameNode(event.target)) {
+          return;
+        }
+
+        state.tryFocusFirstItem();
+      }}
+      class={cn(
+        "relative flex rounded-xl bg-thin-material p-1 gap-1 ring-1 ring-stroke",
+        props.class,
+      )}
+    >
+      {props.children}
+    </div>
+  );
+};
diff --git a/src/renderer/src/components/tabs/TabsTrigger.tsx b/src/renderer/src/components/tabs/TabsTrigger.tsx
new file mode 100644
index 00000000..eb906d3c
--- /dev/null
+++ b/src/renderer/src/components/tabs/TabsTrigger.tsx
@@ -0,0 +1,32 @@
+import { useTabs } from "./Tabs";
+import { cn } from "@renderer/lib/css.utils";
+import { Component, splitProps } from "solid-js";
+import { JSX } from "solid-js/jsx-runtime";
+
+export type Props = JSX.IntrinsicElements["button"] & {
+  value: string;
+  onSelectedByClick?: () => void;
+};
+const TabsTrigger: Component<Props> = (_props) => {
+  const [props, rest] = splitProps(_props, ["value", "onSelectedByClick", "class"]);
+  const { attrs, isSelected, tabIndex } = useTabs().item(props.value, {
+    onSelectedByClick: props.onSelectedByClick,
+  });
+  return (
+    <button
+      data-selected={isSelected()}
+      tabIndex={tabIndex()}
+      {...attrs}
+      {...rest}
+      class={cn(
+        "ring-offset-background z-10 flex h-[33px] items-center gap-2 rounded-lg px-3 text-subtext transition-colors",
+        props.class,
+      )}
+      classList={{
+        "hover:bg-surface/15": !isSelected(),
+      }}
+    />
+  );
+};
+
+export default TabsTrigger;
diff --git a/src/renderer/src/components/windows-control/WindowsControl.tsx b/src/renderer/src/components/windows-control/WindowsControl.tsx
new file mode 100644
index 00000000..9ebc578b
--- /dev/null
+++ b/src/renderer/src/components/windows-control/WindowsControl.tsx
@@ -0,0 +1,40 @@
+import { cn } from "@renderer/lib/css.utils";
+import { MinusIcon, SquareIcon, XIcon } from "lucide-solid";
+import { Component, JSX, splitProps } from "solid-js";
+
+export const WindowsControls: Component = () => {
+  const minimize = () => {
+    window.api.request("window::minimize");
+  };
+  const toggleMaximize = () => {
+    window.api.request("window::maximize");
+  };
+  const close = () => {
+    window.api.request("window::close");
+  };
+
+  return (
+    <div class="flex no-drag">
+      <WindownButton onClick={minimize}>
+        <MinusIcon size={20} />
+      </WindownButton>
+      <WindownButton onClick={toggleMaximize}>
+        <SquareIcon size={18} />
+      </WindownButton>
+      <WindownButton onClick={close} class="hover:bg-red-500">
+        <XIcon size={20} />
+      </WindownButton>
+    </div>
+  );
+};
+
+type ButtonProps = JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+const WindownButton: Component<ButtonProps> = (_props) => {
+  const [props, rest] = splitProps(_props, ["class"]);
+  return (
+    <button
+      class={cn("app-no-drag p-2 flex items-center justify-center hover:bg-surface", props.class)}
+      {...rest}
+    />
+  );
+};
diff --git a/src/renderer/src/css/global.css b/src/renderer/src/css/global.css
index eaa3509a..165a3d51 100644
--- a/src/renderer/src/css/global.css
+++ b/src/renderer/src/css/global.css
@@ -2,53 +2,64 @@
 @tailwind components;
 @tailwind utilities;
 
-@font-face {
-  font-family: "Nunito";
-  src: url("@renderer/assets/fonts/Nunito-Variable.ttf") format("truetype");
-  font-weight: 100 900;
-  font-style: normal;
-}
+@layer base {
+  @font-face {
+    font-family: "Nunito";
+    src: url("@renderer/assets/fonts/Nunito-Variable.ttf") format("truetype");
+    font-weight: 100 900;
+    font-style: normal;
+  }
 
-@font-face {
-  font-family: "Nunito";
-  src: url("@renderer/assets/fonts/Nunito-Italic-Variable.ttf") format("truetype");
-  font-weight: 100 900;
-  font-style: italic;
-}
+  @font-face {
+    font-family: "Nunito";
+    src: url("@renderer/assets/fonts/Nunito-Italic-Variable.ttf") format("truetype");
+    font-weight: 100 900;
+    font-style: italic;
+  }
 
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  user-select: none;
-}
+  :focus-visible {
+    @apply outline outline-blue-500 outline-2;
+  }
 
-html {
-  background: rgba(var(--color-thick-material));
-  color: rgb(var(--color-text));
+  .transition-base {
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
 
-  font-family: "Nunito", sans-serif;
-  font-optical-sizing: auto;
-}
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    user-select: none;
+  }
 
-button {
-  all: unset;
-}
+  html {
+    background: rgba(var(--color-thick-material));
+    color: rgb(var(--color-text));
 
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
+    font-family: "Nunito", sans-serif;
+    font-optical-sizing: auto;
+  }
 
-::-webkit-scrollbar-track {
-  background-color: transparent;
-}
+  button {
+    all: unset;
+  }
 
-::-webkit-scrollbar-thumb {
-  background-color: rgba(var(--color-surface), 0.5);
-  border-radius: 999px;
-}
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: rgba(var(--color-surface), 0.5);
+    border-radius: 999px;
+  }
 
-::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(var(--color-surface), 0.7);
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(var(--color-surface), 0.7);
+  }
 }
diff --git a/src/renderer/src/keyboard-registers/f2-shuffle.tsx b/src/renderer/src/keyboard-registers/f2-shuffle.tsx
index 4f5629aa..442f43c8 100644
--- a/src/renderer/src/keyboard-registers/f2-shuffle.tsx
+++ b/src/renderer/src/keyboard-registers/f2-shuffle.tsx
@@ -1,6 +1,6 @@
 import { addNotice } from "../components/notice/NoticeContainer";
 import { Keyboard } from "../lib/Keyboard";
-import { mainActiveTab, TABS } from "@renderer/scenes/main-scene/main.utils";
+import { sidebarActiveTab, SIDEBAR_PAGES } from "@renderer/scenes/main-scene/main.utils";
 import { ShuffleIcon } from "lucide-solid";
 
 Keyboard.register({
@@ -8,7 +8,7 @@ Keyboard.register({
   onPress: async () => {
     await window.api.request("queue::shuffle");
 
-    if (mainActiveTab() !== TABS.SONGS.value) {
+    if (sidebarActiveTab() !== SIDEBAR_PAGES.SONGS.value) {
       return;
     }
 
diff --git a/src/renderer/src/keyboard-registers/initialize.ts b/src/renderer/src/keyboard-registers/initialize.ts
index 374cdc30..4dd9299d 100644
--- a/src/renderer/src/keyboard-registers/initialize.ts
+++ b/src/renderer/src/keyboard-registers/initialize.ts
@@ -1,6 +1,7 @@
 import { Keyboard } from "../lib/Keyboard";
 import "./c-play-pause";
 import "./f2-shuffle";
+import "./toggle-sidebar";
 import "./x-play-again";
 
 Keyboard.init();
diff --git a/src/renderer/src/keyboard-registers/toggle-sidebar.ts b/src/renderer/src/keyboard-registers/toggle-sidebar.ts
new file mode 100644
index 00000000..9f85bcff
--- /dev/null
+++ b/src/renderer/src/keyboard-registers/toggle-sidebar.ts
@@ -0,0 +1,18 @@
+import { setSidebarExpanded } from "@renderer/scenes/main-scene/main.utils";
+import { Keyboard } from "../lib/Keyboard";
+
+Keyboard.register({
+  key: "b",
+  modifiers: ["cmd"],
+  onPress: () => {
+    setSidebarExpanded((e) => !e);
+  },
+});
+
+Keyboard.register({
+  key: "b",
+  modifiers: ["ctrl"],
+  onPress: () => {
+    setSidebarExpanded((e) => !e);
+  },
+});
diff --git a/src/renderer/src/lib/Keyboard.ts b/src/renderer/src/lib/Keyboard.ts
index 3632d85e..4574fbb1 100644
--- a/src/renderer/src/lib/Keyboard.ts
+++ b/src/renderer/src/lib/Keyboard.ts
@@ -1,4 +1,4 @@
-type Modifiers = "ctrl" | "shift" | "alt";
+type Modifiers = "ctrl" | "shift" | "alt" | "cmd";
 
 export type KeyboardRegister = {
   onPress: () => any;
@@ -40,9 +40,14 @@ export class Keyboard {
           continue;
         }
 
+        if (r.modifiers?.includes("cmd") && evt.metaKey !== true) {
+          continue;
+        }
+
         const rModCount = r.modifiers !== undefined ? r.modifiers.length : 0;
 
-        const evtModCount = Number(evt.altKey) + Number(evt.shiftKey) + Number(evt.ctrlKey);
+        const evtModCount =
+          Number(evt.altKey) + Number(evt.shiftKey) + Number(evt.ctrlKey) + Number(evt.metaKey);
 
         if (rModCount !== evtModCount) {
           continue;
diff --git a/src/renderer/src/lib/os.ts b/src/renderer/src/lib/os.ts
new file mode 100644
index 00000000..5292f59c
--- /dev/null
+++ b/src/renderer/src/lib/os.ts
@@ -0,0 +1,7 @@
+import { createSignal } from "solid-js";
+
+export const [os, setOs] = createSignal<NodeJS.Platform>();
+
+export const fetchOs = async () => {
+  return await window.api.request("os::platform");
+};
diff --git a/src/renderer/src/lib/roving-focus-group/rovingFocusGroup.ts b/src/renderer/src/lib/roving-focus-group/rovingFocusGroup.ts
new file mode 100644
index 00000000..7510202b
--- /dev/null
+++ b/src/renderer/src/lib/roving-focus-group/rovingFocusGroup.ts
@@ -0,0 +1,237 @@
+import { DOMElement } from "solid-js/jsx-runtime";
+import useControllableState from "../controllable-state";
+import { Accessor, createMemo, createSignal, onCleanup, onMount } from "solid-js";
+
+const ITEM_DATA_ATTR = "data-item";
+const DEFAULT_SELECTED_VALUE = "";
+
+const canFocus = (
+  element: Element | null | undefined,
+): element is Element & {
+  focus(): void;
+} => {
+  if (!element || !("focus" in element) || typeof element.focus !== "function") {
+    return false;
+  }
+
+  return true;
+};
+
+type Params = {
+  defaultProp?: string;
+  prop?: Accessor<string>;
+  onChange?: (newValue: string) => void;
+  updateFocusOnHover?: boolean;
+  onKeyUp?: () => void;
+};
+export function useRovingFocusGroup(props: Params = {}) {
+  let container!: HTMLElement;
+
+  const [registeredTabs, setRegisteredTabs] = createSignal<string[]>([]);
+
+  const [hasMounted, setHasMounted] = createSignal(false);
+  const [currentStopId, setCurrentStopId] = useControllableState({
+    defaultProp: props.defaultProp || DEFAULT_SELECTED_VALUE,
+    onChange: props.onChange,
+    prop: props.prop,
+  });
+
+  const onListmounted = () => {
+    setHasMounted(true);
+  };
+
+  const findOrderedNodes = () => {
+    return Array.from(container.querySelectorAll(`[${ITEM_DATA_ATTR}]:not([disabled])`));
+  };
+
+  onMount(() => {
+    if (currentStopId()) {
+      return;
+    }
+
+    tryFocusFirstItem();
+  });
+
+  const tryFocusFirstItem = () => {
+    const [firstNode] = findOrderedNodes();
+    if (!canFocus(firstNode)) {
+      return;
+    }
+
+    firstNode.focus();
+    setCurrentStopId(firstNode.getAttribute(ITEM_DATA_ATTR)!);
+  };
+
+  const handleItemKeyUp = (
+    event: KeyboardEvent & {
+      currentTarget: DOMElement;
+      target: DOMElement;
+    },
+  ) => {
+    if (!event.currentTarget.isSameNode(event.target)) {
+      return;
+    }
+
+    props.onKeyUp?.();
+
+    const orderedNodes = findOrderedNodes();
+    const currentlySelectedNodeIndex = orderedNodes.findIndex(
+      (node) => node.getAttribute(ITEM_DATA_ATTR) === currentStopId(),
+    );
+
+    let newIndex = -1;
+    switch (event.key) {
+      case "ArrowUp":
+      case "ArrowLeft": {
+        if (currentlySelectedNodeIndex === 0) {
+          newIndex = currentlySelectedNodeIndex;
+          break;
+        }
+
+        newIndex = currentlySelectedNodeIndex - 1;
+        break;
+      }
+      case "ArrowDown":
+      case "ArrowRight": {
+        if (currentlySelectedNodeIndex === orderedNodes.length - 1) {
+          newIndex = currentlySelectedNodeIndex;
+          break;
+        }
+
+        newIndex = currentlySelectedNodeIndex + 1;
+        break;
+      }
+
+      case "Home":
+      case "PageUp": {
+        newIndex = 0;
+        break;
+      }
+
+      case "End":
+      case "PageDown": {
+        newIndex = orderedNodes.length - 1;
+        break;
+      }
+
+      default:
+        break;
+    }
+
+    if (newIndex === -1) {
+      return;
+    }
+
+    event.preventDefault();
+
+    const nextFocused = orderedNodes[newIndex];
+    if (!canFocus(nextFocused)) {
+      return;
+    }
+
+    nextFocused.focus();
+    setCurrentStopId(nextFocused.getAttribute(ITEM_DATA_ATTR)!);
+  };
+
+  const currentlyActiveElement = createMemo(() => {
+    if (!hasMounted()) {
+      return;
+    }
+
+    const stopId = currentStopId();
+    const orderedNodes = Array.from(container?.querySelectorAll(`[${ITEM_DATA_ATTR}]`) ?? []);
+    if (!orderedNodes) {
+      return;
+    }
+
+    return orderedNodes.find((node) => node.getAttribute(ITEM_DATA_ATTR) === stopId) as HTMLElement;
+  });
+
+  return {
+    registeredTabs,
+    currentlyActiveElement,
+    onListmounted,
+    tryFocusFirstItem,
+    value: currentStopId,
+    attrs: {
+      ref: (node: HTMLElement) => {
+        container = node;
+      },
+    },
+    item: (
+      tabStopId?: string,
+      options: {
+        onSelectedByClick?: () => void;
+        onPointerMove?: () => void;
+      } = {},
+    ) => {
+      const getCurrentOption = () => {
+        return container.querySelector(`[${ITEM_DATA_ATTR}="${tabStopId}"]`);
+      };
+
+      const handlePointerMove = () => {
+        options.onPointerMove?.();
+
+        if (!props.updateFocusOnHover) {
+          return;
+        }
+
+        const optionToFocus = getCurrentOption();
+        if (!canFocus(optionToFocus)) {
+          return;
+        }
+
+        if (tabStopId) {
+          setCurrentStopId(tabStopId);
+        }
+
+        optionToFocus.focus();
+      };
+
+      const handleClick = () => {
+        if (!tabStopId) {
+          return;
+        }
+
+        setCurrentStopId(tabStopId);
+        options.onSelectedByClick?.();
+        const nextFocused = getCurrentOption();
+        if (!canFocus(nextFocused)) {
+          return;
+        }
+
+        nextFocused.focus();
+      };
+
+      const isSelected = createMemo(() => {
+        return currentStopId() === tabStopId;
+      });
+
+      const tabIndex = createMemo(() => {
+        return isSelected() ? 0 : -1;
+      });
+
+      onMount(() => {
+        if (!tabStopId) {
+          return;
+        }
+
+        setRegisteredTabs((t) => [...t, tabStopId]);
+        onCleanup(() => {
+          setRegisteredTabs((t) => t.filter((tab) => tab !== tabStopId));
+        });
+      });
+
+      return {
+        isSelected,
+        tabIndex,
+        attrs: {
+          onKeyUp: handleItemKeyUp,
+          onClick: handleClick,
+          onPointerMove: handlePointerMove,
+          [ITEM_DATA_ATTR]: tabStopId ?? "fallback",
+        },
+      };
+    },
+  };
+}
diff --git a/src/renderer/src/scenes/ErrorScene.tsx b/src/renderer/src/scenes/ErrorScene.tsx
index 20444dc6..cdb733af 100644
--- a/src/renderer/src/scenes/ErrorScene.tsx
+++ b/src/renderer/src/scenes/ErrorScene.tsx
@@ -17,7 +17,7 @@ export default function ErrorScene() {
 
   return (
     <div id="error" class="w-full h-screen grid place-items-center">
-      <div class="p-6 rounded-2xl border border-red/20 shadow-2xl space-y-4 bg-red/5">
+      <div class="p-6 rounded-2xl border border-danger/20 shadow-2xl space-y-4 bg-danger/5">
         <h2>{msg()}</h2>
         <Button onClick={dismissed}>Dismiss</Button>
       </div>
diff --git a/src/renderer/src/scenes/main-scene/MainScene.tsx b/src/renderer/src/scenes/main-scene/MainScene.tsx
index 01f3aca9..0a6fee7a 100644
--- a/src/renderer/src/scenes/main-scene/MainScene.tsx
+++ b/src/renderer/src/scenes/main-scene/MainScene.tsx
@@ -1,212 +1,120 @@
 import SongDetail from "../../components/song/song-detail/SongDetail";
-import SongList from "../../components/song/song-list/SongList";
-import { mainActiveTab, setMainActiveTab, Tab, TABS } from "./main.utils";
 import "./styles.css";
 import Button from "@renderer/components/button/Button";
-import NoticeContainer from "@renderer/components/notice/NoticeContainer";
-import Settings from "@renderer/components/settings/Settings";
 import SongImage from "@renderer/components/song/SongImage";
-import SongQueue from "@renderer/components/song/song-queue/SongQueue";
-import {
-  songQueueModalOpen,
-  toggleSongQueueModalOpen,
-} from "@renderer/components/song/song-queue/song-queue.utils";
 import { song } from "@renderer/components/song/song.utils";
-import { LayersIcon, Minimize2Icon, MinusIcon, SquareIcon, XIcon } from "lucide-solid";
+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 { Sidebar } from "./Sidebar";
+import Popover from "@renderer/components/popover/Popover";
+import SongQueue from "@renderer/components/song/song-queue/SongQueue";
+import ResizablePanel from "@renderer/components/resizable-panel/ResizablePanel";
 import {
-  Accessor,
-  Component,
-  createEffect,
-  createSignal,
-  For,
-  JSXElement,
-  Match,
-  onCleanup,
-  onMount,
-  Setter,
-  Show,
-  Switch,
-} from "solid-js";
+  setAnimateSidebar,
+  setSidebarWidth,
+  settingsWriteSidebarWidth,
+  sidebarWidth,
+  useMainResizableOptions,
+} from "./main.utils";
 
 const MainScene: Component = () => {
+  const { maxSidebarWidth, offsetFromPanel } = useMainResizableOptions();
   return (
-    <div class="main-scene flex h-screen flex-col overflow-hidden">
-      <NoticeContainer />
-      <Nav />
-      <main class="relative flex h-[calc(100vh-52px)]">
-        <TabContent />
-        <div class="flex flex-1 items-center justify-center song-detail-gradient">
-          <SongDetail />
-        </div>
-        <QueueModal />
-      </main>
+    <div class="min-h-screen h-full flex flex-col">
+      <Switch>
+        <Match when={os() === "darwin"}>
+          <MacNav />
+        </Match>
+        <Match when={os() !== "darwin"}>
+          <WindownsNav />
+        </Match>
+      </Switch>
 
-      <div class="pointer-events-none absolute inset-0 z-[-1] opacity-[0.12]">
+      <ResizablePanel
+        offsetFromPanel={offsetFromPanel()}
+        min={os() === "darwin" ? 432 : 390}
+        max={maxSidebarWidth()}
+        value={sidebarWidth as Accessor<number>}
+        onValueChange={setSidebarWidth}
+        onValueStart={() => setAnimateSidebar(false)}
+        onValueCommit={(width) => {
+          setAnimateSidebar(true);
+          settingsWriteSidebarWidth(width);
+        }}
+      >
+        <main class="main-scene relative flex-1 app-grid">
+          <Sidebar />
+          <div
+            class="song relative flex flex-1 items-center justify-center"
+            classList={{
+              "m-2 rounded-3xl": os() === "darwin",
+              "mt-0 m-2": os() !== "darwin",
+            }}
+          >
+            <SongDetail />
+            <Queue />
+            <div class="pointer-events-none absolute inset-0 overflow-hidden rounded-lg shadow-2xl ring-2 ring-inset ring-stroke">
+              <SongImage
+                src={song().bg}
+                instantLoad={true}
+                class="absolute inset-0 bg-cover bg-fixed bg-left-top opacity-30 blur-lg filter"
+              />
+            </div>
+          </div>
+        </main>
+      </ResizablePanel>
+      <div class="pointer-events-none fixed h-full inset-0 z-[-1]">
         <SongImage
           src={song().bg}
           instantLoad={true}
-          class="h-full w-full bg-cover blur-xl filter"
+          class="h-full w-full bg-cover bg-fixed bg-center blur-lg filter"
         />
       </div>
+
+      <div class="pointer-events-none fixed h-full inset-0 z-[-1] bg-black/80" />
     </div>
   );
 };
 
-const Nav: Component = () => {
-  const [os, setOs] = createSignal<NodeJS.Platform>();
-  const [maximized, setMaximized] = createSignal<boolean>(false);
-
-  onMount(async () => {
-    const fetchOS = async () => {
-      return await window.api.request("os::platform");
-    };
-
-    const fetchMaximized = async () => {
-      return await window.api.request("window::isMaximized");
-    };
-
-    setOs(await fetchOS());
-    setMaximized(await fetchMaximized());
-  });
-
-  createEffect(() => {
-    const resizeListener = (maximized: boolean) => {
-      setMaximized(maximized);
-    };
-
-    window.api.listen("window::maximizeChange", resizeListener);
-    return () => {
-      window.api.removeListener("window::maximizeChange", resizeListener);
-    };
-  });
+const Queue: Component = () => {
+  const [isOpen, setIsOpen] = createSignal(false);
 
   return (
-    <nav
-      class="nav"
-      style={os() === "darwin" ? { padding: "0px 0px 0px 95px" } : { padding: "0px 0px 0px 20px" }}
+    <Popover
+      placement="bottom-end"
+      offset={{
+        mainAxis: 8,
+      }}
+      onValueChange={setIsOpen}
+      isOpen={isOpen}
     >
-      <For each={Object.values(TABS)}>
-        {({ label, ...rest }) => <NavItem {...rest}>{label}</NavItem>}
-      </For>
-
-      <div class="nav__queue ml-auto">
-        <Button
-          variant="ghost"
-          size="icon"
-          classList={{
-            "text-text": songQueueModalOpen(),
-          }}
-          class="mr-2"
-          onClick={toggleSongQueueModalOpen}
-        >
-          <LayersIcon size={20} />
+      <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>
-      </div>
-      {os() !== "darwin" && <WindowControls maximized={maximized} setMaximized={setMaximized} />}
-    </nav>
+      </Popover.Anchor>
+
+      <Popover.Portal>
+        <Popover.Overlay />
+        <Popover.Content class="w-[480px] max-h-[600px] flex p-0">
+          <SongQueue />
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover>
   );
 };
 
-function WindowControls(props: { maximized: Accessor<boolean>; setMaximized: Setter<boolean> }) {
-  return (
-    <div class="nav-window-controls">
-      <button
-        onClick={async () => window.api.request("window::minimize")}
-        class="nav-window-control"
-      >
-        <MinusIcon size={20} />
-      </button>
-      <button
-        onClick={async () => {
-          window.api.request("window::maximize");
-          props.setMaximized(!props.maximized());
-        }}
-        class="nav-window-control"
-      >
-        {props.maximized() ? <Minimize2Icon size={20} /> : <SquareIcon size={18} />}
-      </button>
-      <button
-        onClick={async () => window.api.request("window::close")}
-        class="nav-window-control close"
-      >
-        <XIcon size={20} />
-      </button>
-    </div>
-  );
-}
-
-type NavItemProps = Pick<Tab, "value" | "Icon"> & {
-  children: JSXElement;
-};
-const NavItem: Component<NavItemProps> = (props) => {
-  return (
-    <button
-      class={`nav-item flex items-center gap-4 rounded-sm px-4 py-1 hover:bg-surface ${mainActiveTab() === props.value ? "bg-surface" : ""}`}
-      onClick={() => setMainActiveTab(props.value)}
-    >
-      <span class={`${mainActiveTab() === props.value ? "" : "opacity-70"}`}>
-        <props.Icon size={20} />
-      </span>
-      <span
-        class={`text-base font-semibold ${mainActiveTab() === props.value ? "text-text" : "text-subtext"}`}
-      >
-        {props.children}
-      </span>
-    </button>
-  );
-};
-
-const TabContent: Component = () => {
-  return (
-    <div class="h-full w-[480px] min-w-[320px] overflow-y-auto border-r border-stroke/10 bg-regular-material shadow-2xl">
-      <Switch fallback={<div>Tab not found</div>}>
-        <Match when={mainActiveTab() === TABS.SONGS.value}>
-          <SongList isAllSongs={true} />
-        </Match>
-        <Match when={mainActiveTab() === TABS.SETTINGS.value}>
-          <Settings />
-        </Match>
-      </Switch>
-    </div>
-  );
+const MacNav: Component = () => {
+  return <nav class="drag fixed left-0 top-0 h-16 w-screen hover:bg-subtext" />;
 };
 
-const QueueModal: Component = () => {
-  let queueModal: HTMLDivElement | undefined;
-
-  const handleOutsideClick = (event: MouseEvent) => {
-    if (event.target instanceof HTMLElement) {
-      if (
-        queueModal &&
-        !queueModal.contains(event.target as Node) &&
-        event.target.closest(".popover-overlay") === null
-      ) {
-        toggleSongQueueModalOpen();
-      }
-    }
-  };
-
-  createEffect(() => {
-    if (songQueueModalOpen()) {
-      document.addEventListener("click", handleOutsideClick);
-    } else {
-      document.removeEventListener("click", handleOutsideClick);
-    }
-
-    onCleanup(() => {
-      document.removeEventListener("click", handleOutsideClick);
-    });
-  });
-
+const WindownsNav: Component = () => {
   return (
-    <Show when={songQueueModalOpen()}>
-      <div
-        class="queue-modal absolute bottom-0 right-0 top-0 z-20 h-full w-[480px] overflow-y-auto border-l border-stroke shadow-2xl"
-        ref={queueModal}
-      >
-        <SongQueue />
-      </div>
-    </Show>
+    <nav class="nav drag relative flex items-center justify-end">
+      <WindowsControls />
+    </nav>
   );
 };
 
diff --git a/src/renderer/src/scenes/main-scene/Sidebar.tsx b/src/renderer/src/scenes/main-scene/Sidebar.tsx
new file mode 100644
index 00000000..81eef645
--- /dev/null
+++ b/src/renderer/src/scenes/main-scene/Sidebar.tsx
@@ -0,0 +1,130 @@
+import Tabs from "@renderer/components/tabs/Tabs";
+import { Component, createMemo, For, Show } from "solid-js";
+import {
+  animateSidebar,
+  NAV_ITEMS,
+  setSidebarActiveTab,
+  setSidebarExpanded,
+  SIDEBAR_PAGES,
+  sidebarActiveTab,
+  sidebarExpanded,
+} from "./main.utils";
+import SongList from "@renderer/components/song/song-list/SongList";
+import { SettingsIcon, SidebarIcon } from "lucide-solid";
+import Button from "@renderer/components/button/Button";
+import Settings from "@renderer/components/settings/Settings";
+import { os } from "@renderer/lib/os";
+import ResizablePanel, {
+  useResizablePanel,
+} from "@renderer/components/resizable-panel/ResizablePanel";
+import { cn } from "@renderer/lib/css.utils";
+
+function toPx(value: number) {
+  return `${value}px`;
+}
+
+export const Sidebar: Component = () => {
+  const state = useResizablePanel();
+
+  const toggleSidebarShow = () => {
+    setSidebarExpanded((a) => !a);
+  };
+
+  return (
+    <div
+      class="sidebar absolute lg:relative z-40 h-full bg-black/80 backdrop-blur-md border-r-stroke border-e-2 lg:border-e-0 lg:bg-transparent shadow-2xl lg:shadow-none transition-colors transition-base"
+      style={{
+        "transition-property": animateSidebar() ? "width" : "none",
+        width: toPx(sidebarExpanded() ? state.value() : 0),
+      }}
+    >
+      <div
+        class="absolute right-0 bottom-0 h-full flex flex-col gap-2"
+        style={{
+          "min-width": toPx(state.value()),
+        }}
+      >
+        <Button
+          size="square"
+          variant="outlined"
+          onClick={toggleSidebarShow}
+          class="no-drag fixed z-10"
+          classList={{
+            // Windows/Linux - Offset for the nav on the top
+            "top-[8px] left-[16px]": os() !== "darwin",
+
+            // Mac - Offset for the traffic lights on the left
+            "top-[16px] left-[86px]": os() === "darwin",
+          }}
+        >
+          <SidebarIcon size={20} />
+        </Button>
+
+        <Tabs value={sidebarActiveTab} onValueChange={setSidebarActiveTab}>
+          <SidebarTabs />
+          <SidebarContent />
+        </Tabs>
+      </div>
+
+      <Show when={sidebarExpanded()}>
+        <ResizablePanel.DragHandler
+          class={cn(
+            "absolute -right-4 lg:-right-6 lg:pb-4",
+            os() === "darwin" ? "lg:pt-4" : "lg:pt-2",
+          )}
+        />
+      </Show>
+    </div>
+  );
+};
+
+const SidebarTabs: Component = () => {
+  const configButtonVariant = createMemo(() => {
+    return sidebarActiveTab() === SIDEBAR_PAGES.SETTINGS.value ? "secondary" : "outlined";
+  });
+
+  return (
+    <div
+      class="flex pl-4 pr-5 mt-2 ml-9 items-center no-drag"
+      classList={{
+        // Mac - Offset for the traffic lights on the left
+        "pl-[86px] pt-2": os() === "darwin",
+      }}
+    >
+      <Tabs.List class="ml-3">
+        <For each={NAV_ITEMS}>
+          {({ label, value, Icon }) => (
+            <Tabs.Trigger value={value} class="app-no-drag">
+              <Icon size={20} />
+              <span>{label}</span>
+            </Tabs.Trigger>
+          )}
+        </For>
+
+        <Tabs.Indicator />
+      </Tabs.List>
+
+      <Button
+        onClick={() => setSidebarActiveTab(SIDEBAR_PAGES.SETTINGS.value)}
+        class="ml-auto"
+        size="square"
+        variant={configButtonVariant()}
+      >
+        <SettingsIcon size={20} />
+      </Button>
+    </div>
+  );
+};
+
+const SidebarContent: Component = () => {
+  return (
+    <>
+      <Tabs.Content value={SIDEBAR_PAGES.SONGS.value}>
+        <SongList isAllSongs={true} />
+      </Tabs.Content>
+      <Tabs.Content value={SIDEBAR_PAGES.SETTINGS.value}>
+        <Settings />
+      </Tabs.Content>
+    </>
+  );
+};
diff --git a/src/renderer/src/scenes/main-scene/main.utils.ts b/src/renderer/src/scenes/main-scene/main.utils.ts
index acdc2e52..787e84a2 100644
--- a/src/renderer/src/scenes/main-scene/main.utils.ts
+++ b/src/renderer/src/scenes/main-scene/main.utils.ts
@@ -1,6 +1,6 @@
 import type { LucideIcon } from "lucide-solid";
-import { MusicIcon, SettingsIcon } from "lucide-solid";
-import { createSignal } from "solid-js";
+import { Layers3Icon, LayoutListIcon, MusicIcon, SettingsIcon } from "lucide-solid";
+import { createSignal, onCleanup, onMount } from "solid-js";
 
 export type Tab = {
   label: string;
@@ -8,12 +8,22 @@ export type Tab = {
   Icon: LucideIcon;
 };
 
-export const TABS = {
+export const SIDEBAR_PAGES = {
   SONGS: {
     label: "Songs",
     value: "songs",
     Icon: MusicIcon,
   },
+  PLAYLISTS: {
+    label: "Playlists",
+    value: "playlists",
+    Icon: LayoutListIcon,
+  },
+  QUEUE: {
+    label: "Queue",
+    value: "queue",
+    Icon: Layers3Icon,
+  },
   SETTINGS: {
     label: "Settings",
     value: "settings",
@@ -21,5 +31,73 @@ export const TABS = {
   },
 } as const satisfies Record<string, Tab>;
 
-const [mainActiveTab, setMainActiveTab] = createSignal<Tab["value"]>(TABS.SONGS.value);
-export { mainActiveTab, setMainActiveTab };
+export const NAV_ITEMS: Tab[] = [SIDEBAR_PAGES.SONGS, SIDEBAR_PAGES.PLAYLISTS] as const;
+
+// --------------
+// STATE
+// --------------
+
+export const [sidebarActiveTab, setSidebarActiveTab] = createSignal<Tab["value"]>(
+  SIDEBAR_PAGES.SONGS.value,
+);
+
+export const [sidebarExpanded, setSidebarExpanded] = createSignal(true);
+
+export const [animateSidebar, setAnimateSidebar] = createSignal(true);
+
+export const [sidebarWidth, setSidebarWidth] = createSignal<number | undefined>(undefined);
+
+// Initialize settings
+window.api.request("settings::get", "sidebarWidth").then((v) => {
+  setSidebarWidth(v.isNone ? 480 : v.value);
+});
+
+// Update settings
+export async function settingsWriteSidebarWidth(width: number) {
+  await window.api.request("settings::write", "sidebarWidth", width);
+}
+
+// Hooks
+const DEFAULT_MAX_SIDEBAR_WIDTH = 880;
+const LG_OFFSET_FROM_PANEL = 8;
+export const useMainResizableOptions = () => {
+  const [maxSidebarWidth, setMaxSidebarWidth] = createSignal(DEFAULT_MAX_SIDEBAR_WIDTH);
+  const [offsetFromPanel, setOffsetFromPanel] = createSignal<number | undefined>(
+    LG_OFFSET_FROM_PANEL,
+  );
+
+  onMount(() => {
+    const resizeHandler = () => {
+      // Small viewports
+      if (window.innerWidth < 1024) {
+        // Max width will be either 80% of the screen or the default max width,
+        // we prioritize the smallerst
+        setMaxSidebarWidth(Math.min(window.innerWidth * 0.8, DEFAULT_MAX_SIDEBAR_WIDTH));
+
+        // There's no offset
+        setOffsetFromPanel(undefined);
+        return;
+      }
+
+      // Large view port
+      // Max width will try to always left space for the player
+      setMaxSidebarWidth(Math.min(window.innerWidth - 620, DEFAULT_MAX_SIDEBAR_WIDTH));
+      // Recauculate sidebar size with the max contrain
+      setSidebarWidth(Math.min(maxSidebarWidth(), sidebarWidth()!));
+
+      // There should be the large panel offset
+      setOffsetFromPanel(LG_OFFSET_FROM_PANEL);
+    };
+
+    resizeHandler();
+    window.addEventListener("resize", resizeHandler);
+    onCleanup(() => {
+      window.removeEventListener("resize", resizeHandler);
+    });
+  });
+
+  return {
+    maxSidebarWidth,
+    offsetFromPanel,
+  };
+};
diff --git a/src/renderer/src/scenes/main-scene/styles.css b/src/renderer/src/scenes/main-scene/styles.css
index c0443f61..99a878f4 100644
--- a/src/renderer/src/scenes/main-scene/styles.css
+++ b/src/renderer/src/scenes/main-scene/styles.css
@@ -1,64 +1,26 @@
 .main-scene {
+  display: grid;
+  &.app-grid {
+    grid-template-areas:
+      "sidebar song"
+      "sidebar song";
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto 1fr;
+  }
   .nav {
-    display: flex;
-    align-items: center;
-    height: 52px;
-    padding: 0px 20px;
-    background: rgba(var(--color-thick-material), 0.95);
-    gap: 4px;
-    -webkit-app-region: drag;
-
-    .nav-window-controls {
-      height: 100%;
-      display: flex;
-      -webkit-app-region: no-drag;
-      padding-left: 5px;
-    }
-
-    .nav-window-control {
-      width: 45px;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .nav-window-control:hover {
-      background: rgba(var(--color-surface), 0.5);
-    }
-
-    .nav-window-control.close:hover {
-      background: hsl(0, 69%, 50%);
-    }
-
-    .nav-item {
-      display: flex;
-      align-items: center;
-      gap: 16px;
-      padding: 4px 16px;
-      border-radius: 8px;
-      /* Will be phased out in new new ui */
-      -webkit-app-region: no-drag;
-
-      &:is(:hover, :focus) {
-        background: rgba(var(--color-surface), 0.2);
-      }
-
-      &[data-selected="true"] {
-        background: var(var(--color-surface), 0.5);
-        .nav-item__icon {
-          color: rgba(var(--color-text), 1);
-        }
-
-        .nav-item__text {
-          color: var(var(--color-text), 1);
-        }
-      }
-    }
-
-    .nav__queue {
-      margin-left: auto;
-      -webkit-app-region: no-drag;
-    }
+    grid-area: nav;
+  }
+  .song {
+    grid-area: song;
+  }
+  .sidebar {
+    grid-area: sidebar;
   }
 }
+
+.drag {
+  -webkit-app-region: drag;
+}
+.no-drag {
+  -webkit-app-region: no-drag;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index d60d0941..63b70a8d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,14 +1,17 @@
 /** @type {import('tailwindcss').Config} */
 import { noticeAnimations } from "./src/renderer/src/components/notice/NoticeAnimations";
+import { songItemAnimations } from "./src/renderer/src/components/song/song-item/SongItemAnimations";
 
 export default {
   content: ["./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {
       keyframes: {
+        ...songItemAnimations.keyframes,
         ...noticeAnimations.keyframes,
       },
       animation: {
+        ...songItemAnimations.animation,
         ...noticeAnimations.animation,
       },
       colors: {
@@ -22,7 +25,7 @@ export default {
         overlay: "rgba(var(--color-overlay))",
         surface: "rgba(var(--color-surface), 0.2)",
         black: "rgba(var(--color-black))",
-        red: "rgba(var(--color-red))",
+        danger: "rgba(var(--color-red))",
         green: "rgba(var(--color-green))",
       },
       boxShadow: {