diff --git a/app/Classes/General/Interfaces/Notifiable.php b/app/Classes/General/Interfaces/Notifiable.php
new file mode 100644
index 00000000..e9d8f22d
--- /dev/null
+++ b/app/Classes/General/Interfaces/Notifiable.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\Classes\General\Interfaces;
+
+
+use Illuminate\Database\Eloquent\Relations\MorphTo;
+
+interface Notifiable
+{
+    public function subject(): MorphTo;
+
+    public function target(): MorphTo;
+
+    public function causer(): MorphTo;
+}
\ No newline at end of file
diff --git a/app/Classes/Modules/Companies/ControllersLogic/ApproveIdentificationDocumentLogic.php b/app/Classes/Modules/Companies/ControllersLogic/ApproveIdentificationDocumentLogic.php
index d5e052a9..4374cd73 100644
--- a/app/Classes/Modules/Companies/ControllersLogic/ApproveIdentificationDocumentLogic.php
+++ b/app/Classes/Modules/Companies/ControllersLogic/ApproveIdentificationDocumentLogic.php
@@ -13,6 +13,9 @@ use App\Classes\General\Abstracts\AbstractControllerLogic;
 use App\Classes\Modules\Documents\Services\FetchesDocument;
 
 use App\Classes\Modules\Documents\Services\ApprovesDocument;
+use App\Classes\Modules\Notifications\DataTransferObjects\NotificationObject;
+Use App\Classes\Modules\Notifications\Processors\CreateNotificationProcessor;
+use App\Classes\General\Interfaces\Notifiable;
 
 use App\Models\Document;
 use Illuminate\Http\JsonResponse;
@@ -46,6 +49,9 @@ class ApproveIdentificationDocumentLogic extends AbstractControllerLogic
     /** @var UpdatesCompanyStatus */
     private $updatesCompanyStatus;
 
+    /** @var CreateNotificationProcessor */
+    private $createNotificationProcessor;
+
     /**
      * ApproveIdentificationDocumentLogic constructor.
      * @param CanApproveDocument $canApproveDocument
@@ -53,14 +59,16 @@ class ApproveIdentificationDocumentLogic extends AbstractControllerLogic
      * @param RejectsDocument $rejectsDocument
      * @param FetchesDocument $fetchesDocument
      * @param UpdatesCompanyStatus $updatesCompanyStatus
+     * @param CreateNotificationProcessor $createNotificationProcessor
      */
