diff --git a/src/components/catalog/CatalogCard.astro b/src/components/catalog/CatalogCard.astro
new file mode 100644
index 00000000..67da997a
--- /dev/null
+++ b/src/components/catalog/CatalogCard.astro
@@ -0,0 +1,58 @@
+---
+interface Props {
+    page: number | string | undefined;
+    lang: string;
+}
+interface Asset {
+    title: string;
+    description: string;
+    author: string;
+    image: string;
+    tags: [];
+    version: string;
+    background_image: string | null;
+    background_video: string | null;
+    payload: string;
+    type: "theme" | "plugin-sw" | "plugin-page";
+}
+const { page, lang } = Astro.props;
+const getAssets = async () => {
+    const res = await fetch(new URL(`/api/catalog-assets?page=${page}`, Astro.url));
+    const data = await res.json();
+    return data.assets;
+};
+const assets = await getAssets();
+---
+<div class="text-3xl font-roboto font-bold text-text-color p-10">
+    {Object.keys(assets).length > 0 && (
+        <div class="flex flex-row gap-6 flex-wrap justify-center">
+            {Object.entries(assets).map((asset) => {
+                const pName = asset[0];
+                const a = asset[1] as unknown as Asset;
+                return (
+                    <a href={`/${lang}/catalog/package/${pName}`}>
+                            <div class="bg-navbar-color w-64 rounded-3xl shadow-lg overflow-hidden transition-transform duration-300 hover:scale-105 text-text-color">
+                                <img src={`/packages/${pName}/${a.image}`} alt={a.title} class="w-full h-40 object-cover" />
+                                <div class="p-6 text-sm">
+                                    <p class="font-semibold text-2xl mb-2"> {a.title} </p>
+                                    <p class="mb-4"> {a.description} </p>
+                                    <div class="flex flex-wrap gap-2 mb-4 w-full">
+                                        {a.tags.map((tag) => (
+                                            <p class="bg-navbar-text-color text-navbar-color font-bold px-3 py-1 rounded-md text-center"> { tag } </p>
+                                        ))}
+                                    </div>
+                                    <p> 
+                                        <strong>Version: </strong> { a.version } 
+                                    </p>
+                                    <p> 
+                                        <strong>Type: </strong> { a.type === "plugin-page" || a.type === "plugin-sw" ? "plugin" : a.type } 
+                                    </p>
+                                </div>
+                            </div>
+                        </a>
+                    )
+                }
+            )}
+        </div>
+    )}
+</div>
diff --git a/src/components/catalog/CatalogCard.svelte b/src/components/catalog/CatalogCard.svelte
deleted file mode 100644
index ffc46233..00000000
--- a/src/components/catalog/CatalogCard.svelte
+++ /dev/null
@@ -1,50 +0,0 @@
-<script lang="ts">
-import { Suspense, createSuspense } from "@svelte-drama/suspense";
-const suspend = createSuspense();
-import { Settings } from "@utils/settings/index";
-export let page;
-export let lang;
-async function getAssets() {
-    const response = await fetch("/api/catalog-assets?page=" + page);
-    const data = await response.json();
-    return data.assets;
-}
-const assets = getAssets();
-</script>
-
-<div class="text-3xl font-roboto font-bold text-text-color p-10">
-    <Suspense>
-        {#snippet loading()}
-            <p class="text-4xl"> Loading... </p>
-        {/snippet}
-        {#snippet children(suspend)}
-            {#await suspend(assets) then data}
-                {#if Object.keys(data).length > 0}
-                    <div class="flex flex-row gap-6 flex-wrap justify-center">
-                        {#each Object.entries(data) as [key, asset]}
-                            <a href={`/${lang}/catalog/package/${key}`}>
-                                <div class="bg-navbar-color w-64 rounded-3xl shadow-lg overflow-hidden transition-transform duration-300 hover:scale-105">
-                                    <img src={`/packages/${key}/${asset.image}`} alt={asset.title} class="w-full h-40 object-cover" />
-                                    <div class="p-6 text-sm">
-                                        <p class="font-semibold text-2xl mb-2"> {asset.title} </p>
-                                        <p class="mb-4"> {asset.description} </p>
-                                        <div class="flex flex-wrap gap-2 mb-4 w-full">
-                                            {#each asset.tags as tag}
-                                                <p class="bg-navbar-text-color text-navbar-color font-bold px-3 py-1 rounded-md text-center"> {tag} </p>
-                                            {/each}
-                                        </div>
-                                        <div>
-                                            <strong>Version:</strong>
-                                            {asset.version}
-                                        </div>
-                                        <div><strong>Type:</strong> {asset.type === "plugin-page" || asset.type === "plugin-sw" ? "plugin" : asset.type}</div>
-                                    </div>
-                                </div>
-                            </a>
-                        {/each}
-                    </div>
-                {/if}
-            {/await}
-        {/snippet}
-    </Suspense>
-</div>
diff --git a/src/pages/[lang]/catalog/[...page].astro b/src/pages/[lang]/catalog/[...page].astro
index 8962d04d..693183ee 100644
--- a/src/pages/[lang]/catalog/[...page].astro
+++ b/src/pages/[lang]/catalog/[...page].astro
@@ -1,5 +1,5 @@
 ---
-import CatalogCard from "@components/catalog/CatalogCard.svelte";
+import CatalogCard from "@components/catalog/CatalogCard.astro";
 import Layout from "@layouts/Layout.astro";
 import { getLangFromUrl, useTranslations } from "../../../i18n/utils";
 import Pagnation from "./pagnation.astro";
@@ -22,7 +22,7 @@ const lastPage = assetsJson.pages;
           <h1 class="text-3xl md:text-5xl font-bold"> Nebula Catalog </h1>
           <p class="text-l md:text-xl max-md:text-center max-md:p-2"> The Nebula Catalog is a place for you to find user-created themes and plugins. </p>
       </div>
-      <CatalogCard client:only="svelte" page={page} lang={lang} />
+      <CatalogCard page={page} lang={lang} />
     <div class="flex flex-row pb-8 gap-4 font-roboto">
       {/* The first page. If the user is on this page, or the one after it, don't show it. */}
       {parseInt(page!) > 2 && (