diff --git a/package-lock.json b/package-lock.json
index 600ba440..876155c4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9902,12 +9902,6 @@
       "resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz",
       "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE="
     },
-    "nan": {
-      "version": "2.14.2",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
-      "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
-      "optional": true
-    },
     "nanoid": {
       "version": "3.1.22",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.22.tgz",
diff --git a/src/pages/Editor/containers/editContext.js b/src/pages/Editor/containers/editContext.js
index eb277ab8..987ba3ee 100644
--- a/src/pages/Editor/containers/editContext.js
+++ b/src/pages/Editor/containers/editContext.js
@@ -1,6 +1,6 @@
-import React, {useEffect, useState} from "react";
+import React, { useState } from "react";
 import DomToImage from "dom-to-image";
-import {jsPDF} from "jspdf";
+import { jsPDF } from "jspdf";
 import ReactSnackBar from "react-js-snackbar";
 import checkBox from "./../../../assets/images/editor/checkmark.svg";
 
@@ -11,67 +11,13 @@ const svgStyles = {
   top: 0,
   left: 0,
 };
-const EditContextProvider = (props) => {
+const EditContextProvider = props => {
   const aImagePrefix = "";
   const [pageSrc, setPageSrc] = useState(`${aImagePrefix}blank1.png`);
   const [isBody, setIsBody] = useState(true);
-  const [currentPage, setCurrentPage] = useState(0);
-  const initialState = [
-    {
-      head: {
-        text: "",
-        headLeft: 0,
-        headTop: 0,
-        headWidth: null,
-      },
-      body: {
-        text: "",
-        bodyLeft: 0,
-        bodyTop: 0,
-        bodyWidth: null,
-      },
-    },
-  ]
-  const [pages, setPages] = useState(initialState);
 
-  useEffect(() => {
-    if (currentPage === pages.length) {
-      setCurrentPage((currentPage) => currentPage - 1);
-    }
-  }, [currentPage, pages]);
 
-  const deletePage = (index) => {
-    var pagesCopy = [...pages];
-    pagesCopy.splice(index, 1);
-    setPages(pagesCopy);
-  };
-  const addPage = () => {
-    var pagesCopy = [...pages];
-    pagesCopy.push({
-      head: {
-        text:"",
-        headLeft: 0,
-        headTop: 0,
-        headWidth: null,
-      },
-      body: {
-        text:"",
-        bodyLeft: 0,
-        bodyTop: 0,
-        bodyWidth: null,
-      },
-    });
-    setPages(pagesCopy);
-  };
-
-  const nextPage = () =>
-    currentPage < pages.length - 1 &&
-    setCurrentPage((currentPage) => currentPage + 1);
-
-  const prevPage = () =>
-    currentPage > 0 && setCurrentPage((currentPage) => currentPage - 1);
-
-  const [headValues, ] = useState({
+  const [headValues, setHeadValues] = useState({
     headSize: null,
     headTop: 20,
     headLeft: 20,
@@ -82,7 +28,7 @@ const EditContextProvider = (props) => {
     headWidth: null,
     headLetterSpace: null,
   });
-  const [bodyValues,] = useState({
+  const [bodyValues, setBodyValues] = useState({
     bodySize: null,
     bodyTop: 20,
     bodyLeft: 20,
@@ -92,6 +38,7 @@ const EditContextProvider = (props) => {
     bodyColor: "black",
     bodyWidth: null,
     bodyLetterSpace: null,
+    bodyText: "",
   });
 
   const [show, setShow] = useState(false);
@@ -105,7 +52,7 @@ const EditContextProvider = (props) => {
     Blank2: "blank2.jpg",
   };
 
-  const isBodyHandler = (e) => {
+  const isBodyHandler = e => {
     if (e.target.classList.contains("id-body")) {
       setIsBody(true);
     } else {
@@ -113,91 +60,73 @@ const EditContextProvider = (props) => {
     }
   };
 
-  const pageSrcHandler = (e) => {
+  const pageSrcHandler = e => {
     setPageSrc(`${ImageNameMap[e.target.value]}`);
   };
 
-  const onValueChange = (element, index, isBody) => {
-    const text = element.innerText;
-    var pagesCopy = pages.filter((page, i) => {
-      if (i !== index) {
-        return page;
-      } else {
-        if (isBody) {
-          page.body.text = text;
-        } else {
-          page.head.text = text;
-        }
-        return page;
-      }
-    });
-    setPages(pagesCopy);
+  const onValueChange = e => {
+    if (isBody) {
+      setBodyValues({ ...bodyValues, [e.target.name]: e.target.value });
+    } else {
+      setHeadValues({
+        ...headValues,
+        [e.target.name]: e.target.value,
+      });
+    }
   };
 
-  const downloadSinglePage = (index, type) => {
-    const nodes = document.querySelectorAll(".page");
-    if (nodes.length === 0) {
-      return;
-    }
-    const node = nodes[index];
-    if (type === "as PNG") {
-      downloadURI([node]);
-    } else if (type === "as PDF") {
-      showToast();
-      downloadPdf([node]);
+  const onElementValueChange = e => {
+    if (isBody) {
+      setBodyValues({ ...bodyValues, [e.name]: e.value });
+    } else {
+      setHeadValues({
+        ...headValues,
+        [e.name]: e.value,
+      });
     }
   };
-  const downloadAction = (e) => {
+
+  const downloadAction = e => {
     e !== undefined && e.preventDefault();
-    const nodes = document.querySelectorAll(".page");
-    if (nodes.length === 0) {
-      return;
-    }
-    if (e !== undefined && e.target.name === "as PNG") {
-      downloadURI(nodes);
-    } else if (e !== undefined && e.target.name === "as PDF") {
+    if (e !== undefined && e.target.name === "as PDF") {
       showToast();
-      downloadPdf(nodes);
     }
-  };
-
-  const downloadURI = async (nodes) => {
-    const scale = 750 / nodes[0].offsetWidth;
+    const node = document.getElementById("outputPage");
+    const scale = 750 / node.offsetWidth;
     const options = {
-      height: nodes[0].offsetHeight * scale,
-      width: nodes[0].offsetWidth * scale,
+      height: node.offsetHeight * scale,
+      width: node.offsetWidth * scale,
       style: {
         transform: `scale(${scale})`,
         transformOrigin: "top left",
-        width: `${nodes[0].offsetWidth}px`,
-        height: `${nodes[0].offsetHeight}px`,
+        width: `${node.offsetWidth}px`,
+        height: `${node.offsetHeight}px`,
       },
     };
-    for (let i = 0; i < nodes.length; i++) {
-      var added = false;
-      const node = nodes[i];
-      const deleteBtn = node.querySelector(".deleteButton");
-      deleteBtn.classList.add("hideBtn");
-      if (!node.classList.contains("showPage")) {
-        added = true;
-        node.classList.add("showPage");
-      }
-      const url = await DomToImage.toPng(node, options);
-      const img = new Image();
-      const link = document.createElement("a");
-      img.src = url;
-      link.download = "generatedDoc.png";
-      link.href = url;
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      if (added) {
-        node.classList.remove("showPage");
-      }
-      deleteBtn.classList.remove("hideBtn");
-    }
-  };
 
+    DomToImage.toPng(node, options)
+      .then(dataUrl => {
+        const img = new Image();
+        img.src = dataUrl;
+        console.log(e.target.name);
+        if (e !== undefined && e.target.name === "as PNG") {
+          downloadURI(dataUrl, "generatedDoc.png");
+        } else if (e !== undefined && e.target.name === "as PDF") {
+          downloadPdf(dataUrl);
+        }
+      })
+      .catch(error => {
+        console.error("oops,something went wrong", error);
+      });
+  };
+  const downloadURI = (uri, name) => {
+    const link = document.createElement("a");
+    link.download = name;
+    link.href = uri;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
   const showToast = () => {
     if (showing) return;
 
@@ -208,45 +137,14 @@ const EditContextProvider = (props) => {
     //   setShowing(false);
     // }, 2000);
   };
-
-  const downloadPdf = async (nodes) => {
+  const downloadPdf = async imgDataUri => {
     const doc = new jsPDF("p", "pt", "a4");
     const width = doc.internal.pageSize.width;
     const height = doc.internal.pageSize.height;
-    const scale = 750 / nodes[0].offsetWidth;
-    const options = {
-      height: nodes[0].offsetHeight * scale,
-      width: nodes[0].offsetWidth * scale,
-      style: {
-        transform: `scale(${scale})`,
-        transformOrigin: "top left",
-        width: `${nodes[0].offsetWidth}px`,
-        height: `${nodes[0].offsetHeight}px`,
-      },
-    };
+    doc.text(10, 20, "");
+    doc.addImage(imgDataUri, "PNG", 0, 0, width, height);
 
-    for (let i = 0; i < nodes.length; i++) {
-      const node = nodes[i];
-      let added = false;
-      const deleteBtn = node.querySelector(".deleteButton");
-      deleteBtn.classList.add("hideBtn");
-      if (!node.classList.contains("showPage")) {
-        added = true;
-        node.classList.add("showPage");
-      }
-      const url = await DomToImage.toPng(node, options);
-      doc.text(10, 20, "");
-      doc.addImage(url, "PNG", 0, 0, width, height);
-      if (i !== nodes.length - 1) {
-        doc.addPage();
-      }
-      deleteBtn.classList.remove("hideBtn");
-      if (added) {
-        node.classList.remove("showPage");
-      }
-    }
-    await new Promise((resolve, reject) => {
-      // Wait for PDF download
+    await new Promise((resolve, reject) => { // Wait for PDF download
       doc.save(); //save PDF
       resolve(true);
     });
@@ -256,50 +154,38 @@ const EditContextProvider = (props) => {
     setShowing(false);
   };
 
-  const importTxt = (e) => {
+  const importTxt = e => {
     e.preventDefault();
 
     if (window.File && window.FileReader && window.FileList && window.Blob) {
+
+      let textarea = document.querySelector("#show-text");
+      textarea.value = "";
       var file = document.querySelector("input[type=file]").files[0];
       var reader = new FileReader();
-      var text = "";
+
       var textFile = /text.*/;
 
       if (file.type.match(textFile)) {
         reader.onload = function (event) {
           let rtf = convertToPlain(event.target.result);
-          text += rtf;
-          const node = document.querySelectorAll(".page-body")[0];
-          node.removeAttribute("contenteditable");
-          node.innerHTML = text;
-          node.setAttribute("contenteditable",true);
-        };
+          textarea.value += rtf;
+
+        }
       } else {
-        const node = document.querySelectorAll(".page-body")[0];
-        node.removeAttribute("contenteditable");
-        text += "<span class='error'>It doesn't seem to be a text file!</span>";
-        node.innerText = text;
-        node.setAttribute("contenteditable",true);
+        alert("Sorry, We cannot import the selected file. The file must be of type '.txt' ");
       }
       reader.readAsText(file);
     } else {
       alert("Your browser is too old to support HTML5 File API");
     }
-  };
+  }
+
 
   function convertToPlain(rtf) {
     rtf = rtf.replace(/\\par[d]?/g, "");
-    rtf = rtf.replace(
-      /\{\*?\\[^{}]+}|[{}]|\\\n?[A-Za-z]+\n?(?:-?\d+)?[ ]?/g,
-      ""
-    );
-    // rtf = rtf.replace(/\n/ig, " ");
-    rtf = rtf.replace(/\\/gi, "");
-    rtf = rtf.replace(/\*/gi, "");
-    rtf = rtf.replace(
-      /decimal.|tightenfactor0|eftab720|HYPERLINK|irnatural/gi,
-      ""
-    );
+    rtf = rtf.replace(/\{\*?\\[^{}]+}|\\\n?[A-Za-z]+\n?(?:-?\d+)?[ ]?/g, "");
+    rtf = rtf.replace(/decimal.|tightenfactor0|eftab720|HYPERLINK|irnatural/gi, "");
     rtf = rtf.replace(/irnaturaltightenfactor0|000000/gi, "");
     rtf = rtf.replace(/�|ࡱ|p#|/gi, "");
     return rtf.replace(/\\'[0-9a-zA-Z]{2}/g, "").trim();
@@ -312,25 +198,19 @@ const EditContextProvider = (props) => {
         headValues,
         bodyValues,
         pageSrc,
-        pages,
-        currentPage,
         onValueChange,
+        onElementValueChange,
         isBodyHandler,
         downloadAction,
         pageSrcHandler,
         importTxt,
-        nextPage,
-        prevPage,
-        deletePage,
-        addPage,
-        downloadSinglePage,
       }}
     >
       {props.children}
-      <ReactSnackBar
-        Icon={<img style={svgStyles} src={checkBox} alt="" />}
-        Show={show}
-      >
+
+
+
+      <ReactSnackBar Icon={<img style={svgStyles} src={checkBox} alt="" />} Show={show}>
         Generating PDF! Please wait...
       </ReactSnackBar>
     </EditContext.Provider>
diff --git a/src/pages/Editor/sections/OutputComponent/Output.js b/src/pages/Editor/sections/OutputComponent/Output.js
index 8d59663e..228e588e 100644
--- a/src/pages/Editor/sections/OutputComponent/Output.js
+++ b/src/pages/Editor/sections/OutputComponent/Output.js
@@ -1,58 +1,70 @@
-import {useContext, useState, useEffect} from "react";
+import { useContext, useState, useEffect } from "react";
 
 import classes from "./Output.module.css";
-import {EditContext} from "../../containers/editContext";
-import Page from "./Page";
+import { EditContext } from "../../containers/editContext";
 
 const OutputComponent = () => {
   const editContext = useContext(EditContext);
+  // const page = require('./ruled1.png');
+  const page = require(`./${editContext.pageSrc}`);
+  console.log(`${editContext.pageSrc}`);
+
+  const [pageText, setPageText] = useState("");
   const [wordCount, setWordCount] = useState(0);
-  const pages = editContext.pages
+
   useEffect(() => {
-    var count = 0;
-    pages.forEach((page) => {
-      count += page.body.text.length;
-      count += page.head.text.length;
-    });
-    setWordCount(count);
-  }, [wordCount, pages]);
-  const displayPages = pages.map((page, index) => {
-    return (
-      <Page
-        visible={index === editContext.currentPage}
-        body={page.body}
-        head={page.head}
-        key={index}
-        index={index}
-        headValue = {page.head.text}
-        bodyValue = {page.body.text}
-        delete={(index) => editContext.deletePage(index)}
-        download={editContext.downloadSinglePage}
-        valueChange = {editContext.onValueChange}
-      />
-    );
-  });
+    setWordCount(pageText.split(' ').filter(c => c !== '').length);
+  }, [pageText])
 
   return (
     <>
       <div className={`${classes.wrapper} col-11 col-lg-8 mx-auto mt-4 p-2`}>
-        <div className="controlButtons">
-          <span onClick={editContext.prevPage}>prev</span>
-          <span onClick={editContext.nextPage}>next</span>
-          <span>Current Page: {editContext.currentPage + 1}</span>
-          <span>Total Page: {pages.length}</span>
-          <span onClick={editContext.addPage}>Add Page</span>
-        </div>
         <div id="outputPage" className={`col-12 mx-auto px-0`}>
-          {displayPages}
+          <div className={`${classes.imgContainer} col-12 mx-auto px-0`}>
+            <img src={page.default} alt="editor" className="mx-auto px-0" Width="100%" Height="100%" />
+          </div>
+          <textarea
+            type="text"
+            className={`${classes.titleInput} id-title`}
+            onClick={editContext.isBodyHandler}
+            placeholder="Welcome to your Doc2Pen"
+            style={{
+              fontSize: `${editContext.headValues.headSize}px`,
+              paddingTop: `${editContext.headValues.headTop}px`,
+              paddingRight: `${Number(editContext.headValues.headRight) + 3}px`,
+              paddingLeft: `${Number(editContext.headValues.headLeft) + 3}px`,
+              lineHeight: `${editContext.headValues.headLine}`,
+              fontFamily: `${editContext.headValues.headFont}`,
+              color: `${editContext.headValues.headColor}`,
+              width: `${editContext.headValues.headWidth}pc`,
+              letterSpacing: `${editContext.headValues.headLetterSpace}px`,
+              overflowY : 'scroll',
+            }}
+          />
+          <textarea
+            type="text"
+            value={editContext.bodyValues.textValue}
+            onChange={e => setPageText(e.target.value)}
+            className={`${classes.contentInput} id-body`}
+            id="show-text"
+            placeholder="Paste your content here! You can type it too, but we know people."
+            style={{
+              fontSize: `${editContext.bodyValues.bodySize}px`,
+              paddingTop: `${editContext.bodyValues.bodyTop}px`,
+              paddingRight: `${Number(editContext.bodyValues.bodyRight) + 3}px`,
+              paddingLeft: `${Number(editContext.bodyValues.bodyLeft) + 3}px`,
+              lineHeight: `${editContext.bodyValues.bodyLine}`,
+              fontFamily: `${editContext.bodyValues.bodyFont}`,
+              color: `${editContext.bodyValues.bodyColor}`,
+              width: `${editContext.bodyValues.bodyWidth}pc`,
+              letterSpacing: `${editContext.bodyValues.bodyLetterSpace}px`,
+              overflowY : 'scroll',
+            }}
+          />
         </div>
-        <div
-          style={{fontSize: "0.75rem", marginTop: "11px", fontWeight: "bold"}}
-        >
+        <div style={{ fontSize: "0.75rem", marginTop: "11px", fontWeight: "bold" }}>
           Word Count:&nbsp;
-          <span style={{color: "#28b8c6", fontSize: "0.85rem"}}>
-            {wordCount}
-          </span>
+          <span style={{ color: "#28b8c6", fontSize: "0.85rem" }}>{wordCount}</span>
         </div>
       </div>
     </>
diff --git a/src/pages/Editor/sections/OutputComponent/Output.module.css b/src/pages/Editor/sections/OutputComponent/Output.module.css
index a792d3b6..1536c034 100644
--- a/src/pages/Editor/sections/OutputComponent/Output.module.css
+++ b/src/pages/Editor/sections/OutputComponent/Output.module.css
@@ -4,22 +4,19 @@
 .imgContainer {
   position: relative;
 }
-.imgContainer {
-  position: relative;
-  height: 700px;
-  display: none;
+.imgContainer img {
+  height: 100%;
+  width: 100%;
 }
 
-
 .titleInput,
 .contentInput {
+  position: absolute;
   border: none;
   background-color: transparent;
+  overflow: hidden;
   z-index: 2;
-  line-height: 2rem;
   width: 100%;
-  color: rgba(2, 2, 66, 0.753);
-  padding: 2px 0px;
 }
 
 ::-webkit-scrollbar {
@@ -27,10 +24,14 @@
 }
 
 .titleInput {
+  top: 0;
   height: 10%;
 }
 
 .contentInput {
+  bottom: 0;
   height: 90%;
-  
+}
+textarea{
+  color: rgba(2, 2, 66, 0.753);
 }
\ No newline at end of file
diff --git a/src/pages/Editor/sections/OutputComponent/Page.css b/src/pages/Editor/sections/OutputComponent/Page.css
deleted file mode 100644
index 05179ad6..00000000
--- a/src/pages/Editor/sections/OutputComponent/Page.css
+++ /dev/null
@@ -1,53 +0,0 @@
-.showPage{
-    display: block;
-}
-.controlButtons {
-    width: fit-content;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 8px;
-  }
-  
-  .controlButtons span {
-      background: #2e3568;
-      padding: 2px 5px;
-      margin-right: 8px;
-      color: white;
-      border-radius: 3px;
-      cursor: pointer;
-      font-weight: 300;
-  }
-
-.downloadButtons {
-    position: absolute;
-    right: 0;
-    top: -28px;
-    font-size: 13px;
-}
-
-.downloadButtons span{
-    background: #2e684a;
-    padding: 2px 5px;
-    margin-right: 8px;
-    color: white;
-    border-radius: 3px;
-    cursor: pointer;
-    font-weight: 300;
-}
-
-.deleteButton{
-    position: absolute;
-    right: 1px;
-    font-size: 13px;
-    cursor: pointer;
-    background: #fd3e3e;
-    padding: 2px 5px;
-    color: white;
-    font-weight: 300;
-    border-radius: 3px;
-}
-
-.hideBtn{
-    display: none;
-}
\ No newline at end of file
diff --git a/src/pages/Editor/sections/OutputComponent/Page.js b/src/pages/Editor/sections/OutputComponent/Page.js
deleted file mode 100644
index 277809dc..00000000
--- a/src/pages/Editor/sections/OutputComponent/Page.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, {useContext} from "react";
-import classes from "./Output.module.css";
-import {EditContext} from "../../containers/editContext";
-import "./Page.css";
-const Page = (props) => {
-  const headValues = props.head;
-  const bodyValues = props.body;
-  const editContext = useContext(EditContext);
-  const page = require(`./${editContext.pageSrc}`);
-  var show = props.visible ? "showPage" : "";
-  return (
-    <div
-      style={{backgroundImage: `url(${page.default})`}}
-      className={`${classes.imgContainer} col-12 mx-auto ${show} page`}
-    >
-      <span className="deleteButton" onClick={props.delete}>
-        Delete
-      </span>
-      <div className="downloadButtons">
-        Download Current Page
-        <span onClick={() => props.download(props.index, "as PDF")}>
-          As Pdf
-        </span>
-        <span onClick={() => props.download(props.index, "as PNG")}>
-          As png
-        </span>
-      </div>
-      <div
-        contentEditable={true}
-        className={classes.titleInput + " id-title"}
-        onInputCapture={(e) => props.valueChange(e.target, props.index, false)}
-        style={{
-          fontSize: `${editContext.headValues.headSize}px`,
-          paddingTop: `${headValues.headTop}px`,
-          paddingLeft: `${Number(headValues.headLeft) + 3}px`,
-          lineHeight: `${editContext.headValues.headLine}`,
-          fontFamily: `${editContext.headValues.headFont}`,
-          color: `${editContext.headValues.headColor}`,
-          width: `${headValues.headWidth}pc`,
-          letterSpacing: `${editContext.headValues.headLetterSpace}px`,
-        }}
-      ></div>
-      <div
-        contentEditable={true}
-        onInputCapture={(e) => props.valueChange(e.target, props.index, true)}
-        className={`${classes.contentInput} page-body`}
-        id="show-text"
-        style={{
-          fontSize: `${editContext.bodyValues.bodySize}px`,
-          paddingTop: `${bodyValues.bodyTop}px`,
-          paddingLeft: `${Number(bodyValues.bodyLeft) + 3}px`,
-          lineHeight: `${editContext.bodyValues.bodyLine}`,
-          fontFamily: `${editContext.bodyValues.bodyFont}`,
-          color: `${editContext.bodyValues.bodyColor}`,
-          width: `${bodyValues.bodyWidth}pc`,
-          letterSpacing: `${editContext.bodyValues.bodyLetterSpace}px`,
-        }}
-      ></div>
-    </div>
-  );
-};
-export default Page;