diff --git a/src/renderer/features/search/components/go-to-commands.tsx b/src/renderer/features/search/components/go-to-commands.tsx
index 9a238464d..4792b6ecc 100644
--- a/src/renderer/features/search/components/go-to-commands.tsx
+++ b/src/renderer/features/search/components/go-to-commands.tsx
@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router';
 
 import { Command, CommandPalettePages } from '/@/renderer/features/search/components/command';
-import { openSettingsModal } from '/@/renderer/features/settings/utils/open-settings-modal';
 import { AppRoute } from '/@/renderer/router/routes';
 
 interface GoToCommandsProps {
@@ -37,10 +36,7 @@ export const GoToCommands = ({ handleClose, setPages, setQuery }: GoToCommandsPr
                 </Command.Item>
                 <Command.Item
                     onSelect={() => {
-                        openSettingsModal();
-                        handleClose();
-                        setPages([CommandPalettePages.HOME]);
-                        setQuery('');
+                        goTo(AppRoute.SETTINGS);
                     }}
                 >
                     {t('page.sidebar.settings', { postProcess: 'titleCase' })}
diff --git a/src/renderer/features/titlebar/components/app-menu.tsx b/src/renderer/features/titlebar/components/app-menu.tsx
index b32f6b2ed..469118210 100644
--- a/src/renderer/features/titlebar/components/app-menu.tsx
+++ b/src/renderer/features/titlebar/components/app-menu.tsx
@@ -5,7 +5,7 @@ import { Link, useNavigate } from 'react-router';
 
 import packageJson from '../../../../../package.json';
 
-import { openSettingsModal } from '/@/renderer/features/settings/utils/open-settings-modal';
+import { AppRoute } from '/@/renderer/router/routes';
 import { useAppStore, useAppStoreActions } from '/@/renderer/store';
 import { DropdownMenu, MenuItemProps } from '/@/shared/components/dropdown-menu/dropdown-menu';
 import { Icon } from '/@/shared/components/icon/icon';
@@ -184,7 +184,7 @@ export const AppMenu = () => {
             icon: 'settings',
             id: 'settings',
             label: t('page.appMenu.settings', { postProcess: 'sentenceCase' }),
-            onClick: openSettingsModal,
+            onClick: () => navigate(AppRoute.SETTINGS),
             type: 'item',
         },
         {
diff --git a/src/renderer/router/app-router.tsx b/src/renderer/router/app-router.tsx
index b11cc77bd..e7719d92b 100644
--- a/src/renderer/router/app-router.tsx
+++ b/src/renderer/router/app-router.tsx
@@ -72,6 +72,8 @@ const SearchRoute = lazy(() => import('/@/renderer/features/search/routes/search
 
 const FavoritesRoute = lazy(() => import('/@/renderer/features/favorites/routes/favorites-route'));
 
+const SettingsRoute = lazy(() => import('/@/renderer/features/settings/routes/settings-route'));
+
 export const AppRouter = () => {
     const router = (
         <HashRouter>
@@ -93,6 +95,7 @@ export const AppRouter = () => {
                                     <Route element={<HomeRoute />} path={AppRoute.HOME} />
                                     <Route element={<SearchRoute />} path={AppRoute.SEARCH} />
                                     <Route element={<FavoritesRoute />} path={AppRoute.FAVORITES} />
+                                    <Route element={<SettingsRoute />} path={AppRoute.SETTINGS} />
                                     <Route
                                         element={<NowPlayingRoute />}
                                         path={AppRoute.NOW_PLAYING}