diff --git a/electron.vite.config.ts b/electron.vite.config.ts
index e3e919e8..1b3a6d18 100644
--- a/electron.vite.config.ts
+++ b/electron.vite.config.ts
@@ -1,8 +1,8 @@
 import { defineConfig, externalizeDepsPlugin } from "electron-vite";
 import { resolve } from "path";
+import devtools from "solid-devtools/vite";
 import lucidePreprocess from "vite-plugin-lucide-preprocess";
 import solid from "vite-plugin-solid";
-import devtools from "solid-devtools/vite";
 
 export default defineConfig({
   main: {
diff --git a/package.json b/package.json
index 26b689a2..fe8b4f1e 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,6 @@
   "author": "@CaptSiro",
   "type": "module",
   "main": "./out/main/index.js",
-  "packageManager": "^bun@1.1.33",
   "scripts": {
     "build": "bun run typecheck && electron-vite build",
     "build:linux": "electron-vite build && electron-builder --linux --config",
@@ -75,5 +74,6 @@
     "vite": "^5.4.8",
     "vite-plugin-lucide-preprocess": "^1.1.1",
     "vite-plugin-solid": "^2.7.0"
-  }
+  },
+  "packageManager": "^bun@1.1.33"
 }
diff --git a/.prettierrc.ts b/prettier.config.js
similarity index 100%
rename from .prettierrc.ts
rename to prettier.config.js
diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index 932af65f..216ed49b 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -9,9 +9,9 @@ import NoScene from "./scenes/NoScene";
 import DirSelectScene from "./scenes/dir-select-scene/DirSelectScene";
 import LoadingScene from "./scenes/loading-scene/LoadingScene";
 import MainScene from "./scenes/main-scene/MainScene";
+import { sidebarWidth } from "./scenes/main-scene/main.utils";
 import type { JSX } 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>("");
diff --git a/src/renderer/src/components/InfiniteScroller.tsx b/src/renderer/src/components/InfiniteScroller.tsx
index d309b609..035d8bf2 100644
--- a/src/renderer/src/components/InfiniteScroller.tsx
+++ b/src/renderer/src/components/InfiniteScroller.tsx
@@ -224,7 +224,7 @@ const InfiniteScroller: Component<InfinityScrollerProps> = (props) => {
 
   return (
     <div
-      class="grid grid-cols-[repeat(auto-fit,_minmax(340px,_1fr))] gap-4 py-4 items-stretch"
+      class="grid grid-cols-[repeat(auto-fit,_minmax(340px,_1fr))] items-stretch gap-4 py-4"
       ref={container}
       {...rest}
     >
diff --git a/src/renderer/src/components/dropdown-list/DropdownList.tsx b/src/renderer/src/components/dropdown-list/DropdownList.tsx
index a9fd016f..3646f289 100644
--- a/src/renderer/src/components/dropdown-list/DropdownList.tsx
+++ b/src/renderer/src/components/dropdown-list/DropdownList.tsx
@@ -1,8 +1,8 @@
+import { RawList } from "../raw-list/RawList";
 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";
+import { createContext, createSignal, JSX, ParentComponent, useContext } from "solid-js";
 
 export type Props = JSX.IntrinsicElements["div"];
 
diff --git a/src/renderer/src/components/dropdown-list/DropdownListItem.tsx b/src/renderer/src/components/dropdown-list/DropdownListItem.tsx
index 68b9db60..ddab6caf 100644
--- a/src/renderer/src/components/dropdown-list/DropdownListItem.tsx
+++ b/src/renderer/src/components/dropdown-list/DropdownListItem.tsx
@@ -1,7 +1,7 @@
+import { RawList } from "../raw-list/RawList";
 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) => {
diff --git a/src/renderer/src/components/notice/Notice.tsx b/src/renderer/src/components/notice/Notice.tsx
index a54dc7f3..14b66d4e 100644
--- a/src/renderer/src/components/notice/Notice.tsx
+++ b/src/renderer/src/components/notice/Notice.tsx
@@ -165,7 +165,7 @@ const Notice: Component<NoticeProps> = (props) => {
       </div>
 
       <div
-        class="absolute inset-0 m-px overflow-hidden pointer-events-none"
+        class="pointer-events-none absolute inset-0 m-px overflow-hidden"
         style={{
           "border-radius": "13px",
         }}
diff --git a/src/renderer/src/components/popover/Popover.tsx b/src/renderer/src/components/popover/Popover.tsx
index c723cd2c..1c4671d4 100644
--- a/src/renderer/src/components/popover/Popover.tsx
+++ b/src/renderer/src/components/popover/Popover.tsx
@@ -1,9 +1,8 @@
-import { Token, TokenNamespace } from "@renderer/lib/tungsten/token";
+import PopoverAnchor from "./PopoverAnchor";
 import PopoverContent from "./PopoverContent";
 import PopoverOverlay from "./PopoverOverlay";
+import { PopoverPortal, PopoverPortalMountStack } from "./PopoverPortal";
 import PopoverTrigger from "./PopoverTrigger";
-import PopoverAnchor from "./PopoverAnchor";
-
 import "./styles.css";
 import {
   computePosition,
@@ -18,6 +17,7 @@ import {
   ShiftOptions,
 } from "@floating-ui/dom";
 import useControllableState from "@renderer/lib/controllable-state";
+import { Token, TokenNamespace } from "@renderer/lib/tungsten/token";
 import {
   createSignal,
   createContext,
@@ -28,7 +28,6 @@ import {
   onMount,
   onCleanup,
 } from "solid-js";
-import { PopoverPortal, PopoverPortalMountStack } from "./PopoverPortal";
 
 export const DEFAULT_POPOVER_OPEN = false;
 
diff --git a/src/renderer/src/components/popover/PopoverAnchor.tsx b/src/renderer/src/components/popover/PopoverAnchor.tsx
index 1ab5b05e..0f0276a4 100644
--- a/src/renderer/src/components/popover/PopoverAnchor.tsx
+++ b/src/renderer/src/components/popover/PopoverAnchor.tsx
@@ -1,5 +1,5 @@
-import { Component, JSX } from "solid-js";
 import { usePopover } from "./Popover";
+import { Component, JSX } from "solid-js";
 
 export type PopoverAnchorProps = JSX.IntrinsicElements["div"];
 const PopoverAnchor: Component<PopoverAnchorProps> = (props) => {
diff --git a/src/renderer/src/components/popover/PopoverContent.tsx b/src/renderer/src/components/popover/PopoverContent.tsx
index 623c2c2b..75b28ef2 100644
--- a/src/renderer/src/components/popover/PopoverContent.tsx
+++ b/src/renderer/src/components/popover/PopoverContent.tsx
@@ -1,6 +1,6 @@
-import { cn, sn } from "@renderer/lib/css.utils";
 import { popoverStack, usePopover } from "./Popover";
 import { ComputePositionReturn } from "@floating-ui/dom";
+import { cn, sn } from "@renderer/lib/css.utils";
 import createFocusTrap from "solid-focus-trap";
 import { Component, createMemo, onCleanup, onMount, Show } from "solid-js";
 import { JSX } from "solid-js/jsx-runtime";
@@ -56,7 +56,7 @@ const PopoverContent: Component<Props> = (props) => {
       <div
         {...props}
         class={cn(
-          "popover-content rounded-lg p-2 border border-stroke bg-thick-material backdrop-blur-md",
+          "popover-content rounded-lg border border-stroke bg-thick-material p-2 backdrop-blur-md",
           props.class,
         )}
         ref={state.setContentRef}
diff --git a/src/renderer/src/components/raw-list/RawList.tsx b/src/renderer/src/components/raw-list/RawList.tsx
index e38ae543..de544a40 100644
--- a/src/renderer/src/components/raw-list/RawList.tsx
+++ b/src/renderer/src/components/raw-list/RawList.tsx
@@ -10,7 +10,7 @@ export const RawListItem: Component<JSX.IntrinsicElements["button"]> = (_props)
   return (
     <button
       class={cn(
-        "flex items-center justify-between rounded-md px-2 py-1.5 disabled:opacity-50 disabled:pointer-events-none focus:outline-none",
+        "flex items-center justify-between rounded-md px-2 py-1.5 focus:outline-none disabled:pointer-events-none disabled:opacity-50",
         props.class,
       )}
       {...rest}
diff --git a/src/renderer/src/components/resizable-panel/DragHandler.tsx b/src/renderer/src/components/resizable-panel/DragHandler.tsx
index ea1b0e27..f0be5d1b 100644
--- a/src/renderer/src/components/resizable-panel/DragHandler.tsx
+++ b/src/renderer/src/components/resizable-panel/DragHandler.tsx
@@ -1,6 +1,6 @@
-import { Component } from "solid-js";
 import { useResizablePanel } from "./ResizablePanel";
 import { cn } from "@renderer/lib/css.utils";
+import { Component } from "solid-js";
 
 type DragHandlerProps = {
   class?: string;
@@ -58,11 +58,11 @@ export const DragHandler: Component<DragHandlerProps> = (props) => {
         }
       }}
       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",
+        "flex h-full w-4 translate-x-[-50%] cursor-w-resize flex-col items-center justify-center opacity-0 hover:opacity-100 focus:opacity-100",
         props.class,
       )}
     >
-      <div class="bg-white/60 flex-1 w-0.5" />
+      <div class="w-0.5 flex-1 bg-white/60" />
     </div>
   );
 };
diff --git a/src/renderer/src/components/resizable-panel/ResizablePanel.tsx b/src/renderer/src/components/resizable-panel/ResizablePanel.tsx
index 14f626db..d78875f4 100644
--- a/src/renderer/src/components/resizable-panel/ResizablePanel.tsx
+++ b/src/renderer/src/components/resizable-panel/ResizablePanel.tsx
@@ -1,8 +1,8 @@
-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";
+import { Accessor, createContext, createMemo, ParentComponent, useContext } from "solid-js";
+import { DOMElement } from "solid-js/jsx-runtime";
 
 const DEFAULT_RESIZABLE_PANEL_VALUE = 100;
 const DEFAULT_MIN = 0;
diff --git a/src/renderer/src/components/select/Select.tsx b/src/renderer/src/components/select/Select.tsx
index d5d88495..13e90f73 100644
--- a/src/renderer/src/components/select/Select.tsx
+++ b/src/renderer/src/components/select/Select.tsx
@@ -1,12 +1,12 @@
-import { Component, createMemo, ParentComponent, splitProps } from "solid-js";
+import { inputStyles } from "../input/Input";
 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";
+import { ChevronsUpDownIcon } from "lucide-solid";
+import { Component, createMemo, ParentComponent, splitProps } from "solid-js";
 
 export const SelectContainer: ParentComponent<PopoverProps> = (props) => {
   return (
@@ -28,11 +28,11 @@ export const SelectTrigger: ParentComponent<Props> = (_props) => {
       {...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",
+        "box-border flex h-auto min-h-[42px] items-center justify-between gap-2 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" />
+      <ChevronsUpDownIcon size={20} class="flex-shrink-0 text-subtext" />
     </Popover.Trigger>
   );
 };
diff --git a/src/renderer/src/components/selectable-list/SelectableList.tsx b/src/renderer/src/components/selectable-list/SelectableList.tsx
index a2c37158..6cc8f802 100644
--- a/src/renderer/src/components/selectable-list/SelectableList.tsx
+++ b/src/renderer/src/components/selectable-list/SelectableList.tsx
@@ -1,8 +1,8 @@
+import { RawList } from "../raw-list/RawList";
 import SelectableListItem from "./SelectableListItem";
+import useControllableState from "@renderer/lib/controllable-state";
 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 = "";
 
diff --git a/src/renderer/src/components/selectable-list/SelectableListItem.tsx b/src/renderer/src/components/selectable-list/SelectableListItem.tsx
index 087e368a..59d5de7a 100644
--- a/src/renderer/src/components/selectable-list/SelectableListItem.tsx
+++ b/src/renderer/src/components/selectable-list/SelectableListItem.tsx
@@ -1,8 +1,8 @@
+import { RawList } from "../raw-list/RawList";
 import { useSelectableList } from "./SelectableList";
+import { CheckIcon } from "lucide-solid";
 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;
diff --git a/src/renderer/src/components/settings/Settings.tsx b/src/renderer/src/components/settings/Settings.tsx
index 90c587bd..e7d11578 100644
--- a/src/renderer/src/components/settings/Settings.tsx
+++ b/src/renderer/src/components/settings/Settings.tsx
@@ -1,8 +1,8 @@
 import { cn } from "../../lib/css.utils";
+import Select from "../select/Select";
 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 (
diff --git a/src/renderer/src/components/slider/SliderThumb.tsx b/src/renderer/src/components/slider/SliderThumb.tsx
index a3b5b3f6..6feee686 100644
--- a/src/renderer/src/components/slider/SliderThumb.tsx
+++ b/src/renderer/src/components/slider/SliderThumb.tsx
@@ -1,5 +1,5 @@
-import { sn } from "@renderer/lib/css.utils";
 import { useSlider } from "./Slider";
+import { sn } from "@renderer/lib/css.utils";
 import { linearScale } from "@renderer/lib/linear-scale";
 import { Component, createMemo, JSX } from "solid-js";
 
diff --git a/src/renderer/src/components/song/song-detail/SongControls.tsx b/src/renderer/src/components/song/song-detail/SongControls.tsx
index 27119bca..b885c8ae 100644
--- a/src/renderer/src/components/song/song-detail/SongControls.tsx
+++ b/src/renderer/src/components/song/song-detail/SongControls.tsx
@@ -1,4 +1,5 @@
 import { isSongUndefined } from "../../../lib/song";
+import Popover from "../../popover/Popover";
 import {
   isPlaying,
   next,
@@ -27,7 +28,6 @@ import {
   VolumeXIcon,
 } from "lucide-solid";
 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";
 
@@ -76,7 +76,7 @@ const SongControls: Component<SongControlsProps> = (props) => {
           </Button>
 
           <button
-            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"
+            class="flex h-12 w-12 items-center justify-center rounded-full bg-surface text-2xl text-thick-material text-white shadow-lg ring-1 ring-stroke transition-all active:scale-95"
             onClick={() => togglePlay()}
             disabled={disable()}
             title={playHint()}
@@ -214,8 +214,8 @@ const RightPart = () => {
 
         <Portal>
           <Popover.Overlay />
-          <Popover.Content class="flex w-fit min-w-48 flex-col  rounded-xl ring-stroke ring-1 ring-inset bg-thick-material px-1.5 py-3 backdrop-blur-md shadow-xl">
-            <p class="font-medium text-sm text-subtext gap-1 px-2">Custom Speed</p>
+          <Popover.Content class="flex w-fit min-w-48 flex-col rounded-xl bg-thick-material px-1.5 py-3 shadow-xl ring-1 ring-inset ring-stroke backdrop-blur-md">
+            <p class="gap-1 px-2 text-sm font-medium text-subtext">Custom Speed</p>
             <div class="flex flex-col px-2">
               <Slider
                 class="flex h-8 flex-grow items-center"
@@ -230,9 +230,9 @@ const RightPart = () => {
                 </Slider.Track>
                 <Slider.Thumb class="mt-2 block h-4 w-4 rounded-full bg-white" />
               </Slider>
-              <div class="text-xs ">{Math.round(speed() * 100) / 100}x</div>
+              <div class="text-xs">{Math.round(speed() * 100) / 100}x</div>
             </div>
-            <div class="w-full bg-stroke h-px my-2" />
+            <div class="my-2 h-px w-full bg-stroke" />
 
             <For each={PREDEFINED_SPEEDS}>
               {(amount) => <SpeedOption amount={amount}>{amount}</SpeedOption>}
@@ -254,7 +254,7 @@ const SpeedOption: ParentComponent<SpeedOptionProps> = (props) => {
   return (
     <button
       onClick={() => setSpeed(props.amount)}
-      class="flex items-center justify-between rounded-md px-2 py-1.5 disabled:opacity-50 disabled:pointer-events-none focus:outline-none hover:bg-surface"
+      class="flex items-center justify-between rounded-md px-2 py-1.5 hover:bg-surface focus:outline-none disabled:pointer-events-none disabled:opacity-50"
     >
       {props.children}
     </button>
diff --git a/src/renderer/src/components/song/song-detail/SongDetail.tsx b/src/renderer/src/components/song/song-detail/SongDetail.tsx
index 921d3d24..d8b15706 100644
--- a/src/renderer/src/components/song/song-detail/SongDetail.tsx
+++ b/src/renderer/src/components/song/song-detail/SongDetail.tsx
@@ -31,8 +31,8 @@ const SongDetail: Component = () => {
 
       <div class="w-full max-w-[800px] space-y-4">
         <div class="song-detail__texts">
-          <h2 class="text-2xl font-bold select-text">{song().title}</h2>
-          <span class="text-lg select-text">{song().artist}</span>
+          <h2 class="select-text text-2xl font-bold">{song().title}</h2>
+          <span class="select-text text-lg">{song().artist}</span>
         </div>
 
         <ProgressBar averageColor={colorData().primaryColor()} />
@@ -64,7 +64,7 @@ const ProgressBar = (props: ProgressBarProps) => {
     >
       <Slider.Track class="flex h-7 items-center rounded-xl border border-stroke bg-thick-material p-1">
         <Slider.Range
-          class="block h-5 rounded-l-lg ring-inset ring-1 ring-stroke bg-surface shadow-[inset_-20px_0_10px_-10px_#00000033]"
+          class="block h-5 rounded-l-lg bg-surface shadow-[inset_-20px_0_10px_-10px_#00000033] ring-1 ring-inset ring-stroke"
           style={{
             "background-color": props.averageColor,
           }}
diff --git a/src/renderer/src/components/song/song-item/SongItem.tsx b/src/renderer/src/components/song/song-item/SongItem.tsx
index e18e501b..18d3209e 100644
--- a/src/renderer/src/components/song/song-item/SongItem.tsx
+++ b/src/renderer/src/components/song/song-item/SongItem.tsx
@@ -4,9 +4,9 @@ import SongHint from "../SongHint";
 import SongImage from "../SongImage";
 import { useColorExtractor } from "../color-extractor";
 import { song as selectedSong } from "../song.utils";
-import { transparentize } from "polished";
 import Popover from "@renderer/components/popover/Popover";
 import { EllipsisVerticalIcon } from "lucide-solid";
+import { transparentize } from "polished";
 import { Component, createSignal, JSXElement, onMount, createMemo, Show } from "solid-js";
 import { twMerge } from "tailwind-merge";
 
@@ -103,7 +103,7 @@ const SongItem: Component<SongItemProps> = (props) => {
         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"
+        class="active: group relative isolate min-h-[72px] overflow-hidden rounded-lg py-0.5 pl-1.5 pr-0.5 transition-colors"
         classList={{
           "shadow-glow-blue": isSelected(),
         }}
@@ -117,12 +117,12 @@ const SongItem: Component<SongItemProps> = (props) => {
         }}
       >
         <div
-          class="relative isolate select-none rounded-lg h-full"
+          class="relative isolate h-full select-none rounded-lg"
           ref={item}
           data-url={props.song.bg}
         >
           <SongImage
-            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`}
+            class={`absolute inset-0 z-[-1] h-full w-full rounded-lg rounded-l-[9px] rounded-r-md bg-cover bg-scroll bg-center bg-no-repeat opacity-70`}
             classList={{
               "opacity-100": isSelected(),
             }}
@@ -132,12 +132,12 @@ const SongItem: Component<SongItemProps> = (props) => {
           />
 
           <div
-            class="flex flex-col justify-center overflow-hidden rounded-md p-3 pr-10 h-full"
+            class="flex h-full flex-col justify-center overflow-hidden rounded-md p-3 pr-10"
             style={{
               background: backgrund(),
             }}
           >
-            <h3 class="drop-shadow-md text-[22px] font-[740] leading-7">{props.song.title}</h3>
+            <h3 class="text-[22px] font-[740] leading-7 drop-shadow-md">{props.song.title}</h3>
             <p class="text-base text-subtext drop-shadow-sm">{props.song.artist}</p>
           </div>
         </div>
@@ -149,7 +149,7 @@ const SongItem: Component<SongItemProps> = (props) => {
               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"
+            class="absolute right-0 top-0 flex h-full animate-song-item-slide-in items-center rounded-r-lg text-subtext transition-colors hover:text-text"
             title="Song options"
             classList={{
               "text-text": localShow(),
@@ -159,7 +159,7 @@ const SongItem: Component<SongItemProps> = (props) => {
             }}
           >
             <div
-              class={twMerge("transition-opacity z-10")}
+              class={twMerge("z-10 transition-opacity")}
               style={{
                 color: isSelected() ? secondaryColor() : undefined,
               }}
diff --git a/src/renderer/src/components/song/song-list-search/FilterOption.tsx b/src/renderer/src/components/song/song-list-search/FilterOption.tsx
index f2dd4003..f52becfc 100644
--- a/src/renderer/src/components/song/song-list-search/FilterOption.tsx
+++ b/src/renderer/src/components/song/song-list-search/FilterOption.tsx
@@ -23,7 +23,7 @@ const FilterOptionContainer: Component<FilterOptionContainerProps> = (_props) =>
 
   return (
     <Popover {...mergedPopoverProps}>
-      <div class={cn("flex p-0.5 items-center rounded-lg bg-surface", props.class)} {...rest} />
+      <div class={cn("flex items-center rounded-lg bg-surface p-0.5", props.class)} {...rest} />
     </Popover>
   );
 };
@@ -34,7 +34,7 @@ const FilterOptionContainer: Component<FilterOptionContainerProps> = (_props) =>
 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} />;
+  return <p class={cn("px-3 py-1.5 text-sm", props.class)} {...rest} />;
 };
 
 // ------------
@@ -43,7 +43,7 @@ export const FilterOptionLabel: Component<FilterOptionLabelProps> = (_props) =>
 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"
+      class="flex items-center gap-0.5 overflow-hidden rounded-md border-2 border-thick-material bg-thick-material"
       {...props}
     />
   );
@@ -60,7 +60,7 @@ export const FilterOptionTrigger: Component<FilterOptionTriggerProps> = (_props)
     <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",
+        "flex items-center gap-1.5 rounded px-2.5 py-1 text-sm focus-within:outline-none hover:bg-surface focus-visible:bg-surface",
         props.class,
       )}
     >
@@ -81,7 +81,7 @@ export const FilterOptionItem: Component<FilterOptionItemProps> = (_props) => {
     <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",
+        "flex items-center gap-1 rounded px-2.5 py-1 text-sm focus-within:bg-surface focus-within:outline-none hover:bg-surface",
         props.class,
       )}
     >
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 2e3da0fc..874309ab 100644
--- a/src/renderer/src/components/song/song-list-search/SongListSearch.tsx
+++ b/src/renderer/src/components/song/song-list-search/SongListSearch.tsx
@@ -2,11 +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 { SongListSearchTags } from "./SongListSearchTags";
 import Button from "@renderer/components/button/Button";
 import { Input } from "@renderer/components/input/Input";
 import { FilterIcon, SearchIcon, FilterXIcon } from "lucide-solid";
 import { Accessor, Component, createSignal, Match, Setter, Signal, Switch } from "solid-js";
-import { SongListSearchTags } from "./SongListSearchTags";
 
 export type SearchProps = {
   tags: Signal<Tag[]>;
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 e2aed231..8bb76812 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 FilterOption from "./FilterOption";
 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;
diff --git a/src/renderer/src/components/song/song-list-search/SongListSearchTags.tsx b/src/renderer/src/components/song/song-list-search/SongListSearchTags.tsx
index 4dc74ec1..b1bebf3b 100644
--- a/src/renderer/src/components/song/song-list-search/SongListSearchTags.tsx
+++ b/src/renderer/src/components/song/song-list-search/SongListSearchTags.tsx
@@ -1,5 +1,5 @@
-import { Component } from "solid-js";
 import FilterOption from "./FilterOption";
+import { Component } from "solid-js";
 
 type Props = {
   disabled?: boolean;
diff --git a/src/renderer/src/components/song/song-list/SongList.tsx b/src/renderer/src/components/song/song-list/SongList.tsx
index 2e15614f..a55ecdd9 100644
--- a/src/renderer/src/components/song/song-list/SongList.tsx
+++ b/src/renderer/src/components/song/song-list/SongList.tsx
@@ -7,9 +7,9 @@ import InfiniteScroller from "../../InfiniteScroller";
 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";
+import { ListPlus, ListStartIcon } from "lucide-solid";
+import { Component, createEffect, createSignal, onCleanup, onMount } from "solid-js";
 
 export type SongViewProps = {
   isAllSongs?: boolean;
diff --git a/src/renderer/src/components/song/song-queue/SongQueue.tsx b/src/renderer/src/components/song/song-queue/SongQueue.tsx
index f4a6ca75..f4658f52 100644
--- a/src/renderer/src/components/song/song-queue/SongQueue.tsx
+++ b/src/renderer/src/components/song/song-queue/SongQueue.tsx
@@ -4,9 +4,9 @@ import Impulse from "../../../lib/Impulse";
 import scrollIfNeeded from "../../../lib/tungsten/scroll-if-needed";
 import InfiniteScroller from "../../InfiniteScroller";
 import SongItem from "../song-item/SongItem";
-import { Component, createSignal, onCleanup, onMount } from "solid-js";
-import { DeleteIcon, ListPlus } from "lucide-solid";
 import DropdownList from "@renderer/components/dropdown-list/DropdownList";
+import { DeleteIcon, ListPlus } from "lucide-solid";
+import { Component, createSignal, onCleanup, onMount } from "solid-js";
 
 const SongQueue: Component = () => {
   const [count, setCount] = createSignal(0);
@@ -76,7 +76,7 @@ const SongQueue: Component = () => {
   });
 
   return (
-    <div class="flex flex-col w-full">
+    <div class="flex w-full flex-col">
       <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>
diff --git a/src/renderer/src/components/tabs/TabsList.tsx b/src/renderer/src/components/tabs/TabsList.tsx
index 5aaa7d37..49aee809 100644
--- a/src/renderer/src/components/tabs/TabsList.tsx
+++ b/src/renderer/src/components/tabs/TabsList.tsx
@@ -26,7 +26,7 @@ export const TabsList: ParentComponent<Props> = (_props) => {
         state.tryFocusFirstItem();
       }}
       class={cn(
-        "relative flex rounded-xl bg-thin-material p-1 gap-1 ring-1 ring-stroke",
+        "relative flex gap-1 rounded-xl bg-thin-material p-1 ring-1 ring-stroke",
         props.class,
       )}
     >
diff --git a/src/renderer/src/components/windows-control/WindowsControl.tsx b/src/renderer/src/components/windows-control/WindowsControl.tsx
index 9ebc578b..788d9f62 100644
--- a/src/renderer/src/components/windows-control/WindowsControl.tsx
+++ b/src/renderer/src/components/windows-control/WindowsControl.tsx
@@ -14,7 +14,7 @@ export const WindowsControls: Component = () => {
   };
 
   return (
-    <div class="flex no-drag">
+    <div class="no-drag flex">
       <WindownButton onClick={minimize}>
         <MinusIcon size={20} />
       </WindownButton>
@@ -33,7 +33,7 @@ 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)}
+      class={cn("app-no-drag flex items-center justify-center p-2 hover:bg-surface", props.class)}
       {...rest}
     />
   );
diff --git a/src/renderer/src/css/global.css b/src/renderer/src/css/global.css
index 165a3d51..ef2cdf45 100644
--- a/src/renderer/src/css/global.css
+++ b/src/renderer/src/css/global.css
@@ -18,7 +18,7 @@
   }
 
   :focus-visible {
-    @apply outline outline-blue-500 outline-2;
+    @apply outline outline-2 outline-blue-500;
   }
 
   .transition-base {
diff --git a/src/renderer/src/keyboard-registers/toggle-sidebar.ts b/src/renderer/src/keyboard-registers/toggle-sidebar.ts
index 9f85bcff..a4623a82 100644
--- a/src/renderer/src/keyboard-registers/toggle-sidebar.ts
+++ b/src/renderer/src/keyboard-registers/toggle-sidebar.ts
@@ -1,5 +1,5 @@
-import { setSidebarExpanded } from "@renderer/scenes/main-scene/main.utils";
 import { Keyboard } from "../lib/Keyboard";
+import { setSidebarExpanded } from "@renderer/scenes/main-scene/main.utils";
 
 Keyboard.register({
   key: "b",
diff --git a/src/renderer/src/lib/roving-focus-group/rovingFocusGroup.ts b/src/renderer/src/lib/roving-focus-group/rovingFocusGroup.ts
index 7510202b..ef939ba9 100644
--- a/src/renderer/src/lib/roving-focus-group/rovingFocusGroup.ts
+++ b/src/renderer/src/lib/roving-focus-group/rovingFocusGroup.ts
@@ -1,6 +1,6 @@
-import { DOMElement } from "solid-js/jsx-runtime";
 import useControllableState from "../controllable-state";
 import { Accessor, createMemo, createSignal, onCleanup, onMount } from "solid-js";
+import { DOMElement } from "solid-js/jsx-runtime";
 
 const ITEM_DATA_ATTR = "data-item";
 const DEFAULT_SELECTED_VALUE = "";
diff --git a/src/renderer/src/main.tsx b/src/renderer/src/main.tsx
index 3ef42d79..e0d55cf9 100644
--- a/src/renderer/src/main.tsx
+++ b/src/renderer/src/main.tsx
@@ -1,8 +1,8 @@
 import App from "./App";
 import "@renderer/css/global.css";
 import "@renderer/css/theme.css";
-import { render } from "solid-js/web";
 import { attachDevtoolsOverlay } from "@solid-devtools/overlay";
+import { render } from "solid-js/web";
 
 if (import.meta.env.VITE_SOLID_DEVTOOLS !== "false") {
   attachDevtoolsOverlay();
diff --git a/src/renderer/src/scenes/ErrorScene.tsx b/src/renderer/src/scenes/ErrorScene.tsx
index cdb733af..ef2e7488 100644
--- a/src/renderer/src/scenes/ErrorScene.tsx
+++ b/src/renderer/src/scenes/ErrorScene.tsx
@@ -1,5 +1,6 @@
-import { createSignal, onCleanup, onMount } from "solid-js";
 import Button from "@renderer/components/button/Button";
+import { createSignal, onCleanup, onMount } from "solid-js";
+
 export default function ErrorScene() {
   const [msg, setMsg] = createSignal("");
 
@@ -16,8 +17,8 @@ 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-danger/20 shadow-2xl space-y-4 bg-danger/5">
+    <div id="error" class="grid h-screen w-full place-items-center">
+      <div class="space-y-4 rounded-2xl border border-danger/20 bg-danger/5 p-6 shadow-2xl">
         <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 0a6fee7a..d5cf72ac 100644
--- a/src/renderer/src/scenes/main-scene/MainScene.tsx
+++ b/src/renderer/src/scenes/main-scene/MainScene.tsx
@@ -1,16 +1,5 @@
 import SongDetail from "../../components/song/song-detail/SongDetail";
-import "./styles.css";
-import Button from "@renderer/components/button/Button";
-import SongImage from "@renderer/components/song/SongImage";
-import { song } from "@renderer/components/song/song.utils";
-import { WindowsControls } from "@renderer/components/windows-control/WindowsControl";
-import { os } from "@renderer/lib/os";
-import { Layers3Icon } from "lucide-solid";
-import { Accessor, Component, createSignal, Match, Switch } from "solid-js";
 import { 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 {
   setAnimateSidebar,
   setSidebarWidth,
@@ -18,11 +7,22 @@ import {
   sidebarWidth,
   useMainResizableOptions,
 } from "./main.utils";
+import "./styles.css";
+import Button from "@renderer/components/button/Button";
+import Popover from "@renderer/components/popover/Popover";
+import ResizablePanel from "@renderer/components/resizable-panel/ResizablePanel";
+import SongImage from "@renderer/components/song/SongImage";
+import SongQueue from "@renderer/components/song/song-queue/SongQueue";
+import { song } from "@renderer/components/song/song.utils";
+import { WindowsControls } from "@renderer/components/windows-control/WindowsControl";
+import { os } from "@renderer/lib/os";
+import { Layers3Icon } from "lucide-solid";
+import { Accessor, Component, createSignal, Match, Switch } from "solid-js";
 
 const MainScene: Component = () => {
   const { maxSidebarWidth, offsetFromPanel } = useMainResizableOptions();
   return (
-    <div class="min-h-screen h-full flex flex-col">
+    <div class="flex h-full min-h-screen flex-col">
       <Switch>
         <Match when={os() === "darwin"}>
           <MacNav />
@@ -44,7 +44,7 @@ const MainScene: Component = () => {
           settingsWriteSidebarWidth(width);
         }}
       >
-        <main class="main-scene relative flex-1 app-grid">
+        <main class="main-scene app-grid relative flex-1">
           <Sidebar />
           <div
             class="song relative flex flex-1 items-center justify-center"
@@ -65,7 +65,7 @@ const MainScene: Component = () => {
           </div>
         </main>
       </ResizablePanel>
-      <div class="pointer-events-none fixed h-full inset-0 z-[-1]">
+      <div class="pointer-events-none fixed inset-0 z-[-1] h-full">
         <SongImage
           src={song().bg}
           instantLoad={true}
@@ -73,7 +73,7 @@ const MainScene: Component = () => {
         />
       </div>
 
-      <div class="pointer-events-none fixed h-full inset-0 z-[-1] bg-black/80" />
+      <div class="pointer-events-none fixed inset-0 z-[-1] h-full bg-black/80" />
     </div>
   );
 };
@@ -98,7 +98,7 @@ const Queue: Component = () => {
 
       <Popover.Portal>
         <Popover.Overlay />
-        <Popover.Content class="w-[480px] max-h-[600px] flex p-0">
+        <Popover.Content class="flex max-h-[600px] w-[480px] p-0">
           <SongQueue />
         </Popover.Content>
       </Popover.Portal>
diff --git a/src/renderer/src/scenes/main-scene/Sidebar.tsx b/src/renderer/src/scenes/main-scene/Sidebar.tsx
index 81eef645..8cc6fff1 100644
--- a/src/renderer/src/scenes/main-scene/Sidebar.tsx
+++ b/src/renderer/src/scenes/main-scene/Sidebar.tsx
@@ -1,5 +1,3 @@
-import Tabs from "@renderer/components/tabs/Tabs";
-import { Component, createMemo, For, Show } from "solid-js";
 import {
   animateSidebar,
   NAV_ITEMS,
@@ -9,15 +7,17 @@ import {
   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 Settings from "@renderer/components/settings/Settings";
+import SongList from "@renderer/components/song/song-list/SongList";
+import Tabs from "@renderer/components/tabs/Tabs";
 import { cn } from "@renderer/lib/css.utils";
+import { os } from "@renderer/lib/os";
+import { SettingsIcon, SidebarIcon } from "lucide-solid";
+import { Component, createMemo, For, Show } from "solid-js";
 
 function toPx(value: number) {
   return `${value}px`;
@@ -32,14 +32,14 @@ export const Sidebar: Component = () => {
 
   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"
+      class="sidebar transition-base absolute z-40 h-full border-e-2 border-r-stroke bg-black/80 shadow-2xl backdrop-blur-md transition-colors lg:relative lg:border-e-0 lg:bg-transparent lg:shadow-none"
       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"
+        class="absolute bottom-0 right-0 flex h-full flex-col gap-2"
         style={{
           "min-width": toPx(state.value()),
         }}
@@ -85,7 +85,7 @@ const SidebarTabs: Component = () => {
 
   return (
     <div
-      class="flex pl-4 pr-5 mt-2 ml-9 items-center no-drag"
+      class="no-drag ml-9 mt-2 flex items-center pl-4 pr-5"
       classList={{
         // Mac - Offset for the traffic lights on the left
         "pl-[86px] pt-2": os() === "darwin",