diff --git a/app/login.tsx b/app/login.tsx
index 761e2c8..9bb5aff 100644
--- a/app/login.tsx
+++ b/app/login.tsx
@@ -4,11 +4,17 @@ import { useAuth } from './contexts/AuthContext'
 import { Redirect } from 'expo-router';
 import { FontAwesome } from "@expo/vector-icons";
 import { Input } from '../components';
+import { useThemeColor } from '../hooks/hooks';
 
 export default function login() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("")
-  const {authState, onLogin} = useAuth();
+  const {authState, onLogin} = useAuth()
+  const backgroundColor = useThemeColor("backgroundColor")
+  const textColor = useThemeColor("primaryText");
+  const elementDefaultColor = useThemeColor("elementDefaultColor")
+
+
   // const {authState, onLogin} = useAuth();
   // useEffect(() => {
   //   login()
@@ -22,20 +28,24 @@ export default function login() {
 
   return (
       
-      <SafeAreaView style={{flex: 1, justifyContent: "center"}}>
+      <SafeAreaView style={{flex: 1, justifyContent: "center", backgroundColor: backgroundColor}}>
         {authState?.authenticated && 
         <Redirect href={"/"}></Redirect>}
           <Input
-              placeholder={'Email'}
+              placeholder={'Enter Email'}
               label='Email or Username'
-              leftIcon={<FontAwesome name="user" size={20} />}
+            labelColor={textColor}
+              leftIcon={<FontAwesome name="user" size={20} color={textColor} />}
               onChangeHandler={setEmail}
+              bgColor ={elementDefaultColor}
           />
           <Input
               placeholder={'Enter Password'}
               label='Password'
-              leftIcon={<FontAwesome name="key" size={20} />}
+            labelColor={textColor}
+            leftIcon={<FontAwesome name="key" size={20} color={textColor}/>}
               onChangeHandler={setPassword}
+              bgColor ={elementDefaultColor}
               secure = {true}
           />
           <Button title='login' onPress={login}></Button>
diff --git a/components/common/searchBar/SearchBar.tsx b/components/common/searchBar/SearchBar.tsx
index c39daad..c9a0968 100644
--- a/components/common/searchBar/SearchBar.tsx
+++ b/components/common/searchBar/SearchBar.tsx
@@ -10,7 +10,8 @@ export default function SearchBar(props: SearchBarProps) {
   const [isActive, setIsactive] = React.useState(false);
 
   const textColor = useThemeColor("interactiveText")
-  const backgroundColor = useThemeColor("containerColor");
+  const backgroundColor = useThemeColor("elementDefaultColor");
+
   const handleChange = (text:string) : void  =>  {
     if(text !== ""){
       if(!isActive){
@@ -23,9 +24,16 @@ export default function SearchBar(props: SearchBarProps) {
     }
   }
 
-//TODO: Handle textCancel
+  // cant apply the background color otherwise
+  const containerStyle = {
+    ...styles.container,
+    backgroundColor: backgroundColor // apply dynamic background color
+  };
+
+  //TODO: Handle textCancel
+  // changed styles.container to containerStyle
   return (
-    <View style={styles.container}>
+    <View style={containerStyle}>
         <TextInput onChangeText = {handleChange} style={[{fontSize: SIZES.normal, height: "100%"}, styles.TextInput]} autoCorrect={false} keyboardType='web-search' placeholder={props.placeholder}></TextInput>
       
         {isActive &&
@@ -45,7 +53,6 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     alignItems: "center",
     height: 40,
-    backgroundColor: backgroundColor,
     borderRadius: 10,
     paddingHorizontal: 10
   },
diff --git a/components/login/input.tsx b/components/login/input.tsx
index 6e6ec48..f131969 100644
--- a/components/login/input.tsx
+++ b/components/login/input.tsx
@@ -5,6 +5,7 @@ import { TextInputEndEditingEventData } from 'react-native/Libraries/Components/
 
 interface InputProps {
   label? : string,
+    labelColor?: string,
   outlined? : boolean,
   placeholder?: string, 
   leftIcon?: any, 
@@ -20,6 +21,7 @@ interface InputProps {
 
 function Input({
   label,
+    labelColor,
   outlined,
   placeholder,
   leftIcon,
@@ -32,13 +34,17 @@ function Input({
   errorColor,
   bgColor
 } : InputProps) {
+    const labelStyle = {
+        ...styles.label,
+        color: labelColor ? labelColor : 'black',
+    };
     const containerBorder = outlined ? styles.outlined : styles.standard
     if(numLines == undefined){
       numLines = 1
     }
     return (
         <View style={{padding:10}}>
-            <Text style={styles.label}>{label}</Text>
+            <Text style={labelStyle}>{label}</Text>
             <View 
                 style={[styles.container, containerBorder, {backgroundColor: bgColor ? bgColor : "white"}]}>
                     <View style={{paddingRight:10}}>{leftIcon}</View>