diff --git a/app.js b/app.js
index 899f7b1..5730a36 100755
--- a/app.js
+++ b/app.js
@@ -19,7 +19,8 @@ angular.module('webapp', [
   'app.users',
   'app.user',
   'app.travel',
-  'app.newTravel'
+  'app.newTravel',
+  'app.notifications'
 ]).
 config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
   $locationProvider.hashPrefix('!');
diff --git a/index.html b/index.html
index 1290e2b..9631f05 100755
--- a/index.html
+++ b/index.html
@@ -71,6 +71,7 @@
     <script src="views/user/user.js"></script>
     <script src="views/travel/travel.js"></script>
     <script src="views/newTravel/newTravel.js"></script>
+    <script src="views/notifications/notifications.js"></script>
 </body>
 
 </html>
diff --git a/views/navbar.html b/views/navbar.html
index ac11a75..dfd8c91 100755
--- a/views/navbar.html
+++ b/views/navbar.html
@@ -20,6 +20,12 @@
                     </div>
                 </form>
                 <ul class="nav navbar-nav navbar-right">
+                    <li>
+                        <a href="#!/notifications">
+                            <i title="Post new travel" class="fa fa-bell-o fa-2x"></i>
+                            <span class="badge badge-secondary">{{storageuser.notifications.length}}</span>
+                        </a>
+                    </li>
                     <li>
                         <a href="#!/newTravel">
                             <i title="Post new travel" class="fa fa-plus fa-2x"></i>
diff --git a/views/navbar.js b/views/navbar.js
index 848b00b..4cb59e8 100755
--- a/views/navbar.js
+++ b/views/navbar.js
@@ -27,9 +27,22 @@ angular.module('app.navbar', ['ngRoute'])
             console.log($scope.storageuser);
         }
 
+        //get the num of pendent notifications each time
+        $http.get(urlapi + 'numnotifications')
+          .then(function(data) {
+              $scope.storageuser.notifications = data.data;
+              console.log(data.data);
+              localStorage.setItem("cr_webapp_storageuser", JSON.stringify($scope.storageuser));
+          }, function(data) {
+            console.log('data error');
+            
+          });
+
+
         $scope.logout = function() {
             localStorage.removeItem("cr_webapp_token");
             localStorage.removeItem("cr_webapp_userdata");
             window.location.reload();
         };
+
     });
diff --git a/views/notifications/notifications.html b/views/notifications/notifications.html
new file mode 100644
index 0000000..62a76ec
--- /dev/null
+++ b/views/notifications/notifications.html
@@ -0,0 +1,40 @@
+<div class="container">
+    <div class="row">
+        <div class="col-sm-3"></div>
+        <div class="col-sm-6">
+            <div class="panel">
+                <div class="panel-heading c_deepPurpleG500to300">
+                    <h3 class="panel-title">
+                        Notifications
+                        <span class="badge badge-secondary pull-right c_deepPurpleG500to300">{{storageuser.notifications.length}}</span>
+                    </h3>
+                </div>
+                <div class="panel-body">
+                    <div ng-show="!notifications[0]" class="item">
+                      No notifications yet
+                    </div>
+                    <div class="list-group">
+                        <a ng-repeat="notification in notifications | orderBy: '-date'" ng-show="notification.state=='pendent'" class="list-group-item c_deepPurple100" href="#!/{{notification.link}}">
+                          <div class="pull-right">
+                            <div class="o_text_purple600">{{notification.date | date:"dd/MM"}}</div>
+                            <div class="o_text_purple600">{{notification.date | date:"HH:mm:ss"}}</div>
+                          </div>
+                          <i ng-show="notification.state=='pendent'" class="icon {{notification.icon}} o_text_purple600"></i>
+                          <p>{{notification.message}}</p>
+                        </a>
+                        <a ng-repeat="notification in notifications | orderBy: '-date'" ng-show="notification.state=='viewed'" class="list-group-item" href="#!/{{notification.link}}">
+                          <div class="pull-right">
+                            <div class="o_text_purple600">{{notification.date | date:"dd/MM"}}</div>
+                            <div class="o_text_purple600">{{notification.date | date:"HH:mm:ss"}}</div>
+                          </div>
+                          <i ng-show="notification.state=='viewed'" class="icon {{notification.icon}}"></i>
+                          <h2>{{notification.message}}</h2>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+    </div>
+</div>
diff --git a/views/notifications/notifications.js b/views/notifications/notifications.js
new file mode 100644
index 0000000..57aac09
--- /dev/null
+++ b/views/notifications/notifications.js
@@ -0,0 +1,32 @@
+'use strict';
+
+angular.module('app.notifications', ['ngRoute'])
+
+    .config(['$routeProvider', function($routeProvider) {
+        $routeProvider.when('/notifications', {
+            templateUrl: 'views/notifications/notifications.html',
+            controller: 'NotificationsCtrl'
+        });
+    }])
+
+    .controller('NotificationsCtrl', function($scope, $http) {
+        $scope.notifications = [];
+
+        $http.get(urlapi + 'notifications')
+          .then(function(data) {
+            //get the storage notifications
+            if (localStorage.getItem("cr_webapp_notifications")) {
+              $scope.notifications = JSON.parse(localStorage.getItem("cr_webapp_notifications"));
+              $scope.notifications = $scope.notifications.concat(data.data); // for UI
+            } else {
+              $scope.notifications = data.data;
+            }
+            //store the notifications
+            localStorage.setItem("cr_webapp_notifications", JSON.stringify($scope.notifications));
+
+          }, function(data) {
+            console.log('data error');
+            toastr.error("Error connecting server");
+
+          });
+    });
diff --git a/views/travel/travel.html b/views/travel/travel.html
index 18d3e58..2eac22a 100755
--- a/views/travel/travel.html
+++ b/views/travel/travel.html
@@ -3,6 +3,34 @@
         <div class="col-sm-4">
             <div ng-include="'views/travelCardTemplate.html'"></div>
             <br>
