diff --git a/src/App.tsx b/src/App.tsx
index 57ed4aa5..6596894d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -14,13 +14,13 @@ import { loadable } from 'react-lazily/loadable';
 import Box from '@mui/material/Box';
 import { AppContext } from '@/modules/core/contexts/AppContext.tsx';
 import '@/i18n';
-import { DefaultNavBar } from '@/components/navbar/DefaultNavBar';
+import { DefaultNavBar } from '@/modules/navigation-bar/components/DefaultNavBar.tsx';
 import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
 import { WebUIUpdateChecker } from '@/modules/app-updates/components/WebUIUpdateChecker.tsx';
 import { ServerUpdateChecker } from '@/modules/app-updates/components/ServerUpdateChecker.tsx';
 import { lazyLoadFallback } from '@/modules/core/utils/LazyLoad.tsx';
 import { ErrorBoundary } from '@/modules/core/components/ErrorBoundary.tsx';
-import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
+import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 
 const { Browse } = loadable(() => import('@/screens/Browse'), lazyLoadFallback);
 const { DownloadQueue } = loadable(() => import('@/screens/DownloadQueue'), lazyLoadFallback);
diff --git a/src/components/settings/DeviceSetting.tsx b/src/components/settings/DeviceSetting.tsx
index d29f2cf8..b2db8eb1 100644
--- a/src/components/settings/DeviceSetting.tsx
+++ b/src/components/settings/DeviceSetting.tsx
@@ -16,7 +16,7 @@ import { updateMetadataServerSettings, useMetadataServerSettings } from '@/lib/m
 import { MetadataServerSettingKeys, MetadataServerSettings } from '@/typings.ts';
 import { makeToast } from '@/lib/ui/Toast.ts';
 import { MutableListSetting } from '@/modules/core/components/settings/MutableListSetting.tsx';
-import { NavBarContext } from '@/components/context/NavbarContext.tsx';
+import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { ActiveDevice, DEFAULT_DEVICE } from '@/util/device.ts';
 import { Select } from '@/modules/core/components/inputs/Select.tsx';
 import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
diff --git a/src/modules/category/screens/CategorySettings.tsx b/src/modules/category/screens/CategorySettings.tsx
index 0cd00ce6..381e2cc9 100644
--- a/src/modules/category/screens/CategorySettings.tsx
+++ b/src/modules/category/screens/CategorySettings.tsx
@@ -24,7 +24,7 @@ import Box from '@mui/material/Box';
 import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
 import { StrictModeDroppable } from '@/modules/core/components/StrictModeDroppable.tsx';
 import { DEFAULT_FULL_FAB_HEIGHT } from '@/modules/core/components/buttons/StyledFab.tsx';
-import { NavBarContext } from '@/components/context/NavbarContext.tsx';
+import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
 import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
diff --git a/src/modules/chapter/components/ChapterList.tsx b/src/modules/chapter/components/ChapterList.tsx
index 261407dd..03791ceb 100644
--- a/src/modules/chapter/components/ChapterList.tsx
+++ b/src/modules/chapter/components/ChapterList.tsx
@@ -42,7 +42,7 @@ import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts'
 import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
 import { GET_CHAPTERS_MANGA } from '@/lib/graphql/queries/ChapterQuery.ts';
 import { Mangas } from '@/modules/manga/services/Mangas.ts';
-import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
+import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
 import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
 import { shouldForwardProp } from '@/modules/core/utils/ShouldForwardProp.ts';
diff --git a/src/modules/core/components/tabs/TabsMenu.tsx b/src/modules/core/components/tabs/TabsMenu.tsx
index 1baa5ae6..b5f7c8f0 100644
--- a/src/modules/core/components/tabs/TabsMenu.tsx
+++ b/src/modules/core/components/tabs/TabsMenu.tsx
@@ -9,7 +9,7 @@
 import Tabs, { TabsProps } from '@mui/material/Tabs';
 import { styled } from '@mui/material/styles';
 import { ForwardedRef, forwardRef } from 'react';
