diff --git a/app/components/BackgroundImage.tsx b/app/components/BackgroundImage.tsx
index f191d4ae..497ade5c 100644
--- a/app/components/BackgroundImage.tsx
+++ b/app/components/BackgroundImage.tsx
@@ -7,9 +7,9 @@ import type {
 import type { CSSProperties } from "react";
 
 export type BackgroundImageProps = {
-  backgroundImage?: WeaverseImage | string;
-  backgroundFit?: CSSProperties["objectFit"];
-  backgroundPosition?: PositionInputValue;
+  backgroundImage: WeaverseImage | string;
+  backgroundFit: CSSProperties["objectFit"];
+  backgroundPosition: PositionInputValue;
 };
 
 export function BackgroundImage(props: BackgroundImageProps) {
diff --git a/app/components/Button.tsx b/app/components/Button.tsx
index acc0fe20..ea9d33d2 100644
--- a/app/components/Button.tsx
+++ b/app/components/Button.tsx
@@ -5,9 +5,9 @@ import type {
 } from "@weaverse/hydrogen";
 import type { VariantProps } from "class-variance-authority";
 import { cva } from "class-variance-authority";
-import { clsx } from "clsx";
 import type { HTMLAttributes } from "react";
 import { forwardRef } from "react";
+import { cn } from "~/lib/cn";
 import { Link } from "~/modules";
 
 export interface ButtonProps extends VariantProps<typeof variants> {
@@ -96,7 +96,7 @@ let Button = forwardRef<HTMLElement, Props>((props, ref) => {
         ref={ref as React.ForwardedRef<HTMLAnchorElement>}
         style={style}
         {...rest}
-        className={clsx(variants({ variant, className }))}
+        className={cn(variants({ variant, className }))}
         to={link || "/"}
         target={openInNewTab ? "_blank" : "_self"}
         rel="noreferrer"
@@ -111,7 +111,7 @@ let Button = forwardRef<HTMLElement, Props>((props, ref) => {
       style={style}
       {...rest}
       type="button"
-      className={clsx(variants({ variant, className }))}
+      className={cn(variants({ variant, className }))}
     >
       {text}
     </button>
diff --git a/app/components/Section.tsx b/app/components/Section.tsx
index 4fe50f91..052c164f 100644
--- a/app/components/Section.tsx
+++ b/app/components/Section.tsx
@@ -2,72 +2,71 @@ import {
   type HydrogenComponentProps,
   type InspectorGroup,
 } from "@weaverse/hydrogen";
-import clsx from "clsx";
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
 import type { HTMLAttributes } from "react";
 import React, { forwardRef } from "react";
-import { removeFalsy } from "~/lib/utils";
+import { cn } from "~/lib/cn";
 import type { BackgroundImageProps } from "./BackgroundImage";
 import { BackgroundImage, backgroundInputs } from "./BackgroundImage";
 import type { OverlayProps } from "./Overlay";
 import { Overlay, overlayInputs } from "./Overlay";
 
-export type SectionWidth = "full" | "stretch" | "fixed";
-export type VerticalPadding = "none" | "small" | "medium" | "large";
-
-export type SectionProps = HydrogenComponentProps &
-  HTMLAttributes<HTMLElement> &
-  BackgroundImageProps &
-  OverlayProps &
-  Partial<{
-    as: React.ElementType;
-    width: SectionWidth;
-    gap: number;
-    className: string;
-    verticalPadding: VerticalPadding;
-    borderRadius: number;
-    backgroundColor: string;
-    backgroundFor: "section" | "content";
-    children: React.ReactNode;
-    containerClassName: string;
-  }>;
-
-export let gapClasses: Record<number, string> = {
-  0: "",
-  4: "space-y-1",
-  8: "space-y-2",
-  12: "space-y-3",
-  16: "space-y-4",
-  20: "space-y-5",
-  24: "space-y-3 lg:space-y-6",
-  28: "space-y-3.5 lg:space-y-7",
-  32: "space-y-4 lg:space-y-8",
-  36: "space-y-4 lg:space-y-9",
-  40: "space-y-5 lg:space-y-10",
-  44: "space-y-5 lg:space-y-11",
-  48: "space-y-6 lg:space-y-12",
-  52: "space-y-6 lg:space-y-[52px]",
-  56: "space-y-7 lg:space-y-14",
-  60: "space-y-7 lg:space-y-[60px]",
-};
-
-export let verticalPaddingClasses: Record<VerticalPadding, string> = {
-  none: "",
-  small: "py-4 md:py-6 lg:py-8",
-  medium: "py-8 md:py-12 lg:py-16",
-  large: "py-12 md:py-24 lg:py-32",
+export type BackgroundProps = BackgroundImageProps & {
+  backgroundFor: "section" | "content";
+  backgroundColor: string;
 };
 
-let paddingClasses = {
-  full: "",
-  stretch: "px-3 md:px-10 lg:px-16",
-  fixed: "px-3 md:px-4 lg:px-6 mx-auto",
-};
+export interface SectionProps
+  extends Omit<VariantProps<typeof variants>, "padding">,
+    HydrogenComponentProps,
+    Omit<HTMLAttributes<HTMLElement>, "children">,
+    BackgroundProps,
+    OverlayProps {
+  as: React.ElementType;
+  borderRadius: number;
+  className: string;
+  containerClassName: string;
+}
 
-export let widthClasses: Record<SectionWidth, string> = {
-  full: "w-full h-full",
-  stretch: "w-full h-full",
-  fixed: "w-full h-full max-w-[var(--page-width,1280px)] mx-auto",
-};
+let variants = cva("relative overflow-hidden", {
+  variants: {
+    width: {
+      full: "w-full h-full",
+      stretch: "w-full h-full",
+      fixed: "w-full h-full max-w-[var(--page-width,1280px)] mx-auto",
+    },
+    padding: {
+      full: "",
+      stretch: "px-3 md:px-10 lg:px-16",
+      fixed: "px-3 md:px-4 lg:px-6 mx-auto",
+    },
+    verticalPadding: {
+      none: "",
+      small: "py-4 md:py-6 lg:py-8",
+      medium: "py-8 md:py-12 lg:py-16",
+      large: "py-12 md:py-24 lg:py-32",
+    },
+    gap: {
+      0: "",
+      4: "space-y-1",
+      8: "space-y-2",
+      12: "space-y-3",
+      16: "space-y-4",
+      20: "space-y-5",
+      24: "space-y-3 lg:space-y-6",
+      28: "space-y-3.5 lg:space-y-7",
+      32: "space-y-4 lg:space-y-8",
+      36: "space-y-4 lg:space-y-9",
+      40: "space-y-5 lg:space-y-10",
+      44: "space-y-5 lg:space-y-11",
+      48: "space-y-6 lg:space-y-12",
+      52: "space-y-6 lg:space-y-[52px]",
+      56: "space-y-7 lg:space-y-14",
+      60: "space-y-7 lg:space-y-[60px]",
+    },
+  },
+});
 
 export let Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {
   let {
@@ -90,39 +89,37 @@ export let Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {
     style = {},
     ...rest
   } = props;
-
-  let isBackgroundForContent = backgroundFor === "content";
+  style = {
+    ...style,
+    "--section-background-color": backgroundColor,
+    "--section-border-radius": `${borderRadius}px`,
+  } as React.CSSProperties;
+  let isBgForContent = backgroundFor === "content";
 
   return (
     <Component
       ref={ref}
       {...rest}
-      className={clsx(
-        "relative overflow-hidden",
-        paddingClasses[width!],
-        className,
-      )}
-      style={removeFalsy({
-        ...style,
-        backgroundColor: !isBackgroundForContent ? backgroundColor : "",
-        borderRadius: !isBackgroundForContent ? borderRadius : "",
+      style={style}
+      className={cn(variants({ padding: width, className }), {
+        "has-background": !isBgForContent,
       })}
     >
-      {!isBackgroundForContent && <OverlayAndBackground {...props} />}
+      {!isBgForContent && <OverlayAndBackground {...props} />}
       <div
-        className={clsx(
-          "relative overflow-hidden",
-          widthClasses[width!],
-          gapClasses[gap!],
-          verticalPaddingClasses[verticalPadding!],
-          containerClassName,
+        className={cn(
+          variants({
+            gap,
+            width,
+            verticalPadding,
+            className: containerClassName,
+          }),
+          {
+            "has-background": isBgForContent,
+          },
         )}
-        style={removeFalsy({
-          backgroundColor: isBackgroundForContent ? backgroundColor : "",
-          borderRadius: isBackgroundForContent ? borderRadius : "",
-        })}
       >
-        {isBackgroundForContent && <OverlayAndBackground {...props} />}
+        {isBgForContent && <OverlayAndBackground {...props} />}
         {children}
       </div>
     </Component>
diff --git a/app/sections/hero-image/index.tsx b/app/sections/hero-image.tsx
similarity index 95%
rename from app/sections/hero-image/index.tsx
rename to app/sections/hero-image.tsx
index e261f348..1c27d8aa 100644
--- a/app/sections/hero-image/index.tsx
+++ b/app/sections/hero-image.tsx
@@ -16,9 +16,9 @@ export interface HeroImageProps extends VariantProps<typeof variants> {}
 let variants = cva("", {
   variants: {
     height: {
-      small: "min-h-[375px] sm:min-h-[400px] lg:min-h-[440px]",
-      medium: "min-h-[480px] sm:min-h-[460px] lg:min-h-[500px]",
-      large: "min-h-[560px] sm:min-h-[560px] lg:min-h-[640px]",
+      small: "min-h-[40vh] lg:min-h-[50vh]",
+      medium: "min-h-[50vh] lg:min-h-[60vh]",
+      large: "min-h-[70vh] lg:min-h-[80vh]",
       full: "h-screen-no-nav",
     },
     contentPosition: {
diff --git a/app/sections/hero-video/index.tsx b/app/sections/hero-video.tsx
similarity index 59%
rename from app/sections/hero-video/index.tsx
rename to app/sections/hero-video.tsx
index 18f5a2c7..db170235 100644
--- a/app/sections/hero-video/index.tsx
+++ b/app/sections/hero-video.tsx
@@ -2,40 +2,95 @@ import type {
   HydrogenComponentProps,
   HydrogenComponentSchema,
 } from "@weaverse/hydrogen";
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
 import clsx from "clsx";
 import type { CSSProperties } from "react";
 import { Suspense, forwardRef, lazy } from "react";
 import type { OverlayProps } from "~/components/Overlay";
 import { Overlay, overlayInputs } from "~/components/Overlay";
-import { gapClasses } from "~/components/Section";
 
-type HeroVideoProps = OverlayProps & {
-  videoURL: string;
-  sectionHeightDesktop: number;
-  sectionHeightMobile: number;
-  gap: number;
+const HEIGHTS = {
+  small: {
+    desktop: "40vh",
+    mobile: "50vh",
+  },
+  medium: {
+    desktop: "50vh",
+    mobile: "60vh",
+  },
+  large: {
+    desktop: "70vh",
+    mobile: "80vh",
+  },
+  full: {
+    desktop: "calc(var(--screen-height, 100vh) - var(--height-nav))",
+    mobile: "calc(var(--screen-height, 100vh) - var(--height-nav))",
+  },
+  custom: null,
 };
 
+export interface HeroVideoProps
+  extends Omit<VariantProps<typeof variants>, "padding">,
+    HydrogenComponentProps,
+    OverlayProps {
+  videoURL: string;
+  height: "small" | "medium" | "large" | "full" | "custom";
+  heightOnDesktop: number;
+  heightOnMobile: number;
+}
+
+let variants = cva(
+  "absolute inset-0 max-w-[100vw] mx-auto px-3 flex flex-col justify-center items-center z-10",
+  {
+    variants: {
+      gap: {
+        0: "",
+        4: "space-y-1",
+        8: "space-y-2",
+        12: "space-y-3",
+        16: "space-y-4",
+        20: "space-y-5",
+        24: "space-y-3 lg:space-y-6",
+        28: "space-y-3.5 lg:space-y-7",
+        32: "space-y-4 lg:space-y-8",
+        36: "space-y-4 lg:space-y-9",
+        40: "space-y-5 lg:space-y-10",
+        44: "space-y-5 lg:space-y-11",
+        48: "space-y-6 lg:space-y-12",
+        52: "space-y-6 lg:space-y-[52px]",
+        56: "space-y-7 lg:space-y-14",
+        60: "space-y-7 lg:space-y-[60px]",
+      },
+    },
+    defaultVariants: {
+      gap: 20,
+    },
+  },
+);
+
 let ReactPlayer = lazy(() => import("react-player/lazy"));
 
-let HeroVideo = forwardRef<
-  HTMLElement,
-  HeroVideoProps & HydrogenComponentProps
->((props, ref) => {
+let HeroVideo = forwardRef<HTMLElement, HeroVideoProps>((props, ref) => {
   let {
     videoURL,
     gap,
-    sectionHeightDesktop,
-    sectionHeightMobile,
+    height,
+    heightOnDesktop,
+    heightOnMobile,
     enableOverlay,
     overlayColor,
     overlayOpacity,
     children,
     ...rest
   } = props;
+
+  let desktopHeight = HEIGHTS[height]?.desktop || `${heightOnDesktop}px`;
+  let mobileHeight = HEIGHTS[height]?.mobile || `${heightOnMobile}px`;
+
   let sectionStyle: CSSProperties = {
-    "--desktop-height": `${sectionHeightDesktop}px`,
-    "--mobile-height": `${sectionHeightMobile}px`,
+    "--desktop-height": desktopHeight,
+    "--mobile-height": mobileHeight,
   } as CSSProperties;
 
   return (
@@ -71,14 +126,7 @@ let HeroVideo = forwardRef<
           overlayOpacity={overlayOpacity}
           className="z-0"
         />
-        <div
-          className={clsx(
-            "absolute inset-0 max-w-[100vw] mx-auto px-3 flex flex-col justify-center items-center z-10",
-            gapClasses[gap],
-          )}
-        >
-          {children}
-        </div>
+        <div className={clsx(variants({ gap }))}>{children}</div>
       </div>
     </section>
   );
@@ -106,9 +154,24 @@ export let schema: HydrogenComponentSchema = {
           type: "heading",
           label: "Layout",
         },
+        {
+          type: "select",
+          name: "height",
+          label: "Section height",
+          configs: {
+            options: [
+              { value: "small", label: "Small" },
+              { value: "medium", label: "Medium" },
+              { value: "large", label: "Large" },
+              { value: "full", label: "Fullscreen" },
+              { value: "custom", label: "Custom" },
+            ],
+          },
+          defaultValue: "medium",
+        },
         {
           type: "range",
-          name: "sectionHeightDesktop",
+          name: "heightOnDesktop",
           label: "Height on desktop",
           defaultValue: 650,
           configs: {
@@ -117,10 +180,11 @@ export let schema: HydrogenComponentSchema = {
             step: 10,
             unit: "px",
           },
+          condition: "height.eq.custom",
         },
         {
           type: "range",
-          name: "sectionHeightMobile",
+          name: "heightOnMobile",
           label: "Height on mobile",
           defaultValue: 300,
           configs: {
@@ -129,6 +193,7 @@ export let schema: HydrogenComponentSchema = {
             step: 10,
             unit: "px",
           },
+          condition: "height.eq.custom",
         },
         {
           type: "range",
@@ -155,6 +220,8 @@ export let schema: HydrogenComponentSchema = {
     overlayColor: "#000000",
     overlayOpacity: 40,
     videoURL: "https://www.youtube.com/watch?v=gbLmku5QACM",
+    height: "medium",
+    gap: 20,
     children: [
       {
         type: "subheading",
diff --git a/app/sections/image-gallery/index.tsx b/app/sections/image-gallery/index.tsx
index 1b17615b..bfae945a 100644
--- a/app/sections/image-gallery/index.tsx
+++ b/app/sections/image-gallery/index.tsx
@@ -1,6 +1,5 @@
 import type { HydrogenComponentSchema } from "@weaverse/hydrogen";
 import { forwardRef } from "react";
-
 import type { SectionProps } from "~/components/Section";
 import { Section, sectionInspector } from "~/components/Section";
 
diff --git a/app/sections/testimonials/index.tsx b/app/sections/testimonials/index.tsx
index 5d3a0318..37d867ff 100644
--- a/app/sections/testimonials/index.tsx
+++ b/app/sections/testimonials/index.tsx
@@ -1,6 +1,5 @@
 import { type HydrogenComponentSchema } from "@weaverse/hydrogen";
 import { forwardRef } from "react";
-
 import type { SectionProps } from "~/components/Section";
 import { Section, sectionInspector } from "~/components/Section";
 
diff --git a/app/sections/video-embed/index.tsx b/app/sections/video-embed/index.tsx
index 93d592ad..e6293f14 100644
--- a/app/sections/video-embed/index.tsx
+++ b/app/sections/video-embed/index.tsx
@@ -1,6 +1,5 @@
 import type { HydrogenComponentSchema } from "@weaverse/hydrogen";
 import { forwardRef } from "react";
-
 import type { SectionProps } from "~/components/Section";
 import { Section, sectionInspector } from "~/components/Section";
 
diff --git a/app/styles/app.css b/app/styles/app.css
index 60d2e5dd..774b0a9d 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -182,3 +182,8 @@
 .vt-product-image {
   view-transition-name: product-image;
 }
+
+.has-background {
+  background-color: var(--section-background-color);
+  border-radius: var(--section-border-radius);
+}
diff --git a/package.json b/package.json
index 63944d28..b8bfe7d8 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "@weaverse/pilot",
   "private": true,
   "sideEffects": false,
-  "version": "2.6.10",
+  "version": "2.6.11",
   "type": "module",
   "author": "Weaverse",
   "scripts": {
@@ -83,4 +83,4 @@
   "engines": {
     "node": ">=18.0.0"
   }
-}
\ No newline at end of file
+}