diff --git a/.prettierrc.yaml b/.prettierrc.yaml
index 109685d7..59563487 100644
--- a/.prettierrc.yaml
+++ b/.prettierrc.yaml
@@ -8,7 +8,7 @@ arrowParens: always
 proseWrap: never
 htmlWhitespaceSensitivity: strict
 endOfLine: lf
-singleAttributePerLine: true
+singleAttributePerLine: false
 bracketSpacing: true
 plugins:
     - prettier-plugin-packagejson
diff --git a/src/remote/app.tsx b/src/remote/app.tsx
index cfd6034c..b5e623c3 100644
--- a/src/remote/app.tsx
+++ b/src/remote/app.tsx
@@ -22,10 +22,7 @@ export const App = () => {
     const { mode, theme } = useAppTheme(isDark ? AppTheme.DEFAULT_DARK : AppTheme.DEFAULT_LIGHT);
 
     return (
-        <MantineProvider
-            defaultColorScheme={mode}
-            theme={theme}
-        >
+        <MantineProvider defaultColorScheme={mode} theme={theme}>
             <Shell />
         </MantineProvider>
     );
diff --git a/src/remote/components/buttons/theme-button.tsx b/src/remote/components/buttons/theme-button.tsx
index 2a17dcdc..36a7bc31 100644
--- a/src/remote/components/buttons/theme-button.tsx
+++ b/src/remote/components/buttons/theme-button.tsx
@@ -18,17 +18,7 @@ export const ThemeButton = () => {
             }}
             variant="default"
         >
-            {isDark ? (
-                <Icon
-                    icon="themeLight"
-                    size={30}
-                />
-            ) : (
-                <Icon
-                    icon="themeDark"
-                    size={30}
-                />
-            )}
+            {isDark ? <Icon icon="themeLight" size={30} /> : <Icon icon="themeDark" size={30} />}
         </ActionIcon>
     );
 };
