diff --git a/src/screens/HomeScreenSettings.tsx b/src/screens/HomeScreenSettings.tsx
index 9b0d9b0..dc07580 100644
--- a/src/screens/HomeScreenSettings.tsx
+++ b/src/screens/HomeScreenSettings.tsx
@@ -16,7 +16,7 @@ import { useSettings } from '../hooks/useSettings';
 import { useNavigation } from '@react-navigation/native';
 import { NavigationProp } from '@react-navigation/native';
 import { MaterialIcons } from '@expo/vector-icons';
-import { colors } from '../styles/colors';
+import { useTheme } from '../contexts/ThemeContext';
 import { RootStackParamList } from '../navigation/AppNavigator';
 
 const ANDROID_STATUSBAR_HEIGHT = StatusBar.currentHeight || 0;
@@ -24,9 +24,10 @@ const ANDROID_STATUSBAR_HEIGHT = StatusBar.currentHeight || 0;
 interface SettingsCardProps {
   children: React.ReactNode;
   isDarkMode: boolean;
+  colors: any;
 }
 
-const SettingsCard: React.FC<SettingsCardProps> = ({ children, isDarkMode }) => (
+const SettingsCard: React.FC<SettingsCardProps> = ({ children, isDarkMode, colors }) => (
   <View style={[
     styles.card,
     { backgroundColor: isDarkMode ? colors.elevation2 : colors.white }
@@ -46,6 +47,7 @@ interface SettingItemProps {
   isLast?: boolean;
   onPress?: () => void;
   isDarkMode: boolean;
+  colors: any;
 }
 
 const SettingItem: React.FC<SettingItemProps> = ({
@@ -55,7 +57,8 @@ const SettingItem: React.FC<SettingItemProps> = ({
   renderControl,
   isLast = false,
   onPress,
-  isDarkMode
+  isDarkMode,
+  colors
 }) => {
   return (
     <TouchableOpacity 
@@ -89,7 +92,7 @@ const SettingItem: React.FC<SettingItemProps> = ({
   );
 };
 
-const SectionHeader: React.FC<{ title: string; isDarkMode: boolean }> = ({ title, isDarkMode }) => (
+const SectionHeader: React.FC<{ title: string; isDarkMode: boolean; colors: any }> = ({ title, isDarkMode, colors }) => (
   <View style={styles.sectionHeader}>
     <Text style={[
       styles.sectionHeaderText,
@@ -103,6 +106,8 @@ const SectionHeader: React.FC<{ title: string; isDarkMode: boolean }> = ({ title
 const HomeScreenSettings: React.FC = () => {
   const { settings, updateSetting } = useSettings();
   const systemColorScheme = useColorScheme();
+  const { currentTheme } = useTheme();
+  const colors = currentTheme.colors;
   const isDarkMode = systemColorScheme === 'dark' || settings.enableDarkMode;
   const navigation = useNavigation<NavigationProp<RootStackParamList>>();
   const [showSavedIndicator, setShowSavedIndicator] = useState(false);
@@ -161,7 +166,7 @@ const HomeScreenSettings: React.FC = () => {
           styles.radio, 
           { borderColor: isDarkMode ? colors.mediumEmphasis : colors.textMutedDark }
         ]}>
-          {selected && <View style={styles.radioInner} />}
+          {selected && <View style={[styles.radioInner, { backgroundColor: colors.primary }]} />}
         </View>
         <Text style={[
           styles.radioLabel, 
@@ -229,13 +234,14 @@ const HomeScreenSettings: React.FC = () => {
         showsVerticalScrollIndicator={false}
         contentContainerStyle={styles.scrollContent}
       >
-        <SectionHeader title="DISPLAY OPTIONS" isDarkMode={isDarkMode} />
-        <SettingsCard isDarkMode={isDarkMode}>
+        <SectionHeader title="DISPLAY OPTIONS" isDarkMode={isDarkMode} colors={colors} />
+        <SettingsCard isDarkMode={isDarkMode} colors={colors}>
           <SettingItem
             title="Show Hero Section"
             description="Featured content at the top"
             icon="movie-filter"
             isDarkMode={isDarkMode}
+            colors={colors}
             renderControl={() => (
               <CustomSwitch 
                 value={settings.showHeroSection} 
@@ -248,6 +254,7 @@ const HomeScreenSettings: React.FC = () => {
             description={settings.featuredContentSource === 'tmdb' ? 'TMDB Trending' : 'From Catalogs'}
             icon="settings-input-component"
             isDarkMode={isDarkMode}
+            colors={colors}
             renderControl={() => <View />}
             isLast={!settings.showHeroSection || settings.featuredContentSource !== 'catalogs'}
           />
@@ -257,6 +264,7 @@ const HomeScreenSettings: React.FC = () => {
               description={getSelectedCatalogsText()}
               icon="list"
               isDarkMode={isDarkMode}
+              colors={colors}
               renderControl={ChevronRight}
               onPress={() => navigation.navigate('HeroCatalogs')}
               isLast={true}
@@ -300,7 +308,7 @@ const HomeScreenSettings: React.FC = () => {
           </>
         )}
 
-        <SectionHeader title="ABOUT THESE SETTINGS" isDarkMode={isDarkMode} />
+        <SectionHeader title="ABOUT THESE SETTINGS" isDarkMode={isDarkMode} colors={colors} />
         <View style={[styles.infoCard, { backgroundColor: isDarkMode ? colors.elevation1 : 'rgba(0,0,0,0.03)' }]}>
           <Text style={[styles.infoText, { color: isDarkMode ? colors.mediumEmphasis : colors.textMutedDark }]}>
             These settings control how content is displayed on your Home screen. Changes are applied immediately without requiring an app restart.
@@ -401,7 +409,7 @@ const styles = StyleSheet.create({
     marginHorizontal: 16,
     marginVertical: 8,
     borderRadius: 12,
-    backgroundColor: colors.elevation1,
+    backgroundColor: 'rgba(255,255,255,0.05)',
     overflow: 'hidden',
   },
   radioOption: {
@@ -424,7 +432,6 @@ const styles = StyleSheet.create({
     width: 10,
     height: 10,
     borderRadius: 5,
-    backgroundColor: colors.primary,
   },
   radioLabel: {
     fontSize: 16,
diff --git a/src/screens/MDBListSettingsScreen.tsx b/src/screens/MDBListSettingsScreen.tsx
index 73dc1f3..7dd3dda 100644
--- a/src/screens/MDBListSettingsScreen.tsx
+++ b/src/screens/MDBListSettingsScreen.tsx
@@ -19,7 +19,7 @@ import {
 import { useNavigation } from '@react-navigation/native';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import { colors } from '../styles/colors';
+import { useTheme } from '../contexts/ThemeContext';
 import { logger } from '../utils/logger';
 import { RATING_PROVIDERS } from '../components/metadata/RatingsSection';
 
@@ -55,8 +55,312 @@ export const getMDBListAPIKey = async (): Promise<string | null> => {
   }
 };
 
+// Create a styles creator function that accepts the theme colors
+const createStyles = (colors: any) => StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.darkBackground,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingTop: Platform.OS === 'android' ? ANDROID_STATUSBAR_HEIGHT + 8 : 8,
+  },
+  backButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 8,
+  },
+  backText: {
+    fontSize: 17,
+    fontWeight: '400',
+    color: colors.primary,
+    marginLeft: 0,
+  },
+  headerTitle: {
+    fontSize: 34,
+    fontWeight: '700',
+    color: colors.white,
+    paddingHorizontal: 16,
+    paddingBottom: 16,
+    paddingTop: 8,
+  },
+  content: {
+    flex: 1,
+  },
+  scrollContent: {
+    paddingHorizontal: 12,
+    paddingTop: 10,
+    paddingBottom: 20,
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: colors.darkBackground,
+  },
+  loadingText: {
+    marginTop: 12,
+    fontSize: 15,
+    color: colors.mediumGray,
+  },
+  card: {
+    backgroundColor: colors.elevation2,
+    borderRadius: 10,
+    padding: 12,
+    marginBottom: 16,
+  },
+  statusCard: {
+    backgroundColor: colors.elevation1,
+    borderRadius: 10,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    marginBottom: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: colors.border,
+  },
+  infoCard: {
+    backgroundColor: colors.elevation1,
+    borderRadius: 10,
+    padding: 12,
+  },
+  statusIcon: {
+    marginRight: 12,
+  },
+  statusTextContainer: {
+    flex: 1,
+  },
+  statusTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: colors.white,
+    marginBottom: 2,
+  },
+  statusDescription: {
+    fontSize: 13,
+    color: colors.mediumGray,
+    lineHeight: 18,
+  },
+  sectionTitle: {
+    fontSize: 15,
+    fontWeight: '600',
+    color: colors.lightGray,
+    marginBottom: 10,
+  },
+  inputWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: colors.elevation2,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: colors.border,
+  },
+  input: {
+    flex: 1,
+    paddingVertical: 10,
+    paddingHorizontal: 10,
+    color: colors.white,
+    fontSize: 15,
+  },
+  inputFocused: {
+    borderColor: colors.primary,
+  },
+  pasteButton: {
+    padding: 8,
+    marginRight: 2,
+  },
+  testResultContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 8,
+    paddingHorizontal: 10,
+    borderRadius: 6,
+    marginTop: 10,
+    borderWidth: 1,
+  },
+  testResultSuccess: {
+    backgroundColor: colors.success + '15',
+    borderColor: colors.success + '40',
+  },
+  testResultError: {
+    backgroundColor: colors.error + '15',
+    borderColor: colors.error + '40',
+  },
+  testResultText: {
+    marginLeft: 8,
+    fontSize: 13,
+    flex: 1,
+  },
+  buttonContainer: {
+    marginTop: 12,
+    gap: 10, 
+  },
+  buttonIcon: {
+    marginRight: 6,
+  },
+  saveButton: {
+    backgroundColor: colors.primary,
+    borderRadius: 8,
+    paddingVertical: 12,
+    paddingHorizontal: 12,
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  saveButtonDisabled: {
+    backgroundColor: colors.elevation2, 
+    opacity: 0.8,
+  },
+  saveButtonText: {
+    color: colors.white,
+    fontSize: 15,
+    fontWeight: '600',
+  },
+  clearButton: {
+    backgroundColor: 'transparent',
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: colors.error + '40',
+    paddingVertical: 12,
+    paddingHorizontal: 12,
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  clearButtonDisabled: {
+    borderColor: colors.border,
+  },
+  clearButtonText: {
+    color: colors.error,
+    fontSize: 15,
+    fontWeight: '600',
+  },
+  clearButtonTextDisabled: {
+    color: colors.darkGray,
+  },
+  infoHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  infoHeaderText: {
+    fontSize: 15,
+    fontWeight: '600',
+    color: colors.white,
+    marginLeft: 8,
+  },
+  infoSteps: {
+    marginBottom: 12,
+    gap: 6, 
+  },
+  infoStep: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+  },
+  infoStepNumber: {
+    fontSize: 13,
+    color: colors.mediumGray,
+    width: 20,
+  },
+  infoStepText: {
+    color: colors.mediumGray,
+    fontSize: 13,
+    flex: 1,
+    lineHeight: 18,
+  },
+  boldText: {
+    fontWeight: '600',
+    color: colors.lightGray,
+  },
+  websiteButton: {
+    backgroundColor: colors.primary + '20',
+    borderRadius: 8,
+    paddingVertical: 12,
+    paddingHorizontal: 12,
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginTop: 12,
+  },
+  websiteButtonText: {
+    color: colors.primary,
+    fontSize: 15,
+    fontWeight: '600',
+  },
+  websiteButtonDisabled: {
+    backgroundColor: colors.elevation1,
+  },
+  websiteButtonTextDisabled: {
+    color: colors.darkGray,
+  },
+  sectionDescription: {
+    fontSize: 13,
+    color: colors.mediumGray,
+    marginBottom: 12,
+  },
+  providerItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border,
+  },
+  providerInfo: {
+    flex: 1,
+  },
+  providerName: {
+    fontSize: 15,
+    color: colors.white,
+    fontWeight: '500',
+  },
+  masterToggleContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 4,
+  },
+  masterToggleInfo: {
+    flex: 1,
+  },
+  masterToggleTitle: {
+    fontSize: 15,
+    color: colors.white,
+    fontWeight: '600',
+  },
+  masterToggleDescription: {
+    fontSize: 13,
+    color: colors.mediumGray,
+    marginTop: 2,
+  },
+  disabledCard: {
+    opacity: 0.7,
+  },
+  disabledInput: {
+    borderColor: colors.border,
+    backgroundColor: colors.elevation1,
+  },
+  disabledText: {
+    color: colors.darkGray,
+  },
+  disabledBoldText: {
+    color: colors.darkGray,
+  },
+  darkGray: {
+    color: colors.darkGray || '#555555',
+  },
+});
+
 const MDBListSettingsScreen = () => {
   const navigation = useNavigation();
+  const { currentTheme } = useTheme();
+  const colors = currentTheme.colors;
+  const styles = createStyles(colors);
+  
   const [apiKey, setApiKey] = useState('');
   const [isLoading, setIsLoading] = useState(true);
   const [isKeySet, setIsKeySet] = useState(false);
@@ -523,302 +827,4 @@ const MDBListSettingsScreen = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: colors.darkBackground,
-  },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingTop: Platform.OS === 'android' ? ANDROID_STATUSBAR_HEIGHT + 8 : 8,
-  },
-  backButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 8,
-  },
-  backText: {
-    fontSize: 17,
-    fontWeight: '400',
-    color: colors.primary,
-    marginLeft: 0,
-  },
-  headerTitle: {
-    fontSize: 34,
-    fontWeight: '700',
-    color: colors.white,
-    paddingHorizontal: 16,
-    paddingBottom: 16,
-    paddingTop: 8,
-  },
-  content: {
-    flex: 1,
-  },
-  scrollContent: {
-    paddingHorizontal: 12,
-    paddingTop: 10,
-    paddingBottom: 20,
-  },
-  loadingContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: colors.darkBackground,
-  },
-  loadingText: {
-    marginTop: 12,
-    fontSize: 15,
-    color: colors.mediumGray,
-  },
-  card: {
-    backgroundColor: colors.elevation2,
-    borderRadius: 10,
-    padding: 12,
-    marginBottom: 16,
-  },
-  statusCard: {
-    backgroundColor: colors.elevation1,
-    borderRadius: 10,
-    paddingVertical: 12,
-    paddingHorizontal: 16,
-    marginBottom: 16,
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderWidth: 1,
-    borderColor: colors.border,
-  },
-  infoCard: {
-    backgroundColor: colors.elevation1,
-    borderRadius: 10,
-    padding: 12,
-  },
-  statusIcon: {
-    marginRight: 12,
-  },
-  statusTextContainer: {
-    flex: 1,
-  },
-  statusTitle: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: colors.white,
-    marginBottom: 2,
-  },
-  statusDescription: {
-    fontSize: 13,
-    color: colors.mediumGray,
-    lineHeight: 18,
-  },
-  sectionTitle: {
-    fontSize: 15,
-    fontWeight: '600',
-    color: colors.lightGray,
-    marginBottom: 10,
-  },
-  inputWrapper: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: colors.elevation2,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: colors.border,
-  },
-  input: {
-    flex: 1,
-    paddingVertical: 10,
-    paddingHorizontal: 10,
-    color: colors.white,
-    fontSize: 15,
-  },
-  inputFocused: {
-    borderColor: colors.primary,
-  },
-  pasteButton: {
-    padding: 8,
-    marginRight: 2,
-  },
-  testResultContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: 8,
-    paddingHorizontal: 10,
-    borderRadius: 6,
-    marginTop: 10,
-    borderWidth: 1,
-  },
-  testResultSuccess: {
-    backgroundColor: colors.success + '15',
-    borderColor: colors.success + '40',
-  },
-  testResultError: {
-    backgroundColor: colors.error + '15',
-    borderColor: colors.error + '40',
-  },
-  testResultText: {
-    marginLeft: 8,
-    fontSize: 13,
-    flex: 1,
-  },
-  buttonContainer: {
-    marginTop: 12,
-    gap: 10, 
-  },
-  buttonIcon: {
-    marginRight: 6,
-  },
-  saveButton: {
-    backgroundColor: colors.primary,
-    borderRadius: 8,
-    paddingVertical: 12,
-    paddingHorizontal: 12,
-    alignItems: 'center',
-    flexDirection: 'row',
-    justifyContent: 'center',
-  },
-  saveButtonDisabled: {
-    backgroundColor: colors.elevation2, 
-    opacity: 0.8,
-  },
-  saveButtonText: {
-    color: colors.white,
-    fontSize: 15,
-    fontWeight: '600',
-  },
-  clearButton: {
-    backgroundColor: 'transparent',
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: colors.error + '40',
-    paddingVertical: 12,
-    paddingHorizontal: 12,
-    alignItems: 'center',
-    flexDirection: 'row',
-    justifyContent: 'center',
-  },
-  clearButtonDisabled: {
-    borderColor: colors.border,
-  },
-  clearButtonText: {
-    color: colors.error,
-    fontSize: 15,
-    fontWeight: '600',
-  },
-  clearButtonTextDisabled: {
-    color: colors.darkGray,
-  },
-  infoHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 10,
-  },
-  infoHeaderText: {
-    fontSize: 15,
-    fontWeight: '600',
-    color: colors.white,
-    marginLeft: 8,
-  },
-  infoSteps: {
-    marginBottom: 12,
-    gap: 6, 
-  },
-  infoStep: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-  },
-  infoStepNumber: {
-    fontSize: 13,
-    color: colors.mediumGray,
-    width: 20,
-  },
-  infoStepText: {
-    color: colors.mediumGray,
-    fontSize: 13,
-    flex: 1,
-    lineHeight: 18,
-  },
-  boldText: {
-    fontWeight: '600',
-    color: colors.lightGray,
-  },
-  websiteButton: {
-    backgroundColor: colors.primary + '20',
-    borderRadius: 8,
-    paddingVertical: 12,
-    paddingHorizontal: 12,
-    alignItems: 'center',
-    flexDirection: 'row',
-    justifyContent: 'center',
-    marginTop: 12,
-  },
-  websiteButtonText: {
-    color: colors.primary,
-    fontSize: 15,
-    fontWeight: '600',
-  },
-  websiteButtonDisabled: {
-    backgroundColor: colors.elevation1,
-  },
-  websiteButtonTextDisabled: {
-    color: colors.darkGray,
-  },
-  sectionDescription: {
-    fontSize: 13,
-    color: colors.mediumGray,
-    marginBottom: 12,
-  },
-  providerItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingVertical: 12,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.border,
-  },
-  providerInfo: {
-    flex: 1,
-  },
-  providerName: {
-    fontSize: 15,
-    color: colors.white,
-    fontWeight: '500',
-  },
-  masterToggleContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingVertical: 4,
-  },
-  masterToggleInfo: {
-    flex: 1,
-  },
-  masterToggleTitle: {
-    fontSize: 15,
-    color: colors.white,
-    fontWeight: '600',
-  },
-  masterToggleDescription: {
-    fontSize: 13,
-    color: colors.mediumGray,
-    marginTop: 2,
-  },
-  disabledCard: {
-    opacity: 0.7,
-  },
-  disabledInput: {
-    borderColor: colors.border,
-    backgroundColor: colors.elevation1,
-  },
-  disabledText: {
-    color: colors.darkGray,
-  },
-  disabledBoldText: {
-    color: colors.darkGray,
-  },
-  darkGray: {
-    color: colors.darkGray || '#555555',
-  },
-});
-
 export default MDBListSettingsScreen; 
\ No newline at end of file