-    public function __construct(CanApproveDocument $canApproveDocument, ApprovesDocument $approvesDocument, RejectsDocument $rejectsDocument, FetchesDocument $fetchesDocument, UpdatesCompanyStatus $updatesCompanyStatus)
+    public function __construct(CanApproveDocument $canApproveDocument, ApprovesDocument $approvesDocument, RejectsDocument $rejectsDocument, FetchesDocument $fetchesDocument, UpdatesCompanyStatus $updatesCompanyStatus, CreateNotificationProcessor $createNotificationProcessor)
     {
         $this->canApproveDocument = $canApproveDocument;
         $this->approvesDocument = $approvesDocument;
         $this->rejectsDocument = $rejectsDocument;
         $this->fetchesDocument = $fetchesDocument;
         $this->updatesCompanyStatus = $updatesCompanyStatus;
+        $this->createNotificationProcessor = $createNotificationProcessor;
     }
 
     /**
@@ -84,6 +92,20 @@ class ApproveIdentificationDocumentLogic extends AbstractControllerLogic
 
         $this->updatesCompanyStatus->execute($document->owner, $status === 'approve' ? ApprovalStatus::APPROVED : ApprovalStatus::REJECTED);
 
+        $object = new NotificationObject(
+            'ID Verification ' . ( $status === 'approve' ? 'Approved' : 'Rejected' ), 
+            ( $status === 'approve' ? 'Dear user, congratulations that your ' : 'Dear user, we are sorry to inform you that your ' ) . ( $document->type ===  'IDENTITY_CARD' ? 'IC' : 'SSM' ) . ( $status === 'approve' ? ' has been approved. Start your first order now!' : ' has been rejected due to ' . ( $request->input('rejectRemark') ?? '' ) . ', please resubmit it for further action.' ), 
+            $document->owner,
+            $document->owner->employees()->first(),
+            $document, 
+        );
+
+        $this->createNotificationProcessor->execute($object);
+
+        if($status === 'approve'){
+            $orders = $this->updatesOrdersStatus->execute($document->owner, ApprovalStatus::APPROVED);
+        }
+
         return $this->resourceResponse(new DocumentResource($document));
 
     }
diff --git a/app/Classes/Modules/Notifications/ControllersLogic/ListNotificationsLogic.php b/app/Classes/Modules/Notifications/ControllersLogic/ListNotificationsLogic.php
new file mode 100644
index 00000000..0fdbf6f9
--- /dev/null
+++ b/app/Classes/Modules/Notifications/ControllersLogic/ListNotificationsLogic.php
@@ -0,0 +1,61 @@
+<?php
+
+namespace App\Classes\Modules\Notifications\ControllersLogic;
+
+
+use App\Classes\General\Abstracts\AbstractControllerLogic;
+use App\Classes\Modules\Notifications\Services\ListsNotification;
+use App\Http\Resources\NotificationResource;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class ListNotificationsLogic extends AbstractControllerLogic
+{
+
+    /**
+     * @return array
+     */
+    protected function notification():array {
+        return [
+            'title' => 'Retrieve Notifications',
+            'message' => 'You have successfully retrieved a list of Notifications'
+        ];
+    }
+
+    /** @var ListsNotification */
+    private $listsNotification;
+
+    /**
+     * ListNotificationsLogic constructor.
+     * @param ListsNotification $listsNotification
+     */
+    public function __construct(
+        ListsNotification $listsNotification
+    )
+    {
+        $this->listsNotification = $listsNotification;
+    }
+
+
+    /**
+     * @param Request $request
+     * @return JsonResponse
+     * @throws \App\Classes\Exceptions\AccessForbiddenException
+     * @throws \App\Classes\Exceptions\MalformedRequestException
+     * @throws \App\Classes\Exceptions\RequestValidationException
+     */
+    public function logic(Request $request) : JsonResponse
+    {
+
+        $filters = [
+            // 'target_id'=>auth()->user()->id,
+            // 'per_page'=>$request->route('per_page')
+        ];
+
+        $notifications = $this->listsNotification->execute($filters);
+
+        return $this->collectionResponse(NotificationResource::collection($notifications));
+
+    }
+
+}
\ No newline at end of file
diff --git a/app/Classes/Modules/Notifications/DataTransferObjects/NotificationObject.php b/app/Classes/Modules/Notifications/DataTransferObjects/NotificationObject.php
new file mode 100644
index 00000000..40dc4f3c
--- /dev/null
+++ b/app/Classes/Modules/Notifications/DataTransferObjects/NotificationObject.php
@@ -0,0 +1,101 @@
+<?php
+
+namespace App\Classes\Modules\Notifications\DataTransferObjects;
+
+use App\Classes\General\Interfaces\Notifiable;
+use App\Classes\General\Interfaces\DataTransferObject;
+use App\Classes\ValueObjects\Constants\ApprovalStatus;
+
+class NotificationObject  implements DataTransferObject
+{
+    /** @var string */
+    private $title;
+
+    /** @var string  */
+    private $description;
+
+    /** @var Notifiable  */
+    private $subject;
+
+    /** @var Notifiable  */
+    private $target;
+
+    /** @var Notifiable  */
+    private $causer;
+
+    /** @var int|null  */
+    private $status;
+
+    /**
+     * OrderObject constructor.
+     * @param string $reference
+     * @param int $type
+     * @param int|null $status
+     */
+    public function __construct(
+        string $title, 
+        string $description, 
+        Notifiable $subject, 
+        Notifiable $target, 
+        Notifiable $causer, 
+        ?int $status = ApprovalStatus::PENDING_VERIFICATION
+    )
+    {
+        $this->title = $title;
+        $this->description = $description;
+        $this->subject = $subject;
+        $this->target = $target;
+        $this->causer = $causer;
+        $this->status = $status;
+    }
+
+    /**
+     * @return int
+     */
+    public function getTitle(): string
+    {
+        return $this->title;
+    }
+
+    /**
+     * @return int
+     */
+    public function getDescription(): string
+    {
+        return $this->description;
+    }
+
+    /**
+     * @return Notifiable
+     */
+    public function getSubject(): Notifiable
+    {
+        return $this->subject;
+    }
+
+    /**
+     * @return Notifiable
+     */
+    public function getTarget(): Notifiable
+    {
+        return $this->target;
+    }
+
+    /**
+     * @return Notifiable
+     */
+    public function getCauser(): Notifiable
+    {
+        return $this->causer;
+    }
+
+    /**
+     * @return int
+     */
+    public function getStatus(): int
+    {
+        return $this->status;
+    }
+
+
+}
diff --git a/app/Classes/Modules/Notifications/Processors/CreateNotificationProcessor.php b/app/Classes/Modules/Notifications/Processors/CreateNotificationProcessor.php
new file mode 100644
index 00000000..d6b077f8
--- /dev/null
+++ b/app/Classes/Modules/Notifications/Processors/CreateNotificationProcessor.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Classes\Modules\Notifications\Processors;
+
+use App\Classes\Modules\Notifications\DataTransferObjects\NotificationObject;
+use App\Classes\Modules\Notifications\Services\CreatesNotification;
+
+class CreateNotificationProcessor
+{
+    /** @var CreatesNotification */
+    private $createsNotification;
+
+    /**
+     * CreateNotificationProcessor constructor.
+     * @param CreatesNotification $createsNotification
+     */
+    public function __construct(CreatesNotification $createsNotification)
+    {
+        $this->createsNotification = $createsNotification;
+    }
+   
+    public function execute(NotificationObject $object)
+    {
+        $notification = $this->createsNotification->execute($object);
+        return $notification;
+    }
+}
diff --git a/app/Classes/Modules/Notifications/Services/CreatesNotification.php b/app/Classes/Modules/Notifications/Services/CreatesNotification.php
new file mode 100644
index 00000000..4f5ca5fd
--- /dev/null
+++ b/app/Classes/Modules/Notifications/Services/CreatesNotification.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Classes\Modules\Notifications\Services;
+
+use App\Classes\Modules\Notifications\DataTransferObjects\NotificationObject;
+use App\Models\Notification;
+
+class CreatesNotification
+{
+    /**
+     * @param NotificationObject $object
+     * @return \Illuminate\Database\Eloquent\Model
+     * @throws \App\Classes\Exceptions\MalformedRequestException
+     */
+    public function execute(NotificationObject $object) {
+        $model = new Notification();
+        $model->title = $object->getTitle();
+        $model->description = $object->getDescription();
+        $model->status = $object->getStatus();
+        $model->subject_type = get_class($object->getSubject());
+        $model->subject_id = $object->getSubject()->id;
+        $model->target_type = get_class($object->getTarget());
+        $model->target_id = $object->getTarget()->id;
+        $model->causer_type = get_class($object->getCauser());
+        $model->causer_id = $object->getCauser()->id;
+        $model->save();
+
+        return $model;
+    }
+}
\ No newline at end of file
diff --git a/app/Classes/Modules/Notifications/Services/ListsNotification.php b/app/Classes/Modules/Notifications/Services/ListsNotification.php
new file mode 100644
index 00000000..707e7ae8
--- /dev/null
+++ b/app/Classes/Modules/Notifications/Services/ListsNotification.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Classes\Modules\Notifications\Services;
+
+
+use App\Classes\General\Eloquent\AbstractListRecord;
+use Illuminate\Database\Eloquent\Builder;
+use App\Models\Notification;
+
+class ListsNotification extends AbstractListRecord
+{
+
+    /** @var Bank */
+    private $repository;
+
+    /**
+     * ListsBank constructor.
+     * @param Notification $repository
+     */
+    public function __construct(Notification $repository)
+    {
+        $this->repository = $repository;
+    }
+
+
+    /**
+     * @return Builder
+     */
+    function getRepository(): Builder
+    {
+        return $this->repository->newQuery();
+    }
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/Notifications/ListNotificationsController.php b/app/Http/Controllers/Notifications/ListNotificationsController.php
new file mode 100644
index 00000000..58455fc2
--- /dev/null
+++ b/app/Http/Controllers/Notifications/ListNotificationsController.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Controllers\Notifications;
+
+use App\Classes\Modules\Notifications\ControllersLogic\ListNotificationsLogic;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class ListNotificationsController
+{
+    /**
+     * @param Request $request
+     * @param ListNotificationsLogic $logic
+     * @return JsonResponse
+     */
+    public function list(Request $request, ListNotificationsLogic $logic): JsonResponse {
+        return $logic->execute($request);
+    }
+}
\ No newline at end of file
diff --git a/app/Http/Resources/NotificationResource.php b/app/Http/Resources/NotificationResource.php
new file mode 100644
index 00000000..564b7b31
--- /dev/null
+++ b/app/Http/Resources/NotificationResource.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Classes\ValueObjects\Constants\ApprovalStatus;
+use App\Classes\ValueObjects\Constants\BusinessType;
+use App\Classes\ValueObjects\Constants\DocumentType;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Illuminate\Support\Facades\Crypt;
+
+class NotificationResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return array
+     */
+    public function toArray($request)
+    {
+        return [
+            'id' => $this->id,
+            'title' => $this->title,
+            'description' => $this->description,
+            'long_ago' => $this->created_at->diffForHumans(),
+            'created_at' => $this->created_at->format('d-m-Y')
+        ];
+
+    }
+}
diff --git a/app/Models/AbstractModel.php b/app/Models/AbstractModel.php
index 7a7c9c06..47d8754b 100644
--- a/app/Models/AbstractModel.php
+++ b/app/Models/AbstractModel.php
@@ -3,11 +3,37 @@
 namespace App\Models;
 
 
