diff --git a/src/assets/games/flag guess/flagger.png b/src/assets/games/flag guess/flagger.png
new file mode 100644
index 0000000..1c8c364
Binary files /dev/null and b/src/assets/games/flag guess/flagger.png differ
diff --git a/src/assets/games/flag guess/flagset.json b/src/assets/games/flag guess/flagset.json
new file mode 100644
index 0000000..4fa3529
--- /dev/null
+++ b/src/assets/games/flag guess/flagset.json	
@@ -0,0 +1,196 @@
+{
+    "ad": "Andorra",
+    "ae": "United Arab Emirates",
+    "af": "Afghanistan",
+    "ag": "Antigua and Barbuda",
+    "al": "Albania",
+    "am": "Armenia",
+    "ao": "Angola",
+    "ar": "Argentina",
+    "at": "Austria",
+    "au": "Australia",
+    "az": "Azerbaijan",
+    "ba": "Bosnia and Herzegovina",
+    "bb": "Barbados",
+    "bd": "Bangladesh",
+    "be": "Belgium",
+    "bf": "Burkina Faso",
+    "bg": "Bulgaria",
+    "bh": "Bahrain",
+    "bi": "Burundi",
+    "bj": "Benin",
+    "bn": "Brunei",
+    "bo": "Bolivia",
+    "br": "Brazil",
+    "bs": "Bahamas",
+    "bt": "Bhutan",
+    "bw": "Botswana",
+    "by": "Belarus",
+    "bz": "Belize",
+    "ca": "Canada",
+    "cd": "DR Congo",
+    "cf": "Central African Republic",
+    "cg": "Republic of the Congo",
+    "ch": "Switzerland",
+    "ci": "Ivory Coast",
+    "cl": "Chile",
+    "cm": "Cameroon",
+    "cn": "China",
+    "co": "Colombia",
+    "cr": "Costa Rica",
+    "cu": "Cuba",
+    "cv": "Cape Verde",
+    "cy": "Cyprus",
+    "cz": "Czechia",
+    "de": "Germany",
+    "dj": "Djibouti",
+    "dk": "Denmark",
+    "dm": "Dominica",
+    "do": "Dominican Republic",
+    "dz": "Algeria",
+    "ec": "Ecuador",
+    "ee": "Estonia",
+    "eg": "Egypt",
+    "er": "Eritrea",
+    "es": "Spain",
+    "et": "Ethiopia",
+    "fi": "Finland",
+    "fj": "Fiji",
+    "fm": "Micronesia",
+    "fr": "France",
+    "ga": "Gabon",
+    "gb": "United Kingdom",
+    "gd": "Grenada",
+    "ge": "Georgia",
+    "gh": "Ghana",
+    "gm": "Gambia",
+    "gn": "Guinea",
+    "gq": "Equatorial Guinea",
+    "gr": "Greece",
+    "gt": "Guatemala",
+    "gw": "Guinea-Bissau",
+    "gy": "Guyana",
+    "hn": "Honduras",
+    "hr": "Croatia",
+    "ht": "Haiti",
+    "hu": "Hungary",
+    "id": "Indonesia",
+    "ie": "Ireland",
+    "il": "Israel",
+    "in": "India",
+    "iq": "Iraq",
+    "ir": "Iran",
+    "is": "Iceland",
+    "it": "Italy",
+    "jm": "Jamaica",
+    "jo": "Jordan",
+    "jp": "Japan",
+    "ke": "Kenya",
+    "kg": "Kyrgyzstan",
+    "kh": "Cambodia",
+    "ki": "Kiribati",
+    "km": "Comoros",
+    "kn": "Saint Kitts and Nevis",
+    "kp": "North Korea",
+    "kr": "South Korea",
+    "kw": "Kuwait",
+    "kz": "Kazakhstan",
+    "la": "Laos",
+    "lb": "Lebanon",
+    "lc": "Saint Lucia",
+    "li": "Liechtenstein",
+    "lk": "Sri Lanka",
+    "lr": "Liberia",
+    "ls": "Lesotho",
+    "lt": "Lithuania",
+    "lu": "Luxembourg",
+    "lv": "Latvia",
+    "ly": "Libya",
+    "ma": "Morocco",
+    "mc": "Monaco",
+    "md": "Moldova",
+    "me": "Montenegro",
+    "mg": "Madagascar",
+    "mh": "Marshall Islands",
+    "mk": "North Macedonia",
+    "ml": "Mali",
+    "mm": "Myanmar",
+    "mn": "Mongolia",
+    "mr": "Mauritania",
+    "mt": "Malta",
+    "mu": "Mauritius",
+    "mv": "Maldives",
+    "mw": "Malawi",
+    "mx": "Mexico",
+    "my": "Malaysia",
+    "mz": "Mozambique",
+    "na": "Namibia",
+    "ne": "Niger",
+    "ng": "Nigeria",
+    "ni": "Nicaragua",
+    "nl": "Netherlands",
+    "no": "Norway",
+    "np": "Nepal",
+    "nr": "Nauru",
+    "nz": "New Zealand",
+    "om": "Oman",
+    "pa": "Panama",
+    "pe": "Peru",
+    "pg": "Papua New Guinea",
+    "ph": "Philippines",
+    "pk": "Pakistan",
+    "pl": "Poland",
+    "ps": "Palestine",
+    "pt": "Portugal",
+    "pw": "Palau",
+    "py": "Paraguay",
+    "qa": "Qatar",
+    "ro": "Romania",
+    "rs": "Serbia",
+    "ru": "Russia",
+    "rw": "Rwanda",
+    "sa": "Saudi Arabia",
+    "sb": "Solomon Islands",
+    "sc": "Seychelles",
+    "sd": "Sudan",
+    "se": "Sweden",
+    "sg": "Singapore",
+    "si": "Slovenia",
+    "sk": "Slovakia",
+    "sl": "Sierra Leone",
+    "sm": "San Marino",
+    "sn": "Senegal",
+    "so": "Somalia",
+    "sr": "Suriname",
+    "ss": "South Sudan",
+    "sv": "El Salvador",
+    "sy": "Syria",
+    "sz": "Eswatini",
+    "td": "Chad",
+    "tg": "Togo",
+    "th": "Thailand",
+    "tj": "Tajikistan",
+    "tl": "Timor-Leste",
+    "tm": "Turkmenistan",
+    "tn": "Tunisia",
+    "to": "Tonga",
+    "tr": "Turkey",
+    "tt": "Trinidad and Tobago",
+    "tv": "Tuvalu",
+    "tw": "Taiwan",
+    "tz": "Tanzania",
+    "ua": "Ukraine",
+    "ug": "Uganda",
+    "us": "United States",
+    "uy": "Uruguay",
+    "uz": "Uzbekistan",
+    "va": "Vatican City",
+    "ve": "Venezuela",
+    "vn": "Vietnam",
+    "vu": "Vanuatu",
+    "ws": "Samoa",
+    "ye": "Yemen",
+    "za": "South Africa",
+    "zm": "Zambia",
+    "zw": "Zimbabwe"
+}
\ No newline at end of file
diff --git a/src/data/content.js b/src/data/content.js
index 0e1e20b..874d00a 100644
--- a/src/data/content.js
+++ b/src/data/content.js
@@ -2,11 +2,13 @@ import { RandomQuote } from "../pages/activities/RandomQuote";
 import { MagicSquares } from "../pages/games/MagicSquares";
 import { TicTacToe } from "../pages/games/TicTacToe";
 import { Wordle } from "../pages/games/Wordle";
