diff --git a/src/app/themes/page.tsx b/src/app/themes/page.tsx
index 4dd2eda..85b17b3 100644
--- a/src/app/themes/page.tsx
+++ b/src/app/themes/page.tsx
@@ -2,11 +2,24 @@
 import Footer from "@/components/footer";
 import MarketplacePage from "@/components/marketplace";
 import { Navigation } from "@/components/navigation";
+import { getAllThemes, ZenTheme } from "@/lib/themes";
+import { GetStaticProps } from "next";
 
-export default function ThemesMarketplace() {
+export const getStaticProps = (async (context) => {
+  const themes = await getAllThemes();
+  return {
+    props: {
+      themes,
+    },
+  };
+}) satisfies GetStaticProps<{
+  themes: ZenTheme[];
+}>
+
+export default function ThemesMarketplace({ themes }: {themes:ZenTheme[]}) {
   return (
     <main className="flex min-h-screen flex-col items-center justify-start">
-      <MarketplacePage />
+      <MarketplacePage themes={themes} />
       <Footer />  
       <Navigation /> {/* At the bottom of the page */}
     </main>   
diff --git a/src/components/marketplace.tsx b/src/components/marketplace.tsx
index 4f3795b..9bcfdbc 100644
--- a/src/components/marketplace.tsx
+++ b/src/components/marketplace.tsx
@@ -5,14 +5,9 @@ import { getAllThemes, getThemesFromSearch, ZenTheme } from "@/lib/themes";
 import ThemeCard from "./theme-card";
 import { Button } from "./ui/button";
 
-export default function MarketplacePage() {
+export default function MarketplacePage({ themes }: {themes:ZenTheme[]}) {
   const [searchInput, setSearchInput] = React.useState("");
   const [tags, setTags] = React.useState<string[]>(["all"]);
-  const [themes, setThemes] = React.useState<ZenTheme[]>([]);
-
-  React.useEffect(() => {
-    getAllThemes().then(setThemes);
-  }, []);
 
   return (
     <div className="flex flex-col w-full mx-auto items-center justify-center h-full">