From c3515e1662c4d5ed87a5dcfd98205313dbf87cb6 Mon Sep 17 00:00:00 2001
From: davidyoum <davidyoum@yahoo.com>
Date: Fri, 4 Apr 2025 20:38:10 -0400
Subject: [PATCH 1/2] ran npx @next/coddemod new-link . and fixed the legacy
 behavior in StandardNav to fix settings page link bug

---
 src/components/AuthPopup.jsx                  |   2 +-
 src/components/Button.jsx                     |   2 +-
 src/components/Footer.jsx                     | 281 +++++++++---------
 src/components/Header.jsx                     |   2 +-
 src/components/StandardNav.jsx                |  46 ++-
 .../challenge/ChallengeComponent.jsx          |   2 +-
 src/components/dashboard/DashboardHeader.jsx  |   2 +-
 src/components/dashboard/FriendCard.jsx       |  43 ++-
 .../dashboard/FriendRequestCard.jsx           |   2 +-
 src/components/dashboard/Suggest.jsx          |   3 +-
 src/components/groups/studentView.jsx         |   4 +-
 src/components/home/Hero.jsx                  |  12 +-
 src/components/practice/community.jsx         |  10 +-
 src/components/profile/ChallengeCard.jsx      |  90 +++---
 src/components/settingComponents/sidebar.jsx  |  36 ++-
 src/components/social/FriendCard.jsx          |   2 +-
 src/pages/challenges/[...id].jsx              |  22 +-
 src/pages/create.jsx                          |  12 +-
 src/pages/create/earnings.jsx                 |   4 +-
 src/pages/create/settings.jsx                 |   8 +-
 src/pages/education.jsx                       |  11 +-
 src/pages/explorers.jsx                       | 264 ++++++++--------
 src/pages/groups.jsx                          |   7 +-
 src/pages/groups/[group]/home.jsx             |   4 +-
 src/pages/groups/[group]/settings.jsx         |  67 ++---
 src/pages/login.jsx                           |   3 +-
 src/pages/register.jsx                        |   2 +-
 src/pages/terminal.jsx                        |  22 +-
 28 files changed, 479 insertions(+), 486 deletions(-)

