diff --git a/src/renderer/features/albums/components/album-list-infinite-grid.tsx b/src/renderer/features/albums/components/album-list-infinite-grid.tsx
index a8e5542e3..7acbc76e3 100644
--- a/src/renderer/features/albums/components/album-list-infinite-grid.tsx
+++ b/src/renderer/features/albums/components/album-list-infinite-grid.tsx
@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
@@ -15,58 +14,57 @@ import {
     SortOrder,
 } from '/@/shared/types/domain-types';
 import { ItemListKey } from '/@/shared/types/types';
+
 interface AlbumListInfiniteGridProps extends ItemListGridComponentProps<AlbumListQuery> {}
 
-export const AlbumListInfiniteGrid = forwardRef<any, AlbumListInfiniteGridProps>(
-    ({
-        gap = 'md',
-        itemsPerPage = 100,
-        itemsPerRow,
-        query = {
-            sortBy: AlbumListSort.NAME,
-            sortOrder: SortOrder.ASC,
-        },
-        saveScrollOffset = true,
-        serverId,
-    }) => {
-        const listCountQuery = albumQueries.listCount({
-            query: { ...query },
-            serverId: serverId,
-        }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
-
-        const listQueryFn = api.controller.getAlbumList;
-
-        const { data, onRangeChanged } = useItemListInfiniteLoader({
-            eventKey: ItemListKey.ALBUM,
-            itemsPerPage,
-            itemType: LibraryItem.ALBUM,
-            listCountQuery,
-            listQueryFn,
-            query,
-            serverId,
-        });
-
-        const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
-            enabled: saveScrollOffset,
-        });
-
-        const rows = useGridRows(LibraryItem.ALBUM, ItemListKey.ALBUM);
-
-        return (
-            <ItemGridList
-                data={data}
-                enableExpansion
-                gap={gap}
-                initialTop={{
-                    to: scrollOffset ?? 0,
-                    type: 'offset',
-                }}
-                itemsPerRow={itemsPerRow}
-                itemType={LibraryItem.ALBUM}
-                onRangeChanged={onRangeChanged}
-                onScrollEnd={handleOnScrollEnd}
-                rows={rows}
-            />
-        );
+export const AlbumListInfiniteGrid = ({
+    gap = 'md',
+    itemsPerPage = 100,
+    itemsPerRow,
+    query = {
+        sortBy: AlbumListSort.NAME,
+        sortOrder: SortOrder.ASC,
     },
-);
+    saveScrollOffset = true,
+    serverId,
+}: AlbumListInfiniteGridProps) => {
+    const listCountQuery = albumQueries.listCount({
+        query: { ...query },
+        serverId: serverId,
+    }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
+
+    const listQueryFn = api.controller.getAlbumList;
+
+    const { data, onRangeChanged } = useItemListInfiniteLoader({
+        eventKey: ItemListKey.ALBUM,
+        itemsPerPage,
+        itemType: LibraryItem.ALBUM,
+        listCountQuery,
+        listQueryFn,
+        query,
+        serverId,
+    });
+
+    const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
+        enabled: saveScrollOffset,
+    });
+
+    const rows = useGridRows(LibraryItem.ALBUM, ItemListKey.ALBUM);
+
+    return (
+        <ItemGridList
+            data={data}
+            enableExpansion
+            gap={gap}
+            initialTop={{
+                to: scrollOffset ?? 0,
+                type: 'offset',
+            }}
+            itemsPerRow={itemsPerRow}
+            itemType={LibraryItem.ALBUM}
+            onRangeChanged={onRangeChanged}
+            onScrollEnd={handleOnScrollEnd}
+            rows={rows}
+        />
+    );
+};
diff --git a/src/renderer/features/albums/components/album-list-infinite-table.tsx b/src/renderer/features/albums/components/album-list-infinite-table.tsx
index 6c99674b3..3944bf2fa 100644
--- a/src/renderer/features/albums/components/album-list-infinite-table.tsx
+++ b/src/renderer/features/albums/components/album-list-infinite-table.tsx
@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
@@ -20,79 +19,73 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface AlbumListInfiniteTableProps extends ItemListTableComponentProps<AlbumListQuery> {}
 
-export const AlbumListInfiniteTable = forwardRef<any, AlbumListInfiniteTableProps>(
-    (
-        {
-            autoFitColumns = false,
-            columns,
-            enableAlternateRowColors = false,
-            enableHorizontalBorders = false,
-            enableRowHoverHighlight = true,
-            enableSelection = true,
-            enableVerticalBorders = false,
-            itemsPerPage = 100,
-            query = {
-                sortBy: AlbumListSort.NAME,
-                sortOrder: SortOrder.ASC,
-            },
-            saveScrollOffset = true,
-            serverId,
-            size = 'default',
-        },
-        ref,
-    ) => {
-        const listCountQuery = albumQueries.listCount({
-            query: { ...query },
-            serverId: serverId,
-        }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
-
-        const listQueryFn = api.controller.getAlbumList;
-
-        const { data, onRangeChanged } = useItemListInfiniteLoader({
-            eventKey: ItemListKey.ALBUM,
-            itemsPerPage,
-            itemType: LibraryItem.ALBUM,
-            listCountQuery,
-            listQueryFn,
-            query,
-            serverId,
-        });
-
-        const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
-            enabled: saveScrollOffset,
-        });
-
-        const { handleColumnReordered } = useItemListColumnReorder({
-            itemListKey: ItemListKey.ALBUM,
-        });
-
-        const { handleColumnResized } = useItemListColumnResize({
-            itemListKey: ItemListKey.ALBUM,
-        });
-
-        return (
-            <ItemTableList
-                autoFitColumns={autoFitColumns}
-                CellComponent={ItemTableListColumn}
-                columns={columns}
-                data={data}
-                enableAlternateRowColors={enableAlternateRowColors}
-                enableHorizontalBorders={enableHorizontalBorders}
-                enableRowHoverHighlight={enableRowHoverHighlight}
-                enableSelection={enableSelection}
-                enableVerticalBorders={enableVerticalBorders}
-                initialTop={{
-                    to: scrollOffset ?? 0,
-                    type: 'offset',
-                }}
-                itemType={LibraryItem.ALBUM}
-                onColumnReordered={handleColumnReordered}
-                onColumnResized={handleColumnResized}
-                onRangeChanged={onRangeChanged}
-                onScrollEnd={handleOnScrollEnd}
-                ref={ref}
-                size={size}
-            />
-        );
+export const AlbumListInfiniteTable = ({
+    autoFitColumns = false,
+    columns,
+    enableAlternateRowColors = false,
+    enableHorizontalBorders = false,
+    enableRowHoverHighlight = true,
+    enableSelection = true,
+    enableVerticalBorders = false,
+    itemsPerPage = 100,
+    query = {
+        sortBy: AlbumListSort.NAME,
+        sortOrder: SortOrder.ASC,
     },
-);
+    saveScrollOffset = true,
+    serverId,
+    size = 'default',
+}: AlbumListInfiniteTableProps) => {
+    const listCountQuery = albumQueries.listCount({
+        query: { ...query },
+        serverId: serverId,
+    }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
+
+    const listQueryFn = api.controller.getAlbumList;
+
+    const { data, onRangeChanged } = useItemListInfiniteLoader({
+        eventKey: ItemListKey.ALBUM,
+        itemsPerPage,
+        itemType: LibraryItem.ALBUM,
+        listCountQuery,
+        listQueryFn,
+        query,
+        serverId,
+    });
+
+    const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
+        enabled: saveScrollOffset,
+    });
+
+    const { handleColumnReordered } = useItemListColumnReorder({
+        itemListKey: ItemListKey.ALBUM,
+    });
+
+    const { handleColumnResized } = useItemListColumnResize({
+        itemListKey: ItemListKey.ALBUM,
+    });
+
+    return (
+        <ItemTableList
+            autoFitColumns={autoFitColumns}
+            CellComponent={ItemTableListColumn}
+            columns={columns}
+            data={data}
+            enableAlternateRowColors={enableAlternateRowColors}
+            enableHorizontalBorders={enableHorizontalBorders}
+            enableRowHoverHighlight={enableRowHoverHighlight}
+            enableSelection={enableSelection}
+            enableVerticalBorders={enableVerticalBorders}
+            initialTop={{
+                to: scrollOffset ?? 0,
+                type: 'offset',
+            }}
+            itemType={LibraryItem.ALBUM}
+            onColumnReordered={handleColumnReordered}
+            onColumnResized={handleColumnResized}
+            onRangeChanged={onRangeChanged}
+            onScrollEnd={handleOnScrollEnd}
+            size={size}
+        />
+    );
+};
diff --git a/src/renderer/features/albums/components/album-list-paginated-grid.tsx b/src/renderer/features/albums/components/album-list-paginated-grid.tsx
index 3c34b4440..9fd55e67e 100644
--- a/src/renderer/features/albums/components/album-list-paginated-grid.tsx
+++ b/src/renderer/features/albums/components/album-list-paginated-grid.tsx
@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -20,71 +19,65 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface AlbumListPaginatedGridProps extends ItemListGridComponentProps<AlbumListQuery> {}
 
-export const AlbumListPaginatedGrid = forwardRef<any, AlbumListPaginatedGridProps>(
-    (
-        {
-            gap = 'md',
-            itemsPerPage = 100,
-            itemsPerRow,
-            query = {
-                sortBy: AlbumListSort.NAME,
-                sortOrder: SortOrder.ASC,
-            },
-            saveScrollOffset = true,
-            serverId,
-        },
-        ref,
-    ) => {
-        const listCountQuery = albumQueries.listCount({
-            query: { ...query },
-            serverId: serverId,
-        }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
-
-        const listQueryFn = api.controller.getAlbumList;
-
-        const { currentPage, onChange } = useItemListPagination();
-
-        const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
-            currentPage,
-            eventKey: ItemListKey.ALBUM,
-            itemsPerPage,
-            itemType: LibraryItem.ALBUM,
-            listCountQuery,
-            listQueryFn,
-            query,
-            serverId,
-        });
-
-        const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
-            enabled: saveScrollOffset,
-        });
-
-        const rows = useGridRows(LibraryItem.ALBUM, ItemListKey.ALBUM);
-
-        return (
-            <ItemListWithPagination
-                currentPage={currentPage}
-                itemsPerPage={itemsPerPage}
-                onChange={onChange}
-                pageCount={pageCount}
-                totalItemCount={totalItemCount}
-            >
-                <ItemGridList
-                    currentPage={currentPage}
-                    data={data || []}
-                    enableExpansion
-                    gap={gap}
-                    initialTop={{
-                        to: scrollOffset ?? 0,
-                        type: 'offset',
-                    }}
-                    itemsPerRow={itemsPerRow}
-                    itemType={LibraryItem.ALBUM}
-                    onScrollEnd={handleOnScrollEnd}
-                    ref={ref}
-                    rows={rows}
-                />
-            </ItemListWithPagination>
-        );
+export const AlbumListPaginatedGrid = ({
+    gap = 'md',
+    itemsPerPage = 100,
+    itemsPerRow,
+    query = {
+        sortBy: AlbumListSort.NAME,
+        sortOrder: SortOrder.ASC,
     },
-);
+    saveScrollOffset = true,
+    serverId,
+}: AlbumListPaginatedGridProps) => {
+    const listCountQuery = albumQueries.listCount({
+        query: { ...query },
+        serverId: serverId,
+    }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
+
+    const listQueryFn = api.controller.getAlbumList;
+
+    const { currentPage, onChange } = useItemListPagination();
+
+    const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
+        currentPage,
+        eventKey: ItemListKey.ALBUM,
+        itemsPerPage,
+        itemType: LibraryItem.ALBUM,
+        listCountQuery,
+        listQueryFn,
+        query,
+        serverId,
+    });
+
+    const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
+        enabled: saveScrollOffset,
+    });
+
+    const rows = useGridRows(LibraryItem.ALBUM, ItemListKey.ALBUM);
+
+    return (
+        <ItemListWithPagination
+            currentPage={currentPage}
+            itemsPerPage={itemsPerPage}
+            onChange={onChange}
+            pageCount={pageCount}
+            totalItemCount={totalItemCount}
+        >
+            <ItemGridList
+                currentPage={currentPage}
+                data={data || []}
+                enableExpansion
+                gap={gap}
+                initialTop={{
+                    to: scrollOffset ?? 0,
+                    type: 'offset',
+                }}
+                itemsPerRow={itemsPerRow}
+                itemType={LibraryItem.ALBUM}
+                onScrollEnd={handleOnScrollEnd}
+                rows={rows}
+            />
+        </ItemListWithPagination>
+    );
+};
diff --git a/src/renderer/features/albums/components/album-list-paginated-table.tsx b/src/renderer/features/albums/components/album-list-paginated-table.tsx
index 8a7f1856b..dc9e172a9 100644
--- a/src/renderer/features/albums/components/album-list-paginated-table.tsx
+++ b/src/renderer/features/albums/components/album-list-paginated-table.tsx
@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -22,92 +21,86 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface AlbumListPaginatedTableProps extends ItemListTableComponentProps<AlbumListQuery> {}
 
