implement ramaining game levels with background music

src/screens/home/game/game01/GameLevel04.js

+/* eslint-disable react-native/no-inline-styles */
+import React, {useState, useEffect, useRef} from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Alert,
+  Button,
+  ImageBackground,
+} from 'react-native';
+import {IMGS, ROUTES, COLORS} from '../../../../constants';
+import Sound from 'react-native-sound';
+
+const BoardSize = 8;
+const CandyTypes = ['🤰', '🥦', '🐶', '🍧', '🍉', '🍄', '🍬', '👶', '🚫'];
+const InitialTime = 80;
+
+const levels = [
+  {
+    board: createBoard(),
+    winningScore: 50,
+  },
+  {
+    board: createBoard(),
+    winningScore: 60,
+  },
+  {
+    board: createBoard(),
+    winningScore: 80,
+  },
+];
+
+function createBoard() {
+  const newBoard = [];
+  for (let row = 0; row < BoardSize; row++) {
+    const newRow = [];
+    for (let col = 0; col < BoardSize; col++) {
+      newRow.push(CandyTypes[Math.floor(Math.random() * CandyTypes.length)]);
+    }
+    newBoard.push(newRow);
+  }
+  return newBoard;
+}
+
+const CandyCrushGameLevel04 = ({navigation}) => {
+  const [currentLevel, setCurrentLevel] = useState(0);
+  const [board, setBoard] = useState(levels[currentLevel].board);
+  const [score, setScore] = useState(0);
+  const [timeLeft, setTimeLeft] = useState(InitialTime);
+  const [selectedCandy, setSelectedCandy] = useState(null);
+  const backgroundMusic = useRef(null);
+
+  const [isMuted, setIsMuted] = useState(false);
+
+  useEffect(() => {
+    backgroundMusic.current = new Sound(
+      require('../../../../assets/audios/music_name_e.mp3'),
+      error => {
+        if (error) {
+          console.log('Failed to load the sound', error);
+          return;
+        }
+        // Play the music as soon as the component mounts and loop indefinitely
+        backgroundMusic.current.play();
+        backgroundMusic.current.setNumberOfLoops(-1);
+      },
+    );
+
+    return () => backgroundMusic.current.release(); // Release the audio player resource when the component unmounts
+  }, []);
+
+  const toggleMute = () => {
+    setIsMuted(!isMuted);
+    // Make sure backgroundMusic.current is not null
+    if (backgroundMusic.current) {
+      if (isMuted) {
+        backgroundMusic.current.setVolume(1.0);
+      } else {
+        backgroundMusic.current.setVolume(0.0);
+      }
+    }
+  };
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTimeLeft(prev => (prev > 0 ? prev - 1 : 0));
+    }, 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  useEffect(() => {
+    if (timeLeft === 0) {
+      Alert.alert(
+        `${
+          score >= levels[currentLevel].winningScore
+            ? 'Congratulations  🥳🥳'
+            : 'Game Over'
+        }`,
+        `Time is up! You ${
+          score >= levels[currentLevel].winningScore ? 'win!' : 'lose!'
+        }`,
+      );
+      resetGame();
+    }
+  }, [timeLeft]);
+
+  const resetGame = () => {
+    setBoard(createBoard());
+    setSelectedCandy(null);
+  };
+
+  const nextLevel = () => {
+    if (score >= levels[currentLevel].winningScore) {
+      if (currentLevel < levels.length - 1) {
+        Alert.alert(
+          'Congratulations 🥳🥳',
+          "You've reached the winning score! Moving on to the next level!",
+        );
+        setCurrentLevel(currentLevel + 1);
+        setBoard(levels[currentLevel + 1].board);
+        setScore(0);
+        setTimeLeft(InitialTime);
+      } else {
+        Alert.alert('Congratulations 🥳🥳', "You've completed all levels!", [
+          {
+            text: 'OK',
+            onPress: () => {
+              navigation.navigate(ROUTES.Level06);
+            },
+          },
+        ]);
+        resetGame();
+      }
+    } else {
+      Alert.alert(
+        'Sorry!',
+        'You need to reach the winning score to advance to the next level.',
+        [
+          {
+            text: 'OK',
+            onPress: () => {
+              navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS);
+            },
+          },
+        ],
+      );
+    }
+  };
+
+  useEffect(() => {
+    if (score >= levels[currentLevel].winningScore) {
+      nextLevel();
+    }
+  }, [score]);
+
+  function createBoard() {
+    const newBoard = [];
+    for (let row = 0; row < BoardSize; row++) {
+      const newRow = [];
+      for (let col = 0; col < BoardSize; col++) {
+        newRow.push(CandyTypes[Math.floor(Math.random() * CandyTypes.length)]);
+      }
+      newBoard.push(newRow);
+    }
+    return newBoard;
+  }
+
+  const handlePress = (row, col) => {
+    if (board[row][col] === '🚫') return; // Prevent pressing the "🚫" emoji
+
+    if (selectedCandy) {
+      const [selectedRow, selectedCol] = selectedCandy;
+      const dx = Math.abs(selectedRow - row);
+      const dy = Math.abs(selectedCol - col);
+      if ((dx === 1 && dy === 0) || (dx === 0 && dy === 1)) {
+        // Adjacent candy selected
+        const newBoard = JSON.parse(JSON.stringify(board)); // Deep clone the board
+        [newBoard[selectedRow][selectedCol], newBoard[row][col]] = [
+          newBoard[row][col],
+          newBoard[selectedRow][selectedCol],
+        ];
+        if (checkForMatch(newBoard)) {
+          setBoard(newBoard);
+        }
+      }
+      setSelectedCandy(null);
+    } else {
+      setSelectedCandy([row, col]);
+    }
+  };
+
+  function checkForMatch(board) {
+    const toClear = [];
+    // Check for horizontal matches
+    for (let row = 0; row < BoardSize; row++) {
+      for (let col = 0; col < BoardSize - 2; col++) {
+        const candy = board[row][col];
+        if (
+          candy &&
+          candy === board[row][col + 1] &&
+          candy === board[row][col + 2]
+        ) {
+          toClear.push([row, col], [row, col + 1], [row, col + 2]);
+        }
+      }
+    }
+
+    // Check for vertical matches
+    for (let col = 0; col < BoardSize; col++) {
+      for (let row = 0; row < BoardSize - 2; row++) {
+        const candy = board[row][col];
+        if (
+          candy &&
+          candy === board[row + 1][col] &&
+          candy === board[row + 2][col]
+        ) {
+          toClear.push([row, col], [row + 1, col], [row + 2, col]);
+        }
+      }
+    }
+
+    if (toClear.length === 0) return false; // No matches found
+
+    // Clear matched candies
+    let points = 0;
+    toClear.forEach(([row, col]) => {
+      if (board[row][col] !== null) {
+        points += 5; // Assuming each candy gives 5 points
+        board[row][col] = null;
+      }
+    });
+    setScore(prevScore => prevScore + points);
+
+    // Make candies fall down
+    for (let col = 0; col < BoardSize; col++) {
+      let shift = 0;
+      for (let row = BoardSize - 1; row >= 0; row--) {
+        if (board[row][col] === null) {
+          shift++;
+        } else if (shift > 0) {
+          board[row + shift][col] = board[row][col];
+          board[row][col] = null;
+        }
+      }
+    }
+
+    // Refill the board
+    for (let col = 0; col < BoardSize; col++) {
+      for (let row = 0; row < BoardSize; row++) {
+        if (board[row][col] === null) {
+          board[row][col] =
+            CandyTypes[Math.floor(Math.random() * CandyTypes.length)];
+        }
+      }
+    }
+
+    return true;
+  }
+
+  return (
+    <ImageBackground
+      source={IMGS.game_img_7}
+      style={styles.backgroundImage}
+      resizeMode="cover">
+      <View>
+        <TouchableOpacity
+          style={{
+            backgroundColor: COLORS.white,
+            borderColor: COLORS.white,
+            height: 60,
+            marginBottom: 5,
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderRadius: 14,
+            width: 50,
+          }}
+          onPress={toggleMute}>
+          <Text
+            medium
+            center
+            style={{
+              color: 'black',
+              fontSize: 30,
+              fontWeight: 'bold',
+            }}>
+            {isMuted ? '🔇' : '🔊'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+      <Button
+        title="Refresh"
+        onPress={resetGame}
+        color="#702963"
+        sx={{marginBottom: 5}}
+      />
+
+      <Text style={styles.text}>Level: {currentLevel + 1}</Text>
+      <Text style={styles.text}>
+        Winning Score: {levels[currentLevel].winningScore}
+      </Text>
+      <Text style={styles.text}>Score: {score}</Text>
+      <Text style={styles.text}>Time Left: {timeLeft}s</Text>
+      <Button
+        title="Next Level"
+        onPress={nextLevel}
+        color="#702963"
+        // style={{ marginBottom: 5, width: 100 }}
+      />
+      <Text style={styles.text}> {''}</Text>
+      <View style={styles.board}>
+        {board.map((row, rowIndex) => (
+          <View key={rowIndex} style={styles.row}>
+            {row.map((candy, colIndex) => (
+              <TouchableOpacity
+                key={colIndex}
+                style={styles.candy}
+                onPress={() => handlePress(rowIndex, colIndex)}>
+                <Text style={styles.candyText}>{candy}</Text>
+              </TouchableOpacity>
+            ))}
+          </View>
+        ))}
+      </View>
+      <View>
+        <TouchableOpacity
+          style={{
+            backgroundColor: '#702963',
+            height: 50,
+            marginBottom: 60,
+            justifyContent: 'center',
+            alignItems: 'center',
+            // marginHorizontal: 25,
+            borderRadius: 16,
+            width: 320,
+          }}
+          onPress={() => navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS)}>
+          <Text
+            bold
+            medium
+            center
+            style={{
+              color: 'white',
+              fontSize: 22,
+              fontWeight: 'bold',
+            }}>
+            Exit
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </ImageBackground>
+  );
+};
+
+const styles = StyleSheet.create({
+  backgroundImage: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    color: 'black',
+    marginBottom: 5,
+    fontWeight: 'bold',
+    fontSize: 16,
+  },
+  board: {
+    width: 380,
+    height: 400,
+    backgroundColor: COLORS.navyBlue,
+    borderColor: 'white',
+    marginBottom: 40,
+  },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  candy: {
+    flex: 1,
+    aspectRatio: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderColor: 'white',
+    borderWidth: 1,
+    borderRadius: 4,
+  },
+  candyText: {
+    fontSize: 30,
+  },
+});
+
+export default CandyCrushGameLevel04;

src/screens/home/game/game01/GameLevel6.js

