diff --git a/src/renderer/components/nav-bar/nav-bar-items/shared-nav-bar-item.component.tsx b/src/renderer/components/nav-bar/nav-bar-items/shared-nav-bar-item.component.tsx
index a820cdfc..d32dcb9c 100644
--- a/src/renderer/components/nav-bar/nav-bar-items/shared-nav-bar-item.component.tsx
+++ b/src/renderer/components/nav-bar/nav-bar-items/shared-nav-bar-item.component.tsx
@@ -1,28 +1,20 @@
 import { Link } from "react-router-dom";
 import { BsmIcon } from "renderer/components/svgs/bsm-icon.component";
-import { useObservable } from "renderer/hooks/use-observable.hook";
 import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
-import { PageStateService } from "renderer/services/page-state.service";
-import { NavBarItem } from "./nav-bar-item.component";
-import { useService } from "renderer/hooks/use-service.hook";
 import Tippy from "@tippyjs/react";
 import { useTranslation } from "renderer/hooks/use-translation.hook";
 
 export function SharedNavBarItem() {
-    const pageState = useService(PageStateService);
 
     const t = useTranslation();
-    const route = useObservable(() => pageState.route$);
     const color = useThemeColor("first-color");
 
     return (
-        <NavBarItem isActive={route === "/shared"}>
             <Tippy content={t("nav-bar.shared.tooltip")} className="font-bold !bg-neutral-900" placement="right-end" arrow={false} duration={[100, 0]} animation="shift-away-subtle">
                 <Link to="shared" className="w-full flex items-center justify-start content-center max-w-full h-[30px]">
                     <BsmIcon className="w-[19px] h-[19px] mr-[5px] shrink-0 brightness-125" icon="link" style={{ color }} />
                     <span className="dark:text-gray-200 text-gray-800 font-bold tracking-wide">{t("nav-bar.shared.text")}</span>
                 </Link>
             </Tippy>
-        </NavBarItem>
     );
 }
diff --git a/src/renderer/components/nav-bar/nav-bar.component.tsx b/src/renderer/components/nav-bar/nav-bar.component.tsx
index 295f2336..c747693b 100644
--- a/src/renderer/components/nav-bar/nav-bar.component.tsx
+++ b/src/renderer/components/nav-bar/nav-bar.component.tsx
@@ -14,10 +14,13 @@ import { useService } from "renderer/hooks/use-service.hook";
 import { distinctUntilChanged } from "rxjs";
 import equal from "fast-deep-equal";
 import { BsDownloaderService } from "renderer/services/bs-version-download/bs-downloader.service";
+import { PageStateService } from "renderer/services/page-state.service";
+import { NavBarItem } from "./nav-bar-items/nav-bar-item.component";
 
 export function NavBar() {
     const versionManager = useService(BSVersionManagerService);
     const versionDownloader = useService(BsDownloaderService);
+    const pageState = useService(PageStateService);
 
     const downloadingVersion = useObservable(() => versionDownloader.downloadingVersion$.pipe(distinctUntilChanged(equal)));
     const installedVersions = useObservable(() => versionManager.installedVersions$);
@@ -25,6 +28,8 @@ export function NavBar() {
     const color = useThemeColor("first-color");
     const t = useTranslation();
 
+    const route = useObservable(() => pageState.route$);
+
     function listVersions(){
         const versions = Array.isArray(installedVersions) ? [...installedVersions] : [];
 
@@ -39,25 +44,29 @@ export function NavBar() {
         <nav id="nav-bar" className="z-10 flex flex-col h-full max-h-full items-center p-1">
             <BsManagerIcon className="relative aspect-square w-16 h-16 mb-3" />
             <ol id="versions" className="w-fit max-w-[150px] relative left-[2px] grow overflow-y-hidden scrollbar-track-transparent scrollbar-default hover:overflow-y-scroll">
-                <SharedNavBarItem />
+                <NavBarItem isActive={route === "/shared"}>
+                    <SharedNavBarItem />
+                </NavBarItem>
                 <NavBarSpliter />
                 {listVersions().map(version => (
                     <BsVersionItem key={JSON.stringify(version)} version={version} />
                 ))}
             </ol>
             <NavBarSpliter />
-            <div className="w-full pb-2 flex flex-col items-center content-center justify-start gap-1">
+            <NavBarItem isActive={route === "/blah"}>
                 <Tippy placement="right" content={t("nav-bar.add-version")} className="!bg-neutral-900" arrow={false}>
                     <Link className="rounded-md w-9 h-9 flex justify-center items-center hover:bg-light-main-color-3 dark:hover:bg-main-color-3" to="blah">
                         <BsmIcon icon="add" className="text-blue-500 h-[34px]" style={{ color }} />
                     </Link>
                 </Tippy>
-                <Tippy placement="right" content={t("nav-bar.settings")} className="!bg-neutral-900" arrow={false}>
+            </NavBarItem>
+            <NavBarItem isActive={route === "/settings"}>
+            <Tippy placement="right" content={t("nav-bar.settings")} className="!bg-neutral-900" arrow={false}>
                     <Link className="rounded-md w-9 h-9 flex justify-center items-center hover:bg-light-main-color-3 dark:hover:bg-main-color-3" to="settings">
                         <BsmIcon icon="settings" className="text-blue-500 h-7" style={{ color }} />
                     </Link>
                 </Tippy>
-            </div>
+            </NavBarItem>
         </nav>
     );
 }