diff --git a/client/src/CommandBar/Body/Item.tsx b/client/src/CommandBar/Body/Item.tsx
index 573db25a13..dc0ffd9d7c 100644
--- a/client/src/CommandBar/Body/Item.tsx
+++ b/client/src/CommandBar/Body/Item.tsx
@@ -23,24 +23,23 @@ import {
 } from '../../services/storage';
 
 type Props = CommandBarItemGeneralType & {
-  isFocused?: boolean;
-  i: number;
+  index: string;
+  focusedIndex: string;
   isFirst?: boolean;
   isWithCheckmark?: boolean;
-  setFocusedIndex: Dispatch<SetStateAction<number>>;
+  setFocusedIndex: Dispatch<SetStateAction<string>>;
   customRightElement?: ReactElement;
   focusedItemProps?: Record<string, any>;
   disableKeyNav?: boolean;
   itemKey: string;
-  onlyOneClickable?: string;
 };
 
 const CommandBarItem = ({
-  isFocused,
+  focusedIndex,
   Icon,
   label,
   shortcut,
-  i,
+  index,
   setFocusedIndex,
   id,
   footerBtns,
@@ -54,7 +53,6 @@ const CommandBarItem = ({
   isWithCheckmark,
   closeOnClick,
   itemKey,
-  onlyOneClickable,
 }: Props) => {
   const ref = useRef<HTMLButtonElement>(null);
   const shortcutKeys = useShortcuts(shortcut);
@@ -63,7 +61,7 @@ const CommandBarItem = ({
   );
 
   useEffect(() => {
-    if (isFocused) {
+    if (focusedIndex === index) {
       setFocusedItem({
         footerHint,
         footerBtns,
@@ -71,21 +69,18 @@ const CommandBarItem = ({
       });
       ref.current?.scrollIntoView({ block: 'nearest' });
     }
-  }, [isFocused, footerBtns, footerHint, focusedItemProps]);
+  }, [focusedIndex, index, footerBtns, footerHint, focusedItemProps]);
 
   const handleMouseMove = useCallback(
     (e: React.MouseEvent) => {
       if (e.movementX || e.movementY) {
-        setFocusedIndex(i);
+        setFocusedIndex(index);
       }
     },
-    [i, setFocusedIndex],
+    [index, setFocusedIndex],
   );
 
   const handleClick = useCallback(() => {
-    if (onlyOneClickable && onlyOneClickable !== itemKey) {
-      return;
-    }
     if (onClick) {
       onClick();
       if (closeOnClick) {
@@ -101,13 +96,13 @@ const CommandBarItem = ({
       });
     }
     updateArrayInStorage(RECENT_COMMANDS_KEY, itemKey);
-  }, [id, onClick, closeOnClick, itemKey, onlyOneClickable]);
+  }, [id, onClick, closeOnClick, itemKey]);
 
   const handleKeyEvent = useCallback(
     (e: KeyboardEvent) => {
       const shortAction = footerBtns.find((b) => checkEventKeys(e, b.shortcut));
       if (
-        (isFocused && shortAction && !shortAction.action) ||
+        (focusedIndex === index && shortAction && !shortAction.action) ||
         checkEventKeys(e, shortcut)
       ) {
         e.preventDefault();
@@ -115,30 +110,27 @@ const CommandBarItem = ({
         handleClick();
         return;
       }
-      if (isFocused && shortAction?.action) {
+      if (focusedIndex === index && shortAction?.action) {
         e.preventDefault();
         e.stopPropagation();
         shortAction.action();
       }
     },
-    [isFocused, shortcut, footerBtns, handleClick],
-  );
-  useKeyboardNavigation(
-    handleKeyEvent,
-    disableKeyNav || (!!onlyOneClickable && onlyOneClickable !== itemKey),
+    [focusedIndex === index, shortcut, footerBtns, handleClick],
   );
+  useKeyboardNavigation(handleKeyEvent, disableKeyNav);
 
   return (
     <button
       className={`flex items-center gap-3 rounded-md px-2 h-10 ${
-        isFocused && !(onlyOneClickable && onlyOneClickable !== itemKey)
+        focusedIndex === index
           ? 'bg-bg-base-hover text-label-title'
           : 'text-label-base'
       } text-left ${isFirst ? 'scroll-mt-8' : ''}`}
       onMouseMove={handleMouseMove}
       onClick={handleClick}
+      data-node-index={index}
       ref={ref}
-      disabled={!!onlyOneClickable && onlyOneClickable !== itemKey}
     >
       <div
         className={`rounded-6 w-6 h-6 flex items-center justify-center relative ${
diff --git a/client/src/CommandBar/Body/Section.tsx b/client/src/CommandBar/Body/Section.tsx
index 7548fcc2c1..73f9fca16d 100644
--- a/client/src/CommandBar/Body/Section.tsx
+++ b/client/src/CommandBar/Body/Section.tsx
@@ -9,21 +9,19 @@ import Item from './Item';
 type Props = {
   title?: string;
   items: (CommandBarItemCustomType | CommandBarItemGeneralType)[];
-  focusedIndex: number;
-  setFocusedIndex: Dispatch<SetStateAction<number>>;
-  offset: number;
+  focusedIndex: string;
+  setFocusedIndex: Dispatch<SetStateAction<string>>;
   disableKeyNav?: boolean;
-  onlyOneClickable?: string;
+  index: string;
 };
 
 const CommandBarBodySection = ({
   title,
   items,
   setFocusedIndex,
-  offset,
   focusedIndex,
   disableKeyNav,
-  onlyOneClickable,
+  index,
 }: Props) => {
   return (
     <div className="flex flex-col select-none">
@@ -33,24 +31,22 @@ const CommandBarBodySection = ({
           <Rest.Component
             {...Rest.componentProps}
             key={key}
-            isFocused={focusedIndex === i + offset}
+            focusedIndex={focusedIndex}
             setFocusedIndex={setFocusedIndex}
             isFirst={i === 0}
-            i={i + offset}
+            index={`${index}-${key}`}
             disableKeyNav={disableKeyNav}
-            onlyOneClickable={onlyOneClickable}
           />
         ) : (
           <Item
             key={key}
             {...Rest}
-            i={i + offset}
-            isFocused={focusedIndex === i + offset}
+            index={`${index}-${key}`}
+            focusedIndex={focusedIndex}
             setFocusedIndex={setFocusedIndex}
             isFirst={i === 0}
             disableKeyNav={disableKeyNav}
             itemKey={key}
-            onlyOneClickable={onlyOneClickable}
           />
         ),
       )}
diff --git a/client/src/CommandBar/Body/index.tsx b/client/src/CommandBar/Body/index.tsx
index e9db36407d..2bce8277b4 100644
--- a/client/src/CommandBar/Body/index.tsx
+++ b/client/src/CommandBar/Body/index.tsx
@@ -1,37 +1,22 @@
-import { memo, useCallback, useEffect, useState } from 'react';
+import { memo, useEffect } from 'react';
 import { CommandBarSectionType } from '../../types/general';
 import useKeyboardNavigation from '../../hooks/useKeyboardNavigation';
+import { useArrowNavigation } from '../../hooks/useArrowNavigation';
 import Section from './Section';
 
 type Props = {
   sections: CommandBarSectionType[];
   disableKeyNav?: boolean;
-  onlyOneClickable?: string;
-  onFocusedIndexChange?: (i: number) => void;
+  onFocusedIndexChange?: (i: string) => void;
 };
 
 const CommandBarBody = ({
   sections,
   disableKeyNav,
-  onlyOneClickable,
   onFocusedIndexChange,
 }: Props) => {
-  const [focusedIndex, setFocusedIndex] = useState(0);
-
-  useEffect(() => {
-    if (onlyOneClickable) {
-      let itemIndex = -1;
-      const clickableSectionIndex = sections.findIndex((s) => {
-        itemIndex = s.items.findIndex((i) => i.key === onlyOneClickable);
-        return itemIndex > -1;
-      });
-      if (itemIndex > -1) {
-        setFocusedIndex(
-          sections[clickableSectionIndex].itemsOffset + itemIndex,
-        );
-      }
-    }
-  }, [onlyOneClickable, sections]);
+  const { focusedIndex, setFocusedIndex, handleArrowKey, navContainerRef } =
+    useArrowNavigation();
 
   useEffect(() => {
     if (onFocusedIndexChange) {
@@ -39,37 +24,13 @@ const CommandBarBody = ({
     }
   }, [focusedIndex]);
 
-  useEffect(() => {
-    setFocusedIndex(0);
-  }, [sections]);
-
-  const handleKeyEvent = useCallback(
-    (e: KeyboardEvent) => {
-      if (e.key === 'ArrowDown') {
-        e.preventDefault();
-        e.stopPropagation();
-        setFocusedIndex((prev) =>
-          prev <
-          sections.reduce((prev, curr) => prev + curr.items.length, 0) - 1
-            ? prev + 1
-            : 0,
-        );
-      } else if (e.key === 'ArrowUp') {
-        e.preventDefault();
-        e.stopPropagation();
-        setFocusedIndex((prev) =>
-          prev > 0
-            ? prev - 1
-            : sections.reduce((prev, curr) => prev + curr.items.length, 0) - 1,
-        );
-      }
-    },
-    [sections],
-  );
-  useKeyboardNavigation(handleKeyEvent, disableKeyNav || !!onlyOneClickable);
+  useKeyboardNavigation(handleArrowKey, disableKeyNav);
 
   return (
-    <div className="flex flex-col gap-1 flex-1 w-full p-2 overflow-auto show-scrollbar">
+    <div
+      className="flex flex-col gap-1 flex-1 w-full p-2 overflow-auto show-scrollbar"
+      ref={navContainerRef}
+    >
       {sections.map((s) => (
         <Section
           key={s.key}
@@ -77,9 +38,8 @@ const CommandBarBody = ({
           items={s.items}
           focusedIndex={focusedIndex}
           setFocusedIndex={setFocusedIndex}
-          offset={s.itemsOffset}
           disableKeyNav={disableKeyNav}
-          onlyOneClickable={onlyOneClickable}
+          index={s.key}
         />
       ))}
     </div>
diff --git a/client/src/CommandBar/steps/AddToStudio.tsx b/client/src/CommandBar/steps/AddToStudio.tsx
index aff0e13b80..72a34d0eaa 100644
--- a/client/src/CommandBar/steps/AddToStudio.tsx
+++ b/client/src/CommandBar/steps/AddToStudio.tsx
@@ -163,10 +163,6 @@ const AddToStudio = (props: Props) => {
         newSectionsToShow.push({
           ...s,
           items,
-          itemsOffset: newSectionsToShow[newSectionsToShow.length - 1]
-            ? newSectionsToShow[newSectionsToShow.length - 1].itemsOffset +
-              newSectionsToShow[newSectionsToShow.length - 1].items.length
-            : 0,
         });
       }
     });
diff --git a/client/src/CommandBar/steps/Documentation/index.tsx b/client/src/CommandBar/steps/Documentation/index.tsx
index 725535211a..2544e793af 100644
--- a/client/src/CommandBar/steps/Documentation/index.tsx
+++ b/client/src/CommandBar/steps/Documentation/index.tsx
@@ -137,7 +137,6 @@ const Documentation = ({}: Props) => {
     setSections([
       addItem,
       {
-        itemsOffset: 1,
         key: 'indexed-docs',
         label: t('Indexed documentation web pages'),
         items: mapped,
diff --git a/client/src/CommandBar/steps/Initial.tsx b/client/src/CommandBar/steps/Initial.tsx
index 361fcb5a8d..a560ce18cb 100644
--- a/client/src/CommandBar/steps/Initial.tsx
+++ b/client/src/CommandBar/steps/Initial.tsx
@@ -375,7 +375,6 @@ const InitialCommandBar = ({ shouldShowTutorial }: Props) => {
           ? [
               {
                 items: newTabItems,
-                itemsOffset: 0,
                 key: 'new-tab-items',
               },
             ]
@@ -384,7 +383,6 @@ const InitialCommandBar = ({ shouldShowTutorial }: Props) => {
           ? [
               {
                 items: tabItems,
-                itemsOffset: newTabItems.length,
                 key: 'tab-items',
               },
             ]
@@ -394,35 +392,22 @@ const InitialCommandBar = ({ shouldShowTutorial }: Props) => {
               {
                 label: t('Recent conversations'),
                 items: chatItems,
-                itemsOffset: newTabItems.length + tabItems.length,
                 key: 'chat-items',
               },
             ]
           : []),
         {
           items: contextItems,
-          itemsOffset: newTabItems.length + tabItems.length + chatItems.length,
           label: t('Manage context'),
           key: 'context-items',
         },
         {
           items: projectItems,
-          itemsOffset:
-            newTabItems.length +
-            tabItems.length +
-            chatItems.length +
-            contextItems.length,
           label: t('Recent projects'),
           key: 'recent-projects',
         },
         {
           items: commandsItems,
-          itemsOffset:
-            newTabItems.length +
-            tabItems.length +
-            chatItems.length +
-            contextItems.length +
-            projectItems.length,
           label: t('Commands'),
           key: 'general-commands',
         },
@@ -456,10 +441,6 @@ const InitialCommandBar = ({ shouldShowTutorial }: Props) => {
         newSections.push({
           ...s,
           items: newItems,
-          itemsOffset: newSections[newSections.length - 1]
-            ? newSections[newSections.length - 1].items.length +
-              newSections[newSections.length - 1].itemsOffset
-            : 0,
         });
       }
     });
diff --git a/client/src/CommandBar/steps/LocalRepos.tsx b/client/src/CommandBar/steps/LocalRepos.tsx
index df2e71557f..b768df533a 100644
--- a/client/src/CommandBar/steps/LocalRepos.tsx
+++ b/client/src/CommandBar/steps/LocalRepos.tsx
@@ -122,7 +122,6 @@ const LocalRepos = ({}: Props) => {
       setSections([
         addItem,
         {
-          itemsOffset: 1,
           key: 'indexed-repos',
           label: t('Indexed local repositories'),
           items: mapped,
diff --git a/client/src/CommandBar/steps/ManageRepos/index.tsx b/client/src/CommandBar/steps/ManageRepos/index.tsx
index 16725477c3..ced45802c3 100644
--- a/client/src/CommandBar/steps/ManageRepos/index.tsx
+++ b/client/src/CommandBar/steps/ManageRepos/index.tsx
@@ -191,10 +191,6 @@ const ManageRepos = ({ shouldShowTutorial }: Props) => {
         newSectionsToShow.push({
           ...s,
           items,
-          itemsOffset: newSectionsToShow[newSectionsToShow.length - 1]
-            ? newSectionsToShow[newSectionsToShow.length - 1].itemsOffset +
-              newSectionsToShow[newSectionsToShow.length - 1].items.length
-            : 0,
         });
       }
     });
diff --git a/client/src/CommandBar/steps/PrivateRepos/index.tsx b/client/src/CommandBar/steps/PrivateRepos/index.tsx
index fc20cd7924..79b7f88dd9 100644
--- a/client/src/CommandBar/steps/PrivateRepos/index.tsx
+++ b/client/src/CommandBar/steps/PrivateRepos/index.tsx
@@ -103,10 +103,6 @@ const PrivateReposStep = ({ shouldShowTutorial }: Props) => {
         newSectionsToShow.push({
           ...s,
           items,
-          itemsOffset: newSectionsToShow[newSectionsToShow.length - 1]
-            ? newSectionsToShow[newSectionsToShow.length - 1].itemsOffset +
-              newSectionsToShow[newSectionsToShow.length - 1].items.length
-            : 0,
         });
       }
     });
diff --git a/client/src/CommandBar/steps/SeachDocs.tsx b/client/src/CommandBar/steps/SeachDocs.tsx
index eccbc34034..4bcced106c 100644
--- a/client/src/CommandBar/steps/SeachDocs.tsx
+++ b/client/src/CommandBar/steps/SeachDocs.tsx
@@ -8,7 +8,7 @@ import {
   useMemo,
   useState,
 } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import Header from '../Header';
 import { CommandBarStepEnum, TabTypesEnum } from '../../types/general';
 import { CommandBarContext } from '../../context/commandBarContext';
@@ -36,7 +36,7 @@ const SearchDocs = ({ studioId, docId }: Props) => {
   const { setIsLeftSidebarFocused } = useContext(UIContext.Focus);
   const [docSections, setDocSections] = useState<DocSectionType[]>([]);
   const [fullDoc, setFullDoc] = useState<DocShortType | null>(null);
-  const [focusedIndex, setFocusedIndex] = useState(0);
+  const [focusedIndex, setFocusedIndex] = useState('');
   const searchValue = useDeferredValue(inputValue);
 
   const handleInputChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
@@ -139,6 +139,10 @@ const SearchDocs = ({ studioId, docId }: Props) => {
     ];
   }, [docSections, studioId]);
 
+  const focusedDoc = useMemo(() => {
+    return docSections.find((ds) => `docs-${ds.point_id}` === focusedIndex);
+  }, [docSections, focusedIndex]);
+
   return (
     <div className="flex flex-col h-[28.875rem] w-[50rem] overflow-auto">
       <Header
@@ -154,11 +158,11 @@ const SearchDocs = ({ studioId, docId }: Props) => {
             <Body sections={sections} onFocusedIndexChange={setFocusedIndex} />
           </div>
           <div className="flex-1 border-l border-bg-border h-full overflow-auto p-2">
-            {!!docSections[focusedIndex] && (
+            {!!focusedDoc && (
               <RenderedSection
-                text={docSections[focusedIndex].text}
+                text={focusedDoc.text}
                 isEditingSelection={false}
-                baseUrl={docSections[focusedIndex].doc_source}
+                baseUrl={focusedDoc.doc_source}
               />
             )}
           </div>
diff --git a/client/src/CommandBar/steps/items/DocItem.tsx b/client/src/CommandBar/steps/items/DocItem.tsx
index b174c0b1da..08c49816cc 100644
--- a/client/src/CommandBar/steps/items/DocItem.tsx
+++ b/client/src/CommandBar/steps/items/DocItem.tsx
@@ -34,9 +34,9 @@ import { ProjectContext } from '../../../context/projectContext';
 
 type Props = {
   doc: DocShortType;
-  i: number;
-  isFocused: boolean;
-  setFocusedIndex: Dispatch<SetStateAction<number>>;
+  index: string;
+  focusedIndex: string;
+  setFocusedIndex: Dispatch<SetStateAction<string>>;
   isFirst: boolean;
   isIndexed: boolean;
   disableKeyNav?: boolean;
@@ -47,8 +47,8 @@ const DocItem = ({
   doc,
   isFirst,
   setFocusedIndex,
-  isFocused,
-  i,
+  focusedIndex,
+  index,
   isIndexed,
   disableKeyNav,
   refetchDocs,
@@ -246,8 +246,8 @@ const DocItem = ({
       key={docToShow.id || doc.url}
       itemKey={`doc-${docToShow.id || doc.url}`}
       setFocusedIndex={setFocusedIndex}
-      isFocused={isFocused}
-      i={i}
+      focusedIndex={focusedIndex}
+      index={index}
       isFirst={isFirst}
       isWithCheckmark={!!isInProject}
       Icon={
diff --git a/client/src/CommandBar/steps/items/RepoItem.tsx b/client/src/CommandBar/steps/items/RepoItem.tsx
index ead48d1efe..be1ed76aac 100644
--- a/client/src/CommandBar/steps/items/RepoItem.tsx
+++ b/client/src/CommandBar/steps/items/RepoItem.tsx
@@ -39,9 +39,9 @@ import { RepositoriesContext } from '../../../context/repositoriesContext';
 
 type Props = {
   repo: RepoUi;
-  i: number;
-  isFocused: boolean;
-  setFocusedIndex: Dispatch<SetStateAction<number>>;
+  index: string;
+  focusedIndex: string;
+  setFocusedIndex: Dispatch<SetStateAction<string>>;
   isFirst: boolean;
   refetchRepos: () => void;
   disableKeyNav?: boolean;
@@ -56,8 +56,8 @@ const RepoItem = ({
   repo,
   isFirst,
   setFocusedIndex,
-  isFocused,
-  i,
+  focusedIndex,
+  index,
   refetchRepos,
   disableKeyNav,
   indexingStatus,
@@ -244,8 +244,8 @@ const RepoItem = ({
     <Item
       key={repo.ref}
       setFocusedIndex={setFocusedIndex}
-      isFocused={isFocused}
-      i={i}
+      focusedIndex={focusedIndex}
+      index={index}
       isFirst={isFirst}
       itemKey={`repo-${repo.ref}`}
       Icon={isIndexing ? SpinLoaderContainer : RepositoryIcon}
diff --git a/client/src/Project/LeftSidebar/NavPanel/Conversations/CoversationEntry.tsx b/client/src/Project/LeftSidebar/NavPanel/Conversations/CoversationEntry.tsx
index 4b7bf74291..06d64de8e4 100644
--- a/client/src/Project/LeftSidebar/NavPanel/Conversations/CoversationEntry.tsx
+++ b/client/src/Project/LeftSidebar/NavPanel/Conversations/CoversationEntry.tsx
@@ -1,4 +1,4 @@
-import { memo, useCallback, useContext } from 'react';
+import React, { memo, useCallback, useContext } from 'react';
 import { ConversationShortType } from '../../../../types/api';
 import { TabsContext } from '../../../../context/tabsContext';
 import { TabTypesEnum } from '../../../../types/general';
@@ -9,6 +9,7 @@ type Props = ConversationShortType & {
   focusedIndex: string;
   isLeftSidebarFocused: boolean;
   isCommandBarVisible: boolean;
+  setFocusedIndex: (s: string) => void;
 };
 
 const ConversationEntry = ({
@@ -18,6 +19,7 @@ const ConversationEntry = ({
   focusedIndex,
   isLeftSidebarFocused,
   isCommandBarVisible,
+  setFocusedIndex,
 }: Props) => {
   const { openNewTab } = useContext(TabsContext.Handlers);
 
@@ -30,17 +32,26 @@ const ConversationEntry = ({
     focusedIndex !== index || !isLeftSidebarFocused || isCommandBarVisible,
   );
 
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      if (e.movementX || e.movementY) {
+        setFocusedIndex(index);
+      }
+    },
+    [index, setFocusedIndex],
+  );
+
   return (
     <a
       href="#"
       className={`w-full text-left h-7 flex-shrink-0 flex items-center gap-3 pr-2 cursor-pointer
-        ellipsis body-mini group ${
+        ellipsis body-mini group pl-10.5 ${
           focusedIndex === index
             ? 'bg-bg-sub-hover text-label-title'
             : 'text-label-base'
-        }
-        hover:bg-bg-base-hover hover:text-label-title active:bg-transparent pl-10.5`}
+        }`}
       onClick={handleClick}
+      onMouseMove={handleMouseMove}
       data-node-index={index}
     >
       <span className="ellipsis">{title}</span>
diff --git a/client/src/Project/LeftSidebar/NavPanel/Conversations/index.tsx b/client/src/Project/LeftSidebar/NavPanel/Conversations/index.tsx
index 40d6a4834e..600e90de39 100644
--- a/client/src/Project/LeftSidebar/NavPanel/Conversations/index.tsx
+++ b/client/src/Project/LeftSidebar/NavPanel/Conversations/index.tsx
@@ -17,6 +17,7 @@ type Props = {
   isExpanded: boolean;
   focusedIndex: string;
   index: string;
+  setFocusedIndex: (s: string) => void;
 };
 
 const reactRoot = document.getElementById('root')!;
@@ -26,6 +27,7 @@ const ConversationsNav = ({
   setExpanded,
   focusedIndex,
   index,
+  setFocusedIndex,
 }: Props) => {
   const { t } = useTranslation();
   const { project } = useContext(ProjectContext.Current);
@@ -35,7 +37,14 @@ const ConversationsNav = ({
     noPropagate,
     isLeftSidebarFocused,
     isCommandBarVisible,
-  } = useNavPanel(index, setExpanded, isExpanded, focusedIndex);
+    handleMouseMove,
+  } = useNavPanel(
+    index,
+    setExpanded,
+    isExpanded,
+    focusedIndex,
+    setFocusedIndex,
+  );
 
   return (
     <div className="select-none overflow-hidden w-full flex-shrink-0">
@@ -44,8 +53,11 @@ const ConversationsNav = ({
         tabIndex={0}
         className={`h-10 flex items-center gap-3 px-4 ellipsis ${
           isExpanded ? 'sticky z-10 top-0 left-0' : ''
-        } ${focusedIndex === index ? 'bg-bg-sub-hover' : 'bg-bg-sub'}`}
+        } ${
+          focusedIndex === index ? 'bg-bg-sub-hover' : 'bg-bg-sub'
+        } outline-0 outline-none focus:outline-0 focus:outline-none`}
         onClick={toggleExpanded}
+        onMouseMove={handleMouseMove}
         ref={containerRef}
         data-node-index={index}
       >
@@ -94,6 +106,7 @@ const ConversationsNav = ({
               focusedIndex={focusedIndex}
               isLeftSidebarFocused={isLeftSidebarFocused}
               isCommandBarVisible={isCommandBarVisible}
+              setFocusedIndex={setFocusedIndex}
             />
           ))}
         </div>
diff --git a/client/src/Project/LeftSidebar/NavPanel/Doc/DocEntry.tsx b/client/src/Project/LeftSidebar/NavPanel/Doc/DocEntry.tsx
index 991eb8890b..07417453af 100644
--- a/client/src/Project/LeftSidebar/NavPanel/Doc/DocEntry.tsx
+++ b/client/src/Project/LeftSidebar/NavPanel/Doc/DocEntry.tsx
@@ -1,4 +1,4 @@
-import { memo, useCallback, useContext } from 'react';
+import React, { memo, useCallback, useContext } from 'react';
 import { DocPageType } from '../../../../types/api';
 import { TabsContext } from '../../../../context/tabsContext';
 import { TabTypesEnum } from '../../../../types/general';
@@ -11,6 +11,7 @@ type Props = DocPageType & {
   isLeftSidebarFocused: boolean;
   isCommandBarVisible: boolean;
   favicon?: string;
+  setFocusedIndex: (s: string) => void;
 };
 
 const DocEntry = ({
@@ -22,6 +23,7 @@ const DocEntry = ({
   doc_title,
   relative_url,
   favicon,
+  setFocusedIndex,
 }: Props) => {
   const { openNewTab } = useContext(TabsContext.Handlers);
 
@@ -40,17 +42,26 @@ const DocEntry = ({
     focusedIndex !== index || !isLeftSidebarFocused || isCommandBarVisible,
   );
 
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      if (e.movementX || e.movementY) {
+        setFocusedIndex(index);
+      }
+    },
+    [index, setFocusedIndex],
+  );
+
   return (
     <a
       href="#"
       className={`w-full text-left h-7 flex-shrink-0 flex items-center gap-3 pr-2 cursor-pointer
-        ellipsis body-mini group ${
+        ellipsis body-mini group pl-10.5 ${
           focusedIndex === index
             ? 'bg-bg-sub-hover text-label-title'
             : 'text-label-base'
-        }
-        hover:bg-bg-base-hover hover:text-label-title active:bg-transparent pl-10.5`}
+        }`}
       onClick={handleClick}
+      onMouseMove={handleMouseMove}
       data-node-index={index}
     >
       <FileIcon sizeClassName="w-3.5 h-3.5" />
diff --git a/client/src/Project/LeftSidebar/NavPanel/Doc/index.tsx b/client/src/Project/LeftSidebar/NavPanel/Doc/index.tsx
index e03b17919b..2ec9b22303 100644
--- a/client/src/Project/LeftSidebar/NavPanel/Doc/index.tsx
+++ b/client/src/Project/LeftSidebar/NavPanel/Doc/index.tsx
@@ -35,6 +35,7 @@ type Props = {
   favicon?: string;
   title?: string;
   url: string;
+  setFocusedIndex: (s: string) => void;
 };
 
 const reactRoot = document.getElementById('root')!;
@@ -49,6 +50,7 @@ const DocNav = ({
   docId,
   title,
   url,
+  setFocusedIndex,
 }: Props) => {
   const { t } = useTranslation();
   const [pages, setPages] = useState<DocPageType[]>([]);
@@ -58,7 +60,14 @@ const DocNav = ({
     noPropagate,
     isLeftSidebarFocused,
     isCommandBarVisible,
-  } = useNavPanel(index, setExpanded, isExpanded, focusedIndex);
+    handleMouseMove,
+  } = useNavPanel(
+    index,
+    setExpanded,
+    isExpanded,
+    focusedIndex,
+    setFocusedIndex,
+  );
   const { setChosenStep, setIsVisible } = useContext(
     CommandBarContext.Handlers,
   );
@@ -91,10 +100,13 @@ const DocNav = ({
         tabIndex={0}
         className={`h-10 flex items-center gap-3 px-4 ellipsis ${
           isExpanded ? 'sticky z-10 top-0 left-0' : ''
-        } ${focusedIndex === index ? 'bg-bg-sub-hover' : 'bg-bg-sub'}`}
+        } ${
+          focusedIndex === index ? 'bg-bg-sub-hover' : 'bg-bg-sub'
+        } outline-0 outline-none focus:outline-0 focus:outline-none`}
         onClick={toggleExpanded}
         data-node-index={index}
         ref={containerRef}
+        onMouseMove={handleMouseMove}
       >
         {favicon ? (
           <img src={favicon} alt={title || url} className={'w-3.5 h-3.5'} />
@@ -150,6 +162,7 @@ const DocNav = ({
               isLeftSidebarFocused={isLeftSidebarFocused}
               isCommandBarVisible={isCommandBarVisible}
               favicon={favicon}
+              setFocusedIndex={setFocusedIndex}
             />
           ))}
         </div>
diff --git a/client/src/Project/LeftSidebar/NavPanel/Repo/RepoEntry.tsx b/client/src/Project/LeftSidebar/NavPanel/Repo/RepoEntry.tsx
index 9b2547f7eb..215a28c143 100644
--- a/client/src/Project/LeftSidebar/NavPanel/Repo/RepoEntry.tsx
+++ b/client/src/Project/LeftSidebar/NavPanel/Repo/RepoEntry.tsx
@@ -35,6 +35,7 @@ type Props = {
   index: string;
   isLeftSidebarFocused: boolean;
   isCommandBarVisible: boolean;
+  setFocusedIndex: (s: string) => void;
 };
 
 const RepoEntry = ({
@@ -54,6 +55,7 @@ const RepoEntry = ({
   index,
   isLeftSidebarFocused,
   isCommandBarVisible,
+  setFocusedIndex,
 }: Props) => {
   const { openNewTab } = useContext(TabsContext.Handlers);
   const [isOpen, setOpen] = useState(
@@ -123,6 +125,15 @@ const RepoEntry = ({
     }
   }, [focusedIndex, index]);
 
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      if (e.movementX || e.movementY) {
+        setFocusedIndex(index);
+      }
+    },
+    [index, setFocusedIndex],
+  );
+
   return (
     <div
       style={{
@@ -139,7 +150,7 @@ const RepoEntry = ({
             : 'bg-bg-shade text-label-title'
           : isLeftSidebarFocused && focusedIndex === index
           ? 'bg-bg-sub-hover text-label-title'
-          : 'hover:bg-bg-base-hover hover:text-label-title active:bg-transparent'
+          : ''
       } ${
         isOpen && isDirectory
           ? 'text-label-title'
@@ -149,6 +160,7 @@ const RepoEntry = ({
       }`}
         style={{ paddingLeft: level * 27 }}
         onClick={handleClick}
+        onMouseMove={handleMouseMove}
         ref={ref}
         data-node-index={index}
       >
@@ -219,6 +231,7 @@ const RepoEntry = ({
               index={`${index}-${sii}`}
               isLeftSidebarFocused={isLeftSidebarFocused}
               isCommandBarVisible={isCommandBarVisible}
+              setFocusedIndex={setFocusedIndex}
             />
           ))}
         </div>
diff --git a/client/src/Project/LeftSidebar/NavPanel/Repo/index.tsx b/client/src/Project/LeftSidebar/NavPanel/Repo/index.tsx
index 66ce88bb22..120a535b81 100644
--- a/client/src/Project/LeftSidebar/NavPanel/Repo/index.tsx
+++ b/client/src/Project/LeftSidebar/NavPanel/Repo/index.tsx
@@ -40,6 +40,7 @@ type Props = {
   indexingData?: RepoIndexingStatusType;
   focusedIndex: string;
   index: string;
+  setFocusedIndex: (s: string) => void;
 };
 
 const reactRoot = document.getElementById('root')!;
@@ -57,6 +58,7 @@ const RepoNav = ({
   indexingData,
   focusedIndex,
   index,
+  setFocusedIndex,
 }: Props) => {
   const { t } = useTranslation();
   const [files, setFiles] = useState<DirectoryEntry[]>([]);
@@ -66,7 +68,14 @@ const RepoNav = ({
     noPropagate,
     isLeftSidebarFocused,
     isCommandBarVisible,
-  } = useNavPanel(index, setExpanded, isExpanded, focusedIndex);
+    handleMouseMove,
+  } = useNavPanel(
+    index,
+    setExpanded,
+    isExpanded,
+    focusedIndex,
+    setFocusedIndex,
+  );
 
   const fetchFiles = useCallback(
     async (path?: string) => {
@@ -122,10 +131,13 @@ const RepoNav = ({
         tabIndex={0}
         className={`h-10 flex items-center gap-3 px-4 ellipsis ${
           isExpanded ? 'sticky z-10 top-0 left-0' : ''
-        } ${focusedIndex === index ? 'bg-bg-sub-hover' : 'bg-bg-sub'}`}
+        } ${
+          focusedIndex === index ? 'bg-bg-sub-hover' : 'bg-bg-sub'
+        } outline-0 outline-none focus:outline-0 focus:outline-none`}
         onClick={toggleExpanded}
         data-node-index={index}
         ref={containerRef}
+        onMouseMove={handleMouseMove}
       >
         {isIndexing && indexingData ? (
           <Tooltip
@@ -198,6 +210,7 @@ const RepoNav = ({
               index={`${index}-${fi}`}
               isLeftSidebarFocused={isLeftSidebarFocused}
               isCommandBarVisible={isCommandBarVisible}
+              setFocusedIndex={setFocusedIndex}
             />
           ))}
         </div>
diff --git a/client/src/Project/LeftSidebar/NavPanel/Studios/StudioEntry.tsx b/client/src/Project/LeftSidebar/NavPanel/Studios/StudioEntry.tsx
index 632543886a..a391a85abd 100644
--- a/client/src/Project/LeftSidebar/NavPanel/Studios/StudioEntry.tsx
+++ b/client/src/Project/LeftSidebar/NavPanel/Studios/StudioEntry.tsx
@@ -36,6 +36,7 @@ type Props = CodeStudioType & {
   indexingStatus: IndexingStatusType;
   projectId: string;
   previewingSnapshot: HistoryConversationTurn | null;
+  setFocusedIndex: (s: string) => void;
 };
 
 const StudioEntry = ({
@@ -53,6 +54,7 @@ const StudioEntry = ({
   indexingStatus,
   projectId,
   previewingSnapshot,
+  setFocusedIndex,
 }: Props) => {
   const { t } = useTranslation();
 
@@ -71,6 +73,15 @@ const StudioEntry = ({
     focusedIndex !== index || !isLeftSidebarFocused || isCommandBarVisible,
   );
 
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      if (e.movementX || e.movementY) {
+        setFocusedIndex(index);
+      }
+    },
+    [index, setFocusedIndex],
+  );
+
   return (
     <div className="body-mini">
       <a
@@ -82,10 +93,10 @@ const StudioEntry = ({
             expandedIndex === index || focusedIndex.startsWith(index)
               ? 'text-label-title'
               : 'text-label-base'
-          }
-          hover:bg-bg-base-hover hover:text-label-title active:bg-transparent pl-4`}
+          } pl-4`}
         onClick={handleExpand}
         data-node-index={index}
+        onMouseMove={handleMouseMove}
       >
         <span className="flex items-center gap-3">
           <ChevronRight
@@ -113,6 +124,7 @@ const StudioEntry = ({
             index={`${index}-history`}
             isLeftSidebarFocused={isLeftSidebarFocused}
             isCommandBarVisible={isCommandBarVisible}
+            setFocusedIndex={setFocusedIndex}
           />
           <StudioSubItem
             studioId={id}
@@ -121,6 +133,7 @@ const StudioEntry = ({
             studioName={name}
             isLeftSidebarFocused={isLeftSidebarFocused}
             isCommandBarVisible={isCommandBarVisible}
+            setFocusedIndex={setFocusedIndex}
           >
             <PromptIcon sizeClassName="w-3.5 h-3.5" />
             <span className="flex-1 ellipsis">
@@ -151,6 +164,7 @@ const StudioEntry = ({
               isCommandBarVisible={isCommandBarVisible}
               tokens={token_counts.per_file[i]}
               indexingData={indexingStatus[f.repo]}
+              setFocusedIndex={setFocusedIndex}
               {...f}
             />
           ))}
@@ -173,6 +187,7 @@ const StudioEntry = ({
               docTitle={d.doc_title || ''}
               docFavicon={d.doc_icon || ''}
               sections={d.ranges}
+              setFocusedIndex={setFocusedIndex}
             >
               {d.doc_icon ? (
                 <img
diff --git a/client/src/Project/LeftSidebar/NavPanel/Studios/StudioFile.tsx b/client/src/Project/LeftSidebar/NavPanel/Studios/StudioFile.tsx
index 8bc534cab7..a2b74fa6a0 100644
--- a/client/src/Project/LeftSidebar/NavPanel/Studios/StudioFile.tsx
+++ b/client/src/Project/LeftSidebar/NavPanel/Studios/StudioFile.tsx
@@ -22,6 +22,7 @@ type Props = StudioContextFile & {
   isCommandBarVisible: boolean;
   tokens?: number | null;
   indexingData?: RepoIndexingStatusType;
+  setFocusedIndex: (s: string) => void;
 };
 
 const StudioFile = ({
@@ -37,6 +38,7 @@ const StudioFile = ({
   isCommandBarVisible,
   tokens,
   indexingData,
+  setFocusedIndex,
 }: Props) => {
   const { t } = useTranslation();
 
@@ -64,6 +66,7 @@ const StudioFile = ({
       repoRef={repo}
       branch={branch}
       ranges={ranges}
+      setFocusedIndex={setFocusedIndex}
     >
       {isIndexing && indexingData ? (
         <Tooltip
diff --git a/client/src/Project/LeftSidebar/NavPanel/Studios/StudioHistory.tsx b/client/src/Project/LeftSidebar/NavPanel/Studios/StudioHistory.tsx
index 2f09e4681e..860f1d5b18 100644
--- a/client/src/Project/LeftSidebar/NavPanel/Studios/StudioHistory.tsx
+++ b/client/src/Project/LeftSidebar/NavPanel/Studios/StudioHistory.tsx
@@ -26,6 +26,7 @@ type Props = {
   studioName: string;
   isLeftSidebarFocused: boolean;
   isCommandBarVisible: boolean;
+  setFocusedIndex: (s: string) => void;
 };
 
 const StudioHistory = ({
@@ -37,6 +38,7 @@ const StudioHistory = ({
   studioName,
   isCommandBarVisible,
   isLeftSidebarFocused,
+  setFocusedIndex,
 }: Props) => {
   const { t } = useTranslation();
   const { locale } = useContext(LocaleContext);
@@ -48,7 +50,7 @@ const StudioHistory = ({
   }, [shouldRefresh, projectId, studioId]);
 
   useEffect(() => {
-    if (focusedIndex.startsWith(index)) {
+    if (focusedIndex.startsWith(index) && focusedIndex !== index) {
       setIsExpanded(true);
     }
   }, [focusedIndex, index]);
@@ -62,16 +64,25 @@ const StudioHistory = ({
     focusedIndex !== index || !isLeftSidebarFocused || isCommandBarVisible,
   );
 
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      if (e.movementX || e.movementY) {
+        setFocusedIndex(index);
+      }
+    },
+    [index, setFocusedIndex],
+  );
+
   return !snapshots.length ? null : (
     <div>
       <a
-        className={`w-full h-7 flex items-center gap-3 pl-10.5 pr-4 cursor-pointer
-        hover:text-label-title hover:bg-bg-base-hover ${
+        className={`w-full h-7 flex items-center gap-3 pl-10.5 pr-4 cursor-pointer ${
           focusedIndex === index
             ? 'bg-bg-sub-hover text-label-title'
             : 'text-label-base'
         }`}
         onClick={handleToggle}
+        onMouseMove={handleMouseMove}
         data-node-index={index}
       >
         <span className="flex items-center gap-3">
@@ -101,6 +112,7 @@ const StudioHistory = ({
               isLeftSidebarFocused={isLeftSidebarFocused}
               isCommandBarVisible={isCommandBarVisible}
               snapshot={i === 0 ? null : s}
+              setFocusedIndex={setFocusedIndex}
             >
               <DateTimeCalendarIcon sizeClassName="w-3.5 h-3.5" />
               <span className="flex-1 ellipsis">
diff --git a/client/src/Project/LeftSidebar/NavPanel/Studios/StudioSubItem.tsx b/client/src/Project/LeftSidebar/NavPanel/Studios/StudioSubItem.tsx
index a4d54f25ad..539c032b76 100644
--- a/client/src/Project/LeftSidebar/NavPanel/Studios/StudioSubItem.tsx
+++ b/client/src/Project/LeftSidebar/NavPanel/Studios/StudioSubItem.tsx
@@ -23,6 +23,7 @@ type Props = {
   sections?: string[];
   morePadding?: boolean;
   snapshot?: HistoryConversationTurn | null;
+  setFocusedIndex: (s: string) => void;
 };
 
 const StudioSubItem = ({
@@ -44,6 +45,7 @@ const StudioSubItem = ({
   sections,
   morePadding,
   snapshot,
+  setFocusedIndex,
 }: PropsWithChildren<Props>) => {
   const { openNewTab } = useContext(TabsContext.Handlers);
 
@@ -100,17 +102,27 @@ const StudioSubItem = ({
     focusedIndex !== index || !isLeftSidebarFocused || isCommandBarVisible,
   );
 
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      if (e.movementX || e.movementY) {
+        setFocusedIndex(index);
+      }
+    },
+    [index, setFocusedIndex],
+  );
+
   return (
     <a
       href="#"
       className={`w-full h-7 flex items-center gap-3 ${
         morePadding ? 'pl-[4.25rem]' : 'pl-10.5'
-      } pr-4 hover:text-label-title hover:bg-bg-base-hover ${
+      } pr-4 ${
         focusedIndex.startsWith(index)
           ? 'bg-bg-sub-hover text-label-title'
           : 'text-label-base'
       }`}
       onClick={handleClick}
+      onMouseMove={handleMouseMove}
       data-node-index={index}
     >
       {children}
diff --git a/client/src/Project/LeftSidebar/NavPanel/Studios/index.tsx b/client/src/Project/LeftSidebar/NavPanel/Studios/index.tsx
index 5dcdcdb344..02ed0d76e6 100644
--- a/client/src/Project/LeftSidebar/NavPanel/Studios/index.tsx
+++ b/client/src/Project/LeftSidebar/NavPanel/Studios/index.tsx
@@ -27,6 +27,7 @@ type Props = {
   focusedIndex: string;
   index: string;
   indexingStatus: IndexingStatusType;
+  setFocusedIndex: (s: string) => void;
 };
 
 const reactRoot = document.getElementById('root')!;
@@ -37,6 +38,7 @@ const StudiosNav = ({
   focusedIndex,
   index,
   indexingStatus,
+  setFocusedIndex,
 }: Props) => {
   const { t } = useTranslation();
   const [expandedIndex, setExpandedIndex] = useState('');
@@ -50,7 +52,14 @@ const StudiosNav = ({
     noPropagate,
     isLeftSidebarFocused,
     isCommandBarVisible,
-  } = useNavPanel(index, setExpanded, isExpanded, focusedIndex);
+    handleMouseMove,
+  } = useNavPanel(
+    index,
+    setExpanded,
+    isExpanded,
+    focusedIndex,
+    setFocusedIndex,
+  );
 
   const previewingSnapshot = useMemo(() => {
     const focusedTab = focusedPanel === 'left' ? tabLeft : tabRight;
@@ -73,6 +82,7 @@ const StudiosNav = ({
           focusedIndex === index ? 'bg-bg-sub-hover' : 'bg-bg-sub'
         } outline-0 outline-none focus:outline-0 focus:outline-none`}
         onClick={toggleExpanded}
+        onMouseMove={handleMouseMove}
         ref={containerRef}
         data-node-index={index}
       >
@@ -130,6 +140,7 @@ const StudiosNav = ({
                   ? previewingSnapshot.snapshot
                   : null
               }
+              setFocusedIndex={setFocusedIndex}
             />
           ))}
         </div>
diff --git a/client/src/Project/LeftSidebar/NavPanel/index.tsx b/client/src/Project/LeftSidebar/NavPanel/index.tsx
index 7a839c58c6..2c253a6eb4 100644
--- a/client/src/Project/LeftSidebar/NavPanel/index.tsx
+++ b/client/src/Project/LeftSidebar/NavPanel/index.tsx
@@ -78,6 +78,7 @@ const NavPanel = ({ focusedIndex, setFocusedIndex }: Props) => {
           focusedIndex={focusedIndex}
           index={`studios`}
           indexingStatus={indexingStatus}
+          setFocusedIndex={setFocusedIndex}
         />
       )}
       {!!project?.conversations.length && (
@@ -86,6 +87,7 @@ const NavPanel = ({ focusedIndex, setFocusedIndex }: Props) => {
           isExpanded={expanded === 'conversations'}
           focusedIndex={focusedIndex}
           index={`conversations`}
+          setFocusedIndex={setFocusedIndex}
         />
       )}
       {project?.repos.map((r, i) => (
@@ -108,6 +110,7 @@ const NavPanel = ({ focusedIndex, setFocusedIndex }: Props) => {
           }
           focusedIndex={focusedIndex}
           index={`repo-${r.repo.ref}`}
+          setFocusedIndex={setFocusedIndex}
         />
       ))}
       {project?.docs.map((d) => (
@@ -122,6 +125,7 @@ const NavPanel = ({ focusedIndex, setFocusedIndex }: Props) => {
           title={d.name}
           favicon={d.favicon}
           url={d.url}
+          setFocusedIndex={setFocusedIndex}
         />
       ))}
     </div>
diff --git a/client/src/Project/LeftSidebar/RegexSearchPanel/AutocompleteMenuItem.tsx b/client/src/Project/LeftSidebar/RegexSearchPanel/AutocompleteMenuItem.tsx
index 11acf25af7..cf33f823ef 100644
--- a/client/src/Project/LeftSidebar/RegexSearchPanel/AutocompleteMenuItem.tsx
+++ b/client/src/Project/LeftSidebar/RegexSearchPanel/AutocompleteMenuItem.tsx
@@ -76,6 +76,7 @@ const AutocompleteMenuItem = ({
             repo_ref={item.repoRef}
             isFirst={false}
             index={`option-${index}`}
+            setFocusedIndex={() => {}}
           />
         </span>
       ) : item.type === ResultItemType.FILE ? (
diff --git a/client/src/Project/LeftSidebar/RegexSearchPanel/Results/CodeLine.tsx b/client/src/Project/LeftSidebar/RegexSearchPanel/Results/CodeLine.tsx
index 8468ad0808..a7d5f2b462 100644
--- a/client/src/Project/LeftSidebar/RegexSearchPanel/Results/CodeLine.tsx
+++ b/client/src/Project/LeftSidebar/RegexSearchPanel/Results/CodeLine.tsx
@@ -6,6 +6,7 @@ import { getPrismLanguage, tokenizeCode } from '../../../../utils/prism';
 import { HighlightMap, Range, TokensLine } from '../../../../types/results';
 import { Token } from '../../../../types/prism';
 import CodeToken from '../../../../components/Code/CodeToken';
+import { useEnterKey } from '../../../../hooks/useEnterKey';
 
 type Props = {
   path: string;
@@ -15,6 +16,11 @@ type Props = {
   code: string;
   language: string;
   highlights: Range[];
+  index: string;
+  focusedIndex: string;
+  setFocusedIndex: (s: string) => void;
+  isLeftSidebarFocused: boolean;
+  isCommandBarVisible: boolean;
 };
 
 const noOp = () => {};
@@ -27,6 +33,11 @@ const CodeLine = ({
   code,
   language,
   highlights,
+  index,
+  setFocusedIndex,
+  focusedIndex,
+  isLeftSidebarFocused,
+  isCommandBarVisible,
 }: Props) => {
   const { openNewTab } = useContext(TabsContext.Handlers);
 
@@ -38,6 +49,10 @@ const CodeLine = ({
       scrollToLine: `${lineStart}_${lineEnd}`,
     });
   }, [path, lineEnd, lineStart, repoRef, openNewTab]);
+  useEnterKey(
+    onClick,
+    focusedIndex !== index || !isLeftSidebarFocused || isCommandBarVisible,
+  );
 
   const lang = useMemo(
     () => getPrismLanguage(language) || 'plaintext',
@@ -134,10 +149,23 @@ const CodeLine = ({
     return ltr;
   }, [tokensMap]);
 
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      if (e.movementX || e.movementY) {
+        setFocusedIndex(index);
+      }
+    },
+    [index, setFocusedIndex],
+  );
+
   return (
     <li
-      className="flex px-4 h-7 items-center gap-3 text-label-base whitespace-nowrap cursor-pointer"
+      className={`flex min-w-full w-max pl-16 pr-4 h-7 items-center gap-3 text-label-base whitespace-nowrap cursor-pointer ${
+        focusedIndex === index ? 'bg-bg-shade-hover' : ''
+      }`}
       onClick={onClick}
+      onMouseMove={handleMouseMove}
+      data-node-index={index}
     >
       <CodeIcon sizeClassName="w-3.5 h-3.5" />
       <p className={`code-mini prism-code language-${lang} ellipsis`}>
diff --git a/client/src/Project/LeftSidebar/RegexSearchPanel/Results/CodeResult.tsx b/client/src/Project/LeftSidebar/RegexSearchPanel/Results/CodeResult.tsx
index 507050180e..40cfff8f70 100644
--- a/client/src/Project/LeftSidebar/RegexSearchPanel/Results/CodeResult.tsx
+++ b/client/src/Project/LeftSidebar/RegexSearchPanel/Results/CodeResult.tsx
@@ -1,4 +1,4 @@
-import {
+import React, {
   memo,
   useCallback,
   useContext,
@@ -24,6 +24,7 @@ type Props = {
   index: string;
   focusedIndex: string;
   isFirst: boolean;
+  setFocusedIndex: (s: string) => void;
 };
 
 const CodeResult = ({
@@ -34,6 +35,7 @@ const CodeResult = ({
   index,
   focusedIndex,
   isFirst,
+  setFocusedIndex,
 }: Props) => {
   const { openNewTab } = useContext(TabsContext.Handlers);
   const { isLeftSidebarFocused } = useContext(UIContext.Focus);
@@ -52,16 +54,8 @@ const CodeResult = ({
     }
   }, [focusedIndex, index]);
 
-  const handleEnter = useCallback(() => {
-    openNewTab({
-      type: TabTypesEnum.FILE,
-      path: relative_path,
-      repoRef: repo_ref,
-      scrollToLine: `${snippets[0].line_range.start}_${snippets[0].line_range.end}`,
-    });
-  }, [repo_ref, relative_path, openNewTab]);
   useEnterKey(
-    handleEnter,
+    toggleExpanded,
     focusedIndex !== index || !isLeftSidebarFocused || isCommandBarVisible,
   );
 
@@ -73,14 +67,26 @@ const CodeResult = ({
     });
   }, [repo_ref, relative_path, openNewTab]);
 
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      if (e.movementX || e.movementY) {
+        setFocusedIndex(index);
+      }
+    },
+    [index, setFocusedIndex],
+  );
+
   return (
     <div className="relative flex flex-col">
       <span className="absolute top-7 bottom-0 left-11.5 w-px bg-bg-border" />
       <div
         className={`flex w-max min-w-full items-center gap-3 whitespace-nowrap body-mini text-label-title h-7 flex-shrink-0 ${
           isFirst ? 'scroll-mt-10' : ''
-        } ${focusedIndex === index ? 'bg-bg-shade-hover' : ''} pl-10 pr-4`}
+        } ${
+          focusedIndex === index ? 'bg-bg-shade-hover' : ''
+        } pl-10 pr-4 cursor-pointer`}
         onClick={toggleExpanded}
+        onMouseMove={handleMouseMove}
         ref={ref}
         data-node-index={index}
       >
@@ -98,7 +104,7 @@ const CodeResult = ({
         {/*/>*/}
         <div onClick={handleClick}>{relative_path}</div>
       </div>
-      <ul className="pl-2.5 ml-10 pr-4">
+      <ul className="">
         {isExpanded
           ? snippets.map((s, i) => (
               <CodeLine
@@ -110,6 +116,11 @@ const CodeResult = ({
                 lineStart={s.line_range.start}
                 lineEnd={s.line_range.end}
                 highlights={s.highlights}
+                index={`${index}-${i}`}
+                focusedIndex={focusedIndex}
+                setFocusedIndex={setFocusedIndex}
+                isLeftSidebarFocused={isLeftSidebarFocused}
+                isCommandBarVisible={isCommandBarVisible}
               />
             ))
           : null}
diff --git a/client/src/Project/LeftSidebar/RegexSearchPanel/Results/FileResult.tsx b/client/src/Project/LeftSidebar/RegexSearchPanel/Results/FileResult.tsx
index 9499584c36..5bfe87e8e1 100644
--- a/client/src/Project/LeftSidebar/RegexSearchPanel/Results/FileResult.tsx
+++ b/client/src/Project/LeftSidebar/RegexSearchPanel/Results/FileResult.tsx
@@ -24,6 +24,7 @@ type Props = {
   index: string;
   focusedIndex: string;
   isFirst: boolean;
+  setFocusedIndex: (s: string) => void;
 };
 
 const FileResult = ({
@@ -33,6 +34,7 @@ const FileResult = ({
   index,
   focusedIndex,
   isFirst,
+  setFocusedIndex,
 }: Props) => {
   const { openNewTab } = useContext(TabsContext.Handlers);
   const { isLeftSidebarFocused } = useContext(UIContext.Focus);
@@ -89,6 +91,15 @@ const FileResult = ({
     focusedIndex !== index || !isLeftSidebarFocused || isCommandBarVisible,
   );
 
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      if (e.movementX || e.movementY) {
+        setFocusedIndex(index);
+      }
+    },
+    [index, setFocusedIndex],
+  );
+
   return (
     <span
       className={`flex flex-col flex-shrink-0 ${
@@ -103,6 +114,7 @@ const FileResult = ({
         } pl-10 pr-4`}
         ref={ref}
         data-node-index={index}
+        onMouseMove={handleMouseMove}
       >
         {is_dir ? (
           <FolderIcon sizeClassName="w-4 h-4" />
@@ -141,6 +153,7 @@ const FileResult = ({
               lastIndex={''}
               isLeftSidebarFocused={isLeftSidebarFocused}
               isCommandBarVisible={isCommandBarVisible}
+              setFocusedIndex={setFocusedIndex}
             />
           ))}
         </div>
diff --git a/client/src/Project/LeftSidebar/RegexSearchPanel/Results/RepoResult.tsx b/client/src/Project/LeftSidebar/RegexSearchPanel/Results/RepoResult.tsx
index 1c0c3f9380..c7e3f3ef94 100644
--- a/client/src/Project/LeftSidebar/RegexSearchPanel/Results/RepoResult.tsx
+++ b/client/src/Project/LeftSidebar/RegexSearchPanel/Results/RepoResult.tsx
@@ -17,12 +17,19 @@ import { CommandBarContext } from '../../../../context/commandBarContext';
 
 type Props = {
   repoRef: string;
-  index: number;
+  index: string;
   isExpandable?: boolean;
   focusedIndex: string;
+  setFocusedIndex: (s: string) => void;
 };
 
-const RepoResult = ({ repoRef, isExpandable, index, focusedIndex }: Props) => {
+const RepoResult = ({
+  repoRef,
+  isExpandable,
+  index,
+  focusedIndex,
+  setFocusedIndex,
+}: Props) => {
   const { isLeftSidebarFocused } = useContext(UIContext.Focus);
   const { isVisible: isCommandBarVisible } = useContext(
     CommandBarContext.General,
@@ -61,12 +68,21 @@ const RepoResult = ({ repoRef, isExpandable, index, focusedIndex }: Props) => {
 
   useEnterKey(
     onClick,
-    focusedIndex !== index.toString() ||
+    focusedIndex !== index ||
       !isExpandable ||
       !isLeftSidebarFocused ||
       isCommandBarVisible,
   );
 
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      if ((e.movementX || e.movementY) && isExpandable) {
+        setFocusedIndex(index);
+      }
+    },
+    [index, setFocusedIndex, isExpandable],
+  );
+
   return (
     <span
       className={`flex flex-col flex-shrink-0 ${
@@ -77,12 +93,13 @@ const RepoResult = ({ repoRef, isExpandable, index, focusedIndex }: Props) => {
         href="#"
         className={`h-10 flex-shrink-0 ${
           isExpandable
-            ? focusedIndex === index.toString()
+            ? focusedIndex === index
               ? 'bg-bg-sub-hover'
               : 'bg-bg-sub hover:bg-bg-sub-hover'
             : 'bg-bg-sub'
         } flex items-center gap-3 px-4 body-s-b text-label-title`}
         onClick={onClick}
+        onMouseMove={handleMouseMove}
         data-node-index={isExpandable ? index : undefined}
       >
         {repoRef.startsWith('github.com/') ? (
@@ -113,6 +130,7 @@ const RepoResult = ({ repoRef, isExpandable, index, focusedIndex }: Props) => {
               lastIndex={''}
               isLeftSidebarFocused={isLeftSidebarFocused}
               isCommandBarVisible={isCommandBarVisible}
+              setFocusedIndex={setFocusedIndex}
             />
           ))}
         </div>
diff --git a/client/src/Project/LeftSidebar/RegexSearchPanel/index.tsx b/client/src/Project/LeftSidebar/RegexSearchPanel/index.tsx
index 77d1688530..d732e01a30 100644
--- a/client/src/Project/LeftSidebar/RegexSearchPanel/index.tsx
+++ b/client/src/Project/LeftSidebar/RegexSearchPanel/index.tsx
@@ -254,9 +254,10 @@ const RegexSearchPanel = ({
               <span className="absolute top-10 bottom-0 left-5 w-px bg-bg-border" />
               <RepoResult
                 repoRef={repoRef}
-                index={repoIndex}
+                index={repoIndex.toString()}
                 focusedIndex={focusedIndex}
                 isExpandable={results[repoRef][0].kind === 'repository_result'}
+                setFocusedIndex={setFocusedIndex}
               />
               <ul className="flex flex-col">
                 {results[repoRef].map((r, i) => (
@@ -267,6 +268,7 @@ const RegexSearchPanel = ({
                         isFirst={i === 0}
                         index={`${repoIndex}-code-${i}`}
                         focusedIndex={focusedIndex}
+                        setFocusedIndex={setFocusedIndex}
                       />
                     ) : r.kind === 'file_result' ? (
                       <FileResult
@@ -274,6 +276,7 @@ const RegexSearchPanel = ({
                         isFirst={i === 0}
                         index={`${repoIndex}-file-${i}`}
                         focusedIndex={focusedIndex}
+                        setFocusedIndex={setFocusedIndex}
                       />
                     ) : null}
                   </li>
diff --git a/client/src/Project/LeftSidebar/index.tsx b/client/src/Project/LeftSidebar/index.tsx
index 1481f43c02..38f677f8e4 100644
--- a/client/src/Project/LeftSidebar/index.tsx
+++ b/client/src/Project/LeftSidebar/index.tsx
@@ -1,11 +1,4 @@
-import React, {
-  memo,
-  useCallback,
-  useContext,
-  MouseEvent,
-  useRef,
-  useState,
-} from 'react';
+import React, { memo, useCallback, useContext, MouseEvent } from 'react';
 import useResizeableWidth from '../../hooks/useResizeableWidth';
 import { LEFT_SIDEBAR_WIDTH_KEY } from '../../services/storage';
 import ProjectsDropdown from '../../components/Header/ProjectsDropdown';
@@ -18,6 +11,7 @@ import { checkEventKeys } from '../../utils/keyboardUtils';
 import useKeyboardNavigation from '../../hooks/useKeyboardNavigation';
 import { CommandBarContext } from '../../context/commandBarContext';
 import UsagePopover from '../../components/UsagePopover';
+import { useArrowNavigation } from '../../hooks/useArrowNavigation';
 import RegexSearchPanel from './RegexSearchPanel';
 import NavPanel from './NavPanel';
 
@@ -33,8 +27,8 @@ const LeftSidebar = ({}: Props) => {
   const { isVisible: isCommandBarVisible } = useContext(
     CommandBarContext.General,
   );
-  const ref = useRef<HTMLDivElement>(null);
-  const [focusedIndexFull, setFocusedIndexFull] = useState('');
+  const { focusedIndex, setFocusedIndex, handleArrowKey, navContainerRef } =
+    useArrowNavigation();
 
   const { panelRef, dividerRef } = useResizeableWidth(
     true,
@@ -51,35 +45,10 @@ const LeftSidebar = ({}: Props) => {
         setIsLeftSidebarFocused(true);
       }
       if (isLeftSidebarFocused) {
-        if (ref.current) {
-          if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
-            e.preventDefault();
-            e.stopPropagation();
-            // eslint-disable-next-line no-undef
-            const nodes: NodeListOf<HTMLElement> =
-              ref.current.querySelectorAll('[data-node-index]');
-            setFocusedIndexFull((prev) => {
-              const prevIndex = Array.from(nodes).findIndex(
-                (n) => n.dataset.nodeIndex === prev,
-              );
-              if (prevIndex > -1) {
-                const newIndex =
-                  e.key === 'ArrowDown'
-                    ? prevIndex < nodes.length - 1
-                      ? prevIndex + 1
-                      : 0
-                    : prevIndex > 0
-                    ? prevIndex - 1
-                    : nodes.length - 1;
-                return nodes[newIndex]?.dataset?.nodeIndex || '';
-              }
-              return nodes[0]?.dataset?.nodeIndex || '';
-            });
-          }
-        }
+        handleArrowKey(e);
       }
     },
-    [isLeftSidebarFocused],
+    [isLeftSidebarFocused, handleArrowKey],
   );
   useKeyboardNavigation(handleKeyEvent, isCommandBarVisible);
 
@@ -109,17 +78,21 @@ const LeftSidebar = ({}: Props) => {
           </div>
         </Dropdown>
       </div>
-      <div onClick={handleClick} className="flex-1 overflow-auto" ref={ref}>
+      <div
+        onClick={handleClick}
+        className="flex-1 overflow-auto"
+        ref={navContainerRef}
+      >
         <RegexSearchPanel
           projectId={project?.id}
           isRegexEnabled={isRegexSearchEnabled}
-          focusedIndex={focusedIndexFull}
-          setFocusedIndex={setFocusedIndexFull}
+          focusedIndex={focusedIndex}
+          setFocusedIndex={setFocusedIndex}
         />
         {!isRegexSearchEnabled && (
           <NavPanel
-            focusedIndex={focusedIndexFull}
-            setFocusedIndex={setFocusedIndexFull}
+            focusedIndex={focusedIndex}
+            setFocusedIndex={setFocusedIndex}
           />
         )}
       </div>
diff --git a/client/src/components/MarkdownWithCode/FolderChip.tsx b/client/src/components/MarkdownWithCode/FolderChip.tsx
index 59d3e16eef..3ae8157991 100644
--- a/client/src/components/MarkdownWithCode/FolderChip.tsx
+++ b/client/src/components/MarkdownWithCode/FolderChip.tsx
@@ -10,6 +10,8 @@ type Props = {
   repoRef?: string;
 };
 
+const noOp = () => {};
+
 const FolderChip = ({ onClick, path, repoRef }: Props) => {
   const fetchFiles = useCallback(
     async (path?: string) => {
@@ -67,6 +69,7 @@ const FolderChip = ({ onClick, path, repoRef }: Props) => {
             index={'0'}
             isLeftSidebarFocused={false}
             isCommandBarVisible
+            setFocusedIndex={noOp}
           />
         </OverflowTracker>
       </div>
diff --git a/client/src/hooks/useArrowNavigation.ts b/client/src/hooks/useArrowNavigation.ts
new file mode 100644
index 0000000000..d03e55a35a
--- /dev/null
+++ b/client/src/hooks/useArrowNavigation.ts
@@ -0,0 +1,40 @@
+import { useCallback, useRef, useState } from 'react';
+
+export const useArrowNavigation = () => {
+  const [focusedIndex, setFocusedIndex] = useState('');
+  const ref = useRef<HTMLDivElement>(null);
+
+  const handleArrowKey = useCallback((e: KeyboardEvent) => {
+    if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && ref.current) {
+      e.preventDefault();
+      e.stopPropagation();
+      // eslint-disable-next-line no-undef
+      const nodes: NodeListOf<HTMLElement> =
+        ref.current.querySelectorAll('[data-node-index]');
+      setFocusedIndex((prev) => {
+        const prevIndex = Array.from(nodes).findIndex(
+          (n) => n.dataset.nodeIndex === prev,
+        );
+        if (prevIndex > -1) {
+          const newIndex =
+            e.key === 'ArrowDown'
+              ? prevIndex < nodes.length - 1
+                ? prevIndex + 1
+                : 0
+              : prevIndex > 0
+              ? prevIndex - 1
+              : nodes.length - 1;
+          return nodes[newIndex]?.dataset?.nodeIndex || '';
+        }
+        return nodes[0]?.dataset?.nodeIndex || '';
+      });
+    }
+  }, []);
+
+  return {
+    focusedIndex,
+    setFocusedIndex,
+    handleArrowKey,
+    navContainerRef: ref,
+  };
+};
diff --git a/client/src/hooks/useNavPanel.ts b/client/src/hooks/useNavPanel.ts
index 2a9688861f..53a8d5fe84 100644
--- a/client/src/hooks/useNavPanel.ts
+++ b/client/src/hooks/useNavPanel.ts
@@ -1,4 +1,4 @@
-import {
+import React, {
   Dispatch,
   MouseEvent,
   SetStateAction,
@@ -16,6 +16,7 @@ export const useNavPanel = (
   setExpanded: Dispatch<SetStateAction<string>>,
   isExpanded: boolean,
   focusedIndex: string,
+  setFocusedIndex: (s: string) => void,
 ) => {
   const { isLeftSidebarFocused } = useContext(UIContext.Focus);
   const { isVisible: isCommandBarVisible } = useContext(
@@ -48,11 +49,21 @@ export const useNavPanel = (
     focusedIndex !== index || !isLeftSidebarFocused || isCommandBarVisible,
   );
 
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      if (e.movementX || e.movementY) {
+        setFocusedIndex(index);
+      }
+    },
+    [index, setFocusedIndex],
+  );
+
   return {
     toggleExpanded,
     noPropagate,
     containerRef,
     isLeftSidebarFocused,
     isCommandBarVisible,
+    handleMouseMove,
   };
 };
diff --git a/client/src/types/general.ts b/client/src/types/general.ts
index 8abc62901e..49fa052ada 100644
--- a/client/src/types/general.ts
+++ b/client/src/types/general.ts
@@ -497,7 +497,6 @@ export type CommandBarSectionType = {
   label?: string;
   key: string;
   items: (CommandBarItemGeneralType | CommandBarItemCustomType)[];
-  itemsOffset: number;
 };
 
 export type CommandBarStepType = {
diff --git a/client/src/utils/commandBarUtils.test.ts b/client/src/utils/commandBarUtils.test.ts
index 8a83484b91..ffe2996039 100644
--- a/client/src/utils/commandBarUtils.test.ts
+++ b/client/src/utils/commandBarUtils.test.ts
@@ -104,11 +104,8 @@ describe('commandBarUtils', () => {
       const result = bubbleUpRecentItems(sections, [], recentLabel);
       expect(result.length).toEqual(3);
       expect(result[0].items.length).toEqual(items1.length);
-      expect(result[0].itemsOffset).toEqual(0);
       expect(result[1].items.length).toEqual(items2.length);
-      expect(result[1].itemsOffset).toEqual(items1.length);
       expect(result[2].items.length).toEqual(items3.length);
-      expect(result[2].itemsOffset).toEqual(items1.length + items2.length);
     });
     test('irrelevant recent items', () => {
       const result = bubbleUpRecentItems(
@@ -126,16 +123,12 @@ describe('commandBarUtils', () => {
       const result = bubbleUpRecentItems(sections, [key], recentLabel);
       expect(result.length).toEqual(4);
       expect(result[0].items.length).toEqual(1);
-      expect(result[0].itemsOffset).toEqual(0);
       expect(result[0].label).toEqual(recentLabel);
       expect(result[0].items[0].key).toEqual(key);
       expect(result[1].items.length).toEqual(items1.length - 1);
-      expect(result[1].itemsOffset).toEqual(1);
       expect(testArrayIncludes(result[1].items, key)).toBe(false);
       expect(result[2].items.length).toEqual(items2.length);
-      expect(result[2].itemsOffset).toEqual(items1.length);
       expect(result[3].items.length).toEqual(items3.length);
-      expect(result[3].itemsOffset).toEqual(items1.length + items2.length);
     });
     test('1 recent item in section 1 + irrelevant', () => {
       const key = items1[1].key;
@@ -154,15 +147,10 @@ describe('commandBarUtils', () => {
       const result = bubbleUpRecentItems(sections, [key], recentLabel);
       expect(result.length).toEqual(3);
       expect(result[0].items.length).toEqual(1);
-      expect(result[0].itemsOffset).toEqual(0);
       expect(result[0].label).toEqual(recentLabel);
       expect(result[0].items[0].key).toEqual(key);
       expect(result[1].items.length).toEqual(items1.length);
-      expect(result[1].itemsOffset).toEqual(1);
       expect(result[2].items.length).toEqual(items2.length);
-      expect(result[2].itemsOffset).toEqual(
-        result[0].items.length + result[1].items.length,
-      );
     });
     test('recent items in different sections', () => {
       const key1 = items1[2].key;
@@ -172,18 +160,13 @@ describe('commandBarUtils', () => {
       const result = bubbleUpRecentItems(sections, recentKeysArr, recentLabel);
       expect(result.length).toEqual(3);
       expect(result[0].items.length).toEqual(recentKeysArr.length);
-      expect(result[0].itemsOffset).toEqual(0);
       expect(result[0].label).toEqual(recentLabel);
       expect(result[0].items[0].key).toEqual(key1);
       expect(result[0].items[1].key).toEqual(key2);
       expect(result[0].items[2].key).toEqual(key3);
       expect(result[1].items.length).toEqual(items1.length - 1);
-      expect(result[1].itemsOffset).toEqual(result[0].items.length);
       expect(testArrayIncludes(result[1].items, key1)).toBe(false);
       expect(result[2].items.length).toEqual(items2.length - 1);
-      expect(result[2].itemsOffset).toEqual(
-        result[0].items.length + result[1].items.length,
-      );
       expect(testArrayIncludes(result[2].items, key2)).toBe(false);
     });
     test('all keys are recent', () => {
@@ -195,7 +178,6 @@ describe('commandBarUtils', () => {
       const result = bubbleUpRecentItems(sections, recentKeysArr, recentLabel);
       expect(result.length).toEqual(1);
       expect(result[0].items.length).toEqual(recentKeysArr.length);
-      expect(result[0].itemsOffset).toEqual(0);
       expect(result[0].label).toEqual(recentLabel);
       expect(result[0].items[0].key).toEqual(items1[0].key);
     });
diff --git a/client/src/utils/commandBarUtils.ts b/client/src/utils/commandBarUtils.ts
index 3a4536e1cb..356fc6f045 100644
--- a/client/src/utils/commandBarUtils.ts
+++ b/client/src/utils/commandBarUtils.ts
@@ -23,7 +23,6 @@ export const bubbleUpRecentItems = (
       items: recentItems.sort(
         (a, b) => recentKeys.indexOf(b.key) - recentKeys.indexOf(a.key),
       ),
-      itemsOffset: 0,
       key: 'recent-items',
     });
   }
@@ -33,10 +32,6 @@ export const bubbleUpRecentItems = (
       newSections.push({
         ...s,
         items: newItems,
-        itemsOffset: newSections[newSections.length - 1]
-          ? newSections[newSections.length - 1].items.length +
-            newSections[newSections.length - 1].itemsOffset
-          : 0,
       });
     }
   });