diff --git a/frontend/components/cart/AddressItem.vue b/frontend/components/cart/AddressItem.vue
index a042ed9..a6a54a4 100644
--- a/frontend/components/cart/AddressItem.vue
+++ b/frontend/components/cart/AddressItem.vue
@@ -105,7 +105,7 @@ const handleDeleteAddress = (id: number) => {
         >
             <div class="w-full lg:w-9/12 overflow-hidden">
                 <div
-                    class="w-full overflow-hidden overflow-ellipsis gap-5 text-start whitespace-pre text-sm lg:text-[1rem] text-slate-700"
+                    class="w-full overflow-hidden overflow-ellipsis gap-5 text-start whitespace-pre text-sm text-slate-700"
                 >
                     {{
                         !!address
diff --git a/frontend/components/global/AvatarGroup.vue b/frontend/components/global/AvatarGroup.vue
new file mode 100644
index 0000000..6e65bad
--- /dev/null
+++ b/frontend/components/global/AvatarGroup.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+// types
+
+type Props = {
+    max: number;
+    size: string;
+    items: string[];
+};
+
+// props
+
+const props = defineProps<Props>();
+
+const { items, max } = toRefs(props);
+
+// computed
+
+const displayedAvatars = computed(() => items.value.slice(0, max.value));
+
+const remaining = computed(() => items.value.length - max.value);
+</script>
+
+<template>
+    <div class="flex items-center">
+        <div
+            v-if="remaining > 0"
+            class="flex-col-center bg-black text-white font-semibold rounded-full text-[10px] z-[1]"
+            :style="{ width: size, height: size }"
+        >
+            +{{ remaining }}
+        </div>
+        <div
+            v-for="(item, index) in displayedAvatars"
+            :key="index"
+            class="relative bg-gray-400 border border-black rounded-full -ms-2"
+            :class="index < 0 ? '' : ''"
+            :style="{ width: size, height: size, zIndex: index + 2 }"
+        >
+            <img
+                :src="item"
+                alt="avatar"
+                class="rounded-full object-cover w-full h-full"
+            />
+        </div>
+    </div>
+</template>
diff --git a/frontend/components/global/FileInput.vue b/frontend/components/global/FileInput.vue
index e0e3beb..8d0fad7 100644
--- a/frontend/components/global/FileInput.vue
+++ b/frontend/components/global/FileInput.vue
@@ -6,13 +6,7 @@ import { useToast } from "~/composables/global/useToast";
 // types
 
 type Props = {
-    modelValue: {
-        id: number;
-        file_link: string;
-        date: string;
-        size: number;
-        name: string;
-    }[];
+    modelValue: ServerFile[];
     loading?: boolean;
 };
 
diff --git a/frontend/components/global/Pagination.vue b/frontend/components/global/Pagination.vue
index 875201c..0e3ee75 100644
--- a/frontend/components/global/Pagination.vue
+++ b/frontend/components/global/Pagination.vue
@@ -34,11 +34,11 @@ const page = computed({
         v-model:page="page"
     >
         <PaginationList v-slot="{ items }" class="flex items-center gap-2">
-            <PaginationLast
-                class="px-2 h-9 font-light whitespace-nowrap flex items-center justify-center bg-transparent cursor-pointer transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
+            <PaginationFirst
+                class="px-2 h-9 font-light flex items-center whitespace-nowrap justify-center bg-transparent cursor-pointer transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
             >
-                برو آخر
-            </PaginationLast>
+                برو اول
+            </PaginationFirst>
             <PaginationNext
                 class="w-9 h-9 ml-4 flex items-center justify-center cursor-pointer hover:bg-slate-100 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
             >
@@ -73,11 +73,12 @@ const page = computed({
             >
                 <Icon name="ci:chevron-left" class="**:fill-back" size="18px" />
             </PaginationPrev>
-            <PaginationFirst
-                class="px-2 h-9 font-light flex items-center whitespace-nowrap justify-center bg-transparent cursor-pointer transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
+
+            <PaginationLast
+                class="px-2 h-9 font-light whitespace-nowrap flex items-center justify-center bg-transparent cursor-pointer transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
             >
-                برو اول
-            </PaginationFirst>
+                برو آخر
+            </PaginationLast>
         </PaginationList>
     </PaginationRoot>
 </template>
diff --git a/frontend/components/global/Select.vue b/frontend/components/global/Select.vue
index 45f9d9c..459509b 100644
--- a/frontend/components/global/Select.vue
+++ b/frontend/components/global/Select.vue
@@ -9,6 +9,7 @@ type Props = {
     options?: string[];
     placeholder?: string;
     triggerRootClass?: string;
+    loading?: boolean;
 };
 
 type Emits = {
@@ -21,6 +22,7 @@ const props = withDefaults(defineProps<Props>(), {
     variant: "solid",
     disabled: false,
     placeholder: "وارد نشده",
+    loading: false,
 });
 
 const { modelValue, variant, error, triggerRootClass } = toRefs(props);
@@ -53,15 +55,25 @@ const classes = computed(() => {
 </script>
 
 <template>
-    <SelectRoot v-model="selectedValue" dir="rtl">
+    <SelectRoot
+        v-model="selectedValue"
+        dir="rtl"
+        :disabled="disabled || loading"
+    >
         <SelectTrigger :class="classes">
+            <slot v-if="!!$slots.trigger" name="trigger" />
+
             <SelectValue
+                v-else
                 :placeholder="placeholder"
                 v-bind="$attrs"
-                :class="selectedValue ? 'text-black' : 'text-slate-400'"
+                :class="selectedValue ? '!text-black' : 'text-slate-400'"
                 class="font-iran-yekan-x text-sm text-start placeholder-slate-400"
             />
-            <Icon name="bi:chevron-down" size="16" />
+            <Icon
+                :name="loading ? 'svg-spinners:3-dots-fade' : 'bi:chevron-down'"
+                size="16"
+            />
         </SelectTrigger>
 
         <SelectPortal>
diff --git a/frontend/components/global/Textarea.vue b/frontend/components/global/Textarea.vue
new file mode 100644
index 0000000..8765a51
--- /dev/null
+++ b/frontend/components/global/Textarea.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+type Props = {
+    variant?: "solid" | "outlined";
+    disabled?: boolean;
+    error?: boolean;
+    message?: string;
+    placeholder?: string;
+    modelValue: string;
+};
+
+// props
+
+const props = withDefaults(defineProps<Props>(), {
+    variant: "solid",
+    disabled: false,
+    placeholder: "وارد نشده",
+});
+const { variant, message, error, disabled, modelValue } = toRefs(props);
+
+// emits
+
+const emit = defineEmits(["update:modelValue"]);
+
+// state
+
+const inputRef = ref<HTMLInputElement | null>(null);
+
+// computed
+
+const value = computed({
+    get: () => modelValue.value ?? "",
+    set: (value) => emit("update:modelValue", value),
+});
+
+const classes = computed(() => {
+    return [
+        "flex items-start text-black justify-between cursor-text resize-none transition-all border-[1.5px] gap-3 typo-label-md px-4 py-3.5 selection:bg-slate-100 rounded-100 transition-all !text-sm",
+        {
+            "input-solid": variant.value === "solid",
+            "input-outlined": variant.value === "outlined",
+            "input-effects": !error.value,
+            [variant.value === "solid"
+                ? "input-solid-error"
+                : "input-outlined-error"]: error.value,
+        },
+    ];
+});
+</script>
+
+<template>
+    <textarea
+        v-model="value"
+        ref="inputRef"
+        v-bind="$attrs"
+        :class="classes"
+        class="size-full outline-none placeholder-slate-400"
+        :placeholder="placeholder"
+    />
+</template>
diff --git a/frontend/composables/api/orders/useGetOrdersList.ts b/frontend/composables/api/orders/useGetOrdersList.ts
new file mode 100644
index 0000000..f63798c
--- /dev/null
+++ b/frontend/composables/api/orders/useGetOrdersList.ts
@@ -0,0 +1,30 @@
+// imports
+
+import { useQuery } from "@tanstack/vue-query";
+import { API_ENDPOINTS, QUERY_KEYS } from "~/constants";
+
+// types
+
+export type GetOrdersListResponse = Order[];
+
+const useGetOrdersList = () => {
+    // state
+
+    const { $axios: axios } = useNuxtApp();
+
+    // methods
+
+    const handleGetOrdersList = async () => {
+        const { data } = await axios.get<GetOrdersListResponse>(
+            API_ENDPOINTS.orders.get_all
+        );
+        return data;
+    };
+
+    return useQuery({
+        queryKey: [QUERY_KEYS.tickets],
+        queryFn: () => handleGetOrdersList(),
+    });
+};
+
+export default useGetOrdersList;
diff --git a/frontend/composables/api/tickets/useCreateTicket.ts b/frontend/composables/api/tickets/useCreateTicket.ts
index 353e1cc..6c65edc 100644
--- a/frontend/composables/api/tickets/useCreateTicket.ts
+++ b/frontend/composables/api/tickets/useCreateTicket.ts
@@ -10,13 +10,7 @@ export type CreateTicketRequest = {
     order: number | undefined;
     subject: string;
     content: string;
-    attachments: {
-        id: number;
-        file_link: string;
-        date: string;
-        size: number;
-        name: string;
-    }[];
+    attachments: ServerFile[];
 };
 
 const useCreateTicket = () => {
@@ -28,9 +22,15 @@ const useCreateTicket = () => {
 
     const handleCreateTicket = async (params: CreateTicketRequest) => {
         const { data } = await axios.post(
-            API_ENDPOINTS.account.address.update,
+            API_ENDPOINTS.tickets.create,
             {
-                ...params,
+                message: {
+                    content: params.content,
+                    attachments: params.attachments,
+                },
+                subject: params.subject,
+                ticket_category: params.ticket_category,
+                order: params.order,
             },
             {
                 headers: {
diff --git a/frontend/composables/api/tickets/useGetAllTickets.ts b/frontend/composables/api/tickets/useGetAllTickets.ts
index 81c7c27..9c26d2d 100644
--- a/frontend/composables/api/tickets/useGetAllTickets.ts
+++ b/frontend/composables/api/tickets/useGetAllTickets.ts
@@ -5,11 +5,11 @@ import { API_ENDPOINTS, QUERY_KEYS } from "~/constants";
 
 // types
 
-export type GetAllTicketsResponse = ApiPaginated<Ticket>;
+export type GetAllTicketsResponse = ApiPaginated<Omit<Ticket, "messages">>;
 
 export type GetAllTicketsFilters = {
     sort: string | undefined;
-    filter: string | undefined;
+    status: string | undefined;
     page: string | string[];
 };
 
@@ -26,9 +26,9 @@ const useGetAllTickets = (params: Ref<GetAllTicketsFilters>) => {
             {
                 params: {
                     sort: params.sort,
-                    filter: params.filter,
-                    offset: Number(params.page) * 10 - 10,
-                    limit: 10,
+                    filter: params.status,
+                    offset: Number(params.page) * 7 - 7,
+                    limit: 7,
                 },
             }
         );
diff --git a/frontend/composables/api/tickets/useGetTicket.ts b/frontend/composables/api/tickets/useGetTicket.ts
new file mode 100644
index 0000000..586af6b
--- /dev/null
+++ b/frontend/composables/api/tickets/useGetTicket.ts
@@ -0,0 +1,30 @@
+// imports
+
+import { useQuery } from "@tanstack/vue-query";
+import { API_ENDPOINTS, QUERY_KEYS } from "~/constants";
+
+// types
+
+export type GetTicketResponse = Ticket;
+
+const useGetTicket = (id: ComputedRef<number | string>) => {
+    // state
+
+    const { $axios: axios } = useNuxtApp();
+
+    // methods
+
+    const handleGetTicket = async (id: string | number | undefined) => {
+        const { data } = await axios.get<GetTicketResponse>(
+            `${API_ENDPOINTS.tickets.get_one}/${id}`
+        );
+        return data;
+    };
+
+    return useQuery({
+        queryKey: [QUERY_KEYS.ticket, id],
+        queryFn: () => handleGetTicket(id.value),
+    });
+};
+
+export default useGetTicket;
diff --git a/frontend/constants/index.ts b/frontend/constants/index.ts
index 4a835d5..b301e58 100644
--- a/frontend/constants/index.ts
+++ b/frontend/constants/index.ts
@@ -39,6 +39,10 @@ export const API_ENDPOINTS = {
         create: "/tickets/create",
         upload_attachment: "/tickets/attachment/create",
         delete_attachment: "/tickets/attachment/delete",
+        get_one: "/tickets",
+    },
+    orders: {
+        get_all: "/order/list",
     },
 };
 
@@ -54,6 +58,8 @@ export const QUERY_KEYS = {
     categories: "categories",
     addresses: "addresses",
     tickets: "tickets",
+    ticket: "ticket",
+    orders: "orders",
 };
 
 export const MUTATION_KEYS = {
diff --git a/frontend/pages/products.vue b/frontend/pages/products.vue
index f4290ba..3dd1d62 100644
--- a/frontend/pages/products.vue
+++ b/frontend/pages/products.vue
@@ -128,7 +128,7 @@ watch(
                     />
                 </li>
             </ul>
-            <div v-if="products!.length > 10" class="w-full flex-center py-10">
+            <div v-if="data?.count > 10" class="w-full flex-center py-10">
                 <Pagination :items="paginationData" :total="data?.count" />
             </div>
         </div>
diff --git a/frontend/pages/profile/tickets/[id].vue b/frontend/pages/profile/tickets/[id].vue
index 472a298..272e4a8 100644
--- a/frontend/pages/profile/tickets/[id].vue
+++ b/frontend/pages/profile/tickets/[id].vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import useGetTicket from "~/composables/api/tickets/useGetTicket";
+
 // meta
 
 definePageMeta({
@@ -15,74 +17,13 @@ const ticketData = ref({
     files: [],
 });
 
-const messages = [
-    {
-        is_user: true,
-        date: "2023-10-15T14:30:00Z",
-        username: "JohnDoe",
-        message: "Hey, did you get a chance to review the design files I sent?",
-        profile: "https://example.com/profiles/johndoe.jpg",
-        files: ["design-draft-1.pdf", "design-draft-2.pdf"],
-    },
-    {
-        is_user: false,
-        date: "2023-10-15T14:35:00Z",
-        username: "JaneSmith",
-        message:
-            "Yes, I just finished reviewing them. The second draft looks great!",
-        profile: "https://example.com/profiles/janesmith.jpg",
-        files: [],
-    },
-    {
-        is_user: true,
-        date: "2023-10-15T14:40:00Z",
-        username: "JohnDoe",
-        message:
-            "Awesome! Let me know if you need any changes before we finalize it.",
-        profile: "https://example.com/profiles/johndoe.jpg",
-        files: ["final-design-notes.txt"],
-    },
-    {
-        is_user: false,
-        date: "2023-10-15T14:35:00Z",
-        username: "JaneSmith",
-        message:
-            "Yes, I just finished reviewing them. The second draft looks great!",
-        profile: "https://example.com/profiles/janesmith.jpg",
-        files: [],
-    },
-    {
-        is_user: true,
-        date: "2023-10-15T14:40:00Z",
-        username: "JohnDoe",
-        message:
-            "Awesome! Let me know if you need any changes before we finalize it.",
-        profile: "https://example.com/profiles/johndoe.jpg",
-        files: ["final-design-notes.txt"],
-    },
-    {
-        is_user: false,
-        date: "2023-10-15T14:35:00Z",
-        username: "JaneSmith",
-        message:
-            "Yes, I just finished reviewing them. The second draft looks great!",
-        profile: "https://example.com/profiles/janesmith.jpg",
-        files: [],
-    },
-    {
-        is_user: true,
-        date: "2023-10-15T14:40:00Z",
-        username: "JohnDoe",
-        message:
-            "Awesome! Let me know if you need any changes before we finalize it.",
-        profile: "https://example.com/profiles/johndoe.jpg",
-        files: ["final-design-notes.txt"],
-    },
-];
-
 // computed
 
-const ticketId = computed(() => route.params.id);
+const ticketId = computed(() => route.params.id as string);
+
+// queries
+
+const { data: ticket, isLoading: ticketIsLoading } = useGetTicket(ticketId);
 </script>
 
 <template>
@@ -95,16 +36,6 @@ const ticketId = computed(() => route.params.id);
             <div
                 class="flex flex-col items-start w-1/2 gap-4 lg:gap-5 lg:w-full lg:items-center lg:flex-row"
             >
-                <div
-                    class="flex flex-col w-full gap-2 lg:py-2 lg:pe-5 lg:w-1/3 lg:border-e border-slate-200"
-                >
-                    <p class="text-xs lg:text-sm text-dynamic-secondary">
-                        شماره تیکت :
-                    </p>
-                    <p class="text-xs font-semibold lg:text-sm text-black">
-                        634932
-                    </p>
-                </div>
                 <div
                     class="flex flex-col w-full gap-2 lg:py-2 lg:pe-5 lg:w-1/3 lg:border-e border-slate-200"
                 >
@@ -112,7 +43,7 @@ const ticketId = computed(() => route.params.id);
                         دسته&zwnj;بندی :
                     </p>
                     <p class="text-xs font-semibold lg:text-sm text-black">
-                        گیفت&zwnj;کارت
+                        {{ ticket?.ticket_category }}
                     </p>
                 </div>
                 <div
@@ -124,7 +55,7 @@ const ticketId = computed(() => route.params.id);
                     <p
                         class="text-xs font-semibold lg:text-sm text-black text-dynamic-secondary"
                     >
-                        بسته شده
+                        {{ ticket?.status }}
                     </p>
                 </div>
                 <div class="flex flex-col w-full gap-2 lg:hidden border-black">
@@ -132,8 +63,7 @@ const ticketId = computed(() => route.params.id);
                         موضوع :
                     </p>
                     <p class="text-xs font-semibold lg:text-sm text-black">
-                        نمی&zwnj;دانم کد ارسال گیفت کارت خریداری شده را از کجا
-                        باید ببینم
+                        {{ ticket?.subject }}
                     </p>
                 </div>
                 <div class="items-center justify-end hidden w-1/4 lg:flex">
@@ -153,12 +83,12 @@ const ticketId = computed(() => route.params.id);
         <div
             class="hidden w-full text-sm px-5 pb-8 mt-3 border-b lg:block text-md border-slate-200"
         >
-            <span class="text-black/50"> موضوع : </span> نمی&zwnj;دانم کد ارسال
-            گیفت کارت خریداری شده را از کجا باید ببینم
+            <span class="text-black/50"> موضوع : </span>
+            {{ ticket?.subject }}
         </div>
 
         <div class="w-full flex flex-col gap-5 h-[32rem] overflow-y-auto">
-            <TicketBubble
+            <!-- <TicketBubble
                 v-for="(message, index) in messages"
                 :key="index"
                 :is_user="message.is_user"
@@ -167,7 +97,7 @@ const ticketId = computed(() => route.params.id);
                 :profile="message.profile"
                 :username="message.username"
                 :files="message.files"
-            />
+            /> -->
         </div>
 
         <div
diff --git a/frontend/pages/profile/tickets/index.vue b/frontend/pages/profile/tickets/index.vue
index 363050c..13d71a6 100644
--- a/frontend/pages/profile/tickets/index.vue
+++ b/frontend/pages/profile/tickets/index.vue
@@ -14,12 +14,14 @@ definePageMeta({
 
 // state
 
-const params = useUrlSearchParams();
+const params: GetAllTicketsFilters = useUrlSearchParams("history");
 
-const filters = ref<GetAllTicketsFilters>({
-    sort: undefined,
-    filter: undefined,
-    page: params.page ?? 1,
+const filters = computed(() => {
+    return {
+        sort: params.sort ?? "created_at",
+        status: params.status ?? "",
+        page: params.page ?? 1,
+    };
 });
 
 const tableHeads = ref([
@@ -30,9 +32,39 @@ const tableHeads = ref([
     "عملیات",
 ]);
 
+const sortFilters = ref([
+    {
+        title: "جدید ترین",
+        value: "created_at",
+    },
+    {
+        title: "قدیمی ترین",
+        value: "-created_at",
+    },
+]);
+
+const statusFilters = ref([
+    {
+        title: "پاسخ داده شده",
+        value: "resolved",
+    },
+    {
+        title: "در حال پردازش",
+        value: "in_progress",
+    },
+    {
+        title: "بسته شده",
+        value: "closed",
+    },
+]);
+
+// provide / inject
+
+provide("params", params);
+
 // queries
 
-const { data, isLoading: ticketsIsLoading } = useGetAllTickets(filters);
+const { data, isPending: ticketsIsPending } = useGetAllTickets(filters);
 
 // computed
 
@@ -40,10 +72,10 @@ const tickets = computed(() => {
     return data.value?.results.flat();
 });
 
-const hasTickets = computed(() => tickets.value?.length > 0);
+const hasTickets = computed(() => data.value?.count > 0);
 
 const paginationData = computed(() => {
-    return tickets!.value?.results.map((_, i: number) => {
+    return data.value?.results.map((_, i: number) => {
         return { type: "page", value: i };
     });
 });
@@ -56,33 +88,67 @@ const paginationData = computed(() => {
         <div class="w-full flex flex-col gap-5">
             <div class="w-full flex items-center justify-between px-5">
                 <div class="flex items-center justify-start gap-8">
-                    <div
-                        v-if="hasTickets"
-                        class="flex items-center justify-start gap-3"
-                    >
+                    <div class="flex items-center justify-start gap-3">
                         <span class="text-sm">ترتیب بر اساس</span>
                         <Select
-                            :options="['جدید ترین', 'قدیمی ترین']"
-                            v-model="filters.sort!"
+                            v-model="params.sort!"
                             triggerRootClass="!py-2.5"
-                            class="w-[5rem]"
-                        />
+                            class="w-[6rem]"
+                        >
+                            <template #content>
+                                <SelectGroup>
+                                    <SelectItem
+                                        v-for="(category, index) in sortFilters"
+                                        :key="index"
+                                        class="text-xs leading-none w-full rounded-sm py-5 flex items-center justify-between h-[25px] pr-[12px] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-slate-300 data-[highlighted]:text-black"
+                                        :value="category.value"
+                                    >
+                                        <SelectItemIndicator
+                                            class="absolute left-0 w-[25px] inline-flex items-center justify-center"
+                                        >
+                                            <Icon name="bi:check" size="20" />
+                                        </SelectItemIndicator>
+                                        <SelectItemText
+                                            class="text-end font-iran-yekan-x text-sm"
+                                        >
+                                            {{ category.title }}
+                                        </SelectItemText>
+                                    </SelectItem>
+                                </SelectGroup>
+                            </template>
+                        </Select>
                     </div>
-                    <div
-                        v-if="hasTickets"
-                        class="flex items-center justify-start gap-3"
-                    >
-                        <span class="text-sm">وضعیت پرداخت</span>
+                    <div class="flex items-center justify-start gap-3">
+                        <span class="text-sm">وضعیت</span>
                         <Select
-                            :options="[
-                                'پرداخت شده',
-                                'در حال پردازش',
-                                'لغو شده',
-                            ]"
-                            v-model="filters.filter!"
+                            v-model="params.status!"
                             triggerRootClass="!py-2.5"
-                            class="w-[5rem]"
-                        />
+                            class="w-[6rem]"
+                        >
+                            <template #content>
+                                <SelectGroup>
+                                    <SelectItem
+                                        v-for="(
+                                            category, index
+                                        ) in statusFilters"
+                                        :key="index"
+                                        class="text-xs leading-none w-full rounded-sm py-5 flex items-center justify-between h-[25px] pr-[12px] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-slate-300 data-[highlighted]:text-black"
+                                        :value="category.value"
+                                    >
+                                        <SelectItemIndicator
+                                            class="absolute left-0 w-[25px] inline-flex items-center justify-center"
+                                        >
+                                            <Icon name="bi:check" size="20" />
+                                        </SelectItemIndicator>
+                                        <SelectItemText
+                                            class="text-end font-iran-yekan-x text-sm"
+                                        >
+                                            {{ category.title }}
+                                        </SelectItemText>
+                                    </SelectItem>
+                                </SelectGroup>
+                            </template>
+                        </Select>
                     </div>
                 </div>
 
@@ -96,7 +162,7 @@ const paginationData = computed(() => {
             </div>
 
             <Placeholder
-                v-if="!hasTickets && !ticketsIsLoading"
+                v-if="!hasTickets && !ticketsIsPending"
                 class="!w-full !py-[5rem]"
                 icon="bi:ticket"
                 title="تیکتی یافت نشد"
@@ -121,7 +187,7 @@ const paginationData = computed(() => {
                     </th>
                 </template>
                 <template #tbody>
-                    <template v-if="ticketsIsLoading">
+                    <template v-if="ticketsIsPending">
                         <TicketsTableRowLoading v-for="i in 5" />
                     </template>
                     <template v-else>
@@ -134,7 +200,7 @@ const paginationData = computed(() => {
                 </template>
             </Table>
 
-            <div v-if="tickets?.length > 10" class="w-full flex-center py-10">
+            <div v-if="data?.count > 7" class="w-full flex-center py-10">
                 <Pagination :items="paginationData" :total="data?.count" />
             </div>
         </div>
diff --git a/frontend/pages/profile/tickets/new.vue b/frontend/pages/profile/tickets/new.vue
index e409be9..9b1f04b 100644
--- a/frontend/pages/profile/tickets/new.vue
+++ b/frontend/pages/profile/tickets/new.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
 // imports
 
+import useGetOrdersList from "~/composables/api/orders/useGetOrdersList";
 import useCreateTicket, {
     type CreateTicketRequest,
 } from "~/composables/api/tickets/useCreateTicket";
 import useUploadAttachment from "~/composables/api/tickets/useUploadAttachment";
 import { useToast } from "~/composables/global/useToast";
 import { QUERY_KEYS } from "~/constants";
+import useVuelidate from "@vuelidate/core";
+import { helpers, required, minLength, email } from "@vuelidate/validators";
 
 // meta
 
@@ -71,12 +74,49 @@ const ticketData = ref<CreateTicketRequest>({
 
 // queries
 
+const { data: orders, isLoading: ordersIsLoading } = useGetOrdersList();
+
 const { mutateAsync: createTicket, isPending: createTicketIsPending } =
     useCreateTicket();
 
-const { mutate: uploadAttachment, isPending: uploadAttachmentIsPending } =
+const { mutateAsync: uploadAttachment, isPending: uploadAttachmentIsPending } =
     useUploadAttachment();
 
+// computed
+
+const formRules = computed(() => {
+    return {
+        ticket_category: {
+            required: helpers.withMessage(
+                "فیلد دسته بندی الزامی می باشد",
+                required
+            ),
+        },
+        subject: {
+            required: helpers.withMessage(
+                "فیلد عنوان تیکت الزامی می باشد",
+                required
+            ),
+            minLength: helpers.withMessage(
+                "فیلد عنوان تیکت حداقل ۵ کرکتر می باشد",
+                minLength(5)
+            ),
+        },
+        content: {
+            required: helpers.withMessage(
+                "فیلد متن تیکت الزامی می باشد",
+                required
+            ),
+            minLength: helpers.withMessage(
+                "فیلد متن تیکت حداقل ۵ کرکتر می باشد",
+                minLength(5)
+            ),
+        },
+    };
+});
+
+const formValidator$ = useVuelidate(formRules, ticketData);
+
 // methods
 
 const handleUploadAttachment = (file: File) => {
@@ -101,35 +141,38 @@ const handleUploadAttachment = (file: File) => {
     );
 };
 
-const handleSubmit = () => {
-    createTicket(
-        { ...ticketData.value },
-        {
-            onSuccess: () => {
-                router.push({ name: "profile-tickets" });
-                queryClient.invalidateQueries({
-                    queryKey: [QUERY_KEYS.tickets],
-                });
-                addToast({
-                    message: "تیکت شما با موفقیت ثبت شد",
-                    options: {
-                        status: "success",
-                        description:
-                            "پس از بررسی پشتیبانی به شما اطلاع رسانی می شود",
-                    },
-                });
-            },
-            onError: () => {
-                addToast({
-                    message: "خطایی در ثبت تیکت رخ داد",
-                    options: {
-                        status: "success",
-                        description: "لطفا مجدد تلاش کنید",
-                    },
-                });
-            },
-        }
-    );
+const handleSubmit = async () => {
+    await formValidator$.value.$validate();
+    if (!formValidator$.value.$errors.length) {
+        createTicket(
+            { ...ticketData.value },
+            {
+                onSuccess: () => {
+                    router.push({ name: "profile-tickets" });
+                    queryClient.invalidateQueries({
+                        queryKey: [QUERY_KEYS.tickets],
+                    });
+                    addToast({
+                        message: "تیکت شما با موفقیت ثبت شد",
+                        options: {
+                            status: "success",
+                            description:
+                                "پس از بررسی پشتیبانی به شما اطلاع رسانی می شود",
+                        },
+                    });
+                },
+                onError: () => {
+                    addToast({
+                        message: "خطایی در ثبت تیکت رخ داد",
+                        options: {
+                            status: "success",
+                            description: "لطفا مجدد تلاش کنید",
+                        },
+                    });
+                },
+            }
+        );
+    }
 };
 </script>
 
@@ -150,10 +193,16 @@ const handleSubmit = () => {
                 </NuxtLink>
             </template>
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
-                <DataField id="category" :required="true" label="دسته بندی">
+                <DataField
+                    id="category"
+                    :required="true"
+                    label="دسته بندی"
+                    :error="formValidator$.ticket_category"
+                >
                     <Select
                         placeholder="انتخاب کنید"
                         variant="outlined"
+                        :error="formValidator$.ticket_category.$error"
                         v-model="ticketData.ticket_category"
                     >
                         <template #content>
@@ -186,26 +235,65 @@ const handleSubmit = () => {
                         placeholder="انتخاب کنید"
                         variant="outlined"
                         v-model="ticketData.order"
+                        :loading="ordersIsLoading"
                     >
+                        <template #trigger>
+                            <SelectValue
+                                :class="
+                                    ticketData.order
+                                        ? 'text-black'
+                                        : 'text-slate-400'
+                                "
+                                class="font-iran-yekan-x text-sm text-start placeholder-slate-400"
+                            >
+                                {{
+                                    ticketData.order
+                                        ? `شماره سفارش : ${ticketData.order}`
+                                        : "وارد نشده"
+                                }}
+                            </SelectValue>
+                        </template>
+
                         <template #content>
                             <SelectGroup>
                                 <SelectItem
-                                    v-for="(
-                                        category, index
-                                    ) in ticketCategories"
+                                    v-for="(order, index) in orders"
                                     :key="index"
-                                    class="text-xs leading-none w-full rounded-sm py-5 flex items-center justify-between h-[25px] pr-[12px] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-slate-300 data-[highlighted]:text-black"
-                                    :value="category.value"
+                                    class="text-xs leading-none w-full rounded-sm py-5 flex items-center justify-between h-[25px] px-[12px] shrink-0 relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-slate-300 data-[highlighted]:text-black"
+                                    :value="order.id"
                                 >
-                                    <SelectItemIndicator
-                                        class="absolute left-0 w-[25px] inline-flex items-center justify-center"
-                                    >
-                                        <Icon name="bi:check" size="20" />
-                                    </SelectItemIndicator>
                                     <SelectItemText
-                                        class="text-end font-iran-yekan-x text-sm"
+                                        class="w-full text-end font-iran-yekan-x text-sm flex items-center justify-between"
                                     >
-                                        {{ category.title }}
+                                        <div class="flex items-center gap-4">
+                                            <AvatarGroup
+                                                :items="[
+                                                    'https://c262408.parspack.net/media/profile_photos/Jackie_Robinson_NPG_97_135.jpg?AWSAccessKeyId=mtiSN2JWjWgyfr2u&Signature=mlUzygzyg2gQD7B5STTlgM2N%2FUM%3D&Expires=1740517316',
+                                                    'https://c262408.parspack.net/media/profile_photos/Jackie_Robinson_NPG_97_135.jpg?AWSAccessKeyId=mtiSN2JWjWgyfr2u&Signature=mlUzygzyg2gQD7B5STTlgM2N%2FUM%3D&Expires=1740517316',
+                                                    'https://c262408.parspack.net/media/profile_photos/Jackie_Robinson_NPG_97_135.jpg?AWSAccessKeyId=mtiSN2JWjWgyfr2u&Signature=mlUzygzyg2gQD7B5STTlgM2N%2FUM%3D&Expires=1740517316',
+                                                ]"
+                                                :max="2"
+                                                size="32px"
+                                            />
+
+                                            <div
+                                                class="flex flex-col items-start gap-1 text-[10px]"
+                                            >
+                                                <span
+                                                    >{{
+                                                        order.count
+                                                    }}
+                                                    محصول</span
+                                                >
+                                                <span>
+                                                    شماره سفارش : {{ order.id }}
+                                                </span>
+                                            </div>
+                                        </div>
+
+                                        <span>
+                                            {{ order.status }}
+                                        </span>
                                     </SelectItemText>
                                 </SelectItem>
                             </SelectGroup>
@@ -217,17 +305,26 @@ const handleSubmit = () => {
                     :required="true"
                     label="عنوان تیکت"
                     class="col-span-full"
+                    :error="formValidator$.subject"
                 >
                     <Input
                         v-model="ticketData.subject"
                         placeholder="عنوان تیکت را اینجا بنویسید ..."
                         variant="outlined"
+                        :error="formValidator$.subject.$error"
                     />
                 </DataField>
-                <DataField id="message" :required="true" label="متن تیکت">
-                    <textarea
+                <DataField
+                    id="message"
+                    :required="true"
+                    label="متن تیکت"
+                    :error="formValidator$.content"
+                >
+                    <Textarea
                         v-model="ticketData.content"
-                        class="w-full bg-white border-[1.5px] border-slate-200 rounded-xl text-xs lg:text-sm p-5 text-black h-[10rem] lg:h-[20rem] transition resize-none outline-none focus:!border-black"
+                        :error="formValidator$.content.$error"
+                        class="h-[10rem] lg:h-[20rem]"
+                        variant="outlined"
                         placeholder="متن تیکت را اینجا بنویسید ..."
                     />
                 </DataField>
@@ -239,10 +336,18 @@ const handleSubmit = () => {
             </div>
         </ProfileSection>
         <div class="w-full flex-center py-5">
-            <Button class="rounded-full px-20" end-icon="bi:send" size="md">
+            <Button
+                @click="handleSubmit"
+                class="rounded-full w-[14rem] h-11"
+                size="md"
+            >
                 <Icon
                     v-if="createTicketIsPending"
-                    name="svg-spinners:3-dots-bounce"
+                    :name="
+                        createTicketIsPending
+                            ? 'svg-spinners:3-dots-bounce'
+                            : 'bi:send'
+                    "
                 />
                 <span v-else>ارسال تیکت</span>
             </Button>
diff --git a/frontend/types/global.d.ts b/frontend/types/global.d.ts
index 16ca7f9..10f0cb4 100644
--- a/frontend/types/global.d.ts
+++ b/frontend/types/global.d.ts
@@ -25,71 +25,73 @@ declare global {
     };
 
     type ProductVariantAttribute = {
-        "id": number,
-        "attribute_type": {
-            "id": number,
-            "name": string
-        },
-        "value": string
-    }
+        id: number;
+        attribute_type: {
+            id: number;
+            name: string;
+        };
+        value: string;
+    };
 
     type ProductImage = {
-        "id": number,
-        "name": string,
-        "image": string
-    }
-
+        id: number;
+        name: string;
+        image: string;
+    };
 
     type ProductDetailItem = {
-        "id": number,
-        "title": string,
-        "detail_text1": string,
-        "detail_text2": string,
-        "detail_text3": string,
-        "detail_text4": string
-    }
+        id: number;
+        title: string;
+        detail_text1: string;
+        detail_text2: string;
+        detail_text3: string;
+        detail_text4: string;
+    };
 
     type ProductDetail = {
-        "id": number,
-        "detail": ProductDetailItem[],
-        "detail_category": number
-    }
+        id: number;
+        detail: ProductDetailItem[];
+        detail_category: number;
+    };
 
     type ProductInPackItem = {
-        "id": number,
-        "item_title": string,
-        "cover": string
-    }
+        id: number;
+        item_title: string;
+        cover: string;
+    };
 
     type ProductVariant = {
-        "id": number,
-        "product_attributes": ProductVariantAttribute[],
-        "price": string,
-        "in_pack_items": ProductInPackItem[],
-        "details": ProductDetail[],
-        "images": ProductImage[],
-        "in_stock": number,
-        "discount": number,
-        "color": string,
-        "video": string | null
+        id: number;
+        product_attributes: ProductVariantAttribute[];
+        price: string;
+        in_pack_items: ProductInPackItem[];
+        details: ProductDetail[];
+        images: ProductImage[];
+        in_stock: number;
+        discount: number;
+        color: string;
+        video: string | null;
     };
 
     type Product = {
-        "id": number,
-        "variants": ProductVariant[],
-        "related_products": ProductListItem[],
-        "name": string,
-        "description": string,
-        "rating": number,
-        "slug": string,
-        "meta_description": string | null,
-        "meta_keywords": string | null,
-        "meta_rating": number,
-        "category": number,
-        "colors": string[]
-    }
+        id: number;
+        variants: ProductVariant[];
+        related_products: ProductListItem[];
+        name: string;
+        description: string;
+        rating: number;
+        slug: string;
+        meta_description: string | null;
+        meta_keywords: string | null;
+        meta_rating: number;
+        category: number;
+        colors: string[];
+    };
 
-    type ProductListItem = Pick<Product, "id" | "variants" | "name" | "rating" | "slug" | "category" | "colors">
+    type ProductListItem = Pick<
+        Product,
+        "id" | "variants" | "name" | "rating" | "slug" | "category" | "colors"
+    >;
 
     type Article = {
         id: number;
@@ -166,12 +168,40 @@ declare global {
         onClick?: () => void;
     };
 
+    type Order = {
+        id: number;
+        count: number;
+        images: string[];
+        discount_code: string | null;
+        status: string;
+        is_paid: boolean;
+        created_at: string | null;
+        address: Address | null;
+    };
+
+    type ServerFile = {
+        id: number;
+        file_link: string;
+        date: string;
+        size: number;
+        name: string;
+    };
+
+    type TicketMessage = {
+        id: number;
+        content: string;
+        created_at: string;
+        attachments: ServerFile[];
+    };
+
     type Ticket = {
         id: number;
+        messages: TicketMessage[];
         subject: string;
         ticket_category: string;
         status: string;
         created_at: string;
         updated_at: string;
+        order: Order;
     };
 }