diff --git a/app/sections/column-with-text/index.tsx b/app/sections/ColumnWithText/index.tsx
similarity index 100%
rename from app/sections/column-with-text/index.tsx
rename to app/sections/ColumnWithText/index.tsx
diff --git a/app/sections/column-with-text/item.tsx b/app/sections/ColumnWithText/item.tsx
similarity index 100%
rename from app/sections/column-with-text/item.tsx
rename to app/sections/ColumnWithText/item.tsx
diff --git a/app/sections/CountDown/ButtonItems.tsx b/app/sections/CountDown/ButtonItems.tsx
new file mode 100644
index 00000000..715a14c1
--- /dev/null
+++ b/app/sections/CountDown/ButtonItems.tsx
@@ -0,0 +1,60 @@
+import type {
+  HydrogenComponentProps,
+  HydrogenComponentSchema,
+} from '@weaverse/hydrogen';
+import { forwardRef, CSSProperties } from 'react';
+
+interface ButtonItemsProps extends HydrogenComponentProps {
+  gap: number;
+}
+
+let ButtonItems = forwardRef<HTMLDivElement, ButtonItemsProps>((props, ref) => {
+  let { gap, children, ...rest } = props;
+  let spacingStyle: CSSProperties = {
+    gap: `${gap}px`,
+  } as CSSProperties;
+  return (
+    <div ref={ref} {...rest} className='flex mt-3' style={spacingStyle}>
+      {children}
+    </div>
+  );
+});
+
+export default ButtonItems;
+
+export let schema: HydrogenComponentSchema = {
+  type: 'countdown-buttons',
+  title: 'Buttons',
+  inspector: [
+    {
+      group: 'Buttons',
+      inputs: [
+        {
+          type: 'range',
+          name: 'gap',
+          label: 'Gap',
+          defaultValue: 12,
+          configs: {
+            min: 10,
+            max: 30,
+            step: 1,
+            unit: 'px',
+          },
+        },
+      ],
+    },
+  ],
+  childTypes: ['button'],
+  presets: {
+    children: [
+      {
+        type: 'button',
+        content: 'Button',
+      },
+      {
+        type: 'button',
+        content: 'Button',
+      }
+    ],
+  },
+};
diff --git a/app/sections/CountDown/CountDown.tsx b/app/sections/CountDown/CountDown.tsx
index b92383fa..e932ad23 100644
--- a/app/sections/CountDown/CountDown.tsx
+++ b/app/sections/CountDown/CountDown.tsx
@@ -5,7 +5,6 @@ import type {
 } from '@weaverse/hydrogen';
 import type { CSSProperties } from 'react';
 import { forwardRef } from 'react';
-import clsx from 'clsx';
 import { Image } from '@shopify/hydrogen';
 
 
@@ -14,18 +13,11 @@ interface CountDownProps extends HydrogenComponentProps {
   backgroundImage: WeaverseImage;
   overlayColor: string;
   overlayOpacity: number;
-  buttonLabel1: string;
-  buttonLink1: string;
-  buttonLabel2: string;
-  buttonLink2: string;
-  enableNewtab: boolean;
-  buttonStyle1: string;
-  buttonStyle2: string;
   sectionHeight: number;
 }
 
 let Countdown = forwardRef<HTMLElement, CountDownProps>((props, ref) => {
-  let { backgroundColor, backgroundImage, overlayColor, overlayOpacity, buttonLabel1, buttonLink1, buttonLabel2, buttonLink2, enableNewtab, buttonStyle1, buttonStyle2, sectionHeight, children, ...rest } = props;
+  let { backgroundColor, backgroundImage, overlayColor, overlayOpacity, sectionHeight, children, ...rest } = props;
   let sectionStyle: CSSProperties = {
     '--section-height': `${sectionHeight}px`,
     '--section-background-color': backgroundColor,
@@ -41,10 +33,6 @@ let Countdown = forwardRef<HTMLElement, CountDownProps>((props, ref) => {
       </div>
       <div className='flex flex-col gap-3 items-center w-5/6 sm-max:w-full z-10'>
         {children}
-        <div className='flex gap-3 mt-3'>
-          {buttonLabel1 && <a className={clsx('py-3 px-4 cursor-pointer rounded', buttonStyle1)} href={buttonLink1} target={enableNewtab ? '_blank' : ''} rel="noreferrer">{buttonLabel1}</a>}
-          {buttonLabel2 && <a className={clsx('py-3 px-4 cursor-pointer rounded', buttonStyle2)} href={buttonLink2} target={enableNewtab ? '_blank' : ''} rel="noreferrer">{buttonLabel2}</a>}
-        </div>
       </div>
     </section>
   );
@@ -88,78 +76,10 @@ export let schema: HydrogenComponentSchema = {
             unit: '%',
           },
         },
-        {
-          type: 'text',
-          name: 'buttonLabel1',
-          label: 'Button #1 label',
-          defaultValue: 'Shop this',
-        },
-        {
-          type: 'text',
-          name: 'buttonLink1',
-          label: 'Button #1 link',
-          placeholder: 'https://',
-        },
-        {
-          type: 'text',
-          name: 'buttonLabel2',
-          label: 'Button #2 label',
-          defaultValue: 'Shop all',
-        },
-        {
-          type: 'text',
-          name: 'buttonLink2',
-          label: 'Button #2 link',
-          placeholder: 'https://',
-        },
-        {
-          type: 'switch',
-          name: 'enableNewtab',
-          label: 'Open in new tab',
-          defaultValue: true,
-        },
-        {
-          type: 'toggle-group',
-          label: 'Button #1 style',
-          name: 'buttonStyle1',
-          configs: {
-            options: [
-              { label: '1', value: 'transition hover:bg-white border-2 border-solid hover:border-gray-900 hover:text-black bg-black text-white' },
-              { label: '2', value: 'transition bg-white border-2 border-solid border-gray-900 text-black hover:bg-black hover:text-white' },
-              { label: '3', value: 'transition hover:bg-white border-2 border-solid border-white hover:text-black bg-gray-200 text-white' },
-            ],
-          },
-          defaultValue: 'transition bg-white border-2 border-solid border-gray-900 text-black hover:bg-black hover:text-white',
-        },
-        {
-          type: 'toggle-group',
-          label: 'Button #2 style',
-          name: 'buttonStyle2',
-          configs: {
-            options: [
-              { label: '1', value: 'transition hover:bg-white border-2 border-solid hover:border-gray-900 hover:text-black bg-black text-white' },
-              { label: '2', value: 'transition bg-white border-2 border-solid border-gray-900 text-black hover:bg-black hover:text-white' },
-              { label: '3', value: 'transition hover:bg-white border-2 border-solid border-white hover:text-black bg-gray-200 text-white' },
-            ],
-          },
-          defaultValue: 'transition bg-white border-2 border-solid border-gray-900 text-black hover:bg-black hover:text-white',
-        },
-        {
-          type: 'range',
-          name: 'sectionHeight',
-          label: 'Section height',
-          defaultValue: 450,
-          configs: {
-            min: 400,
-            max: 700,
-            step: 10,
-            unit: 'px',
-          },
-        },
       ],
     },
   ],
