diff --git a/App.tsx b/App.tsx
index 0329d0c..b7dee2c 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,11 +1,75 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import React, { useState, useEffect } from "react";
+import { Text, View, StyleSheet, Button, ActivityIndicator } from "react-native";
+import { CameraView, Camera } from "expo-camera";
 
 export default function App() {
+  const [hasPermission, setHasPermission] = useState(null);
+  const [scanned, setScanned] = useState(false);
+  const [showSplash, setShowSplash] = useState(true);
+
+  useEffect(() => {
+    const initializeApp = async () => {
+      const { status } = await Camera.requestCameraPermissionsAsync();
+      setHasPermission(status === "granted");
+      setShowSplash(false);
+    };
+
+    initializeApp();
+  }, []);
+
+  const handleBarCodeScanned = ({ type, data }) => {
+    setScanned(true);
+    alert(`Bar code with type ${type} and data ${data} has been scanned!`);
+  };
+
+  if (showSplash) {
+    return (
+      <View style={styles.splashContainer}>
+        <ActivityIndicator size="large" color="#ff69b4" />
+      </View>
+    );
+  }
+
+  if (hasPermission === null) {
+    return <Text>Requesting for camera permission</Text>;
+  }
+  if (hasPermission === false) {
+    return <Text>No access to camera</Text>;
+  }
+
   return (
     <View style={styles.container}>
-      <Text>Open up App.tsx to start working on your app!</Text>
-      <StatusBar style="auto" />
+      {/* Top Banner */}
+      <View style={styles.banner}>
+        <Text style={styles.headerText}>SafeQR</Text>
+      </View>
+
+      {/* Welcome Text */}
+      <Text style={styles.welcomeText}>Welcome to SafeQR code Scanner</Text>
+
+      {/* Camera Container */}
+      <View style={styles.cameraContainer}>
+        <CameraView
+          onBarcodeScanned={scanned ? undefined : handleBarCodeScanned}
+          barcodeScannerSettings={{
+            barcodeTypes: ["qr", "pdf417"],
+          }}
+          style={styles.camera}
+        />
+      </View>
+
+      {/* Scan Again Button */}
+      {scanned && (
+        <Button
+          title={"Tap to Scan Again"}
+          onPress={() => setScanned(false)}
+        />
+      )}
+
+      {/* Bottom Menu */}
+      <View style={styles.menu}>
+        {/* Your existing menu items */}
+      </View>
     </View>
   );
 }
@@ -13,8 +77,44 @@ export default function App() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
+    backgroundColor: "#f8f0fc", // light purple background
   },
+  splashContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#f8f0fc", // light purple background
+  },
+  banner: {
+    backgroundColor: "#ff69b4", // pink background
+    paddingVertical: 10,
+    alignItems: "center",
+  },
+  headerText: {
+    color: "white",
+    fontSize: 24,
+  },
+  welcomeText: {
+    textAlign: "center",
+    fontSize: 20,
+    marginVertical: 10, // Adjusted margin
+    color: "#ff69b4", // pink color
+  },
+  cameraContainer: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  camera: {
+    width: 300,
+    height: 400,
+  },
+  menu: {
+    flexDirection: "row",
+    justifyContent: "space-around",
+    alignItems: "center",
+    backgroundColor: "#ff69b4", // pink background
+    paddingVertical: 10,
+  },
+  // Your existing menu item styles
 });
diff --git a/package-lock.json b/package-lock.json
index 9446290..0fd9546 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "dependencies": {
         "expo": "~51.0.10",
+        "expo-camera": "~15.0.10",
         "expo-status-bar": "~1.12.1",
         "react": "18.2.0",
         "react-native": "0.74.1"
@@ -7340,6 +7341,17 @@
         "expo": "*"
       }
     },
+    "node_modules/expo-camera": {
+      "version": "15.0.10",
+      "resolved": "https://registry.npmjs.org/expo-camera/-/expo-camera-15.0.10.tgz",
+      "integrity": "sha512-cr0s8CHllPSf3bpT+2/D7nJx41Hec1HzSwYeeIZIe63uFUBRSx6R/eAtdrLOfg6cMoLhmh4wfHXBBnJdT015Fw==",
+      "dependencies": {
+        "invariant": "^2.2.4"
+      },
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-constants": {
       "version": "16.0.2",
       "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-16.0.2.tgz",
diff --git a/package.json b/package.json
index 434ad70..ee2fbf9 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,8 @@
     "expo": "~51.0.10",
     "expo-status-bar": "~1.12.1",
     "react": "18.2.0",
-    "react-native": "0.74.1"
+    "react-native": "0.74.1",
+    "expo-camera": "~15.0.10"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",