diff --git a/app/_layout.tsx b/app/_layout.tsx
index ff2bddf..793145b 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -1,11 +1,32 @@
 import { Stack } from "expo-router";
 
 import { SafeAreaProvider } from "react-native-safe-area-context";
+import { Image, View } from "react-native";
 
+function LogoTitle() {
+  return (
+    <View>
+      <Image
+        style={{ width: 50, height: 50 }}
+        source={require("../assets/logo.png")}
+      />
+    </View>
+  );
+}
 export default function RootLayout() {
   return (
     <SafeAreaProvider>
-      <Stack initialRouteName="index" />
+      <Stack
+        initialRouteName="index"
+        screenOptions={{
+          headerStyle: { backgroundColor: "black" },
+          headerTintColor: "#fff",
+          headerTitleStyle: {
+            fontWeight: "bold",
+          },
+          headerTitle: () => <LogoTitle />,
+        }}
+      />
     </SafeAreaProvider>
   );
 }
diff --git a/app/components/AppTextInput.js b/app/components/AppTextInput.js
new file mode 100644
index 0000000..bcb0701
--- /dev/null
+++ b/app/components/AppTextInput.js
@@ -0,0 +1,61 @@
+import React from "react";
+import { View, TextInput, StyleSheet, TouchableOpacity } from "react-native";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+
+function AppTextInput({
+  icon,
+  hiddenIcon,
+  onPress,
+  width = "100%",
+  ...otherProps
+}) {
+  return (
+    <View style={[styles.container, { width: "100%" }]}>
+      <View style={{ flexDirection: "row" }}>
+        <MaterialCommunityIcons
+          name={icon}
+          size={25}
+          color={"#848d937f"}
+          style={styles.icon}
+        />
+
+        <TextInput
+          placeholderTextColor={"#848d937f"}
+          style={styles.text}
+          {...otherProps}
+        />
+      </View>
+      {hiddenIcon && (
+        <TouchableOpacity onPress={onPress}>
+          <MaterialCommunityIcons
+            name={hiddenIcon}
+            size={25}
+            color={"#848d937f"}
+          />
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: "black",
+    borderRadius: 8,
+    flexDirection: "row",
+    padding: 15,
+    marginVertical: 10,
+    borderWidth: 2,
+    borderColor: "#17b1f3",
+    justifyContent: "space-between",
+  },
+  icon: {
+    marginRight: 10,
+  },
+  text: {
+    fontSize: 18,
+    color: "#848d937f",
+  },
+});
+
+export default AppTextInput;
diff --git a/app/components/ErrorMessage.js b/app/components/ErrorMessage.js
new file mode 100644
index 0000000..90bbbdb
--- /dev/null
+++ b/app/components/ErrorMessage.js
@@ -0,0 +1,12 @@
+import React from "react";
+import { StyleSheet, Text } from "react-native";
+
+function ErrorMessage({ error }) {
+  return <Text style={styles.error}>{error}</Text>;
+}
+
+const styles = StyleSheet.create({
+  error: { color: "red", fontSize: 14 },
+});
+
+export default ErrorMessage;
diff --git a/app/data/games.js b/app/data/games.js
new file mode 100644
index 0000000..0eec85a
--- /dev/null
+++ b/app/data/games.js
@@ -0,0 +1,26 @@
+export const GAMES = [
+  {
+    id: 1,
+    name: "Clash Royale",
+  },
+  {
+    id: 2,
+    name: "Clash of Clans",
+  },
+  {
+    id: 3,
+    name: "Clash Mini",
+  },
+  {
+    id: 4,
+    name: "Tennis Clash",
+  },
+  {
+    id: 5,
+    name: "Clash Quest",
+  },
+  {
+    id: 6,
+    name: "Golf Clash",
+  },
+];
diff --git a/app/home/home.tsx b/app/home/home.tsx
index 099255e..39cb93a 100644
--- a/app/home/home.tsx
+++ b/app/home/home.tsx
@@ -1,8 +1,10 @@
-import { Link, Stack } from "expo-router";
+import { Link, Stack, useSearchParams } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 import { StyleSheet, Text, View } from "react-native";
 
 export default function Signup() {
+  const { email, gameSelected } = useSearchParams();
+
   const options = {
     title: "Home",
   };
@@ -10,7 +12,16 @@ export default function Signup() {
   return (
     <View style={styles.container}>
       <Stack.Screen options={options} />
-      <Text>Home</Text>
+      <View style={styles.headerContainer}>
+        <View style={{ flexDirection: "row" }}>
+          <Text style={styles.header}>User:</Text>
+          <Text style={styles.header}>{email}</Text>
+        </View>
+        <View style={{ flexDirection: "row" }}>
+          <Text style={styles.header}>Game Selected:</Text>
+          <Text style={styles.header}>{gameSelected}</Text>
+        </View>
+      </View>
     </View>
   );
 }
@@ -18,8 +29,19 @@ export default function Signup() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "#fff",
-    alignItems: "center",
-    justifyContent: "center",
+    backgroundColor: "black",
+    padding: 20,
+  },
+  headerContainer: {
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: "#17b1f3",
+    padding: 4,
+  },
+  header: {
+    color: "#17b1f3",
+    fontSize: 18,
+    textAlign: "center",
+    margin: 5,
   },
 });
