diff --git a/frontend/package.json b/frontend/package.json
index f5154cb..44c8813 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,6 +18,7 @@
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-hover-card": "^1.0.7",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
diff --git a/frontend/src/components/history/HistoryDisplay.tsx b/frontend/src/components/history/HistoryDisplay.tsx
index c13de1e..8f0a06b 100644
--- a/frontend/src/components/history/HistoryDisplay.tsx
+++ b/frontend/src/components/history/HistoryDisplay.tsx
@@ -1,7 +1,11 @@
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { History, HistoryItemType } from "./history_types";
+import { History } from "./history_types";
 import toast from "react-hot-toast";
 import classNames from "classnames";
+import {
+  HoverCard,
+  HoverCardTrigger,
+  HoverCardContent,
+} from "../ui/hover-card";
 
 interface Props {
   history: History;
@@ -10,17 +14,17 @@ interface Props {
   shouldDisableReverts: boolean;
 }
 
-function displayHistoryItemType(itemType: HistoryItemType) {
-  switch (itemType) {
-    case "ai_create":
-      return "Create";
-    case "ai_edit":
-      return "Edit";
-    default:
-      // TODO: Error out since this is exhaustive
-      return "Unknown";
-  }
-}
+// function displayHistoryItemType(itemType: HistoryItemType) {
+//   switch (itemType) {
+//     case "ai_create":
+//       return "Create";
+//     case "ai_edit":
+//       return "Edit";
+//     default:
+//       // TODO: Error out since this is exhaustive
+//       return "Unknown";
+//   }
+// }
 
 export default function HistoryDisplay({
   history,
@@ -31,45 +35,50 @@ export default function HistoryDisplay({
   return history.length === 0 ? null : (
     <div className="flex flex-col h-screen">
       <h1 className="font-bold mb-2">Versions</h1>
-      <ScrollArea className="flex-1 overflow-y-auto">
-        <ul className="space-y-0 flex flex-col-reverse">
-          {history.map((item, index) => (
-            <li
-              key={index}
-              className={classNames(
-                "flex items-center space-x-2 justify-between p-2",
-                "border-b cursor-pointer",
-                {
-                  " hover:bg-black hover:text-white": index !== currentVersion,
-                  "bg-slate-500 text-white": index === currentVersion,
+      <ul className="space-y-0 flex flex-col-reverse">
+        {history.map((item, index) => (
+          <li key={index}>
+            <HoverCard>
+              <HoverCardTrigger
+                className={classNames(
+                  "flex items-center justify-between space-x-2 p-2",
+                  "border-b cursor-pointer",
+                  {
+                    " hover:bg-black hover:text-white":
+                      index !== currentVersion,
+                    "bg-slate-500 text-white": index === currentVersion,
+                  }
+                )}
+                onClick={() =>
+                  shouldDisableReverts
+                    ? toast.error(
+                        "Please wait for code generation to complete before viewing an older version."
+                      )
+                    : revertToVersion(index)
                 }
-              )}
-              onClick={() =>
-                shouldDisableReverts
-                  ? toast.error(
-                      "Please wait for code generation to complete before viewing an older version."
-                    )
-                  : revertToVersion(index)
-              }
-            >
-              <div className="flex gap-x-1">
-                <h2 className="text-sm">{displayHistoryItemType(item.type)}</h2>
-                {item.parentIndex !== null && item.parentIndex !== index - 1 ? (
-                  <h2 className="text-sm">
-                    (parent: v{(item.parentIndex || 0) + 1})
+              >
+                {" "}
+                <div className="flex gap-x-1 truncate">
+                  <h2 className="text-sm truncate">
+                    {item.type === "ai_edit" ? item.inputs.prompt : "Create"}
                   </h2>
-                ) : null}
-              </div>
-              <h2 className="text-sm">
-                {item.type === "ai_edit"
-                  ? item.inputs.prompt
-                  : item.inputs.image_url}
-              </h2>
-              <h2 className="text-sm">v{index + 1}</h2>
-            </li>
-          ))}
-        </ul>
-      </ScrollArea>
+                  {/* <h2 className="text-sm">{displayHistoryItemType(item.type)}</h2> */}
+                  {item.parentIndex !== null &&
+                  item.parentIndex !== index - 1 ? (
+                    <h2 className="text-sm">
+                      (parent: v{(item.parentIndex || 0) + 1})
+                    </h2>
+                  ) : null}
+                </div>
+                <h2 className="text-sm">v{index + 1}</h2>
+              </HoverCardTrigger>
+              <HoverCardContent>
+                {item.type === "ai_edit" ? item.inputs.prompt : "Create"}
+              </HoverCardContent>
+            </HoverCard>
+          </li>
+        ))}
+      </ul>
     </div>
   );
 }
diff --git a/frontend/src/components/ui/hover-card.tsx b/frontend/src/components/ui/hover-card.tsx
new file mode 100644
index 0000000..863ff01
--- /dev/null
+++ b/frontend/src/components/ui/hover-card.tsx
@@ -0,0 +1,27 @@
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 3062080..da1a8e8 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -901,6 +901,22 @@
     "@radix-ui/react-primitive" "1.0.3"
     "@radix-ui/react-use-callback-ref" "1.0.1"
 
+"@radix-ui/react-hover-card@^1.0.7":
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-hover-card/-/react-hover-card-1.0.7.tgz#684bca2504432566357e7157e087051aa3577948"
+  integrity sha512-OcUN2FU0YpmajD/qkph3XzMcK/NmSk9hGWnjV68p6QiZMgILugusgQwnLSDs3oFSJYGKf3Y49zgFedhGh04k9A==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-dismissable-layer" "1.0.5"
+    "@radix-ui/react-popper" "1.1.3"
+    "@radix-ui/react-portal" "1.0.4"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+
 "@radix-ui/react-icons@^1.3.0":
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-icons/-/react-icons-1.3.0.tgz#c61af8f323d87682c5ca76b856d60c2312dbcb69"