diff --git a/resources/assets/vue/components/announcements/elements/AnnouncementListComponent.vue b/resources/assets/vue/components/announcements/elements/AnnouncementListComponent.vue
new file mode 100644
index 00000000..e0102b6d
--- /dev/null
+++ b/resources/assets/vue/components/announcements/elements/AnnouncementListComponent.vue
@@ -0,0 +1,135 @@
+<template>
+<div class="row m-b-15 parentContainer">
+    <div class="col">
+        <div class="row align-items-center">
+            <div class="col-3">
+                <div class="row">
+                    <div class="col-auto p-r-10">
+                        <div class="font-heading all-caps fs-8 muted">Date</div>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col">
+                        <div class="font-heading fs-10">{{item.created_at}}</div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-3">
+                <div class="row">
+                    <div class="col-auto p-r-10">
+                        <div class="font-heading all-caps fs-8 muted">Title</div>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col">
+                        <!-- <div class="font-heading fs-10">{{item.title | truncate(20)}}</div> -->
+                        <div class="font-heading fs-10">{{item.title}}</div>
+                    </div>
+                </div>
+            </div>
+            <div class="col">
+                <div class="row">
+                    <div class="col-auto p-r-10">
+                        <div class="font-heading all-caps fs-8 muted">Message</div>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col">
+                        <!-- <div class="font-heading fs-10">{{item.description  | truncate(15)}}</div> -->
+                        <div class="font-heading fs-10">{{item.description}}</div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-auto parentContainer">
+                <div class="row align-items-center">
+                    <div class="col-auto no-padding">
+                        <button class="btn btn-xs btn-complete b-rad-none m-r-5 requestModal" data-type="viewAnnouncement">
+                            View
+                        </button>
+                    </div>
+                    <template v-if="$store.getters.isAdmin">
+                        <div class="col-auto no-padding">
+                            <button class="btn btn-xs btn-complete b-rad-none m-r-5 requestModal" data-type="editModal">
+                                Edit
+                            </button>
+                        </div>
+                        <div class="col-auto no-padding">
+                            <button class="btn btn-xs btn-outline-danger b-rad-none m-r-5 requestModal" data-type="deleteAnnouncement">
+                                <i class="fa fa-times"></i>
+                            </button>
+                        </div>
+                        <button class="btn btn-xs btn-default bg-master-lighter p-l-10 p-r-10 b-rad-none" @click="expanded = !expanded">
+                            <i class="fa" :class="[{'fa-angle-up': expanded}, {'fa-angle-down': !expanded}]"></i>
+                        </button>
+                    </template>
+                </div>
+
+                <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteAnnouncement">
+                    <delete-announcement-form-component :data="item" section="allAnnouncementsSection" class="text-center"></delete-announcement-form-component>
+                </modal-component>
+
+                <modal-form-component :data="data" size="large" section="allAnnouncementsSection">
+                    <template slot="form" slot-scope="{section}">
+                        <announcement-form-component :data="item" :section="section"></announcement-form-component>
+                    </template>
+                </modal-form-component>
+
+                <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" :section="section" type="viewAnnouncement">
+                    <view-announcement-form-component :data="item" :section="section" class="text-center"></view-announcement-form-component>
+                </modal-component>
+            </div>
+        </div>
+
+        <div class="row" v-if="expanded">
+            <div class="col-1"></div>
+            <div class="col p-l-10 p-t-10 p-b-10">
+                <div class="row m-b-5">
+                    <div class="col">
+                        <div class="font-heading fs-9 all-caps muted">Targeted Segment</div>
+                    </div>
+                </div>
+                <div class="row align-items-center parentContainer">
+                    <div class="col-auto padding-5 b-a b-grey b-rad-lg pointer requestModal" data-type="assignSegment">
+                        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0 0 172 172" style=" fill:#000000;"><defs><linearGradient x1="86" y1="97.08594" x2="86" y2="105.31775" gradientUnits="userSpaceOnUse" id="color-1_43991_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="94.0625" y1="85.83338" x2="94.0625" y2="93.89588" gradientUnits="userSpaceOnUse" id="color-2_43991_gr2"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="77.9375" y1="85.83338" x2="77.9375" y2="93.89588" gradientUnits="userSpaceOnUse" id="color-3_43991_gr3"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="28.55469" x2="86" y2="143.10938" gradientUnits="userSpaceOnUse" id="color-4_43991_gr4"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g><path d="M77.9375,96.75c0,4.45319 3.60931,8.0625 8.0625,8.0625c4.45319,0 8.0625,-3.60931 8.0625,-8.0625z" fill="url(#color-1_43991_gr1)"></path><path d="M94.0625,86c-2.2264,0 -4.03125,1.80485 -4.03125,4.03125c0,2.2264 1.80485,4.03125 4.03125,4.03125c2.2264,0 4.03125,-1.80485 4.03125,-4.03125c0,-2.2264 -1.80485,-4.03125 -4.03125,-4.03125z" fill="url(#color-2_43991_gr2)"></path><path d="M77.9375,86c-2.2264,0 -4.03125,1.80485 -4.03125,4.03125c0,2.2264 1.80485,4.03125 4.03125,4.03125c2.2264,0 4.03125,-1.80485 4.03125,-4.03125c0,-2.2264 -1.80485,-4.03125 -4.03125,-4.03125z" fill="url(#color-3_43991_gr3)"></path><path d="M147.8125,51.0625h-18.8125v-8.0625c0,-4.44512 -3.61738,-8.0625 -8.0625,-8.0625h-11.2445c-1.11263,-3.12019 -4.06888,-5.375 -7.568,-5.375h-32.25c-3.49912,0 -6.45538,2.25481 -7.568,5.375h-11.2445c-4.44512,0 -8.0625,3.61738 -8.0625,8.0625v8.0625h-18.8125c-4.44513,0 -8.0625,3.61738 -8.0625,8.0625v59.125c0,4.44512 3.61737,8.0625 8.0625,8.0625h18.8125v8.0625c0,4.44512 3.61738,8.0625 8.0625,8.0625h69.875c4.44512,0 8.0625,-3.61738 8.0625,-8.0625v-8.0625h18.8125c4.44512,0 8.0625,-3.61738 8.0625,-8.0625v-59.125c0,-4.44512 -3.61737,-8.0625 -8.0625,-8.0625zM147.8125,56.4375c1.4835,0 2.6875,1.20669 2.6875,2.6875v51.0625h-2.88637c-0.80625,-6.09525 -4.28119,-11.78469 -9.47612,-15.25425c0.99437,-1.87319 1.6125,-3.98019 1.6125,-6.24575v-5.375c0,-6.48763 -4.62519,-11.91638 -10.75,-13.16606v-13.70894zM134.375,88.6875c0,3.49912 -2.25213,6.45538 -5.375,7.568v-20.50831c3.12287,1.11262 5.375,4.06887 5.375,7.568zM134.6545,99.1365c3.913,2.48056 6.62469,6.84506 7.47125,11.051h-13.12575v-8.33394c2.12044,-0.43269 4.02319,-1.41094 5.6545,-2.71706zM67.1875,37.625c0,-1.48081 1.204,-2.6875 2.6875,-2.6875h32.25c1.4835,0 2.6875,1.20669 2.6875,2.6875v2.6875c0,1.48081 -1.204,2.6875 -2.6875,2.6875h-32.25c-1.4835,0 -2.6875,-1.20669 -2.6875,-2.6875zM51.0625,40.3125h10.75c0,4.44512 3.61737,8.0625 8.0625,8.0625h32.25c4.44512,0 8.0625,-3.61738 8.0625,-8.0625h10.75c1.4835,0 2.6875,1.20669 2.6875,2.6875v83.3125h-3.34056c-1.73881,-9.23963 -7.19444,-17.45531 -15.06344,-22.66906c1.44319,-2.88906 2.279,-6.13556 2.279,-9.58094v-10.75c0,-11.85456 -9.64544,-21.5 -21.5,-21.5c-11.85456,0 -21.5,9.64544 -21.5,21.5v10.75c0,3.44537 0.83581,6.69188 2.28169,9.58094c-7.869,5.21375 -13.32463,13.42675 -15.06344,22.66906h-3.34325v-83.3125c0,-1.48081 1.204,-2.6875 2.6875,-2.6875zM102.125,94.0625c0,8.89294 -7.23206,16.125 -16.125,16.125c-8.89294,0 -16.125,-7.23206 -16.125,-16.125v-10.75c0,-8.89294 7.23206,-16.125 16.125,-16.125c8.89294,0 16.125,7.23206 16.125,16.125zM86,115.5625c6.48494,0 12.29531,-2.89981 16.24056,-7.45513c6.39088,4.22744 10.93006,10.77956 12.59363,18.20513h-57.66837c1.66356,-7.42556 6.20275,-13.97769 12.59631,-18.20244c3.94256,4.55531 9.75294,7.45244 16.23787,7.45244zM43,96.2555c-3.12288,-1.11263 -5.375,-4.06888 -5.375,-7.568v-5.375c0,-3.49912 2.25212,-6.45538 5.375,-7.568zM37.32669,99.12306c1.634,1.31419 3.54481,2.29512 5.67331,2.7305v8.33394h-13.18487c0.78475,-4.57412 3.526,-8.63225 7.51156,-11.06444zM24.1875,56.4375h18.8125v13.70894c-6.12481,1.24969 -10.75,6.67575 -10.75,13.16606v5.375c0,2.26287 0.61544,4.36719 1.60981,6.24038c-5.21106,3.44806 -8.686,9.05688 -9.47613,15.25963h-2.88369v-51.0625c0,-1.48081 1.204,-2.6875 2.6875,-2.6875zM24.1875,120.9375c-1.4835,0 -2.6875,-1.20669 -2.6875,-2.6875v-2.6875h21.5v5.375zM120.9375,137.0625h-69.875c-1.4835,0 -2.6875,-1.20669 -2.6875,-2.6875v-2.6875h75.25v2.6875c0,1.48081 -1.204,2.6875 -2.6875,2.6875zM147.8125,120.9375h-18.8125v-5.375h21.5v2.6875c0,1.48081 -1.204,2.6875 -2.6875,2.6875z" fill="url(#color-4_43991_gr4)"></path></g></g></svg>
+                    </div>
+                    <div class="col">
+                        <div class="row no-margin">
+                            <div class="col-auto no-padding m-r-10 m-b-5 m-t-5"  v-for="segment in item.segments" v-bind:key="segment.id">
+                                <div class="font-heading fs-10 lh-20 p-l-10 p-r-10 bg-master-lightest btn-rounded">
+                                    {{segment.name}}
+                                    <i class="fa fa-times muted m-l-10 pointer requestModal" :data-type="'detachSegment_'+segment.id" ></i>
+                                </div>
+                                <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" :type="'detachSegment_'+segment.id">
+                                    <detach-announcement-from-segment-form-component :data="segment" :announcement_id="item.id" :announcement_title="item.title" section="allAnnouncementsSection"></detach-announcement-from-segment-form-component>
+                                </modal-component>
+                            </div>
+                        </div>
+                    </div>
+                    <modal-component :key="item.id" class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="assignSegment">
+                        <assign-announcement-to-segment-form-component :data="item" section="allAnnouncementsSection"></assign-announcement-to-segment-form-component>
+                    </modal-component>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+    export default {
+        props: {
+            section: {
+                default: 'announcementsSection'
+            }
+        },
+        data(){
+            return {
+                expanded: false,
+            }
+        },
+        methods: {
+        },
+        mixins: [componentHandler]
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/announcements/forms/AssignAnnouncementToSegmentFormComponent.vue b/resources/assets/vue/components/announcements/forms/AssignAnnouncementToSegmentFormComponent.vue
new file mode 100644
index 00000000..e03fb36c
--- /dev/null
+++ b/resources/assets/vue/components/announcements/forms/AssignAnnouncementToSegmentFormComponent.vue
@@ -0,0 +1,67 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <loading-component style="height: 50px; top: 0;" key="1" color="success" v-show="$store.getters.isLoading(section)"></loading-component>
+            <div class="row" v-show="!$store.getters.isLoading(section)">
+                <div class="col">
+                    <div class="row m-b-10">
+                        <div class="col">
+                            <h3 class="all-caps m-b-5 bold no-margin">Assign Segment</h3>
+                            <div class="fs-11">Select a segment to view annoucment with title <span class="bold">{{parameters.title | truncate(10) }}</span></div>
+                        </div>
+                    </div>
+                    <div class="row m-b-5 animate__animated animate__fadeInUpBig animate__fast" v-if="error">
+                        <div class="col">
+                            <small class="bold fs-10 text-danger">{{error}}</small>
+                        </div>
+                    </div>
+                    <div class="row m-b-15">
+                        <div class="col">
+                            <validation-wrapper-component selectable :validator="$v.parameters.segment_id">
+                                <label>Segment</label>
+                                <selectable-component :endpoint="route('api.segment.list') + '?filters=' + JSON.stringify({'id_not_in': currentSegmentIds})" :section="'segmentsListSection_'+data.id" valueColumn="id" :labelColumn="['name']" v-model="parameters.segment_id"></selectable-component> 
+                            </validation-wrapper-component>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col p-r-5">
+                            <div class="btn btn-sm btn-default bg-master-lightest btn-block b-rad-none" data-dismiss="modal">Not Now</div>
+                        </div>
+                        <div class="col p-l-5">
+                            <div class="btn btn-sm btn-success btn-block b-rad-none" @click="submit(route('api.announcement.segment.assign', data.id), 'post', section, true, false)">Assign Segment</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import ModalFormHandler from '../../../general/mixins/modalFormHandler';
+    import { required } from "vuelidate/lib/validators";
+    export default {
+        data(){
+            return {
+                parameters: {
+                    segment_id: ''
+                }
+            }
+        },
+        validations: {
+            parameters: {
+                segment_id: {
+                    required
+                }
+            }
+        },
+        computed: {
+            currentSegmentIds(){
+                return this.parameters.segments.map(function (value){
+                    return value.id;
+                })
+            }
+        },
+        mixins: [ModalFormHandler]
+
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/announcements/forms/DetachAnnouncementFromSegmentFormComponent.vue b/resources/assets/vue/components/announcements/forms/DetachAnnouncementFromSegmentFormComponent.vue
new file mode 100644
index 00000000..3903dcdc
--- /dev/null
+++ b/resources/assets/vue/components/announcements/forms/DetachAnnouncementFromSegmentFormComponent.vue
@@ -0,0 +1,51 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <loading-component style="height: 300px; top: 0;" key="1" color="success" v-show="isLoading" ></loading-component>
+            <div class="row m-b-5 animate__animated animate__fadeInUpBig animate__fast" v-if="error">
+                <div class="col">
+                    <small class="bold fs-10 text-danger">{{error}}</small>
+                </div>
+            </div>
+            <div class="row justify-content-center" v-show="!isLoading">
+                <div class="col">
+                    <div class="row m-b-20">
+                        <div class="col">
+                            <h3 class="all-caps">Are you Sure?</h3>
+                            <div class="fs-11">Are you sure you want to remove <span class="bold">{{this.item.name}}</span>from viewing this annoucment with title <span class="bold">{{ announcement_title | truncate(10)}}</span></div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col p-r-5">
+                            <div class="btn btn-sm btn-success btn-block b-rad-none" data-dismiss="modal">Cancel</div>
+                        </div>
+                        <div class="col p-l-5">
+                            <div class="btn btn-sm btn-danger btn-block b-rad-none" @click="submit(route('api.announcement.segment.detach', announcement_id, item.id), 'delete', section, true, true)">Remove Segment</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+    import ModalFormHandler from '../../../general/mixins/modalFormHandler';
+    export default {
+        props: {
+            announcement_id: {
+                required: true,
+                type: Number
+            },
+            announcement_title: {
+                required: true,
+                type: String
+            }
+        },        
+        created() {
+            console.log("created detach");
+        },
+
+        mixins: [componentHandler, ModalFormHandler]
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/announcements/forms/ViewAnnouncementFormComponent.vue b/resources/assets/vue/components/announcements/forms/ViewAnnouncementFormComponent.vue
new file mode 100644
index 00000000..40a46cc8
--- /dev/null
+++ b/resources/assets/vue/components/announcements/forms/ViewAnnouncementFormComponent.vue
@@ -0,0 +1,51 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <div class="alert alert-info padding-15" role="alert" v-show="!isLoading">
+                <div class="row">
+                    <div class="col">
+                        <h5 class="pull-left">{{item.title}}</h5>
+                    </div>
+                    <div class="col-auto">
+                        <i class="fa fa-times text-info-darker pointer" data-dismiss="modal"></i>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col">
+                        <p v-html="item.description"></p>
+                    </div>
+                </div>
+            </div>
+            <!--<div class="row bg-white" v-show="!isLoading">-->
+                <!--<div class="col">-->
+
+                    <!--<div class="row m-b-20">-->
+                        <!--<div class="col">-->
+                            <!--<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="50" height="50" viewBox="0 0 172 172" style=" fill:#000000;"><defs><linearGradient x1="99.4375" y1="43.33594" x2="99.4375" y2="60.14625" gradientUnits="userSpaceOnUse" id="color-1_43971_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="106.15625" y1="26.875" x2="106.15625" y2="146.16775" gradientUnits="userSpaceOnUse" id="color-2_43971_gr2"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="83.3125" y1="26.875" x2="83.3125" y2="146.16775" gradientUnits="userSpaceOnUse" id="color-3_43971_gr3"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="73.90625" y1="26.875" x2="73.90625" y2="146.16775" gradientUnits="userSpaceOnUse" id="color-4_43971_gr4"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="51.0625" y1="26.875" x2="51.0625" y2="146.16775" gradientUnits="userSpaceOnUse" id="color-5_43971_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="51.0625" y1="26.875" x2="51.0625" y2="146.16775" gradientUnits="userSpaceOnUse" id="color-6_43971_gr6"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="45.6875" y1="26.875" x2="45.6875" y2="146.16775" gradientUnits="userSpaceOnUse" id="color-7_43971_gr7"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="43" y1="26.875" x2="43" y2="146.16775" gradientUnits="userSpaceOnUse" id="color-8_43971_gr8"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g><path d="M112.875,59.125h-26.875c-1.4835,0 -2.6875,-1.204 -2.6875,-2.6875v-10.75c0,-1.4835 1.204,-2.6875 2.6875,-2.6875h26.875c1.4835,0 2.6875,1.204 2.6875,2.6875v10.75c0,1.4835 -1.204,2.6875 -2.6875,2.6875z" fill="url(#color-1_43971_gr1)"></path><path d="M155.875,96.75c0,-7.97381 -5.82381,-14.59581 -13.4375,-15.88313v-18.82325c0,-2.08819 -1.16906,-3.94525 -3.05031,-4.85094c-1.88125,-0.90031 -4.06081,-0.65575 -5.69481,0.64769l-21.48925,17.18925c-0.08062,0.0645 -0.13975,0.14781 -0.21769,0.21769h-31.36044c-7.40944,0 -13.4375,6.02806 -13.4375,13.4375h-5.375c-2.96431,0 -5.375,2.41069 -5.375,5.375v5.375c0,2.96431 2.41069,5.375 5.375,5.375h5.375c0,7.40944 6.02806,13.4375 13.4375,13.4375v16.125c0,5.92863 4.82138,10.75 10.75,10.75c5.92863,0 10.75,-4.82137 10.75,-10.75v-16.125h9.86044c0.07794,0.06988 0.13706,0.15319 0.22038,0.22037l21.48656,17.18925c0.98094,0.78475 2.16075,1.18519 3.35131,1.18519c0.79281,0 1.59369,-0.17738 2.3435,-0.5375c1.88125,-0.903 3.05031,-2.76275 3.05031,-4.84825v-18.82325c7.61369,-1.28731 13.4375,-7.90931 13.4375,-15.88312zM61.8125,99.4375v-5.375h5.375v5.375zM96.75,134.375c0,2.96431 -2.41069,5.375 -5.375,5.375c-2.96431,0 -5.375,-2.41069 -5.375,-5.375v-16.125h10.75zM80.625,112.875c-4.44513,0 -8.0625,-3.61738 -8.0625,-8.0625v-16.125c0,-4.44513 3.61737,-8.0625 8.0625,-8.0625h29.5625v32.25h-8.0625zM137.05175,131.46175l-21.48925,-17.19462v-35.04231l10.75,-8.59194v26.11713h5.375v-30.41175l5.375,-4.29462l0.00538,69.42887c0,0 -0.00538,-0.00269 -0.01613,-0.01075zM142.4375,107.11837v-20.73675c4.6225,1.20131 8.0625,5.375 8.0625,10.36838c0,4.99337 -3.44,9.16706 -8.0625,10.36838z" fill="url(#color-2_43971_gr2)"></path><path d="M77.9375,91.375v5.375h5.375v-5.375h5.375v-5.375h-5.375c-2.96431,0 -5.375,2.41069 -5.375,5.375z" fill="url(#color-3_43971_gr3)"></path><path d="M21.5,107.5v-67.1875c0,-4.44512 3.61737,-8.0625 8.0625,-8.0625h88.6875c4.44512,0 8.0625,3.61738 8.0625,8.0625v10.75h5.375v-10.75c0,-7.40944 -6.02806,-13.4375 -13.4375,-13.4375h-88.6875c-7.40944,0 -13.4375,6.02806 -13.4375,13.4375v67.1875c0,7.40944 6.02806,13.4375 13.4375,13.4375h32.25v-5.375h-32.25c-4.44513,0 -8.0625,-3.61737 -8.0625,-8.0625z" fill="url(#color-4_43971_gr4)"></path><path d="M32.25,43h37.625v5.375h-37.625z" fill="url(#color-5_43971_gr5)"></path><path d="M32.25,53.75h37.625v5.375h-37.625z" fill="url(#color-6_43971_gr6)"></path><path d="M32.25,64.5h26.875v5.375h-26.875z" fill="url(#color-7_43971_gr7)"></path><path d="M32.25,75.25h21.5v5.375h-21.5z" fill="url(#color-8_43971_gr8)"></path></g></g></svg>-->
+                            <!--<label class="fs-20 all-caps"><b>{{item.title}}</b></label>-->
+                            <!--<label class="float-right fs-10"><i>{{item.created_at}}</i></label>-->
+                        <!--</div>-->
+                    <!--</div>-->
+                    <!--<div class="row m-b-20">-->
+                        <!--<div class="col">-->
+                            <!--<div class=""><b>{{item.description}}</b></div>-->
+                        <!--</div>-->
+                    <!--</div>-->
+                    <!--<div class="row justify-content-md-center p-b-10">-->
+                        <!--<div class="col-3">-->
+                            <!--<div class="btn btn-sm btn-success btn-block b-rad-none" data-dismiss="modal">OK</div>-->
+                        <!--</div>-->
+                    <!--</div>-->
+                <!--</div>-->
+            <!--</div>-->
+        </div>
+    </div>
+</template>
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+    import ModalFormHandler from '../../../general/mixins/modalFormHandler';
+    export default {
+        mixins: [componentHandler, ModalFormHandler]
+
+    }
+</script>
\ No newline at end of file
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
diff --git a/resources/assets/vue/components/settings/forms/AnnouncementFormComponent.vue b/resources/assets/vue/components/settings/forms/AnnouncementFormComponent.vue
index a29f7572..830ab23c 100644
--- a/resources/assets/vue/components/settings/forms/AnnouncementFormComponent.vue
+++ b/resources/assets/vue/components/settings/forms/AnnouncementFormComponent.vue
@@ -32,16 +32,16 @@
                     </div>
 
                     <div class="row m-b-20">
-                        <div class="col-6">
+                        <div class="col-6 p-r-0">
                             <validation-wrapper-component :validator="$v.parameters.starting_on">
                                 <label>Start Date</label>
-                                <input type="date" v-model="parameters.starting_on">
+                                <date-picker-component v-model="parameters.starting_on"></date-picker-component>
                             </validation-wrapper-component>
                         </div>
-                        <div class="col-6">
+                        <div class="col-6 p-l-0">
                             <validation-wrapper-component :validator="$v.parameters.ending_on">
                                 <label>End Date</label>
-                                <input type="date" v-model="parameters.ending_on">
+                                <date-picker-component v-model="parameters.ending_on"></date-picker-component>
                             </validation-wrapper-component>
                         </div>
                     </div>  
@@ -50,7 +50,7 @@
                             <div class="btn btn-sm btn-default bg-master-lightest btn-block b-rad-none" :data-dismiss="closable ? 'modal' : ''" @click="$emit('close')">Cancel</div>
                         </div>
                         <div class="col p-l-5">
-                            <div class="btn btn-sm btn-success btn-block b-rad-none" @click="submitForm()">{{this.data?"Update":"Create"}}</div>
+                            <div class="btn btn-sm btn-success btn-block b-rad-none" @click="submitForm()">{{data ? "Update" : "Create"}}</div>
                         </div>
                     </div>
                 </div>
@@ -91,9 +91,6 @@
                 description: {
                     required
                 },
-                // segment_id: {
-                //     required
-                // }, 
                 starting_on:{
                     required
                 },
@@ -101,26 +98,19 @@
                     required
                 },                
             }
-        },
-        computed:{
-
         },
         created(){
-            console.log("lado form");
+            if (this.data) {
+                this.parameters.starting_on = this.data.starting_on;
+                this.parameters.ending_on = this.data.ending_on;
+                this.parameters.title = this.data.title;
+                this.parameters.description = this.data.description;
+            }
         },
         methods: {
             submitForm(){
-                //this.submit(route('api.announcement.create'), 'post', this.section, true, false);
                 this.submit((this.data ? this.route('api.announcement.update', this.data.id) : this.route('api.announcement.create')), (this.data ? 'put' : 'post'), this.section, true, false)
             },
-            // successHandler(response){
-            //     this.closeModal();
-            //     //this.formHandler();
-            //     this.resetForm();
-            // },
-            // errorHandler(error){
-            //     this.formHandler(error.message);
-            // }
         },
         mixins: [ModalFormHandler],