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 e58019553a..a5916fa14e 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
@@ -9,9 +9,12 @@
     padding: 20px 60px;
 }
 
+.umb-packages-section {
+    margin-bottom: 40px;
+}
+
 .umb-packages-search {
     width: 100%;
-    margin-bottom: 40px;
     background: @grayLighter;
     border-radius: 3px;
     padding: 30px;
@@ -258,7 +261,6 @@
     display: flex;
     user-select: center;
     flex-wrap: wrap;
-    margin-bottom: 30px;
 }
 
 .umb-packages-category {
@@ -275,7 +277,7 @@
     border-top: 1px solid @grayLight;
     border-bottom: 1px solid @grayLight;
     border-right: 1px solid @grayLight;
-    padding: 5px;
+    padding: 10px 0;
 }
 
 .umb-packages-category:hover,
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 714be5c0d6..7aacb9a010 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,78 +1,84 @@
 <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 class="umb-packages-section">
+        <div class="umb-packages-search">
+            <input class="-full-width-input" type="text" name="name" value="" placeholder="Search for packages">
+        </div>
     </div>
 
-    <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 class="umb-packages-section">
+        <div class="umb-packages-categories">
+            <a
+                href=""
+                class="umb-packages-category"
+                ng-click="vm.selectCategory(category, vm.categories)"
+                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">
+    <div class="umb-packages-section">
+        <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="" ng-click="vm.showPackageDetails(package)">
+            <div class="umb-package" ng-repeat="package in vm.packages">
+                <a class="umb-package-link" href="" ng-click="vm.showPackageDetails(package)">
 
-                <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 class="umb-package-icon">
+                        <img ng-src="{{package.icon}}" alt="" />
                     </div>
 
-                </div>
-            </a>
-        </div> <!-- end package -->
+                    <div class="umb-package-info">
+                        <div class="umb-package-name">{{ package.name }}</div>
 
-    </div> <!-- end packages -->
+                        <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 -->
 
-    <h4><strong>Latest</strong></h4>
-    <div class="umb-packages clearfix">
+        </div> <!-- end packages -->
+    </div>
 
-        <div class="umb-package" ng-repeat="package in vm.packages">
-            <a class="umb-package-link" href="" ng-click="vm.showPackageDetails(package)">
+    <div class="umb-packages-section">
+        <h4><strong>Latest</strong></h4>
+        <div class="umb-packages clearfix">
 
-                <div class="umb-package-icon">
-                    <img src="{{ package.icon }}" alt="" />
-                </div>
+            <div class="umb-package" ng-repeat="package in vm.packages">
+                <a class="umb-package-link" href="" ng-click="vm.showPackageDetails(package)">
 
-                <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 class="umb-package-icon">
+                        <img src="{{ package.icon }}" alt="" />
                     </div>
 
-                </div>
-            </a>
-        </div> <!-- end package -->
+                    <div class="umb-package-info">
+                        <h4 class="umb-package-name">
+                            {{ package.name }}
+                        </h4>
 
-    </div> <!-- end packages -->
+                        <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 -->
+    </div>
 
 </div>