diff --git a/frontend/pages/profile/tickets/index.vue b/frontend/pages/profile/tickets/index.vue
new file mode 100644
index 0000000..0941c4d
--- /dev/null
+++ b/frontend/pages/profile/tickets/index.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import TicketsTableRow from "~/components/profile/tickets/TicketsTableRow.vue";
+
+// meta
+
+definePageMeta({
+    middleware: "check-is-logged-in",
+    layout: "profile",
+});
+
+// state
+
+const filters = ref({
+    sort: undefined,
+    status: undefined,
+    search: "",
+});
+
+const tableHeads = ref([
+    "دسته بندی",
+    "موضوع",
+    "تاریخ ایجاد و بروز رسانی",
+    "وضعیت",
+    "عملیات",
+]);
+</script>
+
+<template>
+    <div class="w-full flex flex-col gap-10">
+        <ProfilePageTitle title="تیکت های شما" icon="bi:ticket" />
+
+        <div class="w-full flex flex-col gap-8">
+            <div class="w-full flex items-center justify-between px-5">
+                <div class="flex items-center justify-start gap-8">
+                    <div class="flex items-center justify-start gap-3">
+                        <span class="text-sm">ترتیب بر اساس</span>
+                        <Select
+                            :options="['جدید ترین', 'قدیمی ترین']"
+                            v-model="filters.sort!"
+                            triggerRootClass="!py-2.5"
+                            class="w-[5rem]"
+                        />
+                    </div>
+                    <div class="flex items-center justify-start gap-3">
+                        <span class="text-sm">وضعیت پرداخت</span>
+                        <Select
+                            :options="[
+                                'پرداخت شده',
+                                'در حال پردازش',
+                                'لغو شده',
+                            ]"
+                            v-model="filters.status!"
+                            triggerRootClass="!py-2.5"
+                            class="w-[5rem]"
+                        />
+                    </div>
+                </div>
+
+                <NuxtLink :to="{ name: 'profile-tickets-new' }">
+                    <Button end-icon="bi:plus" size="md" class="rounded-full">
+                        <span class="font-bold whitespace-pre">
+                            تیکت جدید
+                        </span>
+                    </Button>
+                </NuxtLink>
+            </div>
+
+            <Table>
+                <template #thead>
+                    <th
+                        v-for="(tableHead, index) in tableHeads"
+                        :key="index"
+                        scope="col"
+                        :class="
+                            [0, 1, 2].includes(index)
+                                ? 'w-3/12'
+                                : tableHeads.length - 1 == index
+                                ? 'w-1/2'
+                                : 'w-2/12'
+                        "
+                        class="px-6 py-5 text-sm font-normal"
+                    >
+                        {{ tableHead }}
+                    </th>
+                </template>
+                <template #tbody>
+                    <TicketsTableRow v-for="i in 4" />
+                </template>
+            </Table>
+        </div>
+    </div>
+</template>
+
+<style scoped></style>