diff --git a/.gitignore b/.gitignore
index 0b37b6eb..49e60def 100644
--- a/.gitignore
+++ b/.gitignore
@@ -38,4 +38,4 @@ yarn-error.*
 # The following patterns were generated by expo-cli
 
 expo-env.d.ts
-# @end expo-cli
\ No newline at end of file
+# @end expo-cli
diff --git a/app.json b/app.json
index fc8f2537..d7e0cf0e 100644
--- a/app.json
+++ b/app.json
@@ -12,6 +12,7 @@
       "backgroundColor": "#ffffff"
     },
     "assetBundlePatterns": ["**/*"],
+    "userInterfaceStyle": "dark",
     "ios": {
       "supportsTablet": true,
       "infoPlist": {
diff --git a/app/_layout.tsx b/app/_layout.tsx
index 0a0930d4..adc6f701 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -102,6 +102,7 @@ function RootLayoutNav() {
         <Stack.Screen name="(auth)" options={{ headerShown: false }} />
         <Stack.Screen name="modal" options={{ presentation: "modal" }} />
         <Stack.Screen name="index" options={{ headerShown: false }} />
+        <Stack.Screen name="onBoarding" options={{ headerShown: false }} />
       </Stack>
       <ModalContainer />
     </>
diff --git a/app/onBoarding/FirstScreen.tsx b/app/onBoarding/FirstScreen.tsx
new file mode 100644
index 00000000..1b455c6f
--- /dev/null
+++ b/app/onBoarding/FirstScreen.tsx
@@ -0,0 +1,46 @@
+import React, {useContext, useState} from 'react'
+import {  StyleSheet, Text, View } from 'react-native'
+import { Colors } from '@/constants/Colors'
+import OnboardingComponent from '@/components/OnBoarding/OnboardingComponent';
+import { ThemeContext } from '@/ctx/ThemeContext';
+
+const image = require("../../assets/images/OnBoardingImages/firstLightImg.png")
+const darkImg = require("../../assets/images/OnBoardingImages/firstDarkImg.png")
+
+const FirstScreen = () => {
+    const {theme, changeTheme} = useContext(ThemeContext)
+
+   return (
+    <View style={styles.container}>
+          <OnboardingComponent 
+        image={theme === "dark" ? darkImg : image}
+        text="Thousands of    doctors & experts to help your health!"
+        action="Next"
+        direction="/onBoarding/SecondScreen"
+    >
+        <Text style={[styles.dots, {width: 30, backgroundColor: Colors.main.primary._500}]}></Text>
+        <Text style={styles.dots}></Text>
+        <Text style={styles.dots}></Text>
+    </OnboardingComponent>
+
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+
+    container: {
+        flex: 1,
+        alignItems: "center",
+    },
+
+    dots: {
+        width: 10,
+        height: 10,
+        backgroundColor: Colors.grayScale._300,
+        borderRadius: 100,
+        marginHorizontal: 3
+    },
+})
+
+export default FirstScreen
diff --git a/app/onBoarding/SecondScreen.tsx b/app/onBoarding/SecondScreen.tsx
new file mode 100644
index 00000000..67eca1c9
--- /dev/null
+++ b/app/onBoarding/SecondScreen.tsx
@@ -0,0 +1,45 @@
+import React, { useContext, useRef, useState } from 'react'
+import { View, StyleSheet, FlatList, Animated, Image, Pressable, Text, SafeAreaView } from 'react-native'
+import { Colors } from '@/constants/Colors'
+import OnboardingComponent from '@/components/OnBoarding/OnboardingComponent';
+import { ThemeContext } from '@/ctx/ThemeContext';
+
+const  image = require("../../assets/images/OnBoardingImages/secondLightImg.png")
+const darkImg = require("../../assets/images/OnBoardingImages/secondDarkImg.png")
+
+const SecondScreen = () => {
+    const {theme, changeTheme} = useContext(ThemeContext)
+
+   return (
+    <View>
+        <OnboardingComponent 
+        image={theme === "dark" ? darkImg : image}
+        text="Health checks & consultations easily anywhere anytime"
+        action="Next"
+        direction="/onBoarding/ThirdScreen">
+
+        <Text style={styles.dots}></Text>
+        <Text style={[styles.dots, {width: 30, backgroundColor: Colors.main.primary._500}]}></Text>
+        <Text style={styles.dots}></Text>
+    </OnboardingComponent>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+
+    container: {
+        flex: 1,
+        alignItems: "center",
+    },
+    dots: {
+        width: 10,
+        height: 10,
+        backgroundColor: Colors.grayScale._300,
+        borderRadius: 100,
+        marginHorizontal: 3
+    },
+    
+})
+
+export default SecondScreen
diff --git a/app/onBoarding/ThirdScreen.tsx b/app/onBoarding/ThirdScreen.tsx
new file mode 100644
index 00000000..7166c5eb
--- /dev/null
+++ b/app/onBoarding/ThirdScreen.tsx
@@ -0,0 +1,46 @@
+import React, { useContext, useState } from 'react'
+import {  StyleSheet,SafeAreaView,Text, View } from 'react-native'
+import { Colors } from '@/constants/Colors'
+import OnboardingComponent from '@/components/OnBoarding/OnboardingComponent'
+import { ThemeContext } from '@/ctx/ThemeContext'
+
+const image = require("../../assets/images/OnBoardingImages/thirdLightImg.png")
+const darkImg = require("../../assets/images/OnBoardingImages/thirdDarkImg.png")
+
+
+const ThirdScreen = () => {
+    const {theme, changeTheme} = useContext(ThemeContext)
+
+   return (
+    <View style={styles.container}>
+            <OnboardingComponent 
+        image={ theme=== "dark" ? darkImg : image}
+        text="Let's start living healthy and well with us right now!"
+            action="Get Started"
+            direction="/"
+        >
+            <Text style={styles.dots}></Text>
+            <Text style={styles.dots}></Text>
+            <Text style={[styles.dots, {width: 30, backgroundColor:Colors.main.primary._500}]}></Text>
+        </OnboardingComponent>
+    </View>
+
+  )
+}
+
+const styles = StyleSheet.create({
+
+    container: {
+        flex: 1,
+        alignItems: "center",
+    },
+    dots: {
+        width: 10,
+        height: 10,
+        backgroundColor: Colors.grayScale._300,
+        borderRadius: 100,
+        marginHorizontal: 3
+    }
+})
+
+export default ThirdScreen
diff --git a/app/onBoarding/_layout.tsx b/app/onBoarding/_layout.tsx
new file mode 100644
index 00000000..341595d8
--- /dev/null
+++ b/app/onBoarding/_layout.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import FontAwesome from "@expo/vector-icons/FontAwesome";
+import { Link, Stack } from "expo-router";
+import { Pressable } from "react-native";
+
+
+// You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
+function TabBarIcon(props: {
+  name: React.ComponentProps<typeof FontAwesome>["name"];
+  color: string;
+}) {
+  return <FontAwesome size={28} style={{ marginBottom: -3 }} {...props} />;
+}
+
+export default function TabLayout() {
+
+  return (
+    <Stack>
+      <Stack.Screen
+        name="FirstScreen"
+        options={{
+          title: "onBoarding page",
+          headerShown: false,
+        }}
+      />
+
+      <Stack.Screen
+        name="SecondScreen"
+        options={{
+          title: "onBoarding page",
+          headerShown: false,
+        }}
+      />
+
+      <Stack.Screen
+        name="ThirdScreen"
+        options={{
+          title: "onBoarding page",
+          headerShown: false,
+        }}
+      />
+    </Stack>
+  );
+}
diff --git a/components/OnBoarding/OnboardingComponent.tsx b/components/OnBoarding/OnboardingComponent.tsx
new file mode 100644
index 00000000..9eb09223
--- /dev/null
+++ b/components/OnBoarding/OnboardingComponent.tsx
@@ -0,0 +1,107 @@
+import React, { ReactElement, useContext, useRef, useState } from "react";
+import {
+  View,
+  StyleSheet,
+  FlatList,
+  Animated,
+  Image,
+  Pressable,
+  Text,
+} from "react-native";
+import { Colors } from "@/constants/Colors";
+import { router } from "expo-router";
+import { ThemeContext } from "@/ctx/ThemeContext";
+
+const OnboardingComponent = ({
+  image,
+  text,
+  action,
+  direction,
+  children,
+}: {
+  image: any;
+  text: string;
+  action: string;
+  direction: any;
+  children: React.ReactNode;
+}) => {
+  const { theme, changeTheme } = useContext(ThemeContext);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.img}>
+        <Image source={image} />
+      </View>
+      <View style={styles.LowerSection}>
+        <Text style={theme === "light" ? styles.titleDark : styles.titleLight}>
+          {text}
+        </Text>
+        <View style={{ flexDirection: "row", alignSelf: "center" }}>
+          {children}
+        </View>
+        <Pressable onPress={() => router.push(direction)} style={styles.btn}>
+          <Text style={styles.btnText}>{action}</Text>
+        </Pressable>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: "5%",
+    paddingVertical: "20%",
+  },
+
+  img: {
+    paddingHorizontal: 8,
+    alignSelf: "center",
+  },
+
+  LowerSection: {
+    flexDirection: "column",
+    gap: 48,
+    paddingVertical: 48,
+  },
+
+  titleLight: {
+    color: Colors.main.primary._500,
+    fontSize: 40,
+    paddingHorizontal: 8,
+    textAlign: "center",
+    fontFamily: "Bold",
+  },
+
+  titleDark: {
+    color: Colors.others.white,
+    fontSize: 40,
+    paddingHorizontal: 8,
+    textAlign: "center",
+    fontWeight: "bold",
+  },
+
+  dots: {
+    width: 10,
+    height: 10,
+    backgroundColor: Colors.grayScale._300,
+    borderRadius: 100,
+    marginHorizontal: 3,
+  },
+
+  btn: {
+    backgroundColor: Colors.main.primary._500,
+    textAlign: "center",
+    padding: 18,
+    borderRadius: 100,
+    alignContent: "flex-end",
+  },
+
+  btnText: {
+    color: Colors.others.white,
+    alignSelf: "center",
+    fontSize: 16,
+    fontWeight: "bold",
+  },
+});
+
+export default OnboardingComponent;
diff --git a/package.json b/package.json
index ec690525..4cef75cd 100644
--- a/package.json
+++ b/package.json
@@ -3,14 +3,14 @@
   "main": "expo-router/entry",
   "version": "1.0.0",
   "scripts": {
-    "start": "expo start",
+    "start": " npx expo start",
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web",
     "test": "jest",
     "test:watch": "jest --watchAll",
     "test:update": "jest --updateSnapshot",
-    "ci-start": "expo build:web"
+     "ci-start": "expo build:web"
   },
   "jest": {
     "preset": "jest-expo"
@@ -25,7 +25,6 @@
     "expo-local-authentication": "~13.8.0",
     "expo-navigation-bar": "^2.8.1",
     "expo-router": "~3.4.10",
-    "expo-secure-store": "~12.8.1",
     "expo-splash-screen": "~0.26.5",
     "expo-status-bar": "~1.11.1",
     "expo-system-ui": "~2.9.3",
@@ -40,12 +39,14 @@
     "react-native-screens": "~3.29.0",
     "react-native-svg": "14.1.0",
     "react-native-web": "~0.19.6",
-    "vector-icons": "^0.1.0"
+    "vector-icons": "^0.1.0",
+    "expo-secure-store": "~12.8.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@eslint/js": "^9.1.1",
     "@types/react": "~18.2.45",
+    "@types/react-native": "^0.73.0",
     "@types/react-native-indicators": "^0.16.6",
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.34.1",