diff --git a/src/AppContent.jsx b/src/AppContent.jsx
index 086765ef..0378280a 100644
--- a/src/AppContent.jsx
+++ b/src/AppContent.jsx
@@ -25,6 +25,7 @@ import ContributorProfile from "./pages/ContributorProfile.jsx";
 import Contributors from "./pages/Contributors.jsx";
 import DocsHub from "./pages/DocsHub.jsx";
 import SettingsMenu from "./components/SettingsMenu.jsx";
+import Discover from "./pages/Discover.jsx";
 import ChatBot from "./components/ChatBot.jsx";
 import NotFound from "./pages/NotFound.jsx";
 import { Ion } from "cesium";
@@ -47,7 +48,7 @@ const AppContent = () => {
       {settings[0].enabled && <NotifierSat />}
       {isPointerEnabled && <CursorEffects isActive={isPointerEnabled} />}
       <DiamondCursor isActive={isPointerEnabled} />
-      <Loader/>
+      <Loader />
       <ScrollToTop />
       <SettingsMenu />
       <ChatBot />
@@ -58,6 +59,7 @@ const AppContent = () => {
           <Route path="/" element={<Landing />} />
           <Route path="/newsletter" element={<Newsletter />} />
           <Route path="/events" element={<Events />} />
+          <Route path="/discover" element={<Discover />} />
           <Route path="/calendar" element={<EventCalendarPage />} />
           <Route path="/projects" element={<Projects />} />
           <Route path="/login" element={<Login />} />
diff --git a/src/components/Events.jsx b/src/components/Events.jsx
index ed5a7c08..bff85091 100644
--- a/src/components/Events.jsx
+++ b/src/components/Events.jsx
@@ -21,7 +21,7 @@ import Footer from "./footer";
 const Events = () => {
   const [filterType, setFilterType] = useState("all");
   const timelineRef = useRef(null);
-  
+
   // Use framer-motion's useScroll for smooth timeline animation
   const { scrollYProgress } = useScroll({
     target: timelineRef,
@@ -30,7 +30,7 @@ const Events = () => {
 
   // Transform scroll progress to height percentage
   const heightProgress = useTransform(scrollYProgress, [0, 1], ["0%", "100%"]);
-  
+
   useLenis();
 
   useLenis();
@@ -117,7 +117,7 @@ const Events = () => {
     },
   ];
 
-  const calendarEventsData = 
+  const calendarEventsData =
   {
     "events": [
       {
@@ -349,11 +349,10 @@ const Events = () => {
                 <button
                   key={type}
                   onClick={() => filterEvents(type)}
-                  className={`relative text-xs sm:text-sm md:text-base px-3 sm:px-4 py-1.5 rounded-full transition-all duration-300 whitespace-nowrap font-medium ${
-                    filterType === type
-                      ? "text-blue-400 font-semibold"
-                      : "text-gray-300 hover:text-white"
-                  }`}
+                  className={`relative text-xs sm:text-sm md:text-base px-3 sm:px-4 py-1.5 rounded-full transition-all duration-300 whitespace-nowrap font-medium ${filterType === type
+                    ? "text-blue-400 font-semibold"
+                    : "text-gray-300 hover:text-white"
+                    }`}
                 >
                   {type === "all" && "All Events"}
                   {type === "past" && "Past Events"}
@@ -372,18 +371,18 @@ const Events = () => {
                     filterType === "all"
                       ? "5%"
                       : filterType === "past"
-                      ? "25%"
-                      : filterType === "ongoing"
-                      ? "48%"
-                      : "76%",
+                        ? "25%"
+                        : filterType === "ongoing"
+                          ? "48%"
+                          : "76%",
                   width:
                     filterType === "all"
                       ? "80px"
                       : filterType === "past"
-                      ? "95px"
-                      : filterType === "ongoing"
-                      ? "120px"
-                      : "110px",
+                        ? "95px"
+                        : filterType === "ongoing"
+                          ? "120px"
+                          : "110px",
                 }}
                 transition={{ type: "spring", stiffness: 350, damping: 25 }}
               />
@@ -415,23 +414,23 @@ const Events = () => {
                   >
                     <source src={event.videoSrc} type="video/mp4" />
                   </video>
-                  
+
                   {/* Date Badge */}
                   <div className="absolute top-3 left-3 sm:top-4 sm:left-4 z-10">
                     <div className="relative bg-white/20 backdrop-blur-lg text-white font-medium px-5 py-2.5 rounded-xl border border-white/40 shadow-[0_4px_20px_rgba(255,255,255,0.15)] hover:bg-white/30 hover:border-white/60 hover:shadow-[0_4px_30px_rgba(255,255,255,0.25)] transition-all duration-300 ease-out">
                       <p className="text-xs sm:text-sm font-semibold">
-                        {new Date(event.startDate).toLocaleDateString('en-US', { 
-                          month: 'short', 
-                          day: 'numeric', 
-                          year: 'numeric' 
+                        {new Date(event.startDate).toLocaleDateString('en-US', {
+                          month: 'short',
+                          day: 'numeric',
+                          year: 'numeric'
                         })}
                       </p>
                     </div>
                   </div>
-                  
+
                   {/* Overlay Gradient */}
                   <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent opacity-60 group-hover:opacity-80 transition-opacity duration-300"></div>
-                  
+
                   {/* Content */}
                   <div className="absolute bottom-0 left-0 right-0 w-full p-3 sm:p-4 md:p-5 text-white transform translate-y-0 group-hover:translate-y-0 transition-transform duration-300">
                     <h2 className="text-sm sm:text-base md:text-lg lg:text-xl font-bold mb-1 sm:mb-1.5 md:mb-2 line-clamp-1 drop-shadow-lg">
@@ -454,7 +453,7 @@ const Events = () => {
           <h2 className="timeline-title">
             SAST Events Timeline
           </h2>
-          
+
           <div className="timeline-wrapper">
             {/* Animated Timeline line - Desktop */}
             <div className="timeline-line-desktop relative">
@@ -475,7 +474,7 @@ const Events = () => {
                 }}
               />
             </div>
-            
+
             {/* Animated Mobile timeline line */}
             <div className="timeline-line-mobile relative">
               <motion.div
@@ -496,71 +495,15 @@ const Events = () => {
               />
             </div>
 
-            {timelineData.map((event, index) => {
-              // Calculate when each item should appear based on scroll progress
-              const itemOffset = index / (timelineData.length - 1);
-              const itemProgress = useTransform(
-                scrollYProgress,
-                [Math.max(0, itemOffset - 0.15), Math.min(1, itemOffset + 0.05)],
-                [0, 1]
-              );
-              
-              return (
-                <motion.div
-                  key={index}
-                  style={{
-                    opacity: itemProgress,
-                  }}
-                  className={`timeline-item ${index % 2 === 0 ? 'reverse' : ''}`}
-                >
-                {/* Timeline dot with scale animation */}
-                <motion.div
-                  style={{
-                    scale: itemProgress,
-                  }}
-                  className={`timeline-dot ${event.status === 'upcoming' ? 'pulse' : ''}`}
-                >
-                  {event.status === 'upcoming' && (
-                    <motion.div
-                      animate={{
-                        scale: [1, 1.3, 1],
-                        opacity: [0.7, 1, 0.7],
-                      }}
-                      transition={{
-                        duration: 2,
-                        repeat: Infinity,
-                        ease: "easeInOut"
-                      }}
-                      className="absolute inset-0 rounded-full bg-blue-400"
-                    />
-                  )}
-                </motion.div>
-
-                {/* Content card */}
-                <motion.div
-                  style={{
-                    opacity: itemProgress,
-                    x: index % 2 === 0 ? useTransform(itemProgress, [0, 1], [50, 0]) : useTransform(itemProgress, [0, 1], [-50, 0])
-                  }}
-                  className={`timeline-content ${index % 2 === 0 ? 'reverse' : 'normal'}`}
-                >
-                  <div className="timeline-card">
-                    <div className={`timeline-card-inner ${index % 2 === 0 ? 'reverse' : ''}`}>
-                      <span className={`timeline-badge ${event.status === 'completed' ? 'completed' : 'upcoming'}`}>
-                        {event.category} • {event.status === 'completed' ? 'Completed' : 'Upcoming'}
-                      </span>
-                      <h3 className="timeline-event-title">{event.title}</h3>
-                      <p className="timeline-event-date">{event.date}</p>
-                      <p className="timeline-event-description">{event.description}</p>
-                    </div>
-                  </div>
-                </motion.div>
-
-                {/* Spacer for desktop */}
-                <div className="timeline-spacer"></div>
-              </motion.div>
-              );
-            })}
+            {timelineData.map((event, index) => (
+              <TimelineItem
+                key={index}
+                event={event}
+                index={index}
+                totalItems={timelineData.length}
+                scrollYProgress={scrollYProgress}
+              />
+            ))}
           </div>
         </div>
       </section>
@@ -569,4 +512,89 @@ const Events = () => {
   );
 };
 
+const TimelineItem = ({ event, index, totalItems, scrollYProgress }) => {
+  // Calculate when each item should appear based on scroll progress
+  const itemOffset = index / (totalItems - 1);
+  const itemProgress = useTransform(
+    scrollYProgress,
+    [Math.max(0, itemOffset - 0.15), Math.min(1, itemOffset + 0.05)],
+    [0, 1]
+  );
+
+  const xPosEven = useTransform(itemProgress, [0, 1], [50, 0]);
+  const xPosOdd = useTransform(itemProgress, [0, 1], [-50, 0]);
+
+  const xPos = index % 2 === 0 ? xPosEven : xPosOdd;
+
+  return (
+    <motion.div
+      style={{
+        opacity: itemProgress,
+      }}
+      className={`timeline-item ${index % 2 === 0 ? 'reverse' : ''}`}
+    >
+      {/* Timeline dot with scale animation */}
+      <motion.div
+        style={{
+          scale: itemProgress,
+        }}
+        className={`timeline-dot ${event.status === 'upcoming' ? 'pulse' : ''}`}
+      >
+        {event.status === 'upcoming' && (
+          <motion.div
+            animate={{
+              scale: [1, 1.3, 1],
+              opacity: [0.7, 1, 0.7],
+            }}
+            transition={{
+              duration: 2,
+              repeat: Infinity,
+              ease: "easeInOut"
+            }}
+            className="absolute inset-0 rounded-full bg-blue-400"
+          />
+        )}
+      </motion.div>
+
+      {/* Content card */}
+      <motion.div
+        style={{
+          opacity: itemProgress,
+          x: xPos
+        }}
+        className={`timeline-content ${index % 2 === 0 ? 'reverse' : 'normal'}`}
+      >
+        <div className="timeline-card">
+          <div className={`timeline-card-inner ${index % 2 === 0 ? 'reverse' : ''}`}>
+            <span className={`timeline-badge ${event.status === 'completed' ? 'completed' : 'upcoming'}`}>
+              {event.category} • {event.status === 'completed' ? 'Completed' : 'Upcoming'}
+            </span>
+            <h3 className="timeline-event-title">{event.title}</h3>
+            <p className="timeline-event-date">{event.date}</p>
+            <p className="timeline-event-description">{event.description}</p>
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Spacer for desktop */}
+      <div className="timeline-spacer"></div>
+    </motion.div>
+  );
+};
+
+import PropTypes from 'prop-types';
+
+TimelineItem.propTypes = {
+  event: PropTypes.shape({
+    status: PropTypes.string.isRequired,
+    category: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    date: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+  }).isRequired,
+  index: PropTypes.number.isRequired,
+  totalItems: PropTypes.number.isRequired,
+  scrollYProgress: PropTypes.object.isRequired,
+};
+
 export default Events;
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 561be8b3..6e9986f6 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -11,7 +11,7 @@ const Navbar = () => {
   const [menuOpen, setMenuOpen] = useState(false);
   const [exploreOpen, setExploreOpen] = useState(false);
   const [communityOpen, setCommunityOpen] = useState(false);
-  
+
   const { scrollYProgress } = useScroll();
 
   useMotionValueEvent(scrollYProgress, "change", (current) => {
@@ -37,6 +37,7 @@ const Navbar = () => {
 
   const exploreItems = [
     { name: "Events", path: "/events" },
+    { name: "Discover", path: "/discover" },
     { name: "Projects", path: "/projects" },
     { name: "Astronomy News", path: "/news" },
     { name: "Track", path: "/track" },
@@ -155,8 +156,8 @@ const Navbar = () => {
             <NavLink to="/" onClick={closeMenu} className="flex items-center">
               <img src={logo} alt="SAST Logo" className="w-12 h-12" />
             </NavLink>
-            <button 
-              onClick={toggleMenu} 
+            <button
+              onClick={toggleMenu}
               className="relative w-12 h-12 flex flex-col items-center justify-center gap-1.5 rounded-lg hover:bg-white/5 active:bg-white/10 transition-colors duration-200"
               aria-label="Toggle menu"
               aria-expanded={menuOpen}
@@ -258,10 +259,10 @@ const Navbar = () => {
                   Contact
                 </a>
               </li>
-            </ul>
-          </motion.div>
+            </ul >
+          </motion.div >
         )}
-      </div>
+      </div >
     </>
   );
 };
diff --git a/src/context/MessagesContext.jsx b/src/context/MessagesContext.jsx
index cb87a43a..741ec249 100644
--- a/src/context/MessagesContext.jsx
+++ b/src/context/MessagesContext.jsx
@@ -88,7 +88,7 @@ export const MessagesProvider = ({ children }) => {
     // POST to backend
     try {
       const res = await fetch(
-        `${backendUrl}/bot` || "http://localhost:3000/bot",
+        (backendUrl ? `${backendUrl}/bot` : "http://localhost:3000/bot"),
         {
           method: "POST",
           headers: { "Content-Type": "application/json" },
diff --git a/src/hooks/useMessages.jsx b/src/hooks/useMessages.jsx
index 2ffa6948..7ffd6b0e 100644
--- a/src/hooks/useMessages.jsx
+++ b/src/hooks/useMessages.jsx
@@ -1,7 +1,7 @@
-import { useMessages } from "../context/MessagesContext";
+import { useMessages as useMessagesContext } from "../context/MessagesContext";
 
 export const useMessages = () => {
-  const context = useMessages();
+  const context = useMessagesContext();
 
   if (!context) {
     throw new Error("useMessages must be used within a MessagesProvider");
diff --git a/src/pages/ContributorProfile.jsx b/src/pages/ContributorProfile.jsx
index 3e00c83d..a1bbcb2f 100644
--- a/src/pages/ContributorProfile.jsx
+++ b/src/pages/ContributorProfile.jsx
@@ -1,5 +1,4 @@
 /* eslint-disable react/prop-types */
-import React from "react";
 import { Link, useParams } from "react-router-dom";
 import { Github, Linkedin, Globe, Twitter } from "lucide-react";
 import { getContributorBySlug } from "../lib/contributors/data";
diff --git a/src/pages/Discover.jsx b/src/pages/Discover.jsx
new file mode 100644
index 00000000..b45c983f
--- /dev/null
+++ b/src/pages/Discover.jsx
@@ -0,0 +1,142 @@
+import { useState } from "react";
+import { motion } from "framer-motion";
+
+const Discover = () => {
+    const [activeTab, setActiveTab] = useState("all");
+
+    // Dummy Data
+    const images = [
+        { id: 1, src: "https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2072&auto=format&fit=crop", title: "Starry Night", category: "images" },
+        { id: 2, src: "https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?q=80&w=2072&auto=format&fit=crop", title: "Nebula", category: "images" },
+        { id: 3, src: "https://images.unsplash.com/photo-1462331940025-496dfbfc7564?q=80&w=2022&auto=format&fit=crop", title: "Galaxy", category: "images" },
+        { id: 4, src: "https://images.unsplash.com/photo-1532968961962-8a0cb3a2d4f5?q=80&w=2071&auto=format&fit=crop", title: "Astronaut", category: "images" },
+    ];
+
+    const videos = [
+        { id: 1, src: "https://www.youtube.com/embed/libKVRa01L8", title: "Space Exploration", category: "videos" },
+        { id: 2, src: "https://www.youtube.com/embed/uD4izuDMUQA", title: "Mars Mission", category: "videos" },
+    ];
+
+    const events = [
+        { id: 1, date: "2023-10-15", title: "Stargazing Night", description: "A wonderful night under the stars.", category: "events" },
+        { id: 2, date: "2023-11-20", title: "Rocket Workshop", description: "Learning how to build rockets.", category: "events" },
+    ];
+
+    const recordings = [
+        { id: 1, title: "Intro to Astrophysics", duration: "45 min", category: "recordings" },
+        { id: 2, title: "Black Holes Explained", duration: "60 min", category: "recordings" },
+    ];
+
+    const allContent = [...images, ...videos, ...events, ...recordings];
+
+    const filteredContent = activeTab === "all" ? allContent : allContent.filter(item => item.category === activeTab);
+
+    return (
+        <div className="min-h-screen bg-black text-white pt-24 px-4 md:px-8 lg:px-16">
+            <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.8 }}
+                className="text-center mb-12"
+            >
+                <h1 className="text-4xl md:text-6xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-600 mb-4">
+                    Discover SAST
+                </h1>
+                <p className="text-gray-400 text-lg max-w-2xl mx-auto">
+                    Explore our gallery of images, videos, past events, and session recordings.
+                </p>
+            </motion.div>
+
+            {/* Tabs */}
+            <div className="flex flex-wrap justify-center gap-4 mb-12">
+                {["all", "images", "videos", "events", "recordings"].map((tab) => (
+                    <button
+                        key={tab}
+                        onClick={() => setActiveTab(tab)}
+                        className={`px-6 py-2 rounded-full text-sm font-medium transition-all duration-300 ${activeTab === tab
+                                ? "bg-blue-600 text-white shadow-lg shadow-blue-500/30"
+                                : "bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-white"
+                            }`}
+                    >
+                        {tab.charAt(0).toUpperCase() + tab.slice(1)}
+                    </button>
+                ))}
+            </div>
+
+            {/* Content Grid */}
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                {filteredContent.map((item) => (
+                    <motion.div
+                        key={item.id + item.category}
+                        layout
+                        initial={{ opacity: 0, scale: 0.9 }}
+                        animate={{ opacity: 1, scale: 1 }}
+                        exit={{ opacity: 0, scale: 0.9 }}
+                        transition={{ duration: 0.3 }}
+                        className="bg-gray-900 rounded-xl overflow-hidden border border-gray-800 hover:border-blue-500/50 transition-colors group"
+                    >
+                        {/* Images */}
+                        {item.category === "images" && (
+                            <div className="relative aspect-video overflow-hidden">
+                                <img
+                                    src={item.src}
+                                    alt={item.title}
+                                    className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
+                                />
+                                <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
+                                    <h3 className="text-lg font-semibold">{item.title}</h3>
+                                </div>
+                            </div>
+                        )}
+
+                        {/* Videos */}
+                        {item.category === "videos" && (
+                            <div className="aspect-video">
+                                <iframe
+                                    src={item.src}
+                                    title={item.title}
+                                    className="w-full h-full"
+                                    allowFullScreen
+                                ></iframe>
+                                <div className="p-4">
+                                    <h3 className="text-lg font-semibold">{item.title}</h3>
+                                </div>
+                            </div>
+                        )}
+
+                        {/* Events */}
+                        {item.category === "events" && (
+                            <div className="p-6 h-full flex flex-col justify-between">
+                                <div>
+                                    <div className="text-blue-400 text-sm font-mono mb-2">{item.date}</div>
+                                    <h3 className="text-xl font-bold mb-2">{item.title}</h3>
+                                    <p className="text-gray-400 text-sm">{item.description}</p>
+                                </div>
+                                <button className="mt-4 text-blue-400 hover:text-blue-300 text-sm font-medium flex items-center gap-2">
+                                    View Details →
+                                </button>
+                            </div>
+                        )}
+
+                        {/* Recordings */}
+                        {item.category === "recordings" && (
+                            <div className="p-6 flex items-center gap-4">
+                                <div className="w-12 h-12 rounded-full bg-red-500/20 flex items-center justify-center text-red-500">
+                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
+                                        <path fillRule="evenodd" d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z" clipRule="evenodd" />
+                                    </svg>
+                                </div>
+                                <div>
+                                    <h3 className="text-lg font-semibold">{item.title}</h3>
+                                    <p className="text-gray-500 text-sm">{item.duration}</p>
+                                </div>
+                            </div>
+                        )}
+                    </motion.div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default Discover;
diff --git a/src/pages/MemberProfile.jsx b/src/pages/MemberProfile.jsx
index 8a7a96ac..7774f59b 100644
--- a/src/pages/MemberProfile.jsx
+++ b/src/pages/MemberProfile.jsx
@@ -1,5 +1,4 @@
 /* eslint-disable react/prop-types */
-import React from "react";
 import { Link, useParams } from "react-router-dom";
 import { getMemberBySlug } from "../lib/members/data";
 import { Github, Linkedin, Globe, Twitter } from "lucide-react";
@@ -68,7 +67,7 @@ export default function MemberProfile() {
         paddingLeft: "1.5rem",
         paddingRight: "1.5rem",
         paddingBottom: "6rem",
-        
+
       }}
     >
       <div
@@ -85,10 +84,11 @@ export default function MemberProfile() {
 
       <div
         className="text-center font-bold text-[50px] tracking-wide text-emerald-200/90 pb-5 font-family-['arial']"
-        style={{ marginBottom: "1.25rem"
+        style={{
+          marginBottom: "1.25rem"
+        }
+
         }
-      
-      }
       >
         SAST Community Member
       </div>
diff --git a/src/pages/NotFound.jsx b/src/pages/NotFound.jsx
index 9bd89678..4e61c0f6 100644
--- a/src/pages/NotFound.jsx
+++ b/src/pages/NotFound.jsx
@@ -1,4 +1,4 @@
-import React, {useState,useEffect} from 'react';
+import { useState, useEffect } from 'react';
 import { ArrowLeft } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 
@@ -43,7 +43,7 @@ export default function NotFound() {
           />
         ))}
       </div>
-      
+
       {/* Main Content */}
       <div className="text-center max-w-5xl mx-auto relative z-10">
         {/* 404 with Globe */}
@@ -51,10 +51,10 @@ export default function NotFound() {
           <div className="text-[4rem] xs:text-[6rem] sm:text-[10rem] md:text-[14rem] lg:text-[18rem] font-bold leading-none text-neutral-100">
             4
           </div>
-          
+
           {/* Globe Image */}
           <div className="relative flex-shrink-0">
-            <img 
+            <img
               src="https://img.freepik.com/free-photo/beautiful-glowing-gray-full-moon_181624-59870.jpg?t=st%3D1761801711~exp%3D1761805311~hmac%3D49a04bbffe10cb1d0b06ddbe2632ec96891b430fd54759ca5ad7243498767ccc&w=2000"
               alt="Earth from space"
               className="w-16 h-16 xs:w-20 xs:h-20 sm:w-32 sm:h-32 md:w-40 md:h-40 lg:w-48 lg:h-48 rounded-full object-cover"
@@ -62,7 +62,7 @@ export default function NotFound() {
             {/* Glow Effect */}
             <div className="absolute inset-0 rounded-full bg-blue-500/20 blur-2xl -z-10"></div>
           </div>
-          
+
           <div className="text-[4rem] xs:text-[6rem] sm:text-[10rem] md:text-[14rem] lg:text-[18rem] font-bold text-neutral-100 leading-none">
             4
           </div>
@@ -73,7 +73,7 @@ export default function NotFound() {
           Oops! Lost in Space
         </h1>
         <p className="text-sm xs:text-base sm:text-lg md:text-xl lg:text-2xl text-gray-400 mb-8 sm:mb-10 md:mb-12 max-w-2xl mx-auto px-4 leading-relaxed">
-          We couldn't find the page you're looking for. It might have been moved or deleted.
+          The page you&apos;re looking for doesn&apos;t exist or has been moved.
         </p>
 
         {/* Go Back Button */}
diff --git a/src/pages/login.jsx b/src/pages/login.jsx
index d772b770..f22b7c9a 100644
--- a/src/pages/login.jsx
+++ b/src/pages/login.jsx
@@ -343,7 +343,7 @@ export default function Login() {
                     Email
                   </button>
                   <button
-                    onClick={() => 
+                    onClick={() =>
                       showToast("Phone login is not implemented yet.", "error")
                     }
                     className={`method-btn ${method === "phone" ? "active" : ""}`}
@@ -477,7 +477,7 @@ export default function Login() {
                     fontSize: "16px",
                   }}
                 >
-                  Don't have an account?{" "}
+                  Don&apos;t have an account?{" "}
                   <span
                     onClick={() => navigate("/register")}
                     style={{
diff --git a/src/workers/predictor.worker.js b/src/workers/predictor.worker.js
index 6390dc6b..c4f080ea 100644
--- a/src/workers/predictor.worker.js
+++ b/src/workers/predictor.worker.js
@@ -73,8 +73,8 @@ self.onmessage = function (e) {
 
       const distance = Math.sqrt(
         Math.pow(userEcf.x - ecf.x, 2) +
-          Math.pow(userEcf.y - ecf.y, 2) +
-          Math.pow(userEcf.z - ecf.z, 2)
+        Math.pow(userEcf.y - ecf.y, 2) +
+        Math.pow(userEcf.z - ecf.z, 2)
       );
 
       if (distance <= radiusKm) {