diff --git a/client/src/pages/Home.tsx b/client/src/pages/Home.tsx
index 7bb32ea..f7cc51e 100644
--- a/client/src/pages/Home.tsx
+++ b/client/src/pages/Home.tsx
@@ -45,6 +45,8 @@ import {
   SquareArrowRightEnter,
   SquareArrowRightExit,
   FileMusic,
+  Minus,
+  Plus,
 } from "lucide-react";
 import { useLocation } from "wouter";
 import { useRef, useState, useEffect, useCallback, useMemo } from "react";
@@ -790,7 +792,9 @@ export default function Home() {
               applyVolume(next);
             }}
           >
-            <span className="text-[20px] leading-none">-</span>
+            <span className="text-[20px] leading-none">
+              <Minus size={20} className="text-[#00FFF6]" />
+            </span>
           </button>
 
           <span
@@ -820,7 +824,9 @@ export default function Home() {
               applyVolume(next);
             }}
           >
-            <span className="text-[20px] leading-none">+</span>
+            <span className="text-[20px] leading-none">
+              <Plus size={20} className="text-[#00FFF6]" />
+            </span>
           </button>
         </div>
 
@@ -843,19 +849,19 @@ export default function Home() {
                 onClick={() => updateSetting({ bt_next: 0 })}
                 className="w-10 h-10 rounded-full flex items-center justify-center transition-all active:scale-95"
                 style={{ background: "rgba(0,255,246,0.15)", border: "1px solid rgba(0,255,246,0.3)" }}>
-                  <SkipBack size={20} className="text-[#00FFF6]" />
+                  <SkipBack size={18} className="text-[#00FFF6]" />
               </button>
               <button
                 onClick={() => updateSetting({ bt_play: 1 })}
                 className="w-12 h-12 rounded-full flex items-center justify-center transition-all active:scale-95"
                 style={{ background: "transparent", border: "1px solid rgba(0,255,246,0.5)", boxShadow: "0 0 12px rgba(0,255,246,0.4)" }}>
-                {ds.bt_status === 1 ? <Play size={28} className="text-[#00FFF6]" /> : <Pause size={28} className="text-[#00FFF6]" />}
+                {ds.bt_status === 1 ? <Play size={23} className="text-[#00FFF6]" /> : <Pause size={28} className="text-[#00FFF6]" />}
               </button>
               <button
                 onClick={() => updateSetting({ bt_next: 1 })}
                 className="w-10 h-10 rounded-full flex items-center justify-center transition-all active:scale-95"
                 style={{ background: "rgba(0,255,246,0.15)", border: "1px solid rgba(0,255,246,0.3)" }}>
-                <SkipForward size={20} className="text-[#00FFF6]" />
+                <SkipForward size={18} className="text-[#00FFF6]" />
               </button>
             </div>
           </div>
diff --git a/client/src/pages/IOPage.tsx b/client/src/pages/IOPage.tsx
index 9d1e8aa..1ff5ae6 100644
--- a/client/src/pages/IOPage.tsx
+++ b/client/src/pages/IOPage.tsx
@@ -37,7 +37,7 @@ const INPUT_OPTION_DEFS: IOOptionDef[] = [
 	<path d="M0 0h24v24H0z" fill="none" />
 	<g fill="none">
 		<path d="M3 12h18v9H3zm2-9h14v9H5z" />
-		<g stroke="currentColor" stroke-width="2">
+		<g stroke="currentColor" strokeWidth="2">
 			<path d="M3 12h18v9H3zm16 0H5V3h14z" />
 			<path d="M9 7.496h.004V7.5H9zm6 0h.004V7.5H15z" />
 		</g>
@@ -112,7 +112,7 @@ const INPUT_OPTION_DEFS: IOOptionDef[] = [
 	<path d="M0 0h24v24H0z" fill="none" />
 	<g fill="currentColor">
 		<path d="M10 4.5h1v2h-1zm4 0h-1v2h1z" />
-		<path fill-rule="evenodd" d="M7 8.5v-7h10v7h2v11a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3v-11zm2-5h6v5H9zm8 7H7v9a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1z" clip-rule="evenodd" />
+		<path fillRule="evenodd" d="M7 8.5v-7h10v7h2v11a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3v-11zm2-5h6v5H9zm8 7H7v9a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1z" clipRule="evenodd" />
 	</g>
 </svg>