+/* eslint-disable react-native/no-inline-styles */
+import React, {useState, useEffect, useRef} from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Image,
+  StyleSheet,
+  Alert,
+  ImageBackground,
+} from 'react-native';
+import {IMGS, ROUTES, COLORS} from '../../../../constants';
+import Sound from 'react-native-sound';
+
+const babyImage = IMGS.game_img_13;
+const cartImage = IMGS.game_img_14;
+const shoes = IMGS.game_img_16;
+const cloth = IMGS.game_img_17;
+
+const choices = {
+  babyImage: babyImage,
+  cartImage: cartImage,
+  shoes: shoes,
+  cloth: cloth,
+};
+
+const getChoiceImage = choice => {
+  return choices[choice];
+};
+
+const GameLevel6 = () => {
+  const [playerChoice, setPlayerChoice] = useState(null);
+  const [computerChoice, setComputerChoice] = useState(null);
+  const [computerChoice2, setComputerChoice2] = useState(null);
+  const [computerChoice3, setComputerChoice3] = useState(null);
+  const [result, setResult] = useState('');
+  const [points, setPoints] = useState(0);
+  const backgroundMusic = useRef(null);
+
+  const [isMuted, setIsMuted] = useState(false);
+
+  useEffect(() => {
+    backgroundMusic.current = new Sound(
+      require('../../../../assets/audios/music_name_f.mp3'),
+      error => {
+        if (error) {
+          console.log('Failed to load the sound', error);
+          return;
+        }
+        // Play the music as soon as the component mounts and loop indefinitely
+        backgroundMusic.current.play();
+        backgroundMusic.current.setNumberOfLoops(-1);
+      },
+    );
+
+    return () => backgroundMusic.current.release(); // Release the audio player resource when the component unmounts
+  }, []);
+
+  const toggleMute = () => {
+    setIsMuted(!isMuted);
+    // Make sure backgroundMusic.current is not null
+    if (backgroundMusic.current) {
+      if (isMuted) {
+        backgroundMusic.current.setVolume(1.0);
+      } else {
+        backgroundMusic.current.setVolume(0.0);
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (points >= 200) {
+      Alert.alert('Congratulations 🥳🥳', 'You have won the game!');
+      setPoints(0);
+    }
+  }, [points]);
+
+  const play = choice => {
+    const computer = getRandomChoice();
+    const computerChoice2 = getRandomChoice();
+    const computerChoice3 = getRandomChoice();
+    const result = getWinner(
+      choice,
+      computer,
+      computerChoice2,
+      computerChoice3,
+    );
+
+    setPlayerChoice(choice);
+    setComputerChoice(computer);
+    setComputerChoice2(computerChoice2);
+    setComputerChoice3(computerChoice3);
+    setResult(result);
+
+    if (result === 'You Win!') {
+      setPoints(currentPoints => {
+        const updatedPoints = currentPoints + 10;
+        return updatedPoints;
+      });
+    }
+  };
+
+  useEffect(() => {
+    console.log(`Points updated: ${points}`);
+  }, [points]);
+
+  const getRandomChoice = () => {
+    const keys = Object.keys(choices);
+    const randomIndex = Math.floor(Math.random() * keys.length);
+    return keys[randomIndex];
+  };
+
+  const getWinner = (player, computer1, computer2, computer3) => {
+    const choices = [player, computer1, computer2, computer3];
+    const winConditions = {
+      babyImage: 'babyImage',
+      cartImage: 'cartImage',
+      shoes: 'shoes',
+      cloth: 'cloth',
+    };
+
+    let playerWins = 0;
+    let computerWins = {computer1: 0, computer2: 0, computer3: 0};
+
+    choices.forEach((choice, index) => {
+      for (let i = 0; i < choices.length; i++) {
+        if (i !== index) {
+          if (winConditions[choice] === choices[i]) {
+            if (index === 0) {
+              playerWins += 1;
+            } else {
+              computerWins[`computer${index}`] += 1;
+            }
+          }
+        }
+      }
+    });
+
+    // Evaluate overall result
+    if (playerWins > 0) {
+      return 'You Win!';
+    } else if (Object.values(computerWins).some(val => val > 0)) {
+      return 'Computer Wins!';
+    } else {
+      return 'Draw';
+    }
+  };
+
+  return (
+    <ImageBackground
+      source={IMGS.game_img_15}
+      style={styles.backgroundImage}
+      resizeMode="cover">
+      <View style={{marginTop: 10}}>
+        <TouchableOpacity
+          style={{
+            backgroundColor: COLORS.white,
+            borderColor: COLORS.white,
+            height: 60,
+            // marginBottom: 2,
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderRadius: 14,
+            width: 50,
+          }}
+          onPress={toggleMute}>
+          <Text
+            medium
+            center
+            style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}>
+            {isMuted ? '🔇' : '🔊'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+      <View colors={['#9D50BB', '#6E48AA']} style={styles.gradient}>
+        {/* <Text style={styles.headerText}>Rock Paper Scissors</Text> */}
+        <View style={styles.resultContainer}>
+          <View style={styles.rowContainer}>
+            <View style={styles.circle}>
+              <Text style={styles.playerText}>Player 01</Text>
+              {computerChoice && (
+                <Image
+                  source={getChoiceImage(computerChoice)}
+                  style={styles.selectImage}
+                />
+              )}
+            </View>
+            <View style={styles.circle}>
+              <Text style={styles.playerText}>Player 02</Text>
+              {playerChoice && (
+                <Image
+                  source={getChoiceImage(computerChoice2)}
+                  style={styles.selectImage}
+                />
+              )}
+            </View>
+          </View>
+          <Text style={styles.resultText}>VS</Text>
+          <View style={styles.rowContainer}>
+            <View style={styles.circle}>
+              <Text style={styles.playerText}>Player 03</Text>
+              {playerChoice && (
+                <Image
+                  source={getChoiceImage(computerChoice3)}
+                  style={styles.selectImage}
+                />
+              )}
+            </View>
+            <View style={styles.circle}>
+              <Text style={styles.playerText}>You</Text>
+              {playerChoice && (
+                <Image
+                  source={getChoiceImage(playerChoice)}
+                  style={styles.selectImage}
+                />
+              )}
+            </View>
+          </View>
+          <Text style={styles.resultText}>Result: {result}</Text>
+          <Text style={styles.pointsText}>Points: {points}</Text>
+        </View>
+        <View style={styles.choicesContainer}>
+          <View style={styles.square}>
+            <TouchableOpacity
+              onPress={() => play('babyImage')}
+              style={styles.choiceButton}>
+              <Image source={babyImage} style={styles.choiceImage} />
+            </TouchableOpacity>
+          </View>
+          <View style={styles.square}>
+            <TouchableOpacity
+              onPress={() => play('cart')}
+              style={styles.choiceButton}>
+              <Image source={cartImage} style={styles.choiceImage} />
+            </TouchableOpacity>
+          </View>
+          <View style={styles.square}>
+            <TouchableOpacity
+              onPress={() => play('cloth')}
+              style={styles.choiceButton}>
+              <Image source={cloth} style={styles.choiceImage} />
+            </TouchableOpacity>
+          </View>
+          <View style={styles.square}>
+            <TouchableOpacity
+              onPress={() => play('shoes')}
+              style={styles.choiceButton}>
+              <Image source={shoes} style={styles.choiceImage} />
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </ImageBackground>
+  );
+};
+
+const styles = StyleSheet.create({
+  backgroundImage: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  gradient: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'space-around',
+    padding: 10,
+  },
+  headerText: {
+    fontSize: 30,
+    color: '#9400D3',
+    fontWeight: 'bold',
+    marginTop: 10,
+  },
+  choicesContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  rowContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  choiceButton: {
+    margin: 10,
+    padding: 10,
+  },
+  choiceImage: {
+    width: 60,
+    height: 60,
+  },
+  selectImage: {
+    width: 100,
+    height: 100,
+  },
+  resultContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  resultText: {
+    fontSize: 24,
+    color: 'black',
+    fontWeight: 'bold',
+    marginTop: 10,
+  },
+  playerText: {
+    fontSize: 16,
+    color: 'white',
+    fontWeight: 'bold',
+    marginTop: 20,
+    marginBottom: 15,
+  },
+  pointsText: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: 'black', // Make sure this color is visible on your background
+    // add other styles to position your points text if necessary
+  },
+  circle: {
+    width: 160,
+    height: 170,
+    borderRadius: 85,
+    backgroundColor: '#000033',
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#6F2DA8',
+    shadowOffset: {width: 0, height: 2},
+    shadowOpacity: 0.25,
+    shadowRadius: 1.84,
+    elevation: 5,
+    margin: 20,
+  },
+  square: {
+    width: 80,
+    height: 80,
+    borderRadius: 20,
+    backgroundColor: '#54BAB9',
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#CCCCFF',
+    shadowOffset: {width: 0, height: 2},
+    shadowOpacity: 0.25,
+    shadowRadius: 2,
+    elevation: 5,
+    gap: 85,
+    margin: 7,
+    marginBottom: 56,
+  },
+  mainsquare: {
+    width: 200,
+    height: 250,
+    borderRadius: 20,
+    backgroundColor: '#E8ADAA',
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#CCCCFF',
+    shadowOffset: {width: 0, height: 2},
+    shadowOpacity: 0.25,
+    shadowRadius: 2,
+    elevation: 5,
+  },
+});
+
+export default GameLevel6;

src/screens/home/game/game01/Level01Instructions.js

+/* eslint-disable react-native/no-inline-styles */
+import React from 'react';
+import {
+  ScrollView,
+  ImageBackground,
+  Text,
+  View,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
+import {ROUTES, COLORS} from '../../../../constants';
+import LinearGradient from 'react-native-linear-gradient';
+
+const Level01InstructionsPage = ({navigation}) => {
+  return (
+    <>
+      <ScrollView style={styles.container}>
+        <LinearGradient
+          style={{
+            flex: 1,
+          }}
+          colors={[COLORS.white, COLORS.light_purple]}>
+          {/* <View style={{  backgroundColor: "#FFDFDD", height: '100%' }}> */}
+          <View style={{padding: 25}}>
+            <View
+              style={{
+                justifyContent: 'center',
+                alignItems: 'center',
+                display: 'flex',
+              }}>
+              <Text
+                style={{
+                  display: 'flex',
+                  color: '#000080',
+                  fontSize: 28,
+                  fontWeight: 'bold',
+                  marginBottom: 25,
+                  marginTop: 35,
+                }}>
+                INSTRUCTIONS
+              </Text>
+            </View>
+            <View
+              style={{
+                justifyContent: 'center',
+                padding: 10,
+              }}>
+              <Text
+                style={{
+                  color: 'black',
+                  fontSize: 16,
+                  // fontWeight: "bold",
+                  textAlign: 'justify',
+                  marginTop: 30,
+                }}>
+                01. You can match same candy types more than three.
+              </Text>
+              <Text
+                style={{
+                  color: 'black',
+                  fontSize: 16,
+                  // fontWeight: "bold",
+                  textAlign: 'justify',
+                  marginTop: 20,
+                }}>
+                02. After matching same type candy types, those are removed.
+              </Text>
+              <Text
+                style={{
+                  color: 'black',
+                  fontSize: 16,
+                  // fontWeight: "bold",
+                  textAlign: 'justify',
+                  marginTop: 20,
+                }}>
+                03. According to your matching, you can get a score for that.
+              </Text>
+              <Text
+                style={{
+                  color: 'black',
+                  fontSize: 16,
+                  // fontWeight: "bold",
+                  textAlign: 'justify',
+                  marginTop: 20,
+                }}>
+                04. You can get an any score in the give time period.
+              </Text>
+              <Text
+                style={{
+                  color: 'black',
+                  fontSize: 16,
+                  // fontWeight: "bold",
+                  textAlign: 'justify',
+                  marginTop: 20,
+                }}>
+                05. The game will be given winning score automatically.
+              </Text>
+              <Text
+                style={{
+                  color: 'black',
+                  fontSize: 16,
+                  // fontWeight: "bold",
+                  textAlign: 'justify',
+                  marginTop: 20,
+                }}>
+                06. If you get a highest score more than winning score, You can
+                win the game.
+              </Text>
+              <Text
+                style={{
+                  color: 'black',
+                  fontSize: 16,
+                  // fontWeight: "bold",
+                  textAlign: 'justify',
+                  marginTop: 20,
+                }}>
+                07. If you cannot find same cand types, you can click refresh
+                button to refresh the board. (Your score and remaining time
+                period will not change.)
+              </Text>
+            </View>
+
+            <View style={{marginTop: 40}}>
+              <TouchableOpacity
+                style={{
+                  backgroundColor: '#A685E2',
+                  height: 50,
+                  marginBottom: 20,
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  // marginHorizontal: 25,
+                  borderRadius: 16,
+                  width: '100%',
+                }}
+                onPress={() => navigation.navigate(ROUTES.GameLevel0)}>
+                <Text
+                  bold
+                  medium
+                  center
+                  style={{
+                    color: 'white',
+                    fontSize: 22,
+                    fontWeight: 'bold',
+                  }}>
+                  Play
+                </Text>
+              </TouchableOpacity>
+            </View>
+            {/* </View> */}
+          </View>
+        </LinearGradient>
+      </ScrollView>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  brandViewText: {
+    color: '#F5A8A8',
+    fontSize: 40,
+    fontWeight: 'bold',
+  },
+});
+
+export default Level01InstructionsPage;

src/screens/home/game/game01/progress/Level01.js

+import React from 'react';
+import {View, StyleSheet, TouchableOpacity, Text} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {COLORS, IMGS, ROUTES} from '../../../../../constants';
+
+const Level01 = ({route, navigation}) => {
+  return (
+    <LinearGradient
+      style={{
+        flex: 1,
+      }}
+      colors={[
+        '#D9EDBF',
+        '#FFD3B5',
+        COLORS.white,
+        '#E8D3FF',
+        '#DAF1F9',
+        '#F6DFEB',
+      ]}
+      start={{x: 0.0, y: 0.0}}
+      end={{x: 1.0, y: 1.0}}>
+      <View style={styles.container}>
+        <View style={styles.mainContainer}>
+          <Text style={styles.mainText}>Your Gaming Level</Text>
+        </View>
+        <View style={styles.diamondContainer}>
+          <View style={styles.innerCircle}>
+            <Text style={styles.scoreText}>1</Text>
+          </View>
+        </View>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => navigation.navigate(ROUTES.GameLevel0)}>
+          <Text style={styles.buttonText}>Choose a Game</Text>
+        </TouchableOpacity>
+      </View>
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  gradientBackground: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  diamondContainer: {
+    width: 250,
+    height: 250,
+    transform: [{rotate: '45deg'}],
+    backgroundColor: '#e76f51',
+    alignItems: 'center',
+    justifyContent: 'center',
+    elevation: 10,
+    borderRadius: 20,
+  },
+  innerCircle: {
+    width: 180,
+    height: 180,
+    borderRadius: 90,
+    backgroundColor: '#f4a261',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transform: [{rotate: '-45deg'}],
+    elevation: 50,
+  },
+  scoreText: {
+    color: '#ffffff',
+    fontSize: 100,
+    fontWeight: 'bold',
+  },
+  mainText: {
+    color: 'white',
+    fontSize: 25,
+    fontWeight: 'bold',
+    position: 'absolute',
+  },
+  button: {
+    backgroundColor: '#f4a261',
+    top: 150,
+    borderRadius: 10,
+    elevation: 5,
+    width: '90%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+    height: 50,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  mainContainer: {
+    elevation: 80,
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
+    backgroundColor: '#f4a261',
+    height: 50,
+    width: '100%',
+    bottom: 200,
+  },
+});
+
+export default Level01;

src/screens/home/game/game01/progress/Level02.js

+import React from 'react';
+import {View, StyleSheet, TouchableOpacity, Text} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {COLORS, IMGS, ROUTES} from '../../../../../constants';
+
+const Level02 = ({route, navigation}) => {
+  return (
+    <LinearGradient
+      style={{
+        flex: 1,
+      }}
+      colors={[
+        '#D9EDBF',
+        '#FFD3B5',
+        COLORS.white,
+        '#E8D3FF',
+        '#DAF1F9',
+        '#F6DFEB',
+      ]}
+      start={{x: 0.0, y: 0.0}}
+      end={{x: 1.0, y: 1.0}}>
+      <View style={styles.container}>
+        <View style={styles.mainContainer}>
+          <Text style={styles.mainText}>Your Gaming Level</Text>
+        </View>
+        <View style={styles.diamondContainer}>
+          <View style={styles.innerCircle}>
+            <Text style={styles.scoreText}>2</Text>
+          </View>
+        </View>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => navigation.navigate(ROUTES.GameLevel1)}>
+          <Text style={styles.buttonText}>Choose a Game</Text>
+        </TouchableOpacity>
+      </View>
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  gradientBackground: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  diamondContainer: {
+    width: 250,
+    height: 250,
+    transform: [{rotate: '45deg'}],
+    backgroundColor: '#e76f51',
+    alignItems: 'center',
+    justifyContent: 'center',
+    elevation: 10,
+    borderRadius: 20,
+  },
+  innerCircle: {
+    width: 180,
+    height: 180,
+    borderRadius: 90,
+    backgroundColor: '#f4a261',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transform: [{rotate: '-45deg'}],
+    elevation: 50,
+  },
+  scoreText: {
+    color: '#ffffff',
+    fontSize: 100,
+    fontWeight: 'bold',
+  },
+  mainText: {
+    color: 'white',
+    fontSize: 25,
+    fontWeight: 'bold',
+    position: 'absolute',
+  },
+  button: {
+    backgroundColor: '#f4a261',
+    top: 150,
+    borderRadius: 10,
+    elevation: 5,
+    width: '90%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+    height: 50,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  mainContainer: {
+    elevation: 80,
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
+    backgroundColor: '#f4a261',
+    height: 50,
+    width: '100%',
+    bottom: 200,
+  },
+});
+
+export default Level02;

src/screens/home/game/game01/progress/Level03.js

