diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx
new file mode 100644
index 0000000..a2f1bc1
--- /dev/null
+++ b/app/(tabs)/_layout.tsx
@@ -0,0 +1,16 @@
+import { StyleSheet, Text, View } from "react-native";
+import React from "react";
+import { Tabs } from "expo-router";
+
+const layout = () => {
+	return (
+		<Tabs screenOptions={{ HeaderShown: false }}>
+			<Tabs.Screen name="trips" />
+			<Tabs.Screen name="stays" />
+		</Tabs>
+	);
+};
+
+export default layout;
+
+const styles = StyleSheet.create({});
diff --git a/app/(tabs)/stays/StayIndex.tsx b/app/(tabs)/stays/StayIndex.tsx
new file mode 100644
index 0000000..15e51cd
--- /dev/null
+++ b/app/(tabs)/stays/StayIndex.tsx
@@ -0,0 +1,61 @@
+import { StyleSheet, Text, View } from "react-native";
+import React, { useState } from "react";
+import Searchbar from "@/component/Searchbar";
+import Line from "@/component/Line";
+import StaysList from "@/component/StaysList";
+import stays from "@/data/stays";
+
+const StayIndex = () => {
+	const [search, setSearch] = useState("");
+	const displayStays = stays.filter((stay) => stay.name.toLowerCase().includes(search.toLowerCase()));
+	return (
+		<View style={styles.container}>
+			<Text style={styles.text}>Explore Stays</Text>
+			<Searchbar setSearch={setSearch} />
+			<View
+				style={{
+					flexDirection: "row",
+					gap: 10,
+					paddingLeft: 10,
+					paddingRight: 10,
+				}}>
+				<Line width={"50%"} color="#1abc9c" />
+				<Line width={"50%"} color="#1abc9c" />
+			</View>
+
+			<StaysList stays={displayStays} />
+		</View>
+	);
+};
+
+export default StayIndex;
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		backgroundColor: "white",
+	},
+	text: {
+		fontSize: 20,
+		fontWeight: "bold",
+		textAlign: "center",
+		marginTop: 10,
+	},
+
+	line: {
+		borderWidth: 1,
+		borderColor: "white",
+		borderRadius: 10,
+		alignItems: "center",
+		backgroundColor: "white",
+		width: "90%",
+		height: 10,
+		marginTop: 20,
+	},
+	textContainer: {
+		padding: 20,
+		borderRadius: 10,
+		alignItems: "center",
+		backgroundColor: "white",
+	},
+});
diff --git a/app/(tabs)/stays/[StayDetails].tsx b/app/(tabs)/stays/[StayDetails].tsx
new file mode 100644
index 0000000..e640524
--- /dev/null
+++ b/app/(tabs)/stays/[StayDetails].tsx
@@ -0,0 +1,42 @@
+import { Image, StyleSheet, Text, View } from "react-native";
+import React from "react";
+import stays from "@/data/stays";
+import { useLocalSearchParams } from "expo-router";
+
+const StayDetails = () => {
+	const { StayDetails } = useLocalSearchParams();
+	const stay = stays.find((item) => `${item.id}` === StayDetails);
+	return (
+		<View style={styles.container}>
+			<Text style={styles.name}>{stay?.name}</Text>
+			<Image source={{ uri: stay?.img }} style={styles.image} />
+			<Text style={styles.text}>Location: {stay?.location}</Text>
+			<Text style={styles.text}>Price: ${stay?.price} / night</Text>
+			<Text style={styles.text}>Rating: {stay?.rating} / 5</Text>
+		</View>
+	);
+};
+
+export default StayDetails;
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		backgroundColor: "white",
+		padding: 20,
+		gap: 10,
+		alignItems: "center",
+	},
+	image: {
+		width: "100%",
+		height: 200,
+		borderRadius: 10,
+	},
+	name: {
+		fontSize: 20,
+		fontWeight: "bold",
+	},
+	text: {
+		fontSize: 16,
+	},
+});
diff --git a/app/(tabs)/stays/_layout.tsx b/app/(tabs)/stays/_layout.tsx
new file mode 100644
index 0000000..1741459
--- /dev/null
+++ b/app/(tabs)/stays/_layout.tsx
@@ -0,0 +1,11 @@
+import { StyleSheet, Text, View } from "react-native";
+import React from "react";
+import { Stack } from "expo-router";
+
+const layout = () => {
+	return <Stack />;
+};
+
+export default layout;
+
+const styles = StyleSheet.create({});
diff --git a/app/(tabs)/trips/TripIndex.tsx b/app/(tabs)/trips/TripIndex.tsx
new file mode 100644
index 0000000..cdd7451
--- /dev/null
+++ b/app/(tabs)/trips/TripIndex.tsx
@@ -0,0 +1,61 @@
+import { StyleSheet, Text, View } from "react-native";
+import React, { useState } from "react";
+import Searchbar from "@/component/Searchbar";
+import Line from "@/component/Line";
+import TripList from "@/component/TripList";
+import trips from "@/data/trips";
+
+const TripIndex = () => {
+	const [search, setSearch] = useState("");
+	const displaytrips = trips.filter((trip) => trip.name.toLowerCase().includes(search.toLowerCase()));
+	return (
+		<View style={styles.container}>
+			<Text style={styles.text}>Explore trips</Text>
+			<Searchbar setSearch={setSearch} />
+			<View
+				style={{
+					flexDirection: "row",
+					gap: 10,
+					paddingLeft: 10,
+					paddingRight: 10,
+				}}>
+				<Line width={"50%"} color="#1abc9c" />
+				<Line width={"50%"} color="#1abc9c" />
+			</View>
+
+			<TripList trips={displaytrips} />
+		</View>
+	);
+};
+
+export default TripIndex;
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		backgroundColor: "white",
+	},
+	text: {
+		fontSize: 20,
+		fontWeight: "bold",
+		textAlign: "center",
+		marginTop: 10,
+	},
+
+	line: {
+		borderWidth: 1,
+		borderColor: "white",
+		borderRadius: 10,
+		alignItems: "center",
+		backgroundColor: "white",
+		width: "90%",
+		height: 10,
+		marginTop: 20,
+	},
+	textContainer: {
+		padding: 20,
+		borderRadius: 10,
+		alignItems: "center",
+		backgroundColor: "white",
+	},
+});
diff --git a/app/(tabs)/trips/[TripDetails].tsx b/app/(tabs)/trips/[TripDetails].tsx
new file mode 100644
index 0000000..a753943
--- /dev/null
+++ b/app/(tabs)/trips/[TripDetails].tsx
@@ -0,0 +1,53 @@
+import { Image, StyleSheet, Text, View } from "react-native";
+import React from "react";
+import trips from "@/data/trips";
+import { Link, useLocalSearchParams } from "expo-router";
+
+const TripDetails = () => {
+	const { TripDetails } = useLocalSearchParams();
+	const trip = trips.find((item) => item.slug === TripDetails);
+	return (
+		<View style={styles.container}>
+			<Text style={styles.title}>{trip?.name}</Text>
+			<Image source={{ uri: trip?.img }} style={styles.image} />
+			<View style={styles.infoContainer}>
+				<Text style={styles.description}>City: {trip?.city}</Text>
+				<Text style={styles.description}>Length: {trip?.length1}KM</Text>
+				<Text style={styles.description}>Difficulty: {trip?.difficulty}</Text>
+				<Text style={styles.description}>Rating: {trip?.rating}</Text>
+			</View>
+
+			<Text style={styles.description}>{trip?.details}</Text>
+		</View>
+	);
+};
+
+export default TripDetails;
+
+const styles = StyleSheet.create({
+	container: {
+		padding: 10,
+		backgroundColor: "white",
+		flex: 1,
+	},
+	image: {
+		width: "100%",
+		height: 200,
+		borderRadius: 10,
+		marginBottom: 10,
+	},
+	title: {
+		fontSize: 20,
+		fontWeight: "bold",
+		marginBottom: 10,
+		textAlign: "center",
+	},
+	description: {
+		fontSize: 16,
+		marginBottom: 10,
+		textAlign: "center",
+	},
+	infoContainer: {
+		marginBottom: 10,
+	},
+});
diff --git a/app/(tabs)/trips/_layout.tsx b/app/(tabs)/trips/_layout.tsx
new file mode 100644
index 0000000..1741459
--- /dev/null
+++ b/app/(tabs)/trips/_layout.tsx
@@ -0,0 +1,11 @@
+import { StyleSheet, Text, View } from "react-native";
+import React from "react";
+import { Stack } from "expo-router";
+
+const layout = () => {
+	return <Stack />;
+};
+
+export default layout;
+
+const styles = StyleSheet.create({});
diff --git a/app/(tabs)/trips/index.tsx b/app/(tabs)/trips/index.tsx
new file mode 100644
index 0000000..8a986e7
--- /dev/null
+++ b/app/(tabs)/trips/index.tsx
@@ -0,0 +1,46 @@
+import DifficultyFilter from "@/component/DifficultyFilter";
+import Line from "@/component/Line";
+import Searchbar from "@/component/Searchbar";
+import TripList from "@/component/TripList";
+import trips from "@/data/trips";
+import { useState } from "react";
+import { Text, View, StyleSheet } from "react-native";
+
+export default function Index() {
+	const [search, setSearch] = useState("");
+	const displayTrips = trips.filter((trip) => trip.name.toLowerCase().includes(search.toLowerCase()));
+
+	return (
+		<View style={styles.container}>
+			<Text style={styles.text}>Explore Trips</Text>
+			<Searchbar setSearch={setSearch} />
+
+			<DifficultyFilter />
+
+			<View
+				style={{
+					flexDirection: "row",
+					gap: 10,
+					paddingLeft: 10,
+					paddingRight: 10,
+				}}>
+				<Line width={"50%"} color="#1abc9c" />
+				<Line width={"50%"} color="#1abc9c" />
+			</View>
+			<TripList trips={displayTrips} />
+		</View>
+	);
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		backgroundColor: "white",
+	},
+	text: {
+		fontSize: 20,
+		fontWeight: "bold",
+		textAlign: "center",
+		marginTop: 10,
+	},
+});
diff --git a/app/StayIndex.tsx b/app/StayIndex.tsx
deleted file mode 100644
index ba4ca64..0000000
--- a/app/StayIndex.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { StyleSheet, Text, View } from "react-native";
-import React, { useState } from "react";
-import Searchbar from "@/component/Searchbar";
-import Line from "@/component/Line";
-import StaysList from "@/component/StaysList";
-import stays from "@/data/stays";
-
-const StayIndex = () => {
-  const [search, setSearch] = useState("");
-  const displayStays = stays.filter((stay) =>
-    stay.name.toLowerCase().includes(search.toLowerCase())
-  );
-  return (
-    <View style={styles.container}>
-      <Text style={styles.text}>Explore Stays</Text>
-      <Searchbar setSearch={setSearch} />
-      <View
-        style={{
-          flexDirection: "row",
-          gap: 10,
-          paddingLeft: 10,
-          paddingRight: 10,
-        }}
-      >
-        <Line width={"50%"} color="#1abc9c" />
-        <Line width={"50%"} color="#1abc9c" />
-      </View>
-
-      <StaysList stays={displayStays} />
-    </View>
-  );
-};
-
-export default StayIndex;
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "white",
-  },
-  text: {
-    fontSize: 20,
-    fontWeight: "bold",
-    textAlign: "center",
-    marginTop: 10,
-  },
-
-  line: {
-    borderWidth: 1,
-    borderColor: "white",
-    borderRadius: 10,
-    alignItems: "center",
-    backgroundColor: "white",
-    width: "90%",
-    height: 10,
-    marginTop: 20,
-  },
-  textContainer: {
-    padding: 20,
-    borderRadius: 10,
-    alignItems: "center",
-    backgroundColor: "white",
-  },
-});
diff --git a/app/Staydetails.tsx b/app/Staydetails.tsx
deleted file mode 100644
index 0ce8b03..0000000
--- a/app/Staydetails.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Image, StyleSheet, Text, View } from "react-native";
-import React from "react";
-import stays from "@/data/stays";
-
-const StayDetails = () => {
-  const stay = stays[0];
-  return (
-    <View style={styles.container}>
-      <Text style={styles.name}>{stay?.name}</Text>
-      <Image source={{ uri: stay?.img }} style={styles.image} />
-      <Text style={styles.text}>Location: {stay?.location}</Text>
-      <Text style={styles.text}>Price: ${stay?.price} / night</Text>
-      <Text style={styles.text}>Rating: {stay?.rating} / 5</Text>
-    </View>
-  );
-};
-
-export default StayDetails;
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "white",
-    padding: 20,
-    gap: 10,
-    alignItems: "center",
-  },
-  image: {
-    width: "100%",
-    height: 200,
-    borderRadius: 10,
-  },
-  name: {
-    fontSize: 20,
-    fontWeight: "bold",
-  },
-  text: {
-    fontSize: 16,
-  },
-});
diff --git a/app/TripDetails.tsx b/app/TripDetails.tsx
deleted file mode 100644
index c5638e9..0000000
--- a/app/TripDetails.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Image, StyleSheet, Text, View } from "react-native";
-import React from "react";
-import trips from "@/data/trips";
-
-const TripDetails = () => {
-  const trip = trips[0];
-  return (
-    <View style={styles.container}>
-      <Text style={styles.title}>{trip?.name}</Text>
-      <Image source={{ uri: trip?.img }} style={styles.image} />
-      <View style={styles.infoContainer}>
-        <Text style={styles.description}>City: {trip?.city}</Text>
-        <Text style={styles.description}>Length: {trip?.length1}KM</Text>
-        <Text style={styles.description}>Difficulty: {trip?.difficulty}</Text>
-        <Text style={styles.description}>Rating: {trip?.rating}</Text>
-      </View>
-
-      <Text style={styles.description}>{trip?.details}</Text>
-    </View>
-  );
-};
-
-export default TripDetails;
-
-const styles = StyleSheet.create({
-  container: {
-    padding: 10,
-    backgroundColor: "white",
-    flex: 1,
-  },
-  image: {
-    width: "100%",
-    height: 200,
-    borderRadius: 10,
-    marginBottom: 10,
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: "bold",
-    marginBottom: 10,
-    textAlign: "center",
-  },
-  description: {
-    fontSize: 16,
-    marginBottom: 10,
-    textAlign: "center",
-  },
-  infoContainer: {
-    marginBottom: 10,
-  },
-});
diff --git a/app/_layout.tsx b/app/_layout.tsx
index a0bfe6f..8ffe514 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -1,9 +1,11 @@
+import { StyleSheet, Text, View } from "react-native";
+import React from "react";
 import { Stack } from "expo-router";
 
 export default function RootLayout() {
-  return <Stack />;
+	return <Stack />;
 }
 
 export const unstable_settings = {
-  initialRouteName: "index",
+	initialRouteName: "index",
 };