-  childTypes: ['heading', 'subheading', 'count-down--timer'],
+  childTypes: ['heading', 'subheading', 'count-down--timer', 'countdown-buttons'],
   presets: {
     children: [
       {
@@ -173,6 +93,9 @@ export let schema: HydrogenComponentSchema = {
       {
         type: 'count-down--timer',
       },
+      {
+        type: 'countdown-buttons',
+      }
     ],
   },
 };
diff --git a/app/sections/HeaderImage/ButtonImage.tsx b/app/sections/HeaderImage/ButtonImage.tsx
deleted file mode 100644
index f5d3fba7..00000000
--- a/app/sections/HeaderImage/ButtonImage.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import type {
-  HydrogenComponentProps,
-  HydrogenComponentSchema,
-} from '@weaverse/hydrogen';
-import { forwardRef } from 'react';
-import clsx from 'clsx';
-
-
-interface ButtonItemProps extends HydrogenComponentProps {
-  buttonLink: string;
-  buttonLabel: string;
-  openInNewTab: boolean;
-  buttonStyle: string;
-}
-
-let buttonItem = forwardRef<HTMLDivElement, ButtonItemProps>((props, ref) => {
-  let { buttonLink, buttonLabel, openInNewTab, buttonStyle, ...rest } = props;
-  return (
-    <div ref={ref} {...rest} className='mt-3'>
-      {buttonLabel && <a href={`${buttonLink}`} target={openInNewTab ? '_blank' : ''} className={clsx('py-3 px-4 rounded', buttonStyle)} rel="noreferrer">{buttonLabel}</a>}
-    </div>
-  );
-});
-
-export default buttonItem;
-
-export let schema: HydrogenComponentSchema = {
-  type: 'button-image--item',
-  title: 'Button',
-  inspector: [
-    {
-      group: 'Button',
-      inputs: [
-        {
-          type: 'text',
-          name: 'buttonLabel',
-          label: 'Button label',
-          defaultValue: 'Button',
-        },
-        {
-          type: 'text',
-          name: 'buttonLink',
-          label: 'Button link',
-          placeholder: 'https://',
-        },
-        {
-          type: 'switch',
-          name: 'openInNewTab',
-          label: 'Open in new tab',
-          defaultValue: true,
-        },
-        {
-          type: 'toggle-group',
-          label: 'Button style',
-          name: 'buttonStyle',
-          configs: {
-            options: [
-              { label: '1', value: 'transition hover:bg-white border-2 border-solid hover:border-gray-900 hover:text-black bg-black text-white' },
-              { label: '2', value: 'transition bg-white border-2 border-solid border-gray-900 text-black hover:bg-black hover:text-white' },
-              { label: '3', value: 'transition hover:bg-white border-2 border-solid border-white hover:text-black bg-gray-200 text-white' },
-            ],
-          },
-          defaultValue: 'transition bg-white border-2 border-solid border-gray-900 text-black hover:bg-black hover:text-white',
-        },
-      ],
-    },
-  ],
-}
diff --git a/app/sections/HeaderImage/HeaderImage.tsx b/app/sections/HeaderImage/HeaderImage.tsx
index cceace83..f2443a97 100644
--- a/app/sections/HeaderImage/HeaderImage.tsx
+++ b/app/sections/HeaderImage/HeaderImage.tsx
@@ -160,7 +160,7 @@ export let schema: HydrogenComponentSchema = {
     'subheading',
     'heading',
     'description',
-    'button-image--item',
+    'button',
   ],
   presets: {
     children: [
@@ -177,7 +177,8 @@ export let schema: HydrogenComponentSchema = {
         content: 'Pair large text with an image to tell a story.',
       },
       {
-        type: 'button-image--item',
+        type: 'button',
+        content: 'Button section',
       },
     ],
   },
diff --git a/app/sections/PromotionGrid/ButtonItems.tsx b/app/sections/PromotionGrid/ButtonItems.tsx
new file mode 100644
index 00000000..013391d9
--- /dev/null
+++ b/app/sections/PromotionGrid/ButtonItems.tsx
@@ -0,0 +1,60 @@
+import type {
+  HydrogenComponentProps,
+  HydrogenComponentSchema,
+} from '@weaverse/hydrogen';
+import { forwardRef, CSSProperties } from 'react';
+
+interface ButtonItemsProps extends HydrogenComponentProps {
+  gap: number;
+}
+
+let ButtonItems = forwardRef<HTMLDivElement, ButtonItemsProps>((props, ref) => {
+  let { gap, children, ...rest } = props;
+  let spacingStyle: CSSProperties = {
+    gap: `${gap}px`,
+  } as CSSProperties;
+  return (
+    <div ref={ref} {...rest} className='flex mt-3' style={spacingStyle}>
+      {children}
+    </div>
+  );
+});
+
+export default ButtonItems;
+
+export let schema: HydrogenComponentSchema = {
+  type: 'promotion-buttons',
+  title: 'Buttons',
+  inspector: [
+    {
+      group: 'Buttons',
+      inputs: [
+        {
+          type: 'range',
+          name: 'gap',
+          label: 'Gap',
+          defaultValue: 12,
+          configs: {
+            min: 10,
+            max: 30,
+            step: 1,
+            unit: 'px',
+          },
+        },
+      ],
+    },
+  ],
+  childTypes: ['button'],
+  presets: {
+    children: [
+      {
+        type: 'button',
+        content: 'Button',
+      },
+      {
+        type: 'button',
+        content: 'Button',
+      }
+    ],
+  },
+};
diff --git a/app/sections/PromotionGrid/item.tsx b/app/sections/PromotionGrid/item.tsx
index 79909f2b..59305981 100644
--- a/app/sections/PromotionGrid/item.tsx
+++ b/app/sections/PromotionGrid/item.tsx
@@ -6,21 +6,14 @@ import type {
 import { forwardRef } from 'react';
 import { Image } from '@shopify/hydrogen';
 import {IconImageBlank} from '~/components';
-import clsx from 'clsx';
+
 
 interface PromotionItemProps extends HydrogenComponentProps {
   backgroundImage: WeaverseImage;
-  buttonLabel1: string;
-  buttonLink1: string;
-  buttonLabel2: string;
-  buttonLink2: string;
-  openInNewTab: boolean;
-  buttonStyle1: string;
-  buttonStyle2: string;
 }
 
 let PromotionGridItem = forwardRef<HTMLDivElement, PromotionItemProps>((props, ref) => {
-  let { backgroundImage, buttonLabel1, buttonLink1, buttonLabel2, buttonLink2, openInNewTab, buttonStyle1, buttonStyle2, children, ...rest } = props;
+  let { backgroundImage, children, ...rest } = props;
   return (
     <div ref={ref} {...rest} className='relative w-96 aspect-video' >
       <div className='absolute inset-0'>
@@ -32,10 +25,6 @@ let PromotionGridItem = forwardRef<HTMLDivElement, PromotionItemProps>((props, r
       <div className='relative flex flex-col items-center z-10 w-full py-10'>
         <div className='w-5/6 flex flex-col text-center items-center gap-5'>
           {children}
-          <div className='flex gap-3 mt-3'>
-            {buttonLabel1 && <a href={buttonLink1} target={openInNewTab ? '_blank' : ''} className={clsx('px-4 py-3 w-fit cursor-pointer rounded inline-block', buttonStyle1)} rel="noreferrer">{buttonLabel1}</a>}
-            {buttonLabel2 && <a href={buttonLink2} target={openInNewTab ? '_blank' : ''} className={clsx('px-4 py-3 w-fit cursor-pointer rounded inline-block', buttonStyle2)} rel="noreferrer">{buttonLabel2}</a>}
-          </div>
         </div>
       </div>
     </div>
@@ -56,66 +45,10 @@ export let schema: HydrogenComponentSchema = {
           name: 'backgroundImage',
           label: 'Background image',
         },
-        {
-          type: 'text',
-          name: 'buttonLabel1',
-          label: 'Button label 1',
-          defaultValue: 'Button',
-        },
-        {
-          type: 'text',
-          name: 'buttonLink1',
-          label: 'Button #1 link',
-          placeholder: 'https://',
-        },
-        {
-          type: 'text',
-          name: 'buttonLabel2',
-          label: 'Button label 2',
-          defaultValue: 'Button',
-        },
-        {
-          type: 'text',
-          name: 'buttonLink2',
-          label: 'Button #2 link',
-          placeholder: 'https://',
-        },
-        {
-          type: 'switch',
-          name: 'openInNewTab',
-          label: 'Open in new tab',
-          defaultValue: true,
-        },
-        {
-          type: 'toggle-group',
-          label: 'Button style #1',
-          name: 'buttonStyle1',
-          configs: {
-            options: [
-              { label: '1', value: 'transition hover:bg-white border-2 border-solid hover:border-gray-900 hover:text-black bg-black text-white' },
-              { label: '2', value: 'transition bg-white border-2 border-solid border-gray-900 text-black hover:bg-black hover:text-white' },
-              { label: '3', value: 'transition hover:bg-white border-2 border-solid border-white hover:text-black bg-gray-200 text-white' },
-            ],
-          },
-          defaultValue: 'transition hover:bg-white border-2 border-solid hover:border-gray-900 hover:text-black bg-black text-white',
-        },
-        {
-          type: 'toggle-group',
-          label: 'Button style #2',
-          name: 'buttonStyle2',
-          configs: {
-            options: [
-              { label: '1', value: 'transition hover:bg-white border-2 border-solid hover:border-gray-900 hover:text-black bg-black text-white' },
-              { label: '2', value: 'transition bg-white border-2 border-solid border-gray-900 text-black hover:bg-black hover:text-white' },
-              { label: '3', value: 'transition hover:bg-white border-2 border-solid border-white hover:text-black bg-gray-200 text-white' },
-            ],
-          },
-          defaultValue: 'transition hover:bg-white border-2 border-solid hover:border-gray-900 hover:text-black bg-black text-white',
-        },
       ],
     },
   ],
-  childTypes: ['subheading', 'heading', 'description'],
+  childTypes: ['subheading', 'heading', 'description', 'promotion-buttons'],
   presets: {
     children: [
       {
@@ -130,6 +63,9 @@ export let schema: HydrogenComponentSchema = {
         type: 'description',
         content: 'Include the smaller details of your promotion in text below the title.',
       },
+      {
+        type: 'promotion-buttons',
+      }
     ],
   },
 };
diff --git a/app/sections/RichText/Button.tsx b/app/sections/RichText/Button.tsx
deleted file mode 100644
index 860b5e1c..00000000
--- a/app/sections/RichText/Button.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import type {
-  HydrogenComponentProps,
-  HydrogenComponentSchema,
-} from '@weaverse/hydrogen';
-import { forwardRef } from 'react';
-import clsx from 'clsx';
-
-interface ButtonItemProps extends HydrogenComponentProps {
-  buttonLabel: string;
-  buttonLink: string;
-  openInNewTab: boolean;
-  buttonStyle: string;
-}
-
-let RichTextButtonItem = forwardRef<HTMLDivElement, ButtonItemProps>((props, ref) => {
-  let { buttonLabel, buttonLink, openInNewTab, buttonStyle, ...rest } = props;
-  return (
-    <div ref={ref} {...rest}>
-      <a href={buttonLink} target={openInNewTab ? '_blank' : ''} className={clsx('px-4 py-3 rounded cursor-pointer inline-block', buttonStyle)} rel="noreferrer">{buttonLabel}</a>
-    </div>
-  );
-});
-
-export default RichTextButtonItem;
-
-export let schema: HydrogenComponentSchema = {
-  type: 'rich-text-button--item',
-  title: 'Button item',
-  inspector: [
-    {
-      group: 'Button',
-      inputs: [
-        {
-          type: 'text',
-          label: 'Button label',
-          name: 'buttonLabel',
-          placeholder: 'Button label',
-          defaultValue: 'Optional button',
-        },
-        {
-          type: 'text',
-          label: 'Button link',
-          name: 'buttonLink',
-          placeholder: 'Button link',
-        },
-        {
-          type: 'switch',
-          name: 'openInNewTab',
-          label: 'Open in new tab',
-          defaultValue: true,
-        },
-        {
-          type: 'toggle-group',
-          label: 'Button style',
-          name: 'buttonStyle',
-          configs: {
-            options: [
-              { label: '1', value: 'transition hover:bg-white border-2 border-solid hover:border-gray-900 hover:text-black bg-black text-white' },
-              { label: '2', value: 'transition bg-white border-2 border-solid border-gray-900 text-black hover:bg-black hover:text-white' },
-              { label: '3', value: 'transition hover:bg-white border-2 border-solid border-white hover:text-black bg-gray-200 text-white' },
-            ],
-          },
-          defaultValue: 'transition bg-white border-2 border-solid border-gray-900 text-black hover:bg-black hover:text-white',
-        },
-      ],
-    },
-  ],
-};
diff --git a/app/sections/RichText/RichText.tsx b/app/sections/RichText/RichText.tsx
index b3baeb4b..9bf80c3d 100644
--- a/app/sections/RichText/RichText.tsx
+++ b/app/sections/RichText/RichText.tsx
@@ -100,7 +100,7 @@ export let schema: HydrogenComponentSchema = {
       ],
     },
   ],
-  childTypes: ['heading', 'description', 'rich-text-button--item'],
+  childTypes: ['heading', 'description', 'button'],
   presets: {
     children: [
       {
@@ -112,7 +112,8 @@ export let schema: HydrogenComponentSchema = {
         content: 'Pair large text with an image to tell a story, explain a detail about your product, or describe a new promotion.',
       },
       {
-        type: 'rich-text-button--item',
+        type: 'button',
+        content: 'Button section',
       }
     ],
   },
diff --git a/app/sections/VideoWithText/VideoButtonItem.tsx b/app/sections/VideoWithText/VideoButtonItem.tsx
deleted file mode 100644
index bf492c46..00000000
--- a/app/sections/VideoWithText/VideoButtonItem.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import type {
-  HydrogenComponentProps,
-  HydrogenComponentSchema,
-} from '@weaverse/hydrogen';
-import { forwardRef } from 'react';
-import clsx from 'clsx';
-
-interface VideoButtonProps extends HydrogenComponentProps {
-  buttonLabel: string;
-  buttonLink: string;
-  enableNewtab: boolean;
-  buttonStyle: string;
-}
-
-let VideoButtonItem = forwardRef<HTMLDivElement, VideoButtonProps>((props, ref) => {
-  let {buttonLabel, buttonLink, enableNewtab, buttonStyle, ...rest} = props;
-  return (
-    <div ref={ref} {...rest} className='mt-3'>
-      <a href={buttonLink} target={enableNewtab ? '_blank' : ''} className={clsx('py-3 px-4 cursor-pointer rounded', buttonStyle)} rel="noreferrer">{buttonLabel}</a>
-    </div>
-  );
-});
-
-export default VideoButtonItem;
-
-export let schema: HydrogenComponentSchema = {
-  type: 'video-button--item',
-  title: 'Button',
-  limit: 1,
-  inspector: [
-    {
-      group: 'Button',
-      inputs: [
-        {
-          type: 'text',
-          name: 'buttonLabel',
-          label: 'Button label',
-          defaultValue: 'Button',
-        },
-        {
-          type: 'text',
-          name: 'buttonLink',
-          label: 'Button link',
-          placeholder: 'https://',
-        },
-        {
-          type: 'switch',
-          name: 'enableNewtab',
-          label: 'Open in new tab',
-          defaultValue: true,
-        },
-        {
-          type: 'toggle-group',
-          label: 'Button style',
-          name: 'buttonStyle',
-          configs: {
-            options: [
-              { label: '1', value: 'transition hover:bg-white border-2 border-solid hover:border-gray-900 hover:text-black bg-black text-white' },
-              { label: '2', value: 'transition bg-white border-2 border-solid border-gray-900 text-black hover:bg-black hover:text-white' },
-              { label: '3', value: 'transition hover:bg-white border-2 border-solid border-white hover:text-black bg-gray-200 text-white' },
-            ],
-          },
-          defaultValue: 'transition bg-white border-2 border-solid border-gray-900 text-black hover:bg-black hover:text-white',
-        },
-      ],
-    },
-  ],
-}
diff --git a/app/sections/VideoWithText/VideoWithText.tsx b/app/sections/VideoWithText/VideoWithText.tsx
index 90d5f669..0888bf6e 100644
--- a/app/sections/VideoWithText/VideoWithText.tsx
+++ b/app/sections/VideoWithText/VideoWithText.tsx
@@ -32,7 +32,7 @@ let VideoWithText = forwardRef<HTMLElement, VideoWithTextProps>((props, ref) =>
   } as CSSProperties;
 
   return (
-    <section ref={ref} {...rest} className='flex relative items-center h-[var(--section-height-mobile)] sm:h-[var(--section-height-desktop)]' style={sectionStyle}>
+    <section ref={ref} {...rest} className='flex relative overflow-hidden items-center h-[var(--section-height-mobile)] sm:h-[var(--section-height-desktop)]' style={sectionStyle}>
       {videoLink ? <ReactPlayer url={videoLink}
         playing={enableAutoPlay}
         volume={1} muted={enableMuted}
@@ -152,7 +152,7 @@ export let schema: HydrogenComponentSchema = {
       ],
     },
   ],
-  childTypes: ['subheading', 'heading', 'description', 'video-button--item'],
+  childTypes: ['subheading', 'heading', 'description', 'button'],
   presets: {
     children: [
       {
@@ -168,7 +168,8 @@ export let schema: HydrogenComponentSchema = {
         content: 'Pair large text with an image to tell a story.',
       },
       {
-        type: 'video-button--item',
+        type: 'button',
+        content: 'Button section',
       }
     ],
   },
diff --git a/app/sections/image-with-text.tsx b/app/sections/image-with-text.tsx
deleted file mode 100644
index 869007ca..00000000
--- a/app/sections/image-with-text.tsx
+++ /dev/null
@@ -1,240 +0,0 @@
-import type {
-  HydrogenComponentProps,
-  HydrogenComponentSchema,
-} from '@weaverse/hydrogen';
-import type {CSSProperties} from 'react';
-import {forwardRef} from 'react';
-import {Image} from '@shopify/hydrogen';
-
-interface ImageWithTextProps extends HydrogenComponentProps {
-  imageFirst: {
-    url: string;
-    altText: string;
-    width?: number;
-    height?: number;
-  };
-  imageSecond: {
-    url: string;
-    altText: string;
-    width?: number;
-    height?: number;
-  };
-  heading: string;
-  subHeading: string;
-  subHeadingSize: string;
-  headingSize: string;
-  descriptionText: string;
-  textAlignment: string;
-  buttonLabel: string;
-  buttonLink: string;
-  loading: HTMLImageElement['loading'];
-}
-
-let ImageWithText = forwardRef<HTMLElement, ImageWithTextProps>(
-  (props, ref) => {
-    let {
-      imageFirst,
-      imageSecond,
-      heading,
-      subHeading,
-      subHeadingSize,
-      headingSize,
-      descriptionText,
-      textAlignment,
-      buttonLabel,
-      buttonLink,
-      loading,
-      ...rest
-    } = props;
-    let styleSection: CSSProperties = {
-      '--height-section': '410px',
-      '--font-size-display': `${headingSize}`,
-      '--font-size-heading': `${subHeadingSize}`,
-      textAlign: `${textAlignment}`,
-    } as CSSProperties;
-    const isDescriptionEmpty = /^<p><br><\/p>$/i.test(descriptionText);
-    return (
-      <section
-        ref={ref}
-        {...rest}
-        style={styleSection}
-        className="bg-blue-100 h-[var(--height-section)] overflow-hidden w-full sm-max:h-auto sm-max:overflow-hidden"
-      >
-        <div className="box-border h-full px-10 sm-max:px-6 sm-max:w-full">
-          <div className="flex box-border h-full w-full sm-max:flex-col">
-            <div className="w-2/5 h-full py-16 mr-5 sm-max:mr-0 sm-max:w-full sm-max:pb-12">
-              {subHeading && (
-                <p className="text-heading mb-5 leading-6">{subHeading}</p>
-              )}
-              {heading && (
-                <h3 className="mb-5 text-gray-950 text-display font-bold leading-5">
-                  {heading}
-                </h3>
-              )}
-              {!isDescriptionEmpty && (
-                <p
-                  className="text-sm font-normal mb-5 leading-6 sm-max:w-full"
-                  dangerouslySetInnerHTML={{__html: descriptionText}}
-                ></p>
-              )}
-              {buttonLabel && (
-                <a
-                  className="text-center py-3 px-4 rounded bg-gray-950 text-white"
-                  href={buttonLink}
-                >
-                  {buttonLabel}
-                </a>
-              )}
-            </div>
-            <div className="w-3/5 flex h-full py-14 justify-end sm-max:order-first sm-max:w-full sm-max:py-10 sm-max:pb-0 sm-max:justify-center">
-              <div className="z-10 sm:translate-x-8 sm:translate-y-8 sm-max:z-10 sm-max:translate-x-9 sm-max:translate-y-9">
-                <Image
-                  data={imageFirst}
-                  loading={loading}
-                  className="sm:object-contain sm-max:object-contain"
-                  sizes="auto"
-                />
-              </div>
-              <div>
-                <Image
-                  data={imageSecond}
-                  loading={loading}
-                  className="sm:object-contain sm-max:object-contain"
-                  sizes="auto"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </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: 'imageFirst',
-          label: 'Image 1',
-          defaultValue: {
-            url: 'https://thang-weaverse-test-shop.myshopify.com/cdn/shop/files/gift-card-envelopes.jpg?v=1696497046&width=1100',
-            altText: 'imageIndex',
-          },
-        },
-        {
-          type: 'image',
-          name: 'imageSecond',
-          label: 'Image 2',
-          defaultValue: {
-            url: 'https://thang-weaverse-test-shop.myshopify.com/cdn/shop/files/gift-card.jpg?v=1696497401&width=1100',
-            altText: 'imageIndex',
-          },
-        },
-        {
-          type: 'text',
-          name: 'subHeading',
-          label: 'Subheading',
-          defaultValue: 'Subheading',
-          placeholder: 'Subheading',
-        },
-        {
-          type: 'toggle-group',
-          label: 'Subheading size',
-          name: 'subHeadingSize',
-          configs: {
-            options: [
-              {label: 'XS', value: '14px'},
-              {label: 'S', value: '16px'},
-              {label: 'M', value: '18px'},
-              {label: 'L', value: '20px'},
-              {label: 'XL', value: '22px'},
-            ],
-          },
-          defaultValue: '16px',
-        },
-        {
-          type: 'text',
-          name: 'heading',
-          label: 'Heading',
-          defaultValue: 'Heading for Image',
-          placeholder: 'Heading for image section',
-        },
-        {
-          type: 'toggle-group',
-          label: 'Heading size',
-          name: 'headingSize',
-          configs: {
-            options: [
-              {label: 'XS', value: '22px'},
-              {label: 'S', value: '24px'},
-              {label: 'M', value: '26px'},
-              {label: 'L', value: '28px'},
-              {label: 'XL', value: '30px'},
-            ],
-          },
-          defaultValue: '24px',
-        },
-        {
-          type: 'richtext',
-          label: 'Text',
-          name: 'descriptionText',
-          defaultValue:
-            'Pair large text with an image to tell a story, explain a detail about your product, or describe a new promotion.',
-        },
-        {
-          type: 'toggle-group',
-          label: 'Text alignment',
-          name: 'textAlignment',
-          configs: {
-            options: [
-              {label: 'Left', value: 'left'},
-              {label: 'Center', value: 'center'},
-              {label: 'Right', value: 'right'},
-            ],
-          },
-          defaultValue: 'left',
-        },
-        {
-          type: 'text',
-          name: 'buttonLabel',
-          label: 'Button label',
-          defaultValue: 'Button',
-        },
-        {
-          type: 'text',
-          name: 'buttonLink',
-          label: 'Button link',
-          placeholder: 'https://',
-        },
-        {
-          type: 'toggle-group',
-          name: 'loading',
-          label: 'Image loading',
-          defaultValue: 'eager',
-          configs: {
-            options: [
-              {label: 'Eager', value: 'eager', icon: 'Lightning'},
-              {
-                label: 'Lazy',
-                value: 'lazy',
-                icon: 'SpinnerGap',
-                weight: 'light',
-              },
-            ],
-          },
-          helpText:
-            'Learn more about <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading" target="_blank" rel="noopener noreferrer">image loading strategies</a>.',
-        },
-      ],
-    },
-  ],
-};
diff --git a/app/sections/image-with-text/ImageWithText.tsx b/app/sections/image-with-text/ImageWithText.tsx
index 5acb75b7..16b690d9 100644
--- a/app/sections/image-with-text/ImageWithText.tsx
+++ b/app/sections/image-with-text/ImageWithText.tsx
@@ -112,7 +112,7 @@ export let schema: HydrogenComponentSchema = {
       ],
     },
   ],