-export const AlbumListPaginatedTable = forwardRef<any, AlbumListPaginatedTableProps>(
-    (
-        {
-            autoFitColumns = false,
-            columns,
-            enableAlternateRowColors = false,
-            enableHorizontalBorders = false,
-            enableRowHoverHighlight = true,
-            enableSelection = true,
-            enableVerticalBorders = false,
-            itemsPerPage = 100,
-            query = {
-                sortBy: AlbumListSort.NAME,
-                sortOrder: SortOrder.ASC,
-            },
-            saveScrollOffset = true,
-            serverId,
-            size = 'default',
-        },
-        ref,
-    ) => {
-        const listCountQuery = albumQueries.listCount({
-            query: { ...query },
-            serverId: serverId,
-        }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
-
-        const listQueryFn = api.controller.getAlbumList;
-
-        const { currentPage, onChange } = useItemListPagination();
-
-        const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
-            currentPage,
-            eventKey: ItemListKey.ALBUM,
-            itemsPerPage,
-            itemType: LibraryItem.ALBUM,
-            listCountQuery,
-            listQueryFn,
-            query,
-            serverId,
-        });
-
-        const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
-            enabled: saveScrollOffset,
-        });
-
-        const { handleColumnReordered } = useItemListColumnReorder({
-            itemListKey: ItemListKey.ALBUM,
-        });
-
-        const { handleColumnResized } = useItemListColumnResize({
-            itemListKey: ItemListKey.ALBUM,
-        });
-
-        const startRowIndex = currentPage * itemsPerPage;
-
-        return (
-            <ItemListWithPagination
-                currentPage={currentPage}
-                itemsPerPage={itemsPerPage}
-                onChange={onChange}
-                pageCount={pageCount}
-                totalItemCount={totalItemCount}
-            >
-                <ItemTableList
-                    autoFitColumns={autoFitColumns}
-                    CellComponent={ItemTableListColumn}
-                    columns={columns}
-                    data={data || []}
-                    enableAlternateRowColors={enableAlternateRowColors}
-                    enableHorizontalBorders={enableHorizontalBorders}
-                    enableRowHoverHighlight={enableRowHoverHighlight}
-                    enableSelection={enableSelection}
-                    enableVerticalBorders={enableVerticalBorders}
-                    initialTop={{
-                        to: scrollOffset ?? 0,
-                        type: 'offset',
-                    }}
-                    itemType={LibraryItem.ALBUM}
-                    onColumnReordered={handleColumnReordered}
-                    onColumnResized={handleColumnResized}
-                    onScrollEnd={handleOnScrollEnd}
-                    ref={ref}
-                    size={size}
-                    startRowIndex={startRowIndex}
-                />
-            </ItemListWithPagination>
-        );
+export const AlbumListPaginatedTable = ({
+    autoFitColumns = false,
+    columns,
+    enableAlternateRowColors = false,
+    enableHorizontalBorders = false,
+    enableRowHoverHighlight = true,
+    enableSelection = true,
+    enableVerticalBorders = false,
+    itemsPerPage = 100,
+    query = {
+        sortBy: AlbumListSort.NAME,
+        sortOrder: SortOrder.ASC,
     },
-);
+    saveScrollOffset = true,
+    serverId,
+    size = 'default',
+}: AlbumListPaginatedTableProps) => {
+    const listCountQuery = albumQueries.listCount({
+        query: { ...query },
+        serverId: serverId,
+    }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
+
+    const listQueryFn = api.controller.getAlbumList;
+
+    const { currentPage, onChange } = useItemListPagination();
+
+    const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
+        currentPage,
+        eventKey: ItemListKey.ALBUM,
+        itemsPerPage,
+        itemType: LibraryItem.ALBUM,
+        listCountQuery,
+        listQueryFn,
+        query,
+        serverId,
+    });
+
+    const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
+        enabled: saveScrollOffset,
+    });
+
+    const { handleColumnReordered } = useItemListColumnReorder({
+        itemListKey: ItemListKey.ALBUM,
+    });
+
+    const { handleColumnResized } = useItemListColumnResize({
+        itemListKey: ItemListKey.ALBUM,
+    });
+
+    const startRowIndex = currentPage * itemsPerPage;
+
+    return (
+        <ItemListWithPagination
+            currentPage={currentPage}
+            itemsPerPage={itemsPerPage}
+            onChange={onChange}
+            pageCount={pageCount}
+            totalItemCount={totalItemCount}
+        >
+            <ItemTableList
+                autoFitColumns={autoFitColumns}
+                CellComponent={ItemTableListColumn}
+                columns={columns}
+                data={data || []}
+                enableAlternateRowColors={enableAlternateRowColors}
+                enableHorizontalBorders={enableHorizontalBorders}
+                enableRowHoverHighlight={enableRowHoverHighlight}
+                enableSelection={enableSelection}
+                enableVerticalBorders={enableVerticalBorders}
+                initialTop={{
+                    to: scrollOffset ?? 0,
+                    type: 'offset',
+                }}
+                itemType={LibraryItem.ALBUM}
+                onColumnReordered={handleColumnReordered}
+                onColumnResized={handleColumnResized}
+                onScrollEnd={handleOnScrollEnd}
+                size={size}
+                startRowIndex={startRowIndex}
+            />
+        </ItemListWithPagination>
+    );
+};
diff --git a/src/renderer/features/artists/components/album-artist-list-infinite-grid.tsx b/src/renderer/features/artists/components/album-artist-list-infinite-grid.tsx
index 7eed32072..8e72a2159 100644
--- a/src/renderer/features/artists/components/album-artist-list-infinite-grid.tsx
+++ b/src/renderer/features/artists/components/album-artist-list-infinite-grid.tsx
@@ -19,55 +19,53 @@ import { ItemListKey } from '/@/shared/types/types';
 interface AlbumArtistListInfiniteGridProps
     extends ItemListGridComponentProps<AlbumArtistListQuery> {}
 
-export const AlbumArtistListInfiniteGrid = forwardRef<any, AlbumArtistListInfiniteGridProps>(
-    ({
-        gap = 'md',
-        itemsPerPage = 100,
-        itemsPerRow,
-        query = {
-            sortBy: AlbumArtistListSort.NAME,
-            sortOrder: SortOrder.ASC,
-        },
-        saveScrollOffset = true,
-        serverId,
-    }) => {
-        const listCountQuery = artistsQueries.albumArtistListCount({
-            query: { ...query },
-            serverId: serverId,
-        }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
-
-        const listQueryFn = api.controller.getAlbumArtistList;
-
-        const { data, onRangeChanged } = useItemListInfiniteLoader({
-            eventKey: ItemListKey.ALBUM_ARTIST,
-            itemsPerPage,
-            itemType: LibraryItem.ALBUM_ARTIST,
-            listCountQuery,
-            listQueryFn,
-            query,
-            serverId,
-        });
-
-        const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
-            enabled: saveScrollOffset,
-        });
-
-        const rows = useGridRows(LibraryItem.ALBUM_ARTIST, ItemListKey.ALBUM_ARTIST);
-
-        return (
-            <ItemGridList
-                data={data}
-                gap={gap}
-                initialTop={{
-                    to: scrollOffset ?? 0,
-                    type: 'offset',
-                }}
-                itemsPerRow={itemsPerRow}
-                itemType={LibraryItem.ALBUM_ARTIST}
-                onRangeChanged={onRangeChanged}
-                onScrollEnd={handleOnScrollEnd}
-                rows={rows}
-            />
-        );
+export const AlbumArtistListInfiniteGrid = ({
+    gap = 'md',
+    itemsPerPage = 100,
+    itemsPerRow,
+    query = {
+        sortBy: AlbumArtistListSort.NAME,
+        sortOrder: SortOrder.ASC,
     },
-);
+    saveScrollOffset = true,
+    serverId,
+}: AlbumArtistListInfiniteGridProps) => {
+    const listCountQuery = artistsQueries.albumArtistListCount({
+        query: { ...query },
+        serverId: serverId,
+    }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
+
+    const listQueryFn = api.controller.getAlbumArtistList;
+
+    const { data, onRangeChanged } = useItemListInfiniteLoader({
+        eventKey: ItemListKey.ALBUM_ARTIST,
+        itemsPerPage,
+        itemType: LibraryItem.ALBUM_ARTIST,
+        listCountQuery,
+        listQueryFn,
+        query,
+        serverId,
+    });
+
+    const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
+        enabled: saveScrollOffset,
+    });
+
+    const rows = useGridRows(LibraryItem.ALBUM_ARTIST, ItemListKey.ALBUM_ARTIST);
+
+    return (
+        <ItemGridList
+            data={data}
+            gap={gap}
+            initialTop={{
+                to: scrollOffset ?? 0,
+                type: 'offset',
+            }}
+            itemsPerRow={itemsPerRow}
+            itemType={LibraryItem.ALBUM_ARTIST}
+            onRangeChanged={onRangeChanged}
+            onScrollEnd={handleOnScrollEnd}
+            rows={rows}
+        />
+    );
+};
diff --git a/src/renderer/features/artists/components/album-artist-list-infinite-table.tsx b/src/renderer/features/artists/components/album-artist-list-infinite-table.tsx
index b8edd64f0..5ac72bebe 100644
--- a/src/renderer/features/artists/components/album-artist-list-infinite-table.tsx
+++ b/src/renderer/features/artists/components/album-artist-list-infinite-table.tsx
@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
@@ -21,80 +20,74 @@ import { ItemListKey } from '/@/shared/types/types';
 interface AlbumArtistListInfiniteTableProps
     extends ItemListTableComponentProps<AlbumArtistListQuery> {}
 
-export const AlbumArtistListInfiniteTable = forwardRef<any, AlbumArtistListInfiniteTableProps>(
-    (
-        {
-            autoFitColumns = false,
-            columns,
-            enableAlternateRowColors = false,
-            enableHorizontalBorders = false,
-            enableRowHoverHighlight = true,
-            enableSelection = true,
-            enableVerticalBorders = false,
-            itemsPerPage = 100,
-            query = {
-                sortBy: AlbumArtistListSort.NAME,
-                sortOrder: SortOrder.ASC,
-            },
-            saveScrollOffset = true,
-            serverId,
-            size = 'default',
-        },
-        ref,
-    ) => {
-        const listCountQuery = artistsQueries.albumArtistListCount({
-            query: { ...query },
-            serverId: serverId,
-        }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
-
-        const listQueryFn = api.controller.getAlbumArtistList;
-
-        const { data, onRangeChanged } = useItemListInfiniteLoader({
-            eventKey: ItemListKey.ALBUM_ARTIST,
-            itemsPerPage,
-            itemType: LibraryItem.ALBUM_ARTIST,
-            listCountQuery,
-            listQueryFn,
-            query,
-            serverId,
-        });
-
-        const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
-            enabled: saveScrollOffset,
-        });
-
-        const { handleColumnReordered } = useItemListColumnReorder({
-            itemListKey: ItemListKey.ALBUM_ARTIST,
-        });
-
-        const { handleColumnResized } = useItemListColumnResize({
-            itemListKey: ItemListKey.ALBUM_ARTIST,
-        });
-
-        return (
-            <ItemTableList
-                autoFitColumns={autoFitColumns}
-                CellComponent={ItemTableListColumn}
-                columns={columns}
-                data={data}
-                enableAlternateRowColors={enableAlternateRowColors}
-                enableExpansion={false}
-                enableHorizontalBorders={enableHorizontalBorders}
-                enableRowHoverHighlight={enableRowHoverHighlight}
-                enableSelection={enableSelection}
-                enableVerticalBorders={enableVerticalBorders}
-                initialTop={{
-                    to: scrollOffset ?? 0,
-                    type: 'offset',
-                }}
-                itemType={LibraryItem.ALBUM_ARTIST}
-                onColumnReordered={handleColumnReordered}
-                onColumnResized={handleColumnResized}
-                onRangeChanged={onRangeChanged}
-                onScrollEnd={handleOnScrollEnd}
-                ref={ref}
-                size={size}
-            />
-        );
+export const AlbumArtistListInfiniteTable = ({
+    autoFitColumns = false,
+    columns,
+    enableAlternateRowColors = false,
+    enableHorizontalBorders = false,
+    enableRowHoverHighlight = true,
+    enableSelection = true,
+    enableVerticalBorders = false,
+    itemsPerPage = 100,
+    query = {
+        sortBy: AlbumArtistListSort.NAME,
+        sortOrder: SortOrder.ASC,
     },
-);
+    saveScrollOffset = true,
+    serverId,
+    size = 'default',
+}: AlbumArtistListInfiniteTableProps) => {
+    const listCountQuery = artistsQueries.albumArtistListCount({
+        query: { ...query },
+        serverId: serverId,
+    }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
+
+    const listQueryFn = api.controller.getAlbumArtistList;
+
+    const { data, onRangeChanged } = useItemListInfiniteLoader({
+        eventKey: ItemListKey.ALBUM_ARTIST,
+        itemsPerPage,
+        itemType: LibraryItem.ALBUM_ARTIST,
+        listCountQuery,
+        listQueryFn,
+        query,
+        serverId,
+    });
+
+    const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
+        enabled: saveScrollOffset,
+    });
+
+    const { handleColumnReordered } = useItemListColumnReorder({
+        itemListKey: ItemListKey.ALBUM_ARTIST,
+    });
+
+    const { handleColumnResized } = useItemListColumnResize({
+        itemListKey: ItemListKey.ALBUM_ARTIST,
+    });
+
+    return (
+        <ItemTableList
+            autoFitColumns={autoFitColumns}
+            CellComponent={ItemTableListColumn}
+            columns={columns}
+            data={data}
+            enableAlternateRowColors={enableAlternateRowColors}
+            enableExpansion={false}
+            enableHorizontalBorders={enableHorizontalBorders}
+            enableRowHoverHighlight={enableRowHoverHighlight}
+            enableSelection={enableSelection}
+            enableVerticalBorders={enableVerticalBorders}
+            initialTop={{
+                to: scrollOffset ?? 0,
+                type: 'offset',
+            }}
+            itemType={LibraryItem.ALBUM_ARTIST}
+            onColumnReordered={handleColumnReordered}
+            onColumnResized={handleColumnResized}
+            onRangeChanged={onRangeChanged}
+            onScrollEnd={handleOnScrollEnd}
+            size={size}
+        />
+    );
+};
diff --git a/src/renderer/features/artists/components/album-artist-list-paginated-grid.tsx b/src/renderer/features/artists/components/album-artist-list-paginated-grid.tsx
index 8fd87885e..ac6251722 100644
--- a/src/renderer/features/artists/components/album-artist-list-paginated-grid.tsx
+++ b/src/renderer/features/artists/components/album-artist-list-paginated-grid.tsx
@@ -1,5 +1,5 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
+import { ref } from 'process';
 
 import { api } from '/@/renderer/api';
 import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -21,70 +21,65 @@ import { ItemListKey } from '/@/shared/types/types';
 interface AlbumArtistListPaginatedGridProps
     extends ItemListGridComponentProps<AlbumArtistListQuery> {}
 
