diff --git a/package.json b/package.json
index da46f63f..6475ed3f 100644
--- a/package.json
+++ b/package.json
@@ -14,14 +14,12 @@
     "dev": "node build/dev-server.js",
     "start": "node build/dev-server.js",
     "pdf": "node scripts/export.js",
-    "preview": "node scripts/preview.js",
     "test:deleteFiles": "node test/scripts/deleteFiles.js",
     "test:cafe": "testcafe chromium test/",
     "test:e2e": "concurrently \"npm run dev\" \"npm run test:cafe\" --success first --kill-others --raw",
     "test:export": "SCRIPT=export npm run test:deleteFiles && npm run export && mocha test/scripts/export.js",
-    "test:preview": "SCRIPT=preview npm run test:deleteFiles && npm run preview && mocha test/scripts/preview.js",
     "test:docs": "npm run docs && concurrently \"npm run docs:serve\" \"npm run test:cafe\" --success first --kill-others --raw",
-    "test": "npm run test:export && npm run test:preview && npm run test:docs && npm run test:e2e",
+    "test": "npm run test:export && npm run test:docs && npm run test:e2e",
     "export": "concurrently \"npm run dev\" \"npm run pdf\" --success first --kill-others --raw",
     "lint": "eslint --ext .js,.vue src scripts",
     "lint:fix": "eslint --ext .js,.vue src scripts --fix"
@@ -82,7 +80,6 @@
     "opn": "5.4.0",
     "optimize-css-assets-webpack-plugin": "5.0.1",
     "ora": "3.0.0",
-    "pdf-image": "2.0.0",
     "postcss": "7.0.4",
     "postcss-cssnext": "3.1.0",
     "puppeteer": "1.8.0",
diff --git a/scripts/export.js b/scripts/export.js
index 2a18da1e..32cab9a9 100755
--- a/scripts/export.js
+++ b/scripts/export.js
@@ -53,6 +53,8 @@ const convert = async () => {
     console.log('Exporting ...');
     try {
         const fullDirectoryPath = path.join(__dirname, '../pdf/');
+        const previewOutPath = path.join(__dirname, '../src/assets/preview/resume-');
+        const printCSSPath = path.join(__dirname, '../src/assets/css/');
         const directories = getResumesFromDirectories();
         directories.forEach(async (dir) => {
             const browser = await puppeteer.launch({
@@ -68,10 +70,18 @@ const convert = async () => {
             ) {
                 fs.mkdirSync(fullDirectoryPath);
             }
+            await page.addStyleTag({path: printCSSPath + 'print.css'});
+            await page.emulateMedia('print');
+            await page.screenshot({
+                path: previewOutPath + dir.name + '.png',
+                fullPage: true,
+                omitBackground: false
+            });
             await page.pdf({
                 path: fullDirectoryPath + dir.name + '.pdf',
                 format: 'A4'
             });
+            await page.close();
             await browser.close();
         });
     } catch (err) {
diff --git a/scripts/preview.js b/scripts/preview.js
deleted file mode 100755
index a6c28136..00000000
--- a/scripts/preview.js
+++ /dev/null
@@ -1,33 +0,0 @@
-const mv = require('mv');
-const PDFImage = require('pdf-image').PDFImage;
-const path = require('path');
-const fs = require('fs');
-
-const getDirectories = () => {
-    const srcpath = path.join(__dirname, '../pdf');
-    return fs.readdirSync(srcpath);
-};
-
-const getTemplateName = PDF => {
-    return PDF.replace('.pdf', '');
-};
-
-const convert = async (PDF) => {
-    const pdfImage = new PDFImage(path.join(__dirname, '../pdf/' + PDF));
-    await pdfImage.convertPage(0);
-};
-
-const directories = getDirectories();
-directories.forEach(async (dir) => {
-    try {
-        await convert(dir);
-    } catch (e) {
-        console.dir(e);
-    }
-    const source = path.join(__dirname, '../pdf/' + getTemplateName(dir) + '-0.png');
-    const output = path.join(__dirname, '../src/assets/preview/resume-' + getTemplateName(dir) + '.png');
-    console.log(output);
-    mv(source, output, function (err) {
-        if (err) console.dir(err);
-    });
-});
diff --git a/src/App.vue b/src/App.vue
index ecacb3ff..1106bd26 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -24,6 +24,6 @@ body {
   padding: 0;
   margin: 0;
   overflow-x: hidden;
-  background: #CCCCCC;
+  background: #f2f2f2;
 }
 </style>
diff --git a/src/assets/css/print.css b/src/assets/css/print.css
new file mode 100644
index 00000000..ceffffdb
--- /dev/null
+++ b/src/assets/css/print.css
@@ -0,0 +1,20 @@
+  @page {
+    size:A4;
+    margin:0;
+  }
+  html,body{
+    width: 210mm;
+    height: 297mm;
+    font-size: 11px;
+    background: #FFF;
+    overflow:visible;
+  }
+  body {
+    display: table;
+    table-layout: fixed;
+  }
+  html,body,.page-wrapper,.page{padding:0;margin:0;page-break-after:always}
+  .page{width:210mm}
+  .page,.page-wrapper,.page-inner{height:297mm}
+  .section-content{padding-left:0!important}
+  body,.page-wrapper{padding:0!important}
\ No newline at end of file
diff --git a/src/pages/resume.vue b/src/pages/resume.vue
index 22c1ec52..9f7eac9d 100755
--- a/src/pages/resume.vue
+++ b/src/pages/resume.vue
@@ -23,7 +23,7 @@ export default Vue.component('resume', {
 }
 .page-wrapper {
   overflow-x: hidden;
-  background: #CCCCCC;
+  background: transparent;
   margin: 0;
   padding: 0;
   -webkit-print-color-adjust: exact;
@@ -45,3 +45,19 @@ export default Vue.component('resume', {
   overflow: hidden;
 }
 </style>
+<style>
+@media not print {
+  .page {
+    max-width: 1000px;
+    width:90%;
+    height:auto;
+    margin:30px auto;
+    position: relative;
+    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.1);
+    -moz-box-shadow: 0 2px 4px rgba(0,0,0,.1);
+    box-shadow: 0 2px 4px rgba(0,0,0,.1);
+  }
+  .content__left,.content__right{height:auto!important}
+  body{padding:30px!important}
+}
+</style>
diff --git a/test/scripts/preview.js b/test/scripts/preview.js
deleted file mode 100755
index 9ace94c4..00000000
--- a/test/scripts/preview.js
+++ /dev/null
@@ -1,17 +0,0 @@
-const mocha = require('mocha');
-const assert = require('assert');
-const path = require('path');
-const fs = require('fs');
-const describe = mocha.describe;
-const it = mocha.it;
-const allResumes = require('./allResumes');
-
-describe('npm run preview', () => {
-  it('should have generated the png files', () => {
-    const resumes = allResumes();
-    resumes.forEach(resume => {
-      const p = path.join(__dirname, '../../src/assets/preview/resume-' + resume.path + '.png');
-      assert.ok(fs.existsSync(p));
-    });
-  });
-});