diff --git a/src/renderer/components.d.ts b/src/renderer/components.d.ts
index cf84bf0..12ae234 100644
--- a/src/renderer/components.d.ts
+++ b/src/renderer/components.d.ts
@@ -9,15 +9,22 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElInput: typeof import('element-plus/es')['ElInput']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SvgIcon: typeof import('./src/components/SvgIcon/index.vue')['default']
+    ThemeSwitcher: typeof import('./src/components/Theme/themeSwitcher.vue')['default']
     Versions: typeof import('./src/components/Versions.vue')['default']
   }
 }
diff --git a/src/renderer/src/assets/images/navBar/camera.png b/src/renderer/src/assets/images/navBar/camera.png
new file mode 100644
index 0000000..15b555b
Binary files /dev/null and b/src/renderer/src/assets/images/navBar/camera.png differ
diff --git a/src/renderer/src/assets/images/navBar/comm.png b/src/renderer/src/assets/images/navBar/comm.png
new file mode 100644
index 0000000..ec20560
Binary files /dev/null and b/src/renderer/src/assets/images/navBar/comm.png differ
diff --git a/src/renderer/src/assets/images/navBar/continuous_execution.png b/src/renderer/src/assets/images/navBar/continuous_execution.png
new file mode 100644
index 0000000..df6d185
Binary files /dev/null and b/src/renderer/src/assets/images/navBar/continuous_execution.png differ
diff --git a/src/renderer/src/assets/images/navBar/control.png b/src/renderer/src/assets/images/navBar/control.png
new file mode 100644
index 0000000..219ced3
Binary files /dev/null and b/src/renderer/src/assets/images/navBar/control.png differ
diff --git a/src/renderer/src/assets/images/navBar/global.png b/src/renderer/src/assets/images/navBar/global.png
new file mode 100644
index 0000000..84e6e2f
Binary files /dev/null and b/src/renderer/src/assets/images/navBar/global.png differ
diff --git a/src/renderer/src/assets/images/navBar/lock.png b/src/renderer/src/assets/images/navBar/lock.png
new file mode 100644
index 0000000..9722fcb
Binary files /dev/null and b/src/renderer/src/assets/images/navBar/lock.png differ
diff --git a/src/renderer/src/assets/images/navBar/next.png b/src/renderer/src/assets/images/navBar/next.png
new file mode 100644
index 0000000..7e34ddd
Binary files /dev/null and b/src/renderer/src/assets/images/navBar/next.png differ
diff --git a/src/renderer/src/assets/images/navBar/prev.png b/src/renderer/src/assets/images/navBar/prev.png
new file mode 100644
index 0000000..47b53ba
Binary files /dev/null and b/src/renderer/src/assets/images/navBar/prev.png differ
diff --git a/src/renderer/src/assets/images/navBar/run_interface.png b/src/renderer/src/assets/images/navBar/run_interface.png
new file mode 100644
index 0000000..b720c7e
Binary files /dev/null and b/src/renderer/src/assets/images/navBar/run_interface.png differ
diff --git a/src/renderer/src/assets/images/navBar/run_mode.png b/src/renderer/src/assets/images/navBar/run_mode.png
new file mode 100644
index 0000000..eec1667
Binary files /dev/null and b/src/renderer/src/assets/images/navBar/run_mode.png differ
diff --git a/src/renderer/src/assets/images/navBar/run_model.png b/src/renderer/src/assets/images/navBar/run_model.png
new file mode 100644
index 0000000..a7d6b95
Binary files /dev/null and b/src/renderer/src/assets/images/navBar/run_model.png differ
diff --git a/src/renderer/src/assets/images/navBar/save.png b/src/renderer/src/assets/images/navBar/save.png
new file mode 100644
index 0000000..6b58a15
Binary files /dev/null and b/src/renderer/src/assets/images/navBar/save.png differ
diff --git a/src/renderer/src/assets/images/navBar/script.png b/src/renderer/src/assets/images/navBar/script.png
new file mode 100644
index 0000000..c85d366
Binary files /dev/null and b/src/renderer/src/assets/images/navBar/script.png differ
diff --git a/src/renderer/src/assets/images/navBar/single_execution.png b/src/renderer/src/assets/images/navBar/single_execution.png
new file mode 100644
index 0000000..d78ea46
Binary files /dev/null and b/src/renderer/src/assets/images/navBar/single_execution.png differ
diff --git a/src/renderer/src/assets/images/navBar/trigger.png b/src/renderer/src/assets/images/navBar/trigger.png
new file mode 100644
index 0000000..22e0715
Binary files /dev/null and b/src/renderer/src/assets/images/navBar/trigger.png differ
diff --git a/src/renderer/src/assets/images/panelBar/calibrate.png b/src/renderer/src/assets/images/panelBar/calibrate.png
new file mode 100644
index 0000000..9a86a43
Binary files /dev/null and b/src/renderer/src/assets/images/panelBar/calibrate.png differ
diff --git a/src/renderer/src/assets/images/panelBar/color_processing.png b/src/renderer/src/assets/images/panelBar/color_processing.png
new file mode 100644
index 0000000..82bf9b7
Binary files /dev/null and b/src/renderer/src/assets/images/panelBar/color_processing.png differ
diff --git a/src/renderer/src/assets/images/panelBar/communication.png b/src/renderer/src/assets/images/panelBar/communication.png
new file mode 100644
index 0000000..3301e5b
Binary files /dev/null and b/src/renderer/src/assets/images/panelBar/communication.png differ
diff --git a/src/renderer/src/assets/images/panelBar/deep_learning.png b/src/renderer/src/assets/images/panelBar/deep_learning.png
new file mode 100644
index 0000000..81f8a62
Binary files /dev/null and b/src/renderer/src/assets/images/panelBar/deep_learning.png differ
diff --git a/src/renderer/src/assets/images/panelBar/gather.png b/src/renderer/src/assets/images/panelBar/gather.png
new file mode 100644
index 0000000..d268979
Binary files /dev/null and b/src/renderer/src/assets/images/panelBar/gather.png differ
diff --git a/src/renderer/src/assets/images/panelBar/identify.png b/src/renderer/src/assets/images/panelBar/identify.png
new file mode 100644
index 0000000..9d9017b
Binary files /dev/null and b/src/renderer/src/assets/images/panelBar/identify.png differ
diff --git a/src/renderer/src/assets/images/panelBar/image_generation.png b/src/renderer/src/assets/images/panelBar/image_generation.png
new file mode 100644
index 0000000..36d5938
Binary files /dev/null and b/src/renderer/src/assets/images/panelBar/image_generation.png differ
diff --git a/src/renderer/src/assets/images/panelBar/image_processing.png b/src/renderer/src/assets/images/panelBar/image_processing.png
new file mode 100644
index 0000000..a9148a8
Binary files /dev/null and b/src/renderer/src/assets/images/panelBar/image_processing.png differ
diff --git a/src/renderer/src/assets/images/panelBar/locate.png b/src/renderer/src/assets/images/panelBar/locate.png
new file mode 100644
index 0000000..8d7664d
Binary files /dev/null and b/src/renderer/src/assets/images/panelBar/locate.png differ
diff --git a/src/renderer/src/assets/images/panelBar/logical_tools.png b/src/renderer/src/assets/images/panelBar/logical_tools.png
new file mode 100644
index 0000000..b7859df
Binary files /dev/null and b/src/renderer/src/assets/images/panelBar/logical_tools.png differ
diff --git a/src/renderer/src/styles/design.scss b/src/renderer/src/styles/design.scss
index 491301a..ae2c82a 100644
--- a/src/renderer/src/styles/design.scss
+++ b/src/renderer/src/styles/design.scss
@@ -4,18 +4,18 @@
     height: 80px;
   }
   .design-content {
-    background-color: red;
+    // background-color: red;
     height: calc(100vh - 80px);
     .design-panel-box {
-      background-color: deeppink;
+      background-color: #373737;
       width: 64px;
     }
     .design-logic-flow-box {
-      background-color: greenyellow;
+      background-color: #242529;
       width: calc((100% - 64px) * 0.4745);
     }
     .design-content-right {
-      background-color: blue;
+      background-color: #151515;
       width: calc((100% - 64px) * 0.5255);
     }
   }
