diff --git a/src/components/player/modals/AudioTrackModal.tsx b/src/components/player/modals/AudioTrackModal.tsx
index a0a23040..97ec9852 100644
--- a/src/components/player/modals/AudioTrackModal.tsx
+++ b/src/components/player/modals/AudioTrackModal.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import { View, Text, TouchableOpacity, ScrollView, Dimensions } from 'react-native';
+import { View, Text, TouchableOpacity, ScrollView, useWindowDimensions, StyleSheet, Platform } from 'react-native';
 import { MaterialIcons } from '@expo/vector-icons';
-import Animated, { 
-  FadeIn, 
+import Animated, {
+  FadeIn,
   FadeOut,
-  SlideInRight,
-  SlideOutRight,
+  SlideInDown,
+  SlideOutDown,
 } from 'react-native-reanimated';
 import { getTrackDisplayName, DEBUG_MODE } from '../utils/playerUtils';
 import { logger } from '../../../utils/logger';
@@ -18,9 +18,6 @@ interface AudioTrackModalProps {
   selectAudioTrack: (trackId: number) => void;
 }
 
-const { width } = Dimensions.get('window');
-const MENU_WIDTH = Math.min(width * 0.85, 400);
-
 export const AudioTrackModal: React.FC<AudioTrackModalProps> = ({
   showAudioModal,
   setShowAudioModal,
@@ -28,202 +25,98 @@ export const AudioTrackModal: React.FC<AudioTrackModalProps> = ({
   selectedAudioTrack,
   selectAudioTrack,
 }) => {
-  const handleClose = () => {
-    setShowAudioModal(false);
-  };
+  const { width, height } = useWindowDimensions();
 
-  // Debug logging when modal opens
-  React.useEffect(() => {
-    if (showAudioModal && DEBUG_MODE) {
-      logger.log(`[AudioTrackModal] Modal opened with selectedAudioTrack:`, selectedAudioTrack);
-      logger.log(`[AudioTrackModal] Available tracks:`, ksAudioTracks);
-      if (typeof selectedAudioTrack === 'number') {
-        const selectedTrack = ksAudioTracks.find(track => track.id === selectedAudioTrack);
-        if (selectedTrack) {
-          logger.log(`[AudioTrackModal] Selected track found: ${selectedTrack.name} (${selectedTrack.language})`);
-        } else {
-          logger.warn(`[AudioTrackModal] Selected track ${selectedAudioTrack} not found in available tracks`);
-        }
-      }
-    }
-  }, [showAudioModal, selectedAudioTrack, ksAudioTracks]);
+  const menuWidth = Math.min(width * 0.9, 420);
+  const menuMaxHeight = height * 0.9;
+
+  const handleClose = () => setShowAudioModal(false);
 
   if (!showAudioModal) return null;
-  
+
   return (
-    <>
-      {/* Backdrop */}
-      <Animated.View 
-        entering={FadeIn.duration(200)}
-        exiting={FadeOut.duration(150)}
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          backgroundColor: 'rgba(0, 0, 0, 0.5)',
-          zIndex: 9998,
-        }}
+    <View style={StyleSheet.absoluteFill} zIndex={9999}>
+      {/* Backdrop matching SubtitleModal */}
+      <TouchableOpacity
+        style={StyleSheet.absoluteFill}
+        activeOpacity={1}
+        onPress={handleClose}
       >
-        <TouchableOpacity 
-          style={{ flex: 1 }}
-          onPress={handleClose}
-          activeOpacity={1}
+        <Animated.View
+          entering={FadeIn.duration(200)}
+          exiting={FadeOut.duration(150)}
+          style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.4)' }}
         />
-      </Animated.View>
+      </TouchableOpacity>
 
-      {/* Side Menu */}
-      <Animated.View
-        entering={SlideInRight.duration(300)}
-        exiting={SlideOutRight.duration(250)}
-        style={{
-          position: 'absolute',
-          top: 0,
-          right: 0,
-          bottom: 0,
-          width: MENU_WIDTH,
-          backgroundColor: '#1A1A1A',
-          zIndex: 9999,
-          elevation: 20,
-          shadowColor: '#000',
-          shadowOffset: { width: -5, height: 0 },
-          shadowOpacity: 0.3,
-          shadowRadius: 10,
-          borderTopLeftRadius: 20,
-          borderBottomLeftRadius: 20,
-        }}
-      >
-        {/* Header */}
-        <View style={{
-          flexDirection: 'row',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          paddingHorizontal: 20,
-          paddingTop: 60,
-          paddingBottom: 20,
-          borderBottomWidth: 1,
-          borderBottomColor: 'rgba(255, 255, 255, 0.08)',
-        }}>
-          <Text style={{
-            color: '#FFFFFF',
-            fontSize: 22,
-            fontWeight: '700',
-          }}>
-            Audio Tracks
-          </Text>
-          <TouchableOpacity 
-            style={{
-              width: 36,
-              height: 36,
-              borderRadius: 18,
-              backgroundColor: 'rgba(255, 255, 255, 0.1)',
-              justifyContent: 'center',
-              alignItems: 'center',
-            }}
-            onPress={handleClose}
-            activeOpacity={0.7}
-          >
-            <MaterialIcons name="close" size={20} color="#FFFFFF" />
-          </TouchableOpacity>
-        </View>
-
-        <ScrollView 
-          style={{ flex: 1 }}
-          contentContainerStyle={{ padding: 20, paddingBottom: 40 }}
-          showsVerticalScrollIndicator={false}
+      {/* Center Alignment Container */}
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }} pointerEvents="box-none">
+        <Animated.View
+          entering={SlideInDown.duration(300)}
+          exiting={SlideOutDown.duration(250)}
+          style={{
+            width: menuWidth,
+            maxHeight: menuMaxHeight,
+            backgroundColor: 'rgba(15, 15, 15, 0.98)', // Matches SubtitleModal
+            borderRadius: 24,
+            borderWidth: 1,
+            borderColor: 'rgba(255,255,255,0.1)',
+            overflow: 'hidden'
+          }}
         >