+import React from 'react';
+import {View, StyleSheet, TouchableOpacity, Text} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {COLORS, IMGS, ROUTES} from '../../../../../constants';
+
+const Level03 = ({route, navigation}) => {
+  return (
+    <LinearGradient
+      style={{
+        flex: 1,
+      }}
+      colors={[
+        '#D9EDBF',
+        '#FFD3B5',
+        COLORS.white,
+        '#E8D3FF',
+        '#DAF1F9',
+        '#F6DFEB',
+      ]}
+      start={{x: 0.0, y: 0.0}}
+      end={{x: 1.0, y: 1.0}}>
+      <View style={styles.container}>
+        <View style={styles.mainContainer}>
+          <Text style={styles.mainText}>Your Gaming Level</Text>
+        </View>
+        <View style={styles.diamondContainer}>
+          <View style={styles.innerCircle}>
+            <Text style={styles.scoreText}>3</Text>
+          </View>
+        </View>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => navigation.navigate(ROUTES.GameLevel2)}>
+          <Text style={styles.buttonText}>Choose a Game</Text>
+        </TouchableOpacity>
+      </View>
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  gradientBackground: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  diamondContainer: {
+    width: 250,
+    height: 250,
+    transform: [{rotate: '45deg'}],
+    backgroundColor: '#e76f51',
+    alignItems: 'center',
+    justifyContent: 'center',
+    elevation: 10,
+    borderRadius: 20,
+  },
+  innerCircle: {
+    width: 180,
+    height: 180,
+    borderRadius: 90,
+    backgroundColor: '#f4a261',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transform: [{rotate: '-45deg'}],
+    elevation: 50,
+  },
+  scoreText: {
+    color: '#ffffff',
+    fontSize: 100,
+    fontWeight: 'bold',
+  },
+  mainText: {
+    color: 'white',
+    fontSize: 25,
+    fontWeight: 'bold',
+    position: 'absolute',
+  },
+  button: {
+    backgroundColor: '#f4a261',
+    top: 150,
+    borderRadius: 10,
+    elevation: 5,
+    width: '90%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+    height: 50,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  mainContainer: {
+    elevation: 80,
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
+    backgroundColor: '#f4a261',
+    height: 50,
+    width: '100%',
+    bottom: 200,
+  },
+});
+
+export default Level03;

src/screens/home/game/game01/progress/Level04.js

+import React from 'react';
+import {View, StyleSheet, TouchableOpacity, Text} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {COLORS, IMGS, ROUTES} from '../../../../../constants';
+
+const Level04 = ({route, navigation}) => {
+  return (
+    <LinearGradient
+      style={{
+        flex: 1,
+      }}
+      colors={[
+        '#D9EDBF',
+        '#FFD3B5',
+        COLORS.white,
+        '#E8D3FF',
+        '#DAF1F9',
+        '#F6DFEB',
+      ]}
+      start={{x: 0.0, y: 0.0}}
+      end={{x: 1.0, y: 1.0}}>
+      <View style={styles.container}>
+        <View style={styles.mainContainer}>
+          <Text style={styles.mainText}>Your Gaming Level</Text>
+        </View>
+        <View style={styles.diamondContainer}>
+          <View style={styles.innerCircle}>
+            <Text style={styles.scoreText}>5</Text>
+          </View>
+        </View>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => navigation.navigate(ROUTES.GameLevel4)}>
+          <Text style={styles.buttonText}>Choose a Game</Text>
+        </TouchableOpacity>
+      </View>
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  gradientBackground: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  diamondContainer: {
+    width: 250,
+    height: 250,
+    transform: [{rotate: '45deg'}],
+    backgroundColor: '#e76f51',
+    alignItems: 'center',
+    justifyContent: 'center',
+    elevation: 10,
+    borderRadius: 20,
+  },
+  innerCircle: {
+    width: 180,
+    height: 180,
+    borderRadius: 90,
+    backgroundColor: '#f4a261',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transform: [{rotate: '-45deg'}],
+    elevation: 50,
+  },
+  scoreText: {
+    color: '#ffffff',
+    fontSize: 100,
+    fontWeight: 'bold',
+  },
+  mainText: {
+    color: 'white',
+    fontSize: 25,
+    fontWeight: 'bold',
+    position: 'absolute',
+  },
+  button: {
+    backgroundColor: '#f4a261',
+    top: 150,
+    borderRadius: 10,
+    elevation: 5,
+    width: '90%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+    height: 50,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  mainContainer: {
+    elevation: 80,
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
+    backgroundColor: '#f4a261',
+    height: 50,
+    width: '100%',
+    bottom: 200,
+  },
+});
+
+export default Level04;

src/screens/home/game/game01/progress/Level05.js

+import React from 'react';
+import {View, StyleSheet, TouchableOpacity, Text} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {COLORS, IMGS, ROUTES} from '../../../../../constants';
+import GameLevel5 from '../GameLevel5';
+
+const Level05 = ({route, navigation}) => {
+  return (
+    <LinearGradient
+      style={{
+        flex: 1,
+      }}
+      colors={[
+        '#D9EDBF',
+        '#FFD3B5',
+        COLORS.white,
+        '#E8D3FF',
+        '#DAF1F9',
+        '#F6DFEB',
+      ]}
+      start={{x: 0.0, y: 0.0}}
+      end={{x: 1.0, y: 1.0}}>
+      <View style={styles.container}>
+        <View style={styles.mainContainer}>
+          <Text style={styles.mainText}>Your Gaming Level</Text>
+        </View>
+        <View style={styles.diamondContainer}>
+          <View style={styles.innerCircle}>
+            <Text style={styles.scoreText}>4</Text>
+          </View>
+        </View>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => navigation.navigate(ROUTES.GameLevel3)}>
+          <Text style={styles.buttonText}>Choose a Game</Text>
+        </TouchableOpacity>
+      </View>
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  gradientBackground: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  diamondContainer: {
+    width: 250,
+    height: 250,
+    transform: [{rotate: '45deg'}],
+    backgroundColor: '#e76f51',
+    alignItems: 'center',
+    justifyContent: 'center',
+    elevation: 10,
+    borderRadius: 20,
+  },
+  innerCircle: {
+    width: 180,
+    height: 180,
+    borderRadius: 90,
+    backgroundColor: '#f4a261',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transform: [{rotate: '-45deg'}],
+    elevation: 50,
+  },
+  scoreText: {
+    color: '#ffffff',
+    fontSize: 100,
+    fontWeight: 'bold',
+  },
+  mainText: {
+    color: 'white',
+    fontSize: 25,
+    fontWeight: 'bold',
+    position: 'absolute',
+  },
+  button: {
+    backgroundColor: '#f4a261',
+    top: 150,
+    borderRadius: 10,
+    elevation: 5,
+    width: '90%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+    height: 50,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  mainContainer: {
+    elevation: 80,
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
+    backgroundColor: '#f4a261',
+    height: 50,
+    width: '100%',
+    bottom: 200,
+  },
+});
+
+export default Level05;

src/screens/home/game/game01/progress/Level06.js

+import React from 'react';
+import {View, StyleSheet, TouchableOpacity, Text} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {COLORS, IMGS, ROUTES} from '../../../../../constants';
+
+const Level06 = ({route, navigation}) => {
+  return (
+    <LinearGradient
+      style={{
+        flex: 1,
+      }}
+      colors={[
+        '#D9EDBF',
+        '#FFD3B5',
+        COLORS.white,
+        '#E8D3FF',
+        '#DAF1F9',
+        '#F6DFEB',
+      ]}
+      start={{x: 0.0, y: 0.0}}
+      end={{x: 1.0, y: 1.0}}>
+      <View style={styles.container}>
+        <View style={styles.mainContainer}>
+          <Text style={styles.mainText}>Your Gaming Level</Text>
+        </View>
+        <View style={styles.diamondContainer}>
+          <View style={styles.innerCircle}>
+            <Text style={styles.scoreText}>3</Text>
+          </View>
+        </View>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => navigation.navigate(ROUTES.GameLevel3)}>
+          <Text style={styles.buttonText}>Choose a Game</Text>
+        </TouchableOpacity>
+      </View>
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  gradientBackground: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  diamondContainer: {
+    width: 250,
+    height: 250,
+    transform: [{rotate: '45deg'}],
+    backgroundColor: '#e76f51',
+    alignItems: 'center',
+    justifyContent: 'center',
+    elevation: 10,
+    borderRadius: 20,
+  },
+  innerCircle: {
+    width: 180,
+    height: 180,
+    borderRadius: 90,
+    backgroundColor: '#f4a261',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transform: [{rotate: '-45deg'}],
+    elevation: 50,
+  },
+  scoreText: {
+    color: '#ffffff',
+    fontSize: 100,
+    fontWeight: 'bold',
+  },
+  mainText: {
+    color: 'white',
+    fontSize: 25,
+    fontWeight: 'bold',
+    position: 'absolute',
+  },
+  button: {
+    backgroundColor: '#f4a261',
+    top: 150,
+    borderRadius: 10,
+    elevation: 5,
+    width: '90%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+    height: 50,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  mainContainer: {
+    elevation: 80,
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
+    backgroundColor: '#f4a261',
+    height: 50,
+    width: '100%',
+    bottom: 200,
+  },
+});
+
+export default Level06;

src/screens/home/game/game02/level01.js

+/* eslint-disable prettier/prettier */
+/* eslint-disable react-native/no-inline-styles */
+// Import statements
+import React, {useState, useRef, useEffect} from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Image,
+  Alert,
+  ScrollView,
+} from 'react-native';
+import {COLORS, IMGS, ROUTES} from '../../../../constants';
+import Sound from 'react-native-sound';
+
+const Game02Level01 = ({navigation, route}) => {
+  const [budget, setBudget] = useState(5000); // Starting budget
+  const [collectedItems, setCollectedItems] = useState([]);
+  const [healthyCost, setHealthyCost] = useState(0);
+  const [unhealthyCost, setUnhealthyCost] = useState(0);
+  const cartIcon = IMGS.game_img_18;
+  const [cartVisible, setCartVisible] = useState(false);
+  const backgroundMusic = useRef(null);
+
+  const [isMuted, setIsMuted] = useState(false);
+
+  useEffect(() => {
+    backgroundMusic.current = new Sound(
+      require('../../../../assets/audios/music_name_a.mp3'),
+      error => {
+        if (error) {
+          console.log('Failed to load the sound', error);
+          return;
+        }
+        // Play the music as soon as the component mounts and loop indefinitely
+        backgroundMusic.current.play();
+        backgroundMusic.current.setNumberOfLoops(-1);
+      },
+    );
+
+    return () => backgroundMusic.current.release(); // Release the audio player resource when the component unmounts
+  }, []);
+
+  const toggleMute = () => {
+    setIsMuted(!isMuted);
+    // Make sure backgroundMusic.current is not null
+    if (backgroundMusic.current) {
+      if (isMuted) {
+        backgroundMusic.current.setVolume(1.0);
+      } else {
+        backgroundMusic.current.setVolume(0.0);
+      }
+    }
+  };
+
+  const openCart = () => {
+    setCartVisible(true);
+  };
+
+  // Dummy data for items
+  const items = [
+    {
+      id: 1,
+      name: 'Spinach',
+      cost: 150,
+      type: 'healthy',
+      image: IMGS.game_img_19,
+    },
+    {
+      id: 2,
+      name: 'Candy',
+      cost: 150,
+      type: 'unhealthy',
+      image: IMGS.game_img_20,
+    },
+    {
+      id: 3,
+      name: 'Carrot',
+      cost: 250,
+      type: 'healthy',
+      image: IMGS.game_img_21,
+    },
+    {
+      id: 4,
+      name: 'French Fries',
+      cost: 140,
+      type: 'unhealthy',
+      image: IMGS.game_img_22,
+    },
+    {
+      id: 5,
+      name: 'Tomato',
+      cost: 130,
+      type: 'healthy',
+      image: IMGS.game_img_23,
+    },
+    {
+      id: 6,
+      name: 'Doughnut',
+      cost: 100,
+      type: 'unhealthy',
+      image: IMGS.game_img_24,
+    },
+    {
+      id: 7,
+      name: 'Fruits',
+      cost: 250,
+      type: 'healthy',
+      image: IMGS.game_img_25,
+    },
+    {
+      id: 8,
+      name: 'Eggs',
+      cost: 80,
+      type: 'healthy',
+      image: IMGS.game_img_26,
+    },
+    {
+      id: 9,
+      name: 'Milk',
+      cost: 200,
+      type: 'healthy',
+      image: IMGS.game_img_27,
+    },
+    {
+      id: 10,
+      name: 'Water',
+      cost: 150,
+      type: 'healthy',
+      image: IMGS.game_img_28,
+    },
+    {
+      id: 11,
+      name: 'Hot dogs',
+      cost: 150,
+      type: 'unhealthy',
+      image: IMGS.game_img_29,
+    },
+    {
+      id: 12,
+      name: 'Oats',
+      cost: 300,
+      type: 'healthy',
+      image: IMGS.game_img_30,
+    },
+  ];
+
+  const collectItem = item => {
+    if (budget - item.cost >= 0) {
+      setBudget(budget - item.cost);
+      setCollectedItems([...collectedItems, item]);
+
+      if (item.type === 'healthy') {
+        setHealthyCost(prevCost => prevCost + item.cost);
+      } else {
+        setUnhealthyCost(prevCost => prevCost + item.cost);
+      }
+
+      // Use a setTimeout to ensure state updates have been applied before check
+      setTimeout(() => {
+        if (unhealthyCost > 2000) {
+          Alert.alert('Game lost!', 'Choose healthier foods. 🍇🍌🍉🥬🥕🍒',
+          [
+            {
+              text: 'OK',
+              onPress: () => {
+                navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS);
+              },
+            },
+          ]);
+        } else if (healthyCost > 2000) {
+          Alert.alert('Game won!',
+          [
+            {
+              text: 'OK',
+              onPress: () => {
+                navigation.navigate(ROUTES.Game02ProgressLevel03);
+              },
+            },
+          ]);
+        }
+      }, 0);
+    } else {
+      Alert.alert('Not enough budget',
+      [
+        {
+          text: 'OK',
+          onPress: () => {
+            navigation.navigate(ROUTES.CHOOSE_GAME);
+          },
+        },
+      ]);
+    }
+  };
+
+  return (
+    <ScrollView style={styles.container}>
+      <View style={styles.rack}>
+        <View style={styles.mainSquare}>
+        <View style={styles.main}>
+          <Text style={styles.budgetText}>Budget: Rs:{budget}</Text>
+        </View>
+        <View>
+        <TouchableOpacity
+            style={{
+              backgroundColor: COLORS.white,
+              borderColor: COLORS.white,
+              height: 50,
+              justifyContent: 'center',
+              alignItems: 'center',
+              borderRadius: 14,
+              width: 50,
+            }}
+            onPress={toggleMute}>
+            <Text
+              medium
+              center
+              style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}>
+              {isMuted ? '🔇' : '🔊'}
+            </Text>
+          </TouchableOpacity>
+        </View>
+        </View>
+        <View style={styles.itemsContainer}>
+          {items.map(item => (
+            <TouchableOpacity
+              key={item.id}
+              style={styles.item}
+              onPress={() => collectItem(item)}>
+              <Image source={item.image} style={styles.itemImage} />
+              <Text style={styles.itemText}>{item.name}</Text>
+              <Text style={styles.itemText}>Rs:{item.cost}</Text>
+            </TouchableOpacity>
+          ))}
+        </View>
+        <View style={styles.two}>
+          <View style={styles.one}>
+            <Text style={styles.budgetText}>
+              Healthy Foods Cost: Rs:{healthyCost}
+            </Text>
+          </View>
+          <View style={styles.one}>
+            <Text style={styles.budgetText}>
+              Unhealthy Foods Cost: Rs:{unhealthyCost}
+            </Text>
+          </View>
+        </View>
+        <View>
+          <TouchableOpacity onPress={openCart} style={styles.cartIconContainer}>
+            <Image source={cartIcon} style={styles.cartIcon} />
+            <View style={styles.cartItemCountContainer}>
+              <Text style={styles.cartItemCountText}>
+                {collectedItems.length}
+              </Text>
+            </View>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f0f0f0',
+  },
+  rack: {
+    padding: 20,
+    backgroundColor: '#380000',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    height: 844,
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  budgetText: {
+    display: 'flex',
+    justifyContent: 'center',
+    color: 'white',
+    alignItems: 'center',
+    margin: 10,
+  },
+  itemsContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'space-around',
+  },
+  item: {
+    width: '20%',
+    padding: 6,
+    margin: '1%',
+    borderWidth: 1,
+    borderColor: '#ccc',
+    backgroundColor: '#fff',
+    borderRadius: 10,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.22,
+    shadowRadius: 2.22,
+    elevation: 3,
+    alignItems: 'center',
+  },
+  itemImage: {
+    width: 50,
+    height: 50,
+    marginBottom: 5,
+  },
+  main: {
+    width: 180,
+    height: 40,
+    marginBottom: 1,
+    backgroundColor: '#6633CC',
+    borderRadius: 10,
+    justifyContent: 'center',
+    display: 'flex',
+    alignContent: 'flex-start',
+    marginTop: 8,
+  },
+  mainSquare: {
+    width: '100%',
+    height: 60,
+    marginBottom: 10,
+    display: 'flex',
+    alignContent: 'center',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'space-around',
+  },
+  one: {
+    width: 250,
+    height: 40,
+    marginBottom: 15,
+    backgroundColor: '#FF3399',
+    borderRadius: 10,
+    justifyContent: 'center',
+    display: 'flex',
+    alignContent: 'center',
+  },
+  two: {
+    width: 130,
+    height: 30,
+    margin: 5,
+    borderRadius: 10,
+    marginLeft: 70,
+    flexDirection: 'column',
+    alignItems: 'center',
+  },
+  cartIconContainer: {
+    position: 'absolute',
+    top: 10,
+    right: 50,
+    zIndex: 1,
+  },
+  cartIcon: {
+    width: 230,
+    height: 230,
+    // marginTop: 1,
+    left: 50,
+  },
+  cartItemCountContainer: {
+    position: 'absolute',
+    right: 130,
+    top: 83,
+    backgroundColor: '#666699',
+    borderRadius: 45,
+    width: 50,
+    height: 50,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 1,
+  },
+  cartItemCountText: {
+    color: 'white',
+  },
+  itemText: {
+    color: 'black',
+  },
+});
+
+export default Game02Level01;

