diff --git a/app/Classes/Modules/Companies/ControllersLogic/AssignCompanyConnectionToConnectionSegmentLogic.php b/app/Classes/Modules/Companies/ControllersLogic/AssignCompanyConnectionToConnectionSegmentLogic.php
index cee72e84..e832b854 100644
--- a/app/Classes/Modules/Companies/ControllersLogic/AssignCompanyConnectionToConnectionSegmentLogic.php
+++ b/app/Classes/Modules/Companies/ControllersLogic/AssignCompanyConnectionToConnectionSegmentLogic.php
@@ -7,6 +7,8 @@ use App\Classes\General\Abstracts\AbstractControllerLogic;
 use App\Classes\Modules\Companies\Processors\AssignConnectionSegmentProcessor;
 use App\Classes\Modules\Companies\Services\FetchesCompany;
 use App\Classes\Modules\Companies\Services\FetchesCompanyConnection;
+use App\Classes\Modules\Contacts\DataTransferObjects\ContactObject;
+use App\Classes\Modules\Contacts\Processors\CreateContactProcessor;
 use App\Http\Resources\CompanyResource;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Request;
@@ -33,17 +35,22 @@ class AssignCompanyConnectionToConnectionSegmentLogic extends AbstractController
     /** @var AssignConnectionSegmentProcessor */
     private $assignCompanyConnectionToConnectionSegmentProcessor;
 
+    /** @var CreateContactProcessor */
+    private $createContactProcessor;
+
     /**
      * AssignCompanyToSegmentLogic constructor.
      * @param FetchesCompany $fetchesCompany
      * @param FetchesCompanyConnection $fetchesCompanyConnection
      * @param AssignConnectionSegmentProcessor $assignCompanyConnectionToConnectionSegmentProcessor
+     * @param CreateContactProcessor $createContactProcessor
      */
