diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less
index 983a59364c..e58019553a 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less
@@ -11,8 +11,6 @@
 
 .umb-packages-search {
     width: 100%;
-
-    margin-top: 40px;
     margin-bottom: 40px;
     background: @grayLighter;
     border-radius: 3px;
@@ -38,11 +36,10 @@
 
 
 .umb-packages {
-    // margin: 0 -10px;
+    margin: 0 -10px;
 }
 
-
-// List
+// Cards
 .umb-package {
     float: left;
     padding: 10px;
@@ -50,8 +47,6 @@
     width: 20%;
 }
 
-
-// Link (Wrapper)
 .umb-package-link {
     display: flex;
     flex-wrap: wrap;
@@ -64,7 +59,7 @@
     height: 100%;
     width: 100%;
 
-    border: 2px solid #ececec;
+    border: 1px solid #ececec;
     border-radius: 3px;
 
     text-decoration: none !important;
@@ -93,7 +88,7 @@
     text-align: center;
     background-color: white;
 
-    min-height: 80px;
+    min-height: 60px;
 }
 
 .umb-package-icon img {
@@ -107,13 +102,16 @@
     padding-right: 15px;
     padding-bottom: 15px;
     padding-left: 15px;
+    padding-top: 15px;
     text-align: center;
+    background: @grayLighter;
+    border-top: 1px solid #ececec;
 }
 
 
 // Name
 .umb-package-name {
-    font-size: 15px;
+    font-size: 14px;
     max-width: 250px;
     margin-bottom: 5px;
 
@@ -263,59 +261,37 @@
     margin-bottom: 30px;
 }
 
-
-
 .umb-packages-category {
     display: flex;
     align-items: center;
     flex: 1 0 auto;
     justify-content: center;
-
-    opacity: .6;
-
     max-width: 25%;
-
     font-size: 14px;
     font-weight: bold;
     color: @black;
-
     box-sizing: border-box;
-
     justify-content: center;
+    border-top: 1px solid @grayLight;
+    border-bottom: 1px solid @grayLight;
+    border-right: 1px solid @grayLight;
+    padding: 5px;
 }
 
-
 .umb-packages-category:hover,
-.umb-packages-category:focus {
+.umb-packages-category.-active {
     text-decoration: none;
-    opacity: 1;
+    color: @blue;
 }
 
-.umb-packages-category-icon {
-    font-size: 20px;
-    margin-right: 5px;
-
-    display: none;
+.umb-packages-category.-first {
+    border-left: 1px solid @grayLight;
+    border-radius: 3px 0 0 3px;
 }
 
-// Collapsed
-.umb-packages-categories.-collapsed {
-    margin-bottom: 0;
-}
-
-.umb-packages-categories.-collapsed .umb-packages-category {
-    margin-right: 15px;
-    margin-left: 15px;
-}
-
-.-ma0 {
-    margin: 0 !important;
-}
-
-.-collapsed .umb-packages-category.-active {
-    color: @black;
-    opacity: 1;
-    border-bottom: 2px solid @black;
+.umb-packages-category.-last {
+    border-right: 1px solid @grayLight;
+    border-radius: 0 3px 3px 0;
 }
 
 /* PACKAGE DETAILS */
@@ -603,3 +579,4 @@
 
 .umb-info-local-item {
     margin: 10px 0;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/views/packagesNew/views/repo.controller.js b/src/Umbraco.Web.UI.Client/src/views/packagesNew/views/repo.controller.js
index 8286f3ff31..5217b0d20c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/packagesNew/views/repo.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/packagesNew/views/repo.controller.js
@@ -17,8 +17,7 @@
             },
             {
                 "icon": "icon-male-and-female",
-                "name": "Collaboration",
-                "active": false
+                "name": "Collaboration"
             },
             {
                 "id": 2,
@@ -90,11 +89,43 @@
             },
             {
                 "id": 6,
-                "name": "CodeMirror",
-                "description": "CodeMirror Editor for Umbraco",
+                "name": "uSightly",
+                "description": "An HTML5 audio player based on jPlayer",
                 "karma": "1",
-                "downloads": "70",
-                "icon":"https://our.umbraco.org/media/wiki/151028/635810233171153461_logopng.png?bgcolor=fff&height=154&width=281&format=png"
+                "downloads": "1672",
+                "icon":"https://our.umbraco.org/media/wiki/150283/635768313097111400_usightlylogopng.png?bgcolor=fff&height=154&width=281&format=png"
+            },
+            {
+                "id": 7,
+                "name": "Kill IE6",
+                "description": "A simple port of the IE6 warning script (http://code.google.com/p/ie6-upgrade-warning/) to use in your Umbraco websites.",
+                "karma": "11",
+                "downloads": "688",
+                "icon":"https://our.umbraco.org/media/wiki/9138/634697622367666000_offroadcode-100x100.png?bgcolor=fff&height=154&width=281&format=png"
+            },
+            {
+                "id": 8,
+                "name": "Examine Media Indexer",
+                "description": "CogUmbracoExamineMediaIndexer",
+                "karma": "3",
+                "downloads": "1329",
+                "icon":"https://our.umbraco.org/media/wiki/50703/634782902373558000_cogworks.jpg?bgcolor=fff&height=154&width=281&format=png"
+            },
+            {
+                "id": 9,
+                "name": "SVG Icon Picker",
+                "description": "A picker, for picking icons from an SVG spritesheet.",
+                "karma": "5",
+                "downloads": "8",
+                "icon":"https://our.umbraco.org/media/wiki/154472/635997115126742822_logopng.png?bgcolor=fff&height=154&width=281&format=png"
+            },
+            {
+                "id": 10,
+                "name": "Pipeline CRM",
+                "description": "Pipeline is a social CRM that lives in Umbraco back-office. It tracks opportunities and helps teams collaborate with timelines and tasks. It stores information about your customers and your interactions with them. It integrates with your website, capturing opportunities from forms and powering personal portals.",
+                "karma": "3",
+                "downloads": "105",
+                "icon":"https://our.umbraco.org/media/wiki/152476/635917291068518788_pipeline-crm-logopng.png?bgcolor=fff&height=154&width=281&format=png"
             }
         ];
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/packagesNew/views/repo.html b/src/Umbraco.Web.UI.Client/src/views/packagesNew/views/repo.html
index bd2dc96f77..714be5c0d6 100644
--- a/src/Umbraco.Web.UI.Client/src/views/packagesNew/views/repo.html
+++ b/src/Umbraco.Web.UI.Client/src/views/packagesNew/views/repo.html
@@ -1,33 +1,20 @@
-<div class="" ng-controller="Umbraco.Editors.Packages.RepoController as vm">
-
-    <umb-editor-sub-header>
-        <umb-editor-sub-header-content-left>
-
-            <umb-editor-sub-header-section>
-                <div class="umb-packages-categories -collapsed">
-                    <a href="" class="umb-packages-category" ng-class="{'-active': category.active === true}" ng-click="vm.selectCategory(category)" ng-repeat="category in vm.categories">
-                        <i class="umb-packages-category-icon" ng-class="category.icon"></i>
-                        <div>{{ category.name }}</div>
-                    </a>
-                </div>
-            </umb-editor-sub-header-section>
-
-        </umb-editor-sub-header-content-left>
-    </umb-editor-sub-header>
+<div class="umb-packages-view-wrapper" ng-controller="Umbraco.Editors.Packages.RepoController as vm">
 
 
     <div class="umb-packages-search">
         <input class="-full-width-input" type="text" name="name" value="" placeholder="Search for packages">
     </div>
 
-
-    <!-- <div class="umb-packages-categories">
-        <a href="" class="umb-packages-category" ng-click="vm.selectCategory(category)" ng-repeat="category in vm.categories">
-            <i class="umb-packages-category-icon" ng-class="category.icon"></i>
+    <div class="umb-packages-categories">
+        <a
+            href=""
+            class="umb-packages-category"
+            ng-click="vm.selectCategory(category)"
+            ng-repeat="category in vm.categories"
+            ng-class="{'-active': category.active, '-first': $first, '-last': $last}">
             <div>{{ category.name }}</div>
         </a>
-    </div> -->
-
+    </div>
 
     <h4><strong>Popular</strong></h4>
     <div class="umb-packages clearfix">