diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
index f1b868a..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 h-fit flex-col gap-6 px-4 pb-10 pt-6 lg:container md:gap-10 md:px-6 md:py-10 lg:gap-8 lg:px-10 lg:py-16">
+      <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>
diff --git a/app/components/Header/MenuDrawerHeader.tsx b/app/components/Header/MenuDrawerHeader.tsx
index 8e3261d..d6bc0d4 100644
--- a/app/components/Header/MenuDrawerHeader.tsx
+++ b/app/components/Header/MenuDrawerHeader.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 {CartCount} from './CartCount';
@@ -60,7 +60,7 @@ export function UseMenuDrawerHeader({
       onMouseEnter={onHover}
       onMouseLeave={onLeave}
     >
-      <div className="z-40 flex h-nav items-center justify-between gap-3 px-6 py-4 transition-all duration-300 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 20239dd..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';
@@ -60,7 +60,7 @@ export function UseMenuMegaHeader({
       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/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/Description.tsx b/app/sections/atoms/Description.tsx
index f2fdac2..5bcf34f 100644
--- a/app/sections/atoms/Description.tsx
+++ b/app/sections/atoms/Description.tsx
@@ -163,7 +163,7 @@ export let schema: HydrogenComponentSchema = {
               {value: 'right', label: 'Right', icon: 'align-end-vertical'},
             ],
           },
-          // defaultValue: 'center',
+          defaultValue: 'center',
         },
       ],
     },
diff --git a/app/sections/atoms/Heading.tsx b/app/sections/atoms/Heading.tsx
index 255a01c..026509a 100644
--- a/app/sections/atoms/Heading.tsx
+++ b/app/sections/atoms/Heading.tsx
@@ -80,7 +80,7 @@ let variants = cva('heading', {
     size: 'default',
     weight: '400',
     letterSpacing: 'normal',
-    // alignment: 'center',
+    alignment: 'center',
   },
 });
 
@@ -307,7 +307,7 @@ export let headingInputs: InspectorGroup['inputs'] = [
         {value: 'right', label: 'Right', icon: 'align-end-vertical'},
       ],
     },
-    // defaultValue: 'center',
+    defaultValue: 'center',
   },
 ];
 
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/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/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
index 7cdd486..ddaedba 100644
--- a/app/sections/slideshowbanner/arrows.tsx
+++ b/app/sections/slideshowbanner/arrows.tsx
@@ -3,7 +3,7 @@ import { cva } from "class-variance-authority";
 import clsx from "clsx";
 import { useState } from "react";
 import { useSwiper } from "swiper/react";
-import { IconArrowLeft, IconArrowRight, IconArrowScrollLeft, IconArrowScrollRight, IconArrowSlideLeft, IconArrowSlideRight, IconCaret } from "~/components/Icon";
+import { IconArrowLeft, IconArrowRight, IconCaret } from "~/components/Icon";
 
 let variants = cva(
   [
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 be00c2d..1e277e9 100644
--- a/app/styles/tailwind.css
+++ b/app/styles/tailwind.css
@@ -102,18 +102,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 {
@@ -124,9 +151,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 8980ed5..22c6d6d 100644
--- a/app/weaverse/components.ts
+++ b/app/weaverse/components.ts
@@ -30,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';
@@ -71,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',
       },