diff --git a/frontend/components/comments/index.vue b/frontend/components/comments/index.vue
index 49481441..e255e9a5 100644
--- a/frontend/components/comments/index.vue
+++ b/frontend/components/comments/index.vue
@@ -1,58 +1,73 @@
 <template>
-    <div>
-        <h5 class="mb-3">
-            <span class="fa-regular fa-comment"></span>
-            <span class="mx-1">دیدگاه ها</span>
-        </h5>
-
-        <form v-if="params.isLogin" class="my-3">
-            <textarea class="form-control mb-3" placeholder="دیدگاه خود را اینجا بنویسید" rows="3" required></textarea>
-            <button class="btn btn-success" type="submit">ثبت دیدگاه</button>
-        </form>
-
-        <div v-else class="alert alert-light">
-            <i class="fa-regular fa-bell fa-shake fa-xl"></i>
-            <span class="mx-1">برای ثبت دیدگاه خود</span>
-            <NuxtLink class="mx-1" href="/auth/register">ثبت نام کنید</NuxtLink>
-            <span>یا</span>
-            <NuxtLink class="mx-1" to="/auth/login">وارد شوید</NuxtLink>
-        </div>
-
-        <section class="card mb-3">
-            <div class="card-body d-flex flex-start">
-                <img class="rounded-circle shadow-1-strong ms-3" src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(3).webp" alt="avatar" width="65" height="65">
-                <div class="flex-grow-1 flex-shrink-1">
-                    <div class="d-flex justify-content-between align-items-center">
-                    <p class="mb-1">
-                        <span>افشار زند</span>
-                        <span class="text-muted small">
-                        <span class="fa-regular fa-clock mx-1"></span>
-                        <time datetime="">{{ useTime().toAgo('2024/05/20') }}</time>
-                        </span>
-                    </p>
-                    <div v-if="params.isLogin" class="text-nowrap">
-                        <button class="btn text-danger btn-sm">
-                            <i class="fas fa-trash fa-xs"></i>
-                        </button>
-                        <span>|</span>
-                        <button class="btn btn-sm">
-                        <i class="fas fa-reply fa-xs"></i>
-                        </button>
-                    </div>
-                    </div>
-                    <p class="small mb-0 pt-2 border-top">
-                        طراحان معمولا از لورم ایپسوم
-                         استفاده میکنند تا فقط به مشتری یا کار فرما نشان دهند که قالب طراحی شده بعد از اینکه متن
-                         در آن قرار میگرد چگونه خواهد بود و فونت ها و اندازه ها چگونه در نظر گرفته شده است.
-                    </p>
-                </div>
-            </div>
-        </section>
+  <section>
+    <h5 class="mb-3">
+      <span class="fa-regular fa-comment"></span>
+      <span class="mx-1">دیدگاه ها</span>
+    </h5>
+    <comments-write-new :disabled="disabled"
+                        @sendComment="sendComment" v-if="params.isLogin"/>
+    <div v-else class="alert alert-light">
+      <i class="fa-regular fa-bell fa-shake fa-xl"></i>
+      <span class="mx-1">برای ثبت دیدگاه خود</span>
+      <NuxtLink class="mx-1" href="/auth/register">ثبت نام کنید</NuxtLink>
+      <span>یا</span>
+      <NuxtLink class="mx-1" to="/auth/login">وارد شوید</NuxtLink>
     </div>
+    <comments-item v-for="(item , index) in comments" :key="index" :data="item" v-if="comments && comments.length"/>
+  </section>
 </template>
 
 <script lang="ts" setup>
