diff --git a/resources/js/Kelulusan/TableKelulusan.vue b/resources/js/Kelulusan/TableKelulusan.vue
index 446fc63..58d2978 100644
--- a/resources/js/Kelulusan/TableKelulusan.vue
+++ b/resources/js/Kelulusan/TableKelulusan.vue
@@ -1,8 +1,10 @@
 <template>
     <div >
+      <modal ref="modal"></modal>
+
         <div class="bg-white md:items-center md:justify-between shadow rounded-lg p-4 md:p-6 xl:p-8 my-6">
 
-            <div class="flex flex-wrap w-full">
+            <div v-for="index in 2" :key="index" class="flex flex-wrap w-full">
                 <div class="w-full border rounded-l p-4">
 
                     <div class="flex flex-wrap mb-4">
@@ -11,64 +13,29 @@
                         <p class="font-bold text-xl w-1/3 text-gray-500 flex justify-end">Ar-Rahn Kota Bharu 2</p>
                     </div>
                     <div class="flex flex-wrap">
-                        <p class="font-bold text-green-500 w-1/2">PC/PPC: <span class="text-black font-normal text-md">WAN RAMLAH BINTI WAN DERAMAN AMINUDDIN BAKI</span></p>
+                        <p class="font-bold text-green-500 w-1/2">PC/PPC: <span class="text-black font-normal text-md capitalize">wan ramlah binti azam baki</span></p>
                         <p class="w-1/4 text-sm text-gray-700">Pembiayaan: RM100,400.00</p>
                         <p class="w-1/4 text-sm text-gray-700">Nilai Marhun: RM100,400.00</p>
                     </div>
                     <div class="flex flex-wrap">
-                        <p class="font-bold text-green-500 w-1/2">Teller: <span class="text-black font-normal text-md">MOHD RUSYAIDI BIN RUSELI</span></p>
+                        <p class="font-bold text-green-500 w-1/2">Teller: <span class="text-black font-normal text-md capitalize">mohd rusyaidi bin ruseli</span></p>
                         <p class="w-1/4 text-sm text-gray-700">Margin: 78%</p>
                         <p class="w-1/4 text-sm text-gray-700">Berat: 100.00 gram</p>
                     </div>
-                        <!-- <p class="font-bold text-xl">KB2210232-00032</p> -->
-
-                    <div class="mx-auto flex justify-between mb-auto text-sm text-gray-500 mt-4">
-                        10 Jul 2018, 05:56PM
-
-                        <div>
-                        <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-1 px-6 border border-green-700 rounded mr-1"><i class="fas fa-thumbs-up mr-1 text-md"></i> Lulus</button>
-                        <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-6 border border-red-700 rounded mr-1"><i class="fas fa-thumbs-down mr-1 text-md"></i> Tidak Lulus</button>
-                        </div>
-                    </div>
-
-                    
-                </div>
-
-            </div>
-
-
-            <div class="flex flex-wrap w-full">
-                <div class="w-full border rounded-l p-4">
-
-                    <div class="flex flex-wrap mb-4">
-                        <p class="font-bold text-xl w-1/3">KB2210232-00032</p>
-                        <p class="font-bold text-md w-1/3 text-red-500 justify-center flex text-center">[Auto Tawarruq] Pembiayaan Melebihi Margin 75%</p>
-                        <p class="font-bold text-xl w-1/3 text-gray-500 flex justify-end">Ar-Rahn Kota Bharu 2</p>
-                    </div>
-                    <div class="flex flex-wrap">
-                        <p class="font-bold text-green-500 w-1/2">PC/PPC: <span class="text-black font-normal text-md">WAN RAMLAH BINTI WAN DERAMAN</span></p>
-                        <p class="w-1/4 text-sm text-gray-700">Pembiayaan: RM3,400.00</p>
-                        <p class="w-1/4 text-sm text-gray-700">Nilai Marhun: RM3,400.00</p>
-                    </div>
-                    <div class="flex flex-wrap">
-                        <p class="font-bold text-green-500 w-1/2">Teller: <span class="text-black font-normal text-md">MOHD RUSYAIDI BIN RUSELI</span></p>
-                        <p class="w-1/4 text-sm text-gray-700">Margin: 78%</p>
-                        <p class="w-1/4 text-sm text-gray-700">Berat: 32.00 gram</p>
+                     <div class="flex flex-wrap">
+                        <p class="font-bold text-green-500 w-3/4">Komen: <span class="text-black font-normal text-md w-1/4">Tiada Komen</span></p>
                     </div>
                         <!-- <p class="font-bold text-xl">KB2210232-00032</p> -->
 
                     <div class="mx-auto flex justify-between mb-auto text-sm text-gray-500 mt-4">
                         10 Jul 2018, 05:56PM
 