-import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
+import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 
 const StyledTabsMenu = styled(Tabs)(({ theme }) => ({
     display: 'flex',
diff --git a/src/modules/core/components/tabs/TabsWrapper.tsx b/src/modules/core/components/tabs/TabsWrapper.tsx
index 8085c338..81261c82 100644
--- a/src/modules/core/components/tabs/TabsWrapper.tsx
+++ b/src/modules/core/components/tabs/TabsWrapper.tsx
@@ -7,7 +7,7 @@
  */
 
 import Box, { BoxProps } from '@mui/material/Box';
-import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
+import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 
 export const TabsWrapper = ({ children, ...props }: BoxProps) => {
     const { appBarHeight } = useNavBarContext();
diff --git a/src/modules/core/components/virtuoso/StyledGroupedVirtuoso.tsx b/src/modules/core/components/virtuoso/StyledGroupedVirtuoso.tsx
index 6441615f..b931f555 100644
--- a/src/modules/core/components/virtuoso/StyledGroupedVirtuoso.tsx
+++ b/src/modules/core/components/virtuoso/StyledGroupedVirtuoso.tsx
@@ -8,7 +8,7 @@
 
 import { GroupedVirtuoso } from 'react-virtuoso';
 import { ComponentProps } from 'react';
-import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
+import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 
 export const StyledGroupedVirtuoso = ({
     heightToSubtract = 0,
diff --git a/src/modules/core/contexts/AppContext.tsx b/src/modules/core/contexts/AppContext.tsx
index f353d586..f70eadae 100644
--- a/src/modules/core/contexts/AppContext.tsx
+++ b/src/modules/core/contexts/AppContext.tsx
@@ -20,7 +20,7 @@ import { SnackbarProvider } from 'notistack';
 import { createAndSetTheme } from '@/theme.tsx';
 import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
 import { ThemeMode, ThemeModeContext } from '@/modules/theme/contexts/ThemeModeContext.tsx';
-import { NavBarContextProvider } from '@/components/navbar/NavBarContextProvider.tsx';
+import { NavBarContextProvider } from '@/modules/navigation-bar/contexts/NavBarContextProvider.tsx';
 import { LibraryOptionsContextProvider } from '@/modules/library/contexts/LibraryOptionsProvider.tsx';
 import { ActiveDevice, DEFAULT_DEVICE, setActiveDevice } from '@/util/device.ts';
 import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
diff --git a/src/modules/core/hooks/useBackButton.ts b/src/modules/core/hooks/useBackButton.ts
index c0ca59b1..0c7173ea 100644
--- a/src/modules/core/hooks/useBackButton.ts
+++ b/src/modules/core/hooks/useBackButton.ts
@@ -8,7 +8,7 @@
 
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useContext } from 'react';
-import { NavBarContext } from '@/components/context/NavbarContext.tsx';
+import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 
 export const useBackButton = () => {
     const navigate = useNavigate();
diff --git a/src/modules/extension/screens/Extensions.tsx b/src/modules/extension/screens/Extensions.tsx
index 420e12de..5a03e703 100644
--- a/src/modules/extension/screens/Extensions.tsx
+++ b/src/modules/extension/screens/Extensions.tsx
@@ -33,7 +33,7 @@ import { LoadingPlaceholder } from '@/modules/core/components/placeholder/Loadin
 import { makeToast } from '@/lib/ui/Toast.ts';
 import { LangSelect } from '@/modules/core/components/inputs/LangSelect.tsx';
 import { ExtensionCard } from '@/modules/extension/components/ExtensionCard.tsx';
-import { NavBarContext } from '@/components/context/NavbarContext.tsx';
+import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { StyledGroupedVirtuoso } from '@/modules/core/components/virtuoso/StyledGroupedVirtuoso.tsx';
 import { StyledGroupHeader } from '@/modules/core/components/virtuoso/StyledGroupHeader.tsx';
 import { StyledGroupItemWrapper } from '@/modules/core/components/virtuoso/StyledGroupItemWrapper.tsx';
diff --git a/src/modules/library/screens/Library.tsx b/src/modules/library/screens/Library.tsx
index cae8189b..846ce304 100644
--- a/src/modules/library/screens/Library.tsx
+++ b/src/modules/library/screens/Library.tsx
@@ -20,7 +20,7 @@ import { LibraryToolbarMenu } from '@/modules/library/components/LibraryToolbarM
 import { LibraryMangaGrid } from '@/modules/library/components/LibraryMangaGrid.tsx';
 import { AppbarSearch } from '@/modules/core/components/AppbarSearch.tsx';
 import { UpdateChecker } from '@/modules/core/components/UpdateChecker.tsx';
-import { NavBarContext } from '@/components/context/NavbarContext.tsx';
+import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { useSelectableCollection } from '@/modules/collection/hooks/useSelectableCollection.ts';
 import { SelectableCollectionSelectMode } from '@/modules/collection/components/SelectableCollectionSelectMode.tsx';
 import { useGetVisibleLibraryMangas } from '@/modules/library/hooks/useGetVisibleLibraryMangas.ts';
diff --git a/src/modules/library/screens/LibraryDuplicates.tsx b/src/modules/library/screens/LibraryDuplicates.tsx
index 9e08cd61..176cca22 100644
--- a/src/modules/library/screens/LibraryDuplicates.tsx
+++ b/src/modules/library/screens/LibraryDuplicates.tsx
@@ -15,7 +15,7 @@ import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import Box from '@mui/material/Box';
 import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
-import { NavBarContext } from '@/components/context/NavbarContext.tsx';
+import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
 import { GridLayout } from '@/modules/library/contexts/LibraryOptionsContext.tsx';
 import { GridLayouts } from '@/modules/core/components/GridLayouts.tsx';
diff --git a/src/modules/library/screens/LibrarySettings.tsx b/src/modules/library/screens/LibrarySettings.tsx
index 99e0a1cd..7b43002e 100644
--- a/src/modules/library/screens/LibrarySettings.tsx
+++ b/src/modules/library/screens/LibrarySettings.tsx
@@ -15,7 +15,7 @@ import ListItemText from '@mui/material/ListItemText';
 import Switch from '@mui/material/Switch';
 import ListSubheader from '@mui/material/ListSubheader';
 import { t as translate } from 'i18next';
-import { NavBarContext } from '@/components/context/NavbarContext.tsx';
+import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { GlobalUpdateSettings } from '@/components/settings/globalUpdate/GlobalUpdateSettings.tsx';
 import { makeToast } from '@/lib/ui/Toast.ts';
 import {
diff --git a/src/modules/manga/components/MangaGrid.tsx b/src/modules/manga/components/MangaGrid.tsx
index 7e9aa31e..13a85dda 100644
--- a/src/modules/manga/components/MangaGrid.tsx
+++ b/src/modules/manga/components/MangaGrid.tsx
@@ -32,7 +32,7 @@ import { AppStorage } from '@/lib/AppStorage.ts';
 import { MangaCardProps } from '@/modules/manga/MangaCard.types.tsx';
 import { MangaType } from '@/lib/graphql/generated/graphql.ts';
 import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
-import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
+import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 
 const GridContainer = React.forwardRef<HTMLDivElement, GridTypeMap['props']>(({ children, ...props }, ref) => (
     <Grid {...props} ref={ref} container spacing={1}>
diff --git a/src/modules/manga/screens/Manga.tsx b/src/modules/manga/screens/Manga.tsx
index a5601ee8..55ab8be5 100644
--- a/src/modules/manga/screens/Manga.tsx
+++ b/src/modules/manga/screens/Manga.tsx
@@ -17,7 +17,7 @@ import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import { isNetworkRequestInFlight } from '@apollo/client/core/networkStatus';
 import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
-import { NavBarContext } from '@/components/context/NavbarContext.tsx';
+import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { ChapterList } from '@/modules/chapter/components/ChapterList.tsx';
 import { useRefreshManga } from '@/modules/manga/hooks/useRefreshManga.ts';
 import { MangaDetails } from '@/modules/manga/components/MangaDetails.tsx';
diff --git a/src/modules/migration/screens/Migrate.tsx b/src/modules/migration/screens/Migrate.tsx
index aa9c2ff4..6bde4e35 100644
--- a/src/modules/migration/screens/Migrate.tsx
+++ b/src/modules/migration/screens/Migrate.tsx
@@ -9,7 +9,7 @@
 import { useContext, useEffect, useLayoutEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { NavBarContext } from '@/components/context/NavbarContext.tsx';
+import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
 import { TMigratableSource } from '@/modules/migration/components/MigrationCard.tsx';
 import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
diff --git a/src/modules/migration/screens/Migration.tsx b/src/modules/migration/screens/Migration.tsx
index 4f0bfb3a..dee1d2b7 100644
--- a/src/modules/migration/screens/Migration.tsx
+++ b/src/modules/migration/screens/Migration.tsx
@@ -29,7 +29,7 @@ import {
     useMetadataServerSettings,
 } from '@/lib/metadata/metadataServerSettings.ts';
 import { makeToast } from '@/lib/ui/Toast.ts';
-import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
+import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 
 const getMigratableSources = (
     mangas: TMigratableSourcesResult | undefined,
diff --git a/src/modules/navigation-bar/NavigationBar.types.ts b/src/modules/navigation-bar/NavigationBar.types.ts
new file mode 100644
index 00000000..362ced0b
--- /dev/null
+++ b/src/modules/navigation-bar/NavigationBar.types.ts
@@ -0,0 +1,24 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { OverridableComponent } from '@mui/material/OverridableComponent';
+import { SvgIconTypeMap } from '@mui/material/SvgIcon';
+import { TranslationKey } from '@/Base.types.ts';
+
+export interface INavbarOverride {
+    status: boolean;
+    value: any;
+}
+
+export interface NavbarItem {
+    path: string;
+    title: TranslationKey;
+    SelectedIconComponent: OverridableComponent<SvgIconTypeMap<{}, 'svg'>>;
+    IconComponent: OverridableComponent<SvgIconTypeMap<{}, 'svg'>>;
+    show: 'mobile' | 'desktop' | 'both';
+}
diff --git a/src/components/navbar/DefaultNavBar.tsx b/src/modules/navigation-bar/components/DefaultNavBar.tsx
similarity index 95%
rename from src/components/navbar/DefaultNavBar.tsx
rename to src/modules/navigation-bar/components/DefaultNavBar.tsx
index bbab84d0..875c6efa 100644
--- a/src/components/navbar/DefaultNavBar.tsx
+++ b/src/modules/navigation-bar/components/DefaultNavBar.tsx
@@ -26,14 +26,14 @@ import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import MenuIcon from '@mui/icons-material/Menu';
 import Stack from '@mui/material/Stack';
 import { useTheme } from '@mui/material/styles';
-import { NavbarItem } from '@/typings';
-import { NavBarContext } from '@/components/context/NavbarContext';
+import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { useBackButton } from '@/modules/core/hooks/useBackButton.ts';
 import { useGetOptionForDirection } from '@/theme.tsx';
 import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
-import { DesktopSideBar } from '@/components/navbar/navigation/DesktopSideBar.tsx';
+import { DesktopSideBar } from '@/modules/navigation-bar/components/DesktopSideBar.tsx';
 import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
-import { MobileBottomBar } from '@/components/navbar/navigation/MobileBottomBar.tsx';
+import { MobileBottomBar } from '@/modules/navigation-bar/components/MobileBottomBar.tsx';
+import { NavbarItem } from '@/modules/navigation-bar/NavigationBar.types.ts';
 
 const navbarItems: Array<NavbarItem> = [
     {
diff --git a/src/components/navbar/navigation/DesktopSideBar.tsx b/src/modules/navigation-bar/components/DesktopSideBar.tsx
similarity index 97%
rename from src/components/navbar/navigation/DesktopSideBar.tsx
rename to src/modules/navigation-bar/components/DesktopSideBar.tsx
index c83c3fbb..8a6ff5ae 100644
--- a/src/components/navbar/navigation/DesktopSideBar.tsx
+++ b/src/modules/navigation-bar/components/DesktopSideBar.tsx
@@ -21,11 +21,11 @@ import { useCallback, useMemo, useRef } from 'react';
 import Box from '@mui/material/Box';
 import ListItem from '@mui/material/ListItem';
 import Tooltip from '@mui/material/Tooltip';
-import { NavbarItem } from '@/typings.ts';
 import { ListItemLink } from '@/modules/core/components/ListItemLink.tsx';
 import { useGetOptionForDirection } from '@/theme.tsx';
-import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
+import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
+import { NavbarItem } from '@/modules/navigation-bar/NavigationBar.types.ts';
 
 const DrawerHeader = styled('div')(({ theme }) => ({
     display: 'flex',
diff --git a/src/components/navbar/navigation/MobileBottomBar.tsx b/src/modules/navigation-bar/components/MobileBottomBar.tsx
similarity index 93%
rename from src/components/navbar/navigation/MobileBottomBar.tsx
rename to src/modules/navigation-bar/components/MobileBottomBar.tsx
index 6bc75ea7..630b5aca 100644
--- a/src/components/navbar/navigation/MobileBottomBar.tsx
+++ b/src/modules/navigation-bar/components/MobileBottomBar.tsx
@@ -12,9 +12,9 @@ import { useTranslation } from 'react-i18next';
 import Paper from '@mui/material/Paper';
 import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { NavbarItem } from '@/typings.ts';
 import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
-import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
+import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
+import { NavbarItem } from '@/modules/navigation-bar/NavigationBar.types.ts';
 
 export const MobileBottomBar = ({ navBarItems }: { navBarItems: NavbarItem[] }) => {
     const { t } = useTranslation();
diff --git a/src/components/navbar/NavBarContextProvider.tsx b/src/modules/navigation-bar/contexts/NavBarContextProvider.tsx
similarity index 93%
rename from src/components/navbar/NavBarContextProvider.tsx
rename to src/modules/navigation-bar/contexts/NavBarContextProvider.tsx
index 2fe17c6b..4c4897c1 100644
--- a/src/components/navbar/NavBarContextProvider.tsx
+++ b/src/modules/navigation-bar/contexts/NavBarContextProvider.tsx
@@ -7,10 +7,10 @@
  */
 
 import React, { useCallback, useMemo, useState } from 'react';
-import { INavbarOverride } from '@/typings';
-import { NavBarContext } from '@/components/context/NavbarContext';
+import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { useHistory } from '@/modules/core/hooks/useHistory.ts';
 import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
+import { INavbarOverride } from '@/modules/navigation-bar/NavigationBar.types.ts';
 
 interface IProps {
     children: React.ReactNode;
diff --git a/src/components/context/NavbarContext.tsx b/src/modules/navigation-bar/contexts/NavbarContext.tsx
similarity index 95%
rename from src/components/context/NavbarContext.tsx
rename to src/modules/navigation-bar/contexts/NavbarContext.tsx
index 955a688c..16b9ea2a 100644
--- a/src/components/context/NavbarContext.tsx
+++ b/src/modules/navigation-bar/contexts/NavbarContext.tsx
@@ -7,7 +7,8 @@
  */
 
 import React, { useContext } from 'react';
-import { INavbarOverride } from '@/typings';
+
+import { INavbarOverride } from '@/modules/navigation-bar/NavigationBar.types.ts';
 
 type ContextType = {
     history: string[];
diff --git a/src/modules/reader/components/ReaderNavBar.tsx b/src/modules/reader/components/ReaderNavBar.tsx
index d1bd2b34..585f04b9 100644
--- a/src/modules/reader/components/ReaderNavBar.tsx
+++ b/src/modules/reader/components/ReaderNavBar.tsx
@@ -34,7 +34,7 @@ import { Select } from '@/modules/core/components/inputs/Select.tsx';
 import { useGetOptionForDirection } from '@/theme.tsx';
 import { ChapterType } from '@/lib/graphql/generated/graphql.ts';
 import { MangaChapterCountInfo, MangaIdInfo } from '@/modules/manga/services/Mangas.ts';
-import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
+import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
 import { CustomIconButton } from '@/modules/core/components/buttons/CustomIconButton.tsx';
 import { IReaderSettings } from '@/modules/reader/Reader.types.ts';
diff --git a/src/modules/reader/screens/DefaultReaderSettings.tsx b/src/modules/reader/screens/DefaultReaderSettings.tsx
index c6f5aaa5..77ed696e 100644
--- a/src/modules/reader/screens/DefaultReaderSettings.tsx
+++ b/src/modules/reader/screens/DefaultReaderSettings.tsx
@@ -16,7 +16,7 @@ import {
 } from '@/modules/reader/services/ReaderSettingsMetadata.ts';
 import { ReaderSettingsOptions } from '@/modules/reader/components/ReaderSettingsOptions.tsx';
 import { makeToast } from '@/lib/ui/Toast.ts';
-import { NavBarContext } from '@/components/context/NavbarContext.tsx';
+import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
 import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
 import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
diff --git a/src/modules/reader/screens/Reader.tsx b/src/modules/reader/screens/Reader.tsx
index 0f91a554..1303df20 100644
--- a/src/modules/reader/screens/Reader.tsx
+++ b/src/modules/reader/screens/Reader.tsx
@@ -26,7 +26,7 @@ import { DoublePagedPager } from '@/modules/reader/components/pager/DoublePagedP
 import { VerticalPager } from '@/modules/reader/components/pager/VerticalPager.tsx';
 import { ReaderNavBar } from '@/modules/reader/components/ReaderNavBar.tsx';
 import { makeToast } from '@/lib/ui/Toast.ts';
-import { NavBarContext } from '@/components/context/NavbarContext.tsx';
+import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { useDebounce } from '@/modules/core/hooks/useDebounce.ts';
 import {
     GetChaptersReaderQuery,
diff --git a/src/modules/source/screens/SourceConfigure.tsx b/src/modules/source/screens/SourceConfigure.tsx
index 2e11ebac..615af35f 100644
--- a/src/modules/source/screens/SourceConfigure.tsx
+++ b/src/modules/source/screens/SourceConfigure.tsx
@@ -19,7 +19,7 @@ import {
 import { ListPreference } from '@/modules/source/components/sourceConfiguration/ListPreference.tsx';
 import { EditTextPreference } from '@/modules/source/components/sourceConfiguration/EditTextPreference.tsx';
 import { MultiSelectListPreference } from '@/modules/source/components/sourceConfiguration/MultiSelectListPreference.tsx';
-import { NavBarContext } from '@/components/context/NavbarContext.tsx';
+import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
 import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
diff --git a/src/modules/source/screens/SourceMangas.tsx b/src/modules/source/screens/SourceMangas.tsx
index 976a2c38..1cee372c 100644
--- a/src/modules/source/screens/SourceMangas.tsx
+++ b/src/modules/source/screens/SourceMangas.tsx
@@ -36,7 +36,7 @@ import {
     GetSourceMangasFetchMutation,
     GetSourceMangasFetchMutationVariables,
 } from '@/lib/graphql/generated/graphql.ts';
-import { NavBarContext } from '@/components/context/NavbarContext.tsx';
+import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { useMetadataServerSettings } from '@/lib/metadata/metadataServerSettings.ts';
 import { useLocalStorage, useSessionStorage } from '@/modules/core/hooks/useStorage.tsx';
 import { AppStorage } from '@/lib/AppStorage.ts';
diff --git a/src/modules/source/screens/Sources.tsx b/src/modules/source/screens/Sources.tsx
index cdbedbcb..c3d5d7ee 100644
--- a/src/modules/source/screens/Sources.tsx
+++ b/src/modules/source/screens/Sources.tsx
@@ -20,7 +20,7 @@ import { translateExtensionLanguage } from '@/modules/extension/services/Extensi
 import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
 import { SourceCard } from '@/modules/source/components/SourceCard.tsx';
 import { LangSelect } from '@/modules/core/components/inputs/LangSelect.tsx';
-import { NavBarContext } from '@/components/context/NavbarContext.tsx';
+import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
 import { SourceType } from '@/lib/graphql/generated/graphql.ts';
diff --git a/src/modules/tracker/screens/TrackingSettings.tsx b/src/modules/tracker/screens/TrackingSettings.tsx
index b33337f6..bb60281f 100644
--- a/src/modules/tracker/screens/TrackingSettings.tsx
+++ b/src/modules/tracker/screens/TrackingSettings.tsx
@@ -14,7 +14,7 @@ import ListSubheader from '@mui/material/ListSubheader';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import Switch from '@mui/material/Switch';
-import { NavBarContext } from '@/components/context/NavbarContext.tsx';
+import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
 import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
 import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
diff --git a/src/screens/Browse.tsx b/src/screens/Browse.tsx
index e6b418ad..12f5503d 100644
--- a/src/screens/Browse.tsx
+++ b/src/screens/Browse.tsx
@@ -16,7 +16,7 @@ import { TabPanel } from '@/modules/core/components/tabs/TabPanel.tsx';
 import { TabsWrapper } from '@/modules/core/components/tabs/TabsWrapper.tsx';
 import { TabsMenu } from '@/modules/core/components/tabs/TabsMenu.tsx';
 import { Migration } from '@/modules/migration/screens/Migration.tsx';
-import { NavBarContext } from '@/components/context/NavbarContext.tsx';
+import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
 
 enum Tabs {
diff --git a/src/screens/DownloadQueue.tsx b/src/screens/DownloadQueue.tsx
index bd4d391a..8569ff17 100644
--- a/src/screens/DownloadQueue.tsx
+++ b/src/screens/DownloadQueue.tsx
@@ -30,7 +30,7 @@ import { StrictModeDroppable } from '@/modules/core/components/StrictModeDroppab
 import { makeToast } from '@/lib/ui/Toast.ts';
 import { DownloadStateIndicator } from '@/modules/core/components/DownloadStateIndicator.tsx';
 import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
-import { NavBarContext } from '@/components/context/NavbarContext.tsx';
+import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
 import { ChapterDownloadStatus, ChapterIdInfo } from '@/modules/chapter/services/Chapters.ts';
diff --git a/src/screens/SearchAll.tsx b/src/screens/SearchAll.tsx
index 6123f170..5b718f40 100644
--- a/src/screens/SearchAll.tsx
+++ b/src/screens/SearchAll.tsx
@@ -21,7 +21,7 @@ import { translateExtensionLanguage } from '@/modules/extension/services/Extensi
 import { AppbarSearch } from '@/modules/core/components/AppbarSearch.tsx';
 import { LangSelect } from '@/modules/core/components/inputs/LangSelect.tsx';
 import { useDebounce } from '@/modules/core/hooks/useDebounce.ts';
-import { NavBarContext } from '@/components/context/NavbarContext.tsx';
+import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { MangaCardProps } from '@/modules/manga/MangaCard.types.tsx';
 import { EmptyView } from '@/modules/core/components/placeholder/EmptyView.tsx';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
diff --git a/src/screens/Settings.tsx b/src/screens/Settings.tsx
index 2a97e800..c6d93f65 100644
--- a/src/screens/Settings.tsx
+++ b/src/screens/Settings.tsx
@@ -26,7 +26,7 @@ import DevicesIcon from '@mui/icons-material/Devices';
 import SyncIcon from '@mui/icons-material/Sync';
 import PaletteIcon from '@mui/icons-material/Palette';
 import { ListItemLink } from '@/modules/core/components/ListItemLink.tsx';
-import { NavBarContext } from '@/components/context/NavbarContext.tsx';
+import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
 import { makeToast } from '@/lib/ui/Toast.ts';
 
diff --git a/src/screens/Updates.tsx b/src/screens/Updates.tsx
index cd4dc12d..e6debf7a 100644
--- a/src/screens/Updates.tsx
+++ b/src/screens/Updates.tsx
@@ -24,7 +24,7 @@ import { LoadingPlaceholder } from '@/modules/core/components/placeholder/Loadin
 import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
 import { DownloadStateIndicator } from '@/modules/core/components/DownloadStateIndicator.tsx';
 import { ChapterType, DownloadState } from '@/lib/graphql/generated/graphql.ts';
-import { NavBarContext } from '@/components/context/NavbarContext.tsx';
+import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { UpdateChecker } from '@/modules/core/components/UpdateChecker.tsx';
 import { StyledGroupedVirtuoso } from '@/modules/core/components/virtuoso/StyledGroupedVirtuoso.tsx';
 import { StyledGroupHeader } from '@/modules/core/components/virtuoso/StyledGroupHeader.tsx';
diff --git a/src/screens/settings/About.tsx b/src/screens/settings/About.tsx
index 39135f40..5dce7bf4 100644
--- a/src/screens/settings/About.tsx
+++ b/src/screens/settings/About.tsx
@@ -15,7 +15,7 @@ import ListSubheader from '@mui/material/ListSubheader';
 import Divider from '@mui/material/Divider';
 import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
 import { ListItemLink } from '@/modules/core/components/ListItemLink.tsx';
-import { NavBarContext } from '@/components/context/NavbarContext';
+import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
 import { UpdateState } from '@/lib/graphql/generated/graphql.ts';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
diff --git a/src/screens/settings/Appearance.tsx b/src/screens/settings/Appearance.tsx
index 4f4ec6aa..738cfb5d 100644
--- a/src/screens/settings/Appearance.tsx
+++ b/src/screens/settings/Appearance.tsx
@@ -15,7 +15,7 @@ import MenuItem from '@mui/material/MenuItem';
 import ListSubheader from '@mui/material/ListSubheader';
 import Switch from '@mui/material/Switch';
 import Link from '@mui/material/Link';
-import { NavBarContext } from '@/components/context/NavbarContext.tsx';
+import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { ThemeMode, ThemeModeContext } from '@/modules/theme/contexts/ThemeModeContext.tsx';
 import { Select } from '@/modules/core/components/inputs/Select.tsx';
 import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
diff --git a/src/screens/settings/Backup.tsx b/src/screens/settings/Backup.tsx
index 60955194..6978fd08 100644
--- a/src/screens/settings/Backup.tsx
+++ b/src/screens/settings/Backup.tsx
@@ -25,7 +25,7 @@ import { Link } from 'react-router-dom';
 import Stack from '@mui/material/Stack';
 import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
 import { makeToast } from '@/lib/ui/Toast.ts';
-import { NavBarContext } from '@/components/context/NavbarContext';
+import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { BackupRestoreState, ValidateBackupQuery } from '@/lib/graphql/generated/graphql.ts';
 import { Progress } from '@/modules/core/components/Progress.tsx';
 import { TextSetting } from '@/modules/core/components/settings/text/TextSetting.tsx';
diff --git a/src/screens/settings/BrowseSettings.tsx b/src/screens/settings/BrowseSettings.tsx
index 7f737257..2287da94 100644
--- a/src/screens/settings/BrowseSettings.tsx
+++ b/src/screens/settings/BrowseSettings.tsx
@@ -12,7 +12,7 @@ import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import Switch from '@mui/material/Switch';
-import { NavBarContext } from '@/components/context/NavbarContext.tsx';
+import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
 import { NumberSetting } from '@/modules/core/components/settings/NumberSetting.tsx';
 import { MutableListSetting } from '@/modules/core/components/settings/MutableListSetting.tsx';
diff --git a/src/screens/settings/DownloadSettings.tsx b/src/screens/settings/DownloadSettings.tsx
index e433deb6..bee4a87a 100644
--- a/src/screens/settings/DownloadSettings.tsx
+++ b/src/screens/settings/DownloadSettings.tsx
@@ -14,7 +14,7 @@ import ListItemText from '@mui/material/ListItemText';
 import Switch from '@mui/material/Switch';
 import ListSubheader from '@mui/material/ListSubheader';
 import { TextSetting } from '@/modules/core/components/settings/text/TextSetting.tsx';
-import { NavBarContext } from '@/components/context/NavbarContext.tsx';
+import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { MetadataDownloadSettings, ServerSettings } from '@/typings.ts';
 import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
 import { DownloadAheadSetting } from '@/components/settings/downloads/DownloadAheadSetting.tsx';
diff --git a/src/screens/settings/ServerSettings.tsx b/src/screens/settings/ServerSettings.tsx
index bd881e5d..12f4857c 100644
--- a/src/screens/settings/ServerSettings.tsx
+++ b/src/screens/settings/ServerSettings.tsx
@@ -15,7 +15,7 @@ import ListItemText from '@mui/material/ListItemText';
 import Switch from '@mui/material/Switch';
 import ListSubheader from '@mui/material/ListSubheader';
 import { t as translate } from 'i18next';
-import { NavBarContext } from '@/components/context/NavbarContext.tsx';
+import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
 import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
 import { TextSetting } from '@/modules/core/components/settings/text/TextSetting.tsx';
diff --git a/src/screens/settings/WebUISettings.tsx b/src/screens/settings/WebUISettings.tsx
index ddfe35f0..d338b591 100644
--- a/src/screens/settings/WebUISettings.tsx
+++ b/src/screens/settings/WebUISettings.tsx
@@ -12,7 +12,7 @@ import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import Switch from '@mui/material/Switch';
-import { NavBarContext } from '@/components/context/NavbarContext.tsx';
+import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { ServerSettings } from '@/typings.ts';
 import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
 import { WebUIUpdateIntervalSetting } from '@/components/settings/webUI/WebUIUpdateIntervalSetting.tsx';
diff --git a/src/typings.ts b/src/typings.ts
index d6d2ffe9..552b891c 100644
--- a/src/typings.ts
+++ b/src/typings.ts
@@ -6,11 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { OverridableComponent } from '@mui/material/OverridableComponent';
-import { SvgIconTypeMap } from '@mui/material/SvgIcon';
 import { GetServerSettingsQuery, MetaType } from '@/lib/graphql/generated/graphql.ts';
 import { MetadataMigrationSettings } from '@/modules/migration/Migration.types.ts';
-import { TranslationKey } from '@/Base.types.ts';
 import { MangaMetadataKeys } from '@/modules/manga/MangaCard.types.tsx';
 import { MetadataLibrarySettings } from '@/modules/library/Library.types.ts';
 import { SourceMetadataKeys } from '@/modules/source/Source.types.ts';
@@ -58,11 +55,6 @@ export type AppMetadataKeys =
 
 export type MetadataKeyValuePair = [AppMetadataKeys, AllowedMetadataValueTypes];
 
-export interface INavbarOverride {
-    status: boolean;
-    value: any;
-}
-
 export type MetadataDownloadSettings = {
     deleteChaptersManuallyMarkedRead: boolean;
     deleteChaptersWhileReading: number;
@@ -91,12 +83,4 @@ export interface ISearchSettings {
     ignoreFilters: boolean;
 }
 
-export interface NavbarItem {
-    path: string;
-    title: TranslationKey;
-    SelectedIconComponent: OverridableComponent<SvgIconTypeMap<{}, 'svg'>>;
-    IconComponent: OverridableComponent<SvgIconTypeMap<{}, 'svg'>>;
-    show: 'mobile' | 'desktop' | 'both';
-}
-
 export type ServerSettings = GetServerSettingsQuery['settings'];