diff --git a/src/renderer/src/views/Design/Controls/headCtrl.vue b/src/renderer/src/views/Design/Controls/headCtrl.vue
index e632aeb..58424eb 100644
--- a/src/renderer/src/views/Design/Controls/headCtrl.vue
+++ b/src/renderer/src/views/Design/Controls/headCtrl.vue
@@ -54,11 +54,13 @@
   </div>
 </template>
 <script lang="ts" setup>
-
+defineOptions({
+  name: 'TitleBar'
+})
 interface Emits {
-  (e: "setting"): void;
+  (e: 'setting'): void
 }
-const emit = defineEmits<Emits>();
+const emit = defineEmits<Emits>()
 
 const dragging = ref(false)
 const mouseX = ref(0)
@@ -130,15 +132,20 @@ const handleClose = () => {
       }
       .title-text {
         width: 270px;
+        height: 100%;
         display: flex;
         align-items: center;
         justify-content: space-between;
         .el-dropdown-link {
+          width: 54px;
+          height: 100%;
           color: #fff;
           font-size: 14px;
           font-weight: 500;
         }
         span {
+          width: 54px;
+          height: 100%;
           color: #fff;
           font-size: 14px;
           font-weight: 500;
diff --git a/src/renderer/src/views/Design/Controls/navCtrl.vue b/src/renderer/src/views/Design/Controls/navCtrl.vue
index 403a196..d836249 100644
--- a/src/renderer/src/views/Design/Controls/navCtrl.vue
+++ b/src/renderer/src/views/Design/Controls/navCtrl.vue
@@ -1,9 +1,131 @@
 <template>
   <div class="nav-controls-wrap">
-    <ul class="flex">
-      <li v-for="(v, k) in ['保存', '上一步', '下一步', '退出']" :key="k" class="flex flex-center">
-        {{ v }}
-      </li>
-    </ul>
+    <div class="nav-controls">
+      <template v-for="(item, index) in btnInfo" :key="index">
+        <el-button size="small" class="custom-btn">
+          <img class="nav-icon" :src="item.icon" alt="" />
+          <span>{{ item.text }}</span>
+        </el-button>
+      </template>
+    </div>
+    <div class="nav-run">
+      <el-button size="small" class="custom-btn">
+        <img class="nav-icon" src="@/assets/images/navBar/run_mode.png" alt="" />
+        <span>运行模式</span>
+      </el-button>
+    </div>
   </div>
 </template>
+<script lang="ts" setup>
+defineOptions({
+  name: 'NavBar'
+})
+import SaveIcon from '@/assets/images/navBar/save.png'
+import PrevIcon from '@/assets/images/navBar/prev.png'
+import NextIcon from '@/assets/images/navBar/next.png'
+import LockIcon from '@/assets/images/navBar/lock.png'
+import CameraIcon from '@/assets/images/navBar/camera.png'
+import ControlIcon from '@/assets/images/navBar/control.png'
+import GlobalIcon from '@/assets/images/navBar/global.png'
+import CommIcon from '@/assets/images/navBar/comm.png'
+import TriggerIcon from '@/assets/images/navBar/trigger.png'
+import ScriptIcon from '@/assets/images/navBar/script.png'
+import SingleExecIcon from '@/assets/images/navBar/single_execution.png'
+import ContinuousExecIcon from '@/assets/images/navBar/continuous_execution.png'
+import RunInterfaceIcon from '@/assets/images/navBar/run_interface.png'
+import RunModelIcon from '@/assets/images/navBar/run_model.png'
+const btnInfo = [
+  {
+    icon: SaveIcon,
+    text: '保存'
+  },
+  {
+    icon: PrevIcon,
+    text: '上一步'
+  },
+  {
+    icon: NextIcon,
+    text: '下一步'
+  },
+  {
+    icon: LockIcon,
+    text: '锁定'
+  },
+  {
+    icon: CameraIcon,
+    text: '相机管理'
+  },
+  {
+    icon: ControlIcon,
+    text: '控制管理'
+  },
+  {
+    icon: GlobalIcon,
+    text: '全局变量'
+  },
+  {
+    icon: CommIcon,
+    text: '通信管理'
+  },
+  {
+    icon: TriggerIcon,
+    text: '全局触发'
+  },
+  {
+    icon: ScriptIcon,
+    text: '全局脚本'
+  },
+  {
+    icon: SingleExecIcon,
+    text: '单次执行'
+  },
+  {
+    icon: ContinuousExecIcon,
+    text: '连续执行'
+  },
+  {
+    icon: RunInterfaceIcon,
+    text: '编辑运行界面'
+  },
+  {
+    icon: RunModelIcon,
+    text: '编辑运行界面'
+  }
+]
+</script>
+<style lang="scss" scoped>
+.nav-controls-wrap {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 42px;
+  background: #373737;
+  .nav-controls {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+  }
+  .custom-btn {
+    display: flex;
+    align-items: center;
+    background-color: #373737;
+    color: white;
+    border: none; /* 可选：移除边框 */
+    font-size: 14px;
+    margin-left: 0;
+    &:hover {
+      background-color: #121212;
+    }
+    .nav-icon {
+      margin-right: 8px;
+      width: 20px;
+      height: 20px;
+    }
+    span {
+      font-weight: 500;
+      font-size: 14px;
+    }
+  }
+}
+</style>
diff --git a/src/renderer/src/views/Design/Controls/panelCtrl.vue b/src/renderer/src/views/Design/Controls/panelCtrl.vue
index 6256e61..ab245fc 100644
--- a/src/renderer/src/views/Design/Controls/panelCtrl.vue
+++ b/src/renderer/src/views/Design/Controls/panelCtrl.vue
@@ -1,3 +1,111 @@
 <template>
-  <div>123</div>
+  <div class="panel-controls-wrap">
+    <!-- 循环渲染导航项 -->
+    <div class="panel-btn-box">
+      <el-button size="small" class="panel-btn" v-for="(item, index) in btnInfo" :key="index">
+        <img class="panel-icon" :src="item.icon" alt="" />
+      </el-button>
+    </div>
+  </div>
 </template>
+<script lang="ts" setup>
+defineOptions({
+  name: 'PanelBar'
+})
+import GatherIcon from '@/assets/images/panelBar/gather.png' // 采集
+import LocateIcon from '@/assets/images/panelBar/locate.png' // 定位
+import IdentifyIcon from '@/assets/images/panelBar/identify.png' // 识别
+import CalibrateIcon from '@/assets/images/panelBar/calibrate.png' // 校准
+import ImageProcessingIcon from '@/assets/images/panelBar/image_processing.png' // 图片处理
+import ColorProcessingIcon from '@/assets/images/panelBar/color_processing.png' // 色彩处理
+import ImageGenerationIcon from '@/assets/images/panelBar/image_generation.png' // 图片生成
+import LogicalToolsIcon from '@/assets/images/panelBar/logical_tools.png' // 逻辑工具
+import CommunicationIcon from '@/assets/images/panelBar/communication.png' // 通讯
+import DeepLearningIcon from '@/assets/images/panelBar/deep_learning.png' // 深度学习
+
+const btnInfo = [
+  {
+    icon: GatherIcon,
+    text: '采集'
+  },
+  {
+    icon: LocateIcon,
+    text: '定位'
+  },
+  {
+    icon: IdentifyIcon,
+    text: '识别'
+  },
+  {
+    icon: CalibrateIcon,
+    text: '校准'
+  },
+  {
+    icon: ImageProcessingIcon,
+    text: '图片处理'
+  },
+  {
+    icon: ColorProcessingIcon,
+    text: '色彩处理'
+  },
+  {
+    icon: ImageGenerationIcon,
+    text: '图片生成'
+  },
+  {
+    icon: CommunicationIcon,
+    text: '通讯'
+  },
+  {
+    icon: DeepLearningIcon,
+    text: '深度学习'
+  }
+]
+</script>
+<style lang="scss" scoped>
+.panel-controls-wrap {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  .panel-btn-box {
+    margin-top: 12px;
+    width: 40px;
+    height: 392px;
+    background: #565656;
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    .panel-btn {
+      position: relative;
+      width: 100%;
+      height: 32px;
+      background: #565656;
+      color: white;
+      border: none; /* 可选：移除边框 */
+      margin-left: 0;
+      padding: 5px 8px;
+      .panel-icon {
+        width: 24px;
+        height: 24px !important;
+      }
+      // 三角角标
+      &::after {
+        content: '';
+        position: absolute;
+        right: 4px; // 右下角定位
+        bottom: 4px;
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-width: 0 0 4px 4px; // 控制三角大小
+        border-color: transparent transparent #fff transparent; // 三角颜色
+      }
+      &:hover {
+        background: #121212;
+      }
+    }
+  }
+}
+</style>