diff --git a/app/layout.tsx b/app/layout.tsx
index aa179997..b1525597 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,13 +2,14 @@
 
 import "@/styles/globals.css";
 import { createPagesBrowserClient } from "@supabase/auth-helpers-nextjs";
-import { SessionContextProvider } from "@supabase/auth-helpers-react";
-import { useEffect, useState } from "react";
+import { SessionContextProvider, useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
+import { useEffect, useState, ReactNode } from "react";
 import Head from "next/head";
 import { ActivePlanetProvider, useActivePlanet } from "@/context/ActivePlanet";
 import dynamic from 'next/dynamic';
 import { InventoryProvider } from "@/context/InventoryContext";
 import { UserAnomaliesProvider } from "@/context/UserAnomalies";
+import { bgImage, backgroundImages } from "@/constants/backgrounds";
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   const [supabaseClient] = useState(() => createPagesBrowserClient());
@@ -66,7 +67,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           <ActivePlanetProvider>
             <UserAnomaliesProvider>
               <InventoryProvider>
+                <FrontendLayout bg={true}>
                   {children}
+                </FrontendLayout>
               </InventoryProvider>
             </UserAnomaliesProvider>
           </ActivePlanetProvider>
@@ -74,4 +77,140 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       </body>
     </html>
   );
+};
+
+interface LayoutProps {
+  children: ReactNode;
+  bg: any;
 }
