diff --git a/app/components/SideNav.module.css b/app/components/SideNav.module.css
index 5c560d74b..59e502f93 100644
--- a/app/components/SideNav.module.css
+++ b/app/components/SideNav.module.css
@@ -4,32 +4,24 @@
 	position: sticky;
 	left: 0;
 	top: var(--sticky-top);
-	display: flex;
-	flex-direction: column;
-	gap: var(--s-2);
-	overflow-y: auto;
-	max-height: calc(100vh - var(--layout-nav-height) - var(--s-5));
 	height: fit-content;
 	min-width: var(--side-nav-width);
 	max-width: var(--side-nav-width);
-	padding: var(--s-4) var(--s-2-5);
 	border: 1.5px solid var(--color-border);
 	border-radius: var(--rounded);
 	margin: var(--s-2-5);
+	overflow: hidden;
+}
 
-	&::-webkit-scrollbar,
-	&::-webkit-scrollbar-track {
-		background-color: transparent;
-		height: 18px;
-		width: 18px;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background-color: var(--color-text-accent-transparent);
-		border: 6px solid transparent;
-		border-radius: 99999px;
-		background-clip: content-box;
-	}
+.sideNavInner {
+	display: flex;
+	flex-direction: column;
+	gap: var(--s-2);
+	padding: var(--s-1-5);
+	padding-block-end: var(--s-2);
+	overflow-y: auto;
+	max-height: calc(100vh - var(--sticky-top) - var(--s-3-5));
+	border-radius: calc(var(--rounded) - var(--s-1-5));
 }
 
 .sideNavLink {
diff --git a/app/components/SideNav.tsx b/app/components/SideNav.tsx
index 79c2dd20c..8bf4701c1 100644
--- a/app/components/SideNav.tsx
+++ b/app/components/SideNav.tsx
@@ -10,8 +10,8 @@ export function SideNav({
 	className?: string;
 }) {
 	return (
-		<nav className={clsx(styles.sideNav, "scrollbar", className)}>
-			{children}
+		<nav className={clsx(styles.sideNav, className)}>
+			<div className={clsx(styles.sideNavInner, "scrollbar")}>{children}</div>
 		</nav>
 	);
 }