src/screens/home/game/game02/level02.js

+/* eslint-disable react-native/no-inline-styles */
+import React, {useState, useEffect, useRef} from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  ScrollView,
+  Alert,
+  Image,
+  Button,
+} from 'react-native';
+import {COLORS, IMGS, ROUTES} from '../../../../constants';
+import Sound from 'react-native-sound';
+// Dummy data for baby gear items
+const babyGearItems = [
+  {id: 1, image: IMGS.game_img_38, cost: 1200, essential: false},
+  {id: 2, image: IMGS.game_img_32, cost: 500, essential: true},
+  {id: 3, image: IMGS.game_img_31, cost: 800, essential: true},
+  {id: 4, image: IMGS.game_img_34, cost: 200, essential: true},
+  {id: 5, image: IMGS.game_img_37, cost: 350, essential: false},
+  {id: 6, image: IMGS.game_img_36, cost: 200, essential: true},
+  {id: 7, image: IMGS.game_img_35, cost: 450, essential: true},
+  {id: 8, image: IMGS.game_img_33, cost: 700, essential: true},
+  {id: 9, image: IMGS.game_img_39, cost: 900, essential: false},
+  {id: 10, image: IMGS.game_img_40, cost: 300, essential: true},
+  {id: 11, image: IMGS.game_img_41, cost: 950, essential: false},
+  {id: 12, image: IMGS.game_img_42, cost: 150, essential: true},
+];
+
+const CravingsPuzzleGame02Level02 = ({navigation}) => {
+  const initialBudget = 10000;
+  const [budget, setBudget] = useState(10000); // Starting budget
+  const [purchasedItems, setPurchasedItems] = useState([]);
+  const cartIcon = IMGS.game_img_18;
+  const [cartVisible, setCartVisible] = useState(false);
+  const [healthyCost, setHealthyCost] = useState(0);
+  const [unhealthyCost, setUnhealthyCost] = useState(0);
+  const backgroundMusic = useRef(null);
+
+  const [isMuted, setIsMuted] = useState(false);
+
+  useEffect(() => {
+    backgroundMusic.current = new Sound(
+      require('../../../../assets/audios/music_name_b.mp3'),
+      error => {
+        if (error) {
+          console.log('Failed to load the sound', error);
+          return;
+        }
+        // Play the music as soon as the component mounts and loop indefinitely
+        backgroundMusic.current.play();
+        // backgroundMusic.current.setNumberOfLoops(-1);
+      },
+    );
+
+    return () => backgroundMusic.current.release(); // Release the audio player resource when the component unmounts
+  }, []);
+
+  const toggleMute = () => {
+    setIsMuted(!isMuted);
+    // Make sure backgroundMusic.current is not null
+    if (backgroundMusic.current) {
+      if (isMuted) {
+        backgroundMusic.current.setVolume(1.0);
+      } else {
+        backgroundMusic.current.setVolume(0.0);
+      }
+    }
+  };
+
+  const openCart = () => {
+    setCartVisible(true);
+  };
+
+  const resetGame = () => {
+    setBudget(initialBudget); // Reset budget to initial
+    setPurchasedItems([]); // Clear purchased items
+    setHealthyCost(0); // Reset healthy cost counter
+    setUnhealthyCost(0); // Reset unhealthy cost counter
+  };
+
+  const purchaseItem = item => {
+    if (budget - item.cost >= 0) {
+      setBudget(budget - item.cost);
+      setPurchasedItems([...purchasedItems, item]);
+
+      if (item.essential === true) {
+        setHealthyCost(prevCost => prevCost + item.cost);
+      } else {
+        setUnhealthyCost(prevCost => prevCost + item.cost);
+      }
+
+      setTimeout(() => {
+        if (unhealthyCost > 2000) {
+          Alert.alert('Game lost!', 'Choose essintial items!', [
+            {
+              text: 'OK',
+              onPress: () => {
+                navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS);
+              },
+            },
+          ]);
+        } else if (healthyCost > 2000) {
+          Alert.alert('Game won!', [
+            {
+              text: 'OK',
+              onPress: () => {
+                navigation.navigate(ROUTES.Game02ProgressLevel06);
+              },
+            },
+          ]);
+        }
+      }, 0);
+    } else {
+      Alert.alert('Not enough budget');
+    }
+
+    setBudget(currentBudget => currentBudget - item.cost);
+    setPurchasedItems(currentItems => [...currentItems, item]);
+  };
+
+  return (
+    <ScrollView style={styles.container}>
+      <View style={styles.mainSquare}>
+        <View style={styles.budgetContainer}>
+          <Text style={styles.budgetText}>Budget: Rs {budget}</Text>
+          <Button title="Refresh" onPress={resetGame} color="#DE3163" />
+        </View>
+        <View>
+          <TouchableOpacity
+            style={{
+              backgroundColor: COLORS.white,
+              borderColor: COLORS.white,
+              height: 50,
+              justifyContent: 'center',
+              alignItems: 'center',
+              borderRadius: 14,
+              width: 50,
+            }}
+            onPress={toggleMute}>
+            <Text
+              medium
+              center
+              style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}>
+              {isMuted ? '🔇' : '🔊'}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+      <Text style={styles.new}>Select necessary items for a baby</Text>
+      <View style={styles.itemsContainer}>
+        {babyGearItems.map(item => (
+          <TouchableOpacity
+            key={item.id}
+            style={styles.item}
+            onPress={() => purchaseItem(item)}>
+            <Image source={item.image} style={styles.itemImage} />
+            <Text style={styles.itemText}>Rs {item.cost}</Text>
+          </TouchableOpacity>
+        ))}
+        <View style={styles.two}>
+          <View style={styles.one}>
+            <Text style={styles.budgetNewText}>
+              Healthy Foods Cost: Rs:{healthyCost}
+            </Text>
+          </View>
+          <View style={styles.one}>
+            <Text style={styles.budgetNewText}>
+              Unhealthy Foods Cost: Rs:{unhealthyCost}
+            </Text>
+          </View>
+        </View>
+        <View>
+          <TouchableOpacity onPress={openCart} style={styles.cartIconContainer}>
+            <Image source={cartIcon} style={styles.cartIcon} />
+            <View style={styles.cartItemCountContainer}>
+              <Text style={styles.cartItemCountText}>
+                {purchasedItems.length}
+              </Text>
+            </View>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  budgetText: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    backgroundColor: 'black',
+    color: 'white',
+    padding: 10,
+    width: 200,
+    marginRight: 10,
+    marginTop: 2,
+  },
+  new: {
+    fontSize: 15,
+    fontWeight: 'bold',
+    backgroundColor: '#6633CC',
+    color: 'white',
+    padding: 5,
+  },
+  itemsContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'space-around',
+    backgroundColor: '#380000',
+    height: 800,
+  },
+  budgetContainer: {
+    flexDirection: 'row',
+    // flexWrap: 'wrap',
+    // justifyContent: 'space-around',
+  },
+  itemImage: {
+    width: 60,
+    height: 70,
+    marginBottom: 5,
+  },
+  item: {
+    width: '20%',
+    height: '15%',
+    backgroundColor: '#f9f9f9',
+    padding: 8,
+    alignItems: 'center',
+    margin: 5,
+    borderRadius: 10,
+    shadowColor: '#000',
+    shadowOffset: {width: 0, height: 2},
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  itemText: {
+    fontSize: 14,
+    color: 'black',
+  },
+  cartIconContainer: {
+    position: 'absolute',
+    top: 50,
+    right: 1,
+    zIndex: 1,
+  },
+  cartIcon: {
+    width: 230,
+    height: 230,
+    // marginTop: 10,
+    // left: 50,
+  },
+  cartItemCountContainer: {
+    position: 'absolute',
+    // right: 130,
+    top: 82,
+    backgroundColor: '#666699',
+    borderRadius: 45,
+    width: 50,
+    height: 50,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 1,
+  },
+  cartItemCountText: {
+    color: 'white',
+  },
+  one: {
+    width: 250,
+    height: 50,
+    // marginBottom: 15,
+    // backgroundColor: '#FF3399',
+    // borderRadius: 10,
+    justifyContent: 'center',
+    display: 'flex',
+    alignContent: 'center',
+  },
+  mainSquare: {
+    width: '100%',
+    height: 60,
+    marginBottom: 10,
+    display: 'flex',
+    alignContent: 'center',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'space-around',
+    marginTop: 5,
+  },
+  budgetNewText: {
+    fontSize: 15,
+    fontWeight: 'bold',
+    backgroundColor: 'rgba(255, 255, 255, 0.5)',
+    color: 'black',
+    padding: 10,
+    width: 280,
+    zIndex: 2,
+    marginTop: 2,
+    borderRadius: 10,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default CravingsPuzzleGame02Level02;

src/screens/home/game/game02/level03.js

+/* eslint-disable react-native/no-inline-styles */
+import React, {useState, useEffect, useRef} from 'react';
+import {
+  View,
+  Text,
+  Image,
+  TouchableOpacity,
+  StyleSheet,
+  Alert,
+} from 'react-native';
+import {IMGS, ROUTES, COLORS} from '../../../../constants';
+import Sound from 'react-native-sound';
+// A simple array of names, meanings, and origins for demonstration
+const namesData = [
+  {name: 'Yasas', meaning: 'Fame, Glory', origin: 'Sinhalese'},
+  {name: 'Ashan', meaning: 'Eternal, Immortal', origin: 'Sinhalese'},
+  {name: 'Nirmala', meaning: 'Pure, Clean', origin: 'Sinhalese'},
+  {name: 'Tharaka', meaning: 'Star', origin: 'Sinhalese'},
+  {
+    name: 'Lakshmi',
+    meaning: 'Fortune, Wealth',
+    origin: 'Sinhalese/Tamil',
+  },
+  {
+    name: 'Anjali',
+    meaning: 'Gift, Offering',
+    origin: 'Sinhalese/Tamil',
+  },
+  {name: 'Kumara', meaning: 'Prince', origin: 'Sinhalese'},
+  {name: 'Suren', meaning: 'Wise', origin: 'Tamil'},
+  {name: 'Vihanga', meaning: 'Bird', origin: 'Sinhalese'},
+  {name: 'Aruni', meaning: 'Dawn', origin: 'Sinhalese'},
+  {name: 'Bhagya', meaning: 'Luck, Fortune', origin: 'Sinhalese'},
+  {name: 'Ruwan', meaning: 'Gold', origin: 'Sinhalese'},
+  {name: 'Nilani', meaning: 'Moon', origin: 'Tamil'},
+  {name: 'Asha', meaning: 'Moon', origin: 'Sinhalese'},
+  {name: 'Malsha', meaning: 'Moon', origin: 'Sinhalese'},
+  {name: 'Kasuni', meaning: 'Moon', origin: 'Sinhalese'},
+  {name: 'Kasun', meaning: 'Moon', origin: 'Sinhalese'},
+  {name: 'Avarjana', meaning: 'Moon', origin: 'Sinhalese'},
+  {name: 'Nadeesha', meaning: 'Moon', origin: 'Sinhalese'},
+  {name: 'Nimesha', meaning: 'Moon', origin: 'Sinhalese'},
+  {name: 'Mihiranga', meaning: 'Moon', origin: 'Sinhalese'},
+  {name: 'Maheshika', meaning: 'Moon', origin: 'Sinhalese'},
+  {name: 'Sasvi', meaning: 'Moon', origin: 'Sinhalese'},
+  {name: 'Sameera', meaning: 'Moon', origin: 'Sinhalese'},
+  {name: 'Budara', meaning: 'Moon', origin: 'Sinhalese'},
+  {name: 'Vinuki', meaning: 'Moon', origin: 'Sinhalese'},
+  {name: 'Kyron', meaning: 'Moon', origin: 'Sinhalese'},
+  {name: 'Ramesh', meaning: 'Moon', origin: 'Sinhalese'},
+  {name: 'Hansa', meaning: 'Moon', origin: 'Sinhalese'},
+  {name: 'Hansi', meaning: 'Moon', origin: 'Sinhalese'},
+  {name: 'Nipun', meaning: 'Moon', origin: 'Sinhalese'},
+  {name: 'Dinithi', meaning: 'Moon', origin: 'Sinhalese'},
+  {name: 'Geethmi', meaning: 'Moon', origin: 'Sinhalese'},
+  {name: 'Chathuni', meaning: 'Moon', origin: 'Sinhalese'},
+  {name: 'Mahela', meaning: 'Moon', origin: 'Sinhalese'},
+  {name: 'Ravindu', meaning: 'Moon', origin: 'Sinhalese'},
+  {name: 'Sahan', meaning: 'Moon', origin: 'Sinhalese'},
+  {name: 'Tharushi', meaning: 'Moon', origin: 'Sinhalese'},
+  {name: 'Sanduni', meaning: 'Moon', origin: 'Sinhalese'},
+  {name: 'Sachini', meaning: 'Moon', origin: 'Sinhalese'},
+  {name: 'Pawani', meaning: 'Moon', origin: 'Sinhalese'},
+  {name: 'Pasan', meaning: 'Moon', origin: 'Sinhalese'},
+  {name: 'Kumari', meaning: 'Moon', origin: 'Sinhalese'},
+  {name: 'Kasun', meaning: 'Moon', origin: 'Sinhalese'},
+  {name: 'Nila', meaning: 'Moon', origin: 'Tamil'},
+  {name: 'Mohomad', meaning: 'Moon', origin: 'Tamil'},
+  {name: 'Kathrina', meaning: 'Moon', origin: 'Tamil'},
+  {name: 'Umar', meaning: 'Moon', origin: 'Tamil'},
+  {name: 'Fathima', meaning: 'Moon', origin: 'Tamil'},
+];
+
+const PuzzleGame02Level03 = ({navigation}) => {
+  const letters = [
+    'A',
+    'B',
+    'C',
+    'D',
+    'E',
+    'F',
+    'G',
+    'H',
+    'I',
+    'J',
+    'K',
+    'L',
+    'M',
+    'N',
+    'O',
+    'P',
+    'Q',
+    'R',
+    'S',
+    'T',
+    'U',
+    'V',
+    'W',
+    'X',
+    'Y',
+    'Z',
+  ];
+  const [guess, setGuess] = useState([]);
+  const [nameInfo, setNameInfo] = useState(null);
+  const babyImage = IMGS.game_img_13;
+
+  const backgroundMusic = useRef(null);
+  const [isMuted, setIsMuted] = useState(false);
+
+  useEffect(() => {
+    backgroundMusic.current = new Sound(
+      require('../../../../assets/audios/music_name_c.mp3'),
+      error => {
+        if (error) {
+          console.log('Failed to load the sound', error);
+          return;
+        }
+        // Play the music as soon as the component mounts and loop indefinitely
+        backgroundMusic.current.play();
+        // backgroundMusic.current.setNumberOfLoops(-1);
+      },
+    );
+
+    return () => backgroundMusic.current.release(); // Release the audio player resource when the component unmounts
+  }, []);
+
+  const toggleMute = () => {
+    setIsMuted(!isMuted);
+    // Make sure backgroundMusic.current is not null
+    if (backgroundMusic.current) {
+      if (isMuted) {
+        backgroundMusic.current.setVolume(1.0);
+      } else {
+        backgroundMusic.current.setVolume(0.0);
+      }
+    }
+  };
+
+  const checkGuess = () => {
+    const guessString = guess.join('');
+    const nameEntry = namesData.find(
+      entry => entry.name.toLowerCase() === guessString.toLowerCase(),
+    );
+    if (nameEntry) {
+      setNameInfo(nameEntry);
+      Alert.alert('Correct!', `You've guessed a name: ${nameEntry.name}`, [
+        {
+          text: 'OK',
+          onPress: () => {
+            navigation.navigate(ROUTES.Game02ProgressLevel01);
+          },
+        },
+      ]);
+      setGuess([]);
+    } else {
+      Alert.alert('Try Again', "That's not a match. Keep trying!");
+      setGuess([]);
+      setNameInfo(null);
+    }
+  };
+
+  const addLetterToGuess = letter => {
+    setGuess([...guess, letter]);
+  };
+
+  const resetGame = () => {
+    setGuess([]);
+    setNameInfo(null);
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={{marginTop: 1}}>
+        <TouchableOpacity
+          style={{
+            backgroundColor: COLORS.white,
+            borderColor: COLORS.white,
+            height: 60,
+            marginBottom: 10,
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderRadius: 14,
+            width: 50,
+            // marginTop: 1,
+            marginLeft: 300,
+          }}
+          onPress={toggleMute}>
+          <Text
+            medium
+            center
+            style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}>
+            {isMuted ? '🔇' : '🔊'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+      <Text style={styles.instructions}>Suggest a name for your baby!</Text>
+      <View>
+        <Image source={babyImage} style={styles.babyImage} />
+      </View>
+      <TouchableOpacity onPress={resetGame} style={styles.button}>
+        <Text style={styles.buttonText}>Refresh</Text>
+      </TouchableOpacity>
+      <View style={styles.itemcContainer}>
+        <View style={styles.lettersContainer}>
+          {letters.map((letter, index) => (
+            <TouchableOpacity
+              key={index}
+              style={styles.letterBox}
+              onPress={() => addLetterToGuess(letter)}>
+              <Text style={styles.letterText}>{letter}</Text>
+            </TouchableOpacity>
+          ))}
+        </View>
+      </View>
+      <Text style={styles.guessText}>Current Guess</Text>
+      <View style={styles.currentGuess}>
+        <Text style={styles.guessText}>{guess.join('')}</Text>
+      </View>
+      <TouchableOpacity onPress={checkGuess} style={styles.button}>
+        <Text style={styles.buttonText}>Submit Guess</Text>
+      </TouchableOpacity>
+      {nameInfo && (
+        <View style={styles.infoContainer}>
+          <Text style={styles.nameText}>Name: {nameInfo.name}</Text>
+          {/* <Text style={styles.detailText}>Meaning: {nameInfo.meaning}</Text> */}
+          <Text style={styles.detailText}>Origin: {nameInfo.origin}</Text>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 20,
+    backgroundColor: '#32AFA9',
+  },
+  itemcContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    // padding: 2,
+    // backgroundColor: '#33CCCC',
+  },
+  instructions: {
+    marginBottom: 5,
+    fontSize: 22,
+    color: 'black',
+    fontWeight: 'bold',
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: '#ddd',
+    width: '80%',
+    padding: 10,
+    marginBottom: 20,
+    color: 'black',
+  },
+  button: {
+    backgroundColor: '#660033',
+    padding: 10,
+    borderRadius: 5,
+  },
+  buttonText: {
+    color: '#fff',
+    fontWeight: 'bold',
+  },
+  infoContainer: {
+    marginTop: 20,
+    marginBottom: 70,
+  },
+  nameText: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: 'black',
+    marginBottom: 10,
+  },
+  detailText: {
+    fontSize: 16,
+    color: 'black',
+    fontWeight: 'bold',
+  },
+  lettersContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    marginBottom: 20,
+  },
+  letterBox: {
+    width: 40,
+    height: 45,
+    backgroundColor: '#003366',
+    justifyContent: 'center',
+    alignItems: 'center',
+    margin: 5,
+    borderRadius: 5,
+  },
+  letterText: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: 'white',
+  },
+  guessText: {
+    fontSize: 20,
+    marginBottom: 10,
+    fontWeight: 'bold',
+    color: '#CC0066',
+  },
+  currentGuess: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    borderColor: 'blue',
+  },
+  babyImage: {
+    width: 80,
+    height: 100,
+    marginBottom: 10,
+    marginTop: 5,
+  },
+});
+
+export default PuzzleGame02Level03;

