diff --git a/src/app/auth/callback/route.ts b/src/app/auth/callback/route.ts
index 49c2a468..207dd814 100644
--- a/src/app/auth/callback/route.ts
+++ b/src/app/auth/callback/route.ts
@@ -8,8 +8,6 @@ export async function GET(request: Request) {
   // if "next" is in param, use it as the redirect URL
   const next = searchParams.get("redirect") ?? "/";
 
-  console.log("next", next);
-
   if (code) {
     const supabase = createClient();
     const { error } = await supabase.auth.exchangeCodeForSession(code);
diff --git a/src/app/portal/admin/forms/[id]/settings/formSettings.tsx b/src/app/portal/admin/forms/[id]/settings/formSettings.tsx
new file mode 100644
index 00000000..2d20f1d5
--- /dev/null
+++ b/src/app/portal/admin/forms/[id]/settings/formSettings.tsx
@@ -0,0 +1,477 @@
+"use client";
+import { useState, useMemo } from "react";
+import { marked } from "marked";
+import Input from "@/components/general/input";
+import { formContext } from "@/components/layouts/formTabView";
+import { Textarea } from "@/components/primitives/textArea";
+import { useContext } from "react";
+import { Button } from "@/components/primitives/button";
+import MultiSelect from "@/components/general/multiSelect";
+import { FormStep } from "@/lib/types/questions";
+import { updateOrCreateEmailTemplate } from "./actions";
+import { toast } from "sonner";
+import { Dialog } from "@/components/primitives/dialog";
+import { number } from "zod";
+
+// Helper function to extract template tags
+const extractTemplateTags = (content: string): string[] => {
+  const regex = /{{([^{}]+)}}/g;
+  const matches = content.match(regex);
+  if (!matches) return [];
+  return matches.map((match) => match.slice(2, -2));
+};
+
+// Helper to find unclosed tags
+const findInvalidTags = (content: string): string[] => {
+  const regex = /{{([^{}]*$)|{{([^{}]*)}(?!})/g;
+  const matches = content.match(regex);
+  return matches || [];
+};
+
+export default function FormSettingsPage() {
+  const { rawForm: form, submissions } = useContext(formContext);
+  const emailStatuses = form?.config.application?.emails?.status || {};
+  const statusOptions = form?.config.application?.status || [];
+  const [editingStatus, setEditingStatus] = useState<string | null>(null);
+  const [showNewTemplate, setShowNewTemplate] = useState(false);
+  const [selectedStatus, setSelectedStatus] = useState("");
+  const [showPreview, setShowPreview] = useState(false);
+
+  const [title, setTitle] = useState("");
+  const [content, setContent] = useState("");
+  const [openTemplates, setOpenTemplates] = useState<string[]>([]);
+
+  async function applyTemplateChange(templateData: {
+    status: string;
+    title: string;
+    content: string;
+  }) {
+    try {
+      await updateOrCreateEmailTemplate(form.id, templateData.status, {
+        title: templateData.title,
+        content: templateData.content,
+      });
+      toast.success("Template updated successfully", {
+        action: {
+          label: "Refresh",
+          onClick: () => window.location.reload(),
+        },
+      });
+      return true;
+    } catch (error) {
+      toast.error("Error updating template");
+      console.error("Error updating template:", error);
+      return false;
+    }
+  }
+
+  const templateFields = useMemo(() => {
+    const fields: Record<string, string> = {};
+    form.questions.forEach((fStep: FormStep) => {
+      fStep.questions.forEach((question) => {
+        fields[question.id] = question.label;
+      });
+    });
+    form.config.application?.subfields?.forEach(
+      (field: { id: string; label: string }) => {
+        fields[field.id] = field.label;
+      },
+    );
+    return fields;
+  }, [form]);
+
+  const handleSave = async (templateData) => {
+    await applyTemplateChange(templateData);
+    setEditingStatus(null);
+  };
+
+  const handleCreateNew = async (templateData) => {
+    await applyTemplateChange(templateData);
+    setShowNewTemplate(false);
+    setSelectedStatus("");
+    setTitle("");
+    setContent("");
+  };
+
+  const availableStatuses = statusOptions
+    .filter(
+      (status) =>
+        !emailStatuses[status.id] || !emailStatuses[status.id.toString()],
+    )
+    .map((status) => ({
+      id: status.id,
+      label: status.label,
+    }));
+
+  return (
+    <div className="flex flex-col dark gap-4  items-center w-full px-4">
+      <div className="flex w-full sticky top-0 justify-between items-center">
+        <h2 className="font-semibold text-xl sticky top-0">Email Settings</h2>
+        {availableStatuses.length > 0 && (
+          <Button onClick={() => setShowNewTemplate(true)}>
+            Create New Template
+          </Button>
+        )}
+      </div>
+      <div className="flex flex-col justify-center items-center gap-2 w-full ">
+        <section className="flex flex-col w-full rounded-md p-4 gap-4 items-center *:w-full">
+          <details className="bg-background-700 border border-background-600 max-w-4xl rounded-lg">
+            <summary className="px-4 py-2 cursor-pointer font-medium">
+              Important Information About Email Templates
+            </summary>
+            <div className="p-4 space-y-4 border-t border-background-600">
+              <div>
+                <h4 className="font-medium mb-2">Email Sending Limits</h4>
+                <p className="text-sm">
+                  Due to email service provider restrictions, we can only send
+                  up to 100 automated emails per day. Please plan your bulk
+                  notifications accordingly.
+                </p>
+              </div>
+              <div>
+                <h4 className="font-medium mb-2">Available Template Tags</h4>
+                <div className="flex flex-wrap gap-2">
+                  {Object.entries(templateFields).map(([key, value]) => (
+                    <span
+                      key={key}
+                      className="px-2 py-1 bg-background-600 rounded-md text-sm flex items-center gap-1"
+                    >
+                      <span className="font-mono text-lp-500">{`{{${key}}}`}</span>
+                      <span className="text-xs opacity-75">: {value}</span>
+                    </span>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </details>
+
+          <div className="flex flex-col max-w-4xl gap-4 ">
+            <MultiSelect
+              options={Object.entries(emailStatuses).map(
+                ([status, emailConfig]) => ({
+                  value: status,
+                  label: (
+                    <div className="flex items-center gap-2">
+                      <span className="border text-xs border-background-500 rounded-full px-2 py-0.5 bg-lp-500 min-w-16 text-center">
+                        {status}
+                      </span>
+                      <span className="text-sm truncate opacity-75">
+                        {emailConfig.title}
+                      </span>
+                    </div>
+                  ),
+                }),
+              )}
+              value={openTemplates}
+              onChange={setOpenTemplates}
+              allowMultiple={true}
+              className="w-full"
+              emptyText="Select templates to view..."
+            />
+            {showNewTemplate && (
+              <div className="border rounded-lg p-4 bg-background-700">
+                <h3 className="font-medium mb-4">Create New Template</h3>
+                <div className="space-y-4">
+                  <div className="space-y-2">
+                    <h4 className="font-medium">Status</h4>
+                    <select
+                      value={selectedStatus}
+                      onChange={(e) => setSelectedStatus(e.target.value)}
+                      className="w-full p-2 rounded-md bg-background-600"
+                    >
+                      <option value="">Select a status...</option>
+                      {availableStatuses.map((status) => (
+                        <option key={status.id} value={status.id}>
+                          {status.label}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+
+                  <div className="space-y-2">
+                    <h4 className="font-medium">Subject Line</h4>
+                    <Input
+                      type="text"
+                      value={title}
+                      onChange={(e) => setTitle(e.target.value)}
+                      placeholder="Enter email subject"
+                      className="w-full p-2 border rounded-md bg-background-600"
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <h4 className="font-medium">Email Content</h4>
+                    <Textarea
+                      value={content}
+                      onChange={(e) => setContent(e.target.value)}
+                      placeholder="Enter email content"
+                      rows={8}
+                      className="w-full resize-none p-2 border rounded-md font-mono text-sm bg-background-600"
+                    />
+                  </div>
+
+                  <div className="flex justify-end gap-2">
+                    <Button
+                      variant="outline"
+                      onClick={() => {
+                        setShowNewTemplate(false);
+                        setSelectedStatus("");
+                        setTitle("");
+                        setContent("");
+                      }}
+                    >
+                      Cancel
+                    </Button>
+                    <Button
+                      onClick={() =>
+                        handleCreateNew({
+                          status: selectedStatus,
+                          title,
+                          content,
+                        })
+                      }
+                      disabled={!title || !content}
+                    >
+                      Create
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+
+          <div className="flex flex-col gap-4 max-w-4xl flex-1">
+            {Object.entries(emailStatuses)
+              .filter(([status]) => openTemplates.includes(status))
+              .map(([status, emailConfig]) => {
+                const isEditing = editingStatus === status;
+                const currentContent = isEditing
+                  ? content
+                  : emailConfig.content;
+                const currentTitle = isEditing ? title : emailConfig.title;
+                const tags = extractTemplateTags(currentContent);
+                const invalidTags = findInvalidTags(currentContent);
+
+                return (
+                  <div
+                    key={status}
+                    className="border rounded-lg bg-background-700 min-w-[600px]  flex-1 border-background-600 p-4 "
+                  >
+                    <div className="flex items-center justify-between w-full gap-2 pb-4">
+                      <span className="border text-base border-background-500 rounded-full font-semibold px-2 py-1 text-center w-24 bg-background-500 capitalize">
+                        {status}
+                      </span>
+                      <div className="flex gap-2">
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => setShowPreview(true)}
+                        >
+                          Preview
+                        </Button>
+                        {!isEditing && (
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => {
+                              setEditingStatus(status);
+                              setContent(emailConfig.content);
+                              setTitle(emailConfig.title);
+                            }}
+                          >
+                            Edit
+                          </Button>
+                        )}
+                      </div>
+
+                      {showPreview && (
+                        <TemplatePreview
+                          template={{
+                            title: currentTitle,
+                            content: currentContent,
+                          }}
+                          onClose={() => setShowPreview(false)}
+                          submissions={submissions}
+                          templateFields={templateFields}
+                        />
+                      )}
+                    </div>
+
+                    <div className="space-y-4">
+                      <div className="space-y-2">
+                        <h4 className="font-medium">Subject Line</h4>
+                        <Input
+                          type="text"
+                          value={currentTitle}
+                          onChange={(e) => setTitle(e.target.value)}
+                          disabled={!isEditing}
+                          className="w-full p-2 border rounded-md bg-background-600"
+                        />
+                      </div>
+
+                      <div className="space-y-2">
+                        <h4 className="font-medium">Email Content</h4>
+                        <Textarea
+                          value={currentContent}
+                          onChange={(e) => setContent(e.target.value)}
+                          disabled={!isEditing}
+                          className="w-full 
+                         min-h-[300px]  field-sizing-content p-2 border rounded-md font-mono text-sm bg-background-600"
+                        />
+                      </div>
+
+                      <div className="space-y-2">
+                        <h4 className="font-medium">Template Fields Used</h4>
+                        <div className="flex flex-wrap gap-2">
+                          {tags.map((tag) => (
+                            <span
+                              key={tag}
+                              className="px-2 py-1 rounded-md text-sm flex items-center gap-1 bg-background-600"
+                            >
+                              <span
+                                className={`font-mono ${
+                                  Object.keys(templateFields).includes(tag)
+                                    ? "text-lp-500"
+                                    : "text-red-500"
+                                }`}
+                              >{`{{${tag}}}`}</span>
+                            </span>
+                          ))}
+                        </div>
+                        {invalidTags.length > 0 && (
+                          <p className="text-sm text-red-500">
+                            Found unclosed template tags. Please fix them before
+                            saving.
+                          </p>
+                        )}
+                      </div>
+
+                      {isEditing && (
+                        <div className="flex justify-end gap-2">
+                          <Button
+                            variant="outline"
+                            onClick={() => {
+                              setEditingStatus(null);
+                              setContent(emailConfig.content);
+                              setTitle(emailConfig.title);
+                            }}
+                          >
+                            Cancel
+                          </Button>
+                          <Button
+                            onClick={() =>
+                              handleSave({ status, title, content })
+                            }
+                            disabled={
+                              invalidTags.length > 0 ||
+                              tags.some(
+                                (tag) =>
+                                  !Object.keys(templateFields).includes(tag),
+                              )
+                            }
+                          >
+                            Save
+                          </Button>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}
+
+function TemplatePreview({
+  template,
+  onClose,
+  submissions,
+  templateFields,
+}: {
+  template: { title: string; content: string };
+  onClose: () => void;
+  submissions: any[];
+  templateFields: Record<string, string>;
+}) {
+  const [search, setSearch] = useState("");
+  const [selectedUser, setSelectedUser] = useState<any>(null);
+
+  const previewContent = useMemo(() => {
+    if (!selectedUser) return template.content;
+
+    let content = template.content;
+    // Replace template variables
+    Object.keys(templateFields).forEach((key) => {
+      const value = selectedUser[key] || selectedUser.details?.[key];
+      if (value) {
+        content = content.replace(new RegExp(`{{${key}}}`, "g"), value);
+      }
+    });
+
+    // Convert markdown links to HTML
+    return marked(content, { breaks: true });
+  }, [selectedUser, template.content, templateFields]);
+
+  // Update the preview content display to render HTML
+
+  return (
+    <Dialog open onOpenChange={onClose}>
+      <div className="fixed inset-0 z-50 bg-black/80">
+        <div className="fixed left-[50%] top-[50%] z-50 grid w-full max-w-3xl translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background-800 p-6 shadow-lg sm:rounded-lg">
+          <div className="flex flex-col gap-4">
+            <h2 className="text-lg font-semibold">Preview Template</h2>
+
+            <div className="flex gap-2 items-center">
+              <Input
+                className="p-2 w-full bg-background-600 rounded-md"
+                list="preview-emails"
+                placeholder="Search user by email"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+              />
+              <datalist id="preview-emails">
+                {submissions.map((submission) => (
+                  <option key={submission.id}>{submission.email}</option>
+                ))}
+              </datalist>
+              <Button
+                disabled={!search || search.length < 3}
+                onClick={() => {
+                  setSelectedUser(submissions.find((s) => s.email === search));
+                }}
+              >
+                Preview
+              </Button>
+            </div>
+
+            <div className="space-y-2 mt-4">
+              <h3 className="font-medium">Subject</h3>
+              <div className="p-2 bg-background-600 rounded-md">
+                {template.title}
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <h3 className="font-medium">Content</h3>
+              <div className="p-2 bg-background-600 rounded-md whitespace-pre-wrap ">
+                <div
+                  className="p-2 bg-background-600 rounded-md whitespace-pre-wrap min-h-[200px] max-h-[600px] overflow-y-auto prose prose-sm prose-invert [&>*]:!my-0.5 [&_p]:!my-0.5 [&_ul]:!my-0.5 [&_li]:!my-0.5 [&_ul]:!pl-4 [&_ol]:!pl-4"
+                  dangerouslySetInnerHTML={{ __html: previewContent }}
+                />
+              </div>
+            </div>
+
+            <div className="flex justify-end">
+              <Button variant="outline" onClick={onClose}>
+                Close
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Dialog>
+  );
+}
diff --git a/src/app/portal/admin/forms/[id]/settings/page.tsx b/src/app/portal/admin/forms/[id]/settings/page.tsx
index 38a444fa..13f49bec 100644
--- a/src/app/portal/admin/forms/[id]/settings/page.tsx
+++ b/src/app/portal/admin/forms/[id]/settings/page.tsx
@@ -1,480 +1,116 @@
 "use client";
-import { useState, useMemo } from "react";
-import { marked } from "marked";
-import Input from "@/components/general/input";
+import { useContext, useState } from "react";
+import FormSettingsPage from "./formSettings";
 import { formContext } from "@/components/layouts/formTabView";
-import { Textarea } from "@/components/primitives/textArea";
-import { useContext } from "react";
-import { Button } from "@/components/primitives/button";
+import { MainResultPage } from "@/components/forms/resultPages/MainResultPage";
 import MultiSelect from "@/components/general/multiSelect";
-import { FormStep } from "@/lib/types/questions";
-import { updateOrCreateEmailTemplate } from "./actions";
-import { toast } from "sonner";
-import { Dialog } from "@/components/primitives/dialog";
-import { number } from "zod";
-
-// Helper function to extract template tags
-const extractTemplateTags = (content: string): string[] => {
-  const regex = /{{([^{}]+)}}/g;
-  const matches = content.match(regex);
-  if (!matches) return [];
-  return matches.map((match) => match.slice(2, -2));
-};
-
-// Helper to find unclosed tags
-const findInvalidTags = (content: string): string[] => {
-  const regex = /{{([^{}]*$)|{{([^{}]*)}(?!})/g;
-  const matches = content.match(regex);
-  return matches || [];
-};
-
-export default function FormSettingsPage() {
-  const { rawForm: form, submissions } = useContext(formContext);
-  const emailStatuses = form?.config.application?.emails?.status || {};
-  const statusOptions = form?.config.application?.status || [];
-  const [editingStatus, setEditingStatus] = useState<string | null>(null);
-  const [showNewTemplate, setShowNewTemplate] = useState(false);
-  const [selectedStatus, setSelectedStatus] = useState("");
-  const [showPreview, setShowPreview] = useState(false);
-
-  const [title, setTitle] = useState("");
-  const [content, setContent] = useState("");
-  const [openTemplates, setOpenTemplates] = useState<string[]>([]);
-
-  async function applyTemplateChange(templateData: {
-    status: string;
-    title: string;
-    content: string;
-  }) {
-    try {
-      await updateOrCreateEmailTemplate(form.id, templateData.status, {
-        title: templateData.title,
-        content: templateData.content,
-      });
-      toast.success("Template updated successfully", {
-        action: {
-          label: "Refresh",
-          onClick: () => window.location.reload(),
-        },
-      });
-      return true;
-    } catch (error) {
-      toast.error("Error updating template");
-      console.error("Error updating template:", error);
-      return false;
-    }
-  }
-
-  const templateFields = useMemo(() => {
-    const fields: Record<string, string> = {};
-    form.questions.forEach((fStep: FormStep) => {
-      fStep.questions.forEach((question) => {
-        fields[question.id] = question.label;
-      });
-    });
-    form.config.application?.subfields?.forEach(
-      (field: { id: string; label: string }) => {
-        fields[field.id] = field.label;
-      },
-    );
-    return fields;
-  }, [form]);
-
-  const handleSave = async (templateData) => {
-    await applyTemplateChange(templateData);
-    setEditingStatus(null);
-  };
+import { Input } from "@/components/primitives/input";
+import { Button } from "@/components/primitives/button";
+import { Application } from "@/lib/types/questions";
 
-  const handleCreateNew = async (templateData) => {
-    await applyTemplateChange(templateData);
-    setShowNewTemplate(false);
-    setSelectedStatus("");
-    setTitle("");
-    setContent("");
-  };
+function ResultPagePreviews({ form }) {
+  const { submissions } = useContext(formContext);
+  const [search, setSearch] = useState("");
+  const [app, setApp] = useState<Application | null>(null);
+
+  const statusOptions =
+    form?.config?.application?.status?.map((status) => ({
+      value: status.id,
+      label: (
+        <div className="flex items-center gap-2">
+          <span className="border text-xs border-background-500 rounded-full px-2 py-0.5 bg-lp-500 min-w-16 text-center">
+            {status.id}
+          </span>
+          <span className="text-sm truncate opacity-75">{status.label}</span>
+        </div>
+      ),
+    })) || [];
 
-  const availableStatuses = statusOptions
-    .filter(
-      (status) =>
-        !emailStatuses[status.id] || !emailStatuses[status.id.toString()],
-    )
-    .map((status) => ({
-      id: status.id,
-      label: status.label,
-    }));
+  const [selectedStatus, setSelectedStatus] = useState(
+    statusOptions[0]?.value || "",
+  );
 
   return (
-    <div className="flex flex-col dark gap-4 flex-1 items-center w-full px-4">
-      <div className="flex flex-col justify-center items-center gap-2 w-full ">
-        <section className="flex flex-col w-full rounded-md p-4 gap-4 items-center *:w-full">
-          <div className="flex flex-col gap-4">
-            <div className="flex justify-between items-center">
-              <h2 className="text-2xl font-bold">Email Settings</h2>
-              {availableStatuses.length > 0 && (
-                <Button onClick={() => setShowNewTemplate(true)}>
-                  Create New Template
-                </Button>
-              )}
-            </div>
-          </div>
-
-          <details className="bg-background-700 border border-background-600 max-w-4xl rounded-lg">
-            <summary className="px-4 py-2 cursor-pointer font-medium">
-              Important Information About Email Templates
-            </summary>
-            <div className="p-4 space-y-4 border-t border-background-600">
-              <div>
-                <h4 className="font-medium mb-2">Email Sending Limits</h4>
-                <p className="text-sm">
-                  Due to email service provider restrictions, we can only send
-                  up to 100 automated emails per day. Please plan your bulk
-                  notifications accordingly.
-                </p>
-              </div>
-              <div>
-                <h4 className="font-medium mb-2">Available Template Tags</h4>
-                <div className="flex flex-wrap gap-2">
-                  {Object.entries(templateFields).map(([key, value]) => (
-                    <span
-                      key={key}
-                      className="px-2 py-1 bg-background-600 rounded-md text-sm flex items-center gap-1"
-                    >
-                      <span className="font-mono text-lp-500">{`{{${key}}}`}</span>
-                      <span className="text-xs opacity-75">: {value}</span>
-                    </span>
-                  ))}
-                </div>
-              </div>
-            </div>
-          </details>
-
-          <div className="flex flex-col max-w-4xl gap-4 ">
-            <MultiSelect
-              options={Object.entries(emailStatuses).map(
-                ([status, emailConfig]) => ({
-                  value: status,
-                  label: (
-                    <div className="flex items-center gap-2">
-                      <span className="border text-xs border-background-500 rounded-full px-2 py-0.5 bg-lp-500 min-w-16 text-center">
-                        {status}
-                      </span>
-                      <span className="text-sm truncate opacity-75">
-                        {emailConfig.title}
-                      </span>
-                    </div>
-                  ),
-                }),
-              )}
-              value={openTemplates}
-              onChange={setOpenTemplates}
-              allowMultiple={true}
-              className="w-full"
-              emptyText="Select templates to view..."
+    <div className="flex flex-col gap-4 w-full items-center px-4">
+      <h2 className="text-xl w-full font-semibold sticky top-0">
+        User Portal Previews
+      </h2>
+
+      <div className="flex flex-col gap-2  w-full max-w-4xl">
+        <details className="bg-background-700 border border-background-600 max-w-4xl rounded-lg">
+          <summary className="px-4 py-2 cursor-pointer font-medium">
+            What are these previews?
+          </summary>
+          <p className="text-sm p-4">
+            These previews show you what the status portal will look like for
+            different statuses. Select a status from the dropdown to preview it.
+          </p>
+        </details>
+        <MultiSelect
+          options={statusOptions}
+          value={[selectedStatus]}
+          onChange={(value) => setSelectedStatus(value[0])}
+          allowMultiple={false}
+          className="w-full"
+          emptyText="Select status to preview..."
+        />
+
+        <div className="flex flex-col pt-4 gap-2">
+          <div className="flex gap-2 items-center">
+            <Input
+              className="p-2 w-full bg-background-700 rounded-md"
+              list="preview-emails"
+              placeholder="Search user by email"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
             />
-            {showNewTemplate && (
-              <div className="border rounded-lg p-4 bg-background-700">
-                <h3 className="font-medium mb-4">Create New Template</h3>
-                <div className="space-y-4">
-                  <div className="space-y-2">
-                    <h4 className="font-medium">Status</h4>
-                    <select
-                      value={selectedStatus}
-                      onChange={(e) => setSelectedStatus(e.target.value)}
-                      className="w-full p-2 rounded-md bg-background-600"
-                    >
-                      <option value="">Select a status...</option>
-                      {availableStatuses.map((status) => (
-                        <option key={status.id} value={status.id}>
-                          {status.label}
-                        </option>
-                      ))}
-                    </select>
-                  </div>
-
-                  <div className="space-y-2">
-                    <h4 className="font-medium">Subject Line</h4>
-                    <Input
-                      type="text"
-                      value={title}
-                      onChange={(e) => setTitle(e.target.value)}
-                      placeholder="Enter email subject"
-                      className="w-full p-2 border rounded-md bg-background-600"
-                    />
-                  </div>
-
-                  <div className="space-y-2">
-                    <h4 className="font-medium">Email Content</h4>
-                    <Textarea
-                      value={content}
-                      onChange={(e) => setContent(e.target.value)}
-                      placeholder="Enter email content"
-                      rows={8}
-                      className="w-full resize-none p-2 border rounded-md font-mono text-sm bg-background-600"
-                    />
-                  </div>
-
-                  <div className="flex justify-end gap-2">
-                    <Button
-                      variant="outline"
-                      onClick={() => {
-                        setShowNewTemplate(false);
-                        setSelectedStatus("");
-                        setTitle("");
-                        setContent("");
-                      }}
-                    >
-                      Cancel
-                    </Button>
-                    <Button
-                      onClick={() =>
-                        handleCreateNew({
-                          status: selectedStatus,
-                          title,
-                          content,
-                        })
-                      }
-                      disabled={!title || !content}
-                    >
-                      Create
-                    </Button>
-                  </div>
-                </div>
-              </div>
-            )}
-          </div>
-
-          <div className="flex flex-col gap-4 max-w-4xl flex-1">
-            {Object.entries(emailStatuses)
-              .filter(([status]) => openTemplates.includes(status))
-              .map(([status, emailConfig]) => {
-                const isEditing = editingStatus === status;
-                const currentContent = isEditing
-                  ? content
-                  : emailConfig.content;
-                const currentTitle = isEditing ? title : emailConfig.title;
-                const tags = extractTemplateTags(currentContent);
-                const invalidTags = findInvalidTags(currentContent);
-
-                return (
-                  <div
-                    key={status}
-                    className="border rounded-lg bg-background-700 min-w-[600px]  flex-1 border-background-600 p-4 "
-                  >
-                    <div className="flex items-center justify-between w-full gap-2 pb-4">
-                      <span className="border text-base border-background-500 rounded-full font-semibold px-2 py-1 text-center w-24 bg-background-500 capitalize">
-                        {status}
-                      </span>
-                      <div className="flex gap-2">
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          onClick={() => setShowPreview(true)}
-                        >
-                          Preview
-                        </Button>
-                        {!isEditing && (
-                          <Button
-                            variant="outline"
-                            size="sm"
-                            onClick={() => {
-                              setEditingStatus(status);
-                              setContent(emailConfig.content);
-                              setTitle(emailConfig.title);
-                            }}
-                          >
-                            Edit
-                          </Button>
-                        )}
-                      </div>
-
-                      {showPreview && (
-                        <TemplatePreview
-                          template={{
-                            title: currentTitle,
-                            content: currentContent,
-                          }}
-                          onClose={() => setShowPreview(false)}
-                          submissions={submissions}
-                          templateFields={templateFields}
-                        />
-                      )}
-                    </div>
-
-                    <div className="space-y-4">
-                      <div className="space-y-2">
-                        <h4 className="font-medium">Subject Line</h4>
-                        <Input
-                          type="text"
-                          value={currentTitle}
-                          onChange={(e) => setTitle(e.target.value)}
-                          disabled={!isEditing}
-                          className="w-full p-2 border rounded-md bg-background-600"
-                        />
-                      </div>
-
-                      <div className="space-y-2">
-                        <h4 className="font-medium">Email Content</h4>
-                        <Textarea
-                          value={currentContent}
-                          onChange={(e) => setContent(e.target.value)}
-                          disabled={!isEditing}
-                          className="w-full 
-                         min-h-[300px]  field-sizing-content p-2 border rounded-md font-mono text-sm bg-background-600"
-                        />
-                      </div>
-
-                      <div className="space-y-2">
-                        <h4 className="font-medium">Template Fields Used</h4>
-                        <div className="flex flex-wrap gap-2">
-                          {tags.map((tag) => (
-                            <span
-                              key={tag}
-                              className="px-2 py-1 rounded-md text-sm flex items-center gap-1 bg-background-600"
-                            >
-                              <span
-                                className={`font-mono ${
-                                  Object.keys(templateFields).includes(tag)
-                                    ? "text-lp-500"
-                                    : "text-red-500"
-                                }`}
-                              >{`{{${tag}}}`}</span>
-                            </span>
-                          ))}
-                        </div>
-                        {invalidTags.length > 0 && (
-                          <p className="text-sm text-red-500">
-                            Found unclosed template tags. Please fix them before
-                            saving.
-                          </p>
-                        )}
-                      </div>
-
-                      {isEditing && (
-                        <div className="flex justify-end gap-2">
-                          <Button
-                            variant="outline"
-                            onClick={() => {
-                              setEditingStatus(null);
-                              setContent(emailConfig.content);
-                              setTitle(emailConfig.title);
-                            }}
-                          >
-                            Cancel
-                          </Button>
-                          <Button
-                            onClick={() =>
-                              handleSave({ status, title, content })
-                            }
-                            disabled={
-                              invalidTags.length > 0 ||
-                              tags.some(
-                                (tag) =>
-                                  !Object.keys(templateFields).includes(tag),
-                              )
-                            }
-                          >
-                            Save
-                          </Button>
-                        </div>
-                      )}
-                    </div>
-                  </div>
+            <datalist id="preview-emails">
+              {submissions.map((submission) => (
+                <option key={submission.id}>{submission.email}</option>
+              ))}
+            </datalist>
+            <Button
+              className="flex-shrink-0 text-sm"
+              disabled={!search || search.length < 3}
+              onClick={() => {
+                if (app) {
+                  setApp(null);
+                }
+
+                setApp(
+                  submissions.find(
+                    (s) => s.email === search,
+                  ) as unknown as Application,
                 );
-              })}
+              }}
+            >
+              {app ? "Clear" : "Search"}
+            </Button>
           </div>
-        </section>
+
+          {selectedStatus && (
+            <div className="border rounded-lg bg-background-700 border-background-600 p-4">
+              <MainResultPage
+                application={app}
+                status={selectedStatus}
+                form={form}
+                formStatus={true}
+              />
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );
 }
 
-function TemplatePreview({
-  template,
-  onClose,
-  submissions,
-  templateFields,
-}: {
-  template: { title: string; content: string };
-  onClose: () => void;
-  submissions: any[];
-  templateFields: Record<string, string>;
-}) {
-  const [search, setSearch] = useState("");
-  const [selectedUser, setSelectedUser] = useState<any>(null);
-
-  const previewContent = useMemo(() => {
-    if (!selectedUser) return template.content;
-
-    let content = template.content;
-    // Replace template variables
-    Object.keys(templateFields).forEach((key) => {
-      const value = selectedUser[key] || selectedUser.details?.[key];
-      if (value) {
-        content = content.replace(new RegExp(`{{${key}}}`, "g"), value);
-      }
-    });
-
-    // Convert markdown links to HTML
-    return marked(content, { breaks: true });
-  }, [selectedUser, template.content, templateFields]);
-
-  // Update the preview content display to render HTML
+export default function SettingsPage() {
+  const { rawForm: form } = useContext(formContext);
 
   return (
-    <Dialog open onOpenChange={onClose}>
-      <div className="fixed inset-0 z-50 bg-black/80">
-        <div className="fixed left-[50%] top-[50%] z-50 grid w-full max-w-3xl translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background-800 p-6 shadow-lg sm:rounded-lg">
-          <div className="flex flex-col gap-4">
-            <h2 className="text-lg font-semibold">Preview Template</h2>
-
-            <div className="flex gap-2 items-center">
-              <Input
-                className="p-2 w-full bg-background-600 rounded-md"
-                list="preview-emails"
-                placeholder="Search user by email"
-                value={search}
-                onChange={(e) => setSearch(e.target.value)}
-              />
-              <datalist id="preview-emails">
-                {submissions.map((submission) => (
-                  <option key={submission.id}>{submission.email}</option>
-                ))}
-              </datalist>
-              <Button
-                disabled={!search || search.length < 3}
-                onClick={() => {
-                  setSelectedUser(submissions.find((s) => s.email === search));
-                }}
-              >
-                Preview
-              </Button>
-            </div>
-
-            <div className="space-y-2 mt-4">
-              <h3 className="font-medium">Subject</h3>
-              <div className="p-2 bg-background-600 rounded-md">
-                {template.title}
-              </div>
-            </div>
-
-            <div className="space-y-2">
-              <h3 className="font-medium">Content</h3>
-              <div className="p-2 bg-background-600 rounded-md whitespace-pre-wrap ">
-                <div
-                  className="p-2 bg-background-600 rounded-md whitespace-pre-wrap min-h-[200px] max-h-[600px] overflow-y-auto prose prose-sm prose-invert [&>*]:!my-0.5 [&_p]:!my-0.5 [&_ul]:!my-0.5 [&_li]:!my-0.5 [&_ul]:!pl-4 [&_ol]:!pl-4"
-                  dangerouslySetInnerHTML={{ __html: previewContent }}
-                />
-              </div>
-            </div>
-
-            <div className="flex justify-end">
-              <Button variant="outline" onClick={onClose}>
-                Close
-              </Button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Dialog>
+    <div className="flex flex-col dark gap-4 overflow-scroll pb-20 flex-1 items-center w-full px-4">
+      <FormSettingsPage />
+      <ResultPagePreviews form={form} />
+    </div>
   );
 }
diff --git a/src/app/portal/forms/[id]/page.tsx b/src/app/portal/forms/[id]/page.tsx
index 1207d82b..f57e90e4 100644
--- a/src/app/portal/forms/[id]/page.tsx
+++ b/src/app/portal/forms/[id]/page.tsx
@@ -1,25 +1,32 @@
+// page.tsx
 import { redirect } from "next/navigation";
 import { isFormOpen } from "@/lib/utils/forms/helpers";
-import {
-  GenericResult,
-  AcceptedResult,
-  PendingResult,
-  OpenResult,
-} from "@/components/forms/resultPages";
 import { getForm } from "@/app/portal/admin/actions";
 import { getUserApplication } from "@/app/portal/forms/actions";
 import { Form } from "@/lib/types/application";
 import GenericGreeter from "@/components/layouts/genericGreeter";
+import { MainResultPage } from "@/components/forms/resultPages/MainResultPage";
 
-const text = {
-  closed: "This form is now closed.",
-  submitted: "Your application has been submitted.",
-  rejected:
-    "Unfortunately, it looks like your application was not successful this time. However, we encourage you to apply again in the future.",
-  default: "No longer available",
-};
+async function getPageData(id: string) {
+  const formP = getForm(Number(id)) as unknown as Promise<Form>;
+  const appP = getUserApplication({
+    formId: Number(id) as unknown as bigint,
+  });
+
+  const [form, app] = await Promise.all([formP, appP]);
+
+  if (!form) {
+    return null;
+  }
+
+  return {
+    form,
+    status: app?.status,
+    formStatus: isFormOpen(form),
+  };
+}
 
-export default async function page({
+export default async function Page({
   params,
 }: {
   params: { [key: string]: string };
@@ -27,68 +34,18 @@ export default async function page({
   if (!params.id) {
     redirect("/portal/forms");
   }
-  const formP = getForm(Number(params.id)) as unknown as Promise<Form>;
-  const appP = getUserApplication({
-    formId: Number(params.id) as unknown as bigint,
-  });
-  const [form, app] = await Promise.all([formP, appP]);
 
-  if (!form) {
+  const pageData = await getPageData(params.id);
+
+  if (!pageData) {
     redirect("/portal/forms");
   }
 
-  const status = app?.status;
-  const formStatus = isFormOpen(form);
-
-  let subpage = null;
-
-  switch (status) {
-    case "submitted":
-    case "rejected":
-    case "accepted":
-      subpage = renderTerminalPage(status, form);
-      break;
-    case "pending":
-    default:
-      subpage = renderConditionalPage(status, form, formStatus);
-  }
-  return <GenericGreeter useBg>{subpage}</GenericGreeter>;
-}
+  const { form, status, formStatus } = pageData;
 
-function renderTerminalPage(status: string, form: any) {
-  const terminalStatus = ["accepted", "rejected", "submitted"];
-  if (terminalStatus.includes(status)) {
-    switch (status) {
-      case "accepted":
-        return <AcceptedResult application={form} />;
-      case "rejected":
-        return <GenericResult application={form} message={text.rejected} />;
-      case "submitted":
-        return <GenericResult application={form} message={text.submitted} />;
-    }
-  }
-}
-
-function renderConditionalPage(
-  status: string | null | undefined,
-  form: any,
-  formOpen: boolean,
-) {
-  const conditionalStatus = ["pending"];
-  if (!status) {
-    if (!formOpen) {
-      return <GenericResult application={form} message={text.closed} />;
-    } else {
-      return <OpenResult form={form} />;
-    }
-  }
-  if (conditionalStatus.includes(status)) {
-    if (!formOpen) {
-      return <GenericResult application={form} message={text.closed} />;
-    }
-    switch (status) {
-      case "pending":
-        return <PendingResult application={form} />;
-    }
-  }
+  return (
+    <GenericGreeter useBg>
+      <MainResultPage status={status} form={form} formStatus={formStatus} />
+    </GenericGreeter>
+  );
 }
diff --git a/src/app/portal/layout.tsx b/src/app/portal/layout.tsx
index 9eedaae0..824c73c3 100644
--- a/src/app/portal/layout.tsx
+++ b/src/app/portal/layout.tsx
@@ -4,6 +4,7 @@ import { redirect } from "next/navigation";
 import { createClient } from "@/lib/utils/supabase/server";
 import { db } from "@/db";
 import { Toaster } from "@/components/primitives/sonner";
+import { LPContextProvider } from "@/lib/context/LPContext";
 
 async function getUserMetadata(id: string) {
   const rolesP = db.roles.findUnique({
@@ -30,6 +31,16 @@ async function getUserMetadata(id: string) {
   };
 }
 
+async function getLPData() {
+  const teams = await db.teams.findMany({});
+  return {
+    teams: teams.reduce((acc, team) => {
+      acc[team.id] = team;
+      return acc;
+    }, {}),
+  };
+}
+
 export default async function Layout({
   children,
 }: {
@@ -43,13 +54,16 @@ export default async function Layout({
   }
 
   const userMetadata = await getUserMetadata(data.user.id);
+  const lpData = await getLPData();
 
   return (
     <Suspense>
-      <UserContextProvider user={data.user} userMetadata={userMetadata}>
-        <Toaster position={"top-right"} />
-        {children}
-      </UserContextProvider>
+      <LPContextProvider data={lpData}>
+        <UserContextProvider user={data.user} userMetadata={userMetadata}>
+          <Toaster position={"top-right"} />
+          {children}
+        </UserContextProvider>
+      </LPContextProvider>
     </Suspense>
   );
 }
diff --git a/src/components/forms/applications/offerPage.tsx b/src/components/forms/applications/offerPage.tsx
index f505a1a8..7369aa3d 100644
--- a/src/components/forms/applications/offerPage.tsx
+++ b/src/components/forms/applications/offerPage.tsx
@@ -3,7 +3,9 @@
 import { GenericResult } from "@/components/forms/resultPages";
 import { Form } from "@/lib/types/application";
 import { Button } from "@/components/primitives/button";
-import { useState } from "react";
+import { useContext, useState } from "react";
+import { lpContext } from "@/lib/context/LPContext";
+import Link from "next/link";
 
 export default function OfferPage({ form, app }: { form: Form; app: any }) {
   const [reqStatus, setReqStatus] = useState<"idle" | "loading" | "error">(
@@ -15,7 +17,12 @@ export default function OfferPage({ form, app }: { form: Form; app: any }) {
   const applicationConfig = form.config.application;
   const page = applicationConfig.pages["offerPage"];
   const text = page.content;
-  const cleanedText = replaceTemplateValues(text, app.details);
+  const { details, ...rest } = app;
+  const lpData = useContext(lpContext);
+  const cleanedText = replaceTemplateValues(text, {
+    general: lpData,
+    app: { ...rest, ...details },
+  });
 
   async function handleDecision(decision: "accepted" | "declined") {
     setReqStatus("loading");
@@ -47,7 +54,7 @@ export default function OfferPage({ form, app }: { form: Form; app: any }) {
             return (
               <div className="text-red-200  white-glow  rounded-full px-4 p-1 text-lg">
                 <span className="text-white animate-pulse">
-                  You have declined the offer :(
+                  {"You have declined the offer :("}
                 </span>
               </div>
             );
@@ -59,10 +66,18 @@ export default function OfferPage({ form, app }: { form: Form; app: any }) {
                 asMarkdown
               >
                 {status === "accepted" ? (
-                  <div className="text-red-200  bg-lp-500  rounded px-4 p-1 text-lg">
+                  <div className=" flex flex-col gap-4 items-center rounded px-4 p-1 text-lg bg-transparent">
                     <span className="text-white  ">
-                      You have accepted the offer! 🎉
+                      You have accepted the offer! 🎉{" "}
                     </span>
+                    <Link
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="bg-lp-500 p-2 px-4 rounded-full"
+                      href={"/portal/onboarding"}
+                    >
+                      Click here to continue to the onboarding process
+                    </Link>
                   </div>
                 ) : (
                   <div className="flex flex-col gap-2">
@@ -98,7 +113,10 @@ export default function OfferPage({ form, app }: { form: Form; app: any }) {
   );
 }
 
-function replaceTemplateValues(text: string, values: any) {
+function replaceTemplateValues(
+  text: string,
+  { general, app }: { general: any; app: any },
+) {
   const regex = /{{(.*?)}}/g;
   const matches = text.match(regex);
   if (!matches) {
@@ -107,10 +125,31 @@ function replaceTemplateValues(text: string, values: any) {
   let newText = text;
   matches.forEach((match) => {
     const key = match.replace("{{", "").replace("}}", "");
-    if (!values[key]) {
-      newText = newText.replace(match, "");
+    const multiKey = key.split(":");
+
+    if (multiKey.length > 1) {
+      const [firstKey, secondKey] = multiKey;
+      if (Object.keys(app).includes(secondKey)) {
+        if (app[secondKey] === undefined) {
+          newText = "";
+        } else {
+          if (multiKey.length > 2) {
+            const thirdKey = multiKey[2];
+            newText = newText.replace(
+              match,
+              general[firstKey][app[secondKey]][thirdKey],
+            );
+          } else {
+            newText = newText.replace(match, general[firstKey][app[secondKey]]);
+          }
+        }
+      }
     } else {
-      newText = newText.replace(match, values[key]);
+      if (Object.keys(app).includes(key)) {
+        newText = newText.replace(match, app[key]);
+      } else if (Object.keys(general).includes(key)) {
+        newText = "";
+      }
     }
   });
   return newText;
diff --git a/src/components/forms/resultPages/MainResultPage.tsx b/src/components/forms/resultPages/MainResultPage.tsx
new file mode 100644
index 00000000..9494a916
--- /dev/null
+++ b/src/components/forms/resultPages/MainResultPage.tsx
@@ -0,0 +1,86 @@
+// resultPage.tsx
+import { Form } from "@/lib/types/application";
+import {
+  GenericResult,
+  AcceptedResult,
+  PendingResult,
+  OpenResult,
+} from "@/components/forms/resultPages";
+import { Application } from "@/lib/types/questions";
+import GenericGreeter from "@/components/layouts/genericGreeter";
+import OfferPage from "../applications/offerPage";
+
+const text = {
+  closed: "This form is now closed.",
+  submitted: "Your application has been submitted.",
+  rejected:
+    "Unfortunately, it looks like your application was not successful this time. However, we encourage you to apply again in the future.",
+  default: "No longer available",
+};
+
+interface ResultPageProps {
+  status: string | null | undefined;
+  application: Application | undefined;
+  form: Form;
+  formStatus: boolean;
+}
+
+function renderTerminalPage(status: string, form: Form, app?: Application) {
+  switch (status) {
+    case "accepted":
+      return <AcceptedResult application={form} />;
+    case "rejected":
+      return <GenericResult application={form} message={text.rejected} />;
+    case "submitted":
+      return <GenericResult application={form} message={text.submitted} />;
+    case "offered":
+      return app && app.applications.status ? (
+        <GenericGreeter>
+          <OfferPage form={form} app={app} />
+        </GenericGreeter>
+      ) : (
+        <div>Application not available</div>
+      );
+    default:
+      return <span className="text-red-500">{status}</span>;
+  }
+}
+
+function renderConditionalPage(
+  status: string | null | undefined,
+  form: Form,
+  formOpen: boolean,
+) {
+  if (!status) {
+    return formOpen ? (
+      <OpenResult form={form} />
+    ) : (
+      <GenericResult application={form} message={text.closed} />
+    );
+  }
+
+  if (status === "pending") {
+    return formOpen ? (
+      <PendingResult application={form} />
+    ) : (
+      <GenericResult application={form} message={text.closed} />
+    );
+  }
+
+  return null;
+}
+
+export function MainResultPage({
+  status,
+  form,
+  formStatus,
+  application: app,
+}: ResultPageProps) {
+  const terminalStatuses = ["accepted", "rejected", "submitted", "offered"];
+
+  if (terminalStatuses.includes(status as string)) {
+    return renderTerminalPage(status as string, form, app);
+  }
+
+  return renderConditionalPage(status, form, formStatus);
+}
diff --git a/src/lib/context/LPContext.tsx b/src/lib/context/LPContext.tsx
new file mode 100644
index 00000000..83d880af
--- /dev/null
+++ b/src/lib/context/LPContext.tsx
@@ -0,0 +1,18 @@
+"use client";
+import React from "react";
+
+type LPContent = {
+  teams: any[];
+};
+
+export const lpContext = React.createContext({} as LPContent);
+
+export function LPContextProvider({
+  children,
+  data,
+}: {
+  children: React.ReactNode;
+  data: LPContent;
+}) {
+  return <lpContext.Provider value={data}>{children}</lpContext.Provider>;
+}