diff --git a/common/App.svelte b/common/App.svelte
index dc1a2b2..a590d10 100644
--- a/common/App.svelte
+++ b/common/App.svelte
@@ -64,10 +64,10 @@
 
 <div class='page-wrapper with-transitions bg-dark position-relative' data-sidebar-type='overlayed-all'>
   <Menubar bind:page={$page} />
-  <Profiles />
   <Sidebar bind:page={$page} />
   <div class='overflow-hidden content-wrapper h-full'>
     <Toaster visibleToasts={6} position='top-right' theme='dark' richColors duration={10000} closeButton />
+    <Profiles />
     <ViewAnime bind:overlay={$overlay} />
     <TorrentModal bind:overlay={$overlay} />
     <Router bind:page={$page} bind:overlay={$overlay} />
diff --git a/common/components/Navbar.svelte b/common/components/Navbar.svelte
index fb1fa2b..3f39e98 100644
--- a/common/components/Navbar.svelte
+++ b/common/components/Navbar.svelte
@@ -1,6 +1,8 @@
 <script>
   import { getContext } from 'svelte'
-  import { media } from '../views/Player/MediaHandler.svelte'
+  import { rss } from '@/views/TorrentSearch/TorrentModal.svelte'
+  import { media } from '@/views/Player/MediaHandler.svelte'
+  import { profileView } from './Profiles.svelte'
   import { click } from '@/modules/click.js'
   import IPC from '@/modules/ipc.js'
   import NavbarLink from './NavbarLink.svelte'
@@ -17,25 +19,27 @@
 <nav class='navbar navbar-fixed-bottom d-block d-md-none border-0 bg-dark'>
   <div class='navbar-menu h-full d-flex flex-row justify-content-center align-items-center m-0 pb-5' class:animate={page !== 'player'}>
     <img src='./logo_filled.png' class='w-50 h-50 m-10 pointer p-5' alt='ico' use:click={close} />
-    <NavbarLink click={() => { page = 'search'; if ($view) $view = null }} _page='search' css='ml-auto' icon='search' {page} let:active>
-      <MagnifyingGlass size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' stroke-width={active ? '2' : '0'} stroke='currentColor' />
+    <NavbarLink click={() => { page = 'search'; if ($view) $view = null }} _page='search' css='ml-auto' icon='search' {page} overlay={($view || $profileView || $rss) && 'active'} let:active>
+      <MagnifyingGlass size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' stroke-width={active ? '1' : '0'} stroke='currentColor' />
     </NavbarLink>
-    <NavbarLink click={() => { page = 'schedule' }} _page='schedule' icon='schedule' {page} let:active>
-      <Clock size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
+    <NavbarLink click={() => { page = 'schedule' }} _page='schedule' icon='schedule' {page} overlay={($view || $profileView || $rss) && 'active'} let:active>
+      <Clock size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3' : '2'} />
     </NavbarLink>
     {#if $media?.media}
-      <NavbarLink click={() => { $view = $media.media }} icon='queue_music' {page} let:active>
-        <ListVideo size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
+      {@const currentMedia = $view}
+      {@const active = $view && !$profileView && 'active'}
+      <NavbarLink click={() => { $view = (currentMedia?.id === $media.media.id && active ? null : $media.media) }} icon='queue_music' {page} overlay={active} nowPlaying={$view === $media.media} let:active>
+        <ListVideo size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3' : '2'} />
       </NavbarLink>
     {/if}
-    <NavbarLink click={() => { page = 'watchtogether' }} _page='watchtogether' icon='groups' {page} let:active>
-      <Users size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
+    <NavbarLink click={() => { page = 'watchtogether' }} _page='watchtogether' icon='groups' {page} overlay={($view || $profileView || $rss) && 'active'} let:active>
+      <Users size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3' : '2'} />
     </NavbarLink>
     <NavbarLink click={() => { IPC.emit('open', 'https://github.com/sponsors/ThaUnknown/') }} icon='favorite' css='ml-auto donate' {page} let:active>
-      <Heart size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded donate' strokeWidth={active ? '3.5' : '2'} fill='currentColor' />
+      <Heart size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded donate' strokeWidth={active ? '3' : '2'} fill='currentColor' />
     </NavbarLink>
-    <NavbarLink click={() => { page = 'settings' }} _page='settings' icon='settings' {page} let:active>
-      <Settings size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
+    <NavbarLink click={() => { page = 'settings' }} _page='settings' icon='settings' {page} overlay={($view || $profileView || $rss) && 'active'} let:active>
+      <Settings size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3' : '2'} />
     </NavbarLink>
   </div>
 </nav>
diff --git a/common/components/NavbarLink.svelte b/common/components/NavbarLink.svelte
index cb7b102..c13ffa1 100644
--- a/common/components/NavbarLink.svelte
+++ b/common/components/NavbarLink.svelte
@@ -7,14 +7,16 @@
   export let _page = ''
   export let css = ''
   export let icon = ''
+  export let nowPlaying = false
+  export let overlay = ''
 </script>
 
 <div
   class='navbar-link navbar-link-with-icon pointer overflow-hidden {css}'
-  use:click={() => { _click(); if (!icon.includes("favorite")) { window.dispatchEvent(new Event('overlay-check')) } } }>
+  use:click={() => { if (!icon.includes("favorite")) { window.dispatchEvent(new Event('overlay-check')) }  _click() } }>
 
   <span class='rounded d-flex'>
-    <slot active={page === _page}>{icon}</slot>
+    <slot active={(page === _page && overlay !== 'active') || (overlay === 'active' && nowPlaying)}>{icon}</slot>
   </span>
 </div>
 
diff --git a/common/components/Profiles.svelte b/common/components/Profiles.svelte
index 030e6b7..376bf20 100644
--- a/common/components/Profiles.svelte
+++ b/common/components/Profiles.svelte
@@ -86,9 +86,15 @@
     if (keyCode === 27) close()
   }
   $: $profileView && modal?.focus()
