diff --git a/frontend/setupTests.js b/frontend/setupTests.js
index 1d907ba8d..ac798a5a3 100644
--- a/frontend/setupTests.js
+++ b/frontend/setupTests.js
@@ -1,6 +1,7 @@
 import { config } from '@vue/test-utils';
 import ElementPlus from 'element-plus';
 import 'element-plus/dist/index.css';
+import CsgButton from '@/components/shared/CsgButton.vue';  
 import SvgIcon from '@/components/shared/SvgIcon.vue';
 import * as ElementPlusIconsVue from '@element-plus/icons-vue';
 import { createI18n } from 'vue-i18n';
@@ -23,6 +24,7 @@ config.global.plugins = [ElementPlus, i18n, pinia];
 // register global components
 config.global.components = {
     SvgIcon,
+    CsgButton,
     ...ElementPlusIconsVue
 };
 
diff --git a/frontend/src/components/__tests__/datasets/NewDataset.spec.js b/frontend/src/components/__tests__/datasets/NewDataset.spec.js
index 5b6675169..837d65c92 100644
--- a/frontend/src/components/__tests__/datasets/NewDataset.spec.js
+++ b/frontend/src/components/__tests__/datasets/NewDataset.spec.js
@@ -12,16 +12,14 @@ vi.mock('../../../stores/UserStore', () => ({
 }));
 
 // Mock useFetchApi
-const mockPost = vi.fn().mockResolvedValue({
-                   json: async () => ({
-                     data: { value: { data: { path: 'testuser/testdataset' } } },
-                     error: { value: null }
-                   })
-                 });
-
 vi.mock('../../../packs/useFetchApi', () => ({
   default: () => ({
-    post: () => mockPost(),
+    post: () => ({
+      json: () => Promise.resolve({
+        data: { value: { data: { path: 'testuser/testdataset' } } },
+        error: { value: null }
+      })
+    })
   })
 }));
 
@@ -70,28 +68,25 @@ describe("NewDataset", () => {
   });
 
   describe("form validation", () => {
+    const validateForm = () => {
+      return new Promise(resolve => {
+        wrapper.vm.$refs.dataFormRef.validate(valid => resolve(valid))
+      })
+    }
     it("validates required fields", async() => {
-      await wrapper.find('button').trigger('click');
-
-      await new Promise((resolve) => setTimeout(resolve, 300))
-      const formErrors = wrapper.findAll('.el-form-item__error');
-      expect(formErrors.length).toBeGreaterThan(0);
+      expect(await validateForm()).toBe(false)
     })
 
     it("accepts invalid dataset name", async () => {
       wrapper.vm.dataForm.name = '**__invalid-name'
-      await wrapper.find('button').trigger('click');
-      await new Promise((resolve) => setTimeout(resolve, 300))
-      const errorMessage = wrapper.find('.el-form-item__error');
-      expect(errorMessage.exists()).toBe(true);
+      await wrapper.vm.$nextTick()
+      expect(await validateForm()).toBe(false)
     });
 
     it("accepts valid dataset name", async () => {
       wrapper.vm.dataForm.name = 'valid-name'
-      await wrapper.find('button').trigger('click');
-      await new Promise((resolve) => setTimeout(resolve, 300))
-      const errorMessage = wrapper.find('.el-form-item__error');
-      expect(errorMessage.exists()).toBe(false);
+      await wrapper.vm.$nextTick()
+      expect(await validateForm()).toBe(true)
     });
   })
 
diff --git a/frontend/src/components/application_spaces/ApplicationSpaceDetail.vue b/frontend/src/components/application_spaces/ApplicationSpaceDetail.vue
index f25cdac85..c817e8740 100644
--- a/frontend/src/components/application_spaces/ApplicationSpaceDetail.vue
+++ b/frontend/src/components/application_spaces/ApplicationSpaceDetail.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full bg-gray-25 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto">
+  <div class="w-full bg-gray-25 border-b border-gray-100 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto">
     <div class="mx-auto page-responsive-width">
       <repo-header
         :private="applicationSpace.private"
diff --git a/frontend/src/components/application_spaces/ApplicationSpaceItem.vue b/frontend/src/components/application_spaces/ApplicationSpaceItem.vue
index f22d0ab2c..f83983b7e 100644
--- a/frontend/src/components/application_spaces/ApplicationSpaceItem.vue
+++ b/frontend/src/components/application_spaces/ApplicationSpaceItem.vue
@@ -66,7 +66,7 @@
       v-if="getComputed.taskTag"
       class="flex gap-2 my-2 overflow-x-auto no-scrollbar"
     >
-      <span class="max-w-[80px] xl:max-w-full overflow-hidden text-ellipsis whitespace-nowrap">
+      <span class="w-fit xl:max-w-full overflow-hidden text-ellipsis whitespace-nowrap">
         {{ getComputed.taskTag }}
       </span>
       <span>
diff --git a/frontend/src/components/application_spaces/NewApplicationSpace.vue b/frontend/src/components/application_spaces/NewApplicationSpace.vue
index bb981b229..d4e0d3e41 100644
--- a/frontend/src/components/application_spaces/NewApplicationSpace.vue
+++ b/frontend/src/components/application_spaces/NewApplicationSpace.vue
@@ -318,13 +318,12 @@
         </p>
         <div class="flex justify-end">
           <el-form-item>
-            <button
+            <CsgButton
               :loading="loading"