-export const AlbumArtistListPaginatedGrid = forwardRef<any, AlbumArtistListPaginatedGridProps>(
-    (
-        {
-            gap = 'md',
-            itemsPerPage = 100,
-            itemsPerRow,
-            query = {
-                sortBy: AlbumArtistListSort.NAME,
-                sortOrder: SortOrder.ASC,
-            },
-            saveScrollOffset = true,
-            serverId,
-        },
-        ref,
-    ) => {
-        const listCountQuery = artistsQueries.albumArtistListCount({
-            query: { ...query },
-            serverId: serverId,
-        }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
-
-        const listQueryFn = api.controller.getAlbumArtistList;
-
-        const { currentPage, onChange } = useItemListPagination();
-
-        const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
-            currentPage,
-            eventKey: ItemListKey.ALBUM_ARTIST,
-            itemsPerPage,
-            itemType: LibraryItem.ALBUM_ARTIST,
-            listCountQuery,
-            listQueryFn,
-            query,
-            serverId,
-        });
-
-        const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
-            enabled: saveScrollOffset,
-        });
-
-        const rows = useGridRows(LibraryItem.ALBUM_ARTIST, ItemListKey.ALBUM_ARTIST);
-
-        return (
-            <ItemListWithPagination
-                currentPage={currentPage}
-                itemsPerPage={itemsPerPage}
-                onChange={onChange}
-                pageCount={pageCount}
-                totalItemCount={totalItemCount}
-            >
-                <ItemGridList
-                    currentPage={currentPage}
-                    data={data || []}
-                    gap={gap}
-                    initialTop={{
-                        to: scrollOffset ?? 0,
-                        type: 'offset',
-                    }}
-                    itemsPerRow={itemsPerRow}
-                    itemType={LibraryItem.ALBUM_ARTIST}
-                    onScrollEnd={handleOnScrollEnd}
-                    ref={ref}
-                    rows={rows}
-                />
-            </ItemListWithPagination>
-        );
+export const AlbumArtistListPaginatedGrid = ({
+    gap = 'md',
+    itemsPerPage = 100,
+    itemsPerRow,
+    query = {
+        sortBy: AlbumArtistListSort.NAME,
+        sortOrder: SortOrder.ASC,
     },
-);
+    saveScrollOffset = true,
+    serverId,
+}: AlbumArtistListPaginatedGridProps) => {
+    const listCountQuery = artistsQueries.albumArtistListCount({
+        query: { ...query },
+        serverId: serverId,
+    }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
+
+    const listQueryFn = api.controller.getAlbumArtistList;
+
+    const { currentPage, onChange } = useItemListPagination();
+
+    const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
+        currentPage,
+        eventKey: ItemListKey.ALBUM_ARTIST,
+        itemsPerPage,
+        itemType: LibraryItem.ALBUM_ARTIST,
+        listCountQuery,
+        listQueryFn,
+        query,
+        serverId,
+    });
+
+    const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
+        enabled: saveScrollOffset,
+    });
+
+    const rows = useGridRows(LibraryItem.ALBUM_ARTIST, ItemListKey.ALBUM_ARTIST);
+
+    return (
+        <ItemListWithPagination
+            currentPage={currentPage}
+            itemsPerPage={itemsPerPage}
+            onChange={onChange}
+            pageCount={pageCount}
+            totalItemCount={totalItemCount}
+        >
+            <ItemGridList
+                currentPage={currentPage}
+                data={data || []}
+                gap={gap}
+                initialTop={{
+                    to: scrollOffset ?? 0,
+                    type: 'offset',
+                }}
+                itemsPerRow={itemsPerRow}
+                itemType={LibraryItem.ALBUM_ARTIST}
+                onScrollEnd={handleOnScrollEnd}
+                ref={ref}
+                rows={rows}
+            />
+        </ItemListWithPagination>
+    );
+};
diff --git a/src/renderer/features/artists/components/album-artist-list-paginated-table.tsx b/src/renderer/features/artists/components/album-artist-list-paginated-table.tsx
index 74a101171..a26ec766f 100644
--- a/src/renderer/features/artists/components/album-artist-list-paginated-table.tsx
+++ b/src/renderer/features/artists/components/album-artist-list-paginated-table.tsx
@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -23,93 +22,87 @@ import { ItemListKey } from '/@/shared/types/types';
 interface AlbumArtistListPaginatedTableProps
     extends ItemListTableComponentProps<AlbumArtistListQuery> {}
 
-export const AlbumArtistListPaginatedTable = forwardRef<any, AlbumArtistListPaginatedTableProps>(
-    (
-        {
-            autoFitColumns = false,
-            columns,
-            enableAlternateRowColors = false,
-            enableHorizontalBorders = false,
-            enableRowHoverHighlight = true,
-            enableSelection = true,
-            enableVerticalBorders = false,
-            itemsPerPage = 100,
-            query = {
-                sortBy: AlbumArtistListSort.NAME,
-                sortOrder: SortOrder.ASC,
-            },
-            saveScrollOffset = true,
-            serverId,
-            size = 'default',
-        },
-        ref,
-    ) => {
-        const listCountQuery = artistsQueries.albumArtistListCount({
-            query: { ...query },
-            serverId: serverId,
-        }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
-
-        const listQueryFn = api.controller.getAlbumArtistList;
-
-        const { currentPage, onChange } = useItemListPagination();
-
-        const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
-            currentPage,
-            eventKey: ItemListKey.ALBUM_ARTIST,
-            itemsPerPage,
-            itemType: LibraryItem.ALBUM_ARTIST,
-            listCountQuery,
-            listQueryFn,
-            query,
-            serverId,
-        });
-
-        const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
-            enabled: saveScrollOffset,
-        });
-
-        const { handleColumnReordered } = useItemListColumnReorder({
-            itemListKey: ItemListKey.ALBUM_ARTIST,
-        });
-
-        const { handleColumnResized } = useItemListColumnResize({
-            itemListKey: ItemListKey.ALBUM_ARTIST,
-        });
-
-        const startRowIndex = currentPage * itemsPerPage;
-
-        return (
-            <ItemListWithPagination
-                currentPage={currentPage}
-                itemsPerPage={itemsPerPage}
-                onChange={onChange}
-                pageCount={pageCount}
-                totalItemCount={totalItemCount}
-            >
-                <ItemTableList
-                    autoFitColumns={autoFitColumns}
-                    CellComponent={ItemTableListColumn}
-                    columns={columns}
-                    data={data || []}
-                    enableAlternateRowColors={enableAlternateRowColors}
-                    enableExpansion={false}
-                    enableHorizontalBorders={enableHorizontalBorders}
-                    enableRowHoverHighlight={enableRowHoverHighlight}
-                    enableSelection={enableSelection}
-                    enableVerticalBorders={enableVerticalBorders}
-                    initialTop={{
-                        to: scrollOffset ?? 0,
-                        type: 'offset',
-                    }}
-                    itemType={LibraryItem.ALBUM_ARTIST}
-                    onColumnReordered={handleColumnReordered}
-                    onColumnResized={handleColumnResized}
-                    onScrollEnd={handleOnScrollEnd}
-                    ref={ref}
-                    size={size}
-                    startRowIndex={startRowIndex}
-                />
-            </ItemListWithPagination>
-        );
+export const AlbumArtistListPaginatedTable = ({
+    autoFitColumns = false,
+    columns,
+    enableAlternateRowColors = false,
+    enableHorizontalBorders = false,
+    enableRowHoverHighlight = true,
+    enableSelection = true,
+    enableVerticalBorders = false,
+    itemsPerPage = 100,
+    query = {
+        sortBy: AlbumArtistListSort.NAME,
+        sortOrder: SortOrder.ASC,
     },
-);
+    saveScrollOffset = true,
+    serverId,
+    size = 'default',
+}: AlbumArtistListPaginatedTableProps) => {
+    const listCountQuery = artistsQueries.albumArtistListCount({
+        query: { ...query },
+        serverId: serverId,
+    }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
+
+    const listQueryFn = api.controller.getAlbumArtistList;
+
+    const { currentPage, onChange } = useItemListPagination();
+
+    const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
+        currentPage,
+        eventKey: ItemListKey.ALBUM_ARTIST,
+        itemsPerPage,
+        itemType: LibraryItem.ALBUM_ARTIST,
+        listCountQuery,
+        listQueryFn,
+        query,
+        serverId,
+    });
+
+    const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
+        enabled: saveScrollOffset,
+    });
+
+    const { handleColumnReordered } = useItemListColumnReorder({
+        itemListKey: ItemListKey.ALBUM_ARTIST,
+    });
+
+    const { handleColumnResized } = useItemListColumnResize({
+        itemListKey: ItemListKey.ALBUM_ARTIST,
+    });
+
+    const startRowIndex = currentPage * itemsPerPage;
+
+    return (
+        <ItemListWithPagination
+            currentPage={currentPage}
+            itemsPerPage={itemsPerPage}
+            onChange={onChange}
+            pageCount={pageCount}
+            totalItemCount={totalItemCount}
+        >
+            <ItemTableList
+                autoFitColumns={autoFitColumns}
+                CellComponent={ItemTableListColumn}
+                columns={columns}
+                data={data || []}
+                enableAlternateRowColors={enableAlternateRowColors}
+                enableExpansion={false}
+                enableHorizontalBorders={enableHorizontalBorders}
+                enableRowHoverHighlight={enableRowHoverHighlight}
+                enableSelection={enableSelection}
+                enableVerticalBorders={enableVerticalBorders}
+                initialTop={{
+                    to: scrollOffset ?? 0,
+                    type: 'offset',
+                }}
+                itemType={LibraryItem.ALBUM_ARTIST}
+                onColumnReordered={handleColumnReordered}
+                onColumnResized={handleColumnResized}
+                onScrollEnd={handleOnScrollEnd}
+                size={size}
+                startRowIndex={startRowIndex}
+            />
+        </ItemListWithPagination>
+    );
+};
diff --git a/src/renderer/features/artists/components/artist-list-infinite-grid.tsx b/src/renderer/features/artists/components/artist-list-infinite-grid.tsx
index add10cb30..991deb3e3 100644
--- a/src/renderer/features/artists/components/artist-list-infinite-grid.tsx
+++ b/src/renderer/features/artists/components/artist-list-infinite-grid.tsx
@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
@@ -18,55 +17,53 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface ArtistListInfiniteGridProps extends ItemListGridComponentProps<ArtistListQuery> {}
 
-export const ArtistListInfiniteGrid = forwardRef<any, ArtistListInfiniteGridProps>(
-    ({
-        gap = 'md',
-        itemsPerPage = 100,
-        itemsPerRow,
-        query = {
-            sortBy: ArtistListSort.NAME,
-            sortOrder: SortOrder.ASC,
-        },
-        saveScrollOffset = true,
-        serverId,
-    }) => {
-        const listCountQuery = artistsQueries.artistListCount({
-            query: { ...query },
-            serverId: serverId,
-        }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
-
-        const listQueryFn = api.controller.getArtistList;
-
-        const { data, onRangeChanged } = useItemListInfiniteLoader({
-            eventKey: ItemListKey.ARTIST,
-            itemsPerPage,
-            itemType: LibraryItem.ARTIST,
-            listCountQuery,
-            listQueryFn,
-            query,
-            serverId,
-        });
-
-        const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
-            enabled: saveScrollOffset,
-        });
-
-        const rows = useGridRows(LibraryItem.ARTIST, ItemListKey.ARTIST);
-
-        return (
-            <ItemGridList
-                data={data}
-                gap={gap}
-                initialTop={{
-                    to: scrollOffset ?? 0,
-                    type: 'offset',
-                }}
-                itemsPerRow={itemsPerRow}
-                itemType={LibraryItem.ARTIST}
-                onRangeChanged={onRangeChanged}
-                onScrollEnd={handleOnScrollEnd}
-                rows={rows}
-            />
-        );
+export const ArtistListInfiniteGrid = ({
+    gap = 'md',
+    itemsPerPage = 100,
+    itemsPerRow,
+    query = {
+        sortBy: ArtistListSort.NAME,
+        sortOrder: SortOrder.ASC,
     },
-);
+    saveScrollOffset = true,
+    serverId,
+}: ArtistListInfiniteGridProps) => {
+    const listCountQuery = artistsQueries.artistListCount({
+        query: { ...query },
+        serverId: serverId,
+    }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
+
+    const listQueryFn = api.controller.getArtistList;
+
+    const { data, onRangeChanged } = useItemListInfiniteLoader({
+        eventKey: ItemListKey.ARTIST,
+        itemsPerPage,
+        itemType: LibraryItem.ARTIST,
+        listCountQuery,
+        listQueryFn,
+        query,
+        serverId,
+    });
+
+    const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
+        enabled: saveScrollOffset,
+    });
+
+    const rows = useGridRows(LibraryItem.ARTIST, ItemListKey.ARTIST);
+
+    return (
+        <ItemGridList
+            data={data}
+            gap={gap}
+            initialTop={{
+                to: scrollOffset ?? 0,
+                type: 'offset',
+            }}
+            itemsPerRow={itemsPerRow}
+            itemType={LibraryItem.ARTIST}
+            onRangeChanged={onRangeChanged}
+            onScrollEnd={handleOnScrollEnd}
+            rows={rows}
+        />
+    );
+};
diff --git a/src/renderer/features/artists/components/artist-list-infinite-table.tsx b/src/renderer/features/artists/components/artist-list-infinite-table.tsx
index b1214f628..594138acb 100644
--- a/src/renderer/features/artists/components/artist-list-infinite-table.tsx
+++ b/src/renderer/features/artists/components/artist-list-infinite-table.tsx
@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
@@ -20,80 +19,74 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface ArtistListInfiniteTableProps extends ItemListTableComponentProps<ArtistListQuery> {}
 
