diff --git a/frontend/src/layout/navigation-3000/components/Navbar.tsx b/frontend/src/layout/navigation-3000/components/Navbar.tsx
index 33f73e869b6fa..c620d0c9b927f 100644
--- a/frontend/src/layout/navigation-3000/components/Navbar.tsx
+++ b/frontend/src/layout/navigation-3000/components/Navbar.tsx
@@ -3,7 +3,6 @@ import { LemonBadge } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { commandBarLogic } from 'lib/components/CommandBar/commandBarLogic'
 import { Resizer } from 'lib/components/Resizer/Resizer'
-import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
 import { Popover } from 'lib/lemon-ui/Popover'
 import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
@@ -14,7 +13,6 @@ import { userLogic } from 'scenes/userLogic'
 
 import { navigationLogic } from '~/layout/navigation/navigationLogic'
 import { SitePopoverOverlay } from '~/layout/navigation/TopBar/SitePopover'
-import { KeyboardShortcut } from '~/layout/navigation-3000/components/KeyboardShortcut'
 
 import { navigation3000Logic } from '../navigationLogic'
 import { themeLogic } from '../themeLogic'
@@ -47,7 +45,6 @@ export function Navbar(): JSX.Element {
     const { toggleSearchBar } = useActions(commandBarLogic)
 
     const containerRef = useRef<HTMLDivElement | null>(null)
-    const isUsingNewNav = useFeatureFlag('POSTHOG_3000_NAV')
 
     return (
         <nav className="Navbar3000" ref={containerRef}>
@@ -89,15 +86,7 @@ export function Navbar(): JSX.Element {
                             icon={<IconSearch />}
                             title="Search"
                             onClick={toggleSearchBar}
-                            sideIcon={
-                                !isUsingNewNav ? (
-                                    <span className="text-xs">
-                                        <KeyboardShortcut shift k />
-                                    </span>
-                                ) : (
-                                    <></>
-                                )
-                            }
+                            keyboardShortcut={{ command: true, k: true }}
                         />
                         <NavbarButton
                             icon={<ThemeIcon />}
diff --git a/frontend/src/layout/navigation-3000/components/NavbarButton.tsx b/frontend/src/layout/navigation-3000/components/NavbarButton.tsx
index 04536b853e6d3..51996b0419c3f 100644
--- a/frontend/src/layout/navigation-3000/components/NavbarButton.tsx
+++ b/frontend/src/layout/navigation-3000/components/NavbarButton.tsx
@@ -10,11 +10,11 @@ import { sceneLogic } from 'scenes/sceneLogic'
 import { SidebarChangeNoticeContent, useSidebarChangeNotices } from '~/layout/navigation/SideBar/SidebarChangeNotice'
 
 import { navigation3000Logic } from '../navigationLogic'
+import { KeyboardShortcut, KeyboardShortcutProps } from './KeyboardShortcut'
 
 export interface NavbarButtonProps {
     identifier: string
     icon: ReactElement
-    sideIcon?: ReactElement
     title?: string
     shortTitle?: string
     tag?: 'alpha' | 'beta'
@@ -22,94 +22,107 @@ export interface NavbarButtonProps {
     to?: string
     persistentTooltip?: boolean
     active?: boolean
+    keyboardShortcut?: KeyboardShortcutProps
 }
 
 export const NavbarButton: FunctionComponent<NavbarButtonProps> = React.forwardRef<
     HTMLButtonElement,
     NavbarButtonProps
->(({ identifier, shortTitle, title, tag, onClick, persistentTooltip, ...buttonProps }, ref): JSX.Element => {
-    const { aliasedActiveScene } = useValues(sceneLogic)
-    const { isNavCollapsed } = useValues(navigation3000Logic)
-    const isUsingNewNav = useFeatureFlag('POSTHOG_3000_NAV')
+>(
+    (
+        { identifier, shortTitle, title, tag, onClick, persistentTooltip, keyboardShortcut, ...buttonProps },
+        ref
+    ): JSX.Element => {
+        const { aliasedActiveScene } = useValues(sceneLogic)
+        const { isNavCollapsed } = useValues(navigation3000Logic)
+        const isUsingNewNav = useFeatureFlag('POSTHOG_3000_NAV')
 
-    const [hasBeenClicked, setHasBeenClicked] = useState(false)
+        const [hasBeenClicked, setHasBeenClicked] = useState(false)
 
-    const here = aliasedActiveScene === identifier
-    const isNavCollapsedActually = isNavCollapsed || isUsingNewNav
+        const here = aliasedActiveScene === identifier
+        const isNavCollapsedActually = isNavCollapsed || isUsingNewNav
 
-    if (!isUsingNewNav) {
-        buttonProps.active = here
-    }
+        if (!isUsingNewNav) {
+            buttonProps.active = here
+        }
 
-    let content: JSX.Element | string | undefined
-    if (!isNavCollapsedActually) {
-        content = shortTitle || title
-        if (tag) {
-            if (tag === 'alpha') {
-                content = (
-                    <>
-                        <span className="grow">{content}</span>
-                        <LemonTag type="completion" size="small" className="ml-2">
-                            ALPHA
-                        </LemonTag>
-                    </>
-                )
-            } else if (tag === 'beta') {
-                content = (
-                    <>
-                        <span className="grow">{content}</span>
-                        <LemonTag type="warning" size="small" className="ml-2">
-                            BETA
-                        </LemonTag>
-                    </>
-                )
+        let content: JSX.Element | string | undefined
+        if (!isNavCollapsedActually) {
+            content = shortTitle || title
+            if (tag) {
+                if (tag === 'alpha') {
+                    content = (
+                        <>
+                            <span className="grow">{content}</span>
+                            <LemonTag type="completion" size="small" className="ml-2">
+                                ALPHA
+                            </LemonTag>
+                        </>
+                    )
+                } else if (tag === 'beta') {
+                    content = (
+                        <>
+                            <span className="grow">{content}</span>
+                            <LemonTag type="warning" size="small" className="ml-2">
+                                BETA
+                            </LemonTag>
+                        </>
+                    )
+                }
             }
         }
-    }
 
-    const buttonContent = (
-        <LemonButton
-            ref={ref}
-            data-attr={`menu-item-${identifier.toString().toLowerCase()}`}
-            onMouseEnter={() => setHasBeenClicked(false)}
-            onClick={() => {
-                setHasBeenClicked(true)
-                onClick?.()
-            }}
-            className={clsx('NavbarButton', isUsingNewNav && here && 'NavbarButton--here')}
-            fullWidth
-            type="secondary"
-            stealth={true}
-            {...buttonProps}
-        >
-            {content}
-        </LemonButton>
-    )
+        const buttonContent = (
+            <LemonButton
+                ref={ref}
+                data-attr={`menu-item-${identifier.toString().toLowerCase()}`}
+                onMouseEnter={() => setHasBeenClicked(false)}
+                onClick={() => {
+                    setHasBeenClicked(true)
+                    onClick?.()
+                }}
+                className={clsx('NavbarButton', isUsingNewNav && here && 'NavbarButton--here')}
+                fullWidth
+                type="secondary"
+                stealth={true}
+                sideIcon={
+                    !isNavCollapsedActually && keyboardShortcut ? (
+                        <span className="text-xs">
+                            <KeyboardShortcut {...keyboardShortcut} />
+                        </span>
+                    ) : null
+                }
+                {...buttonProps}
+            >
+                {content}
+            </LemonButton>
+        )
 
-    const [notices, onAcknowledged] = useSidebarChangeNotices({ identifier })
+        const [notices, onAcknowledged] = useSidebarChangeNotices({ identifier })
 
-    return (
-        <li className="w-full">
-            {notices.length ? (
-                <Tooltip
-                    title={<SidebarChangeNoticeContent notices={notices} onAcknowledged={onAcknowledged} />}
-                    placement={notices[0].placement ?? 'right'}
-                    delayMs={0}
-                    visible={true}
-                >
-                    {buttonContent}
-                </Tooltip>
-            ) : (
-                <Tooltip
-                    title={isNavCollapsedActually ? (here ? `${title} (you are here)` : title) : null}
-                    placement="right"
-                    delayMs={0}
-                    visible={!persistentTooltip && hasBeenClicked ? false : undefined} // Force-hide tooltip after button click
-                >
-                    {buttonContent}
-                </Tooltip>
-            )}
-        </li>
-    )
-})
+        return (
+            <li className="w-full">
+                {notices.length ? (
+                    <Tooltip
+                        title={<SidebarChangeNoticeContent notices={notices} onAcknowledged={onAcknowledged} />}
+                        placement={notices[0].placement ?? 'right'}
+                        delayMs={0}
+                        visible={true}
+                    >
+                        {buttonContent}
+                    </Tooltip>
+                ) : (
+                    <Tooltip
+                        title={isNavCollapsedActually ? (here ? `${title} (you are here)` : title) : null}
+                        placement="right"
+                        delayMs={0}
+                        visible={!persistentTooltip && hasBeenClicked ? false : undefined} // Force-hide tooltip after button click
+                    >
+                        {buttonContent}
+                    </Tooltip>
+                )}
+            </li>
+        )
+    }
+)
 NavbarButton.displayName = 'NavbarButton'