diff --git a/electron.vite.config.1728674597190.mjs b/electron.vite.config.1728674597190.mjs
index bb2eb72..4429e2f 100644
--- a/electron.vite.config.1728674597190.mjs
+++ b/electron.vite.config.1728674597190.mjs
@@ -2,22 +2,21 @@
 import { defineConfig, externalizeDepsPlugin } from "electron-vite";
 import { resolve } from "path";
 import solid from "vite-plugin-solid";
+
 var electron_vite_config_default = defineConfig({
   main: {
-    plugins: [externalizeDepsPlugin()]
+    plugins: [externalizeDepsPlugin()],
   },
   preload: {
-    plugins: [externalizeDepsPlugin()]
+    plugins: [externalizeDepsPlugin()],
   },
   renderer: {
     resolve: {
       alias: {
-        "@renderer": resolve("src/renderer/src")
-      }
+        "@renderer": resolve("src/renderer/src"),
+      },
     },
-    plugins: [solid()]
-  }
+    plugins: [solid()],
+  },
 });
-export {
-  electron_vite_config_default as default
-};
+export { electron_vite_config_default as default };
diff --git a/postcss.config.js b/postcss.config.js
index 2e7af2b..2aa7205 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -3,4 +3,4 @@ export default {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/src/renderer/src/components/song/SongHint.tsx b/src/renderer/src/components/song/SongHint.tsx
index 4c3fed8..69050b4 100644
--- a/src/renderer/src/components/song/SongHint.tsx
+++ b/src/renderer/src/components/song/SongHint.tsx
@@ -8,4 +8,4 @@ export default function SongHint(): HTMLElement {
       </div>
     </div>
   ) as HTMLElement;
-}
\ No newline at end of file
+}
diff --git a/src/renderer/src/components/song/context-menu/SongContextMenu.tsx b/src/renderer/src/components/song/context-menu/SongContextMenu.tsx
index 07c008f..7f4ee99 100644
--- a/src/renderer/src/components/song/context-menu/SongContextMenu.tsx
+++ b/src/renderer/src/components/song/context-menu/SongContextMenu.tsx
@@ -69,7 +69,6 @@ const SongContextMenu: Component<SongContextMenuProps> = (props) => {
   );
 };
 
-
 export default SongContextMenu;
 
 export function ignoreClickInContextMenu(fn: (evt: MouseEvent) => any): (evt: MouseEvent) => void {
diff --git a/src/renderer/src/components/song/context-menu/SongContextMenuItem.tsx b/src/renderer/src/components/song/context-menu/SongContextMenuItem.tsx
index 6ff537f..f373284 100644
--- a/src/renderer/src/components/song/context-menu/SongContextMenuItem.tsx
+++ b/src/renderer/src/components/song/context-menu/SongContextMenuItem.tsx
@@ -27,4 +27,4 @@ const SongContextMenuItem: Component<SongContextMenuItemProps> = (props) => {
   );
 };
 
-export default SongContextMenuItem;
\ No newline at end of file
+export default SongContextMenuItem;
diff --git a/src/renderer/src/components/song/context-menu/items/PlayNext.tsx b/src/renderer/src/components/song/context-menu/items/PlayNext.tsx
index 298da2b..3c9d2bb 100644
--- a/src/renderer/src/components/song/context-menu/items/PlayNext.tsx
+++ b/src/renderer/src/components/song/context-menu/items/PlayNext.tsx
@@ -26,4 +26,4 @@ const PlayNext: Component<SongPlayNextProps> = (props) => {
   );
 };
 
-export default PlayNext;
\ No newline at end of file
+export default PlayNext;
diff --git a/src/renderer/src/components/song/song-detail/SongControls.tsx b/src/renderer/src/components/song/song-detail/SongControls.tsx
index 724b41f..8ebe868 100644
--- a/src/renderer/src/components/song/song-detail/SongControls.tsx
+++ b/src/renderer/src/components/song/song-detail/SongControls.tsx
@@ -99,4 +99,4 @@ const SongControls: Component<SongControlsProps> = () => {
   );
 };
 