diff --git a/app/index.tsx b/app/index.tsx
index 54077b5..72665e3 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -1,49 +1,11 @@
-import DifficultyFilter from "@/component/DifficultyFilter";
-import Line from "@/component/Line";
-import Searchbar from "@/component/Searchbar";
-import TripList from "@/component/TripList";
-import trips from "@/data/trips";
-import { useState } from "react";
-import { Text, View, StyleSheet } from "react-native";
+import { StyleSheet, Text, View } from "react-native";
+import React from "react";
+import { Redirect } from "expo-router";
 
-export default function Index() {
-  const [search, setSearch] = useState("");
-  const displayTrips = trips.filter((trip) =>
-    trip.name.toLowerCase().includes(search.toLowerCase())
-  );
+const index = () => {
+	return <Redirect href="/trips/" />;
+};
 
-  return (
-    <View style={styles.container}>
-      <Text style={styles.text}>Explore Trips</Text>
-      <Searchbar setSearch={setSearch} />
+export default index;
 
-      <DifficultyFilter />
-
-      <View
-        style={{
-          flexDirection: "row",
-          gap: 10,
-          paddingLeft: 10,
-          paddingRight: 10,
-        }}
-      >
-        <Line width={"50%"} color="#1abc9c" />
-        <Line width={"50%"} color="#1abc9c" />
-      </View>
-      <TripList trips={displayTrips} />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "white",
-  },
-  text: {
-    fontSize: 20,
-    fontWeight: "bold",
-    textAlign: "center",
-    marginTop: 10,
-  },
-});
+const styles = StyleSheet.create({});
diff --git a/component/StayCard.tsx b/component/StayCard.tsx
index 06eab17..418238b 100644
--- a/component/StayCard.tsx
+++ b/component/StayCard.tsx
@@ -1,35 +1,38 @@
 import { Image, StyleSheet, Text, View } from "react-native";
 import React from "react";