-                        <div>
-                        <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-1 px-6 border border-green-700 rounded mr-1"><i class="fas fa-thumbs-up mr-1 text-md"></i> Lulus</button>
-                        <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-6 border border-red-700 rounded mr-1"><i class="fas fa-thumbs-down mr-1 text-md"></i> Tidak Lulus</button>
+                        <div class="pl-4">
+                            <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-1 px-6 border border-green-700 rounded mr-1" @click.prevent="ApproveFunc"><i class="fas fa-thumbs-up mr-1 text-md"></i> Lulus</button>
+                            <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-6 border border-red-700 rounded mr-1" @click.prevent="DisapproveFunc"><i class="fas fa-thumbs-down mr-1 text-md"></i> Tidak Lulus</button>
                         </div>
                     </div>
-
-                    
                 </div>
-
             </div>
 
         </div>
@@ -77,7 +44,23 @@
 
 </template>
 <script>
+import modal from '../components/util/KomenModal.vue'
+
 export default {
+  components: {
+    // pagination,
+    modal,
+    // deletemodal
+    
+	},
+    methods:{
+        ApproveFunc:function(){
+            this.$refs.modal.showModal = true;
+        },
+        DisapproveFunc:function(){
+            console.log('taklulus');
+        }
+    }
     
 }
 </script>
