diff --git a/src/components/widgets/Pricing.astro b/src/components/widgets/Pricing.astro
index aa8cf42..baa35c6 100644
--- a/src/components/widgets/Pricing.astro
+++ b/src/components/widgets/Pricing.astro
@@ -1,48 +1,33 @@
 ---
-import { Icon } from "astro-icon/components";
-import CTA from "~/components/ui/CTA.astro";
-import Headline from "~/components/ui/Headline.astro";
-import WidgetWrapper from "~/components/ui/WidgetWrapper.astro";
-import type { Pricing } from "~/types";
+import { Icon } from 'astro-icon/components';
+import CTA from '~/components/ui/CTA.astro';
+import Headline from '~/components/ui/Headline.astro';
+import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
+import type { Pricing } from '~/types';
 
 const {
-  title = "",
-  subtitle = "",
-  tagline = "",
+  title = '',
+  subtitle = '',
+  tagline = '',
   prices = [],
 
   id,
   isDark = false,
   classes = {},
-  bg = await Astro.slots.render("bg"),
+  bg = await Astro.slots.render('bg'),
 } = Astro.props as Pricing;
 ---
 
-<WidgetWrapper
-  id={id}
-  isDark={isDark}
-  containerClass={`max-w-6xl mx-auto ${classes?.container ?? ""}`}
-  bg={bg}
->
+<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-screen-xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
   <Headline title={title} subtitle={subtitle} tagline={tagline} />
   <div class="flex items-stretch justify-center">
