diff --git a/src/assets/styles/base.css b/src/assets/styles/base.css
index eb28e6b..0762253 100644
--- a/src/assets/styles/base.css
+++ b/src/assets/styles/base.css
@@ -12,7 +12,7 @@
 	}
 
 	.btn-primary {
-		@apply font-semibold bg-primary-600 text-white border-primary-600 hover:bg-primary-800 hover:border-primary-800 hover:text-white dark:text-white dark:bg-primary-700 dark:border-primary-700 dark:hover:border-primary-900 dark:hover:bg-primary-900;
+		@apply font-semibold bg-primary-800 text-white border-primary-800 hover:bg-primary-900 hover:border-primary-900 hover:text-white dark:text-white dark:bg-primary-700 dark:border-primary-700 dark:hover:border-primary-900 dark:hover:bg-primary-900;
 	}
 }
 
diff --git a/src/components/blog/GridItem.astro b/src/components/blog/GridItem.astro
index 230805e..76fca52 100644
--- a/src/components/blog/GridItem.astro
+++ b/src/components/blog/GridItem.astro
@@ -37,7 +37,7 @@ const image = await findImage(post.image);
 			) : (
 				<a
 					href={getPermalink(post.slug, 'post')}
-					class="hover:text-primary-600 transition ease-in duration-200"
+					class="hover:text-primary-800 dark:hover:text-primary-700  transition ease-in duration-200"
 				>
 					{post.title}
 				</a>
diff --git a/src/components/blog/HighlightedPosts.astro b/src/components/blog/HighlightedPosts.astro
index a2a3189..e58ad03 100644
--- a/src/components/blog/HighlightedPosts.astro
+++ b/src/components/blog/HighlightedPosts.astro
@@ -37,7 +37,7 @@ const posts = await findPostsByIds(postIds);
 			{
 				allPostsText && allPostsLink && (
 					<a
-						class="text-gray-500 dark:text-slate-400 hover:text-primary-600 transition ease-in duration-200 block mb-6 md:mb-0"
+						class="text-gray-500 dark:text-slate-400 hover:text-primary-800 transition ease-in duration-200 block mb-6 md:mb-0"
 						href={allPostsLink}
 					>
 						{allPostsText} »
diff --git a/src/components/blog/LatestPosts.astro b/src/components/blog/LatestPosts.astro
index b46cead..df47af8 100644
--- a/src/components/blog/LatestPosts.astro
+++ b/src/components/blog/LatestPosts.astro
@@ -13,7 +13,7 @@ const posts = await findLatestPosts({ count });
 		<h2 class="max-w-lg mb-2 text-3xl font-bold tracking-tight sm:text-4xl sm:leading-none lg:mb-5 group font-heading">
 			<span class="inline-block mb-1 sm:mb-4"
 				>Latest articles<br class="hidden md:block" /> in our <a
-					class="hover:text-primary-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
+					class="hover:text-primary-800 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
 					href={getBlogPermalink()}>Blog</a
 				>
 			</span>
diff --git a/src/components/blog/ListItem.astro b/src/components/blog/ListItem.astro
index 73ea4db..3ed763f 100644
--- a/src/components/blog/ListItem.astro
+++ b/src/components/blog/ListItem.astro
@@ -52,7 +52,7 @@ const link = !BLOG?.post?.disabled ? getPermalink(post.slug, 'post') : '';
 				{
 					link ? (
 						<a
-							class="hover:text-primary-600 hover:underline hover:underline-offset-4 hover:decoration-1 hover:decoration-dotted transition ease-in duration-200"
+							class="hover:text-primary-800 dark:hover:text-primary-700 transition ease-in duration-200"
 							href={link}
 						>
 							{post.title}
diff --git a/src/components/blog/SinglePost.astro b/src/components/blog/SinglePost.astro
index 1c613ce..892ab89 100644
--- a/src/components/blog/SinglePost.astro
+++ b/src/components/blog/SinglePost.astro
@@ -58,7 +58,7 @@ const { post, url } = Astro.props;
 			}
 		</header>
 		<div
-			class="mx-auto px-6 sm:px-6 max-w-3xl prose prose-lg lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary-600 dark:prose-a:text-primary-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
+			class="mx-auto px-6 sm:px-6 max-w-3xl prose prose-lg lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary-800 dark:prose-a:text-primary-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
 		>
 			{
 				post.Content ? (
diff --git a/src/components/common/Tags.astro b/src/components/common/Tags.astro
index 26cb0bd..160fd21 100644
--- a/src/components/common/Tags.astro
+++ b/src/components/common/Tags.astro
@@ -16,8 +16,8 @@ const { tags, class: className = 'text-sm' } = Astro.props;
 	tags && Array.isArray(tags) && (
 		<ul class={className}>
 			{tags.map((tag) => (
-				<li class="bg-gray-100 dark:bg-slate-700 inline-block mr-2 mb-2 py-0.5 px-2 lowercase">
-					{BLOG?.tag?.disabled ? tag : <a href={getPermalink(tag, 'tag')} class="text-gray-600 dark:text-slate-300 hover:text-primary-600 dark:hover:text-gray-200">{tag}</a>}
+				<li class="bg-gray-100 dark:bg-slate-700 inline-block mr-2 mb-2 py-0.5 px-2 lowercase font-medium">
+					{BLOG?.tag?.disabled ? tag : <a href={getPermalink(tag, 'tag')} class="text-gray-600 dark:text-slate-300 hover:text-primary-800 dark:hover:text-gray-200">{tag}</a>}
 				</li>
 			))}
 		</ul>
diff --git a/src/components/widgets/Announcement.astro b/src/components/widgets/Announcement.astro
index 16e8be0..c6990ee 100644
--- a/src/components/widgets/Announcement.astro
+++ b/src/components/widgets/Announcement.astro
@@ -3,12 +3,12 @@ import { getPermalink } from '~/utils/permalinks';
 ---
 
 <div
-	class="hidden md:block bg-primary-100 dark:bg-slate-800 dark:border-slate-800 dark:text-slate-400 border-b border-primary-100 text-sm px-3 py-2 text-gray-800 overflow-hidden whitespace-nowrap text-ellipsis"
+	class="hidden md:block bg-primary-900 dark:bg-slate-800 dark:border-slate-800 dark:text-slate-400 border-b border-primary-900 text-sm px-3 py-2 text-gray-200 overflow-hidden whitespace-nowrap text-ellipsis"
 >
-	<span class="text-xs py-0.5 px-1 bg-primary-200 dark:bg-slate-900 dark:text-slate-400 font-semibold">NEW</span>
+	<span class="text-xs py-0.5 px-1 bg-primary-800 dark:bg-slate-700 dark:text-slate-300 font-semibold">NEW</span>
 	<a
 		href={getPermalink('useful-resources-to-create-websites', 'post')}
-		class="hover:underline text-gray-700 dark:text-slate-400"
+		class="hover:underline text-gray-200 dark:text-slate-400"
 		>Useful tools and resources to create a professional website »</a
 	>
 	<a
diff --git a/src/components/widgets/CallToAction.astro b/src/components/widgets/CallToAction.astro
index 20740bc..d3d1994 100644
--- a/src/components/widgets/CallToAction.astro
+++ b/src/components/widgets/CallToAction.astro
@@ -23,7 +23,7 @@ const {
 <section class="relative">
 	<div class="max-w-6xl mx-auto px-4 sm:px-6">
 		<div class="py-12 md:py-20">
-			<div class="max-w-3xl mx-auto text-center p-6 rounded-md shadow-xl dark:shadow-none">
+			<div class="max-w-3xl mx-auto text-center p-6 rounded-md shadow-xl dark:shadow-none dark:border dark:border-slate-600">
 				{
 					title && (
 						<h2
diff --git a/src/components/widgets/Content.astro b/src/components/widgets/Content.astro
new file mode 100644
index 0000000..d743f2c
--- /dev/null
+++ b/src/components/widgets/Content.astro
@@ -0,0 +1,107 @@
+---
+import Icon from "astro-icon"
+import { Picture } from '@astrojs/image/components';
+
+interface Item {
+	title: string;
+	description?: string;
+	icon?: string;
+}
+
+export interface Props {
+	title?: string;
+	subtitle?: string;
+	highlight?: string;
+	content?: string;
+	items?: Array<Item>;
+	image?: string | any; // TODO: find HTMLElementProps
+	isReversed?: boolean;
+	isAfterContent?: boolean;
+}
+
+const {
+	title = await Astro.slots.render('title'),
+	subtitle = await Astro.slots.render('subtitle'),
+	highlight,
+	content = await Astro.slots.render('content'),
+	items = [],
+	image = await Astro.slots.render('image'),
+	isReversed = false,
+	isAfterContent = false,
+} = Astro.props;
+---
+
+<section class={`bg-primary-50 dark:bg-slate-800 py-16 md:py-20 ${isAfterContent ? 'pt-0 md:pt-0' : ''}`}>
+	<div class="max-w-xl sm:mx-auto lg:max-w-2xl">
+		{
+			(title || subtitle || highlight) && (
+				<div class="mb-10 md:mx-auto text-center md:mb-12 max-w-3xl">
+					{highlight && (
+						<p
+							class="text-base text-primary-800 dark:text-primary-200 font-semibold tracking-wide uppercase"
+							set:html={highlight}
+						/>
+					)}
+					{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-gray-600 dark:text-slate-400" set:html={subtitle} />
+					)}
+				</div>
+			)
+		}
+	</div>
+	<div class="mx-auto max-w-6xl 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">
+				{content && <div class="mb-12 text-lg text-gray-600 dark:text-slate-400" set:html={content} />}
+
+				{
+					items && (
+						<div class="space-y-8">
+							{items.map(({ title: title2, description, icon }) => (
+								<div class="flex">
+									<div class="flex-shrink-0">
+										<div class="flex h-7 w-7 items-center justify-center rounded-full bg-blue-800 text-gray-50">
+											<Icon name={icon? icon : "tabler:check"} class="w-5 h-5" />
+										</div>
+									</div>
+									<div class="ml-4">
+										{title2 && <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-white">{title2}</h3>}
+										{description && <p class="mt-2 text-gray-600 dark:text-slate-400" set:html={description} />}
+									</div>
+								</div>
+							))}
+						</div>
+					)
+				}
+			</div>
+			<div aria-hidden="true" class="mt-10 md:mt-0 md:basis-1/2">
+				{
+					image && (
+						<div class="relative m-auto max-w-4xl">
+							{typeof image === 'string' ? (
+								<Fragment set:html={image} />
+							) : (
+								<Picture
+									class="mx-auto w-full rounded-lg bg-gray-500 shadow-lg"
+									width={500}
+									height={500}
+									widths={[400, 768]}
+									sizes="(max-width: 768px) 100vw, 432px"
+									aspectRatio="500:500"
+									{...image}
+								/>
+							)}
+						</div>
+					)
+				}
+			</div>
+		</div>
+	</div>
+</section>
diff --git a/src/components/widgets/FAQs.astro b/src/components/widgets/FAQs.astro
index e92d200..8a072de 100644
--- a/src/components/widgets/FAQs.astro
+++ b/src/components/widgets/FAQs.astro
@@ -9,33 +9,39 @@ interface Item {
 export interface Props {
 	title?: string;
 	subtitle?: string;
+	highlight?: string;
 	items: Array<Array<Item>>;
 }
 
 const {
 	title = await Astro.slots.render('title'),
 	subtitle = await Astro.slots.render('subtitle'),
+	highlight,
 	items = [],
 } = Astro.props;
 ---
 
 <div class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
 	<div class="max-w-xl sm:mx-auto lg:max-w-2xl">
-		<div class="max-w-xl mb-10 md:mx-auto md:text-center lg:max-w-2xl md:mb-12">
-			{
-				title && (
-					<h2
-						class="max-w-lg mb-4 text-3xl font-bold leading-none md:tracking-tight sm:text-4xl md:mx-auto font-heading"
-						set:html={title}
-					/>
-				)
-			}
-			{
-				subtitle && (
-					<p class="max-w-3xl mx-auto text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />
-				)
-			}
-		</div>
+		{
+			(title || subtitle || highlight) && (
+				<div class="max-w-xl mb-10 md:mx-auto md:text-center lg:max-w-2xl md:mb-12">
+					{highlight && (
+						<p
+							class="text-base text-primary-800 dark:text-primary-200 font-semibold tracking-wide uppercase"
+							set:html={highlight}
+						/>
+					)}
+					{title && (
+						<h2
+							class="max-w-lg mb-4 text-3xl font-bold leading-none md:tracking-tight sm:text-4xl md:mx-auto font-heading"
+							set:html={title}
+						/>
+					)}
+					{subtitle && <p class="max-w-3xl mx-auto text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />}
+				</div>
+			)
+		}
 	</div>
 	<div class="max-w-screen-xl sm:mx-auto">
 		<div class="grid grid-cols-1 gap-x-8 gap-y-8 lg:gap-x-16 md:grid-cols-2">
@@ -46,10 +52,10 @@ const {
 							{subitems.map(({ question, answer }) => (
 								<div>
 									<h3 class="mb-4 text-xl font-bold">
-										<Icon name="tabler:arrow-down-right" class="w-7 h-7 text-primary-500 inline-block" />
+										<Icon name="tabler:arrow-down-right" class="w-7 h-7 text-primary-800 inline-block" />
 										{question}
 									</h3>
-									{answer && <div class="text-gray-700 dark:text-gray-400" set:html={answer}></div>}
+									{answer && <div class="text-gray-700 dark:text-gray-400" set:html={answer} />}
 								</div>
 							))}
 						</div>
diff --git a/src/components/widgets/Features.astro b/src/components/widgets/Features.astro
index f45cc0b..71017fc 100644
--- a/src/components/widgets/Features.astro
+++ b/src/components/widgets/Features.astro
@@ -29,7 +29,7 @@ const {
 				<div class="mb-10 md:mx-auto text-center md:mb-12 max-w-3xl">
 					{highlight && (
 						<p
-							class="text-base text-primary-600 dark:text-primary-200 font-semibold tracking-wide uppercase"
+							class="text-base text-primary-800 dark:text-primary-200 font-semibold tracking-wide uppercase"
 							set:html={highlight}
 						/>
 					)}
@@ -53,7 +53,7 @@ const {
 						{subitems.map(({ title, description, icon }) => (
 							<div class="flex flex-row max-w-md">
 								<div class="mb-4 mr-4">
-									<div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary-500 dark:bg-primary-700">
+									<div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary-800 dark:bg-primary-700">
 										{icon && <Icon name={icon} class="w-6 h-6 text-white icon-light" />}
 									</div>
 								</div>
diff --git a/src/components/widgets/Features2.astro b/src/components/widgets/Features2.astro
index 537db2d..44b2da5 100644
--- a/src/components/widgets/Features2.astro
+++ b/src/components/widgets/Features2.astro
@@ -2,8 +2,8 @@
 import { Icon } from 'astro-icon';
 
 interface Item {
-	title: string;
-	description: string;
+	title?: string;
+	description?: string;
 	icon?: string;
 }
 
@@ -19,7 +19,6 @@ const {
 	subtitle = await Astro.slots.render('subtitle'),
 	highlight,
 	items = [],
-	responsiveGrid = { xs: 1, sm: 1, md: 2, lg: 4 }
 } = Astro.props;
 ---
 
@@ -32,7 +31,7 @@ const {
 					<div class="mb-8 md:mx-auto text-center max-w-3xl">
 						{highlight && (
 							<p
-								class="text-base text-primary-600 dark:text-primary-200 font-semibold tracking-wide uppercase"
+								class="text-base text-primary-800 dark:text-primary-200 font-semibold tracking-wide uppercase"
 								set:html={highlight}
 							/>
 						)}
@@ -49,16 +48,15 @@ const {
 					</div>
 				)
 			}
-			<div class={`grid gap-6 grid-cols-${responsiveGrid?.xs || 1} sm:grid-cols-${responsiveGrid?.sm || 1} md:grid-cols-${responsiveGrid?.md || 2} lg:grid-cols-${responsiveGrid?.lg || 4} items-start my-12 dark:text-white`}>
+			<div class={`grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 my-12 dark:text-white items-stretch`}>
 				{
 					items.map(({ title, description, icon }) => (
-						<div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-lg hover:shadow-md transition dark:border dark:border-slate-800">
-							<div class="flex items-center mb-4">
+						<div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-lg hover:shadow-md transition border border-transparent dark:border-slate-800">
+							<div class="flex items-center">
 								<Icon name={icon} class="w-10 h-10" />
-
 								<div class="ml-4 text-xl font-bold">{title}</div>
 							</div>
-							<p class="text-gray-500 dark:text-gray-400 text-md" set:html={description} />
+							{description && <p class="text-gray-500 dark:text-gray-400 text-md mt-4" set:html={description} />}
 						</div>
 					))
 				}
diff --git a/src/components/widgets/Note.astro b/src/components/widgets/Note.astro
index dabe45f..216e882 100644
--- a/src/components/widgets/Note.astro
+++ b/src/components/widgets/Note.astro
@@ -2,7 +2,7 @@
 import { Icon } from 'astro-icon';
 ---
 
-<section class="bg-primary-100 dark:bg-slate-800">
+<section class="bg-primary-50 dark:bg-slate-800">
 	<div class="max-w-6xl mx-auto px-4 sm:px-6 py-4 text-md text-center font-medium">
 		<span class="font-bold">
 			<Icon name="tabler:info-square" class="w-5 h-5 inline-block align-text-bottom" /> Philosophy:</span
diff --git a/src/components/widgets/Stats.astro b/src/components/widgets/Stats.astro
index 3464e79..e8b642a 100644
--- a/src/components/widgets/Stats.astro
+++ b/src/components/widgets/Stats.astro
@@ -24,7 +24,7 @@ const {
 		(title || subtitle || highlight) && (
 			<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
 				{highlight && (
-					<p class="text-base text-primary-600 dark:text-primary-200 font-semibold tracking-wide uppercase">
+					<p class="text-base text-primary-800 dark:text-primary-200 font-semibold tracking-wide uppercase">
 						{highlight}
 					</p>
 				)}
@@ -44,7 +44,7 @@ const {
 		{
 			items.map(({ name, value }) => (
 				<div class="text-center md:border-r md:last:border-none dark:md:border-slate-500 mb-12 md:mb-0">
-					<div class="text-[2.6rem] font-bold lg:text-5xl xl:text-6xl text-primary-500 font-heading">{value}</div>
+					<div class="text-[2.6rem] font-bold lg:text-5xl xl:text-6xl text-primary-800 dark:text-primary-600 font-heading">{value}</div>
 					<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">
 						{name}
 					</p>
diff --git a/src/components/widgets/Steps.astro b/src/components/widgets/Steps.astro
index d8bf88a..0713ec9 100644
--- a/src/components/widgets/Steps.astro
+++ b/src/components/widgets/Steps.astro
@@ -23,34 +23,34 @@ const {
 
 <section class="px-4 py-16 sm:px-6 mx-auto lg:px-8 lg:py-20 max-w-6xl">
 	<div class="grid gap-6 row-gap-10 md:grid-cols-2">
-		<div class="md:pb-6 md:pr-16 mb-4 md:mb-0">
-			{title && <h2 class="mb-8 text-3xl lg:text-4xl font-bold font-heading" set:html={title} />}
-			{
-				items &&
-					items.length &&
-					items.map(({ title, description, icon }, index) => (
-						<div class="flex">
-							<div class="flex flex-col items-center mr-4">
-								<div>
-									{index !== items.length - 1 ? (
-										<div class="flex items-center justify-center w-10 h-10 rounded-full border-primary-600 border-2">
-											{icon && <Icon name={icon} class="w-6 h-6 text-primary-600 dark:text-slate-200" />}
-										</div>
-									) : (
-										<div class="flex items-center justify-center w-10 h-10 rounded-full border-primary-600 border-2 bg-primary-600">
-											<Icon name={icon} class="w-6 h-6 text-white dark:text-slate-200" />
-										</div>
-									)}
+		<div class="md:py-4 md:pr-16 mb-4 md:mb-0">
+				{title && <h2 class="mb-8 text-3xl lg:text-4xl font-bold font-heading" set:html={title} />}
+				{
+					items &&
+						items.length &&
+						items.map(({ title, description, icon }, index) => (
+							<div class="flex">
+								<div class="flex flex-col items-center mr-4">
+									<div>
+										{index !== items.length - 1 ? (
+											<div class="flex items-center justify-center w-10 h-10 rounded-full border-primary-800 dark:border-primary-700 border-2">
+												{icon && <Icon name={icon} class="w-6 h-6 text-primary-800 dark:text-slate-200" />}
+											</div>
+										) : (
+											<div class="flex items-center justify-center w-10 h-10 rounded-full border-primary-800 border-2 bg-primary-800 dark:bg-primary-700 dark:border-primary-700">
+												<Icon name={icon} class="w-6 h-6 text-white dark:text-slate-200" />
+											</div>
+										)}
+									</div>
+									<div class="w-px h-full bg-gray-300 dark:bg-slate-500" />
+								</div>
+								<div class={`pt-1 ${index !== items.length - 1 ? 'pb-8' : ''}`}>
+									{title && <p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300" set:html={title} />}
+									{description && <p class="text-gray-600 dark:text-slate-400" set:html={description} />}
 								</div>
-								<div class="w-px h-full bg-gray-300 dark:bg-slate-500" />
 							</div>
-							<div class={`pt-1 ${index !== items.length - 1 ? 'pb-8' : ''}`}>
-								{title && <p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300" set:html={title} />}
-								{description && <p class="text-gray-600 dark:text-slate-400" set:html={description} />}
-							</div>
-						</div>
-					))
-			}
+						))
+				}
 		</div>
 		<div class="relative">
 			{
diff --git a/src/components/widgets/Steps2.astro b/src/components/widgets/Steps2.astro
index b493a42..af08f32 100644
--- a/src/components/widgets/Steps2.astro
+++ b/src/components/widgets/Steps2.astro
@@ -28,6 +28,39 @@ const {
 	callToAction = await Astro.slots.render('callToAction'),
 	items = [],
 } = Astro.props;
+
+/**
+ * 
+	
+<!-- Steps2 Widget Example ***************** -->
+
+<Steps2
+	title="Sed ac magna sit amet risus tristique interdum, at vel velit in hac habitasse platea dictumst."
+	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."
+	callToAction={{
+		text: 'Get template',
+		href: 'https://github.com/onwidget/astrowind',
+		icon: 'tabler:download',
+	}}
+	items={[
+		{
+			title: 'Responsive Elements',
+			description:
+				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
+		},
+		{
+			title: 'Flexible Team',
+			description:
+				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
+		},
+		{
+			title: 'Ecologic Software',
+			description:
+				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
+		},
+	]}
+/>
+ */
 ---
 
 <section>
@@ -40,7 +73,7 @@ const {
 							{
 								highlight && (
 									<p
-										class="text-base text-primary-600 dark:text-primary-200 font-semibold tracking-wide uppercase"
+										class="text-base text-primary-800 dark:text-primary-200 font-semibold tracking-wide uppercase"
 										set:html={highlight}
 									/>
 								)
@@ -73,7 +106,7 @@ const {
 									? items.map(({ title: title2, description, icon }, index) => (
 											<li class="flex md:-mx-4">
 												<div class="pr-4 sm:pl-4">
-													<span class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold rounded-full bg-primary-50 text-primary-600">
+													<span class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold rounded-full bg-primary-100 text-primary-800">
 														{icon ? <Icon name={icon} class="w-6 h-6 icon-bold" /> : index + 1}
 													</span>
 												</div>
diff --git a/src/content/blog/astrowind-template-in-depth.md b/src/content/blog/astrowind-template-in-depth.md
index 0051cd6..e7434b2 100644
--- a/src/content/blog/astrowind-template-in-depth.md
+++ b/src/content/blog/astrowind-template-in-depth.md
@@ -3,7 +3,7 @@ publishDate: 2023-01-08T00:00:00Z
 title: AstroWind template in depth
 description: Lorem ipsum dolor sit amet
 excerpt: Ornare cum cursus laoreet sagittis nunc fusce posuere per euismod dis vehicula a, semper fames lacus maecenas
-image: ~/assets/images/old.jpg
+image: ~/assets/images/stickers.jpg
 category: Tutorials
 tags:
   - astro
diff --git a/src/content/blog/get-started-website-with-astro-tailwind-css.md b/src/content/blog/get-started-website-with-astro-tailwind-css.md
index 99d69db..31d79eb 100644
--- a/src/content/blog/get-started-website-with-astro-tailwind-css.md
+++ b/src/content/blog/get-started-website-with-astro-tailwind-css.md
@@ -3,7 +3,7 @@ publishDate: 2023-01-12T00:00:00Z
 title: Get started with AstroWind to create a website using Astro and Tailwind CSS
 description: Lorem ipsum dolor sit amet
 excerpt: Sint sit cillum pariatur eiusmod nulla pariatur ipsum. Sit laborum anim qui mollit tempor pariatur.
-image: ~/assets/images/steps.jpg
+image: ~/assets/images/do-more.jpg
 category: Tutorials
 tags:
   - astro
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 04618b5..75eab68 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -7,7 +7,7 @@ import Note from '~/components/widgets/Note.astro';
 import Features from '~/components/widgets/Features.astro';
 import Features2 from '~/components/widgets/Features2.astro';
 import Steps from '~/components/widgets/Steps.astro';
-import Steps2 from '~/components/widgets/Steps2.astro';
+import Content from '~/components/widgets/Content.astro';
 import HighlightedPosts from '~/components/blog/HighlightedPosts.astro';
 import FAQs from '~/components/widgets/FAQs.astro';
 import Stats from '~/components/widgets/Stats.astro';
@@ -98,28 +98,94 @@ const meta = {
 		]}
 	/>
 
+	<!-- Content Widget **************** -->
+
+	<Content
+		highlight="Inside template"
+		title="And what's inside? ..."
+		content="Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione ut, persius eripuit quo id. Sit te euismod tacimates."
+		items={[
+			{
+				title: 'Per ei quaeque sensibus',
+				description:
+					'Ex usu illum iudico molestie. Pro ne agam facete mediocritatem, ridens labore facete mea ei. Pro id apeirian dignissim.',
+			},
+			{
+				title: 'Cu imperdiet posidonium sed',
+				description:
+					'Amet utinam aliquando ut mea, malis admodum ocurreret nec et, elit tibique cu nec. Nec ex maluisset inciderint, ex quis.',
+			},
+			{
+				title: 'Nulla omittam sadipscing mel ne',
+				description:
+					'At sed possim oporteat probatus, justo graece ne nec, minim commodo legimus ut vix. Ut eos iudico quando soleat, nam modus.',
+			},
+		]}
+		image={{
+			src: import('~/assets/images/caos.jpg'),
+			alt: 'Colorful Image',
+		}}
+	/>
+
+	<!-- Content Widget **************** -->
+
+	<Content
+		isReversed
+		isAfterContent
+		items={[
+			{
+				title: 'Per ei quaeque sensibus',
+				
+			},
+			{
+				title: 'Cu imperdiet posidonium sed',
+				
+			},
+			{
+				title: 'Nulla omittam sadipscing mel ne',
+				
+			},
+			{
+				title: 'Per ei quaeque sensibus',
+				
+			},
+			{
+				title: 'Cu imperdiet posidonium sed',
+				
+			},
+			{
+				title: 'Nulla omittam sadipscing mel ne',
+				
+			},
+		]}
+		image={{
+			src: import('~/assets/images/vintage.jpg'),
+			alt: 'Vintage Image',
+		}}
+	/>
+
 	<!-- Steps Widget ****************** -->
 
 	<Steps
-		title="Sed ac magna sit amet risus tristique interdum. hac."
+		title="Get your dream website up and running in no time with AstroWind."
 		items={[
 			{
-				title: 'Step 1',
+				title: 'Step 1: <span class="font-medium">Download</span>',
 				description:
-					'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mirisus tempus nulla, sed porttitor est nibh at nulla. Praesent placerat enim ut ex tincidunt vehicula. Fusce sit amet dui tellus.',
-				icon: 'tabler:arrow-down',
+					'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mirisus tempus nulla, sed porttitor est nibh at nulla. Praesent placerat enim ut ex tincidunt vehicula.',
+				icon: 'tabler:package',
 			},
 			{
-				title: 'Step 2',
+				title: 'Step 2: <span class="font-medium">Add content</em>',
 				description:
 					'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mirisus tempus nulla, sed porttitor est nibh at nulla.',
-				icon: 'tabler:arrow-down',
+				icon: 'tabler:letter-case',
 			},
 			{
-				title: 'Step 3',
+				title: 'Step 3: <span class="font-medium">Customize styles</span>',
 				description:
 					'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mirisus tempus nulla, sed porttitor est nibh at nulla. Praesent placerat enim ut ex tincidunt vehicula. Fusce sit amet dui tellus.',
-				icon: 'tabler:arrow-down',
+				icon: 'tabler:paint',
 			},
 			{
 				title: 'Ready!',
@@ -127,7 +193,7 @@ const meta = {
 			},
 		]}
 		image={{
-			src: import('~/assets/images/astronaut.jpg'),
+			src: import('~/assets/images/creativity.jpg'),
 			alt: 'Steps image',
 		}}
 	/>
@@ -142,38 +208,38 @@ const meta = {
 			{
 				title: 'Headers',
 				description:
-					'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
-				icon: 'flat-color-icons:home',
+					'In general, Headers contain information that makes it easier for visitors to interact with the website.',
+				icon: 'flat-color-icons:template',
 			},
 			{
 				title: 'Heros',
 				description:
-					'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
-				icon: 'flat-color-icons:voice-presentation',
+					'If you want your website to get more than its fair share of visitors, the Hero section needs to be stellar.',
+				icon: 'flat-color-icons:gallery',
 			},
 			{
 				title: 'Features',
 				description:
-					'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
-				icon: 'flat-color-icons:video-projector',
+					'Display your product in action and how the Features actually create a solution for your target customer.',
+				icon: 'flat-color-icons:todo-list',
 			},
 			{
 				title: 'Content',
 				description:
 					'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
-				icon: 'flat-color-icons:video-projector',
+				icon: 'flat-color-icons:document',
 			},
 			{
 				title: 'Call-to-Action',
 				description:
 					'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
-				icon: 'flat-color-icons:video-projector',
+				icon: 'flat-color-icons:advertising',
 			},
 			{
 				title: 'Pricing',
 				description:
 					'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
-				icon: 'flat-color-icons:calculator',
+				icon: 'flat-color-icons:currency-exchange',
 			},
 			{
 				title: 'Testimonial',
@@ -181,41 +247,21 @@ const meta = {
 					'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
 				icon: 'flat-color-icons:voice-presentation',
 			},
+			{
+				title: 'Contact',
+				description:
+					'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
+				icon: 'flat-color-icons:business-contact',
+			},
 			{
 				title: 'Footers',
 				description:
 					'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
-				icon: 'flat-color-icons:faq',
+				icon: 'icon-park:page-template',
 			},
 		]}
 	/>
 
-	<!-- Steps2 Widget ***************** -->
-
-	<Steps2
-		title="Sed ac magna sit amet risus tristique interdum, at vel velit in hac habitasse platea dictumst."
-		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."
-		callToAction={{
-			text: 'Get template',
-			href: 'https://github.com/onwidget/astrowind',
-			icon: 'tabler:download',
-		}}
-		items={
-			[{
-				title: "Responsive Elements",
-				description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.",
-			},
-			{
-				title: "Flexible Team",
-				description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.",
-			},
-			{
-				title: "Ecologic Software",
-				description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.",
-			}]
-		}
-	/>
-
 	<!-- HighlightedPosts Widget ******* -->
 
 	<HighlightedPosts
@@ -236,6 +282,8 @@ const meta = {
 
 	<FAQs
 		title="Frequently Asked Questions"
+		subtitle="Duis turpis dui, fringilla mattis sem nec, fringilla euismod neque. Morbi tincidunt lacus nec tortor scelerisque pulvinar."
+		highlight="FAQs"
 		items={[
 			[
 				{