diff --git a/app/Http/Controllers/NotificationController.php b/app/Http/Controllers/NotificationController.php
index 7bd130ac..05b59a46 100644
--- a/app/Http/Controllers/NotificationController.php
+++ b/app/Http/Controllers/NotificationController.php
@@ -3,8 +3,56 @@
 namespace App\Http\Controllers;
 
 use Illuminate\Http\Request;
+use App\Notification;
+use Illuminate\Support\Facades\DB;
+use Auth;
 
 class NotificationController extends Controller
 {
-    //
-}
+    public function index()
+    {
+        return Notification::all();
+    }
+
+    public function show(Notification $notification)
+    {
+     	return $notification;
+    }
+
+    public function store(Request $request)
+    {
+        $notification = Notification::create($request->all());
+
+        return response()->json($notification, 201);
+    }
+
+    public function update(Request $request, Notification $notification)
+    {
+        $notification->update($request->all());
+
+        return response()->json($notification, 200);
+    }
+
+    public function delete(Notification $notification)
+    {
+        $notification->delete();
+
+        return response()->json(null, 204);
+    }
+
+    public function getUserMessage()
+    {
+    	return response()->json([
+    		"message"				=>Notification::Where("user_id",Auth::user()->id)->get(),
+			"unread_message"	=>Notification::Where([
+    			["user_id",Auth::user()->id],
+				["is_read",0]
+			])->get()
+		],200);
+    }
+
+    public function readNotification(){
+    	$affected = DB::table('notifications')->Where('user_id', Auth::user()->id)->update(array('is_read' => 1));
+    	return response()->json("Read all message", 200);
+    }
+}
\ No newline at end of file
diff --git a/app/Notification.php b/app/Notification.php
index 893ef182..c9acda64 100644
--- a/app/Notification.php
+++ b/app/Notification.php
@@ -6,5 +6,5 @@ use Illuminate\Database\Eloquent\Model;
 
 class Notification extends Model
 {
-    protected $fillable = ['detail','user_id'];
+    protected $fillable = ['detail','user_id','is_read'];
 }
