diff --git a/Surge365.MassEmailReact.API/Controllers/TargetsController.cs b/Surge365.MassEmailReact.API/Controllers/TargetsController.cs
index 31f2cbe..0d2e5fd 100644
--- a/Surge365.MassEmailReact.API/Controllers/TargetsController.cs
+++ b/Surge365.MassEmailReact.API/Controllers/TargetsController.cs
@@ -4,6 +4,7 @@ using Microsoft.AspNetCore.Mvc;
 using Surge365.MassEmailReact.Application.DTOs;
 using Surge365.MassEmailReact.Application.Interfaces;
 using Surge365.MassEmailReact.Domain.Entities;
+using Surge365.MassEmailReact.Infrastructure.Repositories;
 
 namespace Surge365.MassEmailReact.API.Controllers
 {
@@ -62,5 +63,20 @@ namespace Surge365.MassEmailReact.API.Controllers
 
             return Ok(updatedTarget);
         }
+
+        [HttpGet("{targetId}/sample")]
+        public async Task<IActionResult> GetTargetSample(int targetId)
+        {
+            try
+            {
+                var sample = await _targetService.GetSampleData(targetId);
+                return Ok(sample);
+            }
+            catch (Exception ex)
+            {
+                // Log the exception (e.g., using ILogger if injected)
+                return StatusCode(500, new { message = "Error fetching sample data", error = ex.Message });
+            }
+        }
     }
 }
\ No newline at end of file
diff --git a/Surge365.MassEmailReact.Application/Interfaces/ITargetRepository.cs b/Surge365.MassEmailReact.Application/Interfaces/ITargetRepository.cs
index f0c09c2..df6a885 100644
--- a/Surge365.MassEmailReact.Application/Interfaces/ITargetRepository.cs
+++ b/Surge365.MassEmailReact.Application/Interfaces/ITargetRepository.cs
@@ -13,5 +13,6 @@ namespace Surge365.MassEmailReact.Application.Interfaces
         Task<List<Target>> GetAllAsync(bool activeOnly = true);
         Task<int?> CreateAsync(Target target);
         Task<bool> UpdateAsync(Target target);
+        Task<TargetSample> GetSampleData(int targetId);
     }
 }
diff --git a/Surge365.MassEmailReact.Application/Interfaces/ITargetService.cs b/Surge365.MassEmailReact.Application/Interfaces/ITargetService.cs
index 2e9ee3b..dd79023 100644
--- a/Surge365.MassEmailReact.Application/Interfaces/ITargetService.cs
+++ b/Surge365.MassEmailReact.Application/Interfaces/ITargetService.cs
@@ -8,5 +8,6 @@ namespace Surge365.MassEmailReact.Application.Interfaces
         Task<List<Target>> GetAllAsync(bool activeOnly = true);
         Task<int?> CreateAsync(TargetUpdateDto targetDto);
         Task<bool> UpdateAsync(TargetUpdateDto targetDto);
+        Task<TargetSample> GetSampleData(int targetId);
     }
 }
diff --git a/Surge365.MassEmailReact.Domain/Entities/TargetSample.cs b/Surge365.MassEmailReact.Domain/Entities/TargetSample.cs
new file mode 100644
index 0000000..6ab3a8d
--- /dev/null
+++ b/Surge365.MassEmailReact.Domain/Entities/TargetSample.cs
@@ -0,0 +1,15 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Surge365.MassEmailReact.Domain.Entities
+{
+    public class TargetSample
+    {
+        public List<string> ColumnNames { get; set; } = new List<string>();
+        public List<Dictionary<string, string>> Rows { get; set; } = new List<Dictionary<string, string>>();
+    }
+
+}
\ No newline at end of file
diff --git a/Surge365.MassEmailReact.Infrastructure/Repositories/TargetRepository.cs b/Surge365.MassEmailReact.Infrastructure/Repositories/TargetRepository.cs
index af38f1c..9345d0b 100644
--- a/Surge365.MassEmailReact.Infrastructure/Repositories/TargetRepository.cs
+++ b/Surge365.MassEmailReact.Infrastructure/Repositories/TargetRepository.cs
@@ -118,5 +118,42 @@ namespace Surge365.MassEmailReact.Infrastructure.Repositories
         //    Targets.Add(target);
         //}
 
