diff --git a/ui/components/Form/Form.vue b/ui/components/Form/Form.vue
index 180201a8..82905614 100644
--- a/ui/components/Form/Form.vue
+++ b/ui/components/Form/Form.vue
@@ -7,6 +7,7 @@
           @save="save"
           @submit="submit"
           @revert="revert"
+          @print="print"
         />
         <div class="p-3">
           <form-layout
@@ -120,6 +121,10 @@ export default {
       await this.save();
     },
 
+    print() {
+      this.$router.push(`/print/${this.doctype}/${this.name}`);
+    },
+
     onValidate(fieldname, isValid) {
       if (!isValid && !this.invalidFields.includes(fieldname)) {
         this.invalidFields.push(fieldname);
diff --git a/ui/components/Form/FormActions.vue b/ui/components/Form/FormActions.vue
index cb469f54..1b346a1a 100644
--- a/ui/components/Form/FormActions.vue
+++ b/ui/components/Form/FormActions.vue
@@ -5,10 +5,12 @@
       <f-button primary v-if="showSave" :disabled="disableSave" @click="$emit('save')">{{ _('Save') }}</f-button>
       <f-button primary v-if="showSubmit" @click="$emit('submit')">{{ _('Submit') }}</f-button>
       <f-button secondary v-if="showRevert" @click="$emit('revert')">{{ _('Revert') }}</f-button>
+      <f-button secondary @click="$emit('print')">{{ _('Print') }}</f-button>
       <dropdown class="ml-2" v-if="showNextAction" :label="_('Actions')" :options="links"></dropdown>
     </div>
   </div>
 </template>
+
 <script>
 import frappe from 'frappejs';
 import Dropdown from '../Dropdown';
diff --git a/ui/components/PrintView.vue b/ui/components/PrintView.vue
new file mode 100644
index 00000000..e0425710
--- /dev/null
+++ b/ui/components/PrintView.vue
@@ -0,0 +1,20 @@
+<template>
+  <div v-html="printTemplate"></div>
+</template>
+
+<script>
+import { getHTML } from '../../common/print.js';
+
+export default {
+  name: 'PrintView',
+  props: ['doctype', 'name'],
+  data() {
+    return {
+      printTemplate: ''
+    }
+  },
+  async created(vm) {
+    this.printTemplate = await getHTML(this.doctype, this.name);
+  },
+}
+</script>
diff --git a/ui/pages/ListAndPrintView.vue b/ui/pages/ListAndPrintView.vue
new file mode 100644
index 00000000..97b0f0c4
--- /dev/null
+++ b/ui/pages/ListAndPrintView.vue
@@ -0,0 +1,27 @@
+<template>
+    <div class="frappe-list-form row no-gutters">
+        <div class="col-4 border-right">
+            <frappe-list :doctype="doctype" :filters="filters" :key="doctype" />
+        </div>
+        <div class="col-8">
+            <print-view v-if="name" :key="doctype + name" :doctype="doctype" :name="name" @save="onSave" />
+        </div>
+    </div>
+</template>
+<script>
+import List from '../components/List/List';
+import PrintView from '../components/PrintView';
+
+export default {
+    props: ['doctype', 'name', 'filters'],
+    components: {
+        FrappeList: List,
+        PrintView: PrintView,
+    },
+}
+</script>
+<style>
+.frappe-list-form {
+    min-height: calc(100vh - 4rem);
+}
+</style>
diff --git a/ui/routes/index.js b/ui/routes/index.js
index 5c1eef87..e713e42e 100644
--- a/ui/routes/index.js
+++ b/ui/routes/index.js
@@ -1,4 +1,5 @@
 import ListAndForm from '../pages/ListAndForm';
+import ListAndPrintView from '../pages/ListAndPrintView';
 
 export default [
   {
@@ -12,5 +13,11 @@ export default [
     name: 'Form',
     component: ListAndForm,
     props: true
+  },
+  {
+    path: '/print/:doctype/:name',
+    name: 'PrintView',
+    component: ListAndPrintView,
+    props: true
   }
 ];