+import { GuessTheFlag } from "../pages/games/GuessFlag";
 import {FortuneCard} from "../pages/activities/FotuneCard";
 import {SearchWord} from "../pages/activities/getDefinition";
 import {Jitter}  from "../pages/games/Jitter";
 import numberblocs from "../assets/numberblocks.png"
 import wordleicon from "../assets/games/Wordle/wordlejpg.png"
+import flagger from "../assets/games/flag guess/flagger.png"
 
 export const activities = [
     {
@@ -61,6 +63,13 @@ export const games = [
         icon:wordleicon,
         urlTerm:"Wordle",
         element:<Wordle/>
+    },
+    {
+        title:"Guess The Flag",
+        description:"Learn geography in fun way",
+        icon:flagger,
+        urlTerm:"GuessTheFlag",
+        element:<GuessTheFlag/>
     }
 ];
 
diff --git a/src/pages/games/GuessFlag.js b/src/pages/games/GuessFlag.js
new file mode 100644
index 0000000..fff6f2f
--- /dev/null
+++ b/src/pages/games/GuessFlag.js
@@ -0,0 +1,194 @@
+import React, { useEffect, useState } from "react";
+import flagData from "../../assets/games/flag guess/flagset.json";
+import "../../styles/pages/games/GuessFlag.css";
+
+export const GuessTheFlag = () => {
+    const [randCode, setRandCode] = useState("");
+    const [randName, setRandName] = useState("");
+    const [userInput, setUserInput] = useState("");
+    const [message, setMessage] = useState("");
+    const [lifelines, setLifelines] = useState(3);
+    const [score, setScore] = useState(0);
+    const [hintOneUsed, setHintOneUsed] = useState(false);
+    const [hintTwoUsed, setHintTwoUsed] = useState(false);
+    const [hintOneMessage, setHintOneMessage] = useState("");
+    const [hintTwoMessage, setHintTwoMessage] = useState("");
+    const [guessMade, setGuessMade] = useState(false);
+    const isSubmitDisabled = userInput.trim() === '' || lifelines === 0 || guessMade;
+
+    useEffect(() => {
+        generateRandomFlag();
+    }, []); // Empty dependency array ensures useEffect runs once after the initial render
+
+    const generateRandomFlag = () => {
+        const countryCodes = Object.keys(flagData);
+        const randomCode = countryCodes[Math.floor(Math.random() * countryCodes.length)];
+        setRandCode(randomCode);
+        setRandName(flagData[randomCode]);
+        setUserInput("");
+        setHintOneUsed(false); // Reset hint usage flag for the new flag
+        setHintTwoUsed(false); // Reset hint usage flag for the new flag
+        setHintOneMessage("");
+        setHintTwoMessage("");
+    };
+
+    const handleInputChange = (e) => {
+        setUserInput(e.target.value);
+    };
+
+    const handleHintOneClick = () => {
+        if (!hintOneUsed) {
+            const letters = randName.split("").map((char) => (char !== " " ? "_" : " ")).join(" ");
+            setHintOneMessage(`Hint One: ${letters}`);
+            setHintOneUsed(true);
+        }
+    };
+    const handleHintTwoClick = () => {
+        if (hintOneUsed && !hintTwoUsed) {
+            let revealedLettersCount = Math.floor(0.3 * randName.replace(/ /g, '').length);
+            const characters = randName.split('');
+            const hiddenNameArray = characters.map((char) => {
+                if (char !== ' ' && revealedLettersCount > 0 && Math.random() < 0.7) {
+                    revealedLettersCount--;
+                    return char;
+                }
+                return '_';
+            });
+
+            // Reveal two random letters
+            for (let i = 0; i < 2; i++) {
+                let randomIndex;
+                do {
+                    randomIndex = Math.floor(Math.random() * characters.length);
+                } while (characters[randomIndex] === ' ' || hiddenNameArray[randomIndex] !== '_');
+                hiddenNameArray[randomIndex] = characters[randomIndex];
+            }
+
+            setHintTwoMessage(`Hint Two: ${hiddenNameArray.join('')}`);
+            setHintTwoUsed(true);
+        } else {
+            if (!hintOneUsed) {
+                setMessage('Use hint one first for three points');
+            } else {
+                setMessage('All hints used ');
+            }
+        }
+    };
+
+    const handleRestart = () => {
+        generateRandomFlag();
+        setLifelines(3);
+        setScore(0);
+        setMessage("");
+        setGuessMade(false);
+    }
+
+    const handleNext = () => {
+        generateRandomFlag();
+        setMessage("");
+        setGuessMade(false);
+    }
+
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if (userInput.toLowerCase() === randName.toLowerCase()) {
+            if (hintOneUsed && hintTwoUsed) {
+                setScore(score + 1); // Add 3 points for correct guess with a hint
+            } else if (hintOneUsed) {
+                setScore(score + 3)
+            }
+            else {
+                setScore(score + 5); // Add 5 points for correct guess without a hint
+            }
+            setMessage("You guessed correctly!");
+            // generateRandomFlag();
+            setGuessMade(true);
+        } else {
+            if (lifelines > 1) {
+                setMessage(`Wrong guess! ${lifelines - 1} lifelines left.The correct answer was: ${randName}`);
+                setLifelines(lifelines - 1);
+                // generateRandomFlag();
+                setGuessMade(true);
+            } else {
+                setMessage(`Sorry, you lost. The correct answer was: ${randName}`);
+                setLifelines(0);
+                setGuessMade(true);
+            }
+        }
+    };
+
+
+    const hearts = Array.from({ length: lifelines }, (_, index) => (
+        <span key={index} className="heart">
+            ❤️
+        </span>
+    ));
+
+    return (
+        <div className="fgcontainer">
+            <nav className="flagnav">
+                <h1 className="flagHeading" >GUESS THE FLAG!</h1>
+            </nav>
+            <div className="fgscore">Total Score: {score}</div>
+            <div className="hearts">{hearts}</div>
+            <img
+                className="RandFlag"
+                src={`https://flagcdn.com/w320/${randCode}.png`}
+                srcSet={`https://flagcdn.com/w640/${randCode}.png 2x`}
+                alt={randName}
+                width={320}
+                height={213}
+            />
+            <p className="fgmessage">{message}</p>
+            <form className="fgform" onSubmit={handleSubmit}>
+                {!guessMade && lifelines > 0 ? ( // Show input form if inputVisible is true and lifelines are available
+                    <input
+                        className="fginput"
+                        type="text"
+                        value={userInput}
+                        onChange={handleInputChange}
+                        placeholder="Enter your guess"
+                        disabled={lifelines === 0 || guessMade}
+                    />
+                    
+                ) : null}
+                {!guessMade && lifelines > 0 ? (
+                    <button className="fgsubmit" type="submit" disabled={isSubmitDisabled}>
+                        Submit
+                    </button>
+                ) : null}
+                </form>
+                <div className="hint-container">
+                    {guessMade && lifelines > 0 ? (
+                        <button className="fgbutton" type="button" onClick={handleNext}>
+                            NEXT
+                        </button>
+                    ) : lifelines > 0 ? (
+                        <>
+                            <p>{hintOneMessage}</p>
+                            <button className="fgbutton" type="button" onClick={handleHintOneClick} disabled={lifelines === 0 || hintOneUsed}>
+                                Hint 1
+                            </button>
+                        </>
+                    ) : (
+                        <button className="fgbutton" type="button" onClick={handleRestart}>
+                            Restart
+                        </button>
+                    )}
+                </div>
+                <div className="hint-container">
+                    {guessMade && lifelines > 0 ? null : lifelines > 0 ? (
+                        <>
+                            <p>{hintTwoMessage}</p>
+                            <button className="fgbutton" type="button" onClick={handleHintTwoClick} disabled={lifelines === 0 || hintTwoUsed}>
+                                Hint 2
+                            </button>
+                        </>
+                    ) : null}
+                </div>
+
+        </div>
+    );
+}
+
diff --git a/src/styles/pages/games/GuessFlag.css b/src/styles/pages/games/GuessFlag.css
new file mode 100644
index 0000000..63c0db6
--- /dev/null
+++ b/src/styles/pages/games/GuessFlag.css
@@ -0,0 +1,106 @@
+.fgcontainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .flagnav {
+    display: flex;
+    height: 50px;
+    justify-content: space-between;
+    width: 100%;
+    padding: 10px;
+    background-color: #333;
+    color: white;
+    justify-content: center;
+  }
+
+  .flagHeading{
+    color: white;
+  }
+  
+  .fgmessage {
+    font-size: 18px;
+    font-weight: bold;
+    margin-top: 15px;
+    color: #333; /* or any color you prefer */
+    text-align: center;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+  }
+  
+  .RandFlag {
+    border: 2px solid black;
+    border-radius: 2px;
+    width: 350px;
+    height: 225px;  
+  }
+  
+  .hearts {
+    display: flex;
+  }
+  
+  .heart {
+    margin-right: 5px;
+    font-size: 24px;
+    color: red;
+  }
+  
+  .hint-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .fgscore {
+    border: 5px black ;
+    padding: 5px;
+    border-style:ridge;
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 20px;
+    margin-top: 10px;
+    color: #333;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+  }
+  
+  .hint-box {
+    margin-bottom: 10px;
+    padding: 10px;
+    background-color: #f5f5f5;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+  }
+  
+  .fgform{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-top: 20px;
+  }
+  
+  .fginput[type="text"] {
+    margin-bottom: 10px;
+    margin-right: 3px;
+    padding: 10px;
+    font-size: 16px;
+    width: 200px;
+    aspect-ratio: auto;
+  }
+
+  .fgbutton{
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    background-color: #4caf50;
+    color: white;
+    border: none;
+    border: 1px solid black;
+    border-radius: 2px;
+    margin: 20px;
+  }
+  
+  .fgbutton:disabled {
+    background-color: #ccc;
+    cursor: not-allowed;
+  }
+  
\ No newline at end of file