\ No newline at end of file
diff --git a/resources/js/app.js b/resources/js/app.js
index e486464..f382581 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -207,7 +207,7 @@ Vue.component('senaraibajet-component', require('./Bajet/Homebajet.vue').default
 Vue.component('clock-component', require('./components/util/Clock.vue').default)
 
 Vue.component('logout-component', require('./Logout.vue').default)
-
+Vue.component('notify-component', require('./components/util/Notify.vue').default)
 
 Vue.component('apexchart', VueApexCharts)
 
diff --git a/resources/js/components/util/DeleteComp.vue b/resources/js/components/util/DeleteComp.vue
new file mode 100644
index 0000000..d40e936
--- /dev/null
+++ b/resources/js/components/util/DeleteComp.vue
@@ -0,0 +1,32 @@
+<template>
+    <div tabindex="0"
+        class="z-40 overflow-auto left-0 top-0 bottom-0 right-0 w-full h-full fixed">
+        <div class="z-50 relative p-3 mx-auto my-0 max-w-full"
+                style="width: 500px;">
+                <div class="bg-white rounded shadow-lg border flex flex-col overflow-hidden px-10 py-10">
+                    <div class="text-center">
+                        <span
+                            class="material-icons p-4 text-red-500 font-bold border-red-500 text-4xl">
+                            <i class="fas fa-warning"></i>
+                        </span>
+                    </div>
+                    <div class="text-center py-6 text-2xl text-gray-700">Are you sure ?</div>
+                    <div class="text-center font-light text-gray-700 mb-8">
+                        Do you really want to delete these records? This process cannot be undone.
+                    </div>
+                    <div class="flex justify-center">
+                        <button
+                            class="bg-gray-300 text-gray-900 rounded hover:bg-gray-200 px-6 py-2 focus:outline-none mx-1">Cancel</button>
+                        <button
+                            class="bg-red-500 text-gray-200 rounded hover:bg-red-400 px-6 py-2 focus:outline-none mx-1">Delete</button>
+                    </div>
+                </div>
+            </div>
+        <div class="z-40 overflow-auto left-0 top-0 bottom-0 right-0 w-full h-full fixed bg-black opacity-50"></div>
+    </div>
+</template>
+<script>
+export default {
+    
+}
+</script>
\ No newline at end of file
diff --git a/resources/js/components/util/KomenModal.vue b/resources/js/components/util/KomenModal.vue
new file mode 100644
index 0000000..6e64341
--- /dev/null
+++ b/resources/js/components/util/KomenModal.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+   
+   <transition name="modal-fade">
+    <div v-if="showModal" class=" overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex">
+      <div class="relative w-1/3  my-6 mx-auto max-w-6xl">
+        <!--content-->
+        <div class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
+          <!--header-->
+          <!--body-->
+          <div class="relative p-6 flex-auto">
+
+            <h3 class="text-center text-3xl font-semibold mb-4">
+              Komen
+            </h3>
+
+            <input id="frminput" autofocus type="text" ref="btnDropdownRef" class="mr-2 bg-white appearance-none border-2 border-gray-400 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500 border-black" />
+
+          </div>
+          <!--footer-->
+          <div class="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
+            <button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 border border-gray-700 rounded mr-1" @click="toggleModal" type="button">
+              Batal
+            </button>
+            <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 border border-green-700 rounded" @click="toggleModal" type="button" >
+              Lulus
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    </transition>
+    <transition
+			enter-active-class="transition-all transform duration-200 ease-out"
+		>
+    </transition>
+
+    <div v-if="showModal" class="opacity-25 fixed inset-0 z-40 bg-black"></div>
+
+  </div>
+</template>
+
+<script>
+import { createPopper } from "@popperjs/core";
+
+export default {
+
+    props: {
+    placement: {
+        type: String,
+        default: "bottom-start"
+    }
+   },
+  name: "komen-modal",
+  data() {
+    return {
+      showModal: false,
+      kodcaw: ''
+    }
+  },
+  methods: {
+    toggleModal: function(){
+      this.showModal = !this.showModal;
+    },
+  }
+}
+</script>
+
+<style>
+  
+  .modal-fade-enter,
+  .modal-fade-leave-to {
+    opacity: 0;
+  }
+
+  .modal-fade-enter-active,
+  .modal-fade-leave-active {
+    transition: opacity .5s ease;
+  }
+</style>
\ No newline at end of file
diff --git a/resources/js/components/util/Notify.vue b/resources/js/components/util/Notify.vue
new file mode 100644
index 0000000..6d34fcc
--- /dev/null
+++ b/resources/js/components/util/Notify.vue
@@ -0,0 +1,229 @@
+<template>
+<div class="container">
+    <div id="notification" ref="notification" class="notification cursor-pointer" v-on:click="toggleDropdown()"></div>
+        <div ref="popoverDropdownRef" v-bind:class="{'hidden': !dropdownShow, 'block': dropdownShow}" class="origin-top-right w-96 right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
+            <div class="py-1 px-2" role="none">
+                <div class="text-gray-700 block px-2 py-5 text-sm hover:bg-yellow-500 cursor-pointer">
+                    <div class="justify-between flex">
+                        <div class="w-4/6">
+                            <p class="font-bold -mt-4">Ar-Rahn Kota Bharu 2</p>
+                            <p class="font-bold text-sm text-red-500">[Auto Tawarruq] Pembiayaan Melebihi Margin 75%</p>
+                            <p class="-mb-4 text-sm">4 hours ago</p>
+                        </div>
+                        <div class="w-2/6">
+                            <p class="font-bold -mt-4">KB2000201-0232</p>
+                        </div>
+                    </div>
+                </div>
+                <hr>
+                <div class="text-gray-700 block px-2 py-5 text-sm hover:bg-yellow-500 cursor-pointer">
+                    <div class="justify-between flex">
+                        <div class="w-4/6">
+                            <p class="font-bold -mt-4">Ar-Rahn Kota Bharu 2</p>
+                            <p class="font-bold text-sm text-red-500">[Auto Tawarruq] Pembiayaan Melebihi Margin 75%</p>
+                            <p class="-mb-4 text-sm">4 hours ago</p>
+                        </div>
+                        <div class="w-2/6">
+                            <p class="font-bold -mt-4">KB2000201-0232</p>
+                        </div>
+                    </div>
+                </div>
+                <hr>
+                <!-- <a class="text-gray-700 block px-4 py-2 text-sm hover:bg-yellow-500 cursor-pointer" role="menuitem" tabindex="-1" id="menu-item-0">a<br><b>a</b></a> -->
+            </div>
+        </div>
+    <!-- <button @click="Clicked">Increment Notifications</button> -->
+</div>
+</template>
+<style scoped>
+/* Page Styles */
+
+.container {
+    /* position: absolute; */
+    /* top: 50%; */
+    /* left: 50%; */
+    /* margin-right: 50%; */
+    /* transform: translate(-50%, -50%); */
+    /* text-align: center; */
+}
+
+button {
+    display: block;
+    padding: 1em 2em;
+    outline: none;
+    font-weight: 600;
+    border: none;
+    color: #fff;
+    background-color: #3498db;
+    border: 1px solid #1f74ac;
+    border-radius: 0.3em;
+    margin-top: 4em;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #2487c9;
+}
+/* Notifications */
+.notification {
+    display: inline-block;
+    position: relative;
+    padding: 0.6em;
+    background: #3498db;
+    border-radius: 0.2em;
+    font-size: 1.3em;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+.notification::before, 
+.notification::after {
+    color: #fff;
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+.notification::before {
+    display: block;
+    content: "\f0f3";
+    font-family: "FontAwesome";
+    transform-origin: top center;
+}
+
+.notification::after {
+    font-family: Arial;
+    font-size: 0.7em;
+    font-weight: 700;
+    position: absolute;
+    top: -15px;
+    right: -15px;
+    padding: 5px 8px;
+    line-height: 100%;
+    border: 2px #fff solid;
+    border-radius: 60px;
+    background: #3498db;
+    opacity: 0;
+    content: attr(data-count);
+    opacity: 0;
+    transform: scale(0.5);
+    transition: transform, opacity;
+    transition-duration: 0.3s;
+    transition-timing-function: ease-out;
+}
+
+.notification.notify::before {
+    animation: ring 1.5s ease;
+}
+
+.notification.show-count::after {
+    transform: scale(1);
+    opacity: 1;
+}
+
+@keyframes ring {
+    0% {
+        transform: rotate(35deg);
+    }
+    12.5% {
+        transform: rotate(-30deg);
+    }
+    25% {
+        transform: rotate(25deg);
+    }
+    37.5% {
+        transform: rotate(-20deg);
+    }
+    50% {
+        transform: rotate(15deg);
+    }
+    62.5% {
+        transform: rotate(-10deg);
+    }
+    75% {
+        transform: rotate(5deg);
+    }
+    100% {
+        transform: rotate(0deg);
+    }
+}
+</style>
+<script>
+import { createPopper } from "@popperjs/core";
+
+export default {
+    data(){
+        return {
+        dropdownShow: false,
+        }
+    },
+
+    mounted(){
+    document.addEventListener('click', this.onClick);
+
+        var el = this.$refs.notification;
+
+        if (Number(localStorage.getItem("data-count")) > 0){
+            var count = Number(localStorage.getItem("data-count")) || 0;
+            // console.log(localStorage.getItem("books"))
+            el.setAttribute('data-count', count);
+            el.classList.add('show-count');
+            console.log('test1');
+        }else{
+            el.classList.remove('show-count');
+            console.log('test2');
+        }
+    },
+    beforeDestroy() {
+    document.removeEventListener('click', this.onClick);
+    },
+    methods:{
+        async toggleDropdown() {
+                this.dropdownShow = true;
+                createPopper(this.$refs.notification, this.$refs.popoverDropdownRef, {
+                    placement: "bottom-end",
+                    modifiers: [{
+                    name: "preventOverflow",
+                    }]
+                }); 
+        },
+        Clicked:function(data){
+                var el = this.$refs.notification;
+                var count = Number(localStorage.getItem("data-count")) || 0;
+                console.log(count)
+                    localStorage.setItem('data-count',count + 1);
+                    el.setAttribute('data-count', count+1);
+                    el.classList.remove('notify');
+                    (function(){  
+                    return el.offsetWidth;
+                    })();
+                    el.classList.add('notify');
+                    // if(count > 0){
+                        el.classList.add('show-count');
+                    // }
+        },
+        DropdownShow:function(){
+        },
+        onClick: function(){
+            var el = this.$refs.notification;
+         
+            let isClickInside = this.$refs.popoverDropdownRef.contains(event.target);
+            let searchInside = this.$refs.notification.contains(event.target);
+            let buttonSearch = document.getElementById('notification');
+
+                if (isClickInside || searchInside || buttonSearch.contains(event.target)) {
+                
+                   localStorage.setItem('data-count',0);
+                    el.setAttribute('data-count', 0);
+                    el.classList.remove('show-count');
+                    this.dropdownShow = true
+                
+                }
+                else{
+                   
+                    this.dropdownShow = false
+                    
+                    
+                }
+
+        },
+    }
+}
+</script>
\ No newline at end of file
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index d175c4f..bb2fc60 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -128,7 +128,8 @@
                   @auth
                     <clock-component></clock-component>
                     <cawangan-component  roles={{ Auth::user()->roles }} route={{ (Route::is('home') || Route::is('akaun.home')) ? 'ada' : 'tiada' }} akaun={{ (Route::is('akaun.home') ? 'yes' : 'no')}}></cawangan-component>
-                  @endauth
+                  
+                    @endauth
 
                   <div class="flex items-center">
 
@@ -149,6 +150,9 @@
                          </div>
                     @endif
                 @else
+                        <div class="mr-4">
+                            <notify-component></notify-component>
+                        </div>
 
                          <logout-component csrftoken="{{ csrf_token() }}" :route={{ json_encode(route('logout')) }}></logout-component>