diff --git a/pages/account/agents/announcements/index.vue b/pages/account/agents/announcements/index.vue
index ed425ca..05b5a81 100644
--- a/pages/account/agents/announcements/index.vue
+++ b/pages/account/agents/announcements/index.vue
@@ -17,9 +17,12 @@
             </div>
             <div class="col-md-7 col-sm-12">
               <p>برای نمایش بهتر کلیک کنید</p>
-              <div @click="openModal('/uploads/images/announcement/' + item.image)" class="fr-image">
-                <img id="myImg" :src="'/uploads/images/announcement/'+item.image" alt="">
-
+              <div  class="fr-image">
+                <el-image
+                    :src="'https://www.asan-service.com/uploads/images/announcement/' + item.image"
+                    :preview-src-list="['https://www.asan-service.com/uploads/images/announcement/' + item.image]"
+                  >
+                  </el-image>
               </div>
             </div>
           </div>
diff --git a/pages/account/announcements/index.vue b/pages/account/announcements/index.vue
index 6bde0f3..dd51106 100644
--- a/pages/account/announcements/index.vue
+++ b/pages/account/announcements/index.vue
@@ -17,8 +17,12 @@
             </div>
             <div class="col-md-6 col-sm-12">
               <p>برای نمایش بهتر کلیک کنید</p>
-              <div @click="openModal('/uploads/images/announcement/' + item.image)" class="fr-image">
-                <img id="myImg" :src="'/uploads/images/announcement/' + item.image" alt="">
+              <div class="fr-image">
+                <el-image
+                    :src="'https://www.asan-service.com/uploads/images/announcement/' + item.image"
+                    :preview-src-list="['https://www.asan-service.com/uploads/images/announcement/' + item.image]"
+                  >
+                  </el-image>
 
 
               </div>
diff --git a/pages/announcements/index.vue b/pages/announcements/index.vue
index 7d6c9c9..a1b6c21 100644
--- a/pages/announcements/index.vue
+++ b/pages/announcements/index.vue
@@ -1,104 +1,97 @@
 <template>
-    <div class="bg-img-in" >
-        <user-dashboard-container page-class="announcements" panel-title="اعلانات" class="panelx">
-      <div v-for="item in userAnnouncements" :key="item._id" class="item" >
-        <el-collapse :key="item._id + 'co_parent'" accordion >
-          <el-collapse-item :key="item._id + 'co_item'" :name="item._id" >
+  <div class="bg-img-in">
+    <user-dashboard-container page-class="announcements" panel-title="اعلانات" class="panelx">
+      <div v-for="item in userAnnouncements" :key="item._id" class="item">
+        <el-collapse :key="item._id + 'co_parent'" accordion>
+          <el-collapse-item :key="item._id + 'co_item'" :name="item._id">
             <template slot="title">
               <h3>{{ item.title }}</h3>
             </template>
-            <div  v-if="!item.image" class="col-12">
+            <div v-if="!item.image" class="col-12">
               <p>{{ item.caption }}</p>
-
             </div>
-          <div v-if="item.image" class="row">
-            <div class="col-md-5 col-sm-12">
-              <p>{{ item.caption }}</p>
-
-            </div>
-            <div class="col-md-7 col-sm-12">
-              <p>برای نمایش بهتر کلیک کنید</p>
-              <div class="fr-image">
-                <img id="myImg" :src="'/uploads/images/announcement/'+item.image" alt="">
-
+            <div v-if="item.image" class="row">
+              <div class="col-md-5 col-sm-12">
+                <p>{{ item.caption }}</p>
+              </div>
+              <div class="col-md-7 col-sm-12">
+                <p>برای نمایش بهتر کلیک کنید</p>
+                <div class="fr-image">
+                  <el-image
+                    :src="'https://www.asan-service.com/uploads/images/announcement/' + item.image"
+                    :preview-src-list="['https://www.asan-service.com/uploads/images/announcement/' + item.image]"
+                  >
+                  </el-image>
+                </div>
               </div>
             </div>
-          </div>
-            
           </el-collapse-item>
         </el-collapse>
       </div>
       <!-- The Modal -->
-    <div v-if="modalVisible"  id="myModal" class="modal">
+      <div v-if="modalVisible" id="myModal" class="modal">
+        <!-- The Close Button -->
+        <span @click="closeModal" class="close">&times;</span>
 
