diff --git a/custom/public/css/git.openi.css b/custom/public/css/git.openi.css
index c97b48056..828e4ee0d 100644
--- a/custom/public/css/git.openi.css
+++ b/custom/public/css/git.openi.css
@@ -256,14 +256,14 @@
   box-shadow: none !important;
 }
 .homeorg-list .card .ui.small.header .content{
-  width: calc(100% - 3.25em);
+  width: calc(100% - 3.75em);
 }
 .homepro-tit{
   background: #FFF;
   z-index: 9;
   position: relative;
 }
-.homepro-list{
+.homepro-list, .homeorg-list{
   position: relative;
   z-index: 9;
   padding: 1.0em 1.0em 3.0em;
@@ -280,9 +280,9 @@
   line-height: 40px !important;
 }
 
-.homepro-list .swiper-pagination-bullet-active{
+.homepro-list .swiper-pagination-bullet-active, .homeorg-list .swiper-pagination-bullet-active{
   width: 40px;
-    border-radius: 4px;
+  border-radius: 4px;
 }
 .i-env > div{
   position: relative;
diff --git a/public/home/home.js b/public/home/home.js
index bc8932642..47bee87ad 100644
--- a/public/home/home.js
+++ b/public/home/home.js
@@ -7,26 +7,40 @@ if(isEmpty(token)){
 	}
 }
 
-var swiperNewMessage = new Swiper(".newslist", {
-    direction: "vertical",
-    slidesPerView: 10,
-    loop: true,
+var swiperRepo = new Swiper(".homepro-list", {
+    slidesPerView: 1,
+    slidesPerColumn: 2,
+    slidesPerColumnFill:'row',
+    spaceBetween: 30,
+    pagination: {
+        el: ".swiper-pagination",
+        clickable: true,
+    },
     autoplay: {
         delay: 2500,
         disableOnInteraction: false,
     },
+    breakpoints: {
+        768: {
+            slidesPerView: 2,
+        },
+        1024: {
+            slidesPerView: 3,
+        },
+    },
 });
-var swiperRepo = new Swiper(".homepro-list", {
+
+var swiperOrg = new Swiper(".homeorg-list", {
     slidesPerView: 1,
-    slidesPerColumn: 2,
+    slidesPerColumn: 4,
     slidesPerColumnFill:'row',
-    spaceBetween: 30,
+    spaceBetween: 15,
     pagination: {
         el: ".swiper-pagination",
         clickable: true,
     },
     autoplay: {
-        delay: 2500,
+        delay: 4500,
         disableOnInteraction: false,
     },
     breakpoints: {
@@ -400,7 +414,7 @@ function displayOrg(json){
     if (json != null && json.length > 0){
         for(var i = 0; i < json.length;i++){
             var record = json[i]
-            html += "<div class=\"column\">";
+            html += "<div class=\"swiper-slide\">";
             html += "   <a href=\"/" + record["Name"] + "\" class=\"ui fluid card\">";
             html += "       <div class=\"content\">";
             html += "           <div class=\"ui small header\">";
diff --git a/templates/home.tmpl b/templates/home.tmpl
index 08893d71e..d21197602 100755
--- a/templates/home.tmpl
+++ b/templates/home.tmpl
@@ -42,7 +42,11 @@
                 <a href="{{AppSubUrl}}/explore/organizations" class="circular ui primary basic button">{{.page_recommend_org_more}} <i class="arrow circle right icon"></i></a>
             </div>
             <div class="sixteen wide tablet twelve wide computer column">
-                <div class="ui three column grid homeorg-list" id="recommendorg">
+                <div class="homeorg-list">
+                    <div class="swiper-wrapper" id="recommendorg">
+                        
+                    </div>
+                    <div class="swiper-pagination"></div>
                     
                 </div>
             </div>