-export const ArtistListInfiniteTable = forwardRef<any, ArtistListInfiniteTableProps>(
-    (
-        {
-            autoFitColumns = false,
-            columns,
-            enableAlternateRowColors = false,
-            enableHorizontalBorders = false,
-            enableRowHoverHighlight = true,
-            enableSelection = true,
-            enableVerticalBorders = false,
-            itemsPerPage = 100,
-            query = {
-                sortBy: ArtistListSort.NAME,
-                sortOrder: SortOrder.ASC,
-            },
-            saveScrollOffset = true,
-            serverId,
-            size = 'default',
-        },
-        ref,
-    ) => {
-        const listCountQuery = artistsQueries.artistListCount({
-            query: { ...query },
-            serverId: serverId,
-        }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
-
-        const listQueryFn = api.controller.getArtistList;
-
-        const { data, onRangeChanged } = useItemListInfiniteLoader({
-            eventKey: ItemListKey.ARTIST,
-            itemsPerPage,
-            itemType: LibraryItem.ARTIST,
-            listCountQuery,
-            listQueryFn,
-            query,
-            serverId,
-        });
-
-        const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
-            enabled: saveScrollOffset,
-        });
-
-        const { handleColumnReordered } = useItemListColumnReorder({
-            itemListKey: ItemListKey.ARTIST,
-        });
-
-        const { handleColumnResized } = useItemListColumnResize({
-            itemListKey: ItemListKey.ARTIST,
-        });
-
-        return (
-            <ItemTableList
-                autoFitColumns={autoFitColumns}
-                CellComponent={ItemTableListColumn}
-                columns={columns}
-                data={data}
-                enableAlternateRowColors={enableAlternateRowColors}
-                enableExpansion={false}
-                enableHorizontalBorders={enableHorizontalBorders}
-                enableRowHoverHighlight={enableRowHoverHighlight}
-                enableSelection={enableSelection}
-                enableVerticalBorders={enableVerticalBorders}
-                initialTop={{
-                    to: scrollOffset ?? 0,
-                    type: 'offset',
-                }}
-                itemType={LibraryItem.ARTIST}
-                onColumnReordered={handleColumnReordered}
-                onColumnResized={handleColumnResized}
-                onRangeChanged={onRangeChanged}
-                onScrollEnd={handleOnScrollEnd}
-                ref={ref}
-                size={size}
-            />
-        );
+export const ArtistListInfiniteTable = ({
+    autoFitColumns = false,
+    columns,
+    enableAlternateRowColors = false,
+    enableHorizontalBorders = false,
+    enableRowHoverHighlight = true,
+    enableSelection = true,
+    enableVerticalBorders = false,
+    itemsPerPage = 100,
+    query = {
+        sortBy: ArtistListSort.NAME,
+        sortOrder: SortOrder.ASC,
     },
-);
+    saveScrollOffset = true,
+    serverId,
+    size = 'default',
+}: ArtistListInfiniteTableProps) => {
+    const listCountQuery = artistsQueries.artistListCount({
+        query: { ...query },
+        serverId: serverId,
+    }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
+
+    const listQueryFn = api.controller.getArtistList;
+
+    const { data, onRangeChanged } = useItemListInfiniteLoader({
+        eventKey: ItemListKey.ARTIST,
+        itemsPerPage,
+        itemType: LibraryItem.ARTIST,
+        listCountQuery,
+        listQueryFn,
+        query,
+        serverId,
+    });
+
+    const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
+        enabled: saveScrollOffset,
+    });
+
+    const { handleColumnReordered } = useItemListColumnReorder({
+        itemListKey: ItemListKey.ARTIST,
+    });
+
+    const { handleColumnResized } = useItemListColumnResize({
+        itemListKey: ItemListKey.ARTIST,
+    });
+
+    return (
+        <ItemTableList
+            autoFitColumns={autoFitColumns}
+            CellComponent={ItemTableListColumn}
+            columns={columns}
+            data={data}
+            enableAlternateRowColors={enableAlternateRowColors}
+            enableExpansion={false}
+            enableHorizontalBorders={enableHorizontalBorders}
+            enableRowHoverHighlight={enableRowHoverHighlight}
+            enableSelection={enableSelection}
+            enableVerticalBorders={enableVerticalBorders}
+            initialTop={{
+                to: scrollOffset ?? 0,
+                type: 'offset',
+            }}
+            itemType={LibraryItem.ARTIST}
+            onColumnReordered={handleColumnReordered}
+            onColumnResized={handleColumnResized}
+            onRangeChanged={onRangeChanged}
+            onScrollEnd={handleOnScrollEnd}
+            size={size}
+        />
+    );
+};
diff --git a/src/renderer/features/artists/components/artist-list-paginated-grid.tsx b/src/renderer/features/artists/components/artist-list-paginated-grid.tsx
index 155ec6985..481569257 100644
--- a/src/renderer/features/artists/components/artist-list-paginated-grid.tsx
+++ b/src/renderer/features/artists/components/artist-list-paginated-grid.tsx
@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -20,70 +19,64 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface ArtistListPaginatedGridProps extends ItemListGridComponentProps<ArtistListQuery> {}
 
-export const ArtistListPaginatedGrid = forwardRef<any, ArtistListPaginatedGridProps>(
-    (
-        {
-            gap = 'md',
-            itemsPerPage = 100,
-            itemsPerRow,
-            query = {
-                sortBy: ArtistListSort.NAME,
-                sortOrder: SortOrder.ASC,
-            },
-            saveScrollOffset = true,
-            serverId,
-        },
-        ref,
-    ) => {
-        const listCountQuery = artistsQueries.artistListCount({
-            query: { ...query },
-            serverId: serverId,
-        }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
-
-        const listQueryFn = api.controller.getArtistList;
-
-        const { currentPage, onChange } = useItemListPagination();
-
-        const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
-            currentPage,
-            eventKey: ItemListKey.ARTIST,
-            itemsPerPage,
-            itemType: LibraryItem.ARTIST,
-            listCountQuery,
-            listQueryFn,
-            query,
-            serverId,
-        });
-
-        const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
-            enabled: saveScrollOffset,
-        });
-
-        const rows = useGridRows(LibraryItem.ARTIST, ItemListKey.ARTIST);
-
-        return (
-            <ItemListWithPagination
-                currentPage={currentPage}
-                itemsPerPage={itemsPerPage}
-                onChange={onChange}
-                pageCount={pageCount}
-                totalItemCount={totalItemCount}
-            >
-                <ItemGridList
-                    currentPage={currentPage}
-                    data={data || []}
-                    gap={gap}
-                    initialTop={{
-                        to: scrollOffset ?? 0,
-                        type: 'offset',
-                    }}
-                    itemsPerRow={itemsPerRow}
-                    itemType={LibraryItem.ARTIST}
-                    onScrollEnd={handleOnScrollEnd}
-                    ref={ref}
-                    rows={rows}
-                />
-            </ItemListWithPagination>
-        );
+export const ArtistListPaginatedGrid = ({
+    gap = 'md',
+    itemsPerPage = 100,
+    itemsPerRow,
+    query = {
+        sortBy: ArtistListSort.NAME,
+        sortOrder: SortOrder.ASC,
     },
-);
+    saveScrollOffset = true,
+    serverId,
+}: ArtistListPaginatedGridProps) => {
+    const listCountQuery = artistsQueries.artistListCount({
+        query: { ...query },
+        serverId: serverId,
+    }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
+
+    const listQueryFn = api.controller.getArtistList;
+
+    const { currentPage, onChange } = useItemListPagination();
+
+    const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
+        currentPage,
+        eventKey: ItemListKey.ARTIST,
+        itemsPerPage,
+        itemType: LibraryItem.ARTIST,
+        listCountQuery,
+        listQueryFn,
+        query,
+        serverId,
+    });
+
+    const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
+        enabled: saveScrollOffset,
+    });
+
+    const rows = useGridRows(LibraryItem.ARTIST, ItemListKey.ARTIST);
+
+    return (
+        <ItemListWithPagination
+            currentPage={currentPage}
+            itemsPerPage={itemsPerPage}
+            onChange={onChange}
+            pageCount={pageCount}
+            totalItemCount={totalItemCount}
+        >
+            <ItemGridList
+                currentPage={currentPage}
+                data={data || []}
+                gap={gap}
+                initialTop={{
+                    to: scrollOffset ?? 0,
+                    type: 'offset',
+                }}
+                itemsPerRow={itemsPerRow}
+                itemType={LibraryItem.ARTIST}
+                onScrollEnd={handleOnScrollEnd}
+                rows={rows}
+            />
+        </ItemListWithPagination>
+    );
+};
diff --git a/src/renderer/features/artists/components/artist-list-paginated-table.tsx b/src/renderer/features/artists/components/artist-list-paginated-table.tsx
index 7a4004def..048f95529 100644
--- a/src/renderer/features/artists/components/artist-list-paginated-table.tsx
+++ b/src/renderer/features/artists/components/artist-list-paginated-table.tsx
@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -22,93 +21,87 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface ArtistListPaginatedTableProps extends ItemListTableComponentProps<ArtistListQuery> {}
 
-export const ArtistListPaginatedTable = forwardRef<any, ArtistListPaginatedTableProps>(
-    (
-        {
-            autoFitColumns = false,
-            columns,
-            enableAlternateRowColors = false,
-            enableHorizontalBorders = false,
-            enableRowHoverHighlight = true,
-            enableSelection = true,
-            enableVerticalBorders = false,
-            itemsPerPage = 100,
-            query = {
-                sortBy: ArtistListSort.NAME,
-                sortOrder: SortOrder.ASC,
-            },
-            saveScrollOffset = true,
-            serverId,
-            size = 'default',
-        },
-        ref,
-    ) => {
-        const listCountQuery = artistsQueries.artistListCount({
-            query: { ...query },
-            serverId: serverId,
-        }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
-
-        const listQueryFn = api.controller.getArtistList;
-
-        const { currentPage, onChange } = useItemListPagination();
-
-        const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
-            currentPage,
-            eventKey: ItemListKey.ARTIST,
-            itemsPerPage,
-            itemType: LibraryItem.ARTIST,
-            listCountQuery,
-            listQueryFn,
-            query,
-            serverId,
-        });
-
-        const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
-            enabled: saveScrollOffset,
-        });
-
-        const { handleColumnReordered } = useItemListColumnReorder({
-            itemListKey: ItemListKey.ARTIST,
-        });
-
-        const { handleColumnResized } = useItemListColumnResize({
-            itemListKey: ItemListKey.ARTIST,
-        });
-
-        const startRowIndex = currentPage * itemsPerPage;
-
-        return (
-            <ItemListWithPagination
-                currentPage={currentPage}
-                itemsPerPage={itemsPerPage}
-                onChange={onChange}
-                pageCount={pageCount}
-                totalItemCount={totalItemCount}
-            >
-                <ItemTableList
-                    autoFitColumns={autoFitColumns}
-                    CellComponent={ItemTableListColumn}
-                    columns={columns}
-                    data={data || []}
-                    enableAlternateRowColors={enableAlternateRowColors}
-                    enableExpansion={false}
-                    enableHorizontalBorders={enableHorizontalBorders}
-                    enableRowHoverHighlight={enableRowHoverHighlight}
-                    enableSelection={enableSelection}
-                    enableVerticalBorders={enableVerticalBorders}
-                    initialTop={{
-                        to: scrollOffset ?? 0,
-                        type: 'offset',
-                    }}
-                    itemType={LibraryItem.ARTIST}
-                    onColumnReordered={handleColumnReordered}
-                    onColumnResized={handleColumnResized}
-                    onScrollEnd={handleOnScrollEnd}
-                    ref={ref}
-                    size={size}
-                    startRowIndex={startRowIndex}
-                />
-            </ItemListWithPagination>
-        );
+export const ArtistListPaginatedTable = ({
+    autoFitColumns = false,
+    columns,
+    enableAlternateRowColors = false,
+    enableHorizontalBorders = false,
+    enableRowHoverHighlight = true,
+    enableSelection = true,
+    enableVerticalBorders = false,
+    itemsPerPage = 100,
+    query = {
+        sortBy: ArtistListSort.NAME,
+        sortOrder: SortOrder.ASC,
     },
-);
+    saveScrollOffset = true,
+    serverId,
+    size = 'default',
+}: ArtistListPaginatedTableProps) => {
+    const listCountQuery = artistsQueries.artistListCount({
+        query: { ...query },
+        serverId: serverId,
+    }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
+
+    const listQueryFn = api.controller.getArtistList;
+
+    const { currentPage, onChange } = useItemListPagination();
+
+    const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
+        currentPage,
+        eventKey: ItemListKey.ARTIST,
+        itemsPerPage,
+        itemType: LibraryItem.ARTIST,
+        listCountQuery,
+        listQueryFn,
+        query,
+        serverId,
+    });
+
+    const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
+        enabled: saveScrollOffset,
+    });
+
+    const { handleColumnReordered } = useItemListColumnReorder({
+        itemListKey: ItemListKey.ARTIST,
+    });
+
+    const { handleColumnResized } = useItemListColumnResize({
+        itemListKey: ItemListKey.ARTIST,
+    });
+
+    const startRowIndex = currentPage * itemsPerPage;
+
+    return (
+        <ItemListWithPagination
+            currentPage={currentPage}
+            itemsPerPage={itemsPerPage}
+            onChange={onChange}
+            pageCount={pageCount}
+            totalItemCount={totalItemCount}
+        >
+            <ItemTableList
+                autoFitColumns={autoFitColumns}
+                CellComponent={ItemTableListColumn}
+                columns={columns}
+                data={data || []}
+                enableAlternateRowColors={enableAlternateRowColors}
+                enableExpansion={false}
+                enableHorizontalBorders={enableHorizontalBorders}
+                enableRowHoverHighlight={enableRowHoverHighlight}
+                enableSelection={enableSelection}
+                enableVerticalBorders={enableVerticalBorders}
+                initialTop={{
+                    to: scrollOffset ?? 0,
+                    type: 'offset',
+                }}
+                itemType={LibraryItem.ARTIST}
+                onColumnReordered={handleColumnReordered}
+                onColumnResized={handleColumnResized}
+                onScrollEnd={handleOnScrollEnd}
+                size={size}
+                startRowIndex={startRowIndex}
+            />
+        </ItemListWithPagination>
+    );
+};
diff --git a/src/renderer/features/genres/components/genre-list-infinite-grid.tsx b/src/renderer/features/genres/components/genre-list-infinite-grid.tsx
index 83dd58576..2ca1a619c 100644
--- a/src/renderer/features/genres/components/genre-list-infinite-grid.tsx
+++ b/src/renderer/features/genres/components/genre-list-infinite-grid.tsx
@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
@@ -18,55 +17,53 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface GenreListInfiniteGridProps extends ItemListGridComponentProps<GenreListQuery> {}
 
