diff --git a/src/components/TTSControls.tsx b/src/components/TTSControls.tsx
index 632d93f7..2278eea7 100644
--- a/src/components/TTSControls.tsx
+++ b/src/components/TTSControls.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { useTextToSpeech } from '../hooks/useTextToSpeech'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faPlay, faPause, faStop } from '@fortawesome/free-solid-svg-icons'
+import { faPlay, faPause, faStop, faGauge } from '@fortawesome/free-solid-svg-icons'
 
 interface Props {
   text: string
@@ -9,6 +9,8 @@ interface Props {
   className?: string
 }
 
+const SPEED_OPTIONS = [0.8, 1, 1.2, 1.4, 1.6]
+
 const TTSControls: React.FC<Props> = ({ text, defaultLang, className }) => {
   const {
     supported, speaking, paused,
@@ -29,6 +31,12 @@ const TTSControls: React.FC<Props> = ({ text, defaultLang, className }) => {
     }
   }
 
+  const handleCycleSpeed = () => {
+    const currentIndex = SPEED_OPTIONS.indexOf(rate)
+    const nextIndex = (currentIndex + 1) % SPEED_OPTIONS.length
+    setRate(SPEED_OPTIONS[nextIndex])
+  }
+
   const playLabel = !speaking ? 'Listen' : (paused ? 'Resume' : 'Pause')
 
   if (!supported) return null
@@ -55,20 +63,15 @@ const TTSControls: React.FC<Props> = ({ text, defaultLang, className }) => {
         <FontAwesomeIcon icon={faStop} />
         <span>Stop</span>
       </button>
-      <label style={{ display: 'inline-flex', alignItems: 'center', gap: '0.5rem', color: 'var(--color-text-secondary)', fontSize: '0.875rem' }}>
-        Speed
-        <select
-          value={rate}
-          onChange={e => setRate(Number(e.target.value))}
-          style={{ background: 'var(--color-bg-elevated)', color: 'var(--color-text)', border: '1px solid var(--color-border)', borderRadius: '6px', padding: '0.25rem 0.5rem', fontSize: '0.875rem', cursor: 'pointer', transition: 'all 0.2s ease' }}
-        >
-          <option value={0.8}>0.8x</option>
-          <option value={1}>1x</option>
-          <option value={1.2}>1.2x</option>
-          <option value={1.4}>1.4x</option>
-          <option value={1.6}>1.6x</option>
-        </select>
-      </label>
+      <button
+        type="button"
+        className="article-menu-btn"
+        onClick={handleCycleSpeed}
+        title="Cycle speed"
+      >
+        <FontAwesomeIcon icon={faGauge} />
+        <span>{rate}x</span>
+      </button>
     </div>
   )
 }