diff --git a/components/Content/Visuals/Bento.tsx b/components/Content/Visuals/Bento.tsx
index ded41293..02d0c5b9 100644
--- a/components/Content/Visuals/Bento.tsx
+++ b/components/Content/Visuals/Bento.tsx
@@ -326,16 +326,6 @@ const mobileItems = [
       className: "md:col-span-2",
       icon: <IconTableColumn className="h-4 w-4 text-neutral-500" />,
     },
-  
-    {
-      title: "",
-      description: (
-        null
-      ),
-      header: <SkeletonFive />,
-      className: "md:col-span-1",
-      // icon: <IconBoxAlignRightFilled className="h-4 w-4 text-neutral-500" />,
-    },
   ];
 
 
diff --git a/components/Gameplay/mission-list.tsx b/components/Gameplay/mission-list.tsx
index 26e77702..7360bc0d 100644
--- a/components/Gameplay/mission-list.tsx
+++ b/components/Gameplay/mission-list.tsx
@@ -3,59 +3,44 @@ import Link from "next/link";
 import { Button } from "../ui/button";
 
 export function MissionList() {
+  const missions = [
+    { name: "Pick your home planet", completed: true },
+    { name: "Build your first rover", completed: false },
+    { name: "Collect your first resources", completed: false },
+    { name: "Build your first structure", completed: false },
+    { name: "Make your first classification", completed: false },
+  ];
+
   return (
-<>
+    <>
       <CardHeader>
         <CardTitle>To-Do List</CardTitle>
         <CardDescription>Manage your daily tasks</CardDescription>
       </CardHeader>
       <CardContent className="space-y-4 overflow-y-auto max-h-[480px] pr-4">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center space-x-3">
-            <Link href="#">
-              <LinkIcon className="w-5 h-5 text-gray-500 hover:text-gray-900 dark:hover:text-gray-50" />
-            </Link>
-            <p className="line-through text-gray-500 dark:text-gray-400">Finish the design mockups</p>
-          </div>
-        </div>
-        <div className="flex items-center justify-between">
-          <div className="flex items-center space-x-3">
-            <Link href="#">
-              <LinkIcon className="w-5 h-5 text-gray-500 hover:text-gray-900 dark:hover:text-gray-50" />
-            </Link>
-            <p>Attend the team meeting</p>
-          </div>
-        </div>
-        <div className="flex items-center justify-between">
-          <div className="flex items-center space-x-3">
-            <Link href="#">
-              <LinkIcon className="w-5 h-5 text-gray-500 hover:text-gray-900 dark:hover:text-gray-50" />
-            </Link>
-            <p>Buy groceries</p>
+        {missions.map((mission, index) => (
+          <div key={index} className="flex items-center justify-between">
+            <div className="flex items-center space-x-3">
+              <Link href="#">
+                <LinkIcon
+                  className={`w-5 h-5 text-gray-500 ${
+                    mission.completed ? "line-through" : ""
+                  } hover:text-gray-900 dark:hover:text-gray-50`}
+                />
+              </Link>
+              <p
+                className={`${
+                  mission.completed ? "line-through text-gray-500 dark:text-gray-400" : ""
+                }`}
+              >
+                {mission.name}
+              </p>
+            </div>
           </div>
-        </div>
-        <div className="flex items-center justify-between">
-          <div className="flex items-center space-x-3">
-            <Link href="#">
-              <LinkIcon className="w-5 h-5 text-gray-500 hover:text-gray-900 dark:hover:text-gray-50" />
-            </Link>
-            <p>Call mom</p>
-          </div>
-        </div>
-        <div className="flex items-center justify-between">
-          <div className="flex items-center space-x-3">
-            <Link href="#">
-              <LinkIcon className="w-5 h-5 text-gray-500 hover:text-gray-900 dark:hover:text-gray-50" />
-            </Link>
-            <p>Clean the house</p>
-          </div>
-        </div>
-      </CardContent>
-      {/* <CardFooter className="flex justify-end">
-        <Button size="sm">Add Task</Button>
-      </CardFooter> */}
-</>
-  )
+        ))}
+        </CardContent>
+      </>
+  );
 }
 
 function LinkIcon(props) {
diff --git a/components/Modals/rover-interface.tsx b/components/Modals/rover-interface.tsx
index 5e84dfa5..d38a2a68 100644
--- a/components/Modals/rover-interface.tsx
+++ b/components/Modals/rover-interface.tsx
@@ -466,6 +466,122 @@ export function RoverInterfaceDark() {
   );
 };
 
