diff --git a/frontend/pages/profile/tickets/[id].vue b/frontend/pages/profile/tickets/[id].vue
index 4f02ff5..472a298 100644
--- a/frontend/pages/profile/tickets/[id].vue
+++ b/frontend/pages/profile/tickets/[id].vue
@@ -1,7 +1,198 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+// meta
+
+definePageMeta({
+    middleware: "check-is-logged-in",
+    layout: "profile",
+});
+
+// state
+
+const route = useRoute();
+
+const ticketData = ref({
+    message: "",
+    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);
+</script>
 
 <template>
-    <div></div>
+    <div class="w-full flex flex-col gap-5">
+        <ProfilePageTitle :title="`تیکت شماره ${ticketId}`" icon="bi:ticket" />
+
+        <div
+            class="flex flex-wrap items-center justify-between w-full py-4 border-b lg:px-5 border-slate-200"
+        >
+            <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"
+                >
+                    <p class="text-xs lg:text-sm text-dynamic-secondary">
+                        دسته&zwnj;بندی :
+                    </p>
+                    <p class="text-xs font-semibold lg:text-sm text-black">
+                        گیفت&zwnj;کارت
+                    </p>
+                </div>
+                <div
+                    class="flex flex-col w-full gap-2 lg:py-2 lg:pe-5 lg:w-1/3"
+                >
+                    <p class="text-xs lg:text-sm text-dynamic-secondary">
+                        وضعیت :
+                    </p>
+                    <p
+                        class="text-xs font-semibold lg:text-sm text-black text-dynamic-secondary"
+                    >
+                        بسته شده
+                    </p>
+                </div>
+                <div class="flex flex-col w-full gap-2 lg:hidden border-black">
+                    <p class="text-xs lg:text-sm text-dynamic-secondary">
+                        موضوع :
+                    </p>
+                    <p class="text-xs font-semibold lg:text-sm text-black">
+                        نمی&zwnj;دانم کد ارسال گیفت کارت خریداری شده را از کجا
+                        باید ببینم
+                    </p>
+                </div>
+                <div class="items-center justify-end hidden w-1/4 lg:flex">
+                    <NuxtLink :to="{ name: 'profile-tickets' }">
+                        <Button
+                            class="rounded-full"
+                            size="md"
+                            end-icon="bi:arrow-left"
+                        >
+                            بازگشت به تیکت ها
+                        </Button>
+                    </NuxtLink>
+                </div>
+            </div>
+        </div>
+
+        <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;دانم کد ارسال
+            گیفت کارت خریداری شده را از کجا باید ببینم
+        </div>
+
+        <div class="w-full flex flex-col gap-5 h-[32rem] overflow-y-auto">
+            <TicketBubble
+                v-for="(message, index) in messages"
+                :key="index"
+                :is_user="message.is_user"
+                :date="message.date"
+                :message="message.message"
+                :profile="message.profile"
+                :username="message.username"
+                :files="message.files"
+            />
+        </div>
+
+        <div
+            class="grid grid-cols-1 lg:grid-cols-2 gap-5 mt-5 pt-5 border-t border-slate-200"
+        >
+            <DataField id="message" :required="true" label="متن پیام">
+                <textarea
+                    v-model="ticketData.message"
+                    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"
+                    placeholder="متن تیکت را اینجا بنویسید ..."
+                />
+            </DataField>
+            <FileInput v-model="ticketData.files" />
+        </div>
+
+        <div class="w-full flex-center py-5">
+            <Button class="rounded-full px-20" end-icon="bi:send" size="md">
+                <!-- <Icon
+                    v-if="createAddressIsPending"
+                    name="svg-spinners:3-dots-bounce"
+                /> -->
+                <span>ارسال پیام</span>
+            </Button>
+        </div>
+    </div>
 </template>
 
 <style scoped></style>