diff --git a/docs/.vitepress/theme/Layout.vue b/docs/.vitepress/theme/Layout.vue
new file mode 100644
index 00000000..405a884a
--- /dev/null
+++ b/docs/.vitepress/theme/Layout.vue
@@ -0,0 +1,35 @@
+<script setup>
+import DefaultTheme from 'vitepress/theme'
+
+const { Layout } = DefaultTheme
+</script>
+
+<template>
+  <Layout>
+    <template #home-hero-image>
+        <div class="video-wrapper">
+        <video class="demo" autoplay muted loop>
+            <source src="/assets/demo.webm" type="video/webm">
+        </video>
+        </div>
+    </template>
+  </Layout>
+</template>
+
+<style>
+    .video-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/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 42fe9a93..6f9b6f57 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -1,4 +1,10 @@
 import DefaultTheme from 'vitepress/theme'
-import './custom.css'
+import { Theme } from 'vitepress'
+// @ts-ignore
+import Layout from './Layout.vue'
 
-export default DefaultTheme
+
+export default {
+    extends: DefaultTheme,
+    Layout,
+} as Theme
diff --git a/docs/assets/demo.gif b/docs/assets/demo.gif
index a5c7f59b..6771bcd9 100644
Binary files a/docs/assets/demo.gif and b/docs/assets/demo.gif differ
diff --git a/docs/assets/demo.webm b/docs/assets/demo.webm
new file mode 100644
index 00000000..5b5cbbac
Binary files /dev/null and b/docs/assets/demo.webm differ
diff --git a/docs/demo.tape b/docs/demo.tape
index a7f27fec..e0ee4a6c 100644
--- a/docs/demo.tape
+++ b/docs/demo.tape
@@ -55,6 +55,7 @@
 Require sunbeam
 
 Output ./assets/demo.gif
+Output ./assets/demo.webm
 
 Set Framerate 30
 Set Shell "bash"
@@ -63,7 +64,6 @@ Set Width 1200
 Set Height 630
 Set Padding 20
 Set Theme "Tomorrow Night"
-Set BorderRadius 20
 
 Type "sunbeam" Sleep 500ms Enter
 
diff --git a/docs/developer-guide/shell.md b/docs/developer-guide/shell.md
index 9b1ec5d2..7733dda6 100644
--- a/docs/developer-guide/shell.md
+++ b/docs/developer-guide/shell.md
@@ -38,7 +38,7 @@ echo "Not implemented" >&2
 exit 1
 ```
 
-Here we define a single command named `search-docsets`, with a `view` mode.
+Here we define a single command named `search-docsets`, with a mode set to `list`.
 
 We can run our script to see the generated manifest:
 
@@ -80,7 +80,7 @@ Use "extension [command] --help" for more information about a command.
 
 When the user run a command, the script is called with the command name as first argument.
 
-Here the command name is `search-docsets`, and the command mode is `view`, so the script must return a view when called with this argument.
+Here the command name is `search-docsets`, and the command mode is `list`, so the script must return a view when called with this argument.
 
 We will use the `sunbeam fetch` command to fetch the list of docsets from the devdocs api. The `fetch` command allows you to perform http requests (with an api similar to curl).
 
@@ -210,7 +210,7 @@ elif [ "$COMMAND" = "search-entries" ]; then
 fi
 ```
 
-Here we add a new command named `search-entries`, with a `view` mode. We also add a `docset` parameter, which is required.
+Here we add a new command named `search-entries`, with a `list` mode. We also add a `docset` parameter, which is required.
 
 When the user run this command, the script is called with the command name as first argument, and the parameters as json on stdin.
 
diff --git a/docs/index.md b/docs/index.md
index 1d68fd05..0f8d001f 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -7,9 +7,6 @@ hero:
   name: Sunbeam
   text: CLI Launcher
   tagline: Elevate Your Command Line Experience
-  image:
-    src: /demo.gif
-    alt: VitePress
   actions:
     - theme: brand
       text: Get Started
@@ -21,7 +18,7 @@ hero:
 features:
   - title: Augment your tools
     icon: 🦾
-    details: Wrap your tools in slicks, keyboard-driven UIs with a few lines of code, using the language of your choice.
+    details: Wrap your tools in slick, keyboard-driven TUIs with a few lines of code, using the language of your choice.
   - title: Cross-platform
     icon: 🌍
     details: Sunbeam is distributed as a single binary, available for windows, macos and linux.
@@ -32,7 +29,7 @@ features:
     details: Since sunbeam extensions are just scripts, they are easy to write, easy to share, and easy to install.
   - title: UNIX philosophy
     icon: 🐧
-    details: Sunbeams relies on shebangs to run scripts. It integrates well with the rest of the UNIX ecosystem.
+    details: Sunbeam relies on shebangs to run scripts. It integrates well with the rest of the UNIX ecosystem.
     link: /developer-guide/guidelines
     linkText: Learn more
 ---
diff --git a/docs/public/screenshot.png b/docs/public/screenshot.png
index 103c7655..27106a69 100644
Binary files a/docs/public/screenshot.png and b/docs/public/screenshot.png differ