diff --git a/moon/apps/web/components/CodeView/TreeView/CustomLabel.tsx b/moon/apps/web/components/CodeView/TreeView/CustomLabel.tsx
index be3a7dec2..eb80a3194 100644
--- a/moon/apps/web/components/CodeView/TreeView/CustomLabel.tsx
+++ b/moon/apps/web/components/CodeView/TreeView/CustomLabel.tsx
@@ -10,7 +10,7 @@ interface CustomLabelProps {
 }
 
 // Custom label component used to render each node in the tree structure
-export function CustomLabel({ icon: Icon, children, onClick, ...other }: CustomLabelProps) {
+export function CustomLabel({ icon: Icon, children, ...other }: CustomLabelProps) {
   return (
     <TreeItemLabel
       {...other}
@@ -22,15 +22,11 @@ export function CustomLabel({ icon: Icon, children, onClick, ...other }: CustomL
       {Icon && (
         <Box component={Icon} className="labelIcon" color="inherit" sx={{ mr: 1, fontSize: '1.2rem' }} />
       )}
-      <TreeItemLabel 
-        sx={{fontSize: '14px', cursor: 'pointer'}} 
-        onClick={(e) => {
-          e.stopPropagation();
-          onClick?.(e);
-        }}
+      <div
+        style={{fontSize: '14px', cursor: 'pointer'}}
       >
         {children}
-      </TreeItemLabel>
+      </div>
     </TreeItemLabel>
   );
 }
diff --git a/moon/apps/web/components/CodeView/TreeView/CustomTreeItem.tsx b/moon/apps/web/components/CodeView/TreeView/CustomTreeItem.tsx
index c2de354dd..70f58aad5 100644
--- a/moon/apps/web/components/CodeView/TreeView/CustomTreeItem.tsx
+++ b/moon/apps/web/components/CodeView/TreeView/CustomTreeItem.tsx
@@ -27,7 +27,7 @@ interface CustomTreeItemProps
 
 // Custom tree structure node component, used to render elements such as icons and labels for each node
 export const CustomTreeItem = React.forwardRef(function CustomTreeItem(
-  { onLabelClick, loadingDirectories, ...props }: CustomTreeItemProps,
+  { loadingDirectories, ...props }: CustomTreeItemProps,
   ref: React.Ref<HTMLLIElement>,
 ) {
   const { id, itemId, label, disabled, children, ...other } = props;
@@ -81,11 +81,6 @@ export const CustomTreeItem = React.forwardRef(function CustomTreeItem(
             {...getLabelProps({
               icon,
             })}
-            onClick={() => {
-              if (item.content_type) {
-                onLabelClick?.(item.path, item.content_type === 'directory');
-              }
-            }}
           />
           
           <TreeItemDragAndDropOverlay {...getDragAndDropOverlayProps()} />
diff --git a/moon/apps/web/components/CodeView/TreeView/RepoTree.tsx b/moon/apps/web/components/CodeView/TreeView/RepoTree.tsx
index 686969e66..3ad354cde 100644
--- a/moon/apps/web/components/CodeView/TreeView/RepoTree.tsx
+++ b/moon/apps/web/components/CodeView/TreeView/RepoTree.tsx
@@ -11,6 +11,7 @@ import { CustomTreeItem } from './CustomTreeItem';
 import toast from 'react-hot-toast';
 import { useAtom } from 'jotai';
 import { expandedNodesAtom, treeAllDataAtom } from './codeTreeAtom';
+import { useTreeViewApiRef } from "@mui/x-tree-view";
 
 const RepoTree = ({ onCommitInfoChange }: { onCommitInfoChange?:Function }) => {
   const router = useRouter();
@@ -19,7 +20,9 @@ const RepoTree = ({ onCommitInfoChange }: { onCommitInfoChange?:Function }) => {
   const basePath = pathname?.replace(
     new RegExp(`\\/${scope}\\/code\\/(tree|blob)`), 
     ''
-  ) || '/'; 
+  ) || '/';
+
+  const apiRef = useTreeViewApiRef();
 
   const [treeAllData, setTreeAllData] = useAtom(treeAllDataAtom)
   const [expandedNodes, setExpandedNodes] = useAtom(expandedNodesAtom)
@@ -116,6 +119,18 @@ const handleNodeToggle = useCallback((_event: React.SyntheticEvent | null, nodeI
     }
   }, [router, scope]);
 
+  const handleFocusItem = (_e: React.SyntheticEvent | null, itemId: string) => {
+    const item = apiRef.current!.getItem(itemId)
+
+    if (item.content_type) {
+      handleLabelClick(item.path, item.content_type === 'directory');
+      apiRef.current?.setItemSelection({
+        itemId,
+        keepExistingSelection: false
+      })
+    }
+  }
+  
   useEffect(() => {
     if (basePath) {
       onCommitInfoChange?.(basePath);
@@ -131,7 +146,9 @@ const handleNodeToggle = useCallback((_event: React.SyntheticEvent | null, nodeI
       ) 
       : (
         <RichTreeView
+          apiRef={apiRef}
           items={treeAllData}
+          onItemFocus={handleFocusItem}
           expandedItems={expandedNodes}
           onExpandedItemsChange={handleNodeToggle}
           sx={{ height: 'fit-content', flexGrow: 1, width: '100%', overflow: 'auto' }}
@@ -139,7 +156,6 @@ const handleNodeToggle = useCallback((_event: React.SyntheticEvent | null, nodeI
             item: (itemProps) => (
               <CustomTreeItem 
                 {...itemProps}
-                onLabelClick={handleLabelClick}
                 loadingDirectories={loadingDirectories}
               />
             )