+export function RoverInterfaceDarkMobile() {
+  return (
+    <div className="bg-black bg-opacity-70 text-white min-h-screen p-4 md:p-6">
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div className="space-y-6 border border-white p-4">
+          <div className="text-4xl font-bold">Planet Name</div>
+          <div>
+            <div className="font-semibold">ROVER #1 (Allow user to customise name)</div>
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <div>MISSION DAY</div>
+                <div>SOL #3039</div>
+                <div>Time: 2:36 pm</div>
+              </div>
+              <div>
+                <div>SUNRISE</div>
+                <div>6:37 am</div>
+                <div>SUNSET</div>
+                <div>6:35 pm</div>
+              </div>
+            </div>
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <div>PRESSURE</div>
+              <div className="flex items-center">
+                <GaugeIcon className="text-green-500" />
+                <span>827 Pa</span>
+              </div>
+            </div>
+            <div>
+              <div>OXYGEN</div>
+              <div className="flex items-center">
+                <FuelIcon className="text-green-500" />
+                <span>0.24%</span>
+              </div>
+            </div>
+          </div>
+          <div>
+            <div>TEMPERATURE</div>
+            <div className="flex items-center">
+              <ThermometerIcon className="text-red-500" />
+              <span>-29.16 °C</span>
+            </div>
+          </div>
+          <div>
+            <div>ATMOSPHERE</div>
+            <div>Moderate sunny</div>
+          </div>
+          <div>
+            <div>ROVER STATUS</div>
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <div>CELL</div>
+                <div>65.25</div>
+              </div>
+              <div>
+                <div>GAS PRESS</div>
+                <div>12.48</div>
+              </div>
+            </div>
+            <div>
+              <div>MODE</div>
+              <div>DRV</div>
+            </div>
+          </div>
+          <div>
+            <div>SPEED</div>
+            <div>118 km/hour</div>
+          </div>
+        </div>
+        <div className="col-span-1 space-y-6 border border-white p-4">
+          <div className="text-xl font-semibold">CAMERA CONTROL PANEL</div>
+          <div>
+            <video
+              className="w-full h-auto"
+              height="300"
+              src="/assets/Surface.mp4"
+              style={{
+                aspectRatio: "350/300",
+                objectFit: "cover",
+              }}
+              width="350"
+              autoPlay
+              loop
+              muted
+            />
+          </div>
+          <div className="flex justify-between items-center">
+            <div className="flex space-x-2">
+              <Button variant="ghost">Coordinates</Button>
+              <Button variant="ghost">Angle</Button>
+              <Button variant="ghost">Information</Button>
+            </div>
+            <div className="flex space-x-2">
+              <ZoomInIcon className="text-white" />
+              <ZoomOutIcon className="text-white" />
+              <CameraIcon className="text-white" />
+            </div>
+          </div>
+          <div>
+            <Textarea placeholder="Write a command" />
+            <div className="flex justify-between items-center">
+              <Button>SEND COMMAND</Button>
+              <div className="flex space-x-2">
+                <Button variant="ghost">DIAGNOSTICS</Button>
+                <Button variant="ghost">SELF-REPAIR</Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 function AntennaIcon(props) {
   return (
     <svg
diff --git a/components/_Core/Section/Layout.tsx b/components/_Core/Section/Layout.tsx
index 0a2c6abe..1cdd6f49 100644
--- a/components/_Core/Section/Layout.tsx
+++ b/components/_Core/Section/Layout.tsx
@@ -60,7 +60,7 @@ export const LayoutNoNav: React.FC<DashboardLayoutProps> = ({ children }) => {
         <style jsx global>
           {`
             body {
-              background: url('https://cdn.cloud.scenario.com/assets-transform/KO7W80GhRPab0kOWPFsFIw?p=100&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uY2xvdWQuc2NlbmFyaW8uY29tL2Fzc2V0cy10cmFuc2Zvcm0vS083VzgwR2hSUGFiMGtPV1BGc0ZJdz9wPTEwMCoiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE3MTQ1MjE1OTl9fX1dfQ__&Key-Pair-Id=K36FIAB9LE2OLR&Signature=fUmRKK~sb9XaklxuXfXmzRd4YUzATcKtCcXSpu7glOyLJkhX1p9HIVts7hys4DJiDaj1YYK42r5S0mWVRCvUuT29hoDESp0NTHf6pYBAqXwXSt-bHk1nwsqlGObpB5H-EbSwhKAIDwyR1a4WgA9PpHky-h2lcH9pdu6Ec3twrpQKebDwHUgTwtlltUrRSaH1O6lRdm312oEvQmTWE7815HgKgknfZwGny5OiBnVhr7od~rOhwDbbdAhZnwD5GRjNgZUjeDQQQ5IIsRuqm2Lmoq2LjCkfQIQAi8skSrwq67PQsDnuxwbfmvbtiK0wFVyFrWIxIJOgYXB1SJonxNPcNA__') center/cover;
+              background: url('https://cdn.cloud.scenario.com/assets/asset_J8Mo3eYBJWMjdC8wSQQ15edx?p=100&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uY2xvdWQuc2NlbmFyaW8uY29tL2Fzc2V0cy9hc3NldF9KOE1vM2VZQkpXTWpkQzh3U1FRMTVlZHg~cD0xMDAqIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzE0NTIxNTk5fX19XX0_&Key-Pair-Id=K36FIAB9LE2OLR&Signature=ERw02sLK6d6yXD0YC6USsU8GckSYAn61zS8Wkn4v7zi9bQuF303LROIwETSCGLu8cL8ICi9sL6urbsKBCgy7R75pzGSYWGlz5sK9kIlrjEVBEk--1IOb6RckcuYGF8hDFzxziZubJ828j3CMAuYD3EV7PdNb0NmtTIlVBDVQUQyyY5t3IJ2hMJhkixjBIpTPFnnBzZbiNVK-BWaNlskb4d-~E9W8AOH8nN1hz7JGvJzKBun96cLGL-jq-fr1esT7ehdDuO0aYqad6mLXHrSHoPb1ZTXg4VjB5zRiAvQ2w6O8s1w8azsMBD4aTe0QmRepBopiHjS8-dYZp~olGkGd7Q__&format=jpeg') center/cover;
             }
 
             @media only screen and (max-width: 767px) {
diff --git a/pages/explore/index.tsx b/pages/explore/index.tsx
index 2e1bcaeb..d997b35b 100644
--- a/pages/explore/index.tsx
+++ b/pages/explore/index.tsx
@@ -1,10 +1,11 @@
 // import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import React, { useState } from "react";
 import { RoverMobileTest } from "../../components/Modals/rover-mobile-test";
-import { RoverInterface, RoverInterfaceDark } from "../../components/Modals/rover-interface";
+import { RoverInterface, RoverInterfaceDark, RoverInterfaceDarkMobile } from "../../components/Modals/rover-interface";
 import Layout from "../../components/_Core/Section/Layout";
 import Navigation from "../../components/_Core/Section/Navbar";
 import FeedOverlay from "../../components/Overlays/1-Feed";
+import { useMediaQuery } from "react-responsive";
 
 export default function Explore() {
     // const supabase = useSupabaseClient();
@@ -15,6 +16,9 @@ export default function Explore() {
       setShowFeedOverlay(true);
     };
 
+    const isDesktopOrLaptop = useMediaQuery({ query: '(min-width: 1224px)' });
+    const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' });
+
     return (
         // <RoverMobileTest />
         // <RoverInterface />
@@ -37,7 +41,8 @@ export default function Explore() {
            </style>
             <Navigation />
             <div className="">
-                <RoverInterfaceDark />
+                {isDesktopOrLaptop && ( <RoverInterfaceDark /> )};
+                {isTabletOrMobile && (<RoverInterfaceDarkMobile /> )};
                 <div className="mt-20">
              {showFeedOverlay && (
                <>
@@ -47,35 +52,6 @@ export default function Explore() {
                </>
              )}
            </div>
-      {!showFeedOverlay && (
-           <button
-             onClick={handleOpenFeedOverlay}
-             className="fixed bottom-2 left-1/2 transform -translate-x-1/2 mt-4 px-4 py-2 text-white rounded"
-           >
-             <a
-               href="#_"
-               className="inline-flex overflow-hidden text-white bg-gray-900 rounded group"
-             >
-               <span className="px-3.5 py-2 text-white bg-purple-500 group-hover:bg-purple-600 flex items-center justify-center">
-                 <svg
-                   className="w-5 h-5"
-                   fill="none"
-                   stroke="currentColor"
-                   viewBox="0 0 24 24"
-                   xmlns="http://www.w3.org/2000/svg"
-                 >
-                   <path
-                     strokeLinecap="round"
-                     strokeLinejoin="round"
-                     strokeWidth="2"
-                     d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
-                   ></path>
-                 </svg>
-               </span>
-               <span className="pl-4 pr-5 py-2.5">Menu</span>
-             </a>
-           </button>
-         )}
             </div>
         </>
     );
diff --git a/pages/tests/planetRing.tsx b/pages/tests/planetRing.tsx
new file mode 100644
index 00000000..8d0c3928
--- /dev/null
+++ b/pages/tests/planetRing.tsx
@@ -0,0 +1,5 @@
+export default function PlanetRingTestPage() {
+    return (
+        <>p</>
+    )
+}
\ No newline at end of file