+
+  window.addEventListener('overlay-check', () => {
+    if ($profileView) {
+      close()
+    }
+  })
 </script>
 
-<div class='modal z-101' class:show={$profileView}>
+<div class='modal z-55' class:show={$profileView}>
   {#if $profileView}
     <div class='modal-dialog' on:pointerup|self={close} on:keydown={checkClose} tabindex='-1' role='button' bind:this={modal}>
       <div class='modal-content w-auto mw-400 d-flex justify-content-center flex-column'>
@@ -183,6 +189,9 @@
   .mt-2 {
     margin-top: .4rem;
   }
+  .z-55 {
+    z-index: 55;
+  }
   .mw-400 {
     min-width: 35rem;
   }
diff --git a/common/components/Sidebar.svelte b/common/components/Sidebar.svelte
index 41e181e..f69273f 100644
--- a/common/components/Sidebar.svelte
+++ b/common/components/Sidebar.svelte
@@ -1,9 +1,10 @@
 <script>
   import { getContext } from 'svelte'
+  import { rss } from '@/views/TorrentSearch/TorrentModal.svelte'
   import { media } from '@/views/Player/MediaHandler.svelte'
+  import { profileView } from './Profiles.svelte'
   import { settings } from '@/modules/settings.js'
   import { toast } from 'svelte-sonner'
-  import { profileView } from './Profiles.svelte'
   import Helper from '@/modules/helper.js'
   import IPC from '@/modules/ipc.js'
   import SidebarLink from './SidebarLink.svelte'
@@ -27,40 +28,42 @@
 <div class='sidebar z-30 d-md-block' class:animated={$settings.expandingSidebar}>
   <div class='sidebar-overlay pointer-events-none h-full position-absolute' />
   <div class='sidebar-menu h-full d-flex flex-column justify-content-center align-items-center m-0 pb-5' class:animate={page !== 'player'}>
-    <SidebarLink click={() => { $profileView = true }} icon='login' text={Helper.getUser() ? 'Profiles' : 'Login'} css='mt-auto' {page} image={Helper.getUserAvatar()}>
+    <SidebarLink click={() => { $profileView = !$profileView }} icon='login' text={Helper.getUser() ? 'Profiles' : 'Login'} css='mt-auto' {page} overlay={$profileView && 'profile'} image={Helper.getUserAvatar()}>
       <LogIn size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' />
     </SidebarLink>
-    <SidebarLink click={() => { page = 'home'; if ($view) $view = null }} _page='home' text='Home' {page} let:active>
-      <Home size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
+    <SidebarLink click={() => { page = 'home'; if ($view) $view = null }} _page='home' text='Home' {page} overlay={($view || $profileView || $rss) && 'active'} let:active>
+      <Home size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3' : '2'} />
     </SidebarLink>
-    <SidebarLink click={() => { page = 'search'; if ($view) $view = null }} _page='search' text='Search' {page} let:active>
-      <MagnifyingGlass size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' stroke-width={active ? '2' : '0'} stroke='currentColor' />
+    <SidebarLink click={() => { page = 'search'; if ($view) $view = null }} _page='search' text='Search' {page} overlay={($view || $profileView || $rss) && 'active'} let:active>
+      <MagnifyingGlass size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' stroke-width={active ? '1' : '0'} stroke='currentColor' />
     </SidebarLink>
-    <SidebarLink click={() => { page = 'schedule' }} _page='schedule' icon='schedule' text='Schedule' {page} let:active>
-      <Clock size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
+    <SidebarLink click={() => { page = 'schedule' }} _page='schedule' icon='schedule' text='Schedule' {page} overlay={($view || $profileView || $rss) && 'active'} let:active>
+      <Clock size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3' : '2'} />
     </SidebarLink>
     {#if $media?.media}
-      <SidebarLink click={() => { $view = $media.media }} icon='queue_music' text='Now Playing' {page} let:active>
-        <ListVideo size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
+      {@const currentMedia = $view}
+      {@const active = $view && !$profileView && 'active'}
+      <SidebarLink click={() => { $view = (currentMedia?.id === $media.media.id && active ? null : $media.media); }} icon='queue_music' text='Now Playing' {page} overlay={active} nowPlaying={$view === $media.media} let:active>
+        <ListVideo size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3' : '2'} />
       </SidebarLink>
     {/if}
-    <SidebarLink click={() => { page = 'watchtogether' }} _page='watchtogether' icon='groups' text='Watch Together' {page} let:active>
-      <Users size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
+    <SidebarLink click={() => { page = 'watchtogether' }} _page='watchtogether' icon='groups' text='Watch Together' {page} overlay={($view || $profileView || $rss) && 'active'} let:active>
+      <Users size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3' : '2'} />
     </SidebarLink>
     <SidebarLink click={() => { IPC.emit('open', 'https://github.com/sponsors/ThaUnknown/') }} icon='favorite' text='Support This App' css='mt-auto' {page} let:active>
-      <Heart size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded donate' strokeWidth={active ? '3.5' : '2'} fill='currentColor' />
+      <Heart size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded donate' strokeWidth={active ? '3' : '2'} fill='currentColor' />
     </SidebarLink>
     {#if updateState === 'downloading'}
       <SidebarLink click={() => { toast('Update is downloading...') }} icon='download' text='Update Downloading...' {page} let:active>
-        <Download size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
+        <Download size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3' : '2'} />
       </SidebarLink>
     {:else if updateState === 'ready'}
       <SidebarLink click={() => { IPC.emit('quit-and-install') }} icon='download' text='Update Ready!' {page} let:active>
-        <Download size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded update' strokeWidth={active ? '3.5' : '2'} />
+        <Download size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded update' strokeWidth={active ? '3' : '2'} />
       </SidebarLink>
     {/if}
-    <SidebarLink click={() => { page = 'settings' }} _page='settings' icon='settings' text='Settings' {page} let:active>
-      <Settings size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
+    <SidebarLink click={() => { page = 'settings' }} _page='settings' icon='settings' text='Settings' {page} overlay={($view || $profileView || $rss) && 'active'} let:active>
+      <Settings size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3' : '2'} />
     </SidebarLink>
   </div>
 </div>
diff --git a/common/components/SidebarLink.svelte b/common/components/SidebarLink.svelte
index 16f2739..1dfc6bf 100644
--- a/common/components/SidebarLink.svelte
+++ b/common/components/SidebarLink.svelte
@@ -9,21 +9,24 @@
   export let css = ''
   export let text = ''
   export let icon = ''
+  export let nowPlaying = false
+  export let overlay = ''
 </script>
 
 <div class='sidebar-link sidebar-link-with-icon pointer overflow-hidden {css}'
-  use:click={() => { _click(); if (!icon.includes("login") && !icon.includes("favorite")) { window.dispatchEvent(new Event('overlay-check')) } } }>
+  use:click={() => { if (!icon.includes("login") && !icon.includes("favorite")) { window.dispatchEvent(new Event('overlay-check')) } _click() } }>
   <span class='text-nowrap d-flex align-items-center w-full h-full'>
     {#if image}
       <span class='rounded d-flex'>
         <img src={image} class='h-30 rounded' alt='logo' />
       </span>
-      <span class='text ml-20'>{text}</span>
+      <span class='text ml-20 {overlay === "profile" ? "font-weight-bolder font-size-18" : ""}'>{text}</span>
     {:else}
+      {@const active = (page === _page && overlay !== 'active') || (overlay === 'active' && nowPlaying)}
       <span class='rounded d-flex'>
-        <slot active={page === _page}>{icon}</slot>
+        <slot active={active}>{icon}</slot>
       </span>
-      <span class='text ml-20'>{text}</span>
+      <span class='text ml-20 {active ? "font-weight-bolder font-size-18" : ""}'>{text}</span>
     {/if}
   </span>
 </div>