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 a043cd5571..6f7aaad923 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
@@ -23,7 +23,7 @@
 
 .umb-packages-search {
     width: 100%;
-    background: @grayLighter;
+    background: @gray-10;
     border-radius: 3px;
     padding: 30px;
     box-sizing: border-box;
@@ -33,15 +33,13 @@
     border-width: 2px;
     border-radius: 3px;
     min-height: 44px;
-
     padding: 4px 10px;
     font-size: 16px;
-    border-color: #ececec;
     margin-bottom: 0;
-    border-color: @grayLight;
+    border-color: @gray-8;
 
     &:hover, &:focus {
-        border-color: @grayLight;
+        border-color: @gray-8;
     }
 }
 
@@ -112,22 +110,17 @@
     flex-wrap: wrap;
     flex-direction: column;
     justify-content: center;
-
     position: relative;
     box-sizing: border-box;
-
     height: 100%;
     width: 100%;
-
-    border: 1px solid #ececec;
+    border: 1px solid @gray-9;
     border-radius: 3px;
-
     text-decoration: none !important;
-
     transition: border-color 100ms ease;
 
     &:hover {
-        border-color: @blue;
+        border-color: @turquoise;
     }
 }
 
@@ -136,21 +129,16 @@
 // Icon
 .umb-package-icon {
     display: flex;
-
     justify-content: center;
     align-items: center;
-
     padding-top: 10px;
     padding-right: 10px;
     padding-left: 10px;
     padding-bottom: 10px;
-
     text-align: center;
-    background-color: white;
-
+    background-color: @white;
     border-top-right-radius: 3px;
     border-top-left-radius: 3px;
-
     min-height: 60px;
 }
 
@@ -168,11 +156,10 @@
     padding-left: 15px;
     padding-top: 15px;
     text-align: center;
-    background: @grayLighter;
+    background: @gray-10;
     border-bottom-left-radius: 3px;
     border-bottom-right-radius: 3px;
-
-    border-top: 1px solid #ececec;
+    border-top: 1px solid @gray-9;
 }
 
 
@@ -181,13 +168,10 @@
     font-size: 14px;
     max-width: 250px;
     margin-bottom: 5px;
-
     font-weight: bold;
-
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-
     line-height: normal;
     margin-left: auto;
     margin-right: auto;
@@ -195,10 +179,9 @@
 
 .umb-package-description {
     font-size: 11px;
-    color: @grayMed;
+    color: @gray-4;
     word-wrap: break-word;
     line-height: 1.1rem;
-
     white-space: nowrap;
     max-width: 100%;
     overflow: hidden;
@@ -211,15 +194,12 @@
     flex-wrap: wrap;
     flex-direction: row;
     justify-content: center;
-
     opacity: .6;
-
     margin-top: 10px;
 }
 
 .umb-package-numbers small {
     padding: 0 5px;
-
     display: flex;
     align-items: center;
     justify-content: center;
@@ -234,7 +214,7 @@
 }
 
 .umb-package-link:hover .umb-package-numbers .icon-hearts {
-    color: red !important;
+    color: @red !important;
 }
 
 // Version
@@ -267,9 +247,9 @@
     color: @black;
     box-sizing: border-box;
     justify-content: center;
-    border-top: 1px solid @grayLight;
-    border-bottom: 1px solid @grayLight;
-    border-right: 1px solid @grayLight;
+    border-top: 1px solid @gray-8;
+    border-bottom: 1px solid @gray-8;
+    border-right: 1px solid @gray-8;
     padding: 10px 0;
 }
 
@@ -286,30 +266,24 @@
 
 @media (max-width: 992px) {
     .umb-packages-category {
-        border: 1px solid @grayLight;
+        border: 1px solid @gray-8;
         margin: 5px;
         flex: 0 0 auto;
-
         text-align: center;
         padding: 10px;
-
         max-width: 100%;
-
         border-radius: 3px;
     }
 }
 
 @media (min-width: 1100px) and (max-width: 1300px) {
     .umb-packages-category {
-        border: 1px solid @grayLight;
+        border: 1px solid @gray-8;
         margin: 5px;
         flex: 0 0 auto;
-
         text-align: center;
         padding: 10px;
-
         max-width: 100%;
-
         border-radius: 3px;
     }
 }
@@ -318,17 +292,17 @@
 .umb-packages-category:hover,
 .umb-packages-category.-active {
     text-decoration: none;
-    color: @blue;
+    color: @turquoise;
 }
 
 .umb-packages-category.-first {
-    border-left: 1px solid @grayLight;
+    border-left: 1px solid @gray-8;
     border-top-left-radius: 3px;
     border-bottom-left-radius: 3px;
 }
 
 .umb-packages-category.-last {
-    border-right: 1px solid @grayLight;
+    border-right: 1px solid @gray-8;
     border-top-right-radius: 3px;
     border-bottom-right-radius: 3px;
 }
@@ -345,7 +319,7 @@ a.umb-package-details__back-link {
 }
 
 .umb-package-details__back-link:hover {
-    color: @grayMed;
+    color: @gray-4;
     text-decoration: none;
 }
 