+
+function FrontendLayout({ children }: LayoutProps) {
+  // Layout components
+  const supabase = useSupabaseClient();
+  const session = useSession();
+
+  const { activePlanet, updatePlanetLocation } = useActivePlanet();
+
+  const [showSidebar, setShowSidebar] = useState(false);
+  const [showFeed, setShowFeed] = useState(false);
+  const [showAnimation, setShowAnimation] = useState(false);
+  const [showClassificationsFeed, setShowClassificationsFeed] = useState(false);
+  const [canChangePlanet, setCanChangePlanet] = useState(false);
+
+  useEffect(() => {
+    const checkInventory = async () => {
+      const { data, error } = await supabase
+        .from('inventory')
+        .select('*')
+        .eq('owner', session?.user.id);
+
+      if (error) {
+        console.error('Error fetching inventory:', error);
+        return;
+      }
+
+      if (data) {
+        const hasSpacecraft = data.some(
+          (item) => item.item === 29 && item.anomaly === activePlanet?.id
+        );
+        const hasLaunchpad = data.some(
+          (item) => item.item === 33 && item.anomaly && item.time_of_deploy
+        );
+
+        setCanChangePlanet(hasSpacecraft && hasLaunchpad);
+      }
+    };
+
+    if (session?.user.id && activePlanet?.id) {
+      checkInventory();
+    }
+  }, [session?.user.id, activePlanet?.id]);
+
+  const handleLeftArrowClick = () => {
+    if (canChangePlanet && activePlanet?.id && parseInt(activePlanet.id) > 1) {
+      const newId = parseInt(activePlanet.id) - 1;
+      setShowAnimation(true);
+      setTimeout(() => {
+        updatePlanetLocation(newId);
+        setShowAnimation(false);
+      }, 2000);
+    }
+  };
+
+  const handleRightArrowClick = () => {
+    if (canChangePlanet && activePlanet?.id && parseInt(activePlanet.id) < 6) {
+      const newId = parseInt(activePlanet.id) + 1;
+      setShowAnimation(true);
+      setTimeout(() => {
+        updatePlanetLocation(newId);
+        setShowAnimation(false);
+      }, 2000);
+    }
+  };
+
+  const activePlanetId = activePlanet?.id ? parseInt(activePlanet.id) : null;
+
+  const handleOpenFeed = () => {
+    setShowFeed(!showFeed);
+  };
+
+  const handleCloseFeed = (e: React.MouseEvent) => {
+    if ((e.target as HTMLElement).id === 'overlay') {
+      setShowFeed(false);
+    }
+  };
+
+  const handleOpenSlideover = () => {
+    setShowSidebar(!showSidebar);
+  };
+
+  const handleCloseSlideover = (e: React.MouseEvent) => {
+    if ((e.target as HTMLElement).id === 'overlay') {
+      setShowSidebar(false);
+    }
+  };
+
+  const handleOpenClassificationsFeed = () => {
+    setShowClassificationsFeed(true);
+    document.body.style.overflow = 'hidden'; // Disable body scroll
+  };
+
+  const handleCloseClassificationsFeed = (e: React.MouseEvent) => {
+    if ((e.target as HTMLElement).id === 'overlay' || (e.target as HTMLElement).id === 'close-btn') {
+      setShowClassificationsFeed(false);
+      document.body.style.overflow = 'auto'; // Enable body scroll
+    }
+  };
+
+  // For background context
+  // const { activePlanet } = useActivePlanet(); - already called
+  const planetId = Number(activePlanet?.id ?? 1);
+
+  if (!activePlanet || activePlanet == null) {
+    return (
+      <div
+        className="min-h-screen flex flex-col"
+        style={{
+          backgroundImage: `url(${bgImage})`,
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+        }}
+      >
+        {children}
+      </div>
+    );
+  };
+
+  return (
+    <div 
+      className="min-h-screen flex flex-col"
+      style={{
+        backgroundImage: `url(${(backgroundImages as any)[planetId]})`,
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+      }}
+    >
+      {children}
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/components/Content/MissionList.tsx b/components/Content/MissionList.tsx
index e0d4a918..27ab7d79 100644
--- a/components/Content/MissionList.tsx
+++ b/components/Content/MissionList.tsx
@@ -7,7 +7,7 @@ import {
     CardContent,
     CardFooter,
     Card,
-} from "@/ui/Card";
+} from "@/components/ui/card";
 import React, { useEffect, useState } from 'react';
 import { useSession, useSupabaseClient } from '@supabase/auth-helpers-react';
 
diff --git a/components/Gameplay/Inventory/UserPlanets.tsx b/components/Gameplay/Inventory/UserPlanets.tsx
index 7acbbc37..f3f84788 100644
--- a/components/Gameplay/Inventory/UserPlanets.tsx
+++ b/components/Gameplay/Inventory/UserPlanets.tsx
@@ -5,7 +5,7 @@ import { Dialog, Transition } from '@headlessui/react';
 import { CompassIcon, ArrowLeftIcon, ArrowRightIcon, BookOpenIcon } from "@/ui/Sections/PlanetLayout";
 import { useActivePlanet } from "@/context/ActivePlanet";
 
-import { Button } from "@/ui/button";
+import { Button } from "@/components/ui/button";
 import { AllAutomatons, SingleAutomaton, SingleAutomatonCraftItem } from "./Automatons/Automaton";
 import { AllStructures } from "./Structures/Structure";
 import Link from "next/link";
@@ -14,7 +14,7 @@ import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import { ProfileCard } from "@/auth/UserProfileFields";
 import GoToYourPlanet from "../Travel/InitTravel";
 import UserItemsUndeployed from "./InactiveItems";
-import { Card } from "@/ui/Card";
+import { Card } from "@/components/ui/card";
 import CraftStructure from "./Actions/CraftStructure";
 import FirstClassification from "@/Classifications/FirstClassification";
 import UserAnomaliesComponent from "@/components/Content/Anomalies/YourAnomalies";
diff --git a/components/Gameplay/Travel/InitTravel.tsx b/components/Gameplay/Travel/InitTravel.tsx
index 359b5019..ce374329 100644
--- a/components/Gameplay/Travel/InitTravel.tsx
+++ b/components/Gameplay/Travel/InitTravel.tsx
@@ -2,7 +2,7 @@
 
 import React, { useEffect, useState } from "react";
 import { useActivePlanet } from "@/context/ActivePlanet";
-import { Button } from "@/ui/button";
+import { Button } from "@/components/ui/button";
 import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 
 interface GoToYourPlanetProps {
diff --git a/components/Layout.tsx b/components/Layout.tsx
index 719f8614..0a7db70f 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -2,23 +2,13 @@ import { ReactNode } from "react";
 import { useSession } from "@supabase/auth-helpers-react";
 import { useActivePlanet } from "@/context/ActivePlanet";
 import { PlanetLayout } from "@/ui/Sections/PlanetLayout";
+import { backgroundImages, bgImage } from "@/constants/backgrounds";
 
 interface LayoutProps {
     children: ReactNode;
     bg: any;
 }
 
-const backgroundImages = {
-    1: "https://cdn.cloud.scenario.com/assets-transform/asset_kndmNKAPEUtbXsQ8vDQzbT9e?p=100&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uY2xvdWQuc2NlbmFyaW8uY29tL2Fzc2V0cy10cmFuc2Zvcm0vYXNzZXRfa25kbU5LQVBFVXRiWHNROHZEUXpiVDllP3A9MTAwKiIsIkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTcyMDM5Njc5OX19fV19&Key-Pair-Id=K36FIAB9LE2OLR&Signature=FTz7yIDNNxwS86IhY4imtBY0YJCqLt8PXlmhWFBaL632VuIP13qIzTREaIcxJICHQ7nO2EW-Wi7n97fPlIC580li1uzbeE~ulDXFp2XywZEmwrsybJV82GBTmcUqjAYMcIrZjATFSrIYv9-lA~QH3OtJtyrFAvZrpcLSWlQ4ncxe26-lppuqSrJSlZ4EnuhcCvCqZZYnOQ2de2B0DCi9Qmlqmes4l2AFFXA8oVy9Tsult5x4GxHGvWissoz2PXWHGalLz2b6oIf3kGfcNvj2nWLn1~XlzN1THWkQ4d4uERGsC8x2nn-Wap-~JSmyTvqPmJFFkhIhGFx1roaV1x-6ew__&quality=80&format=jpeg&width=1024",
-    2: "https://cdn.cloud.scenario.com/assets-transform/asset_kndmNKAPEUtbXsQ8vDQzbT9e?p=100&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uY2xvdWQuc2NlbmFyaW8uY29tL2Fzc2V0cy10cmFuc2Zvcm0vYXNzZXRfa25kbU5LQVBFVXRiWHNROHZEUXpiVDllP3A9MTAwKiIsIkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTcyMDM5Njc5OX19fV19&Key-Pair-Id=K36FIAB9LE2OLR&Signature=FTz7yIDNNxwS86IhY4imtBY0YJCqLt8PXlmhWFBaL632VuIP13qIzTREaIcxJICHQ7nO2EW-Wi7n97fPlIC580li1uzbeE~ulDXFp2XywZEmwrsybJV82GBTmcUqjAYMcIrZjATFSrIYv9-lA~QH3OtJtyrFAvZrpcLSWlQ4ncxe26-lppuqSrJSlZ4EnuhcCvCqZZYnOQ2de2B0DCi9Qmlqmes4l2AFFXA8oVy9Tsult5x4GxHGvWissoz2PXWHGalLz2b6oIf3kGfcNvj2nWLn1~XlzN1THWkQ4d4uERGsC8x2nn-Wap-~JSmyTvqPmJFFkhIhGFx1roaV1x-6ew__&quality=80&format=jpeg&width=1024",
-    3: "https://cdn.cloud.scenario.com/assets-transform/asset_kndmNKAPEUtbXsQ8vDQzbT9e?p=100&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uY2xvdWQuc2NlbmFyaW8uY29tL2Fzc2V0cy10cmFuc2Zvcm0vYXNzZXRfa25kbU5LQVBFVXRiWHNROHZEUXpiVDllP3A9MTAwKiIsIkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTcyMDM5Njc5OX19fV19&Key-Pair-Id=K36FIAB9LE2OLR&Signature=FTz7yIDNNxwS86IhY4imtBY0YJCqLt8PXlmhWFBaL632VuIP13qIzTREaIcxJICHQ7nO2EW-Wi7n97fPlIC580li1uzbeE~ulDXFp2XywZEmwrsybJV82GBTmcUqjAYMcIrZjATFSrIYv9-lA~QH3OtJtyrFAvZrpcLSWlQ4ncxe26-lppuqSrJSlZ4EnuhcCvCqZZYnOQ2de2B0DCi9Qmlqmes4l2AFFXA8oVy9Tsult5x4GxHGvWissoz2PXWHGalLz2b6oIf3kGfcNvj2nWLn1~XlzN1THWkQ4d4uERGsC8x2nn-Wap-~JSmyTvqPmJFFkhIhGFx1roaV1x-6ew__&quality=80&format=jpeg&width=1024",
-    4: "https://cdn.cloud.scenario.com/assets-transform/asset_kndmNKAPEUtbXsQ8vDQzbT9e?p=100&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uY2xvdWQuc2NlbmFyaW8uY29tL2Fzc2V0cy10cmFuc2Zvcm0vYXNzZXRfa25kbU5LQVBFVXRiWHNROHZEUXpiVDllP3A9MTAwKiIsIkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTcyMDM5Njc5OX19fV19&Key-Pair-Id=K36FIAB9LE2OLR&Signature=FTz7yIDNNxwS86IhY4imtBY0YJCqLt8PXlmhWFBaL632VuIP13qIzTREaIcxJICHQ7nO2EW-Wi7n97fPlIC580li1uzbeE~ulDXFp2XywZEmwrsybJV82GBTmcUqjAYMcIrZjATFSrIYv9-lA~QH3OtJtyrFAvZrpcLSWlQ4ncxe26-lppuqSrJSlZ4EnuhcCvCqZZYnOQ2de2B0DCi9Qmlqmes4l2AFFXA8oVy9Tsult5x4GxHGvWissoz2PXWHGalLz2b6oIf3kGfcNvj2nWLn1~XlzN1THWkQ4d4uERGsC8x2nn-Wap-~JSmyTvqPmJFFkhIhGFx1roaV1x-6ew__&quality=80&format=jpeg&width=1024",
-    5: "https://cdn.cloud.scenario.com/assets-transform/asset_kndmNKAPEUtbXsQ8vDQzbT9e?p=100&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uY2xvdWQuc2NlbmFyaW8uY29tL2Fzc2V0cy10cmFuc2Zvcm0vYXNzZXRfa25kbU5LQVBFVXRiWHNROHZEUXpiVDllP3A9MTAwKiIsIkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTcyMDM5Njc5OX19fV19&Key-Pair-Id=K36FIAB9LE2OLR&Signature=FTz7yIDNNxwS86IhY4imtBY0YJCqLt8PXlmhWFBaL632VuIP13qIzTREaIcxJICHQ7nO2EW-Wi7n97fPlIC580li1uzbeE~ulDXFp2XywZEmwrsybJV82GBTmcUqjAYMcIrZjATFSrIYv9-lA~QH3OtJtyrFAvZrpcLSWlQ4ncxe26-lppuqSrJSlZ4EnuhcCvCqZZYnOQ2de2B0DCi9Qmlqmes4l2AFFXA8oVy9Tsult5x4GxHGvWissoz2PXWHGalLz2b6oIf3kGfcNvj2nWLn1~XlzN1THWkQ4d4uERGsC8x2nn-Wap-~JSmyTvqPmJFFkhIhGFx1roaV1x-6ew__&quality=80&format=jpeg&width=1024",
-    6: "https://cdn.cloud.scenario.com/assets-transform/asset_kndmNKAPEUtbXsQ8vDQzbT9e?p=100&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uY2xvdWQuc2NlbmFyaW8uY29tL2Fzc2V0cy10cmFuc2Zvcm0vYXNzZXRfa25kbU5LQVBFVXRiWHNROHZEUXpiVDllP3A9MTAwKiIsIkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTcyMDM5Njc5OX19fV19&Key-Pair-Id=K36FIAB9LE2OLR&Signature=FTz7yIDNNxwS86IhY4imtBY0YJCqLt8PXlmhWFBaL632VuIP13qIzTREaIcxJICHQ7nO2EW-Wi7n97fPlIC580li1uzbeE~ulDXFp2XywZEmwrsybJV82GBTmcUqjAYMcIrZjATFSrIYv9-lA~QH3OtJtyrFAvZrpcLSWlQ4ncxe26-lppuqSrJSlZ4EnuhcCvCqZZYnOQ2de2B0DCi9Qmlqmes4l2AFFXA8oVy9Tsult5x4GxHGvWissoz2PXWHGalLz2b6oIf3kGfcNvj2nWLn1~XlzN1THWkQ4d4uERGsC8x2nn-Wap-~JSmyTvqPmJFFkhIhGFx1roaV1x-6ew__&quality=80&format=jpeg&width=1024"
-};
-
-const bgImage = "https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?q=80&w=2372&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D";
-
 export default function Layout({ children }: LayoutProps) {
     const session = useSession();
     const { activePlanet } = useActivePlanet();
@@ -40,21 +30,4 @@ export default function Layout({ children }: LayoutProps) {
             </PlanetLayout>
         </div>
     );
-};
-
-export function LayoutNoPlanet({ children }: LayoutProps) {
-    return (
-        <div
-            className="min-h-screen flex flex-col"
-            style={{
-                backgroundImage: `url(${bgImage})`,
-                backgroundSize: "cover",
-                backgroundPosition: "center",
-            }}
-        >
-            <PlanetLayout>
-                {children}
-            </PlanetLayout>
-        </div>
-    );
 };
\ No newline at end of file
diff --git a/constants/backgrounds.ts b/constants/backgrounds.ts
new file mode 100644
index 00000000..2ae41ce8
--- /dev/null
+++ b/constants/backgrounds.ts
@@ -0,0 +1,10 @@
+export const backgroundImages = {
+    1: "https://cdn.cloud.scenario.com/assets-transform/asset_kndmNKAPEUtbXsQ8vDQzbT9e?p=100&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uY2xvdWQuc2NlbmFyaW8uY29tL2Fzc2V0cy10cmFuc2Zvcm0vYXNzZXRfa25kbU5LQVBFVXRiWHNROHZEUXpiVDllP3A9MTAwKiIsIkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTcyMDM5Njc5OX19fV19&Key-Pair-Id=K36FIAB9LE2OLR&Signature=FTz7yIDNNxwS86IhY4imtBY0YJCqLt8PXlmhWFBaL632VuIP13qIzTREaIcxJICHQ7nO2EW-Wi7n97fPlIC580li1uzbeE~ulDXFp2XywZEmwrsybJV82GBTmcUqjAYMcIrZjATFSrIYv9-lA~QH3OtJtyrFAvZrpcLSWlQ4ncxe26-lppuqSrJSlZ4EnuhcCvCqZZYnOQ2de2B0DCi9Qmlqmes4l2AFFXA8oVy9Tsult5x4GxHGvWissoz2PXWHGalLz2b6oIf3kGfcNvj2nWLn1~XlzN1THWkQ4d4uERGsC8x2nn-Wap-~JSmyTvqPmJFFkhIhGFx1roaV1x-6ew__&quality=80&format=jpeg&width=1024",
+    2: "https://cdn.cloud.scenario.com/assets-transform/asset_kndmNKAPEUtbXsQ8vDQzbT9e?p=100&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uY2xvdWQuc2NlbmFyaW8uY29tL2Fzc2V0cy10cmFuc2Zvcm0vYXNzZXRfa25kbU5LQVBFVXRiWHNROHZEUXpiVDllP3A9MTAwKiIsIkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTcyMDM5Njc5OX19fV19&Key-Pair-Id=K36FIAB9LE2OLR&Signature=FTz7yIDNNxwS86IhY4imtBY0YJCqLt8PXlmhWFBaL632VuIP13qIzTREaIcxJICHQ7nO2EW-Wi7n97fPlIC580li1uzbeE~ulDXFp2XywZEmwrsybJV82GBTmcUqjAYMcIrZjATFSrIYv9-lA~QH3OtJtyrFAvZrpcLSWlQ4ncxe26-lppuqSrJSlZ4EnuhcCvCqZZYnOQ2de2B0DCi9Qmlqmes4l2AFFXA8oVy9Tsult5x4GxHGvWissoz2PXWHGalLz2b6oIf3kGfcNvj2nWLn1~XlzN1THWkQ4d4uERGsC8x2nn-Wap-~JSmyTvqPmJFFkhIhGFx1roaV1x-6ew__&quality=80&format=jpeg&width=1024",
+    3: "https://cdn.cloud.scenario.com/assets-transform/asset_kndmNKAPEUtbXsQ8vDQzbT9e?p=100&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uY2xvdWQuc2NlbmFyaW8uY29tL2Fzc2V0cy10cmFuc2Zvcm0vYXNzZXRfa25kbU5LQVBFVXRiWHNROHZEUXpiVDllP3A9MTAwKiIsIkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTcyMDM5Njc5OX19fV19&Key-Pair-Id=K36FIAB9LE2OLR&Signature=FTz7yIDNNxwS86IhY4imtBY0YJCqLt8PXlmhWFBaL632VuIP13qIzTREaIcxJICHQ7nO2EW-Wi7n97fPlIC580li1uzbeE~ulDXFp2XywZEmwrsybJV82GBTmcUqjAYMcIrZjATFSrIYv9-lA~QH3OtJtyrFAvZrpcLSWlQ4ncxe26-lppuqSrJSlZ4EnuhcCvCqZZYnOQ2de2B0DCi9Qmlqmes4l2AFFXA8oVy9Tsult5x4GxHGvWissoz2PXWHGalLz2b6oIf3kGfcNvj2nWLn1~XlzN1THWkQ4d4uERGsC8x2nn-Wap-~JSmyTvqPmJFFkhIhGFx1roaV1x-6ew__&quality=80&format=jpeg&width=1024",
+    4: "https://cdn.cloud.scenario.com/assets-transform/asset_kndmNKAPEUtbXsQ8vDQzbT9e?p=100&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uY2xvdWQuc2NlbmFyaW8uY29tL2Fzc2V0cy10cmFuc2Zvcm0vYXNzZXRfa25kbU5LQVBFVXRiWHNROHZEUXpiVDllP3A9MTAwKiIsIkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTcyMDM5Njc5OX19fV19&Key-Pair-Id=K36FIAB9LE2OLR&Signature=FTz7yIDNNxwS86IhY4imtBY0YJCqLt8PXlmhWFBaL632VuIP13qIzTREaIcxJICHQ7nO2EW-Wi7n97fPlIC580li1uzbeE~ulDXFp2XywZEmwrsybJV82GBTmcUqjAYMcIrZjATFSrIYv9-lA~QH3OtJtyrFAvZrpcLSWlQ4ncxe26-lppuqSrJSlZ4EnuhcCvCqZZYnOQ2de2B0DCi9Qmlqmes4l2AFFXA8oVy9Tsult5x4GxHGvWissoz2PXWHGalLz2b6oIf3kGfcNvj2nWLn1~XlzN1THWkQ4d4uERGsC8x2nn-Wap-~JSmyTvqPmJFFkhIhGFx1roaV1x-6ew__&quality=80&format=jpeg&width=1024",
+    5: "https://cdn.cloud.scenario.com/assets-transform/asset_kndmNKAPEUtbXsQ8vDQzbT9e?p=100&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uY2xvdWQuc2NlbmFyaW8uY29tL2Fzc2V0cy10cmFuc2Zvcm0vYXNzZXRfa25kbU5LQVBFVXRiWHNROHZEUXpiVDllP3A9MTAwKiIsIkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTcyMDM5Njc5OX19fV19&Key-Pair-Id=K36FIAB9LE2OLR&Signature=FTz7yIDNNxwS86IhY4imtBY0YJCqLt8PXlmhWFBaL632VuIP13qIzTREaIcxJICHQ7nO2EW-Wi7n97fPlIC580li1uzbeE~ulDXFp2XywZEmwrsybJV82GBTmcUqjAYMcIrZjATFSrIYv9-lA~QH3OtJtyrFAvZrpcLSWlQ4ncxe26-lppuqSrJSlZ4EnuhcCvCqZZYnOQ2de2B0DCi9Qmlqmes4l2AFFXA8oVy9Tsult5x4GxHGvWissoz2PXWHGalLz2b6oIf3kGfcNvj2nWLn1~XlzN1THWkQ4d4uERGsC8x2nn-Wap-~JSmyTvqPmJFFkhIhGFx1roaV1x-6ew__&quality=80&format=jpeg&width=1024",
+    6: "https://cdn.cloud.scenario.com/assets-transform/asset_kndmNKAPEUtbXsQ8vDQzbT9e?p=100&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uY2xvdWQuc2NlbmFyaW8uY29tL2Fzc2V0cy10cmFuc2Zvcm0vYXNzZXRfa25kbU5LQVBFVXRiWHNROHZEUXpiVDllP3A9MTAwKiIsIkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTcyMDM5Njc5OX19fV19&Key-Pair-Id=K36FIAB9LE2OLR&Signature=FTz7yIDNNxwS86IhY4imtBY0YJCqLt8PXlmhWFBaL632VuIP13qIzTREaIcxJICHQ7nO2EW-Wi7n97fPlIC580li1uzbeE~ulDXFp2XywZEmwrsybJV82GBTmcUqjAYMcIrZjATFSrIYv9-lA~QH3OtJtyrFAvZrpcLSWlQ4ncxe26-lppuqSrJSlZ4EnuhcCvCqZZYnOQ2de2B0DCi9Qmlqmes4l2AFFXA8oVy9Tsult5x4GxHGvWissoz2PXWHGalLz2b6oIf3kGfcNvj2nWLn1~XlzN1THWkQ4d4uERGsC8x2nn-Wap-~JSmyTvqPmJFFkhIhGFx1roaV1x-6ew__&quality=80&format=jpeg&width=1024"
+};
+
+export const bgImage = "https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?q=80&w=2372&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D";
\ No newline at end of file
diff --git a/ui/Card.tsx b/ui/Card.tsx
deleted file mode 100644
index 77e9fb78..00000000
--- a/ui/Card.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "rounded-xl border bg-card text-card-foreground shadow",
-      className
-    )}
-    {...props}
-  />
-))
-Card.displayName = "Card"
-
-const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
-))
-CardHeader.displayName = "CardHeader"
-
-const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h3
-    ref={ref}
-    className={cn("font-semibold leading-none tracking-tight", className)}
-    {...props}
-  />
-))
-CardTitle.displayName = "CardTitle"
-
-const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-CardDescription.displayName = "CardDescription"
-
-const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
-
-const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-  />
-))
-CardFooter.displayName = "CardFooter"
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/ui/Sections/PlanetLayout.tsx b/ui/Sections/PlanetLayout.tsx
index 7e576c0b..2c00bd68 100644
--- a/ui/Sections/PlanetLayout.tsx
+++ b/ui/Sections/PlanetLayout.tsx
@@ -2,7 +2,7 @@
 
 import MissionList from "@/components/Content/MissionList";
 import { useActivePlanet } from "@/context/ActivePlanet";
