diff --git a/www/.vitepress/config.mts b/www/.vitepress/config.mts
new file mode 100644
index 00000000..98fd6567
--- /dev/null
+++ b/www/.vitepress/config.mts
@@ -0,0 +1,150 @@
+import { defineConfig } from "vitepress";
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+    title: "Sunbeam",
+    head: [
+        ["link", { rel: "icon", href: "/favicon.png" }],
+        ["meta", { property: "og:type", content: "website" }],
+        [
+            "meta",
+            {
+                property: "og:image",
+                content: "https://pomdtr.github.io/sunbeam/screenshot.png",
+            },
+        ],
+        [
+            "meta",
+            {
+                property: "og:description",
+                content: "Wrap your tools in keyboard-friendly TUIs",
+            },
+        ],
+    ],
+    appearance: "force-dark",
+    themeConfig: {
+        // https://vitepress.dev/reference/default-theme-config
+        outline: [2, 3],
+        nav: [
+            { text: "Home", link: "/" },
+            {
+                text: "Docs",
+                link: "/docs/",
+            },
+            {
+                text: "Extension Catalog",
+                link: "/catalog/",
+            },
+        ],
+        search: {
+            provider: "local",
+        },
+        sidebar: [
+            {
+                text: "Introduction",
+                link: "/docs/",
+            },
+            {
+                text: "User Guide",
+                items: [
+                    {
+                        text: "Installation",
+                        link: "/docs/user-guide/installation",
+                    },
+                    {
+                        text: "Quick Start",
+                        link: "/docs/user-guide/quickstart",
+                    },
+                    {
+                        text: "Integrations",
+                        link: "/docs/user-guide/integrations",
+                    },
+                ],
+            },
+            {
+                text: "Developer Guide",
+                items: [
+                    {
+                        text: "Guidelines",
+                        link: "/docs/developer-guide/guidelines",
+                    },
+                    {
+                        text: "Examples",
+                        items: [
+                            {
+                                text: "DevDocs (Shell)",
+                                link: "/docs/developer-guide/examples/devdocs",
+                            },
+                            {
+                                text: "Hackernews (Typescript)",
+                                link: "/docs/developer-guide/examples/hackernews",
+                            },
+                            {
+                                text: "File Browser (Python)",
+                                link: "/docs/developer-guide/examples/file-browser",
+                            },
+                            {
+                                text: "Google Search (Shell)",
+                                link: "/docs/developer-guide/examples/google-search",
+                            },
+                        ],
+                    },
+                    {
+                        text: "Publishing",
+                        link: "/docs/developer-guide/publishing",
+                    },
+                    {
+                        text: "Tips",
+                        link: "/docs/developer-guide/tips",
+                    },
+                ],
+            },
+            {
+                text: "Reference",
+                items: [
+                    {
+                        text: "Configuration",
+                        link: "/docs/reference/config",
+                    },
+                    {
+                        text: "Schemas",
+                        collapsed: true,
+                        items: [
+                            {
+                                text: "Manifest",
+                                link: "/docs/reference/schemas/manifest",
+                            },
+                            {
+                                text: "Payload",
+                                link: "/docs/reference/schemas/payload",
+                            },
+                            {
+                                text: "List",
+                                link: "/docs/reference/schemas/list",
+                            },
+                            {
+                                text: "Detail",
+                                link: "/docs/reference/schemas/detail",
+                            },
+                            {
+                                text: "Action",
+                                link: "/docs/reference/schemas/action",
+                            },
+                        ],
+                    },
+                    {
+                        text: "CLI",
+                        link: "/docs/reference/cli",
+                    },
+                ],
+            },
+            {
+                text: "Alternatives",
+                link: "/docs/alternatives",
+            },
+        ],
+        socialLinks: [
+            { icon: "github", link: "https://github.com/pomdtr/sunbeam" },
+        ],
+    },
+});
diff --git a/www/.vitepress/theme/Layout.vue b/www/.vitepress/theme/Layout.vue
new file mode 100644
index 00000000..ecd24eb5
--- /dev/null
+++ b/www/.vitepress/theme/Layout.vue
@@ -0,0 +1,33 @@
+<script setup>
+import DefaultTheme from 'vitepress/theme'
+
+const { Layout } = DefaultTheme
+</script>
+
+<template>
+  <Layout>
+    <template #home-hero-image>
+        <div class="demo-wrapper">
+        <img src="https://vhs.charm.sh/vhs-1331psn9qEJqr4QhiCMSMd.gif" class="demo" />
+        </div>
+    </template>
+  </Layout>
+</template>
+
+<style>
+    .demo-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%; /* Adjust the height as needed to match the parent div's height */
+    }
+
+    .demo {
+        margin: auto;
+        border: double 4px transparent;
+        border-radius: 10px;
+        background-image: linear-gradient(white, white), radial-gradient(circle at top left, #f00, #3020ff);
+        background-origin: border-box;
+        background-clip: padding-box, border-box;
+    }
+</style>
diff --git a/www/.vitepress/theme/index.ts b/www/.vitepress/theme/index.ts
new file mode 100644
index 00000000..6f9b6f57
--- /dev/null
+++ b/www/.vitepress/theme/index.ts
@@ -0,0 +1,10 @@
+import DefaultTheme from 'vitepress/theme'
+import { Theme } from 'vitepress'
+// @ts-ignore
+import Layout from './Layout.vue'
+
+
+export default {
+    extends: DefaultTheme,
+    Layout,
+} as Theme