-              class="btn btn-primary btn-md"
               @click="handleSubmit"
-            >
-              {{ t('application_spaces.new.create') }}
-            </button>
+              class="btn btn-primary btn-md"
+              :name="t('application_spaces.new.create')"
+            />
           </el-form-item>
         </div>
       </el-form>
diff --git a/frontend/src/components/codes/NewCode.vue b/frontend/src/components/codes/NewCode.vue
index a00aff16a..7f0e1b9f1 100644
--- a/frontend/src/components/codes/NewCode.vue
+++ b/frontend/src/components/codes/NewCode.vue
@@ -139,13 +139,12 @@
         </p>
         <div class="flex justify-end">
           <el-form-item>
-            <button
+            <CsgButton
               :loading="loading"
               class="btn btn-primary btn-md"
+              :name="t('codes.newCode.createCode')"
               @click="handleSubmit"
-            >
-              {{ t('codes.newCode.createCode') }}
-            </button>
+            />
           </el-form-item>
         </div>
       </el-form>
diff --git a/frontend/src/components/collections/CollectionsDetail.vue b/frontend/src/components/collections/CollectionsDetail.vue
index e528ea645..5e406a250 100644
--- a/frontend/src/components/collections/CollectionsDetail.vue
+++ b/frontend/src/components/collections/CollectionsDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="w-full bg-gray-25 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto"
+    class="w-full bg-gray-25 border-b border-gray-100 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto"
   >
     <div class="mx-auto page-responsive-width">
       <repo-header
diff --git a/frontend/src/components/collections/NewCollection.vue b/frontend/src/components/collections/NewCollection.vue
index 5cb62efe7..227002969 100644
--- a/frontend/src/components/collections/NewCollection.vue
+++ b/frontend/src/components/collections/NewCollection.vue
@@ -128,12 +128,11 @@
       </el-form>
       <div class="flex justify-end w-full">
         <el-form-item>
-          <button
-            class="bg-brand-600 w-[118px] h-9 rounded-lg text-white flex items-center justify-center border disabled:text-gray-400 disabled:bg-gray-100 disabled:border-gray-200"
+          <CsgButton
+            class="btn btn-primary btn-md"
+            :name="$t('collections.newCollection.createCollection')"
             @click="createCollection"
-          >
-            {{ $t('collections.newCollection.createCollection') }}
-          </button>
+          />
         </el-form-item>
       </div>
     </div>
diff --git a/frontend/src/components/community/DiscussionCards.vue b/frontend/src/components/community/DiscussionCards.vue
index 4b19a8a74..c9c6720dd 100644
--- a/frontend/src/components/community/DiscussionCards.vue
+++ b/frontend/src/components/community/DiscussionCards.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-[16px]">
     <div class="flex justify-between">
-        <div @click="showDetail?showDetail=!showDetail:changeFlag('new')" class="px-[16px] py-[5px] border bg-gray-25 rounded-xs hover:bg-gray-100 text-gray-500 text-sm leading-[22px] cursor-pointer ">
+        <div @click="showDetail?showDetail=!showDetail:changeFlag('new')" class="btn btn-secondary-gray btn-sm w-fit ">
           {{ showDetail? $t('community.discussion.back'):$t('community.discussion.new') }}
         </div>
         <!-- <div class="hover:bg-gray-100 cursor-pointer flex items-center gap-[8px] px-[16px] py-[5px] rounded-xs text-gray-500 text-sm leading-[22px]">
diff --git a/frontend/src/components/community/EmptyCommunity.vue b/frontend/src/components/community/EmptyCommunity.vue
index 0bb98e716..efb81688c 100644
--- a/frontend/src/components/community/EmptyCommunity.vue
+++ b/frontend/src/components/community/EmptyCommunity.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="py-[60px] border border-gray-200 bg-gray-25 flex flex-col justify-center gap-[24px]">
+  <div class="py-[60px] border border-gray-200 bg-gray-25 flex flex-col justify-center gap-6 rounded-md">
     <div class="flex justify-center">
       <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path opacity="0.12" d="M12 17.5997C12 16.1062 12 15.3595 12.2906 14.789C12.5463 14.2873 12.9543 13.8793 13.456 13.6237C14.0265 13.333 14.7732 13.333 16.2667 13.333H25.0667C26.5601 13.333 27.3069 13.333 27.8773 13.6237C28.3791 13.8793 28.787 14.2873 29.0427 14.789C29.3333 15.3595 29.3333 16.1062 29.3333 17.5997V27.1512C29.3333 28.4757 27.747 29.1555 26.7879 28.2421C25.8541 27.3528 24.6141 26.8568 23.3247 26.8568H16.2667C14.7732 26.8568 14.0265 26.8568 13.456 26.5662C12.9543 26.3105 12.5463 25.9026 12.2906 25.4008C12 24.8304 12 24.0836 12 22.5902V17.5997Z" fill="#4D6AD6"/><path d="M12 18.667H9.66663C9.3371 18.667 9.17233 18.667 9.01189 18.6799C8.36734 18.7319 7.74499 18.9393 7.19818 19.2845C7.06206 19.3704 6.93025 19.4693 6.66663 19.667V19.667C5.98472 20.1784 5.64377 20.4341 5.38373 20.534C4.2864 20.9555 3.06397 20.3443 2.74275 19.2135C2.66663 18.9456 2.66663 18.5194 2.66663 17.667V9.06699C2.66663 6.82678 2.66663 5.70668 3.1026 4.85103C3.48609 4.09838 4.09802 3.48646 4.85066 3.10297C5.70631 2.66699 6.82642 2.66699 9.06663 2.66699H17.6C19.8402 2.66699 20.9603 2.66699 21.8159 3.10297C22.5686 3.48646 23.1805 4.09838 23.564 4.85103C24 5.70668 24 6.82678 24 9.06699V9.33366V10.0003M26.7878 28.2427V28.2427C27.747 29.1562 29.3333 28.4763 29.3333 27.1518V17.6003C29.3333 16.1069 29.3333 15.3601 29.0426 14.7897C28.787 14.2879 28.379 13.88 27.8773 13.6243C27.3068 13.3337 26.5601 13.3337 25.0666 13.3337H16.2666C14.7732 13.3337 14.0264 13.3337 13.456 13.6243C12.9542 13.88 12.5463 14.2879 12.2906 14.7897C12 15.3601 12 16.1069 12 17.6003V22.5908C12 24.0843 12 24.831 12.2906 25.4014C12.5463 25.9032 12.9542 26.3112 13.456 26.5668C14.0264 26.8575 14.7732 26.8575 16.2666 26.8575H23.3246C24.6141 26.8575 25.8541 27.3535 26.7878 28.2427Z" stroke="#4D6AD6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
     </div>