+import { Link } from "expo-router";
 
 interface StayCardProps {
-  stay: {
-    id: number;
-    name: string;
-    img: string;
-    rating: number;
-    price: number;
-    location: string;
-  };
+	stay: {
+		id: number;
+		name: string;
+		img: string;
+		rating: number;
+		price: number;
+		location: string;
+	};
 }
 const StayCard = ({ stay }: StayCardProps) => {
-  return (
-    <View style={styles.container}>
-      <Image source={{ uri: stay.img }} style={styles.image} />
-    </View>
-  );
+	return (
+		<Link href={`/stays/${stay.id}`} asChild>
+			<View style={styles.container}>
+				<Image source={{ uri: stay.img }} style={styles.image} />
+			</View>
+		</Link>
+	);
 };
 
 export default StayCard;
 
 const styles = StyleSheet.create({
-  image: {
-    width: "100%",
-    height: 200,
-    borderRadius: 10,
-  },
-  container: {
-    margin: 10,
-    borderRadius: 10,
-    overflow: "hidden",
-  },
+	image: {
+		width: "100%",
+		height: 200,
+		borderRadius: 10,
+	},
+	container: {
+		margin: 10,
+		borderRadius: 10,
+		overflow: "hidden",
+	},
 });
diff --git a/component/StaysList.tsx b/component/StaysList.tsx
index 7ea0f27..a89edec 100644
--- a/component/StaysList.tsx
+++ b/component/StaysList.tsx
@@ -1,39 +1,38 @@
 import { FlatList, StyleSheet, Text, View } from "react-native";
 import React from "react";