@@ -382,7 +356,7 @@ a.umb-package-details__back-link {
 }
 
 .umb-package-details__section {
-    background: @grayLighter;
+    background: @gray-10;
     padding: 20px;
     margin-bottom: 20px;
     border-radius: 3px;
@@ -391,7 +365,7 @@ a.umb-package-details__back-link {
 .umb-package-details__section-title {
     font-size: 17px;
     font-weight: bold;
-    color: black;
+    color: @black;
     margin-top: 0;
     margin-bottom: 15px;
 }
@@ -408,7 +382,7 @@ a.umb-package-details__back-link {
 }
 
 .umb-package-details__information-item-label {
-    color: black;
+    color: @black;
     font-weight: bold;
 }
 
@@ -418,7 +392,7 @@ a.umb-package-details__back-link {
 
 .umb-package-details__information-item-label-2 {
     font-size: 12px;
-    color: @grayMed;
+    color: @gray-4;
 }
 
 .umb-package-details__compatability {
@@ -441,12 +415,12 @@ a.umb-package-details__back-link {
 /* Links */
 
 .umb-package-details__link {
-    color: #DA3287;
+    font-weight: bold;
+    color: @black;
 }
 
 .umb-package-details__link:hover {
-    color: #B32D71;
-    text-decoration: none;
+    text-decoration: underline;
 }
 
 /* Owner profile */
@@ -462,13 +436,13 @@ a.umb-package-details__back-link {
 
 .umb-package-details__owner-profile-name {
     font-size: 15px;
-    color: #000000;
+    color: @black;
     font-weight: bold;
 }
 
 .umb-package-details__owner-profile-karma {
     font-size: 12px;
-    color: @grayMed;
+    color: @gray-4;
 }
 
 /* gallery */
@@ -480,7 +454,7 @@ a.umb-package-details__back-link {
 
 .umb-gallery__thumbnail {
     flex: 0 1 100px;
-    border: 1px solid @grayLight;
+    border: 1px solid @gray-8;
     border-radius: 3px;
     margin: 5px;
     padding: 10px;
@@ -490,7 +464,7 @@ a.umb-package-details__back-link {
 
 .umb-gallery__thumbnail:hover {
     cursor: pointer;
-    border-color: @blue;
+    border-color: @turquoise;
 }
 
 /* PACKAGE LIST */
@@ -503,18 +477,20 @@ a.umb-package-details__back-link {
 .umb-package-list__item {
     display: flex;
     flex-direction: row;
-    background: @grayLighter;
-    margin-bottom: 10px;
+    background: @gray-10;
+    margin-bottom: 5px;
     border-radius: 3px;
-    padding: 20px;
+    padding: 15px 20px;
     align-items: center;
 }
 
 .umb-package-list__item-icon {
-    flex: 0 0 50px;
+    flex: 0 0 35px;
     margin-right: 20px;
     font-size: 30px;
     text-align: center;
+    justify-content: center;
+    align-items: center;
 }
 
 .umb-package-list__item-content {
@@ -531,7 +507,7 @@ a.umb-package-details__back-link {
 
 .umb-package-list__item-description {
     font-size: 14px;
-    color: @grayMed;
+    color: @gray-4;
 }
 
 .umb-package-list__item-actions {
@@ -539,3 +515,13 @@ a.umb-package-details__back-link {
     display: flex;
     justify-content: flex-end;
 }
+
+.umb-package-list__item-action {
+    font-weight: bold;
+    color: @gray-3;
+}
+
+.umb-package-list__item-action:hover {
+    text-decoration: none;
+    color: @red;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/views/packager/views/installed.html b/src/Umbraco.Web.UI.Client/src/views/packager/views/installed.html
index a41a7e72c0..6d8b379bc8 100644
--- a/src/Umbraco.Web.UI.Client/src/views/packager/views/installed.html
+++ b/src/Umbraco.Web.UI.Client/src/views/packager/views/installed.html
@@ -24,7 +24,7 @@
                     </div>
 
                     <div class="umb-package-list__item-actions">
-                        <button type="button" class="umb-era-button" ng-click="vm.confirmUninstall(installedPackage)">Uninstall</button>
+                        <a class="umb-package-list__item-action" href="" ng-click="vm.confirmUninstall(installedPackage)">Uninstall</a>
                     </div>
 
                 </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/packager/views/repo.html b/src/Umbraco.Web.UI.Client/src/views/packager/views/repo.html
index e7b14182ca..1671cda743 100644
--- a/src/Umbraco.Web.UI.Client/src/views/packager/views/repo.html
+++ b/src/Umbraco.Web.UI.Client/src/views/packager/views/repo.html
@@ -114,7 +114,7 @@
     </div>
 
 
-    <!-- DETAILS --->
+    <!-- DETAILS -->
     <div ng-if="vm.packageViewState === 'packageDetails' && vm.loading === false">
 
         <umb-editor-sub-header>