diff --git a/src/Components/DashboardPage/Student/StudentTransactionListView.tsx b/src/Components/DashboardPage/Student/StudentTransactionListView.tsx
index 3abe5eb..d291e29 100644
--- a/src/Components/DashboardPage/Student/StudentTransactionListView.tsx
+++ b/src/Components/DashboardPage/Student/StudentTransactionListView.tsx
@@ -5,8 +5,10 @@ import CircularProgress from "@mui/material/CircularProgress/CircularProgress";
 import React, { useState } from "react";
 import TransactionEntry from "../../TransactionEntry/TransactionEntry";
 import TransactionFilterMenu from "../TransactionFilterMenu";
+import { useNavigate } from "react-router-dom";
 
 export default function StudentTransactionListView() {
+  const navigate = useNavigate();
   const transactions = useQuery({
     queryKey: ["transactions_student"],
     queryFn: TransactionsByStudentAPI,
@@ -54,7 +56,15 @@ export default function StudentTransactionListView() {
               )
               .map((transaction) => (
                 <React.Fragment key={transaction.id}>
-                  <TransactionEntry transaction={transaction} />
+                  <TransactionEntry
+                    onClick={() =>
+                      navigate(`/view/transaction/${transaction.id}`, {
+                        replace: true,
+                        state: { id: transaction.id },
+                      })
+                    }
+                    transaction={transaction}
+                  />
                 </React.Fragment>
               ))
           ) : (
diff --git a/src/Components/DashboardPage/Teacher/TeacherTransactionListView.tsx b/src/Components/DashboardPage/Teacher/TeacherTransactionListView.tsx
index fee9984..c763d8c 100644
--- a/src/Components/DashboardPage/Teacher/TeacherTransactionListView.tsx
+++ b/src/Components/DashboardPage/Teacher/TeacherTransactionListView.tsx
@@ -5,8 +5,10 @@ import CircularProgress from "@mui/material/CircularProgress/CircularProgress";
 import React, { useState } from "react";
 import TransactionEntry from "../../TransactionEntry/TransactionEntry";
 import TransactionFilterMenu from "../TransactionFilterMenu";
+import { useNavigate } from "react-router-dom";
 
 export default function TeacherTransactionListView() {
+  const navigate = useNavigate();
   const transactions = useQuery({
     queryKey: ["transactions_teacher"],
     queryFn: TransactionsByTeacherAPI,
@@ -54,7 +56,15 @@ export default function TeacherTransactionListView() {
               )
               .map((transaction) => (
                 <React.Fragment key={transaction.id}>
-                  <TransactionEntry transaction={transaction} />
+                  <TransactionEntry
+                    onClick={() =>
+                      navigate(`/view/transaction/${transaction.id}`, {
+                        replace: true,
+                        state: { id: transaction.id },
+                      })
+                    }
+                    transaction={transaction}
+                  />
                 </React.Fragment>
               ))
           ) : (
diff --git a/src/Components/TransactionEntry/TransactionEntry.tsx b/src/Components/TransactionEntry/TransactionEntry.tsx
index c7191cf..455f4bd 100644
--- a/src/Components/TransactionEntry/TransactionEntry.tsx
+++ b/src/Components/TransactionEntry/TransactionEntry.tsx
@@ -1,14 +1,13 @@
 import styles from "../../styles";
 import { colors } from "../../styles";
 import { TransactionType } from "../Types/Types";
-import { useNavigate } from "react-router-dom";
 import StatusTextColor from "../StatusTextColor/StatusTextColor";
 export interface props {
   transaction: TransactionType;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
 
 export default function TransactionEntry(props: props) {
-  const navigate = useNavigate();
   return (
     <div
       style={{
@@ -20,12 +19,7 @@ export default function TransactionEntry(props: props) {
         margin: "8px",
         padding: "8px",
       }}
-      onClick={() =>
-        navigate(`/view/transaction/${props.transaction.id}`, {
-          replace: true,
-          state: { id: props.transaction.id },
-        })
-      }
+      onClick={() => props.onClick}
     >
       <div style={styles.flex_row}>
         <p