diff --git a/web/sdk/react/views/tokens/transactions/columns.tsx b/web/sdk/react/views/tokens/transactions/columns.tsx
index 59eea66bf..7be162c26 100644
--- a/web/sdk/react/views/tokens/transactions/columns.tsx
+++ b/web/sdk/react/views/tokens/transactions/columns.tsx
@@ -19,19 +19,26 @@ import dayjs from 'dayjs';
 interface getColumnsOptions {
   dateFormat: string;
 }
-const TxnEventSourceMap = {
+const TxnEventSourceMap: Record<string, string> = {
   'system.starter': 'Starter tokens',
   'system.buy': 'Recharge',
   'system.awarded': 'Complimentary tokens',
-  'system.revert': 'Refund'
+  'system.revert': 'Refund',
+  'system.overdraft': 'Overdraft'
 };
 
+const eventFilterOptions = Object.entries(TxnEventSourceMap).map(
+  ([value, label]) => ({ value, label })
+);
+
 export const getColumns = ({
   dateFormat
 }: getColumnsOptions): DataTableColumnDef<BillingTransaction, unknown>[] => [
   {
     header: 'Date',
     accessorKey: 'createdAt',
+    enableColumnFilter: true,
+    filterType: 'date',
     cell: ({ getValue }) => {
       const value = getValue() as TimeStamp;
       const date = isNullTimestamp(value)
@@ -59,6 +66,9 @@ export const getColumns = ({
   {
     header: 'Event',
     accessorKey: 'source',
+    enableColumnFilter: true,
+    filterType: 'multiselect',
+    filterOptions: eventFilterOptions,
     classNames: {
       cell: tokenStyles.txnTableEventColumn
     },
diff --git a/web/sdk/react/views/tokens/transactions/index.tsx b/web/sdk/react/views/tokens/transactions/index.tsx
index 4a211b503..82df883b5 100644
--- a/web/sdk/react/views/tokens/transactions/index.tsx
+++ b/web/sdk/react/views/tokens/transactions/index.tsx
@@ -1,4 +1,5 @@
 import {
+  Button,
   EmptyState,
   Text,
   Flex,
@@ -6,6 +7,7 @@ import {
   DataTableSort
 } from '@raystack/apsara';
 import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
+import { FilterIcon } from '@raystack/apsara/icons';
 import type { BillingTransaction } from '~/src';
 import { getColumns } from './columns';
 import { useFrontier } from '~/react/contexts/FrontierContext';
@@ -40,6 +42,18 @@ export function TransactionsTable({
         <Text size="small" weight="medium">
           Token transactions
         </Text>
+        <DataTable.Filters
+          trigger={
+            <Button
+              variant="outline"
+              color="neutral"
+              size="small"
+              leadingIcon={<FilterIcon />}
+            >
+              Filter
+            </Button>
+          }
+        />
         <DataTable.Content
           emptyState={noDataChildren}
           classNames={{ header: tokenStyles.txnTableHeader }}