diff --git a/src/features/version-control/git/components/git-commit-history.tsx b/src/features/version-control/git/components/git-commit-history.tsx
index 93b0deb2..81a3221d 100644
--- a/src/features/version-control/git/components/git-commit-history.tsx
+++ b/src/features/version-control/git/components/git-commit-history.tsx
@@ -1,5 +1,6 @@
-import { ChevronDown, ChevronRight, Clock, Hash, User } from "lucide-react";
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Clock, Hash, User } from "lucide-react";
+import { type MouseEvent, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { getCommitDiff } from "@/features/version-control/git/controllers/git";
 import { useGitStore } from "@/features/version-control/git/controllers/git-store";
 
@@ -9,46 +10,20 @@ interface GitCommitHistoryProps {
 }
 
 const EMPTY_FILES_ARRAY: any[] = [];
+const HOVER_CLOSE_DELAY_MS = 250;
+const MAX_VISIBLE_FILES = 5;
+const FILE_ROW_HEIGHT = 26;
 
 interface CommitItemProps {
   commit: any;
-  expandedCommits: Set<string>;
-  commitFiles: Record<string, any[]>;
-  loadingCommits: Set<string>;
-  copiedHashes: Set<string>;
-  onToggleExpansion: (commitHash: string) => void;
-  onViewCommitDiff: (commitHash: string, filePath?: string) => void;
-  onCopyHash: (hash: string) => void;
+  isActive: boolean;
+  onHover: (commit: any, target: HTMLElement) => void;
+  onHoverEnd: () => void;
+  onViewCommitDiff: (commitHash: string) => void;
 }
 
 const CommitItem = memo(
-  ({
-    commit,
-    expandedCommits,
-    commitFiles,
-    loadingCommits,
-    copiedHashes,
-    onToggleExpansion,
-    onViewCommitDiff,
-    onCopyHash,
-  }: CommitItemProps) => {
-    const isExpanded = expandedCommits.has(commit.hash);
-    const files = commitFiles[commit.hash] || EMPTY_FILES_ARRAY;
-    const isLoading = loadingCommits.has(commit.hash);
-    const isCopied = copiedHashes.has(commit.hash);
-
-    const handleCommitClick = useCallback(() => {
-      onViewCommitDiff(commit.hash);
-    }, [commit.hash, onViewCommitDiff]);
-
-    const handleToggleClick = useCallback(
-      (e: React.MouseEvent) => {
-        e.stopPropagation();
-        onToggleExpansion(commit.hash);
-      },
-      [commit.hash, onToggleExpansion],
-    );
-
+  ({ commit, isActive, onHover, onHoverEnd, onViewCommitDiff }: CommitItemProps) => {
     const formattedDate = useMemo(() => {
       try {
         const date = new Date(commit.date);
@@ -75,71 +50,80 @@ const CommitItem = memo(
       }
     }, [commit.date]);
 
+    const handleCommitClick = useCallback(() => {
+      onViewCommitDiff(commit.hash);
+    }, [commit.hash, onViewCommitDiff]);
+
+    const handleMouseEnter = useCallback(
+      (event: MouseEvent<HTMLDivElement>) => {
+        onHover(commit, event.currentTarget);
+      },
+      [commit, onHover],
+    );
+
     return (
-      <div className="border-border border-b last:border-b-0">
-        {/* Commit Header */}
-        <div className="cursor-pointer px-3 py-2 hover:bg-hover" onClick={handleCommitClick}>
-          <div className="flex items-start gap-2">
-            <button
-              onClick={handleToggleClick}
-              className="mt-0.5 text-text-lighter transition-colors hover:text-text"
-            >
-              {isExpanded ? <ChevronDown size={10} /> : <ChevronRight size={10} />}
-            </button>
-            <div className="min-w-0 flex-1">
-              <div className="mb-1 font-medium text-[10px] text-text leading-tight">
-                {commit.message}
-              </div>
-
-              <div className="flex items-center gap-3 text-[9px] text-text-lighter">
-                <span className="flex items-center gap-1">
-                  <User size={8} />
-                  {commit.author}
-                </span>
-
-                <span className="flex items-center gap-1">
-                  <Clock size={8} />
-                  {formattedDate}
-                </span>
-              </div>
+      <div
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={onHoverEnd}
+        onClick={handleCommitClick}
+        className={`cursor-pointer px-3 py-2 hover:bg-hover ${isActive ? "bg-hover" : ""}`}
+      >
+        <div className="flex items-start gap-2">
+          <div className="min-w-0 flex-1">
+            <div className="mb-1 font-medium text-[10px] text-text leading-tight">
+              {commit.message}
+            </div>
+
+            <div className="flex items-center gap-3 text-[9px] text-text-lighter">
+              <span className="flex items-center gap-1">
+                <User size={8} />
+                {commit.author}
+              </span>
+
+              <span className="flex items-center gap-1">
+                <Clock size={8} />
+                {formattedDate}
+              </span>
             </div>
           </div>
         </div>
-
-        {/* Expanded Commit Details */}
-        {isExpanded && (
-          <ExpandedCommitDetails
-            commit={commit}
-            files={files}
-            isLoading={isLoading}
-            isCopied={isCopied}
-            onViewCommitDiff={onViewCommitDiff}
-            onCopyHash={onCopyHash}
-          />
-        )}
       </div>
     );
   },
 );
 
-interface ExpandedCommitDetailsProps {
+interface CommitHoverPreviewProps {
   commit: any;
   files: any[];
   isLoading: boolean;
   isCopied: boolean;
-  onViewCommitDiff: (commitHash: string, filePath?: string) => void;
+  anchorRect: {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+    width: number;
+    height: number;
+    scrollbarWidth: number;
+  };
+  onKeepOpen: () => void;
+  onRequestClose: () => void;
   onCopyHash: (hash: string) => void;
+  onViewCommitDiff: (commitHash: string, filePath?: string) => void;
 }
 
-const ExpandedCommitDetails = memo(
+const CommitHoverPreview = memo(
   ({
     commit,
     files,
     isLoading,
     isCopied,
-    onViewCommitDiff,
+    anchorRect,
+    onKeepOpen,
+    onRequestClose,
     onCopyHash,
-  }: ExpandedCommitDetailsProps) => {
+    onViewCommitDiff,
+  }: CommitHoverPreviewProps) => {
     const handleCopyClick = useCallback(() => {
       onCopyHash(commit.hash);
     }, [commit.hash, onCopyHash]);
@@ -151,28 +135,56 @@ const ExpandedCommitDetails = memo(
       [commit.hash, onViewCommitDiff],
     );
 
-    if (isLoading) {
-      return (
-        <div className="bg-primary-bg px-8 py-2">
-          <div className="text-[9px] text-text-lighter italic">Loading files...</div>
-        </div>
-      );
-    }
-
-    if (files.length === 0) {
-      return (
-        <div className="bg-primary-bg px-8 py-2">
-          <div className="text-[9px] text-text-lighter italic">No files changed</div>
-        </div>
-      );
+    const portalTarget = typeof document !== "undefined" ? document.body : null;
+
+    const { top, right, scrollbarWidth } = anchorRect;
+    const filesScrollable = files.length > MAX_VISIBLE_FILES;
+    const listMaxHeight = filesScrollable ? MAX_VISIBLE_FILES * FILE_ROW_HEIGHT : undefined;
+    const windowHeight = typeof window !== "undefined" ? window.innerHeight : 0;
+    const windowWidth = typeof window !== "undefined" ? window.innerWidth : 0;
+
+    const estimatedHeight = useMemo(() => {
+      if (isLoading) return 160;
+      const visibleCount = Math.min(files.length, MAX_VISIBLE_FILES);
+      const base = files.length === 0 ? 140 : visibleCount * FILE_ROW_HEIGHT + 120;
+      return Math.min(Math.max(base, 140), 340);
+    }, [files.length, isLoading]);
+
+    const cardWidth = 260;
+    const viewportPadding = 12;
+
+    const verticalPosition = (() => {
+      if (!windowHeight) return top;
+      const minTop = viewportPadding;
+      const maxTop = Math.max(windowHeight - estimatedHeight - viewportPadding, viewportPadding);
+      return Math.min(Math.max(top, minTop), maxTop);
+    })();
+
+    const desiredLeft = right + scrollbarWidth + 4;
+    const horizontalPosition = (() => {
+      if (!windowWidth) return desiredLeft;
+      const maxLeft = windowWidth - cardWidth - viewportPadding;
+      const clamped = Math.min(desiredLeft, maxLeft);
+      return Math.max(clamped, viewportPadding);
+    })();
+
+    if (!portalTarget) {
+      return null;
     }
 
-    return (
-      <div className="bg-primary-bg px-8 py-2">
-        <div className="space-y-1">
-          <div className="mb-1 flex items-center justify-between text-[9px] text-text-lighter">
-            <span>
-              {files.length} file{files.length !== 1 ? "s" : ""} changed
+    return createPortal(
+      <div
+        className="pointer-events-auto fixed z-50 w-60 rounded border border-border bg-secondary-bg p-3 text-[9px] shadow-lg"
+        style={{ top: verticalPosition, left: horizontalPosition, width: cardWidth }}
+        onMouseEnter={onKeepOpen}
+        onMouseLeave={onRequestClose}
+      >
+        <div className="mb-2">
+          <div className="mb-1 font-medium text-text leading-tight">{commit.message}</div>
+          <div className="flex items-center justify-between text-text-lighter">
+            <span className="flex items-center gap-1">
+              <User size={8} />
+              {commit.author}
             </span>
             <button
               onClick={handleCopyClick}
@@ -182,11 +194,32 @@ const ExpandedCommitDetails = memo(
               {isCopied ? "Copied" : commit.hash.substring(0, 7)}
             </button>
           </div>
-          {files.map((file, fileIndex) => (
-            <FileItem key={fileIndex} file={file} onFileClick={handleFileClick} />
-          ))}
         </div>
-      </div>
+
+        {isLoading ? (
+          <div className="text-text-lighter italic">Loading files...</div>
+        ) : files.length === 0 ? (
+          <div className="text-text-lighter italic">No files changed</div>
+        ) : (
+          <div className="space-y-1">
+            <div className="mb-1 text-text-lighter">
+              {files.length} file{files.length !== 1 ? "s" : ""} changed
+            </div>
+            <div
+              className={`${filesScrollable ? "scrollbar-thin pr-1" : ""} space-y-1`}
+              style={{
+                maxHeight: listMaxHeight,
+                overflowY: filesScrollable ? "auto" : "visible",
+              }}
+            >
+              {files.map((file, index) => (
+                <FileItem key={index} file={file} onFileClick={handleFileClick} />
+              ))}
+            </div>
+          </div>
+        )}
+      </div>,
+      portalTarget,
     );
   },
 );
@@ -204,18 +237,18 @@ const FileItem = memo(({ file, onFileClick }: FileItemProps) => {
   const statusColor = useMemo(() => {
     if (file.is_new) return "text-green-400";
     if (file.is_deleted) return "text-red-400";
-    return "text-yellow-400"; // modified
+    return "text-yellow-400";
   }, [file.is_new, file.is_deleted]);
 
   const statusChar = useMemo(() => {
     if (file.is_new) return "A";
     if (file.is_deleted) return "D";
-    return "M"; // modified
+    return "M";
   }, [file.is_new, file.is_deleted]);
 
   return (
     <div
-      className="flex cursor-pointer items-center gap-2 rounded px-2 py-1 text-[9px] hover:bg-hover"
+      className="flex cursor-pointer items-center gap-2 rounded bg-primary-bg px-2 py-1 hover:bg-hover"
       onClick={handleClick}
     >
       <span className={`ui-font ${statusColor}`}>{statusChar}</span>
@@ -229,67 +262,108 @@ const FileItem = memo(({ file, onFileClick }: FileItemProps) => {
 
 const GitCommitHistory = ({ onViewCommitDiff, repoPath }: GitCommitHistoryProps) => {
   const { commits, hasMoreCommits, isLoadingMoreCommits, actions } = useGitStore();
-  const [expandedCommits, setExpandedCommits] = useState<Set<string>>(new Set());
   const [commitFiles, setCommitFiles] = useState<Record<string, any[]>>({});
   const [loadingCommits, setLoadingCommits] = useState<Set<string>>(new Set());
   const [copiedHashes, setCopiedHashes] = useState<Set<string>>(new Set());
+  const [hoveredCommit, setHoveredCommit] = useState<{
+    commit: any;
+    anchorRect: {
+      top: number;
+      bottom: number;
+      left: number;
+      right: number;
+      width: number;
+      height: number;
+      scrollbarWidth: number;
+    };
+  } | null>(null);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const lastScrollTop = useRef(0);
   const copyHashTimeoutRef = useRef<Map<string, NodeJS.Timeout>>(new Map());
   const scrollSetupTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const scrollSetupRafRef = useRef<number | null>(null);
 
-  const toggleCommitExpansion = useCallback(
-    (commitHash: string) => {
-      setExpandedCommits((prev) => {
-        const newExpanded = new Set(prev);
+  const clearHoverTimeout = useCallback(() => {
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+      hoverTimeoutRef.current = null;
+    }
+  }, []);
 
-        if (prev.has(commitHash)) {
-          newExpanded.delete(commitHash);
-          return newExpanded;
-        } else {
-          newExpanded.add(commitHash);
-
-          if (!commitFiles[commitHash] && repoPath) {
-            setLoadingCommits((prev) => new Set(prev).add(commitHash));
-
-            getCommitDiff(repoPath, commitHash)
-              .then((diffs) => {
-                setCommitFiles((prev) => ({
-                  ...prev,
-                  [commitHash]: diffs || [],
-                }));
-              })
-              .catch(() => {})
-              .finally(() => {
-                setLoadingCommits((prev) => {
-                  const newSet = new Set(prev);
-                  newSet.delete(commitHash);
-                  return newSet;
-                });
-              });
-          }
+  const scheduleHoverClear = useCallback(() => {
+    clearHoverTimeout();
+    hoverTimeoutRef.current = setTimeout(() => {
+      setHoveredCommit(null);
+    }, HOVER_CLOSE_DELAY_MS);
+  }, [clearHoverTimeout]);
 
-          return newExpanded;
-        }
+  const handleCommitHover = useCallback(
+    (commit: any, target: HTMLElement) => {
+      clearHoverTimeout();
+
+      const container = scrollContainerRef.current;
+      if (!container) return;
+
+      const targetRect = target.getBoundingClientRect();
+      const scrollbarWidth = Math.max(container.offsetWidth - container.clientWidth, 0);
+      setHoveredCommit({
+        commit,
+        anchorRect: {
+          top: targetRect.top,
+          bottom: targetRect.bottom,
+          left: targetRect.left,
+          right: targetRect.right,
+          width: targetRect.width,
+          height: targetRect.height,
+          scrollbarWidth,
+        },
       });
+
+      if (!commitFiles[commit.hash] && repoPath) {
+        setLoadingCommits((prev) => {
+          if (prev.has(commit.hash)) return prev;
+          const next = new Set(prev);
+          next.add(commit.hash);
+          return next;
+        });
+
+        getCommitDiff(repoPath, commit.hash)
+          .then((diffs) => {
+            setCommitFiles((prev) => ({
+              ...prev,
+              [commit.hash]: diffs || [],
+            }));
+          })
+          .catch(() => {})
+          .finally(() => {
+            setLoadingCommits((prev) => {
+              const next = new Set(prev);
+              next.delete(commit.hash);
+              return next;
+            });
+          });
+      }
     },
-    [commitFiles, repoPath],
+    [clearHoverTimeout, commitFiles, repoPath],
   );
 
+  const handleCommitHoverEnd = useCallback(() => {
+    scheduleHoverClear();
+  }, [scheduleHoverClear]);
+
   const copyCommitHash = useCallback((hash: string) => {
     navigator.clipboard.writeText(hash);
     setCopiedHashes((prev) => new Set(prev).add(hash));
-    // Clear any existing timeout for this hash
     const existingTimeout = copyHashTimeoutRef.current.get(hash);
     if (existingTimeout) {
       clearTimeout(existingTimeout);
     }
     const timeoutId = setTimeout(() => {
       setCopiedHashes((prev) => {
-        const newSet = new Set(prev);
-        newSet.delete(hash);
-        return newSet;
+        const next = new Set(prev);
+        next.delete(hash);
+        return next;
       });
       copyHashTimeoutRef.current.delete(hash);
     }, 1000);
@@ -303,6 +377,12 @@ const GitCommitHistory = ({ onViewCommitDiff, repoPath }: GitCommitHistoryProps)
     [onViewCommitDiff],
   );
 
+  useEffect(() => {
+    return () => {
+      clearHoverTimeout();
+    };
+  }, [clearHoverTimeout]);
+
   useEffect(() => {
     if (!repoPath) return;
 
@@ -313,6 +393,11 @@ const GitCommitHistory = ({ onViewCommitDiff, repoPath }: GitCommitHistoryProps)
       const container = scrollContainerRef.current;
       if (!container) return;
 
+      if (hoveredCommit) {
+        clearHoverTimeout();
+        setHoveredCommit(null);
+      }
+
       const { scrollTop, scrollHeight, clientHeight } = container;
       const isScrollingDown = scrollTop > lastScrollTop.current;
       lastScrollTop.current = scrollTop;
@@ -379,12 +464,27 @@ const GitCommitHistory = ({ onViewCommitDiff, repoPath }: GitCommitHistoryProps)
         clearTimeout(scrollSetupTimeoutRef.current);
         scrollSetupTimeoutRef.current = null;
       }
-      // Clear all copy hash timeouts
       copyHashTimeoutRef.current.forEach((timeout) => clearTimeout(timeout));
       copyHashTimeoutRef.current.clear();
       removeScrollListener();
     };
-  }, [commits.length, hasMoreCommits, isLoadingMoreCommits, repoPath, actions]);
+  }, [
+    commits.length,
+    hasMoreCommits,
+    isLoadingMoreCommits,
+    repoPath,
+    actions,
+    hoveredCommit,
+    clearHoverTimeout,
+  ]);
+
+  useEffect(() => {
+    if (!hoveredCommit) return;
+    const stillExists = commits.some((commit) => commit.hash === hoveredCommit.commit.hash);
+    if (!stillExists) {
+      setHoveredCommit(null);
+    }
+  }, [commits, hoveredCommit]);
 
   if (commits.length === 0) {
     return (
@@ -407,31 +507,44 @@ const GitCommitHistory = ({ onViewCommitDiff, repoPath }: GitCommitHistoryProps)
         <span className="cursor-default">commits</span>
       </div>
 
-      <div ref={scrollContainerRef} className="max-h-96 overflow-y-auto bg-primary-bg">
-        {commits.map((commit) => (
-          <CommitItem
-            key={commit.hash}
-            commit={commit}
-            expandedCommits={expandedCommits}
-            commitFiles={commitFiles}
-            loadingCommits={loadingCommits}
-            copiedHashes={copiedHashes}
-            onToggleExpansion={toggleCommitExpansion}
-            onViewCommitDiff={handleViewCommitDiff}
-            onCopyHash={copyCommitHash}
-          />
-        ))}
+      <div className="relative">
+        <div ref={scrollContainerRef} className="max-h-96 overflow-y-auto bg-primary-bg">
+          {commits.map((commit) => (
+            <CommitItem
+              key={commit.hash}
+              commit={commit}
+              isActive={hoveredCommit?.commit.hash === commit.hash}
+              onHover={handleCommitHover}
+              onHoverEnd={handleCommitHoverEnd}
+              onViewCommitDiff={handleViewCommitDiff}
+            />
+          ))}
 
-        {isLoadingMoreCommits && (
-          <div className="border-border border-t bg-primary-bg px-3 py-2 text-center text-[10px] text-text-lighter">
-            Loading older commits...
-          </div>
-        )}
+          {isLoadingMoreCommits && (
+            <div className="border-border border-t bg-primary-bg px-3 py-2 text-center text-[10px] text-text-lighter">
+              Loading older commits...
+            </div>
+          )}
 
-        {!hasMoreCommits && commits.length > 0 && (
-          <div className="border-border border-t bg-primary-bg px-3 py-2 text-center text-[10px] text-text-lighter">
-            — end of history —
-          </div>
+          {!hasMoreCommits && commits.length > 0 && (
+            <div className="border-border border-t bg-primary-bg px-3 py-2 text-center text-[10px] text-text-lighter">
+              — end of history —
+            </div>
+          )}
+        </div>
+
+        {hoveredCommit && (
+          <CommitHoverPreview
+            commit={hoveredCommit.commit}
+            files={commitFiles[hoveredCommit.commit.hash] || EMPTY_FILES_ARRAY}
+            isLoading={loadingCommits.has(hoveredCommit.commit.hash)}
+            isCopied={copiedHashes.has(hoveredCommit.commit.hash)}
+            anchorRect={hoveredCommit.anchorRect}
+            onKeepOpen={clearHoverTimeout}
+            onRequestClose={scheduleHoverClear}
+            onCopyHash={copyCommitHash}
+            onViewCommitDiff={handleViewCommitDiff}
+          />
         )}
       </div>
     </div>