diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 123d146..0cf0c86 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -21,7 +21,8 @@ import BoothMainPage from "./routes/booth_main_view";
 import BoothConfirmPaymentPage from "./routes/booth_confirm_payment_view";
 import AdminPage from "./routes/admin_view";
 import UserProvider from "./UserProvider";
-import StudentTransactionPage from "./routes/student_transactions_view";
+import StudentTransactionHistoryPage from "./routes/student_transactions_view";
+import StudentTopupHistoryPage from "./routes/student_topups_view";
 
 const router = createBrowserRouter([
   {
@@ -51,11 +52,11 @@ const router = createBrowserRouter([
       },
       {
         path: "/student/transactions",
-        element: <StudentTransactionPage />,
+        element: <StudentTransactionHistoryPage />,
       },
       {
         path: "/student/topups",
-        element: <StudentTopupPage />,
+        element: <StudentTopupHistoryPage />,
       },
       {
         path: "/booth",
diff --git a/frontend/src/routes/student_topups_view.tsx b/frontend/src/routes/student_topups_view.tsx
index d80ecdd..2ce3482 100644
--- a/frontend/src/routes/student_topups_view.tsx
+++ b/frontend/src/routes/student_topups_view.tsx
@@ -8,7 +8,7 @@ import { UserContext } from "../UserProvider";
 import { getTopupHistory } from "../api";
 import { TopupHistoryDetails } from "../types/topup";
 
-export default function StudentTopupPage() {
+export default function StudentTopupHistoryPage() {
   const navigate = useNavigate();
   const { user } = useContext(UserContext);
   const [topupDetails, setTopupDetails] = useState<
diff --git a/frontend/src/routes/student_transactions_view.tsx b/frontend/src/routes/student_transactions_view.tsx
index f782221..b760a5b 100644
--- a/frontend/src/routes/student_transactions_view.tsx
+++ b/frontend/src/routes/student_transactions_view.tsx
@@ -8,7 +8,7 @@ import { UserContext } from "../UserProvider";
 import { TransactionHistoryDetails } from "../types/transaction";
 import { getTransactionHistory } from "../api";
 
-export default function StudentTransactionPage() {
+export default function StudentTransactionHistoryPage() {
   const navigate = useNavigate();
   const { user } = useContext(UserContext);
   const [transactionDetails, setTransactionDetails] = useState<