src/screens/home/game/game02/level04.js

+/* eslint-disable react-native/no-inline-styles */
+import React, {useState, useEffect, useRef} from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Alert,
+  StyleSheet,
+  Image,
+  ImageBackground,
+} from 'react-native';
+import {IMGS, COLORS, ROUTES} from '../../../../constants';
+import Sound from 'react-native-sound';
+
+const gridSize = 5; // 5x5 grid
+const initialBoard = Array(gridSize).fill(Array(gridSize).fill(null)); // Create a 5x5 grid
+
+const Game02Level04 = ({navigation}) => {
+  const [playerPosition, setPlayerPosition] = useState({x: 0, y: 0});
+  const player = IMGS.game_img_43;
+  const [collectedItems, setCollectedItems] = useState([]);
+  const [babyItems, setBabyItems] = useState([
+    {x: 2, y: 3, type: 'babyItem', image: IMGS.game_img_17},
+    {x: 0, y: 4, type: 'babyItem', image: IMGS.game_img_36},
+  ]);
+  const [ladyItems, setLadyItems] = useState([
+    {x: 1, y: 1, type: 'ladyItem', image: IMGS.game_img_37},
+    {x: 4, y: 2, type: 'ladyItem', image: IMGS.game_img_39},
+  ]);
+
+  const [selectedCandy, setSelectedCandy] = useState(null);
+  const backgroundMusic = useRef(null);
+
+  const [isMuted, setIsMuted] = useState(false);
+
+  useEffect(() => {
+    backgroundMusic.current = new Sound(
+      require('../../../../assets/audios/music_name_d.mp3'),
+      error => {
+        if (error) {
+          console.log('Failed to load the sound', error);
+          return;
+        }
+        // Play the music as soon as the component mounts and loop indefinitely
+        backgroundMusic.current.play();
+        backgroundMusic.current.setNumberOfLoops(-1);
+      },
+    );
+
+    return () => backgroundMusic.current.release(); // Release the audio player resource when the component unmounts
+  }, []);
+
+  const toggleMute = () => {
+    setIsMuted(!isMuted);
+    // Make sure backgroundMusic.current is not null
+    if (backgroundMusic.current) {
+      if (isMuted) {
+        backgroundMusic.current.setVolume(1.0);
+      } else {
+        backgroundMusic.current.setVolume(0.0);
+      }
+    }
+  };
+
+  const movePlayer = direction => {
+    let newX = playerPosition.x;
+    let newY = playerPosition.y;
+
+    switch (direction) {
+      case 'up':
+        newY = Math.max(0, playerPosition.y - 1);
+        break;
+      case 'down':
+        newY = Math.min(gridSize - 1, playerPosition.y + 1);
+        break;
+      case 'left':
+        newX = Math.max(0, playerPosition.x - 1);
+        break;
+      case 'right':
+        newX = Math.min(gridSize - 1, playerPosition.x + 1);
+        break;
+    }
+
+    setPlayerPosition({x: newX, y: newY});
+    checkForItem(newX, newY);
+  };
+
+  const checkForItem = (x, y) => {
+    const foundBabyItemIndex = babyItems.findIndex(
+      item => item.x === x && item.y === y,
+    );
+    const foundLadyItem = ladyItems.find(item => item.x === x && item.y === y);
+
+    if (foundBabyItemIndex !== -1) {
+      setCollectedItems(currentItems => [...currentItems, `${x},${y}`]); // Use position as a unique identifier
+      Alert.alert('Good job!', 'You found a baby item!');
+
+      // Remove the found baby item from the array to prevent recounting
+      const newBabyItems = [...babyItems];
+      newBabyItems.splice(foundBabyItemIndex, 1);
+      setBabyItems(newBabyItems);
+
+      // Check if two baby items have been collected
+      if (collectedItems.length + 1 >= 2) {
+        Alert.alert('Good job!', 'You found a baby item!', [
+          {
+            text: 'OK',
+            onPress: () => {
+              navigation.navigate(ROUTES.Game02ProgressLevel02);
+            },
+          },
+        ]);
+      }
+    } else if (foundLadyItem) {
+      Alert.alert('Oops!', "This is a lady's item. Try again!", [
+        {
+          text: 'OK',
+          onPress: () => {
+            navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS);
+          },
+        },
+      ]);
+    }
+  };
+
+  const resetGame = () => {
+    setPlayerPosition({x: 0, y: 0}); // Reset player position to the starting point
+    setCollectedItems([]); // Clear collected items
+  };
+
+  return (
+    <ImageBackground
+      source={IMGS.game_img_44}
+      style={styles.backgroundImage}
+      resizeMode="cover">
+      <View style={{marginTop: 1}}>
+        <TouchableOpacity
+          style={{
+            backgroundColor: COLORS.white,
+            borderColor: COLORS.white,
+            height: 60,
+            marginLeft: 300,
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderRadius: 14,
+            width: 50,
+            marginTop: 8,
+          }}
+          onPress={toggleMute}>
+          <Text
+            medium
+            center
+            style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}>
+            {isMuted ? '🔇' : '🔊'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+      <View style={styles.container}>
+        <Text style={styles.mainText}>Select Suitable Baby Items</Text>
+        <View style={styles.gameBoard}>
+          {initialBoard.map((row, rowIndex) => (
+            <View key={`row-${rowIndex}`} style={styles.row}>
+              {row.map((cell, cellIndex) => (
+                <View key={`cell-${cellIndex}`} style={styles.cell}>
+                  {playerPosition.x === cellIndex &&
+                    playerPosition.y === rowIndex && (
+                      <Image source={player} style={styles.playerImage} />
+                    )}
+                  {babyItems.concat(ladyItems).map((item, index) => {
+                    const itemKey = `${item.x},${item.y}`;
+                    if (
+                      item.x === cellIndex &&
+                      item.y === rowIndex &&
+                      !collectedItems.includes(itemKey)
+                    ) {
+                      return (
+                        <Image
+                          key={index}
+                          source={item.image}
+                          style={styles.itemImage}
+                        />
+                      );
+                    }
+                    return null;
+                  })}
+                </View>
+              ))}
+            </View>
+          ))}
+        </View>
+        {/* Up Button */}
+        <TouchableOpacity
+          onPress={() => movePlayer('up')}
+          style={[styles.button, styles.buttonUp]}>
+          <Text style={styles.buttonText}>🔼</Text>
+        </TouchableOpacity>
+
+        <View style={styles.controls}>
+          <TouchableOpacity
+            onPress={() => movePlayer('right')}
+            style={[styles.button, styles.buttonLeft]}>
+            <Text style={styles.buttonText}>▶️</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            onPress={() => movePlayer('left')}
+            style={[styles.button, styles.buttonRight]}>
+            <Text style={styles.buttonText}>◀️</Text>
+          </TouchableOpacity>
+        </View>
+        <TouchableOpacity
+          onPress={() => movePlayer('down')}
+          style={[styles.button, styles.buttonDown]}>
+          <Text style={styles.buttonText}>🔽</Text>
+        </TouchableOpacity>
+      </View>
+    </ImageBackground>
+  );
+};
+
+const styles = StyleSheet.create({
+  backgroundImage: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  gameBoard: {
+    width: 350,
+    height: 350,
+    borderWidth: 2,
+    marginBottom: 20,
+    backgroundColor: '#354259',
+    borderColor: 'white',
+  },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  cell: {
+    flex: 1,
+    borderWidth: 1,
+    borderColor: '#ddd',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  player: {
+    backgroundColor: '#add8e6',
+  },
+  controls: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '50%',
+  },
+  button: {
+    padding: 10,
+    backgroundColor: '#056676',
+    // marginBottom: 75,
+  },
+  playerImage: {
+    width: '100%', // Adjust as needed
+    height: '100%', // Adjust as needed
+    resizeMode: 'contain', // This ensures the image scales correctly within the cell
+  },
+  itemImage: {
+    width: '80%', // Adjust based on your cell size
+    height: '80%',
+    resizeMode: 'contain',
+  },
+  buttonText: {
+    color: 'white',
+    fontWeight: 'bold',
+  },
+  mainText: {
+    color: 'white',
+    fontWeight: 'bold',
+    marginBottom: 35,
+    fontSize: 22,
+    backgroundColor: '#990033',
+    width: '100%',
+    padding: 15,
+    borderRadius: 20,
+  },
+  buttonUp: {
+    top: 1,
+  },
+  buttonLeft: {
+    left: 200,
+  },
+  buttonRight: {
+    right: 70,
+  },
+  buttonDown: {
+    bottom: 1,
+  },
+});
+
+export default Game02Level04;