+        public async Task<TargetSample> GetSampleData(int targetId)
+        {
+            // Placeholder hardcoded sample data for testing
+            var sample = new TargetSample
+            {
+                ColumnNames = new List<string> { "id", "name", "email", "age" },
+                Rows = new List<Dictionary<string, string>>
+                {
+                    new Dictionary<string, string>
+                        {
+                            { "id", "1" },
+                            { "name", "John Doe" },
+                            { "email", "john.doe@example.com" },
+                            { "age", "30" }
+                    },
+                    new Dictionary<string, string>
+                    {
+                        { "id", "2" },
+                        { "name", "Jane Smith" },
+                        { "email", "jane.smith@example.com" },
+                        { "age", "25" }
+                    },
+                    new Dictionary<string, string>
+                    {
+                        { "id", "3" },
+                        { "name", "Bob Johnson" },
+                        { "email", "bob.johnson@example.com" },
+                        { "age", "45" }
+                    }
+                }
+            };
+
+            // Simulate async operation (e.g., DB call) for testing
+            await Task.Delay(100); // Optional: Mimics network latency
+            return sample;
+        }
+
     }
 }
diff --git a/Surge365.MassEmailReact.Infrastructure/Services/TargetService.cs b/Surge365.MassEmailReact.Infrastructure/Services/TargetService.cs
index 9c375cd..7031f98 100644
--- a/Surge365.MassEmailReact.Infrastructure/Services/TargetService.cs
+++ b/Surge365.MassEmailReact.Infrastructure/Services/TargetService.cs
@@ -69,5 +69,9 @@ namespace Surge365.MassEmailReact.Infrastructure.Services
 
             return await _targetRepository.UpdateAsync(target);
         }
+        public async Task<TargetSample> GetSampleData(int targetId)
+        {
+            return await _targetRepository.GetSampleData(targetId);
+        }
     }
 }
diff --git a/Surge365.MassEmailReact.Web/src/components/modals/MailingEdit.tsx b/Surge365.MassEmailReact.Web/src/components/modals/MailingEdit.tsx
index b5e4f48..d5fda6a 100644
--- a/Surge365.MassEmailReact.Web/src/components/modals/MailingEdit.tsx
+++ b/Surge365.MassEmailReact.Web/src/components/modals/MailingEdit.tsx
@@ -11,14 +11,22 @@ import {
     FormControlLabel,
     Box
 } from "@mui/material";
+import Template from "@/types/template";
 import Mailing from "@/types/mailing";
+import Target from "@/types/target";
+import EmailList from "@/components/forms/EmailList";
+import TestEmailList from "@/types/testEmailList";
+import TemplateViewer from "@/components/modals/TemplateViewer"
+import TargetSampleViewer from "@/components/modals/TargetSampleViewer"
 import { useSetupData, SetupData } from "@/context/SetupDataContext";
 import { useForm, Controller, Resolver } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
