diff --git a/resources/assets/vue/components/announcements/sections/AnnouncementQuickViewSectionComponent.vue b/resources/assets/vue/components/announcements/sections/AnnouncementQuickViewSectionComponent.vue
new file mode 100644
index 00000000..a40ec4c8
--- /dev/null
+++ b/resources/assets/vue/components/announcements/sections/AnnouncementQuickViewSectionComponent.vue
@@ -0,0 +1,55 @@
+<template>
+    <div class="col-12">
+        <div class="b-b b-dashed b-grey p-b-25" v-show="!this.show_details" v-if="company">
+            <div class="row align-items-center m-b-5 parentContainer">
+                   <div class="col-10">
+                        <div class="font-heading fs-10 muted all-caps">Announcement</div>
+                    </div>
+                    <div class="col-2 text-right pull-right">
+                        <div class="font-heading fs-10 muted all-caps">Action</div>
+                    </div>
+
+            </div>
+            <list-component  :section="this.section" :endpoint="route('api.announcement.list')" :options="{has_segments:segments,is_published:true}">
+                <template slot="list" slot-scope="{data}">
+                    <announcement-list-component :data="data"></announcement-list-component>
+                </template>
+            </list-component>
+        </div>
+    </div>
+</template>
+
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+    export default {
+        data(){
+            return {
+                section: 'announcementsSection',
+                company: null,
+                show_details: false,
+            }
+        },
+        computed: {
+            segments(){
+                return this.company.segments.map(function (value){
+
+                    return value.id;
+                })
+            }
+        },
+        created(){
+            this.$store.dispatch('updateListQueue', {'name': this.section});
+            this.fetchCompany();
+        },
+        methods: {
+            fetchCompany(){
+                this.submit(route('api.company.show', this.$store.getters.getCompanyId), 'get', this.section, false, false)
+            },
+            successHandler(response){
+                this.$store.dispatch('completeList', {'name': this.section, 'data': []});
+                this.company = response.payload.data;
+            }
+        },
+        mixins: [componentHandler]
+    }
+</script>
\ No newline at end of file