diff --git a/apps/web/src/components/(marketing)/faster-smarter-beautiful-bento.tsx b/apps/web/src/components/(marketing)/faster-smarter-beautiful-bento.tsx
index 2cbaaef53..8b7eaf15c 100644
--- a/apps/web/src/components/(marketing)/faster-smarter-beautiful-bento.tsx
+++ b/apps/web/src/components/(marketing)/faster-smarter-beautiful-bento.tsx
@@ -16,6 +16,21 @@ export const FasterSmarterBeautifulBento = ({
   className,
   ...props
 }: FasterSmarterBeautifulBentoProps) => {
+  const featureCards = [
+    {
+      title: 'Beautiful.',
+      description:
+        'Because signing should be celebrated. That’s why we care about the smallest detail in our product.',
+      image: cardBeautifulFigure,
+    },
+    {
+      title: 'Smart.',
+      description:
+        'Our custom templates come with smart rules that can help you save time and energy.',
+      image: cardSmartFigure,
+    },
+  ];
+
   return (
     <div className={cn('relative', className)} {...props}>
       <div className="absolute inset-0 -z-10 flex items-center justify-center">
@@ -45,32 +60,19 @@ export const FasterSmarterBeautifulBento = ({
           </CardContent>
         </Card>
 
-        <Card className="col-span-2 lg:col-span-1" spotlight>
-          <CardContent className="grid grid-cols-1 gap-8 p-6">
-            <p className="leading-relaxed text-[#555E67]">
-              <strong className="block">Beautiful.</strong>
-              Because signing should be celebrated. That’s why we care about the smallest detail in
-              our product.
-            </p>
-
-            <div className="flex items-center justify-center p-8">
-              <Image src={cardBeautifulFigure} alt="its fast" className="w-full max-w-xs" />
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card className="col-span-2 lg:col-span-1" spotlight>
-          <CardContent className="grid grid-cols-1 gap-8 p-6">
-            <p className="leading-relaxed text-[#555E67]">
-              <strong className="block">Smart.</strong>
-              Our custom templates come with smart rules that can help you save time and energy.
-            </p>
-
-            <div className="flex items-center justify-center p-8">
-              <Image src={cardSmartFigure} alt="its fast" className="w-full max-w-[16rem]" />
-            </div>
-          </CardContent>
-        </Card>
+        {featureCards.map((card, index) => (
+          <Card key={index} className="col-span-2 lg:col-span-1" spotlight>
+            <CardContent className="grid grid-cols-1 gap-8 p-6">
+              <p className="leading-relaxed text-[#555E67]">
+                <strong className="block">{card.title}</strong>
+                {card.description}
+              </p>
+              <div className="flex items-center justify-center p-8">
+                <Image src={card.image} alt="Its fast" className="w-full max-w-[16rem]" />
+              </div>
+            </CardContent>
+          </Card>
+        ))}
       </div>
     </div>
   );
diff --git a/apps/web/src/components/(marketing)/open-build-template-bento.tsx b/apps/web/src/components/(marketing)/open-build-template-bento.tsx
index e7920500b..779ef36e5 100644
--- a/apps/web/src/components/(marketing)/open-build-template-bento.tsx
+++ b/apps/web/src/components/(marketing)/open-build-template-bento.tsx
@@ -13,6 +13,22 @@ import cardTemplateFigure from '~/assets/card-template-figure.png';
 export type OpenBuildTemplateBentoProps = HTMLAttributes<HTMLDivElement>;
 
 export const OpenBuildTemplateBento = ({ className, ...props }: OpenBuildTemplateBentoProps) => {
+  const cardData = [
+    {
+      title: 'Build on top.',
+      description: 'Make it your own through advanced customization and adjustability.',
+      image: cardBuildFigure,
+      imageSize: 'max-w-xs',
+    },
+    {
+      title: 'Template Store (Soon).',
+      description:
+        'Choose a template from the community app store. Or submit your own template for others to use.',
+      image: cardTemplateFigure,
+      imageSize: 'max-w-sm',
+    },
+  ];
+
   return (
     <div className={cn('relative', className)} {...props}>
       <div className="absolute inset-0 -z-10 flex items-center justify-center">
@@ -42,32 +58,19 @@ export const OpenBuildTemplateBento = ({ className, ...props }: OpenBuildTemplat
           </CardContent>
         </Card>
 
-        <Card className="col-span-2 lg:col-span-1" spotlight>
-          <CardContent className="grid grid-cols-1 gap-8 p-6">
-            <p className="leading-relaxed text-[#555E67]">
-              <strong className="block">Build on top.</strong>
-              Make it your own through advanced customization and adjustability.
-            </p>
-
-            <div className="flex items-center justify-center p-8">
-              <Image src={cardBuildFigure} alt="its fast" className="w-full max-w-xs" />
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card className="col-span-2 lg:col-span-1" spotlight>
-          <CardContent className="grid grid-cols-1 gap-8 p-6">
-            <p className="leading-relaxed text-[#555E67]">
-              <strong className="block">Template Store (Soon).</strong>
-              Choose a template from the community app store. Or submit your own template for others
-              to use.
-            </p>
-
-            <div className="flex items-center justify-center p-8">
-              <Image src={cardTemplateFigure} alt="its fast" className="w-full max-w-sm" />
-            </div>
-          </CardContent>
-        </Card>
+        {cardData.map((card, index) => (
+          <Card key={index} className="col-span-2 lg:col-span-1" spotlight>
+            <CardContent className="grid grid-cols-1 gap-8 p-6">
+              <p className="leading-relaxed text-[#555E67]">
+                <strong className="block">{card.title}</strong>
+                {card.description}
+              </p>
+              <div className="flex items-center justify-center p-8">
+                <Image src={card.image} alt="Its fast" className={`w-full ${card.imageSize}`} />
+              </div>
+            </CardContent>
+          </Card>
+        ))}
       </div>
     </div>
   );
diff --git a/apps/web/src/components/(marketing)/share-connect-paid-widget-bento.tsx b/apps/web/src/components/(marketing)/share-connect-paid-widget-bento.tsx
index 05b6a3232..8c7fa74e5 100644
--- a/apps/web/src/components/(marketing)/share-connect-paid-widget-bento.tsx
+++ b/apps/web/src/components/(marketing)/share-connect-paid-widget-bento.tsx
@@ -17,6 +17,29 @@ export const ShareConnectPaidWidgetBento = ({
   className,
   ...props
 }: ShareConnectPaidWidgetBentoProps) => {
+  const cardData = [
+    {
+      title: 'Connections (Soon).',
+      description:
+        'Create connections and automations with Zapier and more to integrate with your favorite tools.',
+      image: cardConnectionsFigure,
+      imageSize: 'max-w-sm',
+    },
+    {
+      title: 'Get paid (Soon).',
+      description: 'Integrated payments with stripe so you don’t have to worry about getting paid.',
+      image: cardPaidFigure,
+      imageSize: 'max-w-[14rem]',
+    },
+    {
+      title: 'React Widget (Soon).',
+      description:
+        'Easily embed Documenso into your product. Simply copy and paste our react widget into your application.',
+      image: cardWidgetFigure,
+      imageSize: 'max-w-xs',
+    },
+  ];
+
   return (
     <div className={cn('relative', className)} {...props}>
       <div className="absolute inset-0 -z-10 flex items-center justify-center">
@@ -45,46 +68,19 @@ export const ShareConnectPaidWidgetBento = ({
           </CardContent>
         </Card>
 
-        <Card className="col-span-2 lg:col-span-1" spotlight>
-          <CardContent className="grid grid-cols-1 gap-8 p-6">
-            <p className="leading-relaxed text-[#555E67]">
-              <strong className="block">Connections (Soon).</strong>
-              Create connections and automations with Zapier and more to integrate with your
-              favorite tools.
-            </p>
-
-            <div className="flex items-center justify-center p-8">
-              <Image src={cardConnectionsFigure} alt="its fast" className="w-full max-w-sm" />
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card className="col-span-2 lg:col-span-1" spotlight>
-          <CardContent className="grid grid-cols-1 gap-8 p-6">
-            <p className="leading-relaxed text-[#555E67]">
-              <strong className="block">Get paid (Soon).</strong>
-              Integrated payments with stripe so you don’t have to worry about getting paid.
-            </p>
-
-            <div className="flex items-center justify-center p-8">
-              <Image src={cardPaidFigure} alt="its fast" className="w-full max-w-[14rem]" />
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card className="col-span-2 lg:col-span-1" spotlight>
-          <CardContent className="grid grid-cols-1 gap-8 p-6">
-            <p className="leading-relaxed text-[#555E67]">
-              <strong className="block">React Widget (Soon).</strong>
-              Easily embed Documenso into your product. Simply copy and paste our react widget into
-              your application.
-            </p>
-
-            <div className="flex items-center justify-center p-8">
-              <Image src={cardWidgetFigure} alt="its fast" className="w-full max-w-xs" />
-            </div>
-          </CardContent>
-        </Card>
+        {cardData.map((card, index) => (
+          <Card key={index} className="col-span-2 lg:col-span-1" gradient={index === 0} spotlight>
+            <CardContent className="grid grid-cols-1 gap-8 p-6">
+              <p className="leading-relaxed text-[#555E67]">
+                <strong className="block">{card.title}</strong>
+                {card.description}
+              </p>
+              <div className="flex items-center justify-center p-8">
+                <Image src={card.image} alt="Its fast" className={`w-full ${card.imageSize}`} />
+              </div>
+            </CardContent>
+          </Card>
+        ))}
       </div>
     </div>
   );