diff --git a/app/index.tsx b/app/index.tsx
index e87d717..6d097f5 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -1,17 +1,22 @@
 import PetList from "@/components/PetList";
-import { View, StyleSheet } from "react-native";
+import { useState } from "react";
+import { View, StyleSheet, Switch } from "react-native";
 
 export default function Index() {
-  return (
-    <View style={styles.container}>
-      <PetList />
-    </View>
-  );
+	// const [toggle, setToggle] = useState(false);
+
+	return (
+		<View style={styles.container}>
+			<PetList />
+
+			{/* <Switch value={toggle} onChange={() => setToggle(!toggle)} /> */}
+		</View>
+	);
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#f9e3be",
-  },
+	container: {
+		flex: 1,
+		backgroundColor: "#f9e3be",
+	},
 });
diff --git a/components/NewComponent.tsx b/components/NewComponent.tsx
new file mode 100644
index 0000000..1977318
--- /dev/null
+++ b/components/NewComponent.tsx
@@ -0,0 +1,35 @@
+// rnfs
+
+// reactNativeFunctionalComponentWithStyles (ES7+ React/Redux/React-Native snippets)
+
+// import { StyleSheet, Switch, Text, View } from 'react-native'
+// import React from 'react'
+
+// export default function () {
+//   return (
+//     <View>
+//       <Text></Text>
+//     </View>
+//   )
+// }
+
+// const styles = StyleSheet.create({})
+
+// rnfes
+
+// reactNativeFunctionalExportComponentWithStyles (ES7+ React/Redux/React-Native snippets)
+
+// import { StyleSheet, Text, View } from 'react-native'
+// import React from 'react'
+
+// const  = () => {
+//   return (
+//     <View>
+//       <Text></Text>
+//     </View>
+//   )
+// }
+
+// export default
+
+// const styles = StyleSheet.create({})
diff --git a/components/PetItem.tsx b/components/PetItem.tsx
index d03edb5..7bdc57f 100644
--- a/components/PetItem.tsx
+++ b/components/PetItem.tsx
@@ -1,109 +1,111 @@
 import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import React from "react";