+            <div class="panel">
+                <div class="panel-heading c_deepPurpleG500to300">
+                    <h3 class="panel-title">Actions</h3>
+                </div>
+                <div class="panel-body">
+                    <p class='text-right'>
+                        <div ng-show="userHasJoined(travel.joinPetitions, storageuser._id)==-1">
+                            <div ng-show="userHasJoined(travel.joins, storageuser._id)==-1">
+                                <a ng-show="travel.type=='offering'" ng-click="joinTravel()" class="btn btn-raised c_deepPurple300">Ask to join</a>
+                                <a ng-show="travel.type=='asking'" ng-click="joinTravel()" class="btn btn-raised c_deepPurple300">Offer car</a>
+                                <a ng-show="travel.type=='package'" ng-click="joinTravel()" class="btn btn-raised c_deepPurple300">Offer car</a>
+                            </div>
+                        </div>
+
+                        <div ng-show="userHasJoined(travel.joinPetitions, storageuser._id)>-1">
+                            <a ng-show="travel.type=='offering'" ng-click="unjoinTravel()" class="btn btn-raised c_red300">Unjoin</a>
+                            <a ng-show="travel.type=='asking'" ng-click="unjoinTravel()" class="btn btn-raised c_red300">Unoffer car</a>
+                            <a ng-show="travel.type=='package'" ng-click="unjoinTravel()" class="btn btn-raised c_red300">Unoffer car</a>
+                        </div>
+
+                        <div ng-show="userHasJoined(travel.joins, storageuser._id)>-1">
+                            You are in this travel!
+                            <a ng-show="travel.type=='offering'" ng-click="leaveTravel()" class="btn btn-raised c_red300">Leave</a>
+                        </div>
+                    </p>
+                </div>
+            </div>
+            <br>
             <div class="panel">
                 <div class="panel-heading c_deepPurpleG500to300">
                     <h3 class="panel-title">{{travel.joinPetitions.length}} Pendent joins</h3>
@@ -50,8 +78,7 @@
                     <h3 class="panel-title">Map</h3>
                 </div>
                 <div class="panel-body">
-                    <leaflet width="100%" height="500px" markers="markers" center="center"
-                    tiles="tiles" id="map-simple-map"></leaflet>
+                    <leaflet width="100%" height="500px" markers="markers" center="center" tiles="tiles" id="map-simple-map"></leaflet>
                 </div>
             </div>
         </div>