diff --git a/database/migrations/2018_07_21_102920_create_notification_table.php b/database/migrations/2018_07_21_102920_create_notification_table.php
index fcf67b87..7e3be228 100644
--- a/database/migrations/2018_07_21_102920_create_notification_table.php
+++ b/database/migrations/2018_07_21_102920_create_notification_table.php
@@ -16,7 +16,9 @@ class CreateNotificationTable extends Migration
         Schema::create('notifications', function (Blueprint $table) {
             $table->increments('id');
             $table->string('detail');
+            $table->string('link');
             $table->unsignedInteger('user_id');
+            $table->boolean('is_read')->default(0);
             $table->timestamps();
 
             $table->foreign('user_id')
diff --git a/database/seeds/NotificationSeeder.php b/database/seeds/NotificationSeeder.php
index 5e567bf6..ac238997 100644
--- a/database/seeds/NotificationSeeder.php
+++ b/database/seeds/NotificationSeeder.php
@@ -19,6 +19,7 @@ class NotificationSeeder extends Seeder
         DB::table('notifications')->insert([
             'detail' => 'This is an user seeder notification',
             'user_id' => $user->id,
+            'link' => 'http://www.google.com',
             'created_at' => Carbon::now()->format('Y-m-d H:i:s'),
             'updated_at' => Carbon::now()->format('Y-m-d H:i:s'),
         ]);
@@ -26,6 +27,7 @@ class NotificationSeeder extends Seeder
         DB::table('notifications')->insert([
             'detail' => 'This is an admin seeder notification',
             'user_id' => $admin->id,
+            'link' => 'http://www.google.com',
             'created_at' => Carbon::now()->format('Y-m-d H:i:s'),
             'updated_at' => Carbon::now()->format('Y-m-d H:i:s'),
         ]);
diff --git a/resources/assets/js/components/Navbar.vue b/resources/assets/js/components/Navbar.vue
index ccbabb91..464580d7 100644
--- a/resources/assets/js/components/Navbar.vue
+++ b/resources/assets/js/components/Navbar.vue
@@ -12,30 +12,24 @@
       <div id="navbarToggler" class="collapse navbar-collapse">
         <ul class="navbar-nav ml-auto">
           <locale-dropdown/>
-          <!-- <li class="nav-item">
-            <a class="nav-link" href="#">Link</a>
-          </li> -->
         </ul>
 
         <ul class="navbar-nav ml-auto">
           <!-- Authenticated -->
           <template v-if="user">
-            <!-- <el-badge :value="12" class="item">
-              <el-button size="share-button"><i class="el-icon-bell"></i></el-button>
-            </el-badge> -->
-            <!-- <el-dropdown trigger="click">
-              <el-badge :value="12" class="item">
-                <el-button icon="el-icon-bell" circle></el-button>
+            <el-dropdown trigger="click">
+              <el-badge :value="unreadMessage.length > 0 ? unreadMessage.length : ''" class="item">
+                <el-button v-if="loadingNotification" icon="el-icon-loading" circle ></el-button>
+                <el-button v-else icon="el-icon-bell" circle v-on:click="refreshNotificatoin"></el-button>
               </el-badge>
-              <el-dropdown-menu slot="dropdown" style="max-width: 30%" id="notification">
+              <el-dropdown-menu slot="dropdown" style="max-width: 30%" id="notification" >
                 <a v-for="item in notification" :href="item.link">
                   <el-dropdown-item>
-                    {{item.message}}
+                    {{item.detail}}
                   </el-dropdown-item>
                 </a>
               </el-dropdown-menu>
-            </el-dropdown> -->
-
+            </el-dropdown>
 
             <li class="nav-item dropdown">
             <a class="nav-link dropdown-toggle text-dark"
@@ -80,6 +74,7 @@
 <script>
 import { mapGetters } from 'vuex'
 import LocaleDropdown from './LocaleDropdown'
+import axios from 'axios'
 
 export default {
   components: {
@@ -88,28 +83,59 @@ export default {
 
   data: () => ({
     appName: window.config.appName,
-    notification:[{
-      message : "You have an unread message",
-      link : "http://www.google.com"
-    },
-    {
-      message : "There are 10 booking for your approval",
-      link : "http://www.yahoo.com"
-    }]
+    notification:[],
+    loadingNotification:false,
+    unreadMessage:null
 
   }),
 
   computed: mapGetters({
     user: 'auth/user'
   }),
-
+  mounted(){
+    this.getNotification();
+  },
   methods: {
     async logout () {
       // Log out the user.
-      await this.$store.dispatch('auth/logout')
+      await this.$store.dispatch('auth/logout');
 
       // Redirect to login.
-      this.$router.push({ name: 'login' })
+      this.$router.push({ name: 'login' });
+    },
+    getNotification(){
+      this.notification = [];
+      this.unreadMessage='';
+      this.loadingNotification=true;
+      axios
+        .get('/api/notification/user/')
+        .then((response) => {
+          this.loadingNotification=false;
+          this.notification = response.data.message;
+          this.unreadMessage=response.data.unread_message;
+          console.log(response.data);
+        }).catch((error) => {
+          console.log(error)
+          this.$router.push({
+            name: 'notfound'
+          })
+        })
+    },
+    refreshNotificatoin(){
+      this.readAllNotification();
+      this.getNotification();
+    },
+    readAllNotification(){
+      axios
+        .post('/api/notification/read-notification/')
+        .then((response) => {
+          // Done
+        }).catch((error) => {
+          console.log(error)
+          this.$router.push({
+            name: 'notfound'
+          })
+        })
     }
   }
 }
diff --git a/routes/api.php b/routes/api.php
index 7669ab64..ec730d61 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -47,6 +47,9 @@ Route::group(['middleware' => 'auth:api'], function () {
 	Route::patch('settings/profile', 'Settings\ProfileController@update');
 	Route::patch('settings/password', 'Settings\PasswordController@update');
 
+	Route::get('notification/user', 'NotificationController@getUserMessage');
+	Route::post('notification/read-notification', 'NotificationController@readNotification');
+
 	// for both user and admin
 	Route::get('active-bank', 'SettingActiveBankController@index');	
 	Route::put('setting-tax', 'SettingActiveBankController@index');
@@ -109,6 +112,12 @@ Route::group(['middleware' => ['role:admin']], function() {
 	Route::put('supplier-booking/{id}', 'BookingSupplierController@update');
 	Route::post('booking/{id}/confirm-supplier', 'BookingController@confirmSupplier');
 
+	Route::get('notification', 'NotificationController@index');
+	Route::get('notification/{notification}', 'NotificationController@show');
+	Route::post('notification', 'NotificationController@store');
+	Route::put('notification/{notification}', 'NotificationController@update');
+	Route::delete('notification/{notification}', 'NotificationController@delete');
+
 	Route::post('booking/{id}/upload-china-bankslip','ChinaBankSlipController@store');
 	Route::patch('booking/{id}/update-china-bankslip','ChinaBankSlipController@update');
 	Route::get('booking/{id}/po', 'BookingController@showPurchaseOrder');