src/screens/home/game/game02/level05.js

+import React, {useState, useEffect, useRef} from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Alert,
+  StyleSheet,
+  Image,
+  ImageBackground,
+} from 'react-native';
+import {IMGS, COLORS, ROUTES} from '../../../../constants';
+import Sound from 'react-native-sound';
+
+const gridSize = 7;
+const initialBoard = Array(gridSize).fill(Array(gridSize).fill(null)); // Create a 5x5 grid
+
+const Game02Level05 = ({navigation}) => {
+  const [playerPosition, setPlayerPosition] = useState({x: 0, y: 0});
+  const player = IMGS.game_img_43;
+  const [collectedItems, setCollectedItems] = useState([]);
+  const [babyItems, setBabyItems] = useState([
+    {x: 2, y: 3, type: 'babyItem', image: IMGS.game_img_17},
+    {x: 0, y: 4, type: 'babyItem', image: IMGS.game_img_36},
+    {x: 5, y: 6, type: 'babyItem', image: IMGS.game_img_16},
+  ]);
+  const [ladyItems, setLadyItems] = useState([
+    {x: 1, y: 1, type: 'ladyItem', image: IMGS.game_img_37},
+    {x: 4, y: 4, type: 'ladyItem', image: IMGS.game_img_39},
+    {x: 6, y: 1, type: 'ladyItem', image: IMGS.game_img_38},
+  ]);
+
+  const [selectedCandy, setSelectedCandy] = useState(null);
+  const backgroundMusic = useRef(null);
+
+  const [isMuted, setIsMuted] = useState(false);
+
+  useEffect(() => {
+    backgroundMusic.current = new Sound(
+      require('../../../../assets/audios/music_name_e.mp3'),
+      error => {
+        if (error) {
+          console.log('Failed to load the sound', error);
+          return;
+        }
+        // Play the music as soon as the component mounts and loop indefinitely
+        backgroundMusic.current.play();
+        backgroundMusic.current.setNumberOfLoops(-1);
+      },
+    );
+
+    return () => backgroundMusic.current.release(); // Release the audio player resource when the component unmounts
+  }, []);
+
+  const toggleMute = () => {
+    setIsMuted(!isMuted);
+    // Make sure backgroundMusic.current is not null
+    if (backgroundMusic.current) {
+      if (isMuted) {
+        backgroundMusic.current.setVolume(1.0);
+      } else {
+        backgroundMusic.current.setVolume(0.0);
+      }
+    }
+  };
+
+  const movePlayer = direction => {
+    let newX = playerPosition.x;
+    let newY = playerPosition.y;
+
+    switch (direction) {
+      case 'up':
+        newY = Math.max(0, playerPosition.y - 1);
+        break;
+      case 'down':
+        newY = Math.min(gridSize - 1, playerPosition.y + 1);
+        break;
+      case 'left':
+        newX = Math.max(0, playerPosition.x - 1);
+        break;
+      case 'right':
+        newX = Math.min(gridSize - 1, playerPosition.x + 1);
+        break;
+    }
+
+    setPlayerPosition({x: newX, y: newY});
+    checkForItem(newX, newY);
+  };
+
+  const checkForItem = (x, y) => {
+    const foundBabyItemIndex = babyItems.findIndex(
+      item => item.x === x && item.y === y,
+    );
+    const foundLadyItem = ladyItems.find(item => item.x === x && item.y === y);
+
+    if (foundBabyItemIndex !== -1) {
+      setCollectedItems(currentItems => [...currentItems, `${x},${y}`]); // Use position as a unique identifier
+      Alert.alert('Good job!', 'You found a baby item!');
+
+      // Remove the found baby item from the array to prevent recounting
+      const newBabyItems = [...babyItems];
+      newBabyItems.splice(foundBabyItemIndex, 1);
+      setBabyItems(newBabyItems);
+
+      // Check if two baby items have been collected
+      if (collectedItems.length + 1 >= 3) {
+        Alert.alert('Good job!', 'You found a baby item!', [
+          {
+            text: 'OK',
+            onPress: () => {
+              navigation.navigate(ROUTES.Game02ProgressLevel04);
+            },
+          },
+        ]);
+      }
+    } else if (foundLadyItem) {
+      Alert.alert('Oops!', "This is a lady's item. Try again!", [
+        {
+          text: 'OK',
+          onPress: () => {
+            navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS);
+          },
+        },
+      ]);
+    }
+  };
+
+  const resetGame = () => {
+    setPlayerPosition({x: 0, y: 0});
+    setCollectedItems([]);
+  };
+  return (
+    <ImageBackground
+      source={IMGS.game_img_45}
+      style={styles.backgroundImage}
+      resizeMode="cover">
+      <View style={{marginTop: 1}}>
+        <TouchableOpacity
+          style={{
+            backgroundColor: COLORS.white,
+            borderColor: COLORS.white,
+            height: 60,
+            marginLeft: 300,
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderRadius: 14,
+            width: 50,
+            marginTop: 8,
+          }}
+          onPress={toggleMute}>
+          <Text
+            medium
+            center
+            style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}>
+            {isMuted ? '🔇' : '🔊'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+      <View style={styles.container}>
+        <Text style={styles.mainText}>Select Suitable Baby Items</Text>
+        <View style={styles.gameBoard}>
+          {initialBoard.map((row, rowIndex) => (
+            <View key={`row-${rowIndex}`} style={styles.row}>
+              {row.map((cell, cellIndex) => (
+                <View key={`cell-${cellIndex}`} style={styles.cell}>
+                  {playerPosition.x === cellIndex &&
+                    playerPosition.y === rowIndex && (
+                      <Image source={player} style={styles.playerImage} />
+                    )}
+                  {babyItems.concat(ladyItems).map((item, index) => {
+                    const itemKey = `${item.x},${item.y}`;
+                    if (
+                      item.x === cellIndex &&
+                      item.y === rowIndex &&
+                      !collectedItems.includes(itemKey)
+                    ) {
+                      return (
+                        <Image
+                          key={index}
+                          source={item.image}
+                          style={styles.itemImage}
+                        />
+                      );
+                    }
+                    return null;
+                  })}
+                </View>
+              ))}
+            </View>
+          ))}
+        </View>
+        {/* Up Button */}
+        <TouchableOpacity
+          onPress={() => movePlayer('up')}
+          style={[styles.button, styles.buttonUp]}>
+          <Text style={styles.buttonText}>🔼</Text>
+        </TouchableOpacity>
+
+        <View style={styles.controls}>
+          <TouchableOpacity
+            onPress={() => movePlayer('right')}
+            style={[styles.button, styles.buttonLeft]}>
+            <Text style={styles.buttonText}>▶️</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            onPress={() => movePlayer('left')}
+            style={[styles.button, styles.buttonRight]}>
+            <Text style={styles.buttonText}>◀️</Text>
+          </TouchableOpacity>
+        </View>
+        <TouchableOpacity
+          onPress={() => movePlayer('down')}
+          style={[styles.button, styles.buttonDown]}>
+          <Text style={styles.buttonText}>🔽</Text>
+        </TouchableOpacity>
+      </View>
+    </ImageBackground>
+  );
+};
+
+const styles = StyleSheet.create({
+  backgroundImage: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  gameBoard: {
+    width: 370,
+    height: 370,
+    borderWidth: 2,
+    marginBottom: 20,
+    backgroundColor: '#003333',
+    borderColor: 'white',
+  },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  cell: {
+    flex: 1,
+    borderWidth: 1,
+    borderColor: '#ddd',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  player: {
+    backgroundColor: '#add8e6',
+  },
+  controls: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '50%',
+  },
+  button: {
+    padding: 10,
+    backgroundColor: '#046582',
+    // marginBottom: 75,
+  },
+  playerImage: {
+    width: '100%', // Adjust as needed
+    height: '100%', // Adjust as needed
+    resizeMode: 'contain', // This ensures the image scales correctly within the cell
+  },
+  itemImage: {
+    width: '80%', // Adjust based on your cell size
+    height: '80%',
+    resizeMode: 'contain',
+  },
+  buttonText: {
+    color: 'white',
+    fontWeight: 'bold',
+  },
+  mainText: {
+    color: 'white',
+    fontWeight: 'bold',
+    marginBottom: 35,
+    fontSize: 22,
+    backgroundColor: '#990033',
+    width: '100%',
+    padding: 15,
+    borderRadius: 20,
+  },
+  buttonUp: {
+    top: 1,
+  },
+  buttonLeft: {
+    left: 200,
+  },
+  buttonRight: {
+    right: 70,
+  },
+  buttonDown: {
+    bottom: 1,
+  },
+});
+
+export default Game02Level05;

src/screens/home/game/game02/level06.js

