diff --git a/frontend/components/profile/purchases-and-orders/index/PurchasesTableRow.vue b/frontend/components/profile/purchases-and-orders/index/PurchasesTableRow.vue
new file mode 100644
index 0000000..c8a668c
--- /dev/null
+++ b/frontend/components/profile/purchases-and-orders/index/PurchasesTableRow.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+// imports
+
+import { usePersianTimeAgo } from "~/composables/global/usePersianTimeAgo";
+
+// types
+
+type Props = {
+    data: Order;
+};
+
+// props
+
+const props = defineProps<Props>();
+
+const { data } = toRefs(props);
+
+// computed
+
+const createdTimeAgo = usePersianTimeAgo(new Date(data.value.created_at));
+</script>
+
+<template>
+    <tr
+        class="odd:bg-white even:bg-gray-50 last:border-none border-b border-slate-200"
+    >
+        <td
+            scope="row"
+            class="w-3/12 px-6 py-6 font-medium whitespace-nowrap"
+            :class="data.order_id ? 'text-cyan-500' : 'text-black'"
+        >
+            {{ data.order_id ? `${data.order_id}#` : "--" }}
+        </td>
+        <td class="w-3/12 px-6 py-6">
+            {{ data.created_at ? createdTimeAgo : "--" }}
+        </td>
+        <td class="w-2/12 px-6 py-6">
+            {{ data.count ? data.count : "--" }}
+        </td>
+        <td class="w-2/12 px-6 py-6">
+            {{ data.final_price ? data.final_price : "--" }}
+        </td>
+        <td class="w-2/12 px-6 py-6">
+            <div
+                class="w-max rounded-full py-1.5 px-3 text-xs border"
+                :class="{
+                    'text-warning-600 bg-warning-100 border-warning-600': [
+                        'ADMIN_PENDING',
+                        'PENDING',
+                    ].includes(data.status),
+                    'text-success-600 bg-success-100 border-success-600': [
+                        'POSTED',
+                        'RECEIVED',
+                    ].includes(data.status),
+                    'text-danger-600 bg-danger-100 border-danger-600': [
+                        'CANCELED',
+                        'REFUND',
+                    ].includes(data.status),
+                }"
+            >
+                {{ data.verbose_status ? data.verbose_status : "--" }}
+            </div>
+        </td>
+        <td class="w-1/12 px-6 py-6">
+            <NuxtLink
+                :to="{
+                    name: 'profile-purchases-and-orders-id',
+                    params: { id: data.id },
+                }"
+            >
+                <button
+                    class="size-10 flex-center border border-slate-200 rounded-md"
+                >
+                    <Icon
+                        name="ci:eye-open"
+                        class="**:stroke-black"
+                        size="20"
+                    />
+                </button>
+            </NuxtLink>
+        </td>
+    </tr>
+</template>
+
+<style scoped></style>