diff --git a/content-samples/react/emails/alert-agent/job-alert-agent.tsx b/content-samples/react/emails/alert-agent/job-alert-agent.tsx
new file mode 100644
index 0000000..5d31b62
--- /dev/null
+++ b/content-samples/react/emails/alert-agent/job-alert-agent.tsx
@@ -0,0 +1,257 @@
+import {
+ Body,
+ Button,
+ Container,
+ Head,
+ Hr,
+ Html,
+ Img,
+ Preview,
+ Section,
+ Column,
+ Row,
+ Text,
+ Link,
+} from "@react-email/components";
+import * as React from "react";
+
+type jobAgentResult = {
+ id: number;
+ linkToJob: string;
+ icon: string;
+ company: string;
+ title: string;
+ location: string;
+};
+
+interface NovuJobAlertProps {
+ userFirstname: string;
+ searchTitle: string;
+ searchLocation: string;
+ jobAgentResultArr: Array;
+}
+
+const baseUrl = process.env.VERCEL_URL
+ ? `https://${process.env.VERCEL_URL}`
+ : "";
+
+export const NovuJobAlertEmail = ({
+ userFirstname,
+ searchTitle,
+ searchLocation,
+ jobAgentResultArr,
+}: NovuJobAlertProps) => (
+
+
+ The job alert agent that helps you uncover amazing jobs.
+
+
+ 
+
+
+ Hi {userFirstname}! Your smart agent is here!
+
+ Exciting new opportunities just for you!
+ {searchTitle}
+ {searchLocation}
+
+
+
+ {jobAgentResultArr.map(function (agentResult: jobAgentResult) {
+ return (
+
+
+
+
+ 
+
+
+ {agentResult.title}
+
+ {agentResult.company}, {agentResult.location}
+
+
+
+
+
+ );
+ })}
+
+
+
+
+
+ Looking for something else?
+
+
+
+
+
+
+
+
+
+ Unsubscribe
+ |
+ Privacy Policy
+ |
+ Terms
+ |
+ Help Center
+
+ 470 Noor Ave STE B #1148, South San Francisco, CA 94080
+
+
+
+
+
+);
+
+const jobOffer1: jobAgentResult = {
+ id: 0,
+ linkToJob: "https://www.google.com",
+ icon: "https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/dca73b36-cf39-4e28-9bc7-8a0d0cd8ac70/standalone-gradient2x_2/w=128,quality=90,fit=scale-down",
+ company: "ExperimentLabs",
+ title: "Customer Success Manager, Enterprise",
+ location: "Fremont, CA",
+};
+
+const jobOffer2: jobAgentResult = {
+ id: 1,
+ linkToJob: "https://www.google.com",
+ icon: "https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/dca73b36-cf39-4e28-9bc7-8a0d0cd8ac70/standalone-gradient2x_2/w=128,quality=90,fit=scale-down",
+ company: "FlyingAhaed",
+ title: "Junior Customer Success",
+ location: "San Jose, CA",
+};
+
+const jobOffer3: jobAgentResult = {
+ id: 1,
+ linkToJob: "https://www.google.com",
+ icon: "https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/dca73b36-cf39-4e28-9bc7-8a0d0cd8ac70/standalone-gradient2x_2/w=128,quality=90,fit=scale-down",
+ company: "GiveMore",
+ title: "Customer Success",
+ location: "San Diago, CA",
+};
+
+NovuJobAlertEmail.PreviewProps = {
+ userFirstname: "Ella",
+ searchTitle: "Customer Success",
+ searchLocation: "San Francisco, CA",
+ jobAgentResultArr: [jobOffer1, jobOffer2, jobOffer3],
+} as NovuJobAlertProps;
+
+export default NovuJobAlertEmail;
+
+const main = {
+ backgroundColor: "#ffffff",
+ fontFamily:
+ '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
+};
+
+const container = {
+ margin: "0 auto",
+ padding: "20px 0 48px",
+};
+
+const header = {
+ margin: "10px 0",
+};
+const header1 = {
+ fontWeight: "700",
+ fontSize: "30px",
+ margin: "40px 0",
+};
+
+const header2 = {
+ fontWeight: "550",
+ fontSize: "24px",
+ margin: "15px 0",
+};
+
+const header3 = {
+ fontWeight: "500",
+ fontSize: "20px",
+ margin: "5px 0",
+};
+
+const header4 = {
+ fontSize: "16px",
+ margin: "5px 0",
+};
+
+const jobList = {
+ marginTop: "14px",
+};
+
+const jobFrame = {
+ marginBottom: "15px",
+ paddingLeft: "4px",
+};
+
+const jobFrameText = {
+ color: "#000000",
+};
+
+const centerBtnContainer = {
+ textAlign: "center" as const,
+};
+
+const rightBtnContainer = {
+ textAlign: "right" as const,
+};
+
+const primaryBtn = {
+ backgroundColor: "#5F51E8",
+ borderRadius: "3px",
+ color: "#fff",
+ fontSize: "16px",
+ textAlign: "center" as const,
+ margin: "10px 0",
+ padding: "12px",
+};
+
+const secondaryBtn = {
+ borderColor: "#5F51E8",
+ borderWidth: "3px",
+ borderStyle: "solid",
+ borderRadius: "5px",
+ color: "#5F51E8",
+
+ fontSize: "16px",
+ textAlign: "center" as const,
+ margin: "10px 0",
+ padding: "12px",
+};
+
+
+const hr = {
+ borderColor: "#cccccc",
+ margin: "10px 0",
+};
+
+const footer = {
+ ...header4,
+ color: "#8898aa",
+ textAlign: "center" as const,
+};
+
+const divisor = {
+ margin: "0 4px",
+ color: "rgb(51,51,51)",
+ fontWeight: 200,
+};