diff --git a/.vitepress/theme/Layout.vue b/.vitepress/theme/Layout.vue
new file mode 100644
index 0000000..c070240
--- /dev/null
+++ b/.vitepress/theme/Layout.vue
@@ -0,0 +1,13 @@
+<script setup>
+import DefaultTheme from 'vitepress/theme'
+import Banner from '../../components/Banner.vue';
+import "iconify-icon";
+
+const { Layout } = DefaultTheme
+</script>
+
+<template>
+    <Banner />
+    <Layout>
+    </Layout>
+</template>
\ No newline at end of file
diff --git a/.vitepress/theme/custom.css b/.vitepress/theme/custom.css
index bbb1605..7f7229d 100644
--- a/.vitepress/theme/custom.css
+++ b/.vitepress/theme/custom.css
@@ -12,6 +12,7 @@
   --vp-home-hero-image-filter: brightness(0.8) saturate(1.2); */
   --vp-home-hero-name-color: rgb(249, 168, 212);
   --vp-c-brand-1: rgb(249, 168, 212);
+  --vp-layout-top-height: var(--spacing-10);
   --lysand-gradient: linear-gradient(
     to right,
     rgb(249, 168, 212),
diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
index c495bc1..f9c0381 100644
--- a/.vitepress/theme/index.ts
+++ b/.vitepress/theme/index.ts
@@ -1,4 +1,8 @@
 import DefaultTheme from "vitepress/theme";
+import Layout from "./Layout.vue";
 import "./custom.css";
 
-export default DefaultTheme;
+export default {
+    extends: DefaultTheme,
+    Layout,
+};
diff --git a/bun.lockb b/bun.lockb
index 53f4bbf..1c26807 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/components/Banner.vue b/components/Banner.vue
new file mode 100644
index 0000000..fd74c25
--- /dev/null
+++ b/components/Banner.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const currentNews = {
+    id: "lysand3",
+    title: "Lysand 3.0",
+    description: "Lysand 3.0 is now available!",
+};
+</script>
+<template>
+    <div
+        class="fixed inset-x-0 top-0 flex items-center h-10 gap-x-6 overflow-hidden bg-black px-4 py-2.5 sm:px-3.5 sm:before:flex-1 z-50">
+        <div class="flex flex-wrap justify-center gap-x-4 gap-y-2 w-full">
+            <p class="text-sm text-gray-50">
+                <strong class="font-semibold">{{
+                    currentNews.title
+                }}</strong>&nbsp;•&nbsp;{{ currentNews.description }}
+            </p>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/components/Features.vue b/components/Features.vue
index 4f67e79..46edf53 100644
--- a/components/Features.vue
+++ b/components/Features.vue
@@ -26,7 +26,6 @@
 </template>
 
 <script setup>
-import "iconify-icon";
 const features = [
     {
         name: "JSON-based APIs",
diff --git a/package.json b/package.json
index aa9a4cf..9f98309 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "trustedDependencies": ["@biomejs/biome"],
   "dependencies": {
     "@tailwindcss/vite": "^4.0.0-alpha.14",
+    "@vueuse/core": "^10.9.0",
     "iconify-icon": "^2.1.0",
     "tailwindcss": "^4.0.0-alpha.14"
   }