diff --git a/app/Http/Controllers/KelulusanController.php b/app/Http/Controllers/KelulusanController.php
new file mode 100644
index 0000000..1a7dcf5
--- /dev/null
+++ b/app/Http/Controllers/KelulusanController.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Session;
+use Illuminate\Support\Facades\Http;
+use Carbon\Carbon;
+
+class KelulusanController extends Controller
+{
+    public function index()
+    {
+        $api_url = config('api.url');
+        $auth_user = Auth::user();
+
+        return view('kelulusan.index',compact('api_url','auth_user'));
+    }
+}
diff --git a/resources/js/Kelulusan/TableKelulusan.vue b/resources/js/Kelulusan/TableKelulusan.vue
new file mode 100644
index 0000000..446fc63
--- /dev/null
+++ b/resources/js/Kelulusan/TableKelulusan.vue
@@ -0,0 +1,83 @@
+<template>
+    <div >
+        <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 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 AMINUDDIN 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="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>
+                        <!-- <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>
+
+    </div>
+
+</template>
+<script>
+export default {
+    
+}
+</script>
\ No newline at end of file
diff --git a/resources/js/app.js b/resources/js/app.js
index 213ca07..e486464 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -189,6 +189,7 @@ Vue.component('searchpelanggan-component', require('./components/Searchpelanggan
 Vue.component('laporanakaun-component', require('./Akaun/Laporan.vue').default)
 Vue.component('online-component', require('./Online/Online.vue').default)
 Vue.component('noticelelong-component', require('./pages/NotisLelong.vue').default)
+Vue.component('kelulusan-component', require('./Kelulusan/TableKelulusan.vue').default)
 
 Vue.component('details-pelanggan', require('./pages/Detailspelanggan.vue').default)
 Vue.component('blacklist-pelanggan', require('./pages/Blacklist.vue').default)
diff --git a/resources/views/kelulusan/index.blade.php b/resources/views/kelulusan/index.blade.php
new file mode 100644
index 0000000..3053eaf
--- /dev/null
+++ b/resources/views/kelulusan/index.blade.php
@@ -0,0 +1,18 @@
+@extends('layouts.app')
+
+@section('content')
+<div class="bg-gray-900 opacity-50 hidden fixed inset-0 z-10" id="sidebarBackdrop"></div>
+<div id="main-content" class="h-full w-full bg-gray-50 relative overflow-y-auto">
+   <main>
+
+      <div class="pt-6 px-4">
+          
+      <breadcrumb :items="[{ 'title' : 'Kelulusan', 'icon' : 'fas fa-thumbs-up' }]"></breadcrumb>
+
+      <kelulusan-component></kelulusan-component>
+
+
+      </div>
+   </main>
+   @include('layouts.footer')
+@endsection
diff --git a/resources/views/layouts/sidebar.blade.php b/resources/views/layouts/sidebar.blade.php
index c1a2dab..08e4444 100644
--- a/resources/views/layouts/sidebar.blade.php
+++ b/resources/views/layouts/sidebar.blade.php
@@ -159,6 +159,17 @@
                 </li>
             </a>
 
+            <a href="{{ route('kelulusan') }}" class="rounded mb-2 mr-2 {{ Route::is('kelulusan') || Route::is('kelulusan.*')  ? 'bg-gray-200 rounded text-white-500' : 'hover:bg-yellow-300 ' }}">
+                <li class="flex w-full justify-between text-gray-600 hover:text-gray-500 cursor-pointer items-center ">
+                    <div class="flex items-center">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5" />
+                          </svg>
+                        <span class="text-sm ml-2 text-lg">Kelulusan</span>
+                    </div>
+                </li>
+            </a>
+
 
             <a href="{{ route('akaun.home') }}" class="rounded mb-2 mr-2 {{ Route::is('akaun.home') || Route::is('akaun.home.*')  ? 'bg-gray-200 rounded text-white-500' : 'hover:bg-yellow-300 ' }}">
                 <li class="flex w-full justify-between text-gray-600 hover:text-gray-500 cursor-pointer items-center ">
diff --git a/routes/web.php b/routes/web.php
index ce99710..8521293 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -59,6 +59,11 @@ Route::get('/bajet/kemaskini',['as'=>'bajet.kemaskini','uses'=>'App\Http\Control
 //Lelong
 Route::get('/notislelong',['as'=>'lelong','uses'=>'App\Http\Controllers\LelongController@index'])->middleware(['roleChecker:null,null,operasi']);
 
+
+//Kelulusan
+Route::get('/kelulusan',['as'=>'kelulusan','uses'=>'App\Http\Controllers\KelulusanController@index'])->middleware(['roleChecker:null,null,operasi']);
+
+
 //Akaun
 Route::get('/akaunhome/cetaklaporanlejeram',['as'=>'cetak.lejeram','uses'=>'App\Http\Controllers\AkaunController@viewlejeram'])->middleware(['roleChecker:admin,akaun,operasi']);
 Route::get('/akaunhome/cetaklaporanimbangduga',['as'=>'cetak.imbangduga','uses'=>'App\Http\Controllers\AkaunController@cetakimbangduga'])->middleware(['roleChecker:admin,akaun,operasi']);