diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/actions.ts b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/actions.ts
new file mode 100644
index 0000000000..994ea7cca2
--- /dev/null
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/actions.ts
@@ -0,0 +1,21 @@
+"use server";
+
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/app/api/auth/[...nextauth]/authOptions";
+import { sendEmbedSurveyPreviewEmail } from "@formbricks/lib/emails/emails";
+import { AuthenticationError } from "@formbricks/types/v1/errors";
+
+type TSendEmailActionArgs = {
+  to: string;
+  subject: string;
+  html: string;
+};
+
+export const sendEmailAction = async ({ html, subject, to }: TSendEmailActionArgs) => {
+  const session = await getServerSession(authOptions);
+
+  if (!session) {
+    throw new AuthenticationError("Not authenticated");
+  }
+  return await sendEmbedSurveyPreviewEmail(to, subject, html);
+};
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ShareEmbedSurvey.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ShareEmbedSurvey.tsx
index c45e991e09..3846898e27 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ShareEmbedSurvey.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ShareEmbedSurvey.tsx
@@ -63,7 +63,9 @@ export default function ShareEmbedSurvey({
             </div>
           </div>
           <div className="flex w-full grow flex-col gap-6 bg-gray-50 px-4 py-6 lg:p-6">
-            <div className="flex h-full overflow-y-scroll lg:h-[590px]">{componentMap[activeId]}</div>
+            <div className="flex h-full overflow-y-scroll lg:h-[590px] lg:overflow-y-visible">
+              {componentMap[activeId]}
+            </div>
             <div className="mx-auto flex max-w-max rounded-md bg-slate-100 p-1 lg:hidden">
               {tabs.slice(0, 2).map((tab) => (
                 <Button
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedTabs/EmailTab.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedTabs/EmailTab.tsx
index 133f5fc13e..b0c39f71ca 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedTabs/EmailTab.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedTabs/EmailTab.tsx
@@ -14,11 +14,12 @@ import {
   Row,
   Column,
 } from "@react-email/components";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { cn } from "@formbricks/lib/cn";
 import { QuestionType } from "@formbricks/types/questions";
 import { TProfile } from "@formbricks/types/v1/profile";
 import { TProduct } from "@formbricks/types/v1/product";
+import { sendEmailAction } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/actions";
 
 interface EmailTabProps {
   survey: TSurvey;
@@ -31,8 +32,12 @@ export default function EmailTab({ survey, surveyUrl, profile, product }: EmailT
   const [email, setEmail] = useState(profile.email);
   const [showEmbed, setShowEmbed] = useState(false);
   const brandColor = product.brandColor;
+  const subject = "Formbricks Email Survey Preview";
+
+  const emailTemplate = useMemo(() => {
+    return getEmailTemplate(survey, surveyUrl);
+  }, [survey, surveyUrl]);
 
-  console.log(survey);
   const Email = (
     <Tailwind
       config={{
@@ -44,25 +49,19 @@ export default function EmailTab({ survey, surveyUrl, profile, product }: EmailT
           },
         },
       }}>
-      {getEmailTemplate(survey, surveyUrl)}
+      {emailTemplate}
     </Tailwind>
   );
 
-  const confirmEmail = render(Email, { pretty: true });
-
-  const confirmEmailWithoutDoctype = confirmEmail.replace(
+  const emailHTML = render(Email, { pretty: true });
+  const emailHTMLWithoutDoctype = emailHTML.replace(
     '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
     ""
   );
 
   const sendPreviewEmail = async () => {
-    // const res = await sendEmail({
-    //   to: email,
-    //   subject: "Formbricks Email Survey Preview",
-    //   html: confirmEmail,
-    // });
-    // const res = await sendPreviewMail(email, confirmEmail);
-    // console.log(res);
+    await sendEmailAction({ html: emailHTMLWithoutDoctype, subject, to: email });
+    toast.success("Email sent!");
   };
   return (
     <div className="flex h-full grow flex-col gap-5">
@@ -83,7 +82,7 @@ export default function EmailTab({ survey, surveyUrl, profile, product }: EmailT
             aria-label="Embed survey in your website"
             onClick={() => {
               toast.success("Embed code copied to clipboard!");
-              navigator.clipboard.writeText(confirmEmailWithoutDoctype);
+              navigator.clipboard.writeText(emailHTMLWithoutDoctype);
             }}
             className="shrink-0"
             EndIcon={DocumentDuplicateIcon}>
@@ -116,7 +115,7 @@ export default function EmailTab({ survey, surveyUrl, profile, product }: EmailT
             customCodeClass="!whitespace-normal sm:!whitespace-pre-wrap !break-all sm:!break-normal"
             language="html"
             showCopyToClipboard={false}>
-            {confirmEmailWithoutDoctype}
+            {emailHTMLWithoutDoctype}
           </CodeBlock>
         ) : (
           <div className="">
@@ -129,9 +128,7 @@ export default function EmailTab({ survey, surveyUrl, profile, product }: EmailT
               <div className="mb-2 border-b border-slate-200 pb-2 text-sm">
                 To : {email || "user@mail.com"}
               </div>
-              <div className="border-b border-slate-200 pb-2 text-sm">
-                Subject : Formbricks Email Survey Preview
-              </div>
+              <div className="border-b border-slate-200 pb-2 text-sm">Subject : {subject}</div>
               <div className="p-4">{Email}</div>
             </div>
           </div>
@@ -346,6 +343,7 @@ const getEmailTemplate = (survey: TSurvey, surveyUrl: string) => {
               .filter((c) => c.id !== "other")
               .map((choice) => (
                 <Link
+                  key={choice.id}
                   className="mt-4 block rounded-lg border border-solid border-gray-200 bg-slate-50 p-4 text-slate-800"
                   href={`${surveyUrl}?${firstQuestion.id}=${choice.label}`}>
                   {choice.label}
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedTabs/LinkTab.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedTabs/LinkTab.tsx
index cf63fe6fd9..5946eda851 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedTabs/LinkTab.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedTabs/LinkTab.tsx
@@ -32,7 +32,7 @@ export default function LinkTab({ surveyUrl, survey, product }: EmailTabProps) {
 
   return (
     <div className="flex h-full grow flex-col gap-5">
-      <div className="flex justify-between gap-2">
+      <div className="flex flex-wrap justify-between gap-2">
         <div
           ref={linkTextRef}
           className="relative grow overflow-auto rounded-lg border border-slate-300 bg-white px-3 py-2 text-slate-800"
@@ -64,7 +64,7 @@ export default function LinkTab({ surveyUrl, survey, product }: EmailTabProps) {
         <Button
           variant="minimal"
           className={cn(
-            "absolute bottom-6 left-1/2 -translate-x-1/2 transform rounded-lg border border-slate-200 bg-white"
+            "absolute bottom-8 left-1/2 -translate-x-1/2 transform rounded-lg border border-slate-200 bg-white"
           )}
           EndIcon={ArrowUpRightIcon}
           title="Open survey in new tab"
diff --git a/packages/lib/emails/emails.ts b/packages/lib/emails/emails.ts
index 0e919ec8ec..2a16653da3 100644
--- a/packages/lib/emails/emails.ts
+++ b/packages/lib/emails/emails.ts
@@ -170,3 +170,15 @@ export const sendResponseFinishedEmail = async (
     `),
   });
 };
+
+export const sendEmbedSurveyPreviewEmail = async (to: string, subject: string, html: string) => {
+  await sendEmail({
+    to: to,
+    subject: subject,
+    html: withEmailTemplate(`
+    <h1>Preview Email</h1>
+    <p>This is a preview email for your survey. Please do not reply to this email.</p>
+    <hr/>
+    ${html}`),
+  });
+};