diff --git a/app/onboarding/game-selection.tsx b/app/onboarding/game-selection.tsx
index 30c2641..8a289ca 100644
--- a/app/onboarding/game-selection.tsx
+++ b/app/onboarding/game-selection.tsx
@@ -1,18 +1,58 @@
-
-import { Link, Stack } from "expo-router";
-import { StyleSheet, Text, View } from "react-native";
+import React, { useState } from "react";
+import { Link, Stack, useRouter, useSearchParams } from "expo-router";
+import {
+  StyleSheet,
+  Text,
+  View,
+  FlatList,
+  TouchableOpacity,
+} from "react-native";
+import { GAMES } from "../data/games";
 
 export default function GameSelection() {
+  const { email } = useSearchParams();
+  const [gameSelected, setGameSelected] = useState("");
   const options = {
     title: "Game Selection",
   };
-
+  const router = useRouter();
+  function renderGameItem(item: any) {
+    return (
+      <TouchableOpacity onPress={() => setGameSelected(item.name)}>
+        <View
+          style={
+            gameSelected === item.name
+              ? [styles.gameContainer, { backgroundColor: "white" }]
+              : styles.gameContainer
+          }
+        >
+          <Text style={[styles.info, { fontWeight: "bold" }]}>{item.name}</Text>
+        </View>
+      </TouchableOpacity>
+    );
+  }
+  function handleNavigation() {
+    router.push("/home/home");
+    router.setParams({ email: email, gameSelected: gameSelected });
+  }
   return (
     <View style={styles.container}>
       <Stack.Screen options={options} />
-      <Link style={styles.button} href="/home/home" asChild>
-        <Text>to home</Text>
-      </Link>
+      <Text style={styles.header}>
+        Email : <Text style={styles.info}>{email}</Text>
+      </Text>
+      <FlatList
+        data={GAMES}
+        keyExtractor={(item) => item.id.toString()}
+        renderItem={({ item }) => renderGameItem(item)}
+      />
+
+      <TouchableOpacity
+        style={styles.button}
+        onPress={() => handleNavigation()}
+      >
+        <Text style={styles.buttonText}>HOME</Text>
+      </TouchableOpacity>
     </View>
   );
 }
@@ -20,14 +60,42 @@ export default function GameSelection() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "#fff",
+    backgroundColor: "black",
+    padding: 16,
+    justifyContent: "space-between",
+  },
+  header: {
+    fontSize: 16,
+    fontWeight: "bold",
+    color: "white",
+    marginBottom: 20,
+  },
+  info: {
+    color: "#17b1f3",
+    marginHorizontal: 20,
+  },
+  gameContainer: {
+    flex: 1,
     alignItems: "center",
-    justifyContent: "center",
+    borderColor: "#17b1f3",
+    borderWidth: 1,
+    borderRadius: 8,
+    marginVertical: 10,
+    padding: 8,
+  },
+  buttonText: {
+    marginBottom: 8,
+    fontSize: 18,
+    fontWeight: "bold",
+    color: "black",
+    fontFamily: "Roboto",
+    textAlign: "center",
+  },
+  button: {
+    borderWidth: 1,
+    padding: 10,
+    borderRadius: 10,
+    margin: 2,
+    backgroundColor: "#17b1f3",
   },
