diff --git a/src/assets/images/components/page-settings/theme-3.png b/src/assets/images/components/page-settings/theme-3.png
index d503b7eb..1834c60a 100644
Binary files a/src/assets/images/components/page-settings/theme-3.png and b/src/assets/images/components/page-settings/theme-3.png differ
diff --git a/src/assets/images/components/page-settings/theme-5.png b/src/assets/images/components/page-settings/theme-5.png
index a88397c3..77cf6a4a 100644
Binary files a/src/assets/images/components/page-settings/theme-5.png and b/src/assets/images/components/page-settings/theme-5.png differ
diff --git a/src/components/model-custom/model-custom-content.vue b/src/components/model-custom/model-custom-content.vue
index 7013f9d0..9f4a7d25 100644
--- a/src/components/model-custom/model-custom-content.vue
+++ b/src/components/model-custom/model-custom-content.vue
@@ -166,7 +166,6 @@ const changeDataSource = (key: string) => {
 const url_value_dialog_call_back = (item: any[]) => {
     if (item.length > 0) {
         form.data_source_content = item[0];
-        form.data_source_content_value = item[0].id;
     } else {
         form.data_source_content = {};
     }
diff --git a/src/components/page-settings/index.vue b/src/components/page-settings/index.vue
index 59f8e1b3..abb341b2 100644
--- a/src/components/page-settings/index.vue
+++ b/src/components/page-settings/index.vue
@@ -5,27 +5,35 @@
                 <img class="img" :style="`Filter: brightness(${new_style.function_buttons_type == 'black' ? 0 : 100})`" src="@/assets/images/layout/main/main-top.png" />
             </div>
             <div class="model-head tc re mlr-12 mt-6">
-                <div v-if="['1', '2', '3'].includes(form.theme)" class="flex align-c jc-c h gap-16" :style="[{ 'justify-content': form?.indicator_location || 'center' }, text_style]">
-                    <template v-if="['2', '3'].includes(form.theme)">
-                        <div class="logo-outer-style"><image-empty v-model="form.logo[0]" class="logo-style" error-img-style="width:2rem;height:2rem;"></image-empty></div>
-                    </template>
-                    <div v-if="['1', '2'].includes(form.theme)">{{ form.title }}</div>
-                    <template v-if="['3', '5'].includes(form.theme)">
-                        <div class="flex-1">
-                            <model-search :value="pageData.com_data" :is-page-settings="true"></model-search>
-                        </div>
-                    </template>
-                </div>
-                <div v-else-if="['4', '5'].includes(form.theme)" class="flex align-c h gap-10">
-                    <div class="flex-row gap-2">
-                        <icon name="position" size="12" color="0"></icon><span class="size-14 cr-3 text-line-1">{{ form.positioning_name }}</span
-                        ><icon v-if="form.is_arrows_show == '1'" name="arrow-right" size="12" color="0"></icon>
+                <div class="flex-row align-c jc-sb gap-16">
+                    <div v-if="['1', '2', '3'].includes(form.theme)" class="flex-1 flex-row align-c jc-c h gap-16" :style="[{ 'justify-content': form?.indicator_location || 'center' }, text_style]">
+                        <template v-if="['2', '3'].includes(form.theme)">
+                            <div class="logo-outer-style"><image-empty v-model="form.logo[0]" class="logo-style" error-img-style="width:2rem;height:2rem;"></image-empty></div>
+                        </template>
+                        <div v-if="['1', '2'].includes(form.theme)">{{ form.title }}</div>
+                        <template v-if="['3', '5'].includes(form.theme)">
+                            <div class="flex-1">
+                                <model-search :value="pageData.com_data" :is-page-settings="true"></model-search>
+                            </div>
+                        </template>
                     </div>
-                    <template v-if="['5'].includes(form.theme)">
-                        <div class="flex-1">
-                            <model-search :value="pageData.com_data" :is-page-settings="true"></model-search>
+                    <div v-else-if="['4', '5'].includes(form.theme)" class="flex-1 flex-row align-c h gap-10">
+                        <div class="flex-row gap-2">
+                            <icon name="position" size="12" color="0"></icon><span class="size-14 cr-3 text-line-1">{{ form.positioning_name }}</span
+                            ><icon v-if="form.is_arrows_show == '1'" name="arrow-right" size="12" color="0"></icon>
                         </div>
-                    </template>
+                        <template v-if="['5'].includes(form.theme)">
+                            <div class="flex-1">
+                                <model-search :value="pageData.com_data" :is-page-settings="true"></model-search>
+                            </div>
+                        </template>
+                    </div>
+                    <div v-if="!isEmpty(form.icon_setting)" class="flex-row align-c" :class="'gap-' + new_style.img_space">
+                        <div v-for="(item, index) in form.icon_setting" :key="index" :style="{ width: new_style.img_size + 'px', height: new_style.img_size + 'px' }">
+                            <image-empty v-if="item.img.length > 0" v-model="item.img[0]" :error-img-style="'width: ' + Number(new_style.img_size) / 2 + 'px;height:' + Number(new_style.img_size) / 2 + 'px;'"></image-empty>
+                            <icon v-else :name="item.icon" :size="new_style.img_size + ''" color="6"></icon>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -33,6 +41,8 @@
 </template>
 <script setup lang="ts">
 import { background_computer, gradient_computer } from '@/utils';
+import { isEmpty } from 'lodash';
+
 interface Props {
     pageData: any;
     showPage: boolean;
diff --git a/src/components/page-settings/page-content.vue b/src/components/page-settings/page-content.vue
index 4294f874..42ff1a65 100644
--- a/src/components/page-settings/page-content.vue
+++ b/src/components/page-settings/page-content.vue
@@ -54,6 +54,20 @@
                 <model-search-content :value="form"></model-search-content>
                 <div class="bg-f5 divider-line" />
             </template>
+            <card-container>
+                <div class="mb-12">图标设置</div>
+                <div class="size-12 cr-c mb-20">图片建议宽高80*80；鼠标拖拽左侧圆点可调整导航顺序</div>
+                <div class="nav-list">
+                    <drag :data="form.icon_setting" :space-col="20" @remove="icon_setting_remove" @on-sort="icon_setting_sort">
+                        <template #default="{ row }">
+                            <upload v-model="row.img" v-model:icon-value="row.icon" is-icon type="img" :limit="1" :styles="2" :size="30"></upload>
+                            <url-value v-model="row.link"></url-value>
+                        </template>
+                    </drag>
+                    <el-button class="mtb-20 w" @click="add">+添加</el-button>
+                </div>
+            </card-container>
+            <div class="bg-f5 divider-line" />
             <card-container>
                 <el-form-item label="底部导航">
                     <el-switch v-model="form.bottom_navigation_show" active-value="1" inactive-value="0"></el-switch>
@@ -63,13 +77,19 @@
     </div>
 </template>
 <script setup lang="ts">
+import { get_math } from '@/utils';
 const props = defineProps({
     value: {
         type: Object,
         default: () => ({}),
     },
 });
-const form = reactive(props.value);
+const form = ref(props.value);
+
+watchEffect(() => {
+    form.value = props.value;
+});
+
 const base_list = reactive({
     themeList: [
         { id: '1', name: '风格1', url: new URL(`../../assets/images/components/page-settings/theme-1.png`, import.meta.url).href },
@@ -80,6 +100,20 @@ const base_list = reactive({
     ]
 });
 
+const icon_setting_remove = (index: number) => {
+    form.value.icon_setting.splice(index, 1);
+};
+const icon_setting_sort = (item: any) => {
+    form.value.icon_setting = item;
+};
+const add = () => {
+    form.value.icon_setting.push({
+        id: get_math(),
+        img: [],
+        icon: '',
+        link: {},
+    });
+};
 const emit = defineEmits(['update:change-theme']);
 const themeChange = (val: string) => {
     emit('update:change-theme', val);
diff --git a/src/components/page-settings/page-setting.vue b/src/components/page-settings/page-setting.vue
index 4dcb7dcf..ea4ced02 100644
--- a/src/components/page-settings/page-setting.vue
+++ b/src/components/page-settings/page-setting.vue
@@ -8,6 +8,7 @@
 </template>
 <script setup lang="ts">
 import { cloneDeep } from 'lodash';
+import { get_math } from '@/utils';
 const props = defineProps({
     type: {
         type: String,
@@ -19,40 +20,50 @@ const props = defineProps({
     },
 });
 const default_data = {
-    header_background_type: 'color_image',
-    header_background_color_list: [{ color: '#fff', color_percentage: undefined }],
-    header_background_direction: '180deg',
-    header_background_img_style: 2,
-    header_background_img: [],
-    header_background_title_color: '#333',
-    header_background_title_typeface: '500',
-    header_background_title_size: 16,
-    function_buttons_type: 'black',
-    immersive_style: '0',
-    up_slide_display: '1',
-    icon_color: '#ccc',
-    button_inner_color: '#fff',
-    search_botton_color_list: [{ color: '#FF973D', color_percentage: undefined }, { color: '#FF3131', color_percentage: undefined }],
-    search_botton_direction: '90deg',
-    search_botton_background_img_style: '',
-    search_botton_background_img: [],
-    search_button_radius: {
-        radius: 16,
-        radius_top_left: 16,
-        radius_top_right: 16,
-        radius_bottom_left: 16,
-        radius_bottom_right: 16,
-    },
-    tips_color: '#ccc',
-    hot_words_color: '#000',
-    search_border: '#E4E4E4',
-    search_border_radius: {
-        radius: 16,
-        radius_top_left: 16,
-        radius_top_right: 16,
-        radius_bottom_left: 16,
-        radius_bottom_right: 16,
+    content: {
+        indicator_location: 'flex-start',
+        icon_setting: [
+            { id: get_math(), img: [], icon: 'applet-me-message-acquiesce', link: {} },
+        ],
     },
+    style: {
+        header_background_type: 'color_image',
+        header_background_color_list: [{ color: '#fff', color_percentage: undefined }],
+        header_background_direction: '180deg',
+        header_background_img_style: 2,
+        header_background_img: [],
+        header_background_title_color: '#333',
+        header_background_title_typeface: '500',
+        header_background_title_size: 16,
+        function_buttons_type: 'black',
+        immersive_style: '0',
+        up_slide_display: '1',
+        icon_color: '#ccc',
+        button_inner_color: '#fff',
+        search_botton_color_list: [{ color: '#FF973D', color_percentage: undefined }, { color: '#FF3131', color_percentage: undefined }],
+        search_botton_direction: '90deg',
+        search_botton_background_img_style: '',
+        search_botton_background_img: [],
+        search_button_radius: {
+            radius: 16,
+            radius_top_left: 16,
+            radius_top_right: 16,
+            radius_bottom_left: 16,
+            radius_bottom_right: 16,
+        },
+        img_size: '23',
+        img_space: '15',
+        tips_color: '#ccc',
+        hot_words_color: '#000',
+        search_border: '#E4E4E4',
+        search_border_radius: {
+            radius: 16,
+            radius_top_left: 16,
+            radius_top_right: 16,
+            radius_bottom_left: 16,
+            radius_bottom_right: 16,
+        },
+    }
 }
 const default_config = {
     style: {
@@ -63,27 +74,19 @@ const default_config = {
             style: {}
         },
         theme_2: {
-            content: {
-                indicator_location: 'flex-start',
-            },
+            content: {},
             style: {}
         },
         theme_3: {
-            content: {
-                indicator_location: 'flex-start',
-            },
+            content: {},
             style: {}
         },
         theme_4: {
-            content: {
-                indicator_location: 'flex-start',
-            },
+            content: {},
             style: {}
         },
         theme_5: {
-            content: {
-                indicator_location: 'flex-start',
-            },
+            content: {},
             style: {}
         },
     },
@@ -91,8 +94,8 @@ const default_config = {
 const form = ref(props.value);
 const change_theme = (val: string) => {
     if (val) {
-        form.value.style = Object.assign({}, form.value.style, cloneDeep(default_data), cloneDeep((<arrayIndex>default_config.style)[`theme_${Number(val)}`].style));
-        form.value.content = Object.assign({}, form.value.content, cloneDeep((<arrayIndex>default_config.style)[`theme_${Number(val)}`].content));
+        form.value.style = Object.assign({}, form.value.style, cloneDeep(default_data.style), cloneDeep((<arrayIndex>default_config.style)[`theme_${Number(val)}`].style));
+        form.value.content = Object.assign({}, form.value.content, cloneDeep(default_data.content), cloneDeep((<arrayIndex>default_config.style)[`theme_${Number(val)}`].content));
     }
 };
 </script>
diff --git a/src/components/page-settings/page-styles.vue b/src/components/page-settings/page-styles.vue
index 4c89db2a..f016f2d7 100644
--- a/src/components/page-settings/page-styles.vue
+++ b/src/components/page-settings/page-styles.vue
@@ -51,6 +51,24 @@
                     <color-text-size-group v-model:color="form.header_background_title_color" v-model:typeface="form.header_background_title_typeface" v-model:size="form.header_background_title_size" default-color="#000000"></color-text-size-group>
                 </el-form-item>
             </card-container>
+            <div class="bg-f5 divider-line" />
+            <card-container>
+                <div class="mb-12">右侧图标设置</div>
+                <el-form-item label="图标大小">
+                    <el-radio-group v-model="form.img_size">
+                        <el-radio value="28">大</el-radio>
+                        <el-radio value="23">中</el-radio>
+                        <el-radio value="18">小</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="图标间距">
+                    <el-radio-group v-model="form.img_space">
+                        <el-radio value="25">大</el-radio>
+                        <el-radio value="15">中</el-radio>
+                        <el-radio value="10">小</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+            </card-container>
         </el-form>
         <template v-if="['3', '5'].includes(content.theme)">
             <div class="bg-f5 divider-line" />
diff --git a/src/views/layout/components/main/default/header-nav.ts b/src/views/layout/components/main/default/header-nav.ts
index e7de50ba..1e680d26 100644
--- a/src/views/layout/components/main/default/header-nav.ts
+++ b/src/views/layout/components/main/default/header-nav.ts
@@ -14,6 +14,7 @@ interface DefaultFooterNav {
         indicator_location: string;
         bottom_navigation_show: string;
         positioning_name: string;
+        icon_setting: { id: string; img: uploadList[]; link: object; icon: string }[];
         is_arrows_show: string;
         is_center: string;
         is_icon_show: string;
@@ -48,6 +49,8 @@ interface DefaultFooterNav {
         search_botton_background_img_style: string;
         search_botton_background_img: uploadList[];
         search_button_radius: object;
+        img_size: string;
+        img_space: string;
         tips_color: string;
         hot_words_color: string;
         search_border: string;
@@ -63,6 +66,9 @@ const defaultFooterNav: DefaultFooterNav = {
         link: {},
         indicator_location: 'center',
         positioning_name: '默认名称',
+        icon_setting: [
+            { id: get_math(), img: [], icon: 'applet-me-message-acquiesce', link: {} },
+        ],
         is_arrows_show: '1',
         is_center: '0',
         is_icon_show: '1',
@@ -107,6 +113,8 @@ const defaultFooterNav: DefaultFooterNav = {
             radius_bottom_left: 16,
             radius_bottom_right: 16,
         },
+        img_size: '23',
+        img_space: '15',
         tips_color: '#ccc',
         hot_words_color: '#000',
         search_border: '#E4E4E4',
diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
index a69fd4aa..37349888 100644
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@@ -236,6 +236,7 @@ const save_formmat_form_data = (data: diy_data_item, close: boolean = false, is_
                 });
             });
         } else if (new_array_5.includes(item.key)) {
+            item.com_data.content.data_source_content_value = item.com_data.content.data_source_content.id;
             item.com_data.content.data_source_content = {};
         }
         return {