diff --git a/web_src/vuepages/pages/repos/components/RecommendRepos.vue b/web_src/vuepages/pages/repos/components/RecommendRepos.vue
index e9cede635..fc5b4b51d 100644
--- a/web_src/vuepages/pages/repos/components/RecommendRepos.vue
+++ b/web_src/vuepages/pages/repos/components/RecommendRepos.vue
@@ -87,7 +87,7 @@ export default {
         this.swiperHandler.updateSlides();
         this.swiperHandler.updateProgress();
         this.$nextTick(() => {
-          if (typeof LetterAvatar != undefined) {
+          if (typeof LetterAvatar != 'undefined') {
             LetterAvatar && LetterAvatar.transform();
           }
         });
diff --git a/web_src/vuepages/pages/repos/components/ReposFilters.vue b/web_src/vuepages/pages/repos/components/ReposFilters.vue
index e2db9ddc5..6134913be 100644
--- a/web_src/vuepages/pages/repos/components/ReposFilters.vue
+++ b/web_src/vuepages/pages/repos/components/ReposFilters.vue
@@ -13,7 +13,7 @@
 export default {
   name: "ReposFilters",
   props: {
-    // visible: { type: Boolean, default: false },
+    defaultsort: { type: String, default: 'mostpopular' },
   },
   components: {},
   data() {
@@ -25,23 +25,26 @@ export default {
       }, {
         key: 'mostactive',
         label: '近期活跃',
+      }, {
+        key: 'newest',
+        label: '最近创建',
       }, {
         key: 'recentupdate',
         label: '最近更新',
       }, {
-        key: 'newest',
+        key: 'moststars',
         label: '点赞最多',
       }, {
-        key: 'moststars',
+        key: 'mostforks',
         label: '派生最多',
       }, {
-        key: 'mostforks',
+        key: 'mostdatasets',
         label: '数据集最多',
       }, {
-        key: 'mostdatasets',
+        key: 'mostaitasks',
         label: 'AI任务最多',
       }, {
-        key: 'mostaitasks',
+        key: 'mostmodels',
         label: '模型最多',
       }]
     };
@@ -50,10 +53,13 @@ export default {
     changeFilters(item, index) {
       this.focusIndex = index;
       this.$emit('change', this.list[this.focusIndex]);
+    },
+    setDefaultFilter(sort) {
+      const index = this.list.findIndex((item) => item.key == sort);
+      this.focusIndex = index >= 0 ? index : 0;
     }
   },
-  mounted() {
-
+  mounted() {   
   },
 };
 </script>
diff --git a/web_src/vuepages/pages/repos/components/ReposList.vue b/web_src/vuepages/pages/repos/components/ReposList.vue
index b4de806ed..f8d0eb63c 100644
--- a/web_src/vuepages/pages/repos/components/ReposList.vue
+++ b/web_src/vuepages/pages/repos/components/ReposList.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="list-container">
-    <div>
+    <div style="min-height:540px;" v-loading="loading">
       <div class="repos-item-container" v-for="(item, index) in list" :key="item.ID">
         <ReposItem :data="item"></ReposItem>
       </div>
@@ -27,6 +27,7 @@ export default {
   components: { ReposItem },
   data() {
     return {
+      loading: false,
       list: [],
       pageSizes: [15, 30, 50],
       pageSize: 15,
@@ -36,6 +37,7 @@ export default {
   },
   methods: {
     getListData() {
+      this.loading = true;
       getReposListData({
         q: this.q || '',
         topic: this.topic || '',
@@ -44,17 +46,19 @@ export default {
         page: this.page || 1,
       }).then(res => {
         res = res.data;
+        this.loading = false;
         if (res.Code == 0) {
           this.list = res.Data.Repos || [];
           this.total = res.Data.Total;
           this.$nextTick(() => {
-            if (typeof LetterAvatar != undefined) {
+            if (typeof LetterAvatar != 'undefined') {
               LetterAvatar && LetterAvatar.transform();
             }
           });
         }
       }).catch(err => {
         console.log(err);
+        this.loading = false;
       });
     },
     currentChange(page) {
@@ -66,20 +70,7 @@ export default {
       this.getListData();
     }
   },
-  watch: {
-    q(nVal, oVal) {
-      this.getListData();
-    },
-    topic(nVal, oVal) {
-      this.getListData();
-    },
-    sort: {
-      handler(nVal, oVal) {
-        this.getListData();
-      },
-      immediate: true,
-    },
-  },
+  watch: {},
   mounted() { },
 };
 </script>
diff --git a/web_src/vuepages/pages/repos/components/SearchBar.vue b/web_src/vuepages/pages/repos/components/SearchBar.vue
index f21fc581d..27855df21 100644
--- a/web_src/vuepages/pages/repos/components/SearchBar.vue
+++ b/web_src/vuepages/pages/repos/components/SearchBar.vue
@@ -5,7 +5,7 @@
         <div class="_repo_search_input">
           <input type="text" v-model="searchInputValue" placeholder="搜项目" />
         </div>
-        <div class="_repo_search_btn">
+        <div class="_repo_search_btn" @click="search">
           <svg xmlns="http://www.w3.org/2000/svg"
             class="styles__StyledSVGIconPathComponent-sc-16fsqc8-0 kdvdTY svg-icon-path-icon fill" viewBox="0 0 32 32"
             width="24" height="24">
@@ -28,9 +28,13 @@
         </div>
       </div>
       <div class="_repo_search_label">
-        <a :href="`/explore/repos?q=&topic=${item}&sort=hot`"
+        <a v-if="type == 'square'" :href="`/explore/repos?q=${searchInputValue.trim()}&topic=${item}&sort=${sort}`"
           :style="{ backgroundColor: topicColors[index % topicColors.length] }" v-for="(item, index) in topics"
           :key="index">{{ item }}</a>
+        <a v-if="type == 'search'"
+          :href="`/explore/repos?q=${searchInputValue.trim()}&topic=${selectTopic == item ? '' : item}&sort=${sort}`"
+          :style="{ backgroundColor: selectTopic == item ? selectedColor : defaultColor, color: '#40485b' }"
+          v-for="(item, index) in topics" :key="index">{{ item }}</a>
       </div>
     </div>
   </div>
@@ -38,7 +42,6 @@
 <script>
 
 import { getPromoteData } from '~/apis/modules/common';
-// import { CLUSTERS, AI_CENTER, COMPUTER_RESOURCES, ACC_CARD_TYPE } from '~/const';
 const COLOR_LIST = [
   'rgb(255, 104, 104)',
   'rgb(22, 132, 252)',
@@ -52,18 +55,33 @@ const COLOR_LIST = [
 export default {
   name: "SearchBar",
   props: {
-    // visible: { type: Boolean, default: false },
+    type: { type: String, default: 'square' }, // square|search
+    searchValue: { type: String, default: '' },
+    topic: { type: String, default: '' },
+    sort: { type: String, default: '' },
   },
   components: {},
   data() {
     return {
       searchInputValue: '',
       topicColors: COLOR_LIST,
+      defaultColor: '#F6F6F6',
+      selectedColor: '',
+      selectTopic: '',
       topics: [],
     };
   },
   methods: {
-    xxx() {
+    search() {
+      window.location.href = `/explore/repos?q=${this.searchInputValue}&sort=${this.sort}&topic=${this.selectTopic}`;
+    }
+  },
+  watch: {
+    searchValue(nVal) {
+      this.searchInputValue = nVal;
+    },
+    topic(nVal) {
+      this.selectTopic = nVal;
     }
   },
   mounted() {
@@ -72,6 +90,9 @@ export default {
       try {
         const topics = JSON.parse(data);
         this.topics = topics;
+        if (this.selectTopic && this.topics.indexOf(this.selectTopic) < 0) {
+          this.topics.push(this.selectTopic);
+        }
       } catch (err) {
         console.log(err);
       }
diff --git a/web_src/vuepages/pages/repos/search/index.vue b/web_src/vuepages/pages/repos/search/index.vue
index 83ceb2a4a..39111f4d2 100644
--- a/web_src/vuepages/pages/repos/search/index.vue
+++ b/web_src/vuepages/pages/repos/search/index.vue
@@ -1,59 +1,89 @@
 <template>
   <div>
-    search
+    <div class="ui container">
+      <SearchBar type="search" :sort="reposListSortType" :searchValue="reposListQurey" :topic="reposListTopic"
+        @search="changeSearch"></SearchBar>
+    </div>
+    <div class="ui container">
+      <div class="ui grid">
+        <div class="computer only ui two wide computer column">
+          <ReposFilters ref="reposFiltersRef" @change="changeFilters" :defaultsort="reposListSortType"></ReposFilters>
+        </div>
+        <div class="ui sixteen wide mobile twelve wide tablet ten wide computer column">
+          <ReposList ref="reposListRef" :sort="reposListSortType" :q="reposListQurey" :topic="reposListTopic">
+          </ReposList>
+        </div>
+        <div class="computer only ui four wide computer column">
+          <div>
+            <ActiveUsers></ActiveUsers>
+          </div>
+          <div class="active-org-c">
+            <ActiveOrgs></ActiveOrgs>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 
+import SearchBar from '../components/SearchBar.vue';
+import ReposFilters from '../components/ReposFilters.vue';
+import ReposList from '../components/ReposList.vue';
+import ActiveUsers from '../components/ActiveUsers.vue';
+import ActiveOrgs from '../components/ActiveOrgs.vue';
+
 // import { saveLocalModel, getModelInfoByName, modifyModel } from '~/apis/modules/modelmanage';
 import { getUrlSearchParams } from '~/utils';
-// import { MODEL_ENGINES } from '~/const'
 
 export default {
   data() {
     return {
-      type: '0', // 1-修改，其它-新增
-      loading: false,
-      state: {
-        type: 0,
-        name: '',
-        version: '0.0.1',
-        engine: '0',
-        label: '',
-        description: '',
-      },
-      nameErr: false,
-      isShowVersion: false,      
+      reposListSortType: 'mostpopular',
+      reposListQurey: '',
+      reposListTopic: '',
     };
   },
-  components: {},
+  components: {
+    SearchBar,
+    ReposFilters,
+    ReposList,
+    ActiveUsers,
+    ActiveOrgs,
+  },
   methods: {
-    checkName() {
-      this.nameErr = !this.state.name;
-      return !this.nameErr;
-    },
-    submit() {
-
+    changeFilters(condition) {
+      this.reposListSortType = condition.key;
+      this.search();
     },
-    cancel() {
+    changeSearch() {
 
     },
-    goDetail() {
-
+    search() {
+      this.$nextTick(() => {
+        this.$refs.reposListRef.getListData();
+      });
     }
   },
   mounted() {
     const urlParams = getUrlSearchParams();
-    if (urlParams.type == '1' && urlParams.name && urlParams.id) {
-
-    }
-  },
-  beforeDestroy() {
+    this.reposListQurey = urlParams.q;
+    this.reposListTopic = urlParams.topic;
+    this.reposListSortType = urlParams.sort || 'mostpopular';
+    this.search();
+    this.$refs.reposFiltersRef.setDefaultFilter(this.reposListSortType);
   },
+  beforeDestroy() { },
 };
 </script>
 
 <style scoped lang="less">
+.recommend-repos-c {
+  margin: 0 0 54px;
+}
 
+.active-org-c {
+  margin-top: 32px;
+}
 </style>
diff --git a/web_src/vuepages/pages/repos/square/index.vue b/web_src/vuepages/pages/repos/square/index.vue
index d94eeb059..99911a11c 100644
--- a/web_src/vuepages/pages/repos/square/index.vue
+++ b/web_src/vuepages/pages/repos/square/index.vue
@@ -4,7 +4,8 @@
       <SquareTop></SquareTop>
     </div>
     <div class="ui container">
-      <SearchBar></SearchBar>
+      <SearchBar type="square" :sort="reposListSortType" :searchValue="reposListQurey" :topic="reposListTopic"
+        @search="changeSearch"></SearchBar>
     </div>
     <div class="recommend-repos-c">
       <RecommendRepos></RecommendRepos>
@@ -12,10 +13,11 @@
     <div class="ui container">
       <div class="ui grid">
         <div class="computer only ui two wide computer column">
-          <ReposFilters @change="changeFilters"></ReposFilters>
+          <ReposFilters ref="reposFiltersRef" @change="changeFilters" :defaultsort="reposListSortType"></ReposFilters>
         </div>
         <div class="ui sixteen wide mobile twelve wide tablet ten wide computer column">
-          <ReposList :sort="reposListSortType" :q="reposListQurey"></ReposList>
+          <ReposList ref="reposListRef" :sort="reposListSortType" :q="reposListQurey" :topic="reposListTopic">
+          </ReposList>
         </div>
         <div class="computer only ui four wide computer column">
           <div>
@@ -40,14 +42,12 @@ import ReposList from '../components/ReposList.vue';
 import ActiveUsers from '../components/ActiveUsers.vue';
 import ActiveOrgs from '../components/ActiveOrgs.vue';
 
-// import { saveLocalModel, getModelInfoByName, modifyModel } from '~/apis/modules/modelmanage';
-import { getUrlSearchParams } from '~/utils';
-
 export default {
   data() {
     return {
       reposListSortType: 'mostpopular',
       reposListQurey: '',
+      reposListTopic: '',
     };
   },
   components: {
@@ -62,16 +62,19 @@ export default {
   methods: {
     changeFilters(condition) {
       this.reposListSortType = condition.key;
+      this.search();
+    },
+    changeSearch() { },
+    search() {
+      this.$nextTick(() => {
+        this.$refs.reposListRef.getListData();
+      });
     }
   },
   mounted() {
-    const urlParams = getUrlSearchParams();
-    if (urlParams.type == '1' && urlParams.name && urlParams.id) {
-
-    }
-  },
-  beforeDestroy() {
+    this.search();
   },
+  beforeDestroy() { },
 };
 </script>