diff --git a/examples/example_pro/src/index.css b/examples/example_pro/src/index.css
index 89fee0f20..4b2fae011 100644
--- a/examples/example_pro/src/index.css
+++ b/examples/example_pro/src/index.css
@@ -20,6 +20,6 @@ a {
 :root {
     --fcms-primary: #0070F4;
     --fcms-primary-dark: #0061e6;
-    --fcms-primary-bg: #0061e620;
+    --fcms-primary-bg: #0061e610;
     --fcms-secondary: #FF5B79;
 }
diff --git a/examples/example_v3/src/index.css b/examples/example_v3/src/index.css
index 69f5b95ad..642c1463f 100644
--- a/examples/example_v3/src/index.css
+++ b/examples/example_v3/src/index.css
@@ -25,6 +25,6 @@ body {
 :root {
     --fcms-primary: #0070F4;
     --fcms-primary-dark: #0061e6;
-    --fcms-primary-bg: #0061e620;
+    --fcms-primary-bg: #0061e610;
     --fcms-secondary: #FF5B79;
 }
diff --git a/packages/collection_editor/src/ui/collection_editor/PropertyFieldPreview.tsx b/packages/collection_editor/src/ui/collection_editor/PropertyFieldPreview.tsx
index 17ae6b486..24f18ea06 100644
--- a/packages/collection_editor/src/ui/collection_editor/PropertyFieldPreview.tsx
+++ b/packages/collection_editor/src/ui/collection_editor/PropertyFieldPreview.tsx
@@ -43,7 +43,7 @@ export function PropertyFieldPreview({
 
     const borderColorClass = hasError
         ? "border-red-500"
-        : (selected ? "border-blue-500" : "border-transparent");
+        : (selected ? "border-primary" : "border-transparent");
 
     return <ErrorBoundary>
         <div
@@ -141,7 +141,7 @@ export function NonEditablePropertyPreview({
                     onClick ? cardClickableMixin : "",
                     selected ? cardSelectedMixin : "",
                     "flex-grow p-4 border transition-colors duration-200",
-                    selected ? "border-blue-500" : "border-transparent")}
+                    selected ? "border-primary" : "border-transparent")}
             >
 
                 <div className="w-full flex flex-col">
diff --git a/packages/firecms/src/hooks/useBuildProjectConfig.tsx b/packages/firecms/src/hooks/useBuildProjectConfig.tsx
index e71a38cc8..f11649d5f 100644
--- a/packages/firecms/src/hooks/useBuildProjectConfig.tsx
+++ b/packages/firecms/src/hooks/useBuildProjectConfig.tsx
@@ -104,11 +104,11 @@ export function useBuildProjectConfig({
         if (primaryColor) {
             document.documentElement.style.setProperty("--fcms-primary", primaryColor);
             document.documentElement.style.setProperty("--fcms-primary-dark", darkenColor(primaryColor, 10));
-            document.documentElement.style.setProperty("--fcms-primary-bg", hexToRgbaWithOpacity(primaryColor, 20));
+            document.documentElement.style.setProperty("--fcms-primary-bg", hexToRgbaWithOpacity(primaryColor, 10));
         } else {
             document.documentElement.style.setProperty("--fcms-primary", darkenColor(DEFAULT_PRIMARY_COLOR, 10));
             document.documentElement.style.setProperty("--fcms-primary-dark", darkenColor(DEFAULT_PRIMARY_COLOR, 10));
-            document.documentElement.style.setProperty("--fcms-primary-bg", hexToRgbaWithOpacity(DEFAULT_PRIMARY_COLOR, 20));
+            document.documentElement.style.setProperty("--fcms-primary-bg", hexToRgbaWithOpacity(DEFAULT_PRIMARY_COLOR, 10));
         }
         if (secondaryColor) {
             document.documentElement.style.setProperty("--fcms-secondary", secondaryColor);
diff --git a/packages/firecms_cli/templates/template_pro/src/index.css b/packages/firecms_cli/templates/template_pro/src/index.css
index 89fee0f20..4b2fae011 100644
--- a/packages/firecms_cli/templates/template_pro/src/index.css
+++ b/packages/firecms_cli/templates/template_pro/src/index.css
@@ -20,6 +20,6 @@ a {
 :root {
     --fcms-primary: #0070F4;
     --fcms-primary-dark: #0061e6;
-    --fcms-primary-bg: #0061e620;
+    --fcms-primary-bg: #0061e610;
     --fcms-secondary: #FF5B79;
 }
diff --git a/packages/firecms_cli/templates/template_v3/src/index.css b/packages/firecms_cli/templates/template_v3/src/index.css
index 69f5b95ad..642c1463f 100644
--- a/packages/firecms_cli/templates/template_v3/src/index.css
+++ b/packages/firecms_cli/templates/template_v3/src/index.css
@@ -25,6 +25,6 @@ body {
 :root {
     --fcms-primary: #0070F4;
     --fcms-primary-dark: #0061e6;
-    --fcms-primary-bg: #0061e620;
+    --fcms-primary-bg: #0061e610;
     --fcms-secondary: #FF5B79;
 }
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index af4d15c65..c1ec5a91f 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -67,7 +67,7 @@ h6 {
 :root {
     --fcms-primary: #0070F4;
     --fcms-primary-dark: #0061e6;
-    --fcms-primary-bg: #0061e620;
+    --fcms-primary-bg: #0061e610;
     --fcms-secondary: #FF5B79;
 }
 
@@ -106,12 +106,33 @@ h6 {
     --docsearch-primary-color: #0070f4;
     --docsearch-modal-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0);
     --docsearch-searchbox-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0);
+    --docsearch-muted-color: #7f8497;
     --docsearch-hit-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0);
     --docsearch-key-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0);
     --docsearch-footer-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0);
     --docsearch-logo-color: #0070f4;
 }
 
+.DocSearch-Button {
+    background: #FFFFFFCC;
+}
+html[data-theme=dark] .DocSearch-Button {
+    background: rgba(59, 59, 59, 0.8);
+}
+.DocSearch-Button:hover {
+    background: #FFFFFF;
+}
+html[data-theme=dark] .DocSearch-Button:hover {
+    background: rgba(59, 59, 59);
+}
+
+.footer__link-item {
+    display: flex;
+    gap: 4px;
+    flex-direction: row;
+    align-items: center;
+}
+
 [role="banner"] {
     font-family: "IBM Plex Mono";
 }
diff --git a/website/src/partials/general/Hero.tsx b/website/src/partials/general/Hero.tsx
index 0ab2677e5..7c8d81271 100644
--- a/website/src/partials/general/Hero.tsx
+++ b/website/src/partials/general/Hero.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Panel } from "./Panel";
-import { PagesBackground } from "./PagesBackground";
+import { PagesHeroBackground } from "./PagesHeroBackground";
 
 export function Hero({
                          title,
@@ -16,7 +16,7 @@ export function Hero({
     return (
         <>
             <div className={"w-full relative bg-blue-800 -mt-20"}>
-                <PagesBackground color={color}/>
+                <PagesHeroBackground color={color}/>
                 <Panel includeMargin={false}
                        includePadding={false}
                        color={"transparent"}
diff --git a/website/src/partials/general/MainHeroBackground.tsx b/website/src/partials/general/MainHeroBackground.tsx
new file mode 100644
index 000000000..40dab2c25
--- /dev/null
+++ b/website/src/partials/general/MainHeroBackground.tsx
@@ -0,0 +1,18 @@
+import React, { Suspense } from "react";
+import BrowserOnly from "@docusaurus/BrowserOnly";
+
+const LazyHomeHeroNeatGradient = React.lazy(() => import("../../shape/HomeHeroNeatGradient"));
+
+export function MainHeroBackground() {
+
+    return <>
+        <BrowserOnly
+            fallback={<div className={"absolute"}/>}>
+            {() => (
+                <Suspense fallback={<div/>}>
+                    <LazyHomeHeroNeatGradient/>
+                </Suspense>
+            )}
+        </BrowserOnly>
+    </>
+}
diff --git a/website/src/partials/general/PagesBackground.tsx b/website/src/partials/general/PagesHeroBackground.tsx
similarity index 66%
rename from website/src/partials/general/PagesBackground.tsx
rename to website/src/partials/general/PagesHeroBackground.tsx
index bd52f2296..4dd39cc69 100644
--- a/website/src/partials/general/PagesBackground.tsx
+++ b/website/src/partials/general/PagesHeroBackground.tsx
@@ -4,15 +4,14 @@ import BrowserOnly from "@docusaurus/BrowserOnly";
 const LazyHomeHeroNeatGradient = React.lazy(() => import("../../shape/HomeHeroNeatGradient"));
 const LazyHeroNeatGradient = React.lazy(() => import("../../shape/HeroNeatGradient"));
 
-export function PagesBackground({ color = "grey" }: { color?: "grey" | "primary" | "secondary" }) {
+export function PagesHeroBackground({ color = "primary" }: { color?: "primary" | "secondary" }) {
 
     return <>
         <BrowserOnly
             fallback={<div className={"absolute"}/>}>
             {() => (
                 <Suspense fallback={<div/>}>
-                    {color === "grey"  && <LazyHomeHeroNeatGradient/>}
-                    {color !== "grey"  && <LazyHeroNeatGradient color={color}/>}
+                    <LazyHeroNeatGradient color={color}/>
                 </Suspense>
             )}
         </BrowserOnly>
diff --git a/website/src/partials/home/HeroHome.tsx b/website/src/partials/home/HeroHome.tsx
index 3f4265ebe..56e3679a4 100644
--- a/website/src/partials/home/HeroHome.tsx
+++ b/website/src/partials/home/HeroHome.tsx
@@ -9,7 +9,8 @@ import { defaultBorderMixin } from "../styles";
 import { Panel } from "../general/Panel";
 import clsx from "clsx";
 import { LinedSpace } from "../layout/LinedSpace";
-import { PagesBackground } from "../general/PagesBackground";
+import { PagesHeroBackground } from "../general/PagesHeroBackground";
+import { MainHeroBackground } from "../general/MainHeroBackground";
 
 function HeroHome({}) {
 
@@ -66,8 +67,8 @@ function HeroHome({}) {
 
     return (
         <div
-            className={clsx("w-full relative border-0 border-b -mt-20 bg-gray-800 dark:bg-gray-900", defaultBorderMixin)}>
-            <PagesBackground/>
+            className={clsx("w-full relative border-0 border-b -mt-20 bg-black bg-opacity-80 dark:bg-gray-900 dark:bg-opacity-90", defaultBorderMixin)}>
+            <MainHeroBackground/>
             <Panel includeMargin={false}
                    includePadding={false}
                    color={"transparent"}
diff --git a/website/src/shape/HeroNeatGradient.tsx b/website/src/shape/HeroNeatGradient.tsx
index f48935b9a..47f810b63 100644
--- a/website/src/shape/HeroNeatGradient.tsx
+++ b/website/src/shape/HeroNeatGradient.tsx
@@ -3,7 +3,7 @@ import { NeatGradient } from "@firecms/neat";
 
 function getAmplitude(scroll: number) {
     const min = 10;
-    const max = 30;
+    const max = 40;
     return Math.min(max, Math.max(min, min + scroll / 50));
 }
 
diff --git a/website/src/shape/HomeHeroNeatGradient.tsx b/website/src/shape/HomeHeroNeatGradient.tsx
index 1f6d8bc9e..8e7bd1ec3 100644
--- a/website/src/shape/HomeHeroNeatGradient.tsx
+++ b/website/src/shape/HomeHeroNeatGradient.tsx
@@ -3,7 +3,7 @@ import { NeatGradient } from "@firecms/neat";
 import { easeInOut } from "../partials/styles";
 
 function getBrightnessFrom(scroll: number) {
-    const min = .5;
+    const min = .4;
     const max = .8;
     return Math.min(max, Math.max(min, min + scroll / 1000));
 }
@@ -21,7 +21,7 @@ function getSaturateFrom(scroll: number) {
 }
 
 function getAmplitude(scroll: number) {
-    const min = 2;
+    const min = 4;
     const max = 40;
     return Math.min(max, Math.max(min, min + scroll / 50));
 }