diff --git a/frontend/pages/profile/index.vue b/frontend/pages/profile/index.vue
index 83baddf..e64b2ff 100644
--- a/frontend/pages/profile/index.vue
+++ b/frontend/pages/profile/index.vue
@@ -1,14 +1,158 @@
 <script setup lang="ts">
+// imports
+
+import useGetAccount from "~/composables/api/account/useGetAccount";
+
 // meta
 
 definePageMeta({
     middleware: "check-is-logged-in",
     layout: "profile",
 });
+
+// state
+
+const personalData = ref({
+    name: "",
+    last_name: "",
+    phone: "",
+    gender: undefined,
+    email: "",
+    birthDate: "",
+});
+
+const alises = ref([
+    "شکارچی",
+    "آیفون باز",
+    "خوش سلیقه",
+    "دست و دلباز",
+    "چرم باز",
+]);
+
+// queries
+
+const { data: account } = useGetAccount();
 </script>
 
 <template>
-    <div></div>
+    <div class="w-full flex flex-col gap-10">
+        <ProfilePageTitle title="پروفایل" icon="bi:person-vcard" />
+
+        <div class="flex flex-col gap-6">
+            <div
+                class="w-full flex items-center justify-between border p-6 rounded-xl border-slate-200"
+            >
+                <div class="flex items-center justify-start gap-5 w-8/12">
+                    <div
+                        class="size-32 shrink-0 rounded-full border border-slate-200 flex-center relative"
+                    >
+                        <Avatar
+                            :src="account!.profile_photo"
+                            :alt="
+                                account?.first_name && account?.last_name
+                                    ? `${account?.first_name.charAt(
+                                          0
+                                      )} ${account?.last_name.charAt(0)}`
+                                    : 'بدون نام کاربری'
+                            "
+                        />
+
+                        <PictureModal />
+                    </div>
+
+                    <div class="flex flex-col gap-3">
+                        <span class="typo-sub-h-lg"
+                            >{{ account?.first_name }}
+                            {{ account?.last_name }}</span
+                        >
+                        <span class="typo-sub-h-sm font-light text-slate-600">
+                            با اولین خریدتون هوش مصنوعی وبسایتمون واستون یک
+                            بایوگرافی درست میکنه :)
+                        </span>
+                        <span
+                            class="flex-center border border-yellow-500 pe-3.5 ps-1 w-max rounded-full"
+                        >
+                            <div class="rounded-full p-2">
+                                <Icon
+                                    name="bi:patch-check"
+                                    class="**:fill-yellow-400"
+                                    size="20"
+                                />
+                            </div>
+                            <span class="text-xs text-yellow-500"
+                                >جزو ۳ مشتری برتر</span
+                            >
+                        </span>
+                    </div>
+                </div>
+
+                <div class="flex flex-col items-start gap-3 w-4/12">
+                    <span class="typo-sub-h-lg">لقب های شما</span>
+                    <span class="flex w-full flex-wrap gap-2">
+                        <span
+                            v-for="(alise, index) in alises"
+                            :key="index"
+                            class="flex-center bg-slate-50 border border-slate-200 py-2 px-3 w-max rounded-full"
+                        >
+                            <span class="text-xs text-black">{{ alise }}</span>
+                        </span>
+                    </span>
+                </div>
+            </div>
+            <ProfileSection title="اطلاعات شما">
+                <div
+                    class="w-full grid grid-cols-1 lg:grid-cols-2 gap-x-3 gap-y-5"
+                >
+                    <PersonalDataField id="personal-data-name" label="نام">
+                        <Input v-model="personalData.name" variant="outlined" />
+                    </PersonalDataField>
+                    <PersonalDataField
+                        id="personal-data-last-name"
+                        label="نام خانوادگی"
+                    >
+                        <Input
+                            v-model="personalData.last_name"
+                            variant="outlined"
+                        />
+                    </PersonalDataField>
+                    <PersonalDataField id="personal-data-gender" label="جنسیت">
+                        <Select
+                            v-model="personalData.gender"
+                            :options="['مرد', 'زن']"
+                            variant="outlined"
+                        />
+                    </PersonalDataField>
+                    <PersonalDataField
+                        id="personal-data-birth-date"
+                        label="تاریخ تولد"
+                    >
+                        <Datepicker v-model="personalData.birthDate" />
+                    </PersonalDataField>
+                    <PersonalDataField
+                        id="personal-data-phone"
+                        label="تلفن همراه"
+                    >
+                        <Input
+                            v-model="personalData.phone"
+                            variant="outlined"
+                        />
+                    </PersonalDataField>
+                    <PersonalDataField
+                        id="personal-email"
+                        label="حساب الکترونیکی"
+                    >
+                        <Input
+                            v-model="personalData.email"
+                            variant="outlined"
+                        />
+                    </PersonalDataField>
+                </div>
+            </ProfileSection>
+        </div>
+        <!-- <div class="w-fill grid grid-cols-1 lg:grid-cols-2">
+            
+        </div> -->
+    </div>
 </template>
 
 <style scoped></style>