-	button: {
-		borderWidth: 1,
-		borderColor: 'black',
-		padding: 15,
-		borderRadius: 5,
-	}
 });
diff --git a/app/onboarding/signin.tsx b/app/onboarding/signin.tsx
new file mode 100644
index 0000000..475e65d
--- /dev/null
+++ b/app/onboarding/signin.tsx
@@ -0,0 +1,130 @@
+import React, { useEffect, useState } from "react";
+import { Link, Stack, useRouter } from "expo-router";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { Formik } from "formik";
+import * as Yup from "yup";
+import AppTextInput from "../components/AppTextInput";
+import ErrorMessage from "../components/ErrorMessage";
+
+const validationSchema = Yup.object().shape({
+  email: Yup.string().required().email().label("Email"),
+  password: Yup.string().required().min(6).label("Password"),
+});
+
+const signin = (props: any) => {
+  const [visible, setVisible] = useState(false);
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const router = useRouter();
+  const options = {
+    title: "Sign in",
+  };
+  function onShowPasswordHandler() {
+    visible ? setVisible(false) : setVisible(true);
+  }
+
+  function handleNavigation({ email, password }) {
+    console.log(email, password);
+    setIsAuthenticated(true);
+    router.push("/onboarding/game-selection");
+    router.setParams({ email: email, password: password });
+  }
+  return (
+    <View style={styles.container}>
+      <Stack.Screen options={options} />
+
+      <Formik
+        initialValues={{ email: "", password: "" }}
+        onSubmit={(values) => handleNavigation(values)}
+        validationSchema={validationSchema}
+      >
+        {({ handleChange, handleSubmit, errors, setFieldTouched, touched }) => (
+          <>
+            <View style={styles.rootContainer}>
+              <Text style={styles.title}>Sign In </Text>
+              <Text style={styles.subTitle}>Sign in with email</Text>
+
+              <View style={styles.inputContainer}>
+                <AppTextInput
+                  icon={"email"}
+                  autoCapitalize="none"
+                  autoCorrect={false}
+                  keyboardType="email-address"
+                  onBlur={() => setFieldTouched("email")}
+                  onChangeText={handleChange("email")}
+                  placeholder="Email"
+                  textContentType="emailAddress"
+                  hiddenIcon={null}
+                  onPress={null}
+                />
+                {touched.email && <ErrorMessage error={errors.email} />}
+                <AppTextInput
+                  icon={"lock"}
+                  autoCapitalize="none"
+                  autoCorrect={false}
+                  onChangeText={handleChange("password")}
+                  onBlur={() => setFieldTouched("password")}
+                  textContentType="password"
+                  placeholder="Password"
+                  secureTextEntry={visible ? false : true}
+                  hiddenIcon={"eye"}
+                  onPress={onShowPasswordHandler}
+                />
+                {touched.password && <ErrorMessage error={errors.password} />}
+              </View>
+            </View>
+
+            <TouchableOpacity
+              style={styles.button}
+              onPress={() => handleSubmit()}
+            >
+              <Text style={styles.buttonText}>SIGN IN</Text>
+            </TouchableOpacity>
+          </>
+        )}
+      </Formik>
+    </View>
+  );
+};
+
+export default signin;
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "black",
+    justifyContent: "space-between",
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "bold",
+    color: "white",
+    marginBottom: 2,
+  },
+  subTitle: {
+    fontSize: 14,
+    marginBottom: 20,
+    color: "#848d937f",
+  },
+  rootContainer: {
+    margin: 20,
+    flex: 1,
+  },
+  inputContainer: {
+    justifyContent: "center",
+    flex: 0.7,
+  },
+  buttonText: {
+    marginBottom: 8,
+    fontSize: 18,
+    fontWeight: "bold",
+    color: "black",
+    fontFamily: "Roboto",
+    textAlign: "center",
+  },
+  button: {
+    borderWidth: 1,
+    padding: 10,
+    borderRadius: 10,
+    margin: 25,
+    backgroundColor: "#17b1f3",
+  },
+});
diff --git a/app/onboarding/signup.tsx b/app/onboarding/signup.tsx
index 45c63f1..4480866 100644
--- a/app/onboarding/signup.tsx
+++ b/app/onboarding/signup.tsx
@@ -1,6 +1,6 @@
 import { Link, Stack } from "expo-router";
