diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
new file mode 100644
index 0000000..2bb4049
--- /dev/null
+++ b/docs/.vitepress/theme/custom.css
@@ -0,0 +1,9 @@
+/* Override the default brand color to green */
+:root {
+  /* --vp-button-brand-bg: var(--vp-c-green-1); */
+  --vp-c-brand-1: var(--vp-c-green-1);
+  --vp-c-brand-2: var(--vp-c-green-2);
+  --vp-c-brand-3: var(--vp-c-green-3);
+  --vp-c-default-2: var(--vp-c-green-2);
+  --vp-button-brand-hover-bg: var(--vp-c-green-2);
+}
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
new file mode 100644
index 0000000..62e5e28
--- /dev/null
+++ b/docs/.vitepress/theme/index.ts
@@ -0,0 +1,7 @@
+import type { Theme } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import './custom.css'
+
+export default {
+  extends: DefaultTheme
+} satisfies Theme
diff --git a/docs/index.md b/docs/index.md
index 361b633..1e11b41 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -36,25 +36,3 @@ features:
     title: Simple and Intuitive
     details: Focus on your data without the complexity of managing A1 ranges, making data operations straightforward and efficient.
 ---
-
-<style>
-:root {
-  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #34A853 30%, #0F9D58);
-  --vp-home-hero-image-background-image: linear-gradient(-45deg, #34A853 50%, #0F9D58 50%);
-  --vp-home-hero-image-filter: blur(44px);
-  --vp-home-hero-name-color: #11c111;
-  --vp-button-brand-bg: #11c111;
-}
-
-@media (min-width: 640px) {
-  :root {
-    --vp-home-hero-image-filter: blur(56px);
-  }
-}
-
-@media (min-width: 960px) {
-  :root {
-    --vp-home-hero-image-filter: blur(68px);
-  }
-}
-</style>