diff --git a/packages/dev/s2-docs/src/Nav.tsx b/packages/dev/s2-docs/src/Nav.tsx
index eaa6002bbaf..59318a15c4d 100644
--- a/packages/dev/s2-docs/src/Nav.tsx
+++ b/packages/dev/s2-docs/src/Nav.tsx
@@ -188,7 +188,7 @@ export function Nav() {
           );
         }
         return (
-          <Disclosure id={name} key={name} isQuiet density="spacious" defaultExpanded={name === 'Components' || name === currentPage.exports?.section} styles={style({minWidth: 185})}>
+          <Disclosure id={name} key={name} isQuiet density="spacious" defaultExpanded={name === 'Components' || name === currentPage.exports?.section || name === currentPage.exports?.group} styles={style({minWidth: 185})}>
             <DisclosureTitle>{name}</DisclosureTitle>
             <DisclosurePanel>
               <div className={style({paddingStart: space(18)})}>{nav}</div>
@@ -255,10 +255,19 @@ export function SideNavItem(props) {
 }
 
 export function SideNavLink(props) {
-  let linkRef = useRef(null);
+  let linkRef = useRef<HTMLAnchorElement | null>(null);
   let selected = useContext(SideNavContext);
   let {isExternal, ...linkProps} = props;
-  
+
+  useEffect(() => {
+    let link = linkRef.current;
+    if (!link || !props.isSelected) {
+      return;
+    }
+
+    link.scrollIntoView({block: 'start', behavior: 'smooth'});
+  }, [props.isSelected]);
+
   return (
     <BaseLink
       {...linkProps}
@@ -283,7 +292,8 @@ export function SideNavLink(props) {
         },
         textDecoration: 'none',
         borderRadius: 'default',
-        transition: 'default'
+        transition: 'default',
+        scrollMarginTop: 64
       })}>
       {(renderProps) => (<>
         <span