diff --git a/src/Components/DashboardPage/Student/StudentTransactionListView.tsx b/src/Components/DashboardPage/Student/StudentTransactionListView.tsx
index f41bf1f..07c1fd7 100644
--- a/src/Components/DashboardPage/Student/StudentTransactionListView.tsx
+++ b/src/Components/DashboardPage/Student/StudentTransactionListView.tsx
@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { TransactionsByStudentAPI } from "../../API/API";
-import styles from "../../../styles";
+import styles, { colors } from "../../../styles";
 import CircularProgress from "@mui/material/CircularProgress/CircularProgress";
 import React, { useState } from "react";
 import TransactionEntry from "../../TransactionEntry/TransactionEntry";
@@ -70,12 +70,43 @@ export default function StudentTransactionListView() {
                     }}
                     transaction={transaction}
                   />
+                  <button
+                    style={{
+                      borderTop: "2px solid rgba(160, 160, 160, 0.20)",
+                      padding: "7px",
+                      margin: "0px",
+                      backgroundColor: colors.header_color,
+                      width: 550,
+                      alignSelf: "center",
+                      borderRadius: "0px 0px 7px 7px",
+                      
+                    }}
+                    onClick={() => {
+                      navigate(`/view/transaction/${transaction.id}`, {
+                        replace: true,
+                        state: { id: transaction.id },
+                      });
+                    }}
+                  >
+                    <p
+                      style={{
+                        ...styles.text_gray,
+                        ...styles.text_S,
+                        padding: "0px",
+                        margin: "0px",
+                      }}
+                    >
+                      TAP TO VIEW
+                    </p>
+                  </button>
                 </React.Fragment>
               ))
           ) : (
             <></>
           )}
         </div>
+        
+        
       </div>
     </div>
   );
diff --git a/src/Components/DashboardPage/Teacher/TeacherTransactionListView.tsx b/src/Components/DashboardPage/Teacher/TeacherTransactionListView.tsx
index 592df68..b7f5b08 100644
--- a/src/Components/DashboardPage/Teacher/TeacherTransactionListView.tsx
+++ b/src/Components/DashboardPage/Teacher/TeacherTransactionListView.tsx
@@ -1,14 +1,16 @@
 import { useQuery } from "@tanstack/react-query";
 import { TransactionsByTeacherAPI } from "../../API/API";
-import styles from "../../../styles";
+import styles, { colors } from "../../../styles";
 import CircularProgress from "@mui/material/CircularProgress/CircularProgress";
 import React, { useState } from "react";
 import TransactionEntry from "../../TransactionEntry/TransactionEntry";
 import TransactionFilterMenu from "../../TransactionFilterMenu/TransactionFilterMenu";
 import Popup from "reactjs-popup";
 import EditTransactionModal from "../../EditTransactionModal/EditTransactionModal";
