diff --git a/assets/images/check.png b/assets/images/check.png
deleted file mode 100644
index 9c84c860..00000000
Binary files a/assets/images/check.png and /dev/null differ
diff --git a/assets/images/chevron.png b/assets/images/chevron.png
deleted file mode 100644
index 1a62e0c4..00000000
Binary files a/assets/images/chevron.png and /dev/null differ
diff --git a/assets/images/close.png b/assets/images/close.png
deleted file mode 100644
index 3c38ff31..00000000
Binary files a/assets/images/close.png and /dev/null differ
diff --git a/assets/images/search.png b/assets/images/search.png
deleted file mode 100644
index 3cb1c410..00000000
Binary files a/assets/images/search.png and /dev/null differ
diff --git a/components/Icons.js b/components/Icons.js
new file mode 100644
index 00000000..f117e0dc
--- /dev/null
+++ b/components/Icons.js
@@ -0,0 +1,45 @@
+import React from "react";
+import AntDesign from "react-native-vector-icons/AntDesign";
+import FontAwesome from "react-native-vector-icons/FontAwesome";
+import FontAwesome5 from "react-native-vector-icons/FontAwesome5";
+import Ionicons from "react-native-vector-icons/Ionicons";
+import Feather from "react-native-vector-icons/Feather";
+import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
+import Entypo from "react-native-vector-icons/Entypo";
+import MaterialIcons from "react-native-vector-icons/MaterialIcons";
+import SimpleLineIcons from "react-native-vector-icons/SimpleLineIcons";
+import Octicons from "react-native-vector-icons/Octicons";
+import Foundation from "react-native-vector-icons/Foundation";
+import Fontisto from "react-native-vector-icons/Fontisto";
+export const Icons = {
+  MaterialCommunityIcons,
+  MaterialIcons,
+  Ionicons,
+  Feather,
+  FontAwesome,
+  FontAwesome5,
+  AntDesign,
+  Entypo,
+  SimpleLineIcons,
+  Octicons,
+  Foundation,
+  Fontisto,
+};
+const Icon = ({ type, name, color, size = 24, style, onPress }) => {
+  const fontSize = 24;
+  const Tag = type;
+  return (
+    <>
+      {type && name && (
+        <Tag
+          name={name}
+          size={size || fontSize}
+          color={color}
+          style={style}
+          onPress={onPress}
+        />
+      )}
+    </>
+  );
+};
+export default Icon;
diff --git a/components/SelectList.tsx b/components/SelectList.tsx
index 234a7e10..688c3223 100644
--- a/components/SelectList.tsx
+++ b/components/SelectList.tsx
@@ -1,263 +1,281 @@
-import React from 'react';
-import {
-    View,
-    Text,
-    StyleSheet,
-    Image,
-    TouchableOpacity,
-    ScrollView,
-    Animated,
-    TextInput,
-    Keyboard
-} from 'react-native';
-
-import { SelectListProps } from '..';
-
-type L1Keys = { key?: any; value?: any; disabled?: boolean | undefined }
-
-const SelectList: React.FC<SelectListProps> =  ({
-        setSelected,
-        placeholder,
-        boxStyles,
-        inputStyles,
-        dropdownStyles,
-        dropdownItemStyles,
-        dropdownTextStyles,
-        maxHeight,
-        data,
-        defaultOption,
-        searchicon = false,
-        arrowicon = false,
-        closeicon = false,
-        search = true,
-        searchPlaceholder = "search",
-        notFoundText = "No data found",
-        disabledItemStyles,
-        disabledTextStyles,
-        onSelect = () => {},
-        save = 'key',
-        dropdownShown = false,
-        fontFamily
-    }) => {
+// SelectList.tsx
 
-    const oldOption = React.useRef(null)
-    const [_firstRender,_setFirstRender] = React.useState<boolean>(true);
-    const [dropdown, setDropdown] = React.useState<boolean>(dropdownShown);
-    const [selectedval, setSelectedVal] = React.useState<any>("");
-    const [height,setHeight] = React.useState<number>(200)
-    const animatedvalue = React.useRef(new Animated.Value(0)).current;
-    const [filtereddata,setFilteredData] = React.useState(data)
+import React, { useState, useRef, useEffect } from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+  Animated,
+  TextInput,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
+} from "react-native";
+import Icon, { Icons } from "./Icons";
 
+interface Option {
+  key?: string | number;
+  value: string;
+  disabled?: boolean;
+}
 
