diff --git a/components/SidebarNavigation/react/_SidebarNavigationGroup.tsx b/components/SidebarNavigation/react/_SidebarNavigationGroup.tsx
index 6698ff7f2..49d767956 100644
--- a/components/SidebarNavigation/react/_SidebarNavigationGroup.tsx
+++ b/components/SidebarNavigation/react/_SidebarNavigationGroup.tsx
@@ -25,7 +25,7 @@ export const SidebarNavigationGroup: React.FC<SidebarNavigationGroupProps> = ({
         depth={depth}
       />
       <li className="relative list-none p-0">
-        <ul className={clsx('list-none pl-[32px]')}>
+        <ul className={clsx('list-none pl-[32px] py-[8px]')}>
           {group.items.map((item, index) => {
             return (
               <SidebarNavigationLink
diff --git a/components/SidebarNavigation/react/_SidebarNavigationHead.tsx b/components/SidebarNavigation/react/_SidebarNavigationHead.tsx
index 20966b13f..e21c2bcf6 100644
--- a/components/SidebarNavigation/react/_SidebarNavigationHead.tsx
+++ b/components/SidebarNavigation/react/_SidebarNavigationHead.tsx
@@ -36,23 +36,23 @@ export const SidebarNavigationHead: React.FC<
         variant="outline-dark"
         onClick={handleButtonClick}
       >
-        <div className="flex flex-row center">
+        <div className="flex flex-row items-center">
           {/* Organization logo, or placeholder icon */}
           {currentOrganization?.icon && (
-            <div className="mr-[16px] py-2 pl-0]">
+            <div className="mr-[16px] py-2">
               <currentOrganization.icon
                 style={{ width: '32px', height: '32px' }}
-                strokeColor="purple-500"
+                strokeColor="purple-400"
                 fillColor="white-100"
                 size={24}
               />
             </div>
           )}
-          <div className="flex flex-col items-start gap-[0px]">
-            <div className="text-sm text-gray-600 font-normal">
+          <div className="flex flex-col items-start gap-[6px]">
+            <div className="text-gray-600 font-normal text-[14px] leading-[10px]">
               {currentOrganization.name}
             </div>
-            <div>{currentProject}</div>
+            <div className="text-[16px] leading-[16px]">{currentProject}</div>
           </div>
         </div>
       </Button>
diff --git a/components/SidebarNavigation/react/_SidebarNavigationLink.tsx b/components/SidebarNavigation/react/_SidebarNavigationLink.tsx
index c078510d9..9103053c3 100644
--- a/components/SidebarNavigation/react/_SidebarNavigationLink.tsx
+++ b/components/SidebarNavigation/react/_SidebarNavigationLink.tsx
@@ -11,19 +11,18 @@ export const SidebarNavigationLink: React.FC<
     <li
       ref={activeLIRef}
       className={clsx('relative list-none p-0', {
-        [`px-[20px]`]: depth == 0,
+        [`px-[20px] mt-[16px]`]: depth == 0,
         [`p-0 border-l-[1px] border-gray-100/10`]: depth == 1,
       })}
     >
       <a
-        className={clsx(
-          [`flex items-center group relative inline-block py-[8px]`],
-          {
-            'text-indigo-300': item.active,
-            [`text-gray-500 text-16px leading-[24px]`]: depth == 0,
-            'text-gray-500 leading-[20px] text-[14px] pl-[16px] ': depth == 1,
-          },
-        )}
+        className={clsx([`flex items-center group relative inline-block`], {
+          'text-indigo-300': item.active,
+          [`text-gray-500 text-16px leading-[24px] pl-[0] py-[8px]`]:
+            depth == 0,
+          'text-gray-500 leading-[20px] text-[14px] pl-[34px] py-[8px]':
+            depth == 1,
+        })}
         href={item.href}
       >
         {/* Active indicator */}
@@ -42,7 +41,7 @@ export const SidebarNavigationLink: React.FC<
 
         {/* Add optional icon */}
         {item.icon && (
-          <span className="mr-2">
+          <span className="mr-[24px]">
             <item.icon
               size="24"
               strokeColor="white-900"