diff --git a/app/components/BackgroundImage.tsx b/app/components/BackgroundImage.tsx
index 5c4913eb..f191d4ae 100644
--- a/app/components/BackgroundImage.tsx
+++ b/app/components/BackgroundImage.tsx
@@ -7,7 +7,7 @@ import type {
 import type { CSSProperties } from "react";
 
 export type BackgroundImageProps = {
-  backgroundImage?: WeaverseImage;
+  backgroundImage?: WeaverseImage | string;
   backgroundFit?: CSSProperties["objectFit"];
   backgroundPosition?: PositionInputValue;
 };
@@ -15,10 +15,14 @@ export type BackgroundImageProps = {
 export function BackgroundImage(props: BackgroundImageProps) {
   let { backgroundImage, backgroundFit, backgroundPosition } = props;
   if (backgroundImage) {
+    let data =
+      typeof backgroundImage === "string"
+        ? { url: backgroundImage, altText: "Section background" }
+        : backgroundImage;
     return (
       <Image
         className="absolute inset-0 w-full h-full z-[-1]"
-        data={backgroundImage}
+        data={data}
         sizes="auto"
         style={{
           objectFit: backgroundFit,
@@ -31,10 +35,6 @@ export function BackgroundImage(props: BackgroundImageProps) {
 }
 
 export let backgroundInputs: InspectorGroup["inputs"] = [
-  {
-    type: "heading",
-    label: "Background",
-  },
   {
     type: "select",
     name: "backgroundFor",
diff --git a/app/components/Button.tsx b/app/components/Button.tsx
index fd072d96..04ec81ed 100644
--- a/app/components/Button.tsx
+++ b/app/components/Button.tsx
@@ -6,6 +6,7 @@ import type {
 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 { Link } from "~/modules";
 
@@ -15,6 +16,13 @@ export interface ButtonProps extends VariantProps<typeof variants> {
   text: string;
   link?: string;
   openInNewTab?: boolean;
+  buttonStyle: "inherit" | "custom";
+  backgroundColor?: string;
+  textColor?: string;
+  borderColor?: string;
+  backgroundColorHover?: string;
+  textColorHover?: string;
+  borderColorHover?: string;
 }
 
 let variants = cva(
@@ -45,7 +53,10 @@ let variants = cva(
   },
 );
 
-interface Props extends ButtonProps, Partial<HydrogenComponentProps> {}
+interface Props
+  extends ButtonProps,
+    Omit<HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "children">,
+    Partial<HydrogenComponentProps> {}
 
 let Button = forwardRef<HTMLElement, Props>((props, ref) => {
   let {
@@ -57,15 +68,35 @@ let Button = forwardRef<HTMLElement, Props>((props, ref) => {
     link,
     openInNewTab,
     className,
+    buttonStyle,
+    backgroundColor,
+    textColor,
+    borderColor,
+    backgroundColorHover,
+    textColorHover,
+    borderColorHover,
+    style = {},
     ...rest
   } = props;
+  if (buttonStyle === "custom") {
+    style = {
+      ...style,
+      "--color-button-bg": backgroundColor,
+      "--color-button-text": textColor,
+      "--color-button-border": borderColor,
+      "--color-button-bg-hover": backgroundColorHover,
+      "--color-button-text-hover": textColorHover,
+      "--color-button-border-hover": borderColorHover,
+    } as React.CSSProperties;
+  }
 
   if (link) {
     return (
       <Link
         ref={ref as React.ForwardedRef<HTMLAnchorElement>}
+        style={style}
         {...rest}
-        className={clsx(variants({ variant: variant, className }))}
+        className={clsx(variants({ variant, className }))}
         to={link || "/"}
         target={openInNewTab ? "_blank" : "_self"}
         rel="noreferrer"
@@ -77,9 +108,10 @@ let Button = forwardRef<HTMLElement, Props>((props, ref) => {
   return (
     <button
       ref={ref as React.ForwardedRef<HTMLButtonElement>}
+      style={style}
       {...rest}
       type="button"
-      className={clsx(variants({ variant: variant, className }))}
+      className={clsx(variants({ variant, className }))}
     >
       {text}
     </button>
@@ -123,6 +155,64 @@ export let buttonInputs: InspectorGroup["inputs"] = [
     },
     defaultValue: "primary",
   },
+  {
+    type: "heading",
+    label: "Styles",
+  },
+  {
+    type: "select",
+    name: "buttonStyle",
+    label: "Button style",
+    configs: {
+      options: [
+        { label: "Inherit", value: "inherit" },
+        { label: "Custom", value: "custom" },
+      ],
+    },
+    defaultValue: "inherit",
+  },
+  {
+    type: "color",
+    label: "Background color",
+    name: "backgroundColor",
+    defaultValue: "#000",
+    condition: "buttonStyle.eq.custom",
+  },
+  {
+    type: "color",
+    label: "Text color",
+    name: "textColor",
+    defaultValue: "#fff",
+    condition: "buttonStyle.eq.custom",
+  },
+  {
+    type: "color",
+    label: "Border color",
+    name: "borderColor",
+    defaultValue: "#00000000",
+    condition: "buttonStyle.eq.custom",
+  },
+  {
+    type: "color",
+    label: "Background color (hover)",
+    name: "backgroundColorHover",
+    defaultValue: "#00000000",
+    condition: "buttonStyle.eq.custom",
+  },
+  {
+    type: "color",
+    label: "Text color (hover)",
+    name: "textColorHover",
+    defaultValue: "#000",
+    condition: "buttonStyle.eq.custom",
+  },
+  {
+    type: "color",
+    label: "Border color (hover)",
+    name: "borderColorHover",
+    defaultValue: "#000",
+    condition: "buttonStyle.eq.custom",
+  },
 ];
 
 export let schema: HydrogenComponentSchema = {
diff --git a/app/components/Overlay.tsx b/app/components/Overlay.tsx
index 0293f92c..8b791f64 100644
--- a/app/components/Overlay.tsx
+++ b/app/components/Overlay.tsx
@@ -23,10 +23,6 @@ export function Overlay({ enable, color, opacity }: OverlayProps) {
 }
 
 export let overlayInputs: InspectorGroup["inputs"] = [
-  {
-    type: "heading",
-    label: "Overlay",
-  },
   {
     type: "switch",
     name: "enableOverlay",
diff --git a/app/components/Description.tsx b/app/components/Paragraph.tsx
similarity index 72%
rename from app/components/Description.tsx
rename to app/components/Paragraph.tsx
index 67b2cd97..0e3f7366 100644
--- a/app/components/Description.tsx
+++ b/app/components/Paragraph.tsx
@@ -2,36 +2,38 @@ import {
   type HydrogenComponentProps,
   type HydrogenComponentSchema,
 } from "@weaverse/hydrogen";
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
 
-import type { Alignment } from "~/lib/type";
-
-type DescriptionProps = HydrogenComponentProps & {
-  content: string;
+export interface ParagraphProps extends VariantProps<typeof variants> {
   as?: "p" | "div";
+  content: string;
   color?: string;
-  width?: Width;
-  alignment?: Alignment;
   className?: string;
-};
-
-type Width = "full" | "narrow";
-
-let widthClasses: Record<Width, string> = {
-  full: "w-full mx-auto",
-  narrow: "w-full md:w-1/2 lg:w-3/4 max-w-4xl mx-auto",
-};
+}
 
-let alignmentClasses: Record<Alignment, string> = {
-  left: "text-left",
-  center: "text-center",
-  right: "text-right",
-};
+let variants = cva("paragraph", {
+  variants: {
+    width: {
+      full: "w-full mx-auto",
+      narrow: "w-full md:w-1/2 lg:w-3/4 max-w-4xl mx-auto",
+    },
+    alignment: {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right",
+    },
+  },
+  defaultVariants: {
+    width: "full",
+  },
+});
 
-let Description = forwardRef<
+let Paragraph = forwardRef<
   HTMLParagraphElement | HTMLDivElement,
-  DescriptionProps
+  ParagraphProps & HydrogenComponentProps
 >((props, ref) => {
   let {
     as: Tag = "p",
@@ -47,33 +49,21 @@ let Description = forwardRef<
       ref={ref}
       {...rest}
       style={{ color }}
-      className={clsx(
-        widthClasses[width!],
-        alignmentClasses[alignment!],
-        className,
-      )}
+      className={clsx(variants({ width, alignment, className }))}
       suppressHydrationWarning
       dangerouslySetInnerHTML={{ __html: content }}
     />
   );
 });
 
-Description.defaultProps = {
-  as: "p",
-  width: "narrow",
-  content:
-    "Pair large text with an image or full-width video to showcase your brand's lifestyle to describe and showcase an important detail of your products that you can tag on your image.",
-  alignment: "center",
-};
-
-export default Description;
+export default Paragraph;
 
 export let schema: HydrogenComponentSchema = {
-  type: "description",
-  title: "Description",
+  type: "paragraph",
+  title: "Paragraph",
   inspector: [
     {
-      group: "Description",
+      group: "Paragraph",
       inputs: [
         {
           type: "select",
diff --git a/app/components/Section.tsx b/app/components/Section.tsx
index 7e07ec16..bb3c1b04 100644
--- a/app/components/Section.tsx
+++ b/app/components/Section.tsx
@@ -12,7 +12,6 @@ import { Overlay, overlayInputs } from "./Overlay";
 export type SectionWidth = "full" | "stretch" | "fixed";
 export type VerticalPadding = "none" | "small" | "medium" | "large";
 export type DividerType = "none" | "top" | "bottom" | "both";
-export type SectionAlignment = "unset" | "left" | "center" | "right";
 
 export type SectionProps = HydrogenComponentProps &
   HTMLAttributes<HTMLElement> &
@@ -21,7 +20,6 @@ export type SectionProps = HydrogenComponentProps &
     as: React.ElementType;
     width: SectionWidth;
     gap: number;
-    contentAlignment: SectionAlignment;
     className: string;
     verticalPadding: VerticalPadding;
     divider: DividerType;
@@ -32,6 +30,7 @@ export type SectionProps = HydrogenComponentProps &
     backgroundColor: string;
     backgroundFor: "section" | "content";
     children: React.ReactNode;
+    containerClassName: string;
   }>;
 
 export let gapClasses: Record<number, string> = {
@@ -72,19 +71,11 @@ export let widthClasses: Record<SectionWidth, string> = {
   fixed: "w-full h-full max-w-[var(--page-width,1280px)] mx-auto",
 };
 
-export let alignmentClasses: Record<SectionAlignment, string> = {
-  unset: "",
-  left: "text-left",
-  center: "text-center",
-  right: "text-right",
-};
-
 export let Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {
   let {
     as: Component = "section",
     width,
     gap,
-    contentAlignment,
     divider,
     verticalPadding,
     borderRadius,
@@ -98,10 +89,13 @@ export let Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {
     overlayOpacity,
     className,
     children,
+    containerClassName,
     style = {},
     ...rest
   } = props;
 
+  let isBackgroundForContent = backgroundFor === "content";
+
   return (
     <>
       {(divider === "top" || divider === "both") && <Divider />}
@@ -115,11 +109,11 @@ export let Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {
         )}
         style={{
           ...style,
-          backgroundColor: backgroundFor === "section" ? backgroundColor : "",
-          borderRadius: backgroundFor === "section" ? borderRadius : "",
+          backgroundColor: !isBackgroundForContent ? backgroundColor : "",
+          borderRadius: !isBackgroundForContent ? borderRadius : "",
         }}
       >
-        {backgroundFor === "section" && (
+        {!isBackgroundForContent && (
           <>
             <BackgroundImage
               backgroundImage={backgroundImage}
@@ -139,14 +133,14 @@ export let Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {
             widthClasses[width!],
             gapClasses[gap!],
             verticalPaddingClasses[verticalPadding!],
-            alignmentClasses[contentAlignment!],
+            containerClassName,
           )}
           style={{
-            backgroundColor: backgroundFor === "content" ? backgroundColor : "",
-            borderRadius: backgroundFor === "content" ? borderRadius : "",
+            backgroundColor: isBackgroundForContent ? backgroundColor : "",
+            borderRadius: isBackgroundForContent ? borderRadius : "",
           }}
         >
-          {backgroundFor === "content" && (
+          {isBackgroundForContent && (
             <>
               <BackgroundImage
                 backgroundImage={backgroundImage}
@@ -173,10 +167,6 @@ function Divider() {
 }
 
 export let layoutInputs: InspectorGroup["inputs"] = [
-  {
-    type: "heading",
-    label: "Layout",
-  },
   {
     type: "select",
     name: "width",
@@ -190,20 +180,6 @@ export let layoutInputs: InspectorGroup["inputs"] = [
     },
     defaultValue: "fixed",
   },
-  {
-    type: "select",
-    name: "contentAlignment",
-    label: "Items alignment",
-    configs: {
-      options: [
-        { value: "unset", label: "Unset" },
-        { value: "left", label: "Left" },
-        { value: "center", label: "Center" },
-        { value: "right", label: "Right" },
-      ],
-    },
-    defaultValue: "center",
-  },
   {
     type: "range",
     name: "gap",
@@ -258,7 +234,8 @@ export let layoutInputs: InspectorGroup["inputs"] = [
   },
 ];
 
-export let sectionInspector: InspectorGroup = {
-  group: "General",
-  inputs: [...layoutInputs, ...backgroundInputs, ...overlayInputs],
-};
+export let sectionInspector: InspectorGroup[] = [
+  { group: "Layout", inputs: [...layoutInputs] },
+  { group: "Background", inputs: [...backgroundInputs] },
+  { group: "Overlay", inputs: [...overlayInputs] },
+];
diff --git a/app/components/index.ts b/app/components/index.ts
index 14c45d01..860081b5 100644
--- a/app/components/index.ts
+++ b/app/components/index.ts
@@ -2,12 +2,12 @@ import type { HydrogenComponent } from "@weaverse/hydrogen";
 
 import * as Heading from "./Heading";
 import * as SubHeading from "./SubHeading";
-import * as Description from "./Description";
+import * as Paragraph from "./Paragraph";
 import * as Button from "./Button";
 
 export let sharedComponents: HydrogenComponent[] = [
   SubHeading,
   Heading,
-  Description,
+  Paragraph,
   Button,
 ];
diff --git a/app/lib/seo.server.ts b/app/lib/seo.server.ts
index 65e5e82f..58333845 100644
--- a/app/lib/seo.server.ts
+++ b/app/lib/seo.server.ts
@@ -75,7 +75,7 @@ type SelectedVariantRequiredFields = Pick<ProductVariant, "sku"> & {
 
 type ProductRequiredFields = Pick<
   Product,
-  "title" | "description" | "vendor" | "seo"
+  "title" | "paragraph" | "vendor" | "seo"
 > & {
   variants: {
     nodes: Array<
diff --git a/app/sections/SlideShow/SlideItems.tsx b/app/sections/SlideShow/SlideItems.tsx
index 1150b95d..36ae1cdf 100644
--- a/app/sections/SlideShow/SlideItems.tsx
+++ b/app/sections/SlideShow/SlideItems.tsx
@@ -121,7 +121,7 @@ export let schema: HydrogenComponentSchema = {
       ],
     },
   ],
-  childTypes: ["subheading", "heading", "description", "button"],
+  childTypes: ["subheading", "heading", "paragraph", "button"],
   presets: {
     children: [
       {
@@ -133,7 +133,7 @@ export let schema: HydrogenComponentSchema = {
         content: "Slide Heading",
       },
       {
-        type: "description",
+        type: "paragraph",
         content:
           "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown.",
       },
diff --git a/app/sections/columns-with-images/index.tsx b/app/sections/columns-with-images/index.tsx
index b30a6fd5..8cef2dce 100644
--- a/app/sections/columns-with-images/index.tsx
+++ b/app/sections/columns-with-images/index.tsx
@@ -22,12 +22,12 @@ export let schema: HydrogenComponentSchema = {
   type: "columns-with-images",
   title: "Columns with images",
   toolbar: ["general-settings", ["duplicate", "delete"]],
-  inspector: [sectionInspector],
+  inspector: sectionInspector,
   childTypes: [
     "columns-with-images--items",
     "subheading",
     "heading",
-    "description",
+    "paragraph",
   ],
   presets: {
     gap: 48,
diff --git a/app/sections/countdown/index.tsx b/app/sections/countdown/index.tsx
index ef9c98a5..90e95cab 100644
--- a/app/sections/countdown/index.tsx
+++ b/app/sections/countdown/index.tsx
@@ -8,7 +8,7 @@ type CountdownProps = SectionProps;
 let Countdown = forwardRef<HTMLElement, CountdownProps>((props, ref) => {
   let { children, ...rest } = props;
   return (
-    <Section ref={ref} {...rest}>
+    <Section ref={ref} {...rest} containerClassName="text-center">
       {children}
     </Section>
   );
@@ -20,7 +20,7 @@ export let schema: HydrogenComponentSchema = {
   type: "countdown",
   title: "Countdown",
   toolbar: ["general-settings", ["duplicate", "delete"]],
-  inspector: [sectionInspector],
+  inspector: sectionInspector,
   childTypes: ["heading", "subheading", "countdown--timer", "button"],
   presets: {
     children: [
diff --git a/app/sections/countdown/timer.tsx b/app/sections/countdown/timer.tsx
index 431bcba3..8c166270 100644
--- a/app/sections/countdown/timer.tsx
+++ b/app/sections/countdown/timer.tsx
@@ -63,35 +63,35 @@ let CountdownTimer = forwardRef<
     <div
       ref={ref}
       {...rest}
-      className="flex justify-center text-[var(--timer-color)]"
+      className="flex justify-center text-[var(--timer-color)] py-3 sm:py-0"
       style={timerStyle}
     >
       <div className="space-y-1">
-        <div className="text-4xl sm:text-5xl font-medium flex items-center">
+        <div className="text-4xl leading-tight md:text-5xl font-medium flex items-center">
           <div className="px-6">{remainingTime?.days || 0}</div>
           <div className="h-6 border-r border-[var(--timer-color)]" />
         </div>
-        <div className="text-sm sm:text-base capitalize">Days</div>
+        <div className="text-sm md:text-base capitalize">Days</div>
       </div>
       <div className="space-y-1">
-        <div className="text-4xl sm:text-5xl font-medium flex items-center">
+        <div className="text-4xl leading-tight md:text-5xl font-medium flex items-center">
           <div className="px-6">{remainingTime?.hours || 0}</div>
           <div className="h-6 border-r border-[var(--timer-color)]" />
         </div>
-        <div className="text-sm sm:text-base capitalize">hours</div>
+        <div className="text-sm md:text-base capitalize">hours</div>
       </div>
       <div className="space-y-1">
-        <div className="text-4xl sm:text-5xl font-medium flex items-center">
+        <div className="text-4xl leading-tight md:text-5xl font-medium flex items-center">
           <div className="px-6">{remainingTime?.minutes || 0}</div>
           <div className="h-6 border-r border-[var(--timer-color)]" />
         </div>
-        <div className="text-sm sm:text-base capitalize">minutes</div>
+        <div className="text-sm md:text-base capitalize">minutes</div>
       </div>
       <div className="space-y-1">
-        <div className="text-4xl sm:text-5xl font-medium flex items-center">
+        <div className="text-4xl leading-tight md:text-5xl font-medium flex items-center">
           <div className="px-6">{remainingTime?.seconds || 0}</div>
         </div>
-        <div className="text-sm sm:text-base capitalize">seconds</div>
+        <div className="text-sm md:text-base capitalize">seconds</div>
       </div>
     </div>
   );
diff --git a/app/sections/hero-image/index.tsx b/app/sections/hero-image/index.tsx
index efd03d4f..e261f348 100644
--- a/app/sections/hero-image/index.tsx
+++ b/app/sections/hero-image/index.tsx
@@ -1,80 +1,67 @@
-import type {
-  HydrogenComponentProps,
-  HydrogenComponentSchema,
-  WeaverseImage,
+import {
+  IMAGES_PLACEHOLDERS,
+  type HydrogenComponentSchema,
 } from "@weaverse/hydrogen";
-import type { CSSProperties } from "react";
-import { forwardRef } from "react";
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
 import clsx from "clsx";
-import { Image } from "@shopify/hydrogen";
+import { forwardRef } from "react";
+import { backgroundInputs } from "~/components/BackgroundImage";
+import { overlayInputs } from "~/components/Overlay";
+import type { SectionProps } from "~/components/Section";
+import { Section, layoutInputs } from "~/components/Section";
 
-import { IconImageBlank } from "~/modules";
+export interface HeroImageProps extends VariantProps<typeof variants> {}
 
-type HeroImageProps = HydrogenComponentProps & {
-  backgroundImage: WeaverseImage;
-  contentAlignment: string;
-  enableOverlay: boolean;
-  overlayColor: string;
-  overlayOpacity: number;
-  sectionHeightDesktop: number;
-  sectionHeightMobile: number;
-};
-
-let HeroImage = forwardRef<HTMLElement, HeroImageProps>((props, ref) => {
-  let {
-    backgroundImage,
-    contentAlignment,
-    enableOverlay,
-    overlayColor,
-    overlayOpacity,
-    sectionHeightDesktop,
-    sectionHeightMobile,
-    children,
-    ...rest
-  } = props;
-  let sectionStyle: CSSProperties = {
-    justifyContent: `${contentAlignment}`,
-    "--section-height-desktop": `${sectionHeightDesktop}px`,
-    "--section-height-mobile": `${sectionHeightMobile}px`,
-    "--overlay-opacity": `${overlayOpacity}%`,
-    "--overlay-color": `${overlayColor}`,
-    "--max-width-content": "600px",
-  } as CSSProperties;
+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]",
+      full: "h-screen-no-nav",
+    },
+    contentPosition: {
+      "top left": "justify-start items-start [&_.paragraph]:[text-align:left]",
+      "top center":
+        "justify-start items-center [&_.paragraph]:[text-align:center]",
+      "top right": "justify-start items-end [&_.paragraph]:[text-align:right]",
+      "center left":
+        "justify-center items-start [&_.paragraph]:[text-align:left]",
+      "center center":
+        "justify-center items-center [&_.paragraph]:[text-align:center]",
+      "center right":
+        "justify-center items-end [&_.paragraph]:[text-align:right]",
+      "bottom left": "justify-end items-start [&_.paragraph]:[text-align:left]",
+      "bottom center":
+        "justify-end items-center [&_.paragraph]:[text-align:center]",
+      "bottom right": "justify-end items-end [&_.paragraph]:[text-align:right]",
+    },
+  },
+  defaultVariants: {
+    height: "large",
+    contentPosition: "center center",
+  },
+});
 
-  return (
-    <section
-      ref={ref}
-      {...rest}
-      className={clsx(
-        "flex relative gap-3 items-center h-[var(--section-height-mobile)] sm:h-[var(--section-height-desktop)]",
-      )}
-      style={sectionStyle}
-    >
-      <div className="absolute inset-0">
-        {backgroundImage ? (
-          <Image
-            data={backgroundImage}
-            className="w-full h-full object-cover"
-            sizes="auto"
-          />
-        ) : (
-          <div className="w-full h-full flex justify-center items-center bg-gray-200">
-            <IconImageBlank
-              className="!w-24 !h-24 opacity-30"
-              viewBox="0 0 100 100"
-            />
-          </div>
+let HeroImage = forwardRef<HTMLElement, HeroImageProps & SectionProps>(
+  (props, ref) => {
+    let { children, height, contentPosition, ...rest } = props;
+    return (
+      <Section
+        ref={ref}
+        {...rest}
+        containerClassName={clsx(
+          "flex flex-col",
+          "[&_.paragraph]:mx-[unset]",
+          variants({ contentPosition, height }),
         )}
-        {enableOverlay && (
-          <div className="absolute inset-0 bg-[var(--overlay-color)] opacity-[var(--overlay-opacity)]"></div>
-        )}
-      </div>
-      <div className="z-10 w-[var(--max-width-content)] sm-max:w-5/6 h-fit flex flex-col text-center gap-5">
+      >
         {children}
-      </div>
-    </section>
-  );
-});
+      </Section>
+    );
+  },
+);
 
 export default HeroImage;
 
@@ -84,97 +71,70 @@ export let schema: HydrogenComponentSchema = {
   toolbar: ["general-settings", ["duplicate", "delete"]],
   inspector: [
     {
-      group: "Image",
+      group: "Layout",
       inputs: [
         {
-          type: "image",
-          name: "backgroundImage",
-          label: "Background image",
-        },
-        {
-          type: "toggle-group",
-          label: "Content alignment",
-          name: "contentAlignment",
+          type: "select",
+          name: "height",
+          label: "Section height",
           configs: {
             options: [
-              { label: "Left", value: "flex-start" },
-              { label: "Center", value: "center" },
-              { label: "Right", value: "flex-end" },
+              { value: "small", label: "Small" },
+              { value: "medium", label: "Medium" },
+              { value: "large", label: "Large" },
+              { value: "full", label: "Fullscreen" },
             ],
           },
-          defaultValue: "center",
-        },
-        {
-          type: "switch",
-          name: "enableOverlay",
-          label: "Enable overlay",
-          defaultValue: true,
-        },
-        {
-          type: "color",
-          name: "overlayColor",
-          label: "Overlay color",
-          defaultValue: "#333333",
-          condition: `enableOverlay.eq.true`,
-        },
-        {
-          type: "range",
-          name: "overlayOpacity",
-          label: "Overlay opacity",
-          defaultValue: 50,
-          configs: {
-            min: 10,
-            max: 100,
-            step: 10,
-            unit: "%",
-          },
-          condition: `enableOverlay.eq.true`,
         },
         {
-          type: "range",
-          name: "sectionHeightDesktop",
-          label: "Section height desktop",
-          defaultValue: 450,
-          configs: {
-            min: 400,
-            max: 700,
-            step: 10,
-            unit: "px",
-          },
-        },
-        {
-          type: "range",
-          name: "sectionHeightMobile",
-          label: "Section height mobile",
-          defaultValue: 350,
-          configs: {
-            min: 300,
-            max: 600,
-            step: 10,
-            unit: "px",
-          },
+          type: "position",
+          name: "contentPosition",
+          label: "Content position",
+          defaultValue: "center center",
         },
+        ...layoutInputs.filter(
+          (inp) => inp.name !== "divider" && inp.name !== "borderRadius",
+        ),
+      ],
+    },
+    {
+      group: "Background",
+      inputs: [
+        ...backgroundInputs.filter(
+          (inp) =>
+            inp.name !== "backgroundFor" && inp.name !== "backgroundColor",
+        ),
       ],
     },
+    { group: "Overlay", inputs: [...overlayInputs] },
   ],
-  childTypes: ["subheading", "heading", "description", "button"],
+  childTypes: ["subheading", "heading", "paragraph", "button"],
   presets: {
+    height: "large",
+    contentPosition: "bottom left",
+    backgroundImage: IMAGES_PLACEHOLDERS.backgroundImage,
+    backgroundFit: "cover",
+    enableOverlay: true,
+    overlayOpacity: 35,
     children: [
       {
         type: "subheading",
         content: "Subheading",
+        color: "#ffffff",
       },
       {
         type: "heading",
-        content: "Heading for Image",
-      },
-      {
-        type: "description",
-        content: "Pair large text with an image to tell a story.",
+        content: "Hero image with text overlay",
+        color: "#ffffff",
+        size: "scale",
+        minSize: 16,
+        maxSize: 56,
       },
       {
-        type: "button",
-        content: "Button section",
+        type: "paragraph",
+        content:
+          "Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.",
+        color: "#ffffff",
       },
     ],
   },
diff --git a/app/sections/video-hero/index.tsx b/app/sections/hero-video/index.tsx
similarity index 94%
rename from app/sections/video-hero/index.tsx
rename to app/sections/hero-video/index.tsx
index bb7e4663..126013c9 100644
--- a/app/sections/video-hero/index.tsx
+++ b/app/sections/hero-video/index.tsx
@@ -2,11 +2,10 @@ import type { HydrogenComponentSchema } from "@weaverse/hydrogen";
 import clsx from "clsx";
 import type { CSSProperties } from "react";
 import { forwardRef, lazy, Suspense } from "react";
-
 import { overlayInputs } from "~/components/Overlay";
 import { gapClasses } from "~/components/Section";
 
-type VideoHeroProps = {
+type HeroVideoProps = {
   videoURL: string;
   gap: number;
   enableOverlay: boolean;
@@ -16,6 +15,7 @@ type VideoHeroProps = {
   sectionHeightMobile: number;
   children: React.ReactNode;
 };
+
 let RP = lazy(() => import("react-player/lazy"));
 let ReactPlayer = (props: any) => (
   <Suspense fallback={null}>
@@ -24,7 +24,7 @@ let ReactPlayer = (props: any) => (
 );
 let FALLBACK_VIDEO = "https://www.youtube.com/watch?v=Su-x4Mo5xmU";
 
-let VideoHero = forwardRef<HTMLElement, VideoHeroProps>((props, ref) => {
+let HeroVideo = forwardRef<HTMLElement, HeroVideoProps>((props, ref) => {
   let {
     videoURL,
     gap,
@@ -88,11 +88,11 @@ let VideoHero = forwardRef<HTMLElement, VideoHeroProps>((props, ref) => {
   );
 });
 
-export default VideoHero;
+export default HeroVideo;
 
 export let schema: HydrogenComponentSchema = {
-  type: "video-hero",
-  title: "Video hero",
+  type: "hero-video",
+  title: "Hero video",
   toolbar: ["general-settings", ["duplicate", "delete"]],
   inspector: [
     {
@@ -150,7 +150,7 @@ export let schema: HydrogenComponentSchema = {
       ],
     },
   ],
-  childTypes: ["subheading", "heading", "description", "button"],
+  childTypes: ["subheading", "heading", "paragraph", "button"],
   presets: {
     enableOverlay: true,
     children: [
@@ -163,7 +163,7 @@ export let schema: HydrogenComponentSchema = {
         content: "Bring your brand to life.",
       },
       {
-        type: "description",
+        type: "paragraph",
         content:
           "Pair large video with a compelling message to captivate your audience.",
       },
diff --git a/app/sections/hero.tsx b/app/sections/hero.tsx
deleted file mode 100644
index 042111af..00000000
--- a/app/sections/hero.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import type {
-  ComponentLoaderArgs,
-  HydrogenComponentProps,
-  HydrogenComponentSchema,
-} from "@weaverse/hydrogen";
-import { forwardRef } from "react";
-
-import type { SeoCollectionContentQuery } from "storefrontapi.generated";
-import { Hero } from "~/modules/Hero";
-import { HOMEPAGE_SEO_QUERY } from "~/data/queries";
-
-type HeroSectionData = {
-  collectionHandle: string;
-  height: "full";
-  top: boolean;
-  loading: HTMLImageElement["loading"];
-};
-
-let HeroSection = forwardRef<
-  HTMLElement,
-  HydrogenComponentProps<Awaited<ReturnType<typeof loader>>> & HeroSectionData
->((props, ref) => {
-  let { loaderData, height, loading, top, collectionHandle, ...rest } = props;
-  if (loaderData) {
-    return (
-      <section ref={ref} {...rest}>
-        <Hero height={height} loading={loading} top={top} {...loaderData} />
-      </section>
-    );
-  }
-  return <section ref={ref} {...rest} />;
-});
-
-export default HeroSection;
-
-export let loader = async (args: ComponentLoaderArgs<HeroSectionData>) => {
-  let { weaverse, data } = args;
-  let { hero } = await weaverse.storefront.query<SeoCollectionContentQuery>(
-    HOMEPAGE_SEO_QUERY,
-    {
-      variables: { handle: data.collectionHandle || "frontpage" },
-    },
-  );
-  return hero;
-};
-
-export let schema: HydrogenComponentSchema = {
-  type: "hero",
-  title: "Hero",
-  inspector: [
-    {
-      group: "Hero",
-      inputs: [
-        {
-          type: "collection",
-          name: "collectionHandle",
-          label: "Preview",
-          defaultValue: "frontpage",
-        },
-        {
-          type: "toggle-group",
-          name: "loading",
-          label: "Background image loading",
-          defaultValue: "eager",
-          configs: {
-            options: [
-              { label: "Eager", value: "eager", icon: "zap" },
-              {
-                label: "Lazy",
-                value: "lazy",
-                icon: "loader",
-                weight: "light",
-              },
-            ],
-          },
-          helpText:
-            'Learn more about <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading" target="_blank" rel="noopener noreferrer">image loading strategies</a>.',
-        },
-        {
-          type: "select",
-          name: "height",
-          label: "Height",
-          configs: {
-            options: [
-              { label: "Auto", value: "auto" },
-              { label: "Fullscreen", value: "full" },
-            ],
-          },
-          defaultValue: "auto",
-        },
-        {
-          type: "switch",
-          name: "top",
-          label: "Top",
-          defaultValue: true,
-          helpText:
-            "Push the hero to the top of the page by adding a negative margin.",
-        },
-      ],
-    },
-  ],
-  toolbar: ["general-settings", ["duplicate", "delete"]],
-};
diff --git a/app/sections/image-gallery/index.tsx b/app/sections/image-gallery/index.tsx
index 53b9693f..1b17615b 100644
--- a/app/sections/image-gallery/index.tsx
+++ b/app/sections/image-gallery/index.tsx
@@ -20,8 +20,8 @@ export default ImageGallery;
 export let schema: HydrogenComponentSchema = {
   type: "image-gallery",
   title: "Image gallery",
-  childTypes: ["subheading", "heading", "description", "image-gallery--items"],
-  inspector: [sectionInspector],
+  childTypes: ["subheading", "heading", "paragraph", "image-gallery--items"],
+  inspector: sectionInspector,
   toolbar: ["general-settings", ["duplicate", "delete"]],
   presets: {
     children: [
@@ -30,7 +30,7 @@ export let schema: HydrogenComponentSchema = {
         content: "Image Gallery",
       },
       {
-        type: "description",
+        type: "paragraph",
         content:
           "Showcase your chosen images. This visual focus will enhance user engagement and understanding of your offerings.",
       },
diff --git a/app/sections/image-gallery/items.tsx b/app/sections/image-gallery/items.tsx
index 2c94f891..4a7903ac 100644
--- a/app/sections/image-gallery/items.tsx
+++ b/app/sections/image-gallery/items.tsx
@@ -16,7 +16,7 @@ let ImageGalleyItems = forwardRef<HTMLDivElement, ImageGalleyItemsProps>(
       <div
         ref={ref}
         {...rest}
-        className="flex flex-col sm:grid sm:grid-cols-4"
+        className="flex flex-col sm:grid sm:grid-cols-4 px-4"
         style={{ gap: `${gap}px` }}
       >
         {children}
diff --git a/app/sections/image-with-text/content.tsx b/app/sections/image-with-text/content.tsx
index 0f9ef1ad..97a35f3e 100644
--- a/app/sections/image-with-text/content.tsx
+++ b/app/sections/image-with-text/content.tsx
@@ -55,7 +55,7 @@ export let schema: HydrogenComponentSchema = {
       ],
     },
   ],
-  childTypes: ["subheading", "heading", "description", "button"],
+  childTypes: ["subheading", "heading", "paragraph", "button"],
   presets: {
     children: [
       {
@@ -67,7 +67,7 @@ export let schema: HydrogenComponentSchema = {
         content: "Heading for image",
       },
       {
-        type: "description",
+        type: "paragraph",
         content: "Pair large text with an image to tell a story.",
       },
       {
diff --git a/app/sections/promotion-grid/item.tsx b/app/sections/promotion-grid/item.tsx
index eba88b0e..9722c818 100644
--- a/app/sections/promotion-grid/item.tsx
+++ b/app/sections/promotion-grid/item.tsx
@@ -61,12 +61,7 @@ export let schema: HydrogenComponentSchema = {
       ],
     },
   ],
-  childTypes: [
-    "subheading",
-    "heading",
-    "description",
-    "promotion-item--buttons",
-  ],
+  childTypes: ["subheading", "heading", "paragraph", "promotion-item--buttons"],
   presets: {
     children: [
       {
@@ -78,7 +73,7 @@ export let schema: HydrogenComponentSchema = {
         content: "Heading for Image",
       },
       {
-        type: "description",
+        type: "paragraph",
         content:
           "Include the smaller details of your promotion in text below the title.",
       },
diff --git a/app/sections/testimonials/index.tsx b/app/sections/testimonials/index.tsx
index 0627774f..5d3a0318 100644
--- a/app/sections/testimonials/index.tsx
+++ b/app/sections/testimonials/index.tsx
@@ -24,8 +24,8 @@ export default Testimonials;
 export let schema: HydrogenComponentSchema = {
   type: "testimonials",
   title: "Testimonials",
-  childTypes: ["subheading", "heading", "description", "testimonials-items"],
-  inspector: [sectionInspector],
+  childTypes: ["subheading", "heading", "paragraph", "testimonials-items"],
+  inspector: sectionInspector,
   toolbar: ["general-settings", ["duplicate", "delete"]],
   presets: {
     children: [
@@ -34,7 +34,7 @@ export let schema: HydrogenComponentSchema = {
         content: "See what our customers are saying",
       },
       {
-        type: "description",
+        type: "paragraph",
         content:
           "We are a team of passionate people whose goal is to improve everyone's life through disruptive products. We build great products to solve your business problems.",
       },
diff --git a/app/sections/user-profiles/index.tsx b/app/sections/user-profiles/index.tsx
index 2cd918a0..513e84e0 100644
--- a/app/sections/user-profiles/index.tsx
+++ b/app/sections/user-profiles/index.tsx
@@ -17,7 +17,7 @@ const UserCard = ({ user }: { user: any }) => {
   let name = fields.find((field: any) => field.key === "name")?.value;
   let role = fields.find((field: any) => field.key === "role")?.value;
   let description = fields.find(
-    (field: any) => field.key === "description",
+    (field: any) => field.key === "paragraph",
   )?.value;
   return (
     <div
diff --git a/app/sections/video-embed/index.tsx b/app/sections/video-embed/index.tsx
index 50480f10..93d592ad 100644
--- a/app/sections/video-embed/index.tsx
+++ b/app/sections/video-embed/index.tsx
@@ -24,8 +24,8 @@ export let schema: HydrogenComponentSchema = {
   type: "video",
   title: "Video embed",
   toolbar: ["general-settings", ["duplicate", "delete"]],
-  inspector: [sectionInspector],
-  childTypes: ["heading", "description", "video-embed--item"],
+  inspector: sectionInspector,
+  childTypes: ["heading", "paragraph", "video-embed--item"],
   presets: {
     children: [
       {
@@ -33,7 +33,7 @@ export let schema: HydrogenComponentSchema = {
         content: "Video embed",
       },
       {
-        type: "description",
+        type: "paragraph",
         content:
           "A picture is worth a thousand words, and a video is worth even more. Utilize this space to engage, inform, and convince your customers.",
       },
diff --git a/app/weaverse/components.ts b/app/weaverse/components.ts
index 6a486b44..d5ac11df 100644
--- a/app/weaverse/components.ts
+++ b/app/weaverse/components.ts
@@ -1,5 +1,9 @@
 import type { HydrogenComponent } from "@weaverse/hydrogen";
 
+import { sharedComponents } from "~/components";
+import * as Judgeme from "~/modules/product-form/judgeme-review";
+import * as SlideShowItem from "~/sections/SlideShow/SlideItems";
+import * as SlideShow from "~/sections/SlideShow/SlideShow";
 import * as AllProducts from "~/sections/all-products";
 import * as BlogPost from "~/sections/blog-post";
 import * as Blogs from "~/sections/blogs";
@@ -7,45 +11,41 @@ import * as CollectionBanner from "~/sections/collection-banner";
 import * as CollectionFilters from "~/sections/collection-filters";
 import * as CollectionList from "~/sections/collection-list";
 import * as ColumnsWithImages from "~/sections/columns-with-images";
-import * as ColumnsWithImagesItems from "~/sections/columns-with-images/items";
 import * as ColumnWithImageItem from "~/sections/columns-with-images/column";
+import * as ColumnsWithImagesItems from "~/sections/columns-with-images/items";
+import * as ContactForm from "~/sections/contact-form";
 import * as Countdown from "~/sections/countdown";
 import * as CountDownTimer from "~/sections/countdown/timer";
 import * as FeaturedCollections from "~/sections/featured-collections";
 import * as FeaturedProducts from "~/sections/featured-products";
 import * as HeroImage from "~/sections/hero-image";
+import * as HeroVideo from "~/sections/hero-video";
 import * as ImageGallery from "~/sections/image-gallery";
 import * as ImageGalleryItem from "~/sections/image-gallery/image";
 import * as ImageGalleryItems from "~/sections/image-gallery/items";
+import * as ImageHotspot from "~/sections/image-hotspots/image-hotspot";
+import * as ImageHotspotItem from "~/sections/image-hotspots/items";
 import * as ImageWithText from "~/sections/image-with-text";
 import * as ImageWithTextContent from "~/sections/image-with-text/content";
 import * as ImageWithTextImage from "~/sections/image-with-text/image";
 import * as Map from "~/sections/map";
+import * as MetaDemo from "~/sections/meta-demo";
+import * as NewsLetter from "~/sections/newsletter";
 import * as Page from "~/sections/page";
 import * as ProductInformation from "~/sections/product-information";
+import * as ProductList from "~/sections/product-list";
 import * as PromotionGrid from "~/sections/promotion-grid";
 import * as PromotionGridButtons from "~/sections/promotion-grid/buttons";
 import * as PromotionGridItem from "~/sections/promotion-grid/item";
 import * as RelatedArticles from "~/sections/related-articles";
 import * as RelatedProducts from "~/sections/related-products";
-import { sharedComponents } from "~/components";
 import * as SingleProduct from "~/sections/single-product";
-import * as Judgeme from "~/modules/product-form/judgeme-review";
 import * as Testimonial from "~/sections/testimonials";
 import * as TestimonialItem from "~/sections/testimonials/item";
 import * as TestimonialItems from "~/sections/testimonials/items";
-import * as VideoHero from "~/sections/video-hero";
+import * as UserProfiles from "~/sections/user-profiles";
 import * as VideoEmbed from "~/sections/video-embed";
 import * as VideoEmbedItem from "~/sections/video-embed/video";
-import * as MetaDemo from "~/sections/meta-demo";
-import * as SlideShow from "~/sections/SlideShow/SlideShow";
-import * as SlideShowItem from "~/sections/SlideShow/SlideItems";
-import * as NewsLetter from "~/sections/newsletter";
-import * as ImageHotspot from "~/sections/image-hotspots/image-hotspot";
-import * as ImageHotspotItem from "~/sections/image-hotspots/items";
-import * as ProductList from "~/sections/product-list";
-import * as ContactForm from "~/sections/contact-form";
-import * as UserProfiles from "~/sections/user-profiles";
 
 export let components: HydrogenComponent[] = [
   ...sharedComponents,
@@ -63,7 +63,7 @@ export let components: HydrogenComponent[] = [
   ColumnsWithImages,
   ColumnsWithImagesItems,
   ColumnWithImageItem,
-  VideoHero,
+  HeroVideo,
   Map,
   PromotionGrid,
   PromotionGridItem,
diff --git a/app/weaverse/schema.server.ts b/app/weaverse/schema.server.ts
index ad25e7cd..611ea7b7 100644
--- a/app/weaverse/schema.server.ts
+++ b/app/weaverse/schema.server.ts
@@ -100,48 +100,48 @@ export let themeSchema: HydrogenThemeSchema = {
           name: "colorBackground",
           defaultValue: "#ffffff",
         },
-        {
-          type: "color",
-          label: "Inverse background",
-          name: "colorInverseBackground",
-          defaultValue: "#0f0f0f",
-        },
+        // {
+        //   type: "color",
+        //   label: "Inverse background",
+        //   name: "colorInverseBackground",
+        //   defaultValue: "#0f0f0f",
+        // },
         {
           type: "color",
           label: "Text",
           name: "colorText",
           defaultValue: "#0F0F0F",
         },
-        {
-          type: "color",
-          label: "Inverse text",
-          name: "colorInverseText",
-          defaultValue: "#ffffff",
-        },
-        {
-          type: "color",
-          label: "Button",
-          name: "colorButton",
-          defaultValue: "#0F0F0F",
-        },
-        {
-          type: "color",
-          label: "Button text",
-          name: "colorButtonText",
-          defaultValue: "#FFF",
-        },
-        {
-          type: "color",
-          label: "Inverse button",
-          name: "colorInverseButton",
-          defaultValue: "#FFF",
-        },
-        {
-          type: "color",
-          label: "Inverse button text",
-          name: "colorInverseButtonText",
-          defaultValue: "#0F0F0F",
-        },
+        // {
+        //   type: "color",
+        //   label: "Inverse text",
+        //   name: "colorInverseText",
+        //   defaultValue: "#ffffff",
+        // },
+        // {
+        //   type: "color",
+        //   label: "Button",
+        //   name: "colorButton",
+        //   defaultValue: "#0F0F0F",
+        // },
+        // {
+        //   type: "color",
+        //   label: "Button text",
+        //   name: "colorButtonText",
+        //   defaultValue: "#FFF",
+        // },
+        // {
+        //   type: "color",
+        //   label: "Inverse button",
+        //   name: "colorInverseButton",
+        //   defaultValue: "#FFF",
+        // },
+        // {
+        //   type: "color",
+        //   label: "Inverse button text",
+        //   name: "colorInverseButtonText",
+        //   defaultValue: "#0F0F0F",
+        // },
         {
           type: "color",
           label: "Sale",
diff --git a/app/weaverse/style.tsx b/app/weaverse/style.tsx
index 53bdcd8c..bf971726 100644
--- a/app/weaverse/style.tsx
+++ b/app/weaverse/style.tsx
@@ -24,13 +24,13 @@ export function GlobalStyle() {
   if (settings) {
     let {
       colorBackground,
-      colorInverseBackground,
       colorText,
-      colorInverseText,
-      colorButton,
-      colorButtonText,
-      colorInverseButton,
-      colorInverseButtonText,
+      // colorInverseBackground,
+      // colorInverseText,
+      // colorButton,
+      // colorButtonText,
+      // colorInverseButton,
+      // colorInverseButtonText,
       colorSale,
       colorBorder,
       bodyBaseSize,
@@ -59,13 +59,13 @@ export function GlobalStyle() {
     } = settings;
 
     colorBackground = hexToRgbString(colorBackground);
-    colorInverseBackground = hexToRgbString(colorInverseBackground);
+    // colorInverseBackground = hexToRgbString(colorInverseBackground);
     colorText = hexToRgbString(colorText);
-    colorInverseText = hexToRgbString(colorInverseText);
-    colorButton = hexToRgbString(colorButton);
-    colorButtonText = hexToRgbString(colorButtonText);
-    colorInverseButton = hexToRgbString(colorInverseButton);
-    colorInverseButtonText = hexToRgbString(colorInverseButtonText);
+    // colorInverseText = hexToRgbString(colorInverseText);
+    // colorButton = hexToRgbString(colorButton);
+    // colorButtonText = hexToRgbString(colorButtonText);
+    // colorInverseButton = hexToRgbString(colorInverseButton);
+    // colorInverseButtonText = hexToRgbString(colorInverseButtonText);
     colorSale = hexToRgbString(colorSale);
     colorBorder = hexToRgbString(colorBorder);
 
@@ -79,13 +79,7 @@ export function GlobalStyle() {
             :root {
               /* Colors */
               --color-background: ${colorBackground};
-              --color-inverse-background: ${colorInverseBackground};
               --color-text: ${colorText};
-              --color-inverse-text: ${colorInverseText};
-              --color-button: ${colorButton};
-              --color-button-text: ${colorButtonText};
-              --color-inverse-button: ${colorInverseButton};
-              --color-inverse-button-text: ${colorInverseButtonText};
               --color-sale: ${colorSale};
               --color-border: ${colorBorder};
 
@@ -153,33 +147,33 @@ export function GlobalStyle() {
               }
             }
             .btn-primary {
-              background-color: ${buttonPrimaryBg};
-              color: ${buttonPrimaryColor};
-              border-color: ${buttonPrimaryBorder};
+              background-color: var(--color-button-bg, ${buttonPrimaryBg});
+              color: var(--color-button-text, ${buttonPrimaryColor});
+              border-color: var(--color-button-border, ${buttonPrimaryBorder});
             }
             .btn-primary:hover {
-              background-color: ${buttonPrimaryBgHover};
-              color: ${buttonPrimaryColorHover};
-              border-color: ${buttonPrimaryBorderHover};
+              background-color: var(--color-button-bg-hover, ${buttonPrimaryBgHover});
+              color: var(--color-button-text-hover, ${buttonPrimaryColorHover});
+              border-color: var(--color-button-border-hover, ${buttonPrimaryBorderHover});
             }
             .btn-secondary {
-              background-color: ${buttonSecondaryBg};
-              color: ${buttonSecondaryColor};
-              border-color: ${buttonSecondaryBorder};
+              background-color: var(--color-button-bg, ${buttonSecondaryBg});
+              color: var(--color-button-text, ${buttonSecondaryColor});
+              border-color: var(--color-button-border, ${buttonSecondaryBorder});
             }
             .btn-secondary:hover {
-              background-color: ${buttonSecondaryBgHover};
-              color: ${buttonSecondaryColorHover};
-              border-color: ${buttonSecondaryBorderHover};
+              background-color: var(--color-button-bg-hover, ${buttonSecondaryBgHover});
+              color: var(--color-button-text-hover, ${buttonSecondaryColorHover});
+              border-color: var(--color-button-border-hover, ${buttonSecondaryBorderHover});
             }
             .btn-link {
-              color: ${buttonLinkColor};
-              border-bottom-color: ${buttonLinkColor};
+              color: var(--color-button-text, ${buttonLinkColor});
+              border-bottom-color: var(--color-button-border, ${buttonLinkColor});
               border-radius: 0;
             }
             .btn-link:hover {
-              color: ${buttonLinkColorHover};
-              border-bottom-color: ${buttonLinkColorHover};
+              color: var(--color-button-text-hover, ${buttonLinkColorHover});
+              border-bottom-color: var(--color-button-border-hover, ${buttonLinkColorHover});
             }
           `,
         }}
diff --git a/package.json b/package.json
index 27b76490..37bae3d8 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "@weaverse/pilot",
   "private": true,
   "sideEffects": false,
-  "version": "2.6.8",
+  "version": "2.6.9",
   "type": "module",
   "author": "Weaverse",
   "scripts": {
diff --git a/tailwind.config.js b/tailwind.config.js
index 73e38e5c..6f623b5f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,11 +14,11 @@ export default {
         secondary: "rgb(var(--color-inverse-background) / <alpha-value>)", // background inverse color
         body: "rgb(var(--color-text) / <alpha-value>)", // body text color
         "inv-body": "rgb(var(--color-inverse-text) / <alpha-value>)", // body text inverse color
-        btn: "rgb(var(--color-button) / <alpha-value>)", // button background color
-        "btn-content": "rgb(var(--color-button-text) / <alpha-value>)", // button text color
-        "inv-btn": "rgb(var(--color-inverse-button) / <alpha-value>)", // button inverse background color
-        "inv-btn-content":
-          "rgb(var(--color-inverse-button-text) / <alpha-value>)", // button inverse text color
+        // btn: "rgb(var(--color-button) / <alpha-value>)", // button background color
+        // "btn-content": "rgb(var(--color-button-text) / <alpha-value>)", // button text color
+        // "inv-btn": "rgb(var(--color-inverse-button) / <alpha-value>)", // button inverse background color
+        // "inv-btn-content":
+        //   "rgb(var(--color-inverse-button-text) / <alpha-value>)", // button inverse text color
         sale: "rgb(var(--color-sale) / <alpha-value>)", // sale background color
         bar: "rgb(var(--color-border) / <alpha-value>)", // border color
       },