diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
index 9c70b62..7ae7337 100644
--- a/app/components/Footer.tsx
+++ b/app/components/Footer.tsx
@@ -16,7 +16,7 @@ export function Footer({footerMenu}: FooterProps) {
   let isError = fetcher.state === 'idle' && fetcher.data?.errors;
   return (
     <footer className="footer w-full bg-background-subtle-2">
-      <div className='flex flex-col gap-6 md:gap-10 lg:gap-8 lg:container px-4 pb-10 lg:px-10 lg:py-16 md:px-6 md:py-10 pt-6 h-fit'>
+      <div className="flex h-fit flex-col gap-6 px-4 pb-10 pt-6 container md:gap-10 md:px-6 md:py-10 lg:gap-8 lg:px-10 lg:py-16">
         <div className="flex flex-col justify-center gap-4 md:flex-row md:gap-4 lg:gap-10">
           <div className="flex w-full flex-col items-start gap-6 border-b border-foreground pb-6 md:h-fit md:border-none md:pb-0">
             <h3>Newsletter</h3>
@@ -86,9 +86,7 @@ function MenuLink(props: SingleMenuItem) {
     <>
       <div className="hidden flex-col gap-6 md:flex">
         <h4 className="font-medium uppercase">
-          <NavLink to={to} prefetch="intent">
-            <span className="text-animation">{title}</span>
-          </NavLink>
+          <span className="font-heading">{title}</span>
         </h4>
         <ul className="space-y-1.5">
           {items.map((subItem, ind) => (
@@ -145,14 +143,7 @@ function MenuLink(props: SingleMenuItem) {
 }
 
 function HeaderText({title, to}: {title: string; to: string}) {
-  return (
-    <NavLink
-      to={to}
-      className="border-b border-foreground pb-4 md:border-none md:pb-0"
-    >
-      <h4 className="text-animation font-medium uppercase">{title}</h4>
-    </NavLink>
-  );
+  return <h4 className="font-heading font-medium uppercase">{title}</h4>;
 }
 
 // function FooterMenu({
diff --git a/app/components/Header/MenuDrawerHeader.tsx b/app/components/Header/MenuDrawerHeader.tsx
index 80644d7..d6bc0d4 100644
--- a/app/components/Header/MenuDrawerHeader.tsx
+++ b/app/components/Header/MenuDrawerHeader.tsx
@@ -11,12 +11,12 @@ import {CartApiQueryFragment} from 'storefrontapi.generated';
 import {CartMain} from '../Cart';
 import {CartLoading} from '../CartLoading';
 import {Drawer, useDrawer} from '../Drawer';
-import {IconAccount, IconLogin, IconSearch} from '../Icon';
+import {IconAccount, IconLogin} from '../Icon';
 import {Link} from '../Link';
 import {Logo} from '../Logo';
-import {DrawerMenu} from './menu/DrawerMenu';
 import {CartCount} from './CartCount';
-import { SearchToggle } from './SearchToggle';
+import {DrawerMenu} from './menu/DrawerMenu';
+import {SearchToggle} from './SearchToggle';
 
 export function UseMenuDrawerHeader({
   header,
@@ -29,7 +29,7 @@ export function UseMenuDrawerHeader({
   cart: Promise<CartApiQueryFragment | null>;
   className?: string;
 }) {
-  const isHome  = useIsHomePath();
+  const isHome = useIsHomePath();
   const {y} = useWindowScroll();
   let settings = useThemeSettings();
   let [hovered, setHovered] = useState(false);
@@ -51,14 +51,16 @@ export function UseMenuDrawerHeader({
       role="banner"
       className={clsx(
         enableTransparent ? 'fixed' : 'sticky',
-        isTransparent ? 'text-white' : 'shadow-header',
-        'z-40 w-full border-b border-foreground top-0',
+        isTransparent
+          ? 'border-secondary bg-transparent text-secondary'
+          : 'shadow-header border-foreground bg-background-subtle-1 text-primary',
+        'top-0 z-40 w-full border-b border-foreground',
         className,
       )}
       onMouseEnter={onHover}
       onMouseLeave={onLeave}
     >
-      <div className=" z-40 flex transition-all duration-300 h-nav items-center justify-between gap-3 px-6 py-4 lg:container">
+      <div className="z-40 flex h-nav items-center justify-between gap-3 px-6 py-4 transition-all duration-300 container">
         <div
           className={clsx(
             'absolute inset-0 z-20 bg-background-subtle-1',
diff --git a/app/components/Header/MenuMegaHeader.tsx b/app/components/Header/MenuMegaHeader.tsx
index 26f40dc..ef2c168 100644
--- a/app/components/Header/MenuMegaHeader.tsx
+++ b/app/components/Header/MenuMegaHeader.tsx
@@ -11,7 +11,7 @@ import {CartApiQueryFragment} from 'storefrontapi.generated';
 import {CartMain} from '../Cart';
 import {CartLoading} from '../CartLoading';
 import {Drawer, useDrawer} from '../Drawer';
-import {IconAccount, IconLogin, IconSearch} from '../Icon';
+import {IconAccount, IconLogin} from '../Icon';
 import {Link} from '../Link';
 import {Logo} from '../Logo';
 import {MegaMenu} from './menu/MegaMenu';
@@ -52,15 +52,15 @@ export function UseMenuMegaHeader({
       className={clsx(
         enableTransparent ? 'fixed' : 'sticky',
         isTransparent
-          ? 'text-white'
-          : 'shadow-header',
-        'top-0 z-40 w-full border-b border-foreground',
+          ? ' text-secondary bg-transparent border-secondary'
+          : 'shadow-header text-primary bg-background-subtle-1 border-foreground',
+        'top-0 z-40 w-full border-b',
         className,
       )}
       onMouseEnter={onHover}
       onMouseLeave={onLeave}
     >
-      <div className="z-40 flex transition-all duration-300 h-nav items-center justify-between gap-3 lg:container">
+      <div className="z-40 flex transition-all duration-300 h-nav items-center justify-between gap-3 container">
         <div
           className={clsx(
             'absolute inset-0 z-20 bg-background-subtle-1',
diff --git a/app/components/Header/SearchToggle.tsx b/app/components/Header/SearchToggle.tsx
index 0482253..e529ac2 100644
--- a/app/components/Header/SearchToggle.tsx
+++ b/app/components/Header/SearchToggle.tsx
@@ -12,7 +12,7 @@ export function SearchToggle({isOpenDrawerHearder}: {isOpenDrawerHearder?: boole
   let settings = useThemeSettings();
   const [searchType, setSearchType] = useState(settings?.searchType);
   const [openFrom, setOpenFrom] = useState<TypeOpenFrom>(
-    searchType === 'headerSearch' ? 'top' : 'right'
+    searchType === 'popupSearch' ? 'top' : 'right'
   );
 
   useEffect(() => {
@@ -25,7 +25,7 @@ export function SearchToggle({isOpenDrawerHearder}: {isOpenDrawerHearder?: boole
         if (settings?.searchType === 'drawerSearch' && isOpenDrawerHearder) {
           setOpenFrom('left');
         } else {
-          setOpenFrom(settings?.searchType === 'headerSearch' ? 'top' : 'right');
+          setOpenFrom(settings?.searchType === 'popupSearch' ? 'top' : 'right');
         }
       }
     };
@@ -50,7 +50,7 @@ export function SearchToggle({isOpenDrawerHearder}: {isOpenDrawerHearder?: boole
         heading="Search"
         isForm="search"
       >
-        {searchType === 'headerSearch' && <SearchTypeHeader isOpen={isOpen} />}
+        {searchType === 'popupSearch' && <SearchTypeHeader isOpen={isOpen} />}
         {searchType === 'drawerSearch' && <SearchTypeDrawer isOpen={isOpen} />}
       </Drawer>
     </>
diff --git a/app/components/Icon.tsx b/app/components/Icon.tsx
index 66cde49..fccee71 100644
--- a/app/components/Icon.tsx
+++ b/app/components/Icon.tsx
@@ -88,42 +88,16 @@ export function IconBag(props: IconProps) {
 
 export function IconArrowRight(props: IconProps) {
   return (
-    <Icon {...props} fill="none" stroke={props.stroke || 'currentColor'}>
-      <path
-        d="M5.5 16H27.5"
-        stroke="#3D490B"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M18.5 7L27.5 16L18.5 25"
-        stroke="#3D490B"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
+    <Icon {...props} fill="currentColor" stroke={props.stroke || 'currentColor'} viewBox='0 0 256 256'>
+      <path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z" />
     </Icon>
   );
 }
 
 export function IconArrowLeft(props: IconProps) {
   return (
-    <Icon {...props} fill="none" stroke={props.stroke || 'currentColor'}>
-      <path
-        d="M27.5 16H5.5"
-        stroke="#3D490B"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M14.5 7L5.5 16L14.5 25"
-        stroke="#3D490B"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
+    <Icon {...props} fill="currentColor" stroke={props.stroke || 'currentColor'} viewBox='0 0 256 256'>
+      <path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z" />
     </Icon>
   );
 }
diff --git a/app/components/predictive-search/PredictiveSearch/SearchDrawer/SearchTypeDrawerResults.tsx b/app/components/predictive-search/PredictiveSearch/SearchDrawer/SearchTypeDrawerResults.tsx
index 6a1ae75..68e0d25 100644
--- a/app/components/predictive-search/PredictiveSearch/SearchDrawer/SearchTypeDrawerResults.tsx
+++ b/app/components/predictive-search/PredictiveSearch/SearchDrawer/SearchTypeDrawerResults.tsx
@@ -34,8 +34,8 @@ export function SearchTypeDrawerResults() {
     );
   }
   return (
-    <div className="flex items-center justify-center border-t bg-background-subtle-1">
-      <div className="grid max-h-[78vh] w-screen grid-cols-1 gap-6 overflow-y-auto p-6">
+    <div className="relative flex items-center justify-center border-t bg-background-subtle-1">
+      <div className="grid custom-scroll max-h-[81vh] w-screen grid-cols-1 gap-6 overflow-y-auto p-6">
         <div className="space-y-8">
           {queries && (
             <div className="flex flex-col gap-4 divide-y divide-bar-subtle">
@@ -83,11 +83,12 @@ export function SearchTypeDrawerResults() {
             />
           </div>
         )}
+        <div className='h-[50px]'/>
         {searchTerm.current && (
           <Link
             onClick={goToSearchResult}
             to={`/search?q=${searchTerm.current}`}
-            className="flex justify-center"
+            className="flex justify-center absolute bottom-0 p-6 bg-background-subtle-1 left-0 right-0"
           >
             <p className="inline-flex h-[50px] items-center justify-center rounded-md border border-primary bg-primary px-5 py-3 font-normal text-primary-foreground hover:border-bar hover:bg-background hover:text-foreground">
               Show All Results ({totalResultsCount})
diff --git a/app/sections/atoms/BackgroundImage.tsx b/app/sections/atoms/BackgroundImage.tsx
index dabd8fc..1905ac8 100644
--- a/app/sections/atoms/BackgroundImage.tsx
+++ b/app/sections/atoms/BackgroundImage.tsx
@@ -29,7 +29,7 @@ let variants = cva("absolute inset-0 w-full h-full z-[-1]", {
 });
 
 export type BackgroundImageProps = VariantProps<typeof variants> & {
-  backgroundImage: WeaverseImage | string;
+  backgroundImage?: WeaverseImage | string;
 };
 
 export function BackgroundImage(props: BackgroundImageProps) {
diff --git a/app/sections/atoms/Description.tsx b/app/sections/atoms/Description.tsx
index a16867b..5bcf34f 100644
--- a/app/sections/atoms/Description.tsx
+++ b/app/sections/atoms/Description.tsx
@@ -1,34 +1,50 @@
 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 { forwardRef } from "react";
+} from '@weaverse/hydrogen';
+import type {VariantProps} from 'class-variance-authority';
+import {cva} from 'class-variance-authority';
+import {clsx} from 'clsx';
+import {forwardRef} from 'react';
 
 export interface ParagraphProps
   extends VariantProps<typeof variants>,
     Partial<HydrogenComponentProps> {
-  as?: "p" | "div";
+  as?: 'p' | 'div';
   content: string;
   color?: string;
 }
 
-let variants = cva("paragraph", {
+let variants = cva('paragraph', {
   variants: {
+    textSize: {
+      xs: 'text-xs',
+      sm: 'text-sm',
+      base: '',
+      lg: 'text-lg',
+      xl: 'text-xl',
+      '2xl': 'text-2xl',
+      '3xl': 'text-3xl',
+      '4xl': 'text-4xl',
+      '5xl': 'text-5xl',
+      '6xl': 'text-6xl',
+      '7xl': 'text-7xl',
+      '8xl': 'text-8xl',
+      '9xl': 'text-9xl',
+    },
     width: {
-      full: "w-full mx-auto",
-      narrow: "w-full md:w-1/2 lg:w-3/4 max-w-4xl mx-auto",
+      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",
+      left: 'text-left',
+      center: 'text-center',
+      right: 'text-right',
     },
   },
   defaultVariants: {
-    width: "full",
+    width: 'full',
+    textSize: 'base',
   },
 });
 
@@ -37,9 +53,10 @@ let Description = forwardRef<
   ParagraphProps
 >((props, ref) => {
   let {
-    as: Tag = "p",
+    as: Tag = 'p',
     width,
     content,
+    textSize,
     color,
     alignment,
     className,
@@ -49,10 +66,10 @@ let Description = forwardRef<
     <Tag
       ref={ref}
       {...rest}
-      style={{ color }}
-      className={clsx(variants({ width, alignment, className }))}
+      style={{color}}
+      className={clsx(variants({textSize, width, alignment, className}))}
       suppressHydrationWarning
-      dangerouslySetInnerHTML={{ __html: content }}
+      dangerouslySetInnerHTML={{__html: content}}
     />
   );
 });
@@ -60,73 +77,96 @@ let Description = forwardRef<
 export default Description;
 
 export let schema: HydrogenComponentSchema = {
-  type: "description",
-  title: "Description",
+  type: 'description',
+  title: 'Description',
   inspector: [
     {
-      group: "Description",
+      group: 'Paragraph',
       inputs: [
         {
-          type: "select",
-          name: "as",
-          label: "HTML tag",
+          type: 'richtext',
+          name: 'content',
+          label: 'Content',
+          defaultValue:
+            "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.",
+          placeholder:
+            "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.",
+        },
+        {
+          type: 'select',
+          name: 'as',
+          label: 'HTML tag',
           configs: {
             options: [
-              { value: "p", label: "Paragraph" },
-              { value: "div", label: "Div" },
+              {value: 'p', label: '<p> (Paragraph)'},
+              {value: 'div', label: '<div> (Div)'},
             ],
           },
-          defaultValue: "p",
+          defaultValue: 'p',
         },
         {
-          type: "richtext",
-          name: "content",
-          label: "Content",
-          defaultValue:
-            "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.",
-          placeholder:
-            "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.",
+          type: 'color',
+          name: 'color',
+          label: 'Text color',
         },
         {
-          type: "color",
-          name: "color",
-          label: "Text color",
+          type: 'select',
+          name: 'textSize',
+          label: 'Text size',
+          configs: {
+            options: [
+              {value: 'xs', label: 'Extra small (text-xs)'},
+              {value: 'sm', label: 'Small (text-sm)'},
+              {value: 'base', label: 'Base (text-base)'},
+              {value: 'lg', label: 'Large (text-lg)'},
+              {value: 'xl', label: 'Extra large (text-xl)'},
+              {value: '2xl', label: '2x large (text-2xl)'},
+              {value: '3xl', label: '3x large (text-3xl)'},
+              {value: '4xl', label: '4x large (text-4xl)'},
+              {value: '5xl', label: '5x large (text-5xl)'},
+              {value: '6xl', label: '6x large (text-6xl)'},
+              {value: '7xl', label: '7x large (text-7xl)'},
+              {value: '8xl', label: '8x large (text-8xl)'},
+              {value: '9xl', label: '9x large (text-9xl)'},
+            ],
+          },
+          defaultValue: 'base',
         },
         {
-          type: "toggle-group",
-          name: "width",
-          label: "Width",
+          type: 'toggle-group',
+          name: 'width',
+          label: 'Width',
           configs: {
             options: [
-              { value: "full", label: "Full", icon: "move-horizontal" },
+              {value: 'full', label: 'Full', icon: 'move-horizontal'},
               {
-                value: "narrow",
-                label: "Narrow",
-                icon: "fold-horizontal",
+                value: 'narrow',
+                label: 'Narrow',
+                icon: 'fold-horizontal',
               },
             ],
           },
-          defaultValue: "full",
+          defaultValue: 'narrow',
         },
         {
-          type: "toggle-group",
-          name: "alignment",
-          label: "Alignment",
+          type: 'toggle-group',
+          name: 'alignment',
+          label: 'Alignment',
           configs: {
             options: [
-              { value: "left", label: "Left", icon: "align-start-vertical" },
+              {value: 'left', label: 'Left', icon: 'align-start-vertical'},
               {
-                value: "center",
-                label: "Center",
-                icon: "align-center-vertical",
+                value: 'center',
+                label: 'Center',
+                icon: 'align-center-vertical',
               },
-              { value: "right", label: "Right", icon: "align-end-vertical" },
+              {value: 'right', label: 'Right', icon: 'align-end-vertical'},
             ],
           },
-          // defaultValue: "center",
+          defaultValue: 'center',
         },
       ],
     },
   ],
-  toolbar: ["general-settings", ["duplicate", "delete"]],
+  toolbar: ['general-settings', ['duplicate', 'delete']],
 };
diff --git a/app/sections/atoms/Heading.tsx b/app/sections/atoms/Heading.tsx
index 7527938..026509a 100644
--- a/app/sections/atoms/Heading.tsx
+++ b/app/sections/atoms/Heading.tsx
@@ -9,26 +9,66 @@ import {cva} from 'class-variance-authority';
 import type {CSSProperties} from 'react';
 import {forwardRef} from 'react';
 
+let fontSizeVariants = cva('', {
+  variants: {
+    mobileSize: {
+      xs: 'text-xs',
+      sm: 'text-sm',
+      base: 'text-base',
+      lg: 'text-lg',
+      xl: 'text-xl',
+      '2xl': 'text-2xl',
+      '3xl': 'text-3xl',
+      '4xl': 'text-4xl',
+      '5xl': 'text-5xl',
+      '6xl': 'text-6xl',
+      '7xl': 'text-7xl',
+      '8xl': 'text-8xl',
+      '9xl': 'text-9xl',
+    },
+    desktopSize: {
+      xs: 'md:text-xs',
+      sm: 'md:text-sm',
+      base: 'md:text-base',
+      lg: 'md:text-lg',
+      xl: 'md:text-xl',
+      '2xl': 'md:text-2xl',
+      '3xl': 'md:text-3xl',
+      '4xl': 'md:text-4xl',
+      '5xl': 'md:text-5xl',
+      '6xl': 'md:text-6xl',
+      '7xl': 'md:text-7xl',
+      '8xl': 'md:text-8xl',
+      '9xl': 'md:text-9xl',
+    },
+  },
+});
+
 let variants = cva('heading', {
   variants: {
     size: {
       default: '',
-      lead: 'text-lg leading-snug',
-      heading: 'text-lg sm:text-2xl',
-      display: 'text-xl sm:text-4xl sm:leading-normal',
-      jumbo: 'text-2xl sm:text-5xl tracking-tight',
+      custom: '',
       scale: 'text-scale',
     },
     weight: {
-      medium: 'font-medium',
-      semibold: 'font-semibold',
-      bold: 'font-bold',
-      extrabold: 'font-extrabold',
+      '100': 'font-thin',
+      '200': 'font-extralight',
+      '300': 'font-light',
+      '400': 'font-normal',
+      '500': 'font-medium',
+      '600': 'font-semibold',
+      '700': 'font-bold',
+      '800': 'font-extrabold',
+      '900': 'font-black',
     },
-    tracking: {
+    letterSpacing: {
+      tighter: 'tracking-tighter',
       tight: 'tracking-tight',
-      inherit: '',
-      wide: 'tracking-wider',
+      normal: '',
+      wide: 'tracking-wide',
+      wider: 'tracking-wider',
+      widest: 'tracking-widest',
     },
     alignment: {
       left: 'text-left',
@@ -38,15 +78,15 @@ let variants = cva('heading', {
   },
   defaultVariants: {
     size: 'default',
-    weight: 'medium',
-    tracking: 'inherit',
-    // alignment: 'center',
+    weight: '400',
+    letterSpacing: 'normal',
+    alignment: 'center',
   },
 });
 
 export interface HeadingProps
   extends VariantProps<typeof variants>,
-    Partial<HydrogenComponentProps> {
+    VariantProps<typeof fontSizeVariants> {
   as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
   content: string;
   color?: string;
@@ -54,14 +94,19 @@ export interface HeadingProps
   maxSize?: number;
 }
 
-let Heading = forwardRef<HTMLHeadingElement, HeadingProps>((props, ref) => {
+let Heading = forwardRef<
+  HTMLHeadingElement,
+  HeadingProps & Partial<HydrogenComponentProps>
+>((props, ref) => {
   let {
-    as: Tag = 'h2',
+    as: Tag = 'h4',
     content,
     size,
+    mobileSize,
+    desktopSize,
     color,
     weight,
-    tracking,
+    letterSpacing,
     alignment,
     minSize,
     maxSize,
@@ -82,7 +127,10 @@ let Heading = forwardRef<HTMLHeadingElement, HeadingProps>((props, ref) => {
       ref={ref}
       {...rest}
       style={style}
-      className={cn(variants({size, weight, tracking, alignment, className}))}
+      className={cn(
+        size === 'custom' && fontSizeVariants({mobileSize, desktopSize}),
+        variants({size, weight, letterSpacing, alignment, className}),
+      )}
     >
       {content}
     </Tag>
@@ -92,28 +140,28 @@ let Heading = forwardRef<HTMLHeadingElement, HeadingProps>((props, ref) => {
 export default Heading;
 
 export let headingInputs: InspectorGroup['inputs'] = [
+  {
+    type: 'text',
+    name: 'content',
+    label: 'Content',
+    defaultValue: 'Section heading',
+    placeholder: 'Section heading',
+  },
   {
     type: 'select',
     name: 'as',
     label: 'HTML tag',
     configs: {
       options: [
-        {value: 'h1', label: 'Heading 1'},
-        {value: 'h2', label: 'Heading 2'},
-        {value: 'h3', label: 'Heading 3'},
-        {value: 'h4', label: 'Heading 4'},
-        {value: 'h5', label: 'Heading 5'},
-        {value: 'h6', label: 'Heading 6'},
+        {value: 'h1', label: '<h1> (Heading 1)'},
+        {value: 'h2', label: '<h2> (Heading 2)'},
+        {value: 'h3', label: '<h3> (Heading 3)'},
+        {value: 'h4', label: '<h4> (Heading 4)'},
+        {value: 'h5', label: '<h5> (Heading 5)'},
+        {value: 'h6', label: '<h6> (Heading 6)'},
       ],
     },
-    defaultValue: 'h2',
-  },
-  {
-    type: 'text',
-    name: 'content',
-    label: 'Content',
-    defaultValue: 'Section heading',
-    placeholder: 'Section heading',
+    defaultValue: 'h4',
   },
   {
     type: 'color',
@@ -127,15 +175,11 @@ export let headingInputs: InspectorGroup['inputs'] = [
     configs: {
       options: [
         {value: 'default', label: 'Default'},
-        {value: 'lead', label: 'Lead'},
-        {value: 'heading', label: 'Heading'},
-        {value: 'display', label: 'Display'},
-        {value: 'jumbo', label: 'Jumbo'},
         {value: 'scale', label: 'Auto scale'},
+        {value: 'custom', label: 'Custom'},
       ],
     },
     defaultValue: 'default',
-    helpText: 'Text size is responsive automatically.',
   },
   {
     type: 'range',
@@ -155,7 +199,7 @@ export let headingInputs: InspectorGroup['inputs'] = [
     name: 'maxSize',
     label: 'Maximum scale size',
     configs: {
-      min: 48,
+      min: 40,
       max: 96,
       step: 1,
       unit: 'px',
@@ -165,32 +209,88 @@ export let headingInputs: InspectorGroup['inputs'] = [
     helpText:
       'See how scale text works <a href="https://css-tricks.com/snippets/css/fluid-typography/" target="_blank" rel="noreferrer">here</a>.',
   },
+  {
+    type: 'select',
+    name: 'mobileSize',
+    label: 'Mobile text size',
+    condition: 'size.eq.custom',
+    configs: {
+      options: [
+        {value: 'xs', label: 'Extra small (text-xs)'},
+        {value: 'sm', label: 'Small (text-sm)'},
+        {value: 'base', label: 'Base (text-base)'},
+        {value: 'lg', label: 'Large (text-lg)'},
+        {value: 'xl', label: 'Extra large (text-xl)'},
+        {value: '2xl', label: '2x large (text-2xl)'},
+        {value: '3xl', label: '3x large (text-3xl)'},
+        {value: '4xl', label: '4x large (text-4xl)'},
+        {value: '5xl', label: '5x large (text-5xl)'},
+        {value: '6xl', label: '6x large (text-6xl)'},
+        {value: '7xl', label: '7x large (text-7xl)'},
+        {value: '8xl', label: '8x large (text-8xl)'},
+        {value: '9xl', label: '9x large (text-9xl)'},
+      ],
+    },
+    defaultValue: '3xl',
+  },
+  {
+    type: 'select',
+    name: 'desktopSize',
+    label: 'Desktop text size',
+    condition: 'size.eq.custom',
+    configs: {
+      options: [
+        {value: 'xs', label: 'Extra small (text-xs)'},
+        {value: 'sm', label: 'Small (text-sm)'},
+        {value: 'base', label: 'Base (text-base)'},
+        {value: 'lg', label: 'Large (text-lg)'},
+        {value: 'xl', label: 'Extra large (text-xl)'},
+        {value: '2xl', label: '2x large (text-2xl)'},
+        {value: '3xl', label: '3x large (text-3xl)'},
+        {value: '4xl', label: '4x large (text-4xl)'},
+        {value: '5xl', label: '5x large (text-5xl)'},
+        {value: '6xl', label: '6x large (text-6xl)'},
+        {value: '7xl', label: '7x large (text-7xl)'},
+        {value: '8xl', label: '8x large (text-8xl)'},
+        {value: '9xl', label: '9x large (text-9xl)'},
+      ],
+    },
+    defaultValue: '5xl',
+  },
   {
     type: 'select',
     name: 'weight',
     label: 'Weight',
     configs: {
       options: [
-        {value: 'medium', label: 'Medium'},
-        {value: 'semibold', label: 'Semibold'},
-        {value: 'bold', label: 'Bold'},
-        {value: 'extrabold', label: 'Extrabold'},
+        {value: '100', label: '100 - Thin'},
+        {value: '200', label: '200 - Extra Light'},
+        {value: '300', label: '300 - Light'},
+        {value: '400', label: '400 - Normal'},
+        {value: '500', label: '500 - Medium'},
+        {value: '600', label: '600 - Semi Bold'},
+        {value: '700', label: '700 - Bold'},
+        {value: '800', label: '800 - Extra Bold'},
+        {value: '900', label: '900 - Black'},
       ],
     },
-    defaultValue: 'bold',
+    defaultValue: '400',
   },
   {
     type: 'select',
-    name: 'tracking',
     label: 'Letter spacing',
+    name: 'letterSpacing',
     configs: {
       options: [
-        {value: 'tight', label: 'Tight'},
-        {value: 'inherit', label: 'Inherit'},
-        {value: 'wide', label: 'Wide'},
+        {label: 'Tighter (-0.05em)', value: 'tighter'},
+        {label: 'Tight (-0.025em)', value: 'tight'},
+        {label: 'Normal (Inherit)', value: 'normal'},
+        {label: 'Wide (0.025em)', value: 'wide'},
+        {label: 'Wider (0.05em)', value: 'wider'},
+        {label: 'Widest (0.1em)', value: 'widest'},
       ],
     },
-    defaultValue: 'inherit',
+    defaultValue: 'normal',
   },
   {
     type: 'toggle-group',
@@ -207,7 +307,7 @@ export let headingInputs: InspectorGroup['inputs'] = [
         {value: 'right', label: 'Right', icon: 'align-end-vertical'},
       ],
     },
-    // defaultValue: 'center',
+    defaultValue: 'center',
   },
 ];
 
@@ -220,5 +320,4 @@ export let schema: HydrogenComponentSchema = {
       inputs: headingInputs,
     },
   ],
-  toolbar: ['general-settings', ['duplicate', 'delete']],
 };
diff --git a/app/sections/atoms/Overlay.tsx b/app/sections/atoms/Overlay.tsx
index c3784a2..8733e9a 100644
--- a/app/sections/atoms/Overlay.tsx
+++ b/app/sections/atoms/Overlay.tsx
@@ -1,24 +1,40 @@
 import { cn } from "@/lib/utils";
 import type { InspectorGroup } from "@weaverse/hydrogen";
+import type { CSSProperties } from "react";
 
 export type OverlayProps = {
   enableOverlay: boolean;
   overlayColor: string;
+  overlayColorHover: string;
   overlayOpacity: number;
   className?: string;
 };
 
 export function Overlay(props: OverlayProps) {
-  let { enableOverlay, overlayColor, overlayOpacity, className } = props;
-  if (enableOverlay && overlayColor) {
+  let {
+    enableOverlay,
+    overlayColor,
+    overlayColorHover,
+    overlayOpacity,
+    className,
+  } = props;
+  if (enableOverlay) {
     return (
       <div
-        className={cn("absolute inset-0 z-[-1]", className)}
-        style={{
-          backgroundColor: overlayColor,
-          opacity: (overlayOpacity || 100) / 100,
-          margin: 0,
-        }}
+        className={cn(
+          "absolute inset-0 z-[-1] transition-colors",
+          "bg-[var(--overlay-color)]",
+          "group-hover/overlay:bg-[var(--overlay-color-hover,var(--overlay-color))]",
+          className,
+        )}
+        style={
+          {
+            "--overlay-color": overlayColor,
+            "--overlay-color-hover": overlayColorHover,
+            opacity: overlayOpacity / 100,
+            margin: 0,
+          } as CSSProperties
+        }
       />
     );
   }
@@ -39,6 +55,12 @@ export let overlayInputs: InspectorGroup["inputs"] = [
     defaultValue: "#000000",
     condition: "enableOverlay.eq.true",
   },
+  {
+    type: "color",
+    name: "overlayColorHover",
+    label: "Overlay color (hover)",
+    condition: "enableOverlay.eq.true",
+  },
   {
     type: "range",
     name: "overlayOpacity",
diff --git a/app/sections/atoms/OverlayAndBackground.tsx b/app/sections/atoms/OverlayAndBackground.tsx
new file mode 100644
index 0000000..e38db90
--- /dev/null
+++ b/app/sections/atoms/OverlayAndBackground.tsx
@@ -0,0 +1,35 @@
+import type { BackgroundImageProps } from "./BackgroundImage";
+import { BackgroundImage } from "./BackgroundImage";
+import type { OverlayProps } from "./Overlay";
+import { Overlay } from "./Overlay";
+
+export interface OverlayAndBackgroundProps
+  extends BackgroundImageProps,
+    OverlayProps {}
+
+export function OverlayAndBackground(props: OverlayAndBackgroundProps) {
+  let {
+    backgroundImage,
+    backgroundFit,
+    backgroundPosition,
+    enableOverlay,
+    overlayColor,
+    overlayColorHover,
+    overlayOpacity,
+  } = props;
+  return (
+    <>
+      <BackgroundImage
+        backgroundImage={backgroundImage}
+        backgroundFit={backgroundFit}
+        backgroundPosition={backgroundPosition}
+      />
+      <Overlay
+        enableOverlay={enableOverlay}
+        overlayColor={overlayColor}
+        overlayColorHover={overlayColorHover}
+        overlayOpacity={overlayOpacity}
+      />
+    </>
+  );
+}
diff --git a/app/sections/atoms/Section.tsx b/app/sections/atoms/Section.tsx
index a7fb547..550acbd 100644
--- a/app/sections/atoms/Section.tsx
+++ b/app/sections/atoms/Section.tsx
@@ -1,15 +1,17 @@
-import {
-  type HydrogenComponentProps,
-  type InspectorGroup,
+import type {
+  HydrogenComponentProps,
+  InspectorGroup,
 } from "@weaverse/hydrogen";
 import type { VariantProps } from "class-variance-authority";
 import { cva } from "class-variance-authority";
 import type { HTMLAttributes } from "react";
-import React, { forwardRef } from "react";
+import type React from "react";
+import { forwardRef } from "react";
 import type { BackgroundImageProps } from "./BackgroundImage";
-import { BackgroundImage, backgroundInputs } from "./BackgroundImage";
+import { backgroundInputs } from "./BackgroundImage";
 import type { OverlayProps } from "./Overlay";
-import { Overlay, overlayInputs } from "./Overlay";
+import { overlayInputs } from "./Overlay";
+import { OverlayAndBackground } from "./OverlayAndBackground";
 import { cn } from "@/lib/utils";
 
 export type BackgroundProps = BackgroundImageProps & {
@@ -21,7 +23,7 @@ export interface SectionProps<T = any>
   extends Omit<VariantProps<typeof variants>, "padding">,
     Omit<HydrogenComponentProps<T>, "children">,
     Omit<HTMLAttributes<HTMLElement>, "children">,
-    BackgroundProps,
+    Partial<BackgroundProps>,
     OverlayProps {
   as: React.ElementType;
   borderRadius: number;
@@ -90,6 +92,7 @@ export let Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {
     backgroundPosition,
     enableOverlay,
     overlayColor,
+    overlayColorHover,
     overlayOpacity,
     className,
     children,
@@ -132,31 +135,6 @@ export let Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {
   );
 });
 
-function OverlayAndBackground(props: SectionProps) {
-  let {
-    backgroundImage,
-    backgroundFit,
-    backgroundPosition,
-    enableOverlay,
-    overlayColor,
-    overlayOpacity,
-  } = props;
-  return (
-    <>
-      <BackgroundImage
-        backgroundImage={backgroundImage}
-        backgroundFit={backgroundFit}
-        backgroundPosition={backgroundPosition}
-      />
-      <Overlay
-        enableOverlay={enableOverlay}
-        overlayColor={overlayColor}
-        overlayOpacity={overlayOpacity}
-      />
-    </>
-  );
-}
-
 export let layoutInputs: InspectorGroup["inputs"] = [
   {
     type: "select",
@@ -211,12 +189,8 @@ export let layoutInputs: InspectorGroup["inputs"] = [
   },
 ];
 
-// export let sectionInspector: InspectorGroup[] = [
-//   { group: "Layout", inputs: layoutInputs },
-//   { group: "Background", inputs: backgroundInputs },
-//   { group: "Overlay", inputs: overlayInputs },
-// ];
-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/sections/atoms/SubHeading.tsx b/app/sections/atoms/SubHeading.tsx
index 787d7be..83baecc 100644
--- a/app/sections/atoms/SubHeading.tsx
+++ b/app/sections/atoms/SubHeading.tsx
@@ -26,7 +26,7 @@ let variants = cva('subheading', {
   defaultVariants: {
     size: 'base',
     weight: 'normal',
-    // alignment: 'center',
+    alignment: 'center',
   },
 });
 
@@ -139,7 +139,7 @@ export let schema: HydrogenComponentSchema = {
               {value: 'right', label: 'Right', icon: 'align-end-vertical'},
             ],
           },
-        //   defaultValue: 'center',
+          defaultValue: 'center',
         },
       ],
     },
diff --git a/app/sections/countdown/index.tsx b/app/sections/countdown/index.tsx
index 03b526b..3c97411 100644
--- a/app/sections/countdown/index.tsx
+++ b/app/sections/countdown/index.tsx
@@ -116,7 +116,7 @@ export let schema: HydrogenComponentSchema = {
   ],
   childTypes: ["heading", "subheading", "countdown--timer", "button"],
   presets: {
-    backgroundImage: IMAGES_PLACEHOLDERS.banner,
+    backgroundImage: IMAGES_PLACEHOLDERS.banner_1,
     width: "stretch",
     backgroundFor: "content",
     borderRadius: 30,
diff --git a/app/sections/hightlight/content-item.tsx b/app/sections/hightlight/content-item.tsx
index 04d162f..ecacda5 100644
--- a/app/sections/hightlight/content-item.tsx
+++ b/app/sections/hightlight/content-item.tsx
@@ -8,6 +8,7 @@ import React, {forwardRef, CSSProperties} from 'react';
 interface ContentProps extends HydrogenComponentProps {
     itemPerRow: number;
     gap: number;
+    borderColor: string;
 }
 
 let itemsPerRowClasses: { [item: number]: string } = {
@@ -19,15 +20,16 @@ let itemsPerRowClasses: { [item: number]: string } = {
 
 const HighlightContent = forwardRef<HTMLDivElement, ContentProps>(
   (props, ref) => {
-    let {itemPerRow, gap, children, ...rest} = props;
+    let {itemPerRow, gap, borderColor, children, ...rest} = props;
     let style: CSSProperties = {
         '--item-gap': `${gap}px`,
+        '--border-color': borderColor,
     } as CSSProperties;
     let actualItemPerRow = Math.min(itemPerRow, React.Children.count(children));
     return (
       <div ref={ref} {...rest}
         className={clsx(
-          'flex flex-col sm:grid gap-y-6 gap-x-[var(--item-gap)] w-full',
+          'flex flex-col sm:grid gap-y-6 gap-x-[var(--item-gap)]',
           itemsPerRowClasses[actualItemPerRow],
         )}
         style={style}
@@ -70,6 +72,12 @@ export let schema: HydrogenComponentSchema = {
           },
           defaultValue: 16,
         },
+        {
+          type: 'color',
+          label: 'Border color',
+          name: 'borderColor',
+          defaultValue: '#9AA473',
+      },
       ],
     },
   ],
diff --git a/app/sections/hightlight/index.tsx b/app/sections/hightlight/index.tsx
index d9b2f50..eab576f 100644
--- a/app/sections/hightlight/index.tsx
+++ b/app/sections/hightlight/index.tsx
@@ -1,35 +1,24 @@
 import type {
-    HydrogenComponentProps,
     HydrogenComponentSchema,
 } from '@weaverse/hydrogen';
-import { forwardRef, CSSProperties } from 'react';
+import { forwardRef } from 'react';
+import { Section, sectionInspector, SectionProps } from '../atoms/Section';
 
-interface HighlightsProps extends HydrogenComponentProps {
-    backgroundColor: string;
-    borderColor: string;
-}
+type HighlightsProps = SectionProps;
 
 const Highlights = forwardRef<
     HTMLElement,
     HighlightsProps
 >((props, ref) => {
     let {
-        backgroundColor,
-        borderColor,
         children,
         ...rest
     } = props;
-    let sectionStyle: CSSProperties = {
-        backgroundColor: backgroundColor,
-        '--border-color': borderColor,
-    } as CSSProperties;
 
     return (
-        <section ref={ref} {...rest} className="w-full h-full flex justify-center" style={sectionStyle}>
-            <div className="px-6 py-12 sm:py-20 sm:px-10 flex flex-col gap-12 container text-center">
-                {children}
-            </div>
-        </section>
+        <Section ref={ref} {...rest}>
+            {children}
+        </Section>
     );
 });
 
@@ -39,25 +28,7 @@ export let schema: HydrogenComponentSchema = {
     type: 'highlight',
     title: 'Highlights',
     toolbar: ['general-settings', ['duplicate', 'delete']],
-    inspector: [
-        {
-            group: 'Highlights',
-            inputs: [
-                {
-                    type: 'color',
-                    label: 'Background color',
-                    name: 'backgroundColor',
-                    defaultValue: '#F8F8F0',
-                },
-                {
-                    type: 'color',
-                    label: 'Border color',
-                    name: 'borderColor',
-                    defaultValue: '#9AA473',
-                },
-            ],
-        },
-    ],
+    inspector: sectionInspector,
     childTypes: ['heading', 'highlight-content--item'],
     presets: {
         children: [
diff --git a/app/sections/hightlight/item.tsx b/app/sections/hightlight/item.tsx
index b8cfb3d..5962ad1 100644
--- a/app/sections/hightlight/item.tsx
+++ b/app/sections/hightlight/item.tsx
@@ -33,9 +33,9 @@ const HighlightItem = forwardRef<HTMLDivElement, HightlightProps>(
                         <div className='w-full flex justify-center gap-4'>
                             {index === 0 && (
                                 <div className='w-fit h-fit'>
-                                    <h3 className='border border-black rounded-full font-medium w-11 h-11 flex justify-center text-3xl'>
+                                    <span className='border border-[var(--border-color)] rounded-full font-heading font-medium w-11 h-11 flex justify-center text-3xl'>
                                         {(parentInstance?._store?.children as { id: string }[])?.findIndex((c) => c.id === child?.props.parentId) + 1}
-                                    </h3>
+                                    </span>
                                 </div>
                             )}
                             {child}
diff --git a/app/sections/image-banner/index.tsx b/app/sections/image-banner/index.tsx
index e58a66c..1fd4573 100644
--- a/app/sections/image-banner/index.tsx
+++ b/app/sections/image-banner/index.tsx
@@ -106,7 +106,7 @@ export let schema: HydrogenComponentSchema = {
   presets: {
     height: "large",
     contentPosition: "bottom left",
-    backgroundImage: IMAGES_PLACEHOLDERS.backgroundImage,
+    backgroundImage: IMAGES_PLACEHOLDERS.image,
     backgroundFit: "cover",
     enableOverlay: true,
     overlayOpacity: 35,
diff --git a/app/sections/image-hotspots/index.tsx b/app/sections/image-hotspots/index.tsx
index b1fe279..6438854 100644
--- a/app/sections/image-hotspots/index.tsx
+++ b/app/sections/image-hotspots/index.tsx
@@ -139,7 +139,7 @@ export let schema: HydrogenComponentSchema = {
   toolbar: ["general-settings", ["duplicate", "delete"]],
   presets: {
     heading: "Shop the look",
-    image: IMAGES_PLACEHOLDERS.gs_collection_4,
+    image: IMAGES_PLACEHOLDERS.collection_4,
     aspectRatio: "16/9",
     gap: 40,
     children: [
diff --git a/app/sections/image-hotspots/product-popup.tsx b/app/sections/image-hotspots/product-popup.tsx
index d8d4ad6..0b75ffc 100644
--- a/app/sections/image-hotspots/product-popup.tsx
+++ b/app/sections/image-hotspots/product-popup.tsx
@@ -24,7 +24,7 @@ const PRODUCT_PLACEHOLDER: Partial<ProductQuery["product"]> = {
         mediaContentType: "IMAGE",
         image: {
           id: "1",
-          url: IMAGES_PLACEHOLDERS.gs_product_4,
+          url: IMAGES_PLACEHOLDERS.product_4,
           width: 500,
           height: 500,
         },
diff --git a/app/sections/image-with-text/content.tsx b/app/sections/image-with-text/content.tsx
new file mode 100644
index 0000000..c6b8e18
--- /dev/null
+++ b/app/sections/image-with-text/content.tsx
@@ -0,0 +1,91 @@
+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 {forwardRef} from 'react';
+
+let variants = cva(
+  'grow flex flex-col justify-center gap-5 py-6 px-4 md:px-8 md:py-8 [&_.paragraph]:mx-[unset] [&_.paragraph]:w-auto',
+  {
+    variants: {
+      alignment: {
+        left: 'items-start',
+        center: 'items-center',
+        right: 'items-end',
+      },
+    },
+    defaultVariants: {
+      alignment: 'center',
+    },
+  },
+);
+
+interface ImageWithTextContentProps
+  extends VariantProps<typeof variants>,
+    HydrogenComponentProps {}
+
+let ImageWithTextContent = forwardRef<
+  HTMLDivElement,
+  ImageWithTextContentProps
+>((props, ref) => {
+  let {alignment, children, ...rest} = props;
+  return (
+    <div ref={ref} {...rest} className={clsx(variants({alignment}))}>
+      {children}
+    </div>
+  );
+});
+
+export default ImageWithTextContent;
+
+export let schema: HydrogenComponentSchema = {
+  type: 'image-with-text--content',
+  title: 'Content',
+  limit: 1,
+  inspector: [
+    {
+      group: 'Content',
+      inputs: [
+        {
+          type: 'select',
+          name: 'alignment',
+          label: 'Alignment',
+          configs: {
+            options: [
+              {value: 'left', label: 'Left'},
+              {value: 'center', label: 'Center'},
+              {value: 'right', label: 'Right'},
+            ],
+          },
+          helpText:
+            'This will override the default alignment setting of all children components.',
+        },
+      ],
+    },
+  ],
+  childTypes: ['subheading', 'heading', 'description', 'button'],
+  presets: {
+    alignment: 'center',
+    children: [
+      {
+        type: 'subheading',
+        content: 'Subheading',
+      },
+      {
+        type: 'heading',
+        content: 'Heading for image',
+      },
+      {
+        type: 'description',
+        content: 'Pair large text with an image to tell a story.',
+      },
+      {
+        type: 'button',
+        text: 'Shop now',
+      },
+    ],
+  },
+};
diff --git a/app/sections/image-with-text/image.tsx b/app/sections/image-with-text/image.tsx
new file mode 100644
index 0000000..6b31fcd
--- /dev/null
+++ b/app/sections/image-with-text/image.tsx
@@ -0,0 +1,170 @@
+import {cn} from '@/lib/utils';
+import {Image} from '@shopify/hydrogen';
+import {
+  IMAGES_PLACEHOLDERS,
+  type HydrogenComponentProps,
+  type HydrogenComponentSchema,
+  type WeaverseImage,
+} from '@weaverse/hydrogen';
+import type {VariantProps} from 'class-variance-authority';
+import {cva} from 'class-variance-authority';
+import {forwardRef} from 'react';
+
+let variants = cva('w-full h-auto', {
+  variants: {
+    width: {
+      small: 'md:w-[40%]',
+      medium: 'md:w-[50%]',
+      large: 'md:w-[60%]',
+    },
+    objectFit: {
+      cover: 'object-cover',
+      contain: 'object-contain',
+    },
+    borderRadius: {
+      0: '',
+      2: 'rounded-sm',
+      4: 'rounded',
+      6: 'rounded-md',
+      8: 'rounded-lg',
+      10: 'rounded-[10px]',
+      12: 'rounded-xl',
+      14: 'rounded-[14px]',
+      16: 'rounded-2xl',
+      18: 'rounded-[18px]',
+      20: 'rounded-[20px]',
+      22: 'rounded-[22px]',
+      24: 'rounded-3xl',
+      26: 'rounded-[26px]',
+      28: 'rounded-[28px]',
+      30: 'rounded-[30px]',
+      32: 'rounded-[32px]',
+      34: 'rounded-[34px]',
+      36: 'rounded-[36px]',
+      38: 'rounded-[38px]',
+      40: 'rounded-[40px]',
+    },
+  },
+});
+
+interface ImageWithTextImageProps
+  extends VariantProps<typeof variants>,
+    HydrogenComponentProps {
+  image: WeaverseImage | string;
+  aspectRatio: 'adapt' | '1/1' | '4/3' | '3/4' | '16/9';
+}
+
+let ImageWithTextImage = forwardRef<HTMLDivElement, ImageWithTextImageProps>(
+  (props, ref) => {
+    let {
+      image = IMAGES_PLACEHOLDERS.image,
+      width,
+      aspectRatio,
+      borderRadius,
+      objectFit,
+      ...rest
+    } = props;
+    let imageData: Partial<WeaverseImage> =
+      typeof image === 'string' ? {url: image, altText: 'Placeholder'} : image;
+    let aspRt: string | undefined;
+    if (aspectRatio === 'adapt') {
+      if (imageData.width && imageData.height) {
+        aspRt = `${imageData.width}/${imageData.height}`;
+      }
+    } else {
+      aspRt = aspectRatio;
+    }
+
+    return (
+      <div ref={ref} {...rest} className={cn(variants({width}))}>
+        <Image
+          data={imageData}
+          sizes="auto"
+          aspectRatio={aspRt}
+          className={cn('h-auto w-full', variants({objectFit, borderRadius}))}
+        />
+      </div>
+    );
+  },
+);
+
+export default ImageWithTextImage;
+
+export let schema: HydrogenComponentSchema = {
+  type: 'image-with-text--image',
+  title: 'Image',
+  limit: 1,
+  inspector: [
+    {
+      group: 'Image',
+      inputs: [
+        {
+          type: 'image',
+          name: 'image',
+          label: 'Image',
+        },
+        {
+          type: 'select',
+          name: 'aspectRatio',
+          label: 'Aspect ratio',
+          defaultValue: 'adapt',
+          configs: {
+            options: [
+              {value: 'adapt', label: 'Adapt to image'},
+              {value: '1/1', label: '1/1'},
+              {value: '4/3', label: '4/3'},
+              {value: '3/4', label: '3/4'},
+              {value: '16/9', label: '16/9'},
+            ],
+          },
+          helpText:
+            'Learn more about image <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio" target="_blank" rel="noopener noreferrer">aspect ratio</a> property.',
+        },
+        {
+          type: 'select',
+          name: 'width',
+          label: 'Width',
+          defaultValue: 'medium',
+          configs: {
+            options: [
+              {value: 'small', label: 'Small'},
+              {value: 'medium', label: 'Medium'},
+              {value: 'large', label: 'Large'},
+            ],
+          },
+        },
+        {
+          type: 'range',
+          name: 'borderRadius',
+          label: 'Border radius',
+          configs: {
+            min: 0,
+            max: 40,
+            step: 2,
+            unit: 'px',
+          },
+          defaultValue: 0,
+        },
+        {
+          type: 'select',
+          name: 'objectFit',
+          label: 'Object fit',
+          defaultValue: 'cover',
+          configs: {
+            options: [
+              {value: 'cover', label: 'Cover'},
+              {value: 'contain', label: 'Contain'},
+            ],
+          },
+        },
+      ],
+    },
+  ],
+  presets: {
+    image: IMAGES_PLACEHOLDERS.image,
+    width: 'medium',
+    aspectRatio: '1/1',
+    objectFit: 'cover',
+    borderRadius: 0,
+  },
+};
diff --git a/app/sections/image-with-text/index.tsx b/app/sections/image-with-text/index.tsx
index fc59d6f..30da86b 100644
--- a/app/sections/image-with-text/index.tsx
+++ b/app/sections/image-with-text/index.tsx
@@ -1,195 +1,44 @@
-import type {
-    HydrogenComponentProps,
-    HydrogenComponentSchema,
-    WeaverseImage,
-} from '@weaverse/hydrogen';
-import { forwardRef, CSSProperties } from 'react';
-import { Image } from '@shopify/hydrogen';
-import { IconImageBlank } from '~/components/Icon';
-import clsx from 'clsx';
+import type { HydrogenComponentSchema } from "@weaverse/hydrogen";
+import { forwardRef } from "react";
+import { layoutInputs, Section, SectionProps } from "../atoms/Section";
+import { backgroundInputs } from "../atoms/BackgroundImage";
 
-type AlignImage = 'left' | 'right';
-type Alignment = 'left' | 'center' | 'right';
-interface ImageWithTextProps extends HydrogenComponentProps {
-    backgroundImage?: WeaverseImage;
-    sectionHeight: number;
-    backgroundColor: string;
-    imageAlignment?: AlignImage;
-    textAlignment: Alignment;
-    marginTop?: number;
-    marginBottom?: number;
-    displayMaxWidthContent?: boolean;
-}
+type ImageWithTextProps = SectionProps;
 
-let AlignImageClasses: Record<AlignImage, string> = {
-    left: 'sm:flex-row',
-    right: 'sm:flex-row-reverse',
-};
-
-let alignmentClasses: Record<Alignment, string> = {
-    left: 'text-left items-start',
-    center: 'text-center items-center',
-    right: 'text-right items-end',
-};
-
-const ImageWithText = forwardRef<HTMLElement, ImageWithTextProps>((props, ref) => {
-    let { backgroundImage, imageAlignment, marginTop, marginBottom, sectionHeight, backgroundColor, textAlignment, displayMaxWidthContent, children, ...rest } = props;
-    let styleSection: CSSProperties = {
-        '--section-height': `${sectionHeight}px`,
-        '--margin-top': `${marginTop}px`,
-        '--margin-bottom': `${marginBottom}px`,
-        '--background-color': backgroundColor,
-    } as CSSProperties;
+let ImageWithText = forwardRef<HTMLElement, ImageWithTextProps>(
+  (props, ref) => {
+    let { children, ...rest } = props;
 
     return (
-        <section ref={ref} {...rest} style={styleSection} className='h-auto bg-secondary'>
-            <div className='pt-[var(--margin-top)]'/>
-            <div className='h-full w-full group sm:px-0 sm:h-[var(--section-height)]'>
-                <div className={clsx('flex flex-col justify-center items-center h-full w-full', 
-                    AlignImageClasses[imageAlignment!],
-                    displayMaxWidthContent ? 'lg:container' : ''
-                )}>
-                    <div
-                        className="w-full h-1/2 sm:h-full flex flex-1 items-center justify-center sm:w-1/2 aspect-square overflow-hidden"
-                    >
-                        {backgroundImage ? (
-                            <Image
-                                data={backgroundImage}
-                                sizes="auto"
-                                className="!w-full !h-full object-cover group-hover:ease-in-out group-hover:scale-125 transition duration-1000"
-                            />
-                        ) : (
-                            <div className="flex justify-center items-center bg-background-subtle-1 w-full h-full">
-                                <IconImageBlank
-                                    className="w-96 h-96 opacity-80"
-                                    viewBox="0 0 526 526"
-                                />
-                            </div>
-                        )}
-                    </div>
-                    <div className={clsx(
-                        'flex flex-col justify-center px-6 py-12 gap-4 bg-[var(--background-color)] aspect-square w-full h-1/2 sm:w-1/2 sm:h-full sm:px-14 sm:py-20',
-                        alignmentClasses[textAlignment!],
-                    )}>
-                        {children}
-                    </div>
-                </div>
-            </div>
-            <div className='pb-[var(--margin-bottom)]'/>
-        </section>
+      <Section
+        ref={ref}
+        {...rest}
+        containerClassName="flex flex-col md:flex-row px-0 sm:px-0"
+      >
+        {children}
+      </Section>
     );
-});
+  },
+);
 
 export default ImageWithText;
 
 export let schema: HydrogenComponentSchema = {
-    type: 'image-with-text',
-    title: 'Image with text',
-    toolbar: ['general-settings', ['duplicate', 'delete']],
-    inspector: [
-        {
-            group: 'Image',
-            inputs: [
-                {
-                    type: 'image',
-                    name: 'backgroundImage',
-                    label: 'Background image',
-                },
-                {
-                    type: 'toggle-group',
-                    label: 'Image alignment',
-                    name: 'imageAlignment',
-                    configs: {
-                        options: [
-                            { label: 'Left', value: 'left' },
-                            { label: 'Right', value: 'right' },
-                        ],
-                    },
-                    defaultValue: 'left',
-                },
-                {
-                    type: 'toggle-group',
-                    label: 'Text alignment',
-                    name: 'textAlignment',
-                    configs: {
-                        options: [
-                            { label: 'Left', value: 'left' },
-                            { label: 'Center', value: 'center'},
-                            { label: 'Right', value: 'right' },
-                        ],
-                    },
-                    defaultValue: 'center',
-                },
-                {
-                    type: 'color',
-                    name: 'backgroundColor',
-                    label: 'Background color',
-                    defaultValue: '#f8f8f0',
-                },
-                {
-                    type: 'range',
-                    name: 'sectionHeight',
-                    label: 'Section height',
-                    defaultValue: 450,
-                    configs: {
-                        min: 400,
-                        max: 700,
-                        step: 10,
-                        unit: 'px',
-                    },
-                },
-                {
-                    type: 'range',
-                    name: 'marginTop',
-                    label: 'Margin top',
-                    defaultValue: 0,
-                    configs: {
-                        min: 0,
-                        max: 100,
-                        step: 1,
-                        unit: 'px',
-                    },
-                },
-                {
-                    type: 'range',
-                    name: 'marginBottom',
-                    label: 'Margin bottom',
-                    defaultValue: 0,
-                    configs: {
-                        min: 0,
-                        max: 100,
-                        step: 1,
-                        unit: 'px',
-                    },
-                },
-                {
-                    type: 'switch',
-                    name: 'displayMaxWidthContent',
-                    label: 'Display max width content',
-                    defaultValue: false,
-                }
-            ],
-        },
-    ],
-    childTypes: ['subheading', 'heading', 'description', 'button'],
-    presets: {
-        children: [
-            {
-                type: 'subheading',
-                content: 'Subheading',
-            },
-            {
-                type: 'heading',
-                content: 'Heading',
-            },
-            {
-                type: 'description',
-                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.",
-            },
-            {
-                type: 'button',
-                content: 'Shop now',
-            }
-        ],
+  type: "image-with-text",
+  title: "Image with text",
+  inspector: [
+    {
+      group: "Layout",
+      inputs: layoutInputs.filter(({ name }) => name !== "gap"),
     },
-};
\ No newline at end of file
+    { group: "Background", inputs: backgroundInputs },
+  ],
+  childTypes: ["image-with-text--content", "image-with-text--image"],
+  presets: {
+    verticalPadding: "none",
+    children: [
+      { type: "image-with-text--image" },
+      { type: "image-with-text--content" },
+    ],
+  },
+};
diff --git a/app/sections/newsletter/index.tsx b/app/sections/newsletter/index.tsx
index 6e6a685..d650d3a 100644
--- a/app/sections/newsletter/index.tsx
+++ b/app/sections/newsletter/index.tsx
@@ -1,93 +1,24 @@
 import type {
-    HydrogenComponentProps,
     HydrogenComponentSchema,
-    WeaverseImage,
 } from '@weaverse/hydrogen';
-import { forwardRef, CSSProperties, useRef } from 'react';
-import { IconNewsletter } from '~/components/Icon';
-import { Image } from '@shopify/hydrogen';
-import { Input } from '@/components/input';
-import { Button } from "@/components/button";
-import { useFetcher } from '@remix-run/react';
-import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { Section, sectionInspector, SectionProps } from '../atoms/Section';
 
-type VariantStyle = "primary" | "outline" | "secondary" | "link" | "decor" | null | undefined;
-interface NewsletterProps extends HydrogenComponentProps {
-    verticalPadding: number;
-    sectionHeight: number;
-    backgroundColor: string;
-    showIconImage: boolean;
-    iconImage: WeaverseImage;
-    iconImageSize: number;
-    placeholder: string;
-    buttonLabel: string;
-    buttonStyle: VariantStyle;
-}
+type NewsletterProps = SectionProps;
 
 const Newsletter = forwardRef<
     HTMLElement,
     NewsletterProps
 >((props, ref) => {
     let {
-        verticalPadding,
-        sectionHeight,
-        backgroundColor,
-        showIconImage,
-        iconImage,
-        iconImageSize,
-        placeholder,
-        buttonLabel,
-        buttonStyle,
         children,
         ...rest
     } = props;
-    let fetcher = useFetcher<any>()
-    const emailInputRef = useRef<HTMLInputElement>(null);
-    let isError = fetcher.state === 'idle' && fetcher.data?.errors
-    let isSuccess = fetcher.state === 'idle' && fetcher.data?.customer
-    let alertMessage = '';
-    let alertMessageClass = '';
-    if (isError && fetcher.data?.errors) {
-        const firstError = fetcher.data?.errors[0];
-        alertMessage = firstError.code === "TAKEN" ? firstError.message : "Some things went wrong!";
-        alertMessageClass = 'text-red-700';
-    } else if (isSuccess && fetcher.data?.customer && emailInputRef.current) {
-        alertMessage = "Subscribe successfully!";
-        emailInputRef.current.value = '';
-        alertMessageClass = 'text-green-700';
-    }
-    let sectionStyle: CSSProperties = {
-        height: `${sectionHeight}px`,
-        backgroundColor: backgroundColor,
-        '--image-size': `${iconImageSize}px`,
-        '--max-width-content': '600px',
-        '--vertical-padding': `${verticalPadding}px`,
-    } as CSSProperties;
 
     return (
-        <section ref={ref} {...rest} className="w-full flex justify-center items-center" style={sectionStyle}>
-            <div className="z-10 w-[var(--max-width-content)] py-[var(--vertical-padding)] sm-max:w-5/6 h-full flex flex-col justify-center items-center text-center gap-5">
-                {showIconImage && <div className='flex justify-center items-center'>
-                    {iconImage ? (<Image
-                        data={iconImage}
-                        className="!w-[var(--image-size)] !aspect-square object-cover" />) : (<IconNewsletter viewBox='0 0 65 64' className='!w-16 !h-16' />)}
-
-                </div>}
-                {children}
-                <fetcher.Form method="POST" action="/api/customer" className="flex gap-2 justify-center items-center w-full">
-                    <Input
-                        className="bg-transparent w-2/3"
-                        type="email"
-                        name="email"
-                        placeholder={placeholder}
-                        ref={emailInputRef}
-                        required
-                    />
-                    <Button loading={fetcher.state === 'submitting'} variant={buttonStyle} type="submit">{buttonLabel}</Button>
-                </fetcher.Form>
-                {alertMessage && <p className={clsx("!mt-1 text-xs", alertMessageClass)}>{alertMessage}</p>}
-            </div>
-        </section>
+        <Section ref={ref} {...rest} >
+            {children}
+        </Section>
     );
 });
 
@@ -97,101 +28,13 @@ export let schema: HydrogenComponentSchema = {
     type: 'newsletter',
     title: 'Newsletter',
     toolbar: ['general-settings', ['duplicate', 'delete']],
-    inspector: [
-        {
-            group: 'Newsletter',
-            inputs: [
-                {
-                    type: 'range',
-                    name: 'verticalPadding',
-                    label: 'Vertical padding',
-                    defaultValue: 20,
-                    configs: {
-                        min: 10,
-                        max: 100,
-                        step: 1,
-                    },
-                },
-                {
-                    type: 'range',
-                    name: 'sectionHeight',
-                    label: 'Section height',
-                    defaultValue: 450,
-                    configs: {
-                        min: 350,
-                        max: 700,
-                        step: 10,
-                    },
-                },
-                {
-                    type: 'color',
-                    name: 'backgroundColor',
-                    label: 'Background color',
-                    defaultValue: '#E5E7D4',
-                },
-                {
-                    type: 'text',
-                    name: 'placeholder',
-                    label: 'Placeholder',
-                    defaultValue: 'Enter your email',
-                }
-            ],
-        },
-        {
-            group: 'Icon',
-            inputs: [
-                {
-                    type: 'image',
-                    name: 'iconImage',
-                    label: 'Icon image',
-                },
-                {
-                    type: 'range',
-                    name: 'iconImageSize',
-                    label: 'Icon image size',
-                    defaultValue: 50,
-                    configs: {
-                        min: 20,
-                        max: 100,
-                        step: 1,
-                    },
-                },
-                {
-                    type: 'switch',
-                    name: 'showIconImage',
-                    label: 'Show icon image',
-                    defaultValue: true,
-                }
-            ],
-        },
-        {
-            group: 'Button',
-            inputs: [
-                {
-                    type: 'text',
-                    name: 'buttonLabel',
-                    label: 'Button label',
-                    defaultValue: 'Send',
-                },
-                {
-                    type: 'toggle-group',
-                    label: 'Button style',
-                    name: 'buttonStyle',
-                    configs: {
-                        options: [
-                            { label: 'Primary', value: 'primary' },
-                            { label: 'Outline', value: 'outline' },
-                            { label: 'Secondary', value: 'secondary' },
-                        ],
-                    },
-                    defaultValue: 'primary',
-                },
-            ],
-        },
-    ],
-    childTypes: ['heading', 'description'],
+    inspector: sectionInspector,
+    childTypes: ['newsletter-icon', 'heading', 'description', 'newsletter-input'],
     presets: {
         children: [
+            {
+                type: 'newsletter-icon',
+            },
             {
                 type: 'heading',
                 content: 'Sign up for the updates',
@@ -200,6 +43,9 @@ export let schema: HydrogenComponentSchema = {
                 type: 'description',
                 content: 'Get 15% off your first order',
             },
+            {
+                type: 'newsletter-input',
+            }
         ],
     },
 };
\ No newline at end of file
diff --git a/app/sections/newsletter/input-email.tsx b/app/sections/newsletter/input-email.tsx
new file mode 100644
index 0000000..50c1329
--- /dev/null
+++ b/app/sections/newsletter/input-email.tsx
@@ -0,0 +1,125 @@
+import {Button} from '@/components/button';
+import {Input} from '@/components/input';
+import {useFetcher} from '@remix-run/react';
+import type {
+  HydrogenComponentProps,
+  HydrogenComponentSchema,
+} from '@weaverse/hydrogen';
+import clsx from 'clsx';
+import {CSSProperties, forwardRef, useRef} from 'react';
+
+type VariantStyle =
+  | 'primary'
+  | 'outline'
+  | 'secondary'
+  | 'link'
+  | 'decor'
+  | null
+  | undefined;
+interface InputEmailProps extends HydrogenComponentProps {
+  placeholder: string;
+  buttonLabel: string;
+  buttonStyle: VariantStyle;
+}
+
+const NewsletterInput = forwardRef<HTMLDivElement, InputEmailProps>((props, ref) => {
+  let {placeholder, buttonLabel, buttonStyle, ...rest} = props;
+  let fetcher = useFetcher<any>();
+  const emailInputRef = useRef<HTMLInputElement>(null);
+  let isError = fetcher.state === 'idle' && fetcher.data?.errors;
+  let isSuccess = fetcher.state === 'idle' && fetcher.data?.customer;
+  let alertMessage = '';
+  let alertMessageClass = '';
+  if (isError && fetcher.data?.errors) {
+    const firstError = fetcher.data?.errors[0];
+    alertMessage =
+      firstError.code === 'TAKEN'
+        ? firstError.message
+        : 'Some things went wrong!';
+    alertMessageClass = 'text-red-700';
+  } else if (isSuccess && fetcher.data?.customer && emailInputRef.current) {
+    alertMessage = 'Subscribe successfully!';
+    emailInputRef.current.value = '';
+    alertMessageClass = 'text-green-700';
+  }
+  let style: CSSProperties = {
+    '--max-width-content': '600px',
+  } as CSSProperties;
+
+  return (
+    <div
+      ref={ref}
+      {...rest}
+      style={style}
+      className="flex h-full flex-col items-center justify-center gap-5 text-center"
+    >
+      <fetcher.Form
+        method="POST"
+        action="/api/customer"
+        className="flex w-[var(--max-width-content)] items-center justify-center gap-2"
+      >
+        <Input
+          className="w-2/3 bg-transparent"
+          type="email"
+          name="email"
+          placeholder={placeholder}
+          ref={emailInputRef}
+          required
+        />
+        <Button
+          loading={fetcher.state === 'submitting'}
+          variant={buttonStyle}
+          type="submit"
+        >
+          {buttonLabel}
+        </Button>
+      </fetcher.Form>
+      {alertMessage && (
+        <p className={clsx('!mt-1 text-xs', alertMessageClass)}>
+          {alertMessage}
+        </p>
+      )}
+    </div>
+  );
+});
+
+export default NewsletterInput;
+
+export let schema: HydrogenComponentSchema = {
+  type: 'newsletter-input',
+  title: 'Input',
+  limit: 1,
+  toolbar: ['general-settings', ['duplicate', 'delete']],
+  inspector: [
+    {
+      group: 'Newsletter',
+      inputs: [
+        {
+          type: 'text',
+          name: 'placeholder',
+          label: 'Placeholder',
+          defaultValue: 'Enter your email',
+        },
+        {
+            type: 'text',
+            name: 'buttonLabel',
+            label: 'Button label',
+            defaultValue: 'Send',
+          },
+          {
+            type: 'toggle-group',
+            label: 'Button style',
+            name: 'buttonStyle',
+            configs: {
+              options: [
+                {label: 'Primary', value: 'primary'},
+                {label: 'Outline', value: 'outline'},
+                {label: 'Secondary', value: 'secondary'},
+              ],
+            },
+            defaultValue: 'primary',
+          },
+      ],
+    },
+  ],
+};
diff --git a/app/sections/newsletter/newsletter-icon.tsx b/app/sections/newsletter/newsletter-icon.tsx
new file mode 100644
index 0000000..025e942
--- /dev/null
+++ b/app/sections/newsletter/newsletter-icon.tsx
@@ -0,0 +1,64 @@
+import {Image} from '@shopify/hydrogen';
+import type {
+  HydrogenComponentProps,
+  HydrogenComponentSchema,
+  WeaverseImage,
+} from '@weaverse/hydrogen';
+import {IconNewsletter} from '~/components/Icon';
+import {CSSProperties, forwardRef} from 'react';
+
+interface NewsletterIconProps extends HydrogenComponentProps {
+  iconImage: WeaverseImage;
+  iconImageSize: number;
+}
+
+const NewsletterIcon = forwardRef<HTMLDivElement, NewsletterIconProps>((props, ref) => {
+  let {iconImage, iconImageSize, ...rest} = props;
+  let style: CSSProperties = {
+    '--image-size': `${iconImageSize}px`,
+  } as CSSProperties;
+
+  return (
+    <div ref={ref} {...rest} style={style} className="flex items-center justify-center">
+      {iconImage ? (
+        <Image
+          data={iconImage}
+          className="!aspect-square !w-[var(--image-size)] object-cover"
+        />
+      ) : (
+        <IconNewsletter viewBox="0 0 65 64" className="!h-16 !w-16" />
+      )}
+    </div>
+  );
+});
+
+export default NewsletterIcon;
+
+export let schema: HydrogenComponentSchema = {
+  type: 'newsletter-icon',
+  title: 'Icon',
+  toolbar: ['general-settings', ['duplicate', 'delete']],
+  inspector: [
+    {
+      group: 'Icon',
+      inputs: [
+        {
+          type: 'image',
+          name: 'iconImage',
+          label: 'Icon image',
+        },
+        {
+          type: 'range',
+          name: 'iconImageSize',
+          label: 'Icon image size',
+          defaultValue: 50,
+          configs: {
+            min: 20,
+            max: 100,
+            step: 1,
+          },
+        },
+      ],
+    },
+  ],
+};
diff --git a/app/sections/product-placement/index.tsx b/app/sections/product-placement/index.tsx
index 3d589c0..729421a 100644
--- a/app/sections/product-placement/index.tsx
+++ b/app/sections/product-placement/index.tsx
@@ -1,96 +1,16 @@
-import type {
-  HydrogenComponentProps,
-  HydrogenComponentSchema,
-} from '@weaverse/hydrogen';
-import {Grid} from '~/components/Grid';
-import clsx from 'clsx';
-import {CSSProperties, forwardRef} from 'react';
-import {Swiper, SwiperSlide} from 'swiper/react';
-import 'swiper/swiper-bundle.css';
-import 'swiper/css/pagination';
-import {Pagination} from 'swiper/modules';
+import type {HydrogenComponentSchema} from '@weaverse/hydrogen';
+import {forwardRef} from 'react';
+import {Section, sectionInspector, SectionProps} from '../atoms/Section';
 
-type Alignment = 'left' | 'center' | 'right';
-interface ProductPlacementProps extends HydrogenComponentProps {
-  textColor: string;
-  heading: string;
-  contentAlignment: Alignment;
-  productsPerRow: number;
-  thumbnailRatio: string;
-  itemsSpacing: number;
-  topPadding: number;
-  bottomPadding: number;
-}
-
-let alignmentClasses: Record<Alignment, string> = {
-  left: 'text-left',
-  center: 'text-center',
-  right: 'text-right',
-};
+type ProductPlacementProps = SectionProps;
 
 const ProductPlacement = forwardRef<HTMLElement, ProductPlacementProps>(
-  (props, sectionRef) => {
-    let {
-      textColor,
-      heading,
-      contentAlignment,
-      productsPerRow,
-      thumbnailRatio,
-      itemsSpacing,
-      topPadding,
-      bottomPadding,
-      children,
-      ...rest
-    } = props;
-    let contentStyle: CSSProperties = {
-      '--top-padding': `${topPadding}px`,
-      '--bottom-padding': `${bottomPadding}px`,
-      '--text-color': textColor,
-      '--item-thumbs-ratio': thumbnailRatio,
-      '--items-spacing': `${itemsSpacing}px`,
-      '--swiper-theme-color': '#3D490B',
-      '--swiper-pagination-bullet-width': '12px',
-      '--swiper-pagination-bullet-height': '2px',
-      '--swiper-pagination-bullet-border-radius': '2px',
-    } as CSSProperties;
+  (props, ref) => {
+    let {children, ...rest} = props;
     return (
-      <section
-        ref={sectionRef}
-        {...rest}
-        style={contentStyle}
-        className={clsx(
-          'w-full bg-secondary',
-          alignmentClasses[contentAlignment],
-        )}
-      >
-        <div className="flex flex-col gap-5 px-5 pb-[var(--bottom-padding)] pt-[var(--top-padding)] md:px-8 lg:px-10">
-          <h2 className="font-medium text-[var(--text-color)]">{heading}</h2>
-          <Grid
-            items={productsPerRow}
-            data-test="collection-grid"
-            className=" hidden w-full !gap-[var(--items-spacing)] sm:grid"
-          >
-            {children}
-          </Grid>
-          <Swiper
-            loop={true}
-            slidesPerView={1}
-            spaceBetween={100}
-            pagination={{
-              clickable: true,
-            }}
-            modules={[Pagination]}
-            className="w-full sm:hidden"
-          >
-            {children?.map((child, i) => (
-              <SwiperSlide key={i}>
-                {child}
-                <div className="cursor-pointer py-8"></div>
-              </SwiperSlide>
-            ))}
-          </Swiper>
-        </div>
-      </section>
+      <Section ref={ref} {...rest}>
+        {children}
+      </Section>
     );
   },
 );
@@ -100,109 +20,21 @@ export default ProductPlacement;
 export const schema: HydrogenComponentSchema = {
   type: 'product-placement',
   title: 'Product placement',
-  inspector: [
-    {
-      group: 'Product',
-      inputs: [
-        {
-          type: 'color',
-          name: 'textColor',
-          label: 'Text color',
-        },
-        {
-          type: 'text',
-          name: 'heading',
-          label: 'Heading',
-          defaultValue: 'Shop the look',
-        },
-        {
-          type: 'toggle-group',
-          label: 'Content alignment',
-          name: 'contentAlignment',
-          configs: {
-            options: [
-              {label: 'Left', value: 'left'},
-              {label: 'Center', value: 'center'},
-              {label: 'Right', value: 'right'},
-            ],
-          },
-          defaultValue: 'left',
-        },
-        {
-          type: 'range',
-          name: 'productsPerRow',
-          label: 'Products per row',
-          defaultValue: 3,
-          configs: {
-            min: 1,
-            max: 4,
-            step: 1,
-          },
-        },
-        {
-          type: 'select',
-          label: 'Thumbnail ratio',
-          name: 'thumbnailRatio',
-          configs: {
-            options: [
-              {value: '1/1', label: '1/1'},
-              {value: '3/4', label: '3/4'},
-              {value: '4/3', label: '4/3'},
-              {value: '6/4', label: '6/4'},
-            ],
-          },
-          defaultValue: '1/1',
-        },
-        {
-          type: 'range',
-          name: 'itemsSpacing',
-          label: 'Items spacing',
-          defaultValue: 24,
-          configs: {
-            min: 0,
-            max: 50,
-            step: 1,
-          },
-        },
-        {
-          type: 'range',
-          name: 'topPadding',
-          label: 'Top padding',
-          defaultValue: 40,
-          configs: {
-            min: 0,
-            max: 100,
-            step: 1,
-          },
-        },
-        {
-          type: 'range',
-          name: 'bottomPadding',
-          label: 'Bottom padding',
-          defaultValue: 40,
-          configs: {
-            min: 0,
-            max: 100,
-            step: 1,
-          },
-        },
-      ],
-    },
+  inspector: sectionInspector,
+  childTypes: [
+    'subheading',
+    'heading',
+    'description',
+    'product-placement--items',
   ],
-  childTypes: ['product-placement--item'],
   presets: {
     children: [
       {
-        type: 'product-placement--item',
-      },
-      {
-        type: 'product-placement--item',
-      },
-      {
-        type: 'product-placement--item',
+        type: 'heading',
+        content: 'Shop the look',
       },
       {
-        type: 'product-placement--item',
+        type: 'product-placement--items',
       },
     ],
   },
diff --git a/app/sections/product-placement/items.tsx b/app/sections/product-placement/items.tsx
new file mode 100644
index 0000000..458f4e2
--- /dev/null
+++ b/app/sections/product-placement/items.tsx
@@ -0,0 +1,140 @@
+import type {
+  HydrogenComponentProps,
+  HydrogenComponentSchema,
+} from '@weaverse/hydrogen';
+import {Grid} from '~/components/Grid';
+import clsx from 'clsx';
+import {CSSProperties, forwardRef} from 'react';
+import {Swiper, SwiperSlide} from 'swiper/react';
+import 'swiper/swiper-bundle.css';
+import 'swiper/css/pagination';
+import {Pagination} from 'swiper/modules';
+
+interface ProductPlacementItemsProps extends HydrogenComponentProps {
+  productsPerRow: number;
+  thumbnailRatio: string;
+  itemsSpacing: number;
+}
+
+const ProductPlacementItems = forwardRef<
+  HTMLDivElement,
+  ProductPlacementItemsProps
+>((props, ref) => {
+  let {
+    productsPerRow,
+    thumbnailRatio,
+    itemsSpacing,
+    children,
+    ...rest
+  } = props;
+  let contentStyle: CSSProperties = {
+    '--item-thumbs-ratio': thumbnailRatio,
+    '--items-spacing': `${itemsSpacing}px`,
+    '--swiper-theme-color': '#3D490B',
+    '--swiper-pagination-bullet-width': '12px',
+    '--swiper-pagination-bullet-height': '2px',
+    '--swiper-pagination-bullet-border-radius': '2px',
+  } as CSSProperties;
+  return (
+    <div
+      ref={ref}
+      {...rest}
+      style={contentStyle}
+      className="w-full bg-inherit"
+    >
+      <div className="flex flex-col gap-5">
+        <Grid
+          items={productsPerRow}
+          data-test="collection-grid"
+          className="hidden w-full !gap-[var(--items-spacing)] sm:grid"
+        >
+          {children}
+        </Grid>
+        <Swiper
+          loop={true}
+          slidesPerView={1}
+          spaceBetween={100}
+          pagination={{
+            clickable: true,
+          }}
+          modules={[Pagination]}
+          className="w-full sm:hidden"
+        >
+          {children?.map((child, i) => (
+            <SwiperSlide key={i}>
+              {child}
+              <div className="cursor-pointer py-8"></div>
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </div>
+    </div>
+  );
+});
+
+export default ProductPlacementItems;
+
+export const schema: HydrogenComponentSchema = {
+  type: 'product-placement--items',
+  title: 'Items',
+  inspector: [
+    {
+      group: 'Product',
+      inputs: [
+        {
+          type: 'range',
+          name: 'productsPerRow',
+          label: 'Products per row',
+          defaultValue: 3,
+          configs: {
+            min: 1,
+            max: 4,
+            step: 1,
+          },
+        },
+        {
+          type: 'select',
+          label: 'Thumbnail ratio',
+          name: 'thumbnailRatio',
+          configs: {
+            options: [
+              {value: '1/1', label: '1/1'},
+              {value: '3/4', label: '3/4'},
+              {value: '4/3', label: '4/3'},
+              {value: '6/4', label: '6/4'},
+            ],
+          },
+          defaultValue: '1/1',
+        },
+        {
+          type: 'range',
+          name: 'itemsSpacing',
+          label: 'Items spacing',
+          defaultValue: 24,
+          configs: {
+            min: 0,
+            max: 50,
+            step: 1,
+          },
+        },
+      ],
+    },
+  ],
+  childTypes: ['product-placement--item'],
+  presets: {
+    children: [
+      {
+        type: 'product-placement--item',
+      },
+      {
+        type: 'product-placement--item',
+      },
+      {
+        type: 'product-placement--item',
+      },
+      {
+        type: 'product-placement--item',
+      },
+    ],
+  },
+};
diff --git a/app/sections/slideshowbanner/arrows.tsx b/app/sections/slideshowbanner/arrows.tsx
new file mode 100644
index 0000000..ddaedba
--- /dev/null
+++ b/app/sections/slideshowbanner/arrows.tsx
@@ -0,0 +1,127 @@
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
+import { useState } from "react";
+import { useSwiper } from "swiper/react";
+import { IconArrowLeft, IconArrowRight, IconCaret } from "~/components/Icon";
+
+let variants = cva(
+  [
+    "hidden md:block z-10",
+    "absolute top-1/2 -translate-y-1/2 z-1",
+    "p-2 text-center cursor-pointer",
+    "border border-transparent",
+    "transition-all duration-200",
+  ],
+  {
+    variants: {
+      arrowsColor: {
+        light: "text-gray-900 bg-white hover:bg-gray-100",
+        dark: "text-gray-100 bg-gray-900 hover:bg-gray-800",
+      },
+      arrowsShape: {
+        square: "",
+        rounded: "rounded-xl",
+        circle: "rounded-full",
+      },
+      disabled: {
+        true: "opacity-75 cursor-not-allowed",
+        false: "",
+      },
+      showArrowsOnHover: { true: "", false: "" },
+      side: { left: "", right: "" },
+    },
+    compoundVariants: [
+      {
+        showArrowsOnHover: true,
+        side: "left",
+        className: "-left-12 group-hover:left-6",
+      },
+      {
+        showArrowsOnHover: false,
+        side: "left",
+        className: "left-6",
+      },
+      {
+        showArrowsOnHover: true,
+        side: "right",
+        className: "-right-12 group-hover:right-6",
+      },
+      {
+        showArrowsOnHover: false,
+        side: "right",
+        className: "right-6",
+      },
+    ],
+  },
+);
+
+export interface SlideshowArrowsProps extends VariantProps<typeof variants> {
+  arrowsIcon: "caret" | "arrow";
+  iconSize: number;
+  showArrowsOnHover: boolean;
+}
+
+export function Arrows(props: SlideshowArrowsProps) {
+  let { arrowsIcon, iconSize, arrowsColor, showArrowsOnHover, arrowsShape } =
+    props;
+  let [canNext, setCanNext] = useState(true);
+  let [canPrev, setCanPrev] = useState(true);
+  let swiper = useSwiper();
+
+  if (!swiper.params.loop) {
+    swiper.on("init", ({ activeIndex, slides }) => {
+      setCanNext(activeIndex < slides.length - 1);
+      setCanPrev(activeIndex > 0);
+    });
+    swiper.on("activeIndexChange", ({ activeIndex, slides }) => {
+      setCanNext(activeIndex < slides.length - 1);
+      setCanPrev(activeIndex > 0);
+    });
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        className={clsx(
+          "slideshow-arrow-prev roude",
+          variants({
+            arrowsColor,
+            arrowsShape,
+            showArrowsOnHover,
+            disabled: !canPrev,
+            side: "left",
+          }),
+        )}
+        disabled={!canPrev}
+      >
+        {arrowsIcon === "caret" ? (
+          <IconCaret direction="left" style={{ width: iconSize, height: iconSize }} />
+        ) : (
+          <IconArrowLeft style={{ width: iconSize, height: iconSize }} />
+        )}
+      </button>
+      <button
+        type="button"
+        className={clsx(
+          "slideshow-arrow-next",
+          variants({
+            arrowsColor,
+            arrowsShape,
+            showArrowsOnHover,
+            disabled: !canNext,
+            side: "right",
+          }),
+        )}
+        disabled={!canNext}
+      >
+        {arrowsIcon === "caret" ? (
+          <IconCaret direction="right" style={{ width: iconSize, height: iconSize }} />
+        ) : (
+          <IconArrowRight style={{ width: iconSize, height: iconSize }} />
+        )}
+      </button>
+    </>
+  );
+}
diff --git a/app/sections/slideshowbanner/dots.tsx b/app/sections/slideshowbanner/dots.tsx
new file mode 100644
index 0000000..7bac701
--- /dev/null
+++ b/app/sections/slideshowbanner/dots.tsx
@@ -0,0 +1,39 @@
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
+
+export interface SlideshowDotsProps extends VariantProps<typeof variants> {
+  className?: string;
+}
+
+let variants = cva(
+  [
+    "slideshow-dots",
+    "absolute z-10 flex justify-center items-center px-2.5 gap-4",
+  ],
+  {
+    variants: {
+      dotsPosition: {
+        top: "left-0 right-0 top-10",
+        bottom: "left-0 right-0 bottom-10",
+        left: "top-0 bottom-0 flex-col left-5",
+        right: "top-0 bottom-0 flex-col right-5",
+      },
+      dotsColor: {
+        light: "[&_.dot]:bg-white [&_.active]:!outline-white",
+        dark: "[&_.dot]:bg-black [&_.active]:!outline-black",
+      },
+    },
+    defaultVariants: {
+      dotsPosition: "bottom",
+      dotsColor: "light",
+    },
+  },
+);
+
+export function Dots(props: SlideshowDotsProps) {
+  let { className, dotsPosition, dotsColor } = props;
+  return (
+    <div className={clsx(variants({ dotsPosition, dotsColor }), className)} />
+  );
+}
diff --git a/app/sections/slideshowbanner/index.tsx b/app/sections/slideshowbanner/index.tsx
index 7ab2174..96659b2 100644
--- a/app/sections/slideshowbanner/index.tsx
+++ b/app/sections/slideshowbanner/index.tsx
@@ -1,104 +1,364 @@
-import type {
-  HydrogenComponentProps,
-  HydrogenComponentSchema,
-} from "@weaverse/hydrogen";
-import { CSSProperties, forwardRef } from "react";
-import { Swiper, SwiperSlide } from 'swiper/react';
-import 'swiper/swiper-bundle.css';
-import 'swiper/css/pagination';
-import { Pagination } from 'swiper/modules';
-import { EffectFade } from 'swiper/modules';
-import 'swiper/css/effect-fade';
+import {
+  IMAGES_PLACEHOLDERS,
+  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 {Autoplay, EffectFade, Navigation, Pagination} from 'swiper/modules';
+import {Swiper, SwiperSlide} from 'swiper/react';
+import type {SlideshowArrowsProps} from './arrows';
+import {Arrows} from './arrows';
+import type {SlideshowDotsProps} from './dots';
+import {Dots} from './dots';
 
-interface SlideShowBannerProps extends HydrogenComponentProps {
+let variants = cva('group [&_.swiper]:h-full', {
+  variants: {
+    height: {
+      small: 'h-[40vh] lg:h-[50vh]',
+      medium: 'h-[50vh] lg:h-[60vh]',
+      large: 'h-[70vh] lg:h-[80vh]',
+      full: 'h-screen',
+    },
+  },
+  defaultVariants: {
+    height: 'large',
+  },
+});
+
+export interface SlideshowProps
+  extends VariantProps<typeof variants>,
+    SlideshowArrowsProps,
+    SlideshowDotsProps,
+    HydrogenComponentProps {
+  showArrows: boolean;
+  showDots: boolean;
+  dotsPosition: 'top' | 'bottom' | 'left' | 'right';
+  dotsColor: 'light' | 'dark';
+  loop: boolean;
+  autoRotate: boolean;
+  changeSlidesEvery: number;
 }
 
-let SlideShowBanner = forwardRef<HTMLElement, SlideShowBannerProps>((props, ref) => {
+let Slideshow = forwardRef<HTMLDivElement, SlideshowProps>((props, ref) => {
   let {
-    children,
+    height,
+    showArrows,
+    arrowsIcon,
+    iconSize,
+    showArrowsOnHover,
+    arrowsColor,
+    arrowsShape,
+    showDots = true,
+    dotsPosition,
+    dotsColor,
+    loop,
+    autoRotate,
+    changeSlidesEvery,
+    children = [],
     ...rest
   } = props;
 
-  let sectionStyle: CSSProperties = {
-    '--swiper-theme-color': '#3D490B',
-    '--swiper-pagination-bullet-width': '12px',
-    '--swiper-pagination-bullet-height': '2px',
-    '--swiper-pagination-bullet-border-radius': '2px',
-  } as CSSProperties;
+  let id = rest['data-wv-id'];
+  let key = `slideshow-${id}-${loop}-${autoRotate}-${changeSlidesEvery}`;
 
   return (
-    <section
-      ref={ref}
-      {...rest}
-      style={sectionStyle}
-    >
+    <section key={key} ref={ref} {...rest} className={variants({height})}>
       <Swiper
-        loop={true}
-        slidesPerView={1}
-        spaceBetween={100}
-        effect={'fade'}
-        fadeEffect={{
-          crossFade: true,
-        }}
-        pagination={{
-          clickable: true,
-        }}
-        modules={[Pagination, EffectFade]}
-        className='w-full h-full mySwiper'
+        effect="fade"
+        loop={loop}
+        autoplay={autoRotate ? {delay: changeSlidesEvery * 1000} : false}
+        navigation={
+          showArrows && {
+            nextEl: '.slideshow-arrow-next',
+            prevEl: '.slideshow-arrow-prev',
+          }
+        }
+        pagination={
+          showDots && {
+            el: '.slideshow-dots',
+            clickable: true,
+            bulletClass: clsx(
+              'dot rounded-full cursor-pointer',
+              'w-2.5 h-2.5 p-0',
+              'outline outline-offset-2 outline-2 outline-transparent',
+              'transition-all duration-200',
+            ),
+            bulletActiveClass: 'active',
+          }
+        }
+        modules={[
+          EffectFade,
+          autoRotate ? Autoplay : null,
+          showArrows ? Navigation : null,
+          showDots ? Pagination : null,
+        ].filter(Boolean)}
       >
-        {children?.map((child, index) => (
-          <SwiperSlide key={index}>
+        {children.map((child, idx) => (
+          <SwiperSlide key={idx} className="bg-white">
             {child}
           </SwiperSlide>
         ))}
+        {showArrows && <Arrows {...props} />}
+        {showDots && <Dots {...props} />}
       </Swiper>
     </section>
   );
 });
 
-export default SlideShowBanner;
+export default Slideshow;
 
 export let schema: HydrogenComponentSchema = {
-  type: "Slide-show-banner",
-  title: "Slide show banner",
-  toolbar: ["general-settings", ["duplicate", "delete"]],
+  title: 'Slide show banner',
+  type: 'slide-show-banner',
+  childTypes: ['slideshowbanner--slide'],
   inspector: [
     {
-      group: "Slideshow",
+      group: 'Slideshow',
       inputs: [
         {
-          type: "range",
-          name: "sectionHeightDesktop",
-          label: "Section height desktop",
-          defaultValue: 450,
+          type: 'select',
+          name: 'height',
+          label: 'Section height',
           configs: {
-            min: 400,
-            max: 700,
-            step: 10,
-            unit: "px",
+            options: [
+              {value: 'small', label: 'Small'},
+              {value: 'medium', label: 'Medium'},
+              {value: 'large', label: 'Large'},
+              {value: 'full', label: 'Fullscreen'},
+            ],
           },
+          defaultValue: 'large',
+        },
+        {
+          type: 'switch',
+          label: 'Auto-rotate slides',
+          name: 'autoRotate',
+          defaultValue: true,
         },
         {
-          type: "range",
-          name: "sectionHeightMobile",
-          label: "Section height mobile",
-          defaultValue: 350,
+          type: 'range',
+          label: 'Change slides every',
+          name: 'changeSlidesEvery',
           configs: {
-            min: 300,
-            max: 600,
-            step: 10,
-            unit: "px",
+            min: 3,
+            max: 9,
+            step: 1,
+            unit: 's',
           },
+          defaultValue: 5,
+          condition: 'autoRotate.eq.true',
+          helpText: 'Auto-rotate is disabled inside Weaverse Studio.',
+        },
+        {
+          type: 'switch',
+          label: 'Loop',
+          name: 'loop',
+          defaultValue: true,
+        },
+      ],
+    },
+    {
+      group: 'Navigation & Controls',
+      inputs: [
+        {
+          type: 'heading',
+          label: 'Arrows',
+        },
+        {
+          type: 'switch',
+          label: 'Show arrows',
+          name: 'showArrows',
+          defaultValue: false,
+        },
+        {
+          type: 'select',
+          label: 'Arrow icon',
+          name: 'arrowsIcon',
+          configs: {
+            options: [
+              {value: 'caret', label: 'Caret'},
+              {value: 'arrow', label: 'Arrow'},
+            ],
+          },
+          defaultValue: 'arrow',
+          condition: 'showArrows.eq.true',
+        },
+        {
+          type: 'range',
+          label: 'Icon size',
+          name: 'iconSize',
+          configs: {
+            min: 16,
+            max: 40,
+            step: 2,
+          },
+          defaultValue: 20,
+          condition: 'showArrows.eq.true',
+        },
+        {
+          type: 'switch',
+          label: 'Show arrows on hover',
+          name: 'showArrowsOnHover',
+          defaultValue: true,
+          condition: 'showArrows.eq.true',
+        },
+        {
+          type: 'select',
+          label: 'Arrows color',
+          name: 'arrowsColor',
+          configs: {
+            options: [
+              {value: 'light', label: 'Light'},
+              {value: 'dark', label: 'Dark'},
+            ],
+          },
+          defaultValue: 'light',
+          condition: 'showArrows.eq.true',
+        },
+        {
+          type: 'toggle-group',
+          label: 'Arrows shape',
+          name: 'arrowsShape',
+          configs: {
+            options: [
+              {value: 'rounded', label: 'Rounded', icon: 'squircle'},
+              {value: 'circle', label: 'Circle', icon: 'circle'},
+              {value: 'square', label: 'Square', icon: 'square'},
+            ],
+          },
+          defaultValue: 'rounded',
+          condition: 'showArrows.eq.true',
+        },
+
+        {
+          type: 'heading',
+          label: 'Dots',
+        },
+        {
+          type: 'switch',
+          label: 'Show dots',
+          name: 'showDots',
+          defaultValue: true,
+        },
+        {
+          type: 'select',
+          label: 'Dots position',
+          name: 'dotsPosition',
+          configs: {
+            options: [
+              {value: 'top', label: 'Top'},
+              {value: 'bottom', label: 'Bottom'},
+              {value: 'left', label: 'Left'},
+              {value: 'right', label: 'Right'},
+            ],
+          },
+          defaultValue: 'bottom',
+          condition: 'showDots.eq.true',
+        },
+        {
+          type: 'select',
+          label: 'Dots color',
+          name: 'dotsColor',
+          configs: {
+            options: [
+              {value: 'light', label: 'Light'},
+              {value: 'dark', label: 'Dark'},
+            ],
+          },
+          defaultValue: 'light',
+          condition: 'showDots.eq.true',
         },
       ],
     },
   ],
-  childTypes: ["slide-show-banner--item"],
   presets: {
     children: [
       {
-        type: "slide-show-banner--item",
-      }
+        type: 'slideshowbanner--slide',
+        verticalPadding: 'large',
+        contentPosition: 'center center',
+        backgroundImage: IMAGES_PLACEHOLDERS.banner_1,
+        backgroundFit: 'cover',
+        enableOverlay: true,
+        overlayOpacity: 50,
+        children: [
+          {
+            type: 'subheading',
+            content: 'Limited time offer',
+            color: '#fff',
+          },
+          {
+            type: 'heading',
+            content: 'Spring / Summer 2024 Sale',
+            color: '#fff',
+            size: 'scale',
+            minSize: 16,
+            maxSize: 56,
+          },
+          {
+            type: 'paragraph',
+            content:
+              "It's hard to be nice if you don't feel comfortable. All the ready-to-wear and accessories you need for your next summer vacation is now up to 50% off.",
+            color: '#fff',
+          },
+          {
+            type: 'button',
+            content: 'Shop collection',
+            variant: 'primary',
+            buttonStyle: 'custom',
+            backgroundColor: '#00000000',
+            textColor: '#fff',
+            borderColor: '#fff',
+            backgroundColorHover: '#fff',
+            textColorHover: '#000',
+            borderColorHover: '#fff',
+          },
+        ],
+      },
+      {
+        type: 'slideshowbanner--slide',
+        verticalPadding: 'large',
+        contentPosition: 'center center',
+        backgroundImage: IMAGES_PLACEHOLDERS.banner_2,
+        backgroundFit: 'cover',
+        enableOverlay: true,
+        overlayOpacity: 50,
+        children: [
+          {
+            type: 'subheading',
+            content: 'Exclusive offer',
+            color: '#fff',
+          },
+          {
+            type: 'heading',
+            content: 'Autumn / Winter 2024 Sale',
+            color: '#fff',
+            size: 'scale',
+            minSize: 16,
+            maxSize: 56,
+          },
+          {
+            type: 'paragraph',
+            content:
+              'Stay warm and stylish with our winter collection. All the ready-to-wear and accessories you need for your next winter vacation is now up to 60% off.',
+            color: '#fff',
+          },
+          {
+            type: 'button',
+            content: 'Shop collection',
+            buttonStyle: 'custom',
+            backgroundColor: '#00000000',
+            textColor: '#fff',
+            borderColor: '#fff',
+            backgroundColorHover: '#fff',
+            textColorHover: '#000',
+            borderColorHover: '#fff',
+          },
+        ],
+      },
     ],
   },
 };
diff --git a/app/sections/slideshowbanner/slideitems.tsx b/app/sections/slideshowbanner/slideitems.tsx
index 667f532..cc8ba0b 100644
--- a/app/sections/slideshowbanner/slideitems.tsx
+++ b/app/sections/slideshowbanner/slideitems.tsx
@@ -1,135 +1,176 @@
 import {
   IMAGES_PLACEHOLDERS,
+  type HydrogenComponentProps,
   type HydrogenComponentSchema,
-} from "@weaverse/hydrogen";
-import type { VariantProps } from "class-variance-authority";
-import { cva } from "class-variance-authority";
-import { forwardRef } from "react";
-import { Section, SectionProps, layoutInputs } from "../atoms/Section";
-import { backgroundInputs } from "../atoms/BackgroundImage";
-import { overlayInputs } from "../atoms/Overlay";
-
-export interface SlideShowBannerItemProps extends VariantProps<typeof variants> {}
+} from '@weaverse/hydrogen';
+import type {VariantProps} from 'class-variance-authority';
+import {cva} from 'class-variance-authority';
+import {forwardRef} from 'react';
+import {backgroundInputs} from '../atoms/BackgroundImage';
+import {overlayInputs} from '../atoms/Overlay';
+import {
+  OverlayAndBackground,
+  OverlayAndBackgroundProps,
+} from '../atoms/OverlayAndBackground';
+import {layoutInputs} from '../atoms/Section';
 
-let variants = cva("flex flex-col [&_.paragraph]:mx-[unset]", {
+let variants = cva('w-full h-full flex flex-col [&_.paragraph]:mx-[unset]', {
   variants: {
-    height: {
-      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",
+    width: {
+      full: '',
+      stretch: 'px-3 md:px-10 lg:px-16',
+      fixed: 'max-w-[var(--page-width,1280px)] mx-auto px-3 md:px-10 lg:px-16',
+    },
+    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]',
     },
     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]",
+      '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",
+    contentPosition: 'bottom left',
   },
 });
 
-let SlideShowBannerItem = forwardRef<HTMLElement, SlideShowBannerItemProps & SectionProps>(
-  (props, ref) => {
-    let { children, height, contentPosition, ...rest } = props;
-    return (
-      <Section
-        ref={ref}
-        {...rest}
-        containerClassName={variants({ contentPosition, height })}
-      >
+export interface SlideProps
+  extends VariantProps<typeof variants>,
+    HydrogenComponentProps,
+    OverlayAndBackgroundProps {
+  backgroundColor: string;
+}
+
+let Slide = forwardRef<HTMLDivElement, SlideProps>((props, ref) => {
+  let {
+    contentPosition,
+    width,
+    gap,
+    verticalPadding,
+    backgroundColor,
+    backgroundImage,
+    enableOverlay,
+    overlayOpacity,
+    overlayColor,
+    overlayColorHover,
+    backgroundFit,
+    backgroundPosition,
+    children,
+    ...rest
+  } = props;
+
+  return (
+    <div ref={ref} {...rest} className="h-full w-full">
+      <OverlayAndBackground {...props} />
+      <div className={variants({contentPosition, width, gap, verticalPadding})}>
         {children}
-      </Section>
-    );
-  },
-);
+      </div>
+    </div>
+  );
+});
 
-export default SlideShowBannerItem;
+export default Slide;
 
 export let schema: HydrogenComponentSchema = {
-  type: "slide-show-banner--item",
-  title: "Slide show item",
-  toolbar: ["general-settings", ["duplicate", "delete"]],
+  title: 'Slide',
+  type: 'slideshowbanner--slide',
+  childTypes: ['subheading', 'heading', 'description', 'button'],
   inspector: [
     {
-      group: "Slide",
+      group: 'Slide',
       inputs: [
         {
-          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" },
-            ],
-          },
-        },
-        {
-          type: "position",
-          name: "contentPosition",
-          label: "Content position",
-          defaultValue: "center center",
+          type: 'position',
+          label: 'Content position',
+          name: 'contentPosition',
+          defaultValue: 'center center',
         },
         ...layoutInputs.filter(
-          (inp) => inp.name !== "divider" && inp.name !== "borderRadius",
+          (inp) => inp.name !== 'divider' && inp.name !== 'borderRadius',
         ),
       ],
     },
     {
-      group: "Background",
-      inputs: [
-        ...backgroundInputs.filter(
-          (inp) =>
-            inp.name !== "backgroundFor" && inp.name !== "backgroundColor",
+      group: 'Background',
+      inputs: backgroundInputs.filter((inp) =>
+        ['backgroundImage', 'backgroundFit', 'backgroundPosition'].includes(
+          inp.name,
         ),
-      ],
+      ),
     },
-    { group: "Overlay", inputs: overlayInputs },
+    {group: 'Overlay', inputs: overlayInputs},
   ],
-  childTypes: ["subheading", "heading", "paragraph", "button"],
   presets: {
-    height: "large",
-    contentPosition: "bottom left",
-    backgroundImage: IMAGES_PLACEHOLDERS.backgroundImage,
-    backgroundFit: "cover",
+    verticalPadding: 'large',
+    contentPosition: 'center center',
+    backgroundImage: IMAGES_PLACEHOLDERS.banner_1,
+    backgroundFit: 'cover',
     enableOverlay: true,
-    overlayOpacity: 35,
+    overlayOpacity: 50,
     children: [
       {
-        type: "subheading",
-        content: "Subheading",
-        color: "#ffffff",
+        type: 'subheading',
+        content: 'Subheading',
+        color: '#fff',
       },
       {
-        type: "heading",
-        content: "Hero image with text overlay",
-        color: "#ffffff",
-        size: "scale",
+        type: 'heading',
+        content: 'Slide with text overlay',
+        color: '#fff',
+        size: 'scale',
         minSize: 16,
         maxSize: 56,
       },
       {
-        type: "paragraph",
+        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",
+          'Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.',
+        color: '#fff',
+      },
+      {
+        type: 'button',
+        content: 'Shop all',
+        buttonStyle: 'custom',
+        backgroundColor: '#00000000',
+        textColor: '#fff',
+        borderColor: '#fff',
+        backgroundColorHover: '#fff',
+        textColorHover: '#000',
+        borderColorHover: '#fff',
       },
     ],
   },
-};
\ No newline at end of file
+};
diff --git a/app/sections/testimonials/index.tsx b/app/sections/testimonials/index.tsx
index 82658c4..7fa861c 100644
--- a/app/sections/testimonials/index.tsx
+++ b/app/sections/testimonials/index.tsx
@@ -63,7 +63,7 @@ const Testimonials = forwardRef<HTMLElement, TestimonialsProps>((props, ref) =>
                 )}
             </div>
             <div className={clsx(
-                'lg:container w-full flex gap-3 items-center',
+                'container w-full flex gap-3 items-center',
                 reviewsPositionContent[reviewsPosition],
             )}>
                 <div className={clsx(
diff --git a/app/styles/tailwind.css b/app/styles/tailwind.css
index 533e968..985177f 100644
--- a/app/styles/tailwind.css
+++ b/app/styles/tailwind.css
@@ -99,13 +99,45 @@
     }
 }
 
+.container {
+    max-width: var(--page-width, 1280px);
+}
+
+.custom-scroll::-webkit-scrollbar {
+    width: 6px;
+}
+
+.custom-scroll::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 10px;
+}
+
+.custom-scroll::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 10px;
+}
+
+.custom-scroll::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}
+
+.has-background {
+    background-color: var(--section-background-color);
+    border-radius: var(--section-border-radius);
+}
+
 .dropdown-transition {
-    @apply opacity-0 -translate-y-full transform-gpu;
-    transition: opacity 0.3s ease-in-out, transform 0.5s ease-in-out;
+    @apply transform-gpu;
+    z-index: 0;
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.25s ease-in-out, visibility 0.25s;
 }
 
 .group:hover .dropdown-transition {
-    @apply opacity-100 translate-y-0;
+    opacity: 1;
+    z-index: 30;
+    visibility: visible;
 }
 
 .fly-in {
@@ -116,9 +148,8 @@
 .group:hover .fly-in {
     transform: translateX(0);
     opacity: 1;
-    transition: transform 1s cubic-bezier(.14, .8, .6, 1), opacity .5s ease;
+    transition: transform 0.5s cubic-bezier(0.14, 0.8, 0.6, 1), opacity 0.5s ease;
     transition-delay: calc(var(--item-index) * 0.1s + 0.2s);
-    /* transition-delay: 0.3s; */
 }
 
 .text-animation {
diff --git a/app/weaverse/components.ts b/app/weaverse/components.ts
index 3c897cf..22c6d6d 100644
--- a/app/weaverse/components.ts
+++ b/app/weaverse/components.ts
@@ -6,6 +6,8 @@ import * as Highlights from '~/sections/hightlight/index';
 import * as HightlightItem from '~/sections/hightlight/item';
 import * as HighlightContent from '~/sections/hightlight/content-item';
 import * as ImageWithText from '~/sections/image-with-text/index';
+import * as ImageWithTextImage from '~/sections/image-with-text/image';
+import * as ImageWithTextContent from '~/sections/image-with-text/content';
 import * as ScrollingText from '~/sections/scrolling-text/index';
 import * as Testimonials from '~/sections/testimonials/index';
 import * as ContentReview from '~/sections/testimonials/content-item';
@@ -28,12 +30,15 @@ import * as BlogPost from '~/sections/blog-post/blog-post';
 import * as RelatedProducts from '~/sections/related-products/related-products';
 import * as CollectionBanner from '~/sections/collection-banner/collection-banner';
 import * as Newsletter from '~/sections/newsletter/index';
+import * as NewsletterInput from '~/sections/newsletter/input-email';
+import * as NewsletterIcon from '~/sections/newsletter/newsletter-icon';
 import * as SlideShowBanner from '~/sections/slideshowbanner/index';
 import * as SlideShowBannerItem from '~/sections/slideshowbanner/slideitems';
 import * as ContactForm from '~/sections/contact-form/contact-form';
 import * as Countdown from '~/sections/countdown/index';
 import * as CountdownTimer from '~/sections/countdown/timer';
 import * as ProductPlacement from '~/sections/product-placement/index';
+import * as ProductPlacementItems from '~/sections/product-placement/items';
 import * as ProductPlacementItem from '~/sections/product-placement/productItem';
 import * as Hotspots from '~/sections/image-hotspots/index';
 import * as HotspotsItem from '~/sections/image-hotspots/item';
@@ -45,6 +50,8 @@ export const components: HydrogenComponent[] = [
     HightlightItem,
     HighlightContent,
     ImageWithText,
+    ImageWithTextImage,
+    ImageWithTextContent,
     ScrollingText,
     Testimonials,
     ContentReview,
@@ -67,12 +74,15 @@ export const components: HydrogenComponent[] = [
     RelatedProducts,
     CollectionBanner,
     Newsletter,
+    NewsletterInput,
+    NewsletterIcon,
     SlideShowBanner,
     SlideShowBannerItem,
     ContactForm,
     Countdown,
     CountdownTimer,
     ProductPlacement,
+    ProductPlacementItems,
     ProductPlacementItem,
     Hotspots,
     HotspotsItem,
diff --git a/app/weaverse/schema.ts b/app/weaverse/schema.ts
index bc31a98..f9395f4 100644
--- a/app/weaverse/schema.ts
+++ b/app/weaverse/schema.ts
@@ -77,7 +77,7 @@ export const themeSchema: HydrogenThemeSchema = {
           name: "searchType",
           configs: {
             options: [
-              { value: "headerSearch", label: "Header search" },
+              { value: "popupSearch", label: "Popup search" },
               { value: "drawerSearch", label: "Drawer search" },
             ]
           },
diff --git a/app/weaverse/style.tsx b/app/weaverse/style.tsx
index 2719e32..328bdfc 100644
--- a/app/weaverse/style.tsx
+++ b/app/weaverse/style.tsx
@@ -66,6 +66,7 @@ export function GlobalStyle() {
       buttonSubtleBorder,
       buttonSubtleBorderHover,
       radius,
+      pageWidth,
     } = settings;
     colorBackground = hexToRgbString(colorBackground);
     colorBackgroundSubtle = hexToRgbString(colorBackgroundSubtle);
@@ -119,6 +120,7 @@ export function GlobalStyle() {
 
               /* Layout */
               --height-nav: ${settings.navHeightMobile}rem;
+              --page-width: ${pageWidth}px;
             }
 
             body, button, input, select, textarea {
diff --git a/tailwind.config.js b/tailwind.config.js
index 9854b0f..ce24f7e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,7 +7,6 @@ module.exports = {
   theme: {
     container: {
       center: true,
-      padding: '2rem',
       screens: {
         '2xl': '1440px',
       },