diff --git a/src/pages/wallet/wallet-history/WalletHistory.tsx b/src/pages/wallet/wallet-history/WalletHistory.tsx
new file mode 100644
index 0000000..d146a2d
--- /dev/null
+++ b/src/pages/wallet/wallet-history/WalletHistory.tsx
@@ -0,0 +1,32 @@
+import { Container, DataGridInner } from '@/components';
+import { ManageWalletContextProvider } from './hooks/ManageWalletHistoryContext';
+import { Breadcrumbs, Link } from '@mui/material';
+
+const WalletHistory = () => {
+  return (
+    <ManageWalletContextProvider>
+      <Container>
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Wallet History</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">Wallet</span>
+          </Link>
+
+          <Link underline="none" color="inherit">
+            <span className="text-sm">Wallet History</span>
+          </Link>
+        </Breadcrumbs>
+
+        <div className="grid gap-5 lg:gap-7.5">
+          <DataGridInner />
+        </div>
+      </Container>
+    </ManageWalletContextProvider>
+  );
+};
+
+export default WalletHistory;
diff --git a/src/pages/wallet/wallet-history/blocks/ListToolbar.tsx b/src/pages/wallet/wallet-history/blocks/ListToolbar.tsx
new file mode 100644
index 0000000..cc4aee9
--- /dev/null
+++ b/src/pages/wallet/wallet-history/blocks/ListToolbar.tsx
@@ -0,0 +1,55 @@
+import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
+import { useManageWalletContext } from '../hooks/useManageWalletHistoryContext';
+import { Button } from '@/components/ui/button';
+
+const ListToolbar = () => {
+  const { table, reload } = useDataGrid();
+  const { handleAddDialog } = useManageWalletContext();
+
+  return (
+    <div className="card-header flex-wrap gap-2 border-b-0 px-5">
+      <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
+        <div className="flex justify-between w-full items-center">
+          <div className="flex w-[50%] gap-3 items-center">
+            <label className="input input-sm w-1/3">
+              <KeenIcon icon="magnifier" />
+              <input
+                type="text"
+                placeholder="Search Wallet"
+                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
+                onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
+              />
+            </label>
+            {/* <DefaultTooltip title={'Filter'} placement={'top'}>
+              <Button
+                variant="outline"
+                className="h-7.5 disabled:bg-gray-400"
+                // disabled={isLoading}
+                // onClick={handleFilterData}
+              >
+                {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />}
+                <KeenIcon icon="filter" />
+              </Button>
+            </DefaultTooltip> */}
+          </div>
+          <div className="flex gap-3 items-center">
+            <Button
+              variant="outline"
+              className="h-7.5 text-[0.8rem]"
+              onClick={() => handleAddDialog(true)}
+            >
+              Add Data
+            </Button>
+            <DefaultTooltip title={'Refresh'} placement={'top'}>
+              <Button variant="outline" className="h-7.5" onClick={() => reload()}>
+                <KeenIcon icon="arrows-circle" />
+              </Button>
+            </DefaultTooltip>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ListToolbar;