diff --git a/packages/app/src/Pages/Layout/NavSidebar.tsx b/packages/app/src/Pages/Layout/NavSidebar.tsx
index 7cb6384d..3029dfb4 100644
--- a/packages/app/src/Pages/Layout/NavSidebar.tsx
+++ b/packages/app/src/Pages/Layout/NavSidebar.tsx
@@ -59,10 +59,14 @@ const MENU_ITEMS = [
 ];
 
 const getNavLinkClass = (isActive: boolean, narrow: boolean) => {
-  const c = isActive
-    ? "rounded-full p-3 active font-bold hover:bg-bg-secondary hover:no-underline flex flex-1 flex-row items-center"
-    : "rounded-full p-3 hover:no-underline hover:bg-bg-secondary flex flex-row items-center";
-  return classNames(c, { "xl:px-4": !narrow });
+  const baseClasses =
+    "rounded-full p-3 flex flex-row items-center transition-colors duration-200 hover:bg-bg-secondary hover:no-underline";
+  const activeClasses = "active font-bold";
+
+  return classNames(baseClasses, {
+    [activeClasses]: isActive,
+    "xl:px-4": !narrow,
+  });
 };
 
 export default function NavSidebar({ narrow = false }) {
@@ -77,8 +81,8 @@ export default function NavSidebar({ narrow = false }) {
   const { formatMessage } = useIntl();
 
   const className = classNames(
-    { "xl:w-56 xl:gap-3 xl:items-start": !narrow },
-    "overflow-y-auto hide-scrollbar sticky items-center border-r border-border-color top-0 z-20 h-screen max-h-screen hidden md:flex flex-col px-2 py-4 flex-shrink-0 gap-2",
+    { "xl:w-56 xl:gap-2 xl:items-start": !narrow },
+    "overflow-y-auto hide-scrollbar sticky items-center border-r border-border-color top-0 z-20 h-screen max-h-screen hidden md:flex flex-col px-2 py-4 flex-shrink-0 gap-1",
   );
 
   const readOnlyIcon = readonly && (
@@ -93,8 +97,8 @@ export default function NavSidebar({ narrow = false }) {
       <div className="mt-1 flex-grow flex flex-col justify-between">
         <div
           className={classNames(
-            { "xl:items-start": !narrow, "xl:gap-3": !narrow },
-            "gap-2 flex flex-col items-center text-lg",
+            { "xl:items-start": !narrow, "xl:gap-2": !narrow },
+            "gap-1 flex flex-col items-center text-lg",
           )}>
           {MENU_ITEMS.filter(a => {
             if ((CONFIG.hideFromNavbar ?? []).includes(a.link)) {
@@ -137,8 +141,8 @@ export default function NavSidebar({ narrow = false }) {
       </div>
       {publicKey && (
         <>
-          <ProfileLink pubkey={publicKey} user={profile}>
-            <div className="mt-2 flex flex-row items-center font-bold text-md p-1 xl:px-4 xl:py-3 hover:bg-bg-secondary rounded-full cursor-pointer hover:no-underline">
+          <ProfileLink pubkey={publicKey} user={profile} className="hover:no-underline">
+            <div className="mt-2 flex flex-row items-center justify-center font-bold text-md p-1 xl:px-4 xl:py-3 hover:bg-bg-secondary rounded-full cursor-pointer">
               <Avatar pubkey={publicKey} user={profile} size={40} icons={readOnlyIcon} />
               {!narrow && <span className="hidden xl:inline ml-3">{profile?.name}</span>}
             </div>