diff --git a/src/app/export.tsx b/src/app/export.tsx
index d2f7a18..e46be02 100644
--- a/src/app/export.tsx
+++ b/src/app/export.tsx
@@ -12,6 +12,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { ThemedText } from '@/components/themed-text';
 import { ThemedView } from '@/components/themed-view';
+import { GlassPill } from '@/components/glass-pill';
 import { CloseButton } from '@/features/recorder/close-button';
 import { Spacing } from '@/constants/theme';
 import { useTheme } from '@/hooks/use-theme';
@@ -605,33 +606,35 @@ function MergedPreview({
         </View>
         {!isPlaying && (
           <View style={styles.playOverlay} pointerEvents="none">
-            <View style={styles.playBadge}>
-              <Icon name="play.fill" size={24} tintColor="#fff" />
-            </View>
+            <GlassPill style={styles.playBadge}>
+              <Icon name="play.fill" size={28} tintColor="#fff" />
+            </GlassPill>
           </View>
         )}
         <View style={styles.metaRow} pointerEvents="none">
-          <View style={styles.metaPill}>
+          <GlassPill style={styles.metaPill}>
             <ThemedText style={styles.metaText}>{meta}</ThemedText>
-          </View>
+          </GlassPill>
         </View>
       </Pressable>
 
       {working && (
-        <View style={styles.captionBadge} pointerEvents="none">
+        <GlassPill style={[styles.captionBadge, styles.captionSurface]} pointerEvents="none">
           <ActivityIndicator size="small" color="#fff" />
-        </View>
+        </GlassPill>
       )}
       {actionable && (
         <Pressable
           onPress={captionStatus === 'no-model' ? onAddCaptions : onEditCaptions}
-          hitSlop={8}
+          hitSlop={4}
           accessibilityRole="button"
           accessibilityLabel={
             captionStatus === 'ready' && lines.length > 0 ? 'Edit captions' : 'Add captions'
           }
           style={styles.captionBadge}>
-          <Icon name="captions.bubble" size={16} weight="semibold" tintColor="#fff" />
+          <GlassPill style={styles.captionSurface}>
+            <Icon name="captions.bubble" size={20} weight="semibold" tintColor="#fff" />
+          </GlassPill>
         </Pressable>
       )}
     </View>
@@ -661,11 +664,12 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  // Shape only — GlassPill owns the surface (Liquid Glass on iOS 26+, dark scrim fallback).
+  // Matches the recorder preview card's ▶; paddingLeft optically centers the glyph.
   playBadge: {
-    width: 56,
-    height: 56,
-    borderRadius: 28,
-    backgroundColor: 'rgba(0,0,0,0.45)',
+    width: 64,
+    height: 64,
+    borderRadius: 32,
     alignItems: 'center',
     justifyContent: 'center',
     paddingLeft: 4,
@@ -694,7 +698,6 @@ const styles = StyleSheet.create({
     paddingHorizontal: Spacing.two,
     paddingVertical: 4,
     borderRadius: 12,
-    backgroundColor: 'rgba(0,0,0,0.55)',
   },
   metaText: {
     color: '#fff',
@@ -704,15 +707,18 @@ const styles = StyleSheet.create({
     letterSpacing: 0.3,
   },
   // Small tappable badge in the top-right of the merged preview — edit/add captions, or a
-  // spinner while transcribing/downloading. White glyph on a translucent scrim over the video.
+  // spinner while transcribing/downloading. Placement here; the glass surface (sized to a
+  // 48pt effective target with hitSlop, like the recorder preview card's badges) is split
+  // out so the Pressable variant can own the position while GlassPill owns the surface.
   captionBadge: {
     position: 'absolute',
     top: Spacing.two,
     right: Spacing.two,
-    width: 30,
-    height: 30,
-    borderRadius: 15,
-    backgroundColor: 'rgba(0,0,0,0.55)',
+  },
+  captionSurface: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
     alignItems: 'center',
     justifyContent: 'center',
   },
diff --git a/src/app/recorder.tsx b/src/app/recorder.tsx
index 89788c1..35fb314 100644
--- a/src/app/recorder.tsx
+++ b/src/app/recorder.tsx
@@ -12,6 +12,7 @@ import {
 } from 'react-native-vision-camera';
 
 import { ThemedView } from '@/components/themed-view';
+import { GlassPill } from '@/components/glass-pill';
 import { Spacing } from '@/constants/theme';
 import { CameraControls } from '@/features/recorder/camera-controls';
 import { CloseButton } from '@/features/recorder/close-button';
@@ -444,7 +445,9 @@ export default function RecorderScreen() {
             { paddingTop: insets.top + Spacing.two, paddingHorizontal: Spacing.three },
           ]}>
           <CloseButton onPress={handleClose} overVideo />
-          <Text style={styles.timerText}>{formatDurationPadded(totalMs)}</Text>
+          <GlassPill style={styles.timerPill}>
+            <Text style={styles.timerText}>{formatDurationPadded(totalMs)}</Text>
+          </GlassPill>
           {/* Mirrors the CloseButton's width so the timer stays optically centered. */}
           <View style={styles.topBarSpacer} />
         </View>
@@ -585,15 +588,18 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'space-between',
   },
+  // Shape only — GlassPill owns the surface; ties the top bar to the glass close button.
+  timerPill: {
+    paddingHorizontal: Spacing.two,
+    paddingVertical: 4,
+    borderRadius: 14,
+  },
   timerText: {
     color: '#fff',
     fontSize: 16,
     fontWeight: '600',
     fontVariant: ['tabular-nums'],
     letterSpacing: 0.5,
-    textShadowColor: 'rgba(0,0,0,0.6)',
-    textShadowOffset: { width: 0, height: 1 },
-    textShadowRadius: 3,
   },
   topBarSpacer: { width: 40 },
   previewArea: { flex: 1, alignItems: 'center', justifyContent: 'center' },
diff --git a/src/app/subtitles.tsx b/src/app/subtitles.tsx
index 8a2bd85..6074389 100644
--- a/src/app/subtitles.tsx
+++ b/src/app/subtitles.tsx
@@ -2,6 +2,7 @@ import { useEvent } from 'expo';
 import { useLiveQuery } from 'drizzle-orm/expo-sqlite';
 import { useLocalSearchParams, router } from 'expo-router';
 import { Icon, type IconName } from '@/components/icon';
+import { GlassPill } from '@/components/glass-pill';
 import { useVideoPlayer, VideoView } from 'expo-video';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import {
@@ -334,9 +335,9 @@ function Editor({
           </View>
           {!isPlaying && (
             <View style={styles.playOverlay} pointerEvents="none">
-              <View style={[styles.playBadge, mode === 'text' && styles.playBadgeCompact]}>
+              <GlassPill style={[styles.playBadge, mode === 'text' && styles.playBadgeCompact]}>
                 <Icon name="play.fill" size={mode === 'text' ? 15 : 22} tintColor="#fff" />
-              </View>
+              </GlassPill>
             </View>
           )}
         </Pressable>
@@ -513,11 +514,11 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  // Shape only — GlassPill owns the surface. paddingLeft optically centers the ▶ glyph.
   playBadge: {
     width: 48,
     height: 48,
     borderRadius: 24,
-    backgroundColor: 'rgba(0,0,0,0.45)',
     alignItems: 'center',
     justifyContent: 'center',
     paddingLeft: 3,