-import EmailList from "@/components/forms/EmailList";
-import TestEmailList from "@/types/testEmailList";
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import dayjs, { Dayjs } from 'dayjs'; // Import Dayjs for date handling
 
 type MailingEditProps = {
     open: boolean;
@@ -47,6 +55,8 @@ const schema = yup.object().shape({
     id: yup.number().nullable(),
     name: yup.string().required("Name is required")
         .test("unique-name", "Name must be unique", async function (value) {
+            if (value.length === 0)
+                return true;
             return await nameIsAvailable(this.parent.id, value);
         }), 
     description: yup.string().default(""),
@@ -59,7 +69,16 @@ const schema = yup.object().shape({
         return setupData.targets.some(t => t.id === value);
     }),
     statusCode: yup.string().default("ED"),
-    scheduleDate: yup.date().nullable(),
+    scheduleDate: yup.date()
+        .nullable()
+        .when("$scheduleForLater", (scheduleForLater, schema) => { // Use context variable
+            return scheduleForLater
+                ? schema
+                    .required("Schedule date is required when scheduled for later")
+                    .min(new Date(), "Schedule date must be in the future")
+                : schema.nullable();
+        }),
+    //scheduleDate: yup.date().nullable(),
 
     //    .when("statusCode", {
     //    is: (value: string) => value === "SC" || value === "SD", // String comparison
@@ -104,8 +123,14 @@ const MailingEdit = ({ open, mailing, onClose, onSave }: MailingEditProps) => {
     const isNew = !mailing || mailing.id === 0;
     const setupData: SetupData = useSetupData();
     const [approved, setApproved] = useState<boolean>(false);
+    const [recurring, setRecurring] = useState<boolean>(false);
+    const [scheduleForLater, setScheduleForLater] = useState<boolean>(false);
     const [testEmailListId, setTestEmailListId] = useState<number | null>(null);
     const [emails, setEmails] = useState<string[]>([]); // State for email array
+    const [templateViewerOpen, setTemplateViewerOpen] = useState<boolean>(false);
+    const [currentTemplate, setCurrentTemplate] = useState<Template | null>(null);
+    const [targetSampleViewerOpen, setTargetSampleViewerOpen] = useState<boolean>(false);
+    const [currentTarget, setCurrentTarget] = useState<Target | null>(null);
 
     const { register, trigger, control, handleSubmit, reset, formState: { errors } } = useForm<Mailing>({
         mode: "onBlur",
@@ -128,12 +153,41 @@ const MailingEdit = ({ open, mailing, onClose, onSave }: MailingEditProps) => {
                 setTestEmailListId(null);
                 setEmails([]);
             }
+            if (mailing?.templateId) {
+                const template = setupData.templates.find(t => t.id === mailing.templateId) || null;
+                setCurrentTemplate(template);
+            } else {
+                setCurrentTemplate(null);
+            }
+            if (mailing?.targetId) {
+                const target = setupData.targets.find(t => t.id === mailing.targetId) || null;
+                setCurrentTarget(target);
+            } else {
+                setCurrentTarget(null);
+            }
         }
-    }, [open, mailing, reset, setupData.testEmailLists]);
+    }, [open, mailing, reset, setupData.testEmailLists, setupData.targets]);
     const handleSave = async (formData: Mailing) => {
         const apiUrl = isNew ? "/api/mailings" : `/api/mailings/${formData.id}`;
         const method = isNew ? "POST" : "PUT";
         setLoading(true);
+
+        if (approved) {
+            formData.statusCode = "SC";
+            if (!scheduleForLater) {
+                formData.scheduleDate = null;
+            }
+            if (!recurring) {
+                formData.recurringTypeCode = null;
+                formData.recurringStartDate = null;
+            }
+        }
+        else {
+            formData.statusCode = "ED";
+            formData.scheduleDate = null;
+            formData.recurringTypeCode = null;
+            formData.recurringStartDate = null;
+        }
         try {
             const response = await fetch(apiUrl, {
                 method: method,
@@ -162,181 +216,247 @@ const MailingEdit = ({ open, mailing, onClose, onSave }: MailingEditProps) => {
 
     const handleTestEmailListChange = (list: TestEmailList | null) => {
         if (list) {
+            setTestEmailListId(list.id);
             setEmails(list.emails);
         }
     }
     const handleApprovedChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         setApproved(event.target.checked);
     };
+    const handleRecurringChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setRecurring(event.target.checked);
+    };
+    const handleScheduleForLaterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setScheduleForLater(event.target.checked);
+    };
+    const handleTemplateViewerOpen = () => {
+        setTemplateViewerOpen(!templateViewerOpen);
+    };
+    const handleTargetSampleViewerOpen = () => {
+        setTargetSampleViewerOpen(!targetSampleViewerOpen);
+    };
     return (
-        <Dialog open={open} onClose={(_, reason) => { onClose(reason); }} maxWidth="sm" fullWidth disableEscapeKeyDown >
-            <DialogTitle>{isNew ? "Add Mailing" : "Edit Mailing id=" + mailing?.id}</DialogTitle>
-            <DialogContent>
-                <TextField
-                    {...register("name")}
-                    label="Name"
-                    fullWidth
-                    margin="dense"
-                    error={!!errors.name}
-                    helperText={errors.name?.message}
-                />
-                <TextField
-                    {...register("description")}
-                    label="Description"
-                    fullWidth
-                    margin="dense"
-                    error={!!errors.description}
-                    helperText={errors.description?.message}
-                />
-                <Controller
-                    name="templateId"
-                    control={control}
-                    render={({ field }) => (
-                        <Autocomplete
-                            {...field}
-                            options={setupData.templates}
-                            getOptionLabel={(option) => option.name}
-                            value={setupData.templates.find(t => t.id === field.value) || null}
-                            onChange={(_, newValue) => {
-                                field.onChange(newValue ? newValue.id : null);
-                                trigger("templateId");
-                            }}
-                            renderInput={(params) => (
-                                <TextField
-                                    {...params}
-                                    label="Template"
-                                    fullWidth
-                                    margin="dense"
-                                    error={!!errors.templateId}
-                                    helperText={errors.templateId?.message}
-                                />
-                            )}
-                        />
+        <LocalizationProvider dateAdapter={AdapterDayjs}> {/* Wrap with LocalizationProvider */}
+            <Dialog open={open} onClose={(_, reason) => { onClose(reason); }} maxWidth="sm" fullWidth disableEscapeKeyDown >
+                <DialogTitle>{isNew ? "Add Mailing" : "Edit Mailing id=" + mailing?.id}</DialogTitle>
+                <DialogContent>
+                    <TextField
+                        {...register("name")}
+                        label="Name"
+                        fullWidth
+                        margin="dense"
+                        error={!!errors.name}
+                        helperText={errors.name?.message}
+                    />
+                    <TextField
+                        {...register("description")}
+                        label="Description"
+                        fullWidth
+                        margin="dense"
+                        error={!!errors.description}
+                        helperText={errors.description?.message}
+                    />
+                    <Controller
+                        name="templateId"
+                        control={control}
+                        render={({ field }) => (
+                            <Autocomplete
+                                {...field}
+                                options={setupData.templates}
+                                getOptionLabel={(option) => option.name}
+                                value={setupData.templates.find(t => t.id === field.value) || null}
+                                onChange={(_, newValue) => {
+                                    field.onChange(newValue ? newValue.id : null);
+                                    trigger("templateId");
+                                    setCurrentTemplate(newValue);
+                                }}
+                                renderInput={(params) => (
+                                    <TextField
+                                        {...params}
+                                        label="Template"
+                                        fullWidth
+                                        margin="dense"
+                                        error={!!errors.templateId}
+                                        helperText={errors.templateId?.message}
+                                    />
+                                )}
+                            />
+                        )}
+                    />
+                    {currentTemplate && (
+                        <Button onClick={handleTemplateViewerOpen}>View Template</Button>
                     )}
-                />
-                <Controller
-                    name="targetId"
-                    control={control}
-                    render={({ field }) => (
-                        <Autocomplete
-                            {...field}
-                            options={setupData.targets}
-                            getOptionLabel={(option) => option.name}
-                            value={setupData.targets.find(t => t.id === field.value) || null}
-                            onChange={(_, newValue) => {
-                                field.onChange(newValue ? newValue.id : null);
-                                trigger("targetId");
-                            }}
-                            renderInput={(params) => (
-                                <TextField
-                                    {...params}
-                                    label="Target"
-                                    fullWidth
-                                    margin="dense"
-                                    error={!!errors.targetId}
-                                    helperText={errors.targetId?.message}
-                                />
-                            )}
-                        />
+                        
+                    <Controller
+                        name="targetId"
+                        control={control}
+                        render={({ field }) => (
+                            <Autocomplete
+                                {...field}
+                                options={setupData.targets}
+                                getOptionLabel={(option) => option.name}
+                                value={setupData.targets.find(t => t.id === field.value) || null}
+                                onChange={(_, newValue) => {
+                                    field.onChange(newValue ? newValue.id : null);
+                                    trigger("targetId");
+                                    setCurrentTarget(newValue);
+                                }}
+                                renderInput={(params) => (
+                                    <TextField
+                                        {...params}
+                                        label="Target"
+                                        fullWidth
+                                        margin="dense"
+                                        error={!!errors.targetId}
+                                        helperText={errors.targetId?.message}
+                                    />
+                                )}
+                            />
+                        )}
+                    />
+                    {currentTarget && (
+                        <Button onClick={handleTargetSampleViewerOpen}>View Target Sample</Button>
                     )}
-                />
-                <Autocomplete
-                    options={setupData.testEmailLists}
-                    getOptionLabel={(option) => option.name}
-                    value={setupData.testEmailLists.find(t => t.id === testEmailListId) || null}
-                    onChange={(_, newValue) => handleTestEmailListChange(newValue)}
-                    renderInput={(params) => (
-                        <TextField
-                            {...params}
-                            label="Test Email List"
-                            fullWidth
-                            margin="dense"
-                        />
-                    )}
-                />
-                <EmailList emails={emails} onEmailTextChange={handleEmailsChange} />
-                <Button onClick={handleTestMailing} disabled={loading}>Test Mailing</Button>
-                <Box>
-                    <FormControlLabel control={<Checkbox checked={approved} onChange={handleApprovedChange} />} label="Approved" />
-                </Box>
-                {approved && (<>
-                    <Box sx={{ display: 'flex', flexDirection: 'column', ml: 3 }}>
-                        <FormControlLabel control={<Checkbox />} label="Recurring Mailing" />
-                        <FormControlLabel control={<Checkbox />} label="Schedule for Later" />
-                        <DatePicker />
+                    <Autocomplete
+                        options={setupData.testEmailLists}
+                        getOptionLabel={(option) => option.name}
+                        value={setupData.testEmailLists.find(t => t.id === testEmailListId) || null}
+                        onChange={(_, newValue) => handleTestEmailListChange(newValue)}
+                        renderInput={(params) => (
+                            <TextField
+                                {...params}
+                                label="Test Email List"
+                                fullWidth
+                                margin="dense"
+                            />
+                        )}
+                    />
+                    <EmailList emails={emails} onEmailTextChange={handleEmailsChange} />
+                    <Button onClick={handleTestMailing} disabled={loading}>Test Mailing</Button>
+                    <Box>
+                        <FormControlLabel control={<Checkbox checked={approved} onChange={handleApprovedChange} />} label="Approved" />
                     </Box>
-                </>)}
-                {/*<Controller
-                    name="scheduleDate"
-                    control={control}
-                    render={({ field }) => (
-                        <TextField
-                            {...field}
-                            label="Schedule Date"
-                            type="datetime-local"
-                            fullWidth
-                            margin="dense"
-                            InputLabelProps={{ shrink: true }}
-                            value={field.value ? new Date(field.value).toISOString().slice(0, 16) : ''}
-                            onChange={(e) => field.onChange(e.target.value ? new Date(e.target.value) : null)}
-                            error={!!errors.scheduleDate}
-                            helperText={errors.scheduleDate?.message}
-                        />
-                    )}
-                />
-                <Controller
-                    name="recurringTypeCode"
-                    control={control}
-                    render={({ field }) => (
-                        <Autocomplete
-                            {...field}
-                            options={recurringTypeOptions}
-                            getOptionLabel={(option) => option.name}
-                            value={recurringTypeOptions.find(r => r.code === field.value) || null}
-                            onChange={(_, newValue) => {
-                                field.onChange(newValue ? newValue.code : null);
-                                trigger("recurringTypeCode");
-                            }}
-                            renderInput={(params) => (
-                                <TextField
-                                    {...params}
-                                    label="Recurring Type"
-                                    fullWidth
-                                    margin="dense"
-                                    error={!!errors.recurringTypeCode}
-                                    helperText={errors.recurringTypeCode?.message}
+                    {approved && (<>
+                        <Box sx={{ display: 'flex', flexDirection: 'column', ml: 3 }}>
+                            <FormControlLabel control={<Checkbox checked={recurring} onChange={handleRecurringChange} />} label="Recurring Mailing" />
+                            {recurring && (<>
+                                TODO: RECURRING OPTIONS HERE
+                            </>)}
+                            <FormControlLabel control={<Checkbox checked={scheduleForLater} onChange={handleScheduleForLaterChange} />} label="Schedule for Later" />
+                            {scheduleForLater && (
+                                <Controller
+                                    name="scheduleDate"
+                                    control={control}
+                                    render={({ field }) => (
+                                        <DateTimePicker
+                                            label="Schedule Date"
+                                            value={field.value ? dayjs(field.value) : null} // Convert to Dayjs
+                                            onChange={(newValue: Dayjs | null) => {
+                                                field.onChange(newValue ? newValue.toDate() : null); // Convert back to Date
+                                                trigger("scheduleDate"); // Revalidate
+                                            }}
+                                            slotProps={{
+                                                textField: {
+                                                    fullWidth: true,
+                                                    margin: "dense",
+                                                    error: !!errors.scheduleDate,
+                                                    helperText: errors.scheduleDate?.message,
+                                                },
+                                            }}
+                                            minDateTime={dayjs()} // Enforce future date in UI
+                                        />
+                                    )}
                                 />
                             )}
-                        />
-                    )}
-                />
-                <Controller
-                    name="recurringStartDate"
-                    control={control}
-                    render={({ field }) => (
-                        <TextField
-                            {...field}
-                            label="Recurring Start Date"
-                            type="datetime-local"
-                            fullWidth
-                            margin="dense"
-                            InputLabelProps={{ shrink: true }}
-                            value={field.value ? new Date(field.value).toISOString().slice(0, 16) : ''}
-                            onChange={(e) => field.onChange(e.target.value ? new Date(e.target.value) : null)}
-                            error={!!errors.recurringStartDate}
-                            helperText={errors.recurringStartDate?.message}
-                        />
-                    )}
-                />
-                */}
-            </DialogContent>
-            <DialogActions>
-                <Button onClick={() => { onClose( 'cancelled'); }} disabled={loading}>Cancel</Button>
-                <Button onClick={handleSubmit(handleSave)} color="primary" disabled={loading}>
-                    {loading ? "Saving..." : "Save"}
-                </Button>
-            </DialogActions>
-        </Dialog>
+                        </Box>
+                    </>)}
+                    {/*<Controller
+                        name="scheduleDate"
+                        control={control}
+                        render={({ field }) => (
+                            <TextField
+                                {...field}
+                                label="Schedule Date"
+                                type="datetime-local"
+                                fullWidth
+                                margin="dense"
+                                InputLabelProps={{ shrink: true }}
+                                value={field.value ? new Date(field.value).toISOString().slice(0, 16) : ''}
+                                onChange={(e) => field.onChange(e.target.value ? new Date(e.target.value) : null)}
+                                error={!!errors.scheduleDate}
+                                helperText={errors.scheduleDate?.message}
+                            />
+                        )}
+                    />
+                    <Controller
+                        name="recurringTypeCode"
+                        control={control}
+                        render={({ field }) => (
+                            <Autocomplete
+                                {...field}
+                                options={recurringTypeOptions}
+                                getOptionLabel={(option) => option.name}
+                                value={recurringTypeOptions.find(r => r.code === field.value) || null}
+                                onChange={(_, newValue) => {
+                                    field.onChange(newValue ? newValue.code : null);
+                                    trigger("recurringTypeCode");
+                                }}
+                                renderInput={(params) => (
+                                    <TextField
+                                        {...params}
+                                        label="Recurring Type"
+                                        fullWidth
+                                        margin="dense"
+                                        error={!!errors.recurringTypeCode}
+                                        helperText={errors.recurringTypeCode?.message}
+                                    />
+                                )}
+                            />
+                        )}
+                    />
+                    <Controller
+                        name="recurringStartDate"
+                        control={control}
+                        render={({ field }) => (
+                            <TextField
+                                {...field}
+                                label="Recurring Start Date"
+                                type="datetime-local"
+                                fullWidth
+                                margin="dense"
+                                InputLabelProps={{ shrink: true }}
+                                value={field.value ? new Date(field.value).toISOString().slice(0, 16) : ''}
+                                onChange={(e) => field.onChange(e.target.value ? new Date(e.target.value) : null)}
+                                error={!!errors.recurringStartDate}
+                                helperText={errors.recurringStartDate?.message}
+                            />
+                        )}
+                    />
+                    */}
+
+                {templateViewerOpen && (
+                    <TemplateViewer
+                        open={templateViewerOpen}
+                        template={currentTemplate!}
+                        onClose={() => { setTemplateViewerOpen(false) }}
+                    />
+                )}
+                {targetSampleViewerOpen && (
+                    <TargetSampleViewer
+                        open={targetSampleViewerOpen}
+                        target={currentTarget!}
+                        onClose={() => { setTargetSampleViewerOpen(false) }}
+                    />
+                )}
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => { onClose( 'cancelled'); }} disabled={loading}>Cancel</Button>
+                    <Button onClick={handleSubmit(handleSave)} color="primary" disabled={loading}>
+                        {loading ? "Saving..." : "Save"}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </LocalizationProvider>
     );
 };
 
diff --git a/Surge365.MassEmailReact.Web/src/components/modals/TargetSampleViewer.tsx b/Surge365.MassEmailReact.Web/src/components/modals/TargetSampleViewer.tsx
new file mode 100644
index 0000000..d179a5c
--- /dev/null
+++ b/Surge365.MassEmailReact.Web/src/components/modals/TargetSampleViewer.tsx
@@ -0,0 +1,101 @@
+import { useState, useEffect } from "react";
+import {
+    IconButton,
+    Box,
+    Dialog,
+    DialogTitle,
+    DialogContent,
+} from "@mui/material";
+import Target from "@/types/target";
+import CloseIcon from '@mui/icons-material/Close';
+import { DataGrid, GridColDef } from '@mui/x-data-grid';
+
+type TargetSampleViewerProps = {
+    open: boolean;
+    target: Target;
+    onClose: () => void;
+};
+
+type TargetSample = {
+    columnNames: string[];
+    rows: { [key: string]: string }[];
+};
+
+const TargetSampleViewer = ({ open, target, onClose }: TargetSampleViewerProps) => {
+    const [targetSample, setTargetSample] = useState<TargetSample | null>(null); // Store the full sample response
+    const [loading, setLoading] = useState(false); // Optional: Add loading state
+
+    // Fetch sample data when dialog opens
+    useEffect(() => {
+        if (open) {
+            const fetchSampleData = async () => {
+                setLoading(true);
+                try {
+                    const response = await fetch(`/api/targets/${target.id}/sample`);
+                    if (!response.ok) throw new Error("Failed to fetch sample data");
+                    const data: TargetSample = await response.json();
+                    setTargetSample(data);
+                } catch (error) {
+                    console.error("Error fetching target sample:", error);
+                    setTargetSample(null); // Reset on error
+                } finally {
+                    setLoading(false);
+                }
+            };
+            fetchSampleData();
+        }
+    }, [open, target.id]);
+
+    // Transform columnNames into GridColDef array
+    const columns: GridColDef[] = targetSample?.columnNames?.map((colName) => ({
+        field: colName,
+        headerName: colName.charAt(0).toUpperCase() + colName.slice(1), // Capitalize header
+        flex: 1,
+        sortable: true,
+    })) || [];
+
+    // Transform TargetRow into DataGrid-compatible rows
+    const rows = targetSample?.rows?.map((row, index) => {
+        const rowData: { [key: string]: string } = { id: index.toString() }; // Use index as unique id
+        targetSample.columnNames.forEach((key) => {
+            rowData[key] = row[key] ?? ""; // Map each key-value pair to the row object
+        });
+        return rowData;
+    }) || [];
+
+    return (
+        <Dialog open={open} onClose={onClose} maxWidth="lg" fullWidth>
+            <DialogTitle>
+                <Box display="flex" alignItems="center" justifyContent="space-between">
+                    <span>View Target Sample "{target.name}"</span>
+                    <IconButton
+                        aria-label="close"
+                        onClick={onClose}
+                        sx={{ marginLeft: "auto" }}
+                    >
+                        <CloseIcon />
+                    </IconButton>
+                </Box>
+            </DialogTitle>
+            <DialogContent>
+                <DataGrid
+                    rows={rows} // Use transformed rows
+                    columns={columns} // Use transformed columns
+                    autoPageSize
+                    loading={loading} // Show loading state
+                    sx={{ width: "100%", height: "calc(90vh - 120px)" }}
+                    initialState={{
+                        pagination: {
+                            paginationModel: {
+                                pageSize: 20,
+                            },
+                        },
+                    }}
+                    pageSizeOptions={[10, 20, 50, 100]}
+                />
+            </DialogContent>
+        </Dialog>
+    );
+};
+
+export default TargetSampleViewer;
\ No newline at end of file
diff --git a/Surge365.MassEmailReact.Web/src/components/modals/TemplateViewer.tsx b/Surge365.MassEmailReact.Web/src/components/modals/TemplateViewer.tsx
new file mode 100644
index 0000000..5d56e05
--- /dev/null
+++ b/Surge365.MassEmailReact.Web/src/components/modals/TemplateViewer.tsx
@@ -0,0 +1,43 @@
+import {
+    IconButton,
+    Box,
+    Dialog,
+    DialogTitle,
+    DialogContent
+} from "@mui/material";
+import Template from "@/types/template";
+import CloseIcon from '@mui/icons-material/Close';
+
+type TemplateViewerProps = {
+    open: boolean;
+    template: Template;
+    onClose: () => void;
+};
+
+const TemplateViewer = ({ open, template, onClose }: TemplateViewerProps) => {
+    return (
+        <Dialog open={open} onClose={() => { onClose(); }} maxWidth="md" fullWidth >
+            <DialogTitle>
+                <Box display="flex" alignItems="center" justifyContent="space-between">
+                    <span>View Template "{template.name}"</span>
+                    <IconButton
+                        aria-label="close"
+                        onClick={onClose}
+                        sx={{ marginLeft: "auto" }} // Pushes button to the right
+                    >
+                        <CloseIcon />
+                    </IconButton>
+                </Box>
+            </DialogTitle>
+            <DialogContent>
+                <iframe
+                    srcDoc={template.htmlBody ??  ""}
+                    sandbox="allow-same-origin"
+                    style={{ width: "100%", height: "calc(90vh - 120px)", border: "none" }}
+                />
+            </DialogContent>
+        </Dialog>
+    );
+};
+
+export default TemplateViewer;
\ No newline at end of file
diff --git a/Surge365.MassEmailReact.Web/src/components/pages/Servers.tsx b/Surge365.MassEmailReact.Web/src/components/pages/Servers.tsx
index 681e369..d75a6ed 100644
--- a/Surge365.MassEmailReact.Web/src/components/pages/Servers.tsx
+++ b/Surge365.MassEmailReact.Web/src/components/pages/Servers.tsx
@@ -153,7 +153,7 @@ function Servers() {
                     </List>
                 ) : (
                     <DataGrid
-                            rows={displayRows}
+                        rows={displayRows}
                         columns={columns}
                         autoPageSize
                         sx={{ minWidth: "600px" }}