diff --git a/package-lock.json b/package-lock.json
index c72a328..2cbcf35 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
         "react-dom": "^18",
         "react-firebase-hooks": "^5.1.1",
         "react-redux": "^9.1.0",
+        "sweetalert2": "^11.10.7",
         "swiper": "^11.1.0",
         "swiper-react": "^1.0.0"
       },
@@ -3523,6 +3524,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/sweetalert2": {
+      "version": "11.10.7",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.10.7.tgz",
+      "integrity": "sha512-5Jlzrmaitay6KzU+2+LhYu9q+L4v/dZ8oZyEDH14ep0C/QilCnFLHmqAyD/Lhq/lm5DiwsOs6Tr58iv8k3wyGg==",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/limonte"
+      }
+    },
     "node_modules/swiper": {
       "version": "11.1.0",
       "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.0.tgz",
diff --git a/package.json b/package.json
index b708e73..3eed4d5 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "react-dom": "^18",
     "react-firebase-hooks": "^5.1.1",
     "react-redux": "^9.1.0",
+    "sweetalert2": "^11.10.7",
     "swiper": "^11.1.0",
     "swiper-react": "^1.0.0"
   },
diff --git a/src/app/Profile/page.js b/src/app/Profile/page.js
index ad3d344..433833b 100644
--- a/src/app/Profile/page.js
+++ b/src/app/Profile/page.js
@@ -17,6 +17,7 @@ const Main = () => {
   const [trades, setTrades] = useState([]);
   const [leaderboards, setLeaderboards] = useState([]);
   const [thisuserdata, setThisUserData] = useState([]);
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     const fetchData = async () => {
@@ -82,93 +83,126 @@ const Main = () => {
         .select("*");
       if (UserData) {
         setLeaderboards(UserData);
+        setLoading(false);
       } else {
         console.log("error");
       }
     };
     fetchData();
+    setLoading(false);
   }, []);