-import { Button } from "@/ui/button";
+import { Button } from "@/components/ui/button";
 import { PaintRollerIcon, ArrowRightIcon as LucideArrowRightIcon, ArrowLeftIcon as LucideArrowLeftIcon, BookOpenIcon as LucideBookOpenIcon } from "lucide-react";
 import Link from "next/link";
 import { ReactNode, useEffect, useState } from "react";
diff --git a/ui/button.tsx b/ui/button.tsx
deleted file mode 100644
index effbb4df..00000000
--- a/ui/button.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-gray-950 dark:focus-visible:ring-gray-300",
-  {
-    variants: {
-      variant: {
-        default: "bg-gray-900 text-gray-50 hover:bg-gray-900/90 dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/90",
-        destructive:
-          "bg-red-500 text-gray-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-gray-50 dark:hover:bg-red-900/90",
-        outline:
-          "border border-gray-200 bg-white hover:bg-gray-100 hover:text-gray-900 dark:border-gray-800 dark:bg-gray-950 dark:hover:bg-gray-800 dark:hover:text-gray-50",
-        secondary:
-          "bg-gray-100 text-gray-900 hover:bg-gray-100/80 dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-800/80",
-        ghost: "hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-gray-50",
-        link: "text-gray-900 underline-offset-4 hover:underline dark:text-gray-50",
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Button.displayName = "Button"
-
-export { Button, buttonVariants }