+use App\Classes\General\Interfaces\Notifiable;
 use Illuminate\Database\Eloquent\Model;
 use Spatie\Activitylog\Traits\LogsActivity;
+use Illuminate\Database\Eloquent\Relations\MorphTo;
 
-class AbstractModel extends Model
+class AbstractModel extends Model implements Notifiable
 {
     use LogsActivity;
     protected static $logFillable  = true;
+
+    /**
+     * @return MorphTo
+     */
+    public function subject(): MorphTo
+    {
+        return $this->MorphTo('subject');
+    }
+
+    /**
+     * @return MorphTo
+     */
+    public function target(): MorphTo
+    {
+        return $this->MorphTo('target');
+    }
+
+    /**
+     * @return MorphTo
+     */
+    public function causer(): MorphTo
+    {
+        return $this->MorphTo('causer');
+    }
 }
\ No newline at end of file
diff --git a/app/Models/Notification.php b/app/Models/Notification.php
new file mode 100644
index 00000000..06bd6024
--- /dev/null
+++ b/app/Models/Notification.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class Notification extends AbstractModel
+{
+    use SoftDeletes;
+
+    protected $table = 'notifications';
+
+    public function package(): BelongsTo
+    {
+        return $this->BelongsTo(Package::class, 'package_id', 'id');
+    }
+}
diff --git a/database/migrations/2022_04_15_211421_create_notifications_table.php b/database/migrations/2022_04_15_211421_create_notifications_table.php
new file mode 100644
index 00000000..d14cdc89
--- /dev/null
+++ b/database/migrations/2022_04_15_211421_create_notifications_table.php
@@ -0,0 +1,40 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+use App\Classes\ValueObjects\Constants\ApprovalStatus;
+
+class CreateNotificationsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('notifications', function (Blueprint $table) {
+            $table->id();
+            $table->string('title');
+            $table->text('description');
+            $table->morphs('subject');
+            $table->morphs('target');
+            $table->morphs('causer');
+            $table->integer('status')->default(ApprovalStatus::APPROVED);
+            $table->softDeletes();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('notifications');
+    }
+}
diff --git a/resources/assets/sass/modules/_typography.scss b/resources/assets/sass/modules/_typography.scss
index 605b8e7c..aa4506a9 100644
--- a/resources/assets/sass/modules/_typography.scss
+++ b/resources/assets/sass/modules/_typography.scss
@@ -316,6 +316,12 @@ hr{
     background-color: $color-primary-lighter !important;
 }
 