-
   return (
     <>
       <Navbar />
-      <div className={`grid grid-cols-1 lg:grid-cols-3 pt-32 w-full px-4 lg:px-24 gap-4`}>
-        <div className="flex">
-          <div className="w-20 h-20 border-white mx-3 my-3 rounded-full">
-            <Image src={Photo} alt="" width={80} height={80} />
-          </div>
-          <div className="">
-            <p className="p-2">Email: {userEmail}</p>
-            <p className="p-2">Balance: {zeta}</p>
-          </div>
-        </div>
-
-        <div className="grid cols-span-2 border rounded-lg p-2">
-          <h1 className="text-center">Leaderboards</h1>
-          {/* Render leaderboards data here */}
-          <div>
-            <div className="grid grid-cols-2">
-              <p>Name</p>
-              <p>Profits</p>
-            </div>
-            {leaderboards.map((leaderboard, index) => (
-              <div key={index} className="grid grid-cols-2">
-                <p>{leaderboard.Name}</p>
-                <p>{leaderboard.balance}</p>
+      {loading ? (
+        <h1>Loading...</h1>
+      ) : (
+        <>
+          <div
+            className={`grid grid-cols-1 lg:grid-cols-3 pt-32 w-full px-4 lg:px-24 gap-4`}
+          >
+            <div className="flex">
+              <div className="w-20 h-20 border-white mx-3 my-3 rounded-full">
+                <Image src={Photo} alt="" width={80} height={80} />
+              </div>
+              <div className="">
+                <p className="p-2">Email: {userEmail}</p>
+                <p className="p-2">Balance: {zeta}</p>
               </div>
-            ))}
-          </div>
-        </div>
-        <div className="grid cols-span-2  border rounded-lg p-2">
-          <h1 className="center">Educational Leaderboards</h1>
-          <div className="grid grid-cols-2">
-            <p>Name</p>
-            <p>XP</p>
-          </div>
-          {leaderboards.map((leaderboard, index) => (
-            <div key={index} className="grid grid-cols-2">
-              <p>{leaderboard.Name}</p>
-              <p>{leaderboard.xp ? leaderboard.xp : "0"}</p>
             </div>
-          ))}
-        </div>
-      </div>
 
-      <div className="w-90 h-72 border-2 bg-red-400 mx-10 my-10 justify-center items-center">
-        <div>
-          <h3 className="text-center">batches</h3>
-        </div>
-        <div className="flex justify-center mt-5 px-5">
-          <div className="flex items-center">
-            <div className="w-32 h-32 mx-2">
-              <Image
-                src={batch_1}
-                alt=""
-                width={128}
-                height={128}
-                className={trades[0]?.badge1 ? "" : "invert"}
-              />
-              {trades[0]?.badge1 ? "Acquired" : "Not Acquired"}
-            </div>
-            <div className="w-32 h-32 mx-2 ">
-              <Image src={batch_2} alt="" width={128} height={128} className={trades[0]?.badge2 ? "" : "invert"} />
-              {trades[0]?.badge2 ? "Acquired" : "Not Acquired "}
+            <div className="grid cols-span-2 border rounded-lg p-2">
+              <h1 className="text-center">Leaderboards</h1>
+              {/* Render leaderboards data here */}
+              <div>
+                <div className="grid grid-cols-2">
+                  <p>Name</p>
+                  <p>Profits</p>
+                </div>
+                {leaderboards.map((leaderboard, index) => (
+                  <div key={index} className="grid grid-cols-2">
+                    <p>{leaderboard.Name}</p>
+                    <p>{leaderboard.balance}</p>
+                  </div>
+                ))}
+              </div>
             </div>
-            <div className="w-32 h-32 mx-2">
-              <Image src={batch_3} alt="" width={128} height={128} className={trades[0]?.badge3 ? "" : "invert"} />
-              {trades[0]?.badge3 ? "Acquired" : "Not Acquired"}
+            <div className="grid cols-span-2  border rounded-lg p-2">
+              <h1 className="center">Educational Leaderboards</h1>
+              <div className="grid grid-cols-2">
+                <p>Name</p>
+                <p>XP</p>
+              </div>
+              {leaderboards.map((leaderboard, index) => (
+                <div key={index} className="grid grid-cols-2">
+                  <p>{leaderboard.Name}</p>
+                  <p>{leaderboard.xp ? leaderboard.xp : "0"}</p>
+                </div>
+              ))}
             </div>
-            <div className="w-32 h-32 mx-2">
-              <Image src={batch_4} alt="" width={128} height={128} className={trades[0]?.badge4 ? "" : "invert"} />
-              {trades[0]?.badge4 ? "Acquired" : "Not Acquired"}
+          </div>
+
+          <div className="w-90 h-72 border-2 bg-red-400 mx-10 my-10 justify-center items-center">
+            <div>
+              <h3 className="text-center">batches</h3>
             </div>
-            <div className="w-32 h-32 mx-2">
-              <Image src={batch_5} alt="" width={128} height={128} className={trades[0]?.badge5 ? "" : "invert"} />
-              {trades[0]?.badge5 ? "Acquired" : "Not Acquired"}
+            <div className="flex justify-center mt-5 px-5">
+              <div className="flex items-center">
+                <div className="w-32 h-32 mx-2">
+                  <Image
+                    src={batch_1}
+                    alt=""
+                    width={128}
+                    height={128}
+                    className={trades[0]?.badge1 ? "" : "invert"}
+                  />
+                  {trades[0]?.badge1 ? "Acquired" : "Not Acquired"}
+                </div>
+                <div className="w-32 h-32 mx-2 ">
+                  <Image
+                    src={batch_2}
+                    alt=""
+                    width={128}
+                    height={128}
+                    className={trades[0]?.badge2 ? "" : "invert"}
+                  />
+                  {trades[0]?.badge2 ? "Acquired" : "Not Acquired "}
+                </div>
+                <div className="w-32 h-32 mx-2">
+                  <Image
+                    src={batch_3}
+                    alt=""
+                    width={128}
+                    height={128}
+                    className={trades[0]?.badge3 ? "" : "invert"}
+                  />
+                  {trades[0]?.badge3 ? "Acquired" : "Not Acquired"}
+                </div>
+                <div className="w-32 h-32 mx-2">
+                  <Image
+                    src={batch_4}
+                    alt=""
+                    width={128}
+                    height={128}
+                    className={trades[0]?.badge4 ? "" : "invert"}
+                  />
+                  {trades[0]?.badge4 ? "Acquired" : "Not Acquired"}
+                </div>
+                <div className="w-32 h-32 mx-2">
+                  <Image
+                    src={batch_5}
+                    alt=""
+                    width={128}
+                    height={128}
+                    className={trades[0]?.badge5 ? "" : "invert"}
+                  />
+                  {trades[0]?.badge5 ? "Acquired" : "Not Acquired"}
+                </div>
+              </div>
             </div>
           </div>
-        </div>
-      </div>
+        </>
+      )}
       <Footer />
     </>
   );
