diff --git a/pages/admin/complaint/_item.vue b/pages/admin/complaint/_item.vue
index ec7d672..3b39381 100644
--- a/pages/admin/complaint/_item.vue
+++ b/pages/admin/complaint/_item.vue
@@ -1,35 +1,74 @@
 <template>
   <div>
-   
+    <div class="m-3">
+      <div class="row ui-box p-3">
+        <div class="col-lg-4">
+          <div class="d-flex mt-3" style="align-items: center">
+            <h5 style="margin-bottom: 1rem">نام و نام خانوادگی :</h5>
+            <p class="mr-2" style="margin-bottom: 1rem">{{ complaint?.fullName }}</p>
+          </div>
+
+          <div class="d-flex mt-3" style="align-items: center">
+            <h5 style="margin-bottom: 1rem">کد ملی :</h5>
+            <p class="mr-2" style="margin-bottom: 1rem">{{ complaint?.national }}</p>
+          </div>
+
+          <div class="d-flex mt-3" style="align-items: center">
+            <h5 style="margin-bottom: 1rem">شماره تماس :</h5>
+            <p class="mr-2" style="margin-bottom: 1rem">{{ complaint?.phoneNumber }}</p>
+          </div>
+
+          <div class="d-flex mt-3" style="align-items: center">
+            <h5 style="margin-bottom: 1rem">ایمیل :</h5>
+            <p class="mr-2" style="margin-bottom: 1rem">{{ complaint?.email }}</p>
+          </div>
+
+          <div class="d-flex mt-3" style="align-items: center">
+            <h5 style="margin-bottom: 1rem">کد پذیرش :</h5>
+            <p class="mr-2" style="margin-bottom: 1rem">{{ complaint?.receptionCode }}</p>
+          </div>
+
+          <div class="d-flex mt-3" style="align-items: center">
+            <h5 style="margin-bottom: 1rem">شماره سریال دستگاه :</h5>
+            <p class="mr-2" style="margin-bottom: 1rem">{{ complaint?.deviceNumber }}</p>
+          </div>
+
+          <div class="d-flex mt-3" style="align-items: center">
+            <h5 style="margin-bottom: 1rem">نوع ارتباط :</h5>
+            <p class="mr-2" style="margin-bottom: 1rem">{{ complaint?.callType ? 'ایمیل' : ' تماس تلفنی' }}</p>
+          </div>
+        </div>
+
+        <div class="col-lg-8" style="display: flex; align-items: center; justify-content: center">
+          <div class="d-flex mt-3" style="align-items: center; justify-content: center">
+            <p class="mr-2" style="margin-bottom: 1rem">{{ complaint?.caption }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-
-
 export default {
   name: 'AdminComplaintDetails',
 
-
   layout: 'admin',
 
-  async asyncData({ $axios, params, query, error }) {
-
-  },
+  async asyncData({ $axios, params, query, error }) {},
   data() {
     return {
-      
+      complaint: null
     }
   },
 
-  computed: {
-   
-  
+  computed: {},
+  beforeMount() {
+    this.$axios.get(`/api/admin/complaint/${this.$route.params.item}`).then(res => {
+      this.complaint = res.data
+    })
   },
-  methods: {
-    
-
-  }
+  methods: {}
 }
 </script>
 
@@ -44,8 +83,8 @@ export default {
 
 .btn-upload {
   background-color: cornflowerblue;
-  padding: .5rem 1rem;
-  border-radius: .5rem;
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
   cursor: pointer;
   color: white;
   float: left;
@@ -54,4 +93,8 @@ export default {
 .space {
   margin: 5rem;
 }
+.ui-box {
+  background-color: white;
+  border-radius: 10px;
+}
 </style>
diff --git a/pages/admin/complaint/index.vue b/pages/admin/complaint/index.vue
index 275ee0a..ed25d28 100644
--- a/pages/admin/complaint/index.vue
+++ b/pages/admin/complaint/index.vue
@@ -13,35 +13,40 @@
       </CCardHeader>
 
       <CCardBody>
-        <el-table :data="filteredByType" style="width: 100%">
+        <el-table :data="complaint" style="width: 100%">
           <el-table-column type="index" label="#"> </el-table-column>
 
-          <el-table-column prop="caption" label="کد ملی" width="">
+          <el-table-column prop="fullName" label="نام" width="">
+           
+          </el-table-column>
+
+          <el-table-column  label="کد ملی" width="">
             <template slot-scope="scope">
               <span class="singleLineTxt" :title="scope.row.national"> {{ scope.row.national }} </span>
             </template>
           </el-table-column>
 
-          <el-table-column prop="caption" label="متن" width="">
+          <el-table-column  label="متن" width="">
             <template slot-scope="scope">
               <span class="singleLineTxt" :title="scope.row.caption"> {{ scope.row.caption }} </span>
             </template>
           </el-table-column>
 
-          <el-table-column prop="caption" label="تاریخ ایجاد" width="">
+          <el-table-column  label="تاریخ ایجاد" width="">
             <template slot-scope="scope">
               <span> {{ $jDate(scope.row.created_at) }} </span>
+
             </template>
           </el-table-column>
 
 
-          <el-table-column prop="caption" label="شماره تماس" width="">
+          <el-table-column  label="شماره تماس" width="">
             <template slot-scope="scope">
               <span class="singleLineTxt" :title="scope.row.phoneNumber"> {{ scope.row.phoneNumber }} </span>
             </template>
           </el-table-column>
 
-          <el-table-column prop="caption" label="ایمیل" width="">
+          <el-table-column  label="ایمیل" width="">
             <template slot-scope="scope">
               <span class="singleLineTxt" :title="scope.row.email"> {{ scope.row.email }} </span>
             </template>
@@ -53,7 +58,7 @@
                 :key="scope.row._id + type"
                 color="success"
                 variant="outline"
-                :to="{ name: 'admin-complaint-details', params: { item: scope.row._id } }"
+                :to="{ name: 'admin-complaint-item', params: { item: scope.row._id } }"
               >
                 <i class="fal fa-eye"></i>
               </CButton>
@@ -70,21 +75,38 @@ export default {
   name: 'AdminComplaintsList',
   layout: 'admin',
   async asyncData({ $axios, error }) {
-   
-   
+    
   },
   data() {
     return {
-
+      complaint:null
      
     }
   },
  
   computed: {
 
+  },
+  mounted(){
+
+    this.$axios.get('/api/admin/complaint').then(res=>{
+      this.complaint = res.data
+      console.log(res.data)
+
+    }).catch(err=>{
+      console.log(err)
+    })
+
+
   },
   methods: {
   
+   
+     
+      
+     
   }
-}
+  
+  }
+
 </script>
diff --git a/pages/complaint/index.vue b/pages/complaint/index.vue
index 3bd391c..6780ca5 100644
--- a/pages/complaint/index.vue
+++ b/pages/complaint/index.vue
@@ -154,33 +154,33 @@
         
 
         <div class="col-lg-4 col-sm-12 mt-4">
-          <el-input v-model="fullName" placeholder="نام و نام خانوادگی"></el-input>
+          <el-input v-model="form.fullName" :class="validation.fullName ? 'err' : null" placeholder="نام و نام خانوادگی"></el-input>
         </div>
         <div class="col-lg-4 col-sm-12 mt-4">
-          <el-input v-model="national" placeholder="کد ملی"></el-input>
+          <el-input v-model="form.national" :class="validation.national ? 'err' : null" placeholder="کد ملی"></el-input>
         </div>
         <div class="col-lg-4 col-sm-12 mt-4">
-          <el-input v-model="phoneNumber" placeholder="شماره تلفن"></el-input>
+          <el-input v-model="form.phoneNumber" :class="validation.phoneNumber ? 'err' : null" placeholder="شماره تلفن"></el-input>
         </div>
 
         <div class="col-lg-4 col-sm-12 mt-4">
-          <el-input v-model="email" placeholder="ایمیل"></el-input>
+          <el-input v-model="form.email" :class="validation.email ? 'err' : null" placeholder="ایمیل"></el-input>
         </div>
         <div class="col-lg-4 col-sm-12 mt-4">
-          <el-input v-model="deviceNumber" placeholder="شماره سریال دستگاه"></el-input>
+          <el-input v-model="form.deviceNumber" :class="validation.deviceNumber ? 'err' : null" placeholder="شماره سریال دستگاه"></el-input>
         </div>
         <div class="col-lg-4 col-sm-12 mt-4">
-          <el-input v-model="receptionCode" placeholder="کد پذیرش"></el-input>
+          <el-input v-model="form.receptionCode" :class="validation.receptionCode ? 'err' : null" placeholder="کد پذیرش"></el-input>
         </div>
 
         <div class="col-lg-12 col-sm-12 mt-4">
-          <el-input v-model="caption" type="textarea" :rows="5" placeholder="توضیحات"> </el-input>
+          <el-input v-model="form.caption" :class="validation.caption ? 'err' : null" type="textarea" :rows="5" placeholder="توضیحات"> </el-input>
         </div>
 
         <div class="col-lg-4 col-sm-12 mt-4">
           <h5 class="mb-2">انتخاب نحوه پاسخ دهی:</h5>
           <el-switch
-            v-model="callType"
+            v-model="form.callType"
             inactive-color="#03fc3d"
             active-color="#0367fc"
             style="display: flex; justify-content: space-evenly"
@@ -204,14 +204,19 @@ export default {
 
   data() {
     return {
-      fullName: '',
-      national: '',
-      phoneNumber: '',
-      deviceNumber: '',
-      email: '',
-      receptionCode: '',
-      caption: '',
-      callType: true
+     form:{
+      fullName: null,
+      national: null,
+      phoneNumber: null,
+      deviceNumber: null,
+      email: null,
+      receptionCode: null,
+      caption: null,
+      callType: true,
+     },
+      validation: {},
+      hasValidationError: false,
+      waiting:true
     }
   },
   computed: {
@@ -222,12 +227,62 @@ export default {
   mounted() {},
   methods: {
     sendForm() {
+  
+
+      this.validation = {}
+      this.hasValidationError = false
+      this.waiting = true
+
+
+      this.$axios
+        .post('/api/public/complaint', this.form)
+        .then(response => {
+          this.waiting = false
+
+          
+          this.$message({
+              type: 'success',
+              message: "با موفقیت ثبت شد"
+            })
+
+          this.form = {
+            fullName: '',
+      national: '',
+      phoneNumber: '',
+      deviceNumber: '',
+      email: '',
+      receptionCode: '',
+      caption: '',
+      callType: true,
+          }
+        }).catch(error => {
+    
+
+          if (error.response.status === 422) {
+            this.validation = error.response.data.validation
+            this.hasValidationError = true
+            this.waiting = false
+          } else
+            this.$message({
+              type: 'error',
+              message: error.response.data.message
+            })
+        })
       
+
+
     }
   }
 }
 </script>
 <style lang="scss" scoped>
+.err{
+      box-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
+    -webkit-box-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
+    -moz-box-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
+    border: 2px solid rgba(255, 0, 0, 0.2);
+    border-radius: 8px;
+}
 .bg-img-in {
   background: url(@/static/assets/img/home/bg3.jpeg);
   background-size: cover;
diff --git a/server/routes/admin.js b/server/routes/admin.js
index 953b93d..a907a21 100644
--- a/server/routes/admin.js
+++ b/server/routes/admin.js
@@ -30,6 +30,7 @@ const complaintController = require('../controllers/complaintController')
 /// ///////////// Complaint
 router.get('/complaint',hasPermission('complaint'), complaintController.gets)
 router.get('/complaint/:id',hasPermission('complaint'), complaintController.get)
+
 /// ///////////// warranty terms
 router.post('/warranty', hasPermission('warranty-terms'), warrantyTermsController.create)
 router.put('/warranty/:id', hasPermission('warranty-terms'), warrantyTermsController.update)