diff --git a/app/scenes/mining/page.tsx b/app/scenes/mining/page.tsx
index 040b4616..02e37f14 100644
--- a/app/scenes/mining/page.tsx
+++ b/app/scenes/mining/page.tsx
@@ -5,10 +5,10 @@ import { useActivePlanet } from "@/context/ActivePlanet";
 import MineralDeposits from "@/components/Structures/Mining/Archive/AvailableDeposits";
 import { SelectMineralPanel } from "@/components/Structures/Mining/Archive/MiningPanels";
 import MineralsInventoryGrid from "@/components/Inventory/mineralsPanel";
-import { MiningComponentComponent } from "@/components/Structures/Mining/Mining";
-import { Card } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
+import { MiningComponent } from "@/components/Structures/Mining/Mining";
 import StarnetLayout from "@/components/Layout/Starnet";
+import { EarthActionSceneLayout, EarthViewLayout } from "@/components/(scenes)/planetScene/layout";
+import StructureMissionGuide from "@/components/Layout/Guide";
 
 enum Step {
   MineralDeposits = "MINERAL_DEPOSITS",
@@ -17,14 +17,10 @@ enum Step {
 
 export default function Mining() {
   return (
-    <StarnetLayout>
-      <main className="container mx-auto px-4 relative z-10">
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-
-        </div>
-        <MiningComponentComponent />
-      </main>
-    </StarnetLayout>
+    <EarthActionSceneLayout>
+        <MiningComponent />
+        <StructureMissionGuide />
+    </EarthActionSceneLayout>
   );
 };
 
diff --git a/components/(scenes)/planetScene/layout.tsx b/components/(scenes)/planetScene/layout.tsx
index bce223bb..155a77b3 100644
--- a/components/(scenes)/planetScene/layout.tsx
+++ b/components/(scenes)/planetScene/layout.tsx
@@ -17,8 +17,8 @@ interface PlanetViewLayoutProps {
   children: React.ReactNode[];
 };
 
-interface PlanetViewLayoutProps {
-  children: React.ReactNode[];
+interface PlanetActionSceneProps {
+  children: React.ReactNode;
 };
 
 const PlanetViewLayout: React.FC<PlanetViewLayoutProps> = ({ children }) => {
@@ -170,7 +170,7 @@ export const EarthViewLayout: React.FC<PlanetViewLayoutProps> = ({
       />
 
       <div className="relative flex flex-1 z-10">
-        <VerticalToolbar />
+        {/* <VerticalToolbar /> */}
 
         <div className="relative flex flex-col flex-1">
           {children.slice(0, 2).map((child, index) => (
@@ -202,4 +202,19 @@ export const EarthViewLayout: React.FC<PlanetViewLayoutProps> = ({
       </div>
     </div>
   );
+};
+
+export const EarthActionSceneLayout:  React.FC<PlanetActionSceneProps> = ({
+  children,
+}) => {
+  return (
+    <div className="relative min-h-screen 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"
+      />
+      {children}
+    </div>
+  );
 };
\ No newline at end of file
diff --git a/components/Layout/BottomMenu.tsx b/components/Layout/BottomMenu.tsx
index 8210ccb0..70949701 100644
--- a/components/Layout/BottomMenu.tsx
+++ b/components/Layout/BottomMenu.tsx
@@ -1,11 +1,11 @@
-import { Globe, Rss, HelpCircle, Star } from "lucide-react";
+import { Globe, HelpCircle, Star, Pickaxe } from "lucide-react";
 import { usePathname } from "next/navigation";    
 import Link from "next/link";
 import { useState } from "react";
 
 const menuItems = [
   { icon: Globe, label: "Planet", href: "/" },
-  { icon: Rss, label: "Mining", href: "/scenes/mining" },
+  { icon: Pickaxe, label: "Mining", href: "/scenes/mining" },
   { icon: Star, label: "Travel", href: "/scenes/travel" },
   {
     icon: HelpCircle,
diff --git a/components/Layout/Guide.tsx b/components/Layout/Guide.tsx
index 6bfd228e..57bd4e95 100644
--- a/components/Layout/Guide.tsx
+++ b/components/Layout/Guide.tsx
@@ -2,9 +2,10 @@ import React, { useEffect, useState } from "react";
 import { Button } from "../ui/button";
 import { Card, CardContent } from "../ui/card";
 import { motion, AnimatePresence } from "framer-motion";
-import { ChevronLeft, ChevronRight, CloudHail, HelpCircle, LightbulbIcon, Telescope, TreeDeciduous } from "lucide-react";
+import { ChevronLeft, ChevronRight, CloudHail, HelpCircle, LightbulbIcon, LucideTestTubeDiagonal, Pickaxe, Telescope, TestTube2, TreeDeciduous } from "lucide-react";
 import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import MissionPathway from "../Missions/Pathway";
+import { useActivePlanet } from "@/context/ActivePlanet";
 
 interface Mission {
     id: number;
@@ -12,6 +13,7 @@ interface Mission {
     description: string;
     icon: React.ElementType;
     color: string;
+    requiredItem?: number;
 };
 
 interface DialogueStep {
@@ -26,6 +28,7 @@ const astronomyMissions: Mission[] = [
         description: "Click on the 'Telescope' structure to make some classifications",
         icon: Telescope,
         color: 'text-cyan-300',
+        requiredItem: 3103,
     },
     {
         id: 10000001,
@@ -43,6 +46,7 @@ const biologistMissions: Mission[] = [
         description: "Click on the 'Biodome' structure to make some classifications",
         icon: TreeDeciduous,
         color: 'text-green-300',
+        requiredItem: 3104,
     },
 ];
 
@@ -53,23 +57,53 @@ const meteorologyMissions: Mission[] = [
         description: "Click on your LIDAR module to make some classifications",
         icon: CloudHail,
         color: 'text-blue-300',
+        requiredItem: 3105,
+    },
+];
+
+const globalMissions: Mission[] = [
+    {
+        id: 200000015,
+        name: "Research a new module",
+        description: 'Click on your structure and then the "Research" tab to unlock new projects and data sources to contribute to!',
+        icon: TestTube2,
+        color: 'text-purple-300',
+    },
+    {
+        id: 200000013,
+        name: "Collect some fuel",
+        description: "Click on the mining tab to visit some mineral deposits your probes have found and mine them for fuel",
+        icon: Pickaxe,
+        color: 'text-red-300',
+    },
+    {
+        id: 30000001,
+        name: "Discover a new planet",
+        description: "Create and use a telescope to discover a new planet using the Planet Hunters module",
+        icon: Telescope,
+        color: 'text-purple-300',
     },
 ];
 
 // Research station - walk the user through this. Then upload data, verify/vet (consensus), then we introduce travel. Add a "close"/swipe-down option so that the tutorial section can be hidden/minimised. Then we go through the guide for the different views....and determine the differentials from Pathway.tsx and this new list
 // As well as researching for other projects/mission modules that aren't in `mission-selector`
+// We'll also need to update this for different planets & chapters
 
 const dialogueSteps: DialogueStep[] = [
 
 ];
 
-export default function StructureMissionGuide() {
+const StructureMissionGuide = () => {
     const supabase = useSupabaseClient();
     const session = useSession();
+    const { activePlanet } = useActivePlanet();
+
     const [completedMissions, setCompletedMissions] = useState<number[]>([]);
     const [loading, setLoading] = useState(true);
     const [currentCategory, setCurrentCategory] = useState(0);
-    const [minimized, setMinimized] = useState(false);  // State to handle minimization
+    const [minimized, setMinimized] = useState(false);
+    const [ownedItems, setOwnedItems] = useState<number[]>([]);
+    const [scrollableMissions, setScrollableMissions] = useState<Mission[]>([]);
 
     const categories = [
         { missions: astronomyMissions, name: 'Astronomer' },
@@ -78,43 +112,67 @@ export default function StructureMissionGuide() {
     ];
 
     useEffect(() => {
-        async function fetchCompletedMissions() {
-            if (!session?.user?.id) return;
-
-            const { data, error } = await supabase
-                .from('missions')
-                .select('mission')
-                .eq('user', session.user.id);
-
-            if (error) {
-                console.error("Error fetching completed missions:", error);
-            } else {
-                const completedMissionIds = data.map((mission: { mission: number }) => mission.mission);
+        async function fetchInventoryAndCompletedMissions() {
+            if (!session?.user?.id || !activePlanet?.id) return;
+
+            try {
+                const { data: inventoryData, error: inventoryError } = await supabase
+                    .from('inventory')
+                    .select('item')
+                    .eq('owner', session.user.id)
+                    .eq('anomaly', activePlanet.id)
+                    .in('item', [3103, 3104, 3105, 3106]);
+
+                if (inventoryError) throw inventoryError;
+
+                const ownedItems = inventoryData.map((inv: { item: number }) => inv.item);
+                setOwnedItems(ownedItems);
+
+                const { data: missionData, error: missionError } = await supabase
+                    .from('missions')
+                    .select('mission')
+                    .eq('user', session.user.id);
+
+                if (missionError) throw missionError;
+
+                const completedMissionIds = missionData.map((mission: { mission: number }) => mission.mission);
                 setCompletedMissions(completedMissionIds);
+
+                if (ownedItems.includes(3103)) {
+                    setCurrentCategory(0); // Astronomy
+                } else if (ownedItems.includes(3104)) {
+                    setCurrentCategory(1); // Biology
+                } else if (ownedItems.includes(3105)) {
+                    setCurrentCategory(2); // Meteorology
+                } else {
+                    setCurrentCategory(Math.floor(Math.random() * categories.length)); // Random category if no specific items are owned
+                }
+            } catch (error) {
+                console.error("Error fetching inventory or missions:", error);
             }
 
             setLoading(false);
         }
 
-        fetchCompletedMissions();
-    }, [session, supabase]);
-
-    const handleNextCategory = () => {
-        setCurrentCategory((prevCategory) => (prevCategory + 1) % categories.length);
-    };
-
-    const handlePreviousCategory = () => {
-        setCurrentCategory((prevCategory) => (prevCategory - 1 + categories.length) % categories.length);
-    };
+        fetchInventoryAndCompletedMissions();
+    }, [session, activePlanet, supabase]);
 
-    const toggleMinimize = () => {
-        setMinimized(!minimized);
+    useEffect(() => {
+        const missionsToDisplay = [
+            ...categories[currentCategory].missions.slice(0, 2), // Get only the first 2 missions
+            ...globalMissions.slice(0, 2), // Add 2 global missions
+        ];
+        setScrollableMissions(missionsToDisplay);
+    }, [currentCategory]);
+
+    const userHasRequiredItem = (requiredItem?: number) => {
+        return requiredItem ? ownedItems.includes(requiredItem) : false;
     };
 
     return (
         <div className="p-4 max-w-6xl mx-auto font-mono">
             {minimized ? (
-                <Button onClick={toggleMinimize} className="bg-blue-600 text-white flex items-center space-x-2">
+                <Button onClick={() => setMinimized(false)} className="bg-blue-600 text-white flex items-center space-x-2">
                     <HelpCircle className="w-5 h-5" />
                     <span>Help</span>
                 </Button>
@@ -122,13 +180,11 @@ export default function StructureMissionGuide() {
                 <Card className="overflow-hidden relative bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 border-2 border-gray-700">
                     <CardContent className="p-4">
                         <div className="flex justify-between mb-4 items-center">
-                            {/* Mission Group Header */}
                             <h2 className="text-xl font-semibold text-gray-300">
-                                Mission guide for {categories[currentCategory].name} pathway
+                                Mission Guide for {categories[currentCategory].name} Pathway
                             </h2>
-
                             <Button
-                                onClick={toggleMinimize}
+                                onClick={() => setMinimized(true)}
                                 className="bg-gray-700 text-gray-300 hover:bg-gray-600 px-2 py-1 text-sm"
                             >
                                 Minimize
@@ -137,50 +193,60 @@ export default function StructureMissionGuide() {
 
                         <div className="flex justify-between mb-4">
                             <Button
-                                onClick={handlePreviousCategory}
-                                className="bg-gray-700 text-gray-300 hover:bg-gray-600 px-2 py-1 text-sm"
+                                onClick={() => setCurrentCategory((currentCategory - 1 + categories.length) % categories.length)}
+                                className="bg-gray-700 text-gray-300 hover:bg-gray-600 p-2"
+                                disabled={categories.length <= 1}
                             >
-                                <ChevronLeft className="h-4 w-4" />
+                                <ChevronLeft />
                             </Button>
                             <Button
-                                onClick={handleNextCategory}
-                                className="bg-blue-600 text-white hover:bg-blue-500 px-2 py-1 text-sm"
+                                onClick={() => setCurrentCategory((currentCategory + 1) % categories.length)}
+                                className="bg-gray-700 text-gray-300 hover:bg-gray-600 p-2"
+                                disabled={categories.length <= 1}
                             >
-                                <ChevronRight className="h-4 w-4" />
+                                <ChevronRight />
                             </Button>
                         </div>
 
-                        <div className="grid grid-cols-1 gap-2">
-                            {loading ? (
-                                <p>Loading missions...</p>
-                            ) : (
-                                categories[currentCategory].missions.map((mission) => (
-                                    <Card
-                                        key={mission.id}
-                                        className={`cursor-pointer hover:shadow-lg transition-all duration-300 ${
-                                            completedMissions.includes(mission.id) ? 'bg-gray-700' : 'bg-gray-800'
-                                        } border border-gray-600 relative overflow-hidden`}
-                                    >
-                                        <CardContent className="p-2 flex items-center">
-                                            <mission.icon className={`w-6 h-6 mr-2 ${mission.color}`} />
-                                            <div>
-                                                <h3 className={`text-xs font-semibold ${mission.color}`}>{mission.name}</h3>
-                                                {completedMissions.includes(mission.id) ? (
-                                                    <p className="text-xs text-gray-400 line-through decoration-dotted decoration-green-400">
-                                                        {mission.description}
-                                                    </p>
-                                                ) : (
-                                                    <p className="text-xs text-gray-400">{mission.description}</p>
-                                                )}
-                                            </div>
-                                        </CardContent>
-                                    </Card>
-                                ))
-                            )}
+                        <div className="mb-4 p-4 border border-gray-600 rounded bg-gray-800 text-gray-200">
+                            <p className="mt-1">
+                                Welcome! Build structures like the Telescope to complete missions and expand your research.
+                                Click the 'Guide' button to view your missions.
+                            </p>
+                        </div>
+
+                        {/* Scrollable Missions Section */}
+                        <div className="overflow-y-auto max-h-40 relative">
+                            <div className="grid grid-cols-1 gap-4">
+                                {scrollableMissions.map((mission) => (
+                                    <div key={mission.id} className="flex">
+                                        <Card
+                                            className={`cursor-pointer hover:shadow-lg transition-all duration-300 ${
+                                                completedMissions.includes(mission.id) ? 'bg-gray-700' : 'bg-gray-800'
+                                            } border border-gray-600 relative overflow-hidden w-full`}
+                                        >
+                                            <CardContent className="p-2 flex items-center">
+                                                <mission.icon className={`w-6 h-6 mr-2 ${mission.color}`} />
+                                                <div>
+                                                    <h3 className={`font-semibold text-gray-300 ${completedMissions.includes(mission.id) ? 'line-through text-green-400' : ''}`}>
+                                                        {mission.name}
+                                                    </h3>
+                                                    <p className="text-gray-400">{mission.description}</p>
+                                                    {userHasRequiredItem(mission.requiredItem) && (
+                                                        <span className="text-green-300 text-sm">Ready to complete!</span>
+                                                    )}
+                                                </div>
+                                            </CardContent>
+                                        </Card>
+                                    </div>
+                                ))}
+                            </div>
                         </div>
                     </CardContent>
                 </Card>
             )}
         </div>
     );
-};
\ No newline at end of file
+};
+
+export default StructureMissionGuide;
\ No newline at end of file
diff --git a/components/Structures/Auto/AllAutomatons.tsx b/components/Structures/Auto/AllAutomatons.tsx
index eefda29c..da3c626d 100644
--- a/components/Structures/Auto/AllAutomatons.tsx
+++ b/components/Structures/Auto/AllAutomatons.tsx
@@ -3,7 +3,7 @@
 import React, { useState, useEffect } from "react";
 import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import { useActivePlanet } from "@/context/ActivePlanet";
-import { MiningComponentComponent } from "../Mining/Mining"; 
+import { MiningComponent } from "../Mining/Mining"; 
 
 interface InventoryItem {
     id: number;
@@ -116,7 +116,7 @@ export default function AllAutomatonsOnActivePlanet() {
                             &times;
                         </button>
 
-                        <MiningComponentComponent />
+                        <MiningComponent />
                     </div>
                 </div>
             )}
diff --git a/components/Structures/Mining/ControlPanel.tsx b/components/Structures/Mining/ControlPanel.tsx
index 88c923ad..4fc6e4d5 100644
--- a/components/Structures/Mining/ControlPanel.tsx
+++ b/components/Structures/Mining/ControlPanel.tsx
@@ -5,37 +5,51 @@ import { useSession, useSupabaseClient } from '@supabase/auth-helpers-react'
 import { useActivePlanet } from '@/context/ActivePlanet'
 import LaunchpadStatus from '../Launchpad/LaunchpadStatus'
 
+type MineralDeposit = {
+  id: string;
+  name: string;
+  quantity: number;
+};
+
 type Rover = {
-  id: string
-  name: string
-  speed: number
-  efficiency: number
-  miningLevel: number
-}
+  id: string;
+  name: string;
+  speed: number;
+  efficiency: number;
+  miningLevel: number;
+};
 
 type Props = {
-  rovers: Rover[] 
-  selectedRover: Rover | null
-  onRoverSelect: (rover: Rover) => void
-  onStartMining: () => void
-  isMining: boolean
-}
+  rovers: Rover[];
+  selectedRover: Rover | null;
+  onRoverSelect: (rover: Rover) => void;
+  onStartMining: () => void;
+  isMining: boolean;
+  selectedDeposit: MineralDeposit | null; 
+};
 
-export function ControlPanel({ rovers = [], selectedRover, onRoverSelect, onStartMining, isMining }: Props) {
-  const [speed, setSpeed] = useState(10)
-  const [efficiency, setEfficiency] = useState(0.8)
-  const [miningLevel, setMiningLevel] = useState(1)
+export function ControlPanel({
+  rovers = [],
+  selectedRover,
+  onRoverSelect,
+  onStartMining,
+  isMining,
+  selectedDeposit,
+}: Props) {
+  const [speed, setSpeed] = useState(10);
+  const [efficiency, setEfficiency] = useState(0.8);
+  const [miningLevel, setMiningLevel] = useState(1);
 
   useEffect(() => {
     if (selectedRover) {
-      setSpeed(selectedRover.speed)
-      setEfficiency(selectedRover.efficiency)
-      setMiningLevel(selectedRover.miningLevel)
+      setSpeed(selectedRover.speed);
+      setEfficiency(selectedRover.efficiency);
+      setMiningLevel(selectedRover.miningLevel);
     }
-  }, [selectedRover])
+  }, [selectedRover]);
 
   const handleRoverSelect = (rover: Rover) => {
-    onRoverSelect(rover)
+    onRoverSelect(rover);
   };
 
   return (
@@ -46,9 +60,13 @@ export function ControlPanel({ rovers = [], selectedRover, onRoverSelect, onStar
           <h3 className="font-bold mb-2 text-[#303F51]">Select Rover</h3>
           <div className="grid grid-cols-2 gap-2">
             {rovers.map(rover => (
-              <div 
-                key={rover.id} 
-                className={`p-2 rounded-lg cursor-pointer ${selectedRover?.id === rover.id ? 'bg-[#85DDA2] text-[#303F51]' : 'bg-[#F7F5E9] hover:bg-[#B9E678] hover:text-[#1D2833]'}`}
+              <div
+                key={rover.id}
+                className={`p-2 rounded-lg cursor-pointer ${
+                  selectedRover?.id === rover.id
+                    ? "bg-[#85DDA2] text-[#303F51]"
+                    : "bg-[#F7F5E9] hover:bg-[#B9E678] hover:text-[#1D2833]"
+                }`}
                 onClick={() => handleRoverSelect(rover)}
               >
                 <div className="flex items-center space-x-2">
@@ -59,68 +77,32 @@ export function ControlPanel({ rovers = [], selectedRover, onRoverSelect, onStar
             ))}
           </div>
         </div>
-        
-        {selectedRover && (
-          <div className="space-y-4 mt-4">
-            <h3 className="font-bold mb-2 text-[#303F51]">Customize Rover</h3>
-            <div>
-              <label className="block text-sm font-medium text-[#2C3A4A]">Speed</label>
-              <input
-                type="range"
-                min={1}
-                max={20}
-                value={speed}
-                onChange={(e) => setSpeed(Number(e.target.value))}
-                className="my-2 w-full"
-              />
-              <span className="text-sm text-[#2C3A4A]">{speed}</span>
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-[#2C3A4A]">Efficiency</label>
-              <input
-                type="range"
-                min={0}
-                max={100}
-                value={efficiency * 100}
-                onChange={(e) => setEfficiency(Number(e.target.value) / 100)}
-                className="my-2 w-full"
-              />
-              <span className="text-sm text-[#2C3A4A]">{(efficiency * 100).toFixed(0)}%</span>
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-[#2C3A4A]">Mining Level</label>
-              <input
-                type="range"
-                min={1}
-                max={5}
-                value={miningLevel}
-                onChange={(e) => setMiningLevel(Number(e.target.value))}
-                className="my-2 w-full"
-              />
-              <span className="text-sm text-[#2C3A4A]">{miningLevel}</span>
-            </div>
+
+        {/* Now you can use selectedDeposit */}
+        {selectedDeposit && (
+          <div>
+            <h3 className="font-bold mb-2 text-[#303F51]">Selected Deposit</h3>
+            <p>
+              Name: {selectedDeposit.name}, Quantity: {selectedDeposit.quantity}
+            </p>
           </div>
         )}
 
         <AddMineralDeposits />
 
         <LaunchpadStatus />
-        
-        <Button 
-          onClick={onStartMining} 
+
+        <Button
+          onClick={onStartMining}
           disabled={isMining || !selectedRover}
           className="w-full mt-4 bg-[#5FCBC3] text-white hover:bg-[#85DDA2]"
         >
-          {isMining ? 'Mining...' : 'Start Mining'}
+          {isMining ? "Mining..." : "Start Mining"}
         </Button>
       </div>
     </div>
   );
-};
-
-
-
-// test
+}
 
 function AddMineralDeposits() {
     const supabase = useSupabaseClient();
diff --git a/components/Structures/Mining/Deposits.tsx b/components/Structures/Mining/Deposits.tsx
index d1689215..10ea8745 100644
--- a/components/Structures/Mining/Deposits.tsx
+++ b/components/Structures/Mining/Deposits.tsx
@@ -4,15 +4,15 @@ import React from "react";
 import { Diamond } from "lucide-react";
 
 export type MineralDeposit = {
-    id: string;
-    mineral: string; 
-    quantity: number;
-    availableAmount: number;
-    level: number; 
-    uses: string[];
-    position: { x: number; y: number };
-  };
-
+  name: string;
+  id: string;
+  mineral: string; 
+  quantity: number;
+  availableAmount: number;
+  level: number; 
+  uses: string[];
+  position: { x: number; y: number };
+};
   type Props = {
     deposits: MineralDeposit[];
     onSelect: (deposit: MineralDeposit) => void;
diff --git a/components/Structures/Mining/Mining.tsx b/components/Structures/Mining/Mining.tsx
index 1a742659..44216d6d 100644
--- a/components/Structures/Mining/Mining.tsx
+++ b/components/Structures/Mining/Mining.tsx
@@ -10,6 +10,7 @@ import { useActivePlanet } from '@/context/ActivePlanet'
 import { Info } from 'lucide-react'
 
 export type MineralDeposit = {
+  name: string;
   id: string;
   mineral: string; 
   quantity: number;
@@ -27,7 +28,7 @@ type Rover = {
   miningLevel: number
 };
 
-export function MiningComponentComponent() {
+export function MiningComponent() {
   const supabase = useSupabaseClient()
   const session = useSession()
   const { activePlanet } = useActivePlanet()
@@ -63,13 +64,14 @@ export function MiningComponentComponent() {
   
       const formattedDeposits = data?.map((deposit) => ({
         id: deposit.id,
+        name: deposit.mineralconfiguration.mineral || "Unknown",
         mineral: deposit.mineralconfiguration.mineral || "Unknown",
         quantity: deposit.mineralconfiguration.quantity || 0, 
         availableAmount: deposit.mineralconfiguration.availableAmount || 0, 
         level: deposit.mineralconfiguration.level || 1,
         uses: deposit.mineralconfiguration.uses || [],
-        position: deposit.mineralconfiguration.position || { x: 0, y: 0 }, 
-      }))
+        position: deposit.mineralconfiguration.position || { x: 50, y: 50 }, 
+      }));      
   
       setMineralDeposits(formattedDeposits || [])
     }
@@ -136,7 +138,6 @@ export function MiningComponentComponent() {
             setRoverPosition({ x: 50, y: 50 });
             setIsMining(false);
   
-            // Mining logic: Insert or update inventory
             const { mineral, quantity } = selectedDeposit;
   
             try {
@@ -168,7 +169,6 @@ export function MiningComponentComponent() {
             }
   
               if (existingItem) {
-                // Update the existing item quantity
                 const newQuantity = existingItem.quantity + quantity;
                 const { error: updateError } = await supabase
                   .from('inventory')
@@ -181,7 +181,6 @@ export function MiningComponentComponent() {
                   console.log(`Updated inventory item. New quantity: ${newQuantity}`);
                 }
               } else {
-                // Insert a new inventory item
                 const { error: insertError } = await supabase
                   .from('inventory')
                   .insert({
@@ -201,7 +200,7 @@ export function MiningComponentComponent() {
             } catch (error) {
               console.error('Error during mining process:', error);
             }
-          }, 5000); // Simulate mining completion delay
+          }, 5000);
         }
       };
   
@@ -209,32 +208,30 @@ export function MiningComponentComponent() {
     };
   };  
 
-  return (
-    <div className="flex flex-col text-[#F7F5E9] bg-[#1D2833] max-w-4xl mx-auto">
-      <div className="flex-1 p-4 overflow-hidden flex flex-col space-y-4">
-        <div className="flex-shrink-0">
-          <TopographicMap 
-            deposits={mineralDeposits} 
-            roverPosition={roverPosition}
-            selectedDeposit={selectedDeposit}
-          />
-        </div>
-        <div className="bg-[#2C4F64] text-[#F7F5E9] p-4 shadow-lg rounded flex-shrink-0">
+  return ( // w-[95%]
+    <div className="relative  h-full">
+      <div className="absolute inset-0 z-0">
+        <TopographicMap 
+          deposits={mineralDeposits} 
+          roverPosition={roverPosition}
+          selectedDeposit={selectedDeposit}
+        />
+      </div>
+  
+      <div className="absolute inset-0 z-10 p-4 space-y-4 flex flex-col">
+        <div className="bg-[#2C4F64] text-[#F7F5E9] p-4 shadow-lg rounded w-full max-w-md mx-auto">
           <h2 className="text-xl font-bold mb-2 flex items-center">
             Inventory
-            {/* <Tooltip content="Your current resources"> */}
-              <Info className="ml-2 h-4 w-4" />
-            {/* </Tooltip> */}
+            <Info className="ml-2 h-4 w-4" />
           </h2>
           <Inventory />
         </div>
+  
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div className="bg-[#2C4F64] rounded-lg p-4 shadow-lg overflow-hidden flex flex-col">
+          <div className="bg-[#2C4F64] rounded-lg p-4 shadow-lg">
             <h2 className="text-xl font-bold mb-4 flex items-center">
               Mineral Deposits
-              {/* <Tooltip content="Select a deposit to mine"> */}
-                <Info className="ml-2 h-4 w-4" />
-              {/* </Tooltip> */}
+              <Info className="ml-2 h-4 w-4" />
             </h2>
             <MineralDepositList 
               deposits={mineralDeposits} 
@@ -242,23 +239,23 @@ export function MiningComponentComponent() {
               selectedDeposit={selectedDeposit}
             />
           </div>
-          <div className="bg-[#2C4F64] rounded-lg p-4 shadow-lg overflow-hidden flex flex-col">
+  
+          <div className="bg-[#2C4F64] rounded-lg p-4 shadow-lg">
             <h2 className="text-xl font-bold mb-4 flex items-center">
-              Control Panel
-              {/* <Tooltip content="Select a rover and start mining"> */}
-                <Info className="ml-2 h-4 w-4" />
-              {/* </Tooltip> */}
+              Rovers
+              <Info className="ml-2 h-4 w-4" />
             </h2>
-            <ControlPanel 
+            <ControlPanel
               rovers={rovers}
               selectedRover={selectedRover}
               onRoverSelect={handleRoverSelect}
               onStartMining={handleStartMining}
-              isMining={isMining}
+              isMining={isMining} 
+              selectedDeposit={selectedDeposit}
             />
           </div>
         </div>
       </div>
     </div>
-  );
+  );  
 };
\ No newline at end of file
diff --git a/components/Structures/Mining/TopographicMap.tsx b/components/Structures/Mining/TopographicMap.tsx
index 6672a7db..0170e189 100644
--- a/components/Structures/Mining/TopographicMap.tsx
+++ b/components/Structures/Mining/TopographicMap.tsx
@@ -16,7 +16,7 @@ type Props = {
     selectedDeposit: MineralDeposit | null;
 };
 
-export function TopographicMap({ deposits = [], roverPosition, selectedDeposit }: Props) {
+export function TopographicMap({ deposits = [], roverPosition, selectedDeposit }: Props) { 
     const canvasRef = useRef<HTMLCanvasElement | null>(null);
 
     useEffect(() => {
@@ -75,7 +75,7 @@ export function TopographicMap({ deposits = [], roverPosition, selectedDeposit }
       }, [deposits]);
 
       return (
-        <div className="relative w-full h-[400px] bg-[#2C3A4A]"> 
+        <div className="relative w-full bg-[#2C3A4A]"> 
           <canvas ref={canvasRef} className="w-full h-full" width={800} height={400} />
           {roverPosition && (
             <motion.div
diff --git a/components/mission-guide.tsx b/components/mission-guide.tsx
deleted file mode 100644
index fe5fc6e9..00000000
--- a/components/mission-guide.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import React, { useState } from 'react'
-import { Button } from "@/components/ui/button"
-import { Card, CardContent } from "@/components/ui/card"
-import { motion, AnimatePresence } from 'framer-motion'
-import { ChevronRight, ChevronLeft, Star, Zap, Target } from 'lucide-react'
-
-interface Mission {
-  id: string
-  name: string
-  description: string
-  icon: React.ElementType
-  color: string
-}
-
-interface DialogueStep {
-  text: string
-  requiredMissions: string[]
-}
-
-const missions: Mission[] = [
-  { id: 'M001', name: 'First Contact', description: 'Establish communication with an alien civilization', icon: Zap, color: 'text-yellow-400' },
-  { id: 'M002', name: 'Stellar Cartography', description: 'Map an unexplored sector of the galaxy', icon: Star, color: 'text-blue-400' },
-  { id: 'M003', name: 'Planetary Terraforming', description: 'Transform a barren planet into a habitable world', icon: Target, color: 'text-green-400' },
-]
-
-const dialogueSteps: DialogueStep[] = [
-  { text: "Welcome, rookie! Your journey into the unknown begins here. Are you ready to make history?", requiredMissions: [] },
-  { text: "Impressive work on your first contact mission! The galaxy is vast, and many more civilizations await discovery.", requiredMissions: ['M001'] },
-  { text: "Your stellar cartography skills are unmatched! But remember, each map holds secrets yet to be uncovered.", requiredMissions: ['M002'] },
-  { text: "A barren world transformed by your hands! You're shaping the future of our species, one planet at a time.", requiredMissions: ['M003'] },
-  { text: "You've mastered communication and navigation. Now, it's time to create new homes among the stars!", requiredMissions: ['M001', 'M002'] },
-  { text: "From first contact to new frontiers, you've come so far. The universe trembles with anticipation of your next move!", requiredMissions: ['M001', 'M002', 'M003'] },
-]
-
-export function MissionGuide() {
-  const [completedMissions, setCompletedMissions] = useState<string[]>([])
-  const [currentStep, setCurrentStep] = useState(0)
-
-  const handleCompleteMission = (missionId: string) => {
-    if (!completedMissions.includes(missionId)) {
-      setCompletedMissions([...completedMissions, missionId])
-    }
-  }
-
-  const handleNext = () => {
-    setCurrentStep((prevStep) => Math.min(prevStep + 1, dialogueSteps.length - 1))
-  }
-
-  const handlePrevious = () => {
-    setCurrentStep((prevStep) => Math.max(prevStep - 1, 0))
-  }
-
-  const currentDialogue = dialogueSteps[currentStep]
-  const isDialogueAvailable = currentDialogue.requiredMissions.every(mission => completedMissions.includes(mission))
-
-  return (
-    <div className="p-4 max-w-6xl mx-auto font-mono">
-      <Card className="overflow-hidden relative bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 border-2 border-gray-700">
-        <CardContent className="p-4">
-          <div className="flex flex-col sm:flex-row h-full text-gray-300">
-            <div className="flex-grow sm:w-2/3 mb-4 sm:mb-0 sm:mr-4">
-              <h1 className="text-2xl font-bold mb-2 text-gray-100 tracking-wider">
-                Galactic Mission Guide
-              </h1>
-              <AnimatePresence mode="wait">
-                <motion.div
-                  key={currentStep}
-                  initial={{ opacity: 0, y: 10 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: -10 }}
-                  transition={{ duration: 0.2 }}
-                  className="bg-gray-800 p-3 rounded-lg border border-gray-600 relative overflow-hidden h-24 flex items-center"
-                >
-                  {isDialogueAvailable ? (
-                    <p className="text-sm">{currentDialogue.text}</p>
-                  ) : (
-                    <p className="text-sm text-yellow-400">Complete more missions to unlock this guidance.</p>
-                  )}
-                  <div className="absolute top-0 right-0 w-16 h-16 bg-blue-500 rounded-full -mr-8 -mt-8 opacity-10"></div>
-                </motion.div>
-              </AnimatePresence>
-              <div className="flex justify-between items-center mt-2">
-                <Button
-                  onClick={handlePrevious}
-                  disabled={currentStep === 0}
-                  className="bg-gray-700 text-gray-300 hover:bg-gray-600 px-2 py-1 text-sm"
-                >
-                  <ChevronLeft className="h-4 w-4" />
-                </Button>
-                <div className="text-gray-400 text-xs">
-                  Step {currentStep + 1} of {dialogueSteps.length}
-                </div>
-                <Button
-                  onClick={handleNext}
-                  disabled={currentStep === dialogueSteps.length - 1}
-                  className="bg-blue-600 text-white hover:bg-blue-500 px-2 py-1 text-sm"
-                >
-                  <ChevronRight className="h-4 w-4" />
-                </Button>
-              </div>
-            </div>
-            <div className="sm:w-1/3">
-              <div className="grid grid-cols-1 gap-2">
-                {missions.map((mission) => (
-                  <Card
-                    key={mission.id}
-                    className={`cursor-pointer hover:shadow-lg transition-all duration-300 ${
-                      completedMissions.includes(mission.id) ? 'bg-gray-700' : 'bg-gray-800'
-                    } border border-gray-600 relative overflow-hidden`}
-                    onClick={() => handleCompleteMission(mission.id)}
-                  >
-                    <CardContent className="p-2 flex items-center">
-                      <mission.icon className={`w-6 h-6 mr-2 ${mission.color}`} />
-                      <div>
-                        <h3 className={`text-xs font-semibold ${mission.color}`}>{mission.name}</h3>
-                        <p className="text-xs text-gray-400 truncate">{mission.description}</p>
-                      </div>
-                      {completedMissions.includes(mission.id) && (
-                        <div className="absolute top-1 right-1 w-2 h-2 bg-green-500 rounded-full"></div>
-                      )}
-                    </CardContent>
-                  </Card>
-                ))}
-              </div>
-            </div>
-          </div>
-
-          {/* Sci-fi background elements */}
-          <div className="absolute inset-0 pointer-events-none overflow-hidden">
-            <div className="absolute top-0 left-0 w-full h-full bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjMDAwMDAwMDAiPjwvcmVjdD4KPHBhdGggZD0iTTAgNUw1IDBaTTYgNEw0IDZaTS0xIDFMMSAtMVoiIHN0cm9rZT0iIzMzMzMzMzEwIiBzdHJva2Utd2lkdGg9IjEiPjwvcGF0aD4KPC9zdmc+')] opacity-20"></div>
-            <div className="absolute top-1/4 left-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse"></div>
-            <div className="absolute bottom-1/4 right-1/4 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-150"></div>
-            <div className="absolute top-1/2 left-3/4 w-1 h-1 bg-yellow-400 rounded-full animate-pulse delay-300"></div>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  )
-}
\ No newline at end of file