+import React, { useState } from "react";
 
 interface PetItemProps {
-  pet: {
-    id: number;
-    name: string;
-    description: string;
-    type: string;
-    image: string;
-    image2: string;
-  };
+	pet: {
+		id: number;
+		name: string;
+		description: string;
+		type: string;
+		image: string;
+		image2: string;
+	};
 }
 
 const PetItem = ({ pet }: PetItemProps) => {
-  return (
-    <View style={styles.container}>
-      <View style={styles.petInfo}>
-        <Image source={{ uri: pet.image }} style={styles.image} />
+	const [imageUri, setImageUri] = useState(pet.image);
 
-        <Text style={styles.name}>{pet.name}</Text>
+	return (
+		<View style={styles.container}>
+			<View style={styles.petInfo}>
+				<Image source={{ uri: imageUri }} style={styles.image} />
 
-        <Text style={styles.description}>{pet.description}</Text>
-      </View>
+				<Text style={styles.name}>{pet.name}</Text>
 
-      <View style={styles.buttonContainer}>
-        <TouchableOpacity style={styles.petButton}>
-          <Text style={styles.buttonText}>Pet</Text>
-        </TouchableOpacity>
+				<Text style={styles.description}>{pet.description}</Text>
+			</View>
 
-        <TouchableOpacity style={styles.adoptButton}>
-          <Text style={styles.buttonText}>Adopt</Text>
-        </TouchableOpacity>
-      </View>
-    </View>
-  );
+			<View style={styles.buttonContainer}>
+				<TouchableOpacity style={styles.petButton} onPress={() => setImageUri(pet.image2)}>
+					<Text style={styles.buttonText}>Pet</Text>
+				</TouchableOpacity>
+
+				<TouchableOpacity style={styles.adoptButton}>
+					<Text style={styles.buttonText}>Adopt</Text>
+				</TouchableOpacity>
+			</View>
+		</View>
+	);
 };
 
 export default PetItem;
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    borderRadius: 10,
-    backgroundColor: "#f9e3be",
-    padding: 20,
-    margin: 10,
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 5,
-  },
-  image: {
-    width: 200,
-    height: 200,
-    borderRadius: 10,
-  },
-  petInfo: {
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 10,
-    marginBottom: 20,
-  },
-  text: {
-    fontSize: 16,
-    fontWeight: "bold",
-  },
-  name: {
-    fontSize: 18,
-    textAlign: "center",
-    color: "purple",
-    fontWeight: "bold",
-  },
-  description: {
-    fontSize: 16,
-    color: "black",
-    fontWeight: "light",
-  },
-  type: {
-    fontSize: 18,
-    fontWeight: "semibold",
-  },
-  buttonContainer: {
-    flexDirection: "row",
-    gap: 10,
-  },
-  petButton: {
-    backgroundColor: "#4ade80",
-    padding: 10,
-    borderRadius: 10,
-    width: "50%",
-    marginBottom: 10,
-  },
-  buttonText: {
-    textAlign: "center",
-    fontWeight: "bold",
-  },
-  adoptButton: {
-    backgroundColor: "#f43f5e",
-    padding: 10,
-    borderRadius: 10,
-    width: "50%",
-    marginBottom: 10,
-  },
+	container: {
+		flex: 1,
+		justifyContent: "center",
+		alignItems: "center",
+		borderRadius: 10,
+		backgroundColor: "#f9e3be",
+		padding: 20,
+		margin: 10,
+		shadowColor: "#000",
+		shadowOffset: { width: 0, height: 2 },
+		shadowOpacity: 0.25,
+		shadowRadius: 3.84,
+		elevation: 5,
+	},
+	image: {
+		width: 200,
+		height: 200,
+		borderRadius: 10,
+	},
+	petInfo: {
+		flexDirection: "column",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: 10,
+		marginBottom: 20,
+	},
+	text: {
+		fontSize: 16,
+		fontWeight: "bold",
+	},
+	name: {
+		fontSize: 18,
+		textAlign: "center",
+		color: "purple",
+		fontWeight: "bold",
+	},
+	description: {
+		fontSize: 16,
+		color: "black",
+		fontWeight: "light",
+	},
+	type: {
+		fontSize: 18,
+		fontWeight: "semibold",
+	},
+	buttonContainer: {
+		flexDirection: "row",
+		gap: 10,
+	},
+	petButton: {
+		backgroundColor: "#4ade80",
+		padding: 10,
+		borderRadius: 10,
+		width: "50%",
+		marginBottom: 10,
+	},
+	buttonText: {
+		textAlign: "center",
+		fontWeight: "bold",
+	},
+	adoptButton: {
+		backgroundColor: "#f43f5e",
+		padding: 10,
+		borderRadius: 10,
+		width: "50%",
+		marginBottom: 10,
+	},
 });
diff --git a/components/PetList.tsx b/components/PetList.tsx
index e0ebf42..b3fec0f 100644
--- a/components/PetList.tsx
+++ b/components/PetList.tsx
@@ -1,87 +1,92 @@
-import {
-  ScrollView,
-  StyleSheet,
-  Text,
-  TextInput,
-  TouchableOpacity,
-} from "react-native";
+import { ScrollView, StyleSheet, Text, TextInput, TouchableOpacity } from "react-native";
 import React, { useState } from "react";
 import pets from "@/data/pets";
 import PetItem from "./PetItem";
 
