diff --git a/.DS_Store b/.DS_Store
index c04ddc6b7..bc10459aa 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/app/activity/deploy/page.tsx b/app/activity/deploy/page.tsx
new file mode 100644
index 000000000..906e14aae
--- /dev/null
+++ b/app/activity/deploy/page.tsx
@@ -0,0 +1,52 @@
+'use client'
+
+import Image from "next/image"
+import { useRouter } from "next/navigation"
+import { AvatarGenerator } from "@/components/Account/Avatar"
+import DeployTelescopeViewport from "@/components/(scenes)/deploy/TelescopeViewportRange"
+import { Button } from "@/components/ui/button"
+import { useSession } from "@supabase/auth-helpers-react"
+
+export default function NewDeployPage() {
+  const router = useRouter()
+  const session = useSession()
+
+  return (
+    <div className="h-screen w-full flex flex-col bg-gradient-to-b from-[#E5EEF4] to-[#D8E5EC] overflow-hidden">
+      {/* Header */}
+      <div className="relative h-[220px] w-full bg-black/70 flex items-center justify-between px-6">
+        {/* Background image */}
+        <Image
+          src="/assets/Backdrops/Earth.png"
+          alt="Cover"
+          fill
+          className="absolute inset-0 object-cover opacity-30"
+        />
+        {/* Foreground content */}
+        <div className="relative z-10 flex items-center gap-4">
+          <div className="w-20 h-20 rounded-full border-2 border-white overflow-hidden">
+            <AvatarGenerator author={session?.user.id || ""} />
+          </div>
+          <div>
+            <h2 className="text-2xl font-bold text-white">Deploy Telescope</h2>
+            <p className="text-sm text-white/80">TESS Mission Interface</p>
+          </div>
+        </div>
+        <div className="relative z-10">
+          <Button
+            variant="outline"
+            className="text-white border-white/70 bg-[#78cce2] hover:bg-white hover:text-[#002439]"
+            onClick={() => router.push("/")}
+          >
+            ← Back
+          </Button>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="flex-1 w-full overflow-y-auto">
+        <DeployTelescopeViewport />
+      </div>
+    </div>
+  )
+};
\ No newline at end of file
diff --git a/app/alpha/page.tsx b/app/alpha/page.tsx
new file mode 100644
index 000000000..2109bc1ee
--- /dev/null
+++ b/app/alpha/page.tsx
@@ -0,0 +1,482 @@
+"use client";
+
+import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
+import { useEffect, useState } from "react";
+import LoginPage from "../auth/LoginModal";
+import { useRouter} from "next/navigation";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { useActivePlanet } from "@/context/ActivePlanet";
+import { subscribeUser, unsubscribeUser, sendNotification } from '../actions'
+// import { AtmosphereStructuresOnPlanet, OrbitalStructuresOnPlanet } from "@/components/Structures/Structures";
+// import EnhancedWeatherEvents from '@/components/(scenes)/mining/enhanced-weather-events';
+import AllAutomatonsOnActivePlanet from "@/components/Structures/Auto/AllAutomatons";
+import { EarthViewLayout } from "@/components/(scenes)/planetScene/layout";
+import Onboarding from "../scenes/onboarding/page";
+import SimpleeMissionGuide from "../tests/singleMissionGuide";
+import AllSatellitesOnActivePlanet from "@/components/Structures/Auto/AllSatellites";
+import LandingSS from "../auth/landing";
+import GameNavbar from "@/components/Layout/Tes";
+import BiomassOnEarth from "@/components/Data/BiomassEarth";
+import NPSPopup from "@/lib/helper/nps-popup";
+import Structures from "@/components/Structures/Structures";
+
+function urlBase64ToUint8Array(base64String: string) {
+  const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
+  const base64 = (base64String + padding).replace(/-/g, "+").replace(/_/g, "/");
+  const rawData = window.atob(base64);
+  const outputArray = new Uint8Array(rawData.length);
+  for (let i = 0; i < rawData.length; ++i) {
+    outputArray[i] = rawData.charCodeAt(i);
+  }
+  return outputArray;
+};
+
+function PushNotificationManager() {
+  const session = useSession();
+  const supabase = useSupabaseClient();
+  const [isSupported, setIsSupported] = useState(false);
+  const [subscription, setSubscription] = useState<PushSubscription | null>(null);
+  const [hasSubscribedBefore, setHasSubscribedBefore] = useState(false);
+  const [message, setMessage] = useState("");
+
+  useEffect(() => {
+    if ("serviceWorker" in navigator && "PushManager" in window) {
+      setIsSupported(true);
+      registerServiceWorker();
+    }
+  }, []);
+
+  useEffect(() => {
+    if (session?.user?.id) {
+      checkExistingSubscription(session.user.id);
+    }
+  }, [session]);
+
+  async function checkExistingSubscription(userId: string) {
+    const { data, error } = await supabase
+      .from("profiles")
+      .select("push_subscription")
+      .eq("id", userId)
+      .single();
+
+    if (error) {
+      console.error("Failed to fetch subscription info:", error);
+      return;
+    }
+
+    if (data?.push_subscription) {
+      setHasSubscribedBefore(true);
+    }
+  }
+
+  async function registerServiceWorker() {
+    const registration = await navigator.serviceWorker.register("/sw.js", {
+      scope: "/",
+      updateViaCache: "none",
+    });
+
+    const sub = await registration.pushManager.getSubscription();
+    setSubscription(sub);
+  }
+
+  async function subscribeToPush() {
+    const registration = await navigator.serviceWorker.ready;
+
+    const sub = await registration.pushManager.subscribe({
+      userVisibleOnly: true,
+      applicationServerKey: urlBase64ToUint8Array(process.env.VAPID_PUBLIC_KEY!),
+    });
+
+    const subJSON = sub.toJSON();
+
+    setSubscription(sub);
+
+    const { error } = await supabase
+      .from("profiles")
+      .update({ push_subscription: subJSON })
+      .eq("id", session?.user.id);
+
+    if (error) console.error("Error saving subscription:", error);
+    else setHasSubscribedBefore(true);
+  }
+
+  async function unsubscribeFromPush() {
+    await subscription?.unsubscribe();
+    setSubscription(null);
+
+    const { error } = await supabase
+      .from("profiles")
+      .update({ push_subscription: null })
+      .eq("id", session?.user.id);
+
+    if (error) console.error("Error removing subscription:", error);
+    else setHasSubscribedBefore(false);
+  }
+
+  async function sendTestNotification() {
+    if (!session) return;
+
+    try {
+      const res = await fetch("/api/send-push", {
+        method: "POST",
+        body: JSON.stringify({ userId: session.user.id, message }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      const json = await res.json();
+      console.log("Push response:", res.status, json);
+
+      if (!res.ok) {
+        alert(`Push failed: ${json?.error || res.status}`);
+      }
+    } catch (err) {
+      console.error("Fetch error:", err);
+      alert("Network or server error");
+    }
+
+    setMessage("");
+  }
+
+  if (!isSupported) {
+    return <p>Push notifications are not supported in this browser.</p>;
+  };
+
+  return (
+    <div className="text-white space-y-4 text-base font-light">
+
+      {subscription || hasSubscribedBefore ? (
+        <>
+          {/* <p className="text-white-400">You are subscribed to push notifications.</p> */}
+
+          {/* <button
+            onClick={unsubscribeFromPush}
+            className="px-4 py-2 rounded-lg bg-red-500 hover:bg-red-600 transition"
+          >
+            Unsubscribe
+          </button> */}
+
+          {/* <input
+            type="text"
+            placeholder="Enter notification message"
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            className="w-full px-3 py-2 border border-gray-500 rounded-md bg-transparent placeholder-gray-400 text-white"
+          /> */}
+
+          {/* <button
+            onClick={sendTestNotification}
+            className="px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 transition"
+          >
+            Send Test Notification
+          </button> */}
+        </>
+      ) : (
+        <>
+          {/* <p className="text-yellow-400">You are not subscribed to push notifications.</p> */}
+          <button
+            onClick={subscribeToPush}
+            className="px-4 py-2 rounded-lg bg-green-600 hover:bg-green-700 transition"
+          >
+            Subscribe
+          </button>
+        </>
+      )}
+    </div>
+  );
+};
+
+function InstallPrompt() {
+  const [isIOS, setIsIOS] = useState(false);
+  const [isStandalone, setIsStandalone] = useState(false);
+  const [deferredPrompt, setDeferredPrompt] = useState<any>(null);
+
+  useEffect(() => {
+    setIsIOS(/iPad|iPhone|iPod/.test(navigator.userAgent) && !(window as any).MSStream);
+    setIsStandalone(window.matchMedia('(display-mode: standalone)').matches);
+  
+    const handler = (e: any) => {
+      // Prevent default AND store the prompt
+      e.preventDefault();
+      console.log("beforeinstallprompt event captured");
+      setDeferredPrompt(e);
+    };
+  
+    window.addEventListener("beforeinstallprompt", handler);
+  
+    return () => window.removeEventListener("beforeinstallprompt", handler);
+  }, []);  
+
+  const installApp = () => {
+    if (deferredPrompt) {
+      console.log("Prompting user to install");
+      deferredPrompt.prompt();
+  
+      deferredPrompt.userChoice.then((choiceResult: any) => {
+        console.log("User choice result:", choiceResult);
+        if (choiceResult.outcome === "accepted") {
+          console.log("User accepted the install prompt");
+        } else {
+          console.log("User dismissed the install prompt");
+        }
+        setDeferredPrompt(null);
+      });
+    } else {
+      console.log("No install prompt available");
+    }
+  };
+  
+
+  if (isStandalone) return null;
+
+  return (
+    <div>
+      <h3>Install App</h3>
+      <button onClick={installApp}>Add to Home Screen</button>
+      {isIOS && (
+        <p>
+          On iOS, tap the Share icon <span role="img" aria-label="share">⎋</span> and then
+          "Add to Home Screen" <span role="img" aria-label="add">➕</span>.
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default function Home() {
+  const session = useSession();
+  const supabase = useSupabaseClient();
+
+  const { activePlanet } = useActivePlanet();
+
+  const router = useRouter();
+
+  const [hasRequiredItems, setHasRequiredItems] = useState<boolean | null>(null);
+  const [userClassifications, setUserClassifications] = useState<boolean | null>(false);
+  const [planetData, setPlanetData] = useState<any | null>(null);
+
+  const [showDeployModal, setShowDeployModal] = useState(false);
+  const [showNpsModal, setShowNpsModal] = useState<boolean>(false);
+  const [hasCheckedNps, setHasCheckedNps] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (!session) return;
+
+    const checkInventory = async () => {
+      try {
+        const { data, error } = await supabase
+          .from("inventory")
+          .select("id, quantity")
+          .eq("owner", session.user.id)
+          .in("item", [3105, 3104, 3103])
+          .gt("quantity", 0);
+
+        if (error) throw error;
+        setHasRequiredItems(data.length > 0);
+      } catch (error: any) {
+        console.error("Error checking inventory:", error.message);
+        setHasRequiredItems(false);
+      };
+    };
+
+    const checkClassifications = async () => {
+      try {
+        const { data, error } = await supabase
+          .from("classifications")
+          .select("id")
+          .eq("author", session.user.id);
+
+        const hasClassified = !error && Array.isArray(data) && data.length > 0;
+        setUserClassifications(hasClassified);
+
+        if (hasClassified) {
+          await checkLinkedAnomaliesLastWeek();
+          scheduleNpsCheck();
+        }
+      } catch (error: any) {
+        console.error("Error checking classifications:", error);
+        setUserClassifications(false);
+      }
+    };
+
+    const checkLinkedAnomaliesLastWeek = async () => {
+      const now = new Date();
+      const oneWeekAgo = new Date(now);
+      oneWeekAgo.setDate(now.getDate() - 7);
+      const fromDate = oneWeekAgo.toISOString();
+      const toDate = now.toISOString();
+
+      const { data, error } = await supabase
+        .from("linked_anomalies")
+        .select("id")
+        .eq("author", session.user.id)
+        .gte("date", fromDate)
+        .lte("date", toDate);
+
+      if (error) {
+        console.error("Error checking linked anomalies:", error);
+        return;
+      }
+
+      if (!data || data.length === 0) {
+        setShowDeployModal(true);
+      }
+    };
+
+    const scheduleNpsCheck = () => {
+      if (hasCheckedNps) return;
+
+      const timer = setTimeout(async () => {
+        try {
+          const { data, error } = await supabase
+            .from("nps_surveys")
+            .select("id")
+            .eq("user_id", session.user.id);
+
+          if (!error && Array.isArray(data) && data.length === 0) {
+            setShowNpsModal(true);
+          }
+          setHasCheckedNps(true);
+        } catch (err: any) {
+          console.error("Error checking NPS Survey Status: ", err);
+        }
+      }, 15000);
+
+      return () => clearTimeout(timer);
+    };
+
+    checkInventory();
+    checkClassifications();
+  }, [session, supabase]);
+
+  useEffect(() => {
+    if (!activePlanet) return;
+
+    async function fetchPlanetData() {
+      try {
+        const { data, error } = await supabase
+          .from("anomalies")
+          .select("*")
+          .eq("id", activePlanet.id);
+
+        if (error) {
+          console.error("Error fetching planet data: ", error);
+        } else {
+          setPlanetData(data[0]);
+        }
+      } catch (error: any) {
+        console.error("Error fetching planet data: ", error);
+      }
+    }
+
+    fetchPlanetData();
+  }, [activePlanet, supabase]);
+
+  if (!session) {
+    return <LandingSS />;
+  }
+
+  if (hasRequiredItems === null) {
+    return <div>Loading...</div>;
+  }
+
+  if (!hasRequiredItems) {
+    return <Onboarding />;
+  }
+
+  function handleDeployConfirm() {
+    setShowDeployModal(false);
+    router.push("/deploy");
+  };
+
+  async function handleDeployCancel() {
+    setShowDeployModal(false);
+    try {
+      const { error } = await supabase.from("linked_anomalies").insert([
+        {
+          author: session?.user.id,
+          anomaly_id: 1,
+          automaton: "Empty/Cancel",
+        },
+      ]);
+
+      if (error) {
+        console.error("Error inserting linked anomaly:", error.message);
+      }
+    } catch (error: any) {
+      console.error("Unexpected error inserting linked anomaly:", error.message);
+    }
+  }
+
+  return (
+    <EarthViewLayout>
+      <div className="w-full">
+        <GameNavbar />
+        <div className="flex flex-row space-y-4"></div>
+        <div className="py-3">
+          <div className="py-6 my-10 px-6">
+            <p className="text-[#2C4F65]">Temperature:</p>
+            <p className="text-blue-200">{planetData?.temperatureEq} K</p>
+            <p className="text-[#2C4F65]">Humidity:</p>
+            <p className="text-blue-200">{planetData?.humidity} K</p>
+            {planetData?.id === 30 && <BiomassOnEarth />}
+          </div>
+          {showNpsModal && (
+            <NPSPopup
+              userId={session.user.id}
+              isOpen={true}
+              onClose={() => setShowNpsModal(false)}
+            />
+          )}
+          {showDeployModal && (
+            <Dialog open={showDeployModal} onOpenChange={setShowDeployModal}>
+              <DialogContent
+                style={{
+                  background:
+                    "linear-gradient(135deg, rgba(191, 223, 245, 0.9), rgba(158, 208, 218, 0.85)",
+                  color: "#2E3440",
+                }}
+              >
+                <DialogHeader>
+                  <DialogTitle className="text-nord-aurora-5">
+                    No Anomaly Records Last Week
+                  </DialogTitle>
+                  <DialogDescription className="text-nord-frost-4">
+                    You have no anomaly records from the previous week. Would you
+                    like to deploy your automatons to gather more data?
+                  </DialogDescription>
+                </DialogHeader>
+                <DialogFooter className="flex justify-end space-x-4">
+                  <Button
+                    variant="outline"
+                    onClick={handleDeployCancel}
+                    className="text-nord-frost-3 border-nord-frost-3 hover:bg-nord-frost-1"
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    onClick={handleDeployConfirm}
+                    className="bg-nord-aurora-6 hover:bg-nord-aurora-5 text-white"
+                  >
+                    Deploy Automatons
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+          )}
+          <center>
+            {/* <OrbitalStructuresOnPlanet /> */}
+          </center>
+        </div>
+      </div>
+      <Structures />
+      {!userClassifications && (
+        <div className="w-full py-2">
+          <SimpleeMissionGuide />
+        </div>
+      )}
+    </EarthViewLayout>
+  );
+};
\ No newline at end of file
diff --git a/app/api/gameplay/inventory/route.ts b/app/api/gameplay/inventory/route.ts
index 93cba6678..fa324b2b0 100644
--- a/app/api/gameplay/inventory/route.ts
+++ b/app/api/gameplay/inventory/route.ts
@@ -75,6 +75,14 @@ const inventoryItems: InventoryItem[] = [
     ItemCategory: "Structure",
     locationType: 'Atmosphere',
   },
+  {
+    id: 3107,
+    name: "SeisCAM",
+    description: "Explore the surfaces of exoplanets",
+    icon_url: '/assets/Items/miningstation.png',
+    ItemCategory: "Structure",
+    locationType: "Surface",
+  },
   {
     id: 3106, 
     name: "Research Station",
diff --git a/app/api/gameplay/milestones/route.ts b/app/api/gameplay/milestones/route.ts
index 76cd04646..cefa2f9f3 100644
--- a/app/api/gameplay/milestones/route.ts
+++ b/app/api/gameplay/milestones/route.ts
@@ -2,13 +2,144 @@ import { Telescope } from "lucide-react";
 import { NextRequest, NextResponse } from "next/server";
 
 const milestones = [
+    {
+        weekStart: '2025-07-13',
+        data: [
+            {
+                name: "Verify other users' discoveries and get some of the earnings in return",
+                structure: "Telescope",
+                group: "Astronomy",
+                icon: 'Telescope',
+                extendedDescription: ',',
+                xp: 1,
+                completionInfo: '',
+                rewardInfo: '',
+                table: 'votes',
+                field: 'vote_type',
+                value: 'up',
+                requiredCount: 2,
+            },
+            {
+                name: "Contribute to someone else's discovery by commenting",
+                structure: "Telescope",
+                group: "Astronomy",
+                icon: "Telescope",
+                extendedDescription: '',
+                xp: 1,
+                completionInfo: '',
+                rewardInfo: '',
+                table: 'comments',
+                field: 'surveyor',
+                value: 'TRUE',
+                requiredCount: 1,
+            },
+        ],
+    },
+    {
+        weekStart: '2025-07-06',
+        data: [
+            {
+                name: "Verify other users' discoveries and get some of the earnings in return",
+                structure: "Telescope",
+                group: "Astronomy",
+                icon: 'Telescope',
+                extendedDescription: ',',
+                xp: 1,
+                completionInfo: '',
+                rewardInfo: '',
+                table: 'votes',
+                field: 'vote_type',
+                value: 'up',
+                requiredCount: 2,
+            },
+            {
+                name: "Contribute to someone else's discovery by commenting",
+                structure: "Telescope",
+                group: "Astronomy",
+                icon: "Telescope",
+                extendedDescription: '',
+                xp: 1,
+                completionInfo: '',
+                rewardInfo: '',
+                table: 'comments',
+                field: 'surveyor',
+                value: 'TRUE',
+                requiredCount: 1,
+            },
+        ],
+    },
+    {
+        weekStart: '2025-06-29',
+        data: [
+            {
+                name: "Contribute to someone else's discovery by commenting",
+                structure: "Telescope",
+                group: "Astronomy",
+                icon: "Telescope",
+                extendedDescription: '',
+                xp: 1,
+                completionInfo: '',
+                rewardInfo: '',
+                table: 'comments',
+                field: 'surveyor',
+                value: 'TRUE',
+                requiredCount: 1,
+            },
+            {
+                name: "Train our automatons - discover 3 obstacles",
+                structure: "WeatherBalloon",
+                group: "Meteorology",
+                icon: "SnowflakeIcon",
+                extendedDescription: '',
+                xp: 3,
+                completionInfo: '',
+                rewardInfo: '',
+                table: 'classifications',
+                field: 'classificationtype',
+                value: 'automaton-aiForMars',
+                requiredCount: 3,
+            },
+        ],
+    },
+            {
+        weekStart: '2025-06-15',
+        data: [
+            {
+                name: 'Propose 3 planet candidates',
+                structure: "Telescope",
+                group: 'Astronomy',
+                icon: "Telescope",
+                extendedDescription: '',
+                xp: 3,
+                completionInfo: '',
+                rewardInfo: '',
+                table: "classifications",
+                field: "classificationtype",
+                value: "planet",
+                requiredCount: 3,
+            },
+            {
+                name: 'Review satellite data',
+                structure: "WeatherBalloon",
+                group: 'Meteorology',
+                icon: "SnowflakeIcon",
+                extendedDescription: '',
+                xp: 2,
+                completionInfo: '',
+                rewardInfo: '',
+                table: "classifications",
+                field: "classificationtype",
+                value: "satellite-planetFour",
+                requiredCount: 2,
+            },
+        ],
+    },
         {
-        weekStart: '2025-05-25',
+        weekStart: '2025-06-06',
         data: [
             {
                 name: 'Propose 5 planet candidates',
                 structure: "Telescope",
-                // group: 'Meteorology',
                 group: 'Astronomy',
                 icon: "Telescope",
                 extendedDescription: '',
@@ -339,8 +470,18 @@ const communityMilestones = [
 ];
 
 export async function GET(req: NextRequest) {
+    const today = new Date();
+    
+    // Sort milestones descending by weekStart
+    const sortedMilestones = milestones
+        .map(m => ({ ...m, weekStartDate: new Date(m.weekStart) }))
+        .filter(m => m.weekStartDate <= today)
+        .sort((a, b) => b.weekStartDate.getTime() - a.weekStartDate.getTime());
+
+    const mostRecentMilestone = sortedMilestones[0];
+
     return NextResponse.json({
-        playerMilestones: milestones,
-        communityMilestones: communityMilestones,
+        playerMilestones: mostRecentMilestone ? [mostRecentMilestone] : [],
+        communityMilestones: communityMilestones, // or filter this too if needed
     });
 };
\ No newline at end of file
diff --git a/app/api/send-push/route.ts.rb b/app/api/send-push/route.ts.rb
new file mode 100644
index 000000000..9c15dd602
--- /dev/null
+++ b/app/api/send-push/route.ts.rb
@@ -0,0 +1,84 @@
+import webpush from "web-push";
+import { createClient } from "@supabase/supabase-js";
+import { NextResponse } from "next/server";
+
+// Initialize Supabase client (server-side)
+const supabase = createClient(
+  process.env.NEXT_PUBLIC_SUPABASE_URL!,
+  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+);
+
+// Set up VAPID details
+webpush.setVapidDetails(
+  "mailto:test@domain.com",
+  process.env.VAPID_PUBLIC_KEY!,
+  process.env.VAPID_PRIVATE_KEY!
+);
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+
+    const userIds = body.userIds || (body.userId ? [body.userId] : null);
+    const message = body.message;
+
+    if (!Array.isArray(userIds) || !message) { 
+      return NextResponse.json(
+        { error: "Invalid input: userIds must be an array and message must be a string." },
+        { status: 400 },
+      );
+    };
+
+    // Fetch user push subscriptions
+    const { data: profiles, error } = await supabase
+      .from("profiles")
+      .select("id, push_subscription")
+      .in("id", userIds);
+
+    if (error) {
+      console.error("Error fetching user subscriptions:", error);
+      return NextResponse.json({ error: "Database query failed" }, { status: 500 });
+    };
+
+    const results = [];
+
+    for (const profile of profiles) {
+      const { id, push_subscription } = profile;
+
+      if (!push_subscription) {
+        results.push({ id, success: false, error: "No subscription" });
+        continue;
+      };
+
+      let subscription;
+      try {
+        subscription =
+          typeof push_subscription === "string"
+            ? JSON.parse(push_subscription)
+            : push_subscription;
+      } catch (parseErr) {
+        console.error(`Failed to parse push_subscription for user ${id}`, parseErr);
+        results.push({ id, success: false, error: "Invalid subscription format" });
+        continue;
+      };
+
+      const payload = JSON.stringify({
+        title: message,
+        message,
+      });
+
+      try {
+        await webpush.sendNotification(subscription, payload);
+        results.push({ id, success: true });
+      } catch (pushErr) {
+        console.error(`Push error for user ${id}:`, pushErr);
+        results.push({ id, success: false, error: (pushErr as Error).message });
+      }
+    }
+
+    return NextResponse.json({ results });
+  } catch (err) {
+    console.error("Unexpected error:", err);
+    return NextResponse.json({ error: "Unexpected server error" }, { status: 500 });
+  }
+};
\ No newline at end of file
diff --git a/app/auth/landing.tsx b/app/auth/landing.tsx
index 29cbe2790..522b5043b 100644
--- a/app/auth/landing.tsx
+++ b/app/auth/landing.tsx
@@ -168,7 +168,7 @@ export default function LandingSS() {
                         size="lg"
                         className="bg-blue-300 text-white hover:bg-aqua-400 hover:translate-y-[-2px] hover:translate-x-[2px] text-lg px-8 py-6 rounded-md border-4 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] transition-all hover:shadow-none"
                     >   
-                        Login
+                        Sign Up/Log In
                     </Button>
                 </Link>
                 <Button
diff --git a/app/auth/register/page.tsx b/app/auth/register/page.tsx
index dde0c78dd..59496193d 100644
--- a/app/auth/register/page.tsx
+++ b/app/auth/register/page.tsx
@@ -27,4 +27,4 @@ const Register = () => {
     );
 };
 
-export default Register;
+export default Register;
\ No newline at end of file
diff --git a/app/next/[id]/page.tsx b/app/next/[id]/page.tsx
new file mode 100644
index 000000000..c9d516a23
--- /dev/null
+++ b/app/next/[id]/page.tsx
@@ -0,0 +1,13 @@
+import ClientClassificationPage from "@/components/Projects/(classifications)/NextScene";
+
+type Props = {
+  params: { id: string };
+};
+
+export default function Page({ params }: Props) {
+  const { id } = params;
+
+  if (!id) return null; // or trigger notFound();
+
+  return <ClientClassificationPage id={id} />;
+};
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index 4b086238e..1e590953f 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2,455 +2,362 @@
 
 import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import { useEffect, useState } from "react";
-import LoginPage from "./auth/LoginModal";
-import { useRouter} from "next/navigation";
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
-import { useActivePlanet } from "@/context/ActivePlanet";
-import { subscribeUser, unsubscribeUser, sendNotification } from './actions'
-import StructuresOnPlanet, { AtmosphereStructuresOnPlanet, OrbitalStructuresOnPlanet } from "@/components/Structures/Structures";
-// import EnhancedWeatherEvents from '@/components/(scenes)/mining/enhanced-weather-events';
-import AllAutomatonsOnActivePlanet from "@/components/Structures/Auto/AllAutomatons";
-import { EarthViewLayout } from "@/components/(scenes)/planetScene/layout";
-import Onboarding from "./scenes/onboarding/page";
-import SimpleeMissionGuide from "./tests/singleMissionGuide";
-import AllSatellitesOnActivePlanet from "@/components/Structures/Auto/AllSatellites";
+import { subDays } from "date-fns";
+import Link from "next/link";
+import { Telescope } from "lucide-react";
+
+import ActivityHeader from "@/components/(scenes)/deploy/ActivityHeader";
 import LandingSS from "./auth/landing";
+import NPSPopup from "@/lib/helper/nps-popup";
+import RecentActivity from "@/components/Data/RecentActivity";
+import RecentDiscoveries from "@/components/Data/RecentDiscoveries";
+import TipsPanel from "@/components/Structures/Missions/Milestones/NextStepsTips";
+import CompleteProfileForm from "@/components/Account/FinishProfile";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import WeeklyBanner from "@/components/ui/update-banner";
 import GameNavbar from "@/components/Layout/Tes";
-import BiomassOnEarth from "@/components/Data/BiomassEarth";
-
-function urlBase64ToUint8Array(base64String: string) {
-  const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
-  const base64 = (base64String + padding).replace(/-/g, "+").replace(/_/g, "/");
-  const rawData = window.atob(base64);
-  const outputArray = new Uint8Array(rawData.length);
-  for (let i = 0; i < rawData.length; ++i) {
-    outputArray[i] = rawData.charCodeAt(i);
-  }
-  return outputArray;
-};
-
-function PushNotificationManager() {
-  const session = useSession();
+
+export interface LinkedAnomaly {
+  id: number;
+  anomaly_id: number;
+  date: string;
+  anomaly: {
+    content: string | null;
+    anomalytype: string | null;
+    anomalySet: string | null;
+  } | null;
+}
+
+interface CommentVote {
+  type: "comment" | "vote";
+  created_at: string;
+  content?: string;
+  vote_type?: string;
+  classification_id: number;
+}
+
+export interface Classification {
+  id: number;
+  classificationtype: string | null;
+  content: string | null;
+  created_at: string;
+  anomaly?: number;
+}
+
+interface OtherClassification {
+  id: number;
+  classificationtype: string | null;
+  content: string | null;
+  author: string;
+  created_at: string;
+}
+
+interface Profile {
+  id: string;
+  username: string | null;
+  full_name: string | null;
+  classificationPoints: number | null;
+}
+
+export default function ActivityPage() {
   const supabase = useSupabaseClient();
-  const [isSupported, setIsSupported] = useState(false);
-  const [subscription, setSubscription] = useState<PushSubscription | null>(null);
-  const [hasSubscribedBefore, setHasSubscribedBefore] = useState(false);
-  const [message, setMessage] = useState("");
+  const session = useSession();
 
-  useEffect(() => {
-    if ("serviceWorker" in navigator && "PushManager" in window) {
-      setIsSupported(true);
-      registerServiceWorker();
-    }
-  }, []);
+  const [linkedAnomalies, setLinkedAnomalies] = useState<LinkedAnomaly[]>([]);
+  const [activityFeed, setActivityFeed] = useState<CommentVote[]>([]);
+  const [profile, setProfile] = useState<Profile | null>(null);
+  const [classifications, setClassifications] = useState<Classification[]>([]);
+  const [otherClassifications, setOtherClassifications] = useState<OtherClassification[]>([]);
+  const [landmarksExpanded, setLandmarksExpanded] = useState(false);
+  const [showNpsModal, setShowNpsModal] = useState(false);
+  const [hasCheckedNps, setHasCheckedNps] = useState(false);
+  const [showTipsPanel, setShowTipsPanel] = useState(false);
+  const [showProfileModal, setShowProfileModal] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
 
   useEffect(() => {
-    if (session?.user?.id) {
-      checkExistingSubscription(session.user.id);
-    }
-  }, [session]);
-
-  async function checkExistingSubscription(userId: string) {
-    const { data, error } = await supabase
-      .from("profiles")
-      .select("push_subscription")
-      .eq("id", userId)
-      .single();
-
-    if (error) {
-      console.error("Failed to fetch subscription info:", error);
-      return;
-    }
-
-    if (data?.push_subscription) {
-      setHasSubscribedBefore(true);
-    }
-  }
-
-  async function registerServiceWorker() {
-    const registration = await navigator.serviceWorker.register("/sw.js", {
-      scope: "/",
-      updateViaCache: "none",
-    });
-
-    const sub = await registration.pushManager.getSubscription();
-    setSubscription(sub);
-  }
-
-  async function subscribeToPush() {
-    const registration = await navigator.serviceWorker.ready;
-
-    const sub = await registration.pushManager.subscribe({
-      userVisibleOnly: true,
-      applicationServerKey: urlBase64ToUint8Array(process.env.VAPID_PUBLIC_KEY!),
-    });
-
-    const subJSON = sub.toJSON();
-
-    setSubscription(sub);
-
-    const { error } = await supabase
-      .from("profiles")
-      .update({ push_subscription: subJSON })
-      .eq("id", session?.user.id);
-
-    if (error) console.error("Error saving subscription:", error);
-    else setHasSubscribedBefore(true);
-  }
-
-  async function unsubscribeFromPush() {
-    await subscription?.unsubscribe();
-    setSubscription(null);
-
-    const { error } = await supabase
-      .from("profiles")
-      .update({ push_subscription: null })
-      .eq("id", session?.user.id);
-
-    if (error) console.error("Error removing subscription:", error);
-    else setHasSubscribedBefore(false);
-  }
-
-  async function sendTestNotification() {
     if (!session) return;
 
-    try {
-      const res = await fetch("/api/send-push", {
-        method: "POST",
-        body: JSON.stringify({ userId: session.user.id, message }),
-        headers: {
-          "Content-Type": "application/json",
-        },
-      });
-
-      const json = await res.json();
-      console.log("Push response:", res.status, json);
-
-      if (!res.ok) {
-        alert(`Push failed: ${json?.error || res.status}`);
-      }
-    } catch (err) {
-      console.error("Fetch error:", err);
-      alert("Network or server error");
-    }
-
-    setMessage("");
-  }
-
-  if (!isSupported) {
-    return <p>Push notifications are not supported in this browser.</p>;
-  };
-
-  return (
-    <div className="text-white space-y-4 text-base font-light">
-
-      {subscription || hasSubscribedBefore ? (
-        <>
-          {/* <p className="text-white-400">You are subscribed to push notifications.</p> */}
-
-          {/* <button
-            onClick={unsubscribeFromPush}
-            className="px-4 py-2 rounded-lg bg-red-500 hover:bg-red-600 transition"
-          >
-            Unsubscribe
-          </button> */}
-
-          {/* <input
-            type="text"
-            placeholder="Enter notification message"
-            value={message}
-            onChange={(e) => setMessage(e.target.value)}
-            className="w-full px-3 py-2 border border-gray-500 rounded-md bg-transparent placeholder-gray-400 text-white"
-          /> */}
-
-          {/* <button
-            onClick={sendTestNotification}
-            className="px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 transition"
-          >
-            Send Test Notification
-          </button> */}
-        </>
-      ) : (
-        <>
-          {/* <p className="text-yellow-400">You are not subscribed to push notifications.</p> */}
-          <button
-            onClick={subscribeToPush}
-            className="px-4 py-2 rounded-lg bg-green-600 hover:bg-green-700 transition"
-          >
-            Subscribe
-          </button>
-        </>
-      )}
-    </div>
-  );
-};
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 10);
+    };
 
-function InstallPrompt() {
-  const [isIOS, setIsIOS] = useState(false);
-  const [isStandalone, setIsStandalone] = useState(false);
-  const [deferredPrompt, setDeferredPrompt] = useState<any>(null);
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [session]);
 
   useEffect(() => {
-    setIsIOS(/iPad|iPhone|iPod/.test(navigator.userAgent) && !(window as any).MSStream);
-    setIsStandalone(window.matchMedia('(display-mode: standalone)').matches);
-  
-    const handler = (e: any) => {
-      // Prevent default AND store the prompt
-      e.preventDefault();
-      console.log("beforeinstallprompt event captured");
-      setDeferredPrompt(e);
-    };
-  
-    window.addEventListener("beforeinstallprompt", handler);
-  
-    return () => window.removeEventListener("beforeinstallprompt", handler);
-  }, []);  
-
-  const installApp = () => {
-    if (deferredPrompt) {
-      console.log("Prompting user to install");
-      deferredPrompt.prompt();
-  
-      deferredPrompt.userChoice.then((choiceResult: any) => {
-        console.log("User choice result:", choiceResult);
-        if (choiceResult.outcome === "accepted") {
-          console.log("User accepted the install prompt");
-        } else {
-          console.log("User dismissed the install prompt");
-        }
-        setDeferredPrompt(null);
-      });
-    } else {
-      console.log("No install prompt available");
-    }
-  };
-  
-
-  if (isStandalone) return null;
+    if (!session) return;
 
-  return (
-    <div>
-      <h3>Install App</h3>
-      <button onClick={installApp}>Add to Home Screen</button>
-      {isIOS && (
-        <p>
-          On iOS, tap the Share icon <span role="img" aria-label="share">⎋</span> and then
-          "Add to Home Screen" <span role="img" aria-label="add">➕</span>.
-        </p>
-      )}
-    </div>
-  );
-};
+    const fetchData = async () => {
+      const userId = session.user.id;
 
-export default function Home() {
-  const session = useSession();
-  const supabase = useSupabaseClient();
-  const { activePlanet } = useActivePlanet();
-  const router = useRouter();
+      const { data: profileData } = await supabase
+        .from("profiles")
+        .select("id, username, full_name, classificationPoints")
+        .eq("id", userId)
+        .maybeSingle();
+      setProfile(profileData);
 
-  const [hasRequiredItems, setHasRequiredItems] = useState<boolean | null>(null);
-  const [userClassifications, setUserClassifications] = useState<boolean | null>(false);
-  const [planetData, setPlanetData] = useState<any | null>(null);
+      const { data: myClassifications } = await supabase
+        .from("classifications")
+        .select("id, classificationtype, content, created_at, anomaly")
+        .eq("author", userId)
+        .order("created_at", { ascending: false })
+        .limit(4);
+      setClassifications(myClassifications ?? []);
 
-  const [showDeployModal, setShowDeployModal] = useState(false);
+      const classifiedAnomalyIds = new Set(myClassifications?.map((c) => c.anomaly));
 
-  useEffect(() => {
-    if (!session) return;
+      const { data: rawLinked } = await supabase
+        .from("linked_anomalies")
+        .select(`
+          id,
+          anomaly_id,
+          date,
+          anomaly:anomaly_id(
+            content,
+            anomalytype,
+            anomalySet
+          )
+        `)
+        .eq("author", userId)
+        .order("date", { ascending: false });
+
+      const linked = (rawLinked ?? []) as unknown as LinkedAnomaly[];
+      const filteredLinked = linked.filter((a) => !classifiedAnomalyIds.has(a.anomaly_id));
+      setLinkedAnomalies(filteredLinked);
+
+      const oneWeekAgo = subDays(new Date(), 7).toISOString();
+
+      const { data: comments } = await supabase
+        .from("comments")
+        .select("id")
+        .eq("author", userId);
 
-    const checkInventory = async () => {
-      try {
-        const { data, error } = await supabase
-          .from("inventory")
-          .select("id, quantity")
-          .eq("owner", session.user.id)
-          .in("item", [3105, 3104, 3103])
-          .gt("quantity", 0);
-
-        if (error) throw error;
-
-        setHasRequiredItems(data.length > 0);
-      } catch (error: any) {
-        console.error("Error checking inventory:", error.message);
-        setHasRequiredItems(false);
-      }
+      const { data: votes } = await supabase
+        .from("votes")
+        .select("id")
+        .eq("user_id", userId);
+
+      const hasInteracted = (comments?.length ?? 0) > 0 || (votes?.length ?? 0) > 0;
+      setShowTipsPanel(!hasInteracted);
+
+      const { data: commentDetails } = await supabase
+        .from("comments")
+        .select("created_at, content, classification_id")
+        .in("classification_id", myClassifications?.map((c) => c.id) ?? [])
+        .gte("created_at", oneWeekAgo);
+
+      const { data: voteDetails } = await supabase
+        .from("votes")
+        .select("created_at, vote_type, classification_id")
+        .in("classification_id", myClassifications?.map((c) => c.id) ?? [])
+        .gte("created_at", oneWeekAgo);
+
+      const allActivity: CommentVote[] = [];
+      if (commentDetails) allActivity.push(...commentDetails.map((c) => ({ type: "comment" as const, ...c })));
+      if (voteDetails) allActivity.push(...voteDetails.map((v) => ({ type: "vote" as const, ...v })));
+
+      setActivityFeed(
+        allActivity.sort(
+          (a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+        )
+      );
+
+      const { data: others } = await supabase
+        .from("classifications")
+        .select("id, classificationtype, content, author, created_at")
+        .neq("author", userId)
+        .order("created_at", { ascending: false })
+        .limit(20);
+      setOtherClassifications(others ?? []);
     };
 
-    const checkClassifications = async () => {
-      try {
+    const scheduleNpsCheck = () => {
+      if (hasCheckedNps) return;
+      const timer = setTimeout(async () => {
         const { data, error } = await supabase
-          .from("classifications")
-          .select("*")
-          .eq("author", session.user.id);
-
-        if (error) {
-          setUserClassifications(false);
-        } else {
-          setUserClassifications(data && data.length > 0);
-        }
-      } catch (error: any) {
-        console.error(error);
-      }
-    };
-
-    const checkLinkedAnomaliesLastWeek = async () => {
-      const now = new Date();
-      const oneWeekAgo = new Date(now);
-      oneWeekAgo.setDate(now.getDate() - 7);
-      const fromDate = oneWeekAgo.toISOString();
-      const toDate = now.toISOString();
+          .from("nps_surveys")
+          .select("id")
+          .eq("user_id", session.user.id);
 
-      const { data, error } = await supabase
-        .from("linked_anomalies")
-        .select("id")
-        .eq("author", session.user.id)
-        .gte("date", fromDate)
-        .lte("date", toDate);
-
-      if (error) {
-        console.error("Error checking linked anomalies:", error);
-        return;
-      }
-
-      if (!data || data.length === 0) {
-        setShowDeployModal(true);
-      }
+        if (!error && Array.isArray(data) && data.length === 0) {
+          setShowNpsModal(true);
+        }
+        setHasCheckedNps(true);
+      }, 15000);
+      return () => clearTimeout(timer);
     };
 
-    checkClassifications();
-    checkInventory();
-    checkLinkedAnomaliesLastWeek();
+    fetchData();
+    scheduleNpsCheck();
   }, [session, supabase]);
 
-  useEffect(() => {
-    if (!activePlanet) return;
+  if (!session) return <LandingSS />;
 
-    async function fetchPlanetData() {
-      try {
-        const { data, error } = await supabase
-          .from("anomalies")
-          .select("*")
-          .eq("id", activePlanet.id);
-
-        if (error) {
-          console.error("Error fetching planet data: ", error);
-        } else {
-          setPlanetData(data[0]);
-        }
-      } catch (error: any) {
-        console.error("Error fetching planet data: ", error);
-      }
-    }
-
-    fetchPlanetData();
-  }, [activePlanet, supabase]);
-
-  if (!session) {
-    return <LandingSS />;
-  }
-
-  if (hasRequiredItems === null) {
-    return <div>Loading...</div>;
-  }
-
-  if (!hasRequiredItems) {
-    return <Onboarding />;
-  }
-
-  function handleDeployConfirm() {
-    setShowDeployModal(false);
-    router.push("/deploy");
-  }
-
-  async function handleDeployCancel() {
-    setShowDeployModal(false);
-    try {
-      const { error } = await supabase.from("linked_anomalies").insert([
-        {
-          author: session?.user.id,
-          anomaly_id: 1,
-          automaton: "Empty/Cancel"
-        },
-      ]);
-
-      if (error) {
-        console.error("Error inserting linked anomaly:", error.message);
-      }
-    } catch (error: any) {
-      console.error("Unexpected error inserting linked anomaly:", error.message);
-    }
-  }
+  const needsProfileSetup = !profile?.username || !profile?.full_name;
 
   return (
-    <EarthViewLayout>
-      <div className="w-full">
-        <GameNavbar />
-        <div className="flex flex-row space-y-4"></div>
-        <div className="py-3">
-          <div className="py-6 my-10 px-6">
-            <p className="text-[#2C4F65]">Temperature:</p>
-            <p className="text-blue-200">{planetData?.temperatureEq} K</p>
-            <p className="text-[#2C4F65]">Humidity:</p>
-            <p className="text-blue-200">{planetData?.humidity} K</p>
-            {planetData?.id === 30 && <BiomassOnEarth />}
-          </div>
-          {showDeployModal && (
-            <Dialog open={showDeployModal} onOpenChange={setShowDeployModal}>
-              <DialogContent
+    <div className="min-h-screen w-full flex flex-col items-center overflow-hidden pb-20"
+         style={{
+           background: "var(--color-background)",
+           color: "var(--color-foreground)"
+         }}
+    >
+      <div className="w-full sticky top-0 z-50">
+        <ActivityHeader
+          scrolled={scrolled}
+          landmarksExpanded={landmarksExpanded}
+          onToggleLandmarks={() => setLandmarksExpanded((prev) => !prev)}
+        />
+      </div>
+
+      {scrolled && <GameNavbar />}
+
+      <div className="w-full flex justify-center">
+        <div
+          className={`w-full px-4 py-6 gap-6 ${
+            showTipsPanel
+              ? "flex flex-col lg:flex-row max-w-screen-xl"
+              : "flex flex-col items-center max-w-screen-md"
+          }`}
+        >
+          <main className="w-full space-y-6 z-10 relative">
+            <RecentDiscoveries
+              classifications={classifications}
+              linkedAnomalies={linkedAnomalies}
+            />
+
+            {needsProfileSetup ? (
+              <section
+                className="rounded-2xl p-6 border shadow space-y-4 text-center"
                 style={{
-                  background: "linear-gradient(135deg, rgba(191, 223, 245, 0.9), rgba(158, 208, 218, 0.85)",
-                  color: "#2E3440",
+                  backgroundColor: "var(--color-card)",
+                  color: "var(--color-card-foreground)",
+                  borderColor: "var(--color-border)",
                 }}
               >
-                <DialogHeader>
-                  <DialogTitle className="text-nord-aurora-5">No Anomaly Records Last Week</DialogTitle>
-                  <DialogDescription className="text-nord-frost-4">
-                    You have no anomaly records from the previous week. Would you like to deploy your automatons to gather more data?
-                  </DialogDescription>
-                </DialogHeader>
-                <DialogFooter className="flex justify-end space-x-4">
-                  <Button
-                    variant="outline"
-                    onClick={handleDeployCancel}
-                    className="text-nord-frost-3 border-nord-frost-3 hover:bg-nord-frost-1"
-                  >
-                    Cancel
-                  </Button>
-                  <Button
-                    onClick={handleDeployConfirm}
-                    className="bg-nord-aurora-6 hover:bg-nord-aurora-5 text-white"
-                  >
-                    Deploy Automatons
-                  </Button>
-                </DialogFooter>
-              </DialogContent>
-            </Dialog>
-          )}
-          <center>
-            <OrbitalStructuresOnPlanet />
-          </center>
-        </div>
-      </div>
-      <div className="w-full">
-        <div className="py-2">
-          <center>
-            <PushNotificationManager />
-            <AllSatellitesOnActivePlanet />
-            <AtmosphereStructuresOnPlanet />
-          </center>
+                <h3 className="text-xl font-semibold" style={{ color: "var(--color-primary)" }}>
+                  Finish setting up your account
+                </h3>
+                <p className="text-sm" style={{ color: "var(--color-muted-foreground)" }}>
+                  Unlock Structures, Research, and referral features by completing your profile.
+                </p>
+                <button
+                  onClick={() => setShowProfileModal(true)}
+                  className="mt-4 px-4 py-2 rounded-lg transition"
+                  style={{
+                    backgroundColor: "var(--color-primary)",
+                    color: "var(--color-primary-foreground)"
+                  }}
+                >
+                  Complete your profile
+                </button>
+              </section>
+            ) : (
+              <>
+                <RecentActivity
+                  activityFeed={activityFeed}
+                  otherClassifications={otherClassifications}
+                />
+
+                <section
+                  className="rounded-2xl p-4 border shadow space-y-4"
+                  style={{
+                    backgroundColor: "var(--color-card)",
+                    color: "var(--color-card-foreground)",
+                    borderColor: "var(--color-border)"
+                  }}
+                >
+                  <h3 className="font-semibold text-lg flex items-center gap-2">
+                    <Telescope style={{ color: "var(--color-primary)" }} />
+                    Structures & Research
+                  </h3>
+                  <div className="space-y-4">
+                    <div className="border p-3 rounded-lg"
+                         style={{
+                           backgroundColor: "var(--color-popover)",
+                           borderColor: "var(--color-border)"
+                         }}
+                    >
+                      <div className="flex justify-between items-center">
+                        <div>
+                          <p className="font-medium">Telescope Array</p>
+                          <p className="text-sm" style={{ color: "var(--color-muted-foreground)" }}>
+                            Enhances classification of distant light curves and planet candidates.
+                          </p>
+                        </div>
+                        <Link
+                          href="/activity/deploy"
+                          className="px-3 py-1 rounded text-sm"
+                          style={{
+                            backgroundColor: "var(--color-primary)",
+                            color: "var(--color-primary-foreground)"
+                          }}
+                        >
+                          Deploy
+                        </Link>
+                      </div>
+                    </div>
+
+                    {["Satellites", "Rovers", "Balloons"].map((label) => (
+                      <div
+                        key={label}
+                        className="border p-3 rounded-lg"
+                        style={{
+                          backgroundColor: "var(--color-muted)",
+                          color: "var(--color-muted-foreground)",
+                          borderColor: "var(--color-border)"
+                        }}
+                      >
+                        <p className="font-medium">{label} (Coming Soon)</p>
+                        <p className="text-sm">
+                          {label === "Satellites" && "Will scan magnetic & atmospheric fields."}
+                          {label === "Rovers" && "Explore surface geology and send rich data back."}
+                          {label === "Balloons" && "Float above atmospheres for weather anomaly mapping."}
+                        </p>
+                      </div>
+                    ))}
+                  </div>
+                </section>
+              </>
+            )}
+
+            {showNpsModal && (
+              <NPSPopup
+                userId={session.user.id}
+                isOpen={true}
+                onClose={() => setShowNpsModal(false)}
+              />
+            )}
+          </main>
+
+          {showTipsPanel && <TipsPanel />}
         </div>
       </div>
-      <div className="w-full py-2">
-        <center>
-          <StructuresOnPlanet />
-          <AllAutomatonsOnActivePlanet />
-        </center>
-      </div>
-      {!userClassifications && (
-        <div className="w-full py-2">
-          <SimpleeMissionGuide />
-        </div>
-      )}
-    </EarthViewLayout>
+
+      <Dialog open={showProfileModal} onOpenChange={setShowProfileModal}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle style={{ color: "var(--color-primary)" }}>
+              Complete Your Profile
+            </DialogTitle>
+          </DialogHeader>
+          <CompleteProfileForm onSuccess={() => setShowProfileModal(false)} />
+        </DialogContent>
+      </Dialog>
+
+      <WeeklyBanner
+        message="🚀 The full Star Sailors experience has more projects and deeper mechanics. Feel free to explore—or stay here for a simpler start."
+        buttonLabel="Play"
+        buttonHref="/alpha"
+      />
+    </div>
   );
-};
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/app/planets/[id]/page.tsx b/app/planets/[id]/page.tsx
index b0a46f962..164ab1287 100644
--- a/app/planets/[id]/page.tsx
+++ b/app/planets/[id]/page.tsx
@@ -46,15 +46,15 @@ type FocusView = "planet" | "overview" | "Climate" | "atmosphere" | "exploration
 export type Anomaly = {
   id: number;
   content: string | null;
-  anomalytype: string | null;
-  mass: number | null;
-  radius: number | null;
-  density: number | null;
-  gravity: number | null;
-  temperature: number | null;
-  orbital_period: number | null;
-avatar_url: string | null;
-  created_at: string;
+  anomalytype?: string | null;
+  mass?: number | null;
+  radius?: number | null;
+  density?: number | null;
+  gravity?: number | null;
+  temperature?: number | null;
+  orbital_period?: number | null;
+avatar_url?: string | null;
+  created_at?: string;
 };
 
 export interface AggregatedCloud {
@@ -419,14 +419,14 @@ export default function TestPlanetWrapper() {
 
     const AtmosphereComponent = () => (
         <div className="w-full max-w-4xl bg-black/10 backdrop-blur-sm rounded-xl p-6 text-white mx-auto">
-          {classification?.id !== undefined && (
+          {/* {classification?.id !== undefined && (
             <WeatherEventStatus 
               density={density || 1}
               classificationId={classification.id} 
               biome={dominantBiome || 'RockyHighlands'}
               biomass={biomassScore}
             />
-          )}
+          )} */}
         </div>
     );
 
diff --git a/app/planets/paint/[id]/page.tsx b/app/planets/paint/[id]/page.tsx
new file mode 100644
index 000000000..f31d7190b
--- /dev/null
+++ b/app/planets/paint/[id]/page.tsx
@@ -0,0 +1,148 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useParams, useRouter } from "next/navigation"
+import PlanetViewer from "@/components/Data/Generator/Astronomers/PlanetHunters/planetViewer"
+import { type PlanetConfig, defaultPlanetConfig } from "./planet-config"
+import SettingsPanel from "@/components/Data/Generator/Astronomers/PlanetHunters/SettingsPanel"
+import { useSupabaseClient } from "@supabase/auth-helpers-react"
+import { Button } from "@/components/ui/button"
+import GameNavbar from "@/components/Layout/Tes"
+
+export default function PlanetGeneratorPage() {
+  const router = useRouter()
+  const supabase = useSupabaseClient()
+  const params = useParams()
+  const planetId = params.id as string;
+
+  const [planetConfig, setPlanetConfig] = useState<PlanetConfig>(defaultPlanetConfig)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleConfigChange = (newConfig: Partial<PlanetConfig>) => {
+    setPlanetConfig((prev) => ({ ...prev, ...newConfig }))
+  }
+
+  useEffect(() => {
+    const fetchPlanetData = async () => {
+      if (!planetId) {
+        setError("No planet ID provided.")
+        setLoading(false)
+        return
+      }
+
+      try {
+        const idAsNumber = Number.parseInt(planetId)
+        if (isNaN(idAsNumber)) {
+          throw new Error("Invalid planet ID")
+        }
+
+        const { data, error: fetchError } = await supabase
+          .from("classifications")
+          .select("*")
+          .eq("id", idAsNumber)
+          .single()
+
+        if (fetchError) {
+          throw fetchError
+        }
+
+        if (!data) {
+          throw new Error("Planet not found")
+        }
+
+        let config = data.classificationConfiguration
+
+        // Ensure it's parsed if Supabase returned it as a string
+        if (typeof config === "string") {
+          try {
+            config = JSON.parse(config)
+          } catch (err) {
+            console.warn("Failed to parse classificationConfiguration JSON string:", err)
+            config = {}
+          }
+        }
+
+        if (config?.planetConfiguration) {
+          setPlanetConfig(config.planetConfiguration)
+        } else {
+          console.log("No planetConfiguration found, using default.")
+        }
+
+        setError(null)
+      } catch (err) {
+        console.error("Error fetching planet data:", err)
+        setError(err instanceof Error ? err.message : "Failed to load planet data")
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchPlanetData()
+  }, [planetId, supabase])
+
+  if (loading) {
+    return (
+      <div className="w-full h-screen flex items-center justify-center bg-black text-white">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-white mb-4"></div>
+          <p>Loading planet data...</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="w-full h-screen flex items-center justify-center bg-black text-white">
+        <div className="text-center">
+          <h1 className="text-2xl font-bold mb-4">Error</h1>
+          <p className="text-red-400 mb-4">{error}</p>
+          <button
+            onClick={() => window.location.reload()}
+            className="px-4 py-2 bg-slate-800 rounded hover:bg-slate-700"
+          >
+            Retry
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="w-full h-screen overflow-hidden">
+      <GameNavbar />
+      <div className="flex flex-col md:flex-row w-full h-full">
+        {/* Planet Viewer */}
+        <div className="w-full md:flex-1 h-1/2 md:h-full">
+          <PlanetViewer planetConfig={planetConfig} onConfigChange={handleConfigChange} />
+        </div>
+
+        {/* Settings Panel */}
+        <div className="w-full md:w-[400px] h-1/2 md:h-full border-t md:border-t-0 md:border-l border-gray-200 bg-slate-900 overflow-y-auto">
+          <div className="p-4">
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-xl font-bold text-slate-100">Planet Settings</h2>
+              <span className="text-slate-400 text-sm">ID: {planetId}</span>
+            </div>
+            <SettingsPanel
+              planetConfig={planetConfig}
+              onChange={handleConfigChange}
+              classificationId={Number.parseInt(planetId)}
+            />
+            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 pt-4 border-t border-[#D8DEE9] pb-4">
+              <div className="flex flex-col sm:flex-row gap-3">
+                <Button variant="outline" onClick={() => router.push(`/structures/telescope`)}>
+                  🧬 Back to Telescope
+                </Button>
+                <Button variant="ghost" onClick={() => router.push("/")}>
+                  🏠 Home
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/app/planets/paint/[id]/planet-config.ts b/app/planets/paint/[id]/planet-config.ts
new file mode 100644
index 000000000..6f7e28513
--- /dev/null
+++ b/app/planets/paint/[id]/planet-config.ts
@@ -0,0 +1,451 @@
+export interface PlanetConfig {
+  type: "terrestrial" | "gaseous"
+  seed: number
+  radius: number
+  temperature: number // Now in Kelvin
+  biomass: number
+  mass: number
+  terrainRoughness: number
+  liquidHeight: number
+  volcanicActivity: number
+  continentSize: number
+  continentCount: number
+  noiseScale: number
+  debugMode?: boolean
+  visibleTerrains: {
+    ocean: boolean
+    beach: boolean
+    lowland: boolean
+    midland: boolean
+    highland: boolean
+    mountain: boolean
+    snow: boolean
+  }
+  colors: {
+    atmosphere: string
+    ocean: string
+    oceanPattern: string
+    beach: string
+    lowland: string
+    midland: string
+    highland: string
+    mountain: string
+    snow: string
+  }
+}
+
+export const defaultPlanetConfig: PlanetConfig = {
+  type: "terrestrial",
+  seed: Math.floor(Math.random() * 10000),
+  radius: 1.0,
+  temperature: 288, // Earth average in Kelvin (15°C)
+  biomass: 0.7,
+  mass: 1.0,
+  terrainRoughness: 0.6,
+  liquidHeight: 0.55,
+  volcanicActivity: 0.2,
+  continentSize: 0.5,
+  continentCount: 5,
+  noiseScale: 1.0,
+  debugMode: false,
+  visibleTerrains: {
+    ocean: true,
+    beach: true,
+    lowland: true,
+    midland: true,
+    highland: true,
+    mountain: true,
+    snow: true,
+  },
+  colors: {
+    atmosphere: "#87CEEB",
+    ocean: "#1E90FF",
+    oceanPattern: "#1E7FFF",
+    beach: "#F0E68C",
+    lowland: "#32CD32",
+    midland: "#228B22",
+    highland: "#8B4513",
+    mountain: "#A0A0A0",
+    snow: "#FFFFFF",
+  },
+}
+
+// Simple planet presets using the full PlanetConfig
+export const simplePlanetPresets: Record<string, PlanetConfig> = {
+  earth: {
+    type: "terrestrial",
+    seed: 1234,
+    radius: 1.0,
+    temperature: 288,
+    biomass: 0.7,
+    mass: 1.0,
+    terrainRoughness: 0.6,
+    liquidHeight: 0.55,
+    volcanicActivity: 0.2,
+    continentSize: 0.5,
+    continentCount: 5,
+    noiseScale: 1.0,
+    debugMode: false,
+    visibleTerrains: {
+      ocean: true,
+      beach: true,
+      lowland: true,
+      midland: true,
+      highland: true,
+      mountain: true,
+      snow: true,
+    },
+    colors: {
+      atmosphere: "#87CEEB",
+      ocean: "#1E90FF",
+      oceanPattern: "#1E7FFF",
+      beach: "#F0E68C",
+      lowland: "#32CD32",
+      midland: "#228B22",
+      highland: "#8B4513",
+      mountain: "#A0A0A0",
+      snow: "#FFFFFF",
+    },
+  },
+  mars: {
+    type: "terrestrial",
+    seed: 5678,
+    radius: 0.5,
+    temperature: 210, // Mars average
+    biomass: 0.0,
+    mass: 0.1,
+    terrainRoughness: 0.8,
+    liquidHeight: 0.3,
+    volcanicActivity: 0.1,
+    continentSize: 0.8,
+    continentCount: 2,
+    noiseScale: 1.2,
+    debugMode: false,
+    visibleTerrains: {
+      ocean: true,
+      beach: true,
+      lowland: true,
+      midland: true,
+      highland: true,
+      mountain: true,
+      snow: true,
+    },
+    colors: {
+      atmosphere: "#CD853F",
+      ocean: "#8B4513",
+      oceanPattern: "#A0522D",
+      beach: "#CD853F",
+      lowland: "#A0522D",
+      midland: "#8B4513",
+      highland: "#8B0000",
+      mountain: "#696969",
+      snow: "#F5F5DC",
+    },
+  },
+  jupiter: {
+    type: "gaseous",
+    seed: 9012,
+    radius: 2.5,
+    temperature: 165, // Jupiter average
+    biomass: 0.0,
+    mass: 8.0,
+    terrainRoughness: 0.3,
+    liquidHeight: 0.0,
+    volcanicActivity: 0.0,
+    continentSize: 0.0,
+    continentCount: 0,
+    noiseScale: 0.5,
+    debugMode: false,
+    visibleTerrains: {
+      ocean: true,
+      beach: true,
+      lowland: true,
+      midland: true,
+      highland: true,
+      mountain: true,
+      snow: true,
+    },
+    colors: {
+      atmosphere: "#DAA520",
+      ocean: "#B8860B",
+      oceanPattern: "#8B7355",
+      beach: "#DAA520",
+      lowland: "#B8860B",
+      midland: "#8B7355",
+      highland: "#8B4513",
+      mountain: "#654321",
+      snow: "#F5DEB3",
+    },
+  },
+  neptune: {
+    type: "gaseous",
+    seed: 3456,
+    radius: 2.0,
+    temperature: 72, // Neptune average
+    biomass: 0.0,
+    mass: 5.0,
+    terrainRoughness: 0.2,
+    liquidHeight: 0.0,
+    volcanicActivity: 0.0,
+    continentSize: 0.0,
+    continentCount: 0,
+    noiseScale: 0.3,
+    debugMode: false,
+    visibleTerrains: {
+      ocean: true,
+      beach: true,
+      lowland: true,
+      midland: true,
+      highland: true,
+      mountain: true,
+      snow: true,
+    },
+    colors: {
+      atmosphere: "#4169E1",
+      ocean: "#0000CD",
+      oceanPattern: "#191970",
+      beach: "#4169E1",
+      lowland: "#0000CD",
+      midland: "#191970",
+      highland: "#000080",
+      mountain: "#483D8B",
+      snow: "#E6E6FA",
+    },
+  },
+  venus: {
+    type: "terrestrial",
+    seed: 7890,
+    radius: 0.9,
+    temperature: 737, // Venus average
+    biomass: 0.0,
+    mass: 0.8,
+    terrainRoughness: 0.4,
+    liquidHeight: 0.0,
+    volcanicActivity: 0.8,
+    continentSize: 0.6,
+    continentCount: 3,
+    noiseScale: 0.8,
+    debugMode: false,
+    visibleTerrains: {
+      ocean: true,
+      beach: true,
+      lowland: true,
+      midland: true,
+      highland: true,
+      mountain: true,
+      snow: true,
+    },
+    colors: {
+      atmosphere: "#FFA500",
+      ocean: "#FF4500",
+      oceanPattern: "#FF6347",
+      beach: "#FFA500",
+      lowland: "#FF8C00",
+      midland: "#FF4500",
+      highland: "#8B0000",
+      mountain: "#2F4F4F",
+      snow: "#D3D3D3",
+    },
+  },
+}
+
+// Function to determine liquid type based on temperature
+export function getLiquidType(temperature: number): {
+  name: string
+  color: string
+  patternColor: string
+} {
+  // Temperature ranges in Kelvin
+  if (temperature < 90) {
+    // Liquid nitrogen (63K to 77K)
+    return {
+      name: "Liquid Nitrogen",
+      color: "#D6E7FF",
+      patternColor: "#C0D6FF",
+    }
+  } else if (temperature < 120) {
+    // Liquid methane (90K to 112K)
+    return {
+      name: "Liquid Methane",
+      color: "#A2CDB0",
+      patternColor: "#8EBDA0",
+    }
+  } else if (temperature < 373) {
+    // Water (273K to 373K)
+    return {
+      name: "Water",
+      color: "#1E90FF",
+      patternColor: "#1E7FFF",
+    }
+  } else if (temperature < 600) {
+    // Sulfuric acid (283K to 610K)
+    return {
+      name: "Sulfuric Acid",
+      color: "#D6C562",
+      patternColor: "#C4B250",
+    }
+  } else {
+    // Molten silicates/lava (>1000K)
+    return {
+      name: "Molten Rock",
+      color: "#FF4500",
+      patternColor: "#FF2400",
+    }
+  }
+}
+
+// Function to adjust terrain colors based on temperature
+export function getTemperatureAdjustedColors(
+  temperature: number,
+  biomass: number,
+): {
+  beach: string
+  lowland: string
+  midland: string
+  highland: string
+  mountain: string
+  snow: string
+} {
+  // Base colors
+  let beach = "#F0E68C" // Default sandy beach
+  let lowland = "#32CD32" // Default green lowland
+  let midland = "#228B22" // Default forest green
+  let highland = "#8B4513" // Default brown
+  let mountain = "#A0A0A0" // Default gray
+  let snow = "#FFFFFF" // Default white
+
+  // Cold planet (< 240K)
+  if (temperature < 240) {
+    beach = "#E0E0E0" // Icy shore
+    lowland = "#E8E8F0" // Light ice
+    midland = "#C8D8E0" // Bluish ice
+    highland = "#A8B8C0" // Darker ice
+    mountain = "#889098" // Dark gray
+    snow = "#FFFFFF" // Pure white
+  }
+  // Cool planet (240K to 280K)
+  else if (temperature < 280) {
+    beach = "#D8D8C0" // Cool sand
+    lowland = "#C0D8C0" // Tundra
+    midland = "#A0C0A0" // Sparse vegetation
+    highland = "#909080" // Rocky tundra
+    mountain = "#808080" // Gray rock
+    snow = "#FFFFFF" // White snow
+  }
+  // Temperate planet (280K to 310K)
+  else if (temperature < 310) {
+    // Adjust based on biomass
+    const bioFactor = Math.min(biomass * 1.5, 1.0)
+
+    beach = "#F0E68C" // Sandy beach
+    lowland = bioFactor > 0.3 ? "#32CD32" : "#C2CC70" // Green if biomass, otherwise yellowish
+    midland = bioFactor > 0.3 ? "#228B22" : "#A0A060" // Forest if biomass, otherwise scrubland
+    highland = "#8B4513" // Brown
+    mountain = "#A0A0A0" // Gray
+    snow = "#FFFFFF" // White
+  }
+  // Hot planet (310K to 400K)
+  else if (temperature < 400) {
+    beach = "#F8E0A0" // Light sand
+    lowland = biomass > 0.4 ? "#74A662" : "#D8C878" // Either vegetation or desert
+    midland = biomass > 0.4 ? "#567D46" : "#C0A060" // Either vegetation or desert
+    highland = "#B89060" // Light brown
+    mountain = "#A89080" // Reddish rock
+    snow = temperature > 350 ? "#F0F0F0" : "#FFFFFF" // Slightly off-white at higher temps
+  }
+  // Very hot planet (400K to 600K)
+  else if (temperature < 600) {
+    beach = "#F8D080" // Orange sand
+    lowland = "#E0B060" // Desert
+    midland = "#C09050" // Dark desert
+    highland = "#A07040" // Reddish brown
+    mountain = "#805030" // Dark red rock
+    snow = "#E8E8E8" // Off-white (salt flats)
+  }
+  // Extremely hot planet (>600K)
+  else {
+    beach = "#FF9060" // Orange-red
+    lowland = "#E07040" // Reddish
+    midland = "#C05020" // Dark red
+    highland = "#A03010" // Very dark red
+    mountain = "#802000" // Almost black-red
+    snow = "#D0D0D0" // Light gray (ash)
+  }
+
+  return { beach, lowland, midland, highland, mountain, snow }
+}
+
+// Auto-determine planet type based on mass and radius
+export function getAutoType(mass: number, radius: number): "terrestrial" | "gaseous" {
+  return mass > 7.5 || radius > 2.5 ? "gaseous" : "terrestrial"
+}
+
+// Get simplified colors for simple planet interface (maps to primary terrain colors)
+export function getSimplifiedColors(config: PlanetConfig): {
+  primary: string
+  secondary: string
+  accent: string
+} {
+  if (config.type === "gaseous") {
+    return {
+      primary: config.colors.atmosphere,
+      secondary: config.colors.ocean,
+      accent: config.colors.oceanPattern,
+    }
+  } else {
+    return {
+      primary: config.colors.ocean, // Water/ocean
+      secondary: config.colors.lowland, // Land
+      accent: config.colors.highland, // Mountains
+    }
+  }
+}
+
+// Update full config from simplified colors
+export function updateFromSimplifiedColors(
+  config: PlanetConfig,
+  colors: { primary: string; secondary: string; accent: string },
+): Partial<PlanetConfig> {
+  if (config.type === "gaseous") {
+    return {
+      colors: {
+        ...config.colors,
+        atmosphere: colors.primary,
+        ocean: colors.secondary,
+        oceanPattern: colors.accent,
+        beach: colors.primary,
+        lowland: colors.secondary,
+        midland: colors.accent,
+        highland: colors.primary,
+        mountain: colors.secondary,
+        snow: colors.accent,
+      },
+    }
+  } else {
+    return {
+      colors: {
+        ...config.colors,
+        ocean: colors.primary,
+        oceanPattern: colors.primary,
+        lowland: colors.secondary,
+        midland: colors.secondary,
+        highland: colors.accent,
+        mountain: colors.accent,
+      },
+    }
+  }
+}
+
+// Create a simplified config interface for the simple planet viewer
+export function createSimplifiedConfig(config: PlanetConfig) {
+  return {
+    type: config.type,
+    radius: config.radius,
+    mass: config.mass,
+    density: config.mass / ((config.radius ** 3 * Math.PI * 4) / 3),
+    seed: config.seed,
+    colors: getSimplifiedColors(config),
+    // Include full config for the mesh to use
+    fullConfig: config,
+  }
+};
\ No newline at end of file
diff --git a/app/planets/tests/[id]/page.tsx b/app/planets/tests/[id]/page.tsx
index 71d0628d5..ef2dd860e 100644
--- a/app/planets/tests/[id]/page.tsx
+++ b/app/planets/tests/[id]/page.tsx
@@ -9,7 +9,7 @@ import BiomeAggregator from "@/components/Data/Generator/BiomeAggregator";
 import SatellitePlanetFourAggregator, { SatellitePlanetFourClassification } from "@/components/Structures/Missions/Astronomers/SatellitePhotos/P4/P4Aggregator";
 import AI4MAggregator from "@/components/Structures/Missions/Astronomers/SatellitePhotos/AI4M/AI4MAggregator";
 import BuildTerrariumStructures from "@/components/Structures/Build/BuildOnTerrariums";
-import StructuresOnTerrarium from "@/components/Structures/StructuresOnTerrarium";
+// import StructuresOnTerrarium from "@/components/Structures/StructuresOnTerrarium";
 import { Badge } from "@/components/ui/badge";
 import { Camera, Clock } from "lucide-react";
 import Image from "next/image"
diff --git a/app/posts/[id]/page.tsx b/app/posts/[id]/page.tsx
index a857345fd..271cba587 100644
--- a/app/posts/[id]/page.tsx
+++ b/app/posts/[id]/page.tsx
@@ -4,8 +4,10 @@ import React, { useEffect, useState } from "react";
 import { useSupabaseClient } from "@supabase/auth-helpers-react";
 import { SimplePostSingle } from "@/content/Posts/SimplePostSingle";
 import StructuresOnPlanet from "@/components/Structures/Structures";
-// import PlanetGenerator from "@/components/Data/Generator/Astronomers/PlanetHunters/PlanetGenerator";
 import Navbar from "@/components/Layout/Navbar";
+import GameNavbar from "@/components/Layout/Tes";
+import { Button } from "@/components/ui/button";
+import { useRouter } from "next/navigation";
 
 interface Classification {
   id: number;
@@ -20,7 +22,9 @@ interface Classification {
 
 export default function SinglePostPage({ params }: { params: { id: string } }) {
   const supabase = useSupabaseClient();
-  
+
+  const router = useRouter();
+
   const [classification, setClassification] = useState<Classification | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -32,7 +36,7 @@ export default function SinglePostPage({ params }: { params: { id: string } }) {
         setError("Invalid classification ID.");
         setLoading(false);
         return;
-      };
+      }
 
       try {
         const { data, error } = await supabase
@@ -46,9 +50,7 @@ export default function SinglePostPage({ params }: { params: { id: string } }) {
         } else {
           const flattenedMedia = (data.media || [])
             .flat()
-            .filter(
-              (url: string) => typeof url === "string" && url.startsWith("http")
-            );
+            .filter((url: string) => typeof url === "string" && url.startsWith("http"));
 
           setClassification({
             ...data,
@@ -68,32 +70,35 @@ export default function SinglePostPage({ params }: { params: { id: string } }) {
 
   if (loading)
     return (
-      <div className="min-h-screen w-full flex flex-col">
+      <div className="min-h-screen flex items-center justify-center bg-black">
         <img
-          className="absolute inset-0 w-full h-full object-cover"
+          className="absolute inset-0 w-full h-full object-cover z-0"
           src="/assets/Backdrops/Earth.png"
           alt="Backdrop"
         />
-        <div className="relative min-h-screen container mx-auto py-8">
-          <p>Loading classification...</p>
-        </div>
+        <div className="relative z-10 text-white text-lg">Loading classification...</div>
       </div>
     );
 
-  if (error) return <p>{error}</p>;
+  if (error) return <p className="text-red-500">{error}</p>;
   if (!classification) return <p>No classification found.</p>;
 
   return (
-    <div className="min-h-screen w-full flex flex-col">
-      <Navbar />
+    <div className="relative min-h-screen w-full overflow-hidden">
+
       <img
-        className="absolute inset-0 w-full h-full object-cover"
+        className="absolute inset-0 w-full h-full object-cover z-0"
         src="/assets/Backdrops/Earth.png"
         alt="Backdrop"
       />
-      <div className="relative flex items-center justify-center min-h-screen container mx-auto">
+
+      <div className="w-full z-10">
+        <GameNavbar />
+      </div>
+
+      <div className="relative z-10 flex items-center justify-center px-4 py-12 min-h-screen">
         {classification.author && (
-          <div className="w-1/2">
+          <div className="w-full max-w-3xl">
             <SimplePostSingle
               id={classification.id.toString()}
               title={`Classification #${classification.id}`}
@@ -102,7 +107,9 @@ export default function SinglePostPage({ params }: { params: { id: string } }) {
               category={classification.classificationtype || "Unknown"}
               images={classification.media || []}
             />
-            <StructuresOnPlanet author={classification.author} />
+            {/* <div className="mt-8">
+              <StructuresOnPlanet author={classification.author} />
+            </div> */}
           </div>
         )}
       </div>
diff --git a/app/posts/surveyor/[id]/page.tsx b/app/posts/surveyor/[id]/page.tsx
index 464684c4b..4e6579cde 100644
--- a/app/posts/surveyor/[id]/page.tsx
+++ b/app/posts/surveyor/[id]/page.tsx
@@ -100,7 +100,7 @@ export default function SurveyorPostPage({ params }: { params: { id: string } })
                               content={classification.content || "No content available"}
                               category={classification.classificationtype || "Unknown"}
                               images={classification.media || []} classificationId={0} anomalyId={classification.id.toString()} votes={0} classificationType={classification.classificationtype || ''}                />
-                <StructuresOnPlanet author={classification.author} />
+                {/* <StructuresOnPlanet author={classification.author} /> */}
               </div>
             )}
           </div>
diff --git a/app/research/page.tsx b/app/research/page.tsx
index 28aead86c..8dcdcd28e 100644
--- a/app/research/page.tsx
+++ b/app/research/page.tsx
@@ -1,83 +1,201 @@
 "use client";
 
-import { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import GameNavbar from "@/components/Layout/Tes";
+import { Button } from "@/components/ui/button";
+import { useRouter } from "next/navigation";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { ChevronDown } from "lucide-react";
+import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
+import TotalPoints from "@/components/Structures/Missions/Stardust/Total";
+import BiologyResearch from "@/components/Research/BiologyItems";
 import AstronomyResearch from "@/components/Research/AstronomyItems";
 import MeteorologyResearch from "@/components/Research/MeteorologyItems";
-import BiologyResearch from "@/components/Research/BiologyItems";
-import TotalPoints from "@/components/Structures/Missions/Stardust/Total";
-import { Button } from "@/components/ui/button";
-import Link from "next/link";
+import ReferralCodePanel from "@/components/Account/Referrals";
+import AutomatonSurfaceRoverResearch from "@/components/Research/Automatons/Rovers";
 
 type CapacityKey =
   | "probeCount"
   | "probeDistance"
   | "stationCount"
   | "balloonCount"
+  | "Seiscam"
+  | "Wheels"
   | "cameraCount"
   | "stationSize";
 
 type UserCapacities = Record<CapacityKey, number>;
 
-export default function TechTreeResearchPage() {
+export default function ResearchPage() {
+  const router = useRouter();
+  const supabase = useSupabaseClient();
+  const session = useSession();
+
   const [availablePoints, setAvailablePoints] = useState(0);
-  const [userCapacities, setUserCapacities] = useState<UserCapacities>({
-    probeCount: 1,
-    probeDistance: 1,
-    stationCount: 0,
-    balloonCount: 0,
-    cameraCount: 1,
-    stationSize: 0,
-  });
-
-  const getUpgradeCost = (currentLevel: number): number => {
-    return (currentLevel + 1) * 2;
+  const totalPointsRef = useRef<any>(null);
+
+  // Referral related states
+  const [userHasReferral, setUserHasReferral] = useState<boolean | null>(null);
+  const [referralCodeInput, setReferralCodeInput] = useState("");
+  const [referralError, setReferralError] = useState<string | null>(null);
+  const [isSubmittingReferral, setIsSubmittingReferral] = useState(false);
+  const [referralSuccess, setReferralSuccess] = useState<string | null>(null);
+
+  // Check if user already has a referral code
+  useEffect(() => {
+    if (!session?.user?.id) return;
+
+    const checkReferral = async () => {
+      const { data, error } = await supabase
+        .from("referrals")
+        .select("id")
+        .eq("referree_id", session.user.id)
+        .limit(1)
+        .maybeSingle();
+
+      if (error) {
+        console.error("Error checking referral:", error.message);
+        setUserHasReferral(false);
+      } else {
+        setUserHasReferral(!!data);
+      }
+    };
+
+    checkReferral();
+  }, [session, supabase]);
+
+  const handleDivClick = () => {
+    setTimeout(() => {
+      if (totalPointsRef.current?.refreshPoints) {
+        totalPointsRef.current.refreshPoints();
+      }
+    }, 3000);
   };
 
-  const handleUpgrade = (capacity: CapacityKey, currentLevel: number) => {
-    const cost = getUpgradeCost(currentLevel);
-    if (availablePoints >= cost) {
-      setAvailablePoints((prev) => prev - cost);
-      setUserCapacities((prev) => ({
-        ...prev,
-        [capacity]: prev[capacity] + 1,
-      }));
+  // Submit referral code for user
+  const handleReferralSubmit = async () => {
+    setReferralError(null);
+    setReferralSuccess(null);
+
+    if (!session?.user?.id) {
+      setReferralError("You must be logged in to submit a referral code.");
+      return;
+    };
+
+    if (!referralCodeInput.trim()) {
+      setReferralError("Please enter a valid referral code.");
+      return;
+    };
+
+    setIsSubmittingReferral(true);
+
+    try {
+      const { error } = await supabase.from("referrals").insert({
+        referree_id: session.user.id,
+        referral_code: referralCodeInput.trim(),
+      });
+
+      if (error) {
+        setReferralError("Failed to submit referral code. Please try again.");
+        setIsSubmittingReferral(false);
+        return;
+      }
+
+      setReferralSuccess("Referral code added successfully!");
+      setUserHasReferral(true);
+      setReferralCodeInput("");
+    } catch (e) {
+      setReferralError("An unexpected error occurred.");
+    } finally {
+      setIsSubmittingReferral(false);
     }
   };
 
   return (
-    <div className="min-h-screen bg-[#0a1929] flex flex-col">
-      <div className="fixed top-0 left-0 right-0 z-50">
+    <div className="relative min-h-screen w-full flex flex-col text-[#2E3440]">
+      <img
+        className="absolute inset-0 w-full h-full object-cover"
+        src="/assets/Backdrops/Earth.png"
+        alt="Earth background"
+      />
+
+      <div className="z-10 w-full">
         <GameNavbar />
       </div>
 
-      <div className="flex-1 pt-20 text-[#c5d5e6] font-mono">
-        <header className="bg-[#0a1929] border-b border-[#1e3a5f] py-12 p-4">
-          <div className="container mx-auto flex justify-between items-center">
-            <h1 className="text-2xl font-bold text-[#4cc9f0] tracking-wider">RESEARCH LAB</h1>
-            <div className="flex items-center gap-4">
-              <div className="flex items-center gap-2 bg-[#0f2942] px-4 py-2 rounded border border-[#1e3a5f]">
-                <span className="text-[#4cc9f0]">STARDUST:</span>
-                <span className="font-bold text-[#f72585] text-xl"><TotalPoints /></span>
+      <div className="flex flex-1 justify-center items-center px-4 py-8">
+        <Dialog
+          defaultOpen
+          onOpenChange={(open) => {
+            if (!open) router.push("/");
+          }}
+        >
+          <DialogContent
+            className="rounded-3xl w-full max-w-screen-md lg:max-w-[1000px] h-[80vh] overflow-y-auto p-8 shadow-lg"
+            style={{
+              background: "linear-gradient(135deg, #E5EEF4, #D8E5EC)",
+              color: "#2E3440",
+            }}
+          >
+            <div className="text-center mb-4">
+              <h3 className="text-2xl sm:text-3xl font-extrabold text-[#5E81AC]">
+                RESEARCH LAB
+              </h3>
+              <div className="flex items-center gap-2 px-4 py-2 rounded-border border-[#1e3a5f]">
+                <span className="text-[#4cc9f0]">Stardust:</span>
+                <span className="font-bold text-[#0f7285] text-xl">
+                  <TotalPoints ref={totalPointsRef} />
+                </span>
               </div>
             </div>
-          </div>
-        </header>
-
-        <main className="container mx-auto p-4">
-          {/* <TotalPoints onPointsUpdate={(total) => setAvailablePoints(total)} /> */}
-
-          <div className="relative">
-            <AstronomyResearch />
-            <MeteorologyResearch />
-            <BiologyResearch />
-          </div>
-          <Link href='/'><Button
-                className="text-white border-[#1e3a5f]"
-            >
-                Home
-            </Button></Link>
-        </main>
+
+            <main className="container mx-auto p-4">
+              <div className="my-4" onClick={handleDivClick}>
+                <AstronomyResearch />
+                <MeteorologyResearch />
+                <AutomatonSurfaceRoverResearch />
+                <BiologyResearch />
+              </div>
+
+              <div className="my-4">
+                <ReferralCodePanel />
+              </div>
+
+              {/* NEW referral input section if user has no referral yet */}
+              {userHasReferral === false && (
+                <div className="max-w-md mx-auto mt-8 p-6 bg-[#2E3440] rounded-md border border-[#5E81AC] shadow-md">
+                  <h4 className="text-lg font-semibold text-[#81A1C1] mb-2">
+                    Add Your Referral Code
+                  </h4>
+                  <p className="text-[#D8DEE9] mb-4">
+                    If someone referred you to Star Sailors, add their code to get some bonus stardust!
+                  </p>
+                  <input
+                    type="text"
+                    value={referralCodeInput}
+                    onChange={(e) => setReferralCodeInput(e.target.value)}
+                    placeholder="Enter your referral code"
+                    disabled={isSubmittingReferral}
+                    className="w-full mb-3 px-3 py-2 rounded border border-[#81A1C1] bg-[#3B4252] text-[#ECEFF4] focus:outline-none focus:ring-2 focus:ring-[#88C0D0]"
+                  />
+                  {referralError && (
+                    <p className="text-red-400 mb-2">{referralError}</p>
+                  )}
+                  {referralSuccess && (
+                    <p className="text-green-400 mb-2">{referralSuccess}</p>
+                  )}
+                  <Button
+                    onClick={handleReferralSubmit}
+                    disabled={isSubmittingReferral}
+                    className="w-full bg-[#81A1C1] text-[#2E3440] hover:bg-[#88C0D0]"
+                  >
+                    {isSubmittingReferral ? "Submitting..." : "Submit Referral"}
+                  </Button>
+                </div>
+              )}
+            </main>
+          </DialogContent>
+        </Dialog>
       </div>
     </div>
   );
diff --git a/app/scenes/earth/page.tsx b/app/scenes/earth/page.tsx
index 6bbc10d28..1458af7f3 100644
--- a/app/scenes/earth/page.tsx
+++ b/app/scenes/earth/page.tsx
@@ -6,12 +6,13 @@ import { useActivePlanet } from "@/context/ActivePlanet";
 import { EarthViewLayout } from "@/components/(scenes)/planetScene/layout";
 import { InventoryStructureItem } from "@/types/Items";
 import { PlanetarySystem } from "@/components/(scenes)/planetScene/orbitals/system";
-import StructuresOnPlanet, {
-  AtmosphereStructuresOnPlanet,
-  OrbitalStructuresOnPlanet,
-} from "@/components/Structures/Structures";
+// import StructuresOnPlanet, {
+//   AtmosphereStructuresOnPlanet,
+//   OrbitalStructuresOnPlanet,
+// } from "@/components/Structures/Structures";
 import AllAutomatonsOnActivePlanet from "@/components/Structures/Auto/AllAutomatons";
 import InventoryPage from "@/components/Inventory/Grid/Grid";
+import Structures from "@/components/Structures/Structures";
 // import EnhancedWeatherEvents from '@/components/(scenes)/mining/enhanced-weather-events';
 // import TopographicMap from "@/components/topographic-map";
 
@@ -53,14 +54,11 @@ const EarthStructures: React.FC = () => {
       {/* <EnhancedWeatherEvents /> */}
       <div className="w-full">
         <div className="py-2">
-          <center>
-            <AtmosphereStructuresOnPlanet />
-          </center>
         </div>
       </div>
       <div className="w-full">
         <center>
-          <StructuresOnPlanet />
+          <Structures />
         </center>
       </div>
       <div className="relative flex-1">
diff --git a/app/structures/balloon/[project]/page.tsx b/app/structures/balloon/[project]/page.tsx
new file mode 100644
index 000000000..59aa12240
--- /dev/null
+++ b/app/structures/balloon/[project]/page.tsx
@@ -0,0 +1,68 @@
+'use client';
+
+import { useRouter, useParams } from 'next/navigation';
+import { useSession } from '@supabase/auth-helpers-react';
+import Home from '@/app/page';
+import GameNavbar from '@/components/Layout/Tes';
+import AI4M from '@/components/Structures/Missions/Astronomers/SatellitePhotos/AI4M/AIForMars';
+import PlanetFour from '@/components/Structures/Missions/Astronomers/SatellitePhotos/P4/PlanetFour';
+import CloudspottingOnMars from '@/components/Structures/Missions/Meteorologists/Cloudspotting/CloudspottingOnMars';
+import JovianVortexHunters from '@/components/Structures/Missions/Meteorologists/JVH/JovianVortexHunters';
+// import { DataSourcesModal } from '@/components/Data/unlockNewDataSources';
+import React from 'react';
+
+export default function WeatherBalloonProjectPage() {
+  const session = useSession();
+  
+  const router = useRouter();
+  const params = useParams();
+
+  if (!session) return <Home />;
+
+  const project = params?.project;
+
+  const componentMap: { [key: string]: React.ReactNode } = {
+    // research: <DataSourcesModal structureId="3105" structure="LIDAR" />,
+    clouds: <CloudspottingOnMars />,
+    storms: <JovianVortexHunters />,
+    landmarks: <AI4M />,
+    surface: <PlanetFour />,
+  };
+
+  const SelectedComponent = componentMap[project as string];
+
+  if (!SelectedComponent) {
+    return (
+      <div className="flex flex-col items-center justify-center h-screen text-center">
+        <h1 className="text-2xl font-semibold">Unknown Project</h1>
+        <p className="text-gray-500 mt-2">The selected weather balloon project does not exist.</p>
+      </div>
+    );
+  };
+
+  return (
+    <div className="relative min-h-screen w-full flex flex-col">
+      <img
+        className="absolute inset-0 w-full h-full object-cover"
+        src="/assets/Backdrops/Earth.png"
+        alt="Earth Background"
+      />
+      <div className='pb-8'>
+        <GameNavbar />
+      </div>
+      <main className="flex-grow z-10 px-4 py-6 flex justify-center items-start overflow-y-auto">
+        <div className="max-w-4xl w-full">
+          <div className="mb-6 flex justify-end">
+            <button
+              onClick={() => router.push('/structures/balloon')}
+              className="bg-muted hover:bg-muted/70 text-sm text-foreground border border-border rounded-md px-4 py-2 transition-colors"
+            >
+              All Projects
+            </button>
+          </div>
+          {SelectedComponent}
+        </div>
+      </main>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/app/structures/balloon/page.tsx b/app/structures/balloon/page.tsx
index 746bf596c..c8230651c 100644
--- a/app/structures/balloon/page.tsx
+++ b/app/structures/balloon/page.tsx
@@ -1,47 +1,34 @@
-'use client';
+'use client'
 
 import Home from "@/app/page";
-import WeatherEventsOverview from "@/components/Data/Generator/Weather/EventsAcrossMyLocations";
-import { DataSourcesModal } from "@/components/Data/unlockNewDataSources";
-import GameNavbar from "@/components/Layout/Tes";
-import AI4M from "@/components/Structures/Missions/Astronomers/SatellitePhotos/AI4M/AIForMars";
-import PlanetFour from "@/components/Structures/Missions/Astronomers/SatellitePhotos/P4/PlanetFour";
-import CloudspottingOnMars from "@/components/Structures/Missions/Meteorologists/Cloudspotting/CloudspottingOnMars";
-import JovianVortexHunters from "@/components/Structures/Missions/Meteorologists/JVH/JovianVortexHunters";
-import { Dialog, DialogContent } from "@/components/ui/dialog";
-import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
+import { useSession } from "@supabase/auth-helpers-react";
 import {
   BuildingIcon,
   CameraOffIcon,
   CloudCogIcon,
   CloudDrizzleIcon,
   MicroscopeIcon,
-  RssIcon,
-  UmbrellaIcon
+  RssIcon
 } from "lucide-react";
 import { useRouter } from "next/navigation";
-import React, { useState } from "react";
+import React from "react";
+import GameNavbar from "@/components/Layout/Tes";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
 
 export default function WeatherBalloonOnEarthPage() {
-  const supabase = useSupabaseClient();
   const session = useSession();
-  
-  const router = useRouter();
 
-  const [activeComponent, setActiveComponent] = useState<React.ReactNode | null>(null);
+  const router = useRouter();
 
-  if (!session) return <Home />;
+  if (!session) {
+    router.push("/");
+  };
 
   const actions = [
     {
       icon: <MicroscopeIcon className="w-6 h-6 text-[#B48EAD]" />,
       text: "Research",
-      dynamicComponent: <DataSourcesModal structureId="3105" structure="LIDAR" />,
-    },
-    {
-      icon: <UmbrellaIcon className="w-6 h-6 text-[#A3BE8C]" />,
-      text: "Upcoming weather events",
-      dynamicComponent: <WeatherEventsOverview />,
+      route: "research",
     },
   ];
 
@@ -49,33 +36,25 @@ export default function WeatherBalloonOnEarthPage() {
     {
       icon: <CloudCogIcon className="w-6 h-6 text-[#88C0D0]" />,
       text: "Search your clouds",
-      dynamicComponent: <CloudspottingOnMars />,
+      route: "clouds",
     },
     {
       icon: <CloudDrizzleIcon className="w-6 h-6 text-[#81A1C1]" />,
       text: "Map storms on gas planets",
-      dynamicComponent: <JovianVortexHunters />,
+      route: "storms",
     },
     {
       icon: <RssIcon className="w-6 h-6 text-[#D08770]" />,
       text: "Identify landmarks on terrestrial planets",
-      dynamicComponent: <AI4M />,
+      route: "landmarks",
     },
     {
       icon: <CameraOffIcon className="w-6 h-6 text-[#EBCB8B]" />,
       text: "Map the surface of planets",
-      dynamicComponent: <PlanetFour />,
+      route: "surface",
     },
   ];
 
-  const handleComponentChange = (component: React.ReactNode) => {
-    setActiveComponent(component);
-  };
-
-  const handleBack = () => {
-    setActiveComponent(null);
-  };
-
   return (
     <div className="relative min-h-screen w-full flex flex-col">
       <img
@@ -104,74 +83,55 @@ export default function WeatherBalloonOnEarthPage() {
               color: "#2E3440",
             }}
           >
-            {/* Back button when showing dynamic content */}
-            {activeComponent && (
-              <div className="w-full flex justify-end">
-                <button
-                  onClick={handleBack}
-                  className="text-[#4C566A] hover:text-[#BF616A] font-medium mb-2"
-                >
-                  ← Back
-                </button>
+            <div className="flex-grow overflow-y-auto w-full">
+              <div className="flex justify-between items-center">
+                <div className="flex items-center space-x-2">
+                  <BuildingIcon className="w-8 h-8 text-[#A3BE8C]" />
+                  <h1 className="text-2xl font-bold text-[#2E3440]">Weather Balloon</h1>
+                </div>
               </div>
-            )}
 
-            {/* Content switcher */}
-            <div className="flex-grow overflow-y-auto w-full">
-              {activeComponent ? (
-                <div className="w-full h-full">{activeComponent}</div>
-              ) : (
-                <>
-                  <div className="flex justify-between items-center">
-                    <div className="flex items-center space-x-2">
-                      <BuildingIcon className="w-8 h-8 text-[#A3BE8C]" />
-                      <h1 className="text-2xl font-bold text-[#2E3440]">Weather Balloon</h1>
-                    </div>
-                  </div>
+              <div className="flex justify-center my-4">
+                <img
+                  src="/assets/Items/WeatherBalloon.png"
+                  alt="Weather Balloon"
+                  className="w-20 h-20"
+                  width="80"
+                  height="80"
+                  style={{ aspectRatio: "80/80", objectFit: "cover" }}
+                />
+              </div>
 
-                  <div className="flex justify-center my-4">
-                    <img
-                      src="/assets/Items/WeatherBalloon.png"
-                      alt="Weather Balloon"
-                      className="w-20 h-20"
-                      width="80"
-                      height="80"
-                      style={{ aspectRatio: "80/80", objectFit: "cover" }}
-                    />
+              <div className="flex items-center justify-center my-4 space-x-4">
+                {actions.map((action, index) => (
+                  <div
+                    key={index}
+                    className="flex flex-col items-center cursor-pointer"
+                    onClick={() => router.push(`/structures/balloon/${action.route}`)}
+                  >
+                    {action.icon}
+                    <p className="text-xs text-[#4C566A]">{action.text}</p>
                   </div>
+                ))}
+              </div>
 
-                  <div className="flex items-center justify-center my-4 space-x-4">
-                    {actions.map((action, index) => (
-                      <div
-                        key={index}
-                        className="flex flex-col items-center cursor-pointer"
-                        onClick={() => handleComponentChange(action.dynamicComponent)}
-                      >
-                        {action.icon}
-                        <p className="text-xs text-[#4C566A]">{action.text}</p>
+              <div className="gap-4 mt-6">
+                <div className="flex flex-col items-center my-4 space-y-4">
+                  {buttons.map((button, index) => (
+                    <div
+                      key={index}
+                      className="flex items-center justify-center bg-[#D8DEE9]/60 text-[#2E3440] font-bold py-2 px-4 rounded-md shadow-sm hover:bg-[#E5E9F0] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#81A1C1] cursor-pointer"
+                      onClick={() => router.push(`/structures/balloon/${button.route}`)}
+                      style={{ width: "100%", maxWidth: "240px" }}
+                    >
+                      <div className="flex items-center justify-center">
+                        <div className="flex-shrink-0">{button.icon}</div>
+                        <p className="ml-2 text-sm text-[#3B4252]">{button.text}</p>
                       </div>
-                    ))}
-                  </div>
-
-                  <div className="gap-4 mt-6">
-                    <div className="flex flex-col items-center my-4 space-y-4">
-                      {buttons.map((button, index) => (
-                        <div
-                          key={index}
-                          className="flex items-center justify-center bg-[#D8DEE9]/60 text-[#2E3440] font-bold py-2 px-4 rounded-md shadow-sm hover:bg-[#E5E9F0] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#81A1C1] cursor-pointer"
-                          onClick={() => handleComponentChange(button.dynamicComponent)}
-                          style={{ width: "100%", maxWidth: "240px" }}
-                        >
-                          <div className="flex items-center justify-center">
-                            <div className="flex-shrink-0">{button.icon}</div>
-                            <p className="ml-2 text-sm text-[#3B4252]">{button.text}</p>
-                          </div>
-                        </div>
-                      ))}
                     </div>
-                  </div>
-                </>
-              )}
+                  ))}
+                </div>
+              </div>
             </div>
           </DialogContent>
         </Dialog>
diff --git a/app/structures/greenhouse/[project]/page.tsx b/app/structures/greenhouse/[project]/page.tsx
new file mode 100644
index 000000000..74651d35c
--- /dev/null
+++ b/app/structures/greenhouse/[project]/page.tsx
@@ -0,0 +1,71 @@
+'use client'
+
+import React, { useEffect, useState } from "react"
+import { useParams, useRouter } from "next/navigation"
+import { useSessionContext } from "@supabase/auth-helpers-react"
+import GameNavbar from "@/components/Layout/Tes"
+import { GreenhouseResearchStations } from "@/components/Structures/Missions/Biologists/ResearchStations"
+import ChatGPTImageClassifier from "@/app/tests/pleaseWork"
+
+export default function GreenhouseProjectRoute() {
+    const { project } = useParams();
+    const router = useRouter();
+
+    const { session, isLoading } = useSessionContext();
+
+    const [ProjectComponent, setProjectComponent] = useState<React.ReactNode | null>(null);
+
+    useEffect(() => {
+        if (!isLoading && !session) {
+            router.push('/');
+        };
+    }, [isLoading, session, router]);
+
+    useEffect(() => {
+        if (!isLoading && session) {
+            switch (project) {
+                case 'stations':
+                    setProjectComponent(<GreenhouseResearchStations />);
+                    break;
+                case 'scan':
+                    setProjectComponent(<ChatGPTImageClassifier />);
+                    break;
+                default:
+                    router.push('/structures/greenhouse');
+                    break;
+            };
+        };
+    }, [project, session, isLoading, router]);
+
+    if (isLoading) {
+        return null;
+    };
+
+    return (
+        <div className="relative min-h-screen w-full flex flex-col">
+            <img
+                className="absolute inset-0 w-full h-full object-cover"
+                src="/assets/Backdrops/Earth.png"
+                alt="Earth Background"
+            />
+
+            <div className="relative z-10 pb-4">
+                <GameNavbar />
+            </div>
+
+            <main className="flex-grow z-10 px-4 py-12 flex justify-center items-start overflow-y-auto">
+                <div className="max-w-4xl w-full">
+                    <div className="mb-6 flex justify-end">
+                        <button
+                        onClick={() => router.push('/structures/greenhouse')}
+                        className="bg-muted hover:bg-muted/70 text-sm text-foreground border border-border rounded-md px-4 py-2 transition-colors"
+                        >
+                        All Projects
+                        </button>
+                    </div>
+                    {ProjectComponent}
+                </div>
+            </main>
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/app/structures/greenhouse/page.tsx b/app/structures/greenhouse/page.tsx
index cd53bb97d..978bd29ee 100644
--- a/app/structures/greenhouse/page.tsx
+++ b/app/structures/greenhouse/page.tsx
@@ -1,45 +1,33 @@
 'use client';
 
 import Home from "@/app/page";
-import ChatGPTImageClassifier from "@/app/tests/pleaseWork";
 import GameNavbar from "@/components/Layout/Tes";
-import { GreenhouseResearchStations } from "@/components/Structures/Missions/Biologists/ResearchStations";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import { BeanIcon, BuildingIcon, CameraIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
-import React, { useState } from "react";
+import React from "react";
 
 export default function GreenhouseBiodomeOnEarthPage() {
   const supabase = useSupabaseClient();
   const session = useSession();
   const router = useRouter();
 
-  const [activeComponent, setActiveComponent] = useState<React.ReactNode | null>(null);
-
   if (!session) return <Home />;
 
   const buttons = [
     {
       icon: <BeanIcon className="w-6 h-6 text-[#A3BE8C]" />,
       text: "My Greenhouse Stations",
-      dynamicComponent: <GreenhouseResearchStations />,
+      route: "stations",
     },
     {
       icon: <CameraIcon className="w-6 h-6 text-[#81A1C1]" />,
       text: "Scan animals around you",
-      dynamicComponent: <ChatGPTImageClassifier />,
+      route: "scan",
     },
   ];
 
-  const handleComponentChange = (component: React.ReactNode) => {
-    setActiveComponent(component);
-  };
-
-  const handleBack = () => {
-    setActiveComponent(null);
-  };
-
   return (
     <div className="relative min-h-screen w-full flex flex-col">
       <img
@@ -68,61 +56,42 @@ export default function GreenhouseBiodomeOnEarthPage() {
               color: "#2E3440",
             }}
           >
-            {/* Back button when showing dynamic content */}
-            {activeComponent && (
-              <div className="w-full flex justify-end">
-                <button
-                  onClick={handleBack}
-                  className="text-[#4C566A] hover:text-[#BF616A] font-medium mb-2"
-                >
-                  ← Back
-                </button>
-              </div>
-            )}
-
-            {/* Content switcher */}
             <div className="flex-grow overflow-y-auto w-full">
-              {activeComponent ? (
-                <div className="w-full h-full">{activeComponent}</div>
-              ) : (
-                <>
-                  <div className="flex justify-between items-center">
-                    <div className="flex items-center space-x-2">
-                      <BuildingIcon className="w-8 h-8 text-[#A3BE8C]" />
-                      <h1 className="text-2xl font-bold text-[#2E3440]">Greenhouse</h1>
-                    </div>
-                  </div>
+              <div className="flex justify-between items-center">
+                <div className="flex items-center space-x-2">
+                  <BuildingIcon className="w-8 h-8 text-[#A3BE8C]" />
+                  <h1 className="text-2xl font-bold text-[#2E3440]">Greenhouse</h1>
+                </div>
+              </div>
 
-                  <div className="flex justify-center my-4">
-                    <img
-                      src="/assets/Items/Greenhouse.png"
-                      alt="Greenhouse Biodome"
-                      className="w-20 h-20"
-                      width="80"
-                      height="80"
-                      style={{ aspectRatio: "80/80", objectFit: "cover" }}
-                    />
-                  </div>
+              <div className="flex justify-center my-4">
+                <img
+                  src="/assets/Items/Greenhouse.png"
+                  alt="Greenhouse Biodome"
+                  className="w-20 h-20"
+                  width="80"
+                  height="80"
+                  style={{ aspectRatio: "80/80", objectFit: "cover" }}
+                />
+              </div>
 
-                  <div className="gap-4 mt-6">
-                    <div className="flex flex-col items-center my-4 space-y-4">
-                      {buttons.map((button, index) => (
-                        <div
-                          key={index}
-                          className="flex items-center justify-center bg-[#E5E9F0]/60 text-[#2E3440] font-bold py-2 px-4 rounded-md shadow-sm hover:bg-[#ECEFF4] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#8FBCBB] cursor-pointer"
-                          onClick={() => handleComponentChange(button.dynamicComponent)}
-                          style={{ width: "100%", maxWidth: "240px" }}
-                        >
-                          <div className="flex items-center justify-center">
-                            <div className="flex-shrink-0">{button.icon}</div>
-                            <p className="ml-2 text-sm text-[#3B4252]">{button.text}</p>
-                          </div>
-                        </div>
-                      ))}
+              <div className="gap-4 mt-6">
+                <div className="flex flex-col items-center my-4 space-y-4">
+                  {buttons.map((button, index) => (
+                    <div
+                      key={index}
+                      className="flex items-center justify-center bg-[#E5E9F0]/60 text-[#2E3440] font-bold py-2 px-4 rounded-md shadow-sm hover:bg-[#ECEFF4] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#8FBCBB] cursor-pointer"
+                      onClick={() => router.push(`/structures/greenhouse/${button.route}`)}
+                      style={{ width: "100%", maxWidth: "240px" }}
+                    >
+                      <div className="flex items-center justify-center">
+                        <div className="flex-shrink-0">{button.icon}</div>
+                        <p className="ml-2 text-sm text-[#3B4252]">{button.text}</p>
+                      </div>
                     </div>
-                  </div>
-                </>
-              )}
+                  ))}
+                </div>
+              </div>
             </div>
           </DialogContent>
         </Dialog>
diff --git a/app/structures/seiscam/[project]/page.tsx b/app/structures/seiscam/[project]/page.tsx
new file mode 100644
index 000000000..7cb1d13e1
--- /dev/null
+++ b/app/structures/seiscam/[project]/page.tsx
@@ -0,0 +1,60 @@
+'use client';
+
+import { useRouter, useParams } from "next/navigation";
+import { useSession } from "@supabase/auth-helpers-react";
+import GameNavbar from "@/components/Layout/Tes";
+import AI4M from "@/components/Structures/Missions/Astronomers/SatellitePhotos/AI4M/AIForMars";
+import PlanetFour from "@/components/Structures/Missions/Astronomers/SatellitePhotos/P4/PlanetFour";
+
+export default function SeisCamProjectpage() {
+    const params = useParams();
+    const router = useRouter();
+    const project = params?.project;
+
+    const session = useSession();
+
+    if (!session) {
+        router.push("/");
+    };
+
+    const componentMap: { [ key: string ]: React.ReactNode } = {
+        landmarks: <AI4M />,
+        surface: <PlanetFour />,
+    };
+
+    const SelectedComponent = componentMap[ project as string ];
+
+    if (!SelectedComponent) {
+        router.push("/structures/seiscam");
+    };
+
+    return (
+        <div className="relative min-h-screen w-full flex flex-col">
+            <img
+                className="absolute inset-0 w-full h-full object-cover"
+                src="/assets/Backdrops/Earth.png"
+                alt="Earth Background"
+            />
+
+            <div className="pb-8">
+                <GameNavbar />
+            </div>
+
+            <main className="flex-grow z-10 px-4 py-12 flex justify-center items-start overflow-y-auto">
+                <div className="max-w-4xl w-full">
+                    <div className="mb-6 flex justify-end">
+                        <button
+                            onClick={() => router.push('/structures/seiscam')}
+                            className="bg-muted hover:bg-muted/70 text-sm text-foreground border border-border rounded-md px-4 py-2 transition-colors"
+                        >
+                            All Projects
+                        </button>
+                    </div>
+                    {SelectedComponent}
+                </div>
+            </main>
+
+        </div>
+
+    )
+}
\ No newline at end of file
diff --git a/app/structures/seiscam/page.tsx b/app/structures/seiscam/page.tsx
new file mode 100644
index 000000000..97410588a
--- /dev/null
+++ b/app/structures/seiscam/page.tsx
@@ -0,0 +1,133 @@
+'use client'
+
+import React, { useEffect } from "react"
+import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react"
+import { useRouter } from "next/navigation"
+import GameNavbar from "@/components/Layout/Tes"
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+import {
+  BuildingIcon,
+  CameraOffIcon,
+  MicroscopeIcon,
+  RssIcon,
+} from "lucide-react"
+
+export default function SeiscamOnEarthPage() {
+  const router = useRouter()
+  const session = useSession()
+
+  useEffect(() => {
+    if (!session) {
+      router.push("/")
+    }
+  }, [session, router])
+
+  const actions = [
+    {
+      icon: <MicroscopeIcon className="w-6 h-6 text-[#B48EAD]" />,
+      text: "Research",
+      route: "research",
+    },
+  ]
+
+  const buttons = [
+    {
+      icon: <RssIcon className="w-6 h-6 text-[#D08770]" />,
+      text: "Identify landmarks on terrestrial planets",
+      route: "landmarks",
+    },
+    {
+      icon: <CameraOffIcon className="w-6 h-6 text-[#EBCB8B]" />,
+      text: "Map the surface of planets",
+      route: "surface",
+    },
+  ]
+
+  return (
+    <div className="relative min-h-screen w-full flex flex-col">
+      <img
+        className="absolute inset-0 w-full h-full object-cover"
+        src="/assets/Backdrops/Earth.png"
+        alt="Earth Background"
+      />
+
+      <div className="w-full">
+        <GameNavbar />
+      </div>
+
+      <div className="flex flex-row space-y-4">
+        <Dialog
+          defaultOpen
+          onOpenChange={(open) => {
+            if (!open) {
+              router.push("/")
+            }
+          }}
+        >
+          <DialogContent
+            className="p-6 rounded-3xl text-white max-w-3xl w-full h-[80vh] overflow-hidden flex flex-col justify-start"
+            style={{
+              background:
+                "linear-gradient(135deg, rgba(191, 223, 245, 0.9), rgba(158, 208, 218, 0.85))",
+              color: "#2E3440",
+            }}
+          >
+            <div className="flex-grow overflow-y-auto w-full">
+              {/* Header */}
+              <div className="flex justify-between items-center">
+                <div className="flex items-center space-x-2">
+                  <BuildingIcon className="w-8 h-8 text-[#A3BE8C]" />
+                  <h1 className="text-2xl font-bold text-[#2E3440]">SEISCAM</h1>
+                </div>
+
+                <img
+                  src="/assets/Items/miningstation.png"
+                  alt="Weather Balloon"
+                  className="w-20 h-20"
+                  width="80"
+                  height="80"
+                  style={{ aspectRatio: "80/80", objectFit: "cover" }}
+                />
+              </div>
+
+              {/* Actions */}
+              <div className="flex items-center justify-center my-4 space-x-4">
+                {actions.map((action, index) => (
+                  <div
+                    key={index}
+                    className="flex flex-col items-center cursor-pointer"
+                    onClick={() =>
+                      router.push(`/structures/seiscam/${action.route}`)
+                    }
+                  >
+                    {action.icon}
+                    <p className="text-xs text-[#4C566A]">{action.text}</p>
+                  </div>
+                ))}
+              </div>
+
+              {/* Buttons */}
+              <div className="flex flex-col items-center my-4 space-y-4">
+                {buttons.map((button, index) => (
+                  <div
+                    key={index}
+                    className="flex items-center justify-center bg-[#D8DEE9]/60 text-[#2E3440] font-bold py-2 px-4 rounded-md shadow-sm hover:bg-[#E5E9F0] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#81A1C1] cursor-pointer"
+                    onClick={() =>
+                      router.push(`/structures/seiscam/${button.route}`)
+                    }
+                    style={{ width: "100%", maxWidth: "240px" }}
+                  >
+                    <div className="flex items-center justify-center">
+                      <div className="flex-shrink-0">{button.icon}</div>
+                      <p className="ml-2 text-sm text-[#3B4252]">{button.text}</p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/app/structures/telescope/[project]/[id]/[mission]/page.tsx b/app/structures/telescope/[project]/[id]/[mission]/page.tsx
new file mode 100644
index 000000000..935b0ba72
--- /dev/null
+++ b/app/structures/telescope/[project]/[id]/[mission]/page.tsx
@@ -0,0 +1,120 @@
+'use client'
+
+import { useEffect, useState } from "react"
+import { useParams, useRouter } from "next/navigation"
+import { useSessionContext } from "@supabase/auth-helpers-react"
+
+// Mission imports
+import PlanetHuntersSteps from "@/components/Structures/Missions/Astronomers/PlanetHunters/PlanetHunters"
+import { StarterSunspot } from "@/components/Projects/Telescopes/Sunspots"
+import { StarterTelescopeTess } from "@/components/Projects/Telescopes/Transiting"
+import GameNavbar from "@/components/Layout/Tes"
+import PlanetTypeCommentForm from "@/components/Structures/Missions/Astronomers/PlanetHunters/PlanetType"
+import VotePlanetClassifications from "@/components/Structures/Missions/Astronomers/PlanetHunters/PHVote"
+import PlanetGenerator from "@/components/Data/Generator/Astronomers/PlanetHunters/PlanetGenerator"
+import { DailyMinorPlanetWithId } from "@/components/Projects/Telescopes/DailyMinorPlanet"
+
+export default function TelescopeClassifyPage() {
+  const params = useParams()
+  const router = useRouter()
+
+  const { session, isLoading } = useSessionContext()
+
+  const [MissionComponent, setMissionComponent] = useState<React.ReactNode | null>(null)
+
+  useEffect(() => {
+    if (!isLoading && !session) {
+      router.push('/')
+    }
+  }, [session, isLoading, router])
+
+  useEffect(() => {
+    if (isLoading || !session) return
+
+    const project = String(params.project)
+    const mission = String(params.mission)
+    const idParam = String(params.id || "")
+
+    let classificationId: string | undefined
+    if (idParam.startsWith("cl-")) {
+      classificationId = idParam.replace("cl-", "")
+    } else if (!isNaN(Number(idParam))) {
+      classificationId = idParam
+    }
+
+    let component: React.ReactNode = null
+
+    switch (project) {
+      case "planet-hunters":
+        switch (mission) {
+          case "one":
+          case "classify":
+            component = <StarterTelescopeTess />
+            break
+          case "comment":
+            component = (
+              <PlanetTypeCommentForm classificationId={classificationId} />
+            )
+            break
+          case "survey":
+            component = (
+              <VotePlanetClassifications classificationId={classificationId || '8'} />
+            )
+            break
+          case "paint":
+            component = (
+              <PlanetGenerator
+                classificationId={classificationId || '8'}
+              />
+            )
+            break
+          default:
+            component = <PlanetHuntersSteps />
+            break
+        }
+        break
+
+      case "sunspots":
+        component = <StarterSunspot />
+        break
+
+      case "daily-minor-planet":
+        switch (mission) {
+          case "classify":
+            component = <DailyMinorPlanetWithId />
+            break
+        }
+        break
+
+      default:
+        component = <div className="text-white p-4">Unknown mission or project.</div>
+        break
+    }
+
+    setMissionComponent(component)
+  }, [params, session, isLoading])
+
+  return (
+    <div className="relative min-h-screen w-full flex flex-col">
+      {/* Background image behind everything */}
+      <div className="fixed inset-0 -z-10">
+        <img
+          className="w-full h-full object-cover"
+          src="/assets/Backdrops/Earth.png"
+          alt="Earth Background"
+        />
+      </div>
+
+      {/* Sticky/relative nav and content */}
+      <div className="relative z-10 pb-8">
+        <GameNavbar />
+      </div>
+
+      <main className="relative z-5 py-10 flex justify-center">
+        <div className="w-full max-w-6xl px-4">
+          {MissionComponent}
+        </div>
+      </main>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/app/structures/telescope/[project]/page.tsx b/app/structures/telescope/[project]/page.tsx
new file mode 100644
index 000000000..1a50d5309
--- /dev/null
+++ b/app/structures/telescope/[project]/page.tsx
@@ -0,0 +1,80 @@
+'use client'
+
+import { useEffect, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { useSessionContext } from "@supabase/auth-helpers-react";
+
+import GameNavbar from "@/components/Layout/Tes";
+import PlanetHuntersSteps from "@/components/Structures/Missions/Astronomers/PlanetHunters/PlanetHunters";
+import { TelescopeDiskDetector } from "@/components/Projects/Telescopes/DiskDetector";
+import DailyMinorPlanetMissions from "@/components/Structures/Missions/Astronomers/DailyMinorPlanet/DailyMinorPlanet";
+import SunspotSteps from "@/components/Projects/Telescopes/Sunspots/SunspotShell";
+
+export default function TelescopeProjectRoute() {
+  const { project } = useParams();
+  const router = useRouter();
+
+  const { session, isLoading } = useSessionContext();
+
+  const [ProjectComponent, setProjectComponent] = useState<React.ReactNode | null>(null);
+
+  useEffect(() => {
+    if (!isLoading && !session) {
+      router.push('/');
+    }
+  }, [isLoading, session, router]);
+
+  useEffect(() => {
+    if (!isLoading && session) {
+      switch (project) {
+        case 'planet-hunters':
+          setProjectComponent(<PlanetHuntersSteps />);
+          break;
+        case 'sunspots':
+          setProjectComponent(<SunspotSteps />);
+          break;
+        case 'daily-minor-planet':
+          setProjectComponent(<DailyMinorPlanetMissions />);
+          break;
+        case 'disk-detective':
+          setProjectComponent(<TelescopeDiskDetector />);
+          break;
+        default:
+          router.push('/structures/telescope');
+          break;
+      };
+    };
+  }, [project, session, isLoading, router]);
+
+  if (isLoading) {
+    return null;
+  };
+
+  return (
+    <div className="relative min-h-screen w-full flex flex-col">
+      <img
+        className="absolute inset-0 w-full h-full object-cover"
+        src="/assets/Backdrops/Earth.png"
+        alt='Earth Background'
+      />
+
+      <div className="relative z-10 pb-8">
+        <GameNavbar />
+      </div>
+
+      <main className="flex-grow z-10 px-4 py-12 flex justify-center items-start overflow-y-auto">
+        <div className="max-w-4xl w-full">
+          <div className="mb-6 flex justify-end">
+            <button
+              onClick={() => router.push('/structures/telescope')}
+              className="bg-muted hover:bg-muted/70 text-sm text-foreground border border-border rounded-md px-4 py-2 transition-colors"
+            >
+              All Projects
+            </button>
+          </div>
+          {ProjectComponent}
+        </div>
+      </main>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/app/structures/telescope/page.tsx b/app/structures/telescope/page.tsx
index 80f528695..f587e816e 100644
--- a/app/structures/telescope/page.tsx
+++ b/app/structures/telescope/page.tsx
@@ -1,168 +1,68 @@
-'use client';
+'use client'
 
 import { useRouter } from "next/navigation";
 import Home from "@/app/page";
 import GameNavbar from "@/components/Layout/Tes";
-import { TelescopeDiskDetector } from "@/components/Projects/Telescopes/DiskDetector";
-import SunspotSteps from "@/components/Projects/Telescopes/Sunspots/SunspotShell";
-import DailyMinorPlanetMissions from "@/components/Structures/Missions/Astronomers/DailyMinorPlanet/DailyMinorPlanet";
-import PlanetHuntersSteps from "@/components/Structures/Missions/Astronomers/PlanetHunters/PlanetHunters";
-import AstronomyResearch from "@/components/Research/AstronomyItems";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
-import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
-import {
-  BuildingIcon,
-  MoonStarIcon,
-  SunIcon,
-  TelescopeIcon,
-  TestTubeDiagonalIcon,
-  Trophy
-} from "lucide-react";
+import { useSession } from "@supabase/auth-helpers-react";
+import TelescopeViewport from "@/components/Structures/Telescope/telescope-viewport";
 import { useState } from "react";
 
 export default function TelescopeOnEarthPage() {
-  const supabase = useSupabaseClient();
-  const session = useSession();
   const router = useRouter();
-
-  const [activeComponent, setActiveComponent] = useState<React.ReactNode | null>(null);
+  const session = useSession();
+  const [simpleMode, setSimpleMode] = useState(false); // default: viewport mode
 
   if (!session) return <Home />;
 
-  const actions = [
-    {
-      icon: <Trophy className="w-6 h-6 text-[#D08770]" />,
-      text: "Upgrades",
-      dynamicComponent: <AstronomyResearch />,
-    },
-  ];
-
-  const buttons = [
-    {
-      icon: <TelescopeIcon className="w-6 h-6 text-[#88C0D0]" />,
-      text: "Discover planets",
-      dynamicComponent: <PlanetHuntersSteps />,
-    },
-    {
-      icon: <SunIcon className="w-6 h-6 text-[#EBCB8B]" />,
-      text: "Sunspot data",
-      dynamicComponent: <SunspotSteps />,
-    },
-    {
-      icon: <TestTubeDiagonalIcon className="w-6 h-6 text-[#B48EAD]" />,
-      text: "Find early solar systems",
-      dynamicComponent: <TelescopeDiskDetector />,
-    },
-    {
-      icon: <MoonStarIcon className="w-6 h-6 text-[#A3BE8C]" />,
-      text: "Discover asteroids",
-      dynamicComponent: <DailyMinorPlanetMissions />,
-    },
-  ];
-
-  const handleComponentChange = (component: React.ReactNode) => {
-    setActiveComponent(component);
-  };
-
-  const handleBack = () => {
-    setActiveComponent(null);
-  };
-
   return (
     <div className="relative min-h-screen w-full flex flex-col">
+      {/* Background Image */}
       <img
         className="absolute inset-0 w-full h-full object-cover"
         src="/assets/Backdrops/Earth.png"
         alt="Earth Background"
       />
 
-      <div className="w-full">
+      {/* Navbar */}
+      <div className="w-full z-10">
         <GameNavbar />
       </div>
 
-      <div className="flex flex-row space-y-4">
+      {/* Dialog Wrapper */}
+      <div className="flex justify-center items-center flex-grow z-10 px-4">
         <Dialog
           defaultOpen
           onOpenChange={(open) => {
-            if (!open) {
-              router.push("/");
-            }
+            if (!open) router.push("/");
           }}
         >
           <DialogContent
-            className="p-6 rounded-3xl text-white max-w-3xl w-full h-[80vh] overflow-hidden flex flex-col justify-start"
-            style={{
-              background: "linear-gradient(135deg, rgba(191, 223, 245, 0.9), rgba(158, 208, 218, 0.85))",
-              color: "#2E3440",
-            }}
+            className={`p-0 w-full max-w-[90vw] h-[85vh] overflow-hidden flex flex-col ${
+              !simpleMode
+                ? "bg-transparent shadow-none"
+                : "bg-white/80 backdrop-blur-sm rounded-2xl p-4"
+            }`}
+            style={{ color: "#2E3440" }}
           >
-            {/* Back button when showing dynamic content */}
-            {activeComponent && (
-              <div className="w-full flex justify-end">
-                <button
-                  onClick={handleBack}
-                  className="text-[#4C566A] hover:text-[#BF616A] font-medium mb-2"
-                >
-                  ← Back
-                </button>
-              </div>
-            )}
+            {/* Mode Toggle */}
+            <div className="flex justify-end mb-2 px-4 pt-4">
+              <button
+                onClick={() => setSimpleMode(!simpleMode)}
+                className="bg-[#88C0D0] text-white px-4 py-1 rounded-md text-sm hover:bg-[#81A1C1] transition"
+              >
+                {simpleMode ? "View Telescope" : "All projects"}
+              </button>
+            </div>
 
-            {/* Content switcher */}
-            <div className="flex-grow overflow-y-auto w-full">
-              {activeComponent ? (
-                <div className="w-full h-full">{activeComponent}</div>
+            {/* Content */}
+            <div className="flex-grow overflow-hidden">
+              {!simpleMode ? (
+                <div className="h-full w-full overflow-hidden">
+                  <TelescopeViewport />
+                </div>
               ) : (
-                <>
-                  <div className="flex justify-between items-center">
-                    <div className="flex items-center space-x-2">
-                      <BuildingIcon className="w-8 h-8 text-[#A3BE8C]" />
-                      <h1 className="text-2xl font-bold text-[#2E3440]">Telescope</h1>
-                    </div>
-                  </div>
-
-                  <div className="flex justify-center my-4">
-                    <img
-                      src="/assets/Items/TransitingTelescope.png"
-                      alt="Telescope"
-                      className="w-20 h-20"
-                      width="80"
-                      height="80"
-                      style={{ aspectRatio: "80/80", objectFit: "cover" }}
-                    />
-                  </div>
-
-                  <div className="flex items-center justify-center my-4 space-x-4">
-                    {actions.map((action, index) => (
-                      <div
-                        key={index}
-                        className="flex flex-col items-center cursor-pointer"
-                        onClick={() => handleComponentChange(action.dynamicComponent)}
-                      >
-                        {action.icon}
-                        <p className="text-xs text-[#4C566A]">{action.text}</p>
-                      </div>
-                    ))}
-                  </div>
-
-                  <div className="gap-4 mt-6">
-                    <div className="flex flex-col items-center my-4 space-y-4">
-                      {buttons.map((button, index) => (
-                        <div
-                          key={index}
-                          className="flex items-center justify-center bg-[#D8DEE9]/60 text-[#2E3440] font-bold py-2 px-4 rounded-md shadow-sm hover:bg-[#E5E9F0] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#81A1C1] cursor-pointer"
-                          onClick={() => handleComponentChange(button.dynamicComponent)}
-                          style={{ width: "100%", maxWidth: "240px" }}
-                        >
-                          <div className="flex items-center justify-center">
-                            <div className="flex-shrink-0">{button.icon}</div>
-                            <p className="ml-2 text-sm text-[#3B4252]">{button.text}</p>
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                </>
+                <SimpleTelescopePanel router={router} />
               )}
             </div>
           </DialogContent>
@@ -170,4 +70,49 @@ export default function TelescopeOnEarthPage() {
       </div>
     </div>
   );
+}
+
+function SimpleTelescopePanel({ router }: { router: any }) {
+  const actions = [
+    {
+      icon: "🔧",
+      text: "Upgrades",
+      onClick: () => router.push('/research'),
+    },
+  ];
+
+  const buttons = [
+    { icon: "🔭", text: "Discover planets", route: "planet-hunters" },
+    { icon: "☀️", text: "Sunspot data", route: "sunspots" },
+    { icon: "🧪", text: "Find early solar systems", route: "disk-detective" },
+    { icon: "🌑", text: "Discover asteroids", route: "daily-minor-planet" },
+  ];
+
+  return (
+    <div className="flex flex-col items-center justify-center space-y-6 h-full w-full overflow-y-auto">
+      <div className="flex space-x-6">
+        {actions.map((action, i) => (
+          <button
+            key={i}
+            onClick={action.onClick}
+            className="text-[#2E3440] bg-[#D8DEE9] px-3 py-2 rounded shadow-sm text-sm hover:bg-[#E5E9F0]"
+          >
+            {action.icon} {action.text}
+          </button>
+        ))}
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 w-full max-w-md">
+        {buttons.map((btn, i) => (
+          <button
+            key={i}
+            onClick={() => router.push(`/structures/telescope/${btn.route}`)}
+            className="flex items-center justify-center bg-[#D8DEE9] text-[#2E3440] py-3 px-4 rounded shadow hover:bg-[#E5E9F0]"
+          >
+            <span className="mr-2">{btn.icon}</span> {btn.text}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
 };
\ No newline at end of file
diff --git a/app/tests/page.tsx b/app/tests/page.tsx
index 3b4bf0c80..19e7ba682 100644
--- a/app/tests/page.tsx
+++ b/app/tests/page.tsx
@@ -1,12 +1,16 @@
 "use client";
 
+import PlanetGenerator from "@/components/Data/Generator/Astronomers/PlanetHunters/PlanetGenerator";
 // import PlanetGenerator from "@/components/Data/Generator/Astronomers/PlanetHunters/PlanetGenerator";
 import WeatherEventsOverview from "@/components/Data/Generator/Weather/EventsAcrossMyLocations";
 import WeatherEventStatus from "@/components/Data/Generator/Weather/EventsCounter";
 import MilestoneTotalCompleted from "@/components/Structures/Missions/Milestones/Completed";
+import MilestoneCard from "@/components/Structures/Missions/Milestones/MilestoneCard";
 import TotalPoints from "@/components/Structures/Missions/Stardust/Total";
 import MyLocationIds from "@/content/Classifications/UserLocationPK";
 import MySettlementsLocations from "@/content/Classifications/UserLocations";
+import NPSPopup from "@/lib/helper/nps-popup";
+// import TelescopeViewport from "@/telescope-viewport";
 import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import { useEffect, useState } from "react";
 // import { PlanetGenerator } from "starsailors-planet-generator";
@@ -37,13 +41,14 @@ export default function TestPage() {
         setLocationIds(parsedData);
       }
       setLoading(false);
-    }
+    };
 
     fetchLocationIds();
   }, [session]);
 
   return (
-    <div className="min-h-screen  p-4 space-y-8">
+    <div className="min-h-screen bg-black  p-4 space-y-8">
+      {/* <NPSPopup userId={session?.user.id} onClose={() => {}} isOpen={true} /> */}
       {/* <MySettlementsLocations /> */}
       {/* <MilestoneTotalCompleted />
       <TotalPoints />
@@ -55,7 +60,8 @@ export default function TestPage() {
                   />
                   <MyLocationIds /> */}
       {/* <WeatherEventsOverview /> */}
-
+      {/* <TelescopeViewport /> */}
+      {/* <PlanetGenerator classificationId="1" />   */}
       {/* <PlanetGenerator classificationId={1} biome={'RockyHighlands'} biomass={0.01} density={3.5} /> */}
     </div>
   );
diff --git a/components/(scenes)/deploy/ActivityHeader.tsx b/components/(scenes)/deploy/ActivityHeader.tsx
new file mode 100644
index 000000000..aefa2b9a6
--- /dev/null
+++ b/components/(scenes)/deploy/ActivityHeader.tsx
@@ -0,0 +1,103 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
+import { AvatarGenerator } from "@/components/Account/Avatar";
+import ProfileDetailsPanel from "@/components/Account/ProfileDetailsPanel";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import UserMilestoneMissionSummary from "@/components/Structures/Missions/MissionProgress";
+
+export default function ActivityHeader({
+  landmarksExpanded,
+  onToggleLandmarks,
+  scrolled,
+}: {
+  landmarksExpanded: boolean;
+  onToggleLandmarks: () => void;
+  scrolled: boolean;
+}) {
+  const supabase = useSupabaseClient();
+  const session = useSession();
+
+  const [profile, setProfile] = useState<{ classificationPoints: number | null } | null>(null);
+  const [showDetailsModal, setShowDetailsModal] = useState(false);
+
+  useEffect(() => {
+    if (!session?.user?.id) return;
+
+    const fetchData = async () => {
+      const { data: profileData } = await supabase
+        .from("profiles")
+        .select("classificationPoints")
+        .eq("id", session.user.id)
+        .maybeSingle();
+      setProfile(profileData);
+    };
+
+    fetchData();
+  }, [session, supabase]);
+
+  return (
+    <header
+      className={`transition-all duration-500 w-full px-6 flex items-center justify-between bg-cover bg-center bg-no-repeat`}
+      style={{
+        height: scrolled ? 60 : landmarksExpanded ? "70vh" : 220,
+        backgroundImage: "url('/assets/Backdrops/Earth.png')",
+      }}
+    >
+      <div className="flex items-center gap-4 z-10 text-white">
+        {!scrolled && (
+          <div className="w-20 h-20 rounded-full border-2 border-white overflow-hidden">
+            <AvatarGenerator author={session?.user.id ?? ""} />
+          </div>
+        )}
+        <div className="flex flex-col">
+          <h2 className="text-2xl font-bold">{session?.user?.email || "User"}</h2>
+
+          {!scrolled && (
+            <div className="mt-2 flex flex-col gap-2">
+              <Button
+                onClick={() => setShowDetailsModal(true)}
+                variant="secondary"
+                className="bg-indigo-600 hover:bg-indigo-700 text-white text-sm px-3 py-1"
+              >
+                View Profile
+              </Button>
+
+              <Button
+                onClick={onToggleLandmarks}
+                className="inline-flex items-center px-3 py-1 rounded bg-purple-600 hover:bg-purple-700 transition text-white font-semibold text-sm"
+              >
+                {landmarksExpanded ? "Hide Landmarks" : "View Landmarks"}
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {!scrolled && (
+        <div className="text-white text-right flex flex-col items-end z-10 gap-4">
+          <div className="text-xl font-semibold">
+            {profile?.classificationPoints ?? 0} Stardust
+          </div>
+          <UserMilestoneMissionSummary />
+        </div>
+      )}
+
+      <Dialog open={showDetailsModal} onOpenChange={setShowDetailsModal}>
+        <DialogContent className="max-w-3xl">
+          <DialogHeader>
+            <DialogTitle className="text-indigo-700">Your Profile</DialogTitle>
+          </DialogHeader>
+          <ProfileDetailsPanel onClose={() => setShowDetailsModal(false)} />
+        </DialogContent>
+      </Dialog>
+    </header>
+  );
+};
\ No newline at end of file
diff --git a/components/(scenes)/deploy/AutomatonItems.tsx b/components/(scenes)/deploy/AutomatonItems.tsx
index e11d2b323..05e8e854d 100644
--- a/components/(scenes)/deploy/AutomatonItems.tsx
+++ b/components/(scenes)/deploy/AutomatonItems.tsx
@@ -24,7 +24,8 @@ const automatons: Vehicle[] = [
   {
     id: "1",
     name: "Probe",
-    description: "Simple and versatile satellite used to obtain data of nearby exoplanets",
+    // description: "Simple and versatile satellite used to obtain data of nearby exoplanets",
+    description: "Send probes to your discovered planets to find clouds and study the surface",
     image: "/assets/Automatons/Sat.png",
     stats: { speed: 100, armor: 100, capacity: 100 },
     cost: 1,
@@ -33,7 +34,8 @@ const automatons: Vehicle[] = [
   {
     id: "2",
     name: "Scout Roover",
-    description: "Train roover",
+    // description: "Train roover",
+    description: "Send rovers alongside your probes to planets to train the rover AI and find cool sights (and alien artifacts) on the planets discovered by you and the community!",
     image: "/assets/Automatons/ExploreRover1.png",
     stats: { speed: 100, armor: 100, capacity: 100 },
     cost: 1,
@@ -94,7 +96,7 @@ export default function AutomatonDeploySection() {
       if (!data || data.length === 0) {
         setDeployDisabled(false);
         return;
-      }
+      };
 
       const now = new Date();
       const currentWeek = getISOWeekYear(now);
@@ -152,8 +154,8 @@ export default function AutomatonDeploySection() {
         await fetch(`api/gameplay/research/upgrades?techType=proberange&count=${probeDistance}`);
       } catch (error) {
         console.error("Error fetching research data:", error);
-      }
-    }
+      };
+    };
 
     fetchResearchData();
   }, [session, supabase]);
@@ -193,7 +195,7 @@ export default function AutomatonDeploySection() {
     if (fetchErr) {
       console.error("Error fetching existing linked anomalies:", fetchErr);
       return;
-    }
+    };
 
     const now = new Date();
     const currentWeek = getISOWeekYear(now);
@@ -239,19 +241,22 @@ export default function AutomatonDeploySection() {
 
     const neededSets: Record<string, number> = {};
 
-    rovers.forEach(() => {
-      getRandomTypes(["AI4M", "JVH"]).forEach((type) => {
-        const key = anomalySetMap[type];
-        neededSets[key] = (neededSets[key] || 0) + 1;
-      });
-    });
+const roverCount = rovers.length;
+const probeCount = probes.length;
 
-    probes.forEach(() => {
-      getRandomTypes(["P4", "Clouds"]).forEach((type) => {
-        const key = anomalySetMap[type];
-        neededSets[key] = (neededSets[key] || 0) + 1;
-      });
-    });
+// Ensure 3 of each anomaly set for every rover
+neededSets["automaton-aiForMars"] = roverCount * 3;
+neededSets["lidar-jovianVortexHunter"] = roverCount * 3;
+neededSets["satellite-planetFour"] = roverCount * 3;
+neededSets["cloudspottingOnMars"] = roverCount * 3;
+
+// For probes, keep the randomized behavior (optional: adjust to fixed 2 each as well if needed)
+probes.forEach(() => {
+  getRandomTypes(["P4", "Clouds"]).forEach((type) => {
+    const key = anomalySetMap[type];
+    neededSets[key] = (neededSets[key] || 0) + 1;
+  });
+});
 
     const anomalyIdPool: Record<string, number[]> = {};
 
@@ -300,7 +305,22 @@ export default function AutomatonDeploySection() {
       });
     };
 
-    assignAnomalies(rovers, ["AI4M", "JVH"], "Rover");
+    // Assign anomalies for rovers: 3 each of all 4 types per rover
+rovers.forEach((loc) => {
+  ["automaton-aiForMars", "lidar-jovianVortexHunter", "satellite-planetFour", "cloudspottingOnMars"].forEach((set) => {
+    for (let i = 0; i < 3; i++) {
+      const ids = anomalyIdPool[set] || [];
+      const assignedId = ids.length ? ids.shift()! : null;
+
+      assignments.push({
+        classification: loc,
+        anomalySet: set,
+        anomalyId: assignedId,
+        automaton: "Rover",
+      });
+    }
+  });
+});
     assignAnomalies(probes, ["P4", "Clouds"], "Probe");
 
     const entriesToInsert = assignments
diff --git a/components/(scenes)/deploy/BiodomeStationCard.tsx b/components/(scenes)/deploy/BiodomeStationCard.tsx
index ce8815729..0835cbb0e 100644
--- a/components/(scenes)/deploy/BiodomeStationCard.tsx
+++ b/components/(scenes)/deploy/BiodomeStationCard.tsx
@@ -67,10 +67,10 @@ const stationConfig: Station[] = [
         mass: 0.25,
       },
     ],
-    location: {
-      coordinates: "23.4162° N, 75.2397° W",
-      depth: "+2m",
-    },
+    // location: {
+    //   coordinates: "23.4162° N, 75.2397° W",
+    //   depth: "+2m",
+    // },
     built: false,
   },
   {
@@ -91,10 +91,10 @@ const stationConfig: Station[] = [
         mass: 0.0000001,
       },
     ],
-    location: {
-      coordinates: "2.4162° S, 54.2397° W",
-      altitude: "-10m",
-    },
+    // location: {
+      // coordinates: "2.4162° S, 54.2397° W",
+      // altitude: "-10m",
+    // },
     built: false,
   },
 ];
diff --git a/components/(scenes)/deploy/TelescopeRange.tsx b/components/(scenes)/deploy/TelescopeRange.tsx
index 142da0c2e..8ab7cdd49 100644
--- a/components/(scenes)/deploy/TelescopeRange.tsx
+++ b/components/(scenes)/deploy/TelescopeRange.tsx
@@ -28,6 +28,7 @@ export default function TelescopeRangeSlider() {
     const [dropRates, setDropRates] = useState<Record<string, number>>({});
     const [fetchedAnomalies, setFetchedAnomalies] = useState<any[]>([]);
     const [alreadyDeployed, setAlreadyDeployed] = useState<boolean>(false);
+    const [deploymentMessage, setDeploymentMessage] = useState<string | null>(null);
 
     // Calculate weighted anomaly drop rates whenever the slider changes
     useEffect(() => {
@@ -91,6 +92,7 @@ export default function TelescopeRangeSlider() {
                 .from("linked_anomalies")
                 .select("*")
                 .eq("automaton", "Telescope")
+                .eq("author", session?.user.id)
                 .gte("date", oneWeekAgo.toISOString());
 
             if (error) {
@@ -104,7 +106,7 @@ export default function TelescopeRangeSlider() {
         };
 
         checkDeployment();
-    }, [supabase]);
+    }, [supabase, session?.user?.id]);
 
     const activeDropTypes = [
         {
@@ -140,8 +142,6 @@ export default function TelescopeRangeSlider() {
     };
 
     const handleDeploy = async () => {
-        // This code block should never run if alreadyDeployed is true,
-        // but is retained for logic completeness.
         const oneWeekAgo = new Date();
         oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
 
@@ -198,7 +198,10 @@ export default function TelescopeRangeSlider() {
             }
 
             if (data && data.length > 0) {
-                const anomaly = data[0];
+                // 🔧 FIX: Pick a random anomaly from the list instead of always using data[0]
+                const randomIndex = Math.floor(Math.random() * data.length);
+                const anomaly = data[randomIndex];
+
                 anomalies.push(anomaly);
 
                 const { error: insertError } = await supabase
@@ -222,12 +225,20 @@ export default function TelescopeRangeSlider() {
 
         console.log("Fetched anomalies:", anomalies);
         setFetchedAnomalies(anomalies);
+        if (anomalies.length > 0) {
+            const anomalyNames = anomalies.map((a) => a.anomalySet).join(", ");
+            setDeploymentMessage(`Telescope successfully deployed. New anomalies detected: ${anomalyNames}. Open the telescope interface to begin your observations.`);
+        };
     };
 
-    // If already deployed this week, show only a message
     if (alreadyDeployed) {
         return (
             <div className="container mx-auto py-8 px-4 max-w-2xl text-center text-sm text-muted-foreground">
+                {deploymentMessage && (
+                    <div className="bg-green-100 text-green-800 border border-green-300 p-4 rounded-md mb-4 text-sm">
+                        {deploymentMessage}
+                    </div>
+                )}
                 <p className="bg-muted border border-border p-6 rounded-lg shadow-sm">
                     The Telescope has already been deployed this week. You’ll be able to recalibrate and search again next week.
                 </p>
@@ -235,9 +246,13 @@ export default function TelescopeRangeSlider() {
         );
     }
 
-    // Main UI if not yet deployed
     return (
         <div className="container mx-auto py-2 pb-8 px-4 max-w-2xl">
+            {deploymentMessage && (
+                <div className="bg-green-100 text-green-800 border border-green-300 p-4 rounded-md mb-4 text-sm">
+                    {deploymentMessage}
+                </div>
+            )}
             <Card className="text-sm">
                 <CardHeader className="pb-2">
                     <CardTitle className="text-xl flex items-center gap-2">
@@ -294,14 +309,14 @@ export default function TelescopeRangeSlider() {
             </Card>
         </div>
     );
-}
+};
 
 interface DropRateItemProps {
     icon: React.ReactNode;
     label: string;
     rate: number;
     colorClass: string;
-}
+};
 
 function DropRateItem({
     icon,
diff --git a/components/(scenes)/deploy/TelescopeViewportRange.tsx b/components/(scenes)/deploy/TelescopeViewportRange.tsx
new file mode 100644
index 000000000..961bd0735
--- /dev/null
+++ b/components/(scenes)/deploy/TelescopeViewportRange.tsx
@@ -0,0 +1,281 @@
+'use client'
+
+import { useState, useEffect, useCallback } from "react"
+import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react"
+import { TelescopeView } from "@/components/Structures/Telescope/telescope-view"
+import type { Anomaly, Star } from "@/types/Structures/telescope"
+import { generateSectorName, generateStars } from "@/utils/Structures/Telescope/sector-utils"
+import DeployTelescopeSidebar from "./sub/TelescopeSidebar"
+import DeployTelescopeMobileHeader from "./sub/TelescopeMobileHeader"
+import DeployTelescopeOverlay from "./sub/TelescopeOverlay"
+
+export interface DatabaseAnomaly {
+  id: number
+  content: string | null
+  anomalytype: string | null
+  avatar_url: string | null
+  created_at: string
+  configuration: any
+  parentAnomaly: number | null
+  anomalySet: string | null
+}
+type LocalAnomaly = Anomaly & { dbData: DatabaseAnomaly }
+
+function seededRandom1(seed: number, salt: number = 0) {
+  let x = Math.sin(seed + salt) * 10000
+  return x - Math.floor(x)
+}
+
+function generateAnomalyFromDB(dbAnomaly: DatabaseAnomaly, sectorX: number, sectorY: number): LocalAnomaly {
+  const seed = dbAnomaly.id + sectorX * 1000 + sectorY
+  return {
+    id: `db-${dbAnomaly.id}`,
+    name: dbAnomaly.content || `TESS-${String(dbAnomaly.id).padStart(3, "0")}`,
+    x: seededRandom1(seed, 1) * 80 + 10,
+    y: seededRandom1(seed, 2) * 80 + 10,
+    brightness: seededRandom1(seed, 3) * 0.7 + 0.5,
+    size: seededRandom1(seed, 4) * 0.8 + 0.6,
+    pulseSpeed: seededRandom1(seed, 5) * 2 + 1,
+    glowIntensity: seededRandom1(seed, 6) * 0.5 + 0.3,
+    color: "#78cce2",
+    shape: "circle",
+    sector: generateSectorName(sectorX, sectorY),
+    discoveryDate: new Date().toLocaleDateString(),
+    type: "exoplanet",
+    project: "planet-hunters",
+    dbData: dbAnomaly,
+  }
+}
+
+export default function DeployTelescopeViewport() {
+  const supabase = useSupabaseClient()
+  const session = useSession()
+
+  const [currentSector, setCurrentSector] = useState({ x: 0, y: 0 })
+  const [tessAnomalies, setTessAnomalies] = useState<DatabaseAnomaly[]>([])
+  const [sectorAnomalies, setSectorAnomalies] = useState<Anomaly[]>([])
+  const [stars, setStars] = useState<Star[]>([])
+  const [selectedSector, setSelectedSector] = useState<{ x: number; y: number } | null>(null)
+  const [alreadyDeployed, setAlreadyDeployed] = useState(false)
+  const [deploymentMessage, setDeploymentMessage] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [deploying, setDeploying] = useState(false)
+  const [isDragging, setIsDragging] = useState(false)
+  const [dragStart, setDragStart] = useState({ x: 0, y: 0 })
+  const [focusedAnomaly, setFocusedAnomaly] = useState<Anomaly | null>(null)
+
+  const fetchTessAnomalies = async () => {
+    const { data, error } = await supabase
+      .from("anomalies")
+      .select("*")
+      .eq("anomalySet", "telescope-tess")
+
+    if (error) {
+      console.error("Error fetching anomalies:", error)
+      return
+    }
+    if (data) {
+      setTessAnomalies(data)
+    }
+  }
+
+  const checkDeployment = async () => {
+    if (!session?.user?.id) return
+    const userId = session.user.id
+    const oneWeekAgo = new Date()
+    oneWeekAgo.setDate(oneWeekAgo.getDate() - 7)
+
+    const { data: linkedAnomalies, error: linkedAnomaliesError } = await supabase
+      .from("linked_anomalies")
+      .select("*")
+      .eq("author", userId)
+      .gte("date", oneWeekAgo.toISOString())
+
+    if (linkedAnomaliesError) {
+      console.error("Error fetching linked anomalies:", linkedAnomaliesError)
+      return
+    }
+
+    const { data: comments, error: commentsError } = await supabase
+      .from("comments")
+      .select("id, classification_id, classification:classifications(author)")
+      .eq("author", userId)
+      .gte("created_at", oneWeekAgo.toISOString())
+
+    if (commentsError) {
+      console.error("Error fetching comments:", commentsError)
+      return
+    }
+
+    const validComments = (comments || []).filter(
+      (c: any) => c.classification?.author && c.classification.author !== userId
+    )
+
+    const { data: votes, error: votesError } = await supabase
+      .from("votes")
+      .select("id, classification_id, classification:classifications(author)")
+      .eq("user_id", userId)
+      .eq("vote_type", "up")
+      .gte("created_at", oneWeekAgo.toISOString())
+
+    if (votesError) {
+      console.error("Error fetching votes:", votesError)
+      return
+    }
+
+    const validVotes = (votes || []).filter(
+      (v: any) => v.classification?.author && v.classification.author !== userId
+    )
+
+    const linkedCount = linkedAnomalies?.length ?? 0
+    const commentsCount = validComments.length
+    const votesCount = validVotes.length
+    const additionalDeploys = Math.floor(votesCount / 3) + commentsCount
+    const totalAllowedDeploys = linkedCount + additionalDeploys
+    const userCanRedeploy = totalAllowedDeploys > linkedCount
+
+    console.log("Linked anomalies deployed this week:", linkedCount)
+    console.log("Valid comments on others' classifications this week:", commentsCount)
+    console.log(`Valid votes on others' classifications this week: ${votesCount} (counts as ${Math.floor(votesCount / 3)} deploys)`)
+    console.log("Total allowed deploys:", totalAllowedDeploys)
+    console.log("User can redeploy?", userCanRedeploy ? "YES" : "NO")
+
+    if (linkedCount === 0) {
+      setAlreadyDeployed(false)
+      setDeploymentMessage(null)
+    } else if (userCanRedeploy) {
+      setAlreadyDeployed(false)
+      setDeploymentMessage("You have earned additional deploys by interacting with the community this week!")
+    } else {
+      setAlreadyDeployed(true)
+      setDeploymentMessage("Telescope has already been deployed this week. Recalibrate & search again next week.")
+    }
+  }
+
+  const loadSector = useCallback((x: number, y: number) => {
+    setStars(generateStars(x, y))
+    const seed = x * 1000 + y
+    const candidates = tessAnomalies
+      .filter((_, i) => Math.floor(seededRandom1(seed + i) * 10) < 3)
+      .slice(0, 8)
+      .map(a => generateAnomalyFromDB(a, x, y))
+    setSectorAnomalies(candidates)
+  }, [tessAnomalies])
+
+  const handleDeploy = async () => {
+    if (!session?.user?.id || !selectedSector || alreadyDeployed) return
+    setDeploying(true)
+    const seed = selectedSector.x * 1000 + selectedSector.y
+    const selectedAnomalies = tessAnomalies
+      .filter((_, i) => Math.floor(seededRandom1(seed, i) * 10) < 3)
+      .slice(0, 4)
+    if (selectedAnomalies.length === 0) {
+      setDeploymentMessage("No TESS anomalies found in selected sector.")
+      setDeploying(false)
+      return
+    }
+    const inserts = selectedAnomalies.map(anomaly =>
+      supabase.from("linked_anomalies").insert({
+        author: session.user.id,
+        anomaly_id: anomaly.id,
+        classification_id: null,
+        automaton: "Telescope",
+      })
+    )
+    const results = await Promise.all(inserts)
+    const hasError = results.some(r => r.error)
+    setDeploymentMessage(
+      hasError
+        ? "Error deploying telescope. Please try again."
+        : `Telescope successfully deployed! ${selectedAnomalies.length} TESS exoplanet candidates are now being monitored.`
+    )
+    setAlreadyDeployed(!hasError)
+    setDeploying(false)
+  }
+
+  const handleAnomalyClick = (a: Anomaly) => setFocusedAnomaly(a)
+  const handleMouseDown = (e: React.MouseEvent) => {
+    setDragStart({ x: e.clientX, y: e.clientY })
+    setIsDragging(true)
+  }
+  const handleMouseMove = (e: React.MouseEvent) => {
+    if (!isDragging) return
+    const deltaX = e.clientX - dragStart.x
+    const deltaY = e.clientY - dragStart.y
+    if (Math.abs(deltaX) > 50 || Math.abs(deltaY) > 50) {
+      setCurrentSector({
+        x: currentSector.x - Math.sign(deltaX),
+        y: currentSector.y - Math.sign(deltaY),
+      })
+      setDragStart({ x: e.clientX, y: e.clientY })
+    }
+  }
+  const handleMouseUp = () => setIsDragging(false)
+
+  useEffect(() => {
+    const load = async () => {
+      setLoading(true)
+      await fetchTessAnomalies()
+      await checkDeployment()
+      setLoading(false)
+    }
+    load()
+  }, [session])
+
+  useEffect(() => {
+    if (!loading && tessAnomalies.length > 0) {
+      loadSector(currentSector.x, currentSector.y)
+    }
+  }, [currentSector, loadSector, loading, tessAnomalies])
+
+  if (loading) {
+    return (
+      <div className="h-screen bg-[#002439] flex items-center justify-center">
+        <div className="text-[#e4eff0] text-xl font-mono">Loading telescope data....</div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="h-screen bg-[#002439] flex flex-col lg:flex-row overflow-hidden">
+      <DeployTelescopeMobileHeader
+        sectorAnomalies={sectorAnomalies}
+        selectedSector={selectedSector}
+        alreadyDeployed={alreadyDeployed}
+        deploying={deploying}
+        onDeploy={handleDeploy}
+      />
+      <DeployTelescopeSidebar
+        tessAnomalies={tessAnomalies}
+        sectorAnomalies={sectorAnomalies}
+        selectedSector={selectedSector}
+        alreadyDeployed={alreadyDeployed}
+        deploying={deploying}
+        deploymentMessage={deploymentMessage}
+        onDeploy={handleDeploy}
+        currentSector={currentSector}
+        setCurrentSector={setCurrentSector}
+        setSelectedSector={setSelectedSector}
+      />
+      <div className="flex-1 relative">
+        <DeployTelescopeOverlay
+          selectedSector={selectedSector}
+          currentSector={currentSector}
+          sectorAnomalies={sectorAnomalies}
+        />
+        <TelescopeView
+          stars={stars}
+          filteredAnomalies={sectorAnomalies}
+          isDragging={isDragging}
+          handleMouseDown={handleMouseDown}
+          handleMouseMove={handleMouseMove}
+          handleMouseUp={handleMouseUp}
+          handleAnomalyClick={handleAnomalyClick}
+          currentSectorName=""
+          focusedAnomaly={focusedAnomaly}
+          anomalies={sectorAnomalies}
+        />
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/components/(scenes)/deploy/sub/TelescopeMobileHeader.tsx b/components/(scenes)/deploy/sub/TelescopeMobileHeader.tsx
new file mode 100644
index 000000000..c57ac6b10
--- /dev/null
+++ b/components/(scenes)/deploy/sub/TelescopeMobileHeader.tsx
@@ -0,0 +1,47 @@
+import { Button } from "@/components/ui/button"
+import { Crosshair } from "lucide-react"
+import type { Anomaly } from "@/types/Structures/telescope"
+
+interface Props {
+  sectorAnomalies: Anomaly[]
+  selectedSector: { x: number; y: number } | null
+  alreadyDeployed: boolean
+  deploying: boolean
+  onDeploy: () => void
+}
+
+export default function DeployTelescopeMobileHeader({
+  sectorAnomalies,
+  selectedSector,
+  alreadyDeployed,
+  deploying,
+  onDeploy,
+}: Props) {
+  return (
+    <div className="lg:hidden bg-[#005066]/95 border-b-2 border-[#78cce2]/30 p-4">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <Crosshair className="h-6 w-6 text-[#78cce2]" />
+          <div>
+            <h1 className="text-[#e4eff0] font-bold text-lg">Deploy telescope</h1>
+            <p className="text-[#78cce2] text-sm">
+              {sectorAnomalies.length} targets
+              {selectedSector && " • Sector selected"}
+            </p>
+          </div>
+        </div>
+
+        {selectedSector && (
+          <Button
+            onClick={onDeploy}
+            disabled={alreadyDeployed || deploying}
+            size="sm"
+            className="bg-[#78cce2] text-[#002439] hover:bg-[#e4eff0]"
+          >
+            {deploying ? "Deploying..." : alreadyDeployed ? "Deployed" : "Deploy"}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/components/(scenes)/deploy/sub/TelescopeNavControls.tsx b/components/(scenes)/deploy/sub/TelescopeNavControls.tsx
new file mode 100644
index 000000000..f5e9eb0ee
--- /dev/null
+++ b/components/(scenes)/deploy/sub/TelescopeNavControls.tsx
@@ -0,0 +1,112 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  Crosshair,
+  Target,
+} from "lucide-react";
+
+interface Sector {
+  x: number;
+  y: number;
+};
+
+interface Props {
+  currentSector: Sector;
+  setCurrentSector: (sector: Sector) => void;
+  setSelectedSector: (sector: Sector) => void;
+};
+
+export default function DeployTelescopeViewportNavigationControls({
+  currentSector,
+  setCurrentSector,
+  setSelectedSector,
+}: Props) {
+  const handleNavigate = (direction: "up" | "down" | "left" | "right") => {
+    const newSector = { ...currentSector };
+    switch (direction) {
+      case "up":
+        newSector.y -= 1;
+        break;
+      case "down":
+        newSector.y += 1;
+        break;
+      case "left":
+        newSector.x -= 1;
+        break;
+      case "right":
+        newSector.x += 1;
+        break;
+    };
+    setCurrentSector(newSector);
+  };
+
+  const handleSectorSelect = () => {
+    setSelectedSector({ ...currentSector });
+  };
+
+  return (
+    <Card className="m-4 bg-[#002439]/80 border-2 border-[#78cce2]/30">
+      <CardHeader className="pb-3">
+        <CardTitle className="text-[#e4eff0] text-base flex items-center gap-2">
+          <Crosshair className="h-4 w-4 text-[#78cce2]" /> Navigation
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <div className="grid grid-cols-3 gap-1 w-fit mx-auto">
+          <div></div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => handleNavigate("up")}
+            className="h-8 w-8 p-0 text-[#78cce2] hover:bg-[#78cce2]/20 border border-[#78cce2]/30"
+          >
+            <ChevronUp className="h-4 w-4" />
+          </Button>
+          <div></div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => handleNavigate("left")}
+            className="h-8 w-8 p-0 text-[#78cce2] hover:bg-[#78cce2]/20 border border-[#78cce2]/30"
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+          <div className="flex items-center justify-center">
+            <div className="w-3 h-3 bg-[#78cce2] rounded-full"></div>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => handleNavigate("right")}
+            className="h-8 w-8 p-0 text-[#78cce2] hover:bg-[#78cce2]/20 border border-[#78cce2]/30"
+          >
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+          <div></div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => handleNavigate("down")}
+            className="h-8 w-8 p-0 text-[#78cce2] hover:bg-[#78cce2]/20 border border-[#78cce2]/30"
+          >
+            <ChevronDown className="h-4 w-4" />
+          </Button>
+          <div></div>
+        </div>
+        <Button
+          onClick={handleSectorSelect}
+          className="w-full bg-[#4e7988] text-[#e4eff0] hover:bg-[#78cce2] hover:text-[#002439] text-sm"
+        >
+          <Target className="h-4 w-4 mr-2" />
+          Select Sector
+        </Button>
+      </CardContent>
+    </Card>
+  );
+};
\ No newline at end of file
diff --git a/components/(scenes)/deploy/sub/TelescopeOverlay.tsx b/components/(scenes)/deploy/sub/TelescopeOverlay.tsx
new file mode 100644
index 000000000..5a6c22e15
--- /dev/null
+++ b/components/(scenes)/deploy/sub/TelescopeOverlay.tsx
@@ -0,0 +1,53 @@
+import type { Anomaly } from "@/types/Structures/telescope";
+
+interface Props {
+  sectorAnomalies: Anomaly[]
+  currentSector: { x: number; y: number }
+  selectedSector: { x: number; y: number } | null
+}
+
+export default function DeployTelescopeOverlay({
+  sectorAnomalies,
+  currentSector,
+  selectedSector,
+}: Props) {
+  const isSelected = selectedSector &&
+    selectedSector.x === currentSector.x &&
+    selectedSector.y === currentSector.y
+
+  return (
+    <div className="absolute inset-0 pointer-events-none z-10">
+      <div className="absolute inset-4 lg:inset-8 border-4 lg:border-8 border-[#005066] rounded-full shadow-2xl shadow-[#002439]/50">
+        <div className="absolute inset-2 lg:inset-4 border-2 lg:border-4 border-[#78cce2]/50 rounded-full">
+          <div className="absolute top-1/2 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[#78cce2]/30 to-transparent transform -translate-y-1/2" />
+          <div className="absolute left-1/2 top-0 bottom-0 w-px bg-gradient-to-b from-transparent via-[#78cce2]/30 to-transparent transform -translate-x-1/2" />
+
+          <div className="absolute top-2 lg:top-4 left-2 lg:left-4 w-4 lg:w-6 h-4 lg:h-6 border-l-2 border-t-2 border-[#78cce2]/60" />
+          <div className="absolute top-2 lg:top-4 right-2 lg:right-4 w-4 lg:w-6 h-4 lg:h-6 border-r-2 border-t-2 border-[#78cce2]/60" />
+          <div className="absolute bottom-2 lg:bottom-4 left-2 lg:left-4 w-4 lg:w-6 h-4 lg:h-6 border-l-2 border-b-2 border-[#78cce2]/60" />
+          <div className="absolute bottom-2 lg:bottom-4 right-2 lg:right-4 w-4 lg:w-6 h-4 lg:h-6 border-r-2 border-b-2 border-[#78cce2]/60" />
+
+          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+            <div className="w-6 lg:w-8 h-6 lg:h-8 border-2 border-[#78cce2] rounded-full relative">
+              <div className="absolute top-1/2 left-1/2 w-2 h-2 bg-[#78cce2] rounded-full transform -translate-x-1/2 -translate-y-1/2 shadow-lg shadow-[#78cce2]/50" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="absolute top-6 lg:top-12 left-6 lg:left-12 text-[#78cce2] text-xs">
+        <div>TESS TARGETS: {sectorAnomalies.length}</div>
+        <div>STATUS: {selectedSector ? "SELECTED" : "SCANNING"}</div>
+      </div>
+
+      {isSelected && (
+        <div className="absolute inset-6 lg:inset-12 pointer-events-none">
+          <div className="absolute inset-0 border-4 border-[#78cce2] rounded-full opacity-50 animate-pulse" />
+          <div className="absolute top-4 left-4 bg-[#78cce2] text-[#002439] px-2 py-1 rounded text-xs font-bold">
+            SECTOR SELECTED
+          </div>
+        </div>
+      )}
+    </div>
+  )
+};
\ No newline at end of file
diff --git a/components/(scenes)/deploy/sub/TelescopeSidebar.tsx b/components/(scenes)/deploy/sub/TelescopeSidebar.tsx
new file mode 100644
index 000000000..7af870d18
--- /dev/null
+++ b/components/(scenes)/deploy/sub/TelescopeSidebar.tsx
@@ -0,0 +1,147 @@
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Zap, Target, Crosshair } from "lucide-react"
+import type { Anomaly } from "@/types/Structures/telescope"
+import DeployTelescopeViewportNavigationControls from "./TelescopeNavControls"
+
+interface DatabaseAnomaly {
+  id: number
+  content: string | null
+  anomalytype: string | null
+  avatar_url: string | null
+  created_at: string
+  configuration: any
+  parentAnomaly: number | null
+  anomalySet: string | null
+}
+
+// ✅ Locally extend Anomaly to include dbData
+type LocalAnomaly = Anomaly & {
+  dbData: DatabaseAnomaly
+}
+
+interface Props {
+  sectorAnomalies: Anomaly[]
+  tessAnomalies: DatabaseAnomaly[]
+  selectedSector: { x: number; y: number } | null
+  currentSector: { x: number; y: number }
+  setCurrentSector: (val: { x: number; y: number }) => void
+  setSelectedSector: (val: { x: number; y: number } | null) => void
+  onDeploy: () => void
+  alreadyDeployed: boolean
+  deploying: boolean
+  deploymentMessage: string | null
+}
+
+export default function DeployTelescopeSidebar({
+  sectorAnomalies,
+  tessAnomalies,
+  selectedSector,
+  currentSector,
+  setCurrentSector,
+  setSelectedSector,
+  onDeploy,
+  alreadyDeployed,
+  deploying,
+  deploymentMessage,
+}: Props) {
+  return (
+    <div className="hidden lg:flex w-80 h-full bg-[#005066]/95 border-r-4 border-[#78cce2]/30 flex-col backdrop-blur-sm shadow-2xl">
+      <div className="p-4 border-b-2 border-[#78cce2]/30 bg-gradient-to-r from-[#002439] to-[#005066]">
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 bg-gradient-to-br from-[#78cce2] to-[#4e7988] rounded-full flex items-center justify-center">
+            <Crosshair className="h-5 w-5 text-[#002439]" />
+          </div>
+          <div>
+            <h1 className="text-[#e4eff0] font-bold text-lg">Telescope Deploy</h1>
+            <p className="text-[#78cce2] text-sm">TESS Exoplanet Search</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="p-4 border-b-2 border-[#78cce2]/30">
+        <div className="text-[#e4eff0] text-sm mb-2">Targets in view: {sectorAnomalies.length}</div>
+        {selectedSector && (
+          <Badge className="bg-[#78cce2] text-[#002439] text-sm px-2 py-1">Sector selected</Badge>
+        )}
+      </div>
+
+      <DeployTelescopeViewportNavigationControls
+        currentSector={currentSector}
+        setCurrentSector={setCurrentSector}
+        setSelectedSector={setSelectedSector}
+      />
+
+      <Card className="m-4 bg-[#002439]/80 border-2 border-[#78cce2]/30">
+        <CardHeader className="pb-3">
+          <CardTitle className="text-[#e4eff0] text-base flex items-center gap-2">
+            <Zap className="h-4 w-4 text-[#78cce2]" />
+            Deploy
+          </CardTitle>
+          <CardDescription className="text-[#78cce2] text-sm">
+            Focus telescope on selected sector
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {selectedSector ? (
+            <div className="space-y-3">
+              <div className="bg-[#005066]/50 p-3 rounded border border-[#78cce2]/30">
+                <div className="text-[#78cce2] text-sm">
+                  {sectorAnomalies.length} TESS candidates detected
+                </div>
+              </div>
+
+              <Button
+                onClick={onDeploy}
+                disabled={alreadyDeployed || deploying}
+                className="w-full bg-[#78cce2] text-[#002439] hover:bg-[#e4eff0] text-sm py-2"
+              >
+                {deploying ? (
+                  <>
+                    <div className="w-4 h-4 border-2 border-[#002439] border-t-transparent rounded-full animate-spin mr-2" />
+                    Deploying...
+                  </>
+                ) : alreadyDeployed ? (
+                  "Already Deployed"
+                ) : (
+                  <>
+                    <Crosshair className="h-4 w-4 mr-2" />
+                    Deploy Telescope
+                  </>
+                )}
+              </Button>
+            </div>
+          ) : (
+            <div className="text-center py-4">
+              <Target className="h-8 w-8 text-[#78cce2]/50 mx-auto mb-2" />
+              <div className="text-[#e4eff0] text-sm mb-1">No sector selected</div>
+              <div className="text-[#78cce2] text-xs">Navigate and select a sector first</div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {deploymentMessage && (
+        <div className="m-4 p-3 bg-[#78cce2]/10 border border-[#78cce2]/30 rounded">
+          <div className="text-[#78cce2] text-sm">{deploymentMessage}</div>
+        </div>
+      )}
+
+      <div className="mt-auto p-4 border-t-2 border-[#78cce2]/30 bg-gradient-to-r from-[#005066]/50 to-transparent">
+        <div className="text-[#e4eff0] text-sm mb-1">TESS Mission</div>
+        <div className="text-[#78cce2] text-xs mb-2">Transiting Exoplanet Survey Satellite</div>
+        <div className="grid grid-cols-2 gap-2 text-center">
+          <div>
+            <div className="text-lg font-bold text-[#78cce2]">{tessAnomalies.length}</div>
+            <div className="text-xs text-[#e4eff0]">Total</div>
+          </div>
+          <div>
+            <div className="text-lg font-bold text-[#4e7988]">{sectorAnomalies.length}</div>
+            <div className="text-xs text-[#e4eff0]">In View</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+};
\ No newline at end of file
diff --git a/components/Account/FinishProfile.tsx b/components/Account/FinishProfile.tsx
new file mode 100644
index 000000000..e8509fbb6
--- /dev/null
+++ b/components/Account/FinishProfile.tsx
@@ -0,0 +1,179 @@
+"use client";
+
+import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
+import { useEffect, useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+
+function generateReferralCode(length = 8) {
+  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  let code = "";
+  for (let i = 0; i < length; i++) {
+    code += chars.charAt(Math.floor(Math.random() * chars.length));
+  }
+  return code;
+}
+
+export default function CompleteProfileForm({ onSuccess }: { onSuccess: () => void }) {
+  const supabase = useSupabaseClient();
+  const session = useSession();
+
+  const [username, setUsername] = useState("");
+  const [fullName, setFullName] = useState("");
+  const [ownReferralCode, setOwnReferralCode] = useState("");
+  const [referrerCodeInput, setReferrerCodeInput] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [errorMsg, setErrorMsg] = useState("");
+
+  useEffect(() => {
+    setOwnReferralCode(generateReferralCode());
+  }, []);
+
+  const handleSubmit = async () => {
+    if (!session) return;
+
+    if (username.trim().length < 3) {
+      setErrorMsg("Username must be at least 3 characters.");
+      return;
+    }
+
+    setLoading(true);
+    setErrorMsg("");
+
+    const userId = session.user.id;
+
+    const updates = {
+      id: userId,
+      username: username.trim(),
+      full_name: fullName.trim(),
+      referral_code: ownReferralCode,
+      updated_at: new Date(),
+    };
+
+    // Step 1: Update Profile
+    const { error: updateError } = await supabase.from("profiles").upsert(updates);
+
+    if (updateError) {
+      if (updateError.message.includes("profiles_username_key")) {
+        setErrorMsg("That username is already taken. Please choose another one.");
+      } else if (updateError.message.includes("profiles_referral_code_key")) {
+        setErrorMsg("Referral code already exists. Please try again.");
+      } else {
+        setErrorMsg(updateError.message || "Failed to update profile.");
+      }
+      setLoading(false);
+      return;
+    }
+
+    // Step 2: Handle referral (if input provided)
+    if (referrerCodeInput.trim()) {
+      // Check if user already has a referral
+      const { data: existingReferral, error: referralCheckError } = await supabase
+        .from("referrals")
+        .select("id")
+        .eq("referree_id", userId)
+        .maybeSingle();
+
+      if (!referralCheckError && !existingReferral) {
+        // Find user with referral_code
+        const { data: referrerProfile } = await supabase
+          .from("profiles")
+          .select("id, referral_code")
+          .eq("referral_code", referrerCodeInput.trim())
+          .maybeSingle();
+
+        if (referrerProfile) {
+          // Create referral from current user → referrer
+          await supabase.from("referrals").insert({
+            referree_id: userId,
+            referral_code: referrerCodeInput.trim(),
+          });
+
+          // Check if the referrer was also referred by someone else
+          const { data: referrersReferral } = await supabase
+            .from("referrals")
+            .select("referral_code")
+            .eq("referree_id", referrerProfile.id)
+            .maybeSingle();
+
+          if (referrersReferral) {
+            // Create an extended referral from current user → referrer's referrer
+            await supabase.from("referrals").insert({
+              referree_id: userId,
+              referral_code: referrersReferral.referral_code,
+            });
+          }
+        } else {
+          // Referral code not found — soft fail, but don't stop profile completion
+          console.warn("Invalid referral code provided");
+        }
+      }
+    }
+
+    if (typeof onSuccess === "function") {
+      onSuccess(); // Close the modal
+    }
+  };
+
+  return (
+    <section className="rounded-2xl bg-white/80 p-6 border shadow space-y-4 text-center max-w-xl mx-auto">
+      <h3 className="text-xl font-semibold text-indigo-700">Complete Your Profile</h3>
+      <p className="text-muted-foreground">
+        To unlock full gameplay access and referral features, please set your display name and username.
+      </p>
+
+      <div className="space-y-4 text-left">
+        <div>
+          <label className="block text-sm font-medium mb-1 text-[#2E3440]">Username</label>
+          <Input
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            placeholder="e.g. stargazer_42"
+            className="bg-white"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-1 text-[#2E3440]">Full Name</label>
+          <Input
+            value={fullName}
+            onChange={(e) => setFullName(e.target.value)}
+            placeholder="e.g. Ada Lovelace"
+            className="bg-white"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-1 text-[#2E3440]">Your Referral Code</label>
+          <Input
+            value={ownReferralCode}
+            readOnly
+            className="bg-gray-100 cursor-not-allowed text-muted-foreground"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-1 text-[#2E3440]">
+            Referral Code (optional)
+          </label>
+          <Input
+            value={referrerCodeInput}
+            onChange={(e) => setReferrerCodeInput(e.target.value)}
+            placeholder="Enter your friend's code"
+            className="bg-white"
+          />
+        </div>
+
+        {errorMsg && <p className="text-red-600 text-sm mt-1">{errorMsg}</p>}
+      </div>
+
+      <Button
+        onClick={handleSubmit}
+        disabled={loading}
+        className="bg-indigo-600 hover:bg-indigo-700 text-white w-full mt-4"
+      >
+        {loading ? "Saving..." : "Save Profile"}
+      </Button>
+    </section>
+  );
+};
\ No newline at end of file
diff --git a/components/Account/ProfileDetailsPanel.tsx b/components/Account/ProfileDetailsPanel.tsx
new file mode 100644
index 000000000..b42fcdaee
--- /dev/null
+++ b/components/Account/ProfileDetailsPanel.tsx
@@ -0,0 +1,167 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+
+interface ProfileDetailsPanelProps {
+  onClose: () => void;
+}
+
+export default function ProfileDetailsPanel({ onClose }: ProfileDetailsPanelProps) {
+  const supabase = useSupabaseClient();
+  const session = useSession();
+
+  const [username, setUsername] = useState("");
+  const [referralCode, setReferralCode] = useState("");
+  const [fullName, setFullName] = useState("");
+  const [referredUsers, setReferredUsers] = useState<{ username: string | null }[]>([]);
+  const [referredBy, setReferredBy] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [errorMsg, setErrorMsg] = useState("");
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (!session) return;
+
+      const userId = session.user.id;
+
+      const { data: profile, error: profileError } = await supabase
+        .from("profiles")
+        .select("username, referral_code, full_name")
+        .eq("id", userId)
+        .maybeSingle();
+
+      if (profile && !profileError) {
+        setUsername(profile.username ?? "");
+        setReferralCode(profile.referral_code ?? "");
+        setFullName(profile.full_name ?? "");
+      }
+
+      const { data: referrals } = await supabase
+        .from("referrals")
+        .select("referree_id")
+        .eq("referral_code", profile?.referral_code ?? "");
+
+      if (referrals && referrals.length > 0) {
+        const ids = referrals.map((r) => r.referree_id);
+        const { data: referredProfiles } = await supabase
+          .from("profiles")
+          .select("username")
+          .in("id", ids);
+        setReferredUsers(referredProfiles ?? []);
+      }
+
+      const { data: referrerReferral } = await supabase
+        .from("referrals")
+        .select("referral_code")
+        .eq("referree_id", userId)
+        .maybeSingle();
+
+      if (referrerReferral?.referral_code) {
+        const { data: referrerProfile } = await supabase
+          .from("profiles")
+          .select("username")
+          .eq("referral_code", referrerReferral.referral_code)
+          .maybeSingle();
+
+        if (referrerProfile?.username) {
+          setReferredBy(referrerProfile.username);
+        }
+      }
+
+      setLoading(false);
+    };
+
+    fetchData();
+  }, [session, supabase]);
+
+  const handleSave = async () => {
+    if (!session) return;
+    setSaving(true);
+    setErrorMsg("");
+
+    const { error } = await supabase
+      .from("profiles")
+      .update({ full_name: fullName.trim(), updated_at: new Date() })
+      .eq("id", session.user.id);
+
+    if (error) {
+      setErrorMsg(error.message || "Failed to update profile.");
+      setSaving(false);
+      return;
+    }
+
+    onClose();
+  };
+
+  if (loading) {
+    return (
+      <div className="p-6 text-center text-muted-foreground">
+        Loading profile...
+      </div>
+    );
+  }
+
+  return (
+    <section className="rounded-2xl bg-white/80 p-6 border shadow space-y-6 w-full text-left">
+      <div className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium mb-1 text-[#2E3440]">Username</label>
+          <Input value={username} readOnly className="bg-gray-100 cursor-not-allowed" />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-1 text-[#2E3440]">Referral Code</label>
+          <Input value={referralCode} readOnly className="bg-gray-100 cursor-not-allowed" />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-1 text-[#2E3440]">Full Name</label>
+          <Input
+            value={fullName}
+            onChange={(e) => setFullName(e.target.value)}
+            placeholder="e.g. Ada Lovelace"
+            className="bg-white"
+          />
+        </div>
+      </div>
+
+      <div className="border-t pt-4 space-y-3">
+        <div>
+          <p className="text-sm font-medium text-[#2E3440]">Referred By</p>
+          <p className="text-sm text-muted-foreground">
+            {referredBy ? referredBy : "—"}
+          </p>
+        </div>
+
+        <div>
+          <p className="text-sm font-medium text-[#2E3440]">Users You've Referred</p>
+          {referredUsers.length > 0 ? (
+            <ul className="text-sm list-disc ml-4 text-muted-foreground">
+              {referredUsers.map((user, idx) => (
+                <li key={idx}>{user.username ?? "Unnamed User"}</li>
+              ))}
+            </ul>
+          ) : (
+            <p className="text-sm text-muted-foreground">—</p>
+          )}
+        </div>
+      </div>
+
+      {errorMsg && <p className="text-red-600 text-sm mt-1">{errorMsg}</p>}
+
+      <div className="pt-4 flex justify-end">
+        <Button
+          onClick={handleSave}
+          disabled={saving}
+          className="bg-indigo-600 hover:bg-indigo-700 text-white"
+        >
+          {saving ? "Saving..." : "Save & Close"}
+        </Button>
+      </div>
+    </section>
+  );
+};
\ No newline at end of file
diff --git a/components/Account/ProfileSetup.tsx b/components/Account/ProfileSetup.tsx
index 42e47c8b4..8c2bdce00 100644
--- a/components/Account/ProfileSetup.tsx
+++ b/components/Account/ProfileSetup.tsx
@@ -6,7 +6,7 @@ import { useActivePlanet } from "@/context/ActivePlanet";
 
 interface ProfileSetupFormProps {
   onProfileUpdate: () => void | null;
-}
+};
 
 export default function ProfileSetupForm({ onProfileUpdate }: ProfileSetupFormProps) {
   const supabase = useSupabaseClient();
diff --git a/components/Account/Referrals.tsx b/components/Account/Referrals.tsx
new file mode 100644
index 000000000..edcc489b0
--- /dev/null
+++ b/components/Account/Referrals.tsx
@@ -0,0 +1,195 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
+
+interface ReferredUser {
+  id: string;
+  email?: string | null;
+  username?: string | null;
+}
+
+export default function ReferralCodePanel() {
+  const supabase = useSupabaseClient();
+  const session = useSession();
+
+  const [referralCode, setReferralCode] = useState<string | null>(null);
+  const [referredUsers, setReferredUsers] = useState<ReferredUser[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    if (!session) return;
+
+    const fetchReferralData = async () => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        // 1. Get the referral code from profiles table for current user
+        const { data: profileData, error: profileError } = await supabase
+          .from("profiles")
+          .select("referral_code")
+          .eq("id", session.user.id)
+          .maybeSingle();
+
+        if (profileError) {
+          console.error("Error fetching referral code:", profileError);
+          setError("Failed to load your referral code.");
+          setLoading(false);
+          return;
+        }
+
+        if (!profileData?.referral_code) {
+          setError("No referral code found for your account.");
+          setLoading(false);
+          return;
+        }
+
+        const userReferralCode = profileData.referral_code;
+        setReferralCode(userReferralCode);
+
+        // 2. Get all referrals where referral_code matches current user's referral code
+        const { data: referralsData, error: referralsError } = await supabase
+          .from("referrals")
+          .select("referree_id")
+          .eq("referral_code", userReferralCode);
+
+        if (referralsError) {
+          console.error("Error fetching referrals:", referralsError);
+          setError("Failed to load referred users.");
+          setLoading(false);
+          return;
+        }
+
+        const referredUserIds = referralsData?.map((r) => r.referree_id) || [];
+
+        if (referredUserIds.length === 0) {
+          setReferredUsers([]);
+          setLoading(false);
+          return;
+        }
+
+        // 3. Fetch profiles of all referred users
+        const { data: usersData, error: usersError } = await supabase
+          .from("profiles")
+          .select("id, username")
+          .in("id", referredUserIds);
+
+        if (usersError) {
+          console.error("Error fetching referred user profiles:", usersError);
+          setError("Failed to load referred users' profiles.");
+          setReferredUsers([]);
+        } else {
+          // Optional: Merge in emails from auth.users
+          const { data: authUsers, error: authError } = await supabase
+            .from("users")
+            .select("id, email")
+            .in("id", referredUserIds);
+
+          if (authError) {
+            console.warn("Could not fetch emails from auth.users:", authError);
+          }
+
+          const merged = usersData.map((user) => ({
+            ...user,
+            email: authUsers?.find((u) => u.id === user.id)?.email ?? null,
+          }));
+
+          setReferredUsers(merged);
+        }
+      } catch (err) {
+        console.error("Unexpected error:", err);
+        setError("An unexpected error occurred.");
+      }
+
+      setLoading(false);
+    };
+
+    fetchReferralData();
+  }, [session, supabase]);
+
+  const handleCopy = () => {
+    if (!referralCode) return;
+    navigator.clipboard.writeText(referralCode);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const stardustEarned = referredUsers.length * 5;
+
+  return (
+    <section
+      style={{
+        background: "linear-gradient(135deg, #E5EEF4, #D8E5EC)",
+        color: "#2E3440",
+        borderRadius: "1rem",
+        padding: "1.5rem",
+        boxShadow: "0 4px 10px rgb(0 0 0 / 0.1)",
+        maxWidth: 600,
+        margin: "0 auto",
+      }}
+    >
+      <h2 className="text-2xl font-extrabold mb-4 text-[#5E81AC] text-center">
+        Your Referral Code
+      </h2>
+
+      <div className="flex items-center justify-center mb-6 gap-3">
+        <code
+          className="font-mono text-xl px-4 py-2 rounded border border-[#1e3a5f] select-text"
+          style={{ backgroundColor: "#D8E5EC", color: "#0f7285" }}
+        >
+          {loading ? "Loading..." : referralCode ?? "N/A"}
+        </code>
+        <Button
+          onClick={handleCopy}
+          disabled={!referralCode || loading}
+          variant="default"
+          style={{ backgroundColor: "#4cc9f0", color: "#1e3a5f", fontWeight: "600" }}
+        >
+          {copied ? "Copied!" : "Copy"}
+        </Button>
+      </div>
+
+      <p className="text-center text-[#0f7285] font-semibold mb-6">
+        {stardustEarned} Stardust earned for referrals
+      </p>
+
+      <h3 className="text-xl font-semibold mb-3 text-[#5E81AC]">
+        Users You Referred
+      </h3>
+
+      <div
+        style={{
+          maxHeight: 240,
+          overflowY: "auto",
+          border: "1px solid #1e3a5f",
+          borderRadius: 8,
+          backgroundColor: "#E5EEF4",
+          padding: 12,
+        }}
+      >
+        {loading && <p className="text-center text-[#0f7285]">Loading...</p>}
+        {error && <p className="text-center text-red-500">{error}</p>}
+
+        {!loading && !error && referredUsers.length === 0 && (
+          <p className="text-center text-[#0f7285]">No users referred yet.</p>
+        )}
+
+        <ul className="space-y-2">
+          {referredUsers.map((user) => (
+            <li
+              key={user.id}
+              className="px-3 py-2 rounded border border-[#1e3a5f] bg-[#D8E5EC] text-[#0f7285] font-medium"
+              title={user.email ?? user.username ?? "Unknown"}
+            >
+              {user.username || user.email || user.id}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+};
\ No newline at end of file
diff --git a/components/Data/Generator/Astronomers/PlanetHunters/PlanetGenerator.tsx b/components/Data/Generator/Astronomers/PlanetHunters/PlanetGenerator.tsx
index ff2416b5a..bc7d1ee68 100644
--- a/components/Data/Generator/Astronomers/PlanetHunters/PlanetGenerator.tsx
+++ b/components/Data/Generator/Astronomers/PlanetHunters/PlanetGenerator.tsx
@@ -1,448 +1,169 @@
-"use client";
+'use client';
 
 import { useState, useEffect } from "react";
 import PlanetViewer from "./planetViewer";
 import { type PlanetConfig, defaultPlanetConfig } from "@/utils/planet-physics";
+import SettingsPanel from "./SettingsPanel";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import { useSupabaseClient } from "@supabase/auth-helpers-react";
 
 interface PlanetGeneratorProps {
-    classificationId: string;
-};
+  classificationId: string;
+  editMode?: boolean;
+}
 
 interface PlanetStats {
   mass?: number;
   radius?: number;
   [key: string]: any;
-};
-
-export default function PlanetGenerator({
-    classificationId,
-}: PlanetGeneratorProps) {
-    const supabase = useSupabaseClient();
-
-    const [planetConfig, setPlanetConfig] = useState<PlanetConfig>(defaultPlanetConfig);
-    const [importDialogOpen, setImportDialogOpen] = useState<boolean>(false);
-    const [exportDialogOpen, setExportDialogOpen] = useState<boolean>(false);
-    const [importText, setImportText] = useState<string>("");
-    const [importError, setImportError] = useState<string>("");
-
-    const [planetStats, setPlanetStats] = useState<PlanetStats>({});
-
-    const handleConfigChange = ( newConfig: Partial<PlanetConfig> ) => {
-        setPlanetConfig(( prev ) => ({
-            ...prev,
-            ...newConfig
-        }))
+}
+
+export default function PlanetGenerator({ classificationId, editMode }: PlanetGeneratorProps) {
+  const supabase = useSupabaseClient();
+  const [planetConfig, setPlanetConfig] = useState<PlanetConfig>(defaultPlanetConfig);
+  const [importDialogOpen, setImportDialogOpen] = useState(false);
+  const [exportDialogOpen, setExportDialogOpen] = useState(false);
+  const [importText, setImportText] = useState("");
+  const [importError, setImportError] = useState("");
+  const [planetStats, setPlanetStats] = useState<PlanetStats>({});
+
+  const handleConfigChange = (newConfig: Partial<PlanetConfig>) => {
+    setPlanetConfig((prev) => ({ ...prev, ...newConfig }));
+  };
+
+  const handleImport = () => {
+    try {
+      const config = JSON.parse(importText);
+      setPlanetConfig(config);
+      setImportDialogOpen(false);
+      setImportError("");
+    } catch {
+      setImportError("Invalid JSON configuration");
+    }
+  };
+
+  const handleExport = async () => {
+    const idAsNumber = Number.parseInt(classificationId);
+    if (isNaN(idAsNumber)) return;
+
+    const { data, error: fetchError } = await supabase
+      .from("classifications")
+      .select("classificationConfiguration")
+      .eq("id", idAsNumber)
+      .single();
+
+    if (fetchError || !data) return;
+
+    const updatedConfig = {
+      ...data.classificationConfiguration,
+      planetConfiguration: planetConfig,
+    }; 
+
+    await supabase
+      .from("classifications")
+      .update({ classificationConfiguration: updatedConfig })
+      .eq("id", idAsNumber);
+  };
+
+  useEffect(() => {
+    const fetchExportedValues = async () => {
+      const idAsNumber = Number.parseInt(classificationId);
+      if (isNaN(idAsNumber)) return;
+
+      const { data, error } = await supabase
+        .from("classifications")
+        .select("classificationConfiguration")
+        .eq("id", idAsNumber)
+        .single();
+
+      if (error || !data?.classificationConfiguration?.exportedValue) return;
+
+      const { exportedValue } = data.classificationConfiguration;
+      setPlanetStats((prev) => ({
+        ...prev,
+        ...(exportedValue.mass && { mass: exportedValue.mass }),
+        ...(exportedValue.radius && { radius: exportedValue.radius }),
+      }));
     };
 
-    const handleImport = () => {
-        try {
-            const config = JSON.parse(importText);
-            setPlanetConfig(config);
-            setImportDialogOpen(false);
-            setImportError("");
-        } catch (error: any) {
-            setImportError("Invalid JSON configuration");
-        };
-    };
-
-    const handleExport = async () => {
-        const idAsNumber = Number.parseInt(classificationId);
-        if (isNaN(idAsNumber)) return;
-
-        const { data, error: fetchError } = await supabase
-            .from("classifications")
-            .select("classificationConfiguration")
-            .eq("id", idAsNumber)
-            .single();
-
-        if (fetchError || !data) {
-            console.error("Failed to fetch planet configuration: ", fetchError);
-            return;
-        };
-
-        const currentConfig = data.classificationConfiguration || {};
-        const updatedConfig = {
-            ...currentConfig,
-            planetConfiguration: planetConfig,
-        };
-
-        const { error: updateError } = await supabase
-            .from("classifications")
-            .update({ classificationConfiguration: updatedConfig })
-            .eq("id", idAsNumber);
-        
-        if (updateError) {
-            console.error("Failed to update planet configuration, ", updateError);
-        };
-    };
-
-    // Fetch planet data
-    useEffect(() => {
-        const fetchExportedValues = async () => {
-        const idAsNumber = Number.parseInt(classificationId)
-        if (isNaN(idAsNumber)) return
-
-        const { data, error } = await supabase
-            .from("classifications")
-            .select("classificationConfiguration")
-            .eq("id", idAsNumber)
-            .single()
-
-        if (error || !data?.classificationConfiguration?.exportedValue) return
-
-        const { exportedValue } = data.classificationConfiguration
-
-        setPlanetStats((prev) => ({
-            ...prev,
-            ...(exportedValue.mass && { mass: exportedValue.mass }),
-            ...(exportedValue.radius && { radius: exportedValue.radius }),
-        }))
-        }
-
-        fetchExportedValues()
-    }, [classificationId, supabase])
-
-    // Listen for custom events from the settings panel
-    useEffect(() => {
-        const handleOpenImport = () => setImportDialogOpen(true);
-        const handleOpenExport = () => setExportDialogOpen(true);
-
-        window.addEventListener("open-import-dialog", handleOpenImport);
-        window.addEventListener("open-export-dialog", handleOpenExport);
-
-        return () => {
-            window.removeEventListener("open-import-dialog", handleOpenImport);
-            window.removeEventListener("open-export-dialog", handleOpenExport);
-        };
-    }, []);
-
-    const exportConfig = JSON.stringify(planetConfig, null, 2);
-    
-    return (
-        <main className="flex w-full relative flex-col">
-            <div className="w-full h-screen">
-                <PlanetViewer planetConfig={planetConfig} onConfigChange={handleConfigChange} />
-            </div>
-
-            <p>{JSON.stringify(planetStats, null, 2)}</p>
-
-            <Dialog open={importDialogOpen} onOpenChange={setImportDialogOpen}>
-                <DialogContent className="bg-white sm:max-w-md">
-                    <DialogHeader>
-                        <DialogTitle>Import Planet Configuration</DialogTitle>
-                        <DialogDescription>Paste a previously exported planet configuration JSON below.</DialogDescription>
-                    </DialogHeader>
-                    <div className="flex flex-col gap-4">
-                        <Textarea
-                            value={importText}
-                            onChange={(e) => setImportText(e.target.value)}
-                            placeholder="Paste JSON configuration here..."
-                            className="min-h-[200px]"
-                        />
-                        {importError && <p className="text-red-500 text-sm">{importError}</p>}
-                        <div className="flex justify-end gap-2">
-                            <Button variant="outline" onClick={() => setImportDialogOpen(false)}>
-                                Cancel
-                            </Button>
-                            <Button onClick={handleImport}>Import</Button>
-                        </div>
-                    </div>
-                </DialogContent>
-            </Dialog>
-
-            <Dialog open={exportDialogOpen} onOpenChange={setExportDialogOpen}>
-                <DialogContent className="sm:max-w-md bg-white">
-                    <DialogHeader>
-                        <DialogTitle>Export Planet Configuration</DialogTitle>
-                    <DialogDescription>Copy this JSON to save your planet configuration.</DialogDescription>
-                </DialogHeader>
-                    <div className="flex flex-col gap-4">
-                        <Textarea
-                            value={exportConfig}
-                            readOnly
-                            className="min-h-[200px] font-mono text-sm"
-                            onClick={(e) => (e.target as HTMLTextAreaElement).select()}
-                        />
-                        <div className="flex justify-end gap-2">
-                            <Button
-                                onClick={async () => {
-                                    await handleExport();
-                                    navigator.clipboard.writeText(exportConfig)
-                                    setExportDialogOpen(false)
-                                }}
-                            >
-                                Copy & Close
-                            </Button>
-                        </div>
-                    </div>
-                </DialogContent>
-            </Dialog>
-        </main>
-    );
-};
-
-
-// "use client"
-
-// import { useState, useEffect } from "react"
-// import { Canvas } from "@react-three/fiber"
-// import { OrbitControls, Stars, Environment } from "@react-three/drei"
-// import { PlanetShader } from "./PlanetShader"
-// import { SimplePlanet } from "./Simple/simple"
-// import { StylizedPlanetShader } from "./Shader/Styliized/stylized-planet-shader"
-// import { StylizedClouds } from "./Shader/Styliized/stylized-cloud-shader"
-// import { Planet } from "./Planet/planet-main"
-// import { SettingsPanel } from "./SettingsPanel"
-// import { Cog, ChevronDown } from "lucide-react";
-// import { Button } from "@/components/ui/button"
-// import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
-// import {
-//   type PlanetStats,
-//   calculateDensity,
-//   defaultPlanetStats,
-//   mergeWithDefaults,
-//   generateDefaultLandmarks,
-// } from "@/lib/planet-physics"
-// import { useSupabaseClient } from "@supabase/auth-helpers-react"
-
-// export interface PlanetGeneratorProps {
-//   classificationConfig?: any
-//   content?: string
-//   classificationId: string
-//   author: string
-//   type?: string
-//   biome?: string 
-//   planetConfiguration?: any
-// };
-
-// export function PlanetGenerator({
-//   classificationId = "UNCLASSIFIED",
-//   author = "UNKNOWN",
-//   type,
-//   biome,
-//   planetConfiguration,
-//   classificationConfig,
-//   content,
-// }: PlanetGeneratorProps) {
-//   const supabase = useSupabaseClient()
-
-//   const [showSettings, setShowSettings] = useState(false)
-//   const [renderMode, setRenderMode] = useState<"detailed" | "simple" | "stylized" | "standard">("detailed")
-//   const [planetStats, setPlanetStats] = useState<PlanetStats>(() => {
-//     const initialStats = planetConfiguration
-//       ? mergeWithDefaults(planetConfiguration)
-//       : {
-//           ...defaultPlanetStats,
-//           ...(biome ? { biome } : {}),
-//           ...(type ? { type } : {}),
-//         }
-
-//     if (!initialStats.landmarks || initialStats.landmarks.length === 0) {
-//       initialStats.landmarks = generateDefaultLandmarks(initialStats)
-//     }
-
-//     return initialStats
-//   })
-
-//   // Update planet stats when configuration changes
-//   useEffect(() => {
-//     const updatedStats = planetConfiguration
-//       ? mergeWithDefaults(planetConfiguration)
-//       : {
-//           ...defaultPlanetStats,
-//           ...(biome ? { biome } : {}),
-//           ...(type ? { type } : {}),
-//         }
-
-//     if (!updatedStats.landmarks || updatedStats.landmarks.length === 0) {
-//       updatedStats.landmarks = generateDefaultLandmarks(updatedStats)
-//     } else {
-//       const hasTerrestrial = updatedStats.landmarks.some((l) => l.category === "terrestrial")
-//       const hasGaseous = updatedStats.landmarks.some((l) => l.category === "gaseous")
-
-//       if (!hasTerrestrial || !hasGaseous) {
-//         const defaultLandmarks = generateDefaultLandmarks(updatedStats)
-//         if (!hasTerrestrial) {
-//           const terrestrial = defaultLandmarks.find((l) => l.category === "terrestrial")
-//           if (terrestrial) updatedStats.landmarks.push(terrestrial)
-//         }
-//         if (!hasGaseous) {
-//           const gaseous = defaultLandmarks.find((l) => l.category === "gaseous")
-//           if (gaseous) updatedStats.landmarks.push(gaseous)
-//         }
-//       }
-//     }
-
-//     setPlanetStats(updatedStats)
-//   }, [planetConfiguration, biome, type])
-
-//   // Fetch exported values from Supabase
-//   useEffect(() => {
-//     const fetchExportedValues = async () => {
-//       const idAsNumber = Number.parseInt(classificationId)
-//       if (isNaN(idAsNumber)) return
-
-//       const { data, error } = await supabase
-//         .from("classifications")
-//         .select("classificationConfiguration")
-//         .eq("id", idAsNumber)
-//         .single()
-
-//       if (error || !data?.classificationConfiguration?.exportedValue) return
-
-//       const { exportedValue } = data.classificationConfiguration
-
-//       setPlanetStats((prev) => ({
-//         ...prev,
-//         ...(exportedValue.mass && { mass: exportedValue.mass }),
-//         ...(exportedValue.radius && { radius: exportedValue.radius }),
-//       }))
-//     }
-
-//     fetchExportedValues()
-//   }, [classificationId, supabase])
-
-//   // Update density when mass or radius changes
-//   useEffect(() => {
-//     setPlanetStats((prev) => ({
-//       ...prev,
-//       density: calculateDensity(prev.mass, prev.radius),
-//     }))
-//   }, [planetStats.mass, planetStats.radius])
-
-//   // Get render mode label
-//   const getRenderModeLabel = () => {
-//     switch (renderMode) {
-//       case "detailed":
-//         return "Detailed View"
-//       case "stylized":
-//         return "Stylized View"
-//       case "simple":
-//         return "Simple View"
-//       case "standard":
-//         return "Standard Render"
-//       default:
-//         return "Detailed View"
-//     }
-//   }
-
-//   return (
-//     <div className="w-full h-screen relative overflow-hidden">
-//       {/* Classification info - kept but commented out as in original */}
-//       {/* <div className="absolute top-4 left-4 z-10 bg-black/70 text-green-400 font-mono p-2 rounded border border-green-500/30 text-sm">
-//         <div>
-//           <span className="text-green-500/70">ID:</span> {classificationId}
-//         </div>
-//         <div>
-//           <span className="text-green-500/70">AUTHOR:</span> {author}
-//         </div>
-//         {type && (
-//           <div>
-//             <span className="text-green-500/70">TYPE:</span> {type}
-//           </div>
-//         )}
-//         {biome && (
-//           <div>
-//             <span className="text-green-500/70">BIOME:</span> {biome}
-//           </div>
-//         )}
-//         {planetStats.landmarks && planetStats.landmarks.length > 0 && (
-//           <div>
-//             <span className="text-green-500/70">LANDMARKS:</span> {planetStats.landmarks.length}
-//           </div>
-//         )}
-//       </div> */}
-
-//       {/* Classification config - kept but commented out as in original */}
-//       {/* {classificationConfig && (
-//         <pre className="text-xs text-white/70">
-//           {JSON.stringify(classificationConfig, null, 2)}
-//         </pre>
-//       )} */}
-
-//       {/* Use a key on the Canvas to force a complete remount when switching modes */}
-//       <Canvas key={renderMode} camera={{ position: [0, 0, 10], fov: 45 }}>
-//         <ambientLight intensity={0.4} />
-//         <pointLight position={[10, 10, 10]} intensity={2} />
-//         <pointLight position={[-10, -10, -10]} intensity={0.5} color="#b0c4de" />
-//         <directionalLight position={[5, 5, 5]} intensity={1.5} castShadow />
-//         <Environment preset="sunset" />
-
-//         {renderMode === "detailed" && <PlanetShader planetStats={planetStats} />}
-//         {renderMode === "stylized" && (
-//           <>
-//             <StylizedPlanetShader planetStats={planetStats} />
-//             <StylizedClouds planetStats={planetStats} />
-//           </>
-//         )}
-//         {renderMode === "simple" && <SimplePlanet planetStats={planetStats} />}
-//         {renderMode === "standard" && <Planet planetStats={planetStats} />}
-
-//         <Stars radius={100} depth={50} count={5000} factor={4} saturation={0} fade speed={1} />
-//         <OrbitControls enableZoom={true} enablePan={true} enableRotate={true} />
-//         <mesh position={[0, 0, -15]}>
-//           <sphereGeometry args={[5, 32, 32]} />
-//           <meshBasicMaterial color="#4060ff" transparent opacity={0.03} />
-//         </mesh>
-//       </Canvas>
-
-//       <div className="absolute top-4 right-4 flex gap-2">
-//         <DropdownMenu>
-//           <DropdownMenuTrigger asChild>
-//             <Button variant="outline" size="sm" className="bg-black/50 hover:bg-black/70 text-white">
-//               {getRenderModeLabel()}
-//               <ChevronDown className="ml-2 h-4 w-4" />
-//             </Button>
-//           </DropdownMenuTrigger>
-//           <DropdownMenuContent className="bg-black/80 border-slate-700 text-white">
-//             <DropdownMenuItem
-//               className={renderMode === "detailed" ? "bg-cyan-900/40" : "hover:bg-slate-700/50"}
-//               onClick={() => setRenderMode("detailed")}
-//             >
-//               Detailed View
-//             </DropdownMenuItem>
-//             <DropdownMenuItem
-//               className={renderMode === "stylized" ? "bg-cyan-900/40" : "hover:bg-slate-700/50"}
-//               onClick={() => setRenderMode("stylized")}
-//             >
-//               Stylized View
-//             </DropdownMenuItem>
-//             <DropdownMenuItem
-//               className={renderMode === "simple" ? "bg-cyan-900/40" : "hover:bg-slate-700/50"}
-//               onClick={() => setRenderMode("simple")}
-//             >
-//               Simple View
-//             </DropdownMenuItem>
-//             <DropdownMenuItem
-//               className={renderMode === "standard" ? "bg-cyan-900/40" : "hover:bg-slate-700/50"}
-//               onClick={() => setRenderMode("standard")}
-//             >
-//               Standard Render
-//             </DropdownMenuItem>
-//           </DropdownMenuContent>
-//         </DropdownMenu>
-//         <Button
-//           variant="outline"
-//           size="icon"
-//           className="bg-black/50 hover:bg-black/70 text-white"
-//           onClick={() => setShowSettings(!showSettings)}
-//         >
-//           <Cog className="h-4 w-4" />
-//         </Button>
-//       </div>
-
-//       {showSettings && (
-//         <SettingsPanel
-//           planetStats={planetStats}
-//           setPlanetStats={setPlanetStats}
-//           classificationId={classificationId}
-//           author={author}
-//         />
-//       )}
-//     </div>
-//   )
-// };
\ No newline at end of file
+    fetchExportedValues();
+  }, [classificationId, supabase]);
+
+  const exportConfig = JSON.stringify(planetConfig, null, 2);
+
+  return (
+    <main className="w-full">
+      <div className="flex flex-col md:flex-row w-full">
+        {/* Planet Viewer */}
+        <div className="w-full md:flex-1 md:min-h-screen">
+          <PlanetViewer
+            planetConfig={planetConfig}
+            onConfigChange={handleConfigChange}
+            // classificationId={classificationId}
+            // editMode={editMode}
+            // showSettings={false}
+            // onToggleSettings={() => {}}
+          />
+        </div>
+
+        {/* Settings Panel */}
+        <div className="w-full md:w-[400px] border-t md:border-t-0 md:border-l border-gray-200 bg-white relative z-10">
+          <SettingsPanel
+            planetConfig={planetConfig}
+            onChange={handleConfigChange}
+            classificationId={parseInt(classificationId)}
+          />
+        </div>
+      </div>
+
+      {/* Import Dialog */}
+      <Dialog open={importDialogOpen} onOpenChange={setImportDialogOpen}>
+        <DialogContent className="bg-white sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Import Planet Configuration</DialogTitle>
+            <DialogDescription>Paste JSON below</DialogDescription>
+          </DialogHeader>
+          <Textarea
+            value={importText}
+            onChange={(e) => setImportText(e.target.value)}
+            className="min-h-[200px]"
+          />
+          {importError && <p className="text-red-500 text-sm">{importError}</p>}
+          <div className="flex justify-end gap-2 mt-4">
+            <Button variant="outline" onClick={() => setImportDialogOpen(false)}>Cancel</Button>
+            <Button onClick={handleImport}>Import</Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* Export Dialog */}
+      <Dialog open={exportDialogOpen} onOpenChange={setExportDialogOpen}>
+        <DialogContent className="bg-white sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Export Planet Configuration</DialogTitle>
+            <DialogDescription>Copy this JSON</DialogDescription>
+          </DialogHeader>
+          <Textarea
+            value={exportConfig}
+            readOnly
+            className="min-h-[200px] font-mono text-sm"
+            onClick={(e) => (e.target as HTMLTextAreaElement).select()}
+          />
+          <div className="flex justify-end gap-2 mt-4">
+            <Button
+              onClick={async () => {
+                await handleExport();
+                navigator.clipboard.writeText(exportConfig);
+                setExportDialogOpen(false);
+              }}
+            >
+              Copy & Close
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </main>
+  );
+};
\ No newline at end of file
diff --git a/components/Data/Generator/Astronomers/PlanetHunters/Settings/BasicSettings.tsx b/components/Data/Generator/Astronomers/PlanetHunters/Settings/BasicSettings.tsx
new file mode 100644
index 000000000..a124e6a95
--- /dev/null
+++ b/components/Data/Generator/Astronomers/PlanetHunters/Settings/BasicSettings.tsx
@@ -0,0 +1,159 @@
+"use client"
+
+import { useEffect } from "react"
+import type { PlanetConfig } from "@/app/planets/paint/[id]/planet-config"
+import { getLiquidType } from "@/utils/planet-physics"
+import { Slider } from "@/components/ui/slider"
+import { Label } from "@/components/ui/label"
+import { Button } from "@/components/ui/button"
+import { RefreshCw } from "lucide-react"
+
+interface BasicSettingsProps {
+  planetConfig: PlanetConfig
+  onChange: (config: Partial<PlanetConfig>) => void
+}
+
+export default function BasicSettings({ planetConfig, onChange }: BasicSettingsProps) {
+  // Check if planet should be gaseous or terrestrial based on mass and radius
+  useEffect(() => {
+    if ((planetConfig.mass > 7.5 || planetConfig.radius > 2.5) && planetConfig.type !== "gaseous") {
+      onChange({ type: "gaseous" })
+    } else if (planetConfig.mass <= 7.5 && planetConfig.radius <= 2.5 && planetConfig.type === "gaseous") {
+      onChange({ type: "terrestrial" })
+    }
+  }, [planetConfig.mass, planetConfig.radius, planetConfig.type, onChange])
+
+  const regenerateSeed = () => {
+    onChange({ seed: Math.floor(Math.random() * 10000) })
+  }
+
+  // Get current liquid type name
+  const liquidType = getLiquidType(planetConfig.temperature)
+
+  return (
+    <div className="space-y-4">
+      <div className="bg-slate-800 p-4 rounded-md border border-slate-700">
+        <h3 className="text-sm font-medium mb-3 text-slate-200">Planet Type</h3>
+        <div className="flex gap-2">
+          <Button
+            variant={planetConfig.type === "terrestrial" ? "default" : "outline"}
+            size="sm"
+            onClick={() => onChange({ type: "terrestrial" })}
+            className="flex-1"
+          >
+            Terrestrial
+          </Button>
+          <Button
+            variant={planetConfig.type === "gaseous" ? "default" : "outline"}
+            size="sm"
+            onClick={() => onChange({ type: "gaseous" })}
+            className="flex-1"
+          >
+            Gaseous
+          </Button>
+        </div>
+        {(planetConfig.mass > 7.5 || planetConfig.radius > 2.5) && planetConfig.type === "gaseous" && (
+          <p className="text-xs text-amber-400 mt-2">
+            Note: High mass or radius has automatically set this to a gas giant
+          </p>
+        )}
+        {planetConfig.mass <= 7.5 && planetConfig.radius <= 2.5 && planetConfig.type === "terrestrial" && (
+          <p className="text-xs text-slate-400 mt-2">Note: Values are in Earth radii/mass units</p>
+        )}
+      </div>
+
+      <div className="bg-slate-800 p-4 rounded-md space-y-4 border border-slate-700">
+        <div className="flex justify-between items-center">
+          <h3 className="text-sm font-medium text-slate-200">Seed: {planetConfig.seed}</h3>
+          <Button variant="outline" size="icon" onClick={regenerateSeed} className="bg-slate-700 border-slate-600">
+            <RefreshCw className="h-4 w-4" />
+          </Button>
+        </div>
+
+        <div className="space-y-2">
+          <div className="flex justify-between">
+            <Label htmlFor="radius" className="text-slate-200">
+              Radius (Earth radii)
+            </Label>
+            <span className="text-sm text-slate-400">{planetConfig.radius.toFixed(1)}</span>
+          </div>
+          <Slider
+            id="radius"
+            min={0.5}
+            max={5}
+            step={0.1}
+            value={[planetConfig.radius]}
+            onValueChange={(value) => onChange({ radius: value[0] })}
+            className="[&_[role=slider]]:bg-slate-200"
+          />
+        </div>
+
+        <div className="space-y-2">
+          <div className="flex justify-between">
+            <Label htmlFor="temperature" className="text-slate-200">
+              Temperature
+            </Label>
+            <span className="text-sm text-slate-400">
+              {planetConfig.temperature.toFixed(0)}K ({(planetConfig.temperature - 273.15).toFixed(0)}°C)
+            </span>
+          </div>
+          <Slider
+            id="temperature"
+            min={50}
+            max={700}
+            step={1}
+            value={[planetConfig.temperature]}
+            onValueChange={(value) => onChange({ temperature: value[0] })}
+            className="[&_[role=slider]]:bg-slate-200"
+          />
+          <div className="text-xs text-slate-400">Liquid Solvent: {liquidType.name}</div>
+        </div>
+
+        <div className="space-y-2">
+          <div className="flex justify-between">
+            <Label htmlFor="mass" className="text-slate-200">
+              Mass (Earth masses)
+            </Label>
+            <span className="text-sm text-slate-400">{planetConfig.mass.toFixed(1)} M⊕</span>
+          </div>
+          <Slider
+            id="mass"
+            min={0.1}
+            max={10}
+            step={0.1}
+            value={[planetConfig.mass]}
+            onValueChange={(value) => onChange({ mass: value[0] })}
+            className="[&_[role=slider]]:bg-slate-200"
+          />
+        </div>
+
+        <div className="space-y-2">
+          <div className="flex justify-between">
+            <Label htmlFor="biomass" className="text-slate-200">
+              Biomass
+            </Label>
+            <span className="text-sm text-slate-400">{planetConfig.biomass.toFixed(2)}</span>
+          </div>
+          <Slider
+            id="biomass"
+            min={0}
+            max={1}
+            step={0.01}
+            value={[planetConfig.biomass]}
+            onValueChange={(value) => onChange({ biomass: value[0] })}
+            className="[&_[role=slider]]:bg-slate-200"
+          />
+        </div>
+
+        <div className="pt-2 border-t border-slate-700">
+          <div className="flex justify-between">
+            <Label className="text-slate-200">Density</Label>
+            <span className="text-sm text-slate-400">
+              {(planetConfig.mass / ((planetConfig.radius ** 3 * Math.PI * 4) / 3)).toFixed(2)} g/cm³
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+};
\ No newline at end of file
diff --git a/components/Data/Generator/Astronomers/PlanetHunters/Settings/ColourSettings.tsx b/components/Data/Generator/Astronomers/PlanetHunters/Settings/ColourSettings.tsx
new file mode 100644
index 000000000..f14d6ff9c
--- /dev/null
+++ b/components/Data/Generator/Astronomers/PlanetHunters/Settings/ColourSettings.tsx
@@ -0,0 +1,119 @@
+"use client"
+
+import { useEffect } from "react"
+import type { PlanetConfig } from "@/app/planets/paint/[id]/planet-config"
+import { getLiquidType, getTemperatureAdjustedColors } from "@/app/planets/paint/[id]/planet-config"
+import ColorPicker from "@/utils/Generators/PH/color-picker";
+
+interface ColorSettingsProps {
+  planetConfig: PlanetConfig
+  onChange: (config: Partial<PlanetConfig>) => void
+}
+
+export default function ColorSettings({ planetConfig, onChange }: ColorSettingsProps) {
+  // Update liquid type based on temperature
+  useEffect(() => {
+    const liquidType = getLiquidType(planetConfig.temperature)
+
+    // Only update if the colors don't match the expected liquid type
+    if (
+      planetConfig.colors.ocean !== liquidType.color ||
+      planetConfig.colors.oceanPattern !== liquidType.patternColor
+    ) {
+      onChange({
+        colors: {
+          ...planetConfig.colors,
+          ocean: liquidType.color,
+          oceanPattern: liquidType.patternColor,
+        },
+      })
+    }
+  }, [planetConfig.temperature, onChange])
+
+  // Update terrain colors based on temperature
+  useEffect(() => {
+    const terrainColors = getTemperatureAdjustedColors(planetConfig.temperature, planetConfig.biomass)
+
+    // Only update if colors have changed
+    if (
+      planetConfig.colors.beach !== terrainColors.beach ||
+      planetConfig.colors.lowland !== terrainColors.lowland ||
+      planetConfig.colors.midland !== terrainColors.midland ||
+      planetConfig.colors.highland !== terrainColors.highland ||
+      planetConfig.colors.mountain !== terrainColors.mountain ||
+      planetConfig.colors.snow !== terrainColors.snow
+    ) {
+      onChange({
+        colors: {
+          ...planetConfig.colors,
+          ...terrainColors,
+        },
+      })
+    }
+  }, [planetConfig.temperature, planetConfig.biomass, onChange])
+
+  // Get current liquid type name
+  const liquidType = getLiquidType(planetConfig.temperature)
+
+  return (
+    <div className="bg-slate-800 p-4 rounded-md space-y-4 border border-slate-700">
+      <h3 className="text-sm font-medium text-slate-200">Planet Colors</h3>
+
+      <div className="grid grid-cols-2 gap-4">
+        <ColorPicker
+          label="Atmosphere"
+          color={planetConfig.colors.atmosphere}
+          onChange={(color) => onChange({ colors: { ...planetConfig.colors, atmosphere: color } })}
+        />
+
+        <ColorPicker
+          label={`${liquidType.name}`}
+          color={planetConfig.colors.ocean}
+          onChange={(color) => onChange({ colors: { ...planetConfig.colors, ocean: color } })}
+        />
+
+        <ColorPicker
+          label={`${liquidType.name} Pattern`}
+          color={planetConfig.colors.oceanPattern}
+          onChange={(color) => onChange({ colors: { ...planetConfig.colors, oceanPattern: color } })}
+        />
+
+        <ColorPicker
+          label="Beach"
+          color={planetConfig.colors.beach}
+          onChange={(color) => onChange({ colors: { ...planetConfig.colors, beach: color } })}
+        />
+
+        <ColorPicker
+          label="Lowland"
+          color={planetConfig.colors.lowland}
+          onChange={(color) => onChange({ colors: { ...planetConfig.colors, lowland: color } })}
+        />
+
+        <ColorPicker
+          label="Midland"
+          color={planetConfig.colors.midland}
+          onChange={(color) => onChange({ colors: { ...planetConfig.colors, midland: color } })}
+        />
+
+        <ColorPicker
+          label="Highland"
+          color={planetConfig.colors.highland}
+          onChange={(color) => onChange({ colors: { ...planetConfig.colors, highland: color } })}
+        />
+
+        <ColorPicker
+          label="Mountain"
+          color={planetConfig.colors.mountain}
+          onChange={(color) => onChange({ colors: { ...planetConfig.colors, mountain: color } })}
+        />
+
+        <ColorPicker
+          label="Snow"
+          color={planetConfig.colors.snow}
+          onChange={(color) => onChange({ colors: { ...planetConfig.colors, snow: color } })}
+        />
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/components/Data/Generator/Astronomers/PlanetHunters/Settings/TerrainSettings.tsx b/components/Data/Generator/Astronomers/PlanetHunters/Settings/TerrainSettings.tsx
new file mode 100644
index 000000000..1c67f2cc5
--- /dev/null
+++ b/components/Data/Generator/Astronomers/PlanetHunters/Settings/TerrainSettings.tsx
@@ -0,0 +1,308 @@
+"use client"
+
+import type { PlanetConfig } from "@/app/planets/paint/[id]/planet-config"
+import { Slider } from "@/components/ui/slider"
+import { Label } from "@/components/ui/label"
+import { Switch } from "@/components/ui/switch"
+import { Checkbox } from "@/components/ui/checkbox"
+
+interface TerrainSettingsProps {
+  planetConfig: PlanetConfig
+  onChange: (config: Partial<PlanetConfig>) => void
+}
+
+export default function TerrainSettings({ planetConfig, onChange }: TerrainSettingsProps) {
+  return (
+    <div className="space-y-6">
+      {planetConfig.type === "terrestrial" && (
+        <div className="bg-slate-800 p-4 rounded-md space-y-4 border border-slate-700">
+          <h3 className="text-sm font-medium text-slate-200">Terrain Properties</h3>
+
+          <div className="space-y-2">
+            <div className="flex justify-between">
+              <Label htmlFor="terrainRoughness" className="text-slate-200">
+                Terrain Roughness
+              </Label>
+              <span className="text-sm text-slate-400">{planetConfig.terrainRoughness.toFixed(2)}</span>
+            </div>
+            <Slider
+              id="terrainRoughness"
+              min={0.1}
+              max={1}
+              step={0.01}
+              value={[planetConfig.terrainRoughness]}
+              onValueChange={(value) => onChange({ terrainRoughness: value[0] })}
+              className="[&_[role=slider]]:bg-slate-200"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex justify-between">
+              <Label htmlFor="liquidHeight" className="text-slate-200">
+                Ocean Level
+              </Label>
+              <span className="text-sm text-slate-400">{planetConfig.liquidHeight.toFixed(2)}</span>
+            </div>
+            <Slider
+              id="liquidHeight"
+              min={0.3}
+              max={0.8}
+              step={0.01}
+              value={[planetConfig.liquidHeight]}
+              onValueChange={(value) => onChange({ liquidHeight: value[0] })}
+              className="[&_[role=slider]]:bg-slate-200"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex justify-between">
+              <Label htmlFor="continentSize" className="text-slate-200">
+                Continent Size
+              </Label>
+              <span className="text-sm text-slate-400">{planetConfig.continentSize.toFixed(2)}</span>
+            </div>
+            <Slider
+              id="continentSize"
+              min={0.1}
+              max={1}
+              step={0.01}
+              value={[planetConfig.continentSize]}
+              onValueChange={(value) => onChange({ continentSize: value[0] })}
+              className="[&_[role=slider]]:bg-slate-200"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex justify-between">
+              <Label htmlFor="continentCount" className="text-slate-200">
+                Continent Count
+              </Label>
+              <span className="text-sm text-slate-400">{planetConfig.continentCount.toFixed(0)}</span>
+            </div>
+            <Slider
+              id="continentCount"
+              min={1}
+              max={10}
+              step={1}
+              value={[planetConfig.continentCount]}
+              onValueChange={(value) => onChange({ continentCount: value[0] })}
+              className="[&_[role=slider]]:bg-slate-200"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex justify-between">
+              <Label htmlFor="noiseScale" className="text-slate-200">
+                Detail Level
+              </Label>
+              <span className="text-sm text-slate-400">{planetConfig.noiseScale.toFixed(2)}</span>
+            </div>
+            <Slider
+              id="noiseScale"
+              min={0.5}
+              max={2}
+              step={0.1}
+              value={[planetConfig.noiseScale]}
+              onValueChange={(value) => onChange({ noiseScale: value[0] })}
+              className="[&_[role=slider]]:bg-slate-200"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex justify-between">
+              <Label htmlFor="volcanicActivity" className="text-slate-200">
+                Volcanic Activity
+              </Label>
+              <span className="text-sm text-slate-400">{planetConfig.volcanicActivity.toFixed(2)}</span>
+            </div>
+            <Slider
+              id="volcanicActivity"
+              min={0}
+              max={1}
+              step={0.01}
+              value={[planetConfig.volcanicActivity]}
+              onValueChange={(value) => onChange({ volcanicActivity: value[0] })}
+              className="[&_[role=slider]]:bg-slate-200"
+            />
+          </div>
+        </div>
+      )}
+
+      <div className="bg-slate-800 p-4 rounded-md space-y-4 border border-slate-700">
+        <div className="flex justify-between items-center">
+          <h3 className="text-sm font-medium text-slate-200">Debug Mode</h3>
+          <Switch
+            checked={planetConfig.debugMode || false}
+            onCheckedChange={(checked) => onChange({ debugMode: checked })}
+          />
+        </div>
+
+        {planetConfig.debugMode && (
+          <div className="pt-2 border-t border-slate-700 space-y-2">
+            <p className="text-xs text-slate-400">Show/hide specific terrain types:</p>
+            <div className="grid grid-cols-2 gap-2">
+              <div className="flex items-center space-x-2">
+                <Checkbox
+                  id="show-ocean"
+                  checked={planetConfig.visibleTerrains.ocean}
+                  onCheckedChange={(checked) =>
+                    onChange({
+                      visibleTerrains: {
+                        ...planetConfig.visibleTerrains,
+                        ocean: !!checked,
+                      },
+                    })
+                  }
+                />
+                <Label htmlFor="show-ocean" className="text-xs cursor-pointer">
+                  <div className="flex items-center gap-2">
+                    <div className="w-3 h-3 rounded-full" style={{ backgroundColor: planetConfig.colors.ocean }}></div>
+                    <span>Ocean</span>
+                  </div>
+                </Label>
+              </div>
+
+              <div className="flex items-center space-x-2">
+                <Checkbox
+                  id="show-beach"
+                  checked={planetConfig.visibleTerrains.beach}
+                  onCheckedChange={(checked) =>
+                    onChange({
+                      visibleTerrains: {
+                        ...planetConfig.visibleTerrains,
+                        beach: !!checked,
+                      },
+                    })
+                  }
+                />
+                <Label htmlFor="show-beach" className="text-xs cursor-pointer">
+                  <div className="flex items-center gap-2">
+                    <div className="w-3 h-3 rounded-full" style={{ backgroundColor: planetConfig.colors.beach }}></div>
+                    <span>Beach</span>
+                  </div>
+                </Label>
+              </div>
+
+              <div className="flex items-center space-x-2">
+                <Checkbox
+                  id="show-lowland"
+                  checked={planetConfig.visibleTerrains.lowland}
+                  onCheckedChange={(checked) =>
+                    onChange({
+                      visibleTerrains: {
+                        ...planetConfig.visibleTerrains,
+                        lowland: !!checked,
+                      },
+                    })
+                  }
+                />
+                <Label htmlFor="show-lowland" className="text-xs cursor-pointer">
+                  <div className="flex items-center gap-2">
+                    <div
+                      className="w-3 h-3 rounded-full"
+                      style={{ backgroundColor: planetConfig.colors.lowland }}
+                    ></div>
+                    <span>Lowland</span>
+                  </div>
+                </Label>
+              </div>
+
+              <div className="flex items-center space-x-2">
+                <Checkbox
+                  id="show-midland"
+                  checked={planetConfig.visibleTerrains.midland}
+                  onCheckedChange={(checked) =>
+                    onChange({
+                      visibleTerrains: {
+                        ...planetConfig.visibleTerrains,
+                        midland: !!checked,
+                      },
+                    })
+                  }
+                />
+                <Label htmlFor="show-midland" className="text-xs cursor-pointer">
+                  <div className="flex items-center gap-2">
+                    <div
+                      className="w-3 h-3 rounded-full"
+                      style={{ backgroundColor: planetConfig.colors.midland }}
+                    ></div>
+                    <span>Midland</span>
+                  </div>
+                </Label>
+              </div>
+
+              <div className="flex items-center space-x-2">
+                <Checkbox
+                  id="show-highland"
+                  checked={planetConfig.visibleTerrains.highland}
+                  onCheckedChange={(checked) =>
+                    onChange({
+                      visibleTerrains: {
+                        ...planetConfig.visibleTerrains,
+                        highland: !!checked,
+                      },
+                    })
+                  }
+                />
+                <Label htmlFor="show-highland" className="text-xs cursor-pointer">
+                  <div className="flex items-center gap-2">
+                    <div
+                      className="w-3 h-3 rounded-full"
+                      style={{ backgroundColor: planetConfig.colors.highland }}
+                    ></div>
+                    <span>Highland</span>
+                  </div>
+                </Label>
+              </div>
+
+              <div className="flex items-center space-x-2">
+                <Checkbox
+                  id="show-mountain"
+                  checked={planetConfig.visibleTerrains.mountain}
+                  onCheckedChange={(checked) =>
+                    onChange({
+                      visibleTerrains: {
+                        ...planetConfig.visibleTerrains,
+                        mountain: !!checked,
+                      },
+                    })
+                  }
+                />
+                <Label htmlFor="show-mountain" className="text-xs cursor-pointer">
+                  <div className="flex items-center gap-2">
+                    <div
+                      className="w-3 h-3 rounded-full"
+                      style={{ backgroundColor: planetConfig.colors.mountain }}
+                    ></div>
+                    <span>Mountain</span>
+                  </div>
+                </Label>
+              </div>
+
+              <div className="flex items-center space-x-2">
+                <Checkbox
+                  id="show-snow"
+                  checked={planetConfig.visibleTerrains.snow}
+                  onCheckedChange={(checked) =>
+                    onChange({
+                      visibleTerrains: {
+                        ...planetConfig.visibleTerrains,
+                        snow: !!checked,
+                      },
+                    })
+                  }
+                />
+                <Label htmlFor="show-snow" className="text-xs cursor-pointer">
+                  <div className="flex items-center gap-2">
+                    <div className="w-3 h-3 rounded-full" style={{ backgroundColor: planetConfig.colors.snow }}></div>
+                    <span>Snow</span>
+                  </div>
+                </Label>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+};
\ No newline at end of file
diff --git a/components/Data/Generator/Astronomers/PlanetHunters/SettingsPanel.tsx b/components/Data/Generator/Astronomers/PlanetHunters/SettingsPanel.tsx
index 70a28f8a9..132f5d066 100644
--- a/components/Data/Generator/Astronomers/PlanetHunters/SettingsPanel.tsx
+++ b/components/Data/Generator/Astronomers/PlanetHunters/SettingsPanel.tsx
@@ -1,124 +1,166 @@
 "use client"
-import { useState, useEffect } from "react"
-import type { PlanetConfig } from "@/utils/planet-physics"
-import { getLiquidType, getTemperatureAdjustedColors } from "@/utils/planet-physics";
+import { useState } from "react"
+import type { PlanetConfig } from "@/app/planets/paint/[id]/planet-config";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { Slider } from "@/components/ui/slider"
-import { Label } from "@/components/ui/label"
-import { Switch } from "@/components/ui/switch"
 import { Button } from "@/components/ui/button"
-import { Checkbox } from "@/components/ui/checkbox"
-import { Download, Upload, RefreshCw } from "lucide-react"
-import ColorPicker from "@/utils/Generators/PH/color-picker"
+import { Textarea } from "@/components/ui/textarea"
+import { Label } from "@/components/ui/label"
+import { Download, Upload, Save } from "lucide-react"
+import BasicSettings from "./Settings/BasicSettings";
+import TerrainSettings from "./Settings/TerrainSettings";
+import ColorSettings from "./Settings/ColourSettings";
+import { createClient } from "@supabase/supabase-js"
+import { useSupabaseClient } from "@supabase/auth-helpers-react";
 
 interface SettingsPanelProps {
   planetConfig: PlanetConfig
   onChange: (config: Partial<PlanetConfig>) => void
+  classificationId?: number
 }
 
-export default function SettingsPanel({ planetConfig, onChange }: SettingsPanelProps) {
-  const [showImportExport, setShowImportExport] = useState(false)
+export default function SettingsPanel({ planetConfig, onChange, classificationId }: SettingsPanelProps) {
+  const supabase = useSupabaseClient();
 
-  // Update liquid type based on temperature
-  useEffect(() => {
-    const liquidType = getLiquidType(planetConfig.temperature)
+  const [importText, setImportText] = useState("")
+  const [importError, setImportError] = useState("")
+  const [showExport, setShowExport] = useState(false)
+  const [saveStatus, setSaveStatus] = useState<"idle" | "saving" | "saved" | "error">("idle")
 
-    // Only update if the colors don't match the expected liquid type
-    if (
-      planetConfig.colors.ocean !== liquidType.color ||
-      planetConfig.colors.oceanPattern !== liquidType.patternColor
-    ) {
-      onChange({
-        colors: {
-          ...planetConfig.colors,
-          ocean: liquidType.color,
-          oceanPattern: liquidType.patternColor,
-        },
-      })
-    }
-  }, [planetConfig.temperature])
+  const handleImport = () => {
+    if (!importText.trim()) return
 
-  // Update terrain colors based on temperature
-  useEffect(() => {
-    const terrainColors = getTemperatureAdjustedColors(planetConfig.temperature, planetConfig.biomass)
-
-    // Only update if colors have changed
-    if (
-      planetConfig.colors.beach !== terrainColors.beach ||
-      planetConfig.colors.lowland !== terrainColors.lowland ||
-      planetConfig.colors.midland !== terrainColors.midland ||
-      planetConfig.colors.highland !== terrainColors.highland ||
-      planetConfig.colors.mountain !== terrainColors.mountain ||
-      planetConfig.colors.snow !== terrainColors.snow
-    ) {
-      onChange({
-        colors: {
-          ...planetConfig.colors,
-          ...terrainColors,
-        },
-      })
+    try {
+      const config = JSON.parse(importText)
+      onChange(config)
+      setImportText("")
+      setImportError("")
+    } catch (error) {
+      setImportError("Invalid JSON configuration")
     }
-  }, [planetConfig.temperature, planetConfig.biomass])
+  }
 
-  // Check if planet should be gaseous or terrestrial based on mass and radius
-  useEffect(() => {
-    if ((planetConfig.mass > 7.5 || planetConfig.radius > 2.5) && planetConfig.type !== "gaseous") {
-      onChange({ type: "gaseous" })
-    } else if (planetConfig.mass <= 7.5 && planetConfig.radius <= 2.5 && planetConfig.type === "gaseous") {
-      onChange({ type: "terrestrial" })
+  const handleSave = async () => {
+    if (!classificationId) return
+
+    setSaveStatus("saving")
+
+    try {
+      // First, fetch the existing classification configuration
+      const { data: existingData, error: fetchError } = await supabase
+        .from("classifications")
+        .select("classificationConfiguration")
+        .eq("id", classificationId)
+        .single()
+
+      if (fetchError) {
+        throw fetchError
+      }
+
+      // Merge the planet configuration with existing configuration
+      const updatedConfig = {
+        ...existingData.classificationConfiguration,
+        planetConfiguration: planetConfig,
+      }
+
+      // Update the classification with the merged configuration
+      const { error: updateError } = await supabase
+        .from("classifications")
+        .update({ classificationConfiguration: updatedConfig })
+        .eq("id", classificationId)
+
+      if (updateError) {
+        throw updateError
+      }
+
+      setSaveStatus("saved")
+      setTimeout(() => setSaveStatus("idle"), 2000)
+    } catch (error) {
+      console.error("Error saving planet configuration:", error)
+      setSaveStatus("error")
+      setTimeout(() => setSaveStatus("idle"), 3000)
     }
-  }, [planetConfig.mass, planetConfig.radius, planetConfig.type])
-
-  const regenerateSeed = () => {
-    onChange({ seed: Math.floor(Math.random() * 10000) })
   }
 
-  // Get current liquid type name
-  const liquidType = getLiquidType(planetConfig.temperature)
+  const exportConfig = JSON.stringify(planetConfig, null, 2)
 
   return (
     <div className="space-y-6 bg-slate-900 text-slate-100">
-      <div className="flex justify-between items-center">
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => setShowImportExport(!showImportExport)}
-          className="flex items-center gap-2 bg-slate-800 text-slate-200 border-slate-700 hover:bg-slate-700"
-        >
-          {showImportExport ? "Hide" : "Show"} Import/Export
-          {showImportExport ? <Download className="h-4 w-4" /> : <Upload className="h-4 w-4" />}
-        </Button>
-      </div>
-
-      {showImportExport && (
-        <div className="p-4 bg-slate-800 rounded-md space-y-4 border border-slate-700">
-          <h3 className="text-sm font-medium text-slate-200">Import/Export Configuration</h3>
-          <div className="flex gap-2">
+      {/* Import/Export/Save Buttons */}
+      <div className="space-y-4">
+        <div className="flex gap-2 items-center">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setShowExport(!showExport)}
+            className="flex items-center gap-2 bg-slate-800 text-slate-200 border-slate-700 hover:bg-slate-700"
+          >
+            <Download className="h-4 w-4" />
+            Export
+          </Button>
+
+          {classificationId && (
             <Button
-              variant="secondary"
+              variant="outline"
               size="sm"
-              onClick={() => {
-                const event = new CustomEvent("open-import-dialog")
-                window.dispatchEvent(event)
-              }}
-              className="flex-1 bg-slate-700 text-slate-200 hover:bg-slate-600"
+              onClick={handleSave}
+              disabled={saveStatus === "saving"}
+              className="flex items-center gap-2 bg-slate-800 text-slate-200 border-slate-700 hover:bg-slate-700"
             >
-              Import
+              <Save className="h-4 w-4" />
+              {saveStatus === "saving" ? "Saving..." : "Save"}
             </Button>
-            <Button
-              variant="secondary"
-              size="sm"
-              onClick={() => {
-                const event = new CustomEvent("open-export-dialog")
-                window.dispatchEvent(event)
+          )}
+
+          {saveStatus === "saved" && <span className="text-green-400 text-sm">Saved!</span>}
+          {saveStatus === "error" && <span className="text-red-400 text-sm">Error saving</span>}
+        </div>
+
+        {/* Import Section */}
+        <div className="bg-slate-800 p-4 rounded-md border border-slate-700">
+          <Label className="text-slate-200 text-sm font-medium">Import Configuration</Label>
+          <div className="mt-2 space-y-2">
+            <Textarea
+              value={importText}
+              onChange={(e) => {
+                setImportText(e.target.value)
+                setImportError("")
               }}
-              className="flex-1 bg-slate-700 text-slate-200 hover:bg-slate-600"
-            >
-              Export
+              placeholder="Paste JSON configuration here..."
+              className="min-h-[100px] bg-slate-700 border-slate-600 text-slate-100"
+            />
+            {importError && <p className="text-red-400 text-xs">{importError}</p>}
+            <Button onClick={handleImport} disabled={!importText.trim()} size="sm" className="w-full">
+              <Upload className="h-4 w-4 mr-2" />
+              Import
             </Button>
           </div>
         </div>
-      )}
+
+        {/* Export Section */}
+        {showExport && (
+          <div className="bg-slate-800 p-4 rounded-md border border-slate-700">
+            <Label className="text-slate-200 text-sm font-medium">Export Configuration</Label>
+            <div className="mt-2 space-y-2">
+              <Textarea
+                value={exportConfig}
+                readOnly
+                className="min-h-[150px] font-mono text-xs bg-slate-700 border-slate-600 text-slate-100"
+                onClick={(e) => (e.target as HTMLTextAreaElement).select()}
+              />
+              <Button
+                onClick={() => {
+                  navigator.clipboard.writeText(exportConfig)
+                  setShowExport(false)
+                }}
+                size="sm"
+                className="w-full"
+              >
+                Copy & Close
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
 
       <Tabs defaultValue="basic" className="w-full">
         <TabsList className="w-full grid grid-cols-3 mb-4 bg-slate-800">
@@ -134,502 +176,17 @@ export default function SettingsPanel({ planetConfig, onChange }: SettingsPanelP
         </TabsList>
 
         <TabsContent value="basic" className="space-y-6">
-          <div className="space-y-4">
-            <div className="bg-slate-800 p-4 rounded-md border border-slate-700">
-              <h3 className="text-sm font-medium mb-3 text-slate-200">Planet Type</h3>
-              <div className="flex gap-2">
-                <Button
-                  variant={planetConfig.type === "terrestrial" ? "default" : "outline"}
-                  size="sm"
-                  onClick={() => onChange({ type: "terrestrial" })}
-                  className="flex-1"
-                >
-                  Terrestrial
-                </Button>
-                <Button
-                  variant={planetConfig.type === "gaseous" ? "default" : "outline"}
-                  size="sm"
-                  onClick={() => onChange({ type: "gaseous" })}
-                  className="flex-1"
-                >
-                  Gaseous
-                </Button>
-              </div>
-              {(planetConfig.mass > 7.5 || planetConfig.radius > 2.5) && planetConfig.type === "gaseous" && (
-                <p className="text-xs text-amber-400 mt-2">
-                  Note: High mass or radius has automatically set this to a gas giant
-                </p>
-              )}
-              {planetConfig.mass <= 7.5 && planetConfig.radius <= 2.5 && planetConfig.type === "terrestrial" && (
-                <p className="text-xs text-slate-400 mt-2">Note: Values are in Earth radii/mass units</p>
-              )}
-            </div>
-
-            <div className="bg-slate-800 p-4 rounded-md space-y-4 border border-slate-700">
-              <div className="flex justify-between items-center">
-                <h3 className="text-sm font-medium text-slate-200">Seed: {planetConfig.seed}</h3>
-                <Button
-                  variant="outline"
-                  size="icon"
-                  onClick={regenerateSeed}
-                  className="bg-slate-700 border-slate-600"
-                >
-                  <RefreshCw className="h-4 w-4" />
-                </Button>
-              </div>
-
-              <div className="space-y-2">
-                <div className="flex justify-between">
-                  <Label htmlFor="radius" className="text-slate-200">
-                    Radius (Earth radii)
-                  </Label>
-                  <span className="text-sm text-slate-400">{planetConfig.radius.toFixed(1)}</span>
-                </div>
-                <Slider
-                  id="radius"
-                  min={0.5}
-                  max={5}
-                  step={0.1}
-                  value={[planetConfig.radius]}
-                  onValueChange={(value) => onChange({ radius: value[0] })}
-                  className="[&_[role=slider]]:bg-slate-200"
-                />
-              </div>
-
-              <div className="space-y-2">
-                <div className="flex justify-between">
-                  <Label htmlFor="temperature" className="text-slate-200">
-                    Temperature
-                  </Label>
-                  <span className="text-sm text-slate-400">
-                    {planetConfig.temperature.toFixed(0)}K ({(planetConfig.temperature - 273.15).toFixed(0)}°C)
-                  </span>
-                </div>
-                <Slider
-                  id="temperature"
-                  min={50}
-                  max={700}
-                  step={1}
-                  value={[planetConfig.temperature]}
-                  onValueChange={(value) => onChange({ temperature: value[0] })}
-                  className="[&_[role=slider]]:bg-slate-200"
-                />
-                <div className="text-xs text-slate-400">Liquid Solvent: {liquidType.name}</div>
-              </div>
-
-              <div className="space-y-2">
-                <div className="flex justify-between">
-                  <Label htmlFor="mass" className="text-slate-200">
-                    Mass (Earth masses)
-                  </Label>
-                  <span className="text-sm text-slate-400">{planetConfig.mass.toFixed(1)} M⊕</span>
-                </div>
-                <Slider
-                  id="mass"
-                  min={0.1}
-                  max={10}
-                  step={0.1}
-                  value={[planetConfig.mass]}
-                  onValueChange={(value) => onChange({ mass: value[0] })}
-                  className="[&_[role=slider]]:bg-slate-200"
-                />
-              </div>
-
-              <div className="pt-2 border-t border-slate-700">
-                <div className="flex justify-between">
-                  <Label className="text-slate-200">Density</Label>
-                  <span className="text-sm text-slate-400">
-                    {(planetConfig.mass / ((planetConfig.radius ** 3 * Math.PI * 4) / 3)).toFixed(2)} g/cm³
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
+          <BasicSettings planetConfig={planetConfig} onChange={onChange} />
         </TabsContent>
 
         <TabsContent value="terrain" className="space-y-6">
-          {planetConfig.type === "terrestrial" && (
-            <div className="bg-slate-800 p-4 rounded-md space-y-4 border border-slate-700">
-              <h3 className="text-sm font-medium text-slate-200">Terrain Properties</h3>
-
-              <div className="space-y-2">
-                <div className="flex justify-between">
-                  <Label htmlFor="terrainRoughness" className="text-slate-200">
-                    Terrain Roughness
-                  </Label>
-                  <span className="text-sm text-slate-400">{planetConfig.terrainRoughness.toFixed(2)}</span>
-                </div>
-                <Slider
-                  id="terrainRoughness"
-                  min={0.1}
-                  max={1}
-                  step={0.01}
-                  value={[planetConfig.terrainRoughness]}
-                  onValueChange={(value) => onChange({ terrainRoughness: value[0] })}
-                  className="[&_[role=slider]]:bg-slate-200"
-                />
-              </div>
-
-              <div className="space-y-2">
-                <div className="flex justify-between">
-                  <Label htmlFor="liquidHeight" className="text-slate-200">
-                    Ocean Level
-                  </Label>
-                  <span className="text-sm text-slate-400">{planetConfig.liquidHeight.toFixed(2)}</span>
-                </div>
-                <Slider
-                  id="liquidHeight"
-                  min={0.3}
-                  max={0.8}
-                  step={0.01}
-                  value={[planetConfig.liquidHeight]}
-                  onValueChange={(value) => onChange({ liquidHeight: value[0] })}
-                  className="[&_[role=slider]]:bg-slate-200"
-                />
-              </div>
-
-              <div className="space-y-2">
-                <div className="flex justify-between">
-                  <Label htmlFor="continentSize" className="text-slate-200">
-                    Continent Size
-                  </Label>
-                  <span className="text-sm text-slate-400">{planetConfig.continentSize.toFixed(2)}</span>
-                </div>
-                <Slider
-                  id="continentSize"
-                  min={0.1}
-                  max={1}
-                  step={0.01}
-                  value={[planetConfig.continentSize]}
-                  onValueChange={(value) => onChange({ continentSize: value[0] })}
-                  className="[&_[role=slider]]:bg-slate-200"
-                />
-              </div>
-
-              <div className="space-y-2">
-                <div className="flex justify-between">
-                  <Label htmlFor="continentCount" className="text-slate-200">
-                    Continent Count
-                  </Label>
-                  <span className="text-sm text-slate-400">{planetConfig.continentCount.toFixed(0)}</span>
-                </div>
-                <Slider
-                  id="continentCount"
-                  min={1}
-                  max={10}
-                  step={1}
-                  value={[planetConfig.continentCount]}
-                  onValueChange={(value) => onChange({ continentCount: value[0] })}
-                  className="[&_[role=slider]]:bg-slate-200"
-                />
-              </div>
-
-              <div className="space-y-2">
-                <div className="flex justify-between">
-                  <Label htmlFor="noiseScale" className="text-slate-200">
-                    Detail Level
-                  </Label>
-                  <span className="text-sm text-slate-400">{planetConfig.noiseScale.toFixed(2)}</span>
-                </div>
-                <Slider
-                  id="noiseScale"
-                  min={0.5}
-                  max={2}
-                  step={0.1}
-                  value={[planetConfig.noiseScale]}
-                  onValueChange={(value) => onChange({ noiseScale: value[0] })}
-                  className="[&_[role=slider]]:bg-slate-200"
-                />
-              </div>
-
-              <div className="space-y-2">
-                <div className="flex justify-between">
-                  <Label htmlFor="volcanicActivity" className="text-slate-200">
-                    Volcanic Activity
-                  </Label>
-                  <span className="text-sm text-slate-400">{planetConfig.volcanicActivity.toFixed(2)}</span>
-                </div>
-                <Slider
-                  id="volcanicActivity"
-                  min={0}
-                  max={1}
-                  step={0.01}
-                  value={[planetConfig.volcanicActivity]}
-                  onValueChange={(value) => onChange({ volcanicActivity: value[0] })}
-                  className="[&_[role=slider]]:bg-slate-200"
-                />
-                <div className="text-xs text-slate-400 italic">Note: Volcanic activity is currently a static value</div>
-              </div>
-
-              <div className="space-y-2">
-                <div className="flex justify-between">
-                  <Label htmlFor="biomass" className="text-slate-200">
-                    Biomass
-                  </Label>
-                  <span className="text-sm text-slate-400">{planetConfig.biomass.toFixed(2)}</span>
-                </div>
-                <Slider
-                  id="biomass"
-                  min={0}
-                  max={1}
-                  step={0.01}
-                  value={[planetConfig.biomass]}
-                  onValueChange={(value) => onChange({ biomass: value[0] })}
-                  className="[&_[role=slider]]:bg-slate-200"
-                />
-                <div className="text-xs text-slate-400 italic">Note: Biomass is currently a static value</div>
-              </div>
-            </div>
-          )}
-
-          <div className="bg-slate-800 p-4 rounded-md space-y-4 border border-slate-700">
-            <div className="flex justify-between items-center">
-              <h3 className="text-sm font-medium text-slate-200">Debug Mode</h3>
-              <Switch
-                checked={planetConfig.debugMode || false}
-                onCheckedChange={(checked) => onChange({ debugMode: checked })}
-              />
-            </div>
-
-            {planetConfig.debugMode && (
-              <div className="pt-2 border-t border-slate-700 space-y-2">
-                <p className="text-xs text-slate-400">Show/hide specific terrain types:</p>
-                <div className="grid grid-cols-2 gap-2">
-                  <div className="flex items-center space-x-2">
-                    <Checkbox
-                      id="show-ocean"
-                      checked={planetConfig.visibleTerrains.ocean}
-                      onCheckedChange={(checked) =>
-                        onChange({
-                          visibleTerrains: {
-                            ...planetConfig.visibleTerrains,
-                            ocean: !!checked,
-                          },
-                        })
-                      }
-                    />
-                    <Label htmlFor="show-ocean" className="text-xs cursor-pointer">
-                      <div className="flex items-center gap-2">
-                        <div
-                          className="w-3 h-3 rounded-full"
-                          style={{ backgroundColor: planetConfig.colors.ocean }}
-                        ></div>
-                        <span>Ocean</span>
-                      </div>
-                    </Label>
-                  </div>
-
-                  <div className="flex items-center space-x-2">
-                    <Checkbox
-                      id="show-beach"
-                      checked={planetConfig.visibleTerrains.beach}
-                      onCheckedChange={(checked) =>
-                        onChange({
-                          visibleTerrains: {
-                            ...planetConfig.visibleTerrains,
-                            beach: !!checked,
-                          },
-                        })
-                      }
-                    />
-                    <Label htmlFor="show-beach" className="text-xs cursor-pointer">
-                      <div className="flex items-center gap-2">
-                        <div
-                          className="w-3 h-3 rounded-full"
-                          style={{ backgroundColor: planetConfig.colors.beach }}
-                        ></div>
-                        <span>Beach</span>
-                      </div>
-                    </Label>
-                  </div>
-
-                  <div className="flex items-center space-x-2">
-                    <Checkbox
-                      id="show-lowland"
-                      checked={planetConfig.visibleTerrains.lowland}
-                      onCheckedChange={(checked) =>
-                        onChange({
-                          visibleTerrains: {
-                            ...planetConfig.visibleTerrains,
-                            lowland: !!checked,
-                          },
-                        })
-                      }
-                    />
-                    <Label htmlFor="show-lowland" className="text-xs cursor-pointer">
-                      <div className="flex items-center gap-2">
-                        <div
-                          className="w-3 h-3 rounded-full"
-                          style={{ backgroundColor: planetConfig.colors.lowland }}
-                        ></div>
-                        <span>Lowland</span>
-                      </div>
-                    </Label>
-                  </div>
-
-                  <div className="flex items-center space-x-2">
-                    <Checkbox
-                      id="show-midland"
-                      checked={planetConfig.visibleTerrains.midland}
-                      onCheckedChange={(checked) =>
-                        onChange({
-                          visibleTerrains: {
-                            ...planetConfig.visibleTerrains,
-                            midland: !!checked,
-                          },
-                        })
-                      }
-                    />
-                    <Label htmlFor="show-midland" className="text-xs cursor-pointer">
-                      <div className="flex items-center gap-2">
-                        <div
-                          className="w-3 h-3 rounded-full"
-                          style={{ backgroundColor: planetConfig.colors.midland }}
-                        ></div>
-                        <span>Midland</span>
-                      </div>
-                    </Label>
-                  </div>
-
-                  <div className="flex items-center space-x-2">
-                    <Checkbox
-                      id="show-highland"
-                      checked={planetConfig.visibleTerrains.highland}
-                      onCheckedChange={(checked) =>
-                        onChange({
-                          visibleTerrains: {
-                            ...planetConfig.visibleTerrains,
-                            highland: !!checked,
-                          },
-                        })
-                      }
-                    />
-                    <Label htmlFor="show-highland" className="text-xs cursor-pointer">
-                      <div className="flex items-center gap-2">
-                        <div
-                          className="w-3 h-3 rounded-full"
-                          style={{ backgroundColor: planetConfig.colors.highland }}
-                        ></div>
-                        <span>Highland</span>
-                      </div>
-                    </Label>
-                  </div>
-
-                  <div className="flex items-center space-x-2">
-                    <Checkbox
-                      id="show-mountain"
-                      checked={planetConfig.visibleTerrains.mountain}
-                      onCheckedChange={(checked) =>
-                        onChange({
-                          visibleTerrains: {
-                            ...planetConfig.visibleTerrains,
-                            mountain: !!checked,
-                          },
-                        })
-                      }
-                    />
-                    <Label htmlFor="show-mountain" className="text-xs cursor-pointer">
-                      <div className="flex items-center gap-2">
-                        <div
-                          className="w-3 h-3 rounded-full"
-                          style={{ backgroundColor: planetConfig.colors.mountain }}
-                        ></div>
-                        <span>Mountain</span>
-                      </div>
-                    </Label>
-                  </div>
-
-                  <div className="flex items-center space-x-2">
-                    <Checkbox
-                      id="show-snow"
-                      checked={planetConfig.visibleTerrains.snow}
-                      onCheckedChange={(checked) =>
-                        onChange({
-                          visibleTerrains: {
-                            ...planetConfig.visibleTerrains,
-                            snow: !!checked,
-                          },
-                        })
-                      }
-                    />
-                    <Label htmlFor="show-snow" className="text-xs cursor-pointer">
-                      <div className="flex items-center gap-2">
-                        <div
-                          className="w-3 h-3 rounded-full"
-                          style={{ backgroundColor: planetConfig.colors.snow }}
-                        ></div>
-                        <span>Snow</span>
-                      </div>
-                    </Label>
-                  </div>
-                </div>
-              </div>
-            )}
-          </div>
+          <TerrainSettings planetConfig={planetConfig} onChange={onChange} />
         </TabsContent>
 
         <TabsContent value="colors" className="space-y-6">
-          <div className="bg-slate-800 p-4 rounded-md space-y-4 border border-slate-700">
-            <h3 className="text-sm font-medium text-slate-200">Planet Colors</h3>
-
-            <div className="grid grid-cols-2 gap-4">
-              <ColorPicker
-                label="Atmosphere"
-                color={planetConfig.colors.atmosphere}
-                onChange={(color) => onChange({ colors: { ...planetConfig.colors, atmosphere: color } })}
-              />
-
-              <ColorPicker
-                label={`${liquidType.name}`}
-                color={planetConfig.colors.ocean}
-                onChange={(color) => onChange({ colors: { ...planetConfig.colors, ocean: color } })}
-              />
-
-              <ColorPicker
-                label={`${liquidType.name} Pattern`}
-                color={planetConfig.colors.oceanPattern}
-                onChange={(color) => onChange({ colors: { ...planetConfig.colors, oceanPattern: color } })}
-              />
-
-              <ColorPicker
-                label="Beach"
-                color={planetConfig.colors.beach}
-                onChange={(color) => onChange({ colors: { ...planetConfig.colors, beach: color } })}
-              />
-
-              <ColorPicker
-                label="Lowland"
-                color={planetConfig.colors.lowland}
-                onChange={(color) => onChange({ colors: { ...planetConfig.colors, lowland: color } })}
-              />
-
-              <ColorPicker
-                label="Midland"
-                color={planetConfig.colors.midland}
-                onChange={(color) => onChange({ colors: { ...planetConfig.colors, midland: color } })}
-              />
-
-              <ColorPicker
-                label="Highland"
-                color={planetConfig.colors.highland}
-                onChange={(color) => onChange({ colors: { ...planetConfig.colors, highland: color } })}
-              />
-
-              <ColorPicker
-                label="Mountain"
-                color={planetConfig.colors.mountain}
-                onChange={(color) => onChange({ colors: { ...planetConfig.colors, mountain: color } })}
-              />
-
-              <ColorPicker
-                label="Snow"
-                color={planetConfig.colors.snow}
-                onChange={(color) => onChange({ colors: { ...planetConfig.colors, snow: color } })}
-              />
-            </div>
-          </div>
+          <ColorSettings planetConfig={planetConfig} onChange={onChange} />
         </TabsContent>
       </Tabs>
     </div>
-  );
+  )
 };
\ No newline at end of file
diff --git a/components/Data/Generator/Astronomers/PlanetHunters/planetViewer.tsx b/components/Data/Generator/Astronomers/PlanetHunters/planetViewer.tsx
index 84c48980a..f30807328 100644
--- a/components/Data/Generator/Astronomers/PlanetHunters/planetViewer.tsx
+++ b/components/Data/Generator/Astronomers/PlanetHunters/planetViewer.tsx
@@ -4,21 +4,21 @@ import { useState } from "react"
 import { Canvas } from "@react-three/fiber"
 import { OrbitControls, Stars } from "@react-three/drei"
 import { Cog } from "lucide-react"
-import type { PlanetConfig } from "@/utils/planet-physics"
+import type { PlanetConfig } from "@/app/planets/paint/[id]/planet-config"
 import Planet from "./planet"
 import SettingsPanel from "./SettingsPanel"
 
 interface PlanetViewerProps {
   planetConfig: PlanetConfig
   onConfigChange: (config: Partial<PlanetConfig>) => void
-};
+}
 
 export default function PlanetViewer({ planetConfig, onConfigChange }: PlanetViewerProps) {
   const [showSettings, setShowSettings] = useState(false)
 
   return (
-    <div className="w-full h-screen relative">
-      <Canvas camera={{ position: [0, 0, 10], fov: 45 }}>
+    <div className="w-full h-full bg-black relative overflow-hidden">
+      <Canvas camera={{ position: [0, 0, 10], fov: 45 }} style={{ width: "100%", height: "100%" }}>
         <ambientLight intensity={0.3} />
         <pointLight position={[10, 10, 10]} intensity={1.5} />
         <Planet config={planetConfig} />
@@ -63,5 +63,5 @@ export default function PlanetViewer({ planetConfig, onConfigChange }: PlanetVie
         </div>
       )}
     </div>
-  );
+  )
 };
\ No newline at end of file
diff --git a/components/Data/RecentActivity.tsx b/components/Data/RecentActivity.tsx
new file mode 100644
index 000000000..650567e1b
--- /dev/null
+++ b/components/Data/RecentActivity.tsx
@@ -0,0 +1,191 @@
+"use client";
+
+import { MessageCircle, Star } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+import { formatDistanceToNowStrict } from "date-fns";
+
+interface CommentVote {
+  type: "comment" | "vote";
+  created_at: string;
+  content?: string;
+  vote_type?: string;
+  classification_id: number;
+}
+
+interface OtherClassification {
+  id: number;
+  classificationtype: string | null;
+  content: string | null;
+  author: string;
+  created_at: string;
+}
+
+export default function RecentActivity({
+  activityFeed,
+  otherClassifications,
+}: {
+  activityFeed: CommentVote[];
+  otherClassifications: OtherClassification[];
+}) {
+  const [activeTab, setActiveTab] = useState<"comments" | "others">("comments");
+
+  const ClassificationIcon = ({ type }: { type: string | null }) => {
+    switch (type) {
+      case "planet":
+        return (
+          <svg className="w-10 h-10 animate-pulse" viewBox="0 0 64 64">
+            <circle cx="32" cy="32" r="20" fill="#3B82F6" />
+            <circle cx="32" cy="32" r="24" stroke="#3B82F6" strokeOpacity="0.3" strokeWidth="4" />
+            <circle cx="20" cy="24" r="4" fill="white" fillOpacity="0.6" />
+          </svg>
+        );
+      case "cloud":
+        return (
+          <svg className="w-10 h-10 animate-float" viewBox="0 0 64 64">
+            <ellipse cx="32" cy="38" rx="20" ry="12" fill="#60A5FA" />
+            <ellipse cx="24" cy="30" rx="12" ry="10" fill="#93C5FD" />
+            <ellipse cx="40" cy="30" rx="12" ry="10" fill="#93C5FD" />
+          </svg>
+        );
+      case "telescope-minorPlanet":
+        return (
+          <svg className="w-10 h-10 animate-spin-slow" viewBox="0 0 64 64">
+            <circle cx="32" cy="32" r="16" stroke="#FBBF24" strokeWidth="4" />
+            <circle cx="32" cy="32" r="8" fill="#F59E0B" />
+            <circle cx="44" cy="20" r="4" fill="#FCD34D" />
+          </svg>
+        );
+      case "sunspot":
+        return (
+          <svg className="w-10 h-10 animate-pulse" viewBox="0 0 64 64">
+            <circle cx="32" cy="32" r="20" fill="#F59E0B" />
+            <path
+              d="M32 12v8M32 44v8M12 32h8M44 32h8M20 20l6 6M38 38l6 6M20 44l6-6M38 26l6-6"
+              stroke="#B45309"
+              strokeWidth="3"
+              strokeLinecap="round"
+            />
+          </svg>
+        );
+      default:
+        return (
+          <div className="w-10 h-10 bg-gray-300 rounded-full flex items-center justify-center text-gray-600 font-bold text-sm">
+            ?
+          </div>
+        );
+    }
+  };
+
+  return (
+    <section className="rounded-2xl bg-white/80 p-4 border shadow space-y-4">
+      <div className="flex border-b border-gray-300 mb-2">
+        <button
+          className={`py-2 px-4 -mb-px font-semibold rounded-t-lg transition-colors ${
+            activeTab === "comments"
+              ? "border-b-4 border-sky-600 bg-gradient-to-r from-sky-200 to-sky-100 text-sky-800 shadow"
+              : "text-gray-600 hover:text-sky-600 hover:bg-sky-50"
+          }`}
+          onClick={() => setActiveTab("comments")}
+        >
+          Comments & Votes
+        </button>
+        <button
+          className={`py-2 px-4 -mb-px font-semibold rounded-t-lg transition-colors ${
+            activeTab === "others"
+              ? "border-b-4 border-indigo-600 bg-gradient-to-r from-indigo-200 to-indigo-100 text-indigo-800 shadow"
+              : "text-gray-600 hover:text-indigo-600 hover:bg-indigo-50"
+          }`}
+          onClick={() => setActiveTab("others")}
+        >
+          Other Classifications
+        </button>
+      </div>
+
+      {activeTab === "comments" ? (
+        <>
+          {activityFeed.length === 0 ? (
+            <p className="text-muted-foreground text-sm">
+              No comments or votes in the last 7 days.
+            </p>
+          ) : (
+            <ul className="space-y-2 max-h-80 overflow-y-auto">
+              {activityFeed.map((item, idx) => (
+                <li
+                  key={idx}
+                  className="flex items-start gap-3 bg-slate-100 rounded-lg p-3"
+                >
+                  <div className="pt-1">
+                    {item.type === "comment" ? (
+                      <MessageCircle className="text-sky-500" />
+                    ) : (
+                      <Star className="text-yellow-400" />
+                    )}
+                  </div>
+                  <div>
+                    <p className="text-sm">
+                      {item.type === "comment"
+                        ? `Someone commented: "${item.content}"`
+                        : `Received a ${
+                            item.vote_type === "up"
+                              ? "👍 upvote"
+                              : "👎 downvote"
+                          }`}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {formatDistanceToNowStrict(new Date(item.created_at), {
+                        addSuffix: true,
+                      })}
+                      {" • "}
+                      <Link
+                        href={`/posts/${item.classification_id}`}
+                        className="text-blue-600 hover:underline"
+                      >
+                        View Post
+                      </Link>
+                    </p>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          )}
+        </>
+      ) : (
+        <>
+          {otherClassifications.length === 0 ? (
+            <p className="text-muted-foreground text-sm">
+              No recent classifications from other users.
+            </p>
+          ) : (
+            <ul className="space-y-3 max-h-80 overflow-y-auto pr-2">
+              {otherClassifications.map((c) => (
+                <li
+                  key={c.id}
+                  className="flex items-center gap-4 p-3 bg-slate-50 rounded-lg border border-gray-200 shadow-sm"
+                >
+                  <div className="flex-shrink-0">
+                    <ClassificationIcon type={c.classificationtype} />
+                  </div>
+                  <div className="flex-grow">
+                    <p className="text-sm font-semibold capitalize text-indigo-700">
+                      {c.classificationtype || "Unknown Type"}
+                    </p>
+                    <p className="text-xs text-gray-600 truncate">
+                      {c.content?.slice(0, 100) || "No content"}
+                    </p>
+                  </div>
+                  <Link
+                    href={`/posts/${c.id}`}
+                    className="inline-block bg-gradient-to-r from-indigo-600 to-indigo-500 text-white px-3 py-1 rounded hover:from-indigo-700 hover:to-indigo-600 text-sm font-medium transition"
+                  >
+                    Explore →
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          )}
+        </>
+      )}
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/components/Data/RecentDiscoveries.tsx b/components/Data/RecentDiscoveries.tsx
new file mode 100644
index 000000000..4039d825d
--- /dev/null
+++ b/components/Data/RecentDiscoveries.tsx
@@ -0,0 +1,133 @@
+"use client";
+
+import Link from "next/link";
+import { Zap, Telescope } from "lucide-react";
+import { Classification, LinkedAnomaly } from "@/app/page";
+import { useState } from "react";
+import { ClassificationIcon, getAnomalyColor } from "@/lib/helper/classification-icons";
+
+interface Props {
+  linkedAnomalies: LinkedAnomaly[];
+  classifications: Classification[];
+}
+
+export default function RecentDiscoveries({ linkedAnomalies, classifications }: Props) {
+  const [tab, setTab] = useState<"anomalies" | "yours">("anomalies");
+
+  return (
+    <section className="rounded-2xl bg-white/80 p-6 border shadow space-y-6">
+      <h3 className="font-semibold text-lg flex items-center gap-2">
+        <Zap className="text-purple-600" />
+        Recent Discoveries
+      </h3>
+
+      <div className="flex border-b border-gray-300 mb-4">
+        {["anomalies", "yours"].map((type) => (
+          <button
+            key={type}
+            className={`py-2 px-4 -mb-px font-semibold rounded-t-lg transition-colors ${
+              tab === type
+                ? "border-b-4 border-purple-600 bg-gradient-to-r from-purple-200 to-purple-100 text-purple-800 shadow"
+                : "text-gray-600 hover:text-purple-600 hover:bg-purple-50"
+            }`}
+            onClick={() => setTab(type as any)}
+          >
+            {type === "anomalies" ? "Anomalies" : "Your Classifications"}
+          </button>
+        ))}
+      </div>
+
+      {tab === "anomalies" ? (
+        linkedAnomalies.length === 0 ? (
+          <div className="flex flex-col items-center justify-center bg-purple-50 border border-purple-200 rounded-xl p-6 text-center space-y-4 shadow-inner">
+            <Telescope className="h-8 w-8 text-purple-500" />
+            <h4 className="text-lg font-semibold text-purple-800">
+              No objects of interest available
+            </h4>
+            <p className="text-sm text-purple-700 max-w-md">
+              It looks like your telescope hasn't found any anomalies to classify. Try recalibrating and redeploying to a different region.
+            </p>
+            <Link
+              href="/activity/deploy"
+              className="inline-block bg-purple-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-purple-700 transition"
+            >
+              Re-deploy Telescope →
+            </Link>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 max-h-[400px] overflow-y-auto pr-2">
+            {linkedAnomalies.map((a) => {
+              const anomaly = a.anomaly;
+              const isTESS = anomaly?.anomalytype?.toLowerCase().includes("tess");
+              const color = getAnomalyColor(anomaly?.anomalytype || "");
+              const link = `/structures/telescope/planet-hunters/db-${a.anomaly_id}/classify`;
+
+              return (
+                <div
+                  key={a.id}
+                  className={`flex items-center gap-4 rounded-lg p-4 shadow-md border transition-colors ${
+                    isTESS
+                      ? "border-purple-400 bg-purple-50 hover:bg-purple-100"
+                      : "border-gray-300 bg-white hover:bg-gray-50"
+                  }`}
+                >
+                  <div className="flex-shrink-0">
+                    <ClassificationIcon type={anomaly?.anomalytype?.toLowerCase() || null} />
+                  </div>
+                  <div className="flex flex-col flex-grow min-w-0">
+                    <span
+                      className="inline-block px-2 py-0.5 mb-1 text-xs font-semibold rounded-full"
+                      style={{ backgroundColor: color, color: "white" }}
+                    >
+                      {anomaly?.anomalytype || "Unknown Type"}
+                    </span>
+                    <p className="text-sm text-gray-800 truncate" title={anomaly?.content || ""}>
+                      {anomaly?.content || "No content"}
+                    </p>
+                    <Link
+                      href={link}
+                      className="mt-2 inline-block self-start bg-gradient-to-r from-purple-600 to-purple-500 text-white px-3 py-1 rounded hover:from-purple-700 hover:to-purple-600 text-sm font-medium transition"
+                    >
+                      Classify →
+                    </Link>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )
+      ) : classifications.length === 0 ? (
+        <p className="text-muted-foreground text-sm">
+          You haven’t made any classifications yet.
+        </p>
+      ) : (
+        <ul className="space-y-4">
+          {classifications.map((c) => (
+            <li
+              key={c.id}
+              className="flex items-center gap-4 rounded-lg p-4 shadow-md border border-gray-300 bg-gradient-to-br from-white to-purple-50 hover:from-purple-100 hover:to-purple-100 transition"
+            >
+              <div className="flex-shrink-0">
+                <ClassificationIcon type={c.classificationtype?.toLowerCase() || null} />
+              </div>
+              <div className="flex-grow min-w-0">
+                <p className="text-sm font-semibold capitalize text-purple-700">
+                  {c.classificationtype || "Unknown Type"}
+                </p>
+                <p className="text-xs text-gray-600 truncate" title={c.content || ""}>
+                  {c.content?.slice(0, 100) || "No content"}
+                </p>
+              </div>
+              <Link
+                href={`/posts/${c.id}`}
+                className="inline-block bg-gradient-to-r from-purple-600 to-purple-500 text-white px-4 py-2 rounded hover:from-purple-700 hover:to-purple-600 text-sm font-medium transition"
+              >
+                Explore →
+              </Link>
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/components/Data/StructureAnomalyOverview/t b/components/Data/StructureAnomalyOverview/t
new file mode 100644
index 000000000..e69de29bb
diff --git a/components/Data/ZoodexDataSources.tsx b/components/Data/ZoodexDataSources.tsx
index a85136c39..f7acdc7b3 100644
--- a/components/Data/ZoodexDataSources.tsx
+++ b/components/Data/ZoodexDataSources.tsx
@@ -4,12 +4,12 @@ import { CameraIcon, CloudDrizzleIcon, DogIcon, MicroscopeIcon, SunDimIcon, Tele
 import { BurrowingOwlIcon } from '../../content/Icons/BurrowingOwl';
 import { FishIcon } from '../../content/Icons/FishIcon';
 import { StarterTelescopeTess } from '../Projects/Telescopes/Transiting';
-import { DailyMinorPlanet } from '../Projects/Telescopes/DailyMinorPlanet';
+// import { DailyMinorPlanet } from '../Projects/Telescopes/DailyMinorPlanet';
 import { PlanetFourProject } from '../Projects/Satellite/PlanetFour';
 import { StarterSunspot } from '../Projects/Telescopes/Sunspots';
 import { TelescopeDiskDetector } from '../Projects/Telescopes/DiskDetector';
 // import CameraComponent from '../Projects/Zoodex/Upload/Camera';
-import { DataSourcesModal } from './unlockNewDataSources';
+// import { DataSourcesModal } from './unlockNewDataSources';
 import { BurrowingOwl } from '../Projects/Zoodex/burrowingOwls';
 import { PenguinWatch } from '../Projects/Zoodex/penguinWatch';
 import { ZoodexIguanas } from '../Projects/Zoodex/iguanasFromAbove';
@@ -137,7 +137,7 @@ export const telescopeDataSources = [
                 activeStructure: 3103,
                 researched: 'telescope-minorPlanets',
                 techId: 1,
-                dynamicComponent: <DailyMinorPlanet />
+                // dynamicComponent: <DailyMinorPlanet />
             },
             {
                 name: 'Planet Four',
@@ -172,7 +172,7 @@ export const telescopeDataSources = [
                 activeStructure: 3103,
                 researched: 'telescope-sunspots',
                 techId: 5,
-                dynamicComponent: <StarterSunspot anomalyid={40} />
+                // dynamicComponent: <StarterSunspot anomalyid={40} />
             }
         ] 
     },
@@ -234,39 +234,39 @@ export const lidarDataSources = [
     },
 ];
 
-export const physicsLabDataSources = [
-    {
-        category: 'Particle Accelerator',
-        items: [
-            {
-                name: 'Cosmic Muon Images',
-                description: 'Using Muon Tomography we can probe the internal structure of massive objects, like volcanoes, with particles from stars and galaxies far far away... help us identify these particles inside our detectors',
-                identifier: 'physicslab-cosmicMuons',
-                researchId: 'muon-cosmic-muon-images',
-                researcher: 'zooniverse/reinforce',
-                unlocked: false,
-                compatiblePlanetTypes: ['Frozen', 'Hellhole', 'Arid', 'Lush', 'IceGiant', 'GasGiant'],
-                bestPlanetType: ['Hellhole'],
-                tutorialMission: 20000002,
-                activeStructure: 31010,
-                techId: 6,
-            },
-            {
-                name: 'Name that Neutrino',
-                description: 'When a neutrino interacts in ice, a signal or light pattern is produced. Classify the shape of the signals to help us understand the pattern and movement of these particles',
-                identifier: 'physicslab-neutrinoName',
-                researchId: 'name-that-neutrino',
-                researcher: 'zooniverse/icecubeobservatory',
-                unlocked: false,
-                compatiblePlanetTypes: ['Frozen', 'Hellhole', 'Arid', 'Lush', 'IceGiant', 'GasGiant'],
-                bestPlanetType: ['Frozen'],
-                tutorialMission: 20000001,
-                activeStructure: 31010,
-                techId: 6,
-            },
-        ],
-    },
-];
+// export const physicsLabDataSources = [
+//     {
+//         category: 'Particle Accelerator',
+//         items: [
+//             {
+//                 name: 'Cosmic Muon Images',
+//                 description: 'Using Muon Tomography we can probe the internal structure of massive objects, like volcanoes, with particles from stars and galaxies far far away... help us identify these particles inside our detectors',
+//                 identifier: 'physicslab-cosmicMuons',
+//                 researchId: 'muon-cosmic-muon-images',
+//                 researcher: 'zooniverse/reinforce',
+//                 unlocked: false,
+//                 compatiblePlanetTypes: ['Frozen', 'Hellhole', 'Arid', 'Lush', 'IceGiant', 'GasGiant'],
+//                 bestPlanetType: ['Hellhole'],
+//                 tutorialMission: 20000002,
+//                 activeStructure: 31010,
+//                 techId: 6,
+//             },
+//             {
+//                 name: 'Name that Neutrino',
+//                 description: 'When a neutrino interacts in ice, a signal or light pattern is produced. Classify the shape of the signals to help us understand the pattern and movement of these particles',
+//                 identifier: 'physicslab-neutrinoName',
+//                 researchId: 'name-that-neutrino',
+//                 researcher: 'zooniverse/icecubeobservatory',
+//                 unlocked: false,
+//                 compatiblePlanetTypes: ['Frozen', 'Hellhole', 'Arid', 'Lush', 'IceGiant', 'GasGiant'],
+//                 bestPlanetType: ['Frozen'],
+//                 tutorialMission: 20000001,
+//                 activeStructure: 31010,
+//                 techId: 6,
+//             },
+//         ],
+//     },
+// ];
 
 export const roverDataSources = [
     {
diff --git a/components/Inventory/Grid/Items/Colony3D.tsx b/components/Inventory/Grid/Items/Colony3D.tsx
index d9e6ae0ae..228d523d7 100644
--- a/components/Inventory/Grid/Items/Colony3D.tsx
+++ b/components/Inventory/Grid/Items/Colony3D.tsx
@@ -101,7 +101,7 @@ export function Colony3D() {
             rotation: [0, 0, 0],
           }}
         >
-          <Environment preset="sunset" />
+          {/* <Environment preset="sunset" /> */}
           
           {/* Structures */}
           <Structures 
diff --git a/components/Layout/Navigation/AlertsDropdown.tsx b/components/Layout/Navigation/AlertsDropdown.tsx
index 01523009a..2b7eddbba 100644
--- a/components/Layout/Navigation/AlertsDropdown.tsx
+++ b/components/Layout/Navigation/AlertsDropdown.tsx
@@ -1,32 +1,49 @@
-'use client';
-
-import { useEffect, useState } from "react";
-import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
-import { formatDistanceToNow, startOfDay, addDays } from "date-fns";
-import Cookies from "js-cookie";
-import Link from "next/link";
+import { useState, useEffect } from 'react';
+import { Bell } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import Link from 'next/link';
+import { useSupabaseClient, useSession } from '@supabase/auth-helpers-react';
+import { formatDistanceToNow, startOfDay, addDays, subDays } from 'date-fns';
+import Cookies from 'js-cookie';
+
+interface LinkedAnomaly {
+  id: string;
+  anomaly: {
+    id: number;
+    anomalytype: string;
+    content: string;
+    classification_status: string;
+  };
+  date: string; // updated from created_at to date
+}
 
-import { Button } from "@/components/ui/button";
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@/components/ui/dropdown-menu";
-import { Badge } from "@/components/ui/badge";
-import { Bell } from "lucide-react";
+interface UpcomingEvent {
+  id: number;
+  type: string;
+  time: string;
+  location: {
+    id: number;
+    content: string;
+  };
+  classification_location: {
+    id: number;
+  };
+}
 
-interface Milestone {
+interface AlertItem {
   id: string;
-  name: string;
-  structure: string;
-  table: string;
-  field: string;
-  value: string;
-  requiredCount: number;
+  type: 'anomaly' | 'event' | 'completion';
+  message: string;
+  anomalyId?: number;
+  eventId?: number;
+  classificationId?: number;
+  anomaly?: {
+    anomalytype?: string; // added to easily access anomalytype
+  };
 }
 
-const FIELD_ALIASES: Record<string, Record<string, string>> = {
-  events: {
-    eventtype: "type",
-  },
-};
-
 const getCookieKey = (userId: string, week: string) => `dismissed-alerts-${userId}-${week}`;
 
 const playRandomSound = () => {
@@ -39,122 +56,126 @@ const playRandomSound = () => {
   audio.play().catch((err) => console.error("Failed to play sound:", err));
 };
 
-async function generateAlerts(supabase: any, session: any) {
-  if (!session?.user) return { milestoneAlerts: [], structureSources: [] };
+async function generateAlerts(supabase: any, session: any): Promise<AlertItem[]> {
+  if (!session?.user) return [];
 
   const userId = session.user.id;
+  const weekAgo = subDays(new Date(), 7);
+  const alerts: AlertItem[] = [];
+
+  try {
+    const { data: linkedAnomalies, error: linkedError } = await supabase
+      .from('linked_anomalies')
+      .select(`
+        id,
+        date,
+        anomaly:anomalies(
+          id,
+          anomalytype,
+          content,
+          classification_status
+        )
+      `)
+      .eq('author', userId)
+      .gte('date', weekAgo.toISOString())
+      .order('date', { ascending: false });
+
+    if (linkedError) {
+      console.error('Error fetching linked anomalies:', linkedError);
+      return [];
+    }
 
-  const milestoneRes = await fetch("/api/gameplay/milestones");
-  const milestoneData = await milestoneRes.json();
-  const thisWeekMilestones = milestoneData.playerMilestones
-    .map((week: { weekStart: string | number | Date; }) => ({
-      ...week,
-      weekStartDate: new Date(week.weekStart),
-    }))
-    .sort((a: { weekStartDate: { getTime: () => number; }; }, b: { weekStartDate: { getTime: () => number; }; }) => b.weekStartDate.getTime() - a.weekStartDate.getTime())
-  [0];
-
-  if (!thisWeekMilestones) return { milestoneAlerts: [], structureSources: [] };
-
-  const { weekStart, data } = thisWeekMilestones;
-  const startDate = new Date(weekStart);
-  const endDate = addDays(startDate, 6);
-  const cookieKey = getCookieKey(userId, weekStart);
-  const dismissedIds = JSON.parse(Cookies.get(cookieKey) || "[]");
-
-  const milestoneAlerts: string[] = [];
-  const structureSources: string[] = [];
-
-  for (const milestone of data as Milestone[]) {
-    if (dismissedIds.includes(milestone.id)) continue;
-
-    const actualField = FIELD_ALIASES[milestone.table]?.[milestone.field] ?? milestone.field;
-
-    const { count, error } = await supabase
-      .from(milestone.table)
-      .select("*", { count: "exact" })
-      .gte("created_at", startDate.toISOString())
-      .lte("created_at", endDate.toISOString())
-      .eq(actualField, milestone.value)
-      .eq("author", userId);
-
-    if (error) continue;
-    if ((count ?? 0) >= milestone.requiredCount) continue;
-
-    let msg = `Mission incomplete: ${milestone.name} — visit the ${milestone.structure} to contribute.`;
-
-    if (milestone.structure === 'WeatherBalloon') {
-      switch (milestone.value) {
-        case 'sunspot':
-          msg = "Sunspot activity detected — deploy Weather Balloon.";
-          break;
-        case 'satellite-planetFour':
-          msg = "Dust storm approaching — assist in image classification.";
-          break;
-        case 'automaton-aiForMars':
-          msg = "Rover anomaly reported — initiate diagnostics.";
-          break;
-        case 'lidar-jovianVortexHunter':
-          msg = "Cyclonic activity spotted — help verify data.";
-          break;
-        case 'cloud':
-        case 'upload-request':
-          msg = "Our scientists need more data - please use your phone's camera to show us what's going on in your area.";
-          break;
-        case 'balloon-marsCloudShapes':
-          msg = "Unusual cloud formations detected — your analysis is needed.";
-          break;
-      };
-    };
-
-    if (milestone.structure === 'Greenhouse') {
-      msg = "Sensor trigger from your desert/ocean pod — investigate recent anomaly.";
-    };
-
-    milestoneAlerts.push(msg);
-    structureSources.push(milestone.structure);
-  };
+    // Get existing classifications for these anomalies
+    const linkedAnomalyIds = linkedAnomalies?.map((la: { anomaly: { id: any; }; }) => la.anomaly.id) || [];
+    
+    const { data: existingClassifications } = await supabase
+      .from('classifications')
+      .select('anomaly')
+      .eq('author', userId)
+      .in('anomaly', linkedAnomalyIds);
+
+    const classifiedAnomalyIds = new Set(existingClassifications?.map((c: { anomaly: any; }) => c.anomaly) || []);
+
+    // Get dismissed alerts
+    const currentWeek = new Date().toISOString().split('T')[0];
+    const cookieKey = getCookieKey(userId, currentWeek);
+    const dismissedIds = JSON.parse(Cookies.get(cookieKey) || "[]");
+
+    // Filter unclassified anomalies that haven't been dismissed
+    const unclassifiedAnomalies = linkedAnomalies?.filter((la: { anomaly: { id: unknown; }; id: any; }) => 
+      !classifiedAnomalyIds.has(la.anomaly.id) && 
+      !dismissedIds.includes(`anomaly-${la.id}`)
+    ) || [];
+
+    // Add anomaly alerts
+    for (const linkedAnomaly of unclassifiedAnomalies) {
+      const anomalyType = linkedAnomaly.anomaly.anomalytype || 'unknown object';
+      alerts.push({
+        id: `anomaly-${linkedAnomaly.id}`,
+        type: 'anomaly',
+        // message: `New ${anomalyType} discovered, classify it for bonus stardust`,
+        message: `New anomaly discovered, classify it for bonus stardust`,
+        anomalyId: linkedAnomaly.anomaly.id,
+        anomaly: { anomalytype: anomalyType },  // attach anomalytype for routing
+      });
+    }
 
-  const { data: classifications } = await supabase
-    .from("classifications")
-    .select("id, anomaly, author, created_at")
-    .eq("author", userId)
-    .in("classificationtype", ["planet", "telescope-minorPlanet"]);
-
-  if ((classifications ?? []).length > 0) {
-    const classificationIds = classifications ? classifications.map((c: { id: any; }) => c.id) : [];
-    const { data: weeklyEvents } = await supabase
-      .from("events")
-      .select("id, classification_location, created_at")
-      .in("classification_location", classificationIds)
-      .gte("created_at", startDate.toISOString())
-      .lte("created_at", endDate.toISOString());
-
-    const userCreatedEventCount = weeklyEvents?.length ?? 0;
-
-    if (userCreatedEventCount === 0) {
-      const hasAvailablePlanetEvent = true;
-      if (hasAvailablePlanetEvent) {
-        milestoneAlerts.push("Your planet awaits a storm event — create one before the week ends.");
-        structureSources.push("WeatherBalloon");
+    // Get upcoming events
+    const { data: upcomingEvents, error: eventsError } = await supabase
+      .from('events')
+      .select(`
+        id,
+        type,
+        time,
+        completed,
+        location:anomalies(id, content),
+        classification_location:classifications(id)
+      `)
+      .eq('classifications.author', userId)
+      .eq('completed', false)
+      .gte('time', new Date().toISOString())
+      .order('time', { ascending: true })
+      .limit(5);
+
+    if (!eventsError && upcomingEvents) {
+      for (const event of upcomingEvents) {
+        if (!dismissedIds.includes(`event-${event.id}`)) {
+          alerts.push({
+            id: `event-${event.id}`,
+            type: 'event',
+            message: `Upcoming ${event.type} event on planet ${event.location?.content || 'Unknown'}`,
+            eventId: event.id,
+            classificationId: event.classification_location?.id
+          });
+        }
       }
     }
-  }
 
-  if (milestoneAlerts.length === 0) {
-    milestoneAlerts.push("You've completed all milestone goals this week!");
-    structureSources.push("");
-  }
+    // If no alerts, show completion message
+    if (alerts.length === 0) {
+      alerts.push({
+        id: 'completion',
+        type: 'completion',
+        message: "No primary objects left to classify. Great work!"
+      });
+    }
 
-  return { milestoneAlerts, structureSources };
+    return alerts;
+  } catch (error) {
+    console.error('Error generating alerts:', error);
+    return [{
+      id: 'error',
+      type: 'completion',
+      message: "Unable to load alerts at this time."
+    }];
+  }
 }
 
-export default function AlertsDropdown() {
+export default function ResponsiveAlerts() {
   const supabase = useSupabaseClient();
   const session = useSession();
 
-  const [alerts, setAlerts] = useState<string[]>([]);
-  const [alertStructures, setAlertStructures] = useState<string[]>([]);
+  const [alerts, setAlerts] = useState<AlertItem[]>([]);
   const [currentAlertIndex, setCurrentAlertIndex] = useState(0);
   const [timeRemaining, setTimeRemaining] = useState("");
   const [hasNewAlert, setHasNewAlert] = useState(false);
@@ -162,11 +183,10 @@ export default function AlertsDropdown() {
 
   useEffect(() => {
     const fetchAlerts = async () => {
-      const { milestoneAlerts, structureSources } = await generateAlerts(supabase, session);
-      setAlerts(milestoneAlerts);
-      setAlertStructures(structureSources);
-      setHasNewAlert(milestoneAlerts.length > 0);
-      setNewNotificationsCount(milestoneAlerts.length);
+      const alertItems = await generateAlerts(supabase, session);
+      setAlerts(alertItems);
+      setHasNewAlert(alertItems.length > 0 && alertItems[0].type !== 'completion');
+      setNewNotificationsCount(alertItems.filter(a => a.type !== 'completion').length);
     };
 
     fetchAlerts();
@@ -186,95 +206,190 @@ export default function AlertsDropdown() {
   }, []);
 
   const dismissCurrentAlert = () => {
-    if (!session?.user) return;
-
-    fetch("/api/gameplay/milestones").then(res => res.json()).then(milestoneData => {
-      const thisWeekMilestones = milestoneData.playerMilestones.at(-1);
-      if (!thisWeekMilestones) return;
-
-      const { weekStart, data } = thisWeekMilestones;
-      const cookieKey = getCookieKey(session.user.id, weekStart);
-      const dismissedIds: string[] = JSON.parse(Cookies.get(cookieKey) || "[]");
-
-      const current = data.find((_: { id: any }, index: any) => {
-        const incompleteAndNotDismissed = data.filter((m: Milestone) => {
-          const actualField = FIELD_ALIASES[m.table]?.[m.field] ?? m.field;
-          return !dismissedIds.includes(m.id);
-        });
-        return incompleteAndNotDismissed[currentAlertIndex]?.id === _.id;
+    if (!session?.user || alerts.length === 0) return;
+
+    const currentAlert = alerts[currentAlertIndex];
+    if (currentAlert.type === 'completion') return;
+
+    const currentWeek = new Date().toISOString().split('T')[0];
+    const cookieKey = getCookieKey(session.user.id, currentWeek);
+    const dismissedIds: string[] = JSON.parse(Cookies.get(cookieKey) || "[]");
+    const updated = [...new Set([...dismissedIds, currentAlert.id])];
+    Cookies.set(cookieKey, JSON.stringify(updated), { expires: 7 });
+
+    playRandomSound();
+
+    const nextIndex = currentAlertIndex + 1;
+    if (nextIndex < alerts.length) {
+      setCurrentAlertIndex(nextIndex);
+      setNewNotificationsCount(Math.max(0, newNotificationsCount - 1));
+    } else {
+      generateAlerts(supabase, session).then(alertItems => {
+        setAlerts(alertItems);
+        setCurrentAlertIndex(0);
+        setHasNewAlert(false);
+        setNewNotificationsCount(0);
       });
+    }
+  };
 
-      if (current?.id) {
-        const updated = [...new Set([...dismissedIds, current.id])];
-        Cookies.set(cookieKey, JSON.stringify(updated), { expires: 7 });
-      }
+  const goToPrevious = () => {
+    if (currentAlertIndex > 0) {
+      setCurrentAlertIndex(currentAlertIndex - 1);
+    }
+  };
+
+  const goToNext = () => {
+    if (currentAlertIndex < alerts.length - 1) {
+      setCurrentAlertIndex(currentAlertIndex + 1);
+    }
+  };
+
+  const currentAlert = alerts[currentAlertIndex];
 
-      const nextIndex = currentAlertIndex + 1;
-      playRandomSound();
+  const getActionPath = () => {
+    if (!currentAlert) return null;
 
-      if (nextIndex < alerts.length) {
-        setCurrentAlertIndex(nextIndex);
-        setNewNotificationsCount(alerts.length - (nextIndex + 1));
+    if (currentAlert.type === 'anomaly' && currentAlert.anomalyId) {
+      const type = currentAlert.anomaly?.anomalytype || '';
+
+      if (
+        type === 'automatonSatellitePhoto' ||
+        type === 'satellitePics' ||
+        type === 'gaseousMapping' ||
+        type === 'cloud'
+      ) {
+        return '/structures/balloon';
+      } else if (type === 'zoodexOthers') {
+        return '/structures/greenhouse';
       } else {
-        setAlerts(["You've completed all milestone goals this week!"]);
-        setAlertStructures([""]);
-        setCurrentAlertIndex(0);
-        setHasNewAlert(false);
-        setNewNotificationsCount(0);
+        return '/structures/telescope';
       }
-    });
-  };
+    }
 
-  const currentStructure = alertStructures[currentAlertIndex]?.toLowerCase();
-  const structurePath = currentStructure
-    ? `/structures/${currentStructure === "weatherballoon" ? "balloon" : currentStructure}`
-    : null;
+    if (currentAlert.type === 'event' && currentAlert.classificationId) {
+      return `/classification/${currentAlert.classificationId}`;
+    }
 
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" className="relative group">
-          <Bell className="h-5 w-5 text-[#81A1C1] group-hover:text-[#88C0D0] transition-colors" />
-          <span className="ml-2 text-[#ECEFF4]">Alerts</span>
-          {hasNewAlert && (
-            <Badge className="absolute -top-1 -right-1 bg-[#BF616A] text-white h-5 w-5 flex items-center justify-center p-0 text-xs">
-              {newNotificationsCount}
-            </Badge>
-          )}
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-[400px] p-0 bg-gradient-to-b from-[#2E3440] to-[#3B4252] backdrop-blur-md border border-[#B48EAD] shadow-[0_0_15px_rgba(191,97,106,0.3)]">
-        <div className="p-4">
-          <h2 className="text-xl sm:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-[#81A1C1] to-[#B48EAD] mb-4">
-            Daily Alert
-          </h2>
-          <div className="mt-4 text-center text-[#D8DEE9] font-semibold">
-            <p>{alerts[currentAlertIndex] || "No new alerts."}</p>
-            <p className="mt-2 text-xs text-[#A3BE8C]">Time remaining until next event: {timeRemaining}</p>
-          </div>
+    return null;
+  };
 
-          {structurePath && (
-            <div className="mt-4 flex justify-center">
-              <Link href={structurePath}>
-                <Button className="bg-[#88C0D0] hover:bg-[#81A1C1] text-[#2E3440]">
-                  Go to Structure
-                </Button>
-              </Link>
-            </div>
-          )}
-
-          {alerts.length > 1 && currentAlertIndex < alerts.length - 1 && (
-            <div className="mt-4 flex justify-center">
-              <Button
-                className="bg-[#5E81AC] hover:bg-[#4C566A] text-[#ECEFF4]"
-                onClick={dismissCurrentAlert}
+  const actionPath = getActionPath();
+
+  const AlertContent = () => (
+    <>
+      <div className="flex items-center justify-between mb-4">
+        <h2 className="text-xl sm:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-[#22d3ee] to-[#a855f7] md:from-[#81A1C1] md:to-[#B48EAD]">
+          Notifications
+        </h2>
+        {alerts.length > 1 && (
+          <span className="text-xs text-gray-500 md:text-[#A3BE8C]">
+            {currentAlertIndex + 1} of {alerts.length}
+          </span>
+        )}
+      </div>
+      
+      <div className="text-center font-semibold">
+        <p className="text-[#67e8f9] md:text-[#D8DEE9] mb-2">
+          {currentAlert?.message || "No new alerts."}
+        </p>
+        <p className="text-xs text-gray-500 md:text-[#A3BE8C]">
+          Time remaining until next event: {timeRemaining}
+        </p>
+      </div>
+
+      <div className="flex flex-col gap-2 mt-4">
+        {actionPath && (
+          <div className="flex justify-center">
+            <Link href={actionPath}>
+              <Button 
+                variant="default" 
+                className="md:bg-[#88C0D0] md:hover:bg-[#81A1C1] md:text-[#2E3440]"
               >
-                Dismiss & Next
+                {currentAlert?.type === 'anomaly' ? 'Classify Object' : 'View Event'}
               </Button>
-            </div>
-          )}
+            </Link>
+          </div>
+        )}
+
+        {alerts.length > 1 && (
+          <div className="flex justify-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={goToPrevious}
+              disabled={currentAlertIndex === 0}
+              className="md:bg-[#4C566A] md:hover:bg-[#5E81AC] md:text-[#ECEFF4] md:border-[#5E81AC]"
+            >
+              Previous
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={goToNext}
+              disabled={currentAlertIndex === alerts.length - 1}
+              className="md:bg-[#4C566A] md:hover:bg-[#5E81AC] md:text-[#ECEFF4] md:border-[#5E81AC]"
+            >
+              Next
+            </Button>
+          </div>
+        )}
+
+        {/* {currentAlert?.type !== 'completion' && (
+          <div className="flex justify-center">
+            <Button
+              variant="secondary"
+              size="sm"
+              className="md:bg-[#5E81AC] md:hover:bg-[#4C566A] md:text-[#ECEFF4]"
+              onClick={dismissCurrentAlert}
+            >
+              Dismiss
+            </Button>
+          </div>
+        )} */}
+      </div>
+    </>
+  );
+
+  return (
+    <>
+      {/* Mobile Layout */}
+      <div className="block md:hidden w-full max-w-[400px] bg-gradient-to-b from-[#0f172a] to-[#020617] backdrop-blur-md border border-[#581c87] shadow-[0_0_15px_rgba(124,58,237,0.5)]">
+        <div className="flex items-center justify-between p-4">
+          <div className="flex items-center relative">
+            <Bell className="h-5 w-5 text-blue-400" />
+            <span className="ml-2 text-white">Alerts</span>
+            {hasNewAlert && (
+              <Badge className="absolute -top-1 -right-1 bg-red-500 hover:bg-red-500 text-white h-5 w-5 flex items-center justify-center p-0 text-xs">
+                {newNotificationsCount}
+              </Badge>
+            )}
+          </div>
+        </div>
+        <div className="p-4">
+          <AlertContent />
         </div>
-      </DropdownMenuContent>
-    </DropdownMenu>
+      </div>
+
+      {/* Desktop Layout */}
+      <div className="hidden md:block">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="relative group">
+              <Bell className="h-5 w-5 text-[#81A1C1] group-hover:text-[#88C0D0] transition-colors" />
+              <span className="ml-2 text-[#ECEFF4]">Alerts</span>
+              {hasNewAlert && (
+                <Badge className="absolute -top-1 -right-1 bg-red-500 hover:bg-red-500 text-white h-5 w-5 flex items-center justify-center p-0 text-xs">
+                  {newNotificationsCount}
+                </Badge>
+              )}
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="w-[400px] max-h-[400px] overflow-y-auto bg-[#2E3440] border border-[#5E81AC] shadow-md rounded-md p-4">
+            <AlertContent />
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </>
   );
 };
\ No newline at end of file
diff --git a/components/Layout/Navigation/MissionDropdown.tsx b/components/Layout/Navigation/MissionDropdown.tsx
index 9121c0a14..360f53f17 100644
--- a/components/Layout/Navigation/MissionDropdown.tsx
+++ b/components/Layout/Navigation/MissionDropdown.tsx
@@ -16,7 +16,7 @@ export function MissionsPopover() {
 
     const formatWeekDisplay = (index: number) => {
         if (index === 0) return "Current Week";
-        if (index === 1) return "Last Week";
+        if (index === 1) return "Last Week"; 
         return `${index} Weeks Ago`;
     };    
 
@@ -65,28 +65,23 @@ export function MissionsPopover() {
                 let query = supabase
                     .from(table)
                     .select("*", { count: "exact" })
+                    .eq(field, value)
                     .gte("created_at", startDate.toISOString())
-                    .lte("created_at", endDate.toISOString())
-                    .eq(field, value);
+                    .lte("created_at", endDate.toISOString());
 
-                if (session.user?.id) {
-                    query = query.eq("author", session.user.id);
-                }
+                // Determine user column based on table
+                const userField = ["votes", "classifications", "comments"].includes(table)
+                    ? "user_id"
+                    : "author";
 
-                const { data: rows, count, error } = await query;
+                query = query.eq(userField, session.user.id);
 
-                console.log({
-                    name: milestone.name,
-                    query: { table, field, value, user: session.user.id },
-                    count,
-                    rows,
-                    error,
-                });
+                const { data: rows, count, error } = await query;
 
                 if (!error && count !== null) {
                     progress[milestone.name] = count;
-                }
-            }
+                };
+            };
 
             setUserProgress(progress);
         };
diff --git a/components/Layout/Navigation/StardustDropdown.tsx b/components/Layout/Navigation/StardustDropdown.tsx
index 721cf9051..2d9e4b73d 100644
--- a/components/Layout/Navigation/StardustDropdown.tsx
+++ b/components/Layout/Navigation/StardustDropdown.tsx
@@ -39,11 +39,11 @@ export function StardustDropdown() {
       <div className="flex flex-col items-start w-full px-4 py-2">
         <Button variant="ghost" className="text-yellow-100 font-semibold">
           <Star className="h-5 w-5 text-yellow-400 mr-2" />
-          Your Stardust: <TotalPoints />
+          <TotalPoints />
         </Button>
       </div>
     );
-  }
+  };
 
   return (
     <Popover>
@@ -51,7 +51,7 @@ export function StardustDropdown() {
         <Button variant="ghost" className="relative group">
           <Star className="h-5 w-5 text-yellow-400 group-hover:text-yellow-300 transition-colors" />
           <span className="text-yellow-100 font-semibold ml-2">
-            Your Stardust: <TotalPoints />
+            <TotalPoints />
           </span>
         </Button>
       </PopoverTrigger>
diff --git a/components/Layout/Tes.tsx b/components/Layout/Tes.tsx
index f7d1ce5a6..3892d938f 100644
--- a/components/Layout/Tes.tsx
+++ b/components/Layout/Tes.tsx
@@ -5,9 +5,11 @@ import Link from "next/link"
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react"
 import { Bell, ChevronDown, HammerIcon, LogOut, Settings, Star, Trophy, User, X, Zap } from "lucide-react"
 import { formatDistanceToNow, startOfDay, addDays } from "date-fns"
-import { Avatar } from "../Account/Avatar"
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
+import { Avatar } from "../Account/Avatar";
+import { Moon, Sun } from "lucide-react"
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import UseDarkMode from "@/hooks/useDarkMode";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -16,19 +18,17 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
-import { Progress } from "@/components/ui/progress"
+} from "@/components/ui/dropdown-menu";
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
 import { Menu, Transition } from "@headlessui/react"
 import TotalPoints from "../Structures/Missions/Stardust/Total"
 import { MissionsPopover } from "./Navigation/MissionDropdown"
-import AlertsDropdown from "./Navigation/AlertsDropdown"
+// import AlertsDropdown from "./Navigation/AlertsDropdown"
 import { StardustDropdown } from "./Navigation/StardustDropdown"
 import { LocationsDropdown } from "./Navigation/LocationsDropdown"
 import TechnologyPopover, { TechnologySection } from "./Navigation/TechTreeDropdown"
-import { Alert } from "antd"
-import AlertBar from "./Navigation/AlertBar"
+import { useRouter } from "next/navigation"
+import ResponsiveAlerts from "./Navigation/AlertsDropdown"
 
 // Sample data - replace with actual data in your implementation
 const techTree = [
@@ -39,8 +39,12 @@ const techTree = [
 ];
 
 export default function GameNavbar() {
-  const supabase = useSupabaseClient()
-  const session = useSession()
+  const supabase = useSupabaseClient();
+  const session = useSession();
+
+  const router = useRouter();
+
+  const { isDark, toggleDarkMode } = UseDarkMode();
 
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const [alertMessage, setAlertMessage] = useState<string>("");
@@ -75,7 +79,33 @@ export default function GameNavbar() {
     calculateTimeRemaining()
 
     return () => clearInterval(interval)
-  }, [])
+  }, []);
+
+  const [referralCode, setReferralCode] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!session) {
+      setReferralCode(null);
+      return;
+    }
+
+    const fetchReferralCode = async () => {
+      const { data, error } = await supabase
+        .from("profiles")
+        .select("referral_code")
+        .eq("id", session.user.id)
+        .single();
+
+      if (error) {
+        console.error("Error fetching referral code:", error);
+        setReferralCode(null);
+      } else {
+        setReferralCode(data?.referral_code ?? null);
+      }
+    };
+
+    fetchReferralCode();
+  }, [session, supabase]);
 
   // Fetch milestones
   useEffect(() => {
@@ -231,15 +261,22 @@ export default function GameNavbar() {
   // milestones={milestones[currentWeekIndex]?.data || []}
 />
 
-          <AlertsDropdown
-            
-          />
+          <ResponsiveAlerts />
 
           {/* Tech Tree Button */}
           <TechnologyPopover />
 
           <LocationsDropdown />
 
+          {/* <Button
+            variant="ghost"
+            size="icon"
+           onClick={toggleDarkMode}
+  className="text-white"
+>
+  {isDark ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
+          </Button> */}
+
           {/* Profile Dropdown */}
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
@@ -269,10 +306,20 @@ export default function GameNavbar() {
                   </Link>
                 </DropdownMenuItem>
               </DropdownMenuGroup>
+              {referralCode && (
+    <>
+      <DropdownMenuSeparator className="bg-white/10" />
+      <DropdownMenuItem className="cursor-default select-text" disabled>
+        <span className="font-mono text-sm">Referral: {referralCode}</span>
+      </DropdownMenuItem>
+    </>
+  )}
               <DropdownMenuSeparator className="bg-white/10" />
               <DropdownMenuItem className="hover:bg-white/10 focus:bg-white/10 cursor-pointer text-red-400">
-                <LogOut className="mr-2 h-4 w-4" />
-                <span>Log out</span>
+                <Button onClick={signOut}>
+                  <LogOut className="mr-2 h-4 w-4" />
+                  <span>Log out</span>
+                </Button>
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
@@ -313,7 +360,7 @@ export default function GameNavbar() {
         <div className="p-4 space-y-6">
           {/* Alerts Section */}
           <div className="space-y-2">
-            <AlertBar />
+            <ResponsiveAlerts />
           </div>
 
           {/* Milestones Section */}
@@ -323,7 +370,7 @@ export default function GameNavbar() {
               Weekly Milestones
             </h3>
             {milestones.length > 0 &&
-              milestones[currentWeekIndex]?.data.slice(0, 2).map((milestone: any, index: number) => (
+              milestones[currentWeekIndex]?.data.slice(0, 3).map((milestone: any, index: number) => (
                 <div key={index} className="bg-[#1e293b] rounded-lg p-3 border border-[#581c87]">
                   <div className="flex justify-between items-center">
                     <p className="text-white truncate">{milestone.name}</p>
@@ -333,9 +380,9 @@ export default function GameNavbar() {
                   </div>
                 </div>
               ))}
-            <Button variant="link" className="text-[#67e8f9] p-0 h-auto">
+            {/* <Button variant="link" className="text-[#67e8f9] p-0 h-auto" onClick={() => router.push('/scenes/milestones')}>
               View All Milestones
-            </Button>
+            </Button> */}
           </div>
 
           {/* Technology Section */}
@@ -347,6 +394,11 @@ export default function GameNavbar() {
 
       {/* Footer */}
       <div className="p-4 border-t border-white/10 space-y-2">
+      <div className="justify-start p-4">
+    {referralCode && (
+      <p className="text-sm font-mono text-white select-text">Referral: {referralCode}</p>
+    )}
+  </div>
         <Button className="w-full justify-start" variant="ghost">
           <User className="mr-2 h-5 w-5" />
           Profile
diff --git a/components/Missions/completed.tsx b/components/Missions/completed.tsx
new file mode 100644
index 000000000..99be10506
--- /dev/null
+++ b/components/Missions/completed.tsx
@@ -0,0 +1,37 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { Award } from "lucide-react"
+import { Bolt } from "./ui-elements"
+
+interface CompleteStepProps {
+  confirmationMessage: string
+}
+
+export const CompleteStep = ({ confirmationMessage }: CompleteStepProps) => {
+  return (
+    <motion.div
+      key="complete"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      className="min-h-[80vh] flex items-center justify-center text-center"
+    >
+      <div className="space-y-8">
+        <div className="w-24 h-24 bg-green-600 rounded-full flex items-center justify-center mx-auto relative">
+          <Award className="w-12 h-12 text-white" />
+          {/* Decorative bolts */}
+          <Bolt className="absolute top-2 left-2" />
+          <Bolt className="absolute top-2 right-2" />
+          <Bolt className="absolute bottom-2 left-2" />
+          <Bolt className="absolute bottom-2 right-2" />
+        </div>
+        <div>
+          <h1 className="text-3xl md:text-4xl font-bold text-foreground mb-4">Mission Confirmed!</h1>
+          <p className="text-xl text-muted-foreground mb-2">{confirmationMessage}</p>
+          <p className="text-muted-foreground">Your research station is ready. Welcome to the team!</p>
+          <p className="text-sm text-muted-foreground mt-4">Refreshing page in 3 seconds...</p>
+        </div>
+      </div>
+    </motion.div>
+  )
+};
\ No newline at end of file
diff --git a/components/Missions/confirmation.tsx b/components/Missions/confirmation.tsx
new file mode 100644
index 000000000..aa61edc29
--- /dev/null
+++ b/components/Missions/confirmation.tsx
@@ -0,0 +1,137 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { ChevronLeft, ChevronRight, Power, AlertCircle } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import type { Structure, Mission } from "./types"
+import { Card, CardContent, Bolt, StatusIndicator } from "./ui-elements"
+import { renderDifficultyStars } from "./helpers"
+
+interface ConfirmationStepProps {
+  selectedMission: Mission
+  selectedStructure: Structure
+  isLoading: boolean
+  onConfirm: () => void
+  onBack: () => void
+}
+
+export const ConfirmationStep = ({
+  selectedMission,
+  selectedStructure,
+  isLoading,
+  onConfirm,
+  onBack,
+}: ConfirmationStepProps) => {
+  return (
+    <motion.div
+      key="confirmation"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      className="min-h-[80vh] flex items-center justify-center"
+    >
+      <div className="w-full max-w-3xl mx-auto text-center space-y-8">
+        <Button variant="ghost" onClick={onBack} className="mb-8">
+          <ChevronLeft className="w-4 h-4 mr-2" />
+          Back to Missions
+        </Button>
+
+        <Card className="p-6 md:p-12 border-2 border-primary/20 bg-card/80 backdrop-blur-sm relative">
+          {/* Decorative bolts */}
+          <Bolt className="absolute top-3 left-3" />
+          <Bolt className="absolute top-3 right-3" />
+          <Bolt className="absolute bottom-3 left-3" />
+          <Bolt className="absolute bottom-3 right-3" />
+
+          {/* Status bar */}
+          <div className="absolute top-0 left-0 right-0 bg-black/10 backdrop-blur-sm p-2 flex justify-between items-center text-xs border-b border-white/10">
+            <StatusIndicator />
+            <span className="text-muted-foreground">MISSION-CONF-{Math.floor(Math.random() * 10000)}</span>
+          </div>
+
+          <CardContent className="pt-8">
+            <h2 className="text-2xl md:text-3xl font-bold text-foreground mb-8">Confirm Your Selection</h2>
+
+            <div className="space-y-6">
+              <div className="flex flex-col md:flex-row items-center justify-center md:space-x-6 space-y-4 md:space-y-0">
+                <div className="flex flex-col items-center">
+                  <div
+                    className={`w-20 h-20 bg-primary/10 rounded-full flex items-center justify-center border-2 border-primary/20 relative`}
+                  >
+                    <selectedStructure.icon className={`w-10 h-10 ${selectedStructure.iconColor}`} />
+                    {/* Power indicator */}
+                    <div className="absolute -top-1 -right-1 w-5 h-5 bg-card rounded-full flex items-center justify-center border border-border">
+                      <Power className="w-3 h-3 text-primary" />
+                    </div>
+                  </div>
+                  <span className="text-sm mt-2">{selectedStructure.name}</span>
+                </div>
+
+                <ChevronRight className="w-6 h-6 text-muted-foreground transform md:rotate-0 rotate-90" />
+
+                <div className="flex flex-col items-center">
+                  <div className="w-20 h-20 bg-muted rounded-full flex items-center justify-center relative">
+                    <selectedMission.icon className="w-10 h-10 text-muted-foreground" />
+                    {/* Status indicator */}
+                    <div className="absolute -top-1 -right-1 w-5 h-5 bg-card rounded-full flex items-center justify-center border border-border">
+                      <AlertCircle className="w-3 h-3 text-yellow-500" />
+                    </div>
+                  </div>
+                  <span className="text-sm mt-2">{selectedMission.name}</span>
+                </div>
+              </div>
+
+              <div className="bg-black/5 rounded-md p-4 border border-white/10 text-left">
+                <h3 className="text-xl font-semibold text-foreground mb-2">{selectedMission.name}</h3>
+                <p className="text-muted-foreground mb-4">{selectedMission.description}</p>
+
+                <div className="grid grid-cols-2 gap-4 text-sm">
+                  <div>
+                    <p className="text-xs text-muted-foreground mb-1">Research Station</p>
+                    <p className="font-medium text-foreground">{selectedStructure.name}</p>
+                  </div>
+                  <div>
+                    <p className="text-xs text-muted-foreground mb-1">Estimated Time</p>
+                    <p className="font-medium text-foreground">{selectedMission.estimatedTime}</p>
+                  </div>
+                  <div>
+                    <p className="text-xs text-muted-foreground mb-1">Difficulty</p>
+                    <div>{renderDifficultyStars(selectedMission.difficulty)}</div>
+                  </div>
+                  <div>
+                    <p className="text-xs text-muted-foreground mb-1">Status</p>
+                    <p className="font-medium text-foreground capitalize">{selectedMission.status}</p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex flex-col md:flex-row justify-center gap-4">
+                <Button
+                  variant="outline"
+                  onClick={onBack}
+                  className="border-primary/20 text-muted-foreground hover:bg-primary/5"
+                >
+                  Cancel
+                </Button>
+                <Button
+                  onClick={onConfirm}
+                  disabled={isLoading}
+                  className="bg-primary hover:bg-primary/90 text-primary-foreground px-8 py-3 text-lg font-medium"
+                >
+                  {isLoading ? (
+                    <div className="w-5 h-5 border-2 border-primary-foreground border-t-transparent rounded-full animate-spin" />
+                  ) : (
+                    <>
+                      Begin Mission
+                      <ChevronRight className="w-5 h-5 ml-2" />
+                    </>
+                  )}
+                </Button>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </motion.div>
+  )
+};
\ No newline at end of file
diff --git a/components/Missions/helpers.tsx b/components/Missions/helpers.tsx
new file mode 100644
index 000000000..10ac16b8f
--- /dev/null
+++ b/components/Missions/helpers.tsx
@@ -0,0 +1,51 @@
+import { Star } from "./ui-elements"
+
+export const getDifficultyColor = (difficulty: string) => {
+  switch (difficulty) {
+    case "Beginner":
+      return "bg-green-100 text-green-800 border-green-200"
+    case "Intermediate":
+      return "bg-yellow-100 text-yellow-800 border-yellow-200"
+    case "Advanced":
+      return "bg-red-100 text-red-800 border-red-200"
+    default:
+      return "bg-muted text-muted-foreground border-border"
+  }
+}
+
+export const getMissionStatusColor = (status: string | undefined) => {
+  switch (status) {
+    case "active":
+      return "bg-green-100 text-green-800 border-green-200"
+    case "maintenance":
+      return "bg-yellow-100 text-yellow-800 border-yellow-200"
+    case "offline":
+      return "bg-red-100 text-red-800 border-red-200"
+    default:
+      return "bg-muted text-muted-foreground border-border"
+  }
+}
+
+export const getStructureStatusColor = (status: string | undefined) => {
+  switch (status) {
+    case "operational":
+      return "bg-green-100 text-green-800 border-green-200"
+    case "limited":
+      return "bg-yellow-100 text-yellow-800 border-yellow-200"
+    case "offline":
+      return "bg-red-100 text-red-800 border-red-200"
+    default:
+      return "bg-muted text-muted-foreground border-border"
+  }
+}
+
+export const renderDifficultyStars = (difficulty: number | undefined) => {
+  if (!difficulty) return null
+  return (
+    <div className="flex items-center">
+      {[...Array(5)].map((_, i) => (
+        <Star key={i} className={`w-3 h-3 ${i < difficulty ? "text-yellow-500 fill-yellow-500" : "text-gray-300"}`} />
+      ))}
+    </div>
+  )
+};
\ No newline at end of file
diff --git a/components/Missions/intro-step.tsx b/components/Missions/intro-step.tsx
new file mode 100644
index 000000000..1748789c1
--- /dev/null
+++ b/components/Missions/intro-step.tsx
@@ -0,0 +1,34 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { Sparkles } from "lucide-react"
+import { Bolt } from "./ui-elements"
+
+export const IntroStep = () => {
+  return (
+    <motion.div
+      key="intro"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      className="min-h-[80vh] flex items-center justify-center text-center"
+    >
+      <div className="space-y-8">
+        <div className="w-24 h-24 bg-primary rounded-full flex items-center justify-center mx-auto relative">
+          <Sparkles className="w-12 h-12 text-primary-foreground" />
+          {/* Decorative bolts */}
+          <Bolt className="absolute top-2 left-2" />
+          <Bolt className="absolute top-2 right-2" />
+          <Bolt className="absolute bottom-2 left-2" />
+          <Bolt className="absolute bottom-2 right-2" />
+        </div>
+        <div>
+          <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-4">Choose Your Research Path</h1>
+          <p className="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto">
+            Select your specialization and begin your scientific journey
+          </p>
+        </div>
+      </div>
+    </motion.div>
+  )
+};
\ No newline at end of file
diff --git a/components/Missions/mission-selector.tsx b/components/Missions/mission-selector.tsx
index 9bef3fbf5..a52dee4b0 100644
--- a/components/Missions/mission-selector.tsx
+++ b/components/Missions/mission-selector.tsx
@@ -1,223 +1,98 @@
-'use client'
-
-import { useState, useEffect } from 'react'
-import { motion, AnimatePresence } from 'framer-motion'
-import { ChevronRight, ChevronLeft, CloudSun, Rocket, Leaf, LucideIcon } from 'lucide-react'
-import { zoodexDataSources, telescopeDataSources, lidarDataSources } from "@/components/Data/ZoodexDataSources";
-import { useSession, useSupabaseClient } from '@supabase/auth-helpers-react';
-import { useActivePlanet } from '@/context/ActivePlanet';
-import { Card, CardContent } from '../ui/card';
-import { Button } from '../ui/button';
-
-interface Mission {
-  name: string;
-  icon: string;
-  description: string;
-  identifier: string;
-  techId: number;
-  tutorialMission: number;
-  activeStructure: number;
-  sourceLink?: string;
-};
-
-interface Category {
-  id: number;
-  title: string;
-  description: string;
-  icon: LucideIcon;
-  details: Mission[];
-};
-
-interface Structure {
-  name: string;
-  icon: React.ElementType;
-  description: string;
-  bgColor: string;
-  accentColor: string;
-  inventoryItemId: number;
-  shape: React.ReactNode;
-};
-
-interface Project {
-  name: string;
-  description: string;
-  identifier: string;
-  sourceLink: string;
-  icon: string;           
-  techId: number;         
-  tutorialMission: number;
-  activeStructure: number;
-};
-
-const structures: Structure[] = [
-  {
-    name: 'Refracting Telescope',
-    icon: Rocket,
-    description: 'Browse & classify space-based observations & classifications', 
-    bgColor: 'bg-indigo-900',
-    accentColor: 'text-purple-400',
-    shape: <div className="absolute top-0 right-0 w-32 h-32 bg-purple-800 rounded-full -mr-16 -mt-16 opacity-20"></div>,
-    inventoryItemId: 3103,
-  },
-  {
-    name: 'Biodome',
-    icon: Leaf,
-    description: 'For xenobiologists studying alien life forms',
-    bgColor: 'bg-green-700',
-    accentColor: 'text-green-300',
-    shape: <div className="absolute bottom-0 left-0 w-40 h-40 bg-green-600 rounded-tr-full -ml-20 -mb-20 opacity-20"></div>,
-    inventoryItemId: 3104,
-  },
-  {
-    name: 'Atmospheric Probe', 
-    icon: CloudSun,
-    description: 'For climatologists analyzing extraterrestrial atmospheres',
-    bgColor: 'bg-blue-600',
-    accentColor: 'text-blue-200',
-    shape: <div className="absolute top-0 left-0 w-48 h-24 bg-blue-500 rounded-br-full -ml-24 -mt-12 opacity-20"></div>,
-    inventoryItemId: 3105,
-  },
-];
-
-const projects: Record<string, Project[]> = {
-  'Refracting Telescope': [
-    {
-      name: 'Planet Hunting', description: 'Discover real planets in our galactic community', identifier: 'telescope-tess', sourceLink: 'https://www.zooniverse.org/projects/mschwamb/planet-hunters-ngts',
-      icon: '',
-      techId: 3103,
-      tutorialMission: 3000001,
-      activeStructure: 3103,
-    },
-    {
-      name: 'Asteroid Detection', description: "Discover new asteroids everyday in your telescope's data", identifier: 'telescope-minorPlanet', sourceLink: 'https://www.zooniverse.org/projects/fulsdavid/the-daily-minor-planet',
-      icon: '',
-      techId: 3103,
-      tutorialMission: 20000004,
-      activeStructure: 3103,
-    },
-    {
-      name: 'Sunspot observations', description: "Help diagnose our sun's health problems and behaviour", identifier: 'telescope-sunspots', sourceLink: 'https://www.zooniverse.org/projects/teolixx/sunspot-detectives',
-      icon: '',
-      techId: 3103,
-      tutorialMission: 3000002,
-      activeStructure: 3103,
-    }
-  ],
-  'Biodome': [
-    {
-      name: 'Wildwatch Burrowing Owls', description: 'Document and understand the developmental milestones of Otey Mesa burrowing owls through your observation satellites', identifier: 'zoodex-burrowingOwl', sourceLink: 'zooniverse.org/projects/sandiegozooglobal/wildwatch-burrowing-owl/',
-      icon: '',
-      techId: 3104,
-      tutorialMission: 3000004,
-      activeStructure: 3104,
-    },
-    {
-      name: 'Iguanas from Above', description: 'Help us count Galapagos Marine Iguanas from aerial photographs taken by your satellite network', identifier: 'zoodex-iguanasFromAbove', sourceLink: 'https://www.zooniverse.org/projects/andreavarela89/iguanas-from-above',
-      icon: '',
-      techId: 3104,
-      tutorialMission: 3000004,
-      activeStructure: 3104,
-    },
-  ],
-  'Atmospheric Probe': [
-    {
-      name: 'Martian Cloud Survey', description: 'Model cloud behaviour on Mars (and similar exoplanet candidates)', identifier: 'lidar-martianClouds', sourceLink: 'https://www.zooniverse.org/projects/marek-slipski/cloudspotting-on-mars',
-      icon: '',
-      techId: 3105,
-      tutorialMission: 3000010,
-      activeStructure: 3105,
-    },
-    {
-      name: 'Vortex Hunter', description: 'Identify and manipulate features & fluid dynamics in gaseous planets like Jupiter', identifier: 'lidar-jovianVortexHunter', sourceLink: 'zooniverse.org/projects/ramanakumars/jovian-vortex-hunter/',
-      icon: '',
-      techId: 3105,
-      tutorialMission: 20000007,
-      activeStructure: 3105,
-    },
-  ],
-};
-
-const combineCategories = (): Category[] => {
-  return [
-    {
-      id: 1,
-      title: "Biological Projects",
-      description: "Explore biological research projects related to animals and biodiversity.",
-      icon: Leaf,
-      details: zoodexDataSources.flatMap(source =>
-        source.items.map(item => ({
-          name: item.name,
-          techId: item.techId,
-          icon: '🐾', 
-          description: item.description,
-          identifier: item.identifier,
-          tutorialMission: item.tutorialMission,
-          activeStructure: item.activeStructure
-        }))
-      ),
-    },
-    {
-      id: 2,
-      title: "Space Investigations",
-      description: "Dive into astronomical research focused on planets, stars, and cosmic phenomena.",
-      icon: Rocket,
-      details: telescopeDataSources.flatMap(source =>
-        source.items.filter(item => item.techId === 1).map(item => ({
-          name: item.name,
-          icon: '🚀', // Example icon
-          description: item.description,
-          techId: item.techId,
-          identifier: item.identifier,
-          tutorialMission: item.tutorialMission,
-          activeStructure: item.activeStructure
-        }))
-      ),
-    },
-    {
-      id: 3,
-      title: "Meteorological Studies",
-      description: "Study weather patterns and cloud formations on various planets.",
-      icon: CloudSun,
-      details: lidarDataSources.flatMap(source =>
-        source.items.filter(item => item.techId === 5).map(item => ({
-          name: item.name,
-          techId: item.techId,
-          icon: '🌦️',
-          description: item.description,
-          identifier: item.identifier,
-          tutorialMission: item.tutorialMission,
-          activeStructure: item.activeStructure
-        }))
-      ), 
-    },
-  ];
-};
+"use client"
+
+import { useState, useEffect } from "react"
+import { AnimatePresence } from "framer-motion"
+import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react"
+import { useActivePlanet } from "@/context/ActivePlanet"
+
+import { IntroStep } from "./intro-step"
+import { SelectionStep } from "./selection-step"
+import { MissionStep } from "./mission-step"
+import { ConfirmationStep } from "./confirmation"
+import { CompleteStep } from "./completed"
+import { structures, projects } from "./structures"
+import type { Structure, Mission } from "./types"
+
+type Step = "intro" | "referral" | "selection" | "mission" | "confirmation" | "complete"
 
 export default function MissionSelector() {
-  const { activePlanet, updatePlanetLocation } = useActivePlanet();
-  const supabase = useSupabaseClient();
-  const session = useSession();
+  const { activePlanet, updatePlanetLocation } = useActivePlanet()
+  const supabase = useSupabaseClient()
+  const session = useSession()
+
+  const [currentStep, setCurrentStep] = useState<Step>("intro")
+  const [selectedStructure, setSelectedStructure] = useState<Structure | null>(null)
+  const [selectedMission, setSelectedMission] = useState<Mission | null>(null)
+  const [confirmationMessage, setConfirmationMessage] = useState("")
+  const [isLoading, setIsLoading] = useState(false)
+
+  // New referral code state
+  const [referralCode, setReferralCode] = useState("")
+  const [referralError, setReferralError] = useState<string | null>(null)
+  const [isSubmittingReferral, setIsSubmittingReferral] = useState(false)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setCurrentStep("referral")
+    }, 1500)
+    return () => clearTimeout(timer)
+  }, [])
+
+  // Handle referral code submit
+  const handleReferralSubmit = async () => {
+    if (!session || !referralCode.trim()) {
+      setReferralError("Please enter a valid referral code or skip.")
+      return
+    }
 
-  const [selectedStructure, setSelectedStructure] = useState<Structure | null>(null);
-  const [selectedMission, setSelectedMission] = useState<Mission | null>(null);
-  const [confirmationMessage, setConfirmationMessage] = useState('');
+    setIsSubmittingReferral(true)
+    setReferralError(null)
+
+    try {
+      const { error } = await supabase.from("referrals").insert({
+        referree_id: session.user.id,
+        referral_code: referralCode.trim(),
+      })
+
+      if (error) {
+        setReferralError("Failed to submit referral code. Please try again.")
+        setIsSubmittingReferral(false)
+        return
+      }
+
+      // Success, move to selection step
+      setCurrentStep("selection")
+    } catch (e) {
+      setReferralError("An unexpected error occurred.")
+      setIsSubmittingReferral(false)
+    }
+  }
+
+  // Skip referral step
+  const handleReferralSkip = () => {
+    setReferralCode("")
+    setReferralError(null)
+    setCurrentStep("selection")
+  }
 
   const handleStructureClick = (structure: Structure) => {
-    setSelectedStructure(structure);
-    setSelectedMission(null);
-    setConfirmationMessage('');
-  };
+    setSelectedStructure(structure)
+    setSelectedMission(null)
+    setConfirmationMessage("")
+    setCurrentStep("mission")
+  }
 
   const handleMissionClick = (mission: Mission) => {
-    setSelectedMission(mission);
-    setConfirmationMessage('');
-  };
+    setSelectedMission(mission)
+    setConfirmationMessage("")
+    setCurrentStep("confirmation")
+  }
 
   const insertAdditionalStarterItems = async (chosenId: number) => {
-    if (!session) return;
+    if (!session) return
 
-    const starterItemIds = [3105, 3104, 3103];
-    const otherItemIds = starterItemIds.filter((id) => id !== chosenId);
+    const starterItemIds = [3105, 3104, 3103, 3107]
+    const otherItemIds = starterItemIds.filter((id) => id !== chosenId)
 
     const additionalInserts = otherItemIds.map((itemId) => ({
       owner: session.user.id,
@@ -226,88 +101,144 @@ export default function MissionSelector() {
       quantity: 1,
       notes: "Starter item added alongside mission item",
       configuration: { Uses: 10, "missions unlocked": [] },
-    }));
+    }))
 
-    const { error } = await supabase.from("inventory").insert(additionalInserts);
+    const { error } = await supabase.from("inventory").insert(additionalInserts)
 
     if (error) {
-      console.error("Failed to insert additional items:", error.message);
-    };
-  };
-
-const handleConfirmMission = async () => {
-  if (!session || !selectedMission) return;
-
-  const chosenItemId = selectedMission.activeStructure;
-
-  const structureCreationData = {
-    owner: session.user.id,
-    item: chosenItemId,
-    anomaly: activePlanet?.id || 30,
-    quantity: 1,
-    notes: "Created for user's first classification mission",
-    configuration: {
-      Uses: 10,
-      "missions unlocked": [selectedMission.identifier],
-    },
-  };
-
-  try {
-    updatePlanetLocation(30);
-
-    await supabase.from("inventory").insert([structureCreationData]);
-
-    // 🔽 Insert the other two items
-    await insertAdditionalStarterItems(chosenItemId);
-
-    setConfirmationMessage(`Mission "${selectedMission.name}" confirmed!`);
-  } catch (error: any) {
-    setConfirmationMessage(`Error: ${error.message}`);
+      console.error("Failed to insert additional items:", error.message)
+    }
   }
-};
 
-  return (
-    <div className="p-6 space-y-6">
-      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
-        {structures.map((structure) => (
-          <Card key={structure.name} onClick={() => handleStructureClick(structure)} className={`cursor-pointer relative ${structure.bgColor}`}>
-            <CardContent className="p-4 text-white">
-              {structure.shape}
-              <structure.icon className={`w-8 h-8 ${structure.accentColor}`} />
-              <h3 className="text-lg font-semibold mt-2">{structure.name}</h3>
-              <p className="text-sm opacity-80">{structure.description}</p>
-            </CardContent>
-          </Card>
-        ))}
-      </div>
+  const handleConfirmMission = async () => {
+    if (!session || !selectedMission) return
 
-      {selectedStructure && (
-        <div className="border-t pt-4">
-          <h2 className="text-xl font-bold mb-2">Missions for {selectedStructure.name}</h2>
-          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
-            {projects[selectedStructure.name]?.map((mission) => (
-              <Card key={mission.identifier} onClick={() => handleMissionClick(mission)} className="cursor-pointer">
-                <CardContent className="p-4">
-                  <h4 className="text-md font-medium">{mission.name}</h4>
-                  <p className="text-sm">{mission.description}</p>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        </div>
-      )}
+    setIsLoading(true)
+    const chosenItemId = selectedMission.activeStructure
 
-      {selectedMission && (
-        <div className="border-t pt-4">
-          <h3 className="text-lg font-semibold mb-2">Confirm Mission</h3>
-          <p className="mb-2">{selectedMission.name}: {selectedMission.description}</p>
-          <Button onClick={handleConfirmMission}>Confirm & Begin</Button>
-        </div>
-      )}
+    const structureCreationData = {
+      owner: session.user.id,
+      item: chosenItemId,
+      anomaly: activePlanet?.id || 30,
+      quantity: 1,
+      notes: "Created for user's first classification mission",
+      configuration: {
+        Uses: 10,
+        "missions unlocked": [selectedMission.identifier],
+      },
+    }
+
+    try {
+      updatePlanetLocation(30)
+
+      await supabase.from("inventory").insert([structureCreationData])
+      await insertAdditionalStarterItems(chosenItemId)
+
+      setConfirmationMessage(`Mission "${selectedMission.name}" confirmed!`)
+      setCurrentStep("complete")
+
+      setTimeout(() => {
+        window.location.reload()
+      }, 3000)
+    } catch (error: any) {
+      setConfirmationMessage(`Error: ${error.message}`)
+    } finally {
+      setIsLoading(false)
+    }
+  }
 
-      {confirmationMessage && (
-        <div className="text-green-500 mt-4 font-medium">{confirmationMessage}</div>
+  const handleBack = () => {
+    if (currentStep === "mission") {
+      setCurrentStep("selection")
+      setSelectedStructure(null)
+    } else if (currentStep === "confirmation") {
+      setCurrentStep("mission")
+      setSelectedMission(null)
+    }
+  }
+
+  // Referral step UI
+  const ReferralStep = () => (
+    <div className="max-w-md mx-auto p-6 bg-[#2E3440] rounded-md border border-[#5E81AC] shadow-md">
+      <h2 className="text-xl font-bold text-[#81A1C1] mb-4">Referral Code</h2>
+      <p className="text-[#D8DEE9] mb-4">
+        If you have a referral code, please enter it below. Otherwise, you can skip this step.
+      </p>
+      <input
+        type="text"
+        value={referralCode}
+        onChange={(e) => setReferralCode(e.target.value)}
+        placeholder="Enter referral code"
+        className="w-full mb-2 px-3 py-2 rounded border border-[#81A1C1] bg-[#3B4252] text-[#ECEFF4] focus:outline-none focus:ring-2 focus:ring-[#88C0D0]"
+        disabled={isSubmittingReferral}
+      />
+      {referralError && (
+        <p className="text-red-400 mb-2">{referralError}</p>
       )}
+      <div className="flex justify-between">
+        <button
+          onClick={handleReferralSkip}
+          disabled={isSubmittingReferral}
+          className="px-4 py-2 rounded bg-transparent border border-[#81A1C1] text-[#81A1C1] hover:bg-[#81A1C1] hover:text-[#2E3440] transition"
+        >
+          Skip
+        </button>
+        <button
+          onClick={handleReferralSubmit}
+          disabled={isSubmittingReferral}
+          className="px-4 py-2 rounded bg-[#81A1C1] text-[#2E3440] hover:bg-[#88C0D0] transition"
+        >
+          {isSubmittingReferral ? "Submitting..." : "Submit"}
+        </button>
+      </div>
+    </div>
+  )
+
+  return (
+    <div className="min-h-screen relative">
+      {/* Subtle background elements */}
+      <div className="squiggly-shape sci-fi-shape-1 bg-primary/5"></div>
+      <div className="squiggly-shape sci-fi-shape-2 bg-accent/5"></div>
+      <div className="squiggly-shape sci-fi-shape-3 bg-secondary/5"></div>
+
+      <div className="container mx-auto px-4 py-8 max-w-7xl relative">
+        <AnimatePresence mode="wait">
+          {/* Intro Step */}
+          {currentStep === "intro" && <IntroStep />}
+
+          {/* Referral Step */}
+          {currentStep === "referral" && <ReferralStep />}
+
+          {/* Selection Step */}
+          {currentStep === "selection" && (
+            <SelectionStep structures={structures} onStructureClick={handleStructureClick} />
+          )}
+
+          {/* Mission Selection Step */}
+          {currentStep === "mission" && selectedStructure && (
+            <MissionStep
+              selectedStructure={selectedStructure}
+              projects={projects}
+              onMissionClick={handleMissionClick}
+              onBack={handleBack}
+            />
+          )}
+
+          {/* Confirmation Step */}
+          {currentStep === "confirmation" && selectedMission && selectedStructure && (
+            <ConfirmationStep
+              selectedMission={selectedMission}
+              selectedStructure={selectedStructure}
+              isLoading={isLoading}
+              onConfirm={handleConfirmMission}
+              onBack={handleBack}
+            />
+          )}
+
+          {/* Complete Step */}
+          {currentStep === "complete" && <CompleteStep confirmationMessage={confirmationMessage} />}
+        </AnimatePresence>
+      </div>
     </div>
-  );
+  )
 };
\ No newline at end of file
diff --git a/components/Missions/mission-step.tsx b/components/Missions/mission-step.tsx
new file mode 100644
index 000000000..b2e06d64a
--- /dev/null
+++ b/components/Missions/mission-step.tsx
@@ -0,0 +1,101 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { ChevronLeft, Power, Cpu } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import type { Structure, Project } from "./types"
+import { Card, CardContent, Bolt, Clock } from "./ui-elements"
+import { getMissionStatusColor, renderDifficultyStars } from "./helpers"
+
+interface MissionStepProps {
+  selectedStructure: Structure
+  projects: Record<string, Project[]>
+  onMissionClick: (mission: Project) => void
+  onBack: () => void
+};
+
+export const MissionStep = ({ selectedStructure, projects, onMissionClick, onBack }: MissionStepProps) => {
+  return (
+    <motion.div
+      key="mission"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      className="space-y-8"
+    >
+      <div className="flex flex-col md:flex-row items-center justify-between gap-4">
+        <Button variant="ghost" onClick={onBack} className="flex items-center">
+          <ChevronLeft className="w-4 h-4 mr-2" />
+          Back to Stations
+        </Button>
+        <div className="text-center flex-1">
+          <h2 className="text-2xl md:text-3xl font-bold text-foreground">{selectedStructure.name}</h2>
+          <p className="text-muted-foreground">Available Missions</p>
+        </div>
+        <div className="w-24 hidden md:block"></div>
+      </div>
+
+      <div className="squiggly-divider"></div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 md:gap-8">
+        {projects[selectedStructure.name]?.map((mission, index) => (
+          <motion.div
+            key={mission.identifier}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: index * 0.1 }}
+            whileHover={{ scale: 1.02 }}
+            whileTap={{ scale: 0.98 }}
+            onClick={() => onMissionClick(mission)}
+            className="cursor-pointer"
+          >
+            <Card className="border-2 hover:border-primary/50 transition-all h-auto md:h-64 bg-card/50 backdrop-blur-sm relative">
+              {/* Decorative bolts */}
+              <Bolt className="absolute top-3 left-3" />
+              <Bolt className="absolute top-3 right-3" />
+              <Bolt className="absolute bottom-3 left-3" />
+              <Bolt className="absolute bottom-3 right-3" />
+
+              {/* Status indicator */}
+              <div className="absolute top-0 right-0 m-2">
+                <span
+                  className={`inline-block px-2 py-0.5 rounded-full text-xs font-medium border ${getMissionStatusColor(mission.status)}`}
+                >
+                  {mission.status}
+                </span>
+              </div>
+
+              <CardContent className="p-6 md:p-8 h-full flex flex-col md:flex-row">
+                <div className="w-16 h-16 bg-muted rounded-lg flex items-center justify-center mb-4 md:mb-0 md:mr-6 flex-shrink-0 relative">
+                  <mission.icon className="w-8 h-8 text-muted-foreground" />
+                  {/* Power indicator */}
+                  <div className="absolute -top-1 -right-1 w-4 h-4 bg-card rounded-full flex items-center justify-center border border-border">
+                    <Power className="w-2 h-2 text-primary" />
+                  </div>
+                </div>
+                <div className="flex-1">
+                  <div className="flex flex-wrap items-start justify-between mb-2">
+                    <h4 className="text-xl font-semibold text-foreground">{mission.name}</h4>
+                    {renderDifficultyStars(mission.difficulty)}
+                  </div>
+                  <p className="text-muted-foreground text-sm leading-relaxed mb-4">{mission.description}</p>
+
+                  <div className="flex flex-wrap gap-4 text-xs text-muted-foreground mt-auto">
+                    <div className="flex items-center">
+                      <Cpu className="w-3 h-3 mr-1" />
+                      <span>ID: {mission.identifier.substring(0, 8)}</span>
+                    </div>
+                    <div className="flex items-center">
+                      <Clock className="w-3 h-3 mr-1" />
+                      <span>Est. time: {mission.estimatedTime}</span>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </motion.div>
+        ))}
+      </div>
+    </motion.div>
+  );
+};
\ No newline at end of file
diff --git a/components/Missions/selection-step.tsx b/components/Missions/selection-step.tsx
new file mode 100644
index 000000000..2ad9ecc04
--- /dev/null
+++ b/components/Missions/selection-step.tsx
@@ -0,0 +1,140 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { ChevronRight, Power, Wifi, Database, Settings, BarChart3, Layers, RefreshCw } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import type { Structure } from "./types"
+import { Card, CardContent, Bolt, StatusIndicator, DeviceButton } from "./ui-elements";
+import { getDifficultyColor, getStructureStatusColor } from "./helpers"
+
+interface SelectionStepProps {
+  structures: Structure[]
+  onStructureClick: (structure: Structure) => void
+}
+
+export const SelectionStep = ({ structures, onStructureClick }: SelectionStepProps) => {
+  return (
+    <motion.div
+      key="selection"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }} 
+      exit={{ opacity: 0 }}
+      className="space-y-8"
+    >
+      <div className="text-center">
+        <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">Research Stations</h2>
+        <p className="text-lg text-muted-foreground">Choose your primary research facility</p>
+      </div>
+
+      <div className="squiggly-divider"></div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
+        {structures.map((structure, index) => (
+          <motion.div
+            key={structure.name}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: index * 0.1 }}
+            whileHover={{ scale: 1.02 }}
+            whileTap={{ scale: 0.98 }}
+            onClick={() => onStructureClick(structure)}
+            className="cursor-pointer"
+          >
+            <Card
+              className={`border-2 hover:border-primary/50 transition-all h-[28rem] md:h-[32rem] bg-gradient-to-br ${structure.bgGradient} relative overflow-hidden`}
+            >
+              {/* Decorative bolts */}
+              <Bolt className="absolute top-3 left-3" />
+              <Bolt className="absolute top-3 right-3" />
+              <Bolt className="absolute bottom-3 left-3" />
+              <Bolt className="absolute bottom-3 right-3" />
+
+              {/* Status bar */}
+              <div className="absolute top-0 left-0 right-0 bg-black/10 backdrop-blur-sm p-2 flex justify-between items-center text-xs border-b border-white/10">
+                <StatusIndicator active={structure.status === "operational"} />
+                <span className="text-muted-foreground">{structure.systemVersion}</span>
+              </div>
+
+              <CardContent className="p-6 md:p-8 h-full flex flex-col relative z-10 pt-12">
+                <div className="text-center mb-6">
+                  <div
+                    className={`w-20 h-20 ${structure.iconColor.replace("text-", "bg-").replace("-600", "-600/20")} rounded-full flex items-center justify-center mx-auto mb-4 border-2 border-primary/20 relative`}
+                  >
+                    <structure.icon className={`w-10 h-10 ${structure.iconColor}`} />
+                    {/* Power indicator */}
+                    <div className="absolute -top-1 -right-1 w-5 h-5 bg-card rounded-full flex items-center justify-center border border-border">
+                      <Power className="w-3 h-3 text-primary" />
+                    </div>
+                  </div>
+                  <h3 className={`text-2xl font-bold text-foreground mb-2`}>{structure.name}</h3>
+                  <div className="flex flex-wrap justify-center gap-2 mb-3">
+                    <span
+                      className={`inline-block px-3 py-1 rounded-full text-xs font-medium border ${getDifficultyColor(structure.difficulty)}`}
+                    >
+                      {structure.difficulty}
+                    </span>
+                    <span
+                      className={`inline-block px-3 py-1 rounded-full text-xs font-medium border ${getStructureStatusColor(structure.status)}`}
+                    >
+                      {structure.status}
+                    </span>
+                  </div>
+                </div>
+
+                <div className="flex-1 space-y-4">
+                  <p className="text-muted-foreground text-center">{structure.description}</p>
+
+                  {/* System status display */}
+                  <div className="bg-black/5 rounded-md p-3 border border-white/10">
+                    <div className="text-xs text-muted-foreground mb-1">System Status</div>
+                    <div className="flex justify-between items-center mb-1">
+                      <span className="text-xs">Power</span>
+                      <span className="text-xs font-medium">{structure.powerLevel}%</span>
+                    </div>
+                    <div className="w-full bg-muted rounded-full h-1.5 mb-3">
+                      <div
+                        className="bg-primary h-1.5 rounded-full"
+                        style={{ width: `${structure.powerLevel}%` }}
+                      ></div>
+                    </div>
+                    <div className="flex justify-between text-xs text-muted-foreground">
+                      <div className="flex items-center">
+                        <Wifi className="w-3 h-3 mr-1" />
+                        <span>Connected</span>
+                      </div>
+                      <div className="flex items-center">
+                        <Database className="w-3 h-3 mr-1" />
+                        <span>Storage: 64%</span>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="text-center">
+                    <span className={`text-sm font-semibold ${structure.iconColor}`}>{structure.specialty}</span>
+                  </div>
+                </div>
+
+                {/* Control buttons */}
+                <div className="grid grid-cols-4 gap-2 mt-4 border-t border-white/10 pt-4">
+                  <DeviceButton icon={Settings} label="Config" />
+                  <DeviceButton icon={BarChart3} label="Stats" />
+                  <DeviceButton icon={Layers} label="Data" />
+                  <DeviceButton icon={RefreshCw} label="Sync" />
+                </div>
+
+                <div className="flex justify-center mt-4">
+                  <Button
+                    className={`bg-${structure.iconColor.replace("text-", "")} hover:bg-${structure.iconColor.replace("text-", "")}/90 text-white`}
+                  >
+                    Select Station
+                    <ChevronRight className="w-4 h-4 ml-2" />
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          </motion.div>
+        ))}
+      </div>
+    </motion.div>
+  );
+};
\ No newline at end of file
diff --git a/components/Missions/structures.ts b/components/Missions/structures.ts
new file mode 100644
index 000000000..273da8a76
--- /dev/null
+++ b/components/Missions/structures.ts
@@ -0,0 +1,188 @@
+import { Telescope, Leaf, CloudSun, Globe, Target, Zap, Eye, Search, Wind, Shield, DrillIcon } from "lucide-react"
+import type { Structure, Project } from "./types"
+
+export const structures: Structure[] = [
+  {
+    name: "Refracting Telescope",
+    icon: Telescope,
+    description: "Browse & classify space-based observations & classifications",
+    specialty: "Deep Space Explorer",
+    difficulty: "Beginner",
+    bgGradient: "from-blue-500/10 to-cyan-500/10",
+    iconColor: "text-blue-600",
+    inventoryItemId: 3103,
+    status: "operational",
+    powerLevel: 87,
+    systemVersion: "v3.2.1",
+  },
+  {
+    name: "Biodome",
+    icon: Leaf,
+    description: "For xenobiologists studying alien life forms",
+    specialty: "Life Sciences Specialist",
+    difficulty: "Intermediate",
+    bgGradient: "from-green-500/10 to-emerald-500/10",
+    iconColor: "text-green-600",
+    inventoryItemId: 3104,
+    status: "operational",
+    powerLevel: 92,
+    systemVersion: "v2.8.5",
+  },
+  {
+    name: "Atmospheric Probe",
+    icon: CloudSun,
+    description: "For climatologists analyzing extraterrestrial atmospheres",
+    specialty: "Climate Researcher",
+    difficulty: "Advanced",
+    bgGradient: "from-purple-500/10 to-primary/10",
+    iconColor: "text-primary",
+    inventoryItemId: 3105,
+    status: "limited",
+    powerLevel: 64,
+    systemVersion: "v4.0.2",
+  },
+  {
+    name: "SeisCAM",
+    icon: DrillIcon,
+    description: "For geologists exploring exoplanet surfaces and oceans",
+    specialty: "Geologists",
+    difficulty: "Beginner",
+    bgGradient: 'from-green-500 to-primary/10',
+    iconColor: 'text-blue-400',
+    inventoryItemId: 3107,
+    status: "operational",
+    powerLevel: 100,
+    systemVersion: 'v1.0.1',
+  },
+]
+
+export const projects: Record<string, Project[]> = {
+  "Refracting Telescope": [
+    {
+      name: "Planet Hunting",
+      description: "Discover real planets in our galactic community",
+      identifier: "telescope-tess",
+      sourceLink: "https://www.zooniverse.org/projects/mschwamb/planet-hunters-ngts",
+      icon: Globe,
+      techId: 3103,
+      tutorialMission: 3000001,
+      activeStructure: 3103,
+      status: "active",
+      difficulty: 2,
+      estimatedTime: "4-6 hrs",
+    },
+    {
+      name: "Asteroid Detection",
+      description: "Discover new asteroids everyday in your telescope's data",
+      identifier: "telescope-minorPlanet",
+      sourceLink: "https://www.zooniverse.org/projects/fulsdavid/the-daily-minor-planet",
+      icon: Target,
+      techId: 3103,
+      tutorialMission: 20000004,
+      activeStructure: 3103,
+      status: "active",
+      difficulty: 3,
+      estimatedTime: "2-3 hrs",
+    },
+    {
+      name: "Sunspot observations",
+      description: "Help diagnose our sun's health problems and behaviour",
+      identifier: "telescope-sunspots",
+      sourceLink: "https://www.zooniverse.org/projects/teolixx/sunspot-detectives",
+      icon: Zap,
+      techId: 3103,
+      tutorialMission: 3000002,
+      activeStructure: 3103,
+      status: "maintenance",
+      difficulty: 4,
+      estimatedTime: "5-8 hrs",
+    },
+  ],
+  "SeisCAM": [
+    {
+      name: "AI4Mars",
+      description:
+        "Label real Mars rover images to help train autonomous navigation systems and improve future Martian exploration.",
+      identifier: "seiscam-ai4mars",
+      sourceLink: "https://www.zooniverse.org/projects/hiroc/ai4mars",
+      icon: Search,
+      techId: 3107,
+      tutorialMission: 3000021,
+      activeStructure: 3107,
+      status: "active",
+      difficulty: 3,
+      estimatedTime: "4-6 hrs",
+    },
+    {
+      name: "Planet Four",
+      description:
+        "Help identify wind-driven features on Mars' south pole to better understand Martian climate patterns.",
+      identifier: "seiscam-planetFour",
+      sourceLink: "https://www.zooniverse.org/projects/mschwamb/planet-four",
+      icon: Wind,
+      techId: 3107,
+      tutorialMission: 3000022,
+      activeStructure: 3107,
+      status: "active",
+      difficulty: 2,
+      estimatedTime: "3-5 hrs",
+    },
+  ],
+  Biodome: [
+    {
+      name: "Wildwatch Burrowing Owls",
+      description:
+        "Document and understand the developmental milestones of Otey Mesa burrowing owls through your observation satellites",
+      identifier: "zoodex-burrowingOwl",
+      sourceLink: "zooniverse.org/projects/sandiegozooglobal/wildwatch-burrowing-owl/",
+      icon: Eye,
+      techId: 3104,
+      tutorialMission: 3000004,
+      activeStructure: 3104,
+      status: "active",
+      difficulty: 2,
+      estimatedTime: "3-5 hrs",
+    },
+    {
+      name: "Iguanas from Above",
+      description: "Help us count Galapagos Marine Iguanas from aerial photographs taken by your satellite network",
+      identifier: "zoodex-iguanasFromAbove",
+      sourceLink: "https://www.zooniverse.org/projects/andreavarela89/iguanas-from-above",
+      icon: Search,
+      techId: 3104,
+      tutorialMission: 3000004,
+      activeStructure: 3104,
+      status: "active",
+      difficulty: 1,
+      estimatedTime: "2-4 hrs",
+    },
+  ],
+  "Atmospheric Probe": [
+    {
+      name: "Martian Cloud Survey",
+      description: "Model cloud behaviour on Mars (and similar exoplanet candidates)",
+      identifier: "lidar-martianClouds",
+      sourceLink: "https://www.zooniverse.org/projects/marek-slipski/cloudspotting-on-mars",
+      icon: Wind,
+      techId: 3105,
+      tutorialMission: 3000010,
+      activeStructure: 3105,
+      status: "active",
+      difficulty: 3,
+      estimatedTime: "4-7 hrs",
+    },
+    {
+      name: "Vortex Hunter",
+      description: "Identify and manipulate features & fluid dynamics in gaseous planets like Jupiter",
+      identifier: "lidar-jovianVortexHunter",
+      sourceLink: "zooniverse.org/projects/ramanakumars/jovian-vortex-hunter/",
+      icon: Shield,
+      techId: 3105,
+      tutorialMission: 20000007,
+      activeStructure: 3105,
+      status: "offline",
+      difficulty: 5,
+      estimatedTime: "6-10 hrs",
+    },
+  ],
+};
\ No newline at end of file
diff --git a/components/Missions/types.ts b/components/Missions/types.ts
new file mode 100644
index 000000000..669deadb6
--- /dev/null
+++ b/components/Missions/types.ts
@@ -0,0 +1,43 @@
+import type { ElementType } from "react"
+
+export interface Mission {
+  name: string
+  icon: ElementType
+  description: string
+  identifier: string
+  techId: number
+  tutorialMission: number
+  activeStructure: number
+  sourceLink?: string
+  status?: "active" | "maintenance" | "offline"
+  difficulty?: number
+  estimatedTime?: string
+}
+
+export interface Structure {
+  name: string
+  icon: ElementType
+  description: string
+  bgGradient: string
+  iconColor: string
+  inventoryItemId: number
+  specialty: string
+  difficulty: "Beginner" | "Intermediate" | "Advanced"
+  status?: "operational" | "limited" | "offline"
+  powerLevel?: number
+  systemVersion?: string
+}
+
+export interface Project {
+  name: string
+  description: string
+  identifier: string
+  sourceLink: string
+  icon: ElementType
+  techId: number
+  tutorialMission: number
+  activeStructure: number
+  status?: "active" | "maintenance" | "offline"
+  difficulty?: number
+  estimatedTime?: string
+}
\ No newline at end of file
diff --git a/components/Missions/ui-elements.tsx b/components/Missions/ui-elements.tsx
new file mode 100644
index 000000000..4793b45ba
--- /dev/null
+++ b/components/Missions/ui-elements.tsx
@@ -0,0 +1,99 @@
+"use client";
+
+import type React from "react"
+
+import type { ElementType } from "react"
+
+// Decorative bolt component
+export const Bolt = ({ className = "" }: { className?: string }) => (
+  <div className={`w-3 h-3 rounded-full bg-secondary/70 border border-secondary/30 ${className}`}></div>
+)
+
+// Status indicator component
+export const StatusIndicator = ({ active = true, className = "" }: { active?: boolean; className?: string }) => (
+  <div className="flex items-center space-x-1">
+    <div className={`w-2 h-2 rounded-full ${active ? "bg-green-500" : "bg-red-500"} animate-pulse`}></div>
+    <span className="text-xs text-muted-foreground">{active ? "Online" : "Offline"}</span>
+  </div>
+)
+
+// Device button component
+export const DeviceButton = ({
+  icon: Icon,
+  label,
+  onClick,
+  className = "",
+}: {
+  icon: ElementType
+  label: string
+  onClick?: () => void
+  className?: string
+}) => (
+  <button
+    onClick={onClick}
+    className={`flex flex-col items-center justify-center p-2 rounded-md bg-muted/50 hover:bg-muted transition-colors ${className}`}
+  >
+    <Icon className="w-4 h-4 mb-1 text-muted-foreground" />
+    <span className="text-xs text-muted-foreground">{label}</span>
+  </button>
+)
+
+// Create our own simplified Card components
+export const Card = ({
+  children,
+  className = "",
+  onClick,
+}: {
+  children: React.ReactNode
+  className?: string
+  onClick?: () => void
+}) => (
+  <div onClick={onClick} className={`rounded-lg border bg-card shadow-sm ${className}`}>
+    {children}
+  </div>
+)
+
+export const CardContent = ({
+  children,
+  className = "",
+}: {
+  children: React.ReactNode
+  className?: string
+}) => <div className={`${className}`}>{children}</div>
+
+// Star component for difficulty ratings
+export const Star = ({ className = "" }: { className?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={className}
+  >
+    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+  </svg>
+)
+
+// Clock component
+export const Clock = ({ className = "" }: { className?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={className}
+  >
+    <circle cx="12" cy="12" r="10" />
+    <polyline points="12 6 12 12 16 14" />
+  </svg>
+);
\ No newline at end of file
diff --git a/components/Projects/(classifications)/Annotating/Annotator.tsx b/components/Projects/(classifications)/Annotating/Annotator.tsx
index e17b37139..08190e3f5 100644
--- a/components/Projects/(classifications)/Annotating/Annotator.tsx
+++ b/components/Projects/(classifications)/Annotating/Annotator.tsx
@@ -31,6 +31,8 @@ import {
   CoMCATEGORIES,
 } from '@/types/Annotation';
 import { SciFiPanel } from '@/components/ui/styles/sci-fi/panel';
+import { useActivePlanet } from '@/context/ActivePlanet';
+import { useRouter } from 'next/navigation';
 
 interface ImageAnnotatorProps {
   initialImageUrl: string;
@@ -42,23 +44,30 @@ interface ImageAnnotatorProps {
   assetMentioned?: string | string[];
   structureItemId?: number;
   parentPlanetLocation?: string;
+  classificationParent?: string;
   annotationType: 'AI4M' | 'P4' | 'PH' | 'CoM' | 'CAC' | 'JVH' | 'AA' | 'CoMS' | 'Sunspots' | 'Custom';
+  className?: string;
 };
 
 export default function ImageAnnotator({
   initialImageUrl,
   parentClassificationId,
-  anomalyType, 
+  anomalyType,
   anomalyId,
   missionNumber,
   assetMentioned,
   otherAssets,
+  classificationParent,
   parentPlanetLocation,
   structureItemId,
   annotationType,
+  className = '', // default empty
 }: ImageAnnotatorProps) {
+  const router = useRouter();
+
   const supabase = useSupabaseClient();
   const session = useSession();
+
   const [selectedImage, setSelectedImage] = useState<string | null>(initialImageUrl);
   const [isDrawing, setIsDrawing] = useState(false);
   const [currentTool, setCurrentTool] = useState<Tool>('pen');
@@ -67,7 +76,7 @@ export default function ImageAnnotator({
   const [drawings, setDrawings] = useState<DrawingObject[]>([]);
   const [currentDrawing, setCurrentDrawing] = useState<DrawingObject | null>(null);
   const [isUploading, setIsUploading] = useState(false);
-  const [uploads, setUploads] = useState<string[]>([]);
+  const [uploads, setUploads] = useState<[string, string][]>([]);
   const [annotationOptions, setAnnotationOptions] = useState<string[]>([]);
   const [isFormVisible, setIsFormVisible] = useState(false);
   const canvasRef = useRef<HTMLCanvasElement>(null);
@@ -99,17 +108,21 @@ export default function ImageAnnotator({
     const canvas = canvasRef.current;
     setIsUploading(true);
     try {
-      const blob = await new Promise<Blob | null>((resolve) => canvas.toBlob(resolve, 'image/png'));
+      const blob = await new Promise<Blob | null>((resolve) =>
+        canvas.toBlob(resolve, 'image/png')
+      );
       if (!blob) throw new Error('Failed to create Blob from canvas');
+
       const fileName = `${Date.now()}-${session.user.id}-annotated-image.png`;
       const { data, error } = await supabase.storage
         .from('media')
         .upload(fileName, blob, { contentType: 'image/png' });
+
       if (error) {
         console.error('Upload error:', error.message);
       } else if (data) {
         const url = `${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/media/${data.path}`;
-        setUploads((prev) => [...prev, url]);
+        setUploads((prev) => [...prev, [url, fileName]]);
         setIsFormVisible(true);
       }
     } catch (err) {
@@ -125,30 +138,44 @@ export default function ImageAnnotator({
     if (ctx) {
       ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
       ctx.drawImage(imageRef.current, 0, 0, canvasRef.current.width, canvasRef.current.height);
-    };
-  };    
+    }
+  };
 
   useEffect(() => {
     if (!initialImageUrl) return;
-  
+
     const img = new Image();
     img.crossOrigin = 'anonymous';
     img.onload = () => {
       imageRef.current = img;
+
+      const container = document.createElement('div');
+      container.style.position = 'absolute';
+      container.style.visibility = 'hidden';
+      container.style.width = '100%';
+      container.appendChild(img);
+      document.body.appendChild(container);
+      const { width, height } = img.getBoundingClientRect();
+      document.body.removeChild(container);
+
+      if (canvasRef.current) {
+        canvasRef.current.width = width;
+        canvasRef.current.height = height;
+        canvasRef.current.style.width = `${width}px`;
+        canvasRef.current.style.height = `${height}px`;
+      }
+
       setSelectedImage(initialImageUrl);
       renderCanvas();
     };
     img.src = initialImageUrl;
-  }, [initialImageUrl]);  
+  }, [initialImageUrl]);
 
   useEffect(() => {
     const canvas = canvasRef.current;
-    if (!canvas) {
-      return;
-    };
-
-    const preventTouchScroll = ( e: TouchEvent ) => e.preventDefault();
+    if (!canvas) return;
 
+    const preventTouchScroll = (e: TouchEvent) => e.preventDefault();
     canvas.addEventListener('touchstart', preventTouchScroll, { passive: false });
     canvas.addEventListener('touchmove', preventTouchScroll, { passive: false });
 
@@ -157,14 +184,14 @@ export default function ImageAnnotator({
       canvas.removeEventListener('touchmove', preventTouchScroll);
     };
   }, []);
-  
+
   useEffect(() => {
     if (imageRef.current && canvasRef.current) {
       const canvas = canvasRef.current;
       const ctx = canvas.getContext('2d');
       if (ctx) {
         ctx.clearRect(0, 0, canvas.width, canvas.height);
-        renderCanvas(); 
+        renderCanvas();
       }
     }
   }, [selectedImage]);
@@ -173,16 +200,13 @@ export default function ImageAnnotator({
     const options = drawings.reduce((acc, drawing) => {
       const categoryName = CATEGORY_CONFIG[drawing.category]?.name || drawing.category;
       const existingOption = acc.find((option) => option.name === categoryName);
-
       if (existingOption) {
         existingOption.quantity += 1;
       } else {
         acc.push({ name: categoryName, quantity: 1 });
       }
-
       return acc;
     }, [] as { name: string; quantity: number }[]);
-
     setAnnotationOptions(options.map((opt) => `${opt.name} (x${opt.quantity})`));
   }, [drawings, CATEGORY_CONFIG]);
 
@@ -191,22 +215,104 @@ export default function ImageAnnotator({
     return acc;
   }, {} as Record<string, number>);
 
+  const [content, setContent] = useState<string>("");
+  const [additionalFields, setAdditionalFields] = useState<{ [key: string]: string; }>({});
+  const [inventoryItemId, setInventoryItemId] = useState<number | null>(null);
+  const { activePlanet } = useActivePlanet();
+
+  useEffect(() => {
+    const fetchInventoryItemId = async () => {
+      if (!session || !activePlanet) return;
+      try {
+        const {
+          data: inventoryData,
+          error: inventoryError,
+        } = await supabase
+          .from("inventory")
+          .select("*")
+          .eq("owner", session.user.id)
+          .eq("anomaly", activePlanet.id)
+          .eq("item", structureItemId)
+          .limit(1)
+          .single();
+
+        if (inventoryError) throw inventoryError;
+        if (inventoryData) setInventoryItemId(inventoryData.id);
+      } catch (error: any) {
+        console.error("Error fetching inventory for classification: ", error.message);
+      }
+    };
+    fetchInventoryItemId();
+  }, [session, structureItemId]);
+
+  const createPost = async () => {
+    if (!session) return;
+
+    const classificationConfiguration = {
+      annotationOptions,
+      additionalFields,
+      parentPlanetLocation: activePlanet?.id,
+      createdBy: inventoryItemId ?? null,
+      classificationParent: parentClassificationId ?? null,
+    };
+
+    try {
+      const {
+        data: classificationData,
+        error: classificationError,
+      } = await supabase
+        .from("classifications")
+        .insert({
+          author: session.user.id,
+          content,
+          media: [
+            [],
+            ...uploads,
+            ...(otherAssets || []).map(url => ["http://...", "generated-id"]),
+            ...(Array.isArray(assetMentioned) ? assetMentioned : [assetMentioned]).map(id => id && [id, "id"]),
+          ].filter((item): item is [string, string] => Array.isArray(item) && item.length === 2),
+          anomaly: anomalyId,
+          classificationParent: classificationParent,
+          classificationtype: anomalyType,
+          classificationConfiguration,
+        })
+        .select()
+        .single();
+
+      if (classificationError) {
+        console.error("Error creating classification: ", classificationError.message);
+        alert("Failed to create classification. Please try again");
+        return;
+      }
+
+      console.log("Classification created successfully: ", classificationData);
+
+      setContent("");
+      setAdditionalFields({});
+      setUploads([]);
+      setDrawings([]);
+
+      router.push(`/next/${classificationData.id}`);
+    } catch (error: any) {
+      console.error("Unexpected error: ", error);
+      alert("Classification error occurred. Please try again");
+    }
+  };
+
   return (
-    <div className="space-y-4 max-w-full px-2 md:px-4 mx-auto overflow-x-hidden overflow-y-auto max-h-screen">
+    <div className={`space-y-4 max-w-full px-2 md:px-4 mx-auto overflow-x-hidden overflow-y-auto max-h-screen ${className}`}>
       <div className="flex justify-between items-center">
-        <SciFiPanel className="p-4 w-full max-w-md mx-auto">
-          <AnnotationTools
-            currentTool={currentTool}
-            setCurrentTool={setCurrentTool}
-            lineWidth={lineWidth}
-            setLineWidth={setLineWidth}
-          />
-        </SciFiPanel>
+        <AnnotationTools
+          currentTool={currentTool}
+          setCurrentTool={setCurrentTool}
+          lineWidth={lineWidth}
+          setLineWidth={setLineWidth}
+        />
       </div>
+
       {selectedImage && (
-        <div className="space-y-4">
-          <SciFiPanel className="p-4 w-full max-w-md mx-auto">
-            <p>{parentClassificationId}</p>
+        <>
+          <div style={{ width: '100%', overflow: 'auto', textAlign: 'center' }}>
             <AnnotationCanvas
               canvasRef={canvasRef}
               imageRef={imageRef}
@@ -223,20 +329,40 @@ export default function ImageAnnotator({
               setCurrentDrawing={setCurrentDrawing}
               currentCategory={currentCategory}
             />
-          </SciFiPanel>
-          <SciFiPanel className="p-4 w-full max-w-md mx-auto">
-            <Legend
-              currentCategory={currentCategory}
-              setCurrentCategory={setCurrentCategory}
-              categoryCount={categoryCount}
-              categories={CATEGORY_CONFIG as Record<AI4MCategory | P4Category, CategoryConfig>}
-            />
-          </SciFiPanel>
-          <SciFiPanel className="p-4 w-full max-w-md mx-auto">
-            <Button onClick={addMedia} disabled={isUploading}>
-              {isUploading ? 'Uploading...' : 'Save & proceed'}
-            </Button>
-          </SciFiPanel>
+          </div>
+
+          <div className="flex flex-col md:flex-row gap-4 w-full max-w-5xl mx-auto">
+            <SciFiPanel className="p-4 w-full md:w-1/2">
+              <Legend
+                currentCategory={currentCategory}
+                setCurrentCategory={setCurrentCategory}
+                categoryCount={categoryCount}
+                categories={CATEGORY_CONFIG as Record<AI4MCategory | P4Category, CategoryConfig>}
+              />
+            </SciFiPanel>
+
+            <SciFiPanel className="p-4 w-full md:w-1/2">
+              <div className="space-y-4">
+                <textarea
+                  value={content}
+                  onChange={(e) => setContent(e.target.value)}
+                  className="w-full p-3 h-24 text-sm text-blue-300 rounded-md border border-[#3B4252]"
+                  placeholder="Describe your annotations or post any additional information"
+                />
+
+                {!isFormVisible ? (
+                  <Button onClick={addMedia} disabled={isUploading}>
+                    {isUploading ? 'Uploading...' : 'Save & proceed'}
+                  </Button>
+                ) : (
+                  <Button onClick={createPost} disabled={isUploading}>
+                    Submit classification
+                  </Button>
+                )}
+              </div>
+            </SciFiPanel>
+          </div>
+
           {otherAssets && (
             <SciFiPanel>
               {otherAssets.map((url, index) => (
@@ -254,27 +380,7 @@ export default function ImageAnnotator({
               ))}
             </SciFiPanel>
           )}
-          {/* {isFormVisible && ( */}
-            <SciFiPanel className="p-4 w-full max-w-md mx-auto">
-              {anomalyId && anomalyType && (
-                <ClassificationForm
-                  anomalyId={anomalyId}
-                  anomalyType={anomalyType}
-                  missionNumber={missionNumber}
-                  parentPlanetLocation={parentPlanetLocation}
-                  parentClassificationId={parentClassificationId}
-                  assetMentioned={[
-                    ...uploads,
-                    ...(otherAssets || []),
-                    ...(Array.isArray(assetMentioned) ? assetMentioned : [assetMentioned]),
-                  ].filter((item): item is string => typeof item === 'string')}
-                  structureItemId={structureItemId}
-                  annotationOptions={annotationOptions}
-                />
-              )}
-            </SciFiPanel>
-          {/* // )} */}
-        </div>
+        </>
       )}
     </div>
   );
diff --git a/components/Projects/(classifications)/Annotating/DrawingCanvas.tsx b/components/Projects/(classifications)/Annotating/DrawingCanvas.tsx
index a49d5b1b2..0ba8b6d32 100644
--- a/components/Projects/(classifications)/Annotating/DrawingCanvas.tsx
+++ b/components/Projects/(classifications)/Annotating/DrawingCanvas.tsx
@@ -11,13 +11,13 @@ interface AnnotationCanvasProps {
   setIsDrawing: (isDrawing: boolean) => void;
   currentTool: Tool;
   currentColor: string;
-  lineWidth: number; 
+  lineWidth: number;
   drawings: DrawingObject[];
   setDrawings: (drawings: DrawingObject[]) => void;
   currentDrawing: DrawingObject | null;
   setCurrentDrawing: (drawing: DrawingObject | null) => void;
   currentCategory: AI4MCategory | P4Category;
-};
+}
 
 export function AnnotationCanvas({
   canvasRef,
@@ -33,8 +33,7 @@ export function AnnotationCanvas({
   setCurrentDrawing,
   currentCategory,
 }: AnnotationCanvasProps) {
-  const CANVAS_WIDTH = 500; 
-  const CANVAS_HEIGHT = 400;
+  const CANVAS_WIDTH = 500;
 
   const startDrawing = (e: React.MouseEvent<HTMLCanvasElement>) => {
     const canvas = canvasRef.current;
@@ -63,14 +62,14 @@ export function AnnotationCanvas({
       y: touch.clientY - rect.top,
     };
   };
-  
+
   const handleTouchStart = (e: React.TouchEvent<HTMLCanvasElement>) => {
     const canvas = canvasRef.current;
     if (!canvas) return;
-  
-    const touch = e.touches[0];
-    const { x, y } = getTouchPos(touch as Touch, canvas);
-  
+
+    const touch = e.nativeEvent.touches[0];
+    const { x, y } = getTouchPos(touch, canvas);
+
     setIsDrawing(true);
     const newDrawing: DrawingObject = {
       type: currentTool,
@@ -82,13 +81,13 @@ export function AnnotationCanvas({
     };
     setCurrentDrawing(newDrawing);
   };
-  
+
   const handleTouchMove = (e: React.TouchEvent<HTMLCanvasElement>) => {
     if (!isDrawing || !currentDrawing || !canvasRef.current) return;
-  
-    const touch = e.touches[0];
-    const { x, y } = getTouchPos(touch as Touch, canvasRef.current);
-  
+
+    const touch = e.nativeEvent.touches[0];
+    const { x, y } = getTouchPos(touch, canvasRef.current);
+
     if (currentTool === 'pen') {
       setCurrentDrawing({
         ...currentDrawing,
@@ -101,14 +100,14 @@ export function AnnotationCanvas({
       });
     }
   };
-  
+
   const handleTouchEnd = () => {
     if (currentDrawing) {
       setDrawings([...drawings, currentDrawing]);
     }
     setIsDrawing(false);
     setCurrentDrawing(null);
-  };  
+  };
 
   const draw = (e: React.MouseEvent<HTMLCanvasElement>) => {
     if (!isDrawing || !currentDrawing || !canvasRef.current) return;
@@ -162,69 +161,85 @@ export function AnnotationCanvas({
     const canvas = canvasRef.current;
     const ctx = canvas?.getContext('2d');
     if (!canvas || !ctx || !imageRef.current) return;
-  
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-  
+
+    const canvasWidth = canvas.width;
+    const canvasHeight = canvas.height;
+
+    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+
     const img = imageRef.current;
-    const imgAspectRatio = img.width / img.height;
-    const canvasAspectRatio = CANVAS_WIDTH / CANVAS_HEIGHT;
-  
-    let drawWidth, drawHeight, offsetX, offsetY;
-  
-    if (imgAspectRatio > canvasAspectRatio) {
-      // Image is wider than canvas
-      drawWidth = CANVAS_WIDTH;
-      drawHeight = CANVAS_WIDTH / imgAspectRatio;
-      offsetX = 0;
-      offsetY = (CANVAS_HEIGHT - drawHeight) / 2;
-    } else {
-      // Image is taller than canvas
-      drawWidth = CANVAS_HEIGHT * imgAspectRatio;
-      drawHeight = CANVAS_HEIGHT;
-      offsetX = (CANVAS_WIDTH - drawWidth) / 2;
-      offsetY = 0;
-    };
-  
+    const imgAspectRatio = img.naturalWidth / img.naturalHeight;
+
+    const drawWidth = canvasWidth;
+    const drawHeight = canvasWidth / imgAspectRatio;
+
+    const offsetX = 0;
+    const offsetY = (canvasHeight - drawHeight) / 2;
+
     ctx.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);
-  
+
     drawings.forEach((drawing) => {
       drawObject(ctx, drawing);
     });
-  
+
     if (currentDrawing) {
       drawObject(ctx, currentDrawing);
-    };
-  };  
+    }
+  };
 
   useEffect(() => {
-    if (imageRef.current) {
-      const canvas = canvasRef.current;
-      if (canvas) {
-        canvas.width = CANVAS_WIDTH; 
-        canvas.height = CANVAS_HEIGHT; 
-        renderCanvas();
-      }
+    const canvas = canvasRef.current;
+    const img = imageRef.current;
+
+    const dpr = window.devicePixelRatio || 1;
+
+    if (!canvas || !img) return;
+
+    const setCanvasSize = () => {
+      const aspectRatio = img.naturalWidth / img.naturalHeight;
+      const width = CANVAS_WIDTH;
+      const height = width / aspectRatio;
+
+      canvas.width = width * dpr;
+      canvas.height = height * dpr;
+      canvas.style.width = `${width}px`;
+      canvas.style.height = `${height}px`;
+
+      const ctx = canvas.getContext('2d');
+      if (ctx) ctx.scale(dpr, dpr);
+
+      renderCanvas();
+    };
+
+    if (img.complete) {
+      setCanvasSize();
+    } else {
+      img.addEventListener('load', setCanvasSize);
+      return () => img.removeEventListener('load', setCanvasSize);
     }
-  }, [imageRef.current]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   useEffect(() => {
     renderCanvas();
   }, [drawings, currentDrawing]);
 
   return (
-    <div className="border rounded-lg overflow-hidden inline-block">
-      <canvas
-        ref={canvasRef}
-        onMouseDown={startDrawing}
-        onMouseMove={draw}
-        onMouseUp={stopDrawing}
-        onMouseOut={stopDrawing}
-        onTouchStart={handleTouchStart}
-        onTouchMove={handleTouchMove}
-        onTouchEnd={handleTouchEnd}
-        className={cn("cursor-crosshair", isDrawing && "cursor-none")}
-        style={{ width: `${CANVAS_WIDTH}px`, height: `${CANVAS_HEIGHT}px` }}
-      />
-    </div>
-  );
+  <div className="border rounded-lg overflow-hidden inline-block max-w-[500px] max-h-[500px] w-full h-auto">
+    <canvas
+      ref={canvasRef}
+      onMouseDown={startDrawing}
+      onMouseMove={draw}
+      onMouseUp={stopDrawing}
+      onMouseOut={stopDrawing}
+      onTouchStart={handleTouchStart}
+      onTouchMove={handleTouchMove}
+      onTouchEnd={handleTouchEnd}
+      className={cn(
+        "w-full h-auto cursor-crosshair",
+        isDrawing && "cursor-none"
+      )}
+    />
+  </div>
+);
 };
\ No newline at end of file
diff --git a/components/Projects/(classifications)/FormConfigurations.ts b/components/Projects/(classifications)/FormConfigurations.ts
index 1a2358ce1..3654e5850 100644
--- a/components/Projects/(classifications)/FormConfigurations.ts
+++ b/components/Projects/(classifications)/FormConfigurations.ts
@@ -214,17 +214,17 @@ export const planetClassificationConfig: FormConfig = {
   options: planetClassificationOptions,
 };
 
-export const roverImgClassificationConfig: FormConfig = {
-  title: "Rover Image Classification",
-  richTextFields: 1,
-  options: roverImgClassificationOptions,
-};
+// export const roverImgClassificationConfig: FormConfig = {
+//   title: "Rover Image Classification",
+//   richTextFields: 1,
+//   options: roverImgClassificationOptions,
+// };
 
-export const zoodexSouthCoastFaunaRecoveryClassificationConfig: FormConfig = {
-  title: "South Coast Fauna Recovery",
-  richTextFields: 1,
-  options: zoodexSouthCoastFaunaRecoveryOptions,
-};
+// export const zoodexSouthCoastFaunaRecoveryClassificationConfig: FormConfig = {
+//   title: "South Coast Fauna Recovery",
+//   richTextFields: 1,
+//   options: zoodexSouthCoastFaunaRecoveryOptions,
+// };
 
 export const cloudClassificationConfig: FormConfig = {
   title: "Cloud Classification",
@@ -232,11 +232,11 @@ export const cloudClassificationConfig: FormConfig = {
   options: cloudClassificationOptions,
 };
 
-export const zoodexBurrowingOwlClassificationConfig: FormConfig = {
-  title: "Zoodex Burrowing Owl Classification",
-  richTextFields: 1,
-  options: zoodexBurrowingOwlClassificationOptions,
-};
+// export const zoodexBurrowingOwlClassificationConfig: FormConfig = {
+//   title: "Zoodex Burrowing Owl Classification",
+//   richTextFields: 1,
+//   options: zoodexBurrowingOwlClassificationOptions,
+// };
 
 export const zoodexIguanasFromAboveClassificationConfig: FormConfig = {
   title: "Zoodex Iguanas From Above Classification",
@@ -255,8 +255,8 @@ export const telescopeDiskDetectorConfig: FormConfig = {
   options: diskDetectorOptions,
 };
 
-export const zoodexNestQuestGoConfig: FormConfig = {
-  title: "Nested Quest Go",
-  richTextFields: 4,
-  richTextTitles: ['Month of EACH nest visit (put a slash / between nest visits)', 'Day of EACH nest visit(put a slash / between nest visits)', 'Number of Eggs for EACH nest visit (put a slash / between nest visits)', 'Number of Young for EACH nest visit (put a slash / between nest visits)'],
-};
\ No newline at end of file
+// export const zoodexNestQuestGoConfig: FormConfig = {
+//   title: "Nested Quest Go",
+//   richTextFields: 4,
+//   richTextTitles: ['Month of EACH nest visit (put a slash / between nest visits)', 'Day of EACH nest visit(put a slash / between nest visits)', 'Number of Eggs for EACH nest visit (put a slash / between nest visits)', 'Number of Young for EACH nest visit (put a slash / between nest visits)'],
+// };
\ No newline at end of file
diff --git a/components/Projects/(classifications)/FormFileUpload.tsx b/components/Projects/(classifications)/FormFileUpload.tsx
new file mode 100644
index 000000000..61cbf73a0
--- /dev/null
+++ b/components/Projects/(classifications)/FormFileUpload.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import React from "react";
+
+interface MediaUploadProps {
+    onMediaAdd: ( e: React.ChangeEvent<HTMLInputElement> ) => void;
+    isUploading: boolean;
+    className?: string;
+};
+
+const MediaUpload: React.FC<MediaUploadProps> = ({
+    onMediaAdd,
+    isUploading,
+    className = "",
+}) => {
+    return (
+        <label className={`flex gap-1 items-center cursor-pointer text-[#88C0D0] hover:text-white ${className}`}>
+            <input
+                type="file"
+                className="hidden"
+                onChange={onMediaAdd}
+                multiple
+                accept="image/*,video/*"
+            />
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke='currentColor'
+                className="w-6 h-6"
+            >
+                <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-6.5 6.5"
+                />
+            </svg>
+            <span>
+                {isUploading ? "Uploading..." : "Upload Media"}
+            </span>
+        </label>
+    );
+};
+
+export default MediaUpload;
\ No newline at end of file
diff --git a/components/Projects/(classifications)/NextScene.tsx b/components/Projects/(classifications)/NextScene.tsx
new file mode 100644
index 000000000..83b3320a9
--- /dev/null
+++ b/components/Projects/(classifications)/NextScene.tsx
@@ -0,0 +1,305 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useSupabaseClient, useSession } from '@supabase/auth-helpers-react';
+import { useRouter } from 'next/navigation';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog';
+import Image from 'next/image';
+import GameNavbar from '@/components/Layout/Tes';
+import { Progress } from '@/components/ui/progress';
+
+type Props = {
+  id: string;
+};
+
+const telescopeTypes = [
+  'planet',
+  'active-asteroid',
+  'DiskDetective',
+  'telescope-minorPlanet',
+];
+
+const balloonTypes = [
+  'cloud',
+  'lidar-jovianVortexHunter',
+  'balloon-marsCloudShapes',
+  'automaton-aiForMars',
+  'satellite-planetFour',
+];
+
+const projectMap: Record<string, string> = {
+  planet: 'planethunters',
+  'active-asteroid': 'asteroids',
+  DiskDetective: 'diskdetective',
+  'telescope-minorPlanet': 'dailyminorplanet',
+  sunspot: 'sunspot',
+  cloud: 'cloudspotting',
+  'lidar-jovianVortexHunter': 'jvh',
+  'balloon-marsCloudShapes': 'cloudspotting-shapes',
+  'automaton-aiForMars': 'ai-for-mars',
+  'satellite-planetFour': 'planet-four',
+};
+
+function getWeekDateRange(startDateStr: string): { start: string; end: string } {
+  const start = new Date(startDateStr);
+  const end = new Date(start);
+  end.setDate(start.getDate() + 7);
+  return {
+    start: start.toISOString(),
+    end: end.toISOString(),
+  };
+}
+
+const badgeColors = [
+  'bg-red-100 text-red-800',
+  'bg-green-100 text-green-800',
+  'bg-blue-100 text-blue-800',
+  'bg-yellow-100 text-yellow-800',
+  'bg-purple-100 text-purple-800',
+  'bg-pink-100 text-pink-800',
+  'bg-indigo-100 text-indigo-800',
+];
+
+export default function ClientClassificationPage({ id }: Props) {
+  const supabase = useSupabaseClient();
+  const session = useSession();
+  const router = useRouter();
+
+  const [classification, setClassification] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
+  const [milestones, setMilestones] = useState<any[] | null>(null);
+
+  useEffect(() => {
+    const fetchClassification = async () => {
+      const { data, error } = await supabase
+        .from('classifications')
+        .select('*')
+        .eq('id', id)
+        .single();
+
+      if (error) {
+        console.error('Error fetching classification:', error);
+        return;
+      }
+
+      console.log('classificationConfiguration:', data.classificationConfiguration);
+      console.log(
+        'annotationOptions:',
+        data.classificationConfiguration?.annotationOptions ?? []
+      );
+
+      setClassification(data);
+      setLoading(false);
+
+      if (session && data?.classificationtype) {
+        checkMilestones(data.classificationtype, data.created_at);
+      }
+    };
+
+    fetchClassification();
+  }, [id, supabase, session]);
+
+  const checkMilestones = async (classificationType: string, createdAt: string) => {
+    try {
+      const res = await fetch('/api/gameplay/milestones');
+      const allMilestones = await res.json();
+
+      const matchingWeek = allMilestones.playerMilestones.find((week: any) => {
+        const { start, end } = getWeekDateRange(week.weekStart);
+        return new Date(createdAt) >= new Date(start) && new Date(createdAt) < new Date(end);
+      });
+
+      if (!matchingWeek) {
+        setMilestones([]);
+        return;
+      }
+
+      const relevantMilestones = matchingWeek.data?.filter(
+        (m: any) =>
+          m.table === 'classifications' &&
+          m.field === 'classificationtype' &&
+          m.value === classificationType
+      ) || [];
+
+      if (!relevantMilestones.length) {
+        setMilestones([]);
+        return;
+      }
+
+      const { start, end } = getWeekDateRange(matchingWeek.weekStart);
+
+      const milestoneStatuses = await Promise.all(
+        relevantMilestones.map(async (m: any) => {
+          const { count, error } = await supabase
+            .from('classifications')
+            .select('', { count: 'exact', head: true })
+            .eq('author', session?.user?.id)
+            .eq('classificationtype', classificationType)
+            .gte('created_at', start)
+            .lt('created_at', end);
+
+          if (error) {
+            console.error('Milestone count error:', error);
+          }
+
+          return {
+            name: m.name,
+            requiredCount: m.requiredCount ?? 5,
+            currentCount: count ?? 0,
+            achieved: (count ?? 0) >= (m.requiredCount ?? 5),
+          };
+        })
+      );
+
+      setMilestones(milestoneStatuses);
+    } catch (err) {
+      console.error('Error checking milestones:', err);
+      setMilestones([]);
+    }
+  };
+
+  if (loading) return <div className="text-center mt-10 text-[#2E3440]">Loading...</div>;
+  if (!classification) return null;
+
+  const mediaUrl = Array.isArray(classification.media)
+    ? classification.media.find((item: any) => Array.isArray(item) && typeof item[0] === 'string' && item[0].startsWith('http'))?.[0]
+    : undefined;
+  const type = classification.classificationtype;
+
+  let structure = 'greenhouse';
+  if (telescopeTypes.includes(type)) structure = 'telescope';
+  else if (balloonTypes.includes(type)) structure = 'balloon';
+
+  const project = projectMap[type];
+  const studyUrl = project
+    ? `/${structure}/${project}/2/${classification.id}`
+    : `/greenhouse/two/${classification.id}`;
+
+  const annotationOptions: string[] =
+    classification?.classificationConfiguration?.annotationOptions ?? [];
+
+  // Reduce to count occurrences
+  const annotationCounts = annotationOptions.reduce((acc: Record<string, number>, label: string) => {
+    const key = label.trim();
+    acc[key] = (acc[key] || 0) + 1;
+    return acc;
+  }, {});
+
+  const annotationBadges = Object.entries(annotationCounts).map(([label, count], idx) => {
+    const color = badgeColors[idx % badgeColors.length];
+    return (
+      <span
+        key={label}
+        className={`inline-block px-3 py-1 rounded-full text-xs font-medium mr-2 mb-2 ${color}`}
+      >
+        {count > 1 ? `${label} (${count})` : label}
+      </span>
+    );
+  });
+
+  return (
+    <div className="relative min-h-screen w-full overflow-hidden">
+      <div className="absolute inset-0 -z-10">
+        <img
+          src="/assets/Backdrops/Earth.png"
+          alt="Earth Background"
+          className="w-full h-full object-cover blur-md brightness-90 opacity-80"
+        />
+      </div>
+
+      <div className="w-full z-10">
+        <GameNavbar />
+      </div>
+
+      <div className="flex items-center justify-center min-h-screen px-4 py-12">
+        <div className="bg-[#F8FAFC] rounded-2xl shadow-xl p-6 max-w-xl w-full border border-[#88C0D0] space-y-6">
+          <div className="space-y-1">
+            <h1 className="text-xl font-semibold text-[#2E3440]">Discovery Summary</h1>
+            <p className="text-md text-[#4C566A]">{classification.content}</p>
+          </div>
+
+          {mediaUrl && (
+            <div className="relative group rounded-md overflow-hidden border border-[#D8DEE9]">
+              <Dialog>
+                <DialogTrigger asChild>
+                  <Image
+                    src={mediaUrl}
+                    alt="Annotated Media"
+                    width={600}
+                    height={300}
+                    className="w-full h-[300px] object-contain cursor-zoom-in transition-transform duration-200 group-hover:scale-105"
+                  />
+                </DialogTrigger>
+              </Dialog>
+            </div>
+          )}
+
+          {annotationBadges.length > 0 && (
+            <div className="flex flex-wrap pt-2">{annotationBadges}</div>
+          )}
+
+          <div className="bg-[#D8F3DC] text-[#2E7D32] text-sm font-medium p-2 rounded-lg border border-[#A5D6A7]">
+            +2 Stardust earned for this classification
+          </div>
+
+          <div className="space-y-3 pt-2">
+            <h2 className="text-md font-semibold text-[#2E3440]">🎯 Milestones</h2>
+
+            {milestones === null ? (
+              <div className="text-sm text-[#4C566A]">Checking milestones...</div>
+            ) : milestones.length === 0 ? (
+              <div className="text-sm text-[#4C566A] italic">
+                No related milestones for this classification type.
+              </div>
+            ) : (
+              milestones.map((m) => (
+                <div
+                  key={m.name}
+                  className={`rounded-lg p-3 border min-h-[96px] flex flex-col justify-between ${
+                    m.achieved
+                      ? 'bg-[#FFF3CD] text-[#856404] border-[#FFECB5]'
+                      : 'bg-[#E3F2FD] text-[#1565C0] border-[#90CAF9]'
+                  }`}
+                >
+                  <div className="font-medium">{m.name}</div>
+                  <div className="pt-1">
+                    {m.achieved ? (
+                      <div>🎉 Milestone Achieved!</div>
+                    ) : (
+                      <>
+                        <div className="text-xs mb-1">
+                          {m.currentCount} / {m.requiredCount}
+                        </div>
+                        <Progress value={(m.currentCount / m.requiredCount) * 100} />
+                      </>
+                    )}
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+
+          <div className="flex flex-col sm:flex-row gap-3 pt-4 border-t border-[#D8DEE9]">
+            <Button variant="outline" onClick={() => router.push(`/structures/${structure}`)}>
+              🧬 Back to Structure
+            </Button>
+            <Button variant="ghost" onClick={() => router.push('/')}>
+              🏠 Home
+            </Button>
+            {type === 'planet' && (
+              <Button variant="default" onClick={() => router.push(`/planets/paint/${classification.id}`)}>
+                🪐 Customise planet
+              </Button>
+            )}
+            {type != 'planet' && (
+              <Button variant='default' onClick={() => router.push(`/structures/${structure}`)}>
+                ⚙️ Step 2
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/components/Projects/(classifications)/PostForm.tsx b/components/Projects/(classifications)/PostForm.tsx
index e72f38735..47df6cf29 100644
--- a/components/Projects/(classifications)/PostForm.tsx
+++ b/components/Projects/(classifications)/PostForm.tsx
@@ -28,6 +28,7 @@ import Link from "next/link";
 // import UserAvatar, { UserAvatarNullUpload } from "@/components/Profile/Avatar";
 import { ClassificationFormProps } from "./FormConfigurations";
 import { SciFiButton } from "@/components/ui/styles/sci-fi/button";
+import MediaUpload from "./FormFileUpload";
 
 const ClassificationForm: React.FC<ClassificationFormProps> = ({
   anomalyType,
@@ -100,6 +101,8 @@ const ClassificationForm: React.FC<ClassificationFormProps> = ({
         return "Enter your classification details...";
     }
   })();
+
+  const [showDialog, setShowDialog] = useState(false);
  
   const classificationOptions = (() => {
     switch (anomalyType) {
@@ -215,25 +218,6 @@ const ClassificationForm: React.FC<ClassificationFormProps> = ({
     }));
   };
 
-  // const handleMissionComplete = async () => {
-  //   try {
-  //     const missionData = {
-  //       user: session?.user?.id,
-  //       time_of_completion: new Date().toISOString(),
-  //       mission: missionNumber,
-  //       configuration: null,
-  //     };
-  //     await supabase.from("missions").insert([missionData]);
-  //     // const newAnomalyData = {
-  //     //   user_id: session?.user?.id,
-  //     //   anomaly_id: activePlanet?.id,
-  //     // };
-  //     // await supabase.from("user_anomalies").insert([newAnomalyData]);
-  //   } catch (error: any) {
-  //     console.error(error);
-  //   };
-  // };
-
   const createPost = async () => {
     const flattenedOptions = classificationOptions.flat();
 
@@ -294,6 +278,7 @@ const ClassificationForm: React.FC<ClassificationFormProps> = ({
             classificationtype: anomalyType,
             classificationConfiguration,
           })
+          .select()
           .single();
 
       if (classificationError) {
@@ -304,11 +289,13 @@ const ClassificationForm: React.FC<ClassificationFormProps> = ({
         alert("Failed to create classification. Please try again.");
         return;
       } else {
+        const newClassificationId = classificationData.id;
         setClassificationOutput(classificationConfiguration);
         setContent("");
         setSelectedOptions({});
         setUploads([]);
         setPostSubmitted(true);
+        router.push(`/next/${newClassificationId}`);
       };
 
       // await handleMissionComplete();
@@ -330,13 +317,9 @@ const ClassificationForm: React.FC<ClassificationFormProps> = ({
         .eq("id", session?.user?.id);
 
       if (updatePointsError) throw updatePointsError;
-      router.refresh();
-      window.location.reload();
     } catch (error: any) {
       console.error("Unexpected error:", error);
     };
-
-    router.refresh();
   };
 
   const addMedia = async (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -426,15 +409,10 @@ const ClassificationForm: React.FC<ClassificationFormProps> = ({
 
   return (
     <div className="p-4 w-full max-w-4xl mx-auto rounded-lg h-full bg-[#2C4F64]/30 text-white bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-70">
-      {/* {uses !== null && uses <= 0 ? (
-        <div className="text-red-500 font-bold">
-          You need to repair the structure's durability before you can use it.
-        </div>
-      ) : ( */}
         <div className="flex flex-col gap-6">
           {classificationOptions.length > 0 ? (
             <>
-              <div className="flex flex-col gap-2">
+              {/* <div className="flex flex-col gap-2">
                 {classificationOptions.map((optionSet, setIndex) => (
                   <div key={setIndex} className="flex flex-col gap-4">
                     <h3 className="font-bold text-sm">Option Set {setIndex + 1}</h3>
@@ -455,7 +433,7 @@ const ClassificationForm: React.FC<ClassificationFormProps> = ({
                     </div>
                   </div>
                 ))}
-              </div>
+              </div> */}
   
               <div className="flex flex-col gap-4">
                 <textarea
@@ -516,25 +494,10 @@ const ClassificationForm: React.FC<ClassificationFormProps> = ({
                 placeholder={placeholder}
               />
               <div className="flex items-center justify-between">
-                <label className="flex gap-1 items-center cursor-pointer text-[#88C0D0] hover:text-white">
-                  <input type="file" className="hidden" onChange={addMedia} />
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    strokeWidth={1.5}
-                    stroke="currentColor"
-                    className="w-6 h-6"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-6.5 6.5"
-                    />
-                  </svg>
-                  <span>Upload Media</span>
-                </label>
-                {isUploading && <span className="text-[#88C0D0]">Uploading...</span>}
+                <MediaUpload
+                  onMediaAdd={addMedia}
+                  isUploading={isUploading}
+                />
                 <SciFiButton
                   onClick={createPost}
                   className="flex items-center justify-center gap-2"
diff --git a/components/Projects/Auto/AI4Mars.tsx b/components/Projects/Auto/AI4Mars.tsx
index 412e49271..ff87cba21 100644
--- a/components/Projects/Auto/AI4Mars.tsx
+++ b/components/Projects/Auto/AI4Mars.tsx
@@ -4,14 +4,283 @@ import React, { useState, useEffect } from "react";
 import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import { useActivePlanet } from "@/context/ActivePlanet";
 import ClassificationForm from "../(classifications)/PostForm";
-import { Anomaly } from "../Zoodex/ClassifyOthersAnimals";
 import ImageAnnotator from "../(classifications)/Annotating/Annotator";
-import PreferredTerrestrialClassifications from "@/components/Structures/Missions/PickPlanet";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
 
 interface Props {
     anomalyid: number | bigint;
 };
 
+type AnomalyRecord = {
+    id: number;
+    anomalySet: string;
+    content: string | null;
+};
+
+type LinkedAnomaly = {
+    id: number;
+    anomaly_id: number;
+    classification_id: number | null;
+    anomalies: AnomalyRecord[];
+};
+
+type Anomaly = AnomalyRecord;
+
+interface SelectedAnomProps {
+    anomalyid?: number;
+    parentClassificationId?: number;
+}; 
+
+export function AiForMarsProjectWithID() {
+    const supabase = useSupabaseClient();
+    const session = useSession();
+
+    const [anomaly, setAnomaly] = useState<AnomalyRecord | null>(null);
+    const [imageUrl, setImageUrl] = useState<string | null>(null);
+    const [parentClassificationId, setParentClassificationId] = useState<number | null>(null);
+    const [loading, setLoading] = useState(true);
+
+    const fetchAnomaly = async () => {
+        if (!session?.user?.id) {
+            setLoading(false);
+            return;
+        }
+
+        try {
+            const { data, error } = await supabase
+                .from("linked_anomalies")
+                .select(`
+                    id,
+                    anomaly_id,
+                    classification_id,
+                    anomalies (
+                        id,
+                        anomalySet,
+                        content
+                    )
+                `)
+                .eq("author", session.user.id);
+
+            if (error) throw error;
+
+            console.log("Raw fetched linked_anomalies data:", data);
+
+            const validEntries = (data ?? []).filter((entry): entry is LinkedAnomaly => {
+                const anomaly = entry.anomalies;
+                return anomaly &&
+                    typeof anomaly === "object" &&
+                    "anomalySet" in anomaly &&
+                    anomaly.anomalySet === "automaton-aiForMars";
+            });
+
+            console.log("Filtered valid linked anomalies:", validEntries);
+
+            if (validEntries.length > 0) {
+                const randomEntry = validEntries[Math.floor(Math.random() * validEntries.length)];
+                const singleAnomaly = randomEntry.anomalies as unknown as AnomalyRecord;
+
+                setAnomaly(singleAnomaly);
+                setImageUrl(`${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/telescope/automatons-ai4Mars/${randomEntry.anomaly_id}.jpeg`);
+                setParentClassificationId(randomEntry.classification_id);
+            } else {
+                // Fallback: find first linked anomaly with non-null classification_id
+                const { data: fallbackLinked, error: fallbackError } = await supabase
+                    .from("linked_anomalies")
+                    .select(`
+                        id,
+                        anomaly_id,
+                        classification_id,
+                        anomalies (
+                            id,
+                            anomalySet,
+                            content
+                        )
+                    `)
+                    .eq("author", session.user.id)
+                    .not("classification_id", "is", null)
+                    .limit(1);
+
+                if (fallbackError) throw fallbackError;
+
+                if (
+                    fallbackLinked &&
+                    fallbackLinked.length > 0 &&
+                    fallbackLinked[0].anomalies
+                ) {
+                    const fallbackAnomaly = fallbackLinked[0].anomalies as unknown as AnomalyRecord;
+
+                    setAnomaly(fallbackAnomaly);
+                    setImageUrl(`${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/telescope/automatons-ai4Mars/${fallbackLinked[0].anomaly_id}.jpeg`);
+                    setParentClassificationId(fallbackLinked[0].classification_id);
+                    console.log("Using fallback anomaly with classification_id:", fallbackAnomaly.id);
+                } else {
+                    console.error("No suitable linked anomalies with classification_id found.");
+                    setAnomaly(null);
+                }
+            }
+        } catch (err: any) {
+            console.error("Error fetching anomaly:", err.message);
+            setAnomaly(null);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        fetchAnomaly();
+    }, [session]);
+
+    if (loading) return <p>Loading...</p>;
+    if (!anomaly || !imageUrl) return (
+        <div>
+            <Link href="/deploy"><Button>No anomaly found for this user in AI4Mars project. Re-deploy your automatons this week.</Button></Link>
+        </div>
+    );
+
+    return (
+        <div className="w-full h-screen flex flex-col items-center justify-center bg-gradient-to-br from-[#E5EEF4] to-[#D8E5EC] px-4 py-6 overflow-hidden">
+            <div className="w-full max-w-4xl h-full flex flex-col rounded-xl bg-white shadow-lg p-4 overflow-hidden">
+                <div className="flex-1 overflow-hidden round-md">
+                    <ImageAnnotator
+                        initialImageUrl={imageUrl}
+                        anomalyId={anomaly.id.toString()}
+                        anomalyType="automaton-aiForMars"
+                        missionNumber={200000062}
+                        assetMentioned={imageUrl}
+                        structureItemId={3102}
+                        annotationType="AI4M"
+                        parentClassificationId={parentClassificationId ?? undefined}
+                        parentPlanetLocation={anomaly.id.toString()}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export function AiForMarsProject({
+    anomalyid,
+    parentClassificationId,
+}: SelectedAnomProps) {
+    const supabase = useSupabaseClient();
+    const session = useSession();
+
+    const { activePlanet } = useActivePlanet();
+
+    const [anomaly, setAnomaly] = useState<Anomaly | null>(null);
+    const [showTutorial, setShowTutorial] = useState(false);
+    const [imageUrl, setImageUrl] = useState<string | null>(null);
+    const [loading, setLoading] = useState(true);
+
+    const fetchAnomaly = async () => {
+        if (!session || !anomalyid) {
+            setLoading(false);
+            return;
+        }
+
+        try {
+            const { data, error } = await supabase
+                .from("linked_anomalies")
+                .select(`
+                    id,
+                    anomaly_id,
+                    anomalies (
+                        id,
+                        anomalySet,
+                        content
+                    )
+                `)
+                .eq("author", session.user.id)
+                .eq("anomaly_id", anomalyid)
+                .filter("anomalies.anomalySet", "eq", "automaton-aiForMars")
+                .maybeSingle();
+
+            if (error) throw error;
+
+            if (data?.anomalies) {
+                const anomalyData = Array.isArray(data.anomalies) ? data.anomalies[0] : data.anomalies;
+                setAnomaly(anomalyData);
+                setImageUrl(`${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/telescope/automatons-ai4Mars/${data.anomaly_id}.jpeg`);
+            } else {
+                console.warn("No linked anomaly found, falling back...");
+                await __DEV_FALLBACK_fetchFromAnomaliesTable(anomalyid);
+            }
+        } catch (error: any) {
+            console.error("Error fetching specific joined anomaly:", error.message);
+            setAnomaly(null);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    // 🌟 Easily removable fallback function
+    const __DEV_FALLBACK_fetchFromAnomaliesTable = async (id: number) => {
+        try {
+            const { data, error } = await supabase
+                .from("anomalies")
+                .select("id, anomalySet, content")
+                .eq("id", id)
+                .eq("anomalySet", "automaton-aiForMars")
+                .maybeSingle();
+
+            if (error) throw error;
+
+            if (data) {
+                setAnomaly(data);
+                setImageUrl(`${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/telescope/automatons-ai4Mars/${id}.jpeg`);
+            } else {
+                console.log("No fallback anomaly found in anomalies table.");
+            }
+        } catch (err: any) {
+            console.error("Fallback fetch error:", err.message);
+        }
+    };
+
+    useEffect(() => {
+        fetchAnomaly();
+    }, [session, supabase]);
+
+    if (loading) {
+        return <div><p>Loading...</p></div>;
+    }
+
+    if (!anomaly) {
+        return <div><p>No anomaly found.</p></div>;
+    }
+
+    const startTutorial = () => setShowTutorial(true);
+
+    return (
+        <div className="flex flex-col items-start gap-4 pb-4 relative w-full overflow-y-auto max-h-[90vh] rounded-lg overflow-x-hidden">
+            <>
+                {imageUrl && (
+                    <>
+                        <div className="w-full overflow-x-auto">
+                            <ImageAnnotator
+                                initialImageUrl={imageUrl}
+                                anomalyId={anomaly.id.toString()}
+                                anomalyType="automaton-aiForMars"
+                                assetMentioned={imageUrl}
+                                structureItemId={3102}
+                                parentClassificationId={parentClassificationId}
+                                annotationType="AI4M"
+                                parentPlanetLocation={anomalyid?.toString()}
+                            />
+                        </div>
+                    </>
+                )}
+                <button
+                    onClick={startTutorial}
+                    className="mt-4 px-4 py-2 bg-[#85DDA2] text-[#2C3A4A] rounded-md shadow-md"
+                >
+                    Reopen Tutorial
+                </button>
+            </>
+        </div>
+    );
+};
+
 export function StarterAiForMars({ anomalyid }: Props) {
     const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
     const imageUrl = `${supabaseUrl}/storage/v1/object/public/telescope/automaton-ai4Mars/${anomalyid}.jpeg`;
@@ -143,267 +412,4 @@ export function StarterAiForMars({ anomalyid }: Props) {
             </div> 
         </div>
     );
-};
-
-interface SelectedAnomProps {
-    anomalyid?: number;
-    parentClassificationId?: number;
-}; 
-
-function AiForMarsProjectWithID({
-    anomalyid
-}: SelectedAnomProps) {
-    const supabase = useSupabaseClient();
-    const session = useSession();
-
-    const [anomaly, setAnomaly] = useState<Anomaly | null>(null);
-    const [showTutorial, setShowTutorial] = useState(false);
-    const [imageUrl, setImageUrl] = useState<string | null>(null);
-    
-    const [loading, setLoading] = useState(true);
-
-    const fetchAnomaly = async () => {
-        if (!session) {
-            setLoading(false);
-            return;
-        };
-
-        try {
-            const {
-                data: anomalyData,
-                error,
-            } = await supabase
-                .from("anomalies")
-                .select("*")
-                .eq("anomalySet", "automaton-aiForMars")
-                .eq('id', anomalyid);
-
-            if (error) {
-                console.log('error');
-                setLoading(false);
-            } else {
-                setAnomaly(anomalyData[0]);
-                setImageUrl(
-                    `${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/telescope/automaton-ai4Mars/${anomalyid}.jpeg`
-                );
-            };
-        } catch (error: any) {
-            setLoading(false);
-            console.error(error);
-        } finally {
-            setLoading(false);
-        };
-    };
-
-    useEffect(() => {
-        fetchAnomaly();
-    }, [session]);
-
-    if (loading) {
-        return (
-            <p>Loading...</p>
-        );
-    };
-
-    return (
-        <div className="flex flex-col items-start gap-4 pb-4 relative w-full overflow-y-auto max-h-[90vh] rounded-lg overflow-x-hidden">
-                <>
-                    {imageUrl && (
-                        <>
-                            <div className="w-full overflow-x-auto">
-                                <ImageAnnotator
-                                    initialImageUrl={imageUrl}
-                                    anomalyId={anomalyid?.toString()}
-                                    anomalyType="automaton-aiForMars"
-                                    missionNumber={200000062}
-                                    assetMentioned={imageUrl}
-                                    structureItemId={3102} 
-                                    annotationType="AI4M"
-                                    parentPlanetLocation={anomalyid?.toString()}
-                                />
-                            </div>
-                        </>
-                    )}
-                </>
-        </div>
-    );
-};
-
-export function AiForMarsProject({
-    anomalyid,
-    parentClassificationId,
-}: SelectedAnomProps) {
-    const supabase = useSupabaseClient();
-    const session = useSession();
-
-    const { activePlanet } = useActivePlanet();
-
-    const [anomaly, setAnomaly] = useState<Anomaly | null>(null);
-    const [showTutorial, setShowTutorial] = useState(false);
-    const [imageUrl, setImageUrl] = useState<string | null>(null);
-    const [loading, setLoading] = useState(true);
-    const [hasMission20000006, setHasMission20000006] = useState<boolean | null>(null);
-
-    useEffect(() => {
-        const checkTutorialMission = async () => {
-            if (!session) return;
-
-            try {
-                const { data: missionData, error: missionError } = await supabase
-                    .from("missions")
-                    .select("id")
-                    .eq("user", session.user.id)
-                    .eq("mission", "20000006")
-                    .limit(1);
-
-                if (missionError) {
-                    console.error("Error fetching mission data:", missionError);
-                    setHasMission20000006(false);
-                    return;
-                }
-
-                setHasMission20000006(missionData && missionData.length > 0);
-            } catch (error) {
-                console.error("Error checking user mission: ", error);
-                setHasMission20000006(false);
-            }
-        };
-
-        checkTutorialMission();
-    }, [session, supabase]);
-
-    const fetchAnomaly = async () => {
-        if (!session) {
-            setLoading(false);
-            return;
-        };
-
-        try {
-            const { data: anomalyData, error: anomalyError } = await supabase
-                .from("anomalies")
-                .select("*")
-                .eq("anomalySet", "automaton-aiForMars");
-
-            if (anomalyError) throw anomalyError;
-
-            const randomAnomaly = anomalyData[Math.floor(Math.random() * anomalyData.length)] as Anomaly;
-            setAnomaly(randomAnomaly);
-            setImageUrl(
-                `${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/telescope/automaton-ai4Mars/${randomAnomaly.id}.jpeg`
-            );
-        } catch (error: any) {
-            console.error("Error fetching anomaly", error.message);
-            setAnomaly(null);
-        } finally {
-            setLoading(false);
-        };
-    };
-
-    useEffect(() => {
-        fetchAnomaly();
-    }, [session, supabase]);
-
-    if (loading) {
-        return (
-            <div>
-                <p>Loading...</p>
-            </div>
-        );
-    };
-
-    if (!anomaly) {
-        return (
-            <div>
-                <p>No anomaly found.</p>
-            </div>
-        );
-    };
-
-    const startTutorial = () => setShowTutorial(true);
-
-    return (
-        <div className="flex flex-col items-start gap-4 pb-4 relative w-full overflow-y-auto max-h-[90vh] rounded-lg overflow-x-hidden">
-            {!hasMission20000006 ? (
-                <StarterAiForMars anomalyid={anomaly.id || 69592674} />
-            ) : (
-                <>
-                    {imageUrl && (
-                        <>
-                            <div className="w-full overflow-x-auto">
-                                <ImageAnnotator
-                                    initialImageUrl={imageUrl}
-                                    anomalyId={anomaly.id.toString()}
-                                    anomalyType="automaton-aiForMars"
-                                    missionNumber={200000062}
-                                    assetMentioned={imageUrl}
-                                    structureItemId={3102} 
-                                    parentClassificationId={parentClassificationId}
-                                    annotationType="AI4M"
-                                    parentPlanetLocation={anomalyid?.toString()}
-                                />
-                            </div>
-                            {/* <ClassificationForm
-                                
-                            /> */}
-                        </>
-                    )}
-                    <button
-                        onClick={startTutorial}
-                        className="mt-4 px-4 py-2 bg-[#85DDA2] text-[#2C3A4A] rounded-md shadow-md"
-                    >
-                        Reopen Tutorial
-                    </button>
-                </> 
-            )}
-        </div>
-    );
-};
-
-export function AI4MWrapper() {
-    const [selectedAnomaly, setSelectedAnomaly] = useState<number | null>(null);
-
-    return (
-        <div className="space-y-8">
-            {!selectedAnomaly && (
-                <PreferredTerrestrialClassifications
-                    onSelectAnomaly={(anomalyId: number | null, selectedVehicle: string | null) => {
-                        setSelectedAnomaly(anomalyId);
-                    }}
-                />
-            )} 
-            {selectedAnomaly && 
-                <AiForMarsProject
-                    parentClassificationId={selectedAnomaly}
-                    anomalyid={selectedAnomaly}
-                />
-            }
-        </div>
-    );
-};
-
-interface AI4MWWHCProps {
-    anomalyId: number;
-};
-
-export function AI4MWrapperWithHardcode({
-    anomalyId
-}: AI4MWWHCProps) {
-    const [selectedAnomaly, setSelectedAnomaly] = useState<number | null>(null);
-
-    return (
-        <div className="space-y-8">
-            {!selectedAnomaly && (
-                <PreferredTerrestrialClassifications
-                    onSelectAnomaly={(anomalyId: number | null, selectedVehicle: string | null) => {
-                        setSelectedAnomaly(anomalyId);
-                    }}
-                />
-            )} 
-            {selectedAnomaly && 
-                <AiForMarsProjectWithID
-                    anomalyid={anomalyId}
-                />
-            }
-        </div>
-    );
 };
\ No newline at end of file
diff --git a/components/Projects/Lidar/Clouds.tsx b/components/Projects/Lidar/Clouds.tsx
index b1d80311c..9f30a4c02 100644
--- a/components/Projects/Lidar/Clouds.tsx
+++ b/components/Projects/Lidar/Clouds.tsx
@@ -4,16 +4,16 @@ import React, { useEffect, useState } from "react";
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
 import { useActivePlanet } from "@/context/ActivePlanet";
 import ClassificationForm from "@/components/Projects/(classifications)/PostForm";
-import { Anomaly } from "../Telescopes/Transiting";
 import { CloudspottingOnMarsTutorial } from "./cloudspottingOnMars"; 
-import PreferredTerrestrialClassifications from "@/components/Structures/Missions/PickPlanet";
 import ImageAnnotator from "../(classifications)/Annotating/Annotator";
 
-export interface SelectedAnomProps {
-    anomalyid?: number;
+type Anomaly = {
+  id: string;
+  name: string;
+  details?: string;
 };
 
-export function StarterLidar({ anomalyid }: SelectedAnomProps) {
+export function StarterLidar({ anomalyid }: { anomalyid: string }) {
     const supabase = useSupabaseClient();
     const session = useSession();
 
@@ -159,46 +159,108 @@ export function StarterLidar({ anomalyid }: SelectedAnomProps) {
     );
 };
 
-export function CloudspottingOnMarsWithId({ anomalyid }: SelectedAnomProps) {
+export function CloudspottingOnMarsWithId() {
     const supabase = useSupabaseClient();
     const session = useSession();
 
     const [anomaly, setAnomaly] = useState<Anomaly | null>(null);
+    const [classificationId, setClassificationId] = useState<number | null>(null);
     const [imageUrl, setImageUrl] = useState<string | null>(null);
-    const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL || '';
-
     const [loading, setLoading] = useState<boolean>(true);
 
-    async function fetchAnomaly() {
+    const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL || '';
+
+    const fetchAnomaly = async () => {
         if (!session) {
             setLoading(false);
             return;
-        };
+        }
+
+        setLoading(true);
 
         try {
-            const {
-                data: anomalyData,
-                error,
-            } = await supabase
-                .from("anomalies")
-                .select("*")
-                .eq("anomalySet", 'cloudspottingOnMars')
-                .eq('id', anomalyid);
-
-            if (error) {
-                setAnomaly(null);
-                return;
-                setLoading(false);
+            // Step 1: Try to find a linked anomaly for this user in cloudspottingOnMars
+            const { data: linkedAnomalies, error: linkedError } = await supabase
+                .from("linked_anomalies")
+                .select(`
+                    id,
+                    anomaly_id,
+                    anomalies (
+                        id,
+                        anomalySet,
+                        content
+                    ),
+                    classification_id
+                `)
+                .eq("author", session.user.id)
+                .filter("anomalies.anomalySet", "eq", "cloudspottingOnMars")
+                .limit(1);
+
+            if (linkedError) throw linkedError;
+
+            let selectedAnomaly = null;
+            let selectedClassificationId: number | null = null;
+
+            if (
+                linkedAnomalies &&
+                linkedAnomalies.length > 0 &&
+                linkedAnomalies[0].anomalies
+            ) {
+                selectedAnomaly = Array.isArray(linkedAnomalies[0].anomalies)
+                    ? linkedAnomalies[0].anomalies[0]
+                    : linkedAnomalies[0].anomalies;
+                selectedClassificationId = linkedAnomalies[0].classification_id;
+                console.log("Using linked anomaly in cloudspottingOnMars:", selectedAnomaly.id);
             } else {
-                setAnomaly(anomalyData[0]);
-                setImageUrl(`${supabaseUrl}/storage/v1/object/public/clouds/${anomalyid}.png`);
-            };
+                // Step 2: Fallback to any linked anomaly with classification_id
+                const { data: fallbackLinked, error: fallbackLinkedError } = await supabase
+                    .from("linked_anomalies")
+                    .select(`
+                        id,
+                        anomaly_id,
+                        classification_id,
+                        anomalies (
+                            id,
+                            anomalySet,
+                            content
+                        )
+                    `)
+                    .eq("author", session.user.id)
+                    .not("classification_id", "is", null)
+                    .limit(1);
+
+                if (fallbackLinkedError) throw fallbackLinkedError;
+
+                if (
+                    fallbackLinked &&
+                    fallbackLinked.length > 0 &&
+                    fallbackLinked[0].anomalies
+                ) {
+                    selectedAnomaly = Array.isArray(fallbackLinked[0].anomalies)
+                        ? fallbackLinked[0].anomalies[0]
+                        : fallbackLinked[0].anomalies;
+                    selectedClassificationId = fallbackLinked[0].classification_id;
+                    console.log("Using fallback anomaly with classification_id:", selectedAnomaly.id);
+                } else {
+                    console.error("No suitable linked anomalies found");
+                    setAnomaly(null);
+                    return;
+                }
+            }
+
+            setAnomaly({
+                id: selectedAnomaly.id,
+                name: selectedAnomaly.content || "Unknown",
+                details: selectedAnomaly.anomalySet || undefined,
+            });
+            setClassificationId(selectedClassificationId);
+            setImageUrl(`${supabaseUrl}/storage/v1/object/public/clouds/${selectedAnomaly.id}.png`);
         } catch (error: any) {
-            console.error("Error fetching cloud: ", error.message);
+            console.error("Error fetching cloud:", error.message);
             setAnomaly(null);
         } finally {
             setLoading(false);
-        };
+        }
     };
 
     useEffect(() => {
@@ -206,73 +268,31 @@ export function CloudspottingOnMarsWithId({ anomalyid }: SelectedAnomProps) {
     }, [session, supabase]);
 
     if (loading) {
-        return (
-            <div>
-                <p>Loading...</p>
-            </div>
-        );
-    };
+        return <div><p>Loading...</p></div>;
+    }
 
-    if (!anomalyid) {
-        return (
-            <div>
-                Loading...
-            </div>
-        );
-    };
+    if (!anomaly) {
+        return <div><p>No anomaly found.</p></div>;
+    }
 
     return (
-        <div className="flex flex-col items-start gap-4 pb-4 relative w-full max-w-lg overflow-y-auto max-h-[90vh] rounded-lg">
-            <div className="p-4 rounded-md relative w-full">
-                {imageUrl && (
-                    <ImageAnnotator
-                        initialImageUrl={imageUrl}
-                        anomalyId={anomalyid.toString() || ''} 
-                        anomalyType="cloud"
-                        missionNumber={100000034}
-                        assetMentioned={imageUrl}
-                        structureItemId={3105}
-                        parentPlanetLocation={anomalyid?.toString() || ''}
-                        annotationType="CoM"
-                    />
-                )}
+        <div className="w-full h-screen flex flex-col items-center justify-center bg-gradient-to-br from-[#E5EEF4] to-[#D8E5EC] px-4 py-6 overflow-hidden">
+            <div className="w-full max-w-4xl h-full flex flex-col rounded-xl bg-white shadow-lg p-4 overflow-hidden">
+                <div className="flex-1 overflow-hidden rounded-md">
+                    {imageUrl && (
+                        <ImageAnnotator
+                            initialImageUrl={imageUrl}
+                            anomalyId={anomaly.id.toString()}
+                            anomalyType="cloud"
+                            assetMentioned={imageUrl}
+                            structureItemId={3105}
+                            parentClassificationId={classificationId ?? undefined}
+                            parentPlanetLocation={anomaly.id.toString()}
+                            annotationType="CoM"
+                        />
+                    )}
+                </div>
             </div>
         </div>
     );
-};
-
-export function CloudspottingWrapper() {
-    const [selectedAnomaly, setSelectedAnomaly] = useState<number | null>(null);
-
-    return (
-        <div className="space-y-8">
-            {!selectedAnomaly && (
-                <PreferredTerrestrialClassifications onSelectAnomaly={setSelectedAnomaly} />
-            )}
-            {selectedAnomaly && (
-                <StarterLidar anomalyid={selectedAnomaly} />
-            )}
-        </div>
-    );
-};
-
-interface CWWHProps {
-    anomalyId: number;
-};
-
-export function CloudspottingWrapperWithHardcode({
-    anomalyId
-}: CWWHProps) {
-    const [selectedAnomaly, setSelectedAnomaly] = useState<number | null>(null);
-
-    return (
-        <div className="space-y-8">
-            {!selectedAnomaly && (
-                <PreferredTerrestrialClassifications onSelectAnomaly={setSelectedAnomaly} />
-            )}
-            {selectedAnomaly && (
-                <StarterLidar anomalyid={anomalyId} />
-            )}
-        </div>
-    )
-}
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/components/Projects/Lidar/CloudspottingOnMarsShapes.tsx b/components/Projects/Lidar/CloudspottingOnMarsShapes.tsx
index 9b5ea7728..867bf6e34 100644
--- a/components/Projects/Lidar/CloudspottingOnMarsShapes.tsx
+++ b/components/Projects/Lidar/CloudspottingOnMarsShapes.tsx
@@ -2,136 +2,88 @@
 
 import React, { useState, useEffect } from "react";
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
-import { Anomaly } from "../Telescopes/Transiting";
-import PreferredTerrestrialClassifications from "@/components/Structures/Missions/PickPlanet";
 import ImageAnnotator from "../(classifications)/Annotating/Annotator";
 
-interface SelectedAnomProps {
-    anomalyid: number;
+type Anomaly = {
+  id: string;
+  name: string;
+  details?: string;
 };
 
-export function ShapesOnMarsWithId({ anomalyid }: SelectedAnomProps) {
-    const supabase = useSupabaseClient();
-    const session = useSession();
+export function StarterCoMShapes() {
+  const supabase = useSupabaseClient();
+  const session = useSession();
 
-    const [anomaly, setAnomaly] = useState<Anomaly | null>(null);
-    const [imageUrl, setImageUrl] = useState<string | null>(null);
-
-    const [loading, setLoading] = useState<boolean>(true);
+  const [anomaly, setAnomaly] = useState<Anomaly | null>(null);
+  const [imageUrl, setImageUrl] = useState<string | null>(null);
+  const [baseImageUrl, setBaseImageUrl] = useState<string | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
 
+  useEffect(() => {
     async function fetchAnomaly() {
-        if (!session) {
-            setLoading(false);
-            return;
-        };
-
-        const {
-            data: anomalyData,
-            error,
-        } = await supabase
-            .from("anomalies")
-            .select("*")
-            .eq("anomalySet", 'balloon-marsCloudShapes')
-            .eq('id', anomalyid);
-
-        if (error) {
-            setAnomaly(null);
-            return;
-            setLoading(false);
-        } else {
-            setAnomaly(anomalyData[0]);
+      if (!session) {
+        setLoading(false);
+        return;
+      }
+
+      try {
+        const { data: anomalyData, error: anomalyError } = await supabase
+          .from("anomalies")
+          .select("*")
+          .eq("anomalySet", "balloon-marsCloudShapes");
+
+        if (anomalyError) throw anomalyError;
+
+        if (!anomalyData || anomalyData.length === 0) {
+          setAnomaly(null);
+          setLoading(false);
+          return;
         }
-    };
-};
-
-export function StarterCoMShapes({ anomalyid }: SelectedAnomProps) {
-    const supabase = useSupabaseClient();
-    const session = useSession();
-
-    const [anomaly, setAnomaly] = useState<Anomaly | null>(null);
-    const [imageUrl, setImageUrl] = useState<string | null>(null);
-    const [baseImageUrl, setBaseImageUrl] = useState<string | null>(null);
-
-    const [loading, setLoading] = useState<boolean>(true);
-
-    useEffect(() => {
-        async function fetchAnomaly() {
-            if (!session) {
-                setLoading(false);
-                return;
-            };
-
-            try {
-                const { data: anomalyData, error: anomalyError } = await supabase
-                    .from("anomalies")
-                    .select("*")
-                    .eq("anomalySet", "balloon-marsCloudShapes")
 
-                if (anomalyError) throw anomalyError;
-
-                if (!anomalyData || anomalyData.length === 0) {
-                    setAnomaly(null);
-                    setLoading(false);
-                    return;
-                }
-
-                const randomAnomaly = anomalyData[Math.floor(Math.random() * anomalyData.length)] as Anomaly;
-                setAnomaly(randomAnomaly);
-
-                const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
-                if (supabaseUrl && randomAnomaly?.id) {
-                    setImageUrl(`${supabaseUrl}/storage/v1/object/public/telescope/balloon-marsCloudsShapes/${randomAnomaly.id}/${randomAnomaly.id}/${randomAnomaly.id}/1.png`);
-                    setBaseImageUrl(`${supabaseUrl}/storage/v1/object/public/telescope/balloon-marsCloudsShapes/${randomAnomaly.id}/${randomAnomaly.id}/${randomAnomaly.id}/2.png`);
-                } else {
-                    console.error('Supabase URL or Anomaly ID is missing!');
-                    setAnomaly(null);
-                }
-            } catch (error: any) {
-                console.error("Error fetching cloud shape: ", error.message);
-                setAnomaly(null);
-            } finally {
-                setLoading(false);
-            }
+        const randomAnomaly = anomalyData[Math.floor(Math.random() * anomalyData.length)] as Anomaly;
+        setAnomaly(randomAnomaly);
+
+        const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+        if (supabaseUrl && randomAnomaly?.id) {
+          setImageUrl(
+            `${supabaseUrl}/storage/v1/object/public/telescope/balloon-marsCloudsShapes/${randomAnomaly.id}/${randomAnomaly.id}/1.png`
+          );
+          setBaseImageUrl(
+            `${supabaseUrl}/storage/v1/object/public/telescope/balloon-marsCloudsShapes/${randomAnomaly.id}/${randomAnomaly.id}/2.png`
+          );
+        } else {
+          console.error("Supabase URL or Anomaly ID is missing!");
+          setAnomaly(null);
         }
-
-        fetchAnomaly();
-    }, [session, anomalyid]);
-
-    if (loading) return <div><p>Loading...</p></div>;
-    if (!anomaly) return <div><p>No clouds found today</p></div>;
-
-    return (
-        <div className="flex flex-col items-start gap-4 pb-4 relative w-full max-w-lg overflow-y-auto max-h-[90vh]">
-            <div className="p-4 rounded-md relative w-full"> {/* Add base image with grid (1*2) format */}
-                {imageUrl && (
-                    <ImageAnnotator
-                        initialImageUrl={imageUrl}
-                        anomalyId={anomaly.id.toString()}
-                        anomalyType='balloon-marsCloudShapes'
-                        missionNumber={2000000555}
-                        assetMentioned={imageUrl}
-                        structureItemId={3105}
-                        parentClassificationId={anomalyid}
-                        parentPlanetLocation={anomalyid?.toString() || ''}
-                        annotationType="CoMS"
-                    />
-                )}
-            </div>
-        </div>
-    );
-};
-
-export function CloudspottingShapesWrapper() {
-    const [selectedAnomaly, setSelectedAnomaly] = useState<number | null>(null);
-
-    return (
-        <div className="space-y-8">
-            {!selectedAnomaly && (
-                <PreferredTerrestrialClassifications onSelectAnomaly={setSelectedAnomaly} />
-            )}
-            {selectedAnomaly && (
-                <StarterCoMShapes anomalyid={selectedAnomaly} />
-            )}
-        </div>
-    );
+      } catch (error: any) {
+        console.error("Error fetching cloud shape:", error.message);
+        setAnomaly(null);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchAnomaly();
+  }, [session]);
+
+  if (loading) return <div><p>Loading...</p></div>;
+  if (!anomaly || !imageUrl) return <div><p>No clouds found today.</p></div>;
+
+  return (
+    <div className="flex flex-col items-start gap-4 pb-4 relative w-full max-w-lg overflow-y-auto max-h-[90vh]">
+      <div className="p-4 rounded-md relative w-full">
+        <ImageAnnotator
+          initialImageUrl={imageUrl}
+          anomalyId={anomaly.id.toString()}
+          anomalyType="balloon-marsCloudShapes"
+          missionNumber={2000000555}
+          assetMentioned={imageUrl}
+          structureItemId={3105}
+          parentClassificationId={parseInt(anomaly.id)}
+          parentPlanetLocation={anomaly.id.toString()}
+          annotationType="CoMS"
+        />
+      </div>
+    </div>
+  );
 };
\ No newline at end of file
diff --git a/components/Projects/Lidar/EarthCloudsRead.tsx b/components/Projects/Lidar/EarthCloudsRead.tsx
index a9560a846..22124722e 100644
--- a/components/Projects/Lidar/EarthCloudsRead.tsx
+++ b/components/Projects/Lidar/EarthCloudsRead.tsx
@@ -4,7 +4,6 @@ import React, { useEffect, useState } from "react";
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
 import { useActivePlanet } from "@/context/ActivePlanet";
 import ClassificationForm from "@/components/Projects/(classifications)/PostForm";
-import { Anomaly } from "../Telescopes/Transiting";
 
 export function EarthCloudRead() {
     const supabase = useSupabaseClient();
diff --git a/components/Projects/Lidar/JovianVortexHunter.tsx b/components/Projects/Lidar/JovianVortexHunter.tsx
index 1a30d2975..2b7988b39 100644
--- a/components/Projects/Lidar/JovianVortexHunter.tsx
+++ b/components/Projects/Lidar/JovianVortexHunter.tsx
@@ -4,13 +4,20 @@ import React, { useState, useEffect } from "react";
 import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import ClassificationForm from "../(classifications)/PostForm";
 
-import { Anomaly } from "../Telescopes/Transiting";
 import { useActivePlanet } from "@/context/ActivePlanet";
-import { PreferredGaseousClassifications } from "@/components/Structures/Missions/PickPlanet";
 import ImageAnnotator from "../(classifications)/Annotating/Annotator";
 import { Button } from "@/components/ui/button";
 
 const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL; 
+type Anomaly = {
+  id: number;
+  anomalySet: string;
+  content?: any;
+};
+
+interface Props {
+    anomalyid: number;
+};
 
 export function StarterJovianVortexHunter({
     anomalyid
@@ -140,181 +147,128 @@ export function StarterJovianVortexHunter({
     );
 };
 
-interface Props {
-    anomalyid: number;
-};
-
-export function LidarJVHSatelliteWithId({
-    anomalyid
-}: Props) {
+export function LidarJVHSatelliteWithId() {
     const supabase = useSupabaseClient();
     const session = useSession();
 
     const [anomaly, setAnomaly] = useState<Anomaly | null>(null);
     const [imageUrl, setImageUrl] = useState<string | null>(null);
-
+    const [parentClassificationId, setParentClassificationId] = useState<number | null>(null);
     const [loading, setLoading] = useState<boolean>(true);
 
+    const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL || '';
+
     async function fetchAnomaly() {
         if (!session) {
             setLoading(false);
             return;
-        };
+        }
+
+        setLoading(true);
 
         try {
-            const {
-                data: anomalyData,
-                error: anomalyError
-            } = await supabase
-                .from('anomalies')
-                .select('*')
-                .eq('anomalySet', 'lidar-jovianVortexHunter')
-                .eq('id', anomalyid);
-
-            if (anomalyError) {
-                console.error(anomalyError);
-                setLoading(false);
-                return;
+            // Try exact match first
+            const { data: linkedAnomalies, error: linkedError } = await supabase
+                .from("linked_anomalies")
+                .select(`
+                    id,
+                    anomaly_id,
+                    classification_id,
+                    anomalies (
+                        id,
+                        anomalySet,
+                        content
+                    )
+                `)
+                .eq("author", session.user.id)
+                .filter("anomalies.anomalySet", "eq", "lidar-jovianVortexHunter")
+                .limit(1);
+
+            if (linkedError) throw linkedError;
+
+            let selectedAnomaly: Anomaly | null = null;
+            let classificationId: number | null = null;
+
+            if (linkedAnomalies && linkedAnomalies.length > 0 && linkedAnomalies[0].anomalies) {
+                selectedAnomaly = linkedAnomalies[0].anomalies as unknown as Anomaly;
+                classificationId = linkedAnomalies[0].classification_id;
+                console.log("Using previously linked JVH anomaly:", selectedAnomaly.id);
             } else {
-                setAnomaly(anomalyData[0]);
-                setImageUrl(`${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/telescope/lidar-jovianVortexHunter/${anomalyid}.png`);
-            };
-        } catch (error: any) {
-            console.error(error);
-            setLoading(false);
-            return;
-        } finally {
-            setLoading(false);
-        };
-    };
-
-    useEffect(() => {
-        fetchAnomaly();
-    }, [session]);
+                // Try fallback: first linked anomaly with a classification_id
+                const { data: fallbackLinked, error: fallbackLinkedError } = await supabase
+                    .from("linked_anomalies")
+                    .select(`
+                        id,
+                        anomaly_id,
+                        classification_id,
+                        anomalies (
+                            id,
+                            anomalySet,
+                            content
+                        )
+                    `)
+                    .eq("author", session.user.id)
+                    .not("classification_id", "is", null)
+                    .limit(1);
+
+                if (fallbackLinkedError) throw fallbackLinkedError;
+
+                if (fallbackLinked && fallbackLinked.length > 0 && fallbackLinked[0].anomalies) {
+                    selectedAnomaly = fallbackLinked[0].anomalies as unknown as Anomaly;
+                    classificationId = fallbackLinked[0].classification_id;
+                    console.log("Using fallback linked JVH anomaly with classification_id:", selectedAnomaly.id);
+                } else {
+                    // Final fallback: random anomaly from the anomalySet
+                    const { data: anomalies, error: fallbackError } = await supabase
+                        .from("anomalies")
+                        .select("*")
+                        .eq("anomalySet", "lidar-jovianVortexHunter");
 
-    if (loading) {
-        return (
-            <p>
-                Loading...
-            </p>
-        );
-    };
+                    if (fallbackError) throw fallbackError;
 
-    return (
-        <div className="flex flex-col items-start gap-4 pb-4 relative w-full max-w-lg overflow-y-auto max-h-[90vh] rounded-lg"> 
-            {imageUrl && (
-                <ImageAnnotator
-                    anomalyId={anomalyid.toString()}
-                    anomalyType="lidar-jovianVortexHunter"
-                    missionNumber={200000072}
-                    assetMentioned={imageUrl}
-                    structureItemId={3105}
-                    initialImageUrl={imageUrl}
-                    annotationType="JVH"
-                />
-            )}
-        </div>
-    );
-};
+                    if (!anomalies || anomalies.length === 0) {
+                        console.error("No JVH anomalies available");
+                        setAnomaly(null);
+                        return;
+                    }
 
-export function LidarJVHSatellite({ anomalyid }: Props) {
-    const supabase = useSupabaseClient();
-    const session = useSession();
+                    const randomIndex = Math.floor(Math.random() * anomalies.length);
+                    selectedAnomaly = anomalies[randomIndex] as Anomaly;
+                    classificationId = null;
+                    console.log("Using fallback JVH anomaly:", selectedAnomaly.id);
+                }
+            }
 
-    const [anomaly, setAnomaly] = useState<Anomaly | null>(null);
-    const [imageUrl, setImageUrl] = useState<string | null>(null);
+            if (!selectedAnomaly) {
+                throw new Error("Anomaly selection failed");
+            }
 
-    const [loading, setLoading] = useState<boolean>(true);
-    const [showTutorial, setShowTutorial] = useState(false);
+            setAnomaly(selectedAnomaly);
+            setParentClassificationId(classificationId);
+            setImageUrl(`${supabaseUrl}/storage/v1/object/public/telescope/lidar-jovianVortexHunter/${selectedAnomaly.id}.png`);
+        } catch (error: any) {
+            console.error("Error fetching JVH anomaly:", error.message);
+            setAnomaly(null);
+        } finally {
+            setLoading(false);
+        }
+    }
 
     useEffect(() => {
-        async function fetchAnomaly() {
-            if (!session) {
-                setLoading(false);
-                return;
-            };
-
-            try {
-                const { data: anomalyData, error: anomalyError } = await supabase
-                    .from("anomalies")
-                    .select("*")
-                    .eq("anomalySet", "lidar-jovianVortexHunter");
-
-                if (anomalyError) {
-                    throw anomalyError;
-                };
-
-                const randomAnomaly = anomalyData[Math.floor(Math.random() * anomalyData.length)] as Anomaly;
-                setAnomaly(randomAnomaly);
-                setImageUrl(`${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/telescope/lidar-jovianVortexHunter/${randomAnomaly.id}.png`);
-            } catch (error: any) {
-                console.error("Error fetching anomaly", error.message);
-                setAnomaly(null);
-            } finally {
-                setLoading(false);
-            };
-        };
-
-        if (session) {
-            fetchAnomaly();
-        };
+        fetchAnomaly();
     }, [session]);
 
-    const handleShowTutorial = () => {
-        setShowTutorial(true);
-    };
-
-        const fetchAnomaly = async () => {
-            if (!session) {
-                console.error("No session found");
-                setLoading(false);
-                return;
-            };
-        
-            setLoading(true);
-        
-            try {
-                const { data: anomalies, error } = await supabase
-                    .from('anomalies')
-                    .select('*')
-                    .eq('anomalySet', 'lidar-jovianVortexHunter');
-        
-                if (error) throw error;
-        
-                if (!anomalies || anomalies.length === 0) {
-                    console.error("No anomalies found for the given type");
-                    setAnomaly(null);
-                } else {
-                    const randomIndex = Math.floor(Math.random() * anomalies.length);
-                    const anomaly = anomalies[randomIndex];
-                    setAnomaly(anomaly);
-                    setImageUrl(`${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/telescope/lidar-jovianVortexHunter/${anomaly.id}.png`);
-                }
-            } catch (error) {
-                console.error("Error fetching anomaly", error);
-                setAnomaly(null);
-            } finally {
-                setLoading(false);
-            };    
-    };   
-
     if (loading) {
-        return (
-            <div><p>Loading...</p></div>
-        );
-    };
+        return <p>Loading...</p>;
+    }
 
-    if (!anomaly) {
-        return (
-            <div>
-                <p>No anomaly found.</p>
-            </div>
-        );
-    };
+    if (!anomaly || !imageUrl) {
+        return <p>No anomaly found.</p>;
+    }
 
     return (
-        <div className="flex flex-col items-start gap-4 pb-4 relative w-full max-w-lg overflow-y-auto max-h-[90vh] rounded-lg"> 
-            {imageUrl && (
+        <div className="w-full h-screen flex flex-col items-center justify-center bg-gradient-to-br from-[#E5EEF4] to-[#D8E5EC] px-4 py-6 overflow-hidden">
+            <div className="w-full max-w-4xl h-full flex flex-col rounded-xl bg-white shadow-lg p-4 overflow-hidden">
                 <ImageAnnotator
                     anomalyId={anomaly.id.toString()}
                     anomalyType="lidar-jovianVortexHunter"
@@ -323,35 +277,9 @@ export function LidarJVHSatellite({ anomalyid }: Props) {
                     structureItemId={3105}
                     initialImageUrl={imageUrl}
                     annotationType="JVH"
-                    parentPlanetLocation={anomalyid.toString()} 
+                    parentClassificationId={parentClassificationId ?? undefined}
                 />
-            )}
-            {!showTutorial && (
-                <Button
-                    className="mb-4"
-                    onClick={handleShowTutorial}
-                >
-                    Show Tutorial
-                </Button>
-            )}
-            {showTutorial && (
-                <StarterJovianVortexHunter anomalyid={anomalyid} />
-            )}
+            </div>
         </div>
     );
-};
-
-export function JVHWrapper() {
-  const [selectedAnomaly, setSelectedAnomaly] = useState<number | null>(null);
-  const [part, setPart] = useState(1);
-
-  return (
-    <div className="space-y-8">
-      {!selectedAnomaly && (
-        <PreferredGaseousClassifications onSelectAnomaly={setSelectedAnomaly} />
-      )}
-      {selectedAnomaly && <LidarJVHSatellite anomalyid={selectedAnomaly} />}
-      {/* <p>{selectedAnomaly}</p> */}
-    </div>
-  );
 };
\ No newline at end of file
diff --git a/components/Projects/Satellite/PlanetFour.tsx b/components/Projects/Satellite/PlanetFour.tsx
index fe9ca6d5a..fbee45d7c 100644
--- a/components/Projects/Satellite/PlanetFour.tsx
+++ b/components/Projects/Satellite/PlanetFour.tsx
@@ -5,18 +5,23 @@ import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import { useActivePlanet } from "@/context/ActivePlanet";
 import ClassificationForm from "../(classifications)/PostForm";
 
-import { Anomaly } from "../Zoodex/ClassifyOthersAnimals";
 // import ImageAnnotation from "../(classifications)/Annotation";
 import * as markerjs2 from "markerjs2";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import ImageAnnotator from "../(classifications)/Annotating/Annotator";
-import PreferredTerrestrialClassifications from "@/components/Structures/Missions/PickPlanet";
+import AI4M from "@/components/Structures/Missions/Astronomers/SatellitePhotos/AI4M/AIForMars";
 
 interface Props {
     anomalyid: number | bigint;
 }; 
 
+interface Anomaly {
+  id: number;
+  content: string | null;
+  anomalySet: string | null;
+};
+
 export function StarterPlanetFour({
     anomalyid
 }: Props) {
@@ -138,21 +143,15 @@ export function StarterPlanetFour({
     );
 };
 
-interface SelectedAnomProps {
-    anomalyid?: number;
-}; 
-
-export function PlanetFourProjectWithAnomalyId({
-    anomalyid
-}: SelectedAnomProps) {
+export function PlanetFourProject() {
     const supabase = useSupabaseClient();
     const session = useSession();
 
-    const [anomaly, setAnomaly] = useState<Anomaly | null>(null);    
-    const [imageUrl, setImageUrl] = useState<string | null>(null);    
-    const [showTutorial, setShowTutorial] = useState(false);
-    
+    const [anomaly, setAnomaly] = useState<Anomaly | null>(null);
+    const [imageUrl, setImageUrl] = useState<string | null>(null);
+    const [parentClassificationId, setParentClassificationId] = useState<number | null>(null);
     const [loading, setLoading] = useState(true);
+    const [showTutorial, setShowTutorial] = useState(false);
 
     const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
 
@@ -162,138 +161,101 @@ export function PlanetFourProjectWithAnomalyId({
 
     const fetchAnomaly = async () => {
         if (!session) {
+            console.error("No session found");
             setLoading(false);
             return;
-        };
+        }
+
+        setLoading(true);
 
         try {
-            const {
-                data: anomalyfromid,
-                error,
-            } = await supabase
-                .from("anomalies")
-                .select("*")
-                .eq('anomalySet', 'satellite-planetFour')
-                .eq('id', anomalyid);
-
-            if (error) {
-                throw error;
-            };
-
-            if (!anomalyfromid) {
-                console.error("No anomaly with that id found");
+            // Try to fetch a previously linked anomaly by this user
+            const { data: linkedAnomalies, error: linkedError } = await supabase
+                .from("linked_anomalies")
+                .select(`
+                    id,
+                    anomaly_id,
+                    classification_id,
+                    anomalies (
+                        id,
+                        anomalySet,
+                        content
+                    )
+                `)
+                .eq("author", session.user.id)
+                .filter("anomalies.anomalySet", "eq", "satellite-planetFour")
+                .limit(1);
+
+            if (linkedError) throw linkedError;
+
+            let selectedAnomaly = null;
+            let classificationId: number | null = null;
+
+            if (linkedAnomalies && linkedAnomalies.length > 0 && linkedAnomalies[0].anomalies) {
+                selectedAnomaly = linkedAnomalies[0].anomalies;
+                classificationId = linkedAnomalies[0].classification_id;
+                console.log("Using previously linked anomaly:", selectedAnomaly[0]?.id);
             } else {
-                setAnomaly(anomalyfromid[0]);
-                setImageUrl(`${supabaseUrl}/storage/v1/objects/public/telescope/satellite-planetFour/${anomalyid}.jpeg`);
-            };
-        } catch (error: any) {
-            console.error('Error fetching anomaly: ', error);
-        } finally {
-            setLoading(false);
-        };
-    };
-
-    useEffect(() => {
-        fetchAnomaly();
-    }, [session]);
-
-    if (loading) {
-        return (
-            <p>
-                Loading...
-            </p>
-        );
-    };
-
-    if (!anomaly) {
-        return (
-            <p>No anomaly with that id found</p>
-        );
-    };
-
-    return (
-        <div className="flex flex-col items-start gap-4 pb-4 relative w-full max-w-lg overflow-y-auto max-h-[90vh] rounded-lg">
-            {!showTutorial ? (
-                <>
-                    <Button
-                        className="mb-4"
-                        onClick={handleShowTutorial}
-                    >
-                        Show Tutorial
-                    </Button>
-                    {imageUrl && (
-                        <ImageAnnotator
-                            anomalyId={anomaly.id.toString()}
-                            anomalyType="satellite-planetFour"
-                            missionNumber={200000052}
-                            assetMentioned={imageUrl}
-                            structureItemId={3103}
-                            annotationType="P4"
-                            initialImageUrl={imageUrl}
-                            parentPlanetLocation={anomalyid?.toString()}
-                        />
-                    )}
-                    {imageUrl}
-                </>
-            ) : (
-                <div>
-                    <StarterPlanetFour anomalyid={anomaly.id} />
-                </div>
-            )}
-            <p>Selected Anomaly ID: {anomalyid}</p>
-        </div>
-    );
-};
-
-export function PlanetFourProject({ anomalyid }: SelectedAnomProps) { 
-    const supabase = useSupabaseClient();
-    const session = useSession();
-
-    const [anomaly, setAnomaly] = useState<Anomaly | null>(null);
-    const [imageUrl, setImageUrl] = useState<string | null>(null);
-    const [loading, setLoading] = useState(true);
-    const [showTutorial, setShowTutorial] = useState(false);
-    const [hasMission20000005, setHasMission20000005] = useState(false);
+                // Fallback: Try to find any linked anomaly with a classification_id
+                const { data: fallbackLinked, error: fallbackLinkedError } = await supabase
+                    .from("linked_anomalies")
+                    .select(`
+                        id,
+                        anomaly_id,
+                        classification_id,
+                        anomalies (
+                            id,
+                            anomalySet,
+                            content
+                        )
+                    `)
+                    .eq("author", session.user.id)
+                    .not("classification_id", "is", null)
+                    .limit(1);
+
+                if (fallbackLinkedError) throw fallbackLinkedError;
+
+                if (fallbackLinked && fallbackLinked.length > 0 && fallbackLinked[0].anomalies) {
+                    selectedAnomaly = fallbackLinked[0].anomalies;
+                    classificationId = fallbackLinked[0].classification_id;
+                    console.log("Using fallback linked anomaly with classification_id:", selectedAnomaly[0]?.id);
+                } else {
+                    // Final fallback: Pick a random anomaly from the anomaly set
+                    const { data: anomalies, error: fallbackError } = await supabase
+                        .from("anomalies")
+                        .select("*")
+                        .eq("anomalySet", "satellite-planetFour");
 
-    const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+                    if (fallbackError) throw fallbackError;
 
-    const handleShowTutorial = () => {
-        setShowTutorial(true);
-    };
+                    if (!anomalies || anomalies.length === 0) {
+                        console.error("No anomalies found for the given set");
+                        setAnomaly(null);
+                        return;
+                    }
 
-        const fetchAnomaly = async () => {
-            if (!session) {
-                console.error("No session found");
-                setLoading(false);
-                return;
-            };
-        
-            setLoading(true);
-        
-            try {
-                const { data: anomalies, error } = await supabase
-                    .from('anomalies')
-                    .select('*')
-                    .eq('anomalySet', 'satellite-planetFour');
-        
-                if (error) throw error;
-        
-                if (!anomalies || anomalies.length === 0) {
-                    console.error("No anomalies found for the given type");
-                    setAnomaly(null);
-                } else {
                     const randomIndex = Math.floor(Math.random() * anomalies.length);
-                    const anomaly = anomalies[randomIndex];
-                    setAnomaly(anomaly);
-                    setImageUrl(`${supabaseUrl}/storage/v1/object/public/telescope/satellite-planetFour/${anomaly.id}.jpeg`);
+                    selectedAnomaly = anomalies[randomIndex];
+                    classificationId = null;
+                    console.log("Using random fallback anomaly:", selectedAnomaly.id);
                 }
-            } catch (error) {
-                console.error("Error fetching anomaly: ", error);
-                setAnomaly(null);
-            } finally {
-                setLoading(false);
-            }    
-    };    
+            }
+
+            // Some queries return `anomalies` as an array of one object, some as a single object
+            const finalAnomaly = Array.isArray(selectedAnomaly)
+                ? selectedAnomaly[0]
+                : selectedAnomaly;
+
+            setAnomaly(finalAnomaly);
+            setParentClassificationId(classificationId);
+            setImageUrl(`${supabaseUrl}/storage/v1/object/public/telescope/satellite-planetFour/${finalAnomaly.id}.jpeg`);
+        } catch (error) {
+            console.error("Error fetching anomaly:", error);
+            setAnomaly(null);
+        } finally {
+            setLoading(false);
+        }
+    };
 
     useEffect(() => {
         fetchAnomaly();
@@ -301,21 +263,18 @@ export function PlanetFourProject({ anomalyid }: SelectedAnomProps) {
 
     if (loading) {
         return <div><p>Loading...</p></div>;
-    };
+    }
 
     if (!anomaly) {
-        return <div><p>No anomaly found with ID {anomalyid}</p></div>;
-    };
+        return <div><p>No anomaly available.</p></div>;
+    }
 
     return (
-        <div className="flex flex-col items-start gap-4 pb-4 relative w-full max-w-lg overflow-y-auto max-h-[90vh] rounded-lg">
-            {!showTutorial ? (
-                <>
-                    <Button
-                        className="mb-4"
-                        onClick={handleShowTutorial}
-                    >
-                        Show Tutorial
+        <div className="w-full h-screen flex flex-col items-center justify-center bg-gradient-to-br from-[#E5EEF4] to-[#D8E5EC] px-4 py-6 overflow-hidden">
+            <div className="w-full max-w-4xl h-full flex flex-col rounded-xl bg-white shadow-lg p-4 overflow-hidden">
+                <div className="flex-1 overflow-hidden rounded-md">
+                    <Button variant="outline" onClick={handleShowTutorial}>
+                        Want a walkthrough? Start the tutorial
                     </Button>
                     {imageUrl && (
                         <ImageAnnotator
@@ -326,32 +285,17 @@ export function PlanetFourProject({ anomalyid }: SelectedAnomProps) {
                             structureItemId={3103}
                             annotationType="P4"
                             initialImageUrl={imageUrl}
-                            parentPlanetLocation={anomalyid?.toString()}
+                            parentPlanetLocation={anomaly.id.toString()}
+                            parentClassificationId={parentClassificationId ?? undefined}
                         />
                     )}
-                    {imageUrl}
-                </>
-            ) : (
-                <div>
-                    <StarterPlanetFour anomalyid={anomaly.id} />
                 </div>
-            )}
-            <p>Selected Anomaly ID: {anomalyid}</p>
-        </div>
-    );
-};    
-
-export function P4Wrapper () {
-    const [selectedAnomaly, setSelectedAnomaly] = useState<number | null>(null);
-
-    return (
-        <div className="space-y-8">
-            {!selectedAnomaly && (
-                <PreferredTerrestrialClassifications onSelectAnomaly={setSelectedAnomaly} />
-            )}
-            {selectedAnomaly && (
-                <PlanetFourProject anomalyid={selectedAnomaly} />
-            )}
+                {showTutorial && (
+                    <div>
+                        <StarterPlanetFour anomalyid={anomaly.id} />
+                    </div>
+                )}
+            </div>
         </div>
     );
-};
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/components/Projects/Telescopes/AreWeAlone.tsx b/components/Projects/Telescopes/AreWeAlone.tsx
index 9bb942b1b..dd3dabd0e 100644
--- a/components/Projects/Telescopes/AreWeAlone.tsx
+++ b/components/Projects/Telescopes/AreWeAlone.tsx
@@ -4,7 +4,12 @@ import React, { useEffect, useState } from "react";
 import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import ClassificationForm from "../(classifications)/PostForm";
 
-import { Anomaly } from "./Transiting";
+type Anomaly = {
+  id: string;
+  name: string;
+  details?: string;
+};
+
 import { useActivePlanet } from "@/context/ActivePlanet";
 
 import { Props } from "@/types/Anomalies";
diff --git a/components/Projects/Telescopes/DailyMinorPlanet.tsx b/components/Projects/Telescopes/DailyMinorPlanet.tsx
index 9e6b3503c..6b8b97071 100644
--- a/components/Projects/Telescopes/DailyMinorPlanet.tsx
+++ b/components/Projects/Telescopes/DailyMinorPlanet.tsx
@@ -3,6 +3,7 @@
 import React, { useEffect, useState } from "react";
 import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import ClassificationForm from "../(classifications)/PostForm";
+import { useRouter } from "next/navigation";
 
 import { Button } from "@/components/ui/button";
 interface Props {
@@ -154,44 +155,113 @@ type Anomaly = {
   details?: string;
 };
 
-interface DailyMinorPlanetProps {
-  anomalyid: string;
-}
-
-export function DailyMinorPlanetWithId({ anomalyid }: DailyMinorPlanetProps) {
+export function DailyMinorPlanetWithId() {
   const supabase = useSupabaseClient();
   const session = useSession();
+  const router = useRouter();
 
   const [anomaly, setAnomaly] = useState<Anomaly | null>(null);
   const [imageUrls, setImageUrls] = useState<string[]>([]);
   const [currentImageIndex, setCurrentImageIndex] = useState<number>(0);
-
-  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL || '';
   const [loading, setLoading] = useState<boolean>(true);
+  const [showTutorial, setShowTutorial] = useState(false);
+
+  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL || "";
 
   const fetchAnomaly = async () => {
+    if (!session) {
+      console.log("No session found");
+      setLoading(false);
+      return;
+    }
+
+    try {
+      console.log("Fetching anomalies for user:", session.user.id);
+      const { data: linkedAnomalies, error: linkedError } = await supabase
+        .from("linked_anomalies")
+        .select(`
+          id,
+          anomaly_id,
+          anomalies!inner (
+            id,
+            name,
+            content,
+            ticId,
+            anomalytype,
+            type,
+            radius,
+            mass,
+            density,
+            gravity,
+            temperatureEq,
+            temperature,
+            smaxis,
+            orbital_period,
+            classification_status,
+            avatar_url,
+            created_at,
+            deepnote,
+            lightkurve,
+            configuration,
+            parentAnomaly,
+            anomalySet
+          )
+        `)
+        .eq("author", session.user.id)
+        .eq("anomalies.anomalySet", "telescope-minorPlanet");
+
+      if (linkedError) throw linkedError;
+
+      const validLinked = (linkedAnomalies ?? []).filter(
+        (entry: any) =>
+          !!entry.anomalies && entry.anomalies.anomalySet === "telescope-minorPlanet"
+      );
+
+      if (validLinked.length > 0) {
+        const shuffled = [...validLinked].sort(() => 0.5 - Math.random());
+        const randomAnomaly = shuffled[0].anomalies as unknown as Anomaly;
+        setAnomaly(randomAnomaly);
+
+        const images = [1, 2, 3, 4].map(
+          (i) =>
+            `${supabaseUrl}/storage/v1/object/public/telescope/telescope-dailyMinorPlanet/${randomAnomaly.id}/${i}.png`
+        );
+        setImageUrls(images);
+      } else {
+        await fetchFallbackAnomaly();
+      }
+    } catch (error: any) {
+      console.error("Error fetching linked anomalies:", error.message);
+      await fetchFallbackAnomaly();
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchFallbackAnomaly = async () => {
     try {
-      const { data: anomalyData, error: anomalyError } = await supabase
-        .from('anomalies')
-        .select('*')
-        .eq('anomalySet', 'telescope-minorPlanet')
-        .eq('id', anomalyid);
+      const { data, error } = await supabase
+        .from("anomalies")
+        .select("*")
+        .eq("anomalySet", "telescope-minorPlanet");
 
-      if (anomalyError) throw anomalyError;
+      if (error) throw error;
+      if (!data || data.length === 0) return;
 
-      setAnomaly(anomalyData[0]);
+      const shuffled = [...data].sort(() => 0.5 - Math.random());
+      const randomAnomaly = shuffled[0] as Anomaly;
 
-      const images = [1, 2, 3, 4].map(
+      setAnomaly(randomAnomaly);
+
+      const fallbackImages = [1, 2, 3, 4].map(
         (i) =>
-          `${supabaseUrl}/storage/v1/object/public/telescope/telescope-dailyMinorPlanet/${anomalyid}/${i}.png`
+          `${supabaseUrl}/storage/v1/object/public/telescope/telescope-dailyMinorPlanet/${randomAnomaly.id}/${i}.png`
       );
 
-      setImageUrls(images);
-    } catch (error: any) {
-      console.error('Error fetching anomaly:', error.message);
+      setImageUrls(fallbackImages);
+    } catch (err: any) {
+      console.error("Fallback anomaly fetch error:", err.message);
       setAnomaly(null);
-    } finally {
-      setLoading(false);
     }
   };
 
@@ -212,8 +282,7 @@ export function DailyMinorPlanetWithId({ anomalyid }: DailyMinorPlanetProps) {
   };
 
   if (loading) return <p>Loading...</p>;
-
-  if (!anomaly) return <p>No anomaly found.</p>;
+  if (!anomaly) return <p>No anomalies found for Daily Minor Planet project.</p>;
 
   return (
     <div className="flex flex-col items-start gap-4 pb-4 relative w-full max-w-lg overflow-y-auto max-h-[90vh] rounded-lg">
@@ -225,20 +294,32 @@ export function DailyMinorPlanetWithId({ anomalyid }: DailyMinorPlanetProps) {
               alt={`Anomaly ${currentImageIndex + 1}`}
               className="w-full h-full object-contain"
             />
-            <button onClick={handlePrevious} className="absolute left-0 top-1/2 -translate-y-1/2 p-2 bg-gray-600 rounded-full">
+            <button
+              onClick={handlePrevious}
+              className="absolute left-0 top-1/2 -translate-y-1/2 p-2 bg-gray-600 rounded-full"
+            >
               ❮
             </button>
-            <button onClick={handleNext} className="absolute right-0 top-1/2 -translate-y-1/2 p-2 bg-gray-600 rounded-full">
+            <button
+              onClick={handleNext}
+              className="absolute right-0 top-1/2 -translate-y-1/2 p-2 bg-gray-600 rounded-full"
+            >
               ❯
             </button>
             <div className="flex justify-center mt-2">
               {imageUrls.map((_, index) => (
-                <span key={index} className={`h-2 w-2 rounded-full mx-1 ${index === currentImageIndex ? 'bg-blue-500' : 'bg-gray-300'}`} />
+                <span
+                  key={index}
+                  className={`h-2 w-2 rounded-full mx-1 ${
+                    index === currentImageIndex ? "bg-blue-500" : "bg-gray-300"
+                  }`}
+                />
               ))}
             </div>
           </div>
         )}
       </div>
+
       {imageUrls.length > 0 && (
         <div className="flex w-full gap-2 mt-4">
           {imageUrls.map((url, index) => (
@@ -247,162 +328,29 @@ export function DailyMinorPlanetWithId({ anomalyid }: DailyMinorPlanetProps) {
               src={url}
               alt={`Thumbnail ${index + 1}`}
               onClick={() => setCurrentImageIndex(index)}
-              className={`flex-1 h-16 object-cover cursor-pointer border-2 ${index === currentImageIndex ? 'border-blue-500' : 'border-gray-300'}`}
+              className={`flex-1 h-16 object-cover cursor-pointer border-2 ${
+                index === currentImageIndex ? "border-blue-500" : "border-gray-300"
+              }`}
             />
           ))}
         </div>
       )}
 
+      <Button className="mt-4" onClick={() => setShowTutorial(true)}>
+        Show Tutorial
+      </Button>
+
       {imageUrls.length > 0 && (
         <ClassificationForm
-          anomalyId={anomaly?.id || '90670192'}
+          anomalyId={anomaly?.id.toString() || "90670192"}
           anomalyType="telescope-minorPlanet"
           missionNumber={20000003}
           assetMentioned={imageUrls}
           structureItemId={3103}
         />
       )}
+
+      {/* Optionally show modal here if showTutorial is true */}
     </div>
   );
-};
-
-
-export function DailyMinorPlanet() {
-    const supabase = useSupabaseClient();
-    const session = useSession();
-
-    const [anomaly, setAnomaly] = useState<Anomaly | null>(null);
-    const [imageUrls, setImageUrls] = useState<string[]>([]);
-    const [currentImageIndex, setCurrentImageIndex] = useState<number>(0);
-    const [loading, setLoading] = useState<boolean>(true);
-    const [showTutorial, setShowTutorial] = useState(false);
-
-    useEffect(() => {
-        const fetchAnomaly = async () => {
-            try {
-                const { data: anomalyData, error: anomalyError } = await supabase
-                    .from("anomalies")
-                    .select("*")
-                    .eq("anomalySet", "telescope-minorPlanet");
-
-                if (anomalyError) {
-                    throw anomalyError;
-                }
-
-                if (!anomalyData || anomalyData.length === 0) {
-                    console.warn("No anomalies found for telescope-minorPlanet");
-                    setAnomaly(null);
-                    return;
-                }
-
-                const randomAnomaly = anomalyData[Math.floor(Math.random() * anomalyData.length)] as Anomaly;
-                setAnomaly(randomAnomaly);
-
-                const imageUrls = [
-                    `${supabaseUrl}/storage/v1/object/public/telescope/telescope-dailyMinorPlanet/${randomAnomaly.id}/1.png`,
-                    `${supabaseUrl}/storage/v1/object/public/telescope/telescope-dailyMinorPlanet/${randomAnomaly.id}/2.png`,
-                    `${supabaseUrl}/storage/v1/object/public/telescope/telescope-dailyMinorPlanet/${randomAnomaly.id}/3.png`,
-                    `${supabaseUrl}/storage/v1/object/public/telescope/telescope-dailyMinorPlanet/${randomAnomaly.id}/4.png`
-                ];
-
-                setImageUrls(imageUrls);
-
-                console.log("Anomaly ID:", randomAnomaly.id);
-                console.log("Image URLs:", imageUrls);
-            } catch (error: any) {
-                console.error("Error fetching anomaly", error.message);
-                setAnomaly(null);
-            } finally {
-                setLoading(false);
-            }
-        };
-
-        fetchAnomaly();
-    }, [session, supabase]);
-
-    const handlePrevious = () => {
-        setCurrentImageIndex((prevIndex) =>
-            prevIndex === 0 ? imageUrls.length - 1 : prevIndex - 1
-        );
-    };
-
-    const handleNext = () => {
-        setCurrentImageIndex((prevIndex) =>
-            prevIndex === imageUrls.length - 1 ? 0 : prevIndex + 1
-        );
-    };
-
-    if (loading) {
-        return <p>Loading...</p>;
-    }
-
-    if (!anomaly) {
-        return (
-            <div>
-                <p>No anomaly found.</p>
-            </div>
-        );
-    }
-
-    return (
-        <div className="flex flex-col items-start gap-4 pb-4 relative w-full max-w-lg overflow-y-auto max-h-[90vh] rounded-lg">
-            <div className="p-4 rounded-md relative w-full">
-                {imageUrls.length > 0 && (
-                    <div className="relative">
-                        <img
-                            src={imageUrls[currentImageIndex]}
-                            alt={`Anomaly ${currentImageIndex + 1}`}
-                            className="w-full h-full object-contain"
-                        />
-                        <button
-                            onClick={handlePrevious}
-                            className="absolute left-0 top-1/2 -translate-y-1/2 p-2 bg-gray-600 rounded-full"
-                        >
-                            ❮
-                        </button>
-                        <button
-                            onClick={handleNext}
-                            className="absolute right-0 top-1/2 -translate-y-1/2 p-2 bg-gray-600 rounded-full"
-                        >
-                            ❯
-                        </button>
-                        <div className="flex justify-center mt-2">
-                            {imageUrls.map((_, index) => (
-                                <span
-                                    key={index}
-                                    className={`h-2 w-2 rounded-full mx-1 ${index === currentImageIndex ? 'bg-blue-500' : 'bg-gray-300'}`}
-                                />
-                            ))}
-                        </div>
-                    </div>
-                )}
-            </div>
-
-            {imageUrls.length > 0 && (
-                <div className="flex w-full gap-2 mt-4">
-                    {imageUrls.map((url, index) => (
-                        <img
-                            key={index}
-                            src={url}
-                            alt={`Thumbnail ${index + 1}`}
-                            onClick={() => setCurrentImageIndex(index)}
-                            className={`flex-1 h-16 object-cover cursor-pointer border-2 ${index === currentImageIndex ? 'border-blue-500' : 'border-gray-300'}`}
-                        />
-                    ))}
-                </div>
-            )}
-
-            <Button className='mt-4' onClick={() => setShowTutorial(true)}>Show Tutorial</Button>
-
-            {imageUrls.length > 0 && (
-                <ClassificationForm
-                    anomalyId={anomaly?.id.toString() || "90670192"}
-                    anomalyType='telescope-minorPlanet'
-                    missionNumber={20000003}
-                    assetMentioned={imageUrls}
-                    structureItemId={3103}
-                />
-            )}
-        </div>
-    );
 };
\ No newline at end of file
diff --git a/components/Projects/Telescopes/DiskDetector.tsx b/components/Projects/Telescopes/DiskDetector.tsx
index 9864de0fb..6157857c9 100644
--- a/components/Projects/Telescopes/DiskDetector.tsx
+++ b/components/Projects/Telescopes/DiskDetector.tsx
@@ -4,7 +4,13 @@ import React, { useEffect, useState } from "react";
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
 import { useActivePlanet } from "@/context/ActivePlanet";
 import ClassificationForm from "@/components/Projects/(classifications)/PostForm";
-import { Anomaly } from "./Transiting";
+type Anomaly = {
+  id: string;
+  name: string;
+  content?: string;
+  details?: string;
+};
+
 import { Button } from "@/components/ui/button";
 
 interface TelescopeProps {
diff --git a/components/Projects/Telescopes/Sunspots.tsx b/components/Projects/Telescopes/Sunspots.tsx
index 0f05d7622..27b98c4b7 100644
--- a/components/Projects/Telescopes/Sunspots.tsx
+++ b/components/Projects/Telescopes/Sunspots.tsx
@@ -166,11 +166,14 @@ const SunspotDetectorTutorial: React.FC<TelescopeProps> = ({
     );
 };
 
-import { Anomaly } from "./Transiting";
-import PreferredTerrestrialClassifications from "@/components/Structures/Missions/PickPlanet";
+type Anomaly = {
+  id: string;
+  name: string;
+  details?: string;
+};
 import ImageAnnotator from "../(classifications)/Annotating/Annotator";
 
-export function StarterSunspot({ anomalyid }: SelectedAnomalyProps ) {
+export function StarterSunspot() {
     const supabase = useSupabaseClient();
     const session = useSession();
 
@@ -250,30 +253,11 @@ export function StarterSunspot({ anomalyid }: SelectedAnomalyProps ) {
                         assetMentioned={imageUrl}
                         structureItemId={3103}
                         missionNumber={5055655555}
-                        parentPlanetLocation={anomalyid?.toString() || ''}
+                        // parentPlanetLocation={anomalyid?.toString() || ''}
                         annotationType="Sunspots"
                     />
                 )}
             </div>
         </div>
     );
-};
-
-export function SunspotsWrapper() {
-    const [selectedAnomaly, setSelectedAnomaly] = useState<number | null>(null);
-
-    return (
-        <div className="space-y-8">
-            {!selectedAnomaly && (
-                <PreferredTerrestrialClassifications
-                    onSelectAnomaly={setSelectedAnomaly}
-                />
-            )}
-            {selectedAnomaly && (
-                <StarterSunspot 
-                    anomalyid={selectedAnomaly}
-                />
-            )}
-        </div>
-    );
 };
\ No newline at end of file
diff --git a/components/Projects/Telescopes/Sunspots/SunspotShell.tsx b/components/Projects/Telescopes/Sunspots/SunspotShell.tsx
index b78ccda51..82280d87d 100644
--- a/components/Projects/Telescopes/Sunspots/SunspotShell.tsx
+++ b/components/Projects/Telescopes/Sunspots/SunspotShell.tsx
@@ -3,9 +3,20 @@ import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
 import MissionShell from "@/components/Structures/Missions/BasePlate";
 import { CloudCogIcon, FolderCog, HelpCircle, PaintBucket, Sun, Vote } from "lucide-react";
 
-import { MissionStep } from "@/components/Structures/Missions/Astronomers/PlanetHunters/PlanetHunters";
 import { Mission } from "@/components/Structures/Missions/Astronomers/SatellitePhotos/AI4M/AIForMars";
-import { SunspotsWrapper } from "../Sunspots";
+import { StarterSunspot } from "../Sunspots";
+
+export interface MissionStep {
+  id: number;
+  title: string;
+  description: string;
+  points?: number;
+  icon: React.ElementType;
+  action: () => void;
+  completedCount: number;
+  color: string;
+  chapter: number;
+};
 
 const SunspotSteps = () => {
     const supabase = useSupabaseClient();
@@ -35,7 +46,7 @@ const SunspotSteps = () => {
             icon: Sun,
             points: 2,
             completedCount: 0,
-            internalComponent: () => <SunspotsWrapper />,
+            internalComponent: () => <StarterSunspot />,
             color: 'text-yellow-500',
         },
         // comments, voting, etc...
diff --git a/components/Projects/Telescopes/Transiting.tsx b/components/Projects/Telescopes/Transiting.tsx
index 52702cfc2..99fca519a 100644
--- a/components/Projects/Telescopes/Transiting.tsx
+++ b/components/Projects/Telescopes/Transiting.tsx
@@ -5,169 +5,130 @@ import { useSession, useSupabaseClient } from '@supabase/auth-helpers-react';
 import { useActivePlanet } from '@/context/ActivePlanet'; 
 import ClassificationForm from '@/components/Projects/(classifications)/PostForm';
 import { planetClassificationConfig } from '@/components/Projects/(classifications)/FormConfigurations';
-import PreferredTerrestrialClassifications from '@/components/Structures/Missions/PickPlanet';
+// import PreferredTerrestrialClassifications from '@/components/Structures/Missions/PickPlanet';
 import ImageAnnotator from '../(classifications)/Annotating/Annotator';
 import { Button } from "@/components/ui/button";
+import { useRouter } from 'next/navigation';
 
-export interface Anomaly {
-    id: bigint;
-    content: string;
-    avatar_url?: string; 
+type Anomaly = {
+  id: number;
+  anomalySet: string;
+  avatar_url?: string;
+  content?: any;
 };
 
-interface SelectedAnomProps {
-    anomalyid?: number;
-}; 
+export function StarterTelescopeTess() {
+  const supabase = useSupabaseClient()
+  const session = useSession()
+  const router = useRouter()
 
-export function StarterTelescopeTessWithId({ anomalyid }: SelectedAnomProps) {
-  const supabase = useSupabaseClient();
-  const session = useSession();
+  const [selectedAnomaly, setSelectedAnomaly] = useState<Anomaly | null>(null)
+  const [imageUrls, setImageUrls] = useState<string[]>([])
+  const [loading, setLoading] = useState<boolean>(true)
+  const [error, setError] = useState<string | null>(null)
+  const [showTutorial, setShowTutorial] = useState(false)
 
-  const [anomaly, setAnomaly] = useState<Anomaly | null>(null);
-  const [imageUrl, setImageUrl] = useState<string | null>(null);
+  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL || ""
 
-  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL || '';
-  const [loading, setLoading] = useState<boolean>(true);
-
-  const fetchAnomalies = async () => {
-    if (!session) {
-      setLoading(false);
-      return;
-    }
-
-    try {
-      const { data: anomalyData, error } = await supabase
-        .from('anomalies')
-        .select('*')
-        .eq('anomalySet', 'telescope-tess')
-        .eq('id', anomalyid);
-
-      if (error) {
-        console.log(error);
-        setLoading(false);
-        return;
-      };
-
-      setAnomaly(anomalyData[0]);
-      setImageUrl(`${supabaseUrl}/storage/v1/object/public/anomalies/${anomalyid}/Sector1.png`);
-    } catch (error: any) {
-      console.error(error);
-      setLoading(false);
-      return;
-    } finally {
-      setLoading(false);
+  useEffect(() => {
+    const fetchRandomLinkedAnomaly = async () => {
+      if (!session) {
+        setLoading(false)
+        return
+      }
+
+      try {
+        const { data: linkedAnomalies, error: linkedError } = await supabase
+          .from("linked_anomalies")
+          .select(`
+            id,
+            anomaly_id,
+            anomalies!inner (
+              id,
+              anomalySet,
+              avatar_url,
+              content
+            )
+          `)
+          .eq("author", session.user.id)
+          .eq("anomalies.anomalySet", "telescope-tess")
+
+        if (linkedError) throw linkedError
+
+        if (!linkedAnomalies || linkedAnomalies.length === 0) {
+          router.push("/deploy")
+          return
+        }
+
+        // Pick a random anomaly from the list
+        const randomIndex = Math.floor(Math.random() * linkedAnomalies.length)
+        const anomaly = linkedAnomalies[randomIndex]?.anomalies as unknown as Anomaly
+
+        setSelectedAnomaly(anomaly)
+
+        const urls: string[] = []
+        if (anomaly.avatar_url) urls.push(anomaly.avatar_url)
+        urls.push(`${supabaseUrl}/storage/v1/object/public/anomalies/${anomaly.id}/Sector1.png`)
+
+        setImageUrls(urls)
+      } catch (err: any) {
+        console.error("Error fetching linked anomaly:", err.message || err)
+        setError("Unable to load anomaly.")
+      } finally {
+        setLoading(false)
+      }
     }
-  };
 
-  useEffect(() => {
-    fetchAnomalies();
-  }, [session]);
+    fetchRandomLinkedAnomaly()
+  }, [session])
 
-  if (loading) return <p>Loading...</p>;
+  if (error) return <div className="text-red-500 p-4">{error}</div>
+  if (loading) return <div className="text-white p-4">Loading...</div>
+  if (!selectedAnomaly || imageUrls.length === 0)
+    return <div className="text-white p-4">No anomaly found.</div>
 
   return (
-
-        <ImageAnnotator
-          anomalyType="planet"
-          missionNumber={1372001}
-          structureItemId={3103}
-          assetMentioned={anomalyid?.toString()}
-          annotationType="PH"
-          initialImageUrl={imageUrl || ''}
-          anomalyId={anomalyid?.toString()}
-        />
-  );
-};
-
-export function StarterTelescopeTess({ anomalyid }: SelectedAnomProps) {
-    const supabase = useSupabaseClient();
-    const session = useSession();
-
-    const { activePlanet } = useActivePlanet();
-
-    const [anomalies, setAnomalies] = useState<Anomaly[]>([]);
-    const [selectedAnomaly, setSelectedAnomaly] = useState<Anomaly | null>(null);
-    const [imageUrls, setImageUrls] = useState<string[]>([]);
-    const [loading, setLoading] = useState<boolean>(true);
-    const [error, setError] = useState<string | null>(null);
-    const [showTutorial, setShowTutorial] = useState(false);
-
-    useEffect(() => {
-        const fetchAnomalies = async () => {
-            if (!session) {
-                setLoading(false);
-                return;
-            };
-
-            try {
-                const { data: anomalyData, error: anomalyError } = await supabase
-                    .from("anomalies")
-                    .select("*")
-                    .eq("anomalySet", "telescope-tess");
-                if (anomalyError) throw anomalyError;
-
-                setAnomalies(anomalyData || []);
-                if (anomalyData?.length > 0) {
-                    const randomAnomaly = anomalyData[Math.floor(Math.random() * anomalyData.length)];
-                    const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL || 'https://your-default-supabase-url.com';
-                    const imageList = [];
-
-                    if (randomAnomaly?.avatar_url) {
-                        imageList.push(randomAnomaly.avatar_url);
-                    };
-
-                    if (randomAnomaly?.id) {
-                        const sectorUrl = `${supabaseUrl}/storage/v1/object/public/anomalies/${randomAnomaly.id}/Sector1.png`;
-                        imageList.push(sectorUrl);
-                    };
-
-                    setImageUrls(imageList);
-                    setSelectedAnomaly(randomAnomaly);
-                }
-            } catch (error: any) {
-                console.error("Error fetching anomalies:", error.message || error);
-            } finally {
-                setLoading(false);
-            }
-        };
-        fetchAnomalies();
-    }, [session, supabase]);
-
-    if (error) return <div><p>{error}</p></div>;
-    if (loading) return <div><p>Loading...</p></div>;
-    if (!anomalies.length) return <div><p>No anomaly found.</p></div>;
-
-    if (showTutorial) {
-        return (
-            <div className="w-full">
-                <FirstTelescopeClassification anomalyid="6" />
-            </div>
-        );
-    }
-
-    return (
-        <div className="flex flex-col items-start gap-4 pb-4 relative w-full max-w-lg overflow-y-auto max-h-[90vh] rounded-lg">
-            <div className="mt-6 w-full flex justify-center">
-                <Button variant="outline" onClick={() => setShowTutorial(true)}>
-                    Want a walkthrough? Start the tutorial
-                </Button>
-            </div>
-            <div className="p-4 rounded-md relative w-full">
-                {selectedAnomaly && (
-                    <ImageAnnotator
-                        anomalyType='planet'
-                        missionNumber={1372001}
-                        structureItemId={3103}
-                        assetMentioned={selectedAnomaly.id.toString()}
-                        annotationType='PH'
-                        initialImageUrl={imageUrls[1]}
-                        anomalyId={selectedAnomaly.id.toString()}
-                    />
-                )}
-            </div>
-        </div>
-    );
-};
+    <div className="w-full h-screen overflow-hidden flex flex-col gap-2 px-4 py-6">
+      {/* Button Bar */}
+      <div className="w-full rounded-xl backdrop-blur-md bg-white/10 shadow-md p-2 flex justify-end">
+        <Button variant="outline" onClick={() => setShowTutorial(true)}>
+          Want a walkthrough? Start the tutorial
+        </Button>
+      </div>
+
+      {/* Tutorial OR Annotator */}
+      <div className="flex-1 w-full rounded-xl bg-white/10 backdrop-blur-md shadow-md p-2 overflow-hidden">
+        {showTutorial ? (
+          <div className="w-full h-full overflow-auto">
+            <FirstTelescopeClassification anomalyid="6" />
+          </div>
+        ) : (
+          <div className="w-full h-full overflow-hidden grid grid-rows-[auto_1fr] sm:grid-rows-none sm:grid-cols-1">
+            <ImageAnnotator
+              anomalyType="planet"
+              missionNumber={1372001}
+              structureItemId={3103}
+              assetMentioned={selectedAnomaly.id.toString()}
+              annotationType="PH"
+              initialImageUrl={imageUrls[1]}
+              anomalyId={selectedAnomaly.id.toString()}
+              className="h-full max-h-[calc(100vh-10rem)] sm:max-h-full"
+            />
+          </div>
+        )}
+      </div>
+
+      <style jsx global>{`
+        @media (max-width: 640px) {
+          html, body {
+            overflow: hidden;
+            height: 100vh;
+          }
+        }
+      `}</style>
+    </div>
+  )
+}
 
 interface TelescopeProps {
     anomalyid: string;
@@ -244,7 +205,7 @@ export const FirstTelescopeClassification: React.FC<TelescopeProps> = ({ anomaly
                                 className="w-24 h-24 mb-2"
                             />
                         </div>
-                        <div className="max-w-4xl mx-auto rounded-lg bg-[#1D2833] text-[#F7F5E9] rounded-md bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-70">
+                        <div className="max-w-4xl mx-auto rounded-lg text-[#F7F5E9] rounded-md bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-70">
                             <div className='relative'>
                                 <div className='absolute inset-0 w-full h-full bg-[#2C4F64] rounded-md bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-0'></div>
                                 <div className='bg-white bg-opacity-90'>
diff --git a/components/Projects/Zoodex/burrowingOwls.tsx b/components/Projects/Zoodex/burrowingOwls.tsx
index 7e2ebd82c..c625efb47 100644
--- a/components/Projects/Zoodex/burrowingOwls.tsx
+++ b/components/Projects/Zoodex/burrowingOwls.tsx
@@ -4,7 +4,13 @@ import React, { useEffect, useState } from "react";
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
 import { useActivePlanet } from "@/context/ActivePlanet";
 import ClassificationForm from "@/components/Projects/(classifications)/PostForm";
-import { Anomaly } from "../Telescopes/Transiting";
+
+type Anomaly = {
+  id: string;
+  name: string;
+  details?: string;
+  content?: string;
+};
 
 interface ZoodexProps {
     anomalyId: string; 
@@ -338,31 +344,4 @@ export function BurrowingOwl() {
             </div>
         </div>
     );
-};
-
-interface BurrowingOwlPassProps {
-    anomalyid: string;
-};
-
-export function BurrowingOwlPassed ( { anomalyid}: BurrowingOwlPassProps ) {
-    const supabase = useSupabaseClient();
-    const session = useSession();            
-
-    const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
-    const imageUrl = `${supabaseUrl}/storage/v1/object/public/zoodex/zoodex-burrowingOwl/${anomalyid}.jpeg`
-
-    return (
-        <div className="flex flex-col items-start gap-4 pb-4 relative w-full max-w-lg overflow-y-auto max-h-[90vh] rounded-lg">
-            <div className="pb-4 rounded-md relative w-full">
-            <img src={imageUrl || ''} alt={anomalyid} className="w-full h-64 object-cover" />
-                <ClassificationForm
-                    anomalyId={anomalyid}
-                    anomalyType="zoodex-burrowingOwl"
-                    missionNumber={100000035}
-                    assetMentioned={imageUrl || ""}
-                    structureItemId={3104}
-                />
-            </div>
-        </div>
-    );
 };
\ No newline at end of file
diff --git a/components/Projects/Zoodex/click-a-coral.tsx b/components/Projects/Zoodex/click-a-coral.tsx
index 39d35ad5a..d32315ee0 100644
--- a/components/Projects/Zoodex/click-a-coral.tsx
+++ b/components/Projects/Zoodex/click-a-coral.tsx
@@ -4,7 +4,11 @@ import React, { useEffect, useState } from "react";
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
 import { useActivePlanet } from "@/context/ActivePlanet";
 import ClassificationForm from "../(classifications)/PostForm";
-import { Anomaly } from "../Telescopes/Transiting";
+type Anomaly = {
+  id: string;
+  name: string;
+  details?: string;
+};
 import ImageAnnotator from "../(classifications)/Annotating/Annotator";
 
 interface ZoodexProps {
diff --git a/components/Projects/Zoodex/iguanasFromAbove.tsx b/components/Projects/Zoodex/iguanasFromAbove.tsx
index 65a2b3730..38be8de4a 100644
--- a/components/Projects/Zoodex/iguanasFromAbove.tsx
+++ b/components/Projects/Zoodex/iguanasFromAbove.tsx
@@ -170,7 +170,11 @@ export const IguanasFromAboveTutorial: React.FC<ZoodexProps> = ({ anomalyId }) =
   );
 };
 
-import { Anomaly } from "../Telescopes/Transiting";
+type Anomaly = {
+  id: string;
+  name: string;
+  details?: string;
+};
 
 export function ZoodexIguanas() {
   const supabase = useSupabaseClient();
@@ -292,27 +296,4 @@ export function ZoodexIguanas() {
       )}
     </div>
   );
-};
-
-interface IguanaPassProps {
-  anomalyid: string;
-};
-
-export function IguanasFromAbovePassed ( { anomalyid }: IguanaPassProps ) {
-  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
-  const imageUrl = `${supabaseUrl}/storage/v1/object/public/zoodex/zoodex-iguanasFromAbove/${anomalyid}.jpeg`;
-
-  return (
-      <div className="flex flex-col items-center">
-          <div className="max-w-4xl mx-auto bg-[#1D2833] text-[#F7F5E9] rounded-md">
-              <img src={imageUrl} alt="Iguana" className="w-64 h-64 object-contain" />
-              <ClassificationForm 
-                  anomalyId={anomalyid} 
-                  anomalyType="zoodex-iguanasFromAbove" 
-                  missionNumber={3000004} 
-                  assetMentioned={imageUrl!} 
-              />
-          </div>
-      </div>
-  );
 };
\ No newline at end of file
diff --git a/components/Projects/Zoodex/penguinWatch.tsx b/components/Projects/Zoodex/penguinWatch.tsx
index f5136431a..baeffa03a 100644
--- a/components/Projects/Zoodex/penguinWatch.tsx
+++ b/components/Projects/Zoodex/penguinWatch.tsx
@@ -4,7 +4,12 @@ import React, { useEffect, useState } from "react";
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
 import { useActivePlanet } from "@/context/ActivePlanet";
 import ClassificationForm from "@/components/Projects/(classifications)/PostForm";
-import { Anomaly } from "../Telescopes/Transiting";
+type Anomaly = {
+  id: string;
+  name: string;
+  content?: string;
+  details?: string;
+};
 import { Button } from "@/components/ui/button";
 
 interface ZoodexProps {
diff --git a/components/Projects/Zoodex/planktonPortal.tsx b/components/Projects/Zoodex/planktonPortal.tsx
index 58ec8a953..b99ed6610 100644
--- a/components/Projects/Zoodex/planktonPortal.tsx
+++ b/components/Projects/Zoodex/planktonPortal.tsx
@@ -4,7 +4,12 @@ import React, { useEffect, useState } from "react";
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
 import { useActivePlanet } from "@/context/ActivePlanet";
 import ClassificationForm from "@/components/Projects/(classifications)/PostForm";
-import { Anomaly } from "../Telescopes/Transiting";
+type Anomaly = {
+  id: string;
+  name: string;
+  details?: string;
+  content?: string;
+};
 import { Button } from "@/components/ui/button";
 
 interface ZoodexProps {
diff --git a/components/Research/AstronomyItems.tsx b/components/Research/AstronomyItems.tsx
index 77d43cc5a..99d5d8439 100644
--- a/components/Research/AstronomyItems.tsx
+++ b/components/Research/AstronomyItems.tsx
@@ -104,11 +104,11 @@ export default function AstronomyResearch() {
         <div className="space-y-6">
           <div>
             <h3 className="text-lg font-semibold text-[#4cc9f0] mb-4 border-b border-[#1e3a5f] pb-2">
-              AVAILABLE UPGRADES
+              AVAILABLE UPGRADES 
             </h3>
             <UpgradeItem
               title="Probe Count ++"
-              description="Increase your probe count to explore more terrariums simultaneously"
+              description="Increase your probe count to explore more planets & space objects simultaneously"
               current={userCapacities.probeCount}
               max={3}
               cost={getUpgradeCost(userCapacities.probeCount)}
@@ -121,7 +121,7 @@ export default function AstronomyResearch() {
             />
             <UpgradeItem
               title="Probe Distance ++"
-              description="Increase the range of your probes"
+              description="Extend the reach of your probes to discover objects farther from Earth"
               current={userCapacities.probeDistance}
               max={5}
               cost={getUpgradeCost(userCapacities.probeDistance)}
diff --git a/components/Research/Automatons/Rovers.tsx b/components/Research/Automatons/Rovers.tsx
new file mode 100644
index 000000000..70fe5a6db
--- /dev/null
+++ b/components/Research/Automatons/Rovers.tsx
@@ -0,0 +1,106 @@
+'use client'
+
+import { useState, useEffect } from "react";
+import { SatelliteDish, RockingChair } from "lucide-react";
+import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
+import { TechSection } from "../TechSection";
+import { UpgradeItem } from "../UpgradeItem";
+
+type CapacityKey = 'Seiscam' | 'Wheels';
+type UserCapacities = Record<CapacityKey, number>;
+
+export default function AutomatonSurfaceRoverResearch() {
+    const supabase = useSupabaseClient();
+    const session = useSession();
+
+    const [availablePoints, setAvailablePoints] = useState<number>(10); // WE NEED TO CHANGE THIS!!!
+    const [userCapacities, setUserCapacities] = useState<UserCapacities>({
+        Seiscam: 1,
+        Wheels: 1,
+    });
+
+    const getUpgradeCost = ( currentLevel: number ): number => {
+        return ( currentLevel + 1 ) * 2;
+    };
+
+    const handleUpgrade = async ( capacity: CapacityKey, currentLevel: number ) => {
+        const cost = getUpgradeCost(currentLevel);
+        if (availablePoints >= cost) {
+            setAvailablePoints((prev) => prev - cost);
+            setUserCapacities((prev) => ({
+                ...prev,
+                [capacity]: prev[capacity] + 1
+            }));
+
+            if (session) {
+                const techType = capacity === "Seiscam" ? "Wheels" : "Seiscam";
+                await supabase.from("researched").insert([{
+                    user_id: session.user.id,
+                    tech_type: techType
+                }, ]);
+
+                fetchResearchData();
+            };
+        };
+    };
+
+    useEffect(() => {
+        fetchResearchData();
+    }, [session]);
+
+    const fetchResearchData = async () => {
+        if (!session) {
+            return;
+        };
+
+        try {
+            const {
+                data: researched,
+                error
+            } = await supabase
+                .from("researched")
+                .select("tech_type")
+                .eq("user_id", session.user.id);
+
+            if (error) {
+                throw error;
+            };
+
+            let seiscamLevel = 1;
+            let wheelsLevel = 1;
+
+            researched?.forEach(item => {
+                if (item.tech_type === "Seiscam") {
+                    seiscamLevel += 1;
+                } else if (item.tech_type === "Wheels") {
+                    wheelsLevel += 1;
+                }
+            })
+        } catch (error) {
+            console.error("Error fetching research data:", error);
+        }
+    };
+
+    return (
+        <TechSection
+                icon={<RockingChair size={32} />}
+                title="Surface Rover Research" color={""} glowColor={""}    >
+            <div className="flex flex-col gap-4">
+                <UpgradeItem
+                    title="Seismic Camera"
+                    description="Enhances the rover's ability to detect subsurface features."
+                    cost={getUpgradeCost(userCapacities.Seiscam)}
+                    onUpgrade={() => handleUpgrade('Seiscam', userCapacities.Seiscam)}
+                    disabled={availablePoints < getUpgradeCost(userCapacities.Seiscam)} current={0} max={0} color={""}        
+                />
+            <UpgradeItem
+                    title="All-Terrain Wheels"
+                    description="Improves rover mobility across difficult terrain."
+                    cost={getUpgradeCost(userCapacities.Wheels)}
+                    onUpgrade={() => handleUpgrade('Wheels', userCapacities.Wheels)}
+                    disabled={availablePoints < getUpgradeCost(userCapacities.Wheels)} current={0} max={0} color={""}        
+                />
+            </div>
+        </TechSection>
+    );
+};
\ No newline at end of file
diff --git a/components/Research/BiologyItems.tsx b/components/Research/BiologyItems.tsx
index 7a70d6958..1440325ed 100644
--- a/components/Research/BiologyItems.tsx
+++ b/components/Research/BiologyItems.tsx
@@ -119,7 +119,7 @@ export default function BiologyResearch() {
                         </h3>
                         <UpgradeItem
                             title="Camera Count ++"
-                            description="Increase observation capabilities"
+                            description="Add more field cameras to capture diverse lifeforms and behavioral patterns"
                             current={userCapacities.cameraCount}
                             max={3}
                             cost={getUpgradeCost(userCapacities.cameraCount)}
@@ -132,7 +132,7 @@ export default function BiologyResearch() {
                         />
                         <UpgradeItem
                             title="Sensor Count ++"
-                            description="Increase sensor capabilities"
+                            description="Install additional sensors to gather increased environmental and biological data."
                             current={userCapacities.sensorCount}
                             max={3}
                             cost={getUpgradeCost(userCapacities.sensorCount)}
@@ -145,7 +145,7 @@ export default function BiologyResearch() {
                         />
                         <UpgradeItem
                             title="Station Size ++"
-                            description="Increase the size of your research station"
+                            description="Expand your research stations to support more experiments and equipment"
                             current={userCapacities.stationSize}
                             max={3}
                             cost={getUpgradeCost(userCapacities.stationSize)}
@@ -157,9 +157,9 @@ export default function BiologyResearch() {
                             color="#4cc9f0"
                         />
                     </div>
-                    <div className="">
+                    {/* <div className="">
                         <GreenhouseResearchStations />
-                    </div>
+                    </div> */}
                 </div>
             </TechSection>
         </>
diff --git a/components/Research/MeteorologyItems.tsx b/components/Research/MeteorologyItems.tsx
index eddc5fa14..225b06969 100644
--- a/components/Research/MeteorologyItems.tsx
+++ b/components/Research/MeteorologyItems.tsx
@@ -4,7 +4,7 @@ import { useState, useEffect } from "react";
 import { SatelliteDishIcon } from "lucide-react";
 import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import { TechSection } from "./TechSection";
-import { UpgradeItem } from "./UpgradeItem";
+import { UpgradeItem } from "./UpgradeItem"; 
 import TotalPoints from "../Structures/Missions/Stardust/Total";
 
 type CapacityKey = 'probeCount' | 'balloonCount';
@@ -109,7 +109,7 @@ export default function MeteorologyResearch() {
                         </h3>
                         <UpgradeItem
                             title="Probe Count ++"
-                            description="Increase your probe count to explore more terrariums simultaneously"
+                            description="Build additional probes to expand climate data collection capabilities"
                             current={userCapacities.probeCount}
                             max={3}
                             cost={getUpgradeCost(userCapacities.probeCount)}
diff --git a/components/Research/TechSection.tsx b/components/Research/TechSection.tsx
index 72940b957..7d98d4025 100644
--- a/components/Research/TechSection.tsx
+++ b/components/Research/TechSection.tsx
@@ -7,7 +7,7 @@ interface TechSectionProps {
   color: string;
   glowColor: string;
   children: React.ReactNode;
-};
+}
 
 export const TechSection: React.FC<TechSectionProps> = ({
   title,
@@ -17,10 +17,13 @@ export const TechSection: React.FC<TechSectionProps> = ({
   children,
 }) => (
   <div className="relative z-10 flex justify-center mb-24">
-    <Card className="bg-[#0f2942] border-[#1e3a5f] p-6 w-full max-w-3xl relative overflow-hidden">
+    <Card className="bg-transparent border-[#1e3a5f] p-6 w-full max-w-3xl relative overflow-hidden">
+      {/* Optional glow background – subtle and matches card theme */}
       <div
-        className="absolute inset-0 bg-gradient-to-br to-transparent"
-        style={{ backgroundImage: `linear-gradient(to bottom right, ${color}0D, transparent)` }} // 0D = ~5% opacity
+        className="absolute inset-0 pointer-events-none"
+        style={{
+          backgroundImage: `linear-gradient(to bottom right, ${color}0D, transparent)`,
+        }}
       ></div>
 
       <div className="relative z-10">
@@ -34,10 +37,7 @@ export const TechSection: React.FC<TechSectionProps> = ({
           >
             {icon}
           </div>
-          <h2
-            className="text-2xl font-bold tracking-wider"
-            style={{ color }}
-          >
+          <h2 className="text-2xl font-bold tracking-wider" style={{ color }}>
             {title}
           </h2>
         </div>
diff --git a/components/Research/UpgradeItem.tsx b/components/Research/UpgradeItem.tsx
index 281252a4c..012c8142f 100644
--- a/components/Research/UpgradeItem.tsx
+++ b/components/Research/UpgradeItem.tsx
@@ -11,7 +11,7 @@ interface UpgradeItemProps {
   onUpgrade: () => void;
   color: string;
   disabled?: boolean;
-};
+}
 
 export const UpgradeItem: React.FC<UpgradeItemProps> = ({
   title,
@@ -23,7 +23,7 @@ export const UpgradeItem: React.FC<UpgradeItemProps> = ({
   color,
   disabled = false,
 }) => (
-  <div className="bg-[#0a1929] border border-[#1e3a5f] p-4 rounded-md">
+  <div className="bg-transparent border border-[#1e3a5f] p-4 rounded-md">
     <div className="flex items-center justify-between">
       <div>
         <p className="font-medium text-white">{title}</p>
@@ -40,13 +40,13 @@ export const UpgradeItem: React.FC<UpgradeItemProps> = ({
         className="text-white border-[#1e3a5f]"
         style={{
           backgroundColor: color,
-          boxShadow: `0 0 10px ${color}80`, // ~50% opacity
+          boxShadow: `0 0 10px ${color}80`, // 50% opacity glow
         }}
       >
         {current < max ? (
           <>
             UPGRADE <ArrowRight className="ml-2 w-4 h-4" />
-            <span className="ml-2 bg-[#0a1929] px-2 py-1 rounded text-sm text-[#f72585]">
+            <span className="ml-2 bg-transparent px-2 py-1 rounded text-sm text-[#f72585]">
               {cost}
             </span>
           </>
diff --git a/components/Structures/Auto/SeisCAM/Rover-Viewport.tsx b/components/Structures/Auto/SeisCAM/Rover-Viewport.tsx
new file mode 100644
index 000000000..8ffbe6bea
--- /dev/null
+++ b/components/Structures/Auto/SeisCAM/Rover-Viewport.tsx
@@ -0,0 +1,77 @@
+'use client'
+
+import { Rover, SurfaceAnomaly, ViewMode } from "@/types/Structures/Rover";
+import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
+import { useState } from "react";
+
+interface DatabaseAnomaly {
+  id: number
+  content: string | null
+  ticId: string | null
+  anomalytype: string | null
+  type: string | null
+  radius: number | null
+  mass: number | null
+  density: number | null
+  gravity: number | null
+  temperatureEq: number | null
+  temperature: number | null
+  smaxis: number | null
+  orbital_period: number | null
+  classification_status: string | null
+  avatar_url: string | null
+  created_at: string
+  deepnote: string | null
+  lightkurve: string | null
+  configuration: any
+  parentAnomaly: number | null
+  anomalySet: string | null
+};
+
+interface DatabaseClassification {
+  id: number
+  created_at: string
+  content: string | null
+  author: string | null
+  anomaly: number | null
+  media: any
+  classificationtype: string | null
+  classificationConfiguration: any
+};
+
+interface ExploredArea {
+  x: number
+  y: number
+  radius: number
+  timestamp: number
+};
+
+export default function RoverObservatory() {
+    const supabase = useSupabaseClient();
+    const session = useSession();
+
+    const [currentRegion, setCurrentRegion] = useState({ x: 0, y: 0 })
+    const [anomalies, setAnomalies] = useState<SurfaceAnomaly[]>([])
+    const [filteredAnomalies, setFilteredAnomalies] = useState<SurfaceAnomaly[]>([])
+    const [classifications, setClassifications] = useState<DatabaseClassification[]>([])
+    const [allClassifications, setAllClassifications] = useState<DatabaseClassification[]>([])
+    //   const [selectedProject, setSelectedProject] = useState<(typeof roverProjects)[0] | null>(null)
+    //   const [selectedRover, setSelectedRover] = useState<Rover | null>(rovers[0])
+    const [selectedAnomaly, setSelectedAnomaly] = useState<SurfaceAnomaly | null>(null)
+    const [selectedDbAnomaly, setSelectedDbAnomaly] = useState<DatabaseAnomaly | null>(null)
+    const [showClassifyDialog, setShowClassifyDialog] = useState(false)
+    const [showProjectPanel, setShowProjectPanel] = useState(false)
+    const [showRoverPanel, setShowRoverPanel] = useState(false)
+    const [viewMode, setViewMode] = useState<ViewMode>("surface")
+    const [isDragging, setIsDragging] = useState(false)
+    const [dragStart, setDragStart] = useState({ x: 0, y: 0, time: 0 })
+    const [focusedAnomaly, setFocusedAnomaly] = useState<SurfaceAnomaly | null>(null)
+    const [showAllDiscoveries, setShowAllDiscoveries] = useState(false)
+    const [loading, setLoading] = useState(true)
+    const [exploredAreas, setExploredAreas] = useState<Record<string, ExploredArea[]>>({})
+    const [roverPositions, setRoverPositions] = useState<Record<string, { x: number; y: number }>>({})
+
+    return (
+        <></>
+    );
+};
\ No newline at end of file
diff --git a/components/Structures/Auto/SeisCAM/rover-discoveries.tsx b/components/Structures/Auto/SeisCAM/rover-discoveries.tsx
new file mode 100644
index 000000000..0e3b629e8
--- /dev/null
+++ b/components/Structures/Auto/SeisCAM/rover-discoveries.tsx
@@ -0,0 +1,13 @@
+import { Badge } from "@/components/ui/badge"
+import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { ArrowLeft, CheckCircle2, Clock, Eye, Mountain, Wind, Gem, Map, Cloud, Truck } from "lucide-react"
+import type { SurfaceAnomaly, RoverMission, RoverProject } from "@/types/Structures/Rover"
+import { roverProjects } from "@/data/projects"
+import { rovers } from "@/data/roverList"
+
+export default function RoverDiscoveries() {
+    return (
+        <></>
+    );
+};
\ No newline at end of file
diff --git a/components/Structures/Auto/SeisCAM/rover-header.tsx b/components/Structures/Auto/SeisCAM/rover-header.tsx
new file mode 100644
index 000000000..86fdde972
--- /dev/null
+++ b/components/Structures/Auto/SeisCAM/rover-header.tsx
@@ -0,0 +1,137 @@
+'use client'
+
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Switch } from "@/components/ui/switch";
+import { Grid3X3, Trophy, Target, Users, User, Truck } from "lucide-react";
+import type { RoverProject, ViewMode, Rover } from "@/types/Structures/Rover";
+
+interface RoverHeaderProps {
+    selectedProject: RoverProject | null
+  selectedRover: Rover | null;
+  viewMode: ViewMode;
+  toggleProjectPanel: () => void;
+  toggleRoverPanel: () => void;
+  setViewMode: (mode: ViewMode) => void;
+  classifiedCount: number;
+  availableMissionsCount: number;
+  showAllDiscoveries: boolean;
+  setShowAllDiscoveries: (show: boolean) => void;
+};
+
+export function RoverHeader({
+  selectedProject,
+  selectedRover,
+  viewMode,
+  toggleProjectPanel,
+  toggleRoverPanel,
+  setViewMode,
+  classifiedCount,
+  availableMissionsCount,
+  showAllDiscoveries,
+  setShowAllDiscoveries,
+}: RoverHeaderProps) {
+  return (
+    <header className="bg-gradient-to-r from-[#3E2723] to-[#5D4037] border-b border-[#8D6E63] p-3 shadow-lg">
+      <div className="flex justify-between items-center">
+        {/* Left Side - Title */}
+        <div className="flex items-center gap-3">
+          <div>
+            <h1 className="text-lg font-bold text-[#ECEFF4]">Rover Command Center</h1>
+            <p className="text-xs text-[#BCAAA4]">
+              {selectedRover
+                ? `${selectedRover.name} - ${selectedRover.planet.toUpperCase()}`
+                : "Surface Exploration Platform"}
+            </p>
+          </div>
+        </div>
+
+        {/* Right Side - Controls & Stats */}
+        <div className="flex items-center gap-3">
+          {/* Discovery Toggle */}
+          <div className="flex items-center gap-2 bg-[#5D4037] rounded-lg px-2 py-1 border border-[#6D4C41]">
+            <User className="h-3 w-3 text-[#BCAAA4]" />
+            <Switch
+              checked={showAllDiscoveries}
+              onCheckedChange={setShowAllDiscoveries}
+              className="data-[state=checked]:bg-[#8D6E63] scale-75"
+            />
+            <Users className="h-3 w-3 text-[#BCAAA4]" />
+            <span className="text-xs text-[#ECEFF4] ml-1">{showAllDiscoveries ? "All" : "Mine"}</span>
+          </div>
+
+          {/* Stats Badges */}
+          <div className="flex items-center gap-2">
+            <Badge className="bg-[#8D6E63] text-white px-2 py-1 text-xs">
+              <Trophy className="h-3 w-3 mr-1" />
+              {classifiedCount}
+            </Badge>
+            <Badge className="bg-[#689F38] text-white px-2 py-1 text-xs">
+              <Target className="h-3 w-3 mr-1" />
+              {availableMissionsCount}
+            </Badge>
+          </div>
+
+          {/* Rover Selection */}
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={toggleRoverPanel}
+            className="bg-[#5D4037] border-[#8D6E63] text-[#ECEFF4] hover:bg-[#6D4C41] text-xs px-2 py-1 h-8"
+          >
+            <Truck className="h-3 w-3 mr-1" />
+            {selectedRover ? <span className="hidden sm:inline">{selectedRover.name}</span> : "Rovers"}
+          </Button>
+
+          {/* Project Filter */}
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={toggleProjectPanel}
+            className="bg-[#5D4037] border-[#8D6E63] text-[#ECEFF4] hover:bg-[#6D4C41] text-xs px-2 py-1 h-8"
+          >
+            {selectedProject ? (
+              <div className="flex items-center gap-1">
+                {selectedProject.icon}
+                <span className="hidden sm:inline">{selectedProject.name}</span>
+              </div>
+            ) : (
+              "Projects"
+            )}
+          </Button>
+
+          {/* View Toggle */}
+          <Button
+            variant={viewMode === "discoveries" ? "default" : "outline"}
+            size="sm"
+            onClick={() =>
+              setViewMode(viewMode === "surface" ? "discoveries" : viewMode === "discoveries" ? "rovers" : "surface")
+            }
+            className={`text-xs px-2 py-1 h-8 ${
+              viewMode === "discoveries"
+                ? "bg-[#8D6E63] text-white hover:bg-[#6D4C41]"
+                : "bg-[#5D4037] border-[#8D6E63] text-[#ECEFF4] hover:bg-[#6D4C41]"
+            }`}
+          >
+            {viewMode === "rovers" ? (
+              <>
+                <Truck className="h-3 w-3 mr-1" />
+                <span className="hidden sm:inline">Rovers</span>
+              </>
+            ) : viewMode === "surface" ? (
+              <>
+                <Grid3X3 className="h-3 w-3 mr-1" />
+                <span className="hidden sm:inline">Archive</span>
+              </>
+            ) : (
+              <>
+                <Truck className="h-3 w-3 mr-1" />
+                <span className="hidden sm:inline">Command</span>
+              </>
+            )}
+          </Button>
+        </div>
+      </div>
+    </header>
+  );
+};
\ No newline at end of file
diff --git a/components/Structures/Auto/SeisCAM/rover-panel.tsx b/components/Structures/Auto/SeisCAM/rover-panel.tsx
new file mode 100644
index 000000000..404b004bf
--- /dev/null
+++ b/components/Structures/Auto/SeisCAM/rover-panel.tsx
@@ -0,0 +1,167 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Truck, X, Battery, Signal, Thermometer, MapPin } from "lucide-react";
+import type { Rover } from "@/types/Structures/Rover";
+
+interface RoverPanelProps {
+  rovers: Rover[];
+  selectedRover: Rover | null;
+  selectRover: (rover: Rover | null) => void;
+  showRoverPanel: boolean;
+  onClose: () => void;
+  planets: any[];
+};
+
+export function RoverPanel({
+  rovers,
+  selectedRover,
+  selectRover,
+  showRoverPanel,
+  planets,
+  onClose,
+}: RoverPanelProps) {
+  if (!showRoverPanel) {
+    return null;
+  }
+
+  const getStatusColor = (status: Rover["status"]) => {
+    switch (status) {
+      case "active":
+        return "text-[#4CAF50] bg-[#4CAF50]/10 border-[#4CAF50]/30";
+      case "standby":
+        return "text-[#FFC107] bg-[#FFC107]/10 border-[#FFC107]/30";
+      case "maintenance":
+        return "text-[#FF9800] bg-[#FF9800]/10 border-[#FF9800]/30";
+      case "offline":
+        return "text-[#F44336] bg-[#F44336]/10 border-[#F44336]/30";
+      default:
+        return "text-[#9E9E9E] bg-[#9E9E9E]/10 border-[#9E9E9E]/30";
+    }
+  };
+
+  const getPlanetInfo = (planetId: string) => {
+    return (
+      planets.find((p) => p.id === planetId) ||
+      planets[0] || {
+        id: "unknown",
+        name: "Unknown",
+        surfaceColor: "#CD5C5C",
+      }
+    );
+  };
+
+  const getBatteryColor = (level: number) => {
+    if (level > 70) return "text-[#4CAF50]";
+    if (level > 30) return "text-[#FFC107]";
+    return "text-[#F44336]";
+  };
+
+  return (
+    <div className="absolute top-16 right-4 z-50 w-80 bg-gradient-to-br from-[#4E342E] to-[#3E2723] border-2 border-[#8D6E63] rounded-lg shadow-2xl">
+      <div className="p-4 border-b border-[#5D4037] flex justify-between items-center">
+        <h3 className="font-bold text-[#ECEFF4]">Your Rovers</h3>{" "}
+        {/* Surface-based automatons */}
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onClose}
+          className="text-[#BCAAA4] hover:text-[#ECEFF4] hover:bg-[#5D3047]"
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+
+      <div className="p-4 space-y-3 max-h-[400px] overflow-y-auto">
+        <Button
+          variant={!selectedRover ? "default" : "outline"}
+          className={`w-full justify-start ${
+            !selectedRover
+              ? "bg-[#8D6E63] text-white hover:bg-[#6D4C41]"
+              : "bg-[#5D4037] border-[#8D6E63] text-[#ECEFF4] hover:bg-[#6D4C41]"
+          }`}
+          onClick={() => selectRover(null)}
+        >
+          <Truck className="h-4 w-4 mr-2" />
+          <span>All Automatons</span>
+        </Button>
+
+        {rovers.map((rover) => {
+          const planet = getPlanetInfo(rover.planet);
+          return (
+            <div key={rover.id} className="space-y-2">
+              <Button
+                variant={selectedRover?.id === rover.id ? "default" : "outline"}
+                className={`w-full justify-start ${
+                  selectedRover?.id === rover.id
+                    ? "bg-[#8D6E63] text-white hover:bg-[#6D4C41]"
+                    : "bg-[#5D4037] border-[#8D6E63] text-[#ECEFF4] hover:bg-[#6D4C41]"
+                }`}
+                onClick={() => selectRover(rover)}
+                disabled={rover.status === "offline"}
+              >
+                <div className="flex items-center gap-2 w-full">
+                  <div
+                    className="w-3 h-3 rounded-full border border-white/30"
+                    style={{ backgroundColor: planet.surfaceColor }}
+                  />
+                  <div className="flex-1 text-left">
+                    <div className="font-medium">{rover.name}</div>
+                    <div className="text-xs opacity-75">{planet.name}</div>
+                  </div>
+                  <Badge
+                    variant="outline"
+                    className={`text-xs ${getStatusColor(rover.status)}`}
+                  >
+                    {rover.status}
+                  </Badge>
+                </div>
+              </Button>
+
+              {/* Rover Status Details */}
+              <div className="ml-6 space-y-2 text-xs">
+                <div className="grid grid-cols-2 gap-2">
+                  <div className="flex items-center gap-1">
+                    <Battery
+                      className={`h-3 w-3 ${getBatteryColor(
+                        rover.batteryLevel
+                      )}`}
+                    />
+                    <span className="text-[#BCAAA4]">Battery:</span>
+                    <span className={getBatteryColor(rover.batteryLevel)}>
+                      {rover.batteryLevel}%
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-1">
+                    <Signal className="h-3 w-3 text-[#03A9F4]" />
+                    <span className="text-[#BCAAA4]">Signal:</span>
+                    <span className="text-[#03A9F4]">
+                      {rover.signalStrength}%
+                    </span>
+                  </div>
+                </div>
+                <div className="grid grid-cols-2 gap-2">
+                  <div className="flex items-center gap-1">
+                    <Thermometer className="h-3 w-3 text-[#FF7043]" />
+                    <span className="text-[#BCAAA4]">{rover.temperature}</span>
+                  </div>
+                  <div className="flex items-center gap-1">
+                    <MapPin className="h-3 w-3 text-[#689F38]" />
+                    <span className="text-[#BCAAA4]">
+                      {rover.anomalyCount} samples
+                    </span>
+                  </div>
+                </div>
+                <div className="text-[#A1887F]">
+                  <div>Mission: {rover.missionDuration}</div>
+                  <div>Distance: {rover.distanceTraveled}</div>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/components/Structures/Auto/WeatherBalloon/balloon-anomalies.tsx b/components/Structures/Auto/WeatherBalloon/balloon-anomalies.tsx
new file mode 100644
index 000000000..68ade47db
--- /dev/null
+++ b/components/Structures/Auto/WeatherBalloon/balloon-anomalies.tsx
@@ -0,0 +1,223 @@
+"use client"
+
+import type { WeatherAnomaly } from "@/types/Structures/WeatherBalloon";
+
+interface WeatherAnomalyComponentProps {
+  anomaly: WeatherAnomaly
+  onClick: (anomaly: WeatherAnomaly) => void
+  isHighlighted?: boolean
+};
+
+export function WeatherAnomalyComponent({ anomaly, onClick, isHighlighted = false }: WeatherAnomalyComponentProps) {
+  const baseClasses = "absolute cursor-pointer transition-all duration-300 hover:scale-110 hover:brightness-110";
+  const size = anomaly.size || 1;
+  const baseSize = anomaly.type === "storm" ? 24 : anomaly.type === "cloud_formation" ? 20 : 16;
+
+  // Create weather-specific visual styles
+  const getWeatherStyles = () => {
+    const commonStyles = {
+      left: `${anomaly.x}%`,
+      top: `${anomaly.y}%`,
+      width: `${baseSize * size}px`,
+      height: `${baseSize * size}px`,
+      zIndex: isHighlighted ? 50 : 10,
+      filter: `brightness(${1 + anomaly.intensity * 0.3}) saturate(1.2)`,
+      animation: isHighlighted
+        ? `weatherPulse 1s ease-in-out infinite alternate`
+        : `weatherDrift ${anomaly.animationSpeed}s ease-in-out infinite alternate`,
+    };
+
+    switch (anomaly.type) {
+      case "storm":
+        return {
+          ...commonStyles,
+          background: `
+            radial-gradient(ellipse 60% 40% at 30% 30%, ${anomaly.color}40 0%, transparent 50%),
+            radial-gradient(ellipse 40% 60% at 70% 60%, ${anomaly.color}60 0%, transparent 50%),
+            radial-gradient(ellipse 80% 30% at 50% 80%, ${anomaly.color}30 0%, transparent 50%),
+            conic-gradient(from 45deg, ${anomaly.color}80, ${anomaly.color}40, ${anomaly.color}80)
+          `,
+          borderRadius: "50% 40% 60% 30%",
+          boxShadow: isHighlighted
+            ? `0 0 ${20 * size}px ${anomaly.color}88, inset 0 0 ${10 * size}px ${anomaly.color}40`
+            : `0 0 ${12 * size}px ${anomaly.color}60, inset 0 0 ${6 * size}px ${anomaly.color}20`,
+          transform: `rotate(${Math.sin(Date.now() * 0.001) * 10}deg)`,
+        }
+
+      case "cloud_formation":
+        return {
+          ...commonStyles,
+          background: `
+            radial-gradient(ellipse 40% 30% at 20% 40%, ${anomaly.color}70 0%, transparent 60%),
+            radial-gradient(ellipse 35% 25% at 50% 30%, ${anomaly.color}60 0%, transparent 60%),
+            radial-gradient(ellipse 30% 35% at 80% 45%, ${anomaly.color}65 0%, transparent 60%),
+            radial-gradient(ellipse 25% 20% at 35% 70%, ${anomaly.color}50 0%, transparent 60%),
+            radial-gradient(ellipse 20% 25% at 70% 75%, ${anomaly.color}55 0%, transparent 60%)
+          `,
+          borderRadius: "60% 40% 50% 70%",
+          boxShadow: isHighlighted
+            ? `0 0 ${15 * size}px ${anomaly.color}66, inset 0 0 ${8 * size}px rgba(255,255,255,0.2)`
+            : `0 0 ${8 * size}px ${anomaly.color}44, inset 0 0 ${4 * size}px rgba(255,255,255,0.1)`,
+          opacity: 0.8 + anomaly.opacity * 0.2,
+        }
+
+      case "atmospheric_phenomenon":
+        return {
+          ...commonStyles,
+          background: `
+            linear-gradient(45deg, ${anomaly.color}60 0%, transparent 30%),
+            linear-gradient(-45deg, ${anomaly.color}40 20%, transparent 60%),
+            linear-gradient(90deg, ${anomaly.color}50 0%, transparent 50%),
+            radial-gradient(ellipse at center, ${anomaly.color}30 0%, transparent 70%)
+          `,
+          borderRadius: "20% 80% 30% 70%",
+          boxShadow: isHighlighted
+            ? `0 0 ${18 * size}px ${anomaly.color}77, 0 0 ${25 * size}px ${anomaly.color}33`
+            : `0 0 ${10 * size}px ${anomaly.color}55, 0 0 ${15 * size}px ${anomaly.color}22`,
+          transform: `skew(${Math.sin(Date.now() * 0.002) * 5}deg, ${Math.cos(Date.now() * 0.002) * 3}deg)`,
+        }
+
+      case "surface_weather":
+        return {
+          ...commonStyles,
+          background: `
+            radial-gradient(ellipse 50% 20% at 50% 20%, ${anomaly.color}80 0%, transparent 70%),
+            radial-gradient(ellipse 30% 40% at 30% 60%, ${anomaly.color}60 0%, transparent 70%),
+            radial-gradient(ellipse 40% 30% at 70% 70%, ${anomaly.color}70 0%, transparent 70%),
+            linear-gradient(180deg, ${anomaly.color}20 0%, transparent 100%)
+          `,
+          borderRadius: "50% 50% 80% 20%",
+          boxShadow: isHighlighted
+            ? `0 0 ${12 * size}px ${anomaly.color}88, inset 0 0 ${6 * size}px rgba(255,255,255,0.3)`
+            : `0 0 ${8 * size}px ${anomaly.color}66, inset 0 0 ${4 * size}px rgba(255,255,255,0.15)`,
+          opacity: 0.7 + anomaly.opacity * 0.3,
+        }
+
+      case "geological_weather":
+        return {
+          ...commonStyles,
+          background: `
+            radial-gradient(ellipse 70% 30% at 40% 70%, ${anomaly.color}70 0%, transparent 60%),
+            radial-gradient(ellipse 50% 50% at 60% 30%, ${anomaly.color}50 0%, transparent 70%),
+            radial-gradient(ellipse 30% 60% at 20% 40%, ${anomaly.color}60 0%, transparent 60%),
+            linear-gradient(45deg, ${anomaly.color}30 0%, transparent 80%)
+          `,
+          borderRadius: "30% 70% 40% 60%",
+          boxShadow: isHighlighted
+            ? `0 0 ${16 * size}px ${anomaly.color}77, inset 0 0 ${8 * size}px rgba(139, 69, 19, 0.3)`
+            : `0 0 ${10 * size}px ${anomaly.color}55, inset 0 0 ${5 * size}px rgba(139, 69, 19, 0.2)`,
+          transform: `rotate(${Math.sin(Date.now() * 0.0015) * 15}deg)`,
+        }
+
+      default:
+        return {
+          ...commonStyles,
+          background: `radial-gradient(ellipse, ${anomaly.color}60 0%, transparent 70%)`,
+          borderRadius: "50%",
+          boxShadow: `0 0 ${10 * size}px ${anomaly.color}44`,
+        }
+    }
+  }
+
+  // Add particle effects for certain weather types
+  const renderParticles = () => {
+    if (anomaly.type === "storm" || anomaly.type === "geological_weather") {
+      return (
+        <div className="absolute inset-0 pointer-events-none">
+          {Array.from({ length: 3 }).map((_, i) => (
+            <div
+              key={i}
+              className="absolute w-1 h-1 bg-white rounded-full opacity-60"
+              style={{
+                left: `${20 + i * 30}%`,
+                top: `${30 + i * 20}%`,
+                animation: `particle ${1 + i * 0.5}s ease-in-out infinite alternate`,
+                animationDelay: `${i * 0.2}s`,
+              }}
+            />
+          ))}
+        </div>
+      )
+    }
+    return null
+  }
+
+  // Add wispy trails for atmospheric phenomena
+  const renderTrails = () => {
+    if (anomaly.type === "atmospheric_phenomenon") {
+      return (
+        <div className="absolute inset-0 pointer-events-none overflow-hidden">
+          <div
+            className="absolute w-full h-0.5 opacity-40"
+            style={{
+              background: `linear-gradient(90deg, transparent 0%, ${anomaly.color}80 50%, transparent 100%)`,
+              top: "30%",
+              animation: `trail ${anomaly.animationSpeed * 1.5}s ease-in-out infinite`,
+            }}
+          />
+          <div
+            className="absolute w-full h-0.5 opacity-30"
+            style={{
+              background: `linear-gradient(90deg, transparent 0%, ${anomaly.color}60 50%, transparent 100%)`,
+              top: "70%",
+              animation: `trail ${anomaly.animationSpeed * 1.2}s ease-in-out infinite reverse`,
+            }}
+          />
+        </div>
+      )
+    }
+    return null
+  }
+
+  return (
+    <div
+      className={`${baseClasses} ${anomaly.classified ? "ring-1 ring-[#607D8B]" : ""} ${isHighlighted ? "ring-2 ring-white" : ""}`}
+      style={getWeatherStyles()}
+      onClick={() => onClick(anomaly)}
+    >
+      {/* Particle effects */}
+      {renderParticles()}
+
+      {/* Trail effects */}
+      {renderTrails()}
+
+      {/* Classification indicator */}
+      {anomaly.classified && (
+        <div className="absolute -top-1 -right-1 w-2 h-2 bg-[#607D8B] rounded-full border border-white" />
+      )}
+
+      {/* Highlight glow */}
+      {isHighlighted && (
+        <div
+          className="absolute inset-0 rounded-full opacity-30 animate-ping"
+          style={{
+            background: `radial-gradient(circle, ${anomaly.color}60 0%, transparent 70%)`,
+            borderRadius: "inherit",
+          }}
+        />
+      )}
+
+      {/* CSS for weather-specific animations */}
+      <style jsx>{`
+        @keyframes weatherDrift {
+          0% { transform: translateX(0px) translateY(0px) rotate(0deg); opacity: 0.7; }
+          50% { transform: translateX(2px) translateY(-1px) rotate(1deg); opacity: 0.9; }
+          100% { transform: translateX(-1px) translateY(1px) rotate(-1deg); opacity: 0.8; }
+        }
+        @keyframes weatherPulse {
+          0% { transform: scale(1) rotate(0deg); opacity: 0.8; }
+          100% { transform: scale(1.1) rotate(2deg); opacity: 1; }
+        }
+        @keyframes particle {
+          0% { transform: translateY(0px) scale(0.8); opacity: 0.4; }
+          100% { transform: translateY(-3px) scale(1.2); opacity: 0.8; }
+        }
+        @keyframes trail {
+          0% { transform: translateX(-20px) scaleX(0.5); opacity: 0.2; }
+          50% { transform: translateX(0px) scaleX(1); opacity: 0.6; }
+          100% { transform: translateX(20px) scaleX(0.5); opacity: 0.2; }
+        }
+      `}</style>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/components/Structures/Auto/WeatherBalloon/balloon-anomaly-dialog.tsx b/components/Structures/Auto/WeatherBalloon/balloon-anomaly-dialog.tsx
new file mode 100644
index 000000000..e322573ed
--- /dev/null
+++ b/components/Structures/Auto/WeatherBalloon/balloon-anomaly-dialog.tsx
@@ -0,0 +1,172 @@
+'use client'
+
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import type { WeatherAnomaly } from "@/types/Structures/WeatherBalloon";
+import { Zap, Cloud, Wind, Thermometer, Mountain, Globe } from "lucide-react";
+
+interface WeatherAnomalyDialogProps {
+    showClassifyDialog: boolean;
+    setShowClassifyDialog: ( show: boolean ) => void;
+    selectedAnomaly: WeatherAnomaly | null;
+    handleClassify: () => void;
+    dbAnomaly?: any;
+};
+
+export function WeatherAnomalyDialog({
+    showClassifyDialog,
+    setShowClassifyDialog,
+    selectedAnomaly,
+    handleClassify,
+    dbAnomaly
+}: WeatherAnomalyDialogProps) {
+    const getAnomalyIcon = ( type: string ) => {
+        switch (type) {
+            case "storm":
+                return <Zap className="h-5 w-5 text-[#4C9AFF]" />
+            case "cloud_formation":
+                return <Cloud className="h-5 w-5 text-[#79E2F2]" />
+            case "atmospheric_phenomenon":
+                return <Wind className="h-5 w-5 text-[#B39DDB]" />
+            case "surface_weather":
+                return <Thermometer className="h-5 w-5 text-[#A5D6A7]" />
+            case "geological_weather":
+                return <Mountain className="h-5 w-5 text-[#BCAAA4]" />
+            default:
+                return <Cloud className="h-5 w-5 text-[#79E2F2]" />
+        };
+    };
+
+    const getAnomalyTypeLabel = ( type: string ) => {
+        switch ( type ) {
+            case "storm":
+                return "Storm System"
+            case "cloud_formation":
+                return "Cloud Formation"
+            case "atmospheric_phenomenon":
+                return "Atmospheric Phenomenon"
+            case "surface_weather":
+                return "Surface Weather"
+            case "geological_weather":
+                return "Geological Weather"
+            default:
+                return type
+        };
+    };
+
+    return (
+        <Dialog open={showClassifyDialog} onOpenChange={setShowClassifyDialog}>
+            <DialogContent className="bg-gradient-to-br from-[#37474F] to-[#263238] border-2 border-[#607D8B] text-white max-w-md">
+                <DialogHeader>
+                    <DialogTitle className="text-[#ECEFF4] text-lg">Classify Weather Phenomenon</DialogTitle>
+                </DialogHeader>
+                {selectedAnomaly && (
+                    <div className="space-y-4">
+                        <div className="bg-gradient-to-br from-[#455A64] to-[#37474F] rounded-lg p-4 border border-[#546E7A]">
+                            <div className="flex items-center gap-3 mb-3">
+                                <div
+                                    className="w-12 h-12 rounded-full flex items-center justify-center"
+                                    style={{
+                                        // background:
+                                            // weatherProjects.find(( p ) => p.id === selectedAnomaly.project?.bgGradient || "linear-gradient(135deg, #79E2F2, #00B8D4")
+                                    }}
+                                >
+                                    {getAnomalyIcon(selectedAnomaly.type)}
+                                </div>
+                                <div className="flex-1">
+                                    <h4 className="font-semibold text-[#ECEFF4]">{selectedAnomaly.name}</h4>
+                                    <p className="text-sm text-[#B0BEC5]">
+                                        {getAnomalyTypeLabel(selectedAnomaly.type)}
+                                    </p>
+                                    <div className="flex items-center gap-1 text-xs text-[#90A4A3] mt-1">
+                                        <Globe className="h-3 w-3" />
+                                        {/* <span>{getPlanetInfo(selectedAnomaly.planet).name}</span> */}
+                                        <span>•</span>
+                                        <span>{selectedAnomaly.region}</span>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div className="space-y-2 text-sm">
+                                <div className="grid grid-cols-2 gap-2">
+                                    <div className="flex justify-between">
+                                        <span className="text-[#90A4AE]">ID:</span>
+                                        <span className="font-mono text-[#ECEFF4] text-xs">{selectedAnomaly.id}</span>
+                                    </div>
+                                    <div className="flex justify-between">
+                                        <span className="text-[#90A4AE]">Body:</span> {/* Previously/defined as "Planet..." */}
+                                        <div className="flex items-center gap-1">
+                                            <div
+                                                className="w-3 h-3 rounded-full"
+                                                // style={{
+                                                //     backgroundColor:
+                                                //         getPlanetInfo(selectedAnomaly.planet).color
+                                                // }}
+                                            />
+                                            {/* <span className="text-[#ECEFF4] text-xs">{getPlanetInfo(selectedAnomaly.planet).name}</span> */}
+                                        </div>
+                                    </div>
+                                </div>
+                                <div className="grid grid-cols-2 gap-2">
+                                    <div className="flex justify-between">
+                                        <span className="text-[#90A4AE]">Position:</span>
+                                        <span className="font-mono text-[#ECEFF4] text-xs">
+                                            ({selectedAnomaly.x.toFixed(1)})%,
+                                            ({selectedAnomaly.y.toFixed(1)})%,
+                                        </span>
+                                    </div>
+                                    <div className="flex justify-between">
+                                        <span className="text-[#90A4AE]">Intensity:</span>
+                                        <span className="font-mono text-[#ECEFF4] text-xs">
+                                            {(selectedAnomaly.intensity * 100).toFixed(1)}%
+                                        </span>
+                                    </div>
+                                </div>
+                                <div className="flex justify-between">
+                                    <span className="text-[#90A4AE]">Project:</span>
+                                    <span className="text-[#ECEFF4] text-xs">
+                                        {/* {weatherProjects.find((p) => p.id === selectedAnomaly.project)?.name} */}
+                                    </span>
+                                </div>
+
+                                {dbAnomaly && (
+                                    <div className="border-t border-[#546E7A] pt-2 mt-2">
+                                        <div className="text-xs text-[#81C784] mb-1">
+                                            Database Information:
+                                        </div>
+                                        {dbAnomaly.anomalyType && (
+                                            <div className="flex justify-between">
+                                                <span className="text-[#90A4AE]">Type:</span>
+                                                <Badge variant='outline' className="text-xs border-[#607D8B] text-[#[B0BEC5]">
+                                                    {dbAnomaly.anomalyType}
+                                                </Badge>
+                                            </div>
+                                        )}
+                                        {dbAnomaly.content && (
+                                            <div className="mt-2">
+                                                <span className="text-[#90A4AE] text-xs">Description:</span>
+                                                <p className="text-xs text-[B0BEC5] mt-1 p-2 bg-[#263238] rounded">
+                                                    {dbAnomaly.content}
+                                                </p>
+                                            </div>
+                                        )}
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+
+                        <div className="flex gap-3">
+                            <Button
+                                onClick={handleClassify}
+                                className="flex-1 bg-[#607D8B] hover:bg-[#546E7A] text-white border-none"
+                            >
+                                Back
+                            </Button>
+                        </div>
+                    </div>
+                )}
+            </DialogContent>
+        </Dialog>
+    );
+};
\ No newline at end of file
diff --git a/components/Structures/Auto/WeatherBalloon/balloon-discoveries-view.tsx b/components/Structures/Auto/WeatherBalloon/balloon-discoveries-view.tsx
new file mode 100644
index 000000000..6e30222b7
--- /dev/null
+++ b/components/Structures/Auto/WeatherBalloon/balloon-discoveries-view.tsx
@@ -0,0 +1,148 @@
+'use client'
+
+import { Badge } from "@/components/ui/badge";
+import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft, CheckCircle2, Clock, Eye, Cloud, Zap, Thermometer, Mountain, Globe } from "lucide-react";
+import type { WeatherAnomaly, WeatherMission, WeatherProject } from "@/types/Structures/WeatherBalloon";
+
+interface WeatherDiscoveriesViewProps {
+    classifications: any[];
+    allClassifications: any[];
+    projectMissions: WeatherMission[];
+    selectedProject: WeatherProject | null;
+    onBack: () => void;
+    onViewAnomaly: ( anomaly: WeatherAnomaly ) => void;
+    showAllDiscoveries: boolean;
+    anomalies: WeatherAnomaly[];
+};
+
+export function WeatherDiscoveriesView({
+    classifications,
+    allClassifications,
+    projectMissions,
+    selectedProject,
+    onBack,
+    onViewAnomaly,
+    showAllDiscoveries,
+    anomalies,
+}: WeatherDiscoveriesViewProps) {
+    // Convert classifications to anomaly format (get the anomalies) for displaying alongside the anomalies
+    // const convertClassifficationsToAnomalies = (classificationData: any[]): WeatherAnomaly[] => {
+    //     return classificationData
+    //         .map(( classification ) => {
+    //             // Find corresponding anomaly from `classifications[id].anomaly => anomalies` table
+    //             const dbAnomalyId = `db-${classification.anomaly}`
+    //             const anomaly = anomalies.find((a) => a.id === dbAnomalyId);
+    //             if (anomaly) {
+    //                 return {
+    //                     ...anomaly,
+    //                     classified: true,
+    //                     discoveryDate: new Date(classification.created_at).toLocaleDateString(),
+    //                     classificationId: classification.id,
+    //                     classificationContent: classification.content,
+    //                     discoveredBy: showAllDiscoveries ? `User${classification.author?.slice(-4)}` : undefined,
+    //                 };
+    //             };
+
+    //             // If anomaly not found - fallback
+    //             const mapClassificationType = (type: string): WeatherAnomaly["type"] => {
+    //                 switch (type) {
+    //                     case "storm":
+    //                         return "storm";
+    //                     case "cloud":
+    //                         return "cloud_formation";
+    //                     case "atmospheric":
+    //                         return "atmospheric_phenomenon";
+    //                     case "surface":
+    //                         return "surface_weather";
+    //                     case "geological":
+    //                         return "geological_weather";
+    //                     default:
+    //                         return "cloud_formation";
+    //                 };
+    //             };
+
+    //             const mapProjectType = (type: string): string => {
+    //                     switch (type) {
+    //                     case "storm":
+    //                         return "storm-tracking"
+    //                     case "cloud":
+    //                         return "cloud-classification"
+    //                     case "atmospheric":
+    //                         return "atmospheric-phenomena"
+    //                     case "surface":
+    //                         return "surface-weather"
+    //                     case "geological":
+    //                         return "geological-weather"
+    //                     default:
+    //                         return "cloud-classification"
+    //                 };
+    //             };
+                
+    //             const anomalyType = mapClassificationType(classification.classificationtype || "cloud");
+    //             const project = mapProjectType(classification.classificationtype || "cloud");
+
+    //             // If you want to return a fallback WeatherAnomaly object, construct and return it here.
+    //             // Otherwise, return undefined to filter out this entry.
+    //             return undefined;
+    //         })
+    //         .filter((anomaly): anomaly is (WeatherAnomaly & { classified: boolean; discoveryDate: string; classificationId: any; classificationContent: any; discoveredBy?: string }) => anomaly !== undefined);
+    // };
+
+    return (
+        <div className="h-full bg-gradient-to-br from-[#263238] via-[#37474F] to-[#455A64] p-4 overflow-hidden">
+            <div className="max-w-7xl mx-auto h-full flex flex-col">
+                {/* Header */}
+                <div className="mb-4">
+                    <div className="flex items-center gap-3 mb-3">
+                        <Button onClick={onBack} size="sm" className="bg-[#607D8B] text-white hover:bg-[#546E7A]">
+                            <ArrowLeft className="h-3 w-3 mr-1" />
+                                Back
+                        </Button>
+                        <h1 className="text-xl font-bold text-[#ECEFF4]">Weather Archive</h1>
+                        <Badge className="bg-[#4CAF50] text-white text-xs">
+                            {showAllDiscoveries ? "All Users" : "Your Discoveries"}
+                        </Badge>
+                    </div>
+
+                    {selectedProject && (
+                        <div className="bg-gradient-to-r from=[#37474F] to-[#455A64] border border-[#607D8B] rounded-lg p-3">
+                            <div className="flex items-center gap-3">
+                                <div
+                                    className="w-8 h-8 rounded-full flex items-center justify-center text-white"
+                                    style={{ background: selectedProject.bgGradient }}
+                                >
+                                    {selectedProject.icon}
+                                </div>
+                                <div>
+                                    <h3 className="text-base font-bold text-[#ECEFF4]">
+                                        {selectedProject.name}
+                                    </h3>
+                                    <p className="text-[#B0BEC5] text-xs">{selectedProject.description}</p>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                </div>
+
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 flex-1 overflow-hidden">
+                    <div className="flex flex-col">
+                        {/* <h3 className="text-base font-bold mb-3 flex items-center gap-2 text-[#ECEFF4]">
+                            <CheckCircle2 className="h-4 w-4 text-[#4CAF50]" />
+                            Classified Anomalies ({ filteredAnomalies.length })
+                        </h3>
+
+                        {filteredAnomalies.length === 0 ? (
+
+                        ) : (
+
+                        )} */}
+                    </div>
+
+                    {/* Missions for balloon */}
+                </div>
+            </div>
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/components/Structures/Auto/WeatherBalloon/balloon-header.tsx b/components/Structures/Auto/WeatherBalloon/balloon-header.tsx
new file mode 100644
index 000000000..27d0b8fed
--- /dev/null
+++ b/components/Structures/Auto/WeatherBalloon/balloon-header.tsx
@@ -0,0 +1,122 @@
+'use client'
+
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Switch } from "@/components/ui/switch";
+import { Grid3X3, Trophy, Target, Users, User, Globe } from "lucide-react";
+import type { WeatherProject, ViewMode, Planet } from "@/types/Structures/WeatherBalloon";
+
+interface WeatherHeaderProps {
+  selectedProject: WeatherProject | null;
+  selectedPlanet: Planet | null;
+  viewMode: ViewMode;
+  toggleProjectPanel: () => void;
+  setViewMode: (mode: ViewMode) => void;
+  classifiedCount: number;
+  availableMissionsCount: number;
+  showAllDiscoveries: boolean;
+  setShowAllDiscoveries: (show: boolean) => void;
+};
+
+export function WeatherHeader({
+  selectedProject,
+  selectedPlanet,
+  viewMode,
+  toggleProjectPanel,
+  setViewMode,
+  classifiedCount,
+  availableMissionsCount,
+  showAllDiscoveries,
+  setShowAllDiscoveries,
+}: WeatherHeaderProps) {
+  return (
+    <header className="bg-gradient-to-r from-[#263238] to-[#37474F] border-b border-[#607D8B] p-3 shadow-lg">
+      <div className="flex justify-between items-center">
+        {/* Left Side - Title */}
+        <div className="flex items-center gap-3">
+          <div>
+            <h1 className="text-lg font-bold text-[#ECEFF4]">Weather Observatory</h1>
+            <p className="text-xs text-[#B0BEC5]">
+              {selectedPlanet ? `${selectedPlanet.name} Analysis` : "Meteorological Platform"}
+            </p>
+          </div>
+        </div>
+
+        {/* Right Side - Controls & Stats */}
+        <div className="flex items-center gap-3">
+          {/* Discovery Toggle */}
+          <div className="flex items-center gap-2 bg-[#455A64] rounded-lg px-2 py-1 border border-[#546E7A]">
+            <User className="h-3 w-3 text-[#B0BEC5]" />
+            <Switch
+              checked={showAllDiscoveries}
+              onCheckedChange={setShowAllDiscoveries}
+              className="data-[state=checked]:bg-[#607D8B] scale-75"
+            />
+            <Users className="h-3 w-3 text-[#B0BEC5]" />
+            <span className="text-xs text-[#ECEFF4] ml-1">{showAllDiscoveries ? "All" : "Mine"}</span>
+          </div>
+
+          {/* Stats Badges */}
+          <div className="flex items-center gap-2">
+            <Badge className="bg-[#607D8B] text-white px-2 py-1 text-xs">
+              <Trophy className="h-3 w-3 mr-1" />
+              {classifiedCount}
+            </Badge>
+            <Badge className="bg-[#4CAF50] text-white px-2 py-1 text-xs">
+              <Target className="h-3 w-3 mr-1" />
+              {availableMissionsCount}
+            </Badge>
+          </div>
+
+          {/* Project Filter */}
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={toggleProjectPanel}
+            className="bg-[#455A64] border-[#607D8B] text-[#ECEFF4] hover:bg-[#546E7A] text-xs px-2 py-1 h-8"
+          >
+            {selectedProject ? (
+              <div className="flex items-center gap-1">
+                {selectedProject.icon}
+                <span className="hidden sm:inline">{selectedProject.name}</span>
+              </div>
+            ) : (
+              "Projects"
+            )}
+          </Button>
+
+          {/* View Toggle */}
+          <Button
+            variant={viewMode === "discoveries" ? "default" : "outline"}
+            size="sm"
+            onClick={() =>
+              setViewMode(viewMode === "surface" ? "discoveries" : viewMode === "discoveries" ? "planets" : "surface")
+            }
+            className={`text-xs px-2 py-1 h-8 ${
+              viewMode === "discoveries"
+                ? "bg-[#607D8B] text-white hover:bg-[#546E7A]"
+                : "bg-[#455A64] border-[#607D8B] text-[#ECEFF4] hover:bg-[#546E7A]"
+            }`}
+          >
+            {viewMode === "planets" ? (
+              <>
+                <Globe className="h-3 w-3 mr-1" />
+                <span className="hidden sm:inline">Planets</span>
+              </>
+            ) : viewMode === "surface" ? (
+              <>
+                <Grid3X3 className="h-3 w-3 mr-1" />
+                <span className="hidden sm:inline">Archive</span>
+              </>
+            ) : (
+              <>
+                <Globe className="h-3 w-3 mr-1" />
+                <span className="hidden sm:inline">Observatory</span>
+              </>
+            )}
+          </Button>
+        </div>
+      </div>
+    </header>
+  );
+};
\ No newline at end of file
diff --git a/components/Structures/Auto/WeatherBalloon/balloon-surface-view.tsx b/components/Structures/Auto/WeatherBalloon/balloon-surface-view.tsx
new file mode 100644
index 000000000..dc791c371
--- /dev/null
+++ b/components/Structures/Auto/WeatherBalloon/balloon-surface-view.tsx
@@ -0,0 +1,279 @@
+"use client";
+
+import type React from "react";
+import { useRef } from "react";
+import type { WeatherAnomaly, Planet } from "@/types/Structures/WeatherBalloon";
+
+import { ArrowLeft, Thermometer, Wind, Eye, Move, Gauge, Activity, Satellite, Radio } from "lucide-react"
+import { Button } from "@/components/ui/button"
+
+interface WeatherSurfaceViewProps {
+  planet: Planet
+  filteredAnomalies: WeatherAnomaly[]
+  isDragging: boolean
+  handleMouseDown: (e: React.MouseEvent) => void
+  handleMouseMove: (e: React.MouseEvent) => void
+  handleMouseUp: () => void
+  handleAnomalyClick: (anomaly: WeatherAnomaly) => void
+  currentRegionName: string
+  focusedAnomaly?: WeatherAnomaly | null
+  onBackToPlanets: () => void
+}
+
+export function WeatherSurfaceView({
+  planet,
+  filteredAnomalies,
+  isDragging,
+  handleMouseDown,
+  handleMouseMove,
+  handleMouseUp,
+  handleAnomalyClick,
+  currentRegionName,
+  focusedAnomaly,
+  onBackToPlanets,
+}: WeatherSurfaceViewProps) {
+  const viewportRef = useRef<HTMLDivElement>(null);
+
+  const getPlanetTheme = (planetId: string) => {
+    switch (planetId) {
+      case "earth":
+        return {
+          primary: "#4FC3F7",
+          secondary: "#29B6F6",
+          bg: "from-[#0277BD] via-[#0288D1] to-[#039BE5]",
+          surface: "from-[#001a2e] via-[#002a3a] to-[#003a4a]",
+          frame: "from-[#37474F] to-[#263238]",
+          atmosphere: "#E3F2FD",
+        }
+      case "mars":
+        return {
+          primary: "#FF7043",
+          secondary: "#FF5722",
+          bg: "from-[#D84315] via-[#E64A19] to-[#FF3D00]",
+          surface: "from-[#2a0a00] via-[#3a1500] to-[#4a2000]",
+          frame: "from-[#5D4037] to-[#3E2723]",
+          atmosphere: "#FFCCBC",
+        }
+      case "venus":
+        return {
+          primary: "#FFC107",
+          secondary: "#FF9800",
+          bg: "from-[#E65100] via-[#EF6C00] to-[#FF6F00]",
+          surface: "from-[#2a1a00] via-[#3a2500] to-[#4a3000]",
+          frame: "from-[#FF8F00] to-[#E65100]",
+          atmosphere: "#FFF9C4",
+        }
+      default:
+        return {
+          primary: "#4FC3F7",
+          secondary: "#29B6F6",
+          bg: "from-[#0277BD] via-[#0288D1] to-[#039BE5]",
+          surface: "from-[#001a2e] via-[#002a3a] to-[#003a4a]",
+          frame: "from-[#37474F] to-[#263238]",
+          atmosphere: "#E3F2FD",
+        }
+    }
+  }
+
+  const theme = getPlanetTheme(planet.id)
+
+  return (
+    <div className={`h-full bg-gradient-to-br ${theme.bg} p-4 flex items-center justify-center`}>
+      {/* Main Observatory Frame */}
+      <div
+        className={`relative w-full h-full max-w-6xl max-h-[800px] bg-gradient-to-br ${theme.frame} rounded-2xl shadow-2xl border-2 border-[#455A64] p-4`}
+      >
+        {/* Top Control Panel */}
+        <div className="absolute top-4 left-4 right-4 h-12 bg-gradient-to-r from-[#546E7A] to-[#455A64] rounded-xl border border-[#37474F] flex items-center justify-between px-4">
+          <div className="flex items-center gap-3">
+            <Button
+              onClick={onBackToPlanets}
+              size="sm"
+              className="bg-white/20 hover:bg-white/30 text-white border-none"
+            >
+              <ArrowLeft className="h-3 w-3 mr-1" />
+              Planets
+            </Button>
+            <div className="w-3 h-3 bg-[#4CAF50] rounded-full border border-[#37474F] animate-pulse" />
+            <div className="text-[#ECEFF4] font-bold text-sm">{planet.name.toUpperCase()} OBSERVATORY</div>
+          </div>
+          <div className="flex items-center gap-3 text-[#ECEFF4] text-xs">
+            <div className="flex items-center gap-1">
+              <Radio className="h-3 w-3" />
+              <span>ACTIVE</span>
+            </div>
+            <div className="flex items-center gap-1">
+              <Activity className="h-3 w-3" />
+              <span>MONITORING</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Left Control Panel */}
+        <div className="absolute left-4 top-20 bottom-16 w-24 bg-gradient-to-b from-[#455A64] to-[#37474F] rounded-xl border border-[#263238] p-3 space-y-3">
+          <div className="h-12 bg-[#263238] rounded border border-[#37474F] flex items-center justify-center">
+            <Thermometer className="h-4 w-4" style={{ color: theme.primary }} />
+          </div>
+          <div className="h-8 bg-[#263238] rounded border border-[#37474F] flex items-center justify-center">
+            <div className="text-[#4CAF50] text-xs font-mono">TEMP</div>
+          </div>
+          <div className="space-y-1">
+            <div
+              className="w-6 h-6 rounded-full border border-[#263238] mx-auto"
+              style={{ backgroundColor: theme.primary }}
+            />
+            <div
+              className="w-4 h-4 rounded border border-[#263238] mx-auto"
+              style={{ backgroundColor: theme.secondary }}
+            />
+          </div>
+          <div className="space-y-1">
+            <div className="h-1 bg-[#263238] rounded border border-[#37474F]">
+              <div className="h-full w-3/4 bg-[#4CAF50] rounded" />
+            </div>
+            <div className="h-1 bg-[#263238] rounded border border-[#37474F]">
+              <div className="h-full w-1/2 bg-[#FFC107] rounded" />
+            </div>
+          </div>
+        </div>
+
+        {/* Right Control Panel */}
+        <div className="absolute right-4 top-20 bottom-16 w-24 bg-gradient-to-b from-[#455A64] to-[#37474F] rounded-xl border border-[#263238] p-3 space-y-3">
+          <div className="h-12 bg-[#263238] rounded border border-[#37474F] p-2">
+            <div className="flex flex-col gap-1">
+              <div className="text-[#03A9F4] text-xs font-mono">ATM</div>
+              <div className="h-1 bg-[#03A9F4] rounded w-full" />
+              <div className="text-[#FFC107] text-xs font-mono">HUM</div>
+              <div className="h-1 bg-[#FFC107] rounded w-2/3" />
+            </div>
+          </div>
+          <div className="grid grid-cols-2 gap-1">
+            <div className="w-full h-4 rounded border border-[#263238]" style={{ backgroundColor: theme.primary }} />
+            <div className="w-full h-4 bg-[#F44336] rounded border border-[#263238]" />
+            <div className="w-full h-4 bg-[#4CAF50] rounded border border-[#263238]" />
+            <div className="w-full h-4 bg-[#FFC107] rounded border border-[#263238]" />
+          </div>
+          <div className="h-12 bg-[#263238] rounded border border-[#37474F] flex flex-col justify-center items-center">
+            <Wind className="h-3 w-3 text-[#9C27B0] mb-1" />
+            <div className="text-[#9C27B0] text-xs font-mono">WIND</div>
+          </div>
+        </div>
+
+        {/* Bottom Control Strip */}
+        <div className="absolute bottom-4 left-28 right-28 h-8 bg-gradient-to-r from-[#455A64] to-[#37474F] rounded-lg border border-[#263238] flex items-center justify-center gap-4">
+          <div className="flex items-center gap-1 text-[#03A9F4] text-xs font-mono">
+            <Gauge className="h-3 w-3" />
+            <span>REGION: {currentRegionName}</span>
+          </div>
+          <div className="w-px h-4 bg-[#37474F]" />
+          <div className="flex items-center gap-1 text-[#4CAF50] text-xs font-mono">
+            <Satellite className="h-3 w-3" />
+            <span>ACTIVE</span>
+          </div>
+          <div className="w-px h-4 bg-[#37474F]" />
+          <div className="flex items-center gap-1 text-[#FFC107] text-xs font-mono">
+            <Eye className="h-3 w-3" />
+            <span>{filteredAnomalies.length} PHENOMENA</span>
+          </div>
+        </div>
+
+        {/* Main Weather Viewport */}
+        <div className="absolute left-28 right-28 top-20 bottom-16 bg-gradient-to-br from-[#263238] to-[#37474F] rounded-xl border-2 border-[#455A64] p-1">
+          <div
+            ref={viewportRef}
+            className="w-full h-full rounded-lg overflow-hidden cursor-move border border-[#607D8B] relative"
+            style={{
+              background: `
+                radial-gradient(ellipse at 20% 30%, rgba(255,255,255,0.05) 0%, transparent 50%),
+                radial-gradient(ellipse at 80% 70%, rgba(255,255,255,0.03) 0%, transparent 50%),
+                linear-gradient(135deg, ${theme.surface.replace("from-[", "").replace("] via-[", ", ").replace("] to-[", ", ").replace("]", "")})
+              `,
+            }}
+            onMouseDown={handleMouseDown}
+            onMouseMove={handleMouseMove}
+            onMouseUp={handleMouseUp}
+            onMouseLeave={handleMouseUp}
+          >
+            {/* Enhanced atmospheric effects */}
+            <div className="absolute inset-0 opacity-20">
+              {Array.from({ length: 40 }).map((_, i) => (
+                <div
+                  key={i}
+                  className="absolute rounded-full"
+                  style={{
+                    left: `${Math.random() * 100}%`,
+                    top: `${Math.random() * 100}%`,
+                    width: `${Math.random() * 25 + 8}px`,
+                    height: `${Math.random() * 15 + 5}px`,
+                    background: `radial-gradient(ellipse, ${theme.atmosphere}40 0%, transparent 70%)`,
+                    opacity: Math.random() * 0.4 + 0.1,
+                    animation: `atmosphericDrift ${Math.random() * 12 + 6}s linear infinite`,
+                    animationDelay: `${Math.random() * 5}s`,
+                    borderRadius: "60% 40% 50% 70%",
+                  }}
+                />
+              ))}
+            </div>
+
+            {/* Weather Anomalies */}
+            {/* {filteredAnomalies.map((anomaly) => (
+              <WeatherAnomalyComponent
+                key={anomaly.id}
+                anomaly={anomaly}
+                onClick={handleAnomalyClick}
+                isHighlighted={focusedAnomaly?.id === anomaly.id}
+              />
+            ))} */}
+
+            {/* Crosshair */}
+            <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none">
+              <div className="w-6 h-6 border border-white/20 rounded-full">
+                <div className="absolute top-1/2 left-0 w-full h-px bg-white/20 transform -translate-y-1/2" />
+                <div className="absolute left-1/2 top-0 w-px h-full bg-white/20 transform -translate-x-1/2" />
+              </div>
+            </div>
+
+            {/* Drag Indicator */}
+            {isDragging && (
+              <div className="absolute top-3 left-1/2 transform -translate-x-1/2 bg-black/70 text-white px-2 py-1 rounded text-xs flex items-center gap-1 pointer-events-none">
+                <Move className="h-3 w-3" />
+                <span>Navigating...</span>
+              </div>
+            )}
+
+            {/* Focus Indicator */}
+            {focusedAnomaly && (
+              <div className="absolute top-3 right-3 bg-black/70 text-white px-2 py-1 rounded text-xs pointer-events-none">
+                <div className="font-bold">{focusedAnomaly.name}</div>
+                <div className="text-xs opacity-90">Locked</div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Corner Details */}
+        <div
+          className="absolute top-4 left-4 w-6 h-6 rounded-full border border-[#263238]"
+          style={{ backgroundColor: theme.primary }}
+        />
+        <div className="absolute top-4 right-4 w-4 h-4 bg-[#4CAF50] rounded border border-[#263238]" />
+        <div className="absolute bottom-4 left-4 w-4 h-4 bg-[#FFC107] rounded border border-[#263238]" />
+        <div
+          className="absolute bottom-4 right-4 w-6 h-6 rounded-full border border-[#263238]"
+          style={{ backgroundColor: theme.secondary }}
+        />
+      </div>
+
+      {/* CSS for enhanced atmospheric animations */}
+      <style jsx>{`
+        @keyframes atmosphericDrift {
+          0% { transform: translateX(0px) translateY(0px) rotate(0deg) scaleX(1); }
+          25% { transform: translateX(15px) translateY(-8px) rotate(2deg) scaleX(1.1); }
+          50% { transform: translateX(-8px) translateY(12px) rotate(-1deg) scaleX(0.9); }
+          75% { transform: translateX(20px) translateY(6px) rotate(3deg) scaleX(1.05); }
+          100% { transform: translateX(0px) translateY(0px) rotate(0deg) scaleX(1); }
+        }
+      `}</style>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/components/Structures/IndividualStructure.tsx b/components/Structures/IndividualStructure.tsx
index fec544711..de1abf5d3 100644
--- a/components/Structures/IndividualStructure.tsx
+++ b/components/Structures/IndividualStructure.tsx
@@ -103,7 +103,7 @@ const IndividualStructure: React.FC<IndividualStructureProps> = ({
       <div className="relative transition-all duration-500 ease-in-out">
         {!activeComponent && (
           <DialogContent
-            className="p-6 rounded-3xl text-white max-w-3xl mx-auto"
+            className="rounded-3xl text-white w-full max-w-screen-md lg:max-w-[1000px] h-[80vh] overflow-y-auto p-8 shadow-xl"
             style={{ background: 'linear-gradient(135deg, rgba(44, 79, 100, 0.7), rgba(95, 203, 195, 0.7))' }}
           >
             <div className="flex justify-between items-center">
diff --git a/components/Structures/Missions/Astronomers/DailyMinorPlanet/DailyMinorPlanet.tsx b/components/Structures/Missions/Astronomers/DailyMinorPlanet/DailyMinorPlanet.tsx
index 984594106..adeeb109f 100644
--- a/components/Structures/Missions/Astronomers/DailyMinorPlanet/DailyMinorPlanet.tsx
+++ b/components/Structures/Missions/Astronomers/DailyMinorPlanet/DailyMinorPlanet.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
 import { BarChartBigIcon, GlassWater, Guitar, HelpCircle, PenBoxIcon, RadioIcon, SpeechIcon, TelescopeIcon, VoteIcon } from "lucide-react";
 import MissionShell from "../../BasePlate";
-import { DailyMinorPlanet, StarterDailyMinorPlanet } from "@/components/Projects/Telescopes/DailyMinorPlanet";
+import { DailyMinorPlanetWithId, StarterDailyMinorPlanet } from "@/components/Projects/Telescopes/DailyMinorPlanet";
 import VoteDMPClassifications from "./DMPVote";
 import DMPGenerator from "./AsteroidMaker";
 import { ActiveAsteroidWithId } from "@/components/Projects/Telescopes/ActiveAsteroids";
@@ -16,7 +16,7 @@ interface Mission {
   points?: number;
   completedCount?: number;
   internalComponent: React.ElementType | (() => JSX.Element);
-  color: string;
+  color: string; 
 };
 
 const DailyMinorPlanetMissions = () => {
@@ -32,7 +32,7 @@ const DailyMinorPlanetMissions = () => {
       icon: TelescopeIcon,
       points: 2, 
       completedCount: 0,
-      internalComponent: () => <DailyMinorPlanet />,
+      internalComponent: () => <DailyMinorPlanetWithId />,
       color: "text-blue-500",
       shadow: false,
       action: () => {},
@@ -45,7 +45,7 @@ const DailyMinorPlanetMissions = () => {
       icon: RadioIcon,
       points: 1,
       completedCount: 0,
-      internalComponent: () => <DailyMinorPlanet />,
+      internalComponent: () => <DailyMinorPlanetWithId />,
       color: "text-green-500",
       shadow: false,
       action: () => {},
diff --git a/components/Structures/Missions/Astronomers/PlanetHunters/PHVote.tsx b/components/Structures/Missions/Astronomers/PlanetHunters/PHVote.tsx
index 5ad5aad6e..5b69fd188 100644
--- a/components/Structures/Missions/Astronomers/PlanetHunters/PHVote.tsx
+++ b/components/Structures/Missions/Astronomers/PlanetHunters/PHVote.tsx
@@ -1,183 +1,126 @@
 'use client';
 
 import React, { useEffect, useState } from "react";
-import { PostCardSingle } from "@/content/Posts/PostSingle";
 import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
-import StarnetLayout from "@/components/Layout/Starnet";
 import PostCard from "@/content/Posts/TestPostCard";
 
-interface Classification {
-    id: number;
-    created_at: string;
-    content: string | null; 
-    author: string | null;
-    anomaly: number | null; 
-    media: any | null; 
-    classificationtype: string | null;
-    classificationConfiguration: any | null; 
+interface VotePlanetClassificationsProps { 
+  classificationId: string | number;
 };
 
-export default function VotePlanetClassifications() {
-    const supabase = useSupabaseClient();
-    const session = useSession();
+export default function VotePlanetClassifications({ classificationId }: VotePlanetClassificationsProps) {
+  const supabase = useSupabaseClient();
+  const session = useSession();
 
-    const [classifications, setClassifications] = useState<any[]>([]);
-    const [loading, setLoading] = useState<boolean>(true);
-    const [error, setError] = useState<string | null>(null);
-    const [currentIndex, setCurrentIndex] = useState<number>(0);
+  const [classification, setClassification] = useState<any | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
 
-    const fetchClassifications = async () => {
-        if (!session?.user) {
-          setError("User session not found.");
-          setLoading(false);
-          return; 
-        };
-
-        setLoading(true);
-        setError(null);
-        try {
-          const { data, error } = await supabase
-            .from('classifications')
-            .select('*')
-            .eq('classificationtype', 'planet')
-            .order('created_at', { ascending: false }) as { data: Classification[]; error: any };
-
-          if (error) throw error;
-
-          const processedData = data.map((classification) => {
-            const media = classification.media;
-            let image: string | null = null;
-
-            if (Array.isArray(media)) {
-                for (const subArray of media) {
-                    if (Array.isArray(subArray) && subArray.length > 0) {
-                        image = subArray[0];
-                        break;
-                    }
-                }
-            } else if (media && typeof media.uploadUrl === "string") {
-                image = media.uploadUrl;
-            }
-
-            const votes = classification.classificationConfiguration?.votes || 0;
+  const fetchClassification = async () => {
+    if (!session?.user) {
+      setError("User session not found.");
+      setLoading(false);
+      return;
+    };
 
-            return { ...classification, image, votes };
-          });
+    setLoading(true);
+    setError(null);
 
-          setClassifications(processedData);
-        } catch (error) {
-          console.error("Error fetching classifications:", error);
-          setError("Failed to load classifications.");
-        } finally {
-          setLoading(false);
-        };
-    };
+    try {
+      const { data, error } = await supabase
+        .from("classifications")
+        .select("*")
+        .eq("id", classificationId)
+        .single(); 
 
-    useEffect(() => {
-        fetchClassifications();
-    }, [session]);
+      if (error) throw error;
 
-    const handleVote = async (classificationId: number, currentConfig: any) => {
-        try {
-          const currentVotes = currentConfig?.votes || 0;
+      let image: string | null = null;
+      const media = data.media;
 
-          const updatedConfig = {
-            ...currentConfig,
-            votes: currentVotes + 1,
+      if (Array.isArray(media)) {
+        for (const subArray of media) {
+          if (Array.isArray(subArray) && subArray.length > 0) {
+            image = subArray[0];
+            break;
           };
-
-          const { error } = await supabase
-            .from("classifications")
-            .update({ classificationConfiguration: updatedConfig })
-            .eq("id", classificationId);
-
-          if (error) {
-            console.error("Error updating classificationConfiguration:", error);
-          } else {
-            setClassifications((prevClassifications) =>
-              prevClassifications.map((classification) =>
-                classification.id === classificationId
-                  ? { ...classification, votes: updatedConfig.votes }
-                  : classification
-              )
-            );
-          }
-        } catch (error) {
-          console.error("Error voting:", error);
         };
+      } else if (media && typeof media.uploadUrl === "string") {
+        image = media.uploadUrl;
+      };
+
+      const votes = data.classificationConfiguration?.votes || 0;
+
+      setClassification({ ...data, image, votes });
+    } catch (error) {
+      console.error("Error fetching classification:", error);
+      setError("Failed to load classification.");
+    } finally {
+      setLoading(false);
     };
-
-    const nextPost = () => {
-        setCurrentIndex((prevIndex) => Math.min(prevIndex + 1, classifications.length - 1));
-    };
-
-    const prevPost = () => {
-        setCurrentIndex((prevIndex) => Math.max(prevIndex - 1, 0));
+  };
+
+  useEffect(() => {
+    fetchClassification();
+  }, [session, classificationId]);
+
+  const handleVote = async (classificationId: number, currentConfig: any) => {
+    try {
+      const currentVotes = currentConfig?.votes || 0;
+
+      const updatedConfig = {
+        ...currentConfig,
+        votes: currentVotes + 1,
+      };
+
+      const { error } = await supabase
+        .from("classifications")
+        .update({ classificationConfiguration: updatedConfig })
+        .eq("id", classificationId);
+
+      if (error) {
+        console.error("Error updating classificationConfiguration:", error);
+      } else {
+        setClassification((prev: any) =>
+          prev ? { ...prev, votes: updatedConfig.votes } : prev
+        );
+      };
+    } catch (error) {
+      console.error("Error voting:", error);
     };
+  };
 
-    return (
-        <div className="container mx-auto p-4 max-w-md">
+  return (
+    <div className="w-full max-w-4xl mx-auto rounded-lg">
       <div className="space-y-6">
         {loading ? (
-          <p className="text-center text-gray-400">Loading classifications...</p>
+          <p className="text-center text-gray-400">Loading classification...</p>
         ) : error ? (
           <p className="text-center text-red-500">{error}</p>
-        ) : classifications.length === 0 ? (
-          <p className="text-center text-gray-400">No classifications available.</p>
+        ) : classification ? (
+          <PostCard
+            classificationId={classification.id}
+            title={classification.title}
+            author={classification.author}
+            content={classification.content}
+            votes={classification.votes}
+            category={classification.category}
+            tags={classification.tags || []}
+            images={classification.image ? [classification.image] : []}
+            anomalyId={classification.anomaly}
+            classificationConfig={classification.classificationConfiguration}
+            classificationType={classification.classificationtype}
+            onVote={() =>
+              handleVote(
+                classification.id,
+                classification.classificationConfiguration
+              )
+            }
+          />
         ) : (
-          classifications.map((classification) => (
-            <PostCard
-              key={classification.id}
-              classificationId={classification.id}
-              title={classification.title}
-              author={classification.author}
-              content={classification.content}
-              votes={classification.votes}
-              category={classification.category}
-              tags={classification.tags || []}
-              images={classification.image ? [classification.image] : []}
-              anomalyId={classification.anomaly}
-              classificationConfig={classification.classificationConfiguration}
-              classificationType={classification.classificationtype}
-              onVote={() => handleVote(classification.id, classification.classificationConfiguration)}
-            />
-                              /* <PostCardSingle
-                    classificationId={classification.id}
-                    title={classification.title}
-                    author={classification.author}
-                    content={classification.content}
-                    votes={classification.votes || 0}
-                    category={classification.category}
-                    tags={classification.tags || []}
-                    images={classification.image ? [classification.image] : []}
-                    anomalyId={classification.anomaly}
-                    classificationConfig={classification.classificationConfiguration}
-                    classificationType={classification.classificationtype}
-                    onVote={() => handleVote(classification.id, classification.classificationConfiguration)}
-                  /> */
-          ))
+          <p className="text-center text-gray-400">Classification not found.</p>
         )}
       </div>
-        
-        {/* <div className="absolute top-1/2 left-0 transform -translate-y-1/2">
-            <button
-                onClick={prevPost}
-                className="bg-gray-800 text-white p-2 rounded-l-md hover:bg-gray-600"
-                disabled={currentIndex === 0}
-            >
-                Prev
-            </button>
-        </div>
-
-        <div className="absolute top-1/2 right-0 transform -translate-y-1/2">
-            <button
-                onClick={nextPost}
-                className="bg-gray-800 text-white p-2 rounded-r-md hover:bg-gray-600"
-                disabled={currentIndex === classifications.length - 1}
-            >
-                Next
-            </button>
-        </div> */}
-      </div>
-    );
+    </div>
+  );
 };
\ No newline at end of file
diff --git a/components/Structures/Missions/Astronomers/PlanetHunters/PlanetHunters.tsx b/components/Structures/Missions/Astronomers/PlanetHunters/PlanetHunters.tsx
index 66b384284..06a6cdd99 100644
--- a/components/Structures/Missions/Astronomers/PlanetHunters/PlanetHunters.tsx
+++ b/components/Structures/Missions/Astronomers/PlanetHunters/PlanetHunters.tsx
@@ -1,306 +1,234 @@
 import { useEffect, useState } from "react";
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
-import { TelescopeIcon, RadioIcon, SpeakerIcon, DiscAlbum, PersonStandingIcon, Paintbrush2, HelpCircle } from "lucide-react";
-import PlanetTypeCommentForm from "./PlanetType";
-import { FirstTelescopeClassification, StarterTelescopeTess } from "@/components/Projects/Telescopes/Transiting";
-import VotePlanetClassifictions from "./PHVote";
-import PHClassificationGenerator from "./PlanetMaker";
-import PlanetTemperatureForm from "./PlanetTemperature";
-import PlanetHuntersTemperatureWrapper from "./PlanetTemperature";
-
-export interface MissionStep {
+import { useRouter } from "next/navigation";
+import MissionShell from "../../BasePlate";
+import {
+  TelescopeIcon,
+  SpeakerIcon,
+  DiscAlbum,
+  Paintbrush2Icon,
+} from "lucide-react";
+
+interface Mission {
   id: number;
   title: string;
   description: string;
-  points?: number;
-  icon: React.ElementType;
-  action: () => void;
+  icon: any;
+  points: number;
   completedCount: number;
+  link?: string;
+  slug?: string;
   color: string;
   chapter: number;
-};
+  action?: () => void;
+}
 
 const PlanetHuntersSteps = () => {
   const supabase = useSupabaseClient();
   const session = useSession();
+  const router = useRouter();
+
+  const [planetClassifications, setPlanetClassifications] = useState<any[]>([]);
+  const [selectedClassificationId, setSelectedClassificationId] = useState<number | null>(null);
+
+  // Base missions with slug placeholders
+  const baseMissions: Mission[] = [
+    {
+      id: 1,
+      title: "Discover planets",
+      description: "Use your telescope to classify planet candidates",
+      icon: TelescopeIcon,
+      points: 1,
+      completedCount: 0,
+      link: "/structures/telescope/planet-hunters/classify",
+      color: "text-blue-500",
+      chapter: 1,
+    },
+    {
+      id: 2,
+      title: "Identify planet types",
+      description: "Make a comment proposing a planet type for a classification.",
+      icon: SpeakerIcon,
+      points: 1,
+      completedCount: 0,
+      slug: "/structures/telescope/planet-hunters/{classificationid}/comment/",
+      color: "text-green-500",
+      chapter: 1,
+    },
+    {
+      id: 3,
+      title: "Survey planet classifications",
+      description: "Comment & vote on a planet, suggesting stats and alterations to classifications.",
+      icon: DiscAlbum,
+      points: 1,
+      completedCount: 0,
+      slug: "/structures/telescope/planet-hunters/{classificationid}/survey",
+      color: "text-red-500",
+      chapter: 1,
+    },
+    {
+      id: 5,
+      title: "Paint a planet",
+      description: "Now comes the fun part - you can explore and customise planet candidates you've discovered",
+      icon: Paintbrush2Icon,
+      points: 1,
+      completedCount: 0,
+      slug: "/structures/telescope/planet-hunters/{classificationid}/paint/",
+      color: "text-green-300",
+      chapter: 2,
+    },
+  ];
+
+  const [missions, setMissions] = useState<Mission[]>(baseMissions);
 
-  const [steps, setSteps] = useState<MissionStep[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [selectedMission, setSelectedMission] = useState<MissionStep | null>(null);
-  const [currentChapter, setCurrentChapter] = useState<number>(1);
   const [experiencePoints, setExperiencePoints] = useState<number>(0);
   const [level, setLevel] = useState<number>(1);
+  const [currentChapter, setCurrentChapter] = useState<number>(1);
 
-  const missionPoints = {
-    1: 2,
-    2: 1,
-    3: 2,
-    4: 1,
-    5: 1,
-  };
+  const maxUnlockedChapter = Math.max(
+    Math.floor(experiencePoints / 5) + 1,
+    Math.max(...missions.map((m) => m.chapter))
+  );
 
   useEffect(() => {
-    if (!session?.user) return;
+    if (!session?.user?.id) return;
 
-    const fetchMissionData = async () => {
+    const fetchData = async () => {
       try {
-        const { data: classificationsData, error: classificationsError } = await supabase
+        const { data: classifications, error } = await supabase
           .from("classifications")
-          .select("*")
-          .eq("classificationtype", "planet")
-          .eq("author", session.user.id);
-    
-        if (classificationsError) throw classificationsError;
-    
-        const mission1CompletedCount = classificationsData?.length || 0;
-    
-        const mission2Data =
-          classificationsData?.filter((classification) => {
-            const config = classification.classificationConfiguration;
-            if (!config) return false;
-    
-            const options = config.classificationOptions?.[""] || {};
-            return (
-              !options["1"] &&
-              (options["2"] || options["3"] || options["4"])
-            );
-          }) || [];
-        const mission2CompletedCount = mission2Data.length;
-    
+          .select("id, classificationConfiguration, classificationtype, author")
+          .eq("author", session.user.id)
+          .ilike("classificationtype", "planet");
+
+        if (error) throw error;
+
+        setPlanetClassifications(classifications || []);
+        if (classifications && classifications.length > 0 && !selectedClassificationId) {
+          setSelectedClassificationId(classifications[0].id);
+        }
+
         const { data: commentsData, error: commentsError } = await supabase
           .from("comments")
-          .select("*")
+          .select("classification_id")
           .eq("author", session.user.id);
-    
         if (commentsError) throw commentsError;
-    
-        const mission3CompletedCount = commentsData?.filter(
-          (comment) => comment.configuration?.planetType
-        ).length || 0;
-    
+
         const { data: votesData, error: votesError } = await supabase
           .from("votes")
-          .select("*")
+          .select("classification_id")
           .eq("user_id", session.user.id);
-    
         if (votesError) throw votesError;
-    
-        const planetVotes = votesData?.filter((vote) =>
-          classificationsData?.some(
-            (classification) =>
-              classification.id === vote.classification_id &&
-              classification.classificationtype === "planet"
-          ),
-        ) || [];
-        const mission4CompletedCount = planetVotes.length;
-    
-        const mission5CompletedCount = commentsData?.filter(
-          (comment) =>
-            comment.configuration?.temperature
-        ).length || 0;
-    
-        const totalPoints = (
-          mission1CompletedCount * missionPoints[1] +
-          mission2CompletedCount * missionPoints[2] +
-          mission3CompletedCount * missionPoints[3] +
-          mission4CompletedCount * missionPoints[4] +
-          mission5CompletedCount * missionPoints[5]
-        );
-    
-        const newLevel = Math.floor(totalPoints / 9) + 1;
-        setLevel(newLevel);
-        setExperiencePoints(totalPoints);
-    
-        setSteps([
-          {
-            id: 1,
-            title: "Classify a Planet",
-            description: "Use your telescope to classify a planet.",
-            icon: TelescopeIcon,
-            action: () => {},
-            completedCount: mission1CompletedCount,
-            color: "text-blue-500",
-            chapter: 1,
-          },
-          {
-            id: 2,
-            title: "Propose 1 planetary candidate",
-            description: "Make a classification indicating a positive candidate.",
-            icon: RadioIcon,
-            action: () => {},
-            completedCount: mission2CompletedCount,
-            color: "text-purple-500",
-            chapter: 1,
-          },
-          // {
-          //   id: 3,
-          //   title: "Propose a planet type",
-          //   description: "Make a comment proposing a planet type for a classification.",
-          //   icon: SpeakerIcon,
-          //   action: () => {},
-          //   completedCount: mission3CompletedCount,
-          //   color: "text-green-500",
-          //   chapter: 1,
-          // },
-          {
-            id: 4,
-            title: "Survey planet classifications",
-            description: "Comment & vote on a planet, suggesting stats and alterations to classifications",
-            icon: DiscAlbum,
-            action: () => {},
-            completedCount: mission4CompletedCount,
-            color: "text-red-500",
-            chapter: 1,
-          },
-          {
-            id: 5,
-            title: "Calculate planetary temperatures",
-            description: "Use satellite data to help determine the temperature of planets you've discovered",
-            action: () => {},
-            color: 'text-yellow-700',
-            chapter: 2,
-            icon: "symbol",
-            completedCount: mission5CompletedCount,
-          },
-          {
-            id: 6,
-            title: "Make your own planet design",
-            description: "You're now able to start creating visual representations of your discoveries. These will become more advanced and accurate the more data you discover",
-            icon: Paintbrush2,
-            action: () => {},
-            completedCount: 0,
-            color: "text-yellow-500",
-            chapter: 2,
-          },
-        ]);
-    
-        setLoading(false);
-      } catch (error) {
-        console.error("Error fetching mission data:", error);
-        setLoading(false);
-      };
-    };    
 
-    fetchMissionData();
-  }, [supabase, session?.user]);
+        const { data: temperatureData, error: tempError } = await supabase
+          .from("comments")
+          .select("id")
+          .eq("author", session.user.id)
+          .eq("category", "Temperature");
+        if (tempError) throw tempError;
+
+        const mission1Completed = classifications?.length || 0;
+        const mission3Completed = commentsData?.length || 0;
+        const mission4Completed = (commentsData?.length || 0) + (votesData?.length || 0);
+        const mission5Completed = temperatureData?.length || 0;
+
+        const updatedMissions = baseMissions.map((mission) => {
+          switch (mission.id) {
+            case 1:
+              return { ...mission, completedCount: mission1Completed };
+            case 3:
+              return { ...mission, completedCount: mission3Completed };
+            case 4:
+              return { ...mission, completedCount: mission4Completed };
+            case 5:
+              return { ...mission, completedCount: mission5Completed };
+            default:
+              return mission;
+          }
+        });
+
+        const totalPoints = mission1Completed + mission3Completed + mission4Completed + mission5Completed;
+
+        setMissions(updatedMissions);
+        setExperiencePoints(totalPoints);
+        setLevel(Math.floor(totalPoints / 9) + 1);
+      } catch (err) {
+        console.error("Failed to load planet data:", err);
+      }
+    };
 
-  if (loading) return <p className="text-gray-400">Loading mission steps...</p>;
+    fetchData();
+  }, [supabase, session?.user?.id]);
 
-  if (selectedMission) {
-    return (
-      <div className="flex-1 overflow-y-auto w-full h-screen flex flex-col">
-        <div className="flex flex-col items-center bg-[#1D2833] text-white rounded-2xl shadow-lg p-8 flex-1">
-          <button
-            className="mb-4 px-5 py-2 bg-[#1D2833] text-[#5FCBC3] rounded-full hover:bg-opacity-90"
-            onClick={() => setSelectedMission(null)}
-          >
-            Back
-          </button>
-          <div className="p-4 pb-10 py-10 rounded-xl overflow-y-auto max-h-[5000px] w-full flex-1">
-            <center>
-              {selectedMission.id === 1 && <StarterTelescopeTess />}
-              {selectedMission.id === 2 && <StarterTelescopeTess />}
-              {selectedMission.id === 3 && <PlanetTypeCommentForm />}
-              {selectedMission.id === 4 && <VotePlanetClassifictions />}
-              {selectedMission.id === 5 && <PlanetHuntersTemperatureWrapper />}
-              {selectedMission.id === 6 && <PHClassificationGenerator />}
-              {selectedMission.id === 1000 && <FirstTelescopeClassification anomalyid={"6"} />}
-            </center>
-          </div>
-        </div>
-      </div>
-    );
+  // Update missions' slugs whenever selectedClassificationId changes to replace placeholder
+  useEffect(() => {
+    if (selectedClassificationId === null) return;
+
+    const updatedMissionsWithSlug = missions.map((mission) => {
+      if (mission.slug) {
+        return {
+          ...mission,
+          slug: mission.slug.replace("{classificationid}", selectedClassificationId.toString()),
+        };
+      }
+      return mission;
+    });
+
+    setMissions(updatedMissionsWithSlug);
+  }, [selectedClassificationId]);
+
+  const handlePreviousChapter = () => {
+    if (currentChapter > 1) setCurrentChapter(currentChapter - 1);
   };
 
-  const tutorialMission: MissionStep = {
-    id: 1000,
-    chapter: 1,
-    title: "Welcome to Planet Hunters",
-    description: 'Learn how to discover planet candidates by following this guide',
-    completedCount: 0,
-    points: 0,
-    icon: HelpCircle,
-    action: () => {},
-    color: 'text-yellow-500',
-  };  
-
-  const renderMission = (mission: MissionStep) => {
-    const completedCount = mission.completedCount ?? 0;
-
-    return (
-      <div
-        key={mission.id}
-        className="flex items-center p-6 rounded-2xl"
-        onClick={() => setSelectedMission(mission)}
-      >
-        <mission.icon className={`w-10 h-10 ${mission.color}`} />
-        <div className="ml-4">
-          <h2 className={`text-lg font-bold ${mission.color}`}>{mission.title}</h2>
-          <p className={`text-sm ${mission.color}`}>{mission.description}</p>
-        </div>
-        <div className="ml-auto text-right">
-          <p className="text-xs">Completed: {completedCount}</p>
-          <p className="text-xl font-bold">{completedCount}</p>
-        </div>
-      </div>
-    );
+  const handleNextChapter = () => {
+    if (currentChapter < maxUnlockedChapter) setCurrentChapter(currentChapter + 1);
   };
 
-  const filteredSteps = steps.filter((step) => step.chapter === currentChapter);
-
-  const maxChapter = Math.max(...steps.map(step => step.chapter));
+  const handleMissionClick = (mission: Mission) => {
+    if (mission.link) {
+      router.push(mission.link);
+    } else if (mission.slug) {
+      // slug is already replaced by useEffect
+      router.push(mission.slug);
+    };
+  };
 
   return (
-    <div className="flex flex-col items-center w-full text-white rounded-2xl p-6 max-w-3xl mx-auto">
-      <div className="w-full mb-4">
-        <h1 className="text-xl font-bold mb-2 text-center">Chapter {currentChapter}</h1>
-        <div className="h-2 bg-gray-600 rounded-full w-full">
-          <div
-            className="h-full bg-[#5FCBC3] rounded-full"
-            style={{ width: `${(experiencePoints / (steps.length * 9)) * 100}%` }}
-          />
-        </div>
-        <p className="text-sm text-center mt-2">{`Level ${level} - ${experiencePoints} XP`}</p>
-      </div>
-
-      <div className="flex flex-col sm:flex-row justify-between w-full mb-4">
-        <button
-          className="px-4 py-2 bg-gray-800 rounded-full w-full sm:w-auto mb-2 sm:mb-0"
-          onClick={() => setCurrentChapter(Math.max(currentChapter - 1, 1))}
-          disabled={currentChapter === 1}
-        >
-          Previous Chapter
-        </button>
-        <button
-          className="px-4 py-2 bg-gray-800 rounded-full w-full sm:w-auto"
-          onClick={() => setCurrentChapter(Math.min(currentChapter + 1, 2))}
-          disabled={currentChapter === 2}
-        >
-          Next Chapter
-        </button>
-      </div>
-
-      <div className="bg-gray-700 p-6 rounded-2xl w-full">
-        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-          {steps
-            .filter((step) => step.chapter === currentChapter)
-            .map((step) => (
-              <div
-                key={step.id}
-                className="flex items-center p-4 rounded-2xl bg-gray-800 hover:bg-gray-700 cursor-pointer"
-                onClick={() => setSelectedMission(step)}
-              >
-                <step.icon className={`w-8 h-8 ${step.color}`} />
-                <div className="ml-4 flex-1">
-                  <h2 className={`text-lg font-bold ${step.color}`}>{step.title}</h2>
-                  <p className="text-sm">{step.description}</p>
-                </div>
-              </div>
-            ))}
-        </div>
-      </div>
-      <div className="mt-6">
-        {renderMission(tutorialMission)}
+    <div className="w-full">
+      <div className="max-w-5xl mx-auto p-4">
+        {planetClassifications.length > 0 && (
+          <div className="mb-4">
+            <label className="block mb-2 text-sm font-medium text-gray-700">
+              Select a planet
+            </label>
+            <select
+              className="w-full p-2 border border-gray-300 rounded-md"
+              value={selectedClassificationId || ""}
+              onChange={(e) => setSelectedClassificationId(Number(e.target.value))}
+            >
+              {planetClassifications.map((classification) => (
+                <option key={classification.id} value={classification.id}>
+                  Planet #{classification.id}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
+        <MissionShell
+          missions={missions
+            .filter((m) => m.chapter === currentChapter)
+            .map((m) => ({
+              ...m,
+              action: () => handleMissionClick(m),
+            }))}
+          experiencePoints={experiencePoints}
+          level={level}
+          currentChapter={currentChapter}
+          maxUnlockedChapter={maxUnlockedChapter}
+          onPreviousChapter={handlePreviousChapter}
+          onNextChapter={handleNextChapter}
+        />
       </div>
     </div>
   );
diff --git a/components/Structures/Missions/Astronomers/PlanetHunters/PlanetTemperature.tsx b/components/Structures/Missions/Astronomers/PlanetHunters/PlanetTemperature.tsx
index 1e1b3cd21..c232898ff 100644
--- a/components/Structures/Missions/Astronomers/PlanetHunters/PlanetTemperature.tsx
+++ b/components/Structures/Missions/Astronomers/PlanetHunters/PlanetTemperature.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
 import { SimplePostSingle } from "@/content/Posts/SimplePostSingle";
 import { SciFiPanel } from "@/components/ui/styles/sci-fi/panel";
-import PickPlanet from "../../PickPlanetStandalone";
+// import PickPlanet from "../../PickPlanetStandalone";
 // import PlanetTempCalculator from "./TemperatureCalc";
 import { SciFiButton } from "@/components/ui/styles/sci-fi/button";
 
@@ -104,7 +104,7 @@ export default function PlanetHuntersTemperatureWrapper() {
 
   return (
     <div className="space-y-8">
-      {!selectedAnomaly && <PickPlanet onSelectAnomaly={setSelectedAnomaly} />}
+      {/* {!selectedAnomaly && <PickPlanet onSelectAnomaly={setSelectedAnomaly} />} */}
       {selectedAnomaly && <PlanetTemperatureForm anomalyid={selectedAnomaly} />}
     </div>
   );
diff --git a/components/Structures/Missions/Astronomers/PlanetHunters/PlanetType.tsx b/components/Structures/Missions/Astronomers/PlanetHunters/PlanetType.tsx
index 0c214e24c..83e546471 100644
--- a/components/Structures/Missions/Astronomers/PlanetHunters/PlanetType.tsx
+++ b/components/Structures/Missions/Astronomers/PlanetHunters/PlanetType.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useState } from "react";
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
-import { PostCardSingle } from "@/content/Posts/PostSingle";
 import { SimplePostSingle } from "@/content/Posts/SimplePostSingle";
 
 interface Classification {
@@ -10,19 +9,22 @@ interface Classification {
   title: string;
   votes: number;
   category: string;
-  // tags: string[];
   images: string[];
   anomaly: number;
   classificationtype: string;
-  media: any; 
-  classificationConfiguration: { 
+  media: any;
+  classificationConfiguration: {
     votes: number;
     classificationOptions: { [key: string]: any };
   };
   image_url?: string;
-};
+}
+
+interface PlanetTypeCommentFormProps {
+  classificationId?: string;
+}
 
-const PlanetTypeCommentForm = () => {
+const PlanetTypeCommentForm = ({ classificationId }: PlanetTypeCommentFormProps) => {
   const supabase = useSupabaseClient();
   const session = useSession();
 
@@ -31,17 +33,24 @@ const PlanetTypeCommentForm = () => {
   const [comments, setComments] = useState<any[]>([]);
   const [commentInputs, setCommentInputs] = useState<Record<number, string>>({});
 
+  const classificationIdNum = classificationId ? Number(classificationId) : undefined;
+
   useEffect(() => {
     const fetchClassifications = async () => {
       try {
-        const { data, error } = await supabase
-          .from("classifications")
-          .select("*")
-          .eq("classificationtype", "planet");
+        let query = supabase.from("classifications").select("*");
+
+        if (classificationIdNum) {
+          query = query.eq("id", classificationIdNum);
+        } else {
+          query = query.eq("classificationtype", "planet");
+        }
+
+        const { data, error } = await query;
 
         if (error) throw new Error("Error fetching classifications: " + error.message);
 
-        const processedData = data?.map((classification) => {
+        const processedData = (data || []).map((classification) => {
           const media = classification.media;
           let images: string[] = [];
 
@@ -66,38 +75,40 @@ const PlanetTypeCommentForm = () => {
           return { ...classification, images, votes };
         });
 
-        setClassifications(processedData || []);
+        setClassifications(processedData);
       } catch (err) {
         console.error(err);
-      };
+      }
     };
 
     const fetchComments = async () => {
-      if (!session?.user?.id) return;
-
       try {
-        const { data, error } = await supabase
+        let query = supabase
           .from("comments")
           .select(`
             id,
             content,
             configuration,
             classification_id,
-            author ( 
+            author (
               id,
               full_name,
               avatar_url
             )
-          `)
-          .eq("author", session.user.id)
-          .not("configuration", "is", null);
+          `);
+
+        if (classificationIdNum) {
+          query = query.eq("classification_id", classificationIdNum);
+        }
+
+        const { data, error } = await query;
 
         if (error) throw new Error("Error fetching comments: " + error.message);
 
         setComments(data || []);
       } catch (err) {
         console.error(err);
-      };
+      }
     };
 
     const fetchData = async () => {
@@ -107,13 +118,13 @@ const PlanetTypeCommentForm = () => {
     };
 
     fetchData();
-  }, [session, supabase]);
+  }, [supabase, classificationIdNum]);
 
   const handleSelectPreferredComment = async (classificationId: number, commentId: number) => {
-    const selectedComment = comments?.find((comment) => comment.id === commentId);
+    const selectedComment = comments.find((comment) => comment.id === commentId);
     if (!selectedComment) return;
 
-    const classificationToUpdate = classifications?.find(
+    const classificationToUpdate = classifications.find(
       (classification) => classification.id === classificationId
     );
     if (!classificationToUpdate || classificationToUpdate.author !== session?.user?.id) return;
@@ -155,25 +166,25 @@ const PlanetTypeCommentForm = () => {
     }
   };
 
-  const handleProposePlanetType = async (classificationId: number, planetType: "Terrestrial" | "Gaseous") => {
+  const handleProposePlanetType = async (
+    classificationId: number,
+    planetType: "Terrestrial" | "Gaseous"
+  ) => {
     const commentInput = commentInputs[classificationId];
     if (!commentInput) {
       console.error("Comment input is required");
       return;
-    };
+    }
 
     try {
-      const { error } = await supabase
-        .from("comments")
-        .insert([
-          {
-            content: commentInput,
-            classification_id: classificationId,
-            author: session?.user?.id,
-            configuration: { planetType },
-            // surveyor: True,
-          },
-        ]);
+      const { error } = await supabase.from("comments").insert([
+        {
+          content: commentInput,
+          classification_id: classificationId,
+          author: session?.user?.id,
+          configuration: { planetType },
+        },
+      ]);
 
       if (error) throw error;
 
@@ -181,7 +192,7 @@ const PlanetTypeCommentForm = () => {
       console.log("Comment inserted successfully with planet type.");
     } catch (err) {
       console.error("Error inserting comment: ", err);
-    };
+    }
   };
 
   const handleCommentInputChange = (classificationId: number, value: string) => {
@@ -190,8 +201,79 @@ const PlanetTypeCommentForm = () => {
 
   if (loading) return <p>Loading...</p>;
 
+  // SINGLE classification view if classificationId is passed
+  if (classificationIdNum && classifications.length === 1) {
+    const classification = classifications[0];
+    return (
+      <div className="w-full max-w-3xl mx-auto rounded-lg">
+        <SimplePostSingle
+          id={classification.id.toString()}
+          title={`Planet discovery #${classification.id}`}
+          author={classification.author || "Unknown"}
+          content={classification.content || ""}
+          category={classification.classificationtype || "Planet"}
+          images={classification.images || []}
+        />
+        <p className="text-sm italic text-cyan-500">{classification.content}</p>
+        {/* {classification.image_url && (
+          <img
+            src={classification.image_url}
+            alt={`Classification ${classification.id}`}
+            className="w-full h-auto rounded-md shadow-sm mt-4"
+          />
+        )} */}
+        <div className="space-y-2 mt-6">
+          {comments.map((comment) => (
+            <div key={comment.id} className="bg-gray-100 p-4 rounded-md shadow-sm">
+              <p className="text-black">
+                Posted by: {comment.author.id?.substring(0, 8)}...
+              </p>
+              <p className="text-black">{comment.content}</p>
+              <div className="flex justify-between items-center">
+                <p className="text-xs text-gray-600">
+                  Proposed planet type: {comment.configuration?.planetType || "Unknown"}
+                </p>
+                {classification.author === session?.user?.id && (
+                  <button
+                    onClick={() => handleSelectPreferredComment(classification.id, comment.id)}
+                    className="text-blue-500 mt-2"
+                  >
+                    Mark as Preferred
+                  </button>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+        <div className="mt-4 space-y-2">
+          <textarea
+            value={commentInputs[classification.id] || ""}
+            onChange={(e) => handleCommentInputChange(classification.id, e.target.value)}
+            placeholder="Make a comment and propose a planet type"
+            className="w-full p-2 border text-gray-500 border-gray-300 rounded"
+          />
+          <div className="flex space-x-4">
+            <button
+              className="bg-gray-500 text-white p-2 rounded"
+              onClick={() => handleProposePlanetType(classification.id, "Terrestrial")}
+            >
+              Propose Terrestrial
+            </button>
+            <button
+              className="bg-gray-500 text-white p-2 rounded"
+              onClick={() => handleProposePlanetType(classification.id, "Gaseous")}
+            >
+              Propose Gaseous
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Default view: all planet classifications
   return (
-    <div className="p-6 w-screen bg-card max-w-lg mx-auto rounded-lg shadow-sm">
+    <div className="w-full max-w-4xl mx-auto rounded-lg">
       {classifications.length > 0 ? (
         <div className="space-y-8">
           {classifications.map((classification) => (
@@ -204,21 +286,6 @@ const PlanetTypeCommentForm = () => {
                 category={classification.classificationtype || "Planet"}
                 images={classification.images || []}
               />
-              {/* <PostCardSingle
-                key={classification.id}
-                classificationId={classification.id}
-                title={classification.title}
-                author={classification.author}
-                content={classification.content}
-                votes={classification.votes}
-                category={classification.category}
-                // tags={classification.tags}
-                images={classification.images}
-                anomalyId={classification.anomaly.toString()}
-                classificationConfig={classification.classificationConfiguration}
-                classificationType={classification.classificationtype}
-                commentStatus={false}
-              /> */}
               <p className="text-sm italic text-cyan-500">{classification.content}</p>
               {classification.image_url && (
                 <img
@@ -228,11 +295,13 @@ const PlanetTypeCommentForm = () => {
                 />
               )}
               <div className="space-y-2">
-                {(comments || [])
+                {comments
                   .filter((comment) => comment.classification_id === classification.id)
                   .map((comment) => (
                     <div key={comment.id} className="bg-gray-100 p-4 rounded-md shadow-sm">
-                      <p className="text-black">Posted by: {comment.author.id?.substring(0, 8)}...</p>
+                      <p className="text-black">
+                        Posted by: {comment.author.id?.substring(0, 8)}...
+                      </p>
                       <p className="text-black">{comment.content}</p>
                       <div className="flex justify-between items-center">
                         <p className="text-xs text-gray-600">
@@ -251,7 +320,7 @@ const PlanetTypeCommentForm = () => {
                   ))}
               </div>
               <div className="mt-4 space-y-2">
-                <textarea
+                <textarea 
                   value={commentInputs[classification.id] || ""}
                   onChange={(e) => handleCommentInputChange(classification.id, e.target.value)}
                   placeholder="Make a comment and propose a planet type"
diff --git a/components/Structures/Missions/Astronomers/SatellitePhotos/AI4M/AIForMars.tsx b/components/Structures/Missions/Astronomers/SatellitePhotos/AI4M/AIForMars.tsx
index 4599a7c60..47e6c1f2b 100644
--- a/components/Structures/Missions/Astronomers/SatellitePhotos/AI4M/AIForMars.tsx
+++ b/components/Structures/Missions/Astronomers/SatellitePhotos/AI4M/AIForMars.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
 import MissionShell from "../../../BasePlate";
 import { CloudCogIcon, FolderCog, HelpCircle, PaintBucket, Vote } from "lucide-react";
-import { AI4MWrapper, AiForMarsProject, StarterAiForMars } from "@/components/Projects/Auto/AI4Mars";
+import { AiForMarsProjectWithID, StarterAiForMars } from "@/components/Projects/Auto/AI4Mars";
 import VoteAI4MClassifications from "./AI4MVote";
 
 export interface Mission {
@@ -40,7 +40,7 @@ const AI4M = () => {
                 icon: CloudCogIcon,
                 points: 2,
                 completedCount: 0,
-                internalComponent: () => <AI4MWrapper />,
+                internalComponent: () => <AiForMarsProjectWithID />,
                 color: "text-blue-500",
             }, 
             {
diff --git a/components/Structures/Missions/Astronomers/SatellitePhotos/P4/PlanetFour.tsx b/components/Structures/Missions/Astronomers/SatellitePhotos/P4/PlanetFour.tsx
index b11fe371c..70dc68239 100644
--- a/components/Structures/Missions/Astronomers/SatellitePhotos/P4/PlanetFour.tsx
+++ b/components/Structures/Missions/Astronomers/SatellitePhotos/P4/PlanetFour.tsx
@@ -3,7 +3,7 @@ import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
 import MissionShell from "../../../BasePlate";
 import { CloudCogIcon, FolderCog, HelpCircle, PaintBucket, Vote } from "lucide-react";
 import VoteP4Classifications from "./P4Vote";
-import { P4Wrapper, StarterPlanetFour } from "@/components/Projects/Satellite/PlanetFour";
+import { PlanetFourProject, StarterPlanetFour } from "@/components/Projects/Satellite/PlanetFour";
 
 interface Mission {
     id: number;
@@ -40,7 +40,7 @@ const PlanetFour = () => {
                 icon: CloudCogIcon,
                 points: 2,
                 completedCount: 0,
-                internalComponent: () => <P4Wrapper />,
+                internalComponent: () => <PlanetFourProject />,
                 color: "text-blue-500",
             },
             {
diff --git a/components/Structures/Missions/BasePlate.tsx b/components/Structures/Missions/BasePlate.tsx
index be8483d0b..0d77fa9b1 100644
--- a/components/Structures/Missions/BasePlate.tsx
+++ b/components/Structures/Missions/BasePlate.tsx
@@ -1,18 +1,19 @@
 import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
-import { motion } from "framer-motion";
-import { AnimatePresence } from "framer-motion";
+import { motion, AnimatePresence } from "framer-motion";
 import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import { EarthViewLayout } from "@/components/(scenes)/planetScene/layout";
 import Navbar from "@/components/Layout/Navbar";
+import Link from "next/link";
 import ProfileSetupForm from "@/components/Account/ProfileSetup";
 
-interface MissionConfig {
+export interface MissionConfig {
   id: number;
   title: string;
   description: string;
   icon: React.ElementType;
   points?: number;
+  slug?: string;
   internalComponent?: React.ElementType;
   color: string;
   action?: () => void;
@@ -38,11 +39,11 @@ const MissionShell = ({
   maxUnlockedChapter,
   onPreviousChapter,
   onNextChapter,
-  tutorialMission, 
+  tutorialMission,
 }: MissionShellProps) => {
   const supabase = useSupabaseClient();
   const session = useSession();
-  
+
   const [loading, setLoading] = useState(false);
   const [firstName, setFirstName] = useState("");
   const [username, setUsername] = useState("");
@@ -54,6 +55,7 @@ const MissionShell = ({
 
   useEffect(() => {
     let ignore = false;
+
     async function getProfile() {
       setLoading(true);
       const { data, error } = await supabase
@@ -61,7 +63,7 @@ const MissionShell = ({
         .select(`username, full_name, avatar_url`)
         .eq("id", session?.user.id)
         .single();
-  
+
       if (!ignore) {
         if (error) {
           console.warn(error);
@@ -69,74 +71,83 @@ const MissionShell = ({
           setUsername(data.username);
           setFirstName(data?.full_name);
           setAvatarPreview(data?.avatar_url || "");
-        };
-      };
+        }
+      }
+
       setLoading(false);
-    };
-  
+    }
+
     if (session?.user?.id) {
       getProfile();
-    };
-  
+    }
+
     return () => {
       ignore = true;
     };
   }, [session, refresh]);
 
-  const renderMission = (mission: MissionConfig) => {
-    const completedCount = mission.completedCount ?? 0;
+  const getCardSpanClass = (index: number, total: number) => {
+    if (total === 1) return "col-span-2 md:col-span-2 lg:col-span-4";
+    if (total === 2) return "col-span-2 md:col-span-1 lg:col-span-2";
+    if (total === 3 && index === 0) return "col-span-2 md:col-span-2 lg:col-span-2";
+    return "";
+  };
 
-    return (
-      <div
-        key={mission.id}
-        className={`flex items-center p-6 rounded-2xl cursor-pointer${
-          mission.id > 2
-            ? "bg-[#74859A]"
-            : mission.id < 3
-            ? "bg-gray-000"
-            : completedCount > 0
-            ? "bg-gray-700"
-            : ""
-        }`}
-        onClick={() => setSelectedMission(mission)}
-      >
+const renderMission = (mission: MissionConfig, index: number, total: number) => {
+  const completedCount = mission.completedCount ?? 0;
+
+  const cardContent = (
+    <div
+      key={mission.id}
+      className={`bg-gradient-to-br from-[#E5EEF4] to-[#D8E5EC] shadow-md rounded-xl cursor-pointer p-4 aspect-square w-full max-w-full flex flex-col justify-between ${getCardSpanClass(index, total)}`}
+    >
+      <div className="flex items-start space-x-4">
         <mission.icon className={`w-10 h-10 ${mission.color}`} />
-        <div className="ml-4">
-          <h2 className={`text-lg font-bold ${mission.color}`}>{mission.title}</h2>
-          <p className={`text-sm ${mission.color}`}>{mission.description}</p>
+        <div>
+          <h2 className="text-lg font-bold text-[#2E3440]">{mission.title}</h2>
+          <p className="text-sm text-[#4C566A]">{mission.description}</p>
           {mission.points && (
-            <p className={`text-sm ${mission.color}`}>Points: {mission.points}</p>
+            <p className="text-sm text-[#4C566A]">Points: {mission.points}</p>
           )}
         </div>
-        <div className="ml-auto text-right">
-          <p className="text-xs">Completed: {completedCount}</p>
-          <p className="text-xl font-bold">{completedCount}</p>
-        </div>
       </div>
+      <div className="mt-4 text-right text-[#2E3440]">
+        <p className="text-xs">Completed: {completedCount}</p>
+        <p className="text-xl font-bold">{completedCount}</p>
+      </div>
+    </div>
+  );
+
+  // If it has a slug, make it a link
+  if (mission.slug) {
+    return (
+      <Link key={mission.id} href={mission.slug}>
+        {cardContent}
+      </Link>
     );
-  };
+  }
 
-  const renderTutorialMission = (mission: MissionConfig) => {
-    const completedCount = mission.completedCount ?? 0;
+  // Otherwise, set as internal mission
+  return (
+    <div key={mission.id} onClick={() => setSelectedMission(mission)}>
+      {cardContent}
+    </div>
+  );
+}
 
+  const renderTutorialMission = (mission: MissionConfig) => {
     return (
       <div
         key={mission.id}
-        className={`flex items-center p-6 rounded-2xl cursor-pointer${
-          mission.id > 2
-            ? "bg-[#74859A]"
-            : mission.id < 3
-            ? "bg-gray-000"
-            : completedCount > 0
-            ? "bg-gray-700"
-            : ""
-        }`}
+        className={`bg-gradient-to-br from-[#E5EEF4] to-[#D8E5EC] shadow-md rounded-xl cursor-pointer p-4 aspect-square w-full max-w-[180px] flex flex-col justify-between`}
         onClick={() => setSelectedMission(mission)}
       >
-        <mission.icon className={`w-10 h-10 ${mission.color}`} />
-        <div className="ml-4">
-          <h2 className={`text-lg font-bold ${mission.color}`}>{mission.title}</h2>
-          <p className={`text-sm ${mission.color}`}>{mission.description}</p>
+        <div className="flex items-start space-x-4">
+          <mission.icon className={`w-10 h-10 ${mission.color}`} />
+          <div>
+            <h2 className="text-lg font-bold text-[#2E3440]">{mission.title}</h2>
+            <p className="text-sm text-[#4C566A]">{mission.description}</p>
+          </div>
         </div>
       </div>
     );
@@ -148,68 +159,64 @@ const MissionShell = ({
     return (
       <EarthViewLayout>
         <ProfileSetupForm onProfileUpdate={() => setRefresh((prev) => !prev)} />
-        <div></div>
+          <></>
       </EarthViewLayout>
     );
-  };
+  }
 
   return (
-    <div className="flex flex-col items-center bg-[#1D2833] text-white rounded-2xl shadow-lg p-6 w-full max-w-4xl mx-auto">
+    <div className="flex flex-col items-center justify-center w-full min-h-screen px-4 text-white overflow-x-hidden">
       {!selectedMission && (
-        <>
-          <div className="flex justify-between items-center w-full mb-6">
-            <h1 className="text-xl font-bold">Chapter {currentChapter}</h1>
+        <div className="flex flex-col w-full max-w-6xl">
+          <div className="flex justify-between items-center mb-4">
+            <h1 className="text-xl font-bold text-[#2E3440]">Chapter {currentChapter}</h1>
             <div className="flex space-x-4">
               <Button onClick={onPreviousChapter} disabled={currentChapter === 1}>
                 Previous
               </Button>
               <Button
                 onClick={onNextChapter}
-                disabled={currentChapter === maxUnlockedChapter || experiencePoints < pointsForNextChapter}
+                disabled={
+                  currentChapter === maxUnlockedChapter ||
+                  experiencePoints < pointsForNextChapter
+                }
               >
                 Next
               </Button>
             </div>
           </div>
-          <div className="w-full bg-gray-700 rounded-full h-4 mb-6">
+
+          <div className="w-full bg-gray-300 rounded-full h-4 mb-2">
             <div
               className="bg-[#5FCBC3] h-4 rounded-full"
               style={{ width: `${(experiencePoints % 9) * 10.5}%` }}
             ></div>
           </div>
-          <p className="text-sm text-center mb-6">
+
+          <p className="text-sm text-center text-[#4C566A] mb-6">
             Level {level} ({experiencePoints} points)
           </p>
-          {currentChapter === 1 ? (
-            <>
-              <div className="bg-gray-700 p-6 rounded-2xl w-full mb-6">
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 w-full">
-                  {missions.slice(0, 2).map((mission) => renderMission(mission))}
-                </div>
-              </div>
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 w-full mt-6 overflow-y-auto max-h-[calc(100vh-200px)]">
-                {missions.slice(2).map((mission) => renderMission(mission))}
-              </div>
-            </>
-          ) : (
-            <div className="grid gap-4 w-full mt-6 overflow-y-auto max-h-[calc(100vh-200px)]">
-              {missions.map((mission) => renderMission(mission))}
-            </div>
+
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+            {missions.map((mission, idx) =>
+              renderMission(mission, idx, missions.length)
+            )}
+          </div>
+
+          {currentChapter === 1 && tutorialMission && (
+            <div className="mt-6">{renderTutorialMission(tutorialMission)}</div>
           )}
-        </>
+        </div>
       )}
-      
-      {/* Display tutorial mission when Chapter 1 is selected */}
-      {currentChapter === 1 && tutorialMission && !selectedMission && (
-  <div className="mt-6">
-    {renderTutorialMission(tutorialMission)}
-  </div>
-)}
 
       <AnimatePresence>
         {selectedMission && (
           <motion.div
-            className="flex flex-col bg-[#1D2833] rounded-2xl p-6 w-full max-w-5xl mx-auto"
+            className="flex flex-col rounded-2xl p-6 w-full max-w-5xl mx-auto h-full"
+            style={{
+              background: "linear-gradient(135deg, #E5EEF4, #D8E5EC)",
+              color: "#2E3440",
+            }}
             initial={{ opacity: 0, scale: 0.95 }}
             animate={{ opacity: 1, scale: 1 }}
             exit={{ opacity: 0, scale: 0.95 }}
@@ -220,9 +227,7 @@ const MissionShell = ({
             </div>
             <div className="flex-1 overflow-y-auto max-h-[calc(100vh-150px)]">
               {selectedMission.internalComponent && (
-                <div className="overflow-x-auto w-full">{/* Add this wrapper */}
-                  <selectedMission.internalComponent />
-                </div>
+                <selectedMission.internalComponent />
               )}
             </div>
           </motion.div>
diff --git a/components/Structures/Missions/Biologists/ResearchStations.tsx b/components/Structures/Missions/Biologists/ResearchStations.tsx
index 1e69782f3..9590d3824 100644
--- a/components/Structures/Missions/Biologists/ResearchStations.tsx
+++ b/components/Structures/Missions/Biologists/ResearchStations.tsx
@@ -26,10 +26,10 @@ const initialStations: Station[] = [
       { name: "Burrowing Owl", icon: "Bird", biomassType: 'Fauna', mass: 0.5 },
       { name: "Iguanas (from above)", icon: "Turtle", biomassType: 'Fauna', mass: 0.25 },
     ],
-    location: {
-      coordinates: "23.4162° N, 75.2397° W",
-      depth: "+2m",
-    },
+    // location: {
+    //   coordinates: "23.4162° N, 75.2397° W",
+    //   depth: "+2m",
+    // },
     built: false,
   },
   {
@@ -45,10 +45,10 @@ const initialStations: Station[] = [
     animals: [
       { name: "Plankton Portal", icon: "Fish", biomassType: 'Fauna', mass: 0.0000001 },
     ],
-    location: {
-      coordinates: "2.4162° S, 54.2397° W",
-      altitude: "-10m",
-    },
+    // location: {
+    //   coordinates: "2.4162° S, 54.2397° W",
+    //   altitude: "-10m",
+    // },
     built: false,
   },
 ];
diff --git a/components/Structures/Missions/Biologists/StationCard.tsx b/components/Structures/Missions/Biologists/StationCard.tsx
index 3329912c9..a2488fb7e 100644
--- a/components/Structures/Missions/Biologists/StationCard.tsx
+++ b/components/Structures/Missions/Biologists/StationCard.tsx
@@ -136,19 +136,19 @@ export function StationCard({ station, onBuild, onView }: StationCardProps) {
       <CardContent className="relative z-10 space-y-4">
         <div className="flex items-center gap-2 text-sm text-blue-400">
           <MapPin className="w-4 h-4" />
-          <span> {station.location.coordinates} </span>
+          {/* <span> {station.location.coordinates} </span>
           {station.location.depth && (
             <span className="text-blue-500 flex items-center gap-1">
               <ArrowDown className="w-3 h-3" />
               {station.location.depth}
             </span>
-          )}
-          {station.location.altitude && (
+          )} */}
+          {/* {station.location.altitude && (
             <span className="text-blue-500 flex items-center gap-1">
               <ArrowUp className="w-3 h-3" />
               {station.location.altitude}
             </span>
-          )}
+          )} */}
         </div>
 
         <div className="flex flex-wrap gap-2">
diff --git a/components/Structures/Missions/Meteorologists/Cloudspotting/CloudspottingOnMars.tsx b/components/Structures/Missions/Meteorologists/Cloudspotting/CloudspottingOnMars.tsx
index c187d976c..71ef01aaf 100644
--- a/components/Structures/Missions/Meteorologists/Cloudspotting/CloudspottingOnMars.tsx
+++ b/components/Structures/Missions/Meteorologists/Cloudspotting/CloudspottingOnMars.tsx
@@ -2,11 +2,12 @@ import { useEffect, useState } from "react";
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
 import MissionShell from "@/components/Structures/Missions/BasePlate";
 import { CloudCogIcon, FolderCog, HelpCircle, Paintbrush2Icon, PaintBucket, Vote } from "lucide-react";
-import { CloudspottingWrapper, StarterLidar } from "@/components/Projects/Lidar/Clouds";
+import { CloudspottingOnMarsWithId, StarterLidar } from "@/components/Projects/Lidar/Clouds";
 import VoteCoMClassifications from "./CoMVote";
 import CloudClassificationGenerator from "./CloudMaker";
 import { CloudspottingOnMarsTutorial } from "@/components/Projects/Lidar/cloudspottingOnMars";
-import { CloudspottingShapesWrapper } from "@/components/Projects/Lidar/CloudspottingOnMarsShapes";
+import { StarterCoMShapes } from "@/components/Projects/Lidar/CloudspottingOnMarsShapes";
+// import { CloudspottingShapesWrapper } from "@/components/Projects/Lidar/CloudspottingOnMarsShapes";
 
 export interface Mission {
     id: number;
@@ -44,23 +45,12 @@ const CloudspottingOnMars = () => {
                 icon: CloudCogIcon,
                 points: 2,
                 completedCount: 0,
-                internalComponent: () => <CloudspottingWrapper />,
+                internalComponent: () => <CloudspottingOnMarsWithId />,
                 color: "text-blue-500",
             },
             {
                 id: 2,
                 chapter: 1,
-                title: "Propose a cloud in your classifications",
-                description: "Make a classification indicating a positive cloud candidate",
-                icon: FolderCog,
-                points: 1,
-                completedCount: 0,
-                internalComponent: () => <StarterLidar />,
-                color: "text-cyan-300",
-            },
-            {
-                id: 3,
-                chapter: 1,
                 title: "Comment or vote on a cloud classification",
                 description:
                     "Collaborate with other players to rate proposed cloud candidates and behaviour",
@@ -71,7 +61,7 @@ const CloudspottingOnMars = () => {
                 color: "text-green-700",
             },
             {
-                id: 4,
+                id: 3,
                 chapter: 2,
                 title: "Create a cloud representation",
                 description:
@@ -83,14 +73,14 @@ const CloudspottingOnMars = () => {
                 color: 'text-green-300',
             },
             {
-                id: 5,
+                id: 4,
                 chapter: 2,
                 title: "Identify shapes in cloud classifications",
                 description: 'Use your LIDAR to identify shapes in the cloud classification',
                 icon: Paintbrush2Icon,
                 points: 2,
                 completedCount: 0,
-                internalComponent: () => <CloudspottingShapesWrapper />,
+                internalComponent: () => <StarterCoMShapes />,
                 color: 'text-green-200',
             }
         ];
diff --git a/components/Structures/Missions/Meteorologists/Cloudspotting/Shapes/ShapesOnMars.tsx b/components/Structures/Missions/Meteorologists/Cloudspotting/Shapes/ShapesOnMars.tsx
index 0b7a982b0..59fe197cf 100644
--- a/components/Structures/Missions/Meteorologists/Cloudspotting/Shapes/ShapesOnMars.tsx
+++ b/components/Structures/Missions/Meteorologists/Cloudspotting/Shapes/ShapesOnMars.tsx
@@ -2,8 +2,9 @@ import React, { useEffect, useState } from "react";
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
 import MissionShell from "../../../BasePlate";
 import { CloudCogIcon, FolderCog, HelpCircle, PaintBucket, Vote } from "lucide-react";
-import { CloudspottingShapesWrapper } from "@/components/Projects/Lidar/CloudspottingOnMarsShapes";
+// import { CloudspottingShapesWrapper } from "@/components/Projects/Lidar/CloudspottingOnMarsShapes";
 import { Mission } from "../CloudspottingOnMars";
+import { StarterCoMShapes } from "@/components/Projects/Lidar/CloudspottingOnMarsShapes";
 
 interface MissionPoints {
     [key: number]: number;
@@ -29,7 +30,7 @@ const CloudspottingOnMarsShapes = () => {
                 icon: CloudCogIcon,
                 points: 2,
                 completedCount: 0,
-                internalComponent: () => <CloudspottingShapesWrapper />,
+                internalComponent: () => <StarterCoMShapes />,
                 color: 'text-blue-500',
             },
             {
diff --git a/components/Structures/Missions/Meteorologists/JVH/JovianVortexHunters.tsx b/components/Structures/Missions/Meteorologists/JVH/JovianVortexHunters.tsx
index 444febdbb..eb6285a66 100644
--- a/components/Structures/Missions/Meteorologists/JVH/JovianVortexHunters.tsx
+++ b/components/Structures/Missions/Meteorologists/JVH/JovianVortexHunters.tsx
@@ -1,14 +1,14 @@
 import React, { useEffect, useState } from "react";
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
 import MissionShell from "../../BasePlate";
-import { JVHWrapper } from "@/components/Projects/Lidar/JovianVortexHunter";
+import { LidarJVHSatelliteWithId } from "@/components/Projects/Lidar/JovianVortexHunter";
 import { CloudCogIcon, CloudHail, HelpCircle, ShovelIcon } from "lucide-react";
-import { LidarJVHSatellite, StarterJovianVortexHunter } from "@/components/Projects/Lidar/JovianVortexHunter";
+import { StarterJovianVortexHunter } from "@/components/Projects/Lidar/JovianVortexHunter";
 import VoteJVH from "./JVHVote";
 import CloudClassifier from "@/components/Data/Generator/Meteorologists/JVH/cloud-classifier";
 import JVHCloudClassificationGenerator from "./GaseousPlanetCloudMaker";
 import ClassificationOptionsCounter from "@/content/Posts/ClassificationOptionsCounter";
-import { PreferredGaseousClassifications } from "../../PickPlanet";
+// import { PreferredGaseousClassifications } from "../../PickPlanet";
 
 interface Mission {
     id: number;
@@ -45,7 +45,7 @@ const JovianVortexHunters = () => {
             points: 2,
             completedCount: 0,
             // internalComponent: () => <LidarJVHSatellite anomalyid={4} />, // <JVHWrapper />
-            internalComponent: () => <JVHWrapper />,
+            internalComponent: () => <LidarJVHSatelliteWithId />,
             color: "text-blue-500",
         },
         {
diff --git a/components/Structures/Missions/Milestones/Completed.tsx b/components/Structures/Missions/Milestones/Completed.tsx
index 8e4363e81..9d4dc90c4 100644
--- a/components/Structures/Missions/Milestones/Completed.tsx
+++ b/components/Structures/Missions/Milestones/Completed.tsx
@@ -61,7 +61,7 @@ export default function MilestoneHistoryList() {
             .from(table)
             .select("*", { count: "exact" })
             .eq(field, value)
-            .eq("author", session.user.id)
+            .or(`author.eq.${session.user.id},user_id.eq.${session.user.id}`)
             .gte("created_at", startDate.toISOString())
             .lte("created_at", endDate.toISOString());
 
diff --git a/components/Structures/Missions/Milestones/NextStepsTips.tsx b/components/Structures/Missions/Milestones/NextStepsTips.tsx
new file mode 100644
index 000000000..4cadcc2e2
--- /dev/null
+++ b/components/Structures/Missions/Milestones/NextStepsTips.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react"
+
+export default function TipsPanel() {
+  const supabase = useSupabaseClient()
+  const session = useSession()
+
+  const [showTips, setShowTips] = useState(false)
+  const [countdown, setCountdown] = useState("")
+
+  useEffect(() => {
+    if (!session) return
+
+    const checkHasCommentsOrVotes = async () => {
+      const userId = session.user.id
+
+      const { data: comments } = await supabase
+        .from("comments")
+        .select("id")
+        .eq("author", userId)
+        .limit(1)
+
+      const { data: votes } = await supabase
+        .from("votes")
+        .select("id")
+        .eq("user_id", userId)
+        .limit(1)
+
+      const hasInteracted = (comments?.length ?? 0) > 0 || (votes?.length ?? 0) > 0
+      setShowTips(!hasInteracted)
+    }
+
+    const updateCountdown = () => {
+      const now = new Date()
+
+      // Convert to Melbourne time (UTC+10 or UTC+11)
+      const utcOffset = now.getTimezoneOffset() / -60 // e.g. +10 for AEST
+      const melbourneOffset = 10 // Standard (no DST support needed unless you want it)
+
+      const melbourneNow = new Date(now.getTime() + (melbourneOffset - utcOffset) * 60 * 60 * 1000)
+
+      const melbourneDay = melbourneNow.getUTCDay() // 0 = Sun, 1 = Mon, ..., 6 = Sat
+      const melbourneHour = melbourneNow.getUTCHours()
+      const melbourneMinute = melbourneNow.getUTCMinutes()
+
+      let daysUntilMonday = (8 - melbourneDay) % 7
+      if (daysUntilMonday === 0 && (melbourneHour < 0 || (melbourneHour === 0 && melbourneMinute < 1))) {
+        daysUntilMonday = 7
+      }
+
+      const nextReset = new Date(melbourneNow)
+      nextReset.setUTCDate(melbourneNow.getUTCDate() + daysUntilMonday)
+      nextReset.setUTCHours(14) // Melbourne 00:01 = UTC 14:01
+      nextReset.setUTCMinutes(1)
+      nextReset.setUTCSeconds(0)
+      nextReset.setUTCMilliseconds(0)
+
+      const msRemaining = nextReset.getTime() - melbourneNow.getTime()
+      const hours = Math.floor(msRemaining / (1000 * 60 * 60))
+      const minutes = Math.floor((msRemaining % (1000 * 60 * 60)) / (1000 * 60))
+
+      setCountdown(`${hours}h ${minutes}m`)
+    }
+
+    checkHasCommentsOrVotes()
+    updateCountdown()
+    const interval = setInterval(updateCountdown, 60000)
+    return () => clearInterval(interval)
+  }, [session, supabase])
+
+  if (!showTips) return null
+
+  return (
+    <aside className="w-full lg:w-80 mt-6 lg:mt-0 lg:absolute lg:right-6 lg:top-24 bg-[#edf3ff] border-4 border-indigo-400 p-5 rounded-3xl shadow-2xl space-y-5 text-indigo-900">
+      <h2 className="text-xl font-black tracking-tight uppercase">🧭 Mission Tips</h2>
+      <ul className="space-y-3 font-semibold text-sm list-disc pl-6">
+        <li>💬 Comment & work with other users - unlock more telescope uses</li>
+        <li>👍 Upvote discoveries — 3 votes = 1 deploy</li>
+        <li>🔭 Help others to unlock more missions || Whatever content/milestones go here</li>
+      </ul>
+      <div className="text-xs font-bold text-indigo-800 border-t pt-2">
+        ⏳ New missions in: <span className="text-indigo-600">{countdown}</span>
+      </div>
+    </aside>
+  );
+};
\ No newline at end of file
diff --git a/components/Structures/Missions/MissionProgress.tsx b/components/Structures/Missions/MissionProgress.tsx
new file mode 100644
index 000000000..104788419
--- /dev/null
+++ b/components/Structures/Missions/MissionProgress.tsx
@@ -0,0 +1,171 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Sheet, SheetContent } from "@/components/ui/sheet";
+import { Button } from "@/components/ui/button";
+import {
+  Telescope,
+  SnowflakeIcon,
+  PawPrintIcon,
+  MountainIcon,
+  Star,
+  ExternalLink,
+} from "lucide-react";
+import Link from "next/link";
+
+type Milestone = {
+  name: string;
+  structure: string;
+  icon: string;
+  group: string;
+  extendedDescription?: string;
+};
+
+type WeekMilestones = {
+  weekStart: string;
+  data: Milestone[];
+};
+
+const GROUPS = ["Astronomy", "Meteorology", "Geology", "Biology"];
+
+const groupIcons: Record<string, JSX.Element> = {
+  Astronomy: <Telescope className="w-7 h-7" />,
+  Meteorology: <SnowflakeIcon className="w-7 h-7" />,
+  Biology: <PawPrintIcon className="w-7 h-7" />,
+  Geology: <MountainIcon className="w-7 h-7" />,
+};
+
+export default function UserMilestoneMissionSummary() {
+  const [milestones, setMilestones] = useState<WeekMilestones | null>(null);
+  const [selectedGroup, setSelectedGroup] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchMilestones = async () => {
+      const res = await fetch("/api/gameplay/milestones");
+      const data = await res.json();
+      setMilestones(data.playerMilestones?.[0] ?? null);
+    };
+
+    fetchMilestones();
+  }, []);
+
+  if (!milestones) return null;
+
+  const grouped: Record<string, Milestone[]> = {};
+  for (const m of milestones.data) {
+    if (!grouped[m.group]) grouped[m.group] = [];
+    grouped[m.group].push(m);
+  }
+
+  // Your layered background texture style converted from CSS:
+  const backgroundStyle: React.CSSProperties = {
+    width: "100%",
+    height: "100%",
+    position: "absolute",
+    inset: 0,
+    backgroundImage: `
+      radial-gradient(circle at 100% 50%, #ff00cc 0% 2%, #00ffcc 3% 5%, transparent 6%),
+      radial-gradient(circle at 0% 50%, #ff00cc 0% 2%, #00ffcc 3% 5%, transparent 6%),
+      radial-gradient(ellipse at 50% 0%, #3300ff 0% 3%, transparent 4%) 10px 10px,
+      radial-gradient(circle at 50% 50%, #00ffcc 0% 1%, #ff00cc 2% 3%, #3300ff 4% 5%, transparent 6%) 20px 20px,
+      repeating-linear-gradient(45deg, #1a1a1a, #1a1a1a 10px, #242424 10px, #242424 20px)
+    `,
+    backgroundSize: "50px 50px, 50px 50px, 40px 40px, 60px 60px, 100% 100%",
+    animation: "shift 15s linear infinite",
+    opacity: 0.3,
+    pointerEvents: "none", // so clicks go through
+    zIndex: 0,
+  };
+
+  return (
+    <div className="relative flex gap-6 items-center py-4 px-6 rounded-2xl border border-white/10 shadow-xl backdrop-blur-md overflow-hidden text-white min-h-[150px]">
+      {/* Inject keyframes scoped inside component */}
+      <style>{`
+        @keyframes shift {
+          0% {
+            background-position:
+              0 0,
+              0 0,
+              10px 10px,
+              20px 20px,
+              0 0;
+          }
+          100% {
+            background-position:
+              50px 50px,
+              -50px -50px,
+              60px 60px,
+              80px 80px,
+              0 0;
+          }
+        }
+      `}</style>
+
+      {/* Background texture layer */}
+      <div style={backgroundStyle} aria-hidden="true" />
+
+      {/* Foreground content */}
+      <div className="relative z-10 flex gap-6 items-center">
+        {GROUPS.map((group) => {
+          const hasMissions = grouped[group] && grouped[group].length > 0;
+          const icon = groupIcons[group] || <Star className="w-7 h-7" />;
+
+          return hasMissions ? (
+            <button
+              key={group}
+              onClick={() => setSelectedGroup(group)}
+              className="flex flex-col items-center text-white hover:text-indigo-300 transition"
+            >
+              {icon}
+              <span className="text-xs mt-1 uppercase">{group}</span>
+            </button>
+          ) : (
+            <div
+              key={group}
+              className="flex flex-col items-center text-gray-500 opacity-40 cursor-default"
+            >
+              {icon}
+              <span className="text-xs mt-1 uppercase">{group}</span>
+            </div>
+          );
+        })}
+      </div>
+
+      <Sheet open={!!selectedGroup} onOpenChange={() => setSelectedGroup(null)}>
+        <SheetContent className="w-full max-w-lg h-screen overflow-y-auto p-6 bg-[#0d1b2a] text-white border-l border-white/10">
+          <h2 className="text-xl font-bold text-indigo-300 mb-4">
+            {selectedGroup} Missions –{" "}
+            {new Date(milestones.weekStart).toLocaleDateString()}
+          </h2>
+
+          {grouped[selectedGroup ?? ""]?.map((m, idx) => (
+            <div
+              key={idx}
+              className="rounded-lg border border-white/10 bg-white/5 p-4 shadow flex gap-4 items-start mb-4"
+            >
+              <div className="pt-1 text-indigo-300">
+                {groupIcons[m.group] || <Star className="w-5 h-5" />}
+              </div>
+              <div className="space-y-2 flex-1">
+                <p className="font-semibold text-white">{m.name}</p>
+                {m.extendedDescription && (
+                  <p className="text-sm text-white/70">{m.extendedDescription}</p>
+                )}
+                <p className="text-xs text-white/50">
+                  Structure: <span className="font-mono">{m.structure}</span>
+                </p>
+                <Link
+                  href={`/structures/${m.structure.toLowerCase()}`}
+                  className="inline-flex items-center gap-1 text-sm text-indigo-400 hover:text-indigo-200 mt-1"
+                >
+                  <ExternalLink className="w-4 h-4" />
+                  View structure
+                </Link>
+              </div>
+            </div>
+          ))}
+        </SheetContent>
+      </Sheet>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/components/Structures/Missions/Stardust/Total.tsx b/components/Structures/Missions/Stardust/Total.tsx
index 4fb15b11b..10a79b0e0 100644
--- a/components/Structures/Missions/Stardust/Total.tsx
+++ b/components/Structures/Missions/Stardust/Total.tsx
@@ -35,6 +35,7 @@ interface WeekMilestones {
 
 const TotalPoints = forwardRef((props: TotalPointsProps, ref,) => {
   const { onPointsUpdate, type } = props;
+
   const supabase = useSupabaseClient();
   const session = useSession();
 
@@ -48,10 +49,13 @@ const TotalPoints = forwardRef((props: TotalPointsProps, ref,) => {
   const [milestonePoints, setMilestonePoints] = useState(0);
   const [researchedPenalty, setResearchedPenalty] = useState(0);
   const [loading, setLoading] = useState(true);
+  const [referralPoints, setReferralPoints] = useState(0);
+  const [showBreakdown, setShowBreakdown] = useState<boolean>(false);
 
   const userId = session?.user?.id;
 
   useImperativeHandle(ref, () => ({
+    refreshPoints: fetchAllPoints,
     planetHuntersPoints,
     dailyMinorPlanetPoints,
     ai4mPoints,
@@ -73,66 +77,43 @@ const TotalPoints = forwardRef((props: TotalPointsProps, ref,) => {
       researchedPenalty,
   }));
 
+  const fetchReferralPoints = async () => {
+  // First, get the user's referral code from profiles
+  const { data: profileData, error: profileError } = await supabase
+    .from('profiles')
+    .select('referral_code')
+    .eq('id', userId)
+    .single();
+
+  if (profileError || !profileData?.referral_code) {
+    setReferralPoints(0);
+    return;
+  }
+
+  const referralCode = profileData.referral_code;
+
+  // Count rows in referrals where referral_code = user's referral_code
+  const { count: referralsCount, error: referralCountError } = await supabase
+    .from('referrals')
+    .select('id', { count: 'exact', head: true })
+    .eq('referral_code', referralCode);
+
+  if (referralCountError) {
+    setReferralPoints(0);
+    return;
+  }
+
+  // Calculate points: 5 per referral
+  const points = (referralsCount || 0) * 5;
+  setReferralPoints(points);
+};
+
   const [bonusPoints, setBonusPoints] = useState({
     bonusBiology: 0,
     bonusAstronomy: 0,
     bonusMeteorology: 0,
   });  
 
-  const [milestones, setMilestones] = useState<WeekMilestones[]>([]);
-  const [userProgress, setUserProgress] = useState<{
-      [weekKey: string]: { [milestoneName: string]: number };
-    }>({});
-  
-    useEffect(() => {
-      const fetchData = async () => {
-        const res = await fetch("/api/gameplay/milestones");
-        const data = await res.json();
-  
-        const sorted = [...data.playerMilestones].sort(
-          (a: WeekMilestones, b: WeekMilestones) =>
-            new Date(b.weekStart).getTime() - new Date(a.weekStart).getTime()
-        );
-  
-        setMilestones(sorted);
-  
-        if (!session?.user?.id) return;
-  
-        const progressMap: {
-          [weekKey: string]: { [milestoneName: string]: number };
-        } = {};
-  
-        for (const week of sorted) {
-          const startDate = new Date(week.weekStart);
-          const endDate = new Date(startDate);
-          endDate.setDate(startDate.getDate() + 6);
-  
-          const weekKey = week.weekStart;
-          progressMap[weekKey] = {};
-  
-          for (const milestone of week.data) {
-            const { table, field, value } = milestone;
-  
-            const { count } = await supabase
-              .from(table)
-              .select("*", { count: "exact" })
-              .eq(field, value)
-              .eq("author", session.user.id)
-              .gte("created_at", startDate.toISOString())
-              .lte("created_at", endDate.toISOString());
-  
-            progressMap[weekKey][milestone.name] = count || 0;
-          }
-        }
-  
-        setUserProgress(progressMap);
-      };
-  
-      fetchData();
-    }, [session]);
-
-  useEffect(() => {
-    if (!userId) return;
 
     const fetchAllPoints = async () => {
       setLoading(true);
@@ -317,6 +298,7 @@ const TotalPoints = forwardRef((props: TotalPointsProps, ref,) => {
         fetchPlanetFourPoints(),
         fetchJvhPoints(),
         fetchCloudspottingPoints(),
+        fetchReferralPoints(),
       ]);
 
       const totalPoints =
@@ -327,6 +309,7 @@ const TotalPoints = forwardRef((props: TotalPointsProps, ref,) => {
         jvhPoints +
         cloudspottingPoints +
         planktonPoints +
+        referralPoints +
         milestonePoints -
         researchedPenalty;
 
@@ -334,6 +317,61 @@ const TotalPoints = forwardRef((props: TotalPointsProps, ref,) => {
       if (onPointsUpdate) onPointsUpdate(totalPoints);
     };
 
+  const [milestones, setMilestones] = useState<WeekMilestones[]>([]);
+  const [userProgress, setUserProgress] = useState<{
+      [weekKey: string]: { [milestoneName: string]: number };
+    }>({});
+  
+    useEffect(() => {
+      const fetchData = async () => {
+        const res = await fetch("/api/gameplay/milestones");
+        const data = await res.json();
+  
+        const sorted = [...data.playerMilestones].sort(
+          (a: WeekMilestones, b: WeekMilestones) =>
+            new Date(b.weekStart).getTime() - new Date(a.weekStart).getTime()
+        );
+  
+        setMilestones(sorted);
+  
+        if (!session?.user?.id) return;
+  
+        const progressMap: {
+          [weekKey: string]: { [milestoneName: string]: number };
+        } = {};
+  
+        for (const week of sorted) {
+          const startDate = new Date(week.weekStart);
+          const endDate = new Date(startDate);
+          endDate.setDate(startDate.getDate() + 6);
+  
+          const weekKey = week.weekStart;
+          progressMap[weekKey] = {};
+  
+          for (const milestone of week.data) {
+            const { table, field, value } = milestone;
+  
+            const { count } = await supabase
+              .from(table)
+              .select("*", { count: "exact" })
+              .eq(field, value)
+              .eq("author", session.user.id)
+              .gte("created_at", startDate.toISOString())
+              .lte("created_at", endDate.toISOString());
+  
+            progressMap[weekKey][milestone.name] = count || 0;
+          }
+        }
+  
+        setUserProgress(progressMap);
+      };
+  
+      fetchData();
+    }, [session]);
+
+  useEffect(() => {
+    if (!userId) return;
+
     fetchAllPoints();
   }, [userId, supabase]);
 
@@ -348,6 +386,7 @@ const TotalPoints = forwardRef((props: TotalPointsProps, ref,) => {
     planetFourPoints +
     jvhPoints +
     cloudspottingPoints +
+    referralPoints +
     planktonPoints +
     milestonePoints -
     researchedPenalty;
@@ -388,15 +427,30 @@ const TotalPoints = forwardRef((props: TotalPointsProps, ref,) => {
     return <span>{researchedPenalty}</span>;
   };
 
-    // if (type === "groups") {
+  // if (type === "groups") {
   //   return (
-
   //   )
   // }
 
+  const breakdown = (
+    <div className="text-sm mt-2 space-y-1">
+      <div>🪐 Planet Hunters: {planetHuntersPoints}</div>
+      <div>📷 Daily Minor Planets: {dailyMinorPlanetPoints}</div>
+      <div>🤖 AI4Mars: {ai4mPoints}</div>
+      <div>🛰️ Planet Four: {planetFourPoints}</div>
+      <div>🌪️ Jovian Vortex Hunter: {jvhPoints}</div>
+      <div>☁️ Cloudspotting: {cloudspottingPoints}</div>
+      <div>🌊 Plankton: {planktonPoints}</div>
+      <div>🎯 Milestones: {milestonePoints}</div>
+      <div>🎁 Referrals: {referralPoints}</div>
+      <div>❌ Researched Penalty: -{researchedPenalty}</div>
+    </div>
+  );
+
   return (
-    <div>
-      {totalPoints}
+    <div className="cursor-pointer" onClick={() => setShowBreakdown(!showBreakdown)}>
+      <div className="text-lg font-bold">{totalPoints}</div>
+      {showBreakdown && breakdown}
     </div>
   );
 });
diff --git a/components/Structures/Structures.tsx b/components/Structures/Structures.tsx
index 374253f8a..e8539ecfe 100644
--- a/components/Structures/Structures.tsx
+++ b/components/Structures/Structures.tsx
@@ -4,40 +4,35 @@ import React, { useCallback, useEffect, useState } from "react";
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
 import { useActivePlanet } from "@/context/ActivePlanet";
 import { InventoryStructureItem, StructureItemDetail } from "@/types/Items";
-import IndividualStructure, { IndividualStructureProps } from "./IndividualStructure";
-import { StructuresConfig } from "@/constants/Structures/Properties";
+// import IndividualStructure, { IndividualStructureProps } from "./IndividualStructure";
+// import { StructuresConfig } from "@/constants/Structures/Properties";
 
 import "../../styles/Anims/StarterStructureAnimations.css";
- 
-interface StructuresOnPlanetProps { 
-    onStructuresFetch: (
-        orbitalStructures: InventoryStructureItem[],
-        atmosphereStructures: InventoryStructureItem[],
-        surfaceStructures: InventoryStructureItem[]
-    ) => void;
-}; 
 
-import { UnownedSurfaceStructures } from "./Build/EditMode";
+// import { UnownedSurfaceStructures } from "./Build/EditMode";
+import { useRouter } from "next/navigation";
 
 interface Props {
   author?: string;
 };
 
-export default function StructuresOnPlanet({ author }: Props) {
-  const supabase = useSupabaseClient(); 
+export default function Structures() {
+  const supabase = useSupabaseClient();
   const session = useSession();
-
+  const router = useRouter();
   const { activePlanet } = useActivePlanet();
 
-  const [userStructuresOnPlanet, setUserStructuresOnPlanet] = useState<InventoryStructureItem[]>([]);
-  const [itemDetails, setItemDetails] = useState<Map<number, StructureItemDetail>>(new Map());
-  const [selectedStructure, setSelectedStructure] = useState<IndividualStructureProps | null>(null);
-  const [missionStructureId, setMissionStructureId] = useState<number | null>(null);
-
   const [loading, setLoading] = useState(true);
+  const [structureGroups, setStructureGroups] = useState<{
+    Orbital: InventoryStructureItem[],
+    Atmosphere: InventoryStructureItem[],
+    Surface: InventoryStructureItem[],
+  }>({ Orbital: [], Atmosphere: [], Surface: [] });
+
+  const [itemDetails, setItemDetails] = useState<Map<number, StructureItemDetail>>(new Map());
 
   const fetchStructures = useCallback(async () => {
-    if (!session?.user?.id || !activePlanet?.id) {
+    if (!session || !activePlanet) {
       setLoading(false);
       return;
     };
@@ -45,431 +40,106 @@ export default function StructuresOnPlanet({ author }: Props) {
     try {
       const response = await fetch('/api/gameplay/inventory');
       const itemsData: StructureItemDetail[] = await response.json();
+
       const itemMap = new Map<number, StructureItemDetail>();
       itemsData.forEach(item => {
         if (item.ItemCategory === 'Structure') {
           itemMap.set(item.id, item);
         };
       });
-
       setItemDetails(itemMap);
 
-      const { data: inventoryData, error: inventoryError } = await supabase
-        .from('inventory')
-        .select('*')
-        .eq('owner', session.user.id)
-        .eq('anomaly', activePlanet.id);
+      const { data: inventoryData, error } = await supabase
+        .from("inventory")
+        .select("*")
+        .eq("owner", session.user.id)
+        .eq("anomaly", activePlanet.id);
 
-      if (inventoryError) throw inventoryError;
+      if (error) throw error;
 
-      const uniqueStructuresMap = new Map<number, InventoryStructureItem>();
-      inventoryData.forEach(( structure: InventoryStructureItem ) => {
-        const itemDetail = itemMap.get(structure.item);
-        if (itemDetail && itemDetail.locationType === 'Surface' && !uniqueStructuresMap.has(structure.item)) {
-          uniqueStructuresMap.set(structure.item, structure);
-        };
-      });
+      const groups = {
+        Orbital: [] as InventoryStructureItem[],
+        Atmosphere: [] as InventoryStructureItem[],
+        Surface: [] as InventoryStructureItem[],
+      };
 
-      const uniqueStructures = Array.from(uniqueStructuresMap.values());
-      setUserStructuresOnPlanet(uniqueStructures || []);
-    } catch (error: any) {
-      console.error('Error fetching data: ', error);
-    } finally {
-      setLoading(false);
-    };
-  }, [session?.user?.id, activePlanet?.id, supabase]);
+      const uniqueStructureMap = new Map<number, InventoryStructureItem>();
 
-  const fetchStructuresFromProvidedAuthor = useCallback(async () => {
-    if (!session?.user?.id || !activePlanet?.id) {
-      setLoading(false);
-      return;
-    };
-
-    try {
-      const response = await fetch('/api/gameplay/inventory');
-      const itemsData: StructureItemDetail[] = await response.json();
-      const itemMap = new Map<number, StructureItemDetail>();
-      itemsData.forEach(item => {
-        if (item.ItemCategory === 'Structure') {
-          itemMap.set(item.id, item);
-        };
-      });
-
-      setItemDetails(itemMap);
-
-      const { data: inventoryData, error: inventoryError } = await supabase
-        .from('inventory')
-        .select('*')
-        .eq('owner', author)
-        .eq('anomaly', activePlanet.id);
-
-      if (inventoryError) throw inventoryError;
-
-      const uniqueStructuresMap = new Map<number, InventoryStructureItem>();
-      inventoryData.forEach((structure: InventoryStructureItem) => {
+      for (const structure of inventoryData) {
         const itemDetail = itemMap.get(structure.item);
-        if (itemDetail && itemDetail.locationType === 'Surface' && !uniqueStructuresMap.has(structure.item)) {
-          uniqueStructuresMap.set(structure.item, structure);
+        if (itemDetail && !uniqueStructureMap.has(structure.item)) {
+          uniqueStructureMap.set(structure.item, structure);
+          const location = itemDetail.locationType || 'Surface';
+          if (location in groups) {
+            groups[location as keyof typeof groups].push(structure);
+          };
         };
-      });
+      };
 
-      const uniqueStructures = Array.from(uniqueStructuresMap.values());
-      setUserStructuresOnPlanet(uniqueStructures || []);
-    } catch (error) {
-      console.error('Error fetching data:', error);
+      setStructureGroups(groups);
+    } catch (err) {
+      console.error("Error fetching structures:", err);
     } finally {
       setLoading(false);
-    };
-  }, [session?.user?.id, activePlanet?.id, supabase]);
+    }
+  }, [session, supabase, activePlanet]);
 
   useEffect(() => {
-    if (!author) {
-      fetchStructures();
-    };
+    fetchStructures();
+  }, [fetchStructures]);
 
-    if (author) {
-      fetchStructuresFromProvidedAuthor();
+  const handleIconClick = (itemId: number) => {
+    const routes: Record<number, string> = {
+      3103: "telescope",
+      3104: "greenhouse",
+      3105: "balloon",
+      3107: "seiscam",
     };
-  }, [fetchStructures]);
 
-  const handleIconClick = ( itemId: number, inventoryId: number ) => {
-    const itemDetail = itemDetails.get(itemId);
-    if (itemDetail) {
-      const config = StructuresConfig[itemDetail.id] || {};
-      setSelectedStructure({
-        name: itemDetail.name,
-        imageSrc: itemDetail.icon_url,
-        title: `Structure ID: ${inventoryId}`,
-        labels: config.labels || [],
-        actions: config.actions || [],
-        buttons: config.buttons.map(button => ({
-          ...button,
-          showInNoModal: true,
-        })),
-        structureId: inventoryId
-      });
+    const route = routes[itemId];
+    if (route) {
+      router.push(`/structures/${route}`);
     };
   };
 
-  const handleClose = useCallback(() => {
-    setSelectedStructure(null);
-  }, []);
+  const renderStructureGroup = (label: string, structures: InventoryStructureItem[]) => {
+    if (!structures.length) return null;
 
-  if (loading) {
     return (
-        <div>
-            <p>
-                Loading...
-            </p>
-        </div>
-    );
-  }; 
-
-  return (
-<div className="relative">
-  <div className={`grid px-11 grid-cols-4 gap-1 gap-y-3 relative ${userStructuresOnPlanet.length === 1 ? 'justify-center' : 'justify-between'}`}>
-    {userStructuresOnPlanet.map(( structure, index ) => {
-      const itemDetail = itemDetails.get(structure.item);
-      return itemDetail ? (
-        <div 
-          key={structure.id} 
-          className={`flex flex-col items-center space-y-2 ${index === 1 ? 'justify-self-center' : ''}`}
-        >
-          <img
-            src={itemDetail.icon_url}
-            alt={itemDetail.name}
-            className={`w-24 h-24 object-cover cursor-pointer ${structure.item === missionStructureId ? 'bouncing-structure' : 'moving-structure'}`}
-            onClick={() => handleIconClick(itemDetail.id, structure.id)}
-          />
-          {!author && (
-            <p className="text-white text-sm mt-2">{itemDetail.name}</p>
-          )}
+      <div className="mb-6">
+        <h3 className="text-center text-lg font-semibold text-blue-800 mb-3">{label}</h3>
+        <div className="grid px-11 grid-cols-4 gap-1 gap-y-3">
+          {structures.map(structure => {
+            const itemDetail = itemDetails.get(structure.item);
+            if (!itemDetail) return null;
+
+            return (
+              <div key={structure.id} className="flex flex-col items-center space-y-2">
+                <img
+                  src={itemDetail.icon_url}
+                  alt={itemDetail.name}
+                  className="w-24 h-24 object-cover cursor-pointer hover:scale-105 transition-transform duration-200"
+                  onClick={() => handleIconClick(itemDetail.id)}
+                />
+                <p className="text-xs text-center text-gray-700">{itemDetail.name}</p>
+              </div>
+            );
+          })}
         </div>
-      ) : null;
-    })}
-  </div>
-
-  {selectedStructure && (
-    <IndividualStructure
-      key={selectedStructure.name}
-      name={selectedStructure.name}
-      title={selectedStructure.title}
-      labels={selectedStructure.labels}
-      imageSrc={selectedStructure.imageSrc}
-      actions={selectedStructure.actions}
-      buttons={selectedStructure.buttons}
-      structureId={selectedStructure.structureId}
-      onClose={handleClose}
-    />
-  )}
-  {!author && (
-    <UnownedSurfaceStructures />
-  )}
-</div>
-  );
-};
-
-export function OrbitalStructuresOnPlanet() {
-    const supabase = useSupabaseClient();
-  const session = useSession();
-
-  const { activePlanet } = useActivePlanet();
-
-  const [userStructuresOnPlanet, setUserStructuresOnPlanet] = useState<InventoryStructureItem[]>([]);
-  const [itemDetails, setItemDetails] = useState<Map<number, StructureItemDetail>>(new Map());
-  const [loading, setLoading] = useState(true);
-  const [selectedStructure, setSelectedStructure] = useState<IndividualStructureProps | null>(null);
-  const [missionStructureId, setMissionStructureId] = useState<number | null>(null);
-
-  const fetchStructures = useCallback(async () => {
-    if (!session?.user?.id || !activePlanet?.id) {
-      setLoading(false);
-      return;
-    };
-
-    try {
-      const response = await fetch('/api/gameplay/inventory');
-      const itemsData: StructureItemDetail[] = await response.json();
-
-      const itemMap = new Map<number, StructureItemDetail>();
-      itemsData.forEach(item => {
-        if (item.ItemCategory === 'Structure') {
-          itemMap.set(item.id, item);
-        }
-      });
-
-      setItemDetails(itemMap);
-
-      const { data: inventoryData, error: inventoryError } = await supabase
-        .from('inventory')
-        .select('*')
-        .eq('owner', session.user.id)
-        .eq('anomaly', activePlanet.id);
-
-      if (inventoryError) throw inventoryError;
-
-      const uniqueStructuresMap = new Map<number, InventoryStructureItem>();
-      inventoryData.forEach((structure: InventoryStructureItem) => {
-        const itemDetail = itemMap.get(structure.item);
-        if (itemDetail && itemDetail.locationType === 'Orbital' && !uniqueStructuresMap.has(structure.item)) {
-          uniqueStructuresMap.set(structure.item, structure);
-        }
-      });
-
-      const uniqueStructures = Array.from(uniqueStructuresMap.values());
-      setUserStructuresOnPlanet(uniqueStructures || []);
-    } catch (error) {
-      console.error('Error fetching data:', error);
-    } finally {
-      setLoading(false);
-    }
-  }, [session?.user?.id, activePlanet?.id, supabase]);
-
-  useEffect(() => {
-    fetchStructures();
-  }, [fetchStructures]);
-
-  const getRandomAnimationDuration = () => `${Math.random() * 2 + 1.5}s`;
-  const getRandomAnimationDelay = () => `${Math.random() * 1}s`;
-
-  const handleIconClick = (itemId: number, inventoryId: number) => {
-    const itemDetail = itemDetails.get(itemId);
-    if (itemDetail) {
-      const config = StructuresConfig[itemDetail.id] || {};
-      setSelectedStructure({
-        name: itemDetail.name,
-        imageSrc: itemDetail.icon_url,
-        title: `Structure ID: ${inventoryId}`,
-        labels: config.labels || [],
-        actions: config.actions || [],
-        buttons: config.buttons.map(button => ({
-          ...button,
-          showInNoModal: true,
-        })),
-        structureId: inventoryId
-      });
-    }
-  };
-
-  const handleClose = useCallback(() => {
-    setSelectedStructure(null);
-  }, []);
-
-  if (loading) {
-    return <div>Loading...</div>;
-  }
-
-  const activeStructure = userStructuresOnPlanet.find(structure => structure.item === missionStructureId);
-  const otherStructures = userStructuresOnPlanet.filter(structure => structure.item !== missionStructureId);
-
-  return (
-    <div className="relative">
-      <div className="grid grid-cols-4 gap-1 gap-y-1">
-        {activeStructure && (
-          <div key={activeStructure.id} className="flex flex-col items-center space-y-2">
-            <img
-              src={itemDetails.get(activeStructure.item)?.icon_url}
-              alt={itemDetails.get(activeStructure.item)?.name}
-              className="w-10 h-10 object-cover cursor-pointer bouncing-structure"
-              onClick={() => handleIconClick(activeStructure.item, activeStructure.id)}
-            />
-          </div>
-        )}
-        {otherStructures.map((structure) => {
-          const itemDetail = itemDetails.get(structure.item);
-
-          return itemDetail ? (
-            <div key={structure.id} className="flex flex-col items-center space-y-2">
-              <img
-                src={itemDetail.icon_url}
-                alt={itemDetail.name}
-                className="w-8 h-8 object-cover cursor-pointer moving-structure"
-                onClick={() => handleIconClick(itemDetail.id, structure.id)}
-              />
-            </div>
-          ) : null;
-        })}
       </div>
-
-      {selectedStructure && (
-        <IndividualStructure
-          key={selectedStructure.name}
-          name={selectedStructure.name}
-          title={selectedStructure.title}
-          labels={selectedStructure.labels}
-          imageSrc={selectedStructure.imageSrc}
-          actions={selectedStructure.actions}
-          buttons={selectedStructure.buttons}
-          structureId={selectedStructure.structureId}
-          onClose={handleClose}
-        />
-      )}
-    </div>
-  );
-};
-
-export function AtmosphereStructuresOnPlanet() {
-  const supabase = useSupabaseClient();
-  const session = useSession();
-
-  const { activePlanet } = useActivePlanet();
-
-  const [userStructuresOnPlanet, setUserStructuresOnPlanet] = useState<InventoryStructureItem[]>([]);
-  const [itemDetails, setItemDetails] = useState<Map<number, StructureItemDetail>>(new Map());
-  const [loading, setLoading] = useState(true);
-  const [selectedStructure, setSelectedStructure] = useState<IndividualStructureProps | null>(null);
-
-  const fetchStructures = useCallback(async () => {
-    if (!session?.user?.id || !activePlanet?.id) {
-      setLoading(false);
-      return;
-    }
-
-    try {
-      // Fetch item details from the gameplay API
-      const response = await fetch('/api/gameplay/inventory');
-      const itemsData: StructureItemDetail[] = await response.json();
-
-      // Create a map for quick access to item details
-      const itemMap = new Map<number, StructureItemDetail>();
-      itemsData.forEach(item => {
-        if (item.ItemCategory === 'Structure') {
-          itemMap.set(item.id, item);
-        }
-      });
-
-      setItemDetails(itemMap);
-
-      // Fetch inventory data for user and active planet
-      const { data: inventoryData, error: inventoryError } = await supabase
-        .from('inventory')
-        .select('*')
-        .eq('owner', session.user.id)
-        .eq('anomaly', activePlanet.id);
-
-      if (inventoryError) throw inventoryError;
-
-      // Filter for unique structures based on locationType fetched from the API
-      const uniqueStructuresMap = new Map<number, InventoryStructureItem>();
-      inventoryData.forEach((structure: InventoryStructureItem) => {
-        const itemDetail = itemMap.get(structure.item);
-        if (itemDetail && itemDetail.locationType === 'Atmosphere' && !uniqueStructuresMap.has(structure.item)) {
-          uniqueStructuresMap.set(structure.item, structure);
-        }
-      });
-
-      const uniqueStructures = Array.from(uniqueStructuresMap.values());
-      setUserStructuresOnPlanet(uniqueStructures || []);
-    } catch (error) {
-      console.error('Error fetching data:', error);
-    } finally {
-      setLoading(false);
-    }
-  }, [session?.user?.id, activePlanet?.id, supabase]);
-
-  useEffect(() => {
-    fetchStructures();
-  }, [fetchStructures]);
-
-  const handleIconClick = (itemId: number, inventoryId: number) => {
-    const itemDetail = itemDetails.get(itemId);
-    if (itemDetail) {
-      const config = StructuresConfig[itemDetail.id] || {};
-      setSelectedStructure({
-        name: itemDetail.name,
-        imageSrc: itemDetail.icon_url,
-        title: `Structure ID: ${inventoryId}`,
-        labels: config.labels || [],
-        actions: config.actions || [],
-        buttons: config.buttons.map(button => ({
-          ...button, 
-          showInNoModal: true,
-        })),
-        structureId: inventoryId
-      });
-    }
-  };
-
-  const handleClose = useCallback(() => {
-    setSelectedStructure(null);
-  }, []);
-
-  if (loading) {
-    return <div>Loading...</div>;
+    );
   };
 
   return (
-    <div className="relative">
-      <div className="grid grid-cols-1 gap-4 justify-items-center" style={{ marginLeft: "-14%" }}>
-        {userStructuresOnPlanet.map((structure) => {
-          const itemDetail = itemDetails.get(structure.item);
-
-          return itemDetail ? (
-            <div key={structure.id} className="flex flex-col items-center space-y-2">
-              <img
-                src={itemDetail.icon_url}
-                alt={itemDetail.name}
-                className="w-16 h-16 object-cover cursor-pointer"
-                onClick={() => handleIconClick(itemDetail.id, structure.id)}
-              />
-              <p className="text-white text-sm mt-2">{itemDetail.name}</p>
-            </div>
-          ) : null;
-        })}
-      </div>
-
-      {selectedStructure && (
-        <IndividualStructure
-          key={selectedStructure.name}
-          name={selectedStructure.name}
-          title={selectedStructure.title}
-          labels={selectedStructure.labels}
-          imageSrc={selectedStructure.imageSrc}
-          actions={selectedStructure.actions}
-          buttons={selectedStructure.buttons}
-          structureId={selectedStructure.structureId}
-          onClose={handleClose}
-        />
+    <div className="relative w-full">
+      {loading ? (
+        <p className="text-center text-sm text-gray-500">Loading structures...</p>
+      ) : (
+        <>
+          {renderStructureGroup("", structureGroups.Orbital)}
+          {renderStructureGroup("", structureGroups.Atmosphere)}
+          {renderStructureGroup("", structureGroups.Surface)}
+        </>
       )}
     </div>
   );
diff --git a/components/Structures/Telescope/anomaly-component.tsx b/components/Structures/Telescope/anomaly-component.tsx
new file mode 100644
index 000000000..1f1dfd83b
--- /dev/null
+++ b/components/Structures/Telescope/anomaly-component.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import type { Anomaly } from "@/types/Structures/telescope"
+
+interface AnomalyComponentProps {
+  anomaly: Anomaly
+  onClick: (anomaly: Anomaly) => void
+  isHighlighted?: boolean
+}
+
+export function AnomalyComponent({ anomaly, onClick, isHighlighted = false }: AnomalyComponentProps) {
+  const baseClasses = "absolute cursor-pointer transition-all duration-300 hover:scale-125 hover:brightness-125"
+  const size = anomaly.size || 1
+  const baseSize = anomaly.type === "accretion_disc" ? 16 : anomaly.type === "sunspot" ? 12 : 9
+
+  // Create shape-specific styles
+  const getShapeStyles = () => {
+    const commonStyles = {
+      left: `${anomaly.x}%`,
+      top: `${anomaly.y}%`,
+      width: `${baseSize * size}px`,
+      height: `${baseSize * size}px`,
+      background: `radial-gradient(circle, ${anomaly.color}22 0%, ${anomaly.color} 40%, ${anomaly.color}CC 100%)`,
+      boxShadow: isHighlighted
+        ? `0 0 ${30 * size}px ${15 * size}px ${anomaly.color}88, 0 0 ${40 * size}px ${20 * size}px #ffffff44`
+        : `0 0 ${20 * size * anomaly.glowIntensity}px ${10 * size * anomaly.glowIntensity}px ${anomaly.color}66`,
+      filter: `brightness(${1 + anomaly.brightness}) saturate(1.3)`,
+      animation: isHighlighted
+        ? `pulse 0.8s ease-in-out infinite alternate`
+        : `pulse ${anomaly.pulseSpeed}s ease-in-out infinite alternate`,
+      zIndex: isHighlighted ? 50 : 10,
+    }
+
+    switch (anomaly.shape) {
+      case "circle":
+        return {
+          ...commonStyles,
+          borderRadius: "50%",
+        }
+      case "star":
+        return {
+          ...commonStyles,
+          clipPath: "polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)",
+        }
+      case "diamond":
+        return {
+          ...commonStyles,
+          clipPath: "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)",
+          transform: "rotate(45deg)",
+        }
+      case "hexagon":
+        return {
+          ...commonStyles,
+          clipPath: "polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%)",
+        }
+      case "triangle":
+        return {
+          ...commonStyles,
+          clipPath: "polygon(50% 0%, 0% 100%, 100% 100%)",
+        }
+      case "oval":
+        return {
+          ...commonStyles,
+          borderRadius: "50%",
+          width: `${baseSize * size * 1.5}px`,
+          height: `${baseSize * size * 0.7}px`,
+          transform: `rotate(${Math.random() * 360}deg)`,
+        }
+      default:
+        return {
+          ...commonStyles,
+          borderRadius: "50%",
+        }
+    }
+  }
+
+  return (
+    <div
+      key={anomaly.id}
+      className={`${baseClasses} ${anomaly.classified ? "ring-2 ring-[#5E81AC]" : ""} ${isHighlighted ? "ring-4 ring-white" : ""}`}
+      style={getShapeStyles()}
+      onClick={() => onClick(anomaly)}
+    >
+      {anomaly.classified && (
+        <div className="absolute -top-1 -right-1 w-3 h-3 bg-[#5E81AC] rounded-full border-2 border-white" />
+      )}
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/components/Structures/Telescope/anomaly-dialogue.tsx b/components/Structures/Telescope/anomaly-dialogue.tsx
new file mode 100644
index 000000000..65d7c2cbc
--- /dev/null
+++ b/components/Structures/Telescope/anomaly-dialogue.tsx
@@ -0,0 +1,150 @@
+"use client"
+
+import { useRouter } from "next/navigation"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Star, Zap, Target, Disc } from "lucide-react"
+import type { Anomaly } from "@/types/Structures/telescope"
+
+interface AnomalyDialogProps {
+  showClassifyDialog: boolean;
+  setShowClassifyDialog: (show: boolean) => void;
+  selectedAnomaly: Anomaly | null;
+};
+
+export default function AnomalyDialog({
+  showClassifyDialog,
+  setShowClassifyDialog,
+  selectedAnomaly,
+}: AnomalyDialogProps) {
+  const router = useRouter()
+
+  if (!selectedAnomaly) return null
+
+  const handleClassify = () => {
+    const id = selectedAnomaly?.id?.toString()
+    if (!id) return
+
+    let path = ""
+
+    switch (selectedAnomaly.type) {
+      case "exoplanet":
+        path = `/structures/telescope/planet-hunters/${id}/classify`
+        break
+      case "sunspot":
+        path = `/structures/telescope/sunspots/${id}/classify`
+        break
+      case "asteroid":
+        path = `/structures/telescope/daily-minor-planet/${id}/classify`
+        break
+      case "accretion_disc":
+        path = `/structures/telescope/disk-detective/${id}/classify`
+        break
+      default:
+        return
+    }
+
+    router.push(path)
+  }
+
+  const getTypeIcon = (type: string) => {
+    switch (type) {
+      case "exoplanet":
+        return <Star className="h-5 w-5" />
+      case "sunspot":
+        return <Zap className="h-5 w-5" />
+      case "asteroid":
+        return <Target className="h-5 w-5" />
+      case "accretion_disc":
+        return <Disc className="h-5 w-5" />
+      default:
+        return <Star className="h-5 w-5" />
+    }
+  }
+
+  const getTypeColor = (type: string) => {
+    switch (type) {
+      case "exoplanet":
+        return "bg-blue-500"
+      case "sunspot":
+        return "bg-orange-500"
+      case "asteroid":
+        return "bg-purple-500"
+      case "accretion_disc":
+        return "bg-green-500"
+      default:
+        return "bg-gray-500"
+    }
+  }
+
+  return (
+    <Dialog open={showClassifyDialog} onOpenChange={setShowClassifyDialog}>
+      <DialogContent className="bg-[#2E3440] border-[#4C566A] text-[#ECEFF4] max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            {getTypeIcon(selectedAnomaly.type)}
+            Classify Anomaly
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="text-center">
+            <div
+              className="w-16 h-16 mx-auto mb-3 rounded-full"
+              style={{
+                backgroundColor: selectedAnomaly.color,
+                boxShadow: `0 0 20px ${selectedAnomaly.color}`,
+              }}
+            />
+            <h3 className="text-lg font-semibold">{selectedAnomaly.name}</h3>
+            <Badge className={`${getTypeColor(selectedAnomaly.type)} text-white mt-2`}>
+              {selectedAnomaly.type.replace("_", " ").toUpperCase()}
+            </Badge>
+          </div>
+
+          <div className="space-y-2 text-sm">
+            <div className="flex justify-between">
+              <span className="text-[#88C0D0]">Sector:</span>
+              <span>{selectedAnomaly.sector}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-[#88C0D0]">Brightness:</span>
+              <span>{(selectedAnomaly.brightness * 100).toFixed(0)}%</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-[#88C0D0]">Size:</span>
+              <span>{(selectedAnomaly.size * 100).toFixed(0)}%</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-[#88C0D0]">Shape:</span>
+              <span className="capitalize">{selectedAnomaly.shape}</span>
+            </div>
+          </div>
+
+          <div className="bg-[#434C5E] p-3 rounded-lg">
+            <p className="text-sm text-[#D8DEE9]">
+              {/* Optional info about classification can go here */}
+            </p>
+          </div>
+
+          <div className="flex gap-2">
+            <Button
+              onClick={() => setShowClassifyDialog(false)}
+              variant="outline"
+              className="flex-1 border-[#4C566A] text-[#D8DEE9] hover:bg-[#434C5E]"
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleClassify}
+              className="flex-1 bg-[#A3BE8C] text-[#2E3440] hover:bg-[#8FBCBB]"
+            >
+              Classify
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
\ No newline at end of file
diff --git a/components/Structures/Telescope/blocks/navigation-controls.tsx b/components/Structures/Telescope/blocks/navigation-controls.tsx
new file mode 100644
index 000000000..a7eff0644
--- /dev/null
+++ b/components/Structures/Telescope/blocks/navigation-controls.tsx
@@ -0,0 +1,112 @@
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import {
+  Search,
+  Eye,
+  ChevronUp,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  Star,
+  Archive,
+  Radio,
+  Crosshair,
+  Power,
+  Calendar,
+  Building,
+  Filter,
+} from "lucide-react";
+
+import React, { useState } from "react";
+
+type TelescopeNavControlsProps = {
+  sector: { x: number; y: number };
+  setSector: React.Dispatch<React.SetStateAction<{ x: number; y: number }>>;
+  sectorName: string;
+  targetsCount: number;
+  maxTargets: number;
+};
+
+export default function TelescopeNavControls({
+  sector,
+  setSector,
+  sectorName,
+  targetsCount,
+  maxTargets,
+}: TelescopeNavControlsProps) {
+  const handleNavigate = (direction: "up" | "down" | "left" | "right") => {
+    const newSector = { ...sector };
+    switch (direction) {
+      case "up":
+        newSector.y -= 1;
+        break;
+      case "down":
+        newSector.y += 1;
+        break;
+      case "left":
+        newSector.x -= 1;
+        break;
+      case "right":
+        newSector.x += 1;
+        break;
+    }
+    setSector(newSector);
+  };
+
+  return (
+    <Card className="m-4 bg-[#1a1a2e]/60 border border-[#a8d8ea]/20 backdrop-blur-sm">
+      <CardHeader className="pb-3">
+        <CardTitle className="text-[#e8f4f8] text-sm font-mono flex items-center gap-2">
+          <Crosshair className="h-4 w-4 text-[#a8d8ea]" />
+          NAVIGATION
+        </CardTitle>
+        <CardDescription className="text-xs text-[#a8d8ea]/70">
+          {sectorName} — {targetsCount}/{maxTargets} targets
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-3 gap-1 w-fit mx-auto">
+          <div></div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => handleNavigate("up")}
+            className="h-8 w-8 p-0 text-[#a8d8ea] hover:bg-[#a8d8ea]/20 hover:text-[#e8f4f8] border border-[#a8d8ea]/30"
+          >
+            <ChevronUp className="h-4 w-4" />
+          </Button>
+          <div></div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => handleNavigate("left")}
+            className="h-8 w-8 p-0 text-[#a8d8ea] hover:bg-[#a8d8ea]/20 hover:text-[#e8f4f8] border border-[#a8d8ea]/30"
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+          <div className="flex items-center justify-center">
+            <div className="w-3 h-3 bg-gradient-to-br from-[#a8d8ea] to-[#87ceeb] rounded-full"></div>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => handleNavigate("right")}
+            className="h-8 w-8 p-0 text-[#a8d8ea] hover:bg-[#a8d8ea]/20 hover:text-[#e8f4f8] border border-[#a8d8ea]/30"
+          >
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+          <div></div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => handleNavigate("down")}
+            className="h-8 w-8 p-0 text-[#a8d8ea] hover:bg-[#a8d8ea]/20 hover:text-[#e8f4f8] border border-[#a8d8ea]/30"
+          >
+            <ChevronDown className="h-4 w-4" />
+          </Button>
+          <div></div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
\ No newline at end of file
diff --git a/components/Structures/Telescope/blocks/right-sidebar.tsx.rb b/components/Structures/Telescope/blocks/right-sidebar.tsx.rb
new file mode 100644
index 000000000..69626c10b
--- /dev/null
+++ b/components/Structures/Telescope/blocks/right-sidebar.tsx.rb
@@ -0,0 +1,71 @@
+export default function TelescopeRightSidebarDesktop() {
+    return (
+        <div className="hidden lg:flex w-80 h-full bg-[#16213e]/95 border-l border-[#a8d8ea]/20 flex-col backdrop-blur-sm">
+        {/* Header */}
+        <div className="p-4 border-b border-[#a8d8ea]/20 bg-gradient-to-r from-[#16213e] to-[#1a1a2e]">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 bg-gradient-to-br from-[#87ceeb] to-[#a8d8ea] rounded-full flex items-center justify-center shadow-lg">
+              <Building className="h-5 w-5 text-[#1a1a2e]" />
+            </div>
+            <div>
+              <h1 className="text-[#e8f4f8] font-bold text-lg tracking-wider">STATISTICS</h1>
+              <p className="text-[#a8d8ea] text-xs font-mono">DISCOVERY DATA</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Discovery Stats */}
+        <div className="p-4 border-b border-[#a8d8ea]/20">
+          <div className="grid grid-cols-2 gap-3 mb-3">
+            <div className="text-center">
+              <div className="text-2xl font-bold text-[#e8f4f8] font-mono">{classifications.length}</div>
+              <div className="text-xs text-[#a8d8ea] font-mono">YOUR FINDS</div>
+            </div>
+            <div className="text-center">
+              <div className="text-2xl font-bold text-[#a8d8ea] font-mono">{allClassifications.length}</div>
+              <div className="text-xs text-[#a8d8ea] font-mono">TOTAL FINDS</div>
+            </div>
+          </div>
+        </div>
+
+        {/* Recent Classifications */}
+        <div className="flex-1 overflow-y-auto p-4 space-y-3">
+          <div className="flex items-center gap-2 mb-3">
+            <Radio className="h-4 w-4 text-[#a8d8ea]" />
+            <span className="text-[#e8f4f8] text-sm font-mono">RECENT ACTIVITY</span>
+          </div>
+
+          {classifications.slice(0, 8).map((classification) => (
+            <Card
+              key={classification.id}
+              className="bg-[#1a1a2e]/60 border border-[#a8d8ea]/20 hover:border-[#a8d8ea]/40 transition-all cursor-pointer backdrop-blur-sm"
+              onClick={() => handleViewClassification(classification)}
+            >
+              <CardContent className="p-3">
+                <div className="flex items-center justify-between mb-2">
+                  <div className="text-[#e8f4f8] text-sm font-mono">#{classification.id}</div>
+                  <Badge className="bg-[#a8d8ea] text-[#1a1a2e] text-xs font-mono">
+                    {classification.classificationtype?.toUpperCase() || "UNKNOWN"}
+                  </Badge>
+                </div>
+                <div className="flex items-center gap-2 text-xs text-[#a8d8ea] font-mono">
+                  <Calendar className="h-3 w-3" />
+                  <span>{new Date(classification.created_at).toLocaleDateString()}</span>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+
+          {classifications.length === 0 && (
+            <div className="text-center py-8">
+              <div className="w-16 h-16 border-2 border-dashed border-[#a8d8ea]/30 rounded-full flex items-center justify-center mx-auto mb-4">
+                <Search className="h-6 w-6 text-[#a8d8ea]/50" />
+              </div>
+              <p className="text-[#e8f4f8] text-sm font-mono mb-1">NO CLASSIFICATIONS YET</p>
+              <p className="text-[#a8d8ea] text-xs font-mono">Start exploring!</p>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+};
\ No newline at end of file
diff --git a/components/Structures/Telescope/blocks/telescope-utilities.tsx b/components/Structures/Telescope/blocks/telescope-utilities.tsx
new file mode 100644
index 000000000..549bfe6c0
--- /dev/null
+++ b/components/Structures/Telescope/blocks/telescope-utilities.tsx
@@ -0,0 +1,99 @@
+import type { Anomaly } from "@/types/Structures/telescope";
+import { seededRandom, generateSectorName } from "@/utils/Structures/Telescope/sector-utils";
+
+// Pastel color palette
+export const PASTEL_COLORS = {
+  primary: "#a8d8ea", // soft blue
+  secondary: "#ffb3d9", // soft pink
+  accent: "#c7cedb", // soft purple
+  success: "#b8e6b8", // soft green
+  warning: "#ffd93d", // soft yellow
+  info: "#87ceeb", // soft sky blue
+  background: "#1a1a2e", // dark navy
+  surface: "#16213e", // darker blue
+  text: "#e8f4f8", // very light blue
+  textSecondary: "#b8c5d1", // muted blue-gray
+}
+
+// Anomaly type mapping configuration with pastel colors
+export const ANOMALY_TYPES = {
+  exoplanet: {
+    project: "planet-hunters",
+    colors: ["#a8d8ea", "#87ceeb", "#b8e6b8", "#c7cedb", "#a8d8ea", "#87ceeb", "#b8e6b8", "#c7cedb"],
+    shapes: ["circle", "star", "hexagon"] as const,
+  },
+  sunspot: {
+    project: "sunspots",
+    colors: ["#ffd93d", "#ffb3d9", "#ffd93d", "#ffb3d9", "#ffd93d", "#ffb3d9", "#ffd93d", "#ffb3d9"],
+    shapes: ["circle", "oval", "star"] as const,
+  },
+  asteroid: {
+    project: "daily-minor-planet",
+    colors: ["#c7cedb", "#ffb3d9", "#c7cedb", "#ffb3d9", "#c7cedb", "#ffb3d9", "#c7cedb", "#ffb3d9"],
+    shapes: ["diamond", "triangle", "hexagon"] as const,
+  },
+  accretion_disc: {
+    project: "disk-detective",
+    colors: ["#b8e6b8", "#87ceeb", "#b8e6b8", "#87ceeb", "#b8e6b8", "#87ceeb", "#b8e6b8", "#87ceeb"],
+    shapes: ["oval", "circle", "hexagon"] as const,
+  },
+} as const
+
+export type AnomalyType = keyof typeof ANOMALY_TYPES
+
+export interface DatabaseAnomaly {
+  id: number
+  content: string | null
+  anomalytype: string | null
+  avatar_url: string | null
+  created_at: string
+  configuration: any
+  parentAnomaly: number | null
+  anomalySet: string | null
+}
+
+export function normalizeAnomalyType(type: string | null): AnomalyType {
+  switch (type) {
+    case "planet":
+    case "telescope-tess":
+    case "exoplanet":
+      return "exoplanet"
+    case "sunspot":
+      return "sunspot"
+    case "telescope-awa":
+    case "accretion_disc":
+    case "disk":
+      return "accretion_disc"
+    case "asteroid":
+    case "active-asteroids":
+    case "telescope-minorPlanet":
+    case "minor-planet":
+      return "asteroid"
+    default:
+      return "exoplanet"
+  }
+}
+
+export function generateAnomalyProperties(dbAnomaly: DatabaseAnomaly): Anomaly & { dbData: DatabaseAnomaly } {
+  const seed = dbAnomaly.id
+  const type = normalizeAnomalyType(dbAnomaly.anomalySet)
+  const config = ANOMALY_TYPES[type]
+
+  return {
+    id: `db-${dbAnomaly.id}`,
+    name: dbAnomaly.content || `${type.toUpperCase()}-${String(dbAnomaly.id).padStart(3, "0")}`,
+    type,
+    project: config.project,
+    x: seededRandom(seed, 1) * 80 + 10,
+    y: seededRandom(seed, 2) * 80 + 10,
+    brightness: seededRandom(seed, 3) * 0.7 + 0.5,
+    size: seededRandom(seed, 4) * 0.8 + 0.6,
+    pulseSpeed: seededRandom(seed, 5) * 2 + 1,
+    glowIntensity: seededRandom(seed, 6) * 0.5 + 0.3,
+    color: config.colors[Math.floor(seededRandom(seed, 7) * config.colors.length)],
+    shape: config.shapes[Math.floor(seededRandom(seed, 8) * config.shapes.length)],
+    sector: generateSectorName(Math.floor(seededRandom(seed, 9) * 10) - 5, Math.floor(seededRandom(seed, 10) * 10) - 5),
+    discoveryDate: new Date().toLocaleDateString(),
+    dbData: dbAnomaly,
+  };
+};
\ No newline at end of file
diff --git a/components/Structures/Telescope/discoveries-panel.tsx b/components/Structures/Telescope/discoveries-panel.tsx
new file mode 100644
index 000000000..906fab06f
--- /dev/null
+++ b/components/Structures/Telescope/discoveries-panel.tsx
@@ -0,0 +1,192 @@
+"use client"
+
+import type { Anomaly, DiscoveryPanelPosition, Mission, Project } from "@/types/Structures/telescope"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { projects } from "@/data/projects";
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { ChevronUp, ChevronDown, ChevronLeft, ChevronRight, Eye, Calendar, User } from "lucide-react"
+
+interface DiscoveriesPanelProps {
+  classifications: any[]
+  anomalies: Anomaly[]
+  onViewAnomaly: (anomaly: Anomaly) => void
+  showAllDiscoveries: boolean
+  onNavigate?: (direction: "up" | "down" | "left" | "right") => void
+};
+
+export function DiscoveriesPanel({
+  classifications = [],
+  anomalies = [],
+  onViewAnomaly,
+  showAllDiscoveries,
+  onNavigate,
+}: DiscoveriesPanelProps) {
+  const convertClassificationsToAnomalies = (classificationData: any[]): Anomaly[] => {
+    // Ensure classificationData is an array
+    if (!Array.isArray(classificationData)) {
+      return []
+    }
+
+    return classificationData.map((classification) => {
+      const dbAnomalyId = `db-${classification.anomaly}`
+      const anomaly = anomalies.find((a) => a.id === dbAnomalyId)
+
+      if (anomaly) {
+        return {
+          ...anomaly,
+          classified: true,
+          discoveryDate: new Date(classification.created_at).toLocaleDateString(),
+          classificationId: classification.id,
+          classificationContent: classification.content,
+          discoveredBy: showAllDiscoveries ? `User${classification.author?.slice(-4)}` : undefined,
+        }
+      }
+
+      const classificationTypeMap: Record<string, Anomaly["type"]> = {
+        planet: "exoplanet",
+        sunspot: "sunspot",
+        asteroid: "asteroid",
+        DiskDetective: "accretion_disc",
+      }
+
+      const projectMap: Record<Anomaly["type"], string> = {
+        exoplanet: "planet-hunters",
+        sunspot: "sunspots",
+        asteroid: "daily-minor-planet",
+        accretion_disc: "disk-detective",
+      }
+
+      const anomalyType = classificationTypeMap[classification.classificationtype] || "exoplanet"
+      const anomalyProject = projectMap[anomalyType] || "planet-hunters"
+
+      return {
+        id: `classification-${classification.id}`,
+        name: `ANOMALY-${classification.anomaly}`,
+        type: anomalyType,
+        project: anomalyProject,
+        x: 50,
+        y: 50,
+        brightness: 1,
+        size: 1,
+        color: "#4FC3F7",
+        sector: "Unknown Sector",
+        shape: "circle" as const,
+        pulseSpeed: 2,
+        glowIntensity: 0.5,
+        classified: true,
+        discoveryDate: new Date(classification.created_at).toLocaleDateString(),
+        classificationId: classification.id,
+        classificationContent: classification.content,
+        discoveredBy: showAllDiscoveries ? `User${classification.author?.slice(-4)}` : undefined,
+      } as Anomaly & { classificationId: number; classificationContent: string; discoveredBy?: string }
+    })
+  }
+
+  const classifiedAnomalies = convertClassificationsToAnomalies(classifications)
+
+  return (
+    <div className="absolute top-20 left-4 w-80 bg-gradient-to-br from-[#3B4252] to-[#2E3440] border-2 border-[#5E81AC] rounded-lg shadow-2xl z-30">
+      <div className="p-4 border-b border-[#4C566A]">
+        <h3 className="text-lg font-bold text-[#ECEFF4] mb-2">Recent Discoveries</h3>
+
+        {/* Navigation Controls */}
+        {onNavigate && (
+          <div className="flex items-center justify-center gap-2 mb-4">
+            <div className="grid grid-cols-3 gap-1">
+              <div></div>
+              <Button
+                size="sm"
+                onClick={() => onNavigate("up")}
+                className="bg-[#434C5E] hover:bg-[#4C566A] text-white p-2"
+              >
+                <ChevronUp className="h-4 w-4" />
+              </Button>
+              <div></div>
+              <Button
+                size="sm"
+                onClick={() => onNavigate("left")}
+                className="bg-[#434C5E] hover:bg-[#4C566A] text-white p-2"
+              >
+                <ChevronLeft className="h-4 w-4" />
+              </Button>
+              <div className="w-8 h-8 bg-[#5E81AC] rounded flex items-center justify-center">
+                <div className="w-2 h-2 bg-white rounded-full"></div>
+              </div>
+              <Button
+                size="sm"
+                onClick={() => onNavigate("right")}
+                className="bg-[#434C5E] hover:bg-[#4C566A] text-white p-2"
+              >
+                <ChevronRight className="h-4 w-4" />
+              </Button>
+              <div></div>
+              <Button
+                size="sm"
+                onClick={() => onNavigate("down")}
+                className="bg-[#434C5E] hover:bg-[#4C566A] text-white p-2"
+              >
+                <ChevronDown className="h-4 w-4" />
+              </Button>
+              <div></div>
+            </div>
+          </div>
+        )}
+
+        <Badge className="bg-[#A3BE8C] text-[#2E3440]">{classifiedAnomalies.length} Classified</Badge>
+      </div>
+
+      <div className="max-h-96 overflow-y-auto p-4 space-y-3">
+        {classifiedAnomalies.length === 0 ? (
+          <div className="text-center py-8">
+            <p className="text-[#D8DEE9] text-sm">No discoveries yet</p>
+            <p className="text-[#88C0D0] text-xs mt-1">Start exploring to find anomalies!</p>
+          </div>
+        ) : (
+          classifiedAnomalies.slice(0, 10).map((anomaly) => {
+            const project = projects.find((p) => p.id === anomaly.project)
+            return (
+              <Card
+                key={anomaly.id}
+                className="bg-[#3B4252] border-[#4C566A] hover:border-[#5E81AC] transition-colors cursor-pointer"
+                onClick={() => onViewAnomaly(anomaly)}
+              >
+                <CardHeader className="p-3">
+                  <div className="flex items-center gap-3">
+                    <div
+                      className="w-8 h-8 rounded-full flex items-center justify-center text-white"
+                      style={{ background: project?.bgGradient }}
+                    >
+                      <div className="w-3 h-3 bg-white rounded-full opacity-80"></div>
+                    </div>
+                    <div className="flex-1">
+                      <CardTitle className="text-xs text-[#ECEFF4]">{anomaly.name}</CardTitle>
+                      <CardDescription className="text-xs text-[#D8DEE9]">{anomaly.sector}</CardDescription>
+                    </div>
+                    <Button size="sm" className="bg-[#5E81AC] hover:bg-[#81A1C1] text-white p-1">
+                      <Eye className="h-3 w-3" />
+                    </Button>
+                  </div>
+                </CardHeader>
+                <CardContent className="p-3 pt-0">
+                  <div className="flex justify-between items-center text-xs">
+                    <div className="flex items-center gap-1 text-[#88C0D0]">
+                      <Calendar className="h-3 w-3" />
+                      <span>{anomaly.discoveryDate}</span>
+                    </div>
+                    {showAllDiscoveries && (anomaly as any).discoveredBy && (
+                      <div className="flex items-center gap-1 text-[#B48EAD]">
+                        <User className="h-3 w-3" />
+                        <span>{(anomaly as any).discoveredBy}</span>
+                      </div>
+                    )}
+                  </div>
+                </CardContent>
+              </Card>
+            )
+          })
+        )}
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/components/Structures/Telescope/discoveries-view.tsx b/components/Structures/Telescope/discoveries-view.tsx
new file mode 100644
index 000000000..9170d846e
--- /dev/null
+++ b/components/Structures/Telescope/discoveries-view.tsx
@@ -0,0 +1,347 @@
+"use client"
+
+import { Badge } from "@/components/ui/badge"
+import { Card, CardHeader, CardContent, CardTitle, CardDescription } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Eye, Calendar, User, Star, ArrowLeft, Users, Sparkles, Target, CheckCircle2 } from "lucide-react";
+import type { Anomaly, Project, Mission } from "@/types/Structures/telescope";
+import { useState } from "react";
+import { Tabs, TabsList, TabsContent, TabsTrigger } from "@/components/ui/tabs"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogTrigger,
+  DialogClose,
+} from "@/components/ui/dialog";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { projects } from "@/data/telescope/projects";
+
+interface DatabaseClassification {
+  id: number
+  created_at: string
+  content: string | null
+  author: string | null
+  anomaly: number | null
+  media: any
+  classificationtype: string | null
+  classificationConfiguration: any
+}
+
+interface DiscoveriesViewProps {
+  classifications: DatabaseClassification[]
+  allClassifications: DatabaseClassification[]
+  projectMissions: Mission[]
+  selectedProject: Project | null
+  onBack: () => void
+  onViewAnomaly: (anomaly: Anomaly) => void
+  onViewClassification: (classification: DatabaseClassification) => void
+  showAllDiscoveries: boolean
+  setShowAllDiscoveries: (show: boolean) => void
+  anomalies: Anomaly[]
+}
+
+export function DiscoveriesView({
+  classifications,
+  allClassifications,
+  projectMissions,
+  selectedProject,
+  onBack,
+  onViewAnomaly,
+  onViewClassification,
+  showAllDiscoveries,
+  setShowAllDiscoveries,
+  anomalies,
+}: DiscoveriesViewProps) {
+  const [activeTab, setActiveTab] = useState("discoveries")
+
+  const getAnomalyForClassification = (classification: DatabaseClassification): Anomaly | null => {
+    return anomalies.find((a) => a.id === `db-${classification.anomaly}`) || null
+  }
+
+  const getClassificationTypeColor = (type: string | null) => {
+    switch (type) {
+      case "planet":
+        return "bg-[#a8d8ea]"
+      case "sunspot":
+        return "bg-[#ffd93d]"
+      case "asteroid":
+        return "bg-[#c7cedb]"
+      case "disk":
+        return "bg-[#b8e6b8]"
+      default:
+        return "bg-[#87ceeb]"
+    }
+  }
+
+  const completedMissions = projectMissions.filter((m) => m.completed)
+  const availableMissions = projectMissions.filter((m) => !m.completed)
+
+  return (
+    <div className="h-full flex flex-col relative overflow-hidden bg-[#1a1a2e]">
+      {/* Header */}
+      <div className="p-4 lg:p-6 border-b border-[#a8d8ea]/20 bg-[#16213e]/80 backdrop-blur-sm">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <Button
+              variant="ghost"
+              onClick={onBack}
+              className="text-[#a8d8ea] hover:bg-[#a8d8ea]/20 border border-[#a8d8ea]/30"
+            >
+              <ArrowLeft className="h-4 w-4 mr-2" />
+              Back to Telescope
+            </Button>
+            <div>
+              <h1 className="text-xl lg:text-2xl font-bold text-[#e8f4f8] font-mono">DISCOVERY ARCHIVE</h1>
+              <p className="text-[#a8d8ea] text-sm font-mono">
+                {selectedProject ? `${selectedProject.name.toUpperCase()} PROJECT` : "ALL PROJECTS"}
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center gap-3">
+            <Badge className="bg-[#a8d8ea] text-[#1a1a2e] font-mono">{classifications.length} YOUR FINDS</Badge>
+            <Badge className="bg-[#87ceeb] text-[#1a1a2e] font-mono">{allClassifications.length} TOTAL</Badge>
+          </div>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-hidden">
+        <Tabs value={activeTab} onValueChange={setActiveTab} className="h-full flex flex-col">
+          <TabsList className="mx-4 lg:mx-6 mt-4 bg-[#16213e]/60 border border-[#a8d8ea]/20">
+            <TabsTrigger
+              value="discoveries"
+              className="data-[state=active]:bg-[#a8d8ea] data-[state=active]:text-[#1a1a2e] text-[#e8f4f8] font-mono"
+            >
+              <Sparkles className="h-4 w-4 mr-2" />
+              Your Discoveries
+            </TabsTrigger>
+            <TabsTrigger
+              value="global"
+              className="data-[state=active]:bg-[#a8d8ea] data-[state=active]:text-[#1a1a2e] text-[#e8f4f8] font-mono"
+            >
+              <Users className="h-4 w-4 mr-2" />
+              Global Archive
+            </TabsTrigger>
+            <TabsTrigger
+              value="missions"
+              className="data-[state=active]:bg-[#a8d8ea] data-[state=active]:text-[#1a1a2e] text-[#e8f4f8] font-mono"
+            >
+              <Target className="h-4 w-4 mr-2" />
+              Missions
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="discoveries" className="flex-1 overflow-y-auto p-4 lg:p-6 space-y-4">
+            {classifications.length === 0 ? (
+              <div className="text-center py-16">
+                <div className="w-24 h-24 border-2 border-dashed border-[#a8d8ea]/30 rounded-full flex items-center justify-center mx-auto mb-6">
+                  <Sparkles className="h-8 w-8 text-[#a8d8ea]/50" />
+                </div>
+                <h3 className="text-xl font-bold text-[#e8f4f8] mb-2 font-mono">NO DISCOVERIES YET</h3>
+                <p className="text-[#a8d8ea] font-mono">Start exploring the cosmos to make your first discovery!</p>
+              </div>
+            ) : (
+              <div className="grid gap-4 lg:grid-cols-2 xl:grid-cols-3">
+                {classifications.map((classification) => {
+                  const anomaly = getAnomalyForClassification(classification)
+                  return (
+                    <Card
+                      key={classification.id}
+                      className="bg-[#16213e]/60 border border-[#a8d8ea]/20 hover:border-[#a8d8ea]/40 transition-all cursor-pointer backdrop-blur-sm"
+                      onClick={() => onViewClassification(classification)}
+                    >
+                      <CardHeader className="pb-3">
+                        <div className="flex items-center justify-between">
+                          <CardTitle className="text-[#e8f4f8] text-lg font-mono">#{classification.id}</CardTitle>
+                          <Badge
+                            className={`${getClassificationTypeColor(
+                              classification.classificationtype,
+                            )} text-[#1a1a2e] font-mono`}
+                          >
+                            {classification.classificationtype?.toUpperCase() || "UNKNOWN"}
+                          </Badge>
+                        </div>
+                      </CardHeader>
+                      <CardContent>
+                        <div className="space-y-3">
+                          <div className="flex items-center gap-2 text-sm text-[#a8d8ea] font-mono">
+                            <Calendar className="h-4 w-4" />
+                            <span>{new Date(classification.created_at).toLocaleDateString()}</span>
+                          </div>
+                          {anomaly && (
+                            <div className="flex items-center gap-2">
+                              <div
+                                className="w-4 h-4 rounded-full"
+                                style={{
+                                  backgroundColor: anomaly.color,
+                                  boxShadow: `0 0 8px ${anomaly.color}66`,
+                                }}
+                              />
+                              <span className="text-[#e8f4f8] text-sm font-mono">{anomaly.name}</span>
+                            </div>
+                          )}
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={(e) => {
+                              e.stopPropagation()
+                              if (anomaly) onViewAnomaly(anomaly)
+                            }}
+                            className="w-full text-[#a8d8ea] hover:bg-[#a8d8ea]/20 border border-[#a8d8ea]/30 font-mono"
+                          >
+                            <Eye className="h-4 w-4 mr-2" />
+                            View in Telescope
+                          </Button>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  )
+                })}
+              </div>
+            )}
+          </TabsContent>
+
+          <TabsContent value="global" className="flex-1 overflow-y-auto p-4 lg:p-6 space-y-4">
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="text-lg font-bold text-[#e8f4f8] font-mono">GLOBAL DISCOVERIES</h3>
+              <Button
+                onClick={() => setShowAllDiscoveries(!showAllDiscoveries)}
+                className="bg-[#a8d8ea] text-[#1a1a2e] hover:bg-[#87ceeb] font-mono"
+              >
+                <Users className="h-4 w-4 mr-2" />
+                All Users
+              </Button>
+            </div>
+
+            <div className="grid gap-4 lg:grid-cols-2 xl:grid-cols-3">
+              {allClassifications.slice(0, showAllDiscoveries ? undefined : 12).map((classification) => {
+                const anomaly = getAnomalyForClassification(classification)
+                return (
+                  <Card
+                    key={classification.id}
+                    className="bg-[#16213e]/60 border border-[#a8d8ea]/20 hover:border-[#a8d8ea]/40 transition-all cursor-pointer backdrop-blur-sm"
+                    onClick={() => onViewClassification(classification)}
+                  >
+                    <CardHeader className="pb-3">
+                      <div className="flex items-center justify-between">
+                        <CardTitle className="text-[#e8f4f8] text-lg font-mono">#{classification.id}</CardTitle>
+                        <Badge
+                          className={`${getClassificationTypeColor(
+                            classification.classificationtype,
+                          )} text-[#1a1a2e] font-mono`}
+                        >
+                          {classification.classificationtype?.toUpperCase() || "UNKNOWN"}
+                        </Badge>
+                      </div>
+                    </CardHeader>
+                    <CardContent>
+                      <div className="space-y-3">
+                        <div className="flex items-center gap-2 text-sm text-[#a8d8ea] font-mono">
+                          <User className="h-4 w-4" />
+                          <span>User {classification.author?.slice(0, 8) || "Anonymous"}</span>
+                        </div>
+                        <div className="flex items-center gap-2 text-sm text-[#a8d8ea] font-mono">
+                          <Calendar className="h-4 w-4" />
+                          <span>{new Date(classification.created_at).toLocaleDateString()}</span>
+                        </div>
+                        {anomaly && (
+                          <div className="flex items-center gap-2">
+                            <div
+                              className="w-4 h-4 rounded-full"
+                              style={{
+                                backgroundColor: anomaly.color,
+                                boxShadow: `0 0 8px ${anomaly.color}66`,
+                              }}
+                            />
+                            <span className="text-[#e8f4f8] text-sm font-mono">{anomaly.name}</span>
+                          </div>
+                        )}
+                      </div>
+                    </CardContent>
+                  </Card>
+                )
+              })}
+            </div>
+          </TabsContent>
+
+          <TabsContent value="missions" className="flex-1 overflow-y-auto p-4 lg:p-6 space-y-6">
+            {/* Available Missions */}
+            <div>
+              <h3 className="text-lg font-bold text-[#e8f4f8] mb-4 font-mono flex items-center gap-2">
+                <Target className="h-5 w-5 text-[#a8d8ea]" />
+                ACTIVE MISSIONS
+              </h3>
+              <div className="grid gap-4 lg:grid-cols-2">
+                {availableMissions.map((mission) => (
+                  <Card
+                    key={mission.id}
+                    className="bg-[#16213e]/60 border border-[#a8d8ea]/20 hover:border-[#a8d8ea]/40 transition-all backdrop-blur-sm"
+                  >
+                    <CardHeader>
+                      <div className="flex items-center justify-between">
+                        <CardTitle className="text-[#e8f4f8] font-mono">{mission.name}</CardTitle>
+                        <Badge className="bg-[#ffd93d] text-[#1a1a2e] font-mono">ACTIVE</Badge>
+                      </div>
+                    </CardHeader>
+                    <CardContent>
+                      <p className="text-[#a8d8ea] text-sm mb-4 font-mono">{mission.description}</p>
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-2 text-sm text-[#e8f4f8] font-mono">
+                          <Star className="h-4 w-4 text-[#ffd93d]" />
+                          <span>{mission.reward} points</span>
+                        </div>
+                        <Badge className="bg-[#a8d8ea]/20 text-[#a8d8ea] font-mono">
+                          {mission.progress || 0}/{mission.target}
+                        </Badge>
+                      </div>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            </div>
+
+            {/* Completed Missions */}
+            {completedMissions.length > 0 && (
+              <div>
+                <h3 className="text-lg font-bold text-[#e8f4f8] mb-4 font-mono flex items-center gap-2">
+                  <CheckCircle2 className="h-5 w-5 text-[#b8e6b8]" />
+                  COMPLETED MISSIONS
+                </h3>
+                <div className="grid gap-4 lg:grid-cols-2">
+                  {completedMissions.map((mission) => (
+                    <Card
+                      key={mission.id}
+                      className="bg-[#16213e]/40 border border-[#b8e6b8]/20 backdrop-blur-sm opacity-75"
+                    >
+                      <CardHeader>
+                        <div className="flex items-center justify-between">
+                          <CardTitle className="text-[#e8f4f8] font-mono">{mission.name}</CardTitle>
+                          <Badge className="bg-[#b8e6b8] text-[#1a1a2e] font-mono">COMPLETE</Badge>
+                        </div>
+                      </CardHeader>
+                      <CardContent>
+                        <p className="text-[#a8d8ea] text-sm mb-4 font-mono">{mission.description}</p>
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center gap-2 text-sm text-[#e8f4f8] font-mono">
+                            <Star className="h-4 w-4 text-[#ffd93d]" />
+                            <span>{mission.reward} points earned</span>
+                          </div>
+                          <Badge className="bg-[#b8e6b8]/20 text-[#b8e6b8] font-mono">
+                            {mission.target}/{mission.target}
+                          </Badge>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  ))}
+                </div>
+              </div>
+            )}
+          </TabsContent>
+        </Tabs>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/components/Structures/Telescope/project-panel.tsx b/components/Structures/Telescope/project-panel.tsx
new file mode 100644
index 000000000..638202154
--- /dev/null
+++ b/components/Structures/Telescope/project-panel.tsx
@@ -0,0 +1,163 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { Progress } from "@/components/ui/progress"
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Star, X } from "lucide-react"
+import type { Project } from "@/types/Structures/telescope"
+
+interface Anomaly {
+  id: string
+  name: string
+  description?: string
+  project: string // should match Project.id
+  severity?: "low" | "medium" | "high"
+  timestamp?: string
+  // add any other fields relevant to your anomaly data
+}
+
+interface ProjectPanelProps {
+  projects: Project[]
+  selectedProject: Project | null
+  selectProject: (project: Project | null) => void
+  showProjectPanel: boolean
+  onClose: () => void
+  anomalies: Anomaly[];
+  onNavigate?: (direction: "up" | "down" | "left" | "right") => void;
+};
+
+export function ProjectPanel({
+  projects,
+  selectedProject,
+  selectProject,
+  showProjectPanel,
+  onClose,
+  onNavigate,
+  anomalies,
+}: ProjectPanelProps) {
+  if (!showProjectPanel) return null;
+
+  const handleNavigation = ( direction: "up" | "down" | "left" | "right" ) => {
+    if (onNavigate) {
+      onNavigate(direction);
+    };
+  };
+
+  return (
+    <div className="absolute top-20 right-4 z-50 w-80 bg-gradient-to-br from-[#3B4252] to-[#2E3440] border-2 border-[#5E81AC] rounded-lg shadow-2xl">
+      {/* Header */}
+      <div className="p-4 border-b border-[#4C566A] flex justify-between items-center">
+        <h3 className="font-bold text-[#ECEFF4]">Mission Control</h3>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onClose}
+          className="text-[#D8DEE9] hover:text-[#ECEFF4] hover:bg-[#434C5E]"
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+
+      {/* Navigation controls - sector */}
+      <div className="p-4 border-b border-[#4C566A]">
+        <div className="text-xs text-[#88C0D0] mb-2 font-medium">Sector Navigation</div>
+        <div className="grid grid-cols-3 gap-1">
+          <div></div>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => handleNavigation("up")}
+            className="bg-[#434C5E] border-[#5E81AC] text-[#ECEFF4] hover:bg-[#4C566A] p-2"
+          >
+            <ChevronUp className="h-4 w-4" />
+          </Button>
+          <div></div>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => handleNavigation("left")}
+            className="bg-[#434C5E] border-[#5E81AC] text-[#ECEFF4] hover:bg-[#4C566A] p-2"
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+          <div className="flex items-center justify-center">
+            <div className="w-2 h-2 bg-[#5E81AC] rounded-full"></div>
+          </div>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => handleNavigation("right")}
+            className="bg-[#434C5E] border-[#5E81AC] text-[#ECEFF4] hover:bg-[#4C566A] p-2"
+          >
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+          <div></div>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => handleNavigation("down")}
+            className="bg-[#434C5E] border-[#5E81AC] text-[#ECEFF4] hover:bg-[#4C566A] p-2"
+          >
+            <ChevronDown className="h-4 w-4" />
+          </Button>
+          <div></div>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="p-4 space-y-3">
+        <Button
+          variant={!selectedProject ? "default" : "outline"}
+          className={`w-full justify-start ${
+            !selectedProject
+              ? "bg-[#5E81AC] text-white hover:bg-[#81A1C1]"
+              : "bg-[#434C5E] border-[#5E81AC] text-[#ECEFF4] hover:bg-[#4C566A]"
+          }`}
+          onClick={() => selectProject(null)}
+        >
+          <Star className="h-4 w-4 mr-2" />
+          <span>All Projects</span>
+        </Button>
+
+        {projects.map((project) => {
+          const count = anomalies.filter((a) => a.project === project.id).length
+
+          return (
+            <div key={project.id} className="space-y-2">
+              <Button
+                variant={selectedProject?.id === project.id ? "default" : "outline"}
+                className={`w-full justify-start ${
+                  selectedProject?.id === project.id
+                    ? "bg-[#5E81AC] text-white hover:bg-[#81A1C1]"
+                    : "bg-[#434C5E] border-[#5E81AC] text-[#ECEFF4] hover:bg-[#4C566A]"
+                }`}
+                onClick={() => selectProject(project)}
+              >
+                <div className="flex items-center gap-2 w-full">
+                  <div
+                    className="w-6 h-6 rounded-full flex items-center justify-center"
+                    style={{ background: project.bgGradient }}
+                  >
+                    {project.icon}
+                  </div>
+                  <span className="flex-1 text-left">{project.name}</span>
+                  <span className="text-xs text-[#D8DEE9]">({count})</span> {/* ✅ Show anomaly count */}
+                </div>
+              </Button>
+
+              {/* Progress Bar */}
+              {/* <div className="ml-8 space-y-1">
+                <div className="flex justify-between text-xs text-[#D8DEE9]">
+                  <span>Progress</span>
+                  <span>
+                    {project.completed}/{project.total}
+                  </span>
+                </div>
+                <Progress value={(project.completed / project.total) * 100} className="h-2 bg-[#434C5E]" />
+              </div> */}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/components/Structures/Telescope/telescope-view.tsx b/components/Structures/Telescope/telescope-view.tsx
new file mode 100644
index 000000000..1971fda5d
--- /dev/null
+++ b/components/Structures/Telescope/telescope-view.tsx
@@ -0,0 +1,127 @@
+"use client"
+
+import type React from "react"
+import { useRef } from "react"
+import type { Anomaly, Star } from "@/types/Structures/telescope"
+import { AnomalyComponent } from "../Viewport/anomaly-component"
+import { Move } from "lucide-react"
+
+interface TelescopeViewProps {
+  stars?: Star[]
+  filteredAnomalies?: Anomaly[]
+  isDragging: boolean
+  handleMouseDown: (e: React.MouseEvent) => void
+  handleMouseMove: (e: React.MouseEvent) => void
+  handleMouseUp: () => void
+  handleAnomalyClick: (anomaly: Anomaly) => void
+  currentSectorName: string
+  focusedAnomaly?: Anomaly | null
+  anomalies?: Anomaly[]
+}
+
+export function TelescopeView({
+  stars = [],
+  filteredAnomalies = [],
+  isDragging,
+  handleMouseDown,
+  handleMouseMove,
+  handleMouseUp,
+  handleAnomalyClick,
+  currentSectorName,
+  focusedAnomaly = null,
+  anomalies = [],
+}: TelescopeViewProps) {
+  const viewportRef = useRef<HTMLDivElement>(null)
+
+  return (
+    <div className="h-full relative">
+      {/* Main Viewport - Clean space view like the reference image */}
+      <div
+        ref={viewportRef}
+        className="w-full h-full cursor-move relative overflow-hidden"
+        style={{
+          background: `
+            radial-gradient(ellipse at 30% 40%, #0a0a1a 0%, transparent 70%),
+            radial-gradient(ellipse at 70% 60%, #000510 0%, transparent 70%),
+            radial-gradient(ellipse at 20% 80%, #050510 0%, transparent 70%),
+            linear-gradient(135deg, #000000 0%, #0a0a1a 50%, #000510 100%)
+          `,
+        }}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseUp}
+      >
+        {/* Stars - smaller and more subtle */}
+        {stars.map((star, index) => (
+          <div
+            key={index}
+            className="absolute rounded-full pointer-events-none"
+            style={{
+              left: `${star.x}%`,
+              top: `${star.y}%`,
+              width: `${Math.max(star.size * 0.5, 1)}px`,
+              height: `${Math.max(star.size * 0.5, 1)}px`,
+              backgroundColor: star.color,
+              opacity: star.opacity * 0.8,
+              animation: `twinkle ${star.twinkleSpeed}s ease-in-out infinite alternate`,
+              boxShadow: `0 0 ${star.size}px ${star.color}`,
+            }}
+          />
+        ))}
+
+        {/* Subtle nebula effects */}
+        <div
+          className="absolute inset-0 pointer-events-none opacity-10"
+          style={{
+            background: `
+              radial-gradient(ellipse 300px 150px at 20% 30%, #a8d8ea22 0%, transparent 70%),
+              radial-gradient(ellipse 200px 100px at 80% 70%, #ffb3d922 0%, transparent 70%),
+              radial-gradient(ellipse 150px 200px at 60% 20%, #b8e6b822 0%, transparent 70%)
+            `,
+          }}
+        />
+
+        {/* Simple crosshair in center */}
+        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none">
+          <div className="w-8 h-8 border border-[#a8d8ea]/40 rounded-full relative">
+            <div className="absolute top-1/2 left-0 w-full h-px bg-[#a8d8ea]/30 transform -translate-y-1/2" />
+            <div className="absolute left-1/2 top-0 w-px h-full bg-[#a8d8ea]/30 transform -translate-x-1/2" />
+            <div className="absolute top-1/2 left-1/2 w-1 h-1 bg-[#a8d8ea]/60 rounded-full transform -translate-x-1/2 -translate-y-1/2" />
+          </div>
+        </div>
+
+        {/* Anomalies */}
+        {filteredAnomalies.map((anomaly) => (
+          <AnomalyComponent
+            key={anomaly.id}
+            anomaly={anomaly}
+            onClick={handleAnomalyClick}
+            isHighlighted={focusedAnomaly?.id === anomaly.id}
+          />
+        ))}
+
+        {/* Dragging Indicator */}
+        {isDragging && (
+          <div className="absolute top-4 left-1/2 transform -translate-x-1/2 bg-[#16213e]/90 text-[#a8d8ea] px-4 py-2 rounded-full text-sm flex items-center gap-2 pointer-events-none border border-[#a8d8ea]/30 backdrop-blur-sm">
+            <Move className="h-4 w-4" />
+            <span className="font-mono">NAVIGATING...</span>
+          </div>
+        )}
+      </div>
+
+      <style jsx>{`
+        @keyframes twinkle {
+          0% {
+            opacity: 0.4;
+            transform: scale(1);
+          }
+          100% {
+            opacity: 1;
+            transform: scale(1.1);
+          }
+        }
+      `}</style>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/components/Structures/Telescope/telescope-viewport.tsx b/components/Structures/Telescope/telescope-viewport.tsx
new file mode 100644
index 000000000..12b6411c9
--- /dev/null
+++ b/components/Structures/Telescope/telescope-viewport.tsx
@@ -0,0 +1,893 @@
+"use client"
+
+import type React from "react"
+
+import { useState, useEffect, useCallback } from "react"
+import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react"
+import type { Anomaly, ViewMode } from "@/types/Structures/telescope"
+import { projects } from "@/data/projects"
+import { missions } from "@/data/missions"
+import { generateSectorName, generateStars, filterAnomaliesBySector, seededRandom } from "@/utils/Structures/Telescope/sector-utils"
+import { TelescopeView } from "./telescope-view"
+import { DiscoveriesView } from "./discoveries-view"
+import AnomalyDialog from "./anomaly-dialogue"
+import { AnomalyDetailDialog } from "../Viewport/anomaly-detail-dialogue"
+import { ClassificationDetailDialog } from "../Viewport/classification-detail-dialog"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import {
+  Search,
+  Eye,
+  ChevronUp,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  Star,
+  Archive,
+  Radio,
+  Crosshair,
+  Power,
+  Calendar,
+  Building,
+  Filter,
+} from "lucide-react"
+import TelescopeNavControls from "./blocks/navigation-controls"
+
+interface DatabaseAnomaly {
+  id: number
+  content: string | null
+  anomalytype: string | null
+  avatar_url: string | null
+  created_at: string
+  configuration: any
+  parentAnomaly: number | null
+  anomalySet: string | null
+}
+
+interface DatabaseClassification {
+  id: number
+  created_at: string
+  content: string | null
+  author: string | null
+  anomaly: number | null
+  media: any
+  classificationtype: string | null
+  classificationConfiguration: any
+}
+
+// Pastel color palette
+const PASTEL_COLORS = {
+  primary: "#a8d8ea", // soft blue
+  secondary: "#ffb3d9", // soft pink
+  accent: "#c7cedb", // soft purple
+  success: "#b8e6b8", // soft green
+  warning: "#ffd93d", // soft yellow
+  info: "#87ceeb", // soft sky blue
+  background: "#1a1a2e", // dark navy
+  surface: "#16213e", // darker blue
+  text: "#e8f4f8", // very light blue
+  textSecondary: "#b8c5d1", // muted blue-gray
+}
+
+// Anomaly type mapping configuration with pastel colors
+const ANOMALY_TYPES = {
+  exoplanet: {
+    project: "planet-hunters",
+    colors: ["#a8d8ea", "#87ceeb", "#b8e6b8", "#c7cedb", "#a8d8ea", "#87ceeb", "#b8e6b8", "#c7cedb"],
+    shapes: ["circle", "star", "hexagon"] as const,
+  },
+  sunspot: {
+    project: "sunspots",
+    colors: ["#ffd93d", "#ffb3d9", "#ffd93d", "#ffb3d9", "#ffd93d", "#ffb3d9", "#ffd93d", "#ffb3d9"],
+    shapes: ["circle", "oval", "star"] as const,
+  },
+  asteroid: {
+    project: "daily-minor-planet",
+    colors: ["#c7cedb", "#ffb3d9", "#c7cedb", "#ffb3d9", "#c7cedb", "#ffb3d9", "#c7cedb", "#ffb3d9"],
+    shapes: ["diamond", "triangle", "hexagon"] as const,
+  },
+  accretion_disc: {
+    project: "disk-detective",
+    colors: ["#b8e6b8", "#87ceeb", "#b8e6b8", "#87ceeb", "#b8e6b8", "#87ceeb", "#b8e6b8", "#87ceeb"],
+    shapes: ["oval", "circle", "hexagon"] as const,
+  },
+} as const
+
+type AnomalyType = keyof typeof ANOMALY_TYPES
+
+function normalizeAnomalyType(type: string | null): AnomalyType {
+  switch (type) {
+    case "planet":
+    case "telescope-tess":
+    case "exoplanet":
+      return "exoplanet"
+    case "sunspot":
+      return "sunspot"
+    case "telescope-awa":
+    case "accretion_disc":
+    case "disk":
+      return "accretion_disc"
+    case "asteroid":
+    case "active-asteroids":
+    case "telescope-minorPlanet":
+    case "minor-planet":
+      return "asteroid"
+    default:
+      return "exoplanet"
+  }
+}
+
+function generateAnomalyProperties(dbAnomaly: DatabaseAnomaly): Anomaly & { dbData: DatabaseAnomaly } {
+  const seed = dbAnomaly.id
+  const type = normalizeAnomalyType(dbAnomaly.anomalySet)
+  const config = ANOMALY_TYPES[type]
+
+  return {
+    id: `db-${dbAnomaly.id}`,
+    name: dbAnomaly.content || `${type.toUpperCase()}-${String(dbAnomaly.id).padStart(3, "0")}`,
+    type,
+    project: config.project,
+    x: seededRandom(seed, 1) * 80 + 10,
+    y: seededRandom(seed, 2) * 80 + 10,
+    brightness: seededRandom(seed, 3) * 0.7 + 0.5,
+    size: seededRandom(seed, 4) * 0.8 + 0.6,
+    pulseSpeed: seededRandom(seed, 5) * 2 + 1,
+    glowIntensity: seededRandom(seed, 6) * 0.5 + 0.3,
+    color: config.colors[Math.floor(seededRandom(seed, 7) * config.colors.length)],
+    shape: config.shapes[Math.floor(seededRandom(seed, 8) * config.shapes.length)],
+    sector: generateSectorName(Math.floor(seededRandom(seed, 9) * 10) - 5, Math.floor(seededRandom(seed, 10) * 10) - 5),
+    discoveryDate: new Date().toLocaleDateString(),
+    dbData: dbAnomaly,
+  }
+}
+
+export default function TelescopeViewport() {
+  const session = useSession()
+  const supabase = useSupabaseClient()
+
+  // State management
+  const [currentSector, setCurrentSector] = useState({ x: 0, y: 0 })
+  const [anomalies, setAnomalies] = useState<Anomaly[]>([])
+  const [filteredAnomalies, setFilteredAnomalies] = useState<Anomaly[]>([])
+  const [classifications, setClassifications] = useState<DatabaseClassification[]>([])
+  const [allClassifications, setAllClassifications] = useState<DatabaseClassification[]>([])
+  const [selectedProject, setSelectedProject] = useState<(typeof projects)[0] | null>(null)
+  const [selectedAnomaly, setSelectedAnomaly] = useState<Anomaly | null>(null)
+  const [selectedClassification, setSelectedClassification] = useState<DatabaseClassification | null>(null)
+  const [showClassifyDialog, setShowClassifyDialog] = useState(false)
+  const [showDetailDialog, setShowDetailDialog] = useState(false)
+  const [showClassificationDetailDialog, setShowClassificationDetailDialog] = useState(false)
+  const [stars, setStars] = useState<
+    Array<{
+      x: number
+      y: number
+      size: number
+      opacity: number
+      color: string
+      twinkleSpeed: number
+    }>
+  >([])
+  const [viewMode, setViewMode] = useState<ViewMode>("viewport")
+  const [isDragging, setIsDragging] = useState(false)
+  const [dragStart, setDragStart] = useState({ x: 0, y: 0 })
+  const [focusedAnomaly, setFocusedAnomaly] = useState<Anomaly | null>(null)
+  const [showAllDiscoveries, setShowAllDiscoveries] = useState(false)
+  const [loading, setLoading] = useState(true)
+  const [leftSidebarOpen, setLeftSidebarOpen] = useState(false)
+  const [rightSidebarOpen, setRightSidebarOpen] = useState(false)
+  const [mobileBottomTab, setMobileBottomTab] = useState<"controls" | "projects" | "stats" | "archive">("controls")
+
+  // Database operations
+  const fetchAnomalies = async () => {
+    try {
+      const { data, error } = await supabase.from("anomalies").select("*")
+
+      if (!error && data) {
+        const processedAnomalies = data.map(generateAnomalyProperties)
+        setAnomalies(processedAnomalies)
+      }
+    } catch (error) {
+      console.error("Error fetching anomalies:", error)
+    }
+  }
+
+  const fetchUserClassifications = async () => {
+    if (!session?.user?.id) return
+
+    try {
+      const { data, error } = await supabase
+        .from("classifications")
+        .select(`
+        id, created_at, content, author, anomaly, media, 
+        classificationtype, classificationConfiguration
+      `)
+        .eq("author", session.user.id)
+        .order("created_at", { ascending: false })
+
+      if (!error && data) {
+        setClassifications(data)
+      }
+    } catch (error) {
+      console.error("Error fetching user classifications:", error)
+    }
+  }
+
+  const fetchAllClassifications = async () => {
+    try {
+      const { data, error } = await supabase
+        .from("classifications")
+        .select(`
+        id, created_at, content, author, anomaly, media, 
+        classificationtype, classificationConfiguration
+      `)
+        .limit(50)
+        .order("created_at", { ascending: false })
+
+      if (!error && data) {
+        setAllClassifications(data)
+      }
+    } catch (error) {
+      console.error("Error fetching all classifications:", error)
+    }
+  }
+
+  const createClassification = async (anomalyId: string, classificationType: string) => {
+    if (!session?.user?.id) return null
+
+    try {
+      const dbId = Number.parseInt(anomalyId.replace("db-", ""))
+      const { data, error } = await supabase
+        .from("classifications")
+        .insert({
+          author: session.user.id,
+          anomaly: dbId,
+          classificationtype: classificationType,
+          content: `Classified as ${classificationType}`,
+        })
+        .select()
+        .single()
+
+      if (!error && data) {
+        await Promise.all([fetchUserClassifications(), fetchAllClassifications()])
+        return data
+      }
+    } catch (error) {
+      console.error("Error creating classification:", error)
+    }
+    return null
+  }
+
+  // Sector management
+  const loadSector = useCallback(
+    (sectorX: number, sectorY: number) => {
+      const sectorStars = generateStars(sectorX, sectorY)
+      setStars(sectorStars)
+
+      const sectorAnomalies = filterAnomaliesBySector(anomalies, sectorX, sectorY)
+      let filtered = selectedProject ? sectorAnomalies.filter((a) => a.project === selectedProject.id) : sectorAnomalies
+
+      // Limit to 15 anomalies per sector view for better visibility
+      filtered = filtered.slice(0, 15)
+
+      setFilteredAnomalies(filtered)
+    },
+    [anomalies, selectedProject],
+  )
+
+  // Data loading
+  const loadData = async () => {
+    setLoading(true)
+    await fetchAnomalies()
+    if (session?.user?.id) {
+      await fetchUserClassifications()
+    }
+    await fetchAllClassifications()
+    setLoading(false)
+  }
+
+  // Event handlers
+  const handleMouseDown = (e: React.MouseEvent) => {
+    setIsDragging(true)
+    setDragStart({ x: e.clientX, y: e.clientY })
+  }
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    if (!isDragging) return
+
+    const deltaX = e.clientX - dragStart.x
+    const deltaY = e.clientY - dragStart.y
+
+    if (Math.abs(deltaX) > 50 || Math.abs(deltaY) > 50) {
+      setCurrentSector({
+        x: currentSector.x - Math.sign(deltaX),
+        y: currentSector.y - Math.sign(deltaY),
+      })
+      setDragStart({ x: e.clientX, y: e.clientY })
+    }
+  }
+
+  const handleMouseUp = () => setIsDragging(false)
+
+  const handleAnomalyClick = (anomaly: Anomaly) => {
+    if (isDragging) return
+
+    setSelectedAnomaly(anomaly)
+    if (anomaly.classified) {
+      setShowDetailDialog(true)
+    } else {
+      setShowClassifyDialog(true)
+    }
+  }
+
+  const handleViewAnomaly = (anomaly: Anomaly) => {
+    setViewMode("viewport")
+    setFocusedAnomaly(anomaly)
+    setSelectedAnomaly(anomaly)
+    setTimeout(() => setShowDetailDialog(true), 500)
+  }
+
+  const handleViewClassification = (classification: DatabaseClassification) => {
+    setSelectedClassification(classification)
+    setShowClassificationDetailDialog(true)
+  }
+
+//   const handleClassify = async () => {
+//     if (!selectedAnomaly || !session?.user?.id) return
+
+//     // Map UI types to database classification types
+//     const typeMapping = {
+//       exoplanet: "planet",
+//       sunspot: "sunspot",
+//       asteroid: "asteroid",
+//       accretion_disc: "disk",
+//     }
+
+//     const classificationType = typeMapping[selectedAnomaly.type] || "planet"
+//     const result = await createClassification(selectedAnomaly.id, classificationType)
+
+//     if (result) {
+//       setAnomalies(
+//         anomalies.map((a) =>
+//           a.id === selectedAnomaly.id ? { ...a, classified: true, discoveryDate: new Date().toLocaleDateString() } : a,
+//         ),
+//       )
+//       loadSector(currentSector.x, currentSector.y)
+//     }
+
+//     setShowClassifyDialog(false)
+//     setSelectedAnomaly(null)
+//   }
+
+  const selectProject = (project: (typeof projects)[0] | null) => {
+    setSelectedProject(project)
+  }
+
+  const handleNavigate = (direction: "up" | "down" | "left" | "right") => {
+    const newSector = { ...currentSector }
+    switch (direction) {
+      case "up":
+        newSector.y -= 1
+        break
+      case "down":
+        newSector.y += 1
+        break
+      case "left":
+        newSector.x -= 1
+        break
+      case "right":
+        newSector.x += 1
+        break
+    }
+    setCurrentSector(newSector)
+  }
+
+  // Effects
+  useEffect(() => {
+    loadData()
+  }, [session])
+
+  useEffect(() => {
+    if (!loading) {
+      loadSector(currentSector.x, currentSector.y)
+    }
+  }, [currentSector, loadSector, loading])
+
+  useEffect(() => {
+    if (!loading && anomalies.length > 0) {
+      const alreadyClassifiedIds = new Set(classifications.map((c) => `db-${c.anomaly}`))
+      const unclassified = anomalies.filter((a) => !alreadyClassifiedIds.has(a.id))
+      const pool = unclassified.length > 0 ? unclassified : anomalies
+      const randomAnomaly = pool[Math.floor(Math.random() * pool.length)]
+
+      if (randomAnomaly) {
+        setSelectedAnomaly(randomAnomaly)
+        if (randomAnomaly.classified) {
+          setShowDetailDialog(true)
+        } else {
+          setShowClassifyDialog(true)
+        }
+      }
+    }
+  }, [loading, anomalies, classifications])
+
+  // Computed values
+  const currentSectorName = generateSectorName(currentSector.x, currentSector.y)
+  const projectMissions = missions.filter((m) => !selectedProject || m.project === selectedProject.id)
+  const availableMissions = projectMissions.filter((m) => !m.completed)
+
+  // Get sector-specific counts for projects
+  const getSectorAnomaliesForProject = (projectId: string | null) => {
+    const sectorAnomalies = filterAnomaliesBySector(anomalies, currentSector.x, currentSector.y)
+    return projectId ? sectorAnomalies.filter((a) => a.project === projectId) : sectorAnomalies
+  }
+
+  if (loading) {
+    return (
+      <div className="h-screen bg-[#1a1a2e] flex items-center justify-center">
+        <div className="text-center">
+          <div className="w-16 h-16 border-4 border-[#a8d8ea] border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
+          <div className="text-[#e8f4f8] text-xl font-mono">INITIALIZING TELESCOPE ARRAY...</div>
+          <div className="text-[#a8d8ea] text-sm mt-2">Loading deep space data</div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="h-screen bg-[#1a1a2e] flex flex-col lg:flex-row overflow-hidden">
+      {/* Desktop Left Sidebar - Controls */}
+      <div className="hidden lg:flex w-80 h-full bg-[#16213e]/95 border-r border-[#a8d8ea]/20 flex-col backdrop-blur-sm">
+        {/* Header */}
+        <div className="p-4 border-b border-[#a8d8ea]/20 bg-gradient-to-r from-[#1a1a2e] to-[#16213e]">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 bg-gradient-to-br from-[#a8d8ea] to-[#87ceeb] rounded-full flex items-center justify-center shadow-lg">
+              <Search className="h-5 w-5 text-[#1a1a2e]" />
+            </div>
+            <div>
+              <h1 className="text-[#e8f4f8] font-bold text-lg tracking-wider">Telescope</h1>
+              <p className="text-[#a8d8ea] text-xs font-mono">OBSERVATORY</p>
+            </div>
+          </div>
+        </div>
+
+        {/* System Status */}
+        <div className="p-4 border-b border-[#a8d8ea]/20">
+          <div className="grid grid-cols-2 gap-3 mb-3">
+            <div className="flex items-center gap-2">
+              <div className="w-2 h-2 bg-[#b8e6b8] rounded-full animate-pulse"></div>
+              <span className="text-[#b8e6b8] text-xs font-mono">ONLINE</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <Power className="h-3 w-3 text-[#e8f4f8]" />
+              <span className="text-[#e8f4f8] text-xs font-mono">PWR: 98%</span>
+            </div>
+          </div>
+          {/* <div className="text-[#e8f4f8] text-sm font-mono mb-1">Sector: {currentSectorName}</div> */}
+          <div className="text-[#a8d8ea] text-sm font-mono mb-2">Targets: {filteredAnomalies.length}/15</div>
+          <Badge className="bg-[#b8e6b8] text-[#1a1a2e] text-xs px-2 py-1 font-mono">
+            {classifications.length} CLASSIFIED
+          </Badge>
+        </div>
+
+        {/* Navigation Controls */}
+        <TelescopeNavControls
+            sector={currentSector}
+            setSector={setCurrentSector}
+            sectorName={currentSectorName}
+            targetsCount={filteredAnomalies.length}
+            maxTargets={15}
+        />
+
+        {/* Project Selection */}
+        <Card className="m-4 bg-[#1a1a2e]/60 border border-[#a8d8ea]/20 backdrop-blur-sm">
+          <CardHeader className="pb-3">
+            <CardTitle className="text-[#e8f4f8] text-sm font-mono flex items-center gap-2">
+              <Filter className="h-4 w-4 text-[#a8d8ea]" />
+              PROJECTS
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2 max-h-48 overflow-y-auto">
+            <Button
+              variant={!selectedProject ? "default" : "ghost"}
+              className={`w-full justify-start text-xs font-mono ${
+                !selectedProject
+                  ? "bg-[#a8d8ea] text-[#1a1a2e] hover:bg-[#87ceeb]"
+                  : "text-[#e8f4f8] hover:bg-[#a8d8ea]/20 border border-[#a8d8ea]/30"
+              }`}
+              onClick={() => selectProject(null)}
+            >
+              <Star className="h-3 w-3 mr-2 flex-shrink-0" />
+              <span className="truncate">ALL PROJECTS</span>
+              <span className="ml-auto text-xs flex-shrink-0">({getSectorAnomaliesForProject(null).length})</span>
+            </Button>
+
+            {projects.map((project) => {
+              const sectorCount = getSectorAnomaliesForProject(project.id).length
+
+              return (
+                <Button
+                  key={project.id}
+                  variant={selectedProject?.id === project.id ? "default" : "ghost"}
+                  className={`w-full justify-start text-xs font-mono ${
+                    selectedProject?.id === project.id
+                      ? "bg-[#a8d8ea] text-[#1a1a2e] hover:bg-[#87ceeb]"
+                      : "text-[#e8f4f8] hover:bg-[#a8d8ea]/20 border border-[#a8d8ea]/30"
+                  }`}
+                  onClick={() => selectProject(project)}
+                >
+                  <div className="flex items-center gap-2 w-full min-w-0">
+                    <div
+                      className="w-4 h-4 rounded-full flex items-center justify-center shadow-sm flex-shrink-0"
+                      style={{ background: project.bgGradient }}
+                    >
+                      {project.icon}
+                    </div>
+                    <span className="flex-1 text-left truncate">{project.name.toUpperCase()}</span>
+                    <span className="text-xs flex-shrink-0">({sectorCount})</span>
+                  </div>
+                </Button>
+              )
+            })}
+          </CardContent>
+        </Card>
+
+        {/* Quick Actions */}
+        <div className="p-4 space-y-2">
+          <Button
+            onClick={() => setViewMode(viewMode === "viewport" ? "discoveries" : "viewport")}
+            className="w-full bg-[#a8d8ea] text-[#1a1a2e] hover:bg-[#87ceeb] font-mono"
+          >
+            {viewMode === "viewport" ? (
+              <>
+                <Archive className="h-4 w-4 mr-2" />
+                ARCHIVE
+              </>
+            ) : (
+              <>
+                <Eye className="h-4 w-4 mr-2" />
+                TELESCOPE
+              </>
+            )}
+          </Button>
+        </div>
+      </div>
+
+      {/* Main Viewport */}
+      <div className="flex-1 relative overflow-hidden">
+        {/* Simple Header for Mobile */}
+        <div className="lg:hidden absolute top-0 left-0 right-0 z-20 p-4 bg-gradient-to-b from-[#1a1a2e]/90 to-transparent">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <div className="w-8 h-8 bg-gradient-to-br from-[#a8d8ea] to-[#87ceeb] rounded-full flex items-center justify-center">
+                <Search className="h-4 w-4 text-[#1a1a2e]" />
+              </div>
+              <div>
+                <div className="text-[#e8f4f8] font-bold text-sm">{currentSectorName}</div>
+                <div className="text-[#a8d8ea] text-xs">{filteredAnomalies.length} targets</div>
+              </div>
+            </div>
+            <Button
+              onClick={() => setViewMode(viewMode === "viewport" ? "discoveries" : "viewport")}
+              className="bg-[#a8d8ea]/20 text-[#a8d8ea] hover:bg-[#a8d8ea]/30 border border-[#a8d8ea]/30"
+              size="sm"
+            >
+              {viewMode === "viewport" ? <Archive className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+            </Button>
+          </div>
+        </div>
+
+        {viewMode === "viewport" ? (
+          <TelescopeView
+            stars={stars}
+            filteredAnomalies={filteredAnomalies}
+            isDragging={isDragging}
+            handleMouseDown={handleMouseDown}
+            handleMouseMove={handleMouseMove}
+            handleMouseUp={handleMouseUp}
+            handleAnomalyClick={handleAnomalyClick}
+            currentSectorName={currentSectorName}
+            focusedAnomaly={focusedAnomaly}
+            anomalies={anomalies}
+          />
+        ) : (
+          <DiscoveriesView
+            classifications={classifications || []}
+            allClassifications={allClassifications || []}
+            projectMissions={projectMissions}
+            selectedProject={selectedProject}
+            onBack={() => setViewMode("viewport")}
+            onViewAnomaly={handleViewAnomaly}
+            onViewClassification={handleViewClassification}
+            showAllDiscoveries={showAllDiscoveries}
+            setShowAllDiscoveries={setShowAllDiscoveries}
+            anomalies={anomalies}
+          />
+        )}
+      </div>
+
+      {/* Desktop Right Sidebar - Stats */}
+      <div className="hidden lg:flex w-80 h-full bg-[#16213e]/95 border-l border-[#a8d8ea]/20 flex-col backdrop-blur-sm">
+        {/* Header */}
+        <div className="p-4 border-b border-[#a8d8ea]/20 bg-gradient-to-r from-[#16213e] to-[#1a1a2e]">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 bg-gradient-to-br from-[#87ceeb] to-[#a8d8ea] rounded-full flex items-center justify-center shadow-lg">
+              <Building className="h-5 w-5 text-[#1a1a2e]" />
+            </div>
+            <div>
+              <h1 className="text-[#e8f4f8] font-bold text-lg tracking-wider">STATISTICS</h1>
+              <p className="text-[#a8d8ea] text-xs font-mono">DISCOVERY DATA</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Discovery Stats */}
+        <div className="p-4 border-b border-[#a8d8ea]/20">
+          <div className="grid grid-cols-2 gap-3 mb-3">
+            <div className="text-center">
+              <div className="text-2xl font-bold text-[#e8f4f8] font-mono">{classifications.length}</div>
+              <div className="text-xs text-[#a8d8ea] font-mono">YOUR FINDS</div>
+            </div>
+            <div className="text-center">
+              <div className="text-2xl font-bold text-[#a8d8ea] font-mono">{allClassifications.length}</div>
+              <div className="text-xs text-[#a8d8ea] font-mono">TOTAL FINDS</div>
+            </div>
+          </div>
+        </div>
+
+        {/* Recent Classifications */}
+        <div className="flex-1 overflow-y-auto p-4 space-y-3">
+          <div className="flex items-center gap-2 mb-3">
+            <Radio className="h-4 w-4 text-[#a8d8ea]" />
+            <span className="text-[#e8f4f8] text-sm font-mono">RECENT ACTIVITY</span>
+          </div>
+
+         <div className="max-h-[600px] overflow-y-auto space-y-2 pr-2">
+  {classifications.slice(0, 20).map((classification) => (
+    <Card
+      key={classification.id}
+      className="bg-[#1a1a2e]/60 border border-[#a8d8ea]/20 hover:border-[#a8d8ea]/40 transition-all cursor-pointer backdrop-blur-sm"
+      onClick={() => handleViewClassification(classification)}
+    >
+      <CardContent className="p-3">
+        <div className="flex items-center justify-between mb-2">
+          <div className="text-[#e8f4f8] text-sm font-mono">#{classification.id}</div>
+          <Badge className="bg-[#a8d8ea] text-[#1a1a2e] text-xs font-mono">
+            {classification.classificationtype?.toUpperCase() || "UNKNOWN"}
+          </Badge>
+        </div>
+        <div className="flex items-center gap-2 text-xs text-[#a8d8ea] font-mono">
+          <Calendar className="h-3 w-3" />
+          <span>{new Date(classification.created_at).toLocaleDateString()}</span>
+        </div>
+      </CardContent>
+    </Card>
+  ))}
+</div>
+
+          {classifications.length === 0 && (
+            <div className="text-center py-8">
+              <div className="w-16 h-16 border-2 border-dashed border-[#a8d8ea]/30 rounded-full flex items-center justify-center mx-auto mb-4">
+                <Search className="h-6 w-6 text-[#a8d8ea]/50" />
+              </div>
+              <p className="text-[#e8f4f8] text-sm font-mono mb-1">NO CLASSIFICATIONS YET</p>
+              <p className="text-[#a8d8ea] text-xs font-mono">Start exploring!</p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Mobile Bottom Navigation */}
+      <div className="lg:hidden fixed bottom-0 left-0 right-0 z-30 bg-[#16213e]/95 border-t border-[#a8d8ea]/20 backdrop-blur-sm">
+        {/* Tab Bar */}
+        <div className="flex">
+          <Button
+            variant="ghost"
+            onClick={() => setMobileBottomTab("controls")}
+            className={`flex-1 py-3 rounded-none ${
+              mobileBottomTab === "controls"
+                ? "bg-[#a8d8ea]/20 text-[#a8d8ea] border-t-2 border-[#a8d8ea]"
+                : "text-[#b8c5d1] hover:bg-[#a8d8ea]/10"
+            }`}
+          >
+            <Crosshair className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            onClick={() => setMobileBottomTab("projects")}
+            className={`flex-1 py-3 rounded-none ${
+              mobileBottomTab === "projects"
+                ? "bg-[#a8d8ea]/20 text-[#a8d8ea] border-t-2 border-[#a8d8ea]"
+                : "text-[#b8c5d1] hover:bg-[#a8d8ea]/10"
+            }`}
+          >
+            <Filter className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            onClick={() => setMobileBottomTab("stats")}
+            className={`flex-1 py-3 rounded-none ${
+              mobileBottomTab === "stats"
+                ? "bg-[#a8d8ea]/20 text-[#a8d8ea] border-t-2 border-[#a8d8ea]"
+                : "text-[#b8c5d1] hover:bg-[#a8d8ea]/10"
+            }`}
+          >
+            <Building className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            onClick={() => setMobileBottomTab("archive")}
+            className={`flex-1 py-3 rounded-none ${
+              mobileBottomTab === "archive"
+                ? "bg-[#a8d8ea]/20 text-[#a8d8ea] border-t-2 border-[#a8d8ea]"
+                : "text-[#b8c5d1] hover:bg-[#a8d8ea]/10"
+            }`}
+          >
+            <Archive className="h-4 w-4" />
+          </Button>
+        </div>
+
+        {/* Tab Content */}
+        <div className="max-h-48 overflow-y-auto">
+          {mobileBottomTab === "controls" && (
+            <div className="p-4">
+              <div className="grid grid-cols-3 gap-2 w-fit mx-auto mb-4">
+                <div></div>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleNavigate("up")}
+                  className="h-10 w-10 p-0 text-[#a8d8ea] hover:bg-[#a8d8ea]/20 border border-[#a8d8ea]/30"
+                >
+                  <ChevronUp className="h-4 w-4" />
+                </Button>
+                <div></div>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleNavigate("left")}
+                  className="h-10 w-10 p-0 text-[#a8d8ea] hover:bg-[#a8d8ea]/20 border border-[#a8d8ea]/30"
+                >
+                  <ChevronLeft className="h-4 w-4" />
+                </Button>
+                <div className="flex items-center justify-center">
+                  <div className="w-4 h-4 bg-gradient-to-br from-[#a8d8ea] to-[#87ceeb] rounded-full"></div>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleNavigate("right")}
+                  className="h-10 w-10 p-0 text-[#a8d8ea] hover:bg-[#a8d8ea]/20 border border-[#a8d8ea]/30"
+                >
+                  <ChevronRight className="h-4 w-4" />
+                </Button>
+                <div></div>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleNavigate("down")}
+                  className="h-10 w-10 p-0 text-[#a8d8ea] hover:bg-[#a8d8ea]/20 border border-[#a8d8ea]/30"
+                >
+                  <ChevronDown className="h-4 w-4" />
+                </Button>
+                <div></div>
+              </div>
+              <div className="text-center">
+                <div className="text-[#e8f4f8] text-sm font-mono mb-1">{currentSectorName}</div>
+                <div className="text-[#a8d8ea] text-xs font-mono">Targets: {filteredAnomalies.length}/15</div>
+              </div>
+            </div>
+          )}
+
+          {mobileBottomTab === "projects" && (
+            <div className="p-4 space-y-2">
+              <Button
+                variant={!selectedProject ? "default" : "ghost"}
+                className={`w-full justify-start text-xs font-mono ${
+                  !selectedProject
+                    ? "bg-[#a8d8ea] text-[#1a1a2e]"
+                    : "text-[#e8f4f8] hover:bg-[#a8d8ea]/20 border border-[#a8d8ea]/30"
+                }`}
+                onClick={() => selectProject(null)}
+              >
+                <Star className="h-3 w-3 mr-2" />
+                ALL PROJECTS ({getSectorAnomaliesForProject(null).length})
+              </Button>
+
+              {projects.map((project) => {
+                const sectorCount = getSectorAnomaliesForProject(project.id).length
+                return (
+                  <Button
+                    key={project.id}
+                    variant={selectedProject?.id === project.id ? "default" : "ghost"}
+                    className={`w-full justify-start text-xs font-mono ${
+                      selectedProject?.id === project.id
+                        ? "bg-[#a8d8ea] text-[#1a1a2e]"
+                        : "text-[#e8f4f8] hover:bg-[#a8d8ea]/20 border border-[#a8d8ea]/30"
+                    }`}
+                    onClick={() => selectProject(project)}
+                  >
+                    <div className="flex items-center gap-2 w-full">
+                      <div className="w-3 h-3 rounded-full" style={{ background: project.bgGradient }} />
+                      <span className="flex-1 text-left truncate">{project.name}</span>
+                      <span className="text-xs">({sectorCount})</span>
+                    </div>
+                  </Button>
+                )
+              })}
+            </div>
+          )}
+
+          {mobileBottomTab === "stats" && (
+            <div className="p-4">
+              <div className="grid grid-cols-2 gap-4 mb-4">
+                <div className="text-center">
+                  <div className="text-xl font-bold text-[#e8f4f8] font-mono">{classifications.length}</div>
+                  <div className="text-xs text-[#a8d8ea] font-mono">YOUR FINDS</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-xl font-bold text-[#a8d8ea] font-mono">{allClassifications.length}</div>
+                  <div className="text-xs text-[#a8d8ea] font-mono">TOTAL FINDS</div>
+                </div>
+              </div>
+              <div className="space-y-2">
+                {classifications.slice(0, 3).map((classification) => (
+                  <div
+                    key={classification.id}
+                    className="bg-[#1a1a2e]/60 border border-[#a8d8ea]/20 rounded p-2 cursor-pointer"
+                    onClick={() => handleViewClassification(classification)}
+                  >
+                    <div className="flex items-center justify-between">
+                      <span className="text-[#e8f4f8] text-xs font-mono">#{classification.id}</span>
+                      <span className="text-[#a8d8ea] text-xs font-mono">
+                        {classification.classificationtype?.toUpperCase() || "UNKNOWN"}
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {mobileBottomTab === "archive" && (
+            <div className="p-4">
+              <Button
+                onClick={() => setViewMode("discoveries")}
+                className="w-full bg-[#a8d8ea] text-[#1a1a2e] hover:bg-[#87ceeb] font-mono"
+              >
+                <Archive className="h-4 w-4 mr-2" />
+                VIEW ARCHIVE
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Dialogs */}
+      <AnomalyDialog
+        showClassifyDialog={showClassifyDialog}
+        setShowClassifyDialog={setShowClassifyDialog}
+        selectedAnomaly={selectedAnomaly}
+        // handleClassify={handleClassify}
+      />
+
+      <AnomalyDetailDialog
+        showDetailDialog={showDetailDialog}
+        setShowDetailDialog={setShowDetailDialog}
+        selectedAnomaly={selectedAnomaly}
+        onClassify={() => {
+          setShowDetailDialog(false)
+          setShowClassifyDialog(true)
+        }}
+        config="telescope"
+      />
+
+      <ClassificationDetailDialog
+        showDetailDialog={showClassificationDetailDialog}
+        setShowDetailDialog={setShowClassificationDetailDialog}
+        selectedClassification={selectedClassification}
+        config="telescope"
+      />
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/components/Structures/Telescope/viewport-header.tsx b/components/Structures/Telescope/viewport-header.tsx
new file mode 100644
index 000000000..b25dcf498
--- /dev/null
+++ b/components/Structures/Telescope/viewport-header.tsx
@@ -0,0 +1,146 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Switch } from "@/components/ui/switch"
+import { Grid3X3, Trophy, Target, Users, User, ChevronUp, ChevronLeft, ChevronRight, ChevronDown } from "lucide-react"
+import type { Project, ViewMode } from "@/types/Structures/telescope"
+
+interface ViewportHeaderProps {
+  selectedProject: Project | null
+  viewMode: ViewMode
+  toggleProjectPanel: () => void
+  setViewMode: (mode: ViewMode) => void
+  classifiedCount: number
+  availableMissionsCount: number
+  showAllDiscoveries: boolean
+  setShowAllDiscoveries: (show: boolean) => void;
+  onNavigate: (direction: "up" | "down" | "left" | "right") => void;
+};
+
+export function ViewportHeader({
+  selectedProject,
+  viewMode,
+  toggleProjectPanel,
+  setViewMode,
+  classifiedCount,
+  onNavigate,
+  availableMissionsCount,
+  showAllDiscoveries,
+  setShowAllDiscoveries,
+}: ViewportHeaderProps) {
+  return (
+    <header className="bg-gradient-to-r from-[#2E3440] to-[#3B4252] border-b-2 border-[#5E81AC] p-4 shadow-lg">
+      <div className="flex justify-between items-center">
+        {/* Left Side - Title */}
+        <div className="flex items-center gap-4">
+          <div>
+            <h1 className="text-xl font-bold text-[#ECEFF4]">Telescope</h1>
+          </div>
+        </div>
+
+        {/* Right Side - Controls & Stats */}
+        <div className="flex items-center gap-4">
+          {/* Discovery Toggle */}
+          <div className="flex items-center gap-2 bg-[#434C5E] rounded-lg px-3 py-2 border border-[#4C566A]">
+            <User className="h-4 w-4 text-[#D8DEE9]" />
+            <Switch
+              checked={showAllDiscoveries}
+              onCheckedChange={setShowAllDiscoveries}
+              className="data-[state=checked]:bg-[#5E81AC]"
+            />
+            <Users className="h-4 w-4 text-[#D8DEE9]" />
+            <span className="text-sm text-[#ECEFF4] ml-2">{showAllDiscoveries ? "All Users" : "My Discoveries"}</span>
+          </div>
+
+          {/* Stats Badges */}
+          <div className="flex items-center gap-2">
+            <Badge className="bg-[#5E81AC] text-white px-3 py-1">
+              <Trophy className="h-3 w-3 mr-1" />
+              {classifiedCount}
+            </Badge>
+            <Badge className="bg-[#EBCB8B] text-[#2E3440] px-3 py-1">
+              <Target className="h-3 w-3 mr-1" />
+              {availableMissionsCount}
+            </Badge>
+          </div>
+
+          {/* Project Filter */}
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={toggleProjectPanel}
+            className="bg-[#434C5E] border-[#5E81AC] text-[#ECEFF4] hover:bg-[#4C566A]"
+          >
+            {selectedProject ? (
+              <div className="flex items-center gap-2">
+                {selectedProject.icon}
+                <span>{selectedProject.name}</span>
+              </div>
+            ) : (
+              "All Projects"
+            )}
+          </Button>
+
+          {/* View Toggle */}
+          <Button
+            variant={viewMode === "discoveries" ? "default" : "outline"}
+            size="sm"
+            onClick={() => setViewMode(viewMode === "viewport" ? "discoveries" : "viewport")}
+            className={
+              viewMode === "discoveries"
+                ? "bg-[#5E81AC] text-white hover:bg-[#81A1C1]"
+                : "bg-[#434C5E] border-[#5E81AC] text-[#ECEFF4] hover:bg-[#4C566A]"
+            }
+          >
+            <Grid3X3 className="h-4 w-4 mr-2" />
+            <span>{viewMode === "viewport" ? "Archive" : "Telescope"}</span>
+          </Button>
+          <div className="md:hidden bg-[#3B4252] rounded-lg p-2 flex items-center gap-1">
+            <div className="grid grid-cols-3 gap-1">
+              <div></div>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => onNavigate("up")}
+                className="bg-[#5E81AC] border-[#81A1C1] text-white hover:bg-[#81A1C1] p-1 h-6 w-6"
+              >
+                <ChevronUp className="h-3 w-3" />
+              </Button>
+              <div></div>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => onNavigate("left")}
+                className="bg-[#5E81AC] border-[#81A1C1] text-white hover:bg-[#81A1C1] p-1 h-6 w-6"
+              >
+                <ChevronLeft className="h-3 w-3" />
+              </Button>
+              <div className="flex items-center justify-center">
+                <div className="w-1 h-1 bg-[#81A1C1] rounded-full"></div>
+              </div>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => onNavigate("right")}
+                className="bg-[#5E81AC] border-[#81A1C1] text-white hover:bg-[#81A1C1] p-1 h-6 w-6"
+              >
+                <ChevronRight className="h-3 w-3" />
+              </Button>
+              <div></div>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => onNavigate("down")}
+                className="bg-[#5E81AC] border-[#81A1C1] text-white hover:bg-[#81A1C1] p-1 h-6 w-6"
+              >
+                <ChevronDown className="h-3 w-3" />
+              </Button>
+              <div></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  )
+};
\ No newline at end of file
diff --git a/components/Structures/Viewport/anomaly-component.tsx b/components/Structures/Viewport/anomaly-component.tsx
new file mode 100644
index 000000000..9abc665d3
--- /dev/null
+++ b/components/Structures/Viewport/anomaly-component.tsx
@@ -0,0 +1,141 @@
+"use client"
+
+import type { Anomaly } from "@/types/Structures/telescope"
+
+interface AnomalyComponentProps {
+  anomaly: Anomaly;
+  onClick: (anomaly: Anomaly) => void;
+  isHighlighted?: boolean;
+};
+
+export function AnomalyComponent({ anomaly, onClick, isHighlighted = false }: AnomalyComponentProps) {
+  const baseClasses = "absolute cursor-pointer transition-all duration-300 hover:scale-110";
+  const size = anomaly.size || 1;
+  const baseSize = anomaly.type === "accretion_disc" ? 16 : anomaly.type === "sunspot" ? 12 : 8;
+
+  const getShapeStyles = () => {
+    const commonStyles = {
+      left: `${anomaly.x}%`,
+      top: `${anomaly.y}%`,
+      width: `${baseSize * size}px`,
+      height: `${baseSize * size}px`,
+      background: `radial-gradient(circle, ${anomaly.color}CC 0%, ${anomaly.color}88 60%, ${anomaly.color}44 100%)`,
+      boxShadow: isHighlighted
+        ? `
+          0 0 ${30 * size}px ${15 * size}px ${anomaly.color}66, 
+          0 0 ${50 * size}px ${25 * size}px ${anomaly.color}33,
+          0 0 ${70 * size}px ${35 * size}px rgba(168,216,234,0.2)
+        `
+        : `
+          0 0 ${20 * size * anomaly.glowIntensity}px ${10 * size * anomaly.glowIntensity}px ${anomaly.color}44,
+          0 0 ${30 * size * anomaly.glowIntensity}px ${15 * size * anomaly.glowIntensity}px ${anomaly.color}22
+        `,
+      filter: `brightness(${1 + anomaly.brightness * 0.5}) saturate(1.2)`,
+      animation: isHighlighted
+        ? `pulse 0.8s ease-in-out infinite alternate`
+        : `pulse ${anomaly.pulseSpeed}s ease-in-out infinite alternate`,
+      zIndex: isHighlighted ? 50 : 10,
+      transform: "translate(-50%, -50%)",
+    }
+
+    switch (anomaly.shape) {
+      case "circle":
+        return {
+          ...commonStyles,
+          borderRadius: "50%",
+          border: `1px solid ${anomaly.color}88`,
+        }
+      case "star":
+        return {
+          ...commonStyles,
+          clipPath: "polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)",
+          border: `1px solid ${anomaly.color}88`,
+        }
+      case "diamond":
+        return {
+          ...commonStyles,
+          clipPath: "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)",
+          border: `1px solid ${anomaly.color}88`,
+        }
+      case "hexagon":
+        return {
+          ...commonStyles,
+          clipPath: "polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%)",
+          border: `1px solid ${anomaly.color}88`,
+        }
+      case "triangle":
+        return {
+          ...commonStyles,
+          clipPath: "polygon(50% 0%, 0% 100%, 100% 100%)",
+          border: `1px solid ${anomaly.color}88`,
+        }
+      case "oval":
+        return {
+          ...commonStyles,
+          borderRadius: "50%",
+          width: `${baseSize * size * 1.4}px`,
+          height: `${baseSize * size * 0.7}px`,
+          border: `1px solid ${anomaly.color}88`,
+          transform: `translate(-50%, -50%) rotate(${Math.random() * 360}deg)`,
+        }
+      default:
+        return {
+          ...commonStyles,
+          borderRadius: "50%",
+          border: `1px solid ${anomaly.color}88`,
+        }
+    }
+  }
+
+  return (
+    <>
+      <div
+        className={`${baseClasses} ${anomaly.classified ? "ring-2 ring-[#a8d8ea]/40" : ""} ${isHighlighted ? "ring-2 ring-[#e8f4f8]/60" : ""}`}
+        style={getShapeStyles()}
+        onClick={() => onClick(anomaly)}
+      >
+        {/* Inner glow */}
+        <div
+          className="absolute inset-1 rounded-full opacity-60"
+          style={{
+            background: `radial-gradient(circle, ${anomaly.color}AA 0%, ${anomaly.color}44 50%, transparent 80%)`,
+            animation: `innerGlow ${anomaly.pulseSpeed * 0.8}s ease-in-out infinite alternate`,
+          }}
+        />
+
+        {/* Classification indicator */}
+        {anomaly.classified && (
+          <div className="absolute -top-1 -right-1 w-3 h-3 bg-[#b8e6b8] rounded-full border border-[#1a1a2e] shadow-lg">
+            <div className="absolute inset-0.5 bg-[#1a1a2e] rounded-full flex items-center justify-center">
+              <div className="w-1 h-1 bg-[#b8e6b8] rounded-full"></div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <style jsx>{`
+        @keyframes pulse {
+          0% {
+            opacity: 0.8;
+            transform: translate(-50%, -50%) scale(1);
+          }
+          100% {
+            opacity: 1;
+            transform: translate(-50%, -50%) scale(1.05);
+          }
+        }
+
+        @keyframes innerGlow {
+          0% {
+            opacity: 0.4;
+            transform: scale(0.9);
+          }
+          100% {
+            opacity: 0.8;
+            transform: scale(1.1);
+          }
+        }
+      `}</style>
+    </>
+  );
+};
\ No newline at end of file
diff --git a/components/Structures/Viewport/anomaly-detail-dialogue.tsx b/components/Structures/Viewport/anomaly-detail-dialogue.tsx
new file mode 100644
index 000000000..870ca0408
--- /dev/null
+++ b/components/Structures/Viewport/anomaly-detail-dialogue.tsx
@@ -0,0 +1,215 @@
+'use client'
+
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import { Star, Zap, Target, Disc, Calendar, MapPin, Eye, Palette } from "lucide-react"
+import type { Anomaly } from "@/types/Structures/telescope";
+
+interface AnomalyDetailDialogProps {
+  showDetailDialog: boolean
+  setShowDetailDialog: (show: boolean) => void
+  selectedAnomaly: Anomaly | null
+  onClassify?: () => void
+  config: "telescope" | "weather" | "rover"
+}
+
+export function AnomalyDetailDialog({
+  showDetailDialog,
+  setShowDetailDialog,
+  selectedAnomaly,
+  onClassify,
+  config,
+}: AnomalyDetailDialogProps) {
+  if (!selectedAnomaly) return null
+
+  const getTypeIcon = (type: string) => {
+    switch (type) {
+      case "exoplanet":
+        return <Star className="h-5 w-5" />
+      case "sunspot":
+        return <Zap className="h-5 w-5" />
+      case "asteroid":
+        return <Target className="h-5 w-5" />
+      case "accretion_disc":
+        return <Disc className="h-5 w-5" />
+      default:
+        return <Star className="h-5 w-5" />
+    }
+  }
+
+  const getTypeColor = (type: string) => {
+    const colors = {
+      telescope: {
+        exoplanet: "bg-blue-500",
+        sunspot: "bg-orange-500",
+        asteroid: "bg-purple-500",
+        accretion_disc: "bg-green-500",
+      },
+      weather: {
+        exoplanet: "bg-red-500",
+        sunspot: "bg-yellow-500",
+        asteroid: "bg-pink-500",
+        accretion_disc: "bg-cyan-500",
+      },
+      rover: {
+        exoplanet: "bg-yellow-500",
+        sunspot: "bg-amber-500",
+        asteroid: "bg-orange-500",
+        accretion_disc: "bg-lime-500",
+      },
+    }
+    return colors[config][type as keyof (typeof colors)[typeof config]] || "bg-gray-500"
+  }
+
+  const getConfigColors = () => {
+    switch (config) {
+      case "telescope":
+        return {
+          bg: "bg-[#2E3440]",
+          border: "border-[#4C566A]",
+          text: "text-[#ECEFF4]",
+          accent: "text-[#88C0D0]",
+          button: "bg-[#5E81AC] hover:bg-[#81A1C1]",
+        }
+      case "weather":
+        return {
+          bg: "bg-[#3B2F2F]",
+          border: "border-[#5D4E4E]",
+          text: "text-[#F4ECEC]",
+          accent: "text-[#C08888]",
+          button: "bg-[#AC5E5E] hover:bg-[#C18181]",
+        }
+      case "rover":
+        return {
+          bg: "bg-[#3B3B2F]",
+          border: "border-[#5D5D4E]",
+          text: "text-[#F4F4EC]",
+          accent: "text-[#C0C088]",
+          button: "bg-[#ACAC5E] hover:bg-[#C1C181]",
+        }
+    }
+  }
+
+  const colors = getConfigColors()
+
+  return (
+    <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
+      <DialogContent className={`${colors.bg} ${colors.border} ${colors.text} max-w-lg`}>
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            {getTypeIcon(selectedAnomaly.type)}
+            Anomaly Details
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-6">
+          {/* Visual Representation */}
+          <div className="text-center">
+            <div
+              className="w-20 h-20 mx-auto mb-4 rounded-full relative"
+              style={{
+                backgroundColor: selectedAnomaly.color,
+                boxShadow: `0 0 30px ${selectedAnomaly.color}`,
+                opacity: selectedAnomaly.brightness,
+              }}
+            >
+              {selectedAnomaly.classified && (
+                <div className="absolute -top-1 -right-1 w-6 h-6 bg-green-400 rounded-full border-2 border-white flex items-center justify-center">
+                  <span className="text-xs">✓</span>
+                </div>
+              )}
+            </div>
+            <h3 className="text-xl font-bold">{selectedAnomaly.name}</h3>
+            <Badge className={`${getTypeColor(selectedAnomaly.type)} text-white mt-2`}>
+              {selectedAnomaly.type.replace("_", " ").toUpperCase()}
+            </Badge>
+          </div>
+
+          {/* Properties Grid */}
+          <div className="grid grid-cols-2 gap-4 text-sm">
+            <div className="space-y-3">
+              <div className="flex items-center gap-2">
+                <MapPin className="h-4 w-4 text-gray-400" />
+                <div>
+                  <div className={colors.accent}>Sector</div>
+                  <div>{selectedAnomaly.sector}</div>
+                </div>
+              </div>
+              <div className="flex items-center gap-2">
+                <Eye className="h-4 w-4 text-gray-400" />
+                <div>
+                  <div className={colors.accent}>Brightness</div>
+                  <div>{(selectedAnomaly.brightness * 100).toFixed(0)}%</div>
+                </div>
+              </div>
+            </div>
+            <div className="space-y-3">
+              <div className="flex items-center gap-2">
+                <Target className="h-4 w-4 text-gray-400" />
+                <div>
+                  <div className={colors.accent}>Size</div>
+                  <div>{(selectedAnomaly.size * 100).toFixed(0)}%</div>
+                </div>
+              </div>
+              <div className="flex items-center gap-2">
+                <Palette className="h-4 w-4 text-gray-400" />
+                <div>
+                  <div className={colors.accent}>Shape</div>
+                  <div className="capitalize">{selectedAnomaly.shape}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Discovery Info */}
+          <div
+            className={`${colors.bg === "bg-[#2E3440]" ? "bg-[#434C5E]" : colors.bg === "bg-[#3B2F2F]" ? "bg-[#4E3B3B]" : "bg-[#4E4E3B]"} p-4 rounded-lg`}
+          >
+            <div className="flex items-center gap-2 mb-2">
+              <Calendar className="h-4 w-4 text-gray-400" />
+              <span className={`${colors.accent} text-sm`}>Discovery Date</span>
+            </div>
+            <div className="text-sm">{selectedAnomaly.discoveryDate}</div>
+            {selectedAnomaly.classified && (
+              <div className="mt-2 text-sm text-green-400">✓ This anomaly has been classified</div>
+            )}
+          </div>
+
+          {/* Technical Details */}
+          <div className="space-y-2 text-xs">
+            <div className="flex justify-between">
+              <span className={colors.accent}>Pulse Speed:</span>
+              <span>{selectedAnomaly.pulseSpeed.toFixed(1)}s</span>
+            </div>
+            <div className="flex justify-between">
+              <span className={colors.accent}>Glow Intensity:</span>
+              <span>{(selectedAnomaly.glowIntensity * 100).toFixed(0)}%</span>
+            </div>
+            <div className="flex justify-between">
+              <span className={colors.accent}>Color Code:</span>
+              <span>{selectedAnomaly.color}</span>
+            </div>
+          </div>
+
+          {/* Actions */}
+          <div className="flex gap-2">
+            <Button
+              onClick={() => setShowDetailDialog(false)}
+              variant="outline"
+              className={`flex-1 ${colors.border} ${colors.text} hover:bg-opacity-10`}
+            >
+              Close
+            </Button>
+            {!selectedAnomaly.classified && onClassify && (
+              <Button onClick={onClassify} className={`flex-1 ${colors.button} text-white`}>
+                Classify
+              </Button>
+            )}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
\ No newline at end of file
diff --git a/components/Structures/Viewport/classification-detail-dialog.tsx b/components/Structures/Viewport/classification-detail-dialog.tsx
new file mode 100644
index 000000000..057336d87
--- /dev/null
+++ b/components/Structures/Viewport/classification-detail-dialog.tsx
@@ -0,0 +1,268 @@
+"use client"
+
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  Calendar,
+  User,
+  FileText,
+  ImageIcon,
+  Star,
+  Zap,
+  Target,
+  Disc,
+} from "lucide-react";
+import Link from "next/link";
+
+interface DatabaseClassification {
+  id: number;
+  created_at: string;
+  content: string | null;
+  author: string | null;
+  anomaly: number | null;
+  media: any;
+  classificationtype: string | null;
+  classificationConfiguration: any;
+}
+
+interface ClassificationDetailDialogProps {
+  showDetailDialog: boolean;
+  setShowDetailDialog: (show: boolean) => void;
+  selectedClassification: DatabaseClassification | null;
+  config: "telescope" | "weather" | "rover";
+}
+
+export function ClassificationDetailDialog({
+  showDetailDialog,
+  setShowDetailDialog,
+  selectedClassification,
+  config,
+}: ClassificationDetailDialogProps) {
+  if (!selectedClassification) return null;
+
+  const getTypeIcon = (type: string | null) => {
+    switch (type) {
+      case "planet":
+        return <Star className="h-5 w-5" />;
+      case "sunspot":
+        return <Zap className="h-5 w-5" />;
+      case "asteroid":
+        return <Target className="h-5 w-5" />;
+      case "disk":
+        return <Disc className="h-5 w-5" />;
+      default:
+        return <Star className="h-5 w-5" />;
+    }
+  };
+
+  const getTypeColor = (type: string | null) => {
+    const colors = {
+      telescope: {
+        planet: "bg-blue-500",
+        sunspot: "bg-orange-500",
+        asteroid: "bg-purple-500",
+        disk: "bg-green-500",
+      },
+      weather: {
+        planet: "bg-red-500",
+        sunspot: "bg-yellow-500",
+        asteroid: "bg-pink-500",
+        disk: "bg-cyan-500",
+      },
+      rover: {
+        planet: "bg-yellow-500",
+        sunspot: "bg-amber-500",
+        asteroid: "bg-orange-500",
+        disk: "bg-lime-500",
+      },
+    };
+    return colors[config][type as keyof (typeof colors)[typeof config]] || "bg-gray-500";
+  };
+
+  const getConfigColors = () => {
+    switch (config) {
+      case "telescope":
+        return {
+          bg: "bg-[#2E3440]",
+          border: "border-[#4C566A]",
+          text: "text-[#ECEFF4]",
+          accent: "text-[#88C0D0]",
+          card: "bg-[#434C5E]",
+        };
+      case "weather":
+        return {
+          bg: "bg-[#3B2F2F]",
+          border: "border-[#5D4E4E]",
+          text: "text-[#F4ECEC]",
+          accent: "text-[#C08888]",
+          card: "bg-[#4E3B3B]",
+        };
+      case "rover":
+        return {
+          bg: "bg-[#3B3B2F]",
+          border: "border-[#5D5D4E]",
+          text: "text-[#F4F4EC]",
+          accent: "text-[#C0C088]",
+          card: "bg-[#4E4E3B]",
+        };
+    }
+  };
+
+  const colors = getConfigColors();
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  };
+
+  const parseMedia = (media: any) => {
+    if (!media) return [];
+    try {
+      if (typeof media === "string") {
+        return JSON.parse(media);
+      }
+      return Array.isArray(media) ? media : [];
+    } catch {
+      return [];
+    }
+  };
+
+  const mediaArray = parseMedia(selectedClassification.media);
+  const firstImage = mediaArray.find((item: any) => item?.type === "image");
+
+  const isPlanet = selectedClassification.classificationtype === "planet";
+  const classificationId = selectedClassification.id;
+
+  return (
+    <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
+      <DialogContent className={`${colors.bg} ${colors.border} ${colors.text} max-w-2xl max-h-[80vh] overflow-y-auto`}>
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            {getTypeIcon(selectedClassification.classificationtype)}
+            Classification Details
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-6">
+          {/* Header Info */}
+          <div className="flex items-center justify-between">
+            <div>
+              <h3 className="text-lg font-semibold">Classification #{classificationId}</h3>
+              <div className="flex items-center gap-4 mt-1 text-sm">
+                <div className="flex items-center gap-1">
+                  <Calendar className="h-4 w-4 text-gray-400" />
+                  <span className={colors.accent}>{formatDate(selectedClassification.created_at)}</span>
+                </div>
+                {selectedClassification.author && (
+                  <div className="flex items-center gap-1">
+                    <User className="h-4 w-4 text-gray-400" />
+                    <span className={colors.accent}>User {selectedClassification.author.slice(0, 8)}...</span>
+                  </div>
+                )}
+              </div>
+            </div>
+            {selectedClassification.classificationtype && (
+              <Badge className={`${getTypeColor(selectedClassification.classificationtype)} text-white`}>
+                {selectedClassification.classificationtype.toUpperCase()}
+              </Badge>
+            )}
+          </div>
+
+          {/* Media Display */}
+          {firstImage && (
+            <div className={`${colors.card} p-4 rounded-lg`}>
+              <div className="flex items-center gap-2 mb-3">
+                <ImageIcon className="h-4 w-4 text-gray-400" />
+                <span className={`${colors.accent} text-sm font-medium`}>Associated Media</span>
+              </div>
+              <div className="relative">
+                <img
+                  src={firstImage.url || "/placeholder.svg?height=200&width=300"}
+                  alt="Classification media"
+                  className="w-full max-w-md mx-auto rounded-lg"
+                  onError={(e) => {
+                    const target = e.target as HTMLImageElement;
+                    target.src = "/placeholder.svg?height=200&width=300";
+                  }}
+                />
+              </div>
+              {mediaArray.length > 1 && (
+                <div className="mt-2 text-xs text-gray-400">+{mediaArray.length - 1} more media items</div>
+              )}
+            </div>
+          )}
+
+          {/* Content */}
+          {selectedClassification.content && (
+            <div className={`${colors.card} p-4 rounded-lg`}>
+              <div className="flex items-center gap-2 mb-3">
+                <FileText className="h-4 w-4 text-gray-400" />
+                <span className={`${colors.accent} text-sm font-medium`}>Classification Notes</span>
+              </div>
+              <p className="text-sm leading-relaxed">{selectedClassification.content}</p>
+            </div>
+          )}
+
+          {/* Technical Details */}
+          <div className={`${colors.card} p-4 rounded-lg`}>
+            <h4 className={`${colors.accent} text-sm font-medium mb-3`}>Technical Information</h4>
+            <div className="grid grid-cols-2 gap-4 text-sm">
+              <div>
+                <span className="text-gray-400">Anomaly ID:</span>
+                <div>{selectedClassification.anomaly || "Unknown"}</div>
+              </div>
+              <div>
+                <span className="text-gray-400">Classification Type:</span>
+                <div className="capitalize">{selectedClassification.classificationtype || "Unknown"}</div>
+              </div>
+            </div>
+            {selectedClassification.classificationConfiguration && (
+              <div className="mt-3">
+                <span className="text-gray-400 text-xs">Configuration:</span>
+                <pre className="text-xs mt-1 p-2 bg-black/20 rounded overflow-x-auto">
+                  {JSON.stringify(selectedClassification.classificationConfiguration, null, 2)}
+                </pre>
+              </div>
+            )}
+          </div>
+
+          {/* Actions */}
+          <div className="flex flex-wrap justify-end gap-2">
+            <Link href={`/posts/${classificationId}`}>
+              <Button className="bg-blue-600 hover:bg-blue-700 text-white">
+                View
+              </Button>
+            </Link>
+            {isPlanet && (
+              <>
+                <Link href={`/${classificationId}/survey`}>
+                  <Button className="bg-emerald-600 hover:bg-emerald-700 text-white">
+                    Analyse behaviour
+                  </Button>
+                </Link>
+                <Link href={`/planets/paint/${classificationId}`}>
+                  <Button className="bg-purple-600 hover:bg-purple-700 text-white">
+                    Customise
+                  </Button>
+                </Link>
+              </>
+            )}
+            <Button
+              onClick={() => setShowDetailDialog(false)}
+              variant="outline"
+              className={`${colors.border} ${colors.text} hover:bg-opacity-10`}
+            >
+              Close
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
\ No newline at end of file
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index 7ab8826d1..9d2559f22 100644
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -43,7 +43,7 @@ const DialogContent = React.forwardRef<
     >
       {children}
       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
+        <X className="h-6 w-6" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
diff --git a/components/ui/scroll-area.tsx b/components/ui/scroll-area.tsx
index cf253cf17..0b4a48d87 100644
--- a/components/ui/scroll-area.tsx
+++ b/components/ui/scroll-area.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 
diff --git a/components/ui/styles/sci-fi/panel.tsx b/components/ui/styles/sci-fi/panel.tsx
index b1272337e..95d16e811 100644
--- a/components/ui/styles/sci-fi/panel.tsx
+++ b/components/ui/styles/sci-fi/panel.tsx
@@ -1,31 +1,39 @@
 interface SciFiPanelProps {
-  children: React.ReactNode
-  variant?: "primary" | "secondary"
-  className?: string
-};
+  children: React.ReactNode;
+  variant?: "primary" | "secondary";
+  className?: string;
+}
 
-export function SciFiPanel({ children, variant = "primary", className = "" }: SciFiPanelProps) {
+export function SciFiPanel({
+  children,
+  variant = "primary",
+  className = "",
+}: SciFiPanelProps) {
   return (
-    <div className={`
-      relative rounded-lg overflow-hidden
-      ${variant === "primary" 
-        ? "bg-slate-900/80 border border-cyan-500/20" 
-        : "bg-slate-800/60 border border-red-500/20"}
-      ${className}
-    `}>
-      {/* Corner Accents */}
-      <div className="absolute top-0 left-0 w-3 h-3 border-l-2 border-t-2 border-cyan-500/50" />
-      <div className="absolute top-0 right-0 w-3 h-3 border-r-2 border-t-2 border-cyan-500/50" />
-      <div className="absolute bottom-0 left-0 w-3 h-3 border-l-2 border-b-2 border-cyan-500/50" />
-      <div className="absolute bottom-0 right-0 w-3 h-3 border-r-2 border-b-2 border-cyan-500/50" />
-      
+    <div
+      className={`
+        relative rounded-2xl overflow-hidden p-4 shadow-md
+        border ${variant === "primary" ? "border-[#B4CDE5]" : "border-[#D8DEE9]"}
+        ${className}
+      `}
+      style={{
+        background: "linear-gradient(135deg, #E5EEF4, #D8E5EC)",
+        color: "#2E3440",
+        boxShadow:
+          "inset 0 1px 2px rgba(255,255,255,0.4), 0 2px 6px rgba(0,0,0,0.05)",
+      }}
+    >
+      {/* Decorative corners (glow + seam) */}
+      <div className="absolute top-0 left-0 w-4 h-4 border-l-2 border-t-2 border-[#81A1C1]/30 rounded-tl-lg shadow-[inset_0_0_4px_#81A1C1] pointer-events-none" />
+      <div className="absolute top-0 right-0 w-4 h-4 border-r-2 border-t-2 border-[#81A1C1]/30 rounded-tr-lg shadow-[inset_0_0_4px_#81A1C1] pointer-events-none" />
+      <div className="absolute bottom-0 left-0 w-4 h-4 border-l-2 border-b-2 border-[#81A1C1]/30 rounded-bl-lg shadow-[inset_0_0_4px_#81A1C1] pointer-events-none" />
+      <div className="absolute bottom-0 right-0 w-4 h-4 border-r-2 border-b-2 border-[#81A1C1]/30 rounded-br-lg shadow-[inset_0_0_4px_#81A1C1] pointer-events-none" />
+
+      {/* Top glow indicator bar */}
+      <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-[#A3BE8C] via-[#81A1C1] to-[#D08770] opacity-20 pointer-events-none" />
+
       {/* Content */}
-      <div className="relative z-10">
-        {children}
-      </div>
-      
-      {/* Glowing Effect */}
-      <div className="absolute inset-0 bg-gradient-to-b from-cyan-500/5 to-transparent pointer-events-none" />
+      <div className="relative z-10 space-y-2">{children}</div>
     </div>
   );
 };
\ No newline at end of file
diff --git a/components/ui/update-banner.tsx b/components/ui/update-banner.tsx
new file mode 100644
index 000000000..5db741195
--- /dev/null
+++ b/components/ui/update-banner.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+
+interface WeeklyBannerProps {
+  message: string;
+  buttonLabel: string;
+  buttonHref: string;
+};
+
+export default function WeeklyBanner({ message, buttonLabel, buttonHref }: WeeklyBannerProps) {
+  return (
+    <div className="fixed bottom-0 w-full z-50">
+      <div className="flex flex-col md:flex-row justify-between items-center gap-4 px-4 py-3 bg-gradient-to-r from-[#1a1a2e]/90 to-[#16213e]/90 text-white shadow-md border-t border-white/10 backdrop-blur-sm">
+        <span className="text-sm md:text-base font-medium text-center md:text-left">{message}</span>
+        <Link href={buttonHref}>
+          <Button className="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 text-sm md:text-base">
+            {buttonLabel}
+          </Button>
+        </Link>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/content/(anomalies)/(planets)/PlanetStructures.tsx b/content/(anomalies)/(planets)/PlanetStructures.tsx
index a7be65441..351abebf3 100644
--- a/content/(anomalies)/(planets)/PlanetStructures.tsx
+++ b/content/(anomalies)/(planets)/PlanetStructures.tsx
@@ -6,8 +6,9 @@ import { useActivePlanet } from "@/context/ActivePlanet";
 import { InventoryStructureItem } from "@/types/Items";
 import { EarthViewLayout } from "@/components/(scenes)/planetScene/layout";
 import { PlanetarySystem } from "@/components/(scenes)/planetScene/orbitals/system";
-import StructuresOnPlanet, { OrbitalStructuresOnPlanet, AtmosphereStructuresOnPlanet } from "@/components/Structures/Structures";
+// import StructuresOnPlanet, { OrbitalStructuresOnPlanet, AtmosphereStructuresOnPlanet } from "@/components/Structures/Structures";
 import AllAutomatonsOnActivePlanet from "@/components/Structures/Auto/AllAutomatons";
+import Structures from "@/components/Structures/Structures";
 
 const PlanetStructures: React.FC = () => {
     return (
@@ -19,20 +20,21 @@ const PlanetStructures: React.FC = () => {
                         <PlanetarySystem />
                     </div>
                     <center>
-                        <OrbitalStructuresOnPlanet />
+                        {/* <OrbitalStructuresOnPlanet /> */}
                     </center>
                 </div>
             </div>
             <div className="w-full">
                 <div className="py-2">
-                    <center>
+                    {/* <center>
                         <AtmosphereStructuresOnPlanet />
-                    </center>
+                    </center> */}
                 </div>
             </div>
             <div className="w-full">
                 <center>
-                    <StructuresOnPlanet />
+                    <Structures />
+                    {/* <StructuresOnPlanet /> */}
                 </center>
             </div>
             <div className="relative flex-1">
diff --git a/content/(anomalies)/(planets)/generated.tsx b/content/(anomalies)/(planets)/generated.tsx
index f547408c2..6b328bfb8 100644
--- a/content/(anomalies)/(planets)/generated.tsx
+++ b/content/(anomalies)/(planets)/generated.tsx
@@ -63,11 +63,11 @@ const GeneratedStarterPlanet: React.FC = () => {
 
     if (loading) {
         return <div>Loading...</div>;
-    }
+    };
 
     if (error) {
         return <div>Error: {error}</div>;
-    }
+    };
 
     const totalClassifications = classifications.length;
     const anomalyTypes = new Set(classifications.map(c => c.classificationtype)).size;
diff --git a/content/Classifications/Options.ts b/content/Classifications/Options.ts
index f2b84ad58..e7ce3d69f 100644
--- a/content/Classifications/Options.ts
+++ b/content/Classifications/Options.ts
@@ -199,16 +199,16 @@ export const cloudSpottingOnMarsShapesOptions: ClassificationOption[] = [
 ];
 
 
-export const ClickACoralClassificationOptions: ClassificationOption[] = [
-    {
-        id: 1,
-        text: "Coral",
-    },
-    {
-        id: 2,
-        text: "Fish/Animals"
-    },
-];
+// export const ClickACoralClassificationOptions: ClassificationOption[] = [
+//     {
+//         id: 1,
+//         text: "Coral",
+//     },
+//     {
+//         id: 2,
+//         text: "Fish/Animals"
+//     },
+// ];
 
 
 export const lidarEarthCloudsReadClassificationOptions: ClassificationOption[] = [
@@ -312,28 +312,28 @@ export const diskDetectorClassificationOptions: ClassificationOption[] = [
     },
 ];
 
-export const penguinWatchClassificationOptions: ClassificationOption[] = [
-    {
-        id: 1,
-        text: "Adult penguin",
-    },
-    {
-        id: 2,
-        text: "Penguin chicks",
-    },
-    {
-        id: 3,
-        text: "Penguin eggs",
-    },
-    {
-        id: 4,
-        text: "Nesting pair with eggs",
-    },
-    {
-        id: 5,
-        text: "No penguins/too blurry"
-    },
-];
+// export const penguinWatchClassificationOptions: ClassificationOption[] = [
+//     {
+//         id: 1,
+//         text: "Adult penguin",
+//     },
+//     {
+//         id: 2,
+//         text: "Penguin chicks",
+//     },
+//     {
+//         id: 3,
+//         text: "Penguin eggs",
+//     },
+//     {
+//         id: 4,
+//         text: "Nesting pair with eggs",
+//     },
+//     {
+//         id: 5,
+//         text: "No penguins/too blurry"
+//     },
+// ];
 
 export const zoodexBurrowingOwlClassificationOptions: ClassificationOption[] = [
     {
diff --git a/content/Comments/CommentForm.tsx b/content/Comments/CommentForm.tsx
new file mode 100644
index 000000000..f31f9f227
--- /dev/null
+++ b/content/Comments/CommentForm.tsx
@@ -0,0 +1,116 @@
+'use client'
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
+import {
+    ToastProvider,
+    Toast,
+    ToastTitle,
+    ToastDescription,
+    ToastViewport,
+} from '@/components/ui/toast';
+
+interface CommentFormProps {
+    classificationId: number;
+    parentCommentId?: number;
+    onSubmit?: () => void;
+};
+
+export function CommentForm({
+    classificationId,
+    parentCommentId,
+    onSubmit,
+}: CommentFormProps) {
+    const supabase = useSupabaseClient();
+    const session = useSession();
+
+    const [content, setContent] = useState<string>('');
+    const [toastMessage, setToastMessage] = useState<{
+        title: string;
+        description: string;
+        variant?: 'default' | 'destructive';
+        open: boolean;
+    }>({
+        title: '',
+        description: '',
+        open: false
+    });
+    const [submitting, setSubmitting] = useState<boolean>(false);
+
+    const showToast = (
+        title: string,
+        description: string,
+        variant: 'default' | 'destructive' = 'default'
+    ) => {
+        setToastMessage({ title, description, variant, open: true });
+        setTimeout(() => {
+        setToastMessage((prev) => ({ ...prev, open: false }));
+        }, 4000);
+    };
+
+    const handleSubmitComment = async () => {
+        if (!content.trim()) {
+            showToast('Empty comment', 'Please write something before submitting.', 'destructive');
+            return;
+        };
+
+        if (!session) {
+            showToast('Not signed in', 'You must be signed in to post a comment');
+            return;
+        };
+
+        setSubmitting(true);
+
+        const { error } = await supabase
+            .from("comments")
+            .insert({
+                content,
+                author: session.user.id,
+                classification_id: classificationId,
+                parent_comment_id: parentCommentId || null,
+            });
+
+            if (error) {
+                showToast('Submission failed', 'Unable to post your comment');
+                console.error(error);
+            } else {
+                setContent('');
+                showToast('Comment posted', 'Your comment was posted')
+                onSubmit?.();
+            };
+
+            setSubmitting(false);
+    };
+
+    return (
+        <ToastProvider>
+            <div className="w-full pt-4">
+                <h3 className="text-sm font-semibold text-[#4C566A] mb-2">Leave a comment</h3>
+                <Textarea
+                    value={content}
+                    onChange={(e) => setContent(e.target.value)}
+                    placeholder="Write your comment here..."
+                    rows={4}
+                    className="w-full border border-[#D8DEE9] rounded-lg focus:ring-2 focus:ring-[#81A1C1] transition"
+                />
+                <div className="flex justify-end mt-3">
+                    <Button
+                        onClick={handleSubmitComment}
+                        disabled={submitting}
+                        className="bg-[#5E81AC] hover:bg-[#4C566A] text-white transition"
+                    >
+                        {submitting ? 'Posting...' : 'Post comment'}
+                    </Button>
+                </div>
+            </div>
+
+            <Toast open={toastMessage.open} variant={toastMessage.variant}>
+                <ToastTitle>{toastMessage.title}</ToastTitle>
+                <ToastDescription>{toastMessage.description}</ToastDescription>
+            </Toast>
+            <ToastViewport />
+        </ToastProvider>
+    );
+};
\ No newline at end of file
diff --git a/content/Comments/CommentListById.tsx b/content/Comments/CommentListById.tsx
new file mode 100644
index 000000000..c1f228375
--- /dev/null
+++ b/content/Comments/CommentListById.tsx
@@ -0,0 +1,84 @@
+'use client'
+
+import React, { useEffect, useState } from "react";
+import { useSupabaseClient } from "@supabase/auth-helpers-react";
+import { AvatarGenerator } from "@/components/Account/Avatar";
+import { Card, CardContent } from "@/components/ui/card";
+
+interface Comment {
+    id: string;
+    classification_id: string;
+    user_id: string;
+    author: string;
+    content: string;
+    created_at: string;
+};
+
+interface CommentsListProps {
+    classificationId: string;
+};
+
+export default function CommentsList({
+    classificationId
+}: CommentsListProps) {
+    const supabase = useSupabaseClient();
+
+    const [comments, setComments] = useState<Comment[]>([]);
+
+    const [loading, setLoading] = useState<boolean>(true);
+
+    useEffect(() => {
+        fetchComments();
+    }, [classificationId]);
+
+    const fetchComments = async () => {
+        setLoading(true);
+
+        const {
+            data,
+            error
+        } = await supabase
+            .from("comments")
+            .select('*')
+            .eq('classification_id', classificationId)
+            .order('created_at', { ascending: false });
+
+        if (error) {
+            console.error("Failed to fetch comments: ", error.message);
+        } else {
+            setComments(data);
+        };
+
+        setLoading(false);
+    };
+
+    return (
+        <div className="w-full">
+            <h3 className="text-lg font-semibold text-[#2E3440] mb-4">Comments</h3>
+            {loading ? (
+                <p className="text-[#4C566A]">Loading comments...</p>
+            ) : comments.length === 0 ? (
+                <p className="text-[#4C566A]">No comments yet</p>                
+            ) : (
+                <div className="space-y-4">
+                    {comments.map((comment) => (
+                        <Card key={comment.id} className="border border-[#D8DEE9] bg-white rounded-lg shadow-sm">
+                            <CardContent className="p-4">
+                                <div className="flex items-start space-x-3">
+                                    <AvatarGenerator author={comment.author} />
+                                    <div>
+                                        <p className="text-sm font-medium text-[#2E3440]">{comment.author}</p>
+                                        <p className="text-sm text-[#4C566A] whitespace-pre-line">{comment.content}</p>
+                                        <p className="text-xs text-[#A3BE8C] mt-1">
+                                            {new Date(comment.created_at).toLocaleString()}
+                                        </p>
+                                    </div>
+                                </div>
+                            </CardContent>
+                        </Card>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/content/Posts/PostSingle.tsx b/content/Posts/PostSingle.tsx
index 2213b54e7..174d211b9 100644
--- a/content/Posts/PostSingle.tsx
+++ b/content/Posts/PostSingle.tsx
@@ -1,16 +1,16 @@
 "use client";
 
 import React, { useEffect, useState, useRef } from "react";
+import { AvatarGenerator } from "@/components/Account/Avatar";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import { Textarea } from "@/components/ui/textarea";
 import { ThumbsUp, MessageSquare, Share2 } from "lucide-react";
-import { Badge } from "@/components/ui/badge";
 import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
+import html2canvas from "html2canvas";
 import { CommentCard } from "../Comments/CommentSingle";
-import { AvatarGenerator } from '@/components/Account/Avatar';
-import html2canvas from 'html2canvas';
 import { SurveyorComments } from "./Surveyor/SurveyorPostCard";
 
 export interface CommentProps {
@@ -18,29 +18,25 @@ export interface CommentProps {
   author: string;
   content: string;
   created_at: string;
-  isSurveyor?: boolean;
-  configuration?: {
-      planetType?: string;
-  };
   username?: string;
-};
+}
 
 export interface PostCardSingleProps {
-    classificationId: number;
-    title: string;
-    anomalyId: string;
-    author: string;
-    content: string;
-    votes: number;
-    category: string;
-    tags?: string[];
-    classificationConfig?: any;
-    images: string[];
-    classificationType: string;
-    onVote?: () => void;
-    children?: React.ReactNode;
-    commentStatus?: boolean;
-};
+  classificationId: number;
+  title: string;
+  anomalyId: string;
+  author: string;
+  content: string;
+  votes: number;
+  category: string;
+  tags?: string[];
+  classificationConfig?: any;
+  images: string[];
+  classificationType: string;
+  onVote?: () => void;
+  children?: React.ReactNode;
+  commentStatus?: boolean;
+}
 
 export function PostCardSingle({
   classificationId,
@@ -50,32 +46,25 @@ export function PostCardSingle({
   votes,
   category,
   tags,
-  anomalyId, 
+  anomalyId,
   classificationConfig,
   images,
   classificationType,
   commentStatus,
   onVote,
-  // enableNewCommentingMethod = false,
 }: PostCardSingleProps) {
   const supabase = useSupabaseClient();
   const session = useSession();
-  
+
   const [comments, setComments] = useState<CommentProps[]>([]);
   const [loadingComments, setLoadingComments] = useState<boolean>(true);
   const [voteCount, setVoteCount] = useState(votes);
   const [newComment, setNewComment] = useState<string>("");
-  const [commentInputs, setCommentInputs] = useState<Record<number, string>>({});
   const [isSharing, setIsSharing] = useState(false);
-  const shareCardRef = useRef<HTMLDivElement>(null);
   const [showStats, setShowStats] = useState(false);
+  const shareCardRef = useRef<HTMLDivElement>(null);
 
-  const [surveyorComments, setSurveyorComments] = useState<any[]>([]);
-  const [nonSurveyorComments, setNonSurveyorComments] = useState<any[]>([]);
-
-  useEffect(() => {
-    fetchComments();
-  }, [classificationId]);
+  const [currentIndex, setCurrentIndex] = useState(0);
 
   const fetchComments = async () => {
     setLoadingComments(true);
@@ -86,47 +75,44 @@ export function PostCardSingle({
         .eq("classification_id", classificationId)
         .order("created_at", { ascending: false });
 
-        if (classificationConfig?.classificationType === "telescope-minorPlanet" || classificationConfig?.classificationType === "planet") {
-          const surveyor = comments.filter((comment) => comment.isSurveyor);
-          const nonSurveyor = comments.filter((comment) => !comment.isSurveyor);
-          setSurveyorComments(surveyor);
-          setNonSurveyorComments(nonSurveyor);
-        };
-
       if (error) throw error;
       setComments(data);
     } catch (error) {
       console.error("Error fetching comments:", error);
     } finally {
       setLoadingComments(false);
-    };
+    }
   };
 
+  useEffect(() => {
+    fetchComments();
+  }, [classificationId]);
+
   const handleVoteClick = async () => {
-    if (!session?.user?.id) return;  
+    if (!session?.user?.id) return;
 
     try {
       const { error } = await supabase.from("votes").insert([
         {
           user_id: session.user.id,
-          classification_id: classificationId, 
+          classification_id: classificationId,
           anomaly_id: anomalyId,
         },
       ]);
-  
+
       if (error) {
         console.error("Error inserting vote: ", error);
         return;
-      };
-  
+      }
+
       setVoteCount((prev) => prev + 1);
     } catch (error) {
       console.error("Error handling vote:", error);
-    };
-  
+    }
+
     if (onVote) onVote();
   };
-  
+
   const handleAddComment = async () => {
     if (!newComment.trim()) return;
 
@@ -147,11 +133,9 @@ export function PostCardSingle({
       fetchComments();
     } catch (error) {
       console.error("Error adding comment:", error);
-    };
+    }
   };
 
-  const [currentIndex, setCurrentIndex] = React.useState(0);
-
   const goToNextImage = () => {
     setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
   };
@@ -162,34 +146,13 @@ export function PostCardSingle({
     );
   };
 
-  // For sharing
-  const [dropdownOpen, setDropdownOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement | null>(null);
-
-  const toggleDropdown = () => {
-    setDropdownOpen((prev) => !prev);
-  };
-
-  const handleCopyLink = () => {
-    const link = `https://starsailors.space/posts/${classificationId}`;
-    navigator.clipboard.writeText(link).then(() => {
-      alert("Link copied to clipboard!");
-    });
-  };
-
-  const openPostInNewTab = () => {
-    window.open(`/posts/${classificationId}`, "_blank");
-  };
-
   const handleShare = async () => {
     if (!shareCardRef.current) return;
     setIsSharing(true);
-  
+
     const safeTitle = title || "post";
-    
-    // Ensure all images are loaded
-    const images = Array.from(shareCardRef.current.querySelectorAll('img'));
-    const imagePromises = images.map((img: HTMLImageElement) =>
+    const imgs = Array.from(shareCardRef.current.querySelectorAll("img"));
+    const imagePromises = imgs.map((img: HTMLImageElement) =>
       new Promise<void>((resolve, reject) => {
         if (img.complete) {
           resolve();
@@ -199,54 +162,47 @@ export function PostCardSingle({
         }
       })
     );
-  
+
     try {
       await Promise.all(imagePromises);
-  
       const canvas = await html2canvas(shareCardRef.current, {
-        useCORS: true, 
+        useCORS: true,
         scrollX: 0,
-        scrollY: -window.scrollY, 
+        scrollY: -window.scrollY,
       });
-  
-      canvas.toBlob(
-        (blob) => {
-          if (blob) {
-            const link = document.createElement("a");
-            link.href = URL.createObjectURL(blob);
-            link.download = `${safeTitle.toLowerCase().replace(/\s+/g, "-")}-share.png`;
-            link.click();
-          }
-        },
-        "image/png",
-        1.0
-      );
+
+      canvas.toBlob((blob) => {
+        if (blob) {
+          const link = document.createElement("a");
+          link.href = URL.createObjectURL(blob);
+          link.download = `${safeTitle.toLowerCase().replace(/\s+/g, "-")}-share.png`;
+          link.click();
+        }
+      }, "image/png");
     } catch (error) {
       console.error("Error sharing post: ", error);
     } finally {
       setIsSharing(false);
-    };
-  };  
-
-  // useEffect(() => {
-  //   console.log("Images prop received:", images);
-  // }, [images]);  
+    }
+  };
 
   return (
     <div ref={shareCardRef}>
       <Card className="w-full mx-auto my-8 bg-card text-card-foreground border-primary">
         <CardHeader>
           <div className="flex items-center space-x-4">
-            {session && <AvatarGenerator author={session?.user.id} />}
+            {session && <AvatarGenerator author={session.user.id} />}
             <div>
               <CardTitle>{title}</CardTitle>
               <p className="text-sm text-muted-foreground">by {author}</p>
             </div>
           </div>
         </CardHeader>
+
         <CardContent>
           <Badge variant="secondary">{category}</Badge>
           <p>{content}</p>
+
           {images.length > 0 && (
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
               <div className="relative col-span-1">
@@ -286,6 +242,7 @@ export function PostCardSingle({
             </div>
           )}
         </CardContent>
+
         <CardFooter className="flex items-center justify-between space-x-2">
           <div className="flex gap-2">
             <Button onClick={handleVoteClick} size="sm">
@@ -296,9 +253,7 @@ export function PostCardSingle({
             </Button>
           </div>
           <Button
-            onClick={() => {
-              handleShare();
-            }}
+            onClick={handleShare}
             size="sm"
             disabled={isSharing}
             variant="outline"
@@ -308,6 +263,7 @@ export function PostCardSingle({
             {isSharing ? "Sharing..." : "Share"}
           </Button>
         </CardFooter>
+
         {commentStatus !== false && (
           <CardContent>
             {!showStats && (
@@ -323,13 +279,24 @@ export function PostCardSingle({
                   <Button onClick={handleAddComment} className="w-full">
                     Submit Comment
                   </Button>
-                  <Button onClick={() => setShowStats(!showStats)} variant="outline">
-                    Propose new stats
+                  <Button onClick={() => setShowStats(true)} variant="outline">
+                    View or propose surveyor stats
                   </Button>
                 </CardFooter>
               </div>
             )}
-            {!showStats ? (
+
+            {showStats ? (
+              <div className="mt-4 space-y-2">
+                <SurveyorComments
+                  classificationId={classificationId}
+                  author={author}
+                  anomalyId={anomalyId}
+                  classificationConfig={classificationConfig}
+                  commentStatus={commentStatus}
+                />
+              </div>
+            ) : (
               <div className="mt-4 space-y-2">
                 {loadingComments ? (
                   <p>Loading comments...</p>
@@ -344,27 +311,16 @@ export function PostCardSingle({
                       replyCount={0}
                       classificationId={classificationId}
                       parentCommentId={classificationId}
-                      isSurveyor={comment.isSurveyor}
                     />
                   ))
                 ) : (
                   <p>No comments yet. Be the first to comment!</p>
                 )}
               </div>
-            ) : (
-              <div className="mt-4 space-y-2">
-                <SurveyorComments
-                  classificationId={classificationId}
-                  author={author}
-                  anomalyId={anomalyId}
-                  classificationConfig={classificationConfig}
-                  commentStatus={commentStatus}
-                />
-              </div>
             )}
           </CardContent>
         )}
       </Card>
     </div>
   );
-};
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/content/Posts/SimplePostSingle.tsx b/content/Posts/SimplePostSingle.tsx
index 685bc9b7f..b81a2b8ed 100644
--- a/content/Posts/SimplePostSingle.tsx
+++ b/content/Posts/SimplePostSingle.tsx
@@ -1,12 +1,15 @@
-import React, { useRef, useState } from 'react';
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import StructuresOnPlanet from '@/components/Structures/Structures';
 import { AvatarGenerator } from '@/components/Account/Avatar';
 import { Button } from '@/components/ui/button';
-import { Share2, ThumbsUpIcon } from 'lucide-react';
-// import PlanetGenerator from '@/components/Data/Generator/Astronomers/PlanetHunters/PlanetGenerator';
+import { Share2, ThumbsUpIcon, ThumbsDownIcon, MessageCircle } from 'lucide-react';
 import html2canvas from 'html2canvas';
+import { useSession, useSupabaseClient } from '@supabase/auth-helpers-react';
+import { CommentForm } from '../Comments/CommentForm';
+import CommentsList from '../Comments/CommentListById';
+import { useRouter } from 'next/navigation';
 
 interface SimplePostSingleProps {
   title: string;
@@ -15,8 +18,7 @@ interface SimplePostSingleProps {
   content: string;
   category: string;
   images: string[];
-  classificationConfiguration?: any;
-};
+}
 
 export function SimplePostSingle({
   id,
@@ -25,148 +27,160 @@ export function SimplePostSingle({
   content,
   category,
   images,
-  classificationConfiguration,
 }: SimplePostSingleProps) {
+  const router = useRouter();
+
+  const supabase = useSupabaseClient();
+  const session = useSession();
+
   const [currentIndex, setCurrentIndex] = useState(0);
-  const [isSharing, setIsSharing] = useState<boolean>(false);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [voteTotal, setVoteTotal] = useState<number>(0);
+  const [userVote, setUserVote] = useState<'up' | 'down' | null>(null); 
+  const [showCommentForm, setShowCommentForm] = useState(false);
+  const [isLightboxOpen, setIsLightboxOpen] = useState(false);
+
   const shareCardRef = useRef<HTMLDivElement>(null);
 
-  const goToNextImage = () => {
-    setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
-  };
+  useEffect(() => {
+    fetchVotes();
+  }, [id, session?.user?.id]);
 
-  const goToPreviousImage = () => {
-    setCurrentIndex((prevIndex) =>
-      prevIndex === 0 ? images.length - 1 : prevIndex - 1
-    );
+  const fetchVotes = async () => {
+    try {
+      const { data: votes, error } = await supabase
+        .from('votes')
+        .select('vote_type, user_id')
+        .eq('classification_id', id);
+
+      if (error) throw error;
+
+      const upvotes = votes.filter((v) => v.vote_type === 'up').length;
+      const downvotes = votes.filter((v) => v.vote_type === 'down').length;
+
+      setVoteTotal(upvotes - downvotes);
+
+      if (session?.user?.id) {
+        const userVote = votes.find((v) => v.user_id === session.user.id);
+        setUserVote(userVote?.vote_type || null);
+      }
+    } catch (error) {
+      console.error('Error fetching votes:', error);
+    }
   };
 
-  // For sharing
-  const [dropdownOpen, setDropdownOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  const handleVote = async (type: 'up' | 'down') => {
+    if (!session) return;
+
+    try {
+      const { data: existingVote } = await supabase
+        .from('votes')
+        .select('*')
+        .eq('user_id', session.user.id)
+        .eq('classification_id', id)
+        .maybeSingle();
 
-  const toggleDropdown = () => {
-    setDropdownOpen((prev) => !prev);
+      if (existingVote) {
+        if (existingVote.vote_type === type) {
+          await supabase.from('votes').delete().eq('id', existingVote.id);
+          setUserVote(null);
+        } else {
+          await supabase.from('votes').update({ vote_type: type }).eq('id', existingVote.id);
+          setUserVote(type);
+        }
+      } else {
+        await supabase.from('votes').insert({
+          user_id: session.user.id,
+          classification_id: id,
+          vote_type: type,
+        });
+        setUserVote(type);
+      }
+
+      fetchVotes();
+    } catch (error) {
+      console.error('Voting error:', error);
+    }
   };
 
+  const goToNextImage = () => setCurrentIndex((prev) => (prev + 1) % images.length);
+  const goToPreviousImage = () => setCurrentIndex((prev) => (prev === 0 ? images.length - 1 : prev - 1));
+  const toggleDropdown = () => setDropdownOpen((prev) => !prev);
+  const toggleCommentForm = () => setShowCommentForm((prev) => !prev);
+
   const handleCopyLink = () => {
     const link = `https://starsailors.space/posts/${id}`;
-    navigator.clipboard.writeText(link).then(() => {
-      alert('Link copied to clipboard!');
-    });
+    navigator.clipboard.writeText(link).then(() => alert('Link copied to clipboard!'));
   };
 
-  const openPostInNewTab = () => {
-    window.open(`/posts/${id}`, '_blank');
-  };
+  const openPostInNewTab = () => window.open(`/posts/${id}`, '_blank');
 
   const handleShare = async () => {
-    if (!shareCardRef.current) {
-      return;
-    };
-
-    setIsSharing(true);
-
-    const safeTitle = title || 'post';
+    if (!shareCardRef.current) return;
 
     const images = Array.from(shareCardRef.current.querySelectorAll('img'));
     const imagePromises = images.map((img: HTMLImageElement) =>
       new Promise<void>((resolve, reject) => {
-        if (img.complete) {
-          resolve();
-        } else {
-          img.onload = () => resolve();
-          img.onerror = () => reject(new Error("image failed to load"));
-        };
+        if (img.complete) return resolve();
+        img.onload = () => resolve();
+        img.onerror = () => reject(new Error('image failed to load'));
       })
     );
 
-    try {
-      await Promise.all(imagePromises);
-      const canvas = await html2canvas(shareCardRef.current, {
-        useCORS: true,
-        scrollX: 0,
-        scrollY: -window.scrollY,
-      });
-
-      canvas.toBlob(
-        (blob) => {
-          if (blob) {
-            const link = document.createElement("a");
-            link.href = URL.createObjectURL(blob);
-            link.download = `${safeTitle.toLowerCase().replace(/\s+/g, "-")}-share.png`;
-            link.click();
-          }
-        },
-        "image/png",
-        1.0,
-      );
-    } catch (error: any) {
-      console.error("Error sharing post: ", error);
-    } finally {
-      setIsSharing(false);
-    };
+    await Promise.all(imagePromises);
+
+    const canvas = await html2canvas(shareCardRef.current, {
+      useCORS: true,
+      scrollX: 0,
+      scrollY: -window.scrollY,
+    });
+
+    canvas.toBlob((blob) => {
+      if (blob) {
+        const link = document.createElement('a');
+        link.href = URL.createObjectURL(blob);
+        link.download = `${title.toLowerCase().replace(/\s+/g, '-')}-share.png`;
+        link.click();
+      }
+    }, 'image/png');
   };
 
   return (
-    <div className="flex items-center justify-center" ref={shareCardRef}>
-      <Card className="w-full max-w-lg backdrop-blur-md border border-white/10 shadow-lg rounded-lg relative">
-        <div
-          className="absolute top-2 right-2 z-10"
-          ref={dropdownRef}
-        >
-          <Button
-            onClick={toggleDropdown}
-            className="flex items-center gap-2 justify-center"
-          >
-            <Share2 className="mr-2" /> Share
-          </Button>
-          {dropdownOpen && (
-            <div className="absolute top-10 right-0 bg-white/30 backdrop-blur-md border border-white/10 shadow-lg rounded-lg p-4">
-              <Button onClick={handleCopyLink} className="w-full mb-2">
-                Copy Link
-              </Button>
-              <Button onClick={openPostInNewTab} className="w-full">
-                Open
-              </Button>
-              <Button onClick={handleShare} className="w-full mt-2">
-                Download Post
-              </Button>
-            </div>
-          )}
-        </div>
-
+    <div className="flex items-center justify-center w-full px-4 overflow-hidden" ref={shareCardRef}>
+      <Card className="w-full max-w-4xl md:w-4/5 max-h-screen bg-white border border-[#D8DEE9] shadow-2xl rounded-xl overflow-y-auto">
         <CardHeader>
           <div className="flex items-center space-x-4">
             <AvatarGenerator author={author} />
             <div>
-              <CardTitle>{title}</CardTitle>
-              <p className="text-sm text-muted-foreground">by {author}</p>
+              <CardTitle className="text-[#2E3440]">{title}</CardTitle>
+              <p className="text-sm text-[#4C566A]">by {author}</p>
             </div>
           </div>
         </CardHeader>
+
         <CardContent>
-          <p className="text-sm font-medium text-muted-foreground mb-2">{category}</p>
-          <p className="mb-4">{content}</p>
+          <p className="text-xs font-semibold text-[#5E81AC] uppercase mb-1 tracking-wide">{category}</p>
+          <p className="text-[#2E3440]">{content}</p>
+
           {images.length > 0 && (
             <div className="relative">
               <img
                 src={images[currentIndex]}
                 alt={`Image ${currentIndex + 1}`}
-                className="rounded-lg w-full"
+                className="w-full max-h-[400px] object-contain cursor-pointer rounded-lg transition-all duration-200" // 🔧 UPDATED
+                onClick={() => setIsLightboxOpen(true)}
               />
-
               {images.length > 1 && (
                 <>
                   <button
                     onClick={goToPreviousImage}
-                    className="absolute top-1/2 left-4 transform -translate-y-1/2 bg-gray-800 text-white rounded-full p-2 focus:outline-none"
+                    className="absolute top-1/2 left-4 transform -translate-y-1/2 bg-[#4C566A]/60 text-white rounded-full p-2"
                   >
                     &#8592;
                   </button>
                   <button
                     onClick={goToNextImage}
-                    className="absolute top-1/2 right-4 transform -translate-y-1/2 bg-gray-800 text-white rounded-full p-2 focus:outline-none"
+                    className="absolute top-1/2 right-4 transform -translate-y-1/2 bg-[#4C566A]/60 text-white rounded-full p-2"
                   >
                     &#8594;
                   </button>
@@ -175,19 +189,102 @@ export function SimplePostSingle({
                       <button
                         key={index}
                         onClick={() => setCurrentIndex(index)}
-                        className={`h-2 w-2 rounded-full ${
-                          currentIndex === index ? 'bg-white' : 'bg-gray-400'
+                        className={`h-2 w-2 rounded-full transition ${
+                          currentIndex === index ? 'bg-[#5E81AC]' : 'bg-[#D8DEE9]'
                         }`}
-                      ></button>
+                      />
                     ))}
                   </div>
                 </>
               )}
             </div>
           )}
+
+          {isLightboxOpen && (
+            <div className="fixed inset-0 bg-black bg-opacity-80 z-50 flex items-center justify-center">
+              <button
+                className="absolute top-4 right-4 text-white text-2xl"
+                onClick={() => setIsLightboxOpen(false)}
+              >
+                ✕
+              </button>
+              <img
+                src={images[currentIndex]}
+                alt={`Enlarged image ${currentIndex + 1}`}
+                className="max-w-[90%] max-h-[40%] object-contain rounded-lg"
+              />
+            </div>
+          )}
+
+          <div className="w-full flex justify-between items-center px-0 pb-2 pt-2 border-t border-[#D8DEE9] text-[#2E3440] text-sm bg-white/80">
+            <div className="flex items-center gap-6">
+              <button
+                onClick={() => handleVote('up')}
+                className={`flex items-center gap-1 transition ${
+                  userVote === 'up' ? 'text-[#A3BE8C]' : 'text-[#4C566A] hover:text-[#88C0D0]'
+                }`}
+              >
+                <ThumbsUpIcon className="w-5 h-5" />
+                Upvote
+              </button>
+              <button
+                onClick={() => handleVote('down')}
+                className={`flex items-center gap-1 transition ${
+                  userVote === 'down' ? 'text-[#BF616A]' : 'text-[#4C566A] hover:text-[#D08770]'
+                }`}
+              >
+                <ThumbsDownIcon className="w-5 h-5" />
+                Downvote
+              </button>
+              <div className="text-sm font-semibold text-[#2E3440]">
+                Score:{' '}
+                <span className={voteTotal >= 0 ? 'text-green-600' : 'text-red-600'}>{voteTotal}</span>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-4">
+              <button
+                onClick={toggleCommentForm}
+                className="flex items-center gap-1 text-[#4C566A] hover:text-[#A3BE8C] transition"
+              >
+                <MessageCircle className="w-5 h-5" />
+                Comment
+              </button>
+              <div className="relative">
+                <button
+                  onClick={toggleDropdown}
+                  className="flex items-center gap-1 text-[#4C566A] hover:text-[#EBCB8B] transition"
+                >
+                  <Share2 className="w-5 h-5" />
+                  Share
+                </button>
+                {dropdownOpen && (
+                  <div className="absolute bottom-10 right-0 bg-white/90 backdrop-blur-md border border-[#D8DEE9] shadow-xl rounded-lg p-4 z-20">
+                    <Button onClick={handleCopyLink} className="w-full mb-2 bg-[#88C0D0] text-white hover:bg-[#81A1C1]">
+                      Copy Link
+                    </Button>
+                    <Button onClick={openPostInNewTab} className="w-full mb-2 bg-[#5E81AC] text-white hover:bg-[#4C566A]">
+                      Open
+                    </Button>
+                    <Button onClick={handleShare} className="w-full bg-[#A3BE8C] text-white hover:bg-[#8FBC8F]">
+                      Download Post
+                    </Button>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+
+                <Button
+                  onClick={() => router.push(`/next/${id}`)}
+                  variant='outline'
+                >
+                  Details
+                </Button>
+
+          <CommentForm classificationId={parseInt(id)} onSubmit={() => setShowCommentForm(false)} />
+          <CommentsList classificationId={id} />
         </CardContent>
-        {/* <PlanetGenerator classificationId={String(id)} classificationConfig={classificationConfiguration} author={author} /> */}
-        {/* <StructuresOnPlanet author={author} /> */}
       </Card>
     </div>
   );
diff --git a/content/Posts/Surveyor/SurveyorPostCard.tsx b/content/Posts/Surveyor/SurveyorPostCard.tsx
index ac9d222b7..9c3fd1a08 100644
--- a/content/Posts/Surveyor/SurveyorPostCard.tsx
+++ b/content/Posts/Surveyor/SurveyorPostCard.tsx
@@ -4,7 +4,6 @@ import React, { useEffect, useState, useRef } from "react";
 import { Card, CardContent, CardFooter } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
-import { ThumbsUp, MessageSquare } from "lucide-react";
 import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import { CommentCard } from "@/content/Comments/CommentSingle";
 
@@ -19,71 +18,40 @@ interface CommentProps {
   };
   category?: string;
   value?: string;
-};
+}
 
 interface PostCardSingleProps {
   classificationId: number;
   anomalyId: string;
   author: string;
   tags?: string[];
-  classificationConfig?: any; 
+  classificationConfig?: any;
   enableNewCommentingMethod?: boolean;
   children?: React.ReactNode;
   commentStatus?: boolean;
-};
+}
 
 export function SurveyorComments({
   classificationId,
   author,
-  anomalyId, 
+  anomalyId,
   classificationConfig,
   commentStatus,
-//   onVote,
-//   enableNewCommentingMethod = false,
 }: PostCardSingleProps) {
   const supabase = useSupabaseClient();
-  const session = useSession(); 
+  const session = useSession();
 
   const [comments, setComments] = useState<CommentProps[]>([]);
   const [loadingComments, setLoadingComments] = useState<boolean>(true);
-  const [newComment, setNewComment] = useState<string>("");
 
   const [commentInputs, setCommentInputs] = useState<Record<string, string>>({});
-  const [temperatureInputs, setTemperatureInputs] = useState<Record<string, string>>({});  
-  const [densityInputs, setDensityInputs] = useState<Record<string, string>>({});  
-
-  const [isSharing, setIsSharing] = useState(false);
-  const shareCardRef = useRef<HTMLDivElement>(null);
-
-  const [surveyorComments, setSurveyorComments] = useState<any[]>([]);
-  const [nonSurveyorComments, setNonSurveyorComments] = useState<any[]>([]);
+  const [temperatureInputs, setTemperatureInputs] = useState<Record<string, string>>({});
+  const [densityInputs, setDensityInputs] = useState<Record<string, string>>({});
 
   useEffect(() => {
     fetchComments();
   }, [classificationId]);
 
-  const handleConfirmComment = async (comment: CommentProps) => {
-    if (!comment.configuration) return;
-  
-    try {
-      const updatedConfig = {
-        ...classificationConfig,
-        ...comment.configuration,
-      };
-  
-      const { error } = await supabase
-        .from("classifications")
-        .update({ classificationConfiguration: updatedConfig })
-        .eq("id", classificationId);
-  
-      if (error) throw error;
-  
-      console.log("Confirmed comment configuration added:", comment.configuration);
-    } catch (error) {
-      console.error("Error confirming comment:", error);
-    };
-  };  
-
   const fetchComments = async () => {
     setLoadingComments(true);
     try {
@@ -94,13 +62,6 @@ export function SurveyorComments({
         .eq("surveyor", "TRUE")
         .order("created_at", { ascending: false });
 
-        if (classificationConfig?.classificationType === "telescope-minorPlanet" || classificationConfig?.classificationType === "planet") {
-          const surveyor = comments.filter((comment) => comment.isSurveyor);
-          const nonSurveyor = comments.filter((comment) => !comment.isSurveyor);
-          setSurveyorComments(surveyor);
-          setNonSurveyorComments(nonSurveyor);
-        }
-
       if (error) throw error;
       setComments(data);
     } catch (error) {
@@ -111,63 +72,48 @@ export function SurveyorComments({
   };
 
   const handleProposePlanetType = async (planetType: "Terrestrial" | "Gaseous") => {
-    const commentInput = commentInputs[`${classificationId}-1`]; 
-    
-    if (!commentInput?.trim()) {
-      console.error("Comment input must be filled");
-      return;
-    };
-  
+    const commentInput = commentInputs[`${classificationId}-1`];
+
+    if (!commentInput?.trim()) return;
+
     try {
-      const { error } = await supabase
-        .from("comments")
-        .insert([
-          {
-            content: commentInput || planetType,
-            classification_id: classificationId,
-            author: session?.user?.id,
-            configuration: { planetType, commentInput },
-            surveyor: "TRUE",
-            category: 'PlanetType'
-          },
-        ]);
-  
+      const { error } = await supabase.from("comments").insert([
+        {
+          content: commentInput,
+          classification_id: classificationId,
+          author: session?.user?.id,
+          configuration: { planetType, commentInput },
+          surveyor: "TRUE",
+          category: "PlanetType",
+        },
+      ]);
+
       if (error) throw error;
-  
-      setCommentInputs((prev) => ({
-        ...prev,
-        [`${classificationId}-1`]: "",  // Reset input after submit
-      }));
-  
+
+      setCommentInputs((prev) => ({ ...prev, [`${classificationId}-1`]: "" }));
       fetchComments();
     } catch (error) {
       console.error("Error inserting comment:", error);
-    };
-  };  
+    }
+  };
 
   const handleAddTemperatureComment = async () => {
-    const temperatureInput1 = temperatureInputs[`${classificationId}-1`];
-    const temperatureInput2 = temperatureInputs[`${classificationId}-2`];
-
-    if (!temperatureInput1?.trim() || !temperatureInput2?.trim()) {
-      console.error("Both text areas must be filled");
-      return;
-    };
+    const t1 = temperatureInputs[`${classificationId}-1`];
+    const t2 = temperatureInputs[`${classificationId}-2`];
+    if (!t1?.trim() || !t2?.trim()) return;
 
     try {
-      const { error } = await supabase
-        .from("comments")
-        .insert([
-          {
-            content: `${temperatureInput1}\n\n${temperatureInput2}`,
-            classification_id: classificationId,
-            author: session?.user?.id,
-            configuration: { temperature: `${temperatureInput1}, ${temperatureInput2}` },
-            surveyor: "TRUE",
-            value: temperatureInput2,
-            category: 'Temperature'
-          },
-        ]);
+      const { error } = await supabase.from("comments").insert([
+        {
+          content: `${t1}\n\n${t2}`,
+          classification_id: classificationId,
+          author: session?.user?.id,
+          configuration: { temperature: `${t1}, ${t2}` },
+          surveyor: "TRUE",
+          value: t2,
+          category: "Temperature",
+        },
+      ]);
 
       if (error) throw error;
       setTemperatureInputs((prev) => ({
@@ -178,239 +124,168 @@ export function SurveyorComments({
       fetchComments();
     } catch (error) {
       console.error("Error adding temperature comment:", error);
-    };
+    }
   };
 
   const handleAddDensityComment = async () => {
-    const densityInput1 = densityInputs[`${classificationId}-1`];
-    const densityInput2 = densityInputs[`${classificationId}-2`];
-  
-    if (!densityInput1?.trim() || !densityInput2?.trim()) {
-      console.error("Both text areas must be filled");
-      return;
-    }
-  
+    const d1 = densityInputs[`${classificationId}-1`];
+    const d2 = densityInputs[`${classificationId}-2`];
+    if (!d1?.trim() || !d2?.trim()) return;
+
     try {
-      const { error } = await supabase
-        .from("comments")
-        .insert([
-          {
-            content: `${densityInput1}\n\n${densityInput2}`,
-            classification_id: classificationId,
-            author: session?.user?.id,
-            configuration: { density: `${densityInput1}, ${densityInput2}` },
-            surveyor: "TRUE",
-            value: densityInput2,
-            category: "Density",
-          },
-        ]);
-  
+      const { error } = await supabase.from("comments").insert([
+        {
+          content: `${d1}\n\n${d2}`,
+          classification_id: classificationId,
+          author: session?.user?.id,
+          configuration: { density: `${d1}, ${d2}` },
+          surveyor: "TRUE",
+          value: d2,
+          category: "Density",
+        },
+      ]);
+
       if (error) throw error;
-  
+
       setDensityInputs((prev) => ({
         ...prev,
         [`${classificationId}-1`]: "",
         [`${classificationId}-2`]: "",
       }));
-  
+
       fetchComments();
     } catch (error) {
       console.error("Error adding density comment:", error);
-    };
-  };  
-
-  // const handleSelectPreferredComment = async (commentId: number) => {
-  //   const selectedComment = comments.find((comment) => comment.id === commentId);
-  //   if (!selectedComment) return;
-
-  //   const planetType = selectedComment.configuration?.planetType;
-  //   if (!planetType) return;
-
-  //   try {
-  //     const { error } = await supabase
-  //       .from("classifications")
-  //       .update({
-  //         classificationConfiguration: {
-  //           ...classificationConfig,
-  //           classificationOptions: {
-  //             ...classificationConfig?.classificationOptions,
-  //             planetType: [...(classificationConfig?.classificationOptions?.planetType || []), planetType],
-  //           },
-  //         },
-  //       })
-  //       .eq("id", classificationId);
-
-  //     if (error) throw error;
-
-  //     console.log("Preferred planet type updated:", planetType);
-  //   } catch (error) {
-  //     console.error("Error updating preferred comment:", error);
-  //   };
-  // };
+    }
+  };
 
   return (
     <Card className="w-full max-w-2xl mx-auto my-8 bg-card text-card-foreground">
-    {commentStatus !== false && (
-      <CardContent>
-        {/* <PlanetTempCalculator /> */}
-        <div className="py-4 space-y-6">
-          {/* Planet Type Proposal */}
-          <div className="space-y-2">
-            <div className="flex space-x-2">
-              <Textarea
-                value={commentInputs[`${classificationId}-1`] || ""}
-                onChange={(e) =>
-                  setCommentInputs((prev) => ({
-                    ...prev,
-                    [`${classificationId}-1`]: e.target.value,
-                  }))
-                }
-                placeholder="Discuss planet type"
-                rows={3}
-              />
-              {/* <Textarea
-                value={commentInputs[`${classificationId}-2`] || ""}
-                onChange={(e) =>
-                  setCommentInputs((prev) => ({
-                    ...prev,
-                    [`${classificationId}-2`]: e.target.value,
-                  }))
-                }
-                placeholder="Propose a planet type (part 2)..."
-                rows={3}
-                className="w-1/2"
-              /> */}
-            </div>
-            <div className="flex space-x-2">
-              <Button onClick={() => handleProposePlanetType("Terrestrial")}>
-                Propose Terrestrial
-              </Button>
-              <Button onClick={() => handleProposePlanetType("Gaseous")}>
-                Propose Gaseous
-              </Button>
-            </div>
-          </div>
+      {commentStatus !== false && (
+        <>
+          {/* 🧮 Commenting Tools */}
+          <CardContent className="py-6 space-y-8">
 
-          {/* Temperature Proposal */}
-          <div className="space-y-2">
-            <div className="flex space-x-2">
-              <Textarea
-                value={temperatureInputs[`${classificationId}-1`] || ""}
-                onChange={(e) =>
-                  setTemperatureInputs((prev) => ({
-                    ...prev,
-                    [`${classificationId}-1`]: e.target.value,
-                  }))
-                }
-                placeholder="Discuss temperature"
-                rows={3}
-                className="w-1/2"
-              />
-              <Textarea
-                value={temperatureInputs[`${classificationId}-2`] || ""}
-                onChange={(e) =>
-                  setTemperatureInputs((prev) => ({
-                    ...prev,
-                    [`${classificationId}-2`]: e.target.value,
-                  }))
-                }
-                placeholder="Temperature value"
-                rows={3}
-                className="w-1/2"
-              />
+            {/* Planet Type Proposal */}
+            <div className="space-y-2">
+              <div className="flex gap-2">
+                <Textarea
+                  value={commentInputs[`${classificationId}-1`] || ""}
+                  onChange={(e) =>
+                    setCommentInputs((prev) => ({
+                      ...prev,
+                      [`${classificationId}-1`]: e.target.value,
+                    }))
+                  }
+                  placeholder="Discuss planet type"
+                  rows={3}
+                />
+              </div>
+              <div className="flex gap-2">
+                <Button onClick={() => handleProposePlanetType("Terrestrial")}>
+                  Propose Terrestrial
+                </Button>
+                <Button onClick={() => handleProposePlanetType("Gaseous")}>
+                  Propose Gaseous
+                </Button>
+              </div>
             </div>
-            <div className="flex space-x-2">
+
+            {/* Temperature Proposal */}
+            <div className="space-y-2">
+              <div className="flex gap-2">
+                <Textarea
+                  value={temperatureInputs[`${classificationId}-1`] || ""}
+                  onChange={(e) =>
+                    setTemperatureInputs((prev) => ({
+                      ...prev,
+                      [`${classificationId}-1`]: e.target.value,
+                    }))
+                  }
+                  placeholder="Discuss temperature"
+                  rows={3}
+                  className="w-1/2"
+                />
+                <Textarea
+                  value={temperatureInputs[`${classificationId}-2`] || ""}
+                  onChange={(e) =>
+                    setTemperatureInputs((prev) => ({
+                      ...prev,
+                      [`${classificationId}-2`]: e.target.value,
+                    }))
+                  }
+                  placeholder="Temperature value"
+                  rows={3}
+                  className="w-1/2"
+                />
+              </div>
               <Button onClick={handleAddTemperatureComment}>
                 Propose Temperature
               </Button>
             </div>
-          </div>
 
-          {/* Density */}
-          <div className="space-y-2">
-            <div className="flex space-x-2">
-              <Textarea
-                value={densityInputs[`${classificationId}-1`] || ""}
-                onChange={(e) =>
-                  setDensityInputs((prev) => ({
-                    ...prev,
-                    [`${classificationId}-1`]: e.target.value,
-                  }))
-                }
-                placeholder="Discuss density"
-                rows={3}
-                className="w-1/2"
-              />
-              <Textarea
-                value={densityInputs[`${classificationId}-2`] || ""}
-                onChange={(e) =>
-                  setDensityInputs((prev) => ({
-                    ...prev,
-                    [`${classificationId}-2`]: e.target.value,
-                  }))
-                }
-                placeholder="Density value"
-                rows={3}
-                className="w-1/2"
-              />
-            </div>
-            <div className="flex space-x-2">
+            {/* Density Proposal */}
+            <div className="space-y-2">
+              <div className="flex gap-2">
+                <Textarea
+                  value={densityInputs[`${classificationId}-1`] || ""}
+                  onChange={(e) =>
+                    setDensityInputs((prev) => ({
+                      ...prev,
+                      [`${classificationId}-1`]: e.target.value,
+                    }))
+                  }
+                  placeholder="Discuss density"
+                  rows={3}
+                  className="w-1/2"
+                />
+                <Textarea
+                  value={densityInputs[`${classificationId}-2`] || ""}
+                  onChange={(e) =>
+                    setDensityInputs((prev) => ({
+                      ...prev,
+                      [`${classificationId}-2`]: e.target.value,
+                    }))
+                  }
+                  placeholder="Density value"
+                  rows={3}
+                  className="w-1/2"
+                />
+              </div>
               <Button onClick={handleAddDensityComment}>
                 Propose Density
               </Button>
             </div>
-          </div>
-        </div>
 
-        {/* Comments Section */}
-        <div className="mt-6 space-y-2">
-          {loadingComments ? (
-            <p>Loading comments...</p>
-          ) : comments.length > 0 ? (
-            comments.map((comment) => (
-              <CommentCard
-                key={comment.id}
-                id={comment.id}
-                author={comment.author}
-                category={comment.category}
-                content={comment.content}
-                value={comment.value}
-                createdAt={comment.created_at}
-                replyCount={0}
-                isSurveyor={comment.isSurveyor}
-                configuration={comment.configuration}
-                classificationId={classificationId}
-                classificationConfig={classificationConfig}
-              />
-            ))
-          ) : (
-            <p>No comments yet. Be the first to comment!</p>
-          )}
-        </div>
-      </CardContent>
-    )}
-  </Card>
-  );
-};
+          </CardContent>
 
-                      // <div className="flex justify-between items-center">
-                      //   <p className="text-xs text-gray-600">
-                      //     {comment.configuration?.planetType || "Unknown"}
-                      //   </p>
-                      //   {/* {author === session?.user?.id && (
-                      //     <button
-                      //       onClick={() => handleSelectPreferredComment(comment.id)}
-                      //       className="text-blue-500 mt-2"
-                      //     >
-                      //       Mark as Preferred
-                      //     </button>
-                      //   )} */}
-                      //   {author === session?.user?.id && comment.configuration && (
-                      //     <button
-                      //       onClick={() => handleConfirmComment(comment)}
-                      //       className="text-green-500 mt-2"
-                      //     >
-                      //       Confirm
-                      //     </button>
-                      //   )}
-                      // </div>
\ No newline at end of file
+          {/* 💬 Comments Section */}
+          <CardFooter className="flex flex-col items-start gap-4 pt-4 border-t">
+            {loadingComments ? (
+              <p>Loading comments...</p>
+            ) : comments.length > 0 ? (
+              comments.map((comment) => (
+                <CommentCard
+                  key={comment.id}
+                  id={comment.id}
+                  author={comment.author}
+                  category={comment.category}
+                  content={comment.content}
+                  value={comment.value}
+                  createdAt={comment.created_at}
+                  replyCount={0}
+                  isSurveyor={comment.isSurveyor}
+                  configuration={comment.configuration}
+                  classificationId={classificationId}
+                  classificationConfig={classificationConfig}
+                />
+              ))
+            ) : (
+              <p>No comments yet. Be the first to comment!</p>
+            )}
+          </CardFooter>
+        </>
+      )}
+    </Card>
+  );
+};
\ No newline at end of file
diff --git a/content/Posts/TestPostCard.tsx b/content/Posts/TestPostCard.tsx
index ef30bb907..947ff3105 100644
--- a/content/Posts/TestPostCard.tsx
+++ b/content/Posts/TestPostCard.tsx
@@ -2,402 +2,431 @@
 
 import React, { useEffect, useRef, useState } from "react"
 import Image from "next/image"
-import { Calculator, ChevronDown, MessageSquare, Send, Share2, ThumbsUp, X } from "lucide-react"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import {
+  Calculator,
+  ChevronDown,
+  MessageSquare,
+  Send,
+  Share2,
+  ThumbsUp,
+  X,
+} from "lucide-react"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
-import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from "@/components/ui/card"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/components/ui/tabs"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
 import { Input } from "@/components/ui/input"
 import { Textarea } from "@/components/ui/textarea"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
 import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react"
 import html2canvas from "html2canvas"
 import { AvatarGenerator } from "@/components/Account/Avatar"
 import { PostCardSingleProps, CommentProps } from "./PostSingle"
-import SurveyorCalculator from "./Surveyor/CalculatorSurveyor"
+import SurveyorCalculator from "./Surveyor/CalculatorSurveyor";
 
 export default function PostCard({
-    classificationId,
-    title,
-    author,
-    content,
-    votes,
-    category,
-    tags,
-    anomalyId,
-    classificationConfig,
-    images,
-    classificationType,
-    commentStatus,
-    onVote,
+  classificationId,
+  title,
+  author,
+  content,
+  votes,
+  category,
+  tags,
+  anomalyId,
+  classificationConfig,
+  images,
+  classificationType,
+  commentStatus,
+  onVote,
 }: PostCardSingleProps) {
-    const supabase = useSupabaseClient();
-    const session = useSession();
-
-    // Post content
-    const [comments, setComments] = useState<CommentProps[]>([]);
-    const [newComment, setNewComment] = useState<string>("");
-
-    const [voteCount, setVoteCount] = useState(votes);
-    const [isSharing, setIsSharing] = useState<boolean>(false);
-    const shareCardRef = useRef<HTMLDivElement>(null);
-
-    const [isLightboxOpen, setIsLightboxOpen] = useState(false)
-    const [isCommentsOpen, setIsCommentsOpen] = useState(false);
-
-    const [loading, setLoading] = useState<boolean>(true);
-    const [error, setError] = useState<string | null>();
-
-    const fetchComments = async () => {
-      setLoading(true);
-      try {
-        const { data: commentsData, error: commentsError } = await supabase
-          .from("comments")
-          .select("id, content, created_at, author, classification_id")
-          .eq("classification_id", classificationId)
-          .order("created_at", { ascending: false });
-
-        if (commentsError) throw commentsError;
-
-        // Fetch usernames from profiles
-        const authorIds = [...new Set(commentsData.map((c) => c.author))];
-        const { data: profilesData, error: profilesError } = await supabase
-          .from("profiles")
-          .select("id, username")
-          .in("id", authorIds);
-
-        if (profilesError) throw profilesError;
-
-        // Map usernames to comments
-        const profileMap = Object.fromEntries(profilesData.map((p) => [p.id, p.username]));
-        const enrichedComments = commentsData.map((comment) => ({
-          ...comment,
-          username: profileMap[comment.author] || "Unknown",
-        }));
-
-        setComments(enrichedComments);
-      } catch (error: any) {
-        setError("Error fetching comments.");
-        console.error(error);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    const handleVoteClick = async () => {
-        if (!session) {
-            return;
-        };
-
-        try {
-            const { error } = await supabase
-                .from("votes")
-                .insert([
-                    {
-                        user_id: session.user.id,
-                        classification_id: classificationId,
-                        anomaly_id: anomalyId,
-                    },
-                ]);
-
-            if (error) {
-                console.error("Error inserting vote: ", error);
-                return;
-            };
-
-            setVoteCount((prev) => prev + 1);
-        } catch (error: any) {
-            console.error("Error handling vote: ", error);
-        };
-
-        if (onVote) onVote();
+  const supabase = useSupabaseClient()
+  const session = useSession()
+
+  const [comments, setComments] = useState<CommentProps[]>([])
+  const [newComment, setNewComment] = useState("")
+  const [voteCount, setVoteCount] = useState(votes)
+  const [isSharing, setIsSharing] = useState(false)
+  const [isLightboxOpen, setIsLightboxOpen] = useState(false)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const shareCardRef = useRef<HTMLDivElement>(null)
+  const [currentIndex, setCurrentIndex] = useState(0)
+
+  const fetchComments = async () => {
+    setLoading(true)
+    try {
+      const { data: commentsData, error: commentsError } = await supabase
+        .from("comments")
+        .select("id, content, created_at, author, classification_id")
+        .eq("classification_id", classificationId)
+        .order("created_at", { ascending: false })
+
+      if (commentsError) throw commentsError
+
+      const authorIds = [...new Set(commentsData.map((c) => c.author))]
+      const { data: profilesData, error: profilesError } = await supabase
+        .from("profiles")
+        .select("id, username")
+        .in("id", authorIds)
+
+      if (profilesError) throw profilesError
+
+      const profileMap = Object.fromEntries(
+        profilesData.map((p) => [p.id, p.username])
+      )
+      const enrichedComments = commentsData.map((comment) => ({
+        ...comment,
+        username: profileMap[comment.author] || "Unknown",
+      }))
+
+      setComments(enrichedComments)
+    } catch (error: any) {
+      console.error(error)
+      setError("Error fetching comments.")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    fetchComments()
+  }, [])
+
+  const handleVoteClick = async () => {
+    if (!session) return
+
+    try {
+      const { error } = await supabase.from("votes").insert([
+        {
+          user_id: session.user.id,
+          classification_id: classificationId,
+          anomaly_id: anomalyId,
+        },
+      ])
+
+      if (error) throw error
+      setVoteCount((prev) => prev + 1)
+      if (onVote) onVote()
+    } catch (error: any) {
+      console.error("Error voting:", error)
+    }
+  }
+
+  const handleAddComment = async () => {
+    if (!newComment.trim()) return
+    try {
+      const { error } = await supabase.from("comments").insert([
+        {
+          content: newComment,
+          classification_id: classificationId,
+          author: session?.user.id,
+        },
+      ])
+      if (error) throw error
+      setNewComment("")
+      fetchComments()
+    } catch (error: any) {
+      console.error("Error adding comment:", error)
     };
-
-    useEffect(() => {
-      fetchComments();
-    }, []);
-
-    const handleAddComment = async () => {
-        if (!newComment.trim()) {
-            return;
-        };
-
-        try {
-            const { error } = await supabase
-                .from("comments")
-                .insert([
-                    {
-                        content: newComment,
-                        classification_id: classificationId,
-                        author: session?.user.id,
-                    },
-                ]);
-
-            if (error) {
-                throw error
-            };
-
-            setNewComment("");
-            fetchComments();
-        } catch (error: any) {
-            console.error("Error adding comment: ", error);
-        };
-    };
-
-    const [currentIndex, setCurrentIndex] = React.useState(0);
-
-    // For sharing
-    const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);
-    const dropdownRef = useRef<HTMLDivElement | null>(null);
-
-    const toggleDropdown = () => {
-        setDropdownOpen((prev) => !prev);
-    };
-
-    const handleCopyLink = () => {
-        const link = `https://starsailors.space/posts/${classificationId}`;
-        navigator.clipboard.writeText(link).then(() => {
-            alert("Link to post copied to clipboard!");
-        });
-    };
-
-    const openPostInNewTab = () => {
-        window.open(`/posts/${classificationId}`, "_blank");
-    };
-
-    const handleShare = async () => {
-        if (!shareCardRef.current) {
-            return;
-        };
-
-        setIsSharing(true);
-        const safeTitle = title || 'Classification';
-
-        // Ensure all images in the classification are loaded
-        const images = Array.from(shareCardRef.current.querySelectorAll('img'));
-        const imagePromises = images.map((img: HTMLImageElement) =>
-            new Promise<void>(( resolve, reject ) => {
-                if (img.complete) {
-                    resolve();
-                } else {
-                    img.onload = () => resolve();
-                    img.onerror = () => reject(new Error("Image failed to load."));
-                };
-            })
-        );
-
-        try {
-            await Promise.all(imagePromises);
-
-            const canvas = await html2canvas(shareCardRef.current, {
-                useCORS: true,
-                scrollX: 0,
-                scrollY: -window.scrollY,
-            });
-
-            canvas.toBlob(
-                (blob) => {
-                    if (blob) {
-                        const link = document.createElement("a");
-                        link.href = URL.createObjectURL(blob);
-                        link.download = `${safeTitle.toLowerCase().replace(/\s+/g, "-")}-share.png`;
-                        link.click();
-                    }
-                },
-                'image/png',
-                1.0
-            );
-        } catch (error: any) {
-            console.error("Error sharing post: ", error);
-        } finally {
-            setIsSharing(false);
-        };
-    };
-  
-    return (
-        <div className="bg-[#9d22bf]" ref={shareCardRef}>
-            <Card className="w-full overflow-hidden border-2 border-[#5FCBC3]/30 bg-[#hhhhhh]">
-              <div className="bg-[#9d22bf] p-4">
-                <CardHeader className="flex flex-row items-center gap-3 p-4 border-b border-[#5FCBC3]/20">
-                    {session && <AvatarGenerator author={session?.user?.id} />}
-                    <div className="flex flex-col">
-                        <p className="text-sm font-medium text-[#F7F5E9]">{session?.user.id}</p>
-                        <p className="text-xs text-[#B9E678]">{classificationType.toUpperCase()} Classification</p>
-                    </div>
-                </CardHeader>
-                <CardContent className="p-0">
-                    <div
-                        className="relative aspect-[16/9] overflow-hidden bg-[#1e2834] cursor-pointer"
-                        onClick={() => setIsLightboxOpen(true)}
+  };
+
+  const goToNextImage = () =>
+    setCurrentIndex((prev) => (prev + 1) % images.length)
+  const goToPreviousImage = () =>
+    setCurrentIndex((prev) =>
+      prev === 0 ? images.length - 1 : prev - 1
+    )
+
+  const handleShare = async () => {
+    if (!shareCardRef.current) return
+
+    setIsSharing(true)
+    const safeTitle = title || "Classification"
+
+    const imgs = Array.from(
+      shareCardRef.current.querySelectorAll("img")
+    )
+
+    const loadPromises = imgs.map(
+      (img: HTMLImageElement) =>
+        new Promise<void>((resolve, reject) => {
+          if (img.complete) return resolve()
+          img.onload = () => resolve()
+          img.onerror = () =>
+            reject(new Error("Image failed to load"))
+        })
+    )
+
+    try {
+      await Promise.all(loadPromises)
+
+      const canvas = await html2canvas(shareCardRef.current, {
+        useCORS: true,
+        scrollX: 0,
+        scrollY: -window.scrollY,
+      })
+
+      canvas.toBlob((blob) => {
+        if (blob) {
+          const link = document.createElement("a")
+          link.href = URL.createObjectURL(blob)
+          link.download = `${safeTitle
+            .toLowerCase()
+            .replace(/\s+/g, "-")}-share.png`
+          link.click()
+        }
+      }, "image/png")
+    } catch (err) {
+      console.error("Error sharing post:", err)
+    } finally {
+      setIsSharing(false)
+    }
+  }
+
+  return (
+    <div
+      className="flex items-center justify-center w-full px-4 overflow-hidden"
+      ref={shareCardRef}
+    >
+      <Card className="w-full max-w-4xl md:w-4/5 max-h-screen bg-white border border-[#D8DEE9] shadow-2xl rounded-xl overflow-y-auto">
+        <CardHeader className="flex flex-row items-center gap-3 p-4 border-b border-gray-200 bg-gray-50">
+          {session && <AvatarGenerator author={session.user.id} />}
+          <div className="flex flex-col">
+            <p className="text-sm font-medium text-gray-800">
+              {session?.user.id}
+            </p>
+            <p className="text-xs text-green-600">
+              {classificationType.toUpperCase()} Classification
+            </p>
+          </div>
+        </CardHeader>
+
+        <CardContent className="p-0">
+          <div
+            className="relative overflow-hidden bg-white cursor-pointer"
+            onClick={() => setIsLightboxOpen(true)}
+          >
+            {images.length > 0 && (
+              <div className="relative">
+                <img
+                  src={images[currentIndex]}
+                  alt={`Image ${currentIndex + 1}`}
+                  className="w-full max-h-[250px] object-contain cursor-pointer rounded-lg transition-all duration-200"
+                />
+                {images.length > 1 && (
+                  <>
+                    <button
+                      onClick={goToPreviousImage}
+                      className="absolute top-1/2 left-4 transform -translate-y-1/2 bg-[#4C566A]/60 text-white rounded-full p-2"
                     >
-                        {images.length > 0 && (
-                            <>
-                                <Image
-                                    src={images[currentIndex]}
-                                    alt={`Image ${currentIndex + 1}`}
-                                    fill
-                                    className="object-cover hover:scale-105 transition-transform duration-300"
-                                    sizes='100vw'
-                                />
-                            </>
-                        )}
-                    </div>
-                    <div className="p-4 space-y-2 bg-gradient-to-b from-[#2C3A4A] to-[#1e2834]">
-                        <p className="text-sm text-[#F7F5E9]">
-                            {content}
-                        </p>
-                    </div>
-                </CardContent>
-                <CardFooter className="p-3 pt-0 flex justify-between">
-                <Button variant="ghost" size="sm" className="text-[#F7F5E9] hover:text-[#B9E678] hover:bg-[#1e2834]">
-                    <ThumbsUp className="h-4 w-4 mr-2" />
-                    <span className="text-xs">{votes}</span>
-                </Button>
-        
-                <Button
-                    variant="ghost"
-                    size="sm"
-                    className="text-[#F7F5E9] hover:text-[#B9E678] hover:bg-[#1e2834]"
-                    onClick={() => setIsCommentsOpen(!isCommentsOpen)}
-                >
-                    <MessageSquare className="h-4 w-4 mr-2" />
-                    <span className="text-xs">{comments.length}</span>
-                    <ChevronDown className={`h-3 w-3 ml-1 transition-transform ${isCommentsOpen ? "rotate-180" : ""}`} />
-                </Button>
-        
-                <Popover>
-                    <PopoverTrigger asChild>
-                    <Button
-                        size="sm"
-                        disabled={isSharing}
-                        variant="outline"
-                        className="flex items-center gap-2 bg-[#2C3A4A] border-[#5FCBC3]/30 text-[#F7F5E9] hover:bg-[#1e2834]"
+                      &#8592;
+                    </button>
+                    <button
+                      onClick={goToNextImage}
+                      className="absolute top-1/2 right-4 transform -translate-y-1/2 bg-[#4C566A]/60 text-white rounded-full p-2"
                     >
-                        <Share2 className="h-4 w-4" />
-                        {isSharing ? "Sharing..." : "Share"}
-                    </Button>
-                    </PopoverTrigger>
-                    <PopoverContent className="w-60 bg-[#2C3A4A] border-[#5FCBC3]/30 text-[#F7F5E9]">
-                    <div className="space-y-2">
-                        <h4 className="font-medium text-sm">Share this post</h4>
-                        <div className="flex flex-col gap-2">
-                        <Button
-                            variant="outline"
-                            size="sm"
-                            className="justify-start bg-[#2C3A4A] text-[#F7F5E9] border-[#5FCBC3]/30 hover:bg-[#1e2834]"
-                        >
-                            Copy Link
-                        </Button>
-                        <Button
-                            variant="outline"
-                            size="sm"
-                            className="justify-start bg-[#2C3A4A] text-[#F7F5E9] border-[#5FCBC3]/30 hover:bg-[#1e2834]"
-                        >
-                            Share to Research Network
-                        </Button>
-                        <Button
-                            variant="outline"
-                            size="sm"
-                            onClick={handleShare}
-                            disabled={isSharing}
-                            className="justify-start bg-[#2C3A4A] text-[#F7F5E9] border-[#5FCBC3]/30 hover:bg-[#1e2834]"
-                        >
-                            Export Citation
-                        </Button>
-                        </div>
+                      &#8594;
+                    </button>
+                    <div className="absolute bottom-2 left-1/2 transform -translate-x-1/2 flex space-x-2">
+                      {images.map((_, index) => (
+                        <button
+                          key={index}
+                          onClick={() => setCurrentIndex(index)}
+                          className={`h-2 w-2 rounded-full transition ${
+                            currentIndex === index
+                              ? "bg-[#5E81AC]"
+                              : "bg-[#D8DEE9]"
+                          }`}
+                        />
+                      ))}
                     </div>
-                    </PopoverContent>
-                </Popover>
-                </CardFooter>
-      {isCommentsOpen && (
-        <div className="border-t border-[#5FCBC3]/20 bg-[#1e2834]/50">
-          <Tabs defaultValue="comments" className="w-full">
-            <TabsList className="grid w-full grid-cols-3 bg-[#1e2834] rounded-none border-b border-[#5FCBC3]/20">
-              <TabsTrigger
-                value="comments"
-                className="data-[state=active]:bg-[#5FCBC3] data-[state=active]:text-[#2C3A4A] text-[#F7F5E9]"
-              >
-                Comments & Stats
-              </TabsTrigger>
-              {classificationType === 'planet' && (
-                <TabsTrigger
-                value="calculator"
-                className="data-[state=active]:bg-[#5FCBC3] data-[state=active]:text-[#2C3A4A] text-[#F7F5E9]"
+                  </>
+                )}
+              </div>
+            )}
+          </div>
+          <div className="p-4 space-y-2 bg-gradient-to-b from-gray-50 to-white">
+            <p className="text-sm text-gray-800">{content}</p>
+          </div>
+        </CardContent>
+
+        <CardFooter className="p-3 pt-0 flex justify-between">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleVoteClick}
+            className="text-gray-700 hover:text-green-600 hover:bg-gray-100"
+          >
+            <ThumbsUp className="h-4 w-4 mr-2" />
+            <span className="text-xs">{voteCount}</span>
+          </Button>
+
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button
+                size="sm"
+                disabled={isSharing}
+                variant="outline"
+                className="flex items-center gap-2 bg-white border-gray-300 text-gray-800 hover:bg-gray-100"
               >
-                Calculate Stats
-              </TabsTrigger>
-              )}
-            </TabsList>
-
-            <TabsContent value="comments" className="p-4 space-y-4">
-                        <div className="p-4 space-y-4">
-                {loading ? (
-                  <p>Loading comments...</p>
-                ) : error ? ( 
-                  <p className="text-red-500">{error}</p>
-                ) : comments.length === 0 ? (
-                  <p>No comments yet. Be the first to comment!</p>
-                ) : (
-                  comments.map((comment) => (
-                    <div key={comment.id} className="flex gap-3">
-                      <Avatar className="h-8 w-8 border border-[#B9E678]">
-                        <AvatarFallback className="bg-[#1e2834] text-[#F7F5E9] text-xs">
-                          {comment.username ? comment.username[0].toUpperCase() : "U"}
-                        </AvatarFallback>
-                      </Avatar>
-                      <div className="flex-1">
-                        <div className="flex items-center justify-between">
-                          <p className="text-sm font-medium text-[#F7F5E9]">{comment.username}</p>
-                          <span className="text-xs text-[#F7F5E9]/70">
-                            {/* {formatDistanceToNow(new Date(comment.created_at), { addSuffix: true })} */}
-                          </span>
-                        </div>
-                        <p className="text-sm text-[#F7F5E9] mt-1">{comment.content}</p>
+                <Share2 className="h-4 w-4" />
+                {isSharing ? "Sharing..." : "Share"}
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-60 bg-white border-gray-300 text-gray-800">
+              <div className="space-y-2">
+                <h4 className="font-medium text-sm">Share this post</h4>
+                <div className="flex flex-col gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="justify-start bg-white text-gray-800 border-gray-300 hover:bg-gray-100"
+                    onClick={() =>
+                      navigator.clipboard.writeText(
+                        `https://starsailors.space/posts/${classificationId}`
+                      )
+                    }
+                  >
+                    Copy Link
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="justify-start bg-white text-gray-800 border-gray-300 hover:bg-gray-100"
+                  >
+                    Share to Research Network
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleShare}
+                    disabled={isSharing}
+                    className="justify-start bg-white text-gray-800 border-gray-300 hover:bg-gray-100"
+                  >
+                    Export Citation
+                  </Button>
+                </div>
+              </div>
+            </PopoverContent>
+          </Popover>
+        </CardFooter>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 p-4 border-t border-gray-200 bg-white">
+          <div>
+            <h3 className="text-sm font-semibold text-gray-700 mb-2">Comments</h3>
+            {loading ? (
+              <p className="text-gray-600">Loading comments...</p>
+            ) : error ? (
+              <p className="text-red-500">{error}</p>
+            ) : comments.length === 0 ? (
+              <p className="text-gray-500">No comments yet. Be the first to comment!</p>
+            ) : (
+              <div className="space-y-4">
+                {comments.map((comment) => (
+                  <div key={comment.id} className="flex gap-3">
+                    <Avatar className="h-8 w-8 border border-green-500">
+                      <AvatarFallback className="bg-white text-gray-800 text-xs">
+                        {comment.username
+                          ? comment.username[0].toUpperCase()
+                          : "U"}
+                      </AvatarFallback>
+                    </Avatar>
+                    <div className="flex-1">
+                      <div className="flex items-center justify-between">
+                        <p className="text-sm font-medium text-gray-800">
+                          {comment.username}
+                        </p>
                       </div>
+                      <p className="text-sm text-gray-700 mt-1">{comment.content}</p>
                     </div>
-                  ))
-                )}
-                </div>
-            </TabsContent>
-            <TabsContent value="calculator" className="p-4 space-y-4">
+                  </div>
+                ))}
+              </div>
+            )}
+            {session && (
+              <div className="flex flex-col gap-2 pt-4">
+                <Textarea
+                  value={newComment}
+                  onChange={(e) => setNewComment(e.target.value)}
+                  placeholder="Add a comment..."
+                />
+                <Button size="sm" onClick={handleAddComment} className="self-end">
+                  <Send className="h-4 w-4 mr-1" />
+                  Post
+                </Button>
+              </div>
+            )}
+          </div>
+
+          {classificationType === "planet" && (
+            <div>
+              <h3 className="text-sm font-semibold text-gray-700 mb-2">Surveyor Tools</h3>
               <SurveyorCalculator classificationId={classificationId.toString()} />
-            </TabsContent>
-          </Tabs>
+            </div>
+          )}
         </div>
-      )}
 
-      {/* Image Lightbox */}
-      <Dialog open={isLightboxOpen} onOpenChange={setIsLightboxOpen}>
-        <DialogContent className="max-w-4xl bg-[#2C3A4A] border-[#5FCBC3]/30 text-[#F7F5E9]">
-          <DialogHeader className="flex flex-row justify-between items-center">
-            <DialogTitle className="text-[#F7F5E9]">{content} by {session?.user.id}</DialogTitle>
-            <Button
-              variant="ghost"
-              size="icon"
-              onClick={() => setIsLightboxOpen(false)}
-              className="text-[#F7F5E9] hover:text-[#B9E678] hover:bg-[#1e2834]"
-            >
-              <X className="h-4 w-4" />
-            </Button>
-          </DialogHeader>
-          <div className="relative aspect-video w-full">
-            <Image
-              src={images[currentIndex]}
-              alt=""
-              fill
-              className="object-contain"
-              sizes="(max-width: 1200px) 100vw, 1200px"
-            />
-          </div>
-          <div className="text-sm text-[#F7F5E9]">
-            <p className="font-medium">{content}</p>
-          </div>
-        </DialogContent>
-      </Dialog>
-      </div>
-    </Card>
+        <Dialog open={isLightboxOpen} onOpenChange={setIsLightboxOpen}>
+          <DialogContent className="max-w-4xl bg-white border-gray-300 text-gray-800">
+            <DialogHeader className="flex flex-row justify-between items-center">
+              <DialogTitle className="text-gray-800">
+                {content} by {session?.user.id}
+              </DialogTitle>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => setIsLightboxOpen(false)}
+                className="text-gray-800 hover:text-green-600 hover:bg-gray-100"
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </DialogHeader>
+            <div className="relative aspect-video w-full">
+              <Image
+                src={images[currentIndex]}
+                alt=""
+                fill
+                className="object-contain"
+                sizes="(max-width: 1200px) 100vw, 1200px"
+              />
+            </div>
+            <div className="text-sm text-gray-800">
+              <p className="font-medium">{content}</p>
+            </div>
+          </DialogContent>
+        </Dialog>
+      </Card>
     </div>
-  );
-};
\ No newline at end of file
+  )
+}
\ No newline at end of file
diff --git a/data/missions.tsx b/data/missions.tsx
new file mode 100644
index 000000000..97d601a32
--- /dev/null
+++ b/data/missions.tsx
@@ -0,0 +1,177 @@
+import type { Mission } from "@/types/Structures/telescope"
+import { Sparkles, Sun, Rocket, Award } from "lucide-react"
+
+// Telescope missions
+export const missions: Mission[] = [
+  {
+    id: "mission-1",
+    // title: "First Light",
+    description: "Classify your first exoplanet candidate",
+    project: "planet-hunters",
+    reward: "100 XP",
+    // difficulty: "easy",
+    completed: true,
+    target: undefined,
+    name: "",
+    progress: 0
+  },
+  {
+    id: "mission-2",
+    // title: "Solar Observer",
+    description: "Classify 5 sunspots in a single session",
+    project: "sunspots",
+    reward: "250 XP",
+    // difficulty: "medium",
+    completed: false,
+    target: undefined,
+    name: "",
+    progress: 0
+  },
+  {
+    id: "mission-3",
+    // title: "Asteroid Hunter",
+    description: "Find an asteroid with unusual trajectory",
+    project: "daily-minor-planet",
+    reward: "300 XP + Badge",
+    // difficulty: "hard",
+    completed: false,
+    target: undefined,
+    name: "",
+    progress: 0
+  },
+  {
+    id: "mission-4",
+    // title: "Disc Jockey",
+    description: "Classify 3 accretion discs",
+    project: "disk-detective",
+    reward: "200 XP",
+    // difficulty: "medium",
+    completed: false,
+    target: undefined,
+    name: "",
+    progress: 0
+  },
+  {
+    id: "mission-5",
+    // title: "Exoplanet Explorer",
+    description: "Classify exoplanets in 3 different sectors",
+    project: "planet-hunters",
+    reward: "350 XP",
+    // difficulty: "hard",
+    completed: false,
+    target: undefined,
+    name: "",
+    progress: 0
+  },
+  {
+    id: "mission-6",
+    // title: "Solar Cartographer",
+    description: "Create a map of sunspot activity",
+    project: "sunspots",
+    reward: "200 XP",
+    // difficulty: "medium",
+    completed: false,
+    target: undefined,
+    name: "",
+    progress: 0
+  },
+]
+
+// Base anomalies with just essential properties
+export const baseAnomalies: { [key: string]: Array<{ id: string; name: string; type: string; project: string }> } = {
+  "planet-hunters": Array.from({ length: 20 }, (_, i) => ({
+    id: `exoplanet-${i + 1}`,
+    name: `EXOPLANET-${String(i + 1).padStart(3, "0")}`,
+    type: "exoplanet",
+    project: "planet-hunters",
+  })),
+  sunspots: Array.from({ length: 20 }, (_, i) => ({
+    id: `sunspot-${i + 1}`,
+    name: `SUNSPOT-${String(i + 1).padStart(3, "0")}`,
+    type: "sunspot",
+    project: "sunspots",
+  })),
+  "daily-minor-planet": Array.from({ length: 20 }, (_, i) => ({
+    id: `asteroid-${i + 1}`,
+    name: `ASTEROID-${String(i + 1).padStart(3, "0")}`,
+    type: "asteroid",
+    project: "daily-minor-planet",
+  })),
+  "disk-detective": Array.from({ length: 20 }, (_, i) => ({
+    id: `accretion_disc-${i + 1}`,
+    name: `ACCRETION_DISC-${String(i + 1).padStart(3, "0")}`,
+    type: "accretion_disc",
+    project: "disk-detective",
+  })),
+};
+
+
+// Rover-seiscam (automaton) missions
+import { Mountain, Wind, Gem, Target, Search, MapPin, Zap } from "lucide-react";
+import type { RoverMission } from "@/types/Structures/Rover";
+
+export const roverMissions = [
+  // SeisCAM Geological Survey Missions
+  {
+    id: "geological-survey-1",
+    title: "Surface Rock Analysis",
+    description: "Collect and analyze 5 different rock formation samples",
+    project: "geological-survey",
+    icon: <Mountain className="h-4 w-4" />,
+    difficulty: "easy" as const,
+    reward: "50 Credits",
+    completed: false,
+  },
+  {
+    id: "geological-survey-2",
+    title: "Crater Investigation",
+    description: "Map geological features around impact craters",
+    project: "geological-survey",
+    icon: <Search className="h-4 w-4" />,
+    difficulty: "medium" as const,
+    reward: "100 Credits",
+    completed: false,
+  },
+  {
+    id: "geological-survey-3",
+    title: "Terrain Mapping",
+    description: "Create detailed topographical maps of unexplored regions",
+    project: "geological-survey",
+    icon: <Mountain className="h-4 w-4" />,
+    difficulty: "hard" as const,
+    reward: "200 Credits",
+    completed: false,
+  },
+
+  // SeisCAM Mineral Analysis Missions
+  {
+    id: "mineral-analysis-1",
+    title: "Rare Earth Detection",
+    description: "Locate and identify rare earth mineral deposits",
+    project: "mineral-analysis",
+    icon: <Gem className="h-4 w-4" />,
+    difficulty: "easy" as const,
+    reward: "75 Credits",
+    completed: false,
+  },
+  {
+    id: "mineral-analysis-2",
+    title: "Subsurface Scanning",
+    description: "Use seismic analysis to detect underground mineral veins",
+    project: "mineral-analysis",
+    icon: <Zap className="h-4 w-4" />,
+    difficulty: "medium" as const,
+    reward: "150 Credits",
+    completed: false,
+  },
+  {
+    id: "mineral-analysis-3",
+    title: "Composition Analysis",
+    description: "Perform detailed spectral analysis of mineral samples",
+    project: "mineral-analysis",
+    icon: <Gem className="h-4 w-4" />,
+    difficulty: "hard" as const,
+    reward: "250 Credits",
+    completed: false,
+  },
+];
\ No newline at end of file
diff --git a/data/projects.tsx b/data/projects.tsx
new file mode 100644
index 000000000..cee27840c
--- /dev/null
+++ b/data/projects.tsx
@@ -0,0 +1,74 @@
+import type { Project } from "@/types/Structures/telescope"
+import { SpaceIcon as Planet, Sun, Asterisk, Disc } from "lucide-react"
+
+// Telescope/space projects
+export const projects: Project[] = [
+  {
+    id: "planet-hunters",
+    name: "Planet Hunters",
+    description: "Search for exoplanet candidates in stellar light curves",
+    anomalyType: "exoplanet",
+    completed: 23,
+    total: 50,
+    icon: <Planet className="h-5 w-5" />,
+    color: "from-[#EBCB8B] to-[#D08770]",
+    bgGradient: "linear-gradient(135deg, #EBCB8B, #D08770)",
+  },
+  {
+    id: "sunspots",
+    name: "Sunspots",
+    description: "Identify and classify solar surface features",
+    anomalyType: "sunspot",
+    completed: 45,
+    total: 60,
+    icon: <Sun className="h-5 w-5" />,
+    color: "from-[#D08770] to-[#BF616A]",
+    bgGradient: "linear-gradient(135deg, #D08770, #BF616A)",
+  },
+  {
+    id: "daily-minor-planet",
+    name: "Daily Minor Planet",
+    description: "Track and catalog asteroid movements",
+    anomalyType: "asteroid",
+    completed: 12,
+    total: 30,
+    icon: <Asterisk className="h-5 w-5" />,
+    color: "from-[#B48EAD] to-[#81A1C1]",
+    bgGradient: "linear-gradient(135deg, #B48EAD, #81A1C1)",
+  },
+  {
+    id: "disk-detective",
+    name: "DiskDetective",
+    description: "Discover early solar systems and accretion discs",
+    anomalyType: "accretion_disc",
+    completed: 8,
+    total: 25,
+    icon: <Disc className="h-5 w-5" />,
+    color: "from-[#88C0D0] to-[#5E81AC]",
+    bgGradient: "linear-gradient(135deg, #88C0D0, #5E81AC)",
+  },
+];
+
+// Rover/surface exploration projects
+import { Mountain, Gem } from "lucide-react"
+
+export const roverProjects = [
+  {
+    id: "geological-survey",
+    name: "SeisCAM Geological Survey",
+    description: "Analyze rock formations and geological structures on planetary surfaces",
+    icon: <Mountain className="h-4 w-4" />,
+    bgGradient: "linear-gradient(135deg, #8D6E63 0%, #5D4037 100%)",
+    color: "#8D6E63",
+    anomalyTypes: ["rock_formation", "geological_feature"],
+  },
+  {
+    id: "mineral-analysis",
+    name: "SeisCAM Mineral Analysis",
+    description: "Identify and catalog mineral deposits and rare earth elements",
+    icon: <Gem className="h-4 w-4" />,
+    bgGradient: "linear-gradient(135deg, #7E57C2 0%, #512DA8 100%)",
+    color: "#7E57C2",
+    anomalyTypes: ["mineral_deposit", "dust_storm"],
+  },
+]
\ No newline at end of file
diff --git a/data/roverList.tsx b/data/roverList.tsx
new file mode 100644
index 000000000..37ea2d854
--- /dev/null
+++ b/data/roverList.tsx
@@ -0,0 +1,94 @@
+import type { Rover } from "@/types/Structures/Rover";
+
+export const rovers: Rover[] = [
+  {
+    id: "curiosity-mars",
+    name: "Curiosity", 
+    planet: "mars",
+    x: 45,
+    y: 60,
+    batteryLevel: 78,
+    status: "active",
+    temperature: "-60°C",
+    signalStrength: 85,
+    anomalyCount: 142,
+    description: "Primary geological survey rover on Mars",
+    missionDuration: "4,127 sols",
+    distanceTraveled: "29.78 km",
+  },
+  {
+    id: "perseverance-mars",
+    name: "Perseverance",
+    planet: "mars",
+    x: 75,
+    y: 35,
+    batteryLevel: 92,
+    status: "active",
+    temperature: "-65°C",
+    signalStrength: 91,
+    anomalyCount: 89,
+    description: "Advanced sample collection and analysis rover",
+    missionDuration: "1,245 sols",
+    distanceTraveled: "24.63 km",
+  },
+  {
+    id: "opportunity-mars",
+    name: "Opportunity",
+    planet: "mars",
+    x: 25,
+    y: 80,
+    batteryLevel: 0,
+    status: "offline",
+    temperature: "-70°C",
+    signalStrength: 0,
+    anomalyCount: 287,
+    description: "Legendary long-duration exploration rover (completed mission)",
+    missionDuration: "5,352 sols",
+    distanceTraveled: "45.16 km",
+  },
+  {
+    id: "europa-scout",
+    name: "Europa Scout",
+    planet: "europa",
+    x: 60,
+    y: 40,
+    batteryLevel: 67,
+    status: "active",
+    temperature: "-180°C",
+    signalStrength: 42,
+    anomalyCount: 34,
+    description: "Ice drilling and subsurface exploration rover",
+    missionDuration: "234 sols",
+    distanceTraveled: "8.45 km",
+  },
+  {
+    id: "titan-explorer",
+    name: "Titan Explorer",
+    planet: "titan",
+    x: 80,
+    y: 25,
+    batteryLevel: 56,
+    status: "standby",
+    temperature: "-179°C",
+    signalStrength: 23,
+    anomalyCount: 67,
+    description: "Methane lake and hydrocarbon analysis rover",
+    missionDuration: "156 sols",
+    distanceTraveled: "12.34 km",
+  },
+  {
+    id: "luna-ranger",
+    name: "Luna Ranger",
+    planet: "moon",
+    x: 40,
+    y: 55,
+    batteryLevel: 84,
+    status: "active",
+    temperature: "-230°C",
+    signalStrength: 95,
+    anomalyCount: 98,
+    description: "Lunar regolith and crater analysis rover",
+    missionDuration: "89 sols",
+    distanceTraveled: "15.67 km",
+  },
+];
\ No newline at end of file
diff --git a/data/telescope/projects.tsx b/data/telescope/projects.tsx
new file mode 100644
index 000000000..c1f7af878
--- /dev/null
+++ b/data/telescope/projects.tsx
@@ -0,0 +1,49 @@
+import type { Project } from "@/types/Structures/telescope"
+import { SpaceIcon as Planet, Sun, Asterisk, Disc } from "lucide-react"
+
+export const projects: Project[] = [
+  {
+    id: "planet-hunters",
+    name: "Planet Hunters",
+    description: "Search for exoplanet candidates in stellar light curves",
+    anomalyType: "exoplanet",
+    completed: 23,
+    total: 50,
+    icon: <Planet className="h-5 w-5" />,
+    color: "from-[#EBCB8B] to-[#D08770]",
+    bgGradient: "linear-gradient(135deg, #EBCB8B, #D08770)",
+  },
+  {
+    id: "sunspots",
+    name: "Sunspots",
+    description: "Identify and classify solar surface features",
+    anomalyType: "sunspot",
+    completed: 45,
+    total: 60,
+    icon: <Sun className="h-5 w-5" />,
+    color: "from-[#D08770] to-[#BF616A]",
+    bgGradient: "linear-gradient(135deg, #D08770, #BF616A)",
+  },
+  {
+    id: "daily-minor-planet",
+    name: "Daily Minor Planet",
+    description: "Track and catalog asteroid movements",
+    anomalyType: "asteroid",
+    completed: 12,
+    total: 30,
+    icon: <Asterisk className="h-5 w-5" />,
+    color: "from-[#B48EAD] to-[#81A1C1]",
+    bgGradient: "linear-gradient(135deg, #B48EAD, #81A1C1)",
+  },
+  {
+    id: "disk-detective",
+    name: "DiskDetective",
+    description: "Discover early solar systems and accretion discs",
+    anomalyType: "accretion_disc",
+    completed: 8,
+    total: 25,
+    icon: <Disc className="h-5 w-5" />,
+    color: "from-[#88C0D0] to-[#5E81AC]",
+    bgGradient: "linear-gradient(135deg, #88C0D0, #5E81AC)",
+  },
+];
\ No newline at end of file
diff --git a/hooks/useDarkMode.ts b/hooks/useDarkMode.ts
new file mode 100644
index 000000000..198c88f38
--- /dev/null
+++ b/hooks/useDarkMode.ts
@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+
+export default function UseDarkMode() {
+    const [isDark, setIsDark] = useState<boolean>(false);
+
+    useEffect(() => {
+        const root = window.document.documentElement;
+        const dark = localStorage.getItem("theme") === "dark";
+
+        root.classList.toggle("dark", dark);
+        setIsDark(dark)
+    }, []);
+
+    const toggleDarkMode = () => {
+    const root = window.document.documentElement;
+    const isCurrentlyDark = root.classList.contains("dark");
+
+    root.classList.toggle("dark", !isCurrentlyDark);
+    localStorage.setItem("theme", !isCurrentlyDark ? "dark" : "light");
+    setIsDark(!isCurrentlyDark);
+  };
+
+  return { isDark, toggleDarkMode };
+};
\ No newline at end of file
diff --git a/lib/helper/classification-icons.tsx b/lib/helper/classification-icons.tsx
new file mode 100644
index 000000000..6b5d48b1d
--- /dev/null
+++ b/lib/helper/classification-icons.tsx
@@ -0,0 +1,56 @@
+export function ClassificationIcon({ type }: { type: string | null }) {
+  switch (type) {
+    case "planet":
+      return (
+        <svg className="w-12 h-12 animate-pulse" viewBox="0 0 64 64" fill="none">
+          <circle cx="32" cy="32" r="20" fill="#3B82F6" />
+          <circle cx="32" cy="32" r="24" stroke="#3B82F6" strokeOpacity="0.3" strokeWidth="4" />
+          <circle cx="20" cy="24" r="4" fill="white" fillOpacity="0.6" />
+        </svg>
+      );
+    case "cloud":
+      return (
+        <svg className="w-12 h-12 animate-float" viewBox="0 0 64 64" fill="none">
+          <ellipse cx="32" cy="38" rx="20" ry="12" fill="#60A5FA" />
+          <ellipse cx="24" cy="30" rx="12" ry="10" fill="#93C5FD" />
+          <ellipse cx="40" cy="30" rx="12" ry="10" fill="#93C5FD" />
+        </svg>
+      );
+    case "telescope-minorplanet":
+      return (
+        <svg className="w-12 h-12 animate-spin-slow" viewBox="0 0 64 64" fill="none">
+          <circle cx="32" cy="32" r="16" stroke="#FBBF24" strokeWidth="4" />
+          <circle cx="32" cy="32" r="8" fill="#F59E0B" />
+          <circle cx="44" cy="20" r="4" fill="#FCD34D" />
+        </svg>
+      );
+    case "sunspot":
+      return (
+        <svg className="w-12 h-12 animate-pulse" viewBox="0 0 64 64" fill="none">
+          <circle cx="32" cy="32" r="20" fill="#F59E0B" />
+          <path
+            d="M32 12v8M32 44v8M12 32h8M44 32h8M20 20l6 6M38 38l6 6M20 44l6-6M38 26l6-6"
+            stroke="#B45309"
+            strokeWidth="3"
+            strokeLinecap="round"
+          />
+        </svg>
+      );
+    default:
+      return (
+        <div className="w-12 h-12 bg-gray-300 rounded-full flex items-center justify-center text-gray-600 font-bold text-sm">
+          ?
+        </div>
+      );
+  }
+}
+
+export function getAnomalyColor(type: string | null) {
+  if (!type) return "#9CA3AF";
+  const t = type.toLowerCase();
+  if (t.includes("tess")) return "#8B5CF6";
+  if (t.includes("planet")) return "#3B82F6";
+  if (t.includes("star")) return "#F59E0B";
+  if (t.includes("dust")) return "#F97316";
+  return "#6B7280";
+}
\ No newline at end of file
diff --git a/lib/helper/nps-popup.tsx b/lib/helper/nps-popup.tsx
new file mode 100644
index 000000000..15f881951
--- /dev/null
+++ b/lib/helper/nps-popup.tsx
@@ -0,0 +1,147 @@
+'use client';
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Textarea } from "@/components/ui/textarea";
+import { X } from "lucide-react";
+import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
+import { Label } from "@/components/ui/label";
+
+interface NPSPopupProps {
+  isOpen: boolean;
+  onClose: () => void;
+  userId?: string | null;
+};
+
+export default function NPSPopup({ isOpen, onClose, userId }: NPSPopupProps) {
+  const supabase = useSupabaseClient();
+  const session = useSession();
+
+  const [npsScore, setNpsScore] = useState<number | null>(null);
+  const [why, setWhy] = useState<string | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  const handleScoreSelect = (score: number) => setNpsScore(score);
+
+  const handleSubmit = async () => {
+    if (npsScore === null || isSubmitting) return;
+
+    setIsSubmitting(true);
+    const { error } = await supabase.from("nps_surveys").insert([
+      {
+        user_id: session?.user.id ?? userId,
+        nps_score: npsScore,
+        project_interests: why,
+      },
+    ]);
+    setIsSubmitting(false);
+
+    if (error) {
+      console.error("Error submitting NPS survey:", error);
+      return;
+    }
+
+    setIsSubmitted(true);
+    setTimeout(() => {
+        onClose();
+    }, 2300);
+  };
+
+  const getScoreLabel = (score: number) => {
+    if (score <= 5) return "Not likely";
+    if (score <= 8) return "Neutral";
+    return "Very likely";
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+      <Card className="w-full max-w-md mx-auto relative">
+        <CardHeader className="pb-4">
+          <div className="flex items-center justify-between">
+            <CardTitle className="text-lg font-semibold">Quick Survey</CardTitle>
+            <Button variant="ghost" size="icon" onClick={onClose} className="h-6 w-6">
+              <X className="h-4 w-4" />
+            </Button>
+          </div>
+        </CardHeader>
+
+        <CardContent className="space-y-6">
+          {!isSubmitted ? (
+            <>
+              <div className="space-y-4">
+                <Label className="text-sm font-medium">
+                  How likely are you to recommend Star Sailors to a friend or colleague?
+                </Label>
+
+                <div className="space-y-3">
+                  {/* This ensures it is in a horizontal row */}
+                  <div className="flex flex-wrap gap-1 justify-center">
+                    {Array.from({ length: 11 }, (_, i) => (
+                      <button
+                        key={i}
+                        onClick={() => handleScoreSelect(i)}
+                        className={`h-8 w-8 text-xs font-medium rounded transition-colors
+                          ${
+                            npsScore === i
+                              ? "bg-primary text-primary-foreground"
+                              : "bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground"
+                          }`}
+                      >
+                        {i}
+                      </button>
+                    ))}
+                  </div>
+
+                  <div className="flex justify-between text-xs text-muted-foreground">
+                    <span>Not at all likely</span>
+                    <span>Extremely likely</span>
+                  </div>
+
+                  {npsScore !== null && (
+                    <p className="text-sm text-center text-muted-foreground">{getScoreLabel(npsScore)}</p>
+                  )}
+                </div>
+              </div>
+
+              <div className="space-y-3">
+                <Label htmlFor="projects" className="text-sm font-medium">
+                  Why? What would you like to see?
+                </Label>
+                <Textarea
+                  id="projects"
+                  placeholder="Tell us your thoughts..."
+                  value={why || ""}
+                  onChange={(e) => setWhy(e.target.value)}
+                  className="min-h-[80px] resize-none"
+                />
+              </div>
+
+              <div className="flex justify-end space-x-3">
+                <Button variant="outline" onClick={onClose} disabled={isSubmitting}>
+                  Cancel
+                </Button>
+                <Button onClick={handleSubmit} disabled={npsScore === null || isSubmitting}>
+                  {isSubmitting ? "Submitting..." : "Submit Survey"}
+                </Button>
+              </div>
+            </>
+          ) : (
+            <div className="text-center py-6">
+              <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-3">
+                <svg className="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                </svg>
+              </div>
+              <h3 className="font-semibold mb-2">Thank you!</h3>
+              <p className="text-sm text-muted-foreground">Your feedback helps us improve Star Sailors for everyone.</p>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/package.json b/package.json
index 063dc68ff..80401bb8e 100644
--- a/package.json
+++ b/package.json
@@ -19,18 +19,18 @@
     "@radix-ui/react-accordion": "^1.2.11",
     "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-checkbox": "^1.3.2",
-    "@radix-ui/react-dialog": "^1.1.7",
+    "@radix-ui/react-dialog": "1.1.7",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-popover": "^1.1.13",
-    "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-progress": "1.1.0",
     "@radix-ui/react-radio-group": "^1.3.7",
-    "@radix-ui/react-scroll-area": "^1.2.0",
+    "@radix-ui/react-scroll-area": "^1.2.9",
     "@radix-ui/react-select": "^2.2.5",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slider": "^1.2.3",
-    "@radix-ui/react-slot": "^1.1.2",
-    "@radix-ui/react-switch": "^1.1.3",
+    "@radix-ui/react-slot": "1.1.2",
+    "@radix-ui/react-switch": "1.1.3",
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-toast": "^1.2.14",
     "@react-three/drei": "^9.121.5",
@@ -45,15 +45,12 @@
     "@types/react-dom": "^18.2.7",
     "@vercel/analytics": "^1.5.0",
     "@vercel/speed-insights": "^1.2.0",
-    "ai": "^4.1.46",
-    "alea": "^1.0.1",
     "antd": "^5.19.3",
     "antd-style": "^3.6.2",
     "autoprefixer": "10.4.15",
     "axios": "^1.6.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "cors": "^2.8.5",
     "d3": "^7.9.0",
     "daisyui": "^4.11.1",
     "date-fns": "^3.6.0",
@@ -61,7 +58,6 @@
     "formidable": "^3.5.2",
     "framer-motion": "^12.0.5",
     "html2canvas": "^1.4.1",
-    "input-otp": "^1.2.4",
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.394.0",
     "markerjs2": "^2.32.3",
@@ -74,11 +70,7 @@
     "postprocessing": "^6.36.4",
     "react": "^18.3.1",
     "react-colorful": "^5.6.1",
-    "react-day-picker": "^8.10.1",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.53.0",
-    "react-icons": "^5.3.0",
-    "react-konva": "^18.2.10",
     "react-layout-kit": "^1.9.0",
     "react-modal": "^3.16.1",
     "react-webcam": "^7.2.0",
diff --git a/styles/globals.css b/styles/globals.css
index cff2be3fd..229a269e9 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -2,43 +2,65 @@
 @tailwind components;
 @tailwind utilities;
 
+.dark {
+  --background: 220 16% 12%;
+  --foreground: 220 16% 90%;
+
+  --card: 220 16% 16%;
+  --card-foreground: 220 16% 90%;
+
+  --popover: 220 16% 16%;
+  --popover-foreground: 220 16% 90%;
+
+  --primary: 184 51% 58%; /* #5FCBC3 teal-glow */
+  --primary-foreground: 220 16% 12%;
+
+  --secondary: 196 34% 50%; /* soft sci-fi blue */
+  --secondary-foreground: 220 16% 96%;
+
+  --muted: 220 16% 20%;
+  --muted-foreground: 220 16% 60%;
+
+  --accent: 196 44% 69%; /* #88c0d0 holographic blue */
+  --accent-foreground: 220 16% 12%;
+
+  --destructive: 354 42% 56%;
+  --destructive-foreground: 220 16% 96%;
+
+  --border: 220 16% 30%;
+  --input: 220 16% 20%;
+
+  --ring: 184 51% 58%;
+}
+
 :root {
-  /* Background & Foreground Colors */
-  --background: #ECEFF4; /* Nord Polar Night light */
-  --foreground: #2E3440; /* Nord Night text */
-  
-  /* Card & Popover */
-  --card: #E5E9F0; /* Nord Snow Storm variant */
-  --card-foreground: #2E3440; /* Nord Night text */
-  --popover: #E5E9F0; /* Nord Snow Storm variant */
-  --popover-foreground: #2E3440; /* Nord Night text */
-  
-  /* Primary Colors */
-  --primary: #B48EAD; /* Novadust cosmic lavender */
-  --primary-foreground: #ECEFF4; /* Light-on-dark */
-  
-  /* Secondary Colors */
-  --secondary: #4C566A; /* Nord Frost shade */
-  --secondary-foreground: #ECEFF4; /* Light-on-dark */
-  
-  /* Muted & Accent Colors */
-  --muted: #D8DEE9; /* Subtle border */
-  --muted-foreground: #2E3440; /* Nord Night text */
-  --accent: #B48EAD; /* Novadust cosmic lavender */
-  --accent-foreground: #ECEFF4; /* Light-on-dark */
-  
-  /* Destructive Colors */
-  --destructive: #BF616A; /* Red */
-  --destructive-foreground: #ECEFF4; /* Light-on-dark */
-  
-  /* Borders & Inputs */
-  --border: #D8DEE9; /* Subtle border */
-  --input: #FFFFFF; /* Neutral base */
-  
-  /* Ring (focus state) */
-  --ring: #B48EAD; /* Novadust cosmic lavender */
-  
-  /* Radius for rounded corners */
+  --background: 220 16% 96%;
+  --foreground: 220 16% 22%;
+
+  --card: 218 27% 92%;
+  --card-foreground: 220 16% 22%;
+  --popover: 218 27% 92%;
+  --popover-foreground: 220 16% 22%;
+
+  --primary: 184 51% 58%; /* #5FCBC3 */
+  --primary-foreground: 220 16% 96%;
+
+  --secondary: 196 34% 50%;
+  --secondary-foreground: 220 16% 96%;
+
+  --muted: 218 27% 88%;
+  --muted-foreground: 220 16% 22%;
+  --accent: 196 44% 69%; /* #88c0d0 */
+  --accent-foreground: 220 16% 96%;
+
+  --destructive: 354 42% 56%;
+  --destructive-foreground: 220 16% 96%;
+
+  --border: 218 27% 88%;
+  --input: 0 0% 100%;
+
+  --ring: 184 51% 58%;
+
   --radius: 0.5rem;
 }
 
@@ -121,7 +143,7 @@ body {
   background-color: hsl(var(--accent));
   clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
   transform: translate(-50%, -50%) rotate(45deg);
-};
+}
 
 .sci-fi-background {
   background-color: #1D2833;
@@ -230,4 +252,47 @@ body {
 .writing-vertical {
   writing-mode: vertical-rl;
   text-orientation: mixed;
-}
\ No newline at end of file
+}
+
+.texture-container {
+  background-color: #0a0a0c; /* rich black-blue base */
+  background-image:
+    radial-gradient(circle at 30% 40%, rgba(0, 255, 200, 0.06) 0%, transparent 25%),
+    radial-gradient(circle at 70% 80%, rgba(255, 100, 200, 0.05) 0%, transparent 30%),
+
+    repeating-linear-gradient(
+      0deg,
+      rgba(255, 255, 255, 0.015) 0px,
+      rgba(255, 255, 255, 0.015) 1px,
+      transparent 1px,
+      transparent 40px
+    ),
+    repeating-linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0.015) 0px,
+      rgba(255, 255, 255, 0.015) 1px,
+      transparent 1px,
+      transparent 40px
+    ),
+
+    linear-gradient(145deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
+    linear-gradient(225deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
+    
+  background-size:
+    600px 600px,
+    800px 800px,
+    40px 40px,
+    40px 40px,
+    200px 200px,
+    300px 300px;
+
+  background-position:
+    center,
+    bottom right,
+    top left,
+    top left,
+    top right,
+    bottom left;
+
+  background-repeat: repeat;
+}
diff --git a/supabase/migrations/20250527061741_nps_survey.sql b/supabase/migrations/20250527061741_nps_survey.sql
new file mode 100644
index 000000000..54e21e80b
--- /dev/null
+++ b/supabase/migrations/20250527061741_nps_survey.sql
@@ -0,0 +1,75 @@
+-- Create the nps_surveys table to store survey responses
+create table
+  public.nps_surveys (
+    id uuid not null default gen_random_uuid(),
+    created_at timestamp with time zone not null default now(),
+    updated_at timestamp with time zone null default now(),
+    
+    -- NPS score (0-10)
+    nps_score integer not null check (nps_score >= 0 and nps_score <= 10),
+    
+    -- Custom question about project interests
+    project_interests text null,
+    
+    -- Optional reference to logged-in user
+    user_id uuid null,
+    
+    -- Additional metadata
+    user_agent text null,
+    ip_address inet null,
+    session_id text null,
+    
+    -- Constraints
+    constraint nps_surveys_pkey primary key (id),
+    constraint nps_surveys_user_id_fkey foreign key (user_id) references profiles (id) on delete set null
+  ) tablespace pg_default;
+
+-- Create indexes for better query performance
+create index idx_nps_surveys_created_at on public.nps_surveys (created_at desc);
+create index idx_nps_surveys_user_id on public.nps_surveys (user_id);
+create index idx_nps_surveys_nps_score on public.nps_surveys (nps_score);
+
+-- Enable Row Level Security (RLS)
+alter table public.nps_surveys enable row level security;
+
+-- Create policies for RLS
+-- Allow anyone to insert survey responses (for anonymous surveys)
+create policy "Anyone can insert survey responses" on public.nps_surveys
+  for insert with check (true);
+
+-- Allow users to view their own survey responses
+create policy "Users can view their own survey responses" on public.nps_surveys
+  for select using (auth.uid() = user_id);
+
+-- Allow admins/service role to view all survey responses
+create policy "Service role can view all survey responses" on public.nps_surveys
+  for select using (auth.jwt() ->> 'role' = 'service_role');
+
+-- Create a function to update the updated_at timestamp
+create or replace function public.handle_updated_at()
+returns trigger as $$
+begin
+  new.updated_at = now();
+  return new;
+end;
+$$ language plpgsql;
+
+-- Create trigger to automatically update updated_at
+create trigger handle_nps_surveys_updated_at
+  before update on public.nps_surveys
+  for each row execute function public.handle_updated_at();
+
+-- Optional: Create a view for analytics (aggregated data)
+create view public.nps_analytics as
+select 
+  date_trunc('day', created_at) as survey_date,
+  count(*) as total_responses,
+  avg(nps_score::numeric) as average_score,
+  count(case when nps_score >= 9 then 1 end) as promoters,
+  count(case when nps_score between 7 and 8 then 1 end) as passives,
+  count(case when nps_score <= 6 then 1 end) as detractors,
+  (count(case when nps_score >= 9 then 1 end)::numeric / count(*)::numeric * 100) - 
+  (count(case when nps_score <= 6 then 1 end)::numeric / count(*)::numeric * 100) as nps_score_calculated
+from public.nps_surveys
+group by date_trunc('day', created_at)
+order by survey_date desc;
\ No newline at end of file
diff --git a/supabase/migrations/20250527102152_nps2.sql.rb b/supabase/migrations/20250527102152_nps2.sql.rb
new file mode 100644
index 000000000..a83e034cc
--- /dev/null
+++ b/supabase/migrations/20250527102152_nps2.sql.rb
@@ -0,0 +1,8 @@
+CREATE TABLE public.nps_surveys (
+  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+  user_id uuid,
+  nps_score integer NOT NULL,
+  why text,
+  created_at timestamp with time zone DEFAULT timezone('utc'::text, now())
+);
+
diff --git a/supabase/migrations/20250609221701_referrals.sql b/supabase/migrations/20250609221701_referrals.sql
new file mode 100644
index 000000000..73de24c78
--- /dev/null
+++ b/supabase/migrations/20250609221701_referrals.sql
@@ -0,0 +1,6 @@
+create table public.referrals (
+  id uuid primary key default gen_random_uuid(),
+  referree_id uuid not null references auth.users(id) on delete cascade,
+  referral_code text not null,
+  referred_at timestamp with time zone default timezone('utc', now())
+);
\ No newline at end of file
diff --git a/supabase/migrations/20250609221754_profilesReferrals.sql b/supabase/migrations/20250609221754_profilesReferrals.sql
new file mode 100644
index 000000000..2df339b60
--- /dev/null
+++ b/supabase/migrations/20250609221754_profilesReferrals.sql
@@ -0,0 +1,2 @@
+alter table public.profiles
+add column referral_code text unique;
\ No newline at end of file
diff --git a/supabase/migrations/20250609221810_profilesReferralsFunction.sql b/supabase/migrations/20250609221810_profilesReferralsFunction.sql
new file mode 100644
index 000000000..a1342710b
--- /dev/null
+++ b/supabase/migrations/20250609221810_profilesReferralsFunction.sql
@@ -0,0 +1,38 @@
+alter table public.profiles
+add column if not exists referral_code text unique;
+
+create or replace function public.generate_unique_referral_code()
+returns text as $$
+declare
+  new_code text;
+begin
+  loop
+    new_code := substr(md5(random()::text), 0, 9);
+    exit when not exists (
+      select 1 from public.profiles where referral_code = new_code
+    );
+  end loop;
+  return new_code;
+end;
+$$ language plpgsql;
+
+create or replace function public.generate_referral_code()
+returns trigger as $$
+begin
+  if NEW.referral_code is null then
+    NEW.referral_code := generate_unique_referral_code();
+  end if;
+  return NEW;
+end;
+$$ language plpgsql;
+
+drop trigger if exists add_referral_code_before_insert on public.profiles;
+
+create trigger add_referral_code_before_insert
+before insert on public.profiles
+for each row
+execute function public.generate_referral_code();
+
+update public.profiles
+set referral_code = generate_unique_referral_code()
+where referral_code is null;
\ No newline at end of file
diff --git a/supabase/migrations/20250630193956_consensus_votes_updownvotetype.sql b/supabase/migrations/20250630193956_consensus_votes_updownvotetype.sql
new file mode 100644
index 000000000..1e5c6a81d
--- /dev/null
+++ b/supabase/migrations/20250630193956_consensus_votes_updownvotetype.sql
@@ -0,0 +1,4 @@
+-- Add 'vote_type' field to support upvote/downvote system
+ALTER TABLE public.votes
+ADD COLUMN vote_type text CHECK (vote_type IN ('up', 'down')) DEFAULT 'up';
+
diff --git a/supabase/migrations/npsLive.sql.rb b/supabase/migrations/npsLive.sql.rb
new file mode 100644
index 000000000..9b2b8917b
--- /dev/null
+++ b/supabase/migrations/npsLive.sql.rb
@@ -0,0 +1,81 @@
+CREATE OR REPLACE FUNCTION handle_updated_at()
+RETURNS TRIGGER AS $$
+BEGIN
+    NEW.updated_at := now();
+    RETURN NEW;
+END;
+$$ LANGUAGE plpgsql;
+
+create table
+  public.nps_surveys (
+    id uuid not null default gen_random_uuid (),
+    created_at timestamp with time zone not null default now(),
+    updated_at timestamp with time zone null default now(),
+    nps_score integer not null,
+    project_interests text null,
+    user_id uuid null,
+    user_agent text null,
+    ip_address inet null,
+    session_id text null,
+    constraint nps_surveys_pkey primary key (id),
+    constraint nps_surveys_user_id_fkey foreign key (user_id) references profiles (id) on delete set null,
+    constraint nps_surveys_nps_score_check check (
+      (
+        (nps_score >= 0)
+        and (nps_score <= 10)
+      )
+    )
+  ) tablespace pg_default;
+
+create index if not exists idx_nps_surveys_created_at on public.nps_surveys using btree (created_at desc) tablespace pg_default;
+
+create index if not exists idx_nps_surveys_user_id on public.nps_surveys using btree (user_id) tablespace pg_default;
+
+create index if not exists idx_nps_surveys_nps_score on public.nps_surveys using btree (nps_score) tablespace pg_default;
+
+create trigger handle_nps_surveys_updated_at before
+update on nps_surveys for each row
+execute function handle_updated_at ();
+
+create view
+  public.nps_analytics as
+select
+  date_trunc('day'::text, nps_surveys.created_at) as survey_date,
+  count(*) as total_responses,
+  avg(nps_surveys.nps_score::numeric) as average_score,
+  count(
+    case
+      when nps_surveys.nps_score >= 9 then 1
+      else null::integer
+    end
+  ) as promoters,
+  count(
+    case
+      when nps_surveys.nps_score >= 7
+      and nps_surveys.nps_score <= 8 then 1
+      else null::integer
+    end
+  ) as passives,
+  count(
+    case
+      when nps_surveys.nps_score <= 6 then 1
+      else null::integer
+    end
+  ) as detractors,
+  count(
+    case
+      when nps_surveys.nps_score >= 9 then 1
+      else null::integer
+    end
+  )::numeric / count(*)::numeric * 100::numeric - count(
+    case
+      when nps_surveys.nps_score <= 6 then 1
+      else null::integer
+    end
+  )::numeric / count(*)::numeric * 100::numeric as nps_score_calculated
+from
+  nps_surveys
+group by
+  (date_trunc('day'::text, nps_surveys.created_at))
+order by
+  (date_trunc('day'::text, nps_surveys.created_at)) desc;
\ No newline at end of file
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 53b032cb2..32fdc69d9 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,90 +1,117 @@
-import type { Config } from 'tailwindcss';
+import type { Config } from "tailwindcss"
 
 const config: Config = {
-  darkMode: ['class'],
+  darkMode: ["class"],
   content: [
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
       backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+        'tech-grid': `
+          linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
+          linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px)
+        `,
+        'stars': `
+          radial-gradient(white 1px, transparent 1px),
+          radial-gradient(white 1px, transparent 1px)
+        `,
+        'gradient-radial': "radial-gradient(var(--tw-gradient-stops))",
+        'gradient-conic': "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+      backgroundSize: {
+        'tech-grid': '40px 40px',
+        'stars': '200px 200px, 100px 100px',
+      },
+      animation: {
+        'stars-twinkle': 'twinkle 4s ease-in-out infinite',
+        'grid-shimmer': 'shimmer 10s linear infinite',
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
+      keyframes: {
+        twinkle: {
+          '0%, 100%': { opacity: '0.8' },
+          '50%': { opacity: '0.3' },
+        },
+        shimmer: {
+          '0%': {
+            backgroundPosition: '0px 0px',
+          },
+          '100%': {
+            backgroundPosition: '100px 100px',
+          },
+        },
+        'accordion-down': {
+          from: {
+            height: "0",
+          },
+          to: {
+            height: "var(--radix-accordion-content-height)",
+          },
+        },
+        'accordion-up': {
+          from: {
+            height: "var(--radix-accordion-content-height)",
+          },
+          to: {
+            height: "0",
+          },
+        },
       },
       borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
       },
       colors: {
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
         card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
         },
         popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
         },
         primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
         },
         secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
         },
         muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
         },
         accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
         },
         destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
         },
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
         chart: {
-          '1': 'hsl(var(--chart-1))',
-          '2': 'hsl(var(--chart-2))',
-          '3': 'hsl(var(--chart-3))',
-          '4': 'hsl(var(--chart-4))',
-          '5': 'hsl(var(--chart-5))',
+          "1": "hsl(var(--chart-1))",
+          "2": "hsl(var(--chart-2))",
+          "3": "hsl(var(--chart-3))",
+          "4": "hsl(var(--chart-4))",
+          "5": "hsl(var(--chart-5))",
         },
       },
-      keyframes: {
-        'accordion-down': {
-          from: {
-            height: '0',
-          },
-          to: {
-            height: 'var(--radix-accordion-content-height)',
-          },
-        },
-        'accordion-up': {
-          from: {
-            height: 'var(--radix-accordion-content-height)',
-          },
-          to: {
-            height: '0',
-          },
-        },
-      },
-      animation: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out',
-      },
     },
   },
-  plugins: [require('tailwindcss-animate')],
-};
-export default config;
+  plugins: [require("tailwindcss-animate")],
+}
+
+export default config
\ No newline at end of file
diff --git a/types/Annotation.tsx b/types/Annotation.tsx
index 2b7c2f833..19d4562fe 100644
--- a/types/Annotation.tsx
+++ b/types/Annotation.tsx
@@ -348,13 +348,4 @@ export interface DrawingState {
   currentShape: Shape | null;
   lines: Line[];
   shapes: Shape[];
-};
-
-export interface DrawingControls {
-  strokeColor: string;
-  strokeWidth: number;
-  drawingMode: DrawingMode;
-  onColorChange: (color: string) => void;
-  onWidthChange: (width: number) => void;
-  onModeChange: (mode: DrawingMode) => void;
 };
\ No newline at end of file
diff --git a/types/Items.tsx b/types/Items.tsx
index 1fe16f0ae..45162f213 100644
--- a/types/Items.tsx
+++ b/types/Items.tsx
@@ -29,7 +29,7 @@ export interface UserStructure {
     // Function (what is executed upon click)
 };
 
-export interface Automaton {
+interface Automaton {
     gif: null;
     id: number;
     item: number;
@@ -104,7 +104,7 @@ export interface StructureItemDetail {
     recipe?: Record<string, number>;
 };
 
-export interface TerrariumStructureItemDetail {
+interface TerrariumStructureItemDetail {
     id: number;
     name: string;
     description: string;
diff --git a/types/Structures/Rover-Seiscam.ts b/types/Structures/Rover-Seiscam.ts
new file mode 100644
index 000000000..f9d67b477
--- /dev/null
+++ b/types/Structures/Rover-Seiscam.ts
@@ -0,0 +1,24 @@
+export interface SurfaceAnomaly {
+  id: string
+  x: number
+  y: number
+  rover: string
+};
+
+export function filterAnomaliesByRover(anomalies: SurfaceAnomaly[], roverId: string): SurfaceAnomaly[] {
+  return anomalies.filter((anomaly) => anomaly.rover === roverId)
+};
+
+export function filterAnomaliesByRegion(
+  anomalies: SurfaceAnomaly[],
+  regionX: number,
+  regionY: number,
+): SurfaceAnomaly[] {
+  return anomalies.filter((anomaly) => {
+    // Convert anomaly position to region coordinates
+    const anomalyRegionX = Math.floor((anomaly.x - 50) / 20)
+    const anomalyRegionY = Math.floor((anomaly.y - 50) / 20)
+
+    return anomalyRegionX === regionX && anomalyRegionY === regionY
+  });
+};
\ No newline at end of file
diff --git a/types/Structures/Rover.ts b/types/Structures/Rover.ts
new file mode 100644
index 000000000..382c51e5f
--- /dev/null
+++ b/types/Structures/Rover.ts
@@ -0,0 +1,88 @@
+import type { ReactNode } from "react";
+
+export interface BaseAnomaly {
+    id: string;
+    name: string;
+    type: "rock_formation" | "dust_storm" | "mineral_deposit" | "geological_feature" | "atmospheric_event";
+    project: string;
+    classified?: boolean;
+    discoveryDate?: string;
+};
+
+export interface SurfaceAnomaly extends BaseAnomaly {
+    x: number;
+    y: number;
+    intensity: number;
+    size: number;
+    color: string;
+    region: string;
+    shape: "circle" | "irregular" | "linear" | "cluster" | "oval" | "angular";
+    animationSpeed: number;
+    opacity: number;
+    planet: string;
+    rover: string;
+};
+
+export interface RoverProject {
+  id: string;
+  name: string;
+  description: string;
+  anomalyType: "rock_formation" | "dust_storm" | "mineral_deposit" | "geological_feature" | "atmospheric_event";
+  completed: number;
+  total: number;
+  icon: ReactNode;
+  color: string;
+  bgGradient: string;
+};
+
+export interface RoverMission {
+  id: string;
+  title: string;
+  description: string;
+  project: string;
+  reward: string;
+  difficulty: "easy" | "medium" | "hard";
+  completed: boolean;
+  icon: ReactNode;
+};
+
+export interface Rover {
+  id: string;
+  name: string;
+  planet: string;
+  x: number;
+  y: number;
+  batteryLevel: number;
+  status: "active" | "standby" | "maintenance" | "offline";
+  temperature: string;
+  signalStrength: number;
+  anomalyCount: number;
+  description: string;
+  missionDuration: string;
+  distanceTraveled: string;
+};
+
+export interface Planet {
+  id: string;
+  name: string;
+  surfaceColor: string;
+  atmosphereColor: string;
+  temperature: string;
+  atmosphere: string;
+  gravity: string;
+  description: string;
+};
+
+export interface SurfaceLayer {
+  x: number;
+  y: number;
+  size: number;
+  opacity: number;
+  color: string;
+  driftSpeed: number;
+  type: "dust" | "rock" | "sand" | "crater";
+};
+
+export type ViewMode = "rovers" | "surface" | "discoveries";
+
+export type DiscoveryPanelPosition = "top" | "bottom" | "hidden";
\ No newline at end of file
diff --git a/types/Structures/Structures.tsx b/types/Structures/Structures.tsx
new file mode 100644
index 000000000..008562dbc
--- /dev/null
+++ b/types/Structures/Structures.tsx
@@ -0,0 +1,12 @@
+export interface UserStructure {
+    id: number;
+    item: number; // Assuming this should be a number
+    name: string;
+    description: string;
+    cost: number;
+    icon_url: string;
+    ItemCategory: string;
+    parentItem: number | null;
+    itemLevel: number;
+    // Function (what is executed upon click)
+};
\ No newline at end of file
diff --git a/types/Structures/WeatherBalloon.ts b/types/Structures/WeatherBalloon.ts
new file mode 100644
index 000000000..783faf49e
--- /dev/null
+++ b/types/Structures/WeatherBalloon.ts
@@ -0,0 +1,76 @@
+import type { ReactNode } from "react";
+
+// Base anomaly type for weather phenomena
+export interface BaseAnomaly {
+  id: string
+  name: string
+  type: "storm" | "cloud_formation" | "atmospheric_phenomenon" | "surface_weather" | "geological_weather"
+  project: string
+  classified?: boolean
+  discoveryDate?: string
+}
+
+// Extended anomaly with rendering properties
+export interface WeatherAnomaly extends BaseAnomaly {
+  x: number
+  y: number
+  intensity: number
+  size: number
+  color: string
+  region: string
+  shape: "circle" | "spiral" | "linear" | "irregular" | "oval" | "hexagon"
+  animationSpeed: number
+  opacity: number
+  planet: string
+}
+
+export interface WeatherProject {
+  id: string
+  name: string
+  description: string
+  anomalyType: "storm" | "cloud_formation" | "atmospheric_phenomenon" | "surface_weather" | "geological_weather"
+  completed: number
+  total: number
+  icon: ReactNode
+  color: string
+  bgGradient: string
+}
+
+export interface WeatherMission {
+  id: string
+  title: string
+  description: string
+  project: string
+  reward: string
+  difficulty: "easy" | "medium" | "hard"
+  completed: boolean
+  icon: ReactNode
+}
+
+export interface Planet {
+  id: string
+  name: string
+  x: number
+  y: number
+  size: number
+  color: string
+  atmosphere: string
+  temperature: string
+  anomalyCount: number
+  description: string
+  weatherSystems: string[]
+}
+
+export interface AtmosphericLayer {
+  x: number
+  y: number
+  size: number
+  opacity: number
+  color: string
+  driftSpeed: number
+  type: "cloud" | "dust" | "vapor" | "particle"
+}
+
+export type ViewMode = "planets" | "surface" | "discoveries"
+
+export type DiscoveryPanelPosition = "top" | "bottom" | "hidden";
\ No newline at end of file
diff --git a/types/Structures/telescope.ts b/types/Structures/telescope.ts
new file mode 100644
index 000000000..f8b92e6cc
--- /dev/null
+++ b/types/Structures/telescope.ts
@@ -0,0 +1,60 @@
+import type { ReactNode } from "react"
+
+// Base anomaly type with just essential properties
+interface BaseAnomaly {
+  id: string
+  name: string
+  type: "exoplanet" | "sunspot" | "asteroid" | "accretion_disc"
+  project: string
+  classified?: boolean
+  discoveryDate?: string
+};
+
+// Extended anomaly with rendering properties
+export interface Anomaly extends BaseAnomaly {
+  x: number
+  y: number
+  brightness: number
+  size: number
+  color: string
+  sector: string
+  shape: "circle" | "star" | "diamond" | "hexagon" | "triangle" | "oval"
+  pulseSpeed: number
+  glowIntensity: number
+}
+
+export interface Project {
+  id: string
+  name: string
+  description: string
+  anomalyType: "exoplanet" | "sunspot" | "asteroid" | "accretion_disc"
+  completed: number
+  total: number
+  icon: ReactNode
+  color: string
+  bgGradient: string
+}
+
+export interface Mission {
+  target: ReactNode
+  id: string
+  name: string
+  description: string
+  project: string | null
+  progress: number
+  completed: boolean
+  reward: string
+}
+
+export interface Star {
+  x: number
+  y: number
+  size: number
+  opacity: number
+  color: string
+  twinkleSpeed: number
+}
+
+export type ViewMode = "viewport" | "discoveries"
+
+export type DiscoveryPanelPosition = "top" | "bottom" | "hidden"
\ No newline at end of file
diff --git a/types/station.ts b/types/station.ts
index aeed36483..c8e52495a 100644
--- a/types/station.ts
+++ b/types/station.ts
@@ -2,7 +2,7 @@ export interface Animal {
   name: string;
   icon: string;
   biomassType: string;
-  mass: number; // in kilos, approximate average
+  mass: number;
 };
 
 export interface Biome {
@@ -12,14 +12,8 @@ export interface Biome {
   darkColor: string;
 };
 
-export interface Location {
-  coordinates: string;
-  depth?: string;
-  altitude?: string;
-};
-
 export interface Station {
-  id: string; // also points to `inventory.item`
+  id: string;
   name: string;
   icon: string;
   icon_url?: string;
@@ -27,5 +21,5 @@ export interface Station {
   biome: Biome;
   animals: Animal[];
   built: boolean;
-  location: Location;
+  // location: Location;
 };
\ No newline at end of file
diff --git a/utils/Generators/PH/color-picker.tsx b/utils/Generators/PH/color-picker.tsx
index 969c3cf17..3ab408a3a 100644
--- a/utils/Generators/PH/color-picker.tsx
+++ b/utils/Generators/PH/color-picker.tsx
@@ -8,62 +8,62 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 
 interface ColorPickerProps {
-    color: string;
-    onChange: ( color: string ) => void;
-    label?: string;
-};
+  color: string;
+  onChange: (color: string) => void;
+  label?: string;
+}
 
 export default function ColorPicker({
-    color,
-    onChange,
-    label
+  color,
+  onChange,
+  label,
 }: ColorPickerProps) {
-    const [isOpen, setIsOpen] = useState<boolean>(false);
-    const [localColor, setLocalColor] = useState<string>(color);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [localColor, setLocalColor] = useState<string>(color);
 
-    useEffect(() => {
-        setLocalColor(color); // When prop changes {from alteration in parent component by user}, update local colour
-    }, [color]);
+  useEffect(() => {
+    // Sync local color state with external changes
+    setLocalColor(color);
+  }, [color]);
 
-    // Manual hex input option
-    const handleInputChange = ( e: React.ChangeEvent<HTMLInputElement> ) => {
-        const value = e.target.value;
-        setLocalColor(value);
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setLocalColor(value);
 
-        if (/^#[0-9A-F]{6}$/i.test(value)) {
-            // Make sure it's a valid hex code before updating parent
-            onChange(value);
-        };
-    };
+    // Update parent only if valid hex code
+    if (/^#[0-9A-F]{6}$/i.test(value)) {
+      onChange(value);
+    }
+  };
 
-    const handleColorChange = ( newColor: string ) => {
-        setLocalColor(newColor);
-        onChange(newColor);
-    };
+  const handleColorChange = (newColor: string) => {
+    setLocalColor(newColor);
+    onChange(newColor);
+  };
 
-    return (
-        <div className="flex flex-col space-y-1.5">
-            {label && <Label className="text-xs">{label}</Label>}
-            <Popover open={isOpen} onOpenChange={setIsOpen}>
-                <PopoverTrigger asChild>
-                    <div className="flex h-8 cursor-pointer">
-                        <div
-                            className="w-8 h-8 rounded-l border border-r-0 border-gray-600"
-                            style={{ backgroundColor: localColor }}
-                        />
-                        <Input
-                            type="text"
-                            value={localColor}
-                            onChange={handleInputChange}
-                            className="rounded-l-none w-24 h-8 font-mono text-xs"
-                            onClick={(e) => e.stopPropagation()}
-                        />
-                    </div>
-                </PopoverTrigger>
-                <PopoverContent className="w-auto p-3" side='right'>
-                    <HexColorPicker color={localColor} onChange={handleColorChange} />
-                </PopoverContent>
-            </Popover>
-        </div>
-    );
+  return (
+    <div className="flex flex-col space-y-1.5">
+      {label && <Label className="text-xs text-gray-900">{label}</Label>}
+      <Popover open={isOpen} onOpenChange={setIsOpen}>
+        <PopoverTrigger asChild>
+          <div className="flex h-8 cursor-pointer">
+            <div
+              className="w-8 h-8 rounded-l border border-r-0 border-gray-600"
+              style={{ backgroundColor: localColor }}
+            />
+            <Input
+              type="text"
+              value={localColor}
+              onChange={handleInputChange}
+              className="rounded-l-none w-24 h-8 font-mono text-xs text-gray-900"
+              onClick={(e) => e.stopPropagation()}
+            />
+          </div>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-3 text-gray-900" side="right">
+          <HexColorPicker color={localColor} onChange={handleColorChange} />
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
 };
\ No newline at end of file
diff --git a/utils/Structures/Telescope/sector-utils.ts b/utils/Structures/Telescope/sector-utils.ts
new file mode 100644
index 000000000..d0b492e76
--- /dev/null
+++ b/utils/Structures/Telescope/sector-utils.ts
@@ -0,0 +1,80 @@
+import type { Anomaly, Star } from "@/types/Structures/telescope"
+
+// Generate sector names
+export const generateSectorName = (x: number, y: number): string => {
+  const sectors = [
+    "Alpha",
+    "Beta",
+    "Gamma",
+    "Delta",
+    "Epsilon",
+    "Zeta",
+    "Eta",
+    "Theta",
+    "Iota",
+    "Kappa",
+    "Lambda",
+    "Mu",
+    "Nu",
+    "Xi",
+    "Omicron",
+    "Pi",
+  ]
+  const regions = ["Nebula", "Cluster", "Field", "Void", "Stream", "Cloud", "Ring", "Arm"]
+
+  const sectorIndex = Math.abs(Math.floor(x / 1000) + Math.floor(y / 1000)) % sectors.length
+  const regionIndex = Math.abs(Math.floor(x / 500) + Math.floor(y / 500)) % regions.length
+
+  return `${sectors[sectorIndex]} ${regions[regionIndex]}`
+}
+
+// Generate random number based on seed
+export const seededRandom = (seed: number, index: number): number => {
+  const x = Math.sin(seed + index) * 10000
+  return x - Math.floor(x)
+}
+
+// Generate colorful background stars for current sector
+export const generateStars = (sectorX: number, sectorY: number): Star[] => {
+  const backgroundStars: Star[] = []
+  const seed = Math.abs(sectorX * 1000 + sectorY)
+
+  // Star colors for variety
+  const starColors = [
+    "#FFE4B5", // Moccasin (warm white)
+    "#87CEEB", // Sky blue
+    "#FFB6C1", // Light pink
+    "#98FB98", // Pale green
+    "#DDA0DD", // Plum
+    "#F0E68C", // Khaki
+    "#FFA07A", // Light salmon
+    "#20B2AA", // Light sea green
+    "#FFFFFF", // Pure white
+    "#FFFACD", // Lemon chiffon
+  ]
+
+  for (let i = 0; i < 400; i++) {
+    const x = seededRandom(seed, i)
+    const y = seededRandom(seed, i + 1000)
+    const size = seededRandom(seed, i + 2000)
+    const opacity = seededRandom(seed, i + 3000)
+    const colorIndex = Math.floor(seededRandom(seed, i + 4000) * starColors.length)
+    const twinkleSpeed = seededRandom(seed, i + 5000)
+
+    backgroundStars.push({
+      x: x * 100,
+      y: y * 100,
+      size: size * 3 + 0.5,
+      opacity: opacity * 0.9 + 0.3,
+      color: starColors[colorIndex],
+      twinkleSpeed: twinkleSpeed * 2 + 1,
+    })
+  }
+  return backgroundStars
+}
+
+// Filter anomalies by current sector
+export const filterAnomaliesBySector = (anomalies: Anomaly[], sectorX: number, sectorY: number): Anomaly[] => {
+  const sectorName = generateSectorName(sectorX, sectorY)
+  return anomalies.filter((anomaly) => anomaly.sector === sectorName)
+};
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index f9d6db916..17b7d3b8b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,42 +2,6 @@
 # yarn lockfile v1
 
 
-"@ai-sdk/provider-utils@2.1.10":
-  version "2.1.10"
-  resolved "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-2.1.10.tgz"
-  integrity sha512-4GZ8GHjOFxePFzkl3q42AU0DQOtTQ5w09vmaWUf/pKFXJPizlnzKSUkF0f+VkapIUfDugyMqPMT1ge8XQzVI7Q==
-  dependencies:
-    "@ai-sdk/provider" "1.0.9"
-    eventsource-parser "^3.0.0"
-    nanoid "^3.3.8"
-    secure-json-parse "^2.7.0"
-
-"@ai-sdk/provider@1.0.9":
-  version "1.0.9"
-  resolved "https://registry.npmjs.org/@ai-sdk/provider/-/provider-1.0.9.tgz"
-  integrity sha512-jie6ZJT2ZR0uVOVCDc9R2xCX5I/Dum/wEK28lx21PJx6ZnFAN9EzD2WsPhcDWfCgGx3OAZZ0GyM3CEobXpa9LA==
-  dependencies:
-    json-schema "^0.4.0"
-
-"@ai-sdk/react@1.1.18":
-  version "1.1.18"
-  resolved "https://registry.npmjs.org/@ai-sdk/react/-/react-1.1.18.tgz"
-  integrity sha512-2wlWug6NVAc8zh3pgqtvwPkSNTdA6Q4x9CmrNXCeHcXfJkJ+MuHFQz/I7Wb7mLRajf0DAxsFLIhHyBCEuTkDNw==
-  dependencies:
-    "@ai-sdk/provider-utils" "2.1.10"
-    "@ai-sdk/ui-utils" "1.1.16"
-    swr "^2.2.5"
-    throttleit "2.1.0"
-
-"@ai-sdk/ui-utils@1.1.16":
-  version "1.1.16"
-  resolved "https://registry.npmjs.org/@ai-sdk/ui-utils/-/ui-utils-1.1.16.tgz"
-  integrity sha512-jfblR2yZVISmNK2zyNzJZFtkgX57WDAUQXcmn3XUBJyo8LFsADu+/vYMn5AOyBi9qJT0RBk11PEtIxIqvByw3Q==
-  dependencies:
-    "@ai-sdk/provider" "1.0.9"
-    "@ai-sdk/provider-utils" "2.1.10"
-    zod-to-json-schema "^3.24.1"
-
 "@alloc/quick-lru@^5.2.0":
   version "5.2.0"
   resolved "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz"
@@ -1698,11 +1662,6 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@opentelemetry/api@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.npmjs.org/@opentelemetry/api/-/api-1.9.0.tgz"
-  integrity sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==
-
 "@parcel/watcher-android-arm64@2.4.1":
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.4.1.tgz#c2c19a3c442313ff007d2d7a9c2c1dd3e1c9ca84"
@@ -2005,6 +1964,26 @@
   resolved "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz"
   integrity sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==
 
+"@radix-ui/react-dialog@1.1.7":
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.1.7.tgz#c826d997d9e512bd2a2adb3245bb9dffe56e02aa"
+  integrity sha512-EIdma8C0C/I6kL6sO02avaCRqi3fmWJpxH6mqbVScorW6nNktzKJT/le7VPho3o/7wCsyRg3z0+Q+Obr0Gy/VQ==
+  dependencies:
+    "@radix-ui/primitive" "1.1.2"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-dismissable-layer" "1.1.6"
+    "@radix-ui/react-focus-guards" "1.1.2"
+    "@radix-ui/react-focus-scope" "1.1.3"
+    "@radix-ui/react-id" "1.1.1"
+    "@radix-ui/react-portal" "1.1.5"
+    "@radix-ui/react-presence" "1.1.3"
+    "@radix-ui/react-primitive" "2.0.3"
+    "@radix-ui/react-slot" "1.2.0"
+    "@radix-ui/react-use-controllable-state" "1.1.1"
+    aria-hidden "^1.2.4"
+    react-remove-scroll "^2.6.3"
+
 "@radix-ui/react-dialog@^1.1.13":
   version "1.1.13"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.1.13.tgz#8c868a97ec70765efb125fd48708c9993c7ae683"
@@ -2025,26 +2004,6 @@
     aria-hidden "^1.2.4"
     react-remove-scroll "^2.6.3"
 
-"@radix-ui/react-dialog@^1.1.7":
-  version "1.1.7"
-  resolved "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.7.tgz"
-  integrity sha512-EIdma8C0C/I6kL6sO02avaCRqi3fmWJpxH6mqbVScorW6nNktzKJT/le7VPho3o/7wCsyRg3z0+Q+Obr0Gy/VQ==
-  dependencies:
-    "@radix-ui/primitive" "1.1.2"
-    "@radix-ui/react-compose-refs" "1.1.2"
-    "@radix-ui/react-context" "1.1.2"
-    "@radix-ui/react-dismissable-layer" "1.1.6"
-    "@radix-ui/react-focus-guards" "1.1.2"
-    "@radix-ui/react-focus-scope" "1.1.3"
-    "@radix-ui/react-id" "1.1.1"
-    "@radix-ui/react-portal" "1.1.5"
-    "@radix-ui/react-presence" "1.1.3"
-    "@radix-ui/react-primitive" "2.0.3"
-    "@radix-ui/react-slot" "1.2.0"
-    "@radix-ui/react-use-controllable-state" "1.1.1"
-    aria-hidden "^1.2.4"
-    react-remove-scroll "^2.6.3"
-
 "@radix-ui/react-direction@1.1.0":
   version "1.1.0"
   resolved "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz"
@@ -2415,9 +2374,9 @@
   dependencies:
     "@radix-ui/react-slot" "1.2.3"
 
-"@radix-ui/react-progress@^1.1.0":
+"@radix-ui/react-progress@1.1.0":
   version "1.1.0"
-  resolved "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-progress/-/react-progress-1.1.0.tgz#28c267885ec154fc557ec7a66cb462787312f7e2"
   integrity sha512-aSzvnYpP725CROcxAOEBVZZSIQVQdHgBr2QQFKySsaD14u8dNT0batuXI+AAGDdAHfXH8rbnHmjYFqVJ21KkRg==
   dependencies:
     "@radix-ui/react-context" "1.1.0"
@@ -2523,21 +2482,6 @@
     "@radix-ui/react-use-callback-ref" "1.1.1"
     "@radix-ui/react-use-controllable-state" "1.2.2"
 
-"@radix-ui/react-scroll-area@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.0.tgz"
-  integrity sha512-q2jMBdsJ9zB7QG6ngQNzNwlvxLQqONyL58QbEGwuyRZZb/ARQwk3uQVbCF7GvQVOtV6EU/pDxAw3zRzJZI3rpQ==
-  dependencies:
-    "@radix-ui/number" "1.1.0"
-    "@radix-ui/primitive" "1.1.0"
-    "@radix-ui/react-compose-refs" "1.1.0"
-    "@radix-ui/react-context" "1.1.1"
-    "@radix-ui/react-direction" "1.1.0"
-    "@radix-ui/react-presence" "1.1.1"
-    "@radix-ui/react-primitive" "2.0.0"
-    "@radix-ui/react-use-callback-ref" "1.1.0"
-    "@radix-ui/react-use-layout-effect" "1.1.0"
-
 "@radix-ui/react-scroll-area@^1.2.8":
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.8.tgz#98a11fe9ca086e403d5c8b5b4c8f781439b45e68"
@@ -2553,6 +2497,21 @@
     "@radix-ui/react-use-callback-ref" "1.1.1"
     "@radix-ui/react-use-layout-effect" "1.1.1"
 
+"@radix-ui/react-scroll-area@^1.2.9":
+  version "1.2.9"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.9.tgz#90c49bd3231d7f0796d5d12dabc065afa829cf07"
+  integrity sha512-YSjEfBXnhUELsO2VzjdtYYD4CfQjvao+lhhrX5XsHD7/cyUNzljF1FHEbgTPN7LH2MClfwRMIsYlqTYpKTTe2A==
+  dependencies:
+    "@radix-ui/number" "1.1.1"
+    "@radix-ui/primitive" "1.1.2"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-direction" "1.1.1"
+    "@radix-ui/react-presence" "1.1.4"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-use-callback-ref" "1.1.1"
+    "@radix-ui/react-use-layout-effect" "1.1.1"
+
 "@radix-ui/react-select@^2.2.4":
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-select/-/react-select-2.2.4.tgz#56eeffd9d5ee23392bba4635e7ae3f381ada793d"
@@ -2662,7 +2621,7 @@
   dependencies:
     "@radix-ui/react-compose-refs" "1.1.0"
 
-"@radix-ui/react-slot@1.1.2", "@radix-ui/react-slot@^1.1.2":
+"@radix-ui/react-slot@1.1.2":
   version "1.1.2"
   resolved "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz"
   integrity sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==
@@ -2690,9 +2649,9 @@
   dependencies:
     "@radix-ui/react-compose-refs" "1.1.2"
 
-"@radix-ui/react-switch@^1.1.3":
+"@radix-ui/react-switch@1.1.3":
   version "1.1.3"
-  resolved "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.1.3.tgz"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-switch/-/react-switch-1.1.3.tgz#cb6386909d1d3f65a2b81a3b15da8c91d18f49b0"
   integrity sha512-1nc+vjEOQkJVsJtWPSiISGT6OKm4SiOdjMo+/icLxo2G4vxz1GntC5MzfL4v8ey9OEfw787QCD1y3mUv0NiFEQ==
   dependencies:
     "@radix-ui/primitive" "1.1.1"
@@ -3701,11 +3660,6 @@
     "@types/d3-transition" "*"
     "@types/d3-zoom" "*"
 
-"@types/diff-match-patch@^1.0.36":
-  version "1.0.36"
-  resolved "https://registry.npmjs.org/@types/diff-match-patch/-/diff-match-patch-1.0.36.tgz"
-  integrity sha512-xFdR6tkm0MWvBfO8xXCSsinYxHcqkQUlcHeSpMC2ukzOb6lwQAfDmW+Qt0AvlGd8HpsS28qKsB+oPeJn9I39jg==
-
 "@types/draco3d@^1.4.0":
   version "1.4.10"
   resolved "https://registry.npmjs.org/@types/draco3d/-/draco3d-1.4.10.tgz"
@@ -3813,7 +3767,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-reconciler@^0.28.0", "@types/react-reconciler@^0.28.2":
+"@types/react-reconciler@^0.28.0":
   version "0.28.8"
   resolved "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.8.tgz"
   integrity sha512-SN9c4kxXZonFhbX4hJrZy37yw9e7EIxcpHCxQv5JUS18wDE5ovkQKlqQEkufdJCCMfuI9BnjUJvhYeJ9x5Ra7g==
@@ -3949,18 +3903,6 @@ aggregate-error@^3.0.0:
     clean-stack "^2.0.0"
     indent-string "^4.0.0"
 
-ai@^4.1.46:
-  version "4.1.46"
-  resolved "https://registry.npmjs.org/ai/-/ai-4.1.46.tgz"
-  integrity sha512-VTvAktT69IN1qcNAv7OlcOuR0q4HqUlhkVacrWmMlEoprYykF9EL5RY8IECD5d036Wqg0walwbSKZlA2noHm1A==
-  dependencies:
-    "@ai-sdk/provider" "1.0.9"
-    "@ai-sdk/provider-utils" "2.1.10"
-    "@ai-sdk/react" "1.1.18"
-    "@ai-sdk/ui-utils" "1.1.16"
-    "@opentelemetry/api" "1.9.0"
-    jsondiffpatch "0.6.0"
-
 ajv-formats@^2.1.1:
   version "2.1.1"
   resolved "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz"
@@ -4000,11 +3942,6 @@ ajv@^8.0.0, ajv@^8.6.0, ajv@^8.9.0:
     json-schema-traverse "^1.0.0"
     require-from-string "^2.0.2"
 
-alea@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/alea/-/alea-1.0.1.tgz"
-  integrity sha512-QU+wv+ziDXaMxRdsQg/aH7sVfWdhKps5YP97IIwFkHCsbDZA3k87JXoZ5/iuemf4ntytzIWeScrRpae8+lDrXA==
-
 ansi-regex@^5.0.1:
   version "5.0.1"
   resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz"
@@ -4414,11 +4351,6 @@ chalk@^4.0.2:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chalk@^5.3.0:
-  version "5.4.1"
-  resolved "https://registry.npmjs.org/chalk/-/chalk-5.4.1.tgz"
-  integrity sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==
-
 chokidar@^3.5.3:
   version "3.6.0"
   resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz"
@@ -4586,14 +4518,6 @@ core-js-compat@^3.38.0, core-js-compat@^3.38.1:
   dependencies:
     browserslist "^4.24.2"
 
-cors@^2.8.5:
-  version "2.8.5"
-  resolved "https://registry.yarnpkg.com/cors/-/cors-2.8.5.tgz#eac11da51592dd86b9f06f6e7ac293b3df875d29"
-  integrity sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==
-  dependencies:
-    object-assign "^4"
-    vary "^1"
-
 cosmiconfig@^7.0.0:
   version "7.1.0"
   resolved "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz"
@@ -5028,11 +4952,6 @@ delayed-stream@~1.0.0:
   resolved "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz"
   integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
 
-dequal@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz"
-  integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
-
 detect-gpu@^5.0.56:
   version "5.0.57"
   resolved "https://registry.npmjs.org/detect-gpu/-/detect-gpu-5.0.57.tgz"
@@ -5068,11 +4987,6 @@ didyoumean@^1.2.2:
   resolved "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz"
   integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
 
-diff-match-patch@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.5.tgz"
-  integrity sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==
-
 dir-glob@^3.0.1:
   version "3.0.1"
   resolved "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz"
@@ -5267,11 +5181,6 @@ event-target-shim@^5.0.0:
   resolved "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz"
   integrity sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==
 
-eventsource-parser@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-3.0.0.tgz"
-  integrity sha512-T1C0XCUimhxVQzW4zFipdx0SficT651NnkR0ZSH3yQwh+mFMdLfgjABVi4YtMTtaL4s168593DaoaRLMqryavA==
-
 exenv@^1.2.0:
   version "1.2.2"
   resolved "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz"
@@ -5779,11 +5688,6 @@ inherits@2, inherits@^2.0.1:
   resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
-input-otp@^1.2.4:
-  version "1.2.5"
-  resolved "https://registry.npmjs.org/input-otp/-/input-otp-1.2.5.tgz"
-  integrity sha512-XoRSZyr5NaK++/Ml/0bsTycKiSq9M5u6fWgG5Cqjldj6+ontrKnPRqn+6Bo4fzUwoMXRenUdacVfR7Y68gldKw==
-
 internal-slot@^1.0.7:
   version "1.0.7"
   resolved "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz"
@@ -6002,7 +5906,7 @@ isexe@^2.0.0:
   resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
-its-fine@^1.0.6, its-fine@^1.1.1:
+its-fine@^1.0.6:
   version "1.2.5"
   resolved "https://registry.npmjs.org/its-fine/-/its-fine-1.2.5.tgz"
   integrity sha512-fXtDA0X0t0eBYAGLVM5YsgJGsJ5jEmqZEPrGbzdf5awjv0xE7nqv3TVnvtUF060Tkes15DbDAKW/I48vsb6SyA==
@@ -6122,15 +6026,6 @@ json5@^2.1.2, json5@^2.2.0, json5@^2.2.3:
   resolved "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
 
-jsondiffpatch@0.6.0:
-  version "0.6.0"
-  resolved "https://registry.npmjs.org/jsondiffpatch/-/jsondiffpatch-0.6.0.tgz"
-  integrity sha512-3QItJOXp2AP1uv7waBkao5nCvhEv+QmJAd38Ybq7wNI74Q+BBmnLn4EDKz6yI9xGAIQoUF87qHt+kc1IVxB4zQ==
-  dependencies:
-    "@types/diff-match-patch" "^1.0.36"
-    chalk "^5.3.0"
-    diff-match-patch "^1.0.5"
-
 jsonfile@^6.0.1:
   version "6.1.0"
   resolved "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz"
@@ -6434,11 +6329,6 @@ nanoid@^3.3.6, nanoid@^3.3.7:
   resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz"
   integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
 
-nanoid@^3.3.8:
-  version "3.3.8"
-  resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz"
-  integrity sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==
-
 next-pwa@^5.6.0:
   version "5.6.0"
   resolved "https://registry.npmjs.org/next-pwa/-/next-pwa-5.6.0.tgz"
@@ -6511,7 +6401,7 @@ normalize-range@^0.1.2:
   resolved "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz"
   integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
 
-object-assign@^4, object-assign@^4.0.1, object-assign@^4.1.1:
+object-assign@^4.0.1, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
@@ -7209,11 +7099,6 @@ react-composer@^5.0.3:
   dependencies:
     prop-types "^15.6.0"
 
-react-day-picker@^8.10.1:
-  version "8.10.1"
-  resolved "https://registry.npmjs.org/react-day-picker/-/react-day-picker-8.10.1.tgz"
-  integrity sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==
-
 react-dom@^18.2.0, react-dom@^18.3.1:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz"
@@ -7229,16 +7114,6 @@ react-dom@^19.1.0:
   dependencies:
     scheduler "^0.26.0"
 
-react-hook-form@^7.53.0:
-  version "7.53.1"
-  resolved "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.53.1.tgz"
-  integrity sha512-6aiQeBda4zjcuaugWvim9WsGqisoUk+etmFEsSUMm451/Ic8L/UAb7sRtMj3V+Hdzm6mMjU1VhiSzYUZeBm0Vg==
-
-react-icons@^5.3.0:
-  version "5.3.0"
-  resolved "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz"
-  integrity sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==
-
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
@@ -7249,16 +7124,6 @@ react-is@^18.0.0, react-is@^18.2.0:
   resolved "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz"
   integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
 
-react-konva@^18.2.10:
-  version "18.2.10"
-  resolved "https://registry.npmjs.org/react-konva/-/react-konva-18.2.10.tgz"
-  integrity sha512-ohcX1BJINL43m4ynjZ24MxFI1syjBdrXhqVxYVDw2rKgr3yuS0x/6m1Y2Z4sl4T/gKhfreBx8KHisd0XC6OT1g==
-  dependencies:
-    "@types/react-reconciler" "^0.28.2"
-    its-fine "^1.1.1"
-    react-reconciler "~0.29.0"
-    scheduler "^0.23.0"
-
 react-layout-kit@^1.9.0:
   version "1.9.0"
   resolved "https://registry.npmjs.org/react-layout-kit/-/react-layout-kit-1.9.0.tgz"
@@ -7297,14 +7162,6 @@ react-reconciler@^0.31.0:
   dependencies:
     scheduler "^0.25.0"
 
-react-reconciler@~0.29.0:
-  version "0.29.2"
-  resolved "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.29.2.tgz"
-  integrity sha512-zZQqIiYgDCTP/f1N/mAR10nJGrPD2ZR+jDSEsKWJHYC7Cm2wodlwbR3upZRdC3cjIjSlTLNVyO7Iu0Yy7t2AYg==
-  dependencies:
-    loose-envify "^1.1.0"
-    scheduler "^0.23.2"
-
 react-redux@^8.1.3:
   version "8.1.3"
   resolved "https://registry.npmjs.org/react-redux/-/react-redux-8.1.3.tgz"
@@ -7599,7 +7456,7 @@ scheduler@^0.21.0:
   dependencies:
     loose-envify "^1.1.0"
 
-scheduler@^0.23.0, scheduler@^0.23.2:
+scheduler@^0.23.2:
   version "0.23.2"
   resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz"
   integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
@@ -7642,11 +7499,6 @@ scroll-into-view-if-needed@^3.1.0:
   dependencies:
     compute-scroll-into-view "^3.0.2"
 
-secure-json-parse@^2.7.0:
-  version "2.7.0"
-  resolved "https://registry.npmjs.org/secure-json-parse/-/secure-json-parse-2.7.0.tgz"
-  integrity sha512-6aU+Rwsezw7VR8/nyvKTx8QpWH9FrcYiXXlqC4z5d5XQBDRqtbfsRjnwGyqbi3gddNtWHuEk9OANUotL26qKUw==
-
 semver@^6.0.0, semver@^6.3.1:
   version "6.3.1"
   resolved "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz"
@@ -8051,14 +7903,6 @@ suspend-react@^0.1.3:
   resolved "https://registry.npmjs.org/suspend-react/-/suspend-react-0.1.3.tgz"
   integrity sha512-aqldKgX9aZqpoDp3e8/BZ8Dm7x1pJl+qI3ZKxDN0i/IQTWUwBx/ManmlVJ3wowqbno6c2bmiIfs+Um6LbsjJyQ==
 
-swr@^2.2.5:
-  version "2.3.2"
-  resolved "https://registry.npmjs.org/swr/-/swr-2.3.2.tgz"
-  integrity sha512-RosxFpiabojs75IwQ316DGoDRmOqtiAj0tg8wCcbEu4CiLZBs/a9QNtHV7TUfDXmmlgqij/NqzKq/eLelyv9xA==
-  dependencies:
-    dequal "^2.0.3"
-    use-sync-external-store "^1.4.0"
-
 tabbable@^6.0.0:
   version "6.2.0"
   resolved "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz"
@@ -8211,11 +8055,6 @@ throttle-debounce@^5.0.0, throttle-debounce@^5.0.2:
   resolved "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-5.0.2.tgz"
   integrity sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A==
 
-throttleit@2.1.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/throttleit/-/throttleit-2.1.0.tgz"
-  integrity sha512-nt6AMGKW1p/70DF/hGBdJB57B8Tspmbp5gfJ8ilhLnt7kkr2ye7hzD6NVG8GGErk2HWF34igrL2CXmNIkzKqKw==
-
 tiny-invariant@^1.0.6:
   version "1.3.3"
   resolved "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz"
@@ -8517,11 +8356,6 @@ utrie@^1.0.2:
   dependencies:
     base64-arraybuffer "^1.0.2"
 
-vary@^1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
-  integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
-
 warning@^4.0.3:
   version "4.0.3"
   resolved "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz"
@@ -8838,11 +8672,6 @@ yaml@^2.3.4:
   resolved "https://registry.npmjs.org/yaml/-/yaml-2.6.0.tgz"
   integrity sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ==
 
-zod-to-json-schema@^3.24.1:
-  version "3.24.3"
-  resolved "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.24.3.tgz"
-  integrity sha512-HIAfWdYIt1sssHfYZFCXp4rU1w2r8hVVXYIlmoa0r0gABLs5di3RCqPU5DDROogVz1pAdYBaz7HK5n9pSUNs3A==
-
 zod-validation-error@^3.0.3:
   version "3.4.0"
   resolved "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-3.4.0.tgz"