diff --git a/assets/settings-slider-icon.png b/assets/settings-slider-icon.png
new file mode 100644
index 000000000..4a5eff295
Binary files /dev/null and b/assets/settings-slider-icon.png differ
diff --git a/components/TableContainer/TableContainerGetter.tsx b/components/TableContainer/TableContainerGetter.tsx
index 5eb2bd0b7..978c73a66 100644
--- a/components/TableContainer/TableContainerGetter.tsx
+++ b/components/TableContainer/TableContainerGetter.tsx
@@ -74,6 +74,10 @@ const TableContainer = ({ columns, dataGetter, opts, ssr, tableRefreshCount, emp
     usePagination
   )
 
+  useEffect(() => {
+    gotoPage(0)
+  }, [tableRefreshCount])
+
   useEffect(() => {
     void (async () => {
       setLoading(true)
diff --git a/pages/api/payments/count/index.ts b/pages/api/payments/count/index.ts
index 96c3eb1be..eb158d821 100644
--- a/pages/api/payments/count/index.ts
+++ b/pages/api/payments/count/index.ts
@@ -1,6 +1,7 @@
 import { CacheGet } from 'redis/index'
 import { fetchUserProfileFromId } from 'services/userService'
 import { setSession } from 'utils/setSession'
+import { getFilteredTransactionCount } from 'services/transactionService'
 
 export default async (req: any, res: any): Promise<void> => {
   if (req.method === 'GET') {
@@ -10,7 +11,20 @@ export default async (req: any, res: any): Promise<void> => {
     const userProfile = await fetchUserProfileFromId(userId)
     const userPreferredTimezone = userProfile?.preferredTimezone
     const timezone = userPreferredTimezone !== '' ? userPreferredTimezone : userReqTimezone
-    const resJSON = await CacheGet.paymentsCount(userId, timezone)
-    res.status(200).json(resJSON)
+
+    let buttonIds: string[] | undefined
+    if (typeof req.query.buttonIds === 'string' && req.query.buttonIds !== '') {
+      buttonIds = (req.query.buttonIds as string).split(',')
+    }
+
+    if ((buttonIds !== undefined) && buttonIds.length > 0) {
+      const totalCount = await getFilteredTransactionCount(userId, buttonIds)
+      res.status(200).json(totalCount)
+    } else {
+      const resJSON = await CacheGet.paymentsCount(userId, timezone)
+      res.status(200).json(resJSON)
+    }
+  } else {
+    res.status(405).json({ error: 'Method not allowed' })
   }
 }
diff --git a/pages/api/payments/download/index.ts b/pages/api/payments/download/index.ts
index b1707d5f0..4bab708b6 100644
--- a/pages/api/payments/download/index.ts
+++ b/pages/api/payments/download/index.ts
@@ -43,7 +43,12 @@ export default async (req: any, res: any): Promise<void> => {
       const networkId = NETWORK_IDS[networkTicker]
       networkIdArray = [networkId]
     };
-    const transactions = await fetchAllPaymentsByUserId(userId, networkIdArray)
+    let buttonIds: string[] | undefined
+    if (typeof req.query.buttonIds === 'string' && req.query.buttonIds !== '') {
+      buttonIds = req.query.buttonIds.split(',')
+    }
+    const transactions = await fetchAllPaymentsByUserId(userId, networkIdArray, buttonIds)
+
     await downloadTxsFile(res, quoteSlug, timezone, transactions, userId)
   } catch (error: any) {
     switch (error.message) {
diff --git a/pages/api/payments/index.ts b/pages/api/payments/index.ts
index 84215e557..d626f9732 100644
--- a/pages/api/payments/index.ts
+++ b/pages/api/payments/index.ts
@@ -10,7 +10,19 @@ export default async (req: any, res: any): Promise<void> => {
     const orderDesc: boolean = !!(req.query.orderDesc === '' || req.query.orderDesc === undefined || req.query.orderDesc === 'true')
     const orderBy = (req.query.orderBy === '' || req.query.orderBy === undefined) ? undefined : req.query.orderBy as string
 
-    const resJSON = await fetchAllPaymentsByUserIdWithPagination(userId, page, pageSize, orderBy, orderDesc)
+    let buttonIds: string[] | undefined
+    if (typeof req.query.buttonIds === 'string' && req.query.buttonIds !== '') {
+      buttonIds = (req.query.buttonIds as string).split(',')
+    }
+
+    const resJSON = await fetchAllPaymentsByUserIdWithPagination(
+      userId,
+      page,
+      pageSize,
+      orderBy,
+      orderDesc,
+      buttonIds
+    )
     res.status(200).json(resJSON)
   }
 }
diff --git a/pages/payments/index.tsx b/pages/payments/index.tsx
index 6785a8f96..5d725a018 100644
--- a/pages/payments/index.tsx
+++ b/pages/payments/index.tsx
@@ -17,6 +17,8 @@ import TopBar from 'components/TopBar'
 import { fetchUserWithSupertokens, UserWithSupertokens } from 'services/userService'
 import { UserProfile } from '@prisma/client'
 import Button from 'components/Button'
+import style from './payments.module.css'
+import SettingsIcon from '../../assets/settings-slider-icon.png'
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
   // this runs on the backend, so we must call init on supertokens-node SDK
@@ -57,6 +59,15 @@ export default function Payments ({ user, userId }: PaybuttonsProps): React.Reac
   const [selectedCurrencyCSV, setSelectedCurrencyCSV] = useState<string>('')
   const [paybuttonNetworks, setPaybuttonNetworks] = useState<Set<number>>(new Set())
   const [loading, setLoading] = useState(false)
+  const [buttons, setButtons] = useState<any[]>([])
+  const [selectedButtonIds, setSelectedButtonIds] = useState<any[]>([])
+  const [showFilters, setShowFilters] = useState<boolean>(false)
+  const [tableLoading, setTableLoading] = useState<boolean>(true)
+  const [refreshCount, setRefreshCount] = useState(0)
+
+  useEffect(() => {
+    setRefreshCount(prev => prev + 1)
+  }, [selectedButtonIds])
 
   const fetchPaybuttons = async (): Promise<any> => {
     const res = await fetch(`/api/paybuttons?userId=${user?.userProfile.id}`, {
@@ -69,6 +80,7 @@ export default function Payments ({ user, userId }: PaybuttonsProps): React.Reac
   const getDataAndSetUpCurrencyCSV = async (): Promise<void> => {
     const paybuttons = await fetchPaybuttons()
     const networkIds: Set<number> = new Set()
+    setButtons(paybuttons)
 
     paybuttons.forEach((p: { addresses: any[] }) => {
       return p.addresses.forEach((c: { address: { networkId: number } }) => networkIds.add(c.address.networkId))
@@ -81,20 +93,43 @@ export default function Payments ({ user, userId }: PaybuttonsProps): React.Reac
     void getDataAndSetUpCurrencyCSV()
   }, [])
 
-  function fetchData (): Function {
-    return async (page: number, pageSize: number, orderBy: string, orderDesc: boolean) => {
-      const paymentsResponse = await fetch(`/api/payments?page=${page}&pageSize=${pageSize}&orderBy=${orderBy}&orderDesc=${String(orderDesc)}`)
-      const paymentsCountResponse = await fetch('/api/payments/count', {
-        headers: {
-          Timezone: timezone
-        }
-      })
+  const loadData = async (
+    page: number,
+    pageSize: number,
+    orderBy: string,
+    orderDesc: boolean
+  ): Promise<{ data: [], totalCount: number }> => {
+    setTableLoading(true)
+    try {
+      // Build the URL including the filter if any buttons are selected
+      let url = `/api/payments?page=${page}&pageSize=${pageSize}&orderBy=${orderBy}&orderDesc=${String(orderDesc)}`
+      if (selectedButtonIds.length > 0) {
+        url += `&buttonIds=${selectedButtonIds.join(',')}`
+      }
+
+      const paymentsResponse = await fetch(url)
+      const paymentsCountResponse = await fetch(
+        `/api/payments/count${selectedButtonIds.length > 0 ? `?buttonIds=${selectedButtonIds.join(',')}` : ''}`,
+        { headers: { Timezone: timezone } }
+      )
+
+      if (!paymentsResponse.ok || !paymentsCountResponse.ok) {
+        console.log('paymentsResponse status', paymentsResponse.status)
+        console.log('paymentsResponse status text', paymentsResponse.statusText)
+        console.log('paymentsResponse body', paymentsResponse.body)
+        console.log('paymentsResponse json', await paymentsResponse.json())
+        throw new Error('Failed to fetch payments or count')
+      }
+
       const totalCount = await paymentsCountResponse.json()
       const payments = await paymentsResponse.json()
-      return {
-        data: payments,
-        totalCount
-      }
+
+      return { data: payments, totalCount }
+    } catch (error) {
+      console.error('Error fetching payments:', error)
+      throw error
+    } finally {
+      setLoading(false)
     }
   }
 
@@ -171,6 +206,9 @@ export default function Payments ({ user, userId }: PaybuttonsProps): React.Reac
       setLoading(true)
       const preferredCurrencyId = userProfile?.preferredCurrencyId ?? ''
       let url = `/api/payments/download/?currency=${preferredCurrencyId}`
+      if (selectedButtonIds.length > 0) {
+        url += `&buttonIds=${selectedButtonIds.join(',')}`
+      }
       const isCurrencyEmptyOrUndefined = (value: string): boolean => (value === '' || value === undefined)
 
       if (!isCurrencyEmptyOrUndefined(currency)) {
@@ -187,7 +225,18 @@ export default function Payments ({ user, userId }: PaybuttonsProps): React.Reac
         throw new Error('Failed to download CSV')
       }
 
-      const fileName = `${isCurrencyEmptyOrUndefined(currency) ? 'all' : `${currency.toLowerCase()}`}-transactions`
+      const selectedButtonNames = buttons
+        .filter(btn => selectedButtonIds.includes(btn.id))
+        .map(btn => btn.name.replace(/\s+/g, '-'))
+        .join('_')
+
+      const buttonSuffix = selectedButtonIds.length > 0
+        ? `-${selectedButtonNames !== '' ? selectedButtonNames : 'filtered'}`
+        : ''
+      const currencyLabel = isCurrencyEmptyOrUndefined(currency) ? 'all' : currency.toLowerCase()
+      const timestamp = moment().format('YYYY-MM-DD_HH-mm-ss')
+
+      const fileName = `${currencyLabel}-transactions${buttonSuffix}-${timestamp}`
       const blob = await response.blob()
       const downloadUrl = window.URL.createObjectURL(blob)
       const link = document.createElement('a')
@@ -213,8 +262,24 @@ export default function Payments ({ user, userId }: PaybuttonsProps): React.Reac
 
   return (
     <>
-      <TopBar title="Payments" user={user?.stUser?.email} />
-      <div style={{ display: 'flex', alignItems: 'center', gap: '10px', justifyContent: 'right' }}>
+     <TopBar title="Payments" user={user?.stUser?.email} />
+      <div className={style.filters_export_ctn}>
+        <div className={style.filter_btns}>
+          <div
+            onClick={() => setShowFilters(!showFilters)}
+            className={`${style.show_filters_button} ${selectedButtonIds.length > 0 ? style.active : ''}`}
+          >
+            <Image src={SettingsIcon} alt="filters" width={15} />Filters
+          </div>
+          {selectedButtonIds.length > 0 &&
+          <div
+          onClick={() => setSelectedButtonIds([])}
+          className={style.show_filters_button}
+        >
+          Clear
+        </div>
+          }
+        </div>
       {paybuttonNetworks.size > 1
         ? (
               <select
@@ -246,11 +311,35 @@ export default function Payments ({ user, userId }: PaybuttonsProps): React.Reac
                 Export as CSV
               </Button>)}
       </div>
+      {showFilters && (
+            <div className={style.showfilters_ctn}>
+              <span>Filter by button</span>
+              <div className={style.filters_ctn}>
+                {buttons.map((button) => (
+                  <div
+                    key={button.id}
+                    onClick={() => {
+                      setSelectedButtonIds(prev =>
+                        prev.includes(button.id)
+                          ? prev.filter(id => id !== button.id)
+                          : [...prev, button.id]
+                      )
+                    }}
+                    className={`${style.filter_button} ${selectedButtonIds.includes(button.id) ? style.active : ''}`}
+                  >
+                    {button.name}
+                  </div>
+                ))}
+              </div>
+            </div>
+      )}
       <TableContainerGetter
         columns={columns}
-        dataGetter={fetchData()}
-        tableRefreshCount={1}
-        emptyMessage='No Payments to show yet'
+        dataGetter={async (page, pageSize, orderBy, orderDesc) =>
+          await loadData(page, pageSize, orderBy, orderDesc)
+        }
+        tableRefreshCount={refreshCount}
+        emptyMessage={tableLoading ? 'Loading...' : 'No Payments to show yet'}
         />
     </>
   )
diff --git a/pages/payments/payments.module.css b/pages/payments/payments.module.css
new file mode 100644
index 000000000..4e50b3e20
--- /dev/null
+++ b/pages/payments/payments.module.css
@@ -0,0 +1,89 @@
+.filters_export_ctn {
+    display: flex;
+    align-items: center;
+    gap: 50px;
+    justify-content: space-between;
+}
+
+.filters_export_ctn select {
+    margin-bottom: 0;
+}
+
+.show_filters_button {
+    width: fit-content;
+    padding: 4px 20px;
+    border-radius: 6px;
+    background-color: var(--secondary-bg-color);
+    border: 1px solid var(--border-color);
+    cursor: pointer;
+    transition: all ease-in-out 200ms;
+    font-weight: 500;
+    user-select: none;
+    display: flex;
+    align-items: center;
+}
+
+.show_filters_button img {
+    margin-right: 6px;
+    border-radius: 0;
+}
+
+body[data-theme='dark'] .show_filters_button img {
+    filter: brightness(0) invert(1);
+}
+
+.show_filters_button:hover {
+    background-color: var(--accent-color);
+}
+
+.filters_ctn {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+}
+
+.filter_button {
+    padding: 5px 15px;
+    font-size: 12px;
+    border-radius: 6px;
+    background-color: var(--secondary-bg-color);
+    cursor: pointer;
+    transition: all ease-in-out 200ms;
+    border: 1px solid var(--border-color);
+    user-select: none;
+}
+
+.filter_button:hover {
+    border-color: var(--accent-color);
+}
+
+.filter_button:active {
+    transform: scale(0.95);
+  }
+
+.active {
+    background-color: var(--accent-color);
+    border-color: var(--accent-color);
+}
+
+.showfilters_ctn {
+    margin-top: 10px;
+    margin-bottom: 20px;
+}
+
+.showfilters_ctn span {
+   font-size: 12px;
+   margin: 10px 0 5px;
+   display: inline-block;
+   font-weight: 500;
+}
+
+.wallet_label {
+    margin-top: 20px !important;
+ }
+
+ .filter_btns {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+ }
\ No newline at end of file
diff --git a/services/transactionService.ts b/services/transactionService.ts
index 4fa9a8d2a..53a10685f 100644
--- a/services/transactionService.ts
+++ b/services/transactionService.ts
@@ -563,80 +563,49 @@ export async function getPaymentsByUserIdOrderedByButtonName (
   userId: string,
   page: number,
   pageSize: number,
-  orderDesc = true
+  orderDesc = true,
+  buttonIds?: string[]
 ): Promise<Payment[]> {
   const offset = page * pageSize
-
-  let transactions: any = []
-  // code is repeated because prisma does not allow to inject SQL keywords
-  if (orderDesc) {
-    transactions = await prisma.$queryRaw`
-      SELECT 
-        t.*, 
-        p.id AS paybuttonId, 
-        p.name AS paybuttonName, 
-        p.providerUserId AS paybuttonProviderUserId,
-        a.networkId as networkId,
-        JSON_ARRAYAGG(
-          JSON_OBJECT(
-            'priceId', pb.id,
-            'priceValue', pb.value,
-            'quoteId', pb.quoteId
-          )
-        ) AS prices
-      FROM \`Transaction\` t
-      INNER JOIN \`Address\` a ON t.\`addressId\` = a.\`id\`
-      INNER JOIN \`AddressesOnButtons\` ab ON a.\`id\` = ab.\`addressId\`
-      INNER JOIN \`Paybutton\` p ON ab.\`paybuttonId\` = p.\`id\`
-      LEFT JOIN \`PricesOnTransactions\` pt ON t.\`id\` = pt.\`transactionId\`
-      LEFT JOIN \`Price\` pb ON pt.\`priceId\` = pb.\`id\`
-      WHERE EXISTS (
-        SELECT 1
-        FROM \`AddressesOnUserProfiles\` au
-        WHERE au.\`addressId\` = a.\`id\`
-          AND au.\`userId\` = ${userId}
-      )
-      AND p.\`providerUserId\` = ${userId}
-      GROUP BY t.id, p.id
-      ORDER BY p.\`name\` ASC
-      LIMIT ${pageSize}
-      OFFSET ${offset};
-    `
-  } else {
-    transactions = await prisma.$queryRaw`
-      SELECT 
-        t.*, 
-        p.id AS paybuttonId, 
-        p.name AS paybuttonName, 
-        p.providerUserId AS paybuttonProviderUserId,
-        a.networkId as networkId,
-        JSON_ARRAYAGG(
-          JSON_OBJECT(
-            'priceId', pb.id,
-            'priceValue', pb.value,
-            'quoteId', pb.quoteId
-          )
-        ) AS prices
-      FROM \`Transaction\` t
-      INNER JOIN \`Address\` a ON t.\`addressId\` = a.\`id\`
-      INNER JOIN \`AddressesOnButtons\` ab ON a.\`id\` = ab.\`addressId\`
-      INNER JOIN \`Paybutton\` p ON ab.\`paybuttonId\` = p.\`id\`
-      LEFT JOIN \`PricesOnTransactions\` pt ON t.\`id\` = pt.\`transactionId\`
-      LEFT JOIN \`Price\` pb ON pt.\`priceId\` = pb.\`id\`
-      WHERE t.\`amount\` > 0
-      AND EXISTS (
-        SELECT 1
-        FROM \`AddressesOnUserProfiles\` au
-        WHERE au.\`addressId\` = a.\`id\`
-          AND au.\`userId\` = ${userId}
-      )
-      AND p.\`providerUserId\` = ${userId}
-      GROUP BY t.id, p.id
-      ORDER BY p.\`name\` DESC
-      LIMIT ${pageSize}
-      OFFSET ${offset};
-    `
-  }
+  const order = orderDesc ? Prisma.sql`DESC` : Prisma.sql`ASC`
+  const buttonFilter = Array.isArray(buttonIds) && buttonIds.length > 0
+    ? Prisma.sql`AND p.id IN (${Prisma.join(buttonIds)})`
+    : Prisma.empty
+
+  const transactions: any = await prisma.$queryRaw`
+    SELECT 
+      t.*, 
+      p.id AS paybuttonId, 
+      p.name AS paybuttonName, 
+      p.providerUserId AS paybuttonProviderUserId,
+      a.networkId as networkId,
+      JSON_ARRAYAGG(
+        JSON_OBJECT(
+          'priceId', pb.id,
+          'priceValue', pb.value,
+          'quoteId', pb.quoteId
+        )
+      ) AS prices
+    FROM \`Transaction\` t
+    INNER JOIN \`Address\` a ON t.\`addressId\` = a.\`id\`
+    INNER JOIN \`AddressesOnButtons\` ab ON a.\`id\` = ab.\`addressId\`
+    INNER JOIN \`Paybutton\` p ON ab.\`paybuttonId\` = p.\`id\`
+    LEFT JOIN \`PricesOnTransactions\` pt ON t.\`id\` = pt.\`transactionId\`
+    LEFT JOIN \`Price\` pb ON pt.\`priceId\` = pb.\`id\`
+    WHERE t.\`amount\` > 0
+    AND EXISTS (
+      SELECT 1
+      FROM \`AddressesOnUserProfiles\` au
+      WHERE au.\`addressId\` = a.\`id\`
+        AND au.\`userId\` = ${userId}
+    )
+    AND p.\`providerUserId\` = ${userId}
+    ${buttonFilter}
+    GROUP BY t.id, p.id
+    ORDER BY p.\`name\` ${order}
+    LIMIT ${pageSize}
+    OFFSET ${offset};
+  `
 
   const payments: Payment[] = []
 
@@ -681,14 +650,17 @@ export async function fetchAllPaymentsByUserIdWithPagination (
   page: number,
   pageSize: number,
   orderBy?: string,
-  orderDesc = true
+  orderDesc = true,
+  buttonIds?: string[]
 ): Promise<Payment[]> {
   const orderDescString: Prisma.SortOrder = orderDesc ? 'desc' : 'asc'
+
   if (orderBy === 'buttonDisplayDataList') {
     return await getPaymentsByUserIdOrderedByButtonName(
-      userId, page, pageSize, orderDesc
+      userId, page, pageSize, orderDesc, buttonIds
     )
   }
+
   let orderByQuery
   if (orderBy !== undefined && orderBy !== '') {
     if (orderBy === 'values') {
@@ -707,25 +679,34 @@ export async function fetchAllPaymentsByUserIdWithPagination (
       }
     }
   } else {
-    // Default orderBy
     orderByQuery = {
       timestamp: orderDescString
     }
   }
 
-  const transactions = await prisma.transaction.findMany({
-    where: {
-      address: {
-        userProfiles: {
-          some: {
-            userId
-          }
-        }
-      },
-      amount: {
-        gt: 0
+  const where: Prisma.TransactionWhereInput = {
+    address: {
+      userProfiles: {
+        some: { userId }
       }
     },
+    amount: {
+      gt: 0
+    }
+  }
+
+  if ((buttonIds !== undefined) && buttonIds.length > 0) {
+    where.address!.paybuttons = {
+      some: {
+        paybutton: {
+          id: { in: buttonIds }
+        }
+      }
+    }
+  }
+
+  const transactions = await prisma.transaction.findMany({
+    where,
     include: includePaybuttonsAndPrices,
     orderBy: orderByQuery,
     skip: page * Number(pageSize),
@@ -745,31 +726,40 @@ export async function fetchAllPaymentsByUserIdWithPagination (
 
 export async function fetchAllPaymentsByUserId (
   userId: string,
-  networkIds?: number[]
+  networkIds?: number[],
+  buttonIds?: string[]
 ): Promise<TransactionsWithPaybuttonsAndPrices[]> {
-  const transactions = await prisma.transaction.findMany({
-    where: {
-      address: {
-        userProfiles: {
-          some: {
-            userId
-          }
-        },
-        networkId: {
-          in: networkIds ?? Object.values(NETWORK_IDS)
-        }
+  const where: Prisma.TransactionWhereInput = {
+    address: {
+      userProfiles: {
+        some: { userId }
       },
-      amount: {
-        gt: 0
+      networkId: {
+        in: networkIds ?? Object.values(NETWORK_IDS)
       }
     },
+    amount: {
+      gt: 0
+    }
+  }
+
+  if (buttonIds !== undefined && buttonIds.length > 0) {
+    where.address!.paybuttons = {
+      some: {
+        paybutton: {
+          id: { in: buttonIds }
+        }
+      }
+    }
+  }
+
+  return await prisma.transaction.findMany({
+    where,
     include: includePaybuttonsAndPrices,
     orderBy: {
       timestamp: 'asc'
     }
   })
-
-  return transactions
 }
 
 export async function fetchTxCountByPaybuttonId (paybuttonId: string): Promise<number> {
@@ -783,3 +773,24 @@ export async function fetchTxCountByPaybuttonId (paybuttonId: string): Promise<n
     }
   })
 }
+
+export const getFilteredTransactionCount = async (
+  userId: string,
+  buttonIds: string[]
+): Promise<number> => {
+  return await prisma.transaction.count({
+    where: {
+      address: {
+        userProfiles: {
+          some: { userId }
+        },
+        paybuttons: {
+          some: {
+            paybutton: { id: { in: buttonIds } }
+          }
+        }
+      },
+      amount: { gt: 0 }
+    }
+  })
+}