diff --git a/src/pages/transaction/transaction.tsx b/src/pages/transaction/transaction.tsx
new file mode 100644
index 0000000..7466c60
--- /dev/null
+++ b/src/pages/transaction/transaction.tsx
@@ -0,0 +1,31 @@
+import { Container, DataGridInner } from '@/components';
+import { TransactionProvider } from './hooks/TransactionContext';
+import { Breadcrumbs, Link } from '@mui/material';
+
+const Transaction = () => {
+    return (
+        <TransactionProvider>
+            <Container className="mb-7">
+                <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">TRANSACTION</h1>
+                <Breadcrumbs sx={{ mb: 2 }}>
+                    <Link underline="none" color="inherit" href="/">
+                        <span className="text-sm hover:underline">Dashboard</span>
+                    </Link>
+
+                    <Link underline="none" color="inherit">
+                        <span className="text-sm">Master Data</span>
+                    </Link>
+
+                    <Link underline="none" color="inherit">
+                        <span className="text-sm">Transaction</span>
+                    </Link>
+                </Breadcrumbs>
+                <div className="grid gap-5 lg:gap-7.5">
+                    <DataGridInner />
+                </div>
+            </Container>
+        </TransactionProvider>
+    );
+};
+
+export default Transaction;