diff --git a/views/travel/travel.js b/views/travel/travel.js
index d15a2cb..dc2e537 100755
--- a/views/travel/travel.js
+++ b/views/travel/travel.js
@@ -10,7 +10,9 @@ angular.module('app.travel', ['ngRoute', 'ui-leaflet'])
     }])
 
     .controller('TravelCtrl', function($scope, $http, $routeParams,
-        leafletData, leafletBoundsHelpers) {
+        leafletData, leafletBoundsHelpers, toastr) {
+
+        $scope.storageuser = JSON.parse(localStorage.getItem("cr_webapp_userdata"));
         $scope.travel = {};
 
 
@@ -68,12 +70,141 @@ angular.module('app.travel', ['ngRoute', 'ui-leaflet'])
                 .then(function(data) {
                         console.log(data);
                         $scope.travels = data.data;
+                          toastr.info('Travel deleted');
 
                         window.location = "#!/main/";
                     },
                     function(data) { // optional
                         // failed
+                          toastr.error('Error on delete travel');
                     });
         };
 
+        $scope.joinTravel = function() {
+          $http({
+              url: urlapi + 'travels/join/' + $routeParams.travelid,
+              method: "POST",
+              data: {}
+            })
+            .then(function(data) {
+                console.log("data: ");
+                console.log(data);
+                if (data.data.success == false) {
+                  toastr.error('Error on join');
+                } else {
+                  $scope.travel = data.data;
+                    toastr.success('Joined travel');
+                }
+              },
+              function(response) { // optional
+                // failed
+              });
+        };
+        $scope.unjoinTravel = function() {
+          $http({
+              url: urlapi + 'travels/unjoin/' + $routeParams.travelid,
+              method: "POST",
+              data: {}
+            })
+            .then(function(data) {
+                console.log("data: ");
+                console.log(data);
+                if (data.data.success == false) {
+                  toastr.error('Error on unjoin');
+                } else {
+                  $scope.travel = data.data;
+                    toastr.success('Unjoined travel');
+                }
+              },
+              function(response) { // optional
+                // failed
+              });
+        };
+
+        $scope.declineJoin = function(joinPetition) {
+          $http({
+              url: urlapi + 'travels/declineJoin/' + $routeParams.travelid,
+              method: "POST",
+              data: {
+                userid: joinPetition._id
+              }
+            })
+            .then(function(data) {
+                console.log("data: ");
+                console.log(data);
+                if (data.data.success == false) {
+                  toastr.error('Error on declining');
+                } else {
+                  $scope.travel = data.data;
+                  console.log("success");
+                  toastr.success('Join declined');
+                }
+              },
+              function(response) { // optional
+                // failed
+              });
+        };
+
+        $scope.acceptJoin = function(joinPetition) {
+          $http({
+              url: urlapi + 'travels/acceptJoin/' + $routeParams.travelid,
+              method: "POST",
+              data: {
+                userid: joinPetition._id
+              }
+            })
+            .then(function(data) {
+                console.log("data: ");
+                console.log(data);
+                if (data.data.success == false) {
+                  toastr.error('Error on accepting');
+                } else {
+                  $scope.travel = data.data;
+                  console.log("success");
+                  toastr.success('Join accepted');
+                }
+              },
+              function(response) { // optional
+                // failed
+              });
+        };
+
+        $scope.leaveTravel = function() {
+
+          $http({
+              url: urlapi + 'travels/leave/' + $routeParams.travelid,
+              method: "POST",
+              data: {}
+            })
+            .then(function(data) {
+                console.log("data: ");
+                console.log(data);
+                if (data.data.success == false) {
+                  toastr.error('Error on leave');
+                } else {
+                  $scope.travel = data.data;
+                  toastr.success('Travel leaved');
+                }
+              },
+              function(response) { // optional
+                // failed
+              });
+        };
+
+
+        $scope.userHasJoined = function(myArray, searchTerm) {
+          //console.log(myArray+", "+searchTerm);
+          if (myArray) {
+            for (var i = 0, len = myArray.length; i < len; i++) {
+              //console.log(myArray[i] + " - " + searchTerm);
+              if (myArray[i]._id === searchTerm) {
+                //console.log("i: " + i);
+                return i;
+              }
+            }
+          }
+          //console.log("i: -1");
+          return -1;
+        };
+
     });