diff --git a/frontend/package.json b/frontend/package.json
index 44c8813..311f1c5 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,6 +17,7 @@
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-hover-card": "^1.0.7",
     "@radix-ui/react-icons": "^1.3.0",
diff --git a/frontend/src/components/history/HistoryDisplay.tsx b/frontend/src/components/history/HistoryDisplay.tsx
index 615aed8..ce00db4 100644
--- a/frontend/src/components/history/HistoryDisplay.tsx
+++ b/frontend/src/components/history/HistoryDisplay.tsx
@@ -1,13 +1,16 @@
 import { History } from "./history_types";
 import toast from "react-hot-toast";
 import classNames from "classnames";
-import {
-  HoverCard,
-  HoverCardTrigger,
-  HoverCardContent,
-} from "../ui/hover-card";
+
 import { Badge } from "../ui/badge";
 import { renderHistory } from "./utils";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../ui/collapsible";
+import { Button } from "../ui/button";
+import { CaretSortIcon } from "@radix-ui/react-icons";
 
 interface Props {
   history: History;
@@ -30,38 +33,51 @@ export default function HistoryDisplay({
       <ul className="space-y-0 flex flex-col-reverse">
         {renderedHistory.map((item, index) => (
           <li key={index}>
-            <HoverCard>
-              <HoverCardTrigger
+            <Collapsible>
+              <div
                 className={classNames(
-                  "flex items-center justify-between space-x-2 p-2",
+                  "flex items-center justify-between space-x-2 w-full pr-2",
                   "border-b cursor-pointer",
                   {
                     " hover:bg-black hover:text-white": !item.isActive,
                     "bg-slate-500 text-white": item.isActive,
                   }
                 )}
-                onClick={() =>
-                  shouldDisableReverts
-                    ? toast.error(
-                        "Please wait for code generation to complete before viewing an older version."
-                      )
-                    : revertToVersion(index)
-                }
               >
-                {" "}
-                <div className="flex gap-x-1 truncate">
-                  <h2 className="text-sm truncate">{item.summary}</h2>
-                  {item.parentVersion !== null && (
-                    <h2 className="text-sm">(parent: {item.parentVersion})</h2>
-                  )}
+                <div
+                  className="flex justify-between truncate flex-1 p-2"
+                  onClick={() =>
+                    shouldDisableReverts
+                      ? toast.error(
+                          "Please wait for code generation to complete before viewing an older version."
+                        )
+                      : revertToVersion(index)
+                  }
+                >
+                  <div className="flex gap-x-1 truncate">
+                    <h2 className="text-sm truncate">{item.summary}</h2>
+                    {item.parentVersion !== null && (
+                      <h2 className="text-sm">
+                        (parent: {item.parentVersion})
+                      </h2>
+                    )}
+                  </div>
+                  <h2 className="text-sm">v{index + 1}</h2>
                 </div>
-                <h2 className="text-sm">v{index + 1}</h2>
-              </HoverCardTrigger>
-              <HoverCardContent>
-                <div>{item.summary}</div>
-                <Badge>{item.type}</Badge>
-              </HoverCardContent>
-            </HoverCard>
+                <CollapsibleTrigger asChild>
+                  <Button variant="ghost" size="sm" className="h-6">
+                    <CaretSortIcon className="h-4 w-4" />
+                    <span className="sr-only">Toggle</span>
+                  </Button>
+                </CollapsibleTrigger>
+              </div>
+              <CollapsibleContent className="w-full bg-slate-300 p-2">
+                <div>Full prompt: {item.summary}</div>
+                <div className="flex justify-end">
+                  <Badge>{item.type}</Badge>
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
           </li>
         ))}
       </ul>
diff --git a/frontend/src/components/ui/collapsible.tsx b/frontend/src/components/ui/collapsible.tsx
new file mode 100644
index 0000000..a23e7a2
--- /dev/null
+++ b/frontend/src/components/ui/collapsible.tsx
@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index da1a8e8..242d216 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -804,7 +804,7 @@
     "@radix-ui/react-use-previous" "1.0.1"
     "@radix-ui/react-use-size" "1.0.1"
 
-"@radix-ui/react-collapsible@1.0.3":
+"@radix-ui/react-collapsible@1.0.3", "@radix-ui/react-collapsible@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-collapsible/-/react-collapsible-1.0.3.tgz#df0e22e7a025439f13f62d4e4a9e92c4a0df5b81"
   integrity sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==