+.bg-primary-lighter-hover {
+    &:hover {
+        background-color: $color-primary-lighter !important;
+    }
+}
+
 /* Complete 
 ------------------------------------
 */
diff --git a/resources/assets/vue/components/companies/elements/IdentificationVerificationComponent.vue b/resources/assets/vue/components/companies/elements/IdentificationVerificationComponent.vue
index 64fc74e2..838764a3 100644
--- a/resources/assets/vue/components/companies/elements/IdentificationVerificationComponent.vue
+++ b/resources/assets/vue/components/companies/elements/IdentificationVerificationComponent.vue
@@ -123,28 +123,7 @@
                                             </button>
                                         </div>
                                         <modal-component small type="rejectDocument">
-                                            <div class="row">
-                                                <div class="col text-center">
-                                                    <div class="row">
-                                                        <div class="col text-center">
-                                                            <div class="row m-b-20">
-                                                                <div class="col">
-                                                                    <h5 class="all-caps">Reject Document</h5>
-                                                                    <div class="fs-11">Are you sure you want to reject this customer's identification?</div>
-                                                                </div>
-                                                            </div>
-                                                            <div class="row">
-                                                                <div class="col p-r-5">
-                                                                    <div data-dismiss="modal" class="btn btn-sm btn-default bg-master-lighter btn-block b-rad-none">Cancel</div>
-                                                                </div>
-                                                                <div class="col p-l-5">
-                                                                    <div data-dismiss="modal" class="btn btn-sm btn-danger btn-block b-rad-none" @click="approveDocument('reject')">Reject</div>
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
+                                            <reject-identification-verification-form-component :section="section" :data="item"></reject-identification-verification-form-component>
                                         </modal-component>
                                         <div class="col no-padding ml-auto">
                                             <button class="btn btn-md btn-block btn-success b-rad-none p-t-10 p-b-10 requestModal" data-type="approveDocument">
