diff --git a/www/css/colors.css b/www/css/colors.css
index cab5ae2..4ff6899 100644
--- a/www/css/colors.css
+++ b/www/css/colors.css
@@ -1,3 +1,55 @@
+/* red */
+.c_red50{
+    background: #FFEBEE;
+    color: #000000;
+}
+.c_red100{
+    background: #FFCDD2;
+    color: #000000;
+}
+.c_red200{
+    background: #EF9A9A;
+    color: #000000;
+}
+.c_red300{
+    background: #E57373;
+    color: #ffffff;
+}
+.c_red400{
+    background: #EF5350;
+    color: #ffffff;
+}
+.c_red500{
+    background: #F44336;
+    color: #ffffff;
+}
+.c_red600{
+    background: #E53935;
+    color: #ffffff;
+}
+.c_red700{
+    background: #D32F2F;
+    color: #ffffff;
+}
+.c_red800{
+    background: #C62828;
+    color: #ffffff;
+}
+.c_red900{
+    background: #B71C1C;
+    color: #ffffff;
+}
+
+.ctext_red400{
+    color: #EF5350;
+}
+.ctext_red500{
+    color: #F44336;
+}
+.ctext_red600{
+    color: #E53935;
+}
+
 /* pink */
 .c_pink50{
     background: #FCE4EC;
@@ -125,7 +177,7 @@
     color: #ffffff;
 }
 
-.ct_indigo500{
+.ctext_indigo500{
     color: #3F51B5!important;
 }
 
@@ -340,6 +392,49 @@
     color: #ffffff;
 }
 
+/* grey */
+.c_grey50{
+    background: #FAFAFA;
+    color: #000000;
+}
+.c_grey100{
+    background: #F5F5F5;
+    color: #000000;
+}
+.c_grey200{
+    background: #EEEEEE;
+    color: #000000;
+}
+.c_grey300{
+    background: #E0E0E0;
+    color: #ffffff;
+}
+.c_grey400{
+    background: #BDBDBD;
+    color: #ffffff;
+}
+.c_grey500{
+    background: #9E9E9E;
+    color: #ffffff;
+}
+.c_grey600{
+    background: #757575;
+    color: #ffffff;
+}
+.c_grey700{
+    background: #616161;
+    color: #ffffff;
+}
+.c_grey800{
+    background: #424242;
+    color: #ffffff;
+}
+.c_grey900{
+    background: #212121;
+    color: #ffffff;
+}
+
+
 
 /* blue grey */
 .c_blueGrey50{
diff --git a/www/index.html b/www/index.html
index 8d87a18..787e04a 100644
--- a/www/index.html
+++ b/www/index.html
@@ -48,6 +48,7 @@
     <script src="js/main.js"></script>
     <script src="js/events.js"></script>
     <script src="js/event.js"></script>
+    <script src="js/savedEvents.js"></script>
     <script src="js/users.js"></script>
     <script src="js/user.js"></script>
 
diff --git a/www/js/app.js b/www/js/app.js
index 0c756d2..c03b4cc 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -1,5 +1,5 @@
-var urlapi = "http://localhost:3000/api/";
-//var urlapi = "http://192.168.1.35:3000/api/";
+//var urlapi = "http://localhost:3000/api/";
+var urlapi = "http://192.168.1.34:3000/api/";
 
 
 
@@ -11,6 +11,7 @@ angular.module('app', [
     'app.main',
     'app.events',
     'app.event',
+    'app.savedEvents',
     'app.users',
     'app.user'
   ])
@@ -69,6 +70,15 @@ angular.module('app', [
         }
       }
     })