-    <div class="flex justify-center text-xl text-gray-700 leading-[28px] font-semibold">{{ $t('community.empty.welcome') }}</div>
-    <div class="flex justify-center text-sm text-gray-700 leading-[22px]">
+    <div class="flex justify-center text-xl text-gray-700 leading-8 font-semibold">{{ $t('community.empty.welcome') }}</div>
+    <div class="flex justify-center text-sm text-gray-700 leading-6">
       <span class="max-w-[320px] text-center">
         {{ $t('community.empty.desc') }}
       </span>
diff --git a/frontend/src/components/datasets/NewDataset.vue b/frontend/src/components/datasets/NewDataset.vue
index 8be3de8a9..caf96561b 100644
--- a/frontend/src/components/datasets/NewDataset.vue
+++ b/frontend/src/components/datasets/NewDataset.vue
@@ -145,13 +145,12 @@
         </p>
         <div class="flex justify-end">
           <el-form-item>
-            <button
+            <CsgButton
               :loading="loading"
               class="btn btn-primary btn-md"
-              @click="handleSubmit"
-            >
-              {{ t('datasets.newDataset.createDataset') }}
-            </button>
+              :name="t('datasets.newDataset.createDataset')"
+              @click="createDataset"
+            />
           </el-form-item>
         </div>
       </el-form>
@@ -296,8 +295,7 @@
       body: JSON.stringify(params)
     }
     const newEndpoint = '/datasets'