-export default SongControls;
\ No newline at end of file
+export default SongControls;
diff --git a/src/renderer/src/components/song/song-detail/SongDetail.tsx b/src/renderer/src/components/song/song-detail/SongDetail.tsx
index 8f5b0c3..716dbe9 100644
--- a/src/renderer/src/components/song/song-detail/SongDetail.tsx
+++ b/src/renderer/src/components/song/song-detail/SongDetail.tsx
@@ -11,7 +11,11 @@ const SongDetail: Component = () => {
   return (
     <div class="flex flex-col h-full p-8 max-w-2xl w-full">
       <div class="flex-grow mb-8 grid place-items-center">
-        <SongImage src={song().bg} instantLoad={true} class="size-80 bg-cover bg-center object-cover rounded-lg shadow-lg" />
+        <SongImage
+          src={song().bg}
+          instantLoad={true}
+          class="size-80 bg-cover bg-center object-cover rounded-lg shadow-lg"
+        />
       </div>
 
       <div class="space-y-4">
diff --git a/src/renderer/src/components/song/song-item/SongItem.tsx b/src/renderer/src/components/song/song-item/SongItem.tsx
index 1a774ec..ab2079d 100644
--- a/src/renderer/src/components/song/song-item/SongItem.tsx
+++ b/src/renderer/src/components/song/song-item/SongItem.tsx
@@ -42,7 +42,7 @@ const SongItem: Component<SongItemProps> = ({
   onMount(() => {
     draggable(item, {
       onClick: ignoreClickInContextMenu(() => onSelect(song.path)),
-      onDrop: onDrop ?? (() => { }),
+      onDrop: onDrop ?? (() => {}),
       createHint: SongHint,
       useOnlyAsOnClickBinder: !isDraggable || selectedSong().path === song.path,
     });
@@ -54,10 +54,11 @@ const SongItem: Component<SongItemProps> = ({
 
   return (
     <div
-      class={`relative isolate my-4 select-none rounded-md ${selectedSong().path === song.path
-        ? "data-[active=true]:after:bg-black/30 data-[active=true]:outline data-[active=true]:outline-2 data-[active=true]:outline-accent"
-        : ""
-        } hover:after:bg-overlay`}
+      class={`relative isolate my-4 select-none rounded-md ${
+        selectedSong().path === song.path
+          ? "data-[active=true]:after:bg-black/30 data-[active=true]:outline data-[active=true]:outline-2 data-[active=true]:outline-accent"
+          : ""
+      } hover:after:bg-overlay`}
       data-active={selectedSong().path === song.path}
       ref={item}
       data-url={song.bg}
@@ -70,7 +71,9 @@ const SongItem: Component<SongItemProps> = ({
       />
 
       <div class="flex flex-col justify-center min-h-[72px] p-3 bg-black/50 overflow-hidden rounded-md">
-        <h3 class="text-[22px] leading-7 font-extrabold text-shadow shadow-black/60">{song.title}</h3>
+        <h3 class="text-[22px] leading-7 font-extrabold text-shadow shadow-black/60">
+          {song.title}
+        </h3>
         <p class="text-base text-subtext">{song.artist}</p>
       </div>
     </div>
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 a65aa30..fd99668 100644
--- a/src/renderer/src/components/song/song-list-search/SongListSearch.tsx
+++ b/src/renderer/src/components/song/song-list-search/SongListSearch.tsx
@@ -74,7 +74,10 @@ const SongListSearch: Component<SearchProps> = (props) => {
             setSongsSearch(e.target.value);
           }}
         />
-        <label class="absolute left-3 top-1/2 transform -translate-y-1/2 text-text-600" for="search_input">
+        <label
+          class="absolute left-3 top-1/2 transform -translate-y-1/2 text-text-600"
+          for="search_input"
+        >
           <i class="ri-search-2-line" />
         </label>
       </div>
@@ -83,10 +86,11 @@ const SongListSearch: Component<SearchProps> = (props) => {
         <SongListSearchOrderBy setOrder={props.setOrder} />
       </div>
     </div>
-  )
-}
+  );
+};
 
-{/* <div class="results row">
+{
+  /* <div class="results row">
         <button
           title={
             props.count() === 0 ? "Can not save results as playlist" : "Save results as playlist"
@@ -99,11 +103,14 @@ const SongListSearch: Component<SearchProps> = (props) => {
           <OrderSelect setOrder={props.setOrder} disabled={props.count() === 0} />
           <TagSelect tags={props.tags} disabled={props.count() === 0} />
         </div>
-      </div> */}
+      </div> */
+}
 
-{/* <div class="error-container" classList={{ 'display-none': !doShowError() }}>
+{
+  /* <div class="error-container" classList={{ 'display-none': !doShowError() }}>
         <p class="message" ref={errorMessage}></p>
         <button class="suggestion" ref={suggestion} classList={{ 'display-none': !doShowSuggestion() }}></button>
-      </div> */}
+      </div> */
+}
 
 export default SongListSearch;
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 28d72d4..e5e95f7 100644
--- a/src/renderer/src/components/song/song-list-search/SongListSearchOrderBy.tsx
+++ b/src/renderer/src/components/song/song-list-search/SongListSearchOrderBy.tsx
@@ -74,7 +74,9 @@ const SongListSearchOrderBy: Component<OrderSelectProps> = (props) => {
         </Switch>
       </IconButton>
       <Dropdown isOpen={isOpen} onValueChange={setIsOpen}>
-        <Dropdown.Trigger class="px-3 py-1 bg-thin-material rounded-md">{optionLabel()}</Dropdown.Trigger>
+        <Dropdown.Trigger class="px-3 py-1 bg-thin-material rounded-md">
+          {optionLabel()}
+        </Dropdown.Trigger>
         <Dropdown.List
           class="bg-surface shadow-lg rounded-md overflow-hidden"
           onValueChange={(newSelectedOption) => {
@@ -85,7 +87,10 @@ const SongListSearchOrderBy: Component<OrderSelectProps> = (props) => {
           value={option}
         >
           {orderOptions.map((option) => (
-            <Dropdown.Item class="px-4 py-2 hover:bg-accent/20 transition-colors duration-200" value={option.value}>
+            <Dropdown.Item
+              class="px-4 py-2 hover:bg-accent/20 transition-colors duration-200"
+              value={option.value}
+            >
               {option.text}
             </Dropdown.Item>
           ))}
@@ -95,4 +100,4 @@ const SongListSearchOrderBy: Component<OrderSelectProps> = (props) => {
   );
 };
 
-export default SongListSearchOrderBy;
\ No newline at end of file
+export default SongListSearchOrderBy;
diff --git a/src/renderer/src/components/song/song-queue/SongQueue.tsx b/src/renderer/src/components/song/song-queue/SongQueue.tsx
index 29ab8c5..2a9d6a5 100644
--- a/src/renderer/src/components/song/song-queue/SongQueue.tsx
+++ b/src/renderer/src/components/song/song-queue/SongQueue.tsx
@@ -118,4 +118,4 @@ const SongQueue: Component = () => {
   );
 };
 
-export default SongQueue;
\ No newline at end of file
+export default SongQueue;
diff --git a/src/renderer/src/scenes/main-scene/MainScene.tsx b/src/renderer/src/scenes/main-scene/MainScene.tsx
index 5a414ff..e3ca17b 100644
--- a/src/renderer/src/scenes/main-scene/MainScene.tsx
+++ b/src/renderer/src/scenes/main-scene/MainScene.tsx
@@ -26,7 +26,11 @@ const MainScene: Component = () => {
       </main>
 
       <div class="absolute inset-0 z-[-1] pointer-events-none opacity-[0.072]">
-        <SongImage src={song().bg} instantLoad={true} class="w-full h-full bg-cover filter blur-xl" />
+        <SongImage
+          src={song().bg}
+          instantLoad={true}
+          class="w-full h-full bg-cover filter blur-xl"
+        />
       </div>
     </div>
   );
@@ -41,7 +45,7 @@ const Nav: Component = () => {
 
       <div class="ml-auto">
         <IconButton
-          class={`text-text-700 ${songQueueModalOpen() ? 'text-text-900' : ''}`}
+          class={`text-text-700 ${songQueueModalOpen() ? "text-text-900" : ""}`}
           onClick={toggleSongQueueModalOpen}
         >
           <i class="ri-stack-fill" />
@@ -58,11 +62,13 @@ const NavItem: Component<NavItemProps> = ({ children, value, icon }) => {
   return (
     <button
       class={`flex items-center gap-4 px-4 py-1 rounded-sm hover:bg-surface
-        ${mainActiveTab() === value ? 'bg-surface' : ''}`}
+        ${mainActiveTab() === value ? "bg-surface" : ""}`}
       onclick={() => setMainActiveTab(value)}
     >
-      <i class={`${icon} ${mainActiveTab() === value ? 'text-text-900' : 'text-text-600'}`} />
-      <span class={`text-base font-semibold ${mainActiveTab() === value ? 'text-on-background' : 'text-text-600'}`}>
+      <i class={`${icon} ${mainActiveTab() === value ? "text-text-900" : "text-text-600"}`} />
+      <span
+        class={`text-base font-semibold ${mainActiveTab() === value ? "text-on-background" : "text-text-600"}`}
+      >
         {children}
       </span>
     </button>
diff --git a/tailwind.config.js b/tailwind.config.js
index bf1899d..6842bb3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,23 +1,21 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
+  content: ["./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {
       colors: {
-        'thick-material': 'var(--color-thick-material)',
-        'regular-material': 'var(--color-regular-material)',
-        'text': 'var(--color-text)',
-        'subtext': 'var(--color-subtext)',
-        'stroke': 'var(--color-stroke)',
-        'overlay': 'var(--color-overlay)',
-        'accent': 'var(--color-accent)',
-        'surface': 'var(--color-surface)',
-        'black': 'var(--color-black)',
-        'red': 'var(--color-red)',
-        'green': 'var(--color-green)',
-        'thin-material': 'var(--color-thin-material)',
+        "thick-material": "var(--color-thick-material)",
+        "regular-material": "var(--color-regular-material)",
+        text: "var(--color-text)",
+        subtext: "var(--color-subtext)",
+        stroke: "var(--color-stroke)",
+        overlay: "var(--color-overlay)",
+        accent: "var(--color-accent)",
+        surface: "var(--color-surface)",
+        black: "var(--color-black)",
+        red: "var(--color-red)",
+        green: "var(--color-green)",
+        "thin-material": "var(--color-thin-material)",
       },
     },
   },
@@ -25,5 +23,5 @@ export default {
     extend: {},
   },
   plugins: [],
-  darkMode: 'media', // or 'class' if you prefer manual dark mode switching
-}
+  darkMode: "media", // or 'class' if you prefer manual dark mode switching
+};