-  childTypes: ['subheading', 'heading', 'description', 'Button--Item'],
+  childTypes: ['subheading', 'heading', 'description', 'button'],
   presets: {
     children: [
       {
@@ -128,7 +128,8 @@ export let schema: HydrogenComponentSchema = {
         content: 'Pair large text with an image to tell a story.',
       },
       {
-        type: 'Button--Item',
+        type: 'button',
+        content: 'Button section',
       },
     ],
   },
diff --git a/app/sections/image-with-text/content-item/ButtonItem.tsx b/app/sections/image-with-text/content-item/ButtonItem.tsx
deleted file mode 100644
index 9a7ef827..00000000
--- a/app/sections/image-with-text/content-item/ButtonItem.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import type {
-  HydrogenComponentProps,
-  HydrogenComponentSchema,
-} from '@weaverse/hydrogen';
-import { forwardRef } from 'react';
-import clsx from 'clsx';
-
-
-interface ButtonItemProps extends HydrogenComponentProps {
-  buttonLabel: string;
-  buttonLink: string;
-  openInNewTab: boolean;
-  buttonStyle: string;
-}
-
-let ImageWTextButtonItem = forwardRef<HTMLDivElement, ButtonItemProps>((props, ref) => {
-  let { buttonLabel, buttonLink, openInNewTab, buttonStyle, ...rest } = props;
-  return (
-    <div ref={ref} {...rest}>
-      <a className={clsx('py-3 px-4 rounded cursor-pointer inline-block', buttonStyle)} target={openInNewTab ? '_blank' : ''} href={buttonLink} rel="noreferrer">{buttonLabel}</a>
-    </div>
-  );
-});
-
-export default ImageWTextButtonItem;
-
-export let schema: HydrogenComponentSchema = {
-  type: 'Button--Item',
-  title: 'Button',
-  limit: 1,
-  inspector: [
-    {
-      group: 'Button',
-      inputs: [
-        {
-          type: 'text',
-          name: 'buttonLabel',
-          label: 'Button label',
-          defaultValue: 'Button',
-        },
-        {
-          type: 'text',
-          name: 'buttonLink',
-          label: 'Button link',
-          placeholder: 'https://'
-        },
-        {
-          type: 'switch',
-          name: 'openInNewTab',
-          label: 'Open in new tab',
-          defaultValue: true,
-        },
-        {
-          type: 'toggle-group',
-          label: 'Button style',
-          name: 'buttonStyle',
-          configs: {
-            options: [
-              { label: '1', value: 'transition hover:bg-white border-2 border-solid hover:border-gray-900 hover:text-black bg-black text-white' },
-              { label: '2', value: 'transition bg-white border-2 border-solid border-gray-900 text-black hover:bg-black hover:text-white' },
-              { label: '3', value: 'transition hover:bg-white border-2 border-solid border-white hover:text-black bg-gray-200 text-white' },
-            ],
-          },
-          defaultValue: 'transition bg-white border-2 border-solid border-gray-900 text-black hover:bg-black hover:text-white',
-        },
-      ],
-    }
-  ],
-};
diff --git a/app/sections/shared/Button.tsx b/app/sections/shared/Button.tsx
new file mode 100644
index 00000000..67296f82
--- /dev/null
+++ b/app/sections/shared/Button.tsx
@@ -0,0 +1,103 @@
+import {
+  type HydrogenComponentProps,
+  type HydrogenComponentSchema,
+} from '@weaverse/hydrogen';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import type { CSSProperties } from 'react';
+
+
+type ButtonStyle = 'primary' | 'secondary' | 'subtle';
+type ButtonProps = HydrogenComponentProps & {
+  content: string;
+  className?: string;
+  buttonStyle?: ButtonStyle;
+  buttonLink?: string;
+  openInNewTab?: boolean;
+};
+
+let buttonStyleClasses: Record<ButtonStyle, string> = {
+  primary: 'transition btn-primary',
+  secondary: 'transition btn-secondary',
+  subtle: 'transition btn-subtle',
+};
+
+let Button = forwardRef<HTMLDivElement, ButtonProps>((props, ref) => {
+  let {
+    content,
+    buttonStyle,
+    buttonLink,
+    openInNewTab,
+    className,
+    ...rest
+  } = props;
+  let style = {} as CSSProperties;
+  return (
+    <div ref={ref}
+    {...rest} className='mt-3'>
+      {content && <a
+        style={style}
+        className={clsx(
+          'py-3 px-4 rounded cursor-pointer',
+          buttonStyleClasses[buttonStyle!],
+          className,
+        )}
+        href={`${buttonLink}`} target={openInNewTab ? '_blank' : ''}
+      >
+        {content}
+      </a>}
+    </div>
+  );
+});
+
+Button.defaultProps = {
+  content: 'Button',
+  buttonStyle: 'secondary',
+};
+
+export default Button;
+
+export let schema: HydrogenComponentSchema = {
+  type: 'button',
+  title: 'Button',
+  inspector: [
+    {
+      group: 'Button',
+      inputs: [
+        {
+          type: 'text',
+          name: 'content',
+          label: 'Content',
+          defaultValue: 'Button',
+          placeholder: 'Button label',
+        },
+        {
+          type: 'text',
+          name: 'buttonLink',
+          label: 'Button link',
+          placeholder: 'https://',
+        },
+        {
+          type: 'switch',
+          name: 'openInNewTab',
+          label: 'Open in new tab',
+          defaultValue: true,
+        },
+        {
+          type: 'toggle-group',
+          label: 'Button style',
+          name: 'buttonStyle',
+          configs: {
+            options: [
+              { label: 'primary', value: 'primary' },
+              { label: 'secondary', value: 'secondary' },
+              { label: 'subtle', value: 'subtle' },
+            ],
+          },
+          defaultValue: 'secondary',
+        },
+      ],
+    },
+  ],
+  toolbar: ['general-settings', ['duplicate', 'delete']],
+};
diff --git a/app/sections/shared/atoms.ts b/app/sections/shared/atoms.ts
index 75bedfb9..024bb065 100644
--- a/app/sections/shared/atoms.ts
+++ b/app/sections/shared/atoms.ts
@@ -2,5 +2,6 @@ import type {HydrogenComponent} from '@weaverse/hydrogen';
 import * as Heading from './Heading';
 import * as SubHeading from './SubHeading';
 import * as Description from './Description';
+import * as Button from './Button';
 
-export let atoms: HydrogenComponent[] = [SubHeading, Heading, Description];
+export let atoms: HydrogenComponent[] = [SubHeading, Heading, Description, Button];
diff --git a/app/weaverse/components.ts b/app/weaverse/components.ts
index 13f4a490..3c8e2dbc 100644
--- a/app/weaverse/components.ts
+++ b/app/weaverse/components.ts
@@ -5,19 +5,18 @@ import * as Blogs from '~/sections/blogs';
 import * as CollectionFilters from '~/sections/collection-filters';
 import * as CollectionHeader from '~/sections/collection-header';
 import * as CollectionList from '~/sections/collection-list';
-import * as ContentColumnWithImage from '~/sections/column-with-text/index';
-import * as ContentColumnItem from '~/sections/column-with-text/item';
+import * as ContentColumnWithImage from '~/sections/ColumnWithText/index';
+import * as ContentColumnItem from '~/sections/ColumnWithText/item';
 import * as Countdown from '~/sections/CountDown/CountDown';
+import * as ButtonCountDownItems from '~/sections/CountDown/ButtonItems';
 import * as CountDownTimer from '~/sections/CountDown/Timer';
 import * as FeaturedCollections from '~/sections/featured-collections';
 import * as FeaturedProducts from '~/sections/featured-products';
-import * as ButtonItem from '~/sections/HeaderImage/ButtonImage';
 import * as HeaderImage from '~/sections/HeaderImage/HeaderImage';
 import * as Hero from '~/sections/hero';
 import * as ImageGallery from '~/sections/ImageGallery';
 import * as ImageGalleryItems from '~/sections/ImageGallery/items';
 import * as ImageGalleryItem from '~/sections/ImageGallery/image';
-import * as ImageWTextButtonItem from '~/sections/image-with-text/content-item/ButtonItem';
 import * as ImageWithText from '~/sections/image-with-text/ImageWithText';
 import * as Judgeme from '~/sections/judgeme-review';
 import * as Main from '~/sections/main';
@@ -25,10 +24,10 @@ import * as Map from '~/sections/map';
 import * as Page from '~/sections/page';
 import * as ProductInformation from '~/sections/product-information';
 import * as PromotionGridItem from '~/sections/PromotionGrid/item';
+import * as ButtonPromotionItems from '~/sections/PromotionGrid/ButtonItems';
 import * as PromotionGrid from '~/sections/PromotionGrid/PromotionGrid';
 import * as RelatedArticles from '~/sections/related-articles';
 import * as RelatedProducts from '~/sections/related-products';
-import * as RichTextButtonItem from '~/sections/RichText/Button';
 import * as RichText from '~/sections/RichText/RichText';
 import {atoms} from '~/sections/shared/atoms';
 import * as SingleProduct from '~/sections/single-product';
@@ -37,7 +36,6 @@ import * as TestimonialItems from '~/sections/testimonials/items';
 import * as TestimonialItem from '~/sections/testimonials/item';
 import * as Video from '~/sections/Video/video';
 import * as VideoItem from '~/sections/Video/VideoItem';
-import * as VideoButtonItem from '~/sections/VideoWithText/VideoButtonItem';
 import * as VideoWithText from '~/sections/VideoWithText/VideoWithText';
 
 export let components: HydrogenComponent[] = [
@@ -49,20 +47,18 @@ export let components: HydrogenComponent[] = [
   VideoItem,
   CollectionHeader,
   HeaderImage,
-  ButtonItem,
   ImageWithText,
-  ImageWTextButtonItem,
   ContentColumnWithImage,
   ContentColumnItem,
   RichText,
-  RichTextButtonItem,
   VideoWithText,
-  VideoButtonItem,
   Map,
   PromotionGrid,
   PromotionGridItem,
+  ButtonPromotionItems,
   Countdown,
   CountDownTimer,
+  ButtonCountDownItems,
   Blogs,
   BlogPost,
   AllProducts,
diff --git a/app/weaverse/schema.server.ts b/app/weaverse/schema.server.ts
index f31d1954..c97a7058 100644
--- a/app/weaverse/schema.server.ts
+++ b/app/weaverse/schema.server.ts
@@ -255,5 +255,130 @@ export let themeSchema: HydrogenThemeSchema = {
         },
       ],
     },
+    {
+      group: 'Buttons',
+      inputs: [
+        {
+          type: 'heading',
+          label: 'Primary',
+        },
+        {
+          type: 'color',
+          label: 'Background color',
+          name: 'buttonPrimaryBg',
+          defaultValue: '#000',
+        },
+        {
+          type: 'color',
+          label: 'Background color (hover)',
+          name: 'buttonPrimaryBgHover',
+          defaultValue: '#00000000',
+        },
+        {
+          type: 'color',
+          label: 'Text color',
+          name: 'buttonPrimaryColor',
+          defaultValue: '#fff',
+        },
+        {
+          type: 'color',
+          label: 'Text color (hover)',
+          name: 'buttonPrimaryColorHover',
+          defaultValue: '#000',
+        },
+        {
+          type: 'color',
+          label: 'Border color',
+          name: 'buttonPrimaryBorder',
+          defaultValue: '#00000000',
+        },
+        {
+          type: 'color',
+          label: 'Border color (hover)',
+          name: 'buttonPrimaryBorderHover',
+          defaultValue: '#000',
+        },
+        {
+          type: 'heading',
+          label: 'Secondary',
+        },
+        {
+          type: 'color',
+          label: 'Background color',
+          name: 'buttonSecondaryBg',
+          defaultValue: '#00000000',
+        },
+        {
+          type: 'color',
+          label: 'Background color (hover)',
+          name: 'buttonSecondaryBgHover',
+          defaultValue: '#0F0F0F',
+        },
+        {
+          type: 'color',
+          label: 'Text color',
+          name: 'buttonSecondaryColor',
+          defaultValue: '#000',
+        },
+        {
+          type: 'color',
+          label: 'Text color (hover)',
+          name: 'buttonSecondaryColorHover',
+          defaultValue: '#fff',
+        },
+        {
+          type: 'color',
+          label: 'Border color',
+          name: 'buttonSecondaryBorder',
+          defaultValue: '#000',
+        },
+        {
+          type: 'color',
+          label: 'Border color (hover)',
+          name: 'buttonSecondaryBorderHover',
+          defaultValue: '#00000000',
+        },
+        {
+          type: 'heading',
+          label: 'Subtle',
+        },
+        {
+          type: 'color',
+          label: 'Background color',
+          name: 'buttonSubtleBg',
+          defaultValue: '#00000000',
+        },
+        {
+          type: 'color',
+          label: 'Background color (hover)',
+          name: 'buttonSubtleBgHover',
+          defaultValue: '#fff',
+        },
+        {
+          type: 'color',
+          label: 'Text color',
+          name: 'buttonSubtleColor',
+          defaultValue: '#fff',
+        },
+        {
+          type: 'color',
+          label: 'Text color (hover)',
+          name: 'buttonSubtleColorHover',
+          defaultValue: '#000',
+        },
+        {
+          type: 'color',
+          label: 'Border color',
+          name: 'buttonSubtleBorder',
+          defaultValue: '#fff',
+        },
+        {
+          type: 'color',
+          label: 'Border color (hover)',
+          name: 'buttonSubtleBorderHover',
+          defaultValue: '#00000000',
+        },
+      ],
+    },
   ],
 };
