diff --git a/src/app/components/Footer.tsx b/src/app/components/Footer.tsx
index 65cfdc1c..f22192a6 100644
--- a/src/app/components/Footer.tsx
+++ b/src/app/components/Footer.tsx
@@ -181,12 +181,12 @@ function flattenSidebar(sidebar: SidebarItem[]) {
   const items: SidebarItem[] = []
 
   for (const item of sidebar) {
+    if (item.link) {
+      items.push(item)
+    }
     if (item.items) {
       items.push(...flattenSidebar(item.items))
-      continue
     }
-
-    items.push(item)
   }
 
   return items
diff --git a/src/app/components/Sidebar.css.ts b/src/app/components/Sidebar.css.ts
index e52519f4..b5da1ff5 100644
--- a/src/app/components/Sidebar.css.ts
+++ b/src/app/components/Sidebar.css.ts
@@ -195,6 +195,20 @@ export const sectionTitle = style(
   'sectionTitle',
 )
 
+export const sectionTitleLink = style(
+  {
+    selectors: {
+      '&:hover': {
+        color: primitiveColorVars.text,
+      },
+      '&[data-active="true"]': {
+        color: primitiveColorVars.textAccent,
+      },
+    },
+  },
+  'sectionTitleLink',
+)
+
 export const sectionCollapse = style(
   {
     color: primitiveColorVars.text3,
diff --git a/src/app/components/Sidebar.tsx b/src/app/components/Sidebar.tsx
index 6f1e8f4f..f0766b85 100644
--- a/src/app/components/Sidebar.tsx
+++ b/src/app/components/Sidebar.tsx
@@ -198,7 +198,7 @@ function SidebarItem(props: {
                   data-active={Boolean(match)}
                   onClick={onClick}
                   className={clsx(
-                    depth === 0 ? styles.sectionTitle : styles.item,
+                    depth === 0 ? [styles.sectionTitle, styles.sectionTitleLink] : styles.item,
                     hasActiveChildItem && styles.sectionHeaderActive,
                   )}
                   to={item.link}