-    const postres = await useFetchApi(newEndpoint, options).post()
-    const { data, error } = await postres.json()
+    const { data, error } = await useFetchApi(newEndpoint, options).post().json()
 
     if (data.value) {
       ElMessage.success(t('datasets.newDataset.createSuccess'))
diff --git a/frontend/src/components/endpoints/EndpointDetail.vue b/frontend/src/components/endpoints/EndpointDetail.vue
index 54baa044f..24c884702 100644
--- a/frontend/src/components/endpoints/EndpointDetail.vue
+++ b/frontend/src/components/endpoints/EndpointDetail.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full bg-gray-25 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto">
+  <div class="w-full bg-gray-25 border-b border-gray-100 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto">
     <div class="mx-auto page-responsive-width">
       <repo-header
         :private="endpoint.private"
diff --git a/frontend/src/components/endpoints/NewEndpoint.vue b/frontend/src/components/endpoints/NewEndpoint.vue
index 47124f0ad..e43d6f636 100644
--- a/frontend/src/components/endpoints/NewEndpoint.vue
+++ b/frontend/src/components/endpoints/NewEndpoint.vue
@@ -182,12 +182,12 @@
 
         <div class="flex justify-end">
           <el-form-item>
-            <button
+            <CsgButton
               :loading="loading"
               class="btn btn-primary btn-md"
-              @click="handleSubmit">
-              {{ t('endpoints.new.createEndpoint') }}
-            </button>
+              :name="t('endpoints.new.createEndpoint')"
+              @click="handleSubmit"
+            />
           </el-form-item>
         </div>
       </el-form>
diff --git a/frontend/src/components/evaluations/NewEvaluation.vue b/frontend/src/components/evaluations/NewEvaluation.vue
index 271a35959..d5cb87141 100644
--- a/frontend/src/components/evaluations/NewEvaluation.vue
+++ b/frontend/src/components/evaluations/NewEvaluation.vue
@@ -220,13 +220,12 @@
             {{ t('all.cancel') }}
           </a>
           <el-form-item>
-            <button
-              :disabled="submitLoading"
+            <CsgButton
               class="btn btn-primary rounded-md text-sm font-medium flex items-center justify-center px-[14px] h-[42px]"
+              :disabled="submitLoading"
+              :name="t('evaluation.new.createEvaluation')"
               @click="handleSubmit"
-            >
-              {{ t('evaluation.new.createEvaluation') }}
-            </button>
+            />
           </el-form-item>
         </div>
       </el-form>
diff --git a/frontend/src/components/finetune/FinetuneDetail.vue b/frontend/src/components/finetune/FinetuneDetail.vue
index 2225e19a0..7902820fb 100644
--- a/frontend/src/components/finetune/FinetuneDetail.vue
+++ b/frontend/src/components/finetune/FinetuneDetail.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full bg-gray-25 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto">
+  <div class="w-full bg-gray-25 border-b border-gray-100 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto">
     <div class="mx-auto page-responsive-width">
       <repo-header
         :name="finetune.deploy_name"
diff --git a/frontend/src/components/finetune/NewFinetune.vue b/frontend/src/components/finetune/NewFinetune.vue
index c50826b9b..48ad21b8d 100644
--- a/frontend/src/components/finetune/NewFinetune.vue
+++ b/frontend/src/components/finetune/NewFinetune.vue
@@ -143,12 +143,12 @@
 
         <div class="flex justify-end">
           <el-form-item>
-            <button
+            <CsgButton
               :loading="loading"
               class="btn btn-primary btn-md"
-              @click="handleSubmit">
-              {{ t('finetune.new.createFinetune') }}
-            </button>
+              :name="t('finetune.new.createFinetune')"
+              @click="handleSubmit"
+            />
           </el-form-item>
         </div>
       </el-form>
diff --git a/frontend/src/components/models/ModelSettings.vue b/frontend/src/components/models/ModelSettings.vue
index bd2e71387..4f99d22fb 100644
--- a/frontend/src/components/models/ModelSettings.vue
+++ b/frontend/src/components/models/ModelSettings.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="my-8 md:my-0 md:border-none px-8 py-6">
+    class="my-8 md:my-0 md:border-none py-6">
     <!-- 展示英文名 -->
     <div class="flex xl:flex-col gap-8">
       <div class="w-[380px] sm:w-full flex flex-col">
diff --git a/frontend/src/components/models/NewModel.vue b/frontend/src/components/models/NewModel.vue
index 1c745d1c5..1ded835c7 100644
--- a/frontend/src/components/models/NewModel.vue
+++ b/frontend/src/components/models/NewModel.vue
@@ -143,13 +143,12 @@
         </p>
         <div class="flex justify-end">
           <el-form-item>
-            <button
+            <CsgButton
               :loading="loading"
               class="btn btn-primary btn-md"
-              @click="handleSubmit"
-            >
-              {{ t('models.newModel.createModel') }}
-            </button>
+              :name="t('models.newModel.createModel')"
+              @click="createModel"
+            />
           </el-form-item>
         </div>
       </el-form>
diff --git a/frontend/src/components/organizations/NewOrganization.vue b/frontend/src/components/organizations/NewOrganization.vue
index c0badf160..84c29daa6 100644
--- a/frontend/src/components/organizations/NewOrganization.vue
+++ b/frontend/src/components/organizations/NewOrganization.vue
@@ -87,14 +87,12 @@
       </el-form-item>
 
       <el-form-item>
-        <button
-          class="btn btn-primary btn-md"
-          style="width: 100%;"
+        <CsgButton
+          class="btn btn-primary btn-md w-full"
           @click="handleSubmit"
-          :disabled="submitting"
-        >
-          {{ $t('organization.newOrganization.createOrg') }}
-        </button>
+          :loading="submitting"
+          :name="$t('organization.newOrganization.createOrg')"
+        />
       </el-form-item>
     </el-form>
   </div>
diff --git a/frontend/src/components/shared/RepoCards.vue b/frontend/src/components/shared/RepoCards.vue
index 099e5f8ee..5b679fdf5 100644
--- a/frontend/src/components/shared/RepoCards.vue
+++ b/frontend/src/components/shared/RepoCards.vue
@@ -9,8 +9,8 @@
         :frameworkTags="frameworkTags"
         :languageTags="languageTags"
         :licenseTags="licenseTags"
-        :selectedTag="props.selectedTag"
-        :selectedTagType="props.selectedTagType"
+        :selectedTag="selectedTag"
+        :selectedTagType="selectedTagType"
         @resetTags="resetTags"
         :type="repoType"
       />
@@ -134,11 +134,21 @@
   import UpdateUsername from '../popup/UpdateUsername.vue'
 
   const props = defineProps({
-    selectedTag: String,
-    selectedTagType: String,
     repoType: String
   })
 
+  const getQueryParams = () => {
+    const { searchParams } = new URL(window.location.href)
+    return {
+      tag: searchParams.get('tag') ?? '',
+      tagType: searchParams.get('tag_type') ?? ''
+    }
+  }
+
+  const { tag, tagType } = getQueryParams()
+  const selectedTag = ref(tag)
+  const selectedTagType = ref(tagType)
+
   const tagFields = {
     model: [
       'computer_vision',
diff --git a/frontend/src/components/shared/RepoDetail.vue b/frontend/src/components/shared/RepoDetail.vue
index 4102899ad..f4bcb1331 100644
--- a/frontend/src/components/shared/RepoDetail.vue
+++ b/frontend/src/components/shared/RepoDetail.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="repo"
-    class="w-full bg-gray-25 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto border-b border-gray-200"
+    class="w-full bg-gray-25 border-b border-gray-100 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto"
   >
     <div class="mx-auto page-responsive-width">
       <repo-header
diff --git a/frontend/src/components/shared/RepoItem.vue b/frontend/src/components/shared/RepoItem.vue
index fd1ba2d0a..2c04db2dd 100644
--- a/frontend/src/components/shared/RepoItem.vue
+++ b/frontend/src/components/shared/RepoItem.vue
@@ -37,7 +37,7 @@
 
     <div class="flex flex-nowrap overflow-hidden text-ellipsis items-center gap-2 text-xs text-gray-500">
       <span v-if="getComputed.taskTag"
-            class="max-w-[80px] xl:max-w-full overflow-hidden text-ellipsis whitespace-nowrap"
+            class="w-fit xl:max-w-full overflow-hidden text-ellipsis whitespace-nowrap"
       >
             {{ getComputed.taskTag }}
       </span>
diff --git a/frontend/src/components/shared/RepoSummary.vue b/frontend/src/components/shared/RepoSummary.vue
index 958d76ad7..686ccd30a 100644
--- a/frontend/src/components/shared/RepoSummary.vue
+++ b/frontend/src/components/shared/RepoSummary.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex md:px-5 md:flex-col-reverse min-h-[calc(100vh-341px)]">
-    <div class="max-w-[60%] sm:max-w-[100%] pt-4 pb-10 pr-5 sm:pr-0 break-words flex-1 border-t border-gray-200 md:border-t-0">
+    <div class="max-w-[60%] sm:max-w-[100%] py-8 pr-6 sm:pr-0 break-words flex-1 md:border-t-0">
       <el-skeleton v-if="loading" class="mt-4" :rows="5" animated />
       <markdown-viewer
         :content="readmeContent"
@@ -10,7 +10,7 @@
       </markdown-viewer>
     </div>
     <div class="w-[40%] sm:w-[100%] border-l border-gray-200 md:border-l-0 md:border-b md:w-full md:pl-0">
-      <div class="p-[16px]">
+      <div class="pl-6 py-8">
         <div class="text-gray-500 text-base font-medium leading-[22px] md:pl-0">{{ $t('all.downloadCount') }}</div>
         <div class="text-gray-700 text-base font-semibold leading-6 mt-1 md:pl-0">{{ downloadCount }}</div>
       </div>
diff --git a/frontend/src/components/shared/TabContainer.vue b/frontend/src/components/shared/TabContainer.vue
index 6bd4ec07c..88d0d36d1 100644
--- a/frontend/src/components/shared/TabContainer.vue
+++ b/frontend/src/components/shared/TabContainer.vue
@@ -137,12 +137,12 @@
   /* 修改选项卡中的文字大小 */
   .el-tabs__item {
     font-size: 16px;
-    font-weight: 500;
+    font-weight: 400;
   }
 
   .el-tabs__item.is-top {
     color: #667085;
-    font-weight: 500;
+    font-weight: 400;
   }
 
   .el-tabs {
@@ -150,7 +150,7 @@
   }
 
   .el-tabs__nav-wrap:after {
-    height: 1px;
+    height: 0px;
   }
 
   .el-tabs__nav-scroll {
@@ -158,4 +158,8 @@
       padding-left: 20px;
     }
   }
+
+  .el-tabs__content {
+    border: none;
+  }
 </style>
diff --git a/frontend/src/components/tags/TagSidebar.vue b/frontend/src/components/tags/TagSidebar.vue
index 088c75dc1..1b9e80064 100644
--- a/frontend/src/components/tags/TagSidebar.vue
+++ b/frontend/src/components/tags/TagSidebar.vue
@@ -1,34 +1,34 @@
 <template>
   <div class="flex bg-white flex-col pt-[32px] pb-[60px]">
-    <div class="flex">
-      <span v-show="type !== 'code' && type !== 'space'" class="mr-[4px] py-[8px] px-[12px] text-sm text-gray-500 cursor-pointer hover:bg-gray-50"
+    <div class="flex gap-1">
+      <span v-show="type !== 'code' && type !== 'space'" class="mr-1 py-2 px-3 rounded-sm text-sm font-medium text-gray-500 cursor-pointer hover:bg-gray-50"
             data-type="Task"
-            :class="activeNavItem === 'Task' ? 'text-gray-700 active-type font-[600] shadow-outline-gray-400 shadow-outline-4' : ''"
+            :class="activeNavItem === 'Task' ? 'py-2 px-3 text-gray-700 text-sm font-medium bg-gray-50' : ''"
             @click="changeActiveItem"
       >
         {{ $t('all.tasks') }}
       </span>
       <span v-show="type === 'model'"
-            class="mr-[4px] py-[8px] px-[12px] text-sm text-gray-500 cursor-pointer hover:bg-gray-50"
+            class="mr-1 py-2 px-3 rounded-sm text-sm font-medium text-gray-500 cursor-pointer hover:bg-gray-50"
             data-type="Framework"
-            :class="activeNavItem === 'Framework' ? 'text-gray-700 active-type font-[600] shadow-outline-gray-400 shadow-outline-4' : ''"
+            :class="activeNavItem === 'Framework' ? 'py-2 px-3 text-gray-700 text-sm font-medium bg-gray-50' : ''"
             @click="changeActiveItem"
       >
       {{ $t('all.framework') }}
       </span>
 
       <span v-show="type === 'model' || type === 'dataset'"
-            class="mr-[4px] py-[8px] px-[12px] text-sm text-gray-500 cursor-pointer hover:bg-gray-50"
+            class="mr-1 py-2 px-3 rounded-sm text-sm font-medium text-gray-500 cursor-pointer hover:bg-gray-50"
             data-type="Language"
-            :class="activeNavItem === 'Language' ? 'text-gray-700 active-type font-[600] shadow-outline-gray-400 shadow-outline-4' : ''"
+            :class="activeNavItem === 'Language' ? 'py-2 px-3 text-gray-700 text-sm font-medium bg-gray-50' : ''"
             @click="changeActiveItem"
       >
       {{ $t('all.languages') }}
       </span>
 
-      <span class="mr-[4px] py-[8px] px-[12px] text-sm text-gray-500 cursor-pointer hover:bg-gray-50"
+      <span class="mr-1 py-2 px-3 rounded-sm text-sm font-medium text-gray-500 cursor-pointer hover:bg-gray-50"
             data-type="License"
-            :class="activeNavItem === 'License' ? 'text-gray-700 active-type font-[600] shadow-outline-gray-400 shadow-outline-4' : ''"
+            :class="activeNavItem === 'License' ? 'py-2 px-3 text-gray-700 text-sm font-medium bg-gray-50' : ''"
             @click="changeActiveItem"
       >
       License
@@ -95,7 +95,7 @@
       <div v-show="showLanguage">
         <el-input
           v-model="LanguageTagFilterInput"
-          class="mt-[28px] mb-[16px]"
+          class="mt-7 mb-4"
           size="large"
           :placeholder="$t('all.filterTags')"
           :prefix-icon="Search"
@@ -103,7 +103,7 @@
         />
         <div class="flex gap-[8px] flex-wrap">
           <span v-for="languageTag in theLanguageTags"
-                class="text-sm text-gray-700 px-[8px] py-[4px] rounded-xs cursor-pointer flex items-center gap-[4px]"
+                class="text-sm text-gray-700 px-2 py-1 rounded-xs cursor-pointer flex items-center gap-1"
                 :data-tag_name="languageTag.name"
                 :style="setLanguageTagColor(languageTag.name)"
                 @click="setActiveLanguageTag(languageTag.name)"
@@ -117,13 +117,13 @@
       <div v-show="showLicense">
         <el-input
           v-model="licenseTagFilterInput"
-          class="mt-[28px] mb-[16px]"
+          class="mt-7 mb-4"
           size="large"
           :placeholder="$t('all.filterTags')"
           :prefix-icon="Search"
           @input = "filterLicenseTags"
         />
-        <div class="flex gap-[8px] flex-wrap">
+        <div class="flex gap-1 flex-wrap">
           <span v-for="licenseTag in theLicenseTags" class="text-sm text-gray-700 px-[8px] py-[3px] rounded-sm cursor-pointer flex items-center gap-[4px] border border-gray-200"
                 :data-tag_name="licenseTag.name"
                 :style="setLicenseTagColor(licenseTag.name)"
diff --git a/frontend/src/components/user_settings/AccessTokenSettings.vue b/frontend/src/components/user_settings/AccessTokenSettings.vue
index ba387f3d2..23b2aede4 100644
--- a/frontend/src/components/user_settings/AccessTokenSettings.vue
+++ b/frontend/src/components/user_settings/AccessTokenSettings.vue
@@ -34,11 +34,11 @@
           </div>
         </div>
         <div class="my-[16px]">
-          <el-button
+          <button
             type="default"
             @click="confirmRefreshAccessToken"
-            class="h-[30px] mb-[16px]"
-            >{{ $t('accessToken.refresh') }}</el-button
+            class="btn btn-secondary-gray btn-md"
+            >{{ $t('accessToken.refresh') }}</button
           >
         </div>
       </div>
diff --git a/frontend/src/components/user_settings/Profile.vue b/frontend/src/components/user_settings/Profile.vue
index 5d2b08cd1..d43a9db42 100644
--- a/frontend/src/components/user_settings/Profile.vue
+++ b/frontend/src/components/user_settings/Profile.vue
@@ -5,50 +5,50 @@
       <el-avatar :size="160" :src="isCurrentUser ? userStore.avatar : avatar"></el-avatar>
     </div>
     <!-- nickname -->
-    <div class="text-2xl leading-[32px] font-semibold">
+    <div class="text-2xl leading-8 font-semibold">
       {{ isCurrentUser ? userStore.nickname : nickname }}
     </div>
     <!-- name -->
-    <div class="text-md text-gray-500 max-w-[max-content] leading-[24px] mb-[16px]">
+    <div class="text-md text-gray-500 max-w-[max-content] leading-6 mb-4">
       @{{ isCurrentUser ? userStore.username : username }}
     </div>
     <!-- profile settings -->
     <div v-if="isCurrentUser" class="flex xl:flex-col md:flex-row gap-3">
-      <a href="/settings/profile" class="px-[12px] py-[5px] lg:w-[200px] md:w-auto text-center border border-gray-200 rounded-xs text-sm leading-[22px] font-medium hover:bg-gray-200 hover:text-gray-700">
+      <a href="/settings/profile" class="btn btn-secondary-gray btn-md">
         {{ $t('profile.accountSetting')}}
       </a>
     </div>
     <!-- roles -->
-    <div v-if="isCurrentUser ? userStore.roles : userRoles" class="mt-[16px] text-gray-500 text-md leading-[24px] flex items-center gap-[8px]"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2.66663 12.533C2.66663 10.7657 4.09931 9.33301 5.86663 9.33301H10.1333C11.9006 9.33301 13.3333 10.7657 13.3333 12.533V12.533C13.3333 13.7112 12.3782 14.6663 11.2 14.6663H4.79996C3.62175 14.6663 2.66663 13.7112 2.66663 12.533V12.533Z" stroke="#2F384C" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.6666 3.99967C10.6666 5.47243 9.47272 6.66634 7.99996 6.66634C6.5272 6.66634 5.33329 5.47243 5.33329 3.99967C5.33329 2.52692 6.5272 1.33301 7.99996 1.33301C9.47272 1.33301 10.6666 2.52692 10.6666 3.99967Z" stroke="#2F384C" stroke-linecap="round" stroke-linejoin="round"/></svg>
+    <div v-if="isCurrentUser ? userStore.roles : userRoles" class="mt-4 text-gray-500 text-md leading-6 flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2.66663 12.533C2.66663 10.7657 4.09931 9.33301 5.86663 9.33301H10.1333C11.9006 9.33301 13.3333 10.7657 13.3333 12.533V12.533C13.3333 13.7112 12.3782 14.6663 11.2 14.6663H4.79996C3.62175 14.6663 2.66663 13.7112 2.66663 12.533V12.533Z" stroke="#2F384C" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.6666 3.99967C10.6666 5.47243 9.47272 6.66634 7.99996 6.66634C6.5272 6.66634 5.33329 5.47243 5.33329 3.99967C5.33329 2.52692 6.5272 1.33301 7.99996 1.33301C9.47272 1.33301 10.6666 2.52692 10.6666 3.99967Z" stroke="#2F384C" stroke-linecap="round" stroke-linejoin="round"/></svg>
       {{ isCurrentUser ? userStore.roles.join(',') : userRoles.join(', ') }}
     </div>
     <!-- phone -->
     <div v-if="hasPhone"
-         class="mt-[16px] text-gray-500 text-md leading-[24px] flex items-center gap-[8px]">
+         class="mt-[16px] text-gray-500 text-md leading-4 flex items-center gap-2">
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8.00004 3.99967H8.00671M6.66671 12.6663H9.33337M8.33337 3.99967C8.33337 4.18377 8.18414 4.33301 8.00004 4.33301C7.81595 4.33301 7.66671 4.18377 7.66671 3.99967C7.66671 3.81558 7.81595 3.66634 8.00004 3.66634C8.18414 3.66634 8.33337 3.81558 8.33337 3.99967ZM7.60004 14.6663H8.40004C9.89351 14.6663 10.6403 14.6663 11.2107 14.3757C11.7124 14.12 12.1204 13.7121 12.3761 13.2103C12.6667 12.6399 12.6667 11.8931 12.6667 10.3997V5.59967C12.6667 4.1062 12.6667 3.35946 12.3761 2.78903C12.1204 2.28727 11.7124 1.87932 11.2107 1.62366C10.6403 1.33301 9.89351 1.33301 8.40004 1.33301H7.60004C6.10657 1.33301 5.35983 1.33301 4.7894 1.62366C4.28763 1.87932 3.87969 2.28727 3.62402 2.78903C3.33337 3.35946 3.33337 4.1062 3.33337 5.59967V10.3997C3.33337 11.8931 3.33337 12.6399 3.62402 13.2103C3.87969 13.7121 4.28763 14.12 4.7894 14.3757C5.35983 14.6663 6.10657 14.6663 7.60004 14.6663Z" stroke="#2F384C" stroke-linecap="round" stroke-linejoin="round"/></svg>
       {{ isCurrentUser ? userStore.phone : phone }}
     </div>
     <!-- email -->
     <div v-if="hasEmail"
-         class="mt-[16px] text-gray-500 text-md leading-[24px] flex items-center gap-[8px]">
+         class="mt-[16px] text-gray-500 text-md leading-6 flex items-center gap-[8px]">
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M12 5.33333L11.3334 5.77778L10.9584 6.02773C9.88925 6.74053 9.35466 7.09692 8.77684 7.23539C8.2662 7.35776 7.73388 7.35776 7.22325 7.23539C6.64543 7.09692 6.11083 6.74053 5.04164 6.02773L4.66671 5.77778L4.00004 5.33333M6.6667 14H9.33337C11.2002 14 12.1336 14 12.8467 13.6367C13.4739 13.3171 13.9838 12.8072 14.3034 12.18C14.6667 11.4669 14.6667 10.5335 14.6667 8.66667V7.33333C14.6667 5.46649 14.6667 4.53307 14.3034 3.82003C13.9838 3.19282 13.4739 2.68289 12.8467 2.36331C12.1336 2 11.2002 2 9.33338 2H6.66671C4.79987 2 3.86644 2 3.15341 2.36331C2.5262 2.68289 2.01626 3.19282 1.69669 3.82003C1.33337 4.53307 1.33337 5.46649 1.33337 7.33333V8.66667C1.33337 10.5335 1.33337 11.4669 1.69669 12.18C2.01626 12.8072 2.5262 13.3171 3.15341 13.6367C3.86644 14 4.79986 14 6.6667 14Z" stroke="#2F384C" stroke-linecap="round"/></svg>
       <div class="w-[90%] overflow-hidden text-ellipsis">{{ isCurrentUser ? userStore.email : email }}</div>
     </div>
     <!-- last login time -->
     <div v-if="hasLastLoginTime"
-         class="mt-[16px] text-gray-500 text-md leading-[24px] flex items-center gap-[8px]">
+         class="mt-4 text-gray-500 text-md leading-6 flex items-center gap-2">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><g clip-path="url(#clip0_1405_18826)"><path d="M1.33337 7.99967C1.33337 11.3134 4.00004 14.6663 8.00004 14.6663C12 14.6663 14.6667 11.9997 14.6667 7.99967C14.6667 3.99967 12 1.33301 8.00004 1.33301C4.00004 1.33301 1.33337 4.66634 1.33337 4.66634M1.33337 4.66634V1.99967M1.33337 4.66634H3.66671M8.00004 5.33301V7.99967L10 9.33301" stroke="#2F384C" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_1405_18826"><rect width="16" height="16" fill="white"/></clipPath></defs></svg>
       {{ isCurrentUser ? userStore.lastLoginTime : theLastLoginTime }}
     </div>
     <!-- organization -->
-    <div class="my-[16px] mt-[36px]">
-      <div class="text-xl leading-[32px] font-semibold mb-[8px]">
+    <div class="my-4 mt-10">
+      <div class="text-xl leading-8 font-semibold mb-2">
         {{ $t('profile.organization')}}
       </div>
-      <div v-if="hasOrg" class="flex gap-[10px] flex-wrap mt-[16px]">
+      <div v-if="hasOrg" class="flex gap-2 flex-wrap mt-4">
         <p v-for="org in (isCurrentUser ? userStore.orgs : userOrgs)">
           <a :href="`/organizations/${org.path}`">
-            <img :src="org.logo ? org.logo : '/images/default_org.png'" class="rounded-[50%] h-[40px] w-[40px]" />
+            <img :src="org.logo ? org.logo : '/images/default_org.png'" class="rounded-[50%] h-10 w-10" />
           </a>
         </p>
       </div>
diff --git a/frontend/src/components/user_settings/ProfileEdit.vue b/frontend/src/components/user_settings/ProfileEdit.vue
index 77a610c76..60be45af0 100644
--- a/frontend/src/components/user_settings/ProfileEdit.vue
+++ b/frontend/src/components/user_settings/ProfileEdit.vue
@@ -12,7 +12,7 @@
     </div>
     <!-- avatar -->
     <div>
-      <div class="flex items-center gap-[4px] mb-[8px]">用户头像</div>
+      <div class="flex items-center gap-[4px] mb-[8px]">{{ $t('profile.edit.userAvatar') }}</div>
       <el-avatar
         :size="120"
         :src="profileData.avatar">
@@ -25,12 +25,12 @@
           @change="uploadAvatar" />
         <div
           @click="uploadImage"
-          class="text-sm border border-gray-200 px-[20px] py-[9px] leading-[22px] text-center rounded-md text-white cursor-pointer bg-brand-600">
+          class="btn btn-primary btn-sm">
           {{ $t('profile.edit.uploadAvatar') }}
         </div>
         <div
           @click="removeImage"
-          class="text-sm border border-gray-200 px-[20px] py-[9px] leading-[22px] text-center rounded-md text-gray-500 cursor-pointer bg-white">
+          class="btn btn-secondary-gray btn-sm">
           {{ $t('profile.edit.removeAvatar') }}
         </div>
       </div>
@@ -135,7 +135,7 @@
     </div>
     <div
       @click="confirmUpdateProfile"
-      class="w-[111px] text-sm border border-gray-200 px-[16px] py-[5px] leading-[22px] text-center rounded-md text-white cursor-pointer bg-brand-600">
+      class="btn btn-primary btn-md w-fit">
       {{ $t('all.save') }}
     </div>
   </div>
diff --git a/frontend/src/components/user_settings/SshKeySettings.vue b/frontend/src/components/user_settings/SshKeySettings.vue
index 9e583d4db..7836e4363 100644
--- a/frontend/src/components/user_settings/SshKeySettings.vue
+++ b/frontend/src/components/user_settings/SshKeySettings.vue
@@ -11,7 +11,7 @@
       <h3 class="text-gray-700 text-xl font-[600]">SSH Keys</h3>
       <button
         @click="centerDialogVisible = true"
-        class="rounded-xs border bg-white py-[5px] px-[16px] text-gray-500 text-sm font-[500] mt-[32px] w-[160px]"
+        class="btn btn-secondary-gray btn-md w-fit"
       >
         {{ $t('sshKey.addSshKey') }}
       </button>
diff --git a/frontend/src/locales/en_js/profile.js b/frontend/src/locales/en_js/profile.js
index 485118543..5e232e3b6 100644
--- a/frontend/src/locales/en_js/profile.js
+++ b/frontend/src/locales/en_js/profile.js
@@ -15,6 +15,7 @@ export const profile = {
     warningTipDesc: "Are you sure to leave the Settings page unsaved?",
   },
   edit: {
+    userAvatar: "User Avatar",
     uploadAvatar: "Upload Avatar",
     removeAvatar: "Remove Avatar",
     updateSuccess: "Profile updated successfully",
diff --git a/frontend/src/locales/zh_js/profile.js b/frontend/src/locales/zh_js/profile.js
index 0c3d983ea..da34aed34 100644
--- a/frontend/src/locales/zh_js/profile.js
+++ b/frontend/src/locales/zh_js/profile.js
@@ -15,6 +15,7 @@ export const profile = {
     warningTipDesc: "确认在未保存的状态下离开设置页面？",
   },
   edit: {
+    userAvatar: "用户头像",
     uploadAvatar: "上传头像",
     removeAvatar: "移除头像",
     updateSuccess: "profile 已更新",