diff --git a/apps/web/components/article-with-multiple-authors/inline-styles.tsx b/apps/web/components/article-with-multiple-authors/inline-styles.tsx
index 420e9196c2..933b3d4498 100644
--- a/apps/web/components/article-with-multiple-authors/inline-styles.tsx
+++ b/apps/web/components/article-with-multiple-authors/inline-styles.tsx
@@ -1,4 +1,5 @@
 import {
+  Column,
   Heading,
   Hr,
   Img,
@@ -7,10 +8,11 @@ import {
   Section,
   Text,
 } from '@react-email/components';
+import { Fragment } from 'react/jsx-runtime';
 import { Layout } from '../_components/layout';
 
 export const component = (
-  <Row>
+  <Section>
     <Hr
       style={{
         borderColor: 'rgb(209,213,219) !important',
@@ -32,19 +34,20 @@ export const component = (
           imgSrc: '/static/steve-wozniak.jpg',
           showDivider: false,
         },
-      ].map((author, index) => (
-        <>
-          <Section
+      ].map((author) => (
+        <Fragment key={author.name}>
+          <Row
             align="left"
-            key={index}
-            style={{ marginTop: '16px', maxWidth: '288px' }}
+            width="288"
+            style={{ marginTop: '16px', width: '288px' }}
           >
-            <Section
+            <Column
+              width="48"
+              height="48"
               style={{
-                display: 'inline-block',
-                marginTop: '5px',
-                maxHeight: '48px',
-                maxWidth: '48px',
+                paddingTop: '5px',
+                height: '48px',
+                width: '48px',
                 textAlign: 'left',
               }}
             >
@@ -60,12 +63,12 @@ export const component = (
                 }}
                 width={48}
               />
-            </Section>
-            <Section
+            </Column>
+            <Column
+              width="100%"
               style={{
-                display: 'inline-block',
-                marginLeft: '18px',
-                maxWidth: '120px',
+                paddingLeft: '18px',
+                width: '100%',
                 textAlign: 'left',
                 verticalAlign: 'top',
               }}
@@ -93,41 +96,42 @@ export const component = (
               >
                 {author.title}
               </Text>
-              <Section style={{ marginTop: '4px' }}>
-                <Link
-                  href="#"
-                  style={{
-                    display: 'inline-flex',
-                    height: '12px',
-                    width: '12px',
-                  }}
-                >
-                  <Img
-                    alt="X"
-                    height={12}
-                    src="/static/x-icon.png"
-                    width={12}
-                  />
-                </Link>
-                <Link
-                  href="#"
-                  style={{
-                    display: 'inline-flex',
-                    height: '12px',
-                    marginLeft: '8px',
-                    width: '12px',
-                  }}
-                >
-                  <Img
-                    alt="LinkedIn"
-                    height={12}
-                    src="/static/in-icon.png"
-                    width={12}
-                  />
-                </Link>
-              </Section>
-            </Section>
-          </Section>
+              <Row width={undefined} style={{ paddingTop: '8px' }} align="left">
+                <Column width="12" height="12">
+                  <Link
+                    href="#"
+                    style={{
+                      height: '12px',
+                      width: '12px',
+                    }}
+                  >
+                    <Img
+                      alt="X"
+                      height={12}
+                      src="/static/x-icon.png"
+                      width={12}
+                    />
+                  </Link>
+                </Column>
+                <Column width="12" height="12" style={{ paddingLeft: 8 }}>
+                  <Link
+                    href="#"
+                    style={{
+                      height: '12px',
+                      width: '12px',
+                    }}
+                  >
+                    <Img
+                      alt="LinkedIn"
+                      height={12}
+                      src="/static/in-icon.png"
+                      width={12}
+                    />
+                  </Link>
+                </Column>
+              </Row>
+            </Column>
+          </Row>
           {author.showDivider ? (
             <Hr
               style={{
@@ -141,10 +145,10 @@ export const component = (
               }}
             />
           ) : null}
-        </>
+        </Fragment>
       ))}
     </Section>
-  </Row>
+  </Section>
 );
 
 export default () => {
diff --git a/apps/web/components/article-with-multiple-authors/tailwind.tsx b/apps/web/components/article-with-multiple-authors/tailwind.tsx
index b529a9bc81..052b49096f 100644
--- a/apps/web/components/article-with-multiple-authors/tailwind.tsx
+++ b/apps/web/components/article-with-multiple-authors/tailwind.tsx
@@ -1,4 +1,5 @@
 import {
+  Column,
   Heading,
   Hr,
   Img,
@@ -7,49 +8,60 @@ import {
   Section,
   Text,
 } from '@react-email/components';
+import { Fragment } from 'react/jsx-runtime';
 import { Layout } from '../_components/layout';
 
 export const component = (
-  <Row>
+  <Section>
     <Hr className="!border-gray-300 mt-[16px] mb-[0px]" />
-    <Section>
-      {[
-        {
-          name: 'Steve Jobs',
-          title: 'Co-Founder & CEO',
-          imgSrc: '/static/steve-jobs.jpg',
-          showDivider: true,
-        },
-        {
-          name: 'Steve Wozniak',
-          title: 'Co-Founder & CTO',
-          imgSrc: '/static/steve-wozniak.jpg',
-          showDivider: false,
-        },
-      ].map((author, index) => (
-        <>
-          <Section align="left" className="mt-[16px] max-w-[288px]" key={index}>
-            <Section className="mt-[5px] inline-block max-h-[48px] max-w-[48px] text-left">
-              <Img
-                alt={author.name}
-                className="block rounded-full object-cover object-center"
-                height={48}
-                src={author.imgSrc}
-                width={48}
-              />
-            </Section>
-            <Section className="ml-[18px] inline-block max-w-[120px] text-left align-top">
-              <Heading
-                as="h3"
-                className="m-0 font-medium text-[14px] text-gray-900 leading-[20px]"
-              >
-                {author.name}
-              </Heading>
-              <Text className="m-0 font-medium text-[12px] text-gray-500 leading-[14px]">
-                {author.title}
-              </Text>
-              <Section className="mt-[4px]">
-                <Link className="inline-flex h-[12px] w-[12px]" href="#">
+    {[
+      {
+        name: 'Steve Jobs',
+        title: 'Co-Founder & CEO',
+        imgSrc: '/static/steve-jobs.jpg',
+        showDivider: true,
+      },
+      {
+        name: 'Steve Wozniak',
+        title: 'Co-Founder & CTO',
+        imgSrc: '/static/steve-wozniak.jpg',
+        showDivider: false,
+      },
+    ].map((author) => (
+      <Fragment key={author.name}>
+        <Row align="left" width="288" className="pt-[16px] w-[288px]">
+          <Column
+            width="48"
+            height="48"
+            align="left"
+            className="pt-[5px] h-[48px] w-[48px]"
+          >
+            <Img
+              alt={author.name}
+              className="block rounded-full object-cover object-center"
+              height={48}
+              src={author.imgSrc}
+              width={48}
+            />
+          </Column>
+          <Column
+            width="100%"
+            className="pl-[18px] w-full"
+            align="left"
+            valign="top"
+          >
+            <Heading
+              as="h3"
+              className="m-0 font-medium text-[14px] text-gray-900 leading-[20px]"
+            >
+              {author.name}
+            </Heading>
+            <Text className="m-0 font-medium text-[12px] text-gray-500 leading-[14px]">
+              {author.title}
+            </Text>
+            <Row width={undefined} className="pt-[8px]" align="left">
+              <Column width="12" height="12">
+                <Link className="h-[12px] w-[12px]" href="#">
                   <Img
                     alt="X"
                     height={12}
@@ -57,10 +69,9 @@ export const component = (
                     width={12}
                   />
                 </Link>
-                <Link
-                  className="ml-[8px] inline-flex h-[12px] w-[12px]"
-                  href="#"
-                >
+              </Column>
+              <Column className="pl-[8px]" width="12" height="12">
+                <Link className="h-[12px] w-[12px]" href="#">
                   <Img
                     alt="LinkedIn"
                     height={12}
@@ -68,19 +79,19 @@ export const component = (
                     width={12}
                   />
                 </Link>
-              </Section>
-            </Section>
-          </Section>
-          {author.showDivider ? (
-            <Hr
-              className="mr-[16px] inline-block h-[58px] w-[1px] bg-gray-300 [border:none]"
-              style={{ float: 'left' }}
-            />
-          ) : null}
-        </>
-      ))}
-    </Section>
-  </Row>
+              </Column>
+            </Row>
+          </Column>
+        </Row>
+        {author.showDivider ? (
+          <Hr
+            className="mr-[16px] inline-block h-[58px] w-[1px] bg-gray-300 [border:none]"
+            style={{ float: 'left' }}
+          />
+        ) : null}
+      </Fragment>
+    ))}
+  </Section>
 );
 
 export default () => {
diff --git a/apps/web/components/article-with-single-author/inline-styles.tsx b/apps/web/components/article-with-single-author/inline-styles.tsx
index 8de2f6e45a..9561021715 100644
--- a/apps/web/components/article-with-single-author/inline-styles.tsx
+++ b/apps/web/components/article-with-single-author/inline-styles.tsx
@@ -1,4 +1,5 @@
 import {
+  Column,
   Heading,
   Hr,
   Img,
@@ -10,7 +11,7 @@ import {
 import { Layout } from '../_components/layout';
 
 export const component = (
-  <Row>
+  <Section>
     <Hr
       style={{
         borderColor: 'rgb(209,213,219) !important',
@@ -18,99 +19,115 @@ export const component = (
         marginBottom: '16px',
       }}
     />
-    <Section
-      style={{
-        display: 'inline-block',
-        marginTop: '5px',
-        maxHeight: '48px',
-        maxWidth: '48px',
-        textAlign: 'left',
-      }}
-    >
-      <Img
-        alt="Steve Jobs"
-        height={48}
-        src="/static/steve-jobs.jpg"
+    <Row width={undefined}>
+      <Column
+        width="48"
+        height="48"
         style={{
-          borderRadius: '9999px',
-          display: 'block',
+          display: 'inline-block',
+          paddingTop: '5px',
           height: '48px',
-          objectFit: 'cover',
-          objectPosition: 'center',
           width: '48px',
         }}
-        width={48}
-      />
-    </Section>
-    <Section
-      style={{
-        display: 'inline-block',
-        marginLeft: '18px',
-        maxWidth: '120px',
-        textAlign: 'left',
-        verticalAlign: 'top',
-      }}
-    >
-      <Heading
-        as="h3"
-        style={{
-          color: 'rgb(31,41,55)',
-          fontSize: '14px',
-          fontWeight: 500,
-          lineHeight: '20px',
-          margin: '0px',
-        }}
-      >
-        Steve Jobs
-      </Heading>
-      <Text
-        style={{
-          color: 'rgb(107,114,128)',
-          fontSize: '12px',
-          fontWeight: 500,
-          lineHeight: '14px',
-          margin: '0px',
-        }}
       >
-        Co-Founder & CEO
-      </Text>
-      <Section
+        <Img
+          alt="Steve Jobs"
+          height={48}
+          src="/static/steve-jobs.jpg"
+          style={{
+            borderRadius: '9999px',
+            display: 'block',
+            height: '48px',
+            objectFit: 'cover',
+            objectPosition: 'center',
+            width: '48px',
+          }}
+          width={48}
+        />
+      </Column>
+      <Column
+        width="120"
         style={{
-          marginTop: '4px',
+          paddingLeft: '18px',
+          maxWidth: '120px',
         }}
+        align="left"
+        valign="top"
       >
-        <Link
-          href="#"
+        <Heading
+          as="h3"
+          style={{
+            color: 'rgb(31,41,55)',
+            fontSize: '14px',
+            fontWeight: 500,
+            lineHeight: '20px',
+            margin: '0px',
+          }}
+        >
+          Steve Jobs
+        </Heading>
+        <Text
           style={{
-            display: 'inline-flex',
-            height: '12px',
-            width: '12px',
+            color: 'rgb(107,114,128)',
+            fontSize: '12px',
+            fontWeight: 500,
+            lineHeight: '14px',
+            margin: '0px',
           }}
         >
-          <Img
-            alt="X"
-            src="/static/x-icon.png"
-            style={{ height: '12px', width: '12px' }}
-          />
-        </Link>
-        <Link
-          href="#"
+          Co-Founder & CEO
+        </Text>
+        <Row
+          align={undefined}
+          width={undefined}
           style={{
-            display: 'inline-flex',
-            height: '12px',
-            marginLeft: '8px',
-            width: '12px',
+            marginTop: '4px',
           }}
         >
-          <Img
-            alt="LinkedIn"
-            src="/static/in-icon.png"
-            style={{ height: '12px', width: '12px' }}
-          />
-        </Link>
-      </Section>
-    </Section>
-  </Row>
+          <Column width={undefined} valign="middle">
+            <Link
+              href="#"
+              style={{
+                height: '12px',
+                width: '12px',
+              }}
+            >
+              <Img
+                alt="X"
+                src="/static/x-icon.png"
+                width="12"
+                height="12"
+                style={{ height: '12px', width: '12px' }}
+              />
+            </Link>
+          </Column>
+          <Column
+            width={undefined}
+            valign="middle"
+            style={{
+              paddingLeft: '8px',
+            }}
+          >
+            <Link
+              href="#"
+              style={{
+                height: '12px',
+                width: '12px',
+              }}
+            >
+              <Img
+                alt="LinkedIn"
+                src="/static/in-icon.png"
+                width="12"
+                height="12"
+                style={{ height: '12px', width: '12px' }}
+              />
+            </Link>
+          </Column>
+        </Row>
+      </Column>
+    </Row>
+  </Section>
 );
 
 export default () => {
diff --git a/apps/web/components/article-with-single-author/tailwind.tsx b/apps/web/components/article-with-single-author/tailwind.tsx
index 3acfaad016..e7ed768305 100644
--- a/apps/web/components/article-with-single-author/tailwind.tsx
+++ b/apps/web/components/article-with-single-author/tailwind.tsx
@@ -1,4 +1,5 @@
 import {
+  Column,
   Heading,
   Hr,
   Img,
@@ -10,45 +11,65 @@ import {
 import { Layout } from '../_components/layout';
 
 export const component = (
-  <Row>
+  <Section>
     <Hr className="!border-gray-300 my-[16px]" />
-    <Section className="mt-[5px] inline-block max-h-[48px] max-w-[48px] text-left">
-      <Img
-        alt="Steve Jobs"
-        className="block h-[48px] w-[48px] rounded-full object-cover object-center"
-        height={48}
-        src="/static/steve-jobs.jpg"
-        width={48}
-      />
-    </Section>
-    <Section className="ml-[18px] inline-block max-w-[120px] text-left align-top">
-      <Heading
-        as="h3"
-        className="m-[0px] font-medium text-[14px] text-gray-800 leading-[20px]"
+    <Row width={undefined}>
+      <Column
+        width="48"
+        height="48"
+        className="pt-[5px] h-[48px] w-[48px]"
+        align="left"
       >
-        Steve Jobs
-      </Heading>
-      <Text className="m-[0px] font-medium text-[12px] text-gray-500 leading-[14px]">
-        Co-Founder & CEO
-      </Text>
-      <Section className="mt-[4px]">
-        <Link className="inline-flex h-[12px] w-[12px]" href="#">
-          <Img
-            alt="X"
-            src="/static/x-icon.png"
-            style={{ height: '12px', width: '12px' }}
-          />
-        </Link>
-        <Link className="ml-[8px] inline-flex h-[12px] w-[12px]" href="#">
-          <Img
-            alt="LinkedIn"
-            src="/static/in-icon.png"
-            style={{ height: '12px', width: '12px' }}
-          />
-        </Link>
-      </Section>
-    </Section>
-  </Row>
+        <Img
+          alt="Steve Jobs"
+          className="block h-[48px] w-[48px] rounded-full object-cover object-center"
+          height="48"
+          src="https://react.email/static/steve-jobs.jpg"
+          width="48"
+        />
+      </Column>
+      <Column
+        width="120"
+        className="pl-[18px] w-[120px]"
+        align="left"
+        valign="top"
+      >
+        <Heading
+          as="h3"
+          className="m-[0px] font-medium text-[14px] text-gray-800 leading-[20px]"
+        >
+          Steve Jobs
+        </Heading>
+        <Text className="m-[0px] font-medium text-[12px] text-gray-500 leading-[14px]">
+          Co-Founder & CEO
+        </Text>
+        <Row width={undefined} className="mt-[4px]" align={undefined}>
+          <Column width={undefined} valign="middle">
+            <Link className="h-[12px] w-[12px]" href="#">
+              <Img
+                alt="X"
+                src="https://react.email/static/x-icon.png"
+                width="12"
+                height="12"
+                style={{ height: '12px', width: '12px' }}
+              />
+            </Link>
+          </Column>
+          <Column width={undefined} className="pl-[8px]" valign="middle">
+            <Link className="h-[12px] w-[12px]" href="#">
+              <Img
+                alt="LinkedIn"
+                src="https://react.email/static/in-icon.png"
+                width="12"
+                height="12"
+                style={{ height: '12px', width: '12px' }}
+              />
+            </Link>
+          </Column>
+        </Row>
+      </Column>
+    </Row>
+  </Section>
 );
 
 export default () => {
diff --git a/apps/web/components/customer-reviews/inline-styles.tsx b/apps/web/components/customer-reviews/inline-styles.tsx
index 12deafff87..fa21ee6ed5 100644
--- a/apps/web/components/customer-reviews/inline-styles.tsx
+++ b/apps/web/components/customer-reviews/inline-styles.tsx
@@ -1,12 +1,14 @@
 import {
   Body,
   Button,
+  Column,
   Container,
   Head,
   Heading,
   Hr,
   Html,
   Preview,
+  Row,
   Section,
   Text,
 } from '@react-email/components';
@@ -54,87 +56,96 @@ export const component = (
                 { rating: 3, count: 97 },
                 { rating: 2, count: 199 },
                 { rating: 1, count: 147 },
-              ].map((count) => (
-                <div
-                  key={count.rating}
+              ].map(({ count, rating }) => (
+                <Row
+                  align="center"
+                  key={rating}
                   style={{
-                    alignItems: 'center',
-                    display: 'flex',
                     fontSize: '14px',
                     lineHeight: '20px',
                   }}
                 >
-                  <dt
-                    style={{
-                      alignItems: 'center',
-                      display: 'flex',
-                      flex: '1 1 0%',
-                    }}
-                  >
-                    <Text
-                      style={{
-                        color: 'rgb(107,114,128)',
-                        fontWeight: '500',
-                        width: '12px',
-                      }}
-                    >
-                      {count.rating}
-                      <span style={{ display: 'none' }}> star reviews</span>
-                    </Text>
-                    <div
-                      aria-hidden="true"
-                      style={{
-                        alignItems: 'center',
-                        flex: '1 1 0%',
-                        display: 'flex',
-                        marginLeft: '4px',
-                      }}
-                    >
-                      <div
-                        style={{
-                          flex: '1 1 0%',
-                          marginLeft: '12px',
-                          position: 'relative',
-                        }}
-                      >
-                        <div
+                  <Column align="center" valign="middle">
+                    <Row>
+                      <Column>
+                        <dt>
+                          <Row>
+                            <Column width={undefined}>
+                              <Text
+                                style={{
+                                  color: 'rgb(107,114,128)',
+                                  fontWeight: '500',
+                                  width: '12px',
+                                }}
+                              >
+                                {rating}
+                                <span style={{ display: 'none' }}>
+                                  {' '}
+                                  star reviews
+                                </span>
+                              </Text>
+                            </Column>
+                            <Column
+                              width="264"
+                              height="12"
+                              style={{
+                                width: 264,
+                                height: 12,
+                                paddingLeft: 12,
+                              }}
+                              aria-hidden="true"
+                              valign="middle"
+                            >
+                              <Row
+                                aria-hidden="true"
+                                width="264"
+                                style={{
+                                  width: 264,
+                                  height: 12,
+                                  backgroundColor: 'rgb(243,244,246)',
+                                  border: '1px solid rgb(229,231,235)',
+                                  borderRadius: 6,
+                                }}
+                              >
+                                <Column
+                                  height="12"
+                                  style={{
+                                    backgroundColor: 'rgb(79,70,229)',
+                                    borderRadius: 6,
+                                    height: 12,
+                                    width: `${(count / 1624) * 264}px`,
+                                  }}
+                                  width={(count / 1624) * 264}
+                                />
+                                <Column
+                                  width={(1 - count / 1624) * 264}
+                                  style={{
+                                    width: `${(1 - count / 1624) * 264}px`,
+                                  }}
+                                />
+                              </Row>
+                            </Column>
+                          </Row>
+                        </dt>
+                      </Column>
+                      <Column width="100%" style={{ width: '100%' }}>
+                        <dd
                           style={{
-                            backgroundColor: 'rgb(243,244,246)',
-                            borderColor: 'rgb(229,231,235)',
-                            borderRadius: '6px',
-                            borderWidth: '1px',
-                            height: '12px',
+                            color: 'rgb(107,114,128)',
+                            fontSize: '12px',
+                            fontVariantNumeric: 'tabular-nums',
+                            fontWeight: '500',
+                            lineHeight: '1',
+                            marginLeft: 12,
+                            textAlign: 'right',
                           }}
-                        />
-                        {count.count > 0 ? (
-                          <div
-                            style={{
-                              backgroundColor: 'rgb(79,70,229)',
-                              borderRadius: '6px',
-                              bottom: '0px',
-                              position: 'absolute',
-                              top: '0px',
-                              width: `calc(${count.count} / ${1624} * 100%)`,
-                            }}
-                          />
-                        ) : null}
-                      </div>
-                    </div>
-                  </dt>
-                  <dd
-                    style={{
-                      color: 'rgb(107,114,128)',
-                      fontSize: '12px',
-                      fontVariantNumeric: 'tabular-nums',
-                      fontWeight: '500',
-                      lineHeight: '1',
-                      marginLeft: '12px',
-                      textAlign: 'right',
-                    }}
-                  >
-                    {Math.round((count.count / 1624) * 100)}%
-                  </dd>
-                </div>
+                        >
+                          {Math.round((count / 1624) * 100)}%
+                        </dd>
+                      </Column>
+                    </Row>
+                  </Column>
+                </Row>
               ))}
             </dl>
             <Text
diff --git a/apps/web/components/customer-reviews/tailwind.tsx b/apps/web/components/customer-reviews/tailwind.tsx
index 897ef565d8..fdbfea35ef 100644
--- a/apps/web/components/customer-reviews/tailwind.tsx
+++ b/apps/web/components/customer-reviews/tailwind.tsx
@@ -1,12 +1,14 @@
 import {
   Body,
   Button,
+  Column,
   Container,
   Head,
   Heading,
   Hr,
   Html,
   Preview,
+  Row,
   Section,
   Text,
 } from '@react-email/components';
@@ -36,37 +38,61 @@ export const component = (
                 { rating: 3, count: 97 },
                 { rating: 2, count: 199 },
                 { rating: 1, count: 147 },
-              ].map((count) => (
-                <div
-                  key={count.rating}
-                  className="flex items-center text-[14px] leading-[20px]"
+              ].map(({ count, rating }) => (
+                <Row
+                  key={rating}
+                  className="text-[14px] leading-[20px]"
+                  align="center"
                 >
-                  <dt className="flex flex-1 items-center">
-                    <Text className="w-[12px] font-medium text-gray-500">
-                      {count.rating}
-                      <span className="hidden"> star reviews</span>
-                    </Text>
-                    <div
-                      aria-hidden="true"
-                      className="ml-[4px] flex flex-1 items-center"
-                    >
-                      <div className="relative ml-[12px] flex-1">
-                        <div className="h-[12px] rounded-[6px] border border-gray-200 bg-gray-100" />
-                        {count.count > 0 && (
-                          <div
-                            className="absolute top-0 bottom-0 rounded-[6px] bg-indigo-600"
-                            style={{
-                              width: `calc(${count.count} / ${1624} * 100%)`,
-                            }}
-                          />
-                        )}
-                      </div>
-                    </div>
-                  </dt>
-                  <dd className="ml-[12px] text-right font-medium text-gray-500 text-[12px] [font-variant-numeric:tabular-nums] leading-none">
-                    {Math.round((count.count / 1624) * 100)}%
-                  </dd>
-                </div>
+                  <Column align="center" valign="middle">
+                    <Row>
+                      <Column>
+                        <dt>
+                          <Row>
+                            <Column width={undefined}>
+                              <Text className="w-[12px] font-medium text-gray-500">
+                                {rating}
+                                <span className="hidden"> star reviews</span>
+                              </Text>
+                            </Column>
+                            <Column
+                              width="264"
+                              height="12"
+                              className="w-[264px] h-[12px] pl-[12px]"
+                              aria-hidden="true"
+                              valign="middle"
+                            >
+                              <Row
+                                width="264"
+                                className="w-[264px] h-[12px] bg-gray-100 border-gray-200 border border-solid rounded-[6px]"
+                              >
+                                <Column
+                                  height="12"
+                                  className="h-[12px] bg-indigo-600 rounded-[6px]"
+                                  width={(count / 1624) * 264}
+                                  style={{
+                                    width: `${(count / 1624) * 264}px`,
+                                  }}
+                                />
+                                <Column
+                                  width={(1 - count / 1624) * 264}
+                                  style={{
+                                    width: `${(1 - count / 1624) * 264}px`,
+                                  }}
+                                />
+                              </Row>
+                            </Column>
+                          </Row>
+                        </dt>
+                      </Column>
+                      <Column width="100%" className="w-full">
+                        <dd className="ml-[12px] text-right font-medium text-gray-500 text-[12px] [font-variant-numeric:tabular-nums] leading-none">
+                          {Math.round((count / 1624) * 100)}%
+                        </dd>
+                      </Column>
+                    </Row>
+                  </Column>
+                </Row>
               ))}
             </dl>
             <Text className="mt-[14px] text-center text-gray-500 text-[12px] leading-[24px]">
diff --git a/apps/web/components/download-buttons/inline-styles.tsx b/apps/web/components/download-buttons/inline-styles.tsx
index 1fb655c3d2..0fc81f32e6 100644
--- a/apps/web/components/download-buttons/inline-styles.tsx
+++ b/apps/web/components/download-buttons/inline-styles.tsx
@@ -31,6 +31,7 @@ export const component = (
                 <Button href="https://react.email">
                   <Img
                     alt="Get it on Google Play button"
+                    width={182.5}
                     height={54}
                     src="/static/get-it-on-google-play.png"
                   />
@@ -40,6 +41,7 @@ export const component = (
                 <Button href="https://react.email">
                   <Img
                     alt="Download on the App Store button"
+                    width={164}
                     height={54}
                     src="/static/download-on-the-app-store.png"
                   />
diff --git a/apps/web/components/download-buttons/tailwind.tsx b/apps/web/components/download-buttons/tailwind.tsx
index 55bd710f0a..1517ead0b6 100644
--- a/apps/web/components/download-buttons/tailwind.tsx
+++ b/apps/web/components/download-buttons/tailwind.tsx
@@ -20,6 +20,7 @@ export const component = (
                 <Button href="https://react.email">
                   <Img
                     alt="Get it on Google Play button"
+                    width={182.5}
                     height={54}
                     src="/static/get-it-on-google-play.png"
                   />
@@ -29,6 +30,7 @@ export const component = (
                 <Button href="https://react.email">
                   <Img
                     alt="Download on the App Store button"
+                    width={164}
                     height={54}
                     src="/static/download-on-the-app-store.png"
                   />
diff --git a/apps/web/components/footer-with-one-column/inline-styles.tsx b/apps/web/components/footer-with-one-column/inline-styles.tsx
index 5f55641770..20509651d7 100644
--- a/apps/web/components/footer-with-one-column/inline-styles.tsx
+++ b/apps/web/components/footer-with-one-column/inline-styles.tsx
@@ -10,6 +10,7 @@ export const component = (
             alt="React Email logo"
             height="42"
             src="/static/logo-without-background.png"
+            width="42"
           />
         </td>
       </tr>
diff --git a/apps/web/components/footer-with-one-column/tailwind.tsx b/apps/web/components/footer-with-one-column/tailwind.tsx
index 2c420d1389..71d907137e 100644
--- a/apps/web/components/footer-with-one-column/tailwind.tsx
+++ b/apps/web/components/footer-with-one-column/tailwind.tsx
@@ -10,6 +10,7 @@ export const component = (
             alt="React Email logo"
             height="42"
             src="/static/logo-without-background.png"
+            width="42"
           />
         </td>
       </tr>
diff --git a/apps/web/components/header-and-numbered-list-items/inline-styles.tsx b/apps/web/components/header-and-numbered-list-items/inline-styles.tsx
index 7572f7d3d9..68054e6b92 100644
--- a/apps/web/components/header-and-numbered-list-items/inline-styles.tsx
+++ b/apps/web/components/header-and-numbered-list-items/inline-styles.tsx
@@ -1,17 +1,18 @@
 import { Column, Hr, Row, Section, Text } from '@react-email/components';
+import { Fragment } from 'react/jsx-runtime';
 import { Layout } from '../_components/layout';
 
 export const component = (
-  <Section style={{ marginTop: 16, marginBottom: 16 }}>
-    <Section>
+  <Section style={{ marginTop: 16 }}>
+    <Section style={{ paddingBottom: 24 }}>
       <Row>
         <Text
           style={{
-            margin: '0px',
-            fontSize: 24,
-            lineHeight: '32px',
+            margin: 0,
             fontWeight: 600,
+            fontSize: 24,
             color: 'rgb(17,24,39)',
+            lineHeight: '32px',
           }}
         >
           Functional Style
@@ -20,8 +21,8 @@ export const component = (
           style={{
             marginTop: 8,
             fontSize: 16,
-            lineHeight: '24px',
             color: 'rgb(107,114,128)',
+            lineHeight: '24px',
           }}
         >
           Combine practicality and style effortlessly with our furniture,
@@ -29,278 +30,102 @@ export const component = (
         </Text>
       </Row>
     </Section>
-    <Hr
-      style={{
-        marginLeft: '0px',
-        marginRight: '0px',
-        marginTop: 24,
-        marginBottom: 24,
-        width: '100%',
-        borderWidth: 1,
-        borderStyle: 'solid',
-        borderColor: 'rgb(209,213,219) !important',
-      }}
-    />
-    <Section>
-      <Row>
-        <Column style={{ verticalAlign: 'baseline' }}>
-          <table style={{ textAlign: 'center' }}>
-            <td
-              align="center"
-              style={{
-                height: 40,
-                width: 40,
-                backgroundColor: 'rgb(199,210,254)',
-                borderRadius: '9999px',
-                padding: '0px',
-              }}
-            >
-              <Text
-                style={{
-                  fontWeight: 600,
-                  margin: '0px',
-                  color: 'rgb(79,70,229)',
-                }}
-              >
-                1
-              </Text>
-            </td>
-          </table>
-        </Column>
-        <Column style={{ width: '90%' }}>
-          <Text
-            style={{
-              margin: '0px',
-              fontSize: 20,
-              lineHeight: '28px',
-              fontWeight: 600,
-              color: 'rgb(17,24,39)',
-            }}
-          >
-            Versatile Comfort
-          </Text>
-          <Text
-            style={{
-              margin: '0px',
-              marginTop: 8,
-              fontSize: 16,
-              lineHeight: '24px',
-              color: 'rgb(107,114,128)',
-            }}
-          >
-            Experience ultimate comfort and versatility with our furniture
-            collection, designed to adapt to your ever-changing needs.
-          </Text>
-        </Column>
-      </Row>
-    </Section>
-    <Hr
-      style={{
-        marginLeft: '0px',
-        marginRight: '0px',
-        marginTop: 24,
-        marginBottom: 24,
-        width: '100%',
-        borderWidth: 1,
-        borderStyle: 'solid',
-        borderColor: 'rgb(209,213,219) !important',
-      }}
-    />
-    <Section>
-      <Row>
-        <Column style={{ verticalAlign: 'baseline' }}>
-          <table style={{ textAlign: 'center' }}>
-            <td
-              align="center"
+    {[
+      {
+        title: 'Vesatile Comfort',
+        description:
+          'Experience ultimate comfort and versatility with our furniture collection, designed to adapt to your ever-changing needs.',
+      },
+      {
+        title: 'Luxurious Retreat',
+        description:
+          'Transform your space into a haven of relaxation with our indulgent furniture collection.',
+      },
+      {
+        title: 'Unleash Creativity',
+        description:
+          'Unleash your inner designer with our customizable furniture options, allowing you to create a space that reflects your unique vision',
+      },
+      {
+        title: 'Elevate Outdoor Living',
+        description:
+          'Take your outdoor space to new heights with our premium outdoor furniture, designed to elevate your alfresco experience.',
+      },
+    ].map((feature, index) => (
+      <Fragment key={feature.title}>
+        <Hr
+          style={{
+            border: '1px solid rgb(209, 213, 219)',
+            margin: 0,
+            width: '100%',
+          }}
+        />
+        <Section
+          style={{
+            paddingTop: 24,
+            paddingBottom: 24,
+          }}
+        >
+          <Row>
+            <Column
+              width="48"
+              height="40"
               style={{
-                height: 40,
                 width: 40,
-                backgroundColor: 'rgb(199,210,254)',
-                borderRadius: '9999px',
-                padding: '0px',
-              }}
-            >
-              <Text
-                style={{
-                  fontWeight: 600,
-                  margin: '0px',
-                  color: 'rgb(79,70,229)',
-                }}
-              >
-                2
-              </Text>
-            </td>
-          </table>
-        </Column>
-        <Column style={{ width: '90%' }}>
-          <Text
-            style={{
-              margin: '0px',
-              fontSize: 20,
-              lineHeight: '28px',
-              fontWeight: 600,
-              color: 'rgb(17,24,39)',
-            }}
-          >
-            Luxurious Retreat
-          </Text>
-          <Text
-            style={{
-              margin: '0px',
-              marginTop: 8,
-              fontSize: 16,
-              lineHeight: '24px',
-              color: 'rgb(107,114,128)',
-            }}
-          >
-            Transform your space into a haven of relaxation with our indulgent
-            furniture collection.
-          </Text>
-        </Column>
-      </Row>
-    </Section>
-    <Hr
-      style={{
-        marginLeft: '0px',
-        marginRight: '0px',
-        marginTop: 24,
-        marginBottom: 24,
-        width: '100%',
-        borderWidth: 1,
-        borderStyle: 'solid',
-        borderColor: 'rgb(209,213,219) !important',
-      }}
-    />
-    <Section>
-      <Row>
-        <Column style={{ verticalAlign: 'baseline' }}>
-          <table style={{ textAlign: 'center' }}>
-            <td
-              align="center"
-              style={{
                 height: 40,
-                width: 40,
-                backgroundColor: 'rgb(199,210,254)',
-                borderRadius: '9999px',
-                padding: '0px',
+                paddingRight: 8,
               }}
+              valign="baseline"
             >
+              <Row width="40" align="left">
+                <Column
+                  align="center"
+                  height="40"
+                  style={{
+                    backgroundColor: 'rgb(199, 210, 254)',
+                    borderRadius: '9999px',
+                    color: 'rgb(79, 70, 229)',
+                    fontWeight: 600,
+                    height: 40,
+                    padding: 0,
+                    width: 40,
+                  }}
+                  valign="middle"
+                  width="40"
+                >
+                  {index + 1}
+                </Column>
+              </Row>
+            </Column>
+            <Column width="100%" style={{ width: '100%' }}>
               <Text
                 style={{
+                  margin: 0,
                   fontWeight: 600,
-                  margin: '0px',
-                  color: 'rgb(79,70,229)',
+                  fontSize: 20,
+                  lineHeight: '28px',
+                  color: 'rgb(17, 24, 39)',
                 }}
               >
-                3
+                {feature.title}
               </Text>
-            </td>
-          </table>
-        </Column>
-        <Column style={{ width: '90%' }}>
-          <Text
-            style={{
-              margin: '0px',
-              fontSize: 20,
-              lineHeight: '28px',
-              fontWeight: 600,
-              color: 'rgb(17,24,39)',
-            }}
-          >
-            Unleash Creativity
-          </Text>
-          <Text
-            style={{
-              margin: '0px',
-              marginTop: 8,
-              fontSize: 16,
-              lineHeight: '24px',
-              color: 'rgb(107,114,128)',
-            }}
-          >
-            Unleash your inner designer with our customizable furniture options,
-            allowing you to create a space that reflects your unique vision
-          </Text>
-        </Column>
-      </Row>
-    </Section>
-    <Hr
-      style={{
-        marginLeft: '0px',
-        marginRight: '0px',
-        marginTop: 24,
-        marginBottom: 24,
-        width: '100%',
-        borderWidth: 1,
-        borderStyle: 'solid',
-        borderColor: 'rgb(209,213,219) !important',
-      }}
-    />
-    <Section>
-      <Row>
-        <Column style={{ verticalAlign: 'baseline' }}>
-          <table style={{ textAlign: 'center' }}>
-            <td
-              align="center"
-              style={{
-                height: 40,
-                width: 40,
-                backgroundColor: 'rgb(199,210,254)',
-                borderRadius: '9999px',
-                padding: '0px',
-              }}
-            >
               <Text
                 style={{
+                  margin: 0,
                   fontWeight: 600,
-                  margin: '0px',
-                  color: 'rgb(79,70,229)',
+                  paddingTop: 8,
+                  fontSize: 16,
+                  lineHeight: '24px',
+                  color: 'rgb(107, 114, 128)',
                 }}
               >
-                4
+                {feature.description}
               </Text>
-            </td>
-          </table>
-        </Column>
-        <Column style={{ width: '90%' }}>
-          <Text
-            style={{
-              margin: '0px',
-              fontSize: 20,
-              lineHeight: '28px',
-              fontWeight: 600,
-              color: 'rgb(17,24,39)',
-            }}
-          >
-            Elevate Outdoor Living
-          </Text>
-          <Text
-            style={{
-              margin: '0px',
-              marginTop: 8,
-              fontSize: 16,
-              lineHeight: '24px',
-              color: 'rgb(107,114,128)',
-            }}
-          >
-            Take your outdoor space to new heights with our premium outdoor
-            furniture, designed to elevate your alfresco experience.
-          </Text>
-        </Column>
-      </Row>
-    </Section>
-    <Hr
-      style={{
-        marginLeft: '0px',
-        marginRight: '0px',
-        marginTop: 24,
-        marginBottom: 24,
-        width: '100%',
-        borderWidth: 1,
-        borderStyle: 'solid',
-        borderColor: 'rgb(209,213,219) !important',
-      }}
-    />
+            </Column>
+          </Row>
+        </Section>
+      </Fragment>
+    ))}
   </Section>
 );
 
diff --git a/apps/web/components/header-and-numbered-list-items/tailwind.tsx b/apps/web/components/header-and-numbered-list-items/tailwind.tsx
index 7320c305de..ecd2ca7f5b 100644
--- a/apps/web/components/header-and-numbered-list-items/tailwind.tsx
+++ b/apps/web/components/header-and-numbered-list-items/tailwind.tsx
@@ -1,9 +1,10 @@
 import { Column, Hr, Row, Section, Text } from '@react-email/components';
+import { Fragment } from 'react/jsx-runtime';
 import { Layout } from '../_components/layout';
 
 export const component = (
   <Section className="my-[16px]">
-    <Section>
+    <Section className="pb-[24px]">
       <Row>
         <Text className="m-0 font-semibold text-[24px] text-gray-900 leading-[32px]">
           Functional Style
@@ -14,103 +15,62 @@ export const component = (
         </Text>
       </Row>
     </Section>
-    <Hr className="!border-gray-300 mx-0 my-[24px] w-full border border-solid" />
-    <Section>
-      <Row>
-        <Column className="align-baseline">
-          <table className="text-center">
-            <td
-              align="center"
-              className="h-[40px] w-[40px] rounded-full bg-indigo-200 p-0"
-            >
-              <Text className="m-0 font-semibold text-indigo-600">1</Text>
-            </td>
-          </table>
-        </Column>
-        <Column className="w-[90%]">
-          <Text className="m-0 font-semibold text-[20px] text-gray-900 leading-[28px]">
-            Versatile Comfort
-          </Text>
-          <Text className="m-0 mt-[8px] text-[16px] text-gray-500 leading-[24px]">
-            Experience ultimate comfort and versatility with our furniture
-            collection, designed to adapt to your ever-changing needs.
-          </Text>
-        </Column>
-      </Row>
-    </Section>
-    <Hr className="!border-gray-300 mx-0 my-[24px] w-full border border-solid" />
-    <Section>
-      <Row>
-        <Column className="align-baseline">
-          <table className="text-center">
-            <td
-              align="center"
-              className="h-[40px] w-[40px] rounded-full bg-indigo-200 p-0"
+    {[
+      {
+        title: 'Versatile Comfort',
+        description:
+          'Experience ultimate comfort and versatility with our furniture collection, designed to adapt to your ever-changing needs.',
+      },
+      {
+        title: 'Luxurious Retreat',
+        description:
+          'Transform your space into a haven of relaxation with our indulgent furniture collection.',
+      },
+      {
+        title: 'Unleash Creativity',
+        description:
+          'Unleash your inner designer with our customizable furniture options, allowing you to create a space that reflects your unique vision',
+      },
+      {
+        title: 'Elevate Outdoor Living',
+        description:
+          'Take your outdoor space to new heights with our premium outdoor furniture, designed to elevate your alfresco experience.',
+      },
+    ].map((feature, index) => (
+      <Fragment key={feature.title}>
+        <Hr className="!border-gray-300 m-0 w-full border border-solid" />
+        <Section className="py-[24px]">
+          <Row>
+            <Column
+              width="48"
+              height="40"
+              className="w-[40px] h-[40px] pr-[8px]"
+              valign="baseline"
             >
-              <Text className="m-0 font-semibold text-indigo-600">2</Text>
-            </td>
-          </table>
-        </Column>
-        <Column className="w-[90%]">
-          <Text className="m-0 font-semibold text-[20px] text-gray-900 leading-[28px]">
-            Luxurious Retreat
-          </Text>
-          <Text className="m-0 mt-[8px] text-[16px] text-gray-500 leading-[24px]">
-            Transform your space into a haven of relaxation with our indulgent
-            furniture collection.
-          </Text>
-        </Column>
-      </Row>
-    </Section>
-    <Hr className="!border-gray-300 mx-0 my-[24px] w-full border border-solid" />
-    <Section>
-      <Row>
-        <Column className="align-baseline">
-          <table className="text-center">
-            <td
-              align="center"
-              className="h-[40px] w-[40px] rounded-full bg-indigo-200 p-0"
-            >
-              <Text className="m-0 font-semibold text-indigo-600">3</Text>
-            </td>
-          </table>
-        </Column>
-        <Column className="w-[90%]">
-          <Text className="m-0 font-semibold text-[20px] text-gray-900 leading-[28px]">
-            Unleash Creativity
-          </Text>
-          <Text className="m-0 mt-[8px] text-[16px] text-gray-500 leading-[24px]">
-            Unleash your inner designer with our customizable furniture options,
-            allowing you to create a space that reflects your unique vision
-          </Text>
-        </Column>
-      </Row>
-    </Section>
-    <Hr className="!border-gray-300 mx-0 my-[24px] w-full border border-solid" />
-    <Section>
-      <Row>
-        <Column className="align-baseline">
-          <table className="text-center">
-            <td
-              align="center"
-              className="h-[40px] w-[40px] rounded-full bg-indigo-200 p-0"
-            >
-              <Text className="m-0 font-semibold text-indigo-600">4</Text>
-            </td>
-          </table>
-        </Column>
-        <Column className="w-[90%]">
-          <Text className="m-0 font-semibold text-[20px] text-gray-900 leading-[28px]">
-            Elevate Outdoor Living
-          </Text>
-          <Text className="m-0 mt-[8px] text-[16px] text-gray-500 leading-[24px]">
-            Take your outdoor space to new heights with our premium outdoor
-            furniture, designed to elevate your alfresco experience.
-          </Text>
-        </Column>
-      </Row>
-    </Section>
-    <Hr className="!border-gray-300 mx-0 my-[24px] w-full border border-solid" />
+              <Row width="40" align="left">
+                <Column
+                  align="center"
+                  valign="middle"
+                  width="40"
+                  height="40"
+                  className="h-[40px] font-semibold w-[40px] rounded-full bg-indigo-200 text-indigo-600 p-0"
+                >
+                  {index + 1}
+                </Column>
+              </Row>
+            </Column>
+            <Column width="100%" className="w-full">
+              <Text className="m-0 font-semibold text-[20px] text-gray-900 leading-[28px]">
+                {feature.title}
+              </Text>
+              <Text className="m-0 pt-[8px] text-[16px] text-gray-500 leading-[24px]">
+                {feature.description}
+              </Text>
+            </Column>
+          </Row>
+        </Section>
+      </Fragment>
+    ))}
   </Section>
 );
 
diff --git a/apps/web/components/header-with-social-icons/inline-styles.tsx b/apps/web/components/header-with-social-icons/inline-styles.tsx
index e380d36b27..5ee66559bc 100644
--- a/apps/web/components/header-with-social-icons/inline-styles.tsx
+++ b/apps/web/components/header-with-social-icons/inline-styles.tsx
@@ -14,6 +14,7 @@ export const component = (
       <Column style={{ width: '80%' }}>
         <Img
           alt="React Email logo"
+          width="42"
           height="42"
           src="/static/logo-without-background.png"
         />
diff --git a/apps/web/components/header-with-social-icons/tailwind.tsx b/apps/web/components/header-with-social-icons/tailwind.tsx
index 312153c3f7..ba3e0be071 100644
--- a/apps/web/components/header-with-social-icons/tailwind.tsx
+++ b/apps/web/components/header-with-social-icons/tailwind.tsx
@@ -7,6 +7,7 @@ export const component = (
       <Column className="w-[80%]">
         <Img
           alt="React Email logo"
+          width="42"
           height="42"
           src="/static/logo-without-background.png"
         />
diff --git a/apps/web/components/image-with-varying-sizes/tailwind.tsx b/apps/web/components/image-with-varying-sizes/tailwind.tsx
index 2a32c6267c..3f9b0c247d 100644
--- a/apps/web/components/image-with-varying-sizes/tailwind.tsx
+++ b/apps/web/components/image-with-varying-sizes/tailwind.tsx
@@ -5,19 +5,22 @@ export const component = (
   <>
     <Img
       alt="Atoms Vacuum Canister"
-      className="rounded-[12px] [margin:12px_auto_12px]"
+      className="rounded-[12px] my-[12px] mx-auto"
+      width={150}
       height={150}
       src="/static/atmos-vacuum-canister.jpg"
     />
     <Img
       alt="Atoms Vacuum Canister"
-      className="rounded-[12px] [margin:12px_auto_12px]"
+      className="rounded-[12px] my-[12px] mx-auto"
+      width={200}
       height={200}
       src="/static/atmos-vacuum-canister.jpg"
     />
     <Img
       alt="Atoms Vacuum Canister"
-      className="rounded-[12px] [margin:12px_auto_12px]"
+      className="rounded-[12px] my-[12px] mx-auto"
+      width={250}
       height={250}
       src="/static/atmos-vacuum-canister.jpg"
     />
diff --git a/apps/web/components/list-with-image-on-left/inline-styles.tsx b/apps/web/components/list-with-image-on-left/inline-styles.tsx
index 9ed132dba5..fc2125dbd5 100644
--- a/apps/web/components/list-with-image-on-left/inline-styles.tsx
+++ b/apps/web/components/list-with-image-on-left/inline-styles.tsx
@@ -87,11 +87,14 @@ export const component = (
             }}
           >
             <Row style={{ marginBottom: '24px' }}>
-              <Column style={{ width: '40%', paddingRight: '24px' }}>
+              <Column
+                width="40%"
+                style={{ width: '40%', paddingRight: '24px' }}
+              >
                 <Img
                   src={step.imageUrl}
                   width="100%"
-                  height="168px"
+                  height="168"
                   alt={`Step image - ${step.number}`}
                   style={{
                     borderRadius: '4px',
@@ -102,25 +105,38 @@ export const component = (
                   }}
                 />
               </Column>
-              <Column style={{ width: '60%', paddingRight: '24px' }}>
-                <div
+              <Column
+                width="60%"
+                style={{ width: '60%', paddingRight: '24px' }}
+              >
+                <Row
+                  width="24"
                   style={{
-                    alignItems: 'center',
-                    backgroundColor: 'rgb(79,70,229)',
-                    borderRadius: '9999px',
-                    color: 'rgb(255,255,255)',
-                    display: 'flex',
-                    fontSize: '12px',
-                    fontWeight: '600',
-                    height: '24px',
-                    justifyContent: 'center',
-                    lineHeight: '1',
-                    marginBottom: '18px',
-                    width: '24px',
+                    width: 24,
+                    height: 24,
+                    marginBottom: 18,
                   }}
+                  align={undefined}
                 >
-                  {step.number}
-                </div>
+                  <Column
+                    width="24"
+                    height="24"
+                    style={{
+                      borderRadius: '9999px',
+                      height: 24,
+                      width: 24,
+                      backgroundColor: 'rgb(79,70,229)',
+                      color: 'rgb(255,255,255)',
+                      fontWeight: 600,
+                      fontSize: 12,
+                      lineHeight: 1,
+                    }}
+                    align="center"
+                    valign="middle"
+                  >
+                    {step.number}
+                  </Column>
+                </Row>
                 <Heading
                   as="h2"
                   style={{
diff --git a/apps/web/components/list-with-image-on-left/tailwind.tsx b/apps/web/components/list-with-image-on-left/tailwind.tsx
index e4a78e8c29..93d18c4ad8 100644
--- a/apps/web/components/list-with-image-on-left/tailwind.tsx
+++ b/apps/web/components/list-with-image-on-left/tailwind.tsx
@@ -62,19 +62,31 @@ export const component = (
         ].map((step) => (
           <Section className="mb-[30px]">
             <Row className="mb-[24px]">
-              <Column className="w-2/5 pr-[24px]">
+              <Column width="40%" className="w-2/5 pr-[24px]">
                 <Img
                   src={step.imageUrl}
                   width="100%"
-                  height="168px"
+                  height="168"
                   alt={`Step image - ${step.number}`}
                   className="block w-full rounded-[4px] object-cover object-center"
                 />
               </Column>
-              <Column className="w-3/5 pr-[24px]">
-                <div className="mb-[18px] flex h-[24px] w-[24px] items-center justify-center rounded-full bg-indigo-600 font-semibold text-white text-[12px] leading-none">
-                  {step.number}
-                </div>
+              <Column width="60%" className="w-3/5 pr-[24px]">
+                <Row
+                  width="24"
+                  className="w-[24px] h-[24px] mb-[18px]"
+                  align={undefined}
+                >
+                  <Column
+                    width="24"
+                    height="24"
+                    className="rounded-full h-[24px] w-[24px] bg-indigo-600 font-semibold text-white text-[12px] leading-none"
+                    align="center"
+                    valign="middle"
+                  >
+                    {step.number}
+                  </Column>
+                </Row>
                 <Heading
                   as="h2"
                   className="mt-0 mb-[8px] font-bold text-[20px] leading-none"
diff --git a/apps/web/components/rounded-image/inline-styles.tsx b/apps/web/components/rounded-image/inline-styles.tsx
index e25db4cea0..9a59e43cbf 100644
--- a/apps/web/components/rounded-image/inline-styles.tsx
+++ b/apps/web/components/rounded-image/inline-styles.tsx
@@ -4,9 +4,16 @@ import { Layout } from '../_components/layout';
 export const component = (
   <Img
     alt="Stagg Electric Kettle"
+    width={250}
     height={250}
     src="/static/stagg-eletric-kettle.jpg"
-    style={{ borderRadius: 12, margin: '0 auto' }}
+    style={{
+      borderRadius: 12,
+      marginTop: '0',
+      marginBottom: '0',
+      marginLeft: 'auto',
+      marginRight: 'auto',
+    }}
   />
 );
 
diff --git a/apps/web/components/rounded-image/tailwind.tsx b/apps/web/components/rounded-image/tailwind.tsx
index 4bfaa47ded..08427a3487 100644
--- a/apps/web/components/rounded-image/tailwind.tsx
+++ b/apps/web/components/rounded-image/tailwind.tsx
@@ -4,7 +4,8 @@ import { Layout } from '../_components/layout';
 export const component = (
   <Img
     alt="Stagg Electric Kettle"
-    className="rounded-[12px] [margin:0_auto]"
+    className="rounded-[12px] my-0 mx-auto"
+    width={250}
     height={250}
     src="/static/stagg-eletric-kettle.jpg"
   />
diff --git a/apps/web/components/simple-image/inline-styles.tsx b/apps/web/components/simple-image/inline-styles.tsx
index 57f2925195..06f95b4a56 100644
--- a/apps/web/components/simple-image/inline-styles.tsx
+++ b/apps/web/components/simple-image/inline-styles.tsx
@@ -4,6 +4,7 @@ import { Layout } from '../_components/layout';
 export const component = (
   <Img
     alt="Ode Grinder"
+    width={250}
     height={250}
     src="/static/ode-grinder.jpg"
     style={{ marginLeft: 'auto', marginRight: 'auto' }}
diff --git a/apps/web/components/simple-image/tailwind.tsx b/apps/web/components/simple-image/tailwind.tsx
index 46c2a9775e..2e4be3cc53 100644
--- a/apps/web/components/simple-image/tailwind.tsx
+++ b/apps/web/components/simple-image/tailwind.tsx
@@ -5,6 +5,7 @@ export const component = (
   <Img
     alt="Ode Grinder"
     className="mx-auto"
+    width={250}
     height={250}
     src="/static/ode-grinder.jpg"
   />
diff --git a/apps/web/components/simple-list/inline-styles.tsx b/apps/web/components/simple-list/inline-styles.tsx
index e1e988cdb5..13fc927689 100644
--- a/apps/web/components/simple-list/inline-styles.tsx
+++ b/apps/web/components/simple-list/inline-styles.tsx
@@ -1,10 +1,12 @@
 import {
   Body,
+  Column,
   Container,
   Head,
   Heading,
   Html,
   Preview,
+  Row,
   Section,
   Text,
 } from '@react-email/components';
@@ -72,34 +74,45 @@ export const component = (
               marginBottom: '36px',
             }}
           >
-            <div
+            <Row
               style={{
-                alignItems: 'flex-start',
-                display: 'inline-flex',
-                marginLeft: '12px',
-                marginRight: '32px',
+                paddingLeft: '12px',
+                paddingRight: '32px',
               }}
             >
-              <div
+              <Column
+                width="24"
+                height="24"
+                valign="top"
+                align="center"
                 style={{
-                  alignItems: 'center',
-                  backgroundColor: 'rgb(79,70,229)',
-                  borderRadius: '9999px',
-                  color: 'rgb(255,255,255)',
-                  display: 'flex',
-                  flexShrink: '0',
-                  fontSize: '12px',
-                  fontWeight: '600',
-                  height: '24px',
-                  justifyContent: 'center',
-                  lineHeight: '1',
-                  marginRight: '18px',
                   width: '24px',
+                  height: '24px',
+                  paddingRight: '18px',
                 }}
               >
-                {feature.number}
-              </div>
-              <div>
+                <Row>
+                  <Column
+                    width="24"
+                    height="24"
+                    align="center"
+                    valign="middle"
+                    style={{
+                      width: '24px',
+                      height: '24px',
+                      backgroundColor: 'rgb(79,70,229)',
+                      borderRadius: '9999px',
+                      color: 'rgb(255,255,255)',
+                      fontSize: '12px',
+                      fontWeight: '600',
+                      lineHeight: '1',
+                    }}
+                  >
+                    {feature.number}
+                  </Column>
+                </Row>
+              </Column>
+              <Column>
                 <Heading
                   as="h2"
                   style={{
@@ -122,8 +135,8 @@ export const component = (
                 >
                   {feature.description}
                 </Text>
-              </div>
-            </div>
+              </Column>
+            </Row>
           </Section>
         ))}
       </Container>
diff --git a/apps/web/components/simple-list/tailwind.tsx b/apps/web/components/simple-list/tailwind.tsx
index 63937a5e10..59826c487c 100644
--- a/apps/web/components/simple-list/tailwind.tsx
+++ b/apps/web/components/simple-list/tailwind.tsx
@@ -1,10 +1,12 @@
 import {
   Body,
+  Column,
   Container,
   Head,
   Heading,
   Html,
   Preview,
+  Row,
   Section,
   Text,
 } from '@react-email/components';
@@ -52,11 +54,27 @@ export const component = (
           },
         ].map((feature) => (
           <Section className="mb-[36px]">
-            <div className="mr-[32px] ml-[12px] inline-flex items-start">
-              <div className="mr-[18px] flex h-[24px] w-[24px] shrink-0 items-center justify-center rounded-full bg-indigo-600 font-semibold text-white text-[12px] leading-none">
-                {feature.number}
-              </div>
-              <div>
+            <Row className="pr-[32px] pl-[12px]">
+              <Column
+                width="24"
+                height="24"
+                align="center"
+                valign="top"
+                className="pr-[18px] h-[24px] w-[24px]"
+              >
+                <Row>
+                  <Column
+                    align="center"
+                    valign="middle"
+                    width="24"
+                    height="24"
+                    className="h-[24px] w-[24px] rounded-full bg-indigo-600 font-semibold text-white text-[12px] leading-none"
+                  >
+                    {feature.number}
+                  </Column>
+                </Row>
+              </Column>
+              <Column valign="top">
                 <Heading
                   as="h2"
                   className="mt-[0px] mb-[8px] text-gray-900 text-[18px] leading-[28px]"
@@ -66,8 +84,8 @@ export const component = (
                 <Text className="m-0 text-gray-500 text-[14px] leading-[24px]">
                   {feature.description}
                 </Text>
-              </div>
-            </div>
+              </Column>
+            </Row>
           </Section>
         ))}
       </Container>
diff --git a/apps/web/components/simple-rating-survey/inline-styles.tsx b/apps/web/components/simple-rating-survey/inline-styles.tsx
index bb2af3f1c0..d2fa5e771b 100644
--- a/apps/web/components/simple-rating-survey/inline-styles.tsx
+++ b/apps/web/components/simple-rating-survey/inline-styles.tsx
@@ -86,39 +86,40 @@ export const component = (
             </Column>
           </Row>
         </Section>
-        <Section style={{ marginTop: '12px', marginBottom: '24px' }}>
-          <Row
-            style={{
-              borderCollapse: 'separate',
-              borderSpacing: '12px',
-              maxWidth: '300px',
-              tableLayout: 'fixed',
-              width: '100%',
-            }}
-          >
+        <Section
+          style={{ marginTop: '12px', marginBottom: '24px' }}
+          align="center"
+        >
+          <Row width={undefined}>
             {Array.from({ length: 5 }).map((_, i) => (
               <Column
                 key={i}
+                width="51"
+                height="43"
                 style={{
-                  backgroundColor: 'rgb(79,70,229)',
-                  borderRadius: '6px',
+                  width: 51,
+                  height: 43,
+                  paddingLeft: 4,
+                  paddingRight: 4,
                 }}
+                align="center"
+                valign="middle"
               >
                 <Button
                   href={`?rating=${i + 1}`}
                   style={{
-                    alignItems: 'center',
+                    backgroundColor: 'rgb(79,70,229)',
+                    borderRadius: '6px',
                     boxSizing: 'border-box',
                     color: 'rgb(255,255,255)',
-                    display: 'flex',
                     fontSize: '16px',
                     fontWeight: '600',
-                    justifyContent: 'center',
+                    height: 43,
                     lineHeight: '1',
                     margin: '0px',
                     padding: '12px',
                     textAlign: 'center',
-                    width: '100%',
+                    width: 43,
                   }}
                 >
                   {i + 1}
diff --git a/apps/web/components/simple-rating-survey/tailwind.tsx b/apps/web/components/simple-rating-survey/tailwind.tsx
index b2900f36c4..724a817e95 100644
--- a/apps/web/components/simple-rating-survey/tailwind.tsx
+++ b/apps/web/components/simple-rating-survey/tailwind.tsx
@@ -45,13 +45,20 @@ export const component = (
             </Column>
           </Row>
         </Section>
-        <Section className="mt-[12px] mb-[24px]">
-          <Row className="w-full max-w-[300px] table-fixed border-separate [border-spacing:12px]">
+        <Section className="mt-[12px] mb-[24px]" align="center">
+          <Row width={undefined}>
             {Array.from({ length: 5 }).map((_, i) => (
-              <Column key={i} className="rounded-[6px] bg-indigo-600">
+              <Column
+                key={i}
+                width="51"
+                height="43"
+                className="w-[51px] h-[43px] px-[4px]"
+                align="center"
+                valign="middle"
+              >
                 <Button
                   href={`?rating=${i + 1}`}
-                  className="flex box-border w-full items-center justify-center p-[12px] m-0 text-center font-semibold text-[16px] text-white leading-none"
+                  className="box-border w-[43px] h-[43px] rounded-[6px] bg-indigo-600 p-[12px] m-0 text-center font-semibold text-[16px] text-white leading-none"
                 >
                   {i + 1}
                 </Button>
diff --git a/apps/web/components/static/atmos-vacuum-canister.jpg b/apps/web/components/static/atmos-vacuum-canister.jpg
new file mode 100644
index 0000000000..3d0f46bf92
Binary files /dev/null and b/apps/web/components/static/atmos-vacuum-canister.jpg differ
diff --git a/apps/web/components/static/braun-analogue-clock.jpg b/apps/web/components/static/braun-analogue-clock.jpg
new file mode 100644
index 0000000000..96adf283d5
Binary files /dev/null and b/apps/web/components/static/braun-analogue-clock.jpg differ
diff --git a/apps/web/components/static/braun-classic-watch.jpg b/apps/web/components/static/braun-classic-watch.jpg
new file mode 100644
index 0000000000..c2465c1cf5
Binary files /dev/null and b/apps/web/components/static/braun-classic-watch.jpg differ
diff --git a/apps/web/components/static/braun-collection.jpg b/apps/web/components/static/braun-collection.jpg
new file mode 100644
index 0000000000..9e4fc8cc3d
Binary files /dev/null and b/apps/web/components/static/braun-collection.jpg differ
diff --git a/apps/web/components/static/braun-vintage.jpg b/apps/web/components/static/braun-vintage.jpg
new file mode 100644
index 0000000000..8d224a8dac
Binary files /dev/null and b/apps/web/components/static/braun-vintage.jpg differ
diff --git a/apps/web/components/static/braun-wall-clock.jpg b/apps/web/components/static/braun-wall-clock.jpg
new file mode 100644
index 0000000000..decbdbcc95
Binary files /dev/null and b/apps/web/components/static/braun-wall-clock.jpg differ
diff --git a/apps/web/components/static/braun-wireless-alarm.jpg b/apps/web/components/static/braun-wireless-alarm.jpg
new file mode 100644
index 0000000000..e5925f177f
Binary files /dev/null and b/apps/web/components/static/braun-wireless-alarm.jpg differ
diff --git a/apps/web/components/static/bundle-collection.jpg b/apps/web/components/static/bundle-collection.jpg
new file mode 100644
index 0000000000..954571bdc7
Binary files /dev/null and b/apps/web/components/static/bundle-collection.jpg differ
diff --git a/apps/web/components/static/clara-french-press.jpg b/apps/web/components/static/clara-french-press.jpg
new file mode 100644
index 0000000000..a860d3e952
Binary files /dev/null and b/apps/web/components/static/clara-french-press.jpg differ
diff --git a/apps/web/components/static/clyde-electric-kettle.jpg b/apps/web/components/static/clyde-electric-kettle.jpg
new file mode 100644
index 0000000000..25c5b5cb94
Binary files /dev/null and b/apps/web/components/static/clyde-electric-kettle.jpg differ
diff --git a/apps/web/components/static/coffee-bean-storage.jpg b/apps/web/components/static/coffee-bean-storage.jpg
new file mode 100644
index 0000000000..22e44c75c3
Binary files /dev/null and b/apps/web/components/static/coffee-bean-storage.jpg differ
diff --git a/apps/web/components/static/grinder-collection.jpg b/apps/web/components/static/grinder-collection.jpg
new file mode 100644
index 0000000000..bf985f8f9c
Binary files /dev/null and b/apps/web/components/static/grinder-collection.jpg differ
diff --git a/apps/web/components/static/herman-miller-chair.jpg b/apps/web/components/static/herman-miller-chair.jpg
new file mode 100644
index 0000000000..1e3c90bd39
Binary files /dev/null and b/apps/web/components/static/herman-miller-chair.jpg differ
diff --git a/apps/web/components/static/logo-without-background.png b/apps/web/components/static/logo-without-background.png
index d110bb04b7..883c6f83ca 100644
Binary files a/apps/web/components/static/logo-without-background.png and b/apps/web/components/static/logo-without-background.png differ
diff --git a/apps/web/components/static/monty-art-cup-1.jpg b/apps/web/components/static/monty-art-cup-1.jpg
new file mode 100644
index 0000000000..b1b764a990
Binary files /dev/null and b/apps/web/components/static/monty-art-cup-1.jpg differ
diff --git a/apps/web/components/static/monty-art-cup-2.jpg b/apps/web/components/static/monty-art-cup-2.jpg
new file mode 100644
index 0000000000..aa92b02e4d
Binary files /dev/null and b/apps/web/components/static/monty-art-cup-2.jpg differ
diff --git a/apps/web/components/static/mugs-collection.jpg b/apps/web/components/static/mugs-collection.jpg
new file mode 100644
index 0000000000..3ff6f34604
Binary files /dev/null and b/apps/web/components/static/mugs-collection.jpg differ
diff --git a/apps/web/components/static/ode-grinder.jpg b/apps/web/components/static/ode-grinder.jpg
new file mode 100644
index 0000000000..33e4e6ad1e
Binary files /dev/null and b/apps/web/components/static/ode-grinder.jpg differ
diff --git a/apps/web/components/static/outdoor-living.jpg b/apps/web/components/static/outdoor-living.jpg
new file mode 100644
index 0000000000..55f97684cf
Binary files /dev/null and b/apps/web/components/static/outdoor-living.jpg differ
diff --git a/apps/web/components/static/stagg-eletric-kettle.jpg b/apps/web/components/static/stagg-eletric-kettle.jpg
new file mode 100644
index 0000000000..d4286ef507
Binary files /dev/null and b/apps/web/components/static/stagg-eletric-kettle.jpg differ
diff --git a/apps/web/components/static/vacuum-canister-clear-glass-bundle.jpg b/apps/web/components/static/vacuum-canister-clear-glass-bundle.jpg
new file mode 100644
index 0000000000..fbd6d9be37
Binary files /dev/null and b/apps/web/components/static/vacuum-canister-clear-glass-bundle.jpg differ
diff --git a/apps/web/components/static/versatile-comfort.jpg b/apps/web/components/static/versatile-comfort.jpg
new file mode 100644
index 0000000000..8ae1a00b5d
Binary files /dev/null and b/apps/web/components/static/versatile-comfort.jpg differ