diff --git a/app/resume-builder/app/how-to-start/[template]/contact/components/contact-section.js b/app/resume-builder/app/how-to-start/[template]/contact/components/contact-section.js
index 98107ae..51f0d0f 100644
--- a/app/resume-builder/app/how-to-start/[template]/contact/components/contact-section.js
+++ b/app/resume-builder/app/how-to-start/[template]/contact/components/contact-section.js
@@ -2,7 +2,7 @@
 import { useState, useRef, useEffect } from "react";
 import { useRouter, usePathname } from "next/navigation";
 import { inputs } from "@/utils/resume-builder/builder/contact";
-import { errorToast } from "@/utils/error-toast";
+//import { errorToast } from "@/utils/error-toast";
 
 export default function ContactSection() {
   const router = useRouter();
diff --git a/app/resume-builder/app/how-to-start/[template]/finish/components/Finish.js b/app/resume-builder/app/how-to-start/[template]/finish/components/Finish.js
index 358c956..bdc6d93 100644
--- a/app/resume-builder/app/how-to-start/[template]/finish/components/Finish.js
+++ b/app/resume-builder/app/how-to-start/[template]/finish/components/Finish.js
@@ -1,18 +1,22 @@
 "use client";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import { plans } from "@/utils/resume-builder/builder/finish";
 import { useRouter } from "next/navigation";
 import Cookies from "js-cookie";
 import Link from "next/link";
-
+import html2canvas from "html2canvas";
+import resumeTemplates from "@/resources/resume-builder/resume-templates.json";
 import GuestLayout from "@/components/application/layouts/guest";
 import CheckoutForm from "./checkout-form";
 
 export default function FinishYourResume() {
   const [data, setData] = useState(null);
+  const [TemplateComponent, setTemplateComponent] = useState(null);
+  const [imageSrc, setImageSrc] = useState(null);
   const [selectedPaymentMenu, setSelectedPaymentMenu] = useState("14-day");
   const [user, setUser] = useState(null);
   const router = useRouter();
+  const templateRef = useRef();
 
   useEffect(() => {
     const storedResumeData = localStorage.getItem("resumeInfo");
@@ -25,6 +29,34 @@ export default function FinishYourResume() {
     }
   }, []);
 
+  useEffect(() => {
+    if (data) {
+      const templateEntry = resumeTemplates.find(template => template.id === data.template);
+      if (templateEntry && templateEntry.linkToTemplate) {
+        import(`@/components/application/templates/resume/${data.template}`).then(module => {
+          const TemplateComponent = module.default;
+          setTemplateComponent(() => TemplateComponent);
+        }).catch(error => {
+          console.error("Error importing template:", error);
+        });
+      } else {
+        console.error("Template path not found for:", data.template);
+      }
+    }
+  }, [data]);
+
+  // Convert the rendered template to an image using html2canvas
+  useEffect(() => {
+    if (TemplateComponent && data) {
+      html2canvas(templateRef.current).then((canvas) => {
+        const imgData = canvas.toDataURL("image/png");
+        setImageSrc(imgData);
+      }).catch(error => {
+        console.error("Error generating image:", error);
+      });
+    }
+  }, [TemplateComponent, data]);
+
   const handleContinueForFree = () => {
     if (!user) {
       router.push("/login");
@@ -41,11 +73,18 @@ export default function FinishYourResume() {
         <p className=" text-[2.2rem] max-w-[90%] w-[900px] px-5 text-center max-[900px]:text-xl font-extrabold text-black/80">
           Upgrade now for Unlimited Access to all pro features!
         </p>
-        <div className="w-full mt-8 lg:mt-3  flex flex-col lg:flex-row justify-between h-max min-h-[650px] ">
-          <div className="relative w-full lg:w-[calc(50%-15px)]  h-[600px] ">
+        <div className="w-full mt-8 lg:mt-3 flex flex-col lg:flex-row justify-between h-max min-h-[650px]">
+          <div className="relative w-full lg:w-[calc(50%-15px)] h-[600px]">
             <div className="lg:w-[65%] w-[90%] h-[600px] bg-AnalogueShiftsTextColor fancy-border-radius"></div>
-            <div className="resume-box lg:w-[85%] w-[calc(100%-40px)]  h-[calc(100%-90px)] left-[20px] lg:left-[15%] absolute top-[45px] overflow-y-auto shadow-lg">
+            <div className="resume-box lg:w-[85%] w-[calc(100%-40px)] h-[calc(100%-90px)] left-[20px] lg:left-[15%] absolute top-[45px] overflow-y-auto shadow-lg">
               {/* Render Preview Of Resume With User Info */}
+              {TemplateComponent && !imageSrc ? (
+                <div ref={templateRef}>
+                  <TemplateComponent data={data} />
+                </div>
+              ) : (
+                imageSrc ? <img src={imageSrc} alt="Resume Preview" /> : <div>Loading...</div>
+              )}
             </div>
           </div>
           <div className=" lg:w-[calc(50%-15px)] w-full flex flex-col items-center lg:items-start gap-6 pt-12 pr-[20px]">
@@ -113,7 +152,7 @@ export default function FinishYourResume() {
             {data && (
               <button
                 onClick={handleContinueForFree}
-                className="lg:w-[65%] flex justify-center max-w-[90%] md:max-w-full w-[600px] py-2.5  rounded-full border border-black/20 text-black/80 text-base font-bold"
+                className="lg:w-[65%] flex justify-center max-w-[90%] md:max-w-full w-[600px] py-2.5 rounded-full border border-black/20 text-black/80 text-base font-bold"
               >
                 Download For Free
               </button>
diff --git a/app/resume-builder/app/how-to-start/[template]/finish/page.js b/app/resume-builder/app/how-to-start/[template]/finish/page.js
index 005b485..3f5a3d2 100644
--- a/app/resume-builder/app/how-to-start/[template]/finish/page.js
+++ b/app/resume-builder/app/how-to-start/[template]/finish/page.js
@@ -1,10 +1,10 @@
 import FinishYourResume from "./components/Finish";
 
 export const metadata = {
-  title: "Download Your Resume | AnalogueShifts Resume Builder",
-  description: "Download Your Resume | AnalogueShifts Resume Builder",
+    title: "Download Your Resume | AnalogueShifts Resume Builder",
+    description: "Download Your Resume | AnalogueShifts Resume Builder",
 };
 
 export default function Page() {
-  return <FinishYourResume />;
-}
+    return <FinishYourResume / > ;
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 848950e..86cdab3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
         "axios": "^1.6.3",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
+        "html2canvas": "^1.4.1",
         "js-cookie": "^3.0.5",
         "lucide-react": "^0.395.0",
         "next": "14.0.2",
@@ -1975,6 +1976,15 @@
       "resolved": "https://registry.npmjs.org/base-64/-/base-64-0.1.0.tgz",
       "integrity": "sha512-Y5gU45svrR5tI2Vt/X9GPd3L0HNIKzGu202EjxrXMpuc2V2CiKgemAbUUsqYmZJvPtCXoUKjNZwBJzsNScUbXA=="
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -2269,6 +2279,15 @@
         "node": "*"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -3489,6 +3508,19 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/humanize-ms": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
@@ -5703,6 +5735,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -6007,6 +6048,15 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/w3c-keyname": {
       "version": "2.2.8",
       "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
diff --git a/package.json b/package.json
index 46ec5df..2feaf8d 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "axios": "^1.6.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "html2canvas": "^1.4.1",
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.395.0",
     "next": "14.0.2",