diff --git a/docs/templates/README.md b/docs/templates/README.md
index 6493754bd..962887bf8 100644
--- a/docs/templates/README.md
+++ b/docs/templates/README.md
@@ -22,4 +22,8 @@ title: Templates
     <h2 id="castform"><a href="#castform" class="header-anchor">#</a> Castform</h2>
     <img src="./images/Castform.png" />
   </div>
+  <div>
+    <h2 id="glalie"><a href="#glalie" class="header-anchor">#</a> Glalie</h2>
+    <img src="./images/Glalie.png" />
+  </div>
 </div>
diff --git a/docs/templates/images/Glalie.png b/docs/templates/images/Glalie.png
new file mode 100644
index 000000000..cd69f7ed2
Binary files /dev/null and b/docs/templates/images/Glalie.png differ
diff --git a/package-lock.json b/package-lock.json
index 8f50a732b..19b4d1757 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13943,6 +13943,14 @@
         "scheduler": "^0.19.1"
       }
     },
+    "react-easy-panzoom": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/react-easy-panzoom/-/react-easy-panzoom-0.4.4.tgz",
+      "integrity": "sha512-1zgT6boDVPcrR3Egcz8KEVpM3fs50o22iIWPRlAqvev0/4nw5RnUNFsvmOJ/b5M2nd8MDGknLmyfBdhjoLB6+g==",
+      "requires": {
+        "warning": "4.0.3"
+      }
+    },
     "react-error-overlay": {
       "version": "6.0.7",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.7.tgz",
@@ -17121,6 +17129,14 @@
         "makeerror": "1.0.x"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
diff --git a/package.json b/package.json
index 71ca1f9c2..8869fd60f 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "postcss-cli": "^7.1.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-easy-panzoom": "^0.4.4",
     "react-i18next": "^11.3.4",
     "react-markdown": "^4.3.1",
     "react-scripts": "3.4.1",
diff --git a/src/components/App/App.js b/src/components/App/App.js
index 3ebb99a70..761ee40fc 100644
--- a/src/components/App/App.js
+++ b/src/components/App/App.js
@@ -1,5 +1,6 @@
 import React, { useRef, useEffect, useContext, Suspense } from 'react';
 import { useTranslation } from 'react-i18next';
+import { PanZoom } from 'react-easy-panzoom';
 
 import AppContext from '../../context/AppContext';
 import PageContext from '../../context/PageContext';
@@ -8,9 +9,11 @@ import LeftSidebar from '../LeftSidebar/LeftSidebar';
 import RightSidebar from '../RightSidebar/RightSidebar';
 
 import templates from '../../templates';
+import PageController from '../../shared/PageController';
 
 const App = () => {
   const pageRef = useRef(null);
+  const panZoomRef = useRef(null);
   const { i18n } = useTranslation();
 
   const context = useContext(AppContext);
@@ -18,24 +21,38 @@ const App = () => {
   const { theme, settings } = state;
 
   const pageContext = useContext(PageContext);
-  const { setPageElement } = pageContext;
+  const { setPageRef, setPanZoomRef } = pageContext;
 
   useEffect(() => {
-    setPageElement(pageRef);
+    setPageRef(pageRef);
+    setPanZoomRef(panZoomRef);
     i18n.changeLanguage(settings.language);
     const storedState = JSON.parse(localStorage.getItem('state'));
     dispatch({ type: 'import_data', payload: storedState });
-  }, [dispatch, setPageElement, i18n, settings.language]);
+  }, [dispatch, setPageRef, setPanZoomRef, i18n, settings.language]);
 
   return (
     <Suspense fallback="Loading...">
-      <div className="h-screen overflow-hidden grid grid-cols-5 items-center">
+      <div className="h-screen grid grid-cols-5 items-center">
         <LeftSidebar />
 
-        <div className="z-0 h-screen col-span-3 flex overflow-scroll justify-center items-center">
-          <div id="page" ref={pageRef} className="shadow-2xl">
-            {templates.find(x => theme.layout.toLowerCase() === x.key).component()}
-          </div>
+        <div className="relative z-0 h-screen overflow-hidden col-span-3 flex justify-center items-center">
+          <PanZoom
+            ref={panZoomRef}
+            minZoom="0.4"
+            autoCenter
+            autoCenterZoomLevel={0.7}
+            enableBoundingBox
+            boundaryRatioVertical={0.8}
+            boundaryRatioHorizontal={0.8}
+            style={{ outline: 'none' }}
+          >
+            <div id="page" ref={pageRef} className="shadow-2xl break-words">
+              {templates.find(x => theme.layout.toLowerCase() === x.key).component()}
+            </div>
+          </PanZoom>
+
+          <PageController />
         </div>
 
         <RightSidebar />
diff --git a/src/components/LeftSidebar/tabs/Awards.js b/src/components/LeftSidebar/tabs/Awards.js
index 2b9a61c6e..1e584f79f 100644
--- a/src/components/LeftSidebar/tabs/Awards.js
+++ b/src/components/LeftSidebar/tabs/Awards.js
@@ -13,7 +13,6 @@ import AddItemButton from '../../../shared/AddItemButton';
 import ItemHeading from '../../../shared/ItemHeading';
 
 const AwardsTab = ({ data, onChange }) => {
-  const { t } = useTranslation();
   const context = useContext(AppContext);
   const { dispatch } = context;
 
@@ -28,7 +27,7 @@ const AwardsTab = ({ data, onChange }) => {
         </div>
         <div className="col-span-5">
           <TextField
-            placeholder={t('heading.placeholder')}
+            placeholder="Heading"
             value={data.awards.heading}
             onChange={v => onChange('data.awards.heading', v)}
           />
@@ -62,7 +61,7 @@ const Form = ({ item, onChange, identifier = '' }) => {
       <TextField
         className="mb-6"
         label={t('awards.title.label')}
-        placeholder={t('awards.title.placeholder')}
+        placeholder="Code For Good Hackathon"
         value={item.title}
         onChange={v => onChange(`${identifier}title`, v)}
       />
@@ -70,7 +69,7 @@ const Form = ({ item, onChange, identifier = '' }) => {
       <TextField
         className="mb-6"
         label={t('awards.subtitle.label')}
-        placeholder={t('awards.subtitle.placeholder')}
+        placeholder="First Place, National Level"
         value={item.subtitle}
         onChange={v => onChange(`${identifier}subtitle`, v)}
       />
@@ -78,7 +77,6 @@ const Form = ({ item, onChange, identifier = '' }) => {
       <TextArea
         className="mb-6"
         label={t('app:item.description.label')}
-        placeholder={t('awards.description.placeholder')}
         value={item.description}
         onChange={v => onChange(`${identifier}description`, v)}
       />
diff --git a/src/components/LeftSidebar/tabs/Certifications.js b/src/components/LeftSidebar/tabs/Certifications.js
index 8e3add8e2..f29200454 100644
--- a/src/components/LeftSidebar/tabs/Certifications.js
+++ b/src/components/LeftSidebar/tabs/Certifications.js
@@ -13,7 +13,6 @@ import ItemHeading from '../../../shared/ItemHeading';
 import AddItemButton from '../../../shared/AddItemButton';
 
 const CertificationsTab = ({ data, onChange }) => {
-  const { t } = useTranslation();
   const context = useContext(AppContext);
   const { dispatch } = context;
 
@@ -28,7 +27,7 @@ const CertificationsTab = ({ data, onChange }) => {
         </div>
         <div className="col-span-5">
           <TextField
-            placeholder={t('heading.placeholder')}
+            placeholder="Heading"
             value={data.certifications.heading}
             onChange={v => onChange('data.certifications.heading', v)}
           />
@@ -62,7 +61,7 @@ const Form = ({ item, onChange, identifier = '' }) => {
       <TextField
         className="mb-6"
         label={t('certifications.title.label')}
-        placeholder={t('certifications.title.placeholder')}
+        placeholder="CS50: Intro to Computer Science"
         value={item.title}
         onChange={v => onChange(`${identifier}title`, v)}
       />
@@ -70,7 +69,7 @@ const Form = ({ item, onChange, identifier = '' }) => {
       <TextField
         className="mb-6"
         label={t('certifications.subtitle.label')}
-        placeholder={t('certifications.subtitle.placeholder')}
+        placeholder="Harvard University"
         value={item.subtitle}
         onChange={v => onChange(`${identifier}subtitle`, v)}
       />
@@ -78,7 +77,6 @@ const Form = ({ item, onChange, identifier = '' }) => {
       <TextArea
         className="mb-6"
         label={t('app:item.description.label')}
-        placeholder={t('certifications.description.placeholder')}
         value={item.description}
         onChange={v => onChange(`${identifier}description`, v)}
       />
diff --git a/src/components/LeftSidebar/tabs/Education.js b/src/components/LeftSidebar/tabs/Education.js
index 7a646937c..8bf9c25d3 100644
--- a/src/components/LeftSidebar/tabs/Education.js
+++ b/src/components/LeftSidebar/tabs/Education.js
@@ -13,7 +13,6 @@ import AddItemButton from '../../../shared/AddItemButton';
 import ItemHeading from '../../../shared/ItemHeading';
 
 const EducationTab = ({ data, onChange }) => {
-  const { t } = useTranslation();
   const context = useContext(AppContext);
   const { dispatch } = context;
 
@@ -28,7 +27,7 @@ const EducationTab = ({ data, onChange }) => {
         </div>
         <div className="col-span-5">
           <TextField
-            placeholder={t('heading.placeholder')}
+            placeholder="Heading"
             value={data.education.heading}
             onChange={v => onChange('data.education.heading', v)}
           />
@@ -62,7 +61,7 @@ const Form = ({ item, onChange, identifier = '' }) => {
       <TextField
         className="mb-6"
         label={t('education.name.label')}
-        placeholder={t('education.name.placeholder')}
+        placeholder="Harvard University"
         value={item.name}
         onChange={v => onChange(`${identifier}name`, v)}
       />
@@ -70,7 +69,7 @@ const Form = ({ item, onChange, identifier = '' }) => {
       <TextField
         className="mb-6"
         label={t('education.major.label')}
-        placeholder={t('education.major.placeholder')}
+        placeholder="Masters in Computer Science"
         value={item.major}
         onChange={v => onChange(`${identifier}major`, v)}
       />
@@ -87,7 +86,7 @@ const Form = ({ item, onChange, identifier = '' }) => {
         <TextField
           className="mb-6"
           label={t('app:item.startDate.label')}
-          placeholder={t('app:item.startDate.placeholder')}
+          placeholder="March 2018"
           value={item.start}
           onChange={v => onChange(`${identifier}start`, v)}
         />
@@ -95,7 +94,7 @@ const Form = ({ item, onChange, identifier = '' }) => {
         <TextField
           className="mb-6"
           label={t('app:item.endDate.label')}
-          placeholder={t('app:item.endDate.placeholder')}
+          placeholder="June 2022"
           value={item.end}
           onChange={v => onChange(`${identifier}end`, v)}
         />
@@ -105,7 +104,6 @@ const Form = ({ item, onChange, identifier = '' }) => {
         rows="5"
         className="mb-6"
         label={t('app:item.description.label')}
-        placeholder={t('education.description.placeholder')}
         value={item.description}
         onChange={v => onChange(`${identifier}description`, v)}
       />
diff --git a/src/components/LeftSidebar/tabs/Extras.js b/src/components/LeftSidebar/tabs/Extras.js
index 975baae69..f0e99468c 100644
--- a/src/components/LeftSidebar/tabs/Extras.js
+++ b/src/components/LeftSidebar/tabs/Extras.js
@@ -12,7 +12,6 @@ import ItemHeading from '../../../shared/ItemHeading';
 import AddItemButton from '../../../shared/AddItemButton';
 
 const ExtrasTab = ({ data, onChange }) => {
-  const { t } = useTranslation();
   const context = useContext(AppContext);
   const { dispatch } = context;
 
@@ -27,7 +26,7 @@ const ExtrasTab = ({ data, onChange }) => {
         </div>
         <div className="col-span-5">
           <TextField
-            placeholder={t('heading.placeholder')}
+            placeholder="Heading"
             value={data.extras.heading}
             onChange={v => onChange('data.extras.heading', v)}
           />
@@ -61,7 +60,7 @@ const Form = ({ item, onChange, identifier = '' }) => {
       <TextField
         className="mb-6"
         label={t('extras.key.label')}
-        placeholder={t('extras.key.placeholder')}
+        placeholder="Date of Birth"
         value={item.key}
         onChange={v => onChange(`${identifier}key`, v)}
       />
@@ -69,7 +68,7 @@ const Form = ({ item, onChange, identifier = '' }) => {
       <TextField
         className="mb-6"
         label={t('extras.value.label')}
-        placeholder={t('extras.value.placeholder')}
+        placeholder="6th August 1995"
         value={item.value}
         onChange={v => onChange(`${identifier}value`, v)}
       />
diff --git a/src/components/LeftSidebar/tabs/Languages.js b/src/components/LeftSidebar/tabs/Languages.js
index bb9801d33..a2a58b1f8 100644
--- a/src/components/LeftSidebar/tabs/Languages.js
+++ b/src/components/LeftSidebar/tabs/Languages.js
@@ -13,7 +13,6 @@ import AddItemButton from '../../../shared/AddItemButton';
 import ItemHeading from '../../../shared/ItemHeading';
 
 const LanguagesTab = ({ data, onChange }) => {
-  const { t } = useTranslation('app');
   const context = useContext(AppContext);
   const { dispatch } = context;
 
@@ -47,7 +46,7 @@ const LanguagesTab = ({ data, onChange }) => {
           </div>
           <div className="col-span-5">
             <TextField
-              placeholder={t('heading.placeholder')}
+              placeholder="Heading"
               value={data.languages.heading}
               onChange={v => onChange('data.languages.heading', v)}
             />
@@ -82,7 +81,7 @@ const Form = ({ item, onChange, identifier = '' }) => {
       <TextField
         className="mb-6"
         label={t('languages.key.label')}
-        placeholder={t('languages.key.placeholder')}
+        placeholder="English"
         value={item.key}
         onChange={v => onChange(`${identifier}key`, v)}
       />
diff --git a/src/components/LeftSidebar/tabs/Objective.js b/src/components/LeftSidebar/tabs/Objective.js
index 88fb3a6d9..58f76ae3f 100644
--- a/src/components/LeftSidebar/tabs/Objective.js
+++ b/src/components/LeftSidebar/tabs/Objective.js
@@ -6,7 +6,7 @@ import TextField from '../../../shared/TextField';
 import Checkbox from '../../../shared/Checkbox';
 
 const ObjectiveTab = ({ data, onChange }) => {
-  const { t } = useTranslation(['leftSidebar', 'app']);
+  const { t } = useTranslation('leftSidebar');
 
   return (
     <div>
@@ -19,7 +19,7 @@ const ObjectiveTab = ({ data, onChange }) => {
         </div>
         <div className="col-span-5">
           <TextField
-            placeholder={t('app:heading.placeholder')}
+            placeholder="Heading"
             value={data.objective.heading}
             onChange={v => onChange('data.objective.heading', v)}
           />
@@ -32,8 +32,8 @@ const ObjectiveTab = ({ data, onChange }) => {
         rows="15"
         className="mb-4"
         label={t('objective.objective.label')}
-        placeholder={t('objective.objective.placeholder')}
         value={data.objective.body}
+        placeholder="Looking for a challenging role in a reputable organization to utilize my technical, database, and management skills for the growth of the organization as well as to enhance my knowledge about new and emerging trends in the IT sector."
         onChange={v => onChange('data.objective.body', v)}
       />
     </div>
diff --git a/src/components/LeftSidebar/tabs/Profile.js b/src/components/LeftSidebar/tabs/Profile.js
index 3d0565e7a..2a05a33d4 100644
--- a/src/components/LeftSidebar/tabs/Profile.js
+++ b/src/components/LeftSidebar/tabs/Profile.js
@@ -20,7 +20,7 @@ const ProfileTab = ({ data, onChange }) => {
         <TextField
           className="mb-6"
           label={t('profile.firstName.label')}
-          placeholder={t('profile.firstName.placeholder')}
+          placeholder="Jane"
           value={data.profile.firstName}
           onChange={v => onChange('data.profile.firstName', v)}
         />
@@ -28,7 +28,7 @@ const ProfileTab = ({ data, onChange }) => {
         <TextField
           className="mb-6"
           label={t('profile.lastName.label')}
-          placeholder={t('profile.lastName.placeholder')}
+          placeholder="Doe"
           value={data.profile.lastName}
           onChange={v => onChange('data.profile.lastName', v)}
         />
@@ -37,7 +37,7 @@ const ProfileTab = ({ data, onChange }) => {
       <TextField
         className="mb-6"
         label={t('profile.subtitle.label')}
-        placeholder={t('profile.subtitle.placeholder')}
+        placeholder="Full-Stack Web Developer"
         value={data.profile.subtitle}
         onChange={v => onChange('data.profile.subtitle', v)}
       />
@@ -47,7 +47,7 @@ const ProfileTab = ({ data, onChange }) => {
       <TextField
         className="mb-6"
         label={t('profile.address.line1.label')}
-        placeholder={t('profile.address.line1.placeholder')}
+        placeholder="Palladium Complex"
         value={data.profile.address.line1}
         onChange={v => onChange('data.profile.address.line1', v)}
       />
@@ -55,7 +55,7 @@ const ProfileTab = ({ data, onChange }) => {
       <TextField
         className="mb-6"
         label={t('profile.address.line2.label')}
-        placeholder={t('profile.address.line2.placeholder')}
+        placeholder="140 E 14th St"
         value={data.profile.address.line2}
         onChange={v => onChange('data.profile.address.line2', v)}
       />
@@ -63,7 +63,7 @@ const ProfileTab = ({ data, onChange }) => {
       <TextField
         className="mb-6"
         label={t('profile.address.line3.label')}
-        placeholder={t('profile.address.line3.placeholder')}
+        placeholder="New York, NY 10003 USA"
         value={data.profile.address.line3}
         onChange={v => onChange('data.profile.address.line3', v)}
       />
@@ -81,7 +81,7 @@ const ProfileTab = ({ data, onChange }) => {
       <TextField
         className="mb-6"
         label={t('profile.website.label')}
-        placeholder="google.com"
+        placeholder="janedoe.me"
         value={data.profile.website}
         onChange={v => onChange('data.profile.website', v)}
       />
@@ -89,7 +89,7 @@ const ProfileTab = ({ data, onChange }) => {
       <TextField
         className="mb-6"
         label={t('profile.email.label')}
-        placeholder="john.doe@example.com"
+        placeholder="jane.doe@example.com"
         value={data.profile.email}
         onChange={v => onChange('data.profile.email', v)}
       />
diff --git a/src/components/LeftSidebar/tabs/References.js b/src/components/LeftSidebar/tabs/References.js
index 80e09c334..f369eeb30 100644
--- a/src/components/LeftSidebar/tabs/References.js
+++ b/src/components/LeftSidebar/tabs/References.js
@@ -13,7 +13,6 @@ import ItemHeading from '../../../shared/ItemHeading';
 import AddItemButton from '../../../shared/AddItemButton';
 
 const ReferencesTab = ({ data, onChange }) => {
-  const { t } = useTranslation();
   const context = useContext(AppContext);
   const { dispatch } = context;
 
@@ -47,7 +46,7 @@ const ReferencesTab = ({ data, onChange }) => {
           </div>
           <div className="col-span-5">
             <TextField
-              placeholder={t('heading.placeholder')}
+              placeholder="Heading"
               value={data.references.heading}
               onChange={v => onChange('data.references.heading', v)}
             />
@@ -82,7 +81,7 @@ const Form = ({ item, onChange, identifier = '' }) => {
       <TextField
         className="mb-6"
         label={t('references.name.label')}
-        placeholder={t('references.name.placeholder')}
+        placeholder="Richard Hendricks"
         value={item.name}
         onChange={v => onChange(`${identifier}name`, v)}
       />
@@ -90,7 +89,7 @@ const Form = ({ item, onChange, identifier = '' }) => {
       <TextField
         className="mb-6"
         label={t('references.position.label')}
-        placeholder={t('references.position.placeholder')}
+        placeholder="CEO, Pied Piper"
         value={item.position}
         onChange={v => onChange(`${identifier}position`, v)}
       />
@@ -115,7 +114,6 @@ const Form = ({ item, onChange, identifier = '' }) => {
         rows="5"
         className="mb-6"
         label={t('app:item.description.label')}
-        placeholder={t('references.description.placeholder')}
         value={item.description}
         onChange={v => onChange(`${identifier}description`, v)}
       />
diff --git a/src/components/LeftSidebar/tabs/Skills.js b/src/components/LeftSidebar/tabs/Skills.js
index 95ca15037..06d207aa9 100644
--- a/src/components/LeftSidebar/tabs/Skills.js
+++ b/src/components/LeftSidebar/tabs/Skills.js
@@ -1,5 +1,4 @@
 import React, { useState, useContext } from 'react';
-import { useTranslation } from 'react-i18next';
 
 import AppContext from '../../../context/AppContext';
 import Checkbox from '../../../shared/Checkbox';
@@ -8,7 +7,6 @@ import { addItem, deleteItem } from '../../../utils';
 import ItemHeading from '../../../shared/ItemHeading';
 
 const SkillsTab = ({ data, onChange }) => {
-  const { t } = useTranslation();
   const context = useContext(AppContext);
   const { dispatch } = context;
 
@@ -23,7 +21,7 @@ const SkillsTab = ({ data, onChange }) => {
         </div>
         <div className="col-span-5">
           <TextField
-            placeholder={t('heading.placeholder')}
+            placeholder="Heading"
             value={data.skills.heading}
             onChange={v => onChange('data.skills.heading', v)}
           />
@@ -42,12 +40,10 @@ const SkillsTab = ({ data, onChange }) => {
 };
 
 const Form = ({ item, onChange }) => {
-  const { t } = useTranslation('leftSidebar');
-
   return (
     <input
       className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
-      placeholder={t('skills.item.placeholder')}
+      placeholder="Team Building &amp; Training"
       value={item}
       onChange={e => onChange(e.target.value)}
       type="text"
diff --git a/src/components/LeftSidebar/tabs/Work.js b/src/components/LeftSidebar/tabs/Work.js
index 793cc6b7f..5a1f3a2ee 100644
--- a/src/components/LeftSidebar/tabs/Work.js
+++ b/src/components/LeftSidebar/tabs/Work.js
@@ -13,7 +13,6 @@ import AddItemButton from '../../../shared/AddItemButton';
 import ItemHeading from '../../../shared/ItemHeading';
 
 const WorkTab = ({ data, onChange }) => {
-  const { t } = useTranslation();
   const context = useContext(AppContext);
   const { dispatch } = context;
 
@@ -25,7 +24,7 @@ const WorkTab = ({ data, onChange }) => {
         </div>
         <div className="col-span-5">
           <TextField
-            placeholder={t('heading.placeholder')}
+            placeholder="Heading"
             value={data.work.heading}
             onChange={v => onChange('data.work.heading', v)}
           />
@@ -59,7 +58,7 @@ const Form = ({ item, onChange, identifier = '' }) => {
       <TextField
         className="mb-6"
         label={t('work.name.label')}
-        placeholder={t('work.name.placeholder')}
+        placeholder="Amazon"
         value={item.title}
         onChange={v => onChange(`${identifier}title`, v)}
       />
@@ -67,7 +66,7 @@ const Form = ({ item, onChange, identifier = '' }) => {
       <TextField
         className="mb-6"
         label={t('work.role.label')}
-        placeholder={t('work.role.placeholder')}
+        placeholder="Full-Stack Web Developer"
         value={item.role}
         onChange={v => onChange(`${identifier}role`, v)}
       />
@@ -76,7 +75,7 @@ const Form = ({ item, onChange, identifier = '' }) => {
         <TextField
           className="mb-6"
           label={t('app:item.startDate.label')}
-          placeholder={t('app:item.startDate.placeholder')}
+          placeholder="March 2018"
           value={item.start}
           onChange={v => onChange(`${identifier}start`, v)}
         />
@@ -84,7 +83,7 @@ const Form = ({ item, onChange, identifier = '' }) => {
         <TextField
           className="mb-6"
           label={t('app:item.endDate.label')}
-          placeholder={t('app:item.endDate.placeholder')}
+          placeholder="June 2022"
           value={item.end}
           onChange={v => onChange(`${identifier}end`, v)}
         />
@@ -94,7 +93,6 @@ const Form = ({ item, onChange, identifier = '' }) => {
         rows="5"
         className="mb-6"
         label={t('app:item.description.label')}
-        placeholder={t('work.description.placeholder')}
         value={item.description}
         onChange={v => onChange(`${identifier}description`, v)}
       />
diff --git a/src/components/RightSidebar/tabs/About.js b/src/components/RightSidebar/tabs/About.js
index c58f063a0..3509617e5 100644
--- a/src/components/RightSidebar/tabs/About.js
+++ b/src/components/RightSidebar/tabs/About.js
@@ -101,7 +101,7 @@ const AboutTab = () => {
       <div className="mt-5">
         <p className="text-xs font-gray-600 text-center">
           <Trans t={t} i18nKey="about.footer.credit">
-            Reactive Resume is a project by
+            Made with Love by
             <a
               className="font-bold hover:underline"
               href="https://www.amruthpillai.com/"
@@ -110,7 +110,6 @@ const AboutTab = () => {
             >
               Amruth Pillai
             </a>
-            .
           </Trans>
         </p>
         <p className="text-xs font-gray-600 text-center">{t('about.footer.thanks')}</p>
diff --git a/src/components/RightSidebar/tabs/Actions.js b/src/components/RightSidebar/tabs/Actions.js
index d1e8a7672..5fdb69aba 100644
--- a/src/components/RightSidebar/tabs/Actions.js
+++ b/src/components/RightSidebar/tabs/Actions.js
@@ -2,60 +2,17 @@
 /* eslint-disable jsx-a11y/anchor-has-content */
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React, { useRef, useContext } from 'react';
-import { useTranslation, Trans } from 'react-i18next';
-import html2canvas from 'html2canvas';
-import * as jsPDF from 'jspdf';
+import { useTranslation } from 'react-i18next';
 
 import PageContext from '../../../context/PageContext';
+import { importJson, saveAsPdf } from '../../../utils';
 
 const ActionsTab = ({ data, theme, dispatch }) => {
   const pageContext = useContext(PageContext);
-  const { pageElement } = pageContext;
+  const { pageRef, panZoomRef } = pageContext;
   const { t } = useTranslation('rightSidebar');
   const fileInputRef = useRef(null);
 
-  const importJson = event => {
-    const fr = new FileReader();
-    fr.addEventListener('load', () => {
-      const importedObject = JSON.parse(fr.result);
-      dispatch({ type: 'import_data', payload: importedObject });
-      dispatch({ type: 'save_data' });
-    });
-    fr.readAsText(event.target.files[0]);
-  };
-
-  const printAsPdf = () => {
-    pageElement.current.style.display = 'table';
-    pageElement.current.style.overflow = 'visible';
-
-    html2canvas(pageElement.current, {
-      scale: 5,
-      useCORS: true,
-      allowTaint: true,
-    }).then(canvas => {
-      const image = canvas.toDataURL('image/jpeg', 1.0);
-      const doc = new jsPDF('p', 'mm', 'a4');
-      const pageWidth = doc.internal.pageSize.getWidth();
-      const pageHeight = doc.internal.pageSize.getHeight();
-
-      const widthRatio = pageWidth / canvas.width;
-      const heightRatio = pageHeight / canvas.height;
-      const ratio = widthRatio > heightRatio ? heightRatio : widthRatio;
-
-      const canvasWidth = canvas.width * ratio;
-      const canvasHeight = canvas.height * ratio;
-
-      const marginX = (pageWidth - canvasWidth) / 2;
-      const marginY = (pageHeight - canvasHeight) / 2;
-
-      pageElement.current.style.display = 'block';
-      pageElement.current.style.overflow = 'scroll';
-
-      doc.addImage(image, 'JPEG', marginX, marginY, canvasWidth, canvasHeight, null, 'SLOW');
-      doc.save(`RxResume_${Date.now()}.pdf`);
-    });
-  };
-
   const exportToJson = () => {
     const backupObj = { data, theme };
     const dataStr = `data:text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(backupObj))}`;
@@ -86,7 +43,12 @@ const ActionsTab = ({ data, theme, dispatch }) => {
 
         <p className="text-sm">{t('actions.importExport.body')}</p>
 
-        <input ref={fileInputRef} type="file" className="hidden" onChange={importJson} />
+        <input
+          ref={fileInputRef}
+          type="file"
+          className="hidden"
+          onChange={e => importJson(e, dispatch)}
+        />
         <a id="downloadAnchor" className="hidden" />
 
         <div className="mt-4 grid grid-cols-2 col-gap-6">
@@ -117,39 +79,19 @@ const ActionsTab = ({ data, theme, dispatch }) => {
       <hr className="my-6" />
 
       <div className="shadow text-center p-5">
-        <h6 className="font-bold text-sm mb-2">{t('actions.printResume.heading')}</h6>
+        <h6 className="font-bold text-sm mb-2">{t('actions.downloadResume.heading')}</h6>
+        <div className="text-sm">{t('actions.downloadResume.body')}</div>
 
-        <div className="text-sm">
-          <Trans t={t} i18nKey="actions.printResume.body">
-            You can click on the button below to generate a PDF instantly. Alternatively, you can
-            also use <pre className="inline font-bold">Cmd/Ctrl + P</pre> but it would have
-            different effects.
-          </Trans>
-        </div>
-
-        <div className="mt-1 grid grid-cols-2 col-gap-6">
-          <button
-            type="button"
-            onClick={printAsPdf}
-            className="mt-4 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium py-2 px-5 rounded"
-          >
-            <div className="flex justify-center items-center">
-              <i className="material-icons mr-2 font-bold text-base">import_export</i>
-              <span className="text-sm">{t('actions.printResume.buttons.export')}</span>
-            </div>
-          </button>
-
-          <button
-            type="button"
-            onClick={printAsPdf}
-            className="mt-4 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium py-2 px-5 rounded"
-          >
-            <div className="flex justify-center items-center">
-              <i className="material-icons mr-2 font-bold text-base">print</i>
-              <span className="text-sm">{t('actions.printResume.buttons.print')}</span>
-            </div>
-          </button>
-        </div>
+        <button
+          type="button"
+          onClick={() => saveAsPdf(pageRef, panZoomRef)}
+          className="mt-4 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium py-2 px-5 rounded"
+        >
+          <div className="flex justify-center items-center">
+            <i className="material-icons mr-2 font-bold text-base">save</i>
+            <span className="text-sm">{t('actions.downloadResume.buttons.saveAsPdf')}</span>
+          </div>
+        </button>
       </div>
 
       <hr className="my-6" />
diff --git a/src/context/PageContext.js b/src/context/PageContext.js
index 8085b6e3d..7cd296676 100644
--- a/src/context/PageContext.js
+++ b/src/context/PageContext.js
@@ -4,12 +4,16 @@ const PageContext = React.createContext(null);
 const { Provider } = PageContext;
 
 const StateProvider = ({ children }) => {
-  const [pageElement, setPageElement] = useState(null);
+  const [panZoomRef, setPanZoomRef] = useState(null);
+  const [pageRef, setPageRef] = useState(null);
+
   return (
     <Provider
       value={{
-        pageElement,
-        setPageElement,
+        pageRef,
+        setPageRef,
+        panZoomRef,
+        setPanZoomRef,
       }}
     >
       {children}
diff --git a/src/i18n/locales/de/app/app.json b/src/i18n/locales/de/app/app.json
index 786073886..bc22cb68f 100644
--- a/src/i18n/locales/de/app/app.json
+++ b/src/i18n/locales/de/app/app.json
@@ -1,16 +1,11 @@
 {
-  "heading": {
-    "placeholder": "Überschrift"
-  },
   "item": {
     "add": "{{- heading}} hinzufügen",
     "startDate": {
-      "label": "Startdatum",
-      "placeholder": "März 2018"
+      "label": "Startdatum"
     },
     "endDate": {
-      "label": "Enddatum",
-      "placeholder": "März 2022"
+      "label": "Enddatum"
     },
     "description": {
       "label": "Beschreibung"
diff --git a/src/i18n/locales/de/leftSidebar/awards.json b/src/i18n/locales/de/leftSidebar/awards.json
index f2e70b824..250b473f6 100644
--- a/src/i18n/locales/de/leftSidebar/awards.json
+++ b/src/i18n/locales/de/leftSidebar/awards.json
@@ -1,13 +1,8 @@
 {
   "title": {
-    "label": "Titel",
-    "placeholder": "Mathematik & Wissenschaft Olympiade"
+    "label": "Titel"
   },
   "subtitle": {
-    "label": "Untertitel",
-    "placeholder": "Erster Platz, internationales Niveau"
-  },
-  "description": {
-    "placeholder": "Du kannst darüber schreiben, welche Eigenschaften dich zum Erreichen dieser Auszeichnung geführt haben."
+    "label": "Untertitel"
   }
 }
diff --git a/src/i18n/locales/de/leftSidebar/objective.json b/src/i18n/locales/de/leftSidebar/objective.json
index 2b19cbdef..ffa33a1b6 100644
--- a/src/i18n/locales/de/leftSidebar/objective.json
+++ b/src/i18n/locales/de/leftSidebar/objective.json
@@ -1,6 +1,5 @@
 {
   "objective": {
-    "label": "Ziel",
-    "placeholder": "Auf der Suche nach einer herausfordernden Stelle in einem angesehenen Betrieb, mit der ich meine technischen-, Datenbank- und Management-Skills für Wissenssteigerung im IT-Sektor beweisen kann."
+    "label": "Ziel"
   }
 }
diff --git a/src/i18n/locales/en/app/app.json b/src/i18n/locales/en/app/app.json
index 861e3ad5f..d491a136d 100644
--- a/src/i18n/locales/en/app/app.json
+++ b/src/i18n/locales/en/app/app.json
@@ -1,16 +1,11 @@
 {
-  "heading": {
-    "placeholder": "Heading"
-  },
   "item": {
     "add": "Add {{- heading}}",
     "startDate": {
-      "label": "Start Date",
-      "placeholder": "March 2018"
+      "label": "Start Date"
     },
     "endDate": {
-      "label": "End Date",
-      "placeholder": "March 2022"
+      "label": "End Date"
     },
     "description": {
       "label": "Description"
diff --git a/src/i18n/locales/en/leftSidebar/awards.json b/src/i18n/locales/en/leftSidebar/awards.json
index 4222ec124..4a52c12a9 100644
--- a/src/i18n/locales/en/leftSidebar/awards.json
+++ b/src/i18n/locales/en/leftSidebar/awards.json
@@ -1,13 +1,8 @@
 {
   "title": {
-    "label": "Title",
-    "placeholder": "Math & Science Olympiad"
+    "label": "Title"
   },
   "subtitle": {
-    "label": "Subtitle",
-    "placeholder": "First Place, International Level"
-  },
-  "description": {
-    "placeholder": "You can write about what qualities made you succeed in getting this award."
+    "label": "Subtitle"
   }
 }
diff --git a/src/i18n/locales/en/leftSidebar/certifications.json b/src/i18n/locales/en/leftSidebar/certifications.json
index 92f9dc164..e6e0effa2 100644
--- a/src/i18n/locales/en/leftSidebar/certifications.json
+++ b/src/i18n/locales/en/leftSidebar/certifications.json
@@ -1,13 +1,8 @@
 {
   "title": {
-    "label": "Title",
-    "placeholder": "Android Development Nanodegree"
+    "label": "Name"
   },
   "subtitle": {
-    "label": "Subtitle",
-    "placeholder": "Udacity"
-  },
-  "description": {
-    "placeholder": "You can write about what you learned from your certification program."
+    "label": "Authority"
   }
 }
diff --git a/src/i18n/locales/en/leftSidebar/education.json b/src/i18n/locales/en/leftSidebar/education.json
index 231004b26..346748c7e 100644
--- a/src/i18n/locales/en/leftSidebar/education.json
+++ b/src/i18n/locales/en/leftSidebar/education.json
@@ -1,16 +1,11 @@
 {
   "name": {
-    "label": "Name",
-    "placeholder": "Harvard University"
+    "label": "Name"
   },
   "major": {
-    "label": "Major",
-    "placeholder": "Masters in Computer Science"
+    "label": "Major"
   },
   "grade": {
     "label": "Grade"
-  },
-  "description": {
-    "placeholder": "You can write about projects or special credit classes that you took while studying at this school."
   }
 }
diff --git a/src/i18n/locales/en/leftSidebar/extras.json b/src/i18n/locales/en/leftSidebar/extras.json
index 7afc7c067..59950d61a 100644
--- a/src/i18n/locales/en/leftSidebar/extras.json
+++ b/src/i18n/locales/en/leftSidebar/extras.json
@@ -1,10 +1,8 @@
 {
   "key": {
-    "label": "Key",
-    "placeholder": "Date of Birth"
+    "label": "Key"
   },
   "value": {
-    "label": "Value",
-    "placeholder": "6th August 1995"
+    "label": "Value"
   }
 }
diff --git a/src/i18n/locales/en/leftSidebar/languages.json b/src/i18n/locales/en/leftSidebar/languages.json
index fc5de101a..c0167dd71 100644
--- a/src/i18n/locales/en/leftSidebar/languages.json
+++ b/src/i18n/locales/en/leftSidebar/languages.json
@@ -1,7 +1,6 @@
 {
   "key": {
-    "label": "Key",
-    "placeholder": "Dothraki"
+    "label": "Name"
   },
   "rating": {
     "label": "Rating"
diff --git a/src/i18n/locales/en/leftSidebar/objective.json b/src/i18n/locales/en/leftSidebar/objective.json
index 8cb4f70da..329804798 100644
--- a/src/i18n/locales/en/leftSidebar/objective.json
+++ b/src/i18n/locales/en/leftSidebar/objective.json
@@ -1,6 +1,5 @@
 {
   "objective": {
-    "label": "Objective",
-    "placeholder": "Looking for a challenging role in a reputable organization to utilize my technical, database, and management skills for the growth of the organization as well as to enhance my knowledge about new and emerging trends in the IT sector."
+    "label": "Objective"
   }
 }
diff --git a/src/i18n/locales/en/leftSidebar/profile.json b/src/i18n/locales/en/leftSidebar/profile.json
index b7f889c26..6f109ed6a 100644
--- a/src/i18n/locales/en/leftSidebar/profile.json
+++ b/src/i18n/locales/en/leftSidebar/profile.json
@@ -3,29 +3,24 @@
     "label": "Photo URL"
   },
   "firstName": {
-    "label": "First Name",
-    "placeholder": "Jane"
+    "label": "First Name"
   },
   "lastName": {
-    "label": "Last Name",
-    "placeholder": "Doe"
+    "label": "Last Name"
   },
   "subtitle": {
-    "label": "Subtitle",
-    "placeholder": "Full Stack Web Developer"
+    "label": "Subtitle"
   },
   "address": {
+    "label": "Address",
     "line1": {
-      "label": "Address Line 1",
-      "placeholder": "Palladium Complex"
+      "label": "Address Line 1"
     },
     "line2": {
-      "label": "Address Line 2",
-      "placeholder": "140 E 14th St"
+      "label": "Address Line 2"
     },
     "line3": {
-      "label": "Address Line 3",
-      "placeholder": "New York, NY 10003 USA"
+      "label": "Address Line 3"
     }
   },
   "phone": {
diff --git a/src/i18n/locales/en/leftSidebar/references.json b/src/i18n/locales/en/leftSidebar/references.json
index 88241575d..f7f2bf831 100644
--- a/src/i18n/locales/en/leftSidebar/references.json
+++ b/src/i18n/locales/en/leftSidebar/references.json
@@ -1,19 +1,14 @@
 {
   "name": {
-    "label": "Name",
-    "placeholder": "Richard Hendricks"
+    "label": "Name"
   },
   "position": {
-    "label": "Position",
-    "placeholder": "CEO, Pied Piper"
+    "label": "Position"
   },
   "phone": {
     "label": "Phone Number"
   },
   "email": {
     "label": "Email Address"
-  },
-  "description": {
-    "placeholder": "You can write about how you and the reference contact worked together and which projects you were a part of."
   }
 }
diff --git a/src/i18n/locales/en/leftSidebar/work.json b/src/i18n/locales/en/leftSidebar/work.json
index 6d115c6e3..9859754c3 100644
--- a/src/i18n/locales/en/leftSidebar/work.json
+++ b/src/i18n/locales/en/leftSidebar/work.json
@@ -1,13 +1,8 @@
 {
   "name": {
-    "label": "Name",
-    "placeholder": "Amazon"
+    "label": "Name"
   },
   "role": {
-    "label": "Role",
-    "placeholder": "Front-end Web Developer"
-  },
-  "description": {
-    "placeholder": "You can write about what you specialized in while working at the company and what projects you were a part of."
+    "label": "Role"
   }
 }
diff --git a/src/i18n/locales/en/rightSidebar/about.json b/src/i18n/locales/en/rightSidebar/about.json
index cac678ad8..c5538e17e 100644
--- a/src/i18n/locales/en/rightSidebar/about.json
+++ b/src/i18n/locales/en/rightSidebar/about.json
@@ -2,7 +2,7 @@
   "title": "About",
   "documentation": {
     "heading": "Documentation",
-    "body": "Want to know more about the app? Wouldn't it be nice if there was a guide to setting it up on your local machine? Need information on how to contribute to the project? Look no further, there's comprehensive documentation made just for you.",
+    "body": "Want to know more about the app? Need information on how to contribute to the project? Look no further, there's a comprehensive guide made just for you.",
     "buttons": {
       "documentation": "Documentation"
     }
@@ -30,7 +30,7 @@
     }
   },
   "footer": {
-    "credit": "Reactive Resume is a project by <1>Amruth Pillai</1>.",
+    "credit": "Made with Love by <1>Amruth Pillai</1>",
     "thanks": "Thank you for using Reactive Resume!"
   }
 }
diff --git a/src/i18n/locales/en/rightSidebar/actions.json b/src/i18n/locales/en/rightSidebar/actions.json
index b68187149..ae75bbd18 100644
--- a/src/i18n/locales/en/rightSidebar/actions.json
+++ b/src/i18n/locales/en/rightSidebar/actions.json
@@ -9,12 +9,11 @@
       "export": "Export"
     }
   },
-  "printResume": {
-    "heading": "Print Your Resume",
-    "body": "You can click on the button below to generate a PDF instantly. Alternatively, you can also use <1>Cmd/Ctrl + P</1> but it would have different effects.",
+  "downloadResume": {
+    "heading": "Download Your Resume",
+    "body": "You can click on the button below to download a PDF version of your resume instantly. For best results, please use the latest version of Google Chrome.",
     "buttons": {
-      "export": "Export",
-      "print": "Print"
+      "saveAsPdf": "Save as PDF"
     }
   },
   "loadDemoData": {
diff --git a/src/i18n/locales/en/rightSidebar/colors.json b/src/i18n/locales/en/rightSidebar/colors.json
index bf4accbf2..f7fff7ba5 100644
--- a/src/i18n/locales/en/rightSidebar/colors.json
+++ b/src/i18n/locales/en/rightSidebar/colors.json
@@ -2,6 +2,6 @@
   "title": "Colors",
   "colorOptions": "Color Options",
   "primaryColor": "Primary Color",
-  "accentColor": "Accent Color",
+  "accentColor": "Secondary Color",
   "clipboardCopyAction": "{{color}} has been copied to the clipboard."
 }
diff --git a/src/i18n/locales/es/app/app.json b/src/i18n/locales/es/app/app.json
index 09f94258e..8fc1ed1c9 100644
--- a/src/i18n/locales/es/app/app.json
+++ b/src/i18n/locales/es/app/app.json
@@ -1,16 +1,11 @@
 {
-  "heading": {
-    "placeholder": "Título"
-  },
   "item": {
     "add": "Agregar {{- heading}}",
     "startDate": {
-      "label": "Fecha de inicio",
-      "placeholder": "Marzo 2018"
+      "label": "Fecha de inicio"
     },
     "endDate": {
-      "label": "Fecha Final",
-      "placeholder": "Marzo 2022"
+      "label": "Fecha Final"
     },
     "description": {
       "label": "Descripción"
diff --git a/src/i18n/locales/es/leftSidebar/awards.json b/src/i18n/locales/es/leftSidebar/awards.json
index 33e00a677..358c0b084 100644
--- a/src/i18n/locales/es/leftSidebar/awards.json
+++ b/src/i18n/locales/es/leftSidebar/awards.json
@@ -1,13 +1,8 @@
 {
   "title": {
-    "label": "Título",
-    "placeholder": "Olimpiadas de Matemáticas y Ciencia"
+    "label": "Título"
   },
   "subtitle": {
-    "label": "Subtítulo",
-    "placeholder": "Primer lugar, Nivel internacional"
-  },
-  "description": {
-    "placeholder": "Puedes escribir sobre las cualidades que te hicieron tener éxito en obtener este premio."
+    "label": "Subtítulo"
   }
 }
diff --git a/src/i18n/locales/es/leftSidebar/education.json b/src/i18n/locales/es/leftSidebar/education.json
index 5129468ee..ce9358a7b 100644
--- a/src/i18n/locales/es/leftSidebar/education.json
+++ b/src/i18n/locales/es/leftSidebar/education.json
@@ -1,16 +1,11 @@
 {
   "name": {
-    "label": "Nombre",
-    "placeholder": "Universidad de Harvard"
+    "label": "Nombre"
   },
   "major": {
-    "label": "Carrera",
-    "placeholder": "Maestría en Ciencias de la Computación"
+    "label": "Carrera"
   },
   "grade": {
     "label": "Calificación"
-  },
-  "description": {
-    "placeholder": "Puede escribir sobre los proyectos o créditos especiales que tomó mientras estudió en este lugar."
   }
 }
diff --git a/src/i18n/locales/es/leftSidebar/extras.json b/src/i18n/locales/es/leftSidebar/extras.json
index 050c2d4da..c1b479a6c 100644
--- a/src/i18n/locales/es/leftSidebar/extras.json
+++ b/src/i18n/locales/es/leftSidebar/extras.json
@@ -1,10 +1,8 @@
 {
   "key": {
-    "label": "Clave",
-    "placeholder": "Fecha de nacimiento"
+    "label": "Clave"
   },
   "value": {
-    "label": "Valor",
-    "placeholder": "6 de agosto de 1995"
+    "label": "Valor"
   }
 }
diff --git a/src/i18n/locales/es/leftSidebar/objective.json b/src/i18n/locales/es/leftSidebar/objective.json
index 3f1e405fe..add1eb656 100644
--- a/src/i18n/locales/es/leftSidebar/objective.json
+++ b/src/i18n/locales/es/leftSidebar/objective.json
@@ -1,6 +1,5 @@
 {
   "objective": {
-    "label": "Objetivo",
-    "placeholder": "Buscando un rol desafiante en una organización con buena reputación para utilizar mis habilidades técnicas, en base de datos y habilidades de gestión para el crecimiento de la organización, así como para mejorar mis conocimientos sobre las nuevas y emergentes tendencias en el sector de las TI."
+    "label": "Objetivo"
   }
 }
diff --git a/src/i18n/locales/es/leftSidebar/references.json b/src/i18n/locales/es/leftSidebar/references.json
index e13c61be4..618629377 100644
--- a/src/i18n/locales/es/leftSidebar/references.json
+++ b/src/i18n/locales/es/leftSidebar/references.json
@@ -1,19 +1,14 @@
 {
   "name": {
-    "label": "Nombre",
-    "placeholder": "Richard Hendricks"
+    "label": "Nombre"
   },
   "position": {
-    "label": "Puesto de trabajo",
-    "placeholder": "CEO, Pied Piper"
+    "label": "Puesto de trabajo"
   },
   "phone": {
     "label": "Número de teléfono"
   },
   "email": {
     "label": "Dirección de correo electrónico"
-  },
-  "description": {
-    "placeholder": "Puede escribir sobre cómo usted y el contacto de referencia trabajaron juntos y de qué proyectos formó parte."
   }
 }
diff --git a/src/i18n/locales/es/leftSidebar/work.json b/src/i18n/locales/es/leftSidebar/work.json
index f6a71a9b8..2e224451d 100644
--- a/src/i18n/locales/es/leftSidebar/work.json
+++ b/src/i18n/locales/es/leftSidebar/work.json
@@ -1,13 +1,8 @@
 {
   "name": {
-    "label": "Nombre",
-    "placeholder": "Amazon"
+    "label": "Nombre"
   },
   "role": {
-    "label": "Puesto",
-    "placeholder": "Desarrollador Web Front-end"
-  },
-  "description": {
-    "placeholder": "Puedes escribir sobre lo que te especializaste mientras trabajabas en la empresa y de los proyectos de los que formaste parte."
+    "label": "Puesto"
   }
 }
diff --git a/src/i18n/locales/fr/app/app.json b/src/i18n/locales/fr/app/app.json
index 6bd2aba5c..cc480179c 100644
--- a/src/i18n/locales/fr/app/app.json
+++ b/src/i18n/locales/fr/app/app.json
@@ -1,16 +1,11 @@
 {
-  "heading": {
-    "placeholder": "Titre"
-  },
   "item": {
     "add": "Ajouter {{- heading}}",
     "startDate": {
-      "label": "Date de début",
-      "placeholder": "Mars 2018"
+      "label": "Date de début"
     },
     "endDate": {
-      "label": "Date de fin",
-      "placeholder": "Mars 2022"
+      "label": "Date de fin"
     },
     "description": {
       "label": "Description"
diff --git a/src/i18n/locales/fr/leftSidebar/awards.json b/src/i18n/locales/fr/leftSidebar/awards.json
index cb11f5987..48568a336 100644
--- a/src/i18n/locales/fr/leftSidebar/awards.json
+++ b/src/i18n/locales/fr/leftSidebar/awards.json
@@ -1,13 +1,8 @@
 {
   "title": {
-    "label": "Titre",
-    "placeholder": "Olympiade de mathématiques et de sciences"
+    "label": "Titre"
   },
   "subtitle": {
-    "label": "Sous-titre",
-    "placeholder": "Première place, niveau international"
-  },
-  "description": {
-    "placeholder": "Vous pouvez écrire sur les qualités qui vous ont permis de gagner ce prix."
+    "label": "Sous-titre"
   }
 }
diff --git a/src/i18n/locales/fr/leftSidebar/certifications.json b/src/i18n/locales/fr/leftSidebar/certifications.json
index 0856e9a99..d204184dd 100644
--- a/src/i18n/locales/fr/leftSidebar/certifications.json
+++ b/src/i18n/locales/fr/leftSidebar/certifications.json
@@ -1,13 +1,8 @@
 {
   "title": {
-    "label": "Titre",
-    "placeholder": "Développement Android Nanodegree"
+    "label": "Nom"
   },
   "subtitle": {
-    "label": "Sous-titre",
-    "placeholder": "Udacity"
-  },
-  "description": {
-    "placeholder": "Vous pouvez écrire sur ce que vous avez appris de votre programme de certification."
+    "label": "Autorité"
   }
 }
diff --git a/src/i18n/locales/fr/leftSidebar/education.json b/src/i18n/locales/fr/leftSidebar/education.json
index 8252678d7..5cdc9caf5 100644
--- a/src/i18n/locales/fr/leftSidebar/education.json
+++ b/src/i18n/locales/fr/leftSidebar/education.json
@@ -1,16 +1,11 @@
 {
   "name": {
-    "label": "Nom",
-    "placeholder": "Université de Harvard"
+    "label": "Nom"
   },
   "major": {
-    "label": "Spécialité",
-    "placeholder": "Maîtrise en Informatique"
+    "label": "Spécialité"
   },
   "grade": {
     "label": "Note"
-  },
-  "description": {
-    "placeholder": "Vous pouvez écrire sur des projets ou des cours de crédit spéciaux que vous avez pris pendant vos études à cette école."
   }
 }
diff --git a/src/i18n/locales/fr/leftSidebar/extras.json b/src/i18n/locales/fr/leftSidebar/extras.json
index 754749625..d9365e751 100644
--- a/src/i18n/locales/fr/leftSidebar/extras.json
+++ b/src/i18n/locales/fr/leftSidebar/extras.json
@@ -1,10 +1,8 @@
 {
   "key": {
-    "label": "Clé",
-    "placeholder": "Date de naissance"
+    "label": "Clé"
   },
   "value": {
-    "label": "Valeur",
-    "placeholder": "6 août 1995"
+    "label": "Valeur"
   }
 }
diff --git a/src/i18n/locales/fr/leftSidebar/languages.json b/src/i18n/locales/fr/leftSidebar/languages.json
index 4fcd510b4..2b5d67505 100644
--- a/src/i18n/locales/fr/leftSidebar/languages.json
+++ b/src/i18n/locales/fr/leftSidebar/languages.json
@@ -1,7 +1,6 @@
 {
   "key": {
-    "label": "Langue",
-    "placeholder": "Allemande"
+    "label": "Nom"
   },
   "rating": {
     "label": "Évaluation"
diff --git a/src/i18n/locales/fr/leftSidebar/objective.json b/src/i18n/locales/fr/leftSidebar/objective.json
index 96a7a2472..e48a6841d 100644
--- a/src/i18n/locales/fr/leftSidebar/objective.json
+++ b/src/i18n/locales/fr/leftSidebar/objective.json
@@ -1,6 +1,5 @@
 {
   "objective": {
-    "label": "Objectif",
-    "placeholder": "Je cherche un poste plein de challenges dans une entreprise réputé afin d'utilisé mes compétences en base de donnée et en management pour participer à la croissance de l'entreprise tout en développant mes connaissances sur les nouvelles tendances du secteur."
+    "label": "Objectif"
   }
 }
diff --git a/src/i18n/locales/fr/leftSidebar/profile.json b/src/i18n/locales/fr/leftSidebar/profile.json
index affc1d63c..7639981a4 100644
--- a/src/i18n/locales/fr/leftSidebar/profile.json
+++ b/src/i18n/locales/fr/leftSidebar/profile.json
@@ -3,29 +3,24 @@
     "label": "URL de la photo"
   },
   "firstName": {
-    "label": "Prénom",
-    "placeholder": "Jeanne"
+    "label": "Prénom"
   },
   "lastName": {
-    "label": "Nom",
-    "placeholder": "Dupont"
+    "label": "Nom"
   },
   "subtitle": {
-    "label": "Sous-titre",
-    "placeholder": "Développeur Web Full Stack"
+    "label": "Sous-titre"
   },
   "address": {
+    "label": "Addresse",
     "line1": {
-      "label": "Adresse ligne 1",
-      "placeholder": "Complexe de Palladium"
+      "label": "Adresse ligne 1"
     },
     "line2": {
-      "label": "Adresse ligne 2",
-      "placeholder": "140 rue de la Paix"
+      "label": "Adresse ligne 2"
     },
     "line3": {
-      "label": "Adresse ligne 3",
-      "placeholder": "New York, NY 10003 États-Unis"
+      "label": "Adresse ligne 3"
     }
   },
   "phone": {
diff --git a/src/i18n/locales/fr/leftSidebar/references.json b/src/i18n/locales/fr/leftSidebar/references.json
index bdb543d36..b82d06189 100644
--- a/src/i18n/locales/fr/leftSidebar/references.json
+++ b/src/i18n/locales/fr/leftSidebar/references.json
@@ -1,19 +1,14 @@
 {
   "name": {
-    "label": "Nom",
-    "placeholder": "Jean Martin"
+    "label": "Nom"
   },
   "position": {
-    "label": "Poste",
-    "placeholder": "PDG, Pied Piper"
+    "label": "Poste"
   },
   "phone": {
     "label": "Numéro de téléphone"
   },
   "email": {
     "label": "Adresse e-mail"
-  },
-  "description": {
-    "placeholder": "Vous pouvez écrire sur la façon dont vous et votre référence avez travaillé ensemble et sur les projets que vous avez mené."
   }
 }
diff --git a/src/i18n/locales/fr/leftSidebar/work.json b/src/i18n/locales/fr/leftSidebar/work.json
index 042edc9b8..742c7b861 100644
--- a/src/i18n/locales/fr/leftSidebar/work.json
+++ b/src/i18n/locales/fr/leftSidebar/work.json
@@ -1,13 +1,8 @@
 {
   "name": {
-    "label": "Nom",
-    "placeholder": "Amazon"
+    "label": "Nom"
   },
   "role": {
-    "label": "Rôle",
-    "placeholder": "Développeur Front-end"
-  },
-  "description": {
-    "placeholder": "Vous pouvez écrire sur les compétences que vous avez acquises en travaillant au sein de l'entreprise et sur quels projets vous étiez impliqués."
+    "label": "Rôle"
   }
 }
diff --git a/src/i18n/locales/fr/rightSidebar/about.json b/src/i18n/locales/fr/rightSidebar/about.json
index ef5dc0159..5205d32e7 100644
--- a/src/i18n/locales/fr/rightSidebar/about.json
+++ b/src/i18n/locales/fr/rightSidebar/about.json
@@ -2,7 +2,7 @@
   "title": "À propos",
   "documentation": {
     "heading": "Documentation",
-    "body": "Vous voulez en savoir plus sur l'application ? Ca serait pas génial s'il y avait un guide pour l'installer sur votre machine locale ? Besoin d'informations sur la façon de contribuer au projet ? Ne regardez pas plus loin, il y a une documentation faite juste pour vous.",
+    "body": "Vous voulez en savoir plus sur l'application? Besoin d'informations sur la manière de contribuer au projet? Ne cherchez plus, un guide complet est fait pour vous.",
     "buttons": {
       "documentation": "Documentation"
     }
@@ -30,7 +30,7 @@
     }
   },
   "footer": {
-    "credit": "Reactive Resume est de project de <1>Amruth Pillai</1>.",
+    "credit": "Fabriqué avec amour par <1>Amruth Pillai</1>",
     "thanks": "Merci d'utiliser Reactive Resume!"
   }
 }
diff --git a/src/i18n/locales/fr/rightSidebar/actions.json b/src/i18n/locales/fr/rightSidebar/actions.json
index 7e1379ef7..ba5d6f6ed 100644
--- a/src/i18n/locales/fr/rightSidebar/actions.json
+++ b/src/i18n/locales/fr/rightSidebar/actions.json
@@ -9,12 +9,11 @@
       "export": "Exporter"
     }
   },
-  "printResume": {
-    "heading": "Imprimer votre CV",
-    "body": "Vous pouvez cliquer sur le bouton ci-dessous pour générer un PDF instantanément. Vous pouvez également utiliser <1>Cmd/Ctrl + P</1> mais cela aura des effets différents.",
+  "downloadResume": {
+    "heading": "Téléchargez votre CV",
+    "body": "Vous pouvez cliquer sur le bouton ci-dessous pour télécharger instantanément une version PDF de votre CV. Pour de meilleurs résultats, veuillez utiliser la dernière version de Google Chrome.",
     "buttons": {
-      "export": "Exporter",
-      "print": "Imprimer"
+      "saveAsPdf": "Enregistrer en PDF"
     }
   },
   "loadDemoData": {
diff --git a/src/i18n/locales/fr/rightSidebar/colors.json b/src/i18n/locales/fr/rightSidebar/colors.json
index b7748fe1d..71d9b8eca 100644
--- a/src/i18n/locales/fr/rightSidebar/colors.json
+++ b/src/i18n/locales/fr/rightSidebar/colors.json
@@ -1,7 +1,7 @@
 {
   "title": "Couleurs",
   "colorOptions": "Options de couleurs",
-  "primaryColor": "Couleur principale",
-  "accentColor": "Couleur secondaire",
+  "primaryColor": "Couleur Principale",
+  "accentColor": "Couleur Secondaire",
   "clipboardCopyAction": "La couleur {{color}} a été copié dans le presse-papiers."
 }
diff --git a/src/i18n/locales/hi/app/app.json b/src/i18n/locales/hi/app/app.json
index 2b7bd7433..44c430b89 100644
--- a/src/i18n/locales/hi/app/app.json
+++ b/src/i18n/locales/hi/app/app.json
@@ -1,16 +1,11 @@
 {
-  "heading": {
-    "placeholder": "शीर्षक"
-  },
   "item": {
     "add": "{{- heading}} जोड़ें",
     "startDate": {
-      "label": "प्रारंभ तिथि",
-      "placeholder": "मार्च 2018"
+      "label": "प्रारंभ तिथि"
     },
     "endDate": {
-      "label": "अंतिम तिथि",
-      "placeholder": "मार्च 2022"
+      "label": "अंतिम तिथि"
     },
     "description": {
       "label": "विवरण"
diff --git a/src/i18n/locales/hi/leftSidebar/awards.json b/src/i18n/locales/hi/leftSidebar/awards.json
index ddd132b1e..bddf36a5e 100644
--- a/src/i18n/locales/hi/leftSidebar/awards.json
+++ b/src/i18n/locales/hi/leftSidebar/awards.json
@@ -1,13 +1,8 @@
 {
   "title": {
-    "label": "शीर्षक",
-    "placeholder": "गणित और विज्ञान ओलंपियाड"
+    "label": "शीर्षक"
   },
   "subtitle": {
-    "label": "उपशीर्षक",
-    "placeholder": "पहला स्थान, अंतर्राष्ट्रीय"
-  },
-  "description": {
-    "placeholder": "आप इस बारे में लिख सकते हैं कि आपको यह पुरस्कार किन गुणों से मिला है।"
+    "label": "उपशीर्षक"
   }
 }
diff --git a/src/i18n/locales/hi/leftSidebar/certifications.json b/src/i18n/locales/hi/leftSidebar/certifications.json
index 05bbb7f68..444cccb21 100644
--- a/src/i18n/locales/hi/leftSidebar/certifications.json
+++ b/src/i18n/locales/hi/leftSidebar/certifications.json
@@ -1,13 +1,8 @@
 {
   "title": {
-    "label": "शीर्षक",
-    "placeholder": "Android डेवलपमेंट ननोडिग्री"
+    "label": "नाम"
   },
   "subtitle": {
-    "label": "उपशीर्षक",
-    "placeholder": "उदासिटी"
-  },
-  "description": {
-    "placeholder": "आप अपने प्रमाणन कार्यक्रम से जो कुछ भी सीख सकते हैं, उसके बारे में लिख सकते हैं।"
+    "label": "अधिकार"
   }
 }
diff --git a/src/i18n/locales/hi/leftSidebar/education.json b/src/i18n/locales/hi/leftSidebar/education.json
index 6074cac21..111a2ae43 100644
--- a/src/i18n/locales/hi/leftSidebar/education.json
+++ b/src/i18n/locales/hi/leftSidebar/education.json
@@ -1,16 +1,11 @@
 {
   "name": {
-    "label": "नाम",
-    "placeholder": "दिल्ली विश्वविद्यालय"
+    "label": "नाम"
   },
   "major": {
-    "label": "विषय",
-    "placeholder": "कंप्यूटर विज्ञान में परास्नातक"
+    "label": "विषय"
   },
   "grade": {
     "label": "ग्रेड"
-  },
-  "description": {
-    "placeholder": "आप उन परियोजनाओं या विशेष क्रेडिट कक्षाओं के बारे में लिख सकते हैं, जिन्हें आपने इस स्कूल में पढ़ते समय लिया था।"
   }
 }
diff --git a/src/i18n/locales/hi/leftSidebar/extras.json b/src/i18n/locales/hi/leftSidebar/extras.json
index 5fa88756f..b992fd503 100644
--- a/src/i18n/locales/hi/leftSidebar/extras.json
+++ b/src/i18n/locales/hi/leftSidebar/extras.json
@@ -1,10 +1,8 @@
 {
   "key": {
-    "label": "मौलिक",
-    "placeholder": "जन्म तिथि"
+    "label": "मौलिक"
   },
   "value": {
-    "label": "मूल्य",
-    "placeholder": "6 अगस्त 1995"
+    "label": "मूल्य"
   }
 }
diff --git a/src/i18n/locales/hi/leftSidebar/languages.json b/src/i18n/locales/hi/leftSidebar/languages.json
index 2ef0bed6f..f9a1390fe 100644
--- a/src/i18n/locales/hi/leftSidebar/languages.json
+++ b/src/i18n/locales/hi/leftSidebar/languages.json
@@ -1,7 +1,6 @@
 {
   "key": {
-    "label": "मौलिक",
-    "placeholder": "पंजाबी"
+    "label": "नाम"
   },
   "rating": {
     "label": "रेटिंग"
diff --git a/src/i18n/locales/hi/leftSidebar/objective.json b/src/i18n/locales/hi/leftSidebar/objective.json
index 6c093fabf..bfa81425d 100644
--- a/src/i18n/locales/hi/leftSidebar/objective.json
+++ b/src/i18n/locales/hi/leftSidebar/objective.json
@@ -1,6 +1,5 @@
 {
   "objective": {
-    "label": "लक्ष्य",
-    "placeholder": "संगठन के विकास के साथ-साथ आईटी क्षेत्र में नए और उभरते रुझानों के बारे में अपने ज्ञान को बढ़ाने के लिए मेरे तकनीकी, डेटाबेस और प्रबंधन कौशल का उपयोग करने के लिए एक प्रतिष्ठित संगठन में एक चुनौतीपूर्ण भूमिका की तलाश है।"
+    "label": "लक्ष्य"
   }
 }
diff --git a/src/i18n/locales/hi/leftSidebar/profile.json b/src/i18n/locales/hi/leftSidebar/profile.json
index d43aa9151..1c074ceed 100644
--- a/src/i18n/locales/hi/leftSidebar/profile.json
+++ b/src/i18n/locales/hi/leftSidebar/profile.json
@@ -3,29 +3,24 @@
     "label": "फोटो लिंक"
   },
   "firstName": {
-    "label": "पहला नाम",
-    "placeholder": "दिलीप"
+    "label": "पहला नाम"
   },
   "lastName": {
-    "label": "उपनाम",
-    "placeholder": "शर्मा"
+    "label": "उपनाम"
   },
   "subtitle": {
-    "label": "उपशीर्षक",
-    "placeholder": "फुल स्टैक वेब डेवलपर"
+    "label": "उपशीर्षक"
   },
   "address": {
+    "label": "पता",
     "line1": {
-      "label": "पता पंक्ति 1",
-      "placeholder": "A-272"
+      "label": "पता पंक्ति 1"
     },
     "line2": {
-      "label": "पता पंक्ति 2",
-      "placeholder": "डिफेंस कॉलोनी"
+      "label": "पता पंक्ति 2"
     },
     "line3": {
-      "label": "पता पंक्ति 3",
-      "placeholder": "दिल्ली, 110024 भारत"
+      "label": "पता पंक्ति 3"
     }
   },
   "phone": {
diff --git a/src/i18n/locales/hi/leftSidebar/references.json b/src/i18n/locales/hi/leftSidebar/references.json
index dcb57431f..235146b3e 100644
--- a/src/i18n/locales/hi/leftSidebar/references.json
+++ b/src/i18n/locales/hi/leftSidebar/references.json
@@ -1,19 +1,14 @@
 {
   "name": {
-    "label": "नाम",
-    "placeholder": "रिचर्ड हेंड्रिक्स"
+    "label": "नाम"
   },
   "position": {
-    "label": "पद/स्थान",
-    "placeholder": "सी ई ओ, Pied Piper"
+    "label": "पद/स्थान"
   },
   "phone": {
     "label": "फोन नंबर"
   },
   "email": {
     "label": "ईमेल पता"
-  },
-  "description": {
-    "placeholder": "आप इस बारे में लिख सकते हैं कि आपने और संपर्क ने परियोजना पर एक साथ कैसे काम किया।"
   }
 }
diff --git a/src/i18n/locales/hi/leftSidebar/work.json b/src/i18n/locales/hi/leftSidebar/work.json
index c9576e973..dd7b22bf1 100644
--- a/src/i18n/locales/hi/leftSidebar/work.json
+++ b/src/i18n/locales/hi/leftSidebar/work.json
@@ -1,13 +1,8 @@
 {
   "name": {
-    "label": "नाम",
-    "placeholder": "अमेज़ॅन"
+    "label": "नाम"
   },
   "role": {
-    "label": "भूमिका",
-    "placeholder": "फुल स्टैक वेब डेवलपर"
-  },
-  "description": {
-    "placeholder": "आप कंपनी में काम करने के दौरान आपके द्वारा बताई गई चीजों के बारे में लिख सकते हैं और आप किस परियोजना का हिस्सा थे।"
+    "label": "भूमिका"
   }
 }
diff --git a/src/i18n/locales/hi/rightSidebar/about.json b/src/i18n/locales/hi/rightSidebar/about.json
index 567e5658a..573de5a90 100644
--- a/src/i18n/locales/hi/rightSidebar/about.json
+++ b/src/i18n/locales/hi/rightSidebar/about.json
@@ -2,7 +2,7 @@
   "title": "हमारे बारे में",
   "documentation": {
     "heading": "प्रलेखन",
-    "body": "एप्लिकेशन के बारे में अधिक जानना चाहते हैं? क्या यह अच्छा नहीं होगा अगर आपके स्थानीय मशीन पर इसे स्थापित करने के लिए एक गाइड था? परियोजना में योगदान करने के बारे में जानकारी चाहिए? आगे नहीं देखो, वहाँ व्यापक प्रलेखन सिर्फ तुम्हारे लिए बनाया गया है।",
+    "body": "एप्लिकेशन के बारे में अधिक जानना चाहते हैं? ऐप में योगदान करने के बारे में जानकारी चाहिए? आगे नहीं, बस आपके लिए एक व्यापक गाइड बनाया गया है।",
     "buttons": {
       "documentation": "प्रलेखन"
     }
@@ -30,7 +30,7 @@
     }
   },
   "footer": {
-    "credit": "रिएक्टिव रिज्यूमे <1>Amruth Pillai<1> की एक परियोजना है।",
+    "credit": "<1>अमृत पिल्लई</1> द्वारा प्यार से बनाया गया",
     "thanks": "रिएक्टिव रिज्यूमे का उपयोग करने के लिए धन्यवाद"
   }
 }
diff --git a/src/i18n/locales/hi/rightSidebar/actions.json b/src/i18n/locales/hi/rightSidebar/actions.json
index af5ec4e3e..8ad5be146 100644
--- a/src/i18n/locales/hi/rightSidebar/actions.json
+++ b/src/i18n/locales/hi/rightSidebar/actions.json
@@ -9,12 +9,11 @@
       "export": "निर्यात"
     }
   },
-  "printResume": {
-    "heading": "अपना बायोडाटा प्रिंट करें",
-    "body": "आप तुरंत एक पीडीएफ उत्पन्न करने के लिए नीचे दिए गए बटन पर क्लिक कर सकते हैं। इसके अलावा, आप <1>Cmd/Ctrl + P</1> का भी उपयोग कर सकते हैं, लेकिन इसके अलग-अलग प्रभाव होंगे।",
+  "downloadResume": {
+    "heading": "अपना रिज्यूमे डाउनलोड करें",
+    "body": "आप अपने रेज़्यूमे का पीडीएफ तुरंत डाउनलोड करने के लिए नीचे दिए गए बटन पर क्लिक कर सकते हैं। सर्वोत्तम परिणामों के लिए, कृपया नवीनतम Google Chrome का उपयोग करें।",
     "buttons": {
-      "export": "निर्यात",
-      "print": "प्रिंट"
+      "saveAsPdf": "डाउनलोड पीडीऍफ़"
     }
   },
   "loadDemoData": {
diff --git a/src/i18n/locales/kn/app/app.json b/src/i18n/locales/kn/app/app.json
index a581fca19..d083743ac 100644
--- a/src/i18n/locales/kn/app/app.json
+++ b/src/i18n/locales/kn/app/app.json
@@ -1,16 +1,11 @@
 {
-  "heading": {
-    "placeholder": "ತಲೆಬರಹ"
-  },
   "item": {
     "add": "{{- heading}} ಸೇರಿಸಿ",
     "startDate": {
-      "label": "ಪ್ರಾರಂಭ ದಿನಾಂಕ",
-      "placeholder": "ಮಾರ್ಚ್ 2018"
+      "label": "ಪ್ರಾರಂಭ ದಿನಾಂಕ"
     },
     "endDate": {
-      "label": "ಅಂತಿಮ ದಿನಾಂಕ",
-      "placeholder": "ಮಾರ್ಚ್ 2022"
+      "label": "ಅಂತಿಮ ದಿನಾಂಕ"
     },
     "description": {
       "label": "ವಿವರಣೆ"
diff --git a/src/i18n/locales/kn/leftSidebar/awards.json b/src/i18n/locales/kn/leftSidebar/awards.json
index 543edc83e..32365b6b9 100644
--- a/src/i18n/locales/kn/leftSidebar/awards.json
+++ b/src/i18n/locales/kn/leftSidebar/awards.json
@@ -1,13 +1,8 @@
 {
   "title": {
-    "label": "ಶೀರ್ಷಿಕೆ",
-    "placeholder": "ಗಣಿತ ಮತ್ತು ವಿಜ್ಞಾನ ಒಲಿಂಪಿಯಾಡ್"
+    "label": "ಶೀರ್ಷಿಕೆ"
   },
   "subtitle": {
-    "label": "ಉಪಶೀರ್ಷಿಕೆ",
-    "placeholder": "ಪ್ರಥಮ ಸ್ಥಾನ, ಅಂತರರಾಷ್ಟ್ರೀಯ ಮಟ್ಟ"
-  },
-  "description": {
-    "placeholder": "ನಿಮಗೆ ಯಾವ ಗುಣಗಳು ಪ್ರಶಸ್ತಿ ನೀಡಿವೆ ಎಂಬುದರ ಕುರಿತು ನೀವು ಬರೆಯಬಹುದು."
+    "label": "ಉಪಶೀರ್ಷಿಕೆ"
   }
 }
diff --git a/src/i18n/locales/kn/leftSidebar/certifications.json b/src/i18n/locales/kn/leftSidebar/certifications.json
index 199dfebfd..b0600b543 100644
--- a/src/i18n/locales/kn/leftSidebar/certifications.json
+++ b/src/i18n/locales/kn/leftSidebar/certifications.json
@@ -1,13 +1,8 @@
 {
   "title": {
-    "label": "ಶೀರ್ಷಿಕೆ",
-    "placeholder": "ಆಂಡ್ರಾಯ್ಡ್ ಡೆವಲಪ್ಮೆಂಟ್ ನ್ಯಾನೊಡೆಗ್ರೀ"
+    "label": "ಹೆಸರು"
   },
   "subtitle": {
-    "label": "ಉಪಶೀರ್ಷಿಕೆ",
-    "placeholder": "ಉದಾಸಿಟಿ"
-  },
-  "description": {
-    "placeholder": "ನಿಮ್ಮ ಪ್ರಮಾಣೀಕರಣ ಕಾರ್ಯಕ್ರಮದಿಂದ ನೀವು ಕಲಿತದ್ದನ್ನು ನೀವು ಬರೆಯಬಹುದು."
+    "label": "ಪ್ರಾಧಿಕಾರ"
   }
 }
diff --git a/src/i18n/locales/kn/leftSidebar/education.json b/src/i18n/locales/kn/leftSidebar/education.json
index 5c43cb0ae..284abfc2d 100644
--- a/src/i18n/locales/kn/leftSidebar/education.json
+++ b/src/i18n/locales/kn/leftSidebar/education.json
@@ -1,16 +1,11 @@
 {
   "name": {
-    "label": "ಹೆಸರು",
-    "placeholder": "ಹಾರ್ವರ್ಡ್ ವಿಶ್ವವಿದ್ಯಾಲಯ"
+    "label": "ಹೆಸರು"
   },
   "major": {
-    "label": "ಅಧ್ಯಯನ",
-    "placeholder": "ಕಂಪ್ಯೂಟರ್ ವಿಜ್ಞಾನದಲ್ಲಿ ಸ್ನಾತಕೋತ್ತರ"
+    "label": "ಅಧ್ಯಯನ"
   },
   "grade": {
     "label": "ಗ್ರೇಡ್"
-  },
-  "description": {
-    "placeholder": "ಈ ಶಾಲೆಯಲ್ಲಿ ಅಧ್ಯಯನ ಮಾಡುವಾಗ ನೀವು ಮಾಡಿದ ಯೋಜನೆಗಳು ಅಥವಾ ವಿಶೇಷ ತರಗತಿಗಳ ಬಗ್ಗೆ ನೀವು ಬರೆಯಬಹುದು."
   }
 }
diff --git a/src/i18n/locales/kn/leftSidebar/extras.json b/src/i18n/locales/kn/leftSidebar/extras.json
index d8d422ba3..a50e6532a 100644
--- a/src/i18n/locales/kn/leftSidebar/extras.json
+++ b/src/i18n/locales/kn/leftSidebar/extras.json
@@ -1,10 +1,8 @@
 {
   "key": {
-    "label": "ಕೀ",
-    "placeholder": "ಹುಟ್ತಿದ ದಿನ"
+    "label": "ಕೀ"
   },
   "value": {
-    "label": "ಮೌಲ್ಯ",
-    "placeholder": "6 ಆಗಸ್ಟ್ 1995"
+    "label": "ಮೌಲ್ಯ"
   }
 }
diff --git a/src/i18n/locales/kn/leftSidebar/languages.json b/src/i18n/locales/kn/leftSidebar/languages.json
index aaaf5d9c0..0e500386b 100644
--- a/src/i18n/locales/kn/leftSidebar/languages.json
+++ b/src/i18n/locales/kn/leftSidebar/languages.json
@@ -1,7 +1,6 @@
 {
   "key": {
-    "label": "ಕೀ",
-    "placeholder": "ಕನ್ನಡ"
+    "label": "ಹೆಸರು"
   },
   "rating": {
     "label": "ರೇಟಿಂಗ್"
diff --git a/src/i18n/locales/kn/leftSidebar/objective.json b/src/i18n/locales/kn/leftSidebar/objective.json
index 81ab7f772..db0cf204c 100644
--- a/src/i18n/locales/kn/leftSidebar/objective.json
+++ b/src/i18n/locales/kn/leftSidebar/objective.json
@@ -1,6 +1,5 @@
 {
   "objective": {
-    "label": "ಉದ್ದೇಶ",
-    "placeholder": "ಸಂಸ್ಥೆಯ ಬೆಳವಣಿಗೆಗೆ ನನ್ನ ತಾಂತ್ರಿಕ, ಡೇಟಾಬೇಸ್ ಮತ್ತು ನಿರ್ವಹಣಾ ಕೌಶಲ್ಯಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳಲು ಮತ್ತು ಐಟಿ ಕ್ಷೇತ್ರದಲ್ಲಿ ಹೊಸ ಮತ್ತು ಉದಯೋನ್ಮುಖ ಪ್ರವೃತ್ತಿಗಳ ಬಗ್ಗೆ ನನ್ನ ಜ್ಞಾನವನ್ನು ಹೆಚ್ಚಿಸಲು ಪ್ರತಿಷ್ಠಿತ ಸಂಸ್ಥೆಯಲ್ಲಿ ಸವಾಲಿನ ಪಾತ್ರವನ್ನು ಹುಡುಕುತ್ತಿದ್ದೇನೆ."
+    "label": "ಉದ್ದೇಶ"
   }
 }
diff --git a/src/i18n/locales/kn/leftSidebar/profile.json b/src/i18n/locales/kn/leftSidebar/profile.json
index 4bdf4f95f..1fea21f13 100644
--- a/src/i18n/locales/kn/leftSidebar/profile.json
+++ b/src/i18n/locales/kn/leftSidebar/profile.json
@@ -3,29 +3,24 @@
     "label": "ಫೋಟೋ URL"
   },
   "firstName": {
-    "label": "ಮೊದಲ ಹೆಸರು",
-    "placeholder": "ಶ್ರೀರಾಮ್"
+    "label": "ಮೊದಲ ಹೆಸರು"
   },
   "lastName": {
-    "label": "ಕೊನೆಯ ಹೆಸರು",
-    "placeholder": "ಶೆಟ್ಟಿ"
+    "label": "ಕೊನೆಯ ಹೆಸರು"
   },
   "subtitle": {
-    "label": "ಉಪಶೀರ್ಷಿಕೆ",
-    "placeholder": "ಫುಲ್ ಸ್ಟಾಕ್ ವೆಬ್ ಡೆವಲಪರ್"
+    "label": "ಉಪಶೀರ್ಷಿಕೆ"
   },
   "address": {
+    "label": "ವಿಳಾಸ",
     "line1": {
-      "label": "ವಿಳಾಸ ಸಾಲು 1",
-      "placeholder": "ಪಲ್ಲಾಡಿಯಮ್ ಕಾಂಪ್ಲೆಕ್ಸ್"
+      "label": "ವಿಳಾಸ ಸಾಲು 1"
     },
     "line2": {
-      "label": "ವಿಳಾಸ ಸಾಲು 2",
-      "placeholder": "14 ನೇ ಕ್ರಾಸ್, ಎಂಜಿ ರಸ್ತೆ"
+      "label": "ವಿಳಾಸ ಸಾಲು 2"
     },
     "line3": {
-      "label": "ವಿಳಾಸ ಸಾಲು 3",
-      "placeholder": "ಬೆಂಗಳೂರು, 560061 ಭಾರತ"
+      "label": "ವಿಳಾಸ ಸಾಲು 3"
     }
   },
   "phone": {
diff --git a/src/i18n/locales/kn/leftSidebar/references.json b/src/i18n/locales/kn/leftSidebar/references.json
index 40f650555..4bf876ac2 100644
--- a/src/i18n/locales/kn/leftSidebar/references.json
+++ b/src/i18n/locales/kn/leftSidebar/references.json
@@ -1,19 +1,14 @@
 {
   "name": {
-    "label": "ಹೆಸರು",
-    "placeholder": "ಸಂತೋಷ್ ಸುಬ್ರಮಣ್ಯಂ"
+    "label": "ಹೆಸರು"
   },
   "position": {
-    "label": "ಸ್ಥಾನ",
-    "placeholder": "ಸಿಇಒ, ಪೈಡ್ ಪೈಪರ್"
+    "label": "ಸ್ಥಾನ"
   },
   "phone": {
     "label": "ದೂರವಾಣಿ ಸಂಖ್ಯೆ"
   },
   "email": {
     "label": "ಇಮೇಲ್ ವಿಳಾಸ"
-  },
-  "description": {
-    "placeholder": "ನೀವು ಮತ್ತು ಉಲ್ಲೇಖ ಸಂಪರ್ಕವು ಹೇಗೆ ಒಟ್ಟಿಗೆ ಕೆಲಸ ಮಾಡಿದೆ ಮತ್ತು ನೀವು ಯಾವ ಯೋಜನೆಯ ಭಾಗವಾಗಿದ್ದೀರಿ ಎಂಬುದರ ಕುರಿತು ನೀವು ಬರೆಯಬಹುದು."
   }
 }
diff --git a/src/i18n/locales/kn/leftSidebar/work.json b/src/i18n/locales/kn/leftSidebar/work.json
index 5079d1e3d..b200e3840 100644
--- a/src/i18n/locales/kn/leftSidebar/work.json
+++ b/src/i18n/locales/kn/leftSidebar/work.json
@@ -1,13 +1,8 @@
 {
   "name": {
-    "label": "ಹೆಸರು",
-    "placeholder": "ಅಮೆಜಾನ್"
+    "label": "ಹೆಸರು"
   },
   "role": {
-    "label": "ಸ್ಥಾನ",
-    "placeholder": "ಫುಲ್ ಸ್ಟಾಕ್ ವೆಬ್ ಡೆವಲಪರ್"
-  },
-  "description": {
-    "placeholder": "ಕಂಪನಿಯಲ್ಲಿ ಕೆಲಸ ಮಾಡುವಾಗ ನೀವು ಏನು ಪರಿಣತಿ ಹೊಂದಿದ್ದೀರಿ ಮತ್ತು ನೀವು ಯಾವ ಯೋಜನೆಯ ಭಾಗವಾಗಿದ್ದೀರಿ ಎಂಬುದರ ಕುರಿತು ನೀವು ಬರೆಯಬಹುದು."
+    "label": "ಸ್ಥಾನ"
   }
 }
diff --git a/src/i18n/locales/kn/rightSidebar/about.json b/src/i18n/locales/kn/rightSidebar/about.json
index b5affa2ae..42294566c 100644
--- a/src/i18n/locales/kn/rightSidebar/about.json
+++ b/src/i18n/locales/kn/rightSidebar/about.json
@@ -2,7 +2,7 @@
   "title": "ಅಪ್ಲಿಕೇಶನ್ ಬಗ್ಗೆ",
   "documentation": {
     "heading": "ದಸ್ತಾವೇಜನ್ನು",
-    "body": "ಅಪ್ಲಿಕೇಶನ್ ಬಗ್ಗೆ ಇನ್ನಷ್ಟು ತಿಳಿದುಕೊಳ್ಳಲು ಬಯಸುವಿರಾ? ನಿಮ್ಮ ಸ್ಥಳೀಯ ಯಂತ್ರದಲ್ಲಿ ಅದನ್ನು ಹೊಂದಿಸಲು ಮಾರ್ಗದರ್ಶಿ ಇದ್ದರೆ ಅದು ಚೆನ್ನಾಗಿರುವುದಿಲ್ಲವೇ? ಯೋಜನೆಗೆ ಹೇಗೆ ಕೊಡುಗೆ ನೀಡಬೇಕು ಎಂಬ ಬಗ್ಗೆ ಮಾಹಿತಿ ಬೇಕೇ? ಮುಂದೆ ನೋಡಬೇಡಿ, ನಿಮಗಾಗಿ ಮಾಡಿದ ಸಮಗ್ರ ದಾಖಲಾತಿ ಇದೆ.",
+    "body": "ಅಪ್ಲಿಕೇಶನ್ ಬಗ್ಗೆ ಇನ್ನಷ್ಟು ತಿಳಿದುಕೊಳ್ಳಲು ಬಯಸುವಿರಾ? ಅಪ್ಲಿಕೇಶನ್‌ಗೆ ಹೇಗೆ ಕೊಡುಗೆ ನೀಡಬೇಕು ಎಂಬುದರ ಕುರಿತು ಮಾಹಿತಿ ಬೇಕೇ? ಮುಂದೆ ನೋಡಬೇಡಿ, ನಿಮಗಾಗಿ ಮಾಡಿದ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ ಇದೆ.",
     "buttons": {
       "documentation": "ದಸ್ತಾವೇಜನ್ನು"
     }
@@ -30,7 +30,7 @@
     }
   },
   "footer": {
-    "credit": "ರಿಯಾಕ್ಟಿವ್ ರೆಸುಮೇ <1>ಅಮೃತ್ ಪಿಳ್ಳೈ</ 1> ಅವರ ಯೋಜನೆಯಾಗಿದೆ.",
+    "credit": "<1>ಅಮೃತ್ ಪಿಳ್ಳೈ</1> ಅವರಿಂದ ಪ್ರೀತಿಯಿಂದ ಮಾಡಲ್ಪಟ್ಟಿದೆ",
     "thanks": "ರಿಯಾಕ್ಟಿವ್ ರೆಸುಮೇ ಬಳಸಿದ್ದಕ್ಕಾಗಿ ಧನ್ಯವಾದಗಳು!"
   }
 }
diff --git a/src/i18n/locales/kn/rightSidebar/actions.json b/src/i18n/locales/kn/rightSidebar/actions.json
index 77771d776..8d4bf9f21 100644
--- a/src/i18n/locales/kn/rightSidebar/actions.json
+++ b/src/i18n/locales/kn/rightSidebar/actions.json
@@ -9,12 +9,11 @@
       "export": "ರಫ್ತು"
     }
   },
-  "printResume": {
-    "heading": "ನಿಮ್ಮ ರೇಸುಮೆಯನ್ನು ಮುದ್ರಿಸಿ",
-    "body": "ಪಿಡಿಎಫ್ ಅನ್ನು ತ್ವರಿತವಾಗಿ ರಚಿಸಲು ನೀವು ಕೆಳಗಿನ ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಬಹುದು. ಅಲ್ಲದೆ, ನೀವು <1>Cmd/Ctrl + P</1> ಅನ್ನು ಸಹ ಬಳಸಬಹುದು ಆದರೆ ಅದು ವಿಭಿನ್ನ ಪರಿಣಾಮಗಳನ್ನು ಬೀರುತ್ತದೆ.",
+  "downloadResume": {
+    "heading": "ನಿಮ್ಮ ರೇಸುಮೇ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ",
+    "body": "ನಿಮ್ಮ ರೇಸುಮೇಯ ಪಿಡಿಎಫ್ ಅನ್ನು ತಕ್ಷಣ ಡೌನ್‌ಲೋಡ್ ಮಾಡಲು ನೀವು ಕೆಳಗಿನ ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಬಹುದು. ಉತ್ತಮ ಫಲಿತಾಂಶಗಳಿಗಾಗಿ, ದಯವಿಟ್ಟು ಇತ್ತೀಚಿನ Google Chrome ಅನ್ನು ಬಳಸಿ.",
     "buttons": {
-      "export": "ರಫ್ತು",
-      "print": "ಮುದ್ರಿಸಿ"
+      "saveAsPdf": "ಪಿಡಿಎಫ್ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ"
     }
   },
   "loadDemoData": {
diff --git a/src/i18n/locales/zh/app/app.json b/src/i18n/locales/zh/app/app.json
index 28497d828..809292c31 100644
--- a/src/i18n/locales/zh/app/app.json
+++ b/src/i18n/locales/zh/app/app.json
@@ -1,16 +1,11 @@
 {
-  "heading": {
-    "placeholder": "标题"
-  },
   "item": {
     "add": "添加 {{- heading}}",
     "startDate": {
-      "label": "开始日期",
-      "placeholder": "2018 年 3 月"
+      "label": "开始日期"
     },
     "endDate": {
-      "label": "结束日期",
-      "placeholder": "2022 年 3 月"
+      "label": "结束日期"
     },
     "description": {
       "label": "说明"
diff --git a/src/i18n/locales/zh/leftSidebar/awards.json b/src/i18n/locales/zh/leftSidebar/awards.json
index 9279463e4..7e0e9e00f 100644
--- a/src/i18n/locales/zh/leftSidebar/awards.json
+++ b/src/i18n/locales/zh/leftSidebar/awards.json
@@ -1,13 +1,8 @@
 {
   "title": {
-    "label": "名称",
-    "placeholder": "数学与科学奥林匹克"
+    "label": "名称"
   },
   "subtitle": {
-    "label": "奖项",
-    "placeholder": "第一名，国际赛"
-  },
-  "description": {
-    "placeholder": "你可以说明一下成功获得这个荣誉的原因。"
+    "label": "奖项"
   }
 }
diff --git a/src/i18n/locales/zh/leftSidebar/certifications.json b/src/i18n/locales/zh/leftSidebar/certifications.json
index 56ee2ef6a..9bc0ed75b 100644
--- a/src/i18n/locales/zh/leftSidebar/certifications.json
+++ b/src/i18n/locales/zh/leftSidebar/certifications.json
@@ -1,13 +1,8 @@
 {
   "title": {
-    "label": "名称",
-    "placeholder": "安卓开发纳米证书"
+    "label": "学校"
   },
   "subtitle": {
-    "label": "签发单位",
-    "placeholder": "优达学城"
-  },
-  "description": {
-    "placeholder": "你可以写关于你在成功获得证书过程中所学到的技能。"
+    "label": "颁发机构"
   }
 }
diff --git a/src/i18n/locales/zh/leftSidebar/education.json b/src/i18n/locales/zh/leftSidebar/education.json
index 515f8213d..284c2580a 100644
--- a/src/i18n/locales/zh/leftSidebar/education.json
+++ b/src/i18n/locales/zh/leftSidebar/education.json
@@ -1,16 +1,11 @@
 {
   "name": {
-    "label": "学校",
-    "placeholder": "哈弗大学"
+    "label": "学校"
   },
   "major": {
-    "label": "主修课程",
-    "placeholder": "计算机科学硕士"
+    "label": "主修课程"
   },
   "grade": {
     "label": "等级"
-  },
-  "description": {
-    "placeholder": "你可以写关于你在这所学校学习的项目和进阶的课程。"
   }
 }
diff --git a/src/i18n/locales/zh/leftSidebar/extras.json b/src/i18n/locales/zh/leftSidebar/extras.json
index ddc0a59bb..1e3e0ba2f 100644
--- a/src/i18n/locales/zh/leftSidebar/extras.json
+++ b/src/i18n/locales/zh/leftSidebar/extras.json
@@ -1,10 +1,8 @@
 {
   "key": {
-    "label": "名称",
-    "placeholder": "出生日期"
+    "label": "名称"
   },
   "value": {
-    "label": "内容",
-    "placeholder": "1995年8月6日"
+    "label": "内容"
   }
 }
diff --git a/src/i18n/locales/zh/leftSidebar/languages.json b/src/i18n/locales/zh/leftSidebar/languages.json
index c33397926..44f7bc6ff 100644
--- a/src/i18n/locales/zh/leftSidebar/languages.json
+++ b/src/i18n/locales/zh/leftSidebar/languages.json
@@ -1,7 +1,6 @@
 {
   "key": {
-    "label": "语言",
-    "placeholder": "多斯拉克语"
+    "label": "学校"
   },
   "rating": {
     "label": "等级"
diff --git a/src/i18n/locales/zh/leftSidebar/objective.json b/src/i18n/locales/zh/leftSidebar/objective.json
index 053c4d5bd..8cfe1240e 100644
--- a/src/i18n/locales/zh/leftSidebar/objective.json
+++ b/src/i18n/locales/zh/leftSidebar/objective.json
@@ -1,6 +1,5 @@
 {
   "objective": {
-    "label": "求职意向",
-    "placeholder": "希望在一个有卓著成就的公司寻找一个富有挑战性的职位，利用我的数据库和管理技术，能够促进公司的的发展并且提高自己的技能和对新兴趋势的了解。"
+    "label": "求职意向"
   }
 }
diff --git a/src/i18n/locales/zh/leftSidebar/profile.json b/src/i18n/locales/zh/leftSidebar/profile.json
index beaabad4c..2455aec20 100644
--- a/src/i18n/locales/zh/leftSidebar/profile.json
+++ b/src/i18n/locales/zh/leftSidebar/profile.json
@@ -3,29 +3,24 @@
     "label": "照片链接"
   },
   "firstName": {
-    "label": "名",
-    "placeholder": "简"
+    "label": "名"
   },
   "lastName": {
-    "label": "姓",
-    "placeholder": "道一"
+    "label": "姓"
   },
   "subtitle": {
-    "label": "职位",
-    "placeholder": "全伐工程师"
+    "label": "职位"
   },
   "address": {
+    "label": "地址",
     "line1": {
-      "label": "地址栏 1",
-      "placeholder": "帕拉迪亩大楼"
+      "label": "地址栏 1"
     },
     "line2": {
-      "label": "地址栏 2",
-      "placeholder": "140 东 14号 街"
+      "label": "地址栏 2"
     },
     "line3": {
-      "label": "地址栏 3",
-      "placeholder": "纽约, 纽约州, 10003 美国"
+      "label": "地址栏 3"
     }
   },
   "phone": {
diff --git a/src/i18n/locales/zh/leftSidebar/references.json b/src/i18n/locales/zh/leftSidebar/references.json
index f0b903587..0a74677ad 100644
--- a/src/i18n/locales/zh/leftSidebar/references.json
+++ b/src/i18n/locales/zh/leftSidebar/references.json
@@ -1,19 +1,14 @@
 {
   "name": {
-    "label": "名字",
-    "placeholder": "理查德·亨德里克"
+    "label": "名字"
   },
   "position": {
-    "label": "职位",
-    "placeholder": "首席执行官，魔笛"
+    "label": "职位"
   },
   "phone": {
     "label": "电话号码"
   },
   "email": {
     "label": "邮箱地址"
-  },
-  "description": {
-    "placeholder": "您可以写下您和推荐人如何一起工作，以及您参与的项目。"
   }
 }
diff --git a/src/i18n/locales/zh/leftSidebar/work.json b/src/i18n/locales/zh/leftSidebar/work.json
index c132b1ba0..bb0587c5d 100644
--- a/src/i18n/locales/zh/leftSidebar/work.json
+++ b/src/i18n/locales/zh/leftSidebar/work.json
@@ -1,13 +1,8 @@
 {
   "name": {
-    "label": "公司",
-    "placeholder": "亚马逊"
+    "label": "公司"
   },
   "role": {
-    "label": "职位",
-    "placeholder": "前端工程师"
-  },
-  "description": {
-    "placeholder": "你可以写关于你在公司参与项目中所使用的技术和专业化内容。"
+    "label": "职位"
   }
 }
diff --git a/src/i18n/locales/zh/rightSidebar/about.json b/src/i18n/locales/zh/rightSidebar/about.json
index 91927bed5..bbb5cbcf4 100644
--- a/src/i18n/locales/zh/rightSidebar/about.json
+++ b/src/i18n/locales/zh/rightSidebar/about.json
@@ -2,7 +2,7 @@
   "title": "关于我们",
   "documentation": {
     "heading": "文档",
-    "body": "想要了解更多关于这个应用的信息吗？如果有一个指南可以指导你如何在本地机器上开发, 会不会更好？ 需要了解如何为项目做贡献？ 不需要烦恼，这里有一份详细的文档供你参考。",
+    "body": "想进一步了解该应用程序？ 需要有关如何为该项目做出贡献的信息？ 别无所求，这里有专门为您准备的综合指南。",
     "buttons": {
       "documentation": "文档"
     }
@@ -30,7 +30,7 @@
     }
   },
   "footer": {
-    "credit": "Reactive Resume 是由 <1>Amruth Pillai</1> 创建的项目。",
+    "credit": "<1>Amruth Pillai</1> 用爱制造",
     "thanks": "感谢您使用 Reactive Resume！"
   }
 }
diff --git a/src/i18n/locales/zh/rightSidebar/actions.json b/src/i18n/locales/zh/rightSidebar/actions.json
index 646d16fcf..017095b51 100644
--- a/src/i18n/locales/zh/rightSidebar/actions.json
+++ b/src/i18n/locales/zh/rightSidebar/actions.json
@@ -9,12 +9,11 @@
       "export": "导出"
     }
   },
-  "printResume": {
-    "heading": "打印您的简历",
-    "body": "您可以点击下面的按钮立即生成 PDF 文件。 或者，您也可以使用 <1>Cmd/Ctrl + P</1>，但会产生不同的效果。",
+  "downloadResume": {
+    "heading": "下载简历",
+    "body": "您可以单击下面的按钮立即下载简历的PDF版本。 为了获得最佳效果，请使用最新版本的Google Chrome。",
     "buttons": {
-      "export": "导出",
-      "print": "打印"
+      "saveAsPdf": "保存为 PDF"
     }
   },
   "loadDemoData": {
diff --git a/src/i18n/locales/zh/rightSidebar/colors.json b/src/i18n/locales/zh/rightSidebar/colors.json
index 6863fe37e..309d7c861 100644
--- a/src/i18n/locales/zh/rightSidebar/colors.json
+++ b/src/i18n/locales/zh/rightSidebar/colors.json
@@ -2,6 +2,6 @@
   "title": "颜色",
   "colorOptions": "颜色选项",
   "primaryColor": "主色调",
-  "accentColor": "强调色",
+  "accentColor": "辅助颜色",
   "clipboardCopyAction": "{{color}} 已被复制到剪贴板。"
 }
diff --git a/src/i18n/source/app/app.json b/src/i18n/source/app/app.json
index 861e3ad5f..d491a136d 100644
--- a/src/i18n/source/app/app.json
+++ b/src/i18n/source/app/app.json
@@ -1,16 +1,11 @@
 {
-  "heading": {
-    "placeholder": "Heading"
-  },
   "item": {
     "add": "Add {{- heading}}",
     "startDate": {
-      "label": "Start Date",
-      "placeholder": "March 2018"
+      "label": "Start Date"
     },
     "endDate": {
-      "label": "End Date",
-      "placeholder": "March 2022"
+      "label": "End Date"
     },
     "description": {
       "label": "Description"
diff --git a/src/i18n/source/index.js b/src/i18n/source/index.js
index 943ca6737..d96f42624 100644
--- a/src/i18n/source/index.js
+++ b/src/i18n/source/index.js
@@ -3,7 +3,9 @@ import leftSidebar from './leftSidebar';
 import rightSidebar from './rightSidebar';
 
 export default {
-  app,
-  leftSidebar,
-  rightSidebar,
+  en: {
+    app,
+    leftSidebar,
+    rightSidebar,
+  },
 };
diff --git a/src/i18n/source/leftSidebar/awards.json b/src/i18n/source/leftSidebar/awards.json
index 4222ec124..4a52c12a9 100644
--- a/src/i18n/source/leftSidebar/awards.json
+++ b/src/i18n/source/leftSidebar/awards.json
@@ -1,13 +1,8 @@
 {
   "title": {
-    "label": "Title",
-    "placeholder": "Math & Science Olympiad"
+    "label": "Title"
   },
   "subtitle": {
-    "label": "Subtitle",
-    "placeholder": "First Place, International Level"
-  },
-  "description": {
-    "placeholder": "You can write about what qualities made you succeed in getting this award."
+    "label": "Subtitle"
   }
 }
diff --git a/src/i18n/source/leftSidebar/certifications.json b/src/i18n/source/leftSidebar/certifications.json
index 92f9dc164..e6e0effa2 100644
--- a/src/i18n/source/leftSidebar/certifications.json
+++ b/src/i18n/source/leftSidebar/certifications.json
@@ -1,13 +1,8 @@
 {
   "title": {
-    "label": "Title",
-    "placeholder": "Android Development Nanodegree"
+    "label": "Name"
   },
   "subtitle": {
-    "label": "Subtitle",
-    "placeholder": "Udacity"
-  },
-  "description": {
-    "placeholder": "You can write about what you learned from your certification program."
+    "label": "Authority"
   }
 }
diff --git a/src/i18n/source/leftSidebar/education.json b/src/i18n/source/leftSidebar/education.json
index 231004b26..346748c7e 100644
--- a/src/i18n/source/leftSidebar/education.json
+++ b/src/i18n/source/leftSidebar/education.json
@@ -1,16 +1,11 @@
 {
   "name": {
-    "label": "Name",
-    "placeholder": "Harvard University"
+    "label": "Name"
   },
   "major": {
-    "label": "Major",
-    "placeholder": "Masters in Computer Science"
+    "label": "Major"
   },
   "grade": {
     "label": "Grade"
-  },
-  "description": {
-    "placeholder": "You can write about projects or special credit classes that you took while studying at this school."
   }
 }
diff --git a/src/i18n/source/leftSidebar/extras.json b/src/i18n/source/leftSidebar/extras.json
index 7afc7c067..59950d61a 100644
--- a/src/i18n/source/leftSidebar/extras.json
+++ b/src/i18n/source/leftSidebar/extras.json
@@ -1,10 +1,8 @@
 {
   "key": {
-    "label": "Key",
-    "placeholder": "Date of Birth"
+    "label": "Key"
   },
   "value": {
-    "label": "Value",
-    "placeholder": "6th August 1995"
+    "label": "Value"
   }
 }
diff --git a/src/i18n/source/leftSidebar/index.js b/src/i18n/source/leftSidebar/index.js
index a13d6a3e3..fea537335 100644
--- a/src/i18n/source/leftSidebar/index.js
+++ b/src/i18n/source/leftSidebar/index.js
@@ -4,7 +4,6 @@ import work from './work.json';
 import education from './education.json';
 import awards from './awards.json';
 import certifications from './certifications.json';
-import skills from './skills.json';
 import languages from './languages.json';
 import references from './references.json';
 import extras from './extras.json';
@@ -16,7 +15,6 @@ export default {
   education,
   awards,
   certifications,
-  skills,
   languages,
   references,
   extras,
diff --git a/src/i18n/source/leftSidebar/languages.json b/src/i18n/source/leftSidebar/languages.json
index fc5de101a..c0167dd71 100644
--- a/src/i18n/source/leftSidebar/languages.json
+++ b/src/i18n/source/leftSidebar/languages.json
@@ -1,7 +1,6 @@
 {
   "key": {
-    "label": "Key",
-    "placeholder": "Dothraki"
+    "label": "Name"
   },
   "rating": {
     "label": "Rating"
diff --git a/src/i18n/source/leftSidebar/objective.json b/src/i18n/source/leftSidebar/objective.json
index 8cb4f70da..329804798 100644
--- a/src/i18n/source/leftSidebar/objective.json
+++ b/src/i18n/source/leftSidebar/objective.json
@@ -1,6 +1,5 @@
 {
   "objective": {
-    "label": "Objective",
-    "placeholder": "Looking for a challenging role in a reputable organization to utilize my technical, database, and management skills for the growth of the organization as well as to enhance my knowledge about new and emerging trends in the IT sector."
+    "label": "Objective"
   }
 }
diff --git a/src/i18n/source/leftSidebar/profile.json b/src/i18n/source/leftSidebar/profile.json
index b7f889c26..6f109ed6a 100644
--- a/src/i18n/source/leftSidebar/profile.json
+++ b/src/i18n/source/leftSidebar/profile.json
@@ -3,29 +3,24 @@
     "label": "Photo URL"
   },
   "firstName": {
-    "label": "First Name",
-    "placeholder": "Jane"
+    "label": "First Name"
   },
   "lastName": {
-    "label": "Last Name",
-    "placeholder": "Doe"
+    "label": "Last Name"
   },
   "subtitle": {
-    "label": "Subtitle",
-    "placeholder": "Full Stack Web Developer"
+    "label": "Subtitle"
   },
   "address": {
+    "label": "Address",
     "line1": {
-      "label": "Address Line 1",
-      "placeholder": "Palladium Complex"
+      "label": "Address Line 1"
     },
     "line2": {
-      "label": "Address Line 2",
-      "placeholder": "140 E 14th St"
+      "label": "Address Line 2"
     },
     "line3": {
-      "label": "Address Line 3",
-      "placeholder": "New York, NY 10003 USA"
+      "label": "Address Line 3"
     }
   },
   "phone": {
diff --git a/src/i18n/source/leftSidebar/references.json b/src/i18n/source/leftSidebar/references.json
index 88241575d..f7f2bf831 100644
--- a/src/i18n/source/leftSidebar/references.json
+++ b/src/i18n/source/leftSidebar/references.json
@@ -1,19 +1,14 @@
 {
   "name": {
-    "label": "Name",
-    "placeholder": "Richard Hendricks"
+    "label": "Name"
   },
   "position": {
-    "label": "Position",
-    "placeholder": "CEO, Pied Piper"
+    "label": "Position"
   },
   "phone": {
     "label": "Phone Number"
   },
   "email": {
     "label": "Email Address"
-  },
-  "description": {
-    "placeholder": "You can write about how you and the reference contact worked together and which projects you were a part of."
   }
 }
diff --git a/src/i18n/source/leftSidebar/skills.json b/src/i18n/source/leftSidebar/skills.json
deleted file mode 100644
index 5f178d9b6..000000000
--- a/src/i18n/source/leftSidebar/skills.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "item": {
-    "placeholder": "Cooking"
-  }
-}
diff --git a/src/i18n/source/leftSidebar/work.json b/src/i18n/source/leftSidebar/work.json
index 6d115c6e3..9859754c3 100644
--- a/src/i18n/source/leftSidebar/work.json
+++ b/src/i18n/source/leftSidebar/work.json
@@ -1,13 +1,8 @@
 {
   "name": {
-    "label": "Name",
-    "placeholder": "Amazon"
+    "label": "Name"
   },
   "role": {
-    "label": "Role",
-    "placeholder": "Front-end Web Developer"
-  },
-  "description": {
-    "placeholder": "You can write about what you specialized in while working at the company and what projects you were a part of."
+    "label": "Role"
   }
 }
diff --git a/src/i18n/source/rightSidebar/about.json b/src/i18n/source/rightSidebar/about.json
index cac678ad8..c5538e17e 100644
--- a/src/i18n/source/rightSidebar/about.json
+++ b/src/i18n/source/rightSidebar/about.json
@@ -2,7 +2,7 @@
   "title": "About",
   "documentation": {
     "heading": "Documentation",
-    "body": "Want to know more about the app? Wouldn't it be nice if there was a guide to setting it up on your local machine? Need information on how to contribute to the project? Look no further, there's comprehensive documentation made just for you.",
+    "body": "Want to know more about the app? Need information on how to contribute to the project? Look no further, there's a comprehensive guide made just for you.",
     "buttons": {
       "documentation": "Documentation"
     }
@@ -30,7 +30,7 @@
     }
   },
   "footer": {
-    "credit": "Reactive Resume is a project by <1>Amruth Pillai</1>.",
+    "credit": "Made with Love by <1>Amruth Pillai</1>",
     "thanks": "Thank you for using Reactive Resume!"
   }
 }
diff --git a/src/i18n/source/rightSidebar/actions.json b/src/i18n/source/rightSidebar/actions.json
index b68187149..ae75bbd18 100644
--- a/src/i18n/source/rightSidebar/actions.json
+++ b/src/i18n/source/rightSidebar/actions.json
@@ -9,12 +9,11 @@
       "export": "Export"
     }
   },
-  "printResume": {
-    "heading": "Print Your Resume",
-    "body": "You can click on the button below to generate a PDF instantly. Alternatively, you can also use <1>Cmd/Ctrl + P</1> but it would have different effects.",
+  "downloadResume": {
+    "heading": "Download Your Resume",
+    "body": "You can click on the button below to download a PDF version of your resume instantly. For best results, please use the latest version of Google Chrome.",
     "buttons": {
-      "export": "Export",
-      "print": "Print"
+      "saveAsPdf": "Save as PDF"
     }
   },
   "loadDemoData": {
diff --git a/src/i18n/source/rightSidebar/colors.json b/src/i18n/source/rightSidebar/colors.json
index bf4accbf2..f7fff7ba5 100644
--- a/src/i18n/source/rightSidebar/colors.json
+++ b/src/i18n/source/rightSidebar/colors.json
@@ -2,6 +2,6 @@
   "title": "Colors",
   "colorOptions": "Color Options",
   "primaryColor": "Primary Color",
-  "accentColor": "Accent Color",
+  "accentColor": "Secondary Color",
   "clipboardCopyAction": "{{color}} has been copied to the clipboard."
 }
diff --git a/src/index.css b/src/index.css
index a9361314c..c578f62e1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -8,6 +8,15 @@
 @import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;600;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap');
 
+* {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+*::-webkit-scrollbar {
+  display: none;
+}
+
 html,
 body {
   height: 100%;
@@ -54,25 +63,21 @@ ul li {
 
   #tabs {
     scroll-behavior: smooth;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-  }
-
-  #tabs::-webkit-scrollbar {
-    width: 0px;
-    height: 0px;
-    background: transparent;
   }
 
   #page {
     width: 21cm;
     min-height: 29.7cm;
-    max-height: 29.7cm;
-    transform: scale(0.8);
-    transform-origin: center;
-    overflow: scroll;
     background-color: white;
   }
+
+  #pageController {
+    bottom: 25px;
+  }
+
+  #pageController > div {
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+  }
 }
 
 @page {
diff --git a/src/shared/PageController.js b/src/shared/PageController.js
new file mode 100644
index 000000000..46f8e69af
--- /dev/null
+++ b/src/shared/PageController.js
@@ -0,0 +1,58 @@
+import React, { useContext } from 'react';
+import PageContext from '../context/PageContext';
+import { saveAsPdf } from '../utils';
+
+const PageController = () => {
+  const pageContext = useContext(PageContext);
+  const { pageRef, panZoomRef } = pageContext;
+
+  const zoomIn = () => panZoomRef.current.zoomIn(2);
+  const zoomOut = () => panZoomRef.current.zoomOut(2);
+  const centerReset = () => {
+    panZoomRef.current.autoCenter(1);
+    panZoomRef.current.reset(1);
+  };
+
+  return (
+    <div
+      id="pageController"
+      className="absolute z-20 opacity-75 hover:opacity-100 transition-all duration-150"
+    >
+      <div className="px-8 border border-gray-200 rounded-full bg-white flex justify-center items-center select-none">
+        <div className="p-3 hover:bg-gray-200 cursor-pointer flex" onClick={zoomIn}>
+          <i className="material-icons">zoom_in</i>
+        </div>
+
+        <div className="p-3 hover:bg-gray-200 cursor-pointer flex" onClick={zoomOut}>
+          <i className="material-icons">zoom_out</i>
+        </div>
+
+        <div className="p-3 hover:bg-gray-200 cursor-pointer flex" onClick={centerReset}>
+          <i className="material-icons">center_focus_strong</i>
+        </div>
+
+        <div className="text-gray-400 p-3">|</div>
+
+        <div
+          className="p-3 hover:bg-gray-200 cursor-pointer flex"
+          onClick={() => saveAsPdf(pageRef, panZoomRef)}
+        >
+          <i className="material-icons">save</i>
+        </div>
+
+        <div className="text-gray-400 p-3">|</div>
+
+        <a
+          className="p-3 hover:bg-gray-200 cursor-pointer flex"
+          href="https://docs.rxresu.me/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <i className="material-icons">help_outline</i>
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default PageController;
diff --git a/src/templates/glalie/Glalie.js b/src/templates/glalie/Glalie.js
new file mode 100644
index 000000000..98bda52c6
--- /dev/null
+++ b/src/templates/glalie/Glalie.js
@@ -0,0 +1,298 @@
+import React, { useContext } from 'react';
+import ReactMarkdown from 'react-markdown';
+
+import AppContext from '../../context/AppContext';
+import { hexToRgb } from '../../utils';
+
+const Glalie = () => {
+  const context = useContext(AppContext);
+  const { state } = context;
+  const { data, theme } = state;
+
+  const { r, g, b } = hexToRgb(theme.colors.accent) || {};
+
+  const Photo = () =>
+    data.profile.photo !== '' && (
+      <img
+        className="w-40 h-40 rounded-full mx-auto"
+        src={data.profile.photo}
+        alt="Resume Photograph"
+      />
+    );
+
+  const FullName = () => (
+    <div className="text-4xl font-bold leading-none">
+      <h1>{data.profile.firstName}</h1>
+      <h1>{data.profile.lastName}</h1>
+    </div>
+  );
+
+  const Subtitle = () => (
+    <div className="tracking-wide text-xs uppercase font-medium">{data.profile.subtitle}</div>
+  );
+
+  const Divider = () => (
+    <div className="w-1/2 mx-auto my-2 border-b-2" style={{ borderColor: theme.colors.accent }} />
+  );
+
+  const ContactItem = ({ title, value }) =>
+    value && (
+      <div className="flex flex-col">
+        <h6 className="text-xs font-bold" style={{ color: theme.colors.accent }}>
+          {title}
+        </h6>
+        <p className="text-sm">{value}</p>
+      </div>
+    );
+
+  const ContactInformation = () => (
+    <div
+      className="w-full border-2 pl-4 pr-4 pb-6"
+      style={{
+        borderColor: theme.colors.accent,
+      }}
+    >
+      <div
+        className="inline-block relative px-4"
+        style={{ top: '-.9em', color: theme.colors.accent }}
+      >
+        <h2 className="flex">
+          <i className="material-icons">flare</i>
+        </h2>
+      </div>
+
+      <div className="grid grid-cols-1 row-gap-4">
+        <ContactItem title="Phone Number" value={data.profile.phone} />
+        <ContactItem title="Email Address" value={data.profile.email} />
+        <ContactItem title="Website" value={data.profile.website} />
+
+        <div className="flex flex-col">
+          <i className="material-icons text-lg" style={{ color: theme.colors.accent }}>
+            home
+          </i>
+          <p className="text-sm">{data.profile.address.line1}</p>
+          <p className="text-sm">{data.profile.address.line2}</p>
+          <p className="text-sm">{data.profile.address.line3}</p>
+        </div>
+      </div>
+    </div>
+  );
+
+  const Heading = ({ title }) => (
+    <h6
+      className="text-sm font-semibold uppercase pb-1 mb-2 border-b"
+      style={{ borderColor: theme.colors.accent, color: theme.colors.accent }}
+    >
+      {title}
+    </h6>
+  );
+
+  const Objective = () =>
+    data.objective.enable && (
+      <div>
+        <Heading title={data.objective.heading} />
+        <p className="text-sm text-justify">{data.objective.body}</p>
+      </div>
+    );
+
+  const WorkItem = x => (
+    <div key={x.title} className="mt-3">
+      <div className="flex justify-between">
+        <div>
+          <h6 className="font-semibold text-sm">{x.title}</h6>
+          <p className="text-xs opacity-75 font-medium">
+            {x.role} / {x.start} - {x.end}
+          </p>
+        </div>
+      </div>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
+    </div>
+  );
+
+  const Work = () =>
+    data.work &&
+    data.work.enable && (
+      <div>
+        <Heading title={data.work.heading} />
+        {data.work.items.filter(x => x.enable).map(WorkItem)}
+      </div>
+    );
+
+  const EducationItem = x => (
+    <div key={x.name} className="mt-3">
+      <div>
+        <h6 className="font-semibold text-xs">{x.name}</h6>
+        <p className="text-xs opacity-75">{x.major}</p>
+        <p className="text-xs opacity-75">
+          {x.start} - {x.end}
+        </p>
+      </div>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
+    </div>
+  );
+
+  const Education = () =>
+    data.education &&
+    data.education.enable && (
+      <div>
+        <Heading title={data.education.heading} />
+        <div className="grid grid-cols-2 gap-4">
+          {data.education.items.filter(x => x.enable).map(EducationItem)}
+        </div>
+      </div>
+    );
+
+  const AwardItem = x => (
+    <div key={x.title} className="mt-3 text-left">
+      <h6 className="font-semibold">{x.title}</h6>
+      <p className="text-xs">{x.subtitle}</p>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
+    </div>
+  );
+
+  const Awards = () =>
+    data.awards &&
+    data.awards.enable && (
+      <div>
+        <Heading title={data.awards.heading} />
+        {data.awards.items.filter(x => x.enable).map(AwardItem)}
+      </div>
+    );
+
+  const CertificationItem = x => (
+    <div key={x.title} className="mt-3 text-left">
+      <h6 className="font-semibold">{x.title}</h6>
+      <p className="text-xs">{x.subtitle}</p>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
+    </div>
+  );
+
+  const Certifications = () =>
+    data.certifications &&
+    data.certifications.enable && (
+      <div>
+        <Heading title={data.certifications.heading} />
+        {data.certifications.items.filter(x => x.enable).map(CertificationItem)}
+      </div>
+    );
+
+  const SkillItem = x => (
+    <li key={x} className="text-xs font-medium">
+      {x}
+    </li>
+  );
+
+  const Skills = () =>
+    data.skills &&
+    data.skills.enable && (
+      <div>
+        <Heading title={data.skills.heading} />
+        <ul className="pt-2 grid grid-cols-2 gap-3">{data.skills.items.map(SkillItem)}</ul>
+      </div>
+    );
+
+  const LanguageItem = x => (
+    <div key={x.id} className="grid grid-cols-2 items-center py-2">
+      <h6 className="text-xs font-medium text-left">{x.key}</h6>
+      <div className="flex">
+        {Array.from(Array(x.value)).map((_, i) => (
+          <i key={i} className="material-icons text-lg" style={{ color: theme.colors.accent }}>
+            star
+          </i>
+        ))}
+      </div>
+    </div>
+  );
+
+  const Languages = () =>
+    data.languages &&
+    data.languages.enable && (
+      <div>
+        <Heading title={data.languages.heading} />
+        <div className="w-3/4">{data.languages.items.filter(x => x.enable).map(LanguageItem)}</div>
+      </div>
+    );
+
+  const ReferenceItem = x => (
+    <div key={x.id} className="flex flex-col">
+      <h6 className="text-sm font-medium">{x.name}</h6>
+      <span className="text-xs">{x.position}</span>
+      <span className="text-xs">{x.phone}</span>
+      <span className="text-xs">{x.email}</span>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
+    </div>
+  );
+
+  const References = () =>
+    data.references &&
+    data.references.enable && (
+      <div>
+        <Heading title={data.references.heading} />
+        <div className="grid grid-cols-3 gap-8">
+          {data.references.items.filter(x => x.enable).map(ReferenceItem)}
+        </div>
+      </div>
+    );
+
+  const ExtraItem = x => (
+    <tr key={x.id}>
+      <td className="border font-medium px-4 py-2 text-xs">{x.key}</td>
+      <td className="border px-4 py-2 text-xs">{x.value}</td>
+    </tr>
+  );
+
+  const Extras = () =>
+    data.extras &&
+    data.extras.enable && (
+      <div>
+        <Heading title={data.extras.heading} />
+        <table className="mt-4 w-2/3 table-auto">
+          <tbody>{data.extras.items.filter(x => x.enable).map(ExtraItem)}</tbody>
+        </table>
+      </div>
+    );
+
+  return (
+    <div
+      style={{
+        fontFamily: theme.font.family,
+        backgroundColor: theme.colors.background,
+        color: theme.colors.primary,
+      }}
+    >
+      <div className="grid grid-cols-12">
+        <div
+          className="h-full col-span-4 p-8 grid grid-cols-1 row-gap-8 text-center"
+          style={{ backgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)` }}
+        >
+          <div className="grid grid-cols-1 row-gap-4">
+            <Photo />
+            <FullName />
+            <Subtitle />
+          </div>
+
+          <Divider />
+          <ContactInformation />
+          <Divider />
+
+          <Objective />
+          <Languages />
+          <Certifications />
+        </div>
+
+        <div className="col-span-8 p-8">
+          <div className="grid grid-cols-1 row-gap-6">
+            <Work />
+            <Education />
+            <Skills />
+            <Awards />
+            <References />
+            <Extras />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Glalie;
diff --git a/src/templates/glalie/index.js b/src/templates/glalie/index.js
new file mode 100644
index 000000000..10e386868
--- /dev/null
+++ b/src/templates/glalie/index.js
@@ -0,0 +1,5 @@
+import Glalie from './Glalie';
+import image from './preview.png';
+
+export const Image = image;
+export default Glalie;
diff --git a/src/templates/glalie/preview.png b/src/templates/glalie/preview.png
new file mode 100644
index 000000000..cd69f7ed2
Binary files /dev/null and b/src/templates/glalie/preview.png differ
diff --git a/src/templates/index.js b/src/templates/index.js
index 5b42cad5d..825dc8757 100644
--- a/src/templates/index.js
+++ b/src/templates/index.js
@@ -2,6 +2,7 @@ import Onyx, { Image as OnyxPreview } from './onyx';
 import Pikachu, { Image as PikachuPreview } from './pikachu';
 import Gengar, { Image as GengarPreview } from './gengar';
 import Castform, { Image as CastformPreview } from './castform';
+import Glalie, { Image as GlaliePreview } from './glalie';
 
 export default [
   {
@@ -28,4 +29,10 @@ export default [
     component: Castform,
     preview: CastformPreview,
   },
+  {
+    key: 'glalie',
+    name: 'Glalie',
+    component: Glalie,
+    preview: GlaliePreview,
+  },
 ];
diff --git a/src/utils/index.js b/src/utils/index.js
index 52b080761..135ccd851 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -1,3 +1,7 @@
+/* eslint-disable new-cap */
+import html2canvas from 'html2canvas';
+import * as jsPDF from 'jspdf';
+
 const move = (array, element, delta) => {
   const index = array.indexOf(element);
   const newIndex = index + delta;
@@ -90,4 +94,58 @@ const moveItemDown = (dispatch, key, value) => {
   saveData(dispatch);
 };
 
-export { move, hexToRgb, copyToClipboard, saveData, addItem, deleteItem, moveItemUp, moveItemDown };
+const importJson = (event, dispatch) => {
+  const fr = new FileReader();
+  fr.addEventListener('load', () => {
+    const importedObject = JSON.parse(fr.result);
+    dispatch({ type: 'import_data', payload: importedObject });
+    dispatch({ type: 'save_data' });
+  });
+  fr.readAsText(event.target.files[0]);
+};
+
+const saveAsPdf = (pageRef, panZoomRef) => {
+  panZoomRef.current.autoCenter(1);
+  panZoomRef.current.reset();
+
+  setTimeout(() => {
+    html2canvas(pageRef.current, {
+      scale: 5,
+      useCORS: true,
+      allowTaint: true,
+    }).then(canvas => {
+      const image = canvas.toDataURL('image/jpeg', 1.0);
+      const doc = new jsPDF('p', 'mm', 'a4');
+      const pageWidth = doc.internal.pageSize.getWidth();
+      const pageHeight = doc.internal.pageSize.getHeight();
+
+      const widthRatio = pageWidth / canvas.width;
+      const heightRatio = pageHeight / canvas.height;
+      const ratio = widthRatio > heightRatio ? heightRatio : widthRatio;
+
+      const canvasWidth = canvas.width * ratio;
+      const canvasHeight = canvas.height * ratio;
+
+      const marginX = (pageWidth - canvasWidth) / 2;
+      const marginY = (pageHeight - canvasHeight) / 2;
+
+      panZoomRef.current.autoCenter(0.7);
+
+      doc.addImage(image, 'JPEG', marginX, marginY, canvasWidth, canvasHeight, null, 'SLOW');
+      doc.save(`RxResume_${Date.now()}.pdf`);
+    });
+  }, 250);
+};
+
+export {
+  move,
+  hexToRgb,
+  copyToClipboard,
+  saveData,
+  addItem,
+  deleteItem,
+  moveItemUp,
+  moveItemDown,
+  importJson,
+  saveAsPdf,
+};