diff --git a/core/core-frontend/src/assets/svg/datasoure_add_dataset.svg b/core/core-frontend/src/assets/svg/datasoure_add_dataset.svg
new file mode 100644
index 0000000..4ddd6c2
--- /dev/null
+++ b/core/core-frontend/src/assets/svg/datasoure_add_dataset.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -1515 -15 )">
+    <path d="M 15.6167664670659 3.17125748502994  C 15.6167664670659 2.9868263473054  15.5149700598802 2.81197604790418  15.3868263473055 2.69820359281437  C 15.3053892215569 2.62634730538923  15.2011976047904 2.59640718562875  15.0946107784432 2.58682634730539  L 7.95568862275445 0.0682634730538894  C 7.86706586826358 0.0419161676646809  7.77485029940112 0.0419161676646809  7.68502994011988 0.0682634730538894  L 0.546107784431115 2.58682634730539  C 0.446706586826394 2.59640718562875  0.349700598802428 2.62754491017964  0.269461077844198 2.69820359281437  C 0.140119760479138 2.81197604790418  0.0479041916166807 2.9868263473054  0.0479041916166807 3.17125748502994  L 0.0479041916166807 12.8826347305389  C 0.0479041916166807 13.1568862275449  0.226347305389254 13.3952095808383  0.459880239520999 13.4622754491018  L 7.6155688622755 15.8946107784431  C 7.63832335329334 15.9041916167665  7.65748502994006 15.911377245509  7.68023952095814 15.9173652694611  L 7.70179640718561 15.9245508982036  C 7.74491017964078 15.9377245508982  7.78802395209573 15.9437125748503  7.83233532934128 15.9437125748503  C 7.87664670658683 15.9437125748503  7.92814371257487 15.9377245508982  7.97125748503004 15.9245508982036  L 8 15.9149700598802  C 8.01197604790423 15.9101796407186  8.02275449101808 15.9065868263473  8.03473053892208 15.9017964071856  L 15.2035928143712 13.4622754491018  C 15.4383233532935 13.3964071856287  15.6167664670659 13.1568862275449  15.6167664670659 12.8838323353293  L 15.6167664670659 3.17125748502994  Z M 2.59281437125742 3.22874251497007  L 7.81916167664667 1.26706586826347  L 13.1413173652695 3.20958083832335  L 7.82994011976052 5.06107784431137  L 4.40000000000009 3.8682634730539  L 2.59281437125742 3.22874251497007  Z M 1.24550898203597 12.4191616766467  L 1.24550898203597 4.00598802395209  L 4.71017964071848 5.22874251497007  L 7.23353293413174 6.15928143712574  L 7.23353293413174 14.5736526946108  L 1.24550898203597 12.4191616766467  Z M 14.4191616766468 12.4191616766467  L 8.43113772455081 14.5736526946108  L 8.43113772455081 6.15928143712574  L 11.4994011976048 5.02754491017964  L 14.4191616766468 3.99640718562875  L 14.4191616766468 12.4191616766467  Z " fill-rule="nonzero" fill="#0089ff" stroke="none" transform="matrix(1 0 0 1 1515 15 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/core/core-frontend/src/assets/svg/datasoure_details.svg b/core/core-frontend/src/assets/svg/datasoure_details.svg
new file mode 100644
index 0000000..e1fd198
--- /dev/null
+++ b/core/core-frontend/src/assets/svg/datasoure_details.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -1551 -15 )">
+    <path d="M 13.303621999378 12.3510573688378  L 15.7277512437811 14.7895211956672  C 15.9862089396765 15.0495491641031  15.9846075715175 15.4698538731598  15.724050995025 15.7277674137439  C 15.4636163569808 15.9858466365605  15.0434248219558 15.9844208674166  14.7847475590795 15.7245802247025  L 12.3637743936567 13.2887594482352  C 11.3052648684957 14.1354396511653  9.98962943951619 14.5957631445844  8.63415699626876 14.5937034104195  C 5.33280450870643 14.5937034104195  2.65657638370658 11.9206624856942  2.65657638370658 8.62355441495647  C 2.65657638370658 5.32644634421879  5.33280450870643 2.65340541949347  8.63415699626876 2.65340541949347  C 11.9349964241294 2.65340541949347  14.6112090018657 5.32644634421879  14.6112090018657 8.62355441495647  C 14.6112090018657 10.0335667846599  14.1219366293533 11.329493349494  13.303621999378 12.3510418215742  Z M 3.98487235696507 14.5936878631559  C 3.98594229111291 14.5936826859246  3.98701223622129 14.5936800972977  3.98808218289491 14.5936800972977  C 4.35444307089961 14.5936800972977  4.65143725130292 14.8906742764543  4.65143725130292 15.2570351629212  C 4.65143725130292 15.6233960493881  4.35444307089961 15.9203902285448  3.98808218289491 15.9203902285448  C 3.98701223622129 15.9203902285448  3.98594229111291 15.9203876399178  3.98487235696507 15.9203824626866  L 3.32100422885583 15.9203824626866  C 1.48804650347302 15.9215591946721  0.00118455799565709 14.4366114579133  0 12.6036537452651  L 0 3.31674495340067  C 0.0011759769956825 1.48378724302026  1.48803095850667 -0.00116745124884687  3.3209886815921 0  L 12.5994087064676 0  C 14.432366429553 -0.00116745124884687  15.919221411064 1.48378724302026  15.9203973880597 3.31674495340067  L 15.9203973880597 3.98010001902423  C 15.9203973880597 4.34689882213084  15.6230482060766 4.64424800286587  15.2562494014303 4.64424800286587  C 14.8894505967842 4.64424800286587  14.5921014148009 4.34689882213084  14.5921014148009 3.98010001902423  L 14.5921014148009 3.31674495340067  C 14.5921014148009 2.21770893500387  13.7000305503732 1.32669528824634  12.5994087064676 1.32669528824634  L 3.3209886815921 1.32669528824634  C 3.32045998128547 1.3266948670874  3.31993128083286 1.3266946565079  3.31940258035843 1.3266946565079  C 2.22015720950481 1.3266946565079  1.32887928854461 2.21749974192947  1.32829597325872 3.31674495340067  L 1.32829597325872 12.6036537452651  C 1.32829597325872 13.702689763662  2.22036683768647 14.5937034104195  3.3209886815921 14.5937034104195  L 3.98487235696507 14.5937034104195  Z M 8.63362838930357 13.2669777319087  C 11.2015853855721 13.2669777319087  13.282913028607 11.1877800571783  13.2829130441542 8.62353886769286  C 13.2829130597015 6.05929767820737  11.2016009328358 3.98010001902423  8.63417254353226 3.98010001902423  C 6.06623109452744 3.98010001902423  3.9848879042288 6.05929769375463  3.9848879042288 8.62355441495647  C 3.9848879042288 11.1878111361583  6.06621556281084 13.2669932636251  8.63364393656707 13.2669932791724  Z M 5.41452092661689 7.80738529524797  C 5.71543701550536 6.62769696484507  6.63735702881127 5.7069997717944  7.81744371890545 5.4076497020869  C 7.87069989897736 5.39415977523581  7.92542535850907 5.38733647370522  7.9803634950249 5.38733647370522  C 8.34680206829375 5.38733647370522  8.64385922504653 5.68439362921119  8.64385922504653 6.0508322009419  C 8.64385922504653 6.35452085753026  8.43767436037069 6.61944468268501  8.14328327114436 6.69401469979691  C 7.43607086645761 6.87401727032977  6.88353593987313 7.42573536440804  6.70248729788568 8.1326806918925  C 6.62229484555041 8.41980394627164  6.36067709764529 8.61836517320089  6.0625653848449 8.61836517320089  C 5.69562061370902 8.61836517320089  5.39815310250651 8.3208976632469  5.39815310250651 7.9539528936514  C 5.39815310250651 7.90464100687025  5.40364285426472 7.85548238165465  5.41452092661689 7.80738529524797  Z M 8.63417254353226 11.9402986796416  C 8.63310260938442 11.9403038568728  8.63203266427649 11.9403064454998  8.63096271760264 11.9403064454998  C 8.26460182959795 11.9403064454998  7.96760764919463 11.6433122663431  7.96760764919463 11.2769513798762  C 7.96760764919463 10.9105904934093  8.26460182959795 10.6135963142526  8.63096271760264 10.6135963142526  C 8.63203266427649 10.6135963142526  8.63310260938442 10.6135989028796  8.63417254353226 10.6136040801108  C 8.63453022407202 10.613604272871  8.63488790465453 10.6136043692511  8.63524558524614 10.6136043692511  C 9.7344908223215 10.6136043692511  10.6257686878084 9.72279949254911  10.6263521921642 8.62355441495647  C 10.6263521921642 8.25675561184987  10.9237013741474 7.95940643111484  11.2905001787935 7.95940643111484  C 11.6572989834397 7.95940643111484  11.9546481654229 8.25675561184987  11.9546481654229 8.62355441495647  C 11.9534721586488 10.4563177285582  10.4669204771712 11.941191957257  8.63415699626876 11.9402986796416  Z " fill-rule="nonzero" fill="#0089ff" stroke="none" transform="matrix(1 0 0 1 1551 15 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/core/core-frontend/src/components/relation-chart/index.vue b/core/core-frontend/src/components/relation-chart/index.vue
index dc9bb2c..3a49a5b 100644
--- a/core/core-frontend/src/components/relation-chart/index.vue
+++ b/core/core-frontend/src/components/relation-chart/index.vue
@@ -116,10 +116,10 @@ defineExpose({
     padding-bottom: 24px;
   }
   .relation-drawer_content {
-    border: 1px solid #dee0e3;
+    border: 1px solid #5f5f5f;
     width: 100%;
     height: 100%;
-    background: #f5f6f7;
+    background: #252626;
     border-radius: 4px;
     position: relative;
   }
diff --git a/core/core-frontend/src/viewsnew/application/service/dataset/form/index.vue b/core/core-frontend/src/viewsnew/application/service/dataset/form/index.vue
index e1e1547..0ac4e4c 100644
--- a/core/core-frontend/src/viewsnew/application/service/dataset/form/index.vue
+++ b/core/core-frontend/src/viewsnew/application/service/dataset/form/index.vue
@@ -3489,7 +3489,9 @@ const getDsIconName = data => {
 .ed-input.is-disabled .ed-input__inner{
   background-color: rgba(37, 38, 38, 0);
 }
-
+.ed-table--enable-row-hover .ed-table__body tr:hover>td.ed-table__cell {
+  background: rgba(21, 21, 21, 1);
+}
 </style>
 
 
@@ -3554,7 +3556,7 @@ border-right: 1px solid rgba(54, 54, 54, 1)
   background: transparent;
 }
 .header-cell{
-  background: rgba(54, 54, 54, 1) !important;
+  background: rgba(54, 54, 54, 1) ;
   border-top: 1px solid rgba(54, 54, 54, 1)
 }
 .ed-table-v2__header-cell{
diff --git a/core/core-frontend/src/viewsnew/application/service/datasource/BaseInfoContent.vue b/core/core-frontend/src/viewsnew/application/service/datasource/BaseInfoContent.vue
index f424e28..ec3d448 100644
--- a/core/core-frontend/src/viewsnew/application/service/datasource/BaseInfoContent.vue
+++ b/core/core-frontend/src/viewsnew/application/service/datasource/BaseInfoContent.vue
@@ -13,19 +13,20 @@ defineExpose({
 
 <template>
   <div :class="[active ? 'active' : 'deactivate', 'base-info-content']">
-    <p class="title" @click="active = !active">
-      <el-icon style="font-size: 10px">
+    <div class="title" @click="active = !active">
+      <!-- <el-icon style="font-size: 10px">
         <Icon name="icon_expand-right_filled"><icon_expandRight_filled class="svg-icon" /></Icon>
-      </el-icon>
+      </el-icon> -->
+      <div class="icon-title"></div>
       <span class="name">{{ name }}</span>
-    </p>
+    </div>
     <slot :active="active"></slot>
   </div>
 </template>
 
 <style lang="less" scoped>
 .base-info-content {
-  padding: 24px;
+  padding: 14px 20px;
   border-radius: 4px;
   // background: #fff;
   margin: 24px 24px 0 24px;
@@ -83,4 +84,10 @@ defineExpose({
     }
   }
 }
+.icon-title{
+  width: 6px;
+  height: 16px;
+  background: inherit;
+  background-color: rgba(0, 137, 255, 1);
+}
 </style>
diff --git a/core/core-frontend/src/viewsnew/application/service/datasource/BaseInfoItem.vue b/core/core-frontend/src/viewsnew/application/service/datasource/BaseInfoItem.vue
index 777620d..d013785 100644
--- a/core/core-frontend/src/viewsnew/application/service/datasource/BaseInfoItem.vue
+++ b/core/core-frontend/src/viewsnew/application/service/datasource/BaseInfoItem.vue
@@ -7,27 +7,30 @@ defineProps({
 
 <template>
   <div class="base-info-item">
-    <p class="label">{{ label }}</p>
-    <p class="value">
+    <div class="label">{{ label }}</div>
+    <div class="value">
       <slot></slot>
-    </p>
+    </div>
   </div>
 </template>
 
 <style lang="less">
 .base-info-item {
-  margin-top: 16px;
+  margin-top: 30px;
   font-family: var(--de-custom_font, 'PingFang');
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
-  line-height: 22px;
+  // line-height: 22px;
   width: 100%;
+  display: flex;
+  align-items: center;
   .label {
     color: #B8BCBF;
+    width: 200px;
   }
   .value {
-    margin-top: 4px;
+    // margin-top: 4px;
     color: #F2F4F5;
     white-space: pre-wrap;
   }
diff --git a/core/core-frontend/src/viewsnew/application/service/datasource/form/ApiAuthConfig.vue b/core/core-frontend/src/viewsnew/application/service/datasource/form/ApiAuthConfig.vue
index 7d7dd79..d56a141 100644
--- a/core/core-frontend/src/viewsnew/application/service/datasource/form/ApiAuthConfig.vue
+++ b/core/core-frontend/src/viewsnew/application/service/datasource/form/ApiAuthConfig.vue
@@ -31,7 +31,7 @@ const change = () => {
   <el-form label-position="top">
     <el-form-item class="api-auth-config" :label="t('datasource.verification_method')">
       <el-select
-        style="width: 100%"
+        style="width: 100%;margin: 0px 1px;"
         v-model="request.authManager.verification"
         @change="change"
         :placeholder="t('datasource.verification_method')"
@@ -45,7 +45,7 @@ const change = () => {
           v-if="request.authManager.verification === 'Basic Auth'"
           :label="t('datasource.username')"
         >
-          <el-input
+          <el-input style="margin-left: 1px;"
             v-model="request.authManager.username"
             :placeholder="t('datasource.username')"
             class="ms-http-input"
@@ -57,7 +57,7 @@ const change = () => {
           v-if="request.authManager.verification === 'Basic Auth'"
           :label="t('datasource.password')"
         >
-          <el-input
+          <el-input style="margin-right: 1px;"
             v-model="request.authManager.password"
             type="password"
             :placeholder="t('datasource.password')"
diff --git a/core/core-frontend/src/viewsnew/application/service/datasource/form/ApiHttpRequestDraw.vue b/core/core-frontend/src/viewsnew/application/service/datasource/form/ApiHttpRequestDraw.vue
index fc271e6..34c54ef 100644
--- a/core/core-frontend/src/viewsnew/application/service/datasource/form/ApiHttpRequestDraw.vue
+++ b/core/core-frontend/src/viewsnew/application/service/datasource/form/ApiHttpRequestDraw.vue
@@ -1067,7 +1067,7 @@ defineExpose({
       }
       .title {
         margin-left: 8px;
-        color: #1f2329;
+        color: #fff;
         font-size: 14px;
         font-weight: 400;
         line-height: 22px;
@@ -1099,8 +1099,9 @@ defineExpose({
 
   .input-with-select {
     .ed-input-group__prepend {
-      background-color: #fff;
+      // background-color: #252626;
       padding: 0 20px;
+      // box-shadow: 0 0 0 1px #252626;
       .ed-select {
         width: 84px !important;
       }
@@ -1152,4 +1153,11 @@ defineExpose({
     }
   }
 }
+.ed-input-group--prepend .ed-input-group__prepend .ed-select .ed-input .ed-input__wrapper{
+  box-shadow: 0 0 0 1px #636363;
+}
+.ed-table th.ed-table__cell {
+  background-color: #5f5f5f;
+  color: #fff;
+}
 </style>
diff --git a/core/core-frontend/src/viewsnew/application/service/datasource/form/ApiHttpRequestForm.vue b/core/core-frontend/src/viewsnew/application/service/datasource/form/ApiHttpRequestForm.vue
index befa496..31772d8 100644
--- a/core/core-frontend/src/viewsnew/application/service/datasource/form/ApiHttpRequestForm.vue
+++ b/core/core-frontend/src/viewsnew/application/service/datasource/form/ApiHttpRequestForm.vue
@@ -208,7 +208,7 @@ const emits = defineEmits(['changeId'])
 
 <style lang="less" scoped>
 .request-content {
-  border: 1px #dcdfe6 solid;
+  border: 1px #5f5f5f solid;
   height: 100%;
   border-radius: 4px;
   width: 100%;
@@ -246,4 +246,12 @@ const emits = defineEmits(['changeId'])
     margin-right: 45px;
   }
 }
+:deep(.ed-tabs__nav-wrap::after){
+  background: #5f5f5f !important;
+}
+</style>
+<style>
+.ed-drawer__close-btn:hover{
+  background: #5f5f5f;
+}
 </style>
diff --git a/core/core-frontend/src/viewsnew/application/service/datasource/form/ApiKeyValue.vue b/core/core-frontend/src/viewsnew/application/service/datasource/form/ApiKeyValue.vue
index 61473c1..e207c81 100644
--- a/core/core-frontend/src/viewsnew/application/service/datasource/form/ApiKeyValue.vue
+++ b/core/core-frontend/src/viewsnew/application/service/datasource/form/ApiKeyValue.vue
@@ -121,7 +121,7 @@ const timeFunLists = [
       <template #item="{ element, index }">
         <div style="margin-bottom: 16px">
           <el-row :gutter="8">
-            <el-icon class="drag handle">
+            <el-icon class="drag handle" style="color: #fff;">
               <Icon name="icon_drag_outlined"><icon_drag_outlined class="svg-icon" /></Icon>
             </el-icon>
             <el-col :span="activeName === 'params' ? 8 : 6" v-if="!unShowSelect">
@@ -285,4 +285,86 @@ const timeFunLists = [
     margin-bottom: 0 !important;
   }
 }
+:deep(.ed-input .ed-input__count .ed-input__count-inner){
+  background: transparent;
+}
+
+:deep(.ed-select__popper.ed-popper) {
+  background: rgb(61, 61, 61) !important;
+  border: 1px solid var(--ed-border-color-light);
+  box-shadow: var(--ed-box-shadow-light);
+}
+</style>
+<style>
+.ed-select__popper.ed-popper{
+  background: rgb(41, 41, 41) !important;
+  border: 1px solid #5f5f5f;
+  color: #fff;
+  box-shadow: var(--ed-box-shadow-light);
+}
+.ed-select-dropdown__item{
+  color: #fff;
+}
+.ed-dropdown-menu__item{
+  color: #fff;
+}
+.ed-select-dropdown__item.hover, .ed-select-dropdown__item:hover{
+  background: rgb(61, 61, 61);
+}
+.ed-input-group__append, .ed-input-group__prepend{
+  background-color:rgba(37, 38, 38, 1);
+}
+.ed-input-group__append{
+  box-shadow: 0 0 0 1px #636363;
+}
+.ed-input-group__append .ed-button{
+  background-color: rgba(37, 38, 38, 1) !important;
+  border: 1px solid rgba(37, 38, 38, 1) !important;
+}
+.api-datasource-drawer .input-with-select .ed-input-group__append{
+  background-color: rgba(37, 38, 38, 1) !important;
+}
+.api-datasource-drawer .table-container{
+  border: 1px solid #5f5f5f !important; 
+}
+.ed-autocomplete__popper.ed-popper{
+  background: rgb(41, 41, 41);
+  border: 1px solid #5f5f5f;
+  box-shadow: none;
+}
+.ed-autocomplete-suggestion li{
+  color: #fff;
+}
+.ed-scrollbar__thumb{
+  background-color: rgba(30,30,30, 1) !important;
+}
+.ed-autocomplete-suggestion li:hover{
+  background: rgb(61, 61, 61);
+}
+.ed-popper.is-light .ed-popper__arrow::before {
+  border: 1px solid #5f5f5f;
+  background: rgb(41, 41, 41);
+  right: 0;
+}
+.ace-chrome .ace_gutter-active-line {
+  background-color: #595959;
+}
+.ace-chrome .ace_gutter {
+  background: #717171;
+  color: #fff;
+  overflow: hidden;
+}
+.ace-chrome {
+  background-color: #2e2e2e;
+  color: #fff;
+}
+.ace-chrome .ace_marker-layer .ace_active-line {
+  background: #717171;
+}
+.api-body-code {
+  border: 1px solid #5f5f5f !important;
+}
+.el-loading-mask{
+  background-color: rgba(41, 41, 41, 1) !important;
+}
 </style>
diff --git a/core/core-frontend/src/viewsnew/application/service/datasource/form/ApiVariable.vue b/core/core-frontend/src/viewsnew/application/service/datasource/form/ApiVariable.vue
index 23ec05d..bf1ecb3 100644
--- a/core/core-frontend/src/viewsnew/application/service/datasource/form/ApiVariable.vue
+++ b/core/core-frontend/src/viewsnew/application/service/datasource/form/ApiVariable.vue
@@ -161,7 +161,7 @@ const timeFunLists = [
       <template #item="{ element, index }">
         <div :key="index" style="margin-bottom: 16px">
           <el-row :gutter="8">
-            <el-icon class="drag handle">
+            <el-icon class="drag handle" style="color: #fff;">
               <Icon name="icon_drag_outlined"><icon_drag_outlined class="svg-icon" /></Icon>
             </el-icon>
             <el-col :span="6">
@@ -342,4 +342,7 @@ const timeFunLists = [
     font-size: 13px;
   }
 }
+:deep(.ed-input .ed-input__count .ed-input__count-inner){
+  background: transparent;
+}
 </style>
diff --git a/core/core-frontend/src/viewsnew/application/service/datasource/form/CreatDsGroup.vue b/core/core-frontend/src/viewsnew/application/service/datasource/form/CreatDsGroup.vue
index cca24f2..7823e15 100644
--- a/core/core-frontend/src/viewsnew/application/service/datasource/form/CreatDsGroup.vue
+++ b/core/core-frontend/src/viewsnew/application/service/datasource/form/CreatDsGroup.vue
@@ -441,7 +441,7 @@ const emits = defineEmits(['finish', 'handleShowFinishPage'])
 .tree-content {
   width: 552px;
   height: 380px;
-  border: 1px solid #dee0e3;
+  border: 1px solid #5f5f5f;
   border-radius: 4px;
   padding: 8px;
   overflow-y: auto;
@@ -491,4 +491,25 @@ const emits = defineEmits(['finish', 'handleShowFinishPage'])
     }
   }
 }
+.ed-button.is-secondary{
+  color: #F2F4F5 !important;
+  background-color: #212121 !important;
+  border: 1px solid #434343 !important;
+}
+.ed-button--primary{
+  background: #0089ff;
+  border-color: #0089ff;
+}
+.ed-select-v2__wrapper{
+  background-color: rgba(37, 38, 38, 1) !important;
+  border-color: rgba(51, 51, 51, 0) !important;
+  box-shadow: 0 0 0 1px #636363 !important;
+  color: #fff !important;
+}
+.ed-select-v2__popper.ed-popper {
+  background: rgba(37, 38, 38, 1) !important;
+  border: 1px solid rgba(51, 51, 51, 0) !important;
+  box-shadow: 0 0 0 1px #636363 !important;
+  color: #fff !important;
+}
 </style>
diff --git a/core/core-frontend/src/viewsnew/application/service/datasource/form/EditorDetail.vue b/core/core-frontend/src/viewsnew/application/service/datasource/form/EditorDetail.vue
index 7addc10..285e548 100644
--- a/core/core-frontend/src/viewsnew/application/service/datasource/form/EditorDetail.vue
+++ b/core/core-frontend/src/viewsnew/application/service/datasource/form/EditorDetail.vue
@@ -1652,7 +1652,7 @@ defineExpose({
     .left-api_params {
       border-top-left-radius: 4px;
       border-bottom-left-radius: 4px;
-      border: 1px solid #bbbfc4;
+      border: 1px solid #5f5f5f;
       width: 300px;
       padding: 16px;
       .name-copy {
@@ -1675,7 +1675,7 @@ defineExpose({
     .right-api_params {
       border-top-right-radius: 4px;
       border-bottom-right-radius: 4px;
-      border: 1px solid #bbbfc4;
+      border: 1px solid #5f5f5f;
       border-left: none;
       width: calc(100% - 200px);
     }
diff --git a/core/core-frontend/src/viewsnew/application/service/datasource/form/Pagination.vue b/core/core-frontend/src/viewsnew/application/service/datasource/form/Pagination.vue
index e02b84e..4d43981 100644
--- a/core/core-frontend/src/viewsnew/application/service/datasource/form/Pagination.vue
+++ b/core/core-frontend/src/viewsnew/application/service/datasource/form/Pagination.vue
@@ -128,7 +128,7 @@ const handleNumberSizeChange = () => {
     <el-select
       v-model="page.pageType"
       @change="handleNumberSizeChange"
-      style="width: 100%; margin-top: 8px"
+      style="width: calc(100% - 2px); margin-top: 8px;margin-left: 1px;"
     >
       <el-option
         v-for="item in options"
@@ -171,9 +171,10 @@ const handleNumberSizeChange = () => {
           <template #default="scope">
             <el-input
               v-model="scope.row.resolutionPath"
-              style="width: 100%"
+              style="width: 100%;"
               :placeholder="t('api_pagination.please_enter_jsonpath')"
-              ><template #prepend>
+              >
+              <template #prepend>
                 <el-select
                   class="bg-white"
                   v-model="scope.row.resolutionPathType"
@@ -185,7 +186,8 @@ const handleNumberSizeChange = () => {
                     :label="item.label"
                     :value="item.value"
                   />
-                </el-select> </template
+                </el-select>
+                </template
             ></el-input>
           </template>
         </el-table-column>
@@ -196,10 +198,12 @@ const handleNumberSizeChange = () => {
 
 <style lang="less" scoped>
 .api-pagination {
+  margin-bottom: 16px;
   .type {
     font-size: 14px;
     font-weight: 400;
     line-height: 22px;
+    color: #fff;
   }
 
   .table-title {
@@ -210,7 +214,7 @@ const handleNumberSizeChange = () => {
     align-items: center;
 
     &.request {
-      background: #ebf1ff;
+      background: #fff;
       margin-top: 16px;
       border-top: 1px solid #dddedf;
     }
@@ -221,9 +225,15 @@ const handleNumberSizeChange = () => {
   }
 
   .bg-white {
+    margin-left: -8px;
+    margin-right: 0px;
     :deep(.ed-input__wrapper) {
-      background: white;
+      background: transparent;
     }
   }
 }
+:deep(.ed-table .ed-input__wrapper){
+  margin: 1px 0px;
+}
+
 </style>
diff --git a/core/core-frontend/src/viewsnew/application/service/datasource/index.vue b/core/core-frontend/src/viewsnew/application/service/datasource/index.vue
index 9439fbf..8970c22 100644
--- a/core/core-frontend/src/viewsnew/application/service/datasource/index.vue
+++ b/core/core-frontend/src/viewsnew/application/service/datasource/index.vue
@@ -7,6 +7,8 @@ import icon_copy_filled from '@/assets/svg/icon_copy_filled.svg'
 import icon_dataset from '@/assets/svg/icon_dataset.svg'
 import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
 import icon_intoItem_outlined from '@/assets/svg/icon_into-item_outlined.svg'
+import icon_datasoure_details from '@/assets/svg/datasoure_details.svg'
+import icon_datasoure_add_dataset from '@/assets/svg/datasoure_add_dataset.svg'
 import { debounce } from 'lodash-es'
 import icon_rename_outlined from '@/assets/svg/icon_rename_outlined.svg'
 import icon_warning_colorful_red from '@/assets/svg/icon_warning_colorful_red.svg'
@@ -1354,7 +1356,7 @@ const getMenuList = (val: boolean) => {
                 <template #default="scope">
                   <div class="flex-align-center">
                     <template v-if="scope.row.status === 'Completed'">
-                      <el-icon style="margin-right: 8px">
+                      <el-icon style="margin-right: 8px;">
                         <icon name="icon_succeed_filled"
                           ><icon_succeed_filled class="svg-icon"
                         /></icon>
@@ -1402,8 +1404,8 @@ const getMenuList = (val: boolean) => {
                       v-permission="['dataset']"
                     >
                       <template #icon>
-                        <Icon name="icon_dataset_outlined"
-                          ><icon_dataset_outlined class="svg-icon"
+                        <Icon name="icon_datasoure_add_dataset"
+                          ><icon_datasoure_add_dataset  style="font-size: 16px;" class="svg-icon"
                         /></Icon>
                       </template>
                     </el-button>
@@ -1411,8 +1413,8 @@ const getMenuList = (val: boolean) => {
                   <el-tooltip effect="dark" :content="t('visualization.details')" placement="top">
                     <el-button @click.stop="selectDataset(scope.row)" text>
                       <template #icon>
-                        <Icon name="icon_describe_outlined"
-                          ><icon_describe_outlined class="svg-icon"
+                        <Icon name="icon_datasoure_details"
+                          ><icon_datasoure_details class="svg-icon"
                         /></Icon>
                       </template>
                     </el-button>
@@ -1762,7 +1764,6 @@ const getMenuList = (val: boolean) => {
           v-loading="dsTableDataLoading"
           header-cell-class-name="header-cell"
           :data="state.dsTableData"
-          stripe
           style="width: 100%"
         >
           <el-table-column prop="originName" :label="t('datasource.column_name')" />
@@ -2219,7 +2220,7 @@ const getMenuList = (val: boolean) => {
     }
 
     .datasource-table {
-      padding: 24px;
+      padding: 14px 20px;
       margin: 24px;
       // background: #fff;
       height: calc(100vh - 200px);
@@ -2411,7 +2412,7 @@ border-right: 1px solid rgba(54, 54, 54, 1)
   background: transparent;
 }
 .header-cell{
-  background: rgba(54, 54, 54, 1) !important;
+  background: rgba(54, 54, 54, 1) ;
   border-top: 1px solid rgba(54, 54, 54, 1)
 }
 .ed-table-v2__header-cell{
@@ -2441,4 +2442,89 @@ border-right: 1px solid rgba(54, 54, 54, 1)
 .ed-table--enable-row-hover .ed-table__body tr:hover>td.ed-table__cell{
   background: rgba(38, 38, 38, 1);
 }
+.ed-dropdown-menu__item--divided {
+  border-top: 1px solid #5f5f5f !important;
+}
+.icon-more:before {
+    content: "";
+}
+.ed-tree-node__content.is-menu:hover {
+  background: rgb(41, 41, 41);
+}
+.ed-dropdown-menu{
+  background-color: rgb(41, 41, 41);
+}
+.ed-dropdown-menu__item{
+  color: #fff;
+}
+.ed-dropdown-menu__item--divided{
+  border-top: 1px solid #5f5f5f;
+}
+.ed-dropdown-menu__item:not(.is-disabled):hover{
+  background-color: rgb(61, 61, 61);
+}
+.ed-dropdown__popper.ed-popper{
+  border: 1px solid #5f5f5f;
+  background:transparent;
+}
+.ds-table-drawer .table-name {
+  color: #B8BCBF;
+}
+.ed-dialog__header{
+  padding-right: 0px;
+  padding: 13px 20px;
+  border-bottom: 1px solid #333333;
+}
+.ed-dialog__headerbtn{
+  color: #ffffff;
+}
+.ed-dialog__title{
+  color: #ffffff;
+}
+.ed-dialog__headerbtn{
+  top: 13px !important;
+}
+.ed-dialog {
+  border: 1px solid #5f5f5f;
+  border-radius: 4px;
+}
+.header-cell{
+  background-color: rgb(40, 40, 40) !important;
+}
+.ed-table .ed-table__cell{
+  border-left: 1px solid #363636;
+}
+.ed-table__row .ed-table__cell:last-child{
+  border-right: 1px solid #363636 !important;
+}
+.ed-pagination button{
+  background: #252626 !important;
+  border: 1px solid #636363 !important;
+  color:#fff !important;
+}
+.ed-pagination .ed-pager li{
+  background: #252626 !important;
+  border: 1px solid #636363 !important;
+  color:#fff !important;
+}
+.ed-pagination__jump{
+  color:#fff !important;
+}
+.ed-pagination .btn-next:hover, .ed-pagination .btn-prev:hover{
+  background: #252626 !important;
+  border: 1px solid #0089ff !important;
+  color:#0089ff !important;
+}
+.ed-pagination button.is-disabled, .ed-pagination button:disabled {
+  color: #bbbfc4 !important;
+  background-color: #252626 !important;
+}
+.ed-pagination .btn-next[aria-disabled=true]:active, .ed-pagination .btn-next[aria-disabled=true]:hover, .ed-pagination .btn-prev[aria-disabled=true]:active, .ed-pagination .btn-prev[aria-disabled=true]:hover{
+  color: #bbbfc4 !important;
+  background-color: #252626 !important;
+  border-color: #636363 !important;
+}
+.ed-button.is-text{
+  color:#0089ff !important;
+}
 </style>
\ No newline at end of file