diff --git a/public/email-logo.png b/public/email-logo.png
new file mode 100644
index 00000000..8c5d0e92
Binary files /dev/null and b/public/email-logo.png differ
diff --git a/public/email-logo.svg b/public/email-logo.svg
new file mode 100644
index 00000000..5c6349da
--- /dev/null
+++ b/public/email-logo.svg
@@ -0,0 +1,12 @@
+<svg width="1054" height="278" viewBox="0 0 1054 278" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="1054" height="278" fill="#111113"/>
+<rect x="21" y="32" width="59.8957" height="59.8957" rx="7.98609" fill="white"/>
+<rect x="23.9948" y="174.751" width="53.9061" height="73.8713" rx="4.99131" fill="#204623" stroke="#73BF7A" stroke-width="5.98957"/>
+<rect x="23.9948" y="114.856" width="53.9061" height="33.9409" rx="4.99131" fill="#661714" stroke="#DA4944" stroke-width="5.98957"/>
+<rect x="183.717" y="114.856" width="53.9061" height="73.8713" rx="4.99131" fill="#142C52" stroke="#5C8BD6" stroke-width="5.98957"/>
+<rect x="183.717" y="214.682" width="53.9061" height="33.9409" rx="4.99131" fill="#624104" stroke="#F7B53B" stroke-width="5.98957"/>
+<rect x="180.722" y="32" width="59.8957" height="59.8957" rx="7.98609" fill="white"/>
+<rect x="100.861" y="101.878" width="59.8957" height="149.739" rx="7.98609" fill="white"/>
+<rect x="100.861" y="32" width="59.8957" height="49.9131" rx="7.98609" fill="white"/>
+<path d="M367.292 216V77.5921H390.7V216H367.292ZM320.885 94.8931V73.5213H437.107V94.8931H320.885ZM521.402 216V159.619C521.402 153.106 519.298 147.746 515.092 143.539C511.021 139.333 505.729 137.23 499.216 137.23C494.873 137.23 491.006 138.179 487.614 140.079C484.221 141.979 481.575 144.625 479.676 148.017C477.776 151.41 476.826 155.277 476.826 159.619L468.074 154.734C468.074 147.271 469.702 140.69 472.959 134.991C476.215 129.156 480.693 124.61 486.392 121.353C492.227 117.961 498.741 116.265 505.932 116.265C513.26 116.265 519.773 117.893 525.472 121.15C531.171 124.407 535.649 128.952 538.906 134.787C542.163 140.486 543.791 147.135 543.791 154.734V216H521.402ZM454.437 216V69.4505H476.826V216H454.437ZM566.747 216V118.3H589.136V216H566.747ZM577.941 100.389C574.142 100.389 570.953 99.0996 568.375 96.5214C565.932 93.9432 564.711 90.7544 564.711 86.955C564.711 83.1556 565.932 79.9667 568.375 77.3886C570.953 74.8104 574.142 73.5213 577.941 73.5213C581.877 73.5213 585.065 74.8104 587.508 77.3886C589.95 79.9667 591.172 83.1556 591.172 86.955C591.172 90.7544 589.95 93.9432 587.508 96.5214C585.065 99.0996 581.877 100.389 577.941 100.389ZM681.213 216V159.619C681.213 153.106 679.11 147.746 674.903 143.539C670.832 139.333 665.54 137.23 659.027 137.23C654.685 137.23 650.818 138.179 647.425 140.079C644.033 141.979 641.387 144.625 639.487 148.017C637.587 151.41 636.638 155.277 636.638 159.619L627.885 154.734C627.885 147.271 629.514 140.69 632.77 134.991C636.027 129.156 640.505 124.61 646.204 121.353C652.039 117.961 658.552 116.265 665.744 116.265C673.071 116.265 679.585 118.165 685.284 121.964C690.983 125.628 695.461 130.445 698.718 136.415C701.974 142.25 703.603 148.357 703.603 154.734V216H681.213ZM614.248 216V118.3H636.638V216H614.248ZM788.435 216L747.116 166.132L788.231 118.3H814.895L767.673 172.035L768.691 159.212L816.93 216H788.435ZM726.355 216V69.4505H748.744V216H726.355ZM833.365 216V73.5213H856.772V216H833.365ZM849.444 216V194.628H929.233V216H849.444ZM849.444 153.513V132.955H922.312V153.513H849.444ZM849.444 94.8931V73.5213H928.215V94.8931H849.444ZM1012.25 216L984.157 174.681L980.086 171.017L942.227 118.3H969.298L994.334 154.531L998.201 157.991L1039.11 216H1012.25ZM940.395 216L979.882 161.247L992.909 177.327L966.449 216H940.395ZM1000.24 170.61L987.006 154.734L1011.43 118.3H1037.28L1000.24 170.61Z" fill="white"/>
+</svg>
diff --git a/src/app/api/workspaces/[id]/collaborators/route.ts b/src/app/api/workspaces/[id]/collaborators/route.ts
index a6276e71..332b81be 100644
--- a/src/app/api/workspaces/[id]/collaborators/route.ts
+++ b/src/app/api/workspaces/[id]/collaborators/route.ts
@@ -202,7 +202,9 @@ async function handlePOST(
                     inviterName: currentUser.name || 'A user',
                     workspaceName: ws.name || 'Workspace',
                     workspaceUrl,
+                    permissionLevel,
                 }),
