diff --git a/src/components/widgets/Content.astro b/src/components/widgets/Content.astro
index 7417285..3da7f75 100644
--- a/src/components/widgets/Content.astro
+++ b/src/components/widgets/Content.astro
@@ -2,6 +2,8 @@
 import { Icon } from 'astro-icon/components';
 import { Picture } from '@astrojs/image/components';
 import type { Content } from '~/types';
+import Headline from '../ui/Headline.astro';
+import WidgetWrapper from '../ui/WidgetWrapper.astro';
 
 const {
   title = await Astro.slots.render('title'),
@@ -12,34 +14,30 @@ const {
   image = await Astro.slots.render('image'),
   isReversed = false,
   isAfterContent = false,
+
+  id,
+  isDark = false,
+  classes = {},
+  bg = await Astro.slots.render('bg'),
 } = Astro.props as Content;
 ---
 
-<section class:list={[{ 'pt-0 md:pt-0': isAfterContent }, 'bg-blue-50 dark:bg-page py-16 md:py-20 not-prose']}>
-  <div class="max-w-xl sm:mx-auto lg:max-w-2xl">
-    {
-      (title || subtitle || tagline) && (
-        <div class="mb-10 md:mx-auto text-center md:mb-12 max-w-3xl">
-          {tagline && (
-            <p
-              class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase"
-              set:html={tagline}
-            />
-          )}
-          {title && (
-            <h2
-              class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading"
-              set:html={title}
-            />
-          )}
-
-          {subtitle && (
-            <p class="max-w-3xl mx-auto sm:text-center text-xl text-muted dark:text-slate-400" set:html={subtitle} />
-          )}
-        </div>
-      )
-    }
-  </div>
+<WidgetWrapper
+  id={id}
+  isDark={isDark}
+  containerClass={`max-w-screen-xl mx-auto ${isAfterContent ? 'pt-0 md:pt-0 lg:pt-0' : ''} ${classes?.container ?? ''}`}
+  bg={bg}
+>
+  <Headline
+    title={title}
+    subtitle={subtitle}
+    tagline={tagline}
+    classes={{
+      container: 'max-w-xl sm:mx-auto lg:max-w-2xl',
+      title: 'text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading',
+      subtitle: 'max-w-3xl mx-auto sm:text-center text-xl text-muted dark:text-slate-400',
+    }}
+  />
   <div class="mx-auto max-w-7xl p-4 md:px-8">
     <div class={`md:flex ${isReversed ? 'md:flex-row-reverse' : ''} md:gap-16`}>
       <div class="md:basis-1/2 self-center">
@@ -88,4 +86,4 @@ const {
       </div>
     </div>
   </div>
-</section>
+</WidgetWrapper>
diff --git a/src/components/widgets/Steps2.astro b/src/components/widgets/Steps2.astro
index 68e2981..9482ff1 100644
--- a/src/components/widgets/Steps2.astro
+++ b/src/components/widgets/Steps2.astro
@@ -28,14 +28,14 @@ const {
         tagline={tagline}
         callToAction={callToAction}
         classes={{
-          container: 'text-left mb-4 md:mb-8',
+          container: 'text-center md:text-left mb-4 md:mb-8',
           title: 'mb-4 text-3xl lg:text-4xl font-bold font-heading',
           subtitle: 'mb-8 text-xl text-muted dark:text-slate-400',
           // ...((classes?.headline as {}) ?? {}),
         }}
       />
 
-      <div class="w-full">
+      <div class="w-full text-center md:text-left">
         {
           typeof callToAction === 'string' ? (
             <Fragment set:html={callToAction} />
@@ -52,7 +52,7 @@ const {
         }
       </div>
     </div>
-    <div class="w-full lg:w-1/2 px-8 sm:px-0">
+    <div class="w-full lg:w-1/2 px-0">
       <ul class="space-y-10">
         {
           items && items.length
diff --git a/src/pages/about.astro b/src/pages/about.astro
index bc256e2..67cc440 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -30,6 +30,7 @@ const metadata = {
   <!-- Stats Widget ****************** -->
 
   <Stats
+    title="Statistics about us"
     stats={[
       { title: 'Offices', amount: '4' },
       { title: 'Employees', amount: '248' },
@@ -120,7 +121,7 @@ const metadata = {
 
   <Steps2
     title="Our values"
-    subtitle="Maecenas eu tellus eget est scelerisque lacinia et a diam. Aliquam velit lorem, vehicula id fermentum et, rhoncus et purus. Nulla facilisi. Vestibulum malesuada lacus id nibh posuere feugiat."
+    subtitle="Maecenas eu tellus eget est scelerisque lacinia et a diam. Aliquam velit lorem, vehicula id fermentum et, rhoncus et purus. Nulla facilisi. Vestibulum malesuada lacus."
     items={[
       {
         title: 'Customer-centric approach',
@@ -144,7 +145,7 @@ const metadata = {
 
   <Steps2
     title="Achievements"
-    subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla, sed porttitor est nibh at nulla. Praesent placerat enim ut ex tincidunt vehicula. Fusce sit amet dui tellus."
+    subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla, sed porttitor est nibh at nulla."
     isReversed={true}
     callToAction={{
       text: 'See more',
@@ -174,7 +175,8 @@ const metadata = {
   <!-- Features2 Widget ************** -->
 
   <Features2
-    tagline="Our locations"
+    title="Our locations"
+    tagline="Find us"
     columns={4}
     items={[
       {
@@ -199,7 +201,8 @@ const metadata = {
   <!-- Features2 Widget ************** -->
 
   <Features2
-    tagline="Technical Support"
+    title="Technical Support"
+    tagline="Contact us"
     columns={2}
     items={[
       {
diff --git a/src/pages/index.astro b/src/pages/index.astro
index b3e01b5..596e468 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -36,8 +36,9 @@ const metadata = {
         <span class="font-semibold">AstroWind</span> is a free, customizable and production-ready template for Astro 2.0
         + Tailwind CSS.</span
       >
-      <span class="block mb-1 sm:hidden font-bold text-blue-600">AstroWind: Production-ready.</span> 
-      Suitable for Startups, Small Business, SaaS websites, Professional Portfolios, Marketing websites, Landing Pages & Blogs.
+      <span class="block mb-1 sm:hidden font-bold text-blue-600">AstroWind: Production-ready.</span>
+       Suitable for Startups, Small Business, SaaS websites, Professional Portfolios, Marketing websites, Landing Pages
+      & Blogs.
     </Fragment>
   </Hero>
 
@@ -80,7 +81,7 @@ const metadata = {
       {
         title: 'Search Engine Optimization (SEO)',
         description:
-          'SEO lies in its ability to enhance a website\'s visibility, driving organic traffic and enabling it to reach a wider audience.',
+          "SEO lies in its ability to enhance a website's visibility, driving organic traffic and enabling it to reach a wider audience.",
         icon: 'tabler:arrows-right-left',
       },
       {
@@ -124,6 +125,10 @@ const metadata = {
        Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione ut, persius eripuit quo id. Sit te
       euismod tacimates.
     </Fragment>
+
+    <Fragment slot="bg">
+      <div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
+    </Fragment>
   </Content>
 
   <!-- Content Widget **************** -->
@@ -155,7 +160,11 @@ const metadata = {
       src: import('~/assets/images/vintage.jpg'),
       alt: 'Vintage Image',
     }}
-  />
+  >
+    <Fragment slot="bg">
+      <div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
+    </Fragment>
+  </Content>
 
   <!-- Steps Widget ****************** -->
 
diff --git a/src/pages/landing/mobile-app.astro b/src/pages/landing/mobile-app.astro
index d919239..5bd925c 100644
--- a/src/pages/landing/mobile-app.astro
+++ b/src/pages/landing/mobile-app.astro
@@ -60,8 +60,9 @@ const metadata = {
   <!-- Features3 Widget ************** -->
 
   <Features3
-    subtitle="Tired of spending hours crafting documents from scratch? Our app offers an innovative solution. With a wide array of professionally designed templates, you can now create stunning documents in minutes. Save time, achieve a polished look, and customize templates to fit your style. Join thousands of satisfied users who've transformed their documents effortlessly. Explore our templates now and experience the difference."
-    tagline="Step-by-step guide on how to use our app"
+    title="How to use our app?"
+    subtitle="Tired of spending hours crafting documents from scratch? Our app offers an innovative solution. With a wide array of professionally designed templates, you can now create stunning documents in minutes. Explore our templates now and experience the difference."
+    tagline="Step-by-step guide"
     columns={2}
     items={[
       {
@@ -182,6 +183,7 @@ const metadata = {
   <!-- Stats Widget ****************** -->
 
   <Stats
+    title="Statistics of our app"
     stats={[
       { amount: '20K', icon: 'tabler:download' },
       { amount: '18.5K', icon: 'tabler:users' },
@@ -192,7 +194,7 @@ const metadata = {
   <!-- Testimonials Widget *********** -->
 
   <Testimonials
-    tagline="What our users say about us?"
+    title="What our users say?"
     testimonials={[
       {
         testimonial:
@@ -263,11 +265,7 @@ const metadata = {
           'Proin aliquet, arcu in semper consectetur, ipsum urna pellentesque ipsum, sit amet aliquam odio nunc ac orci.',
       },
     ]}
-  >
-    <Fragment slot="bg">
-      <div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
-    </Fragment>
-  </FAQs>
+  />
 
   <!-- CallToAction Widget *********** -->
 
diff --git a/src/pages/landing/saas.astro b/src/pages/landing/saas.astro
index a49f154..52c3329 100644
--- a/src/pages/landing/saas.astro
+++ b/src/pages/landing/saas.astro
@@ -20,12 +20,12 @@ const metadata = {
       {...headerData}
       actions={[
         {
-          type: "ghost",
+          type: 'ghost',
           text: 'Login',
           href: '#',
         },
         {
-          type: "primary",
+          type: 'primary',
           text: 'Sign Up',
           href: '#',
         },
@@ -48,11 +48,11 @@ const metadata = {
 
     <Fragment slot="subtitle">
       <span class="hidden sm:inline">
-        <span class="font-semibold">AstroWind</span> is a free, customizable and production-ready template for Astro 2.0 +
-        Tailwind CSS.</span
+        <span class="font-semibold">AstroWind</span> is a free, customizable and production-ready template for Astro 2.0
+        + Tailwind CSS.</span
       >
-      <span class="block mb-1 sm:hidden font-bold text-blue-600">AstroWind: Production-ready.</span> Suitable for Startups,
-      Small Business, Sass Websites, Professional Portfolios, Marketing Websites, Landing Pages & Blogs.
+      <span class="block mb-1 sm:hidden font-bold text-blue-600">AstroWind: Production-ready.</span> Suitable for
+      Startups, Small Business, Sass Websites, Professional Portfolios, Marketing Websites, Landing Pages & Blogs.
     </Fragment>
   </Hero2>
 
@@ -84,14 +84,19 @@ const metadata = {
   >
     <Fragment slot="content">
       <h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">Ad vix debet docendi</h3>
-      Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione ut, persius eripuit quo id. Sit te euismod
-      tacimates.
+       Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione ut, persius eripuit quo id. Sit te
+      euismod tacimates.
+    </Fragment>
+
+    <Fragment slot="bg">
+      <div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
     </Fragment>
   </Content>
 
   <!-- Content Widget **************** -->
 
   <Content
+    isAfterContent={true}
     items={[
       {
         title: 'Per ei quaeque sensibus',
@@ -116,8 +121,12 @@ const metadata = {
   >
     <Fragment slot="content">
       <h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">Ad vix debet docendi</h3>
-      Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione ut, persius eripuit quo id. Sit te euismod
-      tacimates.
+       Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione ut, persius eripuit quo id. Sit te
+      euismod tacimates.
+    </Fragment>
+
+    <Fragment slot="bg">
+      <div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
     </Fragment>
   </Content>
 
@@ -125,6 +134,7 @@ const metadata = {
 
   <Content
     isReversed
+    isAfterContent={true}
     items={[
       {
         title: 'Per ei quaeque sensibus',
@@ -149,8 +159,12 @@ const metadata = {
   >
     <Fragment slot="content">
       <h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">Ad vix debet docendi</h3>
-      Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione ut, persius eripuit quo id. Sit te euismod
-      tacimates.
+       Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione ut, persius eripuit quo id. Sit te
+      euismod tacimates.
+    </Fragment>
+
+    <Fragment slot="bg">
+      <div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
     </Fragment>
   </Content>
 
diff --git a/src/pages/landing/startup.astro b/src/pages/landing/startup.astro
index 06f32d2..0db6b20 100644
--- a/src/pages/landing/startup.astro
+++ b/src/pages/landing/startup.astro
@@ -57,6 +57,7 @@ const metadata = {
   <!-- Stats Widget ****************** -->
 
   <Stats
+    title="Our statistics"
     stats={[
       { title: 'Templates', amount: '56' },
       { title: 'Downloads', amount: '182K' },