diff --git a/src/components/Report/Report.tsx b/src/components/Report/Report.tsx
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..3630c87f2cabd95495a58ac32d945aaf1b0ee78b 100644
--- a/src/components/Report/Report.tsx
+++ b/src/components/Report/Report.tsx
@@ -0,0 +1,85 @@
+import React, { useState } from "react";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import { FaWallet, FaStar } from "react-icons/fa6";
+import ReportModal from "./ReportModal";
+
+const Report = () => {
+    const [report, setReport] = useState("");
+    const [rating, setRating] = useState(0);
+    const [popUp, setPopUp] = useState(false);
+
+    const handleReportValid = () => {
+        if (isReportValid) {
+            if (Math.random() < 0.5) {
+                showToastSuccess();
+            } else {
+                showToastFailure();
+            }
+        }
+    };
+
+    const showToastSuccess = () => {
+        toast.success("Your report was submitted successfully! 😍");
+    };
+
+    const showToastFailure = () => {
+        toast.error("Oops! Something went wrong. 😭");
+    };
+
+    const isReportValid = report.length > 0 && rating > 0;
+
+    const handleStarClick = (selectedRating) => {
+        setRating(selectedRating);
+    };
+
+    return (
+        <>
+            <ToastContainer />
+            <div>
+                <div className="text-center text-white rounded-lg bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-darkgreen via-lightgreen to-verylightgreen p-4">
+                    <h1 className="font-bold text-4xl">Report</h1>
+                </div>
+                <div className="mt-4 flex items-center justify-center p-5 max-w-screen-2xl">
+                    <div className="mb-4 flex flex-row items-center text-8xl">
+                        {[1, 2, 3, 4, 5].map((star) => (
+                        <FaStar
+                            key={star}
+                            className={star <= rating ? "text-yellow" : "text-gray"}
+                            onClick={() => handleStarClick(star)}
+                        />
+                        ))}
+                    </div>
+                </div>
+                <div className="rounded-xl border border-darkgreen mt-4 shadow-lg flex wrap md:flex-col flex-col my-0 mx-auto p-5 max-w-screen-2xl">
+                    <h1 className="text-4xl font-semibold mb-2">Tell Us Your Feedback</h1>
+                    <div className="mb-4">
+                        <label>
+                        <input
+                            type="text"
+                            onChange={(e) => {
+                            setReport(e.target.value);
+                            }}
+                            className="w-full p-2 border rounded outline-none focus:border-darkgreen focus:shadow-[0px_4px_16px_rgba(29,185,84,0.1),_0px_8px_24px_rgba(29,185,84,0.1),_0px_16px_56px_rgba(29,185,84,0.1)]"
+                            placeholder="Share your thoughts, feedback, or report an issue..."
+                        />
+                        </label>
+                    </div>
+                </div>
+                {isReportValid && (
+                    <div>
+                        <button
+                        onClick={() => setPopUp(true)}
+                        className="flex items-center mt-5 cursor-pointer hover:bg-lightgreen text-lg mx-auto my-auto font-bold border-2 border-white text-white text-center items-center bg-darkgreen rounded-lg p-5 max-w-screen-sm"
+                        >
+                        SEND
+                        </button>
+                        {popUp && <ReportModal setPopUp={setPopUp} handleValid={handleReportValid} />}
+                    </div>
+                )}
+            </div>
+        </>
+    );
+};
+
+export default Report;