+
             });
             if (error) console.error("Failed to send invitation email:", error);
         } catch (emailError) {
diff --git a/src/components/email/invite-email.tsx b/src/components/email/invite-email.tsx
index bdf693e5..ce84594c 100644
--- a/src/components/email/invite-email.tsx
+++ b/src/components/email/invite-email.tsx
@@ -1,46 +1,171 @@
 import * as React from 'react';
 
+const FONT =
+    'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+const BRAND_FONT =
+    'Outfit, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+const BG = '#111113';
+
 interface InviteEmailTemplateProps {
     inviterName?: string;
     workspaceName: string;
     workspaceUrl: string;
+    permissionLevel?: string;
 }
 
 export function InviteEmailTemplate({
     inviterName,
     workspaceName,
     workspaceUrl,
+    permissionLevel,
 }: Readonly<InviteEmailTemplateProps>): React.ReactElement {
+    const roleText = permissionLevel === 'viewer' ? 'a Viewer' : 'an Editor';
+
     return (
-        <div style={{ fontFamily: 'sans-serif', padding: '20px', color: '#333' }}>
-            <h1 style={{ fontSize: '20px', marginBottom: '16px' }}>
-                You've been invited to collaborate!
-            </h1>
-            <p style={{ fontSize: '16px', lineHeight: '1.5' }}>
-                <strong>{inviterName || 'Someone'}</strong> has invited you to collaborate on the workspace <strong>{workspaceName}</strong>.
-            </p>
-            <div style={{ marginTop: '24px', marginBottom: '24px' }}>
-                <a
-                    href={workspaceUrl}
-                    style={{
-                        backgroundColor: '#000',
-                        color: '#fff',
-                        padding: '12px 24px',
-                        borderRadius: '6px',
-                        textDecoration: 'none',
-                        fontSize: '16px',
-                        display: 'inline-block',
-                    }}
-                >
-                    Join Workspace
-                </a>
-            </div>
-            <p style={{ fontSize: '14px', color: '#666' }}>
-                or copy and paste this link into your browser: <br />
-                <a href={workspaceUrl} style={{ color: '#0070f3', wordBreak: 'break-all' }}>
-                    {workspaceUrl}
-                </a>
-            </p>
+        <div style={{ backgroundColor: BG, margin: 0, padding: 0, width: '100%' }}>
+            <table
+                width="100%"
+                cellPadding={0}
+                cellSpacing={0}
+                style={{ borderCollapse: 'collapse' as const }}
+            >
+                <tr>
+                    <td align="center" style={{ padding: '40px 5%' }}>
+                        <table
+                            cellPadding={0}
+                            cellSpacing={0}
+                            style={{
+                                maxWidth: '100%',
+                                width: '100%',
+                                borderCollapse: 'collapse' as const,
+                            }}
+                        >
+                            {/* Heading + Body text */}
+                            <tr>
+                                <td style={{ paddingTop: '32px' }}>
+                                    <h1
+                                        style={{
+                                            fontFamily: BRAND_FONT,
+                                            fontSize: '26px',
+                                            fontWeight: 600,
+                                            color: '#FFFFFF',
+                                            lineHeight: '1.3',
+                                            margin: '0 0 16px 0',
+                                        }}
+                                    >
+                                        You&apos;re invited to collaborate!
+                                    </h1>
+                                    <p
+                                        style={{
+                                            fontFamily: FONT,
+                                            fontSize: '15px',
+                                            fontWeight: 400,
+                                            color: '#FFFFFF',
+                                            lineHeight: '1.6',
+                                            margin: 0,
+                                        }}
+                                    >
+                                        <strong style={{ color: '#FFFFFF' }}>{inviterName || 'Someone'}</strong> has invited you to join the workspace{' '}
+                                        <strong style={{ color: '#FFFFFF' }}>&ldquo;{workspaceName}&rdquo;</strong>
+                                        {permissionLevel ? ` as ${roleText}` : ''}.
+                                    </p>
+                                </td>
+                            </tr>
+
+                            {/* CTA Button */}
+                            <tr>
+                                <td align="center" style={{ paddingTop: '24px', paddingBottom: '24px' }}>
+                                    <a
+                                        href={workspaceUrl}
+                                        style={{
+                                            display: 'inline-block',
+                                            backgroundColor: '#FFFFFF',
+                                            color: '#1F1F1F',
+                                            padding: '14px 40px',
+                                            borderRadius: '9999px',
+                                            textDecoration: 'none',
+                                            fontSize: '15px',
+                                            fontWeight: 600,
+                                            fontFamily: FONT,
+                                            textAlign: 'center' as const,
+                                            boxShadow: '0 4px 16px rgba(0, 0, 0, 0.3)',
+                                        }}
+                                    >
+                                        Join Workspace
+                                    </a>
+                                </td>
+                            </tr>
+
+                            {/* Fallback URL */}
+                            <tr>
+                                <td style={{ paddingBottom: '32px' }}>
+                                    <p
+                                        style={{
+                                            fontFamily: FONT,
+                                            fontSize: '12px',
+                                            color: 'rgba(255, 255, 255, 0.5)',
+                                            margin: 0,
+                                            lineHeight: '1.5',
+                                        }}
+                                    >
+                                        or copy and paste this link into your browser:
+                                        <br />
+                                        <a
+                                            href={workspaceUrl}
+                                            style={{
+                                                color: '#A78BFA',
+                                                textDecoration: 'underline',
+                                                wordBreak: 'break-all' as const,
+                                                fontSize: '12px',
+                                            }}
+                                        >
+                                            {workspaceUrl}
+                                        </a>
+                                    </p>
+                                </td>
+                            </tr>
+
+                            {/* Footer */}
+                            <tr>
+                                <td style={{ paddingTop: '24px', paddingBottom: '40px' }}>
+                                    <p
+                                        style={{
+                                            fontFamily: FONT,
+                                            fontSize: '12px',
+                                            fontStyle: 'italic' as const,
+                                            color: 'rgba(255, 255, 255, 0.5)',
+                                            margin: '4px 0 0 0',
+                                        }}
+                                    >
+                                        The Workspace That Thinks With You
+                                    </p>
+                                    <p
+                                        style={{
+                                            fontFamily: FONT,
+                                            fontSize: '11px',
+                                            color: 'rgba(255, 255, 255, 0.5)',
+                                            lineHeight: '1.5',
+                                            margin: '16px 0 0 0',
+                                        }}
+                                    >
+                                        You received this email because {inviterName || 'someone'} invited you to collaborate on ThinkEx. If you believe this was sent in error, you can safely ignore this email.
+                                    </p>
+                                    <p
+                                        style={{
+                                            fontFamily: FONT,
+                                            fontSize: '11px',
+                                            color: 'rgba(255, 255, 255, 0.35)',
+                                            margin: '12px 0 0 0',
+                                        }}
+                                    >
+                                        &copy; {new Date().getFullYear()} ThinkEx
+                                    </p>
+                                </td>
+                            </tr>
+                        </table>
+                    </td>
+                </tr>
+            </table>
         </div>
     );
 }