diff --git a/sidepanel/index.css b/sidepanel/index.css
index dd1b290..0aee4fb 100644
--- a/sidepanel/index.css
+++ b/sidepanel/index.css
@@ -35,8 +35,51 @@
   margin-left: auto;
 }
 
+.datetime-box {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+@media screen and (max-width: 768px) {
+  .datetime-box {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
+.input-group {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  margin: 0.5rem 0;
+  min-width: 200px;
+}
+
+@media screen and (max-width: 768px) {
+  .input-group {
+    min-width: unset;
+    width: 100%;
+  }
+}
+
 .input-text {
-  width: 100%;
+  width: 200px;
+  padding: 0.5rem;
+  margin: 0.5rem 0;
+  box-sizing: border-box;
+}
+
+@media screen and (max-width: 768px) {
+  .input-text {
+    width: 100%;
+    flex: 1;
+  }
+}
+
+.select-box {
+  width: 150px;
   padding: 0.5rem;
   margin: 0.5rem 0;
   box-sizing: border-box;
@@ -49,13 +92,16 @@
   border: none;
   border-radius: 0.25rem;
   cursor: pointer;
+  height: 2rem;
+  width: 4rem;
+  margin: 0.5rem 0;
+  align-self: flex-start;
 }
 
-.select-box {
-  width: 100%;
-  padding: 0.5rem;
-  margin: 0.5rem 0;
-  box-sizing: border-box;
+@media screen and (max-width: 768px) {
+  .convert-button {
+    width: 100%;
+  }
 }
 
 .content {
@@ -68,4 +114,4 @@
 
 .page.active {
   display: block;
-}
+}
\ No newline at end of file
diff --git a/sidepanel/index.html b/sidepanel/index.html
index 6724b47..604a350 100644
--- a/sidepanel/index.html
+++ b/sidepanel/index.html
@@ -18,7 +18,6 @@
 
       <!-- 页面内容容器 -->
       <div class="content">
-
         <!-- 时间戳工具页面 -->
         <div id="page-timestamp" class="page active">
           <h2>时间戳工具</h2>
@@ -37,30 +36,71 @@
           <!-- 时间戳转日期时间 -->
           <div>
             <h2>时间戳转日期时间</h2>
-            <div>
-              <input type="text" id="input-timestamp" placeholder="请输入时间戳" class="input-text" />
-              <select class="select-box">
-                <option value="milliseconds">毫秒(ms)</option>
-                <option value="seconds">秒(s)</option>
-              </select>
-            </div>
-            <div>
-              <button id="convert-timestamp-btn" class="convert-button">转换</button>
-            </div>
-            <div>
-              <input type="text" id="timestamp-input-result" placeholder="转换结果" class="input-text"></input>
-              <select class="select-box">
-                <option>Asia/Shanghai</option>
-              </select>
+            <div class="datetime-box">
+              <div class="input-group">
+                <input
+                  type="text"
+                  id="input-timestamp"
+                  placeholder="请输入时间戳"
+                  class="input-text"
+                />
+                <select class="select-box">
+                  <option value="milliseconds">毫秒(ms)</option>
+                  <option value="seconds">秒(s)</option>
+                </select>
+              </div>
+
+              <div class="input-group">
+                <button id="convert-timestamp-btn" class="convert-button">转换</button>
+              </div>
+
+              <div class="input-group">
+                <input
+                  type="text"
+                  id="timestamp-input-result"
+                  placeholder="转换结果"
+                  class="input-text"
+                />
+                <select class="select-box">
+                  <option>Asia/Shanghai</option>
+                </select>
+              </div>
             </div>
           </div>
 
           <!-- 日期时间转时间戳 -->
           <div>
             <h2>日期时间转时间戳</h2>
+            <div class="datetime-box">
+              <div class="input-group">
+                <input
+                  type="text"
+                  id="input-datetime"
+                  placeholder="输入日期时间"
+                  class="input-text"
+                />
+                <select class="select-box">
+                  <option>Asia/Shanghai</option>
+                </select>
+              </div>
 
-            <button id="convert-datetime-btn">转换</button>
-            <p id="converted-timestamp"></p>
+              <div class="input-group">
+                <button id="convert-datetime-btn" class="convert-button">转换</button>
+              </div>
+
+              <div class="input-group">
+                <input
+                  type="text"
+                  id="datetime-input-result"
+                  placeholder="转换结果"
+                  class="input-text"
+                />
+                <select class="select-box">
+                  <option value="milliseconds">毫秒(ms)</option>
+                  <option value="seconds">秒(s)</option>
+                </select>
+              </div>
+            </div>
           </div>
         </div>