diff --git a/src/components/widgets/Hero.astro b/src/components/widgets/Hero.astro
index 1c46bf9..b39bed8 100644
--- a/src/components/widgets/Hero.astro
+++ b/src/components/widgets/Hero.astro
@@ -1,7 +1,6 @@
 ---
 import { Icon } from 'astro-icon/components';
 import Image from '~/components/common/Image.astro';
-import WidgetWrapper from '../ui/WidgetWrapper.astro';
 
 const {
   title = await Astro.slots.render('title'),
@@ -10,20 +9,10 @@ const {
   callToAction = await Astro.slots.render('callToAction'),
   callToAction2 = await Astro.slots.render('callToAction2'),
   image = await Astro.slots.render('image'),
-
-  id,
-  isDark = false,
-  classes = {},
-  bg = await Astro.slots.render('bg'),
 } = Astro.props;
 ---
 
-<WidgetWrapper
-  id={id}
-  isDark={isDark}
-  containerClass={`relative md:-mt-[76px] not-prose py-0 md:py-0 lg:py-0 ${classes?.container ?? ''}`}
-  bg={bg}
->
+<section class="relative md:-mt-[76px] not-prose">
   <div class="absolute inset-0 pointer-events-none" aria-hidden="true"></div>
   <div class="relative max-w-7xl mx-auto px-4 sm:px-6">
     <div class="pt-0 md:pt-[76px] pointer-events-none"></div>
@@ -104,4 +93,4 @@ const {
       </div>
     </div>
   </div>
-</WidgetWrapper>
+</section>
diff --git a/src/pages/services.astro b/src/pages/services.astro
index 1dd3254..9e49f6b 100644
--- a/src/pages/services.astro
+++ b/src/pages/services.astro
@@ -14,24 +14,15 @@ const metadata = {
 <Layout metadata={metadata}>
   <!-- Hero Widget ******************* -->
 
-  <Hero callToAction={{ text: 'Start exploring', href: '/' }}>
-    <Fragment slot="title">
-      <span class="text-gray-200">Elevate your projects with our stunning templates</span>
-    </Fragment>
-
-    <Fragment slot="subtitle">
-      <span class="text-gray-300"
-        >Explore our meticulously crafted templates tailored to various industries and purposes. From captivating
-        presentations to functional website designs, we offer the tools you need to succeed.</span
-      >
-    </Fragment>
-
-    <div
-      slot="bg"
-      class="absolute inset-0 bg-dark overflow-hidden brightness-[0.25] bg-cover bg-[url('https://images.unsplash.com/photo-1611462985358-60d3498e0364?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')]"
-    >
-    </div>
-  </Hero>
+  <Hero
+    title="Elevate your projects with our stunning templates"
+    subtitle="Explore our meticulously crafted templates tailored to various industries and purposes. From captivating presentations to functional website designs, we offer the tools you need to succeed."
+    callToAction={{ text: 'Start exploring', href: '/' }}
+    image={{
+      src: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80',
+      alt: 'AstroWind Hero Image',
+    }}
+  />
 
   <!-- Features2 Widget ************** -->