+/* eslint-disable react-native/no-inline-styles */
+import React, {useState, useEffect, useRef} from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Alert,
+  StyleSheet,
+  Image,
+  ImageBackground,
+} from 'react-native';
+import {IMGS, COLORS, ROUTES} from '../../../../constants';
+import Sound from 'react-native-sound';
+
+const gridSize = 7;
+const initialBoard = Array(gridSize).fill(Array(gridSize).fill(null)); // Create a 5x5 grid
+
+const Game02Level06 = ({navigation}) => {
+  const [playerPosition, setPlayerPosition] = useState({x: 0, y: 0});
+  const player = IMGS.game_img_43;
+  const [collectedItems, setCollectedItems] = useState([]);
+  const [babyItems, setBabyItems] = useState([
+    {x: 2, y: 3, type: 'babyItem', image: IMGS.game_img_17},
+    {x: 0, y: 4, type: 'babyItem', image: IMGS.game_img_36},
+    {x: 5, y: 6, type: 'babyItem', image: IMGS.game_img_16},
+    {x: 3, y: 0, type: 'babyItem', image: IMGS.game_img_33},
+  ]);
+  const [ladyItems, setLadyItems] = useState([
+    {x: 1, y: 1, type: 'ladyItem', image: IMGS.game_img_24},
+    {x: 4, y: 4, type: 'ladyItem', image: IMGS.game_img_39},
+    {x: 6, y: 1, type: 'ladyItem', image: IMGS.game_img_38},
+    {x: 2, y: 5, type: 'ladyItem', image: IMGS.game_img_29},
+  ]);
+
+  const [selectedCandy, setSelectedCandy] = useState(null);
+  const backgroundMusic = useRef(null);
+
+  const [isMuted, setIsMuted] = useState(false);
+
+  useEffect(() => {
+    backgroundMusic.current = new Sound(
+      require('../../../../assets/audios/music_name_e.mp3'),
+      error => {
+        if (error) {
+          console.log('Failed to load the sound', error);
+          return;
+        }
+        // Play the music as soon as the component mounts and loop indefinitely
+        backgroundMusic.current.play();
+        backgroundMusic.current.setNumberOfLoops(-1);
+      },
+    );
+
+    return () => backgroundMusic.current.release(); // Release the audio player resource when the component unmounts
+  }, []);
+
+  const toggleMute = () => {
+    setIsMuted(!isMuted);
+    // Make sure backgroundMusic.current is not null
+    if (backgroundMusic.current) {
+      if (isMuted) {
+        backgroundMusic.current.setVolume(1.0);
+      } else {
+        backgroundMusic.current.setVolume(0.0);
+      }
+    }
+  };
+
+  const movePlayer = direction => {
+    let newX = playerPosition.x;
+    let newY = playerPosition.y;
+
+    switch (direction) {
+      case 'up':
+        newY = Math.max(0, playerPosition.y - 1);
+        break;
+      case 'down':
+        newY = Math.min(gridSize - 1, playerPosition.y + 1);
+        break;
+      case 'left':
+        newX = Math.max(0, playerPosition.x - 1);
+        break;
+      case 'right':
+        newX = Math.min(gridSize - 1, playerPosition.x + 1);
+        break;
+    }
+
+    setPlayerPosition({x: newX, y: newY});
+    checkForItem(newX, newY);
+  };
+
+  const checkForItem = (x, y) => {
+    const foundBabyItemIndex = babyItems.findIndex(
+      item => item.x === x && item.y === y,
+    );
+    const foundLadyItem = ladyItems.find(item => item.x === x && item.y === y);
+
+    if (foundBabyItemIndex !== -1) {
+      setCollectedItems(currentItems => [...currentItems, `${x},${y}`]); // Use position as a unique identifier
+      Alert.alert('Good job!', 'You found a baby item!');
+
+      // Remove the found baby item from the array to prevent recounting
+      const newBabyItems = [...babyItems];
+      newBabyItems.splice(foundBabyItemIndex, 1);
+      setBabyItems(newBabyItems);
+
+      // Check if two baby items have been collected
+      if (collectedItems.length + 1 >= 4) {
+        Alert.alert('Congratulations 🥳🥳! You won the game.', [
+          {
+            text: 'OK',
+            onPress: () => {
+              navigation.navigate(ROUTES.Game02ProgressLevel05);
+            },
+          },
+        ]);
+      }
+    } else if (foundLadyItem) {
+      Alert.alert('Oops!', "This is a lady's item. Try again!", [
+        {
+          text: 'OK',
+          onPress: () => {
+            navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS);
+          },
+        },
+      ]);
+    }
+  };
+
+  const resetGame = () => {
+    setPlayerPosition({x: 0, y: 0});
+    setCollectedItems([]);
+  };
+  return (
+    <ImageBackground
+      source={IMGS.game_img_45}
+      style={styles.backgroundImage}
+      resizeMode="cover">
+      <View style={{marginTop: 1}}>
+        <TouchableOpacity
+          style={{
+            backgroundColor: COLORS.white,
+            borderColor: COLORS.white,
+            height: 60,
+            marginLeft: 300,
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderRadius: 14,
+            width: 50,
+            marginTop: 8,
+          }}
+          onPress={toggleMute}>
+          <Text
+            medium
+            center
+            style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}>
+            {isMuted ? '🔇' : '🔊'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+      <View style={styles.container}>
+        <Text style={styles.mainText}>Select Suitable Baby Items</Text>
+        <View style={styles.gameBoard}>
+          {initialBoard.map((row, rowIndex) => (
+            <View key={`row-${rowIndex}`} style={styles.row}>
+              {row.map((cell, cellIndex) => (
+                <View key={`cell-${cellIndex}`} style={styles.cell}>
+                  {playerPosition.x === cellIndex &&
+                    playerPosition.y === rowIndex && (
+                      <Image source={player} style={styles.playerImage} />
+                    )}
+                  {babyItems.concat(ladyItems).map((item, index) => {
+                    const itemKey = `${item.x},${item.y}`;
+                    if (
+                      item.x === cellIndex &&
+                      item.y === rowIndex &&
+                      !collectedItems.includes(itemKey)
+                    ) {
+                      return (
+                        <Image
+                          key={index}
+                          source={item.image}
+                          style={styles.itemImage}
+                        />
+                      );
+                    }
+                    return null;
+                  })}
+                </View>
+              ))}
+            </View>
+          ))}
+        </View>
+        {/* Up Button */}
+        <TouchableOpacity
+          onPress={() => movePlayer('up')}
+          style={[styles.button, styles.buttonUp]}>
+          <Text style={styles.buttonText}>🔼</Text>
+        </TouchableOpacity>
+
+        <View style={styles.controls}>
+          <TouchableOpacity
+            onPress={() => movePlayer('right')}
+            style={[styles.button, styles.buttonLeft]}>
+            <Text style={styles.buttonText}>▶️</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            onPress={() => movePlayer('left')}
+            style={[styles.button, styles.buttonRight]}>
+            <Text style={styles.buttonText}>◀️</Text>
+          </TouchableOpacity>
+        </View>
+        <TouchableOpacity
+          onPress={() => movePlayer('down')}
+          style={[styles.button, styles.buttonDown]}>
+          <Text style={styles.buttonText}>🔽</Text>
+        </TouchableOpacity>
+      </View>
+    </ImageBackground>
+  );
+};
+
+const styles = StyleSheet.create({
+  backgroundImage: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  gameBoard: {
+    width: 370,
+    height: 370,
+    borderWidth: 2,
+    marginBottom: 20,
+    backgroundColor: '#003333',
+    borderColor: 'white',
+  },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  cell: {
+    flex: 1,
+    borderWidth: 1,
+    borderColor: '#ddd',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  player: {
+    backgroundColor: '#add8e6',
+  },
+  controls: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '50%',
+  },
+  button: {
+    padding: 10,
+    backgroundColor: '#056676',
+    // marginBottom: 75,
+  },
+  playerImage: {
+    width: '100%', // Adjust as needed
+    height: '100%', // Adjust as needed
+    resizeMode: 'contain', // This ensures the image scales correctly within the cell
+  },
+  itemImage: {
+    width: '80%', // Adjust based on your cell size
+    height: '80%',
+    resizeMode: 'contain',
+  },
+  buttonText: {
+    color: 'white',
+    fontWeight: 'bold',
+  },
+  mainText: {
+    color: 'white',
+    fontWeight: 'bold',
+    marginBottom: 35,
+    fontSize: 22,
+    backgroundColor: '#990033',
+    width: '100%',
+    padding: 15,
+    borderRadius: 20,
+  },
+  buttonUp: {
+    top: 1,
+  },
+  buttonLeft: {
+    left: 200,
+  },
+  buttonRight: {
+    right: 70,
+  },
+  buttonDown: {
+    bottom: 1,
+  },
+});
+
+export default Game02Level06;

src/screens/home/game/game02/level07.js

+/* eslint-disable react-native/no-inline-styles */
+import React, {useState, useEffect, useRef} from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Alert,
+  StyleSheet,
+  Image,
+  ImageBackground,
+} from 'react-native';
+import {IMGS, COLORS, ROUTES} from '../../../../constants';
+import Sound from 'react-native-sound';
+
+const gridSize = 9;
+const initialBoard = Array(gridSize).fill(Array(gridSize).fill(null)); // Create a 5x5 grid
+
+const Game02Level07 = ({navigation}) => {
+  const [playerPosition, setPlayerPosition] = useState({x: 0, y: 0});
+  const player = IMGS.game_img_43;
+  const [collectedItems, setCollectedItems] = useState([]);
+  const [babyItems, setBabyItems] = useState([
+    {x: 3, y: 7, type: 'babyItem', image: IMGS.game_img_17},
+    {x: 8, y: 4, type: 'babyItem', image: IMGS.game_img_36},
+    {x: 1, y: 2, type: 'babyItem', image: IMGS.game_img_16},
+    {x: 4, y: 0, type: 'babyItem', image: IMGS.game_img_33},
+  ]);
+  const [ladyItems, setLadyItems] = useState([
+    {x: 8, y: 1, type: 'ladyItem', image: IMGS.game_img_24},
+    {x: 4, y: 3, type: 'ladyItem', image: IMGS.game_img_39},
+    {x: 6, y: 1, type: 'ladyItem', image: IMGS.game_img_38},
+    {x: 2, y: 7, type: 'ladyItem', image: IMGS.game_img_29},
+  ]);
+
+  const [selectedCandy, setSelectedCandy] = useState(null);
+  const backgroundMusic = useRef(null);
+
+  const [isMuted, setIsMuted] = useState(false);
+
+  useEffect(() => {
+    backgroundMusic.current = new Sound(
+      require('../../../../assets/audios/music_name_e.mp3'),
+      error => {
+        if (error) {
+          console.log('Failed to load the sound', error);
+          return;
+        }
+        // Play the music as soon as the component mounts and loop indefinitely
+        backgroundMusic.current.play();
+        backgroundMusic.current.setNumberOfLoops(-1);
+      },
+    );
+
+    return () => backgroundMusic.current.release(); // Release the audio player resource when the component unmounts
+  }, []);
+
+  const toggleMute = () => {
+    setIsMuted(!isMuted);
+    // Make sure backgroundMusic.current is not null
+    if (backgroundMusic.current) {
+      if (isMuted) {
+        backgroundMusic.current.setVolume(1.0);
+      } else {
+        backgroundMusic.current.setVolume(0.0);
+      }
+    }
+  };
+
+  const movePlayer = direction => {
+    let newX = playerPosition.x;
+    let newY = playerPosition.y;
+
+    switch (direction) {
+      case 'up':
+        newY = Math.max(0, playerPosition.y - 1);
+        break;
+      case 'down':
+        newY = Math.min(gridSize - 1, playerPosition.y + 1);
+        break;
+      case 'left':
+        newX = Math.max(0, playerPosition.x - 1);
+        break;
+      case 'right':
+        newX = Math.min(gridSize - 1, playerPosition.x + 1);
+        break;
+    }
+
+    setPlayerPosition({x: newX, y: newY});
+    checkForItem(newX, newY);
+  };
+
+  const resetGame = () => {
+    setPlayerPosition({x: 0, y: 0});
+    setCollectedItems([]);
+  };
+
+  const checkForItem = (x, y) => {
+    const foundBabyItemIndex = babyItems.findIndex(
+      item => item.x === x && item.y === y,
+    );
+    const foundLadyItem = ladyItems.find(item => item.x === x && item.y === y);
+
+    if (foundBabyItemIndex !== -1) {
+      setCollectedItems(currentItems => [...currentItems, `${x},${y}`]); // Use position as a unique identifier
+      Alert.alert('Good job!', 'You found a baby item!');
+
+      // Remove the found baby item from the array to prevent recounting
+      const newBabyItems = [...babyItems];
+      newBabyItems.splice(foundBabyItemIndex, 1);
+      setBabyItems(newBabyItems);
+
+      // Check if two baby items have been collected
+      if (collectedItems.length + 1 >= 4) {
+        Alert.alert('Congratulations 🥳🥳! You won the game.');
+      }
+    } else if (foundLadyItem) {
+      Alert.alert('Oops!', "This is a lady's item. Try again!", [
+        {
+          text: 'OK',
+          onPress: () => {
+            navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS);
+          },
+        },
+      ]);
+    }
+  };
+
+  return (
+    <ImageBackground
+      source={IMGS.game_img_45}
+      style={styles.backgroundImage}
+      resizeMode="cover">
+      <View style={{marginTop: 1}}>
+        <TouchableOpacity
+          style={{
+            backgroundColor: COLORS.white,
+            borderColor: COLORS.white,
+            height: 60,
+            marginLeft: 300,
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderRadius: 14,
+            width: 50,
+            marginTop: 8,
+          }}
+          onPress={toggleMute}>
+          <Text
+            medium
+            center
+            style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}>
+            {isMuted ? '🔇' : '🔊'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+      <View style={styles.container}>
+        <Text style={styles.mainText}>Select Suitable Baby Items</Text>
+        <View style={styles.gameBoard}>
+          {initialBoard.map((row, rowIndex) => (
+            <View key={`row-${rowIndex}`} style={styles.row}>
+              {row.map((cell, cellIndex) => (
+                <View key={`cell-${cellIndex}`} style={styles.cell}>
+                  {playerPosition.x === cellIndex &&
+                    playerPosition.y === rowIndex && (
+                      <Image source={player} style={styles.playerImage} />
+                    )}
+                  {babyItems.concat(ladyItems).map((item, index) => {
+                    const itemKey = `${item.x},${item.y}`;
+                    if (
+                      item.x === cellIndex &&
+                      item.y === rowIndex &&
+                      !collectedItems.includes(itemKey)
+                    ) {
+                      return (
+                        <Image
+                          key={index}
+                          source={item.image}
+                          style={styles.itemImage}
+                        />
+                      );
+                    }
+                    return null;
+                  })}
+                </View>
+              ))}
+            </View>
+          ))}
+        </View>
+        {/* Up Button */}
+        <TouchableOpacity
+          onPress={() => movePlayer('up')}
+          style={[styles.button, styles.buttonUp]}>
+          <Text style={styles.buttonText}>🔼</Text>
+        </TouchableOpacity>
+
+        <View style={styles.controls}>
+          <TouchableOpacity
+            onPress={() => movePlayer('right')}
+            style={[styles.button, styles.buttonLeft]}>
+            <Text style={styles.buttonText}>▶️</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            onPress={() => movePlayer('left')}
+            style={[styles.button, styles.buttonRight]}>
+            <Text style={styles.buttonText}>◀️</Text>
+          </TouchableOpacity>
+        </View>
+        <TouchableOpacity
+          onPress={() => movePlayer('down')}
+          style={[styles.button, styles.buttonDown]}>
+          <Text style={styles.buttonText}>🔽</Text>
+        </TouchableOpacity>
+      </View>
+    </ImageBackground>
+  );
+};
+
+const styles = StyleSheet.create({
+  backgroundImage: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  gameBoard: {
+    width: 370,
+    height: 420,
+    borderWidth: 2,
+    marginBottom: 10,
+    backgroundColor: '#003333',
+    borderColor: 'white',
+  },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  cell: {
+    flex: 1,
+    borderWidth: 1,
+    borderColor: '#ddd',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  player: {
+    backgroundColor: '#add8e6',
+  },
+  controls: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '50%',
+  },
+  button: {
+    padding: 10,
+    backgroundColor: '#056676',
+    // marginBottom: 15,
+  },
+  playerImage: {
+    width: '100%', // Adjust as needed
+    height: '100%', // Adjust as needed
+    resizeMode: 'contain', // This ensures the image scales correctly within the cell
+  },
+  itemImage: {
+    width: '80%', // Adjust based on your cell size
+    height: '80%',
+    resizeMode: 'contain',
+  },
+  buttonText: {
+    color: 'white',
+    fontWeight: 'bold',
+  },
+  mainText: {
+    color: 'white',
+    fontWeight: 'bold',
+    marginBottom: 25,
+    fontSize: 22,
+    backgroundColor: '#990033',
+    width: '100%',
+    padding: 10,
+    borderRadius: 20,
+  },
+  buttonUp: {
+    top: 1,
+  },
+  buttonLeft: {
+    left: 200,
+  },
+  buttonRight: {
+    right: 70,
+  },
+  buttonDown: {
+    bottom: 1,
+  },
+});
+
+export default Game02Level07;

src/screens/home/game/game02/progress/Level01.js

