diff --git a/frontend/src/components/Transaction.jsx b/frontend/src/components/Transaction.jsx
index 12cdc24..7ca7f85 100644
--- a/frontend/src/components/Transaction.jsx
+++ b/frontend/src/components/Transaction.jsx
@@ -1,13 +1,11 @@
 import React, { useEffect, useState, useContext } from "react";
 import TransactionContext from "../context/TransactionContext";
-import TransactionDetailsPopup from "../components/TransactionDetailPopup";
 
 const Transaction = ({ transaction }) => {
   const [isAmountNegative, setIsAmountNegative] = useState(false);
   const [convertedAmount, setConvertedAmount] = useState(transaction.amount);
-  const [showDetails, setShowDetails] = useState(false);
   const { currency, convertCurrency, handleSelect } =
-  useContext(TransactionContext);
+    useContext(TransactionContext);
 
   // useEffect to check if each transaction is negative and then convert the currency
   useEffect(() => {
@@ -27,40 +25,22 @@ const Transaction = ({ transaction }) => {
     handleSelect(transaction.id, e.target.checked);
     console.log("clicked: ", transaction.id);
   };
-
   return (
-  <>
-      <div className="flex flex-row justify-start text-body pl-[8x] ">
-        <input className="cursor-pointer" type="checkbox" onChange={handleCheckboxChange} />
-          
-          <div 
-            className={` w-full flex flex-row justify-between text-body ml-[8px] pl-2 pr-2 rounded-2xl ${
-              isAmountNegative ? "text-red-500" : "text-green-500"} hover:bg-gray-300 cursor-pointer`}
-            onClick={() => setShowDetails(true)}>
-            
-            <p>
-              {isAmountNegative ? convertedAmount : `+${convertedAmount}`}:{" "}
-              {transaction.title}
-            </p>
-            
-            <p className="self-end">{transaction.created_at.substring(0, 10)}</p>
-
-          </div>
+    <div className="flex flex-row justify-start text-body pl-[8x]">
+      <input type="checkbox" onChange={handleCheckboxChange} />
+      <div
+        className={` w-full flex flex-row justify-between text-body pl-[8px] ${
+          isAmountNegative ? "text-red-500" : "text-green-500"
+        }`}
+      >
+        <p>
+          {isAmountNegative ? convertedAmount : `+${convertedAmount}`}:{" "}
+          {transaction.description}
+        </p>
+        <p className="self-end">{transaction.created_at.substring(0, 10)}</p>
       </div>
-
-    {/*displays the currently hovered transaction in a popup*/
-    
-    showDetails && (
-        <div className="absolute">
-          <TransactionDetailsPopup
-            transaction={transaction}
-            setShowDetails={setShowDetails}
-          />
-        </div>
-      )
-    }
-  </>
-  )
+    </div>
+  );
 };
 
 export default Transaction;
diff --git a/frontend/src/components/TransactionDetailPopup.jsx b/frontend/src/components/TransactionDetailPopup.jsx
deleted file mode 100644
index 1724e2f..0000000
--- a/frontend/src/components/TransactionDetailPopup.jsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { useState, useEffect } from "react";
-
-export default function TransactionDetailPopup({transaction, setShowDetails}){
-   
-  //exits out of the current popup by setting the popup boolean to false in transaction.jsx
-  const handleExit =() => {
-     setShowDetails(false);
-   }
-
-  return(
-      <>
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
-          <div className="bg-white p-3 rounded-2xl w-96 relative flex flex-col">
-              
-              <h2 className="text-sub-heading font-bold mx-auto pb-3">Transaction Details</h2>
-
-              <div className= "flex flex-row">
-                <h2 className="pl-2 text-body font-bold">Title: </h2>
-                <h2 className="pl-2 text-body ">{transaction.title}</h2>
-              </div>
-              
-              <div className= "flex flex-row">
-                <h2 className="pl-2 text-body font-bold">Amount:</h2>
-                <h2 className="pl-2 text-body">${transaction.amount}</h2>
-              </div>
-              
-              <h2 className="pl-2 pb-2 text-body font-bold">Description</h2>
-              
-
-              <textarea className="pl-4 font-size-12 font-medium resize-none"
-                disabled = {true}
-                rows="5"
-                value={transaction.description}
-              />
-
-              <button className="mr-0 ml-auto pt-5" onClick= {handleExit}>
-                <div id="exitdiv" className="bg-primary-dark hover:bg-primary-darker p-2 rounded-2xl w-20 relative">
-                    <h1 className="text-button-small text-white">exit</h1>
-                </div>
-              </button>
-
-          </div>
-        </div>
-      </>
-  )
-}
\ No newline at end of file