diff --git a/src/renderer/components/item-list/item-detail-list/item-detail-list.tsx b/src/renderer/components/item-list/item-detail-list/item-detail-list.tsx
index 5496af72d..572b1caa2 100644
--- a/src/renderer/components/item-list/item-detail-list/item-detail-list.tsx
+++ b/src/renderer/components/item-list/item-detail-list/item-detail-list.tsx
@@ -1,4 +1,3 @@
-import { useElementSize, useMergedRef } from '@mantine/hooks';
 import { throttle } from 'lodash';
 import { AnimatePresence, motion, Variants } from 'motion/react';
 import { useOverlayScrollbars } from 'overlayscrollbars-react';
@@ -20,6 +19,8 @@ import styles from './item-detail-list.module.css';
 import { ItemDetail } from '/@/renderer/components/item-detail/item-detail';
 import { ExpandedListItem } from '/@/renderer/components/item-list/expanded-list-item';
 import { useItemListState } from '/@/renderer/components/item-list/helpers/item-list-state';
+import { useElementSize } from '/@/shared/hooks/use-element-size';
+import { useMergedRef } from '/@/shared/hooks/use-merged-ref';
 import { LibraryItem } from '/@/shared/types/domain-types';
 
 export interface ItemDetailListProps {
@@ -123,9 +124,9 @@ export const ItemDetailList = ({
         (_e: MouseEvent<HTMLDivElement>, item: unknown, itemType: LibraryItem) => {
             if (item && typeof item === 'object' && 'id' in item && 'serverId' in item) {
                 internalState.toggleExpanded({
+                    _serverId: item.serverId as string,
                     id: item.id as string,
                     itemType: itemType,
-                    _serverId: item.serverId as string,
                 });
             }
         },
diff --git a/src/renderer/components/item-list/item-grid-list/item-grid-list.tsx b/src/renderer/components/item-list/item-grid-list/item-grid-list.tsx
index d7ebb3a37..1478e6433 100644
--- a/src/renderer/components/item-list/item-grid-list/item-grid-list.tsx
+++ b/src/renderer/components/item-list/item-grid-list/item-grid-list.tsx
@@ -1,4 +1,3 @@
-import { useElementSize, useMergedRef } from '@mantine/hooks';
 import clsx from 'clsx';
 import throttle from 'lodash/throttle';
 import { AnimatePresence } from 'motion/react';
@@ -42,6 +41,8 @@ import {
     useItemListState,
 } from '/@/renderer/components/item-list/helpers/item-list-state';
 import { ItemControls, ItemListHandle } from '/@/renderer/components/item-list/types';
+import { useElementSize } from '/@/shared/hooks/use-element-size';
+import { useMergedRef } from '/@/shared/hooks/use-merged-ref';
 import { LibraryItem } from '/@/shared/types/domain-types';
 
 interface VirtualizedGridListProps {
diff --git a/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx b/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx
index f7819137f..67d13be3b 100644
--- a/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx
+++ b/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx
@@ -9,7 +9,6 @@ import {
     dropTargetForElements,
 } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
-import { useMergedRef } from '@mantine/hooks';
 import clsx from 'clsx';
 import React, { CSSProperties, ReactElement, ReactNode, useEffect, useRef, useState } from 'react';
 import { CellComponentProps } from 'react-window-v2';
@@ -48,6 +47,7 @@ import { Icon } from '/@/shared/components/icon/icon';
 import { Skeleton } from '/@/shared/components/skeleton/skeleton';
 import { Text } from '/@/shared/components/text/text';
 import { useDoubleClick } from '/@/shared/hooks/use-double-click';
+import { useMergedRef } from '/@/shared/hooks/use-merged-ref';
 import { LibraryItem, QueueSong, Song } from '/@/shared/types/domain-types';
 import {
     dndUtils,
diff --git a/src/renderer/components/item-list/item-table-list/item-table-list.tsx b/src/renderer/components/item-list/item-table-list/item-table-list.tsx
index 05e5d3029..e8a6f5260 100644
--- a/src/renderer/components/item-list/item-table-list/item-table-list.tsx
+++ b/src/renderer/components/item-list/item-table-list/item-table-list.tsx
@@ -1,7 +1,6 @@
 // Component adapted from https://github.com/bvaughn/react-window/issues/826
 
 import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
-import { useMergedRef } from '@mantine/hooks';
 import clsx from 'clsx';
 import { AnimatePresence } from 'motion/react';
 import { useOverlayScrollbars } from 'overlayscrollbars-react';
@@ -39,6 +38,7 @@ import {
     ItemTableListColumnConfig,
 } from '/@/renderer/components/item-list/types';
 import { PlayerContext, usePlayer } from '/@/renderer/features/player/context/player-context';
+import { useMergedRef } from '/@/shared/hooks/use-merged-ref';
 import { LibraryItem } from '/@/shared/types/domain-types';
 import { TableColumn } from '/@/shared/types/types';
 
diff --git a/src/renderer/components/native-scroll-area/native-scroll-area.tsx b/src/renderer/components/native-scroll-area/native-scroll-area.tsx
index 254271c6e..6164edcda 100644
--- a/src/renderer/components/native-scroll-area/native-scroll-area.tsx
+++ b/src/renderer/components/native-scroll-area/native-scroll-area.tsx
@@ -1,4 +1,3 @@
-import { useMergedRef } from '@mantine/hooks';
 import { useInView } from 'motion/react';
 import { useOverlayScrollbars } from 'overlayscrollbars-react';
 import { CSSProperties, forwardRef, ReactNode, Ref, useEffect, useRef, useState } from 'react';
@@ -7,6 +6,7 @@ import styles from './native-scroll-area.module.css';
 
 import { PageHeader, PageHeaderProps } from '/@/renderer/components/page-header/page-header';
 import { useWindowSettings } from '/@/renderer/store/settings.store';
+import { useMergedRef } from '/@/shared/hooks/use-merged-ref';
 import { Platform } from '/@/shared/types/types';
 
 interface NativeScrollAreaProps {
diff --git a/src/renderer/features/albums/components/expanded-album-list-item.tsx b/src/renderer/features/albums/components/expanded-album-list-item.tsx
index 5a0a26dee..d1ef0b91e 100644
--- a/src/renderer/features/albums/components/expanded-album-list-item.tsx
+++ b/src/renderer/features/albums/components/expanded-album-list-item.tsx
@@ -1,4 +1,3 @@
-import { useMergedRef } from '@mantine/hooks';
 import { useSuspenseQuery } from '@tanstack/react-query';
 import clsx from 'clsx';
 import formatDuration from 'format-duration';
@@ -25,6 +24,7 @@ import { Separator } from '/@/shared/components/separator/separator';
 import { Spinner } from '/@/shared/components/spinner/spinner';
 import { TextTitle } from '/@/shared/components/text-title/text-title';
 import { Text } from '/@/shared/components/text/text';
+import { useMergedRef } from '/@/shared/hooks/use-merged-ref';
 import { LibraryItem, Song } from '/@/shared/types/domain-types';
 import { DragOperation, DragTarget, DragTargetMap } from '/@/shared/types/drag-and-drop';
 
diff --git a/src/renderer/features/lyrics/components/lyrics-search-form.tsx b/src/renderer/features/lyrics/components/lyrics-search-form.tsx
index ad6c5779a..5cd5e0d66 100644
--- a/src/renderer/features/lyrics/components/lyrics-search-form.tsx
+++ b/src/renderer/features/lyrics/components/lyrics-search-form.tsx
@@ -1,5 +1,4 @@
 import { useForm } from '@mantine/form';
-import { useDebouncedValue } from '@mantine/hooks';
 import { openModal } from '@mantine/modals';
 import { useQuery } from '@tanstack/react-query';
 import orderBy from 'lodash/orderBy';
@@ -17,6 +16,7 @@ import { Spinner } from '/@/shared/components/spinner/spinner';
 import { Stack } from '/@/shared/components/stack/stack';
 import { TextInput } from '/@/shared/components/text-input/text-input';
 import { Text } from '/@/shared/components/text/text';
+import { useDebouncedValue } from '/@/shared/hooks/use-debounced-value';
 import {
     InternetProviderLyricSearchResponse,
     LyricSource,
diff --git a/src/renderer/features/now-playing/components/play-queue.tsx b/src/renderer/features/now-playing/components/play-queue.tsx
index 3dc50314c..6daadb5f8 100644
--- a/src/renderer/features/now-playing/components/play-queue.tsx
+++ b/src/renderer/features/now-playing/components/play-queue.tsx
@@ -1,4 +1,3 @@
-import { useDebouncedValue, useMergedRef } from '@mantine/hooks';
 import clsx from 'clsx';
 import { forwardRef, ReactElement, useEffect, useMemo, useRef, useState } from 'react';
 
@@ -25,6 +24,8 @@ import { searchSongs } from '/@/renderer/utils/search-songs';
 import { Flex } from '/@/shared/components/flex/flex';
 import { LoadingOverlay } from '/@/shared/components/loading-overlay/loading-overlay';
 import { Text } from '/@/shared/components/text/text';
+import { useDebouncedValue } from '/@/shared/hooks/use-debounced-value';
+import { useMergedRef } from '/@/shared/hooks/use-merged-ref';
 import { LibraryItem, QueueSong, Song } from '/@/shared/types/domain-types';
 import { DragTarget } from '/@/shared/types/drag-and-drop';
 import { ItemListKey, Play, PlayerQueueType } from '/@/shared/types/types';
diff --git a/src/renderer/features/player/components/full-screen-player-image.tsx b/src/renderer/features/player/components/full-screen-player-image.tsx
index e3242ae7c..b5f4ddf2f 100644
--- a/src/renderer/features/player/components/full-screen-player-image.tsx
+++ b/src/renderer/features/player/components/full-screen-player-image.tsx
@@ -1,4 +1,3 @@
-import { useSetState } from '@mantine/hooks';
 import clsx from 'clsx';
 import { AnimatePresence, HTMLMotionProps, motion, Variants } from 'motion/react';
 import { Fragment, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
@@ -18,6 +17,7 @@ import { Group } from '/@/shared/components/group/group';
 import { Icon } from '/@/shared/components/icon/icon';
 import { Stack } from '/@/shared/components/stack/stack';
 import { Text } from '/@/shared/components/text/text';
+import { useSetState } from '/@/shared/hooks/use-set-state';
 import { PlayerData, QueueSong } from '/@/shared/types/domain-types';
 
 const imageVariants: Variants = {
diff --git a/src/renderer/features/player/components/full-screen-player.tsx b/src/renderer/features/player/components/full-screen-player.tsx
index a2d9ae7ac..2bc0cca98 100644
--- a/src/renderer/features/player/components/full-screen-player.tsx
+++ b/src/renderer/features/player/components/full-screen-player.tsx
@@ -1,4 +1,3 @@
-import { useHotkeys } from '@mantine/hooks';
 import { motion, Variants } from 'motion/react';
 import { CSSProperties, useLayoutEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -27,6 +26,7 @@ import { Popover } from '/@/shared/components/popover/popover';
 import { Select } from '/@/shared/components/select/select';
 import { Slider } from '/@/shared/components/slider/slider';
 import { Switch } from '/@/shared/components/switch/switch';
+import { useHotkeys } from '/@/shared/hooks/use-hotkeys';
 import { Platform } from '/@/shared/types/types';
 
 const mainBackground = 'var(--theme-colors-background)';
diff --git a/src/renderer/features/player/components/left-controls.tsx b/src/renderer/features/player/components/left-controls.tsx
index 6e024c005..07d061030 100644
--- a/src/renderer/features/player/components/left-controls.tsx
+++ b/src/renderer/features/player/components/left-controls.tsx
@@ -1,4 +1,3 @@
-import { useHotkeys } from '@mantine/hooks';
 import clsx from 'clsx';
 import { AnimatePresence, LayoutGroup, motion } from 'motion/react';
 import React, { MouseEvent } from 'react';
@@ -24,6 +23,7 @@ import { Separator } from '/@/shared/components/separator/separator';
 import { Text } from '/@/shared/components/text/text';
 import { Tooltip } from '/@/shared/components/tooltip/tooltip';
 import { PlaybackSelectors } from '/@/shared/constants/playback-selectors';
+import { useHotkeys } from '/@/shared/hooks/use-hotkeys';
 import { LibraryItem } from '/@/shared/types/domain-types';
 
 export const LeftControls = () => {
diff --git a/src/renderer/features/player/components/right-controls.tsx b/src/renderer/features/player/components/right-controls.tsx
index e27a1f2c4..9bf6400d4 100644
--- a/src/renderer/features/player/components/right-controls.tsx
+++ b/src/renderer/features/player/components/right-controls.tsx
@@ -1,4 +1,3 @@
-import { useHotkeys, useMediaQuery } from '@mantine/hooks';
 import { useCallback, WheelEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -23,6 +22,8 @@ import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
 import { Flex } from '/@/shared/components/flex/flex';
 import { Group } from '/@/shared/components/group/group';
 import { Rating } from '/@/shared/components/rating/rating';
+import { useHotkeys } from '/@/shared/hooks/use-hotkeys';
+import { useMediaQuery } from '/@/shared/hooks/use-media-query';
 import { LibraryItem, QueueSong, ServerType } from '/@/shared/types/domain-types';
 
 const calculateVolumeUp = (volume: number, volumeWheelStep: number) => {
diff --git a/src/renderer/features/search/components/command-palette.tsx b/src/renderer/features/search/components/command-palette.tsx
index 55aec4216..dd0b1caab 100644
--- a/src/renderer/features/search/components/command-palette.tsx
+++ b/src/renderer/features/search/components/command-palette.tsx
@@ -1,4 +1,3 @@
-import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { useQuery } from '@tanstack/react-query';
 import { Fragment, useCallback, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -23,6 +22,8 @@ import { Kbd } from '/@/shared/components/kbd/kbd';
 import { Modal } from '/@/shared/components/modal/modal';
 import { Spinner } from '/@/shared/components/spinner/spinner';
 import { TextInput } from '/@/shared/components/text-input/text-input';
+import { useDebouncedValue } from '/@/shared/hooks/use-debounced-value';
+import { useDisclosure } from '/@/shared/hooks/use-disclosure';
 import { LibraryItem } from '/@/shared/types/domain-types';
 
 interface CommandPaletteProps {
diff --git a/src/renderer/features/servers/components/add-server-form.tsx b/src/renderer/features/servers/components/add-server-form.tsx
index 4c49a85e7..127d8deae 100644
--- a/src/renderer/features/servers/components/add-server-form.tsx
+++ b/src/renderer/features/servers/components/add-server-form.tsx
@@ -1,5 +1,4 @@
 import { useForm } from '@mantine/form';
-import { useFocusTrap } from '@mantine/hooks';
 import { closeAllModals } from '@mantine/modals';
 import isElectron from 'is-electron';
 import { nanoid } from 'nanoid/non-secure';
@@ -21,6 +20,7 @@ import { Stack } from '/@/shared/components/stack/stack';
 import { TextInput } from '/@/shared/components/text-input/text-input';
 import { Text } from '/@/shared/components/text/text';
 import { toast } from '/@/shared/components/toast/toast';
+import { useFocusTrap } from '/@/shared/hooks/use-focus-trap';
 import { AuthenticationResponse, ServerListItemWithCredential } from '/@/shared/types/domain-types';
 import { DiscoveredServerItem, ServerType, toServerType } from '/@/shared/types/types';
 
diff --git a/src/renderer/features/servers/components/edit-server-form.tsx b/src/renderer/features/servers/components/edit-server-form.tsx
index 9f8c02568..365fcbf39 100644
--- a/src/renderer/features/servers/components/edit-server-form.tsx
+++ b/src/renderer/features/servers/components/edit-server-form.tsx
@@ -1,5 +1,4 @@
 import { useForm } from '@mantine/form';
-import { useFocusTrap } from '@mantine/hooks';
 import { closeAllModals } from '@mantine/modals';
 import isElectron from 'is-electron';
 import { useState } from 'react';
@@ -18,6 +17,7 @@ import { Stack } from '/@/shared/components/stack/stack';
 import { TextInput } from '/@/shared/components/text-input/text-input';
 import { toast } from '/@/shared/components/toast/toast';
 import { Tooltip } from '/@/shared/components/tooltip/tooltip';
+import { useFocusTrap } from '/@/shared/hooks/use-focus-trap';
 import {
     AuthenticationResponse,
     ServerListItem,
diff --git a/src/renderer/features/servers/components/server-list-item.tsx b/src/renderer/features/servers/components/server-list-item.tsx
index 112263c17..b9852a7a4 100644
--- a/src/renderer/features/servers/components/server-list-item.tsx
+++ b/src/renderer/features/servers/components/server-list-item.tsx
@@ -1,4 +1,3 @@
-import { useDisclosure } from '@mantine/hooks';
 import isElectron from 'is-electron';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -12,6 +11,7 @@ import { Group } from '/@/shared/components/group/group';
 import { Icon } from '/@/shared/components/icon/icon';
 import { Stack } from '/@/shared/components/stack/stack';
 import { Table } from '/@/shared/components/table/table';
+import { useDisclosure } from '/@/shared/hooks/use-disclosure';
 import { ServerListItem as ServerItem } from '/@/shared/types/domain-types';
 
 const localSettings = isElectron() ? window.api.localSettings : null;
diff --git a/src/renderer/features/shared/components/grid-config.tsx b/src/renderer/features/shared/components/grid-config.tsx
index 2463e9868..09829679f 100644
--- a/src/renderer/features/shared/components/grid-config.tsx
+++ b/src/renderer/features/shared/components/grid-config.tsx
@@ -9,9 +9,8 @@ import {
     dropTargetForElements,
 } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
-import { useDebouncedState } from '@mantine/hooks';
 import clsx from 'clsx';
-import Fuse from 'fuse.js';
+import Fuse, { FuseResultMatch } from 'fuse.js';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -35,6 +34,7 @@ import { Slider } from '/@/shared/components/slider/slider';
 import { Stack } from '/@/shared/components/stack/stack';
 import { TextInput } from '/@/shared/components/text-input/text-input';
 import { Text } from '/@/shared/components/text/text';
+import { useDebouncedState } from '/@/shared/hooks/use-debounced-state';
 import { dndUtils, DragData, DragOperation, DragTarget } from '/@/shared/types/drag-and-drop';
 import { ItemListKey, ListPaginationType } from '/@/shared/types/types';
 
@@ -239,7 +239,7 @@ export const GridConfig = ({
                 };
             })
             .filter(
-                (option): option is typeof allOptions[0] & { disabled?: boolean } =>
+                (option): option is (typeof allOptions)[0] & { disabled: boolean } =>
                     option !== null,
             );
     }, [list, t, grid, extraOptions, optionsConfig, setList, listKey]);
@@ -433,7 +433,11 @@ const GridRowConfig = ({
     );
 };
 
-const DragHandle = ({ dragHandleRef }: { dragHandleRef: React.RefObject<HTMLButtonElement> }) => {
+const DragHandle = ({
+    dragHandleRef,
+}: {
+    dragHandleRef: React.RefObject<HTMLButtonElement | null>;
+}) => {
     return (
         <ActionIcon
             icon="dragVertical"
@@ -470,11 +474,11 @@ const GridRowItem = memo(
         handleReorder: (idFrom: string, idTo: string, edge: Edge | null) => void;
         item: ItemGridListRowConfig;
         label: string;
-        matches: null | readonly Fuse.FuseResultMatch[];
+        matches: null | readonly FuseResultMatch[];
     }) => {
         const { t } = useTranslation();
         const ref = useRef<HTMLDivElement>(null);
-        const dragHandleRef = useRef<HTMLButtonElement>(null);
+        const dragHandleRef = useRef<HTMLButtonElement | null>(null);
         const [isDragging, setIsDragging] = useState(false);
         const [isDraggedOver, setIsDraggedOver] = useState<Edge | null>(null);
 
diff --git a/src/renderer/features/shared/components/search-input.tsx b/src/renderer/features/shared/components/search-input.tsx
index a26864da8..b07ad8612 100644
--- a/src/renderer/features/shared/components/search-input.tsx
+++ b/src/renderer/features/shared/components/search-input.tsx
@@ -1,4 +1,3 @@
-import { useHotkeys } from '@mantine/hooks';
 import { ChangeEvent, CSSProperties, KeyboardEvent, useRef, useState } from 'react';
 import { shallow } from 'zustand/shallow';
 
@@ -7,6 +6,7 @@ import { ActionIcon, ActionIconProps } from '/@/shared/components/action-icon/ac
 import { Box } from '/@/shared/components/box/box';
 import { Icon } from '/@/shared/components/icon/icon';
 import { TextInput, TextInputProps } from '/@/shared/components/text-input/text-input';
+import { useHotkeys } from '/@/shared/hooks/use-hotkeys';
 
 interface SearchInputProps extends TextInputProps {
     buttonProps?: Partial<ActionIconProps>;
diff --git a/src/renderer/features/shared/components/table-config.tsx b/src/renderer/features/shared/components/table-config.tsx
index 141707dfb..71de783ee 100644
--- a/src/renderer/features/shared/components/table-config.tsx
+++ b/src/renderer/features/shared/components/table-config.tsx
@@ -9,7 +9,6 @@ import {
     dropTargetForElements,
 } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
-import { useDebouncedState } from '@mantine/hooks';
 import clsx from 'clsx';
 import Fuse, { type FuseResultMatch } from 'fuse.js';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -35,6 +34,7 @@ import { Stack } from '/@/shared/components/stack/stack';
 import { TextInput } from '/@/shared/components/text-input/text-input';
 import { Text } from '/@/shared/components/text/text';
 import { Tooltip } from '/@/shared/components/tooltip/tooltip';
+import { useDebouncedState } from '/@/shared/hooks/use-debounced-state';
 import { dndUtils, DragData, DragOperation, DragTarget } from '/@/shared/types/drag-and-drop';
 import { ItemListKey, ListPaginationType } from '/@/shared/types/types';
 
diff --git a/src/renderer/features/shared/hooks/use-search-term-filter.ts b/src/renderer/features/shared/hooks/use-search-term-filter.ts
index 13416879c..7a41be944 100644
--- a/src/renderer/features/shared/hooks/use-search-term-filter.ts
+++ b/src/renderer/features/shared/hooks/use-search-term-filter.ts
@@ -1,7 +1,7 @@
-import { useDebouncedCallback } from '@mantine/hooks';
 import { parseAsString, useQueryState } from 'nuqs';
 
 import { FILTER_KEYS } from '/@/renderer/features/shared/utils';
+import { useDebouncedCallback } from '/@/shared/hooks/use-debounced-callback';
 
 export const useSearchTermFilter = (defaultValue?: string) => {
     const [searchTerm, setSearchTerm] = useQueryState(
diff --git a/src/renderer/hooks/use-container-query.ts b/src/renderer/hooks/use-container-query.ts
index b1e9438cb..cc5b61b5e 100644
--- a/src/renderer/hooks/use-container-query.ts
+++ b/src/renderer/hooks/use-container-query.ts
@@ -1,4 +1,4 @@
-import { useElementSize } from '@mantine/hooks';
+import { useElementSize } from '/@/shared/hooks/use-element-size';
 
 interface UseContainerQueryProps {
     '2xl'?: number;
diff --git a/src/renderer/hooks/use-hide-scrollbar.ts b/src/renderer/hooks/use-hide-scrollbar.ts
index 69bf303cd..81b575fb1 100644
--- a/src/renderer/hooks/use-hide-scrollbar.ts
+++ b/src/renderer/hooks/use-hide-scrollbar.ts
@@ -1,6 +1,7 @@
-import { useTimeout } from '@mantine/hooks';
 import { useEffect, useState } from 'react';
 
+import { useTimeout } from '/@/shared/hooks/use-timeout';
+
 export const useHideScrollbar = (timeout: number) => {
     const [hideScrollbar, setHideScrollbar] = useState(false);
     const { clear, start } = useTimeout(() => setHideScrollbar(true), timeout);
diff --git a/src/renderer/layouts/default-layout.tsx b/src/renderer/layouts/default-layout.tsx
index f419e24e2..356e08c46 100644
--- a/src/renderer/layouts/default-layout.tsx
+++ b/src/renderer/layouts/default-layout.tsx
@@ -1,4 +1,3 @@
-import { HotkeyItem, useHotkeys } from '@mantine/hooks';
 import clsx from 'clsx';
 import isElectron from 'is-electron';
 import { lazy } from 'react';
@@ -19,6 +18,7 @@ import {
     useSettingsStoreActions,
     useWindowSettings,
 } from '/@/renderer/store/settings.store';
+import { HotkeyItem, useHotkeys } from '/@/shared/hooks/use-hotkeys';
 import { Platform, PlayerType } from '/@/shared/types/types';
 
 if (!isElectron()) {
diff --git a/src/renderer/layouts/default-layout/side-drawer-queue.tsx b/src/renderer/layouts/default-layout/side-drawer-queue.tsx
index 2b05235a8..932b6db17 100644
--- a/src/renderer/layouts/default-layout/side-drawer-queue.tsx
+++ b/src/renderer/layouts/default-layout/side-drawer-queue.tsx
@@ -1,4 +1,3 @@
-import { useDisclosure, useTimeout } from '@mantine/hooks';
 import { AnimatePresence, motion, Variants } from 'motion/react';
 import { useCallback } from 'react';
 import { useLocation } from 'react-router';
@@ -9,6 +8,8 @@ import { DrawerPlayQueue } from '/@/renderer/features/now-playing/components/dra
 import { AppRoute } from '/@/renderer/router/routes';
 import { useAppStore, useSidebarStore } from '/@/renderer/store';
 import { Icon } from '/@/shared/components/icon/icon';
+import { useDisclosure } from '/@/shared/hooks/use-disclosure';
+import { useTimeout } from '/@/shared/hooks/use-timeout';
 import { Platform } from '/@/shared/types/types';
 
 const queueDrawerVariants: Variants = {
diff --git a/src/shared/components/button/button.tsx b/src/shared/components/button/button.tsx
index ba30deaa6..a41207d55 100644
--- a/src/shared/components/button/button.tsx
+++ b/src/shared/components/button/button.tsx
@@ -1,7 +1,6 @@
 import type { ButtonVariant, ButtonProps as MantineButtonProps } from '@mantine/core';
 
 import { ElementProps, Button as MantineButton } from '@mantine/core';
-import { useTimeout } from '@mantine/hooks';
 import clsx from 'clsx';
 import { forwardRef, useCallback, useRef, useState } from 'react';
 
@@ -9,6 +8,7 @@ import styles from './button.module.css';
 
 import { Spinner } from '/@/shared/components/spinner/spinner';
 import { Tooltip, TooltipProps } from '/@/shared/components/tooltip/tooltip';
+import { useTimeout } from '/@/shared/hooks/use-timeout';
 import { createPolymorphicComponent } from '/@/shared/utils/create-polymorphic-component';
 
 export interface ButtonProps
diff --git a/src/shared/components/scroll-area/scroll-area.tsx b/src/shared/components/scroll-area/scroll-area.tsx
index 7283f15c6..0e7be2d07 100644
--- a/src/shared/components/scroll-area/scroll-area.tsx
+++ b/src/shared/components/scroll-area/scroll-area.tsx
@@ -1,5 +1,4 @@
 import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
-import { useMergedRef } from '@mantine/hooks';
 import clsx from 'clsx';
 import { useOverlayScrollbars } from 'overlayscrollbars-react';
 import { forwardRef, Ref, useEffect, useRef, useState } from 'react';
@@ -7,6 +6,7 @@ import { forwardRef, Ref, useEffect, useRef, useState } from 'react';
 import styles from './scroll-area.module.css';
 import './scroll-area.css';
 
+import { useMergedRef } from '/@/shared/hooks/use-merged-ref';
 import { DragData, DragTarget } from '/@/shared/types/drag-and-drop';
 
 interface ScrollAreaProps extends React.ComponentPropsWithoutRef<'div'> {
diff --git a/src/shared/hooks/use-debounced-callback.ts b/src/shared/hooks/use-debounced-callback.ts
new file mode 100644
index 000000000..9da9e95a5
--- /dev/null
+++ b/src/shared/hooks/use-debounced-callback.ts
@@ -0,0 +1,3 @@
+import { useDebouncedCallback as useMantineDebouncedCallback } from '@mantine/hooks';
+
+export const useDebouncedCallback = useMantineDebouncedCallback;
diff --git a/src/shared/hooks/use-debounced-state.ts b/src/shared/hooks/use-debounced-state.ts
new file mode 100644
index 000000000..184be3db5
--- /dev/null
+++ b/src/shared/hooks/use-debounced-state.ts
@@ -0,0 +1,3 @@
+import { useDebouncedState as useMantineDebouncedState } from '@mantine/hooks';
+
+export const useDebouncedState = useMantineDebouncedState;
diff --git a/src/shared/hooks/use-debounced-value.ts b/src/shared/hooks/use-debounced-value.ts
new file mode 100644
index 000000000..2350609b4
--- /dev/null
+++ b/src/shared/hooks/use-debounced-value.ts
@@ -0,0 +1,3 @@
+import { useDebouncedValue as useDebouncedValueMantine } from '@mantine/hooks';
+
+export const useDebouncedValue = useDebouncedValueMantine;
diff --git a/src/shared/hooks/use-element-size.ts b/src/shared/hooks/use-element-size.ts
new file mode 100644
index 000000000..b3abb438b
--- /dev/null
+++ b/src/shared/hooks/use-element-size.ts
@@ -0,0 +1,3 @@
+import { useElementSize as useElementSizeMantine } from '@mantine/hooks';
+
+export const useElementSize = useElementSizeMantine;
diff --git a/src/shared/hooks/use-focus-trap.ts b/src/shared/hooks/use-focus-trap.ts
new file mode 100644
index 000000000..cf259de43
--- /dev/null
+++ b/src/shared/hooks/use-focus-trap.ts
@@ -0,0 +1,3 @@
+import { useFocusTrap as useMantineFocusTrap } from '@mantine/hooks';
+
+export const useFocusTrap = useMantineFocusTrap;
diff --git a/src/shared/hooks/use-hotkeys.ts b/src/shared/hooks/use-hotkeys.ts
new file mode 100644
index 000000000..b5a1d30fe
--- /dev/null
+++ b/src/shared/hooks/use-hotkeys.ts
@@ -0,0 +1,8 @@
+import {
+    type HotkeyItem as MantineHotkeyItem,
+    useHotkeys as useMantineHotkeys,
+} from '@mantine/hooks';
+
+export const useHotkeys = useMantineHotkeys;
+
+export type HotkeyItem = MantineHotkeyItem;
diff --git a/src/shared/hooks/use-media-query.ts b/src/shared/hooks/use-media-query.ts
new file mode 100644
index 000000000..b3633e89e
--- /dev/null
+++ b/src/shared/hooks/use-media-query.ts
@@ -0,0 +1,3 @@
+import { useMediaQuery as useMantineMediaQuery } from '@mantine/hooks';
+
+export const useMediaQuery = useMantineMediaQuery;
diff --git a/src/shared/hooks/use-merged-ref.ts b/src/shared/hooks/use-merged-ref.ts
new file mode 100644
index 000000000..4935b4b52
--- /dev/null
+++ b/src/shared/hooks/use-merged-ref.ts
@@ -0,0 +1,3 @@
+import { useMergedRef as useMergedRefMantine } from '@mantine/hooks';
+
+export const useMergedRef = useMergedRefMantine;
diff --git a/src/shared/hooks/use-set-state.ts b/src/shared/hooks/use-set-state.ts
new file mode 100644
index 000000000..b92735d29
--- /dev/null
+++ b/src/shared/hooks/use-set-state.ts
@@ -0,0 +1,3 @@
+import { useSetState as useMantineSetState } from '@mantine/hooks';
+
+export const useSetState = useMantineSetState;
diff --git a/src/shared/hooks/use-timeout.ts b/src/shared/hooks/use-timeout.ts
new file mode 100644
index 000000000..416c53ba2
--- /dev/null
+++ b/src/shared/hooks/use-timeout.ts
@@ -0,0 +1,3 @@
+import { useTimeout as useMantineTimeout } from '@mantine/hooks';
+
+export const useTimeout = useMantineTimeout;