-<!-- The Close Button -->
-<span @click="closeModal" class="close">&times;</span>
-
-<!-- Modal Content (The Image) -->
-<img id="img01" class="modal-content" :src="modalImageUrl">
-
-
-</div>
+        <!-- Modal Content (The Image) -->
+        <img id="img01" class="modal-content" :src="modalImageUrl" />
+      </div>
       <h3 v-if="!userAnnouncements.length" style="text-align: center; margin-top: 50px">هیچ اعلانی موجود نیست</h3>
     </user-dashboard-container>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    name: 'PublicAnnouncements',
- 
-    data() {
-      return {
-        userAnnouncements:'',
-        modalVisible:false,
-      modalImageUrl:''
-      }
-    },
-    mounted(){
-      this.$axios.get('/api/public/announcement').then((res)=>{
+  </div>
+</template>
 
-        this.userAnnouncements = res.data
-
-      })
-    },
-    methods:{
-      openModal(image) {
-      this.modalVisible = true;
-      this.modalImageUrl = image;
+<script>
+export default {
+  name: 'PublicAnnouncements',
 
+  data() {
+    return {
+      userAnnouncements: '',
+      modalVisible: false,
+      modalImageUrl: ''
+    }
+  },
+  mounted() {
+    this.$axios.get('/api/public/announcement').then(res => {
+      this.userAnnouncements = res.data
+    })
+  },
+  methods: {
+    openModal(image) {
+      this.modalVisible = true
+      this.modalImageUrl = image
     },
     closeModal() {
-      this.modalVisible = false;
-    },
+      this.modalVisible = false
     }
   }
-  </script>
-  <style lang="scss" scoped>
-  .bg-img-in{
-    background: url(@/static/assets/img/home/bg2.jpg);
-    background-size: cover;
-    background-repeat: no-repeat;
-    border-top: groove;
-  }
-  .panelx{
-    margin-top: 20%;
-    margin-left: auto;
-    margin-right: auto;
-    width: 80% !important;
-  }
-  .fr-image{
-
+}
+</script>
+<style lang="scss" scoped>
+.bg-img-in {
+  background: url(@/static/assets/img/home/bg2.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  border-top: groove;
+}
+.panelx {
+  margin-top: 20%;
+  margin-left: auto;
+  margin-right: auto;
+  width: 80% !important;
+}
+.fr-image {
+  height: 17rem;
+  margin: auto;
+  img {
+    width: 100%;
     height: 17rem;
-    margin: auto;
-    img{
-      width: 100%;
-      height: 17rem;
-      object-fit: cover;
-      border-radius: .5rem;
-    }
+    object-fit: cover;
+    border-radius: 0.5rem;
   }
-  /* Style the Image Used to Trigger the Modal */
+}
+/* Style the Image Used to Trigger the Modal */
 #myImg {
   border-radius: 5px;
   cursor: pointer;
@@ -111,7 +104,6 @@
 
 /* The Modal (background) */
 .modal {
- 
   /* Hidden by default */
   position: fixed;
   /* Stay in place */
@@ -141,8 +133,6 @@
   max-width: 700px;
 }
 
-
-
 /* Add Animation - Zoom in the Modal */
 .modal-content {
   animation-name: zoom;
@@ -151,11 +141,11 @@
 
 @keyframes zoom {
   from {
-    transform: scale(0)
+    transform: scale(0);
   }
 
   to {
-    transform: scale(1)
+    transform: scale(1);
   }
 }
 
@@ -183,5 +173,4 @@
     width: 100%;
   }
 }
-  </style>
-  
\ No newline at end of file
+</style>
diff --git a/pages/index.vue b/pages/index.vue
index 418e951..84e753b 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -74,6 +74,16 @@
         </div>
       </div>
     </div>
+
+    <div class="p-3"  style="background-color: white">
+      <div >
+        <el-carousel :interval="400000" type="card" height="400px">
+          <el-carousel-item v-for="item in 6" :key="item">
+           
+          </el-carousel-item>
+        </el-carousel>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -114,7 +124,6 @@ export default {
     }
   },
   methods: {
-   
     checkSerial() {
       // validation
       if (this.checkingSerial) {
@@ -168,3 +177,14 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+
+.el-carousel__item:nth-child(2n) {
+  background-color: #99a9bf;
+}
+
+.el-carousel__item:nth-child(2n + 1) {
+  background-color: #d3dce6;
+}
+</style>