+    .state('app.savedEvents', {
+      url: '/savedEvents',
+      views: {
+        'menuContent': {
+          templateUrl: 'templates/savedEvents.html',
+          controller: 'SavedEventsCtrl'
+        }
+      }
+    })
     .state('app.users', {
       url: '/users',
       views: {
diff --git a/www/js/event.js b/www/js/event.js
index 7db0138..4115d79 100644
--- a/www/js/event.js
+++ b/www/js/event.js
@@ -55,9 +55,9 @@ angular.module('app.event', ['pascalprecht.translate', 'ui-leaflet'])
     $scope.doRefresh();
 
 
-    $scope.share = function(){
-        var message = "hola, això ho comparteixo";
-        var subject = 'compartició';
+    $scope.share = function(event){
+        var message = event.description;
+        var subject = event.title;
         var file= ['',''];
         var link = "http://duckduckgo.com";
         $cordovaSocialSharing
diff --git a/www/js/events.js b/www/js/events.js
index ebb7724..75cc385 100644
--- a/www/js/events.js
+++ b/www/js/events.js
@@ -24,4 +24,47 @@ angular.module('app.events', ['pascalprecht.translate'])
     };
     $scope.doRefresh();
 
+    $scope.share = function(event){
+        var message = event.description;
+        var subject = event.title;
+        var file= ['',''];
+        var link = "http://duckduckgo.com";
+        $cordovaSocialSharing
+        .share(message, subject, file, link) // Share via native share sheet
+        .then(function(result) {
+          // Success!
+        }, function(err) {
+          // An error occured. Show a message to the user
+      });
+    };
+    $scope.savedEvents=[];
+    $scope.$on('$ionicView.enter', function(){//per executar-ho cada cop que es carrega el view
+        if (localStorage.getItem("events_app_savedEvents")) {
+          $scope.savedEvents = JSON.parse(localStorage.getItem("events_app_savedEvents"));
+          console.log("savedEvents");
+          console.log($scope.savedEvents);
+        }
+    });
+    $scope.saveEvent = function(event){
+        $scope.savedEvents.push(event);
+        localStorage.setItem("events_app_savedEvents", JSON.stringify($scope.savedEvents));
+        $ionicLoading.show({ template: 'Event saved', noBackdrop: true, duration: 1000 });
+    };
+    $scope.unsaveEvent = function(event){
+        for(var i=0; i<$scope.savedEvents.length; i++) {
+            if ($scope.savedEvents[i]._id === event._id){
+                $scope.savedEvents.splice(i, 1);
+            }
+        }
+        localStorage.setItem("events_app_savedEvents", JSON.stringify($scope.savedEvents));
+        $ionicLoading.show({ template: 'Event unsaved', noBackdrop: true, duration: 1000 });
+    };
+    $scope.isEventSaved = function(event) {
+        for(var i=0; i<$scope.savedEvents.length; i++) {
+            if ($scope.savedEvents[i]._id === event._id){
+                return true;
+            }
+        }
+        return false;
+    };
 });
diff --git a/www/js/savedEvents.js b/www/js/savedEvents.js
new file mode 100644
index 0000000..aee7722
--- /dev/null
+++ b/www/js/savedEvents.js
@@ -0,0 +1,49 @@
+angular.module('app.savedEvents', ['pascalprecht.translate'])
+
+.controller('SavedEventsCtrl', function($scope, $http, $ionicModal, $timeout, $ionicLoading, $filter) {
+
+    $scope.share = function(event){
+        var message = event.description;
+        var subject = event.title;
+        var file= ['',''];
+        var link = "http://duckduckgo.com";
+        $cordovaSocialSharing
+        .share(message, subject, file, link) // Share via native share sheet
+        .then(function(result) {
+          // Success!
+        }, function(err) {
+          // An error occured. Show a message to the user
+      });
+    };
+    $scope.$on('$ionicView.enter', function(){//per executar-ho cada cop que es carrega el view
+        $scope.savedEvents=[];
+        if (localStorage.getItem("events_app_savedEvents")) {
+          $scope.savedEvents = JSON.parse(localStorage.getItem("events_app_savedEvents"));
+          console.log("savedEvents");
+          console.log($scope.savedEvents);
+        }
+        $scope.events=$scope.savedEvents;
+    });
+    $scope.saveEvent = function(event){
+        $scope.savedEvents.push(event);
+        localStorage.setItem("events_app_savedEvents", JSON.stringify($scope.savedEvents));
+        $ionicLoading.show({ template: 'Event saved', noBackdrop: true, duration: 1000 });
+    };
+    $scope.unsaveEvent = function(event){
+        for(var i=0; i<$scope.savedEvents.length; i++) {
+            if ($scope.savedEvents[i]._id === event._id){
+                $scope.savedEvents.splice(i, 1);
+            }
+        }
+        localStorage.setItem("events_app_savedEvents", JSON.stringify($scope.savedEvents));
+        $ionicLoading.show({ template: 'Event unsaved', noBackdrop: true, duration: 1000 });
+    };
+    $scope.isEventSaved = function(event) {
+        for(var i=0; i<$scope.savedEvents.length; i++) {
+            if ($scope.savedEvents[i]._id === event._id){
+                return true;
+            }
+        }
+        return false;
+    };
+});
diff --git a/www/templates/event.html b/www/templates/event.html
index fd7c3a2..471ee0f 100644
--- a/www/templates/event.html
+++ b/www/templates/event.html
@@ -19,7 +19,7 @@
     </div>
     <leaflet width="100%" height="40%" markers="markers" center="center" tiles="tiles" id="map-simple-map"></leaflet>
 
-    <a class="item item-icon-left ct_indigo500" ng-click="share()">
+    <a class="item item-icon-left ctext_indigo500" ng-click="share(event)">
       <i class="icon ion-android-share-alt"></i> Share
     </a>
   </ion-content>
diff --git a/www/templates/events.html b/www/templates/events.html
index 585ff3f..0acad43 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -1,35 +1,37 @@
 <ion-view view-title="Events">
-  <ion-content>
+  <ion-content class="c_blueGrey100">
     <ion-refresher pulling-text="{{'Pull_to_refresh' | translate}}..." on-refresh="doRefresh()">
     </ion-refresher>
-
-    <!--<a class="item item-thumbnail-left" href="#/app/events/{{event._id}}"
-    ng-repeat="event in events">
-      <img ng-src="{{event.img}}">
-      <div class="badge item-note">{{event.user.username}}</div>
-      <h2>{{event.title}}</h2>
-      <p>{{event.description}}</p>
-      <p>{{event.date | date: 'HH:mm, dd/MM/yyyy'}}</p>
-  </a>-->
-    <div ng-repeat="event in events">
-
+    <div class="card" ng-repeat="event in events">
       <a class="item item-avatar" ng-href="#/app/users/{{event.user._id}}">
         <img ng-src="{{event.user.img}}">
         <h2>{{event.user.username}}</h2>
         <p>{{event.user.shortDescription}}</p>
       </a>
       <a ng-href="#/app/events/{{event._id}}" class="item item-image">
-
         <img ng-src="{{event.img}}">
+        <div style="text-align: left; padding: 20px;">
         <h2>{{event.title}}</h2>
         <p>{{event.description}}</p>
         <p>{{event.date | date: 'HH:mm, dd/MM/yyyy'}}</p>
+    </div>
+      </a>
+      <div class="item tabs tabs-icon-only">
+        <a class="tab-item" ng-click="share(event)">
+          <i class="icon ion-android-share-alt"></i>
+        </a>
+        <a class="tab-item">
 
-        <a class="item item-icon-left ct_indigo500" ng-click="share()">
-          <i class="icon ion-android-share-alt"></i> Share
         </a>
-        <div class="item"></div>
-      </a>
+        <a class="tab-item" ng-click="unsaveEvent(event)"
+        ng-show="isEventSaved(event)">
+            <i class="icon ion-heart ctext_red600"></i>
+        </a>
+        <a class="tab-item" ng-click="saveEvent(event)"
+        ng-hide="isEventSaved(event)">
+            <i class="icon ion-heart"></i>
+        </a>
+      </div>
     </div>
   </ion-content>
 </ion-view>
diff --git a/www/templates/main.html b/www/templates/main.html
index d1e2f1c..3e7d237 100644
--- a/www/templates/main.html
+++ b/www/templates/main.html
@@ -4,17 +4,17 @@
       <a class="col c_pink400" ng-href="#/app/events">
         <i class="icon ion-clipboard"></i><!--events-->
       </a>
-      <a class="col c_indigo400" ng-href="#/app/users">
+      <a class="col c_indigo500" ng-href="#/app/users">
         <i class="icon ion-person-stalker"></i>
       </a>
     </div>
     <div class="row o_mainOptionRow">
+    <a class="col c_indigo300" ng-href="#/app/savedEvents">
+      <i class="icon ion-heart"></i>
+    </a>
       <a class="col c_green400" ng-href="#/app/byplace">
         <i class="icon ion-ios-location"></i><!--by place-->
       </a>
-          <a class="col c_orange400" ng-href="#/app/bydate">
-            <i class="icon ion-calendar"></i><!--by date-->
-          </a>
     </div>
     <div class="row o_mainOptionRow">
         <a class="col c_yellow600" ng-href="#/app/search">
@@ -25,12 +25,12 @@
         </a>
     </div>
     <div class="row o_mainOptionRow">
-      <a class="col c_deepPurple400" ng-href="#/app/settings">
+        <a class="col c_deepPurple400" ng-href="#/app/bydate">
+          <i class="icon ion-calendar"></i><!--by date-->
+        </a>
+      <a class="col c_orange400" ng-href="#/app/settings">
         <i class="icon ion-ios-gear"></i>
       </a>
-      <a class="col c_blueGrey300" ng-href="#/app/settings">
-        <i class="icon ion-code"></i>
-      </a>
     </div>
   </ion-content>
 </ion-view>
diff --git a/www/templates/menu.html b/www/templates/menu.html
index cefcb81..af11104 100644
--- a/www/templates/menu.html
+++ b/www/templates/menu.html
@@ -27,6 +27,9 @@
         <a class="item item-icon-left" menu-close href="#/app/users">
           <i class="icon ion-person-stalker"></i> Users
         </a>
+        <a class="item item-icon-left" menu-close href="#/app/savedEvents">
+          <i class="icon ion-heart"></i> Saved Events
+        </a>
         <a class="item item-icon-left" menu-close href="#/app/events">
           <i class="icon ion-pound"></i> By Categories
         </a>
diff --git a/www/templates/savedEvents.html b/www/templates/savedEvents.html
new file mode 100644
index 0000000..2818941
--- /dev/null
+++ b/www/templates/savedEvents.html
@@ -0,0 +1,35 @@
+<ion-view view-title="Saved Events">
+  <ion-content class="c_blueGrey100">
+    <div class="card" ng-repeat="event in events">
+      <a class="item item-avatar" ng-href="#/app/users/{{event.user._id}}">
+        <img ng-src="{{event.user.img}}">
+        <h2>{{event.user.username}}</h2>
+        <p>{{event.user.shortDescription}}</p>
+      </a>
+      <a ng-href="#/app/events/{{event._id}}" class="item item-image">
+        <img ng-src="{{event.img}}">
+        <div style="text-align: left; padding: 20px;">
+        <h2>{{event.title}}</h2>
+        <p>{{event.description}}</p>
+        <p>{{event.date | date: 'HH:mm, dd/MM/yyyy'}}</p>
+    </div>
+      </a>
+      <div class="item tabs tabs-icon-only">
+        <a class="tab-item" ng-click="share(event)">
+          <i class="icon ion-android-share-alt"></i>
+        </a>
+        <a class="tab-item">
+
+        </a>
+        <a class="tab-item" ng-click="unsaveEvent(event)"
+        ng-show="isEventSaved(event)">
+            <i class="icon ion-heart ctext_red600"></i>
+        </a>
+        <a class="tab-item" ng-click="saveEvent(event)"
+        ng-hide="isEventSaved(event)">
+            <i class="icon ion-heart"></i>
+        </a>
+      </div>
+    </div>
+  </ion-content>
+</ion-view>