-export const GenreListInfiniteGrid = forwardRef<any, GenreListInfiniteGridProps>(
-    ({
-        gap = 'md',
-        itemsPerPage = 100,
-        itemsPerRow,
-        query = {
-            sortBy: GenreListSort.NAME,
-            sortOrder: SortOrder.ASC,
-        },
-        saveScrollOffset = true,
-        serverId,
-    }) => {
-        const listCountQuery = genresQueries.listCount({
-            query: { ...query },
-            serverId: serverId,
-        }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
-
-        const listQueryFn = api.controller.getGenreList;
-
-        const { data, onRangeChanged } = useItemListInfiniteLoader({
-            eventKey: ItemListKey.GENRE,
-            itemsPerPage,
-            itemType: LibraryItem.GENRE,
-            listCountQuery,
-            listQueryFn,
-            query,
-            serverId,
-        });
-
-        const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
-            enabled: saveScrollOffset,
-        });
-
-        const rows = useGridRows(LibraryItem.GENRE, ItemListKey.GENRE);
-
-        return (
-            <ItemGridList
-                data={data}
-                gap={gap}
-                initialTop={{
-                    to: scrollOffset ?? 0,
-                    type: 'offset',
-                }}
-                itemsPerRow={itemsPerRow}
-                itemType={LibraryItem.GENRE}
-                onRangeChanged={onRangeChanged}
-                onScrollEnd={handleOnScrollEnd}
-                rows={rows}
-            />
-        );
+export const GenreListInfiniteGrid = ({
+    gap = 'md',
+    itemsPerPage = 100,
+    itemsPerRow,
+    query = {
+        sortBy: GenreListSort.NAME,
+        sortOrder: SortOrder.ASC,
     },
-);
+    saveScrollOffset = true,
+    serverId,
+}: GenreListInfiniteGridProps) => {
+    const listCountQuery = genresQueries.listCount({
+        query: { ...query },
+        serverId: serverId,
+    }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
+
+    const listQueryFn = api.controller.getGenreList;
+
+    const { data, onRangeChanged } = useItemListInfiniteLoader({
+        eventKey: ItemListKey.GENRE,
+        itemsPerPage,
+        itemType: LibraryItem.GENRE,
+        listCountQuery,
+        listQueryFn,
+        query,
+        serverId,
+    });
+
+    const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
+        enabled: saveScrollOffset,
+    });
+
+    const rows = useGridRows(LibraryItem.GENRE, ItemListKey.GENRE);
+
+    return (
+        <ItemGridList
+            data={data}
+            gap={gap}
+            initialTop={{
+                to: scrollOffset ?? 0,
+                type: 'offset',
+            }}
+            itemsPerRow={itemsPerRow}
+            itemType={LibraryItem.GENRE}
+            onRangeChanged={onRangeChanged}
+            onScrollEnd={handleOnScrollEnd}
+            rows={rows}
+        />
+    );
+};
diff --git a/src/renderer/features/genres/components/genre-list-infinite-table.tsx b/src/renderer/features/genres/components/genre-list-infinite-table.tsx
index 86112bd9d..d9871ba38 100644
--- a/src/renderer/features/genres/components/genre-list-infinite-table.tsx
+++ b/src/renderer/features/genres/components/genre-list-infinite-table.tsx
@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
@@ -20,80 +19,74 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface GenreListInfiniteTableProps extends ItemListTableComponentProps<GenreListQuery> {}
 
-export const GenreListInfiniteTable = forwardRef<any, GenreListInfiniteTableProps>(
-    (
-        {
-            autoFitColumns = false,
-            columns,
-            enableAlternateRowColors = false,
-            enableHorizontalBorders = false,
-            enableRowHoverHighlight = true,
-            enableSelection = true,
-            enableVerticalBorders = false,
-            itemsPerPage = 100,
-            query = {
-                sortBy: GenreListSort.NAME,
-                sortOrder: SortOrder.ASC,
-            },
-            saveScrollOffset = true,
-            serverId,
-            size = 'default',
-        },
-        ref,
-    ) => {
-        const listCountQuery = genresQueries.listCount({
-            query: { ...query },
-            serverId: serverId,
-        }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
-
-        const listQueryFn = api.controller.getGenreList;
-
-        const { data, onRangeChanged } = useItemListInfiniteLoader({
-            eventKey: ItemListKey.GENRE,
-            itemsPerPage,
-            itemType: LibraryItem.GENRE,
-            listCountQuery,
-            listQueryFn,
-            query,
-            serverId,
-        });
-
-        const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
-            enabled: saveScrollOffset,
-        });
-
-        const { handleColumnReordered } = useItemListColumnReorder({
-            itemListKey: ItemListKey.GENRE,
-        });
-
-        const { handleColumnResized } = useItemListColumnResize({
-            itemListKey: ItemListKey.GENRE,
-        });
-
-        return (
-            <ItemTableList
-                autoFitColumns={autoFitColumns}
-                CellComponent={ItemTableListColumn}
-                columns={columns}
-                data={data}
-                enableAlternateRowColors={enableAlternateRowColors}
-                enableExpansion={false}
-                enableHorizontalBorders={enableHorizontalBorders}
-                enableRowHoverHighlight={enableRowHoverHighlight}
-                enableSelection={enableSelection}
-                enableVerticalBorders={enableVerticalBorders}
-                initialTop={{
-                    to: scrollOffset ?? 0,
-                    type: 'offset',
-                }}
-                itemType={LibraryItem.GENRE}
-                onColumnReordered={handleColumnReordered}
-                onColumnResized={handleColumnResized}
-                onRangeChanged={onRangeChanged}
-                onScrollEnd={handleOnScrollEnd}
-                ref={ref}
-                size={size}
-            />
-        );
+export const GenreListInfiniteTable = ({
+    autoFitColumns = false,
+    columns,
+    enableAlternateRowColors = false,
+    enableHorizontalBorders = false,
+    enableRowHoverHighlight = true,
+    enableSelection = true,
+    enableVerticalBorders = false,
+    itemsPerPage = 100,
+    query = {
+        sortBy: GenreListSort.NAME,
+        sortOrder: SortOrder.ASC,
     },
-);
+    saveScrollOffset = true,
+    serverId,
+    size = 'default',
+}: GenreListInfiniteTableProps) => {
+    const listCountQuery = genresQueries.listCount({
+        query: { ...query },
+        serverId: serverId,
+    }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
+
+    const listQueryFn = api.controller.getGenreList;
+
+    const { data, onRangeChanged } = useItemListInfiniteLoader({
+        eventKey: ItemListKey.GENRE,
+        itemsPerPage,
+        itemType: LibraryItem.GENRE,
+        listCountQuery,
+        listQueryFn,
+        query,
+        serverId,
+    });
+
+    const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
+        enabled: saveScrollOffset,
+    });
+
+    const { handleColumnReordered } = useItemListColumnReorder({
+        itemListKey: ItemListKey.GENRE,
+    });
+
+    const { handleColumnResized } = useItemListColumnResize({
+        itemListKey: ItemListKey.GENRE,
+    });
+
+    return (
+        <ItemTableList
+            autoFitColumns={autoFitColumns}
+            CellComponent={ItemTableListColumn}
+            columns={columns}
+            data={data}
+            enableAlternateRowColors={enableAlternateRowColors}
+            enableExpansion={false}
+            enableHorizontalBorders={enableHorizontalBorders}
+            enableRowHoverHighlight={enableRowHoverHighlight}
+            enableSelection={enableSelection}
+            enableVerticalBorders={enableVerticalBorders}
+            initialTop={{
+                to: scrollOffset ?? 0,
+                type: 'offset',
+            }}
+            itemType={LibraryItem.GENRE}
+            onColumnReordered={handleColumnReordered}
+            onColumnResized={handleColumnResized}
+            onRangeChanged={onRangeChanged}
+            onScrollEnd={handleOnScrollEnd}
+            size={size}
+        />
+    );
+};
diff --git a/src/renderer/features/genres/components/genre-list-paginated-grid.tsx b/src/renderer/features/genres/components/genre-list-paginated-grid.tsx
index 21b546460..d819297ce 100644
--- a/src/renderer/features/genres/components/genre-list-paginated-grid.tsx
+++ b/src/renderer/features/genres/components/genre-list-paginated-grid.tsx
@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -20,70 +19,64 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface GenreListPaginatedGridProps extends ItemListGridComponentProps<GenreListQuery> {}
 
-export const GenreListPaginatedGrid = forwardRef<any, GenreListPaginatedGridProps>(
-    (
-        {
-            gap = 'md',
-            itemsPerPage = 100,
-            itemsPerRow,
-            query = {
-                sortBy: GenreListSort.NAME,
-                sortOrder: SortOrder.ASC,
-            },
-            saveScrollOffset = true,
-            serverId,
-        },
-        ref,
-    ) => {
-        const listCountQuery = genresQueries.listCount({
-            query: { ...query },
-            serverId: serverId,
-        }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
-
-        const listQueryFn = api.controller.getGenreList;
-
-        const { currentPage, onChange } = useItemListPagination();
-
-        const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
-            currentPage,
-            eventKey: ItemListKey.GENRE,
-            itemsPerPage,
-            itemType: LibraryItem.GENRE,
-            listCountQuery,
-            listQueryFn,
-            query,
-            serverId,
-        });
-
-        const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
-            enabled: saveScrollOffset,
-        });
-
-        const rows = useGridRows(LibraryItem.GENRE, ItemListKey.GENRE);
-
-        return (
-            <ItemListWithPagination
-                currentPage={currentPage}
-                itemsPerPage={itemsPerPage}
-                onChange={onChange}
-                pageCount={pageCount}
-                totalItemCount={totalItemCount}
-            >
-                <ItemGridList
-                    currentPage={currentPage}
-                    data={data || []}
-                    gap={gap}
-                    initialTop={{
-                        to: scrollOffset ?? 0,
-                        type: 'offset',
-                    }}
-                    itemsPerRow={itemsPerRow}
-                    itemType={LibraryItem.GENRE}
-                    onScrollEnd={handleOnScrollEnd}
-                    ref={ref}
-                    rows={rows}
-                />
-            </ItemListWithPagination>
-        );
+export const GenreListPaginatedGrid = ({
+    gap = 'md',
+    itemsPerPage = 100,
+    itemsPerRow,
+    query = {
+        sortBy: GenreListSort.NAME,
+        sortOrder: SortOrder.ASC,
     },
-);
+    saveScrollOffset = true,
+    serverId,
+}: GenreListPaginatedGridProps) => {
+    const listCountQuery = genresQueries.listCount({
+        query: { ...query },
+        serverId: serverId,
+    }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
+
+    const listQueryFn = api.controller.getGenreList;
+
+    const { currentPage, onChange } = useItemListPagination();
+
+    const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
+        currentPage,
+        eventKey: ItemListKey.GENRE,
+        itemsPerPage,
+        itemType: LibraryItem.GENRE,
+        listCountQuery,
+        listQueryFn,
+        query,
+        serverId,
+    });
+
+    const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
+        enabled: saveScrollOffset,
+    });
+
+    const rows = useGridRows(LibraryItem.GENRE, ItemListKey.GENRE);
+
+    return (
+        <ItemListWithPagination
+            currentPage={currentPage}
+            itemsPerPage={itemsPerPage}
+            onChange={onChange}
+            pageCount={pageCount}
+            totalItemCount={totalItemCount}
+        >
+            <ItemGridList
+                currentPage={currentPage}
+                data={data || []}
+                gap={gap}
+                initialTop={{
+                    to: scrollOffset ?? 0,
+                    type: 'offset',
+                }}
+                itemsPerRow={itemsPerRow}
+                itemType={LibraryItem.GENRE}
+                onScrollEnd={handleOnScrollEnd}
+                rows={rows}
+            />
+        </ItemListWithPagination>
+    );
+};
diff --git a/src/renderer/features/genres/components/genre-list-paginated-table.tsx b/src/renderer/features/genres/components/genre-list-paginated-table.tsx
index 2a4f89751..b97cab054 100644
--- a/src/renderer/features/genres/components/genre-list-paginated-table.tsx
+++ b/src/renderer/features/genres/components/genre-list-paginated-table.tsx
@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -22,93 +21,87 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface GenreListPaginatedTableProps extends ItemListTableComponentProps<GenreListQuery> {}
 