+import { useNavigate } from "react-router-dom";
 
 export default function TeacherTransactionListView() {
+  const navigate = useNavigate();
   const [EditTransactionOpen, SetEditTransactionOpen] = useState(false);
   const [SelectedTransaction, SetSelectedTransaction] = useState(0);
   const transactions = useQuery({
@@ -48,7 +50,7 @@ export default function TeacherTransactionListView() {
         <div
           style={{
             ...styles.flex_column,
-            ...{ height: "50vh", overflowY: "scroll", width: "100%", },
+            ...{ height: "50vh", overflowY: "scroll", width: "100%", gap: "-15px", },
           }}
         >
           {transactions.data ? (
@@ -69,6 +71,35 @@ export default function TeacherTransactionListView() {
                     }}
                     transaction={transaction}
                   />
+                  <button
+                    style={{
+                      borderTop: "2px solid rgba(160, 160, 160, 0.20)",
+                      padding: "7px",
+                      margin: "0px",
+                      backgroundColor: colors.header_color,
+                      width: 550,
+                      alignSelf: "center",
+                      borderRadius: "0px 0px 7px 7px",
+                      
+                    }}
+                    onClick={() => {
+                      navigate(`/view/transaction/${transaction.id}`, {
+                        replace: true,
+                        state: { id: transaction.id },
+                      });
+                    }}
+                  >
+                    <p
+                      style={{
+                        ...styles.text_gray,
+                        ...styles.text_S,
+                        padding: "0px",
+                        margin: "0px",
+                      }}
+                    >
+                      TAP TO VIEW
+                    </p>
+                  </button>
                 </React.Fragment>
               ))
           ) : (
@@ -76,6 +107,7 @@ export default function TeacherTransactionListView() {
           )}
         </div>
       </div>
+
       <Popup
         open={EditTransactionOpen}
         onClose={() => SetEditTransactionOpen(false)}
diff --git a/src/Components/StatusTextColor/StatusTextColor.tsx b/src/Components/StatusTextColor/StatusTextColor.tsx
index 4354cff..6541377 100644
--- a/src/Components/StatusTextColor/StatusTextColor.tsx
+++ b/src/Components/StatusTextColor/StatusTextColor.tsx
@@ -1,6 +1,6 @@
 import { colors } from "../../styles";
 
-export default function StatusTextColor(status: string) {
+export function StatusTextColor(status: string) {
   if (
     status === "Pending Approval" ||
     status === "Returned: Pending Checking"
@@ -11,8 +11,25 @@ export default function StatusTextColor(status: string) {
     status === "Finalized" ||
     status === "Borrowed"
   ) {
-    return colors.dark_green;
+    return colors.darkgreen;
   } else {
     return colors.red;
   }
 }
+
+export function StatusBGColor(status: string) {
+  if (
+    status === "Pending Approval" ||
+    status === "Returned: Pending Checking"
+  ) {
+    return colors.lightorange;
+  } else if (
+    status === "Approved" ||
+    status === "Finalized" ||
+    status === "Borrowed"
+  ) {
+    return colors.lightgreen;
+  } else {
+    return colors.lightred;
+  }
+}
diff --git a/src/Components/TransactionEntry/TransactionEntry.tsx b/src/Components/TransactionEntry/TransactionEntry.tsx
index 8f0ed31..8458658 100644
--- a/src/Components/TransactionEntry/TransactionEntry.tsx
+++ b/src/Components/TransactionEntry/TransactionEntry.tsx
@@ -1,13 +1,13 @@
 import styles from "../../styles";
 import { colors } from "../../styles";
 import { TransactionType } from "../Types/Types";
-import StatusTextColor from "../StatusTextColor/StatusTextColor";
+import { StatusTextColor } from "../StatusTextColor/StatusTextColor";
 import CircleSharpIcon from '@mui/icons-material/CircleSharp';
 export interface props {
   transaction: TransactionType;
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
 
-
+  
 } 
 
 export default function TransactionEntry(props: props) {
@@ -19,7 +19,7 @@ export default function TransactionEntry(props: props) {
         alignSelf: "center",
         justifySelf: "center",
         backgroundColor: colors.header_color,
-        borderRadius: 16,
+        borderRadius: "7px 7px 0px 0px",
         marginTop: "10px",
         paddingTop: "15px",
         width: "100%",
@@ -106,28 +106,7 @@ export default function TransactionEntry(props: props) {
         
 
         {/* //GIWALA */}
-     
-      <div 
-        style={{
-          borderTop: "2px solid rgba(160, 160, 160, 0.20)",
-          padding: "7px",
-          margin: "0px",
-       
 
-        }}>
-        <p
-          style={{
-            ...styles.text_gray,
-            ...styles.text_S,
-            padding: "0px",
-            margin: "0px"
-           
-
-          }}
-        >
-            TAP TO VIEW
-        </p>
-      </div>
       
     
       
diff --git a/src/Components/TransactionPDF/TransactionPDF.tsx b/src/Components/TransactionPDF/TransactionPDF.tsx
index 80c3e40..767b66a 100644
--- a/src/Components/TransactionPDF/TransactionPDF.tsx
+++ b/src/Components/TransactionPDF/TransactionPDF.tsx
@@ -1,161 +1,355 @@
-import { Document, Page, Text, View } from "@react-pdf/renderer";
+import { Document, Page, Text, View, Image } from "@react-pdf/renderer";
 import { TransactionType } from "../Types/Types";
 import { colors } from "../../styles";
-import StatusTextColor from "../StatusTextColor/StatusTextColor";
+import {
+  StatusTextColor,
+  StatusBGColor,
+} from "../StatusTextColor/StatusTextColor";
+import ustplogo from "../../assets/ustp-logo.png";
 
 type props = {
-  transaction: TransactionType | null;
+  transaction: TransactionType;
 };
+
 export default function TransactionPDF(props: props) {
   return (
     <Document>
-      <Page size={"A4"}>
+      <Page size={{ width: 8.5 * 72, height: 10 * 90 }}>
+        {/* Whole Page */}
         <View
           style={{
-            alignSelf: "center",
-            justifyContent: "center",
-            width: "512px",
-            backgroundColor: colors.header_color,
-            borderRadius: 16,
-            margin: "8px",
-            padding: "8px",
+            display: "flex",
+            flexDirection: "column",
+            width: "90%",
+            height: "100%",
+            alignItems: "flex-end",
+            marginLeft: "auto", // Align to the right edge
+            marginRight: "auto",
+            padding: "20 0",
+
+            gap: 10,
           }}
         >
-          <View style={{ display: "flex", flexDirection: "row" }}>
-            <Text
+          {/* Header */}
+          <View
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "center",
+              alignSelf: "stretch",
+            }}
+          >
+            <Image
+              src={ustplogo}
               style={{
-                color: colors.font_dark,
-                fontSize: 16,
-                textAlign: "left",
-                flex: 1,
+                width: 60,
+                height: 60,
+                position: "absolute",
+                left: 10,
+                top: 0,
               }}
-            >
-              Transaction ID: {props.transaction?.id}
-            </Text>
-            <Text
-              style={{
-                color: colors.font_dark,
-                fontSize: 16,
-                textAlign: "right",
-                flex: 1,
-              }}
-            >
-              {props.transaction?.timestamp}
-            </Text>
-          </View>
-          <View style={{ paddingVertical: 8 }}></View>
-          <View style={{ display: "flex", flexDirection: "row" }}>
-            <View style={{ flex: 1 }}>
+            />
+
+            <View style={{ alignItems: "center" }}>
               <Text
                 style={{
-                  color: colors.font_dark,
-                  fontSize: 16,
-                  textAlign: "left",
-                  margin: 0,
+                  color: colors.form_dark,
+                  fontSize: 11,
+                  textAlign: "center",
+                  margin: "2 5 2 5",
                 }}
               >
-                Borrower: {props.transaction?.borrower.name}{" "}
-                {`(ID:${props.transaction?.borrower.id})`}
+                Department of Chemistry (Laboratory)
               </Text>
               <Text
                 style={{
-                  color: colors.font_dark,
-                  fontSize: 16,
-                  textAlign: "left",
-                  margin: 0,
+                  color: colors.form_dark,
+                  fontSize: 10,
+                  textAlign: "center",
+                  padding: "5 0 5 0",
                 }}
               >
-                {`(${props.transaction?.borrower.course})`}
+                University of Science and Technology of Southern Philippines{" "}
+                {"\n"}
+                Lapasan Cagayan de Oro City {"\n"}
               </Text>
               <Text
                 style={{
-                  color: colors.font_dark,
-                  fontSize: 16,
-                  textAlign: "left",
-                  margin: 0,
+                  color: colors.form_dark,
+                  fontSize: 11,
+                  padding: "5 0 5 0",
                 }}
               >
-                Teacher: {props.transaction?.teacher.name}{" "}
-                {`(ID:${props.transaction?.teacher.id})`}
-              </Text>
-              <Text
-                style={{
-                  color: colors.font_dark,
-                  fontSize: 16,
-                  textAlign: "left",
-                  margin: 0,
-                }}
-              >
-                Subject: {props.transaction?.subject}
-              </Text>
-              <Text
-                style={{
-                  color: colors.font_dark,
-                  fontSize: 16,
-                  textAlign: "left",
-                  margin: 0,
-                  marginTop: 8,
-                  flexWrap: "wrap",
-                }}
-              >
-                Remarks: {props.transaction?.remarks}
-              </Text>
-              <Text
-                style={{
-                  color: colors.font_dark,
-                  fontSize: 16,
-                  textAlign: "left",
-                  margin: 0,
-                  marginTop: 8,
-                  flexWrap: "wrap",
-                }}
-              >
-                Consumables: {props.transaction?.consumables}
+                BORROWER'S SLIP
               </Text>
             </View>
-            <View style={{ flex: 1 }}>
-              <Text
-                style={{
-                  color: colors.font_dark,
-                  textAlign: "right",
-                  fontSize: 16,
-                  margin: 0,
-                  flexWrap: "wrap",
-                }}
-              >
-                Equipments:
-              </Text>
+          </View>
+
+          {/* Status */}
+          <View
+            style={{
+              alignSelf: "stretch",
+              alignContent: "center",
+              justifyContent: "center",
+              backgroundColor: StatusBGColor(
+                props.transaction.transaction_status
+              ),
+              borderRadius: 16,
+              padding: "8px",
+            }}
+          >
+            <Text
+              style={{
+                color: StatusTextColor(props.transaction.transaction_status),
+                textAlign: "right",
+                fontSize: 16,
+              }}
+            >
+              Status: {`${props.transaction.transaction_status}`}
+            </Text>
+          </View>
+
+          {/* Transaction ID */}
+          <View
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "center",
+              alignSelf: "stretch",
+            }}
+          >
+            <Text
+              style={{
+                color: colors.form_dark,
+                fontSize: 20,
+                textAlign: "right",
+              }}
+            >
+              Transaction ID: #{props.transaction.id}
+            </Text>
+          </View>
+
+          <View
+            style={{
+              display: "flex",
+              alignSelf: "stretch",
+            }}
+          >
+            <Text
+              style={{
+                color: colors.form_title,
+                borderBottom: "1px solid #A2A2A2",
+              }}
+            >
+              Borrower Details
+            </Text>
+          </View>
+          {/* Top Details */}
+          <View
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              gap: 5,
+              alignSelf: "stretch",
+              justifyContent: "space-between",
+            }}
+          >
+            {/* Borrower Details */}
+            <View
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                gap: 5,
+                alignSelf: "stretch",
+                padding: "0px 5px",
+              }}
+            >
               <View style={{ display: "flex", flexDirection: "column" }}>
-                {props.transaction?.equipments.map((equipment) => (
+                <Text
+                  style={{
+                    color: colors.form_dark,
+                    fontSize: 16,
+                    textAlign: "left",
+                    margin: 0,
+                  }}
+                >
+                  Name:{" "}
+                  <Text style={{ textDecoration: "underline" }}>
+                    {props.transaction.borrower.name}
+                  </Text>{" "}
+                </Text>
+                <Text
+                  style={{
+                    color: colors.form_dark,
+                    fontSize: 14,
+                    textAlign: "left",
+                    margin: 0,
+                  }}
+                >
+                  Course:{" "}
                   <Text
-                    style={{
-                      color: colors.font_dark,
-                      textAlign: "right",
-                      fontSize: 12,
-                      margin: 0,
-                      marginTop: 2,
-                      flexWrap: "wrap",
-                    }}
-                  >
-                    {` - ${equipment.name} (ID:${equipment.id})`}
-                  </Text>
-                ))}
+                    style={{ textDecoration: "underline" }}
+                  >{`${props.transaction.borrower.course}`}</Text>{" "}
+                  {"\n"}
+                  {/* Section: <Text style={{ textDecoration: "underline" }}>{props.transaction.section}</Text> */}
+                </Text>
               </View>
             </View>
+
+            <View style={{ display: "flex", flexDirection: "column" }}>
+              <Text
+                style={{
+                  color: colors.form_dark,
+                  fontSize: 14,
+                  textAlign: "left",
+                }}
+              >
+                Timestamp:{" "}
+                <Text style={{ textDecoration: "underline" }}>
+                  {props.transaction.timestamp}
+                </Text>
+                {"\n"}
+                Lab instructor:{" "}
+                <Text style={{ textDecoration: "underline" }}>
+                  {props.transaction.teacher.name}
+                </Text>{" "}
+              </Text>
+              <Text
+                style={{
+                  color: colors.form_dark,
+                  fontSize: 14,
+                  textAlign: "left",
+                }}
+              >
+                Subject:{" "}
+                <Text style={{ textDecoration: "underline" }}>
+                  {props.transaction.subject}
+                </Text>
+              </Text>
+            </View>
           </View>
-          <View style={{ alignContent: "center", justifyContent: "center" }}>
+
+          {/* Equipment Section */}
+          <View
+            style={{
+              display: "flex",
+              gap: 5,
+              alignSelf: "stretch",
+              marginTop: "10"
+            }}
+          >
             <Text
               style={{
-                color: StatusTextColor(
-                  props.transaction?.transaction_status || "Pending"
-                ),
-                textAlign: "center",
-                fontSize: 16,
+                color: colors.form_title,
+                borderBottom: "1px solid #A2A2A2",
               }}
             >
-              {`${props.transaction?.transaction_status}`}
+              Selected Equipment
             </Text>
+            {props.transaction.equipments.map((equipment) => (
+              <Text
+                style={{
+                  color: colors.form_dark,
+                  textAlign: "left",
+                  fontSize: 14,
+                  margin: 0,
+                  marginTop: 2,
+                  flexWrap: "wrap",
+                  padding: 3,
+                }}
+              >
+                {` - ${equipment.name} (ID:${equipment.id})`}
+              </Text>
+            ))}
+            {/* total Equipment */}
+            <View style={{ borderTop: "1px", marginTop: 5, width: "150px" }}>
+              <Text
+                style={{
+                  color: colors.form_dark,
+                  textAlign: "left",
+                  fontSize: 14,
+                  margin: 0,
+                  flexWrap: "wrap",
+                }}
+              >
+                Total Equipment: {props.transaction.equipments.length}
+              </Text>
+            </View>
+            {/* Consumables Area */}
+            <View style={{ marginTop: "5" , marginBottom: 10}}>
+              <Text
+                style={{
+                  color: colors.form_title,
+                  borderBottom: "1px solid #A2A2A2",
+                }}
+              >
+                Consumables
+              </Text>
+              <Text
+                style={{
+                  color: colors.form_dark,
+                  textAlign: "left",
+                  fontSize: 14,
+                  flexWrap: "wrap",
+                  padding: 3,
+                }}
+              >
+                {props.transaction?.consumables}
+              </Text>
+            </View>
           </View>
+
+          {/* Members here */}
+          <View style={{
+                display: "flex",
+                gap: 5,
+                alignSelf: "stretch",}}>
+            <Text
+              style={{
+                color: colors.form_title,
+                borderBottom: "1px solid #A2A2A2",
+              }}
+            >
+              Members
+            </Text>
+            <Text
+              style={{
+                fontSize: 16,
+                margin: 0,
+                marginTop: 8,
+              }}
+            >
+              {props.transaction?.additional_members}
+            </Text>
+            {/* Remarks */}
+          </View>
+          <View style={{ display: "flex", flexDirection: "column", alignSelf: "stretch" }}>
+              <View style={{ padding: "10 0" }}>
+                <Text
+                  style={{
+                    color: colors.form_title,
+                    marginTop: 10,
+                    borderBottom: "1px solid #A2A2A2",
+                    padding: "5 0",
+                  }}
+                >
+                  Remarks
+                </Text>
+              </View>
+
+              <Text
+                style={{
+                  color: colors.form_dark,
+                  fontSize: 14,
+                  margin: 0,
+                  marginTop: 8,
+                }}
+              >
+                {props.transaction.remarks}
+              </Text>
+            </View>
         </View>
       </Page>
     </Document>
diff --git a/src/Components/Types/Types.tsx b/src/Components/Types/Types.tsx
index 7e362b5..ec01f8b 100644
--- a/src/Components/Types/Types.tsx
+++ b/src/Components/Types/Types.tsx
@@ -110,6 +110,7 @@ export type UserType = {
 };
 
 export type TransactionType = {
+  additional_members: string;
   id: number;
   borrower: {
     id: number;
diff --git a/src/Pages/AddTransactionPage/AddTransactionPage.tsx b/src/Pages/AddTransactionPage/AddTransactionPage.tsx
index 13ea135..cea0fe1 100644
--- a/src/Pages/AddTransactionPage/AddTransactionPage.tsx
+++ b/src/Pages/AddTransactionPage/AddTransactionPage.tsx
@@ -112,6 +112,7 @@ export default function AddTransactionPage() {
             alignItems: "center",
             justifyContent: "center",
             overflowY: "scroll",
+            marginTop: 64
           },
         }}
       >
diff --git a/src/Pages/TransactionsListPage/TransactionsListPage.tsx b/src/Pages/TransactionsListPage/TransactionsListPage.tsx
index 82fb7cc..db5da6e 100644
--- a/src/Pages/TransactionsListPage/TransactionsListPage.tsx
+++ b/src/Pages/TransactionsListPage/TransactionsListPage.tsx
@@ -16,8 +16,10 @@ import { useState } from "react";
 import EditTransactionModal from "../../Components/EditTransactionModal/EditTransactionModal";
 import EditItemInstanceModal from "../../Components/EditItemInstanceModal/EditItemInstanceModal";
 import SearchIcon from "@mui/icons-material/Search";
+import { useNavigate } from "react-router-dom";
 
 export default function TransactionsListPage() {
+  const navigate = useNavigate();
   const [EditTransactionOpen, SetEditTransactionOpen] = useState(false);
   const [SelectedTransaction, SetSelectedTransaction] = useState(0);
   const [EditEquipmentsOpen, SetEditEquipmentsOpen] = useState(false);
@@ -145,6 +147,9 @@ export default function TransactionsListPage() {
                       transaction.teacher.name
                         .toLowerCase()
                         .includes(filter.toLowerCase()) ||
+                      transaction.additional_members
+                        .toLowerCase()
+                        .includes(filter.toLowerCase()) ||
                       transaction.remarks
                         .toLowerCase()
                         .includes(filter?.toLowerCase()) ||
@@ -178,7 +183,13 @@ export default function TransactionsListPage() {
                   Consumables
                 </TableCell>
                 <TableCell align="center" style={styles.text_light}>
-                  Equipments
+                  Additional Members
+                </TableCell>
+                <TableCell align="center" style={styles.text_light}>
+                  Additional Members
+                </TableCell>
+                <TableCell align="center" style={styles.text_light}>
+                  Actions
                 </TableCell>
               </TableRow>
             </TableHead>
@@ -191,6 +202,9 @@ export default function TransactionsListPage() {
                         transaction.borrower.name
                           .toLowerCase()
                           .includes(filter.toLowerCase()) ||
+                        transaction.additional_members
+                          .toLowerCase()
+                          .includes(filter.toLowerCase()) ||
                         transaction.teacher.name
                           .toLowerCase()
                           .includes(filter.toLowerCase()) ||
@@ -315,6 +329,28 @@ export default function TransactionsListPage() {
                       >
                         {transaction.consumables}
                       </TableCell>
+                      <TableCell
+                        align="center"
+                        component="th"
+                        scope="row"
+                        style={{ ...styles.text_S }}
+                        sx={{
+                          maxWidth: "64px",
+                          flexWrap: "wrap",
+                          wordWrap: "break-word",
+                        }}
+                        onClick={() => {
+                          if (
+                            transaction.transaction_status != "Finalized" &&
+                            transaction.transaction_status != "Rejected"
+                          ) {
+                            SetSelectedTransaction(transaction.id);
+                            SetEditTransactionOpen(true);
+                          }
+                        }}
+                      >
+                        {transaction.additional_members}
+                      </TableCell>
                       <TableCell align="center">
                         <p style={{ ...styles.text_M, ...styles.text_dark }}>
                           Involved Items: {transaction.equipments.length}
@@ -405,6 +441,46 @@ export default function TransactionsListPage() {
                           </Table>
                         </TableContainer>
                       </TableCell>
+                      <TableCell
+                        align="center"
+                        component="th"
+                        scope="row"
+                        style={{ ...styles.text_S }}
+                        sx={{
+                          maxWidth: "64px",
+                          flexWrap: "wrap",
+                          wordWrap: "break-word",
+                        }}
+                      >
+                        <button
+                          style={{
+                            borderTop: "2px solid rgba(160, 160, 160, 0.20)",
+                            padding: "7px",
+                            margin: "0px",
+                            backgroundColor: colors.dandelion,
+                            width: "auto",
+                            alignSelf: "center",
+                            borderRadius: "7px",
+                          }}
+                          onClick={() => {
+                            navigate(`/view/transaction/${transaction.id}`, {
+                              replace: true,
+                              state: { id: transaction.id },
+                            });
+                          }}
+                        >
+                          <p
+                            style={{
+                              ...styles.text_S,
+                              padding: "0px",
+                              margin: "0px",
+                              
+                            }}
+                          >
+                            Tap To View {"\n"} or Print
+                          </p>
+                        </button>
+                      </TableCell>
                     </TableRow>
                   ))
               ) : (