diff --git a/app/weaverse/style.tsx b/app/weaverse/style.tsx
index 9b59c03b..0df310b0 100644
--- a/app/weaverse/style.tsx
+++ b/app/weaverse/style.tsx
@@ -40,6 +40,24 @@ export function GlobalStyle() {
       headingBaseLineHeight,
       navHeightDesktop,
       navHeightTablet,
+      buttonPrimaryBg,
+      buttonPrimaryBgHover,
+      buttonPrimaryColor,
+      buttonPrimaryColorHover,
+      buttonPrimaryBorder,
+      buttonPrimaryBorderHover,
+      buttonSecondaryBg,
+      buttonSecondaryBgHover,
+      buttonSecondaryColor,
+      buttonSecondaryColorHover,
+      buttonSecondaryBorder,
+      buttonSecondaryBorderHover,
+      buttonSubtleBg,
+      buttonSubtleBgHover,
+      buttonSubtleColor,
+      buttonSubtleColorHover,
+      buttonSubtleBorder,
+      buttonSubtleBorderHover,
     } = settings;
     colorBackground = hexToRgbString(colorBackground);
     colorInverseBackground = hexToRgbString(colorInverseBackground);
@@ -51,7 +69,6 @@ export function GlobalStyle() {
     colorInverseButtonText = hexToRgbString(colorInverseButtonText);
     colorSale = hexToRgbString(colorSale);
     colorBorder = hexToRgbString(colorBorder);
-
     return (
       <style
         id="global-theme-style"
@@ -133,6 +150,39 @@ export function GlobalStyle() {
                 --height-nav: ${navHeightDesktop}rem;
               }
             }
+            .btn-primary{
+              background-color: ${buttonPrimaryBg};
+              color: ${buttonPrimaryColor};
+              border: 2px solid ${buttonPrimaryBorder};
+            }
+            .btn-primary:hover{
+              background-color: ${buttonPrimaryBgHover}!important;
+              color: ${buttonPrimaryColorHover}!important;
+              border: 2px solid ${buttonPrimaryBorderHover} !important;
+              transition: 0.3s background-color color border;
+            }
+            .btn-secondary{
+              background-color: ${buttonSecondaryBg};
+              color: ${buttonSecondaryColor};
+              border: 2px solid ${buttonSecondaryBorder};
+            }
+            .btn-secondary:hover{
+              background-color: ${buttonSecondaryBgHover}!important;
+              color: ${buttonSecondaryColorHover}!important;
+              border: 2px solid ${buttonSecondaryBorderHover} !important;
+              transition: 0.3s background-color color border;
+            }
+            .btn-subtle{
+              background-color: ${buttonSubtleBg};
+              color: ${buttonSubtleColor};
+              border: 2px solid ${buttonSubtleBorder};
+            }
+            .btn-subtle:hover{
+              background-color: ${buttonSubtleBgHover}!important;
+              color: ${buttonSubtleColorHover}!important;
+              border: 2px solid ${buttonSubtleBorderHover} !important;
+              transition: 0.3s background-color color border;
+            }
           `,
         }}
       />