-    public function __construct(FetchesCompany $fetchesCompany, FetchesCompanyConnection $fetchesCompanyConnection, AssignConnectionSegmentProcessor $assignCompanyConnectionToConnectionSegmentProcessor)
+    public function __construct(FetchesCompany $fetchesCompany, FetchesCompanyConnection $fetchesCompanyConnection, AssignConnectionSegmentProcessor $assignCompanyConnectionToConnectionSegmentProcessor, CreateContactProcessor $createContactProcessor)
     {
         $this->fetchesCompany = $fetchesCompany;
         $this->fetchesCompanyConnection = $fetchesCompanyConnection;
         $this->assignCompanyConnectionToConnectionSegmentProcessor = $assignCompanyConnectionToConnectionSegmentProcessor;
+        $this->createContactProcessor = $createContactProcessor;
     }
 
     /**
@@ -62,6 +69,11 @@ class AssignCompanyConnectionToConnectionSegmentLogic extends AbstractController
 
         $this->assignCompanyConnectionToConnectionSegmentProcessor->execute($companyConnection, $request->input('segment_id'));
 
+        if ($request->input('segment_id') == 11) {
+            $contactObject = new ContactObject('Whatsapp: ' . $request->input('name'), $request->input('phone'), null, null);
+            $this->createContactProcessor->execute($contactObject, $company);
+        }
+
         return $this->resourceResponse(new CompanyResource($company));
     }
 }
\ No newline at end of file
diff --git a/resources/assets/vue/components/companies/elements/FulfilmentConfirmationFormComponent.vue b/resources/assets/vue/components/companies/elements/FulfilmentConfirmationFormComponent.vue
new file mode 100644
index 00000000..70222929
--- /dev/null
+++ b/resources/assets/vue/components/companies/elements/FulfilmentConfirmationFormComponent.vue
@@ -0,0 +1,38 @@
+<template>
+    <div class="row bg-white padding-25">
+        <div class="col">
+            <loading-component style="height: 300px; top: 0;" key="1" color="success" v-show="isLoading" ></loading-component>
+            <div class="row justify-content-center" v-show="!isLoading">
+                <div class="col">
+                    <div class="row">
+                        <div class="col">
+                            <h3>欲知更多详情，请浏览 <a href="https://bit.ly/4a5v34p" target="_blank" class="text-underline">https://bit.ly/4a5v34p</a> 或联系 Whatsapp: <a href="https://wa.me/601136814520" target="_blank" class="text-underline text-success">+6011-36814520</a></h3>
+                        </div>
+                    </div>
+                    <div class="row p-t-15">
+                        <div class="col p-r-5">
+                            <div class="btn btn-lg block btn m-b-5 no-border bg-master-lighter" data-dismiss="modal">Cancel</div>
+                        </div>
+                        <div class="col p-l-5">
+                            <div class="btn btn-lg block btn m-b-5 no-border text-white bg-primary pointer" @click="activateService(10)">Confirm</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+    import ModalFormHandler from '../../../general/mixins/modalFormHandler';
+    export default {
+        props: {
+            activateService: {
+                type: Function,
+                required: true,
+            },
+        },
+        mixins: [componentHandler, ModalFormHandler]
+
+    }
+</script>
diff --git a/resources/assets/vue/components/companies/elements/FulfilmentLaterFormComponent.vue b/resources/assets/vue/components/companies/elements/FulfilmentLaterFormComponent.vue
new file mode 100644
index 00000000..2d803989
--- /dev/null
+++ b/resources/assets/vue/components/companies/elements/FulfilmentLaterFormComponent.vue
@@ -0,0 +1,78 @@
+<template>
+    <div class="row bg-white padding-25">
+        <div class="col">
+            <loading-component style="height: 300px; top: 0;" key="1" color="success" v-show="isLoading" ></loading-component>
+            <div class="row justify-content-center" v-show="!isLoading">
+                <div class="col">
+                    <div class="row">
+                        <div class="col">
+                            <h3>Please provide your Whatsapp phone number:</h3>
+
+                        </div>
+                    </div>
+                    <div class="row m-t-20 m-b-15">
+                        <div class="col-12">
+                            <validation-wrapper-component :validator="$v.parameters.name">
+                                <label>Name</label>
+                                <input class="form-control" v-model="parameters.name">
+                            </validation-wrapper-component>
+                        </div>
+                        <div class="col-12 p-t-15">
+                            <validation-wrapper-component :validator="$v.parameters.phone">
+                                <label>Phone</label>
+                                <input class="form-control" v-model="parameters.phone">
+                            </validation-wrapper-component>
+                        </div>
+                    </div>
+                    <div class="row p-t-15">
+                        <div class="col p-r-5">
+                            <div class="btn btn-lg block btn m-b-5 no-border bg-master-lighter" data-dismiss="modal">Cancel</div>
+                        </div>
+                        <div class="col p-l-5">
+                            <div class="btn btn-lg block btn m-b-5 no-border text-white bg-primary pointer" @click="activateLater">Confirm</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import { required } from 'vuelidate/lib/validators';
+    import componentHandler from '../../../general/mixins/componentHandler';
+    import modalFormHandler from '../../../general/mixins/modalFormHandler';
+    export default {
+        props: {
+            company:{
+                type: Object,
+                required: true
+            }
+        },
+        data() {
+            return {
+                parameters: {
+                    name: '',
+                    phone: '',
+                }
+            }
+        },
+        validations: {
+            parameters: {
+                name: { required },
+                phone: { required },
+            }
+        },
+        methods: {
+            activateLater(){
+                this.parameters.segment_id = 11
+       
+                this.submit(this.route('api.company.connection.assign', this.company.id, this.company.company_module.connections[0].id), 'post', 'activateService', true, false);
+            },
+            successHandler(){
+                location.reload();
+            }
+        },
+        mixins: [componentHandler, modalFormHandler]
+
+    }
+</script>
diff --git a/resources/assets/vue/components/companies/elements/NewServiceAnnouncementComponent.vue b/resources/assets/vue/components/companies/elements/NewServiceAnnouncementComponent.vue
new file mode 100644
index 00000000..8e908ebf
--- /dev/null
+++ b/resources/assets/vue/components/companies/elements/NewServiceAnnouncementComponent.vue
@@ -0,0 +1,94 @@
+<template>
+    <div class="row m-t-15 m-b-15 align-items-end parentContainer" v-if="company">
+        <div class="col">
+            <!-- 1688 consent -->
+            <div class="row m-l-0 m-r-0 m-b-15 animate__animated animate__tada animate__repeat-2 animate__delay-3s" v-if="!company.segments.some(item => item.id === 10 || item.id === 11 || item.id === 12)">
+                <div class="col bg-white padding-15">
+                    <div class="row">
+                        <div class="col">
+                            <div class="row ">
+                                <div class="col">
+                                    <h5 class="m-t-0 text-justify">重磅消息! CIEF 正式开通 <span class="bold">3PL fulfillment 服务</span>!! 你从中国进来的货物, 我们可以直接帮你仓储, 分拣打包, 直接送货到您的顾客手上, 只需系统对接你的 Lazada , Shopee , Tiktok 网店, 就能实现全自动化! 一个月只需 <span class="bold">RMX88</span>! </h5>
+                                    <h5 class="m-t-0 text-justify">Exciting news! CIEF has officially launched its <span class="bold">3PL fulfillment service</span>! We can assist with warehousing, sorting, packaging, and direct delivery of your goods from China to your customers. Simply integrate your Lazada, Shopee, or TikTok online stores with our system for full automation! Only <span class="bold">RMX88</span> per month!</h5>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <div class="col-12 text-center">
+                                    <div class="btn btn-md block btn m-b-5 no-border text-white pointer bg-success requestModal" data-type="fulfilment-interested">Interested now (感兴趣)</div>
+                                </div>
+                                <div class="col-12 text-center">
+                                    <div class="btn btn-md block btn m-b-5 pointer requestModal" data-type="fulfilment-later">Interested later (感兴趣，但现在不需要)</div>
+                                </div>
+                                <div class="col-12 text-center">
+                                    <div class="btn btn-md block btn m-b-5 no-border text-white pointer bg-danger" @click="activateService(12)">Not interested (不感兴趣)</div>
+                                </div>
+                              
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <modal-component class="animate__animated animate__fast animate__fadeIn" type="fulfilment-interested" styleType="fill-in" size="large">
+                <fulfilment-confirmation-form-component
+                    class="text-center"
+                    section="activateService"
+                    :activateService="activateService"
+                >
+                </fulfilment-confirmation-form-component>
+            </modal-component>
+            <modal-component class="animate__animated animate__fast animate__fadeIn" type="fulfilment-later" styleType="fill-in" size="large">
+                <fulfilment-later-form-component
+                    section="activateService"
+                    :company="company"
+                >
+                </fulfilment-later-form-component>
+            </modal-component>
+        </div>
+    </div>
+</template>
+
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+    export default {
+        data(){
+            return {
+                section: 'newServiceList',
+                parameters: {
+                    segment_id: ''
+                },
+                expanded: false,
+                failed: false,
+                part: 0,
+                isFetchCompany: false,
+                company: null
+            }
+        },
+        created(){
+            this.fetchCompany();
+        },
+        methods: {
+            fetchCompany(){
+                this.parameters = null;
+                this.isFetchCompany = true;
+                this.submit(route('api.company.show', this.$store.getters.getCompanyId), 'get', this.section, false, false)
+            },
+            activateService(segmentId){
+                this.parameters = {
+                    segment_id: segmentId
+                };
+                this.part = 1;
+                this.submit(this.route('api.company.connection.assign', this.company.id, this.company.company_module.connections[0].id), 'post', 'activateService', true, false);
+            },
+            successHandler(response){
+                if (this.isFetchCompany) {
+                    this.company = response.payload.data;
+                    this.isFetchCompany = false;
+                }
+                if(this.part == 1 || this.part == 4){
+                    location.reload();
+                }
+            }
+        },
+        mixins: [componentHandler]
+    }
+</script>
diff --git a/resources/views/partials/menu.blade.php b/resources/views/partials/menu.blade.php
index f019d874..d19bbe2a 100644
--- a/resources/views/partials/menu.blade.php
+++ b/resources/views/partials/menu.blade.php
@@ -206,8 +206,8 @@
                         </div>
                     </div>
                 </div>
-                <div class="row no-margin d-none" :class="[{'d-flex': !$store.getters.isAdmin && ![7,8].includes($store.getters.getCompanyModuleType)}]" v-if="!$store.getters.isAdmin && ![7,8].includes($store.getters.getCompanyModuleType)">
-                    <div class="absolute hint-text dotted-grid" style="width: 80px;height: 80px; right: 27px; bottom: 28px; z-index: 1; opacity: 0.3;"></div>
+                <div class="row no-margin d-none relative" :class="[{'d-flex': !$store.getters.isAdmin && ![7,8].includes($store.getters.getCompanyModuleType)}]" v-if="!$store.getters.isAdmin && ![7,8].includes($store.getters.getCompanyModuleType)">
+                    <div class="absolute hint-text dotted-grid" style="width: 80px;height: 80px; right: 0; bottom: 0; z-index: 1; opacity: 0.3;"></div>
                     <div class="absolute hint-text dotted-grid" style="width: 80px;height: 80px; z-index: 1; opacity: 0.3;"></div>
                     <div class="col bg-info text-white padding-25">
                         <div class="row">
@@ -223,6 +223,9 @@
                         </div>
                     </div>
                 </div>
+                <div class="row no-margin d-none" :class="[{'d-flex': !$store.getters.isAdmin && ![7,8].includes($store.getters.getCompanyModuleType)}]" v-if="!$store.getters.isAdmin && ![7,8].includes($store.getters.getCompanyModuleType)">    
+                    <new-service-announcement-component></new-service-announcement-component>
+                </div>
             </div>
         </div>
     </div>