diff --git a/core/core-frontend/src/components/dashboard/DbCanvasAttr.vue b/core/core-frontend/src/components/dashboard/DbCanvasAttr.vue
index 99eb836e99..426e707421 100644
--- a/core/core-frontend/src/components/dashboard/DbCanvasAttr.vue
+++ b/core/core-frontend/src/components/dashboard/DbCanvasAttr.vue
@@ -146,13 +146,6 @@ const saveSelfSubject = () => {
         >
           <filter-style-simple-selector />
         </el-collapse-item>
-        <el-collapse-item
-          :title="t('visualization.filter_component')"
-          name="filterComponent"
-          class="no-padding no-border-bottom"
-        >
-          <filter-style-simple-selector />
-        </el-collapse-item>
         <el-collapse-item
           title="高级样式设置"
           name="seniorStyleSetting"
diff --git a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ComponentColorSelector.vue b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ComponentColorSelector.vue
index 6a13f9f017..5d57e6451b 100644
--- a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ComponentColorSelector.vue
+++ b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ComponentColorSelector.vue
@@ -158,6 +158,21 @@
                 />
               </el-form-item>
             </el-col>
+            <el-col :span="12">
+              <el-form-item label="分页器配色" class="form-item">
+                <el-color-picker
+                  :trigger-width="colorPickerWidth"
+                  v-model="seniorForm.pagerColor"
+                  size="small"
+                  :predefine="predefineColors"
+                  color-format="rgb"
+                  :effect="themes"
+                  show-alpha
+                  is-custom
+                  @change="changePagerColorChange"
+                />
+              </el-form-item>
+            </el-col>
           </el-row>
         </div>
       </el-collapse-item>
@@ -174,7 +189,10 @@ import eventBus from '@/utils/eventBus'
 import { storeToRefs } from 'pinia'
 import CustomColorStyleSelect from '@/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue'
 import elementResizeDetectorMaker from 'element-resize-detector'
+import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 const { t } = useI18n()
+const snapshotStore = snapshotStoreWithOut()
+
 const props = defineProps({
   themes: {
     type: String as PropType<EditorTheme>,
@@ -191,6 +209,9 @@ const colorFormRef = ref(null)
 const colorForm = computed(
   () => canvasStyleData.value.component.chartColor as DeepPartial<ChartAttr>
 )
+
+const seniorForm = computed(() => canvasStyleData.value.component.seniorStyleSetting)
+
 const predefineColors = COLOR_PANEL
 
 const state = reactive({
@@ -215,6 +236,10 @@ const changeColorOption = (modifyName = 'value') => {
   changeColorCase(modifyName)
 }
 
+const changePagerColorChange = () => {
+  snapshotStore.recordSnapshotCache()
+}
+
 const changeColorCase = modifyName => {
   colorForm.value['modifyName'] = modifyName
   emits('onColorChange', colorForm.value)
diff --git a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/SeniorStyleSetting.vue b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/SeniorStyleSetting.vue
index 58c51044c6..4f65267c48 100644
--- a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/SeniorStyleSetting.vue
+++ b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/SeniorStyleSetting.vue
@@ -5,22 +5,22 @@
         <el-col :span="12">
           <el-form-item class="form-item" label="联动、钻取、调整的图标颜色">
             <el-color-picker
-              v-model="filterStyle.titleColor"
+              v-model="seniorStyleSetting.linkageIconColor"
               :trigger-width="197"
               is-custom
               :predefine="state.predefineColors"
-              @change="themeChange('titleColor')"
+              @change="themeChange"
             />
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item class="form-item" label="钻取层级展示颜色">
             <el-color-picker
-              v-model="filterStyle.labelColor"
+              v-model="seniorStyleSetting.drillLayerColor"
               :trigger-width="197"
               is-custom
               :predefine="state.predefineColors"
-              @change="themeChange('labelColor')"
+              @change="themeChange"
             />
           </el-form-item>
         </el-col>
@@ -35,15 +35,13 @@ import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { useI18n } from '@/hooks/web/useI18n'
 import { cloneDeep } from 'lodash-es'
-import { adaptCurThemeFilterStyleAll } from '@/utils/canvasStyle'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import eventBus from '@/utils/eventBus'
-import { ElIcon } from 'element-plus-secondary'
 const { t } = useI18n()
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
-const filterStyle = computed<any>(() => {
-  return dvMainStore.canvasStyleData.component.filterStyle
+const seniorStyleSetting = computed<any>(() => {
+  return dvMainStore.canvasStyleData.component.seniorStyleSetting
 })
 
 const state = reactive({
@@ -55,14 +53,13 @@ const state = reactive({
 const initForm = () => {
   // do
 }
-const themeChange = styleKey => {
-  dvMainStore.canvasStyleData.component.filterStyle = cloneDeep(filterStyle.value)
-  adaptCurThemeFilterStyleAll(styleKey)
-  snapshotStore.recordSnapshotCache('filterStyleSimpleSelector-themeChange')
+const themeChange = () => {
+  dvMainStore.canvasStyleData.component.seniorStyleSetting = cloneDeep(seniorStyleSetting.value)
+  snapshotStore.recordSnapshotCache('seniorStyleSettingSimpleSelector-themeChange')
 }
 
 const handleHorizontalChange = (type, horizontal = 'titleLayout') => {
-  filterStyle.value[horizontal] = type
+  seniorStyleSetting.value[horizontal] = type
   themeChange(horizontal)
 }
 
diff --git a/core/core-frontend/src/views/chart/components/editor/util/chart.ts b/core/core-frontend/src/views/chart/components/editor/util/chart.ts
index 4650afe6c9..ac8affe189 100644
--- a/core/core-frontend/src/views/chart/components/editor/util/chart.ts
+++ b/core/core-frontend/src/views/chart/components/editor/util/chart.ts
@@ -158,7 +158,8 @@ export const SENIOR_STYLE_SETTING_LIGHT = {
 
 export const SENIOR_STYLE_SETTING_DARK = {
   linkageIconColor: '#ffffff',
-  drillLayerColor: '#ffffff'
+  drillLayerColor: '#ffffff',
+  pagerColor: '#ffffff'
 }
 
 export const FILTER_COMMON_STYLE_BASE = {
diff --git a/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue b/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
index a3513e3f6b..6fc89da2db 100644
--- a/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
+++ b/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
@@ -29,7 +29,8 @@ import { useEmitt } from '@/hooks/web/useEmitt'
 import { trackBarStyleCheck } from '@/utils/canvasUtils'
 
 const dvMainStore = dvMainStoreWithOut()
-const { nowPanelTrackInfo, nowPanelJumpInfo, mobileInPc } = storeToRefs(dvMainStore)
+const { nowPanelTrackInfo, nowPanelJumpInfo, mobileInPc, canvasStyleData } =
+  storeToRefs(dvMainStore)
 const { emitter } = useEmitt()
 
 const props = defineProps({
@@ -420,6 +421,10 @@ const autoHeightStyle = computed(() => {
     height: 20 * scale.value + 8 + 'px'
   }
 })
+
+const tabStyle = computed(() => [
+  { '--de-pager-color': canvasStyleData.value.component.seniorStyleSetting.pagerColor }
+])
 </script>
 
 <template>
@@ -435,7 +440,7 @@ const autoHeightStyle = computed(() => {
       <div style="position: relative; height: 100%" :id="containerId"></div>
     </div>
     <el-row :style="autoStyle" v-if="showPage && !isError">
-      <div class="table-page-info">
+      <div class="table-page-info" :style="tabStyle">
         <div>共{{ state.pageInfo.total }}条</div>
         <el-pagination
           class="table-page-content"
@@ -474,16 +479,16 @@ const autoHeightStyle = computed(() => {
   height: 20px;
   display: flex;
   width: 100%;
-  color: grey;
+  color: var(--de-pager-color);
   :deep(.table-page-content) {
     button,
     button[disabled] {
-      color: grey;
+      color: var(--de-pager-color);
       background: transparent !important;
     }
     ul li {
       &:not(.is-active) {
-        color: grey;
+        color: var(--de-pager-color);
       }
       background: transparent !important;
     }
diff --git a/core/core-frontend/src/views/chart/components/views/components/DrillPath.vue b/core/core-frontend/src/views/chart/components/views/components/DrillPath.vue
index 54d65a2c07..0da1883ee8 100644
--- a/core/core-frontend/src/views/chart/components/views/components/DrillPath.vue
+++ b/core/core-frontend/src/views/chart/components/views/components/DrillPath.vue
@@ -1,8 +1,10 @@
 <script lang="tsx" setup>
-import { reactive, watch } from 'vue'
+import { computed, reactive, watch } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { reverseColor } from '../util/util'
 import { ArrowRight } from '@element-plus/icons-vue'
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+const dvMainStore = dvMainStoreWithOut()
 
 const { t } = useI18n()
 
@@ -24,14 +26,18 @@ const state = reactive({
   textColor: '#bbbfc4'
 })
 
-watch(
-  [() => props.themeStyle?.backgroundColorSelect, () => props.themeStyle?.color],
-  () => {
-    loadThemeStyle()
-  },
-  { deep: true }
+const textColor = computed(
+  () => dvMainStore.canvasStyleData.component.seniorStyleSetting.drillLayerColor
 )
 
+// watch(
+//   [() => props.themeStyle?.backgroundColorSelect, () => props.themeStyle?.color],
+//   () => {
+//     loadThemeStyle()
+//   },
+//   { deep: true }
+// )
+
 const drillJump = index => {
   if (index < props.drillFilters.length) {
     emit('onDrillJump', index)
@@ -67,7 +73,7 @@ const loadThemeStyle = () => {
   <div v-if="props.drillFilters && props.drillFilters.length > 0" class="drill">
     <el-breadcrumb :separator-icon="ArrowRight" class="drill-style">
       <el-breadcrumb-item class="drill-item" @click="drillJump(0)">
-        <span :style="{ color: state.textColor }">{{ t('commons.all') }}</span>
+        <span :style="{ color: textColor }">{{ t('commons.all') }}</span>
       </el-breadcrumb-item>
       <el-breadcrumb-item
         v-for="(filter, index) in props.drillFilters"
@@ -75,7 +81,7 @@ const loadThemeStyle = () => {
         class="drill-item"
         @click="drillJump(index + 1)"
       >
-        <span :style="{ color: state.textColor }">{{ filter.value[0] }}</span>
+        <span :style="{ color: textColor }">{{ filter.value[0] }}</span>
       </el-breadcrumb-item>
     </el-breadcrumb>
   </div>
diff --git a/core/core-frontend/src/views/chart/components/views/index.vue b/core/core-frontend/src/views/chart/components/views/index.vue
index 8ac5ee5e41..2a4f42d3cf 100644
--- a/core/core-frontend/src/views/chart/components/views/index.vue
+++ b/core/core-frontend/src/views/chart/components/views/index.vue
@@ -741,11 +741,11 @@ const titleIconStyle = computed(() => {
     flex-wrap: nowrap;
     gap: 8px;
 
-    //color: #646a73;
-    //
-    //&.icons-container__dark {
-    //  color: #a6a6a6;
-    //}
+    color: #646a73;
+
+    &.icons-container__dark {
+      color: #a6a6a6;
+    }
 
     &.is-editing {
       gap: 6px;