-export const GenreListPaginatedTable = forwardRef<any, GenreListPaginatedTableProps>(
-    (
-        {
-            autoFitColumns = false,
-            columns,
-            enableAlternateRowColors = false,
-            enableHorizontalBorders = false,
-            enableRowHoverHighlight = true,
-            enableSelection = true,
-            enableVerticalBorders = false,
-            itemsPerPage = 100,
-            query = {
-                sortBy: GenreListSort.NAME,
-                sortOrder: SortOrder.ASC,
-            },
-            saveScrollOffset = true,
-            serverId,
-            size = 'default',
-        },
-        ref,
-    ) => {
-        const listCountQuery = genresQueries.listCount({
-            query: { ...query },
-            serverId: serverId,
-        }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
-
-        const listQueryFn = api.controller.getGenreList;
-
-        const { currentPage, onChange } = useItemListPagination();
-
-        const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
-            currentPage,
-            eventKey: ItemListKey.GENRE,
-            itemsPerPage,
-            itemType: LibraryItem.GENRE,
-            listCountQuery,
-            listQueryFn,
-            query,
-            serverId,
-        });
-
-        const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
-            enabled: saveScrollOffset,
-        });
-
-        const { handleColumnReordered } = useItemListColumnReorder({
-            itemListKey: ItemListKey.GENRE,
-        });
-
-        const { handleColumnResized } = useItemListColumnResize({
-            itemListKey: ItemListKey.GENRE,
-        });
-
-        const startRowIndex = currentPage * itemsPerPage;
-
-        return (
-            <ItemListWithPagination
-                currentPage={currentPage}
-                itemsPerPage={itemsPerPage}
-                onChange={onChange}
-                pageCount={pageCount}
-                totalItemCount={totalItemCount}
-            >
-                <ItemTableList
-                    autoFitColumns={autoFitColumns}
-                    CellComponent={ItemTableListColumn}
-                    columns={columns}
-                    data={data || []}
-                    enableAlternateRowColors={enableAlternateRowColors}
-                    enableExpansion={false}
-                    enableHorizontalBorders={enableHorizontalBorders}
-                    enableRowHoverHighlight={enableRowHoverHighlight}
-                    enableSelection={enableSelection}
-                    enableVerticalBorders={enableVerticalBorders}
-                    initialTop={{
-                        to: scrollOffset ?? 0,
-                        type: 'offset',
-                    }}
-                    itemType={LibraryItem.GENRE}
-                    onColumnReordered={handleColumnReordered}
-                    onColumnResized={handleColumnResized}
-                    onScrollEnd={handleOnScrollEnd}
-                    ref={ref}
-                    size={size}
-                    startRowIndex={startRowIndex}
-                />
-            </ItemListWithPagination>
-        );
+export const GenreListPaginatedTable = ({
+    autoFitColumns = false,
+    columns,
+    enableAlternateRowColors = false,
+    enableHorizontalBorders = false,
+    enableRowHoverHighlight = true,
+    enableSelection = true,
+    enableVerticalBorders = false,
+    itemsPerPage = 100,
+    query = {
+        sortBy: GenreListSort.NAME,
+        sortOrder: SortOrder.ASC,
     },
-);
+    saveScrollOffset = true,
+    serverId,
+    size = 'default',
+}: GenreListPaginatedTableProps) => {
+    const listCountQuery = genresQueries.listCount({
+        query: { ...query },
+        serverId: serverId,
+    }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
+
+    const listQueryFn = api.controller.getGenreList;
+
+    const { currentPage, onChange } = useItemListPagination();
+
+    const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
+        currentPage,
+        eventKey: ItemListKey.GENRE,
+        itemsPerPage,
+        itemType: LibraryItem.GENRE,
+        listCountQuery,
+        listQueryFn,
+        query,
+        serverId,
+    });
+
+    const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
+        enabled: saveScrollOffset,
+    });
+
+    const { handleColumnReordered } = useItemListColumnReorder({
+        itemListKey: ItemListKey.GENRE,
+    });
+
+    const { handleColumnResized } = useItemListColumnResize({
+        itemListKey: ItemListKey.GENRE,
+    });
+
+    const startRowIndex = currentPage * itemsPerPage;
+
+    return (
+        <ItemListWithPagination
+            currentPage={currentPage}
+            itemsPerPage={itemsPerPage}
+            onChange={onChange}
+            pageCount={pageCount}
+            totalItemCount={totalItemCount}
+        >
+            <ItemTableList
+                autoFitColumns={autoFitColumns}
+                CellComponent={ItemTableListColumn}
+                columns={columns}
+                data={data || []}
+                enableAlternateRowColors={enableAlternateRowColors}
+                enableExpansion={false}
+                enableHorizontalBorders={enableHorizontalBorders}
+                enableRowHoverHighlight={enableRowHoverHighlight}
+                enableSelection={enableSelection}
+                enableVerticalBorders={enableVerticalBorders}
+                initialTop={{
+                    to: scrollOffset ?? 0,
+                    type: 'offset',
+                }}
+                itemType={LibraryItem.GENRE}
+                onColumnReordered={handleColumnReordered}
+                onColumnResized={handleColumnResized}
+                onScrollEnd={handleOnScrollEnd}
+                size={size}
+                startRowIndex={startRowIndex}
+            />
+        </ItemListWithPagination>
+    );
+};
diff --git a/src/renderer/features/playlists/components/playlist-list-infinite-grid.tsx b/src/renderer/features/playlists/components/playlist-list-infinite-grid.tsx
index 422452086..9c15efa28 100644
--- a/src/renderer/features/playlists/components/playlist-list-infinite-grid.tsx
+++ b/src/renderer/features/playlists/components/playlist-list-infinite-grid.tsx
@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
@@ -18,55 +17,53 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface PlaylistListInfiniteGridProps extends ItemListGridComponentProps<PlaylistListQuery> {}
 
-export const PlaylistListInfiniteGrid = forwardRef<any, PlaylistListInfiniteGridProps>(
-    ({
-        gap = 'md',
-        itemsPerPage = 100,
-        itemsPerRow,
-        query = {
-            sortBy: PlaylistListSort.NAME,
-            sortOrder: SortOrder.ASC,
-        },
-        saveScrollOffset = true,
-        serverId,
-    }) => {
-        const listCountQuery = playlistsQueries.listCount({
-            query: { ...query },
-            serverId: serverId,
-        }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
-
-        const listQueryFn = api.controller.getPlaylistList;
-
-        const { data, onRangeChanged } = useItemListInfiniteLoader({
-            eventKey: ItemListKey.PLAYLIST,
-            itemsPerPage,
-            itemType: LibraryItem.PLAYLIST,
-            listCountQuery,
-            listQueryFn,
-            query,
-            serverId,
-        });
-
-        const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
-            enabled: saveScrollOffset,
-        });
-
-        const rows = useGridRows(LibraryItem.PLAYLIST, ItemListKey.PLAYLIST);
-
-        return (
-            <ItemGridList
-                data={data}
-                gap={gap}
-                initialTop={{
-                    to: scrollOffset ?? 0,
-                    type: 'offset',
-                }}
-                itemsPerRow={itemsPerRow}
-                itemType={LibraryItem.PLAYLIST}
-                onRangeChanged={onRangeChanged}
-                onScrollEnd={handleOnScrollEnd}
-                rows={rows}
-            />
-        );
+export const PlaylistListInfiniteGrid = ({
+    gap = 'md',
+    itemsPerPage = 100,
+    itemsPerRow,
+    query = {
+        sortBy: PlaylistListSort.NAME,
+        sortOrder: SortOrder.ASC,
     },
-);
+    saveScrollOffset = true,
+    serverId,
+}: PlaylistListInfiniteGridProps) => {
+    const listCountQuery = playlistsQueries.listCount({
+        query: { ...query },
+        serverId: serverId,
+    }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
+
+    const listQueryFn = api.controller.getPlaylistList;
+
+    const { data, onRangeChanged } = useItemListInfiniteLoader({
+        eventKey: ItemListKey.PLAYLIST,
+        itemsPerPage,
+        itemType: LibraryItem.PLAYLIST,
+        listCountQuery,
+        listQueryFn,
+        query,
+        serverId,
+    });
+
+    const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
+        enabled: saveScrollOffset,
+    });
+
+    const rows = useGridRows(LibraryItem.PLAYLIST, ItemListKey.PLAYLIST);
+
+    return (
+        <ItemGridList
+            data={data}
+            gap={gap}
+            initialTop={{
+                to: scrollOffset ?? 0,
+                type: 'offset',
+            }}
+            itemsPerRow={itemsPerRow}
+            itemType={LibraryItem.PLAYLIST}
+            onRangeChanged={onRangeChanged}
+            onScrollEnd={handleOnScrollEnd}
+            rows={rows}
+        />
+    );
+};
diff --git a/src/renderer/features/playlists/components/playlist-list-infinite-table.tsx b/src/renderer/features/playlists/components/playlist-list-infinite-table.tsx
index e1b72d686..cc9f3856b 100644
--- a/src/renderer/features/playlists/components/playlist-list-infinite-table.tsx
+++ b/src/renderer/features/playlists/components/playlist-list-infinite-table.tsx
@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
@@ -20,79 +19,73 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface PlaylistListInfiniteTableProps extends ItemListTableComponentProps<PlaylistListQuery> {}
 
-export const PlaylistListInfiniteTable = forwardRef<any, PlaylistListInfiniteTableProps>(
-    (
-        {
-            autoFitColumns = false,
-            columns,
-            enableAlternateRowColors = false,
-            enableHorizontalBorders = false,
-            enableRowHoverHighlight = true,
-            enableSelection = true,
-            enableVerticalBorders = false,
-            itemsPerPage = 100,
-            query = {
-                sortBy: PlaylistListSort.NAME,
-                sortOrder: SortOrder.ASC,
-            },
-            saveScrollOffset = true,
-            serverId,
-            size = 'default',
-        },
-        ref,
-    ) => {
-        const listCountQuery = playlistsQueries.listCount({
-            query: { ...query },
-            serverId: serverId,
-        }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
-
-        const listQueryFn = api.controller.getPlaylistList;
-
-        const { data, onRangeChanged } = useItemListInfiniteLoader({
-            eventKey: ItemListKey.PLAYLIST,
-            itemsPerPage,
-            itemType: LibraryItem.PLAYLIST,
-            listCountQuery,
-            listQueryFn,
-            query,
-            serverId,
-        });
-
-        const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
-            enabled: saveScrollOffset,
-        });
-
-        const { handleColumnReordered } = useItemListColumnReorder({
-            itemListKey: ItemListKey.PLAYLIST,
-        });
-
-        const { handleColumnResized } = useItemListColumnResize({
-            itemListKey: ItemListKey.PLAYLIST,
-        });
-
-        return (
-            <ItemTableList
-                autoFitColumns={autoFitColumns}
-                CellComponent={ItemTableListColumn}
-                columns={columns}
-                data={data}
-                enableAlternateRowColors={enableAlternateRowColors}
-                enableHorizontalBorders={enableHorizontalBorders}
-                enableRowHoverHighlight={enableRowHoverHighlight}
-                enableSelection={enableSelection}
-                enableVerticalBorders={enableVerticalBorders}
-                initialTop={{
-                    to: scrollOffset ?? 0,
-                    type: 'offset',
-                }}
-                itemType={LibraryItem.PLAYLIST}
-                onColumnReordered={handleColumnReordered}
-                onColumnResized={handleColumnResized}
-                onRangeChanged={onRangeChanged}
-                onScrollEnd={handleOnScrollEnd}
-                ref={ref}
-                size={size}
-            />
-        );
+export const PlaylistListInfiniteTable = ({
+    autoFitColumns = false,
+    columns,
+    enableAlternateRowColors = false,
+    enableHorizontalBorders = false,
+    enableRowHoverHighlight = true,
+    enableSelection = true,
+    enableVerticalBorders = false,
+    itemsPerPage = 100,
+    query = {
+        sortBy: PlaylistListSort.NAME,
+        sortOrder: SortOrder.ASC,
     },
-);
+    saveScrollOffset = true,
+    serverId,
+    size = 'default',
+}: PlaylistListInfiniteTableProps) => {
+    const listCountQuery = playlistsQueries.listCount({
+        query: { ...query },
+        serverId: serverId,
+    }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
+
+    const listQueryFn = api.controller.getPlaylistList;
+
+    const { data, onRangeChanged } = useItemListInfiniteLoader({
+        eventKey: ItemListKey.PLAYLIST,
+        itemsPerPage,
+        itemType: LibraryItem.PLAYLIST,
+        listCountQuery,
+        listQueryFn,
+        query,
+        serverId,
+    });
+
+    const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
+        enabled: saveScrollOffset,
+    });
+
+    const { handleColumnReordered } = useItemListColumnReorder({
+        itemListKey: ItemListKey.PLAYLIST,
+    });
+
+    const { handleColumnResized } = useItemListColumnResize({
+        itemListKey: ItemListKey.PLAYLIST,
+    });
+
+    return (
+        <ItemTableList
+            autoFitColumns={autoFitColumns}
+            CellComponent={ItemTableListColumn}
+            columns={columns}
+            data={data}
+            enableAlternateRowColors={enableAlternateRowColors}
+            enableHorizontalBorders={enableHorizontalBorders}
+            enableRowHoverHighlight={enableRowHoverHighlight}
+            enableSelection={enableSelection}
+            enableVerticalBorders={enableVerticalBorders}
+            initialTop={{
+                to: scrollOffset ?? 0,
+                type: 'offset',
+            }}
+            itemType={LibraryItem.PLAYLIST}
+            onColumnReordered={handleColumnReordered}
+            onColumnResized={handleColumnResized}
+            onRangeChanged={onRangeChanged}
+            onScrollEnd={handleOnScrollEnd}
+            size={size}
+        />
+    );
+};
diff --git a/src/renderer/features/playlists/components/playlist-list-paginated-grid.tsx b/src/renderer/features/playlists/components/playlist-list-paginated-grid.tsx
index 5fa723053..a41199dc9 100644
--- a/src/renderer/features/playlists/components/playlist-list-paginated-grid.tsx
+++ b/src/renderer/features/playlists/components/playlist-list-paginated-grid.tsx
@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -20,70 +19,64 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface PlaylistListPaginatedGridProps extends ItemListGridComponentProps<PlaylistListQuery> {}
 