-    const params = reactive({
-        isLogin: useAuth().isLogin(),
+const route = useRoute()
+const {data} = defineProps(['data'])
+useState('clearDataAfterCloseComment', ()=>false)
+const comments = (data && data.length) ? createTree(data) : ""
+const disabled = ref()
+
+function createTree(comments: []): [] {
+  const map = new Map();
+  comments.forEach(comment => map.set(comment.uuid, comment));
+  const tree: [] = [];
+  comments.forEach(comment => {
+    const parent = map.get(comment.parent_uuid);
+    if (!parent) {
+      tree.push(comment);
+    }
+  });
+  // تکمیل کردن زیرمجموعه‌ها
+  tree.forEach((node: object) => {
+    const fillSubtree = (node: object) => {
+      node.sub = comments.filter(comment => comment.parent_uuid === node.uuid);
+      node.sub.forEach(fillSubtree);
+    };
+    fillSubtree(node);
+  });
+  return tree;
+}
+
+const sendComment = async (text: string) => {
+  const body = {
+    object_uuid: route.params.uuid,
+    body: text,
+    object_type: 'article',
+    parent_uuid: ""
+  }
+  try {
+    disabled.value = true /* برای غیر فعال شدن دکمه ارسال کامنت بعد فشرده شدن تا زمان برشگت درخواست  */
+    useState('clearDataAfterCloseComment').value = false /* برای خالی کردن مقدار کامنت در صورت موفقیت بودن درخواست */
+    const data = await useUser().$fetch(useApiUrlResolver().resolve('api/comments'), {
+      method: 'POST',
+      headers: {authorization: `Bearer ${useAuth().accessToken()}`},
+      body: JSON.stringify(body),
     })
-</script>
\ No newline at end of file
+    useState('clearDataAfterCloseComment').value = true
+  } catch (e) {
+    console.log(e)
+  } finally {
+    disabled.value = false /*جواب درخواست ما هرچی که باشه درانتها هر چی که باشه دکمه از حالت disable در میاد*/
+  }
+}
+const params = reactive({
+  isLogin: useAuth().isLogin(),
+})
+</script>
diff --git a/frontend/components/comments/item.vue b/frontend/components/comments/item.vue
index e69de29b..d776c1fd 100644
--- a/frontend/components/comments/item.vue
+++ b/frontend/components/comments/item.vue
@@ -0,0 +1,145 @@
+<template>
+  <section :class="{child:child }" v-if="data">
+    <section class="card mb-3">
+      <div class="card-body d-flex flex-start">
+        <img v-if="data.author.avatar" class="rounded-circle shadow-1-strong ms-3"
+             :src="useFilesUrlResolver().resolve(data.author.avatar)" alt="avatar" width="65"
+             height="65">
+        <div class="flex-grow-1 flex-shrink-1 ">
+          <div class="d-flex justify-content-between align-items-center">
+            <p class="info mb-1">
+              <span v-if="data.author.name">{{ data.author.name }}</span>
+              <span class="text-muted small me-1" v-if="data.created_at && data.created_at.length">
+              <span class="fa-regular fa-clock mx-1"></span>
+              <time datetime="">{{ useTime().toAgo(data.created_at) }}</time>
+            </span>
+            </p>
+            <div v-if="params.isLogin" class="text-nowrap">
+              <button class="btn text-danger btn-sm" v-if="false">
+                <i class="fas fa-trash fa-xs"></i>
+              </button>
+              <span v-if="false">|</span>
+              <button class="btn btn-sm" @click="showWriteComment">
+                <i class="fas fa-reply fa-xs"></i>
+              </button>
+            </div>
+          </div>
+          <p v-if="data.body && data.body.length" class="text small mb-0 pt-2 border-top ">{{ data.body }}</p>
+        </div>
+      </div>
+    </section>
+    <section class="write-comment px-1" ref="writeComment">
+      <comments-write-new :clear-data="clearDataAfterCloseComment" :disabled="disabled" :parentInfo="data.uuid"
+                          @send-comment="sendComment" :replyTheme="true">
+        <button class="btn btn-sm btn-md-lg btn-danger align-self-start mt-2" @click.prevent="showWriteComment">بستن
+        </button>
+      </comments-write-new>
+    </section>
+    <comments-item v-if="data.sub && data.sub.length" v-for="(item , index) in data.sub" :key="index" :data="item"
+                   :child="true"/>
+  </section>
+</template>
+
+<script setup lang="ts">
+const {uuid} = useRoute().params
+import {useFilesUrlResolver} from "~/composables/urlResolver";
+
+const disabled = ref()
+const writeComment = ref(null)
+const clearDataAfterCloseComment = ref(false)
+const {data, child} = defineProps({
+  data: {
+    type: Object,
+  },
+  child: {
+    type: Boolean
+  }
+})
+/* در فانکشن زیر ما برای ظاهر شدن کامپوننت کامنت از maxHeight استفاده کردیم
+ به این صورت که در ابتدا صفر و با کلیک برروی ریپلای به اندازه طول
+ اسکرول آن بعلاوه 20 پیکسل بیشتر که ارفاع ارور آن دررمان ظاهر شدن است */
+const showWriteComment = () => {
+  if (writeComment.value.style.maxHeight) {
+    writeComment.value.style.maxHeight = null
+    useState('clearDataAfterCloseComment').value = true
+  } else {
+    writeComment.value.style.maxHeight = writeComment.value.scrollHeight + 'px'
+    useState('clearDataAfterCloseComment').value = false
+  }
+
+}
+const sendComment = async (text: string, parentUuid: string) => {
+  const body = {
+    body: text,
+    object_type: 'article',
+    parent_uuid: parentUuid,
+    object_uuid: uuid
+  }
+  try {
+    disabled.value = true /* برای غیر فعال شدن دکمه ارسال کامنت بعد فشرده شدن تا زمان برشگت درخواست  */
+    const data = await useUser().$fetch(useApiUrlResolver().resolve('api/comments'), {
+      method: 'POST',
+      headers: {authorization: `Bearer ${useAuth().accessToken()}`},
+      body: JSON.stringify(body)
+    })
+    showWriteComment() /*برای بسته شدن ریپلای در صورت موفقیت آمیز بودن ارسال درخواست */
+  } catch (e) {
+    console.log(e)
+  } finally {
+    disabled.value = false /* عملیات ارسال دیتا در نهایت هرچی که باشه دکمه ما تغیر حالت میده  */
+  }
+}
+const params = reactive({
+  isLogin: useAuth().isLogin(),
+})
+
+</script>
+
+<style scoped lang="scss">
+card {
+  transition: 0.5s;
+}
+
+.child {
+  margin-right: 3%;
+}
+
+p {
+  &.text {
+    line-height: 30px;
+    font-size: 14px;
+    color: #6c757d;
+  }
+
+  &.info {
+    line-height: 20px;
+    font-size: 14px;
+  }
+}
+
+.transform-enter-active {
+  animation: reply ease-out 0.35s;
+  z-index: 1;
+}
+
+.transform-leave-active {
+  animation: reply ease-in 0.35s reverse;
+}
+
+.write-comment {
+  max-height: 0;
+  overflow: hidden;
+  transition: 0.5s !important;
+}
+
+@keyframes reply {
+  0% {
+    transform: translateY(-10%);
+    opacity: -1;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+</style>
diff --git a/frontend/components/comments/writeNew.vue b/frontend/components/comments/writeNew.vue
new file mode 100644
index 00000000..a55122da
--- /dev/null
+++ b/frontend/components/comments/writeNew.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+const {parentInfo, replyTheme, disabled} = defineProps({
+  parentInfo: {
+    type: String
+  },
+  replyTheme: {
+    type: Boolean
+  },
+  disabled: {
+    type: Boolean
+  }
+})
+const emit = defineEmits(['sendComment'])
+const commentData = reactive({
+  body: "",
+  error: false
+})
+watch(() => useState('clearDataAfterCloseComment').value, () => {
+  commentData.body = ""
+})
+
+const sendComment = () => {
+  if (commentData.body.length > 4) {
+    emit('sendComment', commentData.body, parentInfo)
+  } else {
+    commentData.error = true
+  }
+}
+const removeError = () => {
+  commentData.error ? commentData.error = false : ""
+}
+</script>
+
+<template>
+  <form class="my-3 py-1 d-flex flex-column" :class="{'mt-0':replyTheme}" @submit.prevent="sendComment">
+    <textarea class="form-control mb-1" placeholder="دیدگاه خود را اینجا بنویسید" rows="3" required
+              v-model.trim="commentData.body" @keyup="removeError"></textarea>
+    <span class="error text-danger" v-if="commentData.error">متن پیام باید بیشتر باشد .</span>
+    <div class="d-flex gap-2">
+      <button :class="`btn  btn-success align-self-start ${ replyTheme ?'btn-sm mt-2': 'mt-3'}`" :disabled="disabled"
+              type="submit">ثبت دیدگاه
+      </button>
+      <slot/>
+    </div>
+  </form>
+</template>
+
+<style scoped>
+.error {
+  font-size: 12px;
+}
+</style>
diff --git a/frontend/pages/articles/[uuid].vue b/frontend/pages/articles/[uuid].vue
index 19f94f86..9caf7dac 100644
--- a/frontend/pages/articles/[uuid].vue
+++ b/frontend/pages/articles/[uuid].vue
@@ -22,14 +22,12 @@
               <div v-if="data.tags" class="card-text">
                 <a class="hashtag" :href="`/hashtags/${tag}`" :key="index" v-for="(tag, index) in data.tags">{{ tag }}</a>
               </div>
-
-              <aside v-if="false" class="mt-5">
-                <Comments />
+              <aside class="mt-5">
+                <Comments :data="comments.items"/>
               </aside>
             </section>
         </div>
     </div>
-
     <div v-if="data.elements">
       <template v-for="(element, index) in data.elements" :key="index">
         <Jumbotron :key="index" v-if="element.type === 'jumbotron'" :body="element.body" />
@@ -40,14 +38,19 @@
 </template>
 
 <script setup>
-	import hljs from 'highlight.js'
+import hljs from 'highlight.js'
 
-	const {uuid} = useRoute().params;
+const {uuid} = useRoute().params;
 
 	const resolveFileUrl = useFilesUrlResolver().resolve
-
 	const data = await $fetch(useApiUrlResolver().resolve(`api/articles/${uuid}`))
-
+const comments = await $fetch( useApiUrlResolver().resolve('api/comments'), {
+  query: {
+    object_type: 'article',
+    object_uuid: uuid,
+    page: 1
+  }
+})
 	useHead({
 		title: data.title,
 		meta: [
diff --git a/frontend/pages/auth/login.vue b/frontend/pages/auth/login.vue
index ddcadc48..425df5de 100644
--- a/frontend/pages/auth/login.vue
+++ b/frontend/pages/auth/login.vue
@@ -27,15 +27,20 @@
 									</div>
 								</button>
 							</div>
-							<div class="form-group d-flex flex-column flex-md-row  mt-2 pt-2 justify-content-between align-items-center">
-								<div>
-									<label class="d-flex align-items-center gap-1 checkbox-primary mb-3">
+              <div class="form-group d-flex mt-2">
+                <label class="d-flex align-items-center gap-1 checkbox-primary">
 										<input type="checkbox" checked>
 										<span>من را به خاطر بسپار</span>
 									</label>
 								</div>
+              <div
+                  class="form-group d-flex flex-column flex-md-row  mt-2 pt-2 justify-content-md-end gap-3 align-items-md-center">
+                <div>
+                  <nuxt-link to="/auth/forgot-password" class="btn btn-outline-danger w-100 btn-sm ">بازیابی کلمه عبور
+                  </nuxt-link>
+                </div>
 								<div>
-									<nuxt-link to="/auth/forgot-password" class="btn btn-outline-danger w-100 btn-sm ">بازیابی کلمه عبور</nuxt-link>
+                  <nuxt-link to="/auth/register" class="btn btn-outline-success w-100 btn-sm ">ثبت نام</nuxt-link>
 								</div>
 							</div>
 						</form>
@@ -102,4 +107,4 @@ input::placeholder {
 	color: #9a9999;
 	font-size: 0.9rem;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/pages/auth/register.vue b/frontend/pages/auth/register.vue
new file mode 100644
index 00000000..4941e3c1
--- /dev/null
+++ b/frontend/pages/auth/register.vue
@@ -0,0 +1,102 @@
+<template>
+  <div class="container">
+    <div class="row justify-content-center ">
+      <div class="col-md-12 col-lg-10">
+        <div class="d-flex">
+          <div class="w-100 d-none d-md-block" id="login-cover"></div>
+          <div class="w-100 mt-3 mt-0 p-4">
+            <h3 class="mb-4 text-center ">ثبت نام</h3>
+            <form action="#" class="signin-form d-flex flex-column" @submit.prevent="login()">
+              <div class="form-group mt-2">
+                <input :class="{ 'is-invalid': errors.identity }" type="text" placeholder="ایمیل" class="input form-control py-2 " v-model="params.identity" required>
+                <div v-if="errors.identity" class="invalid-feedback">
+                  {{ errors.identity }}
+                </div>
+              </div>
+              <div class="form-group my-4">
+                <input :class="{ 'is-invalid': errors.password }" type="password" placeholder="کلمه عبور" class="input form-control py-2 " v-model="params.password" required>
+                <div v-if="errors.password" class="invalid-feedback">
+                  {{ errors.password }}
+                </div>
+              </div>
+              <div class="form-group">
+                <button :disabled="params.loading" type="submit" class="form-control btn btn-primary rounded submit px-3">
+                  <span v-if="!params.loading">ثبت نام</span>
+                  <div v-else class="spinner-border" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                  </div>
+                </button>
+              </div>
+              <div class="form-group d-flex flex-column flex-md-row  mt-2 pt-2 justify-content-between align-items-center">
+                <div>
+
+                </div>
+                <div class="w-100">
+                  <nuxt-link to="/auth/login" class="btn btn-outline-danger w-100 btn-sm " >ورود</nuxt-link>
+                </div>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+useHead({
+  title: 'ثبت نام پنل کاربری',
+  meta: [
+    { name: 'description', content: 'ثبت نام پنل کاربری' },
+  ],
+  link: [
+    { rel: 'canonical', href: `/auth/register` }
+  ]
+})
+
+// reflects form parameters
+const params = reactive({
+  identity: null,
+  password: null,
+  loading: false,
+})
+
+// reflects the validation errors to corresponding html input.
+const errors = reactive({
+  identity: null,
+  password: null,
+})
+
+async function login() {
+  try {
+    params.loading = true
+    await useAuth().login(params.identity, params.password)
+  } catch(error) {
+    console.log(error)
+    errors.identity = "نام کاربری یا کلمه عبور اشتباه است"
+  }
+
+  params.loading = false
+}
+</script>
+
+
+<style scoped>
+#login-cover {
+  background-image: url('/img/login-bg.jpg');
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center top;
+  overflow: hidden;
+  border-radius: 3px;
+}
+
+h3 {
+  color: #313131;
+}
+
+input::placeholder {
+  color: #9a9999;
+  font-size: 0.9rem;
+}
+</style>