diff --git a/app/(explore)/category.tsx b/app/(explore)/category.tsx
index a22df9d..499c0c9 100644
--- a/app/(explore)/category.tsx
+++ b/app/(explore)/category.tsx
@@ -18,7 +18,7 @@ export default function CategoryScreen() {
     const colorScheme = useColorScheme() ?? 'light';
     const navigation = useNavigation();
     const [ description, setDescription ] = useState( '' );
-    const viewCategory = useSelector((state: any) => state.data.viewCategory);
+    const viewCategory = useSelector( (state: any) => state.data.viewCategory );
 
     // Load item from storage
     useEffect( () => {
@@ -43,6 +43,7 @@ export default function CategoryScreen() {
                     <RenderHtml
                         contentWidth={width}
                         source={source}
+                        baseStyle={{ color: Colors[ colorScheme ].text }}
                     />
                 </ThemedView>
             </ScrollView>
diff --git a/app/(settings)/notifications.tsx b/app/(settings)/notifications.tsx
index 41888a7..227da66 100644
--- a/app/(settings)/notifications.tsx
+++ b/app/(settings)/notifications.tsx
@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import { SafeAreaView, ScrollView, StyleSheet, Switch, TouchableOpacity, } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { DateTimePickerAndroid, DateTimePickerEvent } from '@react-native-community/datetimepicker';
-import Ionicons from '@expo/vector-icons/Ionicons';
 import { useSelector } from 'react-redux';
 
 import { Colors } from '@/lib/constants/Colors';
@@ -14,6 +13,7 @@ import { useToken } from '@/lib/context/AppProvider';
 import { Message } from '@/lib/services/message';
 import { store } from '@/lib/store/store';
 import { setSession } from '@/lib/store/dataStore';
+import { ThemedIcon } from '@/lib/components/ThemedIcon';
 
 export default function CategoryScreen() {
     const colorScheme = useColorScheme() ?? 'light';
@@ -166,7 +166,7 @@ export default function CategoryScreen() {
                             (
                                 <TouchableOpacity style={styles.listEdit} onPress={() => selectTime( 'dayBefore' )}>
                                     <ThemedText style={styles.listEditText}>Om {dayBefore}</ThemedText>
-                                    <Ionicons size={18} name="chevron-forward" style={styles.listEditIcon}/>
+                                    <ThemedIcon size={18} name="chevron-forward" style={styles.listEditIcon}/>
                                 </TouchableOpacity>
                             ) :
                             (
@@ -195,7 +195,7 @@ export default function CategoryScreen() {
                             (
                                 <TouchableOpacity style={styles.listEdit} onPress={() => selectTime( 'sameDay' )}>
                                     <ThemedText style={styles.listEditText}>Om {sameDay}</ThemedText>
-                                    <Ionicons size={18} name="chevron-forward" style={styles.listEditIcon}/>
+                                    <ThemedIcon size={18} name="chevron-forward" style={styles.listEditIcon}/>
                                 </TouchableOpacity>
                             ) :
                             (
diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx
index 7c092e5..28446b9 100644
--- a/app/(tabs)/index.tsx
+++ b/app/(tabs)/index.tsx
@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import { StyleSheet, ScrollView, SafeAreaView, View, StatusBar } from 'react-native';
 // @ts-ignore
 import CalendarPicker from 'react-native-calendar-picker';
-import Ionicons from '@expo/vector-icons/Ionicons';
 import { useIsFocused } from '@react-navigation/core';
 import { useSelector } from 'react-redux';
 import { LogLevel, OneSignal } from 'react-native-onesignal';
@@ -15,12 +14,13 @@ import { useToken } from '@/lib/context/AppProvider';
 import { Request } from '@/lib/services/request';
 import List from '@/lib/components/List';
 import { Message } from '@/lib/services/message';
+import { ThemedIcon } from '@/lib/components/ThemedIcon';
 
 export default function HomeScreen() {
     const colorScheme = useColorScheme() ?? 'light';
     const isFocused = useIsFocused();
-    const session = useSelector((state: any) => state.data.session);
-    const reloadCalendar = useSelector((state: any) => state.data.reloadCalendar);
+    const session = useSelector( (state: any) => state.data.session );
+    const reloadCalendar = useSelector( (state: any) => state.data.reloadCalendar );
     const { token, isLoading } = useToken();
     const [ name, setName ] = useState( ' ' ); // Default empty space to prevent layout shifting
     const [ dates, setDates ] = useState<any | null>( [] );
@@ -29,15 +29,15 @@ export default function HomeScreen() {
 
     const loadOneSignal = () => {
         // Remove this method to stop OneSignal Debugging
-        OneSignal.Debug.setLogLevel(LogLevel.Verbose);
+        OneSignal.Debug.setLogLevel( LogLevel.Verbose );
 
         // OneSignal Initialization
-        OneSignal.initialize("6ef15aa7-9dc0-4d8b-b6b1-e2005bcd3dc6");
+        OneSignal.initialize( "6ef15aa7-9dc0-4d8b-b6b1-e2005bcd3dc6" );
 
         // Request permission
-        OneSignal.Notifications.requestPermission(true).then(() => {
+        OneSignal.Notifications.requestPermission( true ).then( () => {
             // Retrieve one signal user token
-            OneSignal.User.pushSubscription.getIdAsync().then((notificationsToken) => {
+            OneSignal.User.pushSubscription.getIdAsync().then( (notificationsToken) => {
                 if (notificationsToken) {
                     Request.post( 'sessions/update', { token: token, notifications_token: notificationsToken } ).then( (response) => {
                         if (!response.success) {
@@ -45,22 +45,22 @@ export default function HomeScreen() {
                         }
                     } );
                 }
-            })
-        })
+            } )
+        } )
 
         // Disable loading again
-        setOnesignalLoaded(true);
+        setOnesignalLoaded( true );
     }
 
     // Load OneSignal
     useEffect( () => {
         loadOneSignal();
-    }, [onesignalLoaded] );
+    }, [ onesignalLoaded ] );
 
     // Load session
     useEffect( () => {
-        setName(session.name);
-    }, [session, isFocused]);
+        setName( session.name );
+    }, [ session, isFocused ] );
 
     useEffect( () => {
         if (token) {
@@ -108,11 +108,13 @@ export default function HomeScreen() {
                             enableDateChange={false}
                             customDatesStyles={dates}
                             todayTextStyle={styles.today}
+                            textStyle={{ color: Colors[ colorScheme ].text }}
+                            startFromMonday={true}
                             previousComponent={
-                                <Ionicons size={28} name="chevron-back"/>
+                                <ThemedIcon size={28} name="chevron-back"/>
                             }
                             nextComponent={
-                                <Ionicons size={28} name="chevron-forward"/>
+                                <ThemedIcon size={28} name="chevron-forward"/>
                             }
                             weekdays={[ "Zo", "Ma", "Di", "Woe", "Do", "Vrij", "Zat" ]}
                             months={[
diff --git a/app/(tabs)/settings.tsx b/app/(tabs)/settings.tsx
index c4d70f3..bd09dd9 100644
--- a/app/(tabs)/settings.tsx
+++ b/app/(tabs)/settings.tsx
@@ -8,7 +8,6 @@ import {
     Alert,
 } from 'react-native';
 import { useRouter } from 'expo-router';
-import Ionicons from '@expo/vector-icons/Ionicons';
 import { useSelector } from 'react-redux';
 
 import { ThemedText } from '@/lib/components/ThemedText';
@@ -21,10 +20,11 @@ import { Request } from '@/lib/services/request';
 import CustomModal from '@/lib/components/EditModal';
 import { store } from '@/lib/store/store';
 import { setSession, setReloadCalendar } from '@/lib/store/dataStore';
+import { ThemedIcon } from '@/lib/components/ThemedIcon';
 
 export default function SettingsScreen() {
     const colorScheme = useColorScheme() ?? 'light';
-    const { token, isLoading, setToken } = useToken();
+    const { token, setToken } = useToken();
     const session = useSelector( (state: any) => state.data.session );
     const router = useRouter();
 
@@ -128,37 +128,37 @@ export default function SettingsScreen() {
                     <ThemedView style={styles.listContainer}>
                         <ThemedView style={styles.listItem}>
                             <ThemedView style={styles.listTitle}>
-                                <Ionicons size={20} name="person-outline" style={styles.listIcon}/>
+                                <ThemedIcon name="person-outline" size={20} style={styles.listIcon}/>
                                 <ThemedText type="defaultSemiBold">Naam</ThemedText>
                             </ThemedView>
 
                             <TouchableOpacity style={styles.listEdit} onPress={() => setNameModalVisible( true )}>
                                 <ThemedText style={styles.listEditText}>{name}</ThemedText>
-                                <Ionicons size={18} name="chevron-forward" style={styles.listEditIcon}/>
+                                <ThemedIcon size={18} name="chevron-forward" style={styles.listEditIcon}/>
                             </TouchableOpacity>
                         </ThemedView>
 
                         <ThemedView style={styles.listItem}>
                             <ThemedView style={styles.listTitle}>
-                                <Ionicons size={20} name="trail-sign-outline" style={styles.listIcon}/>
+                                <ThemedIcon size={20} name="trail-sign-outline" style={styles.listIcon}/>
                                 <ThemedText type="defaultSemiBold">Adres</ThemedText>
                             </ThemedView>
 
                             <TouchableOpacity style={styles.listEdit} onPress={() => setAddressModalVisible( true )}>
                                 <ThemedText style={styles.listEditText}>{street} {houseNumber}. {city}</ThemedText>
-                                <Ionicons size={18} name="chevron-forward" style={styles.listEditIcon}/>
+                                <ThemedIcon size={18} name="chevron-forward" style={styles.listEditIcon}/>
                             </TouchableOpacity>
                         </ThemedView>
 
                         <ThemedView style={styles.listItem}>
                             <ThemedView style={styles.listTitle}>
-                                <Ionicons size={20} name="notifications-outline" style={styles.listIcon}/>
+                                <ThemedIcon size={20} name="notifications-outline" style={styles.listIcon}/>
                                 <ThemedText type="defaultSemiBold">Notificaties</ThemedText>
                             </ThemedView>
 
                             <TouchableOpacity style={styles.listEdit} onPress={() => router.push( '/(settings)/notifications' )}>
                                 <ThemedText style={styles.listEditText}>Wijzigen</ThemedText>
-                                <Ionicons size={18} name="chevron-forward" style={styles.listEditIcon}/>
+                                <ThemedIcon size={18} name="chevron-forward" style={styles.listEditIcon}/>
                             </TouchableOpacity>
                         </ThemedView>
                     </ThemedView>
diff --git a/lib/components/EditModal.tsx b/lib/components/EditModal.tsx
index 03efd55..c108c07 100644
--- a/lib/components/EditModal.tsx
+++ b/lib/components/EditModal.tsx
@@ -60,10 +60,11 @@ const CustomModal: React.FC<EditModalProps> = ({ title, visible, onClose, onSave
                     <ThemedView key={index} style={styles.inputContainer}>
                         {field.title && <ThemedText style={styles.inputTitle}>{field.title}</ThemedText>}
                         <TextInput
-                            style={styles.input}
+                            style={[styles.input, {color: Colors[ colorScheme ].text}]}
                             placeholder={field.placeholder}
                             onChangeText={(text) => handleInputChange( field.name, text )}
                             value={inputValues[ field.name ] || ''}
+                            placeholderTextColor={Colors[ colorScheme ].text}
                         />
                     </ThemedView>
 
diff --git a/lib/components/ThemedIcon.tsx b/lib/components/ThemedIcon.tsx
new file mode 100644
index 0000000..9f961d4
--- /dev/null
+++ b/lib/components/ThemedIcon.tsx
@@ -0,0 +1,13 @@
+// You can (explore) the built-in icon families and icons on the web at https://icons.expo.fyi/
+
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { type IconProps } from '@expo/vector-icons/build/createIconSet';
+import { type ComponentProps } from 'react';
+import { useColorScheme } from '@/lib/hooks/useColorScheme';
+import { Colors } from '@/lib/constants/Colors';
+
+export function ThemedIcon({ style, ...rest }: IconProps<ComponentProps<typeof Ionicons>['name']>) {
+    const colorScheme = useColorScheme() ?? 'light';
+
+    return <Ionicons color={Colors[ colorScheme ].text} style={[ style ]} {...rest} />;
+}