-    const slidedown = () => {
-        setDropdown(true)
-        Animated.timing(animatedvalue,{
-            toValue:height,
-            duration:500,
-            useNativeDriver:false,
-            
-        }).start()
-    }
-    const slideup = () => {
-        
-        Animated.timing(animatedvalue,{
-            toValue:0,
-            duration:500,
-            useNativeDriver:false,
-            
-        }).start(() => setDropdown(false))
-    }
+interface SelectListProps {
+  setSelected: (value: string | number) => void;
+  setTyped: (value: string) => void;
+  placeholder?: string;
+  boxStyles?: StyleProp<ViewStyle>;
+  inputStyles?: StyleProp<TextStyle>;
+  dropdownStyles?: StyleProp<ViewStyle>;
+  dropdownItemStyles?: StyleProp<ViewStyle>;
+  dropdownTextStyles?: StyleProp<TextStyle>;
+  maxHeight?: number;
+  data: Option[];
+  defaultOption?: Option;
+  searchIcon?: boolean;
+  arrowIcon?: boolean;
+  closeIcon?: boolean;
+  search?: boolean;
+  searchPlaceholder?: string;
+  notFoundText?: string;
+  disabledItemStyles?: StyleProp<ViewStyle>;
+  disabledTextStyles?: StyleProp<TextStyle>;
+  onSelect?: (value: string) => void;
+  save?: "key" | "value";
+  dropdownShown?: boolean;
+  fontFamily?: string;
+}
 
