diff --git a/frontend/components/products/FilterButton.vue b/frontend/components/products/FilterButton.vue
new file mode 100644
index 0000000..097aa0f
--- /dev/null
+++ b/frontend/components/products/FilterButton.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts"></script>
+
+<template>
+    <DialogRoot modal>
+        <DialogTrigger>
+            <Button
+                end-icon="ci:filter"
+                variant="secondary"
+                class="rounded-full"
+            >
+                فیلتر محصولات
+            </Button>
+        </DialogTrigger>
+        <DialogPortal to="#teleports">
+            <DialogOverlay
+                class="bg-black/60 backdrop-blur-sm data-[state=open]:animate-overlay-show fixed inset-0 z-30"
+            />
+            <DialogContent
+                class="data-[state=open]:animate-content-show absolute top-1/2 left-1/2 max-h-[85vh] w-[90vw] max-w-[450px] -translate-x-1/2 -translate-y-1/2 rounded-[6px] bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none z-[100]"
+            >
+                <DialogTitle
+                    class="flex items-center typo-h-4 text-black font-semibold"
+                >
+                    Edit profile
+                </DialogTitle>
+                <DialogDescription
+                    class="text-mauve11 mt-[10px] mb-5 text-sm leading-normal"
+                >
+                    Make changes to your profile here. Click save when you're
+                    done.
+                </DialogDescription>
+                <fieldset class="mb-[15px] flex items-center gap-5">
+                    <label
+                        class="text-black w-[90px] text-right text-sm"
+                        for="name"
+                    >
+                        Name
+                    </label>
+                    <input
+                        id="name"
+                        class="text-black bg-stone-50 shadow-green7 focus:shadow-gray-100 inline-flex h-[35px] w-full flex-1 items-center justify-center rounded-lg px-[10px] text-sm leading-none shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px]"
+                        defaultValue="Pedro Duarte"
+                    />
+                </fieldset>
+                <fieldset class="mb-[15px] flex items-center gap-5">
+                    <label
+                        class="text-black w-[90px] text-right text-sm"
+                        for="username"
+                    >
+                        Username
+                    </label>
+                    <input
+                        id="username"
+                        class="text-black bg-stone-50 shadow-green7 focus:shadow-gray-100 inline-flex h-[35px] w-full flex-1 items-center justify-center rounded-lg px-[10px] text-sm leading-none shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px]"
+                        defaultValue="@peduarte"
+                    />
+                </fieldset>
+                <div class="mt-[25px] flex justify-end">
+                    <DialogClose as-child>
+                        <button
+                            class="bg-green4 text-green11 text-sm hover:bg-green5 focus:shadow-green7 inline-flex h-[35px] items-center justify-center rounded-lg px-[15px] font-semibold leading-none focus:shadow-[0_0_0_2px] focus:outline-none"
+                        >
+                            Save changes
+                        </button>
+                    </DialogClose>
+                </div>
+                <DialogClose
+                    class="text-black hover:bg-green4 focus:shadow-green7 absolute top-[10px] right-[10px] inline-flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-full focus:shadow-[0_0_0_2px] focus:outline-none"
+                    aria-label="Close"
+                >
+                    <Icon name="ci:close" />
+                </DialogClose>
+            </DialogContent>
+        </DialogPortal>
+    </DialogRoot>
+</template>
+
+<style lang="scss" scoped></style>