diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 591acb7..e6f301b 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -7,9 +7,10 @@ interface Props {
   title: string;
   noHeader?: string;
   description?: string;
+  image: string;
 }
 
-const { title, noHeader, description } = Astro.props;
+const { title, noHeader, description, image } = Astro.props;
 ---
 
 <!doctype html>
@@ -22,6 +23,7 @@ const { title, noHeader, description } = Astro.props;
       content={description ? description : "Astro description"}
     />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:image" content={image ? image : ""} />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" id="favicon" />
     <link
       rel="stylesheet"
@@ -100,7 +102,7 @@ const { title, noHeader, description } = Astro.props;
     </style>
 
     <style is:global>
-    .roboto {
+      .roboto {
         font-family: var(--font-family), Roboto, sans-serif;
         font-weight: 200;
         font-style: normal;
diff --git a/src/pages/[lang]/catalog/package/[...packageName].astro b/src/pages/[lang]/catalog/package/[...packageName].astro
index bae8d86..2048d51 100644
--- a/src/pages/[lang]/catalog/package/[...packageName].astro
+++ b/src/pages/[lang]/catalog/package/[...packageName].astro
@@ -1,89 +1,184 @@
 ---
 const { packageName } = Astro.params;
 import Layout from "@layouts/Layout.astro";
-const response = await fetch(new URL("/api/packages/" + packageName, Astro.url));
+const response = await fetch(
+  new URL("/api/packages/" + packageName, Astro.url)
+);
 const assetsJson = await response.json();
 ---
 
-<Layout title={`Package: ${assetsJson.title}`} description=`${assetsJson.title} is a package on Nebula. Start using this package on Nebula today!`>
-    <div class="flex flex-wrap min-[1032px]:mt-16 mt-8 w-full fixed inset-0 h-full md:h-[calc(100%-4rem)] z-0 bg-primary flex-col items-center content-center justify-center lg:pb-64 font-roboto max-md:p-4">
-        {assetsJson.error && <h1 class="text-text-color text-3xl font-bold"> Unexpected error. Is the name right? </h1>}
-        {!assetsJson.error &&
-            <div class="flex flex-col max-md:min-[1032px]:justify-center md:min-[1032px]:flex-row items-center text-text-color bg-navbar-color rounded-2xl">
-                {assetsJson.background_video && 
-                    <video src={`/packages/${packageName}/${assetsJson.background_video}`} controls class="md:w-[44rem] md:h-[25rem] h-[12rem] w-full object-cover rounded-xl">
-                        Your browser does not support the video tag.
-                    </video>
-                }
-                {assetsJson.backgroundImage && 
-                    <div style={{backgroundImage: `url(/packages/${packageName}/${assetsJson.backgroundImage})`}} class="md:w-[44rem] md:h-[25rem] h-[12rem] w-full object-cover bg-center rounded-xl"/>
-                }
-                {!assetsJson.background_video && !assetsJson.backgroundImage && <img loading="lazy" src={`/packages/${packageName}/${assetsJson.image}`} alt={assetsJson.title} class="md:w-[44rem] md:h-[25rem] h-[12rem] w-full object-cover rounded-xl"/>}
-                <div class="flex flex-col ml-7 md:p-16 p-10">
-                    <p class="text-xl">{assetsJson.type === "plugin-page" || assetsJson.type === "plugin-sw" ? "plugin": assetsJson.type}</p>
-                    <h1 class="text-4xl font-roboto font-semibold">{assetsJson.title}</h1>
-                    <p class="text-xl"> By: <strong>{assetsJson.author}</strong></p>
-                    <p class="text-xl">{assetsJson.description}</p>
-                    <button class="bg-primary text-text-color border border-transparent rounded-lg px-6 py-3 hover:bg-navbar-color transition-colors duration-300 mt-9" id="install">
-                        Install
-                    </button>
-                    <button class="hidden bg-primary text-text-color border border-transparent rounded-lg px-6 py-3 hover:bg-navbar-color transition-colors duration-300 mt-9" id="uninstall">
-                        Uninstall
-                    </button>
-                    <a href="../1" class="w-full bg-background text-text-color border-none rounded-lg text-l max-md:mt-7 px-4 py-4 h-full flex-grow md:text-right text-center font-bold underline underline-offset-4 decoration-2 hover:decoration-border-color transition-colors duration-300">Go Back</a>
-                </div>
-            </div>
-        }
-    </div>
-    <variable-define data-assets={JSON.stringify(assetsJson)} data-name={packageName} data-type={assetsJson.type} />
+<Layout
+  title={`Package: ${assetsJson.title}`}
+  description=`${assetsJson.title} is a package on Nebula. Start using this package on Nebula today!`
+  image={assetsJson.image}
+>
+  <div
+    class="flex flex-wrap min-[1032px]:mt-16 mt-8 w-full fixed inset-0 h-full md:h-[calc(100%-4rem)] z-0 bg-primary flex-col items-center content-center justify-center lg:pb-64 font-roboto max-md:p-4"
+  >
+    {
+      assetsJson.error && (
+        <h1 class="text-text-color text-3xl font-bold">
+          {" "}
+          Unexpected error. Is the name right?{" "}
+        </h1>
+      )
+    }
+    {
+      !assetsJson.error && (
+        <div class="flex flex-col max-md:min-[1032px]:justify-center md:min-[1032px]:flex-row items-center text-text-color bg-navbar-color rounded-2xl">
+          {assetsJson.background_video && (
+            <video
+              src={`/packages/${packageName}/${assetsJson.background_video}`}
+              controls
+              class="md:w-[44rem] md:h-[25rem] h-[12rem] w-full object-cover rounded-xl"
+            >
+              Your browser does not support the video tag.
+            </video>
+          )}
+          {assetsJson.backgroundImage && (
+            <div
+              style={{
+                backgroundImage: `url(/packages/${packageName}/${assetsJson.backgroundImage})`,
+              }}
+              class="md:w-[44rem] md:h-[25rem] h-[12rem] w-full object-cover bg-center rounded-xl"
+            />
+          )}
+          {!assetsJson.background_video && !assetsJson.backgroundImage && (
+            <img
+              loading="lazy"
+              src={`/packages/${packageName}/${assetsJson.image}`}
+              alt={assetsJson.title}
+              class="md:w-[44rem] md:h-[25rem] h-[12rem] w-full object-cover rounded-xl"
+            />
+          )}
+          <div class="flex flex-col ml-7 md:p-16 p-10">
+            <p class="text-xl">
+              {assetsJson.type === "plugin-page" ||
+              assetsJson.type === "plugin-sw"
+                ? "plugin"
+                : assetsJson.type}
+            </p>
+            <h1 class="text-4xl font-roboto font-semibold">
+              {assetsJson.title}
+            </h1>
+            <p class="text-xl">
+              {" "}
+              By: <strong>{assetsJson.author}</strong>
+            </p>
+            <p class="text-xl">{assetsJson.description}</p>
+            <button
+              class="bg-primary text-text-color border border-transparent rounded-lg px-6 py-3 hover:bg-navbar-color transition-colors duration-300 mt-9"
+              id="install"
+            >
+              Install
+            </button>
+            <button
+              class="hidden bg-primary text-text-color border border-transparent rounded-lg px-6 py-3 hover:bg-navbar-color transition-colors duration-300 mt-9"
+              id="uninstall"
+            >
+              Uninstall
+            </button>
+            <a
+              href="../1"
+              class="w-full bg-background text-text-color border-none rounded-lg text-l max-md:mt-7 px-4 py-4 h-full flex-grow md:text-right text-center font-bold underline underline-offset-4 decoration-2 hover:decoration-border-color transition-colors duration-300"
+            >
+              Go Back
+            </a>
+          </div>
+        </div>
+      )
+    }
+  </div>
+  <variable-define
+    data-assets={JSON.stringify(assetsJson)}
+    data-name={packageName}
+    data-type={assetsJson.type}></variable-define>
 </Layout>
 <script>
-    import { pageLoad } from "@utils/events";
-    import { settings, Settings, type PackageType } from "@utils/settings/index";
-import type { SWPagePlugin } from "@utils/settings/types";
-    let packageName: string;
-    let assetsJson: any;
-    let packageType: string;
-    //some weird trickery to get the variables.
-    class VariableDefiner extends HTMLElement {
-        constructor() {
-            super();
-            assetsJson = this.dataset.assets;
-            packageName = this.dataset.name as string;
-            packageType = this.dataset.type as PackageType;
-        }
+  import { pageLoad } from "@utils/events";
+  import { settings, Settings, type PackageType } from "@utils/settings/index";
+  import type { SWPagePlugin } from "@utils/settings/types";
+  let packageName: string;
+  let assetsJson: any;
+  let packageType: string;
+  //some weird trickery to get the variables.
+  class VariableDefiner extends HTMLElement {
+    constructor() {
+      super();
+      assetsJson = this.dataset.assets;
+      packageName = this.dataset.name as string;
+      packageType = this.dataset.type as PackageType;
     }
-    customElements.define('variable-define', VariableDefiner); 
-    const fn = () => {
-        const cssItems = JSON.parse(localStorage.getItem(Settings.AppearanceSettings.themes) as string) || [];
-        const cssItemExists = cssItems.indexOf(packageName) !== -1;
-        const pluginItems = JSON.parse(localStorage.getItem(Settings.PluginSettings.plugins) as string) || [];
-        //@ts-ignore
-        const pluginItemExists = pluginItems.find(({ name, remove }) => name === packageName && remove !== true);
-        const installButton = document.getElementById("install") as HTMLButtonElement;
-        const uninstallButton = document.getElementById("uninstall") as HTMLButtonElement;
-        const payload = assetsJson ? JSON.parse(assetsJson) : undefined;
-        if (cssItemExists || pluginItemExists) {
-            uninstallButton.classList.remove("hidden");
-            installButton.classList.add("hidden");
-        }
-        installButton.addEventListener("click", () => {
-            console.log(payload);
-            settings.marketPlaceSettings.install(
-                payload.type === "theme" ? {theme: {payload: payload.payload, video: payload.background_video, bgImage: payload.background_image}} :
-                payload.type === "plugin-page" ? {plugin: {name: packageName, src: payload.payload, type: "page" }} : {plugin: { name: packageName, src: payload.payload, type: "serviceWorker" } },
-                packageName, payload.payload
-            ).then(() => {
-                installButton.classList.add("hidden");
-                uninstallButton.classList.remove("hidden");
-            })
-        });
-        uninstallButton.addEventListener("click", () => {
-            settings.marketPlaceSettings.uninstall(packageType as PackageType, packageName).then(() => {
-                uninstallButton.classList.add("hidden")
-                installButton.classList.remove("hidden");
-            });
-        });
+  }
+  customElements.define("variable-define", VariableDefiner);
+  const fn = () => {
+    const cssItems =
+      JSON.parse(
+        localStorage.getItem(Settings.AppearanceSettings.themes) as string
+      ) || [];
+    const cssItemExists = cssItems.indexOf(packageName) !== -1;
+    const pluginItems =
+      JSON.parse(
+        localStorage.getItem(Settings.PluginSettings.plugins) as string
+      ) || [];
+    //@ts-ignore
+    const pluginItemExists = pluginItems.find(
+      ({ name, remove }) => name === packageName && remove !== true
+    );
+    const installButton = document.getElementById(
+      "install"
+    ) as HTMLButtonElement;
+    const uninstallButton = document.getElementById(
+      "uninstall"
+    ) as HTMLButtonElement;
+    const payload = assetsJson ? JSON.parse(assetsJson) : undefined;
+    if (cssItemExists || pluginItemExists) {
+      uninstallButton.classList.remove("hidden");
+      installButton.classList.add("hidden");
     }
-    pageLoad(fn);
+    installButton.addEventListener("click", () => {
+      console.log(payload);
+      settings.marketPlaceSettings
+        .install(
+          payload.type === "theme"
+            ? {
+                theme: {
+                  payload: payload.payload,
+                  video: payload.background_video,
+                  bgImage: payload.background_image,
+                },
+              }
+            : payload.type === "plugin-page"
+              ? {
+                  plugin: {
+                    name: packageName,
+                    src: payload.payload,
+                    type: "page",
+                  },
+                }
+              : {
+                  plugin: {
+                    name: packageName,
+                    src: payload.payload,
+                    type: "serviceWorker",
+                  },
+                },
+          packageName,
+          payload.payload
+        )
+        .then(() => {
+          installButton.classList.add("hidden");
+          uninstallButton.classList.remove("hidden");
+        });
+    });
+    uninstallButton.addEventListener("click", () => {
+      settings.marketPlaceSettings
+        .uninstall(packageType as PackageType, packageName)
+        .then(() => {
+          uninstallButton.classList.add("hidden");
+          installButton.classList.remove("hidden");
+        });
+    });
+  };
+  pageLoad(fn);
 </script>
