diff --git a/src/components/dialogs/manage-transaction/components/mark-as-refund/mark-as-refund-dialog.vue b/src/components/dialogs/manage-transaction/components/mark-as-refund/mark-as-refund-dialog.vue
index 948aadcc..7bc2f7f1 100644
--- a/src/components/dialogs/manage-transaction/components/mark-as-refund/mark-as-refund-dialog.vue
+++ b/src/components/dialogs/manage-transaction/components/mark-as-refund/mark-as-refund-dialog.vue
@@ -76,9 +76,7 @@ const saveState = () => {
       <Dialog.DialogTrigger as-child>
         <Button class="w-full" :disabled="disabled" variant="secondary"> Link refund </Button>
       </Dialog.DialogTrigger>
-      <Dialog.DialogContent
-        class="sm:max-w-md max-h-[90dvh] grid-rows-[auto_auto_minmax(0,1fr)_auto]"
-      >
+      <Dialog.DialogContent class="max-h-[90dvh] grid grid-rows-[auto_auto_minmax(0,1fr)_auto]">
         <Dialog.DialogHeader class="mb-4">
           <Dialog.DialogTitle>Select transaction</Dialog.DialogTitle>
           <Dialog.DialogDescription>
diff --git a/src/components/dialogs/manage-transaction/components/mark-as-refund/refund-records-list.vue b/src/components/dialogs/manage-transaction/components/mark-as-refund/refund-records-list.vue
index e9050eda..71ce8f20 100644
--- a/src/components/dialogs/manage-transaction/components/mark-as-refund/refund-records-list.vue
+++ b/src/components/dialogs/manage-transaction/components/mark-as-refund/refund-records-list.vue
@@ -109,7 +109,7 @@ const handlerRecordClick = (transaction: TransactionModel) => {
 </script>
 
 <template>
-  <div class="grid gap-2 grid-rows-[minmax(0,1fr)_max-content]">
+  <div class="flex flex-col flex-grow min-h-0 gap-2">
     <div class="flex">
       <Dialog.Dialog v-model:open="isFiltersDialogOpen">
         <Dialog.DialogTrigger as-child>
diff --git a/src/components/dialogs/manage-transaction/dialog-content.vue b/src/components/dialogs/manage-transaction/dialog-content.vue
index 6f87f9e9..7163427e 100644
--- a/src/components/dialogs/manage-transaction/dialog-content.vue
+++ b/src/components/dialogs/manage-transaction/dialog-content.vue
@@ -35,6 +35,7 @@ import { Button } from "@/components/lib/ui/button";
 import TransactionRecrod from "@/components/transactions-list/transaction-record.vue";
 import { ApiErrorResponseError } from "@/js/errors";
 import { useNotificationCenter } from "@/components/notification-center";
+import { getInvalidationQueryKey } from "@/composable/data-queries/opposite-tx-record";
 import TypeSelector from "./components/type-selector.vue";
 import FormRow from "./components/form-row.vue";
 import AccountField from "./components/account-field.vue";
@@ -260,6 +261,14 @@ const submit = async () => {
     closeModal();
     // Reload all cached data in the app
     queryClient.invalidateQueries({ queryKey: [VUE_QUERY_TX_CHANGE_QUERY] });
+    if (props.transaction?.id) {
+      queryClient.invalidateQueries({ queryKey: getInvalidationQueryKey(props.transaction.id) });
+    }
+    if (props.oppositeTransaction?.id) {
+      queryClient.invalidateQueries({
+        queryKey: getInvalidationQueryKey(props.oppositeTransaction.id),
+      });
+    }
   } catch (e) {
     if (e instanceof ApiErrorResponseError) {
       addErrorNotification(e.data.message);
@@ -363,7 +372,7 @@ onUnmounted(() => {
         <Button variant="ghost"> Close </Button>
       </DialogClose>
     </div>
-    <div class="grid grid-cols-[450px,1fr] relative">
+    <div class="grid grid-cols-[450px,minmax(0,1fr)] relative">
       <div class="px-6">
         <type-selector
           :is-form-creation="isFormCreation"
diff --git a/src/components/dialogs/manage-transaction/index.vue b/src/components/dialogs/manage-transaction/index.vue
index 4dbf883d..570c2806 100644
--- a/src/components/dialogs/manage-transaction/index.vue
+++ b/src/components/dialogs/manage-transaction/index.vue
@@ -12,7 +12,7 @@ const isOpen = ref(false);
     <Dialog.DialogTrigger as-child>
       <slot />
     </Dialog.DialogTrigger>
-    <Dialog.DialogContent custom-close class="max-h-[90dvh] w-full max-w-[800px] bg-card p-0">
+    <Dialog.DialogContent custom-close class="max-h-[90dvh] w-full max-w-[900px] bg-card p-0">
       <DialogContent @close-modal="isOpen = false" />
     </Dialog.DialogContent>
   </Dialog.Dialog>
diff --git a/src/components/lib/ui/button/index.ts b/src/components/lib/ui/button/index.ts
index eb2f3c4e..3897d1eb 100644
--- a/src/components/lib/ui/button/index.ts
+++ b/src/components/lib/ui/button/index.ts
@@ -19,7 +19,7 @@ export const buttonVariants = cva(
         default: "h-10 px-4 py-2",
         sm: "h-9 rounded-md px-3",
         lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
+        icon: "size-10",
       },
     },
     defaultVariants: {
diff --git a/src/components/lib/ui/card/CardContent.vue b/src/components/lib/ui/card/CardContent.vue
index 225ff7cb..77c2095c 100644
--- a/src/components/lib/ui/card/CardContent.vue
+++ b/src/components/lib/ui/card/CardContent.vue
@@ -10,7 +10,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <div :class="cn('p-6 pt-0', props.class)">
+  <div :class="cn('p-2 sm:p-6 pt-0 sm:pt-0', props.class)">
     <slot />
   </div>
 </template>
diff --git a/src/components/lib/ui/card/CardFooter.vue b/src/components/lib/ui/card/CardFooter.vue
index 225ff7cb..21906182 100644
--- a/src/components/lib/ui/card/CardFooter.vue
+++ b/src/components/lib/ui/card/CardFooter.vue
@@ -10,7 +10,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <div :class="cn('p-6 pt-0', props.class)">
+  <div :class="cn('p-2 sm:p-6 pt-0', props.class)">
     <slot />
   </div>
 </template>
diff --git a/src/components/lib/ui/card/CardHeader.vue b/src/components/lib/ui/card/CardHeader.vue
index 4a39391e..f0ebd297 100644
--- a/src/components/lib/ui/card/CardHeader.vue
+++ b/src/components/lib/ui/card/CardHeader.vue
@@ -10,7 +10,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <div :class="cn('flex flex-col space-y-1.5 p-6', props.class)">
+  <div :class="cn('flex flex-col space-y-1.5 py-2 px-6 sm:py-6', props.class)">
     <slot />
   </div>
 </template>
diff --git a/src/components/transactions-list/transaction-record.vue b/src/components/transactions-list/transaction-record.vue
index 2054ebf4..96cf6ac7 100644
--- a/src/components/transactions-list/transaction-record.vue
+++ b/src/components/transactions-list/transaction-record.vue
@@ -1,12 +1,8 @@
 <template>
   <button
-    class="transaction-record"
+    class="py-1 px-2 rounded-md flex justify-between items-center cursor-pointer w-full gap-2 [content-visibility:auto]"
     type="button"
     aria-haspopup="true"
-    :class="{
-      'transaction-record--income': transaction.transactionType === TRANSACTION_TYPES.income,
-      'transaction-record--expense': transaction.transactionType === TRANSACTION_TYPES.expense,
-    }"
     @click="transactionEmit"
   >
     <div class="flex items-center gap-2">
@@ -21,11 +17,16 @@
           </span>
         </template>
         <template v-else>
-          <template v-if="category">
+          <div class="flex gap-2 items-center">
             <span class="text-sm tracking-wider whitespace-nowrap">
-              {{ category.name }}
+              {{ category.name || "Other" }}
             </span>
-          </template>
+            <template v-if="isRefund">
+              <div class="border rounded-sm border-primary text-xs text-white/80 px-1 py-0.5">
+                Refund
+              </div>
+            </template>
+          </div>
         </template>
         <span class="text-sm tracking-wider line-clamp-2 opacity-40">
           {{ transaction.note }}
@@ -51,28 +52,16 @@
 
 <script lang="ts" setup>
 import { format } from "date-fns";
-import { computed, reactive, ref } from "vue";
+import { computed, reactive } from "vue";
 import { storeToRefs } from "pinia";
 import { TRANSACTION_TRANSFER_NATURE, TRANSACTION_TYPES, TransactionModel } from "shared-types";
 
 import { useCategoriesStore, useAccountsStore } from "@/stores";
-import { loadTransactionsByTransferId } from "@/api/transactions";
+import { useOppositeTxRecord } from "@/composable/data-queries/opposite-tx-record";
 
 import { formatUIAmount } from "@/js/helpers";
 import CategoryCircle from "@/components/common/category-circle.vue";
 
-const setOppositeTransaction = async (transaction: TransactionModel) => {
-  const transactions = await loadTransactionsByTransferId(transaction.transferId);
-
-  return transactions.find((item) => item.id !== transaction.id);
-};
-
-const txNatureIsTransfer = (nature: TRANSACTION_TRANSFER_NATURE) =>
-  [
-    TRANSACTION_TRANSFER_NATURE.common_transfer,
-    TRANSACTION_TRANSFER_NATURE.transfer_out_wallet,
-  ].includes(nature);
-
 const props = defineProps<{
   tx: TransactionModel;
 }>();
@@ -86,16 +75,15 @@ const emit = defineEmits<{
 }>();
 
 const transaction = reactive(props.tx);
+const isTransferTransaction = computed(() =>
+  [
+    TRANSACTION_TRANSFER_NATURE.common_transfer,
+    TRANSACTION_TRANSFER_NATURE.transfer_out_wallet,
+  ].includes(transaction.transferNature),
+);
+const isRefund = computed(() => transaction.refundLinked);
 
-const isTransferTransaction = computed(() => txNatureIsTransfer(transaction.transferNature));
-
-const oppositeTransferTransaction = ref<TransactionModel | null>(null);
-
-if (transaction.transferNature === TRANSACTION_TRANSFER_NATURE.common_transfer) {
-  (async () => {
-    oppositeTransferTransaction.value = await setOppositeTransaction(transaction);
-  })();
-}
+const { oppositeTransferTransaction } = useOppositeTxRecord(transaction);
 
 const category = computed(() => categoriesMap.value[transaction.categoryId]);
 const accountFrom = computed(() => accountsRecord.value[transaction.accountId]);
@@ -131,17 +119,8 @@ const formattedAmount = computed(() => {
 });
 </script>
 
-<style lang="scss">
-.transaction-record {
-  @apply py-1 px-2;
-  @apply rounded-md flex justify-between items-center cursor-pointer w-full gap-2;
+<script lang="ts">
+export function invalidateTxsByTransferIdQuery(id: string) {
+  return ["transactions-by-transfer-id", id];
 }
-.transaction-record__amount {
-  .transaction-record--income & {
-    @apply text-app-income-color;
-  }
-  .transaction-record--expense & {
-    @apply text-app-expense-color;
-  }
-}
-</style>
+</script>
diff --git a/src/components/transactions-list/transactions-list.vue b/src/components/transactions-list/transactions-list.vue
index 553016bd..0adeb1ab 100644
--- a/src/components/transactions-list/transactions-list.vue
+++ b/src/components/transactions-list/transactions-list.vue
@@ -2,11 +2,11 @@
   <Dialog.Dialog v-model:open="isDialogVisible">
     <div v-bind="$attrs" class="transactions-list">
       <template v-for="item in transactions" :key="`${item.id}-render-id-${renderId}`">
-        <TransactionRecrod :tx="item" @record-click="handlerRecordClick" />
+        <TransactionRecord :tx="item" @record-click="handlerRecordClick" />
       </template>
     </div>
 
-    <Dialog.DialogContent custom-close class="max-h-[90dvh] w-full max-w-[800px] bg-card p-0">
+    <Dialog.DialogContent custom-close class="max-h-[90dvh] w-full max-w-[900px] bg-card p-0">
       <ManageTransactionDoalogContent v-bind="dialogProps" @close-modal="isDialogVisible = false" />
     </Dialog.DialogContent>
   </Dialog.Dialog>
@@ -21,7 +21,7 @@ import {
   TRANSACTION_TRANSFER_NATURE,
 } from "shared-types";
 import * as Dialog from "@/components/lib/ui/dialog";
-import TransactionRecrod from "./transaction-record.vue";
+import TransactionRecord from "./transaction-record.vue";
 
 const ManageTransactionDoalogContent = defineAsyncComponent(
   () => import("@/components/dialogs/manage-transaction/dialog-content.vue"),
diff --git a/src/composable/data-queries/opposite-tx-record.ts b/src/composable/data-queries/opposite-tx-record.ts
new file mode 100644
index 00000000..53ab1e18
--- /dev/null
+++ b/src/composable/data-queries/opposite-tx-record.ts
@@ -0,0 +1,32 @@
+import { useQuery } from "@tanstack/vue-query";
+import { computed } from "vue";
+import { TRANSACTION_TRANSFER_NATURE } from "shared-types";
+import { loadTransactionsByTransferId } from "@/api/transactions";
+
+const BASE_QUERY_KEY = "transactions-by-transfer-id";
+
+export function useOppositeTxRecord(transaction) {
+  const isTransferTransaction = computed(() =>
+    [
+      TRANSACTION_TRANSFER_NATURE.common_transfer,
+      TRANSACTION_TRANSFER_NATURE.transfer_out_wallet,
+    ].includes(transaction.transferNature),
+  );
+
+  const { data: oppositeTransferTransaction } = useQuery({
+    queryKey: [BASE_QUERY_KEY, transaction.id, transaction.transferId],
+    queryFn: async () => {
+      const transactions = await loadTransactionsByTransferId(transaction.transferId);
+      if (!transactions) return null;
+      return transactions.find((item) => item.id !== transaction.id) || null;
+    },
+    enabled: isTransferTransaction.value,
+    staleTime: Infinity,
+  });
+
+  return {
+    oppositeTransferTransaction,
+  };
+}
+
+export const getInvalidationQueryKey = (transactionId) => [BASE_QUERY_KEY, transactionId];
diff --git a/src/pages/dashboard/accounts-list/account-card.vue b/src/pages/dashboard/accounts-list/account-card.vue
index 52929bd7..10c47d25 100644
--- a/src/pages/dashboard/accounts-list/account-card.vue
+++ b/src/pages/dashboard/accounts-list/account-card.vue
@@ -1,6 +1,6 @@
 <template>
   <Card>
-    <CardContent class="p-4">
+    <CardContent class="!p-4">
       <div class="account__name">
         {{ account.name || "No name set..." }}
       </div>
diff --git a/src/pages/records/records.vue b/src/pages/records/records.vue
index e5dfba9e..e914180c 100644
--- a/src/pages/records/records.vue
+++ b/src/pages/records/records.vue
@@ -1,96 +1,211 @@
 <template>
   <div class="p-4">
-    <div class="flex gap-20">
-      <Card class="sticky h-min min-w-[350px] top-[var(--header-height)] p-4">
-        <div class="grid gap-4">
-          <DateField
-            v-model="filters.start"
-            :calendar-options="{
-              maxDate: filters.end,
-            }"
-            label="From date"
-          />
-          <DateField
-            v-model="filters.end"
-            :calendar-options="{
-              minDate: filters.start,
-            }"
-            label="To date"
-          />
-
-          <div>
-            <p class="mb-2">Transaction type:</p>
-
-            <RadioGroup
-              v-model="filters.transactionType"
-              :default-value="null"
-              class="flex flex-wrap gap-2"
-            >
-              <label class="flex gap-2 items-center cursor-pointer">
-                <RadioGroupItem :value="null" />
-                <p class="text-sm">Both</p>
-              </label>
-              <label class="flex gap-2 items-center cursor-pointer">
-                <RadioGroupItem :value="TRANSACTION_TYPES.income" />
-                <p class="text-sm">Income</p>
-              </label>
-              <label class="flex gap-2 items-center cursor-pointer">
-                <RadioGroupItem :value="TRANSACTION_TYPES.expense" />
-                <p class="text-sm">Expense</p>
-              </label>
-            </RadioGroup>
+    <div class="flex flex-col w-min lg:w-auto lg:flex-row gap-4 xl:gap-20 max-w-full">
+      <template v-if="!hideFilters">
+        <Card class="sticky h-min min-w-[350px] top-[var(--header-height)] p-4">
+          <div class="grid gap-4">
+            <DateField
+              v-model="filters.start"
+              :calendar-options="{
+                maxDate: filters.end,
+              }"
+              label="From date"
+            />
+            <DateField
+              v-model="filters.end"
+              :calendar-options="{
+                minDate: filters.start,
+              }"
+              label="To date"
+            />
+
+            <div>
+              <p class="mb-2">Transaction type:</p>
+
+              <RadioGroup
+                v-model="filters.transactionType"
+                :default-value="null"
+                class="flex flex-wrap gap-2"
+              >
+                <label class="flex gap-2 items-center cursor-pointer">
+                  <RadioGroupItem :value="null" />
+                  <p class="text-sm">Both</p>
+                </label>
+                <label class="flex gap-2 items-center cursor-pointer">
+                  <RadioGroupItem :value="TRANSACTION_TYPES.income" />
+                  <p class="text-sm">Income</p>
+                </label>
+                <label class="flex gap-2 items-center cursor-pointer">
+                  <RadioGroupItem :value="TRANSACTION_TYPES.expense" />
+                  <p class="text-sm">Expense</p>
+                </label>
+              </RadioGroup>
+            </div>
+
+            <div class="flex gap-2">
+              <InputField
+                v-model="filters.amountGte"
+                label="Amount from (gte)"
+                placeholder=">= than"
+              />
+              <InputField v-model="filters.amountLte" label="To (lte)" placeholder="<= than" />
+            </div>
+
+            <div>
+              <p class="mb-2">Exlude:</p>
+
+              <div class="flex gap-2">
+                <label class="cursor-pointer flex gap-2 items-center">
+                  <Checkbox
+                    :checked="filters.excludeRefunds"
+                    @update:checked="filters.excludeRefunds = $event"
+                  />
+                  Refunds
+                </label>
+                <label class="cursor-pointer flex gap-2 items-center">
+                  <Checkbox
+                    :checked="filters.excludeTransfer"
+                    @update:checked="filters.excludeTransfer = $event"
+                  />
+                  Transfers
+                </label>
+              </div>
+            </div>
           </div>
 
-          <div class="flex gap-2">
-            <InputField
-              v-model="filters.amountGte"
-              label="Amount from (gte)"
-              placeholder=">= than"
-            />
-            <InputField v-model="filters.amountLte" label="To (lte)" placeholder="<= than" />
+          <div class="mt-8 flex gap-2">
+            <UiButton
+              variant="secondary"
+              :disabled="isResetButtonDisabled"
+              class="flex-shrink w-full"
+              @click="resetFilters"
+            >
+              Reset
+            </UiButton>
+
+            <template v-if="isFiltersOutOfSync">
+              <UiButton variant="default" class="flex-shrink w-full" @click="applyFilters">
+                Apply
+              </UiButton>
+            </template>
           </div>
+        </Card>
+      </template>
+      <template v-else>
+        <div class="flex items-center justify-between">
+          <p>Filters:</p>
 
-          <div>
-            <p class="mb-2">Exlude:</p>
+          <Dialog.Dialog v-model:open="isFiltersDialogOpen">
+            <Dialog.DialogTrigger as-child>
+              <Button variant="ghost" size="icon" class="ml-auto">
+                <div class="relative">
+                  <ListFilterIcon />
 
-            <div class="flex gap-2">
-              <label class="cursor-pointer flex gap-2 items-center">
-                <Checkbox
-                  :checked="filters.excludeRefunds"
-                  @update:checked="filters.excludeRefunds = $event"
+                  <template v-if="isAnyFiltersApplied">
+                    <div class="size-3 rounded-full bg-primary absolute -top-1 -right-1" />
+                  </template>
+                </div>
+              </Button>
+            </Dialog.DialogTrigger>
+            <Dialog.DialogContent
+              class="sm:max-w-md max-h-[90dvh] grid-rows-[auto_auto_minmax(0,1fr)_auto]"
+            >
+              <Dialog.DialogHeader class="mb-6">
+                <Dialog.DialogTitle> Select filters </Dialog.DialogTitle>
+              </Dialog.DialogHeader>
+
+              <div class="grid gap-4">
+                <DateField
+                  v-model="filters.start"
+                  :calendar-options="{
+                    maxDate: filters.end,
+                  }"
+                  label="From date"
                 />
-                Refunds
-              </label>
-              <label class="cursor-pointer flex gap-2 items-center">
-                <Checkbox
-                  :checked="filters.excludeTransfer"
-                  @update:checked="filters.excludeTransfer = $event"
+                <DateField
+                  v-model="filters.end"
+                  :calendar-options="{
+                    minDate: filters.start,
+                  }"
+                  label="To date"
                 />
-                Transfers
-              </label>
-            </div>
-          </div>
-        </div>
 
-        <div class="mt-8 flex gap-2">
-          <UiButton
-            variant="secondary"
-            :disabled="isResetButtonDisabled"
-            class="flex-shrink w-full"
-            @click="resetFilters"
-          >
-            Reset
-          </UiButton>
+                <div>
+                  <p class="mb-2">Transaction type:</p>
 
-          <template v-if="isFiltersOutOfSync">
-            <UiButton variant="default" class="flex-shrink w-full" @click="applyFilters">
-              Apply
-            </UiButton>
-          </template>
+                  <RadioGroup
+                    v-model="filters.transactionType"
+                    :default-value="null"
+                    class="flex flex-wrap gap-2"
+                  >
+                    <label class="flex gap-2 items-center cursor-pointer">
+                      <RadioGroupItem :value="null" />
+                      <p class="text-sm">Both</p>
+                    </label>
+                    <label class="flex gap-2 items-center cursor-pointer">
+                      <RadioGroupItem :value="TRANSACTION_TYPES.income" />
+                      <p class="text-sm">Income</p>
+                    </label>
+                    <label class="flex gap-2 items-center cursor-pointer">
+                      <RadioGroupItem :value="TRANSACTION_TYPES.expense" />
+                      <p class="text-sm">Expense</p>
+                    </label>
+                  </RadioGroup>
+                </div>
+
+                <div class="flex gap-2">
+                  <InputField
+                    v-model="filters.amountGte"
+                    label="Amount from (gte)"
+                    placeholder=">= than"
+                  />
+                  <InputField v-model="filters.amountLte" label="To (lte)" placeholder="<= than" />
+                </div>
+
+                <div>
+                  <p class="mb-2">Exlude:</p>
+
+                  <div class="flex gap-2">
+                    <label class="cursor-pointer flex gap-2 items-center">
+                      <Checkbox
+                        :checked="filters.excludeRefunds"
+                        @update:checked="filters.excludeRefunds = $event"
+                      />
+                      Refunds
+                    </label>
+                    <label class="cursor-pointer flex gap-2 items-center">
+                      <Checkbox
+                        :checked="filters.excludeTransfer"
+                        @update:checked="filters.excludeTransfer = $event"
+                      />
+                      Transfers
+                    </label>
+                  </div>
+                </div>
+              </div>
+
+              <div class="mt-8 flex gap-2">
+                <UiButton
+                  variant="secondary"
+                  :disabled="isResetButtonDisabled"
+                  class="flex-shrink w-full"
+                  @click="resetFilters"
+                >
+                  Reset
+                </UiButton>
+
+                <template v-if="isFiltersOutOfSync">
+                  <UiButton variant="default" class="flex-shrink w-full" @click="applyFilters">
+                    Apply
+                  </UiButton>
+                </template>
+              </div>
+            </Dialog.DialogContent>
+          </Dialog.Dialog>
         </div>
-      </Card>
+      </template>
 
-      <Card class="p-6 rounded-md w-screen max-w-[450px]">
+      <Card class="py-4 px-2 sm:p-6 rounded-md w-screen max-w-full sm:max-w-[450px]">
         <div>
           <template v-if="isFetched && transactionsPages">
             <TransactionsList :transactions="transactionsPages.pages.flat()" />
@@ -129,9 +244,11 @@
 
 <script lang="ts" setup>
 import { computed, ref } from "vue";
-import { useWindowScroll } from "@vueuse/core";
+import { useWindowScroll, useWindowSize, useDebounce } from "@vueuse/core";
 import isDate from "date-fns/isDate";
 import { isEqual } from "lodash-es";
+import * as Dialog from "@/components/lib/ui/dialog";
+import { ListFilterIcon } from "lucide-vue-next";
 
 import { Card } from "@/components/lib/ui/card";
 import { useInfiniteQuery } from "@tanstack/vue-query";
@@ -171,18 +288,26 @@ const DEFAULT_FILTERS: {
   excludeTransfer: false,
 };
 
+const isFiltersDialogOpen = ref(false);
 const filters = ref({ ...DEFAULT_FILTERS });
 const appliedFilters = ref({ ...DEFAULT_FILTERS });
 
 const isResetButtonDisabled = computed(() => isEqual(filters.value, DEFAULT_FILTERS));
+const isAnyFiltersApplied = computed(() => !isEqual(appliedFilters.value, DEFAULT_FILTERS));
 const isFiltersOutOfSync = computed(() => !isEqual(filters.value, appliedFilters.value));
 const resetFilters = () => {
   filters.value = { ...DEFAULT_FILTERS };
   appliedFilters.value = { ...DEFAULT_FILTERS };
+  isFiltersDialogOpen.value = false;
 };
 const applyFilters = () => {
   appliedFilters.value = { ...filters.value };
+  isFiltersDialogOpen.value = false;
 };
+const { width: windowWidth } = useWindowSize();
+const debouncedWindowWidth = useDebounce(windowWidth, 300);
+
+const hideFilters = computed(() => debouncedWindowWidth.value <= 1024);
 
 const fetchTransactions = ({
   pageParam,
diff --git a/tailwind.config.js b/tailwind.config.js
index 7a16496b..2deeff93 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -65,6 +65,10 @@ module.exports = {
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
       },
+      screens: {
+        xxs: "390px",
+        xs: "550px",
+      },
       keyframes: {
         "accordion-down": {
           from: { height: 0 },