diff --git a/src/components/App/App.js b/src/components/App/App.js
index 5bc8d41a..9e781959 100644
--- a/src/components/App/App.js
+++ b/src/components/App/App.js
@@ -51,13 +51,17 @@ const App = () => {
             style={{ outline: 'none' }}
           >
             <div id="page" ref={pageRef} className="shadow-2xl break-words">
-              {templates.find((x) => theme.layout.toLowerCase() === x.key).component()}
+              {templates.find(x => theme.layout.toLowerCase() === x.key).component()}
             </div>
           </PanZoom>
 
           <PageController />
         </div>
 
+        <div id="printPage" className="break-words">
+          {templates.find(x => theme.layout.toLowerCase() === x.key).component()}
+        </div>
+
         <RightSidebar />
 
         <PanZoomAnimation />
diff --git a/src/i18n/source/app/app.json b/src/i18n/source/app/app.json
index 5c331825..634cecc0 100644
--- a/src/i18n/source/app/app.json
+++ b/src/i18n/source/app/app.json
@@ -29,6 +29,10 @@
         "multiPageA4": "Multi-Page A4"
       }
     },
+    "helpText": [
+      "This export method makes use of HTML canvas to convert the resume to an image and print it on a PDF, which means it will lose all selecting/parsing capabilities.",
+      "If that is important to you, please try printing the resume instead using Cmd/Ctrl + P or the print button below. The result may vary as the output is browser dependent, but it is known to work best on the latest version of Google Chrome."
+    ],
     "buttons": {
       "cancel": "Cancel",
       "saveAsPdf": "Save as PDF"
diff --git a/src/index.css b/src/index.css
index 13cfebd1..e2cf3404 100644
--- a/src/index.css
+++ b/src/index.css
@@ -99,6 +99,10 @@ input[type='range']::-webkit-slider-thumb {
     background-color: white;
   }
 
+  #printPage {
+    display: none;
+  }
+
   #pageController {
     bottom: 25px;
   }
@@ -110,7 +114,7 @@ input[type='range']::-webkit-slider-thumb {
 
 @page {
   size: A4;
-  margin: 2.5em;
+  margin: 0;
 }
 
 @media print {
@@ -122,18 +126,17 @@ input[type='range']::-webkit-slider-thumb {
     visibility: hidden;
   }
 
-  #page,
-  #page * {
+  #printPage,
+  #printPage * {
     visibility: visible;
   }
 
-  #page {
+  #printPage {
     width: 21cm;
     height: 29.7cm;
-    background-color: white;
-    box-shadow: none;
     position: absolute;
-    left: 0;
     top: 0;
+    left: 0;
+    right: 0;
   }
 }
