diff --git a/src/components/TitleBar.tsx b/src/components/TitleBar.tsx
index d645db68..d21d5a78 100644
--- a/src/components/TitleBar.tsx
+++ b/src/components/TitleBar.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { getCurrentWindow } from '@tauri-apps/api/window';
-import { X, Minus, Square } from 'lucide-react';
 import { usePlayerStore } from '../store/playerStore';
 
 export default function TitleBar() {
@@ -27,25 +26,22 @@ export default function TitleBar() {
           onClick={() => win.minimize()}
           data-tooltip="Minimize"
           data-tooltip-pos="bottom"
-        >
-          <Minus size={10} />
-        </button>
+          aria-label="Minimize"
+        />
         <button
           className="titlebar-btn titlebar-btn-maximize"
           onClick={() => win.toggleMaximize()}
           data-tooltip="Maximize"
           data-tooltip-pos="bottom"
-        >
-          <Square size={9} />
-        </button>
+          aria-label="Maximize"
+        />
         <button
           className="titlebar-btn titlebar-btn-close"
           onClick={() => win.close()}
           data-tooltip="Close"
           data-tooltip-pos="bottom"
-        >
-          <X size={12} />
-        </button>
+          aria-label="Close"
+        />
       </div>
     </div>
   );
diff --git a/src/styles/layout.css b/src/styles/layout.css
index b0f9d574..fb7da77d 100644
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@@ -142,38 +142,38 @@
   border-radius: 50%;
   cursor: pointer;
   box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18);
-  transition: filter var(--transition-fast);
-}
-
-.titlebar-btn svg {
-  width: 9px;
-  height: 9px;
-  stroke-width: 2.5;
+  transition: filter var(--transition-fast), box-shadow var(--transition-fast);
 }
 
 .titlebar-btn-close {
   background: #ff5f57;
-  color: #4d0000;
 }
 
 .titlebar-btn-minimize {
   background: #febc2e;
-  color: #7a4a00;
 }
 
 .titlebar-btn-maximize {
   background: #28c840;
-  color: #004d00;
 }
 
 .titlebar-btn:hover {
-  filter: brightness(1.08);
+  filter: brightness(1.1);
 }
 
+.titlebar-btn-close:hover    { box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18), 0 0 6px rgba(255, 95, 87, 0.75); }
+.titlebar-btn-minimize:hover { box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18), 0 0 6px rgba(254, 188, 46, 0.75); }
+.titlebar-btn-maximize:hover { box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18), 0 0 6px rgba(40, 200, 64, 0.75); }
+
 .titlebar-btn:active {
   filter: brightness(0.92);
 }
 
+.titlebar-btn:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18), 0 0 0 2px rgba(255, 255, 255, 0.5);
+}
+
 /* Resizer handles must start below the titlebar */
 .app-shell[data-titlebar] .resizer {
   top: var(--titlebar-height);