diff --git a/assets/main.css b/assets/main.css
index e69de29..ba854e2 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -0,0 +1,215 @@
+/* 全局样式重置 */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* 根元素变量定义 */
+:root {
+  --primary-color: #3498db;
+  --primary-hover: #2980b9;
+  --secondary-color: #2ecc71;
+  --secondary-hover: #27ae60;
+  --danger-color: #e74c3c;
+  --danger-hover: #c0392b;
+  --warning-color: #f39c12;
+  --warning-hover: #e67e22;
+  --background-color: #f5f7fa;
+  --card-background: #ffffff;
+  --text-primary: #2c3e50;
+  --text-secondary: #7f8c8d;
+  --border-radius: 8px;
+  --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  --transition: all 0.3s ease;
+}
+
+/* 基础样式 */
+body {
+  font-family: 'HarmonyOS Sans SC', sans-serif;
+  background-color: var(--background-color);
+  color: var(--text-primary);
+  line-height: 1.6;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+}
+
+/* 主容器 */
+.container {
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+/* 标题样式 */
+h1 {
+  text-align: center;
+  color: var(--text-primary);
+  margin-bottom: 30px;
+  font-size: 24px;
+  font-weight: 600;
+}
+
+/* 表单容器 */
+.form-container {
+  background-color: var(--card-background);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  padding: 24px;
+  margin-bottom: 24px;
+  width: 100%;
+}
+
+/* 操作按钮区域 */
+.actions {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+/* 按钮样式 */
+button {
+  padding: 12px 16px;
+  border: none;
+  border-radius: var(--border-radius);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--transition);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+/* 禁用按钮样式 */
+button.disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none !important;
+  box-shadow: none !important;
+}
+button.disabled:hover {
+  transform: none !important;
+  box-shadow: none !important;
+}
+
+/* 按钮类型样式 */
+#connect-button {
+  background-color: var(--primary-color);
+  color: white;
+}
+#connect-button:hover {
+  background-color: var(--primary-hover);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(52, 152, 219, 0.4);
+}
+#disconnect-button {
+  background-color: var(--danger-color);
+  color: white;
+}
+#disconnect-button:hover {
+  background-color: var(--danger-hover);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(231, 76, 60, 0.4);
+}
+#start-button {
+  background-color: var(--secondary-color);
+  color: white;
+}
+#start-button:hover {
+  background-color: var(--secondary-hover);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(46, 204, 113, 0.4);
+}
+#stop-button {
+  background-color: var(--warning-color);
+  color: white;
+}
+#stop-button:hover {
+  background-color: var(--warning-hover);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(243, 156, 18, 0.4);
+}
+
+/* 设置区域 */
+.settings {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 20px;
+}
+
+/* 选择器容器 */
+.resolution-selector,
+.display-mode-selector {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* 标签样式 */
+label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+
+/* 选择框样式 */
+select {
+  padding: 10px 12px;
+  border: 1px solid #e0e0e0;
+  border-radius: var(--border-radius);
+  font-size: 14px;
+  background-color: white;
+  transition: var(--transition);
+  cursor: pointer;
+}
+select:hover {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
+}
+select:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
+}
+
+/* 画布容器 */
+.canvas-container {
+  background-color: var(--card-background);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  padding: 20px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+/* 选择文本样式 */
+::selection {
+  background-color: var(--primary-color);
+  color: white;
+}
+
+/* 滚动条样式 */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
diff --git a/assets/main.js b/assets/main.js
index 51de861..251bae4 100644
--- a/assets/main.js
+++ b/assets/main.js
@@ -4,7 +4,7 @@ window.addEventListener('DOMContentLoaded', () => {
   const disconnectButton = document.getElementById('disconnect-button');
   const startButton = document.getElementById('start-button');
   const stopButton = document.getElementById('stop-button');
-  const canvas = document.getElementById('monitor-canvas');
+  const canvas = document.getElementById('canvas-element');
   const ctx = canvas.getContext('2d');
 
   // 全局变量
@@ -17,6 +17,16 @@ window.addEventListener('DOMContentLoaded', () => {
   let lastRefreshTime = 0;
   let displayMode = 'data'; // 显示模式: 'data' 或 'spectrum'
 
+  // 初始化UI状态
+  function initUI() {
+    // 初始绘制
+    if (displayMode === 'data') {
+      monitor.createDisplayImage();
+    } else {
+      drawSpectrum();
+    }
+  }
+
   // 音频相关变量
   let audioContext = null;
   let analyser = null;
@@ -186,6 +196,9 @@ window.addEventListener('DOMContentLoaded', () => {
   // 创建全局监控器实例
   const monitor = new SystemMonitor();
 
+  // 初始化UI
+  initUI();
+
   // 初始化音频上下文和麦克风
   async function initAudio() {
     try {
@@ -333,6 +346,7 @@ window.addEventListener('DOMContentLoaded', () => {
   // 连接按钮点击事件
   connectButton.addEventListener('click', async () => {
     try {
+
       // 请求用户授权访问串口设备
       port = await navigator.serial.requestPort();
 
@@ -434,6 +448,7 @@ window.addEventListener('DOMContentLoaded', () => {
 
   // 断开连接按钮点击事件
   disconnectButton.addEventListener('click', async () => {
+
     // 断开连接前自动停止监控
     if (animationId) {
       console.log('自动停止监控...');
@@ -458,6 +473,7 @@ window.addEventListener('DOMContentLoaded', () => {
 
     deviceState = 0;
     console.log('设备已断开连接');
+
   });
 
   // 辅助函数：将32位整数拆分为4个字节
diff --git a/index.html b/index.html
index 21317cd..23e86ca 100644
--- a/index.html
+++ b/index.html
@@ -3,33 +3,57 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>USB Monitor Controller</title>
+  <title>MSU2 USB Monitor Controller</title>
   <link rel="stylesheet" href="./assets/main.css">
 </head>
 <body>
   <div class="container">
-    <button id="connect-button">连接设备</button>
-    <button id="disconnect-button">断开连接</button>
-    <button id="start-button">开始发送</button>
-    <button id="stop-button">停止发送</button>
-    <div class="resolution-selector">
-      <label for="resolution">分辨率：</label>
-      <select id="resolution">
-        <option value="160x80" selected>160x80</option>
-        <option value="320x172">320x172</option>
-        <option value="320x240">320x240</option>
-      </select>
+
+    <!-- 标题 -->
+    <h1>MSU2 USB Monitor Controller</h1>
+
+    <!-- 表单容器 -->
+    <div class="form-container">
+
+      <!-- 操作 -->
+      <div class="actions">
+        <button id="connect-button">连接设备</button>
+        <button id="disconnect-button">断开连接</button>
+        <button id="start-button">开始发送</button>
+        <button id="stop-button">停止发送</button>
+      </div>
+
+      <!-- 配置 -->
+      <div class="settings">
+
+        <!-- 分辨率 -->
+        <div class="resolution-selector">
+          <label for="resolution">分辨率：</label>
+          <select id="resolution">
+            <option value="160x80" selected>160x80</option>
+            <option value="320x172">320x172</option>
+            <option value="320x240">320x240</option>
+          </select>
+        </div>
+
+        <!-- 显示模式 -->
+        <div class="display-mode-selector">
+          <label for="display-mode">显示模式：</label>
+          <select id="display-mode">
+            <option value="data" selected>文本数据</option>
+            <option value="spectrum">频谱分析</option>
+          </select>
+        </div>
+
+      </div>
+
     </div>
-    <div class="display-mode-selector">
-      <label for="display-mode">显示模式：</label>
-      <select id="display-mode">
-        <option value="data" selected>文本数据</option>
-        <option value="spectrum">频谱分析</option>
-      </select>
+
+    <!-- 画布容器 -->
+    <div class="canvas-container">
+      <canvas id="canvas-element" width="320" height="240"></canvas>
     </div>
-  </div>
-  <div class="canvas-container">
-    <canvas id="monitor-canvas" width="320" height="240"></canvas>
+
   </div>
   <script src="./assets/main.js"></script>
 </body>