-    <div
-      class="grid grid-cols-3 gap-3 dark:text-white sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3"
-    >
+    <div class="grid grid-cols-3 gap-4 dark:text-white sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3">
       {
         prices &&
-          prices.map(
-            ({
-              title,
-              price,
-              period,
-              items,
-              callToAction,
-              hasRibbon = false,
-              ribbonTitle,
-            }) => (
-              <div class="col-span-3 mx-auto flex w-full sm:col-span-1 md:col-span-1 lg:col-span-1 xl:col-span-1">
-                <div class="rounded-md border-gray-200 bg-white px-6 pt-10 pb-8 shadow-xl transition duration-300 ease-in-out dark:border dark:border-slate-800 dark:bg-slate-900 relative flex w-full max-w-sm flex-col justify-between text-center">
+          prices.map(({ title, subtitle, price, period, items, callToAction, hasRibbon = false, ribbonTitle }) => (
+            <div class="col-span-3 mx-auto flex w-full sm:col-span-1 md:col-span-1 lg:col-span-1 xl:col-span-1">
+              {price && period && (
+                <div class="rounded-lg backdrop-blur border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900 shadow px-6 py-8 flex w-full max-w-sm flex-col justify-between text-center">
                   {hasRibbon && ribbonTitle && (
                     <div class="absolute right-[-5px] top-[-5px] z-[1] h-[100px] w-[100px] overflow-hidden text-right">
                       <span class="absolute top-[19px] right-[-21px] block w-full rotate-45 bg-green-700 text-center text-[10px] font-bold uppercase leading-5 text-white shadow-[0_3px_10px_-5px_rgba(0,0,0,0.3)] before:absolute before:left-0 before:top-full before:z-[-1] before:border-[3px] before:border-r-transparent before:border-b-transparent before:border-l-green-800 before:border-t-green-800 before:content-[''] after:absolute after:right-0 after:top-full after:z-[-1] after:border-[3px] after:border-l-transparent after:border-b-transparent after:border-r-green-800 after:border-t-green-800 after:content-['']">
@@ -50,48 +35,47 @@ const {
                       </span>
                     </div>
                   )}
-                  <ul class="px-2 py-0">
-                    <li class="text-center text-xl font-medium uppercase leading-6 tracking-wider text-gray-800 dark:text-slate-400">
-                      {title}
-                    </li>
-                    <li class="mt-5 mb-2.5 flex items-center justify-center text-center font-semibold">
-                      <span class="text-5xl">$</span>
-                      <span class="text-6xl">{price}</span>
-                    </li>
-                    <li class="mb-7 text-center text-base font-medium capitalize leading-6 text-gray-600 dark:text-slate-400">
-                      {period}
-                    </li>
-                    {items &&
-                      items.map(({ description, icon }) => (
-                        <li class="mb-1.5 flex items-start text-left text-base leading-7">
-                          <div class="mt-1.5 mr-1.5 flex h-4 w-4 items-center justify-center rounded-full border-2 border-primary bg-primary">
-                            {icon && (
-                              <Icon
-                                name={icon}
-                                class="w-5 h-5 font-bold text-white"
-                              />
-                            )}
-                          </div>
-                          {description}
-                        </li>
-                      ))}
-                  </ul>
+                  <div class="px-2 py-0">
+                    {title && (
+                      <h3 class="text-center text-xl font-semibold uppercase leading-6 tracking-wider mb-2">{title}</h3>
+                    )}
+                    {subtitle && <p class="font-light sm:text-lg text-gray-600 dark:text-slate-400">{subtitle}</p>}
+                    <div class="my-8">
+                      <div class="flex items-center justify-center text-center mb-1">
+                        <span class="text-5xl">$</span>
+                        <span class="text-6xl font-extrabold">{price}</span>
+                      </div>
+                      <span class="text-base leading-6 lowercase text-gray-600 dark:text-slate-400">{period}</span>
+                    </div>
+                    {items && (
+                      <ul role="list" class="my-8 md:my-10 space-y-2 text-left">
+                        {items.map(
+                          ({ description, icon }) =>
+                            description && (
+                              <li class="mb-1.5 flex items-start space-x-3 leading-7">
+                                <div class="rounded-full bg-primary mt-1">
+                                  <Icon name={icon ? icon : 'tabler:check'} class="w-5 h-5 font-bold p-1 text-white" />
+                                </div>
+                                <span>{description}</span>
+                              </li>
+                            )
+                        )}
+                      </ul>
+                    )}
+                  </div>
                   {callToAction && (
-                    <div class="flex justify-center">
-                      <CTA
-                        callToAction={callToAction}
-                        class={`mt-8 ${
-                          hasRibbon
-                            ? "border-primary-600 bg-primary-600 font-semibold text-white hover:border-primary-800 hover:bg-primary-800 hover:text-white dark:border-primary-700 dark:bg-primary-700 dark:text-white dark:hover:border-primary-900 dark:hover:bg-primary-900"
-                            : ""
-                        }`}
-                      />
+                    <div class={`flex justify-center btn ${hasRibbon ? 'btn-primary' : ''}`}>
+                      {typeof callToAction === 'string' ? (
+                        <Fragment set:html={callToAction} />
+                      ) : (
+                        callToAction && callToAction.text && callToAction.href && <CTA callToAction={callToAction} />
+                      )}
                     </div>
                   )}
                 </div>
-              </div>
-            )
-          )
+              )}
+            </div>
+          ))
       }
     </div>
   </div>
diff --git a/src/components/widgets/Steps2.astro b/src/components/widgets/Steps2.astro
index 9482ff1..3f300ac 100644
--- a/src/components/widgets/Steps2.astro
+++ b/src/components/widgets/Steps2.astro
@@ -26,7 +26,6 @@ const {
         title={title}
         subtitle={subtitle}
         tagline={tagline}
-        callToAction={callToAction}
         classes={{
           container: 'text-center md:text-left mb-4 md:mb-8',
           title: 'mb-4 text-3xl lg:text-4xl font-bold font-heading',
diff --git a/src/pages/pricing.astro b/src/pages/pricing.astro
index 7a5bcdd..a55840a 100644
--- a/src/pages/pricing.astro
+++ b/src/pages/pricing.astro
@@ -1,105 +1,97 @@
 ---
 import Layout from '~/layouts/PageLayout.astro';
-
-import Pricing from '~/components/widgets/Pricing.astro';
+import Prices from '~/components/widgets/Pricing.astro';
 
 const metadata = {
-  title: "Pricing",
+  title: 'Pricing',
 };
 ---
 
 <Layout metadata={metadata}>
-  <Pricing
-    title="Basic Pricing"
-    tagline="Pricing"
-    subtitle="Our prices"
+  <Prices
+    title="Our prices"
+    subtitle="Only pay for what you need"
     prices={[
       {
-        "title": "basic",
-        "price": 29,
-        "period": "Per Month",
-        "items": [
+        title: 'basic',
+        subtitle: 'Optimal choice for personal use',
+        price: 29,
+        period: 'per month',
+        items: [
           {
-            "description": "Etiam in libero",
-            "icon": "tabler:check"
+            description: 'Etiam in libero, et volutpat',
           },
           {
-            "description": "Aenean ac nunc",
-            "icon": "tabler:check"
+            description: 'Aenean ac nunc dolor tristique',
           },
           {
-            "description": "Cras scelerisque accumsan libero, et volutpat dolor tristique at",
-            "icon": "tabler:check"
+            description: 'Cras scelerisque accumsan lib',
           },
           {
-            "description": "In hac habitasse",
-            "icon": "tabler:check"
-          }
+            description: 'In hac habitasse',
+          },
         ],
-        "callToAction": {
-          "targetBlank": true,
-          "text": "Free 7-day trial",
-          "href": "#"
-        }
-      },
-      {
-        "title": "standard",
-        "price": 69,
-        "period": "Per Month",
-        "items": [
-          {
-            "description": "Proin vel laoreet",
-            "icon": "tabler:check"
-          },
-          {
-            "description": "Ut efficitur egestas",
-            "icon": "tabler:check"
-          },
-          {
-            "description": "Pellentesque ut nibh",
-            "icon": "tabler:check"
-          },
-          {
-            "description": "Donec fringilla sem",
-            "icon": "tabler:check"
-          }
-        ],
-        "callToAction": {
-          "targetBlank": true,
-          "text": "Free 15-day trial",
-          "href": "#"
+        callToAction: {
+          targetBlank: true,
+          text: 'Free 7-day trial',
+          href: '#',
         },
-        "hasRibbon": true,
-        "ribbonTitle": "popular"
       },
       {
-        "title": "premium",
-        "price": 199,
-        "period": "Per Month",
-        "items": [
+        title: 'standard',
+        subtitle: 'Optimal choice for small teams',
+        price: 69,
+        period: 'Per Month',
+        items: [
           {
-            "description": "Curabitur suscipit risus",
-            "icon": "tabler:check"
+            description: 'Proin vel laoreet',
           },
           {
-            "description": "Aliquam blandit malesuada",
-            "icon": "tabler:check"
+            description: 'Ut efficitur habitasse egestas',
           },
           {
-            "description": "Suspendisse sit amet",
-            "icon": "tabler:check"
+            description: 'Volutpat hac curabitur',
           },
           {
-            "description": "Suspendisse auctor dui",
-            "icon": "tabler:check"
-          }
+            description: 'Pellentesque blandit ut nibh',
+          },
+          {
+            description: 'Donec fringilla sem',
+          },
         ],
-        "callToAction": {
-          "targetBlank": true,
-          "text": "Free 30-day trial",
-          "href": "#"
-        }
-      }
+        callToAction: {
+          targetBlank: true,
+          text: 'Free 15-day trial',
+          href: '#',
+        },
+        hasRibbon: true,
+        ribbonTitle: 'popular',
+      },
+      {
+        title: 'premium',
+        subtitle: 'Optimal choice for companies',
+        price: 199,
+        period: 'Per Month',
+        items: [
+          {
+            description: 'Curabitur suscipit risus',
+          },
+          {
+            description: 'Aliquam habitasse malesuada',
+          },
+          {
+            description: 'Suspendisse sit amet blandit',
+          },
+          {
+            description: 'Suspendisse auctor blandit dui',
+          },
+        ],
+        callToAction: {
+          targetBlank: true,
+          text: 'Free 30-day trial',
+          href: '#',
+        },
+      },
     ]}
   />
 </Layout>
diff --git a/src/types.d.ts b/src/types.d.ts
index 5298748..6ae93e2 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -135,6 +135,7 @@ export interface Item {
 
 export interface Price {
   title?: string;
+  subtitle?: string;
   description?: string;
   price?: number;
   period?: string;