diff --git a/src/remote/components/remote-container.tsx b/src/remote/components/remote-container.tsx
index e29fe624..28018682 100644
--- a/src/remote/components/remote-container.tsx
+++ b/src/remote/components/remote-container.tsx
@@ -32,17 +32,9 @@ export const RemoteContainer = () => {
     const debouncedSetRating = debounce(setRating, 400);
 
     return (
-        <Stack
-            gap="md"
-            h="100dvh"
-            w="100%"
-        >
+        <Stack gap="md" h="100dvh" w="100%">
             {showImage && (
-                <Flex
-                    align="center"
-                    justify="center"
-                    w="100%"
-                >
+                <Flex align="center" justify="center" w="100%">
                     <PlayerImage src={song?.imageUrl} />
                 </Flex>
             )}
@@ -87,10 +79,7 @@ export const RemoteContainer = () => {
                     </Group>
                 </Stack>
             )}
-            <Group
-                gap={0}
-                grow
-            >
+            <Group gap={0} grow>
                 <ActionIcon
                     disabled={!id}
                     icon="favorite"
@@ -109,10 +98,7 @@ export const RemoteContainer = () => {
                 />
                 {(song?.serverType === 'navidrome' || song?.serverType === 'subsonic') && (
                     <div style={{ margin: 'auto' }}>
-                        <Tooltip
-                            label="Double click to clear"
-                            openDelay={1000}
-                        >
+                        <Tooltip label="Double click to clear" openDelay={1000}>
                             <Rating
                                 onChange={debouncedSetRating}
                                 onDoubleClick={() => debouncedSetRating(0)}
@@ -123,10 +109,7 @@ export const RemoteContainer = () => {
                     </div>
                 )}
             </Group>
-            <Group
-                gap="xs"
-                grow
-            >
+            <Group gap="xs" grow>
                 <ActionIcon
                     disabled={!id}
                     icon="mediaPrevious"
@@ -174,10 +157,7 @@ export const RemoteContainer = () => {
                     variant="default"
                 />
             </Group>
-            <Group
-                gap="xs"
-                grow
-            >
+            <Group gap="xs" grow>
                 <ActionIcon
                     icon="mediaShuffle"
                     iconProps={{
@@ -232,10 +212,7 @@ export const RemoteContainer = () => {
                     max={100}
                     onChangeEnd={(e) => send({ event: 'volume', volume: e })}
                     rightLabel={
-                        <Text
-                            fw={600}
-                            size="xs"
-                        >
+                        <Text fw={600} size="xs">
                             {volume ?? 0}
                         </Text>
                     }
diff --git a/src/remote/components/shell.tsx b/src/remote/components/shell.tsx
index 83f3d58c..9905c496 100644
--- a/src/remote/components/shell.tsx
+++ b/src/remote/components/shell.tsx
@@ -13,16 +13,9 @@ export const Shell = () => {
     const connected = useConnected();
 
     return (
-        <AppShell
-            h="100vh"
-            padding="md"
-            w="100vw"
-        >
+        <AppShell h="100vh" padding="md" w="100vw">
             <AppShell.Header style={{ background: 'var(--theme-colors-surface)' }}>
-                <Grid
-                    px="md"
-                    py="sm"
-                >
+                <Grid px="md" py="sm">
                     <Grid.Col span={4}>
                         <Flex
                             align="center"
@@ -33,20 +26,11 @@ export const Shell = () => {
                                 justifySelf: 'flex-start',
                             }}
                         >
-                            <Image
-                                fit="contain"
-                                height={32}
-                                src="/favicon.ico"
-                                width={32}
-                            />
+                            <Image fit="contain" height={32} src="/favicon.ico" width={32} />
                         </Flex>
                     </Grid.Col>
                     <Grid.Col span={8}>
-                        <Group
-                            gap="sm"
-                            justify="flex-end"
-                            wrap="nowrap"
-                        >
+                        <Group gap="sm" justify="flex-end" wrap="nowrap">
                             <ReconnectButton />
                             <ImageButton />
                             <ThemeButton />
@@ -58,10 +42,7 @@ export const Shell = () => {
                 {connected ? (
                     <RemoteContainer />
                 ) : (
-                    <Center
-                        h="100vh"
-                        w="100vw"
-                    >
+                    <Center h="100vh" w="100vw">
                         <Spinner />
                     </Center>
                 )}
diff --git a/src/remote/components/wrapped-slider.tsx b/src/remote/components/wrapped-slider.tsx
index cf6d6e88..30f6d487 100644
--- a/src/remote/components/wrapped-slider.tsx
+++ b/src/remote/components/wrapped-slider.tsx
@@ -61,10 +61,7 @@ export const WrappedSlider = ({ leftLabel, rightLabel, value, ...props }: Wrappe
     const [seek, setSeek] = useState(0);
 
     return (
-        <Group
-            align="center"
-            wrap="nowrap"
-        >
+        <Group align="center" wrap="nowrap">
             {leftLabel && <Text size="sm">{leftLabel}</Text>}
             <PlayerbarSlider
                 {...props}
diff --git a/src/renderer/app.tsx b/src/renderer/app.tsx
index 3ca911d9..f3f077b4 100644
--- a/src/renderer/app.tsx
+++ b/src/renderer/app.tsx
@@ -190,15 +190,8 @@ export const App = () => {
     }, [language]);
 
     return (
-        <MantineProvider
-            defaultColorScheme={mode as 'dark' | 'light'}
-            theme={theme}
-        >
-            <Notifications
-                containerWidth="300px"
-                position="bottom-center"
-                zIndex={50000}
-            />
+        <MantineProvider defaultColorScheme={mode as 'dark' | 'light'} theme={theme}>
+            <Notifications containerWidth="300px" position="bottom-center" zIndex={50000} />
             <PlayQueueHandlerContext.Provider value={providerValue}>
                 <ContextMenuProvider>
                     <WebAudioContext.Provider value={webAudioProvider}>
diff --git a/src/renderer/components/card/card-controls.tsx b/src/renderer/components/card/card-controls.tsx
index db3df51b..c01ac30d 100644
--- a/src/renderer/components/card/card-controls.tsx
+++ b/src/renderer/components/card/card-controls.tsx
@@ -47,10 +47,7 @@ export const CardControls = ({
     return (
         <div className={styles.gridCardControlsContainer}>
             <div className={styles.bottomControls}>
-                <button
-                    className={styles.playButton}
-                    onClick={handlePlay}
-                >
+                <button className={styles.playButton} onClick={handlePlay}>
                     <Icon icon="mediaPlay" />
                 </button>
                 <Group gap="xs">
diff --git a/src/renderer/components/card/poster-card.tsx b/src/renderer/components/card/poster-card.tsx
index 24e42241..ba314d8b 100644
--- a/src/renderer/components/card/poster-card.tsx
+++ b/src/renderer/components/card/poster-card.tsx
@@ -55,14 +55,8 @@ export const PosterCard = ({
                 onMouseEnter={() => setIsHovered(true)}
                 onMouseLeave={() => setIsHovered(false)}
             >
-                <Link
-                    className={styles.imageContainer}
-                    to={path}
-                >
-                    <Image
-                        className={styles.image}
-                        src={data?.imageUrl}
-                    />
+                <Link className={styles.imageContainer} to={path}>
+                    <Image className={styles.image} src={data?.imageUrl} />
                     <GridCardControls
                         handleFavorite={controls.handleFavorite}
                         handlePlayQueueAdd={controls.handlePlayQueueAdd}
@@ -72,30 +66,21 @@ export const PosterCard = ({
                     />
                 </Link>
                 <div className={styles.detailContainer}>
-                    <CardRows
-                        data={data}
-                        rows={controls.cardRows}
-                    />
+                    <CardRows data={data} rows={controls.cardRows} />
                 </div>
             </div>
         );
     }
 
     return (
-        <div
-            className={styles.container}
-            key={`placeholder-${uniqueId}-${data.id}`}
-        >
+        <div className={styles.container} key={`placeholder-${uniqueId}-${data.id}`}>
             <div className={styles.imageContainer}>
                 <Skeleton className={styles.image} />
             </div>
             <div className={styles.detailContainer}>
                 <Stack gap="xs">
                     {(controls?.cardRows || []).map((row, index) => (
-                        <Skeleton
-                            height={14}
-                            key={`${index}-${row.arrayProperty}`}
-                        />
+                        <Skeleton height={14} key={`${index}-${row.arrayProperty}`} />
                     ))}
                 </Stack>
             </div>
diff --git a/src/renderer/components/context-menu/context-menu.tsx b/src/renderer/components/context-menu/context-menu.tsx
index 9658c464..a1d5f69f 100644
--- a/src/renderer/components/context-menu/context-menu.tsx
+++ b/src/renderer/components/context-menu/context-menu.tsx
@@ -35,14 +35,8 @@ export const ContextMenuButton = forwardRef(
                 onClick={props.onClick}
                 ref={ref}
             >
-                <Group
-                    justify="space-between"
-                    w="100%"
-                >
-                    <Group
-                        className={styles.left}
-                        gap="md"
-                    >
+                <Group justify="space-between" w="100%">
+                    <Group className={styles.left} gap="md">
                         {leftIcon}
                         {children}
                     </Group>
diff --git a/src/renderer/components/feature-carousel/feature-carousel.tsx b/src/renderer/components/feature-carousel/feature-carousel.tsx
index 521ec559..ee6ed5a2 100644
--- a/src/renderer/components/feature-carousel/feature-carousel.tsx
+++ b/src/renderer/components/feature-carousel/feature-carousel.tsx
@@ -77,11 +77,7 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
             className={styles.wrapper}
             to={generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, { albumId: currentItem?.id || '' })}
         >
-            <AnimatePresence
-                custom={direction}
-                initial={false}
-                mode="popLayout"
-            >
+            <AnimatePresence custom={direction} initial={false} mode="popLayout">
                 {data && (
                     <motion.div
                         animate="animate"
@@ -101,10 +97,7 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
                                 />
                             </div>
                             <div className={styles.infoColumn}>
-                                <Stack
-                                    gap="md"
-                                    style={{ width: '100%' }}
-                                >
+                                <Stack gap="md" style={{ width: '100%' }}>
                                     <div className={styles.titleWrapper}>
                                         <TextTitle
                                             fw={900}
@@ -117,10 +110,7 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
                                     </div>
                                     <div className={styles.titleWrapper}>
                                         {currentItem?.albumArtists.slice(0, 1).map((artist) => (
-                                            <Text
-                                                fw={600}
-                                                key={`carousel-artist-${artist.id}`}
-                                            >
+                                            <Text fw={600} key={`carousel-artist-${artist.id}`}>
                                                 {artist.name}
                                             </Text>
                                         ))}
diff --git a/src/renderer/components/grid-carousel/grid-carousel.tsx b/src/renderer/components/grid-carousel/grid-carousel.tsx
index 0bbf067d..2075003b 100644
--- a/src/renderer/components/grid-carousel/grid-carousel.tsx
+++ b/src/renderer/components/grid-carousel/grid-carousel.tsx
@@ -60,10 +60,7 @@ const Title = ({ handleNext, handlePrev, label, pagination }: TitleProps) => {
             {isValidElement(label) ? (
                 label
             ) : (
-                <TextTitle
-                    order={3}
-                    weight={700}
-                >
+                <TextTitle order={3} weight={700}>
                     {label}
                 </TextTitle>
             )}
@@ -280,11 +277,7 @@ export const SwiperGridCarousel = ({
     }, []);
 
     return (
-        <Stack
-            className="grid-carousel"
-            gap="md"
-            ref={containerRef as any}
-        >
+        <Stack className="grid-carousel" gap="md" ref={containerRef as any}>
             {title ? (
                 <Title
                     {...title}
diff --git a/src/renderer/components/native-scroll-area/native-scroll-area.tsx b/src/renderer/components/native-scroll-area/native-scroll-area.tsx
index 8b49954d..254271c6 100644
--- a/src/renderer/components/native-scroll-area/native-scroll-area.tsx
+++ b/src/renderer/components/native-scroll-area/native-scroll-area.tsx
@@ -91,11 +91,7 @@ export const NativeScrollArea = forwardRef(
                         {...pageHeaderProps}
                     />
                 )}
-                <div
-                    className={styles.scrollArea}
-                    ref={mergedRef}
-                    {...props}
-                >
+                <div className={styles.scrollArea} ref={mergedRef} {...props}>
                     {children}
                 </div>
             </>
diff --git a/src/renderer/components/query-builder/index.tsx b/src/renderer/components/query-builder/index.tsx
index 83fcf7db..a87c1cac 100644
--- a/src/renderer/components/query-builder/index.tsx
+++ b/src/renderer/components/query-builder/index.tsx
@@ -99,10 +99,7 @@ export const QueryBuilder = ({
     };
 
     return (
-        <Stack
-            gap="sm"
-            ml={`${level * 10}px`}
-        >
+        <Stack gap="sm" ml={`${level * 10}px`}>
             <Group gap="sm">
                 <Select
                     data={FILTER_GROUP_OPTIONS_DATA}
@@ -112,12 +109,7 @@ export const QueryBuilder = ({
                     value={data.type}
                     width="20%"
                 />
-                <ActionIcon
-                    icon="add"
-                    onClick={handleAddRule}
-                    size="sm"
-                    variant="subtle"
-                />
+                <ActionIcon icon="add" onClick={handleAddRule} size="sm" variant="subtle" />
                 <DropdownMenu position="bottom-start">
                     <DropdownMenu.Target>
                         <ActionIcon
@@ -150,24 +142,14 @@ export const QueryBuilder = ({
                                 <DropdownMenu.Divider />
                                 <DropdownMenu.Item
                                     isDanger
-                                    leftSection={
-                                        <Icon
-                                            color="error"
-                                            icon="refresh"
-                                        />
-                                    }
+                                    leftSection={<Icon color="error" icon="refresh" />}
                                     onClick={onResetFilters}
                                 >
                                     Reset to default
                                 </DropdownMenu.Item>
                                 <DropdownMenu.Item
                                     isDanger
-                                    leftSection={
-                                        <Icon
-                                            color="error"
-                                            icon="delete"
-                                        />
-                                    }
+                                    leftSection={<Icon color="error" icon="delete" />}
                                     onClick={onClearFilters}
                                 >
                                     Clear filters
diff --git a/src/renderer/components/query-builder/query-builder-option.tsx b/src/renderer/components/query-builder/query-builder-option.tsx
index b7503534..f78e2afe 100644
--- a/src/renderer/components/query-builder/query-builder-option.tsx
+++ b/src/renderer/components/query-builder/query-builder-option.tsx
@@ -48,13 +48,7 @@ const QueryValueInput = ({ data, onChange, type, ...props }: any) => {
                 />
             );
         case 'date':
-            return (
-                <TextInput
-                    onChange={onChange}
-                    size="sm"
-                    {...props}
-                />
-            );
+            return <TextInput onChange={onChange} size="sm" {...props} />;
         case 'dateRange':
             return (
                 <>
@@ -92,21 +86,9 @@ const QueryValueInput = ({ data, onChange, type, ...props }: any) => {
                 />
             );
         case 'playlist':
-            return (
-                <Select
-                    data={data}
-                    onChange={onChange}
-                    {...props}
-                />
-            );
+            return <Select data={data} onChange={onChange} {...props} />;
         case 'string':
-            return (
-                <TextInput
-                    onChange={onChange}
-                    size="sm"
-                    {...props}
-                />
-            );
+            return <TextInput onChange={onChange} size="sm" {...props} />;
 
         default:
             return <></>;
@@ -188,10 +170,7 @@ export const QueryBuilderOption = ({
     const ml = (level + 1) * 10;
 
     return (
-        <Group
-            gap="sm"
-            ml={ml}
-        >
+        <Group gap="sm" ml={ml}>
             <Select
                 data={filters}
                 maxWidth={170}
diff --git a/src/renderer/components/virtual-grid/grid-card/default-card.tsx b/src/renderer/components/virtual-grid/grid-card/default-card.tsx
index b9b2ba63..b337952e 100644
--- a/src/renderer/components/virtual-grid/grid-card/default-card.tsx
+++ b/src/renderer/components/virtual-grid/grid-card/default-card.tsx
@@ -81,10 +81,7 @@ export const DefaultCard = ({
                             data?.userFavorite && styles.isFavorite,
                         )}
                     >
-                        <Image
-                            className={styles.image}
-                            src={data?.imageUrl}
-                        />
+                        <Image className={styles.image} src={data?.imageUrl} />
                         <GridCardControls
                             handleFavorite={controls.handleFavorite}
                             handlePlayQueueAdd={controls.handlePlayQueueAdd}
@@ -95,10 +92,7 @@ export const DefaultCard = ({
                         />
                     </div>
                     <div className={styles.detailContainer}>
-                        <CardRows
-                            data={data}
-                            rows={controls.cardRows}
-                        />
+                        <CardRows data={data} rows={controls.cardRows} />
                     </div>
                 </div>
             </div>
diff --git a/src/renderer/components/virtual-grid/grid-card/grid-card-controls.tsx b/src/renderer/components/virtual-grid/grid-card/grid-card-controls.tsx
index 380ecacc..82c9401a 100644
--- a/src/renderer/components/virtual-grid/grid-card/grid-card-controls.tsx
+++ b/src/renderer/components/virtual-grid/grid-card/grid-card-controls.tsx
@@ -86,10 +86,7 @@ export const GridCardControls = ({
                         onClick={handlePlay}
                         variant="filled"
                     >
-                        <Icon
-                            icon="mediaPlay"
-                            size="xl"
-                        />
+                        <Icon icon="mediaPlay" size="xl" />
                     </Button>
                     <div className={styles.bottomControls}>
                         {itemType !== LibraryItem.PLAYLIST && (
diff --git a/src/renderer/components/virtual-grid/grid-card/poster-card.tsx b/src/renderer/components/virtual-grid/grid-card/poster-card.tsx
index 3c168f7c..fb8d5bef 100644
--- a/src/renderer/components/virtual-grid/grid-card/poster-card.tsx
+++ b/src/renderer/components/virtual-grid/grid-card/poster-card.tsx
@@ -73,17 +73,11 @@ export const PosterCard = ({
                     margin: controls.itemGap,
                 }}
             >
-                <div
-                    className={styles.linkContainer}
-                    onClick={() => navigate(path)}
-                >
+                <div className={styles.linkContainer} onClick={() => navigate(path)}>
                     <div
                         className={`${styles.imageContainer} ${data?.userFavorite ? styles.isFavorite : ''}`}
                     >
-                        <Image
-                            className={styles.image}
-                            src={data?.imageUrl}
-                        />
+                        <Image className={styles.image} src={data?.imageUrl} />
                         <GridCardControls
                             handleFavorite={controls.handleFavorite}
                             handlePlayQueueAdd={controls.handlePlayQueueAdd}
@@ -95,10 +89,7 @@ export const PosterCard = ({
                     </div>
                 </div>
                 <div className={styles.detailContainer}>
-                    <CardRows
-                        data={data}
-                        rows={controls.cardRows}
-                    />
+                    <CardRows data={data} rows={controls.cardRows} />
                 </div>
             </div>
         );
diff --git a/src/renderer/components/virtual-table/cells/album-artist-cell.tsx b/src/renderer/components/virtual-table/cells/album-artist-cell.tsx
index 006bd8ad..059de9cd 100644
--- a/src/renderer/components/virtual-table/cells/album-artist-cell.tsx
+++ b/src/renderer/components/virtual-table/cells/album-artist-cell.tsx
@@ -15,21 +15,14 @@ export const AlbumArtistCell = ({ data, value }: ICellRendererParams) => {
     if (value === undefined) {
         return (
             <CellContainer position="left">
-                <Skeleton
-                    height="1rem"
-                    width="80%"
-                />
+                <Skeleton height="1rem" width="80%" />
             </CellContainer>
         );
     }
 
     return (
         <CellContainer position="left">
-            <Text
-                isMuted
-                overflow="hidden"
-                size="md"
-            >
+            <Text isMuted overflow="hidden" size="md">
                 {value?.map((item: AlbumArtist | Artist, index: number) => (
                     <React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
                         {index > 0 && <Separator />}
@@ -47,11 +40,7 @@ export const AlbumArtistCell = ({ data, value }: ICellRendererParams) => {
                                 {item.name || '—'}
                             </Text>
                         ) : (
-                            <Text
-                                isMuted
-                                overflow="hidden"
-                                size="md"
-                            >
+                            <Text isMuted overflow="hidden" size="md">
                                 {item.name || '—'}
                             </Text>
                         )}
diff --git a/src/renderer/components/virtual-table/cells/artist-cell.tsx b/src/renderer/components/virtual-table/cells/artist-cell.tsx
index fa8cc53f..bbbb66a7 100644
--- a/src/renderer/components/virtual-table/cells/artist-cell.tsx
+++ b/src/renderer/components/virtual-table/cells/artist-cell.tsx
@@ -15,21 +15,14 @@ export const ArtistCell = ({ data, value }: ICellRendererParams) => {
     if (value === undefined) {
         return (
             <CellContainer position="left">
-                <Skeleton
-                    height="1rem"
-                    width="80%"
-                />
+                <Skeleton height="1rem" width="80%" />
             </CellContainer>
         );
     }
 
     return (
         <CellContainer position="left">
-            <Text
-                isMuted
-                overflow="hidden"
-                size="md"
-            >
+            <Text isMuted overflow="hidden" size="md">
                 {value?.map((item: AlbumArtist | Artist, index: number) => (
                     <React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
                         {index > 0 && <Separator />}
@@ -47,11 +40,7 @@ export const ArtistCell = ({ data, value }: ICellRendererParams) => {
                                 {item.name || '—'}
                             </Text>
                         ) : (
-                            <Text
-                                isMuted
-                                overflow="hidden"
-                                size="md"
-                            >
+                            <Text isMuted overflow="hidden" size="md">
                                 {item.name || '—'}
                             </Text>
                         )}
diff --git a/src/renderer/components/virtual-table/cells/combined-title-cell.tsx b/src/renderer/components/virtual-table/cells/combined-title-cell.tsx
index bffe9862..ba21d7e3 100644
--- a/src/renderer/components/virtual-table/cells/combined-title-cell.tsx
+++ b/src/renderer/components/virtual-table/cells/combined-title-cell.tsx
@@ -41,11 +41,7 @@ export const CombinedTitleCell = ({
                 >
                     <Skeleton className={styles.image} />
                 </div>
-                <Skeleton
-                    className={styles.skeletonMetadata}
-                    height="1rem"
-                    width="80%"
-                />
+                <Skeleton className={styles.skeletonMetadata} height="1rem" width="80%" />
             </div>
         );
     }
@@ -62,11 +58,7 @@ export const CombinedTitleCell = ({
                     width: `${(node.rowHeight || 40) - 10}px`,
                 }}
             >
-                <Image
-                    alt="cover"
-                    className={styles.image}
-                    src={value.imageUrl}
-                />
+                <Image alt="cover" className={styles.image} src={value.imageUrl} />
 
                 <ListCoverControls
                     className={styles.playButton}
@@ -77,18 +69,10 @@ export const CombinedTitleCell = ({
                 />
             </div>
             <div className={styles.metadataWrapper}>
-                <Text
-                    className="current-song-child"
-                    overflow="hidden"
-                    size="md"
-                >
+                <Text className="current-song-child" overflow="hidden" size="md">
                     {value.name}
                 </Text>
-                <Text
-                    isMuted
-                    overflow="hidden"
-                    size="md"
-                >
+                <Text isMuted overflow="hidden" size="md">
                     {artists?.length ? (
                         artists.map((artist: AlbumArtist | Artist, index: number) => (
                             <React.Fragment key={`queue-${rowIndex}-artist-${artist.id}`}>
diff --git a/src/renderer/components/virtual-table/cells/full-width-disc-cell.tsx b/src/renderer/components/virtual-table/cells/full-width-disc-cell.tsx
index 2ce9a923..0a64c03d 100644
--- a/src/renderer/components/virtual-table/cells/full-width-disc-cell.tsx
+++ b/src/renderer/components/virtual-table/cells/full-width-disc-cell.tsx
@@ -25,10 +25,7 @@ export const FullWidthDiscCell = ({ api, data, node }: ICellRendererParams) => {
 
     return (
         <div className={styles.container}>
-            <Group
-                justify="space-between"
-                w="100%"
-            >
+            <Group justify="space-between" w="100%">
                 <Button
                     leftSection={isSelected ? <Icon icon="squareCheck" /> : <Icon icon="square" />}
                     onClick={handleToggleDiscNodes}
diff --git a/src/renderer/components/virtual-table/cells/generic-cell.tsx b/src/renderer/components/virtual-table/cells/generic-cell.tsx
index 0cb3c1c7..637598bc 100644
--- a/src/renderer/components/virtual-table/cells/generic-cell.tsx
+++ b/src/renderer/components/virtual-table/cells/generic-cell.tsx
@@ -23,10 +23,7 @@ export const GenericCell = ({ value, valueFormatted }: ICellRendererParams, opti
     if (value === undefined) {
         return (
             <CellContainer position={position || 'left'}>
-                <Skeleton
-                    height="1rem"
-                    width="80%"
-                />
+                <Skeleton height="1rem" width="80%" />
             </CellContainer>
         );
     }
@@ -45,12 +42,7 @@ export const GenericCell = ({ value, valueFormatted }: ICellRendererParams, opti
                     {isLink ? displayedValue.value : displayedValue}
                 </Text>
             ) : (
-                <Text
-                    isMuted={!primary}
-                    isNoSelect={false}
-                    overflow="hidden"
-                    size="md"
-                >
+                <Text isMuted={!primary} isNoSelect={false} overflow="hidden" size="md">
                     {displayedValue}
                 </Text>
             )}
diff --git a/src/renderer/components/virtual-table/cells/genre-cell.tsx b/src/renderer/components/virtual-table/cells/genre-cell.tsx
index 5365948d..e1755dbc 100644
--- a/src/renderer/components/virtual-table/cells/genre-cell.tsx
+++ b/src/renderer/components/virtual-table/cells/genre-cell.tsx
@@ -13,11 +13,7 @@ export const GenreCell = ({ data, value }: ICellRendererParams) => {
     const genrePath = useGenreRoute();
     return (
         <CellContainer position="left">
-            <Text
-                isMuted
-                overflow="hidden"
-                size="md"
-            >
+            <Text isMuted overflow="hidden" size="md">
                 {value?.map((item: AlbumArtist | Artist, index: number) => (
                     <React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
                         {index > 0 && <Separator />}
diff --git a/src/renderer/components/virtual-table/cells/note-cell.tsx b/src/renderer/components/virtual-table/cells/note-cell.tsx
index c4ef40da..a094c41a 100644
--- a/src/renderer/components/virtual-table/cells/note-cell.tsx
+++ b/src/renderer/components/virtual-table/cells/note-cell.tsx
@@ -19,20 +19,14 @@ export const NoteCell = ({ value }: ICellRendererParams) => {
     if (value === undefined) {
         return (
             <CellContainer position="left">
-                <Skeleton
-                    height="1rem"
-                    width="80%"
-                />
+                <Skeleton height="1rem" width="80%" />
             </CellContainer>
         );
     }
 
     return (
         <CellContainer position="left">
-            <Text
-                isMuted
-                overflow="hidden"
-            >
+            <Text isMuted overflow="hidden">
                 {formattedValue}
             </Text>
         </CellContainer>
diff --git a/src/renderer/components/virtual-table/cells/rating-cell.tsx b/src/renderer/components/virtual-table/cells/rating-cell.tsx
index 80111941..b5669e25 100644
--- a/src/renderer/components/virtual-table/cells/rating-cell.tsx
+++ b/src/renderer/components/virtual-table/cells/rating-cell.tsx
@@ -26,11 +26,7 @@ export const RatingCell = ({ node, value }: ICellRendererParams) => {
 
     return (
         <CellContainer position="center">
-            <Rating
-                onChange={handleUpdateRating}
-                size="xs"
-                value={value?.userRating}
-            />
+            <Rating onChange={handleUpdateRating} size="xs" value={value?.userRating} />
         </CellContainer>
     );
 };
diff --git a/src/renderer/components/virtual-table/cells/row-index-cell.tsx b/src/renderer/components/virtual-table/cells/row-index-cell.tsx
index 43ca9451..6e9080d2 100644
--- a/src/renderer/components/virtual-table/cells/row-index-cell.tsx
+++ b/src/renderer/components/virtual-table/cells/row-index-cell.tsx
@@ -144,15 +144,9 @@ export const RowIndexCell = ({ eGridCell, value }: ICellRendererParams) => {
     return (
         <CellContainer position="right">
             {isPlaying && isCurrentSong ? (
-                <Icon
-                    fill="primary"
-                    icon="mediaPlay"
-                />
+                <Icon fill="primary" icon="mediaPlay" />
             ) : isCurrentSong ? (
-                <Icon
-                    fill="primary"
-                    icon="mediaPause"
-                />
+                <Icon fill="primary" icon="mediaPause" />
             ) : (
                 <Text
                     className="current-song-child current-song-index"
diff --git a/src/renderer/components/virtual-table/cells/title-cell.tsx b/src/renderer/components/virtual-table/cells/title-cell.tsx
index 8afad019..dfc39305 100644
--- a/src/renderer/components/virtual-table/cells/title-cell.tsx
+++ b/src/renderer/components/virtual-table/cells/title-cell.tsx
@@ -8,21 +8,14 @@ export const TitleCell = ({ value }: ICellRendererParams) => {
     if (value === undefined) {
         return (
             <CellContainer position="left">
-                <Skeleton
-                    height="1rem"
-                    width="80%"
-                />
+                <Skeleton height="1rem" width="80%" />
             </CellContainer>
         );
     }
 
     return (
         <CellContainer position="left">
-            <Text
-                className="current-song-child"
-                overflow="hidden"
-                size="md"
-            >
+            <Text className="current-song-child" overflow="hidden" size="md">
                 {value}
             </Text>
         </CellContainer>
diff --git a/src/renderer/components/virtual-table/headers/duration-header.tsx b/src/renderer/components/virtual-table/headers/duration-header.tsx
index c9fa81c9..0b72d792 100644
--- a/src/renderer/components/virtual-table/headers/duration-header.tsx
+++ b/src/renderer/components/virtual-table/headers/duration-header.tsx
@@ -7,10 +7,5 @@ export interface ICustomHeaderParams extends IHeaderParams {
 }
 
 export const DurationHeader = () => {
-    return (
-        <Icon
-            icon="duration"
-            size="sm"
-        />
-    );
+    return <Icon icon="duration" size="sm" />;
 };
diff --git a/src/renderer/components/virtual-table/headers/generic-table-header.tsx b/src/renderer/components/virtual-table/headers/generic-table-header.tsx
index 312d935a..27ea385e 100644
--- a/src/renderer/components/virtual-table/headers/generic-table-header.tsx
+++ b/src/renderer/components/virtual-table/headers/generic-table-header.tsx
@@ -16,36 +16,11 @@ type Options = {
 type Presets = 'actions' | 'duration' | 'rowIndex' | 'userFavorite' | 'userRating';
 
 const headerPresets = {
-    actions: (
-        <Icon
-            icon="ellipsisHorizontal"
-            size="sm"
-        />
-    ),
-    duration: (
-        <Icon
-            icon="duration"
-            size="sm"
-        />
-    ),
-    rowIndex: (
-        <Icon
-            icon="hash"
-            size="sm"
-        />
-    ),
-    userFavorite: (
-        <Icon
-            icon="favorite"
-            size="sm"
-        />
-    ),
-    userRating: (
-        <Icon
-            icon="star"
-            size="sm"
-        />
-    ),
+    actions: <Icon icon="ellipsisHorizontal" size="sm" />,
+    duration: <Icon icon="duration" size="sm" />,
+    rowIndex: <Icon icon="hash" size="sm" />,
+    userFavorite: <Icon icon="favorite" size="sm" />,
+    userRating: <Icon icon="star" size="sm" />,
 };
 
 export const GenericTableHeader = (
diff --git a/src/renderer/components/virtual-table/index.tsx b/src/renderer/components/virtual-table/index.tsx
index 894bba7d..2e06b9f4 100644
--- a/src/renderer/components/virtual-table/index.tsx
+++ b/src/renderer/components/virtual-table/index.tsx
@@ -635,15 +635,8 @@ export const VirtualTable = forwardRef(
                     onNewColumnsLoaded={handleNewColumnsLoaded}
                 />
                 {paginationProps && (
-                    <AnimatePresence
-                        initial={false}
-                        mode="wait"
-                        presenceAffectsLayout
-                    >
-                        <TablePagination
-                            {...paginationProps}
-                            tableRef={tableRef}
-                        />
+                    <AnimatePresence initial={false} mode="wait" presenceAffectsLayout>
+                        <TablePagination {...paginationProps} tableRef={tableRef} />
                     </AnimatePresence>
                 )}
             </div>
diff --git a/src/renderer/components/virtual-table/table-pagination.tsx b/src/renderer/components/virtual-table/table-pagination.tsx
index 63cc9ea2..b59d22af 100644
--- a/src/renderer/components/virtual-table/table-pagination.tsx
+++ b/src/renderer/components/virtual-table/table-pagination.tsx
@@ -76,10 +76,7 @@ export const TablePagination = ({
             ref={containerQuery.ref}
             style={{ borderTop: '1px solid var(--theme-generic-border-color)' }}
         >
-            <Text
-                isMuted
-                size="md"
-            >
+            <Text isMuted size="md">
                 {containerQuery.isMd ? (
                     <>
                         Showing <b>{currentPageStartIndex}</b> - <b>{currentPageStopIndex}</b> of{' '}
@@ -97,11 +94,7 @@ export const TablePagination = ({
                     </>
                 )}
             </Text>
-            <Group
-                gap="sm"
-                ref={containerQuery.ref}
-                wrap="nowrap"
-            >
+            <Group gap="sm" ref={containerQuery.ref} wrap="nowrap">
                 <Popover
                     onClose={() => handlers.close()}
                     opened={isGoToPageOpen}
@@ -127,10 +120,7 @@ export const TablePagination = ({
                                     min={1}
                                     width={70}
                                 />
-                                <Button
-                                    type="submit"
-                                    variant="filled"
-                                >
+                                <Button type="submit" variant="filled">
                                     Go
                                 </Button>
                             </Group>
diff --git a/src/renderer/features/action-required/components/action-required-container.tsx b/src/renderer/features/action-required/components/action-required-container.tsx
index 6b8fcab3..ac5d78f8 100644
--- a/src/renderer/features/action-required/components/action-required-container.tsx
+++ b/src/renderer/features/action-required/components/action-required-container.tsx
@@ -13,15 +13,8 @@ interface ActionRequiredContainerProps {
 export const ActionRequiredContainer = ({ children, title }: ActionRequiredContainerProps) => (
     <Stack style={{ cursor: 'default', maxWidth: '700px' }}>
         <Group>
-            <Icon
-                fill="warn"
-                icon="warn"
-                size="lg"
-            />
-            <Text
-                size="xl"
-                style={{ textTransform: 'uppercase' }}
-            >
+            <Icon fill="warn" icon="warn" size="lg" />
+            <Text size="xl" style={{ textTransform: 'uppercase' }}>
                 {title}
             </Text>
         </Group>
diff --git a/src/renderer/features/action-required/components/error-fallback.tsx b/src/renderer/features/action-required/components/error-fallback.tsx
index 02b70dcb..cd30dd4e 100644
--- a/src/renderer/features/action-required/components/error-fallback.tsx
+++ b/src/renderer/features/action-required/components/error-fallback.tsx
@@ -21,18 +21,11 @@ export const ErrorFallback = ({ resetErrorBoundary }: FallbackProps) => {
             <Center style={{ height: '100vh' }}>
                 <Stack style={{ maxWidth: '50%' }}>
                     <Group gap="xs">
-                        <Icon
-                            fill="error"
-                            icon="error"
-                            size="lg"
-                        />
+                        <Icon fill="error" icon="error" size="lg" />
                         <Text size="lg">{t('error.genericError')}</Text>
                     </Group>
                     <Text>{error?.message}</Text>
-                    <Button
-                        onClick={resetErrorBoundary}
-                        variant="filled"
-                    >
+                    <Button onClick={resetErrorBoundary} variant="filled">
                         {t('common.reload')}
                     </Button>
                 </Stack>
diff --git a/src/renderer/features/action-required/components/mpv-required.tsx b/src/renderer/features/action-required/components/mpv-required.tsx
index 0eb716c2..2907fe29 100644
--- a/src/renderer/features/action-required/components/mpv-required.tsx
+++ b/src/renderer/features/action-required/components/mpv-required.tsx
@@ -43,18 +43,11 @@ export const MpvRequired = () => {
             <Text>Set your MPV executable location below and restart the application.</Text>
             <Text>
                 MPV is available at the following:{' '}
-                <a
-                    href="https://mpv.io/installation/"
-                    rel="noreferrer"
-                    target="_blank"
-                >
+                <a href="https://mpv.io/installation/" rel="noreferrer" target="_blank">
                     https://mpv.io/
                 </a>
             </Text>
-            <FileInput
-                disabled={disabled}
-                onChange={handleSetMpvPath}
-            />
+            <FileInput disabled={disabled} onChange={handleSetMpvPath} />
             <Text>{t('setting.disable_mpv', { context: 'description' })}</Text>
             <Checkbox
                 label={t('setting.disableMpv')}
diff --git a/src/renderer/features/action-required/components/route-error-boundary.tsx b/src/renderer/features/action-required/components/route-error-boundary.tsx
index d541dffb..5e610be1 100644
--- a/src/renderer/features/action-required/components/route-error-boundary.tsx
+++ b/src/renderer/features/action-required/components/route-error-boundary.tsx
@@ -42,19 +42,12 @@ const RouteErrorBoundary = () => {
                             px={10}
                             variant="subtle"
                         />
-                        <Icon
-                            fill="error"
-                            icon="error"
-                            size="lg"
-                        />
+                        <Icon fill="error" icon="error" size="lg" />
                         <Text size="lg">{t('error.genericError')}</Text>
                     </Group>
                     <Divider my={5} />
                     <Text size="sm">{error?.message}</Text>
-                    <Group
-                        gap="sm"
-                        grow
-                    >
+                    <Group gap="sm" grow>
                         <Button
                             leftSection={<Icon icon="home" />}
                             onClick={handleHome}
@@ -81,11 +74,7 @@ const RouteErrorBoundary = () => {
                         </DropdownMenu>
                     </Group>
                     <Group grow>
-                        <Button
-                            onClick={handleReload}
-                            size="md"
-                            variant="filled"
-                        >
+                        <Button onClick={handleReload} size="md" variant="filled">
                             {t('common.reload')}
                         </Button>
                     </Group>
diff --git a/src/renderer/features/action-required/components/server-required.tsx b/src/renderer/features/action-required/components/server-required.tsx
index aa6b9e2a..45335db1 100644
--- a/src/renderer/features/action-required/components/server-required.tsx
+++ b/src/renderer/features/action-required/components/server-required.tsx
@@ -132,10 +132,7 @@ function ServerSelector() {
                         }}
                         variant={server.id === currentServer?.id ? 'filled' : 'default'}
                     >
-                        <Group
-                            justify="space-between"
-                            w="100%"
-                        >
+                        <Group justify="space-between" w="100%">
                             <Group>
                                 <img
                                     src={logo}
@@ -144,10 +141,7 @@ function ServerSelector() {
                                         width: 'var(--theme-font-size-2xl)',
                                     }}
                                 />
-                                <Text
-                                    fw={600}
-                                    size="lg"
-                                >
+                                <Text fw={600} size="lg">
                                     {server.name}
                                 </Text>
                             </Group>
diff --git a/src/renderer/features/action-required/routes/action-required-route.tsx b/src/renderer/features/action-required/routes/action-required-route.tsx
index 436e8c8a..9a04ace4 100644
--- a/src/renderer/features/action-required/routes/action-required-route.tsx
+++ b/src/renderer/features/action-required/routes/action-required-route.tsx
@@ -49,10 +49,7 @@ const ActionRequiredRoute = () => {
         <AnimatedPage>
             <PageHeader />
             <Center style={{ height: '100%', width: '100vw' }}>
-                <Stack
-                    gap="xl"
-                    style={{ maxWidth: '50%' }}
-                >
+                <Stack gap="xl" style={{ maxWidth: '50%' }}>
                     <Group wrap="nowrap">
                         {displayedCheck && (
                             <ActionRequiredContainer title={displayedCheck.title}>
@@ -64,10 +61,7 @@ const ActionRequiredRoute = () => {
                         {canReturnHome && <Navigate to={AppRoute.HOME} />}
                         {/* This should be displayed if a credential is required */}
                         {isCredentialRequired && (
-                            <Group
-                                justify="center"
-                                wrap="nowrap"
-                            >
+                            <Group justify="center" wrap="nowrap">
                                 <Button
                                     fullWidth
                                     leftSection={<Icon icon="edit" />}
diff --git a/src/renderer/features/action-required/routes/invalid-route.tsx b/src/renderer/features/action-required/routes/invalid-route.tsx
index 8ac4ea4b..2bac03d0 100644
--- a/src/renderer/features/action-required/routes/invalid-route.tsx
+++ b/src/renderer/features/action-required/routes/invalid-route.tsx
@@ -18,24 +18,14 @@ const InvalidRoute = () => {
         <AnimatedPage>
             <Center style={{ height: '100%', width: '100%' }}>
                 <Stack>
-                    <Group
-                        justify="center"
-                        wrap="nowrap"
-                    >
-                        <Icon
-                            color="warn"
-                            icon="error"
-                        />
+                    <Group justify="center" wrap="nowrap">
+                        <Icon color="warn" icon="error" />
                         <Text size="xl">
                             {t('error.apiRouteError', { postProcess: 'sentenceCase' })}
                         </Text>
                     </Group>
                     <Text>{location.pathname}</Text>
-                    <ActionIcon
-                        icon="arrowLeftS"
-                        onClick={() => navigate(-1)}
-                        variant="filled"
-                    />
+                    <ActionIcon icon="arrowLeftS" onClick={() => navigate(-1)} variant="filled" />
                 </Stack>
             </Center>
         </AnimatedPage>
diff --git a/src/renderer/features/albums/components/album-detail-content.tsx b/src/renderer/features/albums/components/album-detail-content.tsx
index 88d4fdd4..2d450683 100644
--- a/src/renderer/features/albums/components/album-detail-content.tsx
+++ b/src/renderer/features/albums/components/album-detail-content.tsx
@@ -319,17 +319,11 @@ export const AlbumDetailContent = ({ background, tableRef }: AlbumDetailContentP
     const mbzId = detailQuery?.data?.mbzId;
 
     return (
-        <div
-            className={styles.contentContainer}
-            ref={cq.ref}
-        >
+        <div className={styles.contentContainer} ref={cq.ref}>
             <LibraryBackgroundOverlay backgroundColor={background} />
             <div className={styles.detailContainer}>
                 <section>
-                    <Group
-                        gap="sm"
-                        justify="space-between"
-                    >
+                    <Group gap="sm" justify="space-between">
                         <Group>
                             <PlayButton onClick={() => handlePlay(playButtonBehavior)} />
                             <Group gap="xs">
@@ -485,11 +479,7 @@ export const AlbumDetailContent = ({ background, tableRef }: AlbumDetailContentP
                         suppressRowDrag
                     />
                 </div>
-                <Stack
-                    gap="lg"
-                    mt="3rem"
-                    ref={cq.ref}
-                >
+                <Stack gap="lg" mt="3rem" ref={cq.ref}>
                     {cq.height || cq.width ? (
                         <>
                             {carousels
diff --git a/src/renderer/features/albums/components/album-list-content.tsx b/src/renderer/features/albums/components/album-list-content.tsx
index 2fe52c72..d066098a 100644
--- a/src/renderer/features/albums/components/album-list-content.tsx
+++ b/src/renderer/features/albums/components/album-list-content.tsx
@@ -33,15 +33,9 @@ export const AlbumListContent = ({ gridRef, itemCount, tableRef }: AlbumListCont
     return (
         <Suspense fallback={<Spinner container />}>
             {display === ListDisplayType.CARD || display === ListDisplayType.GRID ? (
-                <AlbumListGridView
-                    gridRef={gridRef}
-                    itemCount={itemCount}
-                />
+                <AlbumListGridView gridRef={gridRef} itemCount={itemCount} />
             ) : (
-                <AlbumListTableView
-                    itemCount={itemCount}
-                    tableRef={tableRef}
-                />
+                <AlbumListTableView itemCount={itemCount} tableRef={tableRef} />
             )}
         </Suspense>
     );
diff --git a/src/renderer/features/albums/components/album-list-header-filters.tsx b/src/renderer/features/albums/components/album-list-header-filters.tsx
index 5c81d3db..0fcdeea6 100644
--- a/src/renderer/features/albums/components/album-list-header-filters.tsx
+++ b/src/renderer/features/albums/components/album-list-header-filters.tsx
@@ -448,11 +448,7 @@ export const AlbumListHeaderFilters = ({
 
     return (
         <Flex justify="space-between">
-            <Group
-                gap="sm"
-                ref={cq.ref}
-                w="100%"
-            >
+            <Group gap="sm" ref={cq.ref} w="100%">
                 <DropdownMenu position="bottom-start">
                     <DropdownMenu.Target>
                         <Button variant="subtle">{sortByLabel}</Button>
@@ -471,10 +467,7 @@ export const AlbumListHeaderFilters = ({
                     </DropdownMenu.Dropdown>
                 </DropdownMenu>
                 <Divider orientation="vertical" />
-                <OrderToggleButton
-                    onToggle={handleToggleSortOrder}
-                    sortOrder={filter.sortOrder}
-                />
+                <OrderToggleButton onToggle={handleToggleSortOrder} sortOrder={filter.sortOrder} />
                 {server?.type === ServerType.JELLYFIN && (
                     <>
                         <Divider orientation="vertical" />
@@ -497,10 +490,7 @@ export const AlbumListHeaderFilters = ({
                         </DropdownMenu>
                     </>
                 )}
-                <FilterButton
-                    isActive={!!isFilterApplied}
-                    onClick={handleOpenFiltersModal}
-                />
+                <FilterButton isActive={!!isFilterApplied} onClick={handleOpenFiltersModal} />
                 <RefreshButton onClick={handleRefresh} />
                 <DropdownMenu position="bottom-start">
                     <DropdownMenu.Target>
@@ -535,10 +525,7 @@ export const AlbumListHeaderFilters = ({
                     </DropdownMenu.Dropdown>
                 </DropdownMenu>
             </Group>
-            <Group
-                gap="sm"
-                wrap="nowrap"
-            >
+            <Group gap="sm" wrap="nowrap">
                 <ListConfigMenu
                     autoFitColumns={table.autoFit}
                     disabledViewTypes={[ListDisplayType.LIST]}
diff --git a/src/renderer/features/albums/components/album-list-header.tsx b/src/renderer/features/albums/components/album-list-header.tsx
index 23f50858..daa67237 100644
--- a/src/renderer/features/albums/components/album-list-header.tsx
+++ b/src/renderer/features/albums/components/album-list-header.tsx
@@ -61,15 +61,9 @@ export const AlbumListHeader = ({
     }, [filter, genreId, refresh, tableRef]);
 
     return (
-        <Stack
-            gap={0}
-            ref={cq.ref}
-        >
+        <Stack gap={0} ref={cq.ref}>
             <PageHeader backgroundColor="var(--theme-colors-background)">
-                <Flex
-                    justify="space-between"
-                    w="100%"
-                >
+                <Flex justify="space-between" w="100%">
                     <LibraryHeaderBar>
                         <LibraryHeaderBar.PlayButton
                             onClick={() => handlePlay?.({ playType: playButtonBehavior })}
@@ -85,10 +79,7 @@ export const AlbumListHeader = ({
                         </LibraryHeaderBar.Badge>
                     </LibraryHeaderBar>
                     <Group>
-                        <SearchInput
-                            defaultValue={filter.searchTerm}
-                            onChange={handleSearch}
-                        />
+                        <SearchInput defaultValue={filter.searchTerm} onChange={handleSearch} />
                     </Group>
                 </Flex>
             </PageHeader>
diff --git a/src/renderer/features/albums/components/jellyfin-album-filters.tsx b/src/renderer/features/albums/components/jellyfin-album-filters.tsx
index 5b81964c..9a76b203 100644
--- a/src/renderer/features/albums/components/jellyfin-album-filters.tsx
+++ b/src/renderer/features/albums/components/jellyfin-album-filters.tsx
@@ -227,16 +227,9 @@ export const JellyfinAlbumFilters = ({
     return (
         <Stack p="0.8rem">
             {yesNoFilter.map((filter) => (
-                <Group
-                    justify="space-between"
-                    key={`nd-filter-${filter.label}`}
-                >
+                <Group justify="space-between" key={`nd-filter-${filter.label}`}>
                     <Text>{filter.label}</Text>
-                    <YesNoSelect
-                        onChange={filter.onChange}
-                        size="xs"
-                        value={filter.value}
-                    />
+                    <YesNoSelect onChange={filter.onChange} size="xs" value={filter.value} />
                 </Group>
             ))}
             <Divider my="0.5rem" />
diff --git a/src/renderer/features/albums/components/navidrome-album-filters.tsx b/src/renderer/features/albums/components/navidrome-album-filters.tsx
index efd3cdb2..672c6caf 100644
--- a/src/renderer/features/albums/components/navidrome-album-filters.tsx
+++ b/src/renderer/features/albums/components/navidrome-album-filters.tsx
@@ -248,28 +248,15 @@ export const NavidromeAlbumFilters = ({
     return (
         <Stack p="0.8rem">
             {yesNoUndefinedFilters.map((filter) => (
-                <Group
-                    justify="space-between"
-                    key={`nd-filter-${filter.label}`}
-                >
+                <Group justify="space-between" key={`nd-filter-${filter.label}`}>
                     <Text>{filter.label}</Text>
-                    <YesNoSelect
-                        onChange={filter.onChange}
-                        size="xs"
-                        value={filter.value}
-                    />
+                    <YesNoSelect onChange={filter.onChange} size="xs" value={filter.value} />
                 </Group>
             ))}
             {toggleFilters.map((filter) => (
-                <Group
-                    justify="space-between"
-                    key={`nd-filter-${filter.label}`}
-                >
+                <Group justify="space-between" key={`nd-filter-${filter.label}`}>
                     <Text>{filter.label}</Text>
-                    <Switch
-                        checked={filter?.value || false}
-                        onChange={filter.onChange}
-                    />
+                    <Switch checked={filter?.value || false} onChange={filter.onChange} />
                 </Group>
             ))}
             <Divider my="0.5rem" />
@@ -307,10 +294,7 @@ export const NavidromeAlbumFilters = ({
             {tagsQuery.data?.enumTags?.length &&
                 tagsQuery.data.enumTags.length > 0 &&
                 tagsQuery.data.enumTags.map((tag) => (
-                    <Group
-                        grow
-                        key={tag.name}
-                    >
+                    <Group grow key={tag.name}>
                         <SelectWithInvalidData
                             clearable
                             data={tag.options}
diff --git a/src/renderer/features/albums/components/subsonic-album-filters.tsx b/src/renderer/features/albums/components/subsonic-album-filters.tsx
index 70702e25..356b5bde 100644
--- a/src/renderer/features/albums/components/subsonic-album-filters.tsx
+++ b/src/renderer/features/albums/components/subsonic-album-filters.tsx
@@ -148,15 +148,9 @@ export const SubsonicAlbumFilters = ({
     return (
         <Stack p="0.8rem">
             {toggleFilters.map((filter) => (
-                <Group
-                    justify="space-between"
-                    key={`nd-filter-${filter.label}`}
-                >
+                <Group justify="space-between" key={`nd-filter-${filter.label}`}>
                     <Text>{filter.label}</Text>
-                    <Switch
-                        checked={filter?.value || false}
-                        onChange={filter.onChange}
-                    />
+                    <Switch checked={filter?.value || false} onChange={filter.onChange} />
                 </Group>
             ))}
             <Divider my="0.5rem" />
diff --git a/src/renderer/features/albums/routes/album-detail-route.tsx b/src/renderer/features/albums/routes/album-detail-route.tsx
index cf55f165..32f93675 100644
--- a/src/renderer/features/albums/routes/album-detail-route.tsx
+++ b/src/renderer/features/albums/routes/album-detail-route.tsx
@@ -70,10 +70,7 @@ const AlbumDetailRoute = () => {
                     }}
                     ref={headerRef}
                 />
-                <AlbumDetailContent
-                    background={background}
-                    tableRef={tableRef}
-                />
+                <AlbumDetailContent background={background} tableRef={tableRef} />
             </NativeScrollArea>
         </AnimatedPage>
     );
diff --git a/src/renderer/features/albums/routes/album-list-route.tsx b/src/renderer/features/albums/routes/album-list-route.tsx
index 2af3cf4d..095958a6 100644
--- a/src/renderer/features/albums/routes/album-list-route.tsx
+++ b/src/renderer/features/albums/routes/album-list-route.tsx
@@ -144,11 +144,7 @@ const AlbumListRoute = () => {
                     tableRef={tableRef}
                     title={title}
                 />
-                <AlbumListContent
-                    gridRef={gridRef}
-                    itemCount={itemCount}
-                    tableRef={tableRef}
-                />
+                <AlbumListContent gridRef={gridRef} itemCount={itemCount} tableRef={tableRef} />
             </ListContext.Provider>
         </AnimatedPage>
     );
diff --git a/src/renderer/features/albums/routes/dummy-album-detail-route.tsx b/src/renderer/features/albums/routes/dummy-album-detail-route.tsx
index d5f0b9aa..ccc81636 100644
--- a/src/renderer/features/albums/routes/dummy-album-detail-route.tsx
+++ b/src/renderer/features/albums/routes/dummy-album-detail-route.tsx
@@ -174,10 +174,7 @@ const DummyAlbumDetailRoute = () => {
             </Stack>
             <div className={styles.detailContainer}>
                 <section>
-                    <Group
-                        gap="sm"
-                        justify="space-between"
-                    >
+                    <Group gap="sm" justify="space-between">
                         <Group>
                             <PlayButton onClick={() => handlePlay()} />
                             <ActionIcon
@@ -231,11 +228,7 @@ const DummyAlbumDetailRoute = () => {
                 <section>
                     <Center>
                         <Group mr={5}>
-                            <Icon
-                                fill="error"
-                                icon="error"
-                                size={30}
-                            />
+                            <Icon fill="error" icon="error" size={30} />
                         </Group>
                         <h2>{t('error.badAlbum', { postProcess: 'sentenceCase' })}</h2>
                     </Center>
diff --git a/src/renderer/features/artists/components/album-artist-detail-content.tsx b/src/renderer/features/artists/components/album-artist-detail-content.tsx
index d54066e1..aad0e5b5 100644
--- a/src/renderer/features/artists/components/album-artist-detail-content.tsx
+++ b/src/renderer/features/artists/components/album-artist-detail-content.tsx
@@ -202,10 +202,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
                 order: itemOrder.recentAlbums,
                 title: (
                     <Group align="flex-end">
-                        <TextTitle
-                            fw={700}
-                            order={2}
-                        >
+                        <TextTitle fw={700} order={2}>
                             {t('page.albumArtistDetail.recentReleases', {
                                 postProcess: 'sentenceCase',
                             })}
@@ -232,10 +229,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
                 loading: compilationAlbumsQuery?.isLoading || compilationAlbumsQuery.isFetching,
                 order: itemOrder.compilations,
                 title: (
-                    <TextTitle
-                        fw={700}
-                        order={2}
-                    >
+                    <TextTitle fw={700} order={2}>
                         {t('page.albumArtistDetail.appearsOn', { postProcess: 'sentenceCase' })}
                     </TextTitle>
                 ),
@@ -247,10 +241,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
                 itemType: LibraryItem.ALBUM_ARTIST,
                 order: itemOrder.similarArtists,
                 title: (
-                    <TextTitle
-                        fw={700}
-                        order={2}
-                    >
+                    <TextTitle fw={700} order={2}>
                         {t('page.albumArtistDetail.relatedArtists', {
                             postProcess: 'sentenceCase',
                         })}
@@ -355,19 +346,10 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
         detailQuery?.isLoading ||
         (server?.type === ServerType.NAVIDROME && enabledItem.topSongs && topSongsQuery?.isLoading);
 
-    if (isLoading)
-        return (
-            <div
-                className={styles.contentContainer}
-                ref={cq.ref}
-            />
-        );
+    if (isLoading) return <div className={styles.contentContainer} ref={cq.ref} />;
 
     return (
-        <div
-            className={styles.contentContainer}
-            ref={cq.ref}
-        >
+        <div className={styles.contentContainer} ref={cq.ref}>
             <LibraryBackgroundOverlay backgroundColor={background} />
             <div className={styles.detailContainer}>
                 <Group gap="md">
@@ -481,15 +463,9 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
                 ) : null}
                 <Grid gutter="xl">
                     {biography ? (
-                        <Grid.Col
-                            order={itemOrder.biography}
-                            span={12}
-                        >
+                        <Grid.Col order={itemOrder.biography} span={12}>
                             <section style={{ maxWidth: '1280px' }}>
-                                <TextTitle
-                                    fw={700}
-                                    order={2}
-                                >
+                                <TextTitle fw={700} order={2}>
                                     {t('page.albumArtistDetail.about', {
                                         artist: detailQuery?.data?.name,
                                     })}
@@ -499,23 +475,11 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
                         </Grid.Col>
                     ) : null}
                     {showTopSongs ? (
-                        <Grid.Col
-                            order={itemOrder.topSongs}
-                            span={12}
-                        >
+                        <Grid.Col order={itemOrder.topSongs} span={12}>
                             <section>
-                                <Group
-                                    justify="space-between"
-                                    wrap="nowrap"
-                                >
-                                    <Group
-                                        align="flex-end"
-                                        wrap="nowrap"
-                                    >
-                                        <TextTitle
-                                            fw={700}
-                                            order={2}
-                                        >
+                                <Group justify="space-between" wrap="nowrap">
+                                    <Group align="flex-end" wrap="nowrap">
+                                        <TextTitle fw={700} order={2}>
                                             {t('page.albumArtistDetail.topSongs', {
                                                 postProcess: 'sentenceCase',
                                             })}
diff --git a/src/renderer/features/artists/components/album-artist-list-content.tsx b/src/renderer/features/artists/components/album-artist-list-content.tsx
index a8275b8f..028eff97 100644
--- a/src/renderer/features/artists/components/album-artist-list-content.tsx
+++ b/src/renderer/features/artists/components/album-artist-list-content.tsx
@@ -42,15 +42,9 @@ export const AlbumArtistListContent = ({
     return (
         <Suspense fallback={<Spinner container />}>
             {isGrid ? (
-                <AlbumArtistListGridView
-                    gridRef={gridRef}
-                    itemCount={itemCount}
-                />
+                <AlbumArtistListGridView gridRef={gridRef} itemCount={itemCount} />
             ) : (
-                <AlbumArtistListTableView
-                    itemCount={itemCount}
-                    tableRef={tableRef}
-                />
+                <AlbumArtistListTableView itemCount={itemCount} tableRef={tableRef} />
             )}
         </Suspense>
     );
diff --git a/src/renderer/features/artists/components/album-artist-list-header-filters.tsx b/src/renderer/features/artists/components/album-artist-list-header-filters.tsx
index c61e2191..3ff39318 100644
--- a/src/renderer/features/artists/components/album-artist-list-header-filters.tsx
+++ b/src/renderer/features/artists/components/album-artist-list-header-filters.tsx
@@ -372,11 +372,7 @@ export const AlbumArtistListHeaderFilters = ({
 
     return (
         <Flex justify="space-between">
-            <Group
-                gap="sm"
-                ref={cq.ref}
-                w="100%"
-            >
+            <Group gap="sm" ref={cq.ref} w="100%">
                 <DropdownMenu position="bottom-start">
                     <DropdownMenu.Target>
                         <Button variant="subtle">{sortByLabel}</Button>
@@ -395,10 +391,7 @@ export const AlbumArtistListHeaderFilters = ({
                     </DropdownMenu.Dropdown>
                 </DropdownMenu>
                 <Divider orientation="vertical" />
-                <OrderToggleButton
-                    onToggle={handleToggleSortOrder}
-                    sortOrder={filter.sortOrder}
-                />
+                <OrderToggleButton onToggle={handleToggleSortOrder} sortOrder={filter.sortOrder} />
                 {server?.type === ServerType.JELLYFIN && (
                     <>
                         <DropdownMenu position="bottom-start">
@@ -437,10 +430,7 @@ export const AlbumArtistListHeaderFilters = ({
                     </DropdownMenu.Dropdown>
                 </DropdownMenu>
             </Group>
-            <Group
-                gap="sm"
-                wrap="nowrap"
-            >
+            <Group gap="sm" wrap="nowrap">
                 <ListConfigMenu
                     autoFitColumns={table.autoFit}
                     disabledViewTypes={[ListDisplayType.LIST]}
diff --git a/src/renderer/features/artists/components/album-artist-list-header.tsx b/src/renderer/features/artists/components/album-artist-list-header.tsx
index 293ebf5d..0eea5317 100644
--- a/src/renderer/features/artists/components/album-artist-list-header.tsx
+++ b/src/renderer/features/artists/components/album-artist-list-header.tsx
@@ -46,15 +46,9 @@ export const AlbumArtistListHeader = ({
     }, 500);
 
     return (
-        <Stack
-            gap={0}
-            ref={cq.ref}
-        >
+        <Stack gap={0} ref={cq.ref}>
             <PageHeader>
-                <Flex
-                    justify="space-between"
-                    w="100%"
-                >
+                <Flex justify="space-between" w="100%">
                     <LibraryHeaderBar>
                         <LibraryHeaderBar.Title>
                             {t('page.albumArtistList.title', { postProcess: 'titleCase' })}
@@ -66,18 +60,12 @@ export const AlbumArtistListHeader = ({
                         </LibraryHeaderBar.Badge>
                     </LibraryHeaderBar>
                     <Group>
-                        <SearchInput
-                            defaultValue={filter.searchTerm}
-                            onChange={handleSearch}
-                        />
+                        <SearchInput defaultValue={filter.searchTerm} onChange={handleSearch} />
                     </Group>
                 </Flex>
             </PageHeader>
             <FilterBar>
-                <AlbumArtistListHeaderFilters
-                    gridRef={gridRef}
-                    tableRef={tableRef}
-                />
+                <AlbumArtistListHeaderFilters gridRef={gridRef} tableRef={tableRef} />
             </FilterBar>
         </Stack>
     );
diff --git a/src/renderer/features/artists/components/artist-list-content.tsx b/src/renderer/features/artists/components/artist-list-content.tsx
index e1332f72..90c22404 100644
--- a/src/renderer/features/artists/components/artist-list-content.tsx
+++ b/src/renderer/features/artists/components/artist-list-content.tsx
@@ -34,15 +34,9 @@ export const ArtistListContent = ({ gridRef, itemCount, tableRef }: ArtistListCo
     return (
         <Suspense fallback={<Spinner container />}>
             {isGrid ? (
-                <ArtistListGridView
-                    gridRef={gridRef}
-                    itemCount={itemCount}
-                />
+                <ArtistListGridView gridRef={gridRef} itemCount={itemCount} />
             ) : (
-                <ArtistListTableView
-                    itemCount={itemCount}
-                    tableRef={tableRef}
-                />
+                <ArtistListTableView itemCount={itemCount} tableRef={tableRef} />
             )}
         </Suspense>
     );
diff --git a/src/renderer/features/artists/components/artist-list-header-filters.tsx b/src/renderer/features/artists/components/artist-list-header-filters.tsx
index b1a4c116..456c69db 100644
--- a/src/renderer/features/artists/components/artist-list-header-filters.tsx
+++ b/src/renderer/features/artists/components/artist-list-header-filters.tsx
@@ -388,11 +388,7 @@ export const ArtistListHeaderFilters = ({ gridRef, tableRef }: ArtistListHeaderF
 
     return (
         <Flex justify="space-between">
-            <Group
-                gap="sm"
-                ref={cq.ref}
-                w="100%"
-            >
+            <Group gap="sm" ref={cq.ref} w="100%">
                 <DropdownMenu position="bottom-start">
                     <DropdownMenu.Target>
                         <Button variant="subtle">{sortByLabel}</Button>
@@ -411,19 +407,13 @@ export const ArtistListHeaderFilters = ({ gridRef, tableRef }: ArtistListHeaderF
                     </DropdownMenu.Dropdown>
                 </DropdownMenu>
                 <Divider orientation="vertical" />
-                <OrderToggleButton
-                    onToggle={handleToggleSortOrder}
-                    sortOrder={filter.sortOrder}
-                />
+                <OrderToggleButton onToggle={handleToggleSortOrder} sortOrder={filter.sortOrder} />
                 {server?.type === ServerType.JELLYFIN && (
                     <>
                         <Divider orientation="vertical" />
                         <DropdownMenu position="bottom-start">
                             <DropdownMenu.Target>
-                                <ActionIcon
-                                    icon="folder"
-                                    variant="subtle"
-                                />
+                                <ActionIcon icon="folder" variant="subtle" />
                             </DropdownMenu.Target>
                             <DropdownMenu.Dropdown>
                                 {musicFoldersQuery.data?.items.map((folder) => (
@@ -442,11 +432,7 @@ export const ArtistListHeaderFilters = ({ gridRef, tableRef }: ArtistListHeaderF
                 )}
                 {roles.data?.length && (
                     <>
-                        <Select
-                            data={roles.data}
-                            onChange={handleSetRole}
-                            value={filter.role}
-                        />
+                        <Select data={roles.data} onChange={handleSetRole} value={filter.role} />
                     </>
                 )}
                 <RefreshButton onClick={handleRefresh} />
@@ -466,10 +452,7 @@ export const ArtistListHeaderFilters = ({ gridRef, tableRef }: ArtistListHeaderF
                     </DropdownMenu.Dropdown>
                 </DropdownMenu>
             </Group>
-            <Group
-                gap="xs"
-                wrap="nowrap"
-            >
+            <Group gap="xs" wrap="nowrap">
                 <ListConfigMenu
                     autoFitColumns={table.autoFit}
                     displayType={display}
diff --git a/src/renderer/features/artists/components/artist-list-header.tsx b/src/renderer/features/artists/components/artist-list-header.tsx
index 51c73174..0a0e65e9 100644
--- a/src/renderer/features/artists/components/artist-list-header.tsx
+++ b/src/renderer/features/artists/components/artist-list-header.tsx
@@ -42,15 +42,9 @@ export const ArtistListHeader = ({ gridRef, itemCount, tableRef }: ArtistListHea
     }, 500);
 
     return (
-        <Stack
-            gap={0}
-            ref={cq.ref}
-        >
+        <Stack gap={0} ref={cq.ref}>
             <PageHeader>
-                <Flex
-                    justify="space-between"
-                    w="100%"
-                >
+                <Flex justify="space-between" w="100%">
                     <LibraryHeaderBar>
                         <LibraryHeaderBar.Title>
                             {t('entity.artist_other', { postProcess: 'titleCase' })}
@@ -62,18 +56,12 @@ export const ArtistListHeader = ({ gridRef, itemCount, tableRef }: ArtistListHea
                         </LibraryHeaderBar.Badge>
                     </LibraryHeaderBar>
                     <Group>
-                        <SearchInput
-                            defaultValue={filter.searchTerm}
-                            onChange={handleSearch}
-                        />
+                        <SearchInput defaultValue={filter.searchTerm} onChange={handleSearch} />
                     </Group>
                 </Flex>
             </PageHeader>
             <FilterBar>
-                <ArtistListHeaderFilters
-                    gridRef={gridRef}
-                    tableRef={tableRef}
-                />
+                <ArtistListHeaderFilters gridRef={gridRef} tableRef={tableRef} />
             </FilterBar>
         </Stack>
     );
diff --git a/src/renderer/features/artists/routes/artist-list-route.tsx b/src/renderer/features/artists/routes/artist-list-route.tsx
index e27c4fbe..8113651d 100644
--- a/src/renderer/features/artists/routes/artist-list-route.tsx
+++ b/src/renderer/features/artists/routes/artist-list-route.tsx
@@ -41,16 +41,8 @@ const ArtistListRoute = () => {
     return (
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
-                <ArtistListHeader
-                    gridRef={gridRef}
-                    itemCount={itemCount}
-                    tableRef={tableRef}
-                />
-                <ArtistListContent
-                    gridRef={gridRef}
-                    itemCount={itemCount}
-                    tableRef={tableRef}
-                />
+                <ArtistListHeader gridRef={gridRef} itemCount={itemCount} tableRef={tableRef} />
+                <ArtistListContent gridRef={gridRef} itemCount={itemCount} tableRef={tableRef} />
             </ListContext.Provider>
         </AnimatedPage>
     );
diff --git a/src/renderer/features/context-menu/context-menu-provider.tsx b/src/renderer/features/context-menu/context-menu-provider.tsx
index 3a00d065..5e33a70f 100644
--- a/src/renderer/features/context-menu/context-menu-provider.tsx
+++ b/src/renderer/features/context-menu/context-menu-provider.tsx
@@ -533,10 +533,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
 
         openModal({
             children: (
-                <ConfirmModal
-                    loading={removeFromPlaylistMutation.isLoading}
-                    onConfirm={confirm}
-                >
+                <ConfirmModal loading={removeFromPlaylistMutation.isLoading} onConfirm={confirm}>
                     {t('common.areYouSure', { postProcess: 'sentenceCase' })}
                 </ConfirmModal>
             ),
@@ -922,26 +919,15 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
             <Portal>
                 <AnimatePresence>
                     {opened && (
-                        <ContextMenu
-                            minWidth={125}
-                            ref={mergedRef}
-                            xPos={ctx.xPos}
-                            yPos={ctx.yPos}
-                        >
+                        <ContextMenu minWidth={125} ref={mergedRef} xPos={ctx.xPos} yPos={ctx.yPos}>
                             <Stack gap={0}>
-                                <Stack
-                                    gap={0}
-                                    onClick={closeContextMenu}
-                                >
+                                <Stack gap={0} onClick={closeContextMenu}>
                                     {ctx.menuItems?.map((item) => {
                                         return (
                                             !contextMenuItems[item.id].disabled && (
                                                 <Fragment key={`context-menu-${item.id}`}>
                                                     {item.children ? (
-                                                        <HoverCard
-                                                            offset={0}
-                                                            position="right"
-                                                        >
+                                                        <HoverCard offset={0} position="right">
                                                             <HoverCard.Target>
                                                                 <ContextMenuButton
                                                                     leftIcon={
diff --git a/src/renderer/features/genres/components/genre-list-content.tsx b/src/renderer/features/genres/components/genre-list-content.tsx
index 85b3273e..d331479c 100644
--- a/src/renderer/features/genres/components/genre-list-content.tsx
+++ b/src/renderer/features/genres/components/genre-list-content.tsx
@@ -33,15 +33,9 @@ export const GenreListContent = ({ gridRef, itemCount, tableRef }: AlbumListCont
     return (
         <Suspense fallback={<Spinner container />}>
             {display === ListDisplayType.CARD || display === ListDisplayType.GRID ? (
-                <GenreListGridView
-                    gridRef={gridRef}
-                    itemCount={itemCount}
-                />
+                <GenreListGridView gridRef={gridRef} itemCount={itemCount} />
             ) : (
-                <GenreListTableView
-                    itemCount={itemCount}
-                    tableRef={tableRef}
-                />
+                <GenreListTableView itemCount={itemCount} tableRef={tableRef} />
             )}
         </Suspense>
     );
diff --git a/src/renderer/features/genres/components/genre-list-header-filters.tsx b/src/renderer/features/genres/components/genre-list-header-filters.tsx
index a7488099..e58fea6e 100644
--- a/src/renderer/features/genres/components/genre-list-header-filters.tsx
+++ b/src/renderer/features/genres/components/genre-list-header-filters.tsx
@@ -254,11 +254,7 @@ export const GenreListHeaderFilters = ({
 
     return (
         <Flex justify="space-between">
-            <Group
-                gap="sm"
-                ref={cq.ref}
-                w="100%"
-            >
+            <Group gap="sm" ref={cq.ref} w="100%">
                 <DropdownMenu position="bottom-start">
                     <DropdownMenu.Target>
                         <Button variant="subtle">{sortByLabel}</Button>
@@ -277,10 +273,7 @@ export const GenreListHeaderFilters = ({
                     </DropdownMenu.Dropdown>
                 </DropdownMenu>
                 <Divider orientation="vertical" />
-                <OrderToggleButton
-                    onToggle={handleToggleSortOrder}
-                    sortOrder={filter.sortOrder}
-                />
+                <OrderToggleButton onToggle={handleToggleSortOrder} sortOrder={filter.sortOrder} />
                 {server?.type === ServerType.JELLYFIN && (
                     <>
                         <Divider orientation="vertical" />
@@ -340,10 +333,7 @@ export const GenreListHeaderFilters = ({
                     </Button>
                 </DropdownMenu>
             </Group>
-            <Group
-                gap="sm"
-                wrap="nowrap"
-            >
+            <Group gap="sm" wrap="nowrap">
                 <ListConfigMenu
                     autoFitColumns={table.autoFit}
                     disabledViewTypes={[ListDisplayType.LIST]}
diff --git a/src/renderer/features/genres/components/genre-list-header.tsx b/src/renderer/features/genres/components/genre-list-header.tsx
index dc3490ab..e44bbee8 100644
--- a/src/renderer/features/genres/components/genre-list-header.tsx
+++ b/src/renderer/features/genres/components/genre-list-header.tsx
@@ -40,15 +40,9 @@ export const GenreListHeader = ({ gridRef, itemCount, tableRef }: GenreListHeade
     }, 500);
 
     return (
-        <Stack
-            gap={0}
-            ref={cq.ref}
-        >
+        <Stack gap={0} ref={cq.ref}>
             <PageHeader>
-                <Flex
-                    justify="space-between"
-                    w="100%"
-                >
+                <Flex justify="space-between" w="100%">
                     <LibraryHeaderBar>
                         <LibraryHeaderBar.Title>
                             {t('page.genreList.title', { postProcess: 'titleCase' })}
@@ -60,10 +54,7 @@ export const GenreListHeader = ({ gridRef, itemCount, tableRef }: GenreListHeade
                         </LibraryHeaderBar.Badge>
                     </LibraryHeaderBar>
                     <Group>
-                        <SearchInput
-                            defaultValue={filter.searchTerm}
-                            onChange={handleSearch}
-                        />
+                        <SearchInput defaultValue={filter.searchTerm} onChange={handleSearch} />
                     </Group>
                 </Flex>
             </PageHeader>
diff --git a/src/renderer/features/genres/routes/genre-list-route.tsx b/src/renderer/features/genres/routes/genre-list-route.tsx
index 80650d87..91ebe571 100644
--- a/src/renderer/features/genres/routes/genre-list-route.tsx
+++ b/src/renderer/features/genres/routes/genre-list-route.tsx
@@ -42,16 +42,8 @@ const GenreListRoute = () => {
     return (
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
-                <GenreListHeader
-                    gridRef={gridRef}
-                    itemCount={itemCount}
-                    tableRef={tableRef}
-                />
-                <GenreListContent
-                    gridRef={gridRef}
-                    itemCount={itemCount}
-                    tableRef={tableRef}
-                />
+                <GenreListHeader gridRef={gridRef} itemCount={itemCount} tableRef={tableRef} />
+                <GenreListContent gridRef={gridRef} itemCount={itemCount} tableRef={tableRef} />
             </ListContext.Provider>
         </AnimatedPage>
     );
diff --git a/src/renderer/features/item-details/components/item-details-modal.tsx b/src/renderer/features/item-details/components/item-details-modal.tsx
index d7e81971..479fa4a6 100644
--- a/src/renderer/features/item-details/components/item-details-modal.tsx
+++ b/src/renderer/features/item-details/components/item-details-modal.tsx
@@ -81,10 +81,7 @@ const formatArtists = (artists: null | RelatedArtist[] | undefined) =>
                     {artist.name || '—'}
                 </Text>
             ) : (
-                <Text
-                    overflow="visible"
-                    size="md"
-                >
+                <Text overflow="visible" size="md">
                     {artist.name || '-'}
                 </Text>
             )}
@@ -119,17 +116,7 @@ const FormatGenre = (item: Album | AlbumArtist | Playlist | Song) => {
 };
 
 const BoolField = (key: boolean) =>
-    key ? (
-        <Icon
-            color="success"
-            icon="check"
-        />
-    ) : (
-        <Icon
-            color="error"
-            icon="x"
-        />
-    );
+    key ? <Icon color="success" icon="check" /> : <Icon color="error" icon="x" />;
 
 const AlbumPropertyMapping: ItemDetailRow<Album>[] = [
     { key: 'name', label: 'common.title' },
@@ -409,12 +396,7 @@ export const ItemDetailsModal = ({ item }: ItemDetailsModalProps) => {
     }
 
     return (
-        <Table
-            highlightOnHover
-            variant="vertical"
-            withRowBorders={false}
-            withTableBorder
-        >
+        <Table highlightOnHover variant="vertical" withRowBorders={false} withTableBorder>
             <Table.Tbody>{body}</Table.Tbody>
         </Table>
     );
diff --git a/src/renderer/features/item-details/components/song-path.tsx b/src/renderer/features/item-details/components/song-path.tsx
index 08bd8eeb..4571f846 100644
--- a/src/renderer/features/item-details/components/song-path.tsx
+++ b/src/renderer/features/item-details/components/song-path.tsx
@@ -22,10 +22,7 @@ export const SongPath = ({ path }: SongPathProps) => {
 
     return (
         <Group>
-            <CopyButton
-                timeout={2000}
-                value={path}
-            >
+            <CopyButton timeout={2000} value={path}>
                 {({ copied, copy }) => (
                     <Tooltip
                         label={t(
@@ -36,10 +33,7 @@ export const SongPath = ({ path }: SongPathProps) => {
                         )}
                         withinPortal
                     >
-                        <ActionIcon
-                            onClick={copy}
-                            variant="transparent"
-                        >
+                        <ActionIcon onClick={copy} variant="transparent">
                             {copied ? <Icon icon="check" /> : <Icon icon="clipboardCopy" />}
                         </ActionIcon>
                     </Tooltip>
diff --git a/src/renderer/features/lyrics/components/lyrics-search-form.tsx b/src/renderer/features/lyrics/components/lyrics-search-form.tsx
index 8cb4db16..55beec9d 100644
--- a/src/renderer/features/lyrics/components/lyrics-search-form.tsx
+++ b/src/renderer/features/lyrics/components/lyrics-search-form.tsx
@@ -38,33 +38,15 @@ const SearchResult = ({ data, onClick }: SearchResultProps) => {
         source === LyricSource.GENIUS ? id.replace(/^((http[s]?|ftp):\/)?\/?([^:/\s]+)/g, '') : id;
 
     return (
-        <button
-            className={styles.searchItem}
-            onClick={onClick}
-        >
-            <Group
-                justify="space-between"
-                wrap="nowrap"
-            >
-                <Stack
-                    gap={0}
-                    maw="65%"
-                >
-                    <Text
-                        fw={600}
-                        size="md"
-                    >
+        <button className={styles.searchItem} onClick={onClick}>
+            <Group justify="space-between" wrap="nowrap">
+                <Stack gap={0} maw="65%">
+                    <Text fw={600} size="md">
                         {name}
                     </Text>
                     <Text isMuted>{artist}</Text>
-                    <Group
-                        gap="sm"
-                        wrap="nowrap"
-                    >
-                        <Text
-                            isMuted
-                            size="sm"
-                        >
+                    <Group gap="sm" wrap="nowrap">
+                        <Text isMuted size="sm">
                             {[source, cleanId].join(' — ')}
                         </Text>
                     </Group>
@@ -167,11 +149,7 @@ export const LyricsSearchForm = ({ artist, name, onSearchOverride }: LyricSearch
 export const openLyricSearchModal = ({ artist, name, onSearchOverride }: LyricSearchFormProps) => {
     openModal({
         children: (
-            <LyricsSearchForm
-                artist={artist}
-                name={name}
-                onSearchOverride={onSearchOverride}
-            />
+            <LyricsSearchForm artist={artist} name={name} onSearchOverride={onSearchOverride} />
         ),
         size: 'lg',
         title: i18n.t('form.lyricSearch.title', { postProcess: 'titleCase' }) as string,
diff --git a/src/renderer/features/lyrics/lyrics.tsx b/src/renderer/features/lyrics/lyrics.tsx
index 9354d6ab..a578e776 100644
--- a/src/renderer/features/lyrics/lyrics.tsx
+++ b/src/renderer/features/lyrics/lyrics.tsx
@@ -151,10 +151,7 @@ export const Lyrics = () => {
         <ErrorBoundary FallbackComponent={ErrorFallback}>
             <div className={styles.lyricsContainer}>
                 {isLoadingLyrics ? (
-                    <Spinner
-                        container
-                        size={25}
-                    />
+                    <Spinner container size={25} />
                 ) : (
                     <AnimatePresence mode="sync">
                         {hasNoLyrics ? (
diff --git a/src/renderer/features/lyrics/unsynchronized-lyrics.tsx b/src/renderer/features/lyrics/unsynchronized-lyrics.tsx
index 63511b69..8ed6e4e4 100644
--- a/src/renderer/features/lyrics/unsynchronized-lyrics.tsx
+++ b/src/renderer/features/lyrics/unsynchronized-lyrics.tsx
@@ -29,10 +29,7 @@ export const UnsynchronizedLyrics = ({
     }, [translatedLyrics]);
 
     return (
-        <div
-            className={styles.container}
-            style={{ gap: `${settings.gapUnsync}px` }}
-        >
+        <div className={styles.container} style={{ gap: `${settings.gapUnsync}px` }}>
             {settings.showProvider && source && (
                 <LyricLine
                     alignment={settings.alignment}
diff --git a/src/renderer/features/now-playing/components/drawer-play-queue.tsx b/src/renderer/features/now-playing/components/drawer-play-queue.tsx
index 03c4cc5e..06f61047 100644
--- a/src/renderer/features/now-playing/components/drawer-play-queue.tsx
+++ b/src/renderer/features/now-playing/components/drawer-play-queue.tsx
@@ -11,30 +11,17 @@ export const DrawerPlayQueue = () => {
     const queueRef = useRef<null | { grid: AgGridReactType<Song> }>(null);
 
     return (
-        <Flex
-            direction="column"
-            h="100%"
-        >
+        <Flex direction="column" h="100%">
             <div
                 style={{
                     backgroundColor: 'var(--theme-colors-background)',
                     borderRadius: '10px',
                 }}
             >
-                <PlayQueueListControls
-                    tableRef={queueRef}
-                    type="sideQueue"
-                />
+                <PlayQueueListControls tableRef={queueRef} type="sideQueue" />
             </div>
-            <Flex
-                bg="var(--theme-colors-background)"
-                h="100%"
-                mb="0.6rem"
-            >
-                <PlayQueue
-                    ref={queueRef}
-                    type="sideQueue"
-                />
+            <Flex bg="var(--theme-colors-background)" h="100%" mb="0.6rem">
+                <PlayQueue ref={queueRef} type="sideQueue" />
             </Flex>
         </Flex>
     );
diff --git a/src/renderer/features/now-playing/components/play-queue-list-controls.tsx b/src/renderer/features/now-playing/components/play-queue-list-controls.tsx
index afb0d550..e85c2008 100644
--- a/src/renderer/features/now-playing/components/play-queue-list-controls.tsx
+++ b/src/renderer/features/now-playing/components/play-queue-list-controls.tsx
@@ -174,10 +174,7 @@ export const PlayQueueListControls = ({ tableRef, type }: PlayQueueListOptionsPr
                 />
             </Group>
             <Group>
-                <Popover
-                    position="top-end"
-                    transitionProps={{ transition: 'fade' }}
-                >
+                <Popover position="top-end" transitionProps={{ transition: 'fade' }}>
                     <Popover.Target>
                         <ActionIcon
                             icon="settings"
diff --git a/src/renderer/features/now-playing/components/sidebar-play-queue.tsx b/src/renderer/features/now-playing/components/sidebar-play-queue.tsx
index b4dcca49..89c165c2 100644
--- a/src/renderer/features/now-playing/components/sidebar-play-queue.tsx
+++ b/src/renderer/features/now-playing/components/sidebar-play-queue.tsx
@@ -18,19 +18,10 @@ export const SidebarPlayQueue = () => {
     const isWeb = windowBarStyle === Platform.WEB;
     return (
         <VirtualGridContainer>
-            <Box
-                display={!isWeb ? 'flex' : undefined}
-                h="65px"
-            >
-                <PlayQueueListControls
-                    tableRef={queueRef}
-                    type="sideQueue"
-                />
+            <Box display={!isWeb ? 'flex' : undefined} h="65px">
+                <PlayQueueListControls tableRef={queueRef} type="sideQueue" />
             </Box>
-            <PlayQueue
-                ref={queueRef}
-                type="sideQueue"
-            />
+            <PlayQueue ref={queueRef} type="sideQueue" />
         </VirtualGridContainer>
     );
 };
diff --git a/src/renderer/features/now-playing/routes/now-playing-route.tsx b/src/renderer/features/now-playing/routes/now-playing-route.tsx
index ad2bb098..f20f16ad 100644
--- a/src/renderer/features/now-playing/routes/now-playing-route.tsx
+++ b/src/renderer/features/now-playing/routes/now-playing-route.tsx
@@ -16,14 +16,8 @@ const NowPlayingRoute = () => {
         <AnimatedPage>
             <VirtualGridContainer>
                 <NowPlayingHeader />
-                <PlayQueueListControls
-                    tableRef={queueRef}
-                    type="nowPlaying"
-                />
-                <PlayQueue
-                    ref={queueRef}
-                    type="nowPlaying"
-                />
+                <PlayQueueListControls tableRef={queueRef} type="nowPlaying" />
+                <PlayQueue ref={queueRef} type="nowPlaying" />
             </VirtualGridContainer>
         </AnimatedPage>
     );
diff --git a/src/renderer/features/player/components/center-controls.tsx b/src/renderer/features/player/components/center-controls.tsx
index 7d75791d..adc5d380 100644
--- a/src/renderer/features/player/components/center-controls.tsx
+++ b/src/renderer/features/player/components/center-controls.tsx
@@ -115,13 +115,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
             <div className={styles.controlsContainer}>
                 <div className={styles.buttonsContainer}>
                     <PlayerButton
-                        icon={
-                            <Icon
-                                fill="default"
-                                icon="mediaStop"
-                                size={buttonSize - 2}
-                            />
-                        }
+                        icon={<Icon fill="default" icon="mediaStop" size={buttonSize - 2} />}
                         onClick={handleStop}
                         tooltip={{
                             label: t('player.stop', { postProcess: 'sentenceCase' }),
@@ -152,13 +146,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                         variant="tertiary"
                     />
                     <PlayerButton
-                        icon={
-                            <Icon
-                                fill="default"
-                                icon="mediaPrevious"
-                                size={buttonSize}
-                            />
-                        }
+                        icon={<Icon fill="default" icon="mediaPrevious" size={buttonSize} />}
                         onClick={handlePrevTrack}
                         tooltip={{
                             label: t('player.previous', { postProcess: 'sentenceCase' }),
@@ -169,11 +157,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                     {skip?.enabled && (
                         <PlayerButton
                             icon={
-                                <Icon
-                                    fill="default"
-                                    icon="mediaStepBackward"
-                                    size={buttonSize}
-                                />
+                                <Icon fill="default" icon="mediaStepBackward" size={buttonSize} />
                             }
                             onClick={() => handleSkipBackward(skip?.skipBackwardSeconds)}
                             tooltip={{
@@ -194,13 +178,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                     />
                     {skip?.enabled && (
                         <PlayerButton
-                            icon={
-                                <Icon
-                                    fill="default"
-                                    icon="mediaStepForward"
-                                    size={buttonSize}
-                                />
-                            }
+                            icon={<Icon fill="default" icon="mediaStepForward" size={buttonSize} />}
                             onClick={() => handleSkipForward(skip?.skipForwardSeconds)}
                             tooltip={{
                                 label: t('player.skip', {
@@ -214,13 +192,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                         />
                     )}
                     <PlayerButton
-                        icon={
-                            <Icon
-                                fill="default"
-                                icon="mediaNext"
-                                size={buttonSize}
-                            />
-                        }
+                        icon={<Icon fill="default" icon="mediaNext" size={buttonSize} />}
                         onClick={handleNextTrack}
                         tooltip={{
                             label: t('player.next', { postProcess: 'sentenceCase' }),
@@ -231,11 +203,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                     <PlayerButton
                         icon={
                             repeat === PlayerRepeat.ONE ? (
-                                <Icon
-                                    fill="primary"
-                                    icon="mediaRepeatOne"
-                                    size={buttonSize}
-                                />
+                                <Icon fill="primary" icon="mediaRepeatOne" size={buttonSize} />
                             ) : (
                                 <Icon
                                     fill={repeat === PlayerRepeat.NONE ? 'default' : 'primary'}
@@ -268,13 +236,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                         variant="tertiary"
                     />
                     <PlayerButton
-                        icon={
-                            <Icon
-                                fill="default"
-                                icon="mediaRandom"
-                                size={buttonSize}
-                            />
-                        }
+                        icon={<Icon fill="default" icon="mediaRandom" size={buttonSize} />}
                         onClick={() =>
                             openShuffleAllModal({
                                 handlePlayQueueAdd,
@@ -291,12 +253,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
             </div>
             <div className={styles.sliderContainer}>
                 <div className={styles.sliderValueWrapper}>
-                    <Text
-                        fw={600}
-                        isMuted
-                        isNoSelect
-                        size="xs"
-                    >
+                    <Text fw={600} isMuted isNoSelect size="xs">
                         {formattedTime}
                     </Text>
                 </div>
@@ -324,12 +281,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                     />
                 </div>
                 <div className={styles.sliderValueWrapper}>
-                    <Text
-                        fw={600}
-                        isMuted
-                        isNoSelect
-                        size="xs"
-                    >
+                    <Text fw={600} isMuted isNoSelect size="xs">
                         {duration}
                     </Text>
                 </div>
diff --git a/src/renderer/features/player/components/full-screen-player-image.tsx b/src/renderer/features/player/components/full-screen-player-image.tsx
index 7d62d7aa..84db03e6 100644
--- a/src/renderer/features/player/components/full-screen-player-image.tsx
+++ b/src/renderer/features/player/components/full-screen-player-image.tsx
@@ -68,11 +68,7 @@ const ImageWithPlaceholder = ({
                     width: '100%',
                 }}
             >
-                <Icon
-                    color="muted"
-                    icon="itemAlbum"
-                    size="25%"
-                />
+                <Icon color="muted" icon="itemAlbum" size="25%" />
             </Center>
         );
     }
@@ -167,14 +163,8 @@ export const FullScreenPlayerImage = () => {
             justify="flex-start"
             p="1rem"
         >
-            <div
-                className={styles.imageContainer}
-                ref={mainImageRef}
-            >
-                <AnimatePresence
-                    initial={false}
-                    mode="sync"
-                >
+            <div className={styles.imageContainer} ref={mainImageRef}>
+                <AnimatePresence initial={false} mode="sync">
                     {imageState.current === 0 && (
                         <ImageWithPlaceholder
                             animate="open"
@@ -206,18 +196,8 @@ export const FullScreenPlayerImage = () => {
                     )}
                 </AnimatePresence>
             </div>
-            <Stack
-                className={styles.metadataContainer}
-                gap="md"
-                maw="100%"
-            >
-                <Text
-                    fw={900}
-                    lh="1.2"
-                    overflow="hidden"
-                    size="4xl"
-                    w="100%"
-                >
+            <Stack className={styles.metadataContainer} gap="md" maw="100%">
+                <Text fw={900} lh="1.2" overflow="hidden" size="4xl" w="100%">
                     {currentSong?.name}
                 </Text>
                 <Text
@@ -257,10 +237,7 @@ export const FullScreenPlayerImage = () => {
                         </Fragment>
                     ))}
                 </Text>
-                <Group
-                    justify="center"
-                    mt="sm"
-                >
+                <Group justify="center" mt="sm">
                     {currentSong?.container && (
                         <Badge variant="transparent">{currentSong?.container}</Badge>
                     )}
diff --git a/src/renderer/features/player/components/full-screen-player-queue.tsx b/src/renderer/features/player/components/full-screen-player-queue.tsx
index 19b6f262..3b458170 100644
--- a/src/renderer/features/player/components/full-screen-player-queue.tsx
+++ b/src/renderer/features/player/components/full-screen-player-queue.tsx
@@ -76,10 +76,7 @@ export const FullScreenPlayerQueue = () => {
                 justify="center"
             >
                 {headerItems.map((item) => (
-                    <div
-                        className={styles.headerItemWrapper}
-                        key={`tab-${item.label}`}
-                    >
+                    <div className={styles.headerItemWrapper} key={`tab-${item.label}`}>
                         <Button
                             flex={1}
                             fw="600"
diff --git a/src/renderer/features/player/components/full-screen-player.tsx b/src/renderer/features/player/components/full-screen-player.tsx
index 3f4b3d27..1092c860 100644
--- a/src/renderer/features/player/components/full-screen-player.tsx
+++ b/src/renderer/features/player/components/full-screen-player.tsx
@@ -238,10 +238,7 @@ const Controls = ({ isPageHovered }: ControlsProps) => {
                             })}
                         </Option.Label>
                         <Option.Control>
-                            <Group
-                                w="100%"
-                                wrap="nowrap"
-                            >
+                            <Group w="100%" wrap="nowrap">
                                 <Slider
                                     defaultValue={lyricConfig.fontSize}
                                     label={(e) =>
@@ -278,10 +275,7 @@ const Controls = ({ isPageHovered }: ControlsProps) => {
                             })}
                         </Option.Label>
                         <Option.Control>
-                            <Group
-                                w="100%"
-                                wrap="nowrap"
-                            >
+                            <Group w="100%" wrap="nowrap">
                                 <Slider
                                     defaultValue={lyricConfig.gap}
                                     label={(e) => `Synchronized: ${e}px`}
diff --git a/src/renderer/features/player/components/full-screen-similar-songs.tsx b/src/renderer/features/player/components/full-screen-similar-songs.tsx
index 9aa31c95..12aea855 100644
--- a/src/renderer/features/player/components/full-screen-similar-songs.tsx
+++ b/src/renderer/features/player/components/full-screen-similar-songs.tsx
@@ -4,10 +4,5 @@ import { useCurrentSong } from '/@/renderer/store';
 export const FullScreenSimilarSongs = () => {
     const currentSong = useCurrentSong();
 
-    return currentSong?.id ? (
-        <SimilarSongsList
-            fullScreen
-            song={currentSong}
-        />
-    ) : null;
+    return currentSong?.id ? <SimilarSongsList fullScreen song={currentSong} /> : null;
 };
diff --git a/src/renderer/features/player/components/left-controls.tsx b/src/renderer/features/player/components/left-controls.tsx
index 86803faa..4019ebe1 100644
--- a/src/renderer/features/player/components/left-controls.tsx
+++ b/src/renderer/features/player/components/left-controls.tsx
@@ -69,10 +69,7 @@ export const LeftControls = () => {
     return (
         <div className={styles.leftControlsContainer}>
             <LayoutGroup>
-                <AnimatePresence
-                    initial={false}
-                    mode="popLayout"
-                >
+                <AnimatePresence initial={false} mode="popLayout">
                     {!hideImage && (
                         <div className={styles.imageWrapper}>
                             <motion.div
@@ -123,19 +120,9 @@ export const LeftControls = () => {
                         </div>
                     )}
                 </AnimatePresence>
-                <motion.div
-                    className={styles.metadataStack}
-                    layout="position"
-                >
-                    <div
-                        className={styles.lineItem}
-                        onClick={stopPropagation}
-                    >
-                        <Group
-                            align="center"
-                            gap="xs"
-                            wrap="nowrap"
-                        >
+                <motion.div className={styles.metadataStack} layout="position">
+                    <div className={styles.lineItem} onClick={stopPropagation}>
+                        <Group align="center" gap="xs" wrap="nowrap">
                             <Text
                                 component={Link}
                                 fw={500}
diff --git a/src/renderer/features/player/components/right-controls.tsx b/src/renderer/features/player/components/right-controls.tsx
index f79062bd..91f0af96 100644
--- a/src/renderer/features/player/components/right-controls.tsx
+++ b/src/renderer/features/player/components/right-controls.tsx
@@ -193,13 +193,7 @@ export const RightControls = () => {
     }, [addToFavoritesMutation, removeFromFavoritesMutation, updateRatingMutation]);
 
     return (
-        <Flex
-            align="flex-end"
-            direction="column"
-            h="100%"
-            px="1rem"
-            py="0.5rem"
-        >
+        <Flex align="flex-end" direction="column" h="100%" px="1rem" py="0.5rem">
             <Group h="calc(100% / 3)">
                 {showRating && (
                     <Rating
@@ -209,18 +203,8 @@ export const RightControls = () => {
                     />
                 )}
             </Group>
-            <Group
-                align="center"
-                gap="xs"
-                wrap="nowrap"
-            >
-                <DropdownMenu
-                    arrowOffset={12}
-                    offset={0}
-                    position="top-end"
-                    width={425}
-                    withArrow
-                >
+            <Group align="center" gap="xs" wrap="nowrap">
+                <DropdownMenu arrowOffset={12} offset={0} position="top-end" width={425} withArrow>
                     <DropdownMenu.Target>
                         <ActionIcon
                             icon="mediaSpeed"
diff --git a/src/renderer/features/player/components/visualizer.tsx b/src/renderer/features/player/components/visualizer.tsx
index 4374e1de..105bdae0 100644
--- a/src/renderer/features/player/components/visualizer.tsx
+++ b/src/renderer/features/player/components/visualizer.tsx
@@ -33,10 +33,5 @@ export const Visualizer = () => {
         return () => {};
     }, [accent, canvasRef, motion, webAudio]);
 
-    return (
-        <div
-            className={styles.container}
-            ref={canvasRef}
-        />
-    );
+    return <div className={styles.container} ref={canvasRef} />;
 };
diff --git a/src/renderer/features/playlists/components/create-playlist-form.tsx b/src/renderer/features/playlists/components/create-playlist-form.tsx
index 046476ca..01bcac38 100644
--- a/src/renderer/features/playlists/components/create-playlist-form.tsx
+++ b/src/renderer/features/playlists/components/create-playlist-form.tsx
@@ -155,10 +155,7 @@ export const CreatePlaylistForm = ({ onCancel }: CreatePlaylistFormProps) => {
                 )}
 
                 <Group justify="flex-end">
-                    <Button
-                        onClick={onCancel}
-                        variant="subtle"
-                    >
+                    <Button onClick={onCancel} variant="subtle">
                         {t('common.cancel', { postProcess: 'titleCase' })}
                     </Button>
                     <Button
diff --git a/src/renderer/features/playlists/components/playlist-detail-song-list-content.tsx b/src/renderer/features/playlists/components/playlist-detail-song-list-content.tsx
index c0e9e186..8caedb55 100644
--- a/src/renderer/features/playlists/components/playlist-detail-song-list-content.tsx
+++ b/src/renderer/features/playlists/components/playlist-detail-song-list-content.tsx
@@ -331,11 +331,7 @@ export const PlaylistDetailSongListContent = ({ songs, tableRef }: PlaylistDetai
                 />
             </VirtualGridAutoSizerContainer>
             {isPaginationEnabled && (
-                <AnimatePresence
-                    initial={false}
-                    mode="wait"
-                    presenceAffectsLayout
-                >
+                <AnimatePresence initial={false} mode="wait" presenceAffectsLayout>
                     {page.display === ListDisplayType.TABLE_PAGINATED && (
                         <TablePagination
                             pageKey={playlistId}
diff --git a/src/renderer/features/playlists/components/playlist-detail-song-list-header-filters.tsx b/src/renderer/features/playlists/components/playlist-detail-song-list-header-filters.tsx
index f9495a5c..8b1c7e0f 100644
--- a/src/renderer/features/playlists/components/playlist-detail-song-list-header-filters.tsx
+++ b/src/renderer/features/playlists/components/playlist-detail-song-list-header-filters.tsx
@@ -469,11 +469,7 @@ export const PlaylistDetailSongListHeaderFilters = ({
 
     return (
         <Flex justify="space-between">
-            <Group
-                gap="sm"
-                ref={cq.ref}
-                w="100%"
-            >
+            <Group gap="sm" ref={cq.ref} w="100%">
                 <DropdownMenu position="bottom-start">
                     <DropdownMenu.Target>
                         <Button
@@ -555,10 +551,7 @@ export const PlaylistDetailSongListHeaderFilters = ({
                         {server?.type === ServerType.NAVIDROME && !isSmartPlaylist && (
                             <>
                                 <DropdownMenu.Divider />
-                                <DropdownMenu.Item
-                                    isDanger
-                                    onClick={handleToggleShowQueryBuilder}
-                                >
+                                <DropdownMenu.Item isDanger onClick={handleToggleShowQueryBuilder}>
                                     {t('action.toggleSmartPlaylistEditor', {
                                         postProcess: 'sentenceCase',
                                     })}
diff --git a/src/renderer/features/playlists/components/playlist-list-content.tsx b/src/renderer/features/playlists/components/playlist-list-content.tsx
index d1af6f1a..75940c26 100644
--- a/src/renderer/features/playlists/components/playlist-list-content.tsx
+++ b/src/renderer/features/playlists/components/playlist-list-content.tsx
@@ -33,15 +33,9 @@ export const PlaylistListContent = ({ gridRef, itemCount, tableRef }: PlaylistLi
     return (
         <Suspense fallback={<Spinner container />}>
             {display === ListDisplayType.CARD || display === ListDisplayType.GRID ? (
-                <PlaylistListGridView
-                    gridRef={gridRef}
-                    itemCount={itemCount}
-                />
+                <PlaylistListGridView gridRef={gridRef} itemCount={itemCount} />
             ) : (
-                <PlaylistListTableView
-                    itemCount={itemCount}
-                    tableRef={tableRef}
-                />
+                <PlaylistListTableView itemCount={itemCount} tableRef={tableRef} />
             )}
             <div />
         </Suspense>
diff --git a/src/renderer/features/playlists/components/playlist-list-header-filters.tsx b/src/renderer/features/playlists/components/playlist-list-header-filters.tsx
index 094415cf..a27a7e8e 100644
--- a/src/renderer/features/playlists/components/playlist-list-header-filters.tsx
+++ b/src/renderer/features/playlists/components/playlist-list-header-filters.tsx
@@ -355,11 +355,7 @@ export const PlaylistListHeaderFilters = ({
 
     return (
         <Flex justify="space-between">
-            <Group
-                gap="sm"
-                ref={cq.ref}
-                w="100%"
-            >
+            <Group gap="sm" ref={cq.ref} w="100%">
                 <DropdownMenu position="bottom-start">
                     <DropdownMenu.Target>
                         <Button variant="subtle">{sortByLabel}</Button>
@@ -378,10 +374,7 @@ export const PlaylistListHeaderFilters = ({
                     </DropdownMenu.Dropdown>
                 </DropdownMenu>
                 <Divider orientation="vertical" />
-                <OrderToggleButton
-                    onToggle={handleToggleSortOrder}
-                    sortOrder={filter.sortOrder}
-                />
+                <OrderToggleButton onToggle={handleToggleSortOrder} sortOrder={filter.sortOrder} />
                 <RefreshButton onClick={handleRefresh} />
                 <DropdownMenu position="bottom-start">
                     <DropdownMenu.Target>
@@ -397,14 +390,8 @@ export const PlaylistListHeaderFilters = ({
                     </DropdownMenu.Dropdown>
                 </DropdownMenu>
             </Group>
-            <Group
-                gap="xs"
-                wrap="nowrap"
-            >
-                <Button
-                    onClick={handleCreatePlaylistModal}
-                    variant="subtle"
-                >
+            <Group gap="xs" wrap="nowrap">
+                <Button onClick={handleCreatePlaylistModal} variant="subtle">
                     {t('action.createPlaylist', { postProcess: 'sentenceCase' })}
                 </Button>
                 <ListConfigMenu
diff --git a/src/renderer/features/playlists/components/playlist-list-header.tsx b/src/renderer/features/playlists/components/playlist-list-header.tsx
index c7d96bac..73ccf598 100644
--- a/src/renderer/features/playlists/components/playlist-list-header.tsx
+++ b/src/renderer/features/playlists/components/playlist-list-header.tsx
@@ -44,16 +44,9 @@ export const PlaylistListHeader = ({ gridRef, itemCount, tableRef }: PlaylistLis
     }, 500);
 
     return (
-        <Stack
-            gap={0}
-            ref={cq.ref}
-        >
+        <Stack gap={0} ref={cq.ref}>
             <PageHeader>
-                <Flex
-                    align="center"
-                    justify="space-between"
-                    w="100%"
-                >
+                <Flex align="center" justify="space-between" w="100%">
                     <LibraryHeaderBar>
                         <LibraryHeaderBar.Title>
                             {t('page.playlistList.title', { postProcess: 'titleCase' })}
@@ -67,18 +60,12 @@ export const PlaylistListHeader = ({ gridRef, itemCount, tableRef }: PlaylistLis
                         </Badge>
                     </LibraryHeaderBar>
                     <Group>
-                        <SearchInput
-                            defaultValue={filter.searchTerm}
-                            onChange={handleSearch}
-                        />
+                        <SearchInput defaultValue={filter.searchTerm} onChange={handleSearch} />
                     </Group>
                 </Flex>
             </PageHeader>
             <FilterBar>
-                <PlaylistListHeaderFilters
-                    gridRef={gridRef}
-                    tableRef={tableRef}
-                />
+                <PlaylistListHeaderFilters gridRef={gridRef} tableRef={tableRef} />
             </FilterBar>
         </Stack>
     );
diff --git a/src/renderer/features/playlists/components/playlist-query-builder.tsx b/src/renderer/features/playlists/components/playlist-query-builder.tsx
index 39927af5..c34ec793 100644
--- a/src/renderer/features/playlists/components/playlist-query-builder.tsx
+++ b/src/renderer/features/playlists/components/playlist-query-builder.tsx
@@ -410,11 +410,7 @@ export const PlaylistQueryBuilder = forwardRef(
         ];
 
         return (
-            <Flex
-                direction="column"
-                h="calc(100% - 2rem)"
-                justify="space-between"
-            >
+            <Flex direction="column" h="calc(100% - 2rem)" justify="space-between">
                 <ScrollArea>
                     <QueryBuilder
                         data={filters}
@@ -442,17 +438,8 @@ export const PlaylistQueryBuilder = forwardRef(
                         uniqueId={filters.uniqueId}
                     />
                 </ScrollArea>
-                <Group
-                    align="flex-end"
-                    justify="space-between"
-                    m="1rem"
-                    wrap="nowrap"
-                >
-                    <Group
-                        gap="sm"
-                        w="100%"
-                        wrap="nowrap"
-                    >
+                <Group align="flex-end" justify="space-between" m="1rem" wrap="nowrap">
+                    <Group gap="sm" w="100%" wrap="nowrap">
                         <Select
                             data={sortOptions}
                             label="Sort"
@@ -485,20 +472,11 @@ export const PlaylistQueryBuilder = forwardRef(
                         />
                     </Group>
                     {onSave && onSaveAs && (
-                        <Group
-                            gap="sm"
-                            wrap="nowrap"
-                        >
-                            <Button
-                                loading={isSaving}
-                                onClick={handleSaveAs}
-                            >
+                        <Group gap="sm" wrap="nowrap">
+                            <Button loading={isSaving} onClick={handleSaveAs}>
                                 {t('common.saveAs', { postProcess: 'titleCase' })}
                             </Button>
-                            <Button
-                                onClick={openPreviewModal}
-                                variant="subtle"
-                            >
+                            <Button onClick={openPreviewModal} variant="subtle">
                                 {t('common.preview', { postProcess: 'titleCase' })}
                             </Button>
                             <DropdownMenu position="bottom-end">
@@ -512,12 +490,7 @@ export const PlaylistQueryBuilder = forwardRef(
                                 <DropdownMenu.Dropdown>
                                     <DropdownMenu.Item
                                         isDanger
-                                        leftSection={
-                                            <Icon
-                                                color="error"
-                                                icon="save"
-                                            />
-                                        }
+                                        leftSection={<Icon color="error" icon="save" />}
                                         onClick={handleSave}
                                     >
                                         {t('common.saveAndReplace', { postProcess: 'titleCase' })}
diff --git a/src/renderer/features/playlists/components/save-as-playlist-form.tsx b/src/renderer/features/playlists/components/save-as-playlist-form.tsx
index 945f6a30..304b1a8f 100644
--- a/src/renderer/features/playlists/components/save-as-playlist-form.tsx
+++ b/src/renderer/features/playlists/components/save-as-playlist-form.tsx
@@ -103,10 +103,7 @@ export const SaveAsPlaylistForm = ({
                     />
                 )}
                 <Group justify="flex-end">
-                    <Button
-                        onClick={onCancel}
-                        variant="subtle"
-                    >
+                    <Button onClick={onCancel} variant="subtle">
                         {t('common.cancel', { postProcess: 'titleCase' })}
                     </Button>
                     <Button
diff --git a/src/renderer/features/playlists/components/update-playlist-form.tsx b/src/renderer/features/playlists/components/update-playlist-form.tsx
index 98723b56..51635c52 100644
--- a/src/renderer/features/playlists/components/update-playlist-form.tsx
+++ b/src/renderer/features/playlists/components/update-playlist-form.tsx
@@ -140,10 +140,7 @@ export const UpdatePlaylistForm = ({ body, onCancel, query, users }: UpdatePlayl
                     </>
                 )}
                 <Group justify="flex-end">
-                    <Button
-                        onClick={onCancel}
-                        variant="subtle"
-                    >
+                    <Button onClick={onCancel} variant="subtle">
                         {t('common.cancel', { postProcess: 'titleCase' })}
                     </Button>
                     <Button
diff --git a/src/renderer/features/playlists/routes/playlist-detail-song-list-route.tsx b/src/renderer/features/playlists/routes/playlist-detail-song-list-route.tsx
index 7d006dda..09a24346 100644
--- a/src/renderer/features/playlists/routes/playlist-detail-song-list-route.tsx
+++ b/src/renderer/features/playlists/routes/playlist-detail-song-list-route.tsx
@@ -175,12 +175,7 @@ const PlaylistDetailSongListRoute = () => {
 
             {(isSmartPlaylist || showQueryBuilder) && (
                 <motion.div>
-                    <Box
-                        h="100%"
-                        mah="35vh"
-                        p="md"
-                        w="100%"
-                    >
+                    <Box h="100%" mah="35vh" p="md" w="100%">
                         <Group pb="md">
                             <ActionIcon
                                 icon={isQueryBuilderExpanded ? 'arrowUpS' : 'arrowDownS'}
diff --git a/src/renderer/features/playlists/routes/playlist-list-route.tsx b/src/renderer/features/playlists/routes/playlist-list-route.tsx
index e7a332d9..fc81f77f 100644
--- a/src/renderer/features/playlists/routes/playlist-list-route.tsx
+++ b/src/renderer/features/playlists/routes/playlist-list-route.tsx
@@ -50,16 +50,8 @@ const PlaylistListRoute = () => {
     return (
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
-                <PlaylistListHeader
-                    gridRef={gridRef}
-                    itemCount={itemCount}
-                    tableRef={tableRef}
-                />
-                <PlaylistListContent
-                    gridRef={gridRef}
-                    itemCount={itemCount}
-                    tableRef={tableRef}
-                />
+                <PlaylistListHeader gridRef={gridRef} itemCount={itemCount} tableRef={tableRef} />
+                <PlaylistListContent gridRef={gridRef} itemCount={itemCount} tableRef={tableRef} />
             </ListContext.Provider>
         </AnimatedPage>
     );
diff --git a/src/renderer/features/search/components/command-palette.tsx b/src/renderer/features/search/components/command-palette.tsx
index ad0da392..ec018985 100644
--- a/src/renderer/features/search/components/command-palette.tsx
+++ b/src/renderer/features/search/components/command-palette.tsx
@@ -95,18 +95,11 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
                 header: { display: 'none' },
             }}
         >
-            <Group
-                gap="sm"
-                mb="1rem"
-            >
+            <Group gap="sm" mb="1rem">
                 {pages.map((page, index) => (
                     <Fragment key={page}>
                         {index > 0 && ' > '}
-                        <Button
-                            disabled
-                            size="compact-md"
-                            variant="default"
-                        >
+                        <Button disabled size="compact-md" variant="default">
                             {page?.toLocaleUpperCase()}
                         </Button>
                     </Fragment>
@@ -267,10 +260,7 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
                     )}
                 </Command.List>
             </Command>
-            <Box
-                mt="0.5rem"
-                p="0.5rem"
-            >
+            <Box mt="0.5rem" p="0.5rem">
                 <Group justify="space-between">
                     <Command.Loading>
                         {isHome && isLoading && query !== '' && <Spinner />}
diff --git a/src/renderer/features/search/components/library-command-item.tsx b/src/renderer/features/search/components/library-command-item.tsx
index 4c44a1b5..3aabd892 100644
--- a/src/renderer/features/search/components/library-command-item.tsx
+++ b/src/renderer/features/search/components/library-command-item.tsx
@@ -56,10 +56,7 @@ export const LibraryCommandItem = ({
             onMouseLeave={() => setIsHovered(false)}
             style={{ height: '40px', width: '100%' }}
         >
-            <div
-                className={styles.itemGrid}
-                style={{ '--item-height': '40px' } as CSSProperties}
-            >
+            <div className={styles.itemGrid} style={{ '--item-height': '40px' } as CSSProperties}>
                 <div className={styles.imageWrapper}>
                     <Image
                         alt="cover"
@@ -71,21 +68,13 @@ export const LibraryCommandItem = ({
                 </div>
                 <div className={styles.metadataWrapper}>
                     <Text overflow="hidden">{title}</Text>
-                    <Text
-                        isMuted
-                        overflow="hidden"
-                    >
+                    <Text isMuted overflow="hidden">
                         {subtitle}
                     </Text>
                 </div>
             </div>
             {isHovered && (
-                <Group
-                    align="center"
-                    gap="sm"
-                    justify="flex-end"
-                    wrap="nowrap"
-                >
+                <Group align="center" gap="sm" justify="flex-end" wrap="nowrap">
                     <ActionIcon
                         disabled={disabled}
                         icon="mediaPlay"
diff --git a/src/renderer/features/search/components/search-header.tsx b/src/renderer/features/search/components/search-header.tsx
index b24f2d01..8f62cbbe 100644
--- a/src/renderer/features/search/components/search-header.tsx
+++ b/src/renderer/features/search/components/search-header.tsx
@@ -49,15 +49,9 @@ export const SearchHeader = ({ navigationId, tableRef }: SearchHeaderProps) => {
     }, 200);
 
     return (
-        <Stack
-            gap={0}
-            ref={cq.ref}
-        >
+        <Stack gap={0} ref={cq.ref}>
             <PageHeader>
-                <Flex
-                    justify="space-between"
-                    w="100%"
-                >
+                <Flex justify="space-between" w="100%">
                     <LibraryHeaderBar>
                         <LibraryHeaderBar.Title>Search</LibraryHeaderBar.Title>
                     </LibraryHeaderBar>
diff --git a/src/renderer/features/search/routes/search-route.tsx b/src/renderer/features/search/routes/search-route.tsx
index 8d620282..96ae5c67 100644
--- a/src/renderer/features/search/routes/search-route.tsx
+++ b/src/renderer/features/search/routes/search-route.tsx
@@ -16,14 +16,8 @@ const SearchRoute = () => {
 
     return (
         <AnimatedPage key={`search-${navigationId}`}>
-            <SearchHeader
-                navigationId={navigationId}
-                tableRef={tableRef}
-            />
-            <SearchContent
-                key={`page-${itemType}`}
-                tableRef={tableRef}
-            />
+            <SearchHeader navigationId={navigationId} tableRef={tableRef} />
+            <SearchContent key={`page-${itemType}`} tableRef={tableRef} />
         </AnimatedPage>
     );
 };
diff --git a/src/renderer/features/servers/components/add-server-form.tsx b/src/renderer/features/servers/components/add-server-form.tsx
index bb4d8916..c9768e0d 100644
--- a/src/renderer/features/servers/components/add-server-form.tsx
+++ b/src/renderer/features/servers/components/add-server-form.tsx
@@ -31,15 +31,8 @@ interface AddServerFormProps {
 
 function ServerIconWithLabel({ icon, label }: { icon: string; label: string }) {
     return (
-        <Stack
-            align="center"
-            justify="center"
-        >
-            <img
-                height="50"
-                src={icon}
-                width="50"
-            />
+        <Stack align="center" justify="center">
+            <img height="50" src={icon} width="50" />
             <Text>{label}</Text>
         </Stack>
     );
@@ -47,30 +40,15 @@ function ServerIconWithLabel({ icon, label }: { icon: string; label: string }) {
 
 const SERVER_TYPES = [
     {
-        label: (
-            <ServerIconWithLabel
-                icon={JellyfinIcon}
-                label="Jellyfin"
-            />
-        ),
+        label: <ServerIconWithLabel icon={JellyfinIcon} label="Jellyfin" />,
         value: ServerType.JELLYFIN,
     },
     {
-        label: (
-            <ServerIconWithLabel
-                icon={NavidromeIcon}
-                label="Navidrome"
-            />
-        ),
+        label: <ServerIconWithLabel icon={NavidromeIcon} label="Navidrome" />,
         value: ServerType.NAVIDROME,
     },
     {
-        label: (
-            <ServerIconWithLabel
-                icon={SubsonicIcon}
-                label="OpenSubsonic"
-            />
-        ),
+        label: <ServerIconWithLabel icon={SubsonicIcon} label="OpenSubsonic" />,
         value: ServerType.SUBSONIC,
     },
 ];
@@ -174,10 +152,7 @@ export const AddServerForm = ({ onCancel }: AddServerFormProps) => {
 
     return (
         <form onSubmit={handleSubmit}>
-            <Stack
-                m={5}
-                ref={focusTrapRef}
-            >
+            <Stack m={5} ref={focusTrapRef}>
                 <SegmentedControl
                     data={SERVER_TYPES}
                     disabled={Boolean(serverLock)}
@@ -238,15 +213,9 @@ export const AddServerForm = ({ onCancel }: AddServerFormProps) => {
                         {...form.getInputProps('legacyAuth', { type: 'checkbox' })}
                     />
                 )}
-                <Group
-                    grow
-                    justify="flex-end"
-                >
+                <Group grow justify="flex-end">
                     {onCancel && (
-                        <Button
-                            onClick={onCancel}
-                            variant="subtle"
-                        >
+                        <Button onClick={onCancel} variant="subtle">
                             {t('common.cancel', { postProcess: 'titleCase' })}
                         </Button>
                     )}
diff --git a/src/renderer/features/servers/components/edit-server-form.tsx b/src/renderer/features/servers/components/edit-server-form.tsx
index bd547fa9..8765b33e 100644
--- a/src/renderer/features/servers/components/edit-server-form.tsx
+++ b/src/renderer/features/servers/components/edit-server-form.tsx
@@ -33,10 +33,7 @@ interface EditServerFormProps {
 const ModifiedFieldIndicator = () => {
     return (
         <Tooltip label={i18n.t('common.modified', { postProcess: 'titleCase' }) as string}>
-            <Icon
-                color="warn"
-                icon="info"
-            />
+            <Icon color="warn" icon="info" />
         </Tooltip>
     );
 };
@@ -193,17 +190,10 @@ export const EditServerForm = ({ isUpdate, onCancel, password, server }: EditSer
                     />
                 )}
                 <Group justify="flex-end">
-                    <Button
-                        onClick={onCancel}
-                        variant="subtle"
-                    >
+                    <Button onClick={onCancel} variant="subtle">
                         {t('common.cancel', { postProcess: 'titleCase' })}
                     </Button>
-                    <Button
-                        loading={isLoading}
-                        type="submit"
-                        variant="filled"
-                    >
+                    <Button loading={isLoading} type="submit" variant="filled">
                         {t('common.save', { postProcess: 'titleCase' })}
                     </Button>
                 </Group>
diff --git a/src/renderer/features/servers/components/server-list-item.tsx b/src/renderer/features/servers/components/server-list-item.tsx
index 134ae61e..112263c1 100644
--- a/src/renderer/features/servers/components/server-list-item.tsx
+++ b/src/renderer/features/servers/components/server-list-item.tsx
@@ -66,11 +66,7 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
                     />
                 ) : (
                     <Stack>
-                        <Table
-                            layout="fixed"
-                            variant="vertical"
-                            withTableBorder
-                        >
+                        <Table layout="fixed" variant="vertical" withTableBorder>
                             <Table.Tbody>
                                 <Table.Tr>
                                     <Table.Th>
diff --git a/src/renderer/features/servers/components/server-list.tsx b/src/renderer/features/servers/components/server-list.tsx
index f88e2b44..0e1423a0 100644
--- a/src/renderer/features/servers/components/server-list.tsx
+++ b/src/renderer/features/servers/components/server-list.tsx
@@ -73,10 +73,7 @@ export const ServerList = () => {
                     {Object.keys(serverListQuery)?.map((serverId) => {
                         const server = serverListQuery[serverId];
                         return (
-                            <Accordion.Item
-                                key={server.id}
-                                value={server.name}
-                            >
+                            <Accordion.Item key={server.id} value={server.name}>
                                 <Accordion.Control>
                                     <Group>
                                         <img
@@ -103,10 +100,7 @@ export const ServerList = () => {
                             </Accordion.Item>
                         );
                     })}
-                    <Group
-                        grow
-                        pt="md"
-                    >
+                    <Group grow pt="md">
                         <Button
                             autoFocus
                             leftSection={<Icon icon="add" />}
diff --git a/src/renderer/features/settings/components/general/context-menu-settings.tsx b/src/renderer/features/settings/components/general/context-menu-settings.tsx
index 30e9f824..7d3768bb 100644
--- a/src/renderer/features/settings/components/general/context-menu-settings.tsx
+++ b/src/renderer/features/settings/components/general/context-menu-settings.tsx
@@ -22,11 +22,7 @@ export const ContextMenuSettings = () => {
         <>
             <SettingsOptions
                 control={
-                    <Button
-                        onClick={() => setOpen(!open)}
-                        size="compact-md"
-                        variant="filled"
-                    >
+                    <Button onClick={() => setOpen(!open)} size="compact-md" variant="filled">
                         {t(open ? 'common.close' : 'common.edit', { postProcess: 'titleCase' })}
                     </Button>
                 }
diff --git a/src/renderer/features/settings/components/general/draggable-item.tsx b/src/renderer/features/settings/components/general/draggable-item.tsx
index 5879ce49..1a13d47c 100644
--- a/src/renderer/features/settings/components/general/draggable-item.tsx
+++ b/src/renderer/features/settings/components/general/draggable-item.tsx
@@ -35,17 +35,8 @@ export const DraggableItem = ({ handleChangeDisabled, item, value }: DraggableIt
     const dragControls = useDragControls();
 
     return (
-        <Reorder.Item
-            as="div"
-            dragControls={dragControls}
-            dragListener={false}
-            value={item}
-        >
-            <Group
-                py="md"
-                style={{ boxShadow: '0 1px 3px rgba(0,0,0,.1)' }}
-                wrap="nowrap"
-            >
+        <Reorder.Item as="div" dragControls={dragControls} dragListener={false} value={item}>
+            <Group py="md" style={{ boxShadow: '0 1px 3px rgba(0,0,0,.1)' }} wrap="nowrap">
                 <Checkbox
                     checked={!item.disabled}
                     onChange={(e) => handleChangeDisabled(item.id, e.target.checked)}
diff --git a/src/renderer/features/settings/components/general/remote-settings.tsx b/src/renderer/features/settings/components/general/remote-settings.tsx
index a982e7c1..828c2719 100644
--- a/src/renderer/features/settings/components/general/remote-settings.tsx
+++ b/src/renderer/features/settings/components/general/remote-settings.tsx
@@ -73,20 +73,12 @@ export const RemoteSettings = () => {
                 />
             ),
             description: (
-                <Text
-                    isMuted
-                    isNoSelect
-                    size="sm"
-                >
+                <Text isMuted isNoSelect size="sm">
                     {t('setting.enableRemote', {
                         context: 'description',
                         postProcess: 'sentenceCase',
                     })}{' '}
-                    <a
-                        href={url}
-                        rel="noreferrer noopener"
-                        target="_blank"
-                    >
+                    <a href={url} rel="noreferrer noopener" target="_blank">
                         {url}
                     </a>
                 </Text>
diff --git a/src/renderer/features/settings/components/hotkeys/hotkey-manager-settings.tsx b/src/renderer/features/settings/components/hotkeys/hotkey-manager-settings.tsx
index 0b3eddb0..1a126569 100644
--- a/src/renderer/features/settings/components/hotkeys/hotkey-manager-settings.tsx
+++ b/src/renderer/features/settings/components/hotkeys/hotkey-manager-settings.tsx
@@ -240,10 +240,7 @@ export const HotkeyManagerSettings = () => {
             />
             <div className={styles.container}>
                 {filteredBindings.map((binding) => (
-                    <Group
-                        key={`hotkey-${binding}`}
-                        wrap="nowrap"
-                    >
+                    <Group key={`hotkey-${binding}`} wrap="nowrap">
                         <TextInput
                             readOnly
                             style={{ userSelect: 'none' }}
diff --git a/src/renderer/features/settings/components/playback/audio-settings.tsx b/src/renderer/features/settings/components/playback/audio-settings.tsx
index b3fdb54c..c17fab7a 100644
--- a/src/renderer/features/settings/components/playback/audio-settings.tsx
+++ b/src/renderer/features/settings/components/playback/audio-settings.tsx
@@ -244,10 +244,5 @@ export const AudioSettings = ({ hasFancyAudio }: { hasFancyAudio: boolean }) =>
         },
     ];
 
-    return (
-        <SettingsSection
-            divider={!hasFancyAudio}
-            options={audioOptions}
-        />
-    );
+    return <SettingsSection divider={!hasFancyAudio} options={audioOptions} />;
 };
diff --git a/src/renderer/features/settings/components/playback/lyric-settings.tsx b/src/renderer/features/settings/components/playback/lyric-settings.tsx
index 972f7d46..30fc8d45 100644
--- a/src/renderer/features/settings/components/playback/lyric-settings.tsx
+++ b/src/renderer/features/settings/components/playback/lyric-settings.tsx
@@ -215,10 +215,5 @@ export const LyricSettings = () => {
         },
     ];
 
-    return (
-        <SettingsSection
-            divider={false}
-            options={lyricOptions}
-        />
-    );
+    return <SettingsSection divider={false} options={lyricOptions} />;
 };
diff --git a/src/renderer/features/settings/components/playback/mpv-settings.tsx b/src/renderer/features/settings/components/playback/mpv-settings.tsx
index 55f518cb..354e07d7 100644
--- a/src/renderer/features/settings/components/playback/mpv-settings.tsx
+++ b/src/renderer/features/settings/components/playback/mpv-settings.tsx
@@ -218,11 +218,7 @@ export const MpvSettings = () => {
             ),
             description: (
                 <Stack gap={0}>
-                    <Text
-                        isMuted
-                        isNoSelect
-                        size="sm"
-                    >
+                    <Text isMuted isNoSelect size="sm">
                         {t('setting.mpvExtraParameters', {
                             context: 'description',
                             postProcess: 'sentenceCase',
diff --git a/src/renderer/features/settings/components/playback/transcode-settings.tsx b/src/renderer/features/settings/components/playback/transcode-settings.tsx
index bc8a8843..080cb54a 100644
--- a/src/renderer/features/settings/components/playback/transcode-settings.tsx
+++ b/src/renderer/features/settings/components/playback/transcode-settings.tsx
@@ -86,10 +86,5 @@ export const TranscodeSettings = () => {
         },
     ];
 
-    return (
-        <SettingsSection
-            divider
-            options={transcodeOptions}
-        />
-    );
+    return <SettingsSection divider options={transcodeOptions} />;
 };
diff --git a/src/renderer/features/settings/components/settings-header.tsx b/src/renderer/features/settings/components/settings-header.tsx
index 4ca8c1d5..ecf24145 100644
--- a/src/renderer/features/settings/components/settings-header.tsx
+++ b/src/renderer/features/settings/components/settings-header.tsx
@@ -44,16 +44,9 @@ export const SettingsHeader = ({ setSearch }: SettingsHeaderProps) => {
         <Flex ref={cq.ref}>
             <PageHeader>
                 <LibraryHeaderBar>
-                    <Flex
-                        align="center"
-                        justify="space-between"
-                        w="100%"
-                    >
+                    <Flex align="center" justify="space-between" w="100%">
                         <Group wrap="nowrap">
-                            <Icon
-                                icon="settings"
-                                size="5xl"
-                            />
+                            <Icon icon="settings" size="5xl" />
                             <LibraryHeaderBar.Title>
                                 {t('common.setting', { count: 2, postProcess: 'titleCase' })}
                             </LibraryHeaderBar.Title>
@@ -65,10 +58,7 @@ export const SettingsHeader = ({ setSearch }: SettingsHeaderProps) => {
                                     setSearch(event.target.value.toLocaleLowerCase())
                                 }
                             />
-                            <Button
-                                onClick={openResetConfirmModal}
-                                variant="default"
-                            >
+                            <Button onClick={openResetConfirmModal} variant="default">
                                 {t('common.resetToDefault', { postProcess: 'sentenceCase' })}
                             </Button>
                         </Group>
diff --git a/src/renderer/features/settings/components/settings-option.tsx b/src/renderer/features/settings/components/settings-option.tsx
index 545b2881..85b7b890 100644
--- a/src/renderer/features/settings/components/settings-option.tsx
+++ b/src/renderer/features/settings/components/settings-option.tsx
@@ -16,11 +16,7 @@ interface SettingsOptionProps {
 export const SettingsOptions = ({ control, description, note, title }: SettingsOptionProps) => {
     return (
         <>
-            <Group
-                justify="space-between"
-                style={{ alignItems: 'center' }}
-                wrap="nowrap"
-            >
+            <Group justify="space-between" style={{ alignItems: 'center' }} wrap="nowrap">
                 <Stack
                     gap="xs"
                     style={{
@@ -30,17 +26,11 @@ export const SettingsOptions = ({ control, description, note, title }: SettingsO
                     }}
                 >
                     <Group>
-                        <Text
-                            isNoSelect
-                            size="md"
-                        >
+                        <Text isNoSelect size="md">
                             {title}
                         </Text>
                         {note && (
-                            <Tooltip
-                                label={note}
-                                openDelay={0}
-                            >
+                            <Tooltip label={note} openDelay={0}>
                                 <Icon icon="info" />
                             </Tooltip>
                         )}
@@ -48,11 +38,7 @@ export const SettingsOptions = ({ control, description, note, title }: SettingsO
                     {React.isValidElement(description) ? (
                         description
                     ) : (
-                        <Text
-                            isMuted
-                            isNoSelect
-                            size="sm"
-                        >
+                        <Text isMuted isNoSelect size="sm">
                             {description}
                         </Text>
                     )}
diff --git a/src/renderer/features/settings/components/settings-section.tsx b/src/renderer/features/settings/components/settings-section.tsx
index 32441a58..0e555976 100644
--- a/src/renderer/features/settings/components/settings-section.tsx
+++ b/src/renderer/features/settings/components/settings-section.tsx
@@ -28,10 +28,7 @@ export const SettingsSection = ({ divider, options }: SettingsSectionProps) => {
     return (
         <>
             {values.map((option) => (
-                <SettingsOptions
-                    key={`option-${option.title}`}
-                    {...option}
-                />
+                <SettingsOptions key={`option-${option.title}`} {...option} />
             ))}
             {divider !== false && values.length > 0 && <Divider />}
         </>
diff --git a/src/renderer/features/settings/components/window/cache-settngs.tsx b/src/renderer/features/settings/components/window/cache-settngs.tsx
index a32138da..23d2e1f2 100644
--- a/src/renderer/features/settings/components/window/cache-settngs.tsx
+++ b/src/renderer/features/settings/components/window/cache-settngs.tsx
@@ -94,10 +94,5 @@ export const CacheSettings = () => {
         },
     ];
 
-    return (
-        <SettingsSection
-            divider={false}
-            options={options}
-        />
-    );
+    return <SettingsSection divider={false} options={options} />;
 };
diff --git a/src/renderer/features/settings/components/window/password-settings.tsx b/src/renderer/features/settings/components/window/password-settings.tsx
index cfe76611..e01b79ad 100644
--- a/src/renderer/features/settings/components/window/password-settings.tsx
+++ b/src/renderer/features/settings/components/window/password-settings.tsx
@@ -52,10 +52,5 @@ export const PasswordSettings = () => {
         },
     ];
 
-    return (
-        <SettingsSection
-            divider={false}
-            options={updateOptions}
-        />
-    );
+    return <SettingsSection divider={false} options={updateOptions} />;
 };
diff --git a/src/renderer/features/settings/components/window/update-settings.tsx b/src/renderer/features/settings/components/window/update-settings.tsx
index f090a570..6a0bf4fc 100644
--- a/src/renderer/features/settings/components/window/update-settings.tsx
+++ b/src/renderer/features/settings/components/window/update-settings.tsx
@@ -44,10 +44,5 @@ export const UpdateSettings = () => {
         },
     ];
 
-    return (
-        <SettingsSection
-            divider={utils?.isLinux()}
-            options={updateOptions}
-        />
-    );
+    return <SettingsSection divider={utils?.isLinux()} options={updateOptions} />;
 };
diff --git a/src/renderer/features/settings/routes/settings-route.tsx b/src/renderer/features/settings/routes/settings-route.tsx
index 3d25f6d7..4255b225 100644
--- a/src/renderer/features/settings/routes/settings-route.tsx
+++ b/src/renderer/features/settings/routes/settings-route.tsx
@@ -12,11 +12,7 @@ const SettingsRoute = () => {
     return (
         <AnimatedPage>
             <SettingSearchContext.Provider value={search}>
-                <Flex
-                    direction="column"
-                    h="100%"
-                    w="100%"
-                >
+                <Flex direction="column" h="100%" w="100%">
                     <SettingsHeader setSearch={setSearch} />
                     <SettingsContent />
                 </Flex>
diff --git a/src/renderer/features/shared/components/animated-page.tsx b/src/renderer/features/shared/components/animated-page.tsx
index dfac2095..54d0e56b 100644
--- a/src/renderer/features/shared/components/animated-page.tsx
+++ b/src/renderer/features/shared/components/animated-page.tsx
@@ -14,11 +14,7 @@ interface AnimatedPageProps {
 export const AnimatedPage = forwardRef(
     ({ children }: AnimatedPageProps, ref: Ref<HTMLDivElement>) => {
         return (
-            <motion.main
-                className={styles.animatedPage}
-                ref={ref}
-                {...animationProps.fadeIn}
-            >
+            <motion.main className={styles.animatedPage} ref={ref} {...animationProps.fadeIn}>
                 {children}
             </motion.main>
         );
diff --git a/src/renderer/features/shared/components/filter-bar.tsx b/src/renderer/features/shared/components/filter-bar.tsx
index d87c0a9d..eeca504c 100644
--- a/src/renderer/features/shared/components/filter-bar.tsx
+++ b/src/renderer/features/shared/components/filter-bar.tsx
@@ -2,10 +2,7 @@ import styles from './filter-bar.module.css';
 
 export const FilterBar = ({ children, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
     return (
-        <div
-            className={styles.filterBar}
-            {...props}
-        >
+        <div className={styles.filterBar} {...props}>
             {children}
         </div>
     );
diff --git a/src/renderer/features/shared/components/library-background-overlay.tsx b/src/renderer/features/shared/components/library-background-overlay.tsx
index 66246720..0c0b3010 100644
--- a/src/renderer/features/shared/components/library-background-overlay.tsx
+++ b/src/renderer/features/shared/components/library-background-overlay.tsx
@@ -5,10 +5,5 @@ interface LibraryBackgroundOverlayProps {
 }
 
 export const LibraryBackgroundOverlay = ({ backgroundColor }: LibraryBackgroundOverlayProps) => {
-    return (
-        <div
-            className={styles.root}
-            style={{ backgroundColor }}
-        />
-    );
+    return <div className={styles.root} style={{ backgroundColor }} />;
 };
diff --git a/src/renderer/features/shared/components/library-header-bar.tsx b/src/renderer/features/shared/components/library-header-bar.tsx
index 11074723..7eded7ad 100644
--- a/src/renderer/features/shared/components/library-header-bar.tsx
+++ b/src/renderer/features/shared/components/library-header-bar.tsx
@@ -22,21 +22,14 @@ interface TitleProps {
 const HeaderPlayButton = ({ className, ...props }: PlayButtonProps) => {
     return (
         <div className={styles.playButtonContainer}>
-            <PlayButton
-                className={className}
-                {...props}
-            />
+            <PlayButton className={className} {...props} />
         </div>
     );
 };
 
 const Title = ({ children }: TitleProps) => {
     return (
-        <TextTitle
-            fw={700}
-            order={1}
-            overflow="hidden"
-        >
+        <TextTitle fw={700} order={1} overflow="hidden">
             {children}
         </TextTitle>
     );
diff --git a/src/renderer/features/shared/components/library-header.tsx b/src/renderer/features/shared/components/library-header.tsx
index 2b53c2ea..5518f733 100644
--- a/src/renderer/features/shared/components/library-header.tsx
+++ b/src/renderer/features/shared/components/library-header.tsx
@@ -84,10 +84,7 @@ export const LibraryHeader = forwardRef(
         }, [imageUrl, isImageError]);
 
         return (
-            <div
-                className={styles.libraryHeader}
-                ref={ref}
-            >
+            <div className={styles.libraryHeader} ref={ref}>
                 <div
                     className={styles.background}
                     style={{ background, filter: `blur(${blur ?? 0}rem)` }}
@@ -130,10 +127,7 @@ export const LibraryHeader = forwardRef(
                             {itemTypeString()}
                         </Text>
                         <h1 className={styles.title}>
-                            <AutoTextSize
-                                maxFontSizePx={80}
-                                mode="box"
-                            >
+                            <AutoTextSize maxFontSizePx={80} mode="box">
                                 {title}
                             </AutoTextSize>
                         </h1>
diff --git a/src/renderer/features/shared/components/list-config-menu.tsx b/src/renderer/features/shared/components/list-config-menu.tsx
index 7e448abc..463dc31a 100644
--- a/src/renderer/features/shared/components/list-config-menu.tsx
+++ b/src/renderer/features/shared/components/list-config-menu.tsx
@@ -16,14 +16,8 @@ import { ListDisplayType } from '/@/shared/types/types';
 const DISPLAY_TYPES = [
     {
         label: (
-            <Stack
-                align="center"
-                p="sm"
-            >
-                <Icon
-                    icon="layoutTable"
-                    size="lg"
-                />
+            <Stack align="center" p="sm">
+                <Icon icon="layoutTable" size="lg" />
                 {i18n.t('table.config.view.table', { postProcess: 'sentenceCase' }) as string}
             </Stack>
         ),
@@ -31,14 +25,8 @@ const DISPLAY_TYPES = [
     },
     {
         label: (
-            <Stack
-                align="center"
-                p="sm"
-            >
-                <Icon
-                    icon="layoutGrid"
-                    size="lg"
-                />
+            <Stack align="center" p="sm">
+                <Icon icon="layoutGrid" size="lg" />
                 {i18n.t('table.config.view.card', { postProcess: 'sentenceCase' }) as string}
             </Stack>
         ),
@@ -47,14 +35,8 @@ const DISPLAY_TYPES = [
     {
         disabled: true,
         label: (
-            <Stack
-                align="center"
-                p="sm"
-            >
-                <Icon
-                    icon="layoutList"
-                    size="lg"
-                />
+            <Stack align="center" p="sm">
+                <Icon icon="layoutList" size="lg" />
                 {i18n.t('table.config.view.list', { postProcess: 'sentenceCase' }) as string}
             </Stack>
         ),
@@ -79,10 +61,7 @@ interface ListConfigMenuProps {
 
 export const ListConfigMenu = (props: ListConfigMenuProps) => {
     return (
-        <Popover
-            position="bottom-end"
-            width={300}
-        >
+        <Popover position="bottom-end" width={300}>
             <Popover.Target>
                 <SettingsButton />
             </Popover.Target>
@@ -161,12 +140,7 @@ const TableConfig = ({
 
     return (
         <>
-            <Table
-                variant="vertical"
-                withColumnBorders
-                withRowBorders
-                withTableBorder
-            >
+            <Table variant="vertical" withColumnBorders withRowBorders withTableBorder>
                 <Table.Tbody>
                     <Table.Tr>
                         <Table.Th>
@@ -199,10 +173,7 @@ const TableConfig = ({
                     </Table.Tr>
                 </Table.Tbody>
             </Table>
-            <ScrollArea
-                allowDragScroll
-                style={{ maxHeight: '200px' }}
-            >
+            <ScrollArea allowDragScroll style={{ maxHeight: '200px' }}>
                 <CheckboxSelect
                     data={tableColumnsData}
                     onChange={onChangeTableColumns}
@@ -227,12 +198,7 @@ const GridConfig = ({ itemSize, onChangeItemGap, onChangeItemSize }: GridConfigP
 
     return (
         <>
-            <Table
-                variant="vertical"
-                withColumnBorders
-                withRowBorders
-                withTableBorder
-            >
+            <Table variant="vertical" withColumnBorders withRowBorders withTableBorder>
                 <Table.Tbody>
                     <Table.Tr>
                         <Table.Th w="50%">
diff --git a/src/renderer/features/shared/components/search-input.tsx b/src/renderer/features/shared/components/search-input.tsx
index c9980d7c..75a1b2ce 100644
--- a/src/renderer/features/shared/components/search-input.tsx
+++ b/src/renderer/features/shared/components/search-input.tsx
@@ -46,11 +46,7 @@ export const SearchInput = ({ onChange, ...props }: SearchInputProps) => {
             {...props}
             rightSection={
                 ref.current?.value ? (
-                    <ActionIcon
-                        icon="x"
-                        onClick={handleClear}
-                        variant="transparent"
-                    />
+                    <ActionIcon icon="x" onClick={handleClear} variant="transparent" />
                 ) : null
             }
         />
diff --git a/src/renderer/features/sharing/components/share-item-context-modal.tsx b/src/renderer/features/sharing/components/share-item-context-modal.tsx
index cc5683a5..532643a8 100644
--- a/src/renderer/features/sharing/components/share-item-context-modal.tsx
+++ b/src/renderer/features/sharing/components/share-item-context-modal.tsx
@@ -128,18 +128,10 @@ export const ShareItemContextModal = ({
 
                 <Group justify="flex-end">
                     <Group>
-                        <Button
-                            onClick={() => closeModal(id)}
-                            size="md"
-                            variant="subtle"
-                        >
+                        <Button onClick={() => closeModal(id)} size="md" variant="subtle">
                             {t('common.cancel', { postProcess: 'titleCase' })}
                         </Button>
-                        <Button
-                            size="md"
-                            type="submit"
-                            variant="filled"
-                        >
+                        <Button size="md" type="submit" variant="filled">
                             {t('common.share', { postProcess: 'titleCase' })}
                         </Button>
                     </Group>
diff --git a/src/renderer/features/sidebar/components/action-bar.tsx b/src/renderer/features/sidebar/components/action-bar.tsx
index d772ed06..8732a85a 100644
--- a/src/renderer/features/sidebar/components/action-bar.tsx
+++ b/src/renderer/features/sidebar/components/action-bar.tsx
@@ -20,16 +20,8 @@ export const ActionBar = () => {
     const { open } = useCommandPalette();
 
     return (
-        <div
-            className={styles.container}
-            ref={cq.ref}
-        >
-            <Grid
-                display="flex"
-                gutter="sm"
-                px="1rem"
-                w="100%"
-            >
+        <div className={styles.container} ref={cq.ref}>
+            <Grid display="flex" gutter="sm" px="1rem" w="100%">
                 <Grid.Col span={6}>
                     <TextInput
                         leftSection={<Icon icon="search" />}
@@ -44,11 +36,7 @@ export const ActionBar = () => {
                     />
                 </Grid.Col>
                 <Grid.Col span={6}>
-                    <Group
-                        gap="sm"
-                        grow
-                        wrap="nowrap"
-                    >
+                    <Group gap="sm" grow wrap="nowrap">
                         <DropdownMenu position="bottom-start">
                             <DropdownMenu.Target>
                                 <Button p="0.5rem">
@@ -59,16 +47,10 @@ export const ActionBar = () => {
                                 <AppMenu />
                             </DropdownMenu.Dropdown>
                         </DropdownMenu>
-                        <Button
-                            onClick={() => navigate(-1)}
-                            p="0.5rem"
-                        >
+                        <Button onClick={() => navigate(-1)} p="0.5rem">
                             <Icon icon="arrowLeftS" />
                         </Button>
-                        <Button
-                            onClick={() => navigate(1)}
-                            p="0.5rem"
-                        >
+                        <Button onClick={() => navigate(1)} p="0.5rem">
                             <Icon icon="arrowRightS" />
                         </Button>
                     </Group>
diff --git a/src/renderer/features/sidebar/components/collapsed-sidebar-button.tsx b/src/renderer/features/sidebar/components/collapsed-sidebar-button.tsx
index 4fbdce41..3d3b1e33 100644
--- a/src/renderer/features/sidebar/components/collapsed-sidebar-button.tsx
+++ b/src/renderer/features/sidebar/components/collapsed-sidebar-button.tsx
@@ -9,12 +9,7 @@ interface CollapsedSidebarButtonProps extends ActionIconProps {}
 export const CollapsedSidebarButton = forwardRef<HTMLButtonElement, CollapsedSidebarButtonProps>(
     ({ children, ...props }: CollapsedSidebarButtonProps, ref) => {
         return (
-            <ActionIcon
-                className={styles.button}
-                ref={ref}
-                variant="subtle"
-                {...props}
-            >
+            <ActionIcon className={styles.button} ref={ref} variant="subtle" {...props}>
                 {children}
             </ActionIcon>
         );
diff --git a/src/renderer/features/sidebar/components/collapsed-sidebar.tsx b/src/renderer/features/sidebar/components/collapsed-sidebar.tsx
index c6139249..6193daba 100644
--- a/src/renderer/features/sidebar/components/collapsed-sidebar.tsx
+++ b/src/renderer/features/sidebar/components/collapsed-sidebar.tsx
@@ -69,21 +69,12 @@ export const CollapsedSidebar = () => {
         >
             <ScrollArea>
                 {sidebarCollapsedNavigation && (
-                    <Group
-                        gap={0}
-                        grow
-                    >
+                    <Group gap={0} grow>
                         <CollapsedSidebarButton onClick={() => navigate(-1)}>
-                            <Icon
-                                icon="arrowLeftS"
-                                size="xl"
-                            />
+                            <Icon icon="arrowLeftS" size="xl" />
                         </CollapsedSidebarButton>
                         <CollapsedSidebarButton onClick={() => navigate(1)}>
-                            <Icon
-                                icon="arrowRightS"
-                                size="xl"
-                            />
+                            <Icon icon="arrowRightS" size="xl" />
                         </CollapsedSidebarButton>
                     </Group>
                 )}
@@ -92,13 +83,7 @@ export const CollapsedSidebar = () => {
                         <CollapsedSidebarItem
                             activeIcon={null}
                             component={Flex}
-                            icon={
-                                <Icon
-                                    fill="muted"
-                                    icon="menu"
-                                    size="3xl"
-                                />
-                            }
+                            icon={<Icon fill="muted" icon="menu" size="3xl" />}
                             label={t('common.menu', { postProcess: 'titleCase' })}
                             style={{
                                 cursor: 'pointer',
@@ -112,20 +97,9 @@ export const CollapsedSidebar = () => {
                 </DropdownMenu>
                 {sidebarItemsWithRoute.map((item) => (
                     <CollapsedSidebarItem
-                        activeIcon={
-                            <SidebarIcon
-                                active
-                                route={item.route}
-                                size="25"
-                            />
-                        }
+                        activeIcon={<SidebarIcon active route={item.route} size="25" />}
                         component={NavLink}
-                        icon={
-                            <SidebarIcon
-                                route={item.route}
-                                size="25"
-                            />
-                        }
+                        icon={<SidebarIcon route={item.route} size="25" />}
                         key={item.id}
                         label={item.label}
                         route={item.route}
diff --git a/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx b/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx
index 7fa78d80..89423078 100644
--- a/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx
+++ b/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx
@@ -53,12 +53,7 @@ const PlaylistRowButton = ({ name, onPlay, to, ...props }: PlaylistRowButtonProp
             >
                 {name}
             </SidebarItem>
-            {isHovered && (
-                <RowControls
-                    id={to}
-                    onPlay={onPlay}
-                />
-            )}
+            {isHovered && <RowControls id={to} onPlay={onPlay} />}
         </div>
     );
 };
@@ -73,11 +68,7 @@ const RowControls = ({
     const { t } = useTranslation();
 
     return (
-        <Group
-            className={styles.controls}
-            gap="xs"
-            wrap="nowrap"
-        >
+        <Group className={styles.controls} gap="xs" wrap="nowrap">
             <ActionIcon
                 icon="mediaPlay"
                 iconProps={{
@@ -205,15 +196,8 @@ export const SidebarPlaylistList = () => {
 
     return (
         <Accordion.Item value="playlists">
-            <Accordion.Control
-                component="div"
-                role="button"
-                style={{ userSelect: 'none' }}
-            >
-                <Group
-                    justify="space-between"
-                    pr="var(--theme-spacing-md)"
-                >
+            <Accordion.Control component="div" role="button" style={{ userSelect: 'none' }}>
+                <Group justify="space-between" pr="var(--theme-spacing-md)">
                     <Text fw={600}>
                         {t('page.sidebar.playlists', {
                             postProcess: 'titleCase',
@@ -323,10 +307,7 @@ export const SidebarSharedPlaylistList = () => {
     return (
         <Accordion.Item value="shared-playlists">
             <Accordion.Control>
-                <Text
-                    fw={600}
-                    variant="secondary"
-                >
+                <Text fw={600} variant="secondary">
                     {t('page.sidebar.shared', {
                         postProcess: 'titleCase',
                     })}
diff --git a/src/renderer/features/sidebar/components/sidebar.tsx b/src/renderer/features/sidebar/components/sidebar.tsx
index 8bc361f1..3a0dea0e 100644
--- a/src/renderer/features/sidebar/components/sidebar.tsx
+++ b/src/renderer/features/sidebar/components/sidebar.tsx
@@ -109,10 +109,7 @@ export const Sidebar = () => {
             })}
             id="left-sidebar"
         >
-            <Group
-                grow
-                id="global-search-container"
-            >
+            <Group grow id="global-search-container">
                 <ActionBar />
             </Group>
             <ScrollArea
@@ -134,10 +131,7 @@ export const Sidebar = () => {
                 >
                     <Accordion.Item value="library">
                         <Accordion.Control>
-                            <Text
-                                fw={600}
-                                variant="secondary"
-                            >
+                            <Text fw={600} variant="secondary">
                                 {t('page.sidebar.myLibrary', {
                                     postProcess: 'titleCase',
                                 })}
@@ -146,10 +140,7 @@ export const Sidebar = () => {
                         <Accordion.Panel>
                             {sidebarItemsWithRoute.map((item) => {
                                 return (
-                                    <SidebarItem
-                                        key={`sidebar-${item.route}`}
-                                        to={item.route}
-                                    >
+                                    <SidebarItem key={`sidebar-${item.route}`} to={item.route}>
                                         <Group gap="sm">
                                             <SidebarIcon
                                                 active={location.pathname === item.route}
@@ -170,10 +161,7 @@ export const Sidebar = () => {
                     )}
                 </Accordion>
             </ScrollArea>
-            <AnimatePresence
-                initial={false}
-                mode="popLayout"
-            >
+            <AnimatePresence initial={false} mode="popLayout">
                 {showImage && (
                     <motion.div
                         animate={{ opacity: 1, y: 0 }}
diff --git a/src/renderer/features/similar-songs/components/similar-songs-list.tsx b/src/renderer/features/similar-songs/components/similar-songs-list.tsx
index fd8663bd..cd36a76d 100644
--- a/src/renderer/features/similar-songs/components/similar-songs-list.tsx
+++ b/src/renderer/features/similar-songs/components/similar-songs-list.tsx
@@ -53,10 +53,7 @@ export const SimilarSongsList = ({ count, fullScreen, song }: SimilarSongsListPr
     };
 
     return songQuery.isLoading ? (
-        <Spinner
-            container
-            size={25}
-        />
+        <Spinner container size={25} />
     ) : (
         <ErrorBoundary FallbackComponent={ErrorFallback}>
             <VirtualGridAutoSizerContainer>
diff --git a/src/renderer/features/songs/components/jellyfin-song-filters.tsx b/src/renderer/features/songs/components/jellyfin-song-filters.tsx
index a516f13a..e1130a67 100644
--- a/src/renderer/features/songs/components/jellyfin-song-filters.tsx
+++ b/src/renderer/features/songs/components/jellyfin-song-filters.tsx
@@ -175,16 +175,9 @@ export const JellyfinSongFilters = ({
     return (
         <Stack p="0.8rem">
             {yesNoFilters.map((filter) => (
-                <Group
-                    justify="space-between"
-                    key={`nd-filter-${filter.label}`}
-                >
+                <Group justify="space-between" key={`nd-filter-${filter.label}`}>
                     <Text>{filter.label}</Text>
-                    <YesNoSelect
-                        onChange={filter.onChange}
-                        size="xs"
-                        value={filter.value}
-                    />
+                    <YesNoSelect onChange={filter.onChange} size="xs" value={filter.value} />
                 </Group>
             ))}
             <Divider my="0.5rem" />
diff --git a/src/renderer/features/songs/components/navidrome-song-filters.tsx b/src/renderer/features/songs/components/navidrome-song-filters.tsx
index ad882f72..824f1a41 100644
--- a/src/renderer/features/songs/components/navidrome-song-filters.tsx
+++ b/src/renderer/features/songs/components/navidrome-song-filters.tsx
@@ -133,16 +133,9 @@ export const NavidromeSongFilters = ({
     return (
         <Stack p="0.8rem">
             {toggleFilters.map((filter) => (
-                <Group
-                    justify="space-between"
-                    key={`nd-filter-${filter.label}`}
-                >
+                <Group justify="space-between" key={`nd-filter-${filter.label}`}>
                     <Text>{filter.label}</Text>
-                    <YesNoSelect
-                        onChange={filter.onChange}
-                        size="xs"
-                        value={filter.value}
-                    />
+                    <YesNoSelect onChange={filter.onChange} size="xs" value={filter.value} />
                 </Group>
             ))}
             <Divider my="0.5rem" />
@@ -170,10 +163,7 @@ export const NavidromeSongFilters = ({
             {tagsQuery.data?.enumTags?.length &&
                 tagsQuery.data.enumTags.length > 0 &&
                 tagsQuery.data.enumTags.map((tag) => (
-                    <Group
-                        grow
-                        key={tag.name}
-                    >
+                    <Group grow key={tag.name}>
                         <SelectWithInvalidData
                             clearable
                             data={tag.options}
diff --git a/src/renderer/features/songs/components/song-list-content.tsx b/src/renderer/features/songs/components/song-list-content.tsx
index db41b1a8..3cf18383 100644
--- a/src/renderer/features/songs/components/song-list-content.tsx
+++ b/src/renderer/features/songs/components/song-list-content.tsx
@@ -35,15 +35,9 @@ export const SongListContent = ({ gridRef, itemCount, tableRef }: SongListConten
     return (
         <Suspense fallback={<Spinner container />}>
             {isGrid ? (
-                <SongListGridView
-                    gridRef={gridRef}
-                    itemCount={itemCount}
-                />
+                <SongListGridView gridRef={gridRef} itemCount={itemCount} />
             ) : (
-                <SongListTableView
-                    itemCount={itemCount}
-                    tableRef={tableRef}
-                />
+                <SongListTableView itemCount={itemCount} tableRef={tableRef} />
             )}
         </Suspense>
     );
diff --git a/src/renderer/features/songs/components/song-list-header-filters.tsx b/src/renderer/features/songs/components/song-list-header-filters.tsx
index 4afe9281..d019fa01 100644
--- a/src/renderer/features/songs/components/song-list-header-filters.tsx
+++ b/src/renderer/features/songs/components/song-list-header-filters.tsx
@@ -484,11 +484,7 @@ export const SongListHeaderFilters = ({
 
     return (
         <Flex justify="space-between">
-            <Group
-                gap="sm"
-                ref={cq.ref}
-                w="100%"
-            >
+            <Group gap="sm" ref={cq.ref} w="100%">
                 <DropdownMenu position="bottom-start">
                     <DropdownMenu.Target>
                         <Button variant="subtle">{sortByLabel}</Button>
@@ -534,10 +530,7 @@ export const SongListHeaderFilters = ({
                         </DropdownMenu>
                     </>
                 )}
-                <FilterButton
-                    isActive={!!isFilterApplied}
-                    onClick={handleOpenFiltersModal}
-                />
+                <FilterButton isActive={!!isFilterApplied} onClick={handleOpenFiltersModal} />
                 <RefreshButton onClick={handleRefresh} />
                 <DropdownMenu position="bottom-start">
                     <DropdownMenu.Target>
@@ -578,10 +571,7 @@ export const SongListHeaderFilters = ({
                     </DropdownMenu.Dropdown>
                 </DropdownMenu>
             </Group>
-            <Group
-                gap="sm"
-                wrap="nowrap"
-            >
+            <Group gap="sm" wrap="nowrap">
                 <ListConfigMenu
                     autoFitColumns={table.autoFit}
                     displayType={display}
diff --git a/src/renderer/features/songs/components/song-list-header.tsx b/src/renderer/features/songs/components/song-list-header.tsx
index f2abc778..c05c343b 100644
--- a/src/renderer/features/songs/components/song-list-header.tsx
+++ b/src/renderer/features/songs/components/song-list-header.tsx
@@ -70,15 +70,9 @@ export const SongListHeader = ({
     const playButtonBehavior = usePlayButtonBehavior();
 
     return (
-        <Stack
-            gap={0}
-            ref={cq.ref}
-        >
+        <Stack gap={0} ref={cq.ref}>
             <PageHeader>
-                <Flex
-                    justify="space-between"
-                    w="100%"
-                >
+                <Flex justify="space-between" w="100%">
                     <LibraryHeaderBar>
                         <LibraryHeaderBar.PlayButton
                             onClick={() => handlePlay?.({ playType: playButtonBehavior })}
@@ -93,10 +87,7 @@ export const SongListHeader = ({
                         </LibraryHeaderBar.Badge>
                     </LibraryHeaderBar>
                     <Group>
-                        <SearchInput
-                            defaultValue={filter.searchTerm}
-                            onChange={handleSearch}
-                        />
+                        <SearchInput defaultValue={filter.searchTerm} onChange={handleSearch} />
                     </Group>
                 </Flex>
             </PageHeader>
diff --git a/src/renderer/features/songs/components/subsonic-song-filter.tsx b/src/renderer/features/songs/components/subsonic-song-filter.tsx
index 1b508d4c..3c15aec3 100644
--- a/src/renderer/features/songs/components/subsonic-song-filter.tsx
+++ b/src/renderer/features/songs/components/subsonic-song-filter.tsx
@@ -84,10 +84,7 @@ export const SubsonicSongFilters = ({
     return (
         <Stack p="0.8rem">
             {toggleFilters.map((filter) => (
-                <Group
-                    justify="space-between"
-                    key={`ss-filter-${filter.label}`}
-                >
+                <Group justify="space-between" key={`ss-filter-${filter.label}`}>
                     <Text>{filter.label}</Text>
                     <Switch
                         checked={filter?.value || false}
diff --git a/src/renderer/features/songs/routes/song-list-route.tsx b/src/renderer/features/songs/routes/song-list-route.tsx
index d24a4cf1..c64d0153 100644
--- a/src/renderer/features/songs/routes/song-list-route.tsx
+++ b/src/renderer/features/songs/routes/song-list-route.tsx
@@ -132,11 +132,7 @@ const TrackListRoute = () => {
                     tableRef={tableRef}
                     title={title}
                 />
-                <SongListContent
-                    gridRef={gridRef}
-                    itemCount={itemCount}
-                    tableRef={tableRef}
-                />
+                <SongListContent gridRef={gridRef} itemCount={itemCount} tableRef={tableRef} />
             </ListContext.Provider>
         </AnimatedPage>
     );
diff --git a/src/renderer/features/titlebar/components/app-menu.tsx b/src/renderer/features/titlebar/components/app-menu.tsx
index ec2b41fc..1d0733ae 100644
--- a/src/renderer/features/titlebar/components/app-menu.tsx
+++ b/src/renderer/features/titlebar/components/app-menu.tsx
@@ -144,10 +144,7 @@ export const AppMenu = () => {
                         key={`server-${server.id}`}
                         leftSection={
                             isSessionExpired ? (
-                                <Icon
-                                    fill="error"
-                                    icon="lock"
-                                />
+                                <Icon fill="error" icon="lock" />
                             ) : (
                                 <Icon
                                     color={server.id === currentServer?.id ? 'primary' : undefined}
@@ -186,10 +183,7 @@ export const AppMenu = () => {
                     >
                         {t('page.appMenu.openBrowserDevtools', { postProcess: 'sentenceCase' })}
                     </DropdownMenu.Item>
-                    <DropdownMenu.Item
-                        leftSection={<Icon icon="x" />}
-                        onClick={handleQuit}
-                    >
+                    <DropdownMenu.Item leftSection={<Icon icon="x" />} onClick={handleQuit}>
                         {t('page.appMenu.quit', { postProcess: 'sentenceCase' })}
                     </DropdownMenu.Item>
                 </>
diff --git a/src/renderer/is-updated-dialog.tsx b/src/renderer/is-updated-dialog.tsx
index 85f4136b..02b10266 100644
--- a/src/renderer/is-updated-dialog.tsx
+++ b/src/renderer/is-updated-dialog.tsx
@@ -34,10 +34,7 @@ export function IsUpdatedDialog() {
         >
             <Stack>
                 <Text>{t('common.newVersion', { postProcess: 'sentenceCase', version })}</Text>
-                <Group
-                    justify="flex-end"
-                    wrap="nowrap"
-                >
+                <Group justify="flex-end" wrap="nowrap">
                     <Button
                         component="a"
                         href={`https://github.com/jeffvli/feishin/releases/tag/v${version}`}
@@ -48,10 +45,7 @@ export function IsUpdatedDialog() {
                     >
                         {t('common.viewReleaseNotes', { postProcess: 'sentenceCase' })}
                     </Button>
-                    <Button
-                        onClick={handleDismiss}
-                        variant="default"
-                    >
+                    <Button onClick={handleDismiss} variant="default">
                         {t('common.dismiss', { postProcess: 'titleCase' })}
                     </Button>
                 </Group>
diff --git a/src/renderer/layouts/default-layout/left-sidebar.tsx b/src/renderer/layouts/default-layout/left-sidebar.tsx
index 49d53049..6a406a2b 100644
--- a/src/renderer/layouts/default-layout/left-sidebar.tsx
+++ b/src/renderer/layouts/default-layout/left-sidebar.tsx
@@ -17,10 +17,7 @@ export const LeftSidebar = ({ isResizing, startResizing }: LeftSidebarProps) =>
     const { collapsed } = useSidebarStore();
 
     return (
-        <aside
-            className={styles.container}
-            id="sidebar"
-        >
+        <aside className={styles.container} id="sidebar">
             <ResizeHandle
                 isResizing={isResizing}
                 onMouseDown={(e) => {
diff --git a/src/renderer/layouts/default-layout/main-content.tsx b/src/renderer/layouts/default-layout/main-content.tsx
index d1d0abd9..b07fb1a4 100644
--- a/src/renderer/layouts/default-layout/main-content.tsx
+++ b/src/renderer/layouts/default-layout/main-content.tsx
@@ -109,10 +109,7 @@ export const MainContent = ({ shell }: { shell?: boolean }) => {
                         {showQueueDrawerButton && <SideDrawerQueue />}
                     </Suspense>
                     <FullScreenOverlay />
-                    <LeftSidebar
-                        isResizing={isResizing}
-                        startResizing={startResizing}
-                    />
+                    <LeftSidebar isResizing={isResizing} startResizing={startResizing} />
                     <RightSidebar
                         isResizing={isResizingRight}
                         ref={rightSidebarRef}
diff --git a/src/renderer/layouts/default-layout/right-sidebar.tsx b/src/renderer/layouts/default-layout/right-sidebar.tsx
index 5674b577..43d31a85 100644
--- a/src/renderer/layouts/default-layout/right-sidebar.tsx
+++ b/src/renderer/layouts/default-layout/right-sidebar.tsx
@@ -83,12 +83,7 @@ export const RightSidebar = forwardRef(
         const showSideQueue = rightExpanded && location.pathname !== AppRoute.NOW_PLAYING;
 
         return (
-            <AnimatePresence
-                initial={false}
-                key="queue-sidebar"
-                mode="sync"
-                presenceAffectsLayout
-            >
+            <AnimatePresence initial={false} key="queue-sidebar" mode="sync" presenceAffectsLayout>
                 {showSideQueue && (
                     <>
                         {sideQueueType === 'sideQueue' ? (
diff --git a/src/renderer/layouts/default-layout/side-drawer-queue.tsx b/src/renderer/layouts/default-layout/side-drawer-queue.tsx
index a0e27d28..ef791a10 100644
--- a/src/renderer/layouts/default-layout/side-drawer-queue.tsx
+++ b/src/renderer/layouts/default-layout/side-drawer-queue.tsx
@@ -81,10 +81,7 @@ export const SideDrawerQueue = () => {
         !rightExpanded && !drawer && location.pathname !== AppRoute.NOW_PLAYING;
 
     return (
-        <AnimatePresence
-            initial={false}
-            mode="wait"
-        >
+        <AnimatePresence initial={false} mode="wait">
             {isQueueDrawerButtonVisible && (
                 <motion.div
                     animate="visible"
@@ -97,10 +94,7 @@ export const SideDrawerQueue = () => {
                     variants={queueDrawerButtonVariants}
                     whileHover={{ opacity: 1, scale: 2, transition: { duration: 0.5 } }}
                 >
-                    <Icon
-                        icon="arrowLeftToLine"
-                        size="lg"
-                    />
+                    <Icon icon="arrowLeftToLine" size="lg" />
                 </motion.div>
             )}
 
diff --git a/src/renderer/layouts/window-bar.tsx b/src/renderer/layouts/window-bar.tsx
index 4fa5ac74..3164405a 100644
--- a/src/renderer/layouts/window-bar.tsx
+++ b/src/renderer/layouts/window-bar.tsx
@@ -40,27 +40,14 @@ const WindowsControls = ({ controls, title }: WindowBarControlsProps) => {
     return (
         <div className={styles.windowsContainer}>
             <div className={styles.playerStatusContainer}>
-                <img
-                    alt=""
-                    height={18}
-                    src={appIcon}
-                    width={18}
-                />
+                <img alt="" height={18} src={appIcon} width={18} />
                 <Text>{title}</Text>
             </div>
             <div className={styles.windowsButtonGroup}>
-                <div
-                    className={styles.windowsButton}
-                    onClick={handleMinimize}
-                    role="button"
-                >
+                <div className={styles.windowsButton} onClick={handleMinimize} role="button">
                     <RiSubtractLine size={19} />
                 </div>
-                <div
-                    className={styles.windowsButton}
-                    onClick={handleMaximize}
-                    role="button"
-                >
+                <div className={styles.windowsButton} onClick={handleMaximize} role="button">
                     <RiCheckboxBlankLine size={13} />
                 </div>
                 <div
diff --git a/src/renderer/router/app-outlet.tsx b/src/renderer/router/app-outlet.tsx
index be1e31a9..6418db92 100644
--- a/src/renderer/router/app-outlet.tsx
+++ b/src/renderer/router/app-outlet.tsx
@@ -45,22 +45,14 @@ export const AppOutlet = () => {
 
     if (authState === AuthState.LOADING) {
         return (
-            <Center
-                h="100vh"
-                w="100%"
-            >
+            <Center h="100vh" w="100%">
                 <Spinner container />
             </Center>
         );
     }
 
     if (isActionsRequired || authState === AuthState.INVALID) {
-        return (
-            <Navigate
-                replace
-                to={AppRoute.ACTION_REQUIRED}
-            />
-        );
+        return <Navigate replace to={AppRoute.ACTION_REQUIRED} />;
     }
 
     return <Outlet />;
diff --git a/src/renderer/router/app-router.tsx b/src/renderer/router/app-router.tsx
index bfd70abe..94d559e6 100644
--- a/src/renderer/router/app-router.tsx
+++ b/src/renderer/router/app-router.tsx
@@ -79,10 +79,7 @@ export const AppRouter = () => {
             >
                 <Routes>
                     <Route element={<TitlebarOutlet />}>
-                        <Route
-                            element={<AppOutlet />}
-                            errorElement={<RouteErrorBoundary />}
-                        >
+                        <Route element={<AppOutlet />} errorElement={<RouteErrorBoundary />}>
                             <Route element={<DefaultLayout />}>
                                 <Route
                                     element={<HomeRoute />}
@@ -140,10 +137,7 @@ export const AppRouter = () => {
                                     path={AppRoute.LIBRARY_ARTISTS}
                                 />
                                 <Route path={AppRoute.LIBRARY_ARTISTS_DETAIL}>
-                                    <Route
-                                        element={<AlbumArtistDetailRoute />}
-                                        index
-                                    />
+                                    <Route element={<AlbumArtistDetailRoute />} index />
                                     <Route
                                         element={<AlbumListRoute />}
                                         path={AppRoute.LIBRARY_ARTISTS_DETAIL_DISCOGRAPHY}
@@ -181,15 +175,9 @@ export const AppRouter = () => {
                                     errorElement={<RouteErrorBoundary />}
                                     path={AppRoute.LIBRARY_ALBUM_ARTISTS}
                                 >
-                                    <Route
-                                        element={<AlbumArtistListRoute />}
-                                        index
-                                    />
+                                    <Route element={<AlbumArtistListRoute />} index />
                                     <Route path={AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL}>
-                                        <Route
-                                            element={<AlbumArtistDetailRoute />}
-                                            index
-                                        />
+                                        <Route element={<AlbumArtistDetailRoute />} index />
                                         <Route
                                             element={<AlbumListRoute />}
                                             path={AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_DISCOGRAPHY}
@@ -204,10 +192,7 @@ export const AppRouter = () => {
                                         />
                                     </Route>
                                 </Route>
-                                <Route
-                                    element={<InvalidRoute />}
-                                    path="*"
-                                />
+                                <Route element={<InvalidRoute />} path="*" />
                             </Route>
                         </Route>
                     </Route>
diff --git a/src/renderer/utils/format.tsx b/src/renderer/utils/format.tsx
index 940e4d96..335556d1 100644
--- a/src/renderer/utils/format.tsx
+++ b/src/renderer/utils/format.tsx
@@ -53,12 +53,7 @@ export const formatDurationString = (duration: number) => {
 };
 
 export const formatRating = (item: Album | AlbumArtist | Song) =>
-    item.userRating !== null ? (
-        <Rating
-            readOnly
-            value={item.userRating}
-        />
-    ) : null;
+    item.userRating !== null ? <Rating readOnly value={item.userRating} /> : null;
 
 const SIZES = ['B', 'KiB', 'MiB', 'GiB', 'TiB'];
 
diff --git a/src/renderer/utils/linkify.tsx b/src/renderer/utils/linkify.tsx
index 2469f48e..aed85628 100644
--- a/src/renderer/utils/linkify.tsx
+++ b/src/renderer/utils/linkify.tsx
@@ -20,12 +20,7 @@ export const replaceURLWithHTMLLinks = (text: string) => {
         const link = match[0];
         const prefix = link.startsWith('http') ? '' : 'https://';
         elements.push(
-            <a
-                href={prefix + link}
-                key={lastIndex}
-                rel="noopener noreferrer"
-                target="_blank"
-            >
+            <a href={prefix + link} key={lastIndex} rel="noopener noreferrer" target="_blank">
                 {link}
             </a>,
         );
diff --git a/src/shared/components/accordion/accordion.tsx b/src/shared/components/accordion/accordion.tsx
index 2fb6379a..0c6fe90e 100644
--- a/src/shared/components/accordion/accordion.tsx
+++ b/src/shared/components/accordion/accordion.tsx
@@ -17,12 +17,7 @@ export interface AccordionProps
 export const Accordion = ({ children, classNames, ...props }: AccordionProps) => {
     return (
         <MantineAccordion
-            chevron={
-                <Icon
-                    icon="arrowUpS"
-                    size="lg"
-                />
-            }
+            chevron={<Icon icon="arrowUpS" size="lg" />}
             classNames={{
                 chevron: styles.chevron,
                 control: styles.control,
diff --git a/src/shared/components/action-icon/action-icon.tsx b/src/shared/components/action-icon/action-icon.tsx
index b25877d6..844c3a48 100644
--- a/src/shared/components/action-icon/action-icon.tsx
+++ b/src/shared/components/action-icon/action-icon.tsx
@@ -45,19 +45,9 @@ const _ActionIcon = forwardRef<HTMLButtonElement, ActionIconProps>(
 
         if (tooltip && icon) {
             return (
-                <Tooltip
-                    withinPortal
-                    {...tooltip}
-                >
-                    <MantineActionIcon
-                        ref={ref}
-                        {...actionIconProps}
-                    >
-                        <Icon
-                            icon={icon}
-                            size={actionIconProps.size}
-                            {...iconProps}
-                        />
+                <Tooltip withinPortal {...tooltip}>
+                    <MantineActionIcon ref={ref} {...actionIconProps}>
+                        <Icon icon={icon} size={actionIconProps.size} {...iconProps} />
                     </MantineActionIcon>
                 </Tooltip>
             );
@@ -65,29 +55,16 @@ const _ActionIcon = forwardRef<HTMLButtonElement, ActionIconProps>(
 
         if (icon) {
             return (
-                <MantineActionIcon
-                    ref={ref}
-                    {...actionIconProps}
-                >
-                    <Icon
-                        icon={icon}
-                        size={actionIconProps.size}
-                        {...iconProps}
-                    />
+                <MantineActionIcon ref={ref} {...actionIconProps}>
+                    <Icon icon={icon} size={actionIconProps.size} {...iconProps} />
                 </MantineActionIcon>
             );
         }
 
         if (tooltip) {
             return (
-                <Tooltip
-                    withinPortal
-                    {...tooltip}
-                >
-                    <MantineActionIcon
-                        ref={ref}
-                        {...actionIconProps}
-                    >
+                <Tooltip withinPortal {...tooltip}>
+                    <MantineActionIcon ref={ref} {...actionIconProps}>
                         {children}
                     </MantineActionIcon>
                 </Tooltip>
@@ -95,10 +72,7 @@ const _ActionIcon = forwardRef<HTMLButtonElement, ActionIconProps>(
         }
 
         return (
-            <MantineActionIcon
-                ref={ref}
-                {...actionIconProps}
-            >
+            <MantineActionIcon ref={ref} {...actionIconProps}>
                 {children}
             </MantineActionIcon>
         );
diff --git a/src/shared/components/button/button.tsx b/src/shared/components/button/button.tsx
index de864128..d729b70e 100644
--- a/src/shared/components/button/button.tsx
+++ b/src/shared/components/button/button.tsx
@@ -44,10 +44,7 @@ export const _Button = forwardRef<HTMLButtonElement, ButtonProps>(
     ) => {
         if (tooltip) {
             return (
-                <Tooltip
-                    withinPortal
-                    {...tooltip}
-                >
+                <Tooltip withinPortal {...tooltip}>
                     <MantineButton
                         autoContrast
                         classNames={{
@@ -145,10 +142,7 @@ export const TimeoutButton = ({ timeoutProps, ...props }: TimeoutButtonProps) =>
     }, [clear, isRunning, start]);
 
     return (
-        <Button
-            onClick={startTimeout}
-            {...props}
-        >
+        <Button onClick={startTimeout} {...props}>
             {isRunning ? 'Cancel' : props.children}
         </Button>
     );
diff --git a/src/shared/components/dropdown-menu/dropdown-menu.tsx b/src/shared/components/dropdown-menu/dropdown-menu.tsx
index e0a89246..1d674bd9 100644
--- a/src/shared/components/dropdown-menu/dropdown-menu.tsx
+++ b/src/shared/components/dropdown-menu/dropdown-menu.tsx
@@ -44,10 +44,7 @@ export const DropdownMenu = ({ children, ...props }: MenuProps) => {
 
 const MenuLabel = ({ children, ...props }: MenuLabelProps) => {
     return (
-        <MantineMenu.Label
-            className={styles['menu-label']}
-            {...props}
-        >
+        <MantineMenu.Label className={styles['menu-label']} {...props}>
             {children}
         </MantineMenu.Label>
     );
@@ -75,10 +72,7 @@ const pMenuItem = ({ children, isDanger, isSelected, ...props }: MenuItemProps)
 
 const MenuDropdown = ({ children, ...props }: MenuDropdownProps) => {
     return (
-        <MantineMenu.Dropdown
-            className={styles['menu-dropdown']}
-            {...props}
-        >
+        <MantineMenu.Dropdown className={styles['menu-dropdown']} {...props}>
             {children}
         </MantineMenu.Dropdown>
     );
@@ -87,12 +81,7 @@ const MenuDropdown = ({ children, ...props }: MenuDropdownProps) => {
 const MenuItem = createPolymorphicComponent<'button', MenuItemProps>(pMenuItem);
 
 const MenuDivider = ({ ...props }: MenuDividerProps) => {
-    return (
-        <MantineMenu.Divider
-            className={styles['menu-divider']}
-            {...props}
-        />
-    );
+    return <MantineMenu.Divider className={styles['menu-divider']} {...props} />;
 };
 
 DropdownMenu.Label = MenuLabel;
diff --git a/src/shared/components/grid/grid.tsx b/src/shared/components/grid/grid.tsx
index d6c1bdd3..0e63b6f1 100644
--- a/src/shared/components/grid/grid.tsx
+++ b/src/shared/components/grid/grid.tsx
@@ -3,13 +3,7 @@ import { Grid as MantineGrid, GridProps as MantineGridProps } from '@mantine/cor
 export interface GridProps extends MantineGridProps {}
 
 export const Grid = ({ classNames, style, ...props }: GridProps) => {
-    return (
-        <MantineGrid
-            classNames={{ ...classNames }}
-            style={{ ...style }}
-            {...props}
-        />
-    );
+    return <MantineGrid classNames={{ ...classNames }} style={{ ...style }} {...props} />;
 };
 
 Grid.Col = MantineGrid.Col;
diff --git a/src/shared/components/image/image.tsx b/src/shared/components/image/image.tsx
index 8b704dc7..7cff6580 100644
--- a/src/shared/components/image/image.tsx
+++ b/src/shared/components/image/image.tsx
@@ -80,10 +80,7 @@ export function Image({
 function ImageContainer({ children, className, enableAnimation, ...props }: ImageContainerProps) {
     if (!enableAnimation) {
         return (
-            <div
-                className={clsx(styles.imageContainer, className)}
-                {...props}
-            >
+            <div className={clsx(styles.imageContainer, className)} {...props}>
                 {children}
             </div>
         );
@@ -103,10 +100,7 @@ function ImageContainer({ children, className, enableAnimation, ...props }: Imag
 function ImageLoader({ className }: ImageLoaderProps) {
     return (
         <div className={clsx(styles.loader, className)}>
-            <Skeleton
-                className={clsx(styles.skeleton, className)}
-                enableAnimation={true}
-            />
+            <Skeleton className={clsx(styles.skeleton, className)} enableAnimation={true} />
         </div>
     );
 }
@@ -114,10 +108,7 @@ function ImageLoader({ className }: ImageLoaderProps) {
 function ImageUnloader({ className }: ImageUnloaderProps) {
     return (
         <div className={clsx(styles.unloader, className)}>
-            <Icon
-                icon="emptyImage"
-                size="xl"
-            />
+            <Icon icon="emptyImage" size="xl" />
         </div>
     );
 }
diff --git a/src/shared/components/modal/modal.tsx b/src/shared/components/modal/modal.tsx
index 60da272a..135ae049 100644
--- a/src/shared/components/modal/modal.tsx
+++ b/src/shared/components/modal/modal.tsx
@@ -93,19 +93,10 @@ export const ConfirmModal = ({
         <Stack>
             <Flex>{children}</Flex>
             <Group justify="flex-end">
-                <Button
-                    data-focus
-                    onClick={handleCancel}
-                    variant="default"
-                >
+                <Button data-focus onClick={handleCancel} variant="default">
                     {labels?.cancel ? labels.cancel : 'Cancel'}
                 </Button>
-                <Button
-                    disabled={disabled}
-                    loading={loading}
-                    onClick={onConfirm}
-                    variant="filled"
-                >
+                <Button disabled={disabled} loading={loading} onClick={onConfirm} variant="filled">
                     {labels?.confirm ? labels.confirm : 'Confirm'}
                 </Button>
             </Group>
diff --git a/src/shared/components/option/option.tsx b/src/shared/components/option/option.tsx
index bbb364a8..4cbeb5ae 100644
--- a/src/shared/components/option/option.tsx
+++ b/src/shared/components/option/option.tsx
@@ -12,11 +12,7 @@ interface OptionProps extends GroupProps {
 
 export const Option = ({ children, ...props }: OptionProps) => {
     return (
-        <Group
-            classNames={{ root: styles.root }}
-            grow
-            {...props}
-        >
+        <Group classNames={{ root: styles.root }} grow {...props}>
             {children}
         </Group>
     );
diff --git a/src/shared/components/spinner/spinner.tsx b/src/shared/components/spinner/spinner.tsx
index 3bb36e5f..b866d48c 100644
--- a/src/shared/components/spinner/spinner.tsx
+++ b/src/shared/components/spinner/spinner.tsx
@@ -16,20 +16,10 @@ export const Spinner = ({ ...props }: SpinnerProps) => {
     if (props.container) {
         return (
             <Center className={styles.container}>
-                <SpinnerIcon
-                    className={styles.icon}
-                    color={props.color}
-                    size={props.size}
-                />
+                <SpinnerIcon className={styles.icon} color={props.color} size={props.size} />
             </Center>
         );
     }
 
-    return (
-        <SpinnerIcon
-            className={styles.icon}
-            color={props.color}
-            size={props.size}
-        />
-    );
+    return <SpinnerIcon className={styles.icon} color={props.color} size={props.size} />;
 };