diff --git a/www/css/colors.css b/www/css/colors.css
index d3f6c27..cab5ae2 100644
--- a/www/css/colors.css
+++ b/www/css/colors.css
@@ -129,6 +129,91 @@
     color: #3F51B5!important;
 }
 
+/* blue */
+.c_blue50{
+    background: #E3F2FD;
+    color: #000000;
+}
+.c_blue100{
+    background: #BBDEFB;
+    color: #000000;
+}
+.c_blue200{
+    background: #90CAF9;
+    color: #000000;
+}
+.c_blue300{
+    background: #64B5F6;
+    color: #ffffff;
+}
+.c_blue400{
+    background: #42A5F5;
+    color: #ffffff;
+}
+.c_blue500{
+    background: #2196F3;
+    color: #ffffff;
+}
+.c_blue600{
+    background: #1E88E5;
+    color: #ffffff;
+}
+.c_blue700{
+    background: #1976D2;
+    color: #ffffff;
+}
+.c_blue800{
+    background: #1565C0;
+    color: #ffffff;
+}
+.c_blue900{
+    background: #0D47A1;
+    color: #ffffff;
+}
+
+
+/* cyan */
+.c_cyan50{
+    background: #E0F7FA;
+    color: #000000;
+}
+.c_cyan100{
+    background: #B2EBF2;
+    color: #000000;
+}
+.c_cyan200{
+    background: #80DEEA;
+    color: #000000;
+}
+.c_cyan300{
+    background: #4DD0E1;
+    color: #ffffff;
+}
+.c_cyan400{
+    background: #26C6DA;
+    color: #ffffff;
+}
+.c_cyan500{
+    background: #00BCD4;
+    color: #ffffff;
+}
+.c_cyan600{
+    background: #00ACC1;
+    color: #ffffff;
+}
+.c_cyan700{
+    background: #0097A7;
+    color: #ffffff;
+}
+.c_cyan800{
+    background: #00838F;
+    color: #ffffff;
+}
+.c_cyan900{
+    background: #006064;
+    color: #ffffff;
+}
+
 /* green */
 .c_green50{
     background: #E8F5E9;
@@ -254,3 +339,46 @@
     background: #E65100;
     color: #ffffff;
 }
+
+
+/* blue grey */
+.c_blueGrey50{
+    background: #ECEFF1;
+    color: #000000;
+}
+.c_blueGrey100{
+    background: #CFD8DC;
+    color: #000000;
+}
+.c_blueGrey200{
+    background: #B0BEC5;
+    color: #000000;
+}
+.c_blueGrey300{
+    background: #90A4AE;
+    color: #ffffff;
+}
+.c_blueGrey400{
+    background: #78909C;
+    color: #ffffff;
+}
+.c_blueGrey500{
+    background: #607D8B;
+    color: #ffffff;
+}
+.c_blueGrey600{
+    background: #546E7A;
+    color: #ffffff;
+}
+.c_blueGrey700{
+    background: #455A64;
+    color: #ffffff;
+}
+.c_blueGrey800{
+    background: #37474F;
+    color: #ffffff;
+}
+.c_blueGrey900{
+    background: #263238;
+    color: #ffffff;
+}
diff --git a/www/css/style.css b/www/css/style.css
index 7a6d5b2..b123a9a 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -1,6 +1,6 @@
 /* Empty. Add your own CSS if you like */
 .o_mainOptionRow{
-    height: calc(100%/4);
+    height: calc(103%/4);
     display: table;
     padding: 0;
 }
@@ -11,3 +11,10 @@
     width: 50%;
     font-size: 300%;
 }
+
+.o_floatRight{
+    float: right;
+}
+.o_textRight{
+    text-align: right;
+}
diff --git a/www/js/app.js b/www/js/app.js
index 0483146..0c756d2 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.35:3000/api/";
 
 
 
@@ -89,7 +89,7 @@ angular.module('app', [
     });
 
   // if none of the above states are matched, use this as the fallback