diff --git a/src/shared/PageController.js b/src/shared/PageController.js
index 6fb030de..3b7e3584 100644
--- a/src/shared/PageController.js
+++ b/src/shared/PageController.js
@@ -33,6 +33,10 @@ const PageController = () => {
 
         <div className="text-gray-400 p-3">|</div>
 
+        <div className="p-3 hover:bg-gray-200 cursor-pointer flex" onClick={() => window.print()}>
+          <i className="material-icons">print</i>
+        </div>
+
         <div
           className="p-3 hover:bg-gray-200 cursor-pointer flex"
           onClick={() => setPrintDialogOpen(true)}
diff --git a/src/shared/PrintDialog.js b/src/shared/PrintDialog.js
index b4d5cb74..1be046be 100644
--- a/src/shared/PrintDialog.js
+++ b/src/shared/PrintDialog.js
@@ -31,7 +31,7 @@ const PrintDialog = () => {
     >
       <div
         className="centered py-8 px-12 bg-white shadow-xl rounded w-full md:w-1/3"
-        onClick={(e) => {
+        onClick={e => {
           e.stopPropagation();
           e.preventDefault();
         }}
@@ -44,7 +44,7 @@ const PrintDialog = () => {
             type="range"
             className="w-full h-4 my-2 rounded-full overflow-hidden appearance-none focus:outline-none bg-gray-400"
             value={quality}
-            onChange={(e) => setQuality(e.target.value)}
+            onChange={e => setQuality(e.target.value)}
             min="40"
             max="100"
             step="5"
@@ -58,13 +58,16 @@ const PrintDialog = () => {
           value={type}
           options={printTypes}
           onChange={setType}
-          optionItem={(x) => (
+          optionItem={x => (
             <option key={x.key} value={x.key}>
               {x.value}
             </option>
           )}
         />
 
+        <p className="my-3 text-xs text-gray-600">{t('printDialog.helpText.0')}</p>
+        <p className="my-3 text-xs text-gray-600">{t('printDialog.helpText.1')}</p>
+
         <div className="flex justify-between">
           <button
             type="button"
diff --git a/src/templates/castform/Castform.js b/src/templates/castform/Castform.js
index 157485d0..69195ec4 100644
--- a/src/templates/castform/Castform.js
+++ b/src/templates/castform/Castform.js
@@ -78,7 +78,7 @@ const Castform = () => {
     </div>
   );
 
-  const SkillItem = (x) => (
+  const SkillItem = x => (
     <li key={x} className="text-sm my-2">
       {x}
     </li>
@@ -96,8 +96,8 @@ const Castform = () => {
   const Objective = () =>
     data.objective && data.objective.enable && <p className="m-5 text-sm">{data.objective.body}</p>;
 
-  const WorkItem = (x) => (
-    <div key={x.title} className="my-3 px-5">
+  const WorkItem = x => (
+    <div key={x.id} className="my-3 px-5">
       <div className="flex justify-between">
         <div>
           <h6 className="font-semibold">{x.title}</h6>
@@ -116,11 +116,11 @@ const Castform = () => {
     data.work.enable && (
       <div>
         <Heading light title={data.work.heading} />
-        {data.work.items.filter((x) => x.enable).map(WorkItem)}
+        {data.work.items.filter(x => x.enable).map(WorkItem)}
       </div>
     );
 
-  const ReferenceItem = (x) => (
+  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>
@@ -136,12 +136,12 @@ const Castform = () => {
       <div>
         <Heading light title={data.references.heading} />
         <div className="grid grid-cols-2 gap-6 px-5">
-          {data.references.items.filter((x) => x.enable).map(ReferenceItem)}
+          {data.references.items.filter(x => x.enable).map(ReferenceItem)}
         </div>
       </div>
     );
 
-  const LanguageItem = (x) => (
+  const LanguageItem = x => (
     <div key={x.id} className="flex flex-col my-2">
       <h6 className="text-sm font-medium mb-1">{x.key}</h6>
       <div className="relative h-5">
@@ -168,13 +168,13 @@ const Castform = () => {
       <div>
         <Heading title={data.languages.heading} />
         <div className="px-5 mb-6">
-          {data.languages.items.filter((x) => x.enable).map(LanguageItem)}
+          {data.languages.items.filter(x => x.enable).map(LanguageItem)}
         </div>
       </div>
     );
 
-  const EducationItem = (x) => (
-    <div key={x.name} className="my-3 px-5">
+  const EducationItem = x => (
+    <div key={x.id} className="my-3 px-5">
       <div className="flex justify-between">
         <div>
           <h6 className="font-semibold">{x.name}</h6>
@@ -196,12 +196,12 @@ const Castform = () => {
     data.education.enable && (
       <div>
         <Heading light title={data.education.heading} />
-        {data.education.items.filter((x) => x.enable).map(EducationItem)}
+        {data.education.items.filter(x => x.enable).map(EducationItem)}
       </div>
     );
 
-  const AwardItem = (x) => (
-    <div key={x.title} className="my-3 px-5">
+  const AwardItem = x => (
+    <div key={x.id} className="my-3 px-5">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
       <ReactMarkdown className="mt-2 text-sm" source={x.description} />
@@ -213,12 +213,12 @@ const Castform = () => {
     data.awards.enable && (
       <div>
         <Heading light title={data.awards.heading} />
-        {data.awards.items.filter((x) => x.enable).map(AwardItem)}
+        {data.awards.items.filter(x => x.enable).map(AwardItem)}
       </div>
     );
 
-  const CertificationItem = (x) => (
-    <div key={x.title} className="my-3 px-5">
+  const CertificationItem = x => (
+    <div key={x.id} className="my-3 px-5">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
       <ReactMarkdown className="mt-2 text-sm" source={x.description} />
@@ -230,11 +230,11 @@ const Castform = () => {
     data.certifications.enable && (
       <div>
         <Heading title={data.certifications.heading} />
-        {data.certifications.items.filter((x) => x.enable).map(CertificationItem)}
+        {data.certifications.items.filter(x => x.enable).map(CertificationItem)}
       </div>
     );
 
-  const ExtraItem = (x) => (
+  const ExtraItem = x => (
     <div key={x.id} className="px-5 my-2">
       <h6 className="text-xs font-bold">{x.key}</h6>
       <div className="text-sm">{x.value}</div>
@@ -246,7 +246,7 @@ const Castform = () => {
     data.extras.enable && (
       <div>
         <Heading title={data.extras.heading} />
-        {data.extras.items.filter((x) => x.enable).map(ExtraItem)}
+        {data.extras.items.filter(x => x.enable).map(ExtraItem)}
       </div>
     );
 
diff --git a/src/templates/celebi/Celebi.js b/src/templates/celebi/Celebi.js
index cc039de7..2e548a52 100644
--- a/src/templates/celebi/Celebi.js
+++ b/src/templates/celebi/Celebi.js
@@ -98,7 +98,7 @@ const Celebi = () => {
   );
 
   const WorkItem = x => (
-    <div key={x.title} className="my-3 mr-10">
+    <div key={x.id} className="my-3 mr-10">
       <div>
         <h6 className="font-semibold">{x.title}</h6>
         <p className="text-xs text-gray-800">
@@ -119,7 +119,7 @@ const Celebi = () => {
     );
 
   const EducationItem = x => (
-    <div key={x.name} className="my-3 mr-10">
+    <div key={x.id} className="my-3 mr-10">
       <h6 className="font-semibold">{x.name}</h6>
       <p className="text-xs">{x.major}</p>
       <div className="text-xs">
@@ -196,7 +196,7 @@ const Celebi = () => {
     );
 
   const AwardItem = x => (
-    <div key={x.title} className="my-2">
+    <div key={x.id} className="my-2">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
       <ReactMarkdown className="mt-2 text-sm" source={x.description} />
@@ -213,7 +213,7 @@ const Celebi = () => {
     );
 
   const CertificationItem = x => (
-    <div key={x.title} className="my-2">
+    <div key={x.id} className="my-2">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
       <ReactMarkdown className="mt-2 text-sm" source={x.description} />
diff --git a/src/templates/gengar/Gengar.js b/src/templates/gengar/Gengar.js
index 6628af1f..c271d26a 100644
--- a/src/templates/gengar/Gengar.js
+++ b/src/templates/gengar/Gengar.js
@@ -63,7 +63,7 @@ const Gengar = () => {
       </div>
     );
 
-  const SkillItem = (x) => (
+  const SkillItem = x => (
     <li key={x} className="text-sm py-1">
       {x}
     </li>
@@ -78,8 +78,8 @@ const Gengar = () => {
       </div>
     );
 
-  const EducationItem = (x) => (
-    <div key={x.name} className="mb-3">
+  const EducationItem = x => (
+    <div key={x.id} className="mb-3">
       <div className="flex justify-between items-center">
         <div>
           <h6 className="font-semibold">
@@ -109,12 +109,12 @@ const Gengar = () => {
     data.education.enable && (
       <div className="mb-6">
         <Heading title={data.education.heading} />
-        {data.education.items.filter((x) => x.enable).map(EducationItem)}
+        {data.education.items.filter(x => x.enable).map(EducationItem)}
       </div>
     );
 
-  const CertificationItem = (x) => (
-    <div key={x.title} className="mb-3">
+  const CertificationItem = x => (
+    <div key={x.id} className="mb-3">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
       <ReactMarkdown className="mt-2 text-sm" source={x.description} />
@@ -126,12 +126,12 @@ const Gengar = () => {
     data.certifications.enable && (
       <div className="mb-6">
         <Heading title={data.certifications.heading} />
-        {data.certifications.items.filter((x) => x.enable).map(CertificationItem)}
+        {data.certifications.items.filter(x => x.enable).map(CertificationItem)}
       </div>
     );
 
-  const AwardItem = (x) => (
-    <div key={x.title} className="mb-3">
+  const AwardItem = x => (
+    <div key={x.id} className="mb-3">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
       <ReactMarkdown className="mt-2 text-sm" source={x.description} />
@@ -143,11 +143,11 @@ const Gengar = () => {
     data.awards.enable && (
       <div className="mb-6">
         <Heading title={data.awards.heading} />
-        {data.awards.items.filter((x) => x.enable).map(AwardItem)}
+        {data.awards.items.filter(x => x.enable).map(AwardItem)}
       </div>
     );
 
-  const ReferenceItem = (x) => (
+  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>
@@ -163,13 +163,13 @@ const Gengar = () => {
       <div>
         <Heading title={data.references.heading} />
         <div className="grid grid-cols-2 gap-6">
-          {data.references.items.filter((x) => x.enable).map(ReferenceItem)}
+          {data.references.items.filter(x => x.enable).map(ReferenceItem)}
         </div>
       </div>
     );
 
-  const WorkItem = (x) => (
-    <div key={x.title} className="mb-3">
+  const WorkItem = x => (
+    <div key={x.id} className="mb-3">
       <div className="flex justify-between items-center">
         <div>
           <h6 className="font-semibold">{x.title}</h6>
@@ -188,11 +188,11 @@ const Gengar = () => {
     data.work.enable && (
       <div className="mb-6">
         <Heading title={data.work.heading} />
-        {data.work.items.filter((x) => x.enable).map(WorkItem)}
+        {data.work.items.filter(x => x.enable).map(WorkItem)}
       </div>
     );
 
-  const LanguageItem = (x) => (
+  const LanguageItem = x => (
     <div key={x.id} className="grid grid-cols-2 items-center py-2">
       <h6 className="text-sm font-medium">{x.key}</h6>
       <div className="flex">
@@ -210,11 +210,11 @@ const Gengar = () => {
     data.languages.enable && (
       <div>
         <Heading title={data.languages.heading} />
-        <div className="mb-6">{data.languages.items.filter((x) => x.enable).map(LanguageItem)}</div>
+        <div className="mb-6">{data.languages.items.filter(x => x.enable).map(LanguageItem)}</div>
       </div>
     );
 
-  const ExtraItem = (x) => (
+  const ExtraItem = x => (
     <div key={x.id} className="text-sm my-1">
       <h6 className="text-xs font-bold">{x.key}</h6>
       <h6>{x.value}</h6>
@@ -227,7 +227,7 @@ const Gengar = () => {
       <div>
         <Heading title={data.extras.heading} />
         <div className="grid grid-cols-2">
-          {data.extras.items.filter((x) => x.enable).map(ExtraItem)}
+          {data.extras.items.filter(x => x.enable).map(ExtraItem)}
         </div>
       </div>
     );
diff --git a/src/templates/glalie/Glalie.js b/src/templates/glalie/Glalie.js
index 07966428..300a408f 100644
--- a/src/templates/glalie/Glalie.js
+++ b/src/templates/glalie/Glalie.js
@@ -95,8 +95,8 @@ const Glalie = () => {
       </div>
     );
 
-  const WorkItem = (x) => (
-    <div key={x.title} className="mt-3">
+  const WorkItem = x => (
+    <div key={x.id} className="mt-3">
       <div className="flex justify-between">
         <div>
           <h6 className="font-semibold text-sm">{x.title}</h6>
@@ -114,12 +114,12 @@ const Glalie = () => {
     data.work.enable && (
       <div>
         <Heading title={data.work.heading} />
-        {data.work.items.filter((x) => x.enable).map(WorkItem)}
+        {data.work.items.filter(x => x.enable).map(WorkItem)}
       </div>
     );
 
-  const EducationItem = (x) => (
-    <div key={x.name} className="mt-3">
+  const EducationItem = x => (
+    <div key={x.id} className="mt-3">
       <div>
         <h6 className="font-semibold text-xs">{x.name}</h6>
         <p className="text-xs opacity-75">{x.major}</p>
@@ -137,13 +137,13 @@ const Glalie = () => {
       <div>
         <Heading title={data.education.heading} />
         <div className="grid grid-cols-2 gap-4">
-          {data.education.items.filter((x) => x.enable).map(EducationItem)}
+          {data.education.items.filter(x => x.enable).map(EducationItem)}
         </div>
       </div>
     );
 
-  const AwardItem = (x) => (
-    <div key={x.title} className="mt-3 text-left">
+  const AwardItem = x => (
+    <div key={x.id} 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} />
@@ -155,12 +155,12 @@ const Glalie = () => {
     data.awards.enable && (
       <div>
         <Heading title={data.awards.heading} />
-        {data.awards.items.filter((x) => x.enable).map(AwardItem)}
+        {data.awards.items.filter(x => x.enable).map(AwardItem)}
       </div>
     );
 
-  const CertificationItem = (x) => (
-    <div key={x.title} className="mt-3 text-left">
+  const CertificationItem = x => (
+    <div key={x.id} 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} />
@@ -172,11 +172,11 @@ const Glalie = () => {
     data.certifications.enable && (
       <div>
         <Heading title={data.certifications.heading} />
-        {data.certifications.items.filter((x) => x.enable).map(CertificationItem)}
+        {data.certifications.items.filter(x => x.enable).map(CertificationItem)}
       </div>
     );
 
-  const SkillItem = (x) => (
+  const SkillItem = x => (
     <li key={x} className="text-xs font-medium">
       {x}
     </li>
@@ -191,7 +191,7 @@ const Glalie = () => {
       </div>
     );
 
-  const LanguageItem = (x) => (
+  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">
@@ -209,13 +209,11 @@ const Glalie = () => {
     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 className="w-3/4">{data.languages.items.filter(x => x.enable).map(LanguageItem)}</div>
       </div>
     );
 
-  const ReferenceItem = (x) => (
+  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>
@@ -231,12 +229,12 @@ const Glalie = () => {
       <div>
         <Heading title={data.references.heading} />
         <div className="grid grid-cols-3 gap-8">
-          {data.references.items.filter((x) => x.enable).map(ReferenceItem)}
+          {data.references.items.filter(x => x.enable).map(ReferenceItem)}
         </div>
       </div>
     );
 
-  const ExtraItem = (x) => (
+  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>
@@ -249,7 +247,7 @@ const Glalie = () => {
       <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>
+          <tbody>{data.extras.items.filter(x => x.enable).map(ExtraItem)}</tbody>
         </table>
       </div>
     );
diff --git a/src/templates/onyx/Onyx.js b/src/templates/onyx/Onyx.js
index e8eeef7b..69134e09 100644
--- a/src/templates/onyx/Onyx.js
+++ b/src/templates/onyx/Onyx.js
@@ -60,8 +60,8 @@ const Onyx = () => {
       </div>
     );
 
-  const WorkItem = (x) => (
-    <div key={x.title} className="mt-3">
+  const WorkItem = x => (
+    <div key={x.id} className="mt-3">
       <div className="flex justify-between">
         <div>
           <h6 className="font-semibold">{x.title}</h6>
@@ -80,12 +80,12 @@ const Onyx = () => {
     data.work.enable && (
       <div>
         <Heading title={data.work.heading} />
-        {data.work.items.filter((x) => x.enable).map(WorkItem)}
+        {data.work.items.filter(x => x.enable).map(WorkItem)}
       </div>
     );
 
-  const EducationItem = (x) => (
-    <div key={x.name} className="mt-3">
+  const EducationItem = x => (
+    <div key={x.id} className="mt-3">
       <div className="flex justify-between">
         <div>
           <h6 className="font-semibold">{x.name}</h6>
@@ -107,12 +107,12 @@ const Onyx = () => {
     data.education.enable && (
       <div>
         <Heading title={data.education.heading} />
-        {data.education.items.filter((x) => x.enable).map(EducationItem)}
+        {data.education.items.filter(x => x.enable).map(EducationItem)}
       </div>
     );
 
-  const AwardItem = (x) => (
-    <div key={x.title} className="mt-3">
+  const AwardItem = x => (
+    <div key={x.id} className="mt-3">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
       <ReactMarkdown className="mt-2 text-sm" source={x.description} />
@@ -124,12 +124,12 @@ const Onyx = () => {
     data.awards.enable && (
       <div>
         <Heading title={data.awards.heading} />
-        {data.awards.items.filter((x) => x.enable).map(AwardItem)}
+        {data.awards.items.filter(x => x.enable).map(AwardItem)}
       </div>
     );
 
-  const CertificationItem = (x) => (
-    <div key={x.title} className="mt-3">
+  const CertificationItem = x => (
+    <div key={x.id} className="mt-3">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
       <ReactMarkdown className="mt-2 text-sm" source={x.description} />
@@ -141,11 +141,11 @@ const Onyx = () => {
     data.certifications.enable && (
       <div>
         <Heading title={data.certifications.heading} />
-        {data.certifications.items.filter((x) => x.enable).map(CertificationItem)}
+        {data.certifications.items.filter(x => x.enable).map(CertificationItem)}
       </div>
     );
 
-  const SkillItem = (x) => (
+  const SkillItem = x => (
     <span
       key={x}
       className="text-xs rounded-full px-3 py-1 font-medium my-2 mr-2"
@@ -167,7 +167,7 @@ const Onyx = () => {
       </div>
     );
 
-  const LanguageItem = (x) => (
+  const LanguageItem = x => (
     <div key={x.id} className="grid grid-cols-2 items-center py-2">
       <h6 className="text-sm font-medium">{x.key}</h6>
       <div className="flex">
@@ -185,13 +185,11 @@ const Onyx = () => {
     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 className="w-3/4">{data.languages.items.filter(x => x.enable).map(LanguageItem)}</div>
       </div>
     );
 
-  const ReferenceItem = (x) => (
+  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>
@@ -207,12 +205,12 @@ const Onyx = () => {
       <div>
         <Heading title={data.references.heading} />
         <div className="grid grid-cols-3 gap-6">
-          {data.references.items.filter((x) => x.enable).map(ReferenceItem)}
+          {data.references.items.filter(x => x.enable).map(ReferenceItem)}
         </div>
       </div>
     );
 
-  const ExtraItem = (x) => (
+  const ExtraItem = x => (
     <tr key={x.id}>
       <td className="border font-medium px-4 py-2 text-sm">{x.key}</td>
       <td className="border px-4 py-2 text-sm">{x.value}</td>
@@ -225,7 +223,7 @@ const Onyx = () => {
       <div>
         <Heading title={data.extras.heading} />
         <table className="w-2/3 table-auto">
-          <tbody>{data.extras.items.filter((x) => x.enable).map(ExtraItem)}</tbody>
+          <tbody>{data.extras.items.filter(x => x.enable).map(ExtraItem)}</tbody>
         </table>
       </div>
     );
diff --git a/src/templates/pikachu/Pikachu.js b/src/templates/pikachu/Pikachu.js
index 40a8c741..cb498ae3 100644
--- a/src/templates/pikachu/Pikachu.js
+++ b/src/templates/pikachu/Pikachu.js
@@ -58,7 +58,7 @@ const Pikachu = () => {
     </div>
   );
 
-  const SkillItem = (x) => (
+  const SkillItem = x => (
     <span
       key={x}
       className="leading-none rounded-lg text-sm font-medium bg-gray-300 py-3 my-1 px-4"
@@ -76,7 +76,7 @@ const Pikachu = () => {
       </div>
     );
 
-  const ReferenceItem = (x) => (
+  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>
@@ -92,12 +92,12 @@ const Pikachu = () => {
       <div>
         <Heading title={data.references.heading} />
         <div className="grid grid-cols-2 gap-6">
-          {data.references.items.filter((x) => x.enable).map(ReferenceItem)}
+          {data.references.items.filter(x => x.enable).map(ReferenceItem)}
         </div>
       </div>
     );
 
-  const LanguageItem = (x) => (
+  const LanguageItem = x => (
     <div key={x.id} className="grid grid-cols-2 items-center py-2">
       <h6 className="text-sm font-medium">{x.key}</h6>
       <div className="flex">
@@ -115,11 +115,11 @@ const Pikachu = () => {
     data.languages.enable && (
       <div>
         <Heading title={data.languages.heading} />
-        <div className="mb-6">{data.languages.items.filter((x) => x.enable).map(LanguageItem)}</div>
+        <div className="mb-6">{data.languages.items.filter(x => x.enable).map(LanguageItem)}</div>
       </div>
     );
 
-  const ExtraItem = (x) => (
+  const ExtraItem = x => (
     <div key={x.id} className="text-sm my-1">
       <h6 className="text-xs font-bold">{x.key}</h6>
       <h6 className="">{x.value}</h6>
@@ -132,13 +132,13 @@ const Pikachu = () => {
       <div>
         <Heading title={data.extras.heading} />
         <div className="flex flex-col mb-6">
-          {data.extras.items.filter((x) => x.enable).map(ExtraItem)}
+          {data.extras.items.filter(x => x.enable).map(ExtraItem)}
         </div>
       </div>
     );
 
-  const WorkItem = (x) => (
-    <div key={x.title} className="mb-3">
+  const WorkItem = x => (
+    <div key={x.id} className="mb-3">
       <div className="flex justify-between items-center">
         <div>
           <h6 className="font-semibold">{x.title}</h6>
@@ -158,13 +158,13 @@ const Pikachu = () => {
       <div>
         <Heading title={data.work.heading} />
         <div className="flex flex-col mb-4">
-          {data.work.items.filter((x) => x.enable).map(WorkItem)}
+          {data.work.items.filter(x => x.enable).map(WorkItem)}
         </div>
       </div>
     );
 
-  const EducationItem = (x) => (
-    <div key={x.name} className="mb-3">
+  const EducationItem = x => (
+    <div key={x.id} className="mb-3">
       <div className="flex justify-between items-center">
         <div>
           <h6 className="font-semibold">{x.name}</h6>
@@ -189,13 +189,13 @@ const Pikachu = () => {
       <div>
         <Heading title={data.education.heading} />
         <div className="flex flex-col mb-4">
-          {data.education.items.filter((x) => x.enable).map(EducationItem)}
+          {data.education.items.filter(x => x.enable).map(EducationItem)}
         </div>
       </div>
     );
 
-  const AwardItem = (x) => (
-    <div key={x.title} className="mb-3">
+  const AwardItem = x => (
+    <div key={x.id} className="mb-3">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
       <ReactMarkdown className="mt-2 text-sm" source={x.description} />
@@ -208,13 +208,13 @@ const Pikachu = () => {
       <div>
         <Heading title={data.awards.heading} />
         <div className="flex flex-col mb-2">
-          {data.awards.items.filter((x) => x.enable).map(AwardItem)}
+          {data.awards.items.filter(x => x.enable).map(AwardItem)}
         </div>
       </div>
     );
 
-  const CertificationItem = (x) => (
-    <div key={x.title} className="mb-3">
+  const CertificationItem = x => (
+    <div key={x.id} className="mb-3">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
       <ReactMarkdown className="mt-2 text-sm" source={x.description} />
@@ -227,7 +227,7 @@ const Pikachu = () => {
       <div>
         <Heading title={data.certifications.heading} />
         <div className="flex flex-col mb-2">
-          {data.certifications.items.filter((x) => x.enable).map(CertificationItem)}
+          {data.certifications.items.filter(x => x.enable).map(CertificationItem)}
         </div>
       </div>
     );
diff --git a/src/utils/index.js b/src/utils/index.js
index f9cf775a..0fab0818 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -10,7 +10,7 @@ const move = (array, element, delta) => {
   array.splice(indexes[0], 2, array[indexes[1]], array[indexes[0]]);
 };
 
-const hexToRgb = (hex) => {
+const hexToRgb = hex => {
   const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
   hex = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b);
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
@@ -23,7 +23,7 @@ const hexToRgb = (hex) => {
     : null;
 };
 
-const copyToClipboard = (text) => {
+const copyToClipboard = text => {
   const textArea = document.createElement('textarea');
   textArea.style.position = 'fixed';
   textArea.style.top = 0;
@@ -44,7 +44,7 @@ const copyToClipboard = (text) => {
   return successful;
 };
 
-const saveData = (dispatch) => dispatch({ type: 'save_data' });
+const saveData = dispatch => dispatch({ type: 'save_data' });
 
 const addItem = (dispatch, key, value) => {
   dispatch({
@@ -105,7 +105,7 @@ const importJson = (event, dispatch) => {
 };
 
 const saveAsPdf = (pageRef, panZoomRef, quality, type) =>
-  new Promise((resolve) => {
+  new Promise(resolve => {
     panZoomRef.current.autoCenter(1);
     panZoomRef.current.reset();
 
@@ -114,7 +114,7 @@ const saveAsPdf = (pageRef, panZoomRef, quality, type) =>
         scale: 5,
         useCORS: true,
         allowTaint: true,
-      }).then((canvas) => {
+      }).then(canvas => {
         const image = canvas.toDataURL('image/jpeg', quality / 100);
         const doc = new jsPDF({
           orientation: 'portrait',
@@ -148,7 +148,7 @@ const saveAsPdf = (pageRef, panZoomRef, quality, type) =>
   });
 
 const saveAsMultiPagePdf = (pageRef, panZoomRef, quality) =>
-  new Promise((resolve) => {
+  new Promise(resolve => {
     panZoomRef.current.autoCenter(1);
     panZoomRef.current.reset();
 
@@ -157,7 +157,7 @@ const saveAsMultiPagePdf = (pageRef, panZoomRef, quality) =>
         scale: 5,
         useCORS: true,
         allowTaint: true,
-      }).then((canvas) => {
+      }).then(canvas => {
         const image = canvas.toDataURL('image/jpeg', quality / 100);
         const doc = new jsPDF({
           orientation: 'portrait',