-import { StatusBar } from "expo-status-bar";
-import { StyleSheet, Text, View } from "react-native";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
 
 export default function Signup() {
   const options = {
@@ -10,9 +10,28 @@ export default function Signup() {
   return (
     <View style={styles.container}>
       <Stack.Screen options={options} />
-      <Link style={styles.button} href="/onboarding/game-selection" asChild>
-        <Text>to game selection</Text>
-      </Link>
+      <View style={styles.rootContainer}>
+        <Text style={styles.header}>
+          If you don't have an account, we will create one for you.
+        </Text>
+        <TouchableOpacity style={styles.button}>
+          <MaterialCommunityIcons
+            name={"email"}
+            size={25}
+            color={"#848d937f"}
+            style={styles.icon}
+          />
+          <Link
+            href={{
+              pathname: "/onboarding/signin",
+              params: { name: "Sign in" },
+            }}
+            asChild
+          >
+            <Text style={styles.text}>Sign in with email</Text>
+          </Link>
+        </TouchableOpacity>
+      </View>
     </View>
   );
 }
@@ -20,14 +39,38 @@ export default function Signup() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "#fff",
-    alignItems: "center",
-    justifyContent: "center",
+    backgroundColor: "black",
+    padding: 16,
+  },
+  rootContainer: {
+    margin: 10,
+  },
+  header: {
+    marginBottom: 30,
+    fontSize: 18,
+    fontWeight: "bold",
+    color: "white",
+  },
+  text: {
+    fontSize: 16,
+    fontWeight: "300",
+    color: "#848d937f",
+  },
+
+  button: {
+    borderWidth: 1,
+    borderColor: "white",
+    padding: 15,
+    borderRadius: 5,
+    flexDirection: "row",
+  },
+  icon: {
+    marginRight: 10,
   },
-	button: {
-		borderWidth: 1,
-		borderColor: 'black',
-		padding: 15,
-		borderRadius: 5,
-	}
 });
+
+{
+  /* <Link style={styles.button} href="/onboarding/game-selection" asChild>
+        <Text>to game selection</Text>
+      </Link> */
+}
diff --git a/app/onboarding/tips.tsx b/app/onboarding/tips.tsx
new file mode 100644
index 0000000..7c9d887
--- /dev/null
+++ b/app/onboarding/tips.tsx
@@ -0,0 +1,31 @@
+import * as React from "react";
+import { Text, View, StyleSheet } from "react-native";
+import { Link, Stack, useSearchParams } from "expo-router";
+
+const tips = (props: any) => {
+  const { email, password } = useSearchParams();
+  const options = {
+    title: "Tips",
+  };
+  return (
+    <View style={styles.container}>
+      <Stack.Screen options={options} />
+      <Link style={styles.button} href="/onboarding/signup" asChild>
+        <Text>to game selection</Text>
+      </Link>
+      <Text>{email}</Text>
+    </View>
+  );
+};
+
+export default tips;
+
+const styles = StyleSheet.create({
+  container: {},
+  button: {
+    borderWidth: 1,
+    borderColor: "black",
+    padding: 15,
+    borderRadius: 5,
+  },
+});
diff --git a/assets/logo.png b/assets/logo.png
new file mode 100644
index 0000000..179e289
Binary files /dev/null and b/assets/logo.png differ
diff --git a/package.json b/package.json
index 658c8e3..2adc55b 100644
--- a/package.json
+++ b/package.json
@@ -15,15 +15,18 @@
     "expo-linking": "~4.0.1",
     "expo-router": "^1.5.3",
     "expo-status-bar": "~1.4.4",
+    "formik": "^2.2.9",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.71.7",
     "react-native-safe-area-context": "4.5.0",
     "react-native-screens": "~3.20.0",
-    "react-native-web": "~0.18.10"
+    "react-native-web": "~0.18.10",
+    "yup": "^1.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
+    "@types/react-native": "^0.71.6",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.4"
   },