diff --git a/resources/assets/vue/components/companies/elements/RejectIdentificationVerificationFormComponent.vue b/resources/assets/vue/components/companies/elements/RejectIdentificationVerificationFormComponent.vue
new file mode 100644
index 00000000..d8473234
--- /dev/null
+++ b/resources/assets/vue/components/companies/elements/RejectIdentificationVerificationFormComponent.vue
@@ -0,0 +1,78 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <div class="row justify-content-center">
+                <div class="col-auto text-center">
+                    <div class="row">
+                        <div class="col text-center">
+                            <div class="row">
+                                <div class="col">
+                                    <h5 class="all-caps">Reject Document</h5>
+                                    <div class="fs-11">Are you sure you want to reject this customer's identification?</div>
+                                </div>
+                            </div>
+                            <div class="row text-left margin-auto m-t-10 m-b-10">
+                                <div class="col">
+                                    <span class="text-danger fs-9">{{ error }}</span>
+                                    <div class="fs-11">Reason: </div>
+                                    <div class="row">
+                                        <div class="col fs-11">
+                                            <div class="b-a padding-5 w-100 m-b-5 pointer b-grey muted" :class="{'b-primary': rejectRemark === rejectRemarkItem, 'text-primary': rejectRemark === rejectRemarkItem}" v-for="rejectRemarkItem in rejectRemarkArray" @click="chooseRejectRemark(rejectRemarkItem)">{{ rejectRemarkItem }}</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <div class="col p-r-5">
+                                    <div data-dismiss="modal" class="btn btn-sm btn-default bg-master-lighter btn-block b-rad-none">Cancel</div>
+                                </div>
+                                <div class="col p-l-5">
+                                    <div class="btn btn-sm btn-danger btn-block b-rad-none" @click="approveDocument('reject')">Reject</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+    import modalFormHandler from '../../../general/mixins/modalFormHandler';
+    import { required } from "vuelidate/lib/validators";
+    export default {
+        data(){
+            return {
+                rejectRemark: null,
+                rejectRemarkArray: null,
+                documentType: this.data.document_type === 'IDENTITY_CARD' ? 'IC' : 'SSM',
+                error: null,
+            }
+        },
+        validations: {
+            rejectRemark: { required },
+        },
+        created(){
+            this.rejectRemarkArray = [
+                this.documentType + ' not clear',
+                this.documentType + ' name different with registration name',
+                'Wrong Document uploaded',
+                'Non-Malaysian ' + this.documentType + ' Uploaded', 
+                this.documentType + ' not Genuine'
+            ];
+        },
+        methods: {
+            approveDocument(status){
+                this.rejectRemark === null ? this.error = 'Please choose a remark.' : null;
+                this.isLoading = true;
+                this.submit(this.route('api.company.identification.approval', this.item.owner.id, this.item.id, status), 'put', 'identificationVerificationSection', true, true);
+            },
+            chooseRejectRemark(remark) {
+                this.rejectRemark = remark;
+            }
+        },
+        mixins: [componentHandler, modalFormHandler]
+
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/general/elements/NotificationSectionComponent.vue b/resources/assets/vue/components/general/elements/NotificationSectionComponent.vue
new file mode 100644
index 00000000..cce6f6c0
--- /dev/null
+++ b/resources/assets/vue/components/general/elements/NotificationSectionComponent.vue
@@ -0,0 +1,82 @@
+<template>
+    <div class="row h-100">
+        <div class="col">
+            <div class="btn-group h-100">
+                <div class="row align-items-center justify-content-center b-a b-thick h-100 pointer" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" @click="openNotification()" style="border-color: #ffffff3d">
+                    <div class="col p-r-10 p-l-10">
+                        <i class="fa fa-bell fs-12 text-primary-lighter"></i>
+                    </div>
+                </div>
+                <div class="b-rad-md dropdown-menu dropdown-menu-right p-l-15 p-b-15 p-r-15 p-t-0 container-fluid container-fixed-lg" style="height: 100vh; background: transparent !important; box-shadow: none!important;" @click="openNotification()">
+                    <div class="row shadow" style="width: 320px; position: absolute; top: 50px; right: -50px; background: white!important;">
+                        <div class="col">
+                            <div class="row">
+                                <div class="bg-master-lighter col p-l-10 p-l-10 p-t-10 bg-white text-center">
+                                    <p>Notification Center</p>
+                                </div>
+                            </div>
+                            <loading-component style="height: 200px; top: 0;" key="1" color="primary" v-show="isLoading"></loading-component>
+                            <div class="row" :class="{'h-100' : notificationsLength >= 5}" v-show="!isLoading" style="max-height: 400px; ">
+                                <div class="col page-container overflow-hidden">
+                                    <div class="row b-b b-grey bg-primary-lighter-hover pointer w-100 m-l-0 m-r-0" v-for="(notification, index) in notifications">
+                                        <div class="col-auto justify-content-center align-items-center d-flex hide">
+                                            <div>
+                                                <i class="fa fa-check-circle fs-20 p-l-5 text-success"></i>
+                                            </div>
+                                        </div>
+                                        <div class="col padding-10 p-l-15 p-r-15">
+                                            <p class="bold m-b-5 lh-16">{{ notification.title }}</p>
+                                            <p class="fs-9 m-b-0 lh-10">{{ notification.description }}</p>
+                                            <p class="fs-9 m-b-0 m-t-10 lh-10">{{ notification.long_ago }}</p>
+                                        </div>
+                                        <div class="col-auto justify-content-center align-items-center d-none" :class="{'d-flex' : index === 0}">
+                                            <div>
+                                                <i class="fa fa-circle fs-10 text-primary"></i>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="row b-t muted">
+                                <div class="col p-l-10 p-l-10 p-t-10 m-b-10 bg-white text-center">
+                                    <a href="#">View All Notifications</a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import ModalFormHandler from '../../../general/mixins/modalFormHandler';
+    export default {
+        data(){
+            return {
+                isLoading: true,
+                error: '',
+                notifications: null,
+                isClicked: false,
+                notificationsLength: 0,
+            }
+        },
+        methods: {
+            openNotification(){
+                this.isClicked === false ? this.fetchNotification() : '';
+                if (this.isClicked == false) {console.log('cose');}
+                this.isClicked = !this.isClicked;
+            },
+            fetchNotification(){
+                this.isLoading = true;
+                this.submit(route('notifications.list'), 'get', this.section, false, false)
+            },
+            successHandler(response){
+                this.isLoading = false;
+                this.notifications = response.payload.data;
+                this.notificationsLength = response.payload.data.length;
+            },
+        },
+        mixins: [ModalFormHandler]
+    }
+</script>
\ No newline at end of file
diff --git a/resources/views/partials/header.blade.php b/resources/views/partials/header.blade.php
index 0f9754ae..5bf0bcca 100644
--- a/resources/views/partials/header.blade.php
+++ b/resources/views/partials/header.blade.php
@@ -67,13 +67,6 @@
                     </div>
                     <div class="col-auto p-r-30">
                         <div class="row no-margin">
-                            <div class="col-auto m-r-5 hide">
-                                <div class="row align-items-center justify-content-center b-a b-thick h-100" style="border-color: #ffffff3d">
-                                    <div class="col p-r-10 p-l-10">
-                                        <i class="fa fa-bell fs-12 text-primary-lighter"></i>
-                                    </div>
-                                </div>
-                            </div>
                             <div class="col-auto m-r-20 d-none d-md-inline">
                                 <div class="row align-items-center p-t-5 p-b-5 b-a b-thick d-inline-flex h-100" style="border-color: #ffffff3d">
                                     <div class="col-auto">
@@ -86,6 +79,9 @@
                                     </div>
                                 </div>
                             </div>
+                            <div class="col-auto m-r-5">
+                                <notification-section-component section="section"></notification-section-component>
+                            </div>
                             <div class="col-auto m-r-5 d-none d-md-inline">
                                 <a href="{{route('settings')}}">
                                     <div class="row align-items-center justify-content-center b-a b-thick h-100" style="border-color: #ffffff3d">
diff --git a/routes/web.php b/routes/web.php
index 99e07dd3..52a308d0 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -184,4 +184,6 @@ Route::get('purchase/sensitive/', function(Request $request){
     }
 });
 
-Route::get('/transactions/supplier/{id}/mock_up', 'Transactions\DownloadMockUpWhiteFormPdfController@download')->name('whiteForm.mockUp');
\ No newline at end of file
+Route::get('/transactions/supplier/{id}/mock_up', 'Transactions\DownloadMockUpWhiteFormPdfController@download')->name('whiteForm.mockUp');
+
+Route::get('/notifications/list', 'Notifications\ListNotificationsController@list')->name('notifications.list');