diff --git a/scss/category.scss b/scss/category.scss
index b1d195b..4ffa798 100644
--- a/scss/category.scss
+++ b/scss/category.scss
@@ -15,6 +15,7 @@
   background: $light;
   padding: $content-padding;
   border-radius: 10px;
+  margin-top: 50px;
   .card {
     box-shadow: none;
     padding: $content-padding;
@@ -74,3 +75,46 @@ border-bottom: 4px solid #e7eaf0;
   min-height: 240px;
   border-radius: 10px 10px 0 0;
 }
+
+// category icon
+.text-center .col img {
+  max-width: 160px;
+  max-height: 160px;
+  margin-top: 50px;
+}
+
+// category title
+.text-center .col h4 {
+  color: white;
+  font-size: 24pt;
+  font-family: 'Siri Web SemiBold';
+  // line-height: 2.6;
+}
+
+//category long description
+.text-center .col p {
+  color: white;
+  font-size: 16pt;
+  font-family: 'Siri Web Light';
+  // line-height: 2.4;
+}
+
+.app-title {
+  font-family: 'Siri Web SemiBold';
+  font-size: 14pt !important;
+  // line-height: 2;
+}
+
+.app-desc {
+  font-family: 'Siri Web Light';
+  font-size: 12pt !important;
+  // line-height: 2;
+  overflow: hidden !important;
+  display: -webkit-box !important;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  white-space: normal !important;
+}
+.item-separator:last-child {
+    border: 0px;
+}
diff --git a/scss/fonts.scss b/scss/fonts.scss
index eca937e..e2fab84 100644
--- a/scss/fonts.scss
+++ b/scss/fonts.scss
@@ -20,6 +20,26 @@
     font-style: italic;
 }
 
+@font-face {
+    font-family: 'Siri Web SemiBold';
+    src: url('/fonts/SiriWeb-SemiBold.eot');
+    src: url('/fonts/SiriWeb-SemiBold.eot?') format('embedded-opentype'),
+    url('/fonts/SiriWeb-SemiBold.woff') format('woff'),
+    url('/fonts/SiriWeb-SemiBold.ttf') format('opentype');
+    font-weight: bold;;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Siri Web Light';
+    src: url('/fonts/SiriWeb-Light.eot');
+    src: url('/fonts/SiriWeb-Light.eot?') format('embedded-opentype'),
+    url('/fonts/SiriWeb-Light.woff') format('woff'),
+    url('/fonts/SiriWeb-Light.ttf') format('opentype');
+    font-weight: lighter;;
+    font-style: normal;
+}
+
 @font-face {
     font-family: 'Siri Core Bold';
     src: url('/fonts/SiriCore-Bold.eot');
diff --git a/www/fonts/SiriWeb-Light.eot b/www/fonts/SiriWeb-Light.eot
new file mode 100644
index 0000000..791f419
Binary files /dev/null and b/www/fonts/SiriWeb-Light.eot differ
diff --git a/www/fonts/SiriWeb-Light.ttf b/www/fonts/SiriWeb-Light.ttf
new file mode 100644
index 0000000..547c6f8
Binary files /dev/null and b/www/fonts/SiriWeb-Light.ttf differ
diff --git a/www/fonts/SiriWeb-Light.woff b/www/fonts/SiriWeb-Light.woff
new file mode 100644
index 0000000..4c627ee
Binary files /dev/null and b/www/fonts/SiriWeb-Light.woff differ
diff --git a/www/fonts/SiriWeb-SemiBold.eot b/www/fonts/SiriWeb-SemiBold.eot
new file mode 100644
index 0000000..bce5783
Binary files /dev/null and b/www/fonts/SiriWeb-SemiBold.eot differ
diff --git a/www/fonts/SiriWeb-SemiBold.ttf b/www/fonts/SiriWeb-SemiBold.ttf
new file mode 100644
index 0000000..a5a0eab
Binary files /dev/null and b/www/fonts/SiriWeb-SemiBold.ttf differ
diff --git a/www/fonts/SiriWeb-SemiBold.woff b/www/fonts/SiriWeb-SemiBold.woff
new file mode 100644
index 0000000..bdd6bc0
Binary files /dev/null and b/www/fonts/SiriWeb-SemiBold.woff differ
diff --git a/www/js/controllers.js b/www/js/controllers.js
index 2141120..b896cee 100644
--- a/www/js/controllers.js
+++ b/www/js/controllers.js
@@ -215,9 +215,26 @@ angular.module('starter.controllers', [])
 
     }
 
-    // not currently used
-    $scope.getFavorites = function() {
-        return API.favoriteStore.get("favorites");
+    if (!exists) {
+      //update project upvotes
+      if(app.upvotes!==undefined){
+        app.upvotes++;
+      }
+      //update localstorage favorites
+      favorites.push(app)
+      API.favoriteStore.put("favorites", favorites)
+      //update vote on the server side
+      API.upVote(app._id)
+    } else {
+      //update project upvotes
+      if(app.upvotes!==undefined){
+        app.upvotes--;
+      }
+      //update localstorage favorites
+      favorites.splice(favorites.indexOf(app),1)
+      API.favoriteStore.put("favorites", favorites)
+      //update vote on the server side
+      API.downVote(app._id)
     }
 
     $scope.inFavorites = function(project) {
diff --git a/www/templates/categories.html b/www/templates/categories.html
index 66033ba..74fb175 100644
--- a/www/templates/categories.html
+++ b/www/templates/categories.html
@@ -28,7 +28,7 @@
 
             <div class="item item-text-wrap">
               <div class="item item-divider category-label">{{ category.slug + '_title' | translate }}</div>
-              <div class="desc">{{ category.slug + '_description' | translate }}</div>
+              <div class="desc">{{ category.slug + '_description_short' | translate }}</div>
               <!-- <img class="icon" ng-src="img/categories-{{category.slug}}.png" /> -->
             </div>
 
diff --git a/www/templates/category.html b/www/templates/category.html
index a643fa5..2e1296f 100644
--- a/www/templates/category.html
+++ b/www/templates/category.html
@@ -26,16 +26,18 @@
         <img class="img-responsive" src="img/categories-{{category.slug}}.png">
       </div>
     </div>
-    <div class="category_description_container">
-      <div class="card text-center">
-        <h4>{{ category.slug + "_title" | translate }}</h4>
-        <p>{{ category.slug + '_description' | translate }}</p>
+    <div class="row text-center">
+      <div class="col">
+      <h4>{{ category.slug + "_title" | translate }}</h4>
+      <p>{{ category.slug + '_description_long' | translate }}</p>
       </div>
+    </div>
+    <div class="category_description_container">
       <ion-list>
         <div class="item-separator" ng-repeat="app in apps">
           <a class="item item-thumbnail-left" ng-click="showapp(app)">
             <img ng-src="{{ '/img/apps/logo_'+app._id+'.png' }}">
-            <h2>{{app.name}}</h2>
+            <h2 class="app-title">{{app.name}}</h2>
             <p class="app-desc">{{app.shortDescription}}</p>
             <!-- <p class="like-num">{{app.upvotes}} likes</p> --> <!-- This will not currently be implemented -->
             <!-- <p class="like-num"><i class="icon {{ inFavorites(app) ? 'ion-ios-heart' : 'ion-ios-heart-outline'}}"></i></p> -->