-export const PlaylistListPaginatedGrid = forwardRef<any, PlaylistListPaginatedGridProps>(
-    (
-        {
-            gap = 'md',
-            itemsPerPage = 100,
-            itemsPerRow,
-            query = {
-                sortBy: PlaylistListSort.NAME,
-                sortOrder: SortOrder.ASC,
-            },
-            saveScrollOffset = true,
-            serverId,
-        },
-        ref,
-    ) => {
-        const listCountQuery = playlistsQueries.listCount({
-            query: { ...query },
-            serverId: serverId,
-        }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
-
-        const listQueryFn = api.controller.getPlaylistList;
-
-        const { currentPage, onChange } = useItemListPagination();
-
-        const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
-            currentPage,
-            eventKey: ItemListKey.PLAYLIST,
-            itemsPerPage,
-            itemType: LibraryItem.PLAYLIST,
-            listCountQuery,
-            listQueryFn,
-            query,
-            serverId,
-        });
-
-        const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
-            enabled: saveScrollOffset,
-        });
-
-        const rows = useGridRows(LibraryItem.PLAYLIST, ItemListKey.PLAYLIST);
-
-        return (
-            <ItemListWithPagination
-                currentPage={currentPage}
-                itemsPerPage={itemsPerPage}
-                onChange={onChange}
-                pageCount={pageCount}
-                totalItemCount={totalItemCount}
-            >
-                <ItemGridList
-                    currentPage={currentPage}
-                    data={data || []}
-                    gap={gap}
-                    initialTop={{
-                        to: scrollOffset ?? 0,
-                        type: 'offset',
-                    }}
-                    itemsPerRow={itemsPerRow}
-                    itemType={LibraryItem.PLAYLIST}
-                    onScrollEnd={handleOnScrollEnd}
-                    ref={ref}
-                    rows={rows}
-                />
-            </ItemListWithPagination>
-        );
+export const PlaylistListPaginatedGrid = ({
+    gap = 'md',
+    itemsPerPage = 100,
+    itemsPerRow,
+    query = {
+        sortBy: PlaylistListSort.NAME,
+        sortOrder: SortOrder.ASC,
     },
-);
+    saveScrollOffset = true,
+    serverId,
+}: PlaylistListPaginatedGridProps) => {
+    const listCountQuery = playlistsQueries.listCount({
+        query: { ...query },
+        serverId: serverId,
+    }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
+
+    const listQueryFn = api.controller.getPlaylistList;
+
+    const { currentPage, onChange } = useItemListPagination();
+
+    const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
+        currentPage,
+        eventKey: ItemListKey.PLAYLIST,
+        itemsPerPage,
+        itemType: LibraryItem.PLAYLIST,
+        listCountQuery,
+        listQueryFn,
+        query,
+        serverId,
+    });
+
+    const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
+        enabled: saveScrollOffset,
+    });
+
+    const rows = useGridRows(LibraryItem.PLAYLIST, ItemListKey.PLAYLIST);
+
+    return (
+        <ItemListWithPagination
+            currentPage={currentPage}
+            itemsPerPage={itemsPerPage}
+            onChange={onChange}
+            pageCount={pageCount}
+            totalItemCount={totalItemCount}
+        >
+            <ItemGridList
+                currentPage={currentPage}
+                data={data || []}
+                gap={gap}
+                initialTop={{
+                    to: scrollOffset ?? 0,
+                    type: 'offset',
+                }}
+                itemsPerRow={itemsPerRow}
+                itemType={LibraryItem.PLAYLIST}
+                onScrollEnd={handleOnScrollEnd}
+                rows={rows}
+            />
+        </ItemListWithPagination>
+    );
+};
diff --git a/src/renderer/features/playlists/components/playlist-list-paginated-table.tsx b/src/renderer/features/playlists/components/playlist-list-paginated-table.tsx
index a44912777..73968af14 100644
--- a/src/renderer/features/playlists/components/playlist-list-paginated-table.tsx
+++ b/src/renderer/features/playlists/components/playlist-list-paginated-table.tsx
@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -22,92 +21,86 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface PlaylistListPaginatedTableProps extends ItemListTableComponentProps<PlaylistListQuery> {}
 
-export const PlaylistListPaginatedTable = forwardRef<any, PlaylistListPaginatedTableProps>(
-    (
-        {
-            autoFitColumns = false,
-            columns,
-            enableAlternateRowColors = false,
-            enableHorizontalBorders = false,
-            enableRowHoverHighlight = true,
-            enableSelection = true,
-            enableVerticalBorders = false,
-            itemsPerPage = 100,
-            query = {
-                sortBy: PlaylistListSort.NAME,
-                sortOrder: SortOrder.ASC,
-            },
-            saveScrollOffset = true,
-            serverId,
-            size = 'default',
-        },
-        ref,
-    ) => {
-        const listCountQuery = playlistsQueries.listCount({
-            query: { ...query },
-            serverId: serverId,
-        }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
-
-        const listQueryFn = api.controller.getPlaylistList;
-
-        const { currentPage, onChange } = useItemListPagination();
-
-        const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
-            currentPage,
-            eventKey: ItemListKey.PLAYLIST,
-            itemsPerPage,
-            itemType: LibraryItem.PLAYLIST,
-            listCountQuery,
-            listQueryFn,
-            query,
-            serverId,
-        });
-
-        const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
-            enabled: saveScrollOffset,
-        });
-
-        const { handleColumnReordered } = useItemListColumnReorder({
-            itemListKey: ItemListKey.PLAYLIST,
-        });
-
-        const { handleColumnResized } = useItemListColumnResize({
-            itemListKey: ItemListKey.PLAYLIST,
-        });
-
-        const startRowIndex = currentPage * itemsPerPage;
-
-        return (
-            <ItemListWithPagination
-                currentPage={currentPage}
-                itemsPerPage={itemsPerPage}
-                onChange={onChange}
-                pageCount={pageCount}
-                totalItemCount={totalItemCount}
-            >
-                <ItemTableList
-                    autoFitColumns={autoFitColumns}
-                    CellComponent={ItemTableListColumn}
-                    columns={columns}
-                    data={data || []}
-                    enableAlternateRowColors={enableAlternateRowColors}
-                    enableHorizontalBorders={enableHorizontalBorders}
-                    enableRowHoverHighlight={enableRowHoverHighlight}
-                    enableSelection={enableSelection}
-                    enableVerticalBorders={enableVerticalBorders}
-                    initialTop={{
-                        to: scrollOffset ?? 0,
-                        type: 'offset',
-                    }}
-                    itemType={LibraryItem.PLAYLIST}
-                    onColumnReordered={handleColumnReordered}
-                    onColumnResized={handleColumnResized}
-                    onScrollEnd={handleOnScrollEnd}
-                    ref={ref}
-                    size={size}
-                    startRowIndex={startRowIndex}
-                />
-            </ItemListWithPagination>
-        );
+export const PlaylistListPaginatedTable = ({
+    autoFitColumns = false,
+    columns,
+    enableAlternateRowColors = false,
+    enableHorizontalBorders = false,
+    enableRowHoverHighlight = true,
+    enableSelection = true,
+    enableVerticalBorders = false,
+    itemsPerPage = 100,
+    query = {
+        sortBy: PlaylistListSort.NAME,
+        sortOrder: SortOrder.ASC,
     },
-);
+    saveScrollOffset = true,
+    serverId,
+    size = 'default',
+}: PlaylistListPaginatedTableProps) => {
+    const listCountQuery = playlistsQueries.listCount({
+        query: { ...query },
+        serverId: serverId,
+    }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
+
+    const listQueryFn = api.controller.getPlaylistList;
+
+    const { currentPage, onChange } = useItemListPagination();
+
+    const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
+        currentPage,
+        eventKey: ItemListKey.PLAYLIST,
+        itemsPerPage,
+        itemType: LibraryItem.PLAYLIST,
+        listCountQuery,
+        listQueryFn,
+        query,
+        serverId,
+    });
+
+    const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
+        enabled: saveScrollOffset,
+    });
+
+    const { handleColumnReordered } = useItemListColumnReorder({
+        itemListKey: ItemListKey.PLAYLIST,
+    });
+
+    const { handleColumnResized } = useItemListColumnResize({
+        itemListKey: ItemListKey.PLAYLIST,
+    });
+
+    const startRowIndex = currentPage * itemsPerPage;
+
+    return (
+        <ItemListWithPagination
+            currentPage={currentPage}
+            itemsPerPage={itemsPerPage}
+            onChange={onChange}
+            pageCount={pageCount}
+            totalItemCount={totalItemCount}
+        >
+            <ItemTableList
+                autoFitColumns={autoFitColumns}
+                CellComponent={ItemTableListColumn}
+                columns={columns}
+                data={data || []}
+                enableAlternateRowColors={enableAlternateRowColors}
+                enableHorizontalBorders={enableHorizontalBorders}
+                enableRowHoverHighlight={enableRowHoverHighlight}
+                enableSelection={enableSelection}
+                enableVerticalBorders={enableVerticalBorders}
+                initialTop={{
+                    to: scrollOffset ?? 0,
+                    type: 'offset',
+                }}
+                itemType={LibraryItem.PLAYLIST}
+                onColumnReordered={handleColumnReordered}
+                onColumnResized={handleColumnResized}
+                onScrollEnd={handleOnScrollEnd}
+                size={size}
+                startRowIndex={startRowIndex}
+            />
+        </ItemListWithPagination>
+    );
+};
diff --git a/src/renderer/features/songs/components/song-list-infinite-grid.tsx b/src/renderer/features/songs/components/song-list-infinite-grid.tsx
index bf27ee0f3..f6a05dd2c 100644
--- a/src/renderer/features/songs/components/song-list-infinite-grid.tsx
+++ b/src/renderer/features/songs/components/song-list-infinite-grid.tsx
@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
@@ -13,55 +12,53 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface SongListInfiniteGridProps extends ItemListGridComponentProps<SongListQuery> {}
 
-export const SongListInfiniteGrid = forwardRef<any, SongListInfiniteGridProps>(
-    ({
-        gap = 'md',
-        itemsPerPage = 100,
-        itemsPerRow,
-        query = {
-            sortBy: SongListSort.NAME,
-            sortOrder: SortOrder.ASC,
-        },
-        saveScrollOffset = true,
-        serverId,
-    }) => {
-        const listCountQuery = songsQueries.listCount({
-            query: { ...query },
-            serverId: serverId,
-        }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
-
-        const listQueryFn = api.controller.getSongList;
-
-        const { data, onRangeChanged } = useItemListInfiniteLoader({
-            eventKey: ItemListKey.SONG,
-            itemsPerPage,
-            itemType: LibraryItem.SONG,
-            listCountQuery,
-            listQueryFn,
-            query,
-            serverId,
-        });
-
-        const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
-            enabled: saveScrollOffset,
-        });
-
-        const rows = useGridRows(LibraryItem.SONG, ItemListKey.SONG);
-
-        return (
-            <ItemGridList
-                data={data}
-                gap={gap}
-                initialTop={{
-                    to: scrollOffset ?? 0,
-                    type: 'offset',
-                }}
-                itemsPerRow={itemsPerRow}
-                itemType={LibraryItem.SONG}
-                onRangeChanged={onRangeChanged}
-                onScrollEnd={handleOnScrollEnd}
-                rows={rows}
-            />
-        );
+export const SongListInfiniteGrid = ({
+    gap = 'md',
+    itemsPerPage = 100,
+    itemsPerRow,
+    query = {
+        sortBy: SongListSort.NAME,
+        sortOrder: SortOrder.ASC,
     },
-);
+    saveScrollOffset = true,
+    serverId,
+}: SongListInfiniteGridProps) => {
+    const listCountQuery = songsQueries.listCount({
+        query: { ...query },
+        serverId: serverId,
+    }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
+
+    const listQueryFn = api.controller.getSongList;
+
+    const { data, onRangeChanged } = useItemListInfiniteLoader({
+        eventKey: ItemListKey.SONG,
+        itemsPerPage,
+        itemType: LibraryItem.SONG,
+        listCountQuery,
+        listQueryFn,
+        query,
+        serverId,
+    });
+
+    const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
+        enabled: saveScrollOffset,
+    });
+
+    const rows = useGridRows(LibraryItem.SONG, ItemListKey.SONG);
+
+    return (
+        <ItemGridList
+            data={data}
+            gap={gap}
+            initialTop={{
+                to: scrollOffset ?? 0,
+                type: 'offset',
+            }}
+            itemsPerRow={itemsPerRow}
+            itemType={LibraryItem.SONG}
+            onRangeChanged={onRangeChanged}
+            onScrollEnd={handleOnScrollEnd}
+            rows={rows}
+        />
+    );
+};
diff --git a/src/renderer/features/songs/components/song-list-infinite-table.tsx b/src/renderer/features/songs/components/song-list-infinite-table.tsx
index e9ba3c0ec..992b47fa1 100644
--- a/src/renderer/features/songs/components/song-list-infinite-table.tsx
+++ b/src/renderer/features/songs/components/song-list-infinite-table.tsx
@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
@@ -15,80 +14,74 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface SongListInfiniteTableProps extends ItemListTableComponentProps<SongListQuery> {}
 
