diff --git a/galaxyui/src/app/home/carousel/carousel.component.less b/galaxyui/src/app/home/carousel/carousel.component.less
index 345411e2f..7655fd800 100644
--- a/galaxyui/src/app/home/carousel/carousel.component.less
+++ b/galaxyui/src/app/home/carousel/carousel.component.less
@@ -5,7 +5,7 @@
 .partner-carousel {
     border: 1px solid #ccc;
     width: 100%;
-    height: 265px;
+    height: 185px;
     color: @black;
 }
 
@@ -31,7 +31,7 @@
 .carousel-left-control, .carousel-right-control {
     display: inline-block;
     background-color: transparent;
-    height: 225px;
+    height: 185px;
     vertical-align: middle;
     width: 2%;
     min-width: 20px;
@@ -39,7 +39,7 @@
     color: #b7b7b7;
     a {
         display: block;
-        margin-top: 105px;
+        margin-top: 80px;
     }
     a:hover {
         cursor: pointer;
@@ -55,7 +55,7 @@
 
 .carousel-slider {
     display: inline-block;
-    height: 225px;
+    height: 145px;
     vertical-align: middle;
     width: 95%;
 }
@@ -93,13 +93,13 @@
     overflow-x: hidden;
     overflow-y: hidden;
     -webkit-overflow-scrolling: touch;
-    padding: 15px;
+    padding: 0px;
 }
 
 .carousel-slider-inner > div {
     border-right: 1px solid #ccc;
     text-align: center;
-    padding: 15px 30px;
+    padding: 5px 15px;
     flex-shrink: 0;
     .img-wrapper {
         width: 100%;
@@ -113,18 +113,18 @@
         }
     }
     img {
-        width: 200px;
+        width: 120px;
     }
     img.missing-avatar {
-        width: 200px;
-        height: 170px;
+        width: 120px;
+        // height: 170px;
     }
     p {
-        padding-top: 10px;
+        padding-top: 0px;
         font-weight: 700;
     }
-    width: 260px;
-    height: 225px;
+    width: 155px;
+    height: 145px;
 }
 
 .carousel-slider-inner > div:last-child {
diff --git a/galaxyui/src/app/home/home.component.html b/galaxyui/src/app/home/home.component.html
index 1fd9d3710..3aa4b4880 100644
--- a/galaxyui/src/app/home/home.component.html
+++ b/galaxyui/src/app/home/home.component.html
@@ -6,7 +6,7 @@
     <popular-component></popular-component>
 
     <div class="row content-row" [ngClass]="{'ready': showCards}">
-        <div class="col-sm-4">
+        <div class="col-md-4">
             <div class="home-card" id="card-1">
                 <pfng-card
                     [headerTemplate]="downloadHeader"
@@ -20,7 +20,7 @@
                 </pfng-card>
             </div>
         </div>
-        <div class="col-sm-4">
+        <div class="col-md-4">
             <div class="home-card" id="card-2">
                 <pfng-card
                     [headerTemplate]="shareHeader"
@@ -34,7 +34,7 @@
                 </pfng-card>
             </div>
         </div>
-        <div class="col-sm-4">
+        <div class="col-md-4">
             <div class="home-card" id="card-3">
                 <pfng-card
                     [headerTemplate]="featureHeader"