-          {/* Audio Tracks */}
-          <View>
-            <Text style={{
-              color: 'rgba(255, 255, 255, 0.7)',
-              fontSize: 14,
-              fontWeight: '600',
-              marginBottom: 15,
-              textTransform: 'uppercase',
-              letterSpacing: 0.5,
-            }}>
-              Available Tracks ({ksAudioTracks.length})
-            </Text>
-            
+          {/* Header with shared aesthetics */}
+          <View style={{ flexDirection: 'row', alignItems: 'center', padding: 20, position: 'relative' }}>
+            <Text style={{ color: 'white', fontSize: 18, fontWeight: '700' }}>Audio Tracks</Text>
+          </View>
+
+          <ScrollView
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={{ paddingHorizontal: 20, paddingBottom: 20 }}
+          >
             <View style={{ gap: 8 }}>
               {ksAudioTracks.map((track) => {
-                // Determine if track is selected
                 const isSelected = selectedAudioTrack === track.id;
 
                 return (
                   <TouchableOpacity
                     key={track.id}
-                    style={{
-                      backgroundColor: isSelected ? 'rgba(34, 197, 94, 0.15)' : 'rgba(255, 255, 255, 0.05)',
-                      borderRadius: 16,
-                      padding: 16,
-                      borderWidth: 1,
-                      borderColor: isSelected ? 'rgba(34, 197, 94, 0.3)' : 'rgba(255, 255, 255, 0.1)',
-                    }}
                     onPress={() => {
-                      if (DEBUG_MODE) {
-                        logger.log(`[AudioTrackModal] Selecting track: ${track.id} (${track.name})`);
-                      }
                       selectAudioTrack(track.id);
-                      // Close modal after selection
-                      setTimeout(() => {
-                        setShowAudioModal(false);
-                      }, 200);
+                      setTimeout(handleClose, 200);
+                    }}
+                    style={{
+                      padding: 10,
+                      borderRadius: 12,
+                      backgroundColor: isSelected ? 'white' : 'rgba(255,255,255,0.05)', // Matches SubtitleModal item colors
+                      flexDirection: 'row',
+                      justifyContent: 'space-between',
+                      alignItems: 'center'
                     }}
-                    activeOpacity={0.7}
                   >
-                    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
-                      <View style={{ flex: 1 }}>
-                        <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 4 }}>
-                          <Text style={{
-                            color: '#FFFFFF',
-                            fontSize: 15,
-                            fontWeight: '500',
-                            flex: 1,
-                          }}>
-                            {getTrackDisplayName(track)}
-                          </Text>
-                        </View>
-                        {track.language && (
-                          <Text style={{
-                            color: 'rgba(255, 255, 255, 0.6)',
-                            fontSize: 13,
-                          }}>
-                            {track.language.toUpperCase()}
-                          </Text>
-                        )}
-                      </View>
-                      {isSelected && (
-                        <MaterialIcons name="check" size={20} color="#22C55E" />
-                      )}
+                    <View style={{ flex: 1 }}>
+                      <Text style={{
+                        color: isSelected ? 'black' : 'white',
+                        fontWeight: isSelected ? '700' : '400',
+                        fontSize: 15
+                      }}>
+                        {getTrackDisplayName(track)}
+                      </Text>
                     </View>
+                    {isSelected && <MaterialIcons name="check" size={18} color="black" />}
                   </TouchableOpacity>
                 );
               })}
-            </View>
 
-            {ksAudioTracks.length === 0 && (
-              <View style={{
-                backgroundColor: 'rgba(255, 255, 255, 0.05)',
-                borderRadius: 16,
-                padding: 20,
-                alignItems: 'center',
-              }}>
-                <MaterialIcons name="volume-off" size={48} color="rgba(255,255,255,0.3)" />
-                <Text style={{
-                  color: 'rgba(255, 255, 255, 0.6)',
-                  fontSize: 16,
-                  marginTop: 16,
-                  textAlign: 'center',
-                }}>
-                  No audio tracks available
-                </Text>
-              </View>
-            )}
-          </View>
-        </ScrollView>
-      </Animated.View>
-    </>
+              {ksAudioTracks.length === 0 && (
+                <View style={{ padding: 40, alignItems: 'center', opacity: 0.5 }}>
+                  <MaterialIcons name="volume-off" size={32} color="white" />
+                  <Text style={{ color: 'white', marginTop: 10 }}>No audio tracks available</Text>
+                </View>
+              )}
+            </View>
+          </ScrollView>
+        </Animated.View>
+      </View>
+    </View>
   );
-}; 
\ No newline at end of file
+};