-import TripCard from "./TripCard";
 import StayCard from "./StayCard";
 
 interface Stay {
-  id: number;
-  name: string;
-  img: string;
-  rating: number;
-  price: number;
-  location: string;
+	id: number;
+	name: string;
+	img: string;
+	rating: number;
+	price: number;
+	location: string;
 }
 
 const StaysList = ({ stays }: { stays: Stay[] }) => {
-  return (
-    <View style={styles.container}>
-      <FlatList
-        data={stays}
-        renderItem={({ item }) => <StayCard stay={item} />}
-        keyExtractor={(item) => item.id.toString()}
-        contentContainerStyle={styles.staysContainer}
-      />
-    </View>
-  );
+	return (
+		<View style={styles.container}>
+			<FlatList
+				data={stays}
+				renderItem={({ item }) => <StayCard stay={item} />}
+				keyExtractor={(item) => item.id.toString()}
+				contentContainerStyle={styles.staysContainer}
+			/>
+		</View>
+	);
 };
 
 export default StaysList;
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "white",
-  },
-  staysContainer: {
-    padding: 20,
-    backgroundColor: "white",
-  },
+	container: {
+		flex: 1,
+		backgroundColor: "white",
+	},
+	staysContainer: {
+		padding: 20,
+		backgroundColor: "white",
+	},
 });