diff --git a/src/app/VirtualTrading/Chart.js b/src/app/VirtualTrading/Chart.js
index ac88473..2de4e15 100644
--- a/src/app/VirtualTrading/Chart.js
+++ b/src/app/VirtualTrading/Chart.js
@@ -7,6 +7,7 @@ import { AppContext } from "../../components/AppContext/AppContext";
 import { useContext } from "react";
 import supabase from "../supabase";
 import JSConfetti from 'js-confetti'
+import Swal from 'sweetalert2'
 
 
 const Chart = () => {
@@ -146,14 +147,39 @@ const handleBuy = async () => {
         if (updateError) {
           throw updateError;
         }
-          alert("Stock bought successfully!");
+        Swal.fire({
+          title: 'success!',
+          text: `Stock bought successfully! at price: ${quantity * currentPrice}`,
+          icon: 'success',
+          confirmButtonText: 'Cool'
+        })
       } catch (tradeError) {
-        alert("Error buying stock");
+        Swal.fire({
+          title: 'Error!',
+          text: 'Error buying stock',
+          icon: 'error',
+          confirmButtonText: 'Cool'
+        })
         console.error(error);
       }
     } else {
-      alert("Insufficient balance to buy stocks");
+      if(userEmail){
+      Swal.fire({
+        title: 'Error!',
+        text: 'Insufficient balance to buy stocks',
+        icon: 'warning',
+        confirmButtonText: 'Cool'
+      })
     }
+    else{
+      Swal.fire({
+        title: 'Error!',
+        text: 'Please login to buy stocks',
+        icon: 'error',
+        confirmButtonText: 'Cool'
+      })
+    }
+  }
   };
   
 const handlesell = async (tradeId) => {
@@ -190,12 +216,21 @@ const handlesell = async (tradeId) => {
       if (updateUserDataError) {
         throw updateUserDataError;
       }
-  
-      alert("Stock sold successfully!");
+      Swal.fire({
+        title: 'Sucess!',
+        text: `Stock sold successfully! at price ${currentPrice}`,
+        icon: 'success',
+        confirmButtonText: 'Cool'
+      })
       // jsConfetti.addConfetti();
   
     } catch (tradeError) {
-      alert("Error selling stock");
+      Swal.fire({
+        title: 'Error!',
+        text: `Error selling stock at price ${currentPrice}`,
+        icon: 'error',
+        confirmButtonText: 'Cool'
+      })
       console.error(error);
     }
   
diff --git a/src/components/Navbar/Navbar.js b/src/components/Navbar/Navbar.js
index 66e6c63..27d3076 100644
--- a/src/components/Navbar/Navbar.js
+++ b/src/components/Navbar/Navbar.js
@@ -12,6 +12,7 @@ import CustomizedSwitches from "../modeswitch/modeswitch";
 import { AppContext } from "../AppContext/AppContext";
 import { useContext } from "react";
 import Logo from "../../assets/logo.png";
+import Swal from 'sweetalert2'
 
 import Image from "next/image";
 const Navbar = () => {
@@ -125,20 +126,20 @@ const [loading,setLoading]=useState(true);
             <>
               <div
                
-                className={`text-slate-600 p-2 hover:text-${theme}txt text-${theme}txt  cursor-pointer relative`}
+                className={`p-2 hover:text-emerald-500 cursor-pointer relative`}
                 onMouseOver={()=>{setmenu2(1);}}
                 onMouseLeave={()=>{setmenu2(0);}}
               >
                 {userEmail}
                 <ul className={` ${menu2?"absolute":"hidden"} bg-white text-black rounded-md pt-2 `}>
-                  <Link href="/Profile" className="border-b p-4">Profile <i class="fa-solid fa-user"></i></Link>
-                  <li  onClick={logout} className="p-4">Logout <i class="fa-solid fa-arrow-right-from-bracket"></i></li>
+                  <Link href="/Profile" className="border-b p-4 ">Profile <i class="fa-solid fa-user"></i></Link>
+                  <li  onClick={logout} className="p-4 cursor-pointer">Logout <i class="fa-solid fa-arrow-right-from-bracket"></i></li>
                 </ul>
               </div>
             </>
           ) : (
             <div className="p-2 space-x-2 flex items-center justify-center">
-              <div className={`hover:text-${theme}txt`}>
+              <div className={`text-${theme}txt`}>
                 {<Link href="/Login">Login</Link>}
               </div>
             </div>