diff --git a/package-lock.json b/package-lock.json
index 230177f9b511a7d9887b896a9b41213bc7344d57..488b73b295663e7a384a9425ab7316b78e89bd0e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "ramda": "^0.28.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.4.3",
@@ -13931,6 +13932,15 @@
         "performance-now": "^2.1.0"
       }
     },
+    "node_modules/ramda": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.28.0.tgz",
+      "integrity": "sha512-9QnLuG/kPVgWvMQ4aODhsBUFKOUmnbUnsSXACv+NCQZcHbeb+v8Lodp8OVxtRULN1/xOyYLLaL6npE6dMq5QTA==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/ramda"
+      }
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -26791,6 +26801,11 @@
         "performance-now": "^2.1.0"
       }
     },
+    "ramda": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.28.0.tgz",
+      "integrity": "sha512-9QnLuG/kPVgWvMQ4aODhsBUFKOUmnbUnsSXACv+NCQZcHbeb+v8Lodp8OVxtRULN1/xOyYLLaL6npE6dMq5QTA=="
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
diff --git a/package.json b/package.json
index 6fea90829acf3ccb3569d738bb240abb65f913df..b8dac5dae6dcc33cde540638e1c2ecbb82b00bca 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "ramda": "^0.28.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.4.3",
diff --git a/src/components/PopUp.js b/src/components/PopUp.js
new file mode 100644
index 0000000000000000000000000000000000000000..c360d9fe998172b054ef887a2ec1dad97480caaa
--- /dev/null
+++ b/src/components/PopUp.js
@@ -0,0 +1,28 @@
+// Create function with text, button, and button function
+// make pop up floating
+import React from "react";
+import "./style/PopUp.css";
+
+export default function PopUp(props) {
+    const [show, setShow] = React.useState(false);
+
+    const handler = () => {
+        props.buttonHandler();
+        props.onCloseHandler();
+        setShow(false);
+    }
+
+    React.useEffect(() => {
+        setShow(props.show)
+    }, [props.show]);
+
+    return (
+        <div className="pop-up" style={{
+            visibility: show ? "visible" : "hidden",
+        }}>
+            <div>{props.text}</div>
+            <button onClick={handler}>{props.buttonText}</button>
+        </div>
+    );
+}
+
diff --git a/src/components/WordInput.js b/src/components/WordInput.js
index ca15a6ca03f22887255c3f28c6b65912b5f52d87..cd65c81957cda767836c324fe897bb6b452c5751 100644
--- a/src/components/WordInput.js
+++ b/src/components/WordInput.js
@@ -1,11 +1,32 @@
 import React from "react";
 import { validateInput } from "../helpers/validateInput";
 import CharBox from "./CharBox";
+import PopUp from "./PopUp";
 
 const WordInput = () => {
-    
     const [word, setWord] = React.useState([]);
     const [charBox, setCharBox] = React.useState([]);
+    const [popUp, setPopUp] = React.useState({
+        show: false,
+        text: "",
+        buttonText: "",
+        buttonHandler: () => {},
+    });
+
+    const popUpCloseHandler = () => {
+        setPopUp({
+            ...popUp,
+            show: false,
+        });
+    };
+
+    function popUpButtonHandler() {
+        // your logic goes here
+        // if need another logic for pop up, please create another function
+        // and you can assign it to buttonFunc
+        
+        console.log("It works!");
+    }
 
     React.useEffect(() => {
         const charBoxes = [];
@@ -36,6 +57,13 @@ const WordInput = () => {
                     setCharBox(prevState => [...prevState, <CharBox char={word[idx]} answer={e} />]);
                     return charBox;
                 });
+
+                setPopUp({
+                    show: true,
+                    text: "You got it!",
+                    buttonText: "OK",
+                    buttonHandler: popUpButtonHandler,
+                });
             } else if (e.key === "Backspace" && word.length > 0) {
                 setWord([...word.slice(0,-1)]);
                 setCharBox(prevState => {
@@ -50,6 +78,13 @@ const WordInput = () => {
     return (
         <div className="word-input">
             {charBox}
+            <PopUp 
+                show={popUp.show} 
+                text={popUp.text} 
+                buttonText={popUp.buttonText}
+                buttonHandler={popUp.buttonHandler} 
+                onCloseHandler={popUpCloseHandler}
+            />
         </div>
     );
 }
diff --git a/src/components/style/PopUp.css b/src/components/style/PopUp.css
new file mode 100644
index 0000000000000000000000000000000000000000..81f07fea73258bff0b244937ecdef897e377bb28
--- /dev/null
+++ b/src/components/style/PopUp.css
@@ -0,0 +1,14 @@
+.pop-up {
+    position: absolute;
+    top: 25%;
+    left: 40%;
+    width: 20%;
+    height: 10%;
+    border-radius: 10px;
+    background-color: #fff;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    z-index: 100;
+
+    padding-top: 1%;
+    font: 20px;
+}
\ No newline at end of file