diff --git a/component/TripCard.tsx b/component/TripCard.tsx
index 4f7d841..5054acd 100644
--- a/component/TripCard.tsx
+++ b/component/TripCard.tsx
@@ -1,39 +1,48 @@
 import { Image, StyleSheet, Text, View } from "react-native";
 import React from "react";
+import { Link } from "expo-router";
 
 interface TripCardProps {
-  trip: {
-    id: number;
-    name: string;
-    city: string;
-    slug: string;
-    length1: string;
-    difficulty: string;
-    details: string;
-    img: string;
-    rating: string;
-  };
+	trip: {
+		id: number;
+		name: string;
+		city: string;
+		slug: string;
+		length1: string;
+		difficulty: string;
+		details: string;
+		img: string;
+		rating: string;
+	};
 }
 
 const TripCard = ({ trip }: TripCardProps) => {
-  return (
-    <View style={styles.container}>
-      <Image source={{ uri: trip.img }} style={styles.image} />
-    </View>
-  );
+	return (
+		// <Link
+		// 	href={{
+		// 		pathname: "/trips/[TripDetails]",
+		// 		params: { TripDetails: trip.id, City: trip.city, Length: trip.length1, Difficulty: trip.difficulty, Rating: trip.rating },
+		// 	}}
+		// 	asChild>
+		<Link href={`/trips/${trip.slug}`} asChild>
+			<View style={styles.container}>
+				<Image source={{ uri: trip.img }} style={styles.image} />
+			</View>
+		</Link>
+	);
 };
 
 export default TripCard;
 
 const styles = StyleSheet.create({
-  image: {
-    width: "100%",
-    height: 200,
-    borderRadius: 10,
-  },
-  container: {
-    margin: 10,
-    borderRadius: 10,
-    overflow: "hidden",
-  },
+	image: {
+		width: "100%",
+		height: 200,
+		borderRadius: 10,
+	},
+	container: {
+		margin: 10,
+		borderRadius: 10,
+		overflow: "hidden",
+	},
 });