-    React.useEffect( () => {
-        if(maxHeight)
-            setHeight(maxHeight)
-    },[maxHeight])
+const SelectList: React.FC<SelectListProps> = ({
+  setSelected,
+  setTyped,
+  placeholder,
+  boxStyles,
+  inputStyles,
+  dropdownStyles,
+  dropdownItemStyles,
+  dropdownTextStyles,
+  maxHeight,
+  data,
+  defaultOption,
+  searchIcon = true,
+  arrowIcon = true,
+  closeIcon = true,
+  search = true,
+  searchPlaceholder = "Select from the list or input manually.",
+  notFoundText = "No data found",
+  disabledItemStyles,
+  disabledTextStyles,
+  onSelect = () => {},
+  save = "key",
+  dropdownShown = false,
+  fontFamily,
+}) => {
+  const oldOption = useRef<Option | null>(null);
+  const [dropdown, setDropdown] = useState<boolean>(dropdownShown);
+  const [selectedVal, setSelectedVal] = useState<string>("");
+  const [height, setHeight] = useState<number>(200);
+  const animatedValue = useRef(new Animated.Value(0)).current;
+  const [filteredData, setFilteredData] = useState<Option[]>(data);
+  const [inputValue, setInputValue] = useState<string>("");
 
-    
-    React.useEffect(() => {
-        setFilteredData(data);
-      },[data])
+  useEffect(() => {
+    if (maxHeight) setHeight(maxHeight);
+  }, [maxHeight]);
 
+  useEffect(() => {
+    setFilteredData(data);
+  }, [data]);
 
-    React.useEffect(() => {
-        if(_firstRender){
-          _setFirstRender(false);
-          return;
-        }
-        onSelect()
-    },[selectedval])
-  
+  useEffect(() => {
+    onSelect(selectedVal);
+    setTyped(selectedVal);
+  }, [selectedVal]);
 
-    React.useEffect(() => {
-        if(!_firstRender && defaultOption && oldOption.current != defaultOption.key ){
-            // oldOption.current != null
-            oldOption.current = defaultOption.key
-            setSelected(defaultOption.key);
-            setSelectedVal(defaultOption.value);
-        }
-        if(defaultOption && _firstRender && defaultOption.key != undefined){
-            
-            oldOption.current = defaultOption.key
-            setSelected(defaultOption.key);
-            setSelectedVal(defaultOption.value);
-        }
-        
-    },[defaultOption])
+  useEffect(() => {
+    if (defaultOption && oldOption.current !== defaultOption) {
+      oldOption.current = defaultOption;
+      setSelected(defaultOption.key ?? "");
+      setSelectedVal(defaultOption.value);
+    }
+  }, [defaultOption]);
 
-    React.useEffect(() => {
-        if(!_firstRender){
-            if(dropdownShown)
-                slidedown();
-            else
-                slideup();
-            
-        }
-        
-    },[dropdownShown])
+  useEffect(() => {
+    if (dropdownShown) slideDown();
+    else slideUp();
+  }, [dropdownShown]);
 
+  const slideDown = () => {
+    setDropdown(true);
+    Animated.timing(animatedValue, {
+      toValue: height,
+      duration: 500,
+      useNativeDriver: false,
+    }).start();
+  };
 
+  const slideUp = () => {
+    Animated.timing(animatedValue, {
+      toValue: 0,
+      duration: 500,
+      useNativeDriver: false,
+    }).start(() => setDropdown(false));
+  };
 
-    return(
-        <View>
-            {
-                (dropdown && search)
-                ?
-                    <View style={[styles.wrapper,boxStyles]}>
-                        <View style={{flexDirection:'row',alignItems:'center',flex:1}}> 
-                            {
-                                (!searchicon)
-                                ?
-                                <Image 
-                                    source={require('../assets/images/search.png')}
-                                    resizeMode='contain'
-                                    style={{width:20,height:20,marginRight:7}}
-                                />
-                                :
-                                searchicon
-                            }
-                            
-                            <TextInput 
-                                placeholder={searchPlaceholder}
-                                onChangeText={(val) => {
-                                    let result =  data.filter((item: L1Keys) => {
-                                        val.toLowerCase();
-                                        let row = item.value.toLowerCase()
-                                        return row.search(val.toLowerCase()) > -1;
-                                    });
-                                    setFilteredData(result)
-                                }}
-                                style={[{padding:0,height:20,flex:1,fontFamily},inputStyles]}
-                            />
-                                <TouchableOpacity onPress={() => slideup()} >
+  const handleInputValueChange = (val: string) => {
+    setInputValue(val);
+    const result = data.filter((item) => {
+      const row = item.value.toLowerCase();
+      return row.includes(val.toLowerCase());
+    });
+    setFilteredData(result);
+    if (!dropdown && val.trim() !== "") slideDown();
+  };
 
-                                {
-                                    (!closeicon)
-                                    ?
-                                        <Image 
-                                            source={require('../assets/images/close.png')}
-                                            resizeMode='contain'
-                                            style={{width:17,height:17}}
-                                        />
-                                    :
-                                        closeicon
-                                }
-                                   
-                                </TouchableOpacity>
-                                
-                           
-                        </View>
-                        
-                    </View>
-                :
-                    <TouchableOpacity style={[styles.wrapper,boxStyles]} onPress={() => { if(!dropdown){ Keyboard.dismiss(); slidedown() }else{ slideup() } }}>
-                        <Text style={[{fontFamily},inputStyles]}>{ (selectedval == "") ? (placeholder) ? placeholder : 'Select option' : selectedval  }</Text>
-                        {
-                            (!arrowicon)
-                            ?
-                                <Image 
-                                    source={require('../assets/images/chevron.png')}
-                                    resizeMode='contain'
-                                    style={{width:20,height:20}}
-                                />
-                            :
-                                arrowicon
-                        }
-                        
-                    </TouchableOpacity>
-            }
-            
-            {
-                (dropdown)
-                ?
-                    <Animated.View style={[{maxHeight:animatedvalue},styles.dropdown,dropdownStyles]}>
-                        <ScrollView  contentContainerStyle={{paddingVertical:10,overflow:'hidden'}} nestedScrollEnabled={true}>
+  const handleClearInput = () => {
+    setInputValue("");
+    setSelectedVal(defaultOption?.value || "");
+    setFilteredData(data);
+    slideUp();
+  };
 
-                            {
-                                (filtereddata.length >=  1)
-                                ?
-                                filtereddata.map((item: L1Keys,index: number) => {
-                                    let key = item.key ?? item.value ?? item;
-                                    let value = item.value ?? item;
-                                    let disabled = item.disabled ?? false;
-                                    if(disabled){
-                                        return(
-                                            <TouchableOpacity style={[styles.disabledoption,disabledItemStyles]} key={index} onPress={ () => {}}>
-                                                <Text style={[{color:'#c4c5c6',fontFamily},disabledTextStyles]}>{value}</Text>
-                                            </TouchableOpacity>
-                                        )
-                                    }else{
-                                        return(
-                                            <TouchableOpacity style={[styles.option,dropdownItemStyles]} key={index} onPress={ () => {
-                                                if(save === 'value'){
-                                                    setSelected(value);
-                                                }else{
-                                                    setSelected(key)
-                                                }
-                                                
-                                                setSelectedVal(value)
-                                                slideup()
-                                                setTimeout(() => {setFilteredData(data)}, 800)
-                                                
-                                            }}>
-                                                <Text style={[{fontFamily},dropdownTextStyles]}>{value}</Text>
-                                            </TouchableOpacity>
-                                        )
-                                    }
-                                    
-                                })
-                                :
-                                <TouchableOpacity style={[styles.option,dropdownItemStyles]} onPress={ () => {
-                                    setSelected(undefined)
-                                    setSelectedVal("")
-                                    slideup()
-                                    setTimeout(() => setFilteredData(data), 800)
-                                    
-                                }}>
-                                    <Text style={[{fontFamily},dropdownTextStyles]}>{notFoundText}</Text>
-                                </TouchableOpacity>
-                            }
-                            
-                            
-                            
-                        </ScrollView>
-                    </Animated.View>
-                :
-                null
-            }
-            
-            
+  return (
+    <View>
+      {dropdown && search ? (
+        <View style={[styles.wrapper, boxStyles]}>
+          <View style={{ flexDirection: "row", alignItems: "center", flex: 1 }}>
+            {searchIcon && (
+              <Icon
+                type={Icons.MaterialIcons}
+                name="search"
+                color="#000"
+                size={20}
+                style={{ marginRight: 7 }}
+              />
+            )}
+            <TextInput
+              placeholder={searchPlaceholder}
+              onChangeText={handleInputValueChange}
+              value={inputValue}
+              style={[
+                { padding: 0, height: 20, flex: 1, fontFamily },
+                inputStyles,
+              ]}
+            />
+            {closeIcon && (
+              <TouchableOpacity onPress={handleClearInput}>
+                <Icon
+                  type={Icons.MaterialIcons}
+                  name="close"
+                  color="#000"
+                  size={17}
+                />
+              </TouchableOpacity>
+            )}
+          </View>
         </View>
-    )
-}
-
-
-export default SelectList;
-
+      ) : (
+        <TouchableOpacity
+          style={[styles.wrapper, boxStyles]}
+          onPress={() => setDropdown(!dropdown)}
+        >
+          <Text
+            style={[
+              { fontFamily },
+              inputStyles,
+              dropdownTextStyles,
+              { flex: 1 },
+            ]}
+          >
+            {selectedVal || placeholder || "Select option"}
+          </Text>
+          {arrowIcon && (
+            <Icon
+              type={Icons.MaterialIcons}
+              name={dropdown ? "keyboard-arrow-up" : "keyboard-arrow-down"}
+              color="#000"
+              size={20}
+            />
+          )}
+        </TouchableOpacity>
+      )}
+      {dropdown && (
+        <Animated.View
+          style={[
+            { maxHeight: animatedValue },
+            styles.dropdown,
+            dropdownStyles,
+          ]}
+        >
+          <ScrollView
+            contentContainerStyle={{ paddingVertical: 10 }}
+            nestedScrollEnabled={true}
+          >
+            {filteredData.length >= 1 ? (
+              filteredData.map((item, index) => {
+                const key = item.key || item.value || index;
+                const value = item.value || item;
+                const disabled = item.disabled || false;
+                return (
+                  <TouchableOpacity
+                    key={index}
+                    style={[
+                      styles.option,
+                      disabled ? styles.disabledOption : null,
+                      dropdownItemStyles,
+                      disabled ? disabledItemStyles : null,
+                    ]}
+                    onPress={() => {
+                      setSelected(save === "value" ? value : key);
+                      setSelectedVal(value);
+                      slideUp();
+                    }}
+                  >
+                    <Text style={[{ fontFamily }, dropdownTextStyles]}>
+                      {value}
+                    </Text>
+                  </TouchableOpacity>
+                );
+              })
+            ) : (
+              <Text style={[{ fontFamily }, dropdownTextStyles]}>
+                {notFoundText}
+              </Text>
+            )}
+          </ScrollView>
+        </Animated.View>
+      )}
+    </View>
+  );
+};
 
 const styles = StyleSheet.create({
-    wrapper:{ borderWidth:1,borderRadius:10,borderColor:'gray',paddingHorizontal:20,paddingVertical:12,flexDirection:'row',justifyContent:'space-between' },
-    dropdown:{ borderWidth:1,borderRadius:10,borderColor:'gray',marginTop:10,overflow:'hidden'},
-    option:{ paddingHorizontal:20,paddingVertical:8,overflow:'hidden' },
-    disabledoption:{ paddingHorizontal:20,paddingVertical:8,flexDirection:'row',alignItems:'center', backgroundColor:'whitesmoke',opacity:0.9}
+  wrapper: {
+    borderWidth: 1,
+    borderRadius: 10,
+    borderColor: "gray",
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  dropdown: {
+    borderWidth: 1,
+    borderRadius: 10,
+    borderColor: "gray",
+    marginTop: 10,
+    overflow: "hidden",
+  },
+  option: {
+    paddingHorizontal: 20,
+    paddingVertical: 8,
+  },
+  disabledOption: {
+    backgroundColor: "whitesmoke",
+    opacity: 0.9,
+  },
+});
 
-})
+export default SelectList;