-export const SongListInfiniteTable = forwardRef<any, SongListInfiniteTableProps>(
-    (
-        {
-            autoFitColumns = false,
-            columns,
-            enableAlternateRowColors = false,
-            enableHorizontalBorders = false,
-            enableRowHoverHighlight = true,
-            enableSelection = true,
-            enableVerticalBorders = false,
-            itemsPerPage = 100,
-            query = {
-                sortBy: SongListSort.NAME,
-                sortOrder: SortOrder.ASC,
-            },
-            saveScrollOffset = true,
-            serverId,
-            size = 'default',
-        },
-        ref,
-    ) => {
-        const listCountQuery = songsQueries.listCount({
-            query: { ...query },
-            serverId: serverId,
-        }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
-
-        const listQueryFn = api.controller.getSongList;
-
-        const { data, onRangeChanged } = useItemListInfiniteLoader({
-            eventKey: ItemListKey.SONG,
-            itemsPerPage,
-            itemType: LibraryItem.SONG,
-            listCountQuery,
-            listQueryFn,
-            query,
-            serverId,
-        });
-
-        const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
-            enabled: saveScrollOffset,
-        });
-
-        const { handleColumnReordered } = useItemListColumnReorder({
-            itemListKey: ItemListKey.SONG,
-        });
-
-        const { handleColumnResized } = useItemListColumnResize({
-            itemListKey: ItemListKey.SONG,
-        });
-
-        return (
-            <ItemTableList
-                autoFitColumns={autoFitColumns}
-                CellComponent={ItemTableListColumn}
-                columns={columns}
-                data={data}
-                enableAlternateRowColors={enableAlternateRowColors}
-                enableExpansion={false}
-                enableHorizontalBorders={enableHorizontalBorders}
-                enableRowHoverHighlight={enableRowHoverHighlight}
-                enableSelection={enableSelection}
-                enableVerticalBorders={enableVerticalBorders}
-                initialTop={{
-                    to: scrollOffset ?? 0,
-                    type: 'offset',
-                }}
-                itemType={LibraryItem.SONG}
-                onColumnReordered={handleColumnReordered}
-                onColumnResized={handleColumnResized}
-                onRangeChanged={onRangeChanged}
-                onScrollEnd={handleOnScrollEnd}
-                ref={ref}
-                size={size}
-            />
-        );
+export const SongListInfiniteTable = ({
+    autoFitColumns = false,
+    columns,
+    enableAlternateRowColors = false,
+    enableHorizontalBorders = false,
+    enableRowHoverHighlight = true,
+    enableSelection = true,
+    enableVerticalBorders = false,
+    itemsPerPage = 100,
+    query = {
+        sortBy: SongListSort.NAME,
+        sortOrder: SortOrder.ASC,
     },
-);
+    saveScrollOffset = true,
+    serverId,
+    size = 'default',
+}: SongListInfiniteTableProps) => {
+    const listCountQuery = songsQueries.listCount({
+        query: { ...query },
+        serverId: serverId,
+    }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
+
+    const listQueryFn = api.controller.getSongList;
+
+    const { data, onRangeChanged } = useItemListInfiniteLoader({
+        eventKey: ItemListKey.SONG,
+        itemsPerPage,
+        itemType: LibraryItem.SONG,
+        listCountQuery,
+        listQueryFn,
+        query,
+        serverId,
+    });
+
+    const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
+        enabled: saveScrollOffset,
+    });
+
+    const { handleColumnReordered } = useItemListColumnReorder({
+        itemListKey: ItemListKey.SONG,
+    });
+
+    const { handleColumnResized } = useItemListColumnResize({
+        itemListKey: ItemListKey.SONG,
+    });
+
+    return (
+        <ItemTableList
+            autoFitColumns={autoFitColumns}
+            CellComponent={ItemTableListColumn}
+            columns={columns}
+            data={data}
+            enableAlternateRowColors={enableAlternateRowColors}
+            enableExpansion={false}
+            enableHorizontalBorders={enableHorizontalBorders}
+            enableRowHoverHighlight={enableRowHoverHighlight}
+            enableSelection={enableSelection}
+            enableVerticalBorders={enableVerticalBorders}
+            initialTop={{
+                to: scrollOffset ?? 0,
+                type: 'offset',
+            }}
+            itemType={LibraryItem.SONG}
+            onColumnReordered={handleColumnReordered}
+            onColumnResized={handleColumnResized}
+            onRangeChanged={onRangeChanged}
+            onScrollEnd={handleOnScrollEnd}
+            size={size}
+        />
+    );
+};
diff --git a/src/renderer/features/songs/components/song-list-paginated-grid.tsx b/src/renderer/features/songs/components/song-list-paginated-grid.tsx
index 73529a669..9051fd0fe 100644
--- a/src/renderer/features/songs/components/song-list-paginated-grid.tsx
+++ b/src/renderer/features/songs/components/song-list-paginated-grid.tsx
@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -14,60 +13,54 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface SongListPaginatedGridProps extends ItemListGridComponentProps<SongListQuery> {}
 
-export const SongListPaginatedGrid = forwardRef<any, SongListPaginatedGridProps>(
-    (
-        {
-            gap = 'md',
-            itemsPerPage = 100,
-            itemsPerRow,
-            query = {
-                sortBy: SongListSort.NAME,
-                sortOrder: SortOrder.ASC,
-            },
-            serverId,
-        },
-        ref,
-    ) => {
-        const listCountQuery = songsQueries.listCount({
-            query: { ...query },
-            serverId: serverId,
-        }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
-
-        const listQueryFn = api.controller.getSongList;
-
-        const { currentPage, onChange } = useItemListPagination();
-
-        const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
-            currentPage,
-            eventKey: ItemListKey.SONG,
-            itemsPerPage,
-            itemType: LibraryItem.SONG,
-            listCountQuery,
-            listQueryFn,
-            query,
-            serverId,
-        });
-
-        const rows = useGridRows(LibraryItem.SONG, ItemListKey.SONG);
-
-        return (
-            <ItemListWithPagination
-                currentPage={currentPage}
-                itemsPerPage={itemsPerPage}
-                onChange={onChange}
-                pageCount={pageCount}
-                totalItemCount={totalItemCount}
-            >
-                <ItemGridList
-                    currentPage={currentPage}
-                    data={data || []}
-                    gap={gap}
-                    itemsPerRow={itemsPerRow}
-                    itemType={LibraryItem.SONG}
-                    ref={ref}
-                    rows={rows}
-                />
-            </ItemListWithPagination>
-        );
+export const SongListPaginatedGrid = ({
+    gap = 'md',
+    itemsPerPage = 100,
+    itemsPerRow,
+    query = {
+        sortBy: SongListSort.NAME,
+        sortOrder: SortOrder.ASC,
     },
-);
+    serverId,
+}: SongListPaginatedGridProps) => {
+    const listCountQuery = songsQueries.listCount({
+        query: { ...query },
+        serverId: serverId,
+    }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
+
+    const listQueryFn = api.controller.getSongList;
+
+    const { currentPage, onChange } = useItemListPagination();
+
+    const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
+        currentPage,
+        eventKey: ItemListKey.SONG,
+        itemsPerPage,
+        itemType: LibraryItem.SONG,
+        listCountQuery,
+        listQueryFn,
+        query,
+        serverId,
+    });
+
+    const rows = useGridRows(LibraryItem.SONG, ItemListKey.SONG);
+
+    return (
+        <ItemListWithPagination
+            currentPage={currentPage}
+            itemsPerPage={itemsPerPage}
+            onChange={onChange}
+            pageCount={pageCount}
+            totalItemCount={totalItemCount}
+        >
+            <ItemGridList
+                currentPage={currentPage}
+                data={data || []}
+                gap={gap}
+                itemsPerRow={itemsPerRow}
+                itemType={LibraryItem.SONG}
+                rows={rows}
+            />
+        </ItemListWithPagination>
+    );
+};
diff --git a/src/renderer/features/songs/components/song-list-paginated-table.tsx b/src/renderer/features/songs/components/song-list-paginated-table.tsx
index a7186ddba..58db85b18 100644
--- a/src/renderer/features/songs/components/song-list-paginated-table.tsx
+++ b/src/renderer/features/songs/components/song-list-paginated-table.tsx
@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
 import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -17,93 +16,87 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface SongListPaginatedTableProps extends ItemListTableComponentProps<SongListQuery> {}
 
-export const SongListPaginatedTable = forwardRef<any, SongListPaginatedTableProps>(
-    (
-        {
-            autoFitColumns = false,
-            columns,
-            enableAlternateRowColors = false,
-            enableHorizontalBorders = false,
-            enableRowHoverHighlight = true,
-            enableSelection = true,
-            enableVerticalBorders = false,
-            itemsPerPage = 100,
-            query = {
-                sortBy: SongListSort.NAME,
-                sortOrder: SortOrder.ASC,
-            },
-            saveScrollOffset = true,
-            serverId,
-            size = 'default',
-        },
-        ref,
-    ) => {
-        const listCountQuery = songsQueries.listCount({
-            query: { ...query },
-            serverId: serverId,
-        }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
-
-        const listQueryFn = api.controller.getSongList;
-
-        const { currentPage, onChange } = useItemListPagination();
-
-        const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
-            currentPage,
-            eventKey: ItemListKey.SONG,
-            itemsPerPage,
-            itemType: LibraryItem.SONG,
-            listCountQuery,
-            listQueryFn,
-            query,
-            serverId,
-        });
-
-        const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
-            enabled: saveScrollOffset,
-        });
-
-        const { handleColumnReordered } = useItemListColumnReorder({
-            itemListKey: ItemListKey.SONG,
-        });
-
-        const { handleColumnResized } = useItemListColumnResize({
-            itemListKey: ItemListKey.SONG,
-        });
-
-        const startRowIndex = currentPage * itemsPerPage;
-
-        return (
-            <ItemListWithPagination
-                currentPage={currentPage}
-                itemsPerPage={itemsPerPage}
-                onChange={onChange}
-                pageCount={pageCount}
-                totalItemCount={totalItemCount}
-            >
-                <ItemTableList
-                    autoFitColumns={autoFitColumns}
-                    CellComponent={ItemTableListColumn}
-                    columns={columns}
-                    data={data || []}
-                    enableAlternateRowColors={enableAlternateRowColors}
-                    enableExpansion={false}
-                    enableHorizontalBorders={enableHorizontalBorders}
-                    enableRowHoverHighlight={enableRowHoverHighlight}
-                    enableSelection={enableSelection}
-                    enableVerticalBorders={enableVerticalBorders}
-                    initialTop={{
-                        to: scrollOffset ?? 0,
-                        type: 'offset',
-                    }}
-                    itemType={LibraryItem.SONG}
-                    onColumnReordered={handleColumnReordered}
-                    onColumnResized={handleColumnResized}
-                    onScrollEnd={handleOnScrollEnd}
-                    ref={ref}
-                    size={size}
-                    startRowIndex={startRowIndex}
-                />
-            </ItemListWithPagination>
-        );
+export const SongListPaginatedTable = ({
+    autoFitColumns = false,
+    columns,
+    enableAlternateRowColors = false,
+    enableHorizontalBorders = false,
+    enableRowHoverHighlight = true,
+    enableSelection = true,
+    enableVerticalBorders = false,
+    itemsPerPage = 100,
+    query = {
+        sortBy: SongListSort.NAME,
+        sortOrder: SortOrder.ASC,
     },
-);
+    saveScrollOffset = true,
+    serverId,
+    size = 'default',
+}: SongListPaginatedTableProps) => {
+    const listCountQuery = songsQueries.listCount({
+        query: { ...query },
+        serverId: serverId,
+    }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
+
+    const listQueryFn = api.controller.getSongList;
+
+    const { currentPage, onChange } = useItemListPagination();
+
+    const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
+        currentPage,
+        eventKey: ItemListKey.SONG,
+        itemsPerPage,
+        itemType: LibraryItem.SONG,
+        listCountQuery,
+        listQueryFn,
+        query,
+        serverId,
+    });
+
+    const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
+        enabled: saveScrollOffset,
+    });
+
+    const { handleColumnReordered } = useItemListColumnReorder({
+        itemListKey: ItemListKey.SONG,
+    });
+
+    const { handleColumnResized } = useItemListColumnResize({
+        itemListKey: ItemListKey.SONG,
+    });
+
+    const startRowIndex = currentPage * itemsPerPage;
+
+    return (
+        <ItemListWithPagination
+            currentPage={currentPage}
+            itemsPerPage={itemsPerPage}
+            onChange={onChange}
+            pageCount={pageCount}
+            totalItemCount={totalItemCount}
+        >
+            <ItemTableList
+                autoFitColumns={autoFitColumns}
+                CellComponent={ItemTableListColumn}
+                columns={columns}
+                data={data || []}
+                enableAlternateRowColors={enableAlternateRowColors}
+                enableExpansion={false}
+                enableHorizontalBorders={enableHorizontalBorders}
+                enableRowHoverHighlight={enableRowHoverHighlight}
+                enableSelection={enableSelection}
+                enableVerticalBorders={enableVerticalBorders}
+                initialTop={{
+                    to: scrollOffset ?? 0,
+                    type: 'offset',
+                }}
+                itemType={LibraryItem.SONG}
+                onColumnReordered={handleColumnReordered}
+                onColumnResized={handleColumnResized}
+                onScrollEnd={handleOnScrollEnd}
+                size={size}
+                startRowIndex={startRowIndex}
+            />
+        </ItemListWithPagination>
+    );
+};