+type PetType = "All" | "Dog" | "Cat" | "Rabbit";
+
 const PetList = () => {
-  const petList = pets.map((pet) => <PetItem key={pet.id} pet={pet} />);
-  return (
-    <ScrollView
-      contentContainerStyle={styles.container}
-      style={styles.containerStyle}
-    >
-      {/* Search Input */}
-      <TextInput placeholder="Search for a pet" style={styles.searchInput} />
+	const [query, setQuery] = useState("");
+	const [type, setType] = useState<PetType>("All");
+
+	const filteredPets = pets.filter((pets) => pets.name.toLowerCase().includes(query.toLowerCase()));
+	const petList = filteredPets.map((pets) => <PetItem key={pets.id} pet={pets} />);
+
+	const categoryPets = filteredPets
+		.filter((pets) => pets.type.toLowerCase().includes(type.toLowerCase()))
+		.map((pet) => {
+			return <PetItem key={pet.id} pet={pet} />;
+		});
+
+	return (
+		<ScrollView contentContainerStyle={styles.container} style={styles.containerStyle}>
+			{/* Search Input */}
+			<TextInput placeholder="Search for a pet" style={styles.searchInput} onChangeText={(text) => setQuery(text)} value={query}></TextInput>
 
-      {/* Filter by type */}
-      <ScrollView horizontal contentContainerStyle={styles.filterContainer}>
-        <TouchableOpacity style={styles.filterButton}>
-          <Text>All</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={styles.filterButton}>
-          <Text>Cat</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={styles.filterButton}>
-          <Text>Dog</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={styles.filterButton}>
-          <Text>Rabbit</Text>
-        </TouchableOpacity>
-      </ScrollView>
+			{/* Filter by type */}
+			<ScrollView horizontal contentContainerStyle={styles.filterContainer}>
+				<TouchableOpacity style={styles.filterButton} onPress={() => setType("All")}>
+					<Text>All</Text>
+				</TouchableOpacity>
+				<TouchableOpacity style={styles.filterButton} onPress={() => setType("Cat")}>
+					<Text>Cat</Text>
+				</TouchableOpacity>
+				<TouchableOpacity style={styles.filterButton} onPress={() => setType("Dog")}>
+					<Text>Dog</Text>
+				</TouchableOpacity>
+				<TouchableOpacity style={styles.filterButton} onPress={() => setType("Rabbit")}>
+					<Text>Rabbit</Text>
+				</TouchableOpacity>
+			</ScrollView>
 
-      {/* Pet List */}
-      {petList}
-    </ScrollView>
-  );
+			{/* Pet List */}
+			{/* {petList} */}
+			{type === "All" ? petList : categoryPets}
+		</ScrollView>
+	);
 };
 
 export default PetList;
 
 const styles = StyleSheet.create({
-  container: {
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  containerStyle: {
-    backgroundColor: "#f9e3be",
-    paddingRight: 20,
-    paddingLeft: 20,
-    paddingBottom: 20,
-  },
-  searchInput: {
-    width: "100%",
-    borderWidth: 1,
-    borderRadius: 10,
-    padding: 10,
-    marginBottom: 10,
-    backgroundColor: "#fff",
-    borderColor: "#000",
-  },
-  filterTitle: {
-    fontSize: 18,
-    fontWeight: "bold",
-    marginBottom: 10,
-  },
-  filterContainer: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    width: "100%",
-    marginBottom: 10,
-  },
-  filterButton: {
-    backgroundColor: "#fff",
-    borderWidth: 1,
-    borderRadius: 10,
-    padding: 10,
-    width: "20%",
-    justifyContent: "center",
-    alignItems: "center",
-  },
+	container: {
+		justifyContent: "center",
+		alignItems: "center",
+	},
+	containerStyle: {
+		backgroundColor: "#f9e3be",
+		paddingRight: 20,
+		paddingLeft: 20,
+		paddingBottom: 20,
+	},
+	searchInput: {
+		width: "100%",
+		borderWidth: 1,
+		borderRadius: 10,
+		padding: 10,
+		marginBottom: 10,
+		backgroundColor: "#fff",
+		borderColor: "#000",
+	},
+	filterTitle: {
+		fontSize: 18,
+		fontWeight: "bold",
+		marginBottom: 10,
+	},
+	filterContainer: {
+		flexDirection: "row",
+		justifyContent: "space-between",
+		alignItems: "center",
+		width: "100%",
+		marginBottom: 10,
+	},
+	filterButton: {
+		backgroundColor: "#fff",
+		borderWidth: 1,
+		borderRadius: 10,
+		padding: 10,
+		width: "20%",
+		justifyContent: "center",
+		alignItems: "center",
+	},
 });