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 e07e6f69f2..658c690f39 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
@@ -27,7 +27,7 @@
 
 
 .umb-packages {
-    margin: 0 -10px;
+    // margin: 0 -10px;
 }
 
 
@@ -225,31 +225,32 @@
     margin-bottom: 30px;
 }
 
+
+
 .umb-packages-category {
     display: flex;
     align-items: center;
     flex: 1 0 auto;
-    max-width: 25%;
-    background-color: @blue;
-    padding: 10px;
-    font-size: 13px;
-    border-radius: 3px;
-    color: @white;
-    box-sizing: border-box;
-    flex: 1 0 auto;
-    margin: 5px;
     justify-content: center;
 
-    &:hover {
-        background-color: @blueDark;
-        //box-shadow: 0 3px 8px rgba(0,0,0,0.2);
-    }
+    opacity: .6;
+
+    max-width: 25%;
+
+    font-size: 13px;
+    font-weight: bold;
+    color: @black;
+
+    box-sizing: border-box;
+
+    justify-content: center;
 }
 
+
 .umb-packages-category:hover,
 .umb-packages-category:focus {
     text-decoration: none;
-    color: @white;
+    opacity: 1;
 }
 
 .umb-packages-category-icon {
@@ -258,3 +259,26 @@
 
     display: none;
 }
+
+// Collapsed
+.umb-packages-categories.-collapsed {
+    margin-bottom: 0;
+}
+
+.umb-packages-categories.-collapsed .umb-packages-category {
+    margin-right: 20px;
+
+    &:last-child {
+        margin-right: 0;
+    }
+}
+
+.-ma0 {
+    margin: 0 !important;
+}
+
+.-collapsed .umb-packages-category.-active {
+    color: @black;
+    opacity: 1;
+    border-bottom: 2px solid @black;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/views/packagesNew/category.controller.js b/src/Umbraco.Web.UI.Client/src/views/packagesNew/category.controller.js
index 1030266e23..3dbf0403a0 100644
--- a/src/Umbraco.Web.UI.Client/src/views/packagesNew/category.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/packagesNew/category.controller.js
@@ -13,7 +13,13 @@
         vm.categories = [
             {
                 "icon": "icon-male-and-female",
-                "name": "Collaboration"
+                "name": "All",
+                "active": false
+            },
+            {
+                "icon": "icon-male-and-female",
+                "name": "Collaboration",
+                "active": true
             },
             {
                 "icon": "icon-molecular-network",
diff --git a/src/Umbraco.Web.UI.Client/src/views/packagesNew/category.html b/src/Umbraco.Web.UI.Client/src/views/packagesNew/category.html
index 0262b2c8ae..a012264d75 100644
--- a/src/Umbraco.Web.UI.Client/src/views/packagesNew/category.html
+++ b/src/Umbraco.Web.UI.Client/src/views/packagesNew/category.html
@@ -1,4 +1,4 @@
-<div ng-controller="Umbraco.Editors.Packages.CategoryController as vm">
+<div ng-controller="Umbraco.Editors.Packages.CategoryController as vm" class="clearfix">
 
     <umb-load-indicator ng-if="page.loading"></umb-load-indicator>
 
@@ -16,7 +16,81 @@
 
             <umb-editor-container>
 
-                This is my category
+
+                <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>
+
+
+                <h4><strong>Popular</strong></h4>
+                <div class="umb-packages clearfix">
+
+                    <div class="umb-package" ng-repeat="package in vm.packages">
+                        <a class="umb-package-link" href="#">
+
+                            <div class="umb-package-icon">
+                                <img ng-src="{{package.icon}}" alt="" />
+                            </div>
+
+                            <div class="umb-package-info">
+                                <div class="umb-package-name">{{ package.name }}</div>
+
+                                <div class="umb-package-numbers">
+                                    <small class="umb-package-downloads">
+                                        <i class="icon-download-alt"></i> <strong>{{ package.downloads }}</strong>
+                                    </small>
+                                    <small class="umb-package-karma">
+                                        <i class="icon-hearts"></i> <strong>{{ package.karma }}</strong>
+                                    </small>
+                                </div>
+
+                            </div>
+                        </a>
+                    </div> <!-- end package -->
+
+                </div> <!-- end packages -->
+
+
+                <h4><strong>Latest</strong></h4>
+                <div class="umb-packages clearfix">
+
+                    <div class="umb-package" ng-repeat="package in vm.packages">
+                        <a class="umb-package-link" href="#">
+
+                            <div class="umb-package-icon">
+                                <img src="{{ package.icon }}" alt="" />
+                            </div>
+
+                            <div class="umb-package-info">
+                                <h4 class="umb-package-name">
+                                    {{ package.name }}
+                                </h4>
+
+                                <div class="umb-package-numbers">
+                                    <small class="umb-package-downloads">
+                                        <i class="icon-download-alt"></i> <strong>{{ package.downloads }}</strong>
+                                    </small>
+                                    <small class="umb-package-karma">
+                                        <i class="icon-hearts"></i> <strong>{{ package.karma }}</strong>
+                                    </small>
+                                </div>
+
+                            </div>
+                        </a>
+                    </div> <!-- end package -->
+
+                </div> <!-- end packages -->
 
             </umb-editor-container>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/packagesNew/overview.controller.js b/src/Umbraco.Web.UI.Client/src/views/packagesNew/overview.controller.js
index 820e1d2cf1..e01f818cb0 100644
--- a/src/Umbraco.Web.UI.Client/src/views/packagesNew/overview.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/packagesNew/overview.controller.js
@@ -14,7 +14,13 @@
         vm.categories = [
             {
                 "icon": "icon-male-and-female",
-                "name": "Collaboration"
+                "name": "All",
+                "active": true
+            },
+            {
+                "icon": "icon-male-and-female",
+                "name": "Collaboration",
+                "active": false
             },
             {
                 "icon": "icon-molecular-network",
diff --git a/src/Umbraco.Web.UI.Client/src/views/packagesNew/overview.html b/src/Umbraco.Web.UI.Client/src/views/packagesNew/overview.html
index 724ea7af84..3d18e27411 100644
--- a/src/Umbraco.Web.UI.Client/src/views/packagesNew/overview.html
+++ b/src/Umbraco.Web.UI.Client/src/views/packagesNew/overview.html
@@ -1,4 +1,4 @@
-<div ng-controller="Umbraco.Editors.Packages.OverviewController as vm">
+<div ng-controller="Umbraco.Editors.Packages.OverviewController as vm" class="clearfix">
 
     <umb-load-indicator ng-if="page.loading"></umb-load-indicator>
 
@@ -16,16 +16,31 @@
 
             <umb-editor-container>
 
+                <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-search">
                     <input class="-full-width-input" type="text" name="name" value="" placeholder="Search for packages">
                 </div>
 
-                <div class="umb-packages-categories">
+                <!-- <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>{{ category.name }}</div>
                     </a>
-                </div>
+                </div> -->
 
 
                 <h4><strong>Popular</strong></h4>