-  $urlRouterProvider.otherwise('/app/events');
+  $urlRouterProvider.otherwise('/app/main');
 })
   /* translator */
   .config(['$translateProvider', function($translateProvider) {
diff --git a/www/templates/event.html b/www/templates/event.html
index 8a5e520..fd7c3a2 100644
--- a/www/templates/event.html
+++ b/www/templates/event.html
@@ -3,7 +3,7 @@
     <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.description}}</p>
+      <p>{{event.user.shortDescription}}</p>
     </a>
     <div class="item item-image">
       <img ng-src="{{event.img}}">
diff --git a/www/templates/events.html b/www/templates/events.html
index ffecdbc..585ff3f 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -1,17 +1,35 @@
 <ion-view view-title="Events">
   <ion-content>
-      <ion-refresher
-        pulling-text="{{'Pull_to_refresh' | translate}}..."
-        on-refresh="doRefresh()">
-      </ion-refresher>
+    <ion-refresher pulling-text="{{'Pull_to_refresh' | translate}}..." on-refresh="doRefresh()">
+    </ion-refresher>
 
-    <a class="item item-thumbnail-left" href="#/app/events/{{event._id}}"
+    <!--<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>
+  </a>-->
+    <div 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}}">
+        <h2>{{event.title}}</h2>
+        <p>{{event.description}}</p>
+        <p>{{event.date | date: 'HH:mm, dd/MM/yyyy'}}</p>
+
+        <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>
+    </div>
   </ion-content>
 </ion-view>
diff --git a/www/templates/main.html b/www/templates/main.html
index 29b3b04..d1e2f1c 100644
--- a/www/templates/main.html
+++ b/www/templates/main.html
@@ -2,28 +2,35 @@
   <ion-content>
     <div class="row o_mainOptionRow">
       <a class="col c_pink400" ng-href="#/app/events">
-        <i class="icon ion-calendar"></i>
+        <i class="icon ion-clipboard"></i><!--events-->
       </a>
       <a class="col c_indigo400" ng-href="#/app/users">
         <i class="icon ion-person-stalker"></i>
       </a>
     </div>
     <div class="row o_mainOptionRow">
-        <a class="col c_green400" ng-href="#/app/search">
-          <i class="icon ion-ios-location"></i>
-        </a>
-
-      <a class="col c_orange400" ng-href="#/app/settings">
-        <i class="icon ion-ios-color-filter"></i>
+      <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">
           <i class="icon ion-search"></i>
         </a>
+        <a class="col c_cyan400" ng-href="#/app/bycategories">
+          <i class="icon ion-pound"></i><!--by categories-->
+        </a>
+    </div>
+    <div class="row o_mainOptionRow">
       <a class="col c_deepPurple400" 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 19a65c0..cefcb81 100644
--- a/www/templates/menu.html
+++ b/www/templates/menu.html
@@ -22,11 +22,20 @@
           <i class="icon ion-home"></i> {{'Main' | translate }}
         </a>
         <a class="item item-icon-left" menu-close href="#/app/events">
-          <i class="icon ion-calendar"></i> Events
+          <i class="icon ion-clipboard"></i> Events
         </a>
         <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/events">
+          <i class="icon ion-pound"></i> By Categories
+        </a>
+        <a class="item item-icon-left" menu-close href="#/app/events">
+          <i class="icon ion-ios-location"></i> By Place
+        </a>
+        <a class="item item-icon-left" menu-close href="#/app/events">
+          <i class="icon ion-calendar"></i> By Date
+        </a>
         <a class="item item-icon-left" menu-close href="#/app/search">
           <i class="icon ion-search"></i> Search
         </a>
diff --git a/www/templates/user.html b/www/templates/user.html
index e094c17..c3cbd99 100644
--- a/www/templates/user.html
+++ b/www/templates/user.html
@@ -8,10 +8,10 @@
             </span>
         </div>
         <h2>{{user.username}}</h2>
-        <p>{{user.email}}</p>
+        <p>{{user.shortDescription}}</p>
       </div>
       <div class="item item-body">
-        asdf asdflk jasdfljashd fljkas dflka shdfklasd {{user.description}}
+        {{user.description}}
       </div>
 
           <leaflet width="100%" height="40%" markers="markers" center="center"
diff --git a/www/templates/users.html b/www/templates/users.html
index b1d82ff..452b32b 100644
--- a/www/templates/users.html
+++ b/www/templates/users.html
@@ -9,7 +9,7 @@
       ng-repeat="user in users" type="item-text-wrap" href="#/app/users/{{user._id}}">
         <img ng-src="{{user.img}}">
         <h2>{{user.username}}</h2>
-        <p>{{user.email}}</p>
+        <p>{{user.shortDescription}}</p>
 
         <span class="badge badge-balanced">Following</span>
       </ion-item>