+import React from 'react';
+import {View, StyleSheet, TouchableOpacity, Text} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {COLORS, IMGS, ROUTES} from '../../../../../constants';
+
+const Game02ProgressLevel01 = ({route, navigation}) => {
+  return (
+    <LinearGradient
+      style={{
+        flex: 1,
+      }}
+      colors={[
+        '#D9EDBF',
+        '#FFD3B5',
+        COLORS.white,
+        '#E8D3FF',
+        '#DAF1F9',
+        '#F6DFEB',
+      ]}
+      start={{x: 0.0, y: 0.0}}
+      end={{x: 1.0, y: 1.0}}>
+      <View style={styles.container}>
+        <View style={styles.mainContainer}>
+          <Text style={styles.mainText}>Your Gaming Level</Text>
+        </View>
+        <View style={styles.diamondContainer}>
+          <View style={styles.innerCircle}>
+            <Text style={styles.scoreText}>1</Text>
+          </View>
+        </View>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => navigation.navigate(ROUTES.Game02Level01)}>
+          <Text style={styles.buttonText}>Choose a Game</Text>
+        </TouchableOpacity>
+      </View>
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  gradientBackground: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  diamondContainer: {
+    width: 250,
+    height: 250,
+    transform: [{rotate: '45deg'}],
+    backgroundColor: '#e76f51',
+    alignItems: 'center',
+    justifyContent: 'center',
+    elevation: 10,
+    borderRadius: 20,
+  },
+  innerCircle: {
+    width: 180,
+    height: 180,
+    borderRadius: 90,
+    backgroundColor: '#f4a261',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transform: [{rotate: '-45deg'}],
+    elevation: 50,
+  },
+  scoreText: {
+    color: '#ffffff',
+    fontSize: 100,
+    fontWeight: 'bold',
+  },
+  mainText: {
+    color: 'white',
+    fontSize: 25,
+    fontWeight: 'bold',
+    position: 'absolute',
+  },
+  button: {
+    backgroundColor: '#f4a261',
+    top: 150,
+    borderRadius: 10,
+    elevation: 5,
+    width: '90%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+    height: 50,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  mainContainer: {
+    elevation: 80,
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
+    backgroundColor: '#f4a261',
+    height: 50,
+    width: '100%',
+    bottom: 200,
+  },
+});
+
+export default Game02ProgressLevel01;

src/screens/home/game/game02/progress/Level02.js

+import React from 'react';
+import {View, StyleSheet, TouchableOpacity, Text} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {COLORS, IMGS, ROUTES} from '../../../../../constants';
+
+const Game02ProgressLevel02 = ({route, navigation}) => {
+  return (
+    <LinearGradient
+      style={{
+        flex: 1,
+      }}
+      colors={[
+        '#D9EDBF',
+        '#FFD3B5',
+        COLORS.white,
+        '#E8D3FF',
+        '#DAF1F9',
+        '#F6DFEB',
+      ]}
+      start={{x: 0.0, y: 0.0}}
+      end={{x: 1.0, y: 1.0}}>
+      <View style={styles.container}>
+        <View style={styles.mainContainer}>
+          <Text style={styles.mainText}>Your Gaming Level</Text>
+        </View>
+        <View style={styles.diamondContainer}>
+          <View style={styles.innerCircle}>
+            <Text style={styles.scoreText}>2</Text>
+          </View>
+        </View>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() =>
+            navigation.navigate(ROUTES.CravingsPuzzleGame02Level02)
+          }>
+          <Text style={styles.buttonText}>Choose a Game</Text>
+        </TouchableOpacity>
+      </View>
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  gradientBackground: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  diamondContainer: {
+    width: 250,
+    height: 250,
+    transform: [{rotate: '45deg'}],
+    backgroundColor: '#e76f51',
+    alignItems: 'center',
+    justifyContent: 'center',
+    elevation: 10,
+    borderRadius: 20,
+  },
+  innerCircle: {
+    width: 180,
+    height: 180,
+    borderRadius: 90,
+    backgroundColor: '#f4a261',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transform: [{rotate: '-45deg'}],
+    elevation: 50,
+  },
+  scoreText: {
+    color: '#ffffff',
+    fontSize: 100,
+    fontWeight: 'bold',
+  },
+  mainText: {
+    color: 'white',
+    fontSize: 25,
+    fontWeight: 'bold',
+    position: 'absolute',
+  },
+  button: {
+    backgroundColor: '#f4a261',
+    top: 150,
+    borderRadius: 10,
+    elevation: 5,
+    width: '90%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+    height: 50,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  mainContainer: {
+    elevation: 80,
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
+    backgroundColor: '#f4a261',
+    height: 50,
+    width: '100%',
+    bottom: 200,
+  },
+});
+
+export default Game02ProgressLevel02;

src/screens/home/game/game02/progress/Level03.js

+import React from 'react';
+import {View, StyleSheet, TouchableOpacity, Text} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {COLORS, IMGS, ROUTES} from '../../../../../constants';
+
+const Game02ProgressLevel03 = ({route, navigation}) => {
+  return (
+    <LinearGradient
+      style={{
+        flex: 1,
+      }}
+      colors={[
+        '#D9EDBF',
+        '#FFD3B5',
+        COLORS.white,
+        '#E8D3FF',
+        '#DAF1F9',
+        '#F6DFEB',
+      ]}
+      start={{x: 0.0, y: 0.0}}
+      end={{x: 1.0, y: 1.0}}>
+      <View style={styles.container}>
+        <View style={styles.mainContainer}>
+          <Text style={styles.mainText}>Your Gaming Level</Text>
+        </View>
+        <View style={styles.diamondContainer}>
+          <View style={styles.innerCircle}>
+            <Text style={styles.scoreText}>3</Text>
+          </View>
+        </View>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => navigation.navigate(ROUTES.PuzzleGame02Level03)}>
+          <Text style={styles.buttonText}>Choose a Game</Text>
+        </TouchableOpacity>
+      </View>
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  gradientBackground: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  diamondContainer: {
+    width: 250,
+    height: 250,
+    transform: [{rotate: '45deg'}],
+    backgroundColor: '#e76f51',
+    alignItems: 'center',
+    justifyContent: 'center',
+    elevation: 10,
+    borderRadius: 20,
+  },
+  innerCircle: {
+    width: 180,
+    height: 180,
+    borderRadius: 90,
+    backgroundColor: '#f4a261',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transform: [{rotate: '-45deg'}],
+    elevation: 50,
+  },
+  scoreText: {
+    color: '#ffffff',
+    fontSize: 100,
+    fontWeight: 'bold',
+  },
+  mainText: {
+    color: 'white',
+    fontSize: 25,
+    fontWeight: 'bold',
+    position: 'absolute',
+  },
+  button: {
+    backgroundColor: '#f4a261',
+    top: 150,
+    borderRadius: 10,
+    elevation: 5,
+    width: '90%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+    height: 50,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  mainContainer: {
+    elevation: 80,
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
+    backgroundColor: '#f4a261',
+    height: 50,
+    width: '100%',
+    bottom: 200,
+  },
+});
+
+export default Game02ProgressLevel03;

src/screens/home/game/game02/progress/Level04.js

+import React from 'react';
+import {View, StyleSheet, TouchableOpacity, Text} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {COLORS, IMGS, ROUTES} from '../../../../../constants';
+
+const Game02ProgressLevel04 = ({route, navigation}) => {
+  //   const {predictedGameLevel} = route.params;
+
+  return (
+    <LinearGradient
+      style={{
+        flex: 1,
+      }}
+      colors={[
+        '#D9EDBF',
+        '#FFD3B5',
+        COLORS.white,
+        '#E8D3FF',
+        '#DAF1F9',
+        '#F6DFEB',
+      ]}
+      start={{x: 0.0, y: 0.0}}
+      end={{x: 1.0, y: 1.0}}>
+      <View style={styles.container}>
+        <View style={styles.mainContainer}>
+          <Text style={styles.mainText}>Your Gaming Level</Text>
+        </View>
+        <View style={styles.diamondContainer}>
+          <View style={styles.innerCircle}>
+            <Text style={styles.scoreText}>4</Text>
+          </View>
+        </View>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => navigation.navigate(ROUTES.Game02Level04)}>
+          <Text style={styles.buttonText}>Choose a Game</Text>
+        </TouchableOpacity>
+      </View>
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  gradientBackground: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  diamondContainer: {
+    width: 250,
+    height: 250,
+    transform: [{rotate: '45deg'}],
+    backgroundColor: '#e76f51',
+    alignItems: 'center',
+    justifyContent: 'center',
+    elevation: 10,
+    borderRadius: 20,
+  },
+  innerCircle: {
+    width: 180,
+    height: 180,
+    borderRadius: 90,
+    backgroundColor: '#f4a261',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transform: [{rotate: '-45deg'}],
+    elevation: 50,
+  },
+  scoreText: {
+    color: '#ffffff',
+    fontSize: 100,
+    fontWeight: 'bold',
+  },
+  mainText: {
+    color: 'white',
+    fontSize: 25,
+    fontWeight: 'bold',
+    position: 'absolute',
+  },
+  button: {
+    backgroundColor: '#f4a261',
+    top: 150,
+    borderRadius: 10,
+    elevation: 5,
+    width: '90%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+    height: 50,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  mainContainer: {
+    elevation: 80,
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
+    backgroundColor: '#f4a261',
+    height: 50,
+    width: '100%',
+    bottom: 200,
+  },
+});
+
+export default Game02ProgressLevel04;

src/screens/home/game/game02/progress/Level05.js

+import React from 'react';
+import {View, StyleSheet, TouchableOpacity, Text} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {COLORS, IMGS, ROUTES} from '../../../../../constants';
+
+const Game02ProgressLevel05 = ({route, navigation}) => {
+
+  return (
+    <LinearGradient
+      style={{
+        flex: 1,
+      }}
+      colors={[
+        '#D9EDBF',
+        '#FFD3B5',
+        COLORS.white,
+        '#E8D3FF',
+        '#DAF1F9',
+        '#F6DFEB',
+      ]}
+      start={{x: 0.0, y: 0.0}}
+      end={{x: 1.0, y: 1.0}}>
+      <View style={styles.container}>
+        <View style={styles.mainContainer}>
+          <Text style={styles.mainText}>Your Gaming Level</Text>
+        </View>
+        <View style={styles.diamondContainer}>
+          <View style={styles.innerCircle}>
+            <Text style={styles.scoreText}>5</Text>
+          </View>
+        </View>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => navigation.navigate(ROUTES.Game02Level05)}>
+          <Text style={styles.buttonText}>Choose a Game</Text>
+        </TouchableOpacity>
+      </View>
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  gradientBackground: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  diamondContainer: {
+    width: 250,
+    height: 250,
+    transform: [{rotate: '45deg'}],
+    backgroundColor: '#e76f51',
+    alignItems: 'center',
+    justifyContent: 'center',
+    elevation: 10,
+    borderRadius: 20,
+  },
+  innerCircle: {
+    width: 180,
+    height: 180,
+    borderRadius: 90,
+    backgroundColor: '#f4a261',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transform: [{rotate: '-45deg'}],
+    elevation: 50,
+  },
+  scoreText: {
+    color: '#ffffff',
+    fontSize: 100,
+    fontWeight: 'bold',
+  },
+  mainText: {
+    color: 'white',
+    fontSize: 25,
+    fontWeight: 'bold',
+    position: 'absolute',
+  },
+  button: {
+    backgroundColor: '#f4a261',
+    top: 150,
+    borderRadius: 10,
+    elevation: 5,
+    width: '90%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+    height: 50,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  mainContainer: {
+    elevation: 80,
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
+    backgroundColor: '#f4a261',
+    height: 50,
+    width: '100%',
+    bottom: 200,
+  },
+});
+
+export default Game02ProgressLevel05;

src/screens/home/game/game02/progress/Level06.js

+import React from 'react';
+import {View, StyleSheet, TouchableOpacity, Text} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {COLORS, IMGS, ROUTES} from '../../../../../constants';
+
+const Game02ProgressLevel06 = ({route, navigation}) => {
+
+  return (
+    <LinearGradient
+      style={{
+        flex: 1,
+      }}
+      colors={[
+        '#D9EDBF',
+        '#FFD3B5',
+        COLORS.white,
+        '#E8D3FF',
+        '#DAF1F9',
+        '#F6DFEB',
+      ]}
+      start={{x: 0.0, y: 0.0}}
+      end={{x: 1.0, y: 1.0}}>
+      <View style={styles.container}>
+        <View style={styles.mainContainer}>
+          <Text style={styles.mainText}>Your Gaming Level</Text>
+        </View>
+        <View style={styles.diamondContainer}>
+          <View style={styles.innerCircle}>
+            <Text style={styles.scoreText}>7</Text>
+          </View>
+        </View>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => navigation.navigate(ROUTES.Game02Level07)}>
+          <Text style={styles.buttonText}>Choose a Game</Text>
+        </TouchableOpacity>
+      </View>
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  gradientBackground: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  diamondContainer: {
+    width: 250,
+    height: 250,
+    transform: [{rotate: '45deg'}],
+    backgroundColor: '#e76f51',
+    alignItems: 'center',
+    justifyContent: 'center',
+    elevation: 10,
+    borderRadius: 20,
+  },
+  innerCircle: {
+    width: 180,
+    height: 180,
+    borderRadius: 90,
+    backgroundColor: '#f4a261',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transform: [{rotate: '-45deg'}],
+    elevation: 50,
+  },
+  scoreText: {
+    color: '#ffffff',
+    fontSize: 100,
+    fontWeight: 'bold',
+  },
+  mainText: {
+    color: 'white',
+    fontSize: 25,
+    fontWeight: 'bold',
+    position: 'absolute',
+  },
+  button: {
+    backgroundColor: '#f4a261',
+    top: 150,
+    borderRadius: 10,
+    elevation: 5,
+    width: '90%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+    height: 50,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  mainContainer: {
+    elevation: 80,
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
+    backgroundColor: '#f4a261',
+    height: 50,
+    width: '100%',
+    bottom: 200,
+  },
+});
+
+export default Game02ProgressLevel06;

src/services/games/index.js

+import axios from 'axios';
+// const BASE_PATH = 'http://10.0.2.2:8000';
+const BASE_PATH = 'http://172.104.34.100:8000/';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+//initialize payment API Call
+export let gameLevelPredict = async (
+  age,
+  depression_level,
+  previous_child_birth_experiences,
+  marital_status_divorced,
+  marital_status_married,
+  marital_status_single,
+  family_background_bad,
+  family_background_good,
+  family_background_normal,
+  music_name_a,
+  music_name_b,
+  music_name_c,
+  music_name_d,
+  music_name_e,
+  music_name_f,
+) => {
+  try {
+    let value = await axios.post(BASE_PATH + '/predict/', {
+      age: age,
+      depression_level: depression_level,
+      previous_child_birth_experiences: previous_child_birth_experiences,
+      marital_status_divorced: marital_status_divorced,
+      marital_status_married: marital_status_married,
+      marital_status_single: marital_status_single,
+      family_background_bad: family_background_bad,
+      family_background_good: family_background_good,
+      family_background_normal: family_background_normal,
+      music_name_a: music_name_a,
+      music_name_b: music_name_b,
+      music_name_c: music_name_c,
+      music_name_d: music_name_d,
+      music_name_e: music_name_e,
+      music_name_f: music_name_f,
+    });
+    return value;
+  } catch (error) {
+    return error;
+  }
+};