diff --git a/apps/frontend/src/pages/[product].tsx b/apps/frontend/src/pages/[product].tsx
index 9bd3ad4..682af00 100644
--- a/apps/frontend/src/pages/[product].tsx
+++ b/apps/frontend/src/pages/[product].tsx
@@ -9,6 +9,7 @@ import { useEffect, useState } from 'react';
 import { paths } from '@/backend-openapi-client';
 import createClient from 'openapi-fetch';
 import { LookAndFeelConfig, ProductConfig } from './pricing';
+import { EmailField } from '@superfluid-finance/widget/utils';
 
 type Props = {
   productConfig: ProductConfig;
@@ -32,19 +33,7 @@ export default function Product({ productConfig, theme }: Props) {
               productDetails={productConfig.productDetails}
               paymentDetails={productConfig.paymentDetails}
               theme={theme}
-              personalData={[
-                {
-                  name: 'email',
-                  label: 'Email',
-                  required: {
-                    pattern: '/^([a-zA-Z0-9_\\-\\.]+)@([a-zA-Z0-9_\\-\\.]+)\\.([a-zA-Z]{2,5})$/g',
-                    message: 'Invalid email address',
-                  },
-                },
-
-                //This doesn't work
-                // EmailField
-              ]}
+              personalData={[EmailField]}
             />
           )}
         </ConnectKitProvider>
diff --git a/apps/frontend/src/pages/invoice/[id].tsx b/apps/frontend/src/pages/invoice/[id].tsx
index 05f11b1..984c895 100644
--- a/apps/frontend/src/pages/invoice/[id].tsx
+++ b/apps/frontend/src/pages/invoice/[id].tsx
@@ -9,6 +9,7 @@ import { useEffect, useState } from 'react';
 import { paths } from '@/backend-openapi-client';
 import createClient from 'openapi-fetch';
 import { InvoiceConfig, LookAndFeelConfig, ProductConfig } from '../pricing';
+import { EmailField } from '@superfluid-finance/widget/utils';
 
 type Props = {
   invoiceConfig: InvoiceConfig;
@@ -36,18 +37,11 @@ export default function Invoice({ invoiceConfig, theme }: Props) {
               theme={theme}
               personalData={[
                 {
-                  name: 'email',
-                  label: 'Email',
+                  ...EmailField,
+
                   disabled: true,
-                  required: {
-                    pattern: '/^([a-zA-Z0-9_\\-\\.]+)@([a-zA-Z0-9_\\-\\.]+)\\.([a-zA-Z]{2,5})$/g',
-                    message: 'Invalid email address',
-                  },
                   value: stripeInvoice.customer_email ?? '',
                 },
-
-                //This doesn't work
-                // EmailField
               ]}
             />
           )}