diff --git a/app/layout.tsx b/app/layout.tsx
index 8c7e751..12cb52c 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -61,7 +61,7 @@ export default function RootLayout({
                 <Providers themeProps={{ attribute: "class", enableSystem: false }}>
                     <div >
                         <NavigationBar />
-                        <main className="container mx-auto max-w-7xl pt-16 px-6 flex-grow">
+                        <main className="container mx-auto flex-grow">
                             <Toaster position="top-right" reverseOrder={false} />
                             {children}
                         </main>
diff --git a/app/page.tsx b/app/page.tsx
index 552244e..37039ec 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import React, { createContext, useState } from "react";
+import React, { createContext, useRef, useState } from "react";
 import { DefaultResumeContextData, DefaultResumeData } from "@/config/default-resume-data";
 import Language from "@/components/form/Language";
 import Preview from "@/components/preview/Preview";
@@ -16,10 +16,13 @@ import Certification from "@/components/form/certification";
 import { WinPrint } from "@/components/shared/WinPrint";
 import { Resume } from "@/types/resume";
 import { GlobalResumeContext } from "@/types/global-resume-context";
+import { useReactToPrint } from "react-to-print";
 
 export const ResumeContext = createContext<GlobalResumeContext>(DefaultResumeContextData);
 
 export default function Home() {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const handlePrint = useReactToPrint({ contentRef });
   // resume data
   const [resumeData, setResumeData] = useState<Resume>(DefaultResumeData);
 
@@ -47,7 +50,7 @@ export default function Home() {
     setResumeData({ ...resumeData, [e.target.name]: e.target.value });
   };
   return (
-    <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
+    <section className="flex flex-col items-center justify-center md:py-10">
       <ResumeContext.Provider
         value={{
           resumeData,
@@ -78,10 +81,12 @@ export default function Home() {
               <Certification />
             </form>
           )}
-          <Preview />
+          <div className="md:max-w-[60%] sticky top-0 preview rm-padding-print p-6 md:overflow-y-scroll md:h-screen" ref={contentRef}>
+            <Preview />
+          </div>
         </div>
         <FormCP formClose={formClose} setFormClose={setFormClose} />
-        <WinPrint />
+        <WinPrint handlePrint={handlePrint} />
       </ResumeContext.Provider>
     </section>
   );
diff --git a/components/form/Summary.tsx b/components/form/Summary.tsx
index c3eae83..1e67830 100644
--- a/components/form/Summary.tsx
+++ b/components/form/Summary.tsx
@@ -7,12 +7,12 @@ const Summary = () => {
   const { resumeData, handleChange } = useContext<GlobalResumeContext>(ResumeContext);
   return (
     <div className="flex-col-gap-2">
-      <h2 className="input-title">Summary</h2>
+      <h2 className="font-bold">Summary</h2>
       <div className="grid-4">
         <Textarea
           placeholder="Summary"
           name="summary"
-          className="w-full h-40"
+          variant="bordered"
           value={resumeData.summary}
           onChange={handleChange}
           maxLength={500}
diff --git a/components/preview/Preview.tsx b/components/preview/Preview.tsx
index 64ab285..778c7f6 100644
--- a/components/preview/Preview.tsx
+++ b/components/preview/Preview.tsx
@@ -138,147 +138,206 @@ const Preview = () => {
   useKeyboardShortcut('i', true, toggleItalic);
   useKeyboardShortcut('u', true, toggleUnderline);
 
-  return (
-    <div className="md:max-w-[60%] sticky top-0 preview rm-padding-print p-6 md:overflow-y-scroll md:h-screen">
-      <A4PageWrapper>
-        <HighlightMenu
-          styles={{
-            borderColor: "#C026D3",
-            backgroundColor: "#C026D3",
-            boxShadow: "0px 5px 5px 0px rgba(0, 0, 0, 0.15)",
-            zIndex: 10,
-            borderRadius: "5px",
-            padding: "3px",
-          }}
-          target="body"
-          menu={() => (
-            <>
-              <MenuButton
-                title="Bold (Ctrl+B)"
-                icon={<FaBold />}
-                onClick={toggleBold} />
-              <MenuButton
-                title="Italic (Ctrl+I)"
-                icon={<FaItalic />}
-                onClick={toggleItalic} />
-              <MenuButton
-                title="Underline (Ctrl+U)"
-                icon={<FaUnderline />}
-                onClick={toggleUnderline} />
-              <MenuButton
-                title="Increase Font Size"
-                icon={<FaPlus />}
-                onClick={() => changeFontSize("4")} />
-              <MenuButton
-                title="Decrease Font Size"
-                icon={<FaMinus />}
-                onClick={() => changeFontSize("2")} />
+  const A4PageWrapper = ({ children }: { children: any }) => {
+    const alertA4Size = () => {
+      const preview: Element | null = document.querySelector(".preview");
+      if (!preview) return;
+      const previewHeight = preview.clientHeight;
+      if (previewHeight > 1122) {
+        alert("A4 size exceeded");
+      }
+    };
 
-              <MenuButton
-                title="Align Left"
-                icon={<FaAlignLeft />}
-                onClick={() => alignText('Left')} />
-              <MenuButton
-                title="Align Center"
-                icon={<FaAlignCenter />}
-                onClick={() => alignText('Center')} />
-              <MenuButton
-                title="Align Right"
-                icon={<FaAlignRight />}
-                onClick={() => alignText('Right')} />
-            </>
-          )} allowedPlacements={[]} />
-        <DragDropContext onDragEnd={onDragEnd}>
-          <div className="f-col items-center mb-1">
-            {resumeData && resumeData.profilePicture && resumeData.profilePicture.length > 0 && (
-              <div className="w-24 h-24 rounded-full overflow-hidden border-2">
-                <Image
-                  src={resumeData.profilePicture}
-                  alt="profile"
-                  width={100}
-                  height={100}
-                  className="object-cover h-full w-full"
-                />
-              </div>
-            )}
-            <h1 className="name">{resumeData.name}</h1>
-            <p className="profession">{resumeData.position}</p>
-            <ContactInfo
-              mainclass="flex flex-row gap-1 mb-1 contact"
-              linkclass="inline-flex items-center gap-1"
-              teldata={resumeData.contactInformation}
-              emaildata={resumeData.email}
-              addressdata={resumeData.address}
-              telicon={<MdPhone />}
-              emailicon={<MdEmail />}
-              addressicon={<MdLocationOn />}
-            />
-            <div className="grid grid-cols-3 gap-1">
-              {resumeData.socialMedia.map((socialMedia, index) => {
-                return (
-                  <a
-                    href={`http://${socialMedia.link}`}
-                    aria-label={socialMedia.socialMedia}
-                    key={index}
-                    title={socialMedia.socialMedia}
-                    target="_blank"
-                    rel="noreferrer"
-                    className="inline-flex items-center gap-1 social-media align-center justify-center "
-                  // Prevent text overflowing, If the socialMedia.link string is longer than 32 characters, apply the wordWrap and display styles to this <a> tag.
-                  // wordWrap: "break-word" breaks the text onto the next line if it's too long,
-                  // display: "inline-block" is necessary for wordWrap to work on an inline element like <a>.
+    return (
+      <div className="w-8.5in" onLoad={alertA4Size}>
+        {children}
+      </div>
+    );
+  };
 
-                  >
-                    {icons.map((icon, index) => {
-                      if (icon.name === socialMedia.socialMedia.toLowerCase()) {
-                        return <span key={index}>{icon.icon}</span>;
-                      }
-                    })}
-                    {socialMedia.link}
-                  </a>
-                );
-              })}
+  return (
+    <A4PageWrapper>
+      <HighlightMenu
+        styles={{
+          borderColor: "#C026D3",
+          backgroundColor: "#C026D3",
+          boxShadow: "0px 5px 5px 0px rgba(0, 0, 0, 0.15)",
+          zIndex: 10,
+          borderRadius: "5px",
+          padding: "3px",
+        }}
+        target="body"
+        menu={() => (
+          <>
+            <MenuButton
+              title="Bold (Ctrl+B)"
+              icon={<FaBold />}
+              onClick={toggleBold} />
+            <MenuButton
+              title="Italic (Ctrl+I)"
+              icon={<FaItalic />}
+              onClick={toggleItalic} />
+            <MenuButton
+              title="Underline (Ctrl+U)"
+              icon={<FaUnderline />}
+              onClick={toggleUnderline} />
+            <MenuButton
+              title="Increase Font Size"
+              icon={<FaPlus />}
+              onClick={() => changeFontSize("4")} />
+            <MenuButton
+              title="Decrease Font Size"
+              icon={<FaMinus />}
+              onClick={() => changeFontSize("2")} />
+
+            <MenuButton
+              title="Align Left"
+              icon={<FaAlignLeft />}
+              onClick={() => alignText('Left')} />
+            <MenuButton
+              title="Align Center"
+              icon={<FaAlignCenter />}
+              onClick={() => alignText('Center')} />
+            <MenuButton
+              title="Align Right"
+              icon={<FaAlignRight />}
+              onClick={() => alignText('Right')} />
+          </>
+        )} allowedPlacements={[]} />
+      <DragDropContext onDragEnd={onDragEnd}>
+        <div className="f-col items-center mb-1">
+          {resumeData && resumeData.profilePicture && resumeData.profilePicture.length > 0 && (
+            <div className="w-24 h-24 rounded-full overflow-hidden border-2">
+              <Image
+                src={resumeData.profilePicture}
+                alt="profile"
+                width={100}
+                height={100}
+                className="object-cover h-full w-full"
+              />
             </div>
+          )}
+          <h1 className="name">{resumeData.name}</h1>
+          <p className="profession">{resumeData.position}</p>
+          <ContactInfo
+            mainclass="flex flex-row gap-1 mb-1 contact"
+            linkclass="inline-flex items-center gap-1"
+            teldata={resumeData.contactInformation}
+            emaildata={resumeData.email}
+            addressdata={resumeData.address}
+            telicon={<MdPhone />}
+            emailicon={<MdEmail />}
+            addressicon={<MdLocationOn />}
+          />
+          <div className="grid grid-cols-3 gap-1">
+            {resumeData.socialMedia.map((socialMedia, index) => {
+              return (
+                <a
+                  href={`http://${socialMedia.link}`}
+                  aria-label={socialMedia.socialMedia}
+                  key={index}
+                  title={socialMedia.socialMedia}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="inline-flex items-center gap-1 social-media align-center justify-center "
+                // Prevent text overflowing, If the socialMedia.link string is longer than 32 characters, apply the wordWrap and display styles to this <a> tag.
+                // wordWrap: "break-word" breaks the text onto the next line if it's too long,
+                // display: "inline-block" is necessary for wordWrap to work on an inline element like <a>.
+
+                >
+                  {icons.map((icon, index) => {
+                    if (icon.name === socialMedia.socialMedia.toLowerCase()) {
+                      return <span key={index}>{icon.icon}</span>;
+                    }
+                  })}
+                  {socialMedia.link}
+                </a>
+              );
+            })}
           </div>
-          <hr className="border-dashed my-2" />
-          {/* two column start */}
-          <div className="grid grid-cols-3 gap-6">
-            <div className="col-span-1 space-y-2">
-              {resumeData.summary.length > 0 && (
+        </div>
+        <hr className="border-dashed my-2" />
+        {/* two column start */}
+        <div className="grid grid-cols-3 gap-6">
+          <div className="col-span-1 space-y-2">
+            {resumeData.summary.length > 0 && (
+              <div className="mb-1">
+                <h2 className="section-title mb-1 border-b-2 border-gray-300">
+                  Summary
+                </h2>
+                <p className="content break-words">{resumeData.summary}</p>
+              </div>
+            )}
+            <div>
+              {resumeData.education.length > 0 && (
                 <div className="mb-1">
                   <h2 className="section-title mb-1 border-b-2 border-gray-300">
-                    Summary
+                    Education
                   </h2>
-                  <p className="content break-words">{resumeData.summary}</p>
+                  {resumeData.education.map((item, index) => (
+                    <div key={index} className="mb-1">
+                      <p className="content i-bold">{item.degree}</p>
+                      <p className="content">{item.school}</p>
+                      <DateRange
+                        startYear={item.startYear}
+                        endYear={item.endYear}
+                        id={`education-start-end-date`}
+                      />
+                    </div>
+                  ))}
                 </div>
               )}
-              <div>
-                {resumeData.education.length > 0 && (
-                  <div className="mb-1">
-                    <h2 className="section-title mb-1 border-b-2 border-gray-300">
-                      Education
-                    </h2>
-                    {resumeData.education.map((item, index) => (
-                      <div key={index} className="mb-1">
-                        <p className="content i-bold">{item.degree}</p>
-                        <p className="content">{item.school}</p>
-                        <DateRange
-                          startYear={item.startYear}
-                          endYear={item.endYear}
-                          id={`education-start-end-date`}
-                        />
-                      </div>
-                    ))}
-                  </div>
-                )}
-              </div>
-              <Droppable droppableId="skills" type="SKILLS">
+            </div>
+            <Droppable droppableId="skills" type="SKILLS">
+              {(provided) => (
+                <div {...provided.droppableProps} ref={provided.innerRef}>
+                  {resumeData.skills.map((skill, index) => (
+                    <Draggable
+                      key={`SKILLS-${index}`}
+                      draggableId={`SKILLS-${index}`}
+                      index={index}
+                    >
+                      {(provided, snapshot) => (
+                        <div
+                          ref={provided.innerRef}
+                          {...provided.draggableProps}
+                          {...provided.dragHandleProps}
+                          className={`mb-1 ${snapshot.isDragging &&
+                            "outline-dashed outline-2 outline-gray-400"
+                            }`}
+                        >
+                          <Skills title={skill.title} skills={skill.skills} />
+                        </div>
+                      )}
+                    </Draggable>
+                  ))}
+                  {provided.placeholder}
+                </div>
+              )}
+            </Droppable>
+            <Language title="Languages" languages={resumeData.languages} />
+            <Certification
+              title="Certifications"
+              certifications={resumeData.certifications}
+            />
+          </div>
+
+          <div className="col-span-2 space-y-2">
+            {resumeData.workExperience.length > 0 && (
+              <Droppable droppableId="work-experience" type="WORK_EXPERIENCE">
                 {(provided) => (
                   <div {...provided.droppableProps} ref={provided.innerRef}>
-                    {resumeData.skills.map((skill, index) => (
+                    <h2
+                      className="section-title mb-1 border-b-2 border-gray-300 editable"
+                      contentEditable
+                      suppressContentEditableWarning
+                    >
+                      Work Experience
+                    </h2>
+                    {resumeData.workExperience.map((item, index) => (
                       <Draggable
-                        key={`SKILLS-${index}`}
-                        draggableId={`SKILLS-${index}`}
+                        key={`${item.company}-${index}`}
+                        draggableId={`WORK_EXPERIENCE-${index}`}
                         index={index}
                       >
                         {(provided, snapshot) => (
@@ -290,7 +349,62 @@ const Preview = () => {
                               "outline-dashed outline-2 outline-gray-400"
                               }`}
                           >
-                            <Skills title={skill.title} skills={skill.skills} />
+                            <div className="flex flex-row justify-between space-y-1">
+                              <p className="content i-bold">{item.company}</p>
+                              <DateRange
+                                startYear={item.startYear}
+                                endYear={item.endYear}
+                                id={`work-experience-start-end-date`}
+                              />
+                            </div>
+                            <p className="content">{item.position}</p>
+                            <p className="content hyphens-auto">
+                              {item.description}
+                            </p>
+                            <Droppable
+                              droppableId={`WORK_EXPERIENCE_KEY_ACHIEVEMENT-${index}`}
+                              type="WORK_EXPERIENCE_KEY_ACHIEVEMENT"
+                            >
+                              {(provided) => (
+                                <ul
+                                  className="list-disc ul-padding content"
+                                  {...provided.droppableProps}
+                                  ref={provided.innerRef}
+                                >
+                                  {typeof item.keyAchievements === "string" &&
+                                    item.keyAchievements
+                                      .split("\n")
+                                      .map((achievement, subIndex) => (
+                                        <Draggable
+                                          key={`${item.company}-${index}-${subIndex}`}
+                                          draggableId={`WORK_EXPERIENCE_KEY_ACHIEVEMENT-${index}-${subIndex}`}
+                                          index={subIndex}
+                                        >
+                                          {(provided, snapshot) => (
+                                            <li
+                                              ref={provided.innerRef}
+                                              {...provided.draggableProps}
+                                              {...provided.dragHandleProps}
+                                              className={`
+                                          hover:outline-dashed hover:outline-2
+                                          ${snapshot.isDragging &&
+                                                "outline-dashed outline-2 outline-gray-400"
+                                                }`}
+                                            >
+                                              <div
+                                                dangerouslySetInnerHTML={{
+                                                  __html: achievement,
+                                                }}
+                                                contentEditable
+                                              />
+                                            </li>
+                                          )}
+                                        </Draggable>
+                                      ))}
+                                  {provided.placeholder}
+                                </ul>
+                              )}
+                            </Droppable>
                           </div>
                         )}
                       </Draggable>
@@ -299,230 +413,111 @@ const Preview = () => {
                   </div>
                 )}
               </Droppable>
-              <Language title="Languages" languages={resumeData.languages} />
-              <Certification
-                title="Certifications"
-                certifications={resumeData.certifications}
-              />
-            </div>
-
-            <div className="col-span-2 space-y-2">
-              {resumeData.workExperience.length > 0 && (
-                <Droppable droppableId="work-experience" type="WORK_EXPERIENCE">
-                  {(provided) => (
-                    <div {...provided.droppableProps} ref={provided.innerRef}>
-                      <h2
-                        className="section-title mb-1 border-b-2 border-gray-300 editable"
-                        contentEditable
-                        suppressContentEditableWarning
+            )}
+            {resumeData.projects.length > 0 && (
+              <Droppable droppableId="projects" type="PROJECTS">
+                {(provided) => (
+                  <div {...provided.droppableProps} ref={provided.innerRef}>
+                    <h2
+                      className="section-title mb-1 border-b-2 border-gray-300 editable"
+                      contentEditable
+                      suppressContentEditableWarning
+                    >
+                      Projects
+                    </h2>
+                    {resumeData.projects.map((item, index) => (
+                      <Draggable
+                        key={`${item.name}-${index}`}
+                        draggableId={`PROJECTS-${index}`}
+                        index={index}
                       >
-                        Work Experience
-                      </h2>
-                      {resumeData.workExperience.map((item, index) => (
-                        <Draggable
-                          key={`${item.company}-${index}`}
-                          draggableId={`WORK_EXPERIENCE-${index}`}
-                          index={index}
-                        >
-                          {(provided, snapshot) => (
-                            <div
-                              ref={provided.innerRef}
-                              {...provided.draggableProps}
-                              {...provided.dragHandleProps}
-                              className={`mb-1 ${snapshot.isDragging &&
-                                "outline-dashed outline-2 outline-gray-400"
-                                }`}
-                            >
-                              <div className="flex flex-row justify-between space-y-1">
-                                <p className="content i-bold">{item.company}</p>
-                                <DateRange
-                                  startYear={item.startYear}
-                                  endYear={item.endYear}
-                                  id={`work-experience-start-end-date`}
-                                />
-                              </div>
-                              <p className="content">{item.position}</p>
-                              <p className="content hyphens-auto">
-                                {item.description}
-                              </p>
-                              <Droppable
-                                droppableId={`WORK_EXPERIENCE_KEY_ACHIEVEMENT-${index}`}
-                                type="WORK_EXPERIENCE_KEY_ACHIEVEMENT"
-                              >
-                                {(provided) => (
-                                  <ul
-                                    className="list-disc ul-padding content"
-                                    {...provided.droppableProps}
-                                    ref={provided.innerRef}
-                                  >
-                                    {typeof item.keyAchievements === "string" &&
-                                      item.keyAchievements
-                                        .split("\n")
-                                        .map((achievement, subIndex) => (
-                                          <Draggable
-                                            key={`${item.company}-${index}-${subIndex}`}
-                                            draggableId={`WORK_EXPERIENCE_KEY_ACHIEVEMENT-${index}-${subIndex}`}
-                                            index={subIndex}
-                                          >
-                                            {(provided, snapshot) => (
-                                              <li
-                                                ref={provided.innerRef}
-                                                {...provided.draggableProps}
-                                                {...provided.dragHandleProps}
-                                                className={`
-                                          hover:outline-dashed hover:outline-2
-                                          ${snapshot.isDragging &&
-                                                  "outline-dashed outline-2 outline-gray-400"
-                                                  }`}
-                                              >
-                                                <div
-                                                  dangerouslySetInnerHTML={{
-                                                    __html: achievement,
-                                                  }}
-                                                  contentEditable
-                                                />
-                                              </li>
-                                            )}
-                                          </Draggable>
-                                        ))}
-                                    {provided.placeholder}
-                                  </ul>
-                                )}
-                              </Droppable>
+                        {(provided, snapshot) => (
+                          <div
+                            ref={provided.innerRef}
+                            {...provided.draggableProps}
+                            {...provided.dragHandleProps}
+                            className={`mb-1 ${snapshot.isDragging &&
+                              "outline-dashed outline-2 outline-gray-400"
+                              }`}
+                          >
+                            <div className="flex flex-row justify-between space-y-1">
+                              <p className="content i-bold">{item.name}</p>
+                              <DateRange
+                                startYear={item.startYear}
+                                endYear={item.endYear}
+                                id={`work-experience-start-end-date`}
+                              />
                             </div>
-                          )}
-                        </Draggable>
-                      ))}
-                      {provided.placeholder}
-                    </div>
-                  )}
-                </Droppable>
-              )}
-              {resumeData.projects.length > 0 && (
-                <Droppable droppableId="projects" type="PROJECTS">
-                  {(provided) => (
-                    <div {...provided.droppableProps} ref={provided.innerRef}>
-                      <h2
-                        className="section-title mb-1 border-b-2 border-gray-300 editable"
-                        contentEditable
-                        suppressContentEditableWarning
-                      >
-                        Projects
-                      </h2>
-                      {resumeData.projects.map((item, index) => (
-                        <Draggable
-                          key={`${item.name}-${index}`}
-                          draggableId={`PROJECTS-${index}`}
-                          index={index}
-                        >
-                          {(provided, snapshot) => (
-                            <div
-                              ref={provided.innerRef}
-                              {...provided.draggableProps}
-                              {...provided.dragHandleProps}
-                              className={`mb-1 ${snapshot.isDragging &&
-                                "outline-dashed outline-2 outline-gray-400"
-                                }`}
-                            >
-                              <div className="flex flex-row justify-between space-y-1">
-                                <p className="content i-bold">{item.name}</p>
-                                <DateRange
-                                  startYear={item.startYear}
-                                  endYear={item.endYear}
-                                  id={`work-experience-start-end-date`}
-                                />
-                              </div>
 
-                              <Link
-                                href={item.link}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="content"
-                              >
-                                {item.link}
-                              </Link>
-                              <p className="content">{item.description}</p>
-                              <Droppable
-                                droppableId={`PROJECTS_KEY_ACHIEVEMENT-${index}`}
-                                type="PROJECTS_KEY_ACHIEVEMENT"
-                              >
-                                {(provided) => (
-                                  <ul
-                                    className="list-disc ul-padding content"
-                                    {...provided.droppableProps}
-                                    ref={provided.innerRef}
-                                  >
-                                    {typeof item.keyAchievements === "string" &&
-                                      item.keyAchievements
-                                        .split("\n")
-                                        .map((achievement, subIndex) => (
-                                          <Draggable
-                                            key={`${item.name}-${index}-${subIndex}`}
-                                            draggableId={`PROJECTS_KEY_ACHIEVEMENT-${index}-${subIndex}`}
-                                            index={subIndex}
-                                          >
-                                            {(provided, snapshot) => (
-                                              <li
-                                                ref={provided.innerRef}
-                                                {...provided.draggableProps}
-                                                {...provided.dragHandleProps}
-                                                className={`
+                            <Link
+                              href={item.link}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="content"
+                            >
+                              {item.link}
+                            </Link>
+                            <p className="content">{item.description}</p>
+                            <Droppable
+                              droppableId={`PROJECTS_KEY_ACHIEVEMENT-${index}`}
+                              type="PROJECTS_KEY_ACHIEVEMENT"
+                            >
+                              {(provided) => (
+                                <ul
+                                  className="list-disc ul-padding content"
+                                  {...provided.droppableProps}
+                                  ref={provided.innerRef}
+                                >
+                                  {typeof item.keyAchievements === "string" &&
+                                    item.keyAchievements
+                                      .split("\n")
+                                      .map((achievement, subIndex) => (
+                                        <Draggable
+                                          key={`${item.name}-${index}-${subIndex}`}
+                                          draggableId={`PROJECTS_KEY_ACHIEVEMENT-${index}-${subIndex}`}
+                                          index={subIndex}
+                                        >
+                                          {(provided, snapshot) => (
+                                            <li
+                                              ref={provided.innerRef}
+                                              {...provided.draggableProps}
+                                              {...provided.dragHandleProps}
+                                              className={`
                                           hover:outline-dashed hover:outline-2
                                           ${snapshot.isDragging &&
-                                                  "outline-dashed outline-2 outline-gray-400"
-                                                  }`}
-                                              >
-                                                <div
-                                                  dangerouslySetInnerHTML={{
-                                                    __html: achievement,
-                                                  }}
-                                                  contentEditable
-                                                />
-                                              </li>
-                                            )}
-                                          </Draggable>
-                                        ))}
-                                    {provided.placeholder}
-                                  </ul>
-                                )}
-                              </Droppable>
-                            </div>
-
-                          )}
+                                                "outline-dashed outline-2 outline-gray-400"
+                                                }`}
+                                            >
+                                              <div
+                                                dangerouslySetInnerHTML={{
+                                                  __html: achievement,
+                                                }}
+                                                contentEditable
+                                              />
+                                            </li>
+                                          )}
+                                        </Draggable>
+                                      ))}
+                                  {provided.placeholder}
+                                </ul>
+                              )}
+                            </Droppable>
+                          </div>
 
-                        </Draggable>
-                      ))}
-                      {provided.placeholder}
-                    </div>
-                  )}
-                </Droppable>
-              )}
-            </div>
+                        )}
 
+                      </Draggable>
+                    ))}
+                    {provided.placeholder}
+                  </div>
+                )}
+              </Droppable>
+            )}
           </div>
-        </DragDropContext>
-      </A4PageWrapper>
-    </div>
-  );
-};
-
-const A4PageWrapper = ({ children }: { children: any }) => {
-  const alertA4Size = () => {
-    const preview: Element | null = document.querySelector(".preview");
-    if (!preview) return;
-    const previewHeight = preview.clientHeight;
-    if (previewHeight > 1122) {
-      alert("A4 size exceeded");
-    }
-  };
 
-  return (
-    <div className="w-8.5in" onLoad={alertA4Size}>
-      {children}
-    </div>
+        </div>
+      </DragDropContext>
+    </A4PageWrapper>
   );
 };
-
-
-
 export default Preview;
diff --git a/components/shared/WinPrint.tsx b/components/shared/WinPrint.tsx
index 32ef144..002c2df 100644
--- a/components/shared/WinPrint.tsx
+++ b/components/shared/WinPrint.tsx
@@ -1,10 +1,8 @@
 import { PdfIcon } from "@/icons/PdfIcon";
 import { Button } from "@nextui-org/button";
 import { Tooltip } from "@nextui-org/react";
-export const WinPrint = () => {
-    const print = () => {
-        window.print();
-    };
+
+export const WinPrint = ({ handlePrint }: { handlePrint: any }) => {
     return (
         <Tooltip content="Download Resume">
             <Button
@@ -12,6 +10,6 @@ export const WinPrint = () => {
                 startContent={<PdfIcon />}
                 aria-label="Download Resume"
                 className="exclude-print fixed bottom-5 right-10 font-bold rounded-full bg-white shadow-lg border-2 border-white"
-                onPress={print} />
+                onPress={() => handlePrint()} />
         </Tooltip>);
 };
\ No newline at end of file
diff --git a/styles/globals.css b/styles/globals.css
index 093ab23..80cbdd0 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -113,10 +113,32 @@
     font-weight: 700 !important;
 }
 
+
 @media print {
     .exclude-print {
         display: none;
     }
 
+    .rm-padding-print {
+        padding: 0;
+    }
+
+    @page {
+        size: A4;
+        margin: 10mm;
+    }
 
+    .preview {
+        overflow-y: visible !important;
+    }
+
+    .preview::after {
+        position: fixed;
+        bottom: 0;
+        right: 0;
+        opacity: 0.2;
+        font-size: small;
+        text-align: center;
+        z-index: -1;
+    }
 }
\ No newline at end of file