diff --git a/src/email/EmailShell.tsx b/src/email/EmailShell.tsx
index b30f972..6eaa606 100644
--- a/src/email/EmailShell.tsx
+++ b/src/email/EmailShell.tsx
@@ -28,7 +28,7 @@ const DEFAULT_LOGO_PLACEHOLDER =
 
 function IconMail() {
   return (
-    <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+    <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" focusable="false" style={{ display: 'block' }}>
       <path
         fill="currentColor"
         d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z"
@@ -39,7 +39,7 @@ function IconMail() {
 
 function IconPhone() {
   return (
-    <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+    <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" focusable="false" style={{ display: 'block' }}>
       <path
         fill="currentColor"
         d="M6.6 10.8c1.5 2.9 3.9 5.3 6.8 6.8l2.2-2.2c.3-.3.8-.4 1.2-.2 1.3.4 2.7.7 4.1.7.6 0 1 .4 1 1V21c0 .6-.4 1-1 1C10.1 22 2 13.9 2 4c0-.6.4-1 1-1h3.9c.6 0 1 .4 1 1 0 1.4.2 2.8.7 4.1.1.4 0 .9-.2 1.2L6.6 10.8z"
@@ -48,6 +48,12 @@ function IconPhone() {
   )
 }
 
+function telHref(phone: string) {
+  // Remove spaces and dashes so tel links work reliably across clients.
+  const cleaned = phone.replace(/[\\s-]/g, '')
+  return `tel:${cleaned}`
+}
+
 function ContactLine({
   icon,
   children,
@@ -57,10 +63,10 @@ function ContactLine({
 }) {
   return (
     <Row style={{ margin: '0 0 8px' }}>
-      <Column style={{ width: 24, paddingRight: 8 }}>
+      <Column style={{ width: 24, paddingRight: 8, verticalAlign: 'top' }}>
         <Text style={{ margin: 0, color: 'inherit', display: 'block' }}>{icon}</Text>
       </Column>
-      <Column style={{ width: 'auto' }}>{children}</Column>
+      <Column style={{ width: 'auto', verticalAlign: 'top' }}>{children}</Column>
     </Row>
   )
 }
@@ -129,9 +135,17 @@ export function EmailShell({ brand, title, previewText, children }: EmailShellPr
               {brand.footer.phone1 || brand.footer.phone2 ? (
                 <ContactLine icon={<IconPhone />}>
                   <Text style={{ margin: 0, color: brand.textColor, fontSize: 12, lineHeight: '18px' }}>
-                    {brand.footer.phone1 ? brand.footer.phone1 : ''}
+                    {brand.footer.phone1 ? (
+                      <Link href={telHref(brand.footer.phone1)} style={{ color: brand.primaryColor, textDecoration: 'none' }}>
+                        {brand.footer.phone1}
+                      </Link>
+                    ) : null}
                     {brand.footer.phone1 && brand.footer.phone2 ? ' · ' : ''}
-                    {brand.footer.phone2 ? brand.footer.phone2 : ''}
+                    {brand.footer.phone2 ? (
+                      <Link href={telHref(brand.footer.phone2)} style={{ color: brand.primaryColor, textDecoration: 'none' }}>
+                        {brand.footer.phone2}
+                      </Link>
+                    ) : null}
                   </Text>
                 </ContactLine>
               ) : null}