diff --git a/src/components/AuthPopup.jsx b/src/components/AuthPopup.jsx
index 9ca1c2a7..b7d4fff2 100644
--- a/src/components/AuthPopup.jsx
+++ b/src/components/AuthPopup.jsx
@@ -11,7 +11,7 @@ export function AuthPopup() {
     // User logged out
     return (
       <div className="hidden rounded-md bg-[#3B82F6] hover:bg-[#468dff]">
-        <Link href="/login">
+        <Link href="/login" legacyBehavior>
           <div className="mx-auto my-auto flex h-10 text-center">
             <h1 className="mx-auto my-auto text-lg font-semibold text-white">
               Log in to see your progress!
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
index 96632aff..f41559af 100644
--- a/src/components/Button.jsx
+++ b/src/components/Button.jsx
@@ -38,7 +38,7 @@ export function Button({
   );
 
   return href ? (
-    <Link href={href} className={className} {...props} />
+    <Link href={href} className={className} {...props} legacyBehavior />
   ) : (
     <button className={className} {...props} />
   );
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 1ae1ef1d..9cf22f1c 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -5,145 +5,63 @@ const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_URL;
 
 export function Footer({isHome}) {
   isHome = false;
-  return (
-    isHome ?
-    <footer style={{ backgroundColor: '#161716' }} className='max-w-7xl mx-auto'>
-      <Container>
-        <div className="py-20">
-          <img 
-            src={`${baseUrl}/darkLogo.png`} 
-            className="mx-auto w-16 h-16 text-center mb-8" 
-            alt="CTFGuide Logo" 
-          />
-          <nav className="mt-10 grid grid-cols-2 md:grid-cols-4 gap-x-12 gap-y-10 text-sm text-slate-300" aria-label="footer navigation">
-            <div>
-              <h3 className="font-bold text-white text-sm mb-4 uppercase tracking-wider">Platform</h3>
-              <ul className="space-y-3 list-none pl-0">
-                <li><NavLink className="hover:text-white transition-colors" href="../terms-of-service">Terms of Service</NavLink></li>
-                <li><NavLink className="hover:text-white transition-colors" href="../privacy-policy">Privacy Policy</NavLink></li>
-                <li><NavLink className="hover:text-white transition-colors" href="https://status.ctfguide.com/">Status</NavLink></li>
-                <li><NavLink className="hover:text-white transition-colors" href="../careers">Careers</NavLink></li>
-              </ul>
-            </div>
-
-            <div>
-              <h3 className="font-bold text-white text-sm mb-4 uppercase tracking-wider">Articles</h3>
-              <ul className="space-y-3 list-none pl-0">
-                <li><NavLink className="hover:text-white transition-colors" href="/blog/best-ctf-learning-platform">The best place to learn CTF</NavLink></li>
-                <li><NavLink className="hover:text-white transition-colors" href="/blog/ctflearn-alternative">Best Alternative to CTFLearn</NavLink></li>
-                <li><NavLink className="hover:text-white transition-colors" href="/blog/picoctf-vs-ctfguide">CTFGuide vs CTFLearn</NavLink></li>
-                <li><NavLink className="hover:text-white transition-colors" href="/blog/overthewire-alternative">Best Alternative to OverTheWire</NavLink></li>
-              </ul>
-            </div>
-
-            <div>
-              <h3 className="font-bold text-white text-sm mb-4 uppercase tracking-wider">Resources</h3>
-              <ul className="space-y-3 list-none pl-0">
-                <li><NavLink className="hover:text-white transition-colors" href="/getting-started">Getting Started Guide</NavLink></li>
-                <li><NavLink className="hover:text-white transition-colors" href="/tutorials">CTF Tutorials</NavLink></li>
-                <li><NavLink className="hover:text-white transition-colors" href="/challenges">Practice Challenges</NavLink></li>
-                <li><NavLink className="hover:text-white transition-colors" href="/community">Community</NavLink></li>
-              </ul>
-            </div>
-
-            <div>
-              <h3 className="font-bold text-white text-sm mb-4 uppercase tracking-wider">Compare</h3>
-              <ul className="space-y-3 list-none pl-0">
-                <li><NavLink className="hover:text-white transition-colors" href="/vs/hackthebox">CTFGuide vs HackTheBox</NavLink></li>
-                <li><NavLink className="hover:text-white transition-colors" href="/vs/tryhackme">CTFGuide vs TryHackMe</NavLink></li>
-                <li><NavLink className="hover:text-white transition-colors" href="/vs/vulnhub">CTFGuide vs VulnHub</NavLink></li>
-                <li><NavLink className="hover:text-white transition-colors" href="/vs/rootme">CTFGuide vs Root Me</NavLink></li>
-              </ul>
-            </div>
-          </nav>
-        </div>
-        <div className="mx-auto flex max-w-4xl flex-col items-center border-t border-neutral-700 py-10 sm:flex-row-reverse sm:justify-between">
-          <div className="flex gap-x-8">
-            <Link
-              href="https://discord.gg/q3hgRBvgkX"
-              className="group"
-              aria-label="ctfguideapp on Discord"
-            >
-              <svg
-                aria-hidden="true"
-                className="h-6 w-6 fill-white group-hover:fill-[#5865F2]"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 640 512"
-              >
-                <path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"/>
-              </svg>
-            </Link>
-            <Link
-              href="https://www.linkedin.com/company/ctfguide"
-              className="group"
-              aria-label="ctfguideapp on Linkedin"
-            >
-              <svg 
-                aria-hidden="true"
-                className="h-6 w-6 fill-white group-hover:fill-[#3b82f6]"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 448 512"
-              >
-                <path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/>
-              </svg>
-            </Link>
-         
-            <Link
-              href="https://github.com/ctfguide-tech"
-              className="group"
-              aria-label="ctfguide-tech on GitHub"
-            >
-              <svg
-                aria-hidden="true"
-                className="h-6 w-6 fill-white group-hover:fill-black"
-              >
-                <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2Z" />
-              </svg>
-            </Link>
-
-            <Link
-            href ="https://x.com/ctfguideapp"
-            aria-label = "ctfguideapp on X"
-            >
-            <svg className="h-6 w-6 fill-white hover:fill-black" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="100" ><path fill="white" d="M 5.9199219 6 L 20.582031 27.375 L 6.2304688 44 L 9.4101562 44 L 21.986328 29.421875 L 31.986328 44 L 44 44 L 28.681641 21.669922 L 42.199219 6 L 39.029297 6 L 27.275391 19.617188 L 17.933594 6 L 5.9199219 6 z M 9.7167969 8 L 16.880859 8 L 40.203125 42 L 33.039062 42 L 9.7167969 8 z"/>
-            
-            </svg>
+  return (isHome ? <footer style={{ backgroundColor: '#161716' }} className='max-w-7xl mx-auto'>
+    <Container>
+      <div className="py-20">
+        <img 
+          src={`${baseUrl}/darkLogo.png`} 
+          className="mx-auto w-16 h-16 text-center mb-8" 
+          alt="CTFGuide Logo" 
+        />
+        <nav className="mt-10 grid grid-cols-2 md:grid-cols-4 gap-x-12 gap-y-10 text-sm text-slate-300" aria-label="footer navigation">
+          <div>
+            <h3 className="font-bold text-white text-sm mb-4 uppercase tracking-wider">Platform</h3>
+            <ul className="space-y-3 list-none pl-0">
+              <li><NavLink className="hover:text-white transition-colors" href="../terms-of-service">Terms of Service</NavLink></li>
+              <li><NavLink className="hover:text-white transition-colors" href="../privacy-policy">Privacy Policy</NavLink></li>
+              <li><NavLink className="hover:text-white transition-colors" href="https://status.ctfguide.com/">Status</NavLink></li>
+              <li><NavLink className="hover:text-white transition-colors" href="../careers">Careers</NavLink></li>
+            </ul>
+          </div>
 
-            
-            </Link>
+          <div>
+            <h3 className="font-bold text-white text-sm mb-4 uppercase tracking-wider">Articles</h3>
+            <ul className="space-y-3 list-none pl-0">
+              <li><NavLink className="hover:text-white transition-colors" href="/blog/best-ctf-learning-platform">The best place to learn CTF</NavLink></li>
+              <li><NavLink className="hover:text-white transition-colors" href="/blog/ctflearn-alternative">Best Alternative to CTFLearn</NavLink></li>
+              <li><NavLink className="hover:text-white transition-colors" href="/blog/picoctf-vs-ctfguide">CTFGuide vs CTFLearn</NavLink></li>
+              <li><NavLink className="hover:text-white transition-colors" href="/blog/overthewire-alternative">Best Alternative to OverTheWire</NavLink></li>
+            </ul>
           </div>
-          <p className="mt-6 text-sm text-slate-400 sm:mt-0">
-            Copyright &copy; {new Date().getFullYear()} CTFGuide Corporation. All rights
-            reserved.
-          </p>
-        </div>
-      </Container>
-    </footer>
-    :
-    <>
-    <footer style={{ backgroundColor: '#161716' }}>
-    <Container>
-      <div className="py-16">
-        <img src= {`${baseUrl}/darkLogo.png`} className="mx-auto w-14 text-center" />
-        <nav className="mt-4 text-sm" aria-label="quick links">
-          <div className="-my-1 flex place-content-center gap-x-6">
-            <NavLink href="../terms-of-service">Terms of Service</NavLink>
-            <NavLink href="../privacy-policy">Privacy Policy</NavLink>
-            <NavLink href="https://status.ctfguide.com/">Status</NavLink>
-            <NavLink href="../careers">Careers</NavLink>
-    
+
+          <div>
+            <h3 className="font-bold text-white text-sm mb-4 uppercase tracking-wider">Resources</h3>
+            <ul className="space-y-3 list-none pl-0">
+              <li><NavLink className="hover:text-white transition-colors" href="/getting-started">Getting Started Guide</NavLink></li>
+              <li><NavLink className="hover:text-white transition-colors" href="/tutorials">CTF Tutorials</NavLink></li>
+              <li><NavLink className="hover:text-white transition-colors" href="/challenges">Practice Challenges</NavLink></li>
+              <li><NavLink className="hover:text-white transition-colors" href="/community">Community</NavLink></li>
+            </ul>
           </div>
 
-        
+          <div>
+            <h3 className="font-bold text-white text-sm mb-4 uppercase tracking-wider">Compare</h3>
+            <ul className="space-y-3 list-none pl-0">
+              <li><NavLink className="hover:text-white transition-colors" href="/vs/hackthebox">CTFGuide vs HackTheBox</NavLink></li>
+              <li><NavLink className="hover:text-white transition-colors" href="/vs/tryhackme">CTFGuide vs TryHackMe</NavLink></li>
+              <li><NavLink className="hover:text-white transition-colors" href="/vs/vulnhub">CTFGuide vs VulnHub</NavLink></li>
+              <li><NavLink className="hover:text-white transition-colors" href="/vs/rootme">CTFGuide vs Root Me</NavLink></li>
+            </ul>
+          </div>
         </nav>
       </div>
-      <div className="mx-auto flex max-w-4xl flex-col items-center border-t border-slate-400/10 py-10 sm:flex-row-reverse sm:justify-between">
-        <div className="flex gap-x-6">
+      <div className="mx-auto flex max-w-4xl flex-col items-center border-t border-neutral-700 py-10 sm:flex-row-reverse sm:justify-between">
+        <div className="flex gap-x-8">
           <Link
             href="https://discord.gg/q3hgRBvgkX"
             className="group"
             aria-label="ctfguideapp on Discord"
-          >
+            legacyBehavior>
             <svg
               aria-hidden="true"
               className="h-6 w-6 fill-white group-hover:fill-[#5865F2]"
@@ -157,7 +75,7 @@ export function Footer({isHome}) {
             href="https://www.linkedin.com/company/ctfguide"
             className="group"
             aria-label="ctfguideapp on Linkedin"
-          >
+            legacyBehavior>
             <svg 
               aria-hidden="true"
               className="h-6 w-6 fill-white group-hover:fill-[#3b82f6]"
@@ -172,7 +90,7 @@ export function Footer({isHome}) {
             href="https://github.com/ctfguide-tech"
             className="group"
             aria-label="ctfguide-tech on GitHub"
-          >
+            legacyBehavior>
             <svg
               aria-hidden="true"
               className="h-6 w-6 fill-white group-hover:fill-black"
@@ -182,9 +100,9 @@ export function Footer({isHome}) {
           </Link>
 
           <Link
-          href ="https://x.com/ctfguideapp"
-          aria-label = "ctfguideapp on X"
-          >
+            href ="https://x.com/ctfguideapp"
+            aria-label = "ctfguideapp on X"
+            legacyBehavior>
           <svg className="h-6 w-6 fill-white hover:fill-black" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="100" ><path fill="white" d="M 5.9199219 6 L 20.582031 27.375 L 6.2304688 44 L 9.4101562 44 L 21.986328 29.421875 L 31.986328 44 L 44 44 L 28.681641 21.669922 L 42.199219 6 L 39.029297 6 L 27.275391 19.617188 L 17.933594 6 L 5.9199219 6 z M 9.7167969 8 L 16.880859 8 L 40.203125 42 L 33.039062 42 L 9.7167969 8 z"/>
           
           </svg>
@@ -192,17 +110,94 @@ export function Footer({isHome}) {
           
           </Link>
         </div>
-        <p className="mt-6 text-sm text-white sm:mt-0">
+        <p className="mt-6 text-sm text-slate-400 sm:mt-0">
           Copyright &copy; {new Date().getFullYear()} CTFGuide Corporation. All rights
-          reserved. <br></br>
-          <span className="text-xs text-white">
-          Supported by <a href="https://psuwebdev.org/" className="text-blue-400 hover:text-blue-300">PSU Web Development Club</a>, <a href="https://bullmontcapital.com/" className="text-white hover:text-gray-300">Bullmont Capital</a>, and <a href="https://www.psu.edu/" className="text-white hover:text-gray-300">Penn State University</a>.
-
-          </span>
+          reserved.
         </p>
       </div>
     </Container>
-  </footer>
-  </>
-  )
+  </footer> : <>
+  <footer style={{ backgroundColor: '#161716' }}>
+  <Container>
+    <div className="py-16">
+      <img src= {`${baseUrl}/darkLogo.png`} className="mx-auto w-14 text-center" />
+      <nav className="mt-4 text-sm" aria-label="quick links">
+        <div className="-my-1 flex place-content-center gap-x-6">
+          <NavLink href="../terms-of-service">Terms of Service</NavLink>
+          <NavLink href="../privacy-policy">Privacy Policy</NavLink>
+          <NavLink href="https://status.ctfguide.com/">Status</NavLink>
+          <NavLink href="../careers">Careers</NavLink>
+  
+        </div>
+
+      
+      </nav>
+    </div>
+    <div className="mx-auto flex max-w-4xl flex-col items-center border-t border-slate-400/10 py-10 sm:flex-row-reverse sm:justify-between">
+      <div className="flex gap-x-6">
+        <Link
+          href="https://discord.gg/q3hgRBvgkX"
+          className="group"
+          aria-label="ctfguideapp on Discord"
+          legacyBehavior>
+          <svg
+            aria-hidden="true"
+            className="h-6 w-6 fill-white group-hover:fill-[#5865F2]"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 640 512"
+          >
+            <path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"/>
+          </svg>
+        </Link>
+        <Link
+          href="https://www.linkedin.com/company/ctfguide"
+          className="group"
+          aria-label="ctfguideapp on Linkedin"
+          legacyBehavior>
+          <svg 
+            aria-hidden="true"
+            className="h-6 w-6 fill-white group-hover:fill-[#3b82f6]"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 448 512"
+          >
+            <path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/>
+          </svg>
+        </Link>
+     
+        <Link
+          href="https://github.com/ctfguide-tech"
+          className="group"
+          aria-label="ctfguide-tech on GitHub"
+          legacyBehavior>
+          <svg
+            aria-hidden="true"
+            className="h-6 w-6 fill-white group-hover:fill-black"
+          >
+            <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2Z" />
+          </svg>
+        </Link>
+
+        <Link
+          href ="https://x.com/ctfguideapp"
+          aria-label = "ctfguideapp on X"
+          legacyBehavior>
+        <svg className="h-6 w-6 fill-white hover:fill-black" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="100" ><path fill="white" d="M 5.9199219 6 L 20.582031 27.375 L 6.2304688 44 L 9.4101562 44 L 21.986328 29.421875 L 31.986328 44 L 44 44 L 28.681641 21.669922 L 42.199219 6 L 39.029297 6 L 27.275391 19.617188 L 17.933594 6 L 5.9199219 6 z M 9.7167969 8 L 16.880859 8 L 40.203125 42 L 33.039062 42 L 9.7167969 8 z"/>
+        
+        </svg>
+
+        
+        </Link>
+      </div>
+      <p className="mt-6 text-sm text-white sm:mt-0">
+        Copyright &copy; {new Date().getFullYear()} CTFGuide Corporation. All rights
+        reserved. <br></br>
+        <span className="text-xs text-white">
+        Supported by <a href="https://psuwebdev.org/" className="text-blue-400 hover:text-blue-300">PSU Web Development Club</a>, <a href="https://bullmontcapital.com/" className="text-white hover:text-gray-300">Bullmont Capital</a>, and <a href="https://www.psu.edu/" className="text-white hover:text-gray-300">Penn State University</a>.
+
+        </span>
+      </p>
+    </div>
+  </Container>
+</footer>
+</>);
 }
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 9dff82e9..92f914be 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -91,7 +91,7 @@ export function Header() {
       <Container>
         <nav className="relative z-50 flex justify-between">
           <div className="flex items-center md:gap-x-12">
-            <Link href="../" aria-label="Home">
+            <Link href="../" aria-label="Home" legacyBehavior>
               <Logo className="h-10 w-auto" /> 
             </Link>
             
diff --git a/src/components/StandardNav.jsx b/src/components/StandardNav.jsx
index cb145313..747fb85e 100644
--- a/src/components/StandardNav.jsx
+++ b/src/components/StandardNav.jsx
@@ -288,7 +288,6 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
           <br></br>
         </div>
       )}
-
       <Disclosure as="nav" className=" border-b border-neutral-800 shadow">
         {({ open }) => (
           <>
@@ -313,21 +312,22 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                     </Disclosure.Button>
                   </div>
                   <div className="flex flex-shrink-0 items-center">
-                    <Link href="/dashboard" aria-label="Dashboard">
+                    <Link href="/dashboard" aria-label="Dashboard" legacyBehavior>
                       <Logo />
                     </Link>
                   </div>
                   <div className=" vertical-align md:ml-6 md:flex  ">
                   <Link
-                      href="/learn/modules"
-                      className={
-                        linkClass('/learn/modules') + ' hidden lg:inline-flex'
-                      }
-                    >
+                    href="/learn/modules"
+                    className={
+                      linkClass('/learn/modules') + ' hidden lg:inline-flex'
+                    }
+                  >
+                    <div className="flex items-center">
                       Learn
-
                       <span className="bg-blue-600 text-xs  ml-2 text-white px-2 rounded-full">New!</span>
-                    </Link>
+                    </div>
+                  </Link>
                     <Link
                       href="/practice"
                       className={
@@ -389,7 +389,7 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                                   <Link
                                     href="/create"
                                     className="flex items-center space-x-3 rounded-lg px-4 py-3 text-base text-gray-300 transition-all hover:bg-neutral-800 hover:text-white"
-                                  >
+                                    legacyBehavior>
                                     <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-neutral-800 text-white">
                                       <PencilSquareIcon className="h-5 w-5" />
                                     </div>
@@ -402,7 +402,7 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                                   <Link
                                     href="/groups"
                                     className="mt-2 flex items-center space-x-3 rounded-lg px-4 py-3 text-base text-gray-300 transition-all hover:bg-neutral-800 hover:text-white"
-                                  >
+                                    legacyBehavior>
                                     <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-neutral-800 text-white">
                                       <UserGroupIcon className="h-5 w-5" />
                                     </div>
@@ -587,7 +587,7 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                                 className={classNames(
                                   'flex w-full px-4 py-3  text-neutral-50 hover:bg-neutral-700'
                                 )}
-                              >
+                                legacyBehavior>
                                 <UserCircleIcon
                                   className="mr-4 block h-6 w-6"
                                   aria-hidden="true"
@@ -601,7 +601,7 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                                 className={classNames(
                                   'flex w-full px-4 py-3  text-neutral-50 hover:bg-neutral-700'
                                 )}
-                              >
+                                legacyBehavior>
                                 <Cog6ToothIcon
                                   className="mr-4 block h-6 w-6"
                                   aria-hidden="true"
@@ -626,7 +626,7 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                               className={classNames(
                                 'hidden flex w-full px-4 py-3  text-neutral-50 hover:bg-neutral-700'
                               )}
-                            >
+                              legacyBehavior>
                               <ShieldExclamationIcon
                                 className="mr-4 block h-6 w-6"
                                 aria-hidden="true"
@@ -639,7 +639,7 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                               className={classNames(
                                 ' flex w-full px-4 py-3  text-neutral-50 hover:bg-neutral-700'
                               )}
-                            >
+                              legacyBehavior>
                               <ShieldExclamationIcon
                                 className="mr-4 block h-6 w-6"
                                 aria-hidden="true"
@@ -653,7 +653,7 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                                 className={classNames(
                                   'flex w-full px-4 py-3  text-neutral-50 hover:bg-neutral-700'
                                 )}
-                              >
+                                legacyBehavior>
                                 <ShieldCheckIcon
                                   className="mr-4 block h-6 w-6"
                                   aria-hidden="true"
@@ -781,20 +781,16 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
           </>
         )}
       </Disclosure>
-
       <SearchModal
         showSearchModal={showSearchModal}
         setShowSearchModal={setShowSearchModal}
       />
       <Upgrade open={upgradeModalOpen} setOpen={setUpgradeModalOpen} />
-
-        <div className="mx-auto  hidden w-full bg-yellow-800 py-1 text-center  text-sm text-white ">
-          <h1 className="mx-auto  px-4 text-left">
-              Our server hosting provider is experiencing issues which may result in CTFGuide not working as expected. Join our <a className="font-bold" href="https://discord.gg/BwbCYHVX">Discord</a> for updates.
-          </h1>
-        </div>
-     
-
+      <div className="mx-auto  hidden w-full bg-yellow-800 py-1 text-center  text-sm text-white ">
+        <h1 className="mx-auto  px-4 text-left">
+            Our server hosting provider is experiencing issues which may result in CTFGuide not working as expected. Join our <a className="font-bold" href="https://discord.gg/BwbCYHVX">Discord</a> for updates.
+        </h1>
+      </div>
       <SpawnTerminal open={terminaIsOpen} setOpen={setTerminalIsOpen} />
       <NotificationsModal
         open={showAllNotifications}
diff --git a/src/components/challenge/ChallengeComponent.jsx b/src/components/challenge/ChallengeComponent.jsx
index ff72c85a..fd0fc306 100644
--- a/src/components/challenge/ChallengeComponent.jsx
+++ b/src/components/challenge/ChallengeComponent.jsx
@@ -37,7 +37,7 @@ const Challenge = ({ data, inCarousel }) => {
         classStyle +
         'duration-4000 min-h-[190px] min-w-[200px] transition ease-in-out hover:bg-neutral-800/40'
       }
-    >
+      legacyBehavior>
       <div className="relative h-full">
         <div className="flex">
           <span
diff --git a/src/components/dashboard/DashboardHeader.jsx b/src/components/dashboard/DashboardHeader.jsx
index e8cdfb46..10f94bc4 100644
--- a/src/components/dashboard/DashboardHeader.jsx
+++ b/src/components/dashboard/DashboardHeader.jsx
@@ -97,7 +97,7 @@ export function DashboardHeader() {
       <div className="mx-auto max-w-7xl">
         <div className="-mt-12  sm:-mt-16 sm:flex sm:items-end sm:space-x-5">
           <div className="flex justify-center sm:justify-start">
-            <Link href={`${baseUrl}/users/${username}`}>
+            <Link href={`${baseUrl}/users/${username}`} legacyBehavior>
               {(pfp && (
                 <img
                   className="h-32 w-32    rounded-full hover:bg-[#212121] sm:h-32 sm:w-32"
diff --git a/src/components/dashboard/FriendCard.jsx b/src/components/dashboard/FriendCard.jsx
index 0513672a..7df99497 100644
--- a/src/components/dashboard/FriendCard.jsx
+++ b/src/components/dashboard/FriendCard.jsx
@@ -7,27 +7,26 @@ export function FriendCard({ username, bio, badges, followers, following }) {
   };
 
   return (
-
-      <div
-        className="py-4 mt-5 text-white text-center border border-neutral-500"
-      >
-        <Link href={`/users/${username}`}>
-          <img
-            style={{ borderColor: '#212121' }}
-            className="mx-auto h-22 w-22 rounded-full border bg-neutral-900 hover:bg-[#212121]"
-            src={`https://robohash.org/${username}.png?set=set1&size=150x150`}
-            alt=""
-          />
-        </Link>
-        <h1 className="mt-4 text-xl font-bold text-blue-500">{username}</h1>
-        <h2>Followers: {followers}</h2>
-        <h2>Following: {following}</h2>
-        {bio &&
-          <hr className='mt-4 border-gray-500 w-4/5 mx-auto'></hr>
-        }
-        <p className="mt-4 text-lg px-2 leading-relaxed text-gray-300">
-        
-        </p>
-      </div>
+    <div
+      className="py-4 mt-5 text-white text-center border border-neutral-500"
+    >
+      <Link href={`/users/${username}`} legacyBehavior>
+        <img
+          style={{ borderColor: '#212121' }}
+          className="mx-auto h-22 w-22 rounded-full border bg-neutral-900 hover:bg-[#212121]"
+          src={`https://robohash.org/${username}.png?set=set1&size=150x150`}
+          alt=""
+        />
+      </Link>
+      <h1 className="mt-4 text-xl font-bold text-blue-500">{username}</h1>
+      <h2>Followers: {followers}</h2>
+      <h2>Following: {following}</h2>
+      {bio &&
+        <hr className='mt-4 border-gray-500 w-4/5 mx-auto'></hr>
+      }
+      <p className="mt-4 text-lg px-2 leading-relaxed text-gray-300">
+      
+      </p>
+    </div>
   );
 };
\ No newline at end of file
diff --git a/src/components/dashboard/FriendRequestCard.jsx b/src/components/dashboard/FriendRequestCard.jsx
index 27b3796c..eae750f1 100644
--- a/src/components/dashboard/FriendRequestCard.jsx
+++ b/src/components/dashboard/FriendRequestCard.jsx
@@ -4,7 +4,7 @@ export function FriendRequestCard({ username, followers, following, onAccept, on
     return (
         <div className='mx-auto mt-6 border border-neutral-500 w-5/6'>
             <div className="py-8 text-neutral-500 text-center flex items-center w-full text-white">
-                <Link href={`/users/${username}`}>
+                <Link href={`/users/${username}`} legacyBehavior>
                     <img
                         style={{ borderColor: '#212121', height: "100px", width: "100px" }}
                         className="mx-5 h-15 w-15 rounded-full border bg-black hover:bg-[#212121]"
diff --git a/src/components/dashboard/Suggest.jsx b/src/components/dashboard/Suggest.jsx
index 7ce080ec..8d21fecd 100644
--- a/src/components/dashboard/Suggest.jsx
+++ b/src/components/dashboard/Suggest.jsx
@@ -9,10 +9,9 @@ export function Suggest() {
         {' '}
         RECOMMENDATIONS
       </h1>
-
       <div className="mb-5 grid grid-cols-2 gap-x-4">
         <div className="">
-          <Link href='/challenges/cypher_decoding'>
+          <Link href='/challenges/cypher_decoding' legacyBehavior>
             <div className="  relative isolate overflow-hidden  rounded-md bg-black/10 bg-neutral-900 pb-4   ">
               <div className="relative mx-auto max-w-7xl  px-5">
                 <div className="mx-auto lg:mx-0 lg:max-w-3xl">
diff --git a/src/components/groups/studentView.jsx b/src/components/groups/studentView.jsx
index 9dff60ef..34dc2958 100644
--- a/src/components/groups/studentView.jsx
+++ b/src/components/groups/studentView.jsx
@@ -42,7 +42,6 @@ export default function StudentView({ group }) {
       </Head>
       <StandardNav />
       <StudentNav classCode={classroom.classCode} />
-      
       <div className="min-h-screen bg-neutral-900/30 pb-12">
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-8">
           {/* Header Section */}
@@ -90,7 +89,7 @@ export default function StudentView({ group }) {
                   <Link
                     href={`/groups/${classroom.classCode}/view-all-assignments`}
                     className="text-sm text-blue-400 hover:text-blue-300 transition-colors flex items-center"
-                  >
+                    legacyBehavior>
                     View All <i className="fas fa-arrow-right ml-2"></i>
                   </Link>
                 </div>
@@ -165,7 +164,6 @@ export default function StudentView({ group }) {
           </div>
         </div>
       </div>
-
       <ToastContainer
         position="bottom-right"
         autoClose={5000}
diff --git a/src/components/home/Hero.jsx b/src/components/home/Hero.jsx
index 511b1c42..6256ec8d 100644
--- a/src/components/home/Hero.jsx
+++ b/src/components/home/Hero.jsx
@@ -46,7 +46,7 @@ export function Hero() {
 
           <nav className="flex items-center justify-between p-6 lg:px-8" aria-label="Global">
             <div className="flex lg:flex-1">
-            <Link href="../" aria-label="Home">
+            <Link href="../" aria-label="Home" legacyBehavior>
               <Logo className="h-10 w-auto" />
             </Link>
             
@@ -70,7 +70,10 @@ export function Hero() {
                       <Popover.Panel className="absolute left-1/2 z-10 mt-3 w-screen max-w-md -translate-x-1/2 transform px-2 sm:px-0">
                         <div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
                           <div className="relative grid gap-6 bg-neutral-900 bg-blend-overlay px-5 py-6 sm:gap-8 sm:p-8">
-                            <Link href="/education" className="block p-3 -m-3 transition duration-150 ease-in-out rounded-md hover:bg-neutral-800">
+                            <Link
+                              href="/education"
+                              className="block p-3 -m-3 transition duration-150 ease-in-out rounded-md hover:bg-neutral-800"
+                              legacyBehavior>
                               <div className="flex items-start">
                                 <AcademicCapIcon className="h-8 w-8 text-blue-500 mr-3 mt-1" />
                                 <div>
@@ -135,7 +138,7 @@ export function Hero() {
             <div className="fixed inset-0 z-50" />
             <Dialog.Panel className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-gray-900 px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-white/10">
               <div className="flex items-center justify-between">
-              <Link href="../" aria-label="Home">
+              <Link href="../" aria-label="Home" legacyBehavior>
               <Logo className="h-10 w-auto" />
             </Link>
                 <button
@@ -173,7 +176,6 @@ export function Hero() {
             </Dialog.Panel>
           </Dialog>
         </header>
-  
         <div className="relative isolate pt-14">
           <div
             className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
@@ -279,5 +281,5 @@ export function Hero() {
           </div>
         </div>
       </div>
-  );
+    );
 }
diff --git a/src/components/practice/community.jsx b/src/components/practice/community.jsx
index c26a9186..90fe2da3 100644
--- a/src/components/practice/community.jsx
+++ b/src/components/practice/community.jsx
@@ -375,12 +375,10 @@ export function Community({ challenges }) {
             </>
           ) : (
             // kinda hacky but it works
-            challenges.length != 0 && (
-              <div className="bg-neutral-800/50 p-4 py-10 rounded-md w-full col-span-4 text-center">
-                <FontAwesomeIcon icon={faFolderOpen} className="w-10 h-10 mx-auto mb-4 text-neutral-400" />
-                <p className="text-white">No challenges found with the current filters. Try changing the filters or search for a different challenge.</p>
-              </div>
-            )
+            (challenges.length != 0 && (<div className="bg-neutral-800/50 p-4 py-10 rounded-md w-full col-span-4 text-center">
+              <FontAwesomeIcon icon={faFolderOpen} className="w-10 h-10 mx-auto mb-4 text-neutral-400" />
+              <p className="text-white">No challenges found with the current filters. Try changing the filters or search for a different challenge.</p>
+            </div>))
           )}
         </div>
       </div>
diff --git a/src/components/profile/ChallengeCard.jsx b/src/components/profile/ChallengeCard.jsx
index 33595412..004ff8f6 100644
--- a/src/components/profile/ChallengeCard.jsx
+++ b/src/components/profile/ChallengeCard.jsx
@@ -60,57 +60,57 @@ const ChallengeCard = (_props) => {
     'INSANE': 'border-purple-500',
   };
 
-  return (
-    challenge && (
-      <Link {...props} className={`group w-full border-l-4 ${colorBorder[challenge.difficulty]} ${
+  return (challenge && (
+    <Link
+      {...props}
+      className={`group w-full border-l-4 ${colorBorder[challenge.difficulty]} ${
         challenge.solved ? 'bg-green-900/50' : 'bg-[#212121]'
-      } px-5 py-6 transition-all duration-300 hover:bg-[#2c2c2c] ${props.className ?? ''}`} href={`${baseUrl}/challenges/${challenge.id}`} >
-        <div className="flex justify-between">
-          <h1 className="truncate text-2xl  text-white w-2/3">{challenge.title}</h1>
+      } px-5 py-6 transition-all duration-300 hover:bg-[#2c2c2c] ${props.className ?? ''}`}
+      href={`${baseUrl}/challenges/${challenge.id}`}
+      legacyBehavior>
+      <div className="flex justify-between">
+        <h1 className="truncate text-2xl  text-white w-2/3">{challenge.title}</h1>
 
-          <div className="flex items-center text-gray-400 ">
-       
-            <span className='text-green-300'><i className="fas fa-arrow-up text-green-300"></i> {challenge.upvotes !== undefined ? challenge.upvotes : <Skeleton width={20} />}</span>
-            <span className='ml-2 text-red-300'><i className="fas fa-arrow-down text-red-200"></i>  {challenge.downvotes !== undefined ? challenge.downvotes : <Skeleton width={20} />}</span>
-          </div>
-        </div>
-        <div className="mt-2 flex items-center text-gray-400">
-          <img
-            className="h-5 w-5 mr-2 rounded-full"
-            src={creatorPfp || 'default-profile-image-url'}
-            alt="Profile Picture"
-          />
-          <span>@{challenge.creator}</span>
-          {creator && creator.role === 'ADMIN' && (
-            <span className="text-red-500 text-xs ml-1"><i className="fas fa-code fa-fw"></i></span>
-          )}
-          {creator && creator.role === 'PRO' && (
-            <span className="text-yellow-500 text-xs ml-1"><i className="fas fa-crown fa-fw"></i></span>
-       
-       )}
+        <div className="flex items-center text-gray-400 ">
+     
+          <span className='text-green-300'><i className="fas fa-arrow-up text-green-300"></i> {challenge.upvotes !== undefined ? challenge.upvotes : <Skeleton width={20} />}</span>
+          <span className='ml-2 text-red-300'><i className="fas fa-arrow-down text-red-200"></i>  {challenge.downvotes !== undefined ? challenge.downvotes : <Skeleton width={20} />}</span>
         </div>
+      </div>
+      <div className="mt-2 flex items-center text-gray-400">
+        <img
+          className="h-5 w-5 mr-2 rounded-full"
+          src={creatorPfp || 'default-profile-image-url'}
+          alt="Profile Picture"
+        />
+        <span>@{challenge.creator}</span>
+        {creator && creator.role === 'ADMIN' && (
+          <span className="text-red-500 text-xs ml-1"><i className="fas fa-code fa-fw"></i></span>
+        )}
+        {creator && creator.role === 'PRO' && (
+          <span className="text-yellow-500 text-xs ml-1"><i className="fas fa-crown fa-fw"></i></span>
+     
+     )}
+      </div>
 
-        <div className="mt-4 flex items-center">
-          <PuzzlePieceIcon className="h-5 w-5 mr-2 text-white" />
-          <span className="text-white">{challenge.category}</span>
-          <span className={`ml-4 px-2  rounded-sm text-sm font-bold capitalize ${colorText[challenge.difficulty || 0]}`}>{challenge.difficulty?.toLowerCase() || <Skeleton />}</span>
+      <div className="mt-4 flex items-center">
+        <PuzzlePieceIcon className="h-5 w-5 mr-2 text-white" />
+        <span className="text-white">{challenge.category}</span>
+        <span className={`ml-4 px-2  rounded-sm text-sm font-bold capitalize ${colorText[challenge.difficulty || 0]}`}>{challenge.difficulty?.toLowerCase() || <Skeleton />}</span>
 
-        <div className=" ml-auto flex text-gray-400">
-          <EyeIcon className="h-5 w-5 mr-2" />
-          <span>{challenge.views !== undefined ? challenge.views : <Skeleton width={20} />}</span>
-     
-        </div>
-        </div>
-      </Link>
-    ) || (
-      <div {...props} className={`bg-neutral-800 w-full rounded-sm pl-8 pr-6 py-4 leading-8 ${props.className ?? ''}`}>
-        <Skeleton baseColor='#262626' highlightColor='#3a3a3a' width='10rem' />
-        <Skeleton baseColor='#262626' highlightColor='#3a3a3a' width='12rem' />
-        <Skeleton baseColor='#262626' highlightColor='#3a3a3a' width='4rem' />
-        <Skeleton baseColor='#262626' highlightColor='#3a3a3a' />
+      <div className=" ml-auto flex text-gray-400">
+        <EyeIcon className="h-5 w-5 mr-2" />
+        <span>{challenge.views !== undefined ? challenge.views : <Skeleton width={20} />}</span>
+   
+      </div>
       </div>
-    )
-  );
+    </Link>
+  ) || (<div {...props} className={`bg-neutral-800 w-full rounded-sm pl-8 pr-6 py-4 leading-8 ${props.className ?? ''}`}>
+    <Skeleton baseColor='#262626' highlightColor='#3a3a3a' width='10rem' />
+    <Skeleton baseColor='#262626' highlightColor='#3a3a3a' width='12rem' />
+    <Skeleton baseColor='#262626' highlightColor='#3a3a3a' width='4rem' />
+    <Skeleton baseColor='#262626' highlightColor='#3a3a3a' />
+  </div>));
 };
 
 export default ChallengeCard;
\ No newline at end of file
diff --git a/src/components/settingComponents/sidebar.jsx b/src/components/settingComponents/sidebar.jsx
index 476923e7..788e2626 100644
--- a/src/components/settingComponents/sidebar.jsx
+++ b/src/components/settingComponents/sidebar.jsx
@@ -10,31 +10,43 @@ export default function Sidebar() {
     >
       <ul className="mr-2 py-2">
         <li className="py-1">
-          <Link href="../settings" passHref>
-            <a className="px-2 py-1 text-lg font-medium text-white hover:text-gray-400 sm:text-base">
+          <Link
+            href="../settings"
+            passHref
+            className="px-2 py-1 text-lg font-medium text-white hover:text-gray-400 sm:text-base">
+            
               General
-            </a>
+            
           </Link>
         </li>
         <li className="py-1">
-          <Link href="../settings/security" passHref>
-            <a className="px-2 py-1 text-lg font-medium text-white hover:text-gray-400 sm:text-base">
+          <Link
+            href="../settings/security"
+            passHref
+            className="px-2 py-1 text-lg font-medium text-white hover:text-gray-400 sm:text-base">
+            
               Security
-            </a>
+            
           </Link>
         </li>
         <li className="py-1">
-          <Link href="../settings/preferences" passHref>
-            <a className="px-2 py-1 text-lg font-medium text-white hover:text-gray-400 sm:text-base">
+          <Link
+            href="../settings/preferences"
+            passHref
+            className="px-2 py-1 text-lg font-medium text-white hover:text-gray-400 sm:text-base">
+            
               Email Preferences
-            </a>
+            
           </Link>
         </li>
         <li className="py-1">
-          <Link href="../settings/billing" passHref>
-            <a className="px-2 py-1 text-lg font-medium text-white hover:text-gray-400 sm:text-base">
+          <Link
+            href="../settings/billing"
+            passHref
+            className="px-2 py-1 text-lg font-medium text-white hover:text-gray-400 sm:text-base">
+            
               Billing
-            </a>
+            
           </Link>
         </li>
       </ul>
diff --git a/src/components/social/FriendCard.jsx b/src/components/social/FriendCard.jsx
index dca599c9..b36d1482 100644
--- a/src/components/social/FriendCard.jsx
+++ b/src/components/social/FriendCard.jsx
@@ -77,7 +77,7 @@ const FriendCard = ({ data }, mutual) => {
   const followers = followedBy.length;
 
   return (
-    <Link href={`/users/${username}`} passHref>
+    <Link href={`/users/${username}`} passHref legacyBehavior>
       <div className="flex flex-1">
         <div className="group relative h-36 w-96 cursor-pointer overflow-hidden rounded-sm border border-gray-900 shadow-2xl hover:border-gray-500">
           <div
diff --git a/src/pages/challenges/[...id].jsx b/src/pages/challenges/[...id].jsx
index 6cd52aa1..bba1e4f1 100644
--- a/src/pages/challenges/[...id].jsx
+++ b/src/pages/challenges/[...id].jsx
@@ -789,11 +789,14 @@ function TabLink({ tabName, selected, url, className }) {
   }[tabName] || 'fas fa-file-alt text-blue-500'
 
   return (
-    <Link href={url} className={`flex justify-center items-center ${selectedStyle} hover:text-white transition-all duration-400 px-2 hover:bg-neutral-600 rounded-sm h-full ${className}`}>
+    <Link
+      href={url}
+      className={`flex justify-center items-center ${selectedStyle} hover:text-white transition-all duration-400 px-2 hover:bg-neutral-600 rounded-sm h-full ${className}`}
+      legacyBehavior>
       <i className={`${icon} w-6 mr-1 inline-flex`}></i>
       {tabName ?? 'This is a test button'}
     </Link>
-  )
+  );
 }
 
 const baseUrl = process.env.NEXT_PUBLIC_API_URL;
@@ -1006,7 +1009,10 @@ function DescriptionPage({ cache, fileIDName, fileIDLink }) {
           {challenge ? <>
             <div className="flex items-center">
               <img src={authorPfp} alt="Author's profile picture" className="bg-neutral-700 h-8 w-8 rounded-full" />
-              <Link href={`/users/${challenge.creator}`} className="text-blue-500 pr-3 hover:underline ml-2">{challenge.creator}</Link>
+              <Link
+                href={`/users/${challenge.creator}`}
+                className="text-blue-500 pr-3 hover:underline ml-2"
+                legacyBehavior>{challenge.creator}</Link>
             </div>
             <p className="flex text-neutral-200 opacity-70 items-center text-sm">
               <i className="fas fa-solid fa-eye mr-2 text-lg"></i>
@@ -1074,7 +1080,7 @@ function DescriptionPage({ cache, fileIDName, fileIDLink }) {
       </div >
       <div className="shrink-0 bg-neutral-800 h-10 w-full"></div>
     </>
-  )
+  );
 }
 
 
@@ -1429,13 +1435,11 @@ function LeaderboardPage({ cache, setCache }) {
 
 
       </div>
-
       <div className="grid grid-cols-3">
         <div className="">
 
         </div>
       </div>
-
       {leaderboard.length > 0 ? (
         <div className="px-1 overflow-y-auto max-h-[calc(100vh-40px)] relative">
           {leaderboard.slice(0, 10).map((entry, index) => {
@@ -1464,7 +1468,7 @@ function LeaderboardPage({ cache, setCache }) {
                     />
                     <span className="text-2xl font-bold">{index + 1}.</span>
                     <span className="ml-2 text-xl font-semibold text-white">
-                      <Link href={`/users/${entry.user.username}`}>
+                      <Link href={`/users/${entry.user.username}`} legacyBehavior>
                         {entry.user.username}
                       </Link>
                     </span>
@@ -1472,7 +1476,7 @@ function LeaderboardPage({ cache, setCache }) {
                   <div className="text-xl font-semibold">{entry.points} points</div>
                 </div>
               </div>
-            )
+            );
           })}
           {/* Add fade-out overlay that stays anchored */}
           <div className="sticky bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-neutral-800 to-transparent pointer-events-none"></div>
@@ -1491,7 +1495,7 @@ function LeaderboardPage({ cache, setCache }) {
       )}
       <div className="shrink-0 bg-neutral-800 h-10 w-full"></div>
     </>
-  )
+  );
 }
 
 function CommentsPage({ cache }) {
diff --git a/src/pages/create.jsx b/src/pages/create.jsx
index 41aae10b..db6e074a 100644
--- a/src/pages/create.jsx
+++ b/src/pages/create.jsx
@@ -495,25 +495,25 @@ export default function Create() {
               >
                 Home
               </Link>
-              <Link 
+              <Link
                 href="/create/earnings"
                 className={`text-sm font-medium border-b-2 h-full flex items-center transition-colors ${
                   false  // Replace with actual route check
                     ? 'border-blue-500 text-white' 
                     : 'border-transparent text-neutral-400 hover:text-white hover:border-[#333333]'
                 }`}
-              >
+                legacyBehavior>
                 <i className="fas fa-wallet mr-2"></i>
                 Earnings
               </Link>
-              <Link 
+              <Link
                 href="/create/settings"
                 className={`hidden text-sm font-medium border-b-2 h-full flex items-center transition-colors ${
                   false  // Replace with actual route check
                     ? 'border-blue-500 text-white' 
                     : 'border-transparent text-neutral-400 hover:text-white hover:border-[#333333]'
                 }`}
-              >
+                legacyBehavior>
                 <i className="fas fa-cog mr-2"></i>
                 Creator Settings
               </Link>
@@ -841,7 +841,6 @@ export default function Create() {
         </div>
       </main>
       <Footer />
-
       {/* Keep existing modals and notifications */}
       <Menu open={isCreating} setOpen={setIsCreating} solvedChallenges={solvedChallenges} />
       <Modal open={openModal} onClose={handleCloseModal}>
@@ -863,7 +862,6 @@ export default function Create() {
         </Box>
       </Modal>
       <ToastContainer position="bottom-right" theme="dark" />
-
       <Transition appear show={isEnableModalOpen} as={Fragment}>
         <Dialog as="div" className="relative z-50" onClose={() => setIsEnableModalOpen(false)}>
           <Transition.Child
@@ -921,7 +919,6 @@ export default function Create() {
           </div>
         </Dialog>
       </Transition>
-
       <Transition appear show={isDisableModalOpen} as={Fragment}>
         <Dialog as="div" className="relative z-50" onClose={() => setIsDisableModalOpen(false)}>
           <Transition.Child
@@ -979,7 +976,6 @@ export default function Create() {
           </div>
         </Dialog>
       </Transition>
-
       {/* Video Modal */}
       <Transition appear show={isVideoModalOpen} as={Fragment}>
         <Dialog 
diff --git a/src/pages/create/earnings.jsx b/src/pages/create/earnings.jsx
index 833ad5ae..8291c8c6 100644
--- a/src/pages/create/earnings.jsx
+++ b/src/pages/create/earnings.jsx
@@ -80,10 +80,10 @@ export default function Earnings() {
               >
                 Home
               </Link>
-              <Link 
+              <Link
                 href="/create/earnings"
                 className="text-sm font-medium border-b-2 h-full flex items-center transition-colors border-blue-500 text-white"
-              >
+                legacyBehavior>
                 <i className="fas fa-wallet mr-2"></i>
                 Earnings 
               </Link>
diff --git a/src/pages/create/settings.jsx b/src/pages/create/settings.jsx
index a8a37e78..90fbd2cb 100644
--- a/src/pages/create/settings.jsx
+++ b/src/pages/create/settings.jsx
@@ -65,17 +65,17 @@ export default function CreatorSettings() {
               >
                 Home
               </Link>
-              <Link 
+              <Link
                 href="/create/earnings"
                 className="text-sm font-medium border-b-2 h-full flex items-center transition-colors border-transparent text-neutral-400 hover:text-white hover:border-[#333333]"
-              >
+                legacyBehavior>
                 <i className="fas fa-wallet mr-2"></i>
                 Earnings
               </Link>
-              <Link 
+              <Link
                 href="/create/settings"
                 className="text-sm font-medium border-b-2 h-full flex items-center transition-colors border-blue-500 text-white"
-              >
+                legacyBehavior>
                 <i className="fas fa-cog mr-2"></i>
                 Creator Settings
               </Link>
diff --git a/src/pages/education.jsx b/src/pages/education.jsx
index 9fbe258f..79453f68 100644
--- a/src/pages/education.jsx
+++ b/src/pages/education.jsx
@@ -117,12 +117,11 @@ const Education = () => {
           url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
         </style>
       </Head>
-
       <header className="py-4 " style={{ fontFamily: 'Poppins, sans-serif' }}>
       <Container>
         <nav className="relative z-50 flex justify-between">
           <div className="flex items-center md:gap-x-12">
-            <Link href="../" aria-label="Home">
+            <Link href="../" aria-label="Home" legacyBehavior>
             <div className="mx-auto my-auto flex">
       <img className="mx-auto w-12 text-center spin-on-hover" src="../../../../darkLogo.png" />
       <h1
@@ -152,11 +151,9 @@ const Education = () => {
         </nav>
       </Container>
     </header>
-
-    <div className='bg-blue-600 text-white text-center p-2'>
-      <p>CTFGuide EDU is not the same as CTFGuide GP. If you're a solo learner, you can <a href="/register" className='text-white font-semibold'>sign up for CTFGuide GP</a> for free.</p>
-    </div>
-
+      <div className='bg-blue-600 text-white text-center p-2'>
+        <p>CTFGuide EDU is not the same as CTFGuide GP. If you're a solo learner, you can <a href="/register" className='text-white font-semibold'>sign up for CTFGuide GP</a> for free.</p>
+      </div>
       <main>
       <div className="bg-neutral-900 border-t border-neutral-800">
       <div className="relative isolate overflow-hidden bg-gradient-to-b from-blue-100/20">
diff --git a/src/pages/explorers.jsx b/src/pages/explorers.jsx
index c4263634..2313f3ab 100644
--- a/src/pages/explorers.jsx
+++ b/src/pages/explorers.jsx
@@ -26,157 +26,157 @@ export default function Home() {
 
   return (
     <>
-    <Head>
-    <style>
-          @import
-          url(&apos;https://fonts.googleapis.com/css2?family=Poppins&display=swap&apos;);
-        </style>
-    </Head>
-    <div className="bg-neutral-900">
-        <header className="absolute inset-x-0 top-0 z-50">
-          <nav className="flex items-center justify-between p-6 lg:px-8" aria-label="Global">
-            <div className="flex lg:flex-1">
-            <Link href="../" aria-label="Home">
-              <Logo className="h-10 w-auto" />
-            </Link>
-            </div>
-            <div className="flex lg:hidden">
-              <button
-                type="button"
-                className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-400"
-                onClick={() => setMobileMenuOpen(true)}
-              >
-                <span className="sr-only">Open main menu</span>
-                <Bars3Icon className="h-6 w-6" aria-hidden="true" />
-              </button>
-            </div>
-            <div className="hidden lg:flex lg:gap-x-12">
-              {navigation.map((item) => (
-                <a key={item.name} href={item.href} className="text-sm font-semibold leading-6 text-white">
-                  {item.name}
-                </a>
-              ))}
-            </div>
-            <div className="hidden lg:flex lg:flex-1 lg:justify-end">
-              <a href="./login" className="text-sm font-semibold leading-6 text-white">
-                Log in <span aria-hidden="true">&rarr;</span>
-              </a>
-            </div>
-          </nav>
-          <Dialog as="div" className="lg:hidden" open={mobileMenuOpen} onClose={setMobileMenuOpen}>
-            <div className="fixed inset-0 z-50" />
-            <Dialog.Panel className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-gray-900 px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-white/10">
-              <div className="flex items-center justify-between">
-              <Link href="../" aria-label="Home">
-              <Logo className="h-10 w-auto" />
-            </Link>
+      <Head>
+      <style>
+            @import
+            url(&apos;https://fonts.googleapis.com/css2?family=Poppins&display=swap&apos;);
+          </style>
+      </Head>
+      <div className="bg-neutral-900">
+          <header className="absolute inset-x-0 top-0 z-50">
+            <nav className="flex items-center justify-between p-6 lg:px-8" aria-label="Global">
+              <div className="flex lg:flex-1">
+              <Link href="../" aria-label="Home" legacyBehavior>
+                <Logo className="h-10 w-auto" />
+              </Link>
+              </div>
+              <div className="flex lg:hidden">
                 <button
                   type="button"
-                  className="-m-2.5 rounded-md p-2.5 text-gray-400"
-                  onClick={() => setMobileMenuOpen(false)}
+                  className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-400"
+                  onClick={() => setMobileMenuOpen(true)}
                 >
-                  <span className="sr-only">Close menu</span>
-                  <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                  <span className="sr-only">Open main menu</span>
+                  <Bars3Icon className="h-6 w-6" aria-hidden="true" />
                 </button>
               </div>
-              <div className="mt-6 flow-root">
-                <div className="-my-6 divide-y divide-gray-500/25">
-                  <div className="space-y-2 py-6">
-                    {navigation.map((item) => (
+              <div className="hidden lg:flex lg:gap-x-12">
+                {navigation.map((item) => (
+                  <a key={item.name} href={item.href} className="text-sm font-semibold leading-6 text-white">
+                    {item.name}
+                  </a>
+                ))}
+              </div>
+              <div className="hidden lg:flex lg:flex-1 lg:justify-end">
+                <a href="./login" className="text-sm font-semibold leading-6 text-white">
+                  Log in <span aria-hidden="true">&rarr;</span>
+                </a>
+              </div>
+            </nav>
+            <Dialog as="div" className="lg:hidden" open={mobileMenuOpen} onClose={setMobileMenuOpen}>
+              <div className="fixed inset-0 z-50" />
+              <Dialog.Panel className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-gray-900 px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-white/10">
+                <div className="flex items-center justify-between">
+                <Link href="../" aria-label="Home" legacyBehavior>
+                <Logo className="h-10 w-auto" />
+              </Link>
+                  <button
+                    type="button"
+                    className="-m-2.5 rounded-md p-2.5 text-gray-400"
+                    onClick={() => setMobileMenuOpen(false)}
+                  >
+                    <span className="sr-only">Close menu</span>
+                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                  </button>
+                </div>
+                <div className="mt-6 flow-root">
+                  <div className="-my-6 divide-y divide-gray-500/25">
+                    <div className="space-y-2 py-6">
+                      {navigation.map((item) => (
+                        <a
+                          key={item.name}
+                          href={item.href}
+                          className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800"
+                        >
+                          {item.name}
+                        </a>
+                      ))}
+                    </div>
+                    <div className="py-6">
                       <a
-                        key={item.name}
-                        href={item.href}
-                        className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800"
+                        href="../login"
+                        className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-white hover:bg-gray-800"
                       >
-                        {item.name}
+                        Log in
                       </a>
-                    ))}
+                    </div>
                   </div>
-                  <div className="py-6">
+                </div>
+              </Dialog.Panel>
+            </Dialog>
+          </header>
+    
+          <div className="relative isolate pt-14">
+            <div
+              className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
+              aria-hidden="true"
+            >
+              <div
+                className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/3 rotate-[30deg] bg-gradient-to-tr from-[#0e1354] to-[#1223a6] opacity-40 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
+                style={{
+                  clipPath:
+                    'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+                }}
+              />
+            </div>
+            <div className="py-24 sm:py-32 lg:pb-40">
+              <div className="mx-auto max-w-7xl px-6 lg:px-8">
+                <div className="mx-auto max-w-4xl text-center">
+                  <h1 className="text-4xl font-bold tracking-normal text-white sm:text-6xl leading-relaxed ">
+                    The platform that <span className="text-blue-600 leading-relaxed">
+                      <TextLoop>
+                        <span>grows</span>
+                        <span>develops</span>
+                        <span>trains</span>
+                    </TextLoop>
+  </span> <span className='mt-3'> cybersecurity talent.</span>
+                  </h1>
+                  <p className="mt-6 text-lg leading-8 text-gray-300">
+                    A data-driven simulation platform that provides a realistic, hands-on experience for you to become a cybersecurity professional.
+                  </p>
+                  <div className="mt-10 flex items-center justify-center gap-x-6">
                     <a
-                      href="../login"
-                      className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-white hover:bg-gray-800"
+                      href="../register"
+                      className="rounded-md   px-6 py-1.5 text-lg font-semibold text-white border border-white hover:bg-slate-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-400"
                     >
-                      Log in
+                      Get started
                     </a>
+                    <p onClick={() => window.scrollTo(0, 1500)} className="cursor-pointer text-lg font-semibold leading-6 text-white">
+                      Learn more <span aria-hidden="true">→</span>
+                    </p>
                   </div>
                 </div>
-              </div>
-            </Dialog.Panel>
-          </Dialog>
-        </header>
-  
-        <div className="relative isolate pt-14">
-          <div
-            className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
-            aria-hidden="true"
-          >
-            <div
-              className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/3 rotate-[30deg] bg-gradient-to-tr from-[#0e1354] to-[#1223a6] opacity-40 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
-              style={{
-                clipPath:
-                  'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
-              }}
-            />
-          </div>
-          <div className="py-24 sm:py-32 lg:pb-40">
-            <div className="mx-auto max-w-7xl px-6 lg:px-8">
-              <div className="mx-auto max-w-4xl text-center">
-                <h1 className="text-4xl font-bold tracking-normal text-white sm:text-6xl leading-relaxed ">
-                  The platform that <span className="text-blue-600 leading-relaxed">
-                    <TextLoop>
-                      <span>grows</span>
-                      <span>develops</span>
-                      <span>trains</span>
-                  </TextLoop>
-</span> <span className='mt-3'> cybersecurity talent.</span>
-                </h1>
-                <p className="mt-6 text-lg leading-8 text-gray-300">
-                  A data-driven simulation platform that provides a realistic, hands-on experience for you to become a cybersecurity professional.
-                </p>
-                <div className="mt-10 flex items-center justify-center gap-x-6">
-                  <a
-                    href="../register"
-                    className="rounded-md   px-6 py-1.5 text-lg font-semibold text-white border border-white hover:bg-slate-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-400"
-                  >
-                    Get started
-                  </a>
-                  <p onClick={() => window.scrollTo(0, 1500)} className="cursor-pointer text-lg font-semibold leading-6 text-white">
-                    Learn more <span aria-hidden="true">→</span>
-                  </p>
-                </div>
-              </div>
-              <img
-             
-              />
+                <img
+               
+                />
 
-              <video
-              muted
-              autoPlay
-              width={2432}
-              height={1442}
-              className="mt-16 rounded-md bg-white/5 shadow-2xl ring-1 ring-white/10 sm:mt-24"
-         
-              >
-                <source src="../sample_vid.mp4" type="video/mp4" />
+                <video
+                muted
+                autoPlay
+                width={2432}
+                height={1442}
+                className="mt-16 rounded-md bg-white/5 shadow-2xl ring-1 ring-white/10 sm:mt-24"
+           
+                >
+                  <source src="../sample_vid.mp4" type="video/mp4" />
 
-              </video>
+                </video>
+              </div>
             </div>
-          </div>
-          <div
-            className="hidden inset-x-0 top-[calc(100%-13rem)] -z-10  transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
-            aria-hidden="true"
-          >
             <div
-              className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#0e1354] to-[#1223a6]  opacity-40 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
-              style={{
-                clipPath:
-                  'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
-              }}
-            />
+              className="hidden inset-x-0 top-[calc(100%-13rem)] -z-10  transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
+              aria-hidden="true"
+            >
+              <div
+                className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#0e1354] to-[#1223a6]  opacity-40 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
+                style={{
+                  clipPath:
+                    'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+                }}
+              />
+            </div>
           </div>
         </div>
-      </div>
     </>
-  )
+  );
 }
diff --git a/src/pages/groups.jsx b/src/pages/groups.jsx
index 2fc7a238..2a4e3970 100644
--- a/src/pages/groups.jsx
+++ b/src/pages/groups.jsx
@@ -174,7 +174,6 @@ export default function Groups() {
         />
       )}
       <StandardNav />
-
       <div className="  min-h-screen">
        
 
@@ -261,9 +260,10 @@ export default function Groups() {
                   <p className="font-medium text-white">No classes created yet</p>
                   <p className="text-sm text-neutral-400">Create your first classroom to start teaching</p>
                 </div>
-                <Link href="./groups/create"
+                <Link
+                  href="./groups/create"
                   className="inline-flex items-center px-4 py-2 rounded-lg border border-blue-600 text-blue-600 hover:bg-blue-600/10 transition-colors"
-                >
+                  legacyBehavior>
                   <i className="fas fa-plus mr-2"></i>
                   Create Now
                 </Link>
@@ -442,7 +442,6 @@ export default function Groups() {
           </Transition.Root>
         </div>
       </div>
-
       <ToastContainer />
       <Footer />
     </>
diff --git a/src/pages/groups/[group]/home.jsx b/src/pages/groups/[group]/home.jsx
index e0813583..c2011b16 100644
--- a/src/pages/groups/[group]/home.jsx
+++ b/src/pages/groups/[group]/home.jsx
@@ -70,10 +70,10 @@ export default function GroupDisplay() {
             <p className="text-neutral-400 mb-6">
               The classroom you're looking for doesn't exist or you don't have permission to access it.
             </p>
-            <Link 
+            <Link
               href="/groups"
               className="inline-flex items-center justify-center px-4 py-2 rounded-lg bg-neutral-800 text-white hover:bg-neutral-700 transition-colors"
-            >
+              legacyBehavior>
               <i className="fas fa-arrow-left mr-2"></i>
               Back to Classrooms
             </Link>
diff --git a/src/pages/groups/[group]/settings.jsx b/src/pages/groups/[group]/settings.jsx
index 69626b2f..f431419d 100644
--- a/src/pages/groups/[group]/settings.jsx
+++ b/src/pages/groups/[group]/settings.jsx
@@ -309,41 +309,38 @@ export default function teacherSettings() {
         </style>
       </Head>
       <StandardNav />
-
-
-            {classroom && 
-               <div className="border-b border-neutral-800">
-               <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-                 <div className="flex h-14 items-center space-x-4">
-                   <button
-                     onClick={() => router.push(`/groups/${group}/home`)}
-                     className="text-neutral-400 hover:text-white transition-colors"
-                   >
-                     Home
-                   </button>
-                   <button
-                     onClick={() => router.push(`/groups/${group}/view-all-assignments`)}
-                     className="text-neutral-400 hover:text-white transition-colors"
-                   >
-                     Assignments
-                   </button>
-                   <button
-                     onClick={() => router.push(`/groups/${group}/gradebook`)}
-                     className="text-neutral-400 hover:text-white transition-colors"
-                   >
-                     Gradebook
-                   </button>
-                   <button
-                     onClick={() => router.push(`/groups/${group}/settings`)}
-                     className="text-neutral-400 hover:text-white transition-colors"
-                   >
-                     Settings
-                   </button>
-                 </div>
-               </div>
-             </div>
+      {classroom && 
+         <div className="border-b border-neutral-800">
+         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+           <div className="flex h-14 items-center space-x-4">
+             <button
+               onClick={() => router.push(`/groups/${group}/home`)}
+               className="text-neutral-400 hover:text-white transition-colors"
+             >
+               Home
+             </button>
+             <button
+               onClick={() => router.push(`/groups/${group}/view-all-assignments`)}
+               className="text-neutral-400 hover:text-white transition-colors"
+             >
+               Assignments
+             </button>
+             <button
+               onClick={() => router.push(`/groups/${group}/gradebook`)}
+               className="text-neutral-400 hover:text-white transition-colors"
+             >
+               Gradebook
+             </button>
+             <button
+               onClick={() => router.push(`/groups/${group}/settings`)}
+               className="text-neutral-400 hover:text-white transition-colors"
+             >
+               Settings
+             </button>
+           </div>
+         </div>
+       </div>
 }
-
       <Loader isLoad={loadingAuth} />
       {
         !loadingAuth&&
@@ -759,7 +756,6 @@ export default function teacherSettings() {
       }
       <input type="hidden" id="copyBox" value={classCode || ''}></input>
       <input type="hidden" id="copyBox2" value={inviteLink || ''}></input>
-
       <ToastContainer
         position="bottom-right"
         autoClose={5000}
@@ -772,7 +768,6 @@ export default function teacherSettings() {
         pauseOnHover
         theme="dark"
       />
-
     </>
   );
 }
diff --git a/src/pages/login.jsx b/src/pages/login.jsx
index e2808958..97ad2a57 100644
--- a/src/pages/login.jsx
+++ b/src/pages/login.jsx
@@ -142,7 +142,7 @@ export default function Login() {
                       <div className='flex items-center'>
 
                         <h1 className='text-white  text-xl'>Login to </h1>
-                        <Link href="/" className="flex items-center ml-1">
+                        <Link href="/" className="flex items-center ml-1" legacyBehavior>
                           <img
                             className="z-10 h-10 w-10"
                             src="/darkLogo.png"
@@ -269,7 +269,6 @@ export default function Login() {
           </form>
         </div>
       </div>
-
       <ToastContainer
         position="bottom-right"
         autoClose={5000}
diff --git a/src/pages/register.jsx b/src/pages/register.jsx
index 8e04c50b..598e5112 100644
--- a/src/pages/register.jsx
+++ b/src/pages/register.jsx
@@ -207,7 +207,7 @@ function Register() {
                           <div>
                             <div className='flex items-center'>
                            <h1 className='text-white  text-xl'>Get started on</h1>
-                              <Link href="/" className="flex items-center ml-1">
+                              <Link href="/" className="flex items-center ml-1" legacyBehavior>
                                 <img
                                   className="z-10 h-10 w-10"
                                   src="/darkLogo.png"
diff --git a/src/pages/terminal.jsx b/src/pages/terminal.jsx
index c4538361..464c3624 100644
--- a/src/pages/terminal.jsx
+++ b/src/pages/terminal.jsx
@@ -346,11 +346,14 @@ function PointsModal({ isOpen, setIsOpen, points }) {
 function TabLink({ tabName, selected, url }) {
   const selectedStyle = selected ? 'text-white bg-neutral-600' : 'text-neutral-400';
   return (
-    <Link href={url} className={`flex justify-center items-center ${selectedStyle} hover:text-white px-2 hover:bg-neutral-600 rounded-sm h-full`}>
+    <Link
+      href={url}
+      className={`flex justify-center items-center ${selectedStyle} hover:text-white px-2 hover:bg-neutral-600 rounded-sm h-full`}
+      legacyBehavior>
       <DocumentTextIcon className="text-blue-500 w-6 mr-1 inline-flex" />
       {tabName ?? 'This is a test button'}
     </Link>
-  )
+  );
 }
 
 const baseUrl = process.env.NEXT_PUBLIC_API_URL;
@@ -508,7 +511,10 @@ function DescriptionPage({ cache }) {
         <h2 className="flex gap-2 pb-8">
           {challenge ? <>
             <img src={authorPfp} alt="Author's profile picture" className="h-8 w-8 rounded-full" />
-            <Link href={`/users/${challenge.creator}`} className="text-blue-500 pr-3 hover:underline">{challenge.creator} </Link>
+            <Link
+              href={`/users/${challenge.creator}`}
+              className="text-blue-500 pr-3 hover:underline"
+              legacyBehavior>{challenge.creator} </Link>
             <p className="flex  text-neutral-200 opacity-70 items-center text-sm">
               <i className="fas fa-solid fa-eye mr-2 text-lg"></i>
               {challenge.views}
@@ -524,7 +530,7 @@ function DescriptionPage({ cache }) {
       </div >
       <div className="shrink-0 bg-neutral-800 h-10 w-full"></div>
     </>
-  )
+  );
 }
 
 
@@ -822,13 +828,11 @@ function LeaderboardPage({ cache, setCache }) {
 
 
       </div>
-
       <div className="grid grid-cols-3">
         <div className="">
 
         </div>
       </div>
-
       {leaderboard.slice(0, 10).map((entry, index) => {
         let color;
         switch (index) {
@@ -856,7 +860,7 @@ function LeaderboardPage({ cache, setCache }) {
 
                 <span className="text-2xl font-bold">{index + 1}.</span>
                 <span className="ml-2 text-xl font-semibold text-white">
-                  <Link href={`/users/${entry.user.username}`}>
+                  <Link href={`/users/${entry.user.username}`} legacyBehavior>
                     {entry.user.username}
                   </Link>
                 </span>
@@ -864,11 +868,11 @@ function LeaderboardPage({ cache, setCache }) {
               <div className="text-xl font-semibold">{entry.points} points</div>
             </div>
           </div>
-        )
+        );
       })}
       <div className="shrink-0 bg-neutral-800 h-10 w-full"></div>
     </>
-  )
+  );
 }
 
 function CommentsPage({ cache }) {

From 774ea91e875177b22ab7d57fd4f37f376785b335 Mon Sep 17 00:00:00 2001
From: davidyoum <davidyoum@yahoo.com>
Date: Fri, 4 Apr 2025 21:12:01 -0400
Subject: [PATCH 2/2] Reverted changes to see whats up

---
 src/components/AuthPopup.jsx                  |   2 +-
 src/components/Button.jsx                     |   2 +-
 src/components/Footer.jsx                     | 281 +++++++++---------
 src/components/Header.jsx                     |   2 +-
 src/components/StandardNav.jsx                |  46 ++-
 .../challenge/ChallengeComponent.jsx          |   2 +-
 src/components/dashboard/DashboardHeader.jsx  |   2 +-
 src/components/dashboard/FriendCard.jsx       |  43 ++-
 .../dashboard/FriendRequestCard.jsx           |   2 +-
 src/components/dashboard/Suggest.jsx          |   3 +-
 src/components/groups/studentView.jsx         |   4 +-
 src/components/home/Hero.jsx                  |  12 +-
 src/components/practice/community.jsx         |  10 +-
 src/components/profile/ChallengeCard.jsx      |  90 +++---
 src/components/settingComponents/sidebar.jsx  |  36 ++-
 src/components/social/FriendCard.jsx          |   2 +-
 src/pages/challenges/[...id].jsx              |  22 +-
 src/pages/create.jsx                          |  12 +-
 src/pages/create/earnings.jsx                 |   4 +-
 src/pages/create/settings.jsx                 |   8 +-
 src/pages/education.jsx                       |  11 +-
 src/pages/explorers.jsx                       | 264 ++++++++--------
 src/pages/groups.jsx                          |   7 +-
 src/pages/groups/[group]/home.jsx             |   4 +-
 src/pages/groups/[group]/settings.jsx         |  67 ++---
 src/pages/login.jsx                           |   3 +-
 src/pages/register.jsx                        |   2 +-
 src/pages/terminal.jsx                        |  22 +-
 28 files changed, 479 insertions(+), 486 deletions(-)

diff --git a/src/components/AuthPopup.jsx b/src/components/AuthPopup.jsx
index 9ca1c2a7..b7d4fff2 100644
--- a/src/components/AuthPopup.jsx
+++ b/src/components/AuthPopup.jsx
@@ -11,7 +11,7 @@ export function AuthPopup() {
     // User logged out
     return (
       <div className="hidden rounded-md bg-[#3B82F6] hover:bg-[#468dff]">
-        <Link href="/login">
+        <Link href="/login" legacyBehavior>
           <div className="mx-auto my-auto flex h-10 text-center">
             <h1 className="mx-auto my-auto text-lg font-semibold text-white">
               Log in to see your progress!
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
index 96632aff..f41559af 100644
--- a/src/components/Button.jsx
+++ b/src/components/Button.jsx
@@ -38,7 +38,7 @@ export function Button({
   );
 
   return href ? (
-    <Link href={href} className={className} {...props} />
+    <Link href={href} className={className} {...props} legacyBehavior />
   ) : (
     <button className={className} {...props} />
   );
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 1ae1ef1d..9cf22f1c 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -5,145 +5,63 @@ const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_URL;
 
 export function Footer({isHome}) {
   isHome = false;
-  return (
-    isHome ?
-    <footer style={{ backgroundColor: '#161716' }} className='max-w-7xl mx-auto'>
-      <Container>
-        <div className="py-20">
-          <img 
-            src={`${baseUrl}/darkLogo.png`} 
-            className="mx-auto w-16 h-16 text-center mb-8" 
-            alt="CTFGuide Logo" 
-          />
-          <nav className="mt-10 grid grid-cols-2 md:grid-cols-4 gap-x-12 gap-y-10 text-sm text-slate-300" aria-label="footer navigation">
-            <div>
-              <h3 className="font-bold text-white text-sm mb-4 uppercase tracking-wider">Platform</h3>
-              <ul className="space-y-3 list-none pl-0">
-                <li><NavLink className="hover:text-white transition-colors" href="../terms-of-service">Terms of Service</NavLink></li>
-                <li><NavLink className="hover:text-white transition-colors" href="../privacy-policy">Privacy Policy</NavLink></li>
-                <li><NavLink className="hover:text-white transition-colors" href="https://status.ctfguide.com/">Status</NavLink></li>
-                <li><NavLink className="hover:text-white transition-colors" href="../careers">Careers</NavLink></li>
-              </ul>
-            </div>
-
-            <div>
-              <h3 className="font-bold text-white text-sm mb-4 uppercase tracking-wider">Articles</h3>
-              <ul className="space-y-3 list-none pl-0">
-                <li><NavLink className="hover:text-white transition-colors" href="/blog/best-ctf-learning-platform">The best place to learn CTF</NavLink></li>
-                <li><NavLink className="hover:text-white transition-colors" href="/blog/ctflearn-alternative">Best Alternative to CTFLearn</NavLink></li>
-                <li><NavLink className="hover:text-white transition-colors" href="/blog/picoctf-vs-ctfguide">CTFGuide vs CTFLearn</NavLink></li>
-                <li><NavLink className="hover:text-white transition-colors" href="/blog/overthewire-alternative">Best Alternative to OverTheWire</NavLink></li>
-              </ul>
-            </div>
-
-            <div>
-              <h3 className="font-bold text-white text-sm mb-4 uppercase tracking-wider">Resources</h3>
-              <ul className="space-y-3 list-none pl-0">
-                <li><NavLink className="hover:text-white transition-colors" href="/getting-started">Getting Started Guide</NavLink></li>
-                <li><NavLink className="hover:text-white transition-colors" href="/tutorials">CTF Tutorials</NavLink></li>
-                <li><NavLink className="hover:text-white transition-colors" href="/challenges">Practice Challenges</NavLink></li>
-                <li><NavLink className="hover:text-white transition-colors" href="/community">Community</NavLink></li>
-              </ul>
-            </div>
-
-            <div>
-              <h3 className="font-bold text-white text-sm mb-4 uppercase tracking-wider">Compare</h3>
-              <ul className="space-y-3 list-none pl-0">
-                <li><NavLink className="hover:text-white transition-colors" href="/vs/hackthebox">CTFGuide vs HackTheBox</NavLink></li>
-                <li><NavLink className="hover:text-white transition-colors" href="/vs/tryhackme">CTFGuide vs TryHackMe</NavLink></li>
-                <li><NavLink className="hover:text-white transition-colors" href="/vs/vulnhub">CTFGuide vs VulnHub</NavLink></li>
-                <li><NavLink className="hover:text-white transition-colors" href="/vs/rootme">CTFGuide vs Root Me</NavLink></li>
-              </ul>
-            </div>
-          </nav>
-        </div>
-        <div className="mx-auto flex max-w-4xl flex-col items-center border-t border-neutral-700 py-10 sm:flex-row-reverse sm:justify-between">
-          <div className="flex gap-x-8">
-            <Link
-              href="https://discord.gg/q3hgRBvgkX"
-              className="group"
-              aria-label="ctfguideapp on Discord"
-            >
-              <svg
-                aria-hidden="true"
-                className="h-6 w-6 fill-white group-hover:fill-[#5865F2]"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 640 512"
-              >
-                <path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"/>
-              </svg>
-            </Link>
-            <Link
-              href="https://www.linkedin.com/company/ctfguide"
-              className="group"
-              aria-label="ctfguideapp on Linkedin"
-            >
-              <svg 
-                aria-hidden="true"
-                className="h-6 w-6 fill-white group-hover:fill-[#3b82f6]"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 448 512"
-              >
-                <path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/>
-              </svg>
-            </Link>
-         
-            <Link
-              href="https://github.com/ctfguide-tech"
-              className="group"
-              aria-label="ctfguide-tech on GitHub"
-            >
-              <svg
-                aria-hidden="true"
-                className="h-6 w-6 fill-white group-hover:fill-black"
-              >
-                <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2Z" />
-              </svg>
-            </Link>
-
-            <Link
-            href ="https://x.com/ctfguideapp"
-            aria-label = "ctfguideapp on X"
-            >
-            <svg className="h-6 w-6 fill-white hover:fill-black" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="100" ><path fill="white" d="M 5.9199219 6 L 20.582031 27.375 L 6.2304688 44 L 9.4101562 44 L 21.986328 29.421875 L 31.986328 44 L 44 44 L 28.681641 21.669922 L 42.199219 6 L 39.029297 6 L 27.275391 19.617188 L 17.933594 6 L 5.9199219 6 z M 9.7167969 8 L 16.880859 8 L 40.203125 42 L 33.039062 42 L 9.7167969 8 z"/>
-            
-            </svg>
+  return (isHome ? <footer style={{ backgroundColor: '#161716' }} className='max-w-7xl mx-auto'>
+    <Container>
+      <div className="py-20">
+        <img 
+          src={`${baseUrl}/darkLogo.png`} 
+          className="mx-auto w-16 h-16 text-center mb-8" 
+          alt="CTFGuide Logo" 
+        />
+        <nav className="mt-10 grid grid-cols-2 md:grid-cols-4 gap-x-12 gap-y-10 text-sm text-slate-300" aria-label="footer navigation">
+          <div>
+            <h3 className="font-bold text-white text-sm mb-4 uppercase tracking-wider">Platform</h3>
+            <ul className="space-y-3 list-none pl-0">
+              <li><NavLink className="hover:text-white transition-colors" href="../terms-of-service">Terms of Service</NavLink></li>
+              <li><NavLink className="hover:text-white transition-colors" href="../privacy-policy">Privacy Policy</NavLink></li>
+              <li><NavLink className="hover:text-white transition-colors" href="https://status.ctfguide.com/">Status</NavLink></li>
+              <li><NavLink className="hover:text-white transition-colors" href="../careers">Careers</NavLink></li>
+            </ul>
+          </div>
 
-            
-            </Link>
+          <div>
+            <h3 className="font-bold text-white text-sm mb-4 uppercase tracking-wider">Articles</h3>
+            <ul className="space-y-3 list-none pl-0">
+              <li><NavLink className="hover:text-white transition-colors" href="/blog/best-ctf-learning-platform">The best place to learn CTF</NavLink></li>
+              <li><NavLink className="hover:text-white transition-colors" href="/blog/ctflearn-alternative">Best Alternative to CTFLearn</NavLink></li>
+              <li><NavLink className="hover:text-white transition-colors" href="/blog/picoctf-vs-ctfguide">CTFGuide vs CTFLearn</NavLink></li>
+              <li><NavLink className="hover:text-white transition-colors" href="/blog/overthewire-alternative">Best Alternative to OverTheWire</NavLink></li>
+            </ul>
           </div>
-          <p className="mt-6 text-sm text-slate-400 sm:mt-0">
-            Copyright &copy; {new Date().getFullYear()} CTFGuide Corporation. All rights
-            reserved.
-          </p>
-        </div>
-      </Container>
-    </footer>
-    :
-    <>
-    <footer style={{ backgroundColor: '#161716' }}>
-    <Container>
-      <div className="py-16">
-        <img src= {`${baseUrl}/darkLogo.png`} className="mx-auto w-14 text-center" />
-        <nav className="mt-4 text-sm" aria-label="quick links">
-          <div className="-my-1 flex place-content-center gap-x-6">
-            <NavLink href="../terms-of-service">Terms of Service</NavLink>
-            <NavLink href="../privacy-policy">Privacy Policy</NavLink>
-            <NavLink href="https://status.ctfguide.com/">Status</NavLink>
-            <NavLink href="../careers">Careers</NavLink>
-    
+
+          <div>
+            <h3 className="font-bold text-white text-sm mb-4 uppercase tracking-wider">Resources</h3>
+            <ul className="space-y-3 list-none pl-0">
+              <li><NavLink className="hover:text-white transition-colors" href="/getting-started">Getting Started Guide</NavLink></li>
+              <li><NavLink className="hover:text-white transition-colors" href="/tutorials">CTF Tutorials</NavLink></li>
+              <li><NavLink className="hover:text-white transition-colors" href="/challenges">Practice Challenges</NavLink></li>
+              <li><NavLink className="hover:text-white transition-colors" href="/community">Community</NavLink></li>
+            </ul>
           </div>
 
-        
+          <div>
+            <h3 className="font-bold text-white text-sm mb-4 uppercase tracking-wider">Compare</h3>
+            <ul className="space-y-3 list-none pl-0">
+              <li><NavLink className="hover:text-white transition-colors" href="/vs/hackthebox">CTFGuide vs HackTheBox</NavLink></li>
+              <li><NavLink className="hover:text-white transition-colors" href="/vs/tryhackme">CTFGuide vs TryHackMe</NavLink></li>
+              <li><NavLink className="hover:text-white transition-colors" href="/vs/vulnhub">CTFGuide vs VulnHub</NavLink></li>
+              <li><NavLink className="hover:text-white transition-colors" href="/vs/rootme">CTFGuide vs Root Me</NavLink></li>
+            </ul>
+          </div>
         </nav>
       </div>
-      <div className="mx-auto flex max-w-4xl flex-col items-center border-t border-slate-400/10 py-10 sm:flex-row-reverse sm:justify-between">
-        <div className="flex gap-x-6">
+      <div className="mx-auto flex max-w-4xl flex-col items-center border-t border-neutral-700 py-10 sm:flex-row-reverse sm:justify-between">
+        <div className="flex gap-x-8">
           <Link
             href="https://discord.gg/q3hgRBvgkX"
             className="group"
             aria-label="ctfguideapp on Discord"
-          >
+            legacyBehavior>
             <svg
               aria-hidden="true"
               className="h-6 w-6 fill-white group-hover:fill-[#5865F2]"
@@ -157,7 +75,7 @@ export function Footer({isHome}) {
             href="https://www.linkedin.com/company/ctfguide"
             className="group"
             aria-label="ctfguideapp on Linkedin"
-          >
+            legacyBehavior>
             <svg 
               aria-hidden="true"
               className="h-6 w-6 fill-white group-hover:fill-[#3b82f6]"
@@ -172,7 +90,7 @@ export function Footer({isHome}) {
             href="https://github.com/ctfguide-tech"
             className="group"
             aria-label="ctfguide-tech on GitHub"
-          >
+            legacyBehavior>
             <svg
               aria-hidden="true"
               className="h-6 w-6 fill-white group-hover:fill-black"
@@ -182,9 +100,9 @@ export function Footer({isHome}) {
           </Link>
 
           <Link
-          href ="https://x.com/ctfguideapp"
-          aria-label = "ctfguideapp on X"
-          >
+            href ="https://x.com/ctfguideapp"
+            aria-label = "ctfguideapp on X"
+            legacyBehavior>
           <svg className="h-6 w-6 fill-white hover:fill-black" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="100" ><path fill="white" d="M 5.9199219 6 L 20.582031 27.375 L 6.2304688 44 L 9.4101562 44 L 21.986328 29.421875 L 31.986328 44 L 44 44 L 28.681641 21.669922 L 42.199219 6 L 39.029297 6 L 27.275391 19.617188 L 17.933594 6 L 5.9199219 6 z M 9.7167969 8 L 16.880859 8 L 40.203125 42 L 33.039062 42 L 9.7167969 8 z"/>
           
           </svg>
@@ -192,17 +110,94 @@ export function Footer({isHome}) {
           
           </Link>
         </div>
-        <p className="mt-6 text-sm text-white sm:mt-0">
+        <p className="mt-6 text-sm text-slate-400 sm:mt-0">
           Copyright &copy; {new Date().getFullYear()} CTFGuide Corporation. All rights
-          reserved. <br></br>
-          <span className="text-xs text-white">
-          Supported by <a href="https://psuwebdev.org/" className="text-blue-400 hover:text-blue-300">PSU Web Development Club</a>, <a href="https://bullmontcapital.com/" className="text-white hover:text-gray-300">Bullmont Capital</a>, and <a href="https://www.psu.edu/" className="text-white hover:text-gray-300">Penn State University</a>.
-
-          </span>
+          reserved.
         </p>
       </div>
     </Container>
-  </footer>
-  </>
-  )
+  </footer> : <>
+  <footer style={{ backgroundColor: '#161716' }}>
+  <Container>
+    <div className="py-16">
+      <img src= {`${baseUrl}/darkLogo.png`} className="mx-auto w-14 text-center" />
+      <nav className="mt-4 text-sm" aria-label="quick links">
+        <div className="-my-1 flex place-content-center gap-x-6">
+          <NavLink href="../terms-of-service">Terms of Service</NavLink>
+          <NavLink href="../privacy-policy">Privacy Policy</NavLink>
+          <NavLink href="https://status.ctfguide.com/">Status</NavLink>
+          <NavLink href="../careers">Careers</NavLink>
+  
+        </div>
+
+      
+      </nav>
+    </div>
+    <div className="mx-auto flex max-w-4xl flex-col items-center border-t border-slate-400/10 py-10 sm:flex-row-reverse sm:justify-between">
+      <div className="flex gap-x-6">
+        <Link
+          href="https://discord.gg/q3hgRBvgkX"
+          className="group"
+          aria-label="ctfguideapp on Discord"
+          legacyBehavior>
+          <svg
+            aria-hidden="true"
+            className="h-6 w-6 fill-white group-hover:fill-[#5865F2]"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 640 512"
+          >
+            <path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"/>
+          </svg>
+        </Link>
+        <Link
+          href="https://www.linkedin.com/company/ctfguide"
+          className="group"
+          aria-label="ctfguideapp on Linkedin"
+          legacyBehavior>
+          <svg 
+            aria-hidden="true"
+            className="h-6 w-6 fill-white group-hover:fill-[#3b82f6]"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 448 512"
+          >
+            <path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/>
+          </svg>
+        </Link>
+     
+        <Link
+          href="https://github.com/ctfguide-tech"
+          className="group"
+          aria-label="ctfguide-tech on GitHub"
+          legacyBehavior>
+          <svg
+            aria-hidden="true"
+            className="h-6 w-6 fill-white group-hover:fill-black"
+          >
+            <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2Z" />
+          </svg>
+        </Link>
+
+        <Link
+          href ="https://x.com/ctfguideapp"
+          aria-label = "ctfguideapp on X"
+          legacyBehavior>
+        <svg className="h-6 w-6 fill-white hover:fill-black" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="100" ><path fill="white" d="M 5.9199219 6 L 20.582031 27.375 L 6.2304688 44 L 9.4101562 44 L 21.986328 29.421875 L 31.986328 44 L 44 44 L 28.681641 21.669922 L 42.199219 6 L 39.029297 6 L 27.275391 19.617188 L 17.933594 6 L 5.9199219 6 z M 9.7167969 8 L 16.880859 8 L 40.203125 42 L 33.039062 42 L 9.7167969 8 z"/>
+        
+        </svg>
+
+        
+        </Link>
+      </div>
+      <p className="mt-6 text-sm text-white sm:mt-0">
+        Copyright &copy; {new Date().getFullYear()} CTFGuide Corporation. All rights
+        reserved. <br></br>
+        <span className="text-xs text-white">
+        Supported by <a href="https://psuwebdev.org/" className="text-blue-400 hover:text-blue-300">PSU Web Development Club</a>, <a href="https://bullmontcapital.com/" className="text-white hover:text-gray-300">Bullmont Capital</a>, and <a href="https://www.psu.edu/" className="text-white hover:text-gray-300">Penn State University</a>.
+
+        </span>
+      </p>
+    </div>
+  </Container>
+</footer>
+</>);
 }
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 9dff82e9..92f914be 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -91,7 +91,7 @@ export function Header() {
       <Container>
         <nav className="relative z-50 flex justify-between">
           <div className="flex items-center md:gap-x-12">
-            <Link href="../" aria-label="Home">
+            <Link href="../" aria-label="Home" legacyBehavior>
               <Logo className="h-10 w-auto" /> 
             </Link>
             
diff --git a/src/components/StandardNav.jsx b/src/components/StandardNav.jsx
index cb145313..747fb85e 100644
--- a/src/components/StandardNav.jsx
+++ b/src/components/StandardNav.jsx
@@ -288,7 +288,6 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
           <br></br>
         </div>
       )}
-
       <Disclosure as="nav" className=" border-b border-neutral-800 shadow">
         {({ open }) => (
           <>
@@ -313,21 +312,22 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                     </Disclosure.Button>
                   </div>
                   <div className="flex flex-shrink-0 items-center">
-                    <Link href="/dashboard" aria-label="Dashboard">
+                    <Link href="/dashboard" aria-label="Dashboard" legacyBehavior>
                       <Logo />
                     </Link>
                   </div>
                   <div className=" vertical-align md:ml-6 md:flex  ">
                   <Link
-                      href="/learn/modules"
-                      className={
-                        linkClass('/learn/modules') + ' hidden lg:inline-flex'
-                      }
-                    >
+                    href="/learn/modules"
+                    className={
+                      linkClass('/learn/modules') + ' hidden lg:inline-flex'
+                    }
+                  >
+                    <div className="flex items-center">
                       Learn
-
                       <span className="bg-blue-600 text-xs  ml-2 text-white px-2 rounded-full">New!</span>
-                    </Link>
+                    </div>
+                  </Link>
                     <Link
                       href="/practice"
                       className={
@@ -389,7 +389,7 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                                   <Link
                                     href="/create"
                                     className="flex items-center space-x-3 rounded-lg px-4 py-3 text-base text-gray-300 transition-all hover:bg-neutral-800 hover:text-white"
-                                  >
+                                    legacyBehavior>
                                     <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-neutral-800 text-white">
                                       <PencilSquareIcon className="h-5 w-5" />
                                     </div>
@@ -402,7 +402,7 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                                   <Link
                                     href="/groups"
                                     className="mt-2 flex items-center space-x-3 rounded-lg px-4 py-3 text-base text-gray-300 transition-all hover:bg-neutral-800 hover:text-white"
-                                  >
+                                    legacyBehavior>
                                     <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-neutral-800 text-white">
                                       <UserGroupIcon className="h-5 w-5" />
                                     </div>
@@ -587,7 +587,7 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                                 className={classNames(
                                   'flex w-full px-4 py-3  text-neutral-50 hover:bg-neutral-700'
                                 )}
-                              >
+                                legacyBehavior>
                                 <UserCircleIcon
                                   className="mr-4 block h-6 w-6"
                                   aria-hidden="true"
@@ -601,7 +601,7 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                                 className={classNames(
                                   'flex w-full px-4 py-3  text-neutral-50 hover:bg-neutral-700'
                                 )}
-                              >
+                                legacyBehavior>
                                 <Cog6ToothIcon
                                   className="mr-4 block h-6 w-6"
                                   aria-hidden="true"
@@ -626,7 +626,7 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                               className={classNames(
                                 'hidden flex w-full px-4 py-3  text-neutral-50 hover:bg-neutral-700'
                               )}
-                            >
+                              legacyBehavior>
                               <ShieldExclamationIcon
                                 className="mr-4 block h-6 w-6"
                                 aria-hidden="true"
@@ -639,7 +639,7 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                               className={classNames(
                                 ' flex w-full px-4 py-3  text-neutral-50 hover:bg-neutral-700'
                               )}
-                            >
+                              legacyBehavior>
                               <ShieldExclamationIcon
                                 className="mr-4 block h-6 w-6"
                                 aria-hidden="true"
@@ -653,7 +653,7 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                                 className={classNames(
                                   'flex w-full px-4 py-3  text-neutral-50 hover:bg-neutral-700'
                                 )}
-                              >
+                                legacyBehavior>
                                 <ShieldCheckIcon
                                   className="mr-4 block h-6 w-6"
                                   aria-hidden="true"
@@ -781,20 +781,16 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
           </>
         )}
       </Disclosure>
-
       <SearchModal
         showSearchModal={showSearchModal}
         setShowSearchModal={setShowSearchModal}
       />
       <Upgrade open={upgradeModalOpen} setOpen={setUpgradeModalOpen} />
-
-        <div className="mx-auto  hidden w-full bg-yellow-800 py-1 text-center  text-sm text-white ">
-          <h1 className="mx-auto  px-4 text-left">
-              Our server hosting provider is experiencing issues which may result in CTFGuide not working as expected. Join our <a className="font-bold" href="https://discord.gg/BwbCYHVX">Discord</a> for updates.
-          </h1>
-        </div>
-     
-
+      <div className="mx-auto  hidden w-full bg-yellow-800 py-1 text-center  text-sm text-white ">
+        <h1 className="mx-auto  px-4 text-left">
+            Our server hosting provider is experiencing issues which may result in CTFGuide not working as expected. Join our <a className="font-bold" href="https://discord.gg/BwbCYHVX">Discord</a> for updates.
+        </h1>
+      </div>
       <SpawnTerminal open={terminaIsOpen} setOpen={setTerminalIsOpen} />
       <NotificationsModal
         open={showAllNotifications}
diff --git a/src/components/challenge/ChallengeComponent.jsx b/src/components/challenge/ChallengeComponent.jsx
index ff72c85a..fd0fc306 100644
--- a/src/components/challenge/ChallengeComponent.jsx
+++ b/src/components/challenge/ChallengeComponent.jsx
@@ -37,7 +37,7 @@ const Challenge = ({ data, inCarousel }) => {
         classStyle +
         'duration-4000 min-h-[190px] min-w-[200px] transition ease-in-out hover:bg-neutral-800/40'
       }
-    >
+      legacyBehavior>
       <div className="relative h-full">
         <div className="flex">
           <span
diff --git a/src/components/dashboard/DashboardHeader.jsx b/src/components/dashboard/DashboardHeader.jsx
index e8cdfb46..10f94bc4 100644
--- a/src/components/dashboard/DashboardHeader.jsx
+++ b/src/components/dashboard/DashboardHeader.jsx
@@ -97,7 +97,7 @@ export function DashboardHeader() {
       <div className="mx-auto max-w-7xl">
         <div className="-mt-12  sm:-mt-16 sm:flex sm:items-end sm:space-x-5">
           <div className="flex justify-center sm:justify-start">
-            <Link href={`${baseUrl}/users/${username}`}>
+            <Link href={`${baseUrl}/users/${username}`} legacyBehavior>
               {(pfp && (
                 <img
                   className="h-32 w-32    rounded-full hover:bg-[#212121] sm:h-32 sm:w-32"
diff --git a/src/components/dashboard/FriendCard.jsx b/src/components/dashboard/FriendCard.jsx
index 0513672a..7df99497 100644
--- a/src/components/dashboard/FriendCard.jsx
+++ b/src/components/dashboard/FriendCard.jsx
@@ -7,27 +7,26 @@ export function FriendCard({ username, bio, badges, followers, following }) {
   };
 
   return (
-
-      <div
-        className="py-4 mt-5 text-white text-center border border-neutral-500"
-      >
-        <Link href={`/users/${username}`}>
-          <img
-            style={{ borderColor: '#212121' }}
-            className="mx-auto h-22 w-22 rounded-full border bg-neutral-900 hover:bg-[#212121]"
-            src={`https://robohash.org/${username}.png?set=set1&size=150x150`}
-            alt=""
-          />
-        </Link>
-        <h1 className="mt-4 text-xl font-bold text-blue-500">{username}</h1>
-        <h2>Followers: {followers}</h2>
-        <h2>Following: {following}</h2>
-        {bio &&
-          <hr className='mt-4 border-gray-500 w-4/5 mx-auto'></hr>
-        }
-        <p className="mt-4 text-lg px-2 leading-relaxed text-gray-300">
-        
-        </p>
-      </div>
+    <div
+      className="py-4 mt-5 text-white text-center border border-neutral-500"
+    >
+      <Link href={`/users/${username}`} legacyBehavior>
+        <img
+          style={{ borderColor: '#212121' }}
+          className="mx-auto h-22 w-22 rounded-full border bg-neutral-900 hover:bg-[#212121]"
+          src={`https://robohash.org/${username}.png?set=set1&size=150x150`}
+          alt=""
+        />
+      </Link>
+      <h1 className="mt-4 text-xl font-bold text-blue-500">{username}</h1>
+      <h2>Followers: {followers}</h2>
+      <h2>Following: {following}</h2>
+      {bio &&
+        <hr className='mt-4 border-gray-500 w-4/5 mx-auto'></hr>
+      }
+      <p className="mt-4 text-lg px-2 leading-relaxed text-gray-300">
+      
+      </p>
+    </div>
   );
 };
\ No newline at end of file
diff --git a/src/components/dashboard/FriendRequestCard.jsx b/src/components/dashboard/FriendRequestCard.jsx
index 27b3796c..eae750f1 100644
--- a/src/components/dashboard/FriendRequestCard.jsx
+++ b/src/components/dashboard/FriendRequestCard.jsx
@@ -4,7 +4,7 @@ export function FriendRequestCard({ username, followers, following, onAccept, on
     return (
         <div className='mx-auto mt-6 border border-neutral-500 w-5/6'>
             <div className="py-8 text-neutral-500 text-center flex items-center w-full text-white">
-                <Link href={`/users/${username}`}>
+                <Link href={`/users/${username}`} legacyBehavior>
                     <img
                         style={{ borderColor: '#212121', height: "100px", width: "100px" }}
                         className="mx-5 h-15 w-15 rounded-full border bg-black hover:bg-[#212121]"
diff --git a/src/components/dashboard/Suggest.jsx b/src/components/dashboard/Suggest.jsx
index 7ce080ec..8d21fecd 100644
--- a/src/components/dashboard/Suggest.jsx
+++ b/src/components/dashboard/Suggest.jsx
@@ -9,10 +9,9 @@ export function Suggest() {
         {' '}
         RECOMMENDATIONS
       </h1>
-
       <div className="mb-5 grid grid-cols-2 gap-x-4">
         <div className="">
-          <Link href='/challenges/cypher_decoding'>
+          <Link href='/challenges/cypher_decoding' legacyBehavior>
             <div className="  relative isolate overflow-hidden  rounded-md bg-black/10 bg-neutral-900 pb-4   ">
               <div className="relative mx-auto max-w-7xl  px-5">
                 <div className="mx-auto lg:mx-0 lg:max-w-3xl">
diff --git a/src/components/groups/studentView.jsx b/src/components/groups/studentView.jsx
index 9dff60ef..34dc2958 100644
--- a/src/components/groups/studentView.jsx
+++ b/src/components/groups/studentView.jsx
@@ -42,7 +42,6 @@ export default function StudentView({ group }) {
       </Head>
       <StandardNav />
       <StudentNav classCode={classroom.classCode} />
-      
       <div className="min-h-screen bg-neutral-900/30 pb-12">
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-8">
           {/* Header Section */}
@@ -90,7 +89,7 @@ export default function StudentView({ group }) {
                   <Link
                     href={`/groups/${classroom.classCode}/view-all-assignments`}
                     className="text-sm text-blue-400 hover:text-blue-300 transition-colors flex items-center"
-                  >
+                    legacyBehavior>
                     View All <i className="fas fa-arrow-right ml-2"></i>
                   </Link>
                 </div>
@@ -165,7 +164,6 @@ export default function StudentView({ group }) {
           </div>
         </div>
       </div>
-
       <ToastContainer
         position="bottom-right"
         autoClose={5000}
diff --git a/src/components/home/Hero.jsx b/src/components/home/Hero.jsx
index 511b1c42..6256ec8d 100644
--- a/src/components/home/Hero.jsx
+++ b/src/components/home/Hero.jsx
@@ -46,7 +46,7 @@ export function Hero() {
 
           <nav className="flex items-center justify-between p-6 lg:px-8" aria-label="Global">
             <div className="flex lg:flex-1">
-            <Link href="../" aria-label="Home">
+            <Link href="../" aria-label="Home" legacyBehavior>
               <Logo className="h-10 w-auto" />
             </Link>
             
@@ -70,7 +70,10 @@ export function Hero() {
                       <Popover.Panel className="absolute left-1/2 z-10 mt-3 w-screen max-w-md -translate-x-1/2 transform px-2 sm:px-0">
                         <div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
                           <div className="relative grid gap-6 bg-neutral-900 bg-blend-overlay px-5 py-6 sm:gap-8 sm:p-8">
-                            <Link href="/education" className="block p-3 -m-3 transition duration-150 ease-in-out rounded-md hover:bg-neutral-800">
+                            <Link
+                              href="/education"
+                              className="block p-3 -m-3 transition duration-150 ease-in-out rounded-md hover:bg-neutral-800"
+                              legacyBehavior>
                               <div className="flex items-start">
                                 <AcademicCapIcon className="h-8 w-8 text-blue-500 mr-3 mt-1" />
                                 <div>
@@ -135,7 +138,7 @@ export function Hero() {
             <div className="fixed inset-0 z-50" />
             <Dialog.Panel className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-gray-900 px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-white/10">
               <div className="flex items-center justify-between">
-              <Link href="../" aria-label="Home">
+              <Link href="../" aria-label="Home" legacyBehavior>
               <Logo className="h-10 w-auto" />
             </Link>
                 <button
@@ -173,7 +176,6 @@ export function Hero() {
             </Dialog.Panel>
           </Dialog>
         </header>
-  
         <div className="relative isolate pt-14">
           <div
             className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
@@ -279,5 +281,5 @@ export function Hero() {
           </div>
         </div>
       </div>
-  );
+    );
 }
diff --git a/src/components/practice/community.jsx b/src/components/practice/community.jsx
index c26a9186..90fe2da3 100644
--- a/src/components/practice/community.jsx
+++ b/src/components/practice/community.jsx
@@ -375,12 +375,10 @@ export function Community({ challenges }) {
             </>
           ) : (
             // kinda hacky but it works
-            challenges.length != 0 && (
-              <div className="bg-neutral-800/50 p-4 py-10 rounded-md w-full col-span-4 text-center">
-                <FontAwesomeIcon icon={faFolderOpen} className="w-10 h-10 mx-auto mb-4 text-neutral-400" />
-                <p className="text-white">No challenges found with the current filters. Try changing the filters or search for a different challenge.</p>
-              </div>
-            )
+            (challenges.length != 0 && (<div className="bg-neutral-800/50 p-4 py-10 rounded-md w-full col-span-4 text-center">
+              <FontAwesomeIcon icon={faFolderOpen} className="w-10 h-10 mx-auto mb-4 text-neutral-400" />
+              <p className="text-white">No challenges found with the current filters. Try changing the filters or search for a different challenge.</p>
+            </div>))
           )}
         </div>
       </div>
diff --git a/src/components/profile/ChallengeCard.jsx b/src/components/profile/ChallengeCard.jsx
index 33595412..004ff8f6 100644
--- a/src/components/profile/ChallengeCard.jsx
+++ b/src/components/profile/ChallengeCard.jsx
@@ -60,57 +60,57 @@ const ChallengeCard = (_props) => {
     'INSANE': 'border-purple-500',
   };
 
-  return (
-    challenge && (
-      <Link {...props} className={`group w-full border-l-4 ${colorBorder[challenge.difficulty]} ${
+  return (challenge && (
+    <Link
+      {...props}
+      className={`group w-full border-l-4 ${colorBorder[challenge.difficulty]} ${
         challenge.solved ? 'bg-green-900/50' : 'bg-[#212121]'
-      } px-5 py-6 transition-all duration-300 hover:bg-[#2c2c2c] ${props.className ?? ''}`} href={`${baseUrl}/challenges/${challenge.id}`} >
-        <div className="flex justify-between">
-          <h1 className="truncate text-2xl  text-white w-2/3">{challenge.title}</h1>
+      } px-5 py-6 transition-all duration-300 hover:bg-[#2c2c2c] ${props.className ?? ''}`}
+      href={`${baseUrl}/challenges/${challenge.id}`}
+      legacyBehavior>
+      <div className="flex justify-between">
+        <h1 className="truncate text-2xl  text-white w-2/3">{challenge.title}</h1>
 
-          <div className="flex items-center text-gray-400 ">
-       
-            <span className='text-green-300'><i className="fas fa-arrow-up text-green-300"></i> {challenge.upvotes !== undefined ? challenge.upvotes : <Skeleton width={20} />}</span>
-            <span className='ml-2 text-red-300'><i className="fas fa-arrow-down text-red-200"></i>  {challenge.downvotes !== undefined ? challenge.downvotes : <Skeleton width={20} />}</span>
-          </div>
-        </div>
-        <div className="mt-2 flex items-center text-gray-400">
-          <img
-            className="h-5 w-5 mr-2 rounded-full"
-            src={creatorPfp || 'default-profile-image-url'}
-            alt="Profile Picture"
-          />
-          <span>@{challenge.creator}</span>
-          {creator && creator.role === 'ADMIN' && (
-            <span className="text-red-500 text-xs ml-1"><i className="fas fa-code fa-fw"></i></span>
-          )}
-          {creator && creator.role === 'PRO' && (
-            <span className="text-yellow-500 text-xs ml-1"><i className="fas fa-crown fa-fw"></i></span>
-       
-       )}
+        <div className="flex items-center text-gray-400 ">
+     
+          <span className='text-green-300'><i className="fas fa-arrow-up text-green-300"></i> {challenge.upvotes !== undefined ? challenge.upvotes : <Skeleton width={20} />}</span>
+          <span className='ml-2 text-red-300'><i className="fas fa-arrow-down text-red-200"></i>  {challenge.downvotes !== undefined ? challenge.downvotes : <Skeleton width={20} />}</span>
         </div>
+      </div>
+      <div className="mt-2 flex items-center text-gray-400">
+        <img
+          className="h-5 w-5 mr-2 rounded-full"
+          src={creatorPfp || 'default-profile-image-url'}
+          alt="Profile Picture"
+        />
+        <span>@{challenge.creator}</span>
+        {creator && creator.role === 'ADMIN' && (
+          <span className="text-red-500 text-xs ml-1"><i className="fas fa-code fa-fw"></i></span>
+        )}
+        {creator && creator.role === 'PRO' && (
+          <span className="text-yellow-500 text-xs ml-1"><i className="fas fa-crown fa-fw"></i></span>
+     
+     )}
+      </div>
 
-        <div className="mt-4 flex items-center">
-          <PuzzlePieceIcon className="h-5 w-5 mr-2 text-white" />
-          <span className="text-white">{challenge.category}</span>
-          <span className={`ml-4 px-2  rounded-sm text-sm font-bold capitalize ${colorText[challenge.difficulty || 0]}`}>{challenge.difficulty?.toLowerCase() || <Skeleton />}</span>
+      <div className="mt-4 flex items-center">
+        <PuzzlePieceIcon className="h-5 w-5 mr-2 text-white" />
+        <span className="text-white">{challenge.category}</span>
+        <span className={`ml-4 px-2  rounded-sm text-sm font-bold capitalize ${colorText[challenge.difficulty || 0]}`}>{challenge.difficulty?.toLowerCase() || <Skeleton />}</span>
 
-        <div className=" ml-auto flex text-gray-400">
-          <EyeIcon className="h-5 w-5 mr-2" />
-          <span>{challenge.views !== undefined ? challenge.views : <Skeleton width={20} />}</span>
-     
-        </div>
-        </div>
-      </Link>
-    ) || (
-      <div {...props} className={`bg-neutral-800 w-full rounded-sm pl-8 pr-6 py-4 leading-8 ${props.className ?? ''}`}>
-        <Skeleton baseColor='#262626' highlightColor='#3a3a3a' width='10rem' />
-        <Skeleton baseColor='#262626' highlightColor='#3a3a3a' width='12rem' />
-        <Skeleton baseColor='#262626' highlightColor='#3a3a3a' width='4rem' />
-        <Skeleton baseColor='#262626' highlightColor='#3a3a3a' />
+      <div className=" ml-auto flex text-gray-400">
+        <EyeIcon className="h-5 w-5 mr-2" />
+        <span>{challenge.views !== undefined ? challenge.views : <Skeleton width={20} />}</span>
+   
+      </div>
       </div>
-    )
-  );
+    </Link>
+  ) || (<div {...props} className={`bg-neutral-800 w-full rounded-sm pl-8 pr-6 py-4 leading-8 ${props.className ?? ''}`}>
+    <Skeleton baseColor='#262626' highlightColor='#3a3a3a' width='10rem' />
+    <Skeleton baseColor='#262626' highlightColor='#3a3a3a' width='12rem' />
+    <Skeleton baseColor='#262626' highlightColor='#3a3a3a' width='4rem' />
+    <Skeleton baseColor='#262626' highlightColor='#3a3a3a' />
+  </div>));
 };
 
 export default ChallengeCard;
\ No newline at end of file
diff --git a/src/components/settingComponents/sidebar.jsx b/src/components/settingComponents/sidebar.jsx
index 476923e7..788e2626 100644
--- a/src/components/settingComponents/sidebar.jsx
+++ b/src/components/settingComponents/sidebar.jsx
@@ -10,31 +10,43 @@ export default function Sidebar() {
     >
       <ul className="mr-2 py-2">
         <li className="py-1">
-          <Link href="../settings" passHref>
-            <a className="px-2 py-1 text-lg font-medium text-white hover:text-gray-400 sm:text-base">
+          <Link
+            href="../settings"
+            passHref
+            className="px-2 py-1 text-lg font-medium text-white hover:text-gray-400 sm:text-base">
+            
               General
-            </a>
+            
           </Link>
         </li>
         <li className="py-1">
-          <Link href="../settings/security" passHref>
-            <a className="px-2 py-1 text-lg font-medium text-white hover:text-gray-400 sm:text-base">
+          <Link
+            href="../settings/security"
+            passHref
+            className="px-2 py-1 text-lg font-medium text-white hover:text-gray-400 sm:text-base">
+            
               Security
-            </a>
+            
           </Link>
         </li>
         <li className="py-1">
-          <Link href="../settings/preferences" passHref>
-            <a className="px-2 py-1 text-lg font-medium text-white hover:text-gray-400 sm:text-base">
+          <Link
+            href="../settings/preferences"
+            passHref
+            className="px-2 py-1 text-lg font-medium text-white hover:text-gray-400 sm:text-base">
+            
               Email Preferences
-            </a>
+            
           </Link>
         </li>
         <li className="py-1">
-          <Link href="../settings/billing" passHref>
-            <a className="px-2 py-1 text-lg font-medium text-white hover:text-gray-400 sm:text-base">
+          <Link
+            href="../settings/billing"
+            passHref
+            className="px-2 py-1 text-lg font-medium text-white hover:text-gray-400 sm:text-base">
+            
               Billing
-            </a>
+            
           </Link>
         </li>
       </ul>
diff --git a/src/components/social/FriendCard.jsx b/src/components/social/FriendCard.jsx
index dca599c9..b36d1482 100644
--- a/src/components/social/FriendCard.jsx
+++ b/src/components/social/FriendCard.jsx
@@ -77,7 +77,7 @@ const FriendCard = ({ data }, mutual) => {
   const followers = followedBy.length;
 
   return (
-    <Link href={`/users/${username}`} passHref>
+    <Link href={`/users/${username}`} passHref legacyBehavior>
       <div className="flex flex-1">
         <div className="group relative h-36 w-96 cursor-pointer overflow-hidden rounded-sm border border-gray-900 shadow-2xl hover:border-gray-500">
           <div
diff --git a/src/pages/challenges/[...id].jsx b/src/pages/challenges/[...id].jsx
index 6cd52aa1..bba1e4f1 100644
--- a/src/pages/challenges/[...id].jsx
+++ b/src/pages/challenges/[...id].jsx
@@ -789,11 +789,14 @@ function TabLink({ tabName, selected, url, className }) {
   }[tabName] || 'fas fa-file-alt text-blue-500'
 
   return (
-    <Link href={url} className={`flex justify-center items-center ${selectedStyle} hover:text-white transition-all duration-400 px-2 hover:bg-neutral-600 rounded-sm h-full ${className}`}>
+    <Link
+      href={url}
+      className={`flex justify-center items-center ${selectedStyle} hover:text-white transition-all duration-400 px-2 hover:bg-neutral-600 rounded-sm h-full ${className}`}
+      legacyBehavior>
       <i className={`${icon} w-6 mr-1 inline-flex`}></i>
       {tabName ?? 'This is a test button'}
     </Link>
-  )
+  );
 }
 
 const baseUrl = process.env.NEXT_PUBLIC_API_URL;
@@ -1006,7 +1009,10 @@ function DescriptionPage({ cache, fileIDName, fileIDLink }) {
           {challenge ? <>
             <div className="flex items-center">
               <img src={authorPfp} alt="Author's profile picture" className="bg-neutral-700 h-8 w-8 rounded-full" />
-              <Link href={`/users/${challenge.creator}`} className="text-blue-500 pr-3 hover:underline ml-2">{challenge.creator}</Link>
+              <Link
+                href={`/users/${challenge.creator}`}
+                className="text-blue-500 pr-3 hover:underline ml-2"
+                legacyBehavior>{challenge.creator}</Link>
             </div>
             <p className="flex text-neutral-200 opacity-70 items-center text-sm">
               <i className="fas fa-solid fa-eye mr-2 text-lg"></i>
@@ -1074,7 +1080,7 @@ function DescriptionPage({ cache, fileIDName, fileIDLink }) {
       </div >
       <div className="shrink-0 bg-neutral-800 h-10 w-full"></div>
     </>
-  )
+  );
 }
 
 
@@ -1429,13 +1435,11 @@ function LeaderboardPage({ cache, setCache }) {
 
 
       </div>
-
       <div className="grid grid-cols-3">
         <div className="">
 
         </div>
       </div>
-
       {leaderboard.length > 0 ? (
         <div className="px-1 overflow-y-auto max-h-[calc(100vh-40px)] relative">
           {leaderboard.slice(0, 10).map((entry, index) => {
@@ -1464,7 +1468,7 @@ function LeaderboardPage({ cache, setCache }) {
                     />
                     <span className="text-2xl font-bold">{index + 1}.</span>
                     <span className="ml-2 text-xl font-semibold text-white">
-                      <Link href={`/users/${entry.user.username}`}>
+                      <Link href={`/users/${entry.user.username}`} legacyBehavior>
                         {entry.user.username}
                       </Link>
                     </span>
@@ -1472,7 +1476,7 @@ function LeaderboardPage({ cache, setCache }) {
                   <div className="text-xl font-semibold">{entry.points} points</div>
                 </div>
               </div>
-            )
+            );
           })}
           {/* Add fade-out overlay that stays anchored */}
           <div className="sticky bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-neutral-800 to-transparent pointer-events-none"></div>
@@ -1491,7 +1495,7 @@ function LeaderboardPage({ cache, setCache }) {
       )}
       <div className="shrink-0 bg-neutral-800 h-10 w-full"></div>
     </>
-  )
+  );
 }
 
 function CommentsPage({ cache }) {
diff --git a/src/pages/create.jsx b/src/pages/create.jsx
index 41aae10b..db6e074a 100644
--- a/src/pages/create.jsx
+++ b/src/pages/create.jsx
@@ -495,25 +495,25 @@ export default function Create() {
               >
                 Home
               </Link>
-              <Link 
+              <Link
                 href="/create/earnings"
                 className={`text-sm font-medium border-b-2 h-full flex items-center transition-colors ${
                   false  // Replace with actual route check
                     ? 'border-blue-500 text-white' 
                     : 'border-transparent text-neutral-400 hover:text-white hover:border-[#333333]'
                 }`}
-              >
+                legacyBehavior>
                 <i className="fas fa-wallet mr-2"></i>
                 Earnings
               </Link>
-              <Link 
+              <Link
                 href="/create/settings"
                 className={`hidden text-sm font-medium border-b-2 h-full flex items-center transition-colors ${
                   false  // Replace with actual route check
                     ? 'border-blue-500 text-white' 
                     : 'border-transparent text-neutral-400 hover:text-white hover:border-[#333333]'
                 }`}
-              >
+                legacyBehavior>
                 <i className="fas fa-cog mr-2"></i>
                 Creator Settings
               </Link>
@@ -841,7 +841,6 @@ export default function Create() {
         </div>
       </main>
       <Footer />
-
       {/* Keep existing modals and notifications */}
       <Menu open={isCreating} setOpen={setIsCreating} solvedChallenges={solvedChallenges} />
       <Modal open={openModal} onClose={handleCloseModal}>
@@ -863,7 +862,6 @@ export default function Create() {
         </Box>
       </Modal>
       <ToastContainer position="bottom-right" theme="dark" />
-
       <Transition appear show={isEnableModalOpen} as={Fragment}>
         <Dialog as="div" className="relative z-50" onClose={() => setIsEnableModalOpen(false)}>
           <Transition.Child
@@ -921,7 +919,6 @@ export default function Create() {
           </div>
         </Dialog>
       </Transition>
-
       <Transition appear show={isDisableModalOpen} as={Fragment}>
         <Dialog as="div" className="relative z-50" onClose={() => setIsDisableModalOpen(false)}>
           <Transition.Child
@@ -979,7 +976,6 @@ export default function Create() {
           </div>
         </Dialog>
       </Transition>
-
       {/* Video Modal */}
       <Transition appear show={isVideoModalOpen} as={Fragment}>
         <Dialog 
diff --git a/src/pages/create/earnings.jsx b/src/pages/create/earnings.jsx
index 833ad5ae..8291c8c6 100644
--- a/src/pages/create/earnings.jsx
+++ b/src/pages/create/earnings.jsx
@@ -80,10 +80,10 @@ export default function Earnings() {
               >
                 Home
               </Link>
-              <Link 
+              <Link
                 href="/create/earnings"
                 className="text-sm font-medium border-b-2 h-full flex items-center transition-colors border-blue-500 text-white"
-              >
+                legacyBehavior>
                 <i className="fas fa-wallet mr-2"></i>
                 Earnings 
               </Link>
diff --git a/src/pages/create/settings.jsx b/src/pages/create/settings.jsx
index a8a37e78..90fbd2cb 100644
--- a/src/pages/create/settings.jsx
+++ b/src/pages/create/settings.jsx
@@ -65,17 +65,17 @@ export default function CreatorSettings() {
               >
                 Home
               </Link>
-              <Link 
+              <Link
                 href="/create/earnings"
                 className="text-sm font-medium border-b-2 h-full flex items-center transition-colors border-transparent text-neutral-400 hover:text-white hover:border-[#333333]"
-              >
+                legacyBehavior>
                 <i className="fas fa-wallet mr-2"></i>
                 Earnings
               </Link>
-              <Link 
+              <Link
                 href="/create/settings"
                 className="text-sm font-medium border-b-2 h-full flex items-center transition-colors border-blue-500 text-white"
-              >
+                legacyBehavior>
                 <i className="fas fa-cog mr-2"></i>
                 Creator Settings
               </Link>
diff --git a/src/pages/education.jsx b/src/pages/education.jsx
index 9fbe258f..79453f68 100644
--- a/src/pages/education.jsx
+++ b/src/pages/education.jsx
@@ -117,12 +117,11 @@ const Education = () => {
           url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
         </style>
       </Head>
-
       <header className="py-4 " style={{ fontFamily: 'Poppins, sans-serif' }}>
       <Container>
         <nav className="relative z-50 flex justify-between">
           <div className="flex items-center md:gap-x-12">
-            <Link href="../" aria-label="Home">
+            <Link href="../" aria-label="Home" legacyBehavior>
             <div className="mx-auto my-auto flex">
       <img className="mx-auto w-12 text-center spin-on-hover" src="../../../../darkLogo.png" />
       <h1
@@ -152,11 +151,9 @@ const Education = () => {
         </nav>
       </Container>
     </header>
-
-    <div className='bg-blue-600 text-white text-center p-2'>
-      <p>CTFGuide EDU is not the same as CTFGuide GP. If you're a solo learner, you can <a href="/register" className='text-white font-semibold'>sign up for CTFGuide GP</a> for free.</p>
-    </div>
-
+      <div className='bg-blue-600 text-white text-center p-2'>
+        <p>CTFGuide EDU is not the same as CTFGuide GP. If you're a solo learner, you can <a href="/register" className='text-white font-semibold'>sign up for CTFGuide GP</a> for free.</p>
+      </div>
       <main>
       <div className="bg-neutral-900 border-t border-neutral-800">
       <div className="relative isolate overflow-hidden bg-gradient-to-b from-blue-100/20">
diff --git a/src/pages/explorers.jsx b/src/pages/explorers.jsx
index c4263634..2313f3ab 100644
--- a/src/pages/explorers.jsx
+++ b/src/pages/explorers.jsx
@@ -26,157 +26,157 @@ export default function Home() {
 
   return (
     <>
-    <Head>
-    <style>
-          @import
-          url(&apos;https://fonts.googleapis.com/css2?family=Poppins&display=swap&apos;);
-        </style>
-    </Head>
-    <div className="bg-neutral-900">
-        <header className="absolute inset-x-0 top-0 z-50">
-          <nav className="flex items-center justify-between p-6 lg:px-8" aria-label="Global">
-            <div className="flex lg:flex-1">
-            <Link href="../" aria-label="Home">
-              <Logo className="h-10 w-auto" />
-            </Link>
-            </div>
-            <div className="flex lg:hidden">
-              <button
-                type="button"
-                className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-400"
-                onClick={() => setMobileMenuOpen(true)}
-              >
-                <span className="sr-only">Open main menu</span>
-                <Bars3Icon className="h-6 w-6" aria-hidden="true" />
-              </button>
-            </div>
-            <div className="hidden lg:flex lg:gap-x-12">
-              {navigation.map((item) => (
-                <a key={item.name} href={item.href} className="text-sm font-semibold leading-6 text-white">
-                  {item.name}
-                </a>
-              ))}
-            </div>
-            <div className="hidden lg:flex lg:flex-1 lg:justify-end">
-              <a href="./login" className="text-sm font-semibold leading-6 text-white">
-                Log in <span aria-hidden="true">&rarr;</span>
-              </a>
-            </div>
-          </nav>
-          <Dialog as="div" className="lg:hidden" open={mobileMenuOpen} onClose={setMobileMenuOpen}>
-            <div className="fixed inset-0 z-50" />
-            <Dialog.Panel className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-gray-900 px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-white/10">
-              <div className="flex items-center justify-between">
-              <Link href="../" aria-label="Home">
-              <Logo className="h-10 w-auto" />
-            </Link>
+      <Head>
+      <style>
+            @import
+            url(&apos;https://fonts.googleapis.com/css2?family=Poppins&display=swap&apos;);
+          </style>
+      </Head>
+      <div className="bg-neutral-900">
+          <header className="absolute inset-x-0 top-0 z-50">
+            <nav className="flex items-center justify-between p-6 lg:px-8" aria-label="Global">
+              <div className="flex lg:flex-1">
+              <Link href="../" aria-label="Home" legacyBehavior>
+                <Logo className="h-10 w-auto" />
+              </Link>
+              </div>
+              <div className="flex lg:hidden">
                 <button
                   type="button"
-                  className="-m-2.5 rounded-md p-2.5 text-gray-400"
-                  onClick={() => setMobileMenuOpen(false)}
+                  className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-400"
+                  onClick={() => setMobileMenuOpen(true)}
                 >
-                  <span className="sr-only">Close menu</span>
-                  <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                  <span className="sr-only">Open main menu</span>
+                  <Bars3Icon className="h-6 w-6" aria-hidden="true" />
                 </button>
               </div>
-              <div className="mt-6 flow-root">
-                <div className="-my-6 divide-y divide-gray-500/25">
-                  <div className="space-y-2 py-6">
-                    {navigation.map((item) => (
+              <div className="hidden lg:flex lg:gap-x-12">
+                {navigation.map((item) => (
+                  <a key={item.name} href={item.href} className="text-sm font-semibold leading-6 text-white">
+                    {item.name}
+                  </a>
+                ))}
+              </div>
+              <div className="hidden lg:flex lg:flex-1 lg:justify-end">
+                <a href="./login" className="text-sm font-semibold leading-6 text-white">
+                  Log in <span aria-hidden="true">&rarr;</span>
+                </a>
+              </div>
+            </nav>
+            <Dialog as="div" className="lg:hidden" open={mobileMenuOpen} onClose={setMobileMenuOpen}>
+              <div className="fixed inset-0 z-50" />
+              <Dialog.Panel className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-gray-900 px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-white/10">
+                <div className="flex items-center justify-between">
+                <Link href="../" aria-label="Home" legacyBehavior>
+                <Logo className="h-10 w-auto" />
+              </Link>
+                  <button
+                    type="button"
+                    className="-m-2.5 rounded-md p-2.5 text-gray-400"
+                    onClick={() => setMobileMenuOpen(false)}
+                  >
+                    <span className="sr-only">Close menu</span>
+                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                  </button>
+                </div>
+                <div className="mt-6 flow-root">
+                  <div className="-my-6 divide-y divide-gray-500/25">
+                    <div className="space-y-2 py-6">
+                      {navigation.map((item) => (
+                        <a
+                          key={item.name}
+                          href={item.href}
+                          className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800"
+                        >
+                          {item.name}
+                        </a>
+                      ))}
+                    </div>
+                    <div className="py-6">
                       <a
-                        key={item.name}
-                        href={item.href}
-                        className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800"
+                        href="../login"
+                        className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-white hover:bg-gray-800"
                       >
-                        {item.name}
+                        Log in
                       </a>
-                    ))}
+                    </div>
                   </div>
-                  <div className="py-6">
+                </div>
+              </Dialog.Panel>
+            </Dialog>
+          </header>
+    
+          <div className="relative isolate pt-14">
+            <div
+              className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
+              aria-hidden="true"
+            >
+              <div
+                className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/3 rotate-[30deg] bg-gradient-to-tr from-[#0e1354] to-[#1223a6] opacity-40 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
+                style={{
+                  clipPath:
+                    'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+                }}
+              />
+            </div>
+            <div className="py-24 sm:py-32 lg:pb-40">
+              <div className="mx-auto max-w-7xl px-6 lg:px-8">
+                <div className="mx-auto max-w-4xl text-center">
+                  <h1 className="text-4xl font-bold tracking-normal text-white sm:text-6xl leading-relaxed ">
+                    The platform that <span className="text-blue-600 leading-relaxed">
+                      <TextLoop>
+                        <span>grows</span>
+                        <span>develops</span>
+                        <span>trains</span>
+                    </TextLoop>
+  </span> <span className='mt-3'> cybersecurity talent.</span>
+                  </h1>
+                  <p className="mt-6 text-lg leading-8 text-gray-300">
+                    A data-driven simulation platform that provides a realistic, hands-on experience for you to become a cybersecurity professional.
+                  </p>
+                  <div className="mt-10 flex items-center justify-center gap-x-6">
                     <a
-                      href="../login"
-                      className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-white hover:bg-gray-800"
+                      href="../register"
+                      className="rounded-md   px-6 py-1.5 text-lg font-semibold text-white border border-white hover:bg-slate-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-400"
                     >
-                      Log in
+                      Get started
                     </a>
+                    <p onClick={() => window.scrollTo(0, 1500)} className="cursor-pointer text-lg font-semibold leading-6 text-white">
+                      Learn more <span aria-hidden="true">→</span>
+                    </p>
                   </div>
                 </div>
-              </div>
-            </Dialog.Panel>
-          </Dialog>
-        </header>
-  
-        <div className="relative isolate pt-14">
-          <div
-            className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
-            aria-hidden="true"
-          >
-            <div
-              className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/3 rotate-[30deg] bg-gradient-to-tr from-[#0e1354] to-[#1223a6] opacity-40 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
-              style={{
-                clipPath:
-                  'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
-              }}
-            />
-          </div>
-          <div className="py-24 sm:py-32 lg:pb-40">
-            <div className="mx-auto max-w-7xl px-6 lg:px-8">
-              <div className="mx-auto max-w-4xl text-center">
-                <h1 className="text-4xl font-bold tracking-normal text-white sm:text-6xl leading-relaxed ">
-                  The platform that <span className="text-blue-600 leading-relaxed">
-                    <TextLoop>
-                      <span>grows</span>
-                      <span>develops</span>
-                      <span>trains</span>
-                  </TextLoop>
-</span> <span className='mt-3'> cybersecurity talent.</span>
-                </h1>
-                <p className="mt-6 text-lg leading-8 text-gray-300">
-                  A data-driven simulation platform that provides a realistic, hands-on experience for you to become a cybersecurity professional.
-                </p>
-                <div className="mt-10 flex items-center justify-center gap-x-6">
-                  <a
-                    href="../register"
-                    className="rounded-md   px-6 py-1.5 text-lg font-semibold text-white border border-white hover:bg-slate-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-400"
-                  >
-                    Get started
-                  </a>
-                  <p onClick={() => window.scrollTo(0, 1500)} className="cursor-pointer text-lg font-semibold leading-6 text-white">
-                    Learn more <span aria-hidden="true">→</span>
-                  </p>
-                </div>
-              </div>
-              <img
-             
-              />
+                <img
+               
+                />
 
-              <video
-              muted
-              autoPlay
-              width={2432}
-              height={1442}
-              className="mt-16 rounded-md bg-white/5 shadow-2xl ring-1 ring-white/10 sm:mt-24"
-         
-              >
-                <source src="../sample_vid.mp4" type="video/mp4" />
+                <video
+                muted
+                autoPlay
+                width={2432}
+                height={1442}
+                className="mt-16 rounded-md bg-white/5 shadow-2xl ring-1 ring-white/10 sm:mt-24"
+           
+                >
+                  <source src="../sample_vid.mp4" type="video/mp4" />
 
-              </video>
+                </video>
+              </div>
             </div>
-          </div>
-          <div
-            className="hidden inset-x-0 top-[calc(100%-13rem)] -z-10  transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
-            aria-hidden="true"
-          >
             <div
-              className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#0e1354] to-[#1223a6]  opacity-40 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
-              style={{
-                clipPath:
-                  'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
-              }}
-            />
+              className="hidden inset-x-0 top-[calc(100%-13rem)] -z-10  transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
+              aria-hidden="true"
+            >
+              <div
+                className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#0e1354] to-[#1223a6]  opacity-40 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
+                style={{
+                  clipPath:
+                    'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+                }}
+              />
+            </div>
           </div>
         </div>
-      </div>
     </>
-  )
+  );
 }
diff --git a/src/pages/groups.jsx b/src/pages/groups.jsx
index 2fc7a238..2a4e3970 100644
--- a/src/pages/groups.jsx
+++ b/src/pages/groups.jsx
@@ -174,7 +174,6 @@ export default function Groups() {
         />
       )}
       <StandardNav />
-
       <div className="  min-h-screen">
        
 
@@ -261,9 +260,10 @@ export default function Groups() {
                   <p className="font-medium text-white">No classes created yet</p>
                   <p className="text-sm text-neutral-400">Create your first classroom to start teaching</p>
                 </div>
-                <Link href="./groups/create"
+                <Link
+                  href="./groups/create"
                   className="inline-flex items-center px-4 py-2 rounded-lg border border-blue-600 text-blue-600 hover:bg-blue-600/10 transition-colors"
-                >
+                  legacyBehavior>
                   <i className="fas fa-plus mr-2"></i>
                   Create Now
                 </Link>
@@ -442,7 +442,6 @@ export default function Groups() {
           </Transition.Root>
         </div>
       </div>
-
       <ToastContainer />
       <Footer />
     </>
diff --git a/src/pages/groups/[group]/home.jsx b/src/pages/groups/[group]/home.jsx
index e0813583..c2011b16 100644
--- a/src/pages/groups/[group]/home.jsx
+++ b/src/pages/groups/[group]/home.jsx
@@ -70,10 +70,10 @@ export default function GroupDisplay() {
             <p className="text-neutral-400 mb-6">
               The classroom you're looking for doesn't exist or you don't have permission to access it.
             </p>
-            <Link 
+            <Link
               href="/groups"
               className="inline-flex items-center justify-center px-4 py-2 rounded-lg bg-neutral-800 text-white hover:bg-neutral-700 transition-colors"
-            >
+              legacyBehavior>
               <i className="fas fa-arrow-left mr-2"></i>
               Back to Classrooms
             </Link>
diff --git a/src/pages/groups/[group]/settings.jsx b/src/pages/groups/[group]/settings.jsx
index 69626b2f..f431419d 100644
--- a/src/pages/groups/[group]/settings.jsx
+++ b/src/pages/groups/[group]/settings.jsx
@@ -309,41 +309,38 @@ export default function teacherSettings() {
         </style>
       </Head>
       <StandardNav />
-
-
-            {classroom && 
-               <div className="border-b border-neutral-800">
-               <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-                 <div className="flex h-14 items-center space-x-4">
-                   <button
-                     onClick={() => router.push(`/groups/${group}/home`)}
-                     className="text-neutral-400 hover:text-white transition-colors"
-                   >
-                     Home
-                   </button>
-                   <button
-                     onClick={() => router.push(`/groups/${group}/view-all-assignments`)}
-                     className="text-neutral-400 hover:text-white transition-colors"
-                   >
-                     Assignments
-                   </button>
-                   <button
-                     onClick={() => router.push(`/groups/${group}/gradebook`)}
-                     className="text-neutral-400 hover:text-white transition-colors"
-                   >
-                     Gradebook
-                   </button>
-                   <button
-                     onClick={() => router.push(`/groups/${group}/settings`)}
-                     className="text-neutral-400 hover:text-white transition-colors"
-                   >
-                     Settings
-                   </button>
-                 </div>
-               </div>
-             </div>
+      {classroom && 
+         <div className="border-b border-neutral-800">
+         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+           <div className="flex h-14 items-center space-x-4">
+             <button
+               onClick={() => router.push(`/groups/${group}/home`)}
+               className="text-neutral-400 hover:text-white transition-colors"
+             >
+               Home
+             </button>
+             <button
+               onClick={() => router.push(`/groups/${group}/view-all-assignments`)}
+               className="text-neutral-400 hover:text-white transition-colors"
+             >
+               Assignments
+             </button>
+             <button
+               onClick={() => router.push(`/groups/${group}/gradebook`)}
+               className="text-neutral-400 hover:text-white transition-colors"
+             >
+               Gradebook
+             </button>
+             <button
+               onClick={() => router.push(`/groups/${group}/settings`)}
+               className="text-neutral-400 hover:text-white transition-colors"
+             >
+               Settings
+             </button>
+           </div>
+         </div>
+       </div>
 }
-
       <Loader isLoad={loadingAuth} />
       {
         !loadingAuth&&
@@ -759,7 +756,6 @@ export default function teacherSettings() {
       }
       <input type="hidden" id="copyBox" value={classCode || ''}></input>
       <input type="hidden" id="copyBox2" value={inviteLink || ''}></input>
-
       <ToastContainer
         position="bottom-right"
         autoClose={5000}
@@ -772,7 +768,6 @@ export default function teacherSettings() {
         pauseOnHover
         theme="dark"
       />
-
     </>
   );
 }
diff --git a/src/pages/login.jsx b/src/pages/login.jsx
index e2808958..97ad2a57 100644
--- a/src/pages/login.jsx
+++ b/src/pages/login.jsx
@@ -142,7 +142,7 @@ export default function Login() {
                       <div className='flex items-center'>
 
                         <h1 className='text-white  text-xl'>Login to </h1>
-                        <Link href="/" className="flex items-center ml-1">
+                        <Link href="/" className="flex items-center ml-1" legacyBehavior>
                           <img
                             className="z-10 h-10 w-10"
                             src="/darkLogo.png"
@@ -269,7 +269,6 @@ export default function Login() {
           </form>
         </div>
       </div>
-
       <ToastContainer
         position="bottom-right"
         autoClose={5000}
diff --git a/src/pages/register.jsx b/src/pages/register.jsx
index 8e04c50b..598e5112 100644
--- a/src/pages/register.jsx
+++ b/src/pages/register.jsx
@@ -207,7 +207,7 @@ function Register() {
                           <div>
                             <div className='flex items-center'>
                            <h1 className='text-white  text-xl'>Get started on</h1>
-                              <Link href="/" className="flex items-center ml-1">
+                              <Link href="/" className="flex items-center ml-1" legacyBehavior>
                                 <img
                                   className="z-10 h-10 w-10"
                                   src="/darkLogo.png"
diff --git a/src/pages/terminal.jsx b/src/pages/terminal.jsx
index c4538361..464c3624 100644
--- a/src/pages/terminal.jsx
+++ b/src/pages/terminal.jsx
@@ -346,11 +346,14 @@ function PointsModal({ isOpen, setIsOpen, points }) {
 function TabLink({ tabName, selected, url }) {
   const selectedStyle = selected ? 'text-white bg-neutral-600' : 'text-neutral-400';
   return (
-    <Link href={url} className={`flex justify-center items-center ${selectedStyle} hover:text-white px-2 hover:bg-neutral-600 rounded-sm h-full`}>
+    <Link
+      href={url}
+      className={`flex justify-center items-center ${selectedStyle} hover:text-white px-2 hover:bg-neutral-600 rounded-sm h-full`}
+      legacyBehavior>
       <DocumentTextIcon className="text-blue-500 w-6 mr-1 inline-flex" />
       {tabName ?? 'This is a test button'}
     </Link>
-  )
+  );
 }
 
 const baseUrl = process.env.NEXT_PUBLIC_API_URL;
@@ -508,7 +511,10 @@ function DescriptionPage({ cache }) {
         <h2 className="flex gap-2 pb-8">
           {challenge ? <>
             <img src={authorPfp} alt="Author's profile picture" className="h-8 w-8 rounded-full" />
-            <Link href={`/users/${challenge.creator}`} className="text-blue-500 pr-3 hover:underline">{challenge.creator} </Link>
+            <Link
+              href={`/users/${challenge.creator}`}
+              className="text-blue-500 pr-3 hover:underline"
+              legacyBehavior>{challenge.creator} </Link>
             <p className="flex  text-neutral-200 opacity-70 items-center text-sm">
               <i className="fas fa-solid fa-eye mr-2 text-lg"></i>
               {challenge.views}
@@ -524,7 +530,7 @@ function DescriptionPage({ cache }) {
       </div >
       <div className="shrink-0 bg-neutral-800 h-10 w-full"></div>
     </>
-  )
+  );
 }
 
 
@@ -822,13 +828,11 @@ function LeaderboardPage({ cache, setCache }) {
 
 
       </div>
-
       <div className="grid grid-cols-3">
         <div className="">
 
         </div>
       </div>
-
       {leaderboard.slice(0, 10).map((entry, index) => {
         let color;
         switch (index) {
@@ -856,7 +860,7 @@ function LeaderboardPage({ cache, setCache }) {
 
                 <span className="text-2xl font-bold">{index + 1}.</span>
                 <span className="ml-2 text-xl font-semibold text-white">
-                  <Link href={`/users/${entry.user.username}`}>
+                  <Link href={`/users/${entry.user.username}`} legacyBehavior>
                     {entry.user.username}
                   </Link>
                 </span>
@@ -864,11 +868,11 @@ function LeaderboardPage({ cache, setCache }) {
               <div className="text-xl font-semibold">{entry.points} points</div>
             </div>
           </div>
-        )
+        );
       })}
       <div className="shrink-0 bg-neutral-800 